feat: 更新导航组件,暂时禁用搜索和通知按钮,添加语言切换功能,优化语言选择界面
This commit is contained in:
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确保优先级 */
|
||||||
|
|||||||
Reference in new issue
Block a user