shenyifei f77acab4cb feat(purchase): 优化采购订单创建流程和界面交互

- 新增系统瓜农信息自动填充和冲突检测功能
- 改进瓜农信息模块的验证逻辑和用户体验
- 优化车辆信息提取逻辑，自动填充经销商信息
- 更新市场价展示方式，从表格改为卡片形式
- 增强提交审核前的完整性检查，包括拼车状态和合同上传状态
- 完善页面间导航和数据传递逻辑
- 添加设计规范文档，统一项目UI标准
- 优化采购订单草稿保存逻辑和步骤切换体验
- 改进采购订单列表页面的交互和状态判断

2025-11-10 14:59:35 +08:00

4.8 KiB

Raw Permalink Blame History

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
背景：白色
阴影：基础阴影

响应式设计

断点使用

手机端：单一列布局，元素堆叠显示
平板端：可使用多列布局，适当调整元素大小
桌面端：充分利用空间，显示更多信息

响应式工具类

使用 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 用于组件开发

所有设计决策应以提升用户体验和保持视觉一致性为目标。

4.8 KiB Raw Permalink Blame History Unescape Escape