feat(UI): 集成 i18n (#96)

.github/workflows/run_pytest.yml

@@ -31,6 +31,16 @@ jobs:
           fi
         shell: bash
 
+      - name: Setup uv cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cache/uv
+            ~/AppData/Local/uv/cache
+          key: ${{ runner.os }}-uv-${{ hashFiles('uv.lock', 'pyproject.toml')}}
+          restore-keys: |
+            ${{ runner.os }}-uv-
+
       - name: Install dependencies with uv
         run: |
           uv sync -v

electron-app/electron.vite.config.ts

@@ -17,6 +17,8 @@ export default defineConfig(() => {
       resolve: {
         alias: {
           '@renderer': path.join(dir, 'src/renderer/src'),
+          '@locales': path.join(dir, 'src/locales'),
+          '@/hooks': path.join(dir, 'src/renderer/src/hooks'),
         },
       },
       plugins: [

electron-app/eslint.config.mjs

@@ -18,6 +18,12 @@ export default defineConfig({
     // 文件末尾保留空行
     'style/eol-last': 'error',
   },
+  jsonc: {
+    overrides: {
+      // json key 排序
+      'jsonc/sort-keys': ['warn', 'asc'],
+    },
+  },
   typescript: {
     overrides: {
       // 记得清理 console

electron-app/package.json

@@ -28,7 +28,8 @@
     "@unocss/preset-wind4": "^66.3.3",
     "@unocss/reset": "^66.3.3",
     "electron-updater": "^6.3.9",
-    "unocss-preset-scrollbar-hide": "^1.0.1"
+    "unocss-preset-scrollbar-hide": "^1.0.1",
+    "vue-i18n": "^11.1.11"
   },
   "devDependencies": {
     "@antfu/eslint-config": "4.17.0",

electron-app/src/locales/en-US.ts

@@ -0,0 +1,12 @@
+import type { MessageSchema } from './zh-CN'
+
+export const schema: MessageSchema = {
+  'aside.name.apl-editor': 'APL Editor',
+  'aside.name.apl-specification': 'APL Spec.',
+  'aside.name.character-configuration': 'Characters',
+  'aside.name.character-support-list': 'Character Supports',
+  'aside.name.contribution-guide': 'Contribution Guide',
+  'aside.name.data-analysis': 'Analysis',
+  'aside.name.session-managerment': 'Session',
+  'aside.name.simulator': 'Simulator',
+}

electron-app/src/locales/index.ts

@@ -0,0 +1,6 @@
+export { schema as enUS } from './en-US'
+export { type MessageSchema, schema as zhCN } from './zh-CN'
+
+export type LocaleKeys
+  = | 'en-US'
+    | 'zh-CN'

electron-app/src/locales/zh-CN.ts

@@ -0,0 +1,12 @@
+export const schema = {
+  'aside.name.apl-editor': 'APL 编辑器',
+  'aside.name.apl-specification': 'APL 设计书',
+  'aside.name.character-configuration': '角色配置',
+  'aside.name.character-support-list': '角色支持列表',
+  'aside.name.contribution-guide': '贡献指南',
+  'aside.name.data-analysis': '数据分析',
+  'aside.name.session-managerment': '会话管理',
+  'aside.name.simulator': '模拟器',
+}
+
+export type MessageSchema = typeof schema

electron-app/src/renderer/src/App.vue

@@ -1,15 +1,27 @@
 <script setup lang="ts">
-const asideMenuList = [
-  '会话管理',
-  '角色配置',
-  '模拟器',
-  '数据分析',
-  'APL 编辑器',
-  '角色支持列表',
-  'APL 设计书',
-  '贡献指南',
-]
-const activedMenu = ref('会话管理')
+import { useLocales } from '@/hooks'
+
+const { t, locale } = useLocales()
+
+// DEMO
+const asideMenuList = computed(() => [
+  { label: t('aside.name.session-managerment'), key: 'session-managerment' },
+  { label: t('aside.name.character-configuration'), key: 'character-configuration' },
+  { label: t('aside.name.simulator'), key: 'simulator' },
+  { label: t('aside.name.data-analysis'), key: 'data-analysis' },
+  { label: t('aside.name.apl-editor'), key: 'apl-editor' },
+  { label: t('aside.name.character-support-list'), key: 'character-support-list' },
+  { label: t('aside.name.apl-specification'), key: 'apl-specification' },
+  { label: t('aside.name.contribution-guide'), key: 'contribution-guide' },
+])
+
+// DEMO
+const asideMenuMap = computed(() => asideMenuList.value.reduce((map, item) => {
+  return map.set(item.key, item.label)
+}, new Map<string, string>()))
+
+// DEMO
+const activedMenu = ref('session-managerment')
 </script>
 
 <template>
@@ -25,28 +37,41 @@ const activedMenu = ref('会话管理')
       <div class="flex-1 w-full overflow-auto flex flex-col">
         <div
           v-for="menu in asideMenuList"
-          :key="menu"
+          :key="menu.key"
           class="
             shrink-0 h-40px my-1px mx-8px px-10px overflow-hidden
             rounded-8px border border-solid
             flex items-center gap-8px text-#6B6B6B
             select-none cursor-pointer
           "
           :class="[
-            menu === activedMenu
+            menu.key === activedMenu
               ? 'border-#0000001A bg-white'
               : 'border-transparent hover:bg-#38302E0D active:bg-#38302E17',
           ]"
-          @click="activedMenu = menu"
+          @click="activedMenu = menu.key"
         >
           <div class="w-16px h-16px rounded-sm bg-#6B6B6B40" />
-          <div>{{ menu }}</div>
+          <div>{{ menu.label }}</div>
         </div>
       </div>
 
       <!-- 侧边底部 -->
-      <div class="shrink-0 w-full h-64px p-16px pb-24px">
-        06 号
+      <div class="shrink-0 w-full h-64px p-16px pb-24px flex gap-4px">
+        <div
+          class="px-10px h-32px rounded-8px flex items-center text-14px text-white cursor-pointer select-none hover:brightness-90 active:brightness-80"
+          :class="locale === 'zh-CN' ? 'bg-#FA7319' : 'bg-#333'"
+          @click="locale = 'zh-CN'"
+        >
+          中文
+        </div>
+        <div
+          class="px-10px h-32px rounded-8px flex items-center text-14px text-white cursor-pointer select-none hover:brightness-90 active:brightness-80"
+          :class="locale === 'en-US' ? 'bg-#FA7319' : 'bg-#333'"
+          @click="locale = 'en-US'"
+        >
+          English
+        </div>
       </div>
     </div>
 
@@ -61,7 +86,7 @@ const activedMenu = ref('会话管理')
     >
       <!-- 模块.1 -->
       <div class="w-full shrink-0 p-24px pb-0 text-24px font-400">
-        {{ activedMenu }}
+        {{ asideMenuMap.get(activedMenu) }}
       </div>
 
       <!-- 模块.2 -->

electron-app/src/renderer/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useLocales } from './use-locales'

electron-app/src/renderer/src/hooks/use-locales.ts

@@ -0,0 +1,10 @@
+import type { MessageSchema } from '@locales/index'
+import { useI18n } from 'vue-i18n'
+
+export const useLocales = () => {
+  const { t, ...rest } = useI18n<{
+    message: MessageSchema
+  }, 'en-US' | 'zh-CN'>()
+
+  return { t, ...rest }
+}

electron-app/src/renderer/src/main.ts

@@ -1,7 +1,21 @@
+import type { LocaleKeys, MessageSchema } from '@locales/index'
+import { enUS, zhCN } from '@locales/index'
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 import 'virtual:uno.css'
 import '@unocss/reset/tailwind.css'
 import '@unocss/reset/tailwind-compat.css'
 
-createApp(App).mount('#app')
+const i18n = createI18n<[MessageSchema], LocaleKeys>({
+  locale: 'zh-CN',
+  fallbackLocale: 'zh-CN',
+  messages: {
+    'en-US': enUS,
+    'zh-CN': zhCN,
+  },
+})
+
+const app = createApp(App)
+app.use(i18n)
+app.mount('#app')

electron-app/tsconfig.node.json

@@ -5,6 +5,9 @@
     "baseUrl": ".",
     "module": "esnext",
     "moduleResolution": "bundler",
+    "paths": {
+      "@locales/*": ["src/locales/*"]
+    },
     "types": ["electron-vite/node", "vite/client"],
     "strict": true,
     "esModuleInterop": true,

electron-app/tsconfig.web.json

@@ -8,9 +8,9 @@
     "module": "esnext",
     "moduleResolution": "bundler",
     "paths": {
-      "@renderer/*": [
-        "src/renderer/src/*"
-      ]
+      "@renderer/*": ["src/renderer/src/*"],
+      "@locales/*": ["src/locales/*"],
+      "@/*": ["src/renderer/src/*"]
     },
     "strict": true,
     "noImplicitThis": true,
@@ -24,6 +24,7 @@
     "src/renderer/src/**/*",
     "src/renderer/types/*.d.ts",
     "src/renderer/src/**/*.vue",
-    "src/preload/*.d.ts"
+    "src/preload/*.d.ts",
+    "src/locales/*"
   ]
 }