增加计划详细页

src/main.jsx

@@ -14,6 +14,7 @@ import SignOut from "./views/SignOut";
 import Index from "./views/index";
 import ErrorPage from "./views/error-page";
 import PlanNewest from "./views/plan/Newest";
+import PlanDetail from "./views/plan/Detail";
 
 configure({ 
   useProxies: "ifavailable",
@@ -31,25 +32,15 @@ const router = createBrowserRouter([
     errorElement: <ErrorPage />,
     children: [
       { index: true, element: <Index /> },
-      {
+      { path: "plan/newest", element: <PlanNewest />},
-        path: "plan/newest",
+      { path: "plan/:planId", element: <PlanDetail />}
-        element: <PlanNewest />,
+    ]
-      }
-    ],    
-    // path: "/test-404",
-    // element: <Login />,
   },
   {
     element: <App />,
     children: [
-      {
+      { path: "/login", element: <Login /> },
-        path: "/login",
+      { path: "/sign-out", element: <SignOut /> }
-        element: <Login />,
-      },
-      {
-        path: "/sign-out",
-        element: <SignOut />,
-      }
     ]
   }
 ]);

src/views/plan/Detail.jsx

@@ -0,0 +1,94 @@
+import { useParams } from "react-router-dom";
+import { useEffect } from 'react';
+import { observer } from "mobx-react";
+import { toJS } from "mobx";
+import moment from "moment";
+import { Row, Col, Space, Button, Table, Tag, Typography, DatePicker } from 'antd';
+import { useStore } from '../../stores/StoreContext.js';
+
+const { Title } = Typography;
+
+const planListColumns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    render: (text) => <a>{text}</a>,
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+  },
+  {
+    title: 'Tags',
+    key: 'tags',
+    dataIndex: 'tags',
+    render: (_, { tags }) => (
+      <>
+        {tags.map((tag) => {
+          let color = tag.length > 5 ? 'geekblue' : 'green';
+          if (tag === 'loser') {
+            color = 'volcano';
+          }
+          return (
+            <Tag color={color} key={tag}>
+              {tag.toUpperCase()}
+            </Tag>
+          );
+        })}
+      </>
+    ),
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    render: (_, record) => (
+      <Space size="middle">
+        <a>Invite {record.name}</a>
+        <a>Delete</a>
+      </Space>
+    ),
+  },
+];
+
+function Detail() {
+  const { planId } = useParams();
+  const { plan } = useStore();
+  const { planList } = plan;
+
+  useEffect(() => {
+    console.info('Detail.useEffect: ' + planId);
+  }, []);
+
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Title level={3}>Plan Detail</Title>
+      <Row gutter={{ md: 24 }} justify="end">
+        <Col span={6}>
+        <Space direction="horizontal" style={{ width: '100%' }}>
+        Group Date: 
+          <DatePicker.RangePicker
+            allowClear={false}
+          />
+          </Space>
+        </Col>
+        <Col span={12}>
+          <Button type='primary' onClick={() => plan.fetchRecent()}>Search</Button>
+        </Col>
+      </Row>
+      <Row>
+        <Col span={24}>
+          <Table columns={planListColumns} dataSource={toJS(planList)} />
+        </Col>
+      </Row>
+    </Space>
+  );
+}
+
+export default observer(Detail);