chore: update style

Author: xiejay97

packages/platform/src/app/App.tsx

@@ -14,6 +14,8 @@ import { STORAGE_KEY } from '../config/storage';
 import { AppRoutes } from './Routes';
 import { useHttp, useInit } from './hooks';
 
+export type AppTheme = 'light' | 'dark';
+
 export function App() {
   const { i18n } = useTranslation();
   const createHttp = useHttp();
@@ -22,6 +24,7 @@ export function App() {
   const async = useAsync();
   const [language] = useLocalStorage<DLang>(...STORAGE_KEY.language);
   const [loading, setLoading] = useState(true);
+  const [theme] = useLocalStorage<AppTheme>(...STORAGE_KEY.theme);
 
   useMount(() => {
     i18n.changeLanguage(language);
@@ -56,6 +59,17 @@ export function App() {
     }
   }, [async, loading]);
 
+  useEffect(() => {
+    for (const t of ['light', 'dark']) {
+      document.body.classList.toggle(t, theme === t);
+    }
+    const colorScheme = document.documentElement.style.colorScheme;
+    document.documentElement.style.colorScheme = theme;
+    return () => {
+      document.documentElement.style.colorScheme = colorScheme;
+    };
+  }, [theme]);
+
   const rootContext = useMemo<DConfigContextData>(
     () => ({
       i18n: { lang: language },

packages/platform/src/app/Routes.tsx

@@ -5,6 +5,7 @@ import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { matchRoutes, Navigate, renderMatches, useLocation } from 'react-router-dom';
 
+import { ROUTES_ACL } from '../config/acl';
 import { LOGIN_PATH, TITLE_CONFIG } from '../config/other';
 import { useACLGuard, useTokenGuard } from './Routes.guard';
 import AppExceptionRoute from './routes/Exception';
@@ -82,7 +83,7 @@ export function AppRoutes() {
                 ),
                 data: {
                   title: 'AMap',
-                  acl: 'page_amap',
+                  acl: ROUTES_ACL.dashboard.amap,
                   canActivate: [ACLGuard],
                 },
               },
@@ -95,7 +96,7 @@ export function AppRoutes() {
                 ),
                 data: {
                   title: 'ECharts',
-                  acl: 'page_echarts',
+                  acl: ROUTES_ACL.dashboard.echarts,
                   canActivate: [ACLGuard],
                 },
               },

packages/platform/src/app/hooks/index.ts

@@ -2,5 +2,3 @@ export { useHttp } from './useHttp';
 export { useACL } from './useACL';
 export { useDeviceQuery } from './useDeviceQuery';
 export { useInit } from './useInit';
-export { useMenu } from './useMenu';
-export { usePrevRoute } from './usePrevRoute';

…latform/src/app/hooks/useHttp/useHttp.ts …ckages/platform/src/app/hooks/useHttp.tspackages/platform/src/app/hooks/useHttp/useHttp.ts renamed to packages/platform/src/app/hooks/useHttp.ts packages/platform/src/app/hooks/useHttp/useHttp.ts renamed to packages/platform/src/app/hooks/useHttp.ts

@@ -9,9 +9,9 @@ import { Subject, takeUntil } from 'rxjs';
 
 import { useUnmount } from '@react-devui/hooks';
 
-import { TOKEN } from '../../../config/token';
-import { environment } from '../../../environments';
-import './mock';
+import '../../config/mock';
+import { TOKEN } from '../../config/token';
+import { environment } from '../../environments';
 
 export function useHttp() {
   const abortFns = useRef(new Set<() => void>());

packages/platform/src/app/hooks/useHttp/index.ts

@@ -1,7 +1,15 @@
+import type { MenuItem } from '../../config/menu';
+import type { PREV_ROUTE_KEY } from '../../config/other';
 import type { NotificationItem, UserState } from '../../config/state';
+import type { DMenuItem } from '@react-devui/ui/components/menu';
 
-import { isNull } from 'lodash';
+import { isNull, isObject, isUndefined } from 'lodash';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 
+import { MENU } from '../../config/menu';
+import { useMenuState } from '../../config/state';
 import { useNotificationState } from '../../config/state';
 import { useUserState } from '../../config/state';
 import { TOKEN, TOKEN_REFRESH, TOKEN_REFRESH_OFFSET } from '../../config/token';
@@ -11,10 +19,16 @@ import { useHttp } from './useHttp';
 let CLEAR_TOKEN_REFRESH: (() => void) | undefined;
 
 export function useInit() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = (location.state as null | { [PREV_ROUTE_KEY]?: Location })?.from?.pathname;
   const createHttp = useHttp();
+  const acl = useACL();
+
   const [, setUser] = useUserState();
+  const [, setMenu] = useMenuState();
   const [, setNotification] = useNotificationState();
-  const acl = useACL();
 
   const refreshToken = () => {
     CLEAR_TOKEN_REFRESH?.();
@@ -49,6 +63,65 @@ export function useInit() {
     acl.setFull(user.role === 'admin');
     acl.set([]);
     //#endregion
+
+    //#region Menu
+    const allItem: { id: string; parentSub: string[] }[] = [];
+    const reduceMenu = (arr: MenuItem[], parentSub: string[] = []): DMenuItem<string>[] => {
+      const newArr: DMenuItem<string>[] = [];
+      for (const item of arr) {
+        if (item.acl) {
+          const params =
+            isObject(item.acl) && 'control' in item.acl
+              ? item.acl
+              : {
+                  control: item.acl,
+                };
+          if (!acl.can(params.control, params.mode)) {
+            continue;
+          }
+        }
+
+        const title = item.title ?? t(item.titleI18n!);
+        const obj: DMenuItem<string> = {
+          id: item.path,
+          title:
+            item.type === 'item'
+              ? React.createElement(Link, { className: 'app-layout-sidebar__link', tabIndex: -1, to: item.path }, title)
+              : title,
+          icon: item.icon ? React.createElement(item.icon) : undefined,
+          type: item.type,
+        };
+
+        if (item.children) {
+          obj.children = reduceMenu(item.children, parentSub.concat(item.type === 'sub' ? [item.path] : []));
+          if (obj.children.length > 0) {
+            newArr.push(obj);
+          }
+        } else {
+          newArr.push(obj);
+          allItem.push({ id: item.path, parentSub });
+        }
+      }
+      return newArr;
+    };
+
+    const menu = reduceMenu(MENU);
+    const toFirstItem = () => {
+      setMenu({ menu, expands: allItem[0].parentSub });
+      navigate(allItem[0].id, { replace: true });
+    };
+    if (isUndefined(from)) {
+      toFirstItem();
+    } else {
+      const findIndex = allItem.findIndex((item) => item.id === from);
+      if (findIndex === -1) {
+        toFirstItem();
+      } else {
+        setMenu({ menu, expands: allItem[findIndex].parentSub });
+        navigate(from, { replace: true });
+      }
+    }
+    //#endregion
   };
 
   const getNotification = () => {

packages/platform/src/app/hooks/useInit.ts

@@ -2,7 +2,6 @@ import type { UserState } from '../../config/state';
 
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 
 import { useAsync } from '@react-devui/hooks';
 import { LockOutlined, MobileOutlined, UserOutlined } from '@react-devui/icons';
@@ -11,15 +10,13 @@ import { getClassName } from '@react-devui/utils';
 
 import { TOKEN } from '../../config/token';
 import { AppLanguage } from '../components';
-import { useDeviceQuery, useHttp, useInit, usePrevRoute } from '../hooks';
+import { useDeviceQuery, useHttp, useInit } from '../hooks';
 
 export default function Login(): JSX.Element | null {
   const { t } = useTranslation();
   const createHttp = useHttp();
   const [loginloading, setLoginLoading] = useState(false);
   const init = useInit();
-  const navigate = useNavigate();
-  const from = usePrevRoute();
   const async = useAsync();
   const deviceMatched = useDeviceQuery();
 
@@ -37,7 +34,7 @@ export default function Login(): JSX.Element | null {
   const [accountForm, updateAccountForm] = useForm(
     () =>
       new FormGroup({
-        username: new FormControl('', [
+        username: new FormControl('admin', [
           Validators.required,
           (control) => {
             return !control.value || control.value === 'admin' ? null : { checkValue: true };
@@ -79,7 +76,6 @@ export default function Login(): JSX.Element | null {
                 setLoginLoading(false);
                 TOKEN.token = res.token;
                 init(res.user);
-                navigate(from, { replace: true });
               },
             });
           }}

packages/platform/src/app/hooks/useMenu.ts

@@ -1,6 +1,10 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
 import { DDrawer, DMenu } from '@react-devui/ui';
 
-import { useDeviceQuery, useMenu } from '../../hooks';
+import { useMenuState } from '../../../config/state';
+import { useDeviceQuery } from '../../hooks';
 
 export interface AppSidebarProps {
   menuOpen: boolean;
@@ -12,15 +16,27 @@ export function AppSidebar(props: AppSidebarProps): JSX.Element | null {
 
   const deviceMatched = useDeviceQuery();
 
-  const menu = useMenu();
+  const [{ menu, expands }, setMenu] = useMenuState();
+  const location = useLocation();
+  const menuNode = (
+    <DMenu
+      className="app-layout-sidebar__menu"
+      dList={menu}
+      dActive={location.pathname}
+      dExpands={expands}
+      onExpandsChange={(ids) => {
+        setMenu((draft) => {
+          draft.expands = ids;
+        });
+      }}
+    ></DMenu>
+  );
 
   return deviceMatched === 'phone' ? (
     <DDrawer className="app-layout-sidebar__drawer" dVisible={menuOpen} dWidth={200} dPlacement="left" onVisibleChange={onMenuOpenChange}>
-      <DMenu className="app-layout-sidebar__menu" dList={menu}></DMenu>
+      {menuNode}
     </DDrawer>
   ) : (
-    <div className="app-layout-sidebar">
-      <DMenu className="app-layout-sidebar__menu" dList={menu} dMode={menuOpen ? 'vertical' : 'icon'}></DMenu>
-    </div>
+    <div className="app-layout-sidebar">{React.cloneElement(menuNode, { dMode: menuOpen ? 'vertical' : 'icon' })}</div>
   );
 }