Files

T

selfrelease d79e3baa34 feat: 系统优化Phase2 - 面包屑导航/侧边栏间距/制度公示阅读签收/模板变量中文化/通知类型补全

- 面包屑导航组件，集成至TopNav header
- 侧边栏菜单分组间距增大，分组间分隔线
- 制度公示员工阅读签收：PolicyReadRecord模型、portal路由、管理端阅读统计
- 修复Policies.tsx民主程序推进bug（字段名/API路径/参数）
- 用工文本模板变量名英文转中文显示
- 通知类型TYPE_LABELS补全(RISK_ALERT/SOCIAL_INS/OVERTIME_ALERT/PAYSLIP_READY)
- 通知示例数据补充
- h2标题统一为text-sm font-medium
- 新增run.md

2026-07-26 20:32:38 +08:00

34 KiB

Raw Blame History

白话用工侠_测试页面.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 全局变量

: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 页面切换机制

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 基础配置

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[] }`

风险对象结构：

{
  "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 原型亮点

AI 驱动设计：每个页面都嵌入 AI 能力（预警/建议/预测/审查/巡检）
风险量化体系：78 分健康度 + 7 维评分 + 金额区间预测，让抽象法律风险可视化
三档方案对比：判赔预测器的红/黄/绿三档方案 + 操作步骤，决策支持性强
左右联动审查：文件审查的原文高亮 ↔ 风险卡片联动 + 一键采纳，交互体验好
价值量化报告：年度 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 路径是否一致。

34 KiB Raw Blame History Unescape Escape

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

一、文件总体结构

技术栈

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

2.1 全局变量

2.2 核心组件样式清单

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

3.1 顶部栏 Topbar（行 2880-2910）

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

3.3 26 个页面模块详细分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.1 页面切换机制

4.2 Tab 切换逻辑

4.3 文件审查左右联动

4.4 后端 API 对接

API 基础配置

4.4.1 白小侠对话（SSE 流式）

4.4.2 判赔预测

4.4.3 文件审查

4.5 辅助函数

4.6 其他交互

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

5.1 风险分级体系

5.2 AI 能力分层

5.3 核心业务流程

六、与 React 实现的对应关系

七、关键发现与建议

7.1 原型亮点

7.2 React 实现差距

7.3 后端 API 对接状态

34 KiB

Raw Blame History

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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