Story 014.002: 将yongren模块页面拆分为独立包

Status

Approved

Story

作为 mini小程序开发者， 我希望 将yongren模块的页面拆分为独立的UI包，以便提高代码的模块化程度，便于独立测试和部署，提升项目的可维护性。

Acceptance Criteria

5个页面包创建成功，结构清晰
所有页面功能正常，无回归
页面包可以独立构建和测试
mini项目路由配置更新成功
页面间跳转和状态管理正常
包体积和构建时间得到优化

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：统计页面包
- 创建 mini-ui-packages/mini-enterprise-auth-ui：企业认证UI包（将包含企业登录页和profile页面）
- 创建 mini-ui-packages/yongren-shared-ui：用人模块共享UI组件包
- 为每个包配置独立的package.json
- 为每个包配置TypeScript配置
- 为每个包配置测试配置
任务3：迁移页面代码 (验收标准: 1, 2)
- 将页面组件、配置文件、样式迁移到对应包（已完成dashboard、settings、order、talent、statistics页面）
- 处理页面间的共享依赖（通过创建mini-enterprise-auth-ui和yongren-shared-ui包解决）
- 更新导入路径（已更新路由类型导入和组件导入路径）
- 迁移企业登录页和profile页面到mini-enterprise-auth-ui包
任务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包需求

在迁移yongren模块页面时，发现所有页面都依赖相同的认证hooks（useAuth和useRequireAuth）。为保持代码复用性和一致性，需要创建专门的mini-enterprise-auth-ui包来提供这些共享的认证功能：

包名称: @d8d/mini-enterprise-auth-ui
主要功能: 提供企业用户认证相关的React hooks和上下文
核心hooks:
- useAuth(): 提供当前用户信息、登录、登出、注册功能
- useRequireAuth(): 路由保护hook，未登录用户重定向到登录页
依赖关系: 依赖@d8d/mini-shared-ui-components的RPC客户端工具和@d8d/server的路由类型
集成方式: 所有yongren页面包将依赖此包，而不是直接从mini项目导入认证hooks
页面组件: 包含企业登录页（Login）和用户资料页（Profile）页面组件

数据模型

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工具
后端路由类型：导入相应后端模块包中的路由对象（如从@d8d/allin-company-module导入companyEnterpriseRoutes，从@d8d/allin-disability-module导入personExtensionRoutes，从@d8d/core-module/auth-module导入enterpriseAuthRoutes），使用typeof获取类型。注意：与之前从@d8d/server统一导入路由类型不同，现在改为从各自的后端模块包中导入对应的路由对象，这样更加清晰和便于维护。
类型推断：通过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客户端实现要求：

必需性：每个页面包必须包含API客户端，用于RPC类型推断
客户端模式：参考现有后台管理UI包的模式（如packages/advertisement-management-ui/src/api/advertisementClient.ts）
导入来源：从@d8d/mini-shared-ui-components导入RPC客户端工具（createRpcClient）
路由类型：导入相应后端模块包中的路由对象（如从@d8d/allin-company-module导入companyEnterpriseRoutes，从@d8d/allin-disability-module导入personExtensionRoutes，从@d8d/core-module/auth-module导入enterpriseAuthRoutes），使用typeof获取类型。注意：与之前从@d8d/server统一导入路由类型不同，现在改为从各自的后端模块包中导入对应的路由对象，这样更加清晰和便于维护。
单例模式：使用客户端管理器单例模式管理RPC客户端生命周期
类型推断：通过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:*依赖版本

包导出规范（细粒度路径导出）：

目的：避免整包导入和名称冲突，提供精确的导入路径
参考模式：参考 packages/shared-ui-components/package.json 的细粒度路径导出配置
实现方式：在package.json的exports字段中为每个UI组件提供独立的导出路径

示例配置：

"exports": {
".": {
  "types": "./src/index.ts",
  "import": "./src/index.ts",
  "require": "./src/index.ts"
},
"./components/button": {
  "types": "./src/components/button.tsx",
  "import": "./src/components/button.tsx",
  "require": "./src/components/button.tsx"
},
"./components/card": {
  "types": "./src/components/card.tsx",
  "import": "./src/components/card.tsx",
  "require": "./src/components/card.tsx"
},
"./components/dialog": {
  "types": "./src/components/dialog.tsx",
  "import": "./src/components/dialog.tsx",
  "require": "./src/components/dialog.tsx"
},
"./components/form": {
  "types": "./src/components/form.tsx",
  "import": "./src/components/form.tsx",
  "require": "./src/components/form.tsx"
},
"./components/tab-bar": {
  "types": "./src/components/tab-bar.tsx",
  "import": "./src/components/tab-bar.tsx",
  "require": "./src/components/tab-bar.tsx"
},
"./testing": {
  "types": "./src/testing/index.ts",
  "import": "./src/testing/index.ts",
  "require": "./src/testing/index.ts"
}
}

使用方式：消费者可以通过 import { Button } from '@d8d/mini-shared-ui-components/components/button' 精确导入特定组件
优势：
1. 减少包体积：只导入需要的组件，避免不必要的代码被包含
2. 避免名称冲突：不同包中的同名组件可以通过不同路径区分
3. 提高可维护性：清晰的导入路径便于理解和重构
4. 更好的Tree-shaking：构建工具可以更有效地消除未使用代码

关键差异：

页面包必须包含完整的RPC客户端管理器，用于RPC类型推断（参考后台管理UI包模式）
页面包通常不需要自定义hooks目录，因为现有的页面组件直接在组件内部使用React Query
需要处理页面配置（.config.ts文件）
需要确保与Taro页面路由系统的兼容性
需要导入相应后端模块的路由对象（如companyEnterpriseRoutes、personExtensionRoutes、enterpriseAuthRoutes），使用typeof获取类型进行类型推断。注意：与之前从@d8d/server统一导入路由类型不同，现在改为从各自的后端模块包中导入对应的路由对象，这样更加清晰和便于维护。

文件位置

源页面位置：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

claude-sonnet

Debug Log References

Reference any debug logs or traces generated during development

Completion Notes List

任务1已完成：分析了yongren模块页面结构。
任务2已完成：创建了6个独立的页面包基础结构（包括5个yongren页面包和1个企业认证UI包），所有包都配置了package.json、tsconfig.json、jest.config.cjs。
任务3已完成：所有页面迁移完成，包括dashboard、settings、order、talent、statistics页面，并修复了导入路径和类型错误。
处理了共享依赖：将YongrenTabBarLayout布局组件迁移到@d8d/mini-shared-ui-components包中并导出。
创建了企业认证UI包（@d8d/mini-enterprise-auth-ui），包含useAuth、useRequireAuth等认证hooks，解决了页面包的认证依赖问题。
每个页面包已创建基本的API客户端结构（dashboard包已实现enterpriseCompanyClient，认证包已实现enterpriseAuthClient）。
创建了yongren-shared-ui包，专门存放yongren模块的共享组件。
实现了细粒度路径导出：更新了mini-shared-ui-components包的导出配置，移除了所有UI组件的批量导出，改为通过路径导入。
更新了路由类型导入方式：从各自后端模块包导入路由对象，而不是统一从@d8d/server导入。
修复了所有类型检查错误，包括hono依赖、AuthContextType导出、导入路径错误等。
更新了所有UI包的tsconfig.json，将moduleResolution改为"bundler"以支持路径导入。
安装了依赖并验证了类型检查通过。
迁移了企业登录页和profile页面到mini-enterprise-auth-ui包，并修复了相关类型检查错误。
完成任务4：更新mini项目路由配置，为所有页面创建桥接文件，保持路由路径不变。

File List

新建文件：

mini-ui-packages/yongren-dashboard-ui/package.json
mini-ui-packages/yongren-dashboard-ui/tsconfig.json
mini-ui-packages/yongren-dashboard-ui/jest.config.cjs
mini-ui-packages/yongren-dashboard-ui/src/Dashboard.tsx
mini-ui-packages/yongren-dashboard-ui/src/Dashboard.config.ts
mini-ui-packages/yongren-dashboard-ui/src/Dashboard.css
mini-ui-packages/yongren-dashboard-ui/src/api/enterpriseCompanyClient.ts
mini-ui-packages/yongren-dashboard-ui/src/api/index.ts
mini-ui-packages/yongren-dashboard-ui/src/index.ts
mini-ui-packages/yongren-order-management-ui/package.json
mini-ui-packages/yongren-order-management-ui/tsconfig.json
mini-ui-packages/yongren-order-management-ui/jest.config.cjs
mini-ui-packages/yongren-order-management-ui/src/OrderList.tsx
mini-ui-packages/yongren-order-management-ui/src/OrderList.config.ts
mini-ui-packages/yongren-order-management-ui/src/OrderDetail.tsx
mini-ui-packages/yongren-order-management-ui/src/OrderDetail.config.ts
mini-ui-packages/yongren-talent-management-ui/package.json
mini-ui-packages/yongren-talent-management-ui/tsconfig.json
mini-ui-packages/yongren-talent-management-ui/jest.config.cjs
mini-ui-packages/yongren-settings-ui/package.json
mini-ui-packages/yongren-settings-ui/tsconfig.json
mini-ui-packages/yongren-settings-ui/jest.config.cjs
mini-ui-packages/yongren-settings-ui/src/Settings.tsx
mini-ui-packages/yongren-settings-ui/src/Settings.config.ts
mini-ui-packages/yongren-settings-ui/src/index.ts
mini-ui-packages/yongren-statistics-ui/package.json
mini-ui-packages/yongren-statistics-ui/tsconfig.json
mini-ui-packages/yongren-statistics-ui/jest.config.cjs
mini-ui-packages/mini-enterprise-auth-ui/package.json
mini-ui-packages/mini-enterprise-auth-ui/tsconfig.json
mini-ui-packages/mini-enterprise-auth-ui/jest.config.cjs
mini-ui-packages/mini-enterprise-auth-ui/src/api/enterpriseAuthClient.ts
mini-ui-packages/mini-enterprise-auth-ui/src/api/index.ts
mini-ui-packages/mini-enterprise-auth-ui/src/hooks/useAuth.tsx
mini-ui-packages/mini-enterprise-auth-ui/src/hooks/useRequireAuth.ts
mini-ui-packages/mini-enterprise-auth-ui/src/hooks/index.ts
mini-ui-packages/mini-enterprise-auth-ui/src/index.ts
mini-ui-packages/mini-enterprise-auth-ui/src/pages/login/Login.tsx
mini-ui-packages/mini-enterprise-auth-ui/src/pages/login/Login.config.ts
mini-ui-packages/mini-enterprise-auth-ui/src/pages/login/Login.css
mini-ui-packages/mini-enterprise-auth-ui/src/pages/profile/Profile.tsx
mini-ui-packages/mini-enterprise-auth-ui/src/pages/profile/Profile.config.ts
mini-ui-packages/mini-enterprise-auth-ui/src/pages/profile/Profile.css
mini-ui-packages/mini-enterprise-auth-ui/src/types/minio.ts
mini-ui-packages/mini-shared-ui-components/src/yongren-tab-bar-layout.tsx

修改文件：

docs/stories/014.002.story.md (任务状态更新)
mini-ui-packages/mini-shared-ui-components/src/index.ts (导出YongrenTabBarLayout)
mini-ui-packages/mini-enterprise-auth-ui/package.json (添加依赖和导出配置)
mini-ui-packages/mini-enterprise-auth-ui/src/index.ts (添加页面导出)
mini/src/pages/login/index.tsx, index.config.ts, index.css (桥接文件)
mini/src/pages/profile/index.tsx, index.config.ts, index.css (桥接文件)
mini/src/pages/yongren/dashboard/index.tsx, index.config.ts, index.css (桥接文件)
mini/src/pages/yongren/talent/list/index.tsx, index.css (桥接文件)
mini/src/pages/yongren/talent/detail/index.tsx, index.css (桥接文件)
mini/src/pages/yongren/order/list/index.tsx, index.config.ts (桥接文件)
mini/src/pages/yongren/order/detail/index.tsx (桥接文件)
mini/src/pages/yongren/statistics/index.tsx (桥接文件)
mini/src/pages/yongren/settings/index.tsx, index.config.ts (桥接文件)
pnpm-lock.yaml (依赖更新)

QA Results

Results from QA Agent QA review of the completed story implementation

014.002.story.md 21 KB Geçmiş Ham