feat(layout): 添加语言切换功能并优化模板结构

src/layouts/base-layout/base-layout-header.vue

@@ -14,10 +14,20 @@ 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">
+    <div>
       <NTooltip :disabled="appStore.isMobile" placement="bottom-start">
         {{ appStore.sidebarCollapsed ? '展开菜单' : '收起菜单' }}
         <template #trigger>
@@ -27,7 +37,17 @@ const themeLabels: Record<AppThemeMode, string> = {
           </NButton>
         </template>
       </NTooltip>
+    </div>
 
+    <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>
@@ -47,4 +67,5 @@ const themeLabels: Record<AppThemeMode, string> = {
         </template>
       </NTooltip>
     </div>
+  </div>
 </template>