故事 011.003：人才管理功能实现

状态

In Progress

故事

作为企业用户， 我希望查看和管理残疾人人才信息，以便进行人才分配和就业管理。

验收标准

人才列表页功能完整，支持按姓名、残疾证号搜索
人才列表支持按状态、残疾类型筛选和分页展示
人才详情页展示完整信息（基本信息、工作信息、薪资信息等）
支持查看薪资历史记录和个人征信文件
页面设计符合原型标准，与基础框架无缝集成

任务 / 子任务

任务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集成
- 验证与基础框架的集成
任务7：实现历史工作内容时间线（原型增强功能）
- 集成企业专用工作历史API获取完整工作经历
- 实现时间线布局展示历史工作记录
- 展示每段工作的公司、岗位、薪资、时间段、工作描述
- 区分当前工作和历史工作的视觉样式
任务8：实现工作视频管理（原型增强功能）
- 集成视频文件管理API（使用企业专用视频API）
- 展示视频类型分类：个税视频、工资视频、工作视频
- 实现视频预览和下载功能（UI已实现）
- 添加视频上传功能（超出当前范围）
任务9：添加详情页操作按钮（原型增强功能）
- 在详情页底部添加固定操作按钮区域
- 实现"联系"按钮功能（跳转或拨打电话）
- 实现"编辑"按钮功能（跳转编辑页面或弹出编辑表单）
- 确保按钮样式符合原型设计
任务10：人才详情页样式统一（原型对比检查）
- 薪资信息卡片样式统一：按原型设计简化为当前月薪和"薪资历史"按钮
- 历史工作内容时间线样式统一：添加连接线，完善时间线布局
- 操作按钮位置统一：将按钮移至内容区域底部（原型位置）
- 基本信息卡片字段统一：移除"联系电话"字段（原型中无此字段）
- 工作信息卡片字段顺序统一：按原型顺序（入职日期、工作状态、所属订单、岗位类型）
- 顶部信息区域出勤率显示统一：显示百分比而非"--"

开发笔记

依赖关系

依赖故事：

✅ 011.001（基础框架搭建）：已完成，提供以下已就绪的基础设施：
- API客户端：所有allin系统模块和企业专用API客户端已集成到mini/src/api.ts：
- disabilityClient - 残疾人才API（路径前缀：/api/v1/disability）
- enterpriseDisabilityClient - 企业专用残疾人才API（路径前缀：/api/v1/yongren/disability-person）推荐使用
- orderClient - 订单管理API（路径前缀：/api/v1/order）
- salaryClient - 薪资管理API（路径前缀：/api/v1/salary）
- enterpriseCompanyClient - 企业统计API（路径前缀：/api/v1/yongren/company）
- fileClient - 文件管理API（路径前缀：/api/v1/file）
- 路由配置：用人方小程序8个页面路由已配置，人才管理页面路由位置：pages/yongren/talent/list 和 pages/yongren/talent/detail
- 基础布局组件：YongrenTabBarLayout（底部导航布局）、UserStatusBar（用户状态栏）、PageContainer（页面容器）
- 企业用户认证框架：EnterpriseAuthProvider（认证上下文）、useEnterpriseAuth钩子（登录状态管理）
✅ 011.002（认证与首页实现）：已完成，提供以下已就绪的功能：
- 登录页面：企业用户手机号密码登录页面已实现（mini/src/pages/login/index.tsx），UI严格对照原型设计
- 认证状态管理：包含自动token刷新机制、登录状态检查中间件（useRequireAuth钩子）
- 首页集成：人才管理页面需要使用YongrenTabBarLayout布局组件，人才标签激活状态
- 集成测试框架：API测试基础已扩展，可复用现有测试模式
✅ 012.011（企业专用人才管理API）：已完成，提供以下已就绪的功能：
- 企业专用人才列表API：GET /api/v1/yongren/disability-person - 企业专用人才列表查询接口
- 企业专用人才详情API：GET /api/v1/yongren/disability-person/{id} - 企业专用人才详情查询接口
- 数据安全隔离：接口自动验证企业用户权限，仅返回当前企业关联的人才数据
- 企业专用API客户端：enterpriseDisabilityClient已集成到API客户端
访问控制：人才管理功能需要用户登录后才能访问，可使用useRequireAuth钩子进行权限保护

原型对比与增强功能说明

原型对比分析：通过对比原型文件 docs/小程序原型/yongren.html 和实际代码实现，发现以下差异：

核心功能已完整实现（对应验收标准1-5）：

人才列表页：搜索、筛选、分页、卡片展示 ✓
人才详情页：基本信息、工作信息、薪资信息、个人征信文件 ✓
薪资历史查看：表格展示、趋势图表 ✓
页面设计：严格对照原型第419-560行（列表页）和第561-864行（详情页） ✓

原型包含的功能（已作为增强任务实现）：

历史工作内容时间线（原型第673-739行）：时间线展示完整工作经历 → 任务7（已实现）
工作视频管理（原型第765-829行）：个税视频、工资视频、工作视频管理 → 任务8（已实现）
详情页操作按钮（原型第831-839行）：底部"联系"和"编辑"按钮 → 任务9（已实现）
薪资信息展示差异：原型简化显示（仅当前月薪+历史按钮），实现扩展显示（更多字段） → 已在组件规范中说明

实施建议：

核心验收标准已全部满足，故事状态保持"Ready for Review"
任务7-9作为原型增强功能已全部实现
如需要严格遵循原型设计，可考虑简化薪资信息展示

架构变更说明（mini-ui-packages拆分）

背景：为实现更好的模块化和代码复用，史诗011的UI组件已拆分为独立的mini-ui-packages。

当前架构：

人才管理UI包：@d8d/yongren-talent-management-ui - 包含人才列表和详情页面组件
基础UI包：
- @d8d/yongren-shared-ui - 提供YongrenTabBarLayout等共享组件
- @d8d/mini-shared-ui-components - 提供PageContainer等基础组件
- @d8d/mini-enterprise-auth-ui - 提供认证相关钩子
桥接模式：mini项目中保留桥接文件，从UI包导入实际组件

影响：

人才管理页面实现现在位于UI包中，而非mini项目内
组件导入路径已更新为从UI包导入
测试策略相应调整，UI包内包含单元测试

API规范

残疾人才API（disability_person模块）- 通用版本：

警告：此API为通用版本，返回所有人才数据，未按企业过滤。企业用户必须使用下面的"企业专用残疾人才API"，确保数据安全隔离。
客户端：disabilityClient（已在mini/src/api.ts中可用，由故事011.001集成）
路径前缀：/api/v1/disability
主要接口：
- GET / - 人才列表查询接口（支持搜索、筛选、分页）
- 查询参数：search?（姓名、残疾证号）、status?（工作状态）、disability_type?（残疾类型）、page?、limit?
- GET /{id} - 人才详情查询接口
- GET /stats - 人才统计接口

使用示例：

import { disabilityClient } from '@/api'

// 获取人才列表（带搜索和筛选）
const talentList = await disabilityClient.get({
query: {
  search: '张明',
  status: '在职',
  disability_type: '肢体残疾',
  page: 1,
  limit: 20
}
})

// 获取人才详情
const talentDetail = await disabilityClient[':id'].get({
param: { id: '123' }
})

企业专用残疾人才API（disability_person模块扩展）：

背景：通用人才API（/api/v1/disability）返回所有人才数据，未按企业过滤。企业专用人才API（/api/v1/yongren/disability-person）只返回当前企业用户关联的人才数据，确保数据安全隔离。
客户端：enterpriseDisabilityClient（已在mini/src/api.ts中可用，由故事011.001集成）
路径前缀：/api/v1/yongren/disability-person
主要接口：
- GET / - 企业专用人才列表查询接口（支持搜索、筛选、分页，仅返回当前企业关联人才）
- 查询参数：keyword?（搜索关键词，支持姓名、残疾证号）、disability_type?（残疾类型）、page?、limit?
- GET /{id} - 企业专用人才详情查询接口（验证人员是否属于当前企业）
- GET /{id}/work-history - 人才工作历史查询接口（已通过故事012.003实现）
- GET /{id}/salary-history - 人才薪资历史查询接口（已通过故事012.003实现）
- GET /{id}/credit-info - 人才征信信息查询接口（已通过故事012.003实现）
- GET /{id}/videos - 人才视频关联查询接口（已通过故事012.003实现）

使用示例：

import { enterpriseDisabilityClient } from '@/api'

// 获取企业专用人才列表（带搜索和筛选）
const talentList = await enterpriseDisabilityClient.$get({
query: {
  keyword: '张明',
  disability_type: '肢体残疾',
  page: 1,
  limit: 20
}
})

// 获取企业专用人才详情
const talentDetail = await enterpriseDisabilityClient[':id'].$get({
param: { id: '123' }
})

订单管理API（order模块）- 企业专用版本：

背景：通用订单API（/api/v1/order）返回所有订单数据。企业用户应使用企业专用残疾人才API的work-history子路由，仅返回当前企业关联人才的工作历史。
替代方案：使用企业专用残疾人才API的work-history子路由（已通过故事012.003实现）
- 路径：/api/v1/yongren/disability-person/{id}/work-history
- 客户端：enterpriseDisabilityClient[':id']['work-history']

使用示例：

import { enterpriseDisabilityClient } from '@/api'

// 获取人才工作历史（企业专用版本）
const workHistory = await enterpriseDisabilityClient[':id']['work-history'].$get({
param: { id: '123' }
})

薪资管理API（salary模块）- 企业专用版本：

背景：通用薪资API（/api/v1/salary）返回所有薪资数据。企业用户应使用企业专用残疾人才API的salary-history子路由，仅返回当前企业关联人才的薪资历史。
替代方案：使用企业专用残疾人才API的salary-history子路由（已通过故事012.003实现）
- 路径：/api/v1/yongren/disability-person/{id}/salary-history
- 客户端：enterpriseDisabilityClient[':id']['salary-history']

使用示例：

import { enterpriseDisabilityClient } from '@/api'

// 获取人才薪资历史（企业专用版本）
const salaryHistory = await enterpriseDisabilityClient[':id']['salary-history'].$get({
param: { id: '123' },
query: {
  start_date: '2024-01-01',
  end_date: '2024-12-31',
  page: 1,
  limit: 20
}
})

文件管理API（file模块）：

客户端：fileClient（已在mini/src/api.ts中可用，由故事011.001集成）
路径前缀：/api/v1/file
权限说明：文件管理API通过认证中间件验证企业用户权限，用户只能访问自己企业关联人才的文件。
主要接口：
- GET /list - 文件列表查询接口（支持按关联类型和关联ID筛选）
- 查询参数：relation_type（如'disabled_person'）、relation_id（人才ID）
- GET /download/{id} - 文件下载接口（验证文件权限）
- GET /preview/{id} - 文件预览接口（返回预览URL，验证文件权限）

使用示例：

import { fileClient } from '@/api'

// 获取人才相关文件列表（自动验证企业权限）
const fileList = await fileClient.list.get({
query: {
  relation_type: 'disabled_person',
  relation_id: '123'  // 人才ID，API会验证该人才是否属于当前企业
}
})

// 下载文件（自动验证文件权限）
const downloadUrl = fileClient.download[':id'].getUrl({ param: { id: 'file_456' } })

企业统计API（企业扩展）：

客户端：enterpriseCompanyClient（已在mini/src/api.ts中可用，由故事011.001集成）
路径前缀：/api/v1/yongren/company
相关接口：
- GET /overview - 企业概览统计（已实现，故事012.003）
- GET /{id}/talents - 企业维度人才统计（已实现，故事012.003）
- GET /allocations/recent - 近期分配人才列表（已通过故事012.010实现，返回最近30天入职的人才列表）

使用示例：

import { enterpriseCompanyClient } from '@/api'

// 获取企业概览统计（已实现）
const companyOverview = await enterpriseCompanyClient.overview.$get()

// 获取近期分配人才列表（已通过故事012.010实现）
const recentAllocations = await enterpriseCompanyClient.allocations.recent.$get({
query: { limit: 5 } // 可选参数，限制返回记录数
})

技术集成：

RPC客户端：使用故事011.001已集成的RPC客户端，遵循Hono RPC客户端模式
认证集成：所有API调用自动携带企业用户token（通过企业认证框架管理）
错误处理：使用企业认证框架的错误处理机制，处理401、403等认证错误
类型安全：所有客户端已包含完整的TypeScript类型定义

组件规范

基础组件集成（由故事011.001提供）：人才管理页面必须与故事011.001已实现的基础框架无缝集成：

布局组件：
- YongrenTabBarLayout - 底部导航布局组件，人才管理页面需要使用此布局，并确保"人才"标签处于激活状态
- PageContainer - 页面容器组件，提供统一的页面内边距和滚动容器
- UserStatusBar - 用户状态栏组件，显示当前用户信息和通知状态（可选使用）

页面结构模板：

// 人才列表页基本结构示例
import { YongrenTabBarLayout } from '@/layouts/yongren-tab-bar-layout'
import { PageContainer } from '@/components/ui/page-container'

export default function TalentListPage() {
 return (
   <YongrenTabBarLayout activeTab="talent">
     <PageContainer>
       {/* 页面具体内容 */}
     </PageContainer>
   </YongrenTabBarLayout>
 )
}

认证集成：
- 使用useRequireAuth钩子（由故事011.002提供）保护页面，未登录用户自动重定向到登录页
- 使用useEnterpriseAuth钩子（由故事011.001提供）获取当前企业用户信息
- 示例：
```
import { useRequireAuth } from '@/hooks/useRequireAuth'

export default function TalentListPage() {
// 未登录用户会自动重定向到登录页
useRequireAuth()

// 页面具体实现...
}
```
样式规范：
- 遵循故事011.001定义的基础样式规范（颜色系统、卡片阴影、圆角等）
- 使用Tailwind CSS工具类，确保移动端响应式设计
- 严格对照原型文件 docs/小程序原型/yongren.html 实现UI细节

人才列表页设计规范：必须严格对照原型文件 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>
列表布局：类似工作信息卡片
字段包括：当前薪资、薪资结构、发薪日、薪资历史等
注意：原型与实现差异：原型中薪资信息卡片仅显示当前月薪和"薪资历史"按钮。实际实现根据故事需求扩展了更多字段（薪资结构、发薪日、薪资周期等），并单独实现了薪资历史记录表格。如需要严格遵循原型设计，可考虑简化展示。

历史工作内容时间线（原型第673-739行）：

当前状态：已添加为任务7（原型增强功能），待实现
容器：card bg-white p-4 mb-4
标题：<h3 class="font-semibold text-gray-700 mb-3">历史工作内容</h3>
时间线布局：垂直时间线展示工作经历
每段工作展示：公司名称、岗位、薪资、时间段、工作描述
视觉区分：当前工作使用蓝色圆点，历史工作使用灰色圆点
数据源：使用企业专用工作历史API获取完整工作经历

工作视频管理区域（原型第765-829行）：

当前状态：已添加为任务8（原型增强功能），待实现
容器：card bg-white p-4 mb-4
标题：<h3 class="font-semibold text-gray-700">工作视频</h3>，右侧有"查看更多"链接
视频分类：个税视频、工资视频、工作视频
每项视频：图标、标题、上传时间、预览和下载按钮
数据源：可能需要扩展文件管理API支持视频分类

详情页操作按钮（原型第831-839行）：

当前状态：已添加为任务9（原型增强功能），待实现
容器：flex space-x-3，底部固定按钮区域
按钮1：flex-1 bg-blue-500 text-white py-3 rounded-lg font-medium，图标<i class="fas fa-phone mr-2"></i>，文本"联系"
按钮2：flex-1 bg-gray-100 text-gray-800 py-3 rounded-lg font-medium，图标<i class="fas fa-edit mr-2"></i>，文本"编辑"

个人征信文件区域（原型中可能在其他位置）：

文件列表展示，支持预览和下载
集成文件管理API

UI组件使用：

基础组件来源（现在来自独立的UI包）：
- YongrenTabBarLayout - 从@d8d/yongren-shared-ui/components/YongrenTabBarLayout导入（底部导航布局组件，必须使用，人才标签激活状态）
- PageContainer - 从@d8d/mini-shared-ui-components/components/page-container导入（页面容器组件，提供统一的内边距和滚动容器）
- UserStatusBar - 用户状态栏组件（可选，用于显示用户信息和通知）
- 基础卡片样式：遵循故事011.001定义的.card样式规范（圆角12px，阴影等）
人才管理业务组件（在@d8d/yongren-talent-management-ui包中）：
- TalentManagement组件 - 人才列表页面组件，包含搜索、筛选、分页功能
- TalentDetail组件 - 人才详情页面组件，展示完整人才信息
- 组件已集成搜索、筛选、表格/卡片展示、薪资历史、文件管理等功能
认证钩子：
- useAuth和useRequireAuth - 从@d8d/mini-enterprise-auth-ui/hooks导入（企业认证上下文和页面访问权限检查）
样式规范：
- 严格遵循故事011.001定义的颜色系统、卡片阴影、圆角等设计规范
- 使用Tailwind CSS工具类，确保移动端响应式设计
- 所有人才管理页面必须严格对照原型文件 docs/小程序原型/yongren.html 实现UI细节
注意：史诗011针对mini小程序，UI组件已按mini-ui-packages拆分到独立的UI包中，确保模块化和可重用性

文件位置

当前架构（已按mini-ui-packages拆分）：

人才管理UI包：

包名称：@d8d/yongren-talent-management-ui（位于mini-ui-packages/yongren-talent-management-ui/）
主要页面组件：
- src/pages/TalentManagement/TalentManagement.tsx - 人才列表页面组件
- 使用YongrenTabBarLayout布局，activeTab="talent"
- 使用PageContainer作为内容容器
- 路由路径：pages/yongren/talent/list
- src/pages/TalentDetail/TalentDetail.tsx - 人才详情页面组件
- 使用YongrenTabBarLayout布局，activeTab="talent"
- 使用PageContainer作为内容容器
- 路由路径：pages/yongren/talent/detail
API客户端：
- src/api/enterpriseDisabilityClient.ts - 企业专用残疾人才API客户端
- src/api/index.ts - API客户端导出文件

依赖的UI包：

布局组件：
- @d8d/yongren-shared-ui/components/YongrenTabBarLayout - YongrenTabBarLayout组件（底部导航布局）
- @d8d/mini-shared-ui-components/components/page-container - PageContainer组件（页面容器）
认证框架：
- @d8d/mini-enterprise-auth-ui/hooks - useAuth和useRequireAuth钩子（企业认证上下文和页面访问权限检查）
业务模块：
- @d8d/allin-disability-module - 残疾人才模块类型定义

桥接文件位置（在mini项目中）：

mini/src/pages/yongren/talent/list/index.tsx - 人才列表页面桥接文件
- 从@d8d/yongren-talent-management-ui导入TalentManagement组件
- 路由路径：pages/yongren/talent/list
mini/src/pages/yongren/talent/detail/index.tsx - 人才详情页面桥接文件
- 从@d8d/yongren-talent-management-ui导入TalentDetail组件
- 路由路径：pages/yongren/talent/detail

测试文件位置：

UI包测试：在@d8d/yongren-talent-management-ui包内编写单元测试
集成测试：在mini项目的tests/目录中编写集成测试

数据模型

基于史诗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）
2025-12-18	1.1	根据故事011.001和011.002完成情况更新文档	John（产品经理）
2025-12-18	1.2	更新依赖关系：详细列出已完成的011.001和011.002提供的功能	John（产品经理）
2025-12-18	1.3	更新API规范：添加具体客户端信息、路径前缀和使用示例	John（产品经理）
2025-12-18	1.4	更新组件规范：添加基础组件集成说明和页面结构模板	John（产品经理）
2025-12-18	1.5	更新文件位置：区分已实现的基础组件和需要创建的页面组件	John（产品经理）
2025-12-18	1.6	更新状态：从Draft改为Ready for Development	John（产品经理）
2025-12-18	1.7	更新API规范：标注`/allocations/recent`接口已通过故事012.010实现	Claude Code
2025-12-18	1.8	更新验收标准：标记所有验收标准为已完成	James（开发工程师）
2025-12-18	1.9	更新API规范：添加企业专用残疾人才API和依赖故事012.011	Claude Code
2025-12-19	1.10	修复人才详情页API使用：改用enterpriseDisabilityClient企业专用API，修复RPC客户端路径参数语法	Claude Code
2025-12-20	1.11	更新文档以反映mini-ui-packages拆分后的实际情况：更新文件位置、组件规范，添加架构变更说明	James（开发工程师）
2025-12-20	1.12	根据原型对比分析，补充缺失功能任务：添加任务7-9实现历史工作内容时间线、工作视频管理和详情页操作按钮，更新组件规范和原型对比说明	James（开发工程师）
2025-12-20	1.13	更新任务7-9状态为已完成，更新原型对比说明和实施建议	James（开发工程师）
2025-12-20	1.14	根据原型对比检查，添加任务10进行人才详情页样式统一	James（开发工程师）

开发代理记录

使用的代理模型

claude-sonnet

调试日志引用

类型检查发现dashboard页面API路径错误：enterpriseCompanyClient.allocations.recent路径不存在
dashboard页面存在类型转换错误：API响应结构与TypeScript接口不匹配
auth.tsx存在类型错误：refresh_token字段类型不匹配

完成笔记列表

✅ 检查故事011.003代码实现完成情况：
- 人才列表页已实现：mini/src/pages/yongren/talent/list/index.tsx
- 人才详情页已实现：mini/src/pages/yongren/talent/detail/index.tsx
- 相关CSS样式文件已创建：index.css文件
- 页面结构与原型设计对照实现
✅ 修复dashboard页面类型错误：
- 修复enterpriseCompanyClient.overview.get()调用应为$get()
- 修复API响应类型转换：将中文字段名映射到TypeScript接口
- 注释不存在的allocations.recentAPI调用，使用空数组临时替代（注：该接口已通过故事012.010实现）
✅ 修复auth.tsx类型错误：
- 添加类型断言：const { token, user, refresh_token } = await response.json() as { token: string; user: User; refresh_token?: string }
✅ 验证人才管理页面功能完整性：
- 人才列表页：搜索、筛选、分页功能完整
- 人才详情页：基本信息、工作信息、薪资信息、征信文件展示完整
- 多模块API集成：disability、order、salary、file模块API调用正确
✅ 运行类型检查并修复相关问题：
- dashboard页面类型错误已修复
- auth模块类型错误已修复
- 人才管理页面无类型错误报告
✅ 创建新故事解决缺失API问题：
- 已创建故事012.010专门实现/allocations/recent接口
- 更新故事011.003文档，修正API规范说明
- 设计近期分配人才查询API接口规范
✅ 故事012.010已完成：
- GET /allocations/recent接口已实现并可用
- 接口返回最近30天入职的在职人才列表
- 支持可选的limit参数控制返回记录数
- 企业用户权限验证完整
- 数据库索引优化查询性能
✅ 修复人才详情页企业专用API使用：
- 将人才详情页API客户端从disabilityClient改为enterpriseDisabilityClient
- 修复RPC客户端路径参数语法：从{id}改为:id
- 使用企业专用API子路由：work-history、salary-history、credit-info
- 添加正确的TypeScript接口类型，移除as any类型断言
- 验证企业用户数据安全隔离：只返回当前企业关联人才数据
✅ 修复人才管理UI包类型错误：
- 修复TalentDetail组件中不存在的属性访问：salary、monthlySalary、currentSalary等字段不存在
- 调整兼容字段映射，使用API实际返回的字段：personId、name、gender、idCard等
- 修复视频API字段映射：使用文件ID、文件URL、上传时间等实际字段，而非视频ID、视频标题
- 验证类型检查通过，无TypeScript错误
✅ 对比原型检查人才详情页样式差异并添加统一任务：
- 对比原型文件 docs/小程序原型/yongren.html 第561-864行与实现代码
- 发现薪资信息卡片、历史工作内容时间线、操作按钮位置等6处差异
- 添加任务10包含6个子任务进行样式统一
- 更新故事状态为"In Progress"

发现的问题

API路径不一致：故事011.003文档中提到的GET /allocations/recent接口在实际实现中不存在（史诗012未实现此接口）✅ 已解决 - 已创建故事012.010专门实现此接口
RPC客户端类型推断：dashboard页面需要手动类型转换，RPC自动类型推断可能不完整 ✅ 已解决 - 已修复RPC调用方法（使用$get()）和类型转换
企业名称字段：user对象中没有companyName字段，使用name字段替代 ✅ 已了解 - 前端已适配使用user.name字段
企业专用API使用错误：人才详情页使用通用disabilityClient而非企业专用enterpriseDisabilityClient，存在数据安全风险 ✅ 已解决 - 已修复API客户端使用，改为企业专用API，确保数据安全隔离
UI包类型错误：人才管理UI包中存在TypeScript类型错误，访问不存在的API字段 ✅ 已解决 - 已修复TalentDetail组件中的字段映射，使用API实际返回的字段

建议

更新故事011.003文档中的API规范，移除不存在的allocations.recent接口引用 ✅ 已完成 - 已更新API规范，注明接口将在故事012.010实现
考虑在史诗012中补充/allocations/recent接口实现，或使用现有/company/overview接口 ✅ 已实施 - 已创建故事012.010专门实现此接口
验证企业用户对象的字段结构，确保前端展示正确 ✅ 已完成 - 前端已适配使用user.name字段
定期运行UI包的类型检查，确保API字段映射正确 ✅ 已完成 - 已修复所有类型错误，类型检查通过

QA结果

来自QA代理对已完成故事实施的QA审查结果

011.003.story.md 35 KB История Исходник

故事 011.003：人才管理功能实现

状态

故事

验收标准

任务 / 子任务

开发笔记

依赖关系

原型对比与增强功能说明

架构变更说明（mini-ui-packages拆分）

API规范

组件规范

文件位置

数据模型

技术约束

测试要求

变更日志

开发代理记录

使用的代理模型

调试日志引用

完成笔记列表

发现的问题

建议

QA结果

011.003.story.md 35 KB

История Исходник