diff --git a/openspec/specs/conversation-delete/spec.md b/openspec/specs/conversation-delete/spec.md new file mode 100644 index 0000000..0b02ef3 --- /dev/null +++ b/openspec/specs/conversation-delete/spec.md @@ -0,0 +1,48 @@ +## ADDED Requirements + +### Requirement: 对话列表项支持删除操作 + +对话列表中的每一项 SHALL 提供删除功能,允许用户移除不需要的对话记录。 + +#### Scenario: Hover 显示删除按钮 + +- **WHEN** 用户将鼠标悬停在对话卡片上 +- **THEN** 系统 SHALL 在卡片右侧显示删除图标按钮 + +#### Scenario: 默认隐藏删除按钮 + +- **WHEN** 用户未将鼠标悬停在对话卡片上 +- **THEN** 系统 SHALL 隐藏删除按钮,保持界面简洁 + +### Requirement: 删除操作需确认 + +系统 SHALL 在执行删除前显示确认弹窗,防止用户误操作。 + +#### Scenario: 点击删除按钮显示确认弹窗 + +- **WHEN** 用户点击删除按钮 +- **THEN** 系统 SHALL 显示确认弹窗,包含对话标题和确认/取消按钮 + +#### Scenario: 确认删除 + +- **WHEN** 用户在确认弹窗中点击"确定"按钮 +- **THEN** 系统 SHALL 关闭弹窗并模拟删除操作 + +#### Scenario: 取消删除 + +- **WHEN** 用户在确认弹窗中点击"取消"按钮或点击遮罩层 +- **THEN** 系统 SHALL 关闭弹窗,不执行删除操作 + +### Requirement: 删除按钮样式符合设计规范 + +删除按钮的样式 SHALL 符合项目现有的设计规范。 + +#### Scenario: 删除按钮默认样式 + +- **WHEN** 删除按钮显示时 +- **THEN** 按钮 SHALL 使用灰色图标,不干扰主要内容 + +#### Scenario: 删除按钮 Hover 样式 + +- **WHEN** 用户将鼠标悬停在删除按钮上 +- **THEN** 按钮 SHALL 变为红色,提示危险操作 diff --git a/src/components/layout/ConsoleLayout.jsx b/src/components/layout/ConsoleLayout.jsx index 887becd..9c24058 100644 --- a/src/components/layout/ConsoleLayout.jsx +++ b/src/components/layout/ConsoleLayout.jsx @@ -1,25 +1,40 @@ +import { useState } from 'react'; import { Outlet, useLocation, useNavigate } from 'react-router-dom'; import { FiPlus, FiClock, FiList, FiUsers, FiBox } from 'react-icons/fi'; +import { FiTrash2 } from 'react-icons/fi'; import { FaPuzzlePiece } from 'react-icons/fa'; import Layout from '../Layout.jsx'; import SidebarNavItem from './SidebarNavItem.jsx'; +import Modal from '../common/Modal.jsx'; import api from '../../services/api.js'; function ConsoleLayout() { const location = useLocation(); const navigate = useNavigate(); + const [deleteTarget, setDeleteTarget] = useState(null); - // 从 URL 提取当前 scene const sceneMatch = location.pathname.match(/\/console\/chat\/(.+)$/); const currentScene = sceneMatch ? sceneMatch[1] : null; - // 判断是否在 chat 页面(需要全宽布局) const isChatPage = location.pathname === '/console/chat' || location.pathname.startsWith('/console/chat/'); - // sidebar 高亮判断 const isPathActive = (basePath) => location.pathname.startsWith(basePath); + const handleDeleteClick = (e, conv) => { + e.stopPropagation(); + setDeleteTarget(conv); + }; + + const handleDeleteConfirm = () => { + console.log('删除对话:', deleteTarget?.id); + setDeleteTarget(null); + }; + + const handleDeleteCancel = () => { + setDeleteTarget(null); + }; + const sidebar = ( <>