feat: implement a simple i18n support

packages/shared/src/index.ts

@@ -8,6 +8,7 @@ export interface Settings {
   debugMode?: boolean
   autoGenerateSRTOnRecordStop?: boolean
   autoRemoveRecordWhenTinySize?: boolean
+  locale?: string
 }
 
 /** electron render 给 web 暴露的 API */

packages/web/package.json

@@ -21,6 +21,7 @@
     "rxjs": "^7.5.7",
     "uuid": "^9.0.0",
     "vue": "^3.2.37",
+    "vue-i18n": "^9.10.1",
     "vue-router": "^4.0.0",
     "vuetify": "^3.5.6"
   },

packages/web/src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
@@ -8,20 +9,40 @@ import { createRouter } from './router'
 import { initStore } from './store'
 import { RecordService } from './services/RecordService'
 import { InteractionService } from './services/InteractionService'
+import zhMessages from './messages/zh'
+import ruMessages from './messages/ru'
+import enMessages from './messages/en'
 // 这个必须放在下面，权重才能比 vuetify 高
 import './style.css'
+import { LARServerService } from './services/LARServerService'
 
 // TODO: 先简单点，不做初始化的 loading 之类的，出问题顶多 B/S 模式下的通知出问题
 void RecordService.init()
 InteractionService.blurSomeElementOnPressEscape = true
 
+// TODO: 先简单点，直接在这里调 getSettings，没有本地缓存
+const { locale = navigator.language } = await LARServerService.getSettings({})
+
+const i18n = createI18n({
+  legacy: false,
+  locale,
+  // 系统语言没匹配到的话大概率不是中文使用者，所以默认英文
+  fallbackLocale: 'en',
+  messages: {
+    zh: zhMessages,
+    ru: ruMessages,
+    en: enMessages,
+  },
+})
+
 const vuetify = createVuetify({
   components,
   directives,
 })
 
 const app = createApp(App)
 initStore(app)
+app.use(i18n)
 app.use(vuetify)
 app.use(createRouter())
 app.mount('#app')

packages/web/src/messages/en.ts

@@ -0,0 +1,5 @@
+export default {
+  settings: {
+    app_settings: 'Appliaction Settings',
+  },
+}

packages/web/src/messages/ru.ts

@@ -0,0 +1,5 @@
+export default {
+  settings: {
+    app_settings: 'Настройки приложения',
+  },
+}

packages/web/src/messages/zh.ts

@@ -0,0 +1,5 @@
+export default {
+  settings: {
+    app_settings: '应用设置',
+  },
+}

packages/web/src/views/RecordersManage/Settings.vue

@@ -79,7 +79,7 @@
 
         <v-text-field label="FFMPEG 输出参数" v-model="manager.ffmpegOutputArgs" />
 
-        <v-checkbox label="自动检查并录制" v-model="manager.autoCheckLiveStatusAndRecord" />
+        <v-checkbox label="自动检查并录制" v-model="manager.autoCheckLiveStatusAndRecord" hide-details />
 
         <v-text-field
           v-if="manager.autoCheckLiveStatusAndRecord"
@@ -90,23 +90,42 @@
       </v-form>
     </v-card-item>
 
-    <v-card-title>应用设置</v-card-title>
+    <v-card-title>{{ t('settings.app_settings') }}</v-card-title>
 
     <v-card-item>
       <div v-if="!settings" class="text-center p-4">
         <v-progress-circular indeterminate color="primary" />
       </div>
 
       <v-form v-else>
-        <v-checkbox v-if="isClient" label="关闭时进入托盘" v-model="settings.notExitOnAllWindowsClosed" />
+        <v-select
+          label="语言 - Language"
+          class="mb-2"
+          v-model="innerLocale"
+          density="comfortable"
+          :items="[
+            { name: '简体中文', value: 'zh' },
+            { name: 'Русский язык', value: 'ru' },
+            { name: 'English', value: 'en' },
+          ]"
+          item-title="name"
+          item-value="value"
+          hide-details="auto"
+        />
+
+        <v-checkbox v-if="isClient" label="关闭时进入托盘" v-model="settings.notExitOnAllWindowsClosed" hide-details />
 
-        <v-checkbox label="录制结束时自动生成 SRT 字幕文件" v-model="settings.autoGenerateSRTOnRecordStop" />
+        <v-checkbox
+          label="录制结束时自动生成 SRT 字幕文件"
+          v-model="settings.autoGenerateSRTOnRecordStop"
+          hide-details
+        />
 
-        <v-checkbox label="自动移除 0kb 的录制记录" v-model="settings.autoRemoveRecordWhenTinySize" />
+        <v-checkbox label="自动移除 0kb 的录制记录" v-model="settings.autoRemoveRecordWhenTinySize" hide-details />
 
-        <v-checkbox label="录制开始时发出通知" v-model="settings.noticeOnRecordStart" />
+        <v-checkbox label="录制开始时发出通知" v-model="settings.noticeOnRecordStart" hide-details />
 
-        <v-checkbox label="调试模式" v-model="settings.debugMode" />
+        <v-checkbox label="调试模式" v-model="settings.debugMode" hide-details />
       </v-form>
     </v-card-item>
 
@@ -160,6 +179,7 @@
 import type { API } from '@autorecord/http-server'
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { LARServerService } from '../../services/LARServerService'
 import { ClientService } from '../../services/ClientService'
 import { RecordService } from '../../services/RecordService'
@@ -174,6 +194,11 @@ const managerDefault = ref<API.getManagerDefault.Resp>()
 const settings = ref<API.getSettings.Resp>()
 const savePathRuleAlertVisible = ref(false)
 
+// 这里的实现方式是为了让设置页面内部可以预览语言更改后的效果
+const { locale: appLocale } = useI18n()
+const innerLocale = ref(appLocale.value)
+const { t } = useI18n({ locale: innerLocale.value })
+
 useEffectInLifecycle(() => {
   return InteractionService.onEscapeWhenBody(() => router.back())
 })
@@ -193,6 +218,7 @@ const apply = async () => {
   const newSettings = await LARServerService.setSettings(settings.value)
   // TODO: 前端目前只有 RecordService 用到了 settings，为了降低开发复杂度，这里先直接赋值
   RecordService.noticeOnRecordStart = newSettings.noticeOnRecordStart
+  appLocale.value = innerLocale.value
 }
 
 const reset = async () => {

packages/web/src/views/RecordersManage/index.vue

@@ -23,7 +23,7 @@
               <v-btn class="!h-full" stacked prepend-icon="mdi-history" :rounded="0" size="small">录制历史</v-btn>
             </router-link>
             <router-link class="h-full" :to="{ name: RouteNames.RecordersSetting }" tabindex="-1">
-              <v-btn class="!h-full" stacked prepend-icon="mdi-cog" :rounded="0" size="small">录制设置</v-btn>
+              <v-btn class="!h-full" stacked prepend-icon="mdi-cog" :rounded="0" size="small">设置</v-btn>
             </router-link>
           </div>
         </div>

yarn.lock

@@ -192,6 +192,7 @@ __metadata:
     vite: ^3.1.0
     vite-svg-loader: ^3.6.0
     vue: ^3.2.37
+    vue-i18n: ^9.10.1
     vue-router: ^4.0.0
     vue-tsc: ^0.40.4
     vuetify: ^3.5.6
@@ -596,6 +597,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@intlify/core-base@npm:9.10.1":
+  version: 9.10.1
+  resolution: "@intlify/core-base@npm:9.10.1"
+  dependencies:
+    "@intlify/message-compiler": 9.10.1
+    "@intlify/shared": 9.10.1
+  checksum: c594ad8828a458606ba50e4ed8f4314996e14787bc461ed3251bb8f2d694f8ddaa01240542764f1428e45e81cbada728d2865dbfed1c54290915b1580e51d33d
+  languageName: node
+  linkType: hard
+
+"@intlify/message-compiler@npm:9.10.1":
+  version: 9.10.1
+  resolution: "@intlify/message-compiler@npm:9.10.1"
+  dependencies:
+    "@intlify/shared": 9.10.1
+    source-map-js: ^1.0.2
+  checksum: ee5600ae9c14a8108766dadd978bf631f72826ac93bb1e71ba6b8d37043d3a67faf07c416a2ecb7fa8e0bf50adb59dcf9e7d2a7be3915c25658e13d7bb649164
+  languageName: node
+  linkType: hard
+
+"@intlify/shared@npm:9.10.1":
+  version: 9.10.1
+  resolution: "@intlify/shared@npm:9.10.1"
+  checksum: d2424f339f0cb2f754ccdb8e9348caf6fd7ef0edc333f4c78510362c25e39987392bdb85110222c0b27b85257aeea3633a0088629d9f136162cde8e6003f30c9
+  languageName: node
+  linkType: hard
+
 "@isaacs/string-locale-compare@npm:^1.1.0":
   version: 1.1.0
   resolution: "@isaacs/string-locale-compare@npm:1.1.0"
@@ -2440,6 +2468,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/devtools-api@npm:^6.5.0":
+  version: 6.6.1
+  resolution: "@vue/devtools-api@npm:6.6.1"
+  checksum: cf12b5ebcc7729725087072289410107b55bb82e0b86b8442e4e85516977110a8a3f4e1dec763be8b567a59173703b4e9c0ac1b0489bb2bb81363af7ea258a27
+  languageName: node
+  linkType: hard
+
 "@vue/reactivity-transform@npm:3.2.38":
   version: 3.2.38
   resolution: "@vue/reactivity-transform@npm:3.2.38"
@@ -11000,6 +11035,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-i18n@npm:^9.10.1":
+  version: 9.10.1
+  resolution: "vue-i18n@npm:9.10.1"
+  dependencies:
+    "@intlify/core-base": 9.10.1
+    "@intlify/shared": 9.10.1
+    "@vue/devtools-api": ^6.5.0
+  peerDependencies:
+    vue: ^3.0.0
+  checksum: 257d178cbb19b942f6b5174e0e17e3873d707eb32440b5d2448f9c7a64bbd1393e68fd71c129b758202e9d708fd4a6847626bc9b1ffce533f46b0075c8bd195c
+  languageName: node
+  linkType: hard
+
 "vue-router@npm:^4.0.0":
   version: 4.1.5
   resolution: "vue-router@npm:4.1.5"