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

docs(story): 批准故事014.002 - yongren模块页面分包

- 将故事014.002状态更新为Approved
- 完成故事草案和检查清单验证

Generated with [Claude Code](https://claude.com/claude-code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 1 месяц назад
Родитель
Сommit
79566abf0a
1 измененных файлов с 209 добавлено и 0 удалено
  1. 209 0
      docs/stories/014.002.story.md

+ 209 - 0
docs/stories/014.002.story.md

@@ -0,0 +1,209 @@
+# Story 014.002: 将yongren模块页面拆分为独立包
+
+## Status
+Approved
+
+## Story
+**作为** mini小程序开发者,
+**我希望** 将yongren模块的页面拆分为独立的UI包,
+**以便** 提高代码的模块化程度,便于独立测试和部署,提升项目的可维护性。
+
+## Acceptance Criteria
+1. 5个页面包创建成功,结构清晰
+2. 所有页面功能正常,无回归
+3. 页面包可以独立构建和测试
+4. mini项目路由配置更新成功
+5. 页面间跳转和状态管理正常
+6. 包体积和构建时间得到优化
+
+## Tasks / Subtasks
+- [ ] 任务1:分析yongren模块页面结构 (验收标准: 1)
+  - [ ] 识别各页面的依赖关系
+  - [ ] 分析页面间共享的组件和逻辑
+  - [ ] 确定分包方案
+- [ ] 任务2:创建独立的页面包 (验收标准: 1, 3)
+  - [ ] 创建 `mini-ui-packages/yongren-dashboard-ui`:仪表板页面包
+  - [ ] 创建 `mini-ui-packages/yongren-order-management-ui`:订单管理相关页面包
+  - [ ] 创建 `mini-ui-packages/yongren-talent-management-ui`:人才管理相关页面包
+  - [ ] 创建 `mini-ui-packages/yongren-settings-ui`:设置页面包
+  - [ ] 创建 `mini-ui-packages/yongren-statistics-ui`:统计页面包
+  - [ ] 为每个包配置独立的package.json
+  - [ ] 为每个包配置TypeScript配置
+  - [ ] 为每个包配置测试配置
+- [ ] 任务3:迁移页面代码 (验收标准: 1, 2)
+  - [ ] 将页面组件、配置文件、样式迁移到对应包
+  - [ ] 处理页面间的共享依赖
+  - [ ] 更新导入路径
+- [ ] 任务4:更新mini项目路由配置 (验收标准: 4, 5)
+  - [ ] 更新app.config.ts中的页面导入路径
+  - [ ] 验证路由跳转正常
+  - [ ] 确保TabBar等布局组件正常工作
+- [ ] 任务5:验证功能和无回归 (验收标准: 2, 5, 6)
+  - [ ] 运行mini项目类型检查,确保无TypeScript错误
+  - [ ] 运行页面功能测试,验证所有功能正常
+  - [ ] 验证页面间跳转和状态管理正常
+  - [ ] 分析包体积和构建时间变化
+
+## 开发说明
+
+### 先前故事洞察
+- 故事014.001创建了`mini-shared-ui-components`包,为Taro组件提供了共享UI组件包 [来源:docs/stories/014.001.mini-shared-ui-components.md]
+- mini项目使用Taro 4.1.4 + React 18,与其他项目使用的React 19不同 [来源:docs/architecture/tech-stack.md#现有技术栈维护]
+- 已建立可复用的测试基础设施,包含在`mini-shared-ui-components/testing`导出中 [来源:docs/stories/014.001.mini-shared-ui-components.md#任务3]
+
+### 数据模型
+UI页面包不需要特定的数据模型。[来源:docs/architecture/data-model-schema-changes.md#现有数据模型状态]
+
+### API规范
+UI页面包需要包含API客户端,用于RPC类型推断,遵循与后台管理UI包相同的模式:
+- **RPC客户端管理器**:每个页面包需要实现自己的RPC客户端管理器,参考`packages/advertisement-management-ui/src/api/advertisementClient.ts`的模式
+- **RPC客户端工具**:从`@d8d/mini-shared-ui-components`导入`createRpcClient`工具
+- **后端路由类型**:导入相应后端模块包中的路由类型(如`EnterpriseCompanyRoutes`、`EnterpriseAuthRoutes`等)
+- **类型推断**:通过RPC类型推断获得类型安全,而不是直接导入schema类型
+
+### 组件规范
+- **现有页面结构**:yongren模块页面位于 `mini/src/pages/yongren/` 目录下 [来源:docs/architecture/source-tree.md#实际项目结构]
+- **页面类型**:dashboard, order, settings, statistics, talent
+- **Taro框架**:页面必须适配Taro页面API和组件系统 [来源:docs/architecture/tech-stack.md#现有技术栈维护]
+- **样式方案**:使用Tailwind CSS配合weapp-tailwindcss适配小程序 [来源:docs/architecture/tech-stack.md#现有技术栈维护]
+- **布局组件**:使用YongrenTabBarLayout等布局组件
+- **UI包开发规范**:必须遵循UI包开发规范 [来源:docs/architecture/coding-standards.md#ui包开发提示]
+
+#### UI包结构规范(基于UI包开发规范)
+**标准目录结构**:
+```
+mini-ui-packages/<package-name>/
+├── package.json                    # 包配置
+├── tsconfig.json                   # TypeScript配置
+├── src/
+│   ├── index.ts                    # 主入口文件
+│   ├── components/                 # React组件
+│   │   ├── <ComponentName>.tsx     # 组件实现
+│   │   ├── <ComponentName>.test.tsx # 组件测试
+│   │   └── index.ts                # 组件导出
+│   ├── api/                        # API客户端(必需)
+│   │   ├── <module>Client.ts       # RPC客户端管理器
+│   │   └── index.ts                # API导出
+│   ├── types/                      # TypeScript类型定义
+│   │   ├── index.ts                # 类型导出
+│   │   └── <type>.ts               # 具体类型定义
+│   └── utils/                      # 工具函数
+│       └── index.ts                # 工具导出
+├── tests/                         # 测试文件
+│   └── integration/                # 集成测试
+└── README.md                       # 包文档
+```
+
+**注意**:页面包通常不需要自定义hooks目录,因为现有的页面组件直接在组件内部使用React Query,没有抽取到独立的hooks中。
+
+**API客户端实现要求**:
+1. **必需性**:每个页面包必须包含API客户端,用于RPC类型推断
+2. **客户端模式**:参考现有后台管理UI包的模式(如`packages/advertisement-management-ui/src/api/advertisementClient.ts`)
+3. **导入来源**:从`@d8d/mini-shared-ui-components`导入RPC客户端工具(`createRpcClient`)
+4. **路由类型**:导入相应后端模块包中的路由类型(如`EnterpriseCompanyRoutes`、`EnterpriseAuthRoutes`等)
+5. **单例模式**:使用客户端管理器单例模式管理RPC客户端生命周期
+6. **类型推断**:通过RPC类型推断获得类型安全,而不是直接导入schema类型
+
+**package.json配置参考**:
+- 参考 `mini-ui-packages/mini-shared-ui-components/package.json` 的Taro兼容配置
+- 使用React 18(与Taro兼容),而不是React 19
+- 依赖 `@d8d/mini-shared-ui-components` 作为共享UI组件基础
+- 遵循workspace:*依赖版本
+
+**关键差异**:
+- 页面包必须包含完整的RPC客户端管理器,用于RPC类型推断(参考后台管理UI包模式)
+- 页面包通常不需要自定义hooks目录,因为现有的页面组件直接在组件内部使用React Query
+- 需要处理页面配置(.config.ts文件)
+- 需要确保与Taro页面路由系统的兼容性
+- 需要导入相应后端模块的路由类型进行类型推断
+
+### 文件位置
+- **源页面位置**:`mini/src/pages/yongren/` [来源:docs/architecture/source-tree.md#实际项目结构]
+- **新包位置**:`mini-ui-packages/` 目录下创建各个页面包
+- **具体页面文件**:
+  1. **仪表板页面**:`mini/src/pages/yongren/dashboard/index.tsx` 和 `index.css`
+  2. **订单列表页面**:`mini/src/pages/yongren/order/list/index.tsx` 和相关文件
+  3. **订单详情页面**:`mini/src/pages/yongren/order/detail/index.tsx` 和相关文件
+  4. **人才列表页面**:`mini/src/pages/yongren/talent/list/index.tsx` 和相关文件
+  5. **人才详情页面**:`mini/src/pages/yongren/talent/detail/index.tsx` 和相关文件
+  6. **统计页面**:`mini/src/pages/yongren/statistics/index.tsx` 和相关文件
+  7. **设置页面**:`mini/src/pages/yongren/settings/index.tsx` 和相关文件
+
+**页面包结构示例**(yongren-dashboard-ui):
+```
+mini-ui-packages/yongren-dashboard-ui/
+├── package.json
+├── tsconfig.json
+├── src/
+│   ├── index.ts                    # 导出Dashboard页面组件
+│   ├── Dashboard.tsx               # 仪表板页面组件
+│   ├── Dashboard.config.ts         # 页面配置
+│   ├── Dashboard.css               # 页面样式
+│   └── utils/                      # 页面工具函数
+└── tests/
+    └── Dashboard.test.tsx          # 页面测试
+```
+
+**路由配置更新**:
+- 当前路由配置在 `mini/src/app.config.ts` 的 `pages` 数组中
+- 需要将页面路径从 `pages/yongren/dashboard/index` 更新为从包中导入的路径
+- TabBar配置也需要相应更新
+
+### 测试要求
+- **测试框架**:Jest(mini项目使用Jest)[来源:docs/architecture/coding-standards.md#现有标准合规性]
+- **测试位置**:`tests/`文件夹与源码并行 [来源:docs/architecture/coding-standards.md#增强特定标准]
+- **覆盖率目标**:核心业务逻辑 > 80% [来源:docs/architecture/coding-standards.md#增强特定标准]
+- **测试类型**:组件单元测试、页面集成测试
+- **可复用测试基础设施**:使用 `@d8d/mini-shared-ui-components/testing` 导出的测试工具 [来源:docs/stories/014.001.mini-shared-ui-components.md#任务3]
+- **测试选择器优化**:必须为关键交互元素添加`data-testid`属性 [来源:docs/architecture/ui-package-standards.md#测试选择器优化规范]
+
+### 技术约束
+- **Taro版本**:4.1.4
+- **React版本**:18 (mini项目) 与其他项目的React 19不同 [来源:docs/architecture/tech-stack.md#现有技术栈维护]
+- **包管理**:pnpm workspace [来源:docs/architecture/source-tree.md#集成指南]
+- **TypeScript**:严格模式启用 [来源:docs/architecture/coding-standards.md#现有标准合规性]
+- **构建系统**:Workspace包引用,无需单独的构建步骤
+- **样式兼容性**:必须确保Tailwind CSS + weapp-tailwindcss样式兼容性
+
+### 项目结构说明
+- 当前项目使用monorepo结构,`packages/`目录用于共享包 [来源:docs/architecture/source-tree.md#实际项目结构]
+- 史诗指定创建`mini-ui-packages/`目录来组织所有mini相关的UI包
+- 这与项目中建立的模块化架构模式一致
+- 需要确保新目录遵循现有的workspace配置模式
+- 页面包应该遵循现有的UI包开发规范 [来源:docs/architecture/ui-package-standards.md]
+
+## 测试
+
+### 测试标准
+- **测试文件位置**:`tests/`文件夹与源码并行 [来源:docs/architecture/coding-standards.md#增强特定标准]
+- **测试标准**:遵循mini项目中现有的测试模式 (Jest)
+- **测试框架**:mini项目组件使用Jest [来源:docs/architecture/coding-standards.md#现有标准合规性]
+- **特定要求**:
+  - 所有迁移的页面组件的组件单元测试
+  - 页面功能集成测试
+  - 与现有的mini项目测试套件集成
+  - 遵循UI包测试标准 [来源:docs/architecture/ui-package-standards.md#测试规范]
+  - 使用可复用的测试基础设施(来自`mini-shared-ui-components/testing`)
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-12-19 | 1.0 | Initial story creation | Scrum Master Bob |
+
+## Dev Agent Record
+*This section is populated by the development agent during implementation*
+
+### Agent Model Used
+{{agent_model_name_version}}
+
+### Debug Log References
+*Reference any debug logs or traces generated during development*
+
+### Completion Notes List
+*Notes about the completion of tasks and any issues encountered*
+
+### File List
+*List all files created, modified, or affected during story implementation*
+
+## QA Results
+*Results from QA Agent QA review of the completed story implementation*