From edbb5ec5ba214e04c72b19fb6bffee9eb2666723 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E5=98=89=E6=82=A6?= <hejiayue520zzy@gmail.com>
Date: Mon, 26 May 2025 19:48:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E7=AE=A1=E7=90=86=EF=BC=8C=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=9B=9E=E8=AF=9D=E7=AE=A1=E7=90=86=E8=AF=A6=E6=83=85=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=92=8C=E8=A6=86=E7=9B=96=E4=BF=AE=E6=94=B9=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 src/api/session/index.ts                      |   4 +
 src/api/session/types.ts                      |   4 +
 src/components/LoginDialog/index.vue          |   2 +-
 src/components/WelecomeText/index.vue         |  20 +-
 src/layouts/LayoutMobile/index.vue            |   2 +-
 src/layouts/components/Aside/index.vue        |  29 ++-
 .../components/Header/components/Avatar.vue   |   1 +
 src/layouts/components/Header/index.vue       |  15 +-
 src/stores/modules/session.ts                 | 176 ++++++++++++------
 src/utils/request.ts                          |  19 ++
 11 files changed, 192 insertions(+), 84 deletions(-)

diff --git a/.env.development b/.env.development
index 53f0f20..cc1dce9 100644
--- a/.env.development
+++ b/.env.development
@@ -11,4 +11,6 @@ VITE_WEB_ENV = 'development'
 VITE_WEB_BASE_API = '/dev-api'
 
 # 本地接口
-VITE_API_URL = http://122.51.75.95:6039
+# VITE_API_URL = http://122.51.75.95:6039
+
+VITE_API_URL = http://129.211.24.7:6039
diff --git a/src/api/session/index.ts b/src/api/session/index.ts
index a62d1f2..04e1f61 100644
--- a/src/api/session/index.ts
+++ b/src/api/session/index.ts
@@ -18,6 +18,10 @@ export function update_session(data: ChatSessionVo) {
   return put('/system/session', data);
 }
 
+export function get_session(id: string) {
+  return get<ChatSessionVo>(`/system/session/${id}`);
+}
+
 export function delete_session(ids: string[]) {
   return del(`/system/session/${ids}`);
 }
diff --git a/src/api/session/types.ts b/src/api/session/types.ts
index af19924..797c0de 100644
--- a/src/api/session/types.ts
+++ b/src/api/session/types.ts
@@ -88,6 +88,10 @@ export interface ChatSessionVo {
    * 用户id
    */
   userId?: number;
+  /**
+   * 创建时间
+   */
+  createTime?: Date;
   /**
    * 自定义的消息前缀图标字段
    */
diff --git a/src/components/LoginDialog/index.vue b/src/components/LoginDialog/index.vue
index d5a8691..c6b01fb 100644
--- a/src/components/LoginDialog/index.vue
+++ b/src/components/LoginDialog/index.vue
@@ -122,7 +122,7 @@ function onAfterLeave() {
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(3px);
-  z-index: 99999;
+  z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/WelecomeText/index.vue b/src/components/WelecomeText/index.vue
index aac9285..26e41be 100644
--- a/src/components/WelecomeText/index.vue
+++ b/src/components/WelecomeText/index.vue
@@ -1,5 +1,6 @@
 <!-- 欢迎提示词 -->
 <script setup lang="ts">
+import { Typewriter } from 'vue-element-plus-x';
 import { useTimeGreeting } from '@/hooks/useTimeGreeting';
 import { useUserStore } from '@/stores';
 
@@ -13,8 +14,23 @@ const username = computed(() => userStore.userInfo?.username ?? '我是 Element
   <div
     class="welcome-text w-full flex flex-wrap items-center justify-center text-center text-lg font-semibold mb-32px mt-12px font-size-32px line-height-32px"
   >
-    {{ greeting }}好，{{ username }}
+    <Typewriter
+      :content="`${greeting}好，${username}`"
+      :typing="{
+        step: 2,
+        interval: 45,
+      }"
+      :is-fog="{
+        bgColor: '#fff',
+      }"
+    />
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+:deep {
+  .typer-container {
+    overflow: initial;
+  }
+}
+</style>
diff --git a/src/layouts/LayoutMobile/index.vue b/src/layouts/LayoutMobile/index.vue
index 5a040d5..29fc25a 100644
--- a/src/layouts/LayoutMobile/index.vue
+++ b/src/layouts/LayoutMobile/index.vue
@@ -1,4 +1,4 @@
-<!--  -->
+<!-- 手机端布局 -->
 <script setup></script>
 
 <template>
diff --git a/src/layouts/components/Aside/index.vue b/src/layouts/components/Aside/index.vue
index a51acbd..4bba8d4 100644
--- a/src/layouts/components/Aside/index.vue
+++ b/src/layouts/components/Aside/index.vue
@@ -1,8 +1,9 @@
 <!-- Aside 侧边栏 -->
 <script setup lang="ts">
-import type { ConversationItem, GroupableOptions } from 'vue-element-plus-x/types/Conversations';
+import type { ConversationItem } from 'vue-element-plus-x/types/Conversations';
 import type { ChatSessionVo } from '@/api/session/types';
 import { useRoute, useRouter } from 'vue-router';
+import { get_session } from '@/api/session';
 import logo from '@/assets/images/logo.png';
 import SvgIcon from '@/components/SvgIcon/index.vue';
 import Collapse from '@/layouts/components/Header/components/Collapse.vue';
@@ -17,27 +18,16 @@ const sessionStore = useSessionStore();
 const sessionId = computed(() => route.params?.id);
 const conversationsList = computed(() => sessionStore.sessionList);
 const loadMoreLoading = computed(() => sessionStore.isLoadingMore);
-const active = ref();
-
-// 自定义分组选项
-const customGroupOptions: GroupableOptions = {
-  // 自定义分组排序，学习 > 工作 > 个人 > 未分组
-  sort: (a: any, b: any) => {
-    const order: Record<string, number> = { 学习: 0, 工作: 1, 个人: 2, 未分组: 3 };
-    const orderA = order[a] !== undefined ? order[a] : 999;
-    const orderB = order[b] !== undefined ? order[b] : 999;
-    return orderA - orderB;
-  },
-};
+const active = computed(() => sessionStore.currentSession?.id);
 
 onMounted(async () => {
   // 获取会话列表
   await sessionStore.requestSessionList();
   // 高亮最新会话
   if (conversationsList.value.length > 0 && sessionId.value) {
-    active.value = sessionId.value;
+    const currentSessionRes = await get_session(`${sessionId.value}`);
     // 通过 ID 查询详情，设置当前会话 (因为有分页)
-    // sessionStore.currentSession = sessionStore.getSessionById(sessionId.value);
+    sessionStore.setCurrentSession(currentSessionRes.data);
   }
 });
 
@@ -50,7 +40,6 @@ function handleCreatChat() {
 // 切换会话
 function handleChange(item: ConversationItem<ChatSessionVo>) {
   sessionStore.setCurrentSession(item);
-  active.value = item.id;
   router.replace({
     name: 'chatWithId',
     params: {
@@ -77,6 +66,7 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
         confirmButtonClass: 'el-button--danger',
         cancelButtonClass: 'el-button--info',
         roundButton: true,
+        autofocus: false,
       })
         .then(() => {
           // 删除会话
@@ -101,6 +91,7 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
         cancelButtonClass: 'el-button--info',
         roundButton: true,
         inputValue: item.sessionTitle, // 设置默认值
+        autofocus: false,
         inputValidator: (value) => {
           if (!value) {
             return false;
@@ -174,11 +165,12 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
               :items="conversationsList"
               :label-max-width="200"
               :show-tooltip="true"
-              :tooltip-offset="35"
+              :tooltip-offset="60"
               show-built-in-menu
-              :groupable="customGroupOptions"
+              groupable
               row-key="id"
               label-key="sessionTitle"
+              tooltip-placement="right"
               :load-more="handleLoadMore"
               :load-more-loading="loadMoreLoading"
               :items-style="{
@@ -396,6 +388,7 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
 
   // 群组标题样式 和 侧边栏菜单背景色一致
   .conversation-group-title {
+    padding-left: 12px !important;
     background-color: var(--sidebar-background-color) !important;
   }
 }
diff --git a/src/layouts/components/Header/components/Avatar.vue b/src/layouts/components/Header/components/Avatar.vue
index 2b60730..5119cb9 100644
--- a/src/layouts/components/Header/components/Avatar.vue
+++ b/src/layouts/components/Header/components/Avatar.vue
@@ -60,6 +60,7 @@ function handleClick(item: any) {
         confirmButtonClass: 'el-button--danger',
         cancelButtonClass: 'el-button--info',
         roundButton: true,
+        autofocus: false,
       })
         .then(() => {
           // 在这里执行退出方法
diff --git a/src/layouts/components/Header/index.vue b/src/layouts/components/Header/index.vue
index a996b2f..1941f3a 100644
--- a/src/layouts/components/Header/index.vue
+++ b/src/layouts/components/Header/index.vue
@@ -1,7 +1,9 @@
 <!-- Header 头部 -->
 <script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core';
 import { SIDE_BAR_WIDTH } from '@/config/index';
 import { useDesignStore, useUserStore } from '@/stores';
+import { useSessionStore } from '@/stores/modules/session';
 import Avatar from './components/Avatar.vue';
 import Collapse from './components/Collapse.vue';
 import CreateChat from './components/CreateChat.vue';
@@ -10,7 +12,7 @@ import TitleEditing from './components/TitleEditing.vue';
 
 const userStore = useUserStore();
 const designStore = useDesignStore();
-console.log('userStore', userStore.token);
+const sessionStore = useSessionStore();
 
 onMounted(() => {
   // 全局设置侧边栏默认宽度 (这个是不变的，一开始就设置)
@@ -25,6 +27,17 @@ onMounted(() => {
     );
   }
 });
+
+// 定义 Ctrl+K 的处理函数
+function handleCtrlK(event: KeyboardEvent) {
+  event.preventDefault(); // 防止默认行为
+  sessionStore.createSessionBtn();
+}
+
+// 设置全局的键盘按键监听
+onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtrlK, {
+  passive: false,
+});
 </script>
 
 <template>
diff --git a/src/stores/modules/session.ts b/src/stores/modules/session.ts
index b727d59..fa93a35 100644
--- a/src/stores/modules/session.ts
+++ b/src/stores/modules/session.ts
@@ -3,7 +3,13 @@ import { ChatLineRound } from '@element-plus/icons-vue';
 import { defineStore } from 'pinia';
 import { markRaw } from 'vue';
 import { useRouter } from 'vue-router';
-import { create_session, delete_session, get_session_list, update_session } from '@/api/session';
+import {
+  create_session,
+  delete_session,
+  get_session,
+  get_session_list,
+  update_session,
+} from '@/api/session';
 import { useUserStore } from './user';
 
 export const useSessionStore = defineStore('session', () => {
@@ -28,49 +34,18 @@ export const useSessionStore = defineStore('session', () => {
   // 创建新对话（按钮点击）
   const createSessionBtn = async () => {
     try {
+      // 清空当前选中会话信息
+      setCurrentSession(null);
       router.replace({ name: 'chat' });
-      currentSession.value = null;
     }
     catch (error) {
       console.error('createSessionBtn错误:', error);
     }
   };
 
-  // 发送消息后创建新会话（并插入列表顶部）
-  const createSessionList = async (data: Omit<CreateSessionDTO, 'id'>) => {
-    try {
-      const res = await create_session(data);
-
-      console.log('并插入列表顶部 res', res);
-
-      // 构造新会话对象（根据接口实际返回调整）
-      const newSession: ChatSessionVo = {
-        ...data,
-        sessionTitle: data.sessionTitle || '新对话',
-        prefixIcon: markRaw(ChatLineRound),
-      };
-
-      // 插入到列表顶部（触发视图更新）
-      sessionList.value.unshift(newSession);
-
-      // 跳转聊天页
-      router.replace({
-        name: 'chatWithId',
-        params: { id: `${res.data}` },
-      });
-
-      // 重置分页状态（新增会话后，后续加载从第一页重新开始）
-      currentPage.value = 1;
-      hasMore.value = true;
-    }
-    catch (error) {
-      console.error('createSessionList错误:', error);
-    }
-  };
-
   // 获取会话列表（核心分页方法）
-  const requestSessionList = async (page: number = currentPage.value) => {
-    if ((page > 1 && !hasMore.value) || isLoading.value || isLoadingMore.value)
+  const requestSessionList = async (page: number = currentPage.value, force: boolean = false) => {
+    if (!force && ((page > 1 && !hasMore.value) || isLoading.value || isLoadingMore.value))
       return;
 
     isLoading.value = page === 1; // 第一页时标记为全局加载
@@ -81,37 +56,42 @@ export const useSessionStore = defineStore('session', () => {
         userId: userStore.userInfo?.userId as number,
         pageNum: page,
         pageSize: pageSize.value,
+        isAsc: 'desc',
+        orderByColumn: 'createTime',
       };
 
-      const res = await get_session_list(params);
+      const resArr = await get_session_list(params);
 
-      // 第一页：覆盖原有数据；非第一页：合并新数据
+      // 预处理会话分组
+      const res = processSessions(resArr.rows);
+
+      const allSessions = new Map(sessionList.value.map(item => [item.id, item])); // 现有所有数据
+      res.forEach(item =>
+        allSessions.set(item.id, { ...item, prefixIcon: markRaw(ChatLineRound) }),
+      ); // 更新/添加数据
+
+      // 按服务端排序重建列表（假设分页数据是按时间倒序，第一页是最新，后续页依次递减）
+      // 此处需根据接口返回的排序规则调整，假设每页数据是递增的（第一页最新，第二页次新，第三页 oldest）
       if (page === 1) {
-        sessionList.value
-          = res.rows?.map((item: ChatSessionVo) => {
-            return {
-              ...item,
-              prefixIcon: markRaw(ChatLineRound),
-            };
-          }) || [];
+        // 第一页是最新数据，应排在列表前面
+        sessionList.value = [
+          ...res, // 新的第一页数据（最新）
+          ...Array.from(allSessions.values()).filter(item => !res.some(r => r.id === item.id)), // 保留未被第一页覆盖的旧数据
+        ];
       }
       else {
-        // 去重处理（避免接口返回重复数据）
-        const existingIds = new Set(sessionList.value.map(item => item.id));
-        const newRows = (
-          res.rows?.map((item: ChatSessionVo) => {
-            return {
-              ...item,
-              prefixIcon: markRaw(ChatLineRound),
-            };
-          }) || []
-        ).filter(item => !existingIds.has(item.id));
-        sessionList.value.push(...newRows);
+        // 非第一页数据是更旧的数据，追加到列表末尾
+        sessionList.value = [
+          ...sessionList.value.filter(item => !res.some(r => r.id === item.id)), // 保留现有数据（除了被当前页更新的）
+          ...res, // 追加当前页的新数据（更旧的）
+        ];
       }
 
       // 判断是否还有更多数据（当前页数据量 < pageSize 则无更多）
-      hasMore.value = (res.rows?.length || 0) === pageSize.value;
-      currentPage.value = page;
+      if (!force)
+        hasMore.value = (res?.length || 0) === pageSize.value;
+      if (!force)
+        currentPage.value = page; // 仅非强制刷新时更新页码
     }
     catch (error) {
       console.error('requestSessionList错误:', error);
@@ -122,6 +102,35 @@ export const useSessionStore = defineStore('session', () => {
     }
   };
 
+  // 发送消息后创建新会话
+  const createSessionList = async (data: Omit<CreateSessionDTO, 'id'>) => {
+    try {
+      const res = await create_session(data);
+      // 创建会话后立刻查询列表会话
+      // 1. 先找到被修改会话在 sessionList 中的索引（假设 sessionList 是按服务端排序的完整列表）
+      const targetIndex = sessionList.value.findIndex(session => session.id === `${res.data}`);
+      // 2. 计算该会话所在的页码（页大小固定为 pageSize.value）
+      const targetPage
+        = targetIndex >= 0
+          ? Math.floor(targetIndex / pageSize.value) + 1 // 索引从0开始，页码从1开始
+          : 1; // 未找到时默认刷新第一页（可能因排序变化导致位置改变）
+      // 3. 刷新目标页数据
+      await requestSessionList(targetPage, true);
+      // 并将当前勾选信息设置为新增的会话信息
+      const newSessionRes = await get_session(`${res.data}`);
+      setCurrentSession(newSessionRes.data);
+
+      // 跳转聊天页
+      router.replace({
+        name: 'chatWithId',
+        params: { id: `${res.data}` },
+      });
+    }
+    catch (error) {
+      console.error('createSessionList错误:', error);
+    }
+  };
+
   // 加载更多会话（供组件调用）
   const loadMoreSessions = async () => {
     if (hasMore.value)
@@ -132,7 +141,15 @@ export const useSessionStore = defineStore('session', () => {
   const updateSession = async (item: ChatSessionVo) => {
     try {
       await update_session(item);
-      await requestSessionList(currentPage.value);
+      // 1. 先找到被修改会话在 sessionList 中的索引（假设 sessionList 是按服务端排序的完整列表）
+      const targetIndex = sessionList.value.findIndex(session => session.id === item.id);
+      // 2. 计算该会话所在的页码（页大小固定为 pageSize.value）
+      const targetPage
+        = targetIndex >= 0
+          ? Math.floor(targetIndex / pageSize.value) + 1 // 索引从0开始，页码从1开始
+          : 1; // 未找到时默认刷新第一页（可能因排序变化导致位置改变）
+      // 3. 刷新目标页数据
+      await requestSessionList(targetPage, true);
     }
     catch (error) {
       console.error('updateSession错误:', error);
@@ -143,13 +160,52 @@ export const useSessionStore = defineStore('session', () => {
   const deleteSessions = async (ids: string[]) => {
     try {
       await delete_session(ids);
-      await requestSessionList(currentPage.value);
+      // 1. 先找到被修改会话在 sessionList 中的索引（假设 sessionList 是按服务端排序的完整列表）
+      const targetIndex = sessionList.value.findIndex(session => session.id === ids[0]);
+      // 2. 计算该会话所在的页码（页大小固定为 pageSize.value）
+      const targetPage
+        = targetIndex >= 0
+          ? Math.floor(targetIndex / pageSize.value) + 1 // 索引从0开始，页码从1开始
+          : 1; // 未找到时默认刷新第一页（可能因排序变化导致位置改变）
+      // 3. 刷新目标页数据
+      await requestSessionList(targetPage, true);
     }
     catch (error) {
       console.error('deleteSessions错误:', error);
     }
   };
 
+  // 在获取会话列表后添加预处理逻辑（示例）
+  function processSessions(sessions: ChatSessionVo[]) {
+    const currentDate = new Date();
+
+    return sessions.map((session) => {
+      const createDate = new Date(session.createTime!);
+      const diffDays = Math.floor(
+        (currentDate.getTime() - createDate.getTime()) / (1000 * 60 * 60 * 24),
+      );
+
+      // 生成原始分组键（用于排序和分组）
+      let group: string;
+      if (diffDays < 7) {
+        group = '7 天内'; // 用数字前缀确保排序正确
+      }
+      else if (diffDays < 30) {
+        group = '30 天内';
+      }
+      else {
+        const year = createDate.getFullYear();
+        const month = String(createDate.getMonth() + 1).padStart(2, '0');
+        group = `${year}-${month}`; // 格式：2025-05
+      }
+
+      return {
+        ...session,
+        group, // 新增分组键字段
+      };
+    });
+  }
+
   return {
     // 当前选中的会话
     currentSession,
diff --git a/src/utils/request.ts b/src/utils/request.ts
index ab3b263..553597a 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -2,6 +2,7 @@ import type { HookFetchPlugin } from 'hook-fetch';
 import { ElMessage } from 'element-plus';
 import hookFetch from 'hook-fetch';
 import { sseTextDecoderPlugin } from 'hook-fetch/plugins';
+import router from '@/routers';
 import { useUserStore } from '@/stores';
 
 interface BaseResponse {
@@ -33,6 +34,24 @@ function jwtPlugin(): HookFetchPlugin<BaseResponse> {
       if (response.result?.code === 200) {
         return response;
       }
+      // 处理500逻辑
+      if (response.result?.code === 500) {
+        router.replace({
+          name: '500',
+        });
+        ElMessage.error(response.result?.msg);
+        return Promise.reject(response);
+      }
+      // 处理403逻辑
+      if (response.result?.code === 403) {
+        // 跳转到403页面（确保路由已配置）
+        router.replace({
+          name: '403',
+        });
+        ElMessage.error(response.result?.msg);
+        return Promise.reject(response);
+      }
+      // 处理401逻辑
       if (response.result?.code === 401) {
         // 如果没有权限，退出，且弹框提示登录
         userStore.logout();