分类整理代码，增加登陆、登出页面

src/main.jsx

@@ -7,11 +7,13 @@ import {
 } from "react-router-dom";
 import RootStore from "./stores/Root";
 import { StoreContext } from './stores/StoreContext';
-import "./global.css";
+import "./assets/global.css";
 import App from "./views/App";
+import Login from "./views/Login";
+import SignOut from "./views/SignOut";
 import Index from "./views/index";
-import ErrorPage from "./error-page";
-import Plan from "./views/Plan";
+import ErrorPage from "./views/error-page";
+import PlanNewest from "./views/plan/Newest";
 
 configure({ 
   useProxies: "ifavailable",
@@ -30,8 +32,23 @@ const router = createBrowserRouter([
     children: [
       { index: true, element: <Index /> },
       {
-        path: "plan/:planId",
-        element: <Plan />,
+        path: "plan/newest",
+        element: <PlanNewest />,
+      }
+    ],    
+    // path: "/test-404",
+    // element: <Login />,
+  },
+  {
+    element: <App />,
+    children: [
+      {
+        path: "/login",
+        element: <Login />,
+      },
+      {
+        path: "/sign-out",
+        element: <SignOut />,
       }
     ]
   }

src/views/App.jsx

@@ -62,7 +62,7 @@ export default function App() {
 
               <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={
                 [
-                  { key: 1, label: <Link to="/plan/recent">Plan</Link> },
+                  { key: 1, label: <Link to="/plan/newest">Plan</Link> },
                   { key: 2, label: <Link to="/invoice/list">Invoice</Link> },
                   { key: 3, label: <Link to="/feedback/list">Feedback</Link> }
                 ]

src/views/Index.jsx

@@ -1,11 +1,11 @@
 export default function Index() {
   return (
     <p id="zero-state">
-      This is a demo for React Router.
+      Global Highlights Hub
       <br />
       Check out{" "}
-      <a href="https://reactrouter.com">
-        the docs at reactrouter.com
+      <a href="https://www.chinahighlights.com">
+        the docs at chinahighlights.com
       </a>
       .
     </p>

src/views/Login.jsx

@@ -0,0 +1,109 @@
+import { Button, Checkbox, Form, Input, Row, Typography, Layout } from 'antd';
+const { Header, Footer, Sider, Content } = Layout;
+const { Title } = Typography;
+const headerStyle = {
+  textAlign: 'center',
+  // color: '#fff',
+  height: 64,
+  paddingInline: 50,
+  lineHeight: '64px',
+  backgroundColor: '#f5f5f5',
+};
+const contentStyle = {
+  textAlign: 'center',
+  minHeight: 600,
+  lineHeight: '120px',
+  // color: '#fff',
+  // backgroundColor: '#108ee9',
+};
+const footerStyle = {
+  textAlign: 'center',
+  // color: '#fff',
+  // backgroundColor: '#7dbcea',
+};
+const onFinish = (values) => {
+  console.log('Success:', values);
+};
+const onFinishFailed = (errorInfo) => {
+  console.log('Failed:', errorInfo);
+};
+const Login = () => (
+  <Layout>
+    <Header style={headerStyle}>      
+      <Title>Global Highlights Hub</Title>
+    </Header>
+    <Content style={contentStyle}>
+      <Row justify="center" align="middle" style={{minHeight: 600}}>
+          <Form
+            name="basic"
+            labelCol={{
+              span: 8,
+            }}
+            wrapperCol={{
+              span: 16,
+            }}
+            style={{
+              maxWidth: 600,
+            }}
+            initialValues={{
+              remember: true,
+            }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="Username"
+              name="username"
+              rules={[
+                {
+                  required: true,
+                  message: 'Please input your username!',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+
+            <Form.Item
+              label="Password"
+              name="password"
+              rules={[
+                {
+                  required: true,
+                  message: 'Please input your password!',
+                },
+              ]}
+            >
+              <Input.Password />
+            </Form.Item>
+
+            <Form.Item
+              name="remember"
+              valuePropName="checked"
+              wrapperCol={{
+                offset: 8,
+                span: 16,
+              }}
+            >
+              <Checkbox>Remember me</Checkbox>
+            </Form.Item>
+
+            <Form.Item
+              wrapperCol={{
+                offset: 8,
+                span: 16,
+              }}
+            >
+              <Button type="primary" htmlType="submit">
+                Submit
+              </Button>
+            </Form.Item>
+          </Form>
+      </Row>
+    </Content>
+    <Footer style={footerStyle}>Footer</Footer>
+  </Layout>
+
+);
+export default Login;

src/views/SignOut.jsx

@@ -0,0 +1,42 @@
+import { Button, Checkbox, Form, Input, Row, Typography, Layout } from 'antd';
+const { Header, Footer, Sider, Content } = Layout;
+const { Title } = Typography;
+const headerStyle = {
+  textAlign: 'center',
+  // color: '#fff',
+  height: 64,
+  paddingInline: 50,
+  lineHeight: '64px',
+  backgroundColor: '#f5f5f5',
+};
+const contentStyle = {
+  textAlign: 'center',
+  minHeight: 600,
+  lineHeight: '120px',
+  // color: '#fff',
+  // backgroundColor: '#108ee9',
+};
+const footerStyle = {
+  textAlign: 'center',
+  // color: '#fff',
+  // backgroundColor: '#7dbcea',
+};
+const onFinish = (values) => {
+  console.log('Success:', values);
+};
+const onFinishFailed = (errorInfo) => {
+  console.log('Failed:', errorInfo);
+};
+const SignOut = () => (
+  <Layout>
+    <Header style={headerStyle}>      
+      <Title>Global Highlights Hub</Title>
+    </Header>
+    <Content style={contentStyle}>
+      See you.
+    </Content>
+    <Footer style={footerStyle}>Footer</Footer>
+  </Layout>
+
+);
+export default SignOut;

src/views/plan/Newest.jsx

@@ -4,7 +4,7 @@ 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';
+import { useStore } from '../../stores/StoreContext.js';
 
 const { Title } = Typography;
 
@@ -57,23 +57,19 @@ const planListColumns = [
   },
 ];
 
-function Plan() {
+function Newest() {
 
-  const { planId } = useParams();
   const { plan } = useStore();
   const { planList } = plan;
 
   useEffect(() => {
-    console.info('planId: ' + planId);
-  }, [planId]);
+    console.info('Newest.useEffect');
+  }, []);
 
   return (
     <Space direction="vertical" style={{ width: '100%' }}>
       <Title level={3}>Newest Plans</Title>
       <Row gutter={{ md: 24 }} justify="end">
-        <Col span={4}>
-          Parameter: {planId}
-        </Col>
         <Col span={6}>
         <Space direction="horizontal" style={{ width: '100%' }}>
         Group Date: 
@@ -95,4 +91,4 @@ function Plan() {
   );
 }
 
-export default observer(Plan);
+export default observer(Newest);