feat: i18n (#16)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
typed-sigterm · Jul 31, 2024 · 9890413 · 9890413
1 parent 33f464d
commit 9890413
Show file tree

Hide file tree

Showing 31 changed files with 962 additions and 325 deletions.
diff --git a/3rd-party-licenses.md b/3rd-party-licenses.md
@@ -4,10 +4,11 @@
 
 | 名称 | 许可证 | 是否经过修改 |
 | :---: | :---: | :---: |
+| [`@bg-dev/nuxt-naiveui`](https://github.com/becem-gharbi/nuxt-naiveui) | [MIT License](https://github.com/becem-gharbi/nuxt-naiveui/blob/main/LICENSE) | 否 |
 | [`@iconify-json/ant-design`](https://icon-sets.iconify.design/ant-design/) | [MIT License](https://github.com/ant-design/ant-design-icons/blob/master/LICENSE) | 否 |
 | [`@iconify-json/ep`](https://icon-sets.iconify.design/ep/) | [MIT License](https://github.com/element-plus/element-plus-icons/blob/main/LICENSE) | 否 |
+| [`@iconify-json/lucide`](https://icon-sets.iconify.design/lucide/) | [ISC License](https://github.com/lucide-icons/lucide) | 否 |
 | [`@iconify-json/vscode-icons`](https://icon-sets.iconify.design/vscode-icons/) | [MIT License](https://github.com/vscode-icons/vscode-icons/blob/master/LICENSE) | 否 |
-| [`@bg-dev/nuxt-naiveui`](https://github.com/becem-gharbi/nuxt-naiveui) | [MIT License](https://github.com/becem-gharbi/nuxt-naiveui/blob/main/LICENSE) | 否 |
 | [`@pinia/nuxt`](https://github.com/vuejs/pinia/tree/v2/packages/nuxt) | [MIT License](https://github.com/vuejs/pinia/blob/main/LICENSE) | 否 |
 | [`@tauri-apps/api`](https://github.com/tauri-apps/tauri) | [MIT License](https://github.com/tauri-apps/tauri/blob/dev/LICENSE_MIT) | 否 |
 | [`@tauri-apps/plugin-dialog`,<br>`tauri-plugin-dialog`](https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog) | [MIT License](https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/LICENSE_MIT) | 否 |

diff --git a/__tests__/group.spec.ts b/__tests__/group.spec.ts
@@ -72,14 +72,14 @@ describe('fixGroup', () => {
 
 describe('generateNewGroupName', () => {
   it('应当从 名单数量 +1 开始', () => {
-    expect(generateNewGroupName()).toBe('名单 1');
+    expect(generateNewGroupName()).toBe('#1');
     setStoredGroup('g1', []);
-    expect(generateNewGroupName()).toBe('名单 2');
+    expect(generateNewGroupName()).toBe('#2');
   });
 
   it('应当生成唯一的名称', () => {
-    setStoredGroup('名单 2', []);
-    setStoredGroup('名单 3', []);
-    expect(generateNewGroupName()).toBe('名单 4');
+    setStoredGroup('#2', []);
+    setStoredGroup('#3', []);
+    expect(generateNewGroupName()).toBe('#4');
   });
 });
diff --git a/app.vue b/app.vue
@@ -1,13 +1,28 @@
 <script lang="ts" setup>
 import { promiseTimeout } from '@vueuse/core';
-import { zhCN } from 'naive-ui';
+import { enUS, zhCN } from 'naive-ui';
+
+const i18n = useI18n();
+watchImmediate(usePreferredLanguages(), (langs) => {
+  for (const lang of langs) {
+    if (i18n.availableLocales.includes(lang)) {
+      switchLanguage(i18n, lang);
+      return;
+    }
+  }
+  switchLanguage(i18n, 'en');
+});
 
 if (__APP__)
   await useThemeStore().init(); // 异步初始化主题
 
 const loading = ref(true);
 const show = ref(false);
 
+const locale = computed(() => {
+  return markRaw(i18n.locale.value === 'zh-CN' ? zhCN : enUS);
+});
+
 // 动画和事件
 promiseTimeout(1500).then(() => loading.value = false);
 promiseTimeout(1850).then(() => {
@@ -19,10 +34,7 @@ promiseTimeout(1850).then(() => {
 </script>
 
 <template>
-  <NaiveConfig
-    :style="{ opacity: show ? 1 : 0 }"
-    :locale="zhCN"
-  >
+  <NaiveConfig :style="{ opacity: show ? 1 : 0 }" :locale>
     <NMessageProvider>
       <NDialogProvider>
         <Updater v-if="__APP__" />

diff --git a/components/changelog.vue b/components/changelog.vue
@@ -1,14 +1,17 @@
 <script lang="ts" setup>
 import ChangelogMd from './changelog-simplified.md';
+
+const { t } = useI18n({ useScope: 'local' });
 </script>
 
 <template>
-  <NAlert v-if="true" type="info">
-    Canary 版本更新内容请前往
-    <a :href="`${GITHUB_REPO_URL}/blob/main/CHANGELOG.md`" target="_blank">GitHub</a>
-    查看。
+  <NAlert v-if="__CANARY__" type="info">
+    <I18nT keypath="canary-tip">
+      <a :href="`${GITHUB_REPO_URL}/blob/main/CHANGELOG.md`" target="_blank">GitHub</a>
+    </I18nT>
     <br>
-    构建时间：<NTime :time="useRuntimeConfig().public.buildTime" />
+    {{ t('build-time') }}
+    <NTime :time="useRuntimeConfig().public.buildTime" />
   </NAlert>
   <ChangelogMd />
 </template>
@@ -18,6 +21,9 @@ import ChangelogMd from './changelog-simplified.md';
   h2 { /* 版本号 */
     text-align: center;
   }
+  &:first-child {
+    margin-top: 0;
+  }
 
   h3 { /* “新功能”“bug 修复”等 */
     margin: 0;
@@ -30,3 +36,13 @@ import ChangelogMd from './changelog-simplified.md';
   }
 }
 </style>
+
+<i18n lang="yaml">
+en:
+  canary-tip: For the latest changes in the canary version, please visit {0}.
+  build-time: "Build time:"
+
+zh-CN:
+  canary-tip: Canary 版本更新内容请前往 {0} 查看。
+  build-time: 构建时间：
+</i18n>
diff --git a/components/result-board.vue b/components/result-board.vue
@@ -28,6 +28,8 @@ defineSlots<{
 }>();
 const status = defineModel<Status>('status');
 
+const { t } = useI18n({ useScope: 'local' });
+
 whenever(() => status.value === 'pausing', async (pausing) => {
   // 停止后等待 1s
   await promiseTimeout(1000);
@@ -69,16 +71,18 @@ function handlePause() {
           </NIcon>
         </template>
       </LargeButton>
+
       <slot name="startExtraOperators" />
     </NSpace>
 
     <template v-else>
       <p class="mb-2 text-5xl">
         {{ value }}
       </p>
+
       <NSpace v-if="status === 'paused'" class="resume-operators">
         <NButton class="resume-button" @click.stop="$emit('start')">
-          继续点名
+          {{ t('continue-rolling') }}
           <template #icon>
             <NIcon :size="20">
               <IconResume />
@@ -106,3 +110,11 @@ function handlePause() {
   }
 }
 </style>
+
+<i18n lang="yaml">
+en:
+  continue-rolling: Continue
+
+zh-CN:
+  continue-rolling: 继续点名
+</i18n>
diff --git a/components/settings.vue b/components/settings.vue
@@ -10,6 +10,8 @@ const emit = defineEmits<{
 }>();
 const show = defineModel<boolean>('show', { required: true });
 
+const { t } = useI18n({ useScope: 'local' });
+
 async function handleShowOrClosePlan(show: boolean) {
   if (!show || !shouldStartGuide('plan'))
     return;
@@ -43,36 +45,34 @@ function handleClose() {
     <NDrawerContent closable>
       <NAlert
         v-if="__CANARY__ && showCanaryAlertNow"
-        class="mb-3"
         type="warning"
         closable
         @after-leave="showCanaryAlert = false"
       >
-        您正在使用 Canary 版本，功能尚不稳定。
-        <br>
-        若遇到问题，欢迎
-        <a class="cursor-pointer" @click="bus.emit('send-feedback')">
-          提交反馈
-        </a>
-        。
+        <I18nT keypath="canary.alert">
+          <br>
+          <a class="cursor-pointer" @click="bus.emit('send-feedback')">
+            {{ t('canary.feedback') }}
+          </a>
+        </I18nT>
       </NAlert>
 
-      <SettingsSubEntry title="名单设置">
+      <SettingsSubEntry :title="t('entry.namelist')">
         <SettingsGroup />
         <template #icon>
           <IconList />
         </template>
       </SettingsSubEntry>
 
-      <SettingsSubEntry title="主题设置" only-in-app>
+      <SettingsSubEntry :title="t('entry.theme')" only-in-app>
         <SettingsTheme />
         <template #icon>
           <IconPictureFilled />
         </template>
       </SettingsSubEntry>
 
       <SettingsSubEntry
-        title="计划设置"
+        :title="t('entry.plan')"
         :drawer-attrs="{ 'data-guide-id': 'plan-drawer' }"
         @update:show="handleShowOrClosePlan"
       >
@@ -87,8 +87,43 @@ function handleClose() {
       <SettingsFooter />
 
       <template #header>
-        设置
+        <span>{{ t('title') }}</span>
+        <SettingsLanguage />
       </template>
     </NDrawerContent>
   </NDrawer>
 </template>
+
+<style scoped>
+:deep() .n-drawer-header__main {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.n-alert {
+  margin-bottom: 12px;
+}
+</style>
+
+<i18n lang="yaml">
+en:
+  title: Settings
+  entry:
+    namelist: Namelists
+    theme: Theme
+    plan: Plans
+  canary:
+    alert: You are using the Canary version, which is unstable. If you encounter any problems, please {1}.
+    feedback: submit feedback
+
+zh-CN:
+  title: 设置
+  entry:
+    namelist: 名单设置
+    theme: 主题设置
+    plan: 计划设置
+  canary:
+    alert: 您正在使用 Canary 版本，功能尚不稳定。{0}若遇到问题，欢迎{1}。
+    feedback: 提交反馈
+</i18n>
diff --git a/components/settings/footer.vue b/components/settings/footer.vue
@@ -2,6 +2,8 @@
 import IconGitHub from '~icons/ant-design/github-filled';
 import avatarTypedSigterm from '~/assets/typed-sigterm.png';
 
+const { t } = useI18n({ useScope: 'local' });
+
 const loadLicenses = ref(false);
 const loadChangelog = ref(false);
 
@@ -32,54 +34,63 @@ function checkUpdate() {
 
 <template>
   <div class="flex items-center">
-    <LinkToModal modal-title="ExCaller 开放源代码许可" @click="loadLicenses = true">
-      开放源代码许可
+    <LinkToModal :modal-title="t('3rd-party-licenses-title')" @click="loadLicenses = true">
+      {{ t('3rd-party-licenses') }}
       <template #modalContent>
         <LazyLicenses v-if="loadLicenses" />
       </template>
     </LinkToModal>
+
     <NDivider vertical />
-    <LinkToModal modal-title="ExCaller 更新记录" @click="loadChangelog = true">
-      更新记录
+
+    <LinkToModal :modal-title="t('changelog-title')" @click="loadChangelog = true">
+      {{ t('changelog') }}
       <template #modalContent>
         <LazyChangelog v-if="loadChangelog" />
       </template>
     </LinkToModal>
+
     <NDivider vertical />
-    <LinkToModal v-model:show-modal="showFeedback" modal-title="提交反馈">
-      提交反馈
+
+    <LinkToModal v-model:show-modal="showFeedback" :modal-title="t('feedback.title')">
+      {{ t('feedback.title') }}
       <template #modalContent>
         <p class="mt-0">
-          如果您在使用 ExCaller 时有任何问题或建议，欢迎反馈给我们。
+          {{ t('feedback.desc') }}
         </p>
-        <p>通过以下任一方式提交反馈：</p>
+        <p>{{ t('feedback.ways') }}</p>
+
         <ul class="line-height-normal">
           <li>
-            在 GitHub 上
             <a :href="`${GITHUB_REPO_URL}/issues/new`" target="_blank">
-              创建 issue
+              {{ t('feedback.github') }}
             </a>
           </li>
           <li>
-            发送邮件到
-            <a :href="`mailto:${email}?subject=%5BExCaller%5D%20%E5%8F%8D%E9%A6%88%EF%BC%9A`">
+            {{ t('feedback.email') }}
+            <a :href="`mailto:${email}?subject=%5BExCaller%5D%20`">
               <code>{{ email }}</code>
             </a>
             <br>
-            请在邮件主题中包含 <code>[ExCaller]</code>，否则反馈可能无法得到及时处理。
+            {{ t('feedback.email-subject.before') }}
+            <code>[ExCaller]</code>
+            {{ t('feedback.email-subject.after') }}
           </li>
         </ul>
+
         <p v-if="__CANARY__">
-          如果问题仅出现在 Canary 版本中，请在反馈中注明。
+          {{ t('feedback.canary') }}
         </p>
         <p>
-          收到反馈后，我们会尽快处理，感谢您的支持。
+          {{ t('feedback.thanks') }}
         </p>
       </template>
     </LinkToModal>
+
     <NDivider v-if="__APP__" vertical />
+
     <NButton v-if="__APP__" text :loading="checkingUpdate" @click="checkUpdate">
-      检查更新
+      {{ t('check-update') }}
     </NButton>
   </div>
 
@@ -106,3 +117,41 @@ function checkUpdate() {
   --n-icon-size: 16px;
 }
 </style>
+
+<i18n lang="yaml">
+en:
+  3rd-party-licenses: Open Source Licenses
+  3rd-party-licenses-title: ExCaller Open Source Licenses
+  changelog: Changelog
+  changelog-title: ExCaller Changelog
+  check-update: Check Update
+  feedback:
+    title: Send Feedback
+    desc: If you have any problems or suggestions while using ExCaller, feel free to send feedback to us.
+    ways: 'You can send feedback through either of the following ways:'
+    github: Create an issue on GitHub
+    email: Send an email to
+    email-subject:
+      before: Please include
+      after: in the email subject, otherwise the feedback may not be processed in time.
+    canary: If the problem only occurs in the Canary version, please indicate in the feedback.
+    thanks: After receiving the feedback, we will process it as soon as possible. Thank you for your support.
+
+zh-CN:
+  3rd-party-licenses: 开放源代码许可
+  3rd-party-licenses-title: ExCaller 开放源代码许可
+  changelog: 更新记录
+  changelog-title: ExCaller 更新记录
+  check-update: 检查更新
+  feedback:
+    title: 提交反馈
+    desc: 如果您在使用 ExCaller 时有任何问题或建议，欢迎反馈给我们。
+    ways: 通过以下任一方式提交反馈：
+    github: 在 GitHub 上创建 issue
+    email: 发送邮件到
+    email-subject:
+      before: 请在邮件主题中包含
+      after: ，否则反馈可能无法得到及时处理。
+    canary: 如果问题仅出现在 Canary 版本中，请在反馈中注明。
+    thanks: 收到反馈后，我们会尽快处理，感谢您的支持。
+</i18n>