智能体页面新增删除历史对话功能

llm-ui/src/views/llm/agent/AgentDetail.vue

  * @Author: wrh
  * @Date: 2025-01-01 00:00:00
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2025-07-30 14:54:24
+ * @LastEditTime: 2025-07-30 16:06:36
 -->
 <template>
   <div class="agent-detail-container" v-loading="loading">
           </div>
           <div class="topic-content">
             <div v-for="topic in topicList" :key="topic.topicId" class="topic-item"
-              :class="{ 'active': currentTopicId === topic.topicId }" @click="selectTopic(topic)">
-              <div class="topic-info">
+              :class="{ 'active': currentTopicId === topic.topicId }">
+              <div class="topic-info" @click="selectTopic(topic)">
                 <div class="topic-name">{{ topic.topic }}</div>
                 <div class="topic-time">{{ topic.createTime }}</div>
               </div>
+              <div class="topic-actions">
+                <el-button 
+                  type="danger" 
+                  size="small" 
+                  :icon="Delete" 
+                  circle 
+                  @click.stop="handleDeleteTopic(topic)"
+                  class="delete-btn"
+                  title="删除对话"
+                />
+              </div>
             </div>
           </div>
         </div>
 
 <script setup>
 import { ref, reactive, watch, nextTick, computed, getCurrentInstance } from 'vue';
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Delete } from '@element-plus/icons-vue';
 import { getAgent, opening, uploadFile } from '@/api/llm/agent';
 import { answer } from '@/api/llm/mcp';
 import { listTopic, getTopic, delTopic, addTopic, updateTopic } from "@/api/llm/topic";
   }
 }
 
+// 删除话题
+const handleDeleteTopic = async (topic) => {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除话题"${topic.topic}"吗？删除后无法恢复。`,
+      '删除确认',
+      {
+        confirmButtonText: '确定删除',
+        cancelButtonText: '取消',
+        type: 'warning',
+        confirmButtonClass: 'el-button--danger'
+      }
+    )
+
+    // 调用删除API
+    await delTopic(topic.topicId)
+    
+    // 如果删除的是当前选中的话题，则重置对话状态
+    if (currentTopicId.value === topic.topicId) {
+      currentTopicId.value = null
+      chatMessages.value = []
+      chatTitle.value = '智能体新对话'
+    }
+
+    // 重新加载话题列表
+    await loadTopic()
+    
+    ElMessage.success('话题删除成功')
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除话题失败:', error)
+      ElMessage.error('删除话题失败')
+    }
+  }
+}
+
 // 发送消息
 const sendMessage = async () => {
   const message = inputMessage.value.trim()
   }
 }
 
-// 清空聊天内文件列表
-const clearChatFiles = () => {
-  chatFileList.value = []
-}
-
 // 开始新对话
 const startNewChat = () => {
   currentTopicId.value = null
       .topic-item {
         padding: 12px 16px;
         border-bottom: 1px solid #e9ecef;
-        cursor: pointer;
         transition: all 0.3s ease;
         background: white;
         margin: 4px 8px;
         border-radius: 6px;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
         &:hover {
           background: #e3f2fd;
           transform: translateX(2px);
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+          .topic-actions {
+            opacity: 1;
+          }
         }
 
         &.active {
         }
 
         .topic-info {
+          flex: 1;
+          cursor: pointer;
+          min-width: 0; // 允许flex项目缩小到内容以下
+          max-width: calc(100% - 40px); // 为删除按钮预留40px空间
+          
           .topic-name {
             font-size: 13px;
             font-weight: 500;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            max-width: 100%;
 
             &::before {
               content: "💬";
             font-size: 11px;
             color: #6c757d;
             font-style: italic;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 100%;
+          }
+        }
+
+        .topic-actions {
+          flex-shrink: 0; // 防止删除按钮被压缩
+          width: 32px; // 固定宽度
+          display: flex;
+          justify-content: center;
+          opacity: 0;
+          transition: opacity 0.3s ease;
+          
+          .delete-btn {
+            width: 24px;
+            height: 24px;
+            padding: 0;
+            border: none;
+            background: #ff4757;
+            
+            &:hover {
+              background: #ff3742;
+              transform: scale(1.1);
+            }
+            
+            .el-icon {
+              font-size: 12px;
+            }
           }
         }
       }