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

## Status
Approved

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

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

## Tasks / Subtasks
- [x] 任务1：分析yongren模块页面结构 (验收标准: 1)
  - [x] 识别各页面的依赖关系
  - [x] 分析页面间共享的组件和逻辑
  - [x] 确定分包方案
- [x] 任务2：创建独立的页面包 (验收标准: 1, 3)
  - [x] 创建 `mini-ui-packages/yongren-dashboard-ui`：仪表板页面包
  - [x] 创建 `mini-ui-packages/yongren-order-management-ui`：订单管理相关页面包
  - [x] 创建 `mini-ui-packages/yongren-talent-management-ui`：人才管理相关页面包
  - [x] 创建 `mini-ui-packages/yongren-settings-ui`：设置页面包
  - [x] 创建 `mini-ui-packages/yongren-statistics-ui`：统计页面包
  - [x] 创建 `mini-ui-packages/mini-enterprise-auth-ui`：企业认证UI包（将包含企业登录页和profile页面）
  - [x] 创建 `mini-ui-packages/yongren-shared-ui`：用人模块共享UI组件包
  - [x] 为每个包配置独立的package.json
  - [x] 为每个包配置TypeScript配置
  - [x] 为每个包配置测试配置
- [x] 任务3：迁移页面代码 (验收标准: 1, 2)
  - [x] 将页面组件、配置文件、样式迁移到对应包（已完成dashboard、settings、order、talent、statistics页面）
  - [x] 处理页面间的共享依赖（通过创建mini-enterprise-auth-ui和yongren-shared-ui包解决）
  - [x] 更新导入路径（已更新路由类型导入和组件导入路径）
  - [x] 迁移企业登录页和profile页面到mini-enterprise-auth-ui包
- [x] 任务4：更新mini项目路由配置 (验收标准: 4, 5)
  - [x] 更新app.config.ts中的页面导入路径
  - [x] 验证路由跳转正常
  - [x] 确保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客户端实现要求**：
1. **必需性**：每个页面包必须包含API客户端，用于RPC类型推断
2. **客户端模式**：参考现有后台管理UI包的模式（如`packages/advertisement-management-ui/src/api/advertisementClient.ts`）
3. **导入来源**：从`@d8d/mini-shared-ui-components`导入RPC客户端工具（`createRpcClient`）
4. **路由类型**：导入相应后端模块包中的路由对象（如从`@d8d/allin-company-module`导入`companyEnterpriseRoutes`，从`@d8d/allin-disability-module`导入`personExtensionRoutes`，从`@d8d/core-module/auth-module`导入`enterpriseAuthRoutes`），使用`typeof`获取类型。**注意**：与之前从`@d8d/server`统一导入路由类型不同，现在改为从各自的后端模块包中导入对应的路由对象，这样更加清晰和便于维护。
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:*依赖版本

**包导出规范（细粒度路径导出）**：
- **目的**：避免整包导入和名称冲突，提供精确的导入路径
- **参考模式**：参考 `packages/shared-ui-components/package.json` 的细粒度路径导出配置
- **实现方式**：在package.json的`exports`字段中为每个UI组件提供独立的导出路径
- **示例配置**：
  ```json
  "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. 任务1已完成：分析了yongren模块页面结构。
2. 任务2已完成：创建了6个独立的页面包基础结构（包括5个yongren页面包和1个企业认证UI包），所有包都配置了package.json、tsconfig.json、jest.config.cjs。
3. 任务3已完成：所有页面迁移完成，包括dashboard、settings、order、talent、statistics页面，并修复了导入路径和类型错误。
4. 处理了共享依赖：将YongrenTabBarLayout布局组件迁移到@d8d/mini-shared-ui-components包中并导出。
5. 创建了企业认证UI包（@d8d/mini-enterprise-auth-ui），包含useAuth、useRequireAuth等认证hooks，解决了页面包的认证依赖问题。
6. 每个页面包已创建基本的API客户端结构（dashboard包已实现enterpriseCompanyClient，认证包已实现enterpriseAuthClient）。
7. 创建了yongren-shared-ui包，专门存放yongren模块的共享组件。
8. 实现了细粒度路径导出：更新了mini-shared-ui-components包的导出配置，移除了所有UI组件的批量导出，改为通过路径导入。
9. 更新了路由类型导入方式：从各自后端模块包导入路由对象，而不是统一从@d8d/server导入。
10. 修复了所有类型检查错误，包括hono依赖、AuthContextType导出、导入路径错误等。
11. 更新了所有UI包的tsconfig.json，将moduleResolution改为"bundler"以支持路径导入。
12. 安装了依赖并验证了类型检查通过。
13. 迁移了企业登录页和profile页面到mini-enterprise-auth-ui包，并修复了相关类型检查错误。
14. 完成任务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*