From b7590d899767692e3ef02088af3173cf95c7758f Mon Sep 17 00:00:00 2001
From: kerms <kerms@niazo.org>
Date: Sat, 18 Jan 2025 16:41:38 +0100
Subject: [PATCH] feat(i18n): page wifi, feedback amd about

---
 package-lock.json      |  42 +++++------
 src/locales/en.ts      |  77 ++++++++++++++++++++
 src/locales/fr.ts      |  78 +++++++++++++++++++-
 src/locales/zh.ts      |  76 +++++++++++++++++++
 src/views/About.vue    |  35 ++++-----
 src/views/Feedback.vue |  11 +--
 src/views/Wifi.vue     | 161 ++++++++++++++++++++---------------------
 7 files changed, 352 insertions(+), 128 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 961a223..fe03b36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1542,9 +1542,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001599",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001599.tgz",
-      "integrity": "sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==",
+      "version": "1.0.30001667",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001667.tgz",
+      "integrity": "sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==",
       "dev": true,
       "funding": [
         {
@@ -1802,12 +1802,12 @@
       "dev": true
     },
     "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
       "devOptional": true,
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -3312,9 +3312,9 @@
       }
     },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "devOptional": true
     },
     "node_modules/muggle-string": {
@@ -3718,9 +3718,9 @@
       "dev": true
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -3826,9 +3826,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "funding": [
         {
           "type": "opencollective",
@@ -3845,8 +3845,8 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -4272,9 +4272,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "engines": {
         "node": ">=0.10.0"
       }
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 246a957..08d4856 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -5,6 +5,26 @@ export default {
     disconnected: "Disconnected",
     connected: "Connected",
     connecting: "Connecting",
+    use: "use",
+    author: "author",
+    studioYunSi: "Yunsi Studio",
+    authorEmail: "Author email",
+    TencentQQGroup: "QQ Group",
+    Discord: "Discord",
+    BiliBili: "BiliBili",
+
+    suggestion: "suggestion",
+    feature: "feature",
+    version: "Version",
+    releaseTime: "Release Time",
+    credit: "Credit",
+    aboutWebHost: "About the Web Host Application",
+    aboutDebugger: "About the Debugger",
+    officialWebsite: "Official Website",
+    email: "Email",
+    note: "Note",
+    welcomeMessage: "Welcome to reach out anytime",
+    serialNumber: "Serial Number",
 
     ws: {
         disconnected: "Disconnected",
@@ -122,6 +142,63 @@ export default {
         sendFormat: "Send Format",
         cachedFrame: "Cached",
         format: "Format",
+    },
+
+    wifi: {
+        settings: "Settings",
+        setFailed: "Settings failed to set",
+        setSuccess: "Settings saved",
+        connection: "Connection",
+        scanning: "Scanning",
+        scan: "Scan",
+        scanDone: "Scan done",
+        warnWifiName: "Enter Wi-Fi Name",
+        password: "Password",
+        connectInfoHTML: "Changing Wi-Fi will disconnect this interface from the passthrough device if not connected through its hotspot.",
+        connect: "Connect",
+        mode: "Mode",
+        save: "Save",
+        station: "Station",
+        intelligent: "Smart",
+        APOnly: "Hotspot Only",
+        disconnected: "Disconnected",
+        modeTipsHtml: "<p>\n" +
+            "<el-textsize=\"small\">Smart Mode:</el-text>\n" +
+            "After connecting to Wi-Fi, the hotspot will turn off automatically after 30 seconds if no device is connected. It will turn on after 5 seconds if disconnected from AP.\n" +
+            "</p>\n" +
+            "<p>\n" +
+            "<el-textsize=\"small\">Coexistence Mode:</el-text>\n" +
+            "Convenient but impacts stability and increases power consumption.\n" +
+            "</p>\n" +
+            "<p>\n" +
+            "<el-textsize=\"small\">Hotspot-Only Mode Drawback:</el-text>\n" +
+            "No network connection.\n" +
+            "</p>",
+        enabled: "Enabled",
+        disabled: "Disabled",
+
+        stationInfo: "Terminal (STA) Info",
+        hotspotInfo: "Hotspot (AP) Info",
+        signalStrength: "Signal Strength",
+        gateway: "Gateway",
+        netmask: "Netmask",
+        primaryDNS: "Primary DNS",
+        backupDNS: "Backup DNS",
+        IPmode: "IP Allocation Mode",
+        DNSmode: "DNS Mode",
+        internalAddress: "Internal Address",
+
+        autoIP: "Automatic (DHCP)",
+        staticIP: "Static IP",
+        autoDNS: "Automatic (Use Gateway)",
+        staticDNS: "Static DNS",
+        APauto_STA: "Smart Hotspot + Persistent Terminal (AP+STA)",
+        APonly: "Hotspot Only (AP)",
+        AP_STA: "Persistent Hotspot + Persistent Terminal (AP+STA)",
+
+        connectionSuccess: "Connection Successful",
+        enterAPName: "Entre the AP name",
+        debuggerNotConnected: "Debugger not connected",
     }
 
 };
\ No newline at end of file
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
index eee64ab..357a23a 100644
--- a/src/locales/fr.ts
+++ b/src/locales/fr.ts
@@ -5,6 +5,26 @@ export default {
     disconnected: "Déconnecté",
     connected: "Connecté",
     connecting: "Connexion..",
+    use: "utiliser",
+    author: "Auteur",
+    studioYunSi: "Studio Yunsi",
+    authorEmail: "Email de l'auteur",
+    TencentQQGroup: "Groupe QQ",
+    Discord: "Discord",
+    BiliBili: "BiliBili",
+
+    suggestion: "suggestion",
+    feature: "fonctionnalité",
+    version: "Version",
+    releaseTime: "Date de Publication",
+    credit: "Remerciements",
+    aboutWebHost: "À propos de l'Hôte Web",
+    aboutDebugger: "À propos du Débogueur",
+    officialWebsite: "Site Officiel",
+    email: "E-mail",
+    note: "Remarque",
+    welcomeMessage: "N'hésitez pas à venir nous solliciter.",
+    serialNumber: "Numéro de série",
 
     ws: {
         disconnected: "Déconnecté",
@@ -123,6 +143,62 @@ export default {
         sendFormat: "Format d'Envoi",
         cachedFrame: "Cache",
         format: "Format",
-    }
+    },
 
+    wifi: {
+        settings: "Paramètres",
+        setFailed: "Echec d'enregistrement de paramètres",
+        setSuccess: "Paramètres enregistrés",
+        connection: "Connexion",
+        scanning: "Recherche en cours",
+        scan: "Rechercher",
+        scanDone: "Fin recherche de Wi-Fi",
+        warnWifiName: "Entrez le nom du Wi-Fi",
+        password: "Mot de passe",
+        connectInfoHTML: "Changer de Wi-Fi déconnectera cette interface du dispositif de transmission s'il ne passe pas par le point d'accès.",
+        connect: "Connecter",
+        mode: "Mode",
+        save: "Enregistrer",
+        station: "Station",
+        intelligent: "Intelligent",
+        APOnly: "Point d'accès uniquement",
+        disconnected: "Déconnecté",
+        modeTipsHtml: "<p>\n" +
+            "<el-textsize=\"small\">Mode intelligent :</el-text>\n" +
+            "Après la connexion au Wi-Fi, le point d'accès s'éteindra automatiquement après 30 secondes si aucun appareil n'est connecté. Il s'allumera après 5 secondes si la connexion AP est perdue.\n" +
+            "</p>\n" +
+            "<p>\n" +
+            "<el-textsize=\"small\">Mode coexistence :</el-text>\n" +
+            "Pratique mais réduit la stabilité et augmente la consommation d'énergie.\n" +
+            "</p>\n" +
+            "<p>\n" +
+            "<el-textsize=\"small\">Inconvénient du mode point d'accès seul :</el-text>\n" +
+            "Pas de connexion réseau.\n" +
+            "</p>",
+        enabled: "Activé",
+        disabled: "Désactivé",
+
+        stationInfo: "Info Terminal (STA)",
+        hotspotInfo: "Info Point d'Accès (AP)",
+        signalStrength: "Puissance du Signal",
+        gateway: "Passerelle",
+        netmask: "Masque de Sous-réseau",
+        primaryDNS: "DNS Primaire",
+        backupDNS: "DNS Secondaire",
+        IPmode: "Mode d'Attribution IP",
+        DNSmode: "Mode DNS",
+        internalAddress: "Adresse Interne",
+
+        autoIP: "Automatique (DHCP)",
+        staticIP: "IP Statique",
+        autoDNS: "Automatique (gateway)",
+        staticDNS: "DNS Statique",
+        APauto_STA: "Point d'Accès Intelligent + Terminal Permanent (AP+STA)",
+        APonly: "Point d'Accès Seul (AP)",
+        AP_STA: "Point d'Accès Permanent + Terminal Permanent (AP+STA)",
+
+        connectionSuccess: "Connexion Réussie",
+        enterAPName: "Entrez le nom du AP",
+        debuggerNotConnected: "Debugger non connecté",
+    }
 };
\ No newline at end of file
diff --git a/src/locales/zh.ts b/src/locales/zh.ts
index f8f19bb..cf92d72 100644
--- a/src/locales/zh.ts
+++ b/src/locales/zh.ts
@@ -6,6 +6,25 @@ export default {
     connected: "已连接",
     connecting: "连接中",
     use: "使用",
+    author: "作者",
+    studioYunSi: "允斯工作室",
+    authorEmail: "作者邮箱",
+    TencentQQGroup: "QQ群",
+    Discord: "Discord",
+    BiliBili: "哔哩哔哩",
+
+    suggestion: "建议",
+    feature: "需求",
+    version: "版本",
+    releaseTime: "发布时间",
+    credit: "鸣谢",
+    aboutWebHost: "关于网页版上位机",
+    aboutDebugger: "关于调试器",
+    officialWebsite: "官网",
+    email: "邮箱",
+    note: "备注",
+    welcomeMessage: "欢迎来打扰啊~",
+    serialNumber: "序列号",
 
     ws: {
         disconnected: "未连接",
@@ -127,5 +146,62 @@ export default {
         sendFormat: "发送格式",
         cachedFrame: "缓存帧数",
         format: "格式化",
+    },
+
+    wifi: {
+        settings: "配置",
+        setFailed: "设置失败",
+        setSuccess: "配置成功",
+        connection: "连接",
+        scanning: "扫描中",
+        scan: "扫描",
+        scanDone: "扫描成功",
+        warnWifiName: "请输入WIFI名",
+        password: "密码",
+        connectInfoHTML: "如果不是通过透传器的热点连接，更换Wi-Fi将导致此界面与透传器断开连接。",
+        connect: "连接",
+        mode: "模式",
+        save: "保存",
+        station: "终端",
+        intelligent: "智能",
+        APOnly: "仅开启热点",
+        disconnected: "未连接",
+        modeTipsHtml: "<p>\n" +
+            "<el-textsize=\"small\">智能模式：</el-text>\n" +
+            "成功连接至Wi-Fi后,如果此设备的热点未被其他设备连接,将在30秒后自动关闭热点;如果此设备与AP断开连接,将在5秒后自动开启热点\n" +
+            "</p>\n" +
+            "<p>\n" +
+            "<el-textsize=\"small\">热点+终端共存模式：</el-text>\n" +
+            "方便使用，但是影响稳定性，增加功耗\n" +
+            "</p>\n" +
+            "<p>\n" +
+            "<el-textsize=\"small\">单热点模式缺点：</el-text>\n" +
+            "无网络\n" +
+            "</p>",
+        enabled: "已开启",
+        disabled: "未开启",
+
+        stationInfo: "终端(STA)信息",
+        hotspotInfo: "自发热点(AP)信息",
+        signalStrength: "信号强度",
+        gateway: "网关",
+        netmask: "掩码",
+        primaryDNS: "首选DNS",
+        backupDNS: "备用DNS",
+        IPmode: "IP分配模式",
+        DNSmode: "DNS模式",
+        internalAddress: "内网地址",
+
+        autoIP: "自动 (DHCP)",
+        staticIP: "静态IP",
+        autoDNS: "自动 (使用网关)",
+        staticDNS: "静态DNS",
+        APauto_STA: "智能热点+常开终端 (AP+STA)",
+        APonly: "仅开启热点 (AP)",
+        AP_STA: "常开热点+常开终端 (AP+STA)",
+
+        connectionSuccess: "连接成功",
+        enterAPName: "请输入AP名",
+        debuggerNotConnected: "调试器未连接",
     }
 }
\ No newline at end of file
diff --git a/src/views/About.vue b/src/views/About.vue
index d33f5c4..2f89f39 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {useSystemStore} from "@/stores/useSystemStore";
+import {translate} from "@/locales";
 
 const version = import.meta.env.VITE_APP_GIT_TAG || "v0.0.0";
 const compileTime = import.meta.env.VITE_APP_LAST_COMMIT || "1970-00-00";
@@ -9,16 +10,16 @@ const sysStore = useSystemStore();
 <template>
   <div class="text-layout">
     <el-divider></el-divider>
-    <el-divider>关于</el-divider>
+    <el-divider>{{ translate('page.about') }}</el-divider>
     <el-divider></el-divider>
     <el-collapse>
-      <el-collapse-item title="关于网页版上位机">
+      <el-collapse-item :title="translate('aboutWebHost')">
         <el-descriptions border :column="1" class="mt-5 description-style">
-          <el-descriptions-item label="版本">{{ version }}</el-descriptions-item>
-          <el-descriptions-item label="发布时间">{{ compileTime }}</el-descriptions-item>
+          <el-descriptions-item :label="translate('version')">{{ version }}</el-descriptions-item>
+          <el-descriptions-item :label="translate('releaseTime')">{{ compileTime }}</el-descriptions-item>
         </el-descriptions>
 
-        <el-descriptions title="鸣谢" border :column="1" class="mt-5 description-style">
+        <el-descriptions :title="translate('credit')" border :column="1" class="mt-5 description-style">
           <el-descriptions-item label="vuejs"><a target="_blank" href="https://github.com/vuejs/vue/blob/main/LICENSE">MIT</a>
           </el-descriptions-item>
           <el-descriptions-item label="typescript"><a
@@ -42,15 +43,15 @@ const sysStore = useSystemStore();
           </el-descriptions-item>
         </el-descriptions>
       </el-collapse-item>
-      <el-collapse-item title="关于调试器">
+      <el-collapse-item :title="translate('aboutDebugger')">
         <el-descriptions border :column="1" class="mt-5 description-style">
-          <el-descriptions-item label="官网"><a target="_blank" href="https://yunsi.studio/wireless-debugger">https://yunsi.studio/wireless-debugger</a></el-descriptions-item>
-          <el-descriptions-item label="版本">{{ sysStore.curFmInfo.ver }}</el-descriptions-item>
-          <el-descriptions-item label="更新日期">{{ sysStore.curFmInfo.date }}</el-descriptions-item>
-          <el-descriptions-item label="序列号">{{ sysStore.sysInfo.sn }}</el-descriptions-item>
+          <el-descriptions-item :label="translate('officialWebsite')"><a target="_blank" href="https://yunsi.studio/wireless-debugger">https://yunsi.studio/wireless-debugger</a></el-descriptions-item>
+          <el-descriptions-item :label="translate('version')">{{ sysStore.curFmInfo.ver }}</el-descriptions-item>
+          <el-descriptions-item :label="translate('releaseTime')">{{ sysStore.curFmInfo.date }}</el-descriptions-item>
+          <el-descriptions-item :label="translate('serialNumber')">{{ sysStore.sysInfo.sn }}</el-descriptions-item>
         </el-descriptions>
 
-        <el-descriptions title="鸣谢" border :column="1" class="mt-5 description-style">
+        <el-descriptions :title="translate('credit')" border :column="1" class="mt-5 description-style">
           <el-descriptions-item label="windowsair"><a target="_blank" href="https://github.com/windowsair/wireless-esp8266-dap">wireless-esp8266-dap</a>
           </el-descriptions-item>
         </el-descriptions>
@@ -58,22 +59,22 @@ const sysStore = useSystemStore();
     </el-collapse>
 
 
-    <el-descriptions title="作者：空空(kerms)" border :column="1" class="mt-5 description-style">
-      <el-descriptions-item label="官网"><a target="_blank" href="https://yunsi.studio/">允斯工作室（https://yunsi.studio/）</a></el-descriptions-item>
+    <el-descriptions :title="translate('author') + ' :空空(kerms)'" border :column="1" class="mt-5 description-style">
+      <el-descriptions-item :label="translate('officialWebsite')"><a target="_blank" href="https://yunsi.studio/">https://yunsi.studio/</a></el-descriptions-item>
       <el-descriptions-item label="github"><a target="_blank" href="https://github.com/kerms">https://github.com/kerms</a>
       </el-descriptions-item>
-      <el-descriptions-item label="邮箱">kerms@niazo.org</el-descriptions-item>
+      <el-descriptions-item :label="translate('email')">kerms@niazo.org</el-descriptions-item>
       <el-descriptions-item label="BiliBili"><a target="_blank" href="https://space.bilibili.com/3461571571353885">3461571571353885</a>
       </el-descriptions-item>
-      <el-descriptions-item label="QQ群">642246000</el-descriptions-item>
-      <el-descriptions-item label="备注">欢迎大家来打扰啊～</el-descriptions-item>
+      <el-descriptions-item :label="translate('TencentQQGroup')">642246000</el-descriptions-item>
+      <el-descriptions-item :label="translate('note')">{{ translate('welcomeMessage') }}</el-descriptions-item>
     </el-descriptions>
   </div>
   <el-divider></el-divider>
 
 </template>
 
-<style scoped>
+<style scoped lang="postcss">
 .description-style :deep(.el-descriptions__label) {
   @apply w-32
 }
diff --git a/src/views/Feedback.vue b/src/views/Feedback.vue
index e3757f1..4d9d2b1 100644
--- a/src/views/Feedback.vue
+++ b/src/views/Feedback.vue
@@ -2,12 +2,13 @@
 
   <div class="text-layout">
     <el-divider></el-divider>
-    <el-divider>反馈</el-divider>
+    <el-divider>{{ translate('page.feedback') }}</el-divider>
     <el-divider></el-divider>
 
-    <el-descriptions title="反馈/建议/需要新功能" border :column="1">
-      <el-descriptions-item label="QQ群">642246000</el-descriptions-item>
-      <el-descriptions-item label="作者邮箱">kerms@niazo.org</el-descriptions-item>
+    <el-descriptions :title="translate('page.feedback') + '/' + translate('suggestion') + '/' + translate('feature')" border :column="1">
+      <el-descriptions-item :label="translate('TencentQQGroup')">642246000</el-descriptions-item>
+      <el-descriptions-item :label="translate('authorEmail')">kerms@niazo.org</el-descriptions-item>
+<!--  TODO: add discord + BiliBili / instagram ?  -->
     </el-descriptions>
 
   </div>
@@ -16,5 +17,5 @@
 
 
 <script setup lang="ts">
-
+import {translate} from "@/locales";
 </script>
diff --git a/src/views/Wifi.vue b/src/views/Wifi.vue
index 83cd59c..6d4d57f 100644
--- a/src/views/Wifi.vue
+++ b/src/views/Wifi.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="text-layout">
     <h1 class="page-title">
-      Wi-Fi 配置
+      Wi-Fi {{ translate('wifi.settings') }}
     </h1>
     <el-divider></el-divider>
 
-    <h2 class="mb-4 text-xl font-bold tracking-tight md:text-2xl lg:text-3xl">连接Wi-Fi</h2>
+    <h2 class="mb-4 text-xl font-bold tracking-tight md:text-2xl lg:text-3xl">{{ translate('wifi.connection') }} Wi-Fi</h2>
     <el-form label-width="auto" ref="formRef" :model="ssidValidateForm" class="m-auto">
       <el-form-item
-          label="Wi-Fi名"
+          label="Wi-Fi"
           prop="wifiSsid"
           :rules="[
-        { required: true, message: '请输入WIFI名'},
+        { required: true, message: translate('wifi.warnWifiName')},
       ]"
       >
         <div class="flex w-full">
@@ -36,7 +36,7 @@
           </div>
         </div>
       </el-form-item>
-      <el-form-item label="密码">
+      <el-form-item :label="translate('wifi.password')">
         <el-input
             v-model="ssidValidateForm.password"
             show-password
@@ -46,32 +46,21 @@
       </el-form-item>
       <div class="mb-2">
         <el-alert type="info" show-icon>
-          如果不是通过透传器的热点连接，更换Wi-Fi将导致此界面与透传器断开连接。
+          {{ translate("wifi.connectInfo")}}
         </el-alert>
       </div>
       <div class="flex justify-center">
-        <el-button @click="onConnectClick" type="primary">连接</el-button>
+        <el-button @click="onConnectClick" type="primary">{{ translate('wifi.connect') }}</el-button>
       </div>
     </el-form>
 
     <el-divider></el-divider>
     <div class="flex items-center">
-      <h5 class="text-md font-bold text-gray-800 w-32">Wi-Fi模式</h5>
+      <h5 class="text-md font-bold text-gray-800 w-32">Wi-Fi {{ translate('wifi.mode') }}</h5>
       <div class="flex shrink-0">
         <el-tooltip effect="light">
           <template #content>
-            <p>
-              <el-text size="small">智能模式：</el-text>
-              成功连接Wi-Fi，30秒后自动关闭热点；断开连接，5秒后自动打开热点
-            </p>
-            <p>
-              <el-text size="small">热点+终端共存模式：</el-text>
-              方便使用，但是影响稳定性，增加功耗
-            </p>
-            <p>
-              <el-text size="small">单热点模式缺点：</el-text>
-              无网络
-            </p>
+            <div v-html="translate('wifi.modeTipsHtml')"></div>
           </template>
           <InlineSvg name="help" class="w-3.5 h-3.5 text-gray-500 cursor-help"></InlineSvg>
         </el-tooltip>
@@ -84,28 +73,28 @@
             :label="item.label"
         />
       </el-select>
-      <el-button type="primary" @click="wifiChangeMode" :loading="wifiMode_loading">保存</el-button>
+      <el-button type="primary" @click="wifiChangeMode" :loading="wifiMode_loading">{{ translate('wifi.save') }}</el-button>
     </div>
 
     <el-divider></el-divider>
 
 
     <el-descriptions
-        title="Wi-Fi终端(STA)信息"
+        :title="'Wi-Fi ' + translate('wifi.stationInfo')"
         :column="1"
         border
         class="description-style"
     >
       <template #extra>
         <el-switch v-model="wifiSta_On" :disabled="wsStore.state != ControlEvent.CONNECTED || !wifiAp_On"
-                   active-text="已开启" inactive-text="未开启" :loading="wifiMode_loading"
+                   :active-text="translate('wifi.enabled')" :inactive-text="translate('wifi.disabled')" :loading="wifiMode_loading"
                    :before-change="()=>beforeWifiModeChange('STA')"
         />
       </template>
       <el-descriptions-item span="4">
         <template #label>
           <div>
-            信号强度
+            {{ translate('wifi.signalStrength') }}
           </div>
         </template>
         <template #default>
@@ -115,7 +104,7 @@
       <el-descriptions-item span="4">
         <template #label>
           <div>
-            Wi-Fi名(SSID)
+            Wi-Fi(SSID)
           </div>
         </template>
         <p>{{ wifiStaApInfo.ssid }}</p>
@@ -138,14 +127,14 @@
       </el-descriptions-item>
       <el-descriptions-item span="4">
         <template #label>
-          <div>IP(内网地址)</div>
+          <div>IP({{ translate('wifi.internalAddress') }})</div>
         </template>
         <p>{{ wifiStaApInfo.ip }}</p>
       </el-descriptions-item>
       <el-descriptions-item span="4">
         <template #label>
           <div>
-            网关
+            {{ translate('wifi.gateway') }}
           </div>
         </template>
         <p>{{ wifiStaApInfo.gateway }}</p>
@@ -153,7 +142,7 @@
       <el-descriptions-item span="4">
         <template #label>
           <div>
-            掩码
+            {{ translate('wifi.netmask') }}
           </div>
         </template>
         <p>{{ wifiStaApInfo.netmask }}</p>
@@ -161,7 +150,7 @@
       <el-descriptions-item span="4">
         <template #label>
           <div>
-            首选DNS
+            {{ translate('wifi.primaryDNS') }}
           </div>
         </template>
         <p>{{ wifiStaApInfo.dns_main }}</p>
@@ -169,7 +158,7 @@
       <el-descriptions-item span="4">
         <template #label>
           <div>
-            备用DNS
+            {{ translate('wifi.backupDNS') }}
           </div>
         </template>
         <p>{{ wifiStaApInfo.dns_backup }}</p>
@@ -178,7 +167,7 @@
       <el-descriptions-item span="4">
         <template #label>
           <div>
-            IP分配模式
+            {{ translate('wifi.IPmode') }}
           </div>
         </template>
         <el-select v-model="wifiStaticInfo.static_ip_en" :disabled="wsStore.state != ControlEvent.CONNECTED">
@@ -192,14 +181,14 @@
       </el-descriptions-item>
       <el-descriptions-item span="4" v-if="wifiStaticInfo.static_ip_en">
         <template #label>
-          <div>IP(内网地址)</div>
+          <div>IP({{ translate('wifi.internalAddress') }})</div>
         </template>
         <el-input v-model="wifiStaticInfo.ip"></el-input>
       </el-descriptions-item>
       <el-descriptions-item span="4" v-if="wifiStaticInfo.static_ip_en">
         <template #label>
           <div>
-            网关
+            {{ translate('wifi.gateway') }}
           </div>
         </template>
         <el-input v-model="wifiStaticInfo.gateway"></el-input>
@@ -207,7 +196,7 @@
       <el-descriptions-item span="4" v-if="wifiStaticInfo.static_ip_en">
         <template #label>
           <div>
-            掩码
+            {{ translate('wifi.netmask') }}
           </div>
         </template>
         <el-input v-model="wifiStaticInfo.netmask"></el-input>
@@ -216,7 +205,7 @@
       <el-descriptions-item span="4">
         <template #label>
           <div>
-            DNS模式
+            {{ translate('wifi.DNSmode') }}
           </div>
         </template>
         <el-select v-model="wifiStaticInfo.static_dns_en" :disabled="wsStore.state != ControlEvent.CONNECTED">
@@ -231,7 +220,7 @@
       <el-descriptions-item span="4" v-if="wifiStaticInfo.static_dns_en">
         <template #label>
           <div>
-            首选DNS
+            {{ translate('wifi.primaryDNS') }}
           </div>
         </template>
         <el-input v-model="wifiStaticInfo.dns_main"></el-input>
@@ -239,34 +228,34 @@
       <el-descriptions-item span="4" v-if="wifiStaticInfo.static_dns_en">
         <template #label>
           <div>
-            备用DNS
+            {{ translate('wifi.backupDNS') }}
           </div>
         </template>
         <el-input v-model="wifiStaticInfo.dns_backup"></el-input>
       </el-descriptions-item>
     </el-descriptions>
     <div class="flex justify-center mt-4">
-      <el-button type="primary" :loading="wifiMode_loading" @click="wifiStaSetStaticInfo">保存</el-button>
+      <el-button type="primary" :loading="wifiMode_loading" @click="wifiStaSetStaticInfo">{{ translate('wifi.save') }}</el-button>
     </div>
 
     <el-divider></el-divider>
 
     <el-descriptions
-        title="Wi-Fi自发热点(AP)信息"
+        :title="'Wi-Fi ' + translate('wifi.hotspotInfo')"
         :column="1"
         border
         class="description-style"
     >
       <template #extra>
         <el-switch v-model="wifiAp_On" :disabled="wsStore.state != ControlEvent.CONNECTED || !wifiSta_On"
-                   :loading="wifiMode_loading" active-text="已开启" inactive-text="未开启"
+                   :loading="wifiMode_loading" :active-text="translate('wifi.enabled')" :inactive-text="translate('wifi.disabled')"
                    :before-change="()=>beforeWifiModeChange('AP')"
         />
       </template>
       <el-descriptions-item span="6">
         <template #label>
           <div>
-            Wi-Fi名(SSID)
+            Wi-Fi(SSID)
           </div>
         </template>
         <div class="flex">
@@ -276,7 +265,7 @@
       <el-descriptions-item span="6">
         <template #label>
           <div>
-            密码
+            {{ translate('wifi.password') }}
           </div>
         </template>
         <el-input v-model="wifiApInfo.password"></el-input>
@@ -302,7 +291,7 @@
       <el-descriptions-item span="4">
         <template #label>
           <div>
-            网关
+            {{ translate('wifi.gateway') }}
           </div>
         </template>
         {{ wifiApInfo.gateway }}
@@ -311,14 +300,14 @@
       <el-descriptions-item span="4">
         <template #label>
           <div>
-            掩码
+            {{ translate('wifi.netmask') }}
           </div>
         </template>
         {{ wifiApInfo.netmask }}
       </el-descriptions-item>
     </el-descriptions>
     <div class="flex justify-center mt-4">
-      <el-button type="primary" :loading="wifiMode_loading" @click="wifiApChangeCredential">保存</el-button>
+      <el-button type="primary" :loading="wifiMode_loading" @click="wifiApChangeCredential">{{ translate('wifi.save') }}</el-button>
     </div>
     <el-divider></el-divider>
   </div>
@@ -326,7 +315,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
+import {computed, type ComputedRef, onMounted, onUnmounted, reactive, ref} from "vue";
 import {
   type IWifiMode,
   wifi_ap_get_info,
@@ -354,9 +343,10 @@ import {registerModule, unregisterModule} from "@/router/msgRouter";
 import {useWsStore} from "@/stores/websocket";
 import {globalNotify, globalNotifyRightSide} from "@/composables/notification";
 import {isDevMode} from "@/composables/buildMode";
+import {translate} from "@/locales";
 
 const formRef = ref<FormInstance>()
-let wifiListPlaceholder = ref("我的WIFI")
+let wifiListPlaceholder = ref("MY-WIFI")
 let ssidValidateForm = reactive({
   wifiSsid: "",
   password: "",
@@ -369,60 +359,63 @@ let wifiAp_On = ref(false);
 
 let wifiMode = ref(-1);
 
-let wifiModeOptions = [
+let wifiModeOptions = computed( () => [
   {
-    label: "智能热点+常开终端 (AP+STA)",
+    label: translate('wifi.APauto_STA'),
     key: WifiMode.WIFI_AP_AUTO_STA_ON,
   }, {
-    label: "仅开启热点 (AP)",
+    label: translate('wifi.APonly'),
     key: WifiMode.WIFI_AP_ON_STA_OFF,
   }, {
-    label: "常开热点+常开终端 (AP+STA)",
+    label: translate('wifi.AP_STA'),
     key: WifiMode.WIFI_AP_STA_ON,
-  }, /* {
+  }, /*
+   {
     value: "仅开启终端（STA）",
     key: 2,
   },*/
-
-]
+])
 
 let wsStore = useWsStore();
 
-const defWifiInfo: WifiInfo = {
-  cmd: 1,
-  module: 1,
-  gateway: "未连接",
-  ip: "未连接",
-  mac: "未连接",
-  dns_main: "未连接",
-  dns_backup: "未连接",
-  rssi: 0,
-  netmask: "未连接",
-  ssid: "未连接",
-  password: "",
-}
+const defWifiInfo: ComputedRef<WifiInfo> = computed(() => {
+  return {
+    cmd: 1,
+    module: 1,
+    gateway: translate('wifi.disconnected'),
+    ip: translate('wifi.disconnected'),
+    mac: translate('wifi.disconnected'),
+    dns_main: translate('wifi.disconnected'),
+    dns_backup: translate('wifi.disconnected'),
+    rssi: 0,
+    netmask: translate('wifi.disconnected'),
+    ssid: translate('wifi.disconnected'),
+    password: ""
+  };
+});
+
 const staIPModeOptions = [
   {
-    label: "自动 (DHCP)",
+    label: translate('wifi.autoIP'),
     key: 0,
   }, {
-    label: "静态IP",
+    label: translate('wifi.staticIP'),
     key: 1,
   },
 ]
 
 const staDNSModeOptions = [
   {
-    label: "自动 (使用网关)",
+    label: translate('wifi.autoDNS'),
     key: 0,
   }, {
-    label: "静态DNS",
+    label: translate('wifi.staticDNS'),
     key: 1,
   },
 ]
 
-let wifiStaApInfo = reactive<WifiInfo>({...defWifiInfo});
-let wifiApInfo = reactive<WifiInfo>({...defWifiInfo});
+let wifiStaApInfo: ComputedRef<WifiInfo> = computed(() => defWifiInfo.value);
+let wifiApInfo: ComputedRef<WifiInfo> = computed(() => defWifiInfo.value);
 let wifiStaticInfo = reactive<IWifiStaStaticInfo>({
   dns_backup: "0.0.0.0",
   dns_main: "0.0.0.0",
@@ -438,7 +431,7 @@ let scan_cb: any;
 let connectBtnClicked = 0;
 let options: Array<WifiScanInfo> = [];
 const scanText = computed(() => {
-  return scanning.value ? "扫描中" : "扫描";
+  return scanning.value ? translate("wifi.scanning") : translate("wifi.scan");
 });
 
 const querySearch = (queryString: string, cb: any) => {
@@ -462,7 +455,7 @@ const onClientMsg = (msg: ApiJsonMsg) => {
       }
       if (connectBtnClicked) {
         connectBtnClicked = 0;
-        globalNotifyRightSide(wifiStaApInfo.ssid + " 连接成功", "success");
+        globalNotifyRightSide(wifiStaApInfo.value.ssid + " " + translate('wifi.connectionSuccess'), "success");
         wifi_sta_get_static_info();
       }
       break;
@@ -486,7 +479,7 @@ const onClientMsg = (msg: ApiJsonMsg) => {
         scan_cb(options);
         scan_cb = null;
       }
-      globalNotifyRightSide("扫描完成", "success");
+      globalNotifyRightSide(translate('wifi.scanDone'), "success");
       break;
     }
     case WifiCmd.WIFI_API_JSON_DISCONNECT:
@@ -503,7 +496,7 @@ const onClientMsg = (msg: ApiJsonMsg) => {
       const modeInfo = msg as IWifiMode;
       wifiMode_loading.value = false;
       if (modeInfo.err !== undefined) {
-        globalNotifyRightSide("设置失败", "error");
+        globalNotifyRightSide(translate('wifi.setFailed'), "error");
         return;
       }
 
@@ -531,7 +524,7 @@ const onClientMsg = (msg: ApiJsonMsg) => {
       if (wifiCred.err !== undefined) {
         globalNotifyRightSide(wifiCred.err, "error");
       } else {
-        globalNotifyRightSide("已保存配置", "success");
+        globalNotifyRightSide(translate('wifi.setSuccess'), "success");
       }
       wifiMode_loading.value = false;
 
@@ -573,7 +566,7 @@ const onClientCtrl = (msg: ControlMsg) => {
 
 function onScanClick() {
   if (wsStore.state !== ControlEvent.CONNECTED) {
-    globalNotify("调试器未连接", 'error');
+    globalNotify(translate('wifi.debuggerNotConnected'), 'error');
     return;
   }
   scanning.value = true;
@@ -582,7 +575,7 @@ function onScanClick() {
 
 function onConnectClick() {
   if (wsStore.state !== ControlEvent.CONNECTED) {
-    globalNotify("调试器未连接", 'error');
+    globalNotify(translate('wifi.debuggerNotConnected'), 'error');
     return;
   }
   if (ssidValidateForm.wifiSsid !== "") {
@@ -609,12 +602,12 @@ function wifiChangeMode() {
 }
 
 function wifiApChangeCredential() {
-  if (wifiApInfo.ssid === "") {
-    globalNotifyRightSide("请输入AP名称", "error");
+  if (wifiApInfo.value.ssid === "") {
+    globalNotifyRightSide(translate('wifi.enterAPName'), "error");
     return;
   }
   wifiMode_loading.value = true;
-  wifi_ap_set_credential(wifiApInfo.ssid, wifiApInfo.password);
+  wifi_ap_set_credential(wifiApInfo.value.ssid, wifiApInfo.value.password);
 }
 
 function wifiStaSetStaticInfo() {
@@ -642,7 +635,7 @@ onUnmounted(() => {
 </script>
 
 
-<style scoped>
+<style scoped lang="postcss">
 .description-style :deep(.el-descriptions__label) {
   @apply w-32
 }