feat: i18n

2026-02-07 04:18:36 +08:00
parent d1dd75f7ab
commit 4b5d2b656b
17 changed files with 482 additions and 98 deletions
--- a/frontend/bindings/mesh-drop/internal/config/config.ts
+++ b/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);
 }
--- a/frontend/bindings/mesh-drop/internal/config/index.ts
+++ b/frontend/bindings/mesh-drop/internal/config/index.ts
@@ -7,5 +7,6 @@ export {
 };

 export {
+    Language,
    WindowState
 } from "./models.js";
--- a/frontend/bindings/mesh-drop/internal/config/models.ts
+++ b/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 定义窗口状态
 */
--- a/frontend/package-lock.json
+++ b/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",
--- a/frontend/package.json
+++ b/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": {
--- a/frontend/src/components/MainLayout.vue
+++ b/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>

--- a/frontend/src/components/PeerCard.vue
+++ b/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>
--- a/frontend/src/components/SettingsView.vue
+++ b/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>
--- a/frontend/src/components/TransferItem.vue
+++ b/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"
--- a/frontend/src/locales/en.json
+++ b/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"
+    }
+}
--- a/frontend/src/locales/zh-Hans.json
+++ b/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": "语言"
+    }
+}
--- a/frontend/src/plugins/i18n.ts
+++ b/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;
--- a/frontend/src/plugins/index.ts
+++ b/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)
+export function registerPlugins(app: App) {
+  app.use(vuetify);
+  app.use(i18n);
 }
--- a/frontend/tsconfig.tsbuildinfo
+++ b/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"}