feat: 更新导航组件,暂时禁用搜索和通知按钮,添加语言切换功能,优化语言选择界面

This commit is contained in:
wood911010 committed 2025-11-21 22:59:56 +08:00
1 parent 0478c201db
commit ac0d673d3b
1 file changed
+83 -12
@@ -98,15 +98,21 @@
<!-- 操作按钮组 --> <!-- 操作按钮组 -->
<div class="action-buttons"> <div class="action-buttons">
<!-- 搜索按钮 --> <!-- 搜索按钮(暂时禁用) -->
<!--
<el-tooltip :content="t('navigation.tooltip.search')" placement="bottom"> <el-tooltip :content="t('navigation.tooltip.search')" placement="bottom">
<button class="action-btn" @click="handleSearchClick"> <button class="action-btn" @click="handleSearchClick">
<NavIcon name="search" /> <NavIcon name="search" />
</button> </button>
</el-tooltip> </el-tooltip>
-->
<!-- 通知按钮 --> <!-- 通知按钮(暂时隐藏) -->
<el-tooltip :content="t('navigation.tooltip.notification')" placement="bottom"> <el-tooltip
v-if="showNotification"
:content="t('navigation.tooltip.notification')"
placement="bottom"
>
<button class="action-btn notification-btn" @click="handleNotificationClick"> <button class="action-btn notification-btn" @click="handleNotificationClick">
<NavIcon name="notification" /> <NavIcon name="notification" />
<span v-if="notificationCount" class="notification-badge"> <span v-if="notificationCount" class="notification-badge">
@@ -116,11 +122,28 @@
</el-tooltip> </el-tooltip>
<!-- 语言切换按钮 --> <!-- 语言切换按钮 -->
<el-tooltip :content="t('navigation.tooltip.language')" placement="bottom"> <el-dropdown trigger="click" @command="handleLanguageChange">
<button class="action-btn" @click="handleLanguageClick"> <span class="dropdown-trigger">
<NavIcon name="language" /> <el-tooltip :content="t('navigation.tooltip.language')" placement="bottom">
</button> <button class="action-btn language-btn">
</el-tooltip> <NavIcon name="language" />
<span class="language-label">{{ currentLanguageLabel }}</span>
</button>
</el-tooltip>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="option in languageOptions"
:key="option.code"
:command="option.code"
:class="{ active: option.code === currentLanguage }"
>
{{ option.label }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 主题切换按钮 --> <!-- 主题切换按钮 -->
<el-tooltip :content="t('navigation.tooltip.theme')" placement="bottom"> <el-tooltip :content="t('navigation.tooltip.theme')" placement="bottom">
@@ -134,7 +157,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus' import { ElMessageBox, ElMessage } from 'element-plus'
@@ -142,6 +165,7 @@ import { useAppStore } from '@/store/modules/app'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
import NavIcon from '@/components/common/icons/NavIcon.vue' import NavIcon from '@/components/common/icons/NavIcon.vue'
import { useBreadcrumb } from '@/utils/breadcrumb' import { useBreadcrumb } from '@/utils/breadcrumb'
import { changeLanguage, type SupportedLocale } from '@/utils/language'
// 组件属性接口定义 // 组件属性接口定义
interface Props { interface Props {
@@ -151,6 +175,9 @@ interface Props {
// 定义组件属性和默认值 // 定义组件属性和默认值
const { notificationCount = 24 } = defineProps<Props>() const { notificationCount = 24 } = defineProps<Props>()
// 功能暂未启用,隐藏通知入口
const showNotification = false
// 定义组件事件 // 定义组件事件
const emit = defineEmits<{ const emit = defineEmits<{
sidebarToggle: [] sidebarToggle: []
@@ -162,7 +189,7 @@ const emit = defineEmits<{
}>() }>()
// 使用国际化 // 使用国际化
const { t } = useI18n() const { t, locale } = useI18n()
// 使用store和组合函数 // 使用store和组合函数
const router = useRouter() const router = useRouter()
@@ -207,10 +234,30 @@ const handleNotificationClick = () => {
emit('notificationClick') emit('notificationClick')
} }
// 处理语言切换点击 // 语言切换
const handleLanguageClick = () => { const languageOptions: Array<{ code: SupportedLocale; label: string }> = [
{ code: 'en', label: 'English' },
{ code: 'zh', label: '中文' },
{ code: 'ja', label: '日本語' }
]
const currentLanguage = ref(locale.value as SupportedLocale)
const currentLanguageLabel = computed(
() => languageOptions.find(option => option.code === currentLanguage.value)?.label || ''
)
const handleLanguageChange = (lang: SupportedLocale) => {
if (lang === currentLanguage.value) return
changeLanguage(lang)
currentLanguage.value = lang
emit('languageClick') emit('languageClick')
window.location.reload()
} }
watch(
locale,
value => {
currentLanguage.value = value as SupportedLocale
},
{ immediate: true }
)
// 处理主题切换点击 // 处理主题切换点击
const handleThemeClick = () => { const handleThemeClick = () => {
@@ -541,6 +588,25 @@ const handleUserCommand = async (command: string) => {
background: var(--el-color-primary-light-9); background: var(--el-color-primary-light-9);
} }
.dropdown-trigger {
display: inline-flex;
}
.language-btn {
display: inline-flex;
align-items: center;
gap: 6px;
width: auto;
min-width: 40px;
padding: 0 12px;
}
.language-label {
font-size: 12px;
font-weight: 600;
color: var(--app-text-primary);
}
/* 通知徽章 */ /* 通知徽章 */
.notification-badge { .notification-badge {
position: absolute; position: absolute;
@@ -561,6 +627,11 @@ const handleUserCommand = async (command: string) => {
line-height: 1.3; line-height: 1.3;
} }
:deep(.el-dropdown-menu__item.active) {
color: var(--el-color-primary) !important;
font-weight: 600;
}
/* 侧边栏状态配合 - 桌面端 */ /* 侧边栏状态配合 - 桌面端 */
.nav-content--sidebar-collapsed { .nav-content--sidebar-collapsed {
left: 64px !important; /* 侧边栏收起时的宽度,使用!important确保优先级 */ left: 64px !important; /* 侧边栏收起时的宽度,使用!important确保优先级 */