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/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"