fix: 前端页面架构重构优化

Yi.Ai.Vue3/src/layouts/components/Header/index.vue

@@ -1,131 +1,3 @@
-<!--
-&lt;!&ndash; Header 头部 &ndash;&gt;
-<script setup lang="ts">
-import { useRouter } from 'vue-router';
-import logo from '@/assets/images/logo.png';
-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 ConsoleBtn from './components/ConsoleBtn.vue';
-import LoginBtn from './components/LoginBtn.vue';
-import ModelLibraryBtn from './components/ModelLibraryBtn.vue';
-import StartChatBtn from './components/StartChatBtn.vue';
-import ThemeBtn from './components/ThemeBtn.vue';
-
-const router = useRouter();
-const userStore = useUserStore();
-
-// 打开控制台
-function handleOpenConsole() {
-  router.push('/console');
-}
-</script>
-
-<template>
-  <div class="header-container">
-    <div class="header-box">
-      &lt;!&ndash; 左侧logo和品牌区域 &ndash;&gt;
-      <div class="left-section">
-        <div class="brand-container">
-          <el-image :src="logo" alt="logo" fit="contain" class="logo-img" />
-          <span class="brand-text">意心AI</span>
-        </div>
-      </div>
-
-      &lt;!&ndash; 右侧功能按钮区域 &ndash;&gt;
-      <div class="right-section">
-        <StartChatBtn />
-        <AnnouncementBtn />
-        <ModelLibraryBtn />
-        <AiTutorialBtn />
-        <ConsoleBtn @open-console="handleOpenConsole" />
-        <BuyBtn v-show="userStore.userInfo" />
-        <ThemeBtn />
-        <LoginBtn v-show="!userStore.userInfo" />
-        <Avatar v-show="userStore.userInfo" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.header-container {
-  display: flex;
-  flex-shrink: 0;
-  width: 100%;
-  height: var(&#45;&#45;header-container-default-height, 60px);
-
-  .header-box {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 100%;
-    padding: 0 16px;
-    background: var(&#45;&#45;header-bg-color, #ffffff);
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  }
-
-  // 左侧品牌区域
-  .left-section {
-    display: flex;
-    align-items: center;
-    min-width: fit-content;
-    flex-shrink: 0;
-
-    .brand-container {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      .logo-img {
-        width: 36px; // 优化为更合适的大小
-        height: 36px;
-        flex-shrink: 0;
-        transition: transform 0.2s ease;
-
-        &:hover {
-          transform: scale(1.05);
-        }
-      }
-
-      .brand-text {
-        font-size: 22px; // 减小字体大小
-        font-weight: bold;
-        color: var(&#45;&#45;brand-color, #000000);
-        white-space: nowrap;
-        letter-spacing: -0.5px;
-        transition: color 0.2s ease;
-
-        &:hover {
-          //color: var(&#45;&#45;brand-hover-color, #40a9ff);
-        }
-      }
-    }
-  }
-
-  // 右侧功能区域
-  .right-section {
-    display: flex;
-    align-items: center;
-    gap: 12px; // 优化按钮间距
-    height: 100%;
-    flex-shrink: 0;
-
-    // 统一按钮样式
-    :deep(.menu-button) {
-      height: 36px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-</style>
--->
-<!-- Header 头部 -->
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -161,6 +33,18 @@ function handleSelect(key: string) {
     router.push(key);
   }
 }
+
+// 修改 AI 聊天菜单的点击事件
+function handleAIClick(e: MouseEvent) {
+  e.stopPropagation(); // 阻止事件冒泡
+  router.push('/chat/conversation');
+}
+
+// 修改控制台菜单的点击事件
+function handleConsoleClick(e: MouseEvent) {
+  e.stopPropagation(); // 阻止事件冒泡
+  router.push('/console/user');
+}
 </script>
 
 <template>
@@ -186,7 +70,7 @@ function handleSelect(key: string) {
         <!-- AI聊天菜单 -->
         <el-sub-menu index="chat" class="chat-submenu" popper-class="custom-popover">
           <template #title>
-            <span class="menu-title">AI聊天</span>
+            <span class="menu-title" @click="handleAIClick">AI应用</span>
           </template>
           <el-menu-item index="/chat/conversation">
             AI对话
@@ -217,7 +101,7 @@ function handleSelect(key: string) {
         <!-- 控制台菜单 -->
         <el-sub-menu index="console" class="console-submenu" popper-class="custom-popover">
           <template #title>
-            <ConsoleBtn />
+            <ConsoleBtn @click="handleConsoleClick" />
           </template>
           <el-menu-item index="/console/user">
             用户信息
@@ -271,7 +155,7 @@ function handleSelect(key: string) {
 
 <style scoped lang="scss">
 .header-container {
-  --menu-hover-bg: #f5f5f5;
+  --menu-hover-bg: var(--color-white);
   --menu-active-color: var(--el-color-primary);
   --menu-transition: all 0.2s ease;
 
@@ -289,6 +173,8 @@ function handleSelect(key: string) {
   justify-content: space-between;
   height: 100%;
   border-bottom: none !important;
+  //background: var(--color-white);
+
 }
 
 // 左侧品牌区域
@@ -344,7 +230,7 @@ function handleSelect(key: string) {
 :deep(.el-sub-menu__title) {
   height: 100% !important;
   border-bottom: none !important;
-  padding: 0 12px !important;
+  padding: 0 4px !important;
   color: inherit !important;
 
   &:hover {
@@ -401,7 +287,7 @@ function handleSelect(key: string) {
   height: 100%;
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 4px;
   margin-left: 4px;
 }