前言

在公司中，前端使用了统一的组件element-ui，但是有一些页面大家并没有达成共识，造成了不同的团队开发出来的页面不同，公司决定在24年8月的迭代进行统一调整。在这个中间，我遇到了很多意料之外的问题，希望未来的你遇到了类似的问题，可以尽量避免

为什么会产生这个问题

这个问题我也思考过，大概有以下原因

1. 我们有4个产品经理，每个人负责不同的模块，都有各自的风格，造成页面不统一

2. 没有一个严格的UI规范，前端开发和测试并没有一个可以参考标准页面

3. 22年至今，项目都在疯狂的迭代功能，并没有人停下来看看之前做的功能有哪些问题，我们该怎么去优化

项目背景

参与人：UI设计师、前端开发、产品（主要负责审核，并没参与讨论）、测试

牵头人：UI设计师 职责：找出问题点，整理为在线文档

解决者：前端 职责：整理问题点、改公告组件、输出文档

主要问题如下

1. 弹窗（Dialog）组件大小不一。宽度有400px、700px、800px、940px、1250px、50%、60%等，用户在操作的时候，会感觉到页面时大时小，不统一

2. 表格样式很多（Table)。搜索的列未对齐、分页码数未统一、表格后的操作栏千奇百怪、表头的标题有的进行了换行等

3. 颜色的乱用。颜色有很多，有各种颜色的红色

4. 弹窗表单的按钮位置不同。有的取消在左，有的取消在右面。

5. 等等一些小问题就不一一列举了

弹窗组件大小不一

弹窗大小不统一部分截图

800px

600px

1180px

解决方案

我们在私服中clone了一份element-ui，直接修改了源码

默认制定了三个尺寸的size，small(600px), medium(900px),large(1200px)，满足基本的需求。当需要支持特殊组件的时候，也可以直接设置Width满足需求

表格不统一

部分截图

上方的截图有几个问题

1. 搜索条件（查找人员）没有和新增按钮对齐

2. 离职和删除的按钮是比较敏感的操作，但是夹在了一堆按钮中间

3. 操作按钮有的有icon，有的没icon，看着些许的混乱

进行修改后效果如下，页面看着更加的工整

解决方案如下

1. 搜索条件的第一个在组件内直接进行计算宽度，防止业务端进行二次修改，如果是自定义的搜索条件，并且设置了宽度，需要手动进行修改

2. 一些危险的操作：比如离职、删除统一放在最后，并且每个操作按钮都要有icon

表格按钮的调整

调整前

调整后

解决方案如下

表格后的按钮去除所有的icon，直接在组件内进行拦截，默认展示三个按钮，多余的放在dropDown内，当然也支持业务端设置显示几个按钮

核心部分代码如下

分页数据不统一

调整前

调整后

解决方案

分页条数统一改为（20，50，100）

考虑的因素为：之前的页面有15一页的。当页面过高的时候，会撑不满一个页面，造成table的页面空白，不太美观

弹窗中，下方的操作栏的按钮位置不统一

调整前

调整后

解决方案

所有的按钮都是取消在左，保存在右面，同时，confirm组件，在element-ui的代码中直接修改调整位置，减少业务端工作量

颜色的乱用

部分截图

解决方案

在主应用的根节点 使用css变量，在每个子应用的页面直接使用根节点的样式，避免子应用的颜色出现各种奇奇怪怪的颜色。

使用的地方

等等 当然还有一些基础颜色的修改、按钮最小宽度的修改、一些表格间距的调整等。这些和设计师、产品达成共识后，进行修改就行了，也就不一一列举了