625 lines
14 KiB
Vue
625 lines
14 KiB
Vue
<script setup lang="ts">
|
||
import { computed, ref } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import logo from '@/assets/images/logo.png';
|
||
import ConsoleBtn from '@/layouts/components0/Header/components/ConsoleBtn.vue';
|
||
import { useUserStore } from '@/stores';
|
||
import AiTutorialBtn from './components/AiTutorialBtn.vue';
|
||
import AnnouncementBtn from './components/AnnouncementBtn.vue';
|
||
import Avatar from './components/Avatar.vue';
|
||
import BuyBtn from './components/BuyBtn.vue';
|
||
import LoginBtn from './components/LoginBtn.vue';
|
||
import ModelLibraryBtn from './components/ModelLibraryBtn.vue';
|
||
import ThemeBtn from './components/ThemeBtn.vue';
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const userStore = useUserStore();
|
||
|
||
// 移动端菜单抽屉状态
|
||
const mobileMenuVisible = ref(false);
|
||
|
||
// 当前激活的菜单项
|
||
const activeIndex = computed(() => {
|
||
if (route.path.startsWith('/console'))
|
||
return 'console';
|
||
if (route.path.startsWith('/model-library'))
|
||
return 'model-library';
|
||
if (route.path.includes('/chat/'))
|
||
return 'chat';
|
||
return '';
|
||
});
|
||
|
||
// 导航处理
|
||
function handleSelect(key: string) {
|
||
if (key && key !== 'no-route') {
|
||
router.push(key);
|
||
mobileMenuVisible.value = false; // 移动端导航后关闭菜单
|
||
}
|
||
}
|
||
|
||
// 修改 AI 聊天菜单的点击事件
|
||
function handleAIClick(e: MouseEvent) {
|
||
e.stopPropagation(); // 阻止事件冒泡
|
||
router.push('/chat/conversation');
|
||
mobileMenuVisible.value = false;
|
||
}
|
||
|
||
// 修改控制台菜单的点击事件
|
||
function handleConsoleClick(e: MouseEvent) {
|
||
e.stopPropagation(); // 阻止事件冒泡
|
||
router.push('/console/user');
|
||
mobileMenuVisible.value = false;
|
||
}
|
||
|
||
// 切换移动端菜单
|
||
function toggleMobileMenu() {
|
||
mobileMenuVisible.value = !mobileMenuVisible.value;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="header-container">
|
||
<!-- 桌面端菜单 -->
|
||
<el-menu
|
||
:default-active="activeIndex"
|
||
class="header-menu desktop-menu"
|
||
mode="horizontal"
|
||
:ellipsis="false"
|
||
:router="false"
|
||
@select="handleSelect"
|
||
>
|
||
<!-- 左侧品牌区域 -->
|
||
<div class="menu-left">
|
||
<div class="brand-container" @click="router.push('/')">
|
||
<el-image :src="logo" alt="logo" fit="contain" class="logo-img" />
|
||
<span class="brand-text">意心AI</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧功能区域 -->
|
||
<div class="menu-right">
|
||
<!-- AI聊天菜单 -->
|
||
<el-sub-menu index="chat" class="chat-submenu" popper-class="custom-popover">
|
||
<template #title>
|
||
<span class="menu-title" @click="handleAIClick">AI应用</span>
|
||
</template>
|
||
<el-menu-item index="/chat/conversation">
|
||
AI对话
|
||
</el-menu-item>
|
||
<el-menu-item index="/chat/image">
|
||
AI图片
|
||
</el-menu-item>
|
||
<el-menu-item index="/chat/video">
|
||
AI视频
|
||
</el-menu-item>
|
||
<el-menu-item index="/chat/agent">
|
||
AI智能体
|
||
</el-menu-item>
|
||
</el-sub-menu>
|
||
|
||
<!-- 公告按钮 -->
|
||
<el-menu-item class="custom-menu-item" index="no-route">
|
||
<AnnouncementBtn :is-menu-item="true" />
|
||
</el-menu-item>
|
||
|
||
<!-- 模型库 -->
|
||
<el-menu-item index="/model-library" class="custom-menu-item">
|
||
<ModelLibraryBtn :is-menu-item="true" />
|
||
</el-menu-item>
|
||
|
||
<!-- AI教程 -->
|
||
<el-menu-item class="custom-menu-item" index="no-route">
|
||
<AiTutorialBtn />
|
||
</el-menu-item>
|
||
|
||
<!-- 控制台菜单 -->
|
||
<el-sub-menu index="console" class="console-submenu" popper-class="custom-popover">
|
||
<template #title>
|
||
<ConsoleBtn @click="handleConsoleClick" />
|
||
</template>
|
||
<el-menu-item index="/console/user">
|
||
用户信息
|
||
</el-menu-item>
|
||
<el-menu-item index="/console/apikey">
|
||
API密钥
|
||
</el-menu-item>
|
||
<el-menu-item index="/console/recharge-log">
|
||
充值记录
|
||
</el-menu-item>
|
||
<el-menu-item index="/console/usage">
|
||
用量统计
|
||
</el-menu-item>
|
||
<el-menu-item index="/console/premium">
|
||
尊享服务
|
||
</el-menu-item>
|
||
<el-menu-item index="/console/daily-task">
|
||
每日任务
|
||
</el-menu-item>
|
||
<el-menu-item index="/console/invite">
|
||
每周邀请
|
||
</el-menu-item>
|
||
<el-menu-item index="/console/activation">
|
||
激活码兑换
|
||
</el-menu-item>
|
||
</el-sub-menu>
|
||
|
||
<!-- 购买按钮 -->
|
||
<el-menu-item v-if="userStore.userInfo" class="custom-menu-item" index="no-route">
|
||
<BuyBtn :is-menu-item="true" />
|
||
</el-menu-item>
|
||
|
||
<!-- 主题切换（暂不显示） -->
|
||
<el-menu-item v-if="false" class="custom-menu-item" index="no-route">
|
||
<ThemeBtn :is-menu-item="true" />
|
||
</el-menu-item>
|
||
|
||
<!-- 用户头像 -->
|
||
<div v-if="userStore.userInfo" class="avatar-container">
|
||
<Avatar />
|
||
</div>
|
||
|
||
<!-- 登录按钮 -->
|
||
<el-menu-item v-if="!userStore.userInfo" class="login-menu-item" index="no-route">
|
||
<LoginBtn :is-menu-item="true" />
|
||
</el-menu-item>
|
||
</div>
|
||
</el-menu>
|
||
|
||
<!-- 移动端头部 -->
|
||
<div class="mobile-header">
|
||
<div class="mobile-brand" @click="router.push('/')">
|
||
<el-image :src="logo" alt="logo" fit="contain" class="mobile-logo" />
|
||
<span class="mobile-brand-text">意心AI</span>
|
||
</div>
|
||
|
||
<div class="mobile-actions">
|
||
<!-- 用户头像或登录按钮 -->
|
||
<div v-if="userStore.userInfo" class="mobile-avatar">
|
||
<Avatar />
|
||
</div>
|
||
<LoginBtn v-else :is-menu-item="false" />
|
||
|
||
<!-- 汉堡菜单按钮 -->
|
||
<el-button class="menu-toggle" text @click="toggleMobileMenu">
|
||
<el-icon :size="24">
|
||
<component :is="mobileMenuVisible ? 'Close' : 'Menu'" />
|
||
</el-icon>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 移动端抽屉菜单 -->
|
||
<el-drawer
|
||
v-model="mobileMenuVisible"
|
||
direction="rtl"
|
||
:size="280"
|
||
:show-close="false"
|
||
class="mobile-drawer"
|
||
>
|
||
<template #header>
|
||
<div class="drawer-header">
|
||
<span class="drawer-title">菜单</span>
|
||
</div>
|
||
</template>
|
||
|
||
<el-menu
|
||
:default-active="activeIndex"
|
||
class="mobile-menu"
|
||
@select="handleSelect"
|
||
>
|
||
<!-- AI应用 -->
|
||
<el-sub-menu index="chat">
|
||
<template #title>
|
||
<el-icon><ChatDotRound /></el-icon>
|
||
<span>AI应用</span>
|
||
</template>
|
||
<el-menu-item index="/chat/conversation">AI对话</el-menu-item>
|
||
<el-menu-item index="/chat/image">AI图片</el-menu-item>
|
||
<el-menu-item index="/chat/video">AI视频</el-menu-item>
|
||
<el-menu-item index="/chat/agent">AI智能体</el-menu-item>
|
||
</el-sub-menu>
|
||
|
||
<!-- 模型库 -->
|
||
<el-menu-item index="/model-library">
|
||
<el-icon><Box /></el-icon>
|
||
<span>模型库</span>
|
||
</el-menu-item>
|
||
|
||
<!-- 控制台 -->
|
||
<el-sub-menu index="console">
|
||
<template #title>
|
||
<el-icon><Setting /></el-icon>
|
||
<span>控制台</span>
|
||
</template>
|
||
<el-menu-item index="/console/user">用户信息</el-menu-item>
|
||
<el-menu-item index="/console/apikey">API密钥</el-menu-item>
|
||
<el-menu-item index="/console/recharge-log">充值记录</el-menu-item>
|
||
<el-menu-item index="/console/usage">用量统计</el-menu-item>
|
||
<el-menu-item index="/console/premium">尊享服务</el-menu-item>
|
||
<el-menu-item index="/console/daily-task">每日任务</el-menu-item>
|
||
<el-menu-item index="/console/invite">每周邀请</el-menu-item>
|
||
<el-menu-item index="/console/activation">激活码兑换</el-menu-item>
|
||
</el-sub-menu>
|
||
|
||
<!-- 其他功能 -->
|
||
<div class="mobile-menu-actions">
|
||
<div class="action-item">
|
||
<AnnouncementBtn :is-menu-item="false" />
|
||
</div>
|
||
<div class="action-item">
|
||
<AiTutorialBtn />
|
||
</div>
|
||
<div v-if="userStore.userInfo" class="action-item">
|
||
<BuyBtn :is-menu-item="false" />
|
||
</div>
|
||
</div>
|
||
</el-menu>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.header-container {
|
||
--menu-hover-bg: var(--color-white);
|
||
--menu-active-color: var(--el-color-primary);
|
||
--menu-transition: all 0.2s ease;
|
||
|
||
width: 100%;
|
||
height: var(--header-container-default-height, 64px);
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||
user-select: none;
|
||
position: relative;
|
||
}
|
||
|
||
// 移动端头部（默认隐藏）
|
||
.mobile-header {
|
||
display: none;
|
||
}
|
||
|
||
.header-menu {
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
border-bottom: none !important;
|
||
//background: var(--color-white);
|
||
|
||
}
|
||
|
||
// 左侧品牌区域
|
||
.menu-left {
|
||
flex-shrink: 0;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.brand-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
cursor: pointer;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
transition: background-color var(--menu-transition);
|
||
|
||
&:hover {
|
||
background-color: var(--menu-hover-bg);
|
||
}
|
||
}
|
||
|
||
.logo-img {
|
||
width: 34px;
|
||
height: 34px;
|
||
flex-shrink: 0;
|
||
transition: transform var(--menu-transition);
|
||
|
||
&:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
|
||
.brand-text {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: var(--brand-color, #000000);
|
||
white-space: nowrap;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
// 右侧功能区域
|
||
.menu-right {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
margin-right: 16px;
|
||
gap: 4px;
|
||
}
|
||
|
||
// 公共菜单项样式
|
||
:deep(.el-menu-item),
|
||
:deep(.el-sub-menu__title) {
|
||
height: 100% !important;
|
||
border-bottom: none !important;
|
||
padding: 0 4px !important;
|
||
color: inherit !important;
|
||
|
||
&:hover {
|
||
background-color: transparent !important;
|
||
color: var(--menu-active-color) !important;
|
||
}
|
||
|
||
&.is-active {
|
||
background-color: transparent !important;
|
||
color: var(--menu-active-color) !important;
|
||
|
||
.menu-title {
|
||
color: var(--menu-active-color) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 聊天和控制台子菜单
|
||
.chat-submenu,
|
||
.console-submenu {
|
||
:deep(.el-sub-menu__title) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 80px;
|
||
}
|
||
}
|
||
|
||
.menu-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
font-size: 1.2rem;
|
||
font-weight: bold;
|
||
color: #606266;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
// 自定义按钮菜单项
|
||
.custom-menu-item,
|
||
.login-menu-item {
|
||
:deep(.el-menu-item-content) {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 !important;
|
||
}
|
||
}
|
||
|
||
// Avatar 容器
|
||
.avatar-container {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 4px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
// 移动端头部样式
|
||
.mobile-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
cursor: pointer;
|
||
padding: 8px;
|
||
border-radius: 6px;
|
||
transition: background-color 0.2s;
|
||
|
||
&:hover {
|
||
background-color: var(--menu-hover-bg);
|
||
}
|
||
}
|
||
|
||
.mobile-logo {
|
||
width: 32px;
|
||
height: 32px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.mobile-brand-text {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--brand-color, #000000);
|
||
}
|
||
|
||
.mobile-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.mobile-avatar {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.menu-toggle {
|
||
padding: 8px;
|
||
color: var(--el-text-color-primary);
|
||
|
||
&:hover {
|
||
color: var(--el-color-primary);
|
||
}
|
||
}
|
||
|
||
// 移动端抽屉样式
|
||
.drawer-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0;
|
||
}
|
||
|
||
.drawer-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--el-text-color-primary);
|
||
}
|
||
|
||
.mobile-menu {
|
||
border: none;
|
||
|
||
:deep(.el-sub-menu__title),
|
||
:deep(.el-menu-item) {
|
||
height: 48px;
|
||
line-height: 48px;
|
||
padding: 0 20px !important;
|
||
margin: 4px 0;
|
||
border-radius: 8px;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
background-color: var(--el-color-primary-light-9);
|
||
}
|
||
|
||
&.is-active {
|
||
color: var(--el-color-primary);
|
||
background-color: var(--el-color-primary-light-9);
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
:deep(.el-icon) {
|
||
margin-right: 12px;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
.mobile-menu-actions {
|
||
margin-top: 20px;
|
||
padding: 16px 0;
|
||
border-top: 1px solid var(--el-border-color-light);
|
||
|
||
.action-item {
|
||
padding: 8px 20px;
|
||
margin: 4px 0;
|
||
|
||
&:hover {
|
||
background-color: var(--el-color-primary-light-9);
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式设计
|
||
@media (max-width: 1280px) {
|
||
.brand-text {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.menu-left {
|
||
margin-left: 16px;
|
||
}
|
||
|
||
.menu-right {
|
||
margin-right: 12px;
|
||
gap: 2px;
|
||
}
|
||
|
||
:deep(.el-menu-item),
|
||
:deep(.el-sub-menu__title) {
|
||
padding: 0 10px !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.brand-container {
|
||
gap: 8px;
|
||
padding: 6px 10px;
|
||
}
|
||
|
||
.logo-img {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.brand-text {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.menu-title {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.avatar-container {
|
||
padding: 0 8px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
// 隐藏桌面端菜单
|
||
.desktop-menu {
|
||
display: none !important;
|
||
}
|
||
|
||
// 显示移动端头部
|
||
.mobile-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
padding: 0 12px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.mobile-header {
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.mobile-brand-text {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.mobile-logo {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.mobile-actions {
|
||
gap: 4px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
// 自定义弹出框样式
|
||
.custom-popover {
|
||
.el-menu {
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 6px 0;
|
||
min-width: 160px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||
|
||
.el-menu-item {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
padding: 0 20px;
|
||
margin: 2px 8px;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
background-color: var(--el-color-primary-light-9);
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
&.is-active {
|
||
color: var(--el-color-primary);
|
||
background-color: var(--el-color-primary-light-9);
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|