# 项目删除功能设计 ## Context 项目模块当前没有删除入口。本期补齐"删除项目"功能,并对应权限点。 ## 决策摘要 | 项 | 决策 | |---|---| | 删除条件 | 项目下**有任何版本**均不可删(最严格,避免误删带数据的项目) | | 按钮位置 | 项目行右侧三点菜单(hover 显示),菜单项"删除项目" | | 不可删提示 | 菜单项 disabled + tooltip "项目下还有 N 个版本,不可删除" | | 权限点 | `project:delete`(已存在于 `lib/permissions.ts`) | | 默认能删的角色 | 仅超管 `role-admin`(PM/dev/test/design 都不含此权限) | | 二次确认 | 浏览器原生 `confirm('确认删除项目「{name}」?')` | | 卡片整体可点 | 保留——三点 icon `e.stopPropagation()` 避免冒泡 | ## 实施清单 **(1) `apps/web/stores/useProductStore.ts`** — 加 `deleteProject` action ```ts deleteProject: (productId: string, projectId: string) => void; // 实现:找到产品,从 projects 数组移除目标项目,写回 localStorage deleteProject: (productId, projectId) => { const overview = get().overview.map((p) => p.id === productId ? { ...p, projects: p.projects.filter((proj) => proj.id !== projectId) } : p ); set({ overview }); saveLocal(overview); }, ``` **(2) `apps/web/app/projects/page.tsx`** — `ProjectRow` 加三点菜单 ```tsx const canDelete = useHasPermission('project:delete'); const versionCount = proj.versions.length; const canActuallyDelete = canDelete && versionCount === 0; // 行右侧 {canDelete && ( 0 ? `项目下还有 ${versionCount} 个版本,不可删除` : ''} onClick={() => handleDelete(proj)} danger > 删除项目 )} ``` 下拉菜单沿用 versions/page.tsx 已有的 dropdown 写法(`MoreHorizontal` icon + 绝对定位 + `fixed inset-0` overlay 关闭)。 **handleDelete**: ```tsx const handleDelete = (proj: ProjectWithContext) => { if (!confirm(`确认删除项目「${proj.name}」?此操作不可恢复。`)) return; deleteProject(proj.productId, proj.id); }; ``` **(3) 权限默认值不动** - `lib/permissions.ts` 第 33 行 `std4('project')` 已包含 `project:delete` - `DEFAULT_ROLE_PERMISSIONS`:超管 `['*']` 自动通过;PM 默认不含此权限(与"仅超管能删"一致) - 无需修改 ## 数据流 ``` ProjectRow │ ├─ useHasPermission('project:delete') ─→ 决定三点菜单是否显示 │ └─ proj.versions.length ─→ 决定菜单项是否可点 │ └─ disabled + tooltip │ 点击「删除」 ─→ confirm ─→ useProductStore.deleteProject() │ └─ 列表自动重渲(zustand 响应式) ``` ## 验证 1. `pnpm type-check` 0 错误 2. `pnpm build` 14+1 个页面成功 3. 登录陈十(超管 `13200132008/Ftb@2024`): - hover 项目行右侧出现三点 icon - 点开菜单看到"删除项目" - 项目下有版本:菜单项灰色 + 鼠标悬停 tooltip "项目下还有 N 个版本,不可删除" - 项目下无版本:菜单项可点 → confirm → 项目消失 4. 登录李四(开发 `13900139002/Ftb@2024`):项目行右侧无三点 icon(无 `project:delete` 权限) 5. 登录张三(PM `13800138001/Ftb@2024`):同上,无三点 icon