43 KiB
TurboHR 完整优化与功能对照方案
版本:V2.0(整合版)
日期:2026-07-31
整合来源:UI/UX 完整优化方案 + 系统操作问题与功能对照分析
参考方向:Gusto 的任务驱动体验、温暖可信的视觉语言、员工自助和低门槛业务流程
目录
Part 1:项目概述与诊断
1. 项目目标
TurboHR 已具备员工、合同、考勤、薪酬、社保公积金、离职、制度、证据链、审批、通知、员工门户及 AI 顾问等较完整的后端能力。当前优化重点不应继续堆叠入口,而应将既有能力组织成更容易理解和完成的工作流,同时补齐功能短板。
本轮优化目标:
- 将产品从"模块型管理后台"升级为"任务型 HR 工作台"。
- 让非专业 HR 用户也能在清晰引导下完成发薪、入职、离职和月度社保等复杂业务。
- 建立可信、温暖但不过度装饰的品牌与视觉体系。
- 减少页面跳转、重复录入、操作犹豫和错误返工。
- 提高员工自助率,减少 HR 重复答疑和资料收集工作。
- 补齐用户反馈的功能短板:合同类型覆盖、导入导出对齐、社保灵活性、绩效分析看板、个税申报报表等。
1.1 核心设计原则
- 任务优先:首先告诉用户现在要做什么,而不是先展示系统有哪些模块。
- 渐进披露:日常信息优先,高级配置在需要时出现。
- 一步一决策:复杂流程每一步只解决一个主要问题。
- 状态透明:所有流程都能看见当前状态、负责人、截止时间和下一步。
- 异常前置:尽量在提交、归档、发布之前发现问题。
- 人物优先:HR 系统中的主体是员工,不是数据表和字段。
- 一致可预测:同一类动作、状态和反馈在所有模块中保持一致。
- 国际框架、本地语义:交互采用国际通行方式,劳动用工文案保持中国法律语义准确。
2. 当前产品诊断
2.1 信息架构问题
当前侧边栏包含工作台、员工管理、薪税社保、合规风控、AI 辅助和系统等多个分组,且默认展开。日常高频任务、高级配置、辅助工具和系统管理处于同一层级。
主要影响:新用户无法迅速判断从哪开始;低频工具占用导航空间;连续工作被拆散;缺乏统一的"我的工作"视角。
2.2 页面结构问题
- Dashboard 同时承担概览、薪税、风险、待办、成本和人力分析,第一屏焦点不清。
- Money、Termination、SocialInsurance 等页面体量过大,交互不一致。
- 主要动作与次要动作区分不足。
2.3 视觉问题
- 紫色主色有通用后台模板感;
text-xs密度高阅读压力大;缺少明确视觉层级。
2.4 交互问题
- 用户需跨页面记忆上下文;批量操作入口常驻;AI 顾问与业务上下文分离。
2.5 功能差距总览
| 模块 | 用户反馈问题 | 系统实际状态 | 严重程度 | 修复难度 |
|---|---|---|---|---|
| 花名册 | 缺少劳务/承揽/临时工/非全合同类型 | 枚举缺 3 种,前端缺 2 种展示 | 🔴 高 | 中 |
| 花名册 | 导出字段不全、导入导出错位 | 导出 7 列 vs 导入 19 列 | 🔴 高 | 低 |
| 工资 | 缺少计件/计时计薪方式 | 无相关字段和批次类型 | 🟡 中 | 高 |
| 社保 | 无社保人员无法标记 | 入职自动创建社保记录 | 🟡 中 | 中 |
| 社保 | 商险/意外险无独立模块 | 后端有 extraInsurances 字段 | 🟡 中 | 中 |
| 社保 | 无公积金员工自动匹配 | 无条件创建公积金记录 | 🟡 中 | 低 |
| 考勤 | 无打卡功能 | 系统无打卡能力 | 🟡 中 | 高 |
| 考勤 | 第三方数据需手工导入 | 有 Excel 导入但无 API 对接 | 🟢 低 | 中 |
| 发薪 | 个税无法自动算税 | 已实现,用户可能未发现 | 🟢 低 | — |
| 发票 | 无发票模块 | 完全未实现 | 🟡 中 | 高 |
| 审批 | 无审批模块 | 仅解聘有状态流转 | 🟡 中 | 高 |
| 绩效 | 无绩效分析看板 | 有绩效记录但无统计分析 | 🟡 中 | 低 |
| 个税 | 无个税申报报表导出 | 有计算但无申报表 | 🟡 中 | 低 |
2.6 功能成熟度矩阵
| 功能领域 | 计算能力 | 线上化程度 | 分析看板 | 申报对接 | 综合评分 |
|---|---|---|---|---|---|
| 薪酬核算 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ | — | 4/5 |
| 个税 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | — | ⭐ | 3/5 |
| 入职 | ⭐⭐⭐ | ⭐⭐⭐⭐ | — | — | 3.5/5 |
| 合同签署 | ⭐⭐⭐ | ⭐⭐⭐⭐ | — | — | 3.5/5 |
| 离职 | ⭐⭐⭐⭐ | ⭐⭐ | — | — | 3/5 |
| 绩效 | ⭐⭐ | ⭐⭐ | ⭐ | — | 1.5/5 |
| 社保 | ⭐⭐⭐⭐ | ⭐⭐⭐ | — | ⭐ | 3/5 |
Part 2:目标产品框架
3. 目标一级导航
| 一级入口 | 主要内容 | 核心用户任务 |
|---|---|---|
| 首页 | 今日任务、审批、风险、截止日、快捷创建、近期动态 | 判断今天先做什么 |
| 团队 | 员工目录、入职、异动、合同、特殊状态、离职 | 管理员工全生命周期 |
| 薪酬 | 发薪、工资条、加班、社保公积金、专项扣除 | 完成每月薪酬工作 |
| 时间 | 考勤、排班、休假、月度确认 | 管理工时和出勤 |
| 合规 | 风险、制度、证据链、用工体检、审计 | 发现并处理用工风险 |
全局右上区域保留:全局搜索/命令面板、快速创建按钮、待审批入口、通知入口、帮助与 AI 助手、组织及个人菜单。
以下内容移入"设置"或"更多":文本模板、数据导入导出、用户与权限、企业信息、通知规则、社保公积金基础配置、审计配置。
3.1 导航行为
- 默认只展开当前一级导航对应的二级菜单。
- 记住用户最近访问的页面和分组状态。
- 桌面端侧边栏 224–240px,可折叠为 64px 图标栏。
- 移动端使用"首页、团队、待办、我的"四入口底栏。
3.2 全局搜索和命令面板
快捷键 Cmd/Ctrl + K,搜索范围:员工、发薪批次、合同、页面与功能、可执行命令。结果按"人员、任务、记录、功能"分组,敏感信息不出现在未授权摘要中。
Part 3:模块设计与功能对照
4. 首页:从数据看板升级为任务中心
4.1 页面目标
首页第一屏必须回答:今天最需要处理什么?最近一个重要截止日是什么?哪些流程或员工存在异常?
4.2 推荐布局
顶部区域:问候语 + 日期 + + 快速创建 主按钮。
主任务卡:只展示当前最重要的一项任务,主操作 + 次操作。选择规则:已逾期 → 高风险 → 需审批 → 三日内到期 → 月度流程下一步。
待办队列:分段控制器切换"需要我处理 / 等待他人 / 即将到期 / 已完成"。每条包含事项、关联对象、截止时间、风险级别、负责人、直接操作。
人员动态:待入职、本周入职、合同即将到期、试用期即将结束、特殊状态、离职交接中。
数据洞察(第二屏):本月人力成本、年度成本趋势、部门人数变化、风险分布、员工完成率。新增:入离职趋势图(近 12 个月离职率)、绩效概览(等级分布、部门均分)。
4.3 空状态
今天没有待处理事项。下一次发薪准备将在 8 月 1 日开始。
提供 查看日历 和 创建任务 入口。
5. 团队与员工管理
5.1 功能对照
合同类型覆盖问题
| 用户反馈 | 系统现状 | 差距分析 |
|---|---|---|
| 只有标准劳动合同界面,劳务/承揽/临时工/非全日制无法录入 | ContractType 枚举 5 种:FIXED、UNFIXED、UNSIGNED、LABOR、INTERNSHIP |
后端已支持 LABOR/INTERNSHIP 但前端未暴露;承揽合同、临时工、非全日制 3 种完全缺失 |
花名册导入导出错位
| 用户反馈 | 系统现状 | 差距分析 |
|---|---|---|
| 导出只能导出部分基本信息 | export.routes.ts 仅 7 列 |
导入 19 字段 vs 导出 7 字段,严重不对齐 |
现有功能
| 功能项 | 支持情况 | 实现位置 |
|---|---|---|
| 单个员工录入 | ✅ | Roster.tsx → AddEmployeeModal |
| 批量导入 | ✅ | import.routes.ts → /import/excel |
| 花名册导出 | ⚠️ 仅 7 列 | export.routes.ts → /export/roster |
| 全量数据导出 | ✅ | export.routes.ts → /export/all |
| 员工详情 | ✅ 10 个 Tab | roster/EmployeeProfile.tsx |
| 批量续签/解聘 | ✅ | Roster.tsx |
| 调薪/部门变更 | ✅ | roster/modals.tsx |
5.2 员工目录优化
默认列表列:员工(头像/姓名/职位)、状态、入职日期、合同、薪酬状态、下一项任务、操作。
优化要求:点击整行进入详情;搜索与筛选同一工具栏;筛选条件为可移除标签;支持保存视图;选中后才出现批量操作栏;危险操作显示影响范围。
5.3 员工 Profile Shell
头部固定:头像、姓名、职位、部门、在职状态、联系方式、入职日期、编辑资料 主按钮。
推荐 Tab:概览、工作信息、薪酬福利、考勤休假、文件合同、绩效与事件、历史记录。
隐私要求:身份证/银行卡/工资默认遮罩;查看敏感信息需权限并写审计日志。
5.4 入职流程
统一五阶段:发送邀请 → 员工填写 → HR 审核 → 合同确认 → 完成配置
| 功能项 | 支持情况 | 说明 |
|---|---|---|
| 入职线上化 | ✅ | OnboardingLink + portal.routes.ts,HR 生成链接 → 员工填写 → 上传附件 → HR 审核 |
| 入职附件上传 | ✅ | /onboarding/:token/upload |
| 入职信息 PDF 导出 | ❌ | 建议补充 |
| 入职材料清单勾选 | ❌ | 建议补充 |
每位待入职员工显示:总完成度、当前阶段、缺失资料、最后操作时间、预计入职日期、可执行动作。
5.5 合同签署线上化
| 功能项 | 支持情况 | 说明 |
|---|---|---|
| 合同签署线上化 | ✅ | ContractConfirmLink,HR 发送链接 → 员工验证码验证 → 确认签署 |
| 签署证据链 | ✅ | 自动记录 IP/时间/验证码 |
| 第三方电子签 | ⚠️ | 有 ELECTRONIC 字段但未对接 e签宝/法大大 |
现有流程:HR 创建合同 → 生成确认链接 → 员工验证码验证 → 确认签署 → 自动生成证据链
5.6 离职流程
统一六步:选择员工 → 确认原因日期 → 合规检查 → 费用结算 → 工作交接 → 复核审批执行。
| 功能项 | 支持情况 | 说明 |
|---|---|---|
| 离职线上化 | ⚠️ 部分 | HR 端可发起,员工端无离职申请入口 |
| 离职确认 | ❌ | 员工无法在线确认 |
| 离职交接清单 | ❌ | 建议增加 |
| 解聘审批流 | ⚠️ | 有 7 种状态字段但前端无审批界面 |
桌面端使用"主内容 + 右侧摘要"布局,底部固定操作栏。
6. 薪酬与发薪体验
6.1 功能对照
计薪方式覆盖
| 用户反馈 | 系统现状 | 差距分析 |
|---|---|---|
| 只有标准工时工资,计件/计时无法录入 | BatchEntry 有基本工资/加班费/津贴/奖金等 |
缺少计件工资字段(件数/单价/时薪/工时)和对应批次类型 |
个税自动算税
| 用户反馈 | 系统现状 | 差距分析 |
|---|---|---|
| 无法实现个税自动算税 | 已实现 calcCumulativeTax() 累计预扣法 + calcBonusTax() 年终奖单独计税 |
用户反馈与系统现状不符,可能未发现该功能 |
现有功能清单
| 功能项 | 支持情况 | 说明 |
|---|---|---|
| 薪酬核算 | ✅ | calcBatchEntry() 自动计算全流程 |
| 社保公积金自动计算 | ✅ | 按城市配置比例 |
| 个税自动计算 | ✅ | 累计预扣法,7 级超额累进 |
| 年终奖单独计税 | ✅ | calcBonusTax() |
| 多批次发薪 | ✅ | 4 种批次类型 |
| 薪酬模板 | ✅ | PayslipItem 自定义薪资项 |
| 工资条在线发放 | ✅ | 支持定时发送、员工端确认 |
| Excel 导入/导出 | ✅ | /import/payroll + /export/payroll |
| 个税预览 | ✅ | /payroll/tax-preview |
| 个税跳档预警 | ✅ | 归档时检测 |
| 薪资项手工覆盖 | ✅ | 社保/公积金可 override |
| 计件/计时工资 | ❌ | 无相关字段 |
| 薪酬分析看板 | ❌ | 缺少薪酬分布/趋势/部门对比 |
6.2 月度发薪中心
连续流程:准备数据 → 异常检查 → 复核工资 → 归档 → 发布工资条 → 完成
页面顶部显示:月份、批次名称、流程步骤、当前负责人、计划发布时间、员工数量、预计总额、自动保存状态。
6.3 准备数据
集中呈现数据源完成情况:员工薪酬结构、考勤、加班、请假、社保公积金、专项附加扣除、奖金/补偿。每个数据源显示"已同步/存在异常/尚未导入/无需处理"。
6.4 异常检查
异常分三级:阻断(未配置薪资/计算失败)、警告(变化显著/实发为负)、提示(新员工/离职结算)。每条异常提供员工、字段、当前值/参考值、影响、建议操作、立即修复 入口。
6.5 工资复核表
固定姓名列和实发列;工资项目分组展开;修改单元格标识并支持撤销;显示与上月变化;支持筛选"仅看异常/已修改/新增";表尾固定合计;大数据量虚拟滚动。
6.6 归档与发布
归档前弹出复核摘要(人数/总额/未解决警告/后续影响/可撤销性)。归档后主操作变为 发布工资条,支持立即/定时发布,展示员工查看确认进度。
7. 个税申报线上化
7.1 现状
| 功能项 | 支持情况 | 说明 |
|---|---|---|
| 个税计算 | ✅ | 累计预扣法,7 级超额累进 |
| 个税预览 | ✅ | /payroll/tax-preview |
| 个税累计数据 | ✅ | Payslip.ytdTaxDeducted |
| 个税申报提醒 | ✅ | 每月申报日提醒 |
| 申报日配置 | ✅ | NotificationSetting.taxDay |
| 专项附加扣除导入 | ✅ | /import/special-deduction |
| 个税申报报表 | ❌ | 无导出功能 |
| 个税批量申报 | ❌ | 未对接税务系统 |
7.2 实施路径
阶段一(低成本):
✅ 个税自动计算 → 已实现
✅ 申报日提醒 → 已实现
📋 申报表 Excel 导出 → 新增 /export/tax-declaration 接口
阶段二(中等成本):
📋 申报数据校验 → 导出前校验完整性
📋 年度汇算提醒 → 每年 3 月推送
阶段三(高成本):
📋 对接自然人电子税务局 API → 在线批量申报
8. 时间、考勤和排班
8.1 功能对照
| 用户反馈 | 系统现状 | 差距分析 |
|---|---|---|
| 无法实现打卡 | 无打卡接口 | 系统定位为 HR 管理后台非考勤终端 |
| 第三方数据需手工导入 | 有 Excel 导入 | 缺少钉钉/企微/飞书 API 对接 |
现有功能:考勤确认、班次管理、排班、每日出勤、月度报表、休假记录、Excel 批量导入、员工端考勤查看 — 全部 ✅。
8.2 模块优化
二级导航建议:月度概览、每日出勤、排班、休假、规则设置。高级班次设置放入次级入口。
月度确认流程:导入/同步 → 识别异常 → 员工确认 → HR 锁定 → 同步发薪
排班:周视图默认;色块+缩写表达班次;支持复制上周/批量排班/冲突检测。
第三方对接建议:钉钉/企微/飞书 API(🟡 中预算)。
9. 社保公积金体验
9.1 功能对照
| 用户反馈 | 系统现状 | 差距分析 |
|---|---|---|
| 全部正规五险一金,无社保人员模块 | 固定 5 险 | 缺少「无社保」选项,入职自动创建 |
| 纯商险/意外险无法录入 | extraInsurances JSON 字段 |
后端支持但前端无独立商险模块 |
| 无公积金员工自动匹配 | 无条件创建公积金记录 | 缺少「是否缴纳公积金」开关 |
| 基数自动为应发工资 | 未填写时默认使用月工资 | 无法设为 0 或不缴 |
现有功能:社保配置(多城市多版本)、公积金配置、附加险种配置、基数调整、月度办理、专项附加扣除导入、版本管理、社保导出 — 全部 ✅。
9.2 体验优化
日常办理与配置分离:日常用户默认进入"月度办理",配置放入"规则与配置"。
月度办理流程:确认增减员 → 检查基数变化 → 生成申报名单 → 导出/办理 → 标记完成
配置版本:时间线展示历史版本;新建版本时显示差异;调基前展示影响人数和成本变化。
9.3 灵活性改进
| 需求 | 建议方案 | 预算 |
|---|---|---|
| 「无社保」选项 | 入职增加「是否参保」开关 | 🟢 低 |
| 「不缴纳公积金」选项 | 入职增加开关 | 🟢 低 |
| 商险独立管理 | 社保页面增加「商险管理」Tab | 🟡 中 |
10. 合规、制度与证据链
10.1 统一风险中心
将风险、用工体检、合同提醒、特殊状态汇总为统一风险中心。风险列表字段:事项、关联对象、等级、截止时间、负责人、建议动作、证据完整度、处理状态。详情使用三栏结构:问题说明、法律依据、处理动作与证据。
10.2 规章制度
发布流程:起草 → 审核 → 公示 → 发布 → 员工阅读确认 → 归档。列表优先展示状态、覆盖人数、已读率、未读人员。
10.3 证据链
时间线表达,按事件展示时间、类型、操作者、文件、完整性。支持按离职/违纪/考勤/合同等场景生成证据包。
11. 绩效分析与统计看板
11.1 现状
| 功能项 | 支持情况 | 说明 |
|---|---|---|
| 绩效记录录入 | ✅ | roster/PerformanceInfo.tsx,考核周期/得分/等级/评语/改进计划 |
| 绩效员工确认 | ✅ | PerformanceRecord.employeeAck |
| 绩效看板 | ❌ | 无独立统计看板 |
| 绩效趋势分析 | ❌ | 无趋势/部门对比/等级分布 |
| 绩效与薪酬联动 | ❌ | 未与奖金分配关联 |
11.2 建议方案
| 需求 | 建议方案 | 预算 |
|---|---|---|
| 绩效统计看板 | 新增 /tools/performance-dashboard,等级分布饼图/部门对比柱状图/趋势折线图/Top-Bottom 排名 |
🟢 低 |
| 绩效与薪酬联动 | 发薪批次增加「绩效奖金」列,关联绩效等级计算系数 | 🟡 中 |
| 绩效改进追踪 | 增加改进目标/完成度/复评得分字段 | 🟢 低 |
11.3 可复用基础设施
Dashboard 看板组件、/dashboard/workforce-stats 聚合 API 模式、年度价值报告、recharts 图表库。
12. AI 顾问优化
从独立聊天升级为上下文助手:业务页面提供"询问 AI"入口,自动附带当前员工/批次/风险上下文。发送前显示带入的上下文并允许取消。
AI 输出结构化:结论、风险级别、依据、建议步骤、可生成材料、需人工确认部分。AI 建议不能直接执行高风险操作。
13. 员工门户
移动端首页优先展示:我的待办、最新工资条、考勤休假、合同文件、制度阅读确认、个人资料。底部导航:首页|时间|文件|我的。
第一屏显示需要员工完成的动作,每项展示截止时间、完成要求、明确按钮。
自助数据维护:手机号/地址/紧急联系人/银行卡/专项附加扣除/证件附件。敏感变更进入 HR 审核,展示完整状态。
14. 发票与审批模块
| 用户反馈 | 系统现状 | 差距分析 |
|---|---|---|
| 无发票模块 | 完全未实现 | 需从零开发 |
| 无审批模块 | 仅解聘有 7 种状态字段,无通用审批引擎 | 需从零开发通用审批流 |
现有相关:解聘审批流(⚠️ 有状态无界面)、操作日志审计(✅)、合同确认链接(✅)。
建议:发票模块从零设计(🔴 高);通用审批引擎支持请假/调薪/合同等多场景(🔴 高);解聘审批界面前端补充(🟢 低)。
Part 4:视觉设计系统
15. 品牌气质
关键词:可信、温暖、清晰、专业、有人情味。避免通用紫色 SaaS 模板感、大面积单一色调、过多装饰卡片。
16. 建议色彩
| Token | 建议色值 | 用途 |
|---|---|---|
brand-600 |
#C7442E |
主按钮、当前导航、品牌强调 |
brand-700 |
#A93625 |
Hover、Active |
ink-900 |
#202622 |
主要文字 |
ink-600 |
#59615C |
次要文字 |
surface-page |
#F7F8F6 |
页面背景 |
surface-card |
#FFFFFF |
内容背景 |
border |
#DDE1DD |
边框和分隔线 |
success-600 |
#237A57 |
成功、完成 |
warning-600 |
#A76113 |
警告、临期 |
danger-600 |
#B83232 |
高风险、危险操作 |
info-600 |
#356A8A |
信息、进行中 |
颜色不能单独表达状态,必须同时包含文字。
17. 字体
font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
font-variant-numeric: tabular-nums;
| 层级 | 字号 | 字重 | 用途 |
|---|---|---|---|
| Page title | 24px | 600 | 页面主标题 |
| Section title | 16–18px | 600 | 页面分区 |
| Card title | 14–16px | 600 | 小型内容块 |
| Body | 14px | 400 | 默认正文和表格 |
| Metadata | 12–13px | 400 | 时间、辅助信息 |
| KPI | 24–32px | 600 | 关键数字 |
18. 间距和尺寸
4px 基础单位;页面水平内边距移动端 16px / 桌面端 24–32px;主内容最大宽度 1440px;常规区块垂直间距 24px;表单字段间距 16px;按钮高度 32/40/48px;卡片圆角不超过 8px。
19. 页面标准结构
PageHeader:标题、说明、状态、主要动作。Tabs/SegmentedControl:只在确有同级视图时使用。FilterBar:搜索、筛选、视图、导出。Content:列表、表格、流程或详情。BulkActionBar:仅选择数据后出现。Pagination/Footer:分页、总数、显示密度。
20. 组件补齐
AppShell、PageHeader、GlobalSearch/CommandPalette、FilterBar/FilterChip、DataTable、Stepper、TaskItem、Timeline、StatBlock、InlineAlert、Drawer、SplitPane、StickyActionBar、SensitiveValue、PermissionGate、FormSection、SaveStatus、UndoToast。
21. 表单、反馈和可访问性
表单:标签始终可见;校验错误在字段附近说明修复方法;长表单按语义分区支持草稿;格式化输入(身份证/手机/银行卡/金额/日期);自动保存显示状态。
操作反馈:成功 Toast 可撤销;失败 Toast + 区域错误;页面加载失败 Error State + 重试;危险操作确认对话框说明后果;长耗时任务显示进度。
可访问性:WCAG AA 对比度;键盘访问和可见焦点;图标按钮 aria-label;Modal 焦点锁定;prefers-reduced-motion;移动端触控目标 ≥ 44×44px。
Part 5:工程与技术
22. 文案与表达规范
- 文案使用动作导向表达("复核 7 月工资"而非"薪税管理功能")。
- 按钮描述结果("发布工资条"而非"确定")。
- 空状态提供下一步,不使用无帮助的"暂无数据"。
- 日期/数字/百分比/货币通过
Intl格式化。 - 内部存储使用 ISO 日期和明确时区。
23. 后端能力与前端映射
| 现有能力 | 推荐前端体验 | 优先级 |
|---|---|---|
| Dashboard todos、风险评分 | 首页任务排序、统一风险中心 | P0 |
| Calendar 和提醒 | 首页截止日、月度日历 | P0 |
| Payroll batch pre-check | 发薪异常质量门禁 | P0 |
| 归档/撤销/定时发布 | 发薪 Stepper 和发布中心 | P0 |
| Termination draft/审批 | 离职流程及审批收件箱 | P0 |
| 个税计算 + 申报提醒 | 个税申报表导出 | P0 |
| Onboarding link | 入职进度面板 | P1 |
| Contract confirm | 合同确认闭环 | P1 |
| WorkProcess | 跨模块统一审批中心 | P1 |
| Policy read records | 制度已读率、未读提醒 | P1 |
| Attendance publish/confirm | 月度确认流程 | P1 |
| Evidence chain | 员工时间线、证据包 | P1 |
| Audit log | 敏感字段查看追踪 | P1 |
| Portal APIs | Employee Hub | P1 |
| PerformanceRecord | 绩效统计看板 | P1 |
| RAG/AI conversation | 上下文 AI | P2 |
| Notification settings | 统一通知中心 | P2 |
| Platform org/user APIs | 多组织管理工作台 | P2 |
23.1 建议补充的聚合接口
GET /workspace/next-actions:当前用户下一步任务。GET /workspace/deadlines:统一截止日。GET /employees/:id/summary:员工 Profile 首屏摘要。GET /payroll2/batches/:id/workflow:发薪步骤和异常。GET /approvals/inbox:跨模块审批收件箱。GET /search:全局搜索。GET /performance/dashboard:绩效统计聚合。GET /dashboard/turnover:入离职统计聚合。GET /export/tax-declaration?month=YYYY-MM:个税申报表导出。
24. 响应式策略
桌面端:1280px+ 侧边栏与主内容布局;超宽屏限制主要内容宽度。
平板:侧边栏默认折叠;表格保留关键列;复杂流程摘要可折叠。
手机端:管理员端仅支持查看待办/审批/员工摘要/通知/发薪状态;员工门户完整支持。
25. 技术重构建议
页面拆分:按领域拆分大型页面(payroll/termination/social 等子目录)。
状态与数据:React Query key 工厂化;复杂流程用 reducer/状态机;筛选/Tab/分页写入 URL;乐观更新提供撤销。
设计 Token:颜色/圆角/阴影/字号/层级统一定义为 Token,不使用 bg-[#...] 任意值。
Part 6:实施计划与指标
26. 综合优先级清单
P0 — 立即修复(影响日常使用)
| 序号 | 功能项 | 预算 | 来源 |
|---|---|---|---|
| 1 | 花名册导出字段扩充(对齐 19 字段) | 🟢 低 | 功能对照 |
| 2 | 社保「无社保」选项 | 🟢 低 | 功能对照 |
| 3 | 公积金「不缴纳」选项 | 🟢 低 | 功能对照 |
| 4 | 个税申报表 Excel 导出 | 🟢 低 | 功能对照 |
| 5 | 入离职统计看板 | 🟢 低 | 功能对照 |
| 6 | 绩效统计看板 | 🟢 低 | 功能对照 |
| 7 | 新导航和 AppShell | 🟡 中 | UI/UX |
| 8 | 首页任务中心 | 🟡 中 | UI/UX |
| 9 | 发薪工作流 Stepper | 🟡 中 | UI/UX |
| 10 | 离职流程及审批 | 🟡 中 | UI/UX |
P1 — 近期优化
| 序号 | 功能项 | 预算 | 来源 |
|---|---|---|---|
| 11 | 合同类型扩充(承揽/临时工/非全日制) | 🟡 中 | 功能对照 |
| 12 | 导入模板合同类型对齐 | 🟢 低 | 功能对照 |
| 13 | 商险/意外险独立管理 | 🟡 中 | 功能对照 |
| 14 | 员工离职申请入口 | 🟢 低 | 功能对照 |
| 15 | 离职交接清单 | 🟢 低 | 功能对照 |
| 16 | 薪酬分析看板 | 🟢 低 | 功能对照 |
| 17 | 员工 Profile Shell | 🟡 中 | UI/UX |
| 18 | 入职进度面板 | 🟡 中 | UI/UX |
| 19 | 月度社保办理流程 | 🟡 中 | UI/UX |
| 20 | 月度考勤确认流程 | 🟡 中 | UI/UX |
| 21 | 统一风险中心 | 🟡 中 | UI/UX |
| 22 | Employee Hub(员工门户) | 🟡 中 | UI/UX |
P2 — 中期规划
| 序号 | 功能项 | 预算 | 来源 |
|---|---|---|---|
| 23 | 计件/计时工资 | 🔴 高 | 功能对照 |
| 24 | 考勤第三方对接(钉钉/企微/飞书) | 🟡 中 | 功能对照 |
| 25 | 合同电子签对接(e签宝/法大大) | 🟡 中 | 功能对照 |
| 26 | 个税申报数据校验 | 🟢 低 | 功能对照 |
| 27 | 绩效与薪酬联动 | 🟡 中 | 功能对照 |
| 28 | 上下文 AI | 🟡 中 | UI/UX |
| 29 | 全局搜索和命令面板 | 🟡 中 | UI/UX |
P3 — 远期规划
| 序号 | 功能项 | 预算 | 来源 |
|---|---|---|---|
| 30 | 发票模块 | 🔴 高 | 功能对照 |
| 31 | 通用审批引擎 | 🔴 高 | 功能对照 |
| 32 | 对接税务系统在线申报 | 🔴 高 | 功能对照 |
27. 分阶段实施计划
Phase 0:基线和验证(3–5 天)
- 建立核心任务可用性基线(发薪/入职/离职点击数及完成时间)。
- 整理角色和权限矩阵。
- 确认品牌策略。
- 建立桌面/平板/手机测试视口。
Phase 1:全局框架 + P0 功能修复(2–3 周)
- 新导航和 AppShell。
- PageHeader、FilterBar、DataTable 基础组件。
- 新色彩/字体/间距/状态体系。
- 首页任务中心。
- 花名册导出扩充、社保/公积金开关、个税申报表导出。
- 入离职统计看板、绩效统计看板。
- WCAG AA 基础整改。
验收:一级导航不超过五项;首页第一屏存在唯一主任务;导出字段对齐;统计看板上线。
Phase 2:核心业务流程(3–5 周)
- 发薪工作流(Stepper + 异常门禁 + 复核表 + 归档发布)。
- 离职工作流(六步 + 右侧摘要 + 审批)。
- 月度社保办理。
- 月度考勤确认。
- 员工 Profile Shell。
- 合同类型扩充、商险管理。
验收:核心任务无需跨模块寻找下一步;所有流程显示当前步骤/阻断项/负责人;危险操作说明影响。
Phase 3:员工自助与协作(3–4 周)
- Employee Hub。
- 入职进度中心。
- 审批收件箱。
- 制度阅读追踪。
- 通知中心。
- 员工离职申请入口。
验收:员工可手机端完成主要自助任务;HR 统一查看员工响应状态;审批不再分散。
Phase 4:智能化(3–4 周)
- 上下文 AI。
- 全局搜索和命令面板。
- 保存视图和个性化工作台。
验收:AI 自动识别业务上下文;全局搜索覆盖人员、任务、记录和功能。
27.5 详细 Sprint 实施安排
以下将上述 Phase 0–4 细化为 5 个 Sprint(每个 Sprint 2 周),明确每项工作的类型、工作量、涉及文件和执行策略。
现状判断
当前代码基础(Sprint 1 前):
- 布局:
AdminLayout(SidebarNav+TopNav+PageContainer+MobileTabBar)已存在但结构简单。 - 组件:无
AppShell、PageHeader、DataTable、FilterBar等抽象组件,各页面自行实现。 - 导航:6 个分组全部默认展开,未按任务优先级组织。
- 色彩:使用 Tailwind
primary(紫色系),无设计 Token 系统。 - 页面:
Dashboard.tsx、Money.tsx、Roster.tsx等均为大文件单页面。
Sprint 1:基础设施 + 快速修复(第 1–2 周)✅ 已完成
目标:搭建新框架骨架,同时完成 6 项低成本功能修复,让用户立刻感知改善。
状态:已于 2026-07-31 完成全部 10 项任务,代码已提交(821a62e、e7dfe3c)并部署至 https://on.hr8ai.top。
| 工作项 | 类型 | 工作量 | 涉及文件 | 状态 |
|---|---|---|---|---|
| 设计 Token 系统 | UI/UX | 1 天 | tailwind.config.ts + index.css |
✅ 已完成 |
| 新导航 5 分组 | UI/UX | 1 天 | SidebarNav.tsx + MobileTabBar.tsx |
✅ 已完成 |
AppShell + PageHeader 组件 |
UI/UX | 2 天 | 新建 src/components/layout/AppShell.tsx |
✅ 已完成 |
FilterBar + DataTable 组件 |
UI/UX | 2 天 | 新建 src/components/ui/FilterBar.tsx、DataTable.tsx |
✅ 已完成 |
| 花名册导出字段扩充 | 功能修复 | 0.5 天 | export.routes.ts(7 列 → 19 列) |
✅ 已完成 |
| 社保「无社保」选项 | 功能修复 | 1 天 | import.routes.ts(导入时填「无」或「不缴」跳过参保) |
✅ 已完成 |
| 公积金「不缴纳」选项 | 功能修复 | 0.5 天 | import.routes.ts(同上逻辑) |
✅ 已完成 |
| 个税申报表 Excel 导出 | 功能修复 | 1 天 | export.routes.ts 新增 /tax-declaration 路由(24 列) |
✅ 已完成 |
| 入离职统计看板 | 功能修复 | 1.5 天 | dashboard.routes.ts + TurnoverStats.tsx |
✅ 已完成 |
| 绩效统计看板 | 功能修复 | 1.5 天 | dashboard.routes.ts + PerformanceStats.tsx |
✅ 已完成 |
执行策略:功能修复(后端为主)与 UI 基础设施(前端为主)可并行,互不阻塞。
验收标准(全部通过 ✅):
- ✅ 导航从 6 分组变为 5 分组(首页/团队/薪酬/时间/合规)+「更多」收纳低频功能。
- ✅ 花名册导出包含 19 字段,非 ADMIN 用户强制脱敏。
- ✅ 社保/公积金导入时填「无」或「不缴」可跳过参保。
- ✅ 个税申报表可导出 Excel(24 列对齐自然人电子税务局模板)。
- ✅ Dashboard 新增入离职趋势柱状图和绩效分布饼图/柱状图。
实际变更文件清单:
frontend/tailwind.config.ts— brand 色系/ink 文字色/surface 表面色/状态色/border 色/字体/圆角frontend/src/index.css— 基础样式和组件类更新为新 Tokenfrontend/src/components/layout/SidebarNav.tsx— 5+1 分组 + 默认只展开当前分组frontend/src/components/layout/MobileTabBar.tsx— 5 项 Tab 对齐新分组frontend/src/components/layout/AppShell.tsx— 新建,页面布局容器 + PageHeaderfrontend/src/components/ui/FilterBar.tsx— 新建,搜索+筛选条件+工具区frontend/src/components/ui/DataTable.tsx— 新建,排序+行点击+空状态+固定列frontend/src/pages/dashboard/TurnoverStats.tsx— 新建,入离职趋势看板frontend/src/pages/dashboard/PerformanceStats.tsx— 新建,绩效分布看板frontend/src/pages/Dashboard.tsx— 集成两个新看板组件backend/src/routes/export.routes.ts— 花名册 19 列 + 个税申报表 24 列backend/src/routes/import.routes.ts— 社保/公积金 opt-out 逻辑backend/src/routes/dashboard.routes.ts— turnover-stats + performance-stats API
Sprint 2:首页 + 薪酬流程(第 3–4 周)✅ 已完成
目标:首页从数据看板升级为任务中心,发薪流程串联为 Stepper。
状态:已于 2026-07-31 完成,代码已提交(55b6867)。
| 工作项 | 类型 | 工作量 | 涉及文件 | 状态 |
|---|---|---|---|---|
| 首页任务中心重构 | UI/UX | 3 天 | Dashboard.tsx 重写 + 新增 /workspace/next-actions API |
✅ 已完成 |
| 待办队列 + 人员动态 | UI/UX | 2 天 | 同上 | ✅ 已完成 |
Stepper 组件 |
UI/UX | 1 天 | 新建 src/components/ui/Stepper.tsx |
✅ 已完成 |
| 发薪工作流页面拆分 | UI/UX | 4 天 | Money.tsx 拆分为 PayrollHome/Workflow/ReviewTable/Exceptions/Publish |
✅ 已完成 |
| 发薪异常质量门禁 | UI/UX | 2 天 | 对接已有 pre-check API + InlineAlert 组件 |
✅ 已完成 |
执行策略:先做 Stepper 组件,再做首页,最后拆分发薪页面。Money.tsx 拆分时保持路由兼容(/money 仍可用)。
Sprint 3:团队 + 离职 + 社保流程(第 5–6 周)✅ 已完成
目标:员工全生命周期管理体验统一。
状态:已于 2026-07-31 完成,代码已提交(9946197)。
| 工作项 | 类型 | 工作量 | 涉及文件 | 状态 |
|---|---|---|---|---|
| 员工目录优化 | UI/UX | 2 天 | Roster.tsx 重构列表部分 |
✅ 已完成 |
| 员工 Profile Shell | UI/UX | 3 天 | 新建 src/pages/roster/EmployeeProfileShell.tsx |
✅ 已完成 |
| 离职工作流重构 | UI/UX | 3 天 | Termination.tsx 拆分 + 右侧摘要面板 |
✅ 已完成 |
| 合同类型扩充 | 功能 | 1 天 | schema.prisma 枚举 + 前端选择器 + 导入模板 |
✅ 已完成 |
| 月度社保办理流程 | UI/UX | 2 天 | SocialInsurance.tsx 重构月度办理部分 |
✅ 已完成 |
| 商险管理 Tab | 功能 | 1 天 | SocialInsurance.tsx 新增 Tab |
✅ 已完成 |
Sprint 4:员工自助 + 考勤 + 合规(第 7–8 周)�� 已完成
状态:已于 2026-08-01 完成,代码已提交(a88c962)。
| 工作项 | 类型 | 工作量 | 涉及文件 | 状态 |
|---|---|---|---|---|
| Employee Hub 首页 | UI/UX | 2 天 | 新建 src/pages/portal/EmployeeHome.tsx |
✅ 已完成 |
| 入职进度面板 | UI/UX | 2 天 | 新建 src/pages/portal/OnboardingProgress.tsx |
✅ 已完成 |
| 员工离职申请入口 | 功能 | 1.5 天 | portal.routes.ts + 前端表单 |
✅ 已完成 |
| 离职交接清单 | 功能 | 1 天 | TerminationRecord 模型扩展 + 前端 |
✅ 已完成 |
| 月度考勤确认流程 | UI/UX | 2 天 | Attendance.tsx 重构 |
✅ 已完成 |
| 统一风险中心 | UI/UX | 2.5 天 | 新建 src/pages/compliance/RiskCenter.tsx |
✅ 已完成 |
| 薪酬分析看板 | 功能 | 1 天 | 新建 SalaryDashboard.tsx + 后端 API |
✅ 已完成 |
Sprint 5:AI + 搜索 + 收尾(第 9–10 周)✅ 已完成
状态:已于 2026-08-01 完成,代码已提交(a88c962)。
| 工作项 | 类型 | 工作量 | 涉及文件 | 状态 |
|---|---|---|---|---|
CommandPalette 全局搜索 |
UI/UX | 3 天 | 新建 src/components/ui/CommandPalette.tsx + /search API |
✅ 已完成 |
| 上下文 AI | UI/UX | 3 天 | 业务页面嵌入"询问 AI"入口 + 上下文传递 | ✅ 已完成 |
| 保存视图 | UI/UX | 1.5 天 | FilterBar 扩展 + localStorage 持久化 | ✅ 已完成 |
| WCAG AA 整体审查 | UI/UX | 1 天 | 全局对比度/键盘/aria 审查 | ✅ 已完成 |
| 页面验收清单走查 | QA | 2 天 | 8 个关键页面逐一验证 | ✅ 已完成 |
关键执行原则
- 先后端后前端:功能修复项(社保开关、导出扩充、个税报表)先改后端 API,前端再对接,避免阻塞。
- 大页面拆分保持路由兼容:
Money.tsx拆分后/money路由保留,内部用子路由导航。 - 组件先行:每个 Sprint 开始先完成该 Sprint 需要的新组件(
Stepper、PageHeader等),再做页面。 - 并行策略:后端改动(schema 迁移、新 API)与前端组件开发可并行,前端用 mock 数据先行。
- 每个 Sprint 末尾部署验证:在
https://on.hr8ai.top上验证,使用 Playwright 跑关键路径。
人力建议
| 角色 | 人数 | 职责 |
|---|---|---|
| 全栈开发 | 1–2 | 后端 API + Prisma 迁移 + 前端页面 |
| 前端开发 | 1 | 组件库 + 页面重构 |
| 产品/设计 | 0.5 | 原型确认 + 验收 |
最小可行配置:1 名全栈开发 + 按需前端协助,10 周完成全部 P0–P1 内容。如果只做 P0(Sprint 1–2),4 周即可见效。
28. 成功指标
28.1 效率指标
- 首次创建员工到入职完成的时间。
- 创建发薪批次到发布工资条的时间。
- 每次发薪的点击数和页面跳转数。
- 异常发现到修复的平均时间。
- 离职流程平均完成时长。
28.2 质量指标
- 发薪归档后撤销率。
- 工资条发布错误率。
- 入职资料一次通过率。
- 逾期合同和未处理高风险数量。
- 高风险操作误触和取消率。
28.3 体验指标
- 首页待办完成率。
- 员工自助完成率。
- 员工制度阅读确认率。
- 移动端任务完成率。
28.4 建议目标
- 发薪操作时间下降 30%。
- 核心流程页面跳转下降 40%。
- 入职资料一次通过率提升至 85%+。
- 员工自助完成率达到 80%+。
- 高风险事项逾期数量下降 50%。
29. 页面验收清单
每个页面发布前至少验证:
- 用户能否在 5 秒内理解页面目的。
- 是否存在唯一且明确的主要动作。
- 是否说明当前状态和下一步。
- 加载/空/错误/无权限状态是否完整。
- 危险操作是否说明对象/数量/后果/可恢复性。
- 文字和状态对比度是否达到 WCAG AA。
- 仅使用键盘是否能完成主要操作。
- 360px/768px/1280px/1440px/1920px 是否无溢出。
- 敏感信息是否按权限遮罩并留审计记录。
30. 建议优先制作的高保真原型
第一轮只需设计以下八个关键页面:
- 新首页任务中心。
- 新导航和全局搜索。
- 员工目录。
- 员工概览详情。
- 发薪流程总览。
- 发薪异常和工资复核表。
- 离职流程。
- 员工门户首页。
31. 系统现有完整模块清单
| 分类 | 模块 | 路由 | 核心功能 |
|---|---|---|---|
| 工作台 | 总览 | / |
数据看板、风险提醒、月度任务、价值报告 |
| 工作台 | 工作日历 | /calendar |
月度 HR 事项日历 |
| 员工管理 | 花名册 | /roster |
员工 CRUD、批量导入/导出、合同管理、调薪、部门变更 |
| 员工管理 | 用工办理 | /work-process |
入职/离职流程管理 |
| 员工管理 | 考勤确认 | /attendance |
班次/排班/出勤/月度报表/休假 |
| 员工管理 | 解聘补偿 | /termination |
解聘记录、补偿金计算 |
| 员工管理 | 特殊状态 | /special-status |
孕期/哺乳期/工伤/医疗期 |
| 薪税社保 | 薪税管理 | /money |
发薪批次、薪酬模板、加班费、工资条 |
| 薪税社保 | 社保公积金 | /social |
五险配置、公积金配置、基数调整、月度办理 |
| 合规风控 | 证据链 | /evidence |
入职/合同/培训/违纪证据管理 |
| 合规风控 | 规章制度 | /policies |
制度发布、员工签收 |
| 合规风控 | 用工体检 | /tools/health-check |
5 维度合规健康度评分 |
| 合规风控 | 医疗期计算 | /tools/medical-period |
医疗期期限计算器 |
| 合规风控 | 年度价值 | /tools/annual-value |
年度 HR 价值报告 |
| AI 辅助 | AI 顾问 | /ai-assistant |
劳动法 AI 问答 |
| AI 辅助 | 文本模板 | /templates |
合同/通知/制度模板管理 |
| 系统 | 通知管理 | /notifications |
风险提醒通知配置 |
| 系统 | 操作日志 | /audit |
操作审计日志 |
| 系统 | 设置 | /settings |
企业信息、导入配置 |
| 员工端 | 门户 | /portal/* |
工资条查看、合同确认、考勤确认、制度签收、入职办理 |
32. 参考资料
- Gusto 产品能力总览:https://gusto.com/product
- Gusto Employee Self-Serve:https://gusto.com/product/payroll/employee-self-serve
- Gusto 2025 Feature Showcase:https://gusto.com/product/showcase/2025
- Gusto 报表与自定义报告:https://support.gusto.com/article/101334493100000/view-download-and-customize-reports-in-gusto-for-admins
- Gusto Money Dashboard:https://gusto.com/product/money/dashboard
这些参考体现的共同方向:减少专业门槛、围绕下一步组织界面、让异常在提交前出现、强化员工自助、跨模块数据自然衔接。TurboHR 应保留自身在中国劳动用工合规、证据链和离职处理方面的差异化能力,在此基础上建立优秀的产品体验。