# 审批中心页面 - 飞书风格设计

## 📋 概述

审批中心采用**飞书风格的列表-详情分栏布局**，提供高效的审批体验。

## 🎨 设计特点

### 1. **顶部标签栏**
- 四个主要类别：待我审批、我提交的、我审批的、抄送我的
- 支持下拉筛选表单类型
- 统一高度 `h-14` (56px)，符合飞书风格指南

### 2. **左侧审批项列表**
- 宽度: `400px`
- 显示审批项标题、提交人、提交日期、当前节点
- 选中项高亮显示（蓝色背景 + 左侧边框）
- 支持搜索和筛选

### 3. **右侧详情面板**
- **详情头部**: 标题、提交人、提交时间
- **详情内容**: 使用 `FormRenderer` 通用渲染引擎展示表单数据
- **审批操作区**: 审批意见输入框 + 通过/拒绝按钮
- 底部固定操作栏（仅待我审批时显示）

## 🔧 技术实现

### 1. **通用渲染引擎**
使用已实现的 `FormRenderer` 组件渲染表单数据：
```tsx
<FormRenderer
  schema={detail.formSchema}
  uiSchema={detail.formUiSchema || {}}
  formData={detail.formData}
  onChange={() => {}} // 只读
  disabled={true}
  showSaveButton={false}
  showSubmitButton={false}
  showSubmitterInfo={false}
/>
```

### 2. **数据映射**
通过映射函数将不同类型的API响应统一为 `ApprovalItem` 格式：
- `mapPendingToItems()` - 待审批
- `mapInitiatedToItems()` - 我提交的
- `mapProcessedToItems()` - 我审批的
- `mapCCToItems()` - 抄送我的

### 3. **API集成**
使用现有的API服务函数：
- `getMyPendingTasks()` - 获取待办
- `getMyInitiatedProcesses()` - 获取发起的
- `getMyProcessedTasks()` - 获取已处理
- `getMyCCTasks()` - 获取抄送
- `approveTask()` - 审批通过
- `rejectTask()` - 审批拒绝

### 4. **国际化**
完整的中英文支持：
- `t.approvals.pendingMyApproval` - 待我审批
- `t.approvals.myInitiated` - 我提交的
- `t.approvals.myProcessed` - 我审批的
- `t.approvals.ccToMe` - 抄送我的
- `t.approvals.approveSuccess` - 审批成功
- `t.approvals.rejectReasonRequired` - 拒绝理由必填

## 📱 响应式设计

- **桌面端**: 左侧列表 400px + 右侧详情自适应
- **平板端**: 可考虑使用抽屉模式
- **移动端**: 可考虑使用全屏切换模式

## 🎯 使用方式

### 路由访问
```
/approvals  ⭐ 主路由
```

### 页面状态
1. **初始状态**: 默认显示"待我审批"标签
2. **选中审批项**: 左侧列表选中后，右侧自动加载详情
3. **审批操作**: 仅在"待我审批"标签下显示审批按钮
4. **筛选搜索**: 支持按表单类型和关键字筛选

## ✨ 用户体验优化

### 1. **快速加载**
- 列表和详情分离加载，提升响应速度
- 详情加载时显示loading状态

### 2. **智能状态管理**
- 审批操作后自动重新加载列表
- 选中项保持高亮状态

### 3. **友好的空状态**
- 无数据时显示友好提示
- 加载失败显示错误提示

### 4. **操作反馈**
- 审批操作时显示loading状态
- 操作成功/失败显示toast提示
- 拒绝时强制要求填写理由

## 🔄 数据流程

```
1. 用户选择标签（待我审批/我提交的/我审批的/抄送我的）
   ↓
2. 加载对应的审批项列表
   ↓
3. 用户点击某个审批项
   ↓
4. 加载审批详情（包括表单设计和表单数据）
   ↓
5. 使用FormRenderer渲染表单数据
   ↓
6. （待我审批时）用户填写意见并进行审批操作
   ↓
7. 审批成功后重新加载列表
```

## 🎨 飞书风格遵循

### 颜色
- 主色: `#3370ff` (飞书蓝)
- 成功: `#00b42a` (绿色)
- 警告: `#ff7d00` (橙色)
- 紫色: `#722ed1` (紫色)

### 圆角
- 按钮: `rounded-lg` (8px)
- 卡片: `rounded-lg` (8px)

### 间距
- 页面边距: `px-6 py-4`
- 组件间距: `gap-3`, `gap-4`

### 阴影
- 无阴影（扁平化设计）
- Hover时轻微阴影

### 边框
- 颜色: `#e5e6eb`
- 宽度: `border` (1px)

## 📊 性能优化

1. **按需加载**: 只加载当前标签的数据
2. **列表虚拟化**: 未来可考虑添加（数据量大时）
3. **缓存策略**: 可考虑使用 React Query 缓存

## 🚀 未来扩展

1. **批量审批**: 支持批量通过/拒绝
2. **高级筛选**: 时间范围、优先级、状态等
3. **快捷键**: 支持键盘快捷操作
4. **审批流程图**: 在详情中显示流程图
5. **历史记录**: 查看审批历史
6. **提醒设置**: 审批提醒配置

## 📝 代码位置

- **页面组件**: `frontend/src/app/approvals/page.tsx` ⭐
- **API服务**: `frontend/src/services/api/approval.ts`
- **国际化**: 
  - `frontend/src/locales/approvals/zh.ts`
  - `frontend/src/locales/approvals/en.ts`
- **通用渲染**: `frontend/src/components/forms/FormRenderer.tsx`

## 🗂️ 目录结构

```
frontend/src/app/approvals/
├── page.tsx                    # ⭐ 主页面（列表-详情布局）
├── README.md                   # 本文档
├── submit/
│   └── [formKey]/
│       └── page.tsx           # 表单提交页面
└── [businessType]/
    └── [instanceId]/
        └── page.tsx           # 审批详情页面（独立查看）
```

## 📦 重构记录

**v2.0 (2025-12-21)**: 
- 将 `/approvals/center` 合并到 `/approvals`
- 删除独立的 pending/initiated/processed/cc 页面
- 统一为列表-详情分栏布局
- 简化路由结构

**v1.0 (2025-12-21)**: 
- 初始版本，创建 center 页面
- 实现飞书风格列表-详情布局

---

**创建时间**: 2025-12-21  
**最后更新**: 2025-12-21  
**版本**: 2.0  
**作者**: AI Assistant  
**设计风格**: 飞书（Lark）风格