对话界面

llm-back/ruoyi-admin/src/main/java/com/ruoyi/web/controller/llm/CmcTopicController.java

@@ -2,7 +2,7 @@ package com.ruoyi.web.controller.llm;
 
 import java.util.List;
 import javax.servlet.http.HttpServletResponse;
-import org.springframework.security.access.prepost.PreAuthorize;
+
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
@@ -37,7 +37,6 @@ public class CmcTopicController extends BaseController
     /**
      * 查询cmc聊天主题列表
      */
-    @PreAuthorize("@ss.hasPermi('llm:topic:list')")
     @GetMapping("/list")
     public TableDataInfo list(CmcTopic cmcTopic)
     {
@@ -49,7 +48,6 @@ public class CmcTopicController extends BaseController
     /**
      * 导出cmc聊天主题列表
      */
-    @PreAuthorize("@ss.hasPermi('llm:topic:export')")
     @Log(title = "cmc聊天主题", businessType = BusinessType.EXPORT)
     @PostMapping("/export")
     public void export(HttpServletResponse response, CmcTopic cmcTopic)
@@ -62,7 +60,6 @@ public class CmcTopicController extends BaseController
     /**
      * 获取cmc聊天主题详细信息
      */
-    @PreAuthorize("@ss.hasPermi('llm:topic:query')")
     @GetMapping(value = "/{topicId}")
     public AjaxResult getInfo(@PathVariable("topicId") String topicId)
     {
@@ -72,7 +69,6 @@ public class CmcTopicController extends BaseController
     /**
      * 新增cmc聊天主题
      */
-    @PreAuthorize("@ss.hasPermi('llm:topic:add')")
     @Log(title = "cmc聊天主题", businessType = BusinessType.INSERT)
     @PostMapping
     public AjaxResult add(@RequestBody CmcTopic cmcTopic)
@@ -83,7 +79,6 @@ public class CmcTopicController extends BaseController
     /**
      * 修改cmc聊天主题
      */
-    @PreAuthorize("@ss.hasPermi('llm:topic:edit')")
     @Log(title = "cmc聊天主题", businessType = BusinessType.UPDATE)
     @PutMapping
     public AjaxResult edit(@RequestBody CmcTopic cmcTopic)
@@ -94,11 +89,10 @@ public class CmcTopicController extends BaseController
     /**
      * 删除cmc聊天主题
      */
-    @PreAuthorize("@ss.hasPermi('llm:topic:remove')")
     @Log(title = "cmc聊天主题", businessType = BusinessType.DELETE)
 	@DeleteMapping("/{topicIds}")
     public AjaxResult remove(@PathVariable String[] topicIds)
     {
-        return toAjax(cmcTopicService.deleteCmcTopicByTopicIds(topicIds));
+        return success(cmcTopicService.deleteCmcTopicByTopicIds(topicIds));
     }
 }

llm-back/ruoyi-common/src/main/java/com/ruoyi/common/utils/DateUtils.java

@@ -8,6 +8,7 @@ import java.time.LocalDateTime;
 import java.time.LocalTime;
 import java.time.ZoneId;
 import java.time.ZonedDateTime;
+import java.util.Calendar;
 import java.util.Date;
 import org.apache.commons.lang3.time.DateFormatUtils;
 
@@ -188,4 +189,47 @@ public class DateUtils extends org.apache.commons.lang3.time.DateUtils
         ZonedDateTime zdt = localDateTime.atZone(ZoneId.systemDefault());
         return Date.from(zdt.toInstant());
     }
+
+    /**
+     * 判断日期为今天、昨天、前天、7天内、30天内，其余按yyyy-MM格式返回
+     */
+    public static String getRelativeDate(Date inputDate) {
+        if (inputDate == null) {
+            return "";
+        }
+
+        // 获取当前日期和时间
+        Calendar today = Calendar.getInstance();
+        today.set(Calendar.HOUR_OF_DAY, 0);
+        today.set(Calendar.MINUTE, 0);
+        today.set(Calendar.SECOND, 0);
+        today.set(Calendar.MILLISECOND, 0);
+
+        // 处理输入日期
+        Calendar inputCal = Calendar.getInstance();
+        inputCal.setTime(inputDate);
+        inputCal.set(Calendar.HOUR_OF_DAY, 0);
+        inputCal.set(Calendar.MINUTE, 0);
+        inputCal.set(Calendar.SECOND, 0);
+        inputCal.set(Calendar.MILLISECOND, 0);
+
+        long diffInMillis = today.getTimeInMillis() - inputCal.getTimeInMillis();
+        long diffInDays = diffInMillis / (24 * 60 * 60 * 1000);
+
+        if (diffInDays == 0) {
+            return "今天";
+        } else if (diffInDays == 1) {
+            return "昨天";
+        } else if (diffInDays == 2) {
+            return "前天";
+        } else if (diffInDays > 2 && diffInDays <= 7) {
+            return "7天内";
+        } else if (diffInDays > 7 && diffInDays <= 30) {
+            return "30天内";
+        } else {
+            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM");
+            return sdf.format(inputDate);
+        }
+    }
+
 }

llm-back/ruoyi-system/src/main/resources/mapper/llm/CmcChatMapper.xml

@@ -2,7 +2,7 @@
 <!DOCTYPE mapper
 PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
-<mapper namespace="com.ruoyi.system.mapper.CmcChatMapper">
+<mapper namespace="com.ruoyi.llm.mapper.CmcChatMapper">
     
     <resultMap type="CmcChat" id="CmcChatResult">
         <result property="chatId"    column="chat_id"    />

llm-back/ruoyi-system/src/main/resources/mapper/llm/CmcDocumentMapper.xml

@@ -2,7 +2,7 @@
 <!DOCTYPE mapper
 PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
-<mapper namespace="com.ruoyi.system.mapper.CmcDocumentMapper">
+<mapper namespace="com.ruoyi.llm.mapper.CmcDocumentMapper">
     
     <resultMap type="CmcDocument" id="CmcDocumentResult">
         <result property="documentId"    column="document_id"    />

llm-back/ruoyi-system/src/main/resources/mapper/llm/CmcTopicMapper.xml

@@ -2,7 +2,7 @@
 <!DOCTYPE mapper
 PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
-<mapper namespace="com.ruoyi.system.mapper.CmcTopicMapper">
+<mapper namespace="com.ruoyi.llm.mapper.CmcTopicMapper">
     
     <resultMap type="CmcTopic" id="CmcTopicResult">
         <result property="topicId"    column="topic_id"    />
@@ -19,6 +19,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <where>  
             <if test="topic != null  and topic != ''"> and topic = #{topic}</if>
         </where>
+        order by create_time desc
     </select>
     
     <select id="selectCmcTopicByTopicId" parameterType="String" resultMap="CmcTopicResult">

llm-ui/src/api/llm/document.js

@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询cmc聊天附件列表
 export function listDocument(query) {
   return request({
-    url: '/system/document/list',
+    url: '/llm/document/list',
     method: 'get',
     params: query
   })
@@ -12,7 +12,7 @@ export function listDocument(query) {
 // 查询cmc聊天附件详细
 export function getDocument(documentId) {
   return request({
-    url: '/system/document/' + documentId,
+    url: '/llm/document/' + documentId,
     method: 'get'
   })
 }
@@ -20,7 +20,7 @@ export function getDocument(documentId) {
 // 新增cmc聊天附件
 export function addDocument(data) {
   return request({
-    url: '/system/document',
+    url: '/llm/document',
     method: 'post',
     data: data
   })
@@ -29,7 +29,7 @@ export function addDocument(data) {
 // 修改cmc聊天附件
 export function updateDocument(data) {
   return request({
-    url: '/system/document',
+    url: '/llm/document',
     method: 'put',
     data: data
   })
@@ -38,7 +38,7 @@ export function updateDocument(data) {
 // 删除cmc聊天附件
 export function delDocument(documentId) {
   return request({
-    url: '/system/document/' + documentId,
+    url: '/llm/document/' + documentId,
     method: 'delete'
   })
 }

llm-ui/src/api/llm/topic.js

@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询cmc聊天主题列表
 export function listTopic(query) {
   return request({
-    url: '/system/topic/list',
+    url: '/llm/topic/list',
     method: 'get',
     params: query
   })
@@ -12,7 +12,7 @@ export function listTopic(query) {
 // 查询cmc聊天主题详细
 export function getTopic(topicId) {
   return request({
-    url: '/system/topic/' + topicId,
+    url: '/llm/topic/' + topicId,
     method: 'get'
   })
 }
@@ -20,7 +20,7 @@ export function getTopic(topicId) {
 // 新增cmc聊天主题
 export function addTopic(data) {
   return request({
-    url: '/system/topic',
+    url: '/llm/topic',
     method: 'post',
     data: data
   })
@@ -29,7 +29,7 @@ export function addTopic(data) {
 // 修改cmc聊天主题
 export function updateTopic(data) {
   return request({
-    url: '/system/topic',
+    url: '/llm/topic',
     method: 'put',
     data: data
   })
@@ -38,7 +38,7 @@ export function updateTopic(data) {
 // 删除cmc聊天主题
 export function delTopic(topicId) {
   return request({
-    url: '/system/topic/' + topicId,
+    url: '/llm/topic/' + topicId,
     method: 'delete'
   })
 }

llm-ui/src/router/index.js

@@ -1,3 +1,9 @@
+/*
+ * @Author: wrh
+ * @Date: 2025-04-07 12:47:46
+ * @LastEditors: wrh
+ * @LastEditTime: 2025-06-11 11:21:06
+ */
 import { createWebHistory, createRouter } from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
@@ -85,9 +91,30 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/chat',
-    component: () => import('@/views/chat'),
-    hidden: true
+    path: '/llm/chat',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/llm/chat/index'),
+        name: 'Chat',
+        meta: { title: '对话', icon: '' }
+      }
+    ]
+  },
+  {
+    path: '/llm/knowledge',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/llm/knowledge/index'),
+        name: 'Knowledge',
+        meta: { title: '知识库', icon: '' }
+      }
+    ]
   }
 ]
 

llm-ui/src/views/chat.vue

@@ -1,185 +0,0 @@
-<!--
- * @Author: wrh
- * @Date: 2025-04-07 14:14:05
- * @LastEditors: wrh
- * @LastEditTime: 2025-04-07 18:00:58
--->
-<template>
-  <!-- 最外层页面于窗口同宽，使聊天面板居中 -->
-  <div class="home-view">
-    <!-- 整个聊天面板 -->
-    <div class="chat-panel">
-      <!-- 左侧的会话列表 -->
-      <div class="session-panel">
-        <div class="title">办公助手</div>
-        <div class="description">构建你的AI助手</div>
-      </div>
-      <!-- 右侧的消息记录 -->
-
-      <div class="message-panel">
-        <div class="navbar">
-          <div class="right-menu">
-            <div class="avatar-container">
-              <span class="right-menu-item">当前用户：{{ userStore.name }}</span>
-              <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
-                <div class="avatar-wrapper">
-                  <img :src="userStore.avatar" class="user-avatar" />
-                  <el-icon><caret-bottom /></el-icon>
-                </div>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <router-link to="/user/profile">
-                      <el-dropdown-item>个人中心</el-dropdown-item>
-                    </router-link>
-                    <el-dropdown-item divided command="logout">
-                      <span>退出登录</span>
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup name=''>
-import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
-import useUserStore from '@/store/modules/user'
-import useSettingsStore from '@/store/modules/settings'
-const userStore = useUserStore()
-const settingsStore = useSettingsStore()
-function handleCommand(command) {
-  switch (command) {
-    case "logout":
-      logout();
-      break;
-    default:
-      break;
-  }
-}
-
-function logout() {
-  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    userStore.logOut().then(() => {
-      location.href = '/index';
-    })
-  }).catch(() => { });
-}
-
-</script>
-<style lang="scss" scoped>
-.home-view {
-  display: flex;
-  /* 与窗口同宽 */
-  width: 100vw;
-  /* 水平方向上剧中 */
-  justify-content: center;
-
-  .chat-panel {
-    /* 聊天面板flex布局，让会话列表和聊天记录左右展示 */
-    display: flex;
-    /* 让聊天面板圆润一些 */
-    border-radius: 20px;
-    background-color: white;
-    /* 给一些阴影 */
-    box-shadow: 0 0 20px 20px rgba(black, 0.05);
-    /* 与上方增加一些间距 */
-    margin-top: 70px;
-
-    /* 左侧聊天会话面板*/
-    .session-panel {
-      background-color: rgb(231, 248, 255);
-      width: 300px;
-      border-top-left-radius: 20px;
-      border-bottom-left-radius: 20px;
-      padding: 20px;
-      position: relative;
-      border-right: 1px solid rgba(black, 0.07);
-
-      /* 标题*/
-      .title {
-        margin-top: 20px;
-        font-size: 20px;
-      }
-
-      /* 描述*/
-      .description {
-        color: rgba(black, 0.7);
-        font-size: 10px;
-        margin-top: 10px;
-      }
-    }
-
-    /* 右侧消息记录面板*/
-    .message-panel {
-      width: 700px;
-      height: 800px;
-    }
-  }
-
-}
-
-.navbar {
-  height: 50px;
-  overflow: hidden;
-  position: relative;
-  background: var(--navbar-bg);
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
-  .right-menu {
-    float: right;
-    height: 100%;
-    line-height: 50px;
-    display: flex;
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 14px;
-      color: var(--navbar-text);
-      vertical-align: text-bottom;
-
-      &.hover-effect {
-        cursor: pointer;
-        transition: background 0.3s;
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.025);
-        }
-      }
-
-      .avatar-container {
-        margin-right: 30px;
-
-        .avatar-wrapper {
-          margin-top: 5px;
-          position: relative;
-
-          .user-avatar {
-            cursor: pointer;
-            width: 40px;
-            height: 40px;
-            border-radius: 10px;
-          }
-
-          i {
-            cursor: pointer;
-            position: absolute;
-            right: -20px;
-            top: 25px;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

llm-ui/src/views/llm/chat/index.vue

@@ -0,0 +1,349 @@
+<!--
+ * @Author: wrh
+ * @Date: 2025-04-07 14:14:05
+ * @LastEditors: wrh
+ * @LastEditTime: 2025-06-12 17:01:55
+-->
+<template>
+  <div class="app-container">
+    <!-- 最外层页面于窗口同宽，使聊天面板居中 -->
+    <div class="home-view">
+      <!-- 整个聊天面板 -->
+      <div class="chat-panel">
+        <!-- 左侧的会话列表 -->
+        <div class="session-panel">
+          <el-row :gutter="20">
+            <el-col :span="12" :offset="3">
+              <div class="top-plus-button">
+                <el-button :icon="Plus" type="primary">开启新对话</el-button>
+              </div>
+            </el-col>
+          </el-row>
+          <el-divider />
+          <el-scrollbar max-height="800px">
+            <div id="recent-containers">
+              <div v-if="classifiedRecent.today.length > 0">
+                <div class="category-title">今天</div>
+                <div v-for="item in classifiedRecent.today" :key="item.topicId"
+                  class="record">
+                  <span @click="enableEdit(item)" v-if="!item.isEditing">{{ item.topic }}</span>
+                  <el-input v-else v-model="item.topic" @blur="disableEdit(item)"
+                    @keyup.enter="disableEdit(item)" />
+                  <el-button class="right-delete-button" :icon="Delete" style="border: none;"></el-button>
+                </div>
+              </div>
+              <div class="spacer" v-if="classifiedRecent.today.length > 0"></div>
+
+              <div v-if="classifiedRecent.yesterday.length > 0">
+                <div class="category-title">昨天</div>
+                <div v-for="item in classifiedRecent.yesterday" :key="item.topicId"
+                  class="record">
+                  <span @click="enableEdit(item)" v-if="!item.isEditing">{{ item.topic }}</span>
+                  <el-input v-else v-model="item.topic" @blur="disableEdit(item)"
+                    @keyup.enter="disableEdit(item)" />
+                  <el-button class="right-delete-button" :icon="Delete" style="border: none;"></el-button>
+                </div>
+              </div>
+              <div class="spacer" v-if="classifiedRecent.yesterday.length > 0"></div>
+
+              <div v-if="classifiedRecent.dayBeforeYesterday.length > 0">
+                <div class="category-title">前天</div>
+                <div  v-for="item in classifiedRecent.dayBeforeYesterday" :key="item.topicId"
+                  class="record">
+                  <span @click="enableEdit(item)" v-if="!item.isEditing">{{ item.topic }}</span>
+                  <el-input v-else v-model="item.topic" @blur="disableEdit(item)"
+                    @keyup.enter="disableEdit(item)" />
+                  <el-button class="right-delete-button" :icon="Delete" style="border: none;"></el-button>
+                </div>
+              </div>
+              <div class="spacer" v-if="classifiedRecent.dayBeforeYesterday.length > 0"></div>
+
+              <div v-if="classifiedRecent.within7Days.length > 0">
+                <div class="category-title">7天内</div>
+                <div  v-for="item in classifiedRecent.within7Days" :key="item.topicId"
+                  class="record">
+                  <span @click="enableEdit(item)" v-if="!item.isEditing">{{ item.topic }}</span>
+                  <el-input v-else v-model="item.topic" @blur="disableEdit(item)"
+                    @keyup.enter="disableEdit(item)" />
+                  <el-button class="right-delete-button" :icon="Delete" style="border: none;"></el-button>
+                </div>
+              </div>
+              <div class="spacer" v-if="classifiedRecent.within7Days.length > 0"></div>
+
+              <div v-if="classifiedRecent.within30Days.length > 0">
+                <div class="category-title">30天内</div>
+                <div  v-for="item in classifiedRecent.within30Days" :key="item.topicId"
+                  class="record">
+                  <span @click="enableEdit(item)" v-if="!item.isEditing">{{ item.topic }}</span>
+                  <el-input v-else v-model="item.topic" @blur="disableEdit(item)"
+                    @keyup.enter="disableEdit(item)" />
+                  <el-button class="right-delete-button" :icon="Delete" style="border: none;"></el-button>
+                </div>
+              </div>
+              <div class="spacer" v-if="classifiedRecent.within30Days.length > 0"></div>
+            </div>
+
+            <!-- 按月记录容器 -->
+            <div v-if="sortedMonthlyKeys.length > 0">
+              <div v-for="monthKey in sortedMonthlyKeys" :key="monthKey">
+                <div class="category-title">{{ formatMonth(monthKey) }}</div>
+                <div v-for="item in classifiedMonthly[monthKey]" :key="item.topicId"
+                  class="record">
+                  <span @click="enableEdit(item)" v-if="!item.isEditing">{{ item.topic }}</span>
+                  <el-input v-else v-model="item.topic" @blur="disableEdit(item)"
+                    @keyup.enter="disableEdit(item)" />
+                  <el-button class="right-delete-button" :icon="Delete" style="border: none;"></el-button>
+                </div>
+              </div>
+              <div class="spacer"></div>
+            </div>
+
+            <!-- 空状态 -->
+            <div v-if="!hasRecords" class="empty">
+              暂无记录
+            </div>
+          </el-scrollbar>
+        </div>
+        <!-- 右侧的消息记录 -->
+
+        <div class="message-panel">
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name=''>
+import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
+import { Plus, Delete } from '@element-plus/icons-vue'
+import { listTopic, getTopic, delTopic, addTopic, updateTopic } from "@/api/llm/topic";
+const { proxy } = getCurrentInstance();
+
+const topicList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const hasRecords = ref(false);
+const classifiedRecent = ref({
+  today: [],
+  yesterday: [],
+  dayBeforeYesterday: [],
+  within7Days: [],
+  within30Days: []
+});
+const classifiedMonthly = ref({});
+
+const enableEdit = (item) => {
+  item.isEditing = true;
+};
+
+const disableEdit = (item) => {
+  item.isEditing = false;
+};
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 99999,
+    topic: null,
+  },
+  rules: {
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询cmc聊天主题列表 */
+const getList = async () => {
+  try {
+    loading.value = true;
+    let response = await listTopic(queryParams.value);
+    if (response.total > 0) {
+      topicList.value = response.rows;
+      total.value = response.total;
+      loading.value = false;
+      hasRecords.value = true;
+      // 分类近期记录
+
+      const today = new Date()
+      today.setHours(0, 0, 0, 0)
+
+      const yesterday = new Date(today)
+      yesterday.setDate(yesterday.getDate() - 1)
+
+      const dayBeforeYesterday = new Date(today)
+      dayBeforeYesterday.setDate(dayBeforeYesterday.getDate() - 2)
+
+      const sevenDaysAgo = new Date(today)
+      sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7)
+
+      const thirtyDaysAgo = new Date(today)
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+
+      topicList.value.forEach(record => {
+        const recordDate = new Date(record.createTime)
+        recordDate.setHours(0, 0, 0, 0)
+
+        if (recordDate.getTime() === today.getTime()) {
+          classifiedRecent.value.today.push(record)
+        } else if (recordDate.getTime() === yesterday.getTime()) {
+          classifiedRecent.value.yesterday.push(record)
+        } else if (recordDate.getTime() === dayBeforeYesterday.getTime()) {
+          classifiedRecent.value.dayBeforeYesterday.push(record)
+        } else if (recordDate > sevenDaysAgo) {
+          classifiedRecent.value.within7Days.push(record)
+        } else if (recordDate > thirtyDaysAgo) {
+          classifiedRecent.value.within30Days.push(record)
+        } else if (recordDate <= thirtyDaysAgo) {
+          const monthKey = getMonthKey(recordDate)
+
+          if (!classifiedMonthly.value[monthKey]) {
+            classifiedMonthly.value[monthKey] = []
+          }
+
+          classifiedMonthly.value[monthKey].push(record)
+        }
+      })
+    }
+  } catch (err) {
+    console.error('获取数据失败:', err)
+  } finally {
+    loading.value = false
+  }
+}
+// 获取排序后的月份键
+const sortedMonthlyKeys = computed(() => {
+  return Object.keys(classifiedMonthly.value).sort((a, b) => new Date(b) - new Date(a))
+})
+
+// 获取月份键 (yyyy-MM)
+const getMonthKey = (date) => {
+  const year = date.getFullYear()
+  const month = (date.getMonth() + 1).toString().padStart(2, '0')
+  return `${year}-${month}`
+}
+
+// 格式化月份显示
+const formatMonth = (monthKey) => {
+  const [year, month] = monthKey.split('-')
+  return `${year}-${month}`
+}
+
+// 日期格式化
+const formatDate = (date) => {
+  const d = new Date(date)
+  return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`
+}
+onMounted(() => {
+  getList();
+})
+</script>
+<style lang="scss" scoped>
+.home-view {
+  display: flex;
+  /* 与窗口同宽 */
+  width: 100vw;
+
+  .chat-panel {
+    /* 聊天面板flex布局，让会话列表和聊天记录左右展示 */
+    display: flex;
+    /* 让聊天面板圆润一些 */
+    border-radius: 4px;
+    background-color: white;
+    /* 给一些阴影 */
+    box-shadow: 0 0 4px 4px rgba(black, 0.05);
+    /* 与上方增加一些间距 */
+    margin-top: 4px;
+
+    /* 左侧聊天会话面板*/
+    .session-panel {
+      background-color: rgb(249 251 255);
+      width: 12vw;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      position: relative;
+      border-right: 1px solid rgba(black, 0.07);
+    }
+
+    /* 右侧消息记录面板*/
+    .message-panel {
+      width: 88vw;
+      height: 90vh;
+    }
+  }
+}
+
+.category-title {
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 30px;
+  color: #333;
+  background-color: rgb(249 251 255);
+}
+
+.record {
+  z-index: 1;
+  white-space: nowrap;
+  line-height: 30px;
+  color: #4c4c4c;
+  background-color: rgb(249 251 255);
+  cursor: pointer;
+  border-radius: 12px;
+  align-items: center;
+  padding: 0 10px;
+  font-size: 12px;
+  display: flex;
+  position: relative;
+}
+
+.spacer {
+  height: 20px;
+  clear: both;
+}
+
+.empty {
+  padding: 0 10px;
+  color: #909399;
+}
+
+.top-plus-button {
+  margin-top: 20px;
+}
+
+.right-delete-button {
+  opacity: 0;
+  z-index: 2;
+  justify-content: left;
+  align-items: center;
+  width: 12px;
+  height: 12px;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  right: 0px;
+  transform: translateY(-50%);
+}
+
+.right-delete-button:hover {
+  opacity: 1;
+  z-index: 2;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
+  color: rgb(70, 70, 70);
+  justify-content: left;
+  align-items: center;
+  width: 12px;
+  height: 12px;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  right: 0px;
+  transform: translateY(-50%);
+}
+</style>

llm-ui/src/views/llm/knowledge/index.vue

@@ -0,0 +1,3 @@
+<template></template>
+<script></script>
+<style></style>