Project Context

Purpose

[Describe your project's purpose and goals]

Tech Stack

• [List your primary technologies]
• [e.g., TypeScript, React, Node.js]

Project Conventions

Code Style

[Describe your code style preferences, formatting rules, and naming conventions]

Architecture Patterns

[Document your architectural decisions and patterns]

Testing Strategy

[Explain your testing approach and requirements]

Git Workflow

[Describe your branching strategy and commit conventions]

Domain Context

[Add domain-specific knowledge that AI assistants need to understand]

Important Constraints

[List any technical, business, or regulatory constraints]

External Dependencies

[Document key external services, APIs, or systems]

Product Requirements (PRD)

1. 文档概述

1.1 项目背景

“云小调”是面向劳动争议场景的 AI 调解智能体 Web 系统，当前阶段只包含前端项目（web-app），后端和大模型能力通过后续接口接入。系统通过集成案例知识库、法律法规库、智能类案推荐和欠薪计算等能力，为调解员、基层综治工作人员和当事人提供全流程线上辅助，提升劳动争议调解的效率与质量。

1.2 项目目标

• 提升调解效率：通过标准化的案件搜索、法条检索、类案推荐和协议模板编辑，减少人工查询与文书撰写时间。
• 提高调解质量：用法条、类案、证据材料等多维信息支撑调解方案，提升调解结果的规范性和可说服力。
• 辅助非专业人员办案：通过可视化看板、计算器、操作引导等方式，让基层工作人员也能快速理解案件要点。
• 为后续 AI 能力铺路：各模块结构清晰、前后端接口规范，为接入 AI 智能体（自动分析、自动草拟协议等）预留空间。

1.3 范围说明

本 PRD 范围覆盖以下 9 个前端页面功能（对应原型 HTML）：
- 案例搜索（case_search.html）
- 案例详情（case_search_detail.html）
- 文档审核（doc_audit.html）
- 文档编辑 / 调解协议在线编辑（doc_edit.html）
- 法条搜索（law_search.html）
- 法条详情（law_search_detail.html）
- 类案推荐（similar_case.html）
- 欠薪计算（wage_arrears_calculation.html）
- 主页 / 调解看板（index.html）

不包含：后端接口实现、用户权限体系、登录及多租户管理等后台功能，仅规定前端展示和交互要求。

2. 功能需求

2.1 案例搜索功能（case_search.html）

2.1.1 功能定位

• 作为“知识库（典型案例）”的入口，为调解员提供典型案例的检索、筛选和浏览能力。
• 搜索结果以卡片列表展示，支持查看案件关键信息与类型标签，并进入案例详情页。

2.1.2 角色与使用场景

• 调解员 / 基层综治工作人员：在调解前或调解中快速查询相似案例。
• 法官辅助 / 专家用户（后期可扩展）：用于检索判例和指导性案例。

2.1.3 搜索与筛选条件

界面左侧为知识库导航，右侧为查询与结果区域。
- 查询条件区域（“查询条件”卡片）
- 关键字搜索：输入案件名称、案情摘要关键字。
- 案件属性选择（参考原型 .form-select、多列 grid 布局，可配置为）：
- 纠纷类型：如“劳动争议、邻里纠纷”等。
- 案件类型：如“调解案例、判决案例”。
- 地区选择：省 / 市 / 区三级（可初期简化为文本选择）。
- 时间范围：起止日期（date-input-group，支持“从-至”）。
- 操作按钮（button-group）：
- “查询”按钮：触发搜索。
- “重置”按钮：清空所有查询项。
- 高级筛选区域（filters-section）
- 采用三列卡片布局，每个 filter-category 包含标题和可勾选项：
- 示例：
- 纠纷类型分类：如“工资拖欠、工伤、加班费”等。
- 适用法条类别：如“劳动合同法、劳动法”等。
- 案件来源 / 审级：如“一审、二审、指导性案例”等。
- 支持多选，点击 filter-item 触发选中/取消，显示数量徽标（filter-count）。

2.1.4 结果列表展示

• 结果头部（results-header）
• 结果标题：“查询结果”。
• 总数显示（total-count）：如“共 126 条案例”。
• 结果列表（cases-list）
• 每条案例以 case-item 卡片展示：
  • 标题（case-title）：蓝色高亮，支持点击进入案例详情。
  • 元信息（case-meta）：多行标签样式，包含但不限于：发生时间、发生地点、纠纷类型、调解组织 / 审理机构等。
  • 案件类型徽标（case-type-badge）：
  • 判决案例：蓝色背景（judgment）。
  • 调解案例：绿色背景（mediation）。
• 分页（pagination）
• “上一页”、“下一页”按钮（支持 disabled 状态）。
• 当前页 / 总页数显示（page-info）。

2.1.5 行为逻辑

• 点击“查询”或任一筛选项后，刷新列表数据（前期 Mock）。
• 点击某个 case-item 跳转到“案例详情”页面（case_search_detail.html）。
• 重置按钮清空表单与筛选状态，并回到第一页。

2.2 案例详情功能（case_search_detail.html）

2.2.1 功能定位

• 展示单个典型案例的完整结构化内容，作为调解或类案推荐的详细参考。

2.2.2 内容结构

• 案件基本信息（case-info）：纠纷发生时间、发生地点、纠纷类型、调解组织 / 审理机构。
• 案例内容区（case-content），按多个 section 展示：
• 案例概述：案情简介、争议焦点。
• 原告诉讼请求：以有序列表展示具体诉讼请求。
• 法院审理与判决：包括审理过程要点及判决结果。
• 调解背景：说明为何适合调解、调解介入时机。
• 双方立场：分别阐述原告与被告观点。
• 调解过程：说明法官/调解员的调解思路和步骤。
• 调解方案与结果：调解方案细节和最终达成的协议内容。
• 适用法律条文（legal-articles）：列出相关法条，作为后续法条跳转依据。

2.2.3 行为与扩展

• 仅展示型页面，当前原型无编辑或收藏交互。
• 后续可扩展：
• “加入本案调解参考”按钮，将关键内容带回调解看板或协议编辑。
• “跳转法条详情”按钮，关联 law_search_detail.html。

2.3 文档审核功能（doc_audit.html）

2.3.1 功能定位

• 为调解组织后台提供对当事人上传材料（工资单、考勤记录等）的审核入口，支持查看材料说明、预览文件，并作出“审核通过 / 退回补充”的处理。

2.3.2 页面结构

• 提示信息（tip-box）：审核注意事项说明。
• 材料基本信息（material-info）：提交人、材料类型、材料数量、提交时间。
• 材料说明（material-description）：逐条说明材料来源与内容。
• 材料清单（material-list + list-table）：
• 表头：材料信息 / 材料预览。
• 每行材料包含：材料名称、材料类型、文件格式、上传时间、文件大小、“查看详情”按钮；右侧为预览缩略图及文件数说明。
• 审核操作区（action-buttons）：
• “审核通过”（btn-pass）。
• “退回补充”（btn-return）。

2.3.3 审核弹窗与交互

• 退回补充模态框（modal）：填写退回原因、需补充材料的说明，支持“取消 / 确认提交”。
• 图片预览模态框（image-modal）：展示大图，支持关闭操作。
• 行为逻辑：
• 点击“审核通过”提交通过结果。
• 点击“退回补充”打开 modal，填写并提交退回说明。
• 点击预览缩略图打开图片预览。

2.4 文档编辑 / 调解协议在线编辑（doc_edit.html）

2.4.1 功能定位

• 提供标准调解协议书模板，在页面中直接编辑协议编号、当事人信息、争议事实、协议条款、金额和日期等内容，完成后统一保存。

2.4.2 结构与可编辑范围

• 顶部提示（note）：提示“带有下划线的文字可编辑，编辑完成后点击‘保存修改’”。
• 协议编辑区（agreement-editor / editor-area）：
• 标题“调解协议书”居中高亮。
• 可编辑字段统一使用 .editable + contenteditable="true"，包括：协议编号、甲方 / 乙方姓名、调解组织名称、纠纷类型、调解日期、纠纷事实中的人名、协议条款中的具体时间和金额、文末签字姓名和日期等。
• 不可编辑正文（uneditable）：协议法律术语和固定条款文本保持只读。
• 底部“保存修改”按钮触发保存逻辑。

2.4.3 行为逻辑

• 编辑行为：点击 editable 区域自动聚焦，光标移动到末尾，聚焦时背景高亮，失焦后恢复。
• 保存逻辑（前端）：
• 遍历所有 .editable 元素，读取内容并组装为 JSON（field_0, field_1, ...）。
• 当前实现通过 alert 提示“调解协议书已保存！”并在 console 输出内容。
• 实际对接后端时，应将 JSON 及协议全文一并提交接口。

2.5 法条搜索功能（law_search.html）

2.5.1 功能定位

• 作为“知识库（法律法规查询）”入口，从海量法律法规中检索相关法条，为调解方案和协议草拟提供法律依据。

2.5.2 页面结构与查询条件

• 左侧边栏（sidebar）：平台标题、导航菜单，当前项高亮。
• 顶部栏（top-bar）：面包屑（首页 > 知识库 > 法律法规查询）、用户信息区域（预留）。
• 查询条件区域（query-conditions）：
• 查询表单（query-form，两列 grid）：
  • 法律名称 / 关键字输入。
  • 法律效力层级。
  • 效力状态（现行有效、已废止、失效）。
  • 制定/实施日期范围（date-input-group）。
• 关键字搜索框（search-box）：支持全文关键字搜索。
• 按钮组：“查询”、“重置”。
• 筛选器区域（filters-section）：
• 法律类型、发布机关、适用领域等多选筛选项（filter-checkbox）。

2.5.3 法条列表与内容概览

• 查询结果头部（results-header）：结果标题和查询条件摘要（query-conditions-summary）。
• 结果列表（laws-list）：
• law-item 包含法律名称（law-title）、元信息（法效力、时效性、制定机关、发布日期、实施日期等）和条文内容概览（law-content + article-number）。
• 分页：页码信息（page-info）、翻页操作。

2.5.4 行为逻辑

• 点击某一法条卡片跳转法条详情页（law_search_detail.html），定位到该法律。
• 删除条件标签重新触发查询。

2.6 法条详情功能（law_search_detail.html）

2.6.1 功能定位

• 展示单部法律的详细信息与章节结构，支持快速跳转至章节和条文，方便调解员精准引用。

2.6.2 页面结构

• 顶部元信息区（law-header）：显示法律标题、时效性、法律效力位阶、制定机关、公布日期、实施日期等。
• 章节导航（chapter-nav）：
• 标题“章节导航”。
• 章节列表（chapter-list、chapter-link）：按照章节顺序排列，点击滚动至页面对应位置。
• 法条内容（law-content）：
• 每章一个 .chapter 区块：章节标题（chapter-title）+ 条文列表（article-item），条文包含条号（article-number）和条文内容（article-content）。
• 关键条文可用 .highlighted 标记，便于与欠薪计算器、案例等联动。

2.6.3 行为逻辑

• 点击章节导航链接进行页面内部跳转。
• 后续可扩展：
• “复制条文到剪贴板”。
• “加入当前案件参考法条”。

2.7 类案推荐功能（similar_case.html）

2.7.1 功能定位

• 根据当前案件特征（由 AI 或业务逻辑提供）推荐相似典型案例 TOP3 和关联法条，帮助调解员快速理解类似案件的处理方式。

2.7.2 页面布局

• 整体为左右分屏：
• 左侧：相似典型案例 TOP3（cases-section）。
• 右侧：关联法条列表（laws-section）。
• 页面固定高度，内部使用滚动区域（cases-list / laws-list），避免整个窗口滚动。

2.7.3 相似案例列表

• 标题：相似典型案例 TOP3。
• 每个 case-card：
• 卡片头部（case-header，可点击折叠）：
  • 案例标题（case-title）与“高相似度”标签（similarity-tag）。
  • 元信息（case-meta-container）：发生时间、地点、纠纷类型等。
  • 案件类型徽标（调解案例 / 判决案例）。
  • 展开/折叠按钮（toggle-btn）。
• 卡片内容（case-content，可展开）：
  • 按“案例概述、调解背景、原告诉讼请求、法院审理与判决、调解方案、调解结果”等分 section 展示，结构与案例详情页类似。

2.7.4 关联法条列表

• 顶部说明“已为您推荐 X 条相关法律条文”（laws-count）。
• 每条 law-card：
• 标题：法律名称或关键条文标题。
• 元信息（law-meta）：效力、适用范围等。
• 条文片段（law-content + article-number）。
• 点击 law-card 可高亮，后续可跳转到 law_search_detail 对应条文。

2.8 欠薪计算功能（wage_arrears_calculation.html）

2.8.1 功能定位

• 为当事人或调解员提供一个“欠薪计算器”，按照劳动法相关规则估算拖欠工资、加班费、经济补偿金和滞纳金，作为谈判和调解的参考依据。

2.8.2 输入项

左侧“填写欠薪信息”模块：
- 月平均工资（salary）：数字输入，含税前工资、奖金、津贴等。
- 欠薪月数（unpaidMonths）：支持小数，如 2.5 个月。
- 每月平均加班时长（overtimeHours）：小时数。
- 经济补偿金类型（compensationType）：
- 无需支付。
- 工作不满半年，支付半个月工资。
- 工作半年以上，支付一个月工资。
- N 个月工资（根据工作年限，需输入 yearsOfWork）。
- 工作年限（yearsOfWork）：仅当选择“N 个月工资”时展示。
- 欠薪持续时间（startDate, endDate）：起止日期，用于滞纳金估算。
- 操作按钮：“计算欠薪总额”、“重置数据”。

2.8.3 计算结果展示

右侧“计算结果”模块显示：
- 基本欠薪总额（basicUnpaid）。
- 加班费总额（overtimeUnpaid）。
- 经济补偿金（compensation）。
- 滞纳金（估算）（lateFee）。
- 欠薪总计（totalUnpaid，单独高亮）。

下方“法律提示”区域列出与工资支付、拖欠责任有关的法规摘要，并说明计算结果仅供参考。

2.8.4 计算规则（前端逻辑）

• 基本欠薪：basicUnpaid = salary × unpaidMonths。
• 加班费：
• 小时工资 = salary ÷ 21.75 ÷ 8。
• 加班费 = 小时工资 × 1.5 × 加班小时 × 欠薪月数。
• 经济补偿：
• 若类型为 N：compensation = salary × yearsOfWork。
• 否则：compensation = salary × 对应倍率。
• 滞纳金估算：
• 天数 = max(0, floor((endDate − startDate)/1天)).
• 滞纳金 = basicUnpaid × 0.0005 × daysDiff。
• 总计：totalUnpaid = basicUnpaid + overtimeUnpaid + compensation + lateFee。

重置行为：恢复默认输入值，并将所有结果置为“0.00 元”。

2.9 主页功能 / 调解看板（index.html）

2.9.1 功能定位

• 系统主工作台，聚合当前案件关键信息、AI 调解进度、调解数据分析、证据材料汇总、调解协议相关卡片等，为调解全流程提供总览。

2.9.2 页面结构

• 顶部区域（top-section）：
• 左侧：系统标题“云小调劳动争议 AI 调解智能体”、副标题。
• 状态标签（ai-status-tag）：显示 AI 在线/离线状态。
• 右侧：当前案件信息（案号、当事人、案件阶段等）和“运行状态 / 当前时间”等状态信息。
• 中部主体区域（middle-section），左右分为：
• 区域 A：左侧主要工作区（area-a）
  • AI 调解进度（mediation-progress）：步骤条（progress-steps），包括“案件导入、事实梳理、争议焦点识别、调解方案生成、协议确认”等环节，节点有 active/completed 状态。
  • 选项卡容器（tab-container）：
  • 头部（tab-header）：
    • “调解数据分析”tab：展示成功率、结案率等指标（success-metric）。
    • “AI 调解看板”tab：展示 AI 分析结论、风险提示等内容。
    • “证据材料汇总”tab：展示当事人证据汇总。
    • “调解协议”tab：显示或跳转到协议编辑。
  • 内容区域（tab-content-area）：
    • 调解数据分析：metric-card 展示成功率、调解平均时长、历史案件对比等；包含“诉求差距分析”（gap-analysis：列出双方诉求金额/条件差异）。
    • 证据材料汇总（evidence-summary）：
    • 申请方、被申请方各一个 party-evidence 卡片。
    • 每方展示证据列表（evidence-list）：证据名称、简要说明、上传时间、查看按钮等。
    • 调解协议：显示协议状态（草拟中 / 已确认）、摘要与“进入编辑”按钮（跳转 doc_edit）。
• 区域 B：右侧区域（可用于 AI 对话区、待办提醒、重要风险提示等后续扩展）。

2.9.3 主要交互

• 点击进度条节点：高亮当前步骤，后续可联动具体页面。
• 切换 tab：在不同模块间切换视图。
• 在“证据材料汇总”中：点击某证据的“查看”可跳转到文档审核或预览页面。
• 在“调解协议”tab 中：提供入口跳转 doc_edit。

3. 用户界面设计要点（UI/UX）

3.1 视觉风格

• 主色系：蓝色渐变（#1a6fb8 / #0d4a8a），与原型一致。
• 辅色：绿色（成功）、黄色（提示）、红色（危险），用于状态和标签。
• 布局：适度留白，卡片 + 阴影风格，典型结构为左侧导航 + 右侧内容区域或上下分区。
• 字体：'Microsoft YaHei' + 'Segoe UI'，字号按原型设置（标题 1.4–1.8rem，正文 0.9–1rem）。

3.2 交互元素

• 表单：输入框与下拉框边角圆润，聚焦时显示蓝色边框和浅色阴影；日期选择使用原生 date 输入控件配合图标和提示文案。
• 按钮：主按钮蓝底白字，悬浮时颜色加深并轻微上浮；次按钮浅灰色背景。
• 卡片：hover 时加深阴影以及边框颜色，突出可点击性。
• 标签与徽标：类别 / 状态使用胶囊型 badge（如案件类型、相似度等）。

3.3 交互反馈与可用性

• 所有可点击元素（按钮、卡片、tab、折叠箭头）需提供 hover 状态。
• 重要操作（通过、退回、保存协议、重新计算）需进行 toast 或 modal 提示。
• 表单校验失败时给出靠近字段的错误提示。

4. 技术要求和约束

4.1 前端技术栈

• 框架：React（web-app 已初始化），组件库使用 Ant Design 4.24.12。
• 语言：JavaScript（ES6+）。
• 样式：优先使用 AntD 组件 + 自定义 CSS/LESS，保持与原型视觉一致。

4.2 数据与环境

• 数据来源：
• 当前阶段全部使用本地 Mock 数据（前端内置或本地 Mock 服务）。
• 后续对接后端 API 时，接口返回结构尽量贴近原型卡片字段（如 caseMeta、lawMeta 等）。
• 环境区分：
• dev：Mock 或部分联调。
• test/prod：禁止使用 Mock 数据，改为真实接口。

4.3 组件与结构要求

• 尽量拆分为可复用组件（如：案件卡片、法条卡片、证据项、步骤条、分页等），避免重复代码。
• 页面路由建议基于 React Router，路由路径与业务含义对应（/cases, /cases/:id, /laws, /laws/:id, /similar, /calculator 等）。

4.4 其他约束

• 所有页面需兼容常用分辨率（≥1366×768），并具备基本响应式能力。
• 不引入新的 UI 框架或状态管理库前，应优先在现有结构上迭代。

5. 交互流程描述（核心流程）

5.1 从主页到知识库的使用流程

1. 用户登录后进入主页（index）。
2. 在主页查看当前案件概况、AI 调解进度、调解数据分析。
3. 如需参考案例或法条：

• 点击导航进入“案例搜索”或“法条搜索”；或
• 从 AI 调解看板 / 类案推荐区域点击跳转。

5.2 案例检索与使用流程

1. 在案例搜索页面设置关键字、时间范围、纠纷类型等条件。
2. 点击“查询”，查看列表与分页。
3. 点击某一案例卡片，进入案例详情：

• 阅读案件事实、法院判决、调解过程和结果。
• 结合当前案件进行比对。

1. 返回列表或从详情页跳转到“类案推荐”页面查看更多相似案例。

5.3 法条检索与引用流程

1. 在法条搜索页面输入法律名称或关键字，设置效力层级、时效性等筛选。
2. 点击“查询”，浏览法律列表；如需只看某类法律，通过筛选器限定范围。
3. 点击某法律卡片进入法条详情页：

• 通过章节导航快速定位到“工资”、“工作时间”等章节。
• 阅读具体条文，必要时标记或复制。

1. 回到调解协议编辑页，将条文内容写入协议或作为参考说明。

5.4 类案推荐与调解辅助流程

1. 进入“类案及法条推荐”页面（从主页或案例详情中跳转）。
2. 浏览左侧 TOP3 相似案例，展开详情查看具体处理方式。
3. 右侧查看推荐法条，理解法律依据。
4. 将关键结论或法条应用到当前调解方案和协议条款中。

5.5 材料审核与证据汇总流程

1. 在“材料审核”页面查看材料基本信息与说明。
2. 对每一条材料进行预览（工资单、考勤等）。
3. 根据审核结果：

• 如材料充分 → 点击“审核通过”。
• 如需要补充 → 点击“退回补充”，填写说明并提交。

1. 审核结果在主页“证据材料汇总”卡片和后端案件状态中体现。

5.6 调解协议编辑与确认流程

1. 在主页“调解协议”模块点击“编辑协议”，进入在线编辑页。
2. 根据实际情况修改协议编号、当事人信息、事实描述、履行期限、金额等字段。
3. 完成编辑后点击“保存修改”，前端将编辑内容采集为结构化数据。
4. 后端将协议存档并返回保存结果，页面提示保存成功。
5. 最终协议可通过后端生成 PDF、组织打印签字或电子签名（后续阶段实现）。

5.7 欠薪计算使用流程

1. 在欠薪计算器页面，填写月平均工资、欠薪月数、加班时长、经济补偿类型和时间范围。
2. 点击“计算欠薪总额”，右侧立即显示各项金额和总计。
3. 若时间范围不合法（结束早于开始），前端提示并自动纠正。
4. 用户可根据结果与对方协商赔付金额，并在调解协议中引用数字。

6. 非功能性需求

6.1 性能

• 常规查询操作（本地 Mock）应在 300ms 内返回并渲染页面。
• 列表分页切换无明显卡顿，滚动流畅；大文本（法条、案例详情）渲染时可按分页或折叠方式优化体验。

6.2 安全与隐私

• 前端不在本地持久化存储敏感信息（如身份证号、联系方式），仅在运行时内存中处理。
• 调解协议、案例内容、证据信息的保存和传输在后端需采用加密与访问控制。

6.3 易用性与可访问性

• 支持键盘导航（Tab、Enter）操作主要表单和按钮。
• 重要操作（通过、退回、保存）需二次确认或明显提示，避免误操作。
• 所有中文文案简洁明确，必要处提供“提示说明”。

6.4 兼容性

• 浏览器：优先兼容 Chrome、Edge 主流版本；在 1366×768 及以上分辨率良好展示。
• 移动端：关键页面（协议编辑、欠薪计算、法条详情）需保证基本可用（布局自动单列、文字不溢出）。

6.5 可维护性

• 前端代码结构清晰，组件划分合理，避免重复实现。
• 样式遵循统一变量（颜色、间距、圆角等），便于后续整体改版。