组件 UI 补全 delete/restore 操作(已 API 完成,UI 缺失)

📝 描述

## 背景 REQ-d1deda65 完成了组件 delete/restore 的 API + CLI,但 UI 层未补。用户反馈:在前端 components 列表和详情页都看不到操作按钮。 ## 现状确认(已读代码) - components/list.html:只有 '+ 新建组件' 按钮,无 delete - components/detail.html:只有 '展开依赖树/返回列表' 按钮,无 delete/restore - components/list.html:无 ?include_archived 切换开关 - components/list.html:行无 '已归档' 标记 - backend/app/ui/routes.py:components 只有 GET,无 POST/DELETE 代理 - requirements UI 同样无 archive/restore 按钮(对齐问题,本 REQ 仅解决 components) ## 实施方案 1. backend/app/ui/routes.py 加 2 个 POST 路由(代理 API): - POST /components/{name}/delete (Form: reason) - POST /components/{name}/restore 2. backend/app/templates/components/list.html: - 顶部 list-actions 区加 '显示已归档' toggle(form GET 加 ?include_archived=true) - 表格行加 '已归档' badge(若 c.is_archived) - 行尾加 '删除' 操作(指向 detail 页,因为 detail 页才能拿到 reason modal) 3. backend/app/templates/components/detail.html: - 已归档组件:大横幅提示 '此组件已归档,无法 update/composed_of 引用',显示 archived_reason - 未归档组件:底部按钮区加 '🗑️ 删除组件' 按钮(PicoCSS dialog 模态框收集 reason ≥10 字符) - 已归档组件:加 '♻️ 恢复组件' 按钮(form POST 直提交) 4. 后端 proxy.py 加 api_delete 方法(httpx DELETE 透传 query params) 5. 业务规则:UI 删除按钮仅在 c.is_archived=false 时显示;恢复按钮仅在 archived=true 时显示;引用关系 409 时 UI 显示 '被引用组件' 列表 6. 静态资源(CDN PicoCSS 已含 <dialog> 支持,无需新依赖) ## 测试 - backend/tests/test_z_component_delete_ui.py:模拟 POST 表单到 UI 路由(不实际渲染 HTML,只测代理正确性) - E2E 手动验证(用户测试,见 SDLC testing.md 白名单 UAT) ## 关联 - REQ-d1deda65(API 层,已完成):已实现 delete/restore endpoint - d560644e(原 REQ,被错误 rejected):本 REQ 复活链第 2 步

🏷️ 标签

component ui delete restore pico htmx

🔄 推进状态