|
|
@@ -0,0 +1,97 @@
|
|
|
+# 省市区管理用户体验改进 - Brownfield Enhancement
|
|
|
+
|
|
|
+## Epic Goal
|
|
|
+
|
|
|
+优化省市区管理功能的用户体验，将现有的表格视图和树形视图双模式简化为单一的树形视图，并改进新增和删除操作的交互方式，使省市区管理更加直观和高效。
|
|
|
+
|
|
|
+## Epic Description
|
|
|
+
|
|
|
+### Existing System Context
|
|
|
+
|
|
|
+**Current relevant functionality:**
|
|
|
+- 省市区管理页面目前提供表格视图和树形视图两种模式
|
|
|
+- 表格视图显示所有省市区数据的平面列表，支持分页和筛选
|
|
|
+- 树形视图以层级结构展示省市区关系，支持展开/收起操作
|
|
|
+- 新增按钮统一为"新增省市区"，需要用户手动选择层级
|
|
|
+- 删除操作在两种视图中都支持
|
|
|
+
|
|
|
+**Technology stack:**
|
|
|
+- React + TypeScript 前端框架
|
|
|
+- TanStack Query 数据管理
|
|
|
+- Shadcn/ui 组件库
|
|
|
+- Hono RPC 客户端
|
|
|
+- 现有的 AreaTree 组件已实现树形结构展示
|
|
|
+
|
|
|
+**Integration points:**
|
|
|
+- 现有的 AreasPage 组件 (web/src/client/admin/pages/Areas.tsx)
|
|
|
+- AreaTree 组件 (web/src/client/admin/components/AreaTree.tsx)
|
|
|
+- AreaForm 组件 (web/src/client/admin/components/AreaForm.tsx)
|
|
|
+- 后端 area API 接口
|
|
|
+
|
|
|
+### Enhancement Details
|
|
|
+
|
|
|
+**What's being added/changed:**
|
|
|
+1. **移除表格视图模式** - 将现有的双视图模式简化为单一的树形视图
|
|
|
+2. **优化新增操作** - 将"新增省市区"按钮改为"新增省"，并支持在树形结构中直接新增市和区
|
|
|
+3. **改进删除交互** - 在树形结构中直接支持删除操作，支持删除当前节点及所有子节点
|
|
|
+4. **增强树形视图功能** - 在树形节点上直接提供新增子节点（市、区）的功能
|
|
|
+
|
|
|
+**How it integrates:**
|
|
|
+- 修改 AreasPage 组件，移除表格视图相关的代码
|
|
|
+- 增强 AreaTree 组件，在节点上添加新增子节点的操作按钮
|
|
|
+- 更新 AreaForm 组件，简化新增流程，支持基于上下文自动设置层级
|
|
|
+- 后端需要新增批量删除API，支持删除当前节点及所有子节点
|
|
|
+- 前端调用新的批量删除API实现删除功能
|
|
|
+
|
|
|
+**Success criteria:**
|
|
|
+- 用户进入省市区管理页面时默认显示树形视图
|
|
|
+- 新增省市区操作更加直观，减少用户操作步骤
|
|
|
+- 删除操作在树形视图中直接可用，支持删除当前节点及所有子节点
|
|
|
+- 删除操作提供明确的确认提示，显示将删除的子节点数量
|
|
|
+- 现有功能不受影响，数据一致性保持
|
|
|
+- 用户体验显著提升，操作路径缩短
|
|
|
+
|
|
|
+## Stories
|
|
|
+
|
|
|
+1. **Story 1:** 移除表格视图模式，将省市区管理页面改为单一树形视图
|
|
|
+2. **Story 2:** 优化新增操作，支持在树形结构中直接新增市和区
|
|
|
+3. **Story 3:** 增强树形视图交互，在节点上提供新增子节点和删除当前及所有子节点功能
|
|
|
+
|
|
|
+## Compatibility Requirements
|
|
|
+
|
|
|
+- [ ] 需要新增批量删除API
|
|
|
+- [x] 现有其他 APIs 保持不变
|
|
|
+- [x] 数据库 schema 无变化
|
|
|
+- [x] UI 变化遵循现有模式
|
|
|
+- [x] 性能影响最小
|
|
|
+
|
|
|
+## Risk Mitigation
|
|
|
+
|
|
|
+**Primary Risk:** 需要新增后端批量删除API，增加了技术复杂度
|
|
|
+**Mitigation:** 批量删除API设计为幂等操作，确保数据一致性；前端提供明确的删除确认提示
|
|
|
+**Secondary Risk:** 用户习惯现有表格视图，可能不适应单一树形视图
|
|
|
+**Mitigation:** 保留现有数据筛选和搜索功能，确保树形视图提供足够的信息展示
|
|
|
+**Rollback Plan:** 可以快速恢复表格视图代码，批量删除API可以保留作为可选功能
|
|
|
+
|
|
|
+## Definition of Done
|
|
|
+
|
|
|
+- [ ] 所有 stories 完成且验收标准满足
|
|
|
+- [ ] 现有功能通过测试验证
|
|
|
+- [ ] 集成点正常工作
|
|
|
+- [ ] 文档适当更新
|
|
|
+- [ ] 现有功能无回归
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Story Manager Handoff
|
|
|
+
|
|
|
+"请为这个棕地epic开发详细用户故事。关键考虑：
|
|
|
+
|
|
|
+- 这是对运行在 React + TypeScript + Shadcn/ui 技术栈的现有系统的增强
|
|
|
+- 集成点：现有的 AreasPage、AreaTree、AreaForm 组件，以及需要新增的后端批量删除API
|
|
|
+- 现有模式遵循：Shadcn/ui 设计系统，现有的树形视图交互模式
|
|
|
+- 关键兼容性要求：需要新增批量删除API，其他现有API保持不变
|
|
|
+- 每个故事必须包含验证现有功能保持完整的检查
|
|
|
+- 特别注意：删除功能需要支持删除当前节点及所有子节点，需要后端提供相应的批量删除能力
|
|
|
+
|
|
|
+这个epic应该在保持系统完整性的同时，实现省市区管理用户体验的显著提升。"
|
yourname