feat: add my component

antd-sample/MyComponent.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import styles from './MyComponent.module.less';
+
+export const MyComponent = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.div}>
+        <div className={styles.pZvKR}>
+          <div className={styles.zTgKe}>
+            <span className={styles.span}>数据总览</span>
+            <span className={styles.qJDnm}>你的每一份成长都记录</span>
+          </div>
+          <div className={styles.kBVol}>近 1 年</div>
+        </div>
+        <div className={styles.xEqUH}>
+          <div className={styles.xYuOG}>
+            <span className={styles.vHYtO}>创作天数</span>
+            <span className={styles.fCtBp}>160</span>
+          </div>
+          <div className={styles.xYuOG}>
+            <span className={styles.vHYtO}>创作字数</span>
+            <span className={styles.fCtBp}>14,385</span>
+          </div>
+          <div className={styles.oSVrf}>
+            <span className={styles.jlPlf}>内容更新</span>
+            <span className={styles.aAiBx}>1,807</span>
+          </div>
+          <div className={styles.oSVrf}>
+            <span className={styles.jlPlf}>获得点赞</span>
+            <span className={styles.aAiBx}>413</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

antd-sample/MyComponent.module.less

@@ -0,0 +1,92 @@
+.wrapper {
+  background-color: #ffffff;
+  width: 500px;
+
+  .div {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .pZvKR {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      border-radius: 4px;
+      background-color: #fafafa;
+      margin-bottom: 11px;
+      padding: 2px 10px 2px 10px;
+
+      .zTgKe {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        margin-left: 10px;
+
+        .span {
+          color: #333333;
+          font-size: 12px;
+        }
+
+        .qJDnm {
+          color: #585a5a;
+          font-size: 11px;
+        }
+      }
+
+      .kBVol {
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 10px;
+        border-radius: 5px;
+        border: solid 1px #e7e9e8;
+        margin-left: 16px;
+        padding: 4px 10px 4px 10px;
+      }
+    }
+
+    .xEqUH {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      border-radius: 4px;
+      background-color: #fafafa;
+      margin-bottom: 11px;
+      padding: 2px 10px 2px 10px;
+
+      .xYuOG {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        margin-left: 10px;
+
+        .vHYtO {
+          color: #333333;
+          font-size: 12px;
+        }
+
+        .fCtBp {
+          color: #585a5a;
+          font-size: 11px;
+        }
+      }
+
+      .oSVrf {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        margin-left: 10px;
+
+        .jlPlf {
+          color: #585a5a;
+          font-size: 12px;
+        }
+
+        .aAiBx {
+          color: #8b8f8d;
+          font-size: 11px;
+        }
+      }
+    }
+  }
+}

antd-sample/app.jsx

@@ -11,6 +11,9 @@ import './app.less';
 import fetch from './common/fetch';
 import Login from './login.jsx';
 
+import { MyComponent } from './MyComponent';
+import styles from './app.module.less';
+
 import {
   Layout,
   Select,
@@ -94,6 +97,10 @@ class App extends React.Component {
     return (
       <Layout>
         <Header className="header" />
+        <div className={styles.myComponent}>
+          <h3>MyComponent</h3>
+          <MyComponent />
+        </div>
         <Content style={{ padding: 30 }}>
           <Select
             className="test-list"

antd-sample/app.module.less

@@ -0,0 +1,4 @@
+.myComponent {
+  border: 1px solid black;
+  padding: 20px;
+}

package.json

@@ -26,7 +26,7 @@
     "contributor": "git-contributor"
   },
   "devDependencies": {
-    "@ant-design/icons": "^4.7.0",
+    "@ant-design/icons": "^5.2.6",
     "@babel/core": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-decorators": "^7.0.0",