feat： 添加删除历史会话的按钮和接口

chat-ai-ui-main/src/stores/chat.ts

@@ -296,5 +296,19 @@ export const useChatStore = defineStore('chat', () => {
     }
   };
 
-  return { messages, isLoading, sessionId, sessions, sidebarOpen, loadChatHistory, loadSessions, sendMessage, newConversation, switchSession };
+  const deleteSession = async (id: string) => {
+    if (!confirm('删除后，该对话将不可恢复。确认删除吗？')) return;
+    try {
+      await axios.delete(
+        `${import.meta.env.VITE_API_URL}/chat/history`,
+        { headers: { 'Authorization': `Bearer ${userStore.userId}` }, params: { sessionId: id } }
+      );
+      sessions.value = sessions.value.filter(s => s.sessionId !== id);
+      if (id === sessionId.value) newConversation();
+    } catch (error) {
+      console.error('Error deleting session:', error);
+    }
+  };
+
+  return { messages, isLoading, sessionId, sessions, sidebarOpen, loadChatHistory, loadSessions, sendMessage, newConversation, switchSession, deleteSession };
 });

chat-ai-ui-main/src/views/ChatView.vue

@@ -35,7 +35,7 @@ marked.use(markedHighlight({
 // 格式化AI信息以更好地显示
 const formatMessage = (text: string, role: string) => {
   if (!text) return '';
-  
+
   if (role === 'user') {
     // 对于用户消息，只需转义HTML并保留换行符
     return text
@@ -132,18 +132,32 @@ watch(
           <!-- 会话列表 -->
           <div class="flex-1 overflow-y-auto py-2">
             <p v-if="chatStore.sessions.length === 0" class="text-gray-500 text-sm text-center mt-8">暂无历史对话</p>
-            <button
+            <div
               v-for="session in chatStore.sessions"
               :key="session.sessionId"
-              @click="chatStore.switchSession(session.sessionId)"
-              class="w-full text-left px-4 py-3 hover:bg-gray-700 transition-colors border-l-2"
+              class="group relative border-l-2 hover:bg-gray-700 transition-colors"
               :class="session.sessionId === chatStore.sessionId
-                ? 'border-blue-500 bg-gray-700/60 text-white'
-                : 'border-transparent text-gray-300'"
+                ? 'border-blue-500 bg-gray-700/60'
+                : 'border-transparent'"
             >
-              <p class="text-sm truncate">{{ session.preview || '新对话' }}</p>
-              <p class="text-xs text-gray-500 mt-0.5">{{ formatSessionDate(session.createdAt) }}</p>
-            </button>
+              <button
+                @click="chatStore.switchSession(session.sessionId)"
+                class="w-full text-left px-4 py-3 pr-8"
+                :class="session.sessionId === chatStore.sessionId ? 'text-white' : 'text-gray-300'"
+              >
+                <p class="text-sm truncate">{{ session.preview || '新对话' }}</p>
+                <p class="text-xs text-gray-500 mt-0.5">{{ formatSessionDate(session.createdAt) }}</p>
+              </button>
+              <button
+                  @click.stop="chatStore.deleteSession(session.sessionId)"
+                  class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:text-white hover:bg-gray-600 rounded p-1"
+                  title="删除会话"
+                >
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                  </svg>
+                </button>
+            </div>
           </div>
         </aside>
       </transition>
@@ -151,7 +165,7 @@ watch(
       <!-- 聊天主区域 -->
       <div class="flex justify-center px-4 py-6 h-full">
         <div class="w-full max-w-4xl flex flex-col h-full">
-        
+
         <!-- 聊天消息容器 -->
         <div id="chat-container" class="flex-1 overflow-y-auto space-y-4 mb-4 px-4 py-4 rounded-lg shadow-lg">
           <!-- 没有对话内容显示的内容 -->
@@ -515,4 +529,4 @@ aside::-webkit-scrollbar-thumb {
   0%, 49% { opacity: 1; }
   50%, 100% { opacity: 0; }
 }
-</style>
+</style>