- useProductStore 加 deleteProject(productId, projectId) action - ProjectRow 行右侧加三点菜单(MoreHorizontal)+ 下拉项「删除项目」 - 项目下有版本时菜单项 disabled + tooltip「项目下还有 N 个版本,不可删除」 - 仅有 project:delete 权限的角色(默认仅超管)能看到三点 icon - 点击删除 → confirm → 调 deleteProject Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
3.4 KiB
3.4 KiB
项目删除功能设计
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
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 加三点菜单
const canDelete = useHasPermission('project:delete');
const versionCount = proj.versions.length;
const canActuallyDelete = canDelete && versionCount === 0;
// 行右侧
{canDelete && (
<DropdownMenu>
<MenuItem
disabled={!canActuallyDelete}
title={versionCount > 0 ? `项目下还有 ${versionCount} 个版本,不可删除` : ''}
onClick={() => handleDelete(proj)}
danger
>
删除项目
</MenuItem>
</DropdownMenu>
)}
下拉菜单沿用 versions/page.tsx 已有的 dropdown 写法(MoreHorizontal icon + 绝对定位 + fixed inset-0 overlay 关闭)。
handleDelete:
const handleDelete = (proj: ProjectWithContext) => {
if (!confirm(`确认删除项目「${proj.name}」?此操作不可恢复。`)) return;
deleteProject(proj.productId, proj.id);
};
(3) 权限默认值不动
lib/permissions.ts第 33 行std4('project')已包含project:deleteDEFAULT_ROLE_PERMISSIONS:超管['*']自动通过;PM 默认不含此权限(与"仅超管能删"一致)- 无需修改
数据流
ProjectRow
│
├─ useHasPermission('project:delete') ─→ 决定三点菜单是否显示
│
└─ proj.versions.length ─→ 决定菜单项是否可点
│
└─ disabled + tooltip
│
点击「删除」 ─→ confirm ─→ useProductStore.deleteProject()
│
└─ 列表自动重渲(zustand 响应式)
验证
pnpm type-check0 错误pnpm build14+1 个页面成功- 登录陈十(超管
13200132008/Ftb@2024):- hover 项目行右侧出现三点 icon
- 点开菜单看到"删除项目"
- 项目下有版本:菜单项灰色 + 鼠标悬停 tooltip "项目下还有 N 个版本,不可删除"
- 项目下无版本:菜单项可点 → confirm → 项目消失
- 登录李四(开发
13900139002/Ftb@2024):项目行右侧无三点 icon(无project:delete权限) - 登录张三(PM
13800138001/Ftb@2024):同上,无三点 icon