增加登陆用户

src/stores/Auth.js

@@ -6,6 +6,8 @@ class Auth {
     makeAutoObservable(this, { rootStore: false });
     this.root = root;
   }
+
+  loginUser = 'LiaoYijun(IT)';
 }
 
 export default Auth;

src/views/App.jsx

@@ -1,14 +1,13 @@
-import { Outlet, Link, useNavigation, useLocation } from "react-router-dom";
+import { Outlet, Link, useHref, useLocation } from "react-router-dom";
 import { useEffect } from 'react';
-import { Breadcrumb, Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col } from 'antd';
+import { Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col } from 'antd';
 import {
-  UserOutlined,
-  VideoCameraOutlined,
   DownOutlined
 } from '@ant-design/icons';
 import 'antd/dist/reset.css';
+import { useStore } from '../stores/StoreContext.js';
 
-const { Header, Content, Footer, Sider } = Layout;
+const { Header, Content, Footer } = Layout;
 const items = [
   {
     label: (
@@ -39,14 +38,21 @@ const items = [
   },
 ]
 export default function App() {
+  
+  const { authStore } = useStore();
+
+  const href = useHref();
+
   let location = useLocation();
   useEffect(() => {
     // Check location
     console.info('location.pathname: ' + location.pathname)
   }, [location]);
+
   const {
     token: { colorBgContainer },
   } = theme.useToken();
+
   return (
     <ConfigProvider
       theme={{
@@ -64,11 +70,11 @@ export default function App() {
           <Row gutter={{ md: 24 }} justify="end">
             <Col span={22}>
               <div className="logo" />
-              <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} items={
+              <Menu theme="dark" mode="horizontal" defaultSelectedKeys={[href]} items={
                 [
-                  { key: 1, label: <Link to="/reservation/newest">Reservation</Link> },
+                  { key: '/reservation/newest', label: <Link to="/reservation/newest">Reservation</Link> },
-                  { key: 2, label: <Link to="/feedback/list">Feedback</Link> },
+                  { key: '/feedback/list', label: <Link to="/feedback/list">Feedback</Link> },
-                  { key: 3, label: <Link to="/invoice/list">Invoice</Link> }
+                  { key: '/invoice/list', label: <Link to="/invoice/list">Invoice</Link> }
                 ]
               } />
             </Col>
@@ -80,7 +86,7 @@ export default function App() {
               >
                 <a onClick={(e) => e.preventDefault()}>
                   <Space>
-                    LiaoYijun
+                    {authStore.loginUser}
                     <DownOutlined />
                   </Space>
                 </a>