refactor: project

package.json

@@ -9,6 +9,8 @@
     "start": "npm run dev"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.3.5",
+    "@ant-design/pro-components": "^2.7.0",
     "@ant-design/pro-layout": "^7.19.0",
     "antd": "^5.15.4",
     "axios": "^1.6.8",

pnpm-lock.yaml

@@ -5,6 +5,12 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@ant-design/icons':
+    specifier: ^5.3.5
+    version: 5.3.5(react-dom@18.2.0)(react@18.2.0)
+  '@ant-design/pro-components':
+    specifier: ^2.7.0
+    version: 2.7.0(antd@5.15.4)(rc-field-form@1.43.0)(react-dom@18.2.0)(react@18.2.0)
   '@ant-design/pro-layout':
     specifier: ^7.19.0
     version: 7.19.0(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
@@ -135,7 +141,7 @@ packages:
       '@ant-design/icons': 5.3.5(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-provider': 2.14.1(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-utils': 2.15.6(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       antd: 5.15.4(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.5.1
       omit.js: 2.0.2
@@ -144,7 +150,6 @@ packages:
       react: 18.2.0
     transitivePeerDependencies:
       - react-dom
-    dev: true
 
   /@ant-design/pro-components@2.7.0(antd@5.15.4)(rc-field-form@1.43.0)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-4oV/fb8EBOmYQ5ADl6xWIksIx3FOQ6MspJ/lpi06bWm1oZKDDztMONvGC/4HJ1+bTqAGry2oenP5U4eB7J2Unw==}
@@ -163,14 +168,13 @@ packages:
       '@ant-design/pro-skeleton': 2.1.11(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-table': 3.15.2(antd@5.15.4)(rc-field-form@1.43.0)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-utils': 2.15.6(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       antd: 5.15.4(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
       - '@types/lodash.merge'
       - rc-field-form
-    dev: true
 
   /@ant-design/pro-descriptions@2.5.36(antd@5.15.4)(rc-field-form@1.43.0)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-x1wqAuuYfN6wMx4EVso4v3bm+tVNcEtcsXLkkZp0DnB++0Ywj6l+XJAkGYrXgUv301LH2695jOyF5SzR+/kcQA==}
@@ -182,7 +186,7 @@ packages:
       '@ant-design/pro-form': 2.25.1(antd@5.15.4)(rc-field-form@1.43.0)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-skeleton': 2.1.11(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-utils': 2.15.6(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       antd: 5.15.4(react-dom@18.2.0)(react@18.2.0)
       rc-resize-observer: 0.2.6(react-dom@18.2.0)(react@18.2.0)
       rc-util: 5.39.1(react-dom@18.2.0)(react@18.2.0)
@@ -191,7 +195,6 @@ packages:
       - '@types/lodash.merge'
       - rc-field-form
       - react-dom
-    dev: true
 
   /@ant-design/pro-field@2.14.9(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-o9H/HRndZEhMXS59Oo8rHR1wwYzf22anFtKm0mo0QgfHAHLwDOwxXRjWblRJXRKPPhprLP61wuQYH8i+vcUi6w==}
@@ -202,7 +205,7 @@ packages:
       '@ant-design/icons': 5.3.5(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-provider': 2.14.1(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-utils': 2.15.6(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       '@chenshuai2144/sketch-color': 1.0.9(react@18.2.0)
       antd: 5.15.4(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.5.1
@@ -214,7 +217,6 @@ packages:
       swr: 2.2.5(react@18.2.0)
     transitivePeerDependencies:
       - react-dom
-    dev: true
 
   /@ant-design/pro-form@2.25.1(antd@5.15.4)(rc-field-form@1.43.0)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-mr8/IgLYF/gM2g2dbUUScIvN2WL/A/42iZhIdLKA2EmDWAf8o7cWgL7adM7/N7/Gf7ffRczjao8qG+eNzdtmPw==}
@@ -232,7 +234,7 @@ packages:
       '@ant-design/pro-field': 2.14.9(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-provider': 2.14.1(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-utils': 2.15.6(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       '@chenshuai2144/sketch-color': 1.0.9(react@18.2.0)
       '@umijs/use-params': 1.0.9(react@18.2.0)
       antd: 5.15.4(react-dom@18.2.0)(react@18.2.0)
@@ -245,7 +247,6 @@ packages:
       rc-util: 5.39.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@ant-design/pro-layout@7.19.0(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-E7kfInojfsvyFaYbppQRyGd4f8IRTi+KXXc3wWQ2C1EcWlaASB7AGYlGRjjeJyvIPa3UPOfKkveL7/pM/Z3GiQ==}
@@ -284,7 +285,7 @@ packages:
       '@ant-design/pro-field': 2.14.9(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-table': 3.15.2(antd@5.15.4)(rc-field-form@1.43.0)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-utils': 2.15.6(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       antd: 5.15.4(react-dom@18.2.0)(react@18.2.0)
       classnames: 2.5.1
       dayjs: 1.11.10
@@ -295,7 +296,6 @@ packages:
     transitivePeerDependencies:
       - '@types/lodash.merge'
       - rc-field-form
-    dev: true
 
   /@ant-design/pro-provider@2.14.1(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-N8hTUNJc7dtIjj79ZFviielizo15nOUyjrmz9Ll0Mn68Btne2FLpf8cKHsUMdA+yLDW9oM0ExcqIWJOKyx0nUg==}
@@ -320,11 +320,10 @@ packages:
       react: '>=17.0.0'
       react-dom: '>=17.0.0'
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       antd: 5.15.4(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@ant-design/pro-table@3.15.2(antd@5.15.4)(rc-field-form@1.43.0)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-g2IuyN0gKGolsWv3f+cvjiMKW+tCVAgcr42Alw40xWCgYqgffLYJTZ3uBlQO5g6LeFoYcwKpszSil2GreDP8CA==}
@@ -340,7 +339,7 @@ packages:
       '@ant-design/pro-form': 2.25.1(antd@5.15.4)(rc-field-form@1.43.0)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-provider': 2.14.1(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
       '@ant-design/pro-utils': 2.15.6(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0)
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0)
       '@dnd-kit/modifiers': 6.0.1(@dnd-kit/core@6.1.0)(react@18.2.0)
       '@dnd-kit/sortable': 7.0.2(@dnd-kit/core@6.1.0)(react@18.2.0)
@@ -357,7 +356,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
       - '@types/lodash.merge'
-    dev: true
 
   /@ant-design/pro-utils@2.15.6(antd@5.15.4)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-F9ERv14dnXQjsBYXTxMpl0blWPNhluufrP9ko2X/dYyVYohAFX8j0sbcUEHY7auPAxHT3c06+sjlqp2bXG9NDg==}
@@ -810,7 +808,6 @@ packages:
       react: 18.2.0
       reactcss: 1.2.3(react@18.2.0)
       tinycolor2: 1.6.0
-    dev: true
 
   /@csstools/postcss-color-function@1.1.1(postcss@8.4.38):
     resolution: {integrity: sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==}
@@ -935,7 +932,6 @@ packages:
     dependencies:
       react: 18.2.0
       tslib: 2.6.2
-    dev: true
 
   /@dnd-kit/core@6.1.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==}
@@ -948,7 +944,6 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       tslib: 2.6.2
-    dev: true
 
   /@dnd-kit/modifiers@6.0.1(@dnd-kit/core@6.1.0)(react@18.2.0):
     resolution: {integrity: sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==}
@@ -960,7 +955,6 @@ packages:
       '@dnd-kit/utilities': 3.2.2(react@18.2.0)
       react: 18.2.0
       tslib: 2.6.2
-    dev: true
 
   /@dnd-kit/sortable@7.0.2(@dnd-kit/core@6.1.0)(react@18.2.0):
     resolution: {integrity: sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==}
@@ -972,7 +966,6 @@ packages:
       '@dnd-kit/utilities': 3.2.2(react@18.2.0)
       react: 18.2.0
       tslib: 2.6.2
-    dev: true
 
   /@dnd-kit/utilities@3.2.2(react@18.2.0):
     resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
@@ -981,7 +974,6 @@ packages:
     dependencies:
       react: 18.2.0
       tslib: 2.6.2
-    dev: true
 
   /@emotion/hash@0.8.0:
     resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
@@ -1647,7 +1639,7 @@ packages:
     peerDependencies:
       react: '>=16.3.0'
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       hoist-non-react-statics: 3.3.2
       react: 18.1.0
       react-is: 16.13.1
@@ -1659,7 +1651,7 @@ packages:
     peerDependencies:
       react: '>=16.3.0'
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       hoist-non-react-statics: 3.3.2
       react: 18.2.0
       react-is: 16.13.1
@@ -2545,7 +2537,7 @@ packages:
   /@umijs/history@5.3.1:
     resolution: {integrity: sha512-/e0cEGrR2bIWQD7pRl3dl9dcyRGeC9hoW0OCvUTT/hjY0EfUrkd6G8ZanVghPMpDuY5usxq9GVcvrT8KNXLWvA==}
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       query-string: 6.14.1
     dev: false
 
@@ -2990,7 +2982,6 @@ packages:
     resolution: {integrity: sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==}
     dependencies:
       object-assign: 4.1.1
-    dev: true
 
   /ajv-keywords@3.5.2(ajv@6.12.6):
     resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
@@ -5312,7 +5303,7 @@ packages:
   /history@5.3.0:
     resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==}
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
 
   /hmac-drbg@1.0.1:
     resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==}
@@ -6242,7 +6233,6 @@ packages:
 
   /lodash.tonumber@4.0.3:
     resolution: {integrity: sha512-SY0SwuPOHRwKcCNTdsntPYb+Zddz5mDUIVFABzRMqmAiL41pMeyoQFGxYAw5zdc9NnH4pbJqiqqp5ckfxa+zSA==}
-    dev: true
 
   /lodash.truncate@4.4.2:
     resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
@@ -7614,7 +7604,6 @@ packages:
       rc-util: 5.39.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /rc-image@7.6.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-tL3Rvd1sS+frZQ01i+tkeUPaOeFz2iG9/scAt/Cfs0hyCRVA/w0Pu1J/JxIX8blalvmHE0bZQRYdOmRAzWu4Hg==}
@@ -7800,13 +7789,12 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       classnames: 2.5.1
       rc-util: 5.39.1(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       resize-observer-polyfill: 1.5.1
-    dev: true
 
   /rc-resize-observer@1.4.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==}
@@ -7997,7 +7985,6 @@ packages:
       react-is: 16.13.1
       react-lifecycles-compat: 3.0.4
       shallowequal: 1.1.0
-    dev: true
 
   /rc-util@5.39.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-OW/ERynNDgNr4y0oiFmtes3rbEamXw7GHGbkbNd9iRr7kgT03T6fT0b9WpJ3mbxKhyOcAHnGcIoh5u/cjrC2OQ==}
@@ -8057,7 +8044,7 @@ packages:
       react: ^16.6.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       invariant: 2.2.4
       prop-types: 15.8.1
       react: 18.1.0
@@ -8072,7 +8059,7 @@ packages:
       react: ^16.6.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.23.6
+      '@babel/runtime': 7.24.1
       invariant: 2.2.4
       prop-types: 15.8.1
       react: 18.2.0
@@ -8109,7 +8096,6 @@ packages:
 
   /react-lifecycles-compat@3.0.4:
     resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
-    dev: true
 
   /react-merge-refs@1.1.0:
     resolution: {integrity: sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==}
@@ -8274,7 +8260,6 @@ packages:
     dependencies:
       lodash: 4.17.21
       react: 18.2.0
-    dev: true
 
   /read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
@@ -9201,7 +9186,6 @@ packages:
 
   /tinycolor2@1.6.0:
     resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
-    dev: true
 
   /titleize@3.0.0:
     resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}

src/components/PageFooter.tsx

@@ -0,0 +1,24 @@
+import { Layout } from 'antd';
+
+const { Footer } = Layout;
+
+const PageFooter: React.FC = () => {
+  const startYear = 2024;
+  const curYear = new Date().getFullYear();
+  let yearStr = '';
+  if (startYear === curYear) {
+    yearStr = curYear.toString();
+  } else {
+    yearStr = startYear.toString() + ' - ' + curYear.toString();
+  }
+  return (
+    <div>
+      <Footer style={{ textAlign: 'center', color: '#808080' }}>
+        EVA Tea <br /> <br />
+        &copy; {yearStr} EVA Tech
+      </Footer>
+    </div>
+  );
+};
+
+export default PageFooter;

src/components/Todo.tsx

@@ -0,0 +1,14 @@
+import { Typography } from 'antd';
+
+const { Title, Text } = Typography;
+
+const Todo: React.FC = () => {
+  return (
+    <div>
+      <Title level={1}>施工中...</Title>
+      <Text type={'secondary'}>{'// TODO'}</Text>
+    </div>
+  );
+};
+
+export default Todo;

src/layouts/_defaultProps.tsx

@@ -0,0 +1,152 @@
+import {
+    ChromeFilled,
+    CrownFilled,
+    SmileFilled,
+    TabletFilled,
+  } from '@ant-design/icons';
+  
+  export default {
+    route: {
+      path: '/',
+      routes: [
+        {
+          path: '/welcome',
+          name: '欢迎',
+          icon: <SmileFilled />,
+          component: './Welcome',
+        },
+        {
+          path: '/admin',
+          name: '管理页',
+          icon: <CrownFilled />,
+          access: 'canAdmin',
+          component: './Admin',
+          routes: [
+            {
+              path: '/admin/sub-page1',
+              name: '一级页面',
+              icon: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
+              component: './Welcome',
+            },
+            {
+              path: '/admin/sub-page2',
+              name: '二级页面',
+              icon: <CrownFilled />,
+              component: './Welcome',
+            },
+            {
+              path: '/admin/sub-page3',
+              name: '三级页面',
+              icon: <CrownFilled />,
+              component: './Welcome',
+            },
+          ],
+        },
+        {
+          name: '列表页',
+          icon: <TabletFilled />,
+          path: '/list',
+          component: './ListTableList',
+          routes: [
+            {
+              path: '/list/sub-page',
+              name: '列表页面',
+              icon: <CrownFilled />,
+              routes: [
+                {
+                  path: 'sub-sub-page1',
+                  name: '一一级列表页面',
+                  icon: <CrownFilled />,
+                  component: './Welcome',
+                },
+                {
+                  path: 'sub-sub-page2',
+                  name: '一二级列表页面',
+                  icon: <CrownFilled />,
+                  component: './Welcome',
+                },
+                {
+                  path: 'sub-sub-page3',
+                  name: '一三级列表页面',
+                  icon: <CrownFilled />,
+                  component: './Welcome',
+                },
+              ],
+            },
+            {
+              path: '/list/sub-page2',
+              name: '二级列表页面',
+              icon: <CrownFilled />,
+              component: './Welcome',
+            },
+            {
+              path: '/list/sub-page3',
+              name: '三级列表页面',
+              icon: <CrownFilled />,
+              component: './Welcome',
+            },
+          ],
+        },
+        {
+          path: 'https://ant.design',
+          name: 'Ant Design 官网外链',
+          icon: <ChromeFilled />,
+        },
+      ],
+    },
+    location: {
+      pathname: '/',
+    },
+    appList: [
+      {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
+        title: 'Ant Design',
+        desc: '杭州市较知名的 UI 设计语言',
+        url: 'https://ant.design',
+      },
+      {
+        icon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+        title: 'AntV',
+        desc: '蚂蚁集团全新一代数据可视化解决方案',
+        url: 'https://antv.vision/',
+        target: '_blank',
+      },
+      {
+        icon: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
+        title: 'Pro Components',
+        desc: '专业级 UI 组件库',
+        url: 'https://procomponents.ant.design/',
+      },
+      {
+        icon: 'https://img.alicdn.com/tfs/TB1zomHwxv1gK0jSZFFXXb0sXXa-200-200.png',
+        title: 'umi',
+        desc: '插件化的企业级前端应用框架。',
+        url: 'https://umijs.org/zh-CN/docs',
+      },
+  
+      {
+        icon: 'https://gw.alipayobjects.com/zos/bmw-prod/8a74c1d3-16f3-4719-be63-15e467a68a24/km0cv8vn_w500_h500.png',
+        title: 'qiankun',
+        desc: '可能是你见过最完善的微前端解决方案🧐',
+        url: 'https://qiankun.umijs.org/',
+      },
+      {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
+        title: '语雀',
+        desc: '知识创作与分享工具',
+        url: 'https://www.yuque.com/',
+      },
+      {
+        icon: 'https://gw.alipayobjects.com/zos/rmsportal/LFooOLwmxGLsltmUjTAP.svg',
+        title: 'Kitchen ',
+        desc: 'Sketch 工具集',
+        url: 'https://kitchen.alipay.com/',
+      },
+      {
+        icon: 'https://gw.alipayobjects.com/zos/bmw-prod/d3e3eb39-1cd7-4aa5-827c-877deced6b7e/lalxt4g3_w256_h256.png',
+        title: 'dumi',
+        desc: '为组件开发场景而生的文档工具',
+        url: 'https://d.umijs.org/zh-CN',
+      },
+    ],
+  };

src/layouts/index.tsx

@@ -1,21 +1,82 @@
-import { Link, Outlet } from 'umi';
+import {
-import styles from './index.less';
+  GithubFilled,
+  InfoCircleFilled,
+  QuestionCircleFilled,
+} from '@ant-design/icons';
+import { PageContainer, ProCard, ProLayout } from '@ant-design/pro-components';
+import { useState } from 'react';
+import defaultProps from './_defaultProps';
+
+export default () => {
+  const [pathname, setPathname] = useState('/list/sub-page/sub-sub-page1');
 
-export default function Layout() {
   return (
-    <div className={styles.navs}>
+    <div
-      <ul>
+      id="test-pro-layout"
-        <li>
+      style={{
-          <Link to="/">Home</Link>
+        height: '100vh',
-        </li>
+      }}
-        <li>
+    >
-          <Link to="/docs">Docs</Link>
+      <ProLayout
-        </li>
+        siderWidth={216}
-        <li>
+        bgLayoutImgList={[
-          <a href="https://github.com/umijs/umi">Github</a>
+          {
-        </li>
+            src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
-      </ul>
+            left: 85,
-      <Outlet />
+            bottom: 100,
+            height: '303px',
+          },
+          {
+            src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
+            bottom: -68,
+            right: -45,
+            height: '303px',
+          },
+          {
+            src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png',
+            bottom: 0,
+            left: 0,
+            width: '331px',
+          },
+        ]}
+        {...defaultProps}
+        location={{
+          pathname,
+        }}
+        avatarProps={{
+          src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+          title: '七妮妮',
+          size: 'small',
+        }}
+        actionsRender={(props) => {
+          if (props.isMobile) return [];
+          return [
+            <InfoCircleFilled key="InfoCircleFilled" />,
+            <QuestionCircleFilled key="QuestionCircleFilled" />,
+            <GithubFilled key="GithubFilled" />,
+          ];
+        }}
+        menuItemRender={(item, dom) => (
+          <div
+            onClick={() => {
+              setPathname(item.path || '/welcome');
+            }}
+          >
+            {dom}
+          </div>
+        )}
+      >
+        <PageContainer>
+          <ProCard
+            style={{
+              height: '100vh',
+              minHeight: 800,
+            }}
+          >
+            <div />
+          </ProCard>
+        </PageContainer>
+      </ProLayout>
     </div>
   );
-}
+};

src/pages/logs/Logs.tsx

@@ -0,0 +1,61 @@
+import { FC } from 'react';
+import { EllipsisOutlined } from '@ant-design/icons';
+import { ProList } from '@ant-design/pro-components';
+import { Progress, Tag } from 'antd';
+
+const data = [
+  '语雀的天空',
+  'Ant Design',
+  '蚂蚁金服体验科技',
+  'TechUI',
+  'TechUI 2.0',
+  'Bigfish',
+  'Umi',
+].map((item) => ({
+  title: item,
+  subTitle: <Tag color='#5BD8A6'>语雀专栏</Tag>,
+  actions: [<EllipsisOutlined />],
+  avatar:
+    'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',
+  content: (
+    <div
+      style={{
+        flex: 1,
+        display: 'flex',
+        justifyContent: 'flex-end',
+      }}
+    >
+      <div
+        style={{
+          width: 200,
+        }}
+      >
+        <div>发布中</div>
+        <Progress percent={80} />
+      </div>
+    </div>
+  ),
+}));
+
+const LogsPage: FC = () => {
+  return (
+    <ProList<any>
+      pagination={{
+        defaultPageSize: 5,
+        showSizeChanger: true,
+      }}
+      metas={{
+        title: {},
+        subTitle: {},
+        type: {},
+        avatar: {},
+        content: {},
+        actions: {},
+      }}
+      headerTitle='翻页'
+      dataSource={data}
+    />
+  );
+};
+
+export default LogsPage;

tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "./src/.umi/tsconfig.json"
+  "extends": "./src/.umi/tsconfig.json",
 }