faas设计规范

为了尽可能减少沟通与理解的成本，有必要在组织内部统一设计板的尺寸。统一的画板尺寸为 1200px。

faas页面布局分为3部分，顶部的header、左侧的aside、右侧的main-body。

.header：高64px，又分为左右2部分，左侧为 logo，宽200px，右侧为登陆账号信息，宽940px，文字右对齐。

.aside：宽200px。

.main-body：宽940px，又分为上下2部分，上面是内容，下面是 footer ，footer 上下内间距60px。

.container：通用类，页面主容器，定义了页面宽度为940px，在页面中的最外层和 header 中的右侧部分使用。（见本页面宽度）

.main-container：通用类，页面主容器，定义了页面上内边距24px，在页面中的最外层使用。（见本页面顶部间距）

.footer：通用类，页面页脚，上下内边距60px，字体颜色fade(#222, .4)

据统计，使用中台系统的用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。
我们采用固定aside，固定main-body，间距拉伸的方式做页面适配。

为了保持界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，设计了一套模度：
y=8+8*n (n>=0)。
表示区块间的间距是以8为最小单元、8的倍数为单位递增的。

应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。

主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。

基础色：@color-base: #222，也是标题色，很多颜色在此基础上增加透明度生成。

主要用于功能性提示的场景，如警告、提示等。

全局所有.section（区块）都带有阴影效果。

按钮用于开始一个即时操作，如新建项目、保存表单、关闭弹窗等。

形状	示例	场景
胶囊	胶囊	一般场景
方形	方形	表单中的单选、多选

default：大号，高度40px，文字14px，左右内边距24px，边框1px。

sm：中号，高度32px，文字14px，左右内边距24px，边框1px。

xs：小号，高度24px，文字12px，左右内边距16px，边框1px。

尺寸	示例	场景
大号 default	大号	单选、多选
中号 sm	中号	默认场景；表单操作； modal 操作；message 操作等
小号 xs	小号	日历操作（上周下周）

default：默认样式，字体颜色#222，背景白色，hover背景色#f4f4f4，边框颜色为默认边框色。

primary：主题样式，字体颜色白色，背景主题蓝，边框颜色主题蓝，hover背景色和边框颜色均为#4c78de。

disabled：不可点击样式，字体颜色不可点击文字色，背景颜色不可点击背景色，边框为默认边框样式。

类型	示例	场景
普通 default	普通	相对较不重要时
主题 primary	主题	比较重要时
不可点击 disable	不可点击	不可点击时

图标，语义化的矢量图形。
图标有三种风格：线框风格、实底风格和双色风格。在 faas 中，我们选用线框风格。

间距	备注
0	-
4px	-
特殊	比如用于 aside 上，间距为 8px

采用阿里 Iconfont 方案(Iconfont)。

.left：通用类，表征 icon 在文字左侧。

.right：通用类，表征 icon 在文字右侧。

.space：通用类，表征 icon 与文字间距有间距为4px。

目前菜单只有一级。
菜单项高度 60px。宽度为父元素的 100% ：由边框 + 内边距 + 内容 三部分组成，边框 6px，内边距20px ，内容自适应。
内容由 icon 与文字两部分组成，其中 icon 与 文字相距 8px，字号 16px。
菜单项未选中状态时文字颜色#222，边框颜色透明；选中状态和hover时文字、边框颜色变为品牌色，背景颜色为品牌背景色。

点击菜单项目时会跳转到相应的页面，同时该菜单项被激活，样式变成激活状态。

显示当前页面在系统层级结构中的位置，并能向上返回。

何时使用？

• 当系统拥有超过两级以上的层级结构时；
• 当需要告知用户『你在哪里』时；
• 当需要向上导航的功能时。

高度40px，下边距24px。最后一级文字为正文样式，前面的为隐式链接样式，每级之间用右尖括号来间隔。

面包屑路径中的最后一级为当前页面，前面的点击进入对应的父级页面。

通过鼠标或者键盘输入字符的文本框，分为普通输入框和文本域两种。

普通输入框分为大、中、小三种，高度固定40px，宽度分别为680px、480px、180px，输入框上下内边距8px，左右内边距16px；

普通输入框可分别带前缀、后缀，在输入框的最前和最后，前缀、后缀左右内边距16px，颜色为正文色；

普通输入框可带有下拉菜单，宽度和输入框相同，最大高度200px，菜单项高40px，左右内边距24px，hover 背景颜色#f4f4f4

；

文本域输入框默认高度为 2 行，高64px，可带后缀，后缀在右下角，左右内边距16px，颜色为输入框提示色。

输入框支持添加提示文字，在输入框内容为空时展示提示文字，当用户输入任意字符时提示文字消失；

鼠标单击输入框，光标聚焦到该输入框中，此时可以用键盘输入字符，鼠标点击输入框外，该输入框失去焦点；

带有下拉菜单的输入框，用户点击菜单项，会将菜单项内容赋值给该输入框。

ui-input：通用组件，表示单个输入框；

.ui-input-xs：通用类，用于<ui-input>，小号输入框，宽度180px；

.ui-input-sm：通用类，用于<ui-input>，小号输入框，宽度480px；

.ui-input-lg：通用类，用于<ui-input>，小号输入框，宽度680px；

.ui-textarea-suffix：通用类，用于文本域的后缀。

如何使用？

前 后 {{ textareaNum }}/150

表单项右侧部分存在多个表单元素（通常为输入框）时，多个表单元素构成的一行为表单项内容行。

表单项内容行宽(680px + 16px + 1em)，右内边距(16px + 1em)尾部可添加操作 icon；

表单项内容行中的多个表单元素水平间距24px;

表单项内容行之间的垂直间距16px。

.ui-form-item-line：通用类，表示表单项内容行，子元素为表单元素（通常为输入框）；

.footer-icon：通用类，内容行尾部 icon 使用的类。

                            <ui-form-item label="示例：">
                                <div class="ui-form-item-line">
                                    <ui-input class="ui-input-xs"></ui-input>
                                    <ui-input type="textarea" style="flex: 1"></ui-input>
                                    <div class="uicon uicon-delete footer-icon"></div>
                                </div>
                            </ui-form-item>

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

表单通常由多个表单项和表单尾部组成，表单项从上到下依次排列；

表单尾部距离最后一个表单项32px，尾部中通常含有个多按钮以操作表单，如果按钮存操作在主次之分，则主要操作按钮在右、次要操作按钮在左，中间间距48px。

通过鼠标、键盘可以为各个表单项赋值，通过底部的操作按钮可以对表单进行提交、取消编辑等操作。

.ui-form：通用组件，表示表单，子元素为各个表单项。如何使用？

男 女 不可点击 🐍 🐲 🐼 不可点击 🍎 🍌 🍊 不可点击 上传xxx内容

用于信息的标记和选择。

标签分为两类：默认类和朴素类，默认类有背景颜色，朴素类无背景颜色但有边框；

默认类上下内边距5px，左右内边距8px，文字大小14px，多个标签之间水平、垂直间距8px；

默认类有2种使用场景，用于信息标记时文字颜色正文色，背景颜色信息背景色，用于信息选择时文字颜色为品牌色，背景颜色为品牌背景色，文字右方有 X 号；

朴素类上下内边距3px，左右内边距8px，文字大小12px，多个标签之间水平、垂直间距8px；

朴素类用于信息标记，有普通色、橙色两种，普通色标签文字颜色为第二正文色，边框颜色为#222， 20%，橙色标签文字、边框颜色为橙色。

默认类标签用于信息选择时，点击文字后面的 X 号，将该选择项删除。

.ui-tag-group：通用类，标签组，用于包裹多个标签；

<ui-tag>：通用组件，表示单个标签；

.ui-tag-label：通用类，用于<ui-tag>，表示朴素类普通色标签；

.ui-tag-organge：通用类，用于<ui-tag>，表示朴素类橙色标签。

                            // 默认类标签
                            <div class="ui-tag-group">
                                <ui-tag type="info">标记</span>
                                <ui-tag type="primary" closable>选择</span>
                            </div>
                            // 朴素类标签
                            <div class="ui-tag-group">
                                <span class="ui-tag ui-tag-label">朴素普通色</span>
                                <span class="ui-tag ui-tag-label ui-tag-orange">朴素橙色</span>
                            </div>

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示和确认。

全部页面被蒙层覆盖，蒙层颜色#000，20%，对话框悬浮在页面中心，宽度340px，内间距32px，分为头部、内容、尾部 3 部分垂直排列，中间间距24px；

标题颜色标题色，为大号段落样式，内容颜色正文色，为基础段落样式；

尾部为操作按钮，中号胶囊状；

用于消息提示时，尾部为一个主题色按钮，用于消息确认时，尾部为两个按钮，左侧为不重要操作按钮，普通色，右侧为重要操作按钮，主题色，按钮间距32px。

当用户主动操作后，弹出 msgbox 进行消息提示或确认，用户点击尾部操作按钮，msgbox 消失。

在保留当前页面状态的情况下，给用户展示额外的信息并承载相关操作。

全部页面被蒙层覆盖，蒙层颜色#000，20%，对话框悬浮在页面中心，宽度由页面指定，内间距32px；

弹窗的内容可以是任意的，甚至可以是表格或表单。

通常由用户主动操作触发弹窗，在弹窗中可以承载一些交互与操作，点击右上角 X 号关闭弹窗。

<ui-modal>：通用组件，表示弹窗。如何使用？

用于标识新增加的页面、Tab页、模块、功能等。

文字大小12px，左右内边距3px，圆角半径100px，背景颜色为上新提醒色。

按照一定的时间顺序展示一系列有规律的信息。

时间线由多个信息段组成，每个信息段前有黑色圆点，原点直径5px，多个信息段由线条连接，圆点和线条颜色为边框色；

每个信息段左内边距32px，下内边距24px；

信息段有完成、未完成两种状态，完成状态的信息段前的圆点颜色为#222，80%。

.v-timeline：通用类，时间线的单个信息段；

.v-timeline-done：通用类，表征单个信息段已完成，与.v-timeline一起使用。

多个无先后顺序的段落集合。

无序列表段落前有圆点，根据段落文字大小分为两种，默认和小号；

默认无无序列表文字大小14px，前方圆点直径4px，距离文字8px；

小号无序列表文字大小12px，前方圆点直径2px，距离文字8px；

.ui-ul：通用类，代表无序列表样式；

.ui-ul-base：通用类，默认无序列表，与.ui-ul一起使用；

.ui-ul-xs：通用类，小号无序列表，与.ui-ul一起使用。

多个有先后顺序的段落集合。

有序列表由列表序号、内容两部分部分组成，列表序号使用阿拉伯数字，序号和内容之间有点号和空格。

页面加载、请求时出现的等待提示。

方形块处于页面中心，块中包含一个不停旋转的白色 icon ，icon 下方为提示文字：加载中...，块宽、高为120px，圆角8px，背景颜色#222， 5%。