feat: 优化界面显示

web/src/components/SiderBar.js

@@ -17,7 +17,7 @@ import {
   IconCalendarClock, IconChecklistStroked,
   IconComment,
   IconCreditCard,
-  IconGift,
+  IconGift, IconHelpCircle,
   IconHistogram,
   IconHome,
   IconImage,
@@ -25,10 +25,12 @@ import {
   IconLayers,
   IconPriceTag,
   IconSetting,
-  IconUser,
+  IconUser
 } from '@douyinfe/semi-icons';
-import { Layout, Nav } from '@douyinfe/semi-ui';
+import { Avatar, Dropdown, Layout, Nav, Switch } from '@douyinfe/semi-ui';
 import { setStatusData } from '../helpers/data.js';
+import { stringToColor } from '../helpers/render.js';
+import { useSetTheme, useTheme } from '../context/Theme/index.js';
 
 // HeaderBar Buttons
 
@@ -43,6 +45,8 @@ const SiderBar = () => {
   const systemName = getSystemName();
   const logo = getLogo();
   const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed);
+  const theme = useTheme();
+  const setTheme = useSetTheme();
 
   const routerMap = {
     home: '/',
@@ -63,11 +67,17 @@ const SiderBar = () => {
 
   const headerButtons = useMemo(
     () => [
+      // {
+      //   text: '首页',
+      //   itemKey: 'home',
+      //   to: '/',
+      //   icon: <IconHome />,
+      // },
       {
-        text: '首页',
-        itemKey: 'home',
-        to: '/',
-        icon: <IconHome />,
+        text: '模型价格',
+        itemKey: 'pricing',
+        to: '/pricing',
+        icon: <IconPriceTag />,
       },
       {
         text: '渠道',
@@ -104,12 +114,6 @@ const SiderBar = () => {
         to: '/topup',
         icon: <IconCreditCard />,
       },
-      {
-        text: '模型价格',
-        itemKey: 'pricing',
-        to: '/pricing',
-        icon: <IconPriceTag />,
-      },
       {
         text: '用户管理',
         itemKey: 'user',
@@ -205,48 +209,58 @@ const SiderBar = () => {
 
   return (
     <>
-      <Layout>
-        <div style={{ height: '100%' }}>
-          <Nav
-            // bodyStyle={{ maxWidth: 200 }}
-            style={{ maxWidth: 200 }}
-            defaultIsCollapsed={
-              isMobile() ||
-              localStorage.getItem('default_collapse_sidebar') === 'true'
-            }
-            isCollapsed={isCollapsed}
-            onCollapseChange={(collapsed) => {
-              setIsCollapsed(collapsed);
-            }}
-            selectedKeys={selectedKeys}
-            renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
-              return (
-                <Link
-                  style={{ textDecoration: 'none' }}
-                  to={routerMap[props.itemKey]}
-                >
-                  {itemElement}
-                </Link>
-              );
-            }}
-            items={headerButtons}
-            onSelect={(key) => {
-              setSelectedKeys([key.itemKey]);
-            }}
-            header={{
-              logo: (
-                <img src={logo} alt='logo' style={{ marginRight: '0.75em' }} />
-              ),
-              text: systemName,
-            }}
-            // footer={{
-            //   text: '© 2021 NekoAPI',
-            // }}
-          >
-            <Nav.Footer collapseButton={true}></Nav.Footer>
-          </Nav>
-        </div>
-      </Layout>
+      <Nav
+        style={{ maxWidth: 220, height: '100%' }}
+        defaultIsCollapsed={
+          isMobile() ||
+          localStorage.getItem('default_collapse_sidebar') === 'true'
+        }
+        isCollapsed={isCollapsed}
+        onCollapseChange={(collapsed) => {
+          setIsCollapsed(collapsed);
+        }}
+        selectedKeys={selectedKeys}
+        renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
+          return (
+            <Link
+              style={{ textDecoration: 'none' }}
+              to={routerMap[props.itemKey]}
+            >
+              {itemElement}
+            </Link>
+          );
+        }}
+        items={headerButtons}
+        onSelect={(key) => {
+          setSelectedKeys([key.itemKey]);
+        }}
+        // header={{
+        //   logo: (
+        //     <img src={logo} alt='logo' style={{ marginRight: '0.75em' }} />
+        //   ),
+        //   text: systemName,
+        // }}
+        // footer={{
+        //   text: '© 2021 NekoAPI',
+        // }}
+        footer={
+          <>
+            {isMobile() && (
+              <Switch
+                checkedText='🌞'
+                size={'small'}
+                checked={theme === 'dark'}
+                uncheckedText='🌙'
+                onChange={(checked) => {
+                  setTheme(checked);
+                }}
+              />
+            )}
+          </>
+        }
+      >
+        <Nav.Footer collapseButton={true}></Nav.Footer>
+      </Nav>
     </>
   );
 };