# Capability: UI Foundation（UI基础设施）

## ADDED Requirements

### Requirement: 应用布局结构
系统SHALL提供标准的应用布局结构。

#### Scenario: 渲染主布局
- **WHEN** 应用加载完成
- **THEN** 显示顶部Header（标题："云小调"劳动争议 AI 调解智能体）
- **AND** 显示左侧Sider（导航菜单）
- **AND** 显示主内容区Content（路由内容）
- **AND** 整体使用AntD Layout组件

#### Scenario: 导航菜单高亮
- **WHEN** 用户访问某个页面路由
- **THEN** 左侧导航对应菜单项高亮显示
- **AND** 使用defaultSelectedKeys属性控制

### Requirement: 路由配置
系统SHALL使用React Router进行页面路由管理。

#### Scenario: 配置页面路由
- **WHEN** 系统初始化路由
- **THEN** 注册以下路由：
  - `/cases` - 案例搜索页
  - `/cases/:id` - 案例详情页
  - `/laws` - 法条搜索页
  - `/laws/:id` - 法条详情页
  - `/similar` - 类案推荐页
  - `/tools/wage-calculator` - 欠薪计算器页
  - `/doc-audit` - 材料审核页
  - `/doc-edit` - 协议编辑页
  - `/dashboard` - 调解看板（主页）

#### Scenario: 默认路由重定向
- **WHEN** 用户访问根路径"/"
- **THEN** 系统重定向到主页"/dashboard"

### Requirement: 通用组件库
系统SHALL提供可复用的通用组件。

#### Scenario: 使用分页组件
- **WHEN** 页面需要分页功能
- **THEN** 使用PaginationBar组件
- **AND** 组件接受props：page, pageSize, total, onChange
- **AND** 显示"共 X 条"和页码切换按钮

#### Scenario: 使用面包屑导航
- **WHEN** 页面需要面包屑导航
- **THEN** 使用Breadcrumb组件
- **AND** 自动根据路由生成面包屑路径

### Requirement: 主题样式规范
系统SHALL遵循统一的视觉风格规范。

#### Scenario: 使用主色系
- **WHEN** 渲染任何组件
- **THEN** 主色使用蓝色渐变（#1a6fb8 / #0d4a8a）
- **AND** 成功色使用绿色（#2a9d8f）
- **AND** 警告色使用黄色（#e9c46a）
- **AND** 危险色使用红色（#e76f51）

#### Scenario: 使用统一字体
- **WHEN** 渲染文本内容
- **THEN** 使用字体族：'Microsoft YaHei', 'Segoe UI', sans-serif
- **AND** 标题字号：1.4–1.8rem
- **AND** 正文字号：0.9–1rem