【ZY】重要优先项
【ZY-SX】顶层思想
【ZY-SX-001】确认展示信息是否有效
做好UI界面的根本，是优化信息的展示。
1.任何时候都要检验这里展示的内容有没有效果，不要因为用了自动生成的代码，就放一些Id字段在上面。
2.同时也要看给的查询条件有没有意义，是不是好用，比如名字等字段需要做模糊查询
3.表格第一页不要放无意义或者空白的数据
【ZY-SX-002】尽量少给空隙
界面不要有大面积的空白，尽量利用空间，尽量加内容塞满空间，表格宽度每个都需要细看，不要有多余空隙。
【ZY-SX-003】尽量清晰可见
尽量少用透明度低的文字，所有字体必须加大加粗，颜色必须深色，尤其关注echart的图表，默认配置里字体色是#333，老板很不喜欢，全部加大加粗改成#000。
【ZY-SX-004】重点尽量用亮色标记
老板喜欢亮色，比如橘色、红色、荧光绿。
比如这种菜单换成亮色的图标
【ZY-SX-005】所有的文本、标题慎用表达
遣词造句要符合实际含义，不要随便想个标题就放上去，具体可参考以下几点：
1）明确表述立足点（用户中心角度）
在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。既然以用户为中心，文案就应该尽量以用户为主体来写作。 注：当用户向后台反馈问题、提出建议或申诉时，使用『我们』是合理的语境，例如『我们将会审核你的申诉』。
2）精简
省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。
3）用户熟悉的语言
使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。
4）表述一致
描述同一个事物的词汇要保持统一;上下文的语法、语种、语序要保持统一;操作的名称和目标页面标题的名称保持一致。
5）重要的信息放在显著位置
让用户第一眼看到最重要的内容，不用到段落中寻找。注：如考虑安全性问题时，隐私信息也可调整为『点击后可见』的方式。
6）完整、直接地阐述信息
当我们希望用户进行一个操作时，要专注于用户能得到什么，以及用户的感受。在操作前引导告知用户操作的目的或重要性，能促进用户更愿意去执行。
『报错』示范：相对于『失败』，『无法完成』是更加客观的结果，更容易让用户在心理上接受。用户需要知道在出现问题的情况下如何进行下一步操作。
7）用词精准完整
通用基本用词要规范，不要写错字，词语表达要完整。专业用语要精准，并是所属行业认可通用用词；时间的表述必须明确。
【ZY-JDK】代码质量：加大空
“加大空”，分别是加载、大于、空值。
加载：页面过渡时需要加载动画。大于：数据可能存在过大或过小的情况，此时前端需要做溢出或过小的样式处理。空值：任何数据拿到都要判断空异常、以及判断类型异常。
开发做不到加大空，代码质量绝对是“假大空”！
【ZY-JDK-001】加：加载时，需要加载动画或者骨架屏过渡
页面过渡时需要加载动画，很多初级前端在写页面的时候从来不考虑加载动画，后台请求数据时，常常是空数据样式直接到有数据的列表，交互体验很差，这是一种很低级的错误。
一般选用骨架屏，样式更好看。
值得注意的是，不要在一个界面出现两个或多个加载动画。应该分区块加载，如下图所示：
【ZY-JDK-002】大：大于或小于数据展示范围的特殊处理
数据大于了展示范围，考虑溢出的处理
这种情况需要加溢出省略处理
【ZY-JDK-003】空：空值、异常值的处理
数据空值、异常值的处理，空样式展示。
1.【究极无敌重要】对象属性/数组判空的处理——可选链式选择语法。
当你在获取一个对象的属性的时候，你可能需要检测这个属性是否存在，否则会报错；比如：
var obj
console.log(obj.name)
会报错：TypeError: Cannot read property 'name' of undefined；
特别是后端接口返回的数据，前端数据一般是你自己定义的，有就是有，没有就是没有。
所以在使用接口返回的数据的时候，要做属性判断，再使用：
if(resp && resp.data) {
this.tableData = resp.data
}
如果属性嵌套很深，就很难受了 ≧ ﹏ ≦
if (person && person.owner && person.owner.permission) {
let usecar = person.owner.permission.usecar
}
所以对于复杂的属性判断，使用 可选链 就很棒了。
它使我们能检查一个对象上面的某属性是否为 null 或者 undefined，如果是，则返回 undefined，而不会报错。
this.tableData = resp?.data
可选链还可以在数组中使用
let moveName = movie.actors?.[0]?.name
object?.property；常见的一种object?.[expression]；用于访问数组项或访问动态属性object?,[arg1, [arg2, ...]；用于执行对象的一个方法，有时候不知道这个对象的方法是否存在，也可以用可选链来搞
const object = null
object?.method(‘Some value’) // => undefined
可选链接运算符的有趣之处在于，只要在左侧 leftHandSide？.rightHandSide 遇到无效值，右侧访问就会停止，这称为短路。
看看例子：
const nothing = null;
let index = 0;
nothing?.[index++]; // => undefined
index; // => 0
2.空样式的处理
文本没有值时要给展示空文本：-
<div>{{item || '-'}}<div/>
无数据要使用空状态组件：空状态 Empty - Ant Design Vue
【ZY-GS】格式处理
【ZY-GS-001】数字处理
数字类型的值，需要做两种判断：
1.小数，小数位数一般不能超过2位，除非是极小数，0.0000001这种需展示完整。
2.金额，做千分符处理，每隔3位就要用逗号分割
可使用以下的formatMoney方法来快速转换为千分符数字：
/**
* 该方法用于数字逗号分隔，三位一个逗号
* @param s 需要分隔的数字
* @param type 是否保留小数（不留传0 保留传保留几位）
* @returns {string} 返回分隔好的数据
*/
export function formatMoney(s, type) {
if (/[^0-9.]/.test(s)) { return '0' }
if (s == null || s == '') { return '0' }
s = s.toString().replace(/^(\d*)$/, '$1.')
s = (s + '00').replace(/(\d*.\d\d)\d*/, '$1')
s = s.replace('.', ',')
let re = /(\d)(\d{3},)/
while (re.test(s)) { s = s.replace(re, '$1,$2') }
s = s.replace(/,(\d\d)$/, '.$1')
if (type == 0) { // 不带小数位(默认是有小数位)
let a = s.split('.')
if (a[1] == '00') {
s = a[0]
}
}
return s
}
【ZY-GS-002】日期处理
像这种没有必要细化到时分秒的数据，就不要展示这种00:00:00
【ZY-UI】UI规范
【ZY-UI-001】工具：Tailwind CSS
所有css用原子样式库Tailwind CSS写 Width - Tailwind CSS
此外，你的所有单位都不能用px，只能用rem，因为这样才能做适配。
按照16px=1rem去做转换填值。
【ZY-UI-002】间距
需要通过各元素的间距来体现出信息的关联性，格式塔原理中的“接近性”原则告诉我们，相互靠近的物体被认为比相互距离较远的物体更有关联性，因此，相关联的元素之间靠的越近，用户越能感知到信息的关联，同时更能了解整个界面中各模块信息的逻辑关系。
1.纵向间距关系 通过8px（0.5rem）『小号间距』、16px（1rem）『中号间距』、24px（1.5rem）『大号间距』这三种规格来划分信息层次；在 Ant Design 中，y=8+8*n。其中，n>=0，y 是纵向间距，8 是『基础间距』。
2.横向间距关系
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
在一个组件内部，元素的横向间距也应该有所不同。
【ZY-UI-003】字体
一般字体大小为14px（0.8rem），行高为1.2倍。
另外要注意文字的对比度检验，参考WACG 2.0 的标准，文本和背景色之间至少保持最小 4.5:1 的对比度（AA 级），正文内容都保持了 7:1 以上的 AAA 级对比度。： 文字颜色对比度检验
【ZY-GF】代码规范
【ZY-GF-001】代码格式规范
采用eslint规范代码格式，需要设置保存自动运行eslint。
【有道云笔记】webstorm 设置保存自动格式化
note.youdao.com/s/caJfqRHg
【ZY-GF-002】命名规范
变量的命名中应尽量减少缩写的情况发生，做到见名知意。
// 👎 自我感觉良好的缩写:
let rContent = 'willen';
// 👍 无需对每个变量都写注释，从名字上就看懂
let firstName = 'jackie';
// 👎 不要写魔法数字！
let column1 = [...];
let column2 = [...];
let column3 = [...];
let tab = '1';// '1'、'2'、'3'
// 👎 从命名无法知道返回值类型
function showFriendsList() {....} // // 无法辨别函数意图,返回的是一个数组，还是一个对象，还是true or false?
// 👍 明确函数意图，对于返回true or false的函数，最好以should/is/can/has开头
function shouldShowFriendsList() {...}
function isEmpty() {...}
function canCreateDocuments() {...}
function hasLicense() {...}
function sendEmailToUser(user) {.... } //动词开头，函数意图就很明显
【ZY-GF-003】辅助函数必须是纯函数
// 👎 不要让功能函数的输出变化无常
function plusAbc(a, b, c) { // 这个函数的输出将变化无常，因为api返回的值一旦改变，同样输入函数的a，b,c的值，但函数返回的结果却不一定相同。
var c = fetch('../api');
return a+b+c;
}
// 👍 功能函数使用纯函数，输入一致，输出结果永远唯一
function plusAbc(a, b, c) { // 同样输入函数的a，b,c的值，但函数返回的结果永远相同。
return a+b+c;
}
【ZY-GF-004】优先使用函数式编程
// 👎 使用for循环编程
for(i = 1; i <= 10; i++) {
a[i] = a[i] +1;
}
// 👍 使用函数式编程
let b = a.map(item => ++item)
【ZY-GF-005】组件复杂度
如果一个组件做的事情太多，应适当提取一些逻辑，将其拆分为更小的组件。
如果提取的组件很复杂，则需要依照一定的规则和条件一一提取它。
一般大于800行就要考虑拆，但代码行数并不是一个客观的衡量标准，更多是需要考虑责任划分和抽象。
【ZY-GF-006】不要在正式版本分支写演示代码
比如为了演示前端写死某个Id，这种留到后面忘记了绝对是坑。
如果实在要加，先新建分支改，如果一定要再主分支改，那一定要加TODO。
【JM】界面优化项
【JM-TABLE】表格
【JM-TABLE-001】表格信息的筛选
拿到后台默认生成的表格组件后，建议不要着急上手做，先试着去分析“如果我是该产品用户，真正需要哪些字段，理由是什么？”这样的方式对于你而言有两点好处：
- 多维思考： 能够让你深入挖掘需求，进行多维度的思考，而不是做一个单纯的ui界面实现人员。当你觉得展示字段有欠考虑时，可以多去和产品、后台沟通，了解这条数据展示的背后逻辑，有利于自我快成长
- 捍卫体验： 坚持与用户站在一起，毕竟我们是整个流程中，为用户考虑的最后一道防线，不要因为字段设计上缺失进而由用户来买单，这样更能帮助你对业务上有更深刻的理解
将需求分析清楚后，我们便可着手去做。在面对数据过多的字段展示时，我们通常都是采取「信息层级」的方式来让多个字段合理展示，虽然方法都是相同，但是在设计形式上，还是有三种不同的方式。
1. 多层展示：
当横向数据过多时，为了避免字段的隐藏，只有拓展纵向空间。无论你是使用叠层、衔接，都是将多个同一维度的数据，进行纵向拓展。
比如你需要在一行去展示：发货时间、发货地点、发货人以及物流信息，如果想让用户直接了当的看到所有信息，叠层、衔接都能够达到目的。虽然形式上比较平铺直叙，但直接在B端往往能取得不错的效果。
2. 主次展示：
多层展示让数据平铺直叙，主次展示让数据有了轻重。
通常在表格中，一列多条数据必定会有主次之分，然而在B端的表达方式上也会有较大的区别：
- 强弱化： 将主次的信息通过粗细、大小、深浅等处理方式进行简单弱化，形成信息层级，这种方式能够在短时间内快速设计，适合新手入门进行信息的快速区分
- 标签化： 在将主次信息区分后，对次要信息进行标签形式的处理，虽然看上去是一个设计形式的转变，但通常很多辅助信息都是内化为产品的特定状态，可减少字段头部的内容宽度，同时便于产品形成一套自身产品的标签体系
- 符号化： 将特殊字段设计为特定的符号，在对表格进行简化的过程中，将诸如状态、电话、性别之类的属性进行符号化，并且可展示当前是否填写的状态，一方面将用户是否填写该信息，你可一目了然的看到，同时针对这些次要信息，这样可以提升展示效率，极大降低用户阅读所需要花费的时间，同时当用户Hover就可展示符号下的信息，也便于用户阅读
我举一个实际工作中的例子，在我们自身产品的「OS系统」中，会针对客户开通产品线的八个产品。对于我们而言，就需要展示客户名称、客户等级、余额、开通产品等20+个字端进行展示，我们便采取了上面三种不同的方式，并且OS端作为小部分销售用，使用标签、符号对于系统而言认知成本会变低，按钮快速点击，产品就可快速开通，使用会更加合理。
「OS系统」：主要目的是针对销售在与客户沟通时，需要查看客户的信息、开通相应的产品，并且在为其推荐产品后能够进行快速开通
3. 隐藏展示：
隐藏展示并不属于上面的两种形式，主要是将大量的非重点信息进行折叠收起，提供一个较深的细节入口来隐藏掉信息，常见有下拉、浮层、提示框、弹窗…
这种方式虽然用数据更为简洁，但是会有一定的认知成本，因此使用时需要多加注意，比如在网页端的淘宝订单中，也使用同样的方法将订单的物流信息进行收纳，使信息更加整洁。
4.表格宽度每个都需要细看，不要有多余空隙。
5.表格的行高不要空隙太大，尽量展示更多的列。
【CZ】操作优化项
【CZ-CLICK】点击事件处理
【CZ-CLICK-001】给大部分文段赋值点击事件，如果这段文字用户有复制的需求，要处理选中文本和点击冲突处理
比较好的解决方法：封装按下事件（现在已经封装成了指令），处理复制和点击冲突。
使用 v-copytouch="click"，即绑定“click”这个事件为点击事件，并处理选中文本和点击冲突处理
注意：需安装easy-project-vue
<p v-copytouch="click"> 我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字，我是一段文字... </p>
【CZ-CLICK-002】可以点的地方必须要加悬浮小手样式
cursor: pointer;
注意：文字和图标都要支持点击，不要顾此失彼，一会少了支持文字点击，一会少了图标点击。
【CZ-CLICK-003】 不可逆的操作，按钮没有点击提示，点击直接进行了操作
特别是一些重要不可逆的操作，比如删除，一定要弹对话框提示是否确认操作。
【CZ-CLICK-004】 新增、搜索等操作按钮要加防抖处理
现在已经加了v-debounce指令
注意：需安装easy-project-vue
发送请求
【CZ-CLICK-005】点击热区尽可能大，检查点击图标有没有触发点击事件
解决办法是使用伪元素(伪元素同样可以代表其宿主元素来响应鼠标的交互)
.button{ position: relative; } .button::after{ content: ""; position: absolute; left: -10px; top: -10px; right: -10px; bottom: -10px; }
用自己封装的指令v-expandclick：
注意：需安装easy-project-vue
