From d816110b4b467300737588670552e1d1fbe35c45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <h_mini2024@oo1.dev>
Date: Thu, 23 Oct 2025 23:56:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E6=B7=BB=E5=8A=A0=E8=AF=AD?=
 =?UTF-8?q?=E8=A8=80=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=A8=A1=E6=9D=BF=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base-layout/base-layout-header.vue        | 75 ++++++++++++-------
 1 file changed, 48 insertions(+), 27 deletions(-)

diff --git a/src/layouts/base-layout/base-layout-header.vue b/src/layouts/base-layout/base-layout-header.vue
index 2383443..8799e81 100644
--- a/src/layouts/base-layout/base-layout-header.vue
+++ b/src/layouts/base-layout/base-layout-header.vue
@@ -14,37 +14,58 @@ const themeLabels: Record<AppThemeMode, string> = {
   dark: '深色',
   system: '跟随系统',
 };
+
+const { locale } = useI18n();
+const languageLabels: Record<string, string> = {
+  'en-US': 'English',
+  'zh-CN': '简体中文',
+};
+function toggleLanguage() {
+  locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN';
+}
 </script>
 
 <template>
   <div class="h-full flex items-center justify-between px-12px shadow-header dark:shadow-gray-700">
-    <NTooltip :disabled="appStore.isMobile" placement="bottom-start">
-      {{ appStore.sidebarCollapsed ? '展开菜单' : '收起菜单' }}
-      <template #trigger>
-        <NButton ref="buttonRef" quaternary @click="toggleCollapsed">
-          <icon-line-md:menu-fold-right v-if="appStore.sidebarCollapsed" w-4.5 h-4.5 />
-          <icon-line-md:menu-fold-left v-else w-4.5 h-4.5 />
-        </NButton>
-      </template>
-    </NTooltip>
+    <div>
+      <NTooltip :disabled="appStore.isMobile" placement="bottom-start">
+        {{ appStore.sidebarCollapsed ? '展开菜单' : '收起菜单' }}
+        <template #trigger>
+          <NButton ref="buttonRef" quaternary @click="toggleCollapsed">
+            <icon-line-md:menu-fold-right v-if="appStore.sidebarCollapsed" w-4.5 h-4.5 />
+            <icon-line-md:menu-fold-left v-else w-4.5 h-4.5 />
+          </NButton>
+        </template>
+      </NTooltip>
+    </div>
 
-    <NTooltip :disabled="appStore.isMobile" placement="bottom-end">
-      {{ themeLabels[appStore.themeMode] }}
-      <template #trigger>
-        <NButton quaternary @click="appStore.cycleTheme">
-          <icon-line-md:sunny-filled-loop-to-moon-filled-loop-transition
-            v-if="appStore.themeMode === 'light'"
-            w-4.5
-            h-4.5
-          />
-          <icon-line-md:moon-filled-to-sunny-filled-loop-transition
-            v-else-if="appStore.themeMode === 'dark'"
-            w-4.5
-            h-4.5
-          />
-          <icon-line-md:computer v-else w-4.5 h-4.5 />
-        </NButton>
-      </template>
-    </NTooltip>
+    <div class="flex items-center">
+      <NTooltip :disabled="appStore.isMobile" placement="bottom-end">
+        {{ languageLabels[locale] }}
+        <template #trigger>
+          <NButton quaternary @click="toggleLanguage">
+            <icon-clarity:language-line w-4.5 h-4.5 />
+          </NButton>
+        </template>
+      </NTooltip>
+      <NTooltip :disabled="appStore.isMobile" placement="bottom-end">
+        {{ themeLabels[appStore.themeMode] }}
+        <template #trigger>
+          <NButton quaternary @click="appStore.cycleTheme">
+            <icon-line-md:sunny-filled-loop-to-moon-filled-loop-transition
+              v-if="appStore.themeMode === 'light'"
+              w-4.5
+              h-4.5
+            />
+            <icon-line-md:moon-filled-to-sunny-filled-loop-transition
+              v-else-if="appStore.themeMode === 'dark'"
+              w-4.5
+              h-4.5
+            />
+            <icon-line-md:computer v-else w-4.5 h-4.5 />
+          </NButton>
+        </template>
+      </NTooltip>
+    </div>
   </div>
 </template>