# 史诗017 - 人才小程序功能实现

## 史诗目标
在mini-talent项目中完整实现人才小程序的所有页面功能,基于史诗015已创建的API模块基础,为残疾人用户提供个人信息管理、考勤记录、就业信息查询等完整的服务体验,并创建rencai mini ui包提供可复用的UI组件。

## 状态更新（2025-12-25）
- **依赖状态**：史诗015已完成3/8核心故事（38%），核心API就绪
- **启动建议**：史诗017可以立即开始，与史诗015并行开发
- **调整说明**：参照史诗011(用人方小程序)的成功模式，采用相同的架构和开发规范
- **故事拆分**：史诗拆分为8个故事，便于逐步开发和测试
- **整体进度**：
  - ✅ 故事017.001已完成 (rencai mini ui包基础框架搭建)
  - ⏳ 故事017.002-017.008待开始

## 史诗描述

### 现有系统上下文

**当前相关功能：**
- **mini-talent项目**：基础小程序前端框架（从mini项目复制）
- **mini-ui-packages目录**：已创建多个UI包（yongren-dashboard-ui、yongren-talent-management-ui等）
- **史诗015成果**：已为人才小程序补充了人才用户认证、个人信息查询等API接口
- **原型设计**：`docs/小程序原型/rencai.html` 提供了完整的6个页面原型设计

**技术栈：**
- 前端：TypeScript、React、Hono RPC客户端、Tailwind CSS、Taro
- 测试：Jest（mini项目使用Jest）
- API通信：基于Hono RPC的API客户端模式
- 包管理：pnpm workspace

**集成点：**
- 在mini-ui-packages下创建rencai相关的mini ui包，每个UI包包含自己的API客户端和RPC类型
- 参照yongren系列UI包的模式，每个UI包独立管理自己的API路由和类型定义
- UI包内部封装API调用逻辑，页面组件内部使用对应的API客户端
- mini-talent只需要导入和使用页面组件，无需关心API客户端的实现细节
- **UI组件开发**：基于原型文件创建独立的rencai mini ui包，复用现有小程序通用组件
- 遵循mini-talent项目现有的页面结构和路由配置

**史诗015完成状态更新（2025-12-25）：**
- ✅ **已就绪**：数据库schema、人才用户认证、个人信息查询API
- ⚠️ **进行中**：就业信息API、帮助与支持API、通知与消息API、数据统计API
- 🚀 **启动建议**：史诗017可以立即开始，参照已完成的API进行前端开发

### 增强详情

**新增/变更内容：**

**1. 创建rencai mini ui包：**
在`mini-ui-packages`下创建以下UI包：
- `@d8d/rencai-dashboard-ui` - 人才首页/个人主页UI包
- `@d8d/rencai-auth-ui` - 人才登录认证UI包
- `@d8d/rencai-personal-info-ui` - 人才个人信息UI包
- `@d8d/rencai-attendance-ui` - 人才考勤记录UI包
- `@d8d/rencai-employment-ui` - 人才就业信息UI包
- `@d8d/rencai-settings-ui` - 人才设置页UI包
- `@d8d/rencai-shared-ui` - 人才共享UI组件包

**2. API客户端集成模式：**
- 每个rencai UI包内部包含自己的API客户端（`src/api/index.ts`）
- UI包内部封装API调用逻辑，页面组件内部直接使用对应的API客户端
- 通过package.json的`exports`字段配置导出路径，参照yongren系列UI包的配置格式：
  ```json
  "exports": {
    ".": { ... },
    "./api": { ... },
    "./pages/LoginPage/LoginPage": { ... }
  }
  ```
- mini-talent使用export配置的完整路径导入页面组件：`import LoginPage from '@d8d/rencai-auth-ui/pages/LoginPage/LoginPage'`
- 支持`/api/v1/rencai`路径前缀的API调用
- 提供类型安全的TypeScript RPC客户端

**3. 实现页面功能：**
在mini-talent项目中实现以下6个核心页面：
1. 登录页 - 人才用户身份证号/残疾证号密码登录
2. 首页/个人主页 - 个人概览、打卡状态、快捷功能入口、最新通知
3. 考勤记录页 - 考勤日历、打卡明细、考勤统计
4. 个人信息页 - 基本信息、银行卡信息、证件照片
5. 就业信息页 - 当前就业状态、薪资记录、就业历史
6. 设置页 - 账号安全、消息通知、帮助中心、退出登录

**集成方式：**
1. **API客户端模式**：每个UI包内部管理自己的API客户端和RPC类型，API调用逻辑封装在页面组件内部，mini-talent无需关心API实现
2. **UI组件开发**：基于原型文件创建独立的rencai mini ui包，参照yongren系列UI包的结构
3. **导航栏组件集成**：所有页面统一集成`Navbar`导航栏组件，建立页面层级结构规范
4. **页面结构**：遵循mini-talent项目现有的页面目录结构（`src/pages/`），页面使用package.json exports配置的完整路径导入UI包组件
5. **路由配置**：使用现有的路由配置模式，配置底部TabBar导航

**成功标准：**
1. 6个页面功能完整实现，符合原型设计要求
2. rencai系列mini ui包创建完成，组件可复用
3. 与史诗015补充的API模块无缝集成
4. 保持mini-talent项目现有功能的完整性
5. 通过Jest测试验证，包括组件测试和集成测试
6. 遵循项目编码规范和UI组件使用规范

## 故事列表

### 故事017.001：rencai mini ui包基础框架搭建 ✅ 设计完成
**状态**: 📝 READY (清晰度评分: 9/10)
**背景：** 史诗015已完成人才用户认证API和个人信息查询API，需要创建rencai系列的mini ui包，每个UI包包含自己的API客户端和RPC类型，建立人才小程序的基础技术框架。

**详细设计文档**: [docs/stories/017.001.story.md](../stories/017.001.story.md)

**任务列表：**
1. 分析史诗015已完成的API模块，确定每个UI包需要集成的RPC客户端
2. 在`mini-ui-packages`下创建rencai系列UI包基础结构：
   - `@d8d/rencai-dashboard-ui` - 包含首页相关的API客户端和页面组件
   - `@d8d/rencai-auth-ui` - 包含人才认证相关的API客户端和登录组件
   - `@d8d/rencai-personal-info-ui` - 包含个人信息查询相关的API客户端和页面组件
   - `@d8d/rencai-attendance-ui` - 包含考勤记录相关的API客户端和页面组件（前端模拟）
   - `@d8d/rencai-employment-ui` - 包含就业信息相关的API客户端和页面组件
   - `@d8d/rencai-settings-ui` - 包含设置相关的API客户端和页面组件
   - `@d8d/rencai-shared-ui` - 包含共享UI组件
3. 为每个UI包创建API客户端（`src/api/index.ts`），集成对应的RPC接口
4. 配置每个UI包的package.json，添加页面组件的exports导出路径（参照yongren系列UI包的export配置）
5. 配置mini-talent项目的路由结构，支持页面导航
6. 创建基础布局组件（状态栏、底部导航、页面容器），参考原型设计`docs/小程序原型/rencai.html`
7. 建立人才用户认证框架，支持后续登录页面集成
8. 编写基础测试，验证现有功能不受影响

**验收标准：**
- [ ] rencai系列7个UI包基础结构创建完成
- [ ] 每个UI包包含自己的API客户端（`src/api/index.ts`）和对应的RPC类型定义
- [ ] 每个UI包的package.json配置了页面组件的exports导出路径（如`"./pages/LoginPage/LoginPage"`），参照yongren-dashboard-ui的格式
- [ ] mini-talent使用exports配置的完整路径导入页面组件：`import LoginPage from '@d8d/rencai-auth-ui/pages/LoginPage/LoginPage'`
- [ ] 页面组件内部已封装API调用逻辑，mini-talent无需关心API实现
- [ ] mini-talent项目的路由结构配置完成，支持页面导航
- [ ] 基础布局组件（状态栏、底部导航、页面容器）可用并符合移动端设计
- [ ] 人才用户认证框架就绪，支持后续登录页面集成
- [ ] 现有mini-talent项目功能不受影响

### 故事017.002：登录与首页实现 ⏳ 待开始
**状态**: ⏳ Pending
**背景：** 依赖故事017.001完成的基础框架和史诗015提供的人才用户认证API、个人信息查询API，实现人才用户登录功能和首页/个人主页页面。

**任务列表：**
1. 创建`@d8d/rencai-auth-ui`包，实现登录页面功能
2. 支持人才用户身份证号/残疾证号密码登录
3. 完善认证状态管理（token存储、验证、自动刷新）
4. 创建`@d8d/rencai-dashboard-ui`包，实现首页/个人主页页面
5. 展示个人概览数据（姓名、残疾类型、出勤统计、本月薪资）
6. 实现打卡状态显示（已打卡/未打卡，上班/下班打卡时间）
7. 集成快捷功能入口（个人信息、考勤记录、薪资查询、企业信息）
8. 实现最新通知列表
9. 集成Navbar导航栏组件，建立统一的页面层级结构（主页面使用TabBarLayout+Navbar无返回按钮）
10. 优化用户体验，确保页面设计符合原型标准
11. 编写集成测试，验证登录和首页功能

**验收标准：**
- [ ] 登录页面功能完整，支持人才用户身份证号/残疾证号密码登录
- [ ] 登录状态管理正常，token存储和验证可靠
- [ ] 首页/个人主页页面展示个人概览数据（姓名、残疾类型、出勤统计、本月薪资）
- [ ] 打卡状态显示正常（已打卡/未打卡，上班/下班打卡时间）
- [ ] 快捷功能入口可用（个人信息、考勤记录、薪资查询、企业信息）
- [ ] 最新通知列表显示正常
- [ ] 页面设计符合原型标准，移动端体验良好，已集成Navbar导航栏组件
- [ ] 与基础框架（故事017.001）无缝集成，建立统一的页面层级结构规范

### 故事017.003：个人信息功能实现 ⏳ 待开始
**状态**: ⏳ Pending
**背景：** 依赖故事017.001-017.002完成的基础，以及史诗015提供的个人信息查询API、银行卡信息查询API、证件照片查询API，实现个人信息管理功能。

**任务列表：**
1. 创建`@d8d/rencai-personal-info-ui`包，实现个人信息页面
2. 展示个人基本信息（姓名、性别、年龄、身份证号、残疾证号、残疾类型、联系电话、联系地址）
3. 集成银行卡信息查询API，展示银行卡列表（银行名称、卡号脱敏、卡类型、是否默认）
4. 集成证件照片查询API，展示证件照片列表（身份证、残疾证、体检报告、征信报告）
5. 支持证件照片预览功能
6. 集成Navbar导航栏组件，使用Navbar带返回按钮（二级页面）
7. 优化页面布局和数据展示
8. 编写集成测试，验证个人信息功能

**验收标准：**
- [ ] 个人信息页面展示完整的个人基本信息
- [ ] 银行卡信息查询接口返回银行卡信息（卡号脱敏处理）
- [ ] 证件照片查询接口返回证件照片信息
- [ ] 支持证件照片预览功能
- [ ] 页面设计符合原型标准，已集成Navbar导航栏组件
- [ ] 所有查询接口验证用户权限，确保用户只能查询自己的数据

### 故事017.004：考勤记录功能实现 ⏳ 待开始
**状态**: ⏳ Pending
**背景：** 依赖故事017.001-017.003完成的基础，实现考勤记录查看功能。注：史诗015的考勤记录API为P2延期功能，当前打卡功能为前端模拟实现。

**任务列表：**
1. 创建`@d8d/rencai-attendance-ui`包，实现考勤记录页面
2. 实现考勤日历视图，标记已打卡日期和打卡状态（前端模拟数据）
3. 实现月份切换功能
4. 展示考勤统计（出勤率、正常出勤天数、迟到次数、早退次数、缺勤次数）
5. 实现打卡明细列表，按日期倒序排列
6. 显示每日打卡详情（上班打卡时间、下班打卡时间、打卡状态）
7. 集成Navbar导航栏组件，使用Navbar带返回按钮（二级页面）
8. 优化大数据量列表性能和页面间导航
9. 编写集成测试，验证考勤记录功能

**验收标准：**
- [ ] 考勤日历视图功能完整，正确标记打卡状态（前端模拟数据）
- [ ] 支持月份切换，展示对应月份的考勤数据
- [ ] 考勤统计数据展示完整（出勤率、正常出勤天数、迟到次数、早退次数、缺勤次数）
- [ ] 打卡明细列表功能完整，支持按日期倒序排列
- [ ] 显示每日打卡详情（上班打卡时间、下班打卡时间、打卡状态）
- [ ] 页面设计符合原型标准，已集成Navbar导航栏组件
- [ ] 前端模拟数据结构符合后续API接口规范，便于后续替换为真实API

### 故事017.005：就业信息功能实现 ⏳ 待开始
**状态**: ⏳ Pending
**背景：** 依赖故事017.001-017.004完成的基础，以及史诗015提供的就业信息API（当前就业状态查询、薪资记录查询、就业历史查询），实现就业信息查看功能。

**任务列表：**
1. 创建`@d8d/rencai-employment-ui`包，实现就业信息页面
2. 集成当前就业状态查询API，展示当前工作信息（企业名称、岗位名称、入职日期、工作状态、订单编号、薪资水平）
3. 集成薪资记录查询API，展示薪资发放历史，支持按月份查询
4. 实现就业历史时间线视图，展示所有历史就业记录
5. 支持薪资详情查看（薪资明细）
6. 集成Navbar导航栏组件，使用Navbar带返回按钮（二级页面）
7. 优化页面加载性能和数据展示
8. 编写集成测试，验证就业信息功能

**验收标准：**
- [ ] 当前就业状态查询接口返回正确的当前工作信息
- [ ] 薪资记录查询接口返回历史薪资记录，支持按月查询
- [ ] 就业历史查询接口返回个人的就业历史记录
- [ ] 就业历史时间线视图展示完整，按时间倒序排列
- [ ] 支持薪资详情查看功能
- [ ] 页面设计符合原型标准，已集成Navbar导航栏组件

### 故事017.006：设置与帮助功能实现 ⏳ 待开始
**状态**: ⏳ Pending
**背景：** 依赖故事017.001-017.005完成的基础，以及史诗015提供的帮助与支持API、登录日志查询API，实现设置页和帮助功能。

**任务列表：**
1. 创建`@d8d/rencai-settings-ui`包，实现设置页面
2. 展示个人信息摘要（姓名、残疾类型、出勤统计、本月薪资）
3. 实现功能入口列表（修改个人信息、账号与安全、消息通知设置）
4. 实现帮助与支持入口（帮助中心、用户协议、隐私政策）
5. 集成登录日志查询API，展示个人登录日志
6. 实现退出登录功能
7. 集成Navbar导航栏组件（设置页在底部TabBar中）
8. 编写集成测试，验证设置与帮助功能

**验收标准：**
- [ ] 设置页面展示个人信息摘要
- [ ] 功能入口列表可用（修改个人信息、账号与安全、消息通知设置）
- [ ] 帮助与支持入口可用（帮助中心、用户协议、隐私政策）
- [ ] 登录日志查询接口返回个人的登录日志记录
- [ ] 退出登录功能正常
- [ ] 页面设计符合原型标准，已集成Navbar导航栏组件

### 故事017.007：通知与消息功能实现 ⏳ 待开始
**状态**: ⏳ Pending
**背景：** 依赖故事017.001-017.006完成的基础，以及史诗015提供的通知与消息API，实现系统通知和消息推送功能。

**任务列表：**
1. 扩展`@d8d/rencai-shared-ui`包，创建通知相关组件
2. 集成通知列表查询API，展示个人通知列表
3. 实现通知详情查看功能
4. 实现通知标记已读功能（单条标记、批量标记）
5. 展示未读通知数量
6. 在首页集成通知入口，显示最新通知
7. 在设置页添加消息通知设置入口
8. 编写集成测试，验证通知与消息功能

**验收标准：**
- [ ] 通知列表查询接口返回个人的通知列表，支持分页
- [ ] 通知详情查询接口返回通知的详细信息
- [ ] 通知标记已读接口支持单条和批量标记已读
- [ ] 未读通知数查询接口返回正确的未读通知数量
- [ ] 首页正确显示最新通知
- [ ] 设置页消息通知设置入口可用
- [ ] 页面设计符合原型标准

### 故事017.008：性能优化与测试完善 ⏳ 待开始
**状态**: ⏳ Pending
**背景：** 依赖故事017.001-017.007完成的所有功能，进行性能优化和测试完善，确保人才小程序达到生产环境质量标准。

**任务列表：**
1. **性能优化**：
   - 页面加载性能优化（懒加载、代码分割）
   - 列表渲染性能优化（虚拟列表、分页加载）
   - 图片加载优化（懒加载、压缩）
   - API请求优化（缓存、防抖节流）

2. **测试完善**：
   - 补充单元测试，确保组件测试覆盖率≥80%
   - 补充集成测试，确保API集成测试覆盖率≥60%
   - 端到端测试，覆盖主要用户流程
   - 性能测试，验证页面加载和交互性能

3. **兼容性测试**：
   - 测试不同小程序平台的兼容性（微信、支付宝等）
   - 测试不同设备和屏幕尺寸的适配
   - 测试网络异常情况的处理

4. **用户体验优化**：
   - 添加加载状态提示
   - 优化错误提示信息
   - 添加空状态提示
   - 优化交互动效

5. **文档更新**：
   - 更新API使用文档
   - 更新组件使用文档
   - 添加部署说明

**验收标准：**
- [ ] 页面加载时间≤2秒（首屏加载）
- [ ] 列表滚动流畅，无卡顿
- [ ] 组件测试覆盖率≥80%
- [ ] API集成测试覆盖率≥60%
- [ ] 端到端测试覆盖主要用户流程
- [ ] 兼容主流小程序平台和设备
- [ ] 用户体验良好，无明显的性能问题
- [ ] 文档完整，包含API使用说明和组件使用说明

## 兼容性要求

- [ ] 现有mini-talent项目功能不受影响
- [ ] rencai系列UI包遵循yongren系列UI包的API客户端模式，每个包独立管理自己的API和类型
- [ ] 使用一致的UI组件库，保持界面风格统一
- [ ] 保持路由结构的统一性，新增路由不影响现有路由
- [ ] rencai系列UI包遵循现有的mini-ui-packages包结构规范
- [ ] 性能影响最小化，不影响现有功能响应速度

## 风险缓解

**主要风险：**
1. **API集成风险**：史诗015的API可能尚未全部完成，需要并行开发
2. **UI组件复用风险**：rencai系列UI包可能与现有yongren系列UI包存在差异
3. **性能风险**：小程序性能可能影响用户体验
4. **兼容性风险**：不同小程序平台可能存在兼容性问题

**缓解措施：**
1. **分阶段集成**：
   - 先集成已完成的API（人才用户认证、个人信息查询）
   - 未完成的API使用前端模拟数据，便于后续替换
   - 与史诗015保持密切沟通，了解API开发进度

2. **UI组件规范统一**：
   - 参照yongren系列UI包的结构和命名规范
   - 复用`@d8d/mini-shared-ui-components`的通用组件
   - 创建`@d8d/rencai-shared-ui`共享UI包

3. **性能优化**：
   - 使用懒加载和代码分割减少初始加载体积
   - 列表使用虚拟列表优化大数据量渲染
   - 图片使用懒加载和压缩优化加载速度

4. **兼容性测试**：
   - 在开发过程中持续进行多平台测试
   - 使用Taro的跨平台能力，确保代码兼容性
   - 针对不同平台进行适配和优化

**回滚计划：**
1. 如果新增功能导致严重问题，可临时移除新增路由，恢复原有功能
2. 每个UI包独立管理，可通过卸载对应包进行回滚
3. UI包独立发布，可通过包版本管理进行回滚
4. 保持完整的测试用例，确保回滚后功能正常

## 完成定义

- [ ] 所有8个故事完成，验收标准全部满足
- [ ] 6个页面功能完整，符合原型设计要求
- [ ] rencai系列7个UI包创建完成，组件可复用
- [ ] API集成测试通过，包括正常流程和异常情况测试
- [ ] 现有功能回归测试通过，确保无功能退化
- [ ] 代码符合项目编码规范，通过代码审查
- [ ] 文档更新完成，包括API接口文档和用户操作手册
- [ ] 性能测试通过，页面加载时间在可接受范围内
- [ ] 移动端适配良好，主流设备和平台测试通过

**进度跟踪** (2025-12-25):
- ✅ 故事017.001: 详细设计完成 (READY状态，清晰度评分9/10)
- ⏳ 故事017.002-017.008: 待开始
- **总体进度**: 12.5% (1/8 故事完成详细设计)

## 依赖关系

- 依赖史诗015（人才小程序API支持）提供完整的API接口
- 依赖现有的mini-talent项目基础框架和构建配置
- 依赖mini-ui-packages目录下的其他UI包作为参考
- 依赖现有的通用UI组件包（`@d8d/mini-shared-ui-components`）
- 参照史诗011（用人方小程序功能实现）的成功模式和架构

**史诗015依赖状态（2025-12-25）：**
- ✅ **已就绪**：人才用户认证、个人信息查询
- ⚠️ **进行中**：就业信息API、帮助与支持API、通知与消息API
- ⚠️ **延期**：考勤记录API（P2优先级，前端模拟实现）
- 🚀 **启动建议**：史诗017可以立即开始，与史诗015并行开发

## 测试策略

1. **单元测试**：对新增组件和工具函数进行Jest单元测试
2. **集成测试**：测试API客户端与后端服务的集成
3. **UI测试**：对页面交互和用户体验进行测试
4. **性能测试**：验证页面的加载和渲染性能
5. **兼容性测试**：测试不同小程序平台和设备的兼容性
6. **回归测试**：确保现有功能不受影响

---

**故事经理交接说明：**

请为这个已有项目开发详细用户故事。关键考虑：

- 这是对现有mini-talent项目的增强，技术栈：TypeScript、React、Hono RPC、Tailwind CSS、Taro，测试使用Jest
- 集成点：史诗015补充的人才小程序API模块（人才用户认证、个人信息查询、就业信息查询等）
- 参照模式：史诗011（用人方小程序）的成功模式和架构，yongren系列UI包的结构规范
- API集成模式：每个rencai UI包内部管理自己的API客户端和RPC类型，API调用逻辑封装在页面组件内部，mini-talent只需导入页面组件使用
- UI包创建：在mini-ui-packages下创建rencai系列UI包，参照yongren系列UI包的结构
- 关键兼容要求：不影响现有功能，保持系统完整性
- 每个故事必须验证现有功能保持完整

史诗应在保持系统完整性的同时，为残疾人用户提供完整的人才小程序功能，实现`docs/小程序原型/rencai.html`中的完整页面功能，并创建可复用的rencai mini ui包。