refactor(stage-web): settings UI

moeru-ai · Feb 21, 2025 · 3aefe2c · 3aefe2c
1 parent 296e592
commit 3aefe2c
Show file tree

Hide file tree

Showing 10 changed files with 313 additions and 259 deletions.
diff --git a/apps/stage-web/locales/en.yml b/apps/stage-web/locales/en.yml
@@ -52,6 +52,8 @@ settings:
     english: English
     title: Language
   microphone: Microphone
+  model-provider:
+    title: Model Providers
   models: Model
   openai-api-key:
     label: OpenAI API Key
@@ -61,6 +63,7 @@ settings:
     label: OpenAI API BaseURL
     placeholder: Input your API base URL
     placeholder_mobile: OpenAI API BaseURL
+  theme: Theme
   title: Settings
   voices: Voice
 stage:

diff --git a/apps/stage-web/locales/zh-CN.yml b/apps/stage-web/locales/zh-CN.yml
@@ -39,6 +39,8 @@ settings:
     chinese: 简体中文
     english: English
     title: 语言
+  model-provider:
+    title: 模型提供商
   models: 模型
   openai-api-key:
     label: OpenAI API 密钥
@@ -48,9 +50,15 @@ settings:
     label: OpenAI API BaseURL
     placeholder: 输入您的 API BaseURL
     placeholder_mobile: OpenAI BaseURL
+  theme: 主题颜色
   title: 设置
   voices: 声线
 stage:
+  chat:
+    message:
+      character-name:
+        airi: Airi
+        you: 你
   message: 消息
   select-a-audio-input: 选择一个音频输入设备
   select-a-model: 选择一个模型

diff --git a/apps/stage-web/package.json b/apps/stage-web/package.json
@@ -63,6 +63,7 @@
     "pinia": "^3.0.1",
     "pixi-filters": "^4.2.0",
     "pixi-live2d-display": "^0.4.0",
+    "radix-vue": "^1.9.16",
     "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",

diff --git a/apps/stage-web/src/components/Widgets/DesktopSettings.vue b/apps/stage-web/src/components/Widgets/DesktopSettings.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
+import { ref } from 'vue'
 
 import MobileSettings from './MobileSettings.vue'
+
+const isOpen = ref(false)
 </script>
 
 <template>
   <div flex="~" gap-2>
-    <DrawerRoot should-scale-background direction="right">
+    <DrawerRoot v-model:open="isOpen" should-scale-background direction="right">
       <DrawerTrigger
         bg="zinc-100 dark:zinc-800"
         text="lg zinc-500 dark:zinc-400"