# TurboHR 完整优化与功能对照方案

> 版本：V2.0（整合版）  
> 日期：2026-07-31  
> 整合来源：UI/UX 完整优化方案 + 系统操作问题与功能对照分析  
> 参考方向：Gusto 的任务驱动体验、温暖可信的视觉语言、员工自助和低门槛业务流程

---

## 目录

- [Part 1：项目概述与诊断](#part-1)
- [Part 2：目标产品框架](#part-2)
- [Part 3：模块设计与功能对照](#part-3)
- [Part 4：视觉设计系统](#part-4)
- [Part 5：工程与技术](#part-5)
- [Part 6：实施计划与指标](#part-6)

---

<a id="part-1"></a>
# Part 1：项目概述与诊断

## 1. 项目目标

TurboHR 已具备员工、合同、考勤、薪酬、社保公积金、离职、制度、证据链、审批、通知、员工门户及 AI 顾问等较完整的后端能力。当前优化重点不应继续堆叠入口，而应将既有能力组织成更容易理解和完成的工作流，同时补齐功能短板。

本轮优化目标：

1. 将产品从"模块型管理后台"升级为"任务型 HR 工作台"。
2. 让非专业 HR 用户也能在清晰引导下完成发薪、入职、离职和月度社保等复杂业务。
3. 建立可信、温暖但不过度装饰的品牌与视觉体系。
4. 减少页面跳转、重复录入、操作犹豫和错误返工。
5. 提高员工自助率，减少 HR 重复答疑和资料收集工作。
6. 补齐用户反馈的功能短板：合同类型覆盖、导入导出对齐、社保灵活性、绩效分析看板、个税申报报表等。

### 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 |

---

<a id="part-2"></a>
# Part 2：目标产品框架

## 3. 目标一级导航

| 一级入口 | 主要内容 | 核心用户任务 |
|---|---|---|
| 首页 | 今日任务、审批、风险、截止日、快捷创建、近期动态 | 判断今天先做什么 |
| 团队 | 员工目录、入职、异动、合同、特殊状态、离职 | 管理员工全生命周期 |
| 薪酬 | 发薪、工资条、加班、社保公积金、专项扣除 | 完成每月薪酬工作 |
| 时间 | 考勤、排班、休假、月度确认 | 管理工时和出勤 |
| 合规 | 风险、制度、证据链、用工体检、审计 | 发现并处理用工风险 |

全局右上区域保留：全局搜索／命令面板、快速创建按钮、待审批入口、通知入口、帮助与 AI 助手、组织及个人菜单。

以下内容移入"设置"或"更多"：文本模板、数据导入导出、用户与权限、企业信息、通知规则、社保公积金基础配置、审计配置。

## 3.1 导航行为

- 默认只展开当前一级导航对应的二级菜单。
- 记住用户最近访问的页面和分组状态。
- 桌面端侧边栏 224–240px，可折叠为 64px 图标栏。
- 移动端使用"首页、团队、待办、我的"四入口底栏。

## 3.2 全局搜索和命令面板

快捷键 `Cmd/Ctrl + K`，搜索范围：员工、发薪批次、合同、页面与功能、可执行命令。结果按"人员、任务、记录、功能"分组，敏感信息不出现在未授权摘要中。

---

<a id="part-3"></a>
# 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 种状态字段，无通用审批引擎 | 需从零开发通用审批流 |

现有相关：解聘审批流（⚠️ 有状态无界面）、操作日志审计（✅）、合同确认链接（✅）。

建议：发票模块从零设计（🔴 高）；通用审批引擎支持请假/调薪/合同等多场景（🔴 高）；解聘审批界面前端补充（🟢 低）。

---

<a id="part-4"></a>
# 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. 字体

```css
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. 页面标准结构

1. `PageHeader`：标题、说明、状态、主要动作。
2. `Tabs/SegmentedControl`：只在确有同级视图时使用。
3. `FilterBar`：搜索、筛选、视图、导出。
4. `Content`：列表、表格、流程或详情。
5. `BulkActionBar`：仅选择数据后出现。
6. `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。

---

<a id="part-5"></a>
# 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-[#...]` 任意值。

---

<a id="part-6"></a>
# 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` — 基础样式和组件类更新为新 Token
- `frontend/src/components/layout/SidebarNav.tsx` — 5+1 分组 + 默认只展开当前分组
- `frontend/src/components/layout/MobileTabBar.tsx` — 5 项 Tab 对齐新分组
- `frontend/src/components/layout/AppShell.tsx` — 新建，页面布局容器 + PageHeader
- `frontend/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 个关键页面逐一验证 | ✅ 已完成 |

### 关键执行原则

1. **先后端后前端**：功能修复项（社保开关、导出扩充、个税报表）先改后端 API，前端再对接，避免阻塞。
2. **大页面拆分保持路由兼容**：`Money.tsx` 拆分后 `/money` 路由保留，内部用子路由导航。
3. **组件先行**：每个 Sprint 开始先完成该 Sprint 需要的新组件（`Stepper`、`PageHeader` 等），再做页面。
4. **并行策略**：后端改动（schema 迁移、新 API）与前端组件开发可并行，前端用 mock 数据先行。
5. **每个 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. 建议优先制作的高保真原型

第一轮只需设计以下八个关键页面：

1. 新首页任务中心。
2. 新导航和全局搜索。
3. 员工目录。
4. 员工概览详情。
5. 发薪流程总览。
6. 发薪异常和工资复核表。
7. 离职流程。
8. 员工门户首页。

---

## 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 应保留自身在中国劳动用工合规、证据链和离职处理方面的差异化能力，在此基础上建立优秀的产品体验。