feat: i18n

README.md

@@ -1,88 +1,90 @@
 # Mesh Drop
 
-简易、快速的局域网文件传输工具，基于 Wails 和 Vue 构建。
+English | [中文](./README.zh.md)
 
-## 功能特性
+Simple, fast LAN file transfer tool, built with Wails and Vue.
 
-- **文件传输**：支持多文件发送，轻松共享。
+## Features
-- **文件夹传输**：支持发送整个文件夹结构。
-- **文本传输**：快速同步设备间的文本内容。
-- **加密传输**：确保数据在传输过程中的安全性。
-- **安全身份**：基于 Ed25519 的签名验证，防止伪造。
 
-## 安全机制
+- **File Transfer**: Support multi-file sending, easily share.
+- **Folder Transfer**: Support sending entire folder structures.
+- **Text Transfer**: Quickly sync text content between devices.
+- **Encrypted Transmission**: Ensure data security during transmission.
+- **Secure Identity**: Ed25519-based signature verification to prevent spoofing.
 
-Mesh Drop 采用多层安全设计来保护用户免受潜在的恶意攻击：
+## Security Mechanisms
 
-1.  **身份验证 (Identity)**
+Mesh Drop uses a multi-layered security design to protect users from potential malicious attacks:
-    - 每个设备在首次启动时生成一对唯一的 Ed25519 密钥。
-    - 所有广播包（Presence Broadcast）都使用私钥签名。
-    - 接收端通过公钥验证签名，确保身份未被篡改。
 
-2.  **信任机制 (Trust)**
+1.  **Identity**
-    - 采用 TOFU (Trust On First Use) 策略。
+    - Each device generates a unique pair of Ed25519 keys on first startup.
-    - 用户可以选择“信任”某个 Peer，一旦信任，该 Peer 的公钥将被固定（Pinning）。
+    - All presence broadcasts are signed with the private key.
-    - 之后收到该 Peer ID 的所有数据包，必须通过已保存公钥的验证，否则会被标记为 **Mismatch**。
+    - The receiver verifies the signature with the public key to ensure the identity has not been tampered with.
-    - **防欺骗**：如果有人试图伪造已信任 Peer 的 ID，UI 会显示明显的“Mismatch”安全警告，并阻止元数据被覆盖。
 
-3.  **传输加密 (Encryption)**
+2.  **Trust**
-    - 文件传输服务使用 HTTPS 协议。
+    - Uses TOFU (Trust On First Use) strategy.
-    - 自动生成自签名证书进行通信加密，防止传输内容被窃听。
+    - Users can choose to "Trust" a Peer. Once trusted, that Peer's public key is pinned.
+    - Subsequent packets from that Peer ID must be verified by the saved public key, otherwise they will be marked as **Mismatch**.
+    - **Anti-spoofing**: If someone tries to spoof a trusted Peer ID, the UI will display a clear "Mismatch" security warning and prevent metadata from being overwritten.
 
-## 截图
+3.  **Encryption**
+    - File transfer service uses HTTPS protocol.
+    - Automatically generates self-signed certificates for communication encryption to prevent eavesdropping.
+
+## Screenshots
 
 | ![Mesh Drop](./screenshot/1.png) | ![Mesh Drop](./screenshot/2.png) |
 | -------------------------------- | -------------------------------- |
 
-## 待办事项
+## Todo
 
-- [x] 剪辑板传输
+- [x] Clipboard transfer
-- [x] 文件夹传输
+- [x] Folder transfer
-- [x] 取消传输
+- [x] Cancel transfer
-- [x] 多文件发送
+- [x] Multi-file sending
-- [x] 加密传输
+- [x] Encrypted transmission
-- [x] 设置页面
+- [x] Settings page
-- [x] 单例模式
+- [x] Single instance mode
-- [x] 系统通知
+- [x] System notifications
-- [x] 清理历史
+- [x] Clear history
-- [x] 自动接收
+- [x] Auto accept
-- [x] 应用图标
+- [x] App icon
-- [x] 信任Peer
+- [x] Trust Peer
-- [ ] 系统托盘（最小化到托盘）徽章 https://github.com/wailsapp/wails/issues/4494
+- [x] Multi-language support
-- [ ] 多语言
+- [ ] System tray (minimize to tray) badges https://github.com/wailsapp/wails/issues/4494
 
-## 技术栈
+## Tech Stack
 
-本项目使用现代化的技术栈构建：
+This project is built using a modern tech stack:
 
-- **后端**: [Go](https://go.dev/) + [Wails v3](https://v3.wails.io/)
+- **Backend**: [Go](https://go.dev/) + [Wails v3](https://v3.wails.io/)
-- **前端**: [Vue 3](https://vuejs.org/) + [TypeScript](https://www.typescriptlang.org/)
+- **Frontend**: [Vue 3](https://vuejs.org/) + [TypeScript](https://www.typescriptlang.org/)
-- **UI 框架**: [Vuetify](https://vuetifyjs.com/)
+- **UI Framework**: [Vuetify](https://vuetifyjs.com/)
 
-## 开发
+## Development
 
-### 前置条件
+### Prerequisites
 
-在开始之前，请确保您的开发环境已安装以下工具：
+Before starting, ensure your development environment has the following tools installed:
 
-1.  **Go** (版本 >= 1.25)
+1.  **Go** (version >= 1.25)
 2.  **Node.js**
 3.  **Wails CLI**
 4.  **UPX**
 
-### 安装依赖
+### Install Dependencies
 
 ```bash
-# 进入项目目录
+# Enter project directory
 cd mesh-drop
 
-# 安装前端依赖 (通常 Wails 会自动处理，但手动安装可确保环境清晰)
+# Install frontend dependencies (Wails usually handles this automatically, but manual installation ensures a clean environment)
 cd frontend
 npm install
 cd ..
 ```
 
-### 运行开发环境
+### Run Development Environment
 
 ```bash
 wails3 dev

README.zh.md

@@ -0,0 +1,91 @@
+# Mesh Drop
+
+[English](./README.md) | 中文
+
+简易、快速的局域网文件传输工具，基于 Wails 和 Vue 构建。
+
+## 功能特性
+
+- **文件传输**：支持多文件发送，轻松共享。
+- **文件夹传输**：支持发送整个文件夹结构。
+- **文本传输**：快速同步设备间的文本内容。
+- **加密传输**：确保数据在传输过程中的安全性。
+- **安全身份**：基于 Ed25519 的签名验证，防止伪造。
+
+## 安全机制
+
+Mesh Drop 采用多层安全设计来保护用户免受潜在的恶意攻击：
+
+1.  **身份验证 (Identity)**
+    - 每个设备在首次启动时生成一对唯一的 Ed25519 密钥。
+    - 所有广播包（Presence Broadcast）都使用私钥签名。
+    - 接收端通过公钥验证签名，确保身份未被篡改。
+
+2.  **信任机制 (Trust)**
+    - 采用 TOFU (Trust On First Use) 策略。
+    - 用户可以选择“信任”某个 Peer，一旦信任，该 Peer 的公钥将被固定（Pinning）。
+    - 之后收到该 Peer ID 的所有数据包，必须通过已保存公钥的验证，否则会被标记为 **Mismatch**。
+    - **防欺骗**：如果有人试图伪造已信任 Peer 的 ID，UI 会显示明显的“Mismatch”安全警告，并阻止元数据被覆盖。
+
+3.  **传输加密 (Encryption)**
+    - 文件传输服务使用 HTTPS 协议。
+    - 自动生成自签名证书进行通信加密，防止传输内容被窃听。
+
+## 截图
+
+| ![Mesh Drop](./screenshot/1.png) | ![Mesh Drop](./screenshot/2.png) |
+| -------------------------------- | -------------------------------- |
+
+## 待办事项
+
+- [x] 剪辑板传输
+- [x] 文件夹传输
+- [x] 取消传输
+- [x] 多文件发送
+- [x] 加密传输
+- [x] 设置页面
+- [x] 单例模式
+- [x] 系统通知
+- [x] 清理历史
+- [x] 自动接收
+- [x] 应用图标
+- [x] 信任Peer
+- [x] 多语言
+- [ ] 系统托盘（最小化到托盘）徽章 https://github.com/wailsapp/wails/issues/4494
+
+## 技术栈
+
+本项目使用现代化的技术栈构建：
+
+- **后端**: [Go](https://go.dev/) + [Wails v3](https://v3.wails.io/)
+- **前端**: [Vue 3](https://vuejs.org/) + [TypeScript](https://www.typescriptlang.org/)
+- **UI 框架**: [Vuetify](https://vuetifyjs.com/)
+
+## 开发
+
+### 前置条件
+
+在开始之前，请确保您的开发环境已安装以下工具：
+
+1.  **Go** (版本 >= 1.25)
+2.  **Node.js**
+3.  **Wails CLI**
+4.  **UPX**
+
+### 安装依赖
+
+```bash
+# 进入项目目录
+cd mesh-drop
+
+# 安装前端依赖 (通常 Wails 会自动处理，但手动安装可确保环境清晰)
+cd frontend
+npm install
+cd ..
+```
+
+### 运行开发环境
+
+```bash
+wails3 dev
+```

frontend/bindings/mesh-drop/internal/config/config.ts

@@ -25,6 +25,14 @@ export function GetID(): $CancellablePromise<string> {
     return $Call.ByID(4240411568);
 }
 
+export function GetLanguage(): $CancellablePromise<$models.Language> {
+    return $Call.ByID(480133131);
+}
+
+export function GetLanguageByString(str: string): $CancellablePromise<$models.Language> {
+    return $Call.ByID(905794983, str);
+}
+
 export function GetSaveHistory(): $CancellablePromise<boolean> {
     return $Call.ByID(2178923392);
 }
@@ -72,6 +80,10 @@ export function SetHostName(hostName: string): $CancellablePromise<void> {
     return $Call.ByID(1580131496, hostName);
 }
 
+export function SetLanguage(language: $models.Language): $CancellablePromise<void> {
+    return $Call.ByID(933959199, language);
+}
+
 export function SetSaveHistory(saveHistory: boolean): $CancellablePromise<void> {
     return $Call.ByID(3779587628, saveHistory);
 }

frontend/bindings/mesh-drop/internal/config/index.ts

@@ -7,5 +7,6 @@ export {
 };
 
 export {
+    Language,
     WindowState
 } from "./models.js";

frontend/bindings/mesh-drop/internal/config/models.ts

@@ -5,6 +5,16 @@
 // @ts-ignore: Unused imports
 import { Create as $Create } from "@wailsio/runtime";
 
+export enum Language {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    LanguageEnglish = "en",
+    LanguageChinese = "zh-Hans",
+};
+
 /**
  * WindowState 定义窗口状态
  */

frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@mdi/font": "7.4.47",
         "@wailsio/runtime": "^3.0.0-alpha.79",
         "vue": "^3.5.21",
+        "vue-i18n": "^11.2.8",
         "vuetify": "^3.10.1"
       },
       "devDependencies": {
@@ -509,6 +510,50 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.2.8.tgz",
+      "integrity": "sha512-nBq6Y1tVkjIUsLsdOjDSJj4AsjvD0UG3zsg9Fyc+OivwlA/oMHSKooUy9tpKj0HqZ+NWFifweHavdljlBLTwdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.2.8",
+        "@intlify/shared": "11.2.8"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.2.8.tgz",
+      "integrity": "sha512-A5n33doOjmHsBtCN421386cG1tWp5rpOjOYPNsnpjIJbQ4POF0QY2ezhZR9kr0boKwaHjbOifvyQvHj2UTrDFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.2.8",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.2.8.tgz",
+      "integrity": "sha512-l6e4NZyUgv8VyXXH4DbuucFOBmxLF56C/mqh2tvApbzl2Hrhi1aTDcuv5TKdxzfHYmpO3UB0Cz04fgDT9vszfw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1350,6 +1395,12 @@
         "@vue/shared": "3.5.27"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/language-core": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.2.4.tgz",
@@ -3165,6 +3216,26 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.2.8.tgz",
+      "integrity": "sha512-vJ123v/PXCZntd6Qj5Jumy7UBmIuE92VrtdX+AXr+1WzdBHojiBxnAxdfctUFL+/JIN+VQH4BhsfTtiGsvVObg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.2.8",
+        "@intlify/shared": "11.2.8",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.2.4.tgz",

frontend/package.json

@@ -16,6 +16,7 @@
     "@mdi/font": "7.4.47",
     "@wailsio/runtime": "^3.0.0-alpha.79",
     "vue": "^3.5.21",
+    "vue-i18n": "^11.2.8",
     "vuetify": "^3.10.1"
   },
   "devDependencies": {

frontend/src/components/MainLayout.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 // --- Vue 核心 ---
 import { onMounted, ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 
 // --- 组件 ---
 import PeerCard from "./PeerCard.vue";
@@ -25,6 +26,7 @@ const transferList = ref<Transfer[]>([]);
 const activeKey = ref("discover");
 const drawer = ref(true);
 const isMobile = ref(false);
+const { t } = useI18n();
 
 // --- 计算属性 ---
 const pendingCount = computed(() => {
@@ -35,18 +37,18 @@ const pendingCount = computed(() => {
 
 const menuItems = computed(() => [
   {
-    title: "Discover",
+    title: t("menu.discover"),
     value: "discover",
     icon: "mdi-radar",
   },
   {
-    title: "Transfers",
+    title: t("menu.transfers"),
     value: "transfers",
     icon: "mdi-inbox",
     badge: pendingCount.value > 0 ? pendingCount.value : null,
   },
   {
-    title: "Settings",
+    title: t("menu.settings"),
     value: "settings",
     icon: "mdi-cog",
   },
@@ -168,7 +170,7 @@ const handleCleanFinished = async () => {
               class="mb-4 radar-icon"
               style="opacity: 0.5"
             ></v-icon>
-            <div class="text-grey">Scanning for peers...</div>
+            <div class="text-grey">{{ t("discover.scanning") }}</div>
           </div>
         </div>
 
@@ -182,7 +184,7 @@ const handleCleanFinished = async () => {
                 color="error"
                 @click="handleCleanFinished"
               >
-                Clear Finished
+                {{ t("transfers.clearFinished") }}
               </v-btn>
             </div>
             <TransferItem
@@ -196,7 +198,7 @@ const handleCleanFinished = async () => {
             class="empty-state d-flex flex-column justify-center align-center"
           >
             <v-icon icon="mdi-inbox" size="100" class="mb-4 text-grey"></v-icon>
-            <div class="text-grey">No transfers yet</div>
+            <div class="text-grey">{{ t("transfers.noTransfers") }}</div>
           </div>
         </div>
 

frontend/src/components/PeerCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 // --- Vue 核心 ---
 import { computed, ref, watch, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 
 // --- 组件 ---
 import FileSendModal from "./modals/FileSendModal.vue";
@@ -33,6 +34,8 @@ const props = defineProps<{
   peer: Peer;
 }>();
 
+const { t } = useI18n();
+
 const emit = defineEmits<{
   (e: "transferStarted"): void;
 }>();
@@ -43,28 +46,28 @@ const showFileModal = ref(false);
 const showTextModal = ref(false);
 const isTrusted = ref(false);
 
-const sendOptions = [
+const sendOptions = computed(() => [
   {
-    title: "Send Files",
+    title: t("discover.sendFiles"),
     value: "files",
     icon: "mdi-file",
   },
   {
-    title: "Send Folder",
+    title: t("discover.sendFolder"),
     value: "folder",
     icon: "mdi-folder",
   },
   {
-    title: "Send Text",
+    title: t("discover.sendText"),
     value: "text",
     icon: "mdi-format-font",
   },
   {
-    title: "Send Clipboard",
+    title: t("discover.sendClipboard"),
     value: "clipboard",
     icon: "mdi-clipboard",
   },
-];
+]);
 
 // --- 计算属性 ---
 const ips = computed(() => {
@@ -123,7 +126,7 @@ const handleAction = (key: string) => {
 const handleSendFolder = async () => {
   if (!selectedIp.value) return;
   const opts: Dialogs.OpenFileDialogOptions = {
-    Title: "Select folder to send",
+    Title: t("discover.selectFolder"),
     CanChooseDirectories: true,
     CanChooseFiles: false,
     AllowsMultipleSelection: false,
@@ -142,7 +145,7 @@ const handleSendClipboard = async () => {
   if (!selectedIp.value) return;
   const text = await Clipboard.Text();
   if (!text) {
-    alert("Clipboard is empty");
+    alert(t("discover.clipboardEmpty"));
     return;
   }
   SendText(props.peer, selectedIp.value, text).catch((e) => {
@@ -208,7 +211,9 @@ const handleUntrust = () => {
         </v-menu>
 
         <!-- No Route -->
-        <v-chip v-else color="warning" size="small" label> No Route </v-chip>
+        <v-chip v-else color="warning" size="small" label>
+          {{ t("discover.noRoute") }}
+        </v-chip>
       </div>
     </template>
 
@@ -223,7 +228,7 @@ const handleUntrust = () => {
         :ripple="false"
         style="pointer-events: none"
       >
-        Mismatch
+        {{ t("discover.mismatch") }}
       </v-btn>
 
       <v-menu v-else>
@@ -239,7 +244,7 @@ const handleUntrust = () => {
             <template #prepend>
               <v-icon icon="mdi-send"></v-icon>
             </template>
-            Send
+            {{ t("discover.send") }}
           </v-btn>
         </template>
         <v-list>
@@ -265,7 +270,9 @@ const handleUntrust = () => {
         @click="handleUntrust"
       >
         <v-icon icon="mdi-delete"></v-icon>
-        <v-tooltip activator="parent" location="bottom">Reset Trust</v-tooltip>
+        <v-tooltip activator="parent" location="bottom">{{
+          t("discover.resetTrust")
+        }}</v-tooltip>
       </v-btn>
 
       <v-btn
@@ -275,11 +282,15 @@ const handleUntrust = () => {
         @click="handleTrust"
       >
         <v-icon icon="mdi-star-outline"></v-icon>
-        <v-tooltip activator="parent" location="bottom">Trust peer</v-tooltip>
+        <v-tooltip activator="parent" location="bottom">{{
+          t("discover.trustPeer")
+        }}</v-tooltip>
       </v-btn>
       <v-btn v-else variant="tonal" color="primary" @click="handleUntrust">
         <v-icon icon="mdi-star"></v-icon>
-        <v-tooltip activator="parent" location="bottom">Untrust peer</v-tooltip>
+        <v-tooltip activator="parent" location="bottom">{{
+          t("discover.untrustPeer")
+        }}</v-tooltip>
       </v-btn>
     </v-card-actions>
   </v-card>

frontend/src/components/SettingsView.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 // --- Vue 核心 ---
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
 // --- Wails & 后端绑定 ---
 import { Dialogs } from "@wailsio/runtime";
@@ -14,7 +15,11 @@ import {
   GetSaveHistory,
   SetSaveHistory,
   GetVersion,
+  GetLanguage,
+  SetLanguage,
+  GetLanguageByString,
 } from "../../bindings/mesh-drop/internal/config/config";
+import { Language } from "bindings/mesh-drop/internal/config";
 
 // --- 状态 ---
 const savePath = ref("");
@@ -23,6 +28,13 @@ const autoAccept = ref(false);
 const saveHistory = ref(false);
 const version = ref("");
 
+const { t, locale } = useI18n();
+
+const languages = [
+  { title: "English", value: "en" },
+  { title: "简体中文", value: "zh-Hans" },
+];
+
 // ---生命周期 ---
 onMounted(async () => {
   savePath.value = await GetSavePath();
@@ -30,6 +42,10 @@ onMounted(async () => {
   autoAccept.value = await GetAutoAccept();
   saveHistory.value = await GetSaveHistory();
   version.value = await GetVersion();
+  let l = await GetLanguage();
+  if (l != "") {
+    locale.value = l;
+  }
 });
 
 // --- 方法 ---
@@ -46,11 +62,16 @@ const changeSavePath = async () => {
     savePath.value = path;
   }
 };
+
+// 监听语言变化
+watch(locale, async (newVal) => {
+  await SetLanguage(newVal as Language);
+});
 </script>
 
 <template>
   <v-list lines="one" bg-color="transparent">
-    <v-list-item title="Save Path" :subtitle="savePath">
+    <v-list-item :title="t('settings.savePath')" :subtitle="savePath">
       <template #prepend>
         <v-icon icon="mdi-folder-download"></v-icon>
       </template>
@@ -61,11 +82,11 @@ const changeSavePath = async () => {
           @click="changeSavePath"
           prepend-icon="mdi-pencil"
         >
-          Change
+          {{ t("settings.change") }}
         </v-btn>
       </template>
     </v-list-item>
-    <v-list-item title="HostName">
+    <v-list-item :title="t('settings.hostName')">
       <template #prepend>
         <v-icon icon="mdi-laptop"></v-icon>
       </template>
@@ -79,7 +100,7 @@ const changeSavePath = async () => {
         ></v-text-field>
       </template>
     </v-list-item>
-    <v-list-item title="Save History">
+    <v-list-item :title="t('settings.saveHistory')">
       <template #prepend>
         <v-icon icon="mdi-history"></v-icon>
       </template>
@@ -93,7 +114,7 @@ const changeSavePath = async () => {
         ></v-switch>
       </template>
     </v-list-item>
-    <v-list-item title="Auto Accept">
+    <v-list-item :title="t('settings.autoAccept')">
       <template #prepend>
         <v-icon icon="mdi-content-save"></v-icon>
       </template>
@@ -107,7 +128,7 @@ const changeSavePath = async () => {
         ></v-switch>
       </template>
     </v-list-item>
-    <v-list-item title="Version">
+    <v-list-item :title="t('settings.version')">
       <template #prepend>
         <v-icon icon="mdi-information"></v-icon>
       </template>
@@ -115,5 +136,21 @@ const changeSavePath = async () => {
         <div class="text-grey">{{ version }}</div>
       </template>
     </v-list-item>
+
+    <v-list-item :title="t('settings.language')">
+      <template #prepend>
+        <v-icon icon="mdi-translate"></v-icon>
+      </template>
+      <template #append>
+        <v-select
+          v-model="locale"
+          :items="languages"
+          variant="underlined"
+          density="compact"
+          hide-details
+          width="150"
+        ></v-select>
+      </template>
+    </v-list-item>
   </v-list>
 </template>

frontend/src/components/TransferItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 // --- Vue 核心 ---
 import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 
 // --- Wails & 后端绑定 ---
 import { Dialogs, Clipboard } from "@wailsio/runtime";
@@ -16,6 +17,8 @@ const props = defineProps<{
   transfer: Transfer;
 }>();
 
+const { t } = useI18n();
+
 // --- 状态 ---
 const showContentDialog = ref(false);
 
@@ -106,7 +109,7 @@ const rejectTransfer = () => {
 
 const acceptToFolder = async () => {
   const opts: Dialogs.OpenFileDialogOptions = {
-    Title: "Select Folder to save the file",
+    Title: t("transfers.selectSavePath"),
     CanChooseDirectories: true,
     CanChooseFiles: false,
     AllowsMultipleSelection: false,
@@ -178,7 +181,9 @@ const handleCopy = async () => {
               ></v-icon>
               {{
                 props.transfer.file_name ||
-                (props.transfer.content_type === "text" ? "Text" : "Folder")
+                (props.transfer.content_type === "text"
+                  ? t("transfers.text")
+                  : t("transfers.folder"))
               }}
             </div>
 
@@ -202,7 +207,7 @@ const handleCopy = async () => {
                 activator="parent"
                 location="bottom"
               >
-                Security Alert: Key Mismatch
+                {{ t("transfers.securityAlert") }}
               </v-tooltip>
             </v-chip>
 
@@ -226,25 +231,25 @@ const handleCopy = async () => {
               v-if="props.transfer.status === 'completed'"
               class="text-success"
             >
-              &nbsp;- Completed
+              &nbsp;- {{ t("transfers.completed") }}
             </span>
             <span v-if="props.transfer.status === 'error'" class="text-error">
-              &nbsp;- {{ props.transfer.error_msg || "Error" }}
+              &nbsp;- {{ props.transfer.error_msg || t("common.error") }}
             </span>
             <span v-if="props.transfer.status === 'canceled'" class="text-info">
-              &nbsp;- Canceled
+              &nbsp;- {{ t("transfers.cancelled") }}
             </span>
             <span
               v-if="props.transfer.status === 'rejected'"
               class="text-error"
             >
-              &nbsp;- Rejected
+              &nbsp;- {{ t("transfers.rejected") }}
             </span>
             <span
               v-if="props.transfer.status === 'pending'"
               class="text-warning"
             >
-              &nbsp;- Waiting for accept
+              &nbsp;- {{ t("transfers.waitingForAccept") }}
             </span>
           </div>
 
@@ -264,7 +269,9 @@ const handleCopy = async () => {
           <v-btn-group density="compact" variant="tonal" divided rounded="xl">
             <v-btn v-if="canAccept" color="success" @click="acceptTransfer">
               <v-icon icon="mdi-content-save"></v-icon>
-              <v-tooltip activator="parent" location="bottom">Accept</v-tooltip>
+              <v-tooltip activator="parent" location="bottom">{{
+                t("common.accept")
+              }}</v-tooltip>
             </v-btn>
 
             <v-btn
@@ -274,13 +281,15 @@ const handleCopy = async () => {
             >
               <v-icon icon="mdi-folder-arrow-right"></v-icon>
               <v-tooltip activator="parent" location="bottom">
-                Save to Folder
+                {{ t("transfers.saveToFolder") }}
               </v-tooltip>
             </v-btn>
 
             <v-btn v-if="canAccept" color="error" @click="rejectTransfer">
               <v-icon icon="mdi-close"></v-icon>
-              <v-tooltip activator="parent" location="bottom">Reject</v-tooltip>
+              <v-tooltip activator="parent" location="bottom">{{
+                t("common.reject")
+              }}</v-tooltip>
             </v-btn>
 
             <v-btn
@@ -290,13 +299,15 @@ const handleCopy = async () => {
             >
               <v-icon icon="mdi-eye"></v-icon>
               <v-tooltip activator="parent" location="bottom">
-                View Content
+                {{ t("transfers.viewContent") }}
               </v-tooltip>
             </v-btn>
 
             <v-btn v-if="canCopy" color="success" @click="handleCopy">
               <v-icon icon="mdi-content-copy"></v-icon>
-              <v-tooltip activator="parent" location="bottom">Copy</v-tooltip>
+              <v-tooltip activator="parent" location="bottom">{{
+                t("common.copy")
+              }}</v-tooltip>
             </v-btn>
 
             <v-btn
@@ -310,7 +321,9 @@ const handleCopy = async () => {
               @click="handleDelete"
             >
               <v-icon icon="mdi-delete"></v-icon>
-              <v-tooltip activator="parent" location="bottom">Delete</v-tooltip>
+              <v-tooltip activator="parent" location="bottom">{{
+                t("common.delete")
+              }}</v-tooltip>
             </v-btn>
 
             <v-btn
@@ -319,7 +332,9 @@ const handleCopy = async () => {
               @click="CancelTransfer(props.transfer.id)"
             >
               <v-icon icon="mdi-stop"></v-icon>
-              <v-tooltip activator="parent" location="bottom">Cancel</v-tooltip>
+              <v-tooltip activator="parent" location="bottom">{{
+                t("common.cancel")
+              }}</v-tooltip>
             </v-btn>
           </v-btn-group>
         </div>
@@ -328,7 +343,7 @@ const handleCopy = async () => {
   </v-card>
 
   <v-dialog v-model="showContentDialog" width="600">
-    <v-card title="Text Content">
+    <v-card :title="t('transfers.textContent')">
       <v-card-text>
         <v-textarea
           :model-value="props.transfer.text"

frontend/src/locales/en.json

@@ -0,0 +1,40 @@
+{
+    "common": {
+        "confirm": "Confirm",
+        "cancel": "Cancel",
+        "save": "Save",
+        "delete": "Delete",
+        "edit": "Edit",
+        "loading": "Loading...",
+        "success": "Success",
+        "error": "Error"
+    },
+    "menu": {
+        "discover": "Discover",
+        "transfers": "Transfers",
+        "settings": "Settings"
+    },
+    "discover": {
+        "scanning": "Scanning for peers...",
+        "noPeers": "No peers found",
+        "send": "Send"
+    },
+    "transfers": {
+        "noTransfers": "No transfers yet",
+        "clearFinished": "Clear Finished",
+        "pending": "Pending",
+        "transferring": "Transferring",
+        "completed": "Completed",
+        "failed": "Failed",
+        "cancelled": "Cancelled"
+    },
+    "settings": {
+        "savePath": "Save Path",
+        "change": "Change",
+        "hostName": "Host Name",
+        "saveHistory": "Save History",
+        "autoAccept": "Auto Accept",
+        "version": "Version",
+        "language": "Language"
+    }
+}

frontend/src/locales/zh-Hans.json

@@ -0,0 +1,40 @@
+{
+    "common": {
+        "confirm": "确定",
+        "cancel": "取消",
+        "save": "保存",
+        "delete": "删除",
+        "edit": "编辑",
+        "loading": "加载中...",
+        "success": "成功",
+        "error": "错误"
+    },
+    "menu": {
+        "discover": "发现",
+        "transfers": "传输",
+        "settings": "设置"
+    },
+    "discover": {
+        "scanning": "正在扫描设备...",
+        "noPeers": "未发现设备",
+        "send": "发送"
+    },
+    "transfers": {
+        "noTransfers": "暂无传输记录",
+        "clearFinished": "清除已完成",
+        "pending": "等待中",
+        "transferring": "传输中",
+        "completed": "已完成",
+        "failed": "失败",
+        "cancelled": "已取消"
+    },
+    "settings": {
+        "savePath": "保存路径",
+        "change": "更改",
+        "hostName": "设备名称",
+        "saveHistory": "保存历史记录",
+        "autoAccept": "自动接收",
+        "version": "版本",
+        "language": "语言"
+    }
+}

frontend/src/plugins/i18n.ts

@@ -0,0 +1,15 @@
+import { createI18n } from "vue-i18n";
+import en from "../locales/en.json";
+import zhHans from "../locales/zh-Hans.json";
+
+const i18n = createI18n({
+  legacy: false, // use Composition API
+  locale: navigator.language.startsWith("zh") ? "zh-Hans" : "en",
+  fallbackLocale: "en",
+  messages: {
+    en,
+    "zh-Hans": zhHans,
+  },
+});
+
+export default i18n;

frontend/src/plugins/index.ts

@@ -5,11 +5,13 @@
  */
 
 // Plugins
-import vuetify from './vuetify'
+import vuetify from "./vuetify";
+import i18n from "./i18n";
 
 // Types
-import type { App } from 'vue'
+import type { App } from "vue";
 
 export function registerPlugins(app: App) {
-  app.use(vuetify)
+  app.use(vuetify);
+  app.use(i18n);
 }

frontend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/main.ts","./src/vite-env.d.ts","./src/plugins/index.ts","./src/plugins/vuetify.ts","./src/App.vue","./src/components/MainLayout.vue","./src/components/PeerCard.vue","./src/components/SettingsView.vue","./src/components/TransferItem.vue","./src/components/modals/FileSendModal.vue","./src/components/modals/TextSendModal.vue","./bindings/github.com/wailsapp/wails/v3/internal/eventcreate.ts","./bindings/github.com/wailsapp/wails/v3/internal/eventdata.d.ts","./bindings/github.com/wailsapp/wails/v3/pkg/services/notifications/index.ts","./bindings/github.com/wailsapp/wails/v3/pkg/services/notifications/models.ts","./bindings/github.com/wailsapp/wails/v3/pkg/services/notifications/notificationservice.ts","./bindings/mesh-drop/index.ts","./bindings/mesh-drop/models.ts","./bindings/mesh-drop/internal/config/config.ts","./bindings/mesh-drop/internal/config/index.ts","./bindings/mesh-drop/internal/config/models.ts","./bindings/mesh-drop/internal/discovery/index.ts","./bindings/mesh-drop/internal/discovery/models.ts","./bindings/mesh-drop/internal/discovery/service.ts","./bindings/mesh-drop/internal/transfer/index.ts","./bindings/mesh-drop/internal/transfer/models.ts","./bindings/mesh-drop/internal/transfer/service.ts","./bindings/time/index.ts","./bindings/time/models.ts"],"version":"5.9.3"}
+{"root":["./src/main.ts","./src/vite-env.d.ts","./src/plugins/i18n.ts","./src/plugins/index.ts","./src/plugins/vuetify.ts","./src/App.vue","./src/components/MainLayout.vue","./src/components/PeerCard.vue","./src/components/SettingsView.vue","./src/components/TransferItem.vue","./src/components/modals/FileSendModal.vue","./src/components/modals/TextSendModal.vue","./bindings/github.com/wailsapp/wails/v3/internal/eventcreate.ts","./bindings/github.com/wailsapp/wails/v3/internal/eventdata.d.ts","./bindings/github.com/wailsapp/wails/v3/pkg/services/notifications/index.ts","./bindings/github.com/wailsapp/wails/v3/pkg/services/notifications/models.ts","./bindings/github.com/wailsapp/wails/v3/pkg/services/notifications/notificationservice.ts","./bindings/mesh-drop/index.ts","./bindings/mesh-drop/models.ts","./bindings/mesh-drop/internal/config/config.ts","./bindings/mesh-drop/internal/config/index.ts","./bindings/mesh-drop/internal/config/models.ts","./bindings/mesh-drop/internal/discovery/index.ts","./bindings/mesh-drop/internal/discovery/models.ts","./bindings/mesh-drop/internal/discovery/service.ts","./bindings/mesh-drop/internal/transfer/index.ts","./bindings/mesh-drop/internal/transfer/models.ts","./bindings/mesh-drop/internal/transfer/service.ts","./bindings/time/index.ts","./bindings/time/models.ts"],"version":"5.9.3"}

internal/config/config.go

@@ -22,6 +22,13 @@ type WindowState struct {
 
 var Version = "next"
 
+type Language string
+
+const (
+	LanguageEnglish Language = "en"
+	LanguageChinese Language = "zh-Hans"
+)
+
 type Config struct {
 	v  *viper.Viper
 	mu sync.RWMutex
@@ -35,6 +42,8 @@ type Config struct {
 	AutoAccept  bool              `mapstructure:"auto_accept"`
 	SaveHistory bool              `mapstructure:"save_history"`
 	TrustedPeer map[string]string `mapstructure:"trusted_peer"` // ID -> PublicKey
+
+	Language Language `mapstructure:"language"`
 }
 
 // 默认窗口配置
@@ -276,3 +285,28 @@ func (c *Config) IsTrustedPeer(peerID string) bool {
 	_, exists := c.TrustedPeer[peerID]
 	return exists
 }
+
+func (c *Config) SetLanguage(language Language) {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+	c.Language = language
+	c.v.Set("language", language)
+	_ = c.save()
+}
+
+func (c *Config) GetLanguage() Language {
+	c.mu.RLock()
+	defer c.mu.RUnlock()
+	return c.Language
+}
+
+func (c *Config) GetLanguageByString(str string) Language {
+	switch str {
+	case string(LanguageEnglish):
+		return LanguageEnglish
+	case string(LanguageChinese):
+		return LanguageChinese
+	default:
+		return LanguageEnglish
+	}
+}