🎨 UI规范

配色

• 遵循深底浅字，浅底深字，不可深底深字。
• 灰色是永恒的经典，光而不耀烨烨生辉。
• 字体尽可能避免用纯黑色。

// base color
$fontcolor: #606266;
$green: #02b980;
$yellow: #FF9900;
$red: #f56c6c;
$bkgray: #D7D7D7;
$bkcolor: #f2f2f2;
...
/*
常见颜色和背景色
使用： class="white bg-red "
添加规则：以颜色英文名命名，同名时按照深浅区分，深：deep-red 浅：light-red
*/
$color-values: (
  'primary': #1e9d6f,
  'white': #fff,
  'gray': #f2f2f2,
  ...
  'color-626': #606266,
  // 其他项目里常用颜色
  'color-555': #555,
  'color-666': #666,
);

通用报表页面

• 报表label字体大小12px，与输入框/选择框间距10px，同模块输入框5px。
• 控件之间间距20px（车间与验收日期之间）。
• 按钮统一右对齐，按钮间距10px，右端距离15px，如有换行或特殊情况可在表格上方。
• 日期控件如果是只显示一天，需要增加左右按钮。

表格内容规范

• 表头默认不换行，非特殊情况支持排序与列宽拖动保存。
• 内容不等长左对齐，等长居中对齐，数字右对齐。
• 行高默认45px，如有进度图/树形展开等不超过60px。
• 内容超出默认显示省略号，移入显示完整内容。
• 图片控件默认统一使用封装组件，移入/点击显示。
• 班次、日期等关键信息列宽默认值要预留足够。
• 小数点位数要保持一致，右对齐时数字大小才直观。
• 字段命名要简洁明了，位置要符合逻辑认识。
• 表格界面考虑平衡与整体性，要避免太空泛；交互操作要考虑便利性。

控件风格与功能按钮位置

• 尽量不用原生input组件，如使用请添加class el-input等相关样式。
• 功能按钮位置要根据使用频率与习惯放置，常用的一般在顶部与鼠标较易操作的地方。

详情页

• 背景色#F2F2F2、主体内容#FFF；padding值10px 15px；按钮与内容边界对齐。
• 内容超出时默认标题栏固定，内容滚动显示。
• 表单内容必填项提示、动态显隐时避免缺齿，命名要与需求提出者确认推敲。
• 按绿色tag页签分块展示内容。

看板页

• 看板字体颜色遵循深底浅字，浅底深字。
• 图标icon等要按照常用惯例，非必要不可随意自创风格。 MES_矢量图标项目
• 设计内容考虑整体性，以及边缘影响；内容在一块的间距不能过大，有必要的还需要增加圆角边框。
• 滚动框时要注意处理边缘越界显示。
• 说明弹框中文用宋体，一般为固定标题栏滑动。
• 看板设置界面，左右边距一致，文字与控件注意美观与对齐。

Echarts规范

• 图例避免覆盖内容，文本内容对齐方式默认左对齐，超长显示省略号。

• 折线图0值一般不展示（客户要求除外），确保echarts示例能正确销毁，以免造成性能问题/内存泄漏。

• 要注意resize时适配的问题，包括全屏、窗体大小变更时。

• 注意echarts图形文本与控制内容对齐。

• more...