From 3b9c4d47806cc596cd2dc5da9a826bd6f1ee72a1 Mon Sep 17 00:00:00 2001
From: Allen Zhang <37892968+zhangtao25@users.noreply.github.com>
Date: Sun, 10 Sep 2023 17:59:03 +0800
Subject: [PATCH] feat: update

---
 .env.example                                |  2 +
 packages/app-ui/src/layouts/CustomSider.tsx | 24 ++++---
 packages/app-ui/src/layouts/MainBox.tsx     | 77 ++++++++++++++++-----
 packages/app-ui/src/pages/settings.tsx      |  5 ++
 4 files changed, 83 insertions(+), 25 deletions(-)
 create mode 100644 packages/app-ui/src/pages/settings.tsx

diff --git a/.env.example b/.env.example
index ef4767fd..a510e811 100755
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,5 @@
+#-----------------------System Config------------------------------#
+SYSTEM_MODE=["coverage"]
 #-----------------------Backend Config------------------------------#
 # Prisma Config
 DATABASE_URL=postgresql://root:123456@127.0.0.1:5432/canyon
diff --git a/packages/app-ui/src/layouts/CustomSider.tsx b/packages/app-ui/src/layouts/CustomSider.tsx
index 2ab44ab9..c3a03e7a 100644
--- a/packages/app-ui/src/layouts/CustomSider.tsx
+++ b/packages/app-ui/src/layouts/CustomSider.tsx
@@ -12,10 +12,16 @@ interface CustomSiderProps {
   activeMenu: string[];
   routerConfig: RouteConfig[];
 }
+function getModes() {
+  try {
+    return JSON.parse(localStorage.getItem('SYSTEM_MODE') || '[]');
+  } catch (e) {
+    return [];
+  }
+}
 const CustomSider: FC<CustomSiderProps> = ({ activeMenu, routerConfig }) => {
   const nav = useNavigate();
   const [collapsed, setCollapsed] = useState(false);
-
   return (
     <Sider
       collapsible
@@ -70,13 +76,15 @@ const CustomSider: FC<CustomSiderProps> = ({ activeMenu, routerConfig }) => {
         onClick={(e) => {
           nav(`${e.key}`);
         }}
-        items={routerConfig.map((i) => {
-          return {
-            label: i.menuName,
-            key: i.name,
-            icon: <Icon component={i.menuIcon} />,
-          };
-        })}
+        items={routerConfig
+          .filter((i) => getModes().includes(i.name))
+          .map((i) => {
+            return {
+              label: i.menuName,
+              key: i.name,
+              icon: <Icon component={i.menuIcon} />,
+            };
+          })}
         css={css`
           border-inline-end: none !important;
           display: ${activeMenu[2] ? 'none' : 'block'};
diff --git a/packages/app-ui/src/layouts/MainBox.tsx b/packages/app-ui/src/layouts/MainBox.tsx
index dce8a3f8..1a96d726 100644
--- a/packages/app-ui/src/layouts/MainBox.tsx
+++ b/packages/app-ui/src/layouts/MainBox.tsx
@@ -1,6 +1,8 @@
-import Icon, { QuestionCircleOutlined } from '@ant-design/icons';
+import Icon, { LogoutOutlined, QuestionCircleOutlined, SettingOutlined } from '@ant-design/icons';
 import { css } from '@emotion/react';
-import { Avatar, Breadcrumb, Layout, Space } from 'antd';
+import { useRequest } from 'ahooks';
+import { Avatar, Breadcrumb, Dropdown, Layout, MenuProps, Space } from 'antd';
+import axios from 'axios';
 import { match } from 'path-to-regexp';
 import { FC, ReactNode, Suspense, useEffect, useState } from 'react';
 import { useLocation, useNavigate, useRoutes } from 'react-router-dom';
@@ -13,7 +15,24 @@ import { routerConfig } from '../router.tsx';
 import CustomSider from './CustomSider.tsx';
 
 const { Header, Content } = Layout;
-
+const items: MenuProps['items'] = [
+  {
+    key: 'settings',
+    label: <a>个人设置</a>,
+    icon: <SettingOutlined />,
+  },
+  {
+    key: '3',
+    type: 'divider',
+    // label: '退出登录',
+    // icon:<LogoutOutlined/>
+  },
+  {
+    key: 'logout',
+    label: '退出登录',
+    icon: <LogoutOutlined />,
+  },
+];
 const HoverEffect: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <div
@@ -33,6 +52,14 @@ const HoverEffect: FC<{ children: ReactNode }> = ({ children }) => {
 };
 
 const MainBox = () => {
+  useRequest(() => axios.get<{ SYSTEM_MODE: string }>('/api/base').then((res) => res.data), {
+    onSuccess(res) {
+      if (res) {
+        localStorage.setItem('SYSTEM_MODE', res.SYSTEM_MODE);
+      }
+    },
+  });
+
   const nav = useNavigate();
   const loc = useLocation();
   const [activeMenu, setActiveMenu] = useState(['', '', '', '', '']);
@@ -43,9 +70,18 @@ const MainBox = () => {
     const { t0, t1, t2, t3, t4, t5 } = urlMatch(loc.pathname).params;
     setActiveMenu([t0, t1, t2, t3, t4, t5]);
   }, [loc]);
+  function onClick(e: any) {
+    if (e.key === 'settings') {
+      nav(`/settings`);
+    }
+    if (e.key === 'logout') {
+      localStorage.clear();
+      nav(`/welcome`);
+    }
+  }
   return (
     <div>
-      {!(loc.pathname.includes('welcome')||loc.pathname.includes('login')) ? (
+      {!(loc.pathname.includes('welcome') || loc.pathname.includes('login')) ? (
         <>
           <Layout>
             <Header
@@ -105,19 +141,25 @@ const MainBox = () => {
                     />
                   </HoverEffect>
 
-                  <HoverEffect>
-                    <Avatar
-                      size={'small'}
-                      src={'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'}
-                    />
-                    <span
-                      css={css`
-                        margin-left: 6px;
-                      `}
-                    >
-                      Allen Zhang
-                    </span>
-                  </HoverEffect>
+                  <Dropdown menu={{ items, onClick }}>
+                    <div>
+                      <HoverEffect>
+                        <Avatar
+                          size={'small'}
+                          src={
+                            'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
+                          }
+                        />
+                        <span
+                          css={css`
+                            margin-left: 6px;
+                          `}
+                        >
+                          Allen Zhang
+                        </span>
+                      </HoverEffect>
+                    </div>
+                  </Dropdown>
                 </Space>
               </div>
             </Header>
@@ -136,6 +178,7 @@ const MainBox = () => {
                   background-color: rgb(240, 242, 245);
                 `}
               >
+                {/*{JSON.stringify(data.SYSTEM_MODE)}*/}
                 <Breadcrumb
                   style={{ margin: '16px 0' }}
                   items={activeMenu
diff --git a/packages/app-ui/src/pages/settings.tsx b/packages/app-ui/src/pages/settings.tsx
new file mode 100644
index 00000000..dce0ded3
--- /dev/null
+++ b/packages/app-ui/src/pages/settings.tsx
@@ -0,0 +1,5 @@
+const Settings = () => {
+  return <div>{localStorage.getItem('token')}</div>;
+};
+
+export default Settings;