Ant Design升级到v4版本

设计规范调整

行高从 1.5(21px) 调整为 1.5715(22px)。

基础圆角调整，由4px 改为 2px。

Selected 颜色和 Hovered 颜色进行了交换。

全局阴影优化，调整为三层阴影区分控件层次关系。

气泡确认框中图标的使用改变，由问号改为感叹号。

部分组件选中颜色统一改为 @blue-1: #E6F7FF，对应 hover 颜色改为 @gray-2: #FAFAFA。

报错色色值调整，由 @red-5: #F5222D 改为 @red-5: #FF4D4F。

分割线颜色明度降低，由 #E8E8E8 改为 #F0F0F0。

DatePicker 交互重做，面板和输入框分离，范围选择现可单独选择开始和结束时间。

Table 默认背景颜色从透明修改为白色。

Tabs 火柴棍样式缩短为和文字等长。

由于一些代码修改较大，因此需要对已有代码进行修改

Icon 修改

这次图标从原先的全量引入改为了按需加载，对于确定只需要单个图标的地方，可以通过按需引入只加载单个图标的svg，共计能节省150KB

但是！ 由于左侧的导航部分使用了动态图标，因此这里不能按需加载，因此需要使用import { Icon } from '@ant-design/compatible';来引入原本的Icon以供使用（@ant-design/compatible需要单独下载）

Form 修改

原本Ant Design的Form使用Form.create()、this.props.form.getFieldDecorator()等函数对各种表单进行修改，可以说是非常不优雅的一种写法，这次更新将Form改写成了更符合直觉的写法¹

首先，删掉导出的Form.create()部分，原先使用this.props.form.getFieldDecorator()设置的名称、规则直接通过Form.Item的参数设置

而获得Form实例有两种方式，首选的方案为使用const [form] = Form.useForm();，但是这种写法在class component中无法使用，因此应该使用另一种方案formRef = React.createRef<FormInstance>();，并使用<Form ref={this.formRef}>来绑定
需要调用form相关函数时，可以使用this.formRef.current.getFieldsValue()

字段的初始值设置，移入了<Form initialValues={{"name":"OhYee"}}>，同时字段对应属性valuePropName则移入Form.Item

Row 修改

新版本的栅格组件将flex从Row移入Col，因此所有涉及到布局的内容都应该重新修改

Table 修改

Table基本上没有太大的修改，只不过改了下表格背景色及一些细节
但是最大的问题在于引入了一个新的Bug：在column中的setState()不会触发表格重新渲染（但是值确实已经改变了）。对于可编辑的表格来说，将导致功能不可用。

临时的解决方案时，把对应行的 key 值修改成别的值，然后再修改回去，从而触发行重新渲染，相关Issue见参考资料² ³。

不过由于这里后台深度依赖于该功能，以及设计拓展字段也依赖于该功能，这种深层次的修改更为复杂，因此还是等待官方更新。