feat: 新增「通用设置 > 外观设置 > 语言」配置项 (#645)

Author: ayangweb

.vscode/settings.json

@@ -51,5 +51,9 @@
   ],
 
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "typescript.tsdk": "./node_modules/typescript/lib"
+  "typescript.tsdk": "./node_modules/typescript/lib",
+
+  "i18n-ally.localesPaths": ["src/locales"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.displayLanguage": "zh-CN"
 }

Cargo.lock

@@ -43,8 +43,10 @@
     "pinia": "^3.0.3",
     "pixi-live2d-display": "^0.4.0",
     "pixi.js": "^6.5.10",
+    "tauri-plugin-locale-api": "^2.0.1",
     "tauri-plugin-macos-permissions-api": "^2.3.0",
     "vue": "^3.5.16",
+    "vue-i18n": "^11.1.12",
     "vue-markdown-render": "^2.2.1",
     "vue-router": "^4.5.1",
     "vue3-masonry-css": "^1.0.7"

package.json

@@ -37,6 +37,7 @@ tauri-plugin-fs = "2"
 fs_extra = "1"
 tauri-plugin-clipboard-manager = "2"
 tauri-plugin-global-shortcut = "2"
+tauri-plugin-locale = "2"
 rdev = { git = "https://github.com/kunkunsh/rdev" }
 gilrs = { git = "https://github.com/ayangweb/gilrs", default-features = false, features = ["xinput"] }
 

pnpm-lock.yaml

@@ -46,6 +46,7 @@
     "clipboard-manager:allow-write-text",
     "global-shortcut:allow-is-registered",
     "global-shortcut:allow-register",
-    "global-shortcut:allow-unregister"
+    "global-shortcut:allow-unregister",
+    "locale:default"
   ]
 }

src-tauri/Cargo.toml

@@ -60,6 +60,7 @@ pub fn run() {
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_clipboard_manager::init())
         .plugin(tauri_plugin_global_shortcut::Builder::new().build())
+        .plugin(tauri_plugin_locale::init())
         .on_window_event(|window, event| match event {
             WindowEvent::CloseRequested { api, .. } => {
                 let _ = window.hide();

src-tauri/capabilities/default.json

@@ -4,16 +4,17 @@ import { error } from '@tauri-apps/plugin-log'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { useEventListener } from '@vueuse/core'
 import { ConfigProvider, theme } from 'ant-design-vue'
-import zhCN from 'ant-design-vue/es/locale/zh_CN'
 import { isString } from 'es-toolkit'
 import isURL from 'is-url'
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { RouterView } from 'vue-router'
 
 import { useTauriListen } from './composables/useTauriListen'
 import { useThemeVars } from './composables/useThemeVars'
 import { useWindowState } from './composables/useWindowState'
-import { LISTEN_KEY } from './constants'
+import { LANGUAGE, LISTEN_KEY } from './constants'
+import { getAntdLocale } from './locales/index.ts'
 import { hideWindow, showWindow } from './plugins/window'
 import { useAppStore } from './stores/app'
 import { useCatStore } from './stores/cat'
@@ -30,6 +31,7 @@ const shortcutStore = useShortcutStore()
 const appWindow = getCurrentWebviewWindow()
 const { isRestored, restoreState } = useWindowState()
 const { darkAlgorithm, defaultAlgorithm } = theme
+const { locale } = useI18n()
 
 onMounted(async () => {
   generateColorVars()
@@ -39,10 +41,15 @@ onMounted(async () => {
   await modelStore.$tauri.start()
   await modelStore.init()
   await catStore.$tauri.start()
+  catStore.init()
   await generalStore.$tauri.start()
+  await generalStore.init()
   await shortcutStore.$tauri.start()
   await restoreState()
-  catStore.init()
+})
+
+watch(() => generalStore.appearance.language, (value) => {
+  locale.value = value ?? LANGUAGE.EN_US
 })
 
 useTauriListen(LISTEN_KEY.SHOW_WINDOW, ({ payload }) => {
@@ -82,7 +89,7 @@ useEventListener('click', (event) => {
 
 <template>
   <ConfigProvider
-    :locale="zhCN"
+    :locale="getAntdLocale(generalStore.appearance.language)"
     :theme="{
       algorithm: generalStore.appearance.isDark ? darkAlgorithm : defaultAlgorithm,
     }"

src-tauri/src/lib.rs

@@ -110,7 +110,7 @@ function handleKeyUp(event: KeyboardEvent) {
       @mouseover="isHovering = true"
     >
       <span v-if="pressedKeys.length === 0">
-        {{ isFocusing ? '按下录制快捷键' : '点击录制快捷键' }}
+        {{ isFocusing ? $t('components.proShortcut.hints.pressRecordShortcut') : $t('components.proShortcut.hints.clickRecordShortcut') }}
       </span>
 
       <span class="text-primary font-bold">

src/App.vue

@@ -1,19 +1,21 @@
 import { CheckMenuItem, MenuItem, PredefinedMenuItem, Submenu } from '@tauri-apps/api/menu'
 import { range } from 'es-toolkit'
+import { useI18n } from 'vue-i18n'
 
 import { showWindow } from '@/plugins/window'
 import { useCatStore } from '@/stores/cat'
 import { isMac } from '@/utils/platform'
 
 export function useSharedMenu() {
   const catStore = useCatStore()
+  const { t } = useI18n()
 
   const getScaleMenuItems = async () => {
     const options = range(50, 151, 25)
 
     const items = options.map((item) => {
       return CheckMenuItem.new({
-        text: item === 100 ? '默认' : `${item}%`,
+        text: `${item}%`,
         checked: catStore.window.scale === item,
         action: () => {
           catStore.window.scale = item
@@ -59,30 +61,30 @@ export function useSharedMenu() {
   const getSharedMenu = async () => {
     return await Promise.all([
       MenuItem.new({
-        text: '偏好设置...',
+        text: t('composables.useSharedMenu.labels.preference'),
         accelerator: isMac ? 'Cmd+,' : '',
         action: () => showWindow('preference'),
       }),
       MenuItem.new({
-        text: catStore.window.visible ? '隐藏猫咪' : '显示猫咪',
+        text: catStore.window.visible ? t('composables.useSharedMenu.labels.hideCat') : t('composables.useSharedMenu.labels.showCat'),
         action: () => {
           catStore.window.visible = !catStore.window.visible
         },
       }),
       PredefinedMenuItem.new({ item: 'Separator' }),
       CheckMenuItem.new({
-        text: '窗口穿透',
+        text: t('composables.useSharedMenu.labels.passThrough'),
         checked: catStore.window.passThrough,
         action: () => {
           catStore.window.passThrough = !catStore.window.passThrough
         },
       }),
       Submenu.new({
-        text: '窗口尺寸',
+        text: t('composables.useSharedMenu.labels.windowSize'),
         items: await getScaleMenuItems(),
       }),
       Submenu.new({
-        text: '不透明度',
+        text: t('composables.useSharedMenu.labels.opacity'),
         items: await getOpacityMenuItems(),
       }),
     ])