f

src/layouts/AuthLayout/components/Menus.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { Menu } from 'antd';
+import React from 'react'
+import { Menu } from 'antd'
 
-const menuStyle = { height: '100%' };
+const menuStyle = { height: '100%' }
 
 export default (props) => {
-  const { theme, items, location } = props;
+  const { theme, items, location } = props
 
   // const selectedKeys = React.useMemo(() => {
   //   const parts = location.pathname.split('/').filter(Boolean);
@@ -18,12 +18,12 @@ export default (props) => {
   //   return keys;
   // }, [location.pathname]);
 
-  const selectedKeys = [location.pathname];
+  const selectedKeys = [location.pathname]
   return (
     <Menu
       mode="inline"
       style={menuStyle}
-      theme={theme}
+      theme="light"
       items={items}
       selectedKeys={selectedKeys}
     />

src/layouts/AuthLayout/components/SiderBar.jsx

@@ -1,21 +1,20 @@
-import React, { useMemo } from 'react';
-import { Layout, Spin } from 'antd';
-import { getPropertyValue } from '@/utils/css';
-import Menus from './Menus';
-
-const { Sider } = Layout;
+import React, { useMemo } from 'react'
+import { Layout, Spin } from 'antd'
+import { getPropertyValue } from '@/utils/css'
+import Menus from './Menus'
 
+const { Sider } = Layout
 
 export default (props) => {
-  const { theme, location, menus } = props;
+  const { theme, location, menus } = props
 
   const width = useMemo(() => {
-    return /\d+/.exec(getPropertyValue('--siderbar-width'))[0] - 0;
-  }, []);
+    return /\d+/.exec(getPropertyValue('--siderbar-width'))[0] - 0
+  }, [])
 
   return (
-    <Sider className='layout-sidebar' theme={theme} collapsible width={width}>
-      <Menus theme={theme} items={menus} location={location} />
+    <Sider className="layout-sidebar" theme="light" collapsible width={width}>
+      <Menus items={menus} location={location} />
     </Sider>
-  );
+  )
 }

src/layouts/AuthLayout/index.jsx

@@ -1,36 +1,36 @@
-import React from "react";
-import { Spin, Layout } from "antd";
-import HtmlTitle from "./components/HtmlTitle";
+import React from 'react'
+import { Spin, Layout } from 'antd'
+import HtmlTitle from './components/HtmlTitle'
 // import Main from './Main';
-import { useLocation, useNavigate } from "react-router-dom";
-import { useModel } from "@/store";
+import { useLocation, useNavigate } from 'react-router-dom'
+import { useModel } from '@/store'
 
-import SiderBar from "./components/SiderBar";
-import Header from "./components/Header";
-import Container from "./components/Container";
-import { authRoutes } from "@/routes/routes";
-import { getMenuItems } from "@/routes/menus";
-import RequireLogin from "./RequireLogin";
-import "./style.less";
+import SiderBar from './components/SiderBar'
+import Header from './components/Header'
+import Container from './components/Container'
+import { authRoutes } from '@/routes/routes'
+import { getMenuItems } from '@/routes/menus'
+import RequireLogin from './RequireLogin'
+import './style.less'
 
 const Spinner = () => (
   <div
     style={{
-      width: "100%",
-      height: "100%",
-      display: "grid",
-      placeItems: "center",
+      width: '100%',
+      height: '100%',
+      display: 'grid',
+      placeItems: 'center',
     }}
   >
     <Spin />
   </div>
-);
+)
 
 export default (props) => {
-  const { theme } = useModel("system");
-  const { user, menus } = useModel("user");
-  const navigate = useNavigate();
-  const location = useLocation();
+  const { theme } = useModel('system')
+  const { user, menus } = useModel('user')
+  const navigate = useNavigate()
+  const location = useLocation()
   // const menus = getMenuItems(authRoutes);
   // const RequireLogin = React.lazy(() => {
   //   return withLogin(import("./Main"));
@@ -42,15 +42,15 @@ export default (props) => {
       <HtmlTitle />
       {/* <React.Suspense fallback={<Spinner />}> */}
       <RequireLogin>
-        <Layout className={theme} style={{ height: "100vh" }}>
+        <Layout className={theme} style={{ height: '100vh' }}>
           <Header theme={theme} user={user} />
-          <Layout style={{ height: "calc(100vh - var(--header-height))" }}>
-            <SiderBar theme={theme} menus={menus} location={location} />
+          <Layout style={{ height: 'calc(100vh - var(--header-height))' }}>
+            <SiderBar menus={menus} location={location} />
             <Container location={location} />
           </Layout>
         </Layout>
       </RequireLogin>
       {/* </React.Suspense> */}
     </Spin>
-  );
-};
+  )
+}

src/store/models/system.js

@@ -2,7 +2,7 @@ import { useState, useCallback } from "react";
 
 export default function useSystem () {
   // 主题
-  const [theme, updateTheme] = useState('light');
+  const [theme, updateTheme] = useState('dark');
 
   // 其他配置
   const [app, setApp] = useState({