# UI设计图存放目录

此目录用于存放项目相关的UI设计图和原型图。

## 目录结构

```
ui-mockups/
├── README.md              # 本文件
├── wireframes/            # 线框图
│   ├── list-page.png     # 列表页面线框图
│   └── detail-page.png   # 详情页面线框图
├── designs/              # 设计稿
│   ├── list-page.png     # 列表页面设计稿
│   └── detail-page.png   # 详情页面设计稿
├── prototypes/           # 交互原型
└── specifications/       # 设计规范
    └── style-guide.md    # 样式指南
```

## 设计要求

### 1. 移动端适配
- 屏幕宽度：375px - 414px
- 适配iPhone和Android主流设备
- 支持横竖屏切换

### 2. 微信小程序WebView适配
- 适配微信小程序导航栏高度
- 考虑安全区域（刘海屏等）
- 遵循微信小程序设计规范

### 3. 页面设计规范

#### 列表页面
- 顶部搜索栏
- 筛选条件（状态筛选）
- 工单卡片列表
- 下拉刷新、上拉加载更多
- 空状态提示

#### 详情页面
- 工单基本信息展示
- 产品信息列表
- 附件展示区域
- 审批历史时间线
- 底部审批操作按钮

### 4. 交互设计
- 页面切换动画
- 加载状态提示
- 操作反馈（成功/失败提示）
- 确认弹窗设计

### 5. 视觉设计
- 主色调：#1890ff（蓝色）
- 辅助色：#52c41a（成功绿）、#f5222d（错误红）
- 背景色：#f5f5f5
- 文字颜色：#333333（主要）、#666666（次要）、#999999（辅助）

## 文件命名规范

- 使用英文命名，单词间用连字符分隔
- 包含页面/组件名称和版本号
- 示例：`order-list-v1.0.png`、`approval-dialog-v2.1.png`

## 版本管理

每次设计更新时请：
1. 更新版本号
2. 在文件名中体现版本
3. 保留历史版本以便回溯