335 lines
8.5 KiB
Vue
335 lines
8.5 KiB
Vue
<template>
|
|
<el-menu :default-active="state.activeMenu" @select="onSelect">
|
|
<!-- 语言切换 -->
|
|
<el-sub-menu
|
|
v-if="configStore.language.is_enabled && availableLanguages.length > 1"
|
|
index="language-switch"
|
|
class="language-switch"
|
|
:key="languageKey"
|
|
>
|
|
<template #title>
|
|
<Icon v-if="showIcon" icon="ant-design:translation-outlined" color="var(--el-text-color-primary)" />
|
|
{{ t("common.language") }}
|
|
</template>
|
|
|
|
<el-menu-item
|
|
@click="handleLanguageChange(item.name)"
|
|
v-for="item in availableLanguages"
|
|
:key="item.name"
|
|
:index="'language-switch-' + item.name"
|
|
class="language-switch"
|
|
:class="{ 'is-active': item.name === currentLanguage }"
|
|
:title="`item.name: ${item.name}, currentLanguage: ${currentLanguage}`"
|
|
>
|
|
{{ item.value }}
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
|
|
<!-- 主题切换 -->
|
|
<el-menu-item
|
|
v-if="configStore.theme.is_enabled"
|
|
index="theme-switch"
|
|
class="theme-switch"
|
|
:class="$attrs.mode + '-theme-switch'"
|
|
>
|
|
<DarkSwitch />
|
|
<!-- <DarkToggle v-if="!isMobile" /> -->
|
|
</el-menu-item>
|
|
|
|
<!-- 已登录用户场景 -->
|
|
<el-sub-menu
|
|
v-if="memberStore.info"
|
|
index="user-box"
|
|
>
|
|
<template #title>
|
|
<div class="header-user-box">
|
|
<img
|
|
class="header-user-avatar"
|
|
:class="$attrs.mode == 'vertical' ? 'icon-header-user-avatar' : ''"
|
|
:src="getAvatarUrl(memberStore?.info?.avatar || '')"
|
|
alt=""
|
|
/>
|
|
{{ memberStore?.info?.nickname || t("common.user") }}
|
|
</div>
|
|
</template>
|
|
|
|
<el-menu-item index="user" @click="$emit('menu-click'); navigateTo('/member/profile')">
|
|
<Icon
|
|
v-if="showIcon"
|
|
icon="ant-design:user-outlined"
|
|
color="var(--el-text-color-primary)"
|
|
/>
|
|
{{ t("common.member_center") }}
|
|
</el-menu-item>
|
|
|
|
<!-- 会员中心菜单 -->
|
|
<MenuSub :menus="systemStore.site.member_menu" :show-icon="showIcon" @menu-click="$emit('menu-click')" />
|
|
|
|
<el-menu-item @click="$emit('menu-click'); memberStore.logout()" index="user-logout">
|
|
<Icon
|
|
v-if="showIcon"
|
|
icon="ant-design:logout-outlined"
|
|
color="var(--el-text-color-primary)"
|
|
/>
|
|
{{ t("common.logout_login") }}
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
|
|
<!-- 未登录场景 -->
|
|
<el-menu-item v-else @click="handleLoginClick" index="user">
|
|
<Icon
|
|
v-if="showIcon"
|
|
icon="ant-design:user-outlined"
|
|
color="var(--el-text-color-primary)"
|
|
/>
|
|
{{ t("common.login") }}
|
|
</el-menu-item>
|
|
<LoadingDialog />
|
|
|
|
</el-menu>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed, reactive, ref, nextTick, onMounted, onUnmounted, watch } from "vue";
|
|
import { navigateTo } from "nuxt/app";
|
|
import type { Menus } from "~/stores/interface";
|
|
import defaultAvatar from "~/assets/images/default_avatar.png";
|
|
import { fullUrl, getToken } from "~/utils/common";
|
|
import DarkToggle from "./dark-toggle.vue";
|
|
import DarkSwitch from "./dark-switch.vue";
|
|
import LoadingDialog from "@/components/login-dialog/index.vue";
|
|
import MenuSub from "./menu-sub.vue";
|
|
import { Icon } from '~/components/icon';
|
|
import { ElMessage } from "element-plus";
|
|
import { useMemberStore } from "~/stores/member";
|
|
import { useSystemStore } from "~/stores/system";
|
|
import { useConfigStore } from "~/stores/config";
|
|
import { t } from "~/composables/lang";
|
|
import { getDark, setDark } from "~/utils/dark";
|
|
|
|
const memberStore = useMemberStore();
|
|
const systemStore = useSystemStore();
|
|
const configStore = useConfigStore();
|
|
|
|
// 添加响应式的语言 key，用于强制组件重新渲染
|
|
const languageKey = ref(systemStore.lang);
|
|
|
|
// 监听语言变化，更新 languageKey
|
|
watch(() => systemStore.lang, (newLang, oldLang) => {
|
|
if (newLang !== oldLang) {
|
|
languageKey.value = newLang;
|
|
}
|
|
}, { immediate: true });
|
|
|
|
const availableLanguages = computed(() => {
|
|
const languages = systemStore.getLanguages;
|
|
return languages;
|
|
});
|
|
const currentLanguage = computed(() => {
|
|
// 从 systemStore 中获取语言设置，确保与状态保持同步
|
|
return systemStore.lang;
|
|
});
|
|
|
|
|
|
|
|
interface Props {
|
|
showIcon?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
showIcon: true,
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
'menu-click': []
|
|
}>();
|
|
|
|
const state = reactive({
|
|
activeMenu: "",
|
|
});
|
|
// 判断是否为移动端
|
|
const isMobile = ref(false);
|
|
|
|
const checkMobile = () => {
|
|
isMobile.value = window.innerWidth <= 768;
|
|
};
|
|
|
|
/**
|
|
* 获取用户头像URL
|
|
* @param avatarUrl 用户头像URL，可为空、null或undefined
|
|
* @returns 完整的头像URL，如果传入空值则返回默认头像
|
|
*/
|
|
const getAvatarUrl = (avatarUrl: string | null | undefined): string => {
|
|
if (!avatarUrl || avatarUrl.trim() === "") {
|
|
// 返回默认头像
|
|
return defaultAvatar;
|
|
}
|
|
|
|
return fullUrl(avatarUrl);
|
|
};
|
|
|
|
const handleLogin = () => {
|
|
if (
|
|
!getToken() &&
|
|
!configStore.login.is_username &&
|
|
!configStore.login.is_mobile &&
|
|
!configStore.login.is_bind_mobile
|
|
) {
|
|
ElMessage.error("商家未开启普通账号登录注册");
|
|
return false;
|
|
}
|
|
memberStore.logOpen();
|
|
};
|
|
|
|
const handleLoginClick = () => {
|
|
handleLogin();
|
|
emit('menu-click');
|
|
};
|
|
|
|
/**
|
|
* 处理语言切换
|
|
* @param lang 语言代码
|
|
*/
|
|
const handleLanguageChange = (lang: string) => {
|
|
const success = systemStore.setLanguage(lang);
|
|
|
|
// 强制更新 languageKey，触发组件重新渲染
|
|
languageKey.value = lang;
|
|
|
|
// 不再刷新页面，语言切换应该立即生效
|
|
};
|
|
|
|
/**
|
|
* 菜单被点击时额外对无需激活的菜单处理（外链、暗黑模式开关、语言切换等）
|
|
* 检查菜单是否需要激活，如果否，还原 state.activeMenu
|
|
*/
|
|
const onSelect = (index: string) => {
|
|
if (noNeedActive(systemStore.site.head_nav, index)) {
|
|
const oldActiveMenu = state.activeMenu;
|
|
state.activeMenu = "";
|
|
nextTick(() => {
|
|
state.activeMenu = oldActiveMenu;
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 检查一个菜单是否需要激活态
|
|
* @param menus
|
|
* @param index
|
|
*/
|
|
const noNeedActive = (menus: Menus[], index: string) => {
|
|
if (index.indexOf("language-switch") === 0 || index == "theme-switch") {
|
|
return true;
|
|
}
|
|
return isExternalLink(menus, index);
|
|
};
|
|
|
|
/**
|
|
* 检查一个菜单是否是外站链接，如果是，不要激活
|
|
* @param menus
|
|
* @param index
|
|
*/
|
|
const isExternalLink = (menus: Menus[], index: string): boolean => {
|
|
// 修复：添加空值检查
|
|
if (!menus || !Array.isArray(menus)) {
|
|
return false;
|
|
}
|
|
|
|
for (const key in menus) {
|
|
// 修复：检查 menus[key] 是否存在
|
|
if (!menus[key]) continue;
|
|
|
|
const columnIndex = `column-${menus[key].id}`;
|
|
if (columnIndex == index) {
|
|
return menus[key].meta?.menu_type == "link";
|
|
}
|
|
// 修复：添加 children 存在性检查
|
|
if (
|
|
menus[key].children &&
|
|
Array.isArray(menus[key].children) &&
|
|
menus[key].children.length
|
|
) {
|
|
const result = isExternalLink(menus[key].children, index);
|
|
if (result) return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
const toggleDarkMode = () => {
|
|
setDark(!getDark());
|
|
};
|
|
|
|
onMounted(() => {
|
|
checkMobile();
|
|
window.addEventListener("resize", checkMobile);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("resize", checkMobile);
|
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.header-user-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
.header-user-avatar {
|
|
width: 25px;
|
|
height: 25px;
|
|
margin-right: 4px;
|
|
border-radius: 50%;
|
|
background-color: black;
|
|
}
|
|
.icon-header-user-avatar {
|
|
margin-left: 4px;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
.el-sub-menu .icon,
|
|
.el-menu-item .icon {
|
|
vertical-align: middle;
|
|
margin-right: 2px;
|
|
width: 24px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.is-active > .icon {
|
|
color: var(--el-menu-active-color) !important;
|
|
}
|
|
.el-menu {
|
|
border-bottom: none;
|
|
border-right: none;
|
|
.theme-switch.is-active,
|
|
.language-switch.is-active {
|
|
border-bottom: none;
|
|
color: var(--el-menu-active-color) !important;
|
|
font-weight: 500 !important;
|
|
:deep(.el-sub-menu__title) {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
.theme-switch {
|
|
--el-menu-hover-bg-color: none;
|
|
padding-right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.vertical-theme-switch {
|
|
.theme-toggle-content {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.theme-toggle-content {
|
|
padding-right: 0;
|
|
}
|
|
|
|
// 语言切换选中状态
|
|
.language-switch.is-active {
|
|
color: var(--el-menu-active-color) !important;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|