Просмотр исходного кода

feat: implement language switcher in header for multilingual support

- Add dropdown for language selection with options for Simplified Chinese and English
- Update layout styles to accommodate new language switcher
- Introduce computed property for current language label and handler function for language change
yb 3 недель назад
Родитель
Сommit
b0cc8b850b
1 измененных файлов с 52 добавлено и 1 удалено
  1. 52 1
      src/layout/index.vue

+ 52 - 1
src/layout/index.vue

@@ -75,6 +75,24 @@
           </el-breadcrumb>
         </div>
         <div class="header-right">
+          <el-dropdown class="lang-dropdown" @command="handleLanguage">
+            <span class="lang-trigger">
+              <el-icon><Location /></el-icon>
+              {{ currentLangLabel }}
+              <el-icon><ArrowDown /></el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="zh-cn" :class="{ active: appStore.language === 'zh-cn' }">
+                  简体中文
+                </el-dropdown-item>
+                <el-dropdown-item command="en" :class="{ active: appStore.language === 'en' }">
+                  English
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+
           <el-dropdown @command="handleCommand">
             <span class="user-info">
               <el-avatar :size="32" :src="'https://cube.elemecdn.com/0/88/03b0d39583f4b3a790e9d12d41f23e23jps.jpg'" />
@@ -140,7 +158,8 @@ import {
   VideoCameraFilled,
   Setting,
   UserFilled,
-  VideoPlay
+  VideoPlay,
+  Location
 } from '@element-plus/icons-vue'
 import { useAppStore } from '@/store/app'
 import { useUserStore } from '@/store/user'
@@ -154,6 +173,15 @@ const userStore = useUserStore()
 const sidebarOpened = computed(() => appStore.sidebarOpened)
 const userInfo = computed(() => userStore.userInfo)
 
+// 语言切换
+const currentLangLabel = computed(() => {
+  return appStore.language === 'zh-cn' ? '简体中文' : 'English'
+})
+
+function handleLanguage(lang: string) {
+  appStore.changeLanguage(lang)
+}
+
 const activeMenu = computed(() => {
   const { path } = route
   return path
@@ -319,6 +347,29 @@ onMounted(() => {
   }
 
   .header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .lang-dropdown {
+      .lang-trigger {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 6px 10px;
+        border-radius: 6px;
+        color: #5a5e66;
+        font-size: 13px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+
+        &:hover {
+          background-color: #f5f7fa;
+          color: #409eff;
+        }
+      }
+    }
+
     .user-info {
       display: flex;
       align-items: center;