写在前面：
本次前端规范更多侧重的是在产品业务开发时的统一性，对用户体验和测试环节遇到的规范问题进行整理统一，对代码层面的规范涉及不多。后续会根据团队开发协作效率的不断提高，以及暴露的规范问题进行规范迭代。
一、规范的好处
1、从根本上降低开发成本：
提高代码整体的可读性、可维护性、可复用性。
2、保证代码的一致性：
软件系统中最重要的因素之一就是编码的一致性。如果编码风格一致，也更加易于维护，因为团队内任何人都可以快速理解并修改。
3、提升团队整体效率：
开发人员通常需要花费大量的时间来解决代码质量问题，如果都按照规范编写，也有助于团队尽早发现问题，这将提高整个交付过程的效率。
二、不规范代码的弊端
1、增加团队成员间的协作负担：
由于缺乏规范，导致代码风格不一，极端情况下，某段代码只有某个人能修改。
2、团队间协作更加困难：
由于开发人员要适应不同的风格，会导致效率低下。
3、回顾困难：
在review期间，可能经常为类似的事情做过多的讨论。
4、影响降低团队整体效率：
影响团队的生产力和质量，严重的甚至会影响团队和谐。
三、为什么很多团队缺乏规范
1、当开发人员被要求在短时间内完成任务时，通常会回避质量标准。
2、长时间养成的开发习惯很难在短时间内去改变。
3、有的时候虽然达成了一致，但在开发中依旧我行我素。
1.loading加载规范
- 页面级loading:不需要，使用table自带的loading+块级loading。
- 块级loading(弹框等）:参照antd spning（包裹的方式）。
- 按钮级loading:默认查询相关的按钮都不加loading。导入，导出，弹框保存类的按钮需要加loading。
- 需要接口的下拉框:下拉select需要加loading,参考antd。
- 模糊下拉分页的下拉组件:单独封装成组件。
2.表格相关规范
- 切换分页时保留勾选选中项。
- 表格在当前页删除某（单个/批量）选中项时，如果当前页删除后没有数据，需要跳转至前一页。如果不需要跳转，删除后，要保持当前页。
- 表格新增数据后，分页切换至page:1,查询条件重置。编辑保存成功后，不重置当前查询条件，保留选中项，并且停留在当前分页。如有特殊需求，再做处理。
- 分页显示为10/20/30，显示total。
- 删除需要弹出confirm弹框，这个弹框就是modal.confirm。类似需要确认的交互都使用该弹框,确认后再调接口。
- 表格里，如果有时间，由于时间格式一般长度都是固定的。所以时间列的内容需要完整显示，不要省略。除世时间列外的其他过长数据时，不能换行，而是省略...鼠标移上显示完整信息。在其表格列加入
ellipsis: true即可，下拉框里的数据过长时也是如此。 - 在进行枚举判断时，例如0,1，必须判断0和1这两种具体情况，而不是单纯的判断其中一种，其他情况else。
- 分页条数切换后，跳到第一页（对pagetion Hook进行处理），只有选择查询条件后，并且点击查询按钮后的查询条件，才在分页切换时代入，否则不带入。
- 表格行内涉及图片的列，都需要放大，antd有image这个组件。图片大小高度统一为40X40
- 每个模块的首页表格高度的规则是:距离页面底部始终为
固定距离（大概在63px左右），且当前也有展开和收起时，点击展开和收起表格高度会自适应变化，页面整体不会出现滚动条，且高度变化过程中，用动画进行平滑过度。具体如下图：
表格空状态时的高度也是如此：
11.表格的布局为紧凑型布局。
3. 文件命名规范
- 除vue组件部分用大驼峰的方式命名，其余文件全部小驼峰命名。
- 页面内所有的fn还有data参数全部小驼峰。
- 文件夹也是小驼峰命名。
4.注释规范
- 变量:涉及到业务模块的变量需要加注释，控制元素类的变量可以不加。
- 方法函数:必须要加，说明该函数的作用。
- 组件的注释:需要说明传参的作用，参数类型，给出一个基本示例。
- 代码页面中引入组件功能注释。
5.查询表单规范
- 查询表单默认展示两行，一行4列，超过两行则隐藏，label字体大小为14px，重置后，如果当前查询条件展开，则收起，并且重置当前查询条件，
但不调接口，不刷新页面。并且此时如果表格有选中项，保持不变。 - 如果低于等于两行8列，不需要展开/收起按钮。宽度用栅格col span=6,为了保证数据铺满的情况下的外观问题，左右需要加间隙gutter，代码如下：
<a-row :gutter="[16,0]">
- label宽度90px,超出部分...鼠标移上显示
- 内容全部以靠右为准
- select相关的下拉查询，都需要一个清除按钮，input也需要清除按钮。
- 前端需要清除查询条件里的前后空格
- input框输入需要限制默认长度，默认长度30，可以根据业务需求额外设置。
- 前端按钮颜色，圆角值，鼠标移上，移开的样式，均按照产品规范要求来。
- 查询条件输入信息后，可按回车键进行查询。
- 查询表单中，当要求查询条件不能为空时，点击查询按钮后，提示：“所有查询条件不能同时为空”，
并将查询条件重置恢复为默认状态，若系统中有默认查询条件为空的状态，且有查询条件为空限制时，处理方式是将结束时间设置成当天时间。 - 查询表单中如果有开始——结束日期范围组件，应拆分两个日期组件，即：
当查询表单中的日期查询条件超过两个时，不拆开日期范围组件，产品会在设计图里额外标注。
12.select组件的下拉数据需要接口请求时，在
@focus时去请求下拉数据，如果只在进入组件初始化的时候请求一次，会导致下拉数据出现更新不同步的问题。
6.按钮规范
- 查询type=primary
- 重置type=reload
- 删除danger
- 按钮都需要图标，如果没有指定，就默认不加图标
7.提示信息规范
- 所有的提示信息（纯前端校验）使用warning
- 错误信息error
- 成功的success
8.接口返回体规范
需要前端自定义错误提示时，或者其他额外操作，code需要跟后端协商。
9.表格高度规范
- 首页表格的高度使用vh动态计算 clac(100vh-动态高度）
- 在1920x1080分辨率下，不能出现滚动条
- 最小高度min-height：300px
10. 本地开发环境时，代理格式规范
首先，后端必须统一所有模块的接口格式，例如公共字段+模块字段，前端在本地代理时，也参照如此公共字段+模块字段。 例如：
proxy: {
'/front-api/v1/basic': {
// 基础资料模块接口地址
target: 'http://192.168.233.181:30088',
pathRewrite: {
'^/front-api/v1/basic': '/basic/front-api/v1',
},
ws: false,
changeOrigin: true,
},
11.弹框内部布局统一规范
-
抽屉宽度默认50%，默认最小宽度800px
-
弹框默认宽度是520px
-
弹框内如果是两行并列表单布局，用栅格模式。
-
单行参照表单查询格式，左侧label,90px.
<a-row :gutter="32">
<a-col :span="12">
<a-form-item label="名称">
</a-form-item>
</a-col>
</a-row>
12.placeholder默认输入规范
- input 请输入
- select 请选择
- 校验rules 请输入+label名
13.滚动条样式在mac和window上样式区别
设置全局滚动条样式
14.弹框关闭
打开弹框时，点击非弹框区域，弹窗默认不关闭
15.换行问题
所有超出问题不采用换行，而是使用...+鼠标移上提示
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width:90px;
16.数字类型的输入框
涉及到数字类型的输入校验，一律用ant的数组组件input-number，禁止自定义input。除非该功能antd组件无法实现，如在开发中遇到这种情况，需要告知项目负责人确定。
17.一些待确定的问题
- 重置到底要不要请求接口，以及重置后是回到默认条件还是为空？（需要跟产品确定）重置不调接口，查询项为空不允许查询，特殊情况
- 筛选列时，固定列是否可以筛除？不可以
18.vfrom组件优化
19.其他
一些其他额外需求，在UI图中未表达确定时，可能涉及到样式，交互，要统一时，需与项目负责人确定
20.上传组件
上传校验文件大小和格式不满足限制条件时，提示信息类型为warning，提示内容需给出支持的大小/格式有哪些
