|
@@ -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*
|