initial i18n

package.json

@@ -20,6 +20,7 @@
     "vite": "^6.0.6",
     "vooks": "^0.2.12",
     "vue": "^3.5.13",
+    "vue-i18n": "10",
     "vue-tsc": "^2.2.0"
   }
 }

src/FooterButtons.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { NButton, NFlex } from 'naive-ui'
+import { t } from './i18n'
 
 defineProps<{
   reset: () => void
@@ -17,13 +18,13 @@ defineProps<{
         secondary
         @click="reset"
       >
-        Reset to default
+        {{ t('Reset to default') }}
       </NButton>
       <NButton
         secondary
         @click="close"
       >
-        Cancel
+        {{ t('Cancel') }}
       </NButton>
     </NFlex>
     <NFlex>

src/InputMethodConfig.vue

@@ -4,6 +4,7 @@ import { NButton, NCheckbox, NCheckboxGroup, NFlex, NLayout, NLayoutFooter, NLay
 import { computed, h, ref, watchEffect } from 'vue'
 import BasicConfig from './BasicConfig.vue'
 import FooterButtons from './FooterButtons.vue'
+import { t } from './i18n'
 import MinusButton from './MinusButton.vue'
 import PlusButton from './PlusButton.vue'
 import { extractValue } from './util'
@@ -188,7 +189,7 @@ function apply() {
             v-model:checked="onlyShowCurrentLanguage"
             style="height: 50px; display: flex; justify-content: center; align-items: center"
           >
-            {{ collapsed ? '' : 'Only show current language' }}
+            {{ collapsed ? '' : t('Only show current language') }}
           </NCheckbox>
           <div
             v-else
@@ -208,7 +209,7 @@ function apply() {
           v-if="selectedLanguage === null"
           style="display: flex; justify-content: center; align-items: center; height: calc(100% - 50px);"
         >
-          Select a language from the left list
+          {{ t('Select a language from the left list') }}
         </div>
         <NLayout
           v-else
@@ -235,15 +236,15 @@ function apply() {
             style="padding: 8px; justify-content: space-between"
           >
             <NButton secondary @click="adding = false">
-              Cancel
+              {{ t('Cancel') }}
             </NButton>
             <NButton
               secondary
               type="info"
               :disabled="imsToAdd.length === 0"
               @click="add"
             >
-              Add
+              {{ t('Add') }}
             </NButton>
           </NFlex>
         </NLayoutFooter>

src/PluginManager.vue

@@ -2,6 +2,7 @@
 import type { UploadFileInfo } from 'naive-ui'
 import { NA, NAlert, NCode, NFlex, NList, NListItem, NUpload, NUploadDragger, useMessage } from 'naive-ui'
 import { computed, ref } from 'vue'
+import { t } from './i18n'
 
 const message = useMessage()
 
@@ -40,26 +41,26 @@ async function onUpload(files: UploadFileInfo[]) {
     <NFlex vertical>
       <NUpload v-model:file-list="fileList" style="width: auto" multiple accept=".zip" @update:file-list="onUpload">
         <NUploadDragger style="height: 200px">
-          Download and drag zip to this area
+          {{ t('Download and drag zip to this area') }}
         </NUploadDragger>
       </NUpload>
-      <NAlert title="Warning" type="warning">
-        Mozc doesn't work on Chrome unless start the process with <br>
+      <NAlert :title="t('Warning')" type="warning">
+        {{ t("Mozc doesn't work on Chrome unless start the process with") }} <br>
         <NCode>--enable-features=WebAssemblyUnlimitedSyncCompilation</NCode>
       </NAlert>
     </NFlex>
     <NFlex>
       <NList style="min-width: 100px">
         <template #header>
-          Installed
+          {{ t('Installed') }}
         </template>
         <NListItem v-for="plugin in installedPlugins" :key="plugin">
           {{ plugin }}
         </NListItem>
       </NList>
       <NList style="min-width: 100px">
         <template #header>
-          Available
+          {{ t('Available') }}
         </template>
         <NListItem v-for="plugin in availablePlugins" :key="plugin">
           <NA :href="`https://github.com/fcitx-contrib/fcitx5-plugins/releases/download/js/${plugin}.zip`">

src/i18n.ts

@@ -0,0 +1,30 @@
+import { createI18n } from 'vue-i18n'
+import zhCN from './locales/zh-CN.json'
+
+const messages = {
+  'en': Object.fromEntries(Object.keys(zhCN).map(key => [key, key])),
+  'zh-CN': zhCN,
+}
+
+function getLocale() {
+  for (const language of navigator.languages) {
+    if (language in messages) {
+      return language
+    }
+    if (language.startsWith('en')) {
+      return 'en'
+    }
+    if (language === 'zh-SG') {
+      return 'zh-CN'
+    }
+  }
+}
+
+const i18n = createI18n({
+  locale: getLocale(),
+  messages,
+})
+
+export function t(key: string) {
+  return i18n.global.t(key)
+}

src/locales/zh-CN.json

@@ -0,0 +1,12 @@
+{
+  "Add": "添加",
+  "Available": "可用",
+  "Cancel": "取消",
+  "Download and drag zip to this area": "下载并拖拽 zip 到此区域",
+  "Installed": "已安装",
+  "Mozc doesn't work on Chrome unless start the process with": "Mozc 在 Chrome 下不工作，除非用如下参数启动进程",
+  "Only show current language": "只显示当前语言",
+  "Reset to default": "重设为默认值",
+  "Select a language from the left list": "从左侧列表中选择一个语言",
+  "Warning": "警告"
+}

vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
         'vue',
         'naive-ui',
         'vooks',
+        'vue-i18n',
       ],
     },
   },