011.003.story.md 9.9 KB
故事 011.003：人才管理功能实现
状态
Draft
故事
作为企业用户， 我希望查看和管理残疾人人才信息， 以便进行人才分配和就业管理。
验收标准
- 人才列表页功能完整，支持按姓名、残疾证号搜索
- 人才列表支持按状态、残疾类型筛选和分页展示
- 人才详情页展示完整信息（基本信息、工作信息、薪资信息等）
- 支持查看薪资历史记录和个人征信文件
- 页面设计符合原型标准，与基础框架无缝集成
任务 / 子任务
- 任务1：实现人才列表页（AC：1,2）
- 创建人才列表页面组件，使用基础布局组件
- 集成残疾人才API（disability_person模块）
- 实现搜索功能（姓名、残疾证号）
- 实现筛选功能（工作状态、残疾类型）
- 实现分页和表格展示
- 添加加载状态和错误处理
- 任务2：实现人才详情页（AC：3）
- 创建人才详情页面组件
- 展示基本信息（姓名、性别、年龄、残疾信息等）
- 展示工作信息（当前岗位、入职时间等）
- 展示薪资信息（当前薪资、薪资结构）
- 集成多个API获取完整数据（人才、订单、薪资等模块）
- 任务3：实现薪资历史查看功能（AC：4）
- 集成薪资管理API（salary模块）
- 展示薪资历史记录表格
- 支持按时间范围筛选
- 添加薪资趋势图表
- 任务4：实现个人征信管理（AC：4）
- 集成文件管理API（file模块）
- 展示个人征信文件列表
- 支持文件预览和下载
- 添加文件上传功能（如有权限）
- 任务5：优化用户体验（AC：5）
- 参考原型设计：
docs/小程序原型/yongren.html中的人才管理页面 - 确保页面间导航流畅
- 优化大数据量列表性能
- 添加数据导出功能（如有需求）
- 参考原型设计：
- 任务6：编写集成测试
- 编写人才搜索筛选测试
- 编写详情页数据展示测试
- 测试多模块API集成
- 验证与基础框架的集成
开发笔记
依赖关系
依赖故事：
- 011.001（基础框架搭建）：提供API客户端、路由、基础布局
- 011.002（认证与首页）：提供认证状态管理
- 需要登录后才能访问人才管理功能
API规范
残疾人才API（disability_person模块）：
- 人才列表查询接口（支持搜索、筛选、分页）
- 人才详情查询接口
- 人才统计接口
订单管理API（order模块）：
- 人才工作信息查询接口
- 订单历史查询接口
薪资管理API（salary模块）：
- 薪资记录查询接口
- 薪资历史接口
文件管理API（file模块）：
- 文件列表查询接口
- 文件下载接口
- 文件预览接口
技术集成：
- 使用故事011.001集成的RPC客户端
- API路径前缀：
api/v1/yongren
组件规范
人才列表页设计规范：
必须严格对照原型文件 docs/小程序原型/yongren.html 第419-560行的人才列表页面设计实现：
页面结构：
- 注意：小程序环境中状态栏由宿主提供，无需自行实现
- 内容区域：
h-[calc(100%-60px)] overflow-y-auto（仅减去底部导航60px） - 底部导航：人才标签激活状态
搜索和筛选区域（第434-447行）：
- 容器：
p-4 border-b border-gray-200 - 搜索框：
flex items-center bg-gray-100 rounded-lg px-4 py-2 mb-3- 搜索图标：
<i class="fas fa-search text-gray-400 mr-2"></i> - 输入框：
<input type="text" placeholder="搜索姓名、残疾证号..." class="w-full bg-transparent outline-none">
- 搜索图标：
- 筛选标签区域：
flex space-x-2 overflow-x-auto pb-2- 标签样式：
bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full whitespace-nowrap（激活状态） - 非激活标签：
bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full whitespace-nowrap - 标签内容：全部、在职、待入职、离职、肢体残疾、听力残疾等
- 标签样式：
列表标题区域（第451-461行）：
- 容器：
flex justify-between items-center mb-4 - 标题：
<h3 class="font-semibold text-gray-700">全部人才 (32)</h3> - 操作按钮：
flex space-x-2- 排序按钮：
<button class="text-gray-500"><i class="fas fa-sort"></i></button> - 筛选按钮：
<button class="text-gray-500"><i class="fas fa-filter"></i></button>
- 排序按钮：
人才卡片列表（第463-560行）：
- 容器：
space-y-3 - 人才卡片：
person-card card bg-white p-4 flex items-center（复用基础样式）- 头像：
name-avatar blue（颜色类：blue, green, purple等），显示姓氏 - 信息区域：
flex-1 - 顶部：
flex justify-between items-start- 姓名：
<h4 class="font-semibold text-gray-800">张明</h4> - 详细信息：
<p class="text-xs text-gray-500">肢体残疾 · 三级 · 男 · 28岁</p> - 状态标签：
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">在职</span>
- 姓名：
- 底部：
mt-2 flex justify-between text-xs text-gray-500- 左侧：入职时间
入职: 2023-08-15 - 右侧：薪资
薪资: ¥4,800
- 左侧：入职时间
- 头像：
人才详情页设计规范：
必须严格对照原型文件 docs/小程序原型/yongren.html 第561-864行的人才详情页面设计实现：
页面结构：
- 注意：小程序环境中状态栏由宿主提供，无需自行实现
- 内容区域：
h-[calc(100%-60px)] overflow-y-auto（仅减去底部导航60px） - 底部导航：人才标签激活状态
顶部信息区域（第576-605行）：
- 容器：
gradient-bg text-white p-5 - 头部区域：
flex justify-between items-start- 左侧：
flex items-center - 头像：
w-16 h-16 rounded-full border-2 border-white mr-4 flex items-center justify-center bg-blue-500 text-white text-2xl font-bold，显示姓氏 - 姓名信息：
<h2 class="text-xl font-bold">张明</h2>，<p class="text-sm opacity-80">肢体残疾 · 三级 · 在职</p> - 右侧：操作按钮
bg-white/20 rounded-full p-2，图标<i class="fas fa-ellipsis-v text-white"></i>
- 左侧：
- 统计卡片区域：
mt-4 flex justify-between，三个卡片横向排列- 每个卡片：
text-center，数值<p class="text-2xl font-bold">¥4,800</p>，标签<p class="text-xs opacity-80">当前薪资</p> - 其他卡片：在职天数、出勤率
- 每个卡片：
详细信息区域（第608-864行）：
- 容器：
p-4
基本信息卡片（第610-634行）：
- 容器：
card bg-white p-4 mb-4 - 标题：
<h3 class="font-semibold text-gray-700 mb-3">基本信息</h3> - 网格布局：
grid grid-cols-2 gap-3 text-sm- 每个字段：标签
<p class="text-gray-500">性别</p>，值<p class="text-gray-800">男</p> - 字段包括：性别、年龄、身份证号、残疾证号（2列布局）
- 联系地址：
col-span-2跨两列
- 每个字段：标签
工作信息卡片（第637-657行）：
- 容器：
card bg-white p-4 mb-4 - 标题：
<h3 class="font-semibold text-gray-700 mb-3">工作信息</h3> - 列表布局：
space-y-3 text-sm- 每行：
flex justify-between - 标签：
<p class="text-gray-500">入职日期</p> - 值：
<p class="text-gray-800">2023-08-15</p>或状态标签<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">在职</span> - 字段包括：入职日期、工作状态、所属订单、岗位类型
- 每行：
薪资信息卡片（第660-...行）：
- 容器：
card bg-white p-4 mb-4 - 标题：
<h3 class="font-semibold text-gray-700 mb-3">薪资信息</h3> - 列表布局：类似工作信息卡片
- 字段包括：当前薪资、薪资结构、发薪日、薪资历史等
个人征信文件区域（原型中可能在其他位置）：
- 文件列表展示，支持预览和下载
- 集成文件管理API
UI组件使用：
- 复用
@d8d/allin-disability-person-management-uiUI包 - 使用表格组件、表单组件、卡片组件
- 遵循UI包开发规范 [来源：docs/architecture/coding-standards.md#ui包开发提示]
文件位置
页面组件位置：
mini/src/pages/yongren/talent/list/- 人才列表页面mini/src/pages/yongren/talent/detail/- 人才详情页面
业务组件位置：
mini/src/components/talent/- 人才相关业务组件TalentSearch.tsx- 搜索组件TalentFilter.tsx- 筛选组件TalentTable.tsx- 表格组件SalaryHistory.tsx- 薪资历史组件
数据模型
基于史诗012扩展的数据库schema：
disabled_person表已添加birth_date字段，用于准确年龄计算 [来源：docs/stories/012.001.story.md#数据模型]order_person_asset表的asset_type枚举已扩展视频类型 [来源：docs/stories/012.001.story.md#数据模型]users2表已添加company_id字段，用于关联企业用户 [来源：docs/stories/012.001.story.md#数据模型]
技术约束
- 性能优化：人才列表可能数据量大，需要分页和虚拟滚动
- 数据一致性：详情页涉及多个API模块，需处理数据同步
- 权限控制：不同企业只能查看自己关联的人才
- 错误处理：API调用失败时的降级方案
测试要求
测试框架：Jest + Testing Library 关键测试场景：
- 列表页测试：
- 搜索功能测试
- 筛选功能测试
- 分页功能测试
- 表格渲染性能测试
- 详情页测试：
- 多模块数据加载测试
- 页面标签切换测试
- 文件预览下载测试
- 集成测试：
- 从列表到详情的完整流程
- 多API模块协同测试
- 权限验证测试
变更日志
| 日期 | 版本 | 描述 | 作者 |
|---|---|---|---|
| 2025-12-17 | 1.0 | 初始创建（人才管理故事） | Bob（Scrum Master） |
开发代理记录
此部分由开发代理在实施过程中填充
QA结果
来自QA代理对已完成故事实施的QA审查结果