前端工作设计规范

 

<hades,2020-12-03,v1.0.0>

1. 管理系统设计

1.1数据表格

1）【强制】表头文字需清楚展示字段含义，且必要时需带上单位，如：km、min、h、元等。

2）【强制】表头字段宽度必要时需固定长度，如：2020-12-12 12:12:33时间长度，18位身份证字段长度，性别字段长度，备注等不定长的都按200px设置。

3）【强制】字段枚举值设置中，对于需使用颜色进行分类的，需配置颜色。如：状态：启用、禁用；支付状态：待支付、已支付、已取消，都需使用不同颜色标识或使用不同icont图标标识。

4）【强制】表格文字、表头标题中，文字、图片都需左对齐，数字、金额需右对齐并且首列需展示行号。

5）【强制】表格列最后一列需自适应界面。

6）【强制】表格行数据选中之后，背景需有高亮的效果，直观展示用户所选中数据。

7）【强制】所有表格数据列表默认按数据创建时间排序。

1.2 数据添加

1）【强制】新增数据记录需排列再表格首行，需后端配合支持。

2）【强制】数据提交之前，则调用接口之前，对于表单中必填项，需进行判空校验并且指示用户。

3）【强制】数据提交失败之后，界面需保留，待用户修改表单内容。

4）【强制】数据提交成功之后，界面需关闭且清空表单数据，刷新表格内容。

5）【强制】用户打开编辑界面之前，需将表单中动态数据源、默认值都准备齐全。

1.3 数据编辑

1）【强制】编辑界面打开之前，需将用户需编辑的数据回显于表单之中。

2）【强制】数据提交失败之后，界面需保留，待用户修改表单内容。

3）【强制】数据提交成功之后，界面需关闭且清空表单数据，刷新表格内容。

1.4 数据删除

1）【强制】必须有确认删除的信息提示框，提示框中展示核心信息。

2）【强制】删除成功之后，刷新表格数据。

3）【强制】删除失败之后，界面保留，待用户进行操作。

1.5 表格搜索条件

1）【强制】核心搜索条件需直接展示在表格上方，辅助类搜索条件可以展示于隐藏栏目。

2）【强制】表格搜索不到数据，则接口无返回符合搜索条件的结果集合，则需提示用户。

3）【强制】数据加载中，需有遮罩层提示用户。

4）【强制】文本类型搜索条件，需支持模糊搜索，特殊缓存关键字除外。

5）【强制】必须有条件“重置”功能，重置之后搜索条件恢复初始化状态。

1.6 分页功能

1）【强制】对搜索结果进行分页，需后端提供分页信息。除缓存数据需前端自己构建分页功能。

1.7 页面跳转

【强制】页面设计过程中，经常会涉及到页面跳转进入子页面，在子页面编辑完之后，返回到父页面的场景。因此，针对此场景提出了以下要求：

1. 链接：当鼠标划过链接文字或图片时候，鼠标需变成可点击手形。
2. 返回：子页面需提供返回到父页面的按钮或者链接。

1.8 操作提示

1）【强制】删除数据必须弹出提示框，给予用户选择，方可执行。

2）【强制】当用户操作不符合规则、输入数据不符合要求需进行提示。

1.9 数据加载

1）【强制】前端脚本与后端接口进行数据交互的时候，需使用遮罩层进行友好提示。

2）【强制】特殊需轮询获取后端数据，或者界面要求无感知数据更新的情况下，则可不必展示遮罩层。

1.10 表单设计

1）根据接口文档提供的字段进行业务字段的布局排版。

2）界面的必填项以红色*号标识出来，且标识在“表单字段名称”前面。

3）特殊表单字段后需带上单位，如km、元等。

4）常用字段：

序号	字段	规则	备注
1	普通文本	16位字符长度
2	备注	64位字符长度
3	手机号码	11位字符长度	不需要进行格式校验
4	身份证号	18位字符长度	不需要进行格式校验
5	邮箱地址	32位字符长度	需进行格式校验
6	金额	支持小数点后2位	需设置最大值、最小值
7	图片	上传url	a需支持图片回显，重传、缺省页 b图片先传递到资源服务器，再将url地址回传。
8	时间	支持时间戳或字符串	根据接口文档而定
9	区域编号	6位整型	根据国标
10	普通地址	64位字符长度
12	地图地址	64位字符长度	需采集区域地址、区域编号、经纬度地图坐标。
13	密码	6-21位字符长度	建议密码可使用6-21位数字、字母或常用字符,且至少含两位或以上，但是不强制校验。

1.11 面板布局设计

1）网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。我们在设计网页首屏的时候，需要考虑网页的高度。window 7 的首屏高度平均值是710px。比如我们采用1920的大屏进行设计我们网站的首屏时，最好建立一个安全范围1200*710，我们在此范围内进行设计。

a.左右布局

左边通栏为导航栏，宽度没有具体的限时，可以根据实际情况进行调整；右侧为内容板块范围，是网站内容展示区域。

b.居中布局

中间部分为有效的显示局域，用于网站内容的展示，两边都有留白，没有实际用途，只是为了适配而存在。这种布局是国内网站常见的布局方式。

c.无论何种布局，主体内容超过界面尺寸都需要滚动条。

2)使用字体与大小

为了用户的易读性，都是使用非衬线字体，除非特殊的网站。中文使用苹方或者微软雅黑字体，英文则使用arial 字体。

常用的字体大小为12 14 16 18px。正文基本都是使用14px，标题16px，最小字号为12px。

注意：

1、12px是用于网页的最小字体，适用于注释性内容。

2、14px则适用于普通正文内容。

3、16px或18px适用于突出性的标题内容。

4、网站的字体大小并没有硬性规定具体的字号，根据实际情况可以酌情考虑，但是要有限适用偶数字号。字体规格也不需要太多，最好适用三种混搭。如果需要更多层可以改变字体颜色或加粗来体现。

1.12 组件设计原则

1）【建议】命名使用项目前缀+业务前缀进行驼峰命名。

2） 【建议】 props设计应遵旨组件设计，某个参数对外是必须required那就required，允许有默认值才使用default。

3）【建议】少用watch：一个状态可能在不同情况下会发生的不同的变化，使用watch可能会造成业务逻辑的混乱，特别使用多个watch的情况。实际大部分情况下，使用computed/method都优于watch。从代码阅读上watch就不如method/computed，使用后者能非常直观能看到执行顺序和逻辑。

4）【强制】组件设计需提供method基础函数，一般会有获取数据getValue、设置数据setValue、重置数据reset、初始化init等基础函数，此函数都统一命名。

5）【强制】组件样式命名，需项目简称+业务+元素，如tp-treeOrg-list。