概述
当前还原度问题涉及到:
- 颜色
- 页面背景颜色
- 滚动条颜色
- 导航颜色(默认、鼠标悬浮、图标、二级导航等)
- 按钮默认颜色(默认、鼠标悬浮、按钮点击)
- 正文文本颜色
- 表单类输入框文本颜色、表单类输入框提示文字颜色
- 边距
- 页面边距
- 分组组件
- 表单项标题与必填符号 “*” 间距
- 表单项间距
- 对话框边距
- 圆角问题
- 圆角大小应该使用 rem,部分内容看不到圆角
- 缩放问题
- 字体大小、元素宽高、图标大小、margin、padding 应尽量使用 rem
- antd 样式重写
- 字体大小
- 字体颜色
- antd 样式中 px 替换为 rem
- 组件
- 上传图片
- 上传附件
- 分组
- 标签页
- 其他等具体需要修改的样式
主要工作
样式文件多而杂,针对复用度高的样式,应全部定义变量,进行集中管理
- 颜色定义
- 包括文本颜色、背景颜色、边框颜色等常用颜色
- 在每个包含文本内容的 DOM 结构部分,均应该显式定义字体相关属性(字体颜色、字体大小、字体类型等)
- 表单中全局设置样式以后,设置的字体大小将不起作用,内部使用 antd 组件会重写字体大小等属性,其之后的组件将不能被继承字体相关 css 属性(待讨论)
- 按钮等可以自行配置颜色的内容,使用行内样式,在 ts 中处理,其优先级高于外部样式
- 边距定义
- 包括常用边距大小 20px 4px 2px 等
- 对设计器内部组件、布局组件、部件弹窗等构建应用可能用到的组件进行梳理,调整边距
- 圆角变量
- 设计器组件样式中,未使用圆角的组件,增加圆角
- 圆角单位应使用 rem
- 针对缩放问题,应将 px 替换为 rem
- 如何快速替换
- 第三方插件样式中,使用的 px 如何替换为 rem
- antd 样式重写
- 结合类名使用
- 组件样式调整
- 分组组件标题
- 上传图片:标题与内容对齐
- 上传附件:标题与内容对齐
- 各个独立样式点的修复与验证