feat(i18n): add setting page i18n

src/components/Sidebar.vue

@@ -25,7 +25,9 @@ import {
   AndroidMetastate,
 } from "../frontcommand/android";
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
 const router = useRouter();
 const route = useRoute();
 const store = useGlobalStore();
@@ -61,7 +63,7 @@ async function sendKeyCodeToDevice(code: AndroidKeycode) {
       metastate: AndroidMetastate.AMETA_NONE,
     });
   } else {
-    message.error("未连接设备");
+    message.error(t("sidebar.noControledDevice"));
   }
 }
 
@@ -70,7 +72,7 @@ async function changeScreenPowerMode() {
     sendSetScreenPowerMode({ mode: nextScreenPowerMode.value });
     nextScreenPowerMode.value = nextScreenPowerMode.value ? 0 : 2;
   } else {
-    message.error("未连接设备");
+    message.error(t("sidebar.noControledDevice"));
   }
 }
 </script>

src/components/setting/About.vue

@@ -28,11 +28,8 @@ async function checkUpdate() {
 
 <template>
   <div class="setting-page">
-    <NH4 prefix="bar">关于</NH4>
+    <NH4 prefix="bar">{{ $t("pages.Setting.About.about") }}</NH4>
-    <NP
+    <NP>{{ $t("pages.Setting.About.introduction") }}</NP>
-      >A Scrcpy client in Rust & Tarui aimed at providing mouse and key mapping
-      to control Android device.</NP
-    >
     <NFlex class="website">
       <NButton
         text
@@ -41,7 +38,7 @@ async function checkUpdate() {
         <template #icon>
           <NIcon><LogoGithub /> </NIcon>
         </template>
-        Github repo
+        {{ $t("pages.Setting.About.github") }}
       </NButton>
       <NButton
         text
@@ -69,19 +66,21 @@ async function checkUpdate() {
         <template #icon>
           <NIcon><Planet /> </NIcon>
         </template>
-        AkiChase's Blog
+        {{ $t("pages.Setting.About.blog") }}
       </NButton>
     </NFlex>
-    <NH4 prefix="bar">更新</NH4>
+    <NH4 prefix="bar">{{ $t("pages.Setting.About.update") }}</NH4>
     <NCheckbox
       v-model:checked="store.checkUpdateAtStart"
       @update:checked="
         localStore.set('checkUpdateAtStart', store.checkUpdateAtStart)
       "
-      >启动时检查软件更新</NCheckbox
+      >{{ $t("pages.Setting.About.checkUpdateOnStartup") }}</NCheckbox
     >
-    <NP>当前版本：{{ appVersion }}</NP>
+    <NP>{{ $t("pages.Setting.About.curVersion", [appVersion]) }}</NP>
-    <NButton @click="checkUpdate">检查更新</NButton>
+    <NButton @click="checkUpdate">{{
+      $t("pages.Setting.About.checkUpdate")
+    }}</NButton>
   </div>
 </template>
 

src/components/setting/Basic.vue

@@ -18,7 +18,9 @@ import {
 import { relaunch } from "@tauri-apps/plugin-process";
 import { onMounted, ref } from "vue";
 import i18n from "../../i18n";
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
 const localStore = new Store("store.bin");
 const dialog = useDialog();
 
@@ -56,10 +58,10 @@ function showLocalStore(index: number) {
 function delLocalStore(key?: string) {
   if (key) {
     dialog.warning({
-      title: "Warning",
+      title: t("pages.Setting.Basic.delLocalStore.dialog.title"),
-      content: `即将删除数据"${key}"，删除操作不可撤回，是否继续？`,
+      content: t("pages.Setting.Basic.delLocalStore.dialog.delKey", [key]),
-      positiveText: "删除",
+      positiveText: t("pages.Setting.Basic.delLocalStore.dialog.positiveText"),
-      negativeText: "取消",
+      negativeText: t("pages.Setting.Basic.delLocalStore.dialog.negativeText"),
       onPositiveClick: () => {
         localStore.delete(key);
         localStoreEntries.value.splice(curDataIndex, 1);
@@ -68,12 +70,12 @@ function delLocalStore(key?: string) {
     });
   } else {
     dialog.warning({
-      title: "Warning",
+      title: t("pages.Setting.Basic.delLocalStore.dialog.title"),
-      content: "即将清空数据，操作不可撤回，且清空后将重启软件，是否继续？",
+      content: t("pages.Setting.Basic.delLocalStore.dialog.delAll"),
-      positiveText: "删除",
+      positiveText: t("pages.Setting.Basic.delLocalStore.dialog.positiveText"),
-      negativeText: "取消",
+      negativeText: t("pages.Setting.Basic.delLocalStore.dialog.negativeText"),
       onPositiveClick: () => {
-        // localStore.clear();
+        localStore.clear();
         relaunch();
       },
     });
@@ -90,7 +92,7 @@ function changeLanguage(language: "zh-CN" | "en-US") {
 
 <template>
   <div class="setting-page">
-    <NH4 prefix="bar">语言</NH4>
+    <NH4 prefix="bar">{{ $t("pages.Setting.Basic.language") }}</NH4>
     <NSelect
       :value="curLanguage"
       @update:value="changeLanguage"
@@ -98,7 +100,7 @@ function changeLanguage(language: "zh-CN" | "en-US") {
       style="max-width: 300px; margin: 20px 0"
     />
     <NFlex justify="space-between">
-      <NH4 prefix="bar">本地数据</NH4>
+      <NH4 prefix="bar">{{ $t("pages.Setting.Basic.localStore") }}</NH4>
       <NFlex>
         <NButton
           tertiary
@@ -124,9 +126,7 @@ function changeLanguage(language: "zh-CN" | "en-US") {
         </NButton>
       </NFlex>
     </NFlex>
-    <NP
+    <NP>{{ $t("pages.Setting.Basic.delLocalStore.warning") }}</NP>
-      >删除数据可能导致无法预料的后果，请慎重操作。若出现异常请尝试清空数据并重启软件。</NP
-    >
     <NList class="data-list" hoverable clickable>
       <NListItem v-for="(entrie, index) in localStoreEntries">
         <div @click="showLocalStore(index)">
@@ -136,7 +136,10 @@ function changeLanguage(language: "zh-CN" | "en-US") {
     </NList>
   </div>
   <NModal v-model:show="showDataModal">
-    <NCard style="width: 50%; height: 80%" title="卡片">
+    <NCard
+      style="width: 50%; height: 80%"
+      :title="localStoreEntries[curDataIndex][0]"
+    >
       <NFlex vertical style="height: 100%">
         <NInput
           type="textarea"
@@ -149,7 +152,7 @@ function changeLanguage(language: "zh-CN" | "en-US") {
           type="success"
           round
           @click="delLocalStore(localStoreEntries[curDataIndex][0])"
-          >删除当前数据</NButton
+          >{{ $t("pages.Setting.Basic.delCurData") }}</NButton
         >
       </NFlex>
     </NCard>

src/components/setting/Mask.vue

@@ -28,11 +28,13 @@ import { Store } from "@tauri-apps/plugin-store";
 import { SettingsOutline } from "@vicons/ionicons5";
 import { UnlistenFn } from "@tauri-apps/api/event";
 import { useGlobalStore } from "../../store/global";
+import { useI18n } from "vue-i18n";
 
 let unlistenResize: UnlistenFn = () => {};
 let unlistenMove: UnlistenFn = () => {};
 let factor = 1;
 
+const { t } = useI18n();
 const localStore = new Store("store.bin");
 const store = useGlobalStore();
 const message = useMessage();
@@ -57,25 +59,25 @@ const areaFormRules: FormRules = {
     type: "number",
     required: true,
     trigger: ["blur", "input"],
-    message: "请输入左上角X坐标",
+    message: () => t("pages.Setting.Mask.areaFormMissing.x"),
   },
   posY: {
     type: "number",
     required: true,
     trigger: ["blur", "input"],
-    message: "请输入左上角Y坐标",
+    message: () => t("pages.Setting.Mask.areaFormMissing.y"),
   },
   sizeW: {
     type: "number",
     required: true,
     trigger: ["blur", "input"],
-    message: "请输入蒙版宽度",
+    message: () => t("pages.Setting.Mask.areaFormMissing.w"),
   },
   sizeH: {
     type: "number",
     required: true,
     trigger: ["blur", "input"],
-    message: "请输入蒙版高度",
+    message: () => t("pages.Setting.Mask.areaFormMissing.h"),
   },
 };
 
@@ -104,10 +106,10 @@ function handleAdjustClick(e: MouseEvent) {
     if (!errors) {
       adjustMaskArea().then(() => {
         localStore.set("maskArea", areaModel.value);
-        message.success("蒙版区域已保存");
+        message.success(t("pages.Setting.Mask.areaSaved"));
       });
     } else {
-      message.error("请正确输入蒙版的坐标和尺寸");
+      message.error(t("pages.Setting.Mask.incorrectArea"));
     }
   });
 }
@@ -163,14 +165,17 @@ onUnmounted(() => {
 
 <template>
   <div class="setting-page">
-    <NH4 prefix="bar">按键提示</NH4>
+    <NH4 prefix="bar">{{ $t("pages.Setting.Mask.buttonPrompts") }}</NH4>
-    <NFormItem label="是否显示" label-placement="left">
+    <NFormItem
+      :label="$t('pages.Setting.Mask.ifButtonPrompts')"
+      label-placement="left"
+    >
       <NCheckbox
         v-model:checked="store.maskButton.show"
         @update:checked="localStore.set('maskButton', store.maskButton)"
       />
     </NFormItem>
-    <NFormItem label="不透明度" label-placement="left">
+    <NFormItem :label="$t('pages.Setting.Mask.opacity')" label-placement="left">
       <NSlider
         v-model:value="store.maskButton.transparency"
         @update:checked="localStore.set('maskButton', store.maskButton)"
@@ -190,7 +195,7 @@ onUnmounted(() => {
       require-mark-placement="right-hanging"
     >
       <NFlex justify="space-between" align="center">
-        <NH4 prefix="bar">蒙版调整</NH4>
+        <NH4 prefix="bar">{{ $t("pages.Setting.Mask.areaAdjust") }}</NH4>
         <NButton
           tertiary
           circle
@@ -207,29 +212,29 @@ onUnmounted(() => {
         <NFormItemGi label="X" path="posX">
           <NInputNumber
             v-model:value="areaModel.posX"
-            placeholder="左上角X坐标"
+            :placeholder="$t('pages.Setting.Mask.areaPlaceholder.x')"
           />
         </NFormItemGi>
         <NFormItemGi label="Y" path="posY">
           <NInputNumber
             v-model:value="areaModel.posY"
-            placeholder="左上角Y坐标"
+            :placeholder="$t('pages.Setting.Mask.areaFormPlaceholder.y')"
           />
         </NFormItemGi>
         <NFormItemGi label="W" path="sizeW">
           <NInputNumber
             v-model:value="areaModel.sizeW"
-            placeholder="蒙版宽度"
+            :placeholder="$t('pages.Setting.Mask.areaFormPlaceholder.w')"
           />
         </NFormItemGi>
         <NFormItemGi label="H" path="sizeH">
           <NInputNumber
             v-model:value="areaModel.sizeH"
-            placeholder="蒙版高度"
+            :placeholder="$t('pages.Setting.Mask.areaFormPlaceholder.h')"
           />
         </NFormItemGi>
       </NGrid>
-      <NP>提示：蒙版尺寸与设备尺寸将用于坐标转换，请保证尺寸的准确性</NP>
+      <NP>{{ $t("pages.Setting.Mask.areaTip") }}</NP>
     </NForm>
   </div>
 </template>

src/components/setting/Script.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { NH4 } from "naive-ui";
-</script>
-
-<template>
-  <div class="setting-page">
-    <NH4 prefix="bar">敬请期待</NH4>
-  </div>
-</template>
-
-<style scoped>
-.setting-page {
-  padding: 10px 25px;
-}
-</style>

src/components/setting/Setting.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Basic from "./Basic.vue";
-import Script from "./Script.vue";
 import Mask from "./Mask.vue";
 import About from "./About.vue";
 import { NTabs, NTabPane, NScrollbar, NSpin } from "naive-ui";
@@ -13,22 +12,17 @@ const store = useGlobalStore();
   <div class="setting">
     <NSpin :show="store.showLoadingRef">
       <NTabs type="line" animated placement="left" default-value="basic">
-        <NTabPane tab="基本设置" name="basic">
+        <NTabPane :tab="$t('pages.Setting.tabs.basic')" name="basic">
           <NScrollbar>
             <Basic />
           </NScrollbar>
         </NTabPane>
-        <NTabPane tab="蒙版设置" name="mask">
+        <NTabPane :tab="$t('pages.Setting.tabs.mask')" name="mask">
           <NScrollbar>
             <Mask />
           </NScrollbar>
         </NTabPane>
-        <NTabPane tab="脚本设置" name="script">
+        <NTabPane :tab="$t('pages.Setting.tabs.about')" name="about">
-          <NScrollbar>
-            <Script />
-          </NScrollbar>
-        </NTabPane>
-        <NTabPane tab="关于" name="about">
           <NScrollbar>
             <About />
           </NScrollbar>
@@ -46,7 +40,7 @@ const store = useGlobalStore();
   overflow-y: auto;
   display: flex;
 
-  .n-tabs{
+  .n-tabs {
     height: 100%;
   }
 

src/i18n/en-US.json

@@ -1,7 +1,7 @@
 {
   "pages": {
     "Device": {
-      "localPort": "Local Port",
+      "localPort": "Local port",
       "status": "Status",
       "shutdown": {
         "title": "Warning",
@@ -55,6 +55,64 @@
         "content": "Please go to the device page to control any device",
         "positiveText": "To control"
       }
+    },
+    "Setting": {
+      "tabs": {
+        "basic": "Basic settings",
+        "mask": "Mask setting",
+        "about": "About"
+      },
+      "Mask": {
+        "areaFormMissing": {
+          "x": "Enter the X coordinate of the mask upper left corner",
+          "y": "Enter the Y coordinate of the mask upper left corner",
+          "w": "Enter mask width",
+          "h": "Enter the mask height"
+        },
+        "areaSaved": "Mask area saved",
+        "incorrectArea": "Please enter the coordinates and size of the mask correctly",
+        "buttonPrompts": "Button prompts",
+        "ifButtonPrompts": "Whether to display",
+        "opacity": "Opacity",
+        "areaAdjust": "Mask adjustment",
+        "areaPlaceholder": {
+          "x": "X coordinate of upper left corner"
+        },
+        "areaFormPlaceholder": {
+          "y": "Y coordinate of upper left corner",
+          "w": "Mask width",
+          "h": "Mask height"
+        },
+        "areaTip": "Tip: The mask size and device size will be used for coordinate conversion, please ensure the accuracy of the size"
+      },
+      "Basic": {
+        "delLocalStore": {
+          "dialog": {
+            "title": "Warning",
+            "delKey": "Data \"{0}\" is about to be deleted. The deletion operation is irreversible. Do you want to continue?",
+            "positiveText": "Delete",
+            "negativeText": "Cancel",
+            "delAll": "The data is about to be cleared. The operation is irreversible and the software will be restarted after clearing. Do you want to continue?"
+          },
+          "warning": "Deleting data may lead to unpredictable consequences, so please operate with caution. \nIf an exception occurs, please try clearing the data and restarting the software."
+        },
+        "language": "Language",
+        "localStore": "Local data",
+        "delCurData": "Delete current data"
+      },
+      "About": {
+        "introduction": "A Scrcpy client in Rust & Tarui aimed at providing mouse and key mapping to control Android device.",
+        "github": "Github repo",
+        "blog": "AkiChase's Blog",
+        "about": "About",
+        "update": "Update",
+        "checkUpdateOnStartup": "Check for software updates on startup",
+        "curVersion": "Current version: {0}",
+        "checkUpdate": "Check for updates"
+      }
     }
+  },
+  "sidebar": {
+    "noControledDevice": "No devices are controlled"
   }
 }

src/i18n/zh-CN.json

@@ -55,6 +55,64 @@
         "positiveText": "去控制"
       },
       "inputBoxPlaceholder": "输入文本后按Enter/Esc"
+    },
+    "Setting": {
+      "tabs": {
+        "basic": "基本设置",
+        "mask": "蒙版设置",
+        "about": "关于"
+      },
+      "Mask": {
+        "incorrectArea": "请正确输入蒙版的坐标和尺寸",
+        "areaSaved": "蒙版区域已保存",
+        "buttonPrompts": "按键提示",
+        "ifButtonPrompts": "是否显示",
+        "opacity": "不透明度",
+        "areaAdjust": "蒙版调整",
+        "areaPlaceholder": {
+          "x": "左上角X坐标"
+        },
+        "areaFormPlaceholder": {
+          "y": "左上角Y坐标",
+          "w": "蒙版宽度",
+          "h": "蒙版高度"
+        },
+        "areaTip": "提示：蒙版尺寸与设备尺寸将用于坐标转换，请保证尺寸的准确性",
+        "areaFormMissing": {
+          "x": "请输入蒙版左上角X坐标",
+          "y": "请输入蒙版左上角Y坐标",
+          "w": "请输入蒙版宽度",
+          "h": "请输入蒙版高度"
+        }
+      },
+      "Basic": {
+        "delLocalStore": {
+          "dialog": {
+            "title": "警告",
+            "positiveText": "删除",
+            "negativeText": "取消",
+            "delKey": "即将删除数据\"{0}\"，删除操作不可撤回，是否继续？",
+            "delAll": "即将清空数据，操作不可撤回，且清空后将重启软件，是否继续？"
+          },
+          "warning": "删除数据可能导致无法预料的后果，请慎重操作。若出现异常请尝试清空数据并重启软件。"
+        },
+        "language": "语言",
+        "localStore": "本地数据",
+        "delCurData": "删除当前数据"
+      },
+      "About": {
+        "about": "关于",
+        "introduction": "一个基于 Rust & Tarui 的 Scrcpy 客户端，旨在提供鼠标键盘按键映射来控制安卓设备。",
+        "github": "Github 仓库",
+        "blog": "AkiChase 博客",
+        "update": "更新",
+        "curVersion": "当前版本：{0}",
+        "checkUpdate": "检查更新",
+        "checkUpdateOnStartup": "启动时检查软件更新"
+      }
     }
+  },
+  "sidebar": {
+    "noControledDevice": "未控制任何设备"
   }
 }