📝 docs(story): add story for async loading area tree management page

- create story 006.001 for AreasTreePage component
- define acceptance criteria for async loading tree view
- outline tasks for component implementation and testing
- add technical requirements and project structure details
- specify API integration points and data models
- include testing requirements and user experience guidelines

docs/stories/006.001.story.md

@@ -0,0 +1,117 @@
+# Story 006.001: 创建新的异步加载树形省市区管理页面
+
+## Status
+Draft
+
+## Story
+**As a** 管理员用户，
+**I want** 使用新的异步加载树形省市区管理页面，
+**so that** 我可以更高效地管理省市区数据，避免一次性加载全部数据导致的性能问题。
+
+## Acceptance Criteria
+1. 创建新的 AreasTreePage 组件，专门用于异步加载树形视图
+2. 默认只加载省级节点，使用现有的 `getAreaTree` API 获取省级数据
+3. 页面顶部按钮为"新增省"
+4. 保持现有的搜索和筛选功能
+5. 验证页面初始加载性能提升
+
+## Tasks / Subtasks
+- [ ] 创建新的 AreasTreePage 组件 (web/src/client/admin/pages/AreasTreePage.tsx)
+- [ ] 在 AreasTreePage 中实现省级数据异步加载，使用 `getAreaTreeByLevel` API 获取省级数据
+- [ ] 页面顶部添加"新增省"按钮，集成现有的 AreaForm 组件
+- [ ] 实现搜索和筛选功能，保持与现有 AreasPage 相同的用户体验
+- [ ] 添加页面加载性能测试，验证初始数据量减少
+- [ ] 更新路由配置，添加新的 AreasTreePage 路由路径
+- [ ] 编写单元测试，验证 AreasTreePage 组件功能正常
+- [ ] 编写集成测试，验证异步加载和搜索功能
+
+## Dev Notes
+
+### 技术栈要求
+- **前端框架**: React 19.1.0+，使用函数组件和Hooks [Source: architecture/tech-stack.md#L13]
+- **状态管理**: @tanstack/react-query 5.83.0+，服务端状态管理 [Source: architecture/tech-stack.md#L18]
+- **UI组件库**: shadcn/ui，基于Radix UI的组件库 [Source: architecture/admin-dashboard-standards.md#L26]
+- **HTTP客户端**: 基于Hono Client的封装 [Source: architecture/component-architecture.md#L50]
+
+### 项目结构
+- **新组件位置**: `web/src/client/admin/pages/AreasTreePage.tsx` [Source: architecture/source-tree.md#L127-L136]
+- **现有组件参考**: `web/src/client/admin/pages/Areas.tsx` [Source: architecture/source-tree.md#L129]
+- **树形组件**: `web/src/client/admin/components/AreaTree.tsx` [Source: architecture/source-tree.md#L112]
+- **表单组件**: `web/src/client/admin/components/AreaForm.tsx` [Source: architecture/source-tree.md#L110]
+
+### API 集成
+- **省级数据获取**: 使用现有的 `GET /api/v1/admin/areas/tree/level/1` API [Source: packages/server/src/api/admin/areas/tree.ts#L49-L93]
+- **现有树形API**: `GET /api/v1/admin/areas/tree` 获取完整树形结构 [Source: packages/server/src/api/admin/areas/tree.ts#L8-L47]
+- **子树API**: `GET /api/v1/admin/areas/tree/{id}` 按需加载子树 [Source: packages/server/src/api/admin/areas/tree.ts#L95-L150]
+
+### 数据模型
+- **AreaNode 接口**: 包含 id, name, code, level, parentId, isDisabled, children 等字段 [Source: web/src/client/admin/pages/Areas.tsx#L27-L36]
+- **层级定义**: 1=省/直辖市, 2=市, 3=区/县 [Source: web/src/client/admin/pages/Areas.tsx#L304-L311]
+
+### 状态管理模式
+- **查询参数**: 使用 React Query 管理异步数据加载 [Source: architecture/admin-dashboard-standards.md#L546-L551]
+- **搜索状态**: 实现防抖搜索，300ms延迟 [Source: web/src/client/admin/pages/Areas.tsx#L186-L193]
+- **筛选状态**: 支持层级、状态等筛选条件 [Source: web/src/client/admin/pages/Areas.tsx#L76-L89]
+
+### 组件交互
+- **AreaTree 组件**: 现有的树形展示组件，需要修改支持异步加载 [Source: web/src/client/admin/components/AreaTree.tsx#L17-L24]
+- **AreaForm 组件**: 现有的表单组件，支持省市区三级联动 [Source: web/src/client/admin/pages/Areas.tsx#L559-L565]
+- **Dialog 组件**: 使用 shadcn/ui 对话框组件 [Source: web/src/client/admin/pages/Areas.tsx#L551-L565]
+
+### 性能优化
+- **初始加载**: 只加载省级数据，减少初始数据量
+- **按需加载**: 点击节点时异步加载子节点数据
+- **缓存策略**: 使用 React Query 缓存已加载的数据
+- **防抖搜索**: 避免频繁搜索请求
+
+### 测试要求
+- **单元测试位置**: `web/tests/unit/client/admin/pages/AreasTreePage.test.tsx` [Source: architecture/testing-strategy.md#L27]
+- **集成测试位置**: `web/tests/integration/client/admin/pages/AreasTreePage.test.tsx` [Source: architecture/testing-strategy.md#L37]
+- **测试框架**: Vitest + Testing Library [Source: architecture/testing-strategy.md#L29]
+- **覆盖率目标**: ≥ 80% 单元测试覆盖率 [Source: architecture/testing-strategy.md#L30]
+
+### 用户体验
+- **加载状态**: 显示异步加载进度指示器
+- **错误处理**: 统一的错误提示和重试机制
+- **操作反馈**: 使用 Sonner toast 通知操作结果 [Source: architecture/admin-dashboard-standards.md#L33]
+- **响应式设计**: 支持桌面端和移动端 [Source: architecture/admin-dashboard-standards.md#L508-L523]
+
+### 项目结构对齐
+- **新页面位置**: `web/src/client/admin/pages/AreasTreePage.tsx` 符合现有页面组织模式
+- **组件复用**: 复用现有的 AreaTree、AreaForm 等组件
+- **API 集成**: 使用现有的 areaClient RPC 客户端
+- **样式规范**: 遵循 Tailwind CSS 和 shadcn/ui 设计系统
+
+## Testing
+
+### 测试标准
+- **测试文件位置**: `web/tests/unit/client/admin/pages/AreasTreePage.test.tsx` [Source: architecture/testing-strategy.md#L27]
+- **测试框架**: Vitest + Testing Library [Source: architecture/testing-strategy.md#L29]
+- **测试模式**: 使用 Happy DOM 环境进行前端组件测试 [Source: architecture/testing-strategy.md#L97-L106]
+- **覆盖率要求**: 核心业务逻辑 ≥ 80% [Source: architecture/testing-strategy.md#L30]
+
+### 关键测试场景
+- 组件渲染和省级数据加载
+- 异步加载子节点功能
+- 搜索和筛选功能
+- 新增省市区操作
+- 错误处理和重试机制
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|---------|
+| 2025-10-28 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
+
+## Dev Agent Record
+*此部分将由开发代理在实施过程中填写*
+
+### Agent Model Used
+
+### Debug Log References
+
+### Completion Notes List
+
+### File List
+
+## QA Results
+*此部分将由QA代理在质量保证过程中填写*