chore(stage-ui,stage-tamagotchi): improved language & theme section

apps/stage-tamagotchi/src/pages/settings/appearance/general.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { useSettings } from '@proj-airi/stage-ui/stores'
+import { FieldCheckbox, FieldSelect, Option, Select } from '@proj-airi/ui'
 import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
-import CheckBar from '../../../components/Settings/CheckBar.vue'
-
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const settings = useSettings()
 const { allowVisibleOnAllWorkspaces } = storeToRefs(settings)
 
@@ -14,69 +13,73 @@ const dark = useDark()
 </script>
 
 <template>
-  <CheckBar
-    v-model="dark"
-    v-motion
-    mb-2
-    :initial="{ opacity: 0, y: 10 }"
-    :enter="{ opacity: 1, y: 0 }"
-    :duration="250 + (2 * 10)"
-    :delay="2 * 50"
-    icon-on="i-solar:moon-stars-bold-duotone"
-    icon-off="i-solar:sun-fog-bold-duotone"
-    text="settings.theme"
-    transition="all ease-in-out duration-250"
-  />
-  <CheckBar
-    v-model="allowVisibleOnAllWorkspaces"
-    v-motion
-    mb-2
-    :initial="{ opacity: 0, y: 10 }"
-    :enter="{ opacity: 1, y: 0 }"
-    :duration="250 + (2 * 10)"
-    :delay="2 * 50"
-    icon-on="i-solar:check-circle-bold"
-    icon-off="i-solar:close-circle-bold"
-    :text="t('tamagotchi.settings.allow-visible-on-all-workspaces.title')"
-    transition="all ease-in-out duration-250"
-  />
-  <!-- Language Setting -->
-  <div
-    v-motion
-    class="w-full flex items-center justify-between rounded-lg px-4 py-3 text-sm outline-none transition-all duration-250 ease-in-out"
-    bg="neutral-50 dark:neutral-800"
-    hover="bg-neutral-200 dark:bg-neutral-700"
-    :initial="{ opacity: 0, y: 10 }"
-    :enter="{ opacity: 1, y: 0 }"
-    :duration="250 + (3 * 10)"
-    :delay="3 * 50"
-    transition="all ease-in-out duration-250"
-  >
-    {{ $t('settings.language.title') }}
-    <select
-      v-model="settings.language"
-      transition="all ease-in-out duration-250"
-      cursor-pointer bg-transparent text-right outline-none
-    >
-      <option value="en-US">
-        {{ $t('settings.language.english') }}
-      </option>
-      <option value="zh-CN">
-        {{ $t('settings.language.chinese') }}
-      </option>
-    </select>
-  </div>
+  <div rounded-lg bg-neutral-50 p-4 dark:bg-neutral-800 flex="~ col gap-4">
+    <FieldCheckbox
+      v-model="dark"
+      v-motion
+      mb-2
+      :initial="{ opacity: 0, y: 10 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :duration="250 + (2 * 10)"
+      :delay="2 * 50"
+      :label="t('settings.theme.title')"
+      :description="t('settings.theme.description')"
+    />
+    <FieldCheckbox
+      v-model="allowVisibleOnAllWorkspaces"
+      v-motion
+      mb-2
+      :initial="{ opacity: 0, y: 10 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :duration="250 + (2 * 10)"
+      :delay="2 * 50"
+      :label="t('tamagotchi.settings.allow-visible-on-all-workspaces.title')"
+      :description="t('tamagotchi.settings.allow-visible-on-all-workspaces.description')"
+    />
 
-  <div
-    v-motion
-    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[65dvh]" right--15 z--1
-    :initial="{ scale: 0.9, opacity: 0, rotate: 30 }"
-    :enter="{ scale: 1, opacity: 1, rotate: 0 }"
-    :duration="250"
-    flex items-center justify-center
-  >
-    <div text="60" i-solar:emoji-funny-square-bold-duotone />
+    <!-- Language Setting -->
+    <FieldSelect
+      v-motion
+      :initial="{ opacity: 0, y: 10 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :duration="250 + (3 * 10)"
+      :delay="3 * 50"
+      transition="all ease-in-out duration-250"
+      :label="t('settings.language.title')"
+      :description="t('settings.language.description')"
+    >
+      <Select
+        v-model="settings.language"
+        transition="all ease-in-out duration-250"
+        cursor-pointer bg-transparent outline-none
+      >
+        <template #default="{ value }">
+          <div>
+            {{ value ? $t(`settings.language.${value}`) : t('settings.language.english') }}
+          </div>
+        </template>
+        <template #options="{ hide }">
+          <Option value="en" :active="locale === 'en'" @click="hide()">
+            {{ $t('settings.language.english') }}
+          </Option>
+          <Option value="zh-Hans" :active="locale === 'zh-Hans'" @click="hide()">
+            {{ $t('settings.language.chinese') }}
+          </Option>
+        </template>
+      </Select>
+    </FieldSelect>
+
+    <div
+      v-motion
+      text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+      fixed top="[65dvh]" right--15 z--1
+      :initial="{ scale: 0.9, opacity: 0, rotate: 30 }"
+      :enter="{ scale: 1, opacity: 1, rotate: 0 }"
+      :duration="250"
+      flex items-center justify-center
+    >
+      <div text="60" i-solar:emoji-funny-square-bold-duotone />
+    </div>
   </div>
 </template>
 

apps/stage-web/src/pages/settings/appearance/general.vue

@@ -1,65 +1,72 @@
 <script setup lang="ts">
 import { useSettings } from '@proj-airi/stage-ui/stores'
+import { FieldCheckbox, FieldSelect, Option, Select } from '@proj-airi/ui'
 import { useDark } from '@vueuse/core'
-
-import CheckBar from '../../../components/Settings/CheckBar.vue'
+import { useI18n } from 'vue-i18n'
 
 const settings = useSettings()
 
+const { t, locale } = useI18n()
 const dark = useDark()
 </script>
 
 <template>
-  <CheckBar
-    v-model="dark"
-    v-motion
-    mb-2
-    :initial="{ opacity: 0, y: 10 }"
-    :enter="{ opacity: 1, y: 0 }"
-    :duration="250 + (2 * 10)"
-    :delay="2 * 50"
-    icon-on="i-solar:moon-stars-bold-duotone"
-    icon-off="i-solar:sun-fog-bold-duotone"
-    text="settings.theme"
-    transition="all ease-in-out duration-250"
-  />
-  <!-- Language Setting -->
-  <div
-    v-motion
-    class="w-full flex items-center justify-between rounded-lg px-4 py-3 text-sm outline-none transition-all duration-250 ease-in-out"
-    bg="neutral-50 dark:neutral-800"
-    hover="bg-neutral-200 dark:bg-neutral-700"
-    :initial="{ opacity: 0, y: 10 }"
-    :enter="{ opacity: 1, y: 0 }"
-    :duration="250 + (3 * 10)"
-    :delay="3 * 50"
-    transition="all ease-in-out duration-250"
-  >
-    {{ $t('settings.language.title') }}
-    <select
-      v-model="settings.language"
-      transition="all ease-in-out duration-250"
-      cursor-pointer bg-transparent text-right outline-none
-    >
-      <option value="en">
-        {{ $t('settings.language.english') }}
-      </option>
-      <option value="zh-Hans">
-        {{ $t('settings.language.chinese') }}
-      </option>
-    </select>
-  </div>
+  <div rounded-lg bg-neutral-50 p-4 dark:bg-neutral-800 flex="~ col gap-4">
+    <FieldCheckbox
+      v-model="dark"
+      v-motion
+      mb-2
+      :initial="{ opacity: 0, y: 10 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :duration="250 + (2 * 10)"
+      :delay="2 * 50"
+      :label="t('settings.theme.title')"
+      :description="t('settings.theme.description')"
+    />
 
-  <div
-    v-motion
-    text="neutral-200/50 dark:neutral-600/20" pointer-events-none
-    fixed top="[65dvh]" right--15 z--1
-    :initial="{ scale: 0.9, opacity: 0, rotate: 30 }"
-    :enter="{ scale: 1, opacity: 1, rotate: 0 }"
-    :duration="250"
-    flex items-center justify-center
-  >
-    <div text="60" i-solar:emoji-funny-square-bold-duotone />
+    <!-- Language Setting -->
+    <FieldSelect
+      v-motion
+      :initial="{ opacity: 0, y: 10 }"
+      :enter="{ opacity: 1, y: 0 }"
+      :duration="250 + (3 * 10)"
+      :delay="3 * 50"
+      transition="all ease-in-out duration-250"
+      :label="t('settings.language.title')"
+      :description="t('settings.language.description')"
+    >
+      <Select
+        v-model="settings.language"
+        transition="all ease-in-out duration-250"
+        cursor-pointer bg-transparent outline-none
+      >
+        <template #default="{ value }">
+          <div>
+            {{ value ? $t(`settings.language.${value}`) : t('settings.language.english') }}
+          </div>
+        </template>
+        <template #options="{ hide }">
+          <Option value="en" :active="locale === 'en'" @click="hide()">
+            {{ $t('settings.language.english') }}
+          </Option>
+          <Option value="zh-Hans" :active="locale === 'zh-Hans'" @click="hide()">
+            {{ $t('settings.language.chinese') }}
+          </Option>
+        </template>
+      </Select>
+    </FieldSelect>
+
+    <div
+      v-motion
+      text="neutral-200/50 dark:neutral-600/20" pointer-events-none
+      fixed top="[65dvh]" right--15 z--1
+      :initial="{ scale: 0.9, opacity: 0, rotate: 30 }"
+      :enter="{ scale: 1, opacity: 1, rotate: 0 }"
+      :duration="250"
+      flex items-center justify-center
+    >
+      <div text="60" i-solar:emoji-funny-square-bold-duotone />
+    </div>
   </div>
 </template>
 

packages/i18n/src/locales/en/settings.yaml

@@ -8,8 +8,15 @@ animations:
     title: Use Page Specific Transitions
 language:
   chinese: 简体中文
+  zh-CN: 简体中文
+  zh-Hans: 简体中文
   english: English
+  en: English
+  en-US: English (US)
   title: Language
+  description: >
+    Change the language of the AIRI interface. This will not affect the language
+    of the character's responses.
 live2d:
   change-model:
     from-file: Load from File
@@ -479,6 +486,9 @@ sections:
   section:
     general:
       title: General
-theme: Theme
+theme:
+  title: Theme
+  description: >
+    Switch the base theme of AIRI, Light mode or Dark mode.
 title: Settings
 voices: Voice

packages/i18n/src/locales/zh-Hans/settings.yaml

@@ -473,6 +473,9 @@ sections:
   section:
     general:
       title: 通用
-theme: 主题
+theme:
+  title: 主题
+  description: >
+    切换 AIRI 的基础主题，亮色模式或暗色模式。
 title: 设置
 voices: 声线