典籍知识问答模块AI问答功能前端实现三——对话删除及消息删除（暂未涉及前端界面设计）

一、对话删除

1. 功能入口

• ​​删除按钮位置​​：每个会话项右侧的"×"按钮
• ​​模板代码​​：
• <button class="delete-session" @click.stop="deleteSession(session.id)">×</button>

2. 核心实现逻辑

const deleteSession = async (sessionId) => {
  if (confirm('确定删除该会话及其所有消息吗？')) {
    try {
      // 1. 调用后端API删除会话
      await axios.delete(`/api/qa/sessions/${sessionId}`)
      
      // 2. 更新前端会话列表
      sessions.value = sessions.value.filter(s => s.id !== sessionId)
      
      // 3. 处理当前会话状态
      if (currentSessionId.value === sessionId) {
        currentSessionId.value = null
        currentMessages.value = []
      }
    } catch (error) {
      console.error('删除会话失败:', error)
    }
  }
}

3. 实现特点

• ​​二次确认机制​​：通过浏览器原生confirm弹窗确认操作
• ​​状态同步​​：
  • 从会话列表中过滤已删除项（sessions.value.filter）
  • 如果删除的是当前会话，清空消息列表并重置当前会话ID
• ​​事件修饰符​​：使用@click.stop阻止点击事件冒泡

4. 接口规范

• ​​请求方式​​：DELETE
• ​​接口地址​​：/api/qa/sessions/{sessionId}

二、消息删除

1. 功能入口

• ​​删除按钮位置​​：用户消息操作栏中的"×"按钮
• ​​模板代码​​：
• <button class="delete-btn" @click="deleteMessage(message.id)">×</button>

2. 核心实现逻辑

const deleteMessage = async (messageId) => {
  if (confirm('确定删除该消息及其所有后续对话吗？')) {
    try {
      // 1. 调用后端API删除消息
      await axios.delete(`/api/qa/messages/${messageId}`)
      
      // 2. 更新前端消息列表
      currentMessages.value = currentMessages.value.filter(m => m.id !== messageId)
    } catch (error) {
      console.error('删除消息失败:', error)
    }
  }
}

3. 实现特点

• ​​级联删除​​：提示说明会删除"该消息及其所有后续对话"，实际依赖后端实现级联删除逻辑
• ​​精准过滤​​：使用filter方法从消息列表中移除被删除项
• ​​用户限制​​：仅对用户消息（role === 'user'）显示删除按钮

4. 接口规范

• ​​请求方式​​：DELETE
• ​​接口地址​​：/api/qa/messages/{messageId}