还原度问题清单
待确认:还原度问题

概述

当前还原度问题涉及到:

  1. 颜色
    1. 页面背景颜色
    2. 滚动条颜色
    3. 导航颜色(默认、鼠标悬浮、图标、二级导航等)
    4. 按钮默认颜色(默认、鼠标悬浮、按钮点击)
    5. 正文文本颜色
    6. 表单类输入框文本颜色、表单类输入框提示文字颜色
  2. 边距
    1. 页面边距
    2. 分组组件
    3. 表单项标题与必填符号 “*” 间距
    4. 表单项间距
    5. 对话框边距
  3. 圆角问题
    1. 圆角大小应该使用 rem,部分内容看不到圆角
  4. 缩放问题
    1. 字体大小、元素宽高、图标大小、margin、padding 应尽量使用 rem
  5. antd 样式重写
    1. 字体大小
    2. 字体颜色
    3. antd 样式中 px 替换为 rem
  6. 组件
    1. 上传图片
    2. 上传附件
    3. 分组
    4. 标签页
  7. 其他等具体需要修改的样式

主要工作

样式文件多而杂,针对复用度高的样式,应全部定义变量,进行集中管理

  1. 颜色定义
    1. 包括文本颜色、背景颜色、边框颜色等常用颜色
    2. 在每个包含文本内容的 DOM 结构部分,均应该显式定义字体相关属性(字体颜色、字体大小、字体类型等)
    3. 表单中全局设置样式以后,设置的字体大小将不起作用,内部使用 antd 组件会重写字体大小等属性,其之后的组件将不能被继承字体相关 css 属性(待讨论)
    4. 按钮等可以自行配置颜色的内容,使用行内样式,在 ts 中处理,其优先级高于外部样式
  2. 边距定义
    1. 包括常用边距大小 20px 4px 2px 等
    2. 对设计器内部组件、布局组件、部件弹窗等构建应用可能用到的组件进行梳理,调整边距
  3. 圆角变量
    1. 设计器组件样式中,未使用圆角的组件,增加圆角
    2. 圆角单位应使用 rem
  4. 针对缩放问题,应将 px 替换为 rem
    1. 如何快速替换
    2. 第三方插件样式中,使用的 px 如何替换为 rem
  5. antd 样式重写
    1. 结合类名使用
  6. 组件样式调整
    1. 分组组件标题
    2. 上传图片:标题与内容对齐
    3. 上传附件:标题与内容对齐
  7. 各个独立样式点的修复与验证