+
+ name1
+ name2
+ name3
+ name4
+ name5
+ name6
+ name7
+ name8
+ name9
+ name10
+ name11
+ name12
+ name13
+ name14
+ name15
+
+
+ phone1
+ phone2
+ phone3
+ phone4
+ phone5
+ phone6
+ phone7
+ phone8
+ phone9
+
+
+ address1
+ address2
+ address3
+ address4
+ address5
+ address6
+ address7
+ address8
+
+
+ birthday
+ birthday
+ birthday
+ birthday
+ birthday
+ birthday
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/task/TaskPage.tsx b/frontend/src/pages/task/TaskPage.tsx
new file mode 100644
index 0000000..e918bee
--- /dev/null
+++ b/frontend/src/pages/task/TaskPage.tsx
@@ -0,0 +1,103 @@
+import { Table } from 'antd';
+import { Layout } from 'antd';
+import useTaskStore from '../../services/taskService';
+import { Task, Status as TaskStatus } from '../../interfaces/task';
+import { TimePipe } from '../../utils/pipe';
+import { Button } from 'antd';
+import HeaderNav from '../../components/HeaderNav';
+import SideNav from '../../components/SideNav';
+import { Status } from './components/TaskStatus';
+import { makeStyles } from '@mui/styles';
+import { useState } from 'react';
+import { TaskCreate } from './components/TaskCreate';
+
+const { Content } = Layout;
+
+const useStyle = makeStyles({
+ layout: {
+ minHeight: '100vh', // 设置布局的最小高度为视口高度
+ },
+ container: {
+ padding: 0,
+ margin: 0,
+ top: 0,
+ display: 'flex',
+ flex: 1,
+ width: '100%',
+ flexDirection: 'column', // 垂直方向布局
+ },
+ new_task: {
+ padding: 10,
+ margin: 10,
+ display: 'flex',
+ flexDirection: 'row', // 水平方向布局
+ },
+})
+
+const columns = [
+ {
+ title: '标题',
+ dataIndex: 'title',
+ key: 'title',
+ },
+ {
+ title: '描述',
+ dataIndex: 'description',
+ key: 'description',
+ },
+ {
+ title: '创建日期',
+ dataIndex: 'created_at',
+ key: 'created_at',
+ render: (v: number) => {
+ return