xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 图片广场优化

Browse Source
This commit is contained in:
Gsh
2026-01-03 20:53:17 +08:00
parent 6cc14c1e32
commit f164b7dccc
11 changed files with 563 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
Yi.Ai.Vue3/src/layouts/components/Header/index.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed } from 'vue';
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';
@@ -16,6 +16,9 @@ const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
// 移动端菜单抽屉状态
const mobileMenuVisible = ref(false);
// 当前激活的菜单项
const activeIndex = computed(() => {
if (route.path.startsWith('/console'))
@@ -31,6 +34,7 @@ const activeIndex = computed(() => {
function handleSelect(key: string) {
if (key && key !== 'no-route') {
router.push(key);
mobileMenuVisible.value = false; // 移动端导航后关闭菜单
}
}
@@ -38,20 +42,28 @@ function handleSelect(key: string) {
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"
class="header-menu desktop-menu"
mode="horizontal"
:ellipsis="false"
:router="false"
@@ -153,6 +165,97 @@ function handleConsoleClick(e: MouseEvent) {
</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>
@@ -166,7 +269,12 @@ function handleConsoleClick(e: MouseEvent) {
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 {
@@ -294,6 +402,112 @@ function handleConsoleClick(e: MouseEvent) {
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 {
@@ -340,52 +554,37 @@ function handleConsoleClick(e: MouseEvent) {
}
@media (max-width: 768px) {
.brand-text {
display: none;
// 隐藏桌面端菜单
.desktop-menu {
display: none !important;
}
.logo-img {
width: 32px;
height: 32px;
}
.menu-left {
margin-left: 12px;
}
.menu-right {
margin-right: 8px;
// 隐藏按钮文字
:deep(.button-text) {
display: none;
}
.menu-title {
display: none;
}
// 显示图标
:deep(.el-icon) {
font-size: 18px;
}
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
padding: 0 8px !important;
min-width: auto !important;
// 显示移动端头部
.mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 0 12px;
}
}
@media (max-width: 480px) {
.menu-right {
gap: 0;
.mobile-header {
padding: 0 8px;
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
padding: 0 6px !important;
}
.mobile-brand-text {
font-size: 16px;
}
.mobile-logo {
width: 28px;
height: 28px;
}
.mobile-actions {
gap: 4px;
}
}
</style>