# 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. 点击某一案例卡片，进入案例详情： - 阅读案件事实、法院判决、调解过程和结果。 - 结合当前案件进行比对。 4. 返回列表或从详情页跳转到“类案推荐”页面查看更多相似案例。 #### 5.3 法条检索与引用流程 1. 在法条搜索页面输入法律名称或关键字，设置效力层级、时效性等筛选。 2. 点击“查询”，浏览法律列表；如需只看某类法律，通过筛选器限定范围。 3. 点击某法律卡片进入法条详情页： - 通过章节导航快速定位到“工资”、“工作时间”等章节。 - 阅读具体条文，必要时标记或复制。 4. 回到调解协议编辑页，将条文内容写入协议或作为参考说明。 #### 5.4 类案推荐与调解辅助流程 1. 进入“类案及法条推荐”页面（从主页或案例详情中跳转）。 2. 浏览左侧 TOP3 相似案例，展开详情查看具体处理方式。 3. 右侧查看推荐法条，理解法律依据。 4. 将关键结论或法条应用到当前调解方案和协议条款中。 #### 5.5 材料审核与证据汇总流程 1. 在“材料审核”页面查看材料基本信息与说明。 2. 对每一条材料进行预览（工资单、考勤等）。 3. 根据审核结果： - 如材料充分 → 点击“审核通过”。 - 如需要补充 → 点击“退回补充”，填写说明并提交。 4. 审核结果在主页“证据材料汇总”卡片和后端案件状态中体现。 #### 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 可维护性 - 前端代码结构清晰，组件划分合理，避免重复实现。 - 样式遵循统一变量（颜色、间距、圆角等），便于后续整体改版。