Просмотр исходного кода

📝 docs(prd): update area management UX improvement documentation

- update smart add functionality description: redesign AreaForm component, remove level and parent selection fields
- adjust story structure: merge story 2's async loading mechanism into story 1
- update task list: add AreaTreeAsync component creation and subtree loading implementation
- add verification item for form design optimization: remove level and parent selection fields, implement smart pre-filling
- update technical implementation details: clarify component creation and API usage
- update task status: mark AreaTreeAsync component and subtree loading mechanism as completed
yourname 3 месяцев назад
Родитель
Сommit
e0d188a997
2 измененных файлов с 34 добавлено и 11 удалено
  1. 19 9
      docs/prd/epic-006-area-management-ux-improvement.md
  2. 15 2
      docs/stories/006.001.story.md

+ 19 - 9
docs/prd/epic-006-area-management-ux-improvement.md

@@ -48,7 +48,11 @@
 3. **优化新增操作** - 在新的树形页面中支持智能新增功能
    - 页面顶部按钮为"新增省"
    - 在树形结构中直接新增市和区:省级节点显示"新增市"按钮,市级节点显示"新增区"按钮
-   - AreaForm 组件支持智能预填层级和父级信息
+   - 重新设计 AreaForm 组件,移除层级和父级选择字段
+   - 智能预填层级和父级信息:
+     - 页面顶部"新增省":层级自动为"省/直辖市",无父级
+     - 省级节点"新增市":层级自动为"市",父级自动为当前省份
+     - 市级节点"新增区":层级自动为"区/县",父级自动为当前城市
 
 4. **增强删除功能** - 支持删除当前节点及所有子节点
    - 后端新增批量删除API:`DELETE /areas/:id/with-children`
@@ -89,31 +93,34 @@
    - 创建新的 AreasTreePage 组件,专门用于异步加载树形视图
    - 默认只加载省级节点,使用现有的 `getAreaTree` API 获取省级数据
    - 页面顶部按钮为"新增省"
-   - 保持现有的搜索和筛选功能
-   - 验证页面初始加载性能提升
-
-2. **Story 2:** 实现树形节点的异步加载机制
-   - 修改 AreaTree 组件的节点展开逻辑,支持按需加载子节点
+   - ~~保持现有的搜索和筛选功能~~ (已移除 - 搜索筛选功能在当前异步加载架构中无效)
+   - 实现树形节点的异步加载机制,支持按需加载子节点
    - 使用现有的 `getSubTree` API 按需加载子树
    - 添加加载状态指示器,显示异步加载过程
    - 实现错误处理和重试机制
    - 验证异步加载功能正常工作
+   - 验证页面初始加载性能提升
 
-3. **Story 3:** 实现智能新增和删除功能
+2. **Story 2:** 实现智能新增和删除功能
    - 在树形结构中直接新增市和区:省级节点显示"新增市"按钮,市级节点显示"新增区"按钮
+   - 重新设计 AreaForm 组件,移除层级和父级选择字段
+   - 智能预填层级和父级信息:
+     - 页面顶部"新增省":层级自动为"省/直辖市",无父级
+     - 省级节点"新增市":层级自动为"市",父级自动为当前省份
+     - 市级节点"新增区":层级自动为"区/县",父级自动为当前城市
    - 后端新增批量删除API:`DELETE /areas/:id/with-children`
    - 前端调用新的批量删除API,支持递归删除子节点
    - 删除确认对话框显示准确的子节点数量
    - 验证新增和删除功能正常工作
 
-4. **Story 4:** 优化数据缓存和状态管理
+3. **Story 3:** 优化数据缓存和状态管理
    - 使用 TanStack Query 管理异步加载状态和缓存
    - 保持已加载节点的状态,避免重复请求
    - 确保现有 CRUD 操作功能保持正常
    - 验证搜索和筛选功能不受影响
    - 验证所有现有功能通过回归测试
 
-5. **Story 5:** 清理原有代码
+4. **Story 4:** 清理原有代码
    - 删除原有的 Areas.tsx 文件 (web/src/client/admin/pages/Areas.tsx)
    - 更新路由配置,指向新的 AreasTreePage 组件
    - 验证所有功能迁移完成,无功能缺失
@@ -149,6 +156,7 @@
 - [ ] 后端批量删除API正常工作,保持事务一致性
 - [ ] 异步加载功能正常工作,显示加载状态指示器
 - [ ] 智能新增功能正常工作:页面顶部"新增省"按钮,节点上"新增市/区"按钮
+- [ ] 表单设计优化:移除层级和父级选择字段,智能预填层级和父级信息
 - [ ] 原有 Areas.tsx 文件已删除,路由配置已更新
 - [ ] 文档适当更新:更新相关组件文档
 - [ ] 现有功能无回归:所有现有功能通过回归测试
@@ -171,6 +179,8 @@
   - 修改 AreaTree 组件的节点展开逻辑,支持按需加载子节点
   - 使用现有的 `getSubTree` API 按需加载子树
   - 页面顶部按钮为"新增省",节点上支持"新增市/区"按钮
+  - 重新设计 AreaForm 组件,移除层级和父级选择字段
+  - 智能预填层级和父级信息:页面顶部"新增省"自动为省/直辖市,省级节点"新增市"自动为市,市级节点"新增区"自动为区/县
   - 后端需要新增批量删除API:`DELETE /areas/:id/with-children`
   - 利用现有的 TanStack Query 缓存机制管理异步加载状态
   - 完成后删除原有的 Areas.tsx 文件,更新路由配置

+ 15 - 2
docs/stories/006.001.story.md

@@ -13,13 +13,22 @@ Draft
 2. 默认只加载省级节点,使用现有的 `getAreaTreeByLevel` API 获取省级数据
 3. 页面顶部按钮为"新增省"
 4. ~~保持现有的搜索和筛选功能~~ (已移除 - 搜索筛选功能在当前异步加载架构中无效)
-5. 验证页面初始加载性能提升
+5. 实现树形节点的异步加载机制,支持按需加载子节点
+6. 使用现有的 `getSubTree` API 按需加载子树
+7. 添加加载状态指示器,显示异步加载过程
+8. 实现错误处理和重试机制
+9. 验证异步加载功能正常工作
+10. 验证页面初始加载性能提升
 
 ## Tasks / Subtasks
 - [x] 创建新的 AreasTreePage 组件 (web/src/client/admin/pages/AreasTreePage.tsx)
 - [x] 在 AreasTreePage 中实现省级数据异步加载,使用 `getAreaTreeByLevel` API 获取省级数据
 - [x] 页面顶部添加"新增省"按钮,集成现有的 AreaForm 组件
 - [x] ~~实现搜索和筛选功能,保持与现有 AreasPage 相同的用户体验~~ (已移除 - 搜索筛选功能在当前异步加载架构中无效)
+- [x] 创建 AreaTreeAsync 组件,支持按需加载子节点 (web/src/client/admin/components/AreaTreeAsync.tsx)
+- [x] 实现子树加载机制,使用 `getSubTree` API 按需加载子树
+- [x] 添加加载状态指示器,显示异步加载过程
+- [ ] 实现错误处理和重试机制
 - [ ] 添加页面加载性能测试,验证初始数据量减少
 - [ ] 更新路由配置,添加新的 AreasTreePage 路由路径
 - [ ] 编写单元测试,验证 AreasTreePage 组件功能正常
@@ -117,7 +126,10 @@ Claude Sonnet 4.5
 - ✅ 实现了省级数据异步加载
 - ✅ 添加了"新增省"按钮
 - ✅ 移除了无效的搜索筛选功能
-- 🔄 待完成:性能测试、路由配置、单元测试、集成测试
+- ✅ 创建了 AreaTreeAsync 组件,支持按需加载子节点
+- ✅ 实现了子树加载机制,使用 `getSubTree` API
+- ✅ 添加了加载状态指示器
+- 🔄 待完成:错误处理和重试机制、性能测试、路由配置、单元测试、集成测试
 
 ### File List
 - **新增文件**: `web/src/client/admin/pages/AreasTreePage.tsx`
@@ -131,6 +143,7 @@ Claude Sonnet 4.5
 - 移除了状态筛选功能
 - 清理了相关UI组件和导入
 - 专注于异步树形加载的核心功能
+- 合并了故事2的异步加载功能到故事1
 
 ## QA Results
 *此部分将由QA代理在质量保证过程中填写*