selfrelease
d79e3baa34
- 面包屑导航组件，集成至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
814 lines
34 KiB
Markdown
814 lines
34 KiB
Markdown
# 白话用工侠_测试页面.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 路径是否一致。
|