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

2025-12-31 00:59:06 +08:00
parent 0c31b97824
commit 77a9a64a41
6 changed files with 125 additions and 171 deletions
--- a/Yi.Ai.Vue3/src/layouts/components/ChatAside/index.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/ChatAside/index.vue
@@ -124,141 +124,7 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo

 // 折叠/展开侧边栏
 function toggleSidebar() {
-  // designStore.setIsCollapseConversationList(!designStore.isCollapseConversationList);
-}
-
-// 点击logo创建新会话（仅在折叠状态）
-function handleLogoClick() {
-  if (isCollapsed.value) {
-    handleCreatChat();
-  }
-}
-
-// 处理右键菜单（折叠状态下使用）
-function handleContextMenu(event: MouseEvent, item: ConversationItem<ChatSessionVo>) {
-  event.preventDefault();
-  // 在折叠状态下触发删除确认
-  ElMessageBox.confirm('删除后，聊天记录将不可恢复。', '确定删除对话？', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-    confirmButtonClass: 'el-button--danger',
-    cancelButtonClass: 'el-button--info',
-    roundButton: true,
-    autofocus: false,
-  })
-    .then(() => {
-      sessionStore.deleteSessions([item.id!]);
-      nextTick(() => {
-        if (item.id === active.value) {
-          sessionStore.createSessionBtn();
-        }
-      });
-    })
-    .catch(() => {
-      // 取消删除
-    });
-}
-
-// 折叠状态下点击更多按钮
-function handleCollapsedMenuClick(event: MouseEvent, item: ConversationItem<ChatSessionVo>) {
-  event.stopPropagation();
-
-  // 创建一个简单的菜单
-  ElMessageBox({
-    title: '对话操作',
-    message: `
-      <div style="padding: 8px 0;">
-        <div class="menu-item" data-action="rename" style="padding: 8px 12px; cursor: pointer; border-radius: 4px; margin: 4px 0;">
-          <span style="font-size: 14px;">重命名</span>
-        </div>
-        <div class="menu-item" data-action="delete" style="padding: 8px 12px; cursor: pointer; border-radius: 4px; margin: 4px 0; color: #f56c6c;">
-          <span style="font-size: 14px;">删除对话</span>
-        </div>
-      </div>
-    `,
-    showConfirmButton: false,
-    showCancelButton: false,
-    dangerouslyUseHTMLString: true,
-    customClass: 'collapsed-menu-dialog',
-    closeOnClickModal: true,
-    closeOnPressEscape: true,
-  }).then(() => {
-    // 对话框关闭
-  }).catch(() => {
-    // 对话框关闭
-  });
-
-  // 添加菜单项点击事件
-  nextTick(() => {
-    const menuItems = document.querySelectorAll('.menu-item');
-    menuItems.forEach((itemEl) => {
-      itemEl.addEventListener('click', (e) => {
-        const action = (e.currentTarget as HTMLElement).dataset.action;
-        if (action === 'delete') {
-          ElMessageBox.confirm('删除后，聊天记录将不可恢复。', '确定删除对话？', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning',
-            confirmButtonClass: 'el-button--danger',
-            cancelButtonClass: 'el-button--info',
-            roundButton: true,
-            autofocus: false,
-          })
-            .then(() => {
-              sessionStore.deleteSessions([item.id!]);
-              nextTick(() => {
-                if (item.id === active.value) {
-                  sessionStore.createSessionBtn();
-                }
-              });
-            })
-            .catch(() => {
-              // 取消删除
-            });
-        }
-        else if (action === 'rename') {
-          ElMessageBox.prompt('', '编辑对话名称', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            inputErrorMessage: '请输入对话名称',
-            confirmButtonClass: 'el-button--primary',
-            cancelButtonClass: 'el-button--info',
-            roundButton: true,
-            inputValue: item.sessionTitle,
-            autofocus: false,
-            inputValidator: (value) => {
-              return !!value;
-            },
-          }).then(({ value }) => {
-            sessionStore
-              .updateSession({
-                id: item.id!,
-                sessionTitle: value,
-                sessionContent: item.sessionContent,
-              })
-              .then(() => {
-                ElMessage({
-                  type: 'success',
-                  message: '修改成功',
-                });
-                nextTick(() => {
-                  if (sessionStore.currentSession?.id === item.id) {
-                    sessionStore.setCurrentSession({
-                      ...item,
-                      sessionTitle: value,
-                    });
-                  }
-                });
-              });
-          });
-        }
-
-        // 关闭菜单对话框
-        document.querySelector('.collapsed-menu-dialog .el-message-box__headerbtn')?.dispatchEvent(new Event('click'));
-      });
-    });
-  });
+  designStore.setIsCollapseConversationList(!designStore.isCollapseConversationList);
 }
 </script>

@@ -446,7 +312,7 @@ function handleCollapsedMenuClick(event: MouseEvent, item: ConversationItem<Chat

  // 折叠状态 - 100px
  &.aside-collapsed {
-    width: 100px;
+    display: none;

    .aside-wrapper {
      width: 100px;
--- a/Yi.Ai.Vue3/src/layouts/components0/Header/components/Collapse.vue
+++ b/Yi.Ai.Vue3/src/layouts/components0/Header/components/Collapse.vue
@@ -1,35 +1,35 @@
 <!-- 侧边栏折叠按钮 -->
 <script setup lang="ts">
 import SvgIcon from '@/components/SvgIcon/index.vue';
-import { SIDE_BAR_WIDTH } from '@/config/index';
-import { useCollapseToggle } from '@/hooks/useCollapseToggle';
 import { useDesignStore } from '@/stores';

-const { changeCollapse } = useCollapseToggle();
+// const { changeCollapse } = useCollapseToggle();
 const designStore = useDesignStore();

 function handleChangeCollapse() {
-  changeCollapse();
-  // 每次切换折叠状态，重置安全区状态
-  designStore.isSafeAreaHover = false;
-  // 重置首次激活悬停状态
-  designStore.hasActivatedHover = false;
-  if (!designStore.isCollapse) {
-    document.documentElement.style.setProperty(
-      `--sidebar-left-container-default-width`,
-      `${SIDE_BAR_WIDTH}px`,
-    );
-  }
-  else {
-    document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
-  }
+  designStore.setIsCollapseConversationList(!designStore.isCollapseConversationList);
+  // 待定
+  // changeCollapse();
+  // // 每次切换折叠状态，重置安全区状态
+  // designStore.isSafeAreaHover = false;
+  // // 重置首次激活悬停状态
+  // designStore.hasActivatedHover = false;
+  // if (!designStore.isCollapse) {
+  //   document.documentElement.style.setProperty(
+  //     `--sidebar-left-container-default-width`,
+  //     `${SIDE_BAR_WIDTH}px`,
+  //   );
+  // }
+  // else {
+  //   document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
+  // }
 }
 </script>

 <template>
  <div class="collapse-container btn-icon-btn" @click="handleChangeCollapse">
-    <SvgIcon v-if="!designStore.isCollapse" name="ms-left-panel-close-outline" size="24" />
-    <SvgIcon v-if="designStore.isCollapse" name="ms-left-panel-open-outline" size="24" />
+    <SvgIcon v-if="!designStore.isCollapseConversationList" name="ms-left-panel-close-outline" size="24" />
+    <SvgIcon v-if="designStore.isCollapseConversationList" name="ms-left-panel-open-outline" size="24" />
  </div>
 </template>

--- a/Yi.Ai.Vue3/src/layouts/components0/Header/components/CreateChat.vue
+++ b/Yi.Ai.Vue3/src/layouts/components0/Header/components/CreateChat.vue
@@ -1,5 +1,7 @@
 <!-- 添加新会话按钮 -->
 <script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue';
+
 import { useSessionStore } from '@/stores/modules/session';

 const sessionStore = useSessionStore();
--- a/Yi.Ai.Vue3/src/pages/chat/layouts/chatDefaul/index.vue
+++ b/Yi.Ai.Vue3/src/pages/chat/layouts/chatDefaul/index.vue
@@ -1,12 +1,14 @@
 <!-- 默认消息列表页 -->
 <script setup lang="ts">
 import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
-import { Loading } from '@element-plus/icons-vue';
+import { ArrowLeftBold, ArrowRightBold, Loading } from '@element-plus/icons-vue';
 import { useDebounceFn } from '@vueuse/core';
 import { ElMessage } from 'element-plus';
-import { nextTick, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import ModelSelect from '@/components/ModelSelect/index.vue';
 import WelecomeText from '@/components/WelecomeText/index.vue';
+import Collapse from '@/layouts/components0/Header/components/Collapse.vue';
+import CreateChat from '@/layouts/components0/Header/components/CreateChat.vue';
 import { useUserStore } from '@/stores';
 import { useFilesStore } from '@/stores/modules/files';
 import { useSessionStore } from '@/stores/modules/session';
@@ -16,6 +18,9 @@ const userStore = useUserStore();
 const sessionStore = useSessionStore();
 const filesStore = useFilesStore();

+// 计算属性
+const currentSession = computed(() => sessionStore.currentSession);
+
 // 响应式数据
 const senderValue = ref(''); // 输入框内容
 const senderRef = ref(); // Sender 组件引用
@@ -106,6 +111,16 @@ watch(

 <template>
  <div class="chat-default">
+    <!-- 头部导航栏 -->
+    <div class="chat-header">
+      <div class="header-content">
+        <div class="header-left">
+          <Collapse />
+          <CreateChat />
+        </div>
+      </div>
+    </div>
+
    <div class="chat-default-wrap">
      <!-- 欢迎文本 -->
      <WelecomeText />
@@ -185,16 +200,35 @@ watch(
 <style scoped lang="scss">
 .chat-default {
  width: 100%;
-  //background: #ff11f3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
-  justify-content: center;
-  //padding: 0 0 100px;
+  padding: 0 20px;
+
+  .chat-header {
+    width: 100%;
+    max-width: 1000px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    .header-content {
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+    }
+  }
 }
+
 .chat-default-wrap {
-  //background: #0bdcb7;
  position: relative;
  display: flex;
  flex-direction: column;
@@ -276,6 +310,14 @@ watch(

 // 响应式设计
@media (max-width: 768px) {
+  .chat-default {
+    padding: 0 12px;
+
+    .chat-header {
+      height: 50px;
+    }
+  }
+
  .chat-default-wrap {
    padding: 12px;
    min-height: calc(100vh - 120px);
--- a/Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue
+++ b/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;
+    }
  }
 }

--- a/Yi.Ai.Vue3/src/stores/modules/session.ts
+++ b/Yi.Ai.Vue3/src/stores/modules/session.ts
@@ -36,7 +36,7 @@ export const useSessionStore = defineStore('session', () => {
    try {
      // 清空当前选中会话信息
      setCurrentSession(null);
-      router.replace({ name: 'chatConversationWithId' });
+      await router.replace({ name: 'chatConversation' });
    }
    catch (error) {
      console.error('createSessionBtn错误:', error);