|
@@ -75,6 +75,24 @@
|
|
|
</el-breadcrumb>
|
|
</el-breadcrumb>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="header-right">
|
|
<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">
|
|
<el-dropdown @command="handleCommand">
|
|
|
<span class="user-info">
|
|
<span class="user-info">
|
|
|
<el-avatar :size="32" :src="'https://cube.elemecdn.com/0/88/03b0d39583f4b3a790e9d12d41f23e23jps.jpg'" />
|
|
<el-avatar :size="32" :src="'https://cube.elemecdn.com/0/88/03b0d39583f4b3a790e9d12d41f23e23jps.jpg'" />
|
|
@@ -140,7 +158,8 @@ import {
|
|
|
VideoCameraFilled,
|
|
VideoCameraFilled,
|
|
|
Setting,
|
|
Setting,
|
|
|
UserFilled,
|
|
UserFilled,
|
|
|
- VideoPlay
|
|
|
|
|
|
|
+ VideoPlay,
|
|
|
|
|
+ Location
|
|
|
} from '@element-plus/icons-vue'
|
|
} from '@element-plus/icons-vue'
|
|
|
import { useAppStore } from '@/store/app'
|
|
import { useAppStore } from '@/store/app'
|
|
|
import { useUserStore } from '@/store/user'
|
|
import { useUserStore } from '@/store/user'
|
|
@@ -154,6 +173,15 @@ const userStore = useUserStore()
|
|
|
const sidebarOpened = computed(() => appStore.sidebarOpened)
|
|
const sidebarOpened = computed(() => appStore.sidebarOpened)
|
|
|
const userInfo = computed(() => userStore.userInfo)
|
|
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 activeMenu = computed(() => {
|
|
|
const { path } = route
|
|
const { path } = route
|
|
|
return path
|
|
return path
|
|
@@ -319,6 +347,29 @@ onMounted(() => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.header-right {
|
|
.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 {
|
|
.user-info {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|