diff --git a/.umirc.js b/.umirc.js
index 75ec0fc9..85f1038f 100644
--- a/.umirc.js
+++ b/.umirc.js
@@ -3,7 +3,7 @@ export default {
     [
       'umi-plugin-block-dev',
       {
-        layout: 'ant-design-pro-user',
+        layout: 'ant-design-pro',
         menu: {
           name: '主页',
           icon: 'home',
diff --git a/DashboardMonitor/src/index.tsx b/DashboardMonitor/src/index.tsx
index a5891898..75b60bab 100644
--- a/DashboardMonitor/src/index.tsx
+++ b/DashboardMonitor/src/index.tsx
@@ -96,7 +96,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                   </Col>
                 </Row>
                 <div className={styles.mapChart}>
-                  <Map></Map>
+                  <Map />
                 </div>
               </Card>
             </Col>
diff --git a/EmptyPage/src/index.tsx b/EmptyPage/src/index.tsx
index 02d09ab7..d9e0ef71 100644
--- a/EmptyPage/src/index.tsx
+++ b/EmptyPage/src/index.tsx
@@ -13,7 +13,7 @@ export default () => {
   return (
     <PageHeaderWrapper content="这是一个新页面，从这里进行开发！" className={styles.main}>
       <div style={{ paddingTop: 100, textAlign: 'center' }}>
-        <Spin spinning={loading} size="large"></Spin>
+        <Spin spinning={loading} size="large" />
       </div>
     </PageHeaderWrapper>
   );
diff --git a/ListSearchProjects/package.json b/ListSearchProjects/package.json
index cd18daaf..c7a74dee 100644
--- a/ListSearchProjects/package.json
+++ b/ListSearchProjects/package.json
@@ -12,7 +12,6 @@
     "dev": "umi dev"
   },
   "dependencies": {
-    "@ant-design/compatible": "^0.0.1-rc.0",
     "classnames": "^2.2.6",
     "dva": "^2.4.0",
     "moment": "^2.22.2",
diff --git a/ListSearchProjects/src/components/StandardFormRow/index.less b/ListSearchProjects/src/components/StandardFormRow/index.less
index fd390e38..d619cd2c 100644
--- a/ListSearchProjects/src/components/StandardFormRow/index.less
+++ b/ListSearchProjects/src/components/StandardFormRow/index.less
@@ -2,6 +2,7 @@
 
 .standardFormRow {
   display: flex;
+  width: 100%;
   margin-bottom: 16px;
   padding-bottom: 16px;
   border-bottom: 1px dashed @border-color-split;
diff --git a/ListSearchProjects/src/index.tsx b/ListSearchProjects/src/index.tsx
index 950970cd..9a25683b 100644
--- a/ListSearchProjects/src/index.tsx
+++ b/ListSearchProjects/src/index.tsx
@@ -1,10 +1,6 @@
-import { Form } from '@ant-design/compatible';
-import '@ant-design/compatible/assets/index.css';
-import { Card, Col, List, Row, Select, Typography } from 'antd';
-import React, { Component } from 'react';
-
+import { Card, Col, Form, List, Row, Select, Typography } from 'antd';
+import React, { FC, useEffect } from 'react';
 import { Dispatch } from 'redux';
-import { FormComponentProps } from '@ant-design/compatible/es/form';
 import { connect } from 'dva';
 import moment from 'moment';
 import AvatarList from './components/AvatarList';
@@ -18,7 +14,7 @@ const { Option } = Select;
 const FormItem = Form.Item;
 const { Paragraph } = Typography;
 
-interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
+interface PAGE_NAME_UPPER_CAMEL_CASEProps {
   dispatch: Dispatch<any>;
   BLOCK_NAME_CAMEL_CASE: StateType;
   loading: boolean;
@@ -26,146 +22,122 @@ interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
 
 const getKey = (id: string, index: number) => `${id}-${index}`;
 
-class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
-  componentDidMount() {
-    const { dispatch } = this.props;
+const PAGE_NAME_UPPER_CAMEL_CASE: FC<PAGE_NAME_UPPER_CAMEL_CASEProps> = ({
+  dispatch,
+  BLOCK_NAME_CAMEL_CASE: { list = [] },
+  loading,
+}) => {
+  useEffect(() => {
     dispatch({
       type: 'BLOCK_NAME_CAMEL_CASE/fetch',
       payload: {
         count: 8,
       },
     });
-  }
-
-  render() {
-    const {
-      BLOCK_NAME_CAMEL_CASE: { list = [] },
-      loading,
-      form,
-    } = this.props;
-    const { getFieldDecorator } = form;
-
-    const cardList = list && (
-      <List<ListItemDataType>
-        rowKey="id"
-        loading={loading}
-        grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
-        dataSource={list}
-        renderItem={item => (
-          <List.Item>
-            <Card
-              className={styles.card}
-              hoverable
-              cover={<img alt={item.title} src={item.cover} />}
-            >
-              <Card.Meta
-                title={<a>{item.title}</a>}
-                description={
-                  <Paragraph className={styles.item} ellipsis={{ rows: 2 }}>
-                    {item.subDescription}
-                  </Paragraph>
-                }
-              />
-              <div className={styles.cardItemContent}>
-                <span>{moment(item.updatedAt).fromNow()}</span>
-                <div className={styles.avatarList}>
-                  <AvatarList size="small">
-                    {item.members.map((member, i) => (
-                      <AvatarList.Item
-                        key={getKey(item.id, i)}
-                        src={member.avatar}
-                        tips={member.name}
-                      />
-                    ))}
-                  </AvatarList>
-                </div>
+  }, []);
+  const cardList = list && (
+    <List<ListItemDataType>
+      rowKey="id"
+      loading={loading}
+      grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
+      dataSource={list}
+      renderItem={item => (
+        <List.Item>
+          <Card className={styles.card} hoverable cover={<img alt={item.title} src={item.cover} />}>
+            <Card.Meta
+              title={<a>{item.title}</a>}
+              description={
+                <Paragraph className={styles.item} ellipsis={{ rows: 2 }}>
+                  {item.subDescription}
+                </Paragraph>
+              }
+            />
+            <div className={styles.cardItemContent}>
+              <span>{moment(item.updatedAt).fromNow()}</span>
+              <div className={styles.avatarList}>
+                <AvatarList size="small">
+                  {item.members.map((member, i) => (
+                    <AvatarList.Item
+                      key={getKey(item.id, i)}
+                      src={member.avatar}
+                      tips={member.name}
+                    />
+                  ))}
+                </AvatarList>
               </div>
-            </Card>
-          </List.Item>
-        )}
-      />
-    );
+            </div>
+          </Card>
+        </List.Item>
+      )}
+    />
+  );
 
-    const formItemLayout = {
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 16 },
-      },
-    };
-
-    return (
-      <div className={styles.coverCardList}>
-        <Card bordered={false}>
-          <Form layout="inline">
-            <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
-              <FormItem>
-                {getFieldDecorator('category')(
-                  <TagSelect expandable>
-                    <TagSelect.Option value="cat1">类目一</TagSelect.Option>
-                    <TagSelect.Option value="cat2">类目二</TagSelect.Option>
-                    <TagSelect.Option value="cat3">类目三</TagSelect.Option>
-                    <TagSelect.Option value="cat4">类目四</TagSelect.Option>
-                    <TagSelect.Option value="cat5">类目五</TagSelect.Option>
-                    <TagSelect.Option value="cat6">类目六</TagSelect.Option>
-                    <TagSelect.Option value="cat7">类目七</TagSelect.Option>
-                    <TagSelect.Option value="cat8">类目八</TagSelect.Option>
-                    <TagSelect.Option value="cat9">类目九</TagSelect.Option>
-                    <TagSelect.Option value="cat10">类目十</TagSelect.Option>
-                    <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
-                    <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
-                  </TagSelect>,
-                )}
-              </FormItem>
-            </StandardFormRow>
-            <StandardFormRow title="其它选项" grid last>
-              <Row gutter={16}>
-                <Col lg={8} md={10} sm={10} xs={24}>
-                  <FormItem {...formItemLayout} label="作者">
-                    {getFieldDecorator(
-                      'author',
-                      {},
-                    )(
-                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
-                        <Option value="lisa">王昭君</Option>
-                      </Select>,
-                    )}
-                  </FormItem>
-                </Col>
-                <Col lg={8} md={10} sm={10} xs={24}>
-                  <FormItem {...formItemLayout} label="好评度">
-                    {getFieldDecorator(
-                      'rate',
-                      {},
-                    )(
-                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
-                        <Option value="good">优秀</Option>
-                        <Option value="normal">普通</Option>
-                      </Select>,
-                    )}
-                  </FormItem>
-                </Col>
-              </Row>
-            </StandardFormRow>
-          </Form>
-        </Card>
-        <div className={styles.cardList}>{cardList}</div>
-      </div>
-    );
-  }
-}
+  const formItemLayout = {
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 16 },
+    },
+  };
 
-const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
-  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps) {
-    // 表单项变化时请求数据
-    // 模拟查询表单生效
-    dispatch({
-      type: 'BLOCK_NAME_CAMEL_CASE/fetch',
-      payload: {
-        count: 8,
-      },
-    });
-  },
-})(PAGE_NAME_UPPER_CAMEL_CASE);
+  return (
+    <div className={styles.coverCardList}>
+      <Card bordered={false}>
+        <Form
+          layout="inline"
+          onValuesChange={() => {
+            // 表单项变化时请求数据
+            // 模拟查询表单生效
+            dispatch({
+              type: 'BLOCK_NAME_CAMEL_CASE/fetch',
+              payload: {
+                count: 8,
+              },
+            });
+          }}
+        >
+          <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
+            <FormItem name="category">
+              <TagSelect expandable>
+                <TagSelect.Option value="cat1">类目一</TagSelect.Option>
+                <TagSelect.Option value="cat2">类目二</TagSelect.Option>
+                <TagSelect.Option value="cat3">类目三</TagSelect.Option>
+                <TagSelect.Option value="cat4">类目四</TagSelect.Option>
+                <TagSelect.Option value="cat5">类目五</TagSelect.Option>
+                <TagSelect.Option value="cat6">类目六</TagSelect.Option>
+                <TagSelect.Option value="cat7">类目七</TagSelect.Option>
+                <TagSelect.Option value="cat8">类目八</TagSelect.Option>
+                <TagSelect.Option value="cat9">类目九</TagSelect.Option>
+                <TagSelect.Option value="cat10">类目十</TagSelect.Option>
+                <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
+                <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
+              </TagSelect>
+            </FormItem>
+          </StandardFormRow>
+          <StandardFormRow title="其它选项" grid last>
+            <Row gutter={16}>
+              <Col lg={8} md={10} sm={10} xs={24}>
+                <FormItem {...formItemLayout} label="作者" name="author">
+                  <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
+                    <Option value="lisa">王昭君</Option>
+                  </Select>
+                </FormItem>
+              </Col>
+              <Col lg={8} md={10} sm={10} xs={24}>
+                <FormItem {...formItemLayout} label="好评度" name="rate">
+                  <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
+                    <Option value="good">优秀</Option>
+                    <Option value="normal">普通</Option>
+                  </Select>
+                </FormItem>
+              </Col>
+            </Row>
+          </StandardFormRow>
+        </Form>
+      </Card>
+      <div className={styles.cardList}>{cardList}</div>
+    </div>
+  );
+};
 
 export default connect(
   ({
@@ -178,4 +150,4 @@ export default connect(
     BLOCK_NAME_CAMEL_CASE,
     loading: loading.models.BLOCK_NAME_CAMEL_CASE,
   }),
-)(WarpForm);
+)(PAGE_NAME_UPPER_CAMEL_CASE);
diff --git a/package.json b/package.json
index 41ec0c88..5da12197 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@types/classnames": "^2.2.7",
     "@types/numeral": "^0.0.26",
-    "@umijs/fabric": "^2.0.0",
+    "@umijs/fabric": "^2.0.2",
     "cross-env": "^6.0.0",
     "eslint": "^6.8.0",
     "husky": "^4.0.1",