refactor: project

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 styles from './index.less';
+import {
+  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}>
-      <ul>
-        <li>
-          <Link to="/">Home</Link>
-        </li>
-        <li>
-          <Link to="/docs">Docs</Link>
-        </li>
-        <li>
-          <a href="https://github.com/umijs/umi">Github</a>
-        </li>
-      </ul>
-      <Outlet />
+    <div
+      id="test-pro-layout"
+      style={{
+        height: '100vh',
+      }}
+    >
+      <ProLayout
+        siderWidth={216}
+        bgLayoutImgList={[
+          {
+            src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
+            left: 85,
+            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;