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

Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue

@@ -13,16 +13,26 @@ import { Sender } from 'vue-element-plus-x';
 import { useRoute } from 'vue-router';
 import { send } from '@/api';
 import ModelSelect from '@/components/ModelSelect/index.vue';
-import { useGuideTourStore } from '@/stores';
+import Collapse from '@/layouts/components0/Header/components/Collapse.vue';
+
+import CreateChat from '@/layouts/components0/Header/components/CreateChat.vue';
+import TitleEditing from '@/layouts/components0/Header/components/TitleEditing.vue';
+import { useDesignStore, useGuideTourStore } from '@/stores';
 import { useChatStore } from '@/stores/modules/chat';
 import { useFilesStore } from '@/stores/modules/files';
 import { useModelStore } from '@/stores/modules/model';
+import { useSessionStore } from '@/stores/modules/session';
 import { useUserStore } from '@/stores/modules/user';
 import { getUserProfilePicture, systemProfilePicture } from '@/utils/user.ts';
 import YMarkdown from '@/vue-element-plus-y/components/XMarkdown/index.vue';
 import '@/styles/github-markdown.css';
 import '@/styles/yixin-markdown.scss';
 
+// 新增的导入
+const designStore = useDesignStore();
+const sessionStore = useSessionStore();
+const currentSession = computed(() => sessionStore.currentSession);
+
 type MessageItem = BubbleProps & {
   key: number;
   role: 'ai' | 'user' | 'assistant';
@@ -447,6 +457,31 @@ function handleImagePreview(url: string) {
 
 <template>
   <div class="chat-with-id-container">
+    <!-- 头部导航栏 -->
+    <div class="chat-header">
+      <div
+        class="overflow-hidden flex h-full items-center flex-row flex-1 w-fit flex-shrink-0 min-w-0"
+      >
+        <div class="w-full flex items-center flex-row">
+          <!-- 左边 -->
+          <div
+
+            class="left-box flex h-full items-center pl-20px gap-12px flex-shrink-0 flex-row"
+          >
+            <Collapse />
+            <CreateChat />
+            <div v-if="currentSession" class="w-0.5px h-30px bg-[rgba(217,217,217)]" />
+          </div>
+
+          <!-- 中间 -->
+          <div class="middle-box flex-1 min-w-0 ml-12px">
+            <TitleEditing />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 聊天内容区域 -->
     <div class="chat-warp">
       <BubbleList ref="bubbleListRef" :list="bubbleItems" max-height="calc(100vh - 240px)">
         <template #header="{ item }">
@@ -569,14 +604,23 @@ function handleImagePreview(url: string) {
   align-items: center;
   width: 100%;
   height: 100%;
+
+  .chat-header {
+    width: 100%;
+    max-width: 1000px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
   .chat-warp {
     max-width: 1000px;
-
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     width: 100%;
-    height: calc(100vh - 60px);
+    height: calc(100vh - 120px); // 减去头部高度
     .thinking-chain-warp {
       margin-bottom: 12px;
     }
@@ -674,12 +718,12 @@ function handleImagePreview(url: string) {
     font-size: 12px;
     margin-top: 3px;
     .footer-token {
-       background: rgba(1, 183, 86, 0.53);
-       padding: 0 4px;
-       margin: 0 2px;
-       border-radius: 4px;
-       color: #ffffff;
-     }
+      background: rgba(1, 183, 86, 0.53);
+      padding: 0 4px;
+      margin: 0 2px;
+      border-radius: 4px;
+      color: #ffffff;
+    }
   }
 }