前端页面布局建议

页面部分

1.建议布局支持响应式，设置最小宽度/高度，小于最小值时出现横/纵向的滚动，避免式样错乱
对于动态内容，使用min-width/height、max-width/height等限制合理的宽度或者高度，避免影响整体的布局

2.必要位置使用tooltip展示未展示完的内容或注解，内容过多tooltips纵向滚动

3.图片的展示，固定图片的展示宽或高，避免图片溢出或被压缩

4.图片根据业务场景建议做图片压缩或裁剪，提高加载渲染性能

5.点击区域优化、尽量在合理的范围内扩大点击区域

6.可点击区域针对不同的场景使用不同的cursor样式

7.尽量避免使用z-index，如果使用建议从1开始递增，避免直接使用999类似的数值

8.建议项目采用系统自带的字体，且控制字体类型的数量（尽量不要引入额外中文字体，有特殊场景需让UI单独筛一下使用到的字符）

9.避免多层滚动条及滚动条位置（避免跟显示内容贴在一起）

10.无数据时缺省图片的展示（常见于echarts、列表）

11.修改样式时，尽量避免样式覆盖，尽量找到出现问题的根本原因进行解决，而不是增加权重进行强制覆盖。

图表部分

1.饼状图可能存在数据量过多，需单独编写 legend 的场景

2.折线图需考虑数据量过大及底部横坐标字符超出显示范围被截断的问题

表格部分

1.表格头部增加必要的单位、且建议锁定表头，重新搜索后，分页页码重置为1

2.删除数据的二次弹框提示

3.根据业务使用场景，必要时设置columns ellipsis，避免数据超长影响整体布局

表单部分

1.非必填的表单项输入框增加一键清除按钮，查询表单建议增加重置按钮

2.建议输入框根据业务要求添加长度限制，部分特殊场景增加格式限制

3.重置功能应该重置为表单的初始状态、而非清空所有数据

4.checkbox数据较多时，建议增加全选/反选功能，必填表单的校验及友好的错误提示；建议必填表单无须设置clearable属性

5.select多选时，考虑input框被撑开的情况，列表查询条件中，可监听屏幕宽度变化动态调整maxTagCount

6.固定宽度，根据实际业务场景调整，如果选项过长可以跟产品商量调整选中后tag显示字长

7.上下限、时间范围表单项时要考虑最小值应该小于等于最大值的校验

8.抽屉或弹窗的表单，关闭时需增加二次确认校验，表单的提交需要处理重复提交的问题，节流或者增加loading状态

9.表单元素尽量避免使用定宽（推荐使用row、col来排列布局）