删除会话

web/src/views/chat/ChatDetailView.vue

@@ -14,17 +14,39 @@
           v-for="c in chat.conversations"
           :key="c.id"
           :class="[
-            'p-2 rounded cursor-pointer hover:bg-neutral-100',
+            'group p-2 rounded cursor-pointer hover:bg-neutral-100 flex items-center justify-between gap-2',
             chat.currentConversation?.id === c.id ? 'bg-blue-50' : '',
           ]"
           @click="open(c.id)"
         >
-          <div class="truncate text-sm">
-            {{ c.title || '(未命名)' }}
-          </div>
-          <div class="text-xs text-neutral-400">
-            {{ formatTime(c.updated_at) }}
+          <div class="flex-1 min-w-0">
+            <div class="truncate text-sm">
+              {{ c.title || '(未命名)' }}
+            </div>
+            <div class="text-xs text-neutral-400">
+              {{ formatTime(c.updated_at) }}
+            </div>
           </div>
+          <NPopconfirm
+            :show-icon="false"
+            @positive-click="chat.deleteConversation(c.id)"
+          >
+            <template #trigger>
+              <NButton
+                text
+                size="tiny"
+                class="opacity-0 group-hover:opacity-100 transition-opacity"
+                @click.stop
+              >
+                <template #icon>
+                  <NIcon><TrashOutline /></NIcon>
+                </template>
+              </NButton>
+            </template>
+            <template #default>
+              删除后无法恢复，确定删除此会话？
+            </template>
+          </NPopconfirm>
         </div>
         <div
           v-if="chat.conversations.length === 0"
@@ -43,6 +65,28 @@
           选择或新建会话
         </div>
         <template v-else>
+          <!-- 头部操作栏 -->
+          <div class="border-b px-4 py-2 flex items-center justify-between">
+            <div class="text-sm font-medium truncate flex-1">
+              {{ chat.currentConversation.title || '(未命名)' }}
+            </div>
+            <NPopconfirm
+              :show-icon="false"
+              @positive-click="deleteCurrentConversation"
+            >
+              <template #trigger>
+                <NButton text size="small">
+                  <template #icon>
+                    <NIcon><TrashOutline /></NIcon>
+                  </template>
+                  删除
+                </NButton>
+              </template>
+              <template #default>
+                删除后无法恢复，确定删除此会话？
+              </template>
+            </NPopconfirm>
+          </div>
           <div
             ref="scrollEl"
             class="flex-1 overflow-y-auto p-4 space-y-3"
@@ -101,7 +145,8 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { NButton, NInput } from 'naive-ui'
+import { NButton, NInput, NPopconfirm, NIcon } from 'naive-ui'
+import { TrashOutline } from '@vicons/ionicons5'
 
 import AppShell from '@/layouts/AppShell.vue'
 import { useChatStore } from '@/stores/chat'
@@ -206,6 +251,15 @@ async function onCreated(id: string) {
   await open(id)
 }
 
+async function deleteCurrentConversation() {
+  const id = chat.currentConversation?.id
+  if (!id) return
+  await chat.deleteConversation(id)
+  await router.replace({
+    path: projectId.value ? `/projects/${projectId.value}/chat` : `/chat`,
+  })
+}
+
 function formatTime(iso: string) {
   return new Date(iso).toLocaleString('zh-CN', { hour12: false })
 }