f77acab4cb
- 新增系统瓜农信息自动填充和冲突检测功能 - 改进瓜农信息模块的验证逻辑和用户体验 - 优化车辆信息提取逻辑，自动填充经销商信息 - 更新市场价展示方式，从表格改为卡片形式 - 增强提交审核前的完整性检查，包括拼车状态和合同上传状态 - 完善页面间导航和数据传递逻辑 - 添加设计规范文档，统一项目UI标准 - 优化采购订单草稿保存逻辑和步骤切换体验 - 改进采购订单列表页面的交互和状态判断
218 lines
4.8 KiB
Markdown
218 lines
4.8 KiB
Markdown
---
|
||
trigger: manual
|
||
---
|
||
|
||
# ERPTurbo 设计规范
|
||
|
||
本文档定义了 ERPTurbo 项目的设计规范，包括颜色、字体、间距、圆角、阴影、布局、组件样式等标准。
|
||
|
||
## 颜色规范
|
||
|
||
### 主色调
|
||
|
||
项目使用单一主色调来确保品牌一致性：
|
||
|
||
- 主色：`#15B8A6`（蓝绿色）- 用于主要操作按钮、链接和重要信息
|
||
|
||
### 中性色系统
|
||
|
||
中性色用于文本、背景和边框，提供清晰的层次结构：
|
||
|
||
- 最深色：`#333333` - 主要文本
|
||
- 深色：`#666666` - 次要文本
|
||
- 中色：`#999999` - 辅助文本
|
||
- 基础色：`#DDDDDD` - 边框和分隔线
|
||
- 浅色：`#EEEEEE` - 背景灰
|
||
- 最浅色：`#F8F9FA` - 背景色
|
||
|
||
## 字体规范
|
||
|
||
### 字号标准
|
||
|
||
为确保良好的可读性和层次结构，定义以下字号标准：
|
||
|
||
- 大标题：18px - 用于页面主标题
|
||
- 中标题：16px - 用于模块标题
|
||
- 小标题：14px - 用于小节标题
|
||
- 正文：14px - 用于常规文本
|
||
- 辅助文本：12px - 用于辅助说明
|
||
- 标签文本：10px - 用于标签、徽章
|
||
|
||
### 字体粗细
|
||
|
||
- 细体：font-weight 300
|
||
- 常规：font-weight 400
|
||
- 中粗：font-weight 500
|
||
- 粗体：font-weight 600
|
||
- 黑体：font-weight 700
|
||
|
||
### 行高
|
||
|
||
- 紧凑：1.2
|
||
- 标准：1.5
|
||
- 宽松：1.8
|
||
|
||
## 间距规范
|
||
|
||
使用 4 的倍数作为间距系统的基础单位，确保视觉一致性：
|
||
|
||
- 超小间距：4px
|
||
- 小间距：8px
|
||
- 中等间距：16px
|
||
- 大间距：24px
|
||
- 超大间距：32px
|
||
|
||
### 使用场景
|
||
|
||
- 元素内边距：通常使用 8px、16px
|
||
- 元素间外边距：通常使用 16px、24px
|
||
- 段落间距：通常使用 24px
|
||
- 页面边距：通常使用 16px
|
||
|
||
## 圆角规范
|
||
|
||
为保持视觉一致性，定义以下圆角标准：
|
||
|
||
- 小圆角：2px - 用于按钮、标签
|
||
- 中圆角：4px - 用于表单控件、卡片
|
||
- 大圆角：8px - 用于模块容器
|
||
- 超大圆角：16px - 用于特殊组件
|
||
- 圆形：50% - 用于头像、圆形按钮
|
||
|
||
## 阴影规范
|
||
|
||
使用不同层级的阴影来表达元素的层次关系：
|
||
|
||
- 基础阴影：用于卡片等容器元素
|
||
- offset-x: 0px, offset-y: 1px, blur: 2px, spread: 0px
|
||
- color: rgba(0, 0, 0, 0.1)
|
||
|
||
- 中等阴影：用于悬浮状态、下拉菜单
|
||
- offset-x: 0px, offset-y: 2px, blur: 4px, spread: 0px
|
||
- color: rgba(0, 0, 0, 0.1)
|
||
|
||
- 强阴影：用于模态框、重要提示
|
||
- offset-x: 0px, offset-y: 4px, blur: 8px, spread: 0px
|
||
- color: rgba(0, 0, 0, 0.1)
|
||
|
||
## 布局规范
|
||
|
||
### 弹性布局
|
||
|
||
- 主轴对齐：使用 `justify-content` 控制水平对齐
|
||
- 交叉轴对齐：使用 `align-items` 控制垂直对齐
|
||
- 方向：默认使用 `row`，垂直布局使用 `column`
|
||
|
||
### 网格布局
|
||
|
||
- 基础网格：使用 12 列网格系统
|
||
- 列间距：16px
|
||
- 行间距：16px
|
||
|
||
### 响应式断点
|
||
|
||
- 小屏幕（手机）：< 768px
|
||
- 中等屏幕（平板）：≥ 768px
|
||
- 大屏幕（桌面）：≥ 1024px
|
||
|
||
## 组件规范
|
||
|
||
### 按钮
|
||
|
||
- 高度：40px
|
||
- 圆角：4px
|
||
- 内边距：水平 16px
|
||
- 字体大小：14px
|
||
- 字体粗细：500
|
||
|
||
状态样式：
|
||
- 默认：主色背景，白色文字
|
||
- 悬停：主色加深 10%
|
||
- 禁用：灰色背景，浅灰文字
|
||
|
||
### 输入框
|
||
|
||
- 高度：40px
|
||
- 圆角：4px
|
||
- 边框：1px #DDDDDD
|
||
- 内边距：水平 12px
|
||
- 字体大小：14px
|
||
|
||
### 卡片
|
||
|
||
- 圆角：8px
|
||
- 内边距：16px
|
||
- 背景：白色
|
||
- 阴影：基础阴影
|
||
|
||
### 标签
|
||
|
||
- 圆角：2px
|
||
- 内边距：垂直 2px，水平 6px
|
||
- 字体大小：12px
|
||
- 字体粗细：500
|
||
|
||
## 响应式设计
|
||
|
||
### 断点使用
|
||
|
||
- 手机端：单一列布局，元素堆叠显示
|
||
- 平板端：可使用多列布局，适当调整元素大小
|
||
- 桌面端：充分利用空间，显示更多信息
|
||
|
||
### 响应式工具类
|
||
|
||
使用 Tailwind CSS 提供的响应式工具类：
|
||
- `sm:` 超过 640px
|
||
- `md:` 超过 768px
|
||
- `lg:` 超过 1024px
|
||
- `xl:` 超过 1280px
|
||
|
||
## 可访问性
|
||
|
||
### 颜色对比度
|
||
|
||
- 文本与背景的对比度至少为 4.5:1
|
||
- 重要元素（如按钮）的对比度至少为 3:1
|
||
|
||
### 焦点状态
|
||
|
||
- 所有可交互元素必须有清晰的焦点状态
|
||
- 焦点状态使用 2px 主色轮廓
|
||
- 确保键盘导航的可用性
|
||
|
||
### 语义化标签
|
||
|
||
- 使用正确的 HTML 语义化标签
|
||
- 为图片提供有意义的 alt 属性
|
||
- 为表单控件提供关联的标签
|
||
|
||
## 最佳实践
|
||
|
||
### 命名约定
|
||
|
||
- CSS 类名使用 BEM 命名法
|
||
- 变量使用驼峰命名法
|
||
- 文件名使用帕斯卡命名法（组件）或小写连字符（其他）
|
||
|
||
### 性能优化
|
||
|
||
- 避免使用过多的阴影和渐变
|
||
- 合理使用 CSS 动画
|
||
- 优化图片资源
|
||
|
||
### 维护性建议
|
||
|
||
- 保持组件的单一职责
|
||
- 使用 TypeScript 定义组件接口
|
||
- 编写清晰的注释
|
||
- 遵循一致的代码风格
|
||
|
||
## 附录
|
||
|
||
本规范基于以下技术栈实现：
|
||
- Tailwind CSS 用于样式系统
|
||
- Taro 框架用于多端开发
|
||
- React 用于组件开发
|
||
|
||
所有设计决策应以提升用户体验和保持视觉一致性为目标。 |