chenh
/
OMS_H5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
OMS_H5/docs/ui-mockups
History
chenhao 411253a277 feat(auth): 实现登录功能和认证逻辑 
- 新增 auth.ts 文件实现登录接口调用
- 创建 auth store 管理认证状态
- 实现登录页面组件
- 优化订单列表页面样式
- 添加记住密码和自动登录功能
 		2025-08-28 15:37:34 +08:00
..
designs feat(auth): 实现登录功能和认证逻辑 2025-08-28 15:37:34 +08:00
README.md feat: 初始化订单审批系统项目- 创建项目基础结构和配置文件 2025-08-27 18:12:34 +08:00

README.md

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. 保留历史版本以便回溯