# TurboHR UI/UX 完整优化方案

> 版本：V1.0  
> 日期：2026-07-31  
> 适用范围：企业管理端、员工门户、平台管理端  
> 参考方向：Gusto 的任务驱动体验、温暖可信的视觉语言、员工自助和低门槛业务流程  
> 说明：本方案借鉴 Gusto 的产品原则，不复制其品牌、页面或视觉资产。

---

## 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、AIAssistant 等页面体量过大，局部交互难以保持一致。
- 页面标题、说明、工具栏、筛选区和数据区缺乏完全统一的结构。
- 大量操作按钮同时出现，主要动作与次要动作区分不足。
- 表格能够承载数据，但不够支持重复、高频和批量操作。
- 页面状态经常表现为模块状态，缺少负责人、截止时间、影响范围和下一步说明。

### 2.3 视觉问题

- 当前紫色主色与灰白卡片具有较强的通用后台模板感。
- 品牌名“企业用工专家”描述了功能，但品牌识别度不足。
- 大量 `text-xs` 导致信息虽然密集，但阅读压力较大。
- 页面主要依赖卡片和边框分区，缺少明确的视觉层级。
- 图标、状态标签、按钮密度和留白在不同页面存在差异。
- `max-w-content` 已配置，但主内容容器未实际限制超宽屏宽度。

### 2.4 交互问题

- 用户需要跨页面记忆上下文和上一步结果。
- 部分复杂流程虽有步骤，但缺少持续可见的摘要和风险提示。
- 批量操作入口常驻，未根据选择状态渐进出现。
- 错误反馈偏结果型，缺少问题定位与修复建议。
- AI 顾问与业务上下文分离，用户需要重新描述员工、批次或风险背景。
- 员工门户功能已覆盖多个场景，但仍更像功能集合，不像统一的员工工作台。

---

## 3. 目标产品框架

### 3.1 目标一级导航

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

全局右上区域保留：

- 全局搜索／命令面板。
- 快速创建按钮。
- 待审批入口。
- 通知入口。
- 帮助与 AI 助手。
- 组织及个人菜单。

以下内容移入“设置”或“更多”：

- 文本模板。
- 数据导入和导出。
- 用户与权限。
- 企业信息。
- 通知规则。
- 社保和公积金基础配置。
- 审计配置及平台级管理。

### 3.2 导航行为

- 默认只展开当前一级导航对应的二级菜单。
- 记住用户最近访问的页面和分组状态。
- 当前页面使用底色、左侧标识和文本颜色共同表达，不只依赖颜色。
- 导航底部提供“设置”和“帮助”，避免与日常模块混排。
- 桌面端侧边栏宽度建议为 224–240px，可折叠为 64px 图标栏。
- 移动端不复刻完整侧边栏，使用“首页、团队、待办、我的”四入口底栏。

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

快捷键建议为 `Cmd/Ctrl + K`，搜索范围包括：

- 员工姓名、手机号、员工编号。
- 发薪批次和月份。
- 合同、制度和证据链。
- 页面与功能。
- 可执行命令，例如“新增员工”“创建发薪批次”“发起离职”。

搜索结果按“人员、任务、记录、功能”分组，最近使用项优先。敏感信息不应出现在未经授权的搜索结果摘要中。

---

## 4. 首页：从数据看板升级为任务中心

### 4.1 页面目标

首页第一屏必须回答：

1. 今天最需要处理什么？
2. 最近一个重要截止日是什么？
3. 哪些流程或员工存在异常？

### 4.2 推荐布局

#### 顶部区域

- 问候语：`早上好，李经理`。
- 补充信息：`7 月 31 日，星期五 · 上海`。
- 右侧主按钮：`+ 快速创建`。
- 可选企业／组织切换器。

#### 主任务卡

只展示当前最重要的一项任务，例如：

> 7 月工资等待复核  
> 63 名员工，预计应发 ¥428,560，计划 8 月 5 日发布  
> 3 项异常需要处理

主操作：`继续复核`。  
次操作：`查看异常`、`稍后提醒`。

主任务的选择规则：

1. 已逾期事项。
2. 高风险合规事项。
3. 需要当前用户审批的事项。
4. 未来三日内到期事项。
5. 当前月度流程的下一步。

#### 待办队列

使用分段控制器切换：

- 需要我处理。
- 等待他人。
- 即将到期。
- 已完成。

每条待办包含：事项、关联员工或批次、截止时间、风险级别、负责人和一个直接操作。

#### 人员动态

- 待入职。
- 本周入职。
- 合同即将到期。
- 试用期即将结束。
- 特殊状态提醒。
- 离职交接中。

#### 数据洞察

放在第二屏，避免与任务竞争注意力：

- 本月人力成本。
- 年度成本趋势。
- 部门人数变化。
- 风险分布。
- 员工完成率和自助率。

### 4.3 空状态

无待办时不显示空白卡片，应表达积极完成状态：

> 今天没有待处理事项  
> 下一次发薪准备将在 8 月 1 日开始。

可提供 `查看日历` 和 `创建任务` 两个入口。

---

## 5. 团队与员工体验

### 5.1 员工目录

默认列表列建议：

| 列 | 内容 |
|---|---|
| 员工 | 头像、姓名、职位／部门 |
| 状态 | 在职、待入职、试用期、离职处理中、已离职 |
| 入职日期 | 本地化日期和在职时长 |
| 合同 | 合同类型、到期时间或风险 |
| 薪酬状态 | 已配置、缺失、变更待生效 |
| 下一项任务 | 最需要完成的员工相关事项 |
| 操作 | 查看详情和更多菜单 |

优化要求：

- 点击整行进入员工详情。
- 搜索与筛选始终位于同一工具栏。
- 筛选条件展示为可移除的条件标签。
- 支持保存视图，例如“合同 30 天内到期”“上海在职员工”。
- 选中员工后再出现批量操作栏。
- 批量离职、删除等危险操作必须显示影响范围和不可逆后果。
- 支持列显示管理、列冻结和舒适／紧凑密度切换。

### 5.2 员工 Profile Shell

员工详情采用统一框架，避免不同档案页面重复搭建标题和导航。

头部固定信息：

- 头像、姓名、职位、部门。
- 在职状态和关键风险。
- 联系方式。
- 入职日期和直属负责人。
- `编辑资料` 主按钮及更多操作菜单。

推荐 Tab：

1. 概览。
2. 工作信息。
3. 薪酬福利。
4. 考勤休假。
5. 文件合同。
6. 绩效与事件。
7. 历史记录。

概览页内容：

- 待完成事项。
- 当前合同摘要。
- 薪酬与参保摘要。
- 最近考勤异常。
- 最近文件和记录。
- 生命周期时间线。

隐私要求：

- 身份证、银行卡、工资默认遮罩。
- 查看完整敏感信息需要具备权限。
- 查看和导出敏感数据写入审计日志。
- 在操作附近说明数据用途，避免用户不清楚为何收集。

### 5.3 入职流程

统一为五阶段：

`发送邀请 → 员工填写 → HR 审核 → 合同确认 → 完成配置`

每位待入职员工显示：

- 总完成度。
- 当前阶段。
- 缺失资料。
- 员工最后操作时间。
- 预计入职日期。
- 可执行动作，如提醒、重新发送、代为补录。

完成配置应包含合同、薪酬、社保、班次和系统访问权限，不应只以员工资料提交为终点。

### 5.4 离职流程

保留现有六步能力，并统一为：

1. 选择员工和离职类型。
2. 确认原因与日期。
3. 合规检查。
4. 费用结算。
5. 工作交接和材料。
6. 复核、审批与执行。

桌面端使用“主内容 + 右侧摘要”布局。右侧始终显示：

- 员工和离职类型。
- 生效日期。
- 补偿金额。
- 风险级别。
- 缺失材料。
- 当前审批状态。

底部固定操作栏：`保存草稿`、`上一步`、`继续`。最后一步根据权限显示 `提交审批` 或 `执行离职`，避免三个同等权重的终态按钮同时出现。

---

## 6. 薪酬与发薪体验

### 6.1 月度发薪中心

将发薪操作组织为一个连续流程：

`准备数据 → 异常检查 → 复核工资 → 归档 → 发布工资条 → 完成`

页面顶部显示：

- 月份和批次名称。
- 流程步骤。
- 当前负责人。
- 计划发布时间。
- 员工数量和预计总额。
- 自动保存状态。

### 6.2 准备数据

集中呈现以下数据源的完成情况：

- 员工和薪酬结构。
- 考勤。
- 加班。
- 请假。
- 社保公积金。
- 专项附加扣除。
- 奖金、补偿或其他一次性项目。

每个数据源显示“已同步、存在异常、尚未导入、无需处理”。支持直接进入问题位置，不要求用户自行寻找模块。

### 6.3 异常检查

使用后端现有 pre-check 能力构建发薪质量门禁。

异常按严重级别分为：

- 阻断：未配置薪资、关键身份信息缺失、计算失败。
- 警告：与上月相比变化显著、加班异常、实发为负数。
- 提示：新员工首月、离职结算、一次性奖金。

每条异常需要提供：

- 员工。
- 具体字段。
- 当前值和参考值。
- 影响。
- 建议操作。
- `立即修复` 入口。

修复后自动重新检查，并保留处理记录。

### 6.4 工资复核表

- 固定员工姓名列和实发工资列。
- 工资项目支持分组展开和折叠。
- 修改后的单元格明确标识，并支持撤销。
- 显示与上月的金额和百分比变化。
- 支持筛选“仅看异常”“仅看已修改”“仅看新增员工”。
- 表尾固定显示人数、应发、扣款、税额、公司成本和实发合计。
- 大数据量使用虚拟滚动或服务端分页，避免一次渲染全部员工。

### 6.5 归档与发布

归档前弹出复核摘要，而不是只询问是否确认：

- 员工数量。
- 总金额。
- 未解决警告。
- 后续影响。
- 归档后是否可撤销。

归档后将主要操作变为 `发布工资条`。支持立即发布和定时发布，发布完成后展示员工查看／确认进度。

---

## 7. 时间、考勤和排班

### 7.1 模块结构

建议二级导航：

- 月度概览。
- 每日出勤。
- 排班。
- 休假。
- 规则设置。

现有六个平级 Tab 应重新按使用频率分组，高级班次设置放入次级入口。

### 7.2 月度确认流程

`导入／同步 → 识别异常 → 员工确认 → HR 锁定 → 同步发薪`

页面显示：

- 应确认人数。
- 已确认人数。
- 未确认人员。
- 异常考勤数量。
- 加班总时长。
- 当前发布状态。

“取消发布”属于次要危险操作，应收进更多菜单并说明会对员工端及发薪数据造成的影响。

### 7.3 排班

- 周视图作为默认视图。
- 班次用色块与缩写共同表达，不能只依赖颜色。
- 支持复制上周、按部门批量排班和冲突检测。
- 在发布排班前检查重复班次、休假冲突和连续工作风险。

---

## 8. 社保公积金体验

### 8.1 日常办理与配置分离

日常用户默认进入“月度办理”，配置版本、费率试算和基数调整放入“规则与配置”。

月度办理流程：

`确认增减员 → 检查基数变化 → 生成申报名单 → 导出／办理 → 标记完成`

每一步显示：

- 待办数量。
- 关键变化。
- 是否存在阻断问题。
- 上一步完成时间和操作者。

### 8.2 配置版本

- 使用时间线展示历史版本。
- 清楚标记当前生效版本和未来版本。
- 新建版本时显示与当前版本的差异。
- 应用调基前展示影响人数和公司成本变化。
- 允许导出受影响员工名单。

---

## 9. 合规、制度与证据链

### 9.1 统一风险中心

将风险、用工体检、合同提醒、特殊状态提醒和相关证据入口汇总为统一风险中心。

风险列表字段：

- 风险事项。
- 关联员工／流程。
- 风险等级。
- 截止时间。
- 负责人。
- 建议动作。
- 证据完整度。
- 处理状态。

风险详情使用三栏结构：问题说明、法律／制度依据、处理动作与证据。

### 9.2 规章制度

制度发布流程：

`起草 → 审核 → 公示／征求意见 → 发布 → 员工阅读确认 → 归档`

制度列表优先展示状态、覆盖人数、已读率、未读人员和最近更新时间。员工已读统计应能直接发送提醒。

### 9.3 证据链

证据链采用时间线表达，按事件展示：

- 发生时间。
- 事件类型。
- 操作者和相关人员。
- 文件及来源。
- 是否完整、是否签署或确认。
- 与制度、审批和员工事件的关联。

支持按离职、违纪、考勤、合同等场景生成证据包，并在导出前展示包含内容和敏感信息提示。

---

## 10. AI 顾问优化

### 10.1 从独立聊天升级为上下文助手

保留完整 AI 工作区，同时在业务页面提供“询问 AI”入口。系统自动附带当前上下文，例如：

- 当前员工和已授权档案摘要。
- 当前发薪批次和异常。
- 当前离职原因、日期和风险评估。
- 当前制度文档或证据链。

用户不需要重新描述“这个员工是谁、现在在哪一步”。发送前应明确显示即将带入的上下文，并允许取消部分内容。

### 10.2 AI 输出结构

优先提供结构化结果：

- 结论。
- 风险级别。
- 依据。
- 建议步骤。
- 可生成材料。
- 需要人工确认的部分。

AI 建议不能直接执行高风险操作。生成合同、制度或离职材料后，需要进入预览、编辑和确认流程。

---

## 11. 员工门户

### 11.1 目标结构

移动端首页优先展示：

- 我的待办。
- 最新工资条。
- 考勤和休假。
- 合同与文件。
- 制度阅读确认。
- 个人资料。

底部导航建议：`首页｜时间｜文件｜我的`。

### 11.2 员工首页

第一屏显示需要员工完成的动作，例如：

- 确认本月考勤。
- 阅读新制度。
- 补充入职材料。
- 确认合同。
- 查看工资条。

不要首先展示功能说明或宣传内容。每项任务展示截止时间、完成要求和一个明确按钮。

### 11.3 自助数据维护

在权限允许的前提下支持员工更新：

- 手机号、地址和紧急联系人。
- 银行卡。
- 专项附加扣除。
- 个人证件和附件。

敏感变更进入 HR 审核，并向员工展示“已提交、审核中、已生效、被退回”的完整状态。

---

## 12. 视觉设计系统

### 12.1 品牌气质

关键词：可信、温暖、清晰、专业、有人情味、不过度严肃。

避免：

- 通用紫色 SaaS 模板感。
- 大面积单一米色或深蓝色主题。
- 过多装饰卡片、渐变球和营销式构图。
- 超大标题占据工作空间。
- 用插画替代真实业务信息。

### 12.2 建议色彩

以下为方向性 Token，最终需通过品牌设计和 WCAG 对比度测试：

| 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` | 信息、进行中 |

颜色不能单独表达状态。状态组件必须同时包含文字，必要时增加图标。

### 12.3 字体

建议字体栈：

```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 | 关键数字 |

不使用随视口宽度缩放字号，不使用负字距。

### 12.4 间距和尺寸

- 使用 4px 基础单位。
- 页面水平内边距：移动端 16px，桌面端 24–32px。
- 主内容最大宽度：1440px；数据密集表格可使用全可用宽度。
- 常规区块垂直间距：24px。
- 表单字段间距：16px。
- 按钮高度：小型 32px，默认 40px，大型 48px。
- 输入框默认高度：40px。
- 图标按钮保持稳定的 36×36px 或 40×40px。
- 卡片圆角不超过 8px。

### 12.5 页面标准结构

每个管理端页面统一为：

1. `PageHeader`：标题、说明、状态和主要动作。
2. `Tabs/SegmentedControl`：只在确有同级视图时使用。
3. `FilterBar`：搜索、筛选、视图和导出。
4. `Content`：列表、表格、流程或详情。
5. `BulkActionBar`：仅选择数据后出现。
6. `Pagination/Footer`：分页、总数和显示密度。

### 12.6 组件补齐

建议建立或完善：

- AppShell。
- PageHeader。
- GlobalSearch／CommandPalette。
- FilterBar 和 FilterChip。
- DataTable。
- Stepper。
- TaskItem。
- Timeline。
- StatBlock。
- InlineAlert。
- Drawer。
- SplitPane。
- StickyActionBar。
- SensitiveValue。
- PermissionGate。
- FormSection。
- SaveStatus。
- UndoToast。

---

## 13. 表单、反馈和可访问性

### 13.1 表单

- 标签始终可见，placeholder 不代替标签。
- 必填项统一表达，不在每个标签后堆叠红色星号。
- 校验错误出现在字段附近，并说明如何修复。
- 长表单按语义分区，支持保存草稿和离开保护。
- 对身份证、手机号、银行卡、金额和日期提供格式化输入。
- 自动保存时显示“保存中／已保存／保存失败”。

### 13.2 操作反馈

- 成功：Toast，可提供“撤销”。
- 普通失败：Toast + 字段或区域内错误。
- 页面加载失败：区域级 Error State 和重试按钮。
- 危险操作：确认对话框，说明对象、数量、后果及可恢复性。
- 长耗时任务：显示进度和后台处理状态，不能只让按钮持续转圈。

### 13.3 可访问性

- 正文和交互文字达到 WCAG AA 对比度。
- 所有功能支持键盘访问和可见焦点。
- 图标按钮具有明确的 `aria-label` 和 tooltip。
- 表格表头、排序状态和选择状态可被辅助技术理解。
- Modal 打开时锁定焦点，关闭后返回触发元素。
- 动画遵循 `prefers-reduced-motion`。
- 移动端触控目标至少 44×44px。

---

## 14. 国际化与本地化

### 14.1 工程要求

- 界面文案全部进入 i18n 资源文件。
- 日期、数字、百分比和货币统一通过 `Intl` 格式化。
- 内部存储使用 ISO 日期和明确时区。
- 不在业务组件内拼接中文句子。
- 布局支持英文文案比中文长 30%–80%。
- 表格列和按钮不依赖固定中文宽度。

### 14.2 语言策略

- 第一阶段：简体中文和英文框架。
- 第二阶段：繁体中文。
- 第三阶段：根据业务扩展国家／地区包。

劳动合同、解聘、社保公积金等功能需要区分“界面语言”和“适用法律地区”。英文界面不意味着将中国法概念简单替换成美国 HR 术语。

### 14.3 品牌与文案

- 品牌名应简短、可记忆、便于形成中英文组合。
- “企业用工专家”可保留为价值说明，而非唯一品牌名。
- 文案使用动作导向表达，例如“复核 7 月工资”，避免“薪税管理功能”。
- 按钮描述结果，例如“发布工资条”，避免笼统的“确定”。
- 空状态提供下一步，不使用无帮助的“暂无数据”。

---

## 15. 后端能力与前端映射

| 现有能力 | 推荐前端体验 | 优先级 |
|---|---|---|
| Dashboard todos、风险和合规评分 | 首页任务排序、统一风险中心 | P0 |
| Calendar 和提醒 | 首页截止日、员工时间线、月度日历 | P0 |
| Payroll batch pre-check | 发薪异常质量门禁 | P0 |
| 归档、撤销归档、定时发布 | 发薪 Stepper 和发布中心 | P0 |
| Onboarding link 和资料上传 | 入职进度面板、员工自助资料收集 | P1 |
| Contract confirm | 入职和合同确认闭环 | P1 |
| Termination draft、审批和执行 | 离职流程及审批收件箱 | P0 |
| WorkProcess | 跨模块统一审批和办理中心 | P1 |
| Policy read records | 制度已读率、未读提醒和证据 | P1 |
| Attendance publish／confirm | 月度确认流程和员工响应追踪 | P1 |
| Evidence chain | 员工详情时间线、风险处理证据包 | P1 |
| Audit log | 敏感字段查看和关键操作追踪 | P1 |
| RAG／AI conversation | 上下文 AI、结构化风险建议 | P2 |
| Portal APIs | Employee Hub | P1 |
| Notification settings/logs | 统一通知中心和偏好设置 | P2 |
| Platform org/user APIs | 多组织管理工作台 | P2 |

### 15.1 建议补充的后端聚合能力

尽管现有接口已覆盖大部分功能，前端重构时建议增加少量聚合接口，避免首页和流程页并发请求过多：

- `GET /workspace/next-actions`：当前用户下一步任务。
- `GET /workspace/deadlines`：统一截止日和提醒。
- `GET /employees/:id/summary`：员工 Profile 首屏摘要。
- `GET /payroll2/batches/:id/workflow`：发薪步骤、异常和完成状态。
- `GET /approvals/inbox`：跨模块审批收件箱。
- `GET /search`：全局搜索。

聚合接口只负责编排已有业务数据，不重复实现核心计算逻辑。

---

## 16. 响应式策略

### 16.1 桌面端

- 适用于完整发薪表、社保办理、配置和批量管理。
- 1280px 以上使用侧边栏与主内容布局。
- 超宽屏限制主要内容宽度，数据表格场景可例外铺满。

### 16.2 平板

- 侧边栏默认折叠。
- 表格优先保留关键列，其他字段进入详情。
- 复杂流程保持步骤和摘要，但摘要可折叠。

### 16.3 手机端

管理员端只优先支持：

- 查看首页待办。
- 审批。
- 查看员工摘要。
- 处理通知。
- 查看发薪状态和异常摘要。

完整工资表编辑、复杂配置和批量导入应引导用户使用桌面端。员工门户则必须完整支持手机端。

---

## 17. 技术与组件重构建议

### 17.1 页面拆分

按领域拆分大型页面：

```text
pages/payroll/
  PayrollHome.tsx
  PayrollWorkflow.tsx
  PayrollReviewTable.tsx
  PayrollExceptions.tsx
  PayrollPublish.tsx

pages/termination/
  TerminationList.tsx
  TerminationWorkflow.tsx
  steps/
  components/

pages/social/
  MonthlyProcess.tsx
  SocialConfig.tsx
  HousingFundConfig.tsx
  VersionHistory.tsx
```

拆分目标不是追求小文件，而是建立清晰的领域边界、复用状态组件和降低单页面变更风险。

### 17.2 状态与数据

- React Query 的 key 统一工厂化，明确失效规则。
- 复杂流程使用 reducer 或状态机表达，避免大量彼此关联的 `useState`。
- 筛选、Tab 和分页写入 URL，支持刷新、分享和返回。
- 对乐观更新提供撤销机制。
- 大型表格考虑列配置持久化。

### 17.3 设计 Token

将颜色、圆角、阴影、字号、层级、宽度和动效统一定义为 Token，不继续在页面内直接使用 `bg-[#...]` 等任意值。Tailwind 配置与 CSS 变量应共用同一语义命名。

---

## 18. 分阶段实施计划

### Phase 0：基线和验证，3–5 天

- 建立核心任务的可用性基线。
- 记录发薪、入职和离职的点击数及完成时间。
- 整理角色和权限矩阵。
- 确认中英文品牌策略。
- 建立桌面、平板和手机测试视口。

交付物：体验基线、页面清单、角色矩阵、设计原则确认稿。

### Phase 1：全局框架，2–3 周

- 新导航和 AppShell。
- PageHeader、FilterBar、DataTable 等基础组件。
- 新色彩、字体、间距和状态体系。
- 首页任务中心。
- 全局宽度和响应式修复。
- WCAG AA 基础整改。

验收：一级导航不超过五项；首页第一屏存在唯一主任务；所有页面使用统一标题结构；1920px 下内容不无边界拉伸。

### Phase 2：核心业务流程，3–5 周

- 发薪工作流。
- 离职工作流。
- 月度社保办理。
- 月度考勤确认。
- 员工 Profile Shell。

验收：核心任务无需用户跨模块寻找下一步；所有流程能显示当前步骤、阻断项和负责人；危险操作明确说明影响。

### Phase 3：员工自助与协作，3–4 周

- Employee Hub。
- 入职进度中心。
- 审批收件箱。
- 制度阅读追踪。
- 通知中心。

验收：员工可在手机端完成主要自助任务；HR 能统一查看员工响应状态；审批不再分散在业务页面中。

### Phase 4：智能化和国际化，3–4 周

- 上下文 AI。
- 全局搜索和命令面板。
- 中英文资源化。
- Intl 日期、数字和货币格式化。
- 保存视图和个性化工作台。

验收：AI 自动识别当前业务上下文；核心页面完成中英文切换；英文文本不出现按钮溢出和布局破坏。

---

## 19. 成功指标

### 19.1 效率指标

- 首次创建员工到入职完成的时间。
- 创建发薪批次到发布工资条的时间。
- 每次发薪的点击数和页面跳转数。
- 异常发现到修复的平均时间。
- 离职流程平均完成时长。
- 批量操作使用率。

### 19.2 质量指标

- 发薪归档后撤销率。
- 工资条发布错误率。
- 入职资料一次通过率。
- 逾期合同和未处理高风险数量。
- 重复导入和数据冲突数量。
- 高风险操作误触和取消率。

### 19.3 体验指标

- 首页待办完成率。
- 员工自助完成率。
- 员工制度阅读确认率。
- 移动端任务完成率。
- 客服／内部咨询数量。
- SUS 或内部满意度评分。

建议目标：

- 发薪操作时间下降 30%。
- 核心流程页面跳转下降 40%。
- 入职资料一次通过率提升至 85% 以上。
- 员工自助完成率达到 80% 以上。
- 高风险事项逾期数量下降 50%。

---

## 20. 页面验收清单

每个页面发布前至少验证：

- 用户能否在 5 秒内理解页面目的。
- 是否存在唯一且明确的主要动作。
- 是否说明当前状态和下一步。
- 是否避免同时展示过多低频操作。
- 加载、空、错误、无权限和部分数据状态是否完整。
- 危险操作是否说明对象、数量、后果和可恢复性。
- 文字和状态对比度是否达到 WCAG AA。
- 仅使用键盘是否能完成主要操作。
- 360px、768px、1280px、1440px、1920px 是否无溢出和遮挡。
- 中英文最长文案是否不破坏布局。
- 敏感信息是否按权限遮罩并留下审计记录。
- 页面返回后筛选、分页和滚动位置是否合理保留。

---

## 21. 建议优先制作的高保真原型

为了尽快验证方向，第一轮只需设计以下八个关键页面：

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

上述页面覆盖导航、人物、任务、数据表、复杂流程、风险和移动端，可用于验证整个设计系统，无需一开始重画所有页面。

---

## 22. 参考资料

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

