# 白话用工侠_测试页面.html 详细分析报告

> 文件路径：`/Users/freedak/Documents/AIDashboard/UTMS/TurboHR/白话用工侠_测试页面.html`
> 文件总行数：6370 行
> 分析日期：2026-07-26

---

## 一、文件总体结构

| 区域 | 行范围 | 说明 |
|------|--------|------|
| `<head>` + CSS 变量 | 1-60 | 全局 CSS 变量定义（主色/字体/圆角等） |
| CSS 组件样式 | 60-2899 | 所有 UI 组件的样式定义 |
| `<body>` HTML 结构 | 2900-5751 | Sidebar + Topbar + 26 个页面模块 |
| 浮动白小侠按钮 | 5753-5759 | 右下角悬浮 AI 入口 |
| `<script>` 交互逻辑 | 5761-6366 | 页面切换 + 后端 API 对接 |

### 技术栈
- 纯原生 HTML + CSS + JS（无框架）
- 图标库：Tabler Icons (`ti ti-*`)
- 字体：系统字体栈
- 后端对接：Fetch API + SSE 流式

---

## 二、CSS 设计系统（行 1-2899）

### 2.1 全局变量

```css
:root {
  --primary: #2E75B6;      /* 主蓝色 */
  --danger: #C00000;       /* 高风险红 */
  --warning: #D97706;      /* 中风险黄 */
  --safe: #16A34A;         /* 安全绿 */
  --purple: #6D28D9;       /* 知识紫 */
  --bg: #F8FAFC;           /* 页面背景 */
  --card-bg: #FFFFFF;      /* 卡片背景 */
  --text: #1E2761;         /* 主文字 */
  --text-sub: #6B7280;     /* 次要文字 */
  --border: #E5E7EB;       /* 边框 */
  --radius: 8px;           /* 圆角 */
}
```

### 2.2 核心组件样式清单

| 组件类名 | 用途 | 关键样式特征 |
|----------|------|-------------|
| `.sidebar` | 左侧导航栏 | `width:220px; fixed; bg:#1E2761` 深色背景 |
| `.nav-group` / `.nav-sub` | 分组导航 | 支持 `collapsed` 折叠状态 |
| `.topbar` | 顶部栏 | `h-56px; sticky; bg:white` 含 AI 搜索框 |
| `.ai-search-input` | AI 搜索输入 | placeholder 轮播动画 |
| `.content` | 主内容区 | `margin-left:220px; padding:20px` |
| `.page` / `.page.active` | 页面容器 | `display:none` → `display:block` 切换 |
| `.alert-banner` | AI 预警横幅 | 渐变背景 + 图标 + 操作按钮 |
| `.score-card` | 风险评分卡 | SVG 环形进度 + 评分数字 |
| `.score-detail-card` | 评分细项卡 | 标签 + 进度条 + 分数 |
| `.value-card` | 价值看板卡 | 深色渐变背景 + 金额 + 统计 |
| `.suggestion-card` | AI 建议卡片 | `sg-high/sg-med/sg-val/sg-know` 四种风格 |
| `.apply-card` | 业务流程入口 | 图标 + 名称 + 描述，点击高亮 |
| `.chat-layout` | AI 对话布局 | 左侧会话列表 + 右侧聊天区 |
| `.chat-session` | 历史会话项 | 标题 + 时间 + 元信息 |
| `.msg-user` / `.msg-ai` | 消息气泡 | 用户右对齐 / AI 左对齐 |
| `.ai-cite` | AI 引用标签 | 蓝色小标签（法律条款/判例数） |
| `.prediction-mini` | 预测迷你卡 | 三档方案横排（红/黄/绿） |
| `.pred-result-card` | 预测结果卡 | 大卡片：方案名+金额+判例+步骤+按钮 |
| `.scene-chip` | 场景选择芯片 | 图标+文字，`active` 高亮 |
| `.staff` | 风险地图表格 | 员工信息+风险评分+风险标签 |
| `.score-cell` | 评分单元格 | 数字+进度条+等级文字 |
| `.tag` / `.tag-r/y/g/b/p` | 风险标签 | 各颜色变体 |
| `.fr-body` | 文件审查布局 | 左右分栏（原文 + 风险报告） |
| `.hl` / `.hl-r/y/g` | 原文高亮 | 红/黄/绿 三色高亮 |
| `.risk-card` | 风险卡片 | 等级标签+原文+问题+建议+操作 |
| `.cc-top` | 合规中心顶部 | 深色渐变 + 评分环 + 操作按钮 |
| `.cc-dimensions` | 5 维评分卡 | 网格布局，每维度含进度条 |
| `.cc-dim` | 评分维度卡 | 图标+名称+分数+进度条+待办数 |
| `.todo-list` / `.todo-item` | 待办清单 | P0/P1/P2 优先级 + 操作按钮 |
| `.es-stats` | 电子签统计 | 四宫格指标 |
| `.es-item` | 待签合同项 | 图标+标题+元信息+进度+操作 |
| `.data-table` | 数据表格 | 通用表格样式 |
| `.data-toolbar` | 数据工具栏 | 筛选字段 + 搜索 + 操作按钮 |
| `.pagination` | 分页 | 页码 + 上/下页 |
| `.form-row` / `.form-grid-2` | 表单布局 | 标签 + 输入框，两列网格 |
| `.floating-ai` | 浮动 AI 按钮 | 固定右下角 + 语音 + badge |
| `.bg-hero` | 背景英雄区 | 渐变背景 + 图标 + 标题 + 描述 |
| `.video-card` | 视频课程卡 | 缩略图 + 标题 + 描述 + 按钮 |
| `.cc-template-card` | 模板卡片 | 图标 + 名称 + 元信息 |

---

## 三、HTML 结构详解（行 2900-5751）

### 3.1 顶部栏 Topbar（行 2880-2910）

```
顶栏结构：
├── Logo "白话用工侠"
├── AI 搜索框（placeholder 轮播 5 个热门问题）
├── 通知铃铛（含红点）
└── 用户信息（头像 + 姓名 + 公司）
```

- AI 搜索框 placeholder 每 3.5 秒轮播：`员工怀孕能开除吗？` / `合同到期不续签要赔多少钱？` / `试用期不通过的解除流程是怎样？` / `上传规章制度，AI 帮您审查合规风险...` / `调岗调薪没员工同意，能强制吗？`

### 3.2 左侧导航 Sidebar（行 2800-2879）

**分组结构**（`nav-group`）：

| 分组 | 包含页面 |
|------|---------|
| 首页 | 风险驾驶舱 |
| 白小侠 AI | AI 对话、判赔预测器、文件 AI 审查、仲裁应急通道、律师咨询 |
| 员工管理 | 全员风险地图、个人风险档案、入职管理、合同管理、考勤确认、工资条发布 |
| 合规中心 | 合规中心、规章制度民主程序、企业文本库、用工文本模板库、用工体检诊断、背景调查 |
| 电子签 | 电子签中心 |
| 我要办理 | 申请草稿、已发申请 |
| 工具中心 | 视频中心、五险一金计算器、医疗期计算器 |
| 系统 | 通知管理、用户管理、系统日志 |

- 默认仅"白小侠 AI"分组展开，其余折叠
- 二级导航项 `nav-sub` 有 `data-page` 属性用于页面跳转

---

### 3.3 26 个页面模块详细分析

---

#### PAGE 1: 风险驾驶舱 `#page-cockpit`（行 2920-3171）

**定位**：系统首页 / 核心仪表盘

**布局结构**：
```
├── 页面标题 + 数据更新时间
├── AI 预警横幅（alert-banner）
│   ├── 员工"刘云"合同到期预警
│   ├── 仲裁判赔区间 ¥18,400—¥36,800
│   └── [咨询白小侠] [立即处理] 按钮
├── 三栏布局（cols-3）
│   ├── 风险评分卡（score-card）
│   │   ├── SVG 环形进度（78分/中等风险）
│   │   ├── 趋势：较上月 ↑ +5 分
│   │   └── 统计：4 风险点 / 17 合规检查 / 3 待处理
│   ├── 评分细项卡（score-detail-card）
│   │   ├── 合同管理 78（黄）
│   │   ├── 规章制度 65（黄）
│   │   ├── 考勤工资 82（绿）
│   │   ├── 员工档案 45（红）
│   │   └── 社保公积金 88（绿）
│   └── 价值看板（value-card）
│       ├── ¥128,400 累计规避损失
│       └── 17 拦截 / 42 咨询 / 4 条款优化
├── AI 主动建议卡片流（4 张 suggestion-card）
│   ├── 🔴 高风险：张三入职未签合同 → 双倍工资风险
│   ├── 🟡 中风险：考勤制度未民主公示 → 败诉率 87%
│   ├── 🟢 价值：30 天拦截 4 处风险，避免 ¥12.8 万
│   └── 🟣 知识：同行业 5 起仲裁判例 + 3 条避坑建议
└── 我要办理（业务流程申请）
    ├── 招聘入职：员工录用/入职/自定义合同签署/培训任务/员工信息提交
    ├── 在职管理：转正/合同变更/续签/中止/收入证明
    ├── 离职管理：合同终止/解除（先咨询AI）/离职证明
    └── 多元化用工：灵活用工
```

**关键数据点**：
- 合规健康度：78 分（中等风险）
- 年度规避损失：¥128,400
- AI 建议按 4 类分级：高风险（红）/ 中风险（黄）/ 价值（绿）/ 知识（紫）
- 业务流程入口按 4 大场景分组，共 14 个申请项

---

#### PAGE 2: 白小侠 AI 对话 `#page-ai`（行 3176-3297）

**定位**：AI 智能问答核心页面

**布局结构**：
```
├── 页面标题（AI 90% · 专家 9% · 律师 1% 三层兜底）
├── chat-layout（左右分栏）
│   ├── chat-sidebar（左侧历史会话）
│   │   ├── [新对话] 按钮
│   │   └── 4 条历史会话（怀孕员工迟到/试用期不通过/未签合同/竞业限制）
│   └── chat-area（右侧对话区）
│       ├── chat-head（AI 头像 + 在线状态 + [转专家][约律师]）
│       ├── chat-messages
│       │   ├── 用户消息："想开除怀孕员工..."
│       │   └── AI 回复（bubble warn）
│       │       ├── 🚨 强风险提示（法律条款引用）
│       │       ├── ⚖️ AI 判例分析（38 起判例，企业胜诉率 22%）
│       │       └── 💰 判赔预测（三档迷你卡：强行解除¥113k+ / 协商¥25k / 调岗¥0）
│       └── chat-input-area
│           ├── 4 个快捷问题按钮
│           └── 输入框 + [发送] 按钮
```

**AI 回复结构化组件**：
- `ai-section`：分段展示（风险提示/判例分析/判赔预测）
- `ai-cite`：引用标签（法律条款/判例数）
- `prediction-mini`：三档预测迷你卡片
- `msg-actions`：操作按钮组（查看判例/生成方案/场景推演/转人工）

---

#### PAGE 3: 判赔预测器 `#page-prediction`（行 3302-3488）

**定位**：核心 AI 能力 — 基于判例库的仲裁赔偿预测

**布局结构**：
```
├── 页面标题 + AI 核心能力标签
├── annotation（免责声明：基于真实仲裁判例 AI 大模型）
├── pred-input-card（输入区）
│   ├── 第一步：12 类争议场景选择（scene-chip）
│   │   ├── 员工严重违纪解除 / 试用期不录用 / 客观情况变化
│   │   ├── 经济性裁员 / 协商一致解除 / 到期不续签
│   │   ├── 调岗调薪 / 未签书面合同 / 加班费争议
│   │   └── 社保争议 / 女职工三期 / 工伤认定
│   ├── 第二步：案件信息表单
│   │   ├── 员工姓名（含工龄信息）
│   │   ├── 违纪事实
│   │   ├── 所在地区
│   │   ├── 员工月薪
│   │   ├── 制度民主公示状态
│   │   └── 违纪记录留痕
│   └── [AI 预测仲裁结果] 按钮
└── pred-results（三档方案结果）
    ├── 原方案（pred-red）：直接解除
    │   ├── ¥86,000 预测赔偿（中位数）
    │   ├── 区间 ¥68k-¥102k
    │   ├── 42 起判例 · 败诉率 81%
    │   └── 败诉主因：制度未民主公示/迟到未达严重/未给改正机会
    ├── 方案 A（pred-amber）：补正后协商 ⭐推荐
    │   ├── ¥28,000 预测赔偿
    │   ├── 27 起替代方案 · 胜诉率 78%
    │   └── 3 步操作：发起民主程序 → 补全书面记录 → 协商解除
    └── 方案 B（pred-green）：调岗改善 最优
        ├── ¥0 预测赔偿
        ├── 19 起预防案 · 0 赔付率 89%
        └── 3 步操作：3 个月调岗改善 → 每月绩效追踪 → 达不到要求再协商
```

---

#### PAGE 4: 全员风险地图 `#page-staff`（行 3493-3723）

**定位**：花名册升级版 — 每位员工 7 维仲裁风险评分

**布局结构**：
```
├── 筛选栏（filter-bar）
│   ├── 部门/风险等级/特殊群体 下拉
│   ├── 员工姓名搜索
│   ├── 统计：全部 47 / 高风险 4 / 中风险 12 / 健康 31
│   └── [添加人员] [导出] 按钮
└── staff 表格
    ├── 列：员工 | 部门/岗位 | 合同到期 | 风险评分 | 风险标签 | 操作
    └── 7 行示例数据
        ├── 王明（销售部）- 38 分高风险 - 违纪5次/迟到/绩效不达标
        ├── 刘云（市场部）- 45 分高风险 - 合同到期/哺乳期/考勤未签字
        ├── 张三（研发部）- 28 分极高 - 合同未签14天/双倍工资风险
        ├── 李雪梅（财务部）- 68 分中风险 - 工资条未确认/调岗中
        ├── 陈军（生产部）- 72 分中风险 - 工伤恢复期/医疗期管理
        ├── 周丽（人事部）- 88 分健康 - 已签竞业/已完成培训
        └── 高敏（运营部）- 94 分优秀 - 全维度合规
```

**关键特征**：
- 风险评分用颜色分级：红（<50）/ 黄（50-80）/ 绿（>80）
- 风险标签多颜色：`tag-r`（红）/ `tag-y`（黄）/ `tag-b`（蓝）/ `tag-p`（紫，特殊群体）
- 合同到期列有预警样式（红色文字 + ⚠️）

---

#### PAGE 5: 个人风险档案 `#page-archive`（行 3728-3863）

**定位**：单个员工的深度风险分析

**三栏布局**（`grid-template-columns: 280px 1fr 320px`）：
```
├── 左栏：员工基本信息
│   ├── 头像 + 姓名 + 部门/岗位/工龄
│   ├── 入职日期/合同期限/月薪/社保/竞业协议
│   └── [AI 预测：若今日离职会怎样] 按钮
├── 中栏：7 维仲裁风险评分
│   ├── ① 合同合规 90（绿）
│   ├── ② 工时考勤 30（红）
│   ├── ③ 薪酬异常 85（绿）
│   ├── ④ 社保公积金 95（绿）
│   ├── ⑤ 特殊群体 N/A（绿）
│   ├── ⑥ 培训背调 65（黄）
│   ├── ⑦ 行为异常 25（红）
│   ├── 总分 38/100 高风险
│   └── 评分趋势 SVG 折线图（6 个月下降趋势）
└── 右栏：风险标签 & 修复路径
    ├── 违纪 5 次未存证 → [补全书面记录]
    ├── 考勤未月度签字 → [发起补签]
    ├── 绩效连续不达标 → [生成 PIP]
    └── 白小侠建议：不建议直接解除，建议补齐流程再协商
```

---

#### PAGE 6: 年度 AI 价值报告 `#page-report`（行 3864-3948）

**定位**：续约谈判材料 — AI 价值量化

**布局结构**：
```
├── 价值横幅（深色渐变背景）
│   ├── 规避 ¥128,400 潜在赔偿
│   ├── 投资回报率 1,330%（14.3 倍价值返还）
│   ├── 服务年费 ¥8,980
│   └── [立即续约（升级 AI 防御版）]
├── 价值四宫格
│   ├── 17 拦截高风险事件
│   ├── 142 AI 咨询次数
│   ├── 23 文书审改次数
│   └── +13 合规健康度提升
└── 年度关键防御事件（时间轴）
    ├── 2026-03-15 🔴 AI 阻止违法解除孕期员工（规避 ¥113,000）
    ├── 2026-06-22 🟡 AI 修正考勤制度民主程序
    ├── 2026-08-08 🟢 AI 优化销售提成方案
    └── 2026-10-30 ⚖️ 仲裁应急通道（律师接管）
```

---

#### PAGE 7: 文件 AI 审查 `#page-file-review`（行 3953-4193）

**定位**：核心 AI 能力 — 合同/制度/通知/协议的 AI 审查

**布局结构**：
```
├── fr-header（顶部信息条）
│   ├── 文件名 + 大小/页数/审查状态
│   ├── 风险统计：高风险 3 / 中风险 5 / 建议优化 2
│   └── [重新上传] [导出修改版] 按钮
├── fr-body（左右分栏）
│   ├── fr-left（左侧合同原文）
│   │   ├── fr-doc-toolbar（工具栏 + 操作提示）
│   │   └── fr-doc（合同原文，9 条条款）
│   │       └── 高亮标记：hl-r（红）/ hl-y（黄）/ hl-g（绿）
│   └── fr-right（右侧 AI 风险报告）
│       ├── fr-risk-tabs（风险等级筛选 Tab）
│       └── 10 张 risk-card
│           ├── 🔴 合同期限 6 年 → 建议 3 年
│           ├── 🔴 试用期 6 个月 → 违法，建议 3 个月
│           ├── 🔴 随时调岗调薪 → 败诉率 87%，建议协商一致
│           ├── 🟡 试用期工资 70% → 低于法定 80%
│           ├── 🟡 不定时工作制未审批
│           ├── 🟡 竞业限制 3 年无补偿 → 建议 2 年 + 月补 30%
│           ├── 🟡 绩效工资"自行决定"过于宽泛
│           ├── 🟢 录用条件未明确 → 建议附说明书
│           └── 🟢 违约金 5 万 → 建议优化
└── fr-foot（底部律师兜底提示）
    ├── AI 审查仅供参考，重要合同请律师终审
    ├── 采纳所有建议预估降低风险 ¥56,000+
    └── [历史版本] [请律师终审]
```

**交互特性**：
- 点击右侧风险卡片 → 左侧原文自动滚动定位并闪烁高亮
- 点击"一键采纳" → 原文被替换为绿色标记的建议文本
- 风险等级 Tab 筛选（全部/高/中/低）

---

#### PAGE 8: 合规中心 `#page-compliance`（行 4194-4652）

**定位**：一站式合规健康度管理 — AI 持续巡检

**布局结构**：
```
├── cc-top（顶部综合健康度）
│   ├── SVG 环形评分 78（中等风险）
│   ├── 较上月 ↑ +5 分 · 最近巡检 1 小时前
│   └── [历史趋势] [立即发起 AI 全面巡检]
├── cc-dimensions（5 维评分卡）
│   ├── 合同管理 78（黄）- 3 件待办
│   ├── 规章制度 65（红）- 4 件待办·紧急
│   ├── 考勤工时 82（绿）- 5 件待办
│   ├── 薪酬工资 85（绿）- 0 件待办
│   └── 社保公积金 88（绿）- 0 件待办
├── 本周合规待办（12 件，按 P0/P1/P2 排序）
│   ├── 🔴 P0：4 项制度未民主公示（预估降低 ¥18.6 万风险）
│   ├── 🔴 P0：张三入职未签合同（30 天内）
│   ├── 🟡 P1：3 名员工合同 30 天内到期
│   ├── 🟡 P1：5 名员工考勤未签字
│   └── 🟢 P2：17 份文件未经 AI 审查
└── Tab 工作区（5 个 Tab）
    ├── 合同管理：47 份合同表格（员工/类型/期限/状态/AI审改/风险/操作）
    ├── 制度公示：12 项制度（民主程序进度条 4 步：起草→讨论→协商→公示）
    ├── 考勤工时：4 指标卡 + AI 检测发现 + 一键发起签字
    ├── 员工档案：4 指标卡（完整度/背调/培训/竞业）
    └── 文本模板：6 类模板卡片（劳动合同/违纪通知/解除通知/协商协议/保密竞业/规章制度）
```

**制度公示进度条**：
- 4 步流程：起草 → 职工讨论 → 平等协商 → 公示
- `progress-step`（done/current/未开始）+ `progress-line`（done/未完成）

---

#### PAGE 9: 电子签中心 `#page-esign`（行 4653-4860）

**定位**：客户咨询 TOP 1 功能

**布局结构**：
```
├── es-stats（4 指标）
│   ├── 5 待签合同
│   ├── 23 本月已签
│   ├── 2.3 min 平均签署用时
│   └── 100% 证据链合规率
├── es-quickactions（3 快捷入口）
│   ├── 发起新签（最常用）- AI 预审 + 自动催签
│   ├── 从模板签 - 12 套法律模板
│   └── 语音发起 - 语音指令自动调起
├── es-list-card（待签合同列表 5 项）
│   ├── 张三劳动合同（⚠ 已 AI 审出 3 处高风险）→ [先 AI 审改]
│   ├── 王红保密协议（✓ AI 已通过）→ 1/2 签 → [催签]
│   ├── 李华协商解除（✓ AI 已通过）→ 0/2 签 → [发起]
│   ├── 考勤制度公示确认书（47 人）→ [批量发起]
│   └── 10 月工资条（42/47 已签）→ [催 5 人]
└── es-capabilities（AI 增强能力 4 项）
    ├── 签前 AI 审查
    ├── 证据链 5 维留痕（时间戳/IP/设备/生物/区块链）
    ├── 多渠道签署（PC/App/小程序/短信）
    └── 智能催签（6h/24h/3天 多频率）
```

---

#### PAGE 10: 申请草稿 `#page-apply-saved`（行 4861-4885）

- 筛选：申请项下拉 + 关键词搜索
- 表格：序号/申请项/接收人/保存时间/状态（草稿）/操作（继续编辑/删除）
- 3 条示例数据

---

#### PAGE 11: 已发申请 `#page-apply-sent`（行 4890-4918）

- 筛选：申请项/接收人/状态/发起时间范围
- 表格：序号/申请项/接收人/发起时间/状态/签署状态/操作（详情/撤销）
- 5 条示例数据，含进行中/已撤销/已完成状态

---

#### PAGE 12: 入职管理 `#page-onboard`（行 4919-4950）

- 筛选：姓名/身份证号
- 表格：姓名/性别/手机号/身份证号/员工状态（在职/待入职）/操作
- 8 条示例数据

---

#### PAGE 13: 合同管理 `#page-contract`（行 4955-4994）

- 统计条：全部 125 / 劳动合同 73 / 劳务合同 7 / 非全日制 0 / 其他协议 45 / 试用期即将到期 0 / 劳动合同即将到期 0
- 筛选：合同类型/合同状态/创建时间
- 表格：合同名称/类型/归属人/起始/到期/状态/操作（查看/下载/删除）

---

#### PAGE 14: 考勤确认 `#page-attendance`（行 4999-5030）

- 使用说明：仅支持标准模板 / 员工在小程序确认
- 筛选：姓名 + 日期范围
- 表格：姓名/员工确认情况（已反馈/已读）/发布时间/操作

---

#### PAGE 15: 工资条发布 `#page-payslip`（行 5035-5072）

- 使用说明：标准模板 / 小程序查看 / 定时发送可取消
- 筛选：姓名 + 日期范围
- 操作：[定时发送记录] [发布工资条]
- 表格：姓名/标题/确认情况（未读/已读/已反馈）/发布状态/发布时间/操作

---

#### PAGE 16: 规章制度民主程序 `#page-democracy`（行 5077-5157）

- 使用说明：上传到企业文本库后发起 / 按部门发布 / 半数无异议视为通过
- 发起表单：选择文件/标题/表决人员（全体或按部门）/截止日期/说明
- Tab 切换：民主记录 / 公示记录
- 民主记录表格：序号/文本名称/发起时间/表决人员/民主状态/操作（详情/发起公示）
- 公示记录表格：序号/文本名称/公示开始/公示结束/状态/操作

---

#### PAGE 17: 企业文本库 `#page-enterprise-text`（行 5162-5199）

- 使用说明：新建企业文本 / 参考模板库 / 当前仅支持规章制度类型
- 筛选：文本名称/文本类型
- 表格：文本编号/名称/类型/创建人/创建时间/操作（预览/民主公示/更多）

---

#### PAGE 18: 用工文本模板库 `#page-template-text`（行 5204-5236）

- 使用说明：法律团队审核，遵循最新劳动法规
- 筛选：分类/关键词
- 表格：模板名称/分类/更新时间/说明/操作（预览/下载/引用为企业文本）
- 8 个模板：员工手册/固定期限劳动合同/非全日制/劳务合同/培训服务协议/保密竞业/解除通知书/离职证明

---

#### PAGE 19: 用工体检诊断 `#page-health-check`（行 5241-5301）

- 英雄区：年度合规体检 + 诊断报告说明
- 左栏：6 个诊断维度卡片（合同管理/规章制度/社会保险/背景调查/工作时间/保密竞业）+ [开始诊断]
- 右栏：3 份年度诊断报告列表（2025/2024/2023），含分数和风险等级

---

#### PAGE 20: 背景调查 `#page-bgcheck`（行 5306-5417）

- 英雄区：温馨提示 + 免费 22 次 / 付费 0 次
- Tab：发起背调 / 背调记录
- 发起背调：
  - 5 项背调内容：身份信息/不良记录/吸毒记录/诉讼记录/网贷黑名单
  - 候选人信息表单 + 额度说明 + 知情同意
- 背调记录：筛选 + 表格（序号/候选人/身份证/订单状态/创建时间/操作）

---

#### PAGE 21: 视频中心 `#page-video`（行 5422-5500）

- 搜索：关键词 + 分类下拉（8 类）
- 8 个视频课程卡片：
  - 模块一：招聘与试用期风险管理（28 分钟）
  - 模块二：培训与服务期风控管理（32 分钟）
  - 模块三：保密与竞业限制风控管理（26 分钟）
  - 模块四：调岗调薪风险管理（24 分钟）
  - 模块五：规章制度民主程序（30 分钟）
  - 模块六：考勤与加班管理（22 分钟）
  - 模块七：解除与离职管理（35 分钟）
  - 专题：仲裁应对实务专题（48 分钟）

---

#### PAGE 22: 五险一金计算器 `#page-tool-shebao`（行 5505-5573）

- 使用说明：按城市最新缴费比例计算
- 表单：缴纳城市/是否社保/社保类型/社保基数/工伤保险/是否公积金/公积金比例/公积金基数
- [立即计算] [重置] 按钮
- 计算结果区域（空状态提示）

---

#### PAGE 23: 医疗期计算器 `#page-tool-medical`（行 5578-5629）

- 表单：所在地区（上海/全国）/入职日期/截止日期/累计病休天数
- [立即计算] [重置] 按钮
- 计算规则 & 法律依据（3 条法规原文）

---

#### PAGE 24: 通知管理 `#page-notice`（行 5634-5662）

- 筛选：类型（系统/合同到期/试用期/民主程序/背调结果）/状态/关键词
- [全部标为已读] 按钮
- 表格：类型/标题/接收人/发送时间/状态/操作

---

#### PAGE 25: 用户管理 `#page-user-mgmt`（行 5667-5712）

- 左右布局：组织架构树 + 用户列表
- 组织架构：公司 → 部门 → 子部门（2 级展开）
- 筛选：关键词/状态
- 表格：复选框/账号/姓名/性别/手机/状态/操作（编辑/更多）

---

#### PAGE 26: 系统日志 `#page-syslog`（行 5717-5747）

- 筛选：操作人/操作类型/模块/时间范围
- 表格：操作时间/操作人/账号/操作类型/模块/操作内容/IP
- 1,247 条记录，125 页分页

---

## 四、JavaScript 交互逻辑（行 5761-6366）

### 4.1 页面切换机制

```javascript
function switchPage(pid) {
  // 1. 清除所有 nav-item / nav-sub 的 active
  // 2. 匹配 data-page 的导航项加 active
  // 3. 展开所在分组
  // 4. 切换 page 的 active 类
  // 5. 滚动到顶部
}
```

- 一级导航 `nav-item[data-page]` 点击切换
- 二级导航 `nav-sub[data-page]` 点击切换（`stopPropagation`）
- 分组头 `nav-group-head` 点击折叠/展开
- 默认仅"白小侠 AI"分组展开

### 4.2 Tab 切换逻辑

| Tab 位置 | 切换逻辑 |
|----------|---------|
| 合规中心 | `cc-tab[data-tab]` → 切换 `cc-panel` 的 `active` |
| 民主程序 | `data-democracy-tab` → 切换 `democracy-panel` 的 `display` |
| 背景调查 | `data-bg-tab` → 切换 `bg-panel` 的 `display` |
| 风险报告 | `fr-risk-tab` → 切换 `active` + 筛选风险卡片 |

### 4.3 文件审查左右联动

- **点击风险卡片** → 左侧原文 `scrollIntoView({behavior:'smooth'})` + `boxShadow` 闪烁 1.5s
- **点击"一键采纳"** → 原文高亮 `<span>` 被替换为绿色 `✓ 建议文本`，卡片半透明，按钮变为"已采纳"

### 4.4 后端 API 对接

#### API 基础配置
```javascript
var API_BASE = 'http://127.0.0.1:8000';
```

#### 4.4.1 白小侠对话（SSE 流式）

| 项目 | 内容 |
|------|------|
| 端点 | `POST /api/chat` |
| 请求体 | `{ message, user_id, chat_id }` |
| 响应 | SSE 流，每事件含 `content.parts[]` |
| 事件解析 | 按 `\n\n` 分割事件，提取 `data:` 行 JSON |
| 渲染 | `aiText.textContent = full` 实时更新 |
| 错误处理 | 连接失败显示提示信息 |
| 转专家 | `POST /api/transfer_expert` → 返回 `ws_path` + `redis_ready` |
| 新对话 | 清空消息 + 重新生成 `chat_id` |

#### 4.4.2 判赔预测

| 项目 | 内容 |
|------|------|
| 端点 | `POST /api/case/predict` |
| 请求体 | `{ question, monthly_salary, work_years, area }` |
| 响应 | `{ success, options: [{ key, amount_min, amount_max }], estimated, area }` |
| 方案映射 | `forced_terminate` → 红卡 / `negotiate` → 黄卡 / `adjust` → 绿卡 |
| 金额展示 | 中位数 = `(min+max)/2`，区间用 `_moneyK()` 格式化 |

#### 4.4.3 文件审查

| 项目 | 内容 |
|------|------|
| 上传 | `POST /api/upload`（FormData）→ `{ file_id, size_bytes, page_count }` |
| 审查 | `POST /api/contract/review`（JSON）→ `{ success, risks[], summary, elapsed_ms }` |
| 导出 | `POST /api/contract/export`（JSON）→ `{ success, original_text, replacements[] }` |

**风险对象结构**：
```json
{
  "risk_id": "r1",
  "risk_level": "high|medium|low",
  "clause_no": "第一条",
  "clause_title": "合同期限",
  "original_text": "合同期限为六年",
  "highlight": "六年",
  "risk_reason": "超长固定期限...",
  "legal_basis": "《劳动合同法》第14条",
  "replacement": "本合同期限为三年...",
  "tag": "判例 12 起"
}
```

**渲染逻辑**：
- `renderDoc(risks)`：左侧原文，每条款用 `hlText()` 高亮关键词
- `renderCards(risks)`：右侧风险卡片，含等级标签/原文/问题/建议/操作
- `setTabs(summary)`：风险等级筛选 Tab + 计数
- 点击卡片 → 左侧定位闪烁
- 导出 → 替换原文生成 `.txt` 下载

### 4.5 辅助函数

| 函数 | 用途 |
|------|------|
| `_esc(s)` | HTML 转义（防 XSS） |
| `_money(n)` | 金额格式化 `¥12,000` |
| `_moneyK(n)` | 金额缩略 `¥12k` |
| `num(s)` | 从字符串提取数字 |
| `years(s)` | 从字符串提取工龄年数 |

### 4.6 其他交互

- **浮动 AI 按钮**：hover 显示提示文字
- **AI 搜索框 placeholder**：每 3.5 秒轮播 5 个热门问题
- **业务卡片点击**：高亮选中 + alert 提示（原型演示）
- **申请草稿/已发申请跳转**：`apply-jump[data-page]` 点击 `switchPage()`
- **光标闪烁动画**：`@keyframes bxblink` + loader 旋转 `@keyframes bxspin`

---

## 五、设计模式与数据流总结

### 5.1 风险分级体系

| 等级 | 颜色 | 色值 | 使用场景 |
|------|------|------|---------|
| 极高/高 | 红 | `#C00000` | 合同未签/双倍工资风险/败诉率高 |
| 中 | 黄 | `#D97706` | 即将到期/制度未公示/绩效不达标 |
| 安全 | 绿 | `#16A34A` | 已签合同/已公示/合规 |
| 知识 | 紫 | `#6D28D9` | 行业判例/知识推荐 |
| 信息 | 蓝 | `#2E75B6` | 一般信息/操作按钮 |

### 5.2 AI 能力分层

```
AI 90% → 自动检测/建议/预测/审查
专家 9% → 转人工专家（复杂问题）
律师 1% → 仲裁应急/律师终审
```

### 5.3 核心业务流程

```
风险驾驶舱（首页）
  ├── AI 预警 → 点击"立即处理" → 跳转对应模块
  ├── AI 建议 → 点击操作按钮 → 跳转对应功能
  └── 我要办理 → 点击业务卡片 → 打开起草表单

白小侠 AI 对话
  ├── 用户提问 → SSE 流式回复
  ├── 查看判例 → 判例详情
  ├── 生成协商方案 → 方案文档
  ├── 场景推演 → 判赔预测器
  └── 转人工专家 → WebSocket 通道

判赔预测器
  ├── 选择场景 → 填写信息 → AI 预测
  └── 三档方案对比 → 采用方案 → 执行步骤

文件 AI 审查
  ├── 上传文件 → AI 解析 → 风险报告
  ├── 查看原文高亮 → 一键采纳 → 替换文本
  └── 导出修改版 → 下载 / 请律师终审

合规中心
  ├── AI 巡检 → 5 维评分 → 待办清单
  ├── 合同管理 → AI 审改 → 签署
  ├── 制度公示 → 民主程序 4 步 → 公示
  └── 文本模板 → 引用为企业文本 → 民主公示

电子签中心
  ├── 发起新签 → AI 预审 → 催签
  ├── 从模板签 → 选择模板 → 填写 → 发起
  └── 语音发起 → 语音识别 → 自动调起
```

---

## 六、与 React 实现的对应关系

| HTML 原型页面 | React 路由 | React 组件 | 实现状态 |
|-------------|-----------|-----------|---------|
| 风险驾驶舱 | `/` | `Dashboard.tsx` | ✅ 已实现（简化版） |
| 白小侠 AI 对话 | `/ai-assistant` | `AIAssistant.tsx` (chat tab) | ✅ 已实现 |
| 判赔预测器 | `/ai-assistant` | `AIAssistant.tsx` (predict tab) | ✅ 已实现 |
| 文件 AI 审查 | `/ai-assistant` | `AIAssistant.tsx` (review tab) | ✅ 已实现 |
| 全员风险地图 | `/roster` | `Roster.tsx` | ✅ 已实现（花名册） |
| 个人风险档案 | `/roster` | `Roster.tsx` (详情面板) | ✅ 已实现 |
| 合规中心 | — | — | ❌ 未独立实现 |
| 电子签中心 | — | — | ❌ 未实现 |
| 入职管理 | `/roster` | `Roster.tsx` (入职 Tab) | ✅ 集成在花名册 |
| 合同管理 | `/roster` | `Roster.tsx` (合同 Tab) | ✅ 集成在花名册 |
| 考勤确认 | — | — | ❌ 未实现 |
| 工资条发布 | `/money` | `Money.tsx` (payslip tab) | ✅ 已实现 |
| 规章制度民主程序 | — | — | ❌ 未实现 |
| 企业文本库 | — | — | ❌ 未实现 |
| 用工文本模板库 | — | — | ❌ 未实现 |
| 用工体检诊断 | — | — | ❌ 未实现 |
| 背景调查 | — | — | ❌ 未实现 |
| 视频中心 | — | — | ❌ 未实现 |
| 五险一金计算器 | `/social` | — | ⚠️ 路由存在，组件待确认 |
| 医疗期计算器 | — | — | ❌ 未实现 |
| 通知管理 | — | — | ❌ 未实现 |
| 用户管理 | `/settings` | — | ⚠️ 路由存在，组件待确认 |
| 系统日志 | — | — | ❌ 未实现 |
| 申请草稿/已发申请 | — | — | ❌ 未实现 |

---

## 七、关键发现与建议

### 7.1 原型亮点
1. **AI 驱动设计**：每个页面都嵌入 AI 能力（预警/建议/预测/审查/巡检）
2. **风险量化体系**：78 分健康度 + 7 维评分 + 金额区间预测，让抽象法律风险可视化
3. **三档方案对比**：判赔预测器的红/黄/绿三档方案 + 操作步骤，决策支持性强
4. **左右联动审查**：文件审查的原文高亮 ↔ 风险卡片联动 + 一键采纳，交互体验好
5. **价值量化报告**：年度 AI 价值报告将 SaaS 产品价值量化为 ROI（1,330%），利于续约

### 7.2 React 实现差距
- **未实现模块**：合规中心、电子签、民主程序、企业文本库、背景调查、视频中心、计算器工具等约 14 个模块
- **Dashboard 差异**：原型强调 AI 预警 + 风险评分 + AI 建议流，React 版偏重统计卡片 + 成本概览
- **导航差异**：原型用左侧 Sidebar 分组菜单（信息密度高），React 用顶部 Tab（6 个入口）

### 7.3 后端 API 对接状态
原型已完整对接 3 个核心 API：
- `/api/chat`（SSE 流式对话）
- `/api/case/predict`（判赔预测）
- `/api/upload` + `/api/contract/review` + `/api/contract/export`（文件审查）

React 前端使用 `api` 封装库统一调用，需确认上述 API 路径是否一致。
