Complete V2 user H5 flow

ai_knowledge_base_v2/apps/user-client/src/components/SessionDrawer.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 import type { ChatSession } from "../types/api";
 
 defineProps<{
@@ -11,8 +13,29 @@ const emit = defineEmits<{
   close: [];
   select: [sessionId: number];
   create: [];
+  rename: [sessionId: number, title: string];
   delete: [sessionId: number];
 }>();
+
+const editingId = ref<number | null>(null);
+const editingTitle = ref("");
+
+function startEdit(session: ChatSession) {
+  editingId.value = session.id;
+  editingTitle.value = session.title;
+}
+
+function submitEdit(sessionId: number) {
+  const title = editingTitle.value.trim();
+  if (title) emit("rename", sessionId, title);
+  editingId.value = null;
+  editingTitle.value = "";
+}
+
+function confirmDelete(session: ChatSession) {
+  const ok = window.confirm(`确定删除会话「${session.title}」吗？`);
+  if (ok) emit("delete", session.id);
+}
 </script>
 
 <template>
@@ -24,17 +47,27 @@ const emit = defineEmits<{
     </div>
     <button type="button" class="new-session-btn" @click="emit('create')">＋ 新聊天</button>
     <div class="session-list">
-      <button
+      <div
         v-for="session in sessions"
         :key="session.id"
-        type="button"
         class="session-item"
         :class="{ active: session.id === activeSessionId }"
-        @click="emit('select', session.id)"
       >
-        <span>{{ session.title }}</span>
-        <small>{{ session.messageCount }} 条消息</small>
-      </button>
+        <form v-if="editingId === session.id" class="session-edit" @submit.prevent="submitEdit(session.id)">
+          <input v-model="editingTitle" maxlength="100" @keydown.escape="editingId = null" />
+          <button type="submit">保存</button>
+        </form>
+        <template v-else>
+          <button type="button" class="session-main" @click="emit('select', session.id)">
+            <span>{{ session.title }}</span>
+            <small>{{ session.messageCount }} 条消息</small>
+          </button>
+          <div class="session-actions">
+            <button type="button" @click="startEdit(session)">改名</button>
+            <button type="button" @click="confirmDelete(session)">删除</button>
+          </div>
+        </template>
+      </div>
     </div>
   </aside>
 </template>