"云小调"是一个劳动争议AI调解智能体Web应用，需要构建一个功能完整、UI精美、交互流畅的前端系统。项目当前处于初始化阶段，已有基础React脚手架，需要在此基础上完成9个核心业务页面的开发。
选择: React 19.2.3 + Ant Design 4.24.12 + React Router DOM 6.22.3
理由:
- React是当前主流的前端框架，组件化思想适合本项目
- Ant Design提供丰富的企业级组件，能快速实现原型效果
- React Router是React生态的标准路由方案
替代方案考虑:
- Vue + Element UI：团队React经验更丰富
- 纯HTML+jQuery：不利于后续维护和扩展
选择: 创建独立的services层，通过Promise包装Mock数据
理由:
- 服务层作为数据请求的统一入口，便于后续替换真实API
- Mock数据可以完整模拟业务场景，支持前端独立开发
- 通过300ms延迟模拟网络请求，测试加载状态
实现方式:javascript // services/caseService.js export const fetchCaseList = (params) => { return new Promise((resolve) => { setTimeout(() => { resolve(mockCaseList); }, 300); }); };
选择: 采用pages + components分层结构，components按功能模块划分
理由:
- 清晰的目录结构便于查找和维护
- 功能模块化便于团队协作开发
- 符合React项目的最佳实践
目录结构: src/ ├── pages/ # 页面级组件（路由组件） │ ├── CaseSearchPage.jsx │ ├── LawSearchPage.jsx │ └── ... ├── components/ # 业务组件（按功能模块） │ ├── case/ # 案例相关组件 │ ├── law/ # 法条相关组件 │ ├── tools/ # 工具类组件 │ └── common/ # 通用组件 ├── services/ # 服务层 ├── mocks/ # Mock数据 └── utils/ # 工具函数
选择: 优先使用AntD原生组件，最小化自定义CSS
理由:
- AntD组件已经过大量项目验证，稳定可靠
- 保持视觉风格一致性
- 减少样式维护成本
例外情况:
- 原型HTML中的特殊渐变效果（Header背景）
- 特定的卡片hover效果
- 自定义的步骤条样式（调解看板）
选择: 全部使用函数组件，通过useState、useEffect管理状态
理由:
- 函数组件是React官方推荐的现代写法
- Hooks提供简洁的状态管理和副作用处理
- 代码更简洁、易读
示例模式:
```javascript
const CaseSearchPage = () => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState({ list: [], pageInfo: {} });
useEffect(() => {
loadData();
}, []);
// ...
};
```
风险: 原型HTML使用自定义CSS，AntD组件可能无法完全匹配视觉效果
缓解措施:
- 通过AntD的style props和className进行微调
- 对于关键视觉元素（如渐变Header），使用内联样式覆盖
- 定期与原型进行视觉比对
风险: 多个页面同时开发，可能出现组件重复、样式不一致
缓解措施:
- 先完成3个样板页面（案例搜索、法条搜索、欠薪计算器）
- 提取通用组件（PaginationBar、Breadcrumb等）
- 建立组件复用指南文档
风险: Mock数据结构可能与后续真实API不匹配
缓解措施:
- 基于PRD文档设计Mock数据结构
- 服务层提供统一接口，降低后续改动成本
- Mock数据作为API接口文档参考
选择: 优先保证核心功能实现，代码质量次之
理由: 当前处于MVP阶段，需要快速验证业务流程
后续优化: 在完成基本功能后，进行代码重构和优化
选择: 采用中等粒度的组件划分（页面 -> 区域 -> 元素）
理由: 平衡复用性和开发效率，避免过度抽象
示例: CaseSearchForm作为一个完整表单组件，而不是拆分成多个Field组件
不适用（新项目初始化，无迁移需求）
Q: 案例详情页和法条详情页的Mock数据结构是否需要包含完整内容？
A: 是的，需要包含PRD中定义的所有字段，以便完整演示业务流程。
Q: 是否需要实现响应式布局？
A: 当前版本不需要，聚焦PC端（≥1366×768），移动端适配留待后续版本。
Q: 图片资源（如材料审核的缩略图）如何处理？
A: 使用占位图片URL（如placeholder.com），或在public/目录放置几张示例图片。
Q: 是否需要单元测试？
A: 当前版本不强制要求，优先完成功能实现，测试可在后续迭代中补充。
