feat: 实现任务管理静态页面

.umirc.ts

@@ -38,6 +38,11 @@ export default defineConfig({
       path: '/smart/work/:projectId',
       component: './Smart',
     },
+    {
+      name: '任务管理',
+      path: '/task-manage/:projectId',
+      component: './TaskManage',
+    },
     // {
     //   name: '权限演示',
     //   path: '/access',

src/pages/TaskManage/index.less

@@ -0,0 +1,47 @@
+.backgroundImage {
+}
+
+.container {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(20px);
+}
+
+.title {
+  padding: 10px;
+  font-size: 20px;
+  font-weight: 500;
+
+  .delimiter {
+    margin: 0 10px 0 10px;
+    border-left: 5px solid #468ee1;
+  }
+}
+
+.taskList {
+  height: calc(100vh - 50px);
+  overflow-y: scroll;
+  border: none;
+
+  .listItem {
+    margin: 20px 10px;
+    height: 10vh;
+    box-shadow: 0px 0px 6px 3px rgba(0, 150, 255, 0.1);
+
+    .itemCount {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-right: 30px;
+
+      .countNumber {
+        color: #f5a623;
+        font-size: 24px;
+      }
+    }
+  }
+}

src/pages/TaskManage/index.tsx

@@ -0,0 +1,68 @@
+import styles from '@/pages/TaskManage/index.less';
+import { PropTypes } from '@/pages/TaskManage/index.types';
+import { List } from 'antd';
+import React, { useEffect } from 'react';
+
+const TaskManage: React.FC<PropTypes> = (props) => {
+  const { projectID } = props;
+  const project_id = Number(projectID === '' ? '0' : projectID);
+  const arr = [];
+  for (let i = 0; i < 20; i++) {
+    arr.push({
+      title: '任务标题',
+      desc: '任务详情任务详情任务详情任务详情任务详情任务详情任务详情任务详情任务详情',
+    });
+  }
+
+  const goToDetail = (item: number) => {
+    console.log(item);
+  };
+
+  useEffect(() => {
+    const bodyStyle = document.body.style.background;
+    document.body.style.background = 'none';
+    return () => {
+      document.body.style.background = bodyStyle;
+    };
+  }, []);
+
+  const makeList = (item: any, index: number) => {
+    return (
+      <List.Item
+        className={styles.listItem}
+        onClick={() => {
+          goToDetail(item);
+        }}
+      >
+        <List.Item.Meta title={item.title} description={item.desc} />
+        <div className={styles.itemCount}>
+          <div className={styles.countNumber}>10</div>
+          <div>任务数量</div>
+        </div>
+        <div style={{ fontSize: '48px', color: 'gray', fontWeight: '200' }}>
+          {'>'}
+        </div>
+      </List.Item>
+    );
+  };
+
+  return (
+    <div className={styles.backgroundImage}>
+      <div className={styles.container}>
+        <div className={styles.title}>
+          <span className={styles.delimiter}></span>
+          任务管理
+        </div>
+        <List
+          className={styles.taskList}
+          bordered
+          itemLayout="horizontal"
+          dataSource={arr}
+          renderItem={makeList}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TaskManage;

src/pages/TaskManage/index.types.ts

@@ -0,0 +1,3 @@
+export interface PropTypes {
+  projectID: string
+}