📑 数据平台设计规范

一、说明

因为数据平台的前端工作是多人协作完成的，如果没有统一的设计规范，使得开发人员不仅要在开发 时费时考虑样式问题，还会因为各部分样式不统一导致返工。

二、问题

文档篇幅较长不易阅读，将总概的两个问题提前到这里：

1. 整个项目统一的布局样式会在全局样式文件里调整完成，。这样前端人员在每个分页面就不再需要关注布局样式，提高效率，全局样式要做修改前请和其他开发人员沟通。

举例：侧边菜单栏，宽度为固定的180px,层级极高z-index为3000，颜色和手风琴交互方式等等
都已经写好，其他页面开发时无需再考虑这一块的样式问题。

1. 特殊页面或特殊需求的控件样式，在每个模块对应的页面中，如果出现需要在该页面做调整的样式，则在样式标签处添加scoped属性做局部样式限定，这样可以避免污染全局样式。

举例：编辑器页面因为大多数开发人员习惯深色背景+亮色高亮代码的编辑器的样式，所以编辑
器窗口主使用了黑色主题，这个页面的其他el控件样式就和这个主题不符，所以做相对应的调整。
另外功能较多且被侧边菜单栏挤占了一定的空间，所以更需要对各个功能区分划后做调整，包括
按钮控件大小，间距，位置等。

三、规范

以下是具体的设计规范：

一、控件

1.按钮

按钮有大中小三种尺寸：

项目内采用的是将小型按钮作（size : small）为默认按钮大小 w:75px h:26px，此设置在main.js里：

Vue.use(Element, {
  size: 'small', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})

前端人员在项目内输入标签时，如不设置size属性，则默认会显示small大小的button，例如

small大小的默认按钮还应用在除了表单控件组外的其他控件上，比如弹窗的确认取消等按钮。

单独的 button 是不带对外间距的，这样button在靠边排版时就不用再调整间距了，出现按钮组的时候，主要是在复制表格和自动生成模板里的代码时，全局设置的 .btn-containe 的样式会控制该按钮组的样式为下图所示：

❗ 表格中的按钮组:

表单控件组的样式在覆盖文件element-ui.scss内进一步压缩了大小，间距依然是15px,图标和文字与边框之间距离为5px。
控件组涉及到表单自动生成，模板文件中不做样式控制，所以控件组样式受el-ui自带样式和项目内的覆盖样式文件控制。

.btn-container .el-button—mini

按钮的色彩语义，如果对新建，编辑，删除等按钮都做颜色区分，会使得页面焦点色增加非常多，视觉上反而妨碍用户专注业务本身。比如项目整体色彩饱和度偏暗，在适用的色域里面，新建用蓝色，编辑用绿色，删除用红色，则成功类信息的绿色表达，错误类信息的红色表达，都会与编辑和删除混用。但删除按钮确实需要有误操作这种错误类信息表达，所以建议是除了删除按钮外，控件组的其他功能都使用主题色或者不使用颜色（沉浸式交互中的幽灵按钮概念）。目前为只做删除按钮的色彩语义，其他按钮为主题色。

2.弹窗

弹窗几乎在每个页面都有，需要对el-ui预设的弹窗样式做处理，比如设定好宽高随着内容的自适应，弹窗内的表单，表格按钮等的排列，相对来说这一块的情况比较多，弹窗内的元素也使用全局样式难以满足所有情况：
例如下图中，很多空间都是多余的。但也有超大型弹窗布满了元素。

三、排版

1.文字

项目内文字的样式配置如下：

主标题： 微软雅黑 22px 黑灰 #ccc
正常深色背景：微软雅黑 14px 白色 #fff
正常浅色背景：微软雅黑 14px 黑灰 #ccc
占位文字： 微软雅黑 14px 浅灰rgb(232, 232, 232)

因为平台内没有文档排版的需要，所以整体上文字都是偏小的，各个层级之间的文字如果用的是文档排版的字体样式，会显得很突兀。例如：
这种层级不需要做文字大小区分，采用的都是14px。

这里的层级就有标题和内容之分，内容文字过小了对于小屏设备不友好。
平台内设置了最小字体大小不小于10px,这是极限状态，正常一般会设置在14px,默认中文字体排序是苹方丽黑->微软雅黑->…，因为windows系统的电脑很少装macOS的字体，而且微软雅黑在苹果设备上渲染不佳，所以用的这个顺序。

四、布局排版

整体布局采用的是三模块分布，顶部导航，侧边菜单中间主体，搭配el-ui的栅格系统，做为整个布局框架。
排版遵循自上而下，自左而右大原则，同类型单元整体居中，细分元素左右分栏对齐，例如：弹出框内的内容

表单的排版除了label右对齐还有一种排版方式:顶部对齐

这种表单排版可以解决label无法整齐划一的问题。

五、修改样式

六、扩展

规范文档中控制的内容，同样对其他平台项目有适用性，这里可以将全局样式摘出到一个可视化配置页面做控制。另外各大UI框架都会随着主要的前端框架的发布做调整，比如不久之前发布的VUE 3.x ,加上element-ui老的成员离职的原因， element-ui就停更了很久还删除了之前的几个老版本，可能考虑引入其他备用的UI框架。