feat(i18n+Device): add i18n for Device page

package.json

@@ -18,6 +18,7 @@
     "@tauri-apps/plugin-store": "2.0.0-beta.2",
     "pinia": "^2.1.7",
     "vue": "^3.3.4",
+    "vue-i18n": "^9.13.1",
     "vue-router": "4"
   },
   "devDependencies": {

src/components/Device.vue

@@ -45,7 +45,9 @@ import { UnlistenFn, listen } from "@tauri-apps/api/event";
 import { Store } from "@tauri-apps/plugin-store";
 import { shutdown } from "../frontcommand/scrcpyMaskCmd";
 import { useGlobalStore } from "../store/global";
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
 const dialog = useDialog();
 const store = useGlobalStore();
 const message = useMessage();
@@ -105,7 +107,7 @@ const tableCols: DataTableColumns = [
     key: "id",
   },
   {
-    title: "Status",
+    title: t("pages.Device.status"),
     key: "status",
   },
 ];
@@ -144,10 +146,10 @@ const tableRowProps = (_: any, index: number) => {
 
 async function shutdownSC() {
   dialog.warning({
-    title: "Warning",
+    title: t("pages.Device.shutdown.title"),
-    content: "确定关闭Scrcpy控制服务?",
+    content: t("pages.Device.shutdown.content"),
-    positiveText: "确定",
+    positiveText: t("pages.Device.shutdown.positiveText"),
-    negativeText: "取消",
+    negativeText: t("pages.Device.shutdown.negativeText"),
     onPositiveClick: async () => {
       await shutdown();
       store.controledDevice = null;
@@ -162,11 +164,11 @@ const menuY = ref(0);
 const showMenu = ref(false);
 const menuOptions: DropdownOption[] = [
   {
-    label: () => h("span", "控制此设备"),
+    label: () => h("span", t("pages.Device.menu.control")),
     key: "control",
   },
   {
-    label: () => h("span", "获取屏幕尺寸"),
+    label: () => h("span", t("pages.Device.menu.screen")),
     key: "screen",
   },
 ];
@@ -181,7 +183,7 @@ async function deviceControl() {
   }
 
   if (!(store.screenSizeW > 0) || !(store.screenSizeH > 0)) {
-    message.error("请正确输入当前控制设备的屏幕尺寸");
+    message.error(t("pages.Device.deviceControl.inputScreenSize"));
     store.screenSizeW = 0;
     store.screenSizeH = 0;
     store.hideLoading();
@@ -189,7 +191,7 @@ async function deviceControl() {
   }
 
   if (store.controledDevice) {
-    message.error("请先关闭当前控制设备");
+    message.error(t("pages.Device.deviceControl.closeCurDevice"));
     store.hideLoading();
     return;
   }
@@ -198,7 +200,7 @@ async function deviceControl() {
     sizeW: store.screenSizeW,
     sizeH: store.screenSizeH,
   });
-  message.info("屏幕尺寸已保存，正在启动控制服务，请保持设备亮屏");
+  message.info(t("pages.Device.deviceControl.controlInfo"));
 
   const device = devices.value[rowIndex];
 
@@ -216,7 +218,7 @@ async function deviceControl() {
       await shutdown();
       store.controledDevice = null;
       store.hideLoading();
-      message.error("设备连接超时");
+      message.error(t("pages.Device.deviceControl.connectTimeout"));
     }
   }, 6000);
 
@@ -239,7 +241,9 @@ async function deviceGetScreenSize() {
   let id = devices.value[rowIndex].id;
   const size = await getDeviceScreenSize(id);
   store.hideLoading();
-  message.success(`设备屏幕尺寸为: ${size[0]} x ${size[1]}`);
+  message.success(
+    t("pages.Device.deviceGetScreenSize") + `${size[0]} x ${size[1]}`
+  );
 }
 
 async function onMenuSelect(key: string) {
@@ -264,7 +268,7 @@ async function refreshDevices() {
 
 async function connectDevice() {
   if (!address.value) {
-    message.error("请输入无线调试地址");
+    message.error(t("pages.Device.inputWirelessAddress"));
     return;
   }
 
@@ -278,51 +282,51 @@ async function connectDevice() {
   <NScrollbar>
     <div class="device">
       <NSpin :show="store.showLoadingRef">
-        <NH4 prefix="bar">本地端口</NH4>
+        <NH4 prefix="bar">{{ $t("pages.Device.localPort") }}</NH4>
         <NInputNumber
           v-model:value="port"
           :show-button="false"
           :min="16384"
           :max="49151"
-          placeholder="Scrcpy 本地端口"
+          :placeholder="$t('pages.Device.localPortPlaceholder')"
           style="max-width: 300px"
         />
-        <NH4 prefix="bar">无线连接</NH4>
+        <NH4 prefix="bar">{{ $t("pages.Device.wireless") }}</NH4>
         <NInputGroup style="max-width: 300px">
           <NInput
             v-model:value="address"
             clearable
-            placeholder="无线调试地址"
+            :placeholder="$t('pages.Device.wirelessPlaceholder')"
           />
-          <NButton type="primary" @click="connectDevice">连接</NButton>
+          <NButton type="primary" @click="connectDevice">{{
+            $t("pages.Device.connect")
+          }}</NButton>
         </NInputGroup>
-        <NH4 prefix="bar">设备尺寸</NH4>
+        <NH4 prefix="bar">{{ $t("pages.Device.deviceSize.title") }}</NH4>
         <NFlex justify="left" align="center">
-          <NFormItem label="宽度">
+          <NFormItem :label="$t('pages.Device.deviceSize.width')">
             <NInputNumber
               v-model:value="store.screenSizeW"
-              placeholder="屏幕宽度"
+              :placeholder="$t('pages.Device.deviceSize.widthPlaceholder')"
               :min="0"
               :disabled="store.controledDevice !== null"
             />
           </NFormItem>
-          <NFormItem label="高度">
+          <NFormItem :label="$t('pages.Device.deviceSize.height')">
             <NInputNumber
               v-model:value="store.screenSizeH"
-              placeholder="屏幕高度"
+              :placeholder="$t('pages.Device.deviceSize.heightPlaceholder')"
               :min="0"
               :disabled="store.controledDevice !== null"
             />
           </NFormItem>
         </NFlex>
-        <NP
+        <NP>{{ $t("pages.Device.deviceSize.tip") }}</NP>
-          >提示：请正确输入当前控制设备的屏幕尺寸，这是成功发送触摸事件的必要参数</NP
+        <NH4 prefix="bar">{{ $t("pages.Device.controledDevice") }}</NH4>
-        >
-        <NH4 prefix="bar">受控设备</NH4>
         <div class="controled-device-list">
           <NEmpty
             size="small"
-            description="No Controled Device"
+            :description="$t('pages.Device.noControledDevice')"
             v-if="!store.controledDevice"
           />
           <div class="controled-device" v-if="store.controledDevice">
@@ -352,7 +356,9 @@ async function connectDevice() {
           </div>
         </div>
         <NFlex justify="space-between" align="center">
-          <NH4 style="margin: 20px 0" prefix="bar">可用设备</NH4>
+          <NH4 style="margin: 20px 0" prefix="bar">{{
+            $t("pages.Device.availableDevice")
+          }}</NH4>
           <NButton
             tertiary
             circle

src/i18n/en.json

@@ -0,0 +1,41 @@
+{
+  "pages": {
+    "Device": {
+      "localPort": "Local Port",
+      "status": "Status",
+      "shutdown": {
+        "title": "Warning",
+        "content": "Are you sure to turn off the Scrcpy control service?",
+        "positiveText": "Confirm",
+        "negativeText": "Cancel"
+      },
+      "menu": {
+        "control": "Control this device",
+        "screen": "Get screen size"
+      },
+      "deviceControl": {
+        "inputScreenSize": "Please enter the screen size of the current control device correctly",
+        "closeCurDevice": "Please close the current control device first",
+        "controlInfo": "The screen size has been saved and the control service is starting. Please keep the device screen on.",
+        "connectTimeout": "Device connection timeout"
+      },
+      "deviceGetScreenSize": "Device screen size: ",
+      "inputWirelessAddress": "Please enter the wireless debugging address",
+      "localPortPlaceholder": "Scrcpy local port",
+      "wireless": "Wireless connection",
+      "wirelessPlaceholder": "Wireless connection address",
+      "connect": "Connect",
+      "deviceSize": {
+        "title": "Device screen size",
+        "width": "Width",
+        "widthPlaceholder": "Screen width",
+        "height": "Height",
+        "heightPlaceholder": "Screen height",
+        "tip": "Tip: Please enter the screen size of the current control device correctly. This is a necessary parameter to successfully send touch events."
+      },
+      "controledDevice": "Controlled device",
+      "availableDevice": "Available devices",
+      "noControledDevice": "No Controled Device"
+    }
+  }
+}

src/i18n/index.ts

@@ -0,0 +1,19 @@
+import { createI18n } from "vue-i18n";
+import { Store } from "@tauri-apps/plugin-store";
+
+import en from "./en.json";
+import zh from "./zh.json";
+
+const localStore = new Store("store.bin");
+const language = (await localStore.get<string>("language")) ?? "en";
+
+const i18n = createI18n({
+  locale: language,
+  allowComposition: true,
+  messages: {
+    en,
+    zh,
+  },
+});
+
+export default i18n;

src/i18n/zh.json

@@ -0,0 +1,41 @@
+{
+  "pages": {
+    "Device": {
+      "status": "状态",
+      "shutdown": {
+        "title": "警告",
+        "content": "确定关闭Scrcpy控制服务?",
+        "positiveText": "确定",
+        "negativeText": "取消"
+      },
+      "menu": {
+        "control": "控制此设备",
+        "screen": "获取屏幕尺寸"
+      },
+      "deviceControl": {
+        "inputScreenSize": "请正确输入当前控制设备的屏幕尺寸",
+        "closeCurDevice": "请先关闭当前控制设备",
+        "controlInfo": "屏幕尺寸已保存，正在启动控制服务，请保持设备亮屏",
+        "connectTimeout": "设备连接超时"
+      },
+      "deviceGetScreenSize": "设备屏幕尺寸为:",
+      "inputWirelessAddress": "请输入无线调试地址",
+      "localPort": "本地端口",
+      "localPortPlaceholder": "Scrcpy 本地端口",
+      "wireless": "无线连接",
+      "wirelessPlaceholder": "无线连接地址",
+      "connect": "连接",
+      "deviceSize": {
+        "title": "设备屏幕尺寸",
+        "width": "宽度",
+        "widthPlaceholder": "屏幕宽度",
+        "heightPlaceholder": "屏幕高度",
+        "height": "高度",
+        "tip": "提示：请正确输入当前控制设备的屏幕尺寸，这是成功发送触摸事件的必要参数"
+      },
+      "controledDevice": "受控设备",
+      "noControledDevice": "无受控设备",
+      "availableDevice": "可用设备"
+    }
+  }
+}

src/main.ts

@@ -3,10 +3,12 @@ import { createPinia } from "pinia";
 import "./styles.css";
 import App from "./App.vue";
 import router from "./router";
+import i18n from "./i18n";
 
 const pinia = createPinia();
 
 const app = createApp(App);
 app.use(router);
 app.use(pinia);
+app.use(i18n);
 app.mount("#app");