From 9d74dce8b1dec592bb07d3f1d2f1db273faac416 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 26 Sep 2023 18:29:34 +0800
Subject: [PATCH 001/307] Add tools menu and submenu

---
 src/assets/css/pages/header.scss              | 33 ++++++++++++++++--
 .../home/index.tsx => pages/Home.tsx}         |  2 +-
 src/pages/MainFramework.tsx                   | 27 ++++++++++++++-
 src/pages/Tools.tsx                           |  7 ++++
 src/pages/tools/Translation.tsx               |  7 ++++
 src/router/index.tsx                          | 34 ++++++++++++++++++-
 6 files changed, 105 insertions(+), 5 deletions(-)
 rename src/{components/home/index.tsx => pages/Home.tsx} (98%)
 create mode 100644 src/pages/Tools.tsx
 create mode 100644 src/pages/tools/Translation.tsx

diff --git a/src/assets/css/pages/header.scss b/src/assets/css/pages/header.scss
index eedd195..98ff714 100644
--- a/src/assets/css/pages/header.scss
+++ b/src/assets/css/pages/header.scss
@@ -50,6 +50,7 @@
 
       .item {
         display: inline-block;
+        position: relative;
         font-size: 1.5em;
         transition: {
           property: all;
@@ -72,9 +73,37 @@
         };
       }
 
-      :hover {
+      .item:hover {
         transform: translateY(-5px);
       }
+
+      .item:hover .submenu {
+        display: block;
+      }
+
+      .submenu {
+        display: none;
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        background-color: white;
+        transform: translateY(4px);
+        border: {
+          width: 1px;
+          color: constants.$border-color;
+          style: solid;
+        };
+
+        .item {
+          display: block;
+          padding: 10px;
+          font-size: 0.8em;
+        }
+
+        .item:hover {
+          transform: none;
+        }
+      }
     }
 
     .dropdown-menu-button {
@@ -144,7 +173,7 @@
   }
 }
 
-@media screen and (max-width: 900px){
+@media screen and (max-width: 900px) {
   .dropdown-menu-content.show {
     display: block;
   }
diff --git a/src/components/home/index.tsx b/src/pages/Home.tsx
similarity index 98%
rename from src/components/home/index.tsx
rename to src/pages/Home.tsx
index 0598636..3091de0 100644
--- a/src/components/home/index.tsx
+++ b/src/pages/Home.tsx
@@ -4,7 +4,7 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import { MainFrameworkContext } from '@/pages/MainFramework'
 import Slogan from '@/components/home/Slogan'
 import OxygenToolbox from '@/components/home/OxygenToolbox'
-import Indicator from '@/components/common/Indicator.tsx'
+import Indicator from '@/components/common/Indicator'
 import Footer from '@/components/home/Footer'
 
 const Home: React.FC = () => {
diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx
index 24bcc24..bcf29ea 100644
--- a/src/pages/MainFramework.tsx
+++ b/src/pages/MainFramework.tsx
@@ -90,7 +90,7 @@ const MainFramework: React.FC = () => {
                             <nav>
                                 <ul className={'menu'}>
                                     {routeChildren?.map((route) => {
-                                        return (
+                                        return (route.handle as RouteHandle).menu ? (
                                             <li className={'item'} key={route.id}>
                                                 <NavLink
                                                     to={route.path ?? ''}
@@ -104,7 +104,32 @@ const MainFramework: React.FC = () => {
                                                 >
                                                     {(route.handle as RouteHandle).name}
                                                 </NavLink>
+                                                {route.children ? (
+                                                    <ul className={'submenu'}>
+                                                        {route.children.map((subRoute) => {
+                                                            return (subRoute.handle as RouteHandle)
+                                                                .menu ? (
+                                                                <li
+                                                                    className={'item'}
+                                                                    key={subRoute.id}
+                                                                >
+                                                                    {
+                                                                        (
+                                                                            subRoute.handle as RouteHandle
+                                                                        ).name
+                                                                    }
+                                                                </li>
+                                                            ) : (
+                                                                <></>
+                                                            )
+                                                        })}
+                                                    </ul>
+                                                ) : (
+                                                    <></>
+                                                )}
                                             </li>
+                                        ) : (
+                                            <></>
                                         )
                                     })}
                                 </ul>
diff --git a/src/pages/Tools.tsx b/src/pages/Tools.tsx
new file mode 100644
index 0000000..5a1c5e9
--- /dev/null
+++ b/src/pages/Tools.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Tools: React.FC = () => {
+    return <></>
+}
+
+export default Tools
diff --git a/src/pages/tools/Translation.tsx b/src/pages/tools/Translation.tsx
new file mode 100644
index 0000000..6057f22
--- /dev/null
+++ b/src/pages/tools/Translation.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Translation: React.FC = () => {
+    return <></>
+}
+
+export default Translation
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 808527a..cb8f49d 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -23,7 +23,7 @@ const routes: RouteObject[] = [
                     {
                         path: '',
                         id: 'home',
-                        Component: React.lazy(() => import('@/components/home')),
+                        Component: React.lazy(() => import('@/pages/Home')),
                         handle: {
                             name: '主页',
                             menu: true,
@@ -38,6 +38,38 @@ const routes: RouteObject[] = [
                             menu: true,
                             auth: false
                         }
+                    },
+                    {
+                        path: 'tools',
+                        id: 'tools',
+                        Component: React.lazy(() => import('@/pages/Tools')),
+                        children: [
+                            {
+                                path: 'translation',
+                                id: 'tools-translation',
+                                Component: React.lazy(() => import('@/pages/tools/Translation')),
+                                handle: {
+                                    name: '翻译',
+                                    menu: true,
+                                    auth: false
+                                }
+                            },
+                            {
+                                path: 'translation',
+                                id: 'tools-translationa',
+                                Component: React.lazy(() => import('@/pages/tools/Translation')),
+                                handle: {
+                                    name: '翻译',
+                                    menu: true,
+                                    auth: false
+                                }
+                            }
+                        ],
+                        handle: {
+                            name: '工具',
+                            menu: true,
+                            auth: false
+                        }
                     }
                 ]
             },

From 54e6255527573f120ad41ae19b9068dc16d48f46 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 26 Sep 2023 21:33:23 +0800
Subject: [PATCH 002/307] Optimize submenu

---
 src/assets/css/pages/header.scss | 37 ++++++++++++++++++++++++++------
 src/pages/MainFramework.tsx      | 29 ++++++++++++++++++++-----
 src/router/index.tsx             | 10 ---------
 3 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/src/assets/css/pages/header.scss b/src/assets/css/pages/header.scss
index 98ff714..18db654 100644
--- a/src/assets/css/pages/header.scss
+++ b/src/assets/css/pages/header.scss
@@ -79,6 +79,22 @@
 
       .item:hover .submenu {
         display: block;
+        border: {
+          width: 1px;
+          color: constants.$border-color;
+          style: solid;
+        };
+        animation: 0.3s;
+
+        @include mixins.unique-keyframes {
+          0% {
+            transform: translateY(-10px);
+            opacity: 0;
+          }
+          100% {
+            transform: translateY(4px);
+          }
+        }
       }
 
       .submenu {
@@ -88,20 +104,29 @@
         text-align: center;
         background-color: white;
         transform: translateY(4px);
-        border: {
-          width: 1px;
-          color: constants.$border-color;
-          style: solid;
-        };
+        overflow: hidden;
 
         .item {
           display: block;
-          padding: 10px;
           font-size: 0.8em;
+          transition: all 0s;
+
+          a {
+            display: block;
+            padding: 8px 0;
+          }
         }
 
         .item:hover {
           transform: none;
+          a {
+            background-color: constants.$focus-color !important;
+          }
+        }
+
+        .active {
+          font-weight: bold;
+          border: none;
         }
       }
     }
diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx
index bcf29ea..c867634 100644
--- a/src/pages/MainFramework.tsx
+++ b/src/pages/MainFramework.tsx
@@ -5,6 +5,7 @@ import LoadingMask from '@/components/common/LoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import Icon from '@ant-design/icons'
 import { COLOR_FONT_SECONDARY } from '@/constants/Common.constants.ts'
+import { NavLink } from 'react-router-dom'
 
 export const MainFrameworkContext = createContext<{
     navbarHiddenState: {
@@ -113,11 +114,29 @@ const MainFramework: React.FC = () => {
                                                                     className={'item'}
                                                                     key={subRoute.id}
                                                                 >
-                                                                    {
-                                                                        (
-                                                                            subRoute.handle as RouteHandle
-                                                                        ).name
-                                                                    }
+                                                                    <NavLink
+                                                                        to={
+                                                                            (route.path ?? '') +
+                                                                            '/' +
+                                                                            (subRoute.path ?? '')
+                                                                        }
+                                                                        className={({
+                                                                            isActive,
+                                                                            isPending
+                                                                        }) =>
+                                                                            isPending
+                                                                                ? 'pending'
+                                                                                : isActive
+                                                                                ? 'active'
+                                                                                : ''
+                                                                        }
+                                                                    >
+                                                                        {
+                                                                            (
+                                                                                subRoute.handle as RouteHandle
+                                                                            ).name
+                                                                        }
+                                                                    </NavLink>
                                                                 </li>
                                                             ) : (
                                                                 <></>
diff --git a/src/router/index.tsx b/src/router/index.tsx
index cb8f49d..580eaf6 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -53,16 +53,6 @@ const routes: RouteObject[] = [
                                     menu: true,
                                     auth: false
                                 }
-                            },
-                            {
-                                path: 'translation',
-                                id: 'tools-translationa',
-                                Component: React.lazy(() => import('@/pages/tools/Translation')),
-                                handle: {
-                                    name: '翻译',
-                                    menu: true,
-                                    auth: false
-                                }
                             }
                         ],
                         handle: {

From 7d45e2a3bee915cdb70da0e3ccc99c8f1c5dcd9d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 27 Sep 2023 09:09:27 +0800
Subject: [PATCH 003/307] Optimize submenu stylesheet

---
 src/assets/css/pages/header.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/assets/css/pages/header.scss b/src/assets/css/pages/header.scss
index 18db654..836974e 100644
--- a/src/assets/css/pages/header.scss
+++ b/src/assets/css/pages/header.scss
@@ -91,9 +91,6 @@
             transform: translateY(-10px);
             opacity: 0;
           }
-          100% {
-            transform: translateY(4px);
-          }
         }
       }
 
@@ -103,7 +100,6 @@
         width: 100%;
         text-align: center;
         background-color: white;
-        transform: translateY(4px);
         overflow: hidden;
 
         .item {

From f0782cdfa21ff6b4a4f3d1afe342977d4b55a11d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 10 Oct 2023 01:16:32 +0800
Subject: [PATCH 004/307] Add Add multiple environments

---
 .env.development       | 2 ++
 .env.production        | 2 ++
 .env.testing           | 3 +++
 package.json           | 1 +
 src/services/index.tsx | 4 ++--
 src/vite-env.d.ts      | 9 +++++++++
 6 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 .env.development
 create mode 100644 .env.production
 create mode 100644 .env.testing

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..14639df
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,2 @@
+VITE_API_URL=http://localhost:8080
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..18ccaa0
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,2 @@
+VITE_API_URL=http://api.fatweb.top
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
diff --git a/.env.testing b/.env.testing
new file mode 100644
index 0000000..53be291
--- /dev/null
+++ b/.env.testing
@@ -0,0 +1,3 @@
+NODE_ENV=development
+VITE_API_URL=http://api-test.fatweb.top
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
diff --git a/package.json b/package.json
index 6ec90f0..288a28a 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "dev": "vite",
     "dev-host": "vite --host 0.0.0.0",
     "build": "vite build",
+    "build-test": "vite build --mode testing",
     "clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write src/",
diff --git a/src/services/index.tsx b/src/services/index.tsx
index c47f031..700b7b0 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -14,7 +14,7 @@ import {
 import { message } from 'antd'
 
 const service: AxiosInstance = axios.create({
-    baseURL: 'http://localhost:8181',
+    baseURL: import.meta.env.VITE_API_URL,
     timeout: 10000,
     withCredentials: false
 })
@@ -44,7 +44,7 @@ service.interceptors.request.use(
                 jwt.exp * 1000 - new Date().getTime() > 0
             ) {
                 await axios
-                    .get('http://localhost:8181/token', {
+                    .get(import.meta.env.VITE_API_TOKEN_URL, {
                         headers: { token }
                     })
                     .then((value: AxiosResponse<_Response<Token>>) => {
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 2cb4cf2..53a7371 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,5 +1,14 @@
 /// <reference types="vite/client" />
 
+interface ImportMetaEnv {
+    readonly VITE_API_URL: string
+    readonly VITE_API_TOKEN_URL: string
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}
+
 type RouteHandle = {
     name?: string
     menu?: boolean

From e8efecfe644e5d9b7bb6da8e7208d5e8b91034ba Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 10 Oct 2023 16:37:02 +0800
Subject: [PATCH 005/307] Adapt to fatweb-api

---
 src/constants/Common.constants.ts | 90 +++++++++++++------------------
 src/pages/Login.tsx               | 20 +++++--
 src/services/index.tsx            | 44 ++++-----------
 src/utils/auth.ts                 |  4 +-
 src/vite-env.d.ts                 |  1 +
 5 files changed, 66 insertions(+), 93 deletions(-)

diff --git a/src/constants/Common.constants.ts b/src/constants/Common.constants.ts
index 34b9302..d7b32ad 100644
--- a/src/constants/Common.constants.ts
+++ b/src/constants/Common.constants.ts
@@ -11,36 +11,27 @@ const SIZE_ICON_MD = '24px'
 const SIZE_ICON_LG = '32px'
 const SIZE_ICON_XL = '64px'
 
-// Response Code
-const SYSTEM_OK = 20000
-const LOGIN_SUCCESS = 20010
-const LOGIN_USERNAME_PASSWORD_ERROR = 20011
-const OLD_PASSWORD_NOT_MATCH = 20012
-const LOGOUT_SUCCESS = 20015
-const LOGOUT_FAILED = 20016
-const TOKEN_IS_ILLEGAL = 20017
-const TOKEN_HAS_EXPIRED = 20018
-const TOKEN_RENEW_SUCCESS = 20019
-const DATABASE_SELECT_OK = 20021
-const DATABASE_SAVE_OK = 20022
-const DATABASE_UPDATE_OK = 20023
-const DATABASE_DELETE_OK = 20024
-const DATABASE_SELECT_ERROR = 20031
-const DATABASE_SAVE_ERROR = 20032
-const DATABASE_UPDATE_ERROR = 20033
-const DATABASE_DELETE_ERROR = 20034
-const DATABASE_TIMEOUT_ERROR = 20035
-const DATABASE_CONNECT_ERROR = 20036
-const DATABASE_DATA_TO_LONG = 20037
-const DATABASE_DATA_VALIDATION_FAILED = 20038
-const DATABASE_EXECUTE_ERROR = 20039
-
-const UNAUTHORIZED = 30010
-const ACCESS_DENIED = 30030
-const USER_DISABLE = 30031
-
-const SYSTEM_ERROR = 50001
-const SYSTEM_TIMEOUT = 50002
+/**
+ * Response code
+ */
+const SYSTEM_OK = 10000
+const SYSTEM_LOGIN_SUCCESS = 10020
+const SYSTEM_PASSWORD_CHANGE_SUCCESS = 10021
+const SYSTEM_LOGOUT_SUCCESS = 10022
+const SYSTEM_TOKEN_RENEW_SUCCESS = 10023
+const SYSTEM_UNAUTHORIZED = 10030
+const SYSTEM_USERNAME_NOT_FOUND = 10031
+const SYSTEM_ACCESS_DENIED = 10032
+const SYSTEM_USER_DISABLE = 10033
+const SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR = 10034
+const SYSTEM_OLD_PASSWORD_NOT_MATCH = 10035
+const SYSTEM_LOGOUT_FAILED = 10036
+const SYSTEM_TOKEN_ILLEGAL = 10037
+const SYSTEM_TOKEN_HAS_EXPIRED = 10038
+const SYSTEM_REQUEST_ILLEGAL = 10040
+const SYSTEM_ARGUMENT_NOT_VALID = 10041
+const SYSTEM_ERROR = 10050
+const SYSTEM_TIMEOUT = 10051
 
 export {
     PRODUCTION_NAME,
@@ -56,30 +47,21 @@ export {
     SIZE_ICON_LG,
     SIZE_ICON_XL,
     SYSTEM_OK,
-    LOGIN_SUCCESS,
-    LOGIN_USERNAME_PASSWORD_ERROR,
-    OLD_PASSWORD_NOT_MATCH,
-    LOGOUT_SUCCESS,
-    LOGOUT_FAILED,
-    TOKEN_IS_ILLEGAL,
-    TOKEN_HAS_EXPIRED,
-    TOKEN_RENEW_SUCCESS,
-    DATABASE_SELECT_OK,
-    DATABASE_SAVE_OK,
-    DATABASE_UPDATE_OK,
-    DATABASE_DELETE_OK,
-    DATABASE_SELECT_ERROR,
-    DATABASE_SAVE_ERROR,
-    DATABASE_UPDATE_ERROR,
-    DATABASE_DELETE_ERROR,
-    DATABASE_TIMEOUT_ERROR,
-    DATABASE_CONNECT_ERROR,
-    DATABASE_DATA_TO_LONG,
-    DATABASE_DATA_VALIDATION_FAILED,
-    DATABASE_EXECUTE_ERROR,
-    UNAUTHORIZED,
-    ACCESS_DENIED,
-    USER_DISABLE,
+    SYSTEM_LOGIN_SUCCESS,
+    SYSTEM_PASSWORD_CHANGE_SUCCESS,
+    SYSTEM_LOGOUT_SUCCESS,
+    SYSTEM_TOKEN_RENEW_SUCCESS,
+    SYSTEM_UNAUTHORIZED,
+    SYSTEM_USERNAME_NOT_FOUND,
+    SYSTEM_ACCESS_DENIED,
+    SYSTEM_USER_DISABLE,
+    SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR,
+    SYSTEM_OLD_PASSWORD_NOT_MATCH,
+    SYSTEM_LOGOUT_FAILED,
+    SYSTEM_TOKEN_ILLEGAL,
+    SYSTEM_TOKEN_HAS_EXPIRED,
+    SYSTEM_REQUEST_ILLEGAL,
+    SYSTEM_ARGUMENT_NOT_VALID,
     SYSTEM_ERROR,
     SYSTEM_TIMEOUT
 }
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index efa6ee9..d0c4c5c 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,6 +1,11 @@
 import React from 'react'
 import { login } from '@/utils/auth.ts'
-import { LOGIN_SUCCESS, LOGIN_USERNAME_PASSWORD_ERROR } from '@/constants/Common.constants.ts'
+import {
+    SYSTEM_LOGIN_SUCCESS,
+    SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR,
+    SYSTEM_USER_DISABLE,
+    SYSTEM_USERNAME_NOT_FOUND
+} from '@/constants/Common.constants.ts'
 import { setToken } from '@/utils/common.ts'
 import '@/assets/css/pages/login.scss'
 
@@ -15,14 +20,15 @@ const Login: React.FC = () => {
             const res = value.data
             const { code, data } = res
             switch (code) {
-                case LOGIN_SUCCESS:
+                case SYSTEM_LOGIN_SUCCESS:
                     setToken(data?.token ?? '')
                     void messageApi.success('登录成功')
                     setTimeout(() => {
                         navigate('/')
                     }, 1500)
                     break
-                case LOGIN_USERNAME_PASSWORD_ERROR:
+                case SYSTEM_USERNAME_NOT_FOUND:
+                case SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR:
                     void messageApi.error(
                         <>
                             <strong>用户名</strong>或<strong>密码</strong>错误，请重试
@@ -30,6 +36,14 @@ const Login: React.FC = () => {
                     )
                     setIsLoggingIn(false)
                     break
+                case SYSTEM_USER_DISABLE:
+                    void messageApi.error(
+                        <>
+                            该用户已被<strong>禁用</strong>
+                        </>
+                    )
+                    setIsLoggingIn(false)
+                    break
                 default:
                     void messageApi.error(
                         <>
diff --git a/src/services/index.tsx b/src/services/index.tsx
index 700b7b0..48939ab 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -2,14 +2,11 @@ import axios, { type AxiosError, AxiosInstance, AxiosRequestConfig, AxiosRespons
 import jwtDecode, { JwtPayload } from 'jwt-decode'
 import { clearLocalStorage, getToken, setToken } from '@/utils/common'
 import {
-    ACCESS_DENIED,
-    DATABASE_DATA_TO_LONG,
-    DATABASE_DATA_VALIDATION_FAILED,
-    DATABASE_EXECUTE_ERROR,
-    TOKEN_HAS_EXPIRED,
-    TOKEN_IS_ILLEGAL,
-    TOKEN_RENEW_SUCCESS,
-    UNAUTHORIZED
+    SYSTEM_ACCESS_DENIED,
+    SYSTEM_TOKEN_HAS_EXPIRED,
+    SYSTEM_TOKEN_ILLEGAL,
+    SYSTEM_TOKEN_RENEW_SUCCESS,
+    SYSTEM_UNAUTHORIZED
 } from '@/constants/Common.constants'
 import { message } from 'antd'
 
@@ -49,7 +46,7 @@ service.interceptors.request.use(
                     })
                     .then((value: AxiosResponse<_Response<Token>>) => {
                         const response = value.data
-                        if (response.code === TOKEN_RENEW_SUCCESS) {
+                        if (response.code === SYSTEM_TOKEN_RENEW_SUCCESS) {
                             setToken(response.data?.token ?? '')
                         }
                     })
@@ -68,9 +65,9 @@ service.interceptors.request.use(
 service.interceptors.response.use(
     (response: AxiosResponse<_Response<never>>) => {
         switch (response.data.code) {
-            case UNAUTHORIZED:
-            case TOKEN_IS_ILLEGAL:
-            case TOKEN_HAS_EXPIRED:
+            case SYSTEM_UNAUTHORIZED:
+            case SYSTEM_TOKEN_ILLEGAL:
+            case SYSTEM_TOKEN_HAS_EXPIRED:
                 clearLocalStorage()
                 void message.error(
                     <>
@@ -81,34 +78,13 @@ service.interceptors.response.use(
                     location.reload()
                 }, 1500)
                 throw response?.data
-            case ACCESS_DENIED:
+            case SYSTEM_ACCESS_DENIED:
                 void message.error(
                     <>
                         <strong>暂无权限操作</strong>
                     </>
                 )
                 throw response?.data
-            case DATABASE_DATA_TO_LONG:
-                void message.error(
-                    <>
-                        <strong>数据过长</strong>
-                    </>
-                )
-                throw response?.data
-            case DATABASE_DATA_VALIDATION_FAILED:
-                void message.error(
-                    <>
-                        <strong>数据验证失败</strong>
-                    </>
-                )
-                throw response?.data
-            case DATABASE_EXECUTE_ERROR:
-                void message.error(
-                    <>
-                        <strong>数据库执行出错</strong>
-                    </>
-                )
-                throw response?.data
         }
         return response
     },
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 197427c..097e112 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,5 +1,5 @@
 import { clearLocalStorage, getCaptcha, getLocalStorage, setLocalStorage } from './common'
-import { DATABASE_SELECT_OK, TOKEN_NAME } from '@/constants/Common.constants'
+import { SYSTEM_OK, TOKEN_NAME } from '@/constants/Common.constants'
 import request from '@/services'
 
 let captcha: Captcha
@@ -35,7 +35,7 @@ export async function requestUser(): Promise<User> {
 
     await request.get<User>('/user/info').then((value) => {
         const response = value.data
-        if (response.code === DATABASE_SELECT_OK) {
+        if (response.code === SYSTEM_OK) {
             user = response.data
             setLocalStorage('userInfo', JSON.stringify(user))
         }
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 53a7371..324bb5f 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -17,6 +17,7 @@ type RouteHandle = {
 
 type _Response<T> = {
     code: number
+    success: boolean
     msg: string
     data: T | null
 }

From 586069b233f90c757bee74df57ee91068998800a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 10 Oct 2023 16:54:30 +0800
Subject: [PATCH 006/307] Change http to https in production and testing
 environment

---
 .env.production | 2 +-
 .env.testing    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.env.production b/.env.production
index 18ccaa0..2e21eb8 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,2 @@
-VITE_API_URL=http://api.fatweb.top
+VITE_API_URL=https://api.fatweb.top
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
diff --git a/.env.testing b/.env.testing
index 53be291..86f60f7 100644
--- a/.env.testing
+++ b/.env.testing
@@ -1,3 +1,3 @@
 NODE_ENV=development
-VITE_API_URL=http://api-test.fatweb.top
+VITE_API_URL=https://api-test.fatweb.top
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file

From a10b418ae95e4e8e0d584c4aa62d956a577e84a5 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 10 Oct 2023 17:05:30 +0800
Subject: [PATCH 007/307] Optimize login

---
 src/pages/Login.tsx    | 78 ++++++++++++++++++++++--------------------
 src/services/index.tsx |  2 +-
 2 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index d0c4c5c..02ff4d2 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -16,43 +16,47 @@ const Login: React.FC = () => {
 
     const onFinish = (values: LoginForm) => {
         setIsLoggingIn(true)
-        void login(values.username, values.password).then((value) => {
-            const res = value.data
-            const { code, data } = res
-            switch (code) {
-                case SYSTEM_LOGIN_SUCCESS:
-                    setToken(data?.token ?? '')
-                    void messageApi.success('登录成功')
-                    setTimeout(() => {
-                        navigate('/')
-                    }, 1500)
-                    break
-                case SYSTEM_USERNAME_NOT_FOUND:
-                case SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR:
-                    void messageApi.error(
-                        <>
-                            <strong>用户名</strong>或<strong>密码</strong>错误，请重试
-                        </>
-                    )
-                    setIsLoggingIn(false)
-                    break
-                case SYSTEM_USER_DISABLE:
-                    void messageApi.error(
-                        <>
-                            该用户已被<strong>禁用</strong>
-                        </>
-                    )
-                    setIsLoggingIn(false)
-                    break
-                default:
-                    void messageApi.error(
-                        <>
-                            <strong>服务器出错了</strong>
-                        </>
-                    )
-                    setIsLoggingIn(false)
-            }
-        })
+        void login(values.username, values.password)
+            .then((value) => {
+                const res = value.data
+                const { code, data } = res
+                switch (code) {
+                    case SYSTEM_LOGIN_SUCCESS:
+                        setToken(data?.token ?? '')
+                        void messageApi.success('登录成功')
+                        setTimeout(() => {
+                            navigate('/')
+                        }, 1500)
+                        break
+                    case SYSTEM_USERNAME_NOT_FOUND:
+                    case SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR:
+                        void messageApi.error(
+                            <>
+                                <strong>用户名</strong>或<strong>密码</strong>错误，请重试
+                            </>
+                        )
+                        setIsLoggingIn(false)
+                        break
+                    case SYSTEM_USER_DISABLE:
+                        void messageApi.error(
+                            <>
+                                该用户已被<strong>禁用</strong>
+                            </>
+                        )
+                        setIsLoggingIn(false)
+                        break
+                    default:
+                        void messageApi.error(
+                            <>
+                                <strong>服务器出错了</strong>
+                            </>
+                        )
+                        setIsLoggingIn(false)
+                }
+            })
+            .catch(() => {
+                setIsLoggingIn(false)
+            })
     }
 
     return (
diff --git a/src/services/index.tsx b/src/services/index.tsx
index 48939ab..d89ba76 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -12,7 +12,7 @@ import { message } from 'antd'
 
 const service: AxiosInstance = axios.create({
     baseURL: import.meta.env.VITE_API_URL,
-    timeout: 10000,
+    timeout: 30000,
     withCredentials: false
 })
 

From 42c970f9d1773a71bdbfd0a95750e7e79b244cdb Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 11 Oct 2023 14:02:02 +0800
Subject: [PATCH 008/307] Rename MainFramework to HomeFramework. Move tools to
 independent path.

---
 src/pages/Home.tsx                            |  4 +-
 .../{MainFramework.tsx => HomeFramework.tsx}  | 10 ++---
 src/router/index.tsx                          | 45 +++++++++++++------
 3 files changed, 38 insertions(+), 21 deletions(-)
 rename src/pages/{MainFramework.tsx => HomeFramework.tsx} (97%)

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 3091de0..25ca34d 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@/assets/css/components/home/home.scss'
 import FitFullScreen from '@/components/common/FitFullScreen'
-import { MainFrameworkContext } from '@/pages/MainFramework'
+import { HomeFrameworkContext } from '@/pages/HomeFramework'
 import Slogan from '@/components/home/Slogan'
 import OxygenToolbox from '@/components/home/OxygenToolbox'
 import Indicator from '@/components/common/Indicator'
@@ -13,7 +13,7 @@ const Home: React.FC = () => {
         navbarHiddenState: { navbarHidden, setNavbarHidden },
         showDropdownMenuState: { setShowDropdownMenu },
         preventScrollState: { setPreventScroll }
-    } = useContext(MainFrameworkContext)
+    } = useContext(HomeFrameworkContext)
 
     const fitFullScreenRef = useRef<HTMLDivElement>(null)
     const scrollTimeout = useRef(0)
diff --git a/src/pages/MainFramework.tsx b/src/pages/HomeFramework.tsx
similarity index 97%
rename from src/pages/MainFramework.tsx
rename to src/pages/HomeFramework.tsx
index c867634..4d77fb9 100644
--- a/src/pages/MainFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -7,7 +7,7 @@ import Icon from '@ant-design/icons'
 import { COLOR_FONT_SECONDARY } from '@/constants/Common.constants.ts'
 import { NavLink } from 'react-router-dom'
 
-export const MainFrameworkContext = createContext<{
+export const HomeFrameworkContext = createContext<{
     navbarHiddenState: {
         navbarHidden: boolean
         setNavbarHidden: (newValue: boolean) => void
@@ -53,7 +53,7 @@ export const MainFrameworkContext = createContext<{
     hideScrollbarRef: createRef()
 })
 
-const MainFramework: React.FC = () => {
+const HomeFramework: React.FC = () => {
     const routeId = useMatches()[1].id
     const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
 
@@ -187,7 +187,7 @@ const MainFramework: React.FC = () => {
                         </div>
                     </div>
 
-                    <MainFrameworkContext.Provider
+                    <HomeFrameworkContext.Provider
                         value={{
                             navbarHiddenState: { navbarHidden, setNavbarHidden },
                             preventScrollState: { preventScroll, setPreventScroll },
@@ -215,11 +215,11 @@ const MainFramework: React.FC = () => {
                         >
                             <Outlet />
                         </Suspense>
-                    </MainFrameworkContext.Provider>
+                    </HomeFrameworkContext.Provider>
                 </div>
             </HideScrollbar>
         </>
     )
 }
 
-export default MainFramework
+export default HomeFramework
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 580eaf6..18df163 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -15,10 +15,32 @@ const routes: RouteObject[] = [
                 id: 'loading',
                 Component: React.lazy(() => import('@/components/common/LoadingMask'))
             },
+            {
+                path: '/tools',
+                id: 'tools',
+                Component: React.lazy(() => import('@/pages/Tools')),
+                children: [
+                    {
+                        path: 'translation',
+                        id: 'tools-translation',
+                        Component: React.lazy(() => import('@/pages/tools/Translation')),
+                        handle: {
+                            name: '翻译',
+                            menu: true,
+                            auth: true
+                        }
+                    }
+                ],
+                handle: {
+                    name: '工具',
+                    title: '工具',
+                    auth: false
+                }
+            },
             {
                 path: '',
-                id: 'mainFramework',
-                Component: React.lazy(() => import('@/pages/MainFramework')),
+                id: 'homeFramework',
+                Component: React.lazy(() => import('@/pages/HomeFramework')),
                 children: [
                     {
                         path: '',
@@ -32,33 +54,28 @@ const routes: RouteObject[] = [
                     },
                     {
                         path: 'https://blog.fatweb.top',
-                        id: 'blog',
+                        id: 'url-blog',
                         handle: {
                             name: '博客',
-                            menu: true,
-                            auth: false
+                            menu: true
                         }
                     },
                     {
-                        path: 'tools',
-                        id: 'tools',
-                        Component: React.lazy(() => import('@/pages/Tools')),
+                        path: '/tools',
+                        id: 'url-tools',
                         children: [
                             {
                                 path: 'translation',
-                                id: 'tools-translation',
-                                Component: React.lazy(() => import('@/pages/tools/Translation')),
+                                id: 'url-tools-translation',
                                 handle: {
                                     name: '翻译',
-                                    menu: true,
-                                    auth: false
+                                    menu: true
                                 }
                             }
                         ],
                         handle: {
                             name: '工具',
-                            menu: true,
-                            auth: false
+                            menu: true
                         }
                     }
                 ]

From 3d84a8eed48b692c19e02c595133e20503410940 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 11 Oct 2023 14:03:32 +0800
Subject: [PATCH 009/307] Fix AuthRoute

---
 src/AuthRoute.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index 788ba52..57948cb 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -1,8 +1,9 @@
 import { getLoginStatus } from '@/utils/auth.ts'
 
 const AuthRoute = () => {
-    const match = useMatches()[1]
-    const handle = match.handle as RouteHandle
+    const matches = useMatches()
+    const lastMatch = matches.reduce((_, second) => second)
+    const handle = lastMatch.handle as RouteHandle
     const outlet = useOutlet()
     const isLogin = getLoginStatus()
 
@@ -10,11 +11,11 @@ const AuthRoute = () => {
         if (handle?.auth && !isLogin) {
             return <Navigate to="/login" />
         }
-        if (isLogin && match.pathname === '/login') {
+        if (isLogin && lastMatch.pathname === '/login') {
             return <Navigate to="/" />
         }
         return outlet
-    }, [handle?.auth, isLogin, match.pathname, outlet])
+    }, [handle?.auth, isLogin, lastMatch.pathname, outlet])
 }
 
 export default AuthRoute

From 885a097e7ff7f82261d88bac0f846a73a3e1ae0d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 11 Oct 2023 14:04:33 +0800
Subject: [PATCH 010/307] Add auto set title to AuthRoute

---
 src/AuthRoute.tsx | 14 +++++++++++++-
 src/vite-env.d.ts |  3 +++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index 57948cb..a70354f 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -1,4 +1,5 @@
 import { getLoginStatus } from '@/utils/auth.ts'
+import { PRODUCTION_NAME } from '@/constants/Common.constants.ts'
 
 const AuthRoute = () => {
     const matches = useMatches()
@@ -8,6 +9,9 @@ const AuthRoute = () => {
     const isLogin = getLoginStatus()
 
     return useMemo(() => {
+        document.title = `${handle?.titlePrefix ?? ''}${
+            handle?.title ? handle?.title : PRODUCTION_NAME
+        }${handle?.titlePostfix ?? ''}`
         if (handle?.auth && !isLogin) {
             return <Navigate to="/login" />
         }
@@ -15,7 +19,15 @@ const AuthRoute = () => {
             return <Navigate to="/" />
         }
         return outlet
-    }, [handle?.auth, isLogin, lastMatch.pathname, outlet])
+    }, [
+        handle?.auth,
+        handle?.title,
+        handle?.titlePostfix,
+        handle?.titlePrefix,
+        isLogin,
+        lastMatch.pathname,
+        outlet
+    ])
 }
 
 export default AuthRoute
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 324bb5f..1311793 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -13,6 +13,9 @@ type RouteHandle = {
     name?: string
     menu?: boolean
     auth?: boolean
+    titlePrefix?: string
+    title?: string
+    titlePostfix?: string
 }
 
 type _Response<T> = {

From bd1e69954302f270e0cc25380b0d38c637fdd471 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 11 Oct 2023 14:41:27 +0800
Subject: [PATCH 011/307] Add redirect after login

---
 src/AuthRoute.tsx   | 10 +++++++++-
 src/pages/Login.tsx |  7 ++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index a70354f..725136c 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -5,6 +5,7 @@ const AuthRoute = () => {
     const matches = useMatches()
     const lastMatch = matches.reduce((_, second) => second)
     const handle = lastMatch.handle as RouteHandle
+    const location = useLocation()
     const outlet = useOutlet()
     const isLogin = getLoginStatus()
 
@@ -13,7 +14,13 @@ const AuthRoute = () => {
             handle?.title ? handle?.title : PRODUCTION_NAME
         }${handle?.titlePostfix ?? ''}`
         if (handle?.auth && !isLogin) {
-            return <Navigate to="/login" />
+            return (
+                <Navigate
+                    to={`/login${
+                        '?redirect=' + encodeURIComponent(lastMatch.pathname + location.search)
+                    }`}
+                />
+            )
         }
         if (isLogin && lastMatch.pathname === '/login') {
             return <Navigate to="/" />
@@ -26,6 +33,7 @@ const AuthRoute = () => {
         handle?.titlePrefix,
         isLogin,
         lastMatch.pathname,
+        location.search,
         outlet
     ])
 }
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 02ff4d2..92a8bac 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -12,6 +12,7 @@ import '@/assets/css/pages/login.scss'
 const Login: React.FC = () => {
     const [messageApi, contextHolder] = message.useMessage()
     const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
     const [isLoggingIn, setIsLoggingIn] = useState(false)
 
     const onFinish = (values: LoginForm) => {
@@ -25,7 +26,11 @@ const Login: React.FC = () => {
                         setToken(data?.token ?? '')
                         void messageApi.success('登录成功')
                         setTimeout(() => {
-                            navigate('/')
+                            if (searchParams.has('redirect')) {
+                                navigate(searchParams.get('redirect') ?? '/')
+                            } else {
+                                navigate('/')
+                            }
                         }, 1500)
                         break
                     case SYSTEM_USERNAME_NOT_FOUND:

From 49b955169f4aee3ee563fdbf8b816433c54a9e7a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 11 Oct 2023 16:18:18 +0800
Subject: [PATCH 012/307] Optimize ToolsFramework router

---
 src/pages/ToolsFramework.tsx             |  7 +++++++
 src/pages/{Home.tsx => home/index.tsx}   |  0
 src/pages/{Tools.tsx => tools/index.tsx} |  0
 src/router/index.tsx                     | 16 +++++++++++++---
 4 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/ToolsFramework.tsx
 rename src/pages/{Home.tsx => home/index.tsx} (100%)
 rename src/pages/{Tools.tsx => tools/index.tsx} (100%)

diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
new file mode 100644
index 0000000..96c04ad
--- /dev/null
+++ b/src/pages/ToolsFramework.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const ToolsFramework: React.FC = () => {
+    return <></>
+}
+
+export default ToolsFramework
diff --git a/src/pages/Home.tsx b/src/pages/home/index.tsx
similarity index 100%
rename from src/pages/Home.tsx
rename to src/pages/home/index.tsx
diff --git a/src/pages/Tools.tsx b/src/pages/tools/index.tsx
similarity index 100%
rename from src/pages/Tools.tsx
rename to src/pages/tools/index.tsx
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 18df163..fe6967e 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -17,9 +17,19 @@ const routes: RouteObject[] = [
             },
             {
                 path: '/tools',
-                id: 'tools',
-                Component: React.lazy(() => import('@/pages/Tools')),
+                id: 'toolsFramework',
+                Component: React.lazy(() => import('@/pages/ToolsFramework')),
                 children: [
+                    {
+                        path: '',
+                        id: 'tools',
+                        Component: React.lazy(() => import('@/pages/tools')),
+                        handle: {
+                            name: '全部工具',
+                            menu: true,
+                            auth: false
+                        }
+                    },
                     {
                         path: 'translation',
                         id: 'tools-translation',
@@ -45,7 +55,7 @@ const routes: RouteObject[] = [
                     {
                         path: '',
                         id: 'home',
-                        Component: React.lazy(() => import('@/pages/Home')),
+                        Component: React.lazy(() => import('@/pages/home')),
                         handle: {
                             name: '主页',
                             menu: true,

From 2f48301bda48b3ed1eedb774436f4302fffc90b4 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 11 Oct 2023 16:25:44 +0800
Subject: [PATCH 013/307] Rename header.scss to home-framework.scss

---
 src/assets/css/pages/{header.scss => home-framework.scss} | 0
 src/pages/HomeFramework.tsx                               | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/assets/css/pages/{header.scss => home-framework.scss} (100%)

diff --git a/src/assets/css/pages/header.scss b/src/assets/css/pages/home-framework.scss
similarity index 100%
rename from src/assets/css/pages/header.scss
rename to src/assets/css/pages/home-framework.scss
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index 4d77fb9..e7c93fc 100644
--- a/src/pages/HomeFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import '@/assets/css/pages/header.scss'
+import '@/assets/css/pages/home-framework.scss'
 import router from '@/router'
 import LoadingMask from '@/components/common/LoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'

From c5b140219b4e7734c3572f8cd24a73bb3164226a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 11 Oct 2023 16:29:35 +0800
Subject: [PATCH 014/307] Remove .tsx

---
 src/App.tsx                           | 2 +-
 src/components/home/Footer.tsx        | 4 ++--
 src/components/home/OxygenToolbox.tsx | 2 +-
 src/components/home/Slogan.tsx        | 2 +-
 src/main.tsx                          | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 869499d..3b7738a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import router from '@/router'
-import LoadingMask from '@/components/common/LoadingMask.tsx'
+import LoadingMask from '@/components/common/LoadingMask'
 
 const App: React.FC = () => {
     return (
diff --git a/src/components/home/Footer.tsx b/src/components/home/Footer.tsx
index 47c8f62..2200e30 100644
--- a/src/components/home/Footer.tsx
+++ b/src/components/home/Footer.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import FitCenter from '@/components/common/FitCenter.tsx'
+import FitCenter from '@/components/common/FitCenter'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/home/footer.scss'
-import FitFullScreen from '@/components/common/FitFullScreen.tsx'
+import FitFullScreen from '@/components/common/FitFullScreen'
 import { NavLink } from 'react-router-dom'
 
 const Footer: React.FC = () => {
diff --git a/src/components/home/OxygenToolbox.tsx b/src/components/home/OxygenToolbox.tsx
index 6423e3b..576bd5b 100644
--- a/src/components/home/OxygenToolbox.tsx
+++ b/src/components/home/OxygenToolbox.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import FitCenter from '@/components/common/FitCenter.tsx'
+import FitCenter from '@/components/common/FitCenter'
 
 const OxygenToolbox: React.FC = () => {
     return (
diff --git a/src/components/home/Slogan.tsx b/src/components/home/Slogan.tsx
index 0c32a6e..e0439c0 100644
--- a/src/components/home/Slogan.tsx
+++ b/src/components/home/Slogan.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/home/slogan.scss'
-import FitCenter from '@/components/common/FitCenter.tsx'
+import FitCenter from '@/components/common/FitCenter'
 
 interface SloganProps {
     onClickScrollDown: (event: React.MouseEvent) => void
diff --git a/src/main.tsx b/src/main.tsx
index e102176..0464d85 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
 import zh_CN from 'antd/locale/zh_CN'
 import '@/assets/css/base.scss'
 import '@/assets/css/common.scss'
-import App from './App.tsx'
+import App from './App'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>

From e67f9d14bf2e01ac7245b81569b037cbb5f2d6d0 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 11 Oct 2023 18:28:56 +0800
Subject: [PATCH 015/307] Optimize color in stylesheet

---
 src/assets/css/common.scss                 | 6 ++++--
 src/assets/css/components/home/footer.scss | 8 +++++---
 src/assets/css/constants.scss              | 5 ++++-
 src/assets/css/pages/home-framework.scss   | 6 +++---
 src/assets/css/pages/login.scss            | 6 ++++--
 5 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index e1716f7..650a829 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -25,8 +25,8 @@
   height: 100%;
 }
 
-.background-white {
-  background-color: white;
+.background-origin {
+  background-color: constants.$origin-color;
 }
 
 .center-box {
@@ -107,9 +107,11 @@
 }
 
 .flex-horizontal {
+  display: flex;
   flex-direction: row;
 }
 
 .flex-vertical {
+  display: flex;
   flex-direction: column;
 }
\ No newline at end of file
diff --git a/src/assets/css/components/home/footer.scss b/src/assets/css/components/home/footer.scss
index 7abf726..551c276 100644
--- a/src/assets/css/components/home/footer.scss
+++ b/src/assets/css/components/home/footer.scss
@@ -1,19 +1,21 @@
+@use "@/assets/css/constants" as constants;
+
 .icons {
   display: flex;
   gap: 20px;
 
   .icon {
     font-size: 8em;
-    color: white;
+    color: constants.$origin-color;
   }
 }
 
 .links {
   font-size: 2em;
   text-decoration: underline;
-  color: white;
+  color: constants.$origin-color;
 
   > * {
-    color: white;
+    color: constants.$origin-color;
   }
 }
\ No newline at end of file
diff --git a/src/assets/css/constants.scss b/src/assets/css/constants.scss
index edf5734..ce3b1cf 100644
--- a/src/assets/css/constants.scss
+++ b/src/assets/css/constants.scss
@@ -1,4 +1,7 @@
-$main-color: #00D4FF;
+$origin-color: white;
+$main-color: #4E47BB;
+$secondary-color: #BAB8E5;
+$active-color: #EBECFFD;
 $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;
diff --git a/src/assets/css/pages/home-framework.scss b/src/assets/css/pages/home-framework.scss
index 836974e..34717e0 100644
--- a/src/assets/css/pages/home-framework.scss
+++ b/src/assets/css/pages/home-framework.scss
@@ -8,7 +8,7 @@
   z-index: 1;
   width: 100%;
   height: 70px;
-  background-color: white;
+  background-color: constants.$origin-color;
   border: {
     bottom: {
       width: 1px;
@@ -99,7 +99,7 @@
         position: absolute;
         width: 100%;
         text-align: center;
-        background-color: white;
+        background-color: constants.$origin-color;
         overflow: hidden;
 
         .item {
@@ -171,7 +171,7 @@
       color: constants.$border-color;
       style: solid;
     };
-    background-color: white;
+    background-color: constants.$origin-color;
     z-index: 1;
 
     ul {
diff --git a/src/assets/css/pages/login.scss b/src/assets/css/pages/login.scss
index 22629a8..988f60f 100644
--- a/src/assets/css/pages/login.scss
+++ b/src/assets/css/pages/login.scss
@@ -1,3 +1,5 @@
+@use "@/assets/css/constants" as constants;
+
 .login-background {
   display: flex;
   height: 100vh;
@@ -24,7 +26,7 @@
 
 .login-box-left-text {
   font-size: 3rem;
-  color: white;
+  color: constants.$origin-color;
   font-weight: bold;
 
   > div:last-child {
@@ -37,7 +39,7 @@
   position: relative;
   height: 100%;
   flex: 3;
-  background-color: white;
+  background-color: constants.$origin-color;
 }
 
 .login-from-text {

From 9d04773266fbd78d7e4482148b2bbe821f567266 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 11 Oct 2023 18:29:23 +0800
Subject: [PATCH 016/307] Add menu in ToolsFramework

---
 src/ant-design.d.ts                       |   8 ++
 src/assets/css/pages/tools-framework.scss |  43 ++++++++
 src/{vite-env.d.ts => global.d.ts}        |   2 +
 src/pages/ToolsFramework.tsx              | 122 +++++++++++++++++++++-
 src/router/index.tsx                      |  47 +++++++++
 5 files changed, 221 insertions(+), 1 deletion(-)
 create mode 100644 src/ant-design.d.ts
 create mode 100644 src/assets/css/pages/tools-framework.scss
 rename src/{vite-env.d.ts => global.d.ts} (91%)

diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts
new file mode 100644
index 0000000..5ec575f
--- /dev/null
+++ b/src/ant-design.d.ts
@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
+
+declare global {
+    type IconComponent =
+        | React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>
+        | React.ForwardRefExoticComponent<CustomIconComponentProps>
+}
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
new file mode 100644
index 0000000..d8b6342
--- /dev/null
+++ b/src/assets/css/pages/tools-framework.scss
@@ -0,0 +1,43 @@
+@use "@/assets/css/constants" as constants;
+
+.left-panel {
+  width: 16%;
+  background-color: constants.$origin-color;
+
+  .title {
+    font-size: 2em;
+    text-align: center;
+    font-weight: bold;
+    letter-spacing: 0.6em;
+    padding: 10px;
+    color: constants.$main-color;
+  }
+
+  .content {
+    ul{
+      li {
+        //background-color: #4E47BB;
+        margin: 4px 10px;
+        padding: 4px;
+        &.item {
+          background-color: #4E47BB;
+        }
+
+        .separate {
+          height: 0;
+          border: {
+            width: 1px;
+            color: constants.$font-secondary-color;
+            style: solid;
+          };
+          opacity: 0.4;
+        }
+      }
+    }
+  }
+}
+
+.right-panel {
+  flex: 1;
+  background-color: constants.$background-color;
+}
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/global.d.ts
similarity index 91%
rename from src/vite-env.d.ts
rename to src/global.d.ts
index 1311793..aa1a600 100644
--- a/src/vite-env.d.ts
+++ b/src/global.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="./ant-design" />
 
 interface ImportMetaEnv {
     readonly VITE_API_URL: string
@@ -16,6 +17,7 @@ type RouteHandle = {
     titlePrefix?: string
     title?: string
     titlePostfix?: string
+    icon?: IconComponent
 }
 
 type _Response<T> = {
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 96c04ad..f59a243 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -1,7 +1,127 @@
 import React from 'react'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import '@/assets/css/pages/tools-framework.scss'
+import router from '@/router'
+import { NavLink } from 'react-router-dom'
+import Icon from '@ant-design/icons'
 
 const ToolsFramework: React.FC = () => {
-    return <></>
+    const frameworkRoute = useMatches()[1]
+    const routeId = frameworkRoute.id
+    const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
+
+    return (
+        <>
+            <FitFullScreen className={'flex-horizontal'}>
+                <div className={'left-panel'}>
+                    <div className={'title'}>氦工具</div>
+                    <div className={'content'}>
+                        <ul>
+                            <li className={'item'}>
+                                <NavLink
+                                    to={''}
+                                    className={({ isActive, isPending }) =>
+                                        isPending ? ' pending' : isActive ? ' active' : ''
+                                    }
+                                >
+                                    {routeChildren ? (
+                                        <>
+                                            <Icon
+                                                className={'icon'}
+                                                component={
+                                                    (routeChildren[0].handle as RouteHandle).icon
+                                                }
+                                            />
+                                            <span className={'text'}>
+                                                {(routeChildren[0].handle as RouteHandle).name}
+                                            </span>
+                                        </>
+                                    ) : (
+                                        '全部工具'
+                                    )}
+                                </NavLink>
+                                <div className={'home'}></div>
+                            </li>
+                            <li>
+                                <div className={'separate'} />
+                            </li>
+                            {routeChildren?.map((route) => {
+                                return (route.handle as RouteHandle).menu &&
+                                    route.id !== 'tools' ? (
+                                    <li className={'item'} key={route.id}>
+                                        <NavLink
+                                            to={route.path ?? ''}
+                                            className={({ isActive, isPending }) =>
+                                                isPending ? 'pending' : isActive ? 'active' : ''
+                                            }
+                                        >
+                                            <Icon
+                                                className={'icon'}
+                                                component={(route.handle as RouteHandle).icon}
+                                            />
+                                            <span className={'text'}>
+                                                {(route.handle as RouteHandle).name}
+                                            </span>
+                                        </NavLink>
+                                        {route.children ? (
+                                            <ul className={'submenu'}>
+                                                {route.children.map((subRoute) => {
+                                                    return (subRoute.handle as RouteHandle).menu ? (
+                                                        <li className={'item'} key={subRoute.id}>
+                                                            <NavLink
+                                                                to={
+                                                                    (route.path ?? '') +
+                                                                    '/' +
+                                                                    (subRoute.path ?? '')
+                                                                }
+                                                                className={({
+                                                                    isActive,
+                                                                    isPending
+                                                                }) =>
+                                                                    isPending
+                                                                        ? 'pending'
+                                                                        : isActive
+                                                                        ? 'active'
+                                                                        : ''
+                                                                }
+                                                            >
+                                                                <Icon
+                                                                    className={'icon'}
+                                                                    component={
+                                                                        (
+                                                                            subRoute.handle as RouteHandle
+                                                                        ).icon
+                                                                    }
+                                                                />
+                                                                <span className={'text'}>
+                                                                    {
+                                                                        (
+                                                                            subRoute.handle as RouteHandle
+                                                                        ).name
+                                                                    }
+                                                                </span>
+                                                            </NavLink>
+                                                        </li>
+                                                    ) : (
+                                                        <></>
+                                                    )
+                                                })}
+                                            </ul>
+                                        ) : (
+                                            <></>
+                                        )}
+                                    </li>
+                                ) : (
+                                    <></>
+                                )
+                            })}
+                        </ul>
+                    </div>
+                </div>
+                <div className={'right-panel'}></div>
+            </FitFullScreen>
+        </>
+    )
 }
 
 export default ToolsFramework
diff --git a/src/router/index.tsx b/src/router/index.tsx
index fe6967e..6c152d4 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -26,6 +26,7 @@ const routes: RouteObject[] = [
                         Component: React.lazy(() => import('@/pages/tools')),
                         handle: {
                             name: '全部工具',
+                            icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
                             menu: true,
                             auth: false
                         }
@@ -34,11 +35,57 @@ const routes: RouteObject[] = [
                         path: 'translation',
                         id: 'tools-translation',
                         Component: React.lazy(() => import('@/pages/tools/Translation')),
+                        children: [
+                            {
+                                path: '1',
+                                id: '1',
+                                handle: {
+                                    name: '翻译1',
+                                    menu: true
+                                }
+                            },
+                            {
+                                path: '2',
+                                id: '2',
+                                handle: {
+                                    name: '翻译2',
+                                    menu: true
+                                }
+                            }
+                        ],
                         handle: {
                             name: '翻译',
                             menu: true,
                             auth: true
                         }
+                    },
+                    {
+                        path: 'translation-',
+                        id: 'tools-translation-',
+                        Component: React.lazy(() => import('@/pages/tools/Translation')),
+                        children: [
+                            {
+                                path: '1-',
+                                id: '1-',
+                                handle: {
+                                    name: '翻译1-',
+                                    menu: true
+                                }
+                            },
+                            {
+                                path: '2-',
+                                id: '2-',
+                                handle: {
+                                    name: '翻译2-',
+                                    menu: true
+                                }
+                            }
+                        ],
+                        handle: {
+                            name: '翻译-',
+                            menu: true,
+                            auth: true
+                        }
                     }
                 ],
                 handle: {

From a228d27a5110151c7e842d5c0bc9fa56b25590e6 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 11 Oct 2023 18:44:06 +0800
Subject: [PATCH 017/307] Optimize stylesheet

---
 src/assets/css/pages/tools-framework.scss | 32 +++++++++++++++++++----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index d8b6342..c1214eb 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -14,13 +14,35 @@
   }
 
   .content {
-    ul{
-      li {
+    > ul {
+      > li {
         //background-color: #4E47BB;
-        margin: 4px 10px;
-        padding: 4px;
+        margin: 4px 14px;
+
         &.item {
-          background-color: #4E47BB;
+          font-size: 1.6em;
+          border-radius: 8px;
+          overflow: hidden;
+
+          :hover {
+            background-color: #4E47BB;
+          }
+        }
+
+        a {
+          display: flex;
+          padding: 8px 16px;
+          height: 100%;
+          width: 100%;
+
+          .icon {
+
+          }
+
+          .text {
+            flex: 1;
+            text-align: center;
+          }
         }
 
         .separate {

From 41b0cb6d3ee57e6255569f74bc0e8eb4931dbe88 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 12 Oct 2023 01:10:09 +0800
Subject: [PATCH 018/307] Fix auth in AuthRoute

---
 src/AuthRoute.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index 725136c..88565bc 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -13,7 +13,7 @@ const AuthRoute = () => {
         document.title = `${handle?.titlePrefix ?? ''}${
             handle?.title ? handle?.title : PRODUCTION_NAME
         }${handle?.titlePostfix ?? ''}`
-        if (handle?.auth && !isLogin) {
+        if (matches.some(({ handle }) => (handle as RouteHandle)?.auth) && !isLogin) {
             return (
                 <Navigate
                     to={`/login${

From bc82572fa83a5fea5d1b20c91237b34bd35e7937 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 12 Oct 2023 01:51:56 +0800
Subject: [PATCH 019/307] Optimize tools route. Optimize multiple menu
 stylesheet.

---
 src/assets/css/pages/tools-framework.scss |  18 +++-
 src/global.d.ts                           |  11 +++
 src/pages/ToolsFramework.tsx              |  83 +++++++++++------
 src/pages/tools/All.tsx                   |   7 ++
 src/router/index.tsx                      |  71 +--------------
 src/router/tools.tsx                      | 106 ++++++++++++++++++++++
 6 files changed, 196 insertions(+), 100 deletions(-)
 create mode 100644 src/pages/tools/All.tsx
 create mode 100644 src/router/tools.tsx

diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index c1214eb..c23a522 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -3,6 +3,7 @@
 .left-panel {
   width: 16%;
   background-color: constants.$origin-color;
+  user-select: none;
 
   .title {
     font-size: 2em;
@@ -20,12 +21,16 @@
         margin: 4px 14px;
 
         &.item {
-          font-size: 1.6em;
+          font-size: 1.4em;
           border-radius: 8px;
           overflow: hidden;
 
-          :hover {
-            background-color: #4E47BB;
+          a.active {
+            color: constants.$origin-color;
+            background-color: constants.$main-color;
+          }
+          a.pending {
+            background-color: #123213;
           }
         }
 
@@ -41,12 +46,13 @@
 
           .text {
             flex: 1;
-            text-align: center;
+            margin-left: 10px;
           }
         }
 
         .separate {
           height: 0;
+          margin: 10px 0;
           border: {
             width: 1px;
             color: constants.$font-secondary-color;
@@ -54,6 +60,10 @@
           };
           opacity: 0.4;
         }
+
+        &.item:hover {
+          background-color: constants.$background-color;
+        }
       }
     }
   }
diff --git a/src/global.d.ts b/src/global.d.ts
index aa1a600..ac9c459 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -10,6 +10,17 @@ interface ImportMeta {
     readonly env: ImportMetaEnv
 }
 
+type ToolsJsonObject = {
+    path: string
+    id: string
+    component?: React.ComponentType
+    name?: string
+    icon?: IconComponent
+    menu?: boolean
+    auth?: boolean
+    children?: ToolsJsonObject[]
+}
+
 type RouteHandle = {
     name?: string
     menu?: boolean
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index f59a243..7c2ef8b 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import '@/assets/css/pages/tools-framework.scss'
 import router from '@/router'
-import { NavLink } from 'react-router-dom'
 import Icon from '@ant-design/icons'
 
 const ToolsFramework: React.FC = () => {
@@ -14,14 +13,18 @@ const ToolsFramework: React.FC = () => {
         <>
             <FitFullScreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
-                    <div className={'title'}>氦工具</div>
+                    <div className={'title'}>氮工具</div>
                     <div className={'content'}>
                         <ul>
+                            <li>
+                                <div style={{ marginTop: '0' }} className={'separate'} />
+                            </li>
                             <li className={'item'}>
                                 <NavLink
                                     to={''}
+                                    end
                                     className={({ isActive, isPending }) =>
-                                        isPending ? ' pending' : isActive ? ' active' : ''
+                                        isPending ? 'pending' : isActive ? 'active' : ''
                                     }
                                 >
                                     {routeChildren ? (
@@ -36,29 +39,58 @@ const ToolsFramework: React.FC = () => {
                                                 {(routeChildren[0].handle as RouteHandle).name}
                                             </span>
                                         </>
+                                    ) : (
+                                        '主页'
+                                    )}
+                                </NavLink>
+                            </li>
+                            <li className={'item'}>
+                                <NavLink
+                                    to={'all'}
+                                    className={({ isActive, isPending }) =>
+                                        isPending ? ' pending' : isActive ? ' active' : ''
+                                    }
+                                >
+                                    {routeChildren ? (
+                                        <>
+                                            <Icon
+                                                className={'icon'}
+                                                component={
+                                                    (routeChildren[1].handle as RouteHandle).icon
+                                                }
+                                            />
+                                            <span className={'text'}>
+                                                {(routeChildren[1].handle as RouteHandle).name}
+                                            </span>
+                                        </>
                                     ) : (
                                         '全部工具'
                                     )}
                                 </NavLink>
-                                <div className={'home'}></div>
                             </li>
                             <li>
                                 <div className={'separate'} />
                             </li>
                             {routeChildren?.map((route) => {
                                 return (route.handle as RouteHandle).menu &&
-                                    route.id !== 'tools' ? (
-                                    <li className={'item'} key={route.id}>
+                                    route.id !== 'tools' &&
+                                    route.id !== 'tools-all' ? (
+                                    <li
+                                        className={route.children ? 'multiple-item' : 'item'}
+                                        key={route.id}
+                                    >
                                         <NavLink
                                             to={route.path ?? ''}
                                             className={({ isActive, isPending }) =>
                                                 isPending ? 'pending' : isActive ? 'active' : ''
                                             }
                                         >
-                                            <Icon
-                                                className={'icon'}
-                                                component={(route.handle as RouteHandle).icon}
-                                            />
+                                            {(route.handle as RouteHandle).icon ? (
+                                                <Icon
+                                                    className={'icon'}
+                                                    component={(route.handle as RouteHandle).icon}
+                                                />
+                                            ) : undefined}
                                             <span className={'text'}>
                                                 {(route.handle as RouteHandle).name}
                                             </span>
@@ -85,14 +117,17 @@ const ToolsFramework: React.FC = () => {
                                                                         : ''
                                                                 }
                                                             >
-                                                                <Icon
-                                                                    className={'icon'}
-                                                                    component={
-                                                                        (
-                                                                            subRoute.handle as RouteHandle
-                                                                        ).icon
-                                                                    }
-                                                                />
+                                                                {(subRoute.handle as RouteHandle)
+                                                                    .icon ? (
+                                                                    <Icon
+                                                                        className={'icon'}
+                                                                        component={
+                                                                            (
+                                                                                subRoute.handle as RouteHandle
+                                                                            ).icon
+                                                                        }
+                                                                    />
+                                                                ) : undefined}
                                                                 <span className={'text'}>
                                                                     {
                                                                         (
@@ -102,18 +137,12 @@ const ToolsFramework: React.FC = () => {
                                                                 </span>
                                                             </NavLink>
                                                         </li>
-                                                    ) : (
-                                                        <></>
-                                                    )
+                                                    ) : undefined
                                                 })}
                                             </ul>
-                                        ) : (
-                                            <></>
-                                        )}
+                                        ) : undefined}
                                     </li>
-                                ) : (
-                                    <></>
-                                )
+                                ) : undefined
                             })}
                         </ul>
                     </div>
diff --git a/src/pages/tools/All.tsx b/src/pages/tools/All.tsx
new file mode 100644
index 0000000..85e812d
--- /dev/null
+++ b/src/pages/tools/All.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const All: React.FC = () => {
+    return <></>
+}
+
+export default All
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 6c152d4..ea360d9 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import tools from '@/router/tools'
 
 const routes: RouteObject[] = [
     {
@@ -19,75 +20,7 @@ const routes: RouteObject[] = [
                 path: '/tools',
                 id: 'toolsFramework',
                 Component: React.lazy(() => import('@/pages/ToolsFramework')),
-                children: [
-                    {
-                        path: '',
-                        id: 'tools',
-                        Component: React.lazy(() => import('@/pages/tools')),
-                        handle: {
-                            name: '全部工具',
-                            icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
-                            menu: true,
-                            auth: false
-                        }
-                    },
-                    {
-                        path: 'translation',
-                        id: 'tools-translation',
-                        Component: React.lazy(() => import('@/pages/tools/Translation')),
-                        children: [
-                            {
-                                path: '1',
-                                id: '1',
-                                handle: {
-                                    name: '翻译1',
-                                    menu: true
-                                }
-                            },
-                            {
-                                path: '2',
-                                id: '2',
-                                handle: {
-                                    name: '翻译2',
-                                    menu: true
-                                }
-                            }
-                        ],
-                        handle: {
-                            name: '翻译',
-                            menu: true,
-                            auth: true
-                        }
-                    },
-                    {
-                        path: 'translation-',
-                        id: 'tools-translation-',
-                        Component: React.lazy(() => import('@/pages/tools/Translation')),
-                        children: [
-                            {
-                                path: '1-',
-                                id: '1-',
-                                handle: {
-                                    name: '翻译1-',
-                                    menu: true
-                                }
-                            },
-                            {
-                                path: '2-',
-                                id: '2-',
-                                handle: {
-                                    name: '翻译2-',
-                                    menu: true
-                                }
-                            }
-                        ],
-                        handle: {
-                            name: '翻译-',
-                            menu: true,
-                            auth: true
-                        }
-                    }
-                ],
+                children: tools,
                 handle: {
                     name: '工具',
                     title: '工具',
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
new file mode 100644
index 0000000..43ea3f6
--- /dev/null
+++ b/src/router/tools.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+
+const toolsJsonObjects: ToolsJsonObject[] = [
+    {
+        path: '',
+        id: 'tools',
+        component: React.lazy(() => import('@/pages/tools')),
+        name: '主页',
+        icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'all',
+        id: 'tools-all',
+        component: React.lazy(() => import('@/pages/tools')),
+        name: '全部工具',
+        icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation',
+        id: 'tools-translation',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false,
+        children: [
+            {
+                path: '1',
+                id: '1',
+                name: '翻译1',
+                menu: true,
+                auth: false
+            },
+            {
+                path: '2',
+                id: '2',
+                name: '翻译2',
+                menu: true,
+                auth: false
+            }
+        ]
+    },
+    {
+        path: 'translation-',
+        id: 'tools-translation-',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译-',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false,
+        children: [
+            {
+                path: '1-',
+                id: '1-',
+                name: '翻译1-',
+                menu: true,
+                auth: false
+            },
+            {
+                path: '2-',
+                id: '2-',
+                name: '翻译2-',
+                menu: true,
+                auth: false
+            }
+        ]
+    },
+    {
+        path: 'translation--',
+        id: 'tools-translation--',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    }
+]
+
+const tools: RouteObject[] = toolsJsonObjects.map((value) => ({
+    path: value.path,
+    id: value.id,
+    Component: value.component,
+    handle: {
+        name: value.name,
+        icon: value.icon,
+        menu: value.menu,
+        auth: value.auth
+    },
+    children: value.children?.map((value) => ({
+        path: value.path,
+        id: value.id,
+        Component: value.component,
+        handle: {
+            name: value.name,
+            icon: value.icon,
+            menu: value.menu,
+            auth: value.auth
+        }
+    }))
+}))
+
+export default tools

From 6a7cae831975441ffbf220bba967fd1da8fe84f2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 12 Oct 2023 16:18:24 +0800
Subject: [PATCH 020/307] Optimize submenu in ToolsFramework. Optimize code

---
 src/AuthRoute.tsx                         |   8 +-
 src/assets/css/constants.scss             |   7 +-
 src/assets/css/pages/tools-framework.scss |  88 +++++++---
 src/components/common/FitCenter.tsx       |   2 +-
 src/components/common/FitFullScreen.tsx   |   2 +-
 src/components/common/Indicator.tsx       |   2 +-
 src/global.d.ts                           |   3 +
 src/pages/HomeFramework.tsx               |  20 +--
 src/pages/ToolsFramework.tsx              | 199 ++++++++++++----------
 src/router/tools.tsx                      |  11 +-
 src/utils/common.ts                       |   6 +-
 11 files changed, 214 insertions(+), 134 deletions(-)

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index 88565bc..7335e5e 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -16,9 +16,9 @@ const AuthRoute = () => {
         if (matches.some(({ handle }) => (handle as RouteHandle)?.auth) && !isLogin) {
             return (
                 <Navigate
-                    to={`/login${
-                        '?redirect=' + encodeURIComponent(lastMatch.pathname + location.search)
-                    }`}
+                    to={`/login?redirect=${encodeURIComponent(
+                        `${lastMatch.pathname}${location.search}`
+                    )}`}
                 />
             )
         }
@@ -27,13 +27,13 @@ const AuthRoute = () => {
         }
         return outlet
     }, [
-        handle?.auth,
         handle?.title,
         handle?.titlePostfix,
         handle?.titlePrefix,
         isLogin,
         lastMatch.pathname,
         location.search,
+        matches,
         outlet
     ])
 }
diff --git a/src/assets/css/constants.scss b/src/assets/css/constants.scss
index ce3b1cf..18e8338 100644
--- a/src/assets/css/constants.scss
+++ b/src/assets/css/constants.scss
@@ -8,4 +8,9 @@ $font-secondary-color: #9E9E9E;
 $focus-color: #DDDDDD;
 $border-color: rgba(204, 204, 204, 0.33);
 $url-color: rgba(102, 102, 102, .8);
-$url-active-color: #ccc
\ No newline at end of file
+$url-active-color: #ccc;
+$SIZE_ICON_XS: 16px;
+$SIZE_ICON_SM: 20px;
+$SIZE_ICON_MD: 24px;
+$SIZE_ICON_LG: 32px;
+$SIZE_ICON_XL: 64px;
\ No newline at end of file
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index c23a522..4534112 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -1,5 +1,9 @@
 @use "@/assets/css/constants" as constants;
 
+body {
+  background-color: constants.$background-color;
+}
+
 .left-panel {
   width: 16%;
   background-color: constants.$origin-color;
@@ -17,7 +21,6 @@
   .content {
     > ul {
       > li {
-        //background-color: #4E47BB;
         margin: 4px 14px;
 
         &.item {
@@ -25,28 +28,79 @@
           border-radius: 8px;
           overflow: hidden;
 
-          a.active {
-            color: constants.$origin-color;
-            background-color: constants.$main-color;
+          .menu-bt {
+            .icon {
+              margin-right: 16px;
+            }
+
+            a {
+              display: flex;
+              padding: 8px 16px;
+              height: 100%;
+              width: 100%;
+
+              .text {
+                flex: 1;
+              }
+
+              &.active {
+                color: constants.$origin-color;
+                background-color: constants.$main-color;
+              }
+            }
           }
-          a.pending {
-            background-color: #123213;
+
+          &:hover {
+            background-color: constants.$background-color;
           }
         }
 
-        a {
-          display: flex;
-          padding: 8px 16px;
-          height: 100%;
-          width: 100%;
+        &.multiple-item {
+          font-size: 1.4em;
+          border-radius: 8px;
+          overflow: hidden;
 
-          .icon {
+          .menu-bt {
+            display: flex;
+
+            .icon-box {
+              cursor: pointer;
+              padding: 8px 16px;
+
+              .icon {
+                transition: all 0.3s ease;
+                transform: rotate(180deg);
+              }
+            }
+
+            a {
+              display: flex;
+              padding: {
+                top: 8px;
+                bottom: 8px;
+                right: 16px;
+              };
+              height: 100%;
+              width: 100%;
+
+              .text {
+                flex: 1;
+              }
+            }
+          }
+
+          .submenu {
 
           }
 
-          .text {
-            flex: 1;
-            margin-left: 10px;
+          &.show {
+            .menu-bt {
+              .icon-box {
+                .icon {
+                  transform: rotate(360deg);
+                }
+              }
+            }
           }
         }
 
@@ -60,10 +114,6 @@
           };
           opacity: 0.4;
         }
-
-        &.item:hover {
-          background-color: constants.$background-color;
-        }
       }
     }
   }
diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx
index b33d8e6..7ada721 100644
--- a/src/components/common/FitCenter.tsx
+++ b/src/components/common/FitCenter.tsx
@@ -11,7 +11,7 @@ const FitCenter: React.FC<FitCenterProps> = (props) => {
     return (
         <>
             <div
-                className={`fit-center${className ? ' ' + className : ''}${
+                className={`fit-center${className ? ` ${className}` : ''}${
                     vertical ? ' flex-vertical' : ' flex-horizontal'
                 }`}
                 {..._props}
diff --git a/src/components/common/FitFullScreen.tsx b/src/components/common/FitFullScreen.tsx
index c61515d..e7b84f9 100644
--- a/src/components/common/FitFullScreen.tsx
+++ b/src/components/common/FitFullScreen.tsx
@@ -12,7 +12,7 @@ const FitFullScreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref
     return (
         <>
             <div
-                className={`fit-fullscreen${className ? ' ' + className : ''}`}
+                className={`fit-fullscreen${className ? ` ${className}` : ''}`}
                 style={{
                     zIndex,
                     backgroundColor,
diff --git a/src/components/common/Indicator.tsx b/src/components/common/Indicator.tsx
index e234fe9..3570521 100644
--- a/src/components/common/Indicator.tsx
+++ b/src/components/common/Indicator.tsx
@@ -24,7 +24,7 @@ const Indicator: React.FC<IndicatorProps> = (props) => {
                     return (
                         <li
                             key={index}
-                            className={'item center-box' + (index === current ? ' active' : '')}
+                            className={`item center-box${index === current ? ' active' : ''}`}
                             onClick={handleClick(index)}
                         >
                             <div className={'dot'} />
diff --git a/src/global.d.ts b/src/global.d.ts
index ac9c459..e64304b 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -15,6 +15,9 @@ type ToolsJsonObject = {
     id: string
     component?: React.ComponentType
     name?: string
+    titlePrefix?: string
+    title?: string
+    titlePostfix?: string
     icon?: IconComponent
     menu?: boolean
     auth?: boolean
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index e7c93fc..d63978e 100644
--- a/src/pages/HomeFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -84,7 +84,7 @@ const HomeFramework: React.FC = () => {
             >
                 <div className={'body'}>
                     <div>
-                        <header className={'nav' + (navbarHidden ? ' hide' : '')}>
+                        <header className={`nav${navbarHidden ? ' hide' : ''}`}>
                             <a className={'logo'} href={'https://fatweb.top'}>
                                 <span className={'title'}>FatWeb</span>
                             </a>
@@ -115,11 +115,9 @@ const HomeFramework: React.FC = () => {
                                                                     key={subRoute.id}
                                                                 >
                                                                     <NavLink
-                                                                        to={
-                                                                            (route.path ?? '') +
-                                                                            '/' +
-                                                                            (subRoute.path ?? '')
-                                                                        }
+                                                                        to={`${route.path ?? ''}/${
+                                                                            subRoute.path ?? ''
+                                                                        }`}
                                                                         className={({
                                                                             isActive,
                                                                             isPending
@@ -153,9 +151,9 @@ const HomeFramework: React.FC = () => {
                                     })}
                                 </ul>
                                 <div
-                                    className={
-                                        'dropdown-menu-button' + (showDropdownMenu ? ' active' : '')
-                                    }
+                                    className={`dropdown-menu-button${
+                                        showDropdownMenu ? ' active' : ''
+                                    }`}
                                 >
                                     <Icon
                                         component={IconFatwebMenu}
@@ -165,9 +163,7 @@ const HomeFramework: React.FC = () => {
                                 </div>
                             </nav>
                         </header>
-                        <div
-                            className={'dropdown-menu-content' + (showDropdownMenu ? ' show' : '')}
-                        >
+                        <div className={`dropdown-menu-content${showDropdownMenu ? ' show' : ''}`}>
                             <ul>
                                 {routeChildren?.map((route) => {
                                     return (
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 7c2ef8b..a0dff56 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -1,13 +1,38 @@
 import React from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import '@/assets/css/pages/tools-framework.scss'
-import router from '@/router'
 import Icon from '@ant-design/icons'
+import { toolsJsonObjects } from '@/router/tools.tsx'
+import _ from 'lodash'
 
 const ToolsFramework: React.FC = () => {
-    const frameworkRoute = useMatches()[1]
-    const routeId = frameworkRoute.id
-    const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
+    const location = useLocation()
+
+    const [multipleMenuShown, setMultipleMenuShown] = useState(
+        toolsJsonObjects.map((value) => ({
+            id: value.id,
+            path: value.path,
+            shown: `${location.pathname}/`.startsWith(`/tools/${value.path}/`)
+        }))
+    )
+
+    useEffect(() => {
+        const temp = _.clone(multipleMenuShown)
+        temp.forEach((value) => {
+            value.shown = `${location.pathname}/`.startsWith(`/tools/${value.path}/`)
+        })
+        setMultipleMenuShown(temp)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [location])
+
+    const switchSubmenu = (menuId: string) => {
+        return () => {
+            const temp = _.clone(multipleMenuShown)
+            const menu = temp.find(({ id }) => id === menuId)
+            menu && (menu.shown = !menu.shown)
+            setMultipleMenuShown(temp)
+        }
+    }
 
     return (
         <>
@@ -20,92 +45,93 @@ const ToolsFramework: React.FC = () => {
                                 <div style={{ marginTop: '0' }} className={'separate'} />
                             </li>
                             <li className={'item'}>
-                                <NavLink
-                                    to={''}
-                                    end
-                                    className={({ isActive, isPending }) =>
-                                        isPending ? 'pending' : isActive ? 'active' : ''
-                                    }
-                                >
-                                    {routeChildren ? (
-                                        <>
-                                            <Icon
-                                                className={'icon'}
-                                                component={
-                                                    (routeChildren[0].handle as RouteHandle).icon
-                                                }
-                                            />
-                                            <span className={'text'}>
-                                                {(routeChildren[0].handle as RouteHandle).name}
-                                            </span>
-                                        </>
-                                    ) : (
-                                        '主页'
-                                    )}
-                                </NavLink>
+                                <div className={'menu-bt'}>
+                                    <NavLink
+                                        to={''}
+                                        end
+                                        className={({ isActive, isPending }) =>
+                                            isPending ? 'pending' : isActive ? 'active' : ''
+                                        }
+                                    >
+                                        <Icon
+                                            className={'icon'}
+                                            component={toolsJsonObjects[0].icon}
+                                        />
+                                        <span className={'text'}>{toolsJsonObjects[0].name}</span>
+                                    </NavLink>
+                                </div>
                             </li>
                             <li className={'item'}>
-                                <NavLink
-                                    to={'all'}
-                                    className={({ isActive, isPending }) =>
-                                        isPending ? ' pending' : isActive ? ' active' : ''
-                                    }
-                                >
-                                    {routeChildren ? (
-                                        <>
-                                            <Icon
-                                                className={'icon'}
-                                                component={
-                                                    (routeChildren[1].handle as RouteHandle).icon
-                                                }
-                                            />
-                                            <span className={'text'}>
-                                                {(routeChildren[1].handle as RouteHandle).name}
-                                            </span>
-                                        </>
-                                    ) : (
-                                        '全部工具'
-                                    )}
-                                </NavLink>
+                                <div className={'menu-bt'}>
+                                    <NavLink
+                                        to={'all'}
+                                        className={({ isActive, isPending }) =>
+                                            isPending ? ' pending' : isActive ? ' active' : ''
+                                        }
+                                    >
+                                        <Icon
+                                            className={'icon'}
+                                            component={toolsJsonObjects[1].icon}
+                                        />
+                                        <span className={'text'}>{toolsJsonObjects[1].name}</span>
+                                    </NavLink>
+                                </div>
                             </li>
                             <li>
                                 <div className={'separate'} />
                             </li>
-                            {routeChildren?.map((route) => {
-                                return (route.handle as RouteHandle).menu &&
-                                    route.id !== 'tools' &&
-                                    route.id !== 'tools-all' ? (
+                            {toolsJsonObjects.map((tool) => {
+                                return tool.menu &&
+                                    tool.id !== 'tools' &&
+                                    tool.id !== 'tools-all' ? (
                                     <li
-                                        className={route.children ? 'multiple-item' : 'item'}
-                                        key={route.id}
+                                        className={
+                                            tool.children
+                                                ? `multiple-item${
+                                                      multipleMenuShown.find(
+                                                          ({ id }) => id === tool.id
+                                                      )?.shown ?? false
+                                                          ? ' show'
+                                                          : ''
+                                                  }`
+                                                : 'item'
+                                        }
+                                        key={tool.id}
                                     >
-                                        <NavLink
-                                            to={route.path ?? ''}
-                                            className={({ isActive, isPending }) =>
-                                                isPending ? 'pending' : isActive ? 'active' : ''
-                                            }
-                                        >
-                                            {(route.handle as RouteHandle).icon ? (
-                                                <Icon
-                                                    className={'icon'}
-                                                    component={(route.handle as RouteHandle).icon}
-                                                />
+                                        <div className={'menu-bt'}>
+                                            {tool.children ? (
+                                                <div
+                                                    className={'icon-box'}
+                                                    onClick={switchSubmenu(tool.id)}
+                                                >
+                                                    <Icon
+                                                        className={'icon'}
+                                                        component={IconFatwebDown}
+                                                    />
+                                                </div>
                                             ) : undefined}
-                                            <span className={'text'}>
-                                                {(route.handle as RouteHandle).name}
-                                            </span>
-                                        </NavLink>
-                                        {route.children ? (
+                                            <NavLink
+                                                to={tool.path}
+                                                className={({ isActive, isPending }) =>
+                                                    isPending ? 'pending' : isActive ? 'active' : ''
+                                                }
+                                            >
+                                                {tool.children ? undefined : tool.icon ? (
+                                                    <Icon
+                                                        className={'icon'}
+                                                        component={tool.icon}
+                                                    />
+                                                ) : undefined}
+                                                <span className={'text'}>{tool.name}</span>
+                                            </NavLink>
+                                        </div>
+                                        {tool.children ? (
                                             <ul className={'submenu'}>
-                                                {route.children.map((subRoute) => {
-                                                    return (subRoute.handle as RouteHandle).menu ? (
-                                                        <li className={'item'} key={subRoute.id}>
+                                                {tool.children.map((subTool) => {
+                                                    return subTool.menu ? (
+                                                        <li className={'item'} key={subTool.id}>
                                                             <NavLink
-                                                                to={
-                                                                    (route.path ?? '') +
-                                                                    '/' +
-                                                                    (subRoute.path ?? '')
-                                                                }
+                                                                to={`${tool.path}/${subTool.path}`}
                                                                 className={({
                                                                     isActive,
                                                                     isPending
@@ -117,23 +143,14 @@ const ToolsFramework: React.FC = () => {
                                                                         : ''
                                                                 }
                                                             >
-                                                                {(subRoute.handle as RouteHandle)
-                                                                    .icon ? (
+                                                                {subTool.icon ? (
                                                                     <Icon
                                                                         className={'icon'}
-                                                                        component={
-                                                                            (
-                                                                                subRoute.handle as RouteHandle
-                                                                            ).icon
-                                                                        }
+                                                                        component={subTool.icon}
                                                                     />
                                                                 ) : undefined}
                                                                 <span className={'text'}>
-                                                                    {
-                                                                        (
-                                                                            subRoute.handle as RouteHandle
-                                                                        ).name
-                                                                    }
+                                                                    {subTool.name}
                                                                 </span>
                                                             </NavLink>
                                                         </li>
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 43ea3f6..5c675d2 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 
-const toolsJsonObjects: ToolsJsonObject[] = [
+const defaultTitle = '氮工具'
+
+export const toolsJsonObjects: ToolsJsonObject[] = [
     {
         path: '',
         id: 'tools',
@@ -15,6 +17,7 @@ const toolsJsonObjects: ToolsJsonObject[] = [
         id: 'tools-all',
         component: React.lazy(() => import('@/pages/tools')),
         name: '全部工具',
+        titlePostfix: ' - 全部工具',
         icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
         menu: true,
         auth: false
@@ -86,6 +89,9 @@ const tools: RouteObject[] = toolsJsonObjects.map((value) => ({
     Component: value.component,
     handle: {
         name: value.name,
+        titlePrefix: value.titlePrefix,
+        title: value.title ?? defaultTitle,
+        titlePostfix: value.titlePostfix,
         icon: value.icon,
         menu: value.menu,
         auth: value.auth
@@ -96,6 +102,9 @@ const tools: RouteObject[] = toolsJsonObjects.map((value) => ({
         Component: value.component,
         handle: {
             name: value.name,
+            titlePrefix: value.titlePrefix,
+            title: value.title ?? defaultTitle,
+            titlePostfix: value.titlePostfix,
             icon: value.icon,
             menu: value.menu,
             auth: value.auth
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 96f1784..7d0f9ce 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -18,14 +18,14 @@ export function setCookie(
     daysToLive: number | null,
     path: string | null
 ): void {
-    let cookie = name + '=' + encodeURIComponent(value)
+    let cookie = `${name}=${encodeURIComponent(value)}`
 
     if (typeof daysToLive === 'number') {
         cookie = `${cookie}; max-age=${daysToLive * 24 * 60 * 60}`
     }
 
     if (typeof path === 'string') {
-        cookie += '; path=' + path
+        cookie = `${cookie}; path=${path}`
     }
 
     document.cookie = cookie
@@ -61,7 +61,7 @@ export function getToken(): string | null {
 }
 
 export function removeCookie(name: string): void {
-    document.cookie = name + '=; max-age=0'
+    document.cookie = `${name}=; max-age=0`
 }
 
 export function removeLocalStorage(name: string): void {

From ac3c1dbc2c460e59bdcf916eb3e7fd37a89a1f00 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 12 Oct 2023 18:34:14 +0800
Subject: [PATCH 021/307] Optimize submenu in ToolsFramework

---
 .../css/components/common/hide-scrollbar.scss |   1 -
 src/assets/css/pages/tools-framework.scss     | 118 ++++----
 src/components/common/HideScrollbar.tsx       |   9 +-
 src/pages/HomeFramework.tsx                   |   1 +
 src/pages/ToolsFramework.tsx                  | 267 ++++++++----------
 src/router/tools.tsx                          | 182 +++++++++++-
 6 files changed, 367 insertions(+), 211 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 799a993..5a9f7c9 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -14,7 +14,6 @@
     .hide-scrollbar-content {
       display: inline-block;
       width: 100%;
-      min-width: 900px;
     }
   }
 
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 4534112..e9a54d0 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -1,4 +1,5 @@
 @use "@/assets/css/constants" as constants;
+@use "@/assets/css/mixins" as mixins;
 
 body {
   background-color: constants.$background-color;
@@ -21,16 +22,24 @@ body {
   .content {
     > ul {
       > li {
-        margin: 4px 14px;
 
         &.item {
+          position: relative;
+          margin: 4px 14px;
           font-size: 1.4em;
-          border-radius: 8px;
-          overflow: hidden;
 
           .menu-bt {
-            .icon {
-              margin-right: 16px;
+            border-radius: 8px;
+            overflow: hidden;
+
+            .icon-box {
+              cursor: pointer;
+              width: 26px;
+              height: 26px;
+
+              .icon {
+                margin-right: 16px;
+              }
             }
 
             a {
@@ -38,6 +47,7 @@ body {
               padding: 8px 16px;
               height: 100%;
               width: 100%;
+              transition: all 0.2s;
 
               .text {
                 flex: 1;
@@ -50,54 +60,60 @@ body {
             }
           }
 
+          .submenu {
+            display: none;
+            position: fixed;
+            padding-left: 20px;
+            left: 100%;
+            top: 0;
+
+            .content {
+              display: flex;
+              flex-direction: column;
+              gap: 2px;
+              padding: 10px 10px;
+              background-color: constants.$origin-color;
+              border-radius: 8px;
+
+              .item {
+                border-radius: 8px;
+                white-space: nowrap;
+                overflow: hidden;
+
+                a {
+                  display: block;
+                  padding: 8px 16px;
+                  transition: all 0.2s;
+
+                  &.active {
+                    color: constants.$origin-color;
+                    background-color: constants.$main-color !important;
+                  }
+                }
+
+                &:hover a {
+                  background-color: constants.$background-color;
+                }
+              }
+            }
+          }
+
           &:hover {
             background-color: constants.$background-color;
-          }
-        }
 
-        &.multiple-item {
-          font-size: 1.4em;
-          border-radius: 8px;
-          overflow: hidden;
-
-          .menu-bt {
-            display: flex;
-
-            .icon-box {
-              cursor: pointer;
-              padding: 8px 16px;
-
-              .icon {
-                transition: all 0.3s ease;
-                transform: rotate(180deg);
-              }
-            }
-
-            a {
-              display: flex;
-              padding: {
-                top: 8px;
-                bottom: 8px;
-                right: 16px;
-              };
-              height: 100%;
-              width: 100%;
-
-              .text {
-                flex: 1;
-              }
-            }
-          }
-
-          .submenu {
-
-          }
-
-          &.show {
-            .menu-bt {
-              .icon-box {
-                .icon {
-                  transform: rotate(360deg);
+            .submenu {
+              display: block;
+              animation: 0.3s ease;
+              @include mixins.unique-keyframes {
+                0% {
+                  display: block;
+                  transform: translateX(-10px);
+                  opacity: 0;
+                }
+                100% {
+                  display: block;
+                  transform: translateX(0);
+                  opacity: 1;
                 }
               }
             }
@@ -106,7 +122,7 @@ body {
 
         .separate {
           height: 0;
-          margin: 10px 0;
+          margin: 10px 5px;
           border: {
             width: 1px;
             color: constants.$font-secondary-color;
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index de3a10a..ab6d9cf 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -10,6 +10,7 @@ interface HideScrollbarProps
     isHiddenVerticalScrollbarWhenFull?: boolean
     isShowHorizontalScrollbar?: boolean
     isHiddenHorizontalScrollbarWhenFull?: boolean
+    minWidth?: string | number
 }
 
 export interface HideScrollbarElement {
@@ -138,7 +139,6 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
     const lastScrollbarClickPositionRef = useRef({ x: -1, y: -1 })
     const lastScrollbarTouchPositionRef = useRef({ x: -1, y: -1 })
     const lastTouchPositionRef = useRef({ x: -1, y: -1 })
-    const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
     const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
     const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
     const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false)
@@ -157,6 +157,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         isHiddenVerticalScrollbarWhenFull,
         isShowHorizontalScrollbar,
         isHiddenHorizontalScrollbarWhenFull,
+        minWidth,
         ..._props
     } = props
 
@@ -365,9 +366,6 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
 
     useEffect(() => {
         const windowResizeListener = () => {
-            setVerticalScrollbarWidth(
-                (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
-            )
             setHorizontalScrollbarWidth(
                 (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
             )
@@ -457,7 +455,6 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     className={'hide-scrollbar-selection'}
                     tabIndex={0}
                     style={{
-                        width: `calc(100vw + ${verticalScrollbarWidth}px)`,
                         height: `calc(100vh + ${horizontalScrollbarWidth}px)`,
                         touchAction: isPreventAnyScroll ? 'none' : '',
                         msTouchAction: isPreventAnyScroll ? 'none' : ''
@@ -469,7 +466,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     onTouchMove={isPreventAnyScroll ? handleDefaultTouchmove : undefined}
                     onScroll={handleDefaultScroll}
                 >
-                    <div className={'hide-scrollbar-content'} ref={contentRef}>
+                    <div className={'hide-scrollbar-content'} ref={contentRef} style={{ minWidth }}>
                         {props.children}
                     </div>
                 </div>
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index d63978e..56993c1 100644
--- a/src/pages/HomeFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -81,6 +81,7 @@ const HomeFramework: React.FC = () => {
                 ref={hideScrollbarRef}
                 isPreventVerticalScroll={preventScroll}
                 isShowHorizontalScrollbar={true}
+                minWidth={'900px'}
             >
                 <div className={'body'}>
                     <div>
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index a0dff56..941d44d 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -3,166 +3,129 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import '@/assets/css/pages/tools-framework.scss'
 import Icon from '@ant-design/icons'
 import { toolsJsonObjects } from '@/router/tools.tsx'
-import _ from 'lodash'
+import HideScrollbar from '@/components/common/HideScrollbar.tsx'
 
 const ToolsFramework: React.FC = () => {
-    const location = useLocation()
-
-    const [multipleMenuShown, setMultipleMenuShown] = useState(
-        toolsJsonObjects.map((value) => ({
-            id: value.id,
-            path: value.path,
-            shown: `${location.pathname}/`.startsWith(`/tools/${value.path}/`)
-        }))
-    )
-
-    useEffect(() => {
-        const temp = _.clone(multipleMenuShown)
-        temp.forEach((value) => {
-            value.shown = `${location.pathname}/`.startsWith(`/tools/${value.path}/`)
-        })
-        setMultipleMenuShown(temp)
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location])
-
-    const switchSubmenu = (menuId: string) => {
-        return () => {
-            const temp = _.clone(multipleMenuShown)
-            const menu = temp.find(({ id }) => id === menuId)
-            menu && (menu.shown = !menu.shown)
-            setMultipleMenuShown(temp)
-        }
-    }
-
     return (
         <>
             <FitFullScreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
-                    <div className={'title'}>氮工具</div>
-                    <div className={'content'}>
-                        <ul>
-                            <li>
-                                <div style={{ marginTop: '0' }} className={'separate'} />
-                            </li>
-                            <li className={'item'}>
-                                <div className={'menu-bt'}>
-                                    <NavLink
-                                        to={''}
-                                        end
-                                        className={({ isActive, isPending }) =>
-                                            isPending ? 'pending' : isActive ? 'active' : ''
-                                        }
-                                    >
-                                        <Icon
-                                            className={'icon'}
-                                            component={toolsJsonObjects[0].icon}
-                                        />
-                                        <span className={'text'}>{toolsJsonObjects[0].name}</span>
-                                    </NavLink>
-                                </div>
-                            </li>
-                            <li className={'item'}>
-                                <div className={'menu-bt'}>
-                                    <NavLink
-                                        to={'all'}
-                                        className={({ isActive, isPending }) =>
-                                            isPending ? ' pending' : isActive ? ' active' : ''
-                                        }
-                                    >
-                                        <Icon
-                                            className={'icon'}
-                                            component={toolsJsonObjects[1].icon}
-                                        />
-                                        <span className={'text'}>{toolsJsonObjects[1].name}</span>
-                                    </NavLink>
-                                </div>
-                            </li>
-                            <li>
-                                <div className={'separate'} />
-                            </li>
-                            {toolsJsonObjects.map((tool) => {
-                                return tool.menu &&
-                                    tool.id !== 'tools' &&
-                                    tool.id !== 'tools-all' ? (
-                                    <li
-                                        className={
-                                            tool.children
-                                                ? `multiple-item${
-                                                      multipleMenuShown.find(
-                                                          ({ id }) => id === tool.id
-                                                      )?.shown ?? false
-                                                          ? ' show'
-                                                          : ''
-                                                  }`
-                                                : 'item'
-                                        }
-                                        key={tool.id}
-                                    >
-                                        <div className={'menu-bt'}>
-                                            {tool.children ? (
-                                                <div
-                                                    className={'icon-box'}
-                                                    onClick={switchSubmenu(tool.id)}
+                    <HideScrollbar>
+                        <div className={'title'}>氮工具</div>
+                        <div className={'content'}>
+                            <ul>
+                                <li>
+                                    <div style={{ marginTop: '0' }} className={'separate'} />
+                                </li>
+                                <li className={'item'}>
+                                    <div className={'menu-bt'}>
+                                        <NavLink
+                                            to={''}
+                                            end
+                                            className={({ isActive, isPending }) =>
+                                                isPending ? 'pending' : isActive ? 'active' : ''
+                                            }
+                                        >
+                                            <div className={'icon-box'}>
+                                                <Icon
+                                                    className={'icon'}
+                                                    component={toolsJsonObjects[0].icon}
+                                                />
+                                            </div>
+                                            <span className={'text'}>
+                                                {toolsJsonObjects[0].name}
+                                            </span>
+                                        </NavLink>
+                                    </div>
+                                </li>
+                                <li className={'item'}>
+                                    <div className={'menu-bt'}>
+                                        <NavLink
+                                            to={'all'}
+                                            className={({ isActive, isPending }) =>
+                                                isPending ? ' pending' : isActive ? ' active' : ''
+                                            }
+                                        >
+                                            <div className={'icon-box'}>
+                                                <Icon
+                                                    className={'icon'}
+                                                    component={toolsJsonObjects[1].icon}
+                                                />
+                                            </div>
+                                            <span className={'text'}>
+                                                {toolsJsonObjects[1].name}
+                                            </span>
+                                        </NavLink>
+                                    </div>
+                                </li>
+                                <li>
+                                    <div className={'separate'} />
+                                </li>
+                                {toolsJsonObjects.map((tool) => {
+                                    return tool.menu &&
+                                        tool.id !== 'tools' &&
+                                        tool.id !== 'tools-all' ? (
+                                        <li className={'item'} key={tool.id}>
+                                            <div className={'menu-bt'}>
+                                                <NavLink
+                                                    to={tool.path}
+                                                    className={({ isActive, isPending }) =>
+                                                        isPending
+                                                            ? 'pending'
+                                                            : isActive
+                                                            ? 'active'
+                                                            : ''
+                                                    }
                                                 >
-                                                    <Icon
-                                                        className={'icon'}
-                                                        component={IconFatwebDown}
-                                                    />
-                                                </div>
+                                                    <div className={'icon-box'}>
+                                                        {tool.icon ? (
+                                                            <Icon
+                                                                className={'icon'}
+                                                                component={tool.icon}
+                                                            />
+                                                        ) : undefined}
+                                                    </div>
+                                                    <span className={'text'}>{tool.name}</span>
+                                                </NavLink>
+                                            </div>
+                                            {tool.children ? (
+                                                <ul className={'submenu'}>
+                                                    <div className={'content'}>
+                                                        {tool.children.map((subTool) => {
+                                                            return subTool.menu ? (
+                                                                <li
+                                                                    className={'item'}
+                                                                    key={subTool.id}
+                                                                >
+                                                                    <NavLink
+                                                                        to={`${tool.path}/${subTool.path}`}
+                                                                        className={({
+                                                                            isActive,
+                                                                            isPending
+                                                                        }) =>
+                                                                            isPending
+                                                                                ? 'pending'
+                                                                                : isActive
+                                                                                ? 'active'
+                                                                                : ''
+                                                                        }
+                                                                    >
+                                                                        <span className={'text'}>
+                                                                            {subTool.name}
+                                                                        </span>
+                                                                    </NavLink>
+                                                                </li>
+                                                            ) : undefined
+                                                        })}
+                                                    </div>
+                                                </ul>
                                             ) : undefined}
-                                            <NavLink
-                                                to={tool.path}
-                                                className={({ isActive, isPending }) =>
-                                                    isPending ? 'pending' : isActive ? 'active' : ''
-                                                }
-                                            >
-                                                {tool.children ? undefined : tool.icon ? (
-                                                    <Icon
-                                                        className={'icon'}
-                                                        component={tool.icon}
-                                                    />
-                                                ) : undefined}
-                                                <span className={'text'}>{tool.name}</span>
-                                            </NavLink>
-                                        </div>
-                                        {tool.children ? (
-                                            <ul className={'submenu'}>
-                                                {tool.children.map((subTool) => {
-                                                    return subTool.menu ? (
-                                                        <li className={'item'} key={subTool.id}>
-                                                            <NavLink
-                                                                to={`${tool.path}/${subTool.path}`}
-                                                                className={({
-                                                                    isActive,
-                                                                    isPending
-                                                                }) =>
-                                                                    isPending
-                                                                        ? 'pending'
-                                                                        : isActive
-                                                                        ? 'active'
-                                                                        : ''
-                                                                }
-                                                            >
-                                                                {subTool.icon ? (
-                                                                    <Icon
-                                                                        className={'icon'}
-                                                                        component={subTool.icon}
-                                                                    />
-                                                                ) : undefined}
-                                                                <span className={'text'}>
-                                                                    {subTool.name}
-                                                                </span>
-                                                            </NavLink>
-                                                        </li>
-                                                    ) : undefined
-                                                })}
-                                            </ul>
-                                        ) : undefined}
-                                    </li>
-                                ) : undefined
-                            })}
-                        </ul>
-                    </div>
+                                        </li>
+                                    ) : undefined
+                                })}
+                            </ul>
+                        </div>
+                    </HideScrollbar>
                 </div>
                 <div className={'right-panel'}></div>
             </FitFullScreen>
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 5c675d2..e87043f 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -8,7 +8,6 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
         id: 'tools',
         component: React.lazy(() => import('@/pages/tools')),
         name: '主页',
-        icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
         menu: true,
         auth: false
     },
@@ -35,6 +34,7 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
                 path: '1',
                 id: '1',
                 name: '翻译1',
+                icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
                 menu: true,
                 auth: false
             },
@@ -80,6 +80,186 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
         icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
         menu: true,
         auth: false
+    },
+    {
+        path: 'translation--1',
+        id: 'tools-translation--1',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--1',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--2',
+        id: 'tools-translation--2',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--2',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--3',
+        id: 'tools-translation--3',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--3',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--4',
+        id: 'tools-translation--4',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--4',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--5',
+        id: 'tools-translation--5',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--5',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--6',
+        id: 'tools-translation--6',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--6',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--7',
+        id: 'tools-translation--7',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--7',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--8',
+        id: 'tools-translation--8',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--8',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--9',
+        id: 'tools-translation--9',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--9',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--10',
+        id: 'tools-translation--10',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--10',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--1-',
+        id: 'tools-translation--1-',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--1-',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--2-',
+        id: 'tools-translation--2-',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--2-',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--3-',
+        id: 'tools-translation--3-',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--3-',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--4-',
+        id: 'tools-translation--4-',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--4-',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--5-',
+        id: 'tools-translation--5-',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--5-',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--6-',
+        id: 'tools-translation--6-',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--6-',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--7-',
+        id: 'tools-translation--7-',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--7-',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--8-',
+        id: 'tools-translation--8-',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--8-',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--9-',
+        id: 'tools-translation--9-',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--9-',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'translation--10-',
+        id: 'tools-translation--10-',
+        component: React.lazy(() => import('@/pages/tools/Translation')),
+        name: '翻译--10-',
+        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        menu: true,
+        auth: false
     }
 ]
 

From 36b5acfea9425526a89d8cba12ca1c4f3a1af6a9 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 12 Oct 2023 23:26:10 +0800
Subject: [PATCH 022/307] Fix HideScrollbar

---
 src/components/common/HideScrollbar.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index ab6d9cf..8ffa513 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -139,6 +139,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
     const lastScrollbarClickPositionRef = useRef({ x: -1, y: -1 })
     const lastScrollbarTouchPositionRef = useRef({ x: -1, y: -1 })
     const lastTouchPositionRef = useRef({ x: -1, y: -1 })
+    const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
     const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
     const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
     const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false)
@@ -366,6 +367,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
 
     useEffect(() => {
         const windowResizeListener = () => {
+            setVerticalScrollbarWidth(
+                (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
+            )
             setHorizontalScrollbarWidth(
                 (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
             )
@@ -455,6 +459,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     className={'hide-scrollbar-selection'}
                     tabIndex={0}
                     style={{
+                        width: `calc(100vw + ${verticalScrollbarWidth}px)`,
                         height: `calc(100vh + ${horizontalScrollbarWidth}px)`,
                         touchAction: isPreventAnyScroll ? 'none' : '',
                         msTouchAction: isPreventAnyScroll ? 'none' : ''

From 1c05de7f20b77ca49db01b44a8ba2baff1b39db4 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 12 Oct 2023 23:27:21 +0800
Subject: [PATCH 023/307] Temp

---
 .../css/components/common/hide-scrollbar.scss |  4 ---
 src/assets/css/pages/tools-framework.scss     | 35 +++++++++++--------
 src/pages/ToolsFramework.tsx                  | 10 +++---
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 5a9f7c9..df0b567 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -17,10 +17,6 @@
     }
   }
 
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
   .scrollbar {
     position: absolute;
     z-index: 1000;
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index e9a54d0..9fbb602 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -6,10 +6,16 @@ body {
 }
 
 .left-panel {
+  display: flex;
+  flex-direction: column;
   width: 16%;
   background-color: constants.$origin-color;
   user-select: none;
 
+  .hide-scrollbar-selection {
+    height: 100% !important;
+  }
+
   .title {
     font-size: 2em;
     text-align: center;
@@ -61,8 +67,8 @@ body {
           }
 
           .submenu {
-            display: none;
-            position: fixed;
+            display: block;
+            position: absolute;
             padding-left: 20px;
             left: 100%;
             top: 0;
@@ -99,7 +105,9 @@ body {
           }
 
           &:hover {
-            background-color: constants.$background-color;
+            a {
+              background-color: constants.$background-color;
+            }
 
             .submenu {
               display: block;
@@ -119,20 +127,19 @@ body {
             }
           }
         }
-
-        .separate {
-          height: 0;
-          margin: 10px 5px;
-          border: {
-            width: 1px;
-            color: constants.$font-secondary-color;
-            style: solid;
-          };
-          opacity: 0.4;
-        }
       }
     }
   }
+  .separate {
+    height: 0;
+    margin: 10px 5px;
+    border: {
+      width: 1px;
+      color: constants.$font-secondary-color;
+      style: solid;
+    };
+    opacity: 0.4;
+  }
 }
 
 .right-panel {
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 941d44d..4cd80cf 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -10,13 +10,11 @@ const ToolsFramework: React.FC = () => {
         <>
             <FitFullScreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
-                    <HideScrollbar>
-                        <div className={'title'}>氮工具</div>
+                    <div className={'title'}>氮工具</div>
+                    <div style={{ marginTop: '0' }} className={'separate'} />
+                    <HideScrollbar isShowVerticalScrollbar={true} isShowHorizontalScrollbar={true}>
                         <div className={'content'}>
                             <ul>
-                                <li>
-                                    <div style={{ marginTop: '0' }} className={'separate'} />
-                                </li>
                                 <li className={'item'}>
                                     <div className={'menu-bt'}>
                                         <NavLink
@@ -126,6 +124,8 @@ const ToolsFramework: React.FC = () => {
                             </ul>
                         </div>
                     </HideScrollbar>
+
+                    <div className={'title'}>氮工具</div>
                 </div>
                 <div className={'right-panel'}></div>
             </FitFullScreen>

From a8129e8afff86c3d36c5c211e97174a6a4b6743a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 11:14:24 +0800
Subject: [PATCH 024/307] Optimize HideScrollbar

---
 .../css/components/common/hide-scrollbar.scss  |  7 +++++--
 src/components/common/HideScrollbar.tsx        | 18 ++++++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index df0b567..1d604dc 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -1,6 +1,7 @@
 @use '@/assets/css/constants' as constants;
 
 .hide-scrollbar-mask {
+  position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -49,8 +50,9 @@
     padding: 12px 4px;
     width: 16px;
     height: 100%;
-    right: 0;
+    left: 100%;
     top: 0;
+    transform: translateX(-100%);
   }
 
   .horizontal-scrollbar {
@@ -58,6 +60,7 @@
     width: 100%;
     height: 16px;
     left: 0;
-    bottom: 0;
+    top: 100%;
+    transform: translateY(-100%);
   }
 }
\ No newline at end of file
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 8ffa513..44e158f 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -459,8 +459,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     className={'hide-scrollbar-selection'}
                     tabIndex={0}
                     style={{
-                        width: `calc(100vw + ${verticalScrollbarWidth}px)`,
-                        height: `calc(100vh + ${horizontalScrollbarWidth}px)`,
+                        width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
+                        height: `calc(${maskRef.current?.clientHeight}px + ${horizontalScrollbarWidth}px)`,
                         touchAction: isPreventAnyScroll ? 'none' : '',
                         msTouchAction: isPreventAnyScroll ? 'none' : ''
                     }}
@@ -482,6 +482,13 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                             verticalScrollbarLength === 100)
                     }
                     className={'scrollbar vertical-scrollbar'}
+                    style={{
+                        height: maskRef.current ? maskRef.current?.clientHeight - 1 : undefined,
+                        top: maskRef.current?.clientTop,
+                        left: maskRef.current
+                            ? maskRef.current?.clientLeft + maskRef.current?.clientWidth - 1
+                            : undefined
+                    }}
                 >
                     <div className={'box'}>
                         <div
@@ -512,6 +519,13 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                             horizontalScrollbarLength === 100)
                     }
                     className={'scrollbar horizontal-scrollbar'}
+                    style={{
+                        width: maskRef.current ? maskRef.current?.clientWidth - 1 : undefined,
+                        left: maskRef.current?.clientLeft,
+                        top: maskRef.current
+                            ? maskRef.current?.clientTop + maskRef.current?.clientHeight - 1
+                            : undefined
+                    }}
                 >
                     <div className={'box'}>
                         <div

From 91d548078018d72d714b83a45f0502b1d1adfb9c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 11:33:14 +0800
Subject: [PATCH 025/307] Add scrollbar width setting to HideScrollbar

---
 .../css/components/common/hide-scrollbar.scss      | 10 ++++++++--
 src/components/common/HideScrollbar.tsx            | 14 +++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 1d604dc..780168a 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -48,19 +48,25 @@
 
   .vertical-scrollbar {
     padding: 12px 4px;
-    width: 16px;
     height: 100%;
     left: 100%;
     top: 0;
     transform: translateX(-100%);
+
+    .box {
+      width: 8px;
+    }
   }
 
   .horizontal-scrollbar {
     padding: 4px 12px;
     width: 100%;
-    height: 16px;
     left: 0;
     top: 100%;
     transform: translateY(-100%);
+
+    .box {
+      height: 8px;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 44e158f..2cf3b8f 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -11,6 +11,8 @@ interface HideScrollbarProps
     isShowHorizontalScrollbar?: boolean
     isHiddenHorizontalScrollbarWhenFull?: boolean
     minWidth?: string | number
+    minHeight?: string | number
+    scrollbarWidth?: string | number
 }
 
 export interface HideScrollbarElement {
@@ -159,6 +161,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         isShowHorizontalScrollbar,
         isHiddenHorizontalScrollbarWhenFull,
         minWidth,
+        minHeight,
+        scrollbarWidth,
         ..._props
     } = props
 
@@ -471,7 +475,11 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     onTouchMove={isPreventAnyScroll ? handleDefaultTouchmove : undefined}
                     onScroll={handleDefaultScroll}
                 >
-                    <div className={'hide-scrollbar-content'} ref={contentRef} style={{ minWidth }}>
+                    <div
+                        className={'hide-scrollbar-content'}
+                        ref={contentRef}
+                        style={{ minWidth, minHeight }}
+                    >
                         {props.children}
                     </div>
                 </div>
@@ -490,7 +498,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                             : undefined
                     }}
                 >
-                    <div className={'box'}>
+                    <div className={'box'} style={{ width: scrollbarWidth }}>
                         <div
                             className={'block'}
                             style={{
@@ -527,7 +535,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                             : undefined
                     }}
                 >
-                    <div className={'box'}>
+                    <div className={'box'} style={{ height: scrollbarWidth }}>
                         <div
                             className={'block'}
                             style={{

From dc667faa0b4071893570a566bf34ed96e8353554 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 15:34:22 +0800
Subject: [PATCH 026/307] Optimize submenu in ToolsFramework

---
 .../css/components/common/hide-scrollbar.scss |   4 +
 src/assets/css/pages/tools-framework.scss     |  35 ++-
 src/pages/ToolsFramework.tsx                  | 254 ++++++++++--------
 src/router/tools.tsx                          |  18 +-
 4 files changed, 187 insertions(+), 124 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 780168a..2cf545e 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -18,6 +18,10 @@
     }
   }
 
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
   .scrollbar {
     position: absolute;
     z-index: 1000;
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 9fbb602..d0ba705 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -12,10 +12,6 @@ body {
   background-color: constants.$origin-color;
   user-select: none;
 
-  .hide-scrollbar-selection {
-    height: 100% !important;
-  }
-
   .title {
     font-size: 2em;
     text-align: center;
@@ -26,9 +22,20 @@ body {
   }
 
   .content {
-    > ul {
-      > li {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
 
+    .toolsMenu {
+      min-height: 0;
+
+      .hide-scrollbar-mask {
+        flex: 1;
+      }
+    }
+
+    ul {
+      > li {
         &.item {
           position: relative;
           margin: 4px 14px;
@@ -61,17 +68,16 @@ body {
 
               &.active {
                 color: constants.$origin-color;
-                background-color: constants.$main-color;
+                background-color: constants.$main-color !important;
               }
             }
           }
 
           .submenu {
-            display: block;
-            position: absolute;
+            display: none;
+            position: fixed;
             padding-left: 20px;
-            left: 100%;
-            top: 0;
+            z-index: 10000;
 
             .content {
               display: flex;
@@ -105,8 +111,10 @@ body {
           }
 
           &:hover {
-            a {
-              background-color: constants.$background-color;
+            .menu-bt {
+              a {
+                background-color: constants.$background-color;
+              }
             }
 
             .submenu {
@@ -130,6 +138,7 @@ body {
       }
     }
   }
+
   .separate {
     height: 0;
     margin: 10px 5px;
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 4cd80cf..d69d129 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -6,125 +6,159 @@ import { toolsJsonObjects } from '@/router/tools.tsx'
 import HideScrollbar from '@/components/common/HideScrollbar.tsx'
 
 const ToolsFramework: React.FC = () => {
+    const [submenuTop, setSubmenuTop] = useState(0)
+    const [submenuLeft, setSubmenuLeft] = useState(0)
+
+    const showSubmenu = (e: React.MouseEvent) => {
+        const parentElement = e.currentTarget.parentElement
+        if (parentElement && parentElement.childElementCount === 2) {
+            const parentClientRect = parentElement.getBoundingClientRect()
+            if (parentClientRect.top <= screen.height / 2) {
+                setSubmenuTop(parentClientRect.top)
+            } else {
+                setSubmenuTop(
+                    parentClientRect.top -
+                        (parentElement.lastElementChild?.clientHeight ?? 0) +
+                        e.currentTarget.clientHeight
+                )
+            }
+            setSubmenuLeft(parentClientRect.right)
+        }
+    }
+
     return (
         <>
             <FitFullScreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <div className={'title'}>氮工具</div>
                     <div style={{ marginTop: '0' }} className={'separate'} />
-                    <HideScrollbar isShowVerticalScrollbar={true} isShowHorizontalScrollbar={true}>
-                        <div className={'content'}>
-                            <ul>
-                                <li className={'item'}>
-                                    <div className={'menu-bt'}>
-                                        <NavLink
-                                            to={''}
-                                            end
-                                            className={({ isActive, isPending }) =>
-                                                isPending ? 'pending' : isActive ? 'active' : ''
-                                            }
-                                        >
-                                            <div className={'icon-box'}>
-                                                <Icon
-                                                    className={'icon'}
-                                                    component={toolsJsonObjects[0].icon}
-                                                />
-                                            </div>
-                                            <span className={'text'}>
-                                                {toolsJsonObjects[0].name}
-                                            </span>
-                                        </NavLink>
-                                    </div>
-                                </li>
-                                <li className={'item'}>
-                                    <div className={'menu-bt'}>
-                                        <NavLink
-                                            to={'all'}
-                                            className={({ isActive, isPending }) =>
-                                                isPending ? ' pending' : isActive ? ' active' : ''
-                                            }
-                                        >
-                                            <div className={'icon-box'}>
-                                                <Icon
-                                                    className={'icon'}
-                                                    component={toolsJsonObjects[1].icon}
-                                                />
-                                            </div>
-                                            <span className={'text'}>
-                                                {toolsJsonObjects[1].name}
-                                            </span>
-                                        </NavLink>
-                                    </div>
-                                </li>
-                                <li>
-                                    <div className={'separate'} />
-                                </li>
-                                {toolsJsonObjects.map((tool) => {
-                                    return tool.menu &&
-                                        tool.id !== 'tools' &&
-                                        tool.id !== 'tools-all' ? (
-                                        <li className={'item'} key={tool.id}>
-                                            <div className={'menu-bt'}>
-                                                <NavLink
-                                                    to={tool.path}
-                                                    className={({ isActive, isPending }) =>
-                                                        isPending
-                                                            ? 'pending'
-                                                            : isActive
-                                                            ? 'active'
-                                                            : ''
-                                                    }
+                    <div className={'content'}>
+                        <ul>
+                            <li className={'item'}>
+                                <div className={'menu-bt'}>
+                                    <NavLink
+                                        to={''}
+                                        end
+                                        className={({ isActive, isPending }) =>
+                                            isPending ? 'pending' : isActive ? 'active' : ''
+                                        }
+                                    >
+                                        <div className={'icon-box'}>
+                                            <Icon
+                                                className={'icon'}
+                                                component={toolsJsonObjects[0].icon}
+                                            />
+                                        </div>
+                                        <span className={'text'}>{toolsJsonObjects[0].name}</span>
+                                    </NavLink>
+                                </div>
+                            </li>
+                            <li className={'item'}>
+                                <div className={'menu-bt'}>
+                                    <NavLink
+                                        to={'all'}
+                                        className={({ isActive, isPending }) =>
+                                            isPending ? ' pending' : isActive ? ' active' : ''
+                                        }
+                                    >
+                                        <div className={'icon-box'}>
+                                            <Icon
+                                                className={'icon'}
+                                                component={toolsJsonObjects[1].icon}
+                                            />
+                                        </div>
+                                        <span className={'text'}>{toolsJsonObjects[1].name}</span>
+                                    </NavLink>
+                                </div>
+                            </li>
+                            <li>
+                                <div className={'separate'} />
+                            </li>
+                        </ul>
+                        <div className={'toolsMenu'}>
+                            <HideScrollbar
+                                isShowVerticalScrollbar={true}
+                                isShowHorizontalScrollbar={true}
+                                scrollbarWidth={2}
+                            >
+                                <ul>
+                                    {toolsJsonObjects.map((tool) => {
+                                        return tool.menu &&
+                                            tool.id !== 'tools' &&
+                                            tool.id !== 'tools-all' ? (
+                                            <li className={'item'} key={tool.id}>
+                                                <div
+                                                    className={'menu-bt'}
+                                                    onMouseEnter={showSubmenu}
                                                 >
-                                                    <div className={'icon-box'}>
-                                                        {tool.icon ? (
-                                                            <Icon
-                                                                className={'icon'}
-                                                                component={tool.icon}
-                                                            />
-                                                        ) : undefined}
-                                                    </div>
-                                                    <span className={'text'}>{tool.name}</span>
-                                                </NavLink>
-                                            </div>
-                                            {tool.children ? (
-                                                <ul className={'submenu'}>
-                                                    <div className={'content'}>
-                                                        {tool.children.map((subTool) => {
-                                                            return subTool.menu ? (
-                                                                <li
-                                                                    className={'item'}
-                                                                    key={subTool.id}
-                                                                >
-                                                                    <NavLink
-                                                                        to={`${tool.path}/${subTool.path}`}
-                                                                        className={({
-                                                                            isActive,
-                                                                            isPending
-                                                                        }) =>
-                                                                            isPending
-                                                                                ? 'pending'
-                                                                                : isActive
-                                                                                ? 'active'
-                                                                                : ''
-                                                                        }
+                                                    <NavLink
+                                                        to={tool.path}
+                                                        className={({ isActive, isPending }) =>
+                                                            isPending
+                                                                ? 'pending'
+                                                                : isActive
+                                                                ? 'active'
+                                                                : ''
+                                                        }
+                                                    >
+                                                        <div className={'icon-box'}>
+                                                            {tool.icon ? (
+                                                                <Icon
+                                                                    className={'icon'}
+                                                                    component={tool.icon}
+                                                                />
+                                                            ) : undefined}
+                                                        </div>
+                                                        <span className={'text'}>{tool.name}</span>
+                                                    </NavLink>
+                                                </div>
+                                                {tool.children ? (
+                                                    <ul
+                                                        className={'submenu'}
+                                                        style={{
+                                                            top: submenuTop,
+                                                            left: submenuLeft
+                                                        }}
+                                                    >
+                                                        <div className={'content'}>
+                                                            {tool.children.map((subTool) => {
+                                                                return subTool.menu ? (
+                                                                    <li
+                                                                        className={'item'}
+                                                                        key={subTool.id}
                                                                     >
-                                                                        <span className={'text'}>
-                                                                            {subTool.name}
-                                                                        </span>
-                                                                    </NavLink>
-                                                                </li>
-                                                            ) : undefined
-                                                        })}
-                                                    </div>
-                                                </ul>
-                                            ) : undefined}
-                                        </li>
-                                    ) : undefined
-                                })}
-                            </ul>
+                                                                        <NavLink
+                                                                            to={`${tool.path}/${subTool.path}`}
+                                                                            className={({
+                                                                                isActive,
+                                                                                isPending
+                                                                            }) =>
+                                                                                isPending
+                                                                                    ? 'pending'
+                                                                                    : isActive
+                                                                                    ? 'active'
+                                                                                    : ''
+                                                                            }
+                                                                        >
+                                                                            <span
+                                                                                className={'text'}
+                                                                            >
+                                                                                {subTool.name}
+                                                                            </span>
+                                                                        </NavLink>
+                                                                    </li>
+                                                                ) : undefined
+                                                            })}
+                                                        </div>
+                                                    </ul>
+                                                ) : undefined}
+                                            </li>
+                                        ) : undefined
+                                    })}
+                                </ul>
+                            </HideScrollbar>
                         </div>
-                    </HideScrollbar>
-
+                    </div>
                     <div className={'title'}>氮工具</div>
                 </div>
                 <div className={'right-panel'}></div>
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index e87043f..b6c658b 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -259,7 +259,23 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
         name: '翻译--10-',
         icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
         menu: true,
-        auth: false
+        auth: false,
+        children: [
+            {
+                path: '1-1',
+                id: '1-1',
+                name: '翻译1-',
+                menu: true,
+                auth: false
+            },
+            {
+                path: '2-1',
+                id: '2-1',
+                name: '翻译2-',
+                menu: true,
+                auth: false
+            }
+        ]
     }
 ]
 

From fea57c86327531e6e21d66a17e34ff0e345cc16e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 15:59:14 +0800
Subject: [PATCH 027/307] Optimize submenu in ToolsFramework

---
 src/assets/css/pages/tools-framework.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index d0ba705..3526d8e 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -8,7 +8,7 @@ body {
 .left-panel {
   display: flex;
   flex-direction: column;
-  width: 16%;
+  width: clamp(180px, 20vw, 240px);
   background-color: constants.$origin-color;
   user-select: none;
 
@@ -25,13 +25,11 @@ body {
     display: flex;
     min-height: 0;
     flex-direction: column;
+    flex: 1;
 
     .toolsMenu {
       min-height: 0;
-
-      .hide-scrollbar-mask {
-        flex: 1;
-      }
+      flex: 1;
     }
 
     ul {

From c1691d3e8e2027f6ed731fce623311558986420f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 17:42:48 +0800
Subject: [PATCH 028/307] Optimize svg

---
 src/assets/svg/down.svg    | 2 +-
 src/assets/svg/github.svg  | 2 +-
 src/assets/svg/jenkins.svg | 2 +-
 src/assets/svg/loading.svg | 2 +-
 src/assets/svg/logo.svg    | 2 +-
 src/assets/svg/menu.svg    | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/assets/svg/down.svg b/src/assets/svg/down.svg
index 872d226..587e1d1 100644
--- a/src/assets/svg/down.svg
+++ b/src/assets/svg/down.svg
@@ -1 +1 @@
-<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M958.577476 311.180252c0 15.286148-5.878894 29.522384-16.564257 40.166815L551.623951 741.043556c-1.39272 1.425466-2.577708 2.537799-3.846608 3.449565l-2.905166 2.304486c-11.416004 11.362792-24.848944 16.945951-39.068807 16.945951-14.475689 0-28.010961-5.708002-38.110993-16.056698L79.475588 355.310332c-10.467399-10.613732-16.236799-24.786523-16.236799-39.893592 0-14.772448 5.599532-28.726252 15.753799-39.286772 10.18599-10.497075 24.390503-16.539698 38.95215-16.539698 14.382569 0 28.009937 5.723352 38.366819 16.142655l350.169241 353.968777 359.428116-358.485651c10.30981-10.248412 23.781636-15.909341 37.994336-15.909341 14.889105 0 28.859281 6.05081 39.333844 16.999163C953.126324 282.725176 958.577476 296.556183 958.577476 311.180252z" /></svg>
\ No newline at end of file
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M958.577476 311.180252c0 15.286148-5.878894 29.522384-16.564257 40.166815L551.623951 741.043556c-1.39272 1.425466-2.577708 2.537799-3.846608 3.449565l-2.905166 2.304486c-11.416004 11.362792-24.848944 16.945951-39.068807 16.945951-14.475689 0-28.010961-5.708002-38.110993-16.056698L79.475588 355.310332c-10.467399-10.613732-16.236799-24.786523-16.236799-39.893592 0-14.772448 5.599532-28.726252 15.753799-39.286772 10.18599-10.497075 24.390503-16.539698 38.95215-16.539698 14.382569 0 28.009937 5.723352 38.366819 16.142655l350.169241 353.968777 359.428116-358.485651c10.30981-10.248412 23.781636-15.909341 37.994336-15.909341 14.889105 0 28.859281 6.05081 39.333844 16.999163C953.126324 282.725176 958.577476 296.556183 958.577476 311.180252z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/github.svg b/src/assets/svg/github.svg
index fdf2ea5..02c1634 100644
--- a/src/assets/svg/github.svg
+++ b/src/assets/svg/github.svg
@@ -1 +1 @@
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" /></svg>
\ No newline at end of file
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/jenkins.svg b/src/assets/svg/jenkins.svg
index 51fbbc6..ee77645 100644
--- a/src/assets/svg/jenkins.svg
+++ b/src/assets/svg/jenkins.svg
@@ -1 +1 @@
-<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M487.1 425c-1.4-11.2-19-23.1-28.2-31.9-5.1-5-29-23.1-30.4-29.9-1.4-6.6 9.7-21.5 13.3-28.9 5.1-10.7 8.8-23.7 11.3-32.6 18.8-66.1 20.7-156.9-6.2-211.2-10.2-20.6-38.6-49-56.4-62.5-42-31.7-119.6-35.3-170.1-16.6-14.1 5.2-27.8 9.8-40.1 17.1-33.1 19.4-68.3 32.5-78.1 71.6-24.2 10.8-31.5 41.8-30.3 77.8.2 7 4.1 15.8 2.7 22.4-.7 3.3-5.2 7.6-6.1 9.8-11.6 27.7-2.3 64 11.1 83.7 8.1 11.9 21.5 22.4 39.2 25.2.7 10.6 3.3 19.7 8.2 30.4 3.1 6.8 14.7 19 10.4 27.7-2.2 4.4-21 13.8-27.3 17.6C89 407.2 73.7 415 54.2 429c-12.6 9-32.3 10.2-29.2 31.1 2.1 14.1 10.1 31.6 14.7 45.8.7 2 1.4 4.1 2.1 6h422c4.9-15.3 9.7-30.9 14.6-47.2 3.4-11.4 10.2-27.8 8.7-39.7zM205.9 33.7c1.8-.5 3.4.7 4.9 2.4-.2 5.2-5.4 5.1-8.9 6.8-5.4 6.7-13.4 9.8-20 17.2-6.8 7.5-14.4 27.7-23.4 30-4.5 1.1-9.7-.8-13.6-.5-10.4.7-17.7 6-28.3 7.5 13.6-29.9 56.1-54 89.3-63.4zm-104.8 93.6c13.5-14.9 32.1-24.1 54.8-25.9 11.7 29.7-8.4 65-.9 97.6 2.3 9.9 10.2 25.4-2.4 25.7.3-28.3-34.8-46.3-61.3-29.6-1.8-21.5-4.9-51.7 9.8-67.8zm36.7 200.2c-1-4.1-2.7-12.9-2.3-15.1 1.6-8.7 17.1-12.5 11-24.7-11.3-.1-13.8 10.2-24.1 11.3-26.7 2.6-45.6-35.4-44.4-58.4 1-19.5 17.6-38.2 40.1-35.8 16 1.8 21.4 19.2 24.5 34.7 9.2.5 22.5-.4 26.9-7.6-.6-17.5-8.8-31.6-8.2-47.7 1-30.3 17.5-57.6 4.8-87.4 13.6-30.9 53.5-55.3 83.1-70 36.6-18.3 94.9-3.7 129.3 15.8 19.7 11.1 34.4 32.7 48.3 50.7-19.5-5.8-36.1 4.2-33.1 20.3 16.3-14.9 44.2-.2 52.5 16.4 7.9 15.8 7.8 39.3 9 62.8 2.9 57-10.4 115.9-39.1 157.1-7.7 11-14.1 23-24.9 30.6-26 18.2-65.4 34.7-99.2 23.4-44.7-15-65-44.8-89.5-78.8.7 18.7 13.8 34.1 26.8 48.4 11.3 12.5 25 26.6 39.7 32.4-12.3-2.9-31.1-3.8-36.2 7.2-28.6-1.9-55.1-4.8-68.7-24.2-10.6-15.4-21.4-41.4-26.3-61.4zm222 124.1c4.1-3 11.1-2.9 17.4-3.6-5.4-2.7-13-3.7-19.3-2.2-.1-4.2-2-6.8-3.2-10.2 10.6-3.8 35.5-28.5 49.6-20.3 6.7 3.9 9.5 26.2 10.1 37 .4 9-.8 18-4.5 22.8-18.8-.6-35.8-2.8-50.7-7 .9-6.1-1-12.1.6-16.5zm-17.2-20c-16.8.8-26-1.2-38.3-10.8.2-.8 1.4-.5 1.5-1.4 18 8 40.8-3.3 59-4.9-7.9 5.1-14.6 11.6-22.2 17.1zm-12.1 33.2c-1.6-9.4-3.5-12-2.8-20.2 25-16.6 29.7 28.6 2.8 20.2zM226 438.6c-11.6-.7-48.1-14-38.5-23.7 9.4 6.5 27.5 4.9 41.3 7.3.8 4.4-2.8 10.2-2.8 16.4zM57.7 497.1c-4.3-12.7-9.2-25.1-14.8-36.9 30.8-23.8 65.3-48.9 102.2-63.5 2.8-1.1 23.2 25.4 26.2 27.6 16.5 11.7 37 21 56.2 30.2 1.2 8.8 3.9 20.2 8.7 35.5.7 2.3 1.4 4.7 2.2 7.2H57.7zm240.6 5.7h-.8c.3-.2.5-.4.8-.5v.5zm7.5-5.7c2.1-1.4 4.3-2.8 6.4-4.3 1.1 1.4 2.2 2.8 3.2 4.3h-9.6zm15.1-24.7c-10.8 7.3-20.6 18.3-33.3 25.2-6 3.3-27 11.7-33.4 10.2-3.6-.8-3.9-5.3-5.4-9.5-3.1-9-10.1-23.4-10.8-37-.8-17.2-2.5-46 16-42.4 14.9 2.9 32.3 9.7 43.9 16.1 7.1 3.9 11.1 8.6 21.9 9.5-.1 1.4-.1 2.8-.2 4.3-5.9 3.9-15.3 3.8-21.8 7.1 9.5.4 17 2.7 23.5 5.9-.1 3.4-.3 7-.4 10.6zm53.4 24.7h-14c-.1-3.2-2.8-5.8-6.1-5.8s-5.9 2.6-6.1 5.8h-17.4c-2.8-4.4-5.7-8.6-8.9-12.5 2.1-2.2 4-4.7 6-6.9 9 3.7 14.8-4.9 21.7-4.2 7.9.8 14.2 11.7 25.4 11l-.6 12.6zm8.7 0c.2-4 .4-7.8.6-11.5 15.6-7.3 29 1.3 35.7 11.5H383zm83.4-37c-2.3 11.2-5.8 24-9.9 37.1-.2-.1-.4-.1-.6-.1H428c.6-1.1 1.2-2.2 1.9-3.3-2.6-6.1-9-8.7-10.9-15.5 12.1-22.7 6.5-93.4-24.2-78.5 4.3-6.3 15.6-11.5 20.8-19.3 13 10.4 20.8 20.3 33.2 31.4 6.8 6 20 13.3 21.4 23.1.8 5.5-2.6 18.9-3.8 25.1zM222.2 130.5c5.4-14.9 27.2-34.7 45-32 7.7 1.2 18 8.2 12.2 17.7-30.2-7-45.2 12.6-54.4 33.1-8.1-2-4.9-13.1-2.8-18.8zm184.1 63.1c8.2-3.6 22.4-.7 29.6-5.3-4.2-11.5-10.3-21.4-9.3-37.7.5 0 1 0 1.4.1 6.8 14.2 12.7 29.2 21.4 41.7-5.7 13.5-43.6 25.4-43.1 1.2zm20.4-43zm-117.2 45.7c-6.8-10.9-19-32.5-14.5-45.3 6.5 11.9 8.6 24.4 17.8 33.3 4.1 4 12.2 9 8.2 20.2-.9 2.7-7.8 8.6-11.7 9.7-14.4 4.3-47.9.9-36.6-17.1 11.9.7 27.9 7.8 36.8-.8zm27.3 70c3.8 6.6 1.4 18.7 12.1 20.6 20.2 3.4 43.6-12.3 58.1-17.8 9-15.2-.8-20.7-8.9-30.5-16.6-20-38.8-44.8-38-74.7 6.7-4.9 7.3 7.4 8.2 9.7 8.7 20.3 30.4 46.2 46.3 63.5 3.9 4.3 10.3 8.4 11 11.2 2.1 8.2-5.4 18-4.5 23.5-21.7 13.9-45.8 29.1-81.4 25.6-7.4-6.7-10.3-21.4-2.9-31.1zm-201.3-9.2c-6.8-3.9-8.4-21-16.4-21.4-11.4-.7-9.3 22.2-9.3 35.5-7.8-7.1-9.2-29.1-3.5-40.3-6.6-3.2-9.5 3.6-13.1 5.9 4.7-34.1 49.8-15.8 42.3 20.3zm299.6 28.8c-10.1 19.2-24.4 40.4-54 41-.6-6.2-1.1-15.6 0-19.4 22.7-2.2 36.6-13.7 54-21.6zm-141.9 12.4c18.9 9.9 53.6 11 79.3 10.2 1.4 5.6 1.3 12.6 1.4 19.4-33 1.8-72-6.4-80.7-29.6zm92.2 46.7c-1.7 4.3-5.3 9.3-9.8 11.1-12.1 4.9-45.6 8.7-62.4-.3-10.7-5.7-17.5-18.5-23.4-26-2.8-3.6-16.9-12.9-.2-12.9 13.1 32.7 58 29 95.8 28.1z"/></svg>
\ No newline at end of file
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M487.1 425c-1.4-11.2-19-23.1-28.2-31.9-5.1-5-29-23.1-30.4-29.9-1.4-6.6 9.7-21.5 13.3-28.9 5.1-10.7 8.8-23.7 11.3-32.6 18.8-66.1 20.7-156.9-6.2-211.2-10.2-20.6-38.6-49-56.4-62.5-42-31.7-119.6-35.3-170.1-16.6-14.1 5.2-27.8 9.8-40.1 17.1-33.1 19.4-68.3 32.5-78.1 71.6-24.2 10.8-31.5 41.8-30.3 77.8.2 7 4.1 15.8 2.7 22.4-.7 3.3-5.2 7.6-6.1 9.8-11.6 27.7-2.3 64 11.1 83.7 8.1 11.9 21.5 22.4 39.2 25.2.7 10.6 3.3 19.7 8.2 30.4 3.1 6.8 14.7 19 10.4 27.7-2.2 4.4-21 13.8-27.3 17.6C89 407.2 73.7 415 54.2 429c-12.6 9-32.3 10.2-29.2 31.1 2.1 14.1 10.1 31.6 14.7 45.8.7 2 1.4 4.1 2.1 6h422c4.9-15.3 9.7-30.9 14.6-47.2 3.4-11.4 10.2-27.8 8.7-39.7zM205.9 33.7c1.8-.5 3.4.7 4.9 2.4-.2 5.2-5.4 5.1-8.9 6.8-5.4 6.7-13.4 9.8-20 17.2-6.8 7.5-14.4 27.7-23.4 30-4.5 1.1-9.7-.8-13.6-.5-10.4.7-17.7 6-28.3 7.5 13.6-29.9 56.1-54 89.3-63.4zm-104.8 93.6c13.5-14.9 32.1-24.1 54.8-25.9 11.7 29.7-8.4 65-.9 97.6 2.3 9.9 10.2 25.4-2.4 25.7.3-28.3-34.8-46.3-61.3-29.6-1.8-21.5-4.9-51.7 9.8-67.8zm36.7 200.2c-1-4.1-2.7-12.9-2.3-15.1 1.6-8.7 17.1-12.5 11-24.7-11.3-.1-13.8 10.2-24.1 11.3-26.7 2.6-45.6-35.4-44.4-58.4 1-19.5 17.6-38.2 40.1-35.8 16 1.8 21.4 19.2 24.5 34.7 9.2.5 22.5-.4 26.9-7.6-.6-17.5-8.8-31.6-8.2-47.7 1-30.3 17.5-57.6 4.8-87.4 13.6-30.9 53.5-55.3 83.1-70 36.6-18.3 94.9-3.7 129.3 15.8 19.7 11.1 34.4 32.7 48.3 50.7-19.5-5.8-36.1 4.2-33.1 20.3 16.3-14.9 44.2-.2 52.5 16.4 7.9 15.8 7.8 39.3 9 62.8 2.9 57-10.4 115.9-39.1 157.1-7.7 11-14.1 23-24.9 30.6-26 18.2-65.4 34.7-99.2 23.4-44.7-15-65-44.8-89.5-78.8.7 18.7 13.8 34.1 26.8 48.4 11.3 12.5 25 26.6 39.7 32.4-12.3-2.9-31.1-3.8-36.2 7.2-28.6-1.9-55.1-4.8-68.7-24.2-10.6-15.4-21.4-41.4-26.3-61.4zm222 124.1c4.1-3 11.1-2.9 17.4-3.6-5.4-2.7-13-3.7-19.3-2.2-.1-4.2-2-6.8-3.2-10.2 10.6-3.8 35.5-28.5 49.6-20.3 6.7 3.9 9.5 26.2 10.1 37 .4 9-.8 18-4.5 22.8-18.8-.6-35.8-2.8-50.7-7 .9-6.1-1-12.1.6-16.5zm-17.2-20c-16.8.8-26-1.2-38.3-10.8.2-.8 1.4-.5 1.5-1.4 18 8 40.8-3.3 59-4.9-7.9 5.1-14.6 11.6-22.2 17.1zm-12.1 33.2c-1.6-9.4-3.5-12-2.8-20.2 25-16.6 29.7 28.6 2.8 20.2zM226 438.6c-11.6-.7-48.1-14-38.5-23.7 9.4 6.5 27.5 4.9 41.3 7.3.8 4.4-2.8 10.2-2.8 16.4zM57.7 497.1c-4.3-12.7-9.2-25.1-14.8-36.9 30.8-23.8 65.3-48.9 102.2-63.5 2.8-1.1 23.2 25.4 26.2 27.6 16.5 11.7 37 21 56.2 30.2 1.2 8.8 3.9 20.2 8.7 35.5.7 2.3 1.4 4.7 2.2 7.2H57.7zm240.6 5.7h-.8c.3-.2.5-.4.8-.5v.5zm7.5-5.7c2.1-1.4 4.3-2.8 6.4-4.3 1.1 1.4 2.2 2.8 3.2 4.3h-9.6zm15.1-24.7c-10.8 7.3-20.6 18.3-33.3 25.2-6 3.3-27 11.7-33.4 10.2-3.6-.8-3.9-5.3-5.4-9.5-3.1-9-10.1-23.4-10.8-37-.8-17.2-2.5-46 16-42.4 14.9 2.9 32.3 9.7 43.9 16.1 7.1 3.9 11.1 8.6 21.9 9.5-.1 1.4-.1 2.8-.2 4.3-5.9 3.9-15.3 3.8-21.8 7.1 9.5.4 17 2.7 23.5 5.9-.1 3.4-.3 7-.4 10.6zm53.4 24.7h-14c-.1-3.2-2.8-5.8-6.1-5.8s-5.9 2.6-6.1 5.8h-17.4c-2.8-4.4-5.7-8.6-8.9-12.5 2.1-2.2 4-4.7 6-6.9 9 3.7 14.8-4.9 21.7-4.2 7.9.8 14.2 11.7 25.4 11l-.6 12.6zm8.7 0c.2-4 .4-7.8.6-11.5 15.6-7.3 29 1.3 35.7 11.5H383zm83.4-37c-2.3 11.2-5.8 24-9.9 37.1-.2-.1-.4-.1-.6-.1H428c.6-1.1 1.2-2.2 1.9-3.3-2.6-6.1-9-8.7-10.9-15.5 12.1-22.7 6.5-93.4-24.2-78.5 4.3-6.3 15.6-11.5 20.8-19.3 13 10.4 20.8 20.3 33.2 31.4 6.8 6 20 13.3 21.4 23.1.8 5.5-2.6 18.9-3.8 25.1zM222.2 130.5c5.4-14.9 27.2-34.7 45-32 7.7 1.2 18 8.2 12.2 17.7-30.2-7-45.2 12.6-54.4 33.1-8.1-2-4.9-13.1-2.8-18.8zm184.1 63.1c8.2-3.6 22.4-.7 29.6-5.3-4.2-11.5-10.3-21.4-9.3-37.7.5 0 1 0 1.4.1 6.8 14.2 12.7 29.2 21.4 41.7-5.7 13.5-43.6 25.4-43.1 1.2zm20.4-43zm-117.2 45.7c-6.8-10.9-19-32.5-14.5-45.3 6.5 11.9 8.6 24.4 17.8 33.3 4.1 4 12.2 9 8.2 20.2-.9 2.7-7.8 8.6-11.7 9.7-14.4 4.3-47.9.9-36.6-17.1 11.9.7 27.9 7.8 36.8-.8zm27.3 70c3.8 6.6 1.4 18.7 12.1 20.6 20.2 3.4 43.6-12.3 58.1-17.8 9-15.2-.8-20.7-8.9-30.5-16.6-20-38.8-44.8-38-74.7 6.7-4.9 7.3 7.4 8.2 9.7 8.7 20.3 30.4 46.2 46.3 63.5 3.9 4.3 10.3 8.4 11 11.2 2.1 8.2-5.4 18-4.5 23.5-21.7 13.9-45.8 29.1-81.4 25.6-7.4-6.7-10.3-21.4-2.9-31.1zm-201.3-9.2c-6.8-3.9-8.4-21-16.4-21.4-11.4-.7-9.3 22.2-9.3 35.5-7.8-7.1-9.2-29.1-3.5-40.3-6.6-3.2-9.5 3.6-13.1 5.9 4.7-34.1 49.8-15.8 42.3 20.3zm299.6 28.8c-10.1 19.2-24.4 40.4-54 41-.6-6.2-1.1-15.6 0-19.4 22.7-2.2 36.6-13.7 54-21.6zm-141.9 12.4c18.9 9.9 53.6 11 79.3 10.2 1.4 5.6 1.3 12.6 1.4 19.4-33 1.8-72-6.4-80.7-29.6zm92.2 46.7c-1.7 4.3-5.3 9.3-9.8 11.1-12.1 4.9-45.6 8.7-62.4-.3-10.7-5.7-17.5-18.5-23.4-26-2.8-3.6-16.9-12.9-.2-12.9 13.1 32.7 58 29 95.8 28.1z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/loading.svg b/src/assets/svg/loading.svg
index a7c3d67..140bea2 100644
--- a/src/assets/svg/loading.svg
+++ b/src/assets/svg/loading.svg
@@ -1 +1 @@
-<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3 0.1 19.9-16 36-35.9 36z" /></svg>
\ No newline at end of file
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3 0.1 19.9-16 36-35.9 36z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg
index 243d161..bae41f6 100644
--- a/src/assets/svg/logo.svg
+++ b/src/assets/svg/logo.svg
@@ -1 +1 @@
-<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="911.75" height="898.91" viewBox="0 0 911.75 898.91"><path d="M828.52,831.72c-216,259.7-774.46,115.85-765.17-319.5-19-292.76,370.82-602.09,704.81-367.11,44.53,48.2,81.39,32.52,121.28,46.67,28.28,14.3,21.36,42.61,52.36,142.6,31.6,101.09,60.92,133.92-17.45,182.4-28,11.34-46.6-2.34-117.82-25.31-92-29.65-109-22.33-132.66-48-27.26-29.62-14.42-50.13-41.31-80.13C507.2,259.81,336.39,351,290.74,489.72c-7,26.59-20.37,92.15,8.72,162.38,25.72,62.11,71.11,95.23,99.93,115.7C554.85,878.2,781.33,840.41,828.52,831.72Zm50.11-584.95c-15.4,5.93.73,47,16,40.82C910.07,281.66,893.94,240.63,878.63,246.77Zm-152,180.06c-4.34,15.92,35.73,26.64,39.92,10.68C770.9,421.58,730.83,410.86,726.63,426.83Z" transform="translate(-62.68 -62.16)"/></svg>
\ No newline at end of file
+<svg viewBox="0 0 911.75 898.91" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M828.52,831.72c-216,259.7-774.46,115.85-765.17-319.5-19-292.76,370.82-602.09,704.81-367.11,44.53,48.2,81.39,32.52,121.28,46.67,28.28,14.3,21.36,42.61,52.36,142.6,31.6,101.09,60.92,133.92-17.45,182.4-28,11.34-46.6-2.34-117.82-25.31-92-29.65-109-22.33-132.66-48-27.26-29.62-14.42-50.13-41.31-80.13C507.2,259.81,336.39,351,290.74,489.72c-7,26.59-20.37,92.15,8.72,162.38,25.72,62.11,71.11,95.23,99.93,115.7C554.85,878.2,781.33,840.41,828.52,831.72Zm50.11-584.95c-15.4,5.93.73,47,16,40.82C910.07,281.66,893.94,240.63,878.63,246.77Zm-152,180.06c-4.34,15.92,35.73,26.64,39.92,10.68C770.9,421.58,730.83,410.86,726.63,426.83Z" transform="translate(-62.68 -62.16)"/></svg>
\ No newline at end of file
diff --git a/src/assets/svg/menu.svg b/src/assets/svg/menu.svg
index 46ac707..f506c1b 100644
--- a/src/assets/svg/menu.svg
+++ b/src/assets/svg/menu.svg
@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M950.784 768v72.704q0 15.36-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264t-11.264-25.6V768q0-15.36 11.264-25.6t25.6-11.264h803.84q15.36 0 26.624 11.264t10.24 25.6z m0-292.864v73.728q0 14.336-10.24 25.6t-26.624 10.24H110.08q-15.36 0-25.6-10.24t-11.264-25.6v-73.728q0-14.336 11.264-25.6t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 25.6z m0-291.84V256q0 14.336-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264T73.216 256V183.296q0-15.36 11.264-26.624t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 26.624z" /></svg>
\ No newline at end of file
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M950.784 768v72.704q0 15.36-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264t-11.264-25.6V768q0-15.36 11.264-25.6t25.6-11.264h803.84q15.36 0 26.624 11.264t10.24 25.6z m0-292.864v73.728q0 14.336-10.24 25.6t-26.624 10.24H110.08q-15.36 0-25.6-10.24t-11.264-25.6v-73.728q0-14.336 11.264-25.6t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 25.6z m0-291.84V256q0 14.336-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264T73.216 256V183.296q0-15.36 11.264-26.624t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 26.624z" /></svg>
\ No newline at end of file

From a48af3da92902ff2bd2653e01fe2d1bba19ef54d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 17:51:38 +0800
Subject: [PATCH 029/307] Optimize HideScrollbar

---
 src/components/common/HideScrollbar.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 2cf3b8f..f86e5fb 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -45,6 +45,7 @@ export interface HideScrollbarElement {
         listener: EventListenerOrEventListenerObject,
         options?: boolean | EventListenerOptions
     ): void
+    refreshLayout(): void
 }
 
 const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((props, ref) => {
@@ -128,6 +129,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     options?: boolean | EventListenerOptions
                 ): void {
                     rootRef.current?.removeEventListener(type, listener, options)
+                },
+                refreshLayout(): void {
+                    setRefreshTime(Date.now())
                 }
             }
         },
@@ -141,6 +145,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
     const lastScrollbarClickPositionRef = useRef({ x: -1, y: -1 })
     const lastScrollbarTouchPositionRef = useRef({ x: -1, y: -1 })
     const lastTouchPositionRef = useRef({ x: -1, y: -1 })
+    const [refreshTime, setRefreshTime] = useState(0)
     const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
     const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
     const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
@@ -479,6 +484,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                         className={'hide-scrollbar-content'}
                         ref={contentRef}
                         style={{ minWidth, minHeight }}
+                        data-refresh={refreshTime}
                     >
                         {props.children}
                     </div>

From e32f12d301e3250c053261676de0174d1c08fc15 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 17:59:21 +0800
Subject: [PATCH 030/307] Finish sidebar in ToolsFramework

---
 src/assets/css/pages/tools-framework.scss | 74 +++++++++++++++++++----
 src/assets/svg/expand.svg                 |  1 +
 src/pages/ToolsFramework.tsx              | 42 +++++++++----
 src/router/tools.tsx                      |  1 +
 4 files changed, 95 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/svg/expand.svg

diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 3526d8e..46c8d95 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -11,14 +11,41 @@ body {
   width: clamp(180px, 20vw, 240px);
   background-color: constants.$origin-color;
   user-select: none;
+  transition: all .3s;
+  white-space: nowrap;
 
   .title {
-    font-size: 2em;
-    text-align: center;
+    display: flex;
+    align-items: center;
     font-weight: bold;
-    letter-spacing: 0.6em;
-    padding: 10px;
+    padding: 10px 14px;
     color: constants.$main-color;
+
+    .icon-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      width: 40px;
+      height: 40px;
+      font-size: constants.$SIZE_ICON_SM;
+      border-radius: 8px;
+      span {
+        transform: rotateZ(180deg);
+        transition: all .3s;
+      }
+
+      &:hover {
+        background-color: constants.$background-color;
+      }
+    }
+
+    .text {
+      flex: 1;
+      font-size: 2em;
+      text-align: center;
+      letter-spacing: 0.6em;
+    }
   }
 
   .content {
@@ -42,26 +69,29 @@ body {
           .menu-bt {
             border-radius: 8px;
             overflow: hidden;
+            height: 40px;
 
             .icon-box {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 0 10px;
+              width: 40px;
+              height: 40px;
+              font-size: constants.$SIZE_ICON_SM;
               cursor: pointer;
-              width: 26px;
-              height: 26px;
-
-              .icon {
-                margin-right: 16px;
-              }
             }
 
             a {
               display: flex;
-              padding: 8px 16px;
+              align-items: center;
               height: 100%;
               width: 100%;
               transition: all 0.2s;
 
               .text {
                 flex: 1;
+                padding-left: 8px;
               }
 
               &.active {
@@ -147,6 +177,28 @@ body {
     };
     opacity: 0.4;
   }
+
+  &.hide {
+    width: 68px;
+
+    .title {
+      .icon-box {
+        span {
+          transform: rotateZ(360deg);
+          transition: all .3s;
+        }
+      }
+      .text {
+        display: none;
+      }
+    }
+
+    .menu-bt {
+      .text {
+        display: none;
+      }
+    }
+  }
 }
 
 .right-panel {
diff --git a/src/assets/svg/expand.svg b/src/assets/svg/expand.svg
new file mode 100644
index 0000000..95e5060
--- /dev/null
+++ b/src/assets/svg/expand.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1028 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M8.533333 192c0-25.6 17.066667-42.666667 34.133334-42.666667h490.666666c21.333333 0 34.133333 17.066667 34.133334 42.666667 0 21.333333-17.066667 42.666667-34.133334 42.666667h-490.666666c-21.333333 0-34.133333-21.333333-34.133334-42.666667z m550.4 213.333333c0 25.6-21.333333 42.666667-46.933333 42.666667h-465.066667c-25.6 0-46.933333-17.066667-46.933333-42.666667 0-21.333333 21.333333-42.666667 46.933333-42.666666h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666666z m-507.733333 256c-25.6 0-46.933333-17.066667-46.933333-42.666666s21.333333-42.666667 46.933333-42.666667h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666667 0 21.333333-21.333333 42.666667-46.933333 42.666666h-465.066667z m507.733333 170.666667c0 25.6-21.333333 42.666667-51.2 42.666667h-452.266666c-29.866667 0-51.2-17.066667-51.2-42.666667s21.333333-42.666667 51.2-42.666667h452.266666c29.866667 0 51.2 17.066667 51.2 42.666667z m140.8-85.333333l221.866667-238.933334-221.866667-238.933333c-17.066667-17.066667-17.066667-51.2 0-68.266667 17.066667-17.066667 46.933333-17.066667 64 0l251.733334 273.066667c17.066667 17.066667 17.066667 51.2 0 68.266667l-251.733334 273.066666c-17.066667 17.066667-46.933333 17.066667-64 0-17.066667-17.066667-17.066667-46.933333 0-68.266666z" /></svg>
\ No newline at end of file
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index d69d129..f9e94bb 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -3,11 +3,20 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import '@/assets/css/pages/tools-framework.scss'
 import Icon from '@ant-design/icons'
 import { toolsJsonObjects } from '@/router/tools.tsx'
-import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar.tsx'
 
 const ToolsFramework: React.FC = () => {
+    const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const [submenuTop, setSubmenuTop] = useState(0)
     const [submenuLeft, setSubmenuLeft] = useState(0)
+    const [hideSidebar, setHideSidebar] = useState(false)
+
+    const switchSidebar = () => {
+        setHideSidebar(!hideSidebar)
+        setTimeout(() => {
+            hideScrollbarRef.current?.refreshLayout()
+        }, 300)
+    }
 
     const showSubmenu = (e: React.MouseEvent) => {
         const parentElement = e.currentTarget.parentElement
@@ -29,8 +38,13 @@ const ToolsFramework: React.FC = () => {
     return (
         <>
             <FitFullScreen className={'flex-horizontal'}>
-                <div className={'left-panel'}>
-                    <div className={'title'}>氮工具</div>
+                <div className={`left-panel${hideSidebar ? ' hide' : ''}`}>
+                    <div className={'title'}>
+                        <span className={'icon-box'} onClick={switchSidebar}>
+                            <Icon component={IconFatwebExpand} />
+                        </span>
+                        <span className={'text'}>氮工具</span>
+                    </div>
                     <div style={{ marginTop: '0' }} className={'separate'} />
                     <div className={'content'}>
                         <ul>
@@ -44,10 +58,12 @@ const ToolsFramework: React.FC = () => {
                                         }
                                     >
                                         <div className={'icon-box'}>
-                                            <Icon
-                                                className={'icon'}
-                                                component={toolsJsonObjects[0].icon}
-                                            />
+                                            {toolsJsonObjects[0].icon ? (
+                                                <Icon
+                                                    className={'icon'}
+                                                    component={toolsJsonObjects[0].icon}
+                                                />
+                                            ) : undefined}
                                         </div>
                                         <span className={'text'}>{toolsJsonObjects[0].name}</span>
                                     </NavLink>
@@ -62,10 +78,12 @@ const ToolsFramework: React.FC = () => {
                                         }
                                     >
                                         <div className={'icon-box'}>
-                                            <Icon
-                                                className={'icon'}
-                                                component={toolsJsonObjects[1].icon}
-                                            />
+                                            {toolsJsonObjects[1].icon ? (
+                                                <Icon
+                                                    className={'icon'}
+                                                    component={toolsJsonObjects[1].icon}
+                                                />
+                                            ) : undefined}
                                         </div>
                                         <span className={'text'}>{toolsJsonObjects[1].name}</span>
                                     </NavLink>
@@ -78,8 +96,8 @@ const ToolsFramework: React.FC = () => {
                         <div className={'toolsMenu'}>
                             <HideScrollbar
                                 isShowVerticalScrollbar={true}
-                                isShowHorizontalScrollbar={true}
                                 scrollbarWidth={2}
+                                ref={hideScrollbarRef}
                             >
                                 <ul>
                                     {toolsJsonObjects.map((tool) => {
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index b6c658b..a98995c 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -7,6 +7,7 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
         path: '',
         id: 'tools',
         component: React.lazy(() => import('@/pages/tools')),
+        icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
         name: '主页',
         menu: true,
         auth: false

From 05c68a2ab78ff575a2ed80f7c2b9b430a7700210 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 18:18:08 +0800
Subject: [PATCH 031/307] Add sidebar footer in ToolsFramework.tsx

---
 src/assets/css/pages/tools-framework.scss | 36 +++++++++++++++++++++++
 src/pages/ToolsFramework.tsx              | 14 +++++++--
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 46c8d95..f1dc864 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -30,6 +30,7 @@ body {
       height: 40px;
       font-size: constants.$SIZE_ICON_SM;
       border-radius: 8px;
+      cursor: pointer;
       span {
         transform: rotateZ(180deg);
         transition: all .3s;
@@ -45,6 +46,7 @@ body {
       font-size: 2em;
       text-align: center;
       letter-spacing: 0.6em;
+      transform: translateX(0.3em);
     }
   }
 
@@ -178,6 +180,40 @@ body {
     opacity: 0.4;
   }
 
+  .footer {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    padding: 10px 14px;
+    color: constants.$main-color;
+
+    .icon-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      width: 40px;
+      height: 40px;
+      font-size: constants.$SIZE_ICON_SM;
+      border-radius: 8px;
+      span {
+        transform: rotateZ(180deg);
+        transition: all .3s;
+      }
+
+      &:hover {
+        background-color: constants.$background-color;
+      }
+    }
+
+    .text {
+      flex: 1;
+      font-size: 2em;
+      text-align: center;
+      letter-spacing: 0.6em;
+    }
+  }
+
   &.hide {
     width: 68px;
 
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index f9e94bb..519ea17 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -4,15 +4,17 @@ import '@/assets/css/pages/tools-framework.scss'
 import Icon from '@ant-design/icons'
 import { toolsJsonObjects } from '@/router/tools.tsx'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar.tsx'
+import { getLocalStorage, setLocalStorage } from '@/utils/common.ts'
 
 const ToolsFramework: React.FC = () => {
     const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const [submenuTop, setSubmenuTop] = useState(0)
     const [submenuLeft, setSubmenuLeft] = useState(0)
-    const [hideSidebar, setHideSidebar] = useState(false)
+    const [hideSidebar, setHideSidebar] = useState(getLocalStorage('hideSidebar') === 'false')
 
     const switchSidebar = () => {
         setHideSidebar(!hideSidebar)
+        setLocalStorage('hideSidebar', hideSidebar ? 'true' : 'false')
         setTimeout(() => {
             hideScrollbarRef.current?.refreshLayout()
         }, 300)
@@ -90,7 +92,7 @@ const ToolsFramework: React.FC = () => {
                                 </div>
                             </li>
                             <li>
-                                <div className={'separate'} />
+                                <div className={'separate'} style={{ marginBottom: 0 }} />
                             </li>
                         </ul>
                         <div className={'toolsMenu'}>
@@ -177,7 +179,13 @@ const ToolsFramework: React.FC = () => {
                             </HideScrollbar>
                         </div>
                     </div>
-                    <div className={'title'}>氮工具</div>
+                    <div className={'separate'} style={{ marginTop: 0, marginBottom: 0 }} />
+                    <div className={'footer'}>
+                        <span className={'icon-box'} onClick={switchSidebar}>
+                            <Icon component={IconFatwebExpand} />
+                        </span>
+                        <span className={'text'}>氮工具</span>
+                    </div>
                 </div>
                 <div className={'right-panel'}></div>
             </FitFullScreen>

From fdc2135ce24978510321ca1000e260b23cbda31c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 22:12:09 +0800
Subject: [PATCH 032/307] Optimize HideScrollbar

---
 src/components/common/HideScrollbar.tsx | 44 +++++++++++++++----------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index f86e5fb..2af301c 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -13,6 +13,7 @@ interface HideScrollbarProps
     minWidth?: string | number
     minHeight?: string | number
     scrollbarWidth?: string | number
+    animationTransitionTime?: number
 }
 
 export interface HideScrollbarElement {
@@ -131,7 +132,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     rootRef.current?.removeEventListener(type, listener, options)
                 },
                 refreshLayout(): void {
-                    setRefreshTime(Date.now())
+                    refreshLayout()
                 }
             }
         },
@@ -168,6 +169,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         minWidth,
         minHeight,
         scrollbarWidth,
+        animationTransitionTime,
         ..._props
     } = props
 
@@ -374,24 +376,32 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         )
     }
 
+    const refreshLayout = () => {
+        setRefreshTime(Date.now())
+    }
+
     useEffect(() => {
         const windowResizeListener = () => {
-            setVerticalScrollbarWidth(
-                (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
-            )
-            setHorizontalScrollbarWidth(
-                (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
-            )
-
-            rootRef.current &&
-                setVerticalScrollbarLength(
-                    (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
+            setTimeout(() => {
+                setVerticalScrollbarWidth(
+                    (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
+                )
+                setHorizontalScrollbarWidth(
+                    (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
                 )
 
-            rootRef.current &&
-                setHorizontalScrollbarLength(
-                    (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
-                )
+                rootRef.current &&
+                    setVerticalScrollbarLength(
+                        (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) *
+                            100
+                    )
+
+                rootRef.current &&
+                    setHorizontalScrollbarLength(
+                        (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
+                    )
+                refreshLayout()
+            }, animationTransitionTime)
 
             return windowResizeListener
         }
@@ -493,7 +503,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     hidden={
                         !isShowVerticalScrollbar ||
                         ((isHiddenVerticalScrollbarWhenFull ?? true) &&
-                            verticalScrollbarLength === 100)
+                            verticalScrollbarLength >= 100)
                     }
                     className={'scrollbar vertical-scrollbar'}
                     style={{
@@ -530,7 +540,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                     hidden={
                         !isShowHorizontalScrollbar ||
                         ((isHiddenHorizontalScrollbarWhenFull ?? true) &&
-                            horizontalScrollbarLength === 100)
+                            horizontalScrollbarLength >= 100)
                     }
                     className={'scrollbar horizontal-scrollbar'}
                     style={{

From 507ed1eb9a1fd615526a03be1b7010f07cbf3c42 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 14 Oct 2023 01:09:02 +0800
Subject: [PATCH 033/307] Finish sidebar in ToolsFramework

---
 src/assets/css/pages/tools-framework.scss | 36 +++++++++++++----------
 src/assets/svg/home.svg                   |  1 +
 src/assets/svg/user.svg                   |  1 +
 src/components/common/HideScrollbar.tsx   |  1 +
 src/pages/ToolsFramework.tsx              |  7 +++--
 5 files changed, 27 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/svg/home.svg
 create mode 100644 src/assets/svg/user.svg

diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index f1dc864..b95691f 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -13,6 +13,7 @@ body {
   user-select: none;
   transition: all .3s;
   white-space: nowrap;
+  overflow: hidden;
 
   .title {
     display: flex;
@@ -184,33 +185,30 @@ body {
     display: flex;
     align-items: center;
     font-weight: bold;
-    padding: 10px 14px;
+    padding: 8px 14px;
     color: constants.$main-color;
 
     .icon-box {
       display: flex;
       justify-content: center;
       align-items: center;
+      margin-left: 4px;
       padding: 10px;
-      width: 40px;
-      height: 40px;
-      font-size: constants.$SIZE_ICON_SM;
-      border-radius: 8px;
-      span {
-        transform: rotateZ(180deg);
-        transition: all .3s;
-      }
-
-      &:hover {
-        background-color: constants.$background-color;
-      }
+      width: 32px;
+      height: 32px;
+      font-size: constants.$SIZE_ICON_XS;
+      border: 2px constants.$font-secondary-color solid;
+      color: constants.$font-secondary-color;
+      border-radius: 50%;
+      cursor: pointer;
     }
 
     .text {
       flex: 1;
-      font-size: 2em;
-      text-align: center;
-      letter-spacing: 0.6em;
+      padding-left: 8px;
+      font-size: 1.4em;
+      color: constants.$font-main-color;
+      user-select: text;
     }
   }
 
@@ -234,6 +232,12 @@ body {
         display: none;
       }
     }
+
+    .footer {
+      .text {
+        display: none;
+      }
+    }
   }
 }
 
diff --git a/src/assets/svg/home.svg b/src/assets/svg/home.svg
new file mode 100644
index 0000000..ee81985
--- /dev/null
+++ b/src/assets/svg/home.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M116.707556 631.751111a56.888889 56.888889 0 1 1 113.777777 0V910.222222h539.704889V512a56.888889 56.888889 0 1 1 113.777778 0v398.222222a113.777778 113.777778 0 0 1-113.777778 113.777778H230.485333a113.777778 113.777778 0 0 1-113.777777-113.777778v-278.471111z" /><path d="M98.929778 573.070222a56.888889 56.888889 0 0 1-84.081778-76.629333L412.700444 59.904A113.777778 113.777778 0 0 1 578.019556 56.888889l429.710222 438.044444a56.888889 56.888889 0 0 1-81.237334 79.644445L496.810667 136.533333 98.929778 573.098667z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/user.svg b/src/assets/svg/user.svg
new file mode 100644
index 0000000..1ac062a
--- /dev/null
+++ b/src/assets/svg/user.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M707.797333 304.426667c0-114.218667-93.354667-206.805333-208.512-206.805334-115.157333 0-208.512 92.586667-208.512 206.805334 0 114.218667 93.354667 206.805333 208.512 206.805333 115.2 0 208.512-92.586667 208.512-206.805333m292.053334 656c1.365333 4.437333 2.304 9.088 2.304 13.994666 0 26.88-21.930667 48.725333-49.024 48.725334a48.853333 48.853333 0 0 1-48.981334-48.725334v-0.170666h-1.28c-12.757333-203.904-182.741333-365.482667-391.168-365.482667-208.469333 0-378.453333 161.578667-391.253333 365.482667h-1.109333v0.170666c0 26.88-21.930667 48.725333-48.981334 48.725334A48.853333 48.853333 0 0 1 21.333333 974.421333c0-4.608 0.853333-8.96 2.048-13.226666 14.250667-185.045333 131.882667-341.248 296.149334-410.88C243.2 494.976 193.28 405.589333 193.28 304.426667 193.28 136.32 330.453333 0 499.626667 0c169.216 0 306.346667 136.32 306.346666 304.426667a302.933333 302.933333 0 0 1-118.186666 239.914666c172.202667 66.005333 297.088 225.536 312.064 416.085334" /></svg>
\ No newline at end of file
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 2af301c..df8f916 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -446,6 +446,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
             window.removeEventListener('resize', windowResizeListener)
         }
     }, [
+        animationTransitionTime,
         horizontalScrollbarLength,
         isPreventAnyScroll,
         isPreventHorizontalScroll,
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 519ea17..fb3c76d 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -99,6 +99,7 @@ const ToolsFramework: React.FC = () => {
                             <HideScrollbar
                                 isShowVerticalScrollbar={true}
                                 scrollbarWidth={2}
+                                animationTransitionTime={300}
                                 ref={hideScrollbarRef}
                             >
                                 <ul>
@@ -181,10 +182,10 @@ const ToolsFramework: React.FC = () => {
                     </div>
                     <div className={'separate'} style={{ marginTop: 0, marginBottom: 0 }} />
                     <div className={'footer'}>
-                        <span className={'icon-box'} onClick={switchSidebar}>
-                            <Icon component={IconFatwebExpand} />
+                        <span className={'icon-box'}>
+                            <Icon component={IconFatwebUser} />
                         </span>
-                        <span className={'text'}>氮工具</span>
+                        <span className={'text'}>未登录</span>
                     </div>
                 </div>
                 <div className={'right-panel'}></div>

From 87ca67ba3c9b855b14422f36f96440e4c89f2fd1 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 14 Oct 2023 18:51:19 +0800
Subject: [PATCH 034/307] Change the icon of home and all tools in
 ToolsFramework

---
 src/assets/svg/tool.svg | 1 +
 src/router/tools.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/svg/tool.svg

diff --git a/src/assets/svg/tool.svg b/src/assets/svg/tool.svg
new file mode 100644
index 0000000..0a3973c
--- /dev/null
+++ b/src/assets/svg/tool.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1026 1024"><path d="M942.622517 803.602649c-10.172185-20.344371-30.516556-33.907285-54.251656-33.907285h-30.516556l-250.913908-250.913907 20.344371-20.344371c10.172185-10.172185 13.562914-20.344371 13.562914-33.907285s-3.390728-23.735099-13.562914-33.907284c-27.125828-27.125828-50.860927-40.688742-74.596026-50.860928-20.344371-6.781457-37.298013-20.344371-44.07947-40.688741-10.172185-27.125828-23.735099-50.860927-50.860928-74.596027L230.569536 33.907285C206.834437 13.562914 176.317881 0 145.801325 0c-33.907285 0-64.423841 13.562914-84.768212 33.907285l-27.125828 27.125828c-20.344371 20.344371-33.907285 50.860927-33.907285 84.768212 0 30.516556 13.562914 61.033113 33.907285 84.768211l227.178808 227.178808c27.125828 27.125828 50.860927 40.688742 74.596026 50.860928 20.344371 6.781457 37.298013 23.735099 44.07947 44.07947 10.172185 27.125828 23.735099 50.860927 50.860928 77.986755 10.172185 10.172185 20.344371 13.562914 33.907284 13.562914s23.735099-3.390728 33.907285-13.562914l20.344371-20.344371 250.913907 250.913907v30.516556c0 23.735099 13.562914 44.07947 33.907285 54.251656l145.801325 74.596027c3.390728 0 3.390728 3.390728 6.781456 3.390728s10.172185-3.390728 13.562914-3.390728l44.079471-44.079471c6.781457-6.781457 6.781457-13.562914 3.390728-20.344371l-74.596026-152.582781zM457.748344 674.754967c-16.953642-3.390728-33.907285-10.172185-47.470198-23.735099-30.516556-30.516556-50.860927-61.033113-61.033113-91.549669 0-3.390728-3.390728-6.781457-3.390728-10.172186-3.390728-3.390728-6.781457-6.781457-13.562914-6.781457s-10.172185 0-13.562914 6.781457l-23.7351 27.125828c-23.735099 20.344371-54.251656 33.907285-91.549668 33.907285-118.675497 0-203.443709 81.377483-203.443709 196.662251 0 6.781457 0 13.562914 3.390728 20.344371v3.390729c0 6.781457 3.390728 10.172185 10.172186 13.562914 3.390728 3.390728 10.172185 3.390728 16.953642 0L169.536424 759.523179c37.298013 20.344371 64.423841 57.642384 67.814569 98.331126L88.15894 949.403974c-3.390728 3.390728-6.781457 6.781457-6.781457 13.562913s3.390728 10.172185 6.781457 13.562914c37.298013 27.125828 77.986755 40.688742 122.066226 40.688742 50.860927 0 105.112583-23.735099 142.410596-67.814569 47.470199-50.860927 67.81457-98.331126 64.423841-149.192053 0-30.516556 13.562914-61.033113 37.298013-88.158941l10.172185-10.172185c3.390728-3.390728 6.781457-10.172185 3.390729-16.953643 0-6.781457-6.781457-10.172185-10.172186-10.172185z m-247.523178 325.509934zM562.860927 349.245033c30.516556 10.172185 61.033113 30.516556 88.158941 57.642384 13.562914 13.562914 20.344371 27.125828 23.735099 44.07947 0 6.781457 6.781457 10.172185 10.172185 13.562914h6.781457c3.390728 0 10.172185-3.390728 13.562914-6.781457l61.033113-64.423841c16.953642 3.390728 33.907285 6.781457 50.860927 6.781457 61.033113 0 115.284768-23.735099 152.582781-61.033112 30.516556-33.907285 50.860927-84.768212 47.470199-142.410596 0-6.781457-3.390728-10.172185-10.172185-13.562914-6.781457-3.390728-10.172185-3.390728-16.953643 0l-118.675496 71.205298c-37.298013-20.344371-64.423841-57.642384-67.81457-98.331126l132.238411-81.377484c3.390728-3.390728 6.781457-6.781457 6.781457-13.562913s-3.390728-10.172185-6.781457-13.562914C901.933775 16.953642 857.854305 0 806.993377 0s-105.112583 23.735099-142.410596 64.423841c-47.470199 50.860927-67.81457 98.331126-67.814569 149.192053 0 30.516556-13.562914 61.033113-37.298013 84.768212l-13.562914 13.562914c0 6.781457-3.390728 13.562914-3.390729 16.953642s3.390728 10.172185 3.390729 13.562914c6.781457 3.390728 10.172185 3.390728 16.953642 6.781457z" /></svg>
\ No newline at end of file
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index a98995c..a3a4fcd 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -7,7 +7,7 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
         path: '',
         id: 'tools',
         component: React.lazy(() => import('@/pages/tools')),
-        icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
+        icon: React.lazy(() => import('~icons/fatweb/home.jsx')),
         name: '主页',
         menu: true,
         auth: false
@@ -18,7 +18,7 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
         component: React.lazy(() => import('@/pages/tools')),
         name: '全部工具',
         titlePostfix: ' - 全部工具',
-        icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
+        icon: React.lazy(() => import('~icons/fatweb/tool.jsx')),
         menu: true,
         auth: false
     },

From de3e34b08549e6f1cc24dceada962ca3e5725855 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 14 Oct 2023 19:53:28 +0800
Subject: [PATCH 035/307] Add auto hide scrollbar to HideScrollbar

---
 .../css/components/common/hide-scrollbar.scss | 17 +++++++++
 src/components/common/HideScrollbar.tsx       | 38 ++++++++++++++++++-
 src/pages/ToolsFramework.tsx                  |  1 +
 3 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 2cf545e..32076ac 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -1,4 +1,5 @@
 @use '@/assets/css/constants' as constants;
+@use '@/assets/css/mixins' as mixins;
 
 .hide-scrollbar-mask {
   position: relative;
@@ -44,10 +45,26 @@
         background-color: constants.$font-secondary-color;
         transition: background-color .2s;
       }
+
       :hover {
         background-color: constants.$font-main-color;
       }
     }
+
+    &.hide {
+      display: block;
+      opacity: 0;
+      animation: 0.4s linear;
+
+      @include mixins.unique-keyframes {
+        0% {
+          opacity: 0.5;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    }
   }
 
   .vertical-scrollbar {
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index df8f916..944c772 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -14,6 +14,7 @@ interface HideScrollbarProps
     minHeight?: string | number
     scrollbarWidth?: string | number
     animationTransitionTime?: number
+    autoHideWaitingTime?: number
 }
 
 export interface HideScrollbarElement {
@@ -147,16 +148,20 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
     const lastScrollbarTouchPositionRef = useRef({ x: -1, y: -1 })
     const lastTouchPositionRef = useRef({ x: -1, y: -1 })
     const [refreshTime, setRefreshTime] = useState(0)
+
     const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
     const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
     const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
     const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false)
     const [verticalScrollbarOnTouch, setVerticalScrollbarOnTouch] = useState(false)
+    const [verticalScrollbarAutoHide, setVerticalScrollbarAutoHide] = useState(false)
+
     const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
     const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100)
     const [horizontalScrollbarPosition, setHorizontalScrollbarPosition] = useState(0)
     const [horizontalScrollbarOnClick, setHorizontalScrollbarOnClick] = useState(false)
     const [horizontalScrollbarOnTouch, setHorizontalScrollbarOnTouch] = useState(false)
+    const [horizontalScrollbarAutoHide, setHorizontalScrollbarAutoHide] = useState(false)
 
     const {
         isPreventScroll,
@@ -170,12 +175,37 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         minHeight,
         scrollbarWidth,
         animationTransitionTime,
+        autoHideWaitingTime,
         ..._props
     } = props
 
     const isPreventAnyScroll =
         isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll
 
+    useEffect(() => {
+        if (autoHideWaitingTime === undefined) {
+            return
+        }
+        setVerticalScrollbarAutoHide(false)
+        if (autoHideWaitingTime > 0) {
+            setTimeout(() => {
+                setVerticalScrollbarAutoHide(true)
+            }, autoHideWaitingTime)
+        }
+    }, [autoHideWaitingTime, verticalScrollbarPosition])
+
+    useEffect(() => {
+        if (autoHideWaitingTime === undefined) {
+            return
+        }
+        setHorizontalScrollbarAutoHide(false)
+        if (autoHideWaitingTime > 0) {
+            setTimeout(() => {
+                setHorizontalScrollbarAutoHide(true)
+            }, autoHideWaitingTime)
+        }
+    }, [autoHideWaitingTime, horizontalScrollbarPosition])
+
     const handleDefaultTouchStart = useCallback(
         (event: React.TouchEvent) => {
             if (event.touches.length !== 1 || isPreventScroll) {
@@ -506,7 +536,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                         ((isHiddenVerticalScrollbarWhenFull ?? true) &&
                             verticalScrollbarLength >= 100)
                     }
-                    className={'scrollbar vertical-scrollbar'}
+                    className={`scrollbar vertical-scrollbar${
+                        verticalScrollbarAutoHide ? ' hide' : ''
+                    }`}
                     style={{
                         height: maskRef.current ? maskRef.current?.clientHeight - 1 : undefined,
                         top: maskRef.current?.clientTop,
@@ -543,7 +575,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                         ((isHiddenHorizontalScrollbarWhenFull ?? true) &&
                             horizontalScrollbarLength >= 100)
                     }
-                    className={'scrollbar horizontal-scrollbar'}
+                    className={`scrollbar horizontal-scrollbar${
+                        horizontalScrollbarAutoHide ? ' hide' : ''
+                    }`}
                     style={{
                         width: maskRef.current ? maskRef.current?.clientWidth - 1 : undefined,
                         left: maskRef.current?.clientLeft,
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index fb3c76d..c29b28f 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -100,6 +100,7 @@ const ToolsFramework: React.FC = () => {
                                 isShowVerticalScrollbar={true}
                                 scrollbarWidth={2}
                                 animationTransitionTime={300}
+                                autoHideWaitingTime={800}
                                 ref={hideScrollbarRef}
                             >
                                 <ul>

From 8b5880fab5de8c05cd4fa8d755039a04b6c0cc8d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 14 Oct 2023 23:00:52 +0800
Subject: [PATCH 036/307] Add login to ToolsFramework

---
 src/AuthRoute.tsx                         |  5 +-
 src/assets/css/constants.scss             |  3 ++
 src/assets/css/pages/tools-framework.scss | 66 +++++++++++++++++++++--
 src/assets/svg/exit.svg                   |  1 +
 src/pages/ToolsFramework.tsx              | 58 ++++++++++++++++++--
 src/router/tools.tsx                      |  5 ++
 src/services/index.tsx                    |  4 +-
 src/utils/auth.ts                         |  7 +--
 src/utils/common.ts                       |  4 ++
 9 files changed, 136 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/svg/exit.svg

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index 7335e5e..35b6a77 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -1,5 +1,6 @@
 import { getLoginStatus } from '@/utils/auth.ts'
 import { PRODUCTION_NAME } from '@/constants/Common.constants.ts'
+import { getRedirectUrl } from '@/utils/common.ts'
 
 const AuthRoute = () => {
     const matches = useMatches()
@@ -16,9 +17,7 @@ const AuthRoute = () => {
         if (matches.some(({ handle }) => (handle as RouteHandle)?.auth) && !isLogin) {
             return (
                 <Navigate
-                    to={`/login?redirect=${encodeURIComponent(
-                        `${lastMatch.pathname}${location.search}`
-                    )}`}
+                    to={getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)}
                 />
             )
         }
diff --git a/src/assets/css/constants.scss b/src/assets/css/constants.scss
index 18e8338..3e6e1b5 100644
--- a/src/assets/css/constants.scss
+++ b/src/assets/css/constants.scss
@@ -1,6 +1,9 @@
 $origin-color: white;
 $main-color: #4E47BB;
 $secondary-color: #BAB8E5;
+$error-color: #ff4d4f;
+$error-secondary-color: #ff7875;
+$blue-color: #1677ff;
 $active-color: #EBECFFD;
 $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index b95691f..4ae1958 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -13,7 +13,6 @@ body {
   user-select: none;
   transition: all .3s;
   white-space: nowrap;
-  overflow: hidden;
 
   .title {
     display: flex;
@@ -21,6 +20,7 @@ body {
     font-weight: bold;
     padding: 10px 14px;
     color: constants.$main-color;
+    overflow: hidden;
 
     .icon-box {
       display: flex;
@@ -153,12 +153,10 @@ body {
               animation: 0.3s ease;
               @include mixins.unique-keyframes {
                 0% {
-                  display: block;
                   transform: translateX(-10px);
                   opacity: 0;
                 }
                 100% {
-                  display: block;
                   transform: translateX(0);
                   opacity: 1;
                 }
@@ -188,7 +186,7 @@ body {
     padding: 8px 14px;
     color: constants.$main-color;
 
-    .icon-box {
+    .icon-user {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -205,10 +203,27 @@ body {
 
     .text {
       flex: 1;
-      padding-left: 8px;
+      padding-left: 10px;
       font-size: 1.4em;
       color: constants.$font-main-color;
       user-select: text;
+
+      a{
+        color: constants.$main-color;
+        text-decoration: underline;
+      }
+    }
+
+    .icon-exit {
+      font-size: constants.$SIZE_ICON_XS;
+      color: constants.$error-color;
+      padding: 6px 10px;
+      cursor: pointer;
+
+      &:hover {
+        border-radius: 8px;
+        background-color: constants.$background-color;
+      }
     }
   }
 
@@ -234,9 +249,50 @@ body {
     }
 
     .footer {
+      position: relative;
       .text {
         display: none;
       }
+
+      .submenu-exit {
+        display: none;
+        position: absolute;
+        padding-left: 6px;
+        left: 100%;
+
+        .content {
+          padding: 8px;
+          border-radius: 8px;
+          background-color: constants.$origin-color;
+
+          .icon-exit {
+            padding: 4px 8px;
+            &:hover {
+              border-radius: 8px;
+              background-color: constants.$background-color;
+            }
+          }
+        }
+
+        &.hide {
+          display: none!important;
+        }
+      }
+
+      &:hover .submenu-exit {
+        display: block;
+        animation: 0.3s ease;
+        @include mixins.unique-keyframes {
+          0% {
+            transform: translateX(-10px);
+            opacity: 0;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/assets/svg/exit.svg b/src/assets/svg/exit.svg
new file mode 100644
index 0000000..12a1804
--- /dev/null
+++ b/src/assets/svg/exit.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M835.669333 554.666667h-473.173333A42.453333 42.453333 0 0 1 320 512a42.666667 42.666667 0 0 1 42.474667-42.666667h473.173333l-161.813333-161.834666a42.666667 42.666667 0 0 1 60.330666-60.330667l234.666667 234.666667a42.666667 42.666667 0 0 1 0 60.330666l-234.666667 234.666667a42.666667 42.666667 0 0 1-60.330666-60.330667L835.669333 554.666667zM554.666667 42.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333C137.578667 128 128 137.578667 128 149.482667v725.034666C128 886.4 137.6 896 149.525333 896H554.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333A106.816 106.816 0 0 1 42.666667 874.517333V149.482667A106.773333 106.773333 0 0 1 149.525333 42.666667H554.666667z" /></svg>
\ No newline at end of file
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index c29b28f..20f62a9 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -4,9 +4,15 @@ import '@/assets/css/pages/tools-framework.scss'
 import Icon from '@ant-design/icons'
 import { toolsJsonObjects } from '@/router/tools.tsx'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar.tsx'
-import { getLocalStorage, setLocalStorage } from '@/utils/common.ts'
+import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common.ts'
+import { getLoginStatus, logout } from '@/utils/auth.ts'
+import { NavLink, Outlet } from 'react-router-dom'
 
 const ToolsFramework: React.FC = () => {
+    const matches = useMatches()
+    const lastMatch = matches.reduce((_, second) => second)
+    const location = useLocation()
+    const navigate = useNavigate()
     const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const [submenuTop, setSubmenuTop] = useState(0)
     const [submenuLeft, setSubmenuLeft] = useState(0)
@@ -37,6 +43,21 @@ const ToolsFramework: React.FC = () => {
         }
     }
 
+    const handleClickAvatar = () => {
+        if (getLoginStatus()) {
+            navigate(`${lastMatch.pathname}${location.search}`)
+        } else {
+            navigate(getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`))
+        }
+    }
+
+    const handleLogout = () => {
+        logout()
+        setTimeout(() => {
+            window.location.reload()
+        }, 1500)
+    }
+
     return (
         <>
             <FitFullScreen className={'flex-horizontal'}>
@@ -183,13 +204,42 @@ const ToolsFramework: React.FC = () => {
                     </div>
                     <div className={'separate'} style={{ marginTop: 0, marginBottom: 0 }} />
                     <div className={'footer'}>
-                        <span className={'icon-box'}>
+                        <span className={'icon-user'} onClick={handleClickAvatar}>
                             <Icon component={IconFatwebUser} />
                         </span>
-                        <span className={'text'}>未登录</span>
+                        <span hidden={getLoginStatus()} className={'text'}>
+                            未
+                            <NavLink
+                                to={getRedirectUrl(
+                                    '/login',
+                                    `${lastMatch.pathname}${location.search}`
+                                )}
+                            >
+                                登录
+                            </NavLink>
+                        </span>
+                        <span hidden={!getLoginStatus()} className={'text'}>
+                            已登录
+                        </span>
+                        <div
+                            hidden={!getLoginStatus()}
+                            className={`submenu-exit${!getLoginStatus() ? ' hide' : ''}`}
+                        >
+                            <div className={'content'}>
+                                <span
+                                    hidden={!getLoginStatus()}
+                                    className={'icon-exit'}
+                                    onClick={handleLogout}
+                                >
+                                    <Icon component={IconFatwebExit} />
+                                </span>
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div className={'right-panel'}></div>
+                <div className={'right-panel'}>
+                    <Outlet />
+                </div>
             </FitFullScreen>
         </>
     )
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index a3a4fcd..997809a 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -309,4 +309,9 @@ const tools: RouteObject[] = toolsJsonObjects.map((value) => ({
     }))
 }))
 
+tools.push({
+    path: '*',
+    element: <Navigate to="/tools" replace />
+})
+
 export default tools
diff --git a/src/services/index.tsx b/src/services/index.tsx
index d89ba76..2117765 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -42,7 +42,7 @@ service.interceptors.request.use(
             ) {
                 await axios
                     .get(import.meta.env.VITE_API_TOKEN_URL, {
-                        headers: { token }
+                        headers: { Authorization: `Bearer ${token}` }
                     })
                     .then((value: AxiosResponse<_Response<Token>>) => {
                         const response = value.data
@@ -53,7 +53,7 @@ service.interceptors.request.use(
             }
 
             token = getToken()
-            config.headers.set('token', token)
+            config.headers.set('Authorization', `Bearer ${token}`)
         }
         return config
     },
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 097e112..22a7817 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,4 +1,4 @@
-import { clearLocalStorage, getCaptcha, getLocalStorage, setLocalStorage } from './common'
+import { getCaptcha, getLocalStorage, removeLocalStorage, setLocalStorage } from './common'
 import { SYSTEM_OK, TOKEN_NAME } from '@/constants/Common.constants'
 import request from '@/services'
 
@@ -12,8 +12,9 @@ export async function login(username: string, password: string) {
 }
 
 export function logout(): void {
-    void request.get('/logout').finally(() => {
-        clearLocalStorage()
+    void request.post('/logout').finally(() => {
+        removeLocalStorage('userInfo')
+        removeLocalStorage(TOKEN_NAME)
     })
 }
 
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 7d0f9ce..18bc410 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -134,3 +134,7 @@ function randomFloat(start: number, end: number): number {
 function randomColor(start: number, end: number): string {
     return `rgb(${randomInt(start, end)},${randomInt(start, end)},${randomInt(start, end)})`
 }
+
+export const getRedirectUrl = (path: string, redirectUrl: string): string => {
+    return `${path}?redirect=${encodeURIComponent(redirectUrl)}`
+}

From 7f709ac34158c50f304f12005937e2a6f47a6c90 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 14 Oct 2023 23:20:25 +0800
Subject: [PATCH 037/307] Recode old code

---
 build/resolvers/antd.ts |  4 ++--
 src/services/index.tsx  |  2 +-
 src/utils/auth.ts       | 16 ++++++++--------
 src/utils/common.ts     | 32 ++++++++++++++++----------------
 4 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/build/resolvers/antd.ts b/build/resolvers/antd.ts
index 469af1b..3d18000 100644
--- a/build/resolvers/antd.ts
+++ b/build/resolvers/antd.ts
@@ -1,4 +1,4 @@
-export function kebabCase(key: string): string {
+export const kebabCase = (key: string) => {
     const result: string = key.replace(/([A-Z])/g, ' $1').trim()
     return result.split(' ').join('-').toLowerCase()
 }
@@ -395,7 +395,7 @@ const isAntd = (compName: string): boolean => {
     return antdNames.has(compName)
 }
 
-export function AntDesignResolver(options: AntDesignResolverOptions = {}): ComponentResolver {
+export const AntDesignResolver = (options: AntDesignResolverOptions = {}): ComponentResolver => {
     return {
         type: 'component',
         resolve: (name: string) => {
diff --git a/src/services/index.tsx b/src/services/index.tsx
index 2117765..3d3a308 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -74,7 +74,7 @@ service.interceptors.response.use(
                         <strong>登录已过期</strong>
                     </>
                 )
-                setTimeout(function () {
+                setTimeout(() => {
                     location.reload()
                 }, 1500)
                 throw response?.data
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 22a7817..a923968 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -4,25 +4,25 @@ import request from '@/services'
 
 let captcha: Captcha
 
-export async function login(username: string, password: string) {
+export const login = async (username: string, password: string) => {
     return await request.post<Token>('/login', {
         username,
         password
     })
 }
 
-export function logout(): void {
+export const logout = () => {
     void request.post('/logout').finally(() => {
         removeLocalStorage('userInfo')
         removeLocalStorage(TOKEN_NAME)
     })
 }
 
-export function getLoginStatus(): boolean {
+export const getLoginStatus = () => {
     return getLocalStorage(TOKEN_NAME) !== null
 }
 
-export async function getUser(): Promise<User> {
+export const getUser = async (): Promise<User> => {
     if (getLocalStorage('userInfo') !== null) {
         return new Promise((resolve) => {
             resolve(JSON.parse(getLocalStorage('userInfo') as string) as User)
@@ -31,7 +31,7 @@ export async function getUser(): Promise<User> {
     return requestUser()
 }
 
-export async function requestUser(): Promise<User> {
+export const requestUser = async () => {
     let user: User | null
 
     await request.get<User>('/user/info').then((value) => {
@@ -50,17 +50,17 @@ export async function requestUser(): Promise<User> {
     })
 }
 
-export async function getUsername(): Promise<string> {
+export const getUsername = async () => {
     const user = await getUser()
 
     return user.username
 }
 
-export function getCaptchaSrc(): string {
+export const getCaptchaSrc = () => {
     captcha = getCaptcha(300, 150, 4)
     return captcha.base64Src
 }
 
-export function verifyCaptcha(value: string): boolean {
+export const verifyCaptcha = (value: string) => {
     return captcha.value.toLowerCase() === value.replace(/\s*/g, '').toLowerCase()
 }
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 18bc410..04d1244 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,6 +1,6 @@
 import { TOKEN_NAME } from '@/constants/Common.constants'
 
-export function getQueryVariable(variable: string): string | null {
+export const getQueryVariable = (variable: string) => {
     const query = window.location.search.substring(1)
     const vars = query.split('&')
     for (const value of vars) {
@@ -12,12 +12,12 @@ export function getQueryVariable(variable: string): string | null {
     return null
 }
 
-export function setCookie(
+export const setCookie = (
     name: string,
     value: string,
     daysToLive: number | null,
     path: string | null
-): void {
+) => {
     let cookie = `${name}=${encodeURIComponent(value)}`
 
     if (typeof daysToLive === 'number') {
@@ -31,15 +31,15 @@ export function setCookie(
     document.cookie = cookie
 }
 
-export function setLocalStorage(name: string, value: string): void {
+export const setLocalStorage = (name: string, value: string) => {
     localStorage.setItem(name, value)
 }
 
-export function setToken(token: string): void {
+export const setToken = (token: string) => {
     setLocalStorage(TOKEN_NAME, token)
 }
 
-export function getCookie(name: string): string | null {
+export const getCookie = (name: string) => {
     const cookieArr = document.cookie.split(';')
 
     for (const cookie of cookieArr) {
@@ -52,31 +52,31 @@ export function getCookie(name: string): string | null {
     return null
 }
 
-export function getLocalStorage(name: string): string | null {
+export const getLocalStorage = (name: string) => {
     return localStorage.getItem(name)
 }
 
-export function getToken(): string | null {
+export const getToken = () => {
     return getLocalStorage(TOKEN_NAME)
 }
 
-export function removeCookie(name: string): void {
+export const removeCookie = (name: string) => {
     document.cookie = `${name}=; max-age=0`
 }
 
-export function removeLocalStorage(name: string): void {
+export const removeLocalStorage = (name: string) => {
     localStorage.removeItem(name)
 }
 
-export function removeToken(): void {
+export const removeToken = () => {
     removeLocalStorage(TOKEN_NAME)
 }
 
-export function clearLocalStorage(): void {
+export const clearLocalStorage = () => {
     localStorage.clear()
 }
 
-export function getCaptcha(width: number, high: number, num: number): Captcha {
+export const getCaptcha = (width: number, high: number, num: number) => {
     const CHARTS = '23456789ABCDEFGHJKLMNPRSTUVWXYZabcdefghijklmnpqrstuvwxyz'.split('')
 
     const canvas = document.createElement('canvas')
@@ -116,7 +116,7 @@ export function getCaptcha(width: number, high: number, num: number): Captcha {
     }
 }
 
-function randomInt(start: number, end: number): number {
+const randomInt = (start: number, end: number) => {
     if (start > end) {
         const t = start
         start = end
@@ -127,11 +127,11 @@ function randomInt(start: number, end: number): number {
     return start + Math.floor(Math.random() * (end - start))
 }
 
-function randomFloat(start: number, end: number): number {
+const randomFloat = (start: number, end: number) => {
     return start + Math.random() * (end - start)
 }
 
-function randomColor(start: number, end: number): string {
+const randomColor = (start: number, end: number) => {
     return `rgb(${randomInt(start, end)},${randomInt(start, end)},${randomInt(start, end)})`
 }
 

From 6e31eb6e9d10f42adb039d2d943d366d659e3d12 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 14 Oct 2023 23:20:48 +0800
Subject: [PATCH 038/307] Optimize stylesheet in ToolsFramework

---
 src/assets/css/pages/tools-framework.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 4ae1958..f9e08cf 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -192,8 +192,8 @@ body {
       align-items: center;
       margin-left: 4px;
       padding: 10px;
-      width: 32px;
-      height: 32px;
+      width: 36px;
+      height: 36px;
       font-size: constants.$SIZE_ICON_XS;
       border: 2px constants.$font-secondary-color solid;
       color: constants.$font-secondary-color;

From aa07361813f91b35469cce809a016d07c91299b9 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 15 Oct 2023 12:51:59 +0800
Subject: [PATCH 039/307] Fix logout bug

---
 src/pages/ToolsFramework.tsx | 9 +++++----
 src/utils/auth.ts            | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 20f62a9..c386c86 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -52,10 +52,11 @@ const ToolsFramework: React.FC = () => {
     }
 
     const handleLogout = () => {
-        logout()
-        setTimeout(() => {
-            window.location.reload()
-        }, 1500)
+        void logout().finally(() => {
+            setTimeout(() => {
+                window.location.reload()
+            }, 1500)
+        })
     }
 
     return (
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index a923968..aa3fc82 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -11,8 +11,8 @@ export const login = async (username: string, password: string) => {
     })
 }
 
-export const logout = () => {
-    void request.post('/logout').finally(() => {
+export const logout = async () => {
+    return request.post('/logout').finally(() => {
         removeLocalStorage('userInfo')
         removeLocalStorage(TOKEN_NAME)
     })

From 2d1eb8d9e231515ead26f75c94d996c8c6bd7eb5 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 15 Oct 2023 16:46:35 +0800
Subject: [PATCH 040/307] Optimize remove token

---
 src/services/index.tsx | 14 ++++++++++++--
 src/utils/auth.ts      |  5 ++---
 src/utils/common.ts    |  1 +
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/services/index.tsx b/src/services/index.tsx
index 3d3a308..8aca097 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -1,6 +1,6 @@
 import axios, { type AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 import jwtDecode, { JwtPayload } from 'jwt-decode'
-import { clearLocalStorage, getToken, setToken } from '@/utils/common'
+import { getToken, removeToken, setToken } from '@/utils/common'
 import {
     SYSTEM_ACCESS_DENIED,
     SYSTEM_TOKEN_HAS_EXPIRED,
@@ -66,9 +66,19 @@ service.interceptors.response.use(
     (response: AxiosResponse<_Response<never>>) => {
         switch (response.data.code) {
             case SYSTEM_UNAUTHORIZED:
+                removeToken()
+                void message.error(
+                    <>
+                        <strong>未登录</strong>
+                    </>
+                )
+                setTimeout(() => {
+                    location.reload()
+                }, 1500)
+                throw response?.data
             case SYSTEM_TOKEN_ILLEGAL:
             case SYSTEM_TOKEN_HAS_EXPIRED:
-                clearLocalStorage()
+                removeToken()
                 void message.error(
                     <>
                         <strong>登录已过期</strong>
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index aa3fc82..c2f3155 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,4 +1,4 @@
-import { getCaptcha, getLocalStorage, removeLocalStorage, setLocalStorage } from './common'
+import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common'
 import { SYSTEM_OK, TOKEN_NAME } from '@/constants/Common.constants'
 import request from '@/services'
 
@@ -13,8 +13,7 @@ export const login = async (username: string, password: string) => {
 
 export const logout = async () => {
     return request.post('/logout').finally(() => {
-        removeLocalStorage('userInfo')
-        removeLocalStorage(TOKEN_NAME)
+        removeToken()
     })
 }
 
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 04d1244..c74b23e 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -69,6 +69,7 @@ export const removeLocalStorage = (name: string) => {
 }
 
 export const removeToken = () => {
+    removeLocalStorage('userInfo')
     removeLocalStorage(TOKEN_NAME)
 }
 

From 2af3219e593cd150fe14c4762de6de577c2d9082 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 15 Oct 2023 18:16:30 +0800
Subject: [PATCH 041/307] Optimize code

---
 src/AuthRoute.tsx                     |  6 +--
 src/components/common/LoadingMask.tsx |  2 +-
 src/constants/Common.constants.ts     | 67 ---------------------------
 src/constants/common.constants.ts     | 35 ++++++++++++++
 src/constants/urls.constants.ts       |  3 ++
 src/pages/HomeFramework.tsx           |  2 +-
 src/pages/Login.tsx                   |  6 +--
 src/pages/ToolsFramework.tsx          |  8 ++--
 src/services/index.tsx                |  2 +-
 src/utils/auth.ts                     | 15 +++---
 src/utils/common.ts                   | 10 ++--
 11 files changed, 64 insertions(+), 92 deletions(-)
 delete mode 100644 src/constants/Common.constants.ts
 create mode 100644 src/constants/common.constants.ts
 create mode 100644 src/constants/urls.constants.ts

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index 35b6a77..c3e3cda 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -1,6 +1,6 @@
-import { getLoginStatus } from '@/utils/auth.ts'
-import { PRODUCTION_NAME } from '@/constants/Common.constants.ts'
-import { getRedirectUrl } from '@/utils/common.ts'
+import { getLoginStatus } from '@/utils/auth'
+import { PRODUCTION_NAME } from '@/constants/common.constants'
+import { getRedirectUrl } from '@/utils/common'
 
 const AuthRoute = () => {
     const matches = useMatches()
diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx
index 84c09e8..86d2548 100644
--- a/src/components/common/LoadingMask.tsx
+++ b/src/components/common/LoadingMask.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/loading-mask.scss'
 import FitFullScreen from '@/components/common/FitFullScreen'
-import { COLOR_FONT_MAIN } from '@/constants/Common.constants'
+import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 
 const LoadingMask: React.FC = () => {
     const loadingIcon = (
diff --git a/src/constants/Common.constants.ts b/src/constants/Common.constants.ts
deleted file mode 100644
index d7b32ad..0000000
--- a/src/constants/Common.constants.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-const PRODUCTION_NAME = 'FatWeb'
-const TOKEN_NAME = 'JWT_TOKEN'
-const COLOR_PRODUCTION = '#00D4FF'
-const COLOR_BACKGROUND = '#F5F5F5'
-const COLOR_TOP = 'rgba(234,46,13,0.85)'
-const COLOR_FONT_MAIN = '#4D4D4D'
-const COLOR_FONT_SECONDARY = '#9E9E9E'
-const SIZE_ICON_XS = '16px'
-const SIZE_ICON_SM = '20px'
-const SIZE_ICON_MD = '24px'
-const SIZE_ICON_LG = '32px'
-const SIZE_ICON_XL = '64px'
-
-/**
- * Response code
- */
-const SYSTEM_OK = 10000
-const SYSTEM_LOGIN_SUCCESS = 10020
-const SYSTEM_PASSWORD_CHANGE_SUCCESS = 10021
-const SYSTEM_LOGOUT_SUCCESS = 10022
-const SYSTEM_TOKEN_RENEW_SUCCESS = 10023
-const SYSTEM_UNAUTHORIZED = 10030
-const SYSTEM_USERNAME_NOT_FOUND = 10031
-const SYSTEM_ACCESS_DENIED = 10032
-const SYSTEM_USER_DISABLE = 10033
-const SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR = 10034
-const SYSTEM_OLD_PASSWORD_NOT_MATCH = 10035
-const SYSTEM_LOGOUT_FAILED = 10036
-const SYSTEM_TOKEN_ILLEGAL = 10037
-const SYSTEM_TOKEN_HAS_EXPIRED = 10038
-const SYSTEM_REQUEST_ILLEGAL = 10040
-const SYSTEM_ARGUMENT_NOT_VALID = 10041
-const SYSTEM_ERROR = 10050
-const SYSTEM_TIMEOUT = 10051
-
-export {
-    PRODUCTION_NAME,
-    TOKEN_NAME,
-    COLOR_PRODUCTION,
-    COLOR_BACKGROUND,
-    COLOR_FONT_MAIN,
-    COLOR_FONT_SECONDARY,
-    COLOR_TOP,
-    SIZE_ICON_XS,
-    SIZE_ICON_SM,
-    SIZE_ICON_MD,
-    SIZE_ICON_LG,
-    SIZE_ICON_XL,
-    SYSTEM_OK,
-    SYSTEM_LOGIN_SUCCESS,
-    SYSTEM_PASSWORD_CHANGE_SUCCESS,
-    SYSTEM_LOGOUT_SUCCESS,
-    SYSTEM_TOKEN_RENEW_SUCCESS,
-    SYSTEM_UNAUTHORIZED,
-    SYSTEM_USERNAME_NOT_FOUND,
-    SYSTEM_ACCESS_DENIED,
-    SYSTEM_USER_DISABLE,
-    SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR,
-    SYSTEM_OLD_PASSWORD_NOT_MATCH,
-    SYSTEM_LOGOUT_FAILED,
-    SYSTEM_TOKEN_ILLEGAL,
-    SYSTEM_TOKEN_HAS_EXPIRED,
-    SYSTEM_REQUEST_ILLEGAL,
-    SYSTEM_ARGUMENT_NOT_VALID,
-    SYSTEM_ERROR,
-    SYSTEM_TIMEOUT
-}
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
new file mode 100644
index 0000000..6ca7f6a
--- /dev/null
+++ b/src/constants/common.constants.ts
@@ -0,0 +1,35 @@
+export const PRODUCTION_NAME = 'FatWeb'
+export const STORAGE_TOKEN_KEY = 'JWT_TOKEN'
+export const STORAGE_USER_INFO_KEY = 'USER_INFO'
+export const COLOR_PRODUCTION = '#00D4FF'
+export const COLOR_BACKGROUND = '#F5F5F5'
+export const COLOR_TOP = 'rgba(234,46,13,0.85)'
+export const COLOR_FONT_MAIN = '#4D4D4D'
+export const COLOR_FONT_SECONDARY = '#9E9E9E'
+export const SIZE_ICON_XS = '16px'
+export const SIZE_ICON_SM = '20px'
+export const SIZE_ICON_MD = '24px'
+export const SIZE_ICON_LG = '32px'
+export const SIZE_ICON_XL = '64px'
+
+/**
+ * Response code
+ */
+export const SYSTEM_OK = 10000
+export const SYSTEM_LOGIN_SUCCESS = 10020
+export const SYSTEM_PASSWORD_CHANGE_SUCCESS = 10021
+export const SYSTEM_LOGOUT_SUCCESS = 10022
+export const SYSTEM_TOKEN_RENEW_SUCCESS = 10023
+export const SYSTEM_UNAUTHORIZED = 10030
+export const SYSTEM_USERNAME_NOT_FOUND = 10031
+export const SYSTEM_ACCESS_DENIED = 10032
+export const SYSTEM_USER_DISABLE = 10033
+export const SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR = 10034
+export const SYSTEM_OLD_PASSWORD_NOT_MATCH = 10035
+export const SYSTEM_LOGOUT_FAILED = 10036
+export const SYSTEM_TOKEN_ILLEGAL = 10037
+export const SYSTEM_TOKEN_HAS_EXPIRED = 10038
+export const SYSTEM_REQUEST_ILLEGAL = 10040
+export const SYSTEM_ARGUMENT_NOT_VALID = 10041
+export const SYSTEM_ERROR = 10050
+export const SYSTEM_TIMEOUT = 10051
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
new file mode 100644
index 0000000..d9cd425
--- /dev/null
+++ b/src/constants/urls.constants.ts
@@ -0,0 +1,3 @@
+export const URL_API_LOGIN = '/login'
+export const URL_API_TOKEN = '/token'
+export const URL_API_LOGOUT = '/logout'
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index 56993c1..c09e00d 100644
--- a/src/pages/HomeFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -4,7 +4,7 @@ import router from '@/router'
 import LoadingMask from '@/components/common/LoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import Icon from '@ant-design/icons'
-import { COLOR_FONT_SECONDARY } from '@/constants/Common.constants.ts'
+import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
 import { NavLink } from 'react-router-dom'
 
 export const HomeFrameworkContext = createContext<{
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 92a8bac..e4cb933 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { login } from '@/utils/auth.ts'
+import { login } from '@/utils/auth'
 import {
     SYSTEM_LOGIN_SUCCESS,
     SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR,
     SYSTEM_USER_DISABLE,
     SYSTEM_USERNAME_NOT_FOUND
-} from '@/constants/Common.constants.ts'
-import { setToken } from '@/utils/common.ts'
+} from '@/constants/common.constants'
+import { setToken } from '@/utils/common'
 import '@/assets/css/pages/login.scss'
 
 const Login: React.FC = () => {
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index c386c86..ebaa939 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -2,10 +2,10 @@ import React from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import '@/assets/css/pages/tools-framework.scss'
 import Icon from '@ant-design/icons'
-import { toolsJsonObjects } from '@/router/tools.tsx'
-import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar.tsx'
-import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common.ts'
-import { getLoginStatus, logout } from '@/utils/auth.ts'
+import { toolsJsonObjects } from '@/router/tools'
+import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
+import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common'
+import { getLoginStatus, logout } from '@/utils/auth'
 import { NavLink, Outlet } from 'react-router-dom'
 
 const ToolsFramework: React.FC = () => {
diff --git a/src/services/index.tsx b/src/services/index.tsx
index 8aca097..8106e18 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -7,7 +7,7 @@ import {
     SYSTEM_TOKEN_ILLEGAL,
     SYSTEM_TOKEN_RENEW_SUCCESS,
     SYSTEM_UNAUTHORIZED
-} from '@/constants/Common.constants'
+} from '@/constants/common.constants'
 import { message } from 'antd'
 
 const service: AxiosInstance = axios.create({
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index c2f3155..f58a9ac 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,30 +1,31 @@
 import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common'
-import { SYSTEM_OK, TOKEN_NAME } from '@/constants/Common.constants'
+import { SYSTEM_OK, STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
 import request from '@/services'
+import { URL_API_LOGIN, URL_API_LOGOUT } from '@/constants/urls.constants'
 
 let captcha: Captcha
 
 export const login = async (username: string, password: string) => {
-    return await request.post<Token>('/login', {
+    return await request.post<Token>(URL_API_LOGIN, {
         username,
         password
     })
 }
 
 export const logout = async () => {
-    return request.post('/logout').finally(() => {
+    return request.post(URL_API_LOGOUT).finally(() => {
         removeToken()
     })
 }
 
 export const getLoginStatus = () => {
-    return getLocalStorage(TOKEN_NAME) !== null
+    return getLocalStorage(STORAGE_TOKEN_KEY) !== null
 }
 
 export const getUser = async (): Promise<User> => {
-    if (getLocalStorage('userInfo') !== null) {
+    if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) {
         return new Promise((resolve) => {
-            resolve(JSON.parse(getLocalStorage('userInfo') as string) as User)
+            resolve(JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as User)
         })
     }
     return requestUser()
@@ -37,7 +38,7 @@ export const requestUser = async () => {
         const response = value.data
         if (response.code === SYSTEM_OK) {
             user = response.data
-            setLocalStorage('userInfo', JSON.stringify(user))
+            setLocalStorage(STORAGE_USER_INFO_KEY, JSON.stringify(user))
         }
     })
 
diff --git a/src/utils/common.ts b/src/utils/common.ts
index c74b23e..ebae83a 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,4 +1,4 @@
-import { TOKEN_NAME } from '@/constants/Common.constants'
+import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
 
 export const getQueryVariable = (variable: string) => {
     const query = window.location.search.substring(1)
@@ -36,7 +36,7 @@ export const setLocalStorage = (name: string, value: string) => {
 }
 
 export const setToken = (token: string) => {
-    setLocalStorage(TOKEN_NAME, token)
+    setLocalStorage(STORAGE_TOKEN_KEY, token)
 }
 
 export const getCookie = (name: string) => {
@@ -57,7 +57,7 @@ export const getLocalStorage = (name: string) => {
 }
 
 export const getToken = () => {
-    return getLocalStorage(TOKEN_NAME)
+    return getLocalStorage(STORAGE_TOKEN_KEY)
 }
 
 export const removeCookie = (name: string) => {
@@ -69,8 +69,8 @@ export const removeLocalStorage = (name: string) => {
 }
 
 export const removeToken = () => {
-    removeLocalStorage('userInfo')
-    removeLocalStorage(TOKEN_NAME)
+    removeLocalStorage(STORAGE_USER_INFO_KEY)
+    removeLocalStorage(STORAGE_TOKEN_KEY)
 }
 
 export const clearLocalStorage = () => {

From a0903274297edacd33dc92202fbc468eb22f91a7 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 16 Oct 2023 15:31:58 +0800
Subject: [PATCH 042/307] Add exit waiting to ToolsFramework

---
 src/pages/ToolsFramework.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index ebaa939..c997eff 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -17,6 +17,7 @@ const ToolsFramework: React.FC = () => {
     const [submenuTop, setSubmenuTop] = useState(0)
     const [submenuLeft, setSubmenuLeft] = useState(0)
     const [hideSidebar, setHideSidebar] = useState(getLocalStorage('hideSidebar') === 'false')
+    const [exiting, setExiting] = useState(false)
 
     const switchSidebar = () => {
         setHideSidebar(!hideSidebar)
@@ -52,6 +53,11 @@ const ToolsFramework: React.FC = () => {
     }
 
     const handleLogout = () => {
+        if (exiting) {
+            return
+        }
+
+        setExiting(true)
         void logout().finally(() => {
             setTimeout(() => {
                 window.location.reload()
@@ -232,7 +238,10 @@ const ToolsFramework: React.FC = () => {
                                     className={'icon-exit'}
                                     onClick={handleLogout}
                                 >
-                                    <Icon component={IconFatwebExit} />
+                                    <Icon
+                                        component={exiting ? IconFatwebLoading : IconFatwebExit}
+                                        spin={exiting}
+                                    />
                                 </span>
                             </div>
                         </div>

From 75962aafc9721f3a9575152b533ad2d2519f8e1f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 17 Oct 2023 11:32:39 +0800
Subject: [PATCH 043/307] Optimize router

---
 src/global.d.ts              |  7 +--
 src/pages/ToolsFramework.tsx | 16 +++----
 src/router/home.tsx          | 34 ++++++++++++++
 src/router/index.tsx         | 89 ++++++++++++++++--------------------
 src/router/tools.tsx         | 42 ++---------------
 5 files changed, 91 insertions(+), 97 deletions(-)
 create mode 100644 src/router/home.tsx

diff --git a/src/global.d.ts b/src/global.d.ts
index e64304b..36438e0 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -10,9 +10,10 @@ interface ImportMeta {
     readonly env: ImportMetaEnv
 }
 
-type ToolsJsonObject = {
+type RouteJsonObject = {
     path: string
-    id: string
+    id?: string
+    element?: React.JSX.Element
     component?: React.ComponentType
     name?: string
     titlePrefix?: string
@@ -21,7 +22,7 @@ type ToolsJsonObject = {
     icon?: IconComponent
     menu?: boolean
     auth?: boolean
-    children?: ToolsJsonObject[]
+    children?: RouteJsonObject[]
 }
 
 type RouteHandle = {
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index c997eff..27d51cc 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import '@/assets/css/pages/tools-framework.scss'
 import Icon from '@ant-design/icons'
-import { toolsJsonObjects } from '@/router/tools'
+import { tools } from '@/router/tools'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common'
 import { getLoginStatus, logout } from '@/utils/auth'
@@ -88,14 +88,14 @@ const ToolsFramework: React.FC = () => {
                                         }
                                     >
                                         <div className={'icon-box'}>
-                                            {toolsJsonObjects[0].icon ? (
+                                            {tools[0].icon ? (
                                                 <Icon
                                                     className={'icon'}
-                                                    component={toolsJsonObjects[0].icon}
+                                                    component={tools[0].icon}
                                                 />
                                             ) : undefined}
                                         </div>
-                                        <span className={'text'}>{toolsJsonObjects[0].name}</span>
+                                        <span className={'text'}>{tools[0].name}</span>
                                     </NavLink>
                                 </div>
                             </li>
@@ -108,14 +108,14 @@ const ToolsFramework: React.FC = () => {
                                         }
                                     >
                                         <div className={'icon-box'}>
-                                            {toolsJsonObjects[1].icon ? (
+                                            {tools[1].icon ? (
                                                 <Icon
                                                     className={'icon'}
-                                                    component={toolsJsonObjects[1].icon}
+                                                    component={tools[1].icon}
                                                 />
                                             ) : undefined}
                                         </div>
-                                        <span className={'text'}>{toolsJsonObjects[1].name}</span>
+                                        <span className={'text'}>{tools[1].name}</span>
                                     </NavLink>
                                 </div>
                             </li>
@@ -132,7 +132,7 @@ const ToolsFramework: React.FC = () => {
                                 ref={hideScrollbarRef}
                             >
                                 <ul>
-                                    {toolsJsonObjects.map((tool) => {
+                                    {tools.map((tool) => {
                                         return tool.menu &&
                                             tool.id !== 'tools' &&
                                             tool.id !== 'tools-all' ? (
diff --git a/src/router/home.tsx b/src/router/home.tsx
new file mode 100644
index 0000000..50792a6
--- /dev/null
+++ b/src/router/home.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+const home: RouteJsonObject[] = [
+    {
+        path: '',
+        id: 'home',
+        component: React.lazy(() => import('@/pages/home')),
+        name: '主页',
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'https://blog.fatweb.top',
+        id: 'url-blog',
+        name: '博客',
+        menu: true
+    },
+    {
+        path: '/tools',
+        id: 'url-tools',
+        children: [
+            {
+                path: 'translation',
+                id: 'url-tools-translation',
+                name: '翻译',
+                menu: true
+            }
+        ],
+        name: '工具',
+        menu: true
+    }
+]
+
+export default home
diff --git a/src/router/index.tsx b/src/router/index.tsx
index ea360d9..2259f62 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,74 +1,36 @@
 import React from 'react'
 import tools from '@/router/tools'
+import home from '@/router/home'
 
-const routes: RouteObject[] = [
+const root: RouteJsonObject[] = [
     {
         path: '/',
-        Component: React.lazy(() => import('@/AuthRoute')),
+        component: React.lazy(() => import('@/AuthRoute')),
         children: [
             {
                 path: '/login',
                 id: 'login',
-                Component: React.lazy(() => import('@/pages/Login'))
+                component: React.lazy(() => import('@/pages/Login'))
             },
             {
                 path: '/loading',
                 id: 'loading',
-                Component: React.lazy(() => import('@/components/common/LoadingMask'))
+                component: React.lazy(() => import('@/components/common/LoadingMask'))
             },
             {
                 path: '/tools',
                 id: 'toolsFramework',
-                Component: React.lazy(() => import('@/pages/ToolsFramework')),
+                component: React.lazy(() => import('@/pages/ToolsFramework')),
                 children: tools,
-                handle: {
-                    name: '工具',
-                    title: '工具',
-                    auth: false
-                }
+                name: '工具',
+                title: '工具',
+                auth: false
             },
             {
                 path: '',
                 id: 'homeFramework',
-                Component: React.lazy(() => import('@/pages/HomeFramework')),
-                children: [
-                    {
-                        path: '',
-                        id: 'home',
-                        Component: React.lazy(() => import('@/pages/home')),
-                        handle: {
-                            name: '主页',
-                            menu: true,
-                            auth: false
-                        }
-                    },
-                    {
-                        path: 'https://blog.fatweb.top',
-                        id: 'url-blog',
-                        handle: {
-                            name: '博客',
-                            menu: true
-                        }
-                    },
-                    {
-                        path: '/tools',
-                        id: 'url-tools',
-                        children: [
-                            {
-                                path: 'translation',
-                                id: 'url-tools-translation',
-                                handle: {
-                                    name: '翻译',
-                                    menu: true
-                                }
-                            }
-                        ],
-                        handle: {
-                            name: '工具',
-                            menu: true
-                        }
-                    }
-                ]
+                component: React.lazy(() => import('@/pages/HomeFramework')),
+                children: home
             },
             {
                 path: '*',
@@ -78,5 +40,34 @@ const routes: RouteObject[] = [
     }
 ]
 
+const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => {
+    return jsonObject.map((value) => ({
+        path: value.path,
+        id: value.id,
+        element: value.element,
+        Component: value.component,
+        handle: {
+            name: value.name,
+            titlePrefix: value.titlePrefix,
+            title: value.title,
+            titlePostfix: value.titlePostfix,
+            icon: value.icon,
+            menu: value.menu,
+            auth: value.auth
+        },
+        children:
+            value.children &&
+            mapJsonToRoute(value.children).map((sub) => {
+                const handle = sub.handle as RouteHandle
+                if (!handle.title) {
+                    handle.title = value.title
+                }
+                return sub
+            })
+    }))
+}
+
+const routes = mapJsonToRoute(root)
+
 const router = createBrowserRouter(routes)
 export default router
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 997809a..89a38ff 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
 
-const defaultTitle = '氮工具'
-
-export const toolsJsonObjects: ToolsJsonObject[] = [
+export const tools: RouteJsonObject[] = [
     {
         path: '',
         id: 'tools',
@@ -277,41 +275,11 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
                 auth: false
             }
         ]
+    },
+    {
+        path: '*',
+        element: <Navigate to="/tools" replace />
     }
 ]
 
-const tools: RouteObject[] = toolsJsonObjects.map((value) => ({
-    path: value.path,
-    id: value.id,
-    Component: value.component,
-    handle: {
-        name: value.name,
-        titlePrefix: value.titlePrefix,
-        title: value.title ?? defaultTitle,
-        titlePostfix: value.titlePostfix,
-        icon: value.icon,
-        menu: value.menu,
-        auth: value.auth
-    },
-    children: value.children?.map((value) => ({
-        path: value.path,
-        id: value.id,
-        Component: value.component,
-        handle: {
-            name: value.name,
-            titlePrefix: value.titlePrefix,
-            title: value.title ?? defaultTitle,
-            titlePostfix: value.titlePostfix,
-            icon: value.icon,
-            menu: value.menu,
-            auth: value.auth
-        }
-    }))
-}))
-
-tools.push({
-    path: '*',
-    element: <Navigate to="/tools" replace />
-})
-
 export default tools

From 21450cc753157fdb2bf84720076d4e5e30366be2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 17 Oct 2023 11:49:57 +0800
Subject: [PATCH 044/307] Optimize router

---
 src/router/index.tsx | 60 +++++++++++++++++++++++---------------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/router/index.tsx b/src/router/index.tsx
index 2259f62..da0ff94 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -2,6 +2,36 @@ import React from 'react'
 import tools from '@/router/tools'
 import home from '@/router/home'
 
+const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => {
+    return jsonObject.map((value) => ({
+        path: value.path,
+        id: value.id,
+        element: value.element,
+        Component: value.component,
+        handle: {
+            name: value.name,
+            titlePrefix: value.titlePrefix,
+            title: value.title,
+            titlePostfix: value.titlePostfix,
+            icon: value.icon,
+            menu: value.menu,
+            auth: value.auth
+        },
+        children: value.children && mapJsonToRoute(value.children)
+    }))
+}
+
+const setTitle = (jsonObject: RouteJsonObject[], title: string): RouteJsonObject[] => {
+    return jsonObject.map((value) => {
+        if (!value.title) {
+            value.title = title
+        }
+        value.children && setTitle(value.children, title)
+
+        return value
+    })
+}
+
 const root: RouteJsonObject[] = [
     {
         path: '/',
@@ -21,9 +51,8 @@ const root: RouteJsonObject[] = [
                 path: '/tools',
                 id: 'toolsFramework',
                 component: React.lazy(() => import('@/pages/ToolsFramework')),
-                children: tools,
+                children: setTitle(tools, '氮工具'),
                 name: '工具',
-                title: '工具',
                 auth: false
             },
             {
@@ -40,33 +69,6 @@ const root: RouteJsonObject[] = [
     }
 ]
 
-const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => {
-    return jsonObject.map((value) => ({
-        path: value.path,
-        id: value.id,
-        element: value.element,
-        Component: value.component,
-        handle: {
-            name: value.name,
-            titlePrefix: value.titlePrefix,
-            title: value.title,
-            titlePostfix: value.titlePostfix,
-            icon: value.icon,
-            menu: value.menu,
-            auth: value.auth
-        },
-        children:
-            value.children &&
-            mapJsonToRoute(value.children).map((sub) => {
-                const handle = sub.handle as RouteHandle
-                if (!handle.title) {
-                    handle.title = value.title
-                }
-                return sub
-            })
-    }))
-}
-
 const routes = mapJsonToRoute(root)
 
 const router = createBrowserRouter(routes)

From 491fb75be8a0038fdba69b07eddf8c09ba06e56c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 17 Oct 2023 17:42:34 +0800
Subject: [PATCH 045/307] Optimize import

---
 src/AuthRoute.tsx           | 2 +-
 src/pages/HomeFramework.tsx | 7 +++----
 src/pages/Login.tsx         | 4 ++--
 src/services/index.tsx      | 2 +-
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index c3e3cda..c131a0b 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -1,5 +1,5 @@
-import { getLoginStatus } from '@/utils/auth'
 import { PRODUCTION_NAME } from '@/constants/common.constants'
+import { getLoginStatus } from '@/utils/auth'
 import { getRedirectUrl } from '@/utils/common'
 
 const AuthRoute = () => {
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index c09e00d..b16e2ec 100644
--- a/src/pages/HomeFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -1,11 +1,10 @@
 import React from 'react'
-import '@/assets/css/pages/home-framework.scss'
+import Icon from '@ant-design/icons'
 import router from '@/router'
+import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
+import '@/assets/css/pages/home-framework.scss'
 import LoadingMask from '@/components/common/LoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
-import Icon from '@ant-design/icons'
-import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
-import { NavLink } from 'react-router-dom'
 
 export const HomeFrameworkContext = createContext<{
     navbarHiddenState: {
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index e4cb933..0efc6a7 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import { login } from '@/utils/auth'
 import {
     SYSTEM_LOGIN_SUCCESS,
     SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR,
     SYSTEM_USER_DISABLE,
     SYSTEM_USERNAME_NOT_FOUND
 } from '@/constants/common.constants'
-import { setToken } from '@/utils/common'
 import '@/assets/css/pages/login.scss'
+import { setToken } from '@/utils/common'
+import { login } from '@/utils/auth'
 
 const Login: React.FC = () => {
     const [messageApi, contextHolder] = message.useMessage()
diff --git a/src/services/index.tsx b/src/services/index.tsx
index 8106e18..d509f81 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -1,5 +1,6 @@
 import axios, { type AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 import jwtDecode, { JwtPayload } from 'jwt-decode'
+import { message } from 'antd'
 import { getToken, removeToken, setToken } from '@/utils/common'
 import {
     SYSTEM_ACCESS_DENIED,
@@ -8,7 +9,6 @@ import {
     SYSTEM_TOKEN_RENEW_SUCCESS,
     SYSTEM_UNAUTHORIZED
 } from '@/constants/common.constants'
-import { message } from 'antd'
 
 const service: AxiosInstance = axios.create({
     baseURL: import.meta.env.VITE_API_URL,

From 14380d42dce322c12541e6ca62ea8f3b5d1f7a11 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 17 Oct 2023 17:46:52 +0800
Subject: [PATCH 046/307] Add Sidebar component

---
 src/assets/css/components/common/sidebar.scss | 301 ++++++++++++++++++
 src/assets/css/pages/tools-framework.scss     | 288 -----------------
 .../common/sidebar/SidebarFooter.tsx          |  64 ++++
 src/components/common/sidebar/SidebarItem.tsx |  60 ++++
 .../common/sidebar/SidebarItemList.tsx        |   7 +
 .../common/sidebar/SidebarScroll.tsx          |  34 ++
 .../common/sidebar/SidebarSeparate.tsx        |  11 +
 .../common/sidebar/SidebarSubmenu.tsx         |  22 ++
 src/components/common/sidebar/index.tsx       |  44 +++
 src/pages/ToolsFramework.tsx                  | 290 ++++-------------
 10 files changed, 597 insertions(+), 524 deletions(-)
 create mode 100644 src/assets/css/components/common/sidebar.scss
 create mode 100644 src/components/common/sidebar/SidebarFooter.tsx
 create mode 100644 src/components/common/sidebar/SidebarItem.tsx
 create mode 100644 src/components/common/sidebar/SidebarItemList.tsx
 create mode 100644 src/components/common/sidebar/SidebarScroll.tsx
 create mode 100644 src/components/common/sidebar/SidebarSeparate.tsx
 create mode 100644 src/components/common/sidebar/SidebarSubmenu.tsx
 create mode 100644 src/components/common/sidebar/index.tsx

diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss
new file mode 100644
index 0000000..b94d972
--- /dev/null
+++ b/src/assets/css/components/common/sidebar.scss
@@ -0,0 +1,301 @@
+@use "@/assets/css/constants" as constants;
+@use "@/assets/css/mixins" as mixins;
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  user-select: none;
+  transition: all .3s;
+  white-space: nowrap;
+
+  .title {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    padding: 10px 14px;
+    color: constants.$main-color;
+    overflow: hidden;
+
+    .icon-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      width: 40px;
+      height: 40px;
+      font-size: constants.$SIZE_ICON_SM;
+      border-radius: 8px;
+      cursor: pointer;
+      span {
+        transform: rotateZ(180deg);
+        transition: all .3s;
+      }
+
+      &:hover {
+        background-color: constants.$background-color;
+      }
+    }
+
+    .text {
+      flex: 1;
+      font-size: 2em;
+      text-align: center;
+      letter-spacing: 0.2em;
+      transform: translateX(0.1em);
+    }
+  }
+
+  .content {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+    flex: 1;
+
+    .scroll {
+      min-height: 0;
+      flex: 1;
+    }
+
+    ul {
+      > li {
+        &.item {
+          position: relative;
+          margin: 4px 14px;
+          font-size: 1.4em;
+
+          >.menu-bt {
+            border-radius: 8px;
+            overflow: hidden;
+            height: 40px;
+
+            .icon-box {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 0 10px;
+              width: 40px;
+              height: 40px;
+              font-size: constants.$SIZE_ICON_SM;
+              cursor: pointer;
+            }
+
+            a {
+              display: flex;
+              align-items: center;
+              height: 100%;
+              width: 100%;
+              transition: all 0.2s;
+
+              .text {
+                flex: 1;
+                padding-left: 8px;
+              }
+
+              &.active {
+                color: constants.$origin-color;
+                background-color: constants.$main-color !important;
+              }
+            }
+          }
+
+          .submenu {
+            display: none;
+            position: fixed;
+            padding-left: 20px;
+            z-index: 10000;
+
+            .content {
+              display: flex;
+              flex-direction: column;
+              gap: 2px;
+              padding: 10px 10px;
+              background-color: constants.$origin-color;
+              border-radius: 8px;
+
+              .item {
+                border-radius: 8px;
+                white-space: nowrap;
+                overflow: hidden;
+
+                a {
+                  display: block;
+                  padding: 8px 16px;
+                  transition: all 0.2s;
+
+                  &.active {
+                    color: constants.$origin-color;
+                    background-color: constants.$main-color !important;
+                  }
+                }
+
+                &:hover a {
+                  background-color: constants.$background-color;
+                }
+              }
+            }
+          }
+
+          &:hover {
+            >.menu-bt {
+              a {
+                background-color: constants.$background-color;
+              }
+            }
+
+            .submenu {
+              display: block;
+              animation: 0.3s ease;
+              @include mixins.unique-keyframes {
+                0% {
+                  transform: translateX(-10px);
+                  opacity: 0;
+                }
+                100% {
+                  transform: translateX(0);
+                  opacity: 1;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .separate {
+    height: 0;
+    margin: 10px 5px;
+    border: {
+      width: 1px;
+      color: constants.$font-secondary-color;
+      style: solid;
+    };
+    opacity: 0.4;
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    padding: 8px 14px;
+    color: constants.$main-color;
+
+    .icon-user {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-left: 4px;
+      padding: 10px;
+      width: 36px;
+      height: 36px;
+      font-size: constants.$SIZE_ICON_XS;
+      border: 2px constants.$font-secondary-color solid;
+      color: constants.$font-secondary-color;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+
+    .text {
+      flex: 1;
+      padding-left: 10px;
+      font-size: 1.4em;
+      color: constants.$font-main-color;
+      user-select: text;
+
+      a{
+        color: constants.$main-color;
+        text-decoration: underline;
+      }
+    }
+
+    .icon-exit {
+      font-size: constants.$SIZE_ICON_XS;
+      color: constants.$error-color;
+      padding: 6px 10px;
+      cursor: pointer;
+
+      &:hover {
+        border-radius: 8px;
+        background-color: constants.$background-color;
+      }
+    }
+  }
+
+  &.hide {
+    width: 68px !important;
+
+    .title {
+      .icon-box {
+        span {
+          transform: rotateZ(360deg);
+          transition: all .3s;
+        }
+      }
+      .text {
+        display: none;
+      }
+    }
+
+    .menu-bt {
+      .text {
+        display: none;
+      }
+    }
+
+    .submenu {
+      .menu-bt {
+        .text {
+          display: block;
+        }
+      }
+    }
+
+    .footer {
+      position: relative;
+      .text {
+        display: none;
+      }
+
+      .submenu-exit {
+        display: none;
+        position: absolute;
+        padding-left: 6px;
+        left: 100%;
+
+        .content {
+          padding: 8px;
+          border-radius: 8px;
+          background-color: constants.$origin-color;
+
+          .icon-exit {
+            padding: 4px 8px;
+            &:hover {
+              border-radius: 8px;
+              background-color: constants.$background-color;
+            }
+          }
+        }
+
+        &.hide {
+          display: none!important;
+        }
+      }
+
+      &:hover .submenu-exit {
+        display: block;
+        animation: 0.3s ease;
+        @include mixins.unique-keyframes {
+          0% {
+            transform: translateX(-10px);
+            opacity: 0;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index f9e08cf..9906a03 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -6,295 +6,7 @@ body {
 }
 
 .left-panel {
-  display: flex;
-  flex-direction: column;
-  width: clamp(180px, 20vw, 240px);
   background-color: constants.$origin-color;
-  user-select: none;
-  transition: all .3s;
-  white-space: nowrap;
-
-  .title {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-    padding: 10px 14px;
-    color: constants.$main-color;
-    overflow: hidden;
-
-    .icon-box {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 10px;
-      width: 40px;
-      height: 40px;
-      font-size: constants.$SIZE_ICON_SM;
-      border-radius: 8px;
-      cursor: pointer;
-      span {
-        transform: rotateZ(180deg);
-        transition: all .3s;
-      }
-
-      &:hover {
-        background-color: constants.$background-color;
-      }
-    }
-
-    .text {
-      flex: 1;
-      font-size: 2em;
-      text-align: center;
-      letter-spacing: 0.6em;
-      transform: translateX(0.3em);
-    }
-  }
-
-  .content {
-    display: flex;
-    min-height: 0;
-    flex-direction: column;
-    flex: 1;
-
-    .toolsMenu {
-      min-height: 0;
-      flex: 1;
-    }
-
-    ul {
-      > li {
-        &.item {
-          position: relative;
-          margin: 4px 14px;
-          font-size: 1.4em;
-
-          .menu-bt {
-            border-radius: 8px;
-            overflow: hidden;
-            height: 40px;
-
-            .icon-box {
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              padding: 0 10px;
-              width: 40px;
-              height: 40px;
-              font-size: constants.$SIZE_ICON_SM;
-              cursor: pointer;
-            }
-
-            a {
-              display: flex;
-              align-items: center;
-              height: 100%;
-              width: 100%;
-              transition: all 0.2s;
-
-              .text {
-                flex: 1;
-                padding-left: 8px;
-              }
-
-              &.active {
-                color: constants.$origin-color;
-                background-color: constants.$main-color !important;
-              }
-            }
-          }
-
-          .submenu {
-            display: none;
-            position: fixed;
-            padding-left: 20px;
-            z-index: 10000;
-
-            .content {
-              display: flex;
-              flex-direction: column;
-              gap: 2px;
-              padding: 10px 10px;
-              background-color: constants.$origin-color;
-              border-radius: 8px;
-
-              .item {
-                border-radius: 8px;
-                white-space: nowrap;
-                overflow: hidden;
-
-                a {
-                  display: block;
-                  padding: 8px 16px;
-                  transition: all 0.2s;
-
-                  &.active {
-                    color: constants.$origin-color;
-                    background-color: constants.$main-color !important;
-                  }
-                }
-
-                &:hover a {
-                  background-color: constants.$background-color;
-                }
-              }
-            }
-          }
-
-          &:hover {
-            .menu-bt {
-              a {
-                background-color: constants.$background-color;
-              }
-            }
-
-            .submenu {
-              display: block;
-              animation: 0.3s ease;
-              @include mixins.unique-keyframes {
-                0% {
-                  transform: translateX(-10px);
-                  opacity: 0;
-                }
-                100% {
-                  transform: translateX(0);
-                  opacity: 1;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .separate {
-    height: 0;
-    margin: 10px 5px;
-    border: {
-      width: 1px;
-      color: constants.$font-secondary-color;
-      style: solid;
-    };
-    opacity: 0.4;
-  }
-
-  .footer {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-    padding: 8px 14px;
-    color: constants.$main-color;
-
-    .icon-user {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-left: 4px;
-      padding: 10px;
-      width: 36px;
-      height: 36px;
-      font-size: constants.$SIZE_ICON_XS;
-      border: 2px constants.$font-secondary-color solid;
-      color: constants.$font-secondary-color;
-      border-radius: 50%;
-      cursor: pointer;
-    }
-
-    .text {
-      flex: 1;
-      padding-left: 10px;
-      font-size: 1.4em;
-      color: constants.$font-main-color;
-      user-select: text;
-
-      a{
-        color: constants.$main-color;
-        text-decoration: underline;
-      }
-    }
-
-    .icon-exit {
-      font-size: constants.$SIZE_ICON_XS;
-      color: constants.$error-color;
-      padding: 6px 10px;
-      cursor: pointer;
-
-      &:hover {
-        border-radius: 8px;
-        background-color: constants.$background-color;
-      }
-    }
-  }
-
-  &.hide {
-    width: 68px;
-
-    .title {
-      .icon-box {
-        span {
-          transform: rotateZ(360deg);
-          transition: all .3s;
-        }
-      }
-      .text {
-        display: none;
-      }
-    }
-
-    .menu-bt {
-      .text {
-        display: none;
-      }
-    }
-
-    .footer {
-      position: relative;
-      .text {
-        display: none;
-      }
-
-      .submenu-exit {
-        display: none;
-        position: absolute;
-        padding-left: 6px;
-        left: 100%;
-
-        .content {
-          padding: 8px;
-          border-radius: 8px;
-          background-color: constants.$origin-color;
-
-          .icon-exit {
-            padding: 4px 8px;
-            &:hover {
-              border-radius: 8px;
-              background-color: constants.$background-color;
-            }
-          }
-        }
-
-        &.hide {
-          display: none!important;
-        }
-      }
-
-      &:hover .submenu-exit {
-        display: block;
-        animation: 0.3s ease;
-        @include mixins.unique-keyframes {
-          0% {
-            transform: translateX(-10px);
-            opacity: 0;
-          }
-          100% {
-            transform: translateX(0);
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
 }
 
 .right-panel {
diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx
new file mode 100644
index 0000000..55e1d24
--- /dev/null
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { getLoginStatus, logout } from '@/utils/auth'
+import { getRedirectUrl } from '@/utils/common'
+
+const SidebarFooter: React.FC = () => {
+    const matches = useMatches()
+    const lastMatch = matches.reduce((_, second) => second)
+    const location = useLocation()
+    const navigate = useNavigate()
+    const [exiting, setExiting] = useState(false)
+    const handleClickAvatar = () => {
+        if (getLoginStatus()) {
+            navigate('/user')
+        } else {
+            navigate(getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`))
+        }
+    }
+
+    const handleLogout = () => {
+        if (exiting) {
+            return
+        }
+
+        setExiting(true)
+        void logout().finally(() => {
+            setTimeout(() => {
+                window.location.reload()
+            }, 1500)
+        })
+    }
+
+    return (
+        <div className={'footer'}>
+            <span className={'icon-user'} onClick={handleClickAvatar}>
+                <Icon component={IconFatwebUser} />
+            </span>
+            <span hidden={getLoginStatus()} className={'text'}>
+                未
+                <NavLink to={getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)}>
+                    登录
+                </NavLink>
+            </span>
+            <span hidden={!getLoginStatus()} className={'text'}>
+                已登录
+            </span>
+            <div
+                hidden={!getLoginStatus()}
+                className={`submenu-exit${!getLoginStatus() ? ' hide' : ''}`}
+            >
+                <div className={'content'}>
+                    <span hidden={!getLoginStatus()} className={'icon-exit'} onClick={handleLogout}>
+                        <Icon
+                            component={exiting ? IconFatwebLoading : IconFatwebExit}
+                            spin={exiting}
+                        />
+                    </span>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default SidebarFooter
diff --git a/src/components/common/sidebar/SidebarItem.tsx b/src/components/common/sidebar/SidebarItem.tsx
new file mode 100644
index 0000000..4fff29d
--- /dev/null
+++ b/src/components/common/sidebar/SidebarItem.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import SidebarSubmenu from '@/components/common/sidebar/SidebarSubmenu'
+
+type ItemProps = {
+    icon?: IconComponent
+    text?: string
+    path: string
+    children?: React.ReactNode
+}
+
+const SidebarItem: React.FC<ItemProps> = (props) => {
+    const [submenuTop, setSubmenuTop] = useState(0)
+    const [submenuLeft, setSubmenuLeft] = useState(0)
+
+    const showSubmenu = (e: React.MouseEvent) => {
+        const parentElement = e.currentTarget.parentElement
+        if (parentElement && parentElement.childElementCount === 2) {
+            const parentClientRect = parentElement.getBoundingClientRect()
+            if (parentClientRect.top <= screen.height / 2) {
+                setSubmenuTop(parentClientRect.top)
+            } else {
+                setSubmenuTop(
+                    parentClientRect.top -
+                        (parentElement.lastElementChild?.clientHeight ?? 0) +
+                        e.currentTarget.clientHeight
+                )
+            }
+            setSubmenuLeft(parentClientRect.right)
+        }
+    }
+
+    return (
+        <li className={'item'}>
+            <div className={'menu-bt'} onMouseEnter={showSubmenu}>
+                <NavLink
+                    to={props.path}
+                    end
+                    className={({ isActive, isPending }) =>
+                        isPending ? 'pending' : isActive ? 'active' : ''
+                    }
+                >
+                    <div className={'icon-box'}>
+                        {props.icon ? (
+                            <Icon className={'icon'} component={props.icon} />
+                        ) : undefined}
+                    </div>
+                    <span className={'text'}>{props.text}</span>
+                </NavLink>
+            </div>
+            {props.children ? (
+                <SidebarSubmenu submenuTop={submenuTop} submenuLeft={submenuLeft}>
+                    {props.children}
+                </SidebarSubmenu>
+            ) : undefined}
+        </li>
+    )
+}
+
+export default SidebarItem
diff --git a/src/components/common/sidebar/SidebarItemList.tsx b/src/components/common/sidebar/SidebarItemList.tsx
new file mode 100644
index 0000000..42337e1
--- /dev/null
+++ b/src/components/common/sidebar/SidebarItemList.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const SidebarItemList: React.FC<React.PropsWithChildren> = (props) => {
+    return <ul>{props.children}</ul>
+}
+
+export default SidebarItemList
diff --git a/src/components/common/sidebar/SidebarScroll.tsx b/src/components/common/sidebar/SidebarScroll.tsx
new file mode 100644
index 0000000..8690664
--- /dev/null
+++ b/src/components/common/sidebar/SidebarScroll.tsx
@@ -0,0 +1,34 @@
+import React, { useImperativeHandle } from 'react'
+import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
+
+export interface SidebarScrollElement {
+    refreshLayout(): void
+}
+
+const SidebarScroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>((props, ref) => {
+    useImperativeHandle<SidebarScrollElement, SidebarScrollElement>(ref, () => {
+        return {
+            refreshLayout() {
+                hideScrollbarRef.current?.refreshLayout()
+            }
+        }
+    })
+
+    const hideScrollbarRef = useRef<HideScrollbarElement>(null)
+
+    return (
+        <div className={'scroll'}>
+            <HideScrollbar
+                isShowVerticalScrollbar={true}
+                scrollbarWidth={2}
+                animationTransitionTime={300}
+                autoHideWaitingTime={800}
+                ref={hideScrollbarRef}
+            >
+                {props.children}
+            </HideScrollbar>
+        </div>
+    )
+})
+
+export default SidebarScroll
diff --git a/src/components/common/sidebar/SidebarSeparate.tsx b/src/components/common/sidebar/SidebarSeparate.tsx
new file mode 100644
index 0000000..3887824
--- /dev/null
+++ b/src/components/common/sidebar/SidebarSeparate.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const SidebarSeparate: React.FC<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+> = (props) => {
+    const { className, ..._props } = props
+
+    return <div className={`separate ${className ? ` ${className}` : ''}`} {..._props} />
+}
+
+export default SidebarSeparate
diff --git a/src/components/common/sidebar/SidebarSubmenu.tsx b/src/components/common/sidebar/SidebarSubmenu.tsx
new file mode 100644
index 0000000..ed2039b
--- /dev/null
+++ b/src/components/common/sidebar/SidebarSubmenu.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+interface SidebarSubmenuProps extends React.PropsWithChildren {
+    submenuTop: number
+    submenuLeft: number
+}
+
+const SidebarSubmenu: React.FC<SidebarSubmenuProps> = (props) => {
+    return (
+        <ul
+            className={'submenu'}
+            style={{
+                top: props.submenuTop,
+                left: props.submenuLeft
+            }}
+        >
+            <div className={'content'}>{props.children}</div>
+        </ul>
+    )
+}
+
+export default SidebarSubmenu
diff --git a/src/components/common/sidebar/index.tsx b/src/components/common/sidebar/index.tsx
new file mode 100644
index 0000000..41f1006
--- /dev/null
+++ b/src/components/common/sidebar/index.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/common/sidebar.scss'
+import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate'
+import SidebarFooter from '@/components/common/sidebar/SidebarFooter'
+import { getLocalStorage, setLocalStorage } from '@/utils/common'
+
+interface SidebarProps extends React.PropsWithChildren {
+    title: string
+    width?: string
+    onSidebarSwitch?: (hidden: boolean) => void
+}
+
+const Sidebar: React.FC<SidebarProps> = (props) => {
+    const [hideSidebar, setHideSidebar] = useState(getLocalStorage('hideSidebar') === 'false')
+
+    const switchSidebar = () => {
+        setHideSidebar(!hideSidebar)
+        setLocalStorage('hideSidebar', hideSidebar ? 'true' : 'false')
+        props.onSidebarSwitch && props.onSidebarSwitch(hideSidebar)
+    }
+
+    return (
+        <>
+            <div
+                className={`sidebar${hideSidebar ? ' hide' : ''}`}
+                style={{ width: props.width ?? 'clamp(180px, 20vw, 240px)' }}
+            >
+                <div className={'title'}>
+                    <span className={'icon-box'} onClick={switchSidebar}>
+                        <Icon component={IconFatwebExpand} />
+                    </span>
+                    <span className={'text'}>{props.title}</span>
+                </div>
+                <SidebarSeparate style={{ marginTop: 0 }} />
+                <div className={'content'}>{props.children}</div>
+                <SidebarSeparate style={{ marginTop: 0, marginBottom: 0 }} />
+                <SidebarFooter />
+            </div>
+        </>
+    )
+}
+
+export default Sidebar
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 27d51cc..8930fd5 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -1,251 +1,69 @@
 import React from 'react'
-import FitFullScreen from '@/components/common/FitFullScreen'
-import '@/assets/css/pages/tools-framework.scss'
-import Icon from '@ant-design/icons'
 import { tools } from '@/router/tools'
-import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
-import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common'
-import { getLoginStatus, logout } from '@/utils/auth'
-import { NavLink, Outlet } from 'react-router-dom'
+import '@/assets/css/pages/tools-framework.scss'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import SidebarScroll, { SidebarScrollElement } from '@/components/common/sidebar/SidebarScroll'
+import Sidebar from '@/components/common/sidebar'
+import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
+import SidebarItem from '@/components/common/sidebar/SidebarItem'
+import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate'
 
 const ToolsFramework: React.FC = () => {
-    const matches = useMatches()
-    const lastMatch = matches.reduce((_, second) => second)
-    const location = useLocation()
-    const navigate = useNavigate()
-    const hideScrollbarRef = useRef<HideScrollbarElement>(null)
-    const [submenuTop, setSubmenuTop] = useState(0)
-    const [submenuLeft, setSubmenuLeft] = useState(0)
-    const [hideSidebar, setHideSidebar] = useState(getLocalStorage('hideSidebar') === 'false')
-    const [exiting, setExiting] = useState(false)
+    const sidebarScrollRef = useRef<SidebarScrollElement>(null)
 
-    const switchSidebar = () => {
-        setHideSidebar(!hideSidebar)
-        setLocalStorage('hideSidebar', hideSidebar ? 'true' : 'false')
+    const handleOnSidebarSwitch = () => {
         setTimeout(() => {
-            hideScrollbarRef.current?.refreshLayout()
+            sidebarScrollRef.current?.refreshLayout()
         }, 300)
     }
 
-    const showSubmenu = (e: React.MouseEvent) => {
-        const parentElement = e.currentTarget.parentElement
-        if (parentElement && parentElement.childElementCount === 2) {
-            const parentClientRect = parentElement.getBoundingClientRect()
-            if (parentClientRect.top <= screen.height / 2) {
-                setSubmenuTop(parentClientRect.top)
-            } else {
-                setSubmenuTop(
-                    parentClientRect.top -
-                        (parentElement.lastElementChild?.clientHeight ?? 0) +
-                        e.currentTarget.clientHeight
-                )
-            }
-            setSubmenuLeft(parentClientRect.right)
-        }
-    }
-
-    const handleClickAvatar = () => {
-        if (getLoginStatus()) {
-            navigate(`${lastMatch.pathname}${location.search}`)
-        } else {
-            navigate(getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`))
-        }
-    }
-
-    const handleLogout = () => {
-        if (exiting) {
-            return
-        }
-
-        setExiting(true)
-        void logout().finally(() => {
-            setTimeout(() => {
-                window.location.reload()
-            }, 1500)
-        })
-    }
-
     return (
         <>
             <FitFullScreen className={'flex-horizontal'}>
-                <div className={`left-panel${hideSidebar ? ' hide' : ''}`}>
-                    <div className={'title'}>
-                        <span className={'icon-box'} onClick={switchSidebar}>
-                            <Icon component={IconFatwebExpand} />
-                        </span>
-                        <span className={'text'}>氮工具</span>
-                    </div>
-                    <div style={{ marginTop: '0' }} className={'separate'} />
-                    <div className={'content'}>
-                        <ul>
-                            <li className={'item'}>
-                                <div className={'menu-bt'}>
-                                    <NavLink
-                                        to={''}
-                                        end
-                                        className={({ isActive, isPending }) =>
-                                            isPending ? 'pending' : isActive ? 'active' : ''
-                                        }
-                                    >
-                                        <div className={'icon-box'}>
-                                            {tools[0].icon ? (
-                                                <Icon
-                                                    className={'icon'}
-                                                    component={tools[0].icon}
-                                                />
-                                            ) : undefined}
-                                        </div>
-                                        <span className={'text'}>{tools[0].name}</span>
-                                    </NavLink>
-                                </div>
-                            </li>
-                            <li className={'item'}>
-                                <div className={'menu-bt'}>
-                                    <NavLink
-                                        to={'all'}
-                                        className={({ isActive, isPending }) =>
-                                            isPending ? ' pending' : isActive ? ' active' : ''
-                                        }
-                                    >
-                                        <div className={'icon-box'}>
-                                            {tools[1].icon ? (
-                                                <Icon
-                                                    className={'icon'}
-                                                    component={tools[1].icon}
-                                                />
-                                            ) : undefined}
-                                        </div>
-                                        <span className={'text'}>{tools[1].name}</span>
-                                    </NavLink>
-                                </div>
-                            </li>
-                            <li>
-                                <div className={'separate'} style={{ marginBottom: 0 }} />
-                            </li>
-                        </ul>
-                        <div className={'toolsMenu'}>
-                            <HideScrollbar
-                                isShowVerticalScrollbar={true}
-                                scrollbarWidth={2}
-                                animationTransitionTime={300}
-                                autoHideWaitingTime={800}
-                                ref={hideScrollbarRef}
-                            >
-                                <ul>
-                                    {tools.map((tool) => {
-                                        return tool.menu &&
-                                            tool.id !== 'tools' &&
-                                            tool.id !== 'tools-all' ? (
-                                            <li className={'item'} key={tool.id}>
-                                                <div
-                                                    className={'menu-bt'}
-                                                    onMouseEnter={showSubmenu}
-                                                >
-                                                    <NavLink
-                                                        to={tool.path}
-                                                        className={({ isActive, isPending }) =>
-                                                            isPending
-                                                                ? 'pending'
-                                                                : isActive
-                                                                ? 'active'
-                                                                : ''
-                                                        }
-                                                    >
-                                                        <div className={'icon-box'}>
-                                                            {tool.icon ? (
-                                                                <Icon
-                                                                    className={'icon'}
-                                                                    component={tool.icon}
-                                                                />
-                                                            ) : undefined}
-                                                        </div>
-                                                        <span className={'text'}>{tool.name}</span>
-                                                    </NavLink>
-                                                </div>
-                                                {tool.children ? (
-                                                    <ul
-                                                        className={'submenu'}
-                                                        style={{
-                                                            top: submenuTop,
-                                                            left: submenuLeft
-                                                        }}
-                                                    >
-                                                        <div className={'content'}>
-                                                            {tool.children.map((subTool) => {
-                                                                return subTool.menu ? (
-                                                                    <li
-                                                                        className={'item'}
-                                                                        key={subTool.id}
-                                                                    >
-                                                                        <NavLink
-                                                                            to={`${tool.path}/${subTool.path}`}
-                                                                            className={({
-                                                                                isActive,
-                                                                                isPending
-                                                                            }) =>
-                                                                                isPending
-                                                                                    ? 'pending'
-                                                                                    : isActive
-                                                                                    ? 'active'
-                                                                                    : ''
-                                                                            }
-                                                                        >
-                                                                            <span
-                                                                                className={'text'}
-                                                                            >
-                                                                                {subTool.name}
-                                                                            </span>
-                                                                        </NavLink>
-                                                                    </li>
-                                                                ) : undefined
-                                                            })}
-                                                        </div>
-                                                    </ul>
-                                                ) : undefined}
-                                            </li>
-                                        ) : undefined
-                                    })}
-                                </ul>
-                            </HideScrollbar>
-                        </div>
-                    </div>
-                    <div className={'separate'} style={{ marginTop: 0, marginBottom: 0 }} />
-                    <div className={'footer'}>
-                        <span className={'icon-user'} onClick={handleClickAvatar}>
-                            <Icon component={IconFatwebUser} />
-                        </span>
-                        <span hidden={getLoginStatus()} className={'text'}>
-                            未
-                            <NavLink
-                                to={getRedirectUrl(
-                                    '/login',
-                                    `${lastMatch.pathname}${location.search}`
-                                )}
-                            >
-                                登录
-                            </NavLink>
-                        </span>
-                        <span hidden={!getLoginStatus()} className={'text'}>
-                            已登录
-                        </span>
-                        <div
-                            hidden={!getLoginStatus()}
-                            className={`submenu-exit${!getLoginStatus() ? ' hide' : ''}`}
-                        >
-                            <div className={'content'}>
-                                <span
-                                    hidden={!getLoginStatus()}
-                                    className={'icon-exit'}
-                                    onClick={handleLogout}
-                                >
-                                    <Icon
-                                        component={exiting ? IconFatwebLoading : IconFatwebExit}
-                                        spin={exiting}
-                                    />
-                                </span>
-                            </div>
-                        </div>
-                    </div>
+                <div className={'left-panel'}>
+                    <Sidebar title={'氮工具'} onSidebarSwitch={handleOnSidebarSwitch}>
+                        <SidebarItemList>
+                            <SidebarItem
+                                path={''}
+                                icon={tools[0].icon}
+                                text={tools[0].name}
+                            ></SidebarItem>
+                            <SidebarItem
+                                path={'all'}
+                                icon={tools[1].icon}
+                                text={tools[1].name}
+                            ></SidebarItem>
+                        </SidebarItemList>
+                        <SidebarSeparate style={{ marginBottom: 0 }} />
+                        <SidebarScroll ref={sidebarScrollRef}>
+                            <SidebarItemList>
+                                {tools.map((tool) => {
+                                    return tool.menu &&
+                                        tool.id !== 'tools' &&
+                                        tool.id !== 'tools-all' ? (
+                                        <SidebarItem
+                                            path={tool.path}
+                                            icon={tool.icon}
+                                            text={tool.name}
+                                            key={tool.id}
+                                        >
+                                            {tool.children
+                                                ? tool.children.map((subTool) => {
+                                                      return (
+                                                          <SidebarItem
+                                                              path={`${tool.path}/${subTool.path}`}
+                                                              text={subTool.name}
+                                                              key={tool.id}
+                                                          />
+                                                      )
+                                                  })
+                                                : undefined}
+                                        </SidebarItem>
+                                    ) : undefined
+                                })}
+                            </SidebarItemList>
+                        </SidebarScroll>
+                    </Sidebar>
                 </div>
                 <div className={'right-panel'}>
                     <Outlet />

From 8c1bd15dc279151fa2bac0738f078d2a97696353 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 17 Oct 2023 18:29:28 +0800
Subject: [PATCH 047/307] Fix union key in ToolsFramework

---
 src/pages/ToolsFramework.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 8930fd5..9f05bec 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -53,7 +53,7 @@ const ToolsFramework: React.FC = () => {
                                                           <SidebarItem
                                                               path={`${tool.path}/${subTool.path}`}
                                                               text={subTool.name}
-                                                              key={tool.id}
+                                                              key={subTool.id}
                                                           />
                                                       )
                                                   })

From 5d71433d630c5c175c8953712ebd9cf6e1e9b7db Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 17 Oct 2023 18:33:21 +0800
Subject: [PATCH 048/307] Add UserFramework

---
 src/pages/UserFramework.tsx | 37 +++++++++++++++++++++++++++++++++++++
 src/router/index.tsx        |  9 +++++++++
 src/router/user.tsx         | 17 +++++++++++++++++
 3 files changed, 63 insertions(+)
 create mode 100644 src/pages/UserFramework.tsx
 create mode 100644 src/router/user.tsx

diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
new file mode 100644
index 0000000..3b66b40
--- /dev/null
+++ b/src/pages/UserFramework.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import '@/assets/css/pages/tools-framework.scss'
+import Sidebar from '@/components/common/sidebar'
+import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
+import SidebarItem from '@/components/common/sidebar/SidebarItem'
+import user from '@/router/user.tsx'
+
+const ToolsFramework: React.FC = () => {
+    return (
+        <>
+            <FitFullScreen className={'flex-horizontal'}>
+                <div className={'left-panel'}>
+                    <Sidebar title={'个人中心'}>
+                        <SidebarItemList>
+                            {user.map((value) => {
+                                return value.menu ? (
+                                    <SidebarItem
+                                        path={value.path}
+                                        icon={value.icon}
+                                        text={value.name}
+                                        key={value.id}
+                                    />
+                                ) : undefined
+                            })}
+                        </SidebarItemList>
+                    </Sidebar>
+                </div>
+                <div className={'right-panel'}>
+                    <Outlet />
+                </div>
+            </FitFullScreen>
+        </>
+    )
+}
+
+export default ToolsFramework
diff --git a/src/router/index.tsx b/src/router/index.tsx
index da0ff94..c570281 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import tools from '@/router/tools'
 import home from '@/router/home'
+import user from '@/router/user.tsx'
 
 const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => {
     return jsonObject.map((value) => ({
@@ -55,6 +56,14 @@ const root: RouteJsonObject[] = [
                 name: '工具',
                 auth: false
             },
+            {
+                path: '/user',
+                id: 'userFramework',
+                component: React.lazy(() => import('@/pages/UserFramework')),
+                children: setTitle(user, '个人中心'),
+                name: '个人中心',
+                auth: true
+            },
             {
                 path: '',
                 id: 'homeFramework',
diff --git a/src/router/user.tsx b/src/router/user.tsx
new file mode 100644
index 0000000..ee8c550
--- /dev/null
+++ b/src/router/user.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+const user: RouteJsonObject[] = [
+    {
+        path: '',
+        id: 'user',
+        name: '个人档案',
+        icon: React.lazy(() => import('~icons/fatweb/user.jsx')),
+        menu: true
+    },
+    {
+        path: '*',
+        element: <Navigate to="/user" replace />
+    }
+]
+
+export default user

From fcd4fd532c6efe161a00b3f49f8060566035a476 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 30 Oct 2023 00:26:19 +0800
Subject: [PATCH 049/307] Add login and logout notification

---
 package-lock.json                             |  9 ++++
 package.json                                  |  1 +
 src/assets/css/constants.scss                 | 11 ++---
 .../common/sidebar/SidebarFooter.tsx          | 22 +++++++++-
 src/constants/common.constants.ts             | 19 ++++++++-
 src/constants/urls.constants.ts               |  1 +
 src/global.d.ts                               | 41 +++++++++++++++++--
 src/pages/Login.tsx                           | 25 ++++++++++-
 src/services/index.tsx                        |  2 +-
 src/utils/auth.ts                             | 28 +++++++------
 10 files changed, 134 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c67c05d..159998f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
         "match-sorter": "^6.3.1",
+        "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^6.15.0",
@@ -4885,6 +4886,14 @@
         "ufo": "^1.3.0"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index 288a28a..932e59b 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.15.0",
diff --git a/src/assets/css/constants.scss b/src/assets/css/constants.scss
index 3e6e1b5..50786e0 100644
--- a/src/assets/css/constants.scss
+++ b/src/assets/css/constants.scss
@@ -1,10 +1,11 @@
 $origin-color: white;
-$main-color: #4E47BB;
+$production-color: #4E47BB;
+$main-color: $production-color;
 $secondary-color: #BAB8E5;
-$error-color: #ff4d4f;
-$error-secondary-color: #ff7875;
-$blue-color: #1677ff;
-$active-color: #EBECFFD;
+$error-color: #FF4D4F;
+$error-secondary-color: #FF7875;
+$blue-color: #1677FF;
+$active-color: #EBECFD;
 $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;
diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx
index 55e1d24..c3b7666 100644
--- a/src/components/common/sidebar/SidebarFooter.tsx
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
-import { getLoginStatus, logout } from '@/utils/auth'
+import { getLoginStatus, getUsername, logout } from '@/utils/auth'
 import { getRedirectUrl } from '@/utils/common'
+import { notification } from 'antd'
+import { COLOR_ERROR } from '@/constants/common.constants.ts'
 
 const SidebarFooter: React.FC = () => {
     const matches = useMatches()
@@ -9,6 +11,8 @@ const SidebarFooter: React.FC = () => {
     const location = useLocation()
     const navigate = useNavigate()
     const [exiting, setExiting] = useState(false)
+    const [username, setUsername] = useState('')
+
     const handleClickAvatar = () => {
         if (getLoginStatus()) {
             navigate('/user')
@@ -24,12 +28,26 @@ const SidebarFooter: React.FC = () => {
 
         setExiting(true)
         void logout().finally(() => {
+            notification.info({
+                message: '已退出登录',
+                icon: <Icon component={IconFatwebExit} style={{ color: COLOR_ERROR }} />
+            })
             setTimeout(() => {
                 window.location.reload()
             }, 1500)
         })
     }
 
+    const loginStatus = getLoginStatus()
+
+    useEffect(() => {
+        if (getLoginStatus()) {
+            void getUsername().then((username) => {
+                setUsername(username)
+            })
+        }
+    }, [loginStatus])
+
     return (
         <div className={'footer'}>
             <span className={'icon-user'} onClick={handleClickAvatar}>
@@ -42,7 +60,7 @@ const SidebarFooter: React.FC = () => {
                 </NavLink>
             </span>
             <span hidden={!getLoginStatus()} className={'text'}>
-                已登录
+                {username}
             </span>
             <div
                 hidden={!getLoginStatus()}
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 6ca7f6a..fef7b4d 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -1,11 +1,19 @@
 export const PRODUCTION_NAME = 'FatWeb'
 export const STORAGE_TOKEN_KEY = 'JWT_TOKEN'
 export const STORAGE_USER_INFO_KEY = 'USER_INFO'
-export const COLOR_PRODUCTION = '#00D4FF'
+export const COLOR_ORIGIN = 'white'
+export const COLOR_PRODUCTION = '#4E47BB'
+export const COLOR_MAIN = COLOR_PRODUCTION
+export const COLOR_SECONDARY = '#BAB8E5'
+export const COLOR_ERROR = '#FF4D4F'
+export const COLOR_ERROR_SECONDARY = '#FF7875'
+export const COLOR_BLUE = '#1677FF'
+export const COLOR_ACTIVE = '#EBECFD'
 export const COLOR_BACKGROUND = '#F5F5F5'
 export const COLOR_TOP = 'rgba(234,46,13,0.85)'
 export const COLOR_FONT_MAIN = '#4D4D4D'
 export const COLOR_FONT_SECONDARY = '#9E9E9E'
+export const COLOR_FOCUS = '#DDDDDD'
 export const SIZE_ICON_XS = '16px'
 export const SIZE_ICON_SM = '20px'
 export const SIZE_ICON_MD = '24px'
@@ -33,3 +41,12 @@ export const SYSTEM_REQUEST_ILLEGAL = 10040
 export const SYSTEM_ARGUMENT_NOT_VALID = 10041
 export const SYSTEM_ERROR = 10050
 export const SYSTEM_TIMEOUT = 10051
+
+export const DATABASE_SELECT_SUCCESS = 20000
+export const DATABASE_SELECT_FAILED = 20005
+export const DATABASE_INSERT_SUCCESS = 20010
+export const DATABASE_INSERT_FAILED = 20015
+export const DATABASE_UPDATE_SUCCESS = 20020
+export const DATABASE_UPDATE_FILED = 20025
+export const DATABASE_DELETE_SUCCESS = 20030
+export const DATABASE_DELETE_FILED = 20035
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index d9cd425..035b7be 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -1,3 +1,4 @@
 export const URL_API_LOGIN = '/login'
 export const URL_API_TOKEN = '/token'
 export const URL_API_LOGOUT = '/logout'
+export const URL_API_USER_INFO = '/system/user/info'
diff --git a/src/global.d.ts b/src/global.d.ts
index 36438e0..07e0eec 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -47,14 +47,49 @@ type Captcha = {
     base64Src: string
 }
 
-type Token = {
+type TokenVo = {
     token: string
 }
 
-type User = {
-    id: number
+type UserVo = {
+    id: string
     username: string
+    locking: boolean
+    expiration: Date
+    credentialsExpiration: Date
     enable: number
+    lastLoginTime: Date
+    lastLoginIp: string
+    createTime: Date
+    updateTime: Date
+    menus: MenuVo[]
+    elements: ElementVo[]
+    operations: OperationVo[]
+}
+
+type MenuVo = {
+    id: number
+    name: string
+    url: string
+    powerId: number
+    parentId: number
+}
+
+type ElementVo = {
+    id: number
+    name: string
+    powerId: number
+    parentId: number
+    menuId: number
+}
+
+type OperationVo = {
+    id: number
+    name: string
+    code: string
+    powerId: number
+    parentId: number
+    elementId: number
 }
 
 type LoginForm = {
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 0efc6a7..96e71bd 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -7,7 +7,9 @@ import {
 } from '@/constants/common.constants'
 import '@/assets/css/pages/login.scss'
 import { setToken } from '@/utils/common'
-import { login } from '@/utils/auth'
+import { getUserInfo, login } from '@/utils/auth'
+import { notification } from 'antd'
+import moment from 'moment'
 
 const Login: React.FC = () => {
     const [messageApi, contextHolder] = message.useMessage()
@@ -31,6 +33,27 @@ const Login: React.FC = () => {
                             } else {
                                 navigate('/')
                             }
+                            void getUserInfo().then((user) => {
+                                notification.success({
+                                    message: '欢迎回来',
+                                    description: (
+                                        <>
+                                            <span>
+                                                你好 <strong>{user.username}</strong>
+                                            </span>
+                                            <br />
+                                            <span>
+                                                上次登录：
+                                                {moment(user.lastLoginTime).format(
+                                                    'yyyy-MM-DD HH:mm:ssZ'
+                                                )}
+                                                【{user.lastLoginIp}】
+                                            </span>
+                                        </>
+                                    ),
+                                    placement: 'topRight'
+                                })
+                            })
                         }, 1500)
                         break
                     case SYSTEM_USERNAME_NOT_FOUND:
diff --git a/src/services/index.tsx b/src/services/index.tsx
index d509f81..50b4063 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -44,7 +44,7 @@ service.interceptors.request.use(
                     .get(import.meta.env.VITE_API_TOKEN_URL, {
                         headers: { Authorization: `Bearer ${token}` }
                     })
-                    .then((value: AxiosResponse<_Response<Token>>) => {
+                    .then((value: AxiosResponse<_Response<TokenVo>>) => {
                         const response = value.data
                         if (response.code === SYSTEM_TOKEN_RENEW_SUCCESS) {
                             setToken(response.data?.token ?? '')
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index f58a9ac..fd583ea 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,12 +1,16 @@
 import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common'
-import { SYSTEM_OK, STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
+import {
+    STORAGE_TOKEN_KEY,
+    STORAGE_USER_INFO_KEY,
+    DATABASE_SELECT_SUCCESS
+} from '@/constants/common.constants'
 import request from '@/services'
-import { URL_API_LOGIN, URL_API_LOGOUT } from '@/constants/urls.constants'
+import { URL_API_LOGIN, URL_API_LOGOUT, URL_API_USER_INFO } from '@/constants/urls.constants'
 
 let captcha: Captcha
 
 export const login = async (username: string, password: string) => {
-    return await request.post<Token>(URL_API_LOGIN, {
+    return await request.post<TokenVo>(URL_API_LOGIN, {
         username,
         password
     })
@@ -22,27 +26,27 @@ export const getLoginStatus = () => {
     return getLocalStorage(STORAGE_TOKEN_KEY) !== null
 }
 
-export const getUser = async (): Promise<User> => {
+export const getUserInfo = async (): Promise<UserVo> => {
     if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) {
         return new Promise((resolve) => {
-            resolve(JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as User)
+            resolve(JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as UserVo)
         })
     }
-    return requestUser()
+    return requestUserInfo()
 }
 
-export const requestUser = async () => {
-    let user: User | null
+export const requestUserInfo = async () => {
+    let user: UserVo | null
 
-    await request.get<User>('/user/info').then((value) => {
+    await request.get<UserVo>(URL_API_USER_INFO).then((value) => {
         const response = value.data
-        if (response.code === SYSTEM_OK) {
+        if (response.code === DATABASE_SELECT_SUCCESS) {
             user = response.data
             setLocalStorage(STORAGE_USER_INFO_KEY, JSON.stringify(user))
         }
     })
 
-    return new Promise<User>((resolve, reject) => {
+    return new Promise<UserVo>((resolve, reject) => {
         if (user) {
             resolve(user)
         }
@@ -51,7 +55,7 @@ export const requestUser = async () => {
 }
 
 export const getUsername = async () => {
-    const user = await getUser()
+    const user = await getUserInfo()
 
     return user.username
 }

From 652d3f0132960cd2830507533a2103ce09765568 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 30 Oct 2023 18:41:20 +0800
Subject: [PATCH 050/307] Change UserVo to UserWithInfoVo

---
 src/global.d.ts   | 10 ++++++++--
 src/utils/auth.ts | 10 +++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index 07e0eec..80eae3b 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -51,7 +51,7 @@ type TokenVo = {
     token: string
 }
 
-type UserVo = {
+type UserWithInfoVo = {
     id: string
     username: string
     locking: boolean
@@ -62,11 +62,18 @@ type UserVo = {
     lastLoginIp: string
     createTime: Date
     updateTime: Date
+    modules: ModuleVo[]
     menus: MenuVo[]
     elements: ElementVo[]
     operations: OperationVo[]
 }
 
+type ModuleVo = {
+    id: number
+    name: string
+    powerId: number
+}
+
 type MenuVo = {
     id: number
     name: string
@@ -88,7 +95,6 @@ type OperationVo = {
     name: string
     code: string
     powerId: number
-    parentId: number
     elementId: number
 }
 
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index fd583ea..c73a7f2 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -26,19 +26,19 @@ export const getLoginStatus = () => {
     return getLocalStorage(STORAGE_TOKEN_KEY) !== null
 }
 
-export const getUserInfo = async (): Promise<UserVo> => {
+export const getUserInfo = async (): Promise<UserWithInfoVo> => {
     if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) {
         return new Promise((resolve) => {
-            resolve(JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as UserVo)
+            resolve(JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as UserWithInfoVo)
         })
     }
     return requestUserInfo()
 }
 
 export const requestUserInfo = async () => {
-    let user: UserVo | null
+    let user: UserWithInfoVo | null
 
-    await request.get<UserVo>(URL_API_USER_INFO).then((value) => {
+    await request.get<UserWithInfoVo>(URL_API_USER_INFO).then((value) => {
         const response = value.data
         if (response.code === DATABASE_SELECT_SUCCESS) {
             user = response.data
@@ -46,7 +46,7 @@ export const requestUserInfo = async () => {
         }
     })
 
-    return new Promise<UserVo>((resolve, reject) => {
+    return new Promise<UserWithInfoVo>((resolve, reject) => {
         if (user) {
             resolve(user)
         }

From b314a9f8016f9e0f652f636c9123454296033a8b Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 31 Oct 2023 18:44:18 +0800
Subject: [PATCH 051/307] Add nickname. Recode route.

---
 .../common/sidebar/SidebarFooter.tsx          | 10 +++---
 src/global.d.ts                               | 11 +++++++
 src/pages/Login.tsx                           |  2 +-
 src/router/home.tsx                           |  2 ++
 src/router/index.tsx                          | 13 +++++---
 src/router/tools.tsx                          |  3 ++
 src/utils/auth.ts                             | 33 +++++++++++++++++++
 7 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx
index c3b7666..c7fec43 100644
--- a/src/components/common/sidebar/SidebarFooter.tsx
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
-import { getLoginStatus, getUsername, logout } from '@/utils/auth'
+import { getLoginStatus, getNickName, logout } from '@/utils/auth'
 import { getRedirectUrl } from '@/utils/common'
 import { notification } from 'antd'
 import { COLOR_ERROR } from '@/constants/common.constants.ts'
@@ -11,7 +11,7 @@ const SidebarFooter: React.FC = () => {
     const location = useLocation()
     const navigate = useNavigate()
     const [exiting, setExiting] = useState(false)
-    const [username, setUsername] = useState('')
+    const [nickName, setNickName] = useState('')
 
     const handleClickAvatar = () => {
         if (getLoginStatus()) {
@@ -42,8 +42,8 @@ const SidebarFooter: React.FC = () => {
 
     useEffect(() => {
         if (getLoginStatus()) {
-            void getUsername().then((username) => {
-                setUsername(username)
+            void getNickName().then((nickName) => {
+                setNickName(nickName)
             })
         }
     }, [loginStatus])
@@ -60,7 +60,7 @@ const SidebarFooter: React.FC = () => {
                 </NavLink>
             </span>
             <span hidden={!getLoginStatus()} className={'text'}>
-                {username}
+                {nickName}
             </span>
             <div
                 hidden={!getLoginStatus()}
diff --git a/src/global.d.ts b/src/global.d.ts
index 80eae3b..5d0e7df 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -12,6 +12,7 @@ interface ImportMeta {
 
 type RouteJsonObject = {
     path: string
+    absolutePath?: string
     id?: string
     element?: React.JSX.Element
     component?: React.ComponentType
@@ -26,6 +27,7 @@ type RouteJsonObject = {
 }
 
 type RouteHandle = {
+    absolutePath: string
     name?: string
     menu?: boolean
     auth?: boolean
@@ -62,12 +64,21 @@ type UserWithInfoVo = {
     lastLoginIp: string
     createTime: Date
     updateTime: Date
+    userInfo: UserInfoVo
     modules: ModuleVo[]
     menus: MenuVo[]
     elements: ElementVo[]
     operations: OperationVo[]
 }
 
+type UserInfoVo = {
+    id: string
+    userId: string
+    nickName: string
+    avatar: string
+    email: string
+}
+
 type ModuleVo = {
     id: number
     name: string
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 96e71bd..47322d3 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -39,7 +39,7 @@ const Login: React.FC = () => {
                                     description: (
                                         <>
                                             <span>
-                                                你好 <strong>{user.username}</strong>
+                                                你好 <strong>{user.userInfo.nickName}</strong>
                                             </span>
                                             <br />
                                             <span>
diff --git a/src/router/home.tsx b/src/router/home.tsx
index 50792a6..b0b7067 100644
--- a/src/router/home.tsx
+++ b/src/router/home.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 const home: RouteJsonObject[] = [
     {
         path: '',
+        absolutePath: '/',
         id: 'home',
         component: React.lazy(() => import('@/pages/home')),
         name: '主页',
@@ -17,6 +18,7 @@ const home: RouteJsonObject[] = [
     },
     {
         path: '/tools',
+        absolutePath: '/tools',
         id: 'url-tools',
         children: [
             {
diff --git a/src/router/index.tsx b/src/router/index.tsx
index c570281..9e683e1 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -39,17 +39,20 @@ const root: RouteJsonObject[] = [
         component: React.lazy(() => import('@/AuthRoute')),
         children: [
             {
-                path: '/login',
+                path: 'login',
+                absolutePath: '/login',
                 id: 'login',
                 component: React.lazy(() => import('@/pages/Login'))
             },
             {
-                path: '/loading',
+                path: 'loading',
+                absolutePath: '/loading',
                 id: 'loading',
                 component: React.lazy(() => import('@/components/common/LoadingMask'))
             },
             {
-                path: '/tools',
+                path: 'tools',
+                absolutePath: '/tools',
                 id: 'toolsFramework',
                 component: React.lazy(() => import('@/pages/ToolsFramework')),
                 children: setTitle(tools, '氮工具'),
@@ -57,7 +60,8 @@ const root: RouteJsonObject[] = [
                 auth: false
             },
             {
-                path: '/user',
+                path: 'user',
+                absolutePath: '/user',
                 id: 'userFramework',
                 component: React.lazy(() => import('@/pages/UserFramework')),
                 children: setTitle(user, '个人中心'),
@@ -66,6 +70,7 @@ const root: RouteJsonObject[] = [
             },
             {
                 path: '',
+                absolutePath: '/',
                 id: 'homeFramework',
                 component: React.lazy(() => import('@/pages/HomeFramework')),
                 children: home
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 89a38ff..d771fa7 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 export const tools: RouteJsonObject[] = [
     {
         path: '',
+        absolutePath: '/tools',
         id: 'tools',
         component: React.lazy(() => import('@/pages/tools')),
         icon: React.lazy(() => import('~icons/fatweb/home.jsx')),
@@ -12,6 +13,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'all',
+        absolutePath: '/tools/all',
         id: 'tools-all',
         component: React.lazy(() => import('@/pages/tools')),
         name: '全部工具',
@@ -22,6 +24,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation',
+        absolutePath: '/tools/translation',
         id: 'tools-translation',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译',
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index c73a7f2..78cc186 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -54,12 +54,45 @@ export const requestUserInfo = async () => {
     })
 }
 
+export const getNickName = async () => {
+    const user = await getUserInfo()
+
+    return user.userInfo.nickName
+}
+
 export const getUsername = async () => {
     const user = await getUserInfo()
 
     return user.username
 }
 
+export const getPermissionPath = (): string[] => {
+    const s = getLocalStorage(STORAGE_USER_INFO_KEY)
+    if (s === null) {
+        return []
+    }
+
+    const user = JSON.parse(s) as UserWithInfoVo
+    const paths: string[] = []
+    user.menus.forEach((menu) => {
+        paths.join(menu.url)
+    })
+
+    return paths
+}
+
+export const getAuthRoute = (route: RouteJsonObject[]): RouteJsonObject[] => {
+    return route.map((value) => {
+        if (value.auth) {
+            value.path
+        }
+        if (value.children) {
+            value.children = getAuthRoute(value.children)
+        }
+        return value
+    })
+}
+
 export const getCaptchaSrc = () => {
     captcha = getCaptcha(300, 150, 4)
     return captcha.base64Src

From 33b664816e319b04f0e3324bf7f101f207c4dfa4 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 Nov 2023 09:39:22 +0800
Subject: [PATCH 052/307] Optimize route

---
 src/components/common/sidebar/SidebarItem.tsx |  3 +-
 src/global.d.ts                               |  2 +-
 src/pages/ToolsFramework.tsx                  |  6 ++--
 src/pages/UserFramework.tsx                   |  2 +-
 src/router/home.tsx                           |  2 ++
 src/router/index.tsx                          |  2 ++
 src/router/tools.tsx                          | 29 +++++++++++++++++++
 7 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/components/common/sidebar/SidebarItem.tsx b/src/components/common/sidebar/SidebarItem.tsx
index 4fff29d..20edf64 100644
--- a/src/components/common/sidebar/SidebarItem.tsx
+++ b/src/components/common/sidebar/SidebarItem.tsx
@@ -7,6 +7,7 @@ type ItemProps = {
     text?: string
     path: string
     children?: React.ReactNode
+    end?: boolean
 }
 
 const SidebarItem: React.FC<ItemProps> = (props) => {
@@ -34,8 +35,8 @@ const SidebarItem: React.FC<ItemProps> = (props) => {
         <li className={'item'}>
             <div className={'menu-bt'} onMouseEnter={showSubmenu}>
                 <NavLink
+                    end={props.end}
                     to={props.path}
-                    end
                     className={({ isActive, isPending }) =>
                         isPending ? 'pending' : isActive ? 'active' : ''
                     }
diff --git a/src/global.d.ts b/src/global.d.ts
index 5d0e7df..644b9f4 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -12,7 +12,7 @@ interface ImportMeta {
 
 type RouteJsonObject = {
     path: string
-    absolutePath?: string
+    absolutePath: string
     id?: string
     element?: React.JSX.Element
     component?: React.ComponentType
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 9f05bec..d246630 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -24,11 +24,13 @@ const ToolsFramework: React.FC = () => {
                     <Sidebar title={'氮工具'} onSidebarSwitch={handleOnSidebarSwitch}>
                         <SidebarItemList>
                             <SidebarItem
+                                end
                                 path={''}
                                 icon={tools[0].icon}
                                 text={tools[0].name}
                             ></SidebarItem>
                             <SidebarItem
+                                end
                                 path={'all'}
                                 icon={tools[1].icon}
                                 text={tools[1].name}
@@ -42,7 +44,7 @@ const ToolsFramework: React.FC = () => {
                                         tool.id !== 'tools' &&
                                         tool.id !== 'tools-all' ? (
                                         <SidebarItem
-                                            path={tool.path}
+                                            path={tool.absolutePath}
                                             icon={tool.icon}
                                             text={tool.name}
                                             key={tool.id}
@@ -51,7 +53,7 @@ const ToolsFramework: React.FC = () => {
                                                 ? tool.children.map((subTool) => {
                                                       return (
                                                           <SidebarItem
-                                                              path={`${tool.path}/${subTool.path}`}
+                                                              path={subTool.absolutePath}
                                                               text={subTool.name}
                                                               key={subTool.id}
                                                           />
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 3b66b40..69ae406 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -16,7 +16,7 @@ const ToolsFramework: React.FC = () => {
                             {user.map((value) => {
                                 return value.menu ? (
                                     <SidebarItem
-                                        path={value.path}
+                                        path={value.absolutePath}
                                         icon={value.icon}
                                         text={value.name}
                                         key={value.id}
diff --git a/src/router/home.tsx b/src/router/home.tsx
index b0b7067..0a93802 100644
--- a/src/router/home.tsx
+++ b/src/router/home.tsx
@@ -12,6 +12,7 @@ const home: RouteJsonObject[] = [
     },
     {
         path: 'https://blog.fatweb.top',
+        absolutePath: 'https://blog.fatweb.top',
         id: 'url-blog',
         name: '博客',
         menu: true
@@ -23,6 +24,7 @@ const home: RouteJsonObject[] = [
         children: [
             {
                 path: 'translation',
+                absolutePath: '/tools/translation',
                 id: 'url-tools-translation',
                 name: '翻译',
                 menu: true
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 9e683e1..eac7490 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -36,6 +36,7 @@ const setTitle = (jsonObject: RouteJsonObject[], title: string): RouteJsonObject
 const root: RouteJsonObject[] = [
     {
         path: '/',
+        absolutePath: '/',
         component: React.lazy(() => import('@/AuthRoute')),
         children: [
             {
@@ -77,6 +78,7 @@ const root: RouteJsonObject[] = [
             },
             {
                 path: '*',
+                absolutePath: '*',
                 element: <Navigate to="/" replace />
             }
         ]
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index d771fa7..62846a7 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -34,6 +34,7 @@ export const tools: RouteJsonObject[] = [
         children: [
             {
                 path: '1',
+                absolutePath: '/tools/translation/1',
                 id: '1',
                 name: '翻译1',
                 icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
@@ -42,6 +43,7 @@ export const tools: RouteJsonObject[] = [
             },
             {
                 path: '2',
+                absolutePath: '/tools/translation/2',
                 id: '2',
                 name: '翻译2',
                 menu: true,
@@ -51,6 +53,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation-',
+        absolutePath: '/tools/translation-',
         id: 'tools-translation-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译-',
@@ -60,6 +63,7 @@ export const tools: RouteJsonObject[] = [
         children: [
             {
                 path: '1-',
+                absolutePath: '/tools/translation-/1-',
                 id: '1-',
                 name: '翻译1-',
                 menu: true,
@@ -67,6 +71,7 @@ export const tools: RouteJsonObject[] = [
             },
             {
                 path: '2-',
+                absolutePath: '/tools/translation-/2-',
                 id: '2-',
                 name: '翻译2-',
                 menu: true,
@@ -76,6 +81,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--',
+        absolutePath: '/tools/translation--',
         id: 'tools-translation--',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--',
@@ -85,6 +91,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--1',
+        absolutePath: '/tools/translation--1',
         id: 'tools-translation--1',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--1',
@@ -94,6 +101,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--2',
+        absolutePath: '/tools/translation--2',
         id: 'tools-translation--2',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--2',
@@ -103,6 +111,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--3',
+        absolutePath: '/tools/translation--3',
         id: 'tools-translation--3',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--3',
@@ -112,6 +121,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--4',
+        absolutePath: '/tools/translation--4',
         id: 'tools-translation--4',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--4',
@@ -121,6 +131,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--5',
+        absolutePath: '/tools/translation--5',
         id: 'tools-translation--5',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--5',
@@ -130,6 +141,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--6',
+        absolutePath: '/tools/translation--6',
         id: 'tools-translation--6',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--6',
@@ -139,6 +151,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--7',
+        absolutePath: '/tools/translation--7',
         id: 'tools-translation--7',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--7',
@@ -148,6 +161,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--8',
+        absolutePath: '/tools/translation--8',
         id: 'tools-translation--8',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--8',
@@ -157,6 +171,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--9',
+        absolutePath: '/tools/translation--9',
         id: 'tools-translation--9',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--9',
@@ -166,6 +181,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--10',
+        absolutePath: '/tools/translation--10',
         id: 'tools-translation--10',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--10',
@@ -175,6 +191,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--1-',
+        absolutePath: '/tools/translation--1-',
         id: 'tools-translation--1-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--1-',
@@ -184,6 +201,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--2-',
+        absolutePath: '/tools/translation--2-',
         id: 'tools-translation--2-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--2-',
@@ -193,6 +211,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--3-',
+        absolutePath: '/tools/translation--3-',
         id: 'tools-translation--3-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--3-',
@@ -202,6 +221,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--4-',
+        absolutePath: '/tools/translation--4-',
         id: 'tools-translation--4-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--4-',
@@ -211,6 +231,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--5-',
+        absolutePath: '/tools/translation--5-',
         id: 'tools-translation--5-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--5-',
@@ -220,6 +241,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--6-',
+        absolutePath: '/tools/translation--6-',
         id: 'tools-translation--6-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--6-',
@@ -229,6 +251,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--7-',
+        absolutePath: '/tools/translation--7-',
         id: 'tools-translation--7-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--7-',
@@ -238,6 +261,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--8-',
+        absolutePath: '/tools/translation--8-',
         id: 'tools-translation--8-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--8-',
@@ -247,6 +271,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--9-',
+        absolutePath: '/tools/translation--9-',
         id: 'tools-translation--9-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--9-',
@@ -256,6 +281,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--10-',
+        absolutePath: '/tools/translation--10-',
         id: 'tools-translation--10-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--10-',
@@ -265,6 +291,7 @@ export const tools: RouteJsonObject[] = [
         children: [
             {
                 path: '1-1',
+                absolutePath: '/tools/translation--10-/1-1',
                 id: '1-1',
                 name: '翻译1-',
                 menu: true,
@@ -272,6 +299,7 @@ export const tools: RouteJsonObject[] = [
             },
             {
                 path: '2-1',
+                absolutePath: '/tools/translation--10-/2-1',
                 id: '2-1',
                 name: '翻译2-',
                 menu: true,
@@ -281,6 +309,7 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: '*',
+        absolutePath: '*',
         element: <Navigate to="/tools" replace />
     }
 ]

From 4bfe37acfe290e3da027b93cb04719e48644a049 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 Nov 2023 10:29:29 +0800
Subject: [PATCH 053/307] Optimize svg

---
 src/assets/svg/down.svg    | 2 +-
 src/assets/svg/exit.svg    | 2 +-
 src/assets/svg/expand.svg  | 2 +-
 src/assets/svg/github.svg  | 2 +-
 src/assets/svg/home.svg    | 2 +-
 src/assets/svg/jenkins.svg | 2 +-
 src/assets/svg/loading.svg | 2 +-
 src/assets/svg/logo.svg    | 2 +-
 src/assets/svg/menu.svg    | 2 +-
 src/assets/svg/tool.svg    | 2 +-
 src/assets/svg/user.svg    | 2 +-
 11 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/assets/svg/down.svg b/src/assets/svg/down.svg
index 587e1d1..0fdb77e 100644
--- a/src/assets/svg/down.svg
+++ b/src/assets/svg/down.svg
@@ -1 +1 @@
-<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M958.577476 311.180252c0 15.286148-5.878894 29.522384-16.564257 40.166815L551.623951 741.043556c-1.39272 1.425466-2.577708 2.537799-3.846608 3.449565l-2.905166 2.304486c-11.416004 11.362792-24.848944 16.945951-39.068807 16.945951-14.475689 0-28.010961-5.708002-38.110993-16.056698L79.475588 355.310332c-10.467399-10.613732-16.236799-24.786523-16.236799-39.893592 0-14.772448 5.599532-28.726252 15.753799-39.286772 10.18599-10.497075 24.390503-16.539698 38.95215-16.539698 14.382569 0 28.009937 5.723352 38.366819 16.142655l350.169241 353.968777 359.428116-358.485651c10.30981-10.248412 23.781636-15.909341 37.994336-15.909341 14.889105 0 28.859281 6.05081 39.333844 16.999163C953.126324 282.725176 958.577476 296.556183 958.577476 311.180252z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M958.577476 311.180252c0 15.286148-5.878894 29.522384-16.564257 40.166815L551.623951 741.043556c-1.39272 1.425466-2.577708 2.537799-3.846608 3.449565l-2.905166 2.304486c-11.416004 11.362792-24.848944 16.945951-39.068807 16.945951-14.475689 0-28.010961-5.708002-38.110993-16.056698L79.475588 355.310332c-10.467399-10.613732-16.236799-24.786523-16.236799-39.893592 0-14.772448 5.599532-28.726252 15.753799-39.286772 10.18599-10.497075 24.390503-16.539698 38.95215-16.539698 14.382569 0 28.009937 5.723352 38.366819 16.142655l350.169241 353.968777 359.428116-358.485651c10.30981-10.248412 23.781636-15.909341 37.994336-15.909341 14.889105 0 28.859281 6.05081 39.333844 16.999163C953.126324 282.725176 958.577476 296.556183 958.577476 311.180252z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/exit.svg b/src/assets/svg/exit.svg
index 12a1804..39f398d 100644
--- a/src/assets/svg/exit.svg
+++ b/src/assets/svg/exit.svg
@@ -1 +1 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M835.669333 554.666667h-473.173333A42.453333 42.453333 0 0 1 320 512a42.666667 42.666667 0 0 1 42.474667-42.666667h473.173333l-161.813333-161.834666a42.666667 42.666667 0 0 1 60.330666-60.330667l234.666667 234.666667a42.666667 42.666667 0 0 1 0 60.330666l-234.666667 234.666667a42.666667 42.666667 0 0 1-60.330666-60.330667L835.669333 554.666667zM554.666667 42.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333C137.578667 128 128 137.578667 128 149.482667v725.034666C128 886.4 137.6 896 149.525333 896H554.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333A106.816 106.816 0 0 1 42.666667 874.517333V149.482667A106.773333 106.773333 0 0 1 149.525333 42.666667H554.666667z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M835.669333 554.666667h-473.173333A42.453333 42.453333 0 0 1 320 512a42.666667 42.666667 0 0 1 42.474667-42.666667h473.173333l-161.813333-161.834666a42.666667 42.666667 0 0 1 60.330666-60.330667l234.666667 234.666667a42.666667 42.666667 0 0 1 0 60.330666l-234.666667 234.666667a42.666667 42.666667 0 0 1-60.330666-60.330667L835.669333 554.666667zM554.666667 42.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333C137.578667 128 128 137.578667 128 149.482667v725.034666C128 886.4 137.6 896 149.525333 896H554.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333A106.816 106.816 0 0 1 42.666667 874.517333V149.482667A106.773333 106.773333 0 0 1 149.525333 42.666667H554.666667z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/expand.svg b/src/assets/svg/expand.svg
index 95e5060..0f5e28f 100644
--- a/src/assets/svg/expand.svg
+++ b/src/assets/svg/expand.svg
@@ -1 +1 @@
-<svg viewBox="0 0 1028 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M8.533333 192c0-25.6 17.066667-42.666667 34.133334-42.666667h490.666666c21.333333 0 34.133333 17.066667 34.133334 42.666667 0 21.333333-17.066667 42.666667-34.133334 42.666667h-490.666666c-21.333333 0-34.133333-21.333333-34.133334-42.666667z m550.4 213.333333c0 25.6-21.333333 42.666667-46.933333 42.666667h-465.066667c-25.6 0-46.933333-17.066667-46.933333-42.666667 0-21.333333 21.333333-42.666667 46.933333-42.666666h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666666z m-507.733333 256c-25.6 0-46.933333-17.066667-46.933333-42.666666s21.333333-42.666667 46.933333-42.666667h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666667 0 21.333333-21.333333 42.666667-46.933333 42.666666h-465.066667z m507.733333 170.666667c0 25.6-21.333333 42.666667-51.2 42.666667h-452.266666c-29.866667 0-51.2-17.066667-51.2-42.666667s21.333333-42.666667 51.2-42.666667h452.266666c29.866667 0 51.2 17.066667 51.2 42.666667z m140.8-85.333333l221.866667-238.933334-221.866667-238.933333c-17.066667-17.066667-17.066667-51.2 0-68.266667 17.066667-17.066667 46.933333-17.066667 64 0l251.733334 273.066667c17.066667 17.066667 17.066667 51.2 0 68.266667l-251.733334 273.066666c-17.066667 17.066667-46.933333 17.066667-64 0-17.066667-17.066667-17.066667-46.933333 0-68.266666z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1028 1024"><path d="M8.533333 192c0-25.6 17.066667-42.666667 34.133334-42.666667h490.666666c21.333333 0 34.133333 17.066667 34.133334 42.666667 0 21.333333-17.066667 42.666667-34.133334 42.666667h-490.666666c-21.333333 0-34.133333-21.333333-34.133334-42.666667z m550.4 213.333333c0 25.6-21.333333 42.666667-46.933333 42.666667h-465.066667c-25.6 0-46.933333-17.066667-46.933333-42.666667 0-21.333333 21.333333-42.666667 46.933333-42.666666h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666666z m-507.733333 256c-25.6 0-46.933333-17.066667-46.933333-42.666666s21.333333-42.666667 46.933333-42.666667h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666667 0 21.333333-21.333333 42.666667-46.933333 42.666666h-465.066667z m507.733333 170.666667c0 25.6-21.333333 42.666667-51.2 42.666667h-452.266666c-29.866667 0-51.2-17.066667-51.2-42.666667s21.333333-42.666667 51.2-42.666667h452.266666c29.866667 0 51.2 17.066667 51.2 42.666667z m140.8-85.333333l221.866667-238.933334-221.866667-238.933333c-17.066667-17.066667-17.066667-51.2 0-68.266667 17.066667-17.066667 46.933333-17.066667 64 0l251.733334 273.066667c17.066667 17.066667 17.066667 51.2 0 68.266667l-251.733334 273.066666c-17.066667 17.066667-46.933333 17.066667-64 0-17.066667-17.066667-17.066667-46.933333 0-68.266666z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/github.svg b/src/assets/svg/github.svg
index 02c1634..ce37a93 100644
--- a/src/assets/svg/github.svg
+++ b/src/assets/svg/github.svg
@@ -1 +1 @@
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/home.svg b/src/assets/svg/home.svg
index ee81985..b21e27b 100644
--- a/src/assets/svg/home.svg
+++ b/src/assets/svg/home.svg
@@ -1 +1 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M116.707556 631.751111a56.888889 56.888889 0 1 1 113.777777 0V910.222222h539.704889V512a56.888889 56.888889 0 1 1 113.777778 0v398.222222a113.777778 113.777778 0 0 1-113.777778 113.777778H230.485333a113.777778 113.777778 0 0 1-113.777777-113.777778v-278.471111z" /><path d="M98.929778 573.070222a56.888889 56.888889 0 0 1-84.081778-76.629333L412.700444 59.904A113.777778 113.777778 0 0 1 578.019556 56.888889l429.710222 438.044444a56.888889 56.888889 0 0 1-81.237334 79.644445L496.810667 136.533333 98.929778 573.098667z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M116.707556 631.751111a56.888889 56.888889 0 1 1 113.777777 0V910.222222h539.704889V512a56.888889 56.888889 0 1 1 113.777778 0v398.222222a113.777778 113.777778 0 0 1-113.777778 113.777778H230.485333a113.777778 113.777778 0 0 1-113.777777-113.777778v-278.471111z" /><path d="M98.929778 573.070222a56.888889 56.888889 0 0 1-84.081778-76.629333L412.700444 59.904A113.777778 113.777778 0 0 1 578.019556 56.888889l429.710222 438.044444a56.888889 56.888889 0 0 1-81.237334 79.644445L496.810667 136.533333 98.929778 573.098667z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/jenkins.svg b/src/assets/svg/jenkins.svg
index ee77645..671dc18 100644
--- a/src/assets/svg/jenkins.svg
+++ b/src/assets/svg/jenkins.svg
@@ -1 +1 @@
-<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M487.1 425c-1.4-11.2-19-23.1-28.2-31.9-5.1-5-29-23.1-30.4-29.9-1.4-6.6 9.7-21.5 13.3-28.9 5.1-10.7 8.8-23.7 11.3-32.6 18.8-66.1 20.7-156.9-6.2-211.2-10.2-20.6-38.6-49-56.4-62.5-42-31.7-119.6-35.3-170.1-16.6-14.1 5.2-27.8 9.8-40.1 17.1-33.1 19.4-68.3 32.5-78.1 71.6-24.2 10.8-31.5 41.8-30.3 77.8.2 7 4.1 15.8 2.7 22.4-.7 3.3-5.2 7.6-6.1 9.8-11.6 27.7-2.3 64 11.1 83.7 8.1 11.9 21.5 22.4 39.2 25.2.7 10.6 3.3 19.7 8.2 30.4 3.1 6.8 14.7 19 10.4 27.7-2.2 4.4-21 13.8-27.3 17.6C89 407.2 73.7 415 54.2 429c-12.6 9-32.3 10.2-29.2 31.1 2.1 14.1 10.1 31.6 14.7 45.8.7 2 1.4 4.1 2.1 6h422c4.9-15.3 9.7-30.9 14.6-47.2 3.4-11.4 10.2-27.8 8.7-39.7zM205.9 33.7c1.8-.5 3.4.7 4.9 2.4-.2 5.2-5.4 5.1-8.9 6.8-5.4 6.7-13.4 9.8-20 17.2-6.8 7.5-14.4 27.7-23.4 30-4.5 1.1-9.7-.8-13.6-.5-10.4.7-17.7 6-28.3 7.5 13.6-29.9 56.1-54 89.3-63.4zm-104.8 93.6c13.5-14.9 32.1-24.1 54.8-25.9 11.7 29.7-8.4 65-.9 97.6 2.3 9.9 10.2 25.4-2.4 25.7.3-28.3-34.8-46.3-61.3-29.6-1.8-21.5-4.9-51.7 9.8-67.8zm36.7 200.2c-1-4.1-2.7-12.9-2.3-15.1 1.6-8.7 17.1-12.5 11-24.7-11.3-.1-13.8 10.2-24.1 11.3-26.7 2.6-45.6-35.4-44.4-58.4 1-19.5 17.6-38.2 40.1-35.8 16 1.8 21.4 19.2 24.5 34.7 9.2.5 22.5-.4 26.9-7.6-.6-17.5-8.8-31.6-8.2-47.7 1-30.3 17.5-57.6 4.8-87.4 13.6-30.9 53.5-55.3 83.1-70 36.6-18.3 94.9-3.7 129.3 15.8 19.7 11.1 34.4 32.7 48.3 50.7-19.5-5.8-36.1 4.2-33.1 20.3 16.3-14.9 44.2-.2 52.5 16.4 7.9 15.8 7.8 39.3 9 62.8 2.9 57-10.4 115.9-39.1 157.1-7.7 11-14.1 23-24.9 30.6-26 18.2-65.4 34.7-99.2 23.4-44.7-15-65-44.8-89.5-78.8.7 18.7 13.8 34.1 26.8 48.4 11.3 12.5 25 26.6 39.7 32.4-12.3-2.9-31.1-3.8-36.2 7.2-28.6-1.9-55.1-4.8-68.7-24.2-10.6-15.4-21.4-41.4-26.3-61.4zm222 124.1c4.1-3 11.1-2.9 17.4-3.6-5.4-2.7-13-3.7-19.3-2.2-.1-4.2-2-6.8-3.2-10.2 10.6-3.8 35.5-28.5 49.6-20.3 6.7 3.9 9.5 26.2 10.1 37 .4 9-.8 18-4.5 22.8-18.8-.6-35.8-2.8-50.7-7 .9-6.1-1-12.1.6-16.5zm-17.2-20c-16.8.8-26-1.2-38.3-10.8.2-.8 1.4-.5 1.5-1.4 18 8 40.8-3.3 59-4.9-7.9 5.1-14.6 11.6-22.2 17.1zm-12.1 33.2c-1.6-9.4-3.5-12-2.8-20.2 25-16.6 29.7 28.6 2.8 20.2zM226 438.6c-11.6-.7-48.1-14-38.5-23.7 9.4 6.5 27.5 4.9 41.3 7.3.8 4.4-2.8 10.2-2.8 16.4zM57.7 497.1c-4.3-12.7-9.2-25.1-14.8-36.9 30.8-23.8 65.3-48.9 102.2-63.5 2.8-1.1 23.2 25.4 26.2 27.6 16.5 11.7 37 21 56.2 30.2 1.2 8.8 3.9 20.2 8.7 35.5.7 2.3 1.4 4.7 2.2 7.2H57.7zm240.6 5.7h-.8c.3-.2.5-.4.8-.5v.5zm7.5-5.7c2.1-1.4 4.3-2.8 6.4-4.3 1.1 1.4 2.2 2.8 3.2 4.3h-9.6zm15.1-24.7c-10.8 7.3-20.6 18.3-33.3 25.2-6 3.3-27 11.7-33.4 10.2-3.6-.8-3.9-5.3-5.4-9.5-3.1-9-10.1-23.4-10.8-37-.8-17.2-2.5-46 16-42.4 14.9 2.9 32.3 9.7 43.9 16.1 7.1 3.9 11.1 8.6 21.9 9.5-.1 1.4-.1 2.8-.2 4.3-5.9 3.9-15.3 3.8-21.8 7.1 9.5.4 17 2.7 23.5 5.9-.1 3.4-.3 7-.4 10.6zm53.4 24.7h-14c-.1-3.2-2.8-5.8-6.1-5.8s-5.9 2.6-6.1 5.8h-17.4c-2.8-4.4-5.7-8.6-8.9-12.5 2.1-2.2 4-4.7 6-6.9 9 3.7 14.8-4.9 21.7-4.2 7.9.8 14.2 11.7 25.4 11l-.6 12.6zm8.7 0c.2-4 .4-7.8.6-11.5 15.6-7.3 29 1.3 35.7 11.5H383zm83.4-37c-2.3 11.2-5.8 24-9.9 37.1-.2-.1-.4-.1-.6-.1H428c.6-1.1 1.2-2.2 1.9-3.3-2.6-6.1-9-8.7-10.9-15.5 12.1-22.7 6.5-93.4-24.2-78.5 4.3-6.3 15.6-11.5 20.8-19.3 13 10.4 20.8 20.3 33.2 31.4 6.8 6 20 13.3 21.4 23.1.8 5.5-2.6 18.9-3.8 25.1zM222.2 130.5c5.4-14.9 27.2-34.7 45-32 7.7 1.2 18 8.2 12.2 17.7-30.2-7-45.2 12.6-54.4 33.1-8.1-2-4.9-13.1-2.8-18.8zm184.1 63.1c8.2-3.6 22.4-.7 29.6-5.3-4.2-11.5-10.3-21.4-9.3-37.7.5 0 1 0 1.4.1 6.8 14.2 12.7 29.2 21.4 41.7-5.7 13.5-43.6 25.4-43.1 1.2zm20.4-43zm-117.2 45.7c-6.8-10.9-19-32.5-14.5-45.3 6.5 11.9 8.6 24.4 17.8 33.3 4.1 4 12.2 9 8.2 20.2-.9 2.7-7.8 8.6-11.7 9.7-14.4 4.3-47.9.9-36.6-17.1 11.9.7 27.9 7.8 36.8-.8zm27.3 70c3.8 6.6 1.4 18.7 12.1 20.6 20.2 3.4 43.6-12.3 58.1-17.8 9-15.2-.8-20.7-8.9-30.5-16.6-20-38.8-44.8-38-74.7 6.7-4.9 7.3 7.4 8.2 9.7 8.7 20.3 30.4 46.2 46.3 63.5 3.9 4.3 10.3 8.4 11 11.2 2.1 8.2-5.4 18-4.5 23.5-21.7 13.9-45.8 29.1-81.4 25.6-7.4-6.7-10.3-21.4-2.9-31.1zm-201.3-9.2c-6.8-3.9-8.4-21-16.4-21.4-11.4-.7-9.3 22.2-9.3 35.5-7.8-7.1-9.2-29.1-3.5-40.3-6.6-3.2-9.5 3.6-13.1 5.9 4.7-34.1 49.8-15.8 42.3 20.3zm299.6 28.8c-10.1 19.2-24.4 40.4-54 41-.6-6.2-1.1-15.6 0-19.4 22.7-2.2 36.6-13.7 54-21.6zm-141.9 12.4c18.9 9.9 53.6 11 79.3 10.2 1.4 5.6 1.3 12.6 1.4 19.4-33 1.8-72-6.4-80.7-29.6zm92.2 46.7c-1.7 4.3-5.3 9.3-9.8 11.1-12.1 4.9-45.6 8.7-62.4-.3-10.7-5.7-17.5-18.5-23.4-26-2.8-3.6-16.9-12.9-.2-12.9 13.1 32.7 58 29 95.8 28.1z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M487.1 425c-1.4-11.2-19-23.1-28.2-31.9-5.1-5-29-23.1-30.4-29.9-1.4-6.6 9.7-21.5 13.3-28.9 5.1-10.7 8.8-23.7 11.3-32.6 18.8-66.1 20.7-156.9-6.2-211.2-10.2-20.6-38.6-49-56.4-62.5-42-31.7-119.6-35.3-170.1-16.6-14.1 5.2-27.8 9.8-40.1 17.1-33.1 19.4-68.3 32.5-78.1 71.6-24.2 10.8-31.5 41.8-30.3 77.8.2 7 4.1 15.8 2.7 22.4-.7 3.3-5.2 7.6-6.1 9.8-11.6 27.7-2.3 64 11.1 83.7 8.1 11.9 21.5 22.4 39.2 25.2.7 10.6 3.3 19.7 8.2 30.4 3.1 6.8 14.7 19 10.4 27.7-2.2 4.4-21 13.8-27.3 17.6C89 407.2 73.7 415 54.2 429c-12.6 9-32.3 10.2-29.2 31.1 2.1 14.1 10.1 31.6 14.7 45.8.7 2 1.4 4.1 2.1 6h422c4.9-15.3 9.7-30.9 14.6-47.2 3.4-11.4 10.2-27.8 8.7-39.7zM205.9 33.7c1.8-.5 3.4.7 4.9 2.4-.2 5.2-5.4 5.1-8.9 6.8-5.4 6.7-13.4 9.8-20 17.2-6.8 7.5-14.4 27.7-23.4 30-4.5 1.1-9.7-.8-13.6-.5-10.4.7-17.7 6-28.3 7.5 13.6-29.9 56.1-54 89.3-63.4zm-104.8 93.6c13.5-14.9 32.1-24.1 54.8-25.9 11.7 29.7-8.4 65-.9 97.6 2.3 9.9 10.2 25.4-2.4 25.7.3-28.3-34.8-46.3-61.3-29.6-1.8-21.5-4.9-51.7 9.8-67.8zm36.7 200.2c-1-4.1-2.7-12.9-2.3-15.1 1.6-8.7 17.1-12.5 11-24.7-11.3-.1-13.8 10.2-24.1 11.3-26.7 2.6-45.6-35.4-44.4-58.4 1-19.5 17.6-38.2 40.1-35.8 16 1.8 21.4 19.2 24.5 34.7 9.2.5 22.5-.4 26.9-7.6-.6-17.5-8.8-31.6-8.2-47.7 1-30.3 17.5-57.6 4.8-87.4 13.6-30.9 53.5-55.3 83.1-70 36.6-18.3 94.9-3.7 129.3 15.8 19.7 11.1 34.4 32.7 48.3 50.7-19.5-5.8-36.1 4.2-33.1 20.3 16.3-14.9 44.2-.2 52.5 16.4 7.9 15.8 7.8 39.3 9 62.8 2.9 57-10.4 115.9-39.1 157.1-7.7 11-14.1 23-24.9 30.6-26 18.2-65.4 34.7-99.2 23.4-44.7-15-65-44.8-89.5-78.8.7 18.7 13.8 34.1 26.8 48.4 11.3 12.5 25 26.6 39.7 32.4-12.3-2.9-31.1-3.8-36.2 7.2-28.6-1.9-55.1-4.8-68.7-24.2-10.6-15.4-21.4-41.4-26.3-61.4zm222 124.1c4.1-3 11.1-2.9 17.4-3.6-5.4-2.7-13-3.7-19.3-2.2-.1-4.2-2-6.8-3.2-10.2 10.6-3.8 35.5-28.5 49.6-20.3 6.7 3.9 9.5 26.2 10.1 37 .4 9-.8 18-4.5 22.8-18.8-.6-35.8-2.8-50.7-7 .9-6.1-1-12.1.6-16.5zm-17.2-20c-16.8.8-26-1.2-38.3-10.8.2-.8 1.4-.5 1.5-1.4 18 8 40.8-3.3 59-4.9-7.9 5.1-14.6 11.6-22.2 17.1zm-12.1 33.2c-1.6-9.4-3.5-12-2.8-20.2 25-16.6 29.7 28.6 2.8 20.2zM226 438.6c-11.6-.7-48.1-14-38.5-23.7 9.4 6.5 27.5 4.9 41.3 7.3.8 4.4-2.8 10.2-2.8 16.4zM57.7 497.1c-4.3-12.7-9.2-25.1-14.8-36.9 30.8-23.8 65.3-48.9 102.2-63.5 2.8-1.1 23.2 25.4 26.2 27.6 16.5 11.7 37 21 56.2 30.2 1.2 8.8 3.9 20.2 8.7 35.5.7 2.3 1.4 4.7 2.2 7.2H57.7zm240.6 5.7h-.8c.3-.2.5-.4.8-.5v.5zm7.5-5.7c2.1-1.4 4.3-2.8 6.4-4.3 1.1 1.4 2.2 2.8 3.2 4.3h-9.6zm15.1-24.7c-10.8 7.3-20.6 18.3-33.3 25.2-6 3.3-27 11.7-33.4 10.2-3.6-.8-3.9-5.3-5.4-9.5-3.1-9-10.1-23.4-10.8-37-.8-17.2-2.5-46 16-42.4 14.9 2.9 32.3 9.7 43.9 16.1 7.1 3.9 11.1 8.6 21.9 9.5-.1 1.4-.1 2.8-.2 4.3-5.9 3.9-15.3 3.8-21.8 7.1 9.5.4 17 2.7 23.5 5.9-.1 3.4-.3 7-.4 10.6zm53.4 24.7h-14c-.1-3.2-2.8-5.8-6.1-5.8s-5.9 2.6-6.1 5.8h-17.4c-2.8-4.4-5.7-8.6-8.9-12.5 2.1-2.2 4-4.7 6-6.9 9 3.7 14.8-4.9 21.7-4.2 7.9.8 14.2 11.7 25.4 11l-.6 12.6zm8.7 0c.2-4 .4-7.8.6-11.5 15.6-7.3 29 1.3 35.7 11.5H383zm83.4-37c-2.3 11.2-5.8 24-9.9 37.1-.2-.1-.4-.1-.6-.1H428c.6-1.1 1.2-2.2 1.9-3.3-2.6-6.1-9-8.7-10.9-15.5 12.1-22.7 6.5-93.4-24.2-78.5 4.3-6.3 15.6-11.5 20.8-19.3 13 10.4 20.8 20.3 33.2 31.4 6.8 6 20 13.3 21.4 23.1.8 5.5-2.6 18.9-3.8 25.1zM222.2 130.5c5.4-14.9 27.2-34.7 45-32 7.7 1.2 18 8.2 12.2 17.7-30.2-7-45.2 12.6-54.4 33.1-8.1-2-4.9-13.1-2.8-18.8zm184.1 63.1c8.2-3.6 22.4-.7 29.6-5.3-4.2-11.5-10.3-21.4-9.3-37.7.5 0 1 0 1.4.1 6.8 14.2 12.7 29.2 21.4 41.7-5.7 13.5-43.6 25.4-43.1 1.2zm20.4-43zm-117.2 45.7c-6.8-10.9-19-32.5-14.5-45.3 6.5 11.9 8.6 24.4 17.8 33.3 4.1 4 12.2 9 8.2 20.2-.9 2.7-7.8 8.6-11.7 9.7-14.4 4.3-47.9.9-36.6-17.1 11.9.7 27.9 7.8 36.8-.8zm27.3 70c3.8 6.6 1.4 18.7 12.1 20.6 20.2 3.4 43.6-12.3 58.1-17.8 9-15.2-.8-20.7-8.9-30.5-16.6-20-38.8-44.8-38-74.7 6.7-4.9 7.3 7.4 8.2 9.7 8.7 20.3 30.4 46.2 46.3 63.5 3.9 4.3 10.3 8.4 11 11.2 2.1 8.2-5.4 18-4.5 23.5-21.7 13.9-45.8 29.1-81.4 25.6-7.4-6.7-10.3-21.4-2.9-31.1zm-201.3-9.2c-6.8-3.9-8.4-21-16.4-21.4-11.4-.7-9.3 22.2-9.3 35.5-7.8-7.1-9.2-29.1-3.5-40.3-6.6-3.2-9.5 3.6-13.1 5.9 4.7-34.1 49.8-15.8 42.3 20.3zm299.6 28.8c-10.1 19.2-24.4 40.4-54 41-.6-6.2-1.1-15.6 0-19.4 22.7-2.2 36.6-13.7 54-21.6zm-141.9 12.4c18.9 9.9 53.6 11 79.3 10.2 1.4 5.6 1.3 12.6 1.4 19.4-33 1.8-72-6.4-80.7-29.6zm92.2 46.7c-1.7 4.3-5.3 9.3-9.8 11.1-12.1 4.9-45.6 8.7-62.4-.3-10.7-5.7-17.5-18.5-23.4-26-2.8-3.6-16.9-12.9-.2-12.9 13.1 32.7 58 29 95.8 28.1z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/loading.svg b/src/assets/svg/loading.svg
index 140bea2..31935da 100644
--- a/src/assets/svg/loading.svg
+++ b/src/assets/svg/loading.svg
@@ -1 +1 @@
-<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3 0.1 19.9-16 36-35.9 36z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3 0.1 19.9-16 36-35.9 36z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg
index bae41f6..d12ed75 100644
--- a/src/assets/svg/logo.svg
+++ b/src/assets/svg/logo.svg
@@ -1 +1 @@
-<svg viewBox="0 0 911.75 898.91" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M828.52,831.72c-216,259.7-774.46,115.85-765.17-319.5-19-292.76,370.82-602.09,704.81-367.11,44.53,48.2,81.39,32.52,121.28,46.67,28.28,14.3,21.36,42.61,52.36,142.6,31.6,101.09,60.92,133.92-17.45,182.4-28,11.34-46.6-2.34-117.82-25.31-92-29.65-109-22.33-132.66-48-27.26-29.62-14.42-50.13-41.31-80.13C507.2,259.81,336.39,351,290.74,489.72c-7,26.59-20.37,92.15,8.72,162.38,25.72,62.11,71.11,95.23,99.93,115.7C554.85,878.2,781.33,840.41,828.52,831.72Zm50.11-584.95c-15.4,5.93.73,47,16,40.82C910.07,281.66,893.94,240.63,878.63,246.77Zm-152,180.06c-4.34,15.92,35.73,26.64,39.92,10.68C770.9,421.58,730.83,410.86,726.63,426.83Z" transform="translate(-62.68 -62.16)"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 911.75 898.91"><path d="M828.52,831.72c-216,259.7-774.46,115.85-765.17-319.5-19-292.76,370.82-602.09,704.81-367.11,44.53,48.2,81.39,32.52,121.28,46.67,28.28,14.3,21.36,42.61,52.36,142.6,31.6,101.09,60.92,133.92-17.45,182.4-28,11.34-46.6-2.34-117.82-25.31-92-29.65-109-22.33-132.66-48-27.26-29.62-14.42-50.13-41.31-80.13C507.2,259.81,336.39,351,290.74,489.72c-7,26.59-20.37,92.15,8.72,162.38,25.72,62.11,71.11,95.23,99.93,115.7C554.85,878.2,781.33,840.41,828.52,831.72Zm50.11-584.95c-15.4,5.93.73,47,16,40.82C910.07,281.66,893.94,240.63,878.63,246.77Zm-152,180.06c-4.34,15.92,35.73,26.64,39.92,10.68C770.9,421.58,730.83,410.86,726.63,426.83Z" transform="translate(-62.68 -62.16)"/></svg>
\ No newline at end of file
diff --git a/src/assets/svg/menu.svg b/src/assets/svg/menu.svg
index f506c1b..79e4667 100644
--- a/src/assets/svg/menu.svg
+++ b/src/assets/svg/menu.svg
@@ -1 +1 @@
-<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M950.784 768v72.704q0 15.36-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264t-11.264-25.6V768q0-15.36 11.264-25.6t25.6-11.264h803.84q15.36 0 26.624 11.264t10.24 25.6z m0-292.864v73.728q0 14.336-10.24 25.6t-26.624 10.24H110.08q-15.36 0-25.6-10.24t-11.264-25.6v-73.728q0-14.336 11.264-25.6t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 25.6z m0-291.84V256q0 14.336-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264T73.216 256V183.296q0-15.36 11.264-26.624t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 26.624z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M950.784 768v72.704q0 15.36-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264t-11.264-25.6V768q0-15.36 11.264-25.6t25.6-11.264h803.84q15.36 0 26.624 11.264t10.24 25.6z m0-292.864v73.728q0 14.336-10.24 25.6t-26.624 10.24H110.08q-15.36 0-25.6-10.24t-11.264-25.6v-73.728q0-14.336 11.264-25.6t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 25.6z m0-291.84V256q0 14.336-10.24 25.6t-26.624 11.264H110.08q-15.36 0-25.6-11.264T73.216 256V183.296q0-15.36 11.264-26.624t25.6-10.24h803.84q15.36 0 26.624 10.24t10.24 26.624z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/tool.svg b/src/assets/svg/tool.svg
index 0a3973c..cd63e87 100644
--- a/src/assets/svg/tool.svg
+++ b/src/assets/svg/tool.svg
@@ -1 +1 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1026 1024"><path d="M942.622517 803.602649c-10.172185-20.344371-30.516556-33.907285-54.251656-33.907285h-30.516556l-250.913908-250.913907 20.344371-20.344371c10.172185-10.172185 13.562914-20.344371 13.562914-33.907285s-3.390728-23.735099-13.562914-33.907284c-27.125828-27.125828-50.860927-40.688742-74.596026-50.860928-20.344371-6.781457-37.298013-20.344371-44.07947-40.688741-10.172185-27.125828-23.735099-50.860927-50.860928-74.596027L230.569536 33.907285C206.834437 13.562914 176.317881 0 145.801325 0c-33.907285 0-64.423841 13.562914-84.768212 33.907285l-27.125828 27.125828c-20.344371 20.344371-33.907285 50.860927-33.907285 84.768212 0 30.516556 13.562914 61.033113 33.907285 84.768211l227.178808 227.178808c27.125828 27.125828 50.860927 40.688742 74.596026 50.860928 20.344371 6.781457 37.298013 23.735099 44.07947 44.07947 10.172185 27.125828 23.735099 50.860927 50.860928 77.986755 10.172185 10.172185 20.344371 13.562914 33.907284 13.562914s23.735099-3.390728 33.907285-13.562914l20.344371-20.344371 250.913907 250.913907v30.516556c0 23.735099 13.562914 44.07947 33.907285 54.251656l145.801325 74.596027c3.390728 0 3.390728 3.390728 6.781456 3.390728s10.172185-3.390728 13.562914-3.390728l44.079471-44.079471c6.781457-6.781457 6.781457-13.562914 3.390728-20.344371l-74.596026-152.582781zM457.748344 674.754967c-16.953642-3.390728-33.907285-10.172185-47.470198-23.735099-30.516556-30.516556-50.860927-61.033113-61.033113-91.549669 0-3.390728-3.390728-6.781457-3.390728-10.172186-3.390728-3.390728-6.781457-6.781457-13.562914-6.781457s-10.172185 0-13.562914 6.781457l-23.7351 27.125828c-23.735099 20.344371-54.251656 33.907285-91.549668 33.907285-118.675497 0-203.443709 81.377483-203.443709 196.662251 0 6.781457 0 13.562914 3.390728 20.344371v3.390729c0 6.781457 3.390728 10.172185 10.172186 13.562914 3.390728 3.390728 10.172185 3.390728 16.953642 0L169.536424 759.523179c37.298013 20.344371 64.423841 57.642384 67.814569 98.331126L88.15894 949.403974c-3.390728 3.390728-6.781457 6.781457-6.781457 13.562913s3.390728 10.172185 6.781457 13.562914c37.298013 27.125828 77.986755 40.688742 122.066226 40.688742 50.860927 0 105.112583-23.735099 142.410596-67.814569 47.470199-50.860927 67.81457-98.331126 64.423841-149.192053 0-30.516556 13.562914-61.033113 37.298013-88.158941l10.172185-10.172185c3.390728-3.390728 6.781457-10.172185 3.390729-16.953643 0-6.781457-6.781457-10.172185-10.172186-10.172185z m-247.523178 325.509934zM562.860927 349.245033c30.516556 10.172185 61.033113 30.516556 88.158941 57.642384 13.562914 13.562914 20.344371 27.125828 23.735099 44.07947 0 6.781457 6.781457 10.172185 10.172185 13.562914h6.781457c3.390728 0 10.172185-3.390728 13.562914-6.781457l61.033113-64.423841c16.953642 3.390728 33.907285 6.781457 50.860927 6.781457 61.033113 0 115.284768-23.735099 152.582781-61.033112 30.516556-33.907285 50.860927-84.768212 47.470199-142.410596 0-6.781457-3.390728-10.172185-10.172185-13.562914-6.781457-3.390728-10.172185-3.390728-16.953643 0l-118.675496 71.205298c-37.298013-20.344371-64.423841-57.642384-67.81457-98.331126l132.238411-81.377484c3.390728-3.390728 6.781457-6.781457 6.781457-13.562913s-3.390728-10.172185-6.781457-13.562914C901.933775 16.953642 857.854305 0 806.993377 0s-105.112583 23.735099-142.410596 64.423841c-47.470199 50.860927-67.81457 98.331126-67.814569 149.192053 0 30.516556-13.562914 61.033113-37.298013 84.768212l-13.562914 13.562914c0 6.781457-3.390728 13.562914-3.390729 16.953642s3.390728 10.172185 3.390729 13.562914c6.781457 3.390728 10.172185 3.390728 16.953642 6.781457z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1026 1024"><path d="M942.622517 803.602649c-10.172185-20.344371-30.516556-33.907285-54.251656-33.907285h-30.516556l-250.913908-250.913907 20.344371-20.344371c10.172185-10.172185 13.562914-20.344371 13.562914-33.907285s-3.390728-23.735099-13.562914-33.907284c-27.125828-27.125828-50.860927-40.688742-74.596026-50.860928-20.344371-6.781457-37.298013-20.344371-44.07947-40.688741-10.172185-27.125828-23.735099-50.860927-50.860928-74.596027L230.569536 33.907285C206.834437 13.562914 176.317881 0 145.801325 0c-33.907285 0-64.423841 13.562914-84.768212 33.907285l-27.125828 27.125828c-20.344371 20.344371-33.907285 50.860927-33.907285 84.768212 0 30.516556 13.562914 61.033113 33.907285 84.768211l227.178808 227.178808c27.125828 27.125828 50.860927 40.688742 74.596026 50.860928 20.344371 6.781457 37.298013 23.735099 44.07947 44.07947 10.172185 27.125828 23.735099 50.860927 50.860928 77.986755 10.172185 10.172185 20.344371 13.562914 33.907284 13.562914s23.735099-3.390728 33.907285-13.562914l20.344371-20.344371 250.913907 250.913907v30.516556c0 23.735099 13.562914 44.07947 33.907285 54.251656l145.801325 74.596027c3.390728 0 3.390728 3.390728 6.781456 3.390728s10.172185-3.390728 13.562914-3.390728l44.079471-44.079471c6.781457-6.781457 6.781457-13.562914 3.390728-20.344371l-74.596026-152.582781zM457.748344 674.754967c-16.953642-3.390728-33.907285-10.172185-47.470198-23.735099-30.516556-30.516556-50.860927-61.033113-61.033113-91.549669 0-3.390728-3.390728-6.781457-3.390728-10.172186-3.390728-3.390728-6.781457-6.781457-13.562914-6.781457s-10.172185 0-13.562914 6.781457l-23.7351 27.125828c-23.735099 20.344371-54.251656 33.907285-91.549668 33.907285-118.675497 0-203.443709 81.377483-203.443709 196.662251 0 6.781457 0 13.562914 3.390728 20.344371v3.390729c0 6.781457 3.390728 10.172185 10.172186 13.562914 3.390728 3.390728 10.172185 3.390728 16.953642 0L169.536424 759.523179c37.298013 20.344371 64.423841 57.642384 67.814569 98.331126L88.15894 949.403974c-3.390728 3.390728-6.781457 6.781457-6.781457 13.562913s3.390728 10.172185 6.781457 13.562914c37.298013 27.125828 77.986755 40.688742 122.066226 40.688742 50.860927 0 105.112583-23.735099 142.410596-67.814569 47.470199-50.860927 67.81457-98.331126 64.423841-149.192053 0-30.516556 13.562914-61.033113 37.298013-88.158941l10.172185-10.172185c3.390728-3.390728 6.781457-10.172185 3.390729-16.953643 0-6.781457-6.781457-10.172185-10.172186-10.172185z m-247.523178 325.509934zM562.860927 349.245033c30.516556 10.172185 61.033113 30.516556 88.158941 57.642384 13.562914 13.562914 20.344371 27.125828 23.735099 44.07947 0 6.781457 6.781457 10.172185 10.172185 13.562914h6.781457c3.390728 0 10.172185-3.390728 13.562914-6.781457l61.033113-64.423841c16.953642 3.390728 33.907285 6.781457 50.860927 6.781457 61.033113 0 115.284768-23.735099 152.582781-61.033112 30.516556-33.907285 50.860927-84.768212 47.470199-142.410596 0-6.781457-3.390728-10.172185-10.172185-13.562914-6.781457-3.390728-10.172185-3.390728-16.953643 0l-118.675496 71.205298c-37.298013-20.344371-64.423841-57.642384-67.81457-98.331126l132.238411-81.377484c3.390728-3.390728 6.781457-6.781457 6.781457-13.562913s-3.390728-10.172185-6.781457-13.562914C901.933775 16.953642 857.854305 0 806.993377 0s-105.112583 23.735099-142.410596 64.423841c-47.470199 50.860927-67.81457 98.331126-67.814569 149.192053 0 30.516556-13.562914 61.033113-37.298013 84.768212l-13.562914 13.562914c0 6.781457-3.390728 13.562914-3.390729 16.953642s3.390728 10.172185 3.390729 13.562914c6.781457 3.390728 10.172185 3.390728 16.953642 6.781457z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/user.svg b/src/assets/svg/user.svg
index 1ac062a..55615ef 100644
--- a/src/assets/svg/user.svg
+++ b/src/assets/svg/user.svg
@@ -1 +1 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M707.797333 304.426667c0-114.218667-93.354667-206.805333-208.512-206.805334-115.157333 0-208.512 92.586667-208.512 206.805334 0 114.218667 93.354667 206.805333 208.512 206.805333 115.2 0 208.512-92.586667 208.512-206.805333m292.053334 656c1.365333 4.437333 2.304 9.088 2.304 13.994666 0 26.88-21.930667 48.725333-49.024 48.725334a48.853333 48.853333 0 0 1-48.981334-48.725334v-0.170666h-1.28c-12.757333-203.904-182.741333-365.482667-391.168-365.482667-208.469333 0-378.453333 161.578667-391.253333 365.482667h-1.109333v0.170666c0 26.88-21.930667 48.725333-48.981334 48.725334A48.853333 48.853333 0 0 1 21.333333 974.421333c0-4.608 0.853333-8.96 2.048-13.226666 14.250667-185.045333 131.882667-341.248 296.149334-410.88C243.2 494.976 193.28 405.589333 193.28 304.426667 193.28 136.32 330.453333 0 499.626667 0c169.216 0 306.346667 136.32 306.346666 304.426667a302.933333 302.933333 0 0 1-118.186666 239.914666c172.202667 66.005333 297.088 225.536 312.064 416.085334" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M707.797333 304.426667c0-114.218667-93.354667-206.805333-208.512-206.805334-115.157333 0-208.512 92.586667-208.512 206.805334 0 114.218667 93.354667 206.805333 208.512 206.805333 115.2 0 208.512-92.586667 208.512-206.805333m292.053334 656c1.365333 4.437333 2.304 9.088 2.304 13.994666 0 26.88-21.930667 48.725333-49.024 48.725334a48.853333 48.853333 0 0 1-48.981334-48.725334v-0.170666h-1.28c-12.757333-203.904-182.741333-365.482667-391.168-365.482667-208.469333 0-378.453333 161.578667-391.253333 365.482667h-1.109333v0.170666c0 26.88-21.930667 48.725333-48.981334 48.725334A48.853333 48.853333 0 0 1 21.333333 974.421333c0-4.608 0.853333-8.96 2.048-13.226666 14.250667-185.045333 131.882667-341.248 296.149334-410.88C243.2 494.976 193.28 405.589333 193.28 304.426667 193.28 136.32 330.453333 0 499.626667 0c169.216 0 306.346667 136.32 306.346666 304.426667a302.933333 302.933333 0 0 1-118.186666 239.914666c172.202667 66.005333 297.088 225.536 312.064 416.085334" /></svg>
\ No newline at end of file

From d26c4da45f489b373a30465bb816c0ad06bd64a3 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 Nov 2023 10:31:14 +0800
Subject: [PATCH 054/307] Optimize code

---
 src/components/common/sidebar/SidebarScroll.tsx |  2 +-
 src/components/home/Footer.tsx                  |  2 +-
 src/pages/HomeFramework.tsx                     |  2 +-
 src/pages/Login.tsx                             | 10 +++++-----
 src/pages/ToolsFramework.tsx                    |  9 ++-------
 src/router/index.tsx                            | 12 +++++++++++-
 src/router/user.tsx                             |  2 ++
 src/utils/auth.ts                               |  2 +-
 8 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/components/common/sidebar/SidebarScroll.tsx b/src/components/common/sidebar/SidebarScroll.tsx
index 8690664..cdd1fa5 100644
--- a/src/components/common/sidebar/SidebarScroll.tsx
+++ b/src/components/common/sidebar/SidebarScroll.tsx
@@ -1,4 +1,4 @@
-import React, { useImperativeHandle } from 'react'
+import React from 'react'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 
 export interface SidebarScrollElement {
diff --git a/src/components/home/Footer.tsx b/src/components/home/Footer.tsx
index 2200e30..1ec0e35 100644
--- a/src/components/home/Footer.tsx
+++ b/src/components/home/Footer.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import FitCenter from '@/components/common/FitCenter'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/home/footer.scss'
+import FitCenter from '@/components/common/FitCenter'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import { NavLink } from 'react-router-dom'
 
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index b16e2ec..bc6b1b5 100644
--- a/src/pages/HomeFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
 import router from '@/router'
-import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
 import '@/assets/css/pages/home-framework.scss'
 import LoadingMask from '@/components/common/LoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
+import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
 
 export const HomeFrameworkContext = createContext<{
     navbarHiddenState: {
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 47322d3..e8f0dbe 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,15 +1,15 @@
 import React from 'react'
+import { notification } from 'antd'
+import moment from 'moment'
+import '@/assets/css/pages/login.scss'
+import { setToken } from '@/utils/common'
+import { getUserInfo, login } from '@/utils/auth'
 import {
     SYSTEM_LOGIN_SUCCESS,
     SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR,
     SYSTEM_USER_DISABLE,
     SYSTEM_USERNAME_NOT_FOUND
 } from '@/constants/common.constants'
-import '@/assets/css/pages/login.scss'
-import { setToken } from '@/utils/common'
-import { getUserInfo, login } from '@/utils/auth'
-import { notification } from 'antd'
-import moment from 'moment'
 
 const Login: React.FC = () => {
     const [messageApi, contextHolder] = message.useMessage()
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index d246630..53e916f 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -23,18 +23,13 @@ const ToolsFramework: React.FC = () => {
                 <div className={'left-panel'}>
                     <Sidebar title={'氮工具'} onSidebarSwitch={handleOnSidebarSwitch}>
                         <SidebarItemList>
-                            <SidebarItem
-                                end
-                                path={''}
-                                icon={tools[0].icon}
-                                text={tools[0].name}
-                            ></SidebarItem>
+                            <SidebarItem end path={''} icon={tools[0].icon} text={tools[0].name} />
                             <SidebarItem
                                 end
                                 path={'all'}
                                 icon={tools[1].icon}
                                 text={tools[1].name}
-                            ></SidebarItem>
+                            />
                         </SidebarItemList>
                         <SidebarSeparate style={{ marginBottom: 0 }} />
                         <SidebarScroll ref={sidebarScrollRef}>
diff --git a/src/router/index.tsx b/src/router/index.tsx
index eac7490..435affd 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import tools from '@/router/tools'
 import home from '@/router/home'
-import user from '@/router/user.tsx'
+import user from '@/router/user'
+import system from '@/router/system'
 
 const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => {
     return jsonObject.map((value) => ({
@@ -69,6 +70,15 @@ const root: RouteJsonObject[] = [
                 name: '个人中心',
                 auth: true
             },
+            {
+                path: 'system',
+                absolutePath: '/system',
+                id: 'systemFramework',
+                component: React.lazy(() => import('@/pages/SystemFramework')),
+                children: setTitle(system, '系统设置'),
+                name: '系统设置',
+                auth: true
+            },
             {
                 path: '',
                 absolutePath: '/',
diff --git a/src/router/user.tsx b/src/router/user.tsx
index ee8c550..c561281 100644
--- a/src/router/user.tsx
+++ b/src/router/user.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 const user: RouteJsonObject[] = [
     {
         path: '',
+        absolutePath: '/user',
         id: 'user',
         name: '个人档案',
         icon: React.lazy(() => import('~icons/fatweb/user.jsx')),
@@ -10,6 +11,7 @@ const user: RouteJsonObject[] = [
     },
     {
         path: '*',
+        absolutePath: '*',
         element: <Navigate to="/user" replace />
     }
 ]
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 78cc186..c5ef482 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,10 +1,10 @@
 import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common'
+import request from '@/services'
 import {
     STORAGE_TOKEN_KEY,
     STORAGE_USER_INFO_KEY,
     DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
-import request from '@/services'
 import { URL_API_LOGIN, URL_API_LOGOUT, URL_API_USER_INFO } from '@/constants/urls.constants'
 
 let captcha: Captcha

From 9b6ab39ea118969655f08014166002ae515d30bf Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 Nov 2023 10:31:41 +0800
Subject: [PATCH 055/307] Add system setting

---
 src/assets/css/components/common/sidebar.scss |  2 +-
 src/assets/svg/setting.svg                    |  1 +
 src/components/common/sidebar/index.tsx       |  4 ++
 src/pages/SystemFramework.tsx                 | 37 +++++++++++++++++++
 src/pages/UserFramework.tsx                   | 17 +++++++--
 src/router/system.tsx                         | 19 ++++++++++
 6 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/svg/setting.svg
 create mode 100644 src/pages/SystemFramework.tsx
 create mode 100644 src/router/system.tsx

diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss
index b94d972..3fd86f3 100644
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -46,7 +46,7 @@
     }
   }
 
-  .content {
+  .content, .bottom-fixed {
     display: flex;
     min-height: 0;
     flex-direction: column;
diff --git a/src/assets/svg/setting.svg b/src/assets/svg/setting.svg
new file mode 100644
index 0000000..ee8bd94
--- /dev/null
+++ b/src/assets/svg/setting.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512.571429 373.257143c-34.171429 0-66.171429 13.257143-90.4 37.485714-24.114286 24.228571-37.485714 56.228571-37.485715 90.4 0 34.171429 13.371429 66.171429 37.485715 90.4 24.228571 24.114286 56.228571 37.485714 90.4 37.485714 34.171429 0 66.171429-13.371429 90.4-37.485714 24.114286-24.228571 37.485714-56.228571 37.485714-90.4 0-34.171429-13.371429-66.171429-37.485714-90.4a126.811429 126.811429 0 0 0-90.4-37.485714z m471.2 269.142857l-74.742858-63.885714c3.542857-21.714286 5.371429-43.885714 5.371429-65.942857s-1.828571-44.342857-5.371429-65.942858l74.742858-63.885714a36.605714 36.605714 0 0 0 10.628571-40.228571l-1.028571-2.971429a505.714286 505.714286 0 0 0-90.971429-157.371428l-2.057143-2.4a36.708571 36.708571 0 0 0-40.114286-10.857143l-92.8 33.028571c-34.285714-28.114286-72.457143-50.285714-113.828571-65.714286l-17.942857-97.028571a36.628571 36.628571 0 0 0-29.485714-29.371429l-3.085715-0.571428c-59.428571-10.742857-122.057143-10.742857-181.485714 0l-3.085714 0.571428a36.628571 36.628571 0 0 0-29.485715 29.371429l-18.057142 97.485714a403.931429 403.931429 0 0 0-113.028572 65.485715l-93.485714-33.257143a36.571429 36.571429 0 0 0-40.114286 10.857143l-2.057143 2.4a509.634286 509.634286 0 0 0-90.971428 157.371428l-1.028572 2.971429c-5.142857 14.285714-0.914286 30.285714 10.628572 40.228571l75.657143 64.571429c-3.542857 21.485714-5.257143 43.428571-5.257143 65.142857 0 21.942857 1.714286 43.885714 5.257143 65.142857l-75.428572 64.571429a36.605714 36.605714 0 0 0-10.628571 40.228571l1.028571 2.971429c20.685714 57.485714 51.2 110.628571 90.971429 157.371428l2.057143 2.4a36.708571 36.708571 0 0 0 40.114285 10.857143l93.485715-33.257143c34.057143 28 72 50.171429 113.028571 65.485714l18.057143 97.485715a36.628571 36.628571 0 0 0 29.485714 29.371428l3.085714 0.571429a512.308571 512.308571 0 0 0 181.485715 0l3.085714-0.571429a36.628571 36.628571 0 0 0 29.485714-29.371428l17.942857-97.028572c41.371429-15.542857 79.542857-37.6 113.828572-65.714285l92.8 33.028571a36.571429 36.571429 0 0 0 40.114286-10.857143l2.057142-2.4c39.771429-46.971429 70.285714-99.885714 90.971429-157.371428l1.028571-2.971429c4.914286-14.171429 0.685714-30.057143-10.857142-40z m-471.2 59.657143c-110.971429 0-200.914286-89.942857-200.914286-200.914286s89.942857-200.914286 200.914286-200.914286 200.914286 89.942857 200.914285 200.914286-89.942857 200.914286-200.914285 200.914286z" /></svg>
\ No newline at end of file
diff --git a/src/components/common/sidebar/index.tsx b/src/components/common/sidebar/index.tsx
index 41f1006..87dd435 100644
--- a/src/components/common/sidebar/index.tsx
+++ b/src/components/common/sidebar/index.tsx
@@ -9,6 +9,7 @@ interface SidebarProps extends React.PropsWithChildren {
     title: string
     width?: string
     onSidebarSwitch?: (hidden: boolean) => void
+    bottomFixed?: React.ReactNode
 }
 
 const Sidebar: React.FC<SidebarProps> = (props) => {
@@ -34,6 +35,9 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
                 </div>
                 <SidebarSeparate style={{ marginTop: 0 }} />
                 <div className={'content'}>{props.children}</div>
+                <div className={'bottom-fixed'} style={{ flex: 'none' }}>
+                    {props.bottomFixed}
+                </div>
                 <SidebarSeparate style={{ marginTop: 0, marginBottom: 0 }} />
                 <SidebarFooter />
             </div>
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
new file mode 100644
index 0000000..2dc509d
--- /dev/null
+++ b/src/pages/SystemFramework.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import system from '@/router/system'
+import '@/assets/css/pages/tools-framework.scss'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import Sidebar from '@/components/common/sidebar'
+import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
+import SidebarItem from '@/components/common/sidebar/SidebarItem'
+
+const SystemFramework: React.FC = () => {
+    return (
+        <>
+            <FitFullScreen className={'flex-horizontal'}>
+                <div className={'left-panel'}>
+                    <Sidebar title={'系统设置'}>
+                        <SidebarItemList>
+                            {system.map((value) => {
+                                return value.menu ? (
+                                    <SidebarItem
+                                        path={value.absolutePath}
+                                        icon={value.icon}
+                                        text={value.name}
+                                        key={value.id}
+                                    />
+                                ) : undefined
+                            })}
+                        </SidebarItemList>
+                    </Sidebar>
+                </div>
+                <div className={'right-panel'}>
+                    <Outlet />
+                </div>
+            </FitFullScreen>
+        </>
+    )
+}
+
+export default SystemFramework
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 69ae406..d2a70e2 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -1,17 +1,28 @@
 import React from 'react'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import user from '@/router/user'
 import '@/assets/css/pages/tools-framework.scss'
+import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
-import user from '@/router/user.tsx'
 
 const ToolsFramework: React.FC = () => {
     return (
         <>
             <FitFullScreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
-                    <Sidebar title={'个人中心'}>
+                    <Sidebar
+                        title={'个人中心'}
+                        bottomFixed={
+                            <SidebarItemList>
+                                <SidebarItem
+                                    path={'/system'}
+                                    icon={IconFatwebSetting}
+                                    text={'系统设置'}
+                                />
+                            </SidebarItemList>
+                        }
+                    >
                         <SidebarItemList>
                             {user.map((value) => {
                                 return value.menu ? (
diff --git a/src/router/system.tsx b/src/router/system.tsx
new file mode 100644
index 0000000..23ce4ae
--- /dev/null
+++ b/src/router/system.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+const user: RouteJsonObject[] = [
+    {
+        path: '',
+        absolutePath: '/system',
+        id: 'system',
+        name: '系统设置',
+        icon: React.lazy(() => import('~icons/fatweb/setting.jsx')),
+        menu: true
+    },
+    {
+        path: '*',
+        absolutePath: '*',
+        element: <Navigate to="/system" replace />
+    }
+]
+
+export default user

From aa295db6ae816c263d12c2cc542ae70cd61bce37 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 Nov 2023 11:42:31 +0800
Subject: [PATCH 056/307] Menu permission control

---
 src/global.d.ts             | 10 +++++++---
 src/pages/UserFramework.tsx | 17 ++++++++++-------
 src/router/index.tsx        |  5 ++++-
 src/utils/auth.ts           | 12 +++++++++---
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index 644b9f4..0a7bbd7 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -16,6 +16,7 @@ type RouteJsonObject = {
     id?: string
     element?: React.JSX.Element
     component?: React.ComponentType
+    children?: RouteJsonObject[]
     name?: string
     titlePrefix?: string
     title?: string
@@ -23,18 +24,21 @@ type RouteJsonObject = {
     icon?: IconComponent
     menu?: boolean
     auth?: boolean
-    children?: RouteJsonObject[]
+    permission?: boolean
+    autoHide?: boolean
 }
 
 type RouteHandle = {
     absolutePath: string
     name?: string
-    menu?: boolean
-    auth?: boolean
     titlePrefix?: string
     title?: string
     titlePostfix?: string
     icon?: IconComponent
+    menu?: boolean
+    auth?: boolean
+    permission?: boolean
+    autoHide?: boolean
 }
 
 type _Response<T> = {
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index d2a70e2..72b4b7a 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -5,6 +5,7 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
+import { hasPathPermission } from '@/utils/auth.ts'
 
 const ToolsFramework: React.FC = () => {
     return (
@@ -14,13 +15,15 @@ const ToolsFramework: React.FC = () => {
                     <Sidebar
                         title={'个人中心'}
                         bottomFixed={
-                            <SidebarItemList>
-                                <SidebarItem
-                                    path={'/system'}
-                                    icon={IconFatwebSetting}
-                                    text={'系统设置'}
-                                />
-                            </SidebarItemList>
+                            hasPathPermission('/system') ? (
+                                <SidebarItemList>
+                                    <SidebarItem
+                                        path={'/system'}
+                                        icon={IconFatwebSetting}
+                                        text={'系统设置'}
+                                    />
+                                </SidebarItemList>
+                            ) : undefined
                         }
                     >
                         <SidebarItemList>
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 435affd..eab5e64 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -11,13 +11,16 @@ const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => {
         element: value.element,
         Component: value.component,
         handle: {
+            absolutePath: value.absolutePath,
             name: value.name,
             titlePrefix: value.titlePrefix,
             title: value.title,
             titlePostfix: value.titlePostfix,
             icon: value.icon,
             menu: value.menu,
-            auth: value.auth
+            auth: value.auth,
+            permission: value.permission,
+            autoHide: value.autoHide
         },
         children: value.children && mapJsonToRoute(value.children)
     }))
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index c5ef482..18f37cb 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -75,16 +75,21 @@ export const getPermissionPath = (): string[] => {
     const user = JSON.parse(s) as UserWithInfoVo
     const paths: string[] = []
     user.menus.forEach((menu) => {
-        paths.join(menu.url)
+        paths.push(menu.url)
     })
 
     return paths
 }
 
+export const hasPathPermission = (path: string) => {
+    return getPermissionPath().indexOf(path) !== -1
+}
+
+/*
 export const getAuthRoute = (route: RouteJsonObject[]): RouteJsonObject[] => {
     return route.map((value) => {
-        if (value.auth) {
-            value.path
+        if (value.absolutePath) {
+            value.absolutePath
         }
         if (value.children) {
             value.children = getAuthRoute(value.children)
@@ -92,6 +97,7 @@ export const getAuthRoute = (route: RouteJsonObject[]): RouteJsonObject[] => {
         return value
     })
 }
+*/
 
 export const getCaptchaSrc = () => {
     captcha = getCaptcha(300, 150, 4)

From b548fb8083af1096e3b00cee826173e713760fa8 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 Nov 2023 14:47:41 +0800
Subject: [PATCH 057/307] Update dependencies. Add page. Optimize code.

---
 package-lock.json             | 1089 ++++++++++++++++++---------------
 package.json                  |   44 +-
 src/assets/svg/group.svg      |    1 +
 src/assets/svg/role.svg       |    1 +
 src/global.d.ts               |    4 +-
 src/main.tsx                  |    3 +-
 src/pages/SystemFramework.tsx |   12 +-
 src/pages/UserFramework.tsx   |    1 +
 src/pages/system/Group.tsx    |    7 +
 src/pages/system/Role.tsx     |    7 +
 src/pages/system/User.tsx     |    7 +
 src/pages/system/index.tsx    |    7 +
 src/pages/user/index.tsx      |    7 +
 src/router/home.tsx           |    6 +-
 src/router/system.tsx         |   34 +
 src/router/tools.tsx          |    2 +-
 src/router/user.tsx           |    1 +
 src/services/index.tsx        |    2 +-
 src/utils/auth.ts             |   14 +-
 19 files changed, 734 insertions(+), 515 deletions(-)
 create mode 100644 src/assets/svg/group.svg
 create mode 100644 src/assets/svg/role.svg
 create mode 100644 src/pages/system/Group.tsx
 create mode 100644 src/pages/system/Role.tsx
 create mode 100644 src/pages/system/User.tsx
 create mode 100644 src/pages/system/index.tsx
 create mode 100644 src/pages/user/index.tsx

diff --git a/package-lock.json b/package-lock.json
index 159998f..6974339 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,45 +9,45 @@
       "version": "0.0.0",
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
-        "antd": "^5.8.6",
-        "axios": "^1.5.0",
-        "jwt-decode": "^3.1.2",
+        "antd": "^5.10.3",
+        "axios": "^1.6.0",
+        "jwt-decode": "^4.0.0",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
         "match-sorter": "^6.3.1",
         "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router": "^6.15.0",
-        "react-router-dom": "^6.15.0"
+        "react-router": "^6.18.0",
+        "react-router-dom": "^6.18.0"
       },
       "devDependencies": {
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
-        "@types/jsdom": "^21.1.2",
-        "@types/lodash": "^4.14.198",
-        "@types/node": "^20.5.9",
-        "@types/react": "^18.2.21",
-        "@types/react-dom": "^18.2.7",
-        "@typescript-eslint/eslint-plugin": "^6.6.0",
-        "@typescript-eslint/parser": "^6.6.0",
-        "@vitejs/plugin-react": "^4.0.4",
-        "eslint": "^8.48.0",
+        "@types/jsdom": "^21.1.4",
+        "@types/lodash": "^4.14.200",
+        "@types/node": "^20.8.10",
+        "@types/react": "^18.2.33",
+        "@types/react-dom": "^18.2.14",
+        "@typescript-eslint/eslint-plugin": "^6.9.1",
+        "@typescript-eslint/parser": "^6.9.1",
+        "@vitejs/plugin-react": "^4.1.0",
+        "eslint": "^8.52.0",
         "eslint-config-prettier": "^9.0.0",
-        "eslint-config-standard-with-typescript": "^39.0.0",
-        "eslint-plugin-import": "^2.28.1",
-        "eslint-plugin-prettier": "^5.0.0",
+        "eslint-config-standard-with-typescript": "^39.1.1",
+        "eslint-plugin-import": "^2.29.0",
+        "eslint-plugin-prettier": "^5.0.1",
         "eslint-plugin-promise": "^6.1.1",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.4.3",
+        "eslint-plugin-react-refresh": "^0.4.4",
         "jsdom": "^22.1.0",
         "prettier": "^3.0.3",
-        "sass": "^1.66.1",
+        "sass": "^1.69.5",
         "stylelint-config-prettier": "^9.0.5",
         "typescript": "^5.2.2",
-        "unplugin-auto-import": "^0.16.6",
-        "unplugin-icons": "^0.17.0",
-        "vite": "^4.4.9"
+        "unplugin-auto-import": "^0.16.7",
+        "unplugin-icons": "^0.17.1",
+        "vite": "^4.5.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -81,9 +81,9 @@
       }
     },
     "node_modules/@ant-design/cssinjs": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmmirror.com/@ant-design/cssinjs/-/cssinjs-1.17.0.tgz",
-      "integrity": "sha512-MgGCZ6sfD3yQB0XW0hN4jgixMxApTlDYyct+pc7fRZNO4CaqWWm/9iXkkljNR27lyWLZmm+XiDfcIOo1bnrnMA==",
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.17.2.tgz",
+      "integrity": "sha512-vu7lnfEx4Mf8MPzZxn506Zen3Nt4fRr2uutwvdCuTCN5IiU0lDdQ0tiJ24/rmB8+pefwjluYsbyzbQSbgfJy+A==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "@emotion/hash": "^0.8.0",
@@ -139,17 +139,20 @@
     },
     "node_modules/@antfu/install-pkg": {
       "version": "0.1.1",
-      "resolved": "https://registry.npmmirror.com/@antfu/install-pkg/-/install-pkg-0.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.1.1.tgz",
       "integrity": "sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==",
       "dev": true,
       "dependencies": {
         "execa": "^5.1.1",
         "find-up": "^5.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@antfu/install-pkg/node_modules/execa": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
       "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
       "dev": true,
       "dependencies": {
@@ -165,11 +168,14 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
     "node_modules/@antfu/install-pkg/node_modules/human-signals": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "dev": true,
       "engines": {
@@ -178,16 +184,19 @@
     },
     "node_modules/@antfu/install-pkg/node_modules/is-stream": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
       "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "dev": true,
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@antfu/install-pkg/node_modules/mimic-fn": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true,
       "engines": {
@@ -196,7 +205,7 @@
     },
     "node_modules/@antfu/install-pkg/node_modules/npm-run-path": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
       "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
       "dev": true,
       "dependencies": {
@@ -208,7 +217,7 @@
     },
     "node_modules/@antfu/install-pkg/node_modules/onetime": {
       "version": "5.1.2",
-      "resolved": "https://registry.npmmirror.com/onetime/-/onetime-5.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "dev": true,
       "dependencies": {
@@ -216,11 +225,14 @@
       },
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@antfu/install-pkg/node_modules/strip-final-newline": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true,
       "engines": {
@@ -256,22 +268,22 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.22.15.tgz",
-      "integrity": "sha512-PtZqMmgRrvj8ruoEOIwVA3yoF91O+Hgw9o7DAUTNBA6Mo2jpu31clx9a7Nz/9JznqetTR6zwfC4L3LAjKQXUwA==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.2.tgz",
+      "integrity": "sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.22.15",
+        "@babel/generator": "^7.23.0",
         "@babel/helper-compilation-targets": "^7.22.15",
-        "@babel/helper-module-transforms": "^7.22.15",
-        "@babel/helpers": "^7.22.15",
-        "@babel/parser": "^7.22.15",
+        "@babel/helper-module-transforms": "^7.23.0",
+        "@babel/helpers": "^7.23.2",
+        "@babel/parser": "^7.23.0",
         "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.22.15",
-        "@babel/types": "^7.22.15",
-        "convert-source-map": "^1.7.0",
+        "@babel/traverse": "^7.23.2",
+        "@babel/types": "^7.23.0",
+        "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
         "json5": "^2.2.3",
@@ -279,15 +291,19 @@
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.22.15.tgz",
-      "integrity": "sha512-Zu9oWARBqeVOW0dZOjXc3JObrzuqothQ3y/n1kUtrjCoCPLkXUwMvOo/F/TCfoHMbWIFlWwpZtkZVb9ga4U2pA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
+      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.15",
+        "@babel/types": "^7.23.0",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -313,22 +329,22 @@
       }
     },
     "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-      "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-      "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -336,7 +352,7 @@
     },
     "node_modules/@babel/helper-hoist-variables": {
       "version": "7.22.5",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
       "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
       "dev": true,
       "dependencies": {
@@ -348,7 +364,7 @@
     },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
       "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
       "dev": true,
       "dependencies": {
@@ -359,16 +375,16 @@
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.15.tgz",
-      "integrity": "sha512-l1UiX4UyHSFsYt17iQ3Se5pQQZZHa22zyIXURmvkmLCD4t/aU+dvNWHatKac/D9Vm9UES7nvIqHs4jZqKviUmQ==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz",
+      "integrity": "sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-module-imports": "^7.22.15",
         "@babel/helper-simple-access": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/helper-validator-identifier": "^7.22.15"
+        "@babel/helper-validator-identifier": "^7.22.20"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -388,7 +404,7 @@
     },
     "node_modules/@babel/helper-simple-access": {
       "version": "7.22.5",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
       "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
       "dev": true,
       "dependencies": {
@@ -400,7 +416,7 @@
     },
     "node_modules/@babel/helper-split-export-declaration": {
       "version": "7.22.6",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
       "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
       "dev": true,
       "dependencies": {
@@ -420,9 +436,9 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz",
-      "integrity": "sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -438,14 +454,14 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.22.15.tgz",
-      "integrity": "sha512-7pAjK0aSdxOwR+CcYAqgWOGy5dcfvzsTIfFTb2odQqW47MDfv14UaJDY6eng8ylM2EaeKXdxaSWESbkmaQHTmw==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.2.tgz",
+      "integrity": "sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.22.15",
-        "@babel/types": "^7.22.15"
+        "@babel/traverse": "^7.23.2",
+        "@babel/types": "^7.23.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -466,9 +482,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.22.15.tgz",
-      "integrity": "sha512-RWmQ/sklUN9BvGGpCDgSubhHWfAx24XDTDObup4ffvxaYsptOg2P3KG0j+1eWKLxpkX0j0uHxmpq2Z1SP/VhxA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -508,9 +524,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.15.tgz",
-      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -520,7 +536,7 @@
     },
     "node_modules/@babel/template": {
       "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.22.15.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
       "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
       "dev": true,
       "dependencies": {
@@ -533,19 +549,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.22.15.tgz",
-      "integrity": "sha512-DdHPwvJY0sEeN4xJU5uRLmZjgMMDIvMPniLuYzUVXj/GGzysPl0/fwt44JBkyUIzGJPV8QgHMcQdQ34XFuKTYQ==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
+      "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.22.15",
-        "@babel/helper-environment-visitor": "^7.22.5",
-        "@babel/helper-function-name": "^7.22.5",
+        "@babel/generator": "^7.23.0",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.22.15",
-        "@babel/types": "^7.22.15",
+        "@babel/parser": "^7.23.0",
+        "@babel/types": "^7.23.0",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -554,13 +570,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.22.15.tgz",
-      "integrity": "sha512-X+NLXr0N8XXmN5ZsaQdm9U2SSC3UbIYq/doL++sueHOTisgZHoKaQtZxGuV2cUPQHMfjKEfg/g6oy7Hm6SKFtA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
+      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
       "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.15",
+        "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -590,12 +606,12 @@
     },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
-      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
     "node_modules/@emotion/unitless": {
       "version": "0.7.5",
-      "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "node_modules/@esbuild/android-arm": {
@@ -1016,21 +1032,21 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.48.0",
-      "resolved": "https://registry.npmmirror.com/@eslint/js/-/js-8.48.0.tgz",
-      "integrity": "sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.52.0.tgz",
+      "integrity": "sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.11",
-      "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
-      "integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==",
+      "version": "0.11.13",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
+      "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
       "dev": true,
       "dependencies": {
-        "@humanwhocodes/object-schema": "^1.2.1",
+        "@humanwhocodes/object-schema": "^2.0.1",
         "debug": "^4.1.1",
         "minimatch": "^3.0.5"
       },
@@ -1048,21 +1064,21 @@
       }
     },
     "node_modules/@humanwhocodes/object-schema": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmmirror.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
+      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
     "node_modules/@iconify/types": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
       "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
       "dev": true
     },
     "node_modules/@iconify/utils": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmmirror.com/@iconify/utils/-/utils-2.1.9.tgz",
-      "integrity": "sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==",
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.1.11.tgz",
+      "integrity": "sha512-M/w3PkN8zQYXi8N6qK/KhnYMfEbbb6Sk8RZVn8g+Pmmu5ybw177RpsaGwpziyHeUsu4etrexYSWq3rwnIqzYCg==",
       "dev": true,
       "dependencies": {
         "@antfu/install-pkg": "^0.1.1",
@@ -1073,6 +1089,18 @@
         "local-pkg": "^0.4.3"
       }
     },
+    "node_modules/@iconify/utils/node_modules/local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -1190,7 +1218,7 @@
     },
     "node_modules/@rc-component/context": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/@rc-component/context/-/context-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz",
       "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
@@ -1203,7 +1231,7 @@
     },
     "node_modules/@rc-component/mini-decimal": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
       "integrity": "sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==",
       "dependencies": {
         "@babel/runtime": "^7.18.0"
@@ -1231,7 +1259,7 @@
     },
     "node_modules/@rc-component/portal": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmmirror.com/@rc-component/portal/-/portal-1.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.2.tgz",
       "integrity": "sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
@@ -1247,9 +1275,9 @@
       }
     },
     "node_modules/@rc-component/tour": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmmirror.com/@rc-component/tour/-/tour-1.8.1.tgz",
-      "integrity": "sha512-CsrQnfKgNArxx2j1RNHVLZgVA+rLrEj06lIsl4KSynMqADsqz8eKvVkr0F3p9PA10948M6WEEZt5a/FGAbGR2A==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.10.0.tgz",
+      "integrity": "sha512-voV0BKaTJbewB9LLgAHQ7tAGG7rgDkKQkZo82xw2gIk542hY+o7zwoqdN16oHhIKk7eG/xi+mdXrONT62Dt57A==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "@rc-component/portal": "^1.0.0-9",
@@ -1266,17 +1294,16 @@
       }
     },
     "node_modules/@rc-component/trigger": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmmirror.com/@rc-component/trigger/-/trigger-1.15.6.tgz",
-      "integrity": "sha512-Tl19KaGsShf4yzqxumsXVT4c7j0l20Dxe5hgP5S0HmxyhCg3oKen28ntGavRCIPW7cl7wgsGotntqcIokgDHzg==",
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.18.0.tgz",
+      "integrity": "sha512-vloGnWpeTmt7DBw0OHnG9poQ8h1WFh0hebq6fpgVjGYSxm6JU8rLH+kNwVNNvhL6Rg5He4ESjOk6O7uF9dJhxA==",
       "dependencies": {
-        "@babel/runtime": "^7.18.3",
+        "@babel/runtime": "^7.23.2",
         "@rc-component/portal": "^1.1.0",
         "classnames": "^2.3.2",
-        "rc-align": "^4.0.0",
         "rc-motion": "^2.0.0",
         "rc-resize-observer": "^1.3.1",
-        "rc-util": "^5.33.0"
+        "rc-util": "^5.38.0"
       },
       "engines": {
         "node": ">=8.x"
@@ -1287,17 +1314,17 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.8.0.tgz",
-      "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz",
+      "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==",
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.0.4.tgz",
-      "integrity": "sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.5.tgz",
+      "integrity": "sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==",
       "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
@@ -1308,7 +1335,7 @@
         "node": ">=14.0.0"
       },
       "peerDependencies": {
-        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
       },
       "peerDependenciesMeta": {
         "rollup": {
@@ -1490,16 +1517,57 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.3",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.3.tgz",
+      "integrity": "sha512-54fjTSeSHwfan8AyHWrKbfBWiEUrNTZsUwPTDSNaaP1QDQIZbeNUg3a59E9D+375MzUw/x1vx2/0F5LBz+AeYA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.6.tgz",
+      "integrity": "sha512-66BXMKb/sUWbMdBNdMvajU7i/44RkrA3z/Yt1c7R5xejt8qh84iU54yUWCtm0QwGJlDcf/gg4zd/x4mpLAlb/w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.3.tgz",
+      "integrity": "sha512-ciwyCLeuRfxboZ4isgdNZi/tkt06m8Tw6uGbBSBgWrnnZGNXiEyM27xc/PjXGQLqlZ6ylbgHMnm7ccF9tCkOeQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.3",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.3.tgz",
+      "integrity": "sha512-Lsh766rGEFbaxMIDH7Qa+Yha8cMVI3qAK6CHt3OR0YfxOIn5Z54iHiyDRycHrBqeIiqGa20Kpsv1cavfBKkRSw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
     "node_modules/@types/estree": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.1.tgz",
-      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.4.tgz",
+      "integrity": "sha512-2JwWnHK9H+wUZNorf2Zr6ves96WHoWDJIftkcxPKsS7Djta6Zu519LarhRNljPXkpsZR2ZMwNCPeW7omW07BJw==",
       "dev": true
     },
     "node_modules/@types/jsdom": {
-      "version": "21.1.2",
-      "resolved": "https://registry.npmmirror.com/@types/jsdom/-/jsdom-21.1.2.tgz",
-      "integrity": "sha512-bGj+7TaCkOwkJfx7HtS9p22Ij0A2aKMuz8a1+owpkxa1wU/HUBy/WAXhdv90uDdVI9rSjGvUrXmLSeA9VP3JeA==",
+      "version": "21.1.4",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.4.tgz",
+      "integrity": "sha512-NzAMLEV0KQ4cBaDx3Ls8VfJUElyDUm1xrtYRmcMK0gF8L5xYbujFVaQlJ50yinQ/d47j2rEP1XUzkiYrw4YRFA==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -1508,9 +1576,9 @@
       }
     },
     "node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
+      "version": "7.0.14",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz",
+      "integrity": "sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==",
       "dev": true
     },
     "node_modules/@types/json5": {
@@ -1520,9 +1588,9 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.198",
-      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.198.tgz",
-      "integrity": "sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg==",
+      "version": "4.14.200",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.200.tgz",
+      "integrity": "sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q==",
       "dev": true
     },
     "node_modules/@types/minimist": {
@@ -1533,10 +1601,13 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "20.5.9",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.5.9.tgz",
-      "integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==",
-      "dev": true
+      "version": "20.8.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.10.tgz",
+      "integrity": "sha512-TlgT8JntpcbmKUFzjhsyhGfP2fsiz1Mv56im6enJ905xG1DAYesxJaeSbGqQmAw8OWPdhyJGhGSQGKRNJ45u9w==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
     },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
@@ -1559,9 +1630,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.21",
-      "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.2.21.tgz",
-      "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==",
+      "version": "18.2.33",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.33.tgz",
+      "integrity": "sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1570,9 +1641,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.7",
-      "resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.2.7.tgz",
-      "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
+      "version": "18.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz",
+      "integrity": "sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -1585,9 +1656,9 @@
       "dev": true
     },
     "node_modules/@types/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-cJRQXpObxfNKkFAZbJl2yjWtJCqELQIdShsogr1d2MilP8dKD9TE/nEKHkJgUNHdGKCQaf9HbIynuV2csLGVLg==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==",
       "dev": true
     },
     "node_modules/@types/tough-cookie": {
@@ -1597,16 +1668,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.6.0.tgz",
-      "integrity": "sha512-CW9YDGTQnNYMIo5lMeuiIG08p4E0cXrXTbcZ2saT/ETE7dWUrNxlijsQeU04qAAKkILiLzdQz+cGFxCJjaZUmA==",
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.9.1.tgz",
+      "integrity": "sha512-w0tiiRc9I4S5XSXXrMHOWgHgxbrBn1Ro+PmiYhSg2ZVdxrAJtQgzU5o2m1BfP6UOn7Vxcc6152vFjQfmZR4xEg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.6.0",
-        "@typescript-eslint/type-utils": "6.6.0",
-        "@typescript-eslint/utils": "6.6.0",
-        "@typescript-eslint/visitor-keys": "6.6.0",
+        "@typescript-eslint/scope-manager": "6.9.1",
+        "@typescript-eslint/type-utils": "6.9.1",
+        "@typescript-eslint/utils": "6.9.1",
+        "@typescript-eslint/visitor-keys": "6.9.1",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.4",
@@ -1665,15 +1736,15 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.6.0.tgz",
-      "integrity": "sha512-setq5aJgUwtzGrhW177/i+DMLqBaJbdwGj2CPIVFFLE0NCliy5ujIdLHd2D1ysmlmsjdL2GWW+hR85neEfc12w==",
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.9.1.tgz",
+      "integrity": "sha512-C7AK2wn43GSaCUZ9do6Ksgi2g3mwFkMO3Cis96kzmgudoVaKyt62yNzJOktP0HDLb/iO2O0n2lBOzJgr6Q/cyg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.6.0",
-        "@typescript-eslint/types": "6.6.0",
-        "@typescript-eslint/typescript-estree": "6.6.0",
-        "@typescript-eslint/visitor-keys": "6.6.0",
+        "@typescript-eslint/scope-manager": "6.9.1",
+        "@typescript-eslint/types": "6.9.1",
+        "@typescript-eslint/typescript-estree": "6.9.1",
+        "@typescript-eslint/visitor-keys": "6.9.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1693,13 +1764,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.6.0.tgz",
-      "integrity": "sha512-pT08u5W/GT4KjPUmEtc2kSYvrH8x89cVzkA0Sy2aaOUIw6YxOIjA8ilwLr/1fLjOedX1QAuBpG9XggWqIIfERw==",
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.9.1.tgz",
+      "integrity": "sha512-38IxvKB6NAne3g/+MyXMs2Cda/Sz+CEpmm+KLGEM8hx/CvnSRuw51i8ukfwB/B/sESdeTGet1NH1Wj7I0YXswg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.6.0",
-        "@typescript-eslint/visitor-keys": "6.6.0"
+        "@typescript-eslint/types": "6.9.1",
+        "@typescript-eslint/visitor-keys": "6.9.1"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1710,13 +1781,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.6.0.tgz",
-      "integrity": "sha512-8m16fwAcEnQc69IpeDyokNO+D5spo0w1jepWWY2Q6y5ZKNuj5EhVQXjtVAeDDqvW6Yg7dhclbsz6rTtOvcwpHg==",
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.9.1.tgz",
+      "integrity": "sha512-eh2oHaUKCK58qIeYp19F5V5TbpM52680sB4zNSz29VBQPTWIlE/hCj5P5B1AChxECe/fmZlspAWFuRniep1Skg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.6.0",
-        "@typescript-eslint/utils": "6.6.0",
+        "@typescript-eslint/typescript-estree": "6.9.1",
+        "@typescript-eslint/utils": "6.9.1",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -1737,9 +1808,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.6.0.tgz",
-      "integrity": "sha512-CB6QpJQ6BAHlJXdwUmiaXDBmTqIE2bzGTDLADgvqtHWuhfNP3rAOK7kAgRMAET5rDRr9Utt+qAzRBdu3AhR3sg==",
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.9.1.tgz",
+      "integrity": "sha512-BUGslGOb14zUHOUmDB2FfT6SI1CcZEJYfF3qFwBeUrU6srJfzANonwRYHDpLBuzbq3HaoF2XL2hcr01c8f8OaQ==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1750,13 +1821,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.6.0.tgz",
-      "integrity": "sha512-hMcTQ6Al8MP2E6JKBAaSxSVw5bDhdmbCEhGW/V8QXkb9oNsFkA4SBuOMYVPxD3jbtQ4R/vSODBsr76R6fP3tbA==",
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.9.1.tgz",
+      "integrity": "sha512-U+mUylTHfcqeO7mLWVQ5W/tMLXqVpRv61wm9ZtfE5egz7gtnmqVIw9ryh0mgIlkKk9rZLY3UHygsBSdB9/ftyw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.6.0",
-        "@typescript-eslint/visitor-keys": "6.6.0",
+        "@typescript-eslint/types": "6.9.1",
+        "@typescript-eslint/visitor-keys": "6.9.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -1810,17 +1881,17 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.6.0.tgz",
-      "integrity": "sha512-mPHFoNa2bPIWWglWYdR0QfY9GN0CfvvXX1Sv6DlSTive3jlMTUy+an67//Gysc+0Me9pjitrq0LJp0nGtLgftw==",
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.9.1.tgz",
+      "integrity": "sha512-L1T0A5nFdQrMVunpZgzqPL6y2wVreSyHhKGZryS6jrEN7bD9NplVAyMryUhXsQ4TWLnZmxc2ekar/lSGIlprCA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
         "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.6.0",
-        "@typescript-eslint/types": "6.6.0",
-        "@typescript-eslint/typescript-estree": "6.6.0",
+        "@typescript-eslint/scope-manager": "6.9.1",
+        "@typescript-eslint/types": "6.9.1",
+        "@typescript-eslint/typescript-estree": "6.9.1",
         "semver": "^7.5.4"
       },
       "engines": {
@@ -1868,12 +1939,12 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.6.0.tgz",
-      "integrity": "sha512-L61uJT26cMOfFQ+lMZKoJNbAEckLe539VhTxiGHrWl5XSKQgA0RTBZJW2HFPy5T0ZvPVSD93QsrTKDkfNwJGyQ==",
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.9.1.tgz",
+      "integrity": "sha512-MUaPUe/QRLEffARsmNfmpghuQkW436DvESW+h+M52w0coICHRfD6Np9/K6PdACwnrq1HmuLl+cSPZaJmeVPkSw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.6.0",
+        "@typescript-eslint/types": "6.9.1",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -1884,15 +1955,22 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "dev": true
+    },
     "node_modules/@vitejs/plugin-react": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-react/-/plugin-react-4.0.4.tgz",
-      "integrity": "sha512-7wU921ABnNYkETiMaZy7XqpueMnpu5VxvVps13MjmCo+utBdD79sZzrApHawHtVX66cCJQQTXFcjH0y9dSUK8g==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.1.0.tgz",
+      "integrity": "sha512-rM0SqazU9iqPUraQ2JlIvReeaxOoRj6n+PzB1C0cBzIbd8qP336nC39/R9yPi3wVcah7E7j/kdU1uCUqMEU4OQ==",
       "dev": true,
       "dependencies": {
-        "@babel/core": "^7.22.9",
+        "@babel/core": "^7.22.20",
         "@babel/plugin-transform-react-jsx-self": "^7.22.5",
         "@babel/plugin-transform-react-jsx-source": "^7.22.5",
+        "@types/babel__core": "^7.20.2",
         "react-refresh": "^0.14.0"
       },
       "engines": {
@@ -1975,59 +2053,63 @@
       }
     },
     "node_modules/antd": {
-      "version": "5.8.6",
-      "resolved": "https://registry.npmmirror.com/antd/-/antd-5.8.6.tgz",
-      "integrity": "sha512-DQdHJSq7AH303NgAUZcMRrWqwRYLT9LjesrfhB9xwwi3ooWTMAnS0LrL2NIYHvXZQy1kV0C4mMSiSbBqEKatLA==",
+      "version": "5.10.3",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.10.3.tgz",
+      "integrity": "sha512-IV+F4P9Fm0pXj4WFCLVLKIu7eCtVKZMLvU1a0HUIRBEy5YPsD5bDzjYkZ4F+RVPaFrAjAvChrWcX6NtQOVNuJw==",
       "dependencies": {
         "@ant-design/colors": "^7.0.0",
-        "@ant-design/cssinjs": "^1.16.0",
-        "@ant-design/icons": "^5.2.2",
-        "@ant-design/react-slick": "~1.0.0",
+        "@ant-design/cssinjs": "^1.17.2",
+        "@ant-design/icons": "^5.2.6",
+        "@ant-design/react-slick": "~1.0.2",
         "@babel/runtime": "^7.18.3",
-        "@ctrl/tinycolor": "^3.6.0",
-        "@rc-component/color-picker": "~1.4.0",
-        "@rc-component/mutate-observer": "^1.0.0",
-        "@rc-component/tour": "~1.8.1",
-        "@rc-component/trigger": "^1.15.0",
+        "@ctrl/tinycolor": "^3.6.1",
+        "@rc-component/color-picker": "~1.4.1",
+        "@rc-component/mutate-observer": "^1.1.0",
+        "@rc-component/tour": "~1.10.0",
+        "@rc-component/trigger": "^1.18.0",
         "classnames": "^2.2.6",
         "copy-to-clipboard": "^3.2.0",
         "dayjs": "^1.11.1",
         "qrcode.react": "^3.1.0",
-        "rc-cascader": "~3.14.0",
+        "rc-cascader": "~3.18.1",
         "rc-checkbox": "~3.1.0",
-        "rc-collapse": "~3.7.0",
-        "rc-dialog": "~9.1.0",
-        "rc-drawer": "~6.2.0",
+        "rc-collapse": "~3.7.1",
+        "rc-dialog": "~9.3.4",
+        "rc-drawer": "~6.5.2",
         "rc-dropdown": "~4.1.0",
-        "rc-field-form": "~1.36.0",
-        "rc-image": "~7.1.0",
-        "rc-input": "~1.1.0",
-        "rc-input-number": "~8.0.2",
-        "rc-mentions": "~2.5.0",
-        "rc-menu": "~9.10.0",
-        "rc-motion": "^2.7.3",
-        "rc-notification": "~5.1.1",
-        "rc-pagination": "~3.6.0",
-        "rc-picker": "~3.13.0",
-        "rc-progress": "~3.4.1",
+        "rc-field-form": "~1.39.0",
+        "rc-image": "~7.3.1",
+        "rc-input": "~1.2.1",
+        "rc-input-number": "~8.1.0",
+        "rc-mentions": "~2.8.0",
+        "rc-menu": "~9.12.2",
+        "rc-motion": "^2.9.0",
+        "rc-notification": "~5.3.0",
+        "rc-pagination": "~3.6.1",
+        "rc-picker": "~3.14.6",
+        "rc-progress": "~3.5.1",
         "rc-rate": "~2.12.0",
-        "rc-resize-observer": "^1.2.0",
-        "rc-segmented": "~2.2.0",
-        "rc-select": "~14.7.1",
-        "rc-slider": "~10.2.1",
+        "rc-resize-observer": "^1.4.0",
+        "rc-segmented": "~2.2.2",
+        "rc-select": "~14.9.2",
+        "rc-slider": "~10.3.1",
         "rc-steps": "~6.0.1",
         "rc-switch": "~4.1.0",
-        "rc-table": "~7.32.1",
-        "rc-tabs": "~12.9.0",
-        "rc-textarea": "~1.3.3",
-        "rc-tooltip": "~6.0.0",
-        "rc-tree": "~5.7.6",
-        "rc-tree-select": "~5.11.0",
-        "rc-upload": "~4.3.0",
-        "rc-util": "^5.37.0",
+        "rc-table": "~7.34.4",
+        "rc-tabs": "~12.12.1",
+        "rc-textarea": "~1.4.0",
+        "rc-tooltip": "~6.1.2",
+        "rc-tree": "~5.7.12",
+        "rc-tree-select": "~5.13.0",
+        "rc-upload": "~4.3.5",
+        "rc-util": "^5.38.0",
         "scroll-into-view-if-needed": "^3.0.3",
         "throttle-debounce": "^5.0.0"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ant-design"
+      },
       "peerDependencies": {
         "react": ">=16.9.0",
         "react-dom": ">=16.9.0"
@@ -2080,7 +2162,7 @@
     },
     "node_modules/array-tree-filter": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
       "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
     },
     "node_modules/array-union": {
@@ -2109,33 +2191,39 @@
       }
     },
     "node_modules/array.prototype.flat": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmmirror.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
-      "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
         "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/array.prototype.flatmap": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmmirror.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
-      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
         "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
@@ -2177,7 +2265,7 @@
     },
     "node_modules/async-validator": {
       "version": "4.2.5",
-      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
     "node_modules/asynckit": {
@@ -2195,9 +2283,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.5.0.tgz",
-      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz",
+      "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -2494,9 +2582,9 @@
       "dev": true
     },
     "node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
     "node_modules/copy-to-clipboard": {
@@ -2599,9 +2687,9 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.9",
-      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.9.tgz",
-      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -2748,11 +2836,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/dom-align": {
-      "version": "1.12.4",
-      "resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.4.tgz",
-      "integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw=="
-    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/domexception/-/domexception-4.0.0.tgz",
@@ -2949,18 +3032,19 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.48.0",
-      "resolved": "https://registry.npmmirror.com/eslint/-/eslint-8.48.0.tgz",
-      "integrity": "sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.52.0.tgz",
+      "integrity": "sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.2",
-        "@eslint/js": "8.48.0",
-        "@humanwhocodes/config-array": "^0.11.10",
+        "@eslint/js": "8.52.0",
+        "@humanwhocodes/config-array": "^0.11.13",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -2997,6 +3081,9 @@
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/eslint-config-prettier": {
@@ -3027,9 +3114,9 @@
       }
     },
     "node_modules/eslint-config-standard-with-typescript": {
-      "version": "39.0.0",
-      "resolved": "https://registry.npmmirror.com/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-39.0.0.tgz",
-      "integrity": "sha512-CiV2LS4NUeeRmDTDf1ocUMpMxitSyW0g+Y/N7ecElwGj188GahbcQgqfBNyVsIXQxHlZVBlOjkbg3oUI0R3KBg==",
+      "version": "39.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-39.1.1.tgz",
+      "integrity": "sha512-t6B5Ep8E4I18uuoYeYxINyqcXb2UbC0SOOTxRtBSt2JUs+EzeXbfe2oaiPs71AIdnoWhXDO2fYOHz8df3kV84A==",
       "dev": true,
       "dependencies": {
         "@typescript-eslint/parser": "^6.4.0",
@@ -3108,26 +3195,26 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.28.1",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz",
-      "integrity": "sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==",
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz",
+      "integrity": "sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==",
       "dev": true,
       "dependencies": {
-        "array-includes": "^3.1.6",
-        "array.prototype.findlastindex": "^1.2.2",
-        "array.prototype.flat": "^1.3.1",
-        "array.prototype.flatmap": "^1.3.1",
+        "array-includes": "^3.1.7",
+        "array.prototype.findlastindex": "^1.2.3",
+        "array.prototype.flat": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.2",
         "debug": "^3.2.7",
         "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.7",
+        "eslint-import-resolver-node": "^0.3.9",
         "eslint-module-utils": "^2.8.0",
-        "has": "^1.0.3",
-        "is-core-module": "^2.13.0",
+        "hasown": "^2.0.0",
+        "is-core-module": "^2.13.1",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.6",
-        "object.groupby": "^1.0.0",
-        "object.values": "^1.1.6",
+        "object.fromentries": "^2.0.7",
+        "object.groupby": "^1.0.1",
+        "object.values": "^1.1.7",
         "semver": "^6.3.1",
         "tsconfig-paths": "^3.14.2"
       },
@@ -3219,9 +3306,9 @@
       "peer": true
     },
     "node_modules/eslint-plugin-prettier": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz",
-      "integrity": "sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.1.tgz",
+      "integrity": "sha512-m3u5RnR56asrwV/lDC4GHorlW75DsFfmUcjfCYylTUs85dBRnB7VM6xG8eCMJdeDRnppzmxZVf1GEPJvl1JmNg==",
       "dev": true,
       "dependencies": {
         "prettier-linter-helpers": "^1.0.0",
@@ -3230,6 +3317,9 @@
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
+      "funding": {
+        "url": "https://opencollective.com/prettier"
+      },
       "peerDependencies": {
         "@types/eslint": ">=8.0.0",
         "eslint": ">=8.0.0",
@@ -3269,9 +3359,9 @@
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.3.tgz",
-      "integrity": "sha512-Hh0wv8bUNY877+sI0BlCUlsS0TYYQqvzEwJsJJPM2WF4RnTStSnSR3zdJYa2nPOJgg3UghXi54lVyMSmpCalzA==",
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.4.tgz",
+      "integrity": "sha512-eD83+65e8YPVg6603Om2iCIwcQJf/y7++MWm4tACtEswFLYMwxwVWAfwN+e19f5Ad/FOyyNg9Dfi5lXhH3Y3rA==",
       "dev": true,
       "peerDependencies": {
         "eslint": ">=7"
@@ -3442,7 +3532,7 @@
     },
     "node_modules/estree-walker": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
@@ -3659,10 +3749,13 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.6",
@@ -3800,7 +3893,7 @@
     },
     "node_modules/globals": {
       "version": "11.12.0",
-      "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true,
       "engines": {
@@ -3934,6 +4027,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -4197,12 +4302,15 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.13.0.tgz",
-      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
       "dev": true,
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-date-object": {
@@ -4513,7 +4621,7 @@
     },
     "node_modules/jsesc": {
       "version": "2.5.2",
-      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true,
       "bin": {
@@ -4569,14 +4677,17 @@
     },
     "node_modules/jsonc-parser": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
       "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
       "dev": true
     },
     "node_modules/jwt-decode": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmmirror.com/jwt-decode/-/jwt-decode-3.1.2.tgz",
-      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/keyv": {
       "version": "4.5.3",
@@ -4606,7 +4717,7 @@
     },
     "node_modules/kolorist": {
       "version": "1.8.0",
-      "resolved": "https://registry.npmmirror.com/kolorist/-/kolorist-1.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
       "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
       "dev": true
     },
@@ -4638,12 +4749,19 @@
       "dev": true
     },
     "node_modules/local-pkg": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz",
-      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
+      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
       "dev": true,
+      "dependencies": {
+        "mlly": "^1.4.2",
+        "pkg-types": "^1.0.3"
+      },
       "engines": {
         "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/localforage": {
@@ -4714,9 +4832,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
       "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
@@ -4876,7 +4994,7 @@
     },
     "node_modules/mlly": {
       "version": "1.4.2",
-      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
       "integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
       "dev": true,
       "dependencies": {
@@ -5259,7 +5377,7 @@
     },
     "node_modules/pathe": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
       "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
       "dev": true
     },
@@ -5280,7 +5398,7 @@
     },
     "node_modules/pkg-types": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
       "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
       "dev": true,
       "dependencies": {
@@ -5434,31 +5552,15 @@
         "node": ">=8"
       }
     },
-    "node_modules/rc-align": {
-      "version": "4.0.15",
-      "resolved": "https://registry.npmmirror.com/rc-align/-/rc-align-4.0.15.tgz",
-      "integrity": "sha512-wqJtVH60pka/nOX7/IspElA8gjPNQKIx/ZqJ6heATCkXpe1Zg4cPVrMD2vC96wjsFFL8WsmhPbx9tdMo1qqlIA==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "2.x",
-        "dom-align": "^1.7.0",
-        "rc-util": "^5.26.0",
-        "resize-observer-polyfill": "^1.5.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
     "node_modules/rc-cascader": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmmirror.com/rc-cascader/-/rc-cascader-3.14.1.tgz",
-      "integrity": "sha512-fCsgjLIQqYZMhFj9UT+x2ZW4uobx7OP5yivcn6Xto5fuxHaldphsryzCeUVmreQOHEo0RP+032Ip9RDzrKVKJA==",
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.18.1.tgz",
+      "integrity": "sha512-M7Xr5Fs/E87ZGustfObtBYQjsvBCET0UX2JYXB2GmOP+2fsZgjaRGXK+CJBmmWXQ6o4OFinpBQBXG4wJOQ5MEg==",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "array-tree-filter": "^2.1.0",
         "classnames": "^2.3.1",
-        "rc-select": "~14.7.0",
+        "rc-select": "~14.9.0",
         "rc-tree": "~5.7.0",
         "rc-util": "^5.35.0"
       },
@@ -5497,9 +5599,9 @@
       }
     },
     "node_modules/rc-dialog": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmmirror.com/rc-dialog/-/rc-dialog-9.1.0.tgz",
-      "integrity": "sha512-5ry+JABAWEbaKyYsmITtrJbZbJys8CtMyzV8Xn4LYuXMeUx5XVHNyJRoqLFE4AzBuXXzOWeaC49cg+XkxK6kHA==",
+      "version": "9.3.4",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.3.4.tgz",
+      "integrity": "sha512-975X3018GhR+EjZFbxA2Z57SX5rnu0G0/OxFgMMvZK4/hQWEm3MHaNvP4wXpxYDoJsp+xUvVW+GB9CMMCm81jA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/portal": "^1.0.0-8",
@@ -5513,15 +5615,15 @@
       }
     },
     "node_modules/rc-drawer": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmmirror.com/rc-drawer/-/rc-drawer-6.2.0.tgz",
-      "integrity": "sha512-spPkZ3WvP0U0vy5dyzSwlUJ/+vLFtjP/cTwSwejhQRoDBaexSZHsBhELoCZcEggI7LQ7typmtG30lAue2HEhvA==",
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-6.5.2.tgz",
+      "integrity": "sha512-QckxAnQNdhh4vtmKN0ZwDf3iakO83W9eZcSKWYYTDv4qcD2fHhRAZJJ/OE6v2ZlQ2kSqCJX5gYssF4HJFvsEPQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/portal": "^1.1.1",
         "classnames": "^2.2.6",
         "rc-motion": "^2.6.1",
-        "rc-util": "^5.21.2"
+        "rc-util": "^5.36.0"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -5530,7 +5632,7 @@
     },
     "node_modules/rc-dropdown": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/rc-dropdown/-/rc-dropdown-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.1.0.tgz",
       "integrity": "sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
@@ -5544,9 +5646,9 @@
       }
     },
     "node_modules/rc-field-form": {
-      "version": "1.36.2",
-      "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.36.2.tgz",
-      "integrity": "sha512-tCF/JjUsnxW80Gk4E4ZH74ONsaQMxVTRtui6XhQB8DJc4FHWLLa5pP8zwhxtPKC5NaO0QZ0Cv79JggDubn6n2g==",
+      "version": "1.39.0",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.39.0.tgz",
+      "integrity": "sha512-V7Wk7uji1jBsUGGgP788H9rpFy55HLiD4lywTlktUGjK7EgW5dt+mq1MPbtCpPRMzs83vZBW4SOChOmCACz4WA==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "async-validator": "^4.1.0",
@@ -5561,14 +5663,14 @@
       }
     },
     "node_modules/rc-image": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmmirror.com/rc-image/-/rc-image-7.1.3.tgz",
-      "integrity": "sha512-foMl1rcit1F0+vgxE5kf0c8TygQcHhILsOohQUL+JMUbzOo3OBFRcehJudYbqbCTArzCecS8nA1irUU9vvgQbg==",
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-7.3.2.tgz",
+      "integrity": "sha512-ICEF6SWv9YKhDXxy1vrXcmf0TVvEcQWIww5Yg+f+mn7e4oGX7FNP4+FExwMjNO5UHBEuWrigbGhlCgI6yZZ1jg==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "@rc-component/portal": "^1.0.2",
         "classnames": "^2.2.6",
-        "rc-dialog": "~9.1.0",
+        "rc-dialog": "~9.3.4",
         "rc-motion": "^2.6.2",
         "rc-util": "^5.34.1"
       },
@@ -5578,9 +5680,9 @@
       }
     },
     "node_modules/rc-input": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmmirror.com/rc-input/-/rc-input-1.1.1.tgz",
-      "integrity": "sha512-NTR1Z4em681L8/ewb2KR80RykSmN8I2mzqzJDCoUmTrV1BB9Hk5d7ha4TnfgdEPPL148N+603sW2LExSXk1IbA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.2.1.tgz",
+      "integrity": "sha512-nQRmBvEFoGi+SNRDavccZ8ueyhFgmxkWqIt4aDyuNJgUZF12HJKIwDhAafUM7N+g7PyuW9FH3pf3zPHzdiCWbA==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -5592,14 +5694,14 @@
       }
     },
     "node_modules/rc-input-number": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmmirror.com/rc-input-number/-/rc-input-number-8.0.4.tgz",
-      "integrity": "sha512-TP+G5b7mZtbwXJ/YEZXF/OgbEZ6iqD4+RSuxZJ8VGKGXDcdt0FKIvpFoNQr/knspdFC4OxA0OfsWfFWfN4XSyA==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-8.1.0.tgz",
+      "integrity": "sha512-bdHgduOxuN0lrhzgPmoKbhRD4GLIzVcddVz972/JHPHr7oLwPX5xDb9w4bXhuMzyT2VzQy7nggRCfH3yAl09oA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/mini-decimal": "^1.0.1",
         "classnames": "^2.2.5",
-        "rc-input": "~1.1.0",
+        "rc-input": "~1.2.1",
         "rc-util": "^5.28.0"
       },
       "peerDependencies": {
@@ -5608,17 +5710,17 @@
       }
     },
     "node_modules/rc-mentions": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/rc-mentions/-/rc-mentions-2.5.0.tgz",
-      "integrity": "sha512-rERXsbUTNVrb5T/iDC0ki/SRGWJnOVraDy6O25Us3FSpuUZ3uq2TPZB4fRk0Hss5kyiEPzz2sprhkI4b+F4jUw==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.8.0.tgz",
+      "integrity": "sha512-LBMkO6bSGhEvS1CvMK978qGN82tI+mzk7l/uTiQJH+UDiwpvq+pxK4DxU5b6Q1T5LW6bn2pSua9RaZKZrDoBOw==",
       "dependencies": {
         "@babel/runtime": "^7.22.5",
         "@rc-component/trigger": "^1.5.0",
         "classnames": "^2.2.6",
-        "rc-input": "~1.1.0",
-        "rc-menu": "~9.10.0",
-        "rc-textarea": "~1.3.0",
-        "rc-util": "^5.22.5"
+        "rc-input": "~1.2.1",
+        "rc-menu": "~9.12.0",
+        "rc-textarea": "~1.4.0",
+        "rc-util": "^5.34.1"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -5626,12 +5728,12 @@
       }
     },
     "node_modules/rc-menu": {
-      "version": "9.10.0",
-      "resolved": "https://registry.npmmirror.com/rc-menu/-/rc-menu-9.10.0.tgz",
-      "integrity": "sha512-g27kpXaAoJh/fkPZF65/d4V+w4DhDeqomBdPcGnkFAcJnEM4o21TnVccrBUoDedLKzC7wJRw1Q7VTqEsfEufmw==",
+      "version": "9.12.2",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.12.2.tgz",
+      "integrity": "sha512-NzloFH2pRUYmQ3S/YbJAvRkgCZaLvq0sRa5rgJtuIHLfPPprNHNyepeSlT64+dbVqI4qRWL44VN0lUCldCbbfg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
-        "@rc-component/trigger": "^1.6.2",
+        "@rc-component/trigger": "^1.17.0",
         "classnames": "2.x",
         "rc-motion": "^2.4.3",
         "rc-overflow": "^1.3.1",
@@ -5643,9 +5745,9 @@
       }
     },
     "node_modules/rc-motion": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmmirror.com/rc-motion/-/rc-motion-2.8.0.tgz",
-      "integrity": "sha512-9gWWzlPvx/IJANj+t+ArqLCQ43rCWYLpOUe6+WJSAGb+b+fqBcfx81qPhg6b+ewa6g3mGNDhkTpBrVrCC4gcXA==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.0.tgz",
+      "integrity": "sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -5657,13 +5759,13 @@
       }
     },
     "node_modules/rc-notification": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmmirror.com/rc-notification/-/rc-notification-5.1.1.tgz",
-      "integrity": "sha512-BPnded/WmWFE57ubqhVCgRSuedfQQNeSOYqdwppyr2B/Wt909gYFKyWAkFJVXuppAjsOGop05a93UaxjmUFdkg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-5.3.0.tgz",
+      "integrity": "sha512-WCf0uCOkZ3HGfF0p1H4Sgt7aWfipxORWTPp7o6prA3vxwtWhtug3GfpYls1pnBp4WA+j8vGIi5c2/hQRpGzPcQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
-        "rc-motion": "^2.6.0",
+        "rc-motion": "^2.9.0",
         "rc-util": "^5.20.1"
       },
       "engines": {
@@ -5676,7 +5778,7 @@
     },
     "node_modules/rc-overflow": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmmirror.com/rc-overflow/-/rc-overflow-1.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.3.2.tgz",
       "integrity": "sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
@@ -5704,9 +5806,9 @@
       }
     },
     "node_modules/rc-picker": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmmirror.com/rc-picker/-/rc-picker-3.13.1.tgz",
-      "integrity": "sha512-211SrinX5IXZ9FMMDUMyPLuGOdfftUtd8zj4lqudpFxlMdtgV5+hXUJMBKb26xmDsleOm5iySK6KIHgiaI+U4w==",
+      "version": "3.14.6",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-3.14.6.tgz",
+      "integrity": "sha512-AdKKW0AqMwZsKvIpwUWDUnpuGKZVrbxVTZTNjcO+pViGkjC1EBcjMgxVe8tomOEaIHJL5Gd13vS8Rr3zzxWmag==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^1.5.0",
@@ -5740,9 +5842,9 @@
       }
     },
     "node_modules/rc-progress": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmmirror.com/rc-progress/-/rc-progress-3.4.2.tgz",
-      "integrity": "sha512-iAGhwWU+tsayP+Jkl9T4+6rHeQTG9kDz8JAHZk4XtQOcYN5fj9H34NXNEdRdZx94VUDHMqCb1yOIvi8eJRh67w==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.5.1.tgz",
+      "integrity": "sha512-V6Amx6SbLRwPin/oD+k1vbPrO8+9Qf8zW1T8A7o83HdNafEVvAxPV5YsgtKFP+Ud5HghLj33zKOcEHrcrUGkfw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.6",
@@ -5771,13 +5873,13 @@
       }
     },
     "node_modules/rc-resize-observer": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmmirror.com/rc-resize-observer/-/rc-resize-observer-1.3.1.tgz",
-      "integrity": "sha512-iFUdt3NNhflbY3mwySv5CA1TC06zdJ+pfo0oc27xpf4PIOvfZwZGtD9Kz41wGYqC4SLio93RVAirSSpYlV/uYg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz",
+      "integrity": "sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==",
       "dependencies": {
         "@babel/runtime": "^7.20.7",
         "classnames": "^2.2.1",
-        "rc-util": "^5.27.0",
+        "rc-util": "^5.38.0",
         "resize-observer-polyfill": "^1.5.1"
       },
       "peerDependencies": {
@@ -5801,9 +5903,9 @@
       }
     },
     "node_modules/rc-select": {
-      "version": "14.7.4",
-      "resolved": "https://registry.npmmirror.com/rc-select/-/rc-select-14.7.4.tgz",
-      "integrity": "sha512-qRUpvMVXFy6rdHe+qzHXAqyQAfhErC/oY8dcRtoRjoz0lz2Nx3J+lLL5AnEbjnwlS+/kQTJUZ/65WyCwWwcLwQ==",
+      "version": "14.9.2",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.9.2.tgz",
+      "integrity": "sha512-VQ15sRFgPURHb8ZcZNSDtb2rAw3+C9xlL0nDziwNHTEW1KvEpZ8y+0v5w24X/Bpl9b3cW1BOyW1F5UqSAq+7Dg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^1.5.0",
@@ -5822,9 +5924,9 @@
       }
     },
     "node_modules/rc-slider": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmmirror.com/rc-slider/-/rc-slider-10.2.1.tgz",
-      "integrity": "sha512-l355C/65iV4UFp7mXq5xBTNX2/tF2g74VWiTVlTpNp+6vjE/xaHHNiQq5Af+Uu28uUiqCuH/QXs5HfADL9KJ/A==",
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.3.1.tgz",
+      "integrity": "sha512-XszsZLkbjcG9ogQy/zUC0n2kndoKUAnY/Vnk1Go5Gx+JJQBz0Tl15d5IfSiglwBUZPS9vsUJZkfCmkIZSqWbcA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
@@ -5870,15 +5972,16 @@
       }
     },
     "node_modules/rc-table": {
-      "version": "7.32.3",
-      "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.32.3.tgz",
-      "integrity": "sha512-MqjrI/ibuGg7NEyFsux0dM5GK+3er1gTiZofAkifr2bHf/Sa1nUqXXFmSrYXSOjwpx0xyBnJ3GrHFCIqC/eOzw==",
+      "version": "7.34.4",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.34.4.tgz",
+      "integrity": "sha512-os+i88Y2AO/6dNkOgJkKSHgXYaZZGnuOEEe+nyaq5IRgvAQNhLysUjXt2objtBeFDEZR8TqXrajwBNRUwunmdw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
-        "@rc-component/context": "^1.3.0",
+        "@rc-component/context": "^1.4.0",
         "classnames": "^2.2.5",
         "rc-resize-observer": "^1.1.0",
-        "rc-util": "^5.27.1"
+        "rc-util": "^5.36.0",
+        "rc-virtual-list": "^3.11.1"
       },
       "engines": {
         "node": ">=8.x"
@@ -5889,17 +5992,17 @@
       }
     },
     "node_modules/rc-tabs": {
-      "version": "12.9.0",
-      "resolved": "https://registry.npmmirror.com/rc-tabs/-/rc-tabs-12.9.0.tgz",
-      "integrity": "sha512-2HnVowgMVrq0DfQtyu4mCd9E6pXlWNdM6VaDvOOHMsLYqPmpY+7zBqUC6YrrQ9xYXHciTS0e7TtjOHIvpVCHLQ==",
+      "version": "12.12.1",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.12.1.tgz",
+      "integrity": "sha512-e10VBjEkECdPl4XZSs9to81SE+mgclBTM7J8/LMsFqmJoi05Tci91bRnmeeDtrcOCx2PuZdJv57XUlC4d8PEIw==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
         "rc-dropdown": "~4.1.0",
-        "rc-menu": "~9.10.0",
+        "rc-menu": "~9.12.0",
         "rc-motion": "^2.6.2",
         "rc-resize-observer": "^1.0.0",
-        "rc-util": "^5.16.0"
+        "rc-util": "^5.34.1"
       },
       "engines": {
         "node": ">=8.x"
@@ -5910,13 +6013,13 @@
       }
     },
     "node_modules/rc-textarea": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmmirror.com/rc-textarea/-/rc-textarea-1.3.4.tgz",
-      "integrity": "sha512-wn0YjTpvcVolcfXa0HtzL+jgV2QcwtfB29RwNAKj8hMgZOju1V24M3TfEDjABeQEAQbUGbjMbISREOX/YSVKhg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.4.0.tgz",
+      "integrity": "sha512-CiqK+uyoJlnfufbC0kwfHJpfElhQacuDSNyNQ/xGnA/QMaJLDbgmqRT8QmX0T0KD/ws/hy6qqRaGJSsrRR5uiQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.1",
-        "rc-input": "~1.1.0",
+        "rc-input": "~1.2.1",
         "rc-resize-observer": "^1.0.0",
         "rc-util": "^5.27.0"
       },
@@ -5926,12 +6029,12 @@
       }
     },
     "node_modules/rc-tooltip": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/rc-tooltip/-/rc-tooltip-6.0.1.tgz",
-      "integrity": "sha512-MdvPlsD1fDSxKp9+HjXrc/CxLmA/s11QYIh1R7aExxfodKP7CZA++DG1AjrW80F8IUdHYcR43HAm0Y2BYPelHA==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-6.1.2.tgz",
+      "integrity": "sha512-89zwvybvCxGJu3+gGF8w5AXd4HHk6hIN7K0vZbkzjilVaEAIWPqc1fcyeUeP71n3VCcw7pTL9LyFupFbrx8gHw==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
-        "@rc-component/trigger": "^1.0.4",
+        "@rc-component/trigger": "^1.18.0",
         "classnames": "^2.3.1"
       },
       "peerDependencies": {
@@ -5940,9 +6043,9 @@
       }
     },
     "node_modules/rc-tree": {
-      "version": "5.7.10",
-      "resolved": "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.7.10.tgz",
-      "integrity": "sha512-n4UkMQY3bzvJUNnbw6e3YI7sy2kE9c9vAYbSt94qAhcPKtMOThONNr1LIaFB/M5XeFYYrWVbvRVoT8k38eFuSQ==",
+      "version": "5.7.12",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.7.12.tgz",
+      "integrity": "sha512-LXA5nY2hG5koIAlHW5sgXgLpOMz+bFRbnZZ+cCg0tQs4Wv1AmY7EDi1SK7iFXhslYockbqUerQan82jljoaItg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -5959,13 +6062,13 @@
       }
     },
     "node_modules/rc-tree-select": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmmirror.com/rc-tree-select/-/rc-tree-select-5.11.2.tgz",
-      "integrity": "sha512-ujRFO3pcjSg8R4ndXX2oiNcCu+RgO9ZPcd23CZy18Khm+nRsfWWS3Su7qB0iuoJgzAJ5LK7b6Dio0t7IQDGs9g==",
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.13.0.tgz",
+      "integrity": "sha512-g01JU9EdE7j/9KfDKtmvFqJ7ZDNIYDzkpmAXllbTBFoRNhWJBjW1x/dCZLVG+IdZeIz8SKJkgZzCf1CUZrzV/Q==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
-        "rc-select": "~14.7.0",
+        "rc-select": "~14.9.0",
         "rc-tree": "~5.7.0",
         "rc-util": "^5.16.1"
       },
@@ -5975,9 +6078,9 @@
       }
     },
     "node_modules/rc-upload": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmmirror.com/rc-upload/-/rc-upload-4.3.4.tgz",
-      "integrity": "sha512-uVbtHFGNjHG/RyAfm9fluXB6pvArAGyAx8z7XzXXyorEgVIWj6mOlriuDm0XowDHYz4ycNK0nE0oP3cbFnzxiQ==",
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.3.5.tgz",
+      "integrity": "sha512-EHlKJbhkgFSQHliTj9v/2K5aEuFwfUQgZARzD7AmAPOneZEPiCNF3n6PEWIuqz9h7oq6FuXgdR67sC5BWFxJbA==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "classnames": "^2.2.5",
@@ -5989,12 +6092,12 @@
       }
     },
     "node_modules/rc-util": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.37.0.tgz",
-      "integrity": "sha512-cPMV8DzaHI1KDaS7XPRXAf4J7mtBqjvjikLpQieaeOO7+cEbqY2j7Kso/T0R0OiEZTNcLS/8Zl9YrlXiO9UbjQ==",
+      "version": "5.38.0",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.38.0.tgz",
+      "integrity": "sha512-yV/YBNdFn+edyBpBdCqkPE29Su0jWcHNgwx2dJbRqMrMfrUcMJUjCRV+ZPhcvWyKFJ63GzEerPrz9JIVo0zXmA==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "react-is": "^16.12.0"
+        "react-is": "^18.2.0"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -6002,9 +6105,9 @@
       }
     },
     "node_modules/rc-virtual-list": {
-      "version": "3.10.5",
-      "resolved": "https://registry.npmmirror.com/rc-virtual-list/-/rc-virtual-list-3.10.5.tgz",
-      "integrity": "sha512-Vc89TL3JHfRlLVQXVj5Hmv0dIflgwmHDcbjt9lrZjOG3wNUDkTF5zci8kFDU/CzdmmqgKu+CUktEpT10VUKYSQ==",
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.2.tgz",
+      "integrity": "sha512-MTFLL2LOHr3+/+r+WjTIs6j8XmJE6EqdOsJvCH8SWig7qyik3aljCEImUtw5tdWR0tQhXUfbv7P7nZaLY91XPg==",
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "classnames": "^2.2.6",
@@ -6043,9 +6146,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/react-refresh": {
       "version": "0.14.0",
@@ -6057,11 +6160,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.15.0",
-      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.15.0.tgz",
-      "integrity": "sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==",
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz",
+      "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==",
       "dependencies": {
-        "@remix-run/router": "1.8.0"
+        "@remix-run/router": "1.11.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6071,12 +6174,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.15.0",
-      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.15.0.tgz",
-      "integrity": "sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==",
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz",
+      "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==",
       "dependencies": {
-        "@remix-run/router": "1.8.0",
-        "react-router": "6.15.0"
+        "@remix-run/router": "1.11.0",
+        "react-router": "6.18.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6492,9 +6595,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.66.1",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.66.1.tgz",
-      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -6538,7 +6641,7 @@
     },
     "node_modules/scule": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.0.0.tgz",
       "integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
       "dev": true
     },
@@ -6811,11 +6914,14 @@
     },
     "node_modules/strip-literal": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.3.0.tgz",
       "integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/style-search": {
@@ -6930,7 +7036,7 @@
     },
     "node_modules/stylis": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
       "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
     },
     "node_modules/supports-color": {
@@ -7280,9 +7386,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.3.0.tgz",
-      "integrity": "sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.1.tgz",
+      "integrity": "sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==",
       "dev": true
     },
     "node_modules/unbox-primitive": {
@@ -7297,10 +7403,16 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/unimport": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmmirror.com/unimport/-/unimport-3.3.0.tgz",
-      "integrity": "sha512-3jhq3ZG5hFZzrWGDCpx83kjPzefP/EeuKkIO1T0MA4Zwj+dO/Og1mFvZ4aZ5WSDm0FVbbdVIRH1zKBG7c4wOpg==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.4.0.tgz",
+      "integrity": "sha512-M/lfFEgufIT156QAr/jWHLUn55kEmxBBiQsMxvRSIbquwmeJEyQYgshHDEvQDWlSJrVOOTAgnJ3FvlsrpGkanA==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^5.0.4",
@@ -7308,21 +7420,36 @@
         "fast-glob": "^3.3.1",
         "local-pkg": "^0.4.3",
         "magic-string": "^0.30.3",
-        "mlly": "^1.4.1",
+        "mlly": "^1.4.2",
         "pathe": "^1.1.1",
         "pkg-types": "^1.0.3",
         "scule": "^1.0.0",
         "strip-literal": "^1.3.0",
-        "unplugin": "^1.4.0"
+        "unplugin": "^1.5.0"
       }
     },
     "node_modules/unimport/node_modules/escape-string-regexp": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
       "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
       "dev": true,
       "engines": {
         "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unimport/node_modules/local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/universalify": {
@@ -7335,35 +7462,38 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.4.0.tgz",
-      "integrity": "sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.5.0.tgz",
+      "integrity": "sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.9.0",
+        "acorn": "^8.10.0",
         "chokidar": "^3.5.3",
         "webpack-sources": "^3.2.3",
         "webpack-virtual-modules": "^0.5.0"
       }
     },
     "node_modules/unplugin-auto-import": {
-      "version": "0.16.6",
-      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.16.6.tgz",
-      "integrity": "sha512-M+YIITkx3C/Hg38hp8HmswP5mShUUyJOzpifv7RTlAbeFlO2Tyw0pwrogSSxnipHDPTtI8VHFBpkYkNKzYSuyA==",
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.16.7.tgz",
+      "integrity": "sha512-w7XmnRlchq6YUFJVFGSvG1T/6j8GrdYN6Em9Wf0Ye+HXgD/22kont+WnuCAA0UaUoxtuvRR1u/mXKy63g/hfqQ==",
       "dev": true,
       "dependencies": {
-        "@antfu/utils": "^0.7.5",
-        "@rollup/pluginutils": "^5.0.2",
-        "fast-glob": "^3.3.0",
-        "local-pkg": "^0.4.3",
-        "magic-string": "^0.30.1",
-        "minimatch": "^9.0.2",
-        "unimport": "^3.0.14",
-        "unplugin": "^1.3.2"
+        "@antfu/utils": "^0.7.6",
+        "@rollup/pluginutils": "^5.0.5",
+        "fast-glob": "^3.3.1",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.5",
+        "minimatch": "^9.0.3",
+        "unimport": "^3.4.0",
+        "unplugin": "^1.5.0"
       },
       "engines": {
         "node": ">=14"
       },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
       "peerDependencies": {
         "@nuxt/kit": "^3.2.2",
         "@vueuse/core": "*"
@@ -7399,18 +7529,18 @@
       }
     },
     "node_modules/unplugin-icons": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.17.0.tgz",
-      "integrity": "sha512-gMv66eY/Hj64heM55XrfDH3LUCWI51mtkBVUPVl9VkpvLgAYhdVe9nRuzu6p+idmCLSQVq7xiPxQcD4aXCgW5A==",
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.17.1.tgz",
+      "integrity": "sha512-KsWejBPCHokYCNDQUzGu6R3E3XDYH/YpewgQwrVBXgpl1iR0RdW1NEGNdjlbuapwVnZXVgA5eiDTfNaQCawSdg==",
       "dev": true,
       "dependencies": {
         "@antfu/install-pkg": "^0.1.1",
         "@antfu/utils": "^0.7.6",
-        "@iconify/utils": "^2.1.9",
+        "@iconify/utils": "^2.1.11",
         "debug": "^4.3.4",
         "kolorist": "^1.8.0",
-        "local-pkg": "^0.4.3",
-        "unplugin": "^1.4.0"
+        "local-pkg": "^0.5.0",
+        "unplugin": "^1.5.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -7510,9 +7640,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.9",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.9.tgz",
-      "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
+      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
@@ -7525,6 +7655,9 @@
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
       "optionalDependencies": {
         "fsevents": "~2.3.2"
       },
@@ -7584,7 +7717,7 @@
     },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
-      "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
       "dev": true,
       "engines": {
@@ -7593,7 +7726,7 @@
     },
     "node_modules/webpack-virtual-modules": {
       "version": "0.5.0",
-      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
       "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
       "dev": true
     },
diff --git a/package.json b/package.json
index 932e59b..af3137d 100644
--- a/package.json
+++ b/package.json
@@ -15,44 +15,44 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "antd": "^5.8.6",
-    "axios": "^1.5.0",
-    "jwt-decode": "^3.1.2",
+    "antd": "^5.10.3",
+    "axios": "^1.6.0",
+    "jwt-decode": "^4.0.0",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0"
+    "react-router": "^6.18.0",
+    "react-router-dom": "^6.18.0"
   },
   "devDependencies": {
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@types/jsdom": "^21.1.2",
-    "@types/lodash": "^4.14.198",
-    "@types/node": "^20.5.9",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
-    "@vitejs/plugin-react": "^4.0.4",
-    "eslint": "^8.48.0",
+    "@types/jsdom": "^21.1.4",
+    "@types/lodash": "^4.14.200",
+    "@types/node": "^20.8.10",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "@vitejs/plugin-react": "^4.1.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-config-standard-with-typescript": "^39.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-config-standard-with-typescript": "^39.1.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-react-refresh": "^0.4.4",
     "jsdom": "^22.1.0",
     "prettier": "^3.0.3",
-    "sass": "^1.66.1",
+    "sass": "^1.69.5",
     "stylelint-config-prettier": "^9.0.5",
     "typescript": "^5.2.2",
-    "unplugin-auto-import": "^0.16.6",
-    "unplugin-icons": "^0.17.0",
-    "vite": "^4.4.9"
+    "unplugin-auto-import": "^0.16.7",
+    "unplugin-icons": "^0.17.1",
+    "vite": "^4.5.0"
   }
 }
diff --git a/src/assets/svg/group.svg b/src/assets/svg/group.svg
new file mode 100644
index 0000000..a7dfc6e
--- /dev/null
+++ b/src/assets/svg/group.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M620.8 611.2c67.2-38.4 115.2-112 115.2-195.2 0-124.8-99.2-224-224-224s-224 99.2-224 224c0 83.2 44.8 156.8 115.2 195.2-89.6 35.2-156.8 115.2-179.2 211.2-3.2 16 6.4 35.2 25.6 38.4H256c16 0 28.8-9.6 32-25.6 22.4-105.6 115.2-182.4 224-182.4s201.6 76.8 224 182.4c3.2 16 19.2 28.8 38.4 25.6 16-3.2 28.8-19.2 25.6-38.4-22.4-96-89.6-176-179.2-211.2zM352 416c0-89.6 70.4-160 160-160s160 70.4 160 160-70.4 160-160 160-160-70.4-160-160zM992 630.4c-12.8-64-54.4-115.2-118.4-144 35.2-32 54.4-76.8 54.4-128C928 265.6 857.6 192 768 192c-19.2 0-32 12.8-32 32s12.8 32 32 32c54.4 0 96 44.8 96 102.4 0 51.2-28.8 89.6-73.6 99.2-16 3.2-28.8 22.4-22.4 38.4 0 16 9.6 28.8 25.6 28.8 70.4 12.8 118.4 54.4 131.2 115.2 3.2 16 16 25.6 32 25.6h6.4c19.2 0 32-16 28.8-35.2zM252.8 499.2c6.4-19.2-6.4-35.2-22.4-41.6C188.8 448 160 409.6 160 358.4 163.2 300.8 201.6 256 256 256c19.2 0 32-12.8 32-32s-16-32-32-32c-89.6 0-156.8 70.4-156.8 166.4 0 51.2 19.2 96 51.2 128-60.8 28.8-105.6 80-118.4 144-3.2 16 6.4 35.2 25.6 38.4H64c16 0 28.8-9.6 32-25.6 12.8-60.8 60.8-102.4 131.2-115.2 16 0 25.6-12.8 25.6-28.8z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/role.svg b/src/assets/svg/role.svg
new file mode 100644
index 0000000..f9b455f
--- /dev/null
+++ b/src/assets/svg/role.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M721.8 326.1c0-124.4-100.8-225.2-225.2-225.2S271.3 201.7 271.3 326.1c0 82.2 44 154.1 109.8 193.4-14.1 4.2-28.1 9.2-41.8 15-46.9 19.8-89.1 48.3-125.3 84.4s-64.6 78.3-84.4 125.3c-20.6 48.6-31 100.2-31 153.4 0 13.3 10.7 24 24 24s24-10.7 24-24c0-190.8 155.3-346.1 346.1-346.1 1 0 1.9-0.1 2.9-0.2h1c124.3 0.1 225.2-100.8 225.2-225.2z m-402.5 0c0-47.3 18.4-91.9 51.9-125.3 33.5-33.5 78-51.9 125.3-51.9s91.9 18.4 125.3 51.9c33.5 33.5 51.9 78 51.9 125.3s-18.4 91.9-51.9 125.3-78 51.9-125.3 51.9-91.9-18.4-125.3-51.9c-33.5-33.4-51.9-77.9-51.9-125.3zM905.3 679.7h-32.2v-18c0-76.6-62.4-139-139-139s-139 62.4-139 139v18h-23.8c-13.3 0-24 10.7-24 24v144.5c0 41.1 33.4 74.5 74.5 74.5h233c41.1 0 74.5-33.4 74.5-74.5V703.7c0-13.3-10.7-24-24-24z m-262.2-18c0-50.2 40.8-91 91-91s91 40.8 91 91v18h-182v-18z m238.2 186.4c0 14.6-11.9 26.5-26.5 26.5h-233c-14.6 0-26.5-11.9-26.5-26.5V727.7h286v120.4z" /><path d="M782.3 754.1h-88c-8.3 0-15 6.7-15 15s6.7 15 15 15h29v48.4c0 8.3 6.7 15 15 15s15-6.7 15-15v-48.4h29c8.3 0 15-6.7 15-15s-6.7-15-15-15z" /></svg>
\ No newline at end of file
diff --git a/src/global.d.ts b/src/global.d.ts
index 0a7bbd7..daf8380 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -16,7 +16,6 @@ type RouteJsonObject = {
     id?: string
     element?: React.JSX.Element
     component?: React.ComponentType
-    children?: RouteJsonObject[]
     name?: string
     titlePrefix?: string
     title?: string
@@ -26,6 +25,7 @@ type RouteJsonObject = {
     auth?: boolean
     permission?: boolean
     autoHide?: boolean
+    children?: RouteJsonObject[]
 }
 
 type RouteHandle = {
@@ -57,7 +57,7 @@ type TokenVo = {
     token: string
 }
 
-type UserWithInfoVo = {
+type UserWithPowerInfoVo = {
     id: string
     username: string
     locking: boolean
diff --git a/src/main.tsx b/src/main.tsx
index 0464d85..00d520e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,10 +4,11 @@ import zh_CN from 'antd/locale/zh_CN'
 import '@/assets/css/base.scss'
 import '@/assets/css/common.scss'
 import App from './App'
+import { COLOR_MAIN } from '@/constants/common.constants.ts'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-        <AntdConfigProvider locale={zh_CN}>
+        <AntdConfigProvider theme={{ token: { colorPrimary: COLOR_MAIN } }} locale={zh_CN}>
             <App />
         </AntdConfigProvider>
     </React.StrictMode>
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 2dc509d..21e6b53 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -5,6 +5,7 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
+import LoadingMask from '@/components/common/LoadingMask'
 
 const SystemFramework: React.FC = () => {
     return (
@@ -16,6 +17,7 @@ const SystemFramework: React.FC = () => {
                             {system.map((value) => {
                                 return value.menu ? (
                                     <SidebarItem
+                                        end={value.id === 'system' ? true : undefined}
                                         path={value.absolutePath}
                                         icon={value.icon}
                                         text={value.name}
@@ -27,7 +29,15 @@ const SystemFramework: React.FC = () => {
                     </Sidebar>
                 </div>
                 <div className={'right-panel'}>
-                    <Outlet />
+                    <Suspense
+                        fallback={
+                            <>
+                                <LoadingMask />
+                            </>
+                        }
+                    >
+                        <Outlet />
+                    </Suspense>
                 </div>
             </FitFullScreen>
         </>
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 72b4b7a..76c7dd8 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -30,6 +30,7 @@ const ToolsFramework: React.FC = () => {
                             {user.map((value) => {
                                 return value.menu ? (
                                     <SidebarItem
+                                        end={value.id === 'user' ? true : undefined}
                                         path={value.absolutePath}
                                         icon={value.icon}
                                         text={value.name}
diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
new file mode 100644
index 0000000..e7a7aa9
--- /dev/null
+++ b/src/pages/system/Group.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Group: React.FC = () => {
+    return <></>
+}
+
+export default Group
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
new file mode 100644
index 0000000..eecd05b
--- /dev/null
+++ b/src/pages/system/Role.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Role: React.FC = () => {
+    return <></>
+}
+
+export default Role
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
new file mode 100644
index 0000000..4e446cd
--- /dev/null
+++ b/src/pages/system/User.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const User: React.FC = () => {
+    return <></>
+}
+
+export default User
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
new file mode 100644
index 0000000..52eede3
--- /dev/null
+++ b/src/pages/system/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const System: React.FC = () => {
+    return <></>
+}
+
+export default System
diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx
new file mode 100644
index 0000000..4e446cd
--- /dev/null
+++ b/src/pages/user/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const User: React.FC = () => {
+    return <></>
+}
+
+export default User
diff --git a/src/router/home.tsx b/src/router/home.tsx
index 0a93802..228bbaa 100644
--- a/src/router/home.tsx
+++ b/src/router/home.tsx
@@ -21,6 +21,8 @@ const home: RouteJsonObject[] = [
         path: '/tools',
         absolutePath: '/tools',
         id: 'url-tools',
+        name: '工具',
+        menu: true,
         children: [
             {
                 path: 'translation',
@@ -29,9 +31,7 @@ const home: RouteJsonObject[] = [
                 name: '翻译',
                 menu: true
             }
-        ],
-        name: '工具',
-        menu: true
+        ]
     }
 ]
 
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 23ce4ae..df920bd 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -5,10 +5,44 @@ const user: RouteJsonObject[] = [
         path: '',
         absolutePath: '/system',
         id: 'system',
+        component: React.lazy(() => import('@/pages/system')),
         name: '系统设置',
         icon: React.lazy(() => import('~icons/fatweb/setting.jsx')),
         menu: true
     },
+    {
+        path: 'user',
+        absolutePath: '/system/user',
+        id: 'system-user',
+        component: React.lazy(() => import('@/pages/system/User')),
+        name: '用户管理',
+        icon: React.lazy(() => import('~icons/fatweb/user.jsx')),
+        menu: true,
+        permission: true,
+        autoHide: true
+    },
+    {
+        path: 'role',
+        absolutePath: '/system/role',
+        id: 'system-role',
+        component: React.lazy(() => import('@/pages/system/Role')),
+        name: '角色管理',
+        icon: React.lazy(() => import('~icons/fatweb/role.jsx')),
+        menu: true,
+        permission: true,
+        autoHide: true
+    },
+    {
+        path: 'group',
+        absolutePath: '/system/group',
+        id: 'system-group',
+        component: React.lazy(() => import('@/pages/system/Group')),
+        name: '群组管理',
+        icon: React.lazy(() => import('~icons/fatweb/group.jsx')),
+        menu: true,
+        permission: true,
+        autoHide: true
+    },
     {
         path: '*',
         absolutePath: '*',
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 62846a7..d3dbfe3 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -6,8 +6,8 @@ export const tools: RouteJsonObject[] = [
         absolutePath: '/tools',
         id: 'tools',
         component: React.lazy(() => import('@/pages/tools')),
-        icon: React.lazy(() => import('~icons/fatweb/home.jsx')),
         name: '主页',
+        icon: React.lazy(() => import('~icons/fatweb/home.jsx')),
         menu: true,
         auth: false
     },
diff --git a/src/router/user.tsx b/src/router/user.tsx
index c561281..0d993c6 100644
--- a/src/router/user.tsx
+++ b/src/router/user.tsx
@@ -5,6 +5,7 @@ const user: RouteJsonObject[] = [
         path: '',
         absolutePath: '/user',
         id: 'user',
+        component: React.lazy(() => import('@/pages/user')),
         name: '个人档案',
         icon: React.lazy(() => import('~icons/fatweb/user.jsx')),
         menu: true
diff --git a/src/services/index.tsx b/src/services/index.tsx
index 50b4063..d53e666 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -1,5 +1,5 @@
 import axios, { type AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
-import jwtDecode, { JwtPayload } from 'jwt-decode'
+import { jwtDecode, JwtPayload } from 'jwt-decode'
 import { message } from 'antd'
 import { getToken, removeToken, setToken } from '@/utils/common'
 import {
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 18f37cb..e335ce5 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -26,19 +26,21 @@ export const getLoginStatus = () => {
     return getLocalStorage(STORAGE_TOKEN_KEY) !== null
 }
 
-export const getUserInfo = async (): Promise<UserWithInfoVo> => {
+export const getUserInfo = async (): Promise<UserWithPowerInfoVo> => {
     if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) {
         return new Promise((resolve) => {
-            resolve(JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as UserWithInfoVo)
+            resolve(
+                JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as UserWithPowerInfoVo
+            )
         })
     }
     return requestUserInfo()
 }
 
 export const requestUserInfo = async () => {
-    let user: UserWithInfoVo | null
+    let user: UserWithPowerInfoVo | null
 
-    await request.get<UserWithInfoVo>(URL_API_USER_INFO).then((value) => {
+    await request.get<UserWithPowerInfoVo>(URL_API_USER_INFO).then((value) => {
         const response = value.data
         if (response.code === DATABASE_SELECT_SUCCESS) {
             user = response.data
@@ -46,7 +48,7 @@ export const requestUserInfo = async () => {
         }
     })
 
-    return new Promise<UserWithInfoVo>((resolve, reject) => {
+    return new Promise<UserWithPowerInfoVo>((resolve, reject) => {
         if (user) {
             resolve(user)
         }
@@ -72,7 +74,7 @@ export const getPermissionPath = (): string[] => {
         return []
     }
 
-    const user = JSON.parse(s) as UserWithInfoVo
+    const user = JSON.parse(s) as UserWithPowerInfoVo
     const paths: string[] = []
     user.menus.forEach((menu) => {
         paths.push(menu.url)

From e68cff4612fd2aa283a39de176d018676112c5bc Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 Nov 2023 18:21:05 +0800
Subject: [PATCH 058/307] Add user manager. Optimize code.

---
 .../common/sidebar/SidebarFooter.tsx          | 14 +++---
 src/constants/urls.constants.ts               |  1 +
 src/global.d.ts                               | 30 ++++++++++++-
 src/main.tsx                                  |  2 +-
 src/pages/Login.tsx                           |  2 +-
 src/pages/ToolsFramework.tsx                  | 11 ++++-
 src/pages/UserFramework.tsx                   | 13 +++++-
 src/pages/system/User.tsx                     | 45 ++++++++++++++++++-
 src/services/auth.tsx                         | 10 +++++
 src/services/user.tsx                         |  6 +++
 src/utils/auth.ts                             | 17 +++----
 11 files changed, 127 insertions(+), 24 deletions(-)
 create mode 100644 src/services/auth.tsx
 create mode 100644 src/services/user.tsx

diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx
index c7fec43..a142249 100644
--- a/src/components/common/sidebar/SidebarFooter.tsx
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
-import { getLoginStatus, getNickName, logout } from '@/utils/auth'
-import { getRedirectUrl } from '@/utils/common'
 import { notification } from 'antd'
-import { COLOR_ERROR } from '@/constants/common.constants.ts'
+import { getLoginStatus, getNickname, logout } from '@/utils/auth'
+import { getRedirectUrl } from '@/utils/common'
+import { COLOR_ERROR } from '@/constants/common.constants'
 
 const SidebarFooter: React.FC = () => {
     const matches = useMatches()
@@ -11,7 +11,7 @@ const SidebarFooter: React.FC = () => {
     const location = useLocation()
     const navigate = useNavigate()
     const [exiting, setExiting] = useState(false)
-    const [nickName, setNickName] = useState('')
+    const [nickname, setNickname] = useState('')
 
     const handleClickAvatar = () => {
         if (getLoginStatus()) {
@@ -42,8 +42,8 @@ const SidebarFooter: React.FC = () => {
 
     useEffect(() => {
         if (getLoginStatus()) {
-            void getNickName().then((nickName) => {
-                setNickName(nickName)
+            void getNickname().then((nickname) => {
+                setNickname(nickname)
             })
         }
     }, [loginStatus])
@@ -60,7 +60,7 @@ const SidebarFooter: React.FC = () => {
                 </NavLink>
             </span>
             <span hidden={!getLoginStatus()} className={'text'}>
-                {nickName}
+                {nickname}
             </span>
             <div
                 hidden={!getLoginStatus()}
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 035b7be..f32a0f9 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -2,3 +2,4 @@ export const URL_API_LOGIN = '/login'
 export const URL_API_TOKEN = '/token'
 export const URL_API_LOGOUT = '/logout'
 export const URL_API_USER_INFO = '/system/user/info'
+export const URL_API_USER_LIST = '/system/user'
diff --git a/src/global.d.ts b/src/global.d.ts
index daf8380..af4b1d8 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -75,10 +75,26 @@ type UserWithPowerInfoVo = {
     operations: OperationVo[]
 }
 
+type UserWithRoleInfoVo = {
+    id: string
+    username: string
+    locking: boolean
+    expiration: Date
+    credentialsExpiration: Date
+    enable: number
+    lastLoginTime: Date
+    lastLoginIp: string
+    createTime: Date
+    updateTime: Date
+    userInfo: UserInfoVo
+    roles: RoleVo[]
+    groups: GroupVo[]
+}
+
 type UserInfoVo = {
     id: string
     userId: string
-    nickName: string
+    nickname: string
     avatar: string
     email: string
 }
@@ -113,6 +129,18 @@ type OperationVo = {
     elementId: number
 }
 
+type RoleVo = {
+    id: string
+    name: string
+    enable: boolean
+}
+
+type GroupVo = {
+    id: string
+    name: string
+    enable: boolean
+}
+
 type LoginForm = {
     username: string
     password: string
diff --git a/src/main.tsx b/src/main.tsx
index 00d520e..1d2932f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,7 +4,7 @@ import zh_CN from 'antd/locale/zh_CN'
 import '@/assets/css/base.scss'
 import '@/assets/css/common.scss'
 import App from './App'
-import { COLOR_MAIN } from '@/constants/common.constants.ts'
+import { COLOR_MAIN } from '@/constants/common.constants'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index e8f0dbe..7b5a9b5 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -39,7 +39,7 @@ const Login: React.FC = () => {
                                     description: (
                                         <>
                                             <span>
-                                                你好 <strong>{user.userInfo.nickName}</strong>
+                                                你好 <strong>{user.userInfo.nickname}</strong>
                                             </span>
                                             <br />
                                             <span>
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 53e916f..72b7698 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -7,6 +7,7 @@ import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
 import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate'
+import LoadingMask from '@/components/common/LoadingMask'
 
 const ToolsFramework: React.FC = () => {
     const sidebarScrollRef = useRef<SidebarScrollElement>(null)
@@ -63,7 +64,15 @@ const ToolsFramework: React.FC = () => {
                     </Sidebar>
                 </div>
                 <div className={'right-panel'}>
-                    <Outlet />
+                    <Suspense
+                        fallback={
+                            <>
+                                <LoadingMask />
+                            </>
+                        }
+                    >
+                        <Outlet />
+                    </Suspense>
                 </div>
             </FitFullScreen>
         </>
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 76c7dd8..63bffc2 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -5,7 +5,8 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
-import { hasPathPermission } from '@/utils/auth.ts'
+import { hasPathPermission } from '@/utils/auth'
+import LoadingMask from '@/components/common/LoadingMask'
 
 const ToolsFramework: React.FC = () => {
     return (
@@ -42,7 +43,15 @@ const ToolsFramework: React.FC = () => {
                     </Sidebar>
                 </div>
                 <div className={'right-panel'}>
-                    <Outlet />
+                    <Suspense
+                        fallback={
+                            <>
+                                <LoadingMask />
+                            </>
+                        }
+                    >
+                        <Outlet />
+                    </Suspense>
                 </div>
             </FitFullScreen>
         </>
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 4e446cd..95d79f5 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -1,7 +1,50 @@
 import React from 'react'
+import { r_getUserList } from '@/services/user'
+import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { ColumnsType } from 'antd/es/table/interface'
 
 const User: React.FC = () => {
-    return <></>
+    const [userList, setUserList] = useState<UserWithRoleInfoVo[]>([])
+
+    const tableColumns: ColumnsType<UserWithRoleInfoVo> = [
+        {
+            dataIndex: 'id',
+            title: 'ID'
+        },
+        {
+            dataIndex: ['userInfo', 'avatar'],
+            title: '头像',
+            render: (value) => (
+                <AntdAvatar
+                    src={<img src={`data:image/png;base64,${value}`} alt={'avatar'} />}
+                    style={{ background: COLOR_BACKGROUND }}
+                />
+            )
+        },
+        {
+            dataIndex: 'username',
+            title: '用户名'
+        },
+        {
+            dataIndex: ['userInfo', 'nickname'],
+            title: '昵称'
+        }
+    ]
+
+    useEffect(() => {
+        r_getUserList().then((res) => {
+            const data = res.data
+            if (data.code === DATABASE_SELECT_SUCCESS) {
+                data.data && setUserList(data.data)
+            }
+        })
+    }, [])
+
+    return (
+        <>
+            <AntdTable dataSource={userList} columns={tableColumns} rowKey={'id'} />
+        </>
+    )
 }
 
 export default User
diff --git a/src/services/auth.tsx b/src/services/auth.tsx
new file mode 100644
index 0000000..27ac85b
--- /dev/null
+++ b/src/services/auth.tsx
@@ -0,0 +1,10 @@
+import request from '@/services'
+import { URL_API_LOGIN, URL_API_LOGOUT } from '@/constants/urls.constants'
+
+export const r_login = (username: string, password: string) =>
+    request.post<TokenVo>(URL_API_LOGIN, {
+        username,
+        password
+    })
+
+export const r_logout = () => request.post(URL_API_LOGOUT)
diff --git a/src/services/user.tsx b/src/services/user.tsx
new file mode 100644
index 0000000..96bbe1c
--- /dev/null
+++ b/src/services/user.tsx
@@ -0,0 +1,6 @@
+import request from '@/services'
+import { URL_API_USER_INFO, URL_API_USER_LIST } from '@/constants/urls.constants'
+
+export const r_getInfo = () => request.get<UserWithPowerInfoVo>(URL_API_USER_INFO)
+
+export const r_getUserList = () => request.get<UserWithRoleInfoVo[]>(URL_API_USER_LIST)
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index e335ce5..a8bb4df 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,23 +1,20 @@
 import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common'
-import request from '@/services'
+import { r_login, r_logout } from '@/services/auth'
+import { r_getInfo } from '@/services/user'
 import {
     STORAGE_TOKEN_KEY,
     STORAGE_USER_INFO_KEY,
     DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
-import { URL_API_LOGIN, URL_API_LOGOUT, URL_API_USER_INFO } from '@/constants/urls.constants'
 
 let captcha: Captcha
 
 export const login = async (username: string, password: string) => {
-    return await request.post<TokenVo>(URL_API_LOGIN, {
-        username,
-        password
-    })
+    return await r_login(username, password)
 }
 
 export const logout = async () => {
-    return request.post(URL_API_LOGOUT).finally(() => {
+    return r_logout().finally(() => {
         removeToken()
     })
 }
@@ -40,7 +37,7 @@ export const getUserInfo = async (): Promise<UserWithPowerInfoVo> => {
 export const requestUserInfo = async () => {
     let user: UserWithPowerInfoVo | null
 
-    await request.get<UserWithPowerInfoVo>(URL_API_USER_INFO).then((value) => {
+    await r_getInfo().then((value) => {
         const response = value.data
         if (response.code === DATABASE_SELECT_SUCCESS) {
             user = response.data
@@ -56,10 +53,10 @@ export const requestUserInfo = async () => {
     })
 }
 
-export const getNickName = async () => {
+export const getNickname = async () => {
     const user = await getUserInfo()
 
-    return user.userInfo.nickName
+    return user.userInfo.nickname
 }
 
 export const getUsername = async () => {

From d708cf790681de8cde462fee6c566bd08c1a054d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 2 Nov 2023 18:28:03 +0800
Subject: [PATCH 059/307] Update dependencies

---
 package-lock.json | 20 ++++++++++----------
 package.json      |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6974339..2d95007 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,11 +27,11 @@
         "@types/jsdom": "^21.1.4",
         "@types/lodash": "^4.14.200",
         "@types/node": "^20.8.10",
-        "@types/react": "^18.2.33",
+        "@types/react": "^18.2.34",
         "@types/react-dom": "^18.2.14",
         "@typescript-eslint/eslint-plugin": "^6.9.1",
         "@typescript-eslint/parser": "^6.9.1",
-        "@vitejs/plugin-react": "^4.1.0",
+        "@vitejs/plugin-react": "^4.1.1",
         "eslint": "^8.52.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-config-standard-with-typescript": "^39.1.1",
@@ -1630,9 +1630,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.33",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.33.tgz",
-      "integrity": "sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==",
+      "version": "18.2.34",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.34.tgz",
+      "integrity": "sha512-U6eW/alrRk37FU/MS2RYMjx0Va2JGIVXELTODaTIYgvWGCV4Y4TfTUzG8DdmpDNIT0Xpj/R7GfyHOJJrDttcvg==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1962,15 +1962,15 @@
       "dev": true
     },
     "node_modules/@vitejs/plugin-react": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.1.0.tgz",
-      "integrity": "sha512-rM0SqazU9iqPUraQ2JlIvReeaxOoRj6n+PzB1C0cBzIbd8qP336nC39/R9yPi3wVcah7E7j/kdU1uCUqMEU4OQ==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.1.1.tgz",
+      "integrity": "sha512-Jie2HERK+uh27e+ORXXwEP5h0Y2lS9T2PRGbfebiHGlwzDO0dEnd2aNtOR/qjBlPb1YgxwAONeblL1xqLikLag==",
       "dev": true,
       "dependencies": {
-        "@babel/core": "^7.22.20",
+        "@babel/core": "^7.23.2",
         "@babel/plugin-transform-react-jsx-self": "^7.22.5",
         "@babel/plugin-transform-react-jsx-source": "^7.22.5",
-        "@types/babel__core": "^7.20.2",
+        "@types/babel__core": "^7.20.3",
         "react-refresh": "^0.14.0"
       },
       "engines": {
diff --git a/package.json b/package.json
index af3137d..7c2f314 100644
--- a/package.json
+++ b/package.json
@@ -33,11 +33,11 @@
     "@types/jsdom": "^21.1.4",
     "@types/lodash": "^4.14.200",
     "@types/node": "^20.8.10",
-    "@types/react": "^18.2.33",
+    "@types/react": "^18.2.34",
     "@types/react-dom": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "^6.9.1",
-    "@vitejs/plugin-react": "^4.1.0",
+    "@vitejs/plugin-react": "^4.1.1",
     "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard-with-typescript": "^39.1.1",

From a8167b0741283e4906afb019feedaecc3013d387 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 2 Nov 2023 18:29:13 +0800
Subject: [PATCH 060/307] Add Log

---
 src/assets/css/components/common/card.scss |  5 +++
 src/assets/svg/log.svg                     |  1 +
 src/components/common/Card.tsx             | 12 ++++++
 src/components/common/FitCenter.tsx        | 14 +++----
 src/components/common/FitFullScreen.tsx    | 24 +++++------
 src/components/common/HideScrollbar.tsx    |  3 +-
 src/constants/urls.constants.ts            |  1 +
 src/global.d.ts                            | 48 +++++++++++++++-------
 src/pages/system/Log.tsx                   | 34 +++++++++++++++
 src/router/system.tsx                      | 11 +++++
 src/services/system.tsx                    |  4 ++
 11 files changed, 119 insertions(+), 38 deletions(-)
 create mode 100644 src/assets/css/components/common/card.scss
 create mode 100644 src/assets/svg/log.svg
 create mode 100644 src/components/common/Card.tsx
 create mode 100644 src/pages/system/Log.tsx
 create mode 100644 src/services/system.tsx

diff --git a/src/assets/css/components/common/card.scss b/src/assets/css/components/common/card.scss
new file mode 100644
index 0000000..a7688e6
--- /dev/null
+++ b/src/assets/css/components/common/card.scss
@@ -0,0 +1,5 @@
+.card-box {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.1);
+}
\ No newline at end of file
diff --git a/src/assets/svg/log.svg b/src/assets/svg/log.svg
new file mode 100644
index 0000000..1a0fffb
--- /dev/null
+++ b/src/assets/svg/log.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M298.666667 298.666667c17.066667 0 32-14.933333 32-32v-128c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v128c0 17.066667 14.933333 32 32 32zM576 298.666667c17.066667 0 32-14.933333 32-32v-128c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v128c0 17.066667 14.933333 32 32 32z" /><path d="M469.333333 725.333333c0-104.533333 64-196.266667 153.6-234.666666H224c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h405.333333c17.066667 0 32 14.933333 32 32 0 8.533333-4.266667 14.933333-8.533333 21.333333 23.466667-6.4 46.933333-10.666667 72.533333-10.666667 6.4 0 14.933333 0 21.333334 2.133334V277.333333c0-46.933333-38.4-85.333333-85.333334-85.333333v74.666667c0 53.333333-42.666667 96-96 96S469.333333 320 469.333333 266.666667V192h-85.333333v74.666667c0 53.333333-42.666667 96-96 96S192 320 192 266.666667V192c-46.933333 0-85.333333 38.4-85.333333 85.333333v554.666667c0 46.933333 38.4 85.333333 85.333333 85.333333h364.8c-53.333333-46.933333-87.466667-115.2-87.466667-192z m-53.333333 21.333334h-192c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h192c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z m0-128h-192c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h192c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z" /><path d="M725.333333 533.333333c-106.666667 0-192 87.466667-192 192s87.466667 192 192 192 192-87.466667 192-192-85.333333-192-192-192z m74.666667 256h-106.666667c-17.066667 0-32-14.933333-32-32v-128c0-17.066667 14.933333-32 32-32s32 14.933333 32 32V725.333333h74.666667c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z" /></svg>
\ No newline at end of file
diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx
new file mode 100644
index 0000000..712bfde
--- /dev/null
+++ b/src/components/common/Card.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import '@/assets/css/components/common/card.scss'
+
+interface CardProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
+
+const Card: React.FC<CardProps> = (props) => {
+    const { className, ..._props } = props
+    return <div className={`card-box${className ? ` ${className}` : ''}`} {..._props} />
+}
+
+export default Card
diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx
index 7ada721..44f7449 100644
--- a/src/components/common/FitCenter.tsx
+++ b/src/components/common/FitCenter.tsx
@@ -9,14 +9,12 @@ interface FitCenterProps
 const FitCenter: React.FC<FitCenterProps> = (props) => {
     const { className, vertical, ..._props } = props
     return (
-        <>
-            <div
-                className={`fit-center${className ? ` ${className}` : ''}${
-                    vertical ? ' flex-vertical' : ' flex-horizontal'
-                }`}
-                {..._props}
-            ></div>
-        </>
+        <div
+            className={`fit-center${className ? ` ${className}` : ''}${
+                vertical ? ' flex-vertical' : ' flex-horizontal'
+            }`}
+            {..._props}
+        />
     )
 }
 
diff --git a/src/components/common/FitFullScreen.tsx b/src/components/common/FitFullScreen.tsx
index e7b84f9..2c3a49c 100644
--- a/src/components/common/FitFullScreen.tsx
+++ b/src/components/common/FitFullScreen.tsx
@@ -10,20 +10,16 @@ interface FitFullscreenProps
 const FitFullScreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => {
     const { zIndex, backgroundColor, className, style, ..._props } = props
     return (
-        <>
-            <div
-                className={`fit-fullscreen${className ? ` ${className}` : ''}`}
-                style={{
-                    zIndex,
-                    backgroundColor,
-                    ...style
-                }}
-                ref={ref}
-                {..._props}
-            >
-                {props.children}
-            </div>
-        </>
+        <div
+            className={`fit-fullscreen${className ? ` ${className}` : ''}`}
+            style={{
+                zIndex,
+                backgroundColor,
+                ...style
+            }}
+            ref={ref}
+            {..._props}
+        />
     )
 })
 
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 944c772..3448b0d 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -176,6 +176,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         scrollbarWidth,
         animationTransitionTime,
         autoHideWaitingTime,
+        children,
         ..._props
     } = props
 
@@ -527,7 +528,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                         style={{ minWidth, minHeight }}
                         data-refresh={refreshTime}
                     >
-                        {props.children}
+                        {children}
                     </div>
                 </div>
                 <div
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index f32a0f9..d494efe 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -1,5 +1,6 @@
 export const URL_API_LOGIN = '/login'
 export const URL_API_TOKEN = '/token'
 export const URL_API_LOGOUT = '/logout'
+export const URL_API_SYS_LOG = '/system/log'
 export const URL_API_USER_INFO = '/system/user/info'
 export const URL_API_USER_LIST = '/system/user'
diff --git a/src/global.d.ts b/src/global.d.ts
index af4b1d8..6275a94 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -10,7 +10,7 @@ interface ImportMeta {
     readonly env: ImportMetaEnv
 }
 
-type RouteJsonObject = {
+interface RouteJsonObject {
     path: string
     absolutePath: string
     id?: string
@@ -28,7 +28,7 @@ type RouteJsonObject = {
     children?: RouteJsonObject[]
 }
 
-type RouteHandle = {
+interface RouteHandle {
     absolutePath: string
     name?: string
     titlePrefix?: string
@@ -41,23 +41,23 @@ type RouteHandle = {
     autoHide?: boolean
 }
 
-type _Response<T> = {
+interface _Response<T> {
     code: number
     success: boolean
     msg: string
     data: T | null
 }
 
-type Captcha = {
+interface Captcha {
     value: string
     base64Src: string
 }
 
-type TokenVo = {
+interface TokenVo {
     token: string
 }
 
-type UserWithPowerInfoVo = {
+interface UserWithPowerInfoVo {
     id: string
     username: string
     locking: boolean
@@ -75,7 +75,7 @@ type UserWithPowerInfoVo = {
     operations: OperationVo[]
 }
 
-type UserWithRoleInfoVo = {
+interface UserWithRoleInfoVo {
     id: string
     username: string
     locking: boolean
@@ -91,7 +91,7 @@ type UserWithRoleInfoVo = {
     groups: GroupVo[]
 }
 
-type UserInfoVo = {
+interface UserInfoVo {
     id: string
     userId: string
     nickname: string
@@ -99,13 +99,13 @@ type UserInfoVo = {
     email: string
 }
 
-type ModuleVo = {
+interface ModuleVo {
     id: number
     name: string
     powerId: number
 }
 
-type MenuVo = {
+interface MenuVo {
     id: number
     name: string
     url: string
@@ -113,7 +113,7 @@ type MenuVo = {
     parentId: number
 }
 
-type ElementVo = {
+interface ElementVo {
     id: number
     name: string
     powerId: number
@@ -121,7 +121,7 @@ type ElementVo = {
     menuId: number
 }
 
-type OperationVo = {
+interface OperationVo {
     id: number
     name: string
     code: string
@@ -129,19 +129,37 @@ type OperationVo = {
     elementId: number
 }
 
-type RoleVo = {
+interface RoleVo {
     id: string
     name: string
     enable: boolean
 }
 
-type GroupVo = {
+interface GroupVo {
     id: string
     name: string
     enable: boolean
 }
 
-type LoginForm = {
+interface LoginForm {
     username: string
     password: string
 }
+
+interface SysLogGetVo {
+    id: string
+    logType: string
+    operateUserId: string
+    operateTime: Date
+    requestUri: string
+    requestMethod: string
+    requestParams: string
+    requestIp: string
+    requestServerAddress: string
+    isException: boolean
+    exceptionInfo: string
+    startTime: Date
+    endTime: Date
+    executeTime: number
+    userAgent: string
+}
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
new file mode 100644
index 0000000..53e3d05
--- /dev/null
+++ b/src/pages/system/Log.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import FitFullScreen from '@/components/common/FitFullScreen.tsx'
+import Card from '@/components/common/Card'
+import { r_getSysLog } from '@/services/system.tsx'
+import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+
+const Log: React.FC = () => {
+    const [logList, setLogList] = useState<SysLogGetVo[]>([])
+
+    const getLog = () => {
+        r_getSysLog().then((res) => {
+            const data = res.data
+            if (data.code === DATABASE_SELECT_SUCCESS) {
+                data.data && setLogList(data.data)
+            }
+        })
+    }
+
+    useEffect(() => {
+        getLog()
+    }, [])
+
+    return (
+        <>
+            <FitFullScreen style={{ padding: '20px' }}>
+                <Card>
+                    <AntdTable dataSource={logList} />
+                </Card>
+            </FitFullScreen>
+        </>
+    )
+}
+
+export default Log
diff --git a/src/router/system.tsx b/src/router/system.tsx
index df920bd..4bdc155 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -43,6 +43,17 @@ const user: RouteJsonObject[] = [
         permission: true,
         autoHide: true
     },
+    {
+        path: 'log',
+        absolutePath: '/system/log',
+        id: 'system-log',
+        component: React.lazy(() => import('@/pages/system/Log')),
+        name: '系统日志',
+        icon: React.lazy(() => import('~icons/fatweb/log.jsx')),
+        menu: true,
+        permission: true,
+        autoHide: true
+    },
     {
         path: '*',
         absolutePath: '*',
diff --git a/src/services/system.tsx b/src/services/system.tsx
new file mode 100644
index 0000000..6c73239
--- /dev/null
+++ b/src/services/system.tsx
@@ -0,0 +1,4 @@
+import request from '@/services/index'
+import { URL_API_SYS_LOG } from '@/constants/urls.constants'
+
+export const r_getSysLog = () => request.get<SysLogGetVo[]>(URL_API_SYS_LOG)

From 19f4d38bc29df3f0e67e1b93ee5791dce08a83b2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 3 Nov 2023 11:57:12 +0800
Subject: [PATCH 061/307] Optimize HideScrollbar

---
 .../css/components/common/hide-scrollbar.scss |  4 +-
 src/assets/css/pages/tools-framework.scss     |  1 +
 src/components/common/HideScrollbar.tsx       | 78 +++++++------------
 .../common/sidebar/SidebarScroll.tsx          |  1 -
 4 files changed, 31 insertions(+), 53 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 32076ac..427964a 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -68,14 +68,14 @@
   }
 
   .vertical-scrollbar {
-    padding: 12px 4px;
+    padding: 12px 2px;
     height: 100%;
     left: 100%;
     top: 0;
     transform: translateX(-100%);
 
     .box {
-      width: 8px;
+      width: 6px;
     }
   }
 
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 9906a03..937d667 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -11,5 +11,6 @@ body {
 
 .right-panel {
   flex: 1;
+  width: 0;
   background-color: constants.$background-color;
 }
\ No newline at end of file
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 3448b0d..6b2dad0 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -13,7 +13,6 @@ interface HideScrollbarProps
     minWidth?: string | number
     minHeight?: string | number
     scrollbarWidth?: string | number
-    animationTransitionTime?: number
     autoHideWaitingTime?: number
 }
 
@@ -174,9 +173,10 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         minWidth,
         minHeight,
         scrollbarWidth,
-        animationTransitionTime,
         autoHideWaitingTime,
         children,
+        style,
+        className,
         ..._props
     } = props
 
@@ -412,35 +412,33 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
     }
 
     useEffect(() => {
-        const windowResizeListener = () => {
-            setTimeout(() => {
-                setVerticalScrollbarWidth(
-                    (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
-                )
-                setHorizontalScrollbarWidth(
-                    (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
+        const resizeObserver = new ResizeObserver(() => {
+            setVerticalScrollbarWidth(
+                (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
+            )
+            setHorizontalScrollbarWidth(
+                (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
+            )
+
+            rootRef.current &&
+                setVerticalScrollbarLength(
+                    (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
                 )
 
-                rootRef.current &&
-                    setVerticalScrollbarLength(
-                        (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) *
-                            100
-                    )
+            rootRef.current &&
+                setHorizontalScrollbarLength(
+                    (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
+                )
+            refreshLayout()
+        })
+        maskRef.current && resizeObserver.observe(maskRef.current)
 
-                rootRef.current &&
-                    setHorizontalScrollbarLength(
-                        (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
-                    )
-                refreshLayout()
-            }, animationTransitionTime)
-
-            return windowResizeListener
+        return () => {
+            maskRef.current && resizeObserver.unobserve(maskRef.current)
         }
-        setTimeout(() => {
-            windowResizeListener()
-        }, 1000)
-        window.addEventListener('resize', windowResizeListener())
+    }, [])
 
+    useEffect(() => {
         rootRef.current?.removeEventListener('wheel', wheelListenerRef.current)
         if (isPreventAnyScroll) {
             const handleDefaultWheel = (event: WheelEvent) => {
@@ -462,28 +460,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
             wheelListenerRef.current = handleDefaultWheel
             rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
         }
-
-        rootRef.current &&
-            setVerticalScrollbarLength(
-                (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
-            )
-
-        rootRef.current &&
-            setHorizontalScrollbarLength(
-                (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
-            )
-
-        return () => {
-            window.removeEventListener('resize', windowResizeListener)
-        }
-    }, [
-        animationTransitionTime,
-        horizontalScrollbarLength,
-        isPreventAnyScroll,
-        isPreventHorizontalScroll,
-        isPreventScroll,
-        isPreventVerticalScroll
-    ])
+    }, [isPreventAnyScroll, isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll])
 
     return (
         <>
@@ -507,13 +484,14 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
             >
                 <div
                     ref={rootRef}
-                    className={'hide-scrollbar-selection'}
+                    className={`hide-scrollbar-selection${className ? ` ${className}` : ''}`}
                     tabIndex={0}
                     style={{
                         width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
                         height: `calc(${maskRef.current?.clientHeight}px + ${horizontalScrollbarWidth}px)`,
                         touchAction: isPreventAnyScroll ? 'none' : '',
-                        msTouchAction: isPreventAnyScroll ? 'none' : ''
+                        msTouchAction: isPreventAnyScroll ? 'none' : '',
+                        ...style
                     }}
                     {..._props}
                     onMouseDown={isPreventAnyScroll ? handleDefaultMouseDown : undefined}
diff --git a/src/components/common/sidebar/SidebarScroll.tsx b/src/components/common/sidebar/SidebarScroll.tsx
index cdd1fa5..4a7c8d7 100644
--- a/src/components/common/sidebar/SidebarScroll.tsx
+++ b/src/components/common/sidebar/SidebarScroll.tsx
@@ -21,7 +21,6 @@ const SidebarScroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>(
             <HideScrollbar
                 isShowVerticalScrollbar={true}
                 scrollbarWidth={2}
-                animationTransitionTime={300}
                 autoHideWaitingTime={800}
                 ref={hideScrollbarRef}
             >

From 7d6cd3cb266a55e1662769629c9c0596a624f310 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 3 Nov 2023 11:57:41 +0800
Subject: [PATCH 062/307] Optimize code

---
 src/assets/css/common.scss                      | 2 +-
 src/assets/css/components/common/card.scss      | 3 +++
 src/assets/css/components/common/indicator.scss | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index 650a829..682ce00 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -1,4 +1,4 @@
-@use '@/assets/css/constants.scss' as constants;
+@use '@/assets/css/constants' as constants;
 
 #root {
   height: 100vh;
diff --git a/src/assets/css/components/common/card.scss b/src/assets/css/components/common/card.scss
index a7688e6..7b78684 100644
--- a/src/assets/css/components/common/card.scss
+++ b/src/assets/css/components/common/card.scss
@@ -1,4 +1,7 @@
+@use '@/assets/css/constants' as constants;
+
 .card-box {
+  background-color: constants.$origin-color;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.1);
diff --git a/src/assets/css/components/common/indicator.scss b/src/assets/css/components/common/indicator.scss
index efe8e76..1af0d13 100644
--- a/src/assets/css/components/common/indicator.scss
+++ b/src/assets/css/components/common/indicator.scss
@@ -1,4 +1,4 @@
-@use '@/assets/css/constants.scss' as constants;
+@use '@/assets/css/constants' as constants;
 
 .dot-list {
   display: flex;

From bc196d4ba99172545bc8bebd28579cb803eef91d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 3 Nov 2023 13:35:20 +0800
Subject: [PATCH 063/307] Optimize HideScrollbar and sidebar

---
 src/assets/css/components/common/sidebar.scss |  2 +
 src/components/common/HideScrollbar.tsx       | 41 +++++++++++--------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss
index 3fd86f3..df3f922 100644
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -202,6 +202,8 @@
       font-size: 1.4em;
       color: constants.$font-main-color;
       user-select: text;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       a{
         color: constants.$main-color;
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 6b2dad0..d0ffcf9 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -411,30 +411,37 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         setRefreshTime(Date.now())
     }
 
+    const reloadScrollbar = () => {
+        setVerticalScrollbarWidth(
+            (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
+        )
+        setHorizontalScrollbarWidth(
+            (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
+        )
+
+        rootRef.current &&
+            setVerticalScrollbarLength(
+                (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
+            )
+
+        rootRef.current &&
+            setHorizontalScrollbarLength(
+                (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
+            )
+
+        refreshLayout()
+    }
+
     useEffect(() => {
         const resizeObserver = new ResizeObserver(() => {
-            setVerticalScrollbarWidth(
-                (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
-            )
-            setHorizontalScrollbarWidth(
-                (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
-            )
-
-            rootRef.current &&
-                setVerticalScrollbarLength(
-                    (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
-                )
-
-            rootRef.current &&
-                setHorizontalScrollbarLength(
-                    (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
-                )
-            refreshLayout()
+            reloadScrollbar()
         })
         maskRef.current && resizeObserver.observe(maskRef.current)
+        contentRef.current && resizeObserver.observe(contentRef.current)
 
         return () => {
             maskRef.current && resizeObserver.unobserve(maskRef.current)
+            contentRef.current && resizeObserver.unobserve(contentRef.current)
         }
     }, [])
 

From eadc74ca67ae8d056e1572af303302e46d97fefa Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 3 Nov 2023 18:25:58 +0800
Subject: [PATCH 064/307] Optimize date response. Add system log table.

---
 src/ant-design.d.ts                        |   6 +
 src/assets/css/pages/system-framework.scss |  16 +++
 src/components/common/Card.tsx             |   6 +-
 src/global.d.ts                            |  48 +++++---
 src/pages/Login.tsx                        |   9 +-
 src/pages/SystemFramework.tsx              |   2 +-
 src/pages/system/Log.tsx                   | 131 +++++++++++++++++++--
 src/services/system.tsx                    |   3 +-
 src/utils/common.ts                        |   5 +
 9 files changed, 190 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/css/pages/system-framework.scss

diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts
index 5ec575f..e9d563c 100644
--- a/src/ant-design.d.ts
+++ b/src/ant-design.d.ts
@@ -1,8 +1,14 @@
 import * as React from 'react'
 import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
+import { TablePaginationConfig } from 'antd/lib'
+import { FilterValue } from 'antd/es/table/interface'
 
 declare global {
     type IconComponent =
         | React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>
         | React.ForwardRefExoticComponent<CustomIconComponentProps>
+
+    type PaginationConfig = TablePaginationConfig
+
+    type FilterVal = FilterValue
 }
diff --git a/src/assets/css/pages/system-framework.scss b/src/assets/css/pages/system-framework.scss
new file mode 100644
index 0000000..937d667
--- /dev/null
+++ b/src/assets/css/pages/system-framework.scss
@@ -0,0 +1,16 @@
+@use "@/assets/css/constants" as constants;
+@use "@/assets/css/mixins" as mixins;
+
+body {
+  background-color: constants.$background-color;
+}
+
+.left-panel {
+  background-color: constants.$origin-color;
+}
+
+.right-panel {
+  flex: 1;
+  width: 0;
+  background-color: constants.$background-color;
+}
\ No newline at end of file
diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx
index 712bfde..633326e 100644
--- a/src/components/common/Card.tsx
+++ b/src/components/common/Card.tsx
@@ -4,9 +4,9 @@ import '@/assets/css/components/common/card.scss'
 interface CardProps
     extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
 
-const Card: React.FC<CardProps> = (props) => {
+const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     const { className, ..._props } = props
-    return <div className={`card-box${className ? ` ${className}` : ''}`} {..._props} />
-}
+    return <div className={`card-box${className ? ` ${className}` : ''}`} {..._props} ref={ref} />
+})
 
 export default Card
diff --git a/src/global.d.ts b/src/global.d.ts
index 6275a94..cdc11bb 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -61,13 +61,13 @@ interface UserWithPowerInfoVo {
     id: string
     username: string
     locking: boolean
-    expiration: Date
-    credentialsExpiration: Date
+    expiration: string
+    credentialsExpiration: string
     enable: number
-    lastLoginTime: Date
+    lastLoginTime: string
     lastLoginIp: string
-    createTime: Date
-    updateTime: Date
+    createTime: string
+    updateTime: string
     userInfo: UserInfoVo
     modules: ModuleVo[]
     menus: MenuVo[]
@@ -79,13 +79,13 @@ interface UserWithRoleInfoVo {
     id: string
     username: string
     locking: boolean
-    expiration: Date
-    credentialsExpiration: Date
+    expiration: string
+    credentialsExpiration: string
     enable: number
-    lastLoginTime: Date
+    lastLoginTime: string
     lastLoginIp: string
-    createTime: Date
-    updateTime: Date
+    createTime: string
+    updateTime: string
     userInfo: UserInfoVo
     roles: RoleVo[]
     groups: GroupVo[]
@@ -146,20 +146,40 @@ interface LoginForm {
     password: string
 }
 
+interface PageVo<T> {
+    current: number
+    pages: number
+    size: number
+    total: number
+    records: T[]
+}
+
+interface PageParam {
+    currentPage?: number
+    pageSize?: number
+}
+
+interface TableParams {
+    pagination?: PaginationConfig
+    sortField?: string
+    sortOrder?: string
+    filters?: Record<string, FilterVal | null>
+}
+
 interface SysLogGetVo {
     id: string
     logType: string
     operateUserId: string
-    operateTime: Date
+    operateTime: string
     requestUri: string
     requestMethod: string
     requestParams: string
     requestIp: string
     requestServerAddress: string
-    isException: boolean
+    exception: boolean
     exceptionInfo: string
-    startTime: Date
-    endTime: Date
+    startTime: string
+    endTime: string
     executeTime: number
     userAgent: string
 }
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 7b5a9b5..8a45882 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import { notification } from 'antd'
-import moment from 'moment'
 import '@/assets/css/pages/login.scss'
-import { setToken } from '@/utils/common'
+import { getLocalTime, setToken } from '@/utils/common'
 import { getUserInfo, login } from '@/utils/auth'
 import {
     SYSTEM_LOGIN_SUCCESS,
@@ -44,10 +43,8 @@ const Login: React.FC = () => {
                                             <br />
                                             <span>
                                                 上次登录：
-                                                {moment(user.lastLoginTime).format(
-                                                    'yyyy-MM-DD HH:mm:ssZ'
-                                                )}
-                                                【{user.lastLoginIp}】
+                                                {getLocalTime(user.lastLoginTime)}【
+                                                {user.lastLoginIp}】
                                             </span>
                                         </>
                                     ),
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 21e6b53..2525e74 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import system from '@/router/system'
-import '@/assets/css/pages/tools-framework.scss'
+import '@/assets/css/pages/system-framework.scss'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 53e3d05..ae7ec32 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -1,31 +1,140 @@
 import React, { useState } from 'react'
+import { ColumnsType, FilterValue, SorterResult } from 'antd/es/table/interface'
+import { TablePaginationConfig } from 'antd/lib'
 import FitFullScreen from '@/components/common/FitFullScreen.tsx'
 import Card from '@/components/common/Card'
 import { r_getSysLog } from '@/services/system.tsx'
 import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import { getLocalTime } from '@/utils/common.ts'
 
 const Log: React.FC = () => {
-    const [logList, setLogList] = useState<SysLogGetVo[]>([])
+    const tableCardRef = useRef<HTMLDivElement>(null)
+    const [logData, setLogData] = useState<SysLogGetVo[]>([])
+    const [loading, setLoading] = useState(false)
+    const [tableParams, setTableParams] = useState<TableParams>({
+        pagination: {
+            current: 1,
+            pageSize: 20,
+            position: ['bottomCenter']
+        }
+    })
+
+    const dataColumns: ColumnsType<SysLogGetVo> = [
+        { title: '类型', dataIndex: 'logType' },
+        {
+            title: '操作者',
+            dataIndex: 'operateUserId'
+        },
+        {
+            title: '操作时间',
+            dataIndex: 'operateTime',
+            render: (value) => getLocalTime(value)
+        },
+        {
+            title: '请求 Uri',
+            dataIndex: 'requestUri'
+        },
+        {
+            title: '请求方式',
+            dataIndex: 'requestMethod'
+        },
+        {
+            title: '请求参数',
+            dataIndex: 'requestParams'
+        },
+        {
+            title: '请求 IP',
+            dataIndex: 'requestIp'
+        },
+        {
+            title: '请求服务器地址',
+            dataIndex: 'requestServerAddress'
+        },
+        {
+            title: '异常信息',
+            dataIndex: 'exceptionInfo'
+        },
+        {
+            title: '执行时间',
+            dataIndex: 'executeTime',
+            render: (value) => `${value}ms`
+        },
+        {
+            title: '用户代理',
+            dataIndex: 'userAgent'
+        }
+    ]
+
+    const handleOnTableChange = (
+        pagination: TablePaginationConfig,
+        filters: Record<string, FilterValue | null>,
+        sorter: SorterResult<SysLogGetVo> | SorterResult<SysLogGetVo>[]
+    ) => {
+        setTableParams({ pagination, filters, ...sorter })
+
+        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+            setLogData([])
+        }
+    }
 
     const getLog = () => {
-        r_getSysLog().then((res) => {
-            const data = res.data
-            if (data.code === DATABASE_SELECT_SUCCESS) {
-                data.data && setLogList(data.data)
-            }
+        if (loading) {
+            return
+        }
+
+        r_getSysLog({
+            currentPage: tableParams.pagination?.current,
+            pageSize: tableParams.pagination?.pageSize
         })
+            .then((res) => {
+                const data = res.data
+                if (data.code === DATABASE_SELECT_SUCCESS) {
+                    data.data && setLogData(data.data.records)
+                    data.data &&
+                        setTableParams({
+                            ...tableParams,
+                            pagination: {
+                                ...tableParams.pagination,
+                                total: data.data.total
+                            }
+                        })
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+            })
     }
 
     useEffect(() => {
         getLog()
-    }, [])
+    }, [
+        JSON.stringify(tableParams.filters),
+        JSON.stringify(tableParams.sortField),
+        JSON.stringify(tableParams.sortOrder),
+        JSON.stringify(tableParams.pagination?.pageSize),
+        JSON.stringify(tableParams.pagination?.current)
+    ])
 
     return (
         <>
-            <FitFullScreen style={{ padding: '20px' }}>
-                <Card>
-                    <AntdTable dataSource={logList} />
-                </Card>
+            <FitFullScreen>
+                <HideScrollbar
+                    style={{ padding: 30 }}
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={500}
+                >
+                    <Card ref={tableCardRef}>
+                        <AntdTable
+                            dataSource={logData}
+                            columns={dataColumns}
+                            rowKey={(record) => record.id}
+                            pagination={tableParams.pagination}
+                            loading={loading}
+                            onChange={handleOnTableChange}
+                        />
+                    </Card>
+                </HideScrollbar>
             </FitFullScreen>
         </>
     )
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 6c73239..23125c0 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,4 +1,5 @@
 import request from '@/services/index'
 import { URL_API_SYS_LOG } from '@/constants/urls.constants'
 
-export const r_getSysLog = () => request.get<SysLogGetVo[]>(URL_API_SYS_LOG)
+export const r_getSysLog = (param: PageParam) =>
+    request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })
diff --git a/src/utils/common.ts b/src/utils/common.ts
index ebae83a..ffe9f7e 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,4 +1,5 @@
 import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
+import moment from 'moment'
 
 export const getQueryVariable = (variable: string) => {
     const query = window.location.search.substring(1)
@@ -139,3 +140,7 @@ const randomColor = (start: number, end: number) => {
 export const getRedirectUrl = (path: string, redirectUrl: string): string => {
     return `${path}?redirect=${encodeURIComponent(redirectUrl)}`
 }
+
+export const getLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
+    return moment.utc(utcTime).local().format(format)
+}

From ae73ecfd92eb604bc8936417d40de864de777980 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 5 Nov 2023 22:54:55 +0800
Subject: [PATCH 065/307] Optimize log page

---
 src/assets/css/components/common/card.scss |  2 +-
 src/global.d.ts                            |  1 +
 src/pages/system/Log.tsx                   | 62 +++++++++++++++-------
 3 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/src/assets/css/components/common/card.scss b/src/assets/css/components/common/card.scss
index 7b78684..8daf288 100644
--- a/src/assets/css/components/common/card.scss
+++ b/src/assets/css/components/common/card.scss
@@ -4,5 +4,5 @@
   background-color: constants.$origin-color;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.1);
+  box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
 }
\ No newline at end of file
diff --git a/src/global.d.ts b/src/global.d.ts
index cdc11bb..47e0779 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -182,4 +182,5 @@ interface SysLogGetVo {
     endTime: string
     executeTime: number
     userAgent: string
+    operateUsername: string
 }
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index ae7ec32..24d6056 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -21,44 +21,68 @@ const Log: React.FC = () => {
     })
 
     const dataColumns: ColumnsType<SysLogGetVo> = [
-        { title: '类型', dataIndex: 'logType' },
+        {
+            title: '类型',
+            dataIndex: 'logType',
+            render: (value) =>
+                value === 'ERROR' ? (
+                    <AntdTag color={'error'}>{value}</AntdTag>
+                ) : (
+                    <AntdTag>{value}</AntdTag>
+                ),
+            align: 'center'
+        },
         {
             title: '操作者',
-            dataIndex: 'operateUserId'
+            dataIndex: 'operateUsername',
+            align: 'center',
+            render: (value, record) =>
+                value ? (
+                    <AntdTag color={'purple'}>{`${value}(${record.operateUserId})`}</AntdTag>
+                ) : (
+                    <AntdTag>Anonymous</AntdTag>
+                )
         },
         {
             title: '操作时间',
             dataIndex: 'operateTime',
-            render: (value) => getLocalTime(value)
-        },
-        {
-            title: '请求 Uri',
-            dataIndex: 'requestUri'
+            render: (value: string) => getLocalTime(value),
+            align: 'center'
         },
         {
             title: '请求方式',
-            dataIndex: 'requestMethod'
+            dataIndex: 'requestMethod',
+            align: 'center'
         },
         {
-            title: '请求参数',
-            dataIndex: 'requestParams'
+            title: '请求 Url',
+            render: (_value, record) =>
+                `${record.requestServerAddress}${record.requestUri}${
+                    record.requestParams ? `?${record.requestParams}` : ''
+                }`
         },
         {
             title: '请求 IP',
-            dataIndex: 'requestIp'
+            dataIndex: 'requestIp',
+            align: 'center'
         },
         {
-            title: '请求服务器地址',
-            dataIndex: 'requestServerAddress'
-        },
-        {
-            title: '异常信息',
-            dataIndex: 'exceptionInfo'
+            title: '异常',
+            dataIndex: 'exception',
+            render: (value: boolean, record) => (value ? record.exceptionInfo : '无'),
+            align: 'center'
         },
         {
             title: '执行时间',
             dataIndex: 'executeTime',
-            render: (value) => `${value}ms`
+            render: (value, record) => (
+                <AntdTooltip
+                    title={`${getLocalTime(record.startTime)} - ${getLocalTime(record.endTime)}`}
+                >
+                    {`${value}ms`}
+                </AntdTooltip>
+            ),
+            align: 'center'
         },
         {
             title: '用户代理',
@@ -83,7 +107,7 @@ const Log: React.FC = () => {
             return
         }
 
-        r_getSysLog({
+        void r_getSysLog({
             currentPage: tableParams.pagination?.current,
             pageSize: tableParams.pagination?.pageSize
         })

From c297b2c9e9cba712dde46d31212a650bc18c2b06 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 8 Nov 2023 10:47:49 +0800
Subject: [PATCH 066/307] Update dependencies

---
 package-lock.json | 369 ++++++++++++++++++++++++----------------------
 package.json      |  20 +--
 2 files changed, 204 insertions(+), 185 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2d95007..cd2e4a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
-        "antd": "^5.10.3",
+        "antd": "^5.11.0",
         "axios": "^1.6.0",
         "jwt-decode": "^4.0.0",
         "localforage": "^1.10.0",
@@ -24,15 +24,15 @@
       "devDependencies": {
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
-        "@types/jsdom": "^21.1.4",
-        "@types/lodash": "^4.14.200",
-        "@types/node": "^20.8.10",
-        "@types/react": "^18.2.34",
-        "@types/react-dom": "^18.2.14",
-        "@typescript-eslint/eslint-plugin": "^6.9.1",
-        "@typescript-eslint/parser": "^6.9.1",
+        "@types/jsdom": "^21.1.5",
+        "@types/lodash": "^4.14.201",
+        "@types/node": "^20.9.0",
+        "@types/react": "^18.2.37",
+        "@types/react-dom": "^18.2.15",
+        "@typescript-eslint/eslint-plugin": "^6.10.0",
+        "@typescript-eslint/parser": "^6.10.0",
         "@vitejs/plugin-react": "^4.1.1",
-        "eslint": "^8.52.0",
+        "eslint": "^8.53.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-config-standard-with-typescript": "^39.1.1",
         "eslint-plugin-import": "^2.29.0",
@@ -46,7 +46,7 @@
         "stylelint-config-prettier": "^9.0.5",
         "typescript": "^5.2.2",
         "unplugin-auto-import": "^0.16.7",
-        "unplugin-icons": "^0.17.1",
+        "unplugin-icons": "^0.17.3",
         "vite": "^4.5.0"
       }
     },
@@ -991,9 +991,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
-      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.3.tgz",
+      "integrity": "sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -1008,33 +1008,42 @@
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.21.0",
-      "resolved": "https://registry.npmmirror.com/globals/-/globals-13.21.0.tgz",
-      "integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
+      "version": "13.23.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
+      "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/type-fest": {
       "version": "0.20.2",
-      "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.20.2.tgz",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true,
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.52.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.52.0.tgz",
-      "integrity": "sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.53.0.tgz",
+      "integrity": "sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1565,9 +1574,9 @@
       "dev": true
     },
     "node_modules/@types/jsdom": {
-      "version": "21.1.4",
-      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.4.tgz",
-      "integrity": "sha512-NzAMLEV0KQ4cBaDx3Ls8VfJUElyDUm1xrtYRmcMK0gF8L5xYbujFVaQlJ50yinQ/d47j2rEP1XUzkiYrw4YRFA==",
+      "version": "21.1.5",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.5.tgz",
+      "integrity": "sha512-sBK/3YjS3uuPj+HzZyhB4GGTnFmk0mdyQfhzZ/sqs9ciyG41QJdZZdwcPa6OfW97OTNTwl5tBAsfEOm/dui9pQ==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -1576,9 +1585,9 @@
       }
     },
     "node_modules/@types/json-schema": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz",
-      "integrity": "sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==",
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
     "node_modules/@types/json5": {
@@ -1588,9 +1597,9 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.200",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.200.tgz",
-      "integrity": "sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q==",
+      "version": "4.14.201",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.201.tgz",
+      "integrity": "sha512-y9euML0cim1JrykNxADLfaG0FgD1g/yTHwUs/Jg9ZIU7WKj2/4IW9Lbb1WZbvck78W/lfGXFfe+u2EGfIJXdLQ==",
       "dev": true
     },
     "node_modules/@types/minimist": {
@@ -1601,9 +1610,9 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "20.8.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.10.tgz",
-      "integrity": "sha512-TlgT8JntpcbmKUFzjhsyhGfP2fsiz1Mv56im6enJ905xG1DAYesxJaeSbGqQmAw8OWPdhyJGhGSQGKRNJ45u9w==",
+      "version": "20.9.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.0.tgz",
+      "integrity": "sha512-nekiGu2NDb1BcVofVcEKMIwzlx4NjHlcjhoxxKBNLtz15Y1z7MYf549DFvkHSId02Ax6kGwWntIBPC3l/JZcmw==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -1630,9 +1639,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.34",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.34.tgz",
-      "integrity": "sha512-U6eW/alrRk37FU/MS2RYMjx0Va2JGIVXELTODaTIYgvWGCV4Y4TfTUzG8DdmpDNIT0Xpj/R7GfyHOJJrDttcvg==",
+      "version": "18.2.37",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
+      "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1641,9 +1650,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.14",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz",
-      "integrity": "sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==",
+      "version": "18.2.15",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.15.tgz",
+      "integrity": "sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -1656,9 +1665,9 @@
       "dev": true
     },
     "node_modules/@types/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==",
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.5.tgz",
+      "integrity": "sha512-+d+WYC1BxJ6yVOgUgzK8gWvp5qF8ssV5r4nsDcZWKRWcDQLQ619tvWAxJQYGgBrO1MnLJC7a5GtiYsAoQ47dJg==",
       "dev": true
     },
     "node_modules/@types/tough-cookie": {
@@ -1668,16 +1677,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.9.1.tgz",
-      "integrity": "sha512-w0tiiRc9I4S5XSXXrMHOWgHgxbrBn1Ro+PmiYhSg2ZVdxrAJtQgzU5o2m1BfP6UOn7Vxcc6152vFjQfmZR4xEg==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.10.0.tgz",
+      "integrity": "sha512-uoLj4g2OTL8rfUQVx2AFO1hp/zja1wABJq77P6IclQs6I/m9GLrm7jCdgzZkvWdDCQf1uEvoa8s8CupsgWQgVg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.9.1",
-        "@typescript-eslint/type-utils": "6.9.1",
-        "@typescript-eslint/utils": "6.9.1",
-        "@typescript-eslint/visitor-keys": "6.9.1",
+        "@typescript-eslint/scope-manager": "6.10.0",
+        "@typescript-eslint/type-utils": "6.10.0",
+        "@typescript-eslint/utils": "6.10.0",
+        "@typescript-eslint/visitor-keys": "6.10.0",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.4",
@@ -1736,15 +1745,15 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.9.1.tgz",
-      "integrity": "sha512-C7AK2wn43GSaCUZ9do6Ksgi2g3mwFkMO3Cis96kzmgudoVaKyt62yNzJOktP0HDLb/iO2O0n2lBOzJgr6Q/cyg==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.10.0.tgz",
+      "integrity": "sha512-+sZwIj+s+io9ozSxIWbNB5873OSdfeBEH/FR0re14WLI6BaKuSOnnwCJ2foUiu8uXf4dRp1UqHP0vrZ1zXGrog==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.9.1",
-        "@typescript-eslint/types": "6.9.1",
-        "@typescript-eslint/typescript-estree": "6.9.1",
-        "@typescript-eslint/visitor-keys": "6.9.1",
+        "@typescript-eslint/scope-manager": "6.10.0",
+        "@typescript-eslint/types": "6.10.0",
+        "@typescript-eslint/typescript-estree": "6.10.0",
+        "@typescript-eslint/visitor-keys": "6.10.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1764,13 +1773,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.9.1.tgz",
-      "integrity": "sha512-38IxvKB6NAne3g/+MyXMs2Cda/Sz+CEpmm+KLGEM8hx/CvnSRuw51i8ukfwB/B/sESdeTGet1NH1Wj7I0YXswg==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.10.0.tgz",
+      "integrity": "sha512-TN/plV7dzqqC2iPNf1KrxozDgZs53Gfgg5ZHyw8erd6jd5Ta/JIEcdCheXFt9b1NYb93a1wmIIVW/2gLkombDg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.9.1",
-        "@typescript-eslint/visitor-keys": "6.9.1"
+        "@typescript-eslint/types": "6.10.0",
+        "@typescript-eslint/visitor-keys": "6.10.0"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1781,13 +1790,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.9.1.tgz",
-      "integrity": "sha512-eh2oHaUKCK58qIeYp19F5V5TbpM52680sB4zNSz29VBQPTWIlE/hCj5P5B1AChxECe/fmZlspAWFuRniep1Skg==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.10.0.tgz",
+      "integrity": "sha512-wYpPs3hgTFblMYwbYWPT3eZtaDOjbLyIYuqpwuLBBqhLiuvJ+9sEp2gNRJEtR5N/c9G1uTtQQL5AhV0fEPJYcg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.9.1",
-        "@typescript-eslint/utils": "6.9.1",
+        "@typescript-eslint/typescript-estree": "6.10.0",
+        "@typescript-eslint/utils": "6.10.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -1808,9 +1817,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.9.1.tgz",
-      "integrity": "sha512-BUGslGOb14zUHOUmDB2FfT6SI1CcZEJYfF3qFwBeUrU6srJfzANonwRYHDpLBuzbq3HaoF2XL2hcr01c8f8OaQ==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.10.0.tgz",
+      "integrity": "sha512-36Fq1PWh9dusgo3vH7qmQAj5/AZqARky1Wi6WpINxB6SkQdY5vQoT2/7rW7uBIsPDcvvGCLi4r10p0OJ7ITAeg==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1821,13 +1830,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.9.1.tgz",
-      "integrity": "sha512-U+mUylTHfcqeO7mLWVQ5W/tMLXqVpRv61wm9ZtfE5egz7gtnmqVIw9ryh0mgIlkKk9rZLY3UHygsBSdB9/ftyw==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.10.0.tgz",
+      "integrity": "sha512-ek0Eyuy6P15LJVeghbWhSrBCj/vJpPXXR+EpaRZqou7achUWL8IdYnMSC5WHAeTWswYQuP2hAZgij/bC9fanBg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.9.1",
-        "@typescript-eslint/visitor-keys": "6.9.1",
+        "@typescript-eslint/types": "6.10.0",
+        "@typescript-eslint/visitor-keys": "6.10.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -1881,17 +1890,17 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.9.1.tgz",
-      "integrity": "sha512-L1T0A5nFdQrMVunpZgzqPL6y2wVreSyHhKGZryS6jrEN7bD9NplVAyMryUhXsQ4TWLnZmxc2ekar/lSGIlprCA==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.10.0.tgz",
+      "integrity": "sha512-v+pJ1/RcVyRc0o4wAGux9x42RHmAjIGzPRo538Z8M1tVx6HOnoQBCX/NoadHQlZeC+QO2yr4nNSFWOoraZCAyg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
         "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.9.1",
-        "@typescript-eslint/types": "6.9.1",
-        "@typescript-eslint/typescript-estree": "6.9.1",
+        "@typescript-eslint/scope-manager": "6.10.0",
+        "@typescript-eslint/types": "6.10.0",
+        "@typescript-eslint/typescript-estree": "6.10.0",
         "semver": "^7.5.4"
       },
       "engines": {
@@ -1939,12 +1948,12 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.9.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.9.1.tgz",
-      "integrity": "sha512-MUaPUe/QRLEffARsmNfmpghuQkW436DvESW+h+M52w0coICHRfD6Np9/K6PdACwnrq1HmuLl+cSPZaJmeVPkSw==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.10.0.tgz",
+      "integrity": "sha512-xMGluxQIEtOM7bqFCo+rCMh5fqI+ZxV5RUUOa29iVPz1OgCZrtc7rFnz5cLUazlkPKYqX+75iuDq7m0HQ48nCg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.9.1",
+        "@typescript-eslint/types": "6.10.0",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -2000,7 +2009,7 @@
     },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
-      "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true,
       "peerDependencies": {
@@ -2021,7 +2030,7 @@
     },
     "node_modules/ajv": {
       "version": "6.12.6",
-      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "dependencies": {
@@ -2029,6 +2038,10 @@
         "fast-json-stable-stringify": "^2.0.0",
         "json-schema-traverse": "^0.4.1",
         "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
     "node_modules/ansi-regex": {
@@ -2053,9 +2066,9 @@
       }
     },
     "node_modules/antd": {
-      "version": "5.10.3",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-5.10.3.tgz",
-      "integrity": "sha512-IV+F4P9Fm0pXj4WFCLVLKIu7eCtVKZMLvU1a0HUIRBEy5YPsD5bDzjYkZ4F+RVPaFrAjAvChrWcX6NtQOVNuJw==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.11.0.tgz",
+      "integrity": "sha512-34T5Y6z+Ip+j4faXPTcanTFCLLpR4V0rLHtuz0lbN9gF4coGY/YYa8bhgwXrT6muW0Afwyo3NmbMF52hvIarog==",
       "dependencies": {
         "@ant-design/colors": "^7.0.0",
         "@ant-design/cssinjs": "^1.17.2",
@@ -2067,43 +2080,43 @@
         "@rc-component/mutate-observer": "^1.1.0",
         "@rc-component/tour": "~1.10.0",
         "@rc-component/trigger": "^1.18.0",
-        "classnames": "^2.2.6",
-        "copy-to-clipboard": "^3.2.0",
+        "classnames": "^2.3.2",
+        "copy-to-clipboard": "^3.3.3",
         "dayjs": "^1.11.1",
         "qrcode.react": "^3.1.0",
-        "rc-cascader": "~3.18.1",
+        "rc-cascader": "~3.20.0",
         "rc-checkbox": "~3.1.0",
         "rc-collapse": "~3.7.1",
         "rc-dialog": "~9.3.4",
         "rc-drawer": "~6.5.2",
         "rc-dropdown": "~4.1.0",
-        "rc-field-form": "~1.39.0",
-        "rc-image": "~7.3.1",
-        "rc-input": "~1.2.1",
-        "rc-input-number": "~8.1.0",
-        "rc-mentions": "~2.8.0",
+        "rc-field-form": "~1.40.0",
+        "rc-image": "~7.3.2",
+        "rc-input": "~1.3.5",
+        "rc-input-number": "~8.4.0",
+        "rc-mentions": "~2.9.1",
         "rc-menu": "~9.12.2",
         "rc-motion": "^2.9.0",
         "rc-notification": "~5.3.0",
-        "rc-pagination": "~3.6.1",
+        "rc-pagination": "~3.7.0",
         "rc-picker": "~3.14.6",
         "rc-progress": "~3.5.1",
         "rc-rate": "~2.12.0",
         "rc-resize-observer": "^1.4.0",
         "rc-segmented": "~2.2.2",
-        "rc-select": "~14.9.2",
-        "rc-slider": "~10.3.1",
+        "rc-select": "~14.10.0",
+        "rc-slider": "~10.4.0",
         "rc-steps": "~6.0.1",
         "rc-switch": "~4.1.0",
-        "rc-table": "~7.34.4",
-        "rc-tabs": "~12.12.1",
-        "rc-textarea": "~1.4.0",
+        "rc-table": "~7.35.2",
+        "rc-tabs": "~12.13.1",
+        "rc-textarea": "~1.5.1",
         "rc-tooltip": "~6.1.2",
-        "rc-tree": "~5.7.12",
-        "rc-tree-select": "~5.13.0",
+        "rc-tree": "~5.8.2",
+        "rc-tree-select": "~5.15.0",
         "rc-upload": "~4.3.5",
         "rc-util": "^5.38.0",
-        "scroll-into-view-if-needed": "^3.0.3",
+        "scroll-into-view-if-needed": "^3.1.0",
         "throttle-debounce": "^5.0.0"
       },
       "funding": {
@@ -2571,9 +2584,9 @@
       }
     },
     "node_modules/compute-scroll-into-view": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-3.0.3.tgz",
-      "integrity": "sha512-nadqwNxghAGTamwIqQSG433W6OADZx2vCo3UXHNrzTRHK/htu+7+L0zhjEoaeaQVNAi3YgqWDv8+tzf0hRfR+A=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
+      "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
     },
     "node_modules/concat-map": {
       "version": "0.0.1",
@@ -3032,15 +3045,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.52.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.52.0.tgz",
-      "integrity": "sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==",
+      "version": "8.53.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.53.0.tgz",
+      "integrity": "sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.2",
-        "@eslint/js": "8.52.0",
+        "@eslint/eslintrc": "^2.1.3",
+        "@eslint/js": "8.53.0",
         "@humanwhocodes/config-array": "^0.11.13",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -3485,7 +3498,7 @@
     },
     "node_modules/espree": {
       "version": "9.6.1",
-      "resolved": "https://registry.npmmirror.com/espree/-/espree-9.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
       "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
       "dependencies": {
@@ -3495,6 +3508,9 @@
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/esquery": {
@@ -3607,7 +3623,7 @@
     },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true
     },
@@ -4645,7 +4661,7 @@
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true
     },
@@ -5553,16 +5569,16 @@
       }
     },
     "node_modules/rc-cascader": {
-      "version": "3.18.1",
-      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.18.1.tgz",
-      "integrity": "sha512-M7Xr5Fs/E87ZGustfObtBYQjsvBCET0UX2JYXB2GmOP+2fsZgjaRGXK+CJBmmWXQ6o4OFinpBQBXG4wJOQ5MEg==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.20.0.tgz",
+      "integrity": "sha512-lkT9EEwOcYdjZ/jvhLoXGzprK1sijT3/Tp4BLxQQcHDZkkOzzwYQC9HgmKoJz0K7CukMfgvO9KqHeBdgE+pELw==",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "array-tree-filter": "^2.1.0",
         "classnames": "^2.3.1",
-        "rc-select": "~14.9.0",
-        "rc-tree": "~5.7.0",
-        "rc-util": "^5.35.0"
+        "rc-select": "~14.10.0",
+        "rc-tree": "~5.8.1",
+        "rc-util": "^5.37.0"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -5646,9 +5662,9 @@
       }
     },
     "node_modules/rc-field-form": {
-      "version": "1.39.0",
-      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.39.0.tgz",
-      "integrity": "sha512-V7Wk7uji1jBsUGGgP788H9rpFy55HLiD4lywTlktUGjK7EgW5dt+mq1MPbtCpPRMzs83vZBW4SOChOmCACz4WA==",
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.40.0.tgz",
+      "integrity": "sha512-OM3N01X2BYFGJDJcwpk9/BBtlwgveE7eh2SQAKIxVCt9KVWlODYJ9ypTHQdxchfDbeJKJKxMBFXlLAmyvlgPHg==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "async-validator": "^4.1.0",
@@ -5680,9 +5696,9 @@
       }
     },
     "node_modules/rc-input": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.2.1.tgz",
-      "integrity": "sha512-nQRmBvEFoGi+SNRDavccZ8ueyhFgmxkWqIt4aDyuNJgUZF12HJKIwDhAafUM7N+g7PyuW9FH3pf3zPHzdiCWbA==",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.3.5.tgz",
+      "integrity": "sha512-SPPwbTJa5ACHNoDdGZF/70AOqqm1Rir3WleuFBKq+nFby1zvpnzvWsHJgzWOr6uJ0GNt8dTMzBrmVGQJkTXqqQ==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -5694,14 +5710,14 @@
       }
     },
     "node_modules/rc-input-number": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-8.1.0.tgz",
-      "integrity": "sha512-bdHgduOxuN0lrhzgPmoKbhRD4GLIzVcddVz972/JHPHr7oLwPX5xDb9w4bXhuMzyT2VzQy7nggRCfH3yAl09oA==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-8.4.0.tgz",
+      "integrity": "sha512-B6rziPOLRmeP7kcS5qbdC5hXvvDHYKV4vUxmahevYx2E6crS2bRi0xLDjhJ0E1HtOWo8rTmaE2EBJAkTCZOLdA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/mini-decimal": "^1.0.1",
         "classnames": "^2.2.5",
-        "rc-input": "~1.2.1",
+        "rc-input": "~1.3.5",
         "rc-util": "^5.28.0"
       },
       "peerDependencies": {
@@ -5710,16 +5726,16 @@
       }
     },
     "node_modules/rc-mentions": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.8.0.tgz",
-      "integrity": "sha512-LBMkO6bSGhEvS1CvMK978qGN82tI+mzk7l/uTiQJH+UDiwpvq+pxK4DxU5b6Q1T5LW6bn2pSua9RaZKZrDoBOw==",
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.9.1.tgz",
+      "integrity": "sha512-cZuElWr/5Ws0PXx1uxobxfYh4mqUw2FitfabR62YnWgm+WAfDyXZXqZg5DxXW+M1cgVvntrQgDDd9LrihrXzew==",
       "dependencies": {
         "@babel/runtime": "^7.22.5",
         "@rc-component/trigger": "^1.5.0",
         "classnames": "^2.2.6",
-        "rc-input": "~1.2.1",
+        "rc-input": "~1.3.5",
         "rc-menu": "~9.12.0",
-        "rc-textarea": "~1.4.0",
+        "rc-textarea": "~1.5.0",
         "rc-util": "^5.34.1"
       },
       "peerDependencies": {
@@ -5792,9 +5808,9 @@
       }
     },
     "node_modules/rc-pagination": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmmirror.com/rc-pagination/-/rc-pagination-3.6.1.tgz",
-      "integrity": "sha512-R/sUnKKXx1Nm4kZfUKS3YKa7yEPF1ZkVB/AynQaHt+nMER7h9wPTfliDJFdYo+RM/nk2JD4Yc5QpUq8fIQHeug==",
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-3.7.0.tgz",
+      "integrity": "sha512-IxSzKapd13L91/195o1TPkKnCNw8gIR25UP1GCW/7c7n/slhld4npu2j2PB9IWjXm4SssaAaSAt2lscYog7wzg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.1",
@@ -5903,9 +5919,9 @@
       }
     },
     "node_modules/rc-select": {
-      "version": "14.9.2",
-      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.9.2.tgz",
-      "integrity": "sha512-VQ15sRFgPURHb8ZcZNSDtb2rAw3+C9xlL0nDziwNHTEW1KvEpZ8y+0v5w24X/Bpl9b3cW1BOyW1F5UqSAq+7Dg==",
+      "version": "14.10.0",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.10.0.tgz",
+      "integrity": "sha512-TsIJTYafTTapCA32LLNpx/AD6ntepR1TG8jEVx35NiAAWCPymhUfuca8kRcUNd3WIGVMDcMKn9kkphoxEz+6Ag==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^1.5.0",
@@ -5924,9 +5940,9 @@
       }
     },
     "node_modules/rc-slider": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.3.1.tgz",
-      "integrity": "sha512-XszsZLkbjcG9ogQy/zUC0n2kndoKUAnY/Vnk1Go5Gx+JJQBz0Tl15d5IfSiglwBUZPS9vsUJZkfCmkIZSqWbcA==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.4.0.tgz",
+      "integrity": "sha512-ZlpWjFhOlEf0w4Ng31avFBkXNNBj60NAcTPaIoiCxBkJ29wOtHSPMqv9PZeEoqmx64bpJkgK7kPa47HG4LPzww==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
@@ -5972,15 +5988,15 @@
       }
     },
     "node_modules/rc-table": {
-      "version": "7.34.4",
-      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.34.4.tgz",
-      "integrity": "sha512-os+i88Y2AO/6dNkOgJkKSHgXYaZZGnuOEEe+nyaq5IRgvAQNhLysUjXt2objtBeFDEZR8TqXrajwBNRUwunmdw==",
+      "version": "7.35.2",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.35.2.tgz",
+      "integrity": "sha512-ZLIZdAEdfen21FI21xt2LDg9chQ7gc5Lpy4nkjWKPDgmQMnH0KJ8JQQzrd3zrEN16xzjiVdHHvRmi1RU8BtgYg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/context": "^1.4.0",
         "classnames": "^2.2.5",
         "rc-resize-observer": "^1.1.0",
-        "rc-util": "^5.36.0",
+        "rc-util": "^5.37.0",
         "rc-virtual-list": "^3.11.1"
       },
       "engines": {
@@ -5992,9 +6008,9 @@
       }
     },
     "node_modules/rc-tabs": {
-      "version": "12.12.1",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.12.1.tgz",
-      "integrity": "sha512-e10VBjEkECdPl4XZSs9to81SE+mgclBTM7J8/LMsFqmJoi05Tci91bRnmeeDtrcOCx2PuZdJv57XUlC4d8PEIw==",
+      "version": "12.13.1",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.13.1.tgz",
+      "integrity": "sha512-83u3l2QkO0UznCzdBLEk9WnNcT+imtmDmMT993sUUEOGnNQAmqOdev0XjeqrcvsAMe9CDpAWDFd7L/RZw+LVJQ==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
@@ -6013,13 +6029,13 @@
       }
     },
     "node_modules/rc-textarea": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.4.0.tgz",
-      "integrity": "sha512-CiqK+uyoJlnfufbC0kwfHJpfElhQacuDSNyNQ/xGnA/QMaJLDbgmqRT8QmX0T0KD/ws/hy6qqRaGJSsrRR5uiQ==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.5.2.tgz",
+      "integrity": "sha512-VVwKYtkp5whZVhP+llX8zM8TtI3dv+BDA0FUbmBMGLaW/tuBJ7Yh35yPabO63V+Bi68xv17eI4hy+/4p2G0gFg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.1",
-        "rc-input": "~1.2.1",
+        "rc-input": "~1.3.5",
         "rc-resize-observer": "^1.0.0",
         "rc-util": "^5.27.0"
       },
@@ -6043,9 +6059,9 @@
       }
     },
     "node_modules/rc-tree": {
-      "version": "5.7.12",
-      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.7.12.tgz",
-      "integrity": "sha512-LXA5nY2hG5koIAlHW5sgXgLpOMz+bFRbnZZ+cCg0tQs4Wv1AmY7EDi1SK7iFXhslYockbqUerQan82jljoaItg==",
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.8.2.tgz",
+      "integrity": "sha512-xH/fcgLHWTLmrSuNphU8XAqV7CdaOQgm4KywlLGNoTMhDAcNR3GVNP6cZzb0GrKmIZ9yae+QLot/cAgUdPRMzg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -6062,14 +6078,14 @@
       }
     },
     "node_modules/rc-tree-select": {
-      "version": "5.13.0",
-      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.13.0.tgz",
-      "integrity": "sha512-g01JU9EdE7j/9KfDKtmvFqJ7ZDNIYDzkpmAXllbTBFoRNhWJBjW1x/dCZLVG+IdZeIz8SKJkgZzCf1CUZrzV/Q==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.15.0.tgz",
+      "integrity": "sha512-YJHfdO6azFnR0/JuNBZLDptGE4/RGfVeHAafUIYcm2T3RBkL1O8aVqiHvwIyLzdK59ry0NLrByd+3TkfpRM+9Q==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
-        "rc-select": "~14.9.0",
-        "rc-tree": "~5.7.0",
+        "rc-select": "~14.10.0",
+        "rc-tree": "~5.8.1",
         "rc-util": "^5.16.1"
       },
       "peerDependencies": {
@@ -6105,9 +6121,9 @@
       }
     },
     "node_modules/rc-virtual-list": {
-      "version": "3.11.2",
-      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.2.tgz",
-      "integrity": "sha512-MTFLL2LOHr3+/+r+WjTIs6j8XmJE6EqdOsJvCH8SWig7qyik3aljCEImUtw5tdWR0tQhXUfbv7P7nZaLY91XPg==",
+      "version": "3.11.3",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.3.tgz",
+      "integrity": "sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==",
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "classnames": "^2.2.6",
@@ -6632,9 +6648,9 @@
       }
     },
     "node_modules/scroll-into-view-if-needed": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.0.10.tgz",
-      "integrity": "sha512-t44QCeDKAPf1mtQH3fYpWz8IM/DyvHLjs8wUvvwMYxk5moOqCzrMSxK6HQVD0QVmVjXFavoFIPRVrMuJPKAvtg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
       "dependencies": {
         "compute-scroll-into-view": "^3.0.2"
       }
@@ -6905,11 +6921,14 @@
     },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmmirror.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true,
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/strip-literal": {
@@ -7529,9 +7548,9 @@
       }
     },
     "node_modules/unplugin-icons": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.17.1.tgz",
-      "integrity": "sha512-KsWejBPCHokYCNDQUzGu6R3E3XDYH/YpewgQwrVBXgpl1iR0RdW1NEGNdjlbuapwVnZXVgA5eiDTfNaQCawSdg==",
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.17.3.tgz",
+      "integrity": "sha512-uvopA4I6QYWYpwAyRvG/4NNvR1Cd4GnF/mtOkybgP2YPkHjRX02l/ALm20VUla31Jt9eZHxHyODtNf/Upx5uaw==",
       "dev": true,
       "dependencies": {
         "@antfu/install-pkg": "^0.1.1",
diff --git a/package.json b/package.json
index 7c2f314..2215c9a 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "antd": "^5.10.3",
+    "antd": "^5.11.0",
     "axios": "^1.6.0",
     "jwt-decode": "^4.0.0",
     "localforage": "^1.10.0",
@@ -30,15 +30,15 @@
   "devDependencies": {
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@types/jsdom": "^21.1.4",
-    "@types/lodash": "^4.14.200",
-    "@types/node": "^20.8.10",
-    "@types/react": "^18.2.34",
-    "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@types/jsdom": "^21.1.5",
+    "@types/lodash": "^4.14.201",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react": "^4.1.1",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard-with-typescript": "^39.1.1",
     "eslint-plugin-import": "^2.29.0",
@@ -52,7 +52,7 @@
     "stylelint-config-prettier": "^9.0.5",
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.16.7",
-    "unplugin-icons": "^0.17.1",
+    "unplugin-icons": "^0.17.3",
     "vite": "^4.5.0"
   }
 }

From 051f581adb7a1152ab2923df1e64f0e3908b1e2e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 8 Nov 2023 14:15:03 +0800
Subject: [PATCH 067/307] Fix undefined bug

---
 src/services/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/index.tsx b/src/services/index.tsx
index d53e666..9566b30 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -22,7 +22,7 @@ service.defaults.paramsSerializer = (params: Record<string, string>) => {
             return Object.prototype.hasOwnProperty.call(params, it)
         })
         .reduce((pre, curr) => {
-            return params[curr] !== null
+            return params[curr] !== null && params[curr] !== undefined
                 ? (pre !== '' ? pre + '&' : '') + curr + '=' + encodeURIComponent(params[curr])
                 : pre
         }, '')

From 9459461fe69383fe45adac57c564a8ef870028d5 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 8 Nov 2023 14:31:22 +0800
Subject: [PATCH 068/307] Optimize sort and filter in log page

---
 src/ant-design.d.ts      |   9 ++--
 src/global.d.ts          |   8 +--
 src/pages/system/Log.tsx | 112 +++++++++++++++++++++++++++------------
 3 files changed, 90 insertions(+), 39 deletions(-)

diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts
index e9d563c..25931c6 100644
--- a/src/ant-design.d.ts
+++ b/src/ant-design.d.ts
@@ -1,14 +1,17 @@
 import * as React from 'react'
 import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
 import { TablePaginationConfig } from 'antd/lib'
-import { FilterValue } from 'antd/es/table/interface'
+import { ColumnsType, FilterValue, SorterResult, SortOrder } from 'antd/es/table/interface'
 
 declare global {
     type IconComponent =
         | React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>
         | React.ForwardRefExoticComponent<CustomIconComponentProps>
 
-    type PaginationConfig = TablePaginationConfig
+    type _TablePaginationConfig = TablePaginationConfig
 
-    type FilterVal = FilterValue
+    type _ColumnsType<T> = ColumnsType<T>
+    type _FilterValue = FilterValue
+    type _SorterResult<T> = SorterResult<T>
+    type _SortOrder = SortOrder
 }
diff --git a/src/global.d.ts b/src/global.d.ts
index 47e0779..e7171ea 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -157,12 +157,14 @@ interface PageVo<T> {
 interface PageParam {
     currentPage?: number
     pageSize?: number
+    sortField?: string
+    sortOrder?: string
 }
 
 interface TableParams {
-    pagination?: PaginationConfig
-    sortField?: string
-    sortOrder?: string
+    pagination?: _TablePaginationConfig
+    sortField?: React.Key | readonly React.Key[]
+    sortOrder?: _SortOrder
     filters?: Record<string, FilterVal | null>
 }
 
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 24d6056..c311814 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -1,6 +1,4 @@
 import React, { useState } from 'react'
-import { ColumnsType, FilterValue, SorterResult } from 'antd/es/table/interface'
-import { TablePaginationConfig } from 'antd/lib'
 import FitFullScreen from '@/components/common/FitFullScreen.tsx'
 import Card from '@/components/common/Card'
 import { r_getSysLog } from '@/services/system.tsx'
@@ -20,7 +18,7 @@ const Log: React.FC = () => {
         }
     })
 
-    const dataColumns: ColumnsType<SysLogGetVo> = [
+    const dataColumns: _ColumnsType<SysLogGetVo> = [
         {
             title: '类型',
             dataIndex: 'logType',
@@ -30,7 +28,11 @@ const Log: React.FC = () => {
                 ) : (
                     <AntdTag>{value}</AntdTag>
                 ),
-            align: 'center'
+            align: 'center',
+            filters: [
+                { text: 'Info', value: 'INFO' },
+                { text: 'Error', value: 'ERROR' }
+            ]
         },
         {
             title: '操作者',
@@ -43,59 +45,93 @@ const Log: React.FC = () => {
                     <AntdTag>Anonymous</AntdTag>
                 )
         },
-        {
-            title: '操作时间',
-            dataIndex: 'operateTime',
-            render: (value: string) => getLocalTime(value),
-            align: 'center'
-        },
         {
             title: '请求方式',
             dataIndex: 'requestMethod',
-            align: 'center'
+            align: 'center',
+            filters: [
+                { text: 'GET', value: 'GET' },
+                { text: 'POST', value: 'POST' },
+                { text: 'PUT', value: 'PUT' },
+                { text: 'PATCH', value: 'PATCH' },
+                { text: 'DELETE', value: 'DELETE' },
+                { text: 'HEAD', value: 'HEAD' },
+                { text: 'OPTIONS', value: 'OPTIONS' }
+            ]
         },
         {
             title: '请求 Url',
             render: (_value, record) =>
                 `${record.requestServerAddress}${record.requestUri}${
                     record.requestParams ? `?${record.requestParams}` : ''
-                }`
+                }`,
+            onCell: () => ({
+                style: {
+                    wordBreak: 'break-word'
+                }
+            })
         },
         {
             title: '请求 IP',
             dataIndex: 'requestIp',
             align: 'center'
         },
+        {
+            title: '开始时间',
+            dataIndex: 'startTime',
+            render: (value: string) => getLocalTime(value),
+            align: 'center',
+            sorter: true
+        },
+        {
+            title: '执行时间',
+            dataIndex: 'executeTime',
+            render: (value, record) => (
+                <AntdTooltip
+                    title={`${getLocalTime(record.startTime)} ~ ${getLocalTime(record.endTime)}`}
+                >
+                    {`${value}ms`}
+                </AntdTooltip>
+            ),
+            align: 'center',
+            sorter: true
+        },
         {
             title: '异常',
             dataIndex: 'exception',
             render: (value: boolean, record) => (value ? record.exceptionInfo : '无'),
             align: 'center'
         },
-        {
-            title: '执行时间',
-            dataIndex: 'executeTime',
-            render: (value, record) => (
-                <AntdTooltip
-                    title={`${getLocalTime(record.startTime)} - ${getLocalTime(record.endTime)}`}
-                >
-                    {`${value}ms`}
-                </AntdTooltip>
-            ),
-            align: 'center'
-        },
         {
             title: '用户代理',
-            dataIndex: 'userAgent'
+            dataIndex: 'userAgent',
+            onCell: () => ({
+                style: {
+                    wordBreak: 'break-word'
+                }
+            })
         }
     ]
 
     const handleOnTableChange = (
-        pagination: TablePaginationConfig,
-        filters: Record<string, FilterValue | null>,
-        sorter: SorterResult<SysLogGetVo> | SorterResult<SysLogGetVo>[]
+        pagination: _TablePaginationConfig,
+        filters: Record<string, _FilterValue | null>,
+        sorter: _SorterResult<SysLogGetVo> | _SorterResult<SysLogGetVo>[]
     ) => {
-        setTableParams({ pagination, filters, ...sorter })
+        if (Array.isArray(sorter)) {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.map((value) => value.field).join(',')
+            })
+        } else {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.field,
+                sortOrder: sorter.order
+            })
+        }
 
         if (pagination.pageSize !== tableParams.pagination?.pageSize) {
             setLogData([])
@@ -107,10 +143,20 @@ const Log: React.FC = () => {
             return
         }
 
-        void r_getSysLog({
-            currentPage: tableParams.pagination?.current,
-            pageSize: tableParams.pagination?.pageSize
-        })
+        void r_getSysLog(
+            tableParams.sortField && tableParams.sortOrder
+                ? {
+                      currentPage: tableParams.pagination?.current,
+                      pageSize: tableParams.pagination?.pageSize,
+                      sortField: tableParams.sortField as string,
+                      sortOrder: tableParams.sortOrder,
+                      ...tableParams.filters
+                  }
+                : {
+                      currentPage: tableParams.pagination?.current,
+                      pageSize: tableParams.pagination?.pageSize
+                  }
+        )
             .then((res) => {
                 const data = res.data
                 if (data.code === DATABASE_SELECT_SUCCESS) {

From dd77699c82e0ec283d7ff3df6619d60358d5b09c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 8 Nov 2023 18:17:26 +0800
Subject: [PATCH 069/307] Optimize log page

---
 .../css/components/common/flex-box.scss       |  5 ++
 src/components/common/FlexBox.tsx             | 24 +++++++
 src/pages/system/Log.tsx                      | 62 +++++++++++++++----
 3 files changed, 78 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/css/components/common/flex-box.scss
 create mode 100644 src/components/common/FlexBox.tsx

diff --git a/src/assets/css/components/common/flex-box.scss b/src/assets/css/components/common/flex-box.scss
new file mode 100644
index 0000000..0a9f239
--- /dev/null
+++ b/src/assets/css/components/common/flex-box.scss
@@ -0,0 +1,5 @@
+.flex-box {
+  * {
+    flex: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/components/common/FlexBox.tsx b/src/components/common/FlexBox.tsx
new file mode 100644
index 0000000..e9b3271
--- /dev/null
+++ b/src/components/common/FlexBox.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import '@/assets/css/components/common/flex-box.scss'
+
+interface FlexBoxProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    direction?: 'horizontal' | 'vertical'
+    gap?: number
+}
+
+const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>((props, ref) => {
+    const { className, direction, gap, style, ..._props } = props
+    return (
+        <div
+            className={`flex-box ${
+                direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
+            }${className ? ` ${className}` : ''}`}
+            style={{ gap, ...style }}
+            {..._props}
+            ref={ref}
+        />
+    )
+})
+
+export default FlexBox
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index c311814..c41f5b6 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -2,12 +2,14 @@ import React, { useState } from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen.tsx'
 import Card from '@/components/common/Card'
 import { r_getSysLog } from '@/services/system.tsx'
-import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import { COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
 import HideScrollbar from '@/components/common/HideScrollbar.tsx'
 import { getLocalTime } from '@/utils/common.ts'
+import useMessage from 'antd/es/message/useMessage'
+import FlexBox from '@/components/common/FlexBox.tsx'
 
 const Log: React.FC = () => {
-    const tableCardRef = useRef<HTMLDivElement>(null)
+    const [message, contextHolder] = useMessage()
     const [logData, setLogData] = useState<SysLogGetVo[]>([])
     const [loading, setLoading] = useState(false)
     const [tableParams, setTableParams] = useState<TableParams>({
@@ -143,6 +145,8 @@ const Log: React.FC = () => {
             return
         }
 
+        setLoading(true)
+
         void r_getSysLog(
             tableParams.sortField && tableParams.sortOrder
                 ? {
@@ -154,7 +158,8 @@ const Log: React.FC = () => {
                   }
                 : {
                       currentPage: tableParams.pagination?.current,
-                      pageSize: tableParams.pagination?.pageSize
+                      pageSize: tableParams.pagination?.pageSize,
+                      ...tableParams.filters
                   }
         )
             .then((res) => {
@@ -169,6 +174,10 @@ const Log: React.FC = () => {
                                 total: data.data.total
                             }
                         })
+                } else {
+                    void message.error({
+                        content: '获取失败，请稍后重试'
+                    })
                 }
             })
             .finally(() => {
@@ -189,21 +198,48 @@ const Log: React.FC = () => {
     return (
         <>
             <FitFullScreen>
+                {contextHolder}
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={500}
                 >
-                    <Card ref={tableCardRef}>
-                        <AntdTable
-                            dataSource={logData}
-                            columns={dataColumns}
-                            rowKey={(record) => record.id}
-                            pagination={tableParams.pagination}
-                            loading={loading}
-                            onChange={handleOnTableChange}
-                        />
-                    </Card>
+                    <FlexBox gap={20}>
+                        <FlexBox direction={'horizontal'}>
+                            <Card style={{ overflow: 'inherit' }}>
+                                <AntdInput
+                                    addonBefore={
+                                        <span
+                                            style={{
+                                                fontSize: '0.9em',
+                                                color: COLOR_FONT_SECONDARY
+                                            }}
+                                        >
+                                            请求 Url
+                                        </span>
+                                    }
+                                    suffix={
+                                        <AntdTooltip title={'正则表达式'}>
+                                            <AntdCheckbox>.*</AntdCheckbox>
+                                        </AntdTooltip>
+                                    }
+                                />
+                            </Card>
+                            <Card style={{ overflow: 'inherit', flex: 'auto' }}>
+                                <AntdDatePicker.RangePicker showTime />
+                            </Card>
+                        </FlexBox>
+                        <Card>
+                            <AntdTable
+                                dataSource={logData}
+                                columns={dataColumns}
+                                rowKey={(record) => record.id}
+                                pagination={tableParams.pagination}
+                                loading={loading}
+                                onChange={handleOnTableChange}
+                            />
+                        </Card>
+                    </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>
         </>

From 6b96e7b055e7a3e33de6ca7f1892be70afa0f5b3 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 9 Nov 2023 11:21:42 +0800
Subject: [PATCH 070/307] Add dependencies dayjs

---
 package-lock.json | 1 +
 package.json      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index cd2e4a0..b080868 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@ant-design/icons": "^5.2.6",
         "antd": "^5.11.0",
         "axios": "^1.6.0",
+        "dayjs": "^1.11.10",
         "jwt-decode": "^4.0.0",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
diff --git a/package.json b/package.json
index 2215c9a..4e68f32 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@ant-design/icons": "^5.2.6",
     "antd": "^5.11.0",
     "axios": "^1.6.0",
+    "dayjs": "^1.11.10",
     "jwt-decode": "^4.0.0",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",

From 13c00b963d534ce4565df3b03031a29b5483efc2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 9 Nov 2023 15:26:04 +0800
Subject: [PATCH 071/307] Update dependencies

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b080868..d1f47d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
         "antd": "^5.11.0",
-        "axios": "^1.6.0",
+        "axios": "^1.6.1",
         "dayjs": "^1.11.10",
         "jwt-decode": "^4.0.0",
         "localforage": "^1.10.0",
@@ -2297,9 +2297,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz",
-      "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
+      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
diff --git a/package.json b/package.json
index 4e68f32..1652e04 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "antd": "^5.11.0",
-    "axios": "^1.6.0",
+    "axios": "^1.6.1",
     "dayjs": "^1.11.10",
     "jwt-decode": "^4.0.0",
     "localforage": "^1.10.0",

From cece8b2a8347bcd7489404ed7da38ed3da84ae67 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 9 Nov 2023 15:26:33 +0800
Subject: [PATCH 072/307] Finish log page

---
 src/ant-design.d.ts                           |   2 +
 .../css/components/common/flex-box.scss       |   2 +-
 src/global.d.ts                               |   9 +-
 src/pages/system/Log.tsx                      | 150 ++++++++++++++----
 src/services/system.tsx                       |   2 +-
 5 files changed, 134 insertions(+), 31 deletions(-)

diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts
index 25931c6..f9b7f55 100644
--- a/src/ant-design.d.ts
+++ b/src/ant-design.d.ts
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
 import { TablePaginationConfig } from 'antd/lib'
 import { ColumnsType, FilterValue, SorterResult, SortOrder } from 'antd/es/table/interface'
+import { CheckboxChangeEvent } from 'antd/es/checkbox'
 
 declare global {
     type IconComponent =
@@ -14,4 +15,5 @@ declare global {
     type _FilterValue = FilterValue
     type _SorterResult<T> = SorterResult<T>
     type _SortOrder = SortOrder
+    type _CheckboxChangeEvent = CheckboxChangeEvent
 }
diff --git a/src/assets/css/components/common/flex-box.scss b/src/assets/css/components/common/flex-box.scss
index 0a9f239..2926ffc 100644
--- a/src/assets/css/components/common/flex-box.scss
+++ b/src/assets/css/components/common/flex-box.scss
@@ -1,5 +1,5 @@
 .flex-box {
-  * {
+  > * {
     flex: 1;
   }
 }
\ No newline at end of file
diff --git a/src/global.d.ts b/src/global.d.ts
index e7171ea..91657ea 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -161,11 +161,18 @@ interface PageParam {
     sortOrder?: string
 }
 
+interface GetSysLogParams extends PageParam {
+    searchRequestUrl?: string
+    searchRegex?: boolean
+    searchStartTime?: string
+    searchEndTime?: string
+}
+
 interface TableParams {
     pagination?: _TablePaginationConfig
     sortField?: React.Key | readonly React.Key[]
     sortOrder?: _SortOrder
-    filters?: Record<string, FilterVal | null>
+    filters?: Record<string, _FilterValue | null>
 }
 
 interface SysLogGetVo {
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index c41f5b6..caebc92 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -1,15 +1,17 @@
-import React, { useState } from 'react'
+import React from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen.tsx'
 import Card from '@/components/common/Card'
 import { r_getSysLog } from '@/services/system.tsx'
-import { COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import {
+    COLOR_ERROR_SECONDARY,
+    COLOR_FONT_SECONDARY,
+    DATABASE_SELECT_SUCCESS
+} from '@/constants/common.constants.ts'
 import HideScrollbar from '@/components/common/HideScrollbar.tsx'
 import { getLocalTime } from '@/utils/common.ts'
-import useMessage from 'antd/es/message/useMessage'
-import FlexBox from '@/components/common/FlexBox.tsx'
+import FlexBox from '@/components/common/FlexBox'
 
 const Log: React.FC = () => {
-    const [message, contextHolder] = useMessage()
     const [logData, setLogData] = useState<SysLogGetVo[]>([])
     const [loading, setLoading] = useState(false)
     const [tableParams, setTableParams] = useState<TableParams>({
@@ -19,6 +21,10 @@ const Log: React.FC = () => {
             position: ['bottomCenter']
         }
     })
+    const [searchRequestUrl, setSearchRequestUrl] = useState('')
+    const [useRegex, setUseRegex] = useState(false)
+    const [isRegexLegal, setIsRegexLegal] = useState(true)
+    const [timeRange, setTimeRange] = useState<[string, string]>()
 
     const dataColumns: _ColumnsType<SysLogGetVo> = [
         {
@@ -102,7 +108,12 @@ const Log: React.FC = () => {
             title: '异常',
             dataIndex: 'exception',
             render: (value: boolean, record) => (value ? record.exceptionInfo : '无'),
-            align: 'center'
+            align: 'center',
+            onCell: () => ({
+                style: {
+                    wordBreak: 'break-word'
+                }
+            })
         },
         {
             title: '用户代理',
@@ -140,28 +151,87 @@ const Log: React.FC = () => {
         }
     }
 
+    const handleOnSearchUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchRequestUrl(e.target.value)
+
+        if (useRegex) {
+            try {
+                RegExp(e.target.value)
+                setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]')))
+            } catch (e) {
+                setIsRegexLegal(false)
+            }
+        } else {
+            setIsRegexLegal(true)
+        }
+    }
+
+    const handleOnSearchUrlKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            getLog()
+        }
+    }
+
+    const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
+        setUseRegex(e.target.checked)
+        if (e.target.checked) {
+            try {
+                RegExp(searchRequestUrl)
+                setIsRegexLegal(
+                    !(searchRequestUrl.includes('{}') || searchRequestUrl.includes('[]'))
+                )
+            } catch (e) {
+                setIsRegexLegal(false)
+            }
+        } else {
+            setIsRegexLegal(true)
+        }
+    }
+
+    const handleOnDateRangeChange = (_dates: unknown, dateStrings: [string, string]) => {
+        if (dateStrings[0] && dateStrings[1]) {
+            setTimeRange([
+                new Date(dateStrings[0]).toISOString(),
+                new Date(dateStrings[1]).toISOString()
+            ])
+        } else {
+            setTimeRange(undefined)
+        }
+    }
+
+    const handleOnQueryBtnClick = () => {
+        getLog()
+    }
+
     const getLog = () => {
         if (loading) {
             return
         }
 
+        if (!isRegexLegal) {
+            void message.error({
+                content: '非法正则表达式'
+            })
+            return
+        }
+
         setLoading(true)
 
-        void r_getSysLog(
-            tableParams.sortField && tableParams.sortOrder
-                ? {
-                      currentPage: tableParams.pagination?.current,
-                      pageSize: tableParams.pagination?.pageSize,
-                      sortField: tableParams.sortField as string,
-                      sortOrder: tableParams.sortOrder,
-                      ...tableParams.filters
-                  }
-                : {
-                      currentPage: tableParams.pagination?.current,
-                      pageSize: tableParams.pagination?.pageSize,
-                      ...tableParams.filters
-                  }
-        )
+        void r_getSysLog({
+            currentPage: tableParams.pagination?.current,
+            pageSize: tableParams.pagination?.pageSize,
+            sortField:
+                tableParams.sortField && tableParams.sortOrder
+                    ? (tableParams.sortField as string)
+                    : undefined,
+            sortOrder:
+                tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
+            searchRequestUrl: searchRequestUrl.trim().length ? searchRequestUrl : undefined,
+            searchRegex: useRegex ? useRegex : undefined,
+            searchStartTime: timeRange && timeRange[0],
+            searchEndTime: timeRange && timeRange[1],
+            ...tableParams.filters
+        })
             .then((res) => {
                 const data = res.data
                 if (data.code === DATABASE_SELECT_SUCCESS) {
@@ -198,14 +268,13 @@ const Log: React.FC = () => {
     return (
         <>
             <FitFullScreen>
-                {contextHolder}
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={500}
                 >
                     <FlexBox gap={20}>
-                        <FlexBox direction={'horizontal'}>
+                        <FlexBox direction={'horizontal'} gap={10}>
                             <Card style={{ overflow: 'inherit' }}>
                                 <AntdInput
                                     addonBefore={
@@ -219,14 +288,39 @@ const Log: React.FC = () => {
                                         </span>
                                     }
                                     suffix={
-                                        <AntdTooltip title={'正则表达式'}>
-                                            <AntdCheckbox>.*</AntdCheckbox>
-                                        </AntdTooltip>
+                                        <>
+                                            {!isRegexLegal ? (
+                                                <span style={{ color: COLOR_ERROR_SECONDARY }}>
+                                                    非法表达式
+                                                </span>
+                                            ) : undefined}
+                                            <AntdCheckbox
+                                                checked={useRegex}
+                                                onChange={handleOnUseRegexChange}
+                                            >
+                                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
+                                            </AntdCheckbox>
+                                        </>
                                     }
+                                    allowClear
+                                    value={searchRequestUrl}
+                                    onChange={handleOnSearchUrlChange}
+                                    onKeyDown={handleOnSearchUrlKeyDown}
+                                    status={isRegexLegal ? undefined : 'error'}
                                 />
                             </Card>
-                            <Card style={{ overflow: 'inherit', flex: 'auto' }}>
-                                <AntdDatePicker.RangePicker showTime />
+                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                                <AntdDatePicker.RangePicker
+                                    showTime
+                                    allowClear
+                                    changeOnBlur
+                                    onChange={handleOnDateRangeChange}
+                                />
+                            </Card>
+                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
+                                    查询
+                                </AntdButton>
                             </Card>
                         </FlexBox>
                         <Card>
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 23125c0..c5ff320 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,5 +1,5 @@
 import request from '@/services/index'
 import { URL_API_SYS_LOG } from '@/constants/urls.constants'
 
-export const r_getSysLog = (param: PageParam) =>
+export const r_getSysLog = (param: GetSysLogParams) =>
     request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })

From 66c88fec4822acd4fe07e0a92cce166d1d6e167f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 10 Nov 2023 11:57:55 +0800
Subject: [PATCH 073/307] Add role table

---
 src/ant-design.d.ts             |   2 +
 src/constants/urls.constants.ts |   1 +
 src/global.d.ts                 |  31 +++-
 src/main.tsx                    |   5 +-
 src/pages/system/Log.tsx        |  10 +-
 src/pages/system/Role.tsx       | 262 +++++++++++++++++++++++++++++++-
 src/services/system.tsx         |   5 +-
 src/utils/common.ts             |  13 ++
 8 files changed, 313 insertions(+), 16 deletions(-)

diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts
index f9b7f55..cc5ddae 100644
--- a/src/ant-design.d.ts
+++ b/src/ant-design.d.ts
@@ -3,6 +3,7 @@ import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
 import { TablePaginationConfig } from 'antd/lib'
 import { ColumnsType, FilterValue, SorterResult, SortOrder } from 'antd/es/table/interface'
 import { CheckboxChangeEvent } from 'antd/es/checkbox'
+import type { DataNode } from 'antd/es/tree'
 
 declare global {
     type IconComponent =
@@ -16,4 +17,5 @@ declare global {
     type _SorterResult<T> = SorterResult<T>
     type _SortOrder = SortOrder
     type _CheckboxChangeEvent = CheckboxChangeEvent
+    type _DataNode = DataNode
 }
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index d494efe..f0aa8fa 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -4,3 +4,4 @@ export const URL_API_LOGOUT = '/logout'
 export const URL_API_SYS_LOG = '/system/log'
 export const URL_API_USER_INFO = '/system/user/info'
 export const URL_API_USER_LIST = '/system/user'
+export const URL_API_SYS_ROLE = '/system/role'
diff --git a/src/global.d.ts b/src/global.d.ts
index 91657ea..aeeaa9e 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -111,6 +111,7 @@ interface MenuVo {
     url: string
     powerId: number
     parentId: number
+    moduleId: number
 }
 
 interface ElementVo {
@@ -161,13 +162,6 @@ interface PageParam {
     sortOrder?: string
 }
 
-interface GetSysLogParams extends PageParam {
-    searchRequestUrl?: string
-    searchRegex?: boolean
-    searchStartTime?: string
-    searchEndTime?: string
-}
-
 interface TableParams {
     pagination?: _TablePaginationConfig
     sortField?: React.Key | readonly React.Key[]
@@ -175,6 +169,13 @@ interface TableParams {
     filters?: Record<string, _FilterValue | null>
 }
 
+interface GetSysLogParams extends PageParam {
+    searchRequestUrl?: string
+    searchRegex?: boolean
+    searchStartTime?: string
+    searchEndTime?: string
+}
+
 interface SysLogGetVo {
     id: string
     logType: string
@@ -193,3 +194,19 @@ interface SysLogGetVo {
     userAgent: string
     operateUsername: string
 }
+
+interface GetRoleParams extends PageParam {
+    searchName?: string
+    searchRegex?: boolean
+}
+
+interface RoleWithPowerGetVo {
+    id: string
+    name: string
+    enable: string
+    modules: ModuleVo[]
+    menus: MenuVo[]
+    elements: ElementVo[]
+    operations: OperationVo[]
+    tree: _DataNode[]
+}
diff --git a/src/main.tsx b/src/main.tsx
index 1d2932f..53aeaaa 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -8,7 +8,10 @@ import { COLOR_MAIN } from '@/constants/common.constants'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-        <AntdConfigProvider theme={{ token: { colorPrimary: COLOR_MAIN } }} locale={zh_CN}>
+        <AntdConfigProvider
+            theme={{ token: { colorPrimary: COLOR_MAIN, colorBgContainer: 'transparent' } }}
+            locale={zh_CN}
+        >
             <App />
         </AntdConfigProvider>
     </React.StrictMode>
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index caebc92..71a722f 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
-import FitFullScreen from '@/components/common/FitFullScreen.tsx'
+import FitFullScreen from '@/components/common/FitFullScreen'
 import Card from '@/components/common/Card'
-import { r_getSysLog } from '@/services/system.tsx'
+import { r_getSysLog } from '@/services/system'
 import {
     COLOR_ERROR_SECONDARY,
     COLOR_FONT_SECONDARY,
     DATABASE_SELECT_SUCCESS
-} from '@/constants/common.constants.ts'
-import HideScrollbar from '@/components/common/HideScrollbar.tsx'
-import { getLocalTime } from '@/utils/common.ts'
+} from '@/constants/common.constants'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import { getLocalTime } from '@/utils/common'
 import FlexBox from '@/components/common/FlexBox'
 
 const Log: React.FC = () => {
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index eecd05b..05c1804 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -1,7 +1,265 @@
-import React from 'react'
+import React, { useState } from 'react'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
+import { r_getRole } from '@/services/system.tsx'
+import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
 
 const Role: React.FC = () => {
-    return <></>
+    const [roleData, setRoleData] = useState<RoleWithPowerGetVo[]>([])
+    const [loading, setLoading] = useState(false)
+    const [tableParams, setTableParams] = useState<TableParams>({
+        pagination: {
+            current: 1,
+            pageSize: 20,
+            position: ['bottomCenter']
+        }
+    })
+    const [searchName, setSearchName] = useState('')
+    const [useRegex, setUseRegex] = useState(false)
+    const [isRegexLegal, setIsRegexLegal] = useState(true)
+
+    const dataColumns: _ColumnsType<RoleWithPowerGetVo> = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+            width: '20%'
+        },
+        {
+            title: '权限',
+            dataIndex: 'tree',
+            render: (value: _DataNode[]) => <AntdTree treeData={value} />
+        },
+        {
+            title: '状态',
+            dataIndex: 'enable',
+            width: '0',
+            align: 'center',
+            render: (value) =>
+                value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>
+        }
+    ]
+
+    const handleOnTableChange = (
+        pagination: _TablePaginationConfig,
+        filters: Record<string, _FilterValue | null>,
+        sorter: _SorterResult<RoleWithPowerGetVo> | _SorterResult<RoleWithPowerGetVo>[]
+    ) => {
+        if (Array.isArray(sorter)) {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.map((value) => value.field).join(',')
+            })
+        } else {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.field,
+                sortOrder: sorter.order
+            })
+        }
+
+        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+            setRoleData([])
+        }
+    }
+
+    const handleOnSearchNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchName(e.target.value)
+
+        if (useRegex) {
+            try {
+                RegExp(e.target.value)
+                setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]')))
+            } catch (e) {
+                setIsRegexLegal(false)
+            }
+        } else {
+            setIsRegexLegal(true)
+        }
+    }
+
+    const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            getRole()
+        }
+    }
+
+    const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
+        setUseRegex(e.target.checked)
+        if (e.target.checked) {
+            try {
+                RegExp(searchName)
+                setIsRegexLegal(!(searchName.includes('{}') || searchName.includes('[]')))
+            } catch (e) {
+                setIsRegexLegal(false)
+            }
+        } else {
+            setIsRegexLegal(true)
+        }
+    }
+
+    const handleOnQueryBtnClick = () => {
+        getRole()
+    }
+
+    const getRole = () => {
+        if (loading) {
+            return
+        }
+
+        if (!isRegexLegal) {
+            void message.error({
+                content: '非法正则表达式'
+            })
+            return
+        }
+
+        setLoading(true)
+
+        void r_getRole({
+            currentPage: tableParams.pagination?.current,
+            pageSize: tableParams.pagination?.pageSize,
+            sortField:
+                tableParams.sortField && tableParams.sortOrder
+                    ? (tableParams.sortField as string)
+                    : undefined,
+            sortOrder:
+                tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
+            searchName: searchName.trim().length ? searchName : undefined,
+            searchRegex: useRegex ? useRegex : undefined,
+            ...tableParams.filters
+        })
+            .then((res) => {
+                const data = res.data
+                if (data.code === DATABASE_SELECT_SUCCESS) {
+                    const records = data.data?.records
+
+                    records?.map((value) => {
+                        const menuMap = new Map<number, _DataNode[]>()
+                        const elementMap = new Map<number, _DataNode[]>()
+                        const operationMap = new Map<number, _DataNode[]>()
+
+                        value.operations.forEach((operation) => {
+                            if (
+                                operationMap.has(operation.elementId) &&
+                                operationMap.get(operation.elementId) !== null
+                            ) {
+                                operationMap
+                                    .get(operation.elementId)
+                                    ?.push({ title: operation.name, key: operation.powerId })
+                            } else {
+                                operationMap.set(operation.elementId, [
+                                    { title: operation.name, key: operation.powerId }
+                                ])
+                            }
+                        })
+
+                        value.elements.forEach((element) => {
+                            if (
+                                elementMap.has(element.menuId) &&
+                                elementMap.get(element.menuId) !== null
+                            ) {
+                                elementMap.get(element.menuId)?.push({
+                                    title: element.name,
+                                    key: element.powerId,
+                                    children: operationMap.get(element.id)
+                                })
+                            } else {
+                                elementMap.set(element.menuId, [
+                                    {
+                                        title: element.name,
+                                        key: element.powerId,
+                                        children: operationMap.get(element.id)
+                                    }
+                                ])
+                            }
+                        })
+
+                        value.menus.forEach((menu) => {
+                            if (menuMap.has(menu.moduleId) && menuMap.get(menu.moduleId) !== null) {
+                                menuMap.get(menu.moduleId)?.push({
+                                    title: menu.name,
+                                    key: menu.powerId,
+                                    children: elementMap.get(menu.id)
+                                })
+                            } else {
+                                menuMap.set(menu.moduleId, [
+                                    {
+                                        title: menu.name,
+                                        key: menu.powerId,
+                                        children: elementMap.get(menu.id)
+                                    }
+                                ])
+                            }
+                        })
+
+                        value.tree = value.modules.map((module) => ({
+                            title: module.name,
+                            key: module.powerId,
+                            children: menuMap.get(module.id)
+                        }))
+
+                        return value
+                    })
+
+                    records && setRoleData(records)
+                    data.data &&
+                        setTableParams({
+                            ...tableParams,
+                            pagination: {
+                                ...tableParams.pagination,
+                                total: data.data.total
+                            }
+                        })
+                } else {
+                    void message.error({
+                        content: '获取失败，请稍后重试'
+                    })
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+            })
+    }
+
+    useEffect(() => {
+        getRole()
+    }, [
+        JSON.stringify(tableParams.filters),
+        JSON.stringify(tableParams.sortField),
+        JSON.stringify(tableParams.sortOrder),
+        JSON.stringify(tableParams.pagination?.pageSize),
+        JSON.stringify(tableParams.pagination?.current)
+    ])
+
+    return (
+        <>
+            <FitFullScreen>
+                <HideScrollbar
+                    style={{ padding: 30 }}
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={500}
+                >
+                    <FlexBox gap={20}>
+                        <FlexBox direction={'horizontal'} gap={10}></FlexBox>
+                        <Card>
+                            <AntdTable
+                                dataSource={roleData}
+                                columns={dataColumns}
+                                rowKey={(record) => record.id}
+                                pagination={tableParams.pagination}
+                                loading={loading}
+                                onChange={handleOnTableChange}
+                            />
+                        </Card>
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullScreen>
+        </>
+    )
 }
 
 export default Role
diff --git a/src/services/system.tsx b/src/services/system.tsx
index c5ff320..ae3fa72 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,5 +1,8 @@
 import request from '@/services/index'
-import { URL_API_SYS_LOG } from '@/constants/urls.constants'
+import { URL_API_SYS_LOG, URL_API_SYS_ROLE } from '@/constants/urls.constants'
 
 export const r_getSysLog = (param: GetSysLogParams) =>
     request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })
+
+export const r_getRole = (parm: GetRoleParams) =>
+    request.get<PageVo<RoleWithPowerGetVo>>(URL_API_SYS_ROLE, { ...parm })
diff --git a/src/utils/common.ts b/src/utils/common.ts
index ffe9f7e..84f4e30 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -144,3 +144,16 @@ export const getRedirectUrl = (path: string, redirectUrl: string): string => {
 export const getLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
     return moment.utc(utcTime).local().format(format)
 }
+
+export const floorNumber = (num: number, digits: number) => {
+    if (digits > 0) {
+        return Math.floor(num / Math.pow(10, digits - 1)) * Math.pow(10, digits - 1)
+    } else {
+        const regExpMatchArray = num.toString().match(new RegExp('^\\d\\.\\d{' + -digits + '}'))
+        if (regExpMatchArray !== null) {
+            return parseFloat(regExpMatchArray[0]).toFixed(-digits)
+        } else {
+            return num
+        }
+    }
+}

From 3e407fc9c8fd34ec638172aa9b09d34f34195f53 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 12 Nov 2023 22:54:03 +0800
Subject: [PATCH 074/307] Add change role status (not finish)

---
 src/assets/svg/plus.svg   |  1 +
 src/global.d.ts           | 11 +++--
 src/pages/system/Log.tsx  |  2 +-
 src/pages/system/Role.tsx | 97 +++++++++++++++++++++++++++++++++++++--
 src/services/index.tsx    |  3 ++
 src/services/system.tsx   |  9 ++--
 6 files changed, 112 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/svg/plus.svg

diff --git a/src/assets/svg/plus.svg b/src/assets/svg/plus.svg
new file mode 100644
index 0000000..c01a1b5
--- /dev/null
+++ b/src/assets/svg/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M853.333333 554.666667 554.666667 554.666667l0 298.666667c0 23.466667-19.2 42.666667-42.666667 42.666667s-42.666667-19.2-42.666667-42.666667L469.333333 554.666667 170.666667 554.666667c-23.466667 0-42.666667-19.2-42.666667-42.666667 0-23.466667 19.2-42.666667 42.666667-42.666667l298.666667 0L469.333333 170.666667c0-23.466667 19.2-42.666667 42.666667-42.666667s42.666667 19.2 42.666667 42.666667l0 298.666667 298.666667 0c23.466667 0 42.666667 19.2 42.666667 42.666667C896 535.466667 876.8 554.666667 853.333333 554.666667z" /></svg>
\ No newline at end of file
diff --git a/src/global.d.ts b/src/global.d.ts
index aeeaa9e..ee1c048 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -162,14 +162,14 @@ interface PageParam {
     sortOrder?: string
 }
 
-interface TableParams {
+interface TableParam {
     pagination?: _TablePaginationConfig
     sortField?: React.Key | readonly React.Key[]
     sortOrder?: _SortOrder
     filters?: Record<string, _FilterValue | null>
 }
 
-interface GetSysLogParams extends PageParam {
+interface GetSysLogParam extends PageParam {
     searchRequestUrl?: string
     searchRegex?: boolean
     searchStartTime?: string
@@ -195,7 +195,7 @@ interface SysLogGetVo {
     operateUsername: string
 }
 
-interface GetRoleParams extends PageParam {
+interface GetRoleParam extends PageParam {
     searchName?: string
     searchRegex?: boolean
 }
@@ -210,3 +210,8 @@ interface RoleWithPowerGetVo {
     operations: OperationVo[]
     tree: _DataNode[]
 }
+
+interface RoleChangeStatusParam {
+    id: string
+    enable: boolean
+}
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 71a722f..0be913f 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -14,7 +14,7 @@ import FlexBox from '@/components/common/FlexBox'
 const Log: React.FC = () => {
     const [logData, setLogData] = useState<SysLogGetVo[]>([])
     const [loading, setLoading] = useState(false)
-    const [tableParams, setTableParams] = useState<TableParams>({
+    const [tableParams, setTableParams] = useState<TableParam>({
         pagination: {
             current: 1,
             pageSize: 20,
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index 05c1804..a7be892 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -3,13 +3,19 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
-import { r_getRole } from '@/services/system.tsx'
-import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import { r_changeRoleStatus, r_getRole } from '@/services/system.tsx'
+import {
+    COLOR_ERROR_SECONDARY,
+    COLOR_FONT_SECONDARY,
+    COLOR_PRODUCTION,
+    DATABASE_SELECT_SUCCESS
+} from '@/constants/common.constants.ts'
+import Icon from '@ant-design/icons'
 
 const Role: React.FC = () => {
     const [roleData, setRoleData] = useState<RoleWithPowerGetVo[]>([])
     const [loading, setLoading] = useState(false)
-    const [tableParams, setTableParams] = useState<TableParams>({
+    const [tableParams, setTableParams] = useState<TableParam>({
         pagination: {
             current: 1,
             pageSize: 20,
@@ -38,6 +44,35 @@ const Role: React.FC = () => {
             align: 'center',
             render: (value) =>
                 value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>
+        },
+        {
+            title: '操作',
+            dataIndex: 'enable',
+            width: '15em',
+            align: 'center',
+            render: (value, record) => (
+                <>
+                    <AntdSpace size={'middle'}>
+                        {value ? (
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnChangStatusBtnClick(record.id, false)}
+                            >
+                                禁用
+                            </a>
+                        ) : (
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnChangStatusBtnClick(record.id, true)}
+                            >
+                                启用
+                            </a>
+                        )}
+                        <a style={{ color: COLOR_PRODUCTION }}>编辑</a>
+                        <a style={{ color: COLOR_PRODUCTION }}>删除</a>
+                    </AntdSpace>
+                </>
+            )
         }
     ]
 
@@ -105,6 +140,12 @@ const Role: React.FC = () => {
         getRole()
     }
 
+    const handleOnChangStatusBtnClick = (id: string, newStatus: boolean) => {
+        return () => {
+            void r_changeRoleStatus({ id, enable: newStatus })
+        }
+    }
+
     const getRole = () => {
         if (loading) {
             return
@@ -244,7 +285,55 @@ const Role: React.FC = () => {
                     autoHideWaitingTime={500}
                 >
                     <FlexBox gap={20}>
-                        <FlexBox direction={'horizontal'} gap={10}></FlexBox>
+                        <FlexBox direction={'horizontal'} gap={10}>
+                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                                <AntdButton type={'primary'} style={{ padding: '4px 8px' }}>
+                                    <Icon
+                                        component={IconFatwebPlus}
+                                        style={{ fontSize: '1.5em' }}
+                                    />
+                                </AntdButton>
+                            </Card>
+                            <Card style={{ overflow: 'inherit' }}>
+                                <AntdInput
+                                    addonBefore={
+                                        <span
+                                            style={{
+                                                fontSize: '0.9em',
+                                                color: COLOR_FONT_SECONDARY
+                                            }}
+                                        >
+                                            名称
+                                        </span>
+                                    }
+                                    suffix={
+                                        <>
+                                            {!isRegexLegal ? (
+                                                <span style={{ color: COLOR_ERROR_SECONDARY }}>
+                                                    非法表达式
+                                                </span>
+                                            ) : undefined}
+                                            <AntdCheckbox
+                                                checked={useRegex}
+                                                onChange={handleOnUseRegexChange}
+                                            >
+                                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
+                                            </AntdCheckbox>
+                                        </>
+                                    }
+                                    allowClear
+                                    value={searchName}
+                                    onChange={handleOnSearchNameChange}
+                                    onKeyDown={handleOnSearchNameKeyDown}
+                                    status={isRegexLegal ? undefined : 'error'}
+                                />
+                            </Card>
+                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
+                                    查询
+                                </AntdButton>
+                            </Card>
+                        </FlexBox>
                         <Card>
                             <AntdTable
                                 dataSource={roleData}
diff --git a/src/services/index.tsx b/src/services/index.tsx
index 9566b30..aa90477 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -118,6 +118,9 @@ const request = {
     async put<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
         return await request.request('PUT', url, { data })
     },
+    async patch<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
+        return await request.request('PATCH', url, { data })
+    },
     async delete<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
         return await request.request('DELETE', url, { params: data })
     },
diff --git a/src/services/system.tsx b/src/services/system.tsx
index ae3fa72..68bdc2e 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,8 +1,11 @@
 import request from '@/services/index'
 import { URL_API_SYS_LOG, URL_API_SYS_ROLE } from '@/constants/urls.constants'
 
-export const r_getSysLog = (param: GetSysLogParams) =>
+export const r_getSysLog = (param: GetSysLogParam) =>
     request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })
 
-export const r_getRole = (parm: GetRoleParams) =>
-    request.get<PageVo<RoleWithPowerGetVo>>(URL_API_SYS_ROLE, { ...parm })
+export const r_getRole = (param: GetRoleParam) =>
+    request.get<PageVo<RoleWithPowerGetVo>>(URL_API_SYS_ROLE, { ...param })
+
+export const r_changeRoleStatus = (param: RoleChangeStatusParam) =>
+    request.patch<never>(URL_API_SYS_ROLE, { ...param })

From e6b39a46dee10ccb86709ada897196a4396c303f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 13 Nov 2023 17:53:42 +0800
Subject: [PATCH 075/307] Finish role add and edit

---
 src/ant-design.d.ts               |   6 +-
 src/assets/svg/refresh.svg        |   1 +
 src/constants/common.constants.ts |   2 +
 src/constants/urls.constants.ts   |   5 +-
 src/global.d.ts                   |  18 +-
 src/pages/system/Role.tsx         | 349 +++++++++++++++++++++++-------
 src/services/system.tsx           |  12 +-
 src/services/user.tsx             |   6 +-
 src/utils/common.ts               | 113 ++++++++++
 9 files changed, 423 insertions(+), 89 deletions(-)
 create mode 100644 src/assets/svg/refresh.svg

diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts
index cc5ddae..3de2a01 100644
--- a/src/ant-design.d.ts
+++ b/src/ant-design.d.ts
@@ -17,5 +17,9 @@ declare global {
     type _SorterResult<T> = SorterResult<T>
     type _SortOrder = SortOrder
     type _CheckboxChangeEvent = CheckboxChangeEvent
-    type _DataNode = DataNode
+    interface _DataNode extends DataNode {
+        value: React.Key
+        fullTitle: string
+        children?: _DataNode[]
+    }
 }
diff --git a/src/assets/svg/refresh.svg b/src/assets/svg/refresh.svg
new file mode 100644
index 0000000..5f15aae
--- /dev/null
+++ b/src/assets/svg/refresh.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M955.136 551.488a64 64 0 0 1-13.888 69.76l-128 128A63.829333 63.829333 0 0 1 768 768a63.829333 63.829333 0 0 1-45.248-18.752l-128-128a64.106667 64.106667 0 0 1-13.888-69.76A64.042667 64.042667 0 0 1 640 512h64c0-141.376-114.624-256-256-256S192 370.624 192 512s114.624 256 256 256c33.344 0 64.896-6.784 94.144-18.368l96.512 95.36A381.802667 381.802667 0 0 1 448 896c-212.032 0-384-171.968-384-384S235.968 128 448 128s384 171.968 384 384h64c25.856 0 49.28 15.616 59.136 39.488z" /></svg>
\ No newline at end of file
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index fef7b4d..9d8d803 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -50,3 +50,5 @@ export const DATABASE_UPDATE_SUCCESS = 20020
 export const DATABASE_UPDATE_FILED = 20025
 export const DATABASE_DELETE_SUCCESS = 20030
 export const DATABASE_DELETE_FILED = 20035
+export const DATABASE_EXECUTE_ERROR = 20040
+export const DATABASE_DUPLICATE_KEY = 20045
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index f0aa8fa..0283a42 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -2,6 +2,7 @@ export const URL_API_LOGIN = '/login'
 export const URL_API_TOKEN = '/token'
 export const URL_API_LOGOUT = '/logout'
 export const URL_API_SYS_LOG = '/system/log'
-export const URL_API_USER_INFO = '/system/user/info'
-export const URL_API_USER_LIST = '/system/user'
+export const URL_API_SYS_USER_INFO = '/system/user/info'
+export const URL_API_SYS_USER = '/system/user'
 export const URL_API_SYS_ROLE = '/system/role'
+export const URL_API_SYS_POWER = '/system/power'
diff --git a/src/global.d.ts b/src/global.d.ts
index ee1c048..99a99cb 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -169,7 +169,7 @@ interface TableParam {
     filters?: Record<string, _FilterValue | null>
 }
 
-interface GetSysLogParam extends PageParam {
+interface SysLogGetParam extends PageParam {
     searchRequestUrl?: string
     searchRegex?: boolean
     searchStartTime?: string
@@ -195,7 +195,7 @@ interface SysLogGetVo {
     operateUsername: string
 }
 
-interface GetRoleParam extends PageParam {
+interface RoleGetParam extends PageParam {
     searchName?: string
     searchRegex?: boolean
 }
@@ -215,3 +215,17 @@ interface RoleChangeStatusParam {
     id: string
     enable: boolean
 }
+
+interface RoleAddEditParam {
+    id?: string
+    name: string
+    powerIds: number[]
+    enable: boolean
+}
+
+interface PowerSetVo {
+    moduleList: ModuleVo[]
+    menuList: MenuVo[]
+    elementList: ElementVo[]
+    operationList: OperationVo[]
+}
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index a7be892..a402c92 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -1,20 +1,33 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
-import { r_changeRoleStatus, r_getRole } from '@/services/system.tsx'
+import {
+    r_addRole,
+    r_changeRoleStatus,
+    r_getPower,
+    r_getRole,
+    r_updateRole
+} from '@/services/system.tsx'
 import {
     COLOR_ERROR_SECONDARY,
     COLOR_FONT_SECONDARY,
     COLOR_PRODUCTION,
-    DATABASE_SELECT_SUCCESS
+    DATABASE_DUPLICATE_KEY,
+    DATABASE_INSERT_SUCCESS,
+    DATABASE_SELECT_SUCCESS,
+    DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants.ts'
 import Icon from '@ant-design/icons'
+import { powerListToPowerTree } from '@/utils/common.ts'
 
 const Role: React.FC = () => {
+    const [form] = AntdForm.useForm<RoleAddEditParam>()
+    const formValues = AntdForm.useWatch([], form)
+    const [newFormValues, setNewFormValues] = useState<RoleAddEditParam>()
     const [roleData, setRoleData] = useState<RoleWithPowerGetVo[]>([])
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
     const [tableParams, setTableParams] = useState<TableParam>({
         pagination: {
             current: 1,
@@ -23,8 +36,14 @@ const Role: React.FC = () => {
         }
     })
     const [searchName, setSearchName] = useState('')
-    const [useRegex, setUseRegex] = useState(false)
+    const [isUseRegex, setIsUseRegex] = useState(false)
     const [isRegexLegal, setIsRegexLegal] = useState(true)
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const [isDrawerEdit, setIsDrawerEdit] = useState(false)
+    const [submittable, setSubmittable] = useState(false)
+    const [powerTreeData, setPowerTreeData] = useState<_DataNode[]>([])
+    const [isLoadingPower, setIsLoadingPower] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
 
     const dataColumns: _ColumnsType<RoleWithPowerGetVo> = [
         {
@@ -68,7 +87,12 @@ const Role: React.FC = () => {
                                 启用
                             </a>
                         )}
-                        <a style={{ color: COLOR_PRODUCTION }}>编辑</a>
+                        <a
+                            style={{ color: COLOR_PRODUCTION }}
+                            onClick={handleOnEditBtnClick(record)}
+                        >
+                            编辑
+                        </a>
                         <a style={{ color: COLOR_PRODUCTION }}>删除</a>
                     </AntdSpace>
                 </>
@@ -101,10 +125,101 @@ const Role: React.FC = () => {
         }
     }
 
+    const handleOnAddBtnClick = () => {
+        setIsDrawerEdit(false)
+        setIsDrawerOpen(true)
+        form.setFieldValue('id', undefined)
+        form.setFieldValue('name', newFormValues?.name)
+        form.setFieldValue('powerIds', newFormValues?.powerIds)
+        form.setFieldValue('enable', newFormValues?.enable ?? true)
+    }
+
+    const handleOnEditBtnClick = (value: RoleWithPowerGetVo) => {
+        return () => {
+            setIsDrawerEdit(true)
+            setIsDrawerOpen(true)
+            form.setFieldValue('id', value.id)
+            form.setFieldValue('name', value.name)
+            form.setFieldValue(
+                'powerIds',
+                value.operations.map((operation) => operation.powerId)
+            )
+            form.setFieldValue('enable', value.enable)
+            void form.validateFields()
+        }
+    }
+
+    const handleOnDrawerClose = () => {
+        setIsDrawerOpen(false)
+    }
+
+    const handleOnSubmit = () => {
+        if (isSubmitting) {
+            return
+        }
+
+        setIsSubmitting(true)
+
+        if (isDrawerEdit) {
+            void r_updateRole(formValues)
+                .then((res) => {
+                    const data = res.data
+                    switch (data.code) {
+                        case DATABASE_UPDATE_SUCCESS:
+                            void message.success({
+                                content: '更新成功'
+                            })
+                            setIsDrawerOpen(false)
+                            getRole()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error({
+                                content: '已存在相同名称的角色'
+                            })
+                            break
+                        default:
+                            void message.error({
+                                content: '更新失败，请稍后重试'
+                            })
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        } else {
+            void r_addRole(formValues)
+                .then((res) => {
+                    const data = res.data
+                    switch (data.code) {
+                        case DATABASE_INSERT_SUCCESS:
+                            void message.success({
+                                content: '添加成功'
+                            })
+                            setNewFormValues(undefined)
+                            setIsDrawerOpen(false)
+                            getRole()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error({
+                                content: '已存在相同名称的角色'
+                            })
+                            break
+                        default:
+                            void message.error({
+                                content: '添加失败，请稍后重试'
+                            })
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        }
+    }
+
     const handleOnSearchNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setSearchName(e.target.value)
 
-        if (useRegex) {
+        if (isUseRegex) {
             try {
                 RegExp(e.target.value)
                 setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]')))
@@ -123,7 +238,7 @@ const Role: React.FC = () => {
     }
 
     const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
-        setUseRegex(e.target.checked)
+        setIsUseRegex(e.target.checked)
         if (e.target.checked) {
             try {
                 RegExp(searchName)
@@ -142,12 +257,30 @@ const Role: React.FC = () => {
 
     const handleOnChangStatusBtnClick = (id: string, newStatus: boolean) => {
         return () => {
+            if (isLoading) {
+                return
+            }
+
+            setIsLoading(true)
             void r_changeRoleStatus({ id, enable: newStatus })
+                .then((res) => {
+                    const data = res.data
+                    if (data.code === DATABASE_UPDATE_SUCCESS) {
+                        getRole()
+                    } else {
+                        void message.error({
+                            content: '更新失败，请稍后重试'
+                        })
+                    }
+                })
+                .finally(() => {
+                    setIsLoading(false)
+                })
         }
     }
 
     const getRole = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
 
@@ -158,7 +291,7 @@ const Role: React.FC = () => {
             return
         }
 
-        setLoading(true)
+        setIsLoading(true)
 
         void r_getRole({
             currentPage: tableParams.pagination?.current,
@@ -170,7 +303,7 @@ const Role: React.FC = () => {
             sortOrder:
                 tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
             searchName: searchName.trim().length ? searchName : undefined,
-            searchRegex: useRegex ? useRegex : undefined,
+            searchRegex: isUseRegex ? isUseRegex : undefined,
             ...tableParams.filters
         })
             .then((res) => {
@@ -179,69 +312,12 @@ const Role: React.FC = () => {
                     const records = data.data?.records
 
                     records?.map((value) => {
-                        const menuMap = new Map<number, _DataNode[]>()
-                        const elementMap = new Map<number, _DataNode[]>()
-                        const operationMap = new Map<number, _DataNode[]>()
-
-                        value.operations.forEach((operation) => {
-                            if (
-                                operationMap.has(operation.elementId) &&
-                                operationMap.get(operation.elementId) !== null
-                            ) {
-                                operationMap
-                                    .get(operation.elementId)
-                                    ?.push({ title: operation.name, key: operation.powerId })
-                            } else {
-                                operationMap.set(operation.elementId, [
-                                    { title: operation.name, key: operation.powerId }
-                                ])
-                            }
-                        })
-
-                        value.elements.forEach((element) => {
-                            if (
-                                elementMap.has(element.menuId) &&
-                                elementMap.get(element.menuId) !== null
-                            ) {
-                                elementMap.get(element.menuId)?.push({
-                                    title: element.name,
-                                    key: element.powerId,
-                                    children: operationMap.get(element.id)
-                                })
-                            } else {
-                                elementMap.set(element.menuId, [
-                                    {
-                                        title: element.name,
-                                        key: element.powerId,
-                                        children: operationMap.get(element.id)
-                                    }
-                                ])
-                            }
-                        })
-
-                        value.menus.forEach((menu) => {
-                            if (menuMap.has(menu.moduleId) && menuMap.get(menu.moduleId) !== null) {
-                                menuMap.get(menu.moduleId)?.push({
-                                    title: menu.name,
-                                    key: menu.powerId,
-                                    children: elementMap.get(menu.id)
-                                })
-                            } else {
-                                menuMap.set(menu.moduleId, [
-                                    {
-                                        title: menu.name,
-                                        key: menu.powerId,
-                                        children: elementMap.get(menu.id)
-                                    }
-                                ])
-                            }
-                        })
-
-                        value.tree = value.modules.map((module) => ({
-                            title: module.name,
-                            key: module.powerId,
-                            children: menuMap.get(module.id)
-                        }))
+                        value.tree = powerListToPowerTree(
+                            value.modules,
+                            value.menus,
+                            value.elements,
+                            value.operations
+                        )
 
                         return value
                     })
@@ -262,10 +338,66 @@ const Role: React.FC = () => {
                 }
             })
             .finally(() => {
-                setLoading(false)
+                setIsLoading(false)
             })
     }
 
+    const getPowerTreeData = () => {
+        if (isLoadingPower) {
+            return
+        }
+
+        setIsLoadingPower(true)
+
+        void r_getPower()
+            .then((res) => {
+                const data = res.data
+
+                if (data.code === DATABASE_SELECT_SUCCESS) {
+                    const powerSet = data.data
+                    powerSet &&
+                        setPowerTreeData(
+                            powerListToPowerTree(
+                                powerSet.moduleList,
+                                powerSet.menuList,
+                                powerSet.elementList,
+                                powerSet.operationList
+                            )
+                        )
+                } else {
+                    void message.error({
+                        content: '获取权限列表失败，请稍后重试'
+                    })
+                }
+            })
+            .finally(() => {
+                setIsLoadingPower(false)
+            })
+    }
+
+    useEffect(() => {
+        form.validateFields({ validateOnly: true }).then(
+            () => {
+                setSubmittable(true)
+            },
+            () => {
+                setSubmittable(false)
+            }
+        )
+
+        if (!isDrawerEdit && formValues) {
+            setNewFormValues({
+                name: formValues.name,
+                powerIds: formValues.powerIds,
+                enable: formValues.enable
+            })
+        }
+    }, [formValues])
+
+    useEffect(() => {
+        getPowerTreeData()
+    }, [])
+
     useEffect(() => {
         getRole()
     }, [
@@ -287,7 +419,11 @@ const Role: React.FC = () => {
                     <FlexBox gap={20}>
                         <FlexBox direction={'horizontal'} gap={10}>
                             <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
-                                <AntdButton type={'primary'} style={{ padding: '4px 8px' }}>
+                                <AntdButton
+                                    type={'primary'}
+                                    style={{ padding: '4px 8px' }}
+                                    onClick={handleOnAddBtnClick}
+                                >
                                     <Icon
                                         component={IconFatwebPlus}
                                         style={{ fontSize: '1.5em' }}
@@ -314,7 +450,7 @@ const Role: React.FC = () => {
                                                 </span>
                                             ) : undefined}
                                             <AntdCheckbox
-                                                checked={useRegex}
+                                                checked={isUseRegex}
                                                 onChange={handleOnUseRegexChange}
                                             >
                                                 <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
@@ -340,13 +476,70 @@ const Role: React.FC = () => {
                                 columns={dataColumns}
                                 rowKey={(record) => record.id}
                                 pagination={tableParams.pagination}
-                                loading={loading}
+                                loading={isLoading}
                                 onChange={handleOnTableChange}
                             />
                         </Card>
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>
+            <AntdDrawer
+                title={isDrawerEdit ? '编辑角色' : '添加角色'}
+                onClose={handleOnDrawerClose}
+                open={isDrawerOpen}
+                closable={!isSubmitting}
+                maskClosable={!isSubmitting}
+                extra={
+                    <AntdSpace>
+                        <AntdTooltip title={'刷新权限列表'}>
+                            <AntdButton onClick={getPowerTreeData} disabled={isSubmitting}>
+                                <Icon component={IconFatwebRefresh} />
+                            </AntdButton>
+                        </AntdTooltip>
+                        <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
+                            取消
+                        </AntdButton>
+                        <AntdButton
+                            type={'primary'}
+                            disabled={!submittable}
+                            loading={isSubmitting}
+                            onClick={handleOnSubmit}
+                        >
+                            提交
+                        </AntdButton>
+                    </AntdSpace>
+                }
+            >
+                <AntdForm form={form} disabled={isSubmitting}>
+                    <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+                        <AntdInput disabled />
+                    </AntdForm.Item>
+                    <AntdForm.Item
+                        name={'name'}
+                        label={'名称'}
+                        rules={[{ required: true, whitespace: false }]}
+                    >
+                        <AntdInput allowClear />
+                    </AntdForm.Item>
+                    <AntdForm.Item name={'powerIds'} label={'权限'}>
+                        <AntdTreeSelect
+                            treeData={powerTreeData}
+                            treeCheckable
+                            treeNodeLabelProp={'fullTitle'}
+                            allowClear
+                            loading={isLoadingPower}
+                        />
+                    </AntdForm.Item>
+                    <AntdForm.Item
+                        valuePropName={'checked'}
+                        name={'enable'}
+                        label={'启用'}
+                        rules={[{ required: true, type: 'boolean' }]}
+                    >
+                        <AntdSwitch />
+                    </AntdForm.Item>
+                </AntdForm>
+            </AntdDrawer>
         </>
     )
 }
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 68bdc2e..1afd058 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,11 +1,17 @@
 import request from '@/services/index'
-import { URL_API_SYS_LOG, URL_API_SYS_ROLE } from '@/constants/urls.constants'
+import { URL_API_SYS_LOG, URL_API_SYS_POWER, URL_API_SYS_ROLE } from '@/constants/urls.constants'
 
-export const r_getSysLog = (param: GetSysLogParam) =>
+export const r_getSysLog = (param: SysLogGetParam) =>
     request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })
 
-export const r_getRole = (param: GetRoleParam) =>
+export const r_getRole = (param: RoleGetParam) =>
     request.get<PageVo<RoleWithPowerGetVo>>(URL_API_SYS_ROLE, { ...param })
 
 export const r_changeRoleStatus = (param: RoleChangeStatusParam) =>
     request.patch<never>(URL_API_SYS_ROLE, { ...param })
+
+export const r_getPower = () => request.get<PowerSetVo>(URL_API_SYS_POWER)
+
+export const r_addRole = (param: RoleAddEditParam) => request.post(URL_API_SYS_ROLE, { ...param })
+
+export const r_updateRole = (param: RoleAddEditParam) => request.put(URL_API_SYS_ROLE, { ...param })
diff --git a/src/services/user.tsx b/src/services/user.tsx
index 96bbe1c..fc9a977 100644
--- a/src/services/user.tsx
+++ b/src/services/user.tsx
@@ -1,6 +1,6 @@
 import request from '@/services'
-import { URL_API_USER_INFO, URL_API_USER_LIST } from '@/constants/urls.constants'
+import { URL_API_SYS_USER_INFO, URL_API_SYS_USER } from '@/constants/urls.constants'
 
-export const r_getInfo = () => request.get<UserWithPowerInfoVo>(URL_API_USER_INFO)
+export const r_getInfo = () => request.get<UserWithPowerInfoVo>(URL_API_SYS_USER_INFO)
 
-export const r_getUserList = () => request.get<UserWithRoleInfoVo[]>(URL_API_USER_LIST)
+export const r_getUserList = () => request.get<UserWithRoleInfoVo[]>(URL_API_SYS_USER)
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 84f4e30..1edeeeb 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -157,3 +157,116 @@ export const floorNumber = (num: number, digits: number) => {
         }
     }
 }
+
+export const powerListToPowerTree = (
+    modules: ModuleVo[],
+    menus: MenuVo[],
+    elements: ElementVo[],
+    operations: OperationVo[]
+): _DataNode[] => {
+    const menuMap = new Map<number, _DataNode[]>()
+    const elementMap = new Map<number, _DataNode[]>()
+    const operationMap = new Map<number, _DataNode[]>()
+
+    operations.forEach((operation) => {
+        if (
+            operationMap.has(operation.elementId) &&
+            operationMap.get(operation.elementId) !== null
+        ) {
+            operationMap.get(operation.elementId)?.push({
+                title: operation.name,
+                fullTitle: operation.name,
+                key: operation.powerId,
+                value: operation.powerId
+            })
+        } else {
+            operationMap.set(operation.elementId, [
+                {
+                    title: operation.name,
+                    fullTitle: operation.name,
+                    key: operation.powerId,
+                    value: operation.powerId
+                }
+            ])
+        }
+    })
+
+    elements.forEach((element) => {
+        if (elementMap.has(element.menuId) && elementMap.get(element.menuId) !== null) {
+            elementMap.get(element.menuId)?.push({
+                title: element.name,
+                fullTitle: element.name,
+                key: element.powerId,
+                value: element.powerId,
+                children: operationMap.get(element.id)?.map((value) => {
+                    value.fullTitle = `${element.name}-${value.fullTitle}`
+                    return value
+                })
+            })
+        } else {
+            elementMap.set(element.menuId, [
+                {
+                    title: element.name,
+                    fullTitle: element.name,
+                    key: element.powerId,
+                    value: element.powerId,
+                    children: operationMap.get(element.id)?.map((value) => {
+                        value.fullTitle = `${element.name}-${value.fullTitle}`
+                        return value
+                    })
+                }
+            ])
+        }
+    })
+
+    menus.forEach((menu) => {
+        if (menuMap.has(menu.moduleId) && menuMap.get(menu.moduleId) !== null) {
+            menuMap.get(menu.moduleId)?.push({
+                title: menu.name,
+                fullTitle: menu.name,
+                key: menu.powerId,
+                value: menu.powerId,
+                children: elementMap.get(menu.id)?.map((value) => {
+                    value.fullTitle = `${menu.name}-${value.fullTitle}`
+                    value.children?.forEach((value1) => {
+                        value1.fullTitle = `${menu.name}-${value1.fullTitle}`
+                    })
+                    return value
+                })
+            })
+        } else {
+            menuMap.set(menu.moduleId, [
+                {
+                    title: menu.name,
+                    fullTitle: menu.name,
+                    key: menu.powerId,
+                    value: menu.powerId,
+                    children: elementMap.get(menu.id)?.map((value) => {
+                        value.fullTitle = `${menu.name}-${value.fullTitle}`
+                        value.children?.forEach((value1) => {
+                            value1.fullTitle = `${menu.name}-${value1.fullTitle}`
+                        })
+                        return value
+                    })
+                }
+            ])
+        }
+    })
+
+    return modules.map((module) => ({
+        title: module.name,
+        fullTitle: module.name,
+        key: module.powerId,
+        value: module.powerId,
+        children: menuMap.get(module.id)?.map((value) => {
+            value.fullTitle = `${module.name}-${value.fullTitle}`
+            value.children?.forEach((value1) => {
+                value1.fullTitle = `${module.name}-${value1.fullTitle}`
+                value1.children?.forEach((value2) => {
+                    value2.fullTitle = `${module.name}-${value2.fullTitle}`
+                })
+            })
+            return value
+        })
+    }))
+}

From 8a97fa375af38ffa7b7a179f3c62685d188cd702 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 14 Nov 2023 14:33:41 +0800
Subject: [PATCH 076/307] Finish role delete

---
 src/pages/system/Log.tsx  |  12 ++---
 src/pages/system/Role.tsx | 104 +++++++++++++++++++++++---------------
 src/services/system.tsx   |  17 ++++---
 3 files changed, 77 insertions(+), 56 deletions(-)

diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 0be913f..b3d62de 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import Card from '@/components/common/Card'
-import { r_getSysLog } from '@/services/system'
+import { r_sysLog_get } from '@/services/system'
 import {
     COLOR_ERROR_SECONDARY,
     COLOR_FONT_SECONDARY,
@@ -209,15 +209,13 @@ const Log: React.FC = () => {
         }
 
         if (!isRegexLegal) {
-            void message.error({
-                content: '非法正则表达式'
-            })
+            void message.error('非法正则表达式')
             return
         }
 
         setLoading(true)
 
-        void r_getSysLog({
+        void r_sysLog_get({
             currentPage: tableParams.pagination?.current,
             pageSize: tableParams.pagination?.pageSize,
             sortField:
@@ -245,9 +243,7 @@ const Log: React.FC = () => {
                             }
                         })
                 } else {
-                    void message.error({
-                        content: '获取失败，请稍后重试'
-                    })
+                    void message.error('获取失败，请稍后重试')
                 }
             })
             .finally(() => {
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index a402c92..1753bde 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -4,16 +4,18 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 import {
-    r_addRole,
-    r_changeRoleStatus,
-    r_getPower,
-    r_getRole,
-    r_updateRole
+    r_role_add,
+    r_role_changStatus,
+    r_power_get,
+    r_role_get,
+    r_role_update,
+    r_role_delete
 } from '@/services/system.tsx'
 import {
     COLOR_ERROR_SECONDARY,
     COLOR_FONT_SECONDARY,
     COLOR_PRODUCTION,
+    DATABASE_DELETE_SUCCESS,
     DATABASE_DUPLICATE_KEY,
     DATABASE_INSERT_SUCCESS,
     DATABASE_SELECT_SUCCESS,
@@ -23,6 +25,7 @@ import Icon from '@ant-design/icons'
 import { powerListToPowerTree } from '@/utils/common.ts'
 
 const Role: React.FC = () => {
+    const [modal, contextHolder] = AntdModal.useModal()
     const [form] = AntdForm.useForm<RoleAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
     const [newFormValues, setNewFormValues] = useState<RoleAddEditParam>()
@@ -93,7 +96,12 @@ const Role: React.FC = () => {
                         >
                             编辑
                         </a>
-                        <a style={{ color: COLOR_PRODUCTION }}>删除</a>
+                        <a
+                            style={{ color: COLOR_PRODUCTION }}
+                            onClick={handleOnDeleteBtnClick(record)}
+                        >
+                            删除
+                        </a>
                     </AntdSpace>
                 </>
             )
@@ -149,6 +157,37 @@ const Role: React.FC = () => {
         }
     }
 
+    const handleOnDeleteBtnClick = (value: RoleWithPowerGetVo) => {
+        return () => {
+            modal
+                .confirm({
+                    title: '确定删除',
+                    content: `确定删除角色 ${value.name} 吗？`
+                })
+                .then(
+                    (confirmed) => {
+                        if (confirmed) {
+                            setIsSubmitting(true)
+                            r_role_delete(value.id)
+                                .then((res) => {
+                                    const data = res.data
+                                    if (data.code === DATABASE_DELETE_SUCCESS) {
+                                        void message.success('删除成功')
+                                        getRole()
+                                    } else {
+                                        void message.error('删除失败，请稍后重试')
+                                    }
+                                })
+                                .finally(() => {
+                                    setIsSubmitting(false)
+                                })
+                        }
+                    },
+                    () => {}
+                )
+        }
+    }
+
     const handleOnDrawerClose = () => {
         setIsDrawerOpen(false)
     }
@@ -161,53 +200,41 @@ const Role: React.FC = () => {
         setIsSubmitting(true)
 
         if (isDrawerEdit) {
-            void r_updateRole(formValues)
+            void r_role_update(formValues)
                 .then((res) => {
                     const data = res.data
                     switch (data.code) {
                         case DATABASE_UPDATE_SUCCESS:
-                            void message.success({
-                                content: '更新成功'
-                            })
                             setIsDrawerOpen(false)
+                            void message.success('更新成功')
                             getRole()
                             break
                         case DATABASE_DUPLICATE_KEY:
-                            void message.error({
-                                content: '已存在相同名称的角色'
-                            })
+                            void message.error('已存在相同名称的角色')
                             break
                         default:
-                            void message.error({
-                                content: '更新失败，请稍后重试'
-                            })
+                            void message.error('更新失败，请稍后重试')
                     }
                 })
                 .finally(() => {
                     setIsSubmitting(false)
                 })
         } else {
-            void r_addRole(formValues)
+            void r_role_add(formValues)
                 .then((res) => {
                     const data = res.data
                     switch (data.code) {
                         case DATABASE_INSERT_SUCCESS:
-                            void message.success({
-                                content: '添加成功'
-                            })
-                            setNewFormValues(undefined)
                             setIsDrawerOpen(false)
+                            void message.success('添加成功')
+                            setNewFormValues(undefined)
                             getRole()
                             break
                         case DATABASE_DUPLICATE_KEY:
-                            void message.error({
-                                content: '已存在相同名称的角色'
-                            })
+                            void message.error('已存在相同名称的角色')
                             break
                         default:
-                            void message.error({
-                                content: '添加失败，请稍后重试'
-                            })
+                            void message.error('添加失败，请稍后重试')
                     }
                 })
                 .finally(() => {
@@ -262,15 +289,13 @@ const Role: React.FC = () => {
             }
 
             setIsLoading(true)
-            void r_changeRoleStatus({ id, enable: newStatus })
+            void r_role_changStatus({ id, enable: newStatus })
                 .then((res) => {
                     const data = res.data
                     if (data.code === DATABASE_UPDATE_SUCCESS) {
                         getRole()
                     } else {
-                        void message.error({
-                            content: '更新失败，请稍后重试'
-                        })
+                        void message.error('更新失败，请稍后重试')
                     }
                 })
                 .finally(() => {
@@ -285,15 +310,13 @@ const Role: React.FC = () => {
         }
 
         if (!isRegexLegal) {
-            void message.error({
-                content: '非法正则表达式'
-            })
+            void message.error('非法正则表达式')
             return
         }
 
         setIsLoading(true)
 
-        void r_getRole({
+        void r_role_get({
             currentPage: tableParams.pagination?.current,
             pageSize: tableParams.pagination?.pageSize,
             sortField:
@@ -332,9 +355,7 @@ const Role: React.FC = () => {
                             }
                         })
                 } else {
-                    void message.error({
-                        content: '获取失败，请稍后重试'
-                    })
+                    void message.error('获取失败，请稍后重试')
                 }
             })
             .finally(() => {
@@ -349,7 +370,7 @@ const Role: React.FC = () => {
 
         setIsLoadingPower(true)
 
-        void r_getPower()
+        void r_power_get()
             .then((res) => {
                 const data = res.data
 
@@ -365,9 +386,7 @@ const Role: React.FC = () => {
                             )
                         )
                 } else {
-                    void message.error({
-                        content: '获取权限列表失败，请稍后重试'
-                    })
+                    void message.error('获取权限列表失败，请稍后重试')
                 }
             })
             .finally(() => {
@@ -540,6 +559,7 @@ const Role: React.FC = () => {
                     </AntdForm.Item>
                 </AntdForm>
             </AntdDrawer>
+            {contextHolder}
         </>
     )
 }
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 1afd058..3b19087 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,17 +1,22 @@
 import request from '@/services/index'
 import { URL_API_SYS_LOG, URL_API_SYS_POWER, URL_API_SYS_ROLE } from '@/constants/urls.constants'
 
-export const r_getSysLog = (param: SysLogGetParam) =>
+export const r_sysLog_get = (param: SysLogGetParam) =>
     request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })
 
-export const r_getRole = (param: RoleGetParam) =>
+export const r_role_get = (param: RoleGetParam) =>
     request.get<PageVo<RoleWithPowerGetVo>>(URL_API_SYS_ROLE, { ...param })
 
-export const r_changeRoleStatus = (param: RoleChangeStatusParam) =>
+export const r_role_changStatus = (param: RoleChangeStatusParam) =>
     request.patch<never>(URL_API_SYS_ROLE, { ...param })
 
-export const r_getPower = () => request.get<PowerSetVo>(URL_API_SYS_POWER)
+export const r_power_get = () => request.get<PowerSetVo>(URL_API_SYS_POWER)
 
-export const r_addRole = (param: RoleAddEditParam) => request.post(URL_API_SYS_ROLE, { ...param })
+export const r_role_add = (param: RoleAddEditParam) => request.post(URL_API_SYS_ROLE, { ...param })
 
-export const r_updateRole = (param: RoleAddEditParam) => request.put(URL_API_SYS_ROLE, { ...param })
+export const r_role_update = (param: RoleAddEditParam) =>
+    request.put(URL_API_SYS_ROLE, { ...param })
+
+export const r_role_delete = (id: string) => request.delete(`${URL_API_SYS_ROLE}/${id}`)
+
+export const r_role_delete_list = (ids: string[]) => request.delete(URL_API_SYS_ROLE, { ids })

From 3c492fc824d0ec2bb574ccac1920470bad07a3da Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 14 Nov 2023 18:09:19 +0800
Subject: [PATCH 077/307] Optimize role

---
 src/assets/svg/delete.svg           |  1 +
 src/global.d.ts                     |  6 ++
 src/pages/system/Role.tsx           | 88 +++++++++++++++++++++++++----
 src/services/index.tsx              |  2 +-
 src/services/system.tsx             |  3 +-
 src/utils/{common.ts => common.tsx} | 24 ++++++++
 6 files changed, 111 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/svg/delete.svg
 rename src/utils/{common.ts => common.tsx} (92%)

diff --git a/src/assets/svg/delete.svg b/src/assets/svg/delete.svg
new file mode 100644
index 0000000..05a00ac
--- /dev/null
+++ b/src/assets/svg/delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" version="1.1"><path d="M885.333333 266.666667H768v-64C768 149.738667 725.290667 106.666667 672.746667 106.666667H352A96.106667 96.106667 0 0 0 256 202.666667v64H138.666667c-17.706667 0-32 14.293333-32 32s14.293333 32 32 32h746.666666c17.706667 0 32-14.293333 32-32s-14.293333-32-32-32zM320 202.666667c0-17.621333 14.378667-32 32-32h320.746667C690.24 170.666667 704 184.725333 704 202.666667v64H320v-64zM736.128 917.333333H288.064a96.128 96.128 0 0 1-96-96l1.194667-384a32 32 0 0 1 64 0l-1.194667 384c0 17.664 14.378667 32 32 32h448.064a32 32 0 0 0 32-32l-0.234667-384a32 32 0 1 1 64 0l0.234667 384c0 52.928-43.072 96-96 96z" /><path d="M384 469.333333m32 0l0 0q32 0 32 32l0 192q0 32-32 32l0 0q-32 0-32-32l0-192q0-32 32-32Z" /><path d="M576 469.333333m32 0l0 0q32 0 32 32l0 192q0 32-32 32l0 0q-32 0-32-32l0-192q0-32 32-32Z" /></svg>
\ No newline at end of file
diff --git a/src/global.d.ts b/src/global.d.ts
index 99a99cb..af0ed9f 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -134,12 +134,16 @@ interface RoleVo {
     id: string
     name: string
     enable: boolean
+    createTime: string
+    updateTime: string
 }
 
 interface GroupVo {
     id: string
     name: string
     enable: boolean
+    createTime: string
+    updateTime: string
 }
 
 interface LoginForm {
@@ -204,6 +208,8 @@ interface RoleWithPowerGetVo {
     id: string
     name: string
     enable: string
+    createTime: string
+    updateTime: string
     modules: ModuleVo[]
     menus: MenuVo[]
     elements: ElementVo[]
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index 1753bde..822f895 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -9,7 +9,8 @@ import {
     r_power_get,
     r_role_get,
     r_role_update,
-    r_role_delete
+    r_role_delete,
+    r_role_delete_list
 } from '@/services/system.tsx'
 import {
     COLOR_ERROR_SECONDARY,
@@ -20,9 +21,9 @@ import {
     DATABASE_INSERT_SUCCESS,
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
-} from '@/constants/common.constants.ts'
+} from '@/constants/common.constants'
 import Icon from '@ant-design/icons'
-import { powerListToPowerTree } from '@/utils/common.ts'
+import { getLocalTime, powerListToPowerTree } from '@/utils/common'
 
 const Role: React.FC = () => {
     const [modal, contextHolder] = AntdModal.useModal()
@@ -47,17 +48,33 @@ const Role: React.FC = () => {
     const [powerTreeData, setPowerTreeData] = useState<_DataNode[]>([])
     const [isLoadingPower, setIsLoadingPower] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
+    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
 
     const dataColumns: _ColumnsType<RoleWithPowerGetVo> = [
         {
             title: '名称',
             dataIndex: 'name',
-            width: '20%'
+            width: '15%'
         },
         {
             title: '权限',
             dataIndex: 'tree',
-            render: (value: _DataNode[]) => <AntdTree treeData={value} />
+            render: (value: _DataNode[]) =>
+                value.length ? <AntdTree treeData={value} /> : <AntdTag>无</AntdTag>
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            width: '0',
+            align: 'center',
+            render: (value: string) => getLocalTime(value)
+        },
+        {
+            title: '修改时间',
+            dataIndex: 'updateTime',
+            width: '0',
+            align: 'center',
+            render: (value: string) => getLocalTime(value)
         },
         {
             title: '状态',
@@ -133,6 +150,10 @@ const Role: React.FC = () => {
         }
     }
 
+    const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
+        setTableSelectedItem(selectedRowKeys)
+    }
+
     const handleOnAddBtnClick = () => {
         setIsDrawerEdit(false)
         setIsDrawerOpen(true)
@@ -142,6 +163,27 @@ const Role: React.FC = () => {
         form.setFieldValue('enable', newFormValues?.enable ?? true)
     }
 
+    const handleOnListDeleteBtnClick = () => {
+        setIsLoading(true)
+
+        void r_role_delete_list(tableSelectedItem)
+            .then((res) => {
+                const data = res.data
+
+                if (data.code === DATABASE_DELETE_SUCCESS) {
+                    void message.success('删除成功')
+                    setTimeout(() => {
+                        getRole()
+                    })
+                } else {
+                    void message.error('删除失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoading(false)
+            })
+    }
+
     const handleOnEditBtnClick = (value: RoleWithPowerGetVo) => {
         return () => {
             setIsDrawerEdit(true)
@@ -167,19 +209,22 @@ const Role: React.FC = () => {
                 .then(
                     (confirmed) => {
                         if (confirmed) {
-                            setIsSubmitting(true)
-                            r_role_delete(value.id)
+                            setIsLoading(true)
+
+                            void r_role_delete(value.id)
                                 .then((res) => {
                                     const data = res.data
                                     if (data.code === DATABASE_DELETE_SUCCESS) {
                                         void message.success('删除成功')
-                                        getRole()
+                                        setTimeout(() => {
+                                            getRole()
+                                        })
                                     } else {
                                         void message.error('删除失败，请稍后重试')
                                     }
                                 })
                                 .finally(() => {
-                                    setIsSubmitting(false)
+                                    setIsLoading(false)
                                 })
                         }
                     },
@@ -293,7 +338,10 @@ const Role: React.FC = () => {
                 .then((res) => {
                     const data = res.data
                     if (data.code === DATABASE_UPDATE_SUCCESS) {
-                        getRole()
+                        void message.success('更新成功')
+                        setTimeout(() => {
+                            getRole()
+                        })
                     } else {
                         void message.error('更新失败，请稍后重试')
                     }
@@ -445,7 +493,21 @@ const Role: React.FC = () => {
                                 >
                                     <Icon
                                         component={IconFatwebPlus}
-                                        style={{ fontSize: '1.5em' }}
+                                        style={{ fontSize: '1.2em' }}
+                                    />
+                                </AntdButton>
+                            </Card>
+                            <Card
+                                hidden={tableSelectedItem.length === 0}
+                                style={{ overflow: 'inherit', flex: '0 0 auto' }}
+                            >
+                                <AntdButton
+                                    style={{ padding: '4px 8px' }}
+                                    onClick={handleOnListDeleteBtnClick}
+                                >
+                                    <Icon
+                                        component={IconFatwebDelete}
+                                        style={{ fontSize: '1.2em' }}
                                     />
                                 </AntdButton>
                             </Card>
@@ -497,6 +559,10 @@ const Role: React.FC = () => {
                                 pagination={tableParams.pagination}
                                 loading={isLoading}
                                 onChange={handleOnTableChange}
+                                rowSelection={{
+                                    type: 'checkbox',
+                                    onChange: handleOnTableSelectChange
+                                }}
                             />
                         </Card>
                     </FlexBox>
diff --git a/src/services/index.tsx b/src/services/index.tsx
index aa90477..fcbf261 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -122,7 +122,7 @@ const request = {
         return await request.request('PATCH', url, { data })
     },
     async delete<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
-        return await request.request('DELETE', url, { params: data })
+        return await request.request('DELETE', url, { data })
     },
     async request<T>(
         method = 'GET',
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 3b19087..b385b3e 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import request from '@/services/index'
 import { URL_API_SYS_LOG, URL_API_SYS_POWER, URL_API_SYS_ROLE } from '@/constants/urls.constants'
 
@@ -19,4 +20,4 @@ export const r_role_update = (param: RoleAddEditParam) =>
 
 export const r_role_delete = (id: string) => request.delete(`${URL_API_SYS_ROLE}/${id}`)
 
-export const r_role_delete_list = (ids: string[]) => request.delete(URL_API_SYS_ROLE, { ids })
+export const r_role_delete_list = (ids: React.Key[]) => request.delete(URL_API_SYS_ROLE, { ids })
diff --git a/src/utils/common.ts b/src/utils/common.tsx
similarity index 92%
rename from src/utils/common.ts
rename to src/utils/common.tsx
index 1edeeeb..7840bc3 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.tsx
@@ -1,5 +1,7 @@
 import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
 import moment from 'moment'
+import ReactDOM from 'react-dom/client'
+import LoadingMask from '@/components/common/LoadingMask.tsx'
 
 export const getQueryVariable = (variable: string) => {
     const query = window.location.search.substring(1)
@@ -270,3 +272,25 @@ export const powerListToPowerTree = (
         })
     }))
 }
+
+export const showLoadingMask = (id: string) => {
+    if (document.querySelector(`#${id}`)) {
+        return
+    }
+
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    container.id = id
+    container.setAttribute(
+        'style',
+        'position: fixed; width: 100vw; height: 100vh; z-index: 10000; left: 0; top: 0;'
+    )
+
+    return ReactDOM.createRoot(container).render(<LoadingMask />)
+}
+
+export const removeLoadingMask = (id: string) => {
+    document.querySelectorAll(`#${id}`).forEach((value) => {
+        value.parentNode?.removeChild(value)
+    })
+}

From cd010ade4811350244d4736a141796bb071ebdc3 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 15 Nov 2023 10:01:16 +0800
Subject: [PATCH 078/307] Optimize role stylesheet

---
 src/main.tsx              | 9 ++++++++-
 src/pages/system/Role.tsx | 6 +++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 53aeaaa..2e5c580 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -9,7 +9,14 @@ import { COLOR_MAIN } from '@/constants/common.constants'
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <AntdConfigProvider
-            theme={{ token: { colorPrimary: COLOR_MAIN, colorBgContainer: 'transparent' } }}
+            theme={{
+                token: { colorPrimary: COLOR_MAIN },
+                components: {
+                    Tree: {
+                        colorBgContainer: 'transparent'
+                    }
+                }
+            }}
             locale={zh_CN}
         >
             <App />
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index 822f895..baf55a8 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -65,21 +65,21 @@ const Role: React.FC = () => {
         {
             title: '创建时间',
             dataIndex: 'createTime',
-            width: '0',
+            width: '10%',
             align: 'center',
             render: (value: string) => getLocalTime(value)
         },
         {
             title: '修改时间',
             dataIndex: 'updateTime',
-            width: '0',
+            width: '10%',
             align: 'center',
             render: (value: string) => getLocalTime(value)
         },
         {
             title: '状态',
             dataIndex: 'enable',
-            width: '0',
+            width: '5%',
             align: 'center',
             render: (value) =>
                 value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>

From 7db258e1b85b4cc90386de196a9852992a0a7b3b Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 15 Nov 2023 14:55:16 +0800
Subject: [PATCH 079/307] Optimize role stylesheet

---
 src/ant-design.d.ts       |   3 +-
 src/global.d.ts           |   6 +-
 src/pages/system/Role.tsx |  51 +++++++-----
 src/utils/common.tsx      | 168 +++++++++++++++++++-------------------
 4 files changed, 118 insertions(+), 110 deletions(-)

diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts
index 3de2a01..d3f35af 100644
--- a/src/ant-design.d.ts
+++ b/src/ant-design.d.ts
@@ -19,7 +19,8 @@ declare global {
     type _CheckboxChangeEvent = CheckboxChangeEvent
     interface _DataNode extends DataNode {
         value: React.Key
-        fullTitle: string
+        fullTitle?: string
+        parentId?: number
         children?: _DataNode[]
     }
 }
diff --git a/src/global.d.ts b/src/global.d.ts
index af0ed9f..0ec2d7b 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -102,31 +102,29 @@ interface UserInfoVo {
 interface ModuleVo {
     id: number
     name: string
-    powerId: number
 }
 
 interface MenuVo {
     id: number
     name: string
     url: string
-    powerId: number
     parentId: number
     moduleId: number
+    children: MenuVo[]
 }
 
 interface ElementVo {
     id: number
     name: string
-    powerId: number
     parentId: number
     menuId: number
+    children: ElementVo[]
 }
 
 interface OperationVo {
     id: number
     name: string
     code: string
-    powerId: number
     elementId: number
 }
 
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index baf55a8..237b0ea 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -11,7 +11,7 @@ import {
     r_role_update,
     r_role_delete,
     r_role_delete_list
-} from '@/services/system.tsx'
+} from '@/services/system'
 import {
     COLOR_ERROR_SECONDARY,
     COLOR_FONT_SECONDARY,
@@ -164,24 +164,36 @@ const Role: React.FC = () => {
     }
 
     const handleOnListDeleteBtnClick = () => {
-        setIsLoading(true)
-
-        void r_role_delete_list(tableSelectedItem)
-            .then((res) => {
-                const data = res.data
-
-                if (data.code === DATABASE_DELETE_SUCCESS) {
-                    void message.success('删除成功')
-                    setTimeout(() => {
-                        getRole()
-                    })
-                } else {
-                    void message.error('删除失败，请稍后重试')
-                }
-            })
-            .finally(() => {
-                setIsLoading(false)
+        modal
+            .confirm({
+                title: '确定删除',
+                content: `确定删除选中的 ${tableSelectedItem.length} 个角色吗？`
             })
+            .then(
+                (confirmed) => {
+                    if (confirmed) {
+                        setIsLoading(true)
+
+                        void r_role_delete_list(tableSelectedItem)
+                            .then((res) => {
+                                const data = res.data
+
+                                if (data.code === DATABASE_DELETE_SUCCESS) {
+                                    void message.success('删除成功')
+                                    setTimeout(() => {
+                                        getRole()
+                                    })
+                                } else {
+                                    void message.error('删除失败，请稍后重试')
+                                }
+                            })
+                            .finally(() => {
+                                setIsLoading(false)
+                            })
+                    }
+                },
+                () => {}
+            )
     }
 
     const handleOnEditBtnClick = (value: RoleWithPowerGetVo) => {
@@ -192,7 +204,7 @@ const Role: React.FC = () => {
             form.setFieldValue('name', value.name)
             form.setFieldValue(
                 'powerIds',
-                value.operations.map((operation) => operation.powerId)
+                value.operations.map((operation) => operation.id)
             )
             form.setFieldValue('enable', value.enable)
             void form.validateFields()
@@ -570,6 +582,7 @@ const Role: React.FC = () => {
             </FitFullScreen>
             <AntdDrawer
                 title={isDrawerEdit ? '编辑角色' : '添加角色'}
+                width={'36vw'}
                 onClose={handleOnDrawerClose}
                 open={isDrawerOpen}
                 closable={!isSubmitting}
diff --git a/src/utils/common.tsx b/src/utils/common.tsx
index 7840bc3..ce865b3 100644
--- a/src/utils/common.tsx
+++ b/src/utils/common.tsx
@@ -1,7 +1,8 @@
-import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
 import moment from 'moment'
 import ReactDOM from 'react-dom/client'
-import LoadingMask from '@/components/common/LoadingMask.tsx'
+import _ from 'lodash'
+import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
+import LoadingMask from '@/components/common/LoadingMask'
 
 export const getQueryVariable = (variable: string) => {
     const query = window.location.search.substring(1)
@@ -166,111 +167,106 @@ export const powerListToPowerTree = (
     elements: ElementVo[],
     operations: OperationVo[]
 ): _DataNode[] => {
-    const menuMap = new Map<number, _DataNode[]>()
-    const elementMap = new Map<number, _DataNode[]>()
-    const operationMap = new Map<number, _DataNode[]>()
+    const moduleChildrenMap = new Map<string, _DataNode[]>()
+    const menuChildrenMap = new Map<string, _DataNode[]>()
+    const elementChildrenMap = new Map<string, _DataNode[]>()
 
     operations.forEach((operation) => {
-        if (
-            operationMap.has(operation.elementId) &&
-            operationMap.get(operation.elementId) !== null
-        ) {
-            operationMap.get(operation.elementId)?.push({
+        if (elementChildrenMap.get(String(operation.elementId))) {
+            elementChildrenMap.get(String(operation.elementId))?.push({
                 title: operation.name,
-                fullTitle: operation.name,
-                key: operation.powerId,
-                value: operation.powerId
+                key: operation.id,
+                value: operation.id
             })
         } else {
-            operationMap.set(operation.elementId, [
+            elementChildrenMap.set(String(operation.elementId), [
                 {
                     title: operation.name,
-                    fullTitle: operation.name,
-                    key: operation.powerId,
-                    value: operation.powerId
+                    key: operation.id,
+                    value: operation.id
                 }
             ])
         }
     })
 
-    elements.forEach((element) => {
-        if (elementMap.has(element.menuId) && elementMap.get(element.menuId) !== null) {
-            elementMap.get(element.menuId)?.push({
-                title: element.name,
-                fullTitle: element.name,
-                key: element.powerId,
-                value: element.powerId,
-                children: operationMap.get(element.id)?.map((value) => {
-                    value.fullTitle = `${element.name}-${value.fullTitle}`
-                    return value
-                })
-            })
+    const elementTrees = parentToTree(
+        elements.map((element) => ({
+            title: element.name,
+            key: element.id,
+            value: element.id,
+            parentId: element.parentId,
+            children: elementChildrenMap.get(String(element.id))
+        }))
+    )
+
+    elementTrees.forEach((element) => {
+        if (menuChildrenMap.get(String(floorNumber(element.key as number, 5)))) {
+            menuChildrenMap.get(String(floorNumber(element.key as number, 5)))?.push(element)
         } else {
-            elementMap.set(element.menuId, [
-                {
-                    title: element.name,
-                    fullTitle: element.name,
-                    key: element.powerId,
-                    value: element.powerId,
-                    children: operationMap.get(element.id)?.map((value) => {
-                        value.fullTitle = `${element.name}-${value.fullTitle}`
-                        return value
-                    })
-                }
-            ])
+            menuChildrenMap.set(String(floorNumber(element.key as number, 5)), [element])
         }
     })
 
-    menus.forEach((menu) => {
-        if (menuMap.has(menu.moduleId) && menuMap.get(menu.moduleId) !== null) {
-            menuMap.get(menu.moduleId)?.push({
-                title: menu.name,
-                fullTitle: menu.name,
-                key: menu.powerId,
-                value: menu.powerId,
-                children: elementMap.get(menu.id)?.map((value) => {
-                    value.fullTitle = `${menu.name}-${value.fullTitle}`
-                    value.children?.forEach((value1) => {
-                        value1.fullTitle = `${menu.name}-${value1.fullTitle}`
-                    })
-                    return value
-                })
-            })
+    const menuTrees = parentToTree(
+        menus.map((menu) => ({
+            title: menu.name,
+            key: menu.id,
+            value: menu.id,
+            parentId: menu.parentId,
+            children: menuChildrenMap.get(String(menu.id))
+        }))
+    )
+
+    menuTrees.forEach((menu) => {
+        if (moduleChildrenMap.get(String(floorNumber(menu.key as number, 7)))) {
+            moduleChildrenMap.get(String(floorNumber(menu.key as number, 7)))?.push(menu)
         } else {
-            menuMap.set(menu.moduleId, [
-                {
-                    title: menu.name,
-                    fullTitle: menu.name,
-                    key: menu.powerId,
-                    value: menu.powerId,
-                    children: elementMap.get(menu.id)?.map((value) => {
-                        value.fullTitle = `${menu.name}-${value.fullTitle}`
-                        value.children?.forEach((value1) => {
-                            value1.fullTitle = `${menu.name}-${value1.fullTitle}`
-                        })
-                        return value
-                    })
-                }
-            ])
+            moduleChildrenMap.set(String(floorNumber(menu.key as number, 7)), [menu])
         }
     })
 
-    return modules.map((module) => ({
-        title: module.name,
-        fullTitle: module.name,
-        key: module.powerId,
-        value: module.powerId,
-        children: menuMap.get(module.id)?.map((value) => {
-            value.fullTitle = `${module.name}-${value.fullTitle}`
-            value.children?.forEach((value1) => {
-                value1.fullTitle = `${module.name}-${value1.fullTitle}`
-                value1.children?.forEach((value2) => {
-                    value2.fullTitle = `${module.name}-${value2.fullTitle}`
-                })
-            })
-            return value
+    return modules.map((module) =>
+        getFullTitle({
+            title: module.name,
+            key: module.id,
+            value: module.id,
+            children: moduleChildrenMap.get(String(module.id))
         })
-    }))
+    )
+}
+
+const parentToTree = (data: _DataNode[]): _DataNode[] => {
+    const parents = data.filter((value) => !value.parentId)
+    const children = data.filter((value) => value.parentId)
+
+    const translator = (parents: _DataNode[], children: _DataNode[]) => {
+        parents.forEach((parent) => {
+            children.forEach((current, index) => {
+                if (current.parentId === parent.key) {
+                    const temp = _.cloneDeep(children)
+                    temp.splice(index, 1)
+                    translator([current], temp)
+                    typeof parent.children !== 'undefined'
+                        ? parent.children.push({ ...current })
+                        : (parent.children = [current])
+                }
+            })
+        })
+    }
+
+    translator(parents, children)
+
+    return parents
+}
+
+const getFullTitle = (data: _DataNode, preTitle?: string) => {
+    data.fullTitle = `${preTitle ? `${preTitle}-` : ''}${data.title as string}`
+    data.children &&
+        data.children.forEach((value) => {
+            getFullTitle(value, data.fullTitle)
+        })
+
+    return data
 }
 
 export const showLoadingMask = (id: string) => {

From ea74fdad8764fad398fc36bcea92cc9fd184ce29 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 15 Nov 2023 15:32:40 +0800
Subject: [PATCH 080/307] Optimize role page

---
 src/pages/system/Role.tsx | 260 +++++++++++++++++++-------------------
 1 file changed, 130 insertions(+), 130 deletions(-)

diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index 237b0ea..7271be0 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -487,6 +487,132 @@ const Role: React.FC = () => {
         JSON.stringify(tableParams.pagination?.current)
     ])
 
+    const toolbar = (
+        <FlexBox direction={'horizontal'} gap={10}>
+            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                <AntdButton
+                    type={'primary'}
+                    style={{ padding: '4px 8px' }}
+                    onClick={handleOnAddBtnClick}
+                >
+                    <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
+                </AntdButton>
+            </Card>
+            <Card
+                hidden={tableSelectedItem.length === 0}
+                style={{ overflow: 'inherit', flex: '0 0 auto' }}
+            >
+                <AntdButton style={{ padding: '4px 8px' }} onClick={handleOnListDeleteBtnClick}>
+                    <Icon component={IconFatwebDelete} style={{ fontSize: '1.2em' }} />
+                </AntdButton>
+            </Card>
+            <Card style={{ overflow: 'inherit' }}>
+                <AntdInput
+                    addonBefore={
+                        <span
+                            style={{
+                                fontSize: '0.9em',
+                                color: COLOR_FONT_SECONDARY
+                            }}
+                        >
+                            名称
+                        </span>
+                    }
+                    suffix={
+                        <>
+                            {!isRegexLegal ? (
+                                <span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
+                            ) : undefined}
+                            <AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
+                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
+                            </AntdCheckbox>
+                        </>
+                    }
+                    allowClear
+                    value={searchName}
+                    onChange={handleOnSearchNameChange}
+                    onKeyDown={handleOnSearchNameKeyDown}
+                    status={isRegexLegal ? undefined : 'error'}
+                />
+            </Card>
+            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
+                    查询
+                </AntdButton>
+            </Card>
+        </FlexBox>
+    )
+
+    const table = (
+        <Card>
+            <AntdTable
+                dataSource={roleData}
+                columns={dataColumns}
+                rowKey={(record) => record.id}
+                pagination={tableParams.pagination}
+                loading={isLoading}
+                onChange={handleOnTableChange}
+                rowSelection={{
+                    type: 'checkbox',
+                    onChange: handleOnTableSelectChange
+                }}
+            />
+        </Card>
+    )
+
+    const drawerToolbar = (
+        <AntdSpace>
+            <AntdTooltip title={'刷新权限列表'}>
+                <AntdButton onClick={getPowerTreeData} disabled={isSubmitting}>
+                    <Icon component={IconFatwebRefresh} />
+                </AntdButton>
+            </AntdTooltip>
+            <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
+                取消
+            </AntdButton>
+            <AntdButton
+                type={'primary'}
+                disabled={!submittable}
+                loading={isSubmitting}
+                onClick={handleOnSubmit}
+            >
+                提交
+            </AntdButton>
+        </AntdSpace>
+    )
+
+    const addAndEditForm = (
+        <AntdForm form={form} disabled={isSubmitting}>
+            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+                <AntdInput disabled />
+            </AntdForm.Item>
+            <AntdForm.Item
+                name={'name'}
+                label={'名称'}
+                rules={[{ required: true, whitespace: false }]}
+            >
+                <AntdInput allowClear />
+            </AntdForm.Item>
+            <AntdForm.Item name={'powerIds'} label={'权限'}>
+                <AntdTreeSelect
+                    treeData={powerTreeData}
+                    treeCheckable
+                    treeNodeLabelProp={'fullTitle'}
+                    allowClear
+                    loading={isLoadingPower}
+                />
+            </AntdForm.Item>
+            <AntdForm.Item
+                valuePropName={'checked'}
+                name={'enable'}
+                label={'启用'}
+                rules={[{ required: true, type: 'boolean' }]}
+            >
+                <AntdSwitch />
+            </AntdForm.Item>
+        </AntdForm>
+    )
+
     return (
         <>
             <FitFullScreen>
@@ -496,87 +622,8 @@ const Role: React.FC = () => {
                     autoHideWaitingTime={500}
                 >
                     <FlexBox gap={20}>
-                        <FlexBox direction={'horizontal'} gap={10}>
-                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
-                                <AntdButton
-                                    type={'primary'}
-                                    style={{ padding: '4px 8px' }}
-                                    onClick={handleOnAddBtnClick}
-                                >
-                                    <Icon
-                                        component={IconFatwebPlus}
-                                        style={{ fontSize: '1.2em' }}
-                                    />
-                                </AntdButton>
-                            </Card>
-                            <Card
-                                hidden={tableSelectedItem.length === 0}
-                                style={{ overflow: 'inherit', flex: '0 0 auto' }}
-                            >
-                                <AntdButton
-                                    style={{ padding: '4px 8px' }}
-                                    onClick={handleOnListDeleteBtnClick}
-                                >
-                                    <Icon
-                                        component={IconFatwebDelete}
-                                        style={{ fontSize: '1.2em' }}
-                                    />
-                                </AntdButton>
-                            </Card>
-                            <Card style={{ overflow: 'inherit' }}>
-                                <AntdInput
-                                    addonBefore={
-                                        <span
-                                            style={{
-                                                fontSize: '0.9em',
-                                                color: COLOR_FONT_SECONDARY
-                                            }}
-                                        >
-                                            名称
-                                        </span>
-                                    }
-                                    suffix={
-                                        <>
-                                            {!isRegexLegal ? (
-                                                <span style={{ color: COLOR_ERROR_SECONDARY }}>
-                                                    非法表达式
-                                                </span>
-                                            ) : undefined}
-                                            <AntdCheckbox
-                                                checked={isUseRegex}
-                                                onChange={handleOnUseRegexChange}
-                                            >
-                                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
-                                            </AntdCheckbox>
-                                        </>
-                                    }
-                                    allowClear
-                                    value={searchName}
-                                    onChange={handleOnSearchNameChange}
-                                    onKeyDown={handleOnSearchNameKeyDown}
-                                    status={isRegexLegal ? undefined : 'error'}
-                                />
-                            </Card>
-                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
-                                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
-                                    查询
-                                </AntdButton>
-                            </Card>
-                        </FlexBox>
-                        <Card>
-                            <AntdTable
-                                dataSource={roleData}
-                                columns={dataColumns}
-                                rowKey={(record) => record.id}
-                                pagination={tableParams.pagination}
-                                loading={isLoading}
-                                onChange={handleOnTableChange}
-                                rowSelection={{
-                                    type: 'checkbox',
-                                    onChange: handleOnTableSelectChange
-                                }}
-                            />
-                        </Card>
+                        {toolbar}
+                        {table}
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>
@@ -587,56 +634,9 @@ const Role: React.FC = () => {
                 open={isDrawerOpen}
                 closable={!isSubmitting}
                 maskClosable={!isSubmitting}
-                extra={
-                    <AntdSpace>
-                        <AntdTooltip title={'刷新权限列表'}>
-                            <AntdButton onClick={getPowerTreeData} disabled={isSubmitting}>
-                                <Icon component={IconFatwebRefresh} />
-                            </AntdButton>
-                        </AntdTooltip>
-                        <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
-                            取消
-                        </AntdButton>
-                        <AntdButton
-                            type={'primary'}
-                            disabled={!submittable}
-                            loading={isSubmitting}
-                            onClick={handleOnSubmit}
-                        >
-                            提交
-                        </AntdButton>
-                    </AntdSpace>
-                }
+                extra={drawerToolbar}
             >
-                <AntdForm form={form} disabled={isSubmitting}>
-                    <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
-                        <AntdInput disabled />
-                    </AntdForm.Item>
-                    <AntdForm.Item
-                        name={'name'}
-                        label={'名称'}
-                        rules={[{ required: true, whitespace: false }]}
-                    >
-                        <AntdInput allowClear />
-                    </AntdForm.Item>
-                    <AntdForm.Item name={'powerIds'} label={'权限'}>
-                        <AntdTreeSelect
-                            treeData={powerTreeData}
-                            treeCheckable
-                            treeNodeLabelProp={'fullTitle'}
-                            allowClear
-                            loading={isLoadingPower}
-                        />
-                    </AntdForm.Item>
-                    <AntdForm.Item
-                        valuePropName={'checked'}
-                        name={'enable'}
-                        label={'启用'}
-                        rules={[{ required: true, type: 'boolean' }]}
-                    >
-                        <AntdSwitch />
-                    </AntdForm.Item>
-                </AntdForm>
+                {addAndEditForm}
             </AntdDrawer>
             {contextHolder}
         </>

From 0e602224cb5e531a8970d4abfce309e34df4fe7b Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 15 Nov 2023 15:34:16 +0800
Subject: [PATCH 081/307] Optimize log page

---
 src/pages/system/Log.tsx | 121 ++++++++++++++++++++-------------------
 1 file changed, 62 insertions(+), 59 deletions(-)

diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index b3d62de..2bc9cf4 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -261,6 +261,66 @@ const Log: React.FC = () => {
         JSON.stringify(tableParams.pagination?.current)
     ])
 
+    const toolbar = (
+        <FlexBox direction={'horizontal'} gap={10}>
+            <Card style={{ overflow: 'inherit' }}>
+                <AntdInput
+                    addonBefore={
+                        <span
+                            style={{
+                                fontSize: '0.9em',
+                                color: COLOR_FONT_SECONDARY
+                            }}
+                        >
+                            请求 Url
+                        </span>
+                    }
+                    suffix={
+                        <>
+                            {!isRegexLegal ? (
+                                <span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
+                            ) : undefined}
+                            <AntdCheckbox checked={useRegex} onChange={handleOnUseRegexChange}>
+                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
+                            </AntdCheckbox>
+                        </>
+                    }
+                    allowClear
+                    value={searchRequestUrl}
+                    onChange={handleOnSearchUrlChange}
+                    onKeyDown={handleOnSearchUrlKeyDown}
+                    status={isRegexLegal ? undefined : 'error'}
+                />
+            </Card>
+            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                <AntdDatePicker.RangePicker
+                    showTime
+                    allowClear
+                    changeOnBlur
+                    onChange={handleOnDateRangeChange}
+                />
+            </Card>
+            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
+                    查询
+                </AntdButton>
+            </Card>
+        </FlexBox>
+    )
+
+    const table = (
+        <Card>
+            <AntdTable
+                dataSource={logData}
+                columns={dataColumns}
+                rowKey={(record) => record.id}
+                pagination={tableParams.pagination}
+                loading={loading}
+                onChange={handleOnTableChange}
+            />
+        </Card>
+    )
+
     return (
         <>
             <FitFullScreen>
@@ -270,65 +330,8 @@ const Log: React.FC = () => {
                     autoHideWaitingTime={500}
                 >
                     <FlexBox gap={20}>
-                        <FlexBox direction={'horizontal'} gap={10}>
-                            <Card style={{ overflow: 'inherit' }}>
-                                <AntdInput
-                                    addonBefore={
-                                        <span
-                                            style={{
-                                                fontSize: '0.9em',
-                                                color: COLOR_FONT_SECONDARY
-                                            }}
-                                        >
-                                            请求 Url
-                                        </span>
-                                    }
-                                    suffix={
-                                        <>
-                                            {!isRegexLegal ? (
-                                                <span style={{ color: COLOR_ERROR_SECONDARY }}>
-                                                    非法表达式
-                                                </span>
-                                            ) : undefined}
-                                            <AntdCheckbox
-                                                checked={useRegex}
-                                                onChange={handleOnUseRegexChange}
-                                            >
-                                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
-                                            </AntdCheckbox>
-                                        </>
-                                    }
-                                    allowClear
-                                    value={searchRequestUrl}
-                                    onChange={handleOnSearchUrlChange}
-                                    onKeyDown={handleOnSearchUrlKeyDown}
-                                    status={isRegexLegal ? undefined : 'error'}
-                                />
-                            </Card>
-                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
-                                <AntdDatePicker.RangePicker
-                                    showTime
-                                    allowClear
-                                    changeOnBlur
-                                    onChange={handleOnDateRangeChange}
-                                />
-                            </Card>
-                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
-                                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
-                                    查询
-                                </AntdButton>
-                            </Card>
-                        </FlexBox>
-                        <Card>
-                            <AntdTable
-                                dataSource={logData}
-                                columns={dataColumns}
-                                rowKey={(record) => record.id}
-                                pagination={tableParams.pagination}
-                                loading={loading}
-                                onChange={handleOnTableChange}
-                            />
-                        </Card>
+                        {toolbar}
+                        {table}
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>

From 326c80862290fd68250fb429f35aaea41991f758 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 15 Nov 2023 18:08:47 +0800
Subject: [PATCH 082/307] Finish group page

---
 src/constants/urls.constants.ts |   5 +-
 src/global.d.ts                 |  26 ++
 src/pages/system/Group.tsx      | 633 +++++++++++++++++++++++++++++++-
 src/pages/system/Log.tsx        |   4 +-
 src/pages/system/Role.tsx       |  28 +-
 src/services/system.tsx         |  50 ++-
 6 files changed, 717 insertions(+), 29 deletions(-)

diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 0283a42..a3bab52 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -5,4 +5,7 @@ export const URL_API_SYS_LOG = '/system/log'
 export const URL_API_SYS_USER_INFO = '/system/user/info'
 export const URL_API_SYS_USER = '/system/user'
 export const URL_API_SYS_ROLE = '/system/role'
-export const URL_API_SYS_POWER = '/system/power'
+export const URL_API_SYS_POWER_LIST = '/system/power/list'
+export const URL_API_SYS_ROLE_LIST = '/system/role/list'
+export const URL_API_SYS_GROUP = '/system/group'
+export const URL_API_SYS_GROUP_LIST = '/system/group/list'
diff --git a/src/global.d.ts b/src/global.d.ts
index 0ec2d7b..02562f2 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -233,3 +233,29 @@ interface PowerSetVo {
     elementList: ElementVo[]
     operationList: OperationVo[]
 }
+
+interface GroupGetParam extends PageParam {
+    searchName?: string
+    searchRegex?: boolean
+}
+
+interface GroupWithRoleGetVo {
+    id: string
+    name: string
+    enable: string
+    createTime: string
+    updateTime: string
+    roles: RoleVo[]
+}
+
+interface GroupAddEditParam {
+    id?: string
+    name: string
+    roleIds: number[]
+    enable: boolean
+}
+
+interface GroupChangeStatusParam {
+    id: string
+    enable: boolean
+}
diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index e7a7aa9..2b37869 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -1,7 +1,636 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import FitFullScreen from '@/components/common/FitFullScreen.tsx'
+import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import Icon from '@ant-design/icons'
+import Card from '@/components/common/Card.tsx'
+import {
+    COLOR_ERROR_SECONDARY,
+    COLOR_FONT_SECONDARY,
+    COLOR_PRODUCTION,
+    DATABASE_DELETE_SUCCESS,
+    DATABASE_DUPLICATE_KEY,
+    DATABASE_INSERT_SUCCESS,
+    DATABASE_SELECT_SUCCESS,
+    DATABASE_UPDATE_SUCCESS
+} from '@/constants/common.constants.ts'
+import { getLocalTime } from '@/utils/common.tsx'
+import {
+    r_sys_group_add,
+    r_sys_group_change_status,
+    r_sys_group_delete,
+    r_sys_group_delete_list,
+    r_sys_group_get,
+    r_sys_group_update,
+    r_sys_role_get_list
+} from '@/services/system.tsx'
 
 const Group: React.FC = () => {
-    return <></>
+    const [modal, contextHolder] = AntdModal.useModal()
+    const [form] = AntdForm.useForm<GroupAddEditParam>()
+    const formValues = AntdForm.useWatch([], form)
+    const [newFormValues, setNewFormValues] = useState<GroupAddEditParam>()
+    const [groupData, setGroupData] = useState<GroupWithRoleGetVo[]>([])
+    const [isLoading, setIsLoading] = useState(false)
+    const [tableParams, setTableParams] = useState<TableParam>({
+        pagination: {
+            current: 1,
+            pageSize: 20,
+            position: ['bottomCenter']
+        }
+    })
+    const [searchName, setSearchName] = useState('')
+    const [isUseRegex, setIsUseRegex] = useState(false)
+    const [isRegexLegal, setIsRegexLegal] = useState(true)
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const [isDrawerEdit, setIsDrawerEdit] = useState(false)
+    const [submittable, setSubmittable] = useState(false)
+    const [roleData, setRoleData] = useState<RoleVo[]>([])
+    const [isLoadingRole, setIsLoadingRole] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
+
+    const dataColumns: _ColumnsType<GroupWithRoleGetVo> = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+            width: '15%'
+        },
+        {
+            title: '角色',
+            dataIndex: 'roles',
+            render: (value: RoleVo[]) =>
+                value.length ? (
+                    value.map((role) => (
+                        <AntdTag key={role.id} color={role.enable ? 'purple' : 'orange'}>
+                            {role.name}
+                        </AntdTag>
+                    ))
+                ) : (
+                    <AntdTag>无</AntdTag>
+                )
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            width: '10%',
+            align: 'center',
+            render: (value: string) => getLocalTime(value)
+        },
+        {
+            title: '修改时间',
+            dataIndex: 'updateTime',
+            width: '10%',
+            align: 'center',
+            render: (value: string) => getLocalTime(value)
+        },
+        {
+            title: '状态',
+            dataIndex: 'enable',
+            width: '5%',
+            align: 'center',
+            render: (value) =>
+                value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>
+        },
+        {
+            title: '操作',
+            dataIndex: 'enable',
+            width: '15em',
+            align: 'center',
+            render: (value, record) => (
+                <>
+                    <AntdSpace size={'middle'}>
+                        {value ? (
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnChangStatusBtnClick(record.id, false)}
+                            >
+                                禁用
+                            </a>
+                        ) : (
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnChangStatusBtnClick(record.id, true)}
+                            >
+                                启用
+                            </a>
+                        )}
+                        <a
+                            style={{ color: COLOR_PRODUCTION }}
+                            onClick={handleOnEditBtnClick(record)}
+                        >
+                            编辑
+                        </a>
+                        <a
+                            style={{ color: COLOR_PRODUCTION }}
+                            onClick={handleOnDeleteBtnClick(record)}
+                        >
+                            删除
+                        </a>
+                    </AntdSpace>
+                </>
+            )
+        }
+    ]
+
+    const handleOnTableChange = (
+        pagination: _TablePaginationConfig,
+        filters: Record<string, _FilterValue | null>,
+        sorter: _SorterResult<GroupWithRoleGetVo> | _SorterResult<GroupWithRoleGetVo>[]
+    ) => {
+        if (Array.isArray(sorter)) {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.map((value) => value.field).join(',')
+            })
+        } else {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.field,
+                sortOrder: sorter.order
+            })
+        }
+
+        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+            setGroupData([])
+        }
+    }
+
+    const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
+        setTableSelectedItem(selectedRowKeys)
+    }
+
+    const handleOnAddBtnClick = () => {
+        setIsDrawerEdit(false)
+        setIsDrawerOpen(true)
+        form.setFieldValue('id', undefined)
+        form.setFieldValue('name', newFormValues?.name)
+        form.setFieldValue('roleIds', newFormValues?.roleIds)
+        form.setFieldValue('enable', newFormValues?.enable ?? true)
+    }
+
+    const handleOnListDeleteBtnClick = () => {
+        modal
+            .confirm({
+                title: '确定删除',
+                content: `确定删除选中的 ${tableSelectedItem.length} 个用户组吗？`
+            })
+            .then(
+                (confirmed) => {
+                    if (confirmed) {
+                        setIsLoading(true)
+
+                        void r_sys_group_delete_list(tableSelectedItem)
+                            .then((res) => {
+                                const data = res.data
+
+                                if (data.code === DATABASE_DELETE_SUCCESS) {
+                                    void message.success('删除成功')
+                                    setTimeout(() => {
+                                        getGroup()
+                                    })
+                                } else {
+                                    void message.error('删除失败，请稍后重试')
+                                }
+                            })
+                            .finally(() => {
+                                setIsLoading(false)
+                            })
+                    }
+                },
+                () => {}
+            )
+    }
+
+    const handleOnEditBtnClick = (value: GroupWithRoleGetVo) => {
+        return () => {
+            setIsDrawerEdit(true)
+            setIsDrawerOpen(true)
+            form.setFieldValue('id', value.id)
+            form.setFieldValue('name', value.name)
+            form.setFieldValue(
+                'roleIds',
+                value.roles.map((role) => role.id)
+            )
+            form.setFieldValue('enable', value.enable)
+            void form.validateFields()
+        }
+    }
+
+    const handleOnDeleteBtnClick = (value: GroupWithRoleGetVo) => {
+        return () => {
+            modal
+                .confirm({
+                    title: '确定删除',
+                    content: `确定删除角色 ${value.name} 吗？`
+                })
+                .then(
+                    (confirmed) => {
+                        if (confirmed) {
+                            setIsLoading(true)
+
+                            void r_sys_group_delete(value.id)
+                                .then((res) => {
+                                    const data = res.data
+                                    if (data.code === DATABASE_DELETE_SUCCESS) {
+                                        void message.success('删除成功')
+                                        setTimeout(() => {
+                                            getGroup()
+                                        })
+                                    } else {
+                                        void message.error('删除失败，请稍后重试')
+                                    }
+                                })
+                                .finally(() => {
+                                    setIsLoading(false)
+                                })
+                        }
+                    },
+                    () => {}
+                )
+        }
+    }
+
+    const handleOnDrawerClose = () => {
+        setIsDrawerOpen(false)
+    }
+
+    const handleOnSubmit = () => {
+        if (isSubmitting) {
+            return
+        }
+
+        setIsSubmitting(true)
+
+        if (isDrawerEdit) {
+            void r_sys_group_update(formValues)
+                .then((res) => {
+                    const data = res.data
+                    switch (data.code) {
+                        case DATABASE_UPDATE_SUCCESS:
+                            setIsDrawerOpen(false)
+                            void message.success('更新成功')
+                            getGroup()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error('已存在相同名称的角色')
+                            break
+                        default:
+                            void message.error('更新失败，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        } else {
+            void r_sys_group_add(formValues)
+                .then((res) => {
+                    const data = res.data
+                    switch (data.code) {
+                        case DATABASE_INSERT_SUCCESS:
+                            setIsDrawerOpen(false)
+                            void message.success('添加成功')
+                            setNewFormValues(undefined)
+                            getGroup()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error('已存在相同名称的角色')
+                            break
+                        default:
+                            void message.error('添加失败，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        }
+    }
+
+    const handleOnSearchNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchName(e.target.value)
+
+        if (isUseRegex) {
+            try {
+                RegExp(e.target.value)
+                setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]')))
+            } catch (e) {
+                setIsRegexLegal(false)
+            }
+        } else {
+            setIsRegexLegal(true)
+        }
+    }
+
+    const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            getGroup()
+        }
+    }
+
+    const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
+        setIsUseRegex(e.target.checked)
+        if (e.target.checked) {
+            try {
+                RegExp(searchName)
+                setIsRegexLegal(!(searchName.includes('{}') || searchName.includes('[]')))
+            } catch (e) {
+                setIsRegexLegal(false)
+            }
+        } else {
+            setIsRegexLegal(true)
+        }
+    }
+
+    const handleOnQueryBtnClick = () => {
+        getGroup()
+    }
+
+    const handleOnChangStatusBtnClick = (id: string, newStatus: boolean) => {
+        return () => {
+            if (isLoading) {
+                return
+            }
+
+            setIsLoading(true)
+            void r_sys_group_change_status({ id, enable: newStatus })
+                .then((res) => {
+                    const data = res.data
+                    if (data.code === DATABASE_UPDATE_SUCCESS) {
+                        void message.success('更新成功')
+                        setTimeout(() => {
+                            getGroup()
+                        })
+                    } else {
+                        void message.error('更新失败，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsLoading(false)
+                })
+        }
+    }
+
+    const getGroup = () => {
+        if (isLoading) {
+            return
+        }
+
+        if (!isRegexLegal) {
+            void message.error('非法正则表达式')
+            return
+        }
+
+        setIsLoading(true)
+
+        void r_sys_group_get({
+            currentPage: tableParams.pagination?.current,
+            pageSize: tableParams.pagination?.pageSize,
+            sortField:
+                tableParams.sortField && tableParams.sortOrder
+                    ? (tableParams.sortField as string)
+                    : undefined,
+            sortOrder:
+                tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
+            searchName: searchName.trim().length ? searchName : undefined,
+            searchRegex: isUseRegex ? isUseRegex : undefined,
+            ...tableParams.filters
+        })
+            .then((res) => {
+                const data = res.data
+                if (data.code === DATABASE_SELECT_SUCCESS) {
+                    const records = data.data?.records
+
+                    records && setGroupData(records)
+                    data.data &&
+                        setTableParams({
+                            ...tableParams,
+                            pagination: {
+                                ...tableParams.pagination,
+                                total: data.data.total
+                            }
+                        })
+                } else {
+                    void message.error('获取失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoading(false)
+            })
+    }
+
+    const getRoleData = () => {
+        if (isLoadingRole) {
+            return
+        }
+
+        setIsLoadingRole(true)
+
+        void r_sys_role_get_list()
+            .then((res) => {
+                const data = res.data
+
+                if (data.code === DATABASE_SELECT_SUCCESS) {
+                    data.data && setRoleData(data.data)
+                } else {
+                    void message.error('获取角色列表失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoadingRole(false)
+            })
+    }
+
+    useEffect(() => {
+        form.validateFields({ validateOnly: true }).then(
+            () => {
+                setSubmittable(true)
+            },
+            () => {
+                setSubmittable(false)
+            }
+        )
+
+        if (!isDrawerEdit && formValues) {
+            setNewFormValues({
+                name: formValues.name,
+                roleIds: formValues.roleIds,
+                enable: formValues.enable
+            })
+        }
+    }, [formValues])
+
+    useEffect(() => {
+        getRoleData()
+    }, [])
+
+    useEffect(() => {
+        getGroup()
+    }, [
+        JSON.stringify(tableParams.filters),
+        JSON.stringify(tableParams.sortField),
+        JSON.stringify(tableParams.sortOrder),
+        JSON.stringify(tableParams.pagination?.pageSize),
+        JSON.stringify(tableParams.pagination?.current)
+    ])
+
+    const toolbar = (
+        <FlexBox direction={'horizontal'} gap={10}>
+            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                <AntdButton
+                    type={'primary'}
+                    style={{ padding: '4px 8px' }}
+                    onClick={handleOnAddBtnClick}
+                >
+                    <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
+                </AntdButton>
+            </Card>
+            <Card
+                hidden={tableSelectedItem.length === 0}
+                style={{ overflow: 'inherit', flex: '0 0 auto' }}
+            >
+                <AntdButton style={{ padding: '4px 8px' }} onClick={handleOnListDeleteBtnClick}>
+                    <Icon component={IconFatwebDelete} style={{ fontSize: '1.2em' }} />
+                </AntdButton>
+            </Card>
+            <Card style={{ overflow: 'inherit' }}>
+                <AntdInput
+                    addonBefore={
+                        <span
+                            style={{
+                                fontSize: '0.9em',
+                                color: COLOR_FONT_SECONDARY
+                            }}
+                        >
+                            名称
+                        </span>
+                    }
+                    suffix={
+                        <>
+                            {!isRegexLegal ? (
+                                <span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
+                            ) : undefined}
+                            <AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
+                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
+                            </AntdCheckbox>
+                        </>
+                    }
+                    allowClear
+                    value={searchName}
+                    onChange={handleOnSearchNameChange}
+                    onKeyDown={handleOnSearchNameKeyDown}
+                    status={isRegexLegal ? undefined : 'error'}
+                />
+            </Card>
+            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
+                    查询
+                </AntdButton>
+            </Card>
+        </FlexBox>
+    )
+
+    const table = (
+        <Card>
+            <AntdTable
+                dataSource={groupData}
+                columns={dataColumns}
+                rowKey={(record) => record.id}
+                pagination={tableParams.pagination}
+                loading={isLoading}
+                onChange={handleOnTableChange}
+                rowSelection={{
+                    type: 'checkbox',
+                    onChange: handleOnTableSelectChange
+                }}
+            />
+        </Card>
+    )
+
+    const drawerToolbar = (
+        <AntdSpace>
+            <AntdTooltip title={'刷新角色列表'}>
+                <AntdButton onClick={getRoleData} disabled={isSubmitting}>
+                    <Icon component={IconFatwebRefresh} />
+                </AntdButton>
+            </AntdTooltip>
+            <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
+                取消
+            </AntdButton>
+            <AntdButton
+                type={'primary'}
+                disabled={!submittable}
+                loading={isSubmitting}
+                onClick={handleOnSubmit}
+            >
+                提交
+            </AntdButton>
+        </AntdSpace>
+    )
+
+    const addAndEditForm = (
+        <AntdForm form={form} disabled={isSubmitting}>
+            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+                <AntdInput disabled />
+            </AntdForm.Item>
+            <AntdForm.Item
+                name={'name'}
+                label={'名称'}
+                rules={[{ required: true, whitespace: false }]}
+            >
+                <AntdInput allowClear />
+            </AntdForm.Item>
+            <AntdForm.Item name={'roleIds'} label={'角色'}>
+                <AntdSelect
+                    mode={'multiple'}
+                    allowClear
+                    showSearch
+                    options={roleData.map((value) => ({
+                        value: value.id,
+                        label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
+                    }))}
+                />
+            </AntdForm.Item>
+            <AntdForm.Item
+                valuePropName={'checked'}
+                name={'enable'}
+                label={'启用'}
+                rules={[{ required: true, type: 'boolean' }]}
+            >
+                <AntdSwitch />
+            </AntdForm.Item>
+        </AntdForm>
+    )
+
+    return (
+        <>
+            <FitFullScreen>
+                <HideScrollbar
+                    style={{ padding: 30 }}
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={500}
+                >
+                    <FlexBox gap={20}>
+                        {toolbar}
+                        {table}
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullScreen>
+            <AntdDrawer
+                title={isDrawerEdit ? '编辑用户组' : '添加用户组'}
+                width={'36vw'}
+                onClose={handleOnDrawerClose}
+                open={isDrawerOpen}
+                closable={!isSubmitting}
+                maskClosable={!isSubmitting}
+                extra={drawerToolbar}
+            >
+                {addAndEditForm}
+            </AntdDrawer>
+            {contextHolder}
+        </>
+    )
 }
 
 export default Group
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 2bc9cf4..69eff9f 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import Card from '@/components/common/Card'
-import { r_sysLog_get } from '@/services/system'
+import { r_sys_log_get } from '@/services/system'
 import {
     COLOR_ERROR_SECONDARY,
     COLOR_FONT_SECONDARY,
@@ -215,7 +215,7 @@ const Log: React.FC = () => {
 
         setLoading(true)
 
-        void r_sysLog_get({
+        void r_sys_log_get({
             currentPage: tableParams.pagination?.current,
             pageSize: tableParams.pagination?.pageSize,
             sortField:
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index 7271be0..f1451b8 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -4,13 +4,13 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 import {
-    r_role_add,
-    r_role_changStatus,
-    r_power_get,
-    r_role_get,
-    r_role_update,
-    r_role_delete,
-    r_role_delete_list
+    r_sys_role_add,
+    r_sys_role_change_status,
+    r_sys_power_get_list,
+    r_sys_role_get,
+    r_sys_role_update,
+    r_sys_role_delete,
+    r_sys_role_delete_list
 } from '@/services/system'
 import {
     COLOR_ERROR_SECONDARY,
@@ -174,7 +174,7 @@ const Role: React.FC = () => {
                     if (confirmed) {
                         setIsLoading(true)
 
-                        void r_role_delete_list(tableSelectedItem)
+                        void r_sys_role_delete_list(tableSelectedItem)
                             .then((res) => {
                                 const data = res.data
 
@@ -223,7 +223,7 @@ const Role: React.FC = () => {
                         if (confirmed) {
                             setIsLoading(true)
 
-                            void r_role_delete(value.id)
+                            void r_sys_role_delete(value.id)
                                 .then((res) => {
                                     const data = res.data
                                     if (data.code === DATABASE_DELETE_SUCCESS) {
@@ -257,7 +257,7 @@ const Role: React.FC = () => {
         setIsSubmitting(true)
 
         if (isDrawerEdit) {
-            void r_role_update(formValues)
+            void r_sys_role_update(formValues)
                 .then((res) => {
                     const data = res.data
                     switch (data.code) {
@@ -277,7 +277,7 @@ const Role: React.FC = () => {
                     setIsSubmitting(false)
                 })
         } else {
-            void r_role_add(formValues)
+            void r_sys_role_add(formValues)
                 .then((res) => {
                     const data = res.data
                     switch (data.code) {
@@ -346,7 +346,7 @@ const Role: React.FC = () => {
             }
 
             setIsLoading(true)
-            void r_role_changStatus({ id, enable: newStatus })
+            void r_sys_role_change_status({ id, enable: newStatus })
                 .then((res) => {
                     const data = res.data
                     if (data.code === DATABASE_UPDATE_SUCCESS) {
@@ -376,7 +376,7 @@ const Role: React.FC = () => {
 
         setIsLoading(true)
 
-        void r_role_get({
+        void r_sys_role_get({
             currentPage: tableParams.pagination?.current,
             pageSize: tableParams.pagination?.pageSize,
             sortField:
@@ -430,7 +430,7 @@ const Role: React.FC = () => {
 
         setIsLoadingPower(true)
 
-        void r_power_get()
+        void r_sys_power_get_list()
             .then((res) => {
                 const data = res.data
 
diff --git a/src/services/system.tsx b/src/services/system.tsx
index b385b3e..16e662b 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,23 +1,53 @@
 import React from 'react'
 import request from '@/services/index'
-import { URL_API_SYS_LOG, URL_API_SYS_POWER, URL_API_SYS_ROLE } from '@/constants/urls.constants'
+import {
+    URL_API_SYS_LOG,
+    URL_API_SYS_POWER_LIST,
+    URL_API_SYS_ROLE,
+    URL_API_SYS_ROLE_LIST,
+    URL_API_SYS_GROUP,
+    URL_API_SYS_GROUP_LIST
+} from '@/constants/urls.constants'
 
-export const r_sysLog_get = (param: SysLogGetParam) =>
+export const r_sys_log_get = (param: SysLogGetParam) =>
     request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })
 
-export const r_role_get = (param: RoleGetParam) =>
+export const r_sys_power_get_list = () => request.get<PowerSetVo>(URL_API_SYS_POWER_LIST)
+
+export const r_sys_role_get = (param: RoleGetParam) =>
     request.get<PageVo<RoleWithPowerGetVo>>(URL_API_SYS_ROLE, { ...param })
 
-export const r_role_changStatus = (param: RoleChangeStatusParam) =>
+export const r_sys_role_get_list = () => request.get<RoleVo[]>(URL_API_SYS_ROLE_LIST)
+
+export const r_sys_role_change_status = (param: RoleChangeStatusParam) =>
     request.patch<never>(URL_API_SYS_ROLE, { ...param })
 
-export const r_power_get = () => request.get<PowerSetVo>(URL_API_SYS_POWER)
+export const r_sys_role_add = (param: RoleAddEditParam) =>
+    request.post(URL_API_SYS_ROLE, { ...param })
 
-export const r_role_add = (param: RoleAddEditParam) => request.post(URL_API_SYS_ROLE, { ...param })
-
-export const r_role_update = (param: RoleAddEditParam) =>
+export const r_sys_role_update = (param: RoleAddEditParam) =>
     request.put(URL_API_SYS_ROLE, { ...param })
 
-export const r_role_delete = (id: string) => request.delete(`${URL_API_SYS_ROLE}/${id}`)
+export const r_sys_role_delete = (id: string) => request.delete(`${URL_API_SYS_ROLE}/${id}`)
 
-export const r_role_delete_list = (ids: React.Key[]) => request.delete(URL_API_SYS_ROLE, { ids })
+export const r_sys_role_delete_list = (ids: React.Key[]) =>
+    request.delete(URL_API_SYS_ROLE, { ids })
+
+export const r_sys_group_get = (param: GroupGetParam) =>
+    request.get<PageVo<GroupWithRoleGetVo>>(URL_API_SYS_GROUP, { ...param })
+
+export const r_sys_group_get_list = () => request.get<GroupVo[]>(URL_API_SYS_GROUP_LIST)
+
+export const r_sys_group_change_status = (param: GroupChangeStatusParam) =>
+    request.patch<never>(URL_API_SYS_GROUP, { ...param })
+
+export const r_sys_group_add = (param: GroupAddEditParam) =>
+    request.post(URL_API_SYS_GROUP, { ...param })
+
+export const r_sys_group_update = (param: GroupAddEditParam) =>
+    request.put(URL_API_SYS_GROUP, { ...param })
+
+export const r_sys_group_delete = (id: string) => request.delete(`${URL_API_SYS_GROUP}/${id}`)
+
+export const r_sys_group_delete_list = (ids: React.Key[]) =>
+    request.delete(URL_API_SYS_GROUP, { ids })

From 4a16367f4584f1eb1e576b2105c0625f25ecf009 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 15 Nov 2023 18:20:11 +0800
Subject: [PATCH 083/307] Add search to select

---
 src/pages/system/Group.tsx | 4 ++++
 src/pages/system/Role.tsx  | 1 +
 2 files changed, 5 insertions(+)

diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index 2b37869..c7546a9 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -257,6 +257,9 @@ const Group: React.FC = () => {
         setIsDrawerOpen(false)
     }
 
+    const filterOption = (input: string, option?: { label: string; value: string }) =>
+        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+
     const handleOnSubmit = () => {
         if (isSubmitting) {
             return
@@ -586,6 +589,7 @@ const Group: React.FC = () => {
                     mode={'multiple'}
                     allowClear
                     showSearch
+                    filterOption={filterOption}
                     options={roleData.map((value) => ({
                         value: value.id,
                         label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index f1451b8..81fd501 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -599,6 +599,7 @@ const Role: React.FC = () => {
                     treeCheckable
                     treeNodeLabelProp={'fullTitle'}
                     allowClear
+                    treeNodeFilterProp={'fullTitle'}
                     loading={isLoadingPower}
                 />
             </AntdForm.Item>

From fedd2f6e8cec2a296d3d22fb7b9bcde8bcbee84f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 16 Nov 2023 09:19:45 +0800
Subject: [PATCH 084/307] Optimize code

---
 src/pages/system/Group.tsx | 14 +++++++-------
 src/pages/system/User.tsx  |  4 ++--
 src/services/auth.tsx      |  4 ++--
 src/services/system.tsx    | 14 ++++++++++----
 src/services/user.tsx      |  6 ------
 src/utils/auth.ts          | 10 +++++-----
 6 files changed, 26 insertions(+), 26 deletions(-)
 delete mode 100644 src/services/user.tsx

diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index c7546a9..fa47112 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
-import FitFullScreen from '@/components/common/FitFullScreen.tsx'
-import HideScrollbar from '@/components/common/HideScrollbar.tsx'
-import FlexBox from '@/components/common/FlexBox.tsx'
 import Icon from '@ant-design/icons'
-import Card from '@/components/common/Card.tsx'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
 import {
     COLOR_ERROR_SECONDARY,
     COLOR_FONT_SECONDARY,
@@ -13,8 +13,8 @@ import {
     DATABASE_INSERT_SUCCESS,
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
-} from '@/constants/common.constants.ts'
-import { getLocalTime } from '@/utils/common.tsx'
+} from '@/constants/common.constants'
+import { getLocalTime } from '@/utils/common'
 import {
     r_sys_group_add,
     r_sys_group_change_status,
@@ -23,7 +23,7 @@ import {
     r_sys_group_get,
     r_sys_group_update,
     r_sys_role_get_list
-} from '@/services/system.tsx'
+} from '@/services/system'
 
 const Group: React.FC = () => {
     const [modal, contextHolder] = AntdModal.useModal()
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 95d79f5..cf0215f 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { r_getUserList } from '@/services/user'
+import { r_sys_user } from '@/services/system'
 import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { ColumnsType } from 'antd/es/table/interface'
 
@@ -32,7 +32,7 @@ const User: React.FC = () => {
     ]
 
     useEffect(() => {
-        r_getUserList().then((res) => {
+        r_sys_user().then((res) => {
             const data = res.data
             if (data.code === DATABASE_SELECT_SUCCESS) {
                 data.data && setUserList(data.data)
diff --git a/src/services/auth.tsx b/src/services/auth.tsx
index 27ac85b..75a3246 100644
--- a/src/services/auth.tsx
+++ b/src/services/auth.tsx
@@ -1,10 +1,10 @@
 import request from '@/services'
 import { URL_API_LOGIN, URL_API_LOGOUT } from '@/constants/urls.constants'
 
-export const r_login = (username: string, password: string) =>
+export const r_auth_login = (username: string, password: string) =>
     request.post<TokenVo>(URL_API_LOGIN, {
         username,
         password
     })
 
-export const r_logout = () => request.post(URL_API_LOGOUT)
+export const r_auth_logout = () => request.post(URL_API_LOGOUT)
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 16e662b..d499f8d 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,16 +1,19 @@
 import React from 'react'
 import request from '@/services/index'
 import {
-    URL_API_SYS_LOG,
+    URL_API_SYS_USER_INFO,
+    URL_API_SYS_USER,
     URL_API_SYS_POWER_LIST,
     URL_API_SYS_ROLE,
     URL_API_SYS_ROLE_LIST,
     URL_API_SYS_GROUP,
-    URL_API_SYS_GROUP_LIST
+    URL_API_SYS_GROUP_LIST,
+    URL_API_SYS_LOG
 } from '@/constants/urls.constants'
 
-export const r_sys_log_get = (param: SysLogGetParam) =>
-    request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })
+export const r_sys_user_info = () => request.get<UserWithPowerInfoVo>(URL_API_SYS_USER_INFO)
+
+export const r_sys_user = () => request.get<UserWithRoleInfoVo[]>(URL_API_SYS_USER)
 
 export const r_sys_power_get_list = () => request.get<PowerSetVo>(URL_API_SYS_POWER_LIST)
 
@@ -51,3 +54,6 @@ export const r_sys_group_delete = (id: string) => request.delete(`${URL_API_SYS_
 
 export const r_sys_group_delete_list = (ids: React.Key[]) =>
     request.delete(URL_API_SYS_GROUP, { ids })
+
+export const r_sys_log_get = (param: SysLogGetParam) =>
+    request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })
diff --git a/src/services/user.tsx b/src/services/user.tsx
deleted file mode 100644
index fc9a977..0000000
--- a/src/services/user.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import request from '@/services'
-import { URL_API_SYS_USER_INFO, URL_API_SYS_USER } from '@/constants/urls.constants'
-
-export const r_getInfo = () => request.get<UserWithPowerInfoVo>(URL_API_SYS_USER_INFO)
-
-export const r_getUserList = () => request.get<UserWithRoleInfoVo[]>(URL_API_SYS_USER)
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index a8bb4df..54761f9 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,6 +1,6 @@
 import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common'
-import { r_login, r_logout } from '@/services/auth'
-import { r_getInfo } from '@/services/user'
+import { r_auth_login, r_auth_logout } from '@/services/auth'
+import { r_sys_user_info } from '@/services/system'
 import {
     STORAGE_TOKEN_KEY,
     STORAGE_USER_INFO_KEY,
@@ -10,11 +10,11 @@ import {
 let captcha: Captcha
 
 export const login = async (username: string, password: string) => {
-    return await r_login(username, password)
+    return await r_auth_login(username, password)
 }
 
 export const logout = async () => {
-    return r_logout().finally(() => {
+    return r_auth_logout().finally(() => {
         removeToken()
     })
 }
@@ -37,7 +37,7 @@ export const getUserInfo = async (): Promise<UserWithPowerInfoVo> => {
 export const requestUserInfo = async () => {
     let user: UserWithPowerInfoVo | null
 
-    await r_getInfo().then((value) => {
+    await r_sys_user_info().then((value) => {
         const response = value.data
         if (response.code === DATABASE_SELECT_SUCCESS) {
             user = response.data

From 7c0508e2f7a8ad12be5a0c23129b7a5dbd605b6e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 28 Nov 2023 10:05:51 +0800
Subject: [PATCH 085/307] Update ResponseCode

---
 src/constants/common.constants.ts | 59 ++++++++++++++++++-------------
 src/pages/Login.tsx               | 16 ++++-----
 src/services/index.tsx            | 20 +++++------
 3 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 9d8d803..1a155b5 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -24,31 +24,40 @@ export const SIZE_ICON_XL = '64px'
  * Response code
  */
 export const SYSTEM_OK = 10000
-export const SYSTEM_LOGIN_SUCCESS = 10020
-export const SYSTEM_PASSWORD_CHANGE_SUCCESS = 10021
-export const SYSTEM_LOGOUT_SUCCESS = 10022
-export const SYSTEM_TOKEN_RENEW_SUCCESS = 10023
-export const SYSTEM_UNAUTHORIZED = 10030
-export const SYSTEM_USERNAME_NOT_FOUND = 10031
-export const SYSTEM_ACCESS_DENIED = 10032
-export const SYSTEM_USER_DISABLE = 10033
-export const SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR = 10034
-export const SYSTEM_OLD_PASSWORD_NOT_MATCH = 10035
-export const SYSTEM_LOGOUT_FAILED = 10036
-export const SYSTEM_TOKEN_ILLEGAL = 10037
-export const SYSTEM_TOKEN_HAS_EXPIRED = 10038
-export const SYSTEM_REQUEST_ILLEGAL = 10040
-export const SYSTEM_ARGUMENT_NOT_VALID = 10041
+
 export const SYSTEM_ERROR = 10050
 export const SYSTEM_TIMEOUT = 10051
+export const SYSTEM_REQUEST_ILLEGAL = 10052
+export const SYSTEM_ARGUMENT_NOT_VALID = 10053
 
-export const DATABASE_SELECT_SUCCESS = 20000
-export const DATABASE_SELECT_FAILED = 20005
-export const DATABASE_INSERT_SUCCESS = 20010
-export const DATABASE_INSERT_FAILED = 20015
-export const DATABASE_UPDATE_SUCCESS = 20020
-export const DATABASE_UPDATE_FILED = 20025
-export const DATABASE_DELETE_SUCCESS = 20030
-export const DATABASE_DELETE_FILED = 20035
-export const DATABASE_EXECUTE_ERROR = 20040
-export const DATABASE_DUPLICATE_KEY = 20045
+export const PERMISSION_LOGIN_SUCCESS = 20000
+export const PERMISSION_PASSWORD_CHANGE_SUCCESS = 20001
+export const PERMISSION_LOGOUT_SUCCESS = 20002
+export const PERMISSION_TOKEN_RENEW_SUCCESS = 20003
+
+export const PERMISSION_UNAUTHORIZED = 20050
+export const PERMISSION_USERNAME_NOT_FOUND = 20051
+export const PERMISSION_ACCESS_DENIED = 20052
+export const PERMISSION_USER_LOCKED = 20053
+export const PERMISSION_USER_EXPIRED = 20054
+export const PERMISSION_USER_CREDENTIALS_EXPIRED = 20055
+export const PERMISSION_USER_DISABLE = 20056
+export const PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR = 20057
+export const PERMISSION_OLD_PASSWORD_NOT_MATCH = 20058
+export const PERMISSION_LOGOUT_FAILED = 20059
+export const PERMISSION_TOKEN_ILLEGAL = 20060
+export const PERMISSION_TOKEN_HAS_EXPIRED = 20061
+
+export const DATABASE_SELECT_SUCCESS = 30000
+export const DATABASE_SELECT_FAILED = 30005
+export const DATABASE_INSERT_SUCCESS = 30010
+export const DATABASE_INSERT_FAILED = 30015
+export const DATABASE_UPDATE_SUCCESS = 30020
+export const DATABASE_UPDATE_FILED = 30025
+export const DATABASE_DELETE_SUCCESS = 30030
+export const DATABASE_DELETE_FILED = 30035
+export const DATABASE_EXECUTE_ERROR = 30050
+export const DATABASE_DUPLICATE_KEY = 30051
+
+export const API_AVATAR_SUCCESS = 50100
+export const API_AVATAR_ERROR = 50150
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 8a45882..6f1feae 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -4,10 +4,10 @@ import '@/assets/css/pages/login.scss'
 import { getLocalTime, setToken } from '@/utils/common'
 import { getUserInfo, login } from '@/utils/auth'
 import {
-    SYSTEM_LOGIN_SUCCESS,
-    SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR,
-    SYSTEM_USER_DISABLE,
-    SYSTEM_USERNAME_NOT_FOUND
+    PERMISSION_LOGIN_SUCCESS,
+    PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
+    PERMISSION_USER_DISABLE,
+    PERMISSION_USERNAME_NOT_FOUND
 } from '@/constants/common.constants'
 
 const Login: React.FC = () => {
@@ -23,7 +23,7 @@ const Login: React.FC = () => {
                 const res = value.data
                 const { code, data } = res
                 switch (code) {
-                    case SYSTEM_LOGIN_SUCCESS:
+                    case PERMISSION_LOGIN_SUCCESS:
                         setToken(data?.token ?? '')
                         void messageApi.success('登录成功')
                         setTimeout(() => {
@@ -53,8 +53,8 @@ const Login: React.FC = () => {
                             })
                         }, 1500)
                         break
-                    case SYSTEM_USERNAME_NOT_FOUND:
-                    case SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR:
+                    case PERMISSION_USERNAME_NOT_FOUND:
+                    case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
                         void messageApi.error(
                             <>
                                 <strong>用户名</strong>或<strong>密码</strong>错误，请重试
@@ -62,7 +62,7 @@ const Login: React.FC = () => {
                         )
                         setIsLoggingIn(false)
                         break
-                    case SYSTEM_USER_DISABLE:
+                    case PERMISSION_USER_DISABLE:
                         void messageApi.error(
                             <>
                                 该用户已被<strong>禁用</strong>
diff --git a/src/services/index.tsx b/src/services/index.tsx
index fcbf261..2bd40df 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -3,11 +3,11 @@ import { jwtDecode, JwtPayload } from 'jwt-decode'
 import { message } from 'antd'
 import { getToken, removeToken, setToken } from '@/utils/common'
 import {
-    SYSTEM_ACCESS_DENIED,
-    SYSTEM_TOKEN_HAS_EXPIRED,
-    SYSTEM_TOKEN_ILLEGAL,
-    SYSTEM_TOKEN_RENEW_SUCCESS,
-    SYSTEM_UNAUTHORIZED
+    PERMISSION_ACCESS_DENIED,
+    PERMISSION_TOKEN_HAS_EXPIRED,
+    PERMISSION_TOKEN_ILLEGAL,
+    PERMISSION_TOKEN_RENEW_SUCCESS,
+    PERMISSION_UNAUTHORIZED
 } from '@/constants/common.constants'
 
 const service: AxiosInstance = axios.create({
@@ -46,7 +46,7 @@ service.interceptors.request.use(
                     })
                     .then((value: AxiosResponse<_Response<TokenVo>>) => {
                         const response = value.data
-                        if (response.code === SYSTEM_TOKEN_RENEW_SUCCESS) {
+                        if (response.code === PERMISSION_TOKEN_RENEW_SUCCESS) {
                             setToken(response.data?.token ?? '')
                         }
                     })
@@ -65,7 +65,7 @@ service.interceptors.request.use(
 service.interceptors.response.use(
     (response: AxiosResponse<_Response<never>>) => {
         switch (response.data.code) {
-            case SYSTEM_UNAUTHORIZED:
+            case PERMISSION_UNAUTHORIZED:
                 removeToken()
                 void message.error(
                     <>
@@ -76,8 +76,8 @@ service.interceptors.response.use(
                     location.reload()
                 }, 1500)
                 throw response?.data
-            case SYSTEM_TOKEN_ILLEGAL:
-            case SYSTEM_TOKEN_HAS_EXPIRED:
+            case PERMISSION_TOKEN_ILLEGAL:
+            case PERMISSION_TOKEN_HAS_EXPIRED:
                 removeToken()
                 void message.error(
                     <>
@@ -88,7 +88,7 @@ service.interceptors.response.use(
                     location.reload()
                 }, 1500)
                 throw response?.data
-            case SYSTEM_ACCESS_DENIED:
+            case PERMISSION_ACCESS_DENIED:
                 void message.error(
                     <>
                         <strong>暂无权限操作</strong>

From 039fa396aba65b352c63714b93318e16830a5dd2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 28 Nov 2023 18:15:21 +0800
Subject: [PATCH 086/307] Add user management page

---
 src/constants/common.constants.ts |   1 +
 src/constants/urls.constants.ts   |  24 +-
 src/global.d.ts                   |  29 +-
 src/pages/Login.tsx               |   9 +-
 src/pages/system/User.tsx         | 790 +++++++++++++++++++++++++++++-
 src/services/api/avatar.ts        |   5 +
 src/services/auth.tsx             |   6 +-
 src/services/system.tsx           |  64 +--
 src/utils/common.tsx              |   4 +
 9 files changed, 865 insertions(+), 67 deletions(-)
 create mode 100644 src/services/api/avatar.ts

diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 1a155b5..36d67c3 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -58,6 +58,7 @@ export const DATABASE_DELETE_SUCCESS = 30030
 export const DATABASE_DELETE_FILED = 30035
 export const DATABASE_EXECUTE_ERROR = 30050
 export const DATABASE_DUPLICATE_KEY = 30051
+export const DATABASE_NO_RECORD_FOUND = 30052
 
 export const API_AVATAR_SUCCESS = 50100
 export const API_AVATAR_ERROR = 50150
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index a3bab52..181effc 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -1,11 +1,13 @@
-export const URL_API_LOGIN = '/login'
-export const URL_API_TOKEN = '/token'
-export const URL_API_LOGOUT = '/logout'
-export const URL_API_SYS_LOG = '/system/log'
-export const URL_API_SYS_USER_INFO = '/system/user/info'
-export const URL_API_SYS_USER = '/system/user'
-export const URL_API_SYS_ROLE = '/system/role'
-export const URL_API_SYS_POWER_LIST = '/system/power/list'
-export const URL_API_SYS_ROLE_LIST = '/system/role/list'
-export const URL_API_SYS_GROUP = '/system/group'
-export const URL_API_SYS_GROUP_LIST = '/system/group/list'
+export const URL_LOGIN = '/login'
+export const URL_TOKEN = '/token'
+export const URL_LOGOUT = '/logout'
+export const URL_SYS_LOG = '/system/log'
+export const URL_SYS_USER_INFO = '/system/user/info'
+export const URL_SYS_USER = '/system/user'
+export const URL_SYS_ROLE = '/system/role'
+export const URL_SYS_POWER_LIST = '/system/power/list'
+export const URL_SYS_ROLE_LIST = '/system/role/list'
+export const URL_SYS_GROUP = '/system/group'
+export const URL_SYS_GROUP_LIST = '/system/group/list'
+
+export const URL_API_V1_AVATAR_RANDOM_BASE64 = '/api/v1/avatar/base64'
diff --git a/src/global.d.ts b/src/global.d.ts
index 02562f2..587ba46 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -63,7 +63,9 @@ interface UserWithPowerInfoVo {
     locking: boolean
     expiration: string
     credentialsExpiration: string
-    enable: number
+    enable: boolean
+    currentLoginTime: string
+    currentLoginIp: string
     lastLoginTime: string
     lastLoginIp: string
     createTime: string
@@ -81,7 +83,9 @@ interface UserWithRoleInfoVo {
     locking: boolean
     expiration: string
     credentialsExpiration: string
-    enable: number
+    enable: boolean
+    currentLoginTime: string
+    currentLoginIp: string
     lastLoginTime: string
     lastLoginIp: string
     createTime: string
@@ -91,6 +95,21 @@ interface UserWithRoleInfoVo {
     groups: GroupVo[]
 }
 
+interface UserAddEditParam {
+    id?: string
+    username: string
+    password?: string
+    locking?: boolean
+    expiration?: string
+    credentialsExpiration?: string
+    enable?: boolean
+    nickname?: string
+    avatar?: string
+    email?: string
+    roleIds: number[]
+    groupIds: number[]
+}
+
 interface UserInfoVo {
     id: string
     userId: string
@@ -242,7 +261,7 @@ interface GroupGetParam extends PageParam {
 interface GroupWithRoleGetVo {
     id: string
     name: string
-    enable: string
+    enable: boolean
     createTime: string
     updateTime: string
     roles: RoleVo[]
@@ -259,3 +278,7 @@ interface GroupChangeStatusParam {
     id: string
     enable: boolean
 }
+
+interface AvatarBase64Vo {
+    base64: string
+}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 6f1feae..f59a5c9 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -42,9 +42,12 @@ const Login: React.FC = () => {
                                             </span>
                                             <br />
                                             <span>
-                                                上次登录：
-                                                {getLocalTime(user.lastLoginTime)}【
-                                                {user.lastLoginIp}】
+                                                最近登录：
+                                                {user.lastLoginTime
+                                                    ? `${getLocalTime(user.lastLoginTime)}【${
+                                                          user.lastLoginIp
+                                                      }】`
+                                                    : '无'}
                                             </span>
                                         </>
                                     ),
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index cf0215f..25512dd 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -1,15 +1,68 @@
-import React from 'react'
-import { r_sys_user } from '@/services/system'
-import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import React, { useEffect, useState } from 'react'
+import {
+    COLOR_BACKGROUND,
+    COLOR_ERROR_SECONDARY,
+    COLOR_FONT_SECONDARY,
+    COLOR_PRODUCTION,
+    DATABASE_DELETE_SUCCESS,
+    DATABASE_DUPLICATE_KEY,
+    DATABASE_INSERT_SUCCESS,
+    DATABASE_SELECT_SUCCESS,
+    DATABASE_UPDATE_SUCCESS
+} from '@/constants/common.constants'
 import { ColumnsType } from 'antd/es/table/interface'
+import FitFullScreen from '@/components/common/FitFullScreen.tsx'
+import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import Card from '@/components/common/Card.tsx'
+import Icon from '@ant-design/icons'
+import {
+    r_sys_group_get_list,
+    r_sys_role_get_list,
+    r_sys_user_add,
+    r_sys_user_delete,
+    r_sys_user_delete_list,
+    r_sys_user_get,
+    r_sys_user_update
+} from '@/services/system.tsx'
+import { getLocalTime, isPastTime } from '@/utils/common.tsx'
+import { r_api_avatar_random_base64 } from '@/services/api/avatar.ts'
+import moment from 'moment'
 
 const User: React.FC = () => {
-    const [userList, setUserList] = useState<UserWithRoleInfoVo[]>([])
+    const [modal, contextHolder] = AntdModal.useModal()
+    const [form] = AntdForm.useForm<UserAddEditParam>()
+    const formValues = AntdForm.useWatch([], form)
+    const [newFormValues, setNewFormValues] = useState<UserAddEditParam>()
+    const [userData, setUserData] = useState<UserWithRoleInfoVo[]>([])
+    const [isLoading, setIsLoading] = useState(false)
+    const [tableParams, setTableParams] = useState<TableParam>({
+        pagination: {
+            current: 1,
+            pageSize: 20,
+            position: ['bottomCenter']
+        }
+    })
+    const [searchValue, setSearchValue] = useState('')
+    const [isUseRegex, setIsUseRegex] = useState(false)
+    const [isRegexLegal, setIsRegexLegal] = useState(true)
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const [isDrawerEdit, setIsDrawerEdit] = useState(false)
+    const [submittable, setSubmittable] = useState(false)
+    const [roleData, setRoleData] = useState<RoleVo[]>([])
+    const [groupData, setGroupData] = useState<GroupVo[]>([])
+    const [isLoadingRole, setIsLoadingRole] = useState(false)
+    const [isLoadingGroup, setIsLoadingGroup] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
+    const [avatar, setAvatar] = useState('')
 
-    const tableColumns: ColumnsType<UserWithRoleInfoVo> = [
+    const dataColumns: ColumnsType<UserWithRoleInfoVo> = [
         {
-            dataIndex: 'id',
-            title: 'ID'
+            dataIndex: 'username',
+            title: '用户',
+            render: (value, record) => `${value}(${record.id})`,
+            width: '0'
         },
         {
             dataIndex: ['userInfo', 'avatar'],
@@ -19,30 +72,731 @@ const User: React.FC = () => {
                     src={<img src={`data:image/png;base64,${value}`} alt={'avatar'} />}
                     style={{ background: COLOR_BACKGROUND }}
                 />
-            )
-        },
-        {
-            dataIndex: 'username',
-            title: '用户名'
+            ),
+            width: '0',
+            align: 'center'
         },
         {
             dataIndex: ['userInfo', 'nickname'],
             title: '昵称'
+        },
+        {
+            dataIndex: ['userInfo', 'email'],
+            title: '邮箱'
+        },
+        {
+            dataIndex: ['roles'],
+            title: '角色',
+            render: (value: RoleVo[], record) =>
+                record.id === '0' ? (
+                    <AntdTag color={'blue'}>管理员</AntdTag>
+                ) : value.length ? (
+                    value.map((role) => (
+                        <AntdTag key={role.id} color={role.enable ? 'purple' : 'orange'}>
+                            {role.name}
+                        </AntdTag>
+                    ))
+                ) : (
+                    <AntdTag>无</AntdTag>
+                ),
+            align: 'center'
+        },
+        {
+            dataIndex: ['groups'],
+            title: '用户组',
+            render: (value: GroupVo[], record) =>
+                record.id === '0' ? (
+                    <AntdTag color={'blue'}>管理员</AntdTag>
+                ) : value.length ? (
+                    value.map((role) => (
+                        <AntdTag key={role.id} color={role.enable ? 'purple' : 'orange'}>
+                            {role.name}
+                        </AntdTag>
+                    ))
+                ) : (
+                    <AntdTag>无</AntdTag>
+                ),
+            align: 'center'
+        },
+        {
+            title: '最近登录',
+            render: (_, record) =>
+                record.currentLoginTime
+                    ? `${getLocalTime(record.currentLoginTime)}【${record.currentLoginIp}】`
+                    : '无',
+            align: 'center'
+        },
+        {
+            title: '状态',
+            render: (_, record) =>
+                !record.locking &&
+                (!record.expiration || !isPastTime(record.expiration)) &&
+                (!record.credentialsExpiration || !isPastTime(record.credentialsExpiration)) &&
+                record.enable ? (
+                    <AntdTag color={'green'}>正常</AntdTag>
+                ) : (
+                    <>
+                        {record.locking ? <AntdTag>锁定</AntdTag> : undefined}
+                        {record.expiration && isPastTime(record.expiration) ? (
+                            <AntdTag>过期</AntdTag>
+                        ) : undefined}
+                        {record.credentialsExpiration &&
+                        isPastTime(record.credentialsExpiration) ? (
+                            <AntdTag>改密</AntdTag>
+                        ) : undefined}
+                        {!record.enable ? <AntdTag>禁用</AntdTag> : undefined}
+                    </>
+                ),
+            align: 'center'
+        },
+        {
+            title: '操作',
+            width: '10em',
+            align: 'center',
+            render: (_, record) => (
+                <>
+                    <AntdSpace size={'middle'}>
+                        <a
+                            style={{ color: COLOR_PRODUCTION }}
+                            onClick={handleOnEditBtnClick(record)}
+                        >
+                            编辑
+                        </a>
+                        <a
+                            style={{ color: COLOR_PRODUCTION }}
+                            onClick={handleOnDeleteBtnClick(record)}
+                        >
+                            删除
+                        </a>
+                    </AntdSpace>
+                </>
+            )
         }
     ]
 
-    useEffect(() => {
-        r_sys_user().then((res) => {
-            const data = res.data
-            if (data.code === DATABASE_SELECT_SUCCESS) {
-                data.data && setUserList(data.data)
+    const handleOnTableChange = (
+        pagination: _TablePaginationConfig,
+        filters: Record<string, _FilterValue | null>,
+        sorter: _SorterResult<UserWithRoleInfoVo> | _SorterResult<UserWithRoleInfoVo>[]
+    ) => {
+        if (Array.isArray(sorter)) {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.map((value) => value.field).join(',')
+            })
+        } else {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.field,
+                sortOrder: sorter.order
+            })
+        }
+
+        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+            setGroupData([])
+        }
+    }
+
+    const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
+        setTableSelectedItem(selectedRowKeys)
+    }
+
+    const handleOnAddBtnClick = () => {
+        setIsDrawerEdit(false)
+        setIsDrawerOpen(true)
+        form.setFieldValue('id', undefined)
+        form.setFieldValue('username', newFormValues?.username)
+        form.setFieldValue('password', undefined)
+        form.setFieldValue('locking', newFormValues?.locking ?? false)
+        form.setFieldValue('expiration', newFormValues?.expiration)
+        form.setFieldValue('credentialsExpiration', newFormValues?.credentialsExpiration)
+        form.setFieldValue('enable', newFormValues?.enable ?? true)
+        form.setFieldValue('nickname', newFormValues?.nickname)
+        form.setFieldValue('avatar', newFormValues?.avatar)
+        form.setFieldValue('email', newFormValues?.email)
+        form.setFieldValue('roleIds', newFormValues?.roleIds)
+        form.setFieldValue('groupIds', newFormValues?.groupIds)
+
+        getAvatar()
+    }
+
+    const handleOnListDeleteBtnClick = () => {
+        modal
+            .confirm({
+                title: '确定删除',
+                content: `确定删除选中的 ${tableSelectedItem.length} 个用户吗？`
+            })
+            .then(
+                (confirmed) => {
+                    if (confirmed) {
+                        setIsLoading(true)
+
+                        void r_sys_user_delete_list(tableSelectedItem)
+                            .then((res) => {
+                                const data = res.data
+
+                                if (data.code === DATABASE_DELETE_SUCCESS) {
+                                    void message.success('删除成功')
+                                    setTimeout(() => {
+                                        getUser()
+                                    })
+                                } else {
+                                    void message.error('删除失败，请稍后重试')
+                                }
+                            })
+                            .finally(() => {
+                                setIsLoading(false)
+                            })
+                    }
+                },
+                () => {}
+            )
+    }
+
+    const handleOnEditBtnClick = (value: UserWithRoleInfoVo) => {
+        return () => {
+            setIsDrawerEdit(true)
+            setIsDrawerOpen(true)
+
+            form.setFieldValue('id', value.id)
+            form.setFieldValue('username', value.username)
+            form.setFieldValue('password', undefined)
+            form.setFieldValue('locking', value.locking)
+            form.setFieldValue('expiration', value.expiration)
+            form.setFieldValue('credentialsExpiration', value.credentialsExpiration)
+            form.setFieldValue('enable', value.enable)
+            form.setFieldValue('nickname', value.userInfo.nickname)
+            form.setFieldValue('avatar', value.userInfo.avatar)
+            form.setFieldValue('email', value.userInfo.email)
+            form.setFieldValue(
+                'roleIds',
+                value.roles.map((role) => role.id)
+            )
+            form.setFieldValue(
+                'groupIds',
+                value.groups.map((group) => group.id)
+            )
+            void form.validateFields()
+        }
+    }
+
+    const handleOnDeleteBtnClick = (value: UserWithRoleInfoVo) => {
+        return () => {
+            modal
+                .confirm({
+                    title: '确定删除',
+                    content: `确定删除用户 ${value.username} 吗？`
+                })
+                .then(
+                    (confirmed) => {
+                        if (confirmed) {
+                            setIsLoading(true)
+
+                            void r_sys_user_delete(value.id)
+                                .then((res) => {
+                                    const data = res.data
+                                    if (data.code === DATABASE_DELETE_SUCCESS) {
+                                        void message.success('删除成功')
+                                        setTimeout(() => {
+                                            getUser()
+                                        })
+                                    } else {
+                                        void message.error('删除失败，请稍后重试')
+                                    }
+                                })
+                                .finally(() => {
+                                    setIsLoading(false)
+                                })
+                        }
+                    },
+                    () => {}
+                )
+        }
+    }
+
+    const handleOnDrawerClose = () => {
+        setIsDrawerOpen(false)
+    }
+
+    const filterOption = (input: string, option?: { label: string; value: string }) =>
+        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+
+    const handleOnSubmit = () => {
+        if (isSubmitting) {
+            return
+        }
+
+        setIsSubmitting(true)
+
+        if (isDrawerEdit) {
+            void r_sys_user_update({
+                ...formValues,
+                expiration: formValues.expiration
+                    ? new Date(formValues.expiration).toISOString()
+                    : undefined,
+                credentialsExpiration: formValues.credentialsExpiration
+                    ? new Date(formValues.credentialsExpiration).toISOString()
+                    : undefined
+            })
+                .then((res) => {
+                    const data = res.data
+                    switch (data.code) {
+                        case DATABASE_UPDATE_SUCCESS:
+                            setIsDrawerOpen(false)
+                            void message.success('更新成功')
+                            getUser()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error('已存在相同用户名')
+                            break
+                        default:
+                            void message.error('更新失败，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        } else {
+            void r_sys_user_add({
+                ...formValues,
+                expiration: formValues.expiration
+                    ? new Date(formValues.expiration).toISOString()
+                    : undefined,
+                credentialsExpiration: formValues.credentialsExpiration
+                    ? new Date(formValues.credentialsExpiration).toISOString()
+                    : undefined
+            })
+                .then((res) => {
+                    const data = res.data
+                    switch (data.code) {
+                        case DATABASE_INSERT_SUCCESS:
+                            setIsDrawerOpen(false)
+                            void message.success('添加成功')
+                            setNewFormValues(undefined)
+                            getUser()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error('已存在相同用户名')
+                            break
+                        default:
+                            void message.error('添加失败，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        }
+    }
+
+    const handleOnSearchValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchValue(e.target.value)
+
+        if (isUseRegex) {
+            try {
+                RegExp(e.target.value)
+                setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]')))
+            } catch (e) {
+                setIsRegexLegal(false)
+            }
+        } else {
+            setIsRegexLegal(true)
+        }
+    }
+
+    const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            getUser()
+        }
+    }
+
+    const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
+        setIsUseRegex(e.target.checked)
+        if (e.target.checked) {
+            try {
+                RegExp(searchValue)
+                setIsRegexLegal(!(searchValue.includes('{}') || searchValue.includes('[]')))
+            } catch (e) {
+                setIsRegexLegal(false)
+            }
+        } else {
+            setIsRegexLegal(true)
+        }
+    }
+
+    const handleOnQueryBtnClick = () => {
+        getUser()
+    }
+
+    const getUser = () => {
+        if (isLoading) {
+            return
+        }
+
+        if (!isRegexLegal) {
+            void message.error('非法正则表达式')
+            return
+        }
+
+        setIsLoading(true)
+
+        void r_sys_user_get()
+            .then((res) => {
+                const data = res.data
+                if (data.code === DATABASE_SELECT_SUCCESS) {
+                    const records = data.data?.records
+
+                    records && setUserData(records)
+                    data.data &&
+                        setTableParams({
+                            ...tableParams,
+                            pagination: {
+                                ...tableParams.pagination,
+                                total: data.data.total
+                            }
+                        })
+                } else {
+                    void message.error('获取失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoading(false)
+            })
+    }
+
+    const handleOnDrawerRefresh = () => {
+        getRoleData()
+        getGroupData()
+    }
+
+    const getRoleData = () => {
+        if (isLoadingRole) {
+            return
+        }
+
+        setIsLoadingRole(true)
+
+        void r_sys_role_get_list()
+            .then((res) => {
+                const data = res.data
+
+                if (data.code === DATABASE_SELECT_SUCCESS) {
+                    data.data && setRoleData(data.data)
+                } else {
+                    void message.error('获取角色列表失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoadingRole(false)
+            })
+    }
+
+    const getGroupData = () => {
+        if (isLoadingGroup) {
+            return
+        }
+
+        setIsLoadingGroup(true)
+
+        void r_sys_group_get_list()
+            .then((res) => {
+                const data = res.data
+
+                if (data.code === DATABASE_SELECT_SUCCESS) {
+                    data.data && setGroupData(data.data)
+                } else {
+                    void message.error('获取用户组列表失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoadingGroup(false)
+            })
+    }
+
+    const getAvatar = () => {
+        void r_api_avatar_random_base64().then((res) => {
+            const response = res.data
+            if (response.success) {
+                response.data && setAvatar(response.data.base64)
+                response.data && form.setFieldValue('avatar', response.data.base64)
             }
         })
+    }
+
+    useEffect(() => {
+        form.validateFields({ validateOnly: true }).then(
+            () => {
+                setSubmittable(true)
+            },
+            () => {
+                setSubmittable(false)
+            }
+        )
+
+        if (!isDrawerEdit && formValues) {
+            setNewFormValues({
+                username: formValues.username,
+                locking: formValues.locking,
+                expiration: formValues.expiration,
+                credentialsExpiration: formValues.credentialsExpiration,
+                enable: formValues.enable,
+                nickname: formValues.nickname,
+                avatar: formValues.avatar,
+                email: formValues.email,
+                roleIds: formValues.roleIds,
+                groupIds: formValues.groupIds
+            })
+        }
+    }, [formValues])
+
+    useEffect(() => {
+        handleOnDrawerRefresh()
     }, [])
 
+    useEffect(() => {
+        getUser()
+    }, [
+        JSON.stringify(tableParams.filters),
+        JSON.stringify(tableParams.sortField),
+        JSON.stringify(tableParams.sortOrder),
+        JSON.stringify(tableParams.pagination?.pageSize),
+        JSON.stringify(tableParams.pagination?.current)
+    ])
+
+    const addAndEditForm = (
+        <AntdForm form={form} disabled={isSubmitting}>
+            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '20px' }}>
+                <AntdTooltip title={'点击获取新头像'}>
+                    <AntdAvatar
+                        src={
+                            <img
+                                src={`data:image/png;base64,${
+                                    isDrawerEdit ? formValues?.avatar : avatar
+                                }`}
+                                alt={'avatar'}
+                            />
+                        }
+                        size={100}
+                        style={{ background: COLOR_BACKGROUND }}
+                        onClick={getAvatar}
+                    />
+                </AntdTooltip>
+            </div>
+            <AntdForm.Item hidden name={'avatar'}>
+                <AntdInput />
+            </AntdForm.Item>
+            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+                <AntdInput disabled />
+            </AntdForm.Item>
+            <AntdForm.Item
+                name={'username'}
+                label={'用户名'}
+                rules={[{ required: true, whitespace: false }]}
+            >
+                <AntdInput allowClear />
+            </AntdForm.Item>
+            <AntdForm.Item
+                hidden={isDrawerEdit}
+                name={'password'}
+                label={'密码'}
+                rules={[{ required: true, whitespace: false }]}
+            >
+                <AntdInput.Password allowClear />
+            </AntdForm.Item>
+            <AntdForm.Item name={'nickname'} label={'昵称'} rules={[{ whitespace: false }]}>
+                <AntdInput allowClear />
+            </AntdForm.Item>
+            <AntdForm.Item
+                name={'email'}
+                label={'邮箱'}
+                rules={[{ whitespace: false, type: 'email' }]}
+            >
+                <AntdInput type={'email'} allowClear />
+            </AntdForm.Item>
+            <AntdForm.Item name={'roleIds'} label={'角色'}>
+                <AntdSelect
+                    mode={'multiple'}
+                    allowClear
+                    showSearch
+                    filterOption={filterOption}
+                    options={roleData.map((value) => ({
+                        value: value.id,
+                        label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
+                    }))}
+                />
+            </AntdForm.Item>
+            <AntdForm.Item name={'groupIds'} label={'用户组'}>
+                <AntdSelect
+                    mode={'multiple'}
+                    allowClear
+                    showSearch
+                    filterOption={filterOption}
+                    options={groupData.map((value) => ({
+                        value: value.id,
+                        label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
+                    }))}
+                />
+            </AntdForm.Item>
+            <AntdForm.Item
+                valuePropName={'checked'}
+                name={'locking'}
+                label={'锁定'}
+                rules={[{ required: true, type: 'boolean' }]}
+            >
+                <AntdSwitch />
+            </AntdForm.Item>
+            <AntdForm.Item
+                name={'expiration'}
+                label={'过期时间'}
+                getValueProps={(date: string) => (date ? { value: moment.utc(date) } : {})}
+                getValueFromEvent={(_, dateString: string) =>
+                    dateString ? moment(dateString).format('yyyy-MM-DD HH:mm:ss') : undefined
+                }
+            >
+                <AntdDatePicker showTime allowClear changeOnBlur style={{ width: '100%' }} />
+            </AntdForm.Item>
+            <AntdForm.Item
+                name={'credentialsExpiration'}
+                label={'认证过期时间'}
+                getValueProps={(date: string) => (date ? { value: moment.utc(date) } : {})}
+                getValueFromEvent={(_, dateString: string) =>
+                    dateString ? moment(dateString).format('yyyy-MM-DD HH:mm:ss') : undefined
+                }
+            >
+                <AntdDatePicker showTime allowClear changeOnBlur style={{ width: '100%' }} />
+            </AntdForm.Item>
+            <AntdForm.Item
+                valuePropName={'checked'}
+                name={'enable'}
+                label={'启用'}
+                rules={[{ required: true, type: 'boolean' }]}
+            >
+                <AntdSwitch />
+            </AntdForm.Item>
+        </AntdForm>
+    )
+
+    const toolbar = (
+        <FlexBox direction={'horizontal'} gap={10}>
+            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                <AntdButton
+                    type={'primary'}
+                    style={{ padding: '4px 8px' }}
+                    onClick={handleOnAddBtnClick}
+                >
+                    <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
+                </AntdButton>
+            </Card>
+            <Card
+                hidden={tableSelectedItem.length === 0}
+                style={{ overflow: 'inherit', flex: '0 0 auto' }}
+            >
+                <AntdButton style={{ padding: '4px 8px' }} onClick={handleOnListDeleteBtnClick}>
+                    <Icon component={IconFatwebDelete} style={{ fontSize: '1.2em' }} />
+                </AntdButton>
+            </Card>
+            <Card style={{ overflow: 'inherit' }}>
+                <AntdInput
+                    addonBefore={
+                        <span
+                            style={{
+                                fontSize: '0.9em',
+                                color: COLOR_FONT_SECONDARY
+                            }}
+                        >
+                            内容
+                        </span>
+                    }
+                    suffix={
+                        <>
+                            {!isRegexLegal ? (
+                                <span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
+                            ) : undefined}
+                            <AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
+                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
+                            </AntdCheckbox>
+                        </>
+                    }
+                    allowClear
+                    value={searchValue}
+                    onChange={handleOnSearchValueChange}
+                    onKeyDown={handleOnSearchNameKeyDown}
+                    status={isRegexLegal ? undefined : 'error'}
+                />
+            </Card>
+            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
+                    查询
+                </AntdButton>
+            </Card>
+        </FlexBox>
+    )
+
+    const table = (
+        <Card>
+            <AntdTable
+                dataSource={userData}
+                columns={dataColumns}
+                rowKey={(record) => record.id}
+                pagination={tableParams.pagination}
+                loading={isLoading}
+                onChange={handleOnTableChange}
+                rowSelection={{
+                    type: 'checkbox',
+                    onChange: handleOnTableSelectChange
+                }}
+            />
+        </Card>
+    )
+
+    const drawerToolbar = (
+        <AntdSpace>
+            <AntdTooltip title={'刷新角色和用户组列表'}>
+                <AntdButton onClick={handleOnDrawerRefresh} disabled={isSubmitting}>
+                    <Icon component={IconFatwebRefresh} />
+                </AntdButton>
+            </AntdTooltip>
+            <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
+                取消
+            </AntdButton>
+            <AntdButton
+                type={'primary'}
+                disabled={!submittable}
+                loading={isSubmitting}
+                onClick={handleOnSubmit}
+            >
+                提交
+            </AntdButton>
+        </AntdSpace>
+    )
+
     return (
         <>
-            <AntdTable dataSource={userList} columns={tableColumns} rowKey={'id'} />
+            <FitFullScreen>
+                <HideScrollbar
+                    style={{ padding: 30 }}
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={500}
+                >
+                    <FlexBox gap={20}>
+                        {toolbar}
+                        {table}
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullScreen>
+            <AntdDrawer
+                title={isDrawerEdit ? '编辑用户' : '新增用户'}
+                width={'36vw'}
+                onClose={handleOnDrawerClose}
+                open={isDrawerOpen}
+                closable={!isSubmitting}
+                maskClosable={!isSubmitting}
+                extra={drawerToolbar}
+            >
+                {addAndEditForm}
+            </AntdDrawer>
+            {contextHolder}
         </>
     )
 }
diff --git a/src/services/api/avatar.ts b/src/services/api/avatar.ts
new file mode 100644
index 0000000..04e663f
--- /dev/null
+++ b/src/services/api/avatar.ts
@@ -0,0 +1,5 @@
+import request from '@/services'
+import { URL_API_V1_AVATAR_RANDOM_BASE64 } from '@/constants/urls.constants'
+
+export const r_api_avatar_random_base64 = () =>
+    request.get<AvatarBase64Vo>(URL_API_V1_AVATAR_RANDOM_BASE64)
diff --git a/src/services/auth.tsx b/src/services/auth.tsx
index 75a3246..daf3658 100644
--- a/src/services/auth.tsx
+++ b/src/services/auth.tsx
@@ -1,10 +1,10 @@
 import request from '@/services'
-import { URL_API_LOGIN, URL_API_LOGOUT } from '@/constants/urls.constants'
+import { URL_LOGIN, URL_LOGOUT } from '@/constants/urls.constants'
 
 export const r_auth_login = (username: string, password: string) =>
-    request.post<TokenVo>(URL_API_LOGIN, {
+    request.post<TokenVo>(URL_LOGIN, {
         username,
         password
     })
 
-export const r_auth_logout = () => request.post(URL_API_LOGOUT)
+export const r_auth_logout = () => request.post(URL_LOGOUT)
diff --git a/src/services/system.tsx b/src/services/system.tsx
index d499f8d..decb818 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,59 +1,65 @@
 import React from 'react'
 import request from '@/services/index'
 import {
-    URL_API_SYS_USER_INFO,
-    URL_API_SYS_USER,
-    URL_API_SYS_POWER_LIST,
-    URL_API_SYS_ROLE,
-    URL_API_SYS_ROLE_LIST,
-    URL_API_SYS_GROUP,
-    URL_API_SYS_GROUP_LIST,
-    URL_API_SYS_LOG
+    URL_SYS_USER_INFO,
+    URL_SYS_USER,
+    URL_SYS_POWER_LIST,
+    URL_SYS_ROLE,
+    URL_SYS_ROLE_LIST,
+    URL_SYS_GROUP,
+    URL_SYS_GROUP_LIST,
+    URL_SYS_LOG
 } from '@/constants/urls.constants'
 
-export const r_sys_user_info = () => request.get<UserWithPowerInfoVo>(URL_API_SYS_USER_INFO)
+export const r_sys_user_info = () => request.get<UserWithPowerInfoVo>(URL_SYS_USER_INFO)
 
-export const r_sys_user = () => request.get<UserWithRoleInfoVo[]>(URL_API_SYS_USER)
+export const r_sys_user_get = () => request.get<PageVo<UserWithRoleInfoVo>>(URL_SYS_USER)
 
-export const r_sys_power_get_list = () => request.get<PowerSetVo>(URL_API_SYS_POWER_LIST)
+export const r_sys_user_add = (param: UserAddEditParam) => request.post(URL_SYS_USER, { ...param })
+
+export const r_sys_user_update = (param: UserAddEditParam) =>
+    request.put(URL_SYS_USER, { ...param })
+
+export const r_sys_user_delete = (id: string) => request.delete(`${URL_SYS_USER}/${id}`)
+
+export const r_sys_user_delete_list = (ids: React.Key[]) => request.delete(URL_SYS_USER, { ids })
+
+export const r_sys_power_get_list = () => request.get<PowerSetVo>(URL_SYS_POWER_LIST)
 
 export const r_sys_role_get = (param: RoleGetParam) =>
-    request.get<PageVo<RoleWithPowerGetVo>>(URL_API_SYS_ROLE, { ...param })
+    request.get<PageVo<RoleWithPowerGetVo>>(URL_SYS_ROLE, { ...param })
 
-export const r_sys_role_get_list = () => request.get<RoleVo[]>(URL_API_SYS_ROLE_LIST)
+export const r_sys_role_get_list = () => request.get<RoleVo[]>(URL_SYS_ROLE_LIST)
 
 export const r_sys_role_change_status = (param: RoleChangeStatusParam) =>
-    request.patch<never>(URL_API_SYS_ROLE, { ...param })
+    request.patch<never>(URL_SYS_ROLE, { ...param })
 
-export const r_sys_role_add = (param: RoleAddEditParam) =>
-    request.post(URL_API_SYS_ROLE, { ...param })
+export const r_sys_role_add = (param: RoleAddEditParam) => request.post(URL_SYS_ROLE, { ...param })
 
 export const r_sys_role_update = (param: RoleAddEditParam) =>
-    request.put(URL_API_SYS_ROLE, { ...param })
+    request.put(URL_SYS_ROLE, { ...param })
 
-export const r_sys_role_delete = (id: string) => request.delete(`${URL_API_SYS_ROLE}/${id}`)
+export const r_sys_role_delete = (id: string) => request.delete(`${URL_SYS_ROLE}/${id}`)
 
-export const r_sys_role_delete_list = (ids: React.Key[]) =>
-    request.delete(URL_API_SYS_ROLE, { ids })
+export const r_sys_role_delete_list = (ids: React.Key[]) => request.delete(URL_SYS_ROLE, { ids })
 
 export const r_sys_group_get = (param: GroupGetParam) =>
-    request.get<PageVo<GroupWithRoleGetVo>>(URL_API_SYS_GROUP, { ...param })
+    request.get<PageVo<GroupWithRoleGetVo>>(URL_SYS_GROUP, { ...param })
 
-export const r_sys_group_get_list = () => request.get<GroupVo[]>(URL_API_SYS_GROUP_LIST)
+export const r_sys_group_get_list = () => request.get<GroupVo[]>(URL_SYS_GROUP_LIST)
 
 export const r_sys_group_change_status = (param: GroupChangeStatusParam) =>
-    request.patch<never>(URL_API_SYS_GROUP, { ...param })
+    request.patch<never>(URL_SYS_GROUP, { ...param })
 
 export const r_sys_group_add = (param: GroupAddEditParam) =>
-    request.post(URL_API_SYS_GROUP, { ...param })
+    request.post(URL_SYS_GROUP, { ...param })
 
 export const r_sys_group_update = (param: GroupAddEditParam) =>
-    request.put(URL_API_SYS_GROUP, { ...param })
+    request.put(URL_SYS_GROUP, { ...param })
 
-export const r_sys_group_delete = (id: string) => request.delete(`${URL_API_SYS_GROUP}/${id}`)
+export const r_sys_group_delete = (id: string) => request.delete(`${URL_SYS_GROUP}/${id}`)
 
-export const r_sys_group_delete_list = (ids: React.Key[]) =>
-    request.delete(URL_API_SYS_GROUP, { ids })
+export const r_sys_group_delete_list = (ids: React.Key[]) => request.delete(URL_SYS_GROUP, { ids })
 
 export const r_sys_log_get = (param: SysLogGetParam) =>
-    request.get<PageVo<SysLogGetVo>>(URL_API_SYS_LOG, { ...param })
+    request.get<PageVo<SysLogGetVo>>(URL_SYS_LOG, { ...param })
diff --git a/src/utils/common.tsx b/src/utils/common.tsx
index ce865b3..e41a84a 100644
--- a/src/utils/common.tsx
+++ b/src/utils/common.tsx
@@ -148,6 +148,10 @@ export const getLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm
     return moment.utc(utcTime).local().format(format)
 }
 
+export const isPastTime = (utcTime: string) => {
+    return moment.utc(utcTime).isBefore(moment.now())
+}
+
 export const floorNumber = (num: number, digits: number) => {
     if (digits > 0) {
         return Math.floor(num / Math.pow(10, digits - 1)) * Math.pow(10, digits - 1)

From df16af6872b1b50838932372b2adcbbe1fabf814 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 28 Nov 2023 23:13:11 +0800
Subject: [PATCH 087/307] Fix can not submit when update in user management
 page

---
 src/pages/system/User.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 25512dd..4ff7b6b 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -600,7 +600,7 @@ const User: React.FC = () => {
                 hidden={isDrawerEdit}
                 name={'password'}
                 label={'密码'}
-                rules={[{ required: true, whitespace: false }]}
+                rules={[{ whitespace: false }]}
             >
                 <AntdInput.Password allowClear />
             </AntdForm.Item>

From 5bcfa2be9c4368ee6b43b9053ca2c4203bbabde2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 29 Nov 2023 11:12:35 +0800
Subject: [PATCH 088/307] Optimize import. Optimize date convert.

---
 src/components/common/LoadingMask.tsx         |  2 +-
 .../common/sidebar/SidebarFooter.tsx          |  5 +--
 src/components/common/sidebar/index.tsx       |  2 +-
 src/components/home/Footer.tsx                |  1 -
 src/main.tsx                                  |  2 +-
 src/pages/HomeFramework.tsx                   |  4 +-
 src/pages/Login.tsx                           |  7 ++-
 src/pages/SystemFramework.tsx                 |  2 +-
 src/pages/ToolsFramework.tsx                  |  2 +-
 src/pages/UserFramework.tsx                   |  4 +-
 src/pages/home/index.tsx                      |  2 +-
 src/pages/system/Group.tsx                    | 16 +++----
 src/pages/system/Log.tsx                      | 24 +++++-----
 src/pages/system/Role.tsx                     | 36 +++++++--------
 src/pages/system/User.tsx                     | 45 +++++++++----------
 src/router/index.tsx                          |  4 +-
 src/services/api/avatar.ts                    |  2 +-
 src/services/auth.tsx                         |  2 +-
 src/services/index.tsx                        |  3 +-
 src/services/system.tsx                       |  2 +-
 src/utils/auth.ts                             |  6 +--
 src/utils/common.tsx                          | 17 ++++++-
 vite.config.ts                                |  2 +-
 23 files changed, 100 insertions(+), 92 deletions(-)

diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx
index 86d2548..bbb231d 100644
--- a/src/components/common/LoadingMask.tsx
+++ b/src/components/common/LoadingMask.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/loading-mask.scss'
-import FitFullScreen from '@/components/common/FitFullScreen'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
+import FitFullScreen from '@/components/common/FitFullScreen'
 
 const LoadingMask: React.FC = () => {
     const loadingIcon = (
diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx
index a142249..20d0fe4 100644
--- a/src/components/common/sidebar/SidebarFooter.tsx
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -1,9 +1,8 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
-import { notification } from 'antd'
-import { getLoginStatus, getNickname, logout } from '@/utils/auth'
-import { getRedirectUrl } from '@/utils/common'
 import { COLOR_ERROR } from '@/constants/common.constants'
+import { getRedirectUrl } from '@/utils/common'
+import { getLoginStatus, getNickname, logout } from '@/utils/auth'
 
 const SidebarFooter: React.FC = () => {
     const matches = useMatches()
diff --git a/src/components/common/sidebar/index.tsx b/src/components/common/sidebar/index.tsx
index 87dd435..281eb1a 100644
--- a/src/components/common/sidebar/index.tsx
+++ b/src/components/common/sidebar/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/sidebar.scss'
+import { getLocalStorage, setLocalStorage } from '@/utils/common'
 import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate'
 import SidebarFooter from '@/components/common/sidebar/SidebarFooter'
-import { getLocalStorage, setLocalStorage } from '@/utils/common'
 
 interface SidebarProps extends React.PropsWithChildren {
     title: string
diff --git a/src/components/home/Footer.tsx b/src/components/home/Footer.tsx
index 1ec0e35..bf11c34 100644
--- a/src/components/home/Footer.tsx
+++ b/src/components/home/Footer.tsx
@@ -3,7 +3,6 @@ import Icon from '@ant-design/icons'
 import '@/assets/css/components/home/footer.scss'
 import FitCenter from '@/components/common/FitCenter'
 import FitFullScreen from '@/components/common/FitFullScreen'
-import { NavLink } from 'react-router-dom'
 
 const Footer: React.FC = () => {
     return (
diff --git a/src/main.tsx b/src/main.tsx
index 2e5c580..6a0a008 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom/client'
 import zh_CN from 'antd/locale/zh_CN'
 import '@/assets/css/base.scss'
 import '@/assets/css/common.scss'
-import App from './App'
 import { COLOR_MAIN } from '@/constants/common.constants'
+import App from './App'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index bc6b1b5..1809bb0 100644
--- a/src/pages/HomeFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
-import router from '@/router'
 import '@/assets/css/pages/home-framework.scss'
+import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
+import router from '@/router'
 import LoadingMask from '@/components/common/LoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
-import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
 
 export const HomeFrameworkContext = createContext<{
     navbarHiddenState: {
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index f59a5c9..65506a2 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,14 +1,13 @@
 import React from 'react'
-import { notification } from 'antd'
 import '@/assets/css/pages/login.scss'
-import { getLocalTime, setToken } from '@/utils/common'
-import { getUserInfo, login } from '@/utils/auth'
 import {
     PERMISSION_LOGIN_SUCCESS,
     PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
     PERMISSION_USER_DISABLE,
     PERMISSION_USERNAME_NOT_FOUND
 } from '@/constants/common.constants'
+import { utcToLocalTime, setToken } from '@/utils/common'
+import { getUserInfo, login } from '@/utils/auth'
 
 const Login: React.FC = () => {
     const [messageApi, contextHolder] = message.useMessage()
@@ -44,7 +43,7 @@ const Login: React.FC = () => {
                                             <span>
                                                 最近登录：
                                                 {user.lastLoginTime
-                                                    ? `${getLocalTime(user.lastLoginTime)}【${
+                                                    ? `${utcToLocalTime(user.lastLoginTime)}【${
                                                           user.lastLoginIp
                                                       }】`
                                                     : '无'}
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 2525e74..483e88e 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import system from '@/router/system'
 import '@/assets/css/pages/system-framework.scss'
+import system from '@/router/system'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 72b7698..1385994 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { tools } from '@/router/tools'
 import '@/assets/css/pages/tools-framework.scss'
+import { tools } from '@/router/tools'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import SidebarScroll, { SidebarScrollElement } from '@/components/common/sidebar/SidebarScroll'
 import Sidebar from '@/components/common/sidebar'
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 63bffc2..b88ff73 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import user from '@/router/user'
 import '@/assets/css/pages/tools-framework.scss'
+import user from '@/router/user'
+import { hasPathPermission } from '@/utils/auth'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
-import { hasPathPermission } from '@/utils/auth'
 import LoadingMask from '@/components/common/LoadingMask'
 
 const ToolsFramework: React.FC = () => {
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 25ca34d..fda272d 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@/assets/css/components/home/home.scss'
-import FitFullScreen from '@/components/common/FitFullScreen'
 import { HomeFrameworkContext } from '@/pages/HomeFramework'
+import FitFullScreen from '@/components/common/FitFullScreen'
 import Slogan from '@/components/home/Slogan'
 import OxygenToolbox from '@/components/home/OxygenToolbox'
 import Indicator from '@/components/common/Indicator'
diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index fa47112..3d7fcd1 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -1,9 +1,5 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import Icon from '@ant-design/icons'
-import FitFullScreen from '@/components/common/FitFullScreen'
-import HideScrollbar from '@/components/common/HideScrollbar'
-import FlexBox from '@/components/common/FlexBox'
-import Card from '@/components/common/Card'
 import {
     COLOR_ERROR_SECONDARY,
     COLOR_FONT_SECONDARY,
@@ -14,7 +10,7 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { getLocalTime } from '@/utils/common'
+import { utcToLocalTime } from '@/utils/common'
 import {
     r_sys_group_add,
     r_sys_group_change_status,
@@ -24,6 +20,10 @@ import {
     r_sys_group_update,
     r_sys_role_get_list
 } from '@/services/system'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
 
 const Group: React.FC = () => {
     const [modal, contextHolder] = AntdModal.useModal()
@@ -75,14 +75,14 @@ const Group: React.FC = () => {
             dataIndex: 'createTime',
             width: '10%',
             align: 'center',
-            render: (value: string) => getLocalTime(value)
+            render: (value: string) => utcToLocalTime(value)
         },
         {
             title: '修改时间',
             dataIndex: 'updateTime',
             width: '10%',
             align: 'center',
-            render: (value: string) => getLocalTime(value)
+            render: (value: string) => utcToLocalTime(value)
         },
         {
             title: '状态',
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 69eff9f..7230211 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -1,14 +1,15 @@
 import React from 'react'
-import FitFullScreen from '@/components/common/FitFullScreen'
-import Card from '@/components/common/Card'
-import { r_sys_log_get } from '@/services/system'
+import dayjs from 'dayjs'
 import {
     COLOR_ERROR_SECONDARY,
     COLOR_FONT_SECONDARY,
     DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
+import { dayjsToUtc, utcToLocalTime } from '@/utils/common'
+import { r_sys_log_get } from '@/services/system'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import Card from '@/components/common/Card'
 import HideScrollbar from '@/components/common/HideScrollbar'
-import { getLocalTime } from '@/utils/common'
 import FlexBox from '@/components/common/FlexBox'
 
 const Log: React.FC = () => {
@@ -87,7 +88,7 @@ const Log: React.FC = () => {
         {
             title: '开始时间',
             dataIndex: 'startTime',
-            render: (value: string) => getLocalTime(value),
+            render: (value: string) => utcToLocalTime(value),
             align: 'center',
             sorter: true
         },
@@ -96,7 +97,9 @@ const Log: React.FC = () => {
             dataIndex: 'executeTime',
             render: (value, record) => (
                 <AntdTooltip
-                    title={`${getLocalTime(record.startTime)} ~ ${getLocalTime(record.endTime)}`}
+                    title={`${utcToLocalTime(record.startTime)} ~ ${utcToLocalTime(
+                        record.endTime
+                    )}`}
                 >
                     {`${value}ms`}
                 </AntdTooltip>
@@ -188,12 +191,9 @@ const Log: React.FC = () => {
         }
     }
 
-    const handleOnDateRangeChange = (_dates: unknown, dateStrings: [string, string]) => {
-        if (dateStrings[0] && dateStrings[1]) {
-            setTimeRange([
-                new Date(dateStrings[0]).toISOString(),
-                new Date(dateStrings[1]).toISOString()
-            ])
+    const handleOnDateRangeChange = (dates: [dayjs.Dayjs | null, dayjs.Dayjs | null] | null) => {
+        if (dates && dates[0] && dates[1]) {
+            setTimeRange([dayjsToUtc(dates[0]), dayjsToUtc(dates[1])])
         } else {
             setTimeRange(undefined)
         }
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index 81fd501..f0ea4ce 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -1,17 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import FitFullScreen from '@/components/common/FitFullScreen'
-import HideScrollbar from '@/components/common/HideScrollbar'
-import FlexBox from '@/components/common/FlexBox'
-import Card from '@/components/common/Card'
-import {
-    r_sys_role_add,
-    r_sys_role_change_status,
-    r_sys_power_get_list,
-    r_sys_role_get,
-    r_sys_role_update,
-    r_sys_role_delete,
-    r_sys_role_delete_list
-} from '@/services/system'
+import React from 'react'
+import Icon from '@ant-design/icons'
 import {
     COLOR_ERROR_SECONDARY,
     COLOR_FONT_SECONDARY,
@@ -22,8 +10,20 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import Icon from '@ant-design/icons'
-import { getLocalTime, powerListToPowerTree } from '@/utils/common'
+import { utcToLocalTime, powerListToPowerTree } from '@/utils/common'
+import {
+    r_sys_role_add,
+    r_sys_role_change_status,
+    r_sys_power_get_list,
+    r_sys_role_get,
+    r_sys_role_update,
+    r_sys_role_delete,
+    r_sys_role_delete_list
+} from '@/services/system'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
 
 const Role: React.FC = () => {
     const [modal, contextHolder] = AntdModal.useModal()
@@ -67,14 +67,14 @@ const Role: React.FC = () => {
             dataIndex: 'createTime',
             width: '10%',
             align: 'center',
-            render: (value: string) => getLocalTime(value)
+            render: (value: string) => utcToLocalTime(value)
         },
         {
             title: '修改时间',
             dataIndex: 'updateTime',
             width: '10%',
             align: 'center',
-            render: (value: string) => getLocalTime(value)
+            render: (value: string) => utcToLocalTime(value)
         },
         {
             title: '状态',
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 4ff7b6b..e1c85b1 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
+import Icon from '@ant-design/icons'
+import dayjs from 'dayjs'
 import {
     COLOR_BACKGROUND,
     COLOR_ERROR_SECONDARY,
@@ -10,12 +12,7 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { ColumnsType } from 'antd/es/table/interface'
-import FitFullScreen from '@/components/common/FitFullScreen.tsx'
-import HideScrollbar from '@/components/common/HideScrollbar.tsx'
-import FlexBox from '@/components/common/FlexBox.tsx'
-import Card from '@/components/common/Card.tsx'
-import Icon from '@ant-design/icons'
+import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc } from '@/utils/common'
 import {
     r_sys_group_get_list,
     r_sys_role_get_list,
@@ -24,10 +21,12 @@ import {
     r_sys_user_delete_list,
     r_sys_user_get,
     r_sys_user_update
-} from '@/services/system.tsx'
-import { getLocalTime, isPastTime } from '@/utils/common.tsx'
-import { r_api_avatar_random_base64 } from '@/services/api/avatar.ts'
-import moment from 'moment'
+} from '@/services/system'
+import { r_api_avatar_random_base64 } from '@/services/api/avatar'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
 
 const User: React.FC = () => {
     const [modal, contextHolder] = AntdModal.useModal()
@@ -57,7 +56,7 @@ const User: React.FC = () => {
     const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
     const [avatar, setAvatar] = useState('')
 
-    const dataColumns: ColumnsType<UserWithRoleInfoVo> = [
+    const dataColumns: _ColumnsType<UserWithRoleInfoVo> = [
         {
             dataIndex: 'username',
             title: '用户',
@@ -122,7 +121,7 @@ const User: React.FC = () => {
             title: '最近登录',
             render: (_, record) =>
                 record.currentLoginTime
-                    ? `${getLocalTime(record.currentLoginTime)}【${record.currentLoginIp}】`
+                    ? `${utcToLocalTime(record.currentLoginTime)}【${record.currentLoginIp}】`
                     : '无',
             align: 'center'
         },
@@ -334,10 +333,10 @@ const User: React.FC = () => {
             void r_sys_user_update({
                 ...formValues,
                 expiration: formValues.expiration
-                    ? new Date(formValues.expiration).toISOString()
+                    ? localTimeToUtc(formValues.expiration)
                     : undefined,
                 credentialsExpiration: formValues.credentialsExpiration
-                    ? new Date(formValues.credentialsExpiration).toISOString()
+                    ? localTimeToUtc(formValues.credentialsExpiration)
                     : undefined
             })
                 .then((res) => {
@@ -362,10 +361,10 @@ const User: React.FC = () => {
             void r_sys_user_add({
                 ...formValues,
                 expiration: formValues.expiration
-                    ? new Date(formValues.expiration).toISOString()
+                    ? localTimeToUtc(formValues.expiration)
                     : undefined,
                 credentialsExpiration: formValues.credentialsExpiration
-                    ? new Date(formValues.credentialsExpiration).toISOString()
+                    ? localTimeToUtc(formValues.credentialsExpiration)
                     : undefined
             })
                 .then((res) => {
@@ -649,9 +648,9 @@ const User: React.FC = () => {
             <AntdForm.Item
                 name={'expiration'}
                 label={'过期时间'}
-                getValueProps={(date: string) => (date ? { value: moment.utc(date) } : {})}
-                getValueFromEvent={(_, dateString: string) =>
-                    dateString ? moment(dateString).format('yyyy-MM-DD HH:mm:ss') : undefined
+                getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})}
+                getValueFromEvent={(date: dayjs.Dayjs | null) =>
+                    date ? dayjsToUtc(date) : undefined
                 }
             >
                 <AntdDatePicker showTime allowClear changeOnBlur style={{ width: '100%' }} />
@@ -659,9 +658,9 @@ const User: React.FC = () => {
             <AntdForm.Item
                 name={'credentialsExpiration'}
                 label={'认证过期时间'}
-                getValueProps={(date: string) => (date ? { value: moment.utc(date) } : {})}
-                getValueFromEvent={(_, dateString: string) =>
-                    dateString ? moment(dateString).format('yyyy-MM-DD HH:mm:ss') : undefined
+                getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})}
+                getValueFromEvent={(date: dayjs.Dayjs | null) =>
+                    date ? dayjsToUtc(date) : undefined
                 }
             >
                 <AntdDatePicker showTime allowClear changeOnBlur style={{ width: '100%' }} />
diff --git a/src/router/index.tsx b/src/router/index.tsx
index eab5e64..bd2f52b 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import tools from '@/router/tools'
+import system from '@/router/system'
 import home from '@/router/home'
 import user from '@/router/user'
-import system from '@/router/system'
+import tools from '@/router/tools'
 
 const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => {
     return jsonObject.map((value) => ({
diff --git a/src/services/api/avatar.ts b/src/services/api/avatar.ts
index 04e663f..e9a23d5 100644
--- a/src/services/api/avatar.ts
+++ b/src/services/api/avatar.ts
@@ -1,5 +1,5 @@
-import request from '@/services'
 import { URL_API_V1_AVATAR_RANDOM_BASE64 } from '@/constants/urls.constants'
+import request from '@/services'
 
 export const r_api_avatar_random_base64 = () =>
     request.get<AvatarBase64Vo>(URL_API_V1_AVATAR_RANDOM_BASE64)
diff --git a/src/services/auth.tsx b/src/services/auth.tsx
index daf3658..16a3f48 100644
--- a/src/services/auth.tsx
+++ b/src/services/auth.tsx
@@ -1,5 +1,5 @@
-import request from '@/services'
 import { URL_LOGIN, URL_LOGOUT } from '@/constants/urls.constants'
+import request from '@/services'
 
 export const r_auth_login = (username: string, password: string) =>
     request.post<TokenVo>(URL_LOGIN, {
diff --git a/src/services/index.tsx b/src/services/index.tsx
index 2bd40df..ab8ca04 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -1,7 +1,5 @@
 import axios, { type AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 import { jwtDecode, JwtPayload } from 'jwt-decode'
-import { message } from 'antd'
-import { getToken, removeToken, setToken } from '@/utils/common'
 import {
     PERMISSION_ACCESS_DENIED,
     PERMISSION_TOKEN_HAS_EXPIRED,
@@ -9,6 +7,7 @@ import {
     PERMISSION_TOKEN_RENEW_SUCCESS,
     PERMISSION_UNAUTHORIZED
 } from '@/constants/common.constants'
+import { getToken, removeToken, setToken } from '@/utils/common'
 
 const service: AxiosInstance = axios.create({
     baseURL: import.meta.env.VITE_API_URL,
diff --git a/src/services/system.tsx b/src/services/system.tsx
index decb818..90f1b5b 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import request from '@/services/index'
 import {
     URL_SYS_USER_INFO,
     URL_SYS_USER,
@@ -10,6 +9,7 @@ import {
     URL_SYS_GROUP_LIST,
     URL_SYS_LOG
 } from '@/constants/urls.constants'
+import request from '@/services/index'
 
 export const r_sys_user_info = () => request.get<UserWithPowerInfoVo>(URL_SYS_USER_INFO)
 
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 54761f9..d85501f 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,11 +1,11 @@
-import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common'
-import { r_auth_login, r_auth_logout } from '@/services/auth'
-import { r_sys_user_info } from '@/services/system'
 import {
     STORAGE_TOKEN_KEY,
     STORAGE_USER_INFO_KEY,
     DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
+import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common'
+import { r_sys_user_info } from '@/services/system'
+import { r_auth_login, r_auth_logout } from '@/services/auth'
 
 let captcha: Captcha
 
diff --git a/src/utils/common.tsx b/src/utils/common.tsx
index e41a84a..2136aa5 100644
--- a/src/utils/common.tsx
+++ b/src/utils/common.tsx
@@ -1,5 +1,6 @@
-import moment from 'moment'
 import ReactDOM from 'react-dom/client'
+import moment from 'moment'
+import dayjs from 'dayjs'
 import _ from 'lodash'
 import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
 import LoadingMask from '@/components/common/LoadingMask'
@@ -144,10 +145,22 @@ export const getRedirectUrl = (path: string, redirectUrl: string): string => {
     return `${path}?redirect=${encodeURIComponent(redirectUrl)}`
 }
 
-export const getLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
+export const utcToLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
     return moment.utc(utcTime).local().format(format)
 }
 
+export const dayjsToLocalTime = (date: dayjs.Dayjs, format: string = 'YYYY-MM-DD HH:mm:ssZ') => {
+    return date.format(format)
+}
+
+export const dayjsToUtc = (date: dayjs.Dayjs) => {
+    return date.toISOString()
+}
+
+export const localTimeToUtc = (localTime: string) => {
+    return moment(localTime).toISOString()
+}
+
 export const isPastTime = (utcTime: string) => {
     return moment.utc(utcTime).isBefore(moment.now())
 }
diff --git a/vite.config.ts b/vite.config.ts
index a4acaba..f95c0f6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -29,7 +29,7 @@ export default defineConfig({
                     react: ['Suspense', 'createContext'],
                     'react-router': ['useMatches', 'RouterProvider'],
                     'react-router-dom': ['createBrowserRouter'],
-                    antd: ['message']
+                    antd: ['message', 'notification']
                 },
                 {
                     from: 'react-router',

From 1c7668c75140eb5402d866ff70b1b75bbd1cfd52 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 29 Nov 2023 11:18:34 +0800
Subject: [PATCH 089/307] Fix sidebar exit button can not click bug

---
 src/assets/css/components/common/sidebar.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss
index df3f922..8f5117a 100644
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -264,6 +264,8 @@
         position: absolute;
         padding-left: 6px;
         left: 100%;
+        z-index: 1000;
+        box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
 
         .content {
           padding: 8px;

From 926ae6bef85992e80977b9532035e976b8289585 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 29 Nov 2023 11:31:12 +0800
Subject: [PATCH 090/307] Optimize user management page

---
 src/pages/system/User.tsx | 153 +++++++++++++++++++++-----------------
 1 file changed, 85 insertions(+), 68 deletions(-)

diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index e1c85b1..89f686d 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -595,14 +595,17 @@ const User: React.FC = () => {
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
-            <AntdForm.Item
-                hidden={isDrawerEdit}
-                name={'password'}
-                label={'密码'}
-                rules={[{ whitespace: false }]}
-            >
-                <AntdInput.Password allowClear />
-            </AntdForm.Item>
+            {!isDrawerEdit ? (
+                <>
+                    <AntdForm.Item
+                        name={'password'}
+                        label={'密码'}
+                        rules={[{ required: true, whitespace: false }]}
+                    >
+                        <AntdInput.Password allowClear />
+                    </AntdForm.Item>
+                </>
+            ) : undefined}
             <AntdForm.Item name={'nickname'} label={'昵称'} rules={[{ whitespace: false }]}>
                 <AntdInput allowClear />
             </AntdForm.Item>
@@ -613,66 +616,80 @@ const User: React.FC = () => {
             >
                 <AntdInput type={'email'} allowClear />
             </AntdForm.Item>
-            <AntdForm.Item name={'roleIds'} label={'角色'}>
-                <AntdSelect
-                    mode={'multiple'}
-                    allowClear
-                    showSearch
-                    filterOption={filterOption}
-                    options={roleData.map((value) => ({
-                        value: value.id,
-                        label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
-                    }))}
-                />
-            </AntdForm.Item>
-            <AntdForm.Item name={'groupIds'} label={'用户组'}>
-                <AntdSelect
-                    mode={'multiple'}
-                    allowClear
-                    showSearch
-                    filterOption={filterOption}
-                    options={groupData.map((value) => ({
-                        value: value.id,
-                        label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
-                    }))}
-                />
-            </AntdForm.Item>
-            <AntdForm.Item
-                valuePropName={'checked'}
-                name={'locking'}
-                label={'锁定'}
-                rules={[{ required: true, type: 'boolean' }]}
-            >
-                <AntdSwitch />
-            </AntdForm.Item>
-            <AntdForm.Item
-                name={'expiration'}
-                label={'过期时间'}
-                getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})}
-                getValueFromEvent={(date: dayjs.Dayjs | null) =>
-                    date ? dayjsToUtc(date) : undefined
-                }
-            >
-                <AntdDatePicker showTime allowClear changeOnBlur style={{ width: '100%' }} />
-            </AntdForm.Item>
-            <AntdForm.Item
-                name={'credentialsExpiration'}
-                label={'认证过期时间'}
-                getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})}
-                getValueFromEvent={(date: dayjs.Dayjs | null) =>
-                    date ? dayjsToUtc(date) : undefined
-                }
-            >
-                <AntdDatePicker showTime allowClear changeOnBlur style={{ width: '100%' }} />
-            </AntdForm.Item>
-            <AntdForm.Item
-                valuePropName={'checked'}
-                name={'enable'}
-                label={'启用'}
-                rules={[{ required: true, type: 'boolean' }]}
-            >
-                <AntdSwitch />
-            </AntdForm.Item>
+            {formValues?.id !== '0' ? (
+                <>
+                    <AntdForm.Item name={'roleIds'} label={'角色'}>
+                        <AntdSelect
+                            mode={'multiple'}
+                            allowClear
+                            showSearch
+                            filterOption={filterOption}
+                            options={roleData.map((value) => ({
+                                value: value.id,
+                                label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
+                            }))}
+                        />
+                    </AntdForm.Item>
+                    <AntdForm.Item name={'groupIds'} label={'用户组'}>
+                        <AntdSelect
+                            mode={'multiple'}
+                            allowClear
+                            showSearch
+                            filterOption={filterOption}
+                            options={groupData.map((value) => ({
+                                value: value.id,
+                                label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
+                            }))}
+                        />
+                    </AntdForm.Item>
+                    <AntdForm.Item
+                        valuePropName={'checked'}
+                        name={'locking'}
+                        label={'锁定'}
+                        rules={[{ required: true, type: 'boolean' }]}
+                    >
+                        <AntdSwitch />
+                    </AntdForm.Item>
+                    <AntdForm.Item
+                        name={'expiration'}
+                        label={'过期时间'}
+                        getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})}
+                        getValueFromEvent={(date: dayjs.Dayjs | null) =>
+                            date ? dayjsToUtc(date) : undefined
+                        }
+                    >
+                        <AntdDatePicker
+                            showTime
+                            allowClear
+                            changeOnBlur
+                            style={{ width: '100%' }}
+                        />
+                    </AntdForm.Item>
+                    <AntdForm.Item
+                        name={'credentialsExpiration'}
+                        label={'认证过期时间'}
+                        getValueProps={(date: string) => (date ? { value: dayjs(date) } : {})}
+                        getValueFromEvent={(date: dayjs.Dayjs | null) =>
+                            date ? dayjsToUtc(date) : undefined
+                        }
+                    >
+                        <AntdDatePicker
+                            showTime
+                            allowClear
+                            changeOnBlur
+                            style={{ width: '100%' }}
+                        />
+                    </AntdForm.Item>
+                    <AntdForm.Item
+                        valuePropName={'checked'}
+                        name={'enable'}
+                        label={'启用'}
+                        rules={[{ required: true, type: 'boolean' }]}
+                    >
+                        <AntdSwitch />
+                    </AntdForm.Item>
+                </>
+            ) : undefined}
         </AntdForm>
     )
 

From d5fb2cd48d89012aa173b79f510c63d44663ee79 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 29 Nov 2023 17:59:41 +0800
Subject: [PATCH 091/307] Add change password to user management page

---
 src/assets/svg/eye.svg         |   1 +
 src/components/home/Footer.tsx |   2 +-
 src/global.d.ts                |  36 +++--
 src/pages/HomeFramework.tsx    |   2 +-
 src/pages/system/User.tsx      | 274 +++++++++++++++++++++++++--------
 src/services/system.tsx        |  29 ++--
 src/utils/common.tsx           |   8 +
 7 files changed, 260 insertions(+), 92 deletions(-)
 create mode 100644 src/assets/svg/eye.svg

diff --git a/src/assets/svg/eye.svg b/src/assets/svg/eye.svg
new file mode 100644
index 0000000..e642fde
--- /dev/null
+++ b/src/assets/svg/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1152 1024"><path d="M576 288a221.88 221.88 0 0 0-62.48 10 110.8 110.8 0 0 1 14.48 54 112 112 0 0 1-112 112 110.8 110.8 0 0 1-54-14.48A223.42 223.42 0 1 0 576 288z m569.04 194.8C1036.58 271.18 821.86 128 576 128S115.36 271.28 6.96 482.82a64.7 64.7 0 0 0 0 58.38C115.42 752.82 330.14 896 576 896s460.64-143.28 569.04-354.82a64.7 64.7 0 0 0 0-58.38zM576 800c-197.3 0-378.18-110-475.86-288C197.82 334 378.68 224 576 224s378.18 110 475.86 288C954.2 690 773.32 800 576 800z" /></svg>
\ No newline at end of file
diff --git a/src/components/home/Footer.tsx b/src/components/home/Footer.tsx
index bf11c34..3dee754 100644
--- a/src/components/home/Footer.tsx
+++ b/src/components/home/Footer.tsx
@@ -8,7 +8,7 @@ const Footer: React.FC = () => {
     return (
         <>
             <FitFullScreen backgroundColor={'#333'}>
-                <FitCenter vertical={true} style={{ gap: '20px' }}>
+                <FitCenter vertical={true} style={{ gap: 20 }}>
                     <div className={'icons'}>
                         <NavLink to={'https://github.com/FatttSnake'}>
                             <Icon component={IconFatwebGithub} className={'icon'} />
diff --git a/src/global.d.ts b/src/global.d.ts
index 587ba46..94527a2 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -95,21 +95,6 @@ interface UserWithRoleInfoVo {
     groups: GroupVo[]
 }
 
-interface UserAddEditParam {
-    id?: string
-    username: string
-    password?: string
-    locking?: boolean
-    expiration?: string
-    credentialsExpiration?: string
-    enable?: boolean
-    nickname?: string
-    avatar?: string
-    email?: string
-    roleIds: number[]
-    groupIds: number[]
-}
-
 interface UserInfoVo {
     id: string
     userId: string
@@ -190,6 +175,27 @@ interface TableParam {
     filters?: Record<string, _FilterValue | null>
 }
 
+interface UserAddEditParam {
+    id?: string
+    username: string
+    password?: string
+    locking?: boolean
+    expiration?: string
+    credentialsExpiration?: string
+    enable?: boolean
+    nickname?: string
+    avatar?: string
+    email?: string
+    roleIds: number[]
+    groupIds: number[]
+}
+
+interface UserChangePasswordParam {
+    id: string
+    password: string
+    credentialsExpiration?: string
+}
+
 interface SysLogGetParam extends PageParam {
     searchRequestUrl?: string
     searchRegex?: boolean
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index 1809bb0..e174f00 100644
--- a/src/pages/HomeFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -80,7 +80,7 @@ const HomeFramework: React.FC = () => {
                 ref={hideScrollbarRef}
                 isPreventVerticalScroll={preventScroll}
                 isShowHorizontalScrollbar={true}
-                minWidth={'900px'}
+                minWidth={900}
             >
                 <div className={'body'}>
                     <div>
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 89f686d..6c61387 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import Icon from '@ant-design/icons'
 import dayjs from 'dayjs'
 import {
@@ -12,11 +12,12 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc } from '@/utils/common'
+import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc, getNowUtc } from '@/utils/common'
 import {
     r_sys_group_get_list,
     r_sys_role_get_list,
     r_sys_user_add,
+    r_sys_user_change_password,
     r_sys_user_delete,
     r_sys_user_delete_list,
     r_sys_user_get,
@@ -28,13 +29,30 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 
+interface ChangePasswordFields extends UserChangePasswordParam {
+    passwordConfirm: string
+    needChangePassword: boolean
+}
+
 const User: React.FC = () => {
     const [modal, contextHolder] = AntdModal.useModal()
+
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const [isDrawerEdit, setIsDrawerEdit] = useState(false)
+    const [isDrawerSubmittable, setIsDrawerSubmittable] = useState(false)
+    const [isDrawerSubmitting, setIsDrawerSubmitting] = useState(false)
+    const [roleData, setRoleData] = useState<RoleVo[]>([])
+    const [groupData, setGroupData] = useState<GroupVo[]>([])
+    const [isLoadingRole, setIsLoadingRole] = useState(false)
+    const [isLoadingGroup, setIsLoadingGroup] = useState(false)
+    const [avatar, setAvatar] = useState('')
+
     const [form] = AntdForm.useForm<UserAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
     const [newFormValues, setNewFormValues] = useState<UserAddEditParam>()
-    const [userData, setUserData] = useState<UserWithRoleInfoVo[]>([])
-    const [isLoading, setIsLoading] = useState(false)
+
+    const [changePasswordForm] = AntdForm.useForm<ChangePasswordFields>()
+
     const [tableParams, setTableParams] = useState<TableParam>({
         pagination: {
             current: 1,
@@ -42,25 +60,19 @@ const User: React.FC = () => {
             position: ['bottomCenter']
         }
     })
+    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
+    const [userData, setUserData] = useState<UserWithRoleInfoVo[]>([])
+    const [isLoadingUserData, setIsLoadingUserData] = useState(false)
+
     const [searchValue, setSearchValue] = useState('')
     const [isUseRegex, setIsUseRegex] = useState(false)
     const [isRegexLegal, setIsRegexLegal] = useState(true)
-    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
-    const [isDrawerEdit, setIsDrawerEdit] = useState(false)
-    const [submittable, setSubmittable] = useState(false)
-    const [roleData, setRoleData] = useState<RoleVo[]>([])
-    const [groupData, setGroupData] = useState<GroupVo[]>([])
-    const [isLoadingRole, setIsLoadingRole] = useState(false)
-    const [isLoadingGroup, setIsLoadingGroup] = useState(false)
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
-    const [avatar, setAvatar] = useState('')
 
     const dataColumns: _ColumnsType<UserWithRoleInfoVo> = [
         {
             dataIndex: 'username',
             title: '用户',
-            render: (value, record) => `${value}(${record.id})`,
+            render: (value, record) => <AntdTooltip title={record.id}>{value}</AntdTooltip>,
             width: '0'
         },
         {
@@ -68,7 +80,13 @@ const User: React.FC = () => {
             title: '头像',
             render: (value) => (
                 <AntdAvatar
-                    src={<img src={`data:image/png;base64,${value}`} alt={'avatar'} />}
+                    src={
+                        <AntdImage
+                            preview={{ mask: <Icon component={IconFatwebEye}></Icon> }}
+                            src={`data:image/png;base64,${value}`}
+                            alt={'avatar'}
+                        />
+                    }
                     style={{ background: COLOR_BACKGROUND }}
                 />
             ),
@@ -127,25 +145,35 @@ const User: React.FC = () => {
         },
         {
             title: '状态',
-            render: (_, record) =>
-                !record.locking &&
-                (!record.expiration || !isPastTime(record.expiration)) &&
-                (!record.credentialsExpiration || !isPastTime(record.credentialsExpiration)) &&
-                record.enable ? (
-                    <AntdTag color={'green'}>正常</AntdTag>
-                ) : (
-                    <>
-                        {record.locking ? <AntdTag>锁定</AntdTag> : undefined}
-                        {record.expiration && isPastTime(record.expiration) ? (
-                            <AntdTag>过期</AntdTag>
-                        ) : undefined}
-                        {record.credentialsExpiration &&
-                        isPastTime(record.credentialsExpiration) ? (
-                            <AntdTag>改密</AntdTag>
-                        ) : undefined}
-                        {!record.enable ? <AntdTag>禁用</AntdTag> : undefined}
-                    </>
-                ),
+            render: (_, record) => (
+                <AntdTooltip
+                    title={
+                        <>
+                            <p>创建：{utcToLocalTime(record.createTime)}</p>
+                            <p>修改：{utcToLocalTime(record.updateTime)}</p>
+                        </>
+                    }
+                >
+                    {!record.locking &&
+                    (!record.expiration || !isPastTime(record.expiration)) &&
+                    (!record.credentialsExpiration || !isPastTime(record.credentialsExpiration)) &&
+                    record.enable ? (
+                        <AntdTag color={'green'}>正常</AntdTag>
+                    ) : (
+                        <>
+                            {record.locking ? <AntdTag>锁定</AntdTag> : undefined}
+                            {record.expiration && isPastTime(record.expiration) ? (
+                                <AntdTag>过期</AntdTag>
+                            ) : undefined}
+                            {record.credentialsExpiration &&
+                            isPastTime(record.credentialsExpiration) ? (
+                                <AntdTag>改密</AntdTag>
+                            ) : undefined}
+                            {!record.enable ? <AntdTag>禁用</AntdTag> : undefined}
+                        </>
+                    )}
+                </AntdTooltip>
+            ),
             align: 'center'
         },
         {
@@ -155,6 +183,12 @@ const User: React.FC = () => {
             render: (_, record) => (
                 <>
                     <AntdSpace size={'middle'}>
+                        <a
+                            style={{ color: COLOR_PRODUCTION }}
+                            onClick={handleOnChangePasswordBtnClick(record)}
+                        >
+                            修改密码
+                        </a>
                         <a
                             style={{ color: COLOR_PRODUCTION }}
                             onClick={handleOnEditBtnClick(record)}
@@ -230,7 +264,7 @@ const User: React.FC = () => {
             .then(
                 (confirmed) => {
                     if (confirmed) {
-                        setIsLoading(true)
+                        setIsLoadingUserData(true)
 
                         void r_sys_user_delete_list(tableSelectedItem)
                             .then((res) => {
@@ -246,7 +280,7 @@ const User: React.FC = () => {
                                 }
                             })
                             .finally(() => {
-                                setIsLoading(false)
+                                setIsLoadingUserData(false)
                             })
                     }
                 },
@@ -254,6 +288,115 @@ const User: React.FC = () => {
             )
     }
 
+    const handleOnChangePasswordBtnClick = (value: UserWithRoleInfoVo) => {
+        return () => {
+            changePasswordForm.setFieldValue('id', value.id)
+            changePasswordForm.setFieldValue('password', undefined)
+            changePasswordForm.setFieldValue('passwordConfirm', undefined)
+            changePasswordForm.setFieldValue(
+                'needChangePassword',
+                value.credentialsExpiration && isPastTime(value.credentialsExpiration)
+            )
+            void modal.confirm({
+                icon: <></>,
+                title: (
+                    <>
+                        <Icon
+                            style={{ color: COLOR_PRODUCTION, marginRight: 10 }}
+                            component={IconFatwebSetting}
+                        />
+                        修改用户 {value.username} 的密码
+                    </>
+                ),
+                content: (
+                    <AntdForm
+                        form={changePasswordForm}
+                        style={{ marginTop: 20 }}
+                        labelCol={{ span: 6 }}
+                        wrapperCol={{ span: 18 }}
+                    >
+                        <AntdForm.Item name={'id'} label={'ID'} labelAlign={'right'}>
+                            <AntdInput disabled />
+                        </AntdForm.Item>
+                        <AntdForm.Item
+                            name={'password'}
+                            label={'密码'}
+                            rules={[
+                                {
+                                    required: true
+                                }
+                            ]}
+                        >
+                            <AntdInput.Password />
+                        </AntdForm.Item>
+                        <AntdForm.Item
+                            name={'passwordConfirm'}
+                            label={'确认密码'}
+                            rules={[
+                                {
+                                    required: true
+                                },
+                                ({ getFieldValue }) => ({
+                                    validator(_, value) {
+                                        if (!value || getFieldValue('password') === value) {
+                                            return Promise.resolve()
+                                        }
+                                        return Promise.reject(new Error('两次密码输入不一致'))
+                                    }
+                                })
+                            ]}
+                        >
+                            <AntdInput.Password />
+                        </AntdForm.Item>
+                        <AntdForm.Item
+                            name={'needChangePassword'}
+                            label={'需改密'}
+                            valuePropName={'checked'}
+                            rules={[{ type: 'boolean' }]}
+                        >
+                            <AntdSwitch />
+                        </AntdForm.Item>
+                    </AntdForm>
+                ),
+                onOk: () =>
+                    changePasswordForm
+                        .validateFields()
+                        .then(
+                            () => {
+                                return new Promise((resolve, reject) => {
+                                    void r_sys_user_change_password({
+                                        id: changePasswordForm.getFieldValue('id') as string,
+                                        password: changePasswordForm.getFieldValue(
+                                            'password'
+                                        ) as string,
+                                        credentialsExpiration: (changePasswordForm.getFieldValue(
+                                            'needChangePassword'
+                                        ) as boolean)
+                                            ? getNowUtc()
+                                            : undefined
+                                    }).then((res) => {
+                                        const response = res.data
+                                        if (response.success) {
+                                            resolve(true)
+                                        } else {
+                                            reject(response.msg)
+                                        }
+                                    })
+                                })
+                            },
+                            () => {
+                                return new Promise((_, reject) => {
+                                    reject('输入有误')
+                                })
+                            }
+                        )
+                        .then(() => {
+                            getUser()
+                        })
+            })
+        }
+    }
+
     const handleOnEditBtnClick = (value: UserWithRoleInfoVo) => {
         return () => {
             setIsDrawerEdit(true)
@@ -291,7 +434,7 @@ const User: React.FC = () => {
                 .then(
                     (confirmed) => {
                         if (confirmed) {
-                            setIsLoading(true)
+                            setIsLoadingUserData(true)
 
                             void r_sys_user_delete(value.id)
                                 .then((res) => {
@@ -306,7 +449,7 @@ const User: React.FC = () => {
                                     }
                                 })
                                 .finally(() => {
-                                    setIsLoading(false)
+                                    setIsLoadingUserData(false)
                                 })
                         }
                     },
@@ -323,11 +466,11 @@ const User: React.FC = () => {
         (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
 
     const handleOnSubmit = () => {
-        if (isSubmitting) {
+        if (isDrawerSubmitting) {
             return
         }
 
-        setIsSubmitting(true)
+        setIsDrawerSubmitting(true)
 
         if (isDrawerEdit) {
             void r_sys_user_update({
@@ -355,7 +498,7 @@ const User: React.FC = () => {
                     }
                 })
                 .finally(() => {
-                    setIsSubmitting(false)
+                    setIsDrawerSubmitting(false)
                 })
         } else {
             void r_sys_user_add({
@@ -384,7 +527,7 @@ const User: React.FC = () => {
                     }
                 })
                 .finally(() => {
-                    setIsSubmitting(false)
+                    setIsDrawerSubmitting(false)
                 })
         }
     }
@@ -429,7 +572,7 @@ const User: React.FC = () => {
     }
 
     const getUser = () => {
-        if (isLoading) {
+        if (isLoadingUserData) {
             return
         }
 
@@ -438,7 +581,7 @@ const User: React.FC = () => {
             return
         }
 
-        setIsLoading(true)
+        setIsLoadingUserData(true)
 
         void r_sys_user_get()
             .then((res) => {
@@ -460,7 +603,7 @@ const User: React.FC = () => {
                 }
             })
             .finally(() => {
-                setIsLoading(false)
+                setIsLoadingUserData(false)
             })
     }
 
@@ -526,10 +669,10 @@ const User: React.FC = () => {
     useEffect(() => {
         form.validateFields({ validateOnly: true }).then(
             () => {
-                setSubmittable(true)
+                setIsDrawerSubmittable(true)
             },
             () => {
-                setSubmittable(false)
+                setIsDrawerSubmittable(false)
             }
         )
 
@@ -564,8 +707,19 @@ const User: React.FC = () => {
     ])
 
     const addAndEditForm = (
-        <AntdForm form={form} disabled={isSubmitting}>
-            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '20px' }}>
+        <AntdForm
+            form={form}
+            disabled={isDrawerSubmitting}
+            labelCol={{ span: 6 }}
+            wrapperCol={{ span: 18 }}
+        >
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    marginBottom: 20
+                }}
+            >
                 <AntdTooltip title={'点击获取新头像'}>
                     <AntdAvatar
                         src={
@@ -577,7 +731,7 @@ const User: React.FC = () => {
                             />
                         }
                         size={100}
-                        style={{ background: COLOR_BACKGROUND }}
+                        style={{ background: COLOR_BACKGROUND, cursor: 'pointer' }}
                         onClick={getAvatar}
                     />
                 </AntdTooltip>
@@ -646,7 +800,7 @@ const User: React.FC = () => {
                         valuePropName={'checked'}
                         name={'locking'}
                         label={'锁定'}
-                        rules={[{ required: true, type: 'boolean' }]}
+                        rules={[{ type: 'boolean' }]}
                     >
                         <AntdSwitch />
                     </AntdForm.Item>
@@ -684,7 +838,7 @@ const User: React.FC = () => {
                         valuePropName={'checked'}
                         name={'enable'}
                         label={'启用'}
-                        rules={[{ required: true, type: 'boolean' }]}
+                        rules={[{ type: 'boolean' }]}
                     >
                         <AntdSwitch />
                     </AntdForm.Item>
@@ -756,7 +910,7 @@ const User: React.FC = () => {
                 columns={dataColumns}
                 rowKey={(record) => record.id}
                 pagination={tableParams.pagination}
-                loading={isLoading}
+                loading={isLoadingUserData}
                 onChange={handleOnTableChange}
                 rowSelection={{
                     type: 'checkbox',
@@ -769,17 +923,17 @@ const User: React.FC = () => {
     const drawerToolbar = (
         <AntdSpace>
             <AntdTooltip title={'刷新角色和用户组列表'}>
-                <AntdButton onClick={handleOnDrawerRefresh} disabled={isSubmitting}>
+                <AntdButton onClick={handleOnDrawerRefresh} disabled={isDrawerSubmitting}>
                     <Icon component={IconFatwebRefresh} />
                 </AntdButton>
             </AntdTooltip>
-            <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
+            <AntdButton onClick={handleOnDrawerClose} disabled={isDrawerSubmitting}>
                 取消
             </AntdButton>
             <AntdButton
                 type={'primary'}
-                disabled={!submittable}
-                loading={isSubmitting}
+                disabled={!isDrawerSubmittable}
+                loading={isDrawerSubmitting}
                 onClick={handleOnSubmit}
             >
                 提交
@@ -806,8 +960,8 @@ const User: React.FC = () => {
                 width={'36vw'}
                 onClose={handleOnDrawerClose}
                 open={isDrawerOpen}
-                closable={!isSubmitting}
-                maskClosable={!isSubmitting}
+                closable={!isDrawerSubmitting}
+                maskClosable={!isDrawerSubmitting}
                 extra={drawerToolbar}
             >
                 {addAndEditForm}
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 90f1b5b..15efd36 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -15,10 +15,12 @@ export const r_sys_user_info = () => request.get<UserWithPowerInfoVo>(URL_SYS_US
 
 export const r_sys_user_get = () => request.get<PageVo<UserWithRoleInfoVo>>(URL_SYS_USER)
 
-export const r_sys_user_add = (param: UserAddEditParam) => request.post(URL_SYS_USER, { ...param })
+export const r_sys_user_add = (param: UserAddEditParam) => request.post(URL_SYS_USER, param)
 
-export const r_sys_user_update = (param: UserAddEditParam) =>
-    request.put(URL_SYS_USER, { ...param })
+export const r_sys_user_update = (param: UserAddEditParam) => request.put(URL_SYS_USER, param)
+
+export const r_sys_user_change_password = (param: UserChangePasswordParam) =>
+    request.patch(URL_SYS_USER, param)
 
 export const r_sys_user_delete = (id: string) => request.delete(`${URL_SYS_USER}/${id}`)
 
@@ -27,39 +29,36 @@ export const r_sys_user_delete_list = (ids: React.Key[]) => request.delete(URL_S
 export const r_sys_power_get_list = () => request.get<PowerSetVo>(URL_SYS_POWER_LIST)
 
 export const r_sys_role_get = (param: RoleGetParam) =>
-    request.get<PageVo<RoleWithPowerGetVo>>(URL_SYS_ROLE, { ...param })
+    request.get<PageVo<RoleWithPowerGetVo>>(URL_SYS_ROLE, param)
 
 export const r_sys_role_get_list = () => request.get<RoleVo[]>(URL_SYS_ROLE_LIST)
 
 export const r_sys_role_change_status = (param: RoleChangeStatusParam) =>
-    request.patch<never>(URL_SYS_ROLE, { ...param })
+    request.patch<never>(URL_SYS_ROLE, param)
 
-export const r_sys_role_add = (param: RoleAddEditParam) => request.post(URL_SYS_ROLE, { ...param })
+export const r_sys_role_add = (param: RoleAddEditParam) => request.post(URL_SYS_ROLE, param)
 
-export const r_sys_role_update = (param: RoleAddEditParam) =>
-    request.put(URL_SYS_ROLE, { ...param })
+export const r_sys_role_update = (param: RoleAddEditParam) => request.put(URL_SYS_ROLE, param)
 
 export const r_sys_role_delete = (id: string) => request.delete(`${URL_SYS_ROLE}/${id}`)
 
 export const r_sys_role_delete_list = (ids: React.Key[]) => request.delete(URL_SYS_ROLE, { ids })
 
 export const r_sys_group_get = (param: GroupGetParam) =>
-    request.get<PageVo<GroupWithRoleGetVo>>(URL_SYS_GROUP, { ...param })
+    request.get<PageVo<GroupWithRoleGetVo>>(URL_SYS_GROUP, param)
 
 export const r_sys_group_get_list = () => request.get<GroupVo[]>(URL_SYS_GROUP_LIST)
 
 export const r_sys_group_change_status = (param: GroupChangeStatusParam) =>
-    request.patch<never>(URL_SYS_GROUP, { ...param })
+    request.patch<never>(URL_SYS_GROUP, param)
 
-export const r_sys_group_add = (param: GroupAddEditParam) =>
-    request.post(URL_SYS_GROUP, { ...param })
+export const r_sys_group_add = (param: GroupAddEditParam) => request.post(URL_SYS_GROUP, param)
 
-export const r_sys_group_update = (param: GroupAddEditParam) =>
-    request.put(URL_SYS_GROUP, { ...param })
+export const r_sys_group_update = (param: GroupAddEditParam) => request.put(URL_SYS_GROUP, param)
 
 export const r_sys_group_delete = (id: string) => request.delete(`${URL_SYS_GROUP}/${id}`)
 
 export const r_sys_group_delete_list = (ids: React.Key[]) => request.delete(URL_SYS_GROUP, { ids })
 
 export const r_sys_log_get = (param: SysLogGetParam) =>
-    request.get<PageVo<SysLogGetVo>>(URL_SYS_LOG, { ...param })
+    request.get<PageVo<SysLogGetVo>>(URL_SYS_LOG, param)
diff --git a/src/utils/common.tsx b/src/utils/common.tsx
index 2136aa5..c58a74a 100644
--- a/src/utils/common.tsx
+++ b/src/utils/common.tsx
@@ -145,6 +145,14 @@ export const getRedirectUrl = (path: string, redirectUrl: string): string => {
     return `${path}?redirect=${encodeURIComponent(redirectUrl)}`
 }
 
+export const getNowLocalTime = (format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
+    return moment().local().format(format)
+}
+
+export const getNowUtc = () => {
+    return moment().toISOString()
+}
+
 export const utcToLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
     return moment.utc(utcTime).local().format(format)
 }

From 2dedeb538adebb533ad177db5eeabd12f21b474c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 29 Nov 2023 18:08:28 +0800
Subject: [PATCH 092/307] Add button to jump to personal center

---
 src/pages/SystemFramework.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 483e88e..bef92f3 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -12,7 +12,18 @@ const SystemFramework: React.FC = () => {
         <>
             <FitFullScreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
-                    <Sidebar title={'系统设置'}>
+                    <Sidebar
+                        title={'系统设置'}
+                        bottomFixed={
+                            <SidebarItemList>
+                                <SidebarItem
+                                    path={'/user'}
+                                    icon={IconFatwebUser}
+                                    text={'个人中心'}
+                                />
+                            </SidebarItemList>
+                        }
+                    >
                         <SidebarItemList>
                             {system.map((value) => {
                                 return value.menu ? (

From 3f082628792728e5a2826bdf00bccffafe6a25c4 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 29 Nov 2023 18:10:56 +0800
Subject: [PATCH 093/307] Optimize action row stylesheet in user management
 page

---
 src/pages/system/User.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 6c61387..672ef65 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -178,7 +178,7 @@ const User: React.FC = () => {
         },
         {
             title: '操作',
-            width: '10em',
+            width: '14em',
             align: 'center',
             render: (_, record) => (
                 <>

From 2851467cd3ebfe38661eecd5d19c9f46b3440b52 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 29 Nov 2023 21:59:49 +0800
Subject: [PATCH 094/307] Add page control to user management page

---
 src/global.d.ts           |  5 +++++
 src/pages/system/User.tsx | 32 +++++++++++++++++++++++---------
 src/services/system.tsx   |  3 ++-
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index 94527a2..977ae55 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -175,6 +175,11 @@ interface TableParam {
     filters?: Record<string, _FilterValue | null>
 }
 
+interface UserGetParam extends PageParam {
+    searchValue?: string
+    searchRegex?: boolean
+}
+
 interface UserAddEditParam {
     id?: string
     username: string
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 672ef65..e168541 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -348,14 +348,16 @@ const User: React.FC = () => {
                         >
                             <AntdInput.Password />
                         </AntdForm.Item>
-                        <AntdForm.Item
-                            name={'needChangePassword'}
-                            label={'需改密'}
-                            valuePropName={'checked'}
-                            rules={[{ type: 'boolean' }]}
-                        >
-                            <AntdSwitch />
-                        </AntdForm.Item>
+                        {value.id !== '0' ? (
+                            <AntdForm.Item
+                                name={'needChangePassword'}
+                                label={'需改密'}
+                                valuePropName={'checked'}
+                                rules={[{ type: 'boolean' }]}
+                            >
+                                <AntdSwitch />
+                            </AntdForm.Item>
+                        ) : undefined}
                     </AntdForm>
                 ),
                 onOk: () =>
@@ -583,7 +585,19 @@ const User: React.FC = () => {
 
         setIsLoadingUserData(true)
 
-        void r_sys_user_get()
+        void r_sys_user_get({
+            currentPage: tableParams.pagination?.current,
+            pageSize: tableParams.pagination?.pageSize,
+            sortField:
+                tableParams.sortField && tableParams.sortOrder
+                    ? (tableParams.sortField as string)
+                    : undefined,
+            sortOrder:
+                tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
+            searchValue: searchValue.trim().length ? searchValue : undefined,
+            searchRegex: isUseRegex ? isUseRegex : undefined,
+            ...tableParams.filters
+        })
             .then((res) => {
                 const data = res.data
                 if (data.code === DATABASE_SELECT_SUCCESS) {
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 15efd36..6dfd943 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -13,7 +13,8 @@ import request from '@/services/index'
 
 export const r_sys_user_info = () => request.get<UserWithPowerInfoVo>(URL_SYS_USER_INFO)
 
-export const r_sys_user_get = () => request.get<PageVo<UserWithRoleInfoVo>>(URL_SYS_USER)
+export const r_sys_user_get = (param: UserGetParam) =>
+    request.get<PageVo<UserWithRoleInfoVo>>(URL_SYS_USER, param)
 
 export const r_sys_user_add = (param: UserAddEditParam) => request.post(URL_SYS_USER, param)
 

From 39d0a9b9cde8921894a15712a790857039758d27 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 29 Nov 2023 22:32:54 +0800
Subject: [PATCH 095/307] Hide delete action if user is admin

---
 src/pages/system/User.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index e168541..49d7cd5 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -195,12 +195,14 @@ const User: React.FC = () => {
                         >
                             编辑
                         </a>
-                        <a
-                            style={{ color: COLOR_PRODUCTION }}
-                            onClick={handleOnDeleteBtnClick(record)}
-                        >
-                            删除
-                        </a>
+                        {record.id !== '0' ? (
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnDeleteBtnClick(record)}
+                            >
+                                删除
+                            </a>
+                        ) : undefined}
                     </AntdSpace>
                 </>
             )
@@ -928,7 +930,8 @@ const User: React.FC = () => {
                 onChange={handleOnTableChange}
                 rowSelection={{
                     type: 'checkbox',
-                    onChange: handleOnTableSelectChange
+                    onChange: handleOnTableSelectChange,
+                    getCheckboxProps: (record) => ({ disabled: record.id === '0' })
                 }}
             />
         </Card>

From 9a39e05fdf502b5db44bc3bf6f4f911075b39f49 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 29 Nov 2023 23:23:02 +0800
Subject: [PATCH 096/307] Optimize search in user management page

---
 src/global.d.ts           |  1 +
 src/pages/system/User.tsx | 25 +++++++++++++++++--------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index 977ae55..a3ac17f 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -176,6 +176,7 @@ interface TableParam {
 }
 
 interface UserGetParam extends PageParam {
+    searchType?: string
     searchValue?: string
     searchRegex?: boolean
 }
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 49d7cd5..44e10b6 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -4,7 +4,6 @@ import dayjs from 'dayjs'
 import {
     COLOR_BACKGROUND,
     COLOR_ERROR_SECONDARY,
-    COLOR_FONT_SECONDARY,
     COLOR_PRODUCTION,
     DATABASE_DELETE_SUCCESS,
     DATABASE_DUPLICATE_KEY,
@@ -64,6 +63,7 @@ const User: React.FC = () => {
     const [userData, setUserData] = useState<UserWithRoleInfoVo[]>([])
     const [isLoadingUserData, setIsLoadingUserData] = useState(false)
 
+    const [searchType, setSearchType] = useState('ALL')
     const [searchValue, setSearchValue] = useState('')
     const [isUseRegex, setIsUseRegex] = useState(false)
     const [isRegexLegal, setIsRegexLegal] = useState(true)
@@ -557,6 +557,10 @@ const User: React.FC = () => {
         }
     }
 
+    const handleOnSearchTypeChange = (value: string) => {
+        setSearchType(value)
+    }
+
     const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
         setIsUseRegex(e.target.checked)
         if (e.target.checked) {
@@ -596,6 +600,7 @@ const User: React.FC = () => {
                     : undefined,
             sortOrder:
                 tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
+            searchType,
             searchValue: searchValue.trim().length ? searchValue : undefined,
             searchRegex: isUseRegex ? isUseRegex : undefined,
             ...tableParams.filters
@@ -885,14 +890,18 @@ const User: React.FC = () => {
             <Card style={{ overflow: 'inherit' }}>
                 <AntdInput
                     addonBefore={
-                        <span
-                            style={{
-                                fontSize: '0.9em',
-                                color: COLOR_FONT_SECONDARY
-                            }}
+                        <AntdSelect
+                            value={searchType}
+                            onChange={handleOnSearchTypeChange}
+                            style={{ width: '6em' }}
+                            dropdownStyle={{ textAlign: 'center' }}
                         >
-                            内容
-                        </span>
+                            <AntdSelect.Option value={'ALL'}>全部</AntdSelect.Option>
+                            <AntdSelect.Option value={'ID'}>ID</AntdSelect.Option>
+                            <AntdSelect.Option value={'USERNAME'}>用户名</AntdSelect.Option>
+                            <AntdSelect.Option value={'NICKNAME'}>昵称</AntdSelect.Option>
+                            <AntdSelect.Option value={'EMAIL'}>邮箱</AntdSelect.Option>
+                        </AntdSelect>
                     }
                     suffix={
                         <>

From 99d2a73b6ceec3d3896d5dfd8352b89875c75233 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 30 Nov 2023 10:51:19 +0800
Subject: [PATCH 097/307] Optimize pagination

---
 src/pages/system/Group.tsx | 7 ++++++-
 src/pages/system/Log.tsx   | 7 ++++++-
 src/pages/system/Role.tsx  | 7 ++++++-
 src/pages/system/User.tsx  | 7 ++++++-
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index 3d7fcd1..fb8536e 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -36,7 +36,11 @@ const Group: React.FC = () => {
         pagination: {
             current: 1,
             pageSize: 20,
-            position: ['bottomCenter']
+            position: ['bottomCenter'],
+            showTotal: (total, range) =>
+                `第 ${
+                    range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
+                } 项 共 ${total} 项`
         }
     })
     const [searchName, setSearchName] = useState('')
@@ -138,6 +142,7 @@ const Group: React.FC = () => {
         filters: Record<string, _FilterValue | null>,
         sorter: _SorterResult<GroupWithRoleGetVo> | _SorterResult<GroupWithRoleGetVo>[]
     ) => {
+        pagination = { ...tableParams.pagination, ...pagination }
         if (Array.isArray(sorter)) {
             setTableParams({
                 pagination,
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 7230211..d16fe8c 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -19,7 +19,11 @@ const Log: React.FC = () => {
         pagination: {
             current: 1,
             pageSize: 20,
-            position: ['bottomCenter']
+            position: ['bottomCenter'],
+            showTotal: (total, range) =>
+                `第 ${
+                    range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
+                } 项 共 ${total} 项`
         }
     })
     const [searchRequestUrl, setSearchRequestUrl] = useState('')
@@ -134,6 +138,7 @@ const Log: React.FC = () => {
         filters: Record<string, _FilterValue | null>,
         sorter: _SorterResult<SysLogGetVo> | _SorterResult<SysLogGetVo>[]
     ) => {
+        pagination = { ...tableParams.pagination, ...pagination }
         if (Array.isArray(sorter)) {
             setTableParams({
                 pagination,
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index f0ea4ce..8594664 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -36,7 +36,11 @@ const Role: React.FC = () => {
         pagination: {
             current: 1,
             pageSize: 20,
-            position: ['bottomCenter']
+            position: ['bottomCenter'],
+            showTotal: (total, range) =>
+                `第 ${
+                    range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
+                } 项 共 ${total} 项`
         }
     })
     const [searchName, setSearchName] = useState('')
@@ -130,6 +134,7 @@ const Role: React.FC = () => {
         filters: Record<string, _FilterValue | null>,
         sorter: _SorterResult<RoleWithPowerGetVo> | _SorterResult<RoleWithPowerGetVo>[]
     ) => {
+        pagination = { ...tableParams.pagination, ...pagination }
         if (Array.isArray(sorter)) {
             setTableParams({
                 pagination,
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 44e10b6..a8df683 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -56,7 +56,11 @@ const User: React.FC = () => {
         pagination: {
             current: 1,
             pageSize: 20,
-            position: ['bottomCenter']
+            position: ['bottomCenter'],
+            showTotal: (total, range) =>
+                `第 ${
+                    range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
+                } 项 共 ${total} 项`
         }
     })
     const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
@@ -214,6 +218,7 @@ const User: React.FC = () => {
         filters: Record<string, _FilterValue | null>,
         sorter: _SorterResult<UserWithRoleInfoVo> | _SorterResult<UserWithRoleInfoVo>[]
     ) => {
+        pagination = { ...tableParams.pagination, ...pagination }
         if (Array.isArray(sorter)) {
             setTableParams({
                 pagination,

From bf8f915b1507dd016a1e0c123d1e9480be0f179b Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 30 Nov 2023 12:05:27 +0800
Subject: [PATCH 098/307] Optimize load data

---
 src/pages/system/Group.tsx | 13 ++++++++-----
 src/pages/system/Log.tsx   |  3 ++-
 src/pages/system/Role.tsx  | 13 ++++++++-----
 src/pages/system/User.tsx  | 19 ++++++++++++++-----
 src/utils/hooks.tsx        | 16 ++++++++++++++++
 5 files changed, 48 insertions(+), 16 deletions(-)
 create mode 100644 src/utils/hooks.tsx

diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index fb8536e..2563fed 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -11,6 +11,7 @@ import {
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
 import { utcToLocalTime } from '@/utils/common'
+import { useUpdatedEffect } from '@/utils/hooks'
 import {
     r_sys_group_add,
     r_sys_group_change_status,
@@ -174,6 +175,9 @@ const Group: React.FC = () => {
         form.setFieldValue('name', newFormValues?.name)
         form.setFieldValue('roleIds', newFormValues?.roleIds)
         form.setFieldValue('enable', newFormValues?.enable ?? true)
+        if (!roleData || !roleData.length) {
+            getRoleData()
+        }
     }
 
     const handleOnListDeleteBtnClick = () => {
@@ -220,6 +224,9 @@ const Group: React.FC = () => {
                 value.roles.map((role) => role.id)
             )
             form.setFieldValue('enable', value.enable)
+            if (!roleData || !roleData.length) {
+                getRoleData()
+            }
             void form.validateFields()
         }
     }
@@ -469,11 +476,7 @@ const Group: React.FC = () => {
         }
     }, [formValues])
 
-    useEffect(() => {
-        getRoleData()
-    }, [])
-
-    useEffect(() => {
+    useUpdatedEffect(() => {
         getGroup()
     }, [
         JSON.stringify(tableParams.filters),
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index d16fe8c..e530c95 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -6,6 +6,7 @@ import {
     DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
 import { dayjsToUtc, utcToLocalTime } from '@/utils/common'
+import { useUpdatedEffect } from '@/utils/hooks'
 import { r_sys_log_get } from '@/services/system'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import Card from '@/components/common/Card'
@@ -256,7 +257,7 @@ const Log: React.FC = () => {
             })
     }
 
-    useEffect(() => {
+    useUpdatedEffect(() => {
         getLog()
     }, [
         JSON.stringify(tableParams.filters),
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index 8594664..652f9cf 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -11,6 +11,7 @@ import {
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
 import { utcToLocalTime, powerListToPowerTree } from '@/utils/common'
+import { useUpdatedEffect } from '@/utils/hooks'
 import {
     r_sys_role_add,
     r_sys_role_change_status,
@@ -166,6 +167,9 @@ const Role: React.FC = () => {
         form.setFieldValue('name', newFormValues?.name)
         form.setFieldValue('powerIds', newFormValues?.powerIds)
         form.setFieldValue('enable', newFormValues?.enable ?? true)
+        if (!powerTreeData || !powerTreeData.length) {
+            getPowerTreeData()
+        }
     }
 
     const handleOnListDeleteBtnClick = () => {
@@ -212,6 +216,9 @@ const Role: React.FC = () => {
                 value.operations.map((operation) => operation.id)
             )
             form.setFieldValue('enable', value.enable)
+            if (!powerTreeData || !powerTreeData.length) {
+                getPowerTreeData()
+            }
             void form.validateFields()
         }
     }
@@ -478,11 +485,7 @@ const Role: React.FC = () => {
         }
     }, [formValues])
 
-    useEffect(() => {
-        getPowerTreeData()
-    }, [])
-
-    useEffect(() => {
+    useUpdatedEffect(() => {
         getRole()
     }, [
         JSON.stringify(tableParams.filters),
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index a8df683..ebc6a69 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -12,6 +12,7 @@ import {
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
 import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc, getNowUtc } from '@/utils/common'
+import { useUpdatedEffect } from '@/utils/hooks'
 import {
     r_sys_group_get_list,
     r_sys_role_get_list,
@@ -259,6 +260,12 @@ const User: React.FC = () => {
         form.setFieldValue('roleIds', newFormValues?.roleIds)
         form.setFieldValue('groupIds', newFormValues?.groupIds)
 
+        if (!roleData || !roleData.length) {
+            getRoleData()
+        }
+        if (!groupData || !groupData.length) {
+            getGroupData()
+        }
         getAvatar()
     }
 
@@ -429,6 +436,12 @@ const User: React.FC = () => {
                 'groupIds',
                 value.groups.map((group) => group.id)
             )
+            if (!roleData || !roleData.length) {
+                getRoleData()
+            }
+            if (!groupData || !groupData.length) {
+                getGroupData()
+            }
             void form.validateFields()
         }
     }
@@ -718,11 +731,7 @@ const User: React.FC = () => {
         }
     }, [formValues])
 
-    useEffect(() => {
-        handleOnDrawerRefresh()
-    }, [])
-
-    useEffect(() => {
+    useUpdatedEffect(() => {
         getUser()
     }, [
         JSON.stringify(tableParams.filters),
diff --git a/src/utils/hooks.tsx b/src/utils/hooks.tsx
new file mode 100644
index 0000000..da151a4
--- /dev/null
+++ b/src/utils/hooks.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const useUpdatedEffect = (
+    effect: React.EffectCallback,
+    dependencies: React.DependencyList
+) => {
+    const isFirstRender = useRef(true)
+
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false
+        } else {
+            effect()
+        }
+    }, dependencies)
+}

From f595cb380a69446233c1eae10abe62f25f0f3d4e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 30 Nov 2023 13:57:45 +0800
Subject: [PATCH 099/307] Optimize util structure

---
 src/AuthRoute.tsx                             |   4 +-
 .../common/sidebar/SidebarFooter.tsx          |   4 +-
 src/components/common/sidebar/index.tsx       |   2 +-
 src/pages/Login.tsx                           |   4 +-
 src/pages/UserFramework.tsx                   |   2 +-
 src/pages/system/Group.tsx                    |   4 +-
 src/pages/system/Log.tsx                      |   4 +-
 src/pages/system/Role.tsx                     |   5 +-
 src/pages/system/User.tsx                     |   4 +-
 src/router/system.tsx                         |   4 +-
 src/services/api/{avatar.ts => avatar.tsx}    |   0
 src/services/index.tsx                        |   2 +-
 src/{utils/common.tsx => util/auth.tsx}       | 261 +++++++-----------
 src/util/browser.tsx                          |  63 +++++
 src/util/common.tsx                           |  56 ++++
 src/util/datetime.tsx                         |  30 ++
 src/{utils => util}/hooks.tsx                 |   0
 src/util/route.tsx                            |  13 +
 src/utils/auth.ts                             | 108 --------
 19 files changed, 285 insertions(+), 285 deletions(-)
 rename src/services/api/{avatar.ts => avatar.tsx} (100%)
 rename src/{utils/common.tsx => util/auth.tsx} (51%)
 create mode 100644 src/util/browser.tsx
 create mode 100644 src/util/common.tsx
 create mode 100644 src/util/datetime.tsx
 rename src/{utils => util}/hooks.tsx (100%)
 create mode 100644 src/util/route.tsx
 delete mode 100644 src/utils/auth.ts

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index c131a0b..dcf5b83 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -1,6 +1,6 @@
 import { PRODUCTION_NAME } from '@/constants/common.constants'
-import { getLoginStatus } from '@/utils/auth'
-import { getRedirectUrl } from '@/utils/common'
+import { getRedirectUrl } from '@/util/route'
+import { getLoginStatus } from '@/util/auth'
 
 const AuthRoute = () => {
     const matches = useMatches()
diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx
index 20d0fe4..6e1c9bb 100644
--- a/src/components/common/sidebar/SidebarFooter.tsx
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
 import { COLOR_ERROR } from '@/constants/common.constants'
-import { getRedirectUrl } from '@/utils/common'
-import { getLoginStatus, getNickname, logout } from '@/utils/auth'
+import { getRedirectUrl } from '@/util/route'
+import { getLoginStatus, getNickname, logout } from '@/util/auth'
 
 const SidebarFooter: React.FC = () => {
     const matches = useMatches()
diff --git a/src/components/common/sidebar/index.tsx b/src/components/common/sidebar/index.tsx
index 281eb1a..cf8e542 100644
--- a/src/components/common/sidebar/index.tsx
+++ b/src/components/common/sidebar/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/sidebar.scss'
-import { getLocalStorage, setLocalStorage } from '@/utils/common'
+import { getLocalStorage, setLocalStorage } from '@/util/browser'
 import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate'
 import SidebarFooter from '@/components/common/sidebar/SidebarFooter'
 
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 65506a2..4fd39b2 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -6,8 +6,8 @@ import {
     PERMISSION_USER_DISABLE,
     PERMISSION_USERNAME_NOT_FOUND
 } from '@/constants/common.constants'
-import { utcToLocalTime, setToken } from '@/utils/common'
-import { getUserInfo, login } from '@/utils/auth'
+import { utcToLocalTime } from '@/util/datetime'
+import { getUserInfo, login, setToken } from '@/util/auth'
 
 const Login: React.FC = () => {
     const [messageApi, contextHolder] = message.useMessage()
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index b88ff73..830c463 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@/assets/css/pages/tools-framework.scss'
 import user from '@/router/user'
-import { hasPathPermission } from '@/utils/auth'
+import { hasPathPermission } from '@/util/auth'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index 2563fed..5658fc4 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -10,8 +10,8 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { utcToLocalTime } from '@/utils/common'
-import { useUpdatedEffect } from '@/utils/hooks'
+import { useUpdatedEffect } from '@/util/hooks'
+import { utcToLocalTime } from '@/util/datetime'
 import {
     r_sys_group_add,
     r_sys_group_change_status,
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index e530c95..c5e1425 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -5,8 +5,8 @@ import {
     COLOR_FONT_SECONDARY,
     DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
-import { dayjsToUtc, utcToLocalTime } from '@/utils/common'
-import { useUpdatedEffect } from '@/utils/hooks'
+import { useUpdatedEffect } from '@/util/hooks'
+import { dayjsToUtc, utcToLocalTime } from '@/util/datetime'
 import { r_sys_log_get } from '@/services/system'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import Card from '@/components/common/Card'
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index 652f9cf..cf34831 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -10,8 +10,9 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { utcToLocalTime, powerListToPowerTree } from '@/utils/common'
-import { useUpdatedEffect } from '@/utils/hooks'
+import { useUpdatedEffect } from '@/util/hooks'
+import { utcToLocalTime } from '@/util/datetime'
+import { powerListToPowerTree } from '@/util/auth.tsx'
 import {
     r_sys_role_add,
     r_sys_role_change_status,
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index ebc6a69..42afc11 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -11,8 +11,8 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc, getNowUtc } from '@/utils/common'
-import { useUpdatedEffect } from '@/utils/hooks'
+import { useUpdatedEffect } from '@/util/hooks'
+import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc, getNowUtc } from '@/util/datetime'
 import {
     r_sys_group_get_list,
     r_sys_role_get_list,
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 4bdc155..2f8197a 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const user: RouteJsonObject[] = [
+const system: RouteJsonObject[] = [
     {
         path: '',
         absolutePath: '/system',
@@ -61,4 +61,4 @@ const user: RouteJsonObject[] = [
     }
 ]
 
-export default user
+export default system
diff --git a/src/services/api/avatar.ts b/src/services/api/avatar.tsx
similarity index 100%
rename from src/services/api/avatar.ts
rename to src/services/api/avatar.tsx
diff --git a/src/services/index.tsx b/src/services/index.tsx
index ab8ca04..1b890c9 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -7,7 +7,7 @@ import {
     PERMISSION_TOKEN_RENEW_SUCCESS,
     PERMISSION_UNAUTHORIZED
 } from '@/constants/common.constants'
-import { getToken, removeToken, setToken } from '@/utils/common'
+import { getToken, setToken, removeToken } from '@/util/auth'
 
 const service: AxiosInstance = axios.create({
     baseURL: import.meta.env.VITE_API_URL,
diff --git a/src/utils/common.tsx b/src/util/auth.tsx
similarity index 51%
rename from src/utils/common.tsx
rename to src/util/auth.tsx
index c58a74a..b9e3d3f 100644
--- a/src/utils/common.tsx
+++ b/src/util/auth.tsx
@@ -1,85 +1,28 @@
-import ReactDOM from 'react-dom/client'
-import moment from 'moment'
-import dayjs from 'dayjs'
 import _ from 'lodash'
-import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
-import LoadingMask from '@/components/common/LoadingMask'
+import {
+    STORAGE_TOKEN_KEY,
+    STORAGE_USER_INFO_KEY,
+    DATABASE_SELECT_SUCCESS
+} from '@/constants/common.constants'
+import { floorNumber, randomColor, randomFloat, randomInt } from '@/util/common'
+import { getLocalStorage, removeLocalStorage, setLocalStorage } from '@/util/browser'
+import { getFullTitle } from '@/util/route'
+import { r_sys_user_info } from '@/services/system'
+import { r_auth_login, r_auth_logout } from '@/services/auth'
 
-export const getQueryVariable = (variable: string) => {
-    const query = window.location.search.substring(1)
-    const vars = query.split('&')
-    for (const value of vars) {
-        const pair = value.split('=')
-        if (pair[0] === variable) {
-            return decodeURIComponent(pair[1].replace(/\+/g, ' '))
-        }
-    }
-    return null
-}
-
-export const setCookie = (
-    name: string,
-    value: string,
-    daysToLive: number | null,
-    path: string | null
-) => {
-    let cookie = `${name}=${encodeURIComponent(value)}`
-
-    if (typeof daysToLive === 'number') {
-        cookie = `${cookie}; max-age=${daysToLive * 24 * 60 * 60}`
-    }
-
-    if (typeof path === 'string') {
-        cookie = `${cookie}; path=${path}`
-    }
-
-    document.cookie = cookie
-}
-
-export const setLocalStorage = (name: string, value: string) => {
-    localStorage.setItem(name, value)
-}
+let captcha: Captcha
 
 export const setToken = (token: string) => {
     setLocalStorage(STORAGE_TOKEN_KEY, token)
 }
 
-export const getCookie = (name: string) => {
-    const cookieArr = document.cookie.split(';')
-
-    for (const cookie of cookieArr) {
-        const cookiePair = cookie.split('=')
-        if (cookiePair[0].trim() === name) {
-            return decodeURIComponent(cookiePair[1])
-        }
-    }
-
-    return null
-}
-
-export const getLocalStorage = (name: string) => {
-    return localStorage.getItem(name)
-}
-
-export const getToken = () => {
-    return getLocalStorage(STORAGE_TOKEN_KEY)
-}
-
-export const removeCookie = (name: string) => {
-    document.cookie = `${name}=; max-age=0`
-}
-
-export const removeLocalStorage = (name: string) => {
-    localStorage.removeItem(name)
-}
-
 export const removeToken = () => {
     removeLocalStorage(STORAGE_USER_INFO_KEY)
     removeLocalStorage(STORAGE_TOKEN_KEY)
 }
 
-export const clearLocalStorage = () => {
-    localStorage.clear()
+export const getToken = () => {
+    return getLocalStorage(STORAGE_TOKEN_KEY)
 }
 
 export const getCaptcha = (width: number, high: number, num: number) => {
@@ -122,68 +65,102 @@ export const getCaptcha = (width: number, high: number, num: number) => {
     }
 }
 
-const randomInt = (start: number, end: number) => {
-    if (start > end) {
-        const t = start
-        start = end
-        end = t
+export const login = async (username: string, password: string) => {
+    return await r_auth_login(username, password)
+}
+
+export const logout = async () => {
+    return r_auth_logout().finally(() => {
+        removeToken()
+    })
+}
+
+export const getLoginStatus = () => {
+    return getLocalStorage(STORAGE_TOKEN_KEY) !== null
+}
+
+export const getUserInfo = async (): Promise<UserWithPowerInfoVo> => {
+    if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) {
+        return new Promise((resolve) => {
+            resolve(
+                JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as UserWithPowerInfoVo
+            )
+        })
     }
-    start = Math.ceil(start)
-    end = Math.floor(end)
-    return start + Math.floor(Math.random() * (end - start))
+    return requestUserInfo()
 }
 
-const randomFloat = (start: number, end: number) => {
-    return start + Math.random() * (end - start)
-}
+export const requestUserInfo = async () => {
+    let user: UserWithPowerInfoVo | null
 
-const randomColor = (start: number, end: number) => {
-    return `rgb(${randomInt(start, end)},${randomInt(start, end)},${randomInt(start, end)})`
-}
-
-export const getRedirectUrl = (path: string, redirectUrl: string): string => {
-    return `${path}?redirect=${encodeURIComponent(redirectUrl)}`
-}
-
-export const getNowLocalTime = (format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
-    return moment().local().format(format)
-}
-
-export const getNowUtc = () => {
-    return moment().toISOString()
-}
-
-export const utcToLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
-    return moment.utc(utcTime).local().format(format)
-}
-
-export const dayjsToLocalTime = (date: dayjs.Dayjs, format: string = 'YYYY-MM-DD HH:mm:ssZ') => {
-    return date.format(format)
-}
-
-export const dayjsToUtc = (date: dayjs.Dayjs) => {
-    return date.toISOString()
-}
-
-export const localTimeToUtc = (localTime: string) => {
-    return moment(localTime).toISOString()
-}
-
-export const isPastTime = (utcTime: string) => {
-    return moment.utc(utcTime).isBefore(moment.now())
-}
-
-export const floorNumber = (num: number, digits: number) => {
-    if (digits > 0) {
-        return Math.floor(num / Math.pow(10, digits - 1)) * Math.pow(10, digits - 1)
-    } else {
-        const regExpMatchArray = num.toString().match(new RegExp('^\\d\\.\\d{' + -digits + '}'))
-        if (regExpMatchArray !== null) {
-            return parseFloat(regExpMatchArray[0]).toFixed(-digits)
-        } else {
-            return num
+    await r_sys_user_info().then((value) => {
+        const response = value.data
+        if (response.code === DATABASE_SELECT_SUCCESS) {
+            user = response.data
+            setLocalStorage(STORAGE_USER_INFO_KEY, JSON.stringify(user))
         }
+    })
+
+    return new Promise<UserWithPowerInfoVo>((resolve, reject) => {
+        if (user) {
+            resolve(user)
+        }
+        reject(user)
+    })
+}
+
+export const getNickname = async () => {
+    const user = await getUserInfo()
+
+    return user.userInfo.nickname
+}
+
+export const getUsername = async () => {
+    const user = await getUserInfo()
+
+    return user.username
+}
+
+export const getPermissionPath = (): string[] => {
+    const s = getLocalStorage(STORAGE_USER_INFO_KEY)
+    if (s === null) {
+        return []
     }
+
+    const user = JSON.parse(s) as UserWithPowerInfoVo
+    const paths: string[] = []
+    user.menus.forEach((menu) => {
+        paths.push(menu.url)
+    })
+
+    return paths
+}
+
+export const hasPathPermission = (path: string) => {
+    return getPermissionPath().indexOf(path) !== -1
+}
+
+/*
+export const getAuthRoute = (route: RouteJsonObject[]): RouteJsonObject[] => {
+    return route.map((value) => {
+        if (value.absolutePath) {
+            value.absolutePath
+        }
+        if (value.children) {
+            value.children = getAuthRoute(value.children)
+        }
+        return value
+    })
+}
+*/
+
+export const getCaptchaSrc = () => {
+    captcha = getCaptcha(300, 150, 4)
+    return captcha.base64Src
+}
+
+export const verifyCaptcha = (value: string) => {
+    return captcha.value.toLowerCase() === value.replace(/\s*/g, '').toLowerCase()
 }
 
 export const powerListToPowerTree = (
@@ -283,35 +260,3 @@ const parentToTree = (data: _DataNode[]): _DataNode[] => {
 
     return parents
 }
-
-const getFullTitle = (data: _DataNode, preTitle?: string) => {
-    data.fullTitle = `${preTitle ? `${preTitle}-` : ''}${data.title as string}`
-    data.children &&
-        data.children.forEach((value) => {
-            getFullTitle(value, data.fullTitle)
-        })
-
-    return data
-}
-
-export const showLoadingMask = (id: string) => {
-    if (document.querySelector(`#${id}`)) {
-        return
-    }
-
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    container.id = id
-    container.setAttribute(
-        'style',
-        'position: fixed; width: 100vw; height: 100vh; z-index: 10000; left: 0; top: 0;'
-    )
-
-    return ReactDOM.createRoot(container).render(<LoadingMask />)
-}
-
-export const removeLoadingMask = (id: string) => {
-    document.querySelectorAll(`#${id}`).forEach((value) => {
-        value.parentNode?.removeChild(value)
-    })
-}
diff --git a/src/util/browser.tsx b/src/util/browser.tsx
new file mode 100644
index 0000000..5b8457d
--- /dev/null
+++ b/src/util/browser.tsx
@@ -0,0 +1,63 @@
+export const getQueryVariable = (variable: string) => {
+    const query = window.location.search.substring(1)
+    const vars = query.split('&')
+    for (const value of vars) {
+        const pair = value.split('=')
+        if (pair[0] === variable) {
+            return decodeURIComponent(pair[1].replace(/\+/g, ' '))
+        }
+    }
+    return null
+}
+
+export const setCookie = (
+    name: string,
+    value: string,
+    daysToLive: number | null,
+    path: string | null
+) => {
+    let cookie = `${name}=${encodeURIComponent(value)}`
+
+    if (typeof daysToLive === 'number') {
+        cookie = `${cookie}; max-age=${daysToLive * 24 * 60 * 60}`
+    }
+
+    if (typeof path === 'string') {
+        cookie = `${cookie}; path=${path}`
+    }
+
+    document.cookie = cookie
+}
+
+export const getCookie = (name: string) => {
+    const cookieArr = document.cookie.split(';')
+
+    for (const cookie of cookieArr) {
+        const cookiePair = cookie.split('=')
+        if (cookiePair[0].trim() === name) {
+            return decodeURIComponent(cookiePair[1])
+        }
+    }
+
+    return null
+}
+
+export const removeCookie = (name: string) => {
+    document.cookie = `${name}=; max-age=0`
+}
+
+export const setLocalStorage = (name: string, value: string) => {
+    localStorage.setItem(name, value)
+}
+
+export const getLocalStorage = (name: string) => {
+    return localStorage.getItem(name)
+}
+
+export const removeLocalStorage = (name: string) => {
+    localStorage.removeItem(name)
+}
+
+export const clearLocalStorage = () => {
+    localStorage.clear()
+}
diff --git a/src/util/common.tsx b/src/util/common.tsx
new file mode 100644
index 0000000..88bf514
--- /dev/null
+++ b/src/util/common.tsx
@@ -0,0 +1,56 @@
+import ReactDOM from 'react-dom/client'
+import LoadingMask from '@/components/common/LoadingMask'
+
+export const randomInt = (start: number, end: number) => {
+    if (start > end) {
+        const t = start
+        start = end
+        end = t
+    }
+    start = Math.ceil(start)
+    end = Math.floor(end)
+    return start + Math.floor(Math.random() * (end - start))
+}
+
+export const randomFloat = (start: number, end: number) => {
+    return start + Math.random() * (end - start)
+}
+
+export const randomColor = (start: number, end: number) => {
+    return `rgb(${randomInt(start, end)},${randomInt(start, end)},${randomInt(start, end)})`
+}
+
+export const floorNumber = (num: number, digits: number) => {
+    if (digits > 0) {
+        return Math.floor(num / Math.pow(10, digits - 1)) * Math.pow(10, digits - 1)
+    } else {
+        const regExpMatchArray = num.toString().match(new RegExp('^\\d\\.\\d{' + -digits + '}'))
+        if (regExpMatchArray !== null) {
+            return parseFloat(regExpMatchArray[0]).toFixed(-digits)
+        } else {
+            return num
+        }
+    }
+}
+
+export const showLoadingMask = (id: string) => {
+    if (document.querySelector(`#${id}`)) {
+        return
+    }
+
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    container.id = id
+    container.setAttribute(
+        'style',
+        'position: fixed; width: 100vw; height: 100vh; z-index: 10000; left: 0; top: 0;'
+    )
+
+    return ReactDOM.createRoot(container).render(<LoadingMask />)
+}
+
+export const removeLoadingMask = (id: string) => {
+    document.querySelectorAll(`#${id}`).forEach((value) => {
+        value.parentNode?.removeChild(value)
+    })
+}
diff --git a/src/util/datetime.tsx b/src/util/datetime.tsx
new file mode 100644
index 0000000..b88ade6
--- /dev/null
+++ b/src/util/datetime.tsx
@@ -0,0 +1,30 @@
+import moment from 'moment/moment'
+import dayjs from 'dayjs'
+
+export const getNowLocalTime = (format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
+    return moment().local().format(format)
+}
+
+export const getNowUtc = () => {
+    return moment().toISOString()
+}
+
+export const utcToLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
+    return moment.utc(utcTime).local().format(format)
+}
+
+export const dayjsToLocalTime = (date: dayjs.Dayjs, format: string = 'YYYY-MM-DD HH:mm:ssZ') => {
+    return date.format(format)
+}
+
+export const dayjsToUtc = (date: dayjs.Dayjs) => {
+    return date.toISOString()
+}
+
+export const localTimeToUtc = (localTime: string) => {
+    return moment(localTime).toISOString()
+}
+
+export const isPastTime = (utcTime: string) => {
+    return moment.utc(utcTime).isBefore(moment.now())
+}
diff --git a/src/utils/hooks.tsx b/src/util/hooks.tsx
similarity index 100%
rename from src/utils/hooks.tsx
rename to src/util/hooks.tsx
diff --git a/src/util/route.tsx b/src/util/route.tsx
new file mode 100644
index 0000000..e8a6489
--- /dev/null
+++ b/src/util/route.tsx
@@ -0,0 +1,13 @@
+export const getRedirectUrl = (path: string, redirectUrl: string): string => {
+    return `${path}?redirect=${encodeURIComponent(redirectUrl)}`
+}
+
+export const getFullTitle = (data: _DataNode, preTitle?: string) => {
+    data.fullTitle = `${preTitle ? `${preTitle}-` : ''}${data.title as string}`
+    data.children &&
+        data.children.forEach((value) => {
+            getFullTitle(value, data.fullTitle)
+        })
+
+    return data
+}
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
deleted file mode 100644
index d85501f..0000000
--- a/src/utils/auth.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import {
-    STORAGE_TOKEN_KEY,
-    STORAGE_USER_INFO_KEY,
-    DATABASE_SELECT_SUCCESS
-} from '@/constants/common.constants'
-import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common'
-import { r_sys_user_info } from '@/services/system'
-import { r_auth_login, r_auth_logout } from '@/services/auth'
-
-let captcha: Captcha
-
-export const login = async (username: string, password: string) => {
-    return await r_auth_login(username, password)
-}
-
-export const logout = async () => {
-    return r_auth_logout().finally(() => {
-        removeToken()
-    })
-}
-
-export const getLoginStatus = () => {
-    return getLocalStorage(STORAGE_TOKEN_KEY) !== null
-}
-
-export const getUserInfo = async (): Promise<UserWithPowerInfoVo> => {
-    if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) {
-        return new Promise((resolve) => {
-            resolve(
-                JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as UserWithPowerInfoVo
-            )
-        })
-    }
-    return requestUserInfo()
-}
-
-export const requestUserInfo = async () => {
-    let user: UserWithPowerInfoVo | null
-
-    await r_sys_user_info().then((value) => {
-        const response = value.data
-        if (response.code === DATABASE_SELECT_SUCCESS) {
-            user = response.data
-            setLocalStorage(STORAGE_USER_INFO_KEY, JSON.stringify(user))
-        }
-    })
-
-    return new Promise<UserWithPowerInfoVo>((resolve, reject) => {
-        if (user) {
-            resolve(user)
-        }
-        reject(user)
-    })
-}
-
-export const getNickname = async () => {
-    const user = await getUserInfo()
-
-    return user.userInfo.nickname
-}
-
-export const getUsername = async () => {
-    const user = await getUserInfo()
-
-    return user.username
-}
-
-export const getPermissionPath = (): string[] => {
-    const s = getLocalStorage(STORAGE_USER_INFO_KEY)
-    if (s === null) {
-        return []
-    }
-
-    const user = JSON.parse(s) as UserWithPowerInfoVo
-    const paths: string[] = []
-    user.menus.forEach((menu) => {
-        paths.push(menu.url)
-    })
-
-    return paths
-}
-
-export const hasPathPermission = (path: string) => {
-    return getPermissionPath().indexOf(path) !== -1
-}
-
-/*
-export const getAuthRoute = (route: RouteJsonObject[]): RouteJsonObject[] => {
-    return route.map((value) => {
-        if (value.absolutePath) {
-            value.absolutePath
-        }
-        if (value.children) {
-            value.children = getAuthRoute(value.children)
-        }
-        return value
-    })
-}
-*/
-
-export const getCaptchaSrc = () => {
-    captcha = getCaptcha(300, 150, 4)
-    return captcha.base64Src
-}
-
-export const verifyCaptcha = (value: string) => {
-    return captcha.value.toLowerCase() === value.replace(/\s*/g, '').toLowerCase()
-}

From d9e1cbcfa352ddc29b9e292930b3242e9cff387e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 30 Nov 2023 18:36:43 +0800
Subject: [PATCH 100/307] Optimize router

---
 src/App.tsx                   | 22 +++++++++--
 src/AuthRoute.tsx             |  7 +++-
 src/pages/HomeFramework.tsx   |  5 ++-
 src/pages/Login.tsx           |  3 ++
 src/pages/SystemFramework.tsx |  4 +-
 src/pages/UserFramework.tsx   |  2 +-
 src/router/index.tsx          | 43 +++------------------
 src/router/system.tsx         |  7 ++--
 src/util/auth.tsx             | 33 ----------------
 src/util/route.tsx            | 72 +++++++++++++++++++++++++++++++++++
 10 files changed, 113 insertions(+), 85 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3b7738a..dd4f9cf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,27 @@
 import React from 'react'
-import router from '@/router'
+import { getRouter } from '@/router'
 import LoadingMask from '@/components/common/LoadingMask'
 
+export const AppContext = createContext<{ refreshRouter: () => void }>({
+    refreshRouter: () => undefined
+})
+
 const App: React.FC = () => {
+    const [routerState, setRouterState] = useState(getRouter)
+
     return (
         <>
-            <Suspense fallback={<LoadingMask />}>
-                <RouterProvider router={router} />
-            </Suspense>
+            <AppContext.Provider
+                value={{
+                    refreshRouter: () => {
+                        setRouterState(getRouter())
+                    }
+                }}
+            >
+                <Suspense fallback={<LoadingMask />}>
+                    <RouterProvider router={routerState} />
+                </Suspense>
+            </AppContext.Provider>
         </>
     )
 }
diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index dcf5b83..4fe0f43 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -22,8 +22,13 @@ const AuthRoute = () => {
             )
         }
         if (isLogin && lastMatch.pathname === '/login') {
-            return <Navigate to="/" />
+            return <Navigate to={'/'} />
         }
+
+        if (location.pathname.length > 1 && location.pathname.endsWith('/')) {
+            return <Navigate to={location.pathname.substring(0, location.pathname.length - 1)} />
+        }
+
         return outlet
     }, [
         handle?.title,
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index e174f00..327f1f3 100644
--- a/src/pages/HomeFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/home-framework.scss'
 import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
-import router from '@/router'
+import { getRouter } from '@/router'
 import LoadingMask from '@/components/common/LoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 
@@ -54,7 +54,8 @@ export const HomeFrameworkContext = createContext<{
 
 const HomeFramework: React.FC = () => {
     const routeId = useMatches()[1].id
-    const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
+    const routeChildren = getRouter().routes[0].children?.find((value) => value.id === routeId)
+        ?.children
 
     const pathname = useLocation().pathname
 
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 4fd39b2..197eea6 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -8,8 +8,10 @@ import {
 } from '@/constants/common.constants'
 import { utcToLocalTime } from '@/util/datetime'
 import { getUserInfo, login, setToken } from '@/util/auth'
+import { AppContext } from '@/App'
 
 const Login: React.FC = () => {
+    const { refreshRouter } = useContext(AppContext)
     const [messageApi, contextHolder] = message.useMessage()
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
@@ -32,6 +34,7 @@ const Login: React.FC = () => {
                                 navigate('/')
                             }
                             void getUserInfo().then((user) => {
+                                refreshRouter()
                                 notification.success({
                                     message: '欢迎回来',
                                     description: (
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index bef92f3..085f6fa 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import '@/assets/css/pages/system-framework.scss'
-import system from '@/router/system'
+import { getSystemRouteJson } from '@/router/system'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
@@ -25,7 +25,7 @@ const SystemFramework: React.FC = () => {
                         }
                     >
                         <SidebarItemList>
-                            {system.map((value) => {
+                            {getSystemRouteJson().map((value) => {
                                 return value.menu ? (
                                     <SidebarItem
                                         end={value.id === 'system' ? true : undefined}
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 830c463..d4ffec5 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@/assets/css/pages/tools-framework.scss'
 import user from '@/router/user'
-import { hasPathPermission } from '@/util/auth'
+import { hasPathPermission } from '@/util/route'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
diff --git a/src/router/index.tsx b/src/router/index.tsx
index bd2f52b..d496494 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,41 +1,10 @@
 import React from 'react'
+import _ from 'lodash'
 import system from '@/router/system'
 import home from '@/router/home'
 import user from '@/router/user'
 import tools from '@/router/tools'
-
-const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => {
-    return jsonObject.map((value) => ({
-        path: value.path,
-        id: value.id,
-        element: value.element,
-        Component: value.component,
-        handle: {
-            absolutePath: value.absolutePath,
-            name: value.name,
-            titlePrefix: value.titlePrefix,
-            title: value.title,
-            titlePostfix: value.titlePostfix,
-            icon: value.icon,
-            menu: value.menu,
-            auth: value.auth,
-            permission: value.permission,
-            autoHide: value.autoHide
-        },
-        children: value.children && mapJsonToRoute(value.children)
-    }))
-}
-
-const setTitle = (jsonObject: RouteJsonObject[], title: string): RouteJsonObject[] => {
-    return jsonObject.map((value) => {
-        if (!value.title) {
-            value.title = title
-        }
-        value.children && setTitle(value.children, title)
-
-        return value
-    })
-}
+import { getAuthRoute, mapJsonToRoute, setTitle } from '@/util/route'
 
 const root: RouteJsonObject[] = [
     {
@@ -80,7 +49,8 @@ const root: RouteJsonObject[] = [
                 component: React.lazy(() => import('@/pages/SystemFramework')),
                 children: setTitle(system, '系统设置'),
                 name: '系统设置',
-                auth: true
+                auth: true,
+                permission: true
             },
             {
                 path: '',
@@ -98,7 +68,4 @@ const root: RouteJsonObject[] = [
     }
 ]
 
-const routes = mapJsonToRoute(root)
-
-const router = createBrowserRouter(routes)
-export default router
+export const getRouter = () => createBrowserRouter(mapJsonToRoute(getAuthRoute(_.cloneDeep(root))))
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 2f8197a..caf5d4c 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { getAuthRoute } from '@/util/route'
 
 const system: RouteJsonObject[] = [
     {
@@ -18,7 +19,6 @@ const system: RouteJsonObject[] = [
         name: '用户管理',
         icon: React.lazy(() => import('~icons/fatweb/user.jsx')),
         menu: true,
-        permission: true,
         autoHide: true
     },
     {
@@ -29,7 +29,6 @@ const system: RouteJsonObject[] = [
         name: '角色管理',
         icon: React.lazy(() => import('~icons/fatweb/role.jsx')),
         menu: true,
-        permission: true,
         autoHide: true
     },
     {
@@ -40,7 +39,6 @@ const system: RouteJsonObject[] = [
         name: '群组管理',
         icon: React.lazy(() => import('~icons/fatweb/group.jsx')),
         menu: true,
-        permission: true,
         autoHide: true
     },
     {
@@ -51,7 +49,6 @@ const system: RouteJsonObject[] = [
         name: '系统日志',
         icon: React.lazy(() => import('~icons/fatweb/log.jsx')),
         menu: true,
-        permission: true,
         autoHide: true
     },
     {
@@ -61,4 +58,6 @@ const system: RouteJsonObject[] = [
     }
 ]
 
+export const getSystemRouteJson = () => getAuthRoute(system, true)
+
 export default system
diff --git a/src/util/auth.tsx b/src/util/auth.tsx
index b9e3d3f..082abd0 100644
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -121,39 +121,6 @@ export const getUsername = async () => {
     return user.username
 }
 
-export const getPermissionPath = (): string[] => {
-    const s = getLocalStorage(STORAGE_USER_INFO_KEY)
-    if (s === null) {
-        return []
-    }
-
-    const user = JSON.parse(s) as UserWithPowerInfoVo
-    const paths: string[] = []
-    user.menus.forEach((menu) => {
-        paths.push(menu.url)
-    })
-
-    return paths
-}
-
-export const hasPathPermission = (path: string) => {
-    return getPermissionPath().indexOf(path) !== -1
-}
-
-/*
-export const getAuthRoute = (route: RouteJsonObject[]): RouteJsonObject[] => {
-    return route.map((value) => {
-        if (value.absolutePath) {
-            value.absolutePath
-        }
-        if (value.children) {
-            value.children = getAuthRoute(value.children)
-        }
-        return value
-    })
-}
-*/
-
 export const getCaptchaSrc = () => {
     captcha = getCaptcha(300, 150, 4)
     return captcha.base64Src
diff --git a/src/util/route.tsx b/src/util/route.tsx
index e8a6489..3065c09 100644
--- a/src/util/route.tsx
+++ b/src/util/route.tsx
@@ -1,3 +1,6 @@
+import { getLocalStorage } from '@/util/browser.tsx'
+import { STORAGE_USER_INFO_KEY } from '@/constants/common.constants.ts'
+
 export const getRedirectUrl = (path: string, redirectUrl: string): string => {
     return `${path}?redirect=${encodeURIComponent(redirectUrl)}`
 }
@@ -11,3 +14,72 @@ export const getFullTitle = (data: _DataNode, preTitle?: string) => {
 
     return data
 }
+
+export const getPermissionPath = (): string[] => {
+    const s = getLocalStorage(STORAGE_USER_INFO_KEY)
+    if (s === null) {
+        return []
+    }
+
+    const user = JSON.parse(s) as UserWithPowerInfoVo
+    const paths: string[] = []
+    user.menus.forEach((menu) => {
+        paths.push(menu.url)
+    })
+
+    return paths
+}
+
+export const hasPathPermission = (path: string) => {
+    return getPermissionPath().indexOf(path) !== -1
+}
+
+export const getAuthRoute = (
+    route: RouteJsonObject[],
+    parentPermission: boolean = false
+): RouteJsonObject[] => {
+    return route
+        .filter(
+            (value) =>
+                !(value.permission || parentPermission) || hasPathPermission(value.absolutePath)
+        )
+        .map((value) => {
+            if (value.children) {
+                value.children = getAuthRoute(value.children, parentPermission || value.permission)
+            }
+            return value
+        })
+}
+
+export const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => {
+    return jsonObject.map((value) => ({
+        path: value.path,
+        id: value.id,
+        element: value.element,
+        Component: value.component,
+        handle: {
+            absolutePath: value.absolutePath,
+            name: value.name,
+            titlePrefix: value.titlePrefix,
+            title: value.title,
+            titlePostfix: value.titlePostfix,
+            icon: value.icon,
+            menu: value.menu,
+            auth: value.auth,
+            permission: value.permission,
+            autoHide: value.autoHide
+        },
+        children: value.children && mapJsonToRoute(value.children)
+    }))
+}
+
+export const setTitle = (jsonObject: RouteJsonObject[], title: string): RouteJsonObject[] => {
+    return jsonObject.map((value) => {
+        if (!value.title) {
+            value.title = title
+        }
+        value.children && setTitle(value.children, title)
+
+        return value
+    })
+}

From e30a8c7b0006c4f52406750b1ac85d33e578bee7 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 30 Nov 2023 23:04:17 +0800
Subject: [PATCH 101/307] Rename table t_element to t_func

---
 src/global.d.ts           | 12 ++++++------
 src/pages/system/Role.tsx |  4 ++--
 src/util/auth.tsx         | 32 ++++++++++++++++----------------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index a3ac17f..76bf786 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -73,7 +73,7 @@ interface UserWithPowerInfoVo {
     userInfo: UserInfoVo
     modules: ModuleVo[]
     menus: MenuVo[]
-    elements: ElementVo[]
+    funcs: FuncVo[]
     operations: OperationVo[]
 }
 
@@ -117,19 +117,19 @@ interface MenuVo {
     children: MenuVo[]
 }
 
-interface ElementVo {
+interface FuncVo {
     id: number
     name: string
     parentId: number
     menuId: number
-    children: ElementVo[]
+    children: FuncVo[]
 }
 
 interface OperationVo {
     id: number
     name: string
     code: string
-    elementId: number
+    funcId: number
 }
 
 interface RoleVo {
@@ -241,7 +241,7 @@ interface RoleWithPowerGetVo {
     updateTime: string
     modules: ModuleVo[]
     menus: MenuVo[]
-    elements: ElementVo[]
+    funcs: FuncVo[]
     operations: OperationVo[]
     tree: _DataNode[]
 }
@@ -261,7 +261,7 @@ interface RoleAddEditParam {
 interface PowerSetVo {
     moduleList: ModuleVo[]
     menuList: MenuVo[]
-    elementList: ElementVo[]
+    funcList: FuncVo[]
     operationList: OperationVo[]
 }
 
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index cf34831..6c24f2f 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -411,7 +411,7 @@ const Role: React.FC = () => {
                         value.tree = powerListToPowerTree(
                             value.modules,
                             value.menus,
-                            value.elements,
+                            value.funcs,
                             value.operations
                         )
 
@@ -454,7 +454,7 @@ const Role: React.FC = () => {
                             powerListToPowerTree(
                                 powerSet.moduleList,
                                 powerSet.menuList,
-                                powerSet.elementList,
+                                powerSet.funcList,
                                 powerSet.operationList
                             )
                         )
diff --git a/src/util/auth.tsx b/src/util/auth.tsx
index 082abd0..a9e80db 100644
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -133,22 +133,22 @@ export const verifyCaptcha = (value: string) => {
 export const powerListToPowerTree = (
     modules: ModuleVo[],
     menus: MenuVo[],
-    elements: ElementVo[],
+    funcs: FuncVo[],
     operations: OperationVo[]
 ): _DataNode[] => {
     const moduleChildrenMap = new Map<string, _DataNode[]>()
     const menuChildrenMap = new Map<string, _DataNode[]>()
-    const elementChildrenMap = new Map<string, _DataNode[]>()
+    const funcChildrenMap = new Map<string, _DataNode[]>()
 
     operations.forEach((operation) => {
-        if (elementChildrenMap.get(String(operation.elementId))) {
-            elementChildrenMap.get(String(operation.elementId))?.push({
+        if (funcChildrenMap.get(String(operation.funcId))) {
+            funcChildrenMap.get(String(operation.funcId))?.push({
                 title: operation.name,
                 key: operation.id,
                 value: operation.id
             })
         } else {
-            elementChildrenMap.set(String(operation.elementId), [
+            funcChildrenMap.set(String(operation.funcId), [
                 {
                     title: operation.name,
                     key: operation.id,
@@ -158,21 +158,21 @@ export const powerListToPowerTree = (
         }
     })
 
-    const elementTrees = parentToTree(
-        elements.map((element) => ({
-            title: element.name,
-            key: element.id,
-            value: element.id,
-            parentId: element.parentId,
-            children: elementChildrenMap.get(String(element.id))
+    const funcTrees = parentToTree(
+        funcs.map((func) => ({
+            title: func.name,
+            key: func.id,
+            value: func.id,
+            parentId: func.parentId,
+            children: funcChildrenMap.get(String(func.id))
         }))
     )
 
-    elementTrees.forEach((element) => {
-        if (menuChildrenMap.get(String(floorNumber(element.key as number, 5)))) {
-            menuChildrenMap.get(String(floorNumber(element.key as number, 5)))?.push(element)
+    funcTrees.forEach((func) => {
+        if (menuChildrenMap.get(String(floorNumber(func.key as number, 5)))) {
+            menuChildrenMap.get(String(floorNumber(func.key as number, 5)))?.push(func)
         } else {
-            menuChildrenMap.set(String(floorNumber(element.key as number, 5)), [element])
+            menuChildrenMap.set(String(floorNumber(func.key as number, 5)), [func])
         }
     })
 

From 85e7f121ef73f10bce5207ca93ed8bffb1edd08b Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 1 Dec 2023 09:13:40 +0800
Subject: [PATCH 102/307] Optimize sidebar

---
 src/components/common/sidebar/SidebarFooter.tsx |  6 +++++-
 src/pages/SystemFramework.tsx                   | 13 +------------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx
index 6e1c9bb..98dfab8 100644
--- a/src/components/common/sidebar/SidebarFooter.tsx
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -49,7 +49,11 @@ const SidebarFooter: React.FC = () => {
 
     return (
         <div className={'footer'}>
-            <span className={'icon-user'} onClick={handleClickAvatar}>
+            <span
+                className={'icon-user'}
+                onClick={handleClickAvatar}
+                title={getLoginStatus() ? '个人中心' : '登录'}
+            >
                 <Icon component={IconFatwebUser} />
             </span>
             <span hidden={getLoginStatus()} className={'text'}>
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 085f6fa..4bbbacc 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -12,18 +12,7 @@ const SystemFramework: React.FC = () => {
         <>
             <FitFullScreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
-                    <Sidebar
-                        title={'系统设置'}
-                        bottomFixed={
-                            <SidebarItemList>
-                                <SidebarItem
-                                    path={'/user'}
-                                    icon={IconFatwebUser}
-                                    text={'个人中心'}
-                                />
-                            </SidebarItemList>
-                        }
-                    >
+                    <Sidebar title={'系统设置'}>
                         <SidebarItemList>
                             {getSystemRouteJson().map((value) => {
                                 return value.menu ? (

From 0bcadab98cfc5fe619c7180125f8c56dd172d136 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 1 Dec 2023 11:22:05 +0800
Subject: [PATCH 103/307] Fix hide sidebar wrong local storage key

---
 src/components/common/sidebar/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/sidebar/index.tsx b/src/components/common/sidebar/index.tsx
index cf8e542..5060455 100644
--- a/src/components/common/sidebar/index.tsx
+++ b/src/components/common/sidebar/index.tsx
@@ -13,11 +13,11 @@ interface SidebarProps extends React.PropsWithChildren {
 }
 
 const Sidebar: React.FC<SidebarProps> = (props) => {
-    const [hideSidebar, setHideSidebar] = useState(getLocalStorage('hideSidebar') === 'false')
+    const [hideSidebar, setHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true')
 
     const switchSidebar = () => {
+        setLocalStorage('HIDE_SIDEBAR', !hideSidebar ? 'true' : 'false')
         setHideSidebar(!hideSidebar)
-        setLocalStorage('hideSidebar', hideSidebar ? 'true' : 'false')
         props.onSidebarSwitch && props.onSidebarSwitch(hideSidebar)
     }
 

From 406c362f84200e2d11d30a8ac27ede84efc045a5 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 1 Dec 2023 16:20:30 +0800
Subject: [PATCH 104/307] Add permission control to element

---
 src/components/common/Permission.tsx | 16 ++++++
 src/pages/Login.tsx                  | 12 +++--
 src/pages/UserFramework.tsx          |  2 +-
 src/pages/system/Group.tsx           | 78 ++++++++++++++++-----------
 src/pages/system/Role.tsx            | 79 ++++++++++++++++------------
 src/pages/system/User.tsx            | 75 +++++++++++++++-----------
 src/services/index.tsx               |  5 +-
 src/util/auth.tsx                    | 44 ++++++++++++++++
 src/util/route.tsx                   | 23 +-------
 9 files changed, 211 insertions(+), 123 deletions(-)
 create mode 100644 src/components/common/Permission.tsx

diff --git a/src/components/common/Permission.tsx b/src/components/common/Permission.tsx
new file mode 100644
index 0000000..811051d
--- /dev/null
+++ b/src/components/common/Permission.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { hasPermission } from '@/util/auth.tsx'
+
+interface PermissionProps extends React.PropsWithChildren {
+    operationCode?: string
+}
+
+const Permission: React.FC<PermissionProps> = (props) => {
+    if (!props.operationCode || hasPermission(props.operationCode)) {
+        return props.children
+    }
+
+    return <></>
+}
+
+export default Permission
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 197eea6..a1362cb 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -28,13 +28,15 @@ const Login: React.FC = () => {
                         setToken(data?.token ?? '')
                         void messageApi.success('登录成功')
                         setTimeout(() => {
-                            if (searchParams.has('redirect')) {
-                                navigate(searchParams.get('redirect') ?? '/')
-                            } else {
-                                navigate('/')
-                            }
                             void getUserInfo().then((user) => {
                                 refreshRouter()
+
+                                if (searchParams.has('redirect')) {
+                                    navigate(searchParams.get('redirect') ?? '/')
+                                } else {
+                                    navigate('/')
+                                }
+
                                 notification.success({
                                     message: '欢迎回来',
                                     description: (
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index d4ffec5..830c463 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@/assets/css/pages/tools-framework.scss'
 import user from '@/router/user'
-import { hasPathPermission } from '@/util/route'
+import { hasPathPermission } from '@/util/auth'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index 5658fc4..2ee08ba 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -11,6 +11,7 @@ import {
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
 import { useUpdatedEffect } from '@/util/hooks'
+import { hasPermission } from '@/util/auth'
 import { utcToLocalTime } from '@/util/datetime'
 import {
     r_sys_group_add,
@@ -21,6 +22,7 @@ import {
     r_sys_group_update,
     r_sys_role_get_list
 } from '@/services/system'
+import Permission from '@/components/common/Permission'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
@@ -105,33 +107,39 @@ const Group: React.FC = () => {
             render: (value, record) => (
                 <>
                     <AntdSpace size={'middle'}>
-                        {value ? (
+                        <Permission operationCode={'system:group:modify:status'}>
+                            {value ? (
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnChangStatusBtnClick(record.id, false)}
+                                >
+                                    禁用
+                                </a>
+                            ) : (
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnChangStatusBtnClick(record.id, true)}
+                                >
+                                    启用
+                                </a>
+                            )}
+                        </Permission>
+                        <Permission operationCode={'system:group:modify:one'}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
-                                onClick={handleOnChangStatusBtnClick(record.id, false)}
+                                onClick={handleOnEditBtnClick(record)}
                             >
-                                禁用
+                                编辑
                             </a>
-                        ) : (
+                        </Permission>
+                        <Permission operationCode={'system:group:delete:one'}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
-                                onClick={handleOnChangStatusBtnClick(record.id, true)}
+                                onClick={handleOnDeleteBtnClick(record)}
                             >
-                                启用
+                                删除
                             </a>
-                        )}
-                        <a
-                            style={{ color: COLOR_PRODUCTION }}
-                            onClick={handleOnEditBtnClick(record)}
-                        >
-                            编辑
-                        </a>
-                        <a
-                            style={{ color: COLOR_PRODUCTION }}
-                            onClick={handleOnDeleteBtnClick(record)}
-                        >
-                            删除
-                        </a>
+                        </Permission>
                     </AntdSpace>
                 </>
             )
@@ -488,15 +496,17 @@ const Group: React.FC = () => {
 
     const toolbar = (
         <FlexBox direction={'horizontal'} gap={10}>
-            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
-                <AntdButton
-                    type={'primary'}
-                    style={{ padding: '4px 8px' }}
-                    onClick={handleOnAddBtnClick}
-                >
-                    <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
-                </AntdButton>
-            </Card>
+            <Permission operationCode={'system:group:add:one'}>
+                <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                    <AntdButton
+                        type={'primary'}
+                        style={{ padding: '4px 8px' }}
+                        onClick={handleOnAddBtnClick}
+                    >
+                        <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
+                    </AntdButton>
+                </Card>
+            </Permission>
             <Card
                 hidden={tableSelectedItem.length === 0}
                 style={{ overflow: 'inherit', flex: '0 0 auto' }}
@@ -551,10 +561,14 @@ const Group: React.FC = () => {
                 pagination={tableParams.pagination}
                 loading={isLoading}
                 onChange={handleOnTableChange}
-                rowSelection={{
-                    type: 'checkbox',
-                    onChange: handleOnTableSelectChange
-                }}
+                rowSelection={
+                    hasPermission('system:group:delete:multiple')
+                        ? {
+                              type: 'checkbox',
+                              onChange: handleOnTableSelectChange
+                          }
+                        : undefined
+                }
             />
         </Card>
     )
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index 6c24f2f..e276fd8 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -12,7 +12,7 @@ import {
 } from '@/constants/common.constants'
 import { useUpdatedEffect } from '@/util/hooks'
 import { utcToLocalTime } from '@/util/datetime'
-import { powerListToPowerTree } from '@/util/auth.tsx'
+import { hasPermission, powerListToPowerTree } from '@/util/auth'
 import {
     r_sys_role_add,
     r_sys_role_change_status,
@@ -22,6 +22,7 @@ import {
     r_sys_role_delete,
     r_sys_role_delete_list
 } from '@/services/system'
+import Permission from '@/components/common/Permission'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
@@ -98,33 +99,39 @@ const Role: React.FC = () => {
             render: (value, record) => (
                 <>
                     <AntdSpace size={'middle'}>
-                        {value ? (
+                        <Permission operationCode={'system:role:modify:status'}>
+                            {value ? (
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnChangStatusBtnClick(record.id, false)}
+                                >
+                                    禁用
+                                </a>
+                            ) : (
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnChangStatusBtnClick(record.id, true)}
+                                >
+                                    启用
+                                </a>
+                            )}
+                        </Permission>
+                        <Permission operationCode={'system:role:modify:one'}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
-                                onClick={handleOnChangStatusBtnClick(record.id, false)}
+                                onClick={handleOnEditBtnClick(record)}
                             >
-                                禁用
+                                编辑
                             </a>
-                        ) : (
+                        </Permission>
+                        <Permission operationCode={'system:role:delete:one'}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
-                                onClick={handleOnChangStatusBtnClick(record.id, true)}
+                                onClick={handleOnDeleteBtnClick(record)}
                             >
-                                启用
+                                删除
                             </a>
-                        )}
-                        <a
-                            style={{ color: COLOR_PRODUCTION }}
-                            onClick={handleOnEditBtnClick(record)}
-                        >
-                            编辑
-                        </a>
-                        <a
-                            style={{ color: COLOR_PRODUCTION }}
-                            onClick={handleOnDeleteBtnClick(record)}
-                        >
-                            删除
-                        </a>
+                        </Permission>
                     </AntdSpace>
                 </>
             )
@@ -498,15 +505,17 @@ const Role: React.FC = () => {
 
     const toolbar = (
         <FlexBox direction={'horizontal'} gap={10}>
-            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
-                <AntdButton
-                    type={'primary'}
-                    style={{ padding: '4px 8px' }}
-                    onClick={handleOnAddBtnClick}
-                >
-                    <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
-                </AntdButton>
-            </Card>
+            <Permission operationCode={'system:role:add:one'}>
+                <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                    <AntdButton
+                        type={'primary'}
+                        style={{ padding: '4px 8px' }}
+                        onClick={handleOnAddBtnClick}
+                    >
+                        <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
+                    </AntdButton>
+                </Card>
+            </Permission>
             <Card
                 hidden={tableSelectedItem.length === 0}
                 style={{ overflow: 'inherit', flex: '0 0 auto' }}
@@ -561,10 +570,14 @@ const Role: React.FC = () => {
                 pagination={tableParams.pagination}
                 loading={isLoading}
                 onChange={handleOnTableChange}
-                rowSelection={{
-                    type: 'checkbox',
-                    onChange: handleOnTableSelectChange
-                }}
+                rowSelection={
+                    hasPermission('system:role:delete:multiple')
+                        ? {
+                              type: 'checkbox',
+                              onChange: handleOnTableSelectChange
+                          }
+                        : undefined
+                }
             />
         </Card>
     )
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 42afc11..b027382 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -12,6 +12,7 @@ import {
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
 import { useUpdatedEffect } from '@/util/hooks'
+import { hasPermission } from '@/util/auth'
 import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc, getNowUtc } from '@/util/datetime'
 import {
     r_sys_group_get_list,
@@ -23,6 +24,7 @@ import {
     r_sys_user_get,
     r_sys_user_update
 } from '@/services/system'
+import Permission from '@/components/common/Permission'
 import { r_api_avatar_random_base64 } from '@/services/api/avatar'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
@@ -188,26 +190,32 @@ const User: React.FC = () => {
             render: (_, record) => (
                 <>
                     <AntdSpace size={'middle'}>
-                        <a
-                            style={{ color: COLOR_PRODUCTION }}
-                            onClick={handleOnChangePasswordBtnClick(record)}
-                        >
-                            修改密码
-                        </a>
-                        <a
-                            style={{ color: COLOR_PRODUCTION }}
-                            onClick={handleOnEditBtnClick(record)}
-                        >
-                            编辑
-                        </a>
-                        {record.id !== '0' ? (
+                        <Permission operationCode={'system:user:modify:password'}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
-                                onClick={handleOnDeleteBtnClick(record)}
+                                onClick={handleOnChangePasswordBtnClick(record)}
                             >
-                                删除
+                                修改密码
                             </a>
-                        ) : undefined}
+                        </Permission>
+                        <Permission operationCode={'system:user:modify:one'}>
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnEditBtnClick(record)}
+                            >
+                                编辑
+                            </a>
+                        </Permission>
+                        <Permission operationCode={'system:user:delete:one'}>
+                            {record.id !== '0' ? (
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnDeleteBtnClick(record)}
+                                >
+                                    删除
+                                </a>
+                            ) : undefined}
+                        </Permission>
                     </AntdSpace>
                 </>
             )
@@ -393,6 +401,7 @@ const User: React.FC = () => {
                                     }).then((res) => {
                                         const response = res.data
                                         if (response.success) {
+                                            void message.success('修改密码成功')
                                             resolve(true)
                                         } else {
                                             reject(response.msg)
@@ -884,15 +893,17 @@ const User: React.FC = () => {
 
     const toolbar = (
         <FlexBox direction={'horizontal'} gap={10}>
-            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
-                <AntdButton
-                    type={'primary'}
-                    style={{ padding: '4px 8px' }}
-                    onClick={handleOnAddBtnClick}
-                >
-                    <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
-                </AntdButton>
-            </Card>
+            <Permission operationCode={'system:user:add:one'}>
+                <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                    <AntdButton
+                        type={'primary'}
+                        style={{ padding: '4px 8px' }}
+                        onClick={handleOnAddBtnClick}
+                    >
+                        <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
+                    </AntdButton>
+                </Card>
+            </Permission>
             <Card
                 hidden={tableSelectedItem.length === 0}
                 style={{ overflow: 'inherit', flex: '0 0 auto' }}
@@ -951,11 +962,15 @@ const User: React.FC = () => {
                 pagination={tableParams.pagination}
                 loading={isLoadingUserData}
                 onChange={handleOnTableChange}
-                rowSelection={{
-                    type: 'checkbox',
-                    onChange: handleOnTableSelectChange,
-                    getCheckboxProps: (record) => ({ disabled: record.id === '0' })
-                }}
+                rowSelection={
+                    hasPermission('system:user:delete:multiple')
+                        ? {
+                              type: 'checkbox',
+                              onChange: handleOnTableSelectChange,
+                              getCheckboxProps: (record) => ({ disabled: record.id === '0' })
+                          }
+                        : undefined
+                }
             />
         </Card>
     )
diff --git a/src/services/index.tsx b/src/services/index.tsx
index 1b890c9..7a1b612 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -7,6 +7,7 @@ import {
     PERMISSION_TOKEN_RENEW_SUCCESS,
     PERMISSION_UNAUTHORIZED
 } from '@/constants/common.constants'
+import { getRedirectUrl } from '@/util/route'
 import { getToken, setToken, removeToken } from '@/util/auth'
 
 const service: AxiosInstance = axios.create({
@@ -84,7 +85,9 @@ service.interceptors.response.use(
                     </>
                 )
                 setTimeout(() => {
-                    location.reload()
+                    location.replace(
+                        getRedirectUrl('/login', `${location.pathname}${location.search}`)
+                    )
                 }, 1500)
                 throw response?.data
             case PERMISSION_ACCESS_DENIED:
diff --git a/src/util/auth.tsx b/src/util/auth.tsx
index a9e80db..9b1f958 100644
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -121,6 +121,12 @@ export const getUsername = async () => {
     return user.username
 }
 
+export const getUserId = async () => {
+    const user = await getUserInfo()
+
+    return user.id
+}
+
 export const getCaptchaSrc = () => {
     captcha = getCaptcha(300, 150, 4)
     return captcha.base64Src
@@ -227,3 +233,41 @@ const parentToTree = (data: _DataNode[]): _DataNode[] => {
 
     return parents
 }
+
+export const getPermissionPath = (): string[] => {
+    const s = getLocalStorage(STORAGE_USER_INFO_KEY)
+    if (s === null) {
+        return []
+    }
+
+    const user = JSON.parse(s) as UserWithPowerInfoVo
+    const paths: string[] = []
+    user.menus.forEach((menu) => {
+        paths.push(menu.url)
+    })
+
+    return paths
+}
+
+export const hasPathPermission = (path: string) => {
+    return getPermissionPath().indexOf(path) !== -1
+}
+
+export const getPermission = (): string[] => {
+    const s = getLocalStorage(STORAGE_USER_INFO_KEY)
+    if (s === null) {
+        return []
+    }
+
+    const user = JSON.parse(s) as UserWithPowerInfoVo
+    const operationCodes: string[] = []
+    user.operations.forEach((operation) => {
+        operationCodes.push(operation.code)
+    })
+
+    return operationCodes
+}
+
+export const hasPermission = (operationCode: string) => {
+    return getPermission().indexOf(operationCode) !== -1
+}
diff --git a/src/util/route.tsx b/src/util/route.tsx
index 3065c09..688b0e7 100644
--- a/src/util/route.tsx
+++ b/src/util/route.tsx
@@ -1,5 +1,5 @@
-import { getLocalStorage } from '@/util/browser.tsx'
-import { STORAGE_USER_INFO_KEY } from '@/constants/common.constants.ts'
+import { RouteObject } from 'react-router'
+import { hasPathPermission } from '@/util/auth'
 
 export const getRedirectUrl = (path: string, redirectUrl: string): string => {
     return `${path}?redirect=${encodeURIComponent(redirectUrl)}`
@@ -15,25 +15,6 @@ export const getFullTitle = (data: _DataNode, preTitle?: string) => {
     return data
 }
 
-export const getPermissionPath = (): string[] => {
-    const s = getLocalStorage(STORAGE_USER_INFO_KEY)
-    if (s === null) {
-        return []
-    }
-
-    const user = JSON.parse(s) as UserWithPowerInfoVo
-    const paths: string[] = []
-    user.menus.forEach((menu) => {
-        paths.push(menu.url)
-    })
-
-    return paths
-}
-
-export const hasPathPermission = (path: string) => {
-    return getPermissionPath().indexOf(path) !== -1
-}
-
 export const getAuthRoute = (
     route: RouteJsonObject[],
     parentPermission: boolean = false

From 6ff5e11f9d81e90b2c1ccec585696e6f33ce63e1 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 4 Dec 2023 14:09:32 +0800
Subject: [PATCH 105/307] Optimize router

---
 src/util/route.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/util/route.tsx b/src/util/route.tsx
index 688b0e7..7812af8 100644
--- a/src/util/route.tsx
+++ b/src/util/route.tsx
@@ -22,7 +22,9 @@ export const getAuthRoute = (
     return route
         .filter(
             (value) =>
-                !(value.permission || parentPermission) || hasPathPermission(value.absolutePath)
+                value.path === '*' ||
+                !(value.permission || parentPermission) ||
+                hasPathPermission(value.absolutePath)
         )
         .map((value) => {
             if (value.children) {

From d3bdbd0199a6bbebf7b70e42beb1d1d2859d02ab Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 4 Dec 2023 17:12:22 +0800
Subject: [PATCH 106/307] Add mail settings management to system settings page

---
 src/assets/css/pages/system/settings.scss |  38 +++++++
 src/assets/svg/back.svg                   |   1 +
 src/assets/svg/email.svg                  |   1 +
 src/assets/svg/save.svg                   |   1 +
 src/constants/urls.constants.ts           |   5 +-
 src/global.d.ts                           |  20 ++++
 src/pages/system/Settings.tsx             | 123 ++++++++++++++++++++++
 src/router/system.tsx                     |  10 ++
 src/services/system.tsx                   |   9 +-
 9 files changed, 206 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/css/pages/system/settings.scss
 create mode 100644 src/assets/svg/back.svg
 create mode 100644 src/assets/svg/email.svg
 create mode 100644 src/assets/svg/save.svg
 create mode 100644 src/pages/system/Settings.tsx

diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.scss
new file mode 100644
index 0000000..0b999c9
--- /dev/null
+++ b/src/assets/css/pages/system/settings.scss
@@ -0,0 +1,38 @@
+@use '@/assets/css/constants' as constants;
+
+.root-content {
+  padding: 30px;
+  gap: 10px;
+
+  .settings-card {
+    padding: 20px;
+    gap: 20px;
+
+    > .head {
+      align-items: center;
+      gap: 5px;
+
+      .icon {
+        font-size: constants.$SIZE_ICON_MD;
+        flex: 0 0 auto;
+      }
+
+      .title {
+        display: flex;
+        font-size: 1.2em;
+      }
+
+      .bt {
+        flex: 0 0 auto;
+      }
+
+      .bt-reset {
+        color: constants.$font-main-color;
+      }
+
+      .bt-save {
+        color: constants.$main-color;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/svg/back.svg b/src/assets/svg/back.svg
new file mode 100644
index 0000000..ca98267
--- /dev/null
+++ b/src/assets/svg/back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M471.893333 149.333333a42.666667 42.666667 0 0 0-73.258666-29.781333l-343.893334 352.981333a42.666667 42.666667 0 0 0-0.768 58.709334l343.893334 372.352a42.666667 42.666667 0 0 0 73.984-28.928v-190.677334c56.917333-5.248 116.821333-1.365333 179.882666 11.989334 65.834667 13.994667 150.528 76.032 253.909334 202.24a42.666667 42.666667 0 0 0 75.477333-31.36c-15.445333-152.32-73.984-281.301333-176.170667-384.853334-92.757333-93.994667-204.373333-146.432-333.098666-156.586666V149.333333z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/email.svg b/src/assets/svg/email.svg
new file mode 100644
index 0000000..d87d895
--- /dev/null
+++ b/src/assets/svg/email.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M926.47619 355.644952V780.190476a73.142857 73.142857 0 0 1-73.142857 73.142857H170.666667a73.142857 73.142857 0 0 1-73.142857-73.142857V355.644952l304.103619 257.828572a170.666667 170.666667 0 0 0 220.745142 0L926.47619 355.644952zM853.333333 170.666667a74.044952 74.044952 0 0 1 26.087619 4.778666 72.704 72.704 0 0 1 30.622477 22.186667 73.508571 73.508571 0 0 1 10.678857 17.67619c3.169524 7.509333 5.12 15.652571 5.607619 24.210286L926.47619 243.809524v24.380952L559.469714 581.241905a73.142857 73.142857 0 0 1-91.306666 2.901333l-3.632762-2.925714L97.52381 268.190476v-24.380952a72.899048 72.899048 0 0 1 40.155428-65.292191A72.97219 72.97219 0 0 1 170.666667 170.666667h682.666666z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/save.svg b/src/assets/svg/save.svg
new file mode 100644
index 0000000..c4692fa
--- /dev/null
+++ b/src/assets/svg/save.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path d="M931.882 259.882l-167.764-167.764A96 96 0 0 0 696.236 64H160C106.98 64 64 106.98 64 160v704c0 53.02 42.98 96 96 96h704c53.02 0 96-42.98 96-96V327.764a96 96 0 0 0-28.118-67.882zM512 832c-70.692 0-128-57.308-128-128 0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128z m192-609.04V424c0 13.254-10.746 24-24 24H216c-13.254 0-24-10.746-24-24V216c0-13.254 10.746-24 24-24h457.04c6.366 0 12.47 2.528 16.97 7.03l6.96 6.96A23.992 23.992 0 0 1 704 222.96z" /></svg>
\ No newline at end of file
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 181effc..a6c8539 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -9,5 +9,8 @@ export const URL_SYS_POWER_LIST = '/system/power/list'
 export const URL_SYS_ROLE_LIST = '/system/role/list'
 export const URL_SYS_GROUP = '/system/group'
 export const URL_SYS_GROUP_LIST = '/system/group/list'
+export const URL_SYS_SETTINGS = '/system/settings'
+export const URL_SYS_SETTINGS_MAIL = `${URL_SYS_SETTINGS}/mail`
 
-export const URL_API_V1_AVATAR_RANDOM_BASE64 = '/api/v1/avatar/base64'
+export const URL_API_V1 = '/api/v1'
+export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/global.d.ts b/src/global.d.ts
index 76bf786..7b4085a 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -294,3 +294,23 @@ interface GroupChangeStatusParam {
 interface AvatarBase64Vo {
     base64: string
 }
+
+interface SystemSettingVo {
+    mail: MailSettingsVo
+}
+
+interface MailSettingsVo {
+    host?: string
+    port?: number
+    username?: string
+    password?: string
+    from?: string
+}
+
+interface MailSettingsParam {
+    host?: string
+    port?: number
+    username?: string
+    password?: string
+    from?: string
+}
diff --git a/src/pages/system/Settings.tsx b/src/pages/system/Settings.tsx
new file mode 100644
index 0000000..61a79cd
--- /dev/null
+++ b/src/pages/system/Settings.tsx
@@ -0,0 +1,123 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import '@/assets/css/pages/system/settings.scss'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import { useUpdatedEffect } from '@/util/hooks.tsx'
+import { r_sys_settings_get, r_sys_settings_mail_update } from '@/services/system.tsx'
+
+interface SettingsCardProps extends React.PropsWithChildren {
+    icon: IconComponent
+    title: string
+    onReset?: () => void
+    onSave?: () => void
+}
+const SettingsCard: React.FC<SettingsCardProps> = (props) => {
+    return (
+        <Card>
+            <FlexBox className={'settings-card'}>
+                <FlexBox direction={'horizontal'} className={'head'}>
+                    <Icon component={props.icon} className={'icon'} />
+                    <div className={'title'}>{props.title}</div>
+                    <AntdButton className={'bt bt-reset'} onClick={props.onReset}>
+                        <Icon component={IconFatwebBack} />
+                    </AntdButton>
+                    <AntdButton className={'bt bt-save'} onClick={props.onSave}>
+                        <Icon component={IconFatwebSave} />
+                    </AntdButton>
+                </FlexBox>
+                {props.children}
+            </FlexBox>
+        </Card>
+    )
+}
+
+const MailSettings: React.FC<{ mail?: MailSettingsVo; onSave?: () => void }> = (props) => {
+    const [mailForm] = AntdForm.useForm<MailSettingsParam>()
+    const mailFormValues = AntdForm.useWatch([], mailForm)
+
+    const handleOnReset = () => {
+        props.mail && mailForm.setFieldsValue(props.mail)
+    }
+
+    const handleOnSave = () => {
+        void r_sys_settings_mail_update(mailFormValues).then((res) => {
+            const response = res.data
+            if (response.success) {
+                void message.success('保存设置成功')
+                props.onSave && props.onSave()
+            } else {
+                void message.error('保存设置失败，请稍后重试')
+            }
+        })
+    }
+
+    useUpdatedEffect(() => {
+        props.mail && mailForm.setFieldsValue(props.mail)
+    }, [props.mail])
+
+    return (
+        <SettingsCard
+            icon={IconFatwebEmail}
+            title={'邮件'}
+            onReset={handleOnReset}
+            onSave={handleOnSave}
+        >
+            <AntdForm form={mailForm} labelCol={{ flex: '8em' }}>
+                <AntdForm.Item label={'SMTP 服务器'} name={'host'}>
+                    <AntdInput />
+                </AntdForm.Item>
+                <AntdForm.Item label={'端口'} name={'port'}>
+                    <AntdInputNumber min={0} max={65535} style={{ width: '100%' }} />
+                </AntdForm.Item>
+                <AntdForm.Item label={'用户名'} name={'username'}>
+                    <AntdInput />
+                </AntdForm.Item>
+                <AntdForm.Item label={'密码'} name={'password'}>
+                    <AntdInput.Password />
+                </AntdForm.Item>
+                <AntdForm.Item label={'发送者'} name={'from'}>
+                    <AntdInput />
+                </AntdForm.Item>
+            </AntdForm>
+        </SettingsCard>
+    )
+}
+
+const Settings: React.FC = () => {
+    const [systemSetting, setSystemSetting] = useState<SystemSettingVo>()
+
+    const getSystemSetting = () => {
+        void r_sys_settings_get().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                data && setSystemSetting(data)
+            }
+        })
+    }
+
+    const handleOnSave = () => {
+        getSystemSetting()
+    }
+
+    useUpdatedEffect(() => {
+        getSystemSetting()
+    }, [])
+
+    return (
+        <>
+            <FitFullScreen>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
+                    <FlexBox className={'root-content'}>
+                        <MailSettings mail={systemSetting?.mail} onSave={handleOnSave} />
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullScreen>
+        </>
+    )
+}
+
+export default Settings
diff --git a/src/router/system.tsx b/src/router/system.tsx
index caf5d4c..b965fb8 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -11,6 +11,16 @@ const system: RouteJsonObject[] = [
         icon: React.lazy(() => import('~icons/fatweb/setting.jsx')),
         menu: true
     },
+    {
+        path: 'settings',
+        absolutePath: '/system/settings',
+        id: 'system-settings',
+        component: React.lazy(() => import('@/pages/system/Settings')),
+        name: '系统设置',
+        icon: React.lazy(() => import('~icons/fatweb/setting.jsx')),
+        menu: true,
+        autoHide: true
+    },
     {
         path: 'user',
         absolutePath: '/system/user',
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 6dfd943..f23c38d 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -7,7 +7,9 @@ import {
     URL_SYS_ROLE_LIST,
     URL_SYS_GROUP,
     URL_SYS_GROUP_LIST,
-    URL_SYS_LOG
+    URL_SYS_LOG,
+    URL_SYS_SETTINGS,
+    URL_SYS_SETTINGS_MAIL
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -63,3 +65,8 @@ export const r_sys_group_delete_list = (ids: React.Key[]) => request.delete(URL_
 
 export const r_sys_log_get = (param: SysLogGetParam) =>
     request.get<PageVo<SysLogGetVo>>(URL_SYS_LOG, param)
+
+export const r_sys_settings_get = () => request.get<SystemSettingVo>(URL_SYS_SETTINGS)
+
+export const r_sys_settings_mail_update = (param: MailSettingsParam) =>
+    request.put(URL_SYS_SETTINGS_MAIL, param)

From f19e08bdcd5a8c013fe18247a7b99d7cd86f5aa0 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 5 Dec 2023 18:14:05 +0800
Subject: [PATCH 107/307] Rename LoadingMask to FullscreenLoadingMask

---
 src/App.tsx                                            |  4 ++--
 .../css/components/common/fullscreen-loading-mask.scss | 10 ++++++++++
 .../{LoadingMask.tsx => FullscreenLoadingMask.tsx}     |  8 ++++----
 src/pages/HomeFramework.tsx                            |  4 ++--
 src/pages/SystemFramework.tsx                          |  4 ++--
 src/pages/ToolsFramework.tsx                           |  4 ++--
 src/pages/UserFramework.tsx                            |  4 ++--
 src/router/index.tsx                                   |  2 +-
 src/util/common.tsx                                    |  4 ++--
 9 files changed, 27 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/css/components/common/fullscreen-loading-mask.scss
 rename src/components/common/{LoadingMask.tsx => FullscreenLoadingMask.tsx} (73%)

diff --git a/src/App.tsx b/src/App.tsx
index dd4f9cf..82ce06b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { getRouter } from '@/router'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 export const AppContext = createContext<{ refreshRouter: () => void }>({
     refreshRouter: () => undefined
@@ -18,7 +18,7 @@ const App: React.FC = () => {
                     }
                 }}
             >
-                <Suspense fallback={<LoadingMask />}>
+                <Suspense fallback={<FullscreenLoadingMask />}>
                     <RouterProvider router={routerState} />
                 </Suspense>
             </AppContext.Provider>
diff --git a/src/assets/css/components/common/fullscreen-loading-mask.scss b/src/assets/css/components/common/fullscreen-loading-mask.scss
new file mode 100644
index 0000000..c4458cd
--- /dev/null
+++ b/src/assets/css/components/common/fullscreen-loading-mask.scss
@@ -0,0 +1,10 @@
+.fullscreen-loading-mask {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(200, 200, 200, 0.2);
+}
\ No newline at end of file
diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/FullscreenLoadingMask.tsx
similarity index 73%
rename from src/components/common/LoadingMask.tsx
rename to src/components/common/FullscreenLoadingMask.tsx
index bbb231d..4bddf5d 100644
--- a/src/components/common/LoadingMask.tsx
+++ b/src/components/common/FullscreenLoadingMask.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
-import '@/assets/css/components/common/loading-mask.scss'
+import '@/assets/css/components/common/fullscreen-loading-mask.scss'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import FitFullScreen from '@/components/common/FitFullScreen'
 
-const LoadingMask: React.FC = () => {
+const FullscreenLoadingMask: React.FC = () => {
     const loadingIcon = (
         <>
             <Icon
@@ -17,7 +17,7 @@ const LoadingMask: React.FC = () => {
     return (
         <>
             <FitFullScreen>
-                <div className={'loading-mask'}>
+                <div className={'fullscreen-loading-mask'}>
                     <AntdSpin indicator={loadingIcon} />
                 </div>
             </FitFullScreen>
@@ -25,4 +25,4 @@ const LoadingMask: React.FC = () => {
     )
 }
 
-export default LoadingMask
+export default FullscreenLoadingMask
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index 327f1f3..605a2cd 100644
--- a/src/pages/HomeFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -3,7 +3,7 @@ import Icon from '@ant-design/icons'
 import '@/assets/css/pages/home-framework.scss'
 import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
 import { getRouter } from '@/router'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 
 export const HomeFrameworkContext = createContext<{
@@ -206,7 +206,7 @@ const HomeFramework: React.FC = () => {
                         <Suspense
                             fallback={
                                 <>
-                                    <LoadingMask />
+                                    <FullscreenLoadingMask />
                                 </>
                             }
                         >
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 4bbbacc..3563013 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -5,7 +5,7 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const SystemFramework: React.FC = () => {
     return (
@@ -32,7 +32,7 @@ const SystemFramework: React.FC = () => {
                     <Suspense
                         fallback={
                             <>
-                                <LoadingMask />
+                                <FullscreenLoadingMask />
                             </>
                         }
                     >
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 1385994..f1a970b 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -7,7 +7,7 @@ import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
 import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const ToolsFramework: React.FC = () => {
     const sidebarScrollRef = useRef<SidebarScrollElement>(null)
@@ -67,7 +67,7 @@ const ToolsFramework: React.FC = () => {
                     <Suspense
                         fallback={
                             <>
-                                <LoadingMask />
+                                <FullscreenLoadingMask />
                             </>
                         }
                     >
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 830c463..6782f72 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -6,7 +6,7 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const ToolsFramework: React.FC = () => {
     return (
@@ -46,7 +46,7 @@ const ToolsFramework: React.FC = () => {
                     <Suspense
                         fallback={
                             <>
-                                <LoadingMask />
+                                <FullscreenLoadingMask />
                             </>
                         }
                     >
diff --git a/src/router/index.tsx b/src/router/index.tsx
index d496494..0a7ae4d 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -22,7 +22,7 @@ const root: RouteJsonObject[] = [
                 path: 'loading',
                 absolutePath: '/loading',
                 id: 'loading',
-                component: React.lazy(() => import('@/components/common/LoadingMask'))
+                component: React.lazy(() => import('@/components/common/FullscreenLoadingMask'))
             },
             {
                 path: 'tools',
diff --git a/src/util/common.tsx b/src/util/common.tsx
index 88bf514..099ff6a 100644
--- a/src/util/common.tsx
+++ b/src/util/common.tsx
@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client'
-import LoadingMask from '@/components/common/LoadingMask'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 export const randomInt = (start: number, end: number) => {
     if (start > end) {
@@ -46,7 +46,7 @@ export const showLoadingMask = (id: string) => {
         'position: fixed; width: 100vw; height: 100vh; z-index: 10000; left: 0; top: 0;'
     )
 
-    return ReactDOM.createRoot(container).render(<LoadingMask />)
+    return ReactDOM.createRoot(container).render(<FullscreenLoadingMask />)
 }
 
 export const removeLoadingMask = (id: string) => {

From 00887e2e2e20297526947717f21dbcda4c2464d3 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 5 Dec 2023 18:17:14 +0800
Subject: [PATCH 108/307] Finish mail settings management

---
 .../css/components/common/loading-mask.scss   |   2 -
 src/assets/css/pages/system/settings.scss     |   5 +-
 src/assets/svg/test.svg                       |   1 +
 src/components/common/LoadingMask.tsx         |  30 +++
 src/global.d.ts                               |  10 +-
 src/pages/system/Settings.tsx                 | 188 +++++++++++++-----
 src/services/system.tsx                       |   6 +-
 7 files changed, 178 insertions(+), 64 deletions(-)
 create mode 100644 src/assets/svg/test.svg
 create mode 100644 src/components/common/LoadingMask.tsx

diff --git a/src/assets/css/components/common/loading-mask.scss b/src/assets/css/components/common/loading-mask.scss
index ad20dde..9b44a1a 100644
--- a/src/assets/css/components/common/loading-mask.scss
+++ b/src/assets/css/components/common/loading-mask.scss
@@ -1,10 +1,8 @@
 .loading-mask {
-  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   z-index: 100;
-  background-color: rgba(200, 200, 200, 0.2);
 }
\ No newline at end of file
diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.scss
index 0b999c9..f6b284b 100644
--- a/src/assets/css/pages/system/settings.scss
+++ b/src/assets/css/pages/system/settings.scss
@@ -22,11 +22,8 @@
         font-size: 1.2em;
       }
 
-      .bt {
+      :nth-child(n+3) {
         flex: 0 0 auto;
-      }
-
-      .bt-reset {
         color: constants.$font-main-color;
       }
 
diff --git a/src/assets/svg/test.svg b/src/assets/svg/test.svg
new file mode 100644
index 0000000..dcc7fc9
--- /dev/null
+++ b/src/assets/svg/test.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M725.333333 85.333333v85.333334h-42.666666v597.333333c0 94.293333-76.373333 170.666667-170.666667 170.666667s-170.666667-76.373333-170.666667-170.666667V170.666667H298.666667V85.333333h426.666666z m-170.666666 554.666667a42.666667 42.666667 0 1 0 0 85.333333 42.666667 42.666667 0 0 0 0-85.333333z m-85.333334-128a42.666667 42.666667 0 1 0 0 85.333333 42.666667 42.666667 0 0 0 0-85.333333z m128-341.333333h-170.666666v170.666666h170.666666V170.666667z" /></svg>
\ No newline at end of file
diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx
new file mode 100644
index 0000000..8f5cf1c
--- /dev/null
+++ b/src/components/common/LoadingMask.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/common/loading-mask.scss'
+import { COLOR_FONT_MAIN } from '@/constants/common.constants'
+
+interface LoadingMaskProps extends React.PropsWithChildren {
+    hidden?: boolean
+}
+const LoadingMask: React.FC<LoadingMaskProps> = (props) => {
+    const loadingIcon = (
+        <>
+            <Icon
+                component={IconFatwebLoading}
+                style={{ fontSize: 24, color: COLOR_FONT_MAIN }}
+                spin
+            />
+        </>
+    )
+    return props.hidden ? (
+        props.children
+    ) : (
+        <>
+            <div className={'loading-mask'}>
+                <AntdSpin indicator={loadingIcon} />
+            </div>
+        </>
+    )
+}
+
+export default LoadingMask
diff --git a/src/global.d.ts b/src/global.d.ts
index 7b4085a..37e5024 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -295,22 +295,30 @@ interface AvatarBase64Vo {
     base64: string
 }
 
-interface SystemSettingVo {
+interface SystemSettingsVo {
     mail: MailSettingsVo
 }
 
 interface MailSettingsVo {
     host?: string
     port?: number
+    securityType?: string
     username?: string
     password?: string
     from?: string
+    fromName?: string
 }
 
 interface MailSettingsParam {
     host?: string
     port?: number
+    securityType?: string
     username?: string
     password?: string
     from?: string
+    fromName?: string
+}
+
+interface MailSendParam {
+    to: string
 }
diff --git a/src/pages/system/Settings.tsx b/src/pages/system/Settings.tsx
index 61a79cd..bd829ce 100644
--- a/src/pages/system/Settings.tsx
+++ b/src/pages/system/Settings.tsx
@@ -1,16 +1,23 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/settings.scss'
+import { useUpdatedEffect } from '@/util/hooks'
+import {
+    r_sys_settings_mail_get,
+    r_sys_settings_mail_send,
+    r_sys_settings_mail_update
+} from '@/services/system'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
-import { useUpdatedEffect } from '@/util/hooks.tsx'
-import { r_sys_settings_get, r_sys_settings_mail_update } from '@/services/system.tsx'
+import LoadingMask from '@/components/common/LoadingMask'
 
 interface SettingsCardProps extends React.PropsWithChildren {
     icon: IconComponent
     title: string
+    loading?: boolean
+    expand?: React.ReactNode
     onReset?: () => void
     onSave?: () => void
 }
@@ -21,25 +28,81 @@ const SettingsCard: React.FC<SettingsCardProps> = (props) => {
                 <FlexBox direction={'horizontal'} className={'head'}>
                     <Icon component={props.icon} className={'icon'} />
                     <div className={'title'}>{props.title}</div>
-                    <AntdButton className={'bt bt-reset'} onClick={props.onReset}>
-                        <Icon component={IconFatwebBack} />
-                    </AntdButton>
-                    <AntdButton className={'bt bt-save'} onClick={props.onSave}>
-                        <Icon component={IconFatwebSave} />
-                    </AntdButton>
+                    {!props.loading ? (
+                        <>
+                            {props.expand}
+                            <AntdButton onClick={props.onReset} title={'重置'}>
+                                <Icon component={IconFatwebBack} />
+                            </AntdButton>
+                            <AntdButton className={'bt-save'} onClick={props.onSave} title={'保存'}>
+                                <Icon component={IconFatwebSave} />
+                            </AntdButton>
+                        </>
+                    ) : undefined}
                 </FlexBox>
-                {props.children}
+                <LoadingMask hidden={!props.loading}>{props.children}</LoadingMask>
             </FlexBox>
         </Card>
     )
 }
 
-const MailSettings: React.FC<{ mail?: MailSettingsVo; onSave?: () => void }> = (props) => {
+const MailSettings: React.FC = () => {
+    const [modal, contextHolder] = AntdModal.useModal()
     const [mailForm] = AntdForm.useForm<MailSettingsParam>()
     const mailFormValues = AntdForm.useWatch([], mailForm)
+    const [loading, setLoading] = useState(false)
+    const [mailSendForm] = AntdForm.useForm<MailSendParam>()
+
+    const handleOnTest = () => {
+        void modal.confirm({
+            title: '发送测试邮件',
+            content: (
+                <>
+                    <AntdForm form={mailSendForm}>
+                        <AntdForm.Item
+                            name={'to'}
+                            label={'接收人'}
+                            style={{ marginTop: 10 }}
+                            rules={[{ required: true, type: 'email' }]}
+                        >
+                            <AntdInput />
+                        </AntdForm.Item>
+                    </AntdForm>
+                    <AntdTag style={{ whiteSpace: 'normal' }}>
+                        将使用服务器已保存的邮件设置进行发送邮件，请保证编辑的内容已保存
+                    </AntdTag>
+                </>
+            ),
+            onOk: () =>
+                mailSendForm.validateFields().then(
+                    () => {
+                        return new Promise((resolve) => {
+                            void r_sys_settings_mail_send({
+                                to: mailSendForm.getFieldValue('to') as string
+                            }).then((res) => {
+                                const response = res.data
+
+                                if (response.success) {
+                                    void message.success('发送成功')
+                                    resolve(true)
+                                } else {
+                                    void message.error('发送失败，请检查配置后重试')
+                                    resolve(true)
+                                }
+                            })
+                        })
+                    },
+                    () => {
+                        return new Promise((_, reject) => {
+                            reject('未输入接收者')
+                        })
+                    }
+                )
+        })
+    }
 
     const handleOnReset = () => {
-        props.mail && mailForm.setFieldsValue(props.mail)
+        getMailSettings()
     }
 
     const handleOnSave = () => {
@@ -47,72 +110,87 @@ const MailSettings: React.FC<{ mail?: MailSettingsVo; onSave?: () => void }> = (
             const response = res.data
             if (response.success) {
                 void message.success('保存设置成功')
-                props.onSave && props.onSave()
+                getMailSettings()
             } else {
                 void message.error('保存设置失败，请稍后重试')
             }
         })
     }
 
-    useUpdatedEffect(() => {
-        props.mail && mailForm.setFieldsValue(props.mail)
-    }, [props.mail])
+    const getMailSettings = () => {
+        if (loading) {
+            return
+        }
 
-    return (
-        <SettingsCard
-            icon={IconFatwebEmail}
-            title={'邮件'}
-            onReset={handleOnReset}
-            onSave={handleOnSave}
-        >
-            <AntdForm form={mailForm} labelCol={{ flex: '8em' }}>
-                <AntdForm.Item label={'SMTP 服务器'} name={'host'}>
-                    <AntdInput />
-                </AntdForm.Item>
-                <AntdForm.Item label={'端口'} name={'port'}>
-                    <AntdInputNumber min={0} max={65535} style={{ width: '100%' }} />
-                </AntdForm.Item>
-                <AntdForm.Item label={'用户名'} name={'username'}>
-                    <AntdInput />
-                </AntdForm.Item>
-                <AntdForm.Item label={'密码'} name={'password'}>
-                    <AntdInput.Password />
-                </AntdForm.Item>
-                <AntdForm.Item label={'发送者'} name={'from'}>
-                    <AntdInput />
-                </AntdForm.Item>
-            </AntdForm>
-        </SettingsCard>
-    )
-}
-
-const Settings: React.FC = () => {
-    const [systemSetting, setSystemSetting] = useState<SystemSettingVo>()
-
-    const getSystemSetting = () => {
-        void r_sys_settings_get().then((res) => {
+        setLoading(true)
+        void r_sys_settings_mail_get().then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
-                data && setSystemSetting(data)
+                data && mailForm.setFieldsValue(data)
+                setLoading(false)
             }
         })
     }
 
-    const handleOnSave = () => {
-        getSystemSetting()
-    }
-
     useUpdatedEffect(() => {
-        getSystemSetting()
+        getMailSettings()
     }, [])
 
+    return (
+        <>
+            <SettingsCard
+                icon={IconFatwebEmail}
+                title={'邮件'}
+                loading={loading}
+                onReset={handleOnReset}
+                onSave={handleOnSave}
+                expand={
+                    <AntdButton onClick={handleOnTest} title={'测试'}>
+                        <Icon component={IconFatwebTest} />
+                    </AntdButton>
+                }
+            >
+                <AntdForm form={mailForm} labelCol={{ flex: '8em' }}>
+                    <AntdForm.Item label={'SMTP 服务器'} name={'host'}>
+                        <AntdInput />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'端口'} name={'port'}>
+                        <AntdInputNumber min={0} max={65535} style={{ width: '100%' }} />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'安全类型'} name={'securityType'}>
+                        <AntdSelect>
+                            <AntdSelect.Option key={'None'}>None</AntdSelect.Option>
+                            <AntdSelect.Option key={'SSL/TLS'}>SSL/TLS</AntdSelect.Option>
+                            <AntdSelect.Option key={'StartTls'}>StartTls</AntdSelect.Option>
+                        </AntdSelect>
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'用户名'} name={'username'}>
+                        <AntdInput />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'密码'} name={'password'}>
+                        <AntdInput.Password />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'发送者'} name={'from'}>
+                        <AntdInput />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'发送者名称'} name={'fromName'}>
+                        <AntdInput />
+                    </AntdForm.Item>
+                </AntdForm>
+            </SettingsCard>
+            {contextHolder}
+        </>
+    )
+}
+
+const Settings: React.FC = () => {
     return (
         <>
             <FitFullScreen>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox className={'root-content'}>
-                        <MailSettings mail={systemSetting?.mail} onSave={handleOnSave} />
+                        <MailSettings />
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>
diff --git a/src/services/system.tsx b/src/services/system.tsx
index f23c38d..4b85022 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -8,7 +8,6 @@ import {
     URL_SYS_GROUP,
     URL_SYS_GROUP_LIST,
     URL_SYS_LOG,
-    URL_SYS_SETTINGS,
     URL_SYS_SETTINGS_MAIL
 } from '@/constants/urls.constants'
 import request from '@/services/index'
@@ -66,7 +65,10 @@ export const r_sys_group_delete_list = (ids: React.Key[]) => request.delete(URL_
 export const r_sys_log_get = (param: SysLogGetParam) =>
     request.get<PageVo<SysLogGetVo>>(URL_SYS_LOG, param)
 
-export const r_sys_settings_get = () => request.get<SystemSettingVo>(URL_SYS_SETTINGS)
+export const r_sys_settings_mail_get = () => request.get<MailSettingsVo>(URL_SYS_SETTINGS_MAIL)
 
 export const r_sys_settings_mail_update = (param: MailSettingsParam) =>
     request.put(URL_SYS_SETTINGS_MAIL, param)
+
+export const r_sys_settings_mail_send = (param: MailSendParam) =>
+    request.post(URL_SYS_SETTINGS_MAIL, param)

From f25e245c99c821f346d7d0e3abd6a1a1b2227a32 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 6 Dec 2023 10:22:20 +0800
Subject: [PATCH 109/307] Add permission control to settings management page

---
 src/pages/system/Settings.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/pages/system/Settings.tsx b/src/pages/system/Settings.tsx
index bd829ce..b15ede4 100644
--- a/src/pages/system/Settings.tsx
+++ b/src/pages/system/Settings.tsx
@@ -12,11 +12,14 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import LoadingMask from '@/components/common/LoadingMask'
+import Permission from '@/components/common/Permission.tsx'
+import { hasPermission } from '@/util/auth.tsx'
 
 interface SettingsCardProps extends React.PropsWithChildren {
     icon: IconComponent
     title: string
     loading?: boolean
+    modifyOperationCode?: string
     expand?: React.ReactNode
     onReset?: () => void
     onSave?: () => void
@@ -29,7 +32,7 @@ const SettingsCard: React.FC<SettingsCardProps> = (props) => {
                     <Icon component={props.icon} className={'icon'} />
                     <div className={'title'}>{props.title}</div>
                     {!props.loading ? (
-                        <>
+                        <Permission operationCode={props.modifyOperationCode}>
                             {props.expand}
                             <AntdButton onClick={props.onReset} title={'重置'}>
                                 <Icon component={IconFatwebBack} />
@@ -37,7 +40,7 @@ const SettingsCard: React.FC<SettingsCardProps> = (props) => {
                             <AntdButton className={'bt-save'} onClick={props.onSave} title={'保存'}>
                                 <Icon component={IconFatwebSave} />
                             </AntdButton>
-                        </>
+                        </Permission>
                     ) : undefined}
                 </FlexBox>
                 <LoadingMask hidden={!props.loading}>{props.children}</LoadingMask>
@@ -145,13 +148,18 @@ const MailSettings: React.FC = () => {
                 loading={loading}
                 onReset={handleOnReset}
                 onSave={handleOnSave}
+                modifyOperationCode={'system:settings:modify:mail'}
                 expand={
                     <AntdButton onClick={handleOnTest} title={'测试'}>
                         <Icon component={IconFatwebTest} />
                     </AntdButton>
                 }
             >
-                <AntdForm form={mailForm} labelCol={{ flex: '8em' }}>
+                <AntdForm
+                    form={mailForm}
+                    labelCol={{ flex: '8em' }}
+                    disabled={!hasPermission('system:settings:modify:mail')}
+                >
                     <AntdForm.Item label={'SMTP 服务器'} name={'host'}>
                         <AntdInput />
                     </AntdForm.Item>
@@ -190,7 +198,9 @@ const Settings: React.FC = () => {
             <FitFullScreen>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox className={'root-content'}>
-                        <MailSettings />
+                        <Permission operationCode={'system:settings:query:mail'}>
+                            <MailSettings />
+                        </Permission>
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>

From ee81f71f47752383467ec0b3109bb0263b773433 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 6 Dec 2023 11:57:27 +0800
Subject: [PATCH 110/307] Optimize settings management page stylesheet

---
 src/assets/css/pages/system/settings.scss | 44 ++++++++++++-----------
 src/pages/system/Settings.tsx             |  9 +++--
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.scss
index f6b284b..7a6cc23 100644
--- a/src/assets/css/pages/system/settings.scss
+++ b/src/assets/css/pages/system/settings.scss
@@ -2,33 +2,37 @@
 
 .root-content {
   padding: 30px;
-  gap: 10px;
+  gap: 20px;
 
-  .settings-card {
-    padding: 20px;
+  .root-row {
     gap: 20px;
 
-    > .head {
-      align-items: center;
-      gap: 5px;
+    .settings-card {
+      padding: 20px;
+      gap: 20px;
 
-      .icon {
-        font-size: constants.$SIZE_ICON_MD;
-        flex: 0 0 auto;
-      }
+      > .head {
+        align-items: center;
+        gap: 5px;
 
-      .title {
-        display: flex;
-        font-size: 1.2em;
-      }
+        .icon {
+          font-size: constants.$SIZE_ICON_MD;
+          flex: 0 0 auto;
+        }
 
-      :nth-child(n+3) {
-        flex: 0 0 auto;
-        color: constants.$font-main-color;
-      }
+        .title {
+          display: flex;
+          font-size: 1.2em;
+        }
 
-      .bt-save {
-        color: constants.$main-color;
+        :nth-child(n+3) {
+          flex: 0 0 auto;
+          color: constants.$font-main-color;
+        }
+
+        .bt-save {
+          color: constants.$main-color;
+        }
       }
     }
   }
diff --git a/src/pages/system/Settings.tsx b/src/pages/system/Settings.tsx
index b15ede4..f35c57f 100644
--- a/src/pages/system/Settings.tsx
+++ b/src/pages/system/Settings.tsx
@@ -198,9 +198,12 @@ const Settings: React.FC = () => {
             <FitFullScreen>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox className={'root-content'}>
-                        <Permission operationCode={'system:settings:query:mail'}>
-                            <MailSettings />
-                        </Permission>
+                        <FlexBox direction={'horizontal'} className={'root-row'}>
+                            <Permission operationCode={'system:settings:query:mail'}>
+                                <MailSettings />
+                            </Permission>
+                            <div />
+                        </FlexBox>
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>

From 46ce9823e255ffa0608795e06d1883f4e4f5a61e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 6 Dec 2023 11:58:53 +0800
Subject: [PATCH 111/307] Upgrade dependencies

---
 package-lock.json | 1513 ++++++++++++++++++++++++++-------------------
 package.json      |   44 +-
 2 files changed, 905 insertions(+), 652 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d1f47d0..a880d38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
-        "antd": "^5.11.0",
-        "axios": "^1.6.1",
+        "antd": "^5.12.1",
+        "axios": "^1.6.2",
         "dayjs": "^1.11.10",
         "jwt-decode": "^4.0.0",
         "localforage": "^1.10.0",
@@ -19,36 +19,36 @@
         "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router": "^6.18.0",
-        "react-router-dom": "^6.18.0"
+        "react-router": "^6.20.1",
+        "react-router-dom": "^6.20.1"
       },
       "devDependencies": {
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
-        "@types/jsdom": "^21.1.5",
-        "@types/lodash": "^4.14.201",
-        "@types/node": "^20.9.0",
-        "@types/react": "^18.2.37",
-        "@types/react-dom": "^18.2.15",
-        "@typescript-eslint/eslint-plugin": "^6.10.0",
-        "@typescript-eslint/parser": "^6.10.0",
-        "@vitejs/plugin-react": "^4.1.1",
-        "eslint": "^8.53.0",
-        "eslint-config-prettier": "^9.0.0",
-        "eslint-config-standard-with-typescript": "^39.1.1",
+        "@types/jsdom": "^21.1.6",
+        "@types/lodash": "^4.14.202",
+        "@types/node": "^20.10.3",
+        "@types/react": "^18.2.42",
+        "@types/react-dom": "^18.2.17",
+        "@typescript-eslint/eslint-plugin": "^6.13.2",
+        "@typescript-eslint/parser": "^6.13.2",
+        "@vitejs/plugin-react": "^4.2.1",
+        "eslint": "^8.55.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-config-standard-with-typescript": "^40.0.0",
         "eslint-plugin-import": "^2.29.0",
         "eslint-plugin-prettier": "^5.0.1",
         "eslint-plugin-promise": "^6.1.1",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.4.4",
-        "jsdom": "^22.1.0",
-        "prettier": "^3.0.3",
+        "eslint-plugin-react-refresh": "^0.4.5",
+        "jsdom": "^23.0.1",
+        "prettier": "^3.1.0",
         "sass": "^1.69.5",
         "stylelint-config-prettier": "^9.0.5",
-        "typescript": "^5.2.2",
-        "unplugin-auto-import": "^0.16.7",
-        "unplugin-icons": "^0.17.3",
-        "vite": "^4.5.0"
+        "typescript": "^5.3.2",
+        "unplugin-auto-import": "^0.17.2",
+        "unplugin-icons": "^0.18.1",
+        "vite": "^5.0.5"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -82,9 +82,9 @@
       }
     },
     "node_modules/@ant-design/cssinjs": {
-      "version": "1.17.2",
-      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.17.2.tgz",
-      "integrity": "sha512-vu7lnfEx4Mf8MPzZxn506Zen3Nt4fRr2uutwvdCuTCN5IiU0lDdQ0tiJ24/rmB8+pefwjluYsbyzbQSbgfJy+A==",
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.18.0.tgz",
+      "integrity": "sha512-NXzfnNjJgpn+L6d0cD2cS14Tsqs46Bsua6PwVMlmN+F0OEoa9PhJRwUWmI+HyIrc4cgVZVfQTDpXC0p07Jmglw==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "@emotion/hash": "^0.8.0",
@@ -139,105 +139,71 @@
       }
     },
     "node_modules/@antfu/install-pkg": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.1.1.tgz",
-      "integrity": "sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.3.1.tgz",
+      "integrity": "sha512-A3zWY9VeTPnxlMiZtsGHw2lSd3ghwvL8s9RiGOtqvDxhhFfZ781ynsGBa/iUnDJ5zBrmTFQrJDud3TGgRISaxw==",
       "dev": true,
       "dependencies": {
-        "execa": "^5.1.1",
-        "find-up": "^5.0.0"
+        "execa": "^8.0.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@antfu/install-pkg/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
       "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
         "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=16.17"
       },
       "funding": {
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/@antfu/install-pkg/node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@antfu/install-pkg/node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
       "dev": true,
       "engines": {
-        "node": ">=10.17.0"
+        "node": ">=16.17.0"
       }
     },
-    "node_modules/@antfu/install-pkg/node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+    "node_modules/@antfu/install-pkg/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
       "dev": true,
       "engines": {
-        "node": ">=8"
+        "node": ">=14"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@antfu/install-pkg/node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@antfu/install-pkg/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@antfu/install-pkg/node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@antfu/install-pkg/node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/@antfu/utils": {
@@ -247,12 +213,12 @@
       "dev": true
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.22.13.tgz",
-      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
       "dev": true,
       "dependencies": {
-        "@babel/highlight": "^7.22.13",
+        "@babel/highlight": "^7.23.4",
         "chalk": "^2.4.2"
       },
       "engines": {
@@ -269,21 +235,21 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.2.tgz",
-      "integrity": "sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.5.tgz",
+      "integrity": "sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.23.0",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.5",
         "@babel/helper-compilation-targets": "^7.22.15",
-        "@babel/helper-module-transforms": "^7.23.0",
-        "@babel/helpers": "^7.23.2",
-        "@babel/parser": "^7.23.0",
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helpers": "^7.23.5",
+        "@babel/parser": "^7.23.5",
         "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.2",
-        "@babel/types": "^7.23.0",
+        "@babel/traverse": "^7.23.5",
+        "@babel/types": "^7.23.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -299,12 +265,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
-      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.5.tgz",
+      "integrity": "sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.23.0",
+        "@babel/types": "^7.23.5",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -376,9 +342,9 @@
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz",
-      "integrity": "sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==",
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
@@ -396,7 +362,7 @@
     },
     "node_modules/@babel/helper-plugin-utils": {
       "version": "7.22.5",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
       "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
       "dev": true,
       "engines": {
@@ -428,9 +394,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -455,26 +421,26 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.2.tgz",
-      "integrity": "sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.5.tgz",
+      "integrity": "sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.2",
-        "@babel/types": "^7.23.0"
+        "@babel/traverse": "^7.23.5",
+        "@babel/types": "^7.23.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmmirror.com/@babel/highlight/-/highlight-7.22.13.tgz",
-      "integrity": "sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
         "js-tokens": "^4.0.0"
       },
@@ -483,9 +449,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz",
+      "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -495,9 +461,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.22.5.tgz",
-      "integrity": "sha512-nTh2ogNUtxbiSbxaT4Ds6aXnXEipHweN9YRgOX/oNXdf0cCrGn/+2LozFa3lnPV5D90MkjhgckCPBrsoSc1a7g==",
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz",
+      "integrity": "sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5"
@@ -510,9 +476,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.22.5.tgz",
-      "integrity": "sha512-yIiRO6yobeEIaI0RTbIr8iAK9FcBHLtZq0S89ZPjDLQXBA4xvghaKqI0etp/tF3htTM0sazJKKLz9oEiGRtu7w==",
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz",
+      "integrity": "sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.22.5"
@@ -525,9 +491,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
-      "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -550,19 +516,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
-      "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.5.tgz",
+      "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.23.0",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.5",
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.0",
-        "@babel/types": "^7.23.0",
+        "@babel/parser": "^7.23.5",
+        "@babel/types": "^7.23.5",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -571,12 +537,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz",
+      "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       },
@@ -616,9 +582,9 @@
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
-      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.8.tgz",
+      "integrity": "sha512-31E2lxlGM1KEfivQl8Yf5aYU/mflz9g06H6S15ITUFQueMFtFjESRMoDSkvMo8thYvLBax+VKTPlpnx+sPicOA==",
       "cpu": [
         "arm"
       ],
@@ -632,9 +598,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
-      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.8.tgz",
+      "integrity": "sha512-B8JbS61bEunhfx8kasogFENgQfr/dIp+ggYXwTqdbMAgGDhRa3AaPpQMuQU0rNxDLECj6FhDzk1cF9WHMVwrtA==",
       "cpu": [
         "arm64"
       ],
@@ -648,9 +614,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
-      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.8.tgz",
+      "integrity": "sha512-rdqqYfRIn4jWOp+lzQttYMa2Xar3OK9Yt2fhOhzFXqg0rVWEfSclJvZq5fZslnz6ypHvVf3CT7qyf0A5pM682A==",
       "cpu": [
         "x64"
       ],
@@ -664,9 +630,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
-      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.8.tgz",
+      "integrity": "sha512-RQw9DemMbIq35Bprbboyf8SmOr4UXsRVxJ97LgB55VKKeJOOdvsIPy0nFyF2l8U+h4PtBx/1kRf0BelOYCiQcw==",
       "cpu": [
         "arm64"
       ],
@@ -680,9 +646,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
-      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.8.tgz",
+      "integrity": "sha512-3sur80OT9YdeZwIVgERAysAbwncom7b4bCI2XKLjMfPymTud7e/oY4y+ci1XVp5TfQp/bppn7xLw1n/oSQY3/Q==",
       "cpu": [
         "x64"
       ],
@@ -696,9 +662,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
-      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.8.tgz",
+      "integrity": "sha512-WAnPJSDattvS/XtPCTj1tPoTxERjcTpH6HsMr6ujTT+X6rylVe8ggxk8pVxzf5U1wh5sPODpawNicF5ta/9Tmw==",
       "cpu": [
         "arm64"
       ],
@@ -712,9 +678,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
-      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.8.tgz",
+      "integrity": "sha512-ICvZyOplIjmmhjd6mxi+zxSdpPTKFfyPPQMQTK/w+8eNK6WV01AjIztJALDtwNNfFhfZLux0tZLC+U9nSyA5Zg==",
       "cpu": [
         "x64"
       ],
@@ -728,9 +694,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
-      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.8.tgz",
+      "integrity": "sha512-H4vmI5PYqSvosPaTJuEppU9oz1dq2A7Mr2vyg5TF9Ga+3+MGgBdGzcyBP7qK9MrwFQZlvNyJrvz6GuCaj3OukQ==",
       "cpu": [
         "arm"
       ],
@@ -744,9 +710,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
-      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.8.tgz",
+      "integrity": "sha512-z1zMZivxDLHWnyGOctT9JP70h0beY54xDDDJt4VpTX+iwA77IFsE1vCXWmprajJGa+ZYSqkSbRQ4eyLCpCmiCQ==",
       "cpu": [
         "arm64"
       ],
@@ -760,9 +726,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
-      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.8.tgz",
+      "integrity": "sha512-1a8suQiFJmZz1khm/rDglOc8lavtzEMRo0v6WhPgxkrjcU0LkHj+TwBrALwoz/OtMExvsqbbMI0ChyelKabSvQ==",
       "cpu": [
         "ia32"
       ],
@@ -776,9 +742,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
-      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.8.tgz",
+      "integrity": "sha512-fHZWS2JJxnXt1uYJsDv9+b60WCc2RlvVAy1F76qOLtXRO+H4mjt3Tr6MJ5l7Q78X8KgCFudnTuiQRBhULUyBKQ==",
       "cpu": [
         "loong64"
       ],
@@ -792,9 +758,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
-      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.8.tgz",
+      "integrity": "sha512-Wy/z0EL5qZYLX66dVnEg9riiwls5IYnziwuju2oUiuxVc+/edvqXa04qNtbrs0Ukatg5HEzqT94Zs7J207dN5Q==",
       "cpu": [
         "mips64el"
       ],
@@ -808,9 +774,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
-      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.8.tgz",
+      "integrity": "sha512-ETaW6245wK23YIEufhMQ3HSeHO7NgsLx8gygBVldRHKhOlD1oNeNy/P67mIh1zPn2Hr2HLieQrt6tWrVwuqrxg==",
       "cpu": [
         "ppc64"
       ],
@@ -824,9 +790,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
-      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.8.tgz",
+      "integrity": "sha512-T2DRQk55SgoleTP+DtPlMrxi/5r9AeFgkhkZ/B0ap99zmxtxdOixOMI570VjdRCs9pE4Wdkz7JYrsPvsl7eESg==",
       "cpu": [
         "riscv64"
       ],
@@ -840,9 +806,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
-      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.8.tgz",
+      "integrity": "sha512-NPxbdmmo3Bk7mbNeHmcCd7R7fptJaczPYBaELk6NcXxy7HLNyWwCyDJ/Xx+/YcNH7Im5dHdx9gZ5xIwyliQCbg==",
       "cpu": [
         "s390x"
       ],
@@ -856,9 +822,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
-      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.8.tgz",
+      "integrity": "sha512-lytMAVOM3b1gPypL2TRmZ5rnXl7+6IIk8uB3eLsV1JwcizuolblXRrc5ShPrO9ls/b+RTp+E6gbsuLWHWi2zGg==",
       "cpu": [
         "x64"
       ],
@@ -872,9 +838,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.8.tgz",
+      "integrity": "sha512-hvWVo2VsXz/8NVt1UhLzxwAfo5sioj92uo0bCfLibB0xlOmimU/DeAEsQILlBQvkhrGjamP0/el5HU76HAitGw==",
       "cpu": [
         "x64"
       ],
@@ -888,9 +854,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.8.tgz",
+      "integrity": "sha512-/7Y7u77rdvmGTxR83PgaSvSBJCC2L3Kb1M/+dmSIvRvQPXXCuC97QAwMugBNG0yGcbEGfFBH7ojPzAOxfGNkwQ==",
       "cpu": [
         "x64"
       ],
@@ -904,9 +870,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
-      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.8.tgz",
+      "integrity": "sha512-9Lc4s7Oi98GqFA4HzA/W2JHIYfnXbUYgekUP/Sm4BG9sfLjyv6GKKHKKVs83SMicBF2JwAX6A1PuOLMqpD001w==",
       "cpu": [
         "x64"
       ],
@@ -920,9 +886,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
-      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.8.tgz",
+      "integrity": "sha512-rq6WzBGjSzihI9deW3fC2Gqiak68+b7qo5/3kmB6Gvbh/NYPA0sJhrnp7wgV4bNwjqM+R2AApXGxMO7ZoGhIJg==",
       "cpu": [
         "arm64"
       ],
@@ -936,9 +902,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
-      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.8.tgz",
+      "integrity": "sha512-AIAbverbg5jMvJznYiGhrd3sumfwWs8572mIJL5NQjJa06P8KfCPWZQ0NwZbPQnbQi9OWSZhFVSUWjjIrn4hSw==",
       "cpu": [
         "ia32"
       ],
@@ -952,9 +918,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
-      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.8.tgz",
+      "integrity": "sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==",
       "cpu": [
         "x64"
       ],
@@ -992,9 +958,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.3.tgz",
-      "integrity": "sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -1042,9 +1008,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.53.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.53.0.tgz",
-      "integrity": "sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.55.0.tgz",
+      "integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1086,9 +1052,9 @@
       "dev": true
     },
     "node_modules/@iconify/utils": {
-      "version": "2.1.11",
-      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.1.11.tgz",
-      "integrity": "sha512-M/w3PkN8zQYXi8N6qK/KhnYMfEbbb6Sk8RZVn8g+Pmmu5ybw177RpsaGwpziyHeUsu4etrexYSWq3rwnIqzYCg==",
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.1.12.tgz",
+      "integrity": "sha512-7vf3Uk6H7TKX4QMs2gbg5KR1X9J0NJzKSRNWhMZ+PWN92l0t6Q3tj2ZxLDG07rC3ppWBtTtA4FPmkQphuEmdsg==",
       "dev": true,
       "dependencies": {
         "@antfu/install-pkg": "^0.1.1",
@@ -1099,6 +1065,63 @@
         "local-pkg": "^0.4.3"
       }
     },
+    "node_modules/@iconify/utils/node_modules/@antfu/install-pkg": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.1.1.tgz",
+      "integrity": "sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==",
+      "dev": true,
+      "dependencies": {
+        "execa": "^5.1.1",
+        "find-up": "^5.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@iconify/utils/node_modules/local-pkg": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
@@ -1111,6 +1134,51 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@iconify/utils/node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -1285,9 +1353,9 @@
       }
     },
     "node_modules/@rc-component/tour": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.10.0.tgz",
-      "integrity": "sha512-voV0BKaTJbewB9LLgAHQ7tAGG7rgDkKQkZo82xw2gIk542hY+o7zwoqdN16oHhIKk7eG/xi+mdXrONT62Dt57A==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.11.0.tgz",
+      "integrity": "sha512-JRjzuvZf8LWY/8fM9N4rw/XUV1LdWwuIBrlJYRNFbaRynhlFdbYw5ac1R645P/SOCT7sB5LWBY7jfCJ6oaMGsg==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "@rc-component/portal": "^1.0.0-9",
@@ -1304,9 +1372,9 @@
       }
     },
     "node_modules/@rc-component/trigger": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.18.0.tgz",
-      "integrity": "sha512-vloGnWpeTmt7DBw0OHnG9poQ8h1WFh0hebq6fpgVjGYSxm6JU8rLH+kNwVNNvhL6Rg5He4ESjOk6O7uF9dJhxA==",
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.18.2.tgz",
+      "integrity": "sha512-jRLYgFgjLEPq3MvS87fIhcfuywFSRDaDrYw1FLku7Cm4esszvzTbA0JBsyacAyLrK9rF3TiHFcvoEDMzoD3CTA==",
       "dependencies": {
         "@babel/runtime": "^7.23.2",
         "@rc-component/portal": "^1.1.0",
@@ -1324,17 +1392,17 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz",
-      "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz",
+      "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==",
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.5.tgz",
-      "integrity": "sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
       "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
@@ -1353,6 +1421,162 @@
         }
       }
     },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.6.1.tgz",
+      "integrity": "sha512-0WQ0ouLejaUCRsL93GD4uft3rOmB8qoQMU05Kb8CmMtMBe7XUDLAltxVZI1q6byNqEtU7N1ZX1Vw5lIpgulLQA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.6.1.tgz",
+      "integrity": "sha512-1TKm25Rn20vr5aTGGZqo6E4mzPicCUD79k17EgTLAsXc1zysyi4xXKACfUbwyANEPAEIxkzwue6JZ+stYzWUTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.6.1.tgz",
+      "integrity": "sha512-cEXJQY/ZqMACb+nxzDeX9IPLAg7S94xouJJCNVE5BJM8JUEP4HeTF+ti3cmxWeSJo+5D+o8Tc0UAWUkfENdeyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.6.1.tgz",
+      "integrity": "sha512-LoSU9Xu56isrkV2jLldcKspJ7sSXmZWkAxg7sW/RfF7GS4F5/v4EiqKSMCFbZtDu2Nc1gxxFdQdKwkKS4rwxNg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.6.1.tgz",
+      "integrity": "sha512-EfI3hzYAy5vFNDqpXsNxXcgRDcFHUWSx5nnRSCKwXuQlI5J9dD84g2Usw81n3FLBNsGCegKGwwTVsSKK9cooSQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.6.1.tgz",
+      "integrity": "sha512-9lhc4UZstsegbNLhH0Zu6TqvDfmhGzuCWtcTFXY10VjLLUe4Mr0Ye2L3rrtHaDd/J5+tFMEuo5LTCSCMXWfUKw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.6.1.tgz",
+      "integrity": "sha512-FfoOK1yP5ksX3wwZ4Zk1NgyGHZyuRhf99j64I5oEmirV8EFT7+OhUZEnP+x17lcP/QHJNWGsoJwrz4PJ9fBEXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.6.1.tgz",
+      "integrity": "sha512-DNGZvZDO5YF7jN5fX8ZqmGLjZEXIJRdJEdTFMhiyXqyXubBa0WVLDWSNlQ5JR2PNgDbEV1VQowhVRUh+74D+RA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.6.1.tgz",
+      "integrity": "sha512-RkJVNVRM+piYy87HrKmhbexCHg3A6Z6MU0W9GHnJwBQNBeyhCJG9KDce4SAMdicQnpURggSvtbGo9xAWOfSvIQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.6.1.tgz",
+      "integrity": "sha512-v2FVT6xfnnmTe3W9bJXl6r5KwJglMK/iRlkKiIFfO6ysKs0rDgz7Cwwf3tjldxQUrHL9INT/1r4VA0n9L/F1vQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.6.1.tgz",
+      "integrity": "sha512-YEeOjxRyEjqcWphH9dyLbzgkF8wZSKAKUkldRY6dgNR5oKs2LZazqGB41cWJ4Iqqcy9/zqYgmzBkRoVz3Q9MLw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.6.1.tgz",
+      "integrity": "sha512-0zfTlFAIhgz8V2G8STq8toAjsYYA6eci1hnXuyOTUFnymrtJwnS6uGKiv3v5UrPZkBlamLvrLV2iiaeqCKzb0A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
@@ -1518,19 +1742,10 @@
         "@svgr/core": "*"
       }
     },
-    "node_modules/@tootallnate/once": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/@tootallnate/once/-/once-2.0.0.tgz",
-      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@types/babel__core": {
-      "version": "7.20.3",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.3.tgz",
-      "integrity": "sha512-54fjTSeSHwfan8AyHWrKbfBWiEUrNTZsUwPTDSNaaP1QDQIZbeNUg3a59E9D+375MzUw/x1vx2/0F5LBz+AeYA==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
       "dev": true,
       "dependencies": {
         "@babel/parser": "^7.20.7",
@@ -1541,18 +1756,18 @@
       }
     },
     "node_modules/@types/babel__generator": {
-      "version": "7.6.6",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.6.tgz",
-      "integrity": "sha512-66BXMKb/sUWbMdBNdMvajU7i/44RkrA3z/Yt1c7R5xejt8qh84iU54yUWCtm0QwGJlDcf/gg4zd/x4mpLAlb/w==",
+      "version": "7.6.7",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.7.tgz",
+      "integrity": "sha512-6Sfsq+EaaLrw4RmdFWE9Onp63TOUue71AWb4Gpa6JxzgTYtimbM086WnYTy2U67AofR++QKCo08ZP6pwx8YFHQ==",
       "dev": true,
       "dependencies": {
         "@babel/types": "^7.0.0"
       }
     },
     "node_modules/@types/babel__template": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.3.tgz",
-      "integrity": "sha512-ciwyCLeuRfxboZ4isgdNZi/tkt06m8Tw6uGbBSBgWrnnZGNXiEyM27xc/PjXGQLqlZ6ylbgHMnm7ccF9tCkOeQ==",
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
       "dev": true,
       "dependencies": {
         "@babel/parser": "^7.1.0",
@@ -1560,24 +1775,24 @@
       }
     },
     "node_modules/@types/babel__traverse": {
-      "version": "7.20.3",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.3.tgz",
-      "integrity": "sha512-Lsh766rGEFbaxMIDH7Qa+Yha8cMVI3qAK6CHt3OR0YfxOIn5Z54iHiyDRycHrBqeIiqGa20Kpsv1cavfBKkRSw==",
+      "version": "7.20.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.4.tgz",
+      "integrity": "sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==",
       "dev": true,
       "dependencies": {
         "@babel/types": "^7.20.7"
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.4.tgz",
-      "integrity": "sha512-2JwWnHK9H+wUZNorf2Zr6ves96WHoWDJIftkcxPKsS7Djta6Zu519LarhRNljPXkpsZR2ZMwNCPeW7omW07BJw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
     "node_modules/@types/jsdom": {
-      "version": "21.1.5",
-      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.5.tgz",
-      "integrity": "sha512-sBK/3YjS3uuPj+HzZyhB4GGTnFmk0mdyQfhzZ/sqs9ciyG41QJdZZdwcPa6OfW97OTNTwl5tBAsfEOm/dui9pQ==",
+      "version": "21.1.6",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz",
+      "integrity": "sha512-/7kkMsC+/kMs7gAYmmBR9P0vGTnOoLhQhyhQJSlXGI5bzTHp6xdo0TtKWQAsz6pmSAeVqKSbqeyP6hytqr9FDw==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -1598,9 +1813,9 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.201",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.201.tgz",
-      "integrity": "sha512-y9euML0cim1JrykNxADLfaG0FgD1g/yTHwUs/Jg9ZIU7WKj2/4IW9Lbb1WZbvck78W/lfGXFfe+u2EGfIJXdLQ==",
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
       "dev": true
     },
     "node_modules/@types/minimist": {
@@ -1611,9 +1826,9 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "20.9.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.0.tgz",
-      "integrity": "sha512-nekiGu2NDb1BcVofVcEKMIwzlx4NjHlcjhoxxKBNLtz15Y1z7MYf549DFvkHSId02Ax6kGwWntIBPC3l/JZcmw==",
+      "version": "20.10.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.3.tgz",
+      "integrity": "sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -1640,9 +1855,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.37",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
-      "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
+      "version": "18.2.42",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.42.tgz",
+      "integrity": "sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1651,9 +1866,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.15",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.15.tgz",
-      "integrity": "sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==",
+      "version": "18.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.17.tgz",
+      "integrity": "sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -1666,9 +1881,9 @@
       "dev": true
     },
     "node_modules/@types/semver": {
-      "version": "7.5.5",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.5.tgz",
-      "integrity": "sha512-+d+WYC1BxJ6yVOgUgzK8gWvp5qF8ssV5r4nsDcZWKRWcDQLQ619tvWAxJQYGgBrO1MnLJC7a5GtiYsAoQ47dJg==",
+      "version": "7.5.6",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
+      "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==",
       "dev": true
     },
     "node_modules/@types/tough-cookie": {
@@ -1678,16 +1893,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.10.0.tgz",
-      "integrity": "sha512-uoLj4g2OTL8rfUQVx2AFO1hp/zja1wABJq77P6IclQs6I/m9GLrm7jCdgzZkvWdDCQf1uEvoa8s8CupsgWQgVg==",
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.13.2.tgz",
+      "integrity": "sha512-3+9OGAWHhk4O1LlcwLBONbdXsAhLjyCFogJY/cWy2lxdVJ2JrcTF2pTGMaLl2AE7U1l31n8Py4a8bx5DLf/0dQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.10.0",
-        "@typescript-eslint/type-utils": "6.10.0",
-        "@typescript-eslint/utils": "6.10.0",
-        "@typescript-eslint/visitor-keys": "6.10.0",
+        "@typescript-eslint/scope-manager": "6.13.2",
+        "@typescript-eslint/type-utils": "6.13.2",
+        "@typescript-eslint/utils": "6.13.2",
+        "@typescript-eslint/visitor-keys": "6.13.2",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.4",
@@ -1746,15 +1961,15 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.10.0.tgz",
-      "integrity": "sha512-+sZwIj+s+io9ozSxIWbNB5873OSdfeBEH/FR0re14WLI6BaKuSOnnwCJ2foUiu8uXf4dRp1UqHP0vrZ1zXGrog==",
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.13.2.tgz",
+      "integrity": "sha512-MUkcC+7Wt/QOGeVlM8aGGJZy1XV5YKjTpq9jK6r6/iLsGXhBVaGP5N0UYvFsu9BFlSpwY9kMretzdBH01rkRXg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.10.0",
-        "@typescript-eslint/types": "6.10.0",
-        "@typescript-eslint/typescript-estree": "6.10.0",
-        "@typescript-eslint/visitor-keys": "6.10.0",
+        "@typescript-eslint/scope-manager": "6.13.2",
+        "@typescript-eslint/types": "6.13.2",
+        "@typescript-eslint/typescript-estree": "6.13.2",
+        "@typescript-eslint/visitor-keys": "6.13.2",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1774,13 +1989,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.10.0.tgz",
-      "integrity": "sha512-TN/plV7dzqqC2iPNf1KrxozDgZs53Gfgg5ZHyw8erd6jd5Ta/JIEcdCheXFt9b1NYb93a1wmIIVW/2gLkombDg==",
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.13.2.tgz",
+      "integrity": "sha512-CXQA0xo7z6x13FeDYCgBkjWzNqzBn8RXaE3QVQVIUm74fWJLkJkaHmHdKStrxQllGh6Q4eUGyNpMe0b1hMkXFA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.10.0",
-        "@typescript-eslint/visitor-keys": "6.10.0"
+        "@typescript-eslint/types": "6.13.2",
+        "@typescript-eslint/visitor-keys": "6.13.2"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1791,13 +2006,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.10.0.tgz",
-      "integrity": "sha512-wYpPs3hgTFblMYwbYWPT3eZtaDOjbLyIYuqpwuLBBqhLiuvJ+9sEp2gNRJEtR5N/c9G1uTtQQL5AhV0fEPJYcg==",
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.13.2.tgz",
+      "integrity": "sha512-Qr6ssS1GFongzH2qfnWKkAQmMUyZSyOr0W54nZNU1MDfo+U4Mv3XveeLZzadc/yq8iYhQZHYT+eoXJqnACM1tw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.10.0",
-        "@typescript-eslint/utils": "6.10.0",
+        "@typescript-eslint/typescript-estree": "6.13.2",
+        "@typescript-eslint/utils": "6.13.2",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -1818,9 +2033,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.10.0.tgz",
-      "integrity": "sha512-36Fq1PWh9dusgo3vH7qmQAj5/AZqARky1Wi6WpINxB6SkQdY5vQoT2/7rW7uBIsPDcvvGCLi4r10p0OJ7ITAeg==",
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.13.2.tgz",
+      "integrity": "sha512-7sxbQ+EMRubQc3wTfTsycgYpSujyVbI1xw+3UMRUcrhSy+pN09y/lWzeKDbvhoqcRbHdc+APLs/PWYi/cisLPg==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1831,13 +2046,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.10.0.tgz",
-      "integrity": "sha512-ek0Eyuy6P15LJVeghbWhSrBCj/vJpPXXR+EpaRZqou7achUWL8IdYnMSC5WHAeTWswYQuP2hAZgij/bC9fanBg==",
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.13.2.tgz",
+      "integrity": "sha512-SuD8YLQv6WHnOEtKv8D6HZUzOub855cfPnPMKvdM/Bh1plv1f7Q/0iFUDLKKlxHcEstQnaUU4QZskgQq74t+3w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.10.0",
-        "@typescript-eslint/visitor-keys": "6.10.0",
+        "@typescript-eslint/types": "6.13.2",
+        "@typescript-eslint/visitor-keys": "6.13.2",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -1891,17 +2106,17 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.10.0.tgz",
-      "integrity": "sha512-v+pJ1/RcVyRc0o4wAGux9x42RHmAjIGzPRo538Z8M1tVx6HOnoQBCX/NoadHQlZeC+QO2yr4nNSFWOoraZCAyg==",
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.13.2.tgz",
+      "integrity": "sha512-b9Ptq4eAZUym4idijCRzl61oPCwwREcfDI8xGk751Vhzig5fFZR9CyzDz4Sp/nxSLBYxUPyh4QdIDqWykFhNmQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
         "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.10.0",
-        "@typescript-eslint/types": "6.10.0",
-        "@typescript-eslint/typescript-estree": "6.10.0",
+        "@typescript-eslint/scope-manager": "6.13.2",
+        "@typescript-eslint/types": "6.13.2",
+        "@typescript-eslint/typescript-estree": "6.13.2",
         "semver": "^7.5.4"
       },
       "engines": {
@@ -1949,12 +2164,12 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.10.0.tgz",
-      "integrity": "sha512-xMGluxQIEtOM7bqFCo+rCMh5fqI+ZxV5RUUOa29iVPz1OgCZrtc7rFnz5cLUazlkPKYqX+75iuDq7m0HQ48nCg==",
+      "version": "6.13.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.13.2.tgz",
+      "integrity": "sha512-OGznFs0eAQXJsp+xSd6k/O1UbFi/K/L7WjqeRoFE7vadjAF9y0uppXhYNQNEqygjou782maGClOoZwPqF0Drlw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.10.0",
+        "@typescript-eslint/types": "6.13.2",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -1972,34 +2187,28 @@
       "dev": true
     },
     "node_modules/@vitejs/plugin-react": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.1.1.tgz",
-      "integrity": "sha512-Jie2HERK+uh27e+ORXXwEP5h0Y2lS9T2PRGbfebiHGlwzDO0dEnd2aNtOR/qjBlPb1YgxwAONeblL1xqLikLag==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
+      "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
       "dev": true,
       "dependencies": {
-        "@babel/core": "^7.23.2",
-        "@babel/plugin-transform-react-jsx-self": "^7.22.5",
-        "@babel/plugin-transform-react-jsx-source": "^7.22.5",
-        "@types/babel__core": "^7.20.3",
+        "@babel/core": "^7.23.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.23.3",
+        "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+        "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.14.0"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "vite": "^4.2.0"
+        "vite": "^4.2.0 || ^5.0.0"
       }
     },
-    "node_modules/abab": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmmirror.com/abab/-/abab-2.0.6.tgz",
-      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
-      "dev": true
-    },
     "node_modules/acorn": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.10.0.tgz",
-      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "version": "8.11.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
+      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -2018,15 +2227,15 @@
       }
     },
     "node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
+      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
       "dev": true,
       "dependencies": {
-        "debug": "4"
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">= 6.0.0"
+        "node": ">= 14"
       }
     },
     "node_modules/ajv": {
@@ -2056,7 +2265,7 @@
     },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
-      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
       "dev": true,
       "dependencies": {
@@ -2067,56 +2276,56 @@
       }
     },
     "node_modules/antd": {
-      "version": "5.11.0",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-5.11.0.tgz",
-      "integrity": "sha512-34T5Y6z+Ip+j4faXPTcanTFCLLpR4V0rLHtuz0lbN9gF4coGY/YYa8bhgwXrT6muW0Afwyo3NmbMF52hvIarog==",
+      "version": "5.12.1",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.12.1.tgz",
+      "integrity": "sha512-lDTg4U/4MxDD4OK0sLM3D0ge+5nHKj27dUj4ufF1FhQKPcRkVnkCWJ43gb1Cn+S3ybvz7yfsiEv0v+QqWJgPlA==",
       "dependencies": {
         "@ant-design/colors": "^7.0.0",
-        "@ant-design/cssinjs": "^1.17.2",
+        "@ant-design/cssinjs": "^1.18.0",
         "@ant-design/icons": "^5.2.6",
         "@ant-design/react-slick": "~1.0.2",
-        "@babel/runtime": "^7.18.3",
+        "@babel/runtime": "^7.23.4",
         "@ctrl/tinycolor": "^3.6.1",
         "@rc-component/color-picker": "~1.4.1",
         "@rc-component/mutate-observer": "^1.1.0",
-        "@rc-component/tour": "~1.10.0",
-        "@rc-component/trigger": "^1.18.0",
+        "@rc-component/tour": "~1.11.0",
+        "@rc-component/trigger": "^1.18.2",
         "classnames": "^2.3.2",
         "copy-to-clipboard": "^3.3.3",
         "dayjs": "^1.11.1",
         "qrcode.react": "^3.1.0",
         "rc-cascader": "~3.20.0",
         "rc-checkbox": "~3.1.0",
-        "rc-collapse": "~3.7.1",
+        "rc-collapse": "~3.7.2",
         "rc-dialog": "~9.3.4",
         "rc-drawer": "~6.5.2",
         "rc-dropdown": "~4.1.0",
-        "rc-field-form": "~1.40.0",
-        "rc-image": "~7.3.2",
-        "rc-input": "~1.3.5",
+        "rc-field-form": "~1.41.0",
+        "rc-image": "~7.5.1",
+        "rc-input": "~1.3.6",
         "rc-input-number": "~8.4.0",
         "rc-mentions": "~2.9.1",
         "rc-menu": "~9.12.2",
         "rc-motion": "^2.9.0",
         "rc-notification": "~5.3.0",
-        "rc-pagination": "~3.7.0",
+        "rc-pagination": "~4.0.1",
         "rc-picker": "~3.14.6",
         "rc-progress": "~3.5.1",
         "rc-rate": "~2.12.0",
         "rc-resize-observer": "^1.4.0",
         "rc-segmented": "~2.2.2",
         "rc-select": "~14.10.0",
-        "rc-slider": "~10.4.0",
+        "rc-slider": "~10.5.0",
         "rc-steps": "~6.0.1",
         "rc-switch": "~4.1.0",
-        "rc-table": "~7.35.2",
-        "rc-tabs": "~12.13.1",
-        "rc-textarea": "~1.5.1",
+        "rc-table": "~7.36.0",
+        "rc-tabs": "~12.14.1",
+        "rc-textarea": "~1.5.3",
         "rc-tooltip": "~6.1.2",
         "rc-tree": "~5.8.2",
         "rc-tree-select": "~5.15.0",
         "rc-upload": "~4.3.5",
-        "rc-util": "^5.38.0",
+        "rc-util": "^5.38.1",
         "scroll-into-view-if-needed": "^3.1.0",
         "throttle-debounce": "^5.0.0"
       },
@@ -2297,9 +2506,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
-      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -2501,7 +2710,7 @@
     },
     "node_modules/chalk": {
       "version": "2.4.2",
-      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "dev": true,
       "dependencies": {
@@ -2553,7 +2762,7 @@
     },
     "node_modules/color-convert": {
       "version": "1.9.3",
-      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
       "dev": true,
       "dependencies": {
@@ -2562,7 +2771,7 @@
     },
     "node_modules/color-name": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
@@ -2687,17 +2896,16 @@
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/data-urls": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/data-urls/-/data-urls-4.0.0.tgz",
-      "integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
       "dev": true,
       "dependencies": {
-        "abab": "^2.0.6",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^12.0.0"
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/dayjs": {
@@ -2796,6 +3004,20 @@
         "node": ">=12"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
+      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
@@ -2850,18 +3072,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/domexception": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/domexception/-/domexception-4.0.0.tgz",
-      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-      "dev": true,
-      "dependencies": {
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/dot-case/-/dot-case-3.0.4.tgz",
@@ -2991,9 +3201,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.18.20.tgz",
-      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+      "version": "0.19.8",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.8.tgz",
+      "integrity": "sha512-l7iffQpT2OrZfH2rXIp7/FkmaeZM0vxbxN9KfiCwGYuZqzMg/JdvX26R31Zxn/Pxvsrg3Y9N6XTcnknqDyyv4w==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -3003,28 +3213,28 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.18.20",
-        "@esbuild/android-arm64": "0.18.20",
-        "@esbuild/android-x64": "0.18.20",
-        "@esbuild/darwin-arm64": "0.18.20",
-        "@esbuild/darwin-x64": "0.18.20",
-        "@esbuild/freebsd-arm64": "0.18.20",
-        "@esbuild/freebsd-x64": "0.18.20",
-        "@esbuild/linux-arm": "0.18.20",
-        "@esbuild/linux-arm64": "0.18.20",
-        "@esbuild/linux-ia32": "0.18.20",
-        "@esbuild/linux-loong64": "0.18.20",
-        "@esbuild/linux-mips64el": "0.18.20",
-        "@esbuild/linux-ppc64": "0.18.20",
-        "@esbuild/linux-riscv64": "0.18.20",
-        "@esbuild/linux-s390x": "0.18.20",
-        "@esbuild/linux-x64": "0.18.20",
-        "@esbuild/netbsd-x64": "0.18.20",
-        "@esbuild/openbsd-x64": "0.18.20",
-        "@esbuild/sunos-x64": "0.18.20",
-        "@esbuild/win32-arm64": "0.18.20",
-        "@esbuild/win32-ia32": "0.18.20",
-        "@esbuild/win32-x64": "0.18.20"
+        "@esbuild/android-arm": "0.19.8",
+        "@esbuild/android-arm64": "0.19.8",
+        "@esbuild/android-x64": "0.19.8",
+        "@esbuild/darwin-arm64": "0.19.8",
+        "@esbuild/darwin-x64": "0.19.8",
+        "@esbuild/freebsd-arm64": "0.19.8",
+        "@esbuild/freebsd-x64": "0.19.8",
+        "@esbuild/linux-arm": "0.19.8",
+        "@esbuild/linux-arm64": "0.19.8",
+        "@esbuild/linux-ia32": "0.19.8",
+        "@esbuild/linux-loong64": "0.19.8",
+        "@esbuild/linux-mips64el": "0.19.8",
+        "@esbuild/linux-ppc64": "0.19.8",
+        "@esbuild/linux-riscv64": "0.19.8",
+        "@esbuild/linux-s390x": "0.19.8",
+        "@esbuild/linux-x64": "0.19.8",
+        "@esbuild/netbsd-x64": "0.19.8",
+        "@esbuild/openbsd-x64": "0.19.8",
+        "@esbuild/sunos-x64": "0.19.8",
+        "@esbuild/win32-arm64": "0.19.8",
+        "@esbuild/win32-ia32": "0.19.8",
+        "@esbuild/win32-x64": "0.19.8"
       }
     },
     "node_modules/escalade": {
@@ -3038,7 +3248,7 @@
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "dev": true,
       "engines": {
@@ -3046,15 +3256,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.53.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.53.0.tgz",
-      "integrity": "sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.55.0.tgz",
+      "integrity": "sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.3",
-        "@eslint/js": "8.53.0",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.55.0",
         "@humanwhocodes/config-array": "^0.11.13",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -3101,9 +3311,9 @@
       }
     },
     "node_modules/eslint-config-prettier": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmmirror.com/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
-      "integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
       "dev": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
@@ -3128,9 +3338,9 @@
       }
     },
     "node_modules/eslint-config-standard-with-typescript": {
-      "version": "39.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-39.1.1.tgz",
-      "integrity": "sha512-t6B5Ep8E4I18uuoYeYxINyqcXb2UbC0SOOTxRtBSt2JUs+EzeXbfe2oaiPs71AIdnoWhXDO2fYOHz8df3kV84A==",
+      "version": "40.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-40.0.0.tgz",
+      "integrity": "sha512-GXUJcwIXiTQaS3H4etv8a1lejVVdZYaxZNz3g7vt6GoJosQqMTurbmSC4FVGyHiGT/d1TjFr3+47A3xsHhsG+Q==",
       "dev": true,
       "dependencies": {
         "@typescript-eslint/parser": "^6.4.0",
@@ -3373,9 +3583,9 @@
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.4.tgz",
-      "integrity": "sha512-eD83+65e8YPVg6603Om2iCIwcQJf/y7++MWm4tACtEswFLYMwxwVWAfwN+e19f5Ad/FOyyNg9Dfi5lXhH3Y3rA==",
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.5.tgz",
+      "integrity": "sha512-D53FYKJa+fDmZMtriODxvhwrO+IOqrxoEo21gMA0sjHdU6dPVH4OhyFip9ypl8HOF5RV5KdTo+rBQLvnY2cO8w==",
       "dev": true,
       "peerDependencies": {
         "eslint": ">=7"
@@ -3595,9 +3805,9 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.1.tgz",
-      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -3998,7 +4208,7 @@
     },
     "node_modules/has-flag": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "dev": true,
       "engines": {
@@ -4090,15 +4300,15 @@
       "peer": true
     },
     "node_modules/html-encoding-sniffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
       "dev": true,
       "dependencies": {
-        "whatwg-encoding": "^2.0.0"
+        "whatwg-encoding": "^3.1.1"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/html-tags": {
@@ -4112,30 +4322,29 @@
       }
     },
     "node_modules/http-proxy-agent": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmmirror.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
+      "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
       "dev": true,
       "dependencies": {
-        "@tootallnate/once": "2",
-        "agent-base": "6",
-        "debug": "4"
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14"
       }
     },
     "node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==",
       "dev": true,
       "dependencies": {
-        "agent-base": "6",
+        "agent-base": "^7.0.2",
         "debug": "4"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14"
       }
     },
     "node_modules/human-signals": {
@@ -4149,7 +4358,7 @@
     },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
-      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "dependencies": {
@@ -4595,40 +4804,38 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "22.1.0",
-      "resolved": "https://registry.npmmirror.com/jsdom/-/jsdom-22.1.0.tgz",
-      "integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
+      "version": "23.0.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-23.0.1.tgz",
+      "integrity": "sha512-2i27vgvlUsGEBO9+/kJQRbtqtm+191b5zAZrU/UezVmnC2dlDAFLgDYJvAEi94T4kjsRKkezEtLQTgsNEsW2lQ==",
       "dev": true,
       "dependencies": {
-        "abab": "^2.0.6",
         "cssstyle": "^3.0.0",
-        "data-urls": "^4.0.0",
+        "data-urls": "^5.0.0",
         "decimal.js": "^10.4.3",
-        "domexception": "^4.0.0",
         "form-data": "^4.0.0",
-        "html-encoding-sniffer": "^3.0.0",
-        "http-proxy-agent": "^5.0.0",
-        "https-proxy-agent": "^5.0.1",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.2",
         "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.4",
+        "nwsapi": "^2.2.7",
         "parse5": "^7.1.2",
         "rrweb-cssom": "^0.6.0",
         "saxes": "^6.0.0",
         "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.1.2",
-        "w3c-xmlserializer": "^4.0.0",
+        "tough-cookie": "^4.1.3",
+        "w3c-xmlserializer": "^5.0.0",
         "webidl-conversions": "^7.0.0",
-        "whatwg-encoding": "^2.0.0",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^12.0.1",
-        "ws": "^8.13.0",
-        "xml-name-validator": "^4.0.0"
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0",
+        "ws": "^8.14.2",
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "canvas": "^2.5.0"
+        "canvas": "^2.11.2"
       },
       "peerDependenciesMeta": {
         "canvas": {
@@ -5036,10 +5243,16 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -5425,12 +5638,26 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+      "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -5496,15 +5723,18 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.0.3.tgz",
-      "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz",
+      "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
       "engines": {
         "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/prettier-linter-helpers": {
@@ -5531,9 +5761,9 @@
       "dev": true
     },
     "node_modules/punycode": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz",
-      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -5601,9 +5831,9 @@
       }
     },
     "node_modules/rc-collapse": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmmirror.com/rc-collapse/-/rc-collapse-3.7.1.tgz",
-      "integrity": "sha512-N/7ejyiTf3XElNJBBpxqnZBUuMsQWEOPjB2QkfNvZ/Ca54eAvJXuOD1EGbCWCk2m7v/MSxku7mRpdeaLOCd4Gg==",
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-3.7.2.tgz",
+      "integrity": "sha512-ZRw6ipDyOnfLFySxAiCMdbHtb5ePAsB9mT17PA6y1mRD/W6KHRaZeb5qK/X9xDV1CqgyxMpzw0VdS74PCcUk4A==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -5663,9 +5893,9 @@
       }
     },
     "node_modules/rc-field-form": {
-      "version": "1.40.0",
-      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.40.0.tgz",
-      "integrity": "sha512-OM3N01X2BYFGJDJcwpk9/BBtlwgveE7eh2SQAKIxVCt9KVWlODYJ9ypTHQdxchfDbeJKJKxMBFXlLAmyvlgPHg==",
+      "version": "1.41.0",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.41.0.tgz",
+      "integrity": "sha512-k9AS0wmxfJfusWDP/YXWTpteDNaQ4isJx9UKxx4/e8Dub4spFeZ54/EuN2sYrMRID/+hUznPgVZeg+Gf7XSYCw==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "async-validator": "^4.1.0",
@@ -5680,9 +5910,9 @@
       }
     },
     "node_modules/rc-image": {
-      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-7.3.2.tgz",
-      "integrity": "sha512-ICEF6SWv9YKhDXxy1vrXcmf0TVvEcQWIww5Yg+f+mn7e4oGX7FNP4+FExwMjNO5UHBEuWrigbGhlCgI6yZZ1jg==",
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-7.5.1.tgz",
+      "integrity": "sha512-Z9loECh92SQp0nSipc0MBuf5+yVC05H/pzC+Nf8xw1BKDFUJzUeehYBjaWlxly8VGBZJcTHYri61Fz9ng1G3Ag==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "@rc-component/portal": "^1.0.2",
@@ -5697,9 +5927,9 @@
       }
     },
     "node_modules/rc-input": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.3.5.tgz",
-      "integrity": "sha512-SPPwbTJa5ACHNoDdGZF/70AOqqm1Rir3WleuFBKq+nFby1zvpnzvWsHJgzWOr6uJ0GNt8dTMzBrmVGQJkTXqqQ==",
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.3.6.tgz",
+      "integrity": "sha512-/HjTaKi8/Ts4zNbYaB5oWCquxFyFQO4Co1MnMgoCeGJlpe7k8Eir2HN0a0F9IHDmmo+GYiGgPpz7w/d/krzsJA==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -5809,13 +6039,13 @@
       }
     },
     "node_modules/rc-pagination": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-3.7.0.tgz",
-      "integrity": "sha512-IxSzKapd13L91/195o1TPkKnCNw8gIR25UP1GCW/7c7n/slhld4npu2j2PB9IWjXm4SssaAaSAt2lscYog7wzg==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-4.0.1.tgz",
+      "integrity": "sha512-udrYHGTVXBm5HxE+RYeu9P9o+M7aZSFMwGd2OvYupvSI/wt1jzn2arHb30/nwpJ7tV876BkvJQBvctMH4fDmLw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
-        "classnames": "^2.2.1",
-        "rc-util": "^5.32.2"
+        "classnames": "^2.3.2",
+        "rc-util": "^5.38.0"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -5941,9 +6171,9 @@
       }
     },
     "node_modules/rc-slider": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.4.0.tgz",
-      "integrity": "sha512-ZlpWjFhOlEf0w4Ng31avFBkXNNBj60NAcTPaIoiCxBkJ29wOtHSPMqv9PZeEoqmx64bpJkgK7kPa47HG4LPzww==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.5.0.tgz",
+      "integrity": "sha512-xiYght50cvoODZYI43v3Ylsqiw14+D7ELsgzR40boDZaya1HFa1Etnv9MDkQE8X/UrXAffwv2AcNAhslgYuDTw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
@@ -5989,9 +6219,9 @@
       }
     },
     "node_modules/rc-table": {
-      "version": "7.35.2",
-      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.35.2.tgz",
-      "integrity": "sha512-ZLIZdAEdfen21FI21xt2LDg9chQ7gc5Lpy4nkjWKPDgmQMnH0KJ8JQQzrd3zrEN16xzjiVdHHvRmi1RU8BtgYg==",
+      "version": "7.36.0",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.36.0.tgz",
+      "integrity": "sha512-3xVcdCC5OLeOOhaCg+5Lps2oPreM/GWXmUXWTSX4p6vF7F76ABM4dfPpMJ9Dnf5yGRyh+8pe7FRyhRVnWw2H/w==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/context": "^1.4.0",
@@ -6009,9 +6239,9 @@
       }
     },
     "node_modules/rc-tabs": {
-      "version": "12.13.1",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.13.1.tgz",
-      "integrity": "sha512-83u3l2QkO0UznCzdBLEk9WnNcT+imtmDmMT993sUUEOGnNQAmqOdev0XjeqrcvsAMe9CDpAWDFd7L/RZw+LVJQ==",
+      "version": "12.14.1",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.14.1.tgz",
+      "integrity": "sha512-1xlE7JQNYxD5RwBsM7jf2xSdUrkmTSDFLFEm2gqAgnsRlOGydEzXXNAVTOT6QcgM1G/gCm+AgG+FYPUGb4Hs4g==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
@@ -6030,9 +6260,9 @@
       }
     },
     "node_modules/rc-textarea": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.5.2.tgz",
-      "integrity": "sha512-VVwKYtkp5whZVhP+llX8zM8TtI3dv+BDA0FUbmBMGLaW/tuBJ7Yh35yPabO63V+Bi68xv17eI4hy+/4p2G0gFg==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.5.3.tgz",
+      "integrity": "sha512-oH682ghHx++stFNYrosPRBfwsypywrTXpaD0/5Z8MPkUOnyOQUaY9ueL9tMu6BP1LfsuYQ1VLpg5OtshViLNgA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.1",
@@ -6109,9 +6339,9 @@
       }
     },
     "node_modules/rc-util": {
-      "version": "5.38.0",
-      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.38.0.tgz",
-      "integrity": "sha512-yV/YBNdFn+edyBpBdCqkPE29Su0jWcHNgwx2dJbRqMrMfrUcMJUjCRV+ZPhcvWyKFJ63GzEerPrz9JIVo0zXmA==",
+      "version": "5.38.1",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.38.1.tgz",
+      "integrity": "sha512-e4ZMs7q9XqwTuhIK7zBIVFltUtMSjphuPPQXHoHlzRzNdOwUxDejo0Zls5HYaJfRKNURcsS/ceKVULlhjBrxng==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "react-is": "^18.2.0"
@@ -6177,11 +6407,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz",
-      "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==",
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz",
+      "integrity": "sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==",
       "dependencies": {
-        "@remix-run/router": "1.11.0"
+        "@remix-run/router": "1.13.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6191,12 +6421,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz",
-      "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==",
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.1.tgz",
+      "integrity": "sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==",
       "dependencies": {
-        "@remix-run/router": "1.11.0",
-        "react-router": "6.18.0"
+        "@remix-run/router": "1.13.1",
+        "react-router": "6.20.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6372,17 +6602,20 @@
       "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
-      "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
+      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
-        "functions-have-names": "^1.2.3"
+        "set-function-name": "^2.0.0"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/remove-accents": {
@@ -6412,9 +6645,9 @@
       "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
     },
     "node_modules/resolve": {
-      "version": "1.22.4",
-      "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.4.tgz",
-      "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
@@ -6423,6 +6656,9 @@
       },
       "bin": {
         "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/resolve-from": {
@@ -6457,18 +6693,30 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.28.1",
-      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-3.28.1.tgz",
-      "integrity": "sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==",
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.6.1.tgz",
+      "integrity": "sha512-jZHaZotEHQaHLgKr8JnQiDT1rmatjgKlMekyksz+yk9jt/8z9quNjnKNRoaM0wd9DC2QKXjmWWuDYtM3jfF8pQ==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
       "engines": {
-        "node": ">=14.18.0",
+        "node": ">=18.0.0",
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.6.1",
+        "@rollup/rollup-android-arm64": "4.6.1",
+        "@rollup/rollup-darwin-arm64": "4.6.1",
+        "@rollup/rollup-darwin-x64": "4.6.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.6.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.6.1",
+        "@rollup/rollup-linux-arm64-musl": "4.6.1",
+        "@rollup/rollup-linux-x64-gnu": "4.6.1",
+        "@rollup/rollup-linux-x64-musl": "4.6.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.6.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.6.1",
+        "@rollup/rollup-win32-x64-msvc": "4.6.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -6607,7 +6855,7 @@
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
@@ -6657,9 +6905,9 @@
       }
     },
     "node_modules/scule": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/scule/-/scule-1.0.0.tgz",
-      "integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.1.1.tgz",
+      "integrity": "sha512-sHtm/SsIK9BUBI3EFT/Gnp9VoKfY6QLvlkvAE6YK7454IF8FSgJEAnJpVdSC7K5/pjI5NfxhzBLW2JAfYA/shQ==",
       "dev": true
     },
     "node_modules/semver": {
@@ -6671,6 +6919,20 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-function-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
+      "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6842,17 +7104,20 @@
       }
     },
     "node_modules/string.prototype.trim": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmmirror.com/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
-      "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
+      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trimend": {
@@ -7061,7 +7326,7 @@
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
       "dev": true,
       "dependencies": {
@@ -7251,15 +7516,15 @@
       }
     },
     "node_modules/tr46": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmmirror.com/tr46/-/tr46-4.1.1.tgz",
-      "integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+      "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
       "dev": true,
       "dependencies": {
-        "punycode": "^2.3.0"
+        "punycode": "^2.3.1"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/trim-newlines": {
@@ -7393,9 +7658,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz",
+      "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -7430,22 +7695,22 @@
       "dev": true
     },
     "node_modules/unimport": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.4.0.tgz",
-      "integrity": "sha512-M/lfFEgufIT156QAr/jWHLUn55kEmxBBiQsMxvRSIbquwmeJEyQYgshHDEvQDWlSJrVOOTAgnJ3FvlsrpGkanA==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.6.0.tgz",
+      "integrity": "sha512-yXW3Z30yk1vX8fxO8uHlq9wY9K+L56LHp4Hlbv8i7tW+NENSOv8AaFJUPtOQchxlT7/JBAzCtkrBtcVjKIr1VQ==",
       "dev": true,
       "dependencies": {
-        "@rollup/pluginutils": "^5.0.4",
+        "@rollup/pluginutils": "^5.0.5",
         "escape-string-regexp": "^5.0.0",
-        "fast-glob": "^3.3.1",
-        "local-pkg": "^0.4.3",
-        "magic-string": "^0.30.3",
+        "fast-glob": "^3.3.2",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.5",
         "mlly": "^1.4.2",
         "pathe": "^1.1.1",
         "pkg-types": "^1.0.3",
-        "scule": "^1.0.0",
+        "scule": "^1.1.0",
         "strip-literal": "^1.3.0",
-        "unplugin": "^1.5.0"
+        "unplugin": "^1.5.1"
       }
     },
     "node_modules/unimport/node_modules/escape-string-regexp": {
@@ -7460,18 +7725,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/unimport/node_modules/local-pkg": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
-      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/universalify/-/universalify-0.2.0.tgz",
@@ -7482,31 +7735,31 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.5.0.tgz",
-      "integrity": "sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.5.1.tgz",
+      "integrity": "sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.10.0",
+        "acorn": "^8.11.2",
         "chokidar": "^3.5.3",
         "webpack-sources": "^3.2.3",
-        "webpack-virtual-modules": "^0.5.0"
+        "webpack-virtual-modules": "^0.6.0"
       }
     },
     "node_modules/unplugin-auto-import": {
-      "version": "0.16.7",
-      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.16.7.tgz",
-      "integrity": "sha512-w7XmnRlchq6YUFJVFGSvG1T/6j8GrdYN6Em9Wf0Ye+HXgD/22kont+WnuCAA0UaUoxtuvRR1u/mXKy63g/hfqQ==",
+      "version": "0.17.2",
+      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.17.2.tgz",
+      "integrity": "sha512-Eu/xWI6SH4jTWXvzOfXQWAxRtiz/gMObm7wXtgMj7wBjHQKLgHTmHd4R4oha87KYGah1aKMqiqDeAxiPmfSoTg==",
       "dev": true,
       "dependencies": {
         "@antfu/utils": "^0.7.6",
-        "@rollup/pluginutils": "^5.0.5",
-        "fast-glob": "^3.3.1",
+        "@rollup/pluginutils": "^5.1.0",
+        "fast-glob": "^3.3.2",
         "local-pkg": "^0.5.0",
         "magic-string": "^0.30.5",
         "minimatch": "^9.0.3",
-        "unimport": "^3.4.0",
-        "unplugin": "^1.5.0"
+        "unimport": "^3.6.0",
+        "unplugin": "^1.5.1"
       },
       "engines": {
         "node": ">=14"
@@ -7549,18 +7802,18 @@
       }
     },
     "node_modules/unplugin-icons": {
-      "version": "0.17.3",
-      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.17.3.tgz",
-      "integrity": "sha512-uvopA4I6QYWYpwAyRvG/4NNvR1Cd4GnF/mtOkybgP2YPkHjRX02l/ALm20VUla31Jt9eZHxHyODtNf/Upx5uaw==",
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.18.1.tgz",
+      "integrity": "sha512-WzKu/eoq74YC7vyEAGsFebkRzsZrRkR4FUzLU6gbpfa7WRaVVpQS2n7LSxE1iRUN0scKL5b9bq+i0wucR+ttFQ==",
       "dev": true,
       "dependencies": {
-        "@antfu/install-pkg": "^0.1.1",
+        "@antfu/install-pkg": "^0.3.0",
         "@antfu/utils": "^0.7.6",
-        "@iconify/utils": "^2.1.11",
+        "@iconify/utils": "^2.1.12",
         "debug": "^4.3.4",
         "kolorist": "^1.8.0",
         "local-pkg": "^0.5.0",
-        "unplugin": "^1.5.0"
+        "unplugin": "^1.5.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -7660,29 +7913,29 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
-      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.5.tgz",
+      "integrity": "sha512-OekeWqR9Ls56f3zd4CaxzbbS11gqYkEiBtnWFFgYR2WV8oPJRRKq0mpskYy/XaoCL3L7VINDhqqOMNDiYdGvGg==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.18.10",
-        "postcss": "^8.4.27",
-        "rollup": "^3.27.1"
+        "esbuild": "^0.19.3",
+        "postcss": "^8.4.32",
+        "rollup": "^4.2.0"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^14.18.0 || >=16.0.0"
+        "node": "^18.0.0 || >=20.0.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
       },
       "optionalDependencies": {
-        "fsevents": "~2.3.2"
+        "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": ">= 14",
+        "@types/node": "^18.0.0 || >=20.0.0",
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
@@ -7715,20 +7968,20 @@
       }
     },
     "node_modules/w3c-xmlserializer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
       "dev": true,
       "dependencies": {
-        "xml-name-validator": "^4.0.0"
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
-      "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
       "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
       "dev": true,
       "engines": {
@@ -7745,43 +7998,43 @@
       }
     },
     "node_modules/webpack-virtual-modules": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
-      "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
+      "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
       "dev": true
     },
     "node_modules/whatwg-encoding": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
       "dev": true,
       "dependencies": {
         "iconv-lite": "0.6.3"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/whatwg-mimetype": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
       "dev": true,
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/whatwg-url": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-12.0.1.tgz",
-      "integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+      "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
       "dev": true,
       "dependencies": {
-        "tr46": "^4.1.1",
+        "tr46": "^5.0.0",
         "webidl-conversions": "^7.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/which": {
@@ -7849,9 +8102,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "version": "8.14.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
+      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
@@ -7870,12 +8123,12 @@
       }
     },
     "node_modules/xml-name-validator": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
       "dev": true,
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/xmlchars": {
diff --git a/package.json b/package.json
index 1652e04..ae0c3f6 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "antd": "^5.11.0",
-    "axios": "^1.6.1",
+    "antd": "^5.12.1",
+    "axios": "^1.6.2",
     "dayjs": "^1.11.10",
     "jwt-decode": "^4.0.0",
     "localforage": "^1.10.0",
@@ -25,35 +25,35 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.18.0",
-    "react-router-dom": "^6.18.0"
+    "react-router": "^6.20.1",
+    "react-router-dom": "^6.20.1"
   },
   "devDependencies": {
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@types/jsdom": "^21.1.5",
-    "@types/lodash": "^4.14.201",
-    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react": "^4.1.1",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-config-standard-with-typescript": "^39.1.1",
+    "@types/jsdom": "^21.1.6",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.10.3",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard-with-typescript": "^40.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
-    "jsdom": "^22.1.0",
-    "prettier": "^3.0.3",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.1.0",
     "sass": "^1.69.5",
     "stylelint-config-prettier": "^9.0.5",
-    "typescript": "^5.2.2",
-    "unplugin-auto-import": "^0.16.7",
-    "unplugin-icons": "^0.17.3",
-    "vite": "^4.5.0"
+    "typescript": "^5.3.2",
+    "unplugin-auto-import": "^0.17.2",
+    "unplugin-icons": "^0.18.1",
+    "vite": "^5.0.5"
   }
 }

From eb264e2b8598c9a680e68fcee3bc4260690bb338 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 6 Dec 2023 18:30:10 +0800
Subject: [PATCH 112/307] Add software and hardware statistics

---
 package-lock.json                         | 1089 +++++++++++++++++++--
 package.json                              |    1 +
 src/assets/css/pages/system/index.scss    |   57 ++
 src/assets/css/pages/system/settings.scss |    1 +
 src/assets/svg/chart.svg                  |    1 +
 src/assets/svg/hardware.svg               |    1 +
 src/assets/svg/software.svg               |    1 +
 src/assets/svg/system.svg                 |    1 +
 src/components/common/LoadingMask.tsx     |    3 +-
 src/components/common/Permission.tsx      |    2 +-
 src/constants/urls.constants.ts           |    3 +
 src/global.d.ts                           |   27 +
 src/pages/system/Settings.tsx             |    4 +-
 src/pages/system/index.tsx                |  210 +++-
 src/router/system.tsx                     |    4 +-
 src/services/system.tsx                   |   10 +-
 16 files changed, 1310 insertions(+), 105 deletions(-)
 create mode 100644 src/assets/css/pages/system/index.scss
 create mode 100644 src/assets/svg/chart.svg
 create mode 100644 src/assets/svg/hardware.svg
 create mode 100644 src/assets/svg/software.svg
 create mode 100644 src/assets/svg/system.svg

diff --git a/package-lock.json b/package-lock.json
index a880d38..055c321 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "fatweb-ui",
       "version": "0.0.0",
       "dependencies": {
+        "@ant-design/charts": "^2.0.0-beta.0",
         "@ant-design/icons": "^5.2.6",
         "antd": "^5.12.1",
         "axios": "^1.6.2",
@@ -73,6 +74,28 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@ant-design/charts": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/charts/-/charts-2.0.2.tgz",
+      "integrity": "sha512-am6vjbWoix/NF42eNdgMjhspBcGnspre3ZZDofPLs3QRl695DMWhe9G+AUWTn+vEgmND5s/LwclbNyn/pJNYVg==",
+      "dependencies": {
+        "@ant-design/plots": "2.0.3"
+      },
+      "peerDependencies": {
+        "lodash-es": "^4.17.21",
+        "react": ">=16.8.4",
+        "react-dom": ">=16.8.4"
+      }
+    },
+    "node_modules/@ant-design/charts-util": {
+      "version": "0.0.1-alpha.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/charts-util/-/charts-util-0.0.1-alpha.0.tgz",
+      "integrity": "sha512-ggaeLhENcOa37Cx+81+IiQ6X9yc/DJFkM/vQ4u+5JXJheR7Sm1YlTjyAc24aO7WqFf7pbdSewDLMBXyYyI1/5Q==",
+      "peerDependencies": {
+        "react": ">=16.8.4",
+        "react-dom": ">=16.8.4"
+      }
+    },
     "node_modules/@ant-design/colors": {
       "version": "7.0.0",
       "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-7.0.0.tgz",
@@ -123,6 +146,21 @@
       "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
       "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
     },
+    "node_modules/@ant-design/plots": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@ant-design/plots/-/plots-2.0.3.tgz",
+      "integrity": "sha512-ZHHp3jGr6VedkMJvuheUC+d7s/I/wMg8+QPTPrgkpYQcv5KvSfvcPRtwwLS87wyuPUVxInM65ZNA6Kcxum6+4A==",
+      "dependencies": {
+        "@ant-design/charts-util": "0.0.1-alpha.0",
+        "@antv/event-emitter": "^0.1.3",
+        "@antv/g2": "^5.1.9"
+      },
+      "peerDependencies": {
+        "lodash-es": "^4.17.21",
+        "react": ">=16.8.4",
+        "react-dom": ">=16.8.4"
+      }
+    },
     "node_modules/@ant-design/react-slick": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@ant-design/react-slick/-/react-slick-1.0.2.tgz",
@@ -212,6 +250,273 @@
       "integrity": "sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==",
       "dev": true
     },
+    "node_modules/@antv/component": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/@antv/component/-/component-1.0.0-beta.2.tgz",
+      "integrity": "sha512-WQPgnoLsvVOoHXGaQWKitD38mF1olP+IqoXYARfwCuNEMMDMtNqdUbMZrU/P3ypmz2iEbqdVEOjagL9Aebk/Rw==",
+      "dependencies": {
+        "@antv/g": "^5.15.15",
+        "@antv/scale": "^0.4.3",
+        "@antv/util": "^3.3.5",
+        "svg-path-parser": "^1.1.0"
+      },
+      "peerDependencies": {
+        "@antv/g": "^5.14.1"
+      }
+    },
+    "node_modules/@antv/coord": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@antv/coord/-/coord-0.4.7.tgz",
+      "integrity": "sha512-UTbrMLhwJUkKzqJx5KFnSRpU3BqrdLORJbwUbHK2zHSCT3q3bjcFA//ZYLVfIlwqFDXp/hzfMyRtp0c77A9ZVA==",
+      "dependencies": {
+        "@antv/scale": "^0.4.12",
+        "@antv/util": "^2.0.13",
+        "gl-matrix": "^3.4.3"
+      }
+    },
+    "node_modules/@antv/coord/node_modules/@antv/util": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@antv/util/-/util-2.0.17.tgz",
+      "integrity": "sha512-o6I9hi5CIUvLGDhth0RxNSFDRwXeywmt6ExR4+RmVAzIi48ps6HUy+svxOCayvrPBN37uE6TAc2KDofRo0nK9Q==",
+      "dependencies": {
+        "csstype": "^3.0.8",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/event-emitter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@antv/event-emitter/-/event-emitter-0.1.3.tgz",
+      "integrity": "sha512-4ddpsiHN9Pd4UIlWuKVK1C4IiZIdbwQvy9i7DUSI3xNJ89FPUFt8lxDYj8GzzfdllV0NkJTRxnG+FvLk0llidg=="
+    },
+    "node_modules/@antv/g": {
+      "version": "5.18.22",
+      "resolved": "https://registry.npmjs.org/@antv/g/-/g-5.18.22.tgz",
+      "integrity": "sha512-l6ttQEy4413F6ONFq3m0GmdS3ge5ZTSBp50G7FmuCifoI2gIAtBiuI2IohdhhchwYIMdNN4PC+iJ4bedor3kWw==",
+      "dependencies": {
+        "@antv/g-camera-api": "1.2.20",
+        "@antv/g-dom-mutation-observer-api": "1.2.19",
+        "@antv/g-lite": "1.2.19",
+        "@antv/g-web-animations-api": "1.2.20"
+      }
+    },
+    "node_modules/@antv/g-camera-api": {
+      "version": "1.2.20",
+      "resolved": "https://registry.npmjs.org/@antv/g-camera-api/-/g-camera-api-1.2.20.tgz",
+      "integrity": "sha512-HapY48zFzDt43A3Z34kogApshwmUxQiXJKQ8XwB0UGzLc6ndMKGYx9tyXdMuozSqIQZ0AT5qasujYuu4h+6m7g==",
+      "dependencies": {
+        "@antv/g-lite": "1.2.19",
+        "@antv/util": "^3.3.4",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-canvas": {
+      "version": "1.11.24",
+      "resolved": "https://registry.npmjs.org/@antv/g-canvas/-/g-canvas-1.11.24.tgz",
+      "integrity": "sha512-BEgYZNN7ZXV3l4acZ/d3FoP+EBPeB/fQPInA+6iRf4gBfTsH/fSKNbqvHqV00hgtLHT/u3z16WyP7jcMH1vgHA==",
+      "dependencies": {
+        "@antv/g-lite": "1.2.19",
+        "@antv/g-plugin-canvas-path-generator": "1.3.19",
+        "@antv/g-plugin-canvas-picker": "1.10.21",
+        "@antv/g-plugin-canvas-renderer": "1.9.21",
+        "@antv/g-plugin-dom-interaction": "1.9.19",
+        "@antv/g-plugin-html-renderer": "1.9.22",
+        "@antv/g-plugin-image-loader": "1.3.19",
+        "@antv/util": "^3.3.4",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-dom-mutation-observer-api": {
+      "version": "1.2.19",
+      "resolved": "https://registry.npmjs.org/@antv/g-dom-mutation-observer-api/-/g-dom-mutation-observer-api-1.2.19.tgz",
+      "integrity": "sha512-sBrwUIkcixEQIr1hhoRfCrZ80m6aNl/VbI0PhRGLDlkJRuoLd9pLn1uSQI042N7M5X7oLW4F9tbN1Aw3ahjT+Q==",
+      "dependencies": {
+        "@antv/g-lite": "1.2.19"
+      }
+    },
+    "node_modules/@antv/g-lite": {
+      "version": "1.2.19",
+      "resolved": "https://registry.npmjs.org/@antv/g-lite/-/g-lite-1.2.19.tgz",
+      "integrity": "sha512-eHFkha7smINzzPCZ2znh10Fx47B7wGf9HM8I6srL5WJskgDYc7nQ2fs/azJcwoFdWxJLar3hugWi8azYkRTZNA==",
+      "dependencies": {
+        "@antv/g-math": "2.0.2",
+        "@antv/util": "^3.3.4",
+        "d3-color": "^1.4.0",
+        "eventemitter3": "^5.0.1",
+        "gl-matrix": "^3.4.3",
+        "rbush": "^3.0.1",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-math": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@antv/g-math/-/g-math-2.0.2.tgz",
+      "integrity": "sha512-uqGU1C+70orjeSUoIzD3TuXjL5dRQCIyjZrBrTmm0FWd6VQJMWHyG5ypuZ2lMiI5MrRajVSE1w+3J4hiNBYSJg==",
+      "dependencies": {
+        "@antv/util": "^3.3.4",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-canvas-path-generator": {
+      "version": "1.3.19",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-canvas-path-generator/-/g-plugin-canvas-path-generator-1.3.19.tgz",
+      "integrity": "sha512-fJTtx1Th8JHaaShrfNdU9fmasR+u6qH2P6ItUnJS9Yp8d+/Q+yPVPC0YOgI/d9dMpl6wcdcRjSkIvm1upXH8Kw==",
+      "dependencies": {
+        "@antv/g-lite": "1.2.19",
+        "@antv/g-math": "2.0.2",
+        "@antv/util": "^3.3.4",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-canvas-picker": {
+      "version": "1.10.21",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-canvas-picker/-/g-plugin-canvas-picker-1.10.21.tgz",
+      "integrity": "sha512-6Vt21POTJ8MO3VrGFyOEInDgGAPOe9HYhod67R8Q6yG3iKbuWCNeqNP5V5po5lNF5joFRfw08Bp3rY3VdJqZNg==",
+      "dependencies": {
+        "@antv/g-lite": "1.2.19",
+        "@antv/g-math": "2.0.2",
+        "@antv/g-plugin-canvas-path-generator": "1.3.19",
+        "@antv/g-plugin-canvas-renderer": "1.9.21",
+        "@antv/util": "^3.3.4",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-canvas-renderer": {
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-canvas-renderer/-/g-plugin-canvas-renderer-1.9.21.tgz",
+      "integrity": "sha512-XvV0zhDQUOdhY6p1LjQ9oNX80rc0AODjx4deEflGShSSX+lRtlxf3ovZEeeWA2qV7EGint3BsywZiyv9/nf66A==",
+      "dependencies": {
+        "@antv/g-lite": "1.2.19",
+        "@antv/g-math": "2.0.2",
+        "@antv/g-plugin-canvas-path-generator": "1.3.19",
+        "@antv/g-plugin-image-loader": "1.3.19",
+        "@antv/util": "^3.3.4",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-dom-interaction": {
+      "version": "1.9.19",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-dom-interaction/-/g-plugin-dom-interaction-1.9.19.tgz",
+      "integrity": "sha512-4owDqeRLGwImB2FM0sW0g1Yw1GQSqALHBJVlyWRbJy6o64EgDOrKvNzs7oeL2rqzvGZSLIVeJPxJrJ2koEYymw==",
+      "dependencies": {
+        "@antv/g-lite": "1.2.19",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-dragndrop": {
+      "version": "1.8.19",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-dragndrop/-/g-plugin-dragndrop-1.8.19.tgz",
+      "integrity": "sha512-dLmOXxQjnsdoEVa0FSFELuVqFHdaCVqDiTwIwrde9xSpsRHkDamyBxnihvn18aCptuX9Gwz/D340xXJNMGgjjQ==",
+      "dependencies": {
+        "@antv/g-lite": "1.2.19",
+        "@antv/util": "^3.3.4",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-html-renderer": {
+      "version": "1.9.22",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-html-renderer/-/g-plugin-html-renderer-1.9.22.tgz",
+      "integrity": "sha512-+vGFscjEa6yWxJzqPOmkGL5WjrfT0jDlRBzsF1UczeMNEM8zFQu5/VXL8LlCDOnOTJEo3UpkzrUT0fQe4mHaAA==",
+      "dependencies": {
+        "@antv/g-lite": "1.2.19",
+        "@antv/util": "^3.3.4",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-image-loader": {
+      "version": "1.3.19",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-image-loader/-/g-plugin-image-loader-1.3.19.tgz",
+      "integrity": "sha512-82YBFax1DeNY8S8FsudlkuxTcg/6LBnHdp2vHHvZWDCmCP0BU0+neRQMIqC2b13mn+7zRiGXg0DllwnJEWBZ8g==",
+      "dependencies": {
+        "@antv/g-lite": "1.2.19",
+        "@antv/util": "^3.3.4",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-web-animations-api": {
+      "version": "1.2.20",
+      "resolved": "https://registry.npmjs.org/@antv/g-web-animations-api/-/g-web-animations-api-1.2.20.tgz",
+      "integrity": "sha512-Hs0zJUs2lMSL9BoRnOMsXt3eGuLr0yiETGDXDhv858YS4t0Dw+CHmGUct+pNIaOK/OgF1s9xtmJjRITXntWgpg==",
+      "dependencies": {
+        "@antv/g-lite": "1.2.19",
+        "@antv/util": "^3.3.4",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g2": {
+      "version": "5.1.10",
+      "resolved": "https://registry.npmjs.org/@antv/g2/-/g2-5.1.10.tgz",
+      "integrity": "sha512-Htw1Hlexpz7yFeslTH+4FnRsVayu+TrNarkZaMzQvqJ+IpVMmdflIMj+brFIFEgBe71zKjzxx6X/OcCtFww6Sg==",
+      "dependencies": {
+        "@antv/component": "1.0.0-beta.2",
+        "@antv/coord": "^0.4.6",
+        "@antv/event-emitter": "^0.1.3",
+        "@antv/g": "^5.18.19",
+        "@antv/g-canvas": "^1.11.22",
+        "@antv/g-plugin-dragndrop": "^1.8.17",
+        "@antv/path-util": "^3.0.1",
+        "@antv/scale": "^0.4.12",
+        "@antv/util": "^3.3.5",
+        "d3-array": "^3.2.4",
+        "d3-dsv": "^3.0.1",
+        "d3-force": "^3.0.0",
+        "d3-format": "^3.1.0",
+        "d3-geo": "^3.1.0",
+        "d3-hierarchy": "^3.1.2",
+        "d3-path": "^3.1.0",
+        "d3-scale-chromatic": "^3.0.0",
+        "d3-shape": "^3.2.0",
+        "d3-voronoi": "^1.1.4",
+        "flru": "^1.0.2",
+        "fmin": "^0.0.2",
+        "pdfast": "^0.2.0"
+      }
+    },
+    "node_modules/@antv/path-util": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@antv/path-util/-/path-util-3.0.1.tgz",
+      "integrity": "sha512-tpvAzMpF9Qm6ik2YSMqICNU5tco5POOW7S4XoxZAI/B0L26adU+Md/SmO0BBo2SpuywKvzPH3hPT3xmoyhr04Q==",
+      "dependencies": {
+        "gl-matrix": "^3.1.0",
+        "lodash-es": "^4.17.21",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/scale": {
+      "version": "0.4.13",
+      "resolved": "https://registry.npmjs.org/@antv/scale/-/scale-0.4.13.tgz",
+      "integrity": "sha512-aWOXZdvkHQjEOMWmDBJF6nja30Y38nC5WTtx3fzX4INqfqYLX9u/fcZfElsjFzryewh2qveO+7L0rq8ugutDTw==",
+      "dependencies": {
+        "@antv/util": "^2.0.13",
+        "color-string": "^1.5.5",
+        "fecha": "^4.2.1"
+      }
+    },
+    "node_modules/@antv/scale/node_modules/@antv/util": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@antv/util/-/util-2.0.17.tgz",
+      "integrity": "sha512-o6I9hi5CIUvLGDhth0RxNSFDRwXeywmt6ExR4+RmVAzIi48ps6HUy+svxOCayvrPBN37uE6TAc2KDofRo0nK9Q==",
+      "dependencies": {
+        "csstype": "^3.0.8",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/util": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@antv/util/-/util-3.3.5.tgz",
+      "integrity": "sha512-bVv1loamL/MgUEN9dNt7VKAsghO4Wgb+kzr8B9TgkM5tHgKk++xiTwi3pejIdgU8DDkzcyaRsO+VTOXJt8jLng==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "flru": "^1.0.2",
+        "gl-matrix": "^3.3.0",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
@@ -1227,6 +1532,28 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@ljharb/resumer": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@ljharb/resumer/-/resumer-0.0.1.tgz",
+      "integrity": "sha512-skQiAOrCfO7vRTq53cxznMpks7wS1va95UCidALlOVWqvBAzwPVErwizDwoMqNVMEn1mDq0utxZd02eIrvF1lw==",
+      "dependencies": {
+        "@ljharb/through": "^2.3.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/@ljharb/through": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/@ljharb/through/-/through-2.3.11.tgz",
+      "integrity": "sha512-ccfcIDlogiXNq5KcbAwbaO7lMh3Tm1i3khMPYpxlK8hH/W53zN81KM9coerRLOnTGu3nfXIniAmQbRI9OxbC0w==",
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2254,6 +2581,38 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/align-text": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
+      "integrity": "sha512-GrTZLRpmp6wIC2ztrWW9MjjTgSKccffgFagbNDOX95/dcjEcYZibYTeaOntySQLcdw1ztBoFkviiUvTMbb9MYg==",
+      "dependencies": {
+        "kind-of": "^3.0.2",
+        "longest": "^1.0.1",
+        "repeat-string": "^1.5.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/align-text/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
+      "engines": {
+        "node": ">=0.4.2"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2361,7 +2720,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
       "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "is-array-buffer": "^3.0.1"
@@ -2453,7 +2811,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.1.tgz",
       "integrity": "sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==",
-      "dev": true,
       "dependencies": {
         "array-buffer-byte-length": "^1.0.0",
         "call-bind": "^1.0.2",
@@ -2500,7 +2857,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
       "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -2518,8 +2874,7 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/big-integer": {
       "version": "1.6.51",
@@ -2555,7 +2910,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -2653,7 +3007,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -2708,6 +3061,18 @@
       "integrity": "sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==",
       "dev": true
     },
+    "node_modules/center-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+      "integrity": "sha512-Baz3aNe2gd2LP2qk5U+sDk/m4oSuwSDcBfayTCTBoWpfIGO5XFxPmjILQII4NGiZjD6DoDI6kf7gKaxkf7s3VQ==",
+      "dependencies": {
+        "align-text": "^0.1.3",
+        "lazy-cache": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -2760,6 +3125,16 @@
       "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
       "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
     },
+    "node_modules/cliui": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+      "integrity": "sha512-GIOYRizG+TGoc7Wgc1LiOTLare95R3mzKgoln+Q/lE4ceiYH19gUpl0l0Ffq4lJDEf3FxujMe6IBfOCs7pfqNA==",
+      "dependencies": {
+        "center-align": "^0.1.1",
+        "right-align": "^0.1.1",
+        "wordwrap": "0.0.2"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2772,8 +3147,16 @@
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
     },
     "node_modules/colord": {
       "version": "2.9.3",
@@ -2793,6 +3176,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/compute-scroll-into-view": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
@@ -2801,8 +3192,12 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "node_modules/contour_plot": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/contour_plot/-/contour_plot-0.0.1.tgz",
+      "integrity": "sha512-Nil2HI76Xux6sVGORvhSS8v66m+/h5CwFkBJDO+U5vWaMdNC0yXNCsGDPbzPhvqOEU5koebhdEvD372LI+IyLw=="
     },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
@@ -2895,6 +3290,157 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+    },
     "node_modules/data-urls": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
@@ -2934,8 +3480,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-      "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2970,6 +3514,25 @@
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "dev": true
     },
+    "node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -3008,7 +3571,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
       "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.1",
         "gopd": "^1.0.1",
@@ -3031,7 +3593,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.0.tgz",
       "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
-      "dev": true,
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -3040,6 +3601,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/defined": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3082,6 +3651,17 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/dotignore": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dotignore/-/dotignore-0.1.2.tgz",
+      "integrity": "sha512-UGGGWfSauusaVJC+8fgV+NVvBXkCTmVv7sk6nojDZZvuOUNGUy0Zk4UpHQD6EDjS0jpBwcACvH4eofvyzBcRDw==",
+      "dependencies": {
+        "minimatch": "^3.0.4"
+      },
+      "bin": {
+        "ignored": "bin/ignored"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.508",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.508.tgz",
@@ -3117,7 +3697,6 @@
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/es-abstract/-/es-abstract-1.22.1.tgz",
       "integrity": "sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==",
-      "dev": true,
       "dependencies": {
         "array-buffer-byte-length": "^1.0.0",
         "arraybuffer.prototype.slice": "^1.0.1",
@@ -3167,7 +3746,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
       "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3",
         "has": "^1.0.3",
@@ -3190,7 +3768,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
       "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -3250,7 +3827,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -3772,6 +4348,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+    },
     "node_modules/execa": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/execa/-/execa-7.2.0.tgz",
@@ -3795,8 +4376,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -3863,6 +4443,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fecha": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
+      "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3920,6 +4505,89 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "node_modules/flru": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/flru/-/flru-1.0.2.tgz",
+      "integrity": "sha512-kWyh8ADvHBFz6ua5xYOPnUroZTT/bwWfrCeL0Wj1dzG4/YOmOcfJ99W8dOVyyynJN35rZ9aCOtHChqQovV7yog==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fmin": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/fmin/-/fmin-0.0.2.tgz",
+      "integrity": "sha512-sSi6DzInhl9d8yqssDfGZejChO8d2bAGIpysPsvYsxFe898z89XhCZg6CPNV3nhUhFefeC/AXZK2bAJxlBjN6A==",
+      "dependencies": {
+        "contour_plot": "^0.0.1",
+        "json2module": "^0.0.3",
+        "rollup": "^0.25.8",
+        "tape": "^4.5.1",
+        "uglify-js": "^2.6.2"
+      }
+    },
+    "node_modules/fmin/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fmin/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fmin/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fmin/node_modules/rollup": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.25.8.tgz",
+      "integrity": "sha512-a2S4Bh3bgrdO4BhKr2E4nZkjTvrJ2m2bWjMTzVYtoqSCn0HnuxosXnaJUHrMEziOWr3CzL9GjilQQKcyCQpJoA==",
+      "dependencies": {
+        "chalk": "^1.1.1",
+        "minimist": "^1.2.0",
+        "source-map-support": "^0.3.2"
+      },
+      "bin": {
+        "rollup": "bin/rollup"
+      }
+    },
+    "node_modules/fmin/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fmin/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -3937,7 +4605,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmmirror.com/for-each/-/for-each-0.3.3.tgz",
       "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.3"
       }
@@ -3958,8 +4625,7 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -3979,7 +4645,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3988,7 +4653,6 @@
       "version": "1.1.6",
       "resolved": "https://registry.npmmirror.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
       "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
@@ -4002,8 +4666,7 @@
     "node_modules/functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "dev": true
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
     },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
@@ -4018,7 +4681,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
       "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -4039,7 +4701,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
       "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -4048,11 +4709,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -4131,7 +4796,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/globalthis/-/globalthis-1.0.3.tgz",
       "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
-      "dev": true,
       "dependencies": {
         "define-properties": "^1.1.3"
       },
@@ -4167,7 +4831,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       }
@@ -4192,7 +4855,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -4200,11 +4862,29 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-ansi/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-      "dev": true
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ=="
     },
     "node_modules/has-flag": {
       "version": "3.0.0",
@@ -4219,7 +4899,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.1"
       }
@@ -4228,7 +4907,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.1.tgz",
       "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4237,7 +4915,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4246,7 +4923,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -4258,7 +4934,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
       "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -4360,7 +5035,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -4434,7 +5108,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -4443,8 +5116,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/ini": {
       "version": "1.3.8",
@@ -4457,7 +5129,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/internal-slot/-/internal-slot-1.0.5.tgz",
       "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.0",
         "has": "^1.0.3",
@@ -4467,11 +5138,33 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
       "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.2.0",
@@ -4488,7 +5181,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/is-bigint/-/is-bigint-1.0.4.tgz",
       "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
-      "dev": true,
       "dependencies": {
         "has-bigints": "^1.0.1"
       }
@@ -4509,7 +5201,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
       "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -4518,11 +5209,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.7.tgz",
       "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4531,7 +5226,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -4543,7 +5237,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -4613,7 +5306,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
       "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4631,7 +5323,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/is-number-object/-/is-number-object-1.0.7.tgz",
       "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
-      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -4678,7 +5369,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -4691,7 +5381,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
       "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2"
       }
@@ -4709,7 +5398,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/is-string/-/is-string-1.0.7.tgz",
       "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -4721,7 +5409,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/is-symbol/-/is-symbol-1.0.4.tgz",
       "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -4733,7 +5420,6 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmmirror.com/is-typed-array/-/is-typed-array-1.1.12.tgz",
       "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
-      "dev": true,
       "dependencies": {
         "which-typed-array": "^1.1.11"
       },
@@ -4745,7 +5431,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/is-weakref/-/is-weakref-1.0.2.tgz",
       "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2"
       }
@@ -4777,8 +5462,7 @@
     "node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
     },
     "node_modules/isexe": {
       "version": "2.0.0",
@@ -4879,6 +5563,17 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json2module": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/json2module/-/json2module-0.0.3.tgz",
+      "integrity": "sha512-qYGxqrRrt4GbB8IEOy1jJGypkNsjWoIMlZt4bAsmUScCA507Hbc2p1JOhBzqn45u3PWafUgH2OnzyNU7udO/GA==",
+      "dependencies": {
+        "rw": "^1.3.2"
+      },
+      "bin": {
+        "json2module": "bin/json2module"
+      }
+    },
     "node_modules/json2mq": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/json2mq/-/json2mq-0.2.0.tgz",
@@ -4945,6 +5640,14 @@
       "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
       "dev": true
     },
+    "node_modules/lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha512-RE2g0b5VGZsOCFOCgP7omTRYFqydmZkBwl5oNnQ1lDYC57uyO9KqNnNVxT7COSHTxrRCWVcAVOcbjk+tvh/rgQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz",
@@ -5013,6 +5716,11 @@
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5026,6 +5734,14 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/longest": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
+      "integrity": "sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5187,7 +5903,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -5198,8 +5913,7 @@
     "node_modules/minimist": {
       "version": "1.2.8",
       "resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
     },
     "node_modules/minimist-options": {
       "version": "4.1.0",
@@ -5228,6 +5942,25 @@
         "ufo": "^1.3.0"
       }
     },
+    "node_modules/mock-property": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/mock-property/-/mock-property-1.0.3.tgz",
+      "integrity": "sha512-2emPTb1reeLLYwHxyVx993iYyCHEiRRO+y8NFXFPL5kl5q14sgTK76cXyEKkeKCHeRw35SfdkUJ10Q1KfHuiIQ==",
+      "dependencies": {
+        "define-data-property": "^1.1.1",
+        "functions-have-names": "^1.2.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "hasown": "^2.0.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
@@ -5373,14 +6106,27 @@
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
-      "dev": true
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
+    },
+    "node_modules/object-is": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -5389,7 +6135,6 @@
       "version": "4.1.4",
       "resolved": "https://registry.npmmirror.com/object.assign/-/object.assign-4.1.4.tgz",
       "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -5444,7 +6189,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -5576,7 +6320,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5593,8 +6336,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -5611,6 +6353,11 @@
       "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
       "dev": true
     },
+    "node_modules/pdfast": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/pdfast/-/pdfast-0.2.0.tgz",
+      "integrity": "sha512-cq6TTu6qKSFUHwEahi68k/kqN2mfepjkGrG9Un70cgdRRKLKY6Rf8P8uvP2NvZktaQZNF3YE7agEkLj0vGK9bA=="
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -5799,6 +6546,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
+    "node_modules/rbush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+      "dependencies": {
+        "quickselect": "^2.0.0"
+      }
+    },
     "node_modules/rc-cascader": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.20.0.tgz",
@@ -6605,7 +7365,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
       "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
@@ -6623,6 +7382,14 @@
       "resolved": "https://registry.npmmirror.com/remove-accents/-/remove-accents-0.4.2.tgz",
       "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
     },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -6648,7 +7415,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -6680,6 +7446,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/right-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+      "integrity": "sha512-yqINtL/G7vs2v+dFIZmFUDbnVyFUJFKd6gK22Kgo6R4jfJGFtisKyncWDDULgjfqf4ASQuIQyjJ7XZ+3aWpsAg==",
+      "dependencies": {
+        "align-text": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
@@ -6827,11 +7604,15 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/safe-array-concat": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
       "integrity": "sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.2.0",
@@ -6846,7 +7627,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
       "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.3",
@@ -6856,8 +7636,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
       "version": "1.69.5",
@@ -6923,7 +7702,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
       "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.0.1",
         "functions-have-names": "^1.2.3",
@@ -6958,7 +7736,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -6971,6 +7748,19 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@@ -7038,6 +7828,14 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -7047,6 +7845,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.3.3.tgz",
+      "integrity": "sha512-9O4+y9n64RewmFoKUZ/5Tx9IHIcXM6Q+RTSw6ehnqybUz4a7iwR3Eaw80uLtqqQ5D0C+5H03D4KKGo9PdP33Gg==",
+      "dependencies": {
+        "source-map": "0.1.32"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.1.32",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
+      "integrity": "sha512-htQyLrrRLkQ87Zfrir4/yN+vAUd6DNjVayEjTSHXu29AYQJw57I4/xEL/M6p6E/woPNJwvZt6rVlzc7gFEJccQ==",
+      "dependencies": {
+        "amdefine": ">=0.0.4"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -7107,7 +7924,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
       "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
@@ -7124,7 +7940,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
       "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -7135,7 +7950,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
       "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -7377,7 +8191,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -7388,6 +8201,11 @@
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
       "dev": true
     },
+    "node_modules/svg-path-parser": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/svg-path-parser/-/svg-path-parser-1.1.0.tgz",
+      "integrity": "sha512-jGCUqcQyXpfe38R7RFfhrMyfXcBmpMNJI/B+4CE9/Unkh98UporAc461GTthv+TVDuZXsBx7/WiwJb1Oh4tt4A=="
+    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -7451,6 +8269,35 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/tape": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/tape/-/tape-4.17.0.tgz",
+      "integrity": "sha512-KCuXjYxCZ3ru40dmND+oCLsXyuA8hoseu2SS404Px5ouyS0A99v8X/mdiLqsR5MTAyamMBN7PRwt2Dv3+xGIxw==",
+      "dependencies": {
+        "@ljharb/resumer": "~0.0.1",
+        "@ljharb/through": "~2.3.9",
+        "call-bind": "~1.0.2",
+        "deep-equal": "~1.1.1",
+        "defined": "~1.0.1",
+        "dotignore": "~0.1.2",
+        "for-each": "~0.3.3",
+        "glob": "~7.2.3",
+        "has": "~1.0.3",
+        "inherits": "~2.0.4",
+        "is-regex": "~1.1.4",
+        "minimist": "~1.2.8",
+        "mock-property": "~1.0.0",
+        "object-inspect": "~1.12.3",
+        "resolve": "~1.22.6",
+        "string.prototype.trim": "~1.2.8"
+      },
+      "bin": {
+        "tape": "bin/tape"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -7576,8 +8423,7 @@
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -7605,7 +8451,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
       "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.2.1",
@@ -7619,7 +8464,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
       "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "for-each": "^0.3.3",
@@ -7634,7 +8478,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
       "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
-      "dev": true,
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -7650,7 +8493,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/typed-array-length/-/typed-array-length-1.0.4.tgz",
       "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "for-each": "^0.3.3",
@@ -7676,11 +8518,34 @@
       "integrity": "sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==",
       "dev": true
     },
+    "node_modules/uglify-js": {
+      "version": "2.8.29",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+      "integrity": "sha512-qLq/4y2pjcU3vhlhseXGGJ7VbFO4pBANu0kwl8VCa9KEI0V8VfZIx2Fy3w01iSTA/pGwKZSmu/+I4etLNDdt5w==",
+      "dependencies": {
+        "source-map": "~0.5.1",
+        "yargs": "~3.10.0"
+      },
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      },
+      "optionalDependencies": {
+        "uglify-to-browserify": "~1.0.0"
+      }
+    },
+    "node_modules/uglify-to-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+      "integrity": "sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==",
+      "optional": true
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
       "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-bigints": "^1.0.2",
@@ -8056,7 +8921,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
       "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-      "dev": true,
       "dependencies": {
         "is-bigint": "^1.0.1",
         "is-boolean-object": "^1.1.0",
@@ -8069,7 +8933,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/which-typed-array/-/which-typed-array-1.1.11.tgz",
       "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
-      "dev": true,
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -8081,11 +8944,26 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/window-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+      "integrity": "sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1PXhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/wordwrap": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+      "integrity": "sha512-xSBsCeh+g+dinoBv3GAOWM4LcVVO68wLXRanibtBSdUvkGWQRGeE9P7IwU9EmDDi4jA6L44lz15CGMwdw9N5+Q==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/write-file-atomic": {
       "version": "4.0.2",
@@ -8153,6 +9031,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/yargs": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+      "integrity": "sha512-QFzUah88GAGy9lyDKGBqZdkYApt63rCXYBGYnEP4xDJPXNqXXnBDACnbrXnViV6jRSqAePwrATi2i8mfYm4L1A==",
+      "dependencies": {
+        "camelcase": "^1.0.2",
+        "cliui": "^2.1.0",
+        "decamelize": "^1.0.0",
+        "window-size": "0.1.0"
+      }
+    },
     "node_modules/yargs-parser": {
       "version": "20.2.9",
       "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
@@ -8163,6 +9052,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/yargs/node_modules/camelcase": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+      "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index ae0c3f6..4b29a1f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
+    "@ant-design/charts": "^2.0.0-beta.0",
     "antd": "^5.12.1",
     "axios": "^1.6.2",
     "dayjs": "^1.11.10",
diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss
new file mode 100644
index 0000000..0503caf
--- /dev/null
+++ b/src/assets/css/pages/system/index.scss
@@ -0,0 +1,57 @@
+@use '@/assets/css/constants' as constants;
+
+.root-content {
+  padding: 30px;
+  gap: 20px;
+
+  .root-row {
+    gap: 20px;
+
+    .common-card {
+      padding: 20px;
+      gap: 20px;
+
+      > .head {
+        align-items: center;
+        gap: 5px;
+        color: constants.$main-color;
+
+        .icon {
+          font-size: constants.$SIZE_ICON_MD;
+          flex: 0 0 auto;
+        }
+
+        .title {
+          display: flex;
+          font-size: 1.2em;
+        }
+      }
+
+      .card-content {
+        font-size: 1.1em;
+        padding: 0 10px;
+        gap: 10px;
+
+        .key {
+          flex: 0 0 auto;
+          color: constants.$font-main-color;
+        }
+
+        .value {
+          color: constants.$font-secondary-color;
+          overflow: hidden;
+
+          > * {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        > * {
+          gap: 5px;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.scss
index 7a6cc23..1b1d649 100644
--- a/src/assets/css/pages/system/settings.scss
+++ b/src/assets/css/pages/system/settings.scss
@@ -10,6 +10,7 @@
     .settings-card {
       padding: 20px;
       gap: 20px;
+      color: constants.$main-color;
 
       > .head {
         align-items: center;
diff --git a/src/assets/svg/chart.svg b/src/assets/svg/chart.svg
new file mode 100644
index 0000000..a304276
--- /dev/null
+++ b/src/assets/svg/chart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1000 768c13.2 0 24 10.8 24 24v80c0 13.2-10.8 24-24 24H24c-13.2 0-24-10.8-24-24V152c0-13.2 10.8-24 24-24h80c13.2 0 24 10.8 24 24v616h872zM745.4 319L576 432l-170.6-227.4c-10.2-13.6-31-12.6-39.8 2L192 496v208h768l-179.8-375.6c-6.4-13-22.8-17.4-34.8-9.4z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/hardware.svg b/src/assets/svg/hardware.svg
new file mode 100644
index 0000000..1eb613b
--- /dev/null
+++ b/src/assets/svg/hardware.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M981.333333 533.333333H42.666667l151.68-303.36A85.226667 85.226667 0 0 1 275.626667 170.666667h472.746666c37.12 0 69.973333 23.893333 81.28 59.306666L981.333333 533.333333zM42.666667 597.333333v170.666667c0 47.146667 38.186667 85.333333 85.333333 85.333333h768c47.146667 0 85.333333-38.186667 85.333333-85.333333v-170.666667H42.666667z m778.666666 170.666667h-106.666666c-17.706667 0-32-14.293333-32-32s14.293333-32 32-32h106.666666c17.706667 0 32 14.293333 32 32s-14.293333 32-32 32z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/software.svg b/src/assets/svg/software.svg
new file mode 100644
index 0000000..7a56433
--- /dev/null
+++ b/src/assets/svg/software.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M832 106.666667H192C144.853333 106.666667 106.666667 144.853333 106.666667 192v128h810.666666V192c0-47.146667-38.186667-85.333333-85.333333-85.333333zM106.666667 384v448c0 47.146667 38.186667 85.333333 85.333333 85.333333h640c47.146667 0 85.333333-38.186667 85.333333-85.333333V384H106.666667z m278.613333 338.986667c12.586667 12.586667 12.586667 32.853333 0 45.226666-12.586667 12.586667-32.853333 12.586667-45.226667 0l-105.6-105.6a31.786667 31.786667 0 0 1 0-45.226666l105.6-105.6a31.786667 31.786667 0 0 1 45.226667 0c12.586667 12.586667 12.586667 32.853333 0 45.226666L302.293333 640l82.986667 82.986667z m186.88-212.053334l-57.6 271.36c-3.626667 17.28-20.693333 28.373333-37.973333 24.746667-17.28-3.626667-28.373333-20.693333-24.746667-37.973333l57.6-271.36c3.626667-17.28 20.693333-28.373333 37.973333-24.746667 17.28 3.84 28.373333 20.693333 24.746667 37.973333z m217.386667 151.68l-105.6 105.6c-12.586667 12.586667-32.853333 12.586667-45.226667 0a31.786667 31.786667 0 0 1 0-45.226666L721.706667 640l-82.986667-82.986667a31.786667 31.786667 0 0 1 0-45.226666 31.786667 31.786667 0 0 1 45.226667 0l105.6 105.6c12.586667 12.586667 12.586667 32.64 0 45.226666z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/system.svg b/src/assets/svg/system.svg
new file mode 100644
index 0000000..088fca0
--- /dev/null
+++ b/src/assets/svg/system.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M846.208 435.498667A260.565333 260.565333 0 0 0 781.098667 426.666667V377.429333a21.333333 21.333333 0 0 0-21.333334-21.333333H260.181333a21.333333 21.333333 0 0 0-21.333333 21.333333v306.346667a21.333333 21.333333 0 0 0 21.333333 21.333333h275.072c4.437333 22.229333 12.16 43.349333 22.698667 62.890667H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V256a42.666667 42.666667 0 0 1 42.666666-42.666667h590.208a42.666667 42.666667 0 0 1 42.666667 42.666667v179.498667zM274.261333 315.733333c19.882667 0 36.010667-15.274667 36.010667-34.133333 0-18.858667-16.128-34.133333-36.010667-34.133333-19.925333 0-36.053333 15.274667-36.053333 34.133333 0 18.858667 16.128 34.133333 36.053333 34.133333z m112.597334 0c19.882667 0 36.010667-15.274667 36.010666-34.133333 0-18.858667-16.128-34.133333-36.010666-34.133333-19.925333 0-36.053333 15.274667-36.053334 34.133333 0 18.858667 16.128 34.133333 36.053334 34.133333z m589.653333 307.242667c2.901333 12.202667 3.84 25.386667 4.821333 38.570667 0 12.202667-0.981333 24.405333-3.84 38.528v0.938666a26.325333 26.325333 0 0 1-12.586666 14.08c-0.938667 0.981333-0.938667 0.981333-1.92 0.981334-17.365333 4.693333-31.829333 15.018667-39.552 28.16a63.573333 63.573333 0 0 0-5.802667 49.877333c2.901333 7.509333 0 16.896-6.741333 20.650667-18.346667 15.061333-39.594667 27.306667-64.682667 37.632-1.92 0.938667-4.821333 0.938667-6.741333 0.938666-4.821333 0-9.642667-2.816-13.525334-6.570666-13.482667-13.184-28.928-20.693333-45.354666-20.693334a59.733333 59.733333 0 0 0-45.354667 19.754667 22.4 22.4 0 0 1-15.445333 6.570667h-2.901334c-1.92 0-2.858667-0.938667-3.84-0.938667a178.346667 178.346667 0 0 1-66.56-38.570667c-6.826667-5.632-8.704-14.08-5.845333-20.650666a56.021333 56.021333 0 0 0-5.76-47.957334c-9.642667-16-22.186667-25.386667-39.594667-29.141333h-0.938666a18.048 18.048 0 0 1-14.506667-16 160.64 160.64 0 0 1-3.84-37.589333c0-12.245333 0.981333-24.448 3.84-38.570667v-0.938667a26.325333 26.325333 0 0 1 12.586667-14.08c0.938667-0.981333 0.938667-0.981333 1.92-0.981333 17.365333-4.693333 31.829333-15.018667 39.552-28.16a63.573333 63.573333 0 0 0 5.802666-49.877333 17.578667 17.578667 0 0 1 6.741334-20.650667c18.346667-15.061333 39.594667-27.306667 64.682666-37.632a19.370667 19.370667 0 0 1 21.205334 4.693333c13.525333 13.184 28.970667 20.693333 45.354666 20.693334 18.346667 0 34.773333-6.570667 45.354667-19.754667 6.784-6.570667 14.506667-8.448 21.248-5.632a182.144 182.144 0 0 1 65.621333 38.570667c6.784 5.632 8.704 14.08 5.802667 20.650666-5.802667 16-2.901333 33.877333 5.802667 47.957334 9.642667 16 22.186667 25.386667 39.552 29.141333h0.981333a18.048 18.048 0 0 1 14.464 16zM778.666667 725.333333c37.632 0 67.541333-28.330667 67.541333-64s-29.866667-64-67.541333-64c-37.632 0-67.541333 28.330667-67.541334 64s29.866667 64 67.541334 64z" /></svg>
\ No newline at end of file
diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx
index 8f5cf1c..0107468 100644
--- a/src/components/common/LoadingMask.tsx
+++ b/src/components/common/LoadingMask.tsx
@@ -5,6 +5,7 @@ import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 
 interface LoadingMaskProps extends React.PropsWithChildren {
     hidden?: boolean
+    maskContent?: React.ReactNode
 }
 const LoadingMask: React.FC<LoadingMaskProps> = (props) => {
     const loadingIcon = (
@@ -21,7 +22,7 @@ const LoadingMask: React.FC<LoadingMaskProps> = (props) => {
     ) : (
         <>
             <div className={'loading-mask'}>
-                <AntdSpin indicator={loadingIcon} />
+                {props.maskContent || <AntdSpin indicator={loadingIcon} />}
             </div>
         </>
     )
diff --git a/src/components/common/Permission.tsx b/src/components/common/Permission.tsx
index 811051d..a904354 100644
--- a/src/components/common/Permission.tsx
+++ b/src/components/common/Permission.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { hasPermission } from '@/util/auth.tsx'
+import { hasPermission } from '@/util/auth'
 
 interface PermissionProps extends React.PropsWithChildren {
     operationCode?: string
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index a6c8539..887bdc8 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -11,6 +11,9 @@ export const URL_SYS_GROUP = '/system/group'
 export const URL_SYS_GROUP_LIST = '/system/group/list'
 export const URL_SYS_SETTINGS = '/system/settings'
 export const URL_SYS_SETTINGS_MAIL = `${URL_SYS_SETTINGS}/mail`
+export const URL_SYS_STATISTICS = '/system/statistics'
+export const URL_SYS_STATISTICS_SOFTWARE = `${URL_SYS_STATISTICS}/software`
+export const URL_SYS_STATISTICS_HARDWARE = `${URL_SYS_STATISTICS}/hardware`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/global.d.ts b/src/global.d.ts
index 37e5024..4a7620e 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -322,3 +322,30 @@ interface MailSettingsParam {
 interface MailSendParam {
     to: string
 }
+
+interface SoftwareInfoVo {
+    os: string
+    bitness: number
+    javaVersion: string
+    javaVersionDate: string
+    javaVendor: string
+    javaRuntime: string
+    javaRuntimeVersion: string
+    jvm: string
+    jvmVersion: string
+    jvmInfo: string
+    jvmVendor: string
+    javaClassVersion: string
+    osBootTime: string
+    serverStartupTime: string
+}
+
+interface HardwareInfoVo {
+    cpu: string
+    arch: string
+    is64Bit: boolean
+    cpuPhysicalPackageCount: number
+    cpuPhysicalProcessorCount: number
+    cpuLogicalProcessorCount: number
+    microarchitecture: string
+}
diff --git a/src/pages/system/Settings.tsx b/src/pages/system/Settings.tsx
index f35c57f..5406c5e 100644
--- a/src/pages/system/Settings.tsx
+++ b/src/pages/system/Settings.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/settings.scss'
 import { useUpdatedEffect } from '@/util/hooks'
+import { hasPermission } from '@/util/auth'
 import {
     r_sys_settings_mail_get,
     r_sys_settings_mail_send,
@@ -12,8 +13,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import LoadingMask from '@/components/common/LoadingMask'
-import Permission from '@/components/common/Permission.tsx'
-import { hasPermission } from '@/util/auth.tsx'
+import Permission from '@/components/common/Permission'
 
 interface SettingsCardProps extends React.PropsWithChildren {
     icon: IconComponent
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 52eede3..5f483ab 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -1,7 +1,213 @@
-import React from 'react'
+import React, { useState } from 'react'
+import Icon from '@ant-design/icons'
+// import { DualAxes, DualAxesConfig } from '@ant-design/plots'
+import '@/assets/css/pages/system/index.scss'
+import { useUpdatedEffect } from '@/util/hooks'
+import { utcToLocalTime } from '@/util/datetime'
+import { r_sys_statistics_hardware, r_sys_statistics_software } from '@/services/system'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import LoadingMask from '@/components/common/LoadingMask'
+
+interface CommonCardProps extends React.PropsWithChildren {
+    icon: IconComponent
+    title: string
+    loading?: boolean
+}
+
+const CommonCard: React.FC<CommonCardProps> = (props) => {
+    return (
+        <Card>
+            <FlexBox className={'common-card'}>
+                <FlexBox direction={'horizontal'} className={'head'}>
+                    <Icon component={props.icon} className={'icon'} />
+                    <div className={'title'}>{props.title}</div>
+                </FlexBox>
+                <LoadingMask
+                    hidden={!props.loading}
+                    maskContent={<AntdSkeleton active paragraph={{ rows: 10 }} />}
+                >
+                    {props.children}
+                </LoadingMask>
+            </FlexBox>
+        </Card>
+    )
+}
+
+const SoftwareInfo: React.FC = () => {
+    const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
+
+    useUpdatedEffect(() => {
+        void r_sys_statistics_software().then((res) => {
+            const response = res.data
+            if (response.success) {
+                response.data && setSoftwareInfoData(response.data)
+            } else {
+                void message.error('获取软件信息失败，请稍后重试')
+            }
+        })
+    }, [])
+
+    return (
+        <CommonCard
+            icon={IconFatwebSoftware}
+            title={'软件信息'}
+            loading={softwareInfoData === undefined}
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <FlexBox className={'key'}>
+                    <div>操作系统</div>
+                    <div>位数</div>
+                    <div>Java</div>
+                    <div>Java 供应商</div>
+                    <div>Runtime</div>
+                    <div>JVM</div>
+                    <div>JVM 供应商</div>
+                    <div>操作系统启动时间</div>
+                    <div>后端服务器启动时间</div>
+                </FlexBox>
+                <FlexBox className={'value'}>
+                    <div>{softwareInfoData?.os}</div>
+                    <div>{softwareInfoData?.bitness}</div>
+                    <div>{`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}</div>
+                    <div>{softwareInfoData?.javaVendor}</div>
+                    <div>{`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}</div>
+                    <div>{`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}</div>
+                    <div>{softwareInfoData?.jvmVendor}</div>
+                    <div>
+                        {softwareInfoData?.osBootTime &&
+                            utcToLocalTime(softwareInfoData?.osBootTime)}
+                    </div>
+                    <div>
+                        {softwareInfoData?.serverStartupTime &&
+                            utcToLocalTime(softwareInfoData.serverStartupTime)}
+                    </div>
+                </FlexBox>
+            </FlexBox>
+        </CommonCard>
+    )
+}
+
+const HardwareInfo: React.FC = () => {
+    const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
+
+    useUpdatedEffect(() => {
+        void r_sys_statistics_hardware().then((res) => {
+            const response = res.data
+            if (response.success) {
+                response.data && setHardwareInfoData(response.data)
+            } else {
+                void message.error('获取硬件信息失败，请稍后重试')
+            }
+        })
+    }, [])
+
+    return (
+        <CommonCard
+            icon={IconFatwebHardware}
+            title={'硬件信息'}
+            loading={hardwareInfoData === undefined}
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <FlexBox className={'key'}>
+                    <div>CPU</div>
+                    <div>架构</div>
+                    <div>微架构</div>
+                    <div>64位</div>
+                    <div>CPU 插槽</div>
+                    <div>CPU 内核</div>
+                    <div>CPU 逻辑处理器</div>
+                </FlexBox>
+                <FlexBox className={'value'}>
+                    <div>{hardwareInfoData?.cpu}</div>
+                    <div>{hardwareInfoData?.arch}</div>
+                    <div>{hardwareInfoData?.microarchitecture}</div>
+                    <div>{hardwareInfoData?.is64Bit ? '是' : '否'}</div>
+                    <div>{hardwareInfoData?.cpuPhysicalPackageCount}</div>
+                    <div>{hardwareInfoData?.cpuPhysicalProcessorCount}</div>
+                    <div>{hardwareInfoData?.cpuLogicalProcessorCount}</div>
+                </FlexBox>
+            </FlexBox>
+        </CommonCard>
+    )
+}
 
 const System: React.FC = () => {
-    return <></>
+    /*
+    const dualAxesData = [
+        { year: '1991', value: 3, count: 10 },
+        { year: '1992', value: 4, count: 4 },
+        { year: '1993', value: 3.5, count: 5 },
+        { year: '1994', value: 5, count: 5 },
+        { year: '1995', value: 4.9, count: 4.9 },
+        { year: '1996', value: 6, count: 35 },
+        { year: '1997', value: 7, count: 7 },
+        { year: '1998', value: 9, count: 1 },
+        { year: '1999', value: 13, count: 20 }
+    ]
+
+    const userStatisticsData = [
+        { time: '2023-12-01', type: 'register', number: 23 },
+        { time: '2023-12-02', type: 'register', number: 123 },
+        { time: '2023-12-03', type: 'register', number: 1432 },
+        { time: '2023-12-05', type: 'register', number: 1 },
+        { time: '2023-12-04', type: 'register', number: 234 },
+        { time: '2023-12-06', type: 'register', number: 23 },
+        { time: '2023-12-07', type: 'register', number: 54 },
+        { time: '2023-12-08', type: 'register', number: 87 },
+        { time: '2023-12-09', type: 'register', number: 12 },
+        { time: '2023-12-10', type: 'register', number: 123 },
+        { time: '2023-12-11', type: 'register', number: 20 },
+        { time: '2023-12-01', type: 'login', number: 433 },
+        { time: '2023-12-02', type: 'login', number: 2 },
+        { time: '2023-12-03', type: 'login', number: 34 },
+        { time: '2023-12-05', type: 'login', number: 12 },
+        { time: '2023-12-04', type: 'login', number: 345 },
+        { time: '2023-12-06', type: 'login', number: 121 },
+        { time: '2023-12-07', type: 'login', number: 2 },
+        { time: '2023-12-08', type: 'login', number: 435 },
+        { time: '2023-12-09', type: 'login', number: 1 },
+        { time: '2023-12-10', type: 'login', number: 54 },
+        { time: '2023-12-11', type: 'login', number: 56 }
+    ]
+
+    const dualAxesConfig: DualAxesConfig = {
+        data: userStatisticsData,
+        slider: { x: true },
+        shapeField: 'smooth',
+        xField: 'time',
+        children: [
+            {
+                type: 'line',
+                yField: 'number',
+                colorField: 'type'
+            }
+        ]
+    }
+*/
+
+    return (
+        <>
+            <FitFullScreen>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
+                    <FlexBox className={'root-content'}>
+                        <FlexBox direction={'horizontal'} className={'root-row'}>
+                            <SoftwareInfo />
+                            <HardwareInfo />
+                        </FlexBox>
+                        <FlexBox direction={'horizontal'} className={'root-row'}>
+                            <Card style={{ height: '400px' }}>
+                                {/*<DualAxes {...dualAxesConfig} />*/}
+                            </Card>
+                            <div />
+                        </FlexBox>
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullScreen>
+        </>
+    )
 }
 
 export default System
diff --git a/src/router/system.tsx b/src/router/system.tsx
index b965fb8..33087c9 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -7,8 +7,8 @@ const system: RouteJsonObject[] = [
         absolutePath: '/system',
         id: 'system',
         component: React.lazy(() => import('@/pages/system')),
-        name: '系统设置',
-        icon: React.lazy(() => import('~icons/fatweb/setting.jsx')),
+        name: '系统概况',
+        icon: React.lazy(() => import('~icons/fatweb/chart.jsx')),
         menu: true
     },
     {
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 4b85022..23d3f0f 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -8,7 +8,9 @@ import {
     URL_SYS_GROUP,
     URL_SYS_GROUP_LIST,
     URL_SYS_LOG,
-    URL_SYS_SETTINGS_MAIL
+    URL_SYS_SETTINGS_MAIL,
+    URL_SYS_STATISTICS_SOFTWARE,
+    URL_SYS_STATISTICS_HARDWARE
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -72,3 +74,9 @@ export const r_sys_settings_mail_update = (param: MailSettingsParam) =>
 
 export const r_sys_settings_mail_send = (param: MailSendParam) =>
     request.post(URL_SYS_SETTINGS_MAIL, param)
+
+export const r_sys_statistics_software = () =>
+    request.get<SoftwareInfoVo>(URL_SYS_STATISTICS_SOFTWARE)
+
+export const r_sys_statistics_hardware = () =>
+    request.get<HardwareInfoVo>(URL_SYS_STATISTICS_HARDWARE)

From 7b3b11413b48b120b0ee654392fe5692c92b0b59 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 6 Dec 2023 23:19:20 +0800
Subject: [PATCH 113/307] Optimize hardware information

---
 src/global.d.ts            |  2 ++
 src/pages/system/index.tsx | 52 +++++++++++++++++++++++++++-----------
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index 4a7620e..36a6253 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -348,4 +348,6 @@ interface HardwareInfoVo {
     cpuPhysicalProcessorCount: number
     cpuLogicalProcessorCount: number
     microarchitecture: string
+    memories: string
+    disks: string
 }
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 5f483ab..6e23f0d 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -69,13 +69,21 @@ const SoftwareInfo: React.FC = () => {
                     <div>后端服务器启动时间</div>
                 </FlexBox>
                 <FlexBox className={'value'}>
-                    <div>{softwareInfoData?.os}</div>
-                    <div>{softwareInfoData?.bitness}</div>
-                    <div>{`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}</div>
-                    <div>{softwareInfoData?.javaVendor}</div>
-                    <div>{`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}</div>
-                    <div>{`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}</div>
-                    <div>{softwareInfoData?.jvmVendor}</div>
+                    <div title={softwareInfoData?.os}>{softwareInfoData?.os}</div>
+                    <div title={softwareInfoData?.bitness.toString()}>
+                        {softwareInfoData?.bitness}
+                    </div>
+                    <div
+                        title={`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}
+                    >{`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}</div>
+                    <div title={softwareInfoData?.javaVendor}>{softwareInfoData?.javaVendor}</div>
+                    <div
+                        title={`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}
+                    >{`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}</div>
+                    <div
+                        title={`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}
+                    >{`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}</div>
+                    <div title={softwareInfoData?.jvmVendor}>{softwareInfoData?.jvmVendor}</div>
                     <div>
                         {softwareInfoData?.osBootTime &&
                             utcToLocalTime(softwareInfoData?.osBootTime)}
@@ -113,21 +121,35 @@ const HardwareInfo: React.FC = () => {
             <FlexBox className={'card-content'} direction={'horizontal'}>
                 <FlexBox className={'key'}>
                     <div>CPU</div>
-                    <div>架构</div>
+                    <div>CPU 架构</div>
                     <div>微架构</div>
                     <div>64位</div>
                     <div>CPU 插槽</div>
                     <div>CPU 内核</div>
                     <div>CPU 逻辑处理器</div>
+                    <div>内存</div>
+                    <div>磁盘</div>
                 </FlexBox>
                 <FlexBox className={'value'}>
-                    <div>{hardwareInfoData?.cpu}</div>
-                    <div>{hardwareInfoData?.arch}</div>
-                    <div>{hardwareInfoData?.microarchitecture}</div>
-                    <div>{hardwareInfoData?.is64Bit ? '是' : '否'}</div>
-                    <div>{hardwareInfoData?.cpuPhysicalPackageCount}</div>
-                    <div>{hardwareInfoData?.cpuPhysicalProcessorCount}</div>
-                    <div>{hardwareInfoData?.cpuLogicalProcessorCount}</div>
+                    <div title={hardwareInfoData?.cpu}>{hardwareInfoData?.cpu}</div>
+                    <div title={hardwareInfoData?.arch}>{hardwareInfoData?.arch}</div>
+                    <div title={hardwareInfoData?.microarchitecture}>
+                        {hardwareInfoData?.microarchitecture}
+                    </div>
+                    <div title={hardwareInfoData?.is64Bit ? '是' : '否'}>
+                        {hardwareInfoData?.is64Bit ? '是' : '否'}
+                    </div>
+                    <div title={hardwareInfoData?.cpuPhysicalPackageCount.toString()}>
+                        {hardwareInfoData?.cpuPhysicalPackageCount}
+                    </div>
+                    <div title={hardwareInfoData?.cpuPhysicalProcessorCount.toString()}>
+                        {hardwareInfoData?.cpuPhysicalProcessorCount}
+                    </div>
+                    <div title={hardwareInfoData?.cpuLogicalProcessorCount.toString()}>
+                        {hardwareInfoData?.cpuLogicalProcessorCount}
+                    </div>
+                    <div title={hardwareInfoData?.memories}>{hardwareInfoData?.memories}</div>
+                    <div title={hardwareInfoData?.disks}>{hardwareInfoData?.disks}</div>
                 </FlexBox>
             </FlexBox>
         </CommonCard>

From e1e2a836189bec6d8f29317761580359f5418bdb Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 7 Dec 2023 14:26:26 +0800
Subject: [PATCH 114/307] Optimize code

---
 src/pages/system/Group.tsx | 36 ++++++++++++++++++------------------
 src/pages/system/Log.tsx   | 10 +++++-----
 src/pages/system/Role.tsx  | 36 ++++++++++++++++++------------------
 src/pages/system/User.tsx  | 38 +++++++++++++++++++-------------------
 4 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index 2ee08ba..3857267 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -201,9 +201,9 @@ const Group: React.FC = () => {
 
                         void r_sys_group_delete_list(tableSelectedItem)
                             .then((res) => {
-                                const data = res.data
+                                const response = res.data
 
-                                if (data.code === DATABASE_DELETE_SUCCESS) {
+                                if (response.code === DATABASE_DELETE_SUCCESS) {
                                     void message.success('删除成功')
                                     setTimeout(() => {
                                         getGroup()
@@ -253,8 +253,8 @@ const Group: React.FC = () => {
 
                             void r_sys_group_delete(value.id)
                                 .then((res) => {
-                                    const data = res.data
-                                    if (data.code === DATABASE_DELETE_SUCCESS) {
+                                    const response = res.data
+                                    if (response.code === DATABASE_DELETE_SUCCESS) {
                                         void message.success('删除成功')
                                         setTimeout(() => {
                                             getGroup()
@@ -290,8 +290,8 @@ const Group: React.FC = () => {
         if (isDrawerEdit) {
             void r_sys_group_update(formValues)
                 .then((res) => {
-                    const data = res.data
-                    switch (data.code) {
+                    const response = res.data
+                    switch (response.code) {
                         case DATABASE_UPDATE_SUCCESS:
                             setIsDrawerOpen(false)
                             void message.success('更新成功')
@@ -310,8 +310,8 @@ const Group: React.FC = () => {
         } else {
             void r_sys_group_add(formValues)
                 .then((res) => {
-                    const data = res.data
-                    switch (data.code) {
+                    const response = res.data
+                    switch (response.code) {
                         case DATABASE_INSERT_SUCCESS:
                             setIsDrawerOpen(false)
                             void message.success('添加成功')
@@ -379,8 +379,8 @@ const Group: React.FC = () => {
             setIsLoading(true)
             void r_sys_group_change_status({ id, enable: newStatus })
                 .then((res) => {
-                    const data = res.data
-                    if (data.code === DATABASE_UPDATE_SUCCESS) {
+                    const response = res.data
+                    if (response.code === DATABASE_UPDATE_SUCCESS) {
                         void message.success('更新成功')
                         setTimeout(() => {
                             getGroup()
@@ -421,17 +421,17 @@ const Group: React.FC = () => {
             ...tableParams.filters
         })
             .then((res) => {
-                const data = res.data
-                if (data.code === DATABASE_SELECT_SUCCESS) {
-                    const records = data.data?.records
+                const response = res.data
+                if (response.code === DATABASE_SELECT_SUCCESS) {
+                    const records = response.data?.records
 
                     records && setGroupData(records)
-                    data.data &&
+                    response.data &&
                         setTableParams({
                             ...tableParams,
                             pagination: {
                                 ...tableParams.pagination,
-                                total: data.data.total
+                                total: response.data.total
                             }
                         })
                 } else {
@@ -452,10 +452,10 @@ const Group: React.FC = () => {
 
         void r_sys_role_get_list()
             .then((res) => {
-                const data = res.data
+                const response = res.data
 
-                if (data.code === DATABASE_SELECT_SUCCESS) {
-                    data.data && setRoleData(data.data)
+                if (response.code === DATABASE_SELECT_SUCCESS) {
+                    response.data && setRoleData(response.data)
                 } else {
                     void message.error('获取角色列表失败，请稍后重试')
                 }
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index c5e1425..925118c 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -237,15 +237,15 @@ const Log: React.FC = () => {
             ...tableParams.filters
         })
             .then((res) => {
-                const data = res.data
-                if (data.code === DATABASE_SELECT_SUCCESS) {
-                    data.data && setLogData(data.data.records)
-                    data.data &&
+                const response = res.data
+                if (response.code === DATABASE_SELECT_SUCCESS) {
+                    response.data && setLogData(response.data.records)
+                    response.data &&
                         setTableParams({
                             ...tableParams,
                             pagination: {
                                 ...tableParams.pagination,
-                                total: data.data.total
+                                total: response.data.total
                             }
                         })
                 } else {
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index e276fd8..74c7c0c 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -193,9 +193,9 @@ const Role: React.FC = () => {
 
                         void r_sys_role_delete_list(tableSelectedItem)
                             .then((res) => {
-                                const data = res.data
+                                const response = res.data
 
-                                if (data.code === DATABASE_DELETE_SUCCESS) {
+                                if (response.code === DATABASE_DELETE_SUCCESS) {
                                     void message.success('删除成功')
                                     setTimeout(() => {
                                         getRole()
@@ -245,8 +245,8 @@ const Role: React.FC = () => {
 
                             void r_sys_role_delete(value.id)
                                 .then((res) => {
-                                    const data = res.data
-                                    if (data.code === DATABASE_DELETE_SUCCESS) {
+                                    const response = res.data
+                                    if (response.code === DATABASE_DELETE_SUCCESS) {
                                         void message.success('删除成功')
                                         setTimeout(() => {
                                             getRole()
@@ -279,8 +279,8 @@ const Role: React.FC = () => {
         if (isDrawerEdit) {
             void r_sys_role_update(formValues)
                 .then((res) => {
-                    const data = res.data
-                    switch (data.code) {
+                    const response = res.data
+                    switch (response.code) {
                         case DATABASE_UPDATE_SUCCESS:
                             setIsDrawerOpen(false)
                             void message.success('更新成功')
@@ -299,8 +299,8 @@ const Role: React.FC = () => {
         } else {
             void r_sys_role_add(formValues)
                 .then((res) => {
-                    const data = res.data
-                    switch (data.code) {
+                    const response = res.data
+                    switch (response.code) {
                         case DATABASE_INSERT_SUCCESS:
                             setIsDrawerOpen(false)
                             void message.success('添加成功')
@@ -368,8 +368,8 @@ const Role: React.FC = () => {
             setIsLoading(true)
             void r_sys_role_change_status({ id, enable: newStatus })
                 .then((res) => {
-                    const data = res.data
-                    if (data.code === DATABASE_UPDATE_SUCCESS) {
+                    const response = res.data
+                    if (response.code === DATABASE_UPDATE_SUCCESS) {
                         void message.success('更新成功')
                         setTimeout(() => {
                             getRole()
@@ -410,9 +410,9 @@ const Role: React.FC = () => {
             ...tableParams.filters
         })
             .then((res) => {
-                const data = res.data
-                if (data.code === DATABASE_SELECT_SUCCESS) {
-                    const records = data.data?.records
+                const response = res.data
+                if (response.code === DATABASE_SELECT_SUCCESS) {
+                    const records = response.data?.records
 
                     records?.map((value) => {
                         value.tree = powerListToPowerTree(
@@ -426,12 +426,12 @@ const Role: React.FC = () => {
                     })
 
                     records && setRoleData(records)
-                    data.data &&
+                    response.data &&
                         setTableParams({
                             ...tableParams,
                             pagination: {
                                 ...tableParams.pagination,
-                                total: data.data.total
+                                total: response.data.total
                             }
                         })
                 } else {
@@ -452,10 +452,10 @@ const Role: React.FC = () => {
 
         void r_sys_power_get_list()
             .then((res) => {
-                const data = res.data
+                const response = res.data
 
-                if (data.code === DATABASE_SELECT_SUCCESS) {
-                    const powerSet = data.data
+                if (response.code === DATABASE_SELECT_SUCCESS) {
+                    const powerSet = response.data
                     powerSet &&
                         setPowerTreeData(
                             powerListToPowerTree(
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index b027382..b611767 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -290,9 +290,9 @@ const User: React.FC = () => {
 
                         void r_sys_user_delete_list(tableSelectedItem)
                             .then((res) => {
-                                const data = res.data
+                                const response = res.data
 
-                                if (data.code === DATABASE_DELETE_SUCCESS) {
+                                if (response.code === DATABASE_DELETE_SUCCESS) {
                                     void message.success('删除成功')
                                     setTimeout(() => {
                                         getUser()
@@ -469,8 +469,8 @@ const User: React.FC = () => {
 
                             void r_sys_user_delete(value.id)
                                 .then((res) => {
-                                    const data = res.data
-                                    if (data.code === DATABASE_DELETE_SUCCESS) {
+                                    const response = res.data
+                                    if (response.code === DATABASE_DELETE_SUCCESS) {
                                         void message.success('删除成功')
                                         setTimeout(() => {
                                             getUser()
@@ -514,8 +514,8 @@ const User: React.FC = () => {
                     : undefined
             })
                 .then((res) => {
-                    const data = res.data
-                    switch (data.code) {
+                    const response = res.data
+                    switch (response.code) {
                         case DATABASE_UPDATE_SUCCESS:
                             setIsDrawerOpen(false)
                             void message.success('更新成功')
@@ -542,8 +542,8 @@ const User: React.FC = () => {
                     : undefined
             })
                 .then((res) => {
-                    const data = res.data
-                    switch (data.code) {
+                    const response = res.data
+                    switch (response.code) {
                         case DATABASE_INSERT_SUCCESS:
                             setIsDrawerOpen(false)
                             void message.success('添加成功')
@@ -633,17 +633,17 @@ const User: React.FC = () => {
             ...tableParams.filters
         })
             .then((res) => {
-                const data = res.data
-                if (data.code === DATABASE_SELECT_SUCCESS) {
-                    const records = data.data?.records
+                const response = res.data
+                if (response.code === DATABASE_SELECT_SUCCESS) {
+                    const records = response.data?.records
 
                     records && setUserData(records)
-                    data.data &&
+                    response.data &&
                         setTableParams({
                             ...tableParams,
                             pagination: {
                                 ...tableParams.pagination,
-                                total: data.data.total
+                                total: response.data.total
                             }
                         })
                 } else {
@@ -669,10 +669,10 @@ const User: React.FC = () => {
 
         void r_sys_role_get_list()
             .then((res) => {
-                const data = res.data
+                const response = res.data
 
-                if (data.code === DATABASE_SELECT_SUCCESS) {
-                    data.data && setRoleData(data.data)
+                if (response.code === DATABASE_SELECT_SUCCESS) {
+                    response.data && setRoleData(response.data)
                 } else {
                     void message.error('获取角色列表失败，请稍后重试')
                 }
@@ -691,10 +691,10 @@ const User: React.FC = () => {
 
         void r_sys_group_get_list()
             .then((res) => {
-                const data = res.data
+                const response = res.data
 
-                if (data.code === DATABASE_SELECT_SUCCESS) {
-                    data.data && setGroupData(data.data)
+                if (response.code === DATABASE_SELECT_SUCCESS) {
+                    response.data && setGroupData(response.data)
                 } else {
                     void message.error('获取用户组列表失败，请稍后重试')
                 }

From 5c14e0e86b35e543803cabb2ad6c9e773184bd93 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 7 Dec 2023 18:38:49 +0800
Subject: [PATCH 115/307] Temp

---
 package-lock.json                             | 1141 ++---------------
 package.json                                  |   12 +-
 src/assets/css/pages/system/index.scss        |   16 +-
 src/assets/svg/cpu.svg                        |    1 +
 src/assets/svg/java.svg                       |    1 +
 src/assets/svg/memory.svg                     |    1 +
 src/components/common/echarts/EChartReact.tsx |  181 +++
 src/constants/urls.constants.ts               |    3 +
 src/global.d.ts                               |   21 +
 src/pages/system/index.tsx                    |  201 ++-
 src/services/system.tsx                       |   11 +-
 src/util/hooks.tsx                            |    8 +
 12 files changed, 518 insertions(+), 1079 deletions(-)
 create mode 100644 src/assets/svg/cpu.svg
 create mode 100644 src/assets/svg/java.svg
 create mode 100644 src/assets/svg/memory.svg
 create mode 100644 src/components/common/echarts/EChartReact.tsx

diff --git a/package-lock.json b/package-lock.json
index 055c321..2b5973d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,12 @@
       "name": "fatweb-ui",
       "version": "0.0.0",
       "dependencies": {
-        "@ant-design/charts": "^2.0.0-beta.0",
         "@ant-design/icons": "^5.2.6",
         "antd": "^5.12.1",
         "axios": "^1.6.2",
         "dayjs": "^1.11.10",
+        "echarts": "^5.4.3",
+        "fast-deep-equal": "^3.1.3",
         "jwt-decode": "^4.0.0",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
@@ -21,14 +22,15 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^6.20.1",
-        "react-router-dom": "^6.20.1"
+        "react-router-dom": "^6.20.1",
+        "size-sensor": "^1.0.2"
       },
       "devDependencies": {
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
         "@types/jsdom": "^21.1.6",
         "@types/lodash": "^4.14.202",
-        "@types/node": "^20.10.3",
+        "@types/node": "^20.10.4",
         "@types/react": "^18.2.42",
         "@types/react-dom": "^18.2.17",
         "@typescript-eslint/eslint-plugin": "^6.13.2",
@@ -46,10 +48,10 @@
         "prettier": "^3.1.0",
         "sass": "^1.69.5",
         "stylelint-config-prettier": "^9.0.5",
-        "typescript": "^5.3.2",
+        "typescript": "^5.3.3",
         "unplugin-auto-import": "^0.17.2",
         "unplugin-icons": "^0.18.1",
-        "vite": "^5.0.5"
+        "vite": "^5.0.6"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -74,28 +76,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@ant-design/charts": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@ant-design/charts/-/charts-2.0.2.tgz",
-      "integrity": "sha512-am6vjbWoix/NF42eNdgMjhspBcGnspre3ZZDofPLs3QRl695DMWhe9G+AUWTn+vEgmND5s/LwclbNyn/pJNYVg==",
-      "dependencies": {
-        "@ant-design/plots": "2.0.3"
-      },
-      "peerDependencies": {
-        "lodash-es": "^4.17.21",
-        "react": ">=16.8.4",
-        "react-dom": ">=16.8.4"
-      }
-    },
-    "node_modules/@ant-design/charts-util": {
-      "version": "0.0.1-alpha.0",
-      "resolved": "https://registry.npmjs.org/@ant-design/charts-util/-/charts-util-0.0.1-alpha.0.tgz",
-      "integrity": "sha512-ggaeLhENcOa37Cx+81+IiQ6X9yc/DJFkM/vQ4u+5JXJheR7Sm1YlTjyAc24aO7WqFf7pbdSewDLMBXyYyI1/5Q==",
-      "peerDependencies": {
-        "react": ">=16.8.4",
-        "react-dom": ">=16.8.4"
-      }
-    },
     "node_modules/@ant-design/colors": {
       "version": "7.0.0",
       "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-7.0.0.tgz",
@@ -146,21 +126,6 @@
       "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
       "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
     },
-    "node_modules/@ant-design/plots": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@ant-design/plots/-/plots-2.0.3.tgz",
-      "integrity": "sha512-ZHHp3jGr6VedkMJvuheUC+d7s/I/wMg8+QPTPrgkpYQcv5KvSfvcPRtwwLS87wyuPUVxInM65ZNA6Kcxum6+4A==",
-      "dependencies": {
-        "@ant-design/charts-util": "0.0.1-alpha.0",
-        "@antv/event-emitter": "^0.1.3",
-        "@antv/g2": "^5.1.9"
-      },
-      "peerDependencies": {
-        "lodash-es": "^4.17.21",
-        "react": ">=16.8.4",
-        "react-dom": ">=16.8.4"
-      }
-    },
     "node_modules/@ant-design/react-slick": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/@ant-design/react-slick/-/react-slick-1.0.2.tgz",
@@ -250,273 +215,6 @@
       "integrity": "sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==",
       "dev": true
     },
-    "node_modules/@antv/component": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/@antv/component/-/component-1.0.0-beta.2.tgz",
-      "integrity": "sha512-WQPgnoLsvVOoHXGaQWKitD38mF1olP+IqoXYARfwCuNEMMDMtNqdUbMZrU/P3ypmz2iEbqdVEOjagL9Aebk/Rw==",
-      "dependencies": {
-        "@antv/g": "^5.15.15",
-        "@antv/scale": "^0.4.3",
-        "@antv/util": "^3.3.5",
-        "svg-path-parser": "^1.1.0"
-      },
-      "peerDependencies": {
-        "@antv/g": "^5.14.1"
-      }
-    },
-    "node_modules/@antv/coord": {
-      "version": "0.4.7",
-      "resolved": "https://registry.npmjs.org/@antv/coord/-/coord-0.4.7.tgz",
-      "integrity": "sha512-UTbrMLhwJUkKzqJx5KFnSRpU3BqrdLORJbwUbHK2zHSCT3q3bjcFA//ZYLVfIlwqFDXp/hzfMyRtp0c77A9ZVA==",
-      "dependencies": {
-        "@antv/scale": "^0.4.12",
-        "@antv/util": "^2.0.13",
-        "gl-matrix": "^3.4.3"
-      }
-    },
-    "node_modules/@antv/coord/node_modules/@antv/util": {
-      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/@antv/util/-/util-2.0.17.tgz",
-      "integrity": "sha512-o6I9hi5CIUvLGDhth0RxNSFDRwXeywmt6ExR4+RmVAzIi48ps6HUy+svxOCayvrPBN37uE6TAc2KDofRo0nK9Q==",
-      "dependencies": {
-        "csstype": "^3.0.8",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/@antv/event-emitter": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@antv/event-emitter/-/event-emitter-0.1.3.tgz",
-      "integrity": "sha512-4ddpsiHN9Pd4UIlWuKVK1C4IiZIdbwQvy9i7DUSI3xNJ89FPUFt8lxDYj8GzzfdllV0NkJTRxnG+FvLk0llidg=="
-    },
-    "node_modules/@antv/g": {
-      "version": "5.18.22",
-      "resolved": "https://registry.npmjs.org/@antv/g/-/g-5.18.22.tgz",
-      "integrity": "sha512-l6ttQEy4413F6ONFq3m0GmdS3ge5ZTSBp50G7FmuCifoI2gIAtBiuI2IohdhhchwYIMdNN4PC+iJ4bedor3kWw==",
-      "dependencies": {
-        "@antv/g-camera-api": "1.2.20",
-        "@antv/g-dom-mutation-observer-api": "1.2.19",
-        "@antv/g-lite": "1.2.19",
-        "@antv/g-web-animations-api": "1.2.20"
-      }
-    },
-    "node_modules/@antv/g-camera-api": {
-      "version": "1.2.20",
-      "resolved": "https://registry.npmjs.org/@antv/g-camera-api/-/g-camera-api-1.2.20.tgz",
-      "integrity": "sha512-HapY48zFzDt43A3Z34kogApshwmUxQiXJKQ8XwB0UGzLc6ndMKGYx9tyXdMuozSqIQZ0AT5qasujYuu4h+6m7g==",
-      "dependencies": {
-        "@antv/g-lite": "1.2.19",
-        "@antv/util": "^3.3.4",
-        "gl-matrix": "^3.4.3",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g-canvas": {
-      "version": "1.11.24",
-      "resolved": "https://registry.npmjs.org/@antv/g-canvas/-/g-canvas-1.11.24.tgz",
-      "integrity": "sha512-BEgYZNN7ZXV3l4acZ/d3FoP+EBPeB/fQPInA+6iRf4gBfTsH/fSKNbqvHqV00hgtLHT/u3z16WyP7jcMH1vgHA==",
-      "dependencies": {
-        "@antv/g-lite": "1.2.19",
-        "@antv/g-plugin-canvas-path-generator": "1.3.19",
-        "@antv/g-plugin-canvas-picker": "1.10.21",
-        "@antv/g-plugin-canvas-renderer": "1.9.21",
-        "@antv/g-plugin-dom-interaction": "1.9.19",
-        "@antv/g-plugin-html-renderer": "1.9.22",
-        "@antv/g-plugin-image-loader": "1.3.19",
-        "@antv/util": "^3.3.4",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g-dom-mutation-observer-api": {
-      "version": "1.2.19",
-      "resolved": "https://registry.npmjs.org/@antv/g-dom-mutation-observer-api/-/g-dom-mutation-observer-api-1.2.19.tgz",
-      "integrity": "sha512-sBrwUIkcixEQIr1hhoRfCrZ80m6aNl/VbI0PhRGLDlkJRuoLd9pLn1uSQI042N7M5X7oLW4F9tbN1Aw3ahjT+Q==",
-      "dependencies": {
-        "@antv/g-lite": "1.2.19"
-      }
-    },
-    "node_modules/@antv/g-lite": {
-      "version": "1.2.19",
-      "resolved": "https://registry.npmjs.org/@antv/g-lite/-/g-lite-1.2.19.tgz",
-      "integrity": "sha512-eHFkha7smINzzPCZ2znh10Fx47B7wGf9HM8I6srL5WJskgDYc7nQ2fs/azJcwoFdWxJLar3hugWi8azYkRTZNA==",
-      "dependencies": {
-        "@antv/g-math": "2.0.2",
-        "@antv/util": "^3.3.4",
-        "d3-color": "^1.4.0",
-        "eventemitter3": "^5.0.1",
-        "gl-matrix": "^3.4.3",
-        "rbush": "^3.0.1",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g-math": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@antv/g-math/-/g-math-2.0.2.tgz",
-      "integrity": "sha512-uqGU1C+70orjeSUoIzD3TuXjL5dRQCIyjZrBrTmm0FWd6VQJMWHyG5ypuZ2lMiI5MrRajVSE1w+3J4hiNBYSJg==",
-      "dependencies": {
-        "@antv/util": "^3.3.4",
-        "gl-matrix": "^3.4.3",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g-plugin-canvas-path-generator": {
-      "version": "1.3.19",
-      "resolved": "https://registry.npmjs.org/@antv/g-plugin-canvas-path-generator/-/g-plugin-canvas-path-generator-1.3.19.tgz",
-      "integrity": "sha512-fJTtx1Th8JHaaShrfNdU9fmasR+u6qH2P6ItUnJS9Yp8d+/Q+yPVPC0YOgI/d9dMpl6wcdcRjSkIvm1upXH8Kw==",
-      "dependencies": {
-        "@antv/g-lite": "1.2.19",
-        "@antv/g-math": "2.0.2",
-        "@antv/util": "^3.3.4",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g-plugin-canvas-picker": {
-      "version": "1.10.21",
-      "resolved": "https://registry.npmjs.org/@antv/g-plugin-canvas-picker/-/g-plugin-canvas-picker-1.10.21.tgz",
-      "integrity": "sha512-6Vt21POTJ8MO3VrGFyOEInDgGAPOe9HYhod67R8Q6yG3iKbuWCNeqNP5V5po5lNF5joFRfw08Bp3rY3VdJqZNg==",
-      "dependencies": {
-        "@antv/g-lite": "1.2.19",
-        "@antv/g-math": "2.0.2",
-        "@antv/g-plugin-canvas-path-generator": "1.3.19",
-        "@antv/g-plugin-canvas-renderer": "1.9.21",
-        "@antv/util": "^3.3.4",
-        "gl-matrix": "^3.4.3",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g-plugin-canvas-renderer": {
-      "version": "1.9.21",
-      "resolved": "https://registry.npmjs.org/@antv/g-plugin-canvas-renderer/-/g-plugin-canvas-renderer-1.9.21.tgz",
-      "integrity": "sha512-XvV0zhDQUOdhY6p1LjQ9oNX80rc0AODjx4deEflGShSSX+lRtlxf3ovZEeeWA2qV7EGint3BsywZiyv9/nf66A==",
-      "dependencies": {
-        "@antv/g-lite": "1.2.19",
-        "@antv/g-math": "2.0.2",
-        "@antv/g-plugin-canvas-path-generator": "1.3.19",
-        "@antv/g-plugin-image-loader": "1.3.19",
-        "@antv/util": "^3.3.4",
-        "gl-matrix": "^3.4.3",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g-plugin-dom-interaction": {
-      "version": "1.9.19",
-      "resolved": "https://registry.npmjs.org/@antv/g-plugin-dom-interaction/-/g-plugin-dom-interaction-1.9.19.tgz",
-      "integrity": "sha512-4owDqeRLGwImB2FM0sW0g1Yw1GQSqALHBJVlyWRbJy6o64EgDOrKvNzs7oeL2rqzvGZSLIVeJPxJrJ2koEYymw==",
-      "dependencies": {
-        "@antv/g-lite": "1.2.19",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g-plugin-dragndrop": {
-      "version": "1.8.19",
-      "resolved": "https://registry.npmjs.org/@antv/g-plugin-dragndrop/-/g-plugin-dragndrop-1.8.19.tgz",
-      "integrity": "sha512-dLmOXxQjnsdoEVa0FSFELuVqFHdaCVqDiTwIwrde9xSpsRHkDamyBxnihvn18aCptuX9Gwz/D340xXJNMGgjjQ==",
-      "dependencies": {
-        "@antv/g-lite": "1.2.19",
-        "@antv/util": "^3.3.4",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g-plugin-html-renderer": {
-      "version": "1.9.22",
-      "resolved": "https://registry.npmjs.org/@antv/g-plugin-html-renderer/-/g-plugin-html-renderer-1.9.22.tgz",
-      "integrity": "sha512-+vGFscjEa6yWxJzqPOmkGL5WjrfT0jDlRBzsF1UczeMNEM8zFQu5/VXL8LlCDOnOTJEo3UpkzrUT0fQe4mHaAA==",
-      "dependencies": {
-        "@antv/g-lite": "1.2.19",
-        "@antv/util": "^3.3.4",
-        "gl-matrix": "^3.4.3",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g-plugin-image-loader": {
-      "version": "1.3.19",
-      "resolved": "https://registry.npmjs.org/@antv/g-plugin-image-loader/-/g-plugin-image-loader-1.3.19.tgz",
-      "integrity": "sha512-82YBFax1DeNY8S8FsudlkuxTcg/6LBnHdp2vHHvZWDCmCP0BU0+neRQMIqC2b13mn+7zRiGXg0DllwnJEWBZ8g==",
-      "dependencies": {
-        "@antv/g-lite": "1.2.19",
-        "@antv/util": "^3.3.4",
-        "gl-matrix": "^3.4.3",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g-web-animations-api": {
-      "version": "1.2.20",
-      "resolved": "https://registry.npmjs.org/@antv/g-web-animations-api/-/g-web-animations-api-1.2.20.tgz",
-      "integrity": "sha512-Hs0zJUs2lMSL9BoRnOMsXt3eGuLr0yiETGDXDhv858YS4t0Dw+CHmGUct+pNIaOK/OgF1s9xtmJjRITXntWgpg==",
-      "dependencies": {
-        "@antv/g-lite": "1.2.19",
-        "@antv/util": "^3.3.4",
-        "tslib": "^2.5.3"
-      }
-    },
-    "node_modules/@antv/g2": {
-      "version": "5.1.10",
-      "resolved": "https://registry.npmjs.org/@antv/g2/-/g2-5.1.10.tgz",
-      "integrity": "sha512-Htw1Hlexpz7yFeslTH+4FnRsVayu+TrNarkZaMzQvqJ+IpVMmdflIMj+brFIFEgBe71zKjzxx6X/OcCtFww6Sg==",
-      "dependencies": {
-        "@antv/component": "1.0.0-beta.2",
-        "@antv/coord": "^0.4.6",
-        "@antv/event-emitter": "^0.1.3",
-        "@antv/g": "^5.18.19",
-        "@antv/g-canvas": "^1.11.22",
-        "@antv/g-plugin-dragndrop": "^1.8.17",
-        "@antv/path-util": "^3.0.1",
-        "@antv/scale": "^0.4.12",
-        "@antv/util": "^3.3.5",
-        "d3-array": "^3.2.4",
-        "d3-dsv": "^3.0.1",
-        "d3-force": "^3.0.0",
-        "d3-format": "^3.1.0",
-        "d3-geo": "^3.1.0",
-        "d3-hierarchy": "^3.1.2",
-        "d3-path": "^3.1.0",
-        "d3-scale-chromatic": "^3.0.0",
-        "d3-shape": "^3.2.0",
-        "d3-voronoi": "^1.1.4",
-        "flru": "^1.0.2",
-        "fmin": "^0.0.2",
-        "pdfast": "^0.2.0"
-      }
-    },
-    "node_modules/@antv/path-util": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@antv/path-util/-/path-util-3.0.1.tgz",
-      "integrity": "sha512-tpvAzMpF9Qm6ik2YSMqICNU5tco5POOW7S4XoxZAI/B0L26adU+Md/SmO0BBo2SpuywKvzPH3hPT3xmoyhr04Q==",
-      "dependencies": {
-        "gl-matrix": "^3.1.0",
-        "lodash-es": "^4.17.21",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/@antv/scale": {
-      "version": "0.4.13",
-      "resolved": "https://registry.npmjs.org/@antv/scale/-/scale-0.4.13.tgz",
-      "integrity": "sha512-aWOXZdvkHQjEOMWmDBJF6nja30Y38nC5WTtx3fzX4INqfqYLX9u/fcZfElsjFzryewh2qveO+7L0rq8ugutDTw==",
-      "dependencies": {
-        "@antv/util": "^2.0.13",
-        "color-string": "^1.5.5",
-        "fecha": "^4.2.1"
-      }
-    },
-    "node_modules/@antv/scale/node_modules/@antv/util": {
-      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/@antv/util/-/util-2.0.17.tgz",
-      "integrity": "sha512-o6I9hi5CIUvLGDhth0RxNSFDRwXeywmt6ExR4+RmVAzIi48ps6HUy+svxOCayvrPBN37uE6TAc2KDofRo0nK9Q==",
-      "dependencies": {
-        "csstype": "^3.0.8",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/@antv/util": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/@antv/util/-/util-3.3.5.tgz",
-      "integrity": "sha512-bVv1loamL/MgUEN9dNt7VKAsghO4Wgb+kzr8B9TgkM5tHgKk++xiTwi3pejIdgU8DDkzcyaRsO+VTOXJt8jLng==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "flru": "^1.0.2",
-        "gl-matrix": "^3.3.0",
-        "tslib": "^2.3.1"
-      }
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
@@ -1532,28 +1230,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@ljharb/resumer": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/@ljharb/resumer/-/resumer-0.0.1.tgz",
-      "integrity": "sha512-skQiAOrCfO7vRTq53cxznMpks7wS1va95UCidALlOVWqvBAzwPVErwizDwoMqNVMEn1mDq0utxZd02eIrvF1lw==",
-      "dependencies": {
-        "@ljharb/through": "^2.3.9"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/@ljharb/through": {
-      "version": "2.3.11",
-      "resolved": "https://registry.npmjs.org/@ljharb/through/-/through-2.3.11.tgz",
-      "integrity": "sha512-ccfcIDlogiXNq5KcbAwbaO7lMh3Tm1i3khMPYpxlK8hH/W53zN81KM9coerRLOnTGu3nfXIniAmQbRI9OxbC0w==",
-      "dependencies": {
-        "call-bind": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2153,9 +1829,9 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "20.10.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.3.tgz",
-      "integrity": "sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==",
+      "version": "20.10.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz",
+      "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -2581,38 +2257,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/align-text": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
-      "integrity": "sha512-GrTZLRpmp6wIC2ztrWW9MjjTgSKccffgFagbNDOX95/dcjEcYZibYTeaOntySQLcdw1ztBoFkviiUvTMbb9MYg==",
-      "dependencies": {
-        "kind-of": "^3.0.2",
-        "longest": "^1.0.1",
-        "repeat-string": "^1.5.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/align-text/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
-      "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/amdefine": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
-      "engines": {
-        "node": ">=0.4.2"
-      }
-    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2720,6 +2364,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
       "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "is-array-buffer": "^3.0.1"
@@ -2811,6 +2456,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.1.tgz",
       "integrity": "sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==",
+      "dev": true,
       "dependencies": {
         "array-buffer-byte-length": "^1.0.0",
         "call-bind": "^1.0.2",
@@ -2857,6 +2503,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
       "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -2874,7 +2521,8 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "node_modules/big-integer": {
       "version": "1.6.51",
@@ -2910,6 +2558,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3007,6 +2656,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -3061,18 +2711,6 @@
       "integrity": "sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==",
       "dev": true
     },
-    "node_modules/center-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
-      "integrity": "sha512-Baz3aNe2gd2LP2qk5U+sDk/m4oSuwSDcBfayTCTBoWpfIGO5XFxPmjILQII4NGiZjD6DoDI6kf7gKaxkf7s3VQ==",
-      "dependencies": {
-        "align-text": "^0.1.3",
-        "lazy-cache": "^1.0.3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -3125,16 +2763,6 @@
       "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
       "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
     },
-    "node_modules/cliui": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
-      "integrity": "sha512-GIOYRizG+TGoc7Wgc1LiOTLare95R3mzKgoln+Q/lE4ceiYH19gUpl0l0Ffq4lJDEf3FxujMe6IBfOCs7pfqNA==",
-      "dependencies": {
-        "center-align": "^0.1.1",
-        "right-align": "^0.1.1",
-        "wordwrap": "0.0.2"
-      }
-    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -3147,16 +2775,8 @@
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-    },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
     },
     "node_modules/colord": {
       "version": "2.9.3",
@@ -3176,14 +2796,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/compute-scroll-into-view": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
@@ -3192,12 +2804,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-    },
-    "node_modules/contour_plot": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/contour_plot/-/contour_plot-0.0.1.tgz",
-      "integrity": "sha512-Nil2HI76Xux6sVGORvhSS8v66m+/h5CwFkBJDO+U5vWaMdNC0yXNCsGDPbzPhvqOEU5koebhdEvD372LI+IyLw=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
@@ -3290,157 +2898,6 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
-    "node_modules/d3-array": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
-      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
-      "dependencies": {
-        "internmap": "1 - 2"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-color": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
-      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
-    },
-    "node_modules/d3-dispatch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
-      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-dsv": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
-      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
-      "dependencies": {
-        "commander": "7",
-        "iconv-lite": "0.6",
-        "rw": "1"
-      },
-      "bin": {
-        "csv2json": "bin/dsv2json.js",
-        "csv2tsv": "bin/dsv2dsv.js",
-        "dsv2dsv": "bin/dsv2dsv.js",
-        "dsv2json": "bin/dsv2json.js",
-        "json2csv": "bin/json2dsv.js",
-        "json2dsv": "bin/json2dsv.js",
-        "json2tsv": "bin/json2dsv.js",
-        "tsv2csv": "bin/dsv2dsv.js",
-        "tsv2json": "bin/dsv2json.js"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-force": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
-      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-quadtree": "1 - 3",
-        "d3-timer": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-format": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
-      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-geo": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
-      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
-      "dependencies": {
-        "d3-array": "2.5.0 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-hierarchy": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
-      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-interpolate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
-      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
-      "dependencies": {
-        "d3-color": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-quadtree": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
-      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-scale-chromatic": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
-      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-interpolate": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-shape": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
-      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
-      "dependencies": {
-        "d3-path": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-timer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
-      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-voronoi": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
-      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
-    },
     "node_modules/data-urls": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
@@ -3480,6 +2937,8 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3514,25 +2973,6 @@
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "dev": true
     },
-    "node_modules/deep-equal": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
-      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
-      "dependencies": {
-        "is-arguments": "^1.1.1",
-        "is-date-object": "^1.0.5",
-        "is-regex": "^1.1.4",
-        "object-is": "^1.1.5",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.5.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -3571,6 +3011,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
       "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.1",
         "gopd": "^1.0.1",
@@ -3593,6 +3034,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.0.tgz",
       "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "dev": true,
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -3601,14 +3043,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/defined": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
-      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3651,17 +3085,20 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/dotignore": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/dotignore/-/dotignore-0.1.2.tgz",
-      "integrity": "sha512-UGGGWfSauusaVJC+8fgV+NVvBXkCTmVv7sk6nojDZZvuOUNGUy0Zk4UpHQD6EDjS0jpBwcACvH4eofvyzBcRDw==",
+    "node_modules/echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
       "dependencies": {
-        "minimatch": "^3.0.4"
-      },
-      "bin": {
-        "ignored": "bin/ignored"
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
       }
     },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.508",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.508.tgz",
@@ -3697,6 +3134,7 @@
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/es-abstract/-/es-abstract-1.22.1.tgz",
       "integrity": "sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==",
+      "dev": true,
       "dependencies": {
         "array-buffer-byte-length": "^1.0.0",
         "arraybuffer.prototype.slice": "^1.0.1",
@@ -3746,6 +3184,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
       "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3",
         "has": "^1.0.3",
@@ -3768,6 +3207,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
       "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -3827,6 +3267,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -4348,11 +3789,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
-    },
     "node_modules/execa": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/execa/-/execa-7.2.0.tgz",
@@ -4375,7 +3811,7 @@
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
-      "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-diff": {
@@ -4443,11 +3879,6 @@
         "reusify": "^1.0.4"
       }
     },
-    "node_modules/fecha": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
-      "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw=="
-    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -4505,89 +3936,6 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
-    "node_modules/flru": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/flru/-/flru-1.0.2.tgz",
-      "integrity": "sha512-kWyh8ADvHBFz6ua5xYOPnUroZTT/bwWfrCeL0Wj1dzG4/YOmOcfJ99W8dOVyyynJN35rZ9aCOtHChqQovV7yog==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/fmin": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/fmin/-/fmin-0.0.2.tgz",
-      "integrity": "sha512-sSi6DzInhl9d8yqssDfGZejChO8d2bAGIpysPsvYsxFe898z89XhCZg6CPNV3nhUhFefeC/AXZK2bAJxlBjN6A==",
-      "dependencies": {
-        "contour_plot": "^0.0.1",
-        "json2module": "^0.0.3",
-        "rollup": "^0.25.8",
-        "tape": "^4.5.1",
-        "uglify-js": "^2.6.2"
-      }
-    },
-    "node_modules/fmin/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fmin/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fmin/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fmin/node_modules/rollup": {
-      "version": "0.25.8",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.25.8.tgz",
-      "integrity": "sha512-a2S4Bh3bgrdO4BhKr2E4nZkjTvrJ2m2bWjMTzVYtoqSCn0HnuxosXnaJUHrMEziOWr3CzL9GjilQQKcyCQpJoA==",
-      "dependencies": {
-        "chalk": "^1.1.1",
-        "minimist": "^1.2.0",
-        "source-map-support": "^0.3.2"
-      },
-      "bin": {
-        "rollup": "bin/rollup"
-      }
-    },
-    "node_modules/fmin/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fmin/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -4605,6 +3953,7 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmmirror.com/for-each/-/for-each-0.3.3.tgz",
       "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.3"
       }
@@ -4625,7 +3974,8 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -4645,6 +3995,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4653,6 +4004,7 @@
       "version": "1.1.6",
       "resolved": "https://registry.npmmirror.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
       "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
@@ -4666,7 +4018,8 @@
     "node_modules/functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
     },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
@@ -4681,6 +4034,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
       "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -4701,6 +4055,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
       "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -4709,15 +4064,11 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/gl-matrix": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
-      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
-    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -4796,6 +4147,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/globalthis/-/globalthis-1.0.3.tgz",
       "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dev": true,
       "dependencies": {
         "define-properties": "^1.1.3"
       },
@@ -4831,6 +4183,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       }
@@ -4855,6 +4208,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -4862,29 +4216,11 @@
         "node": ">= 0.4.0"
       }
     },
-    "node_modules/has-ansi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/has-ansi/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ=="
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true
     },
     "node_modules/has-flag": {
       "version": "3.0.0",
@@ -4899,6 +4235,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.1"
       }
@@ -4907,6 +4244,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.1.tgz",
       "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4915,6 +4253,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4923,6 +4262,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -4934,6 +4274,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
       "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -5035,6 +4376,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -5108,6 +4450,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -5116,7 +4459,8 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "node_modules/ini": {
       "version": "1.3.8",
@@ -5129,6 +4473,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/internal-slot/-/internal-slot-1.0.5.tgz",
       "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.0",
         "has": "^1.0.3",
@@ -5138,33 +4483,11 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/internmap": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
-      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-array-buffer": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
       "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.2.0",
@@ -5181,6 +4504,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/is-bigint/-/is-bigint-1.0.4.tgz",
       "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
       "dependencies": {
         "has-bigints": "^1.0.1"
       }
@@ -5201,6 +4525,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
       "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -5209,15 +4534,11 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
-    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.7.tgz",
       "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -5226,6 +4547,7 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -5237,6 +4559,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -5306,6 +4629,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
       "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -5323,6 +4647,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/is-number-object/-/is-number-object-1.0.7.tgz",
       "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -5369,6 +4694,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -5381,6 +4707,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
       "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2"
       }
@@ -5398,6 +4725,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/is-string/-/is-string-1.0.7.tgz",
       "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -5409,6 +4737,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/is-symbol/-/is-symbol-1.0.4.tgz",
       "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -5420,6 +4749,7 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmmirror.com/is-typed-array/-/is-typed-array-1.1.12.tgz",
       "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "dev": true,
       "dependencies": {
         "which-typed-array": "^1.1.11"
       },
@@ -5431,6 +4761,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/is-weakref/-/is-weakref-1.0.2.tgz",
       "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2"
       }
@@ -5462,7 +4793,8 @@
     "node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
     },
     "node_modules/isexe": {
       "version": "2.0.0",
@@ -5563,17 +4895,6 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
-    "node_modules/json2module": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/json2module/-/json2module-0.0.3.tgz",
-      "integrity": "sha512-qYGxqrRrt4GbB8IEOy1jJGypkNsjWoIMlZt4bAsmUScCA507Hbc2p1JOhBzqn45u3PWafUgH2OnzyNU7udO/GA==",
-      "dependencies": {
-        "rw": "^1.3.2"
-      },
-      "bin": {
-        "json2module": "bin/json2module"
-      }
-    },
     "node_modules/json2mq": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/json2mq/-/json2mq-0.2.0.tgz",
@@ -5640,14 +4961,6 @@
       "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
       "dev": true
     },
-    "node_modules/lazy-cache": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
-      "integrity": "sha512-RE2g0b5VGZsOCFOCgP7omTRYFqydmZkBwl5oNnQ1lDYC57uyO9KqNnNVxT7COSHTxrRCWVcAVOcbjk+tvh/rgQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz",
@@ -5716,11 +5029,6 @@
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5734,14 +5042,6 @@
       "dev": true,
       "peer": true
     },
-    "node_modules/longest": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
-      "integrity": "sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5903,6 +5203,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -5913,7 +5214,8 @@
     "node_modules/minimist": {
       "version": "1.2.8",
       "resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true
     },
     "node_modules/minimist-options": {
       "version": "4.1.0",
@@ -5942,25 +5244,6 @@
         "ufo": "^1.3.0"
       }
     },
-    "node_modules/mock-property": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/mock-property/-/mock-property-1.0.3.tgz",
-      "integrity": "sha512-2emPTb1reeLLYwHxyVx993iYyCHEiRRO+y8NFXFPL5kl5q14sgTK76cXyEKkeKCHeRw35SfdkUJ10Q1KfHuiIQ==",
-      "dependencies": {
-        "define-data-property": "^1.1.1",
-        "functions-have-names": "^1.2.3",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "hasown": "^2.0.0",
-        "isarray": "^2.0.5"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
@@ -6106,27 +5389,14 @@
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
-    },
-    "node_modules/object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "dev": true
     },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -6135,6 +5405,7 @@
       "version": "4.1.4",
       "resolved": "https://registry.npmmirror.com/object.assign/-/object.assign-4.1.4.tgz",
       "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -6189,6 +5460,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -6320,6 +5592,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6336,7 +5609,8 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -6353,11 +5627,6 @@
       "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
       "dev": true
     },
-    "node_modules/pdfast": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/pdfast/-/pdfast-0.2.0.tgz",
-      "integrity": "sha512-cq6TTu6qKSFUHwEahi68k/kqN2mfepjkGrG9Un70cgdRRKLKY6Rf8P8uvP2NvZktaQZNF3YE7agEkLj0vGK9bA=="
-    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -6546,19 +5815,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/quickselect": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
-      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
-    },
-    "node_modules/rbush": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
-      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
-      "dependencies": {
-        "quickselect": "^2.0.0"
-      }
-    },
     "node_modules/rc-cascader": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.20.0.tgz",
@@ -7365,6 +6621,7 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
       "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
@@ -7382,14 +6639,6 @@
       "resolved": "https://registry.npmmirror.com/remove-accents/-/remove-accents-0.4.2.tgz",
       "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
     },
-    "node_modules/repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -7415,6 +6664,7 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -7446,17 +6696,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/right-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
-      "integrity": "sha512-yqINtL/G7vs2v+dFIZmFUDbnVyFUJFKd6gK22Kgo6R4jfJGFtisKyncWDDULgjfqf4ASQuIQyjJ7XZ+3aWpsAg==",
-      "dependencies": {
-        "align-text": "^0.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
@@ -7604,15 +6843,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
-    },
     "node_modules/safe-array-concat": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
       "integrity": "sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.2.0",
@@ -7627,6 +6862,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
       "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.3",
@@ -7636,7 +6872,8 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "node_modules/sass": {
       "version": "1.69.5",
@@ -7702,6 +6939,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
       "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+      "dev": true,
       "dependencies": {
         "define-data-property": "^1.0.1",
         "functions-have-names": "^1.2.3",
@@ -7736,6 +6974,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -7748,18 +6987,10 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
-    "node_modules/simple-swizzle/node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    "node_modules/size-sensor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-1.0.2.tgz",
+      "integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw=="
     },
     "node_modules/slash": {
       "version": "3.0.0",
@@ -7828,14 +7059,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -7845,25 +7068,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/source-map-support": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.3.3.tgz",
-      "integrity": "sha512-9O4+y9n64RewmFoKUZ/5Tx9IHIcXM6Q+RTSw6ehnqybUz4a7iwR3Eaw80uLtqqQ5D0C+5H03D4KKGo9PdP33Gg==",
-      "dependencies": {
-        "source-map": "0.1.32"
-      }
-    },
-    "node_modules/source-map-support/node_modules/source-map": {
-      "version": "0.1.32",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
-      "integrity": "sha512-htQyLrrRLkQ87Zfrir4/yN+vAUd6DNjVayEjTSHXu29AYQJw57I4/xEL/M6p6E/woPNJwvZt6rVlzc7gFEJccQ==",
-      "dependencies": {
-        "amdefine": ">=0.0.4"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -7924,6 +7128,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
       "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
@@ -7940,6 +7145,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
       "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -7950,6 +7156,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
       "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -8191,6 +7398,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -8201,11 +7409,6 @@
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
       "dev": true
     },
-    "node_modules/svg-path-parser": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/svg-path-parser/-/svg-path-parser-1.1.0.tgz",
-      "integrity": "sha512-jGCUqcQyXpfe38R7RFfhrMyfXcBmpMNJI/B+4CE9/Unkh98UporAc461GTthv+TVDuZXsBx7/WiwJb1Oh4tt4A=="
-    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -8269,35 +7472,6 @@
       "dev": true,
       "peer": true
     },
-    "node_modules/tape": {
-      "version": "4.17.0",
-      "resolved": "https://registry.npmjs.org/tape/-/tape-4.17.0.tgz",
-      "integrity": "sha512-KCuXjYxCZ3ru40dmND+oCLsXyuA8hoseu2SS404Px5ouyS0A99v8X/mdiLqsR5MTAyamMBN7PRwt2Dv3+xGIxw==",
-      "dependencies": {
-        "@ljharb/resumer": "~0.0.1",
-        "@ljharb/through": "~2.3.9",
-        "call-bind": "~1.0.2",
-        "deep-equal": "~1.1.1",
-        "defined": "~1.0.1",
-        "dotignore": "~0.1.2",
-        "for-each": "~0.3.3",
-        "glob": "~7.2.3",
-        "has": "~1.0.3",
-        "inherits": "~2.0.4",
-        "is-regex": "~1.1.4",
-        "minimist": "~1.2.8",
-        "mock-property": "~1.0.0",
-        "object-inspect": "~1.12.3",
-        "resolve": "~1.22.6",
-        "string.prototype.trim": "~1.2.8"
-      },
-      "bin": {
-        "tape": "bin/tape"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -8423,7 +7597,8 @@
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -8451,6 +7626,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
       "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.2.1",
@@ -8464,6 +7640,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
       "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "for-each": "^0.3.3",
@@ -8478,6 +7655,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
       "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "dev": true,
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -8493,6 +7671,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/typed-array-length/-/typed-array-length-1.0.4.tgz",
       "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "for-each": "^0.3.3",
@@ -8500,9 +7679,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz",
-      "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -8518,34 +7697,11 @@
       "integrity": "sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==",
       "dev": true
     },
-    "node_modules/uglify-js": {
-      "version": "2.8.29",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
-      "integrity": "sha512-qLq/4y2pjcU3vhlhseXGGJ7VbFO4pBANu0kwl8VCa9KEI0V8VfZIx2Fy3w01iSTA/pGwKZSmu/+I4etLNDdt5w==",
-      "dependencies": {
-        "source-map": "~0.5.1",
-        "yargs": "~3.10.0"
-      },
-      "bin": {
-        "uglifyjs": "bin/uglifyjs"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      },
-      "optionalDependencies": {
-        "uglify-to-browserify": "~1.0.0"
-      }
-    },
-    "node_modules/uglify-to-browserify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-      "integrity": "sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==",
-      "optional": true
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
       "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-bigints": "^1.0.2",
@@ -8778,9 +7934,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.5.tgz",
-      "integrity": "sha512-OekeWqR9Ls56f3zd4CaxzbbS11gqYkEiBtnWFFgYR2WV8oPJRRKq0mpskYy/XaoCL3L7VINDhqqOMNDiYdGvGg==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.6.tgz",
+      "integrity": "sha512-MD3joyAEBtV7QZPl2JVVUai6zHms3YOmLR+BpMzLlX2Yzjfcc4gTgNi09d/Rua3F4EtC8zdwPU8eQYyib4vVMQ==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.19.3",
@@ -8921,6 +8077,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
       "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
       "dependencies": {
         "is-bigint": "^1.0.1",
         "is-boolean-object": "^1.1.0",
@@ -8933,6 +8090,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/which-typed-array/-/which-typed-array-1.1.11.tgz",
       "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
+      "dev": true,
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -8944,26 +8102,11 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/window-size": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-      "integrity": "sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1PXhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg==",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/wordwrap": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-      "integrity": "sha512-xSBsCeh+g+dinoBv3GAOWM4LcVVO68wLXRanibtBSdUvkGWQRGeE9P7IwU9EmDDi4jA6L44lz15CGMwdw9N5+Q==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
     },
     "node_modules/write-file-atomic": {
       "version": "4.0.2",
@@ -9031,17 +8174,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/yargs": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-      "integrity": "sha512-QFzUah88GAGy9lyDKGBqZdkYApt63rCXYBGYnEP4xDJPXNqXXnBDACnbrXnViV6jRSqAePwrATi2i8mfYm4L1A==",
-      "dependencies": {
-        "camelcase": "^1.0.2",
-        "cliui": "^2.1.0",
-        "decamelize": "^1.0.0",
-        "window-size": "0.1.0"
-      }
-    },
     "node_modules/yargs-parser": {
       "version": "20.2.9",
       "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
@@ -9052,14 +8184,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/yargs/node_modules/camelcase": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-      "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -9068,6 +8192,19 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   }
 }
diff --git a/package.json b/package.json
index 4b29a1f..54679a0 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,11 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@ant-design/charts": "^2.0.0-beta.0",
     "antd": "^5.12.1",
     "axios": "^1.6.2",
     "dayjs": "^1.11.10",
+    "echarts": "^5.4.3",
+    "fast-deep-equal": "^3.1.3",
     "jwt-decode": "^4.0.0",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
@@ -27,14 +28,15 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.20.1",
-    "react-router-dom": "^6.20.1"
+    "react-router-dom": "^6.20.1",
+    "size-sensor": "^1.0.2"
   },
   "devDependencies": {
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/jsdom": "^21.1.6",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.10.3",
+    "@types/node": "^20.10.4",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
@@ -52,9 +54,9 @@
     "prettier": "^3.1.0",
     "sass": "^1.69.5",
     "stylelint-config-prettier": "^9.0.5",
-    "typescript": "^5.3.2",
+    "typescript": "^5.3.3",
     "unplugin-auto-import": "^0.17.2",
     "unplugin-icons": "^0.18.1",
-    "vite": "^5.0.5"
+    "vite": "^5.0.6"
   }
 }
diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss
index 0503caf..619ef30 100644
--- a/src/assets/css/pages/system/index.scss
+++ b/src/assets/css/pages/system/index.scss
@@ -3,9 +3,12 @@
 .root-content {
   padding: 30px;
   gap: 20px;
+  flex-wrap: wrap;
+  justify-content: center;
 
-  .root-row {
-    gap: 20px;
+  >.card-box {
+    width: 48%;
+    flex: 0 0 auto;
 
     .common-card {
       padding: 20px;
@@ -48,6 +51,15 @@
           }
         }
 
+        .value-chart {
+          >div {
+            height: 12px;
+            >* {
+              transform: translateY(1px);
+            }
+          }
+        }
+
         > * {
           gap: 5px;
         }
diff --git a/src/assets/svg/cpu.svg b/src/assets/svg/cpu.svg
new file mode 100644
index 0000000..11a6990
--- /dev/null
+++ b/src/assets/svg/cpu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M256 768h512V256H256v512z m341.3 85.3H426.6v85.3h-85.3v-85.3h-128a42.7 42.7 0 0 1-42.7-42.7v-128H85.3v-85.3h85.3V426.6H85.3v-85.3h85.3v-128a42.7 42.7 0 0 1 42.7-42.7h128V85.3h85.3v85.3h170.7V85.3h85.3v85.3h128a42.7 42.7 0 0 1 42.7 42.7v128h85.3v85.3h-85.3v170.7h85.3v85.3h-85.3v128a42.7 42.7 0 0 1-42.7 42.7h-128v85.3h-85.3v-85.3z m-256-512h341.3v341.3H341.3V341.3z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/java.svg b/src/assets/svg/java.svg
new file mode 100644
index 0000000..359d827
--- /dev/null
+++ b/src/assets/svg/java.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M564 96c44.864 105.888-160.864 170.752-180 259.008-17.504 80.992 121.888 176 122.016 176-21.28-33.504-36.768-61.76-58.016-114.016C412 328.736 667.36 249.12 564 96z m136 147.008s-179.872 11.36-188.992 128.992c-4.16 52.384 47.488 79.872 48.992 118.016 1.28 31.104-31.008 56.96-31.008 56.96s57.888-10.464 76-57.984c20-52.736-38.976-88.736-32.992-131.008 5.76-40.352 128-114.976 128-114.976z m44 270.976c-18.88-0.864-40.128 6.144-59.008 20 37.248-8.224 69.024 15.136 69.024 42.016 0 60.256-86.016 116.992-86.016 116.992s132.992-14.88 132.992-113.984c0-40.896-25.6-63.52-56.992-65.024z m-352.992 1.024c-46.4 1.6-139.008 9.248-139.008 44.992 0 49.76 215.744 53.632 370.016 23.008 0 0 41.984-29.248 52.992-40-101.12 20.992-332 24.256-332 5.984 0-16.736 73.984-33.984 73.984-33.984s-10.496-0.512-25.984 0z m-14.016 92c-25.376 0-63.008 19.744-63.008 38.976 0 38.752 191.04 68.512 332.032 12l-49.024-29.984c-95.616 31.264-272.256 20.864-220-20.992z m24 86.976c-34.624 0-56.992 21.888-56.992 38.016 0 49.6 206.88 54.496 288.992 4l-52-34.016c-61.248 26.4-215.36 30.272-180-8z m-116 45.024C228.512 737.888 192 763.488 192 784.96c0 114.368 579.008 108.896 579.008-8 0-19.36-22.88-28.608-31.008-32.992 47.264 111.744-472.992 103.008-472.992 36.992 0-14.976 38.496-29.984 73.984-22.976l-29.984-17.024a190.784 190.784 0 0 0-26.016-1.984zM832 816c-88 85.12-310.72 115.616-535.008 63.008 224.256 93.76 533.888 41.6 535.008-63.008z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/memory.svg b/src/assets/svg/memory.svg
new file mode 100644
index 0000000..a41c3e6
--- /dev/null
+++ b/src/assets/svg/memory.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024"><path d="M1280 261.88V192c0-35.34-28.66-64-64-64H64C28.66 128 0 156.66 0 192v69.88c37.2 13.22 64 48.38 64 90.12s-26.8 76.9-64 90.12V640h1280v-197.88c-37.2-13.22-64-48.38-64-90.12s26.8-76.9 64-90.12zM448 512h-128V256h128v256z m256 0h-128V256h128v256z m256 0h-128V256h128v256zM0 896h128v-53.34c0-17.68 14.32-32 32-32s32 14.32 32 32V896h256v-53.34c0-17.68 14.32-32 32-32s32 14.32 32 32V896h256v-53.34c0-17.68 14.32-32 32-32s32 14.32 32 32V896h256v-53.34c0-17.68 14.32-32 32-32s32 14.32 32 32V896h128v-192H0v192z" /></svg>
\ No newline at end of file
diff --git a/src/components/common/echarts/EChartReact.tsx b/src/components/common/echarts/EChartReact.tsx
new file mode 100644
index 0000000..174f2b0
--- /dev/null
+++ b/src/components/common/echarts/EChartReact.tsx
@@ -0,0 +1,181 @@
+import React, { CSSProperties, useState } from 'react'
+import echarts, { EChartsCoreOption, EChartsType } from 'echarts/core'
+import { RendererType } from 'echarts/types/src/util/types'
+import { LocaleOption } from 'echarts/types/src/core/locale'
+import { bind, clear } from 'size-sensor'
+import isEqual from 'fast-deep-equal'
+import { usePrevious } from '@/util/hooks'
+
+interface EChartsInitOpts {
+    locale?: string | LocaleOption
+    renderer?: RendererType
+    devicePixelRatio?: number
+    useDirtyRect?: boolean
+    useCoarsePointer?: boolean
+    pointerSize?: number
+    ssr?: boolean
+    width?: number | string
+    height?: number | string
+}
+
+interface EChartsReactProps {
+    echarts: typeof echarts
+    className?: string
+    style?: CSSProperties
+    option: EChartsCoreOption
+    theme?: string | object | null
+    notMerge?: boolean
+    lazyUpdate?: boolean
+    showLoading?: boolean
+    loadingOption?: object
+    opts?: EChartsInitOpts
+    onChartReady?: (instance: EChartsType) => void
+    onEvents?: Record<string, () => void>
+    shouldSetOption?: (prevProps: EChartsReactProps, props: EChartsReactProps) => boolean
+}
+
+const EChartReact: React.FC<EChartsReactProps> = (props) => {
+    const elementRef = useRef<HTMLDivElement>(null)
+    const prevProps = usePrevious(props)
+    const [echarts] = useState(props.echarts)
+    const [isInitialResize, setIsInitialResize] = useState(true)
+
+    const { style, className = '', theme, opts } = props
+
+    const renderNewECharts = () => {
+        const { onEvents, onChartReady } = props
+
+        const eChartsInstance = updateEChartsOption()
+
+        bindEvents(eChartsInstance, onEvents || {})
+
+        if (typeof onChartReady === 'function') {
+            onChartReady(eChartsInstance)
+        }
+
+        if (elementRef.current) {
+            bind(elementRef.current, () => {
+                resize()
+            })
+        }
+
+        return () => {
+            dispose()
+        }
+    }
+
+    const updateEChartsOption = () => {
+        const { option, notMerge = false, lazyUpdate = false, showLoading, loadingOption } = props
+
+        const eChartsInstance = getEChartsInstance()
+        eChartsInstance.setOption(option, notMerge, lazyUpdate)
+        if (showLoading) {
+            eChartsInstance.showLoading(loadingOption)
+        } else {
+            eChartsInstance.hideLoading()
+        }
+
+        return eChartsInstance
+    }
+
+    const getEChartsInstance = () =>
+        (elementRef.current && echarts.getInstanceByDom(elementRef.current)) ||
+        echarts.init(elementRef.current, theme, opts)
+
+    const bindEvents = (instance: EChartsType, events: EChartsReactProps['onEvents']) => {
+        const _bindEvents = (
+            eventName: string,
+            func: (param: unknown, instance: EChartsType) => void
+        ) => {
+            if (typeof func === 'function') {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
+                instance.on(eventName, (param: unknown) => {
+                    func(param, instance)
+                })
+            }
+        }
+
+        for (const eventName in events) {
+            if (Object.prototype.hasOwnProperty.call(events, eventName)) {
+                _bindEvents(eventName, events[eventName])
+            }
+        }
+    }
+
+    const resize = () => {
+        const eChartsInstance = getEChartsInstance()
+
+        if (!isInitialResize) {
+            try {
+                eChartsInstance.resize()
+            } catch (e) {
+                console.warn(e)
+            }
+        }
+
+        setIsInitialResize(false)
+    }
+
+    const dispose = () => {
+        if (elementRef.current) {
+            try {
+                clear(elementRef.current)
+            } catch (e) {
+                console.warn(e)
+            }
+            echarts.dispose(elementRef.current)
+        }
+    }
+
+    const pick = (obj: EChartsReactProps | undefined, keys: string[]): Record<string, unknown> => {
+        const r = {}
+        keys.forEach((key) => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            r[key] = obj[key]
+        })
+        return r
+    }
+
+    useEffect(() => {
+        renderNewECharts()
+    })
+
+    useEffect(() => {
+        const { shouldSetOption } = props
+        if (
+            typeof shouldSetOption === 'function' &&
+            prevProps &&
+            !shouldSetOption(prevProps, props)
+        ) {
+            return
+        }
+
+        if (
+            !isEqual(prevProps?.theme, props.theme) ||
+            !isEqual(prevProps?.opts, props.opts) ||
+            !isEqual(prevProps?.onEvents, props.onEvents)
+        ) {
+            dispose()
+            renderNewECharts()
+            return
+        }
+
+        const pickKeys = ['option', 'notMerge', 'lazyUpdate', 'showLoading', 'loadingOption']
+        if (!isEqual(pick(props, pickKeys), pick(prevProps, pickKeys))) {
+            updateEChartsOption()
+        }
+
+        if (
+            !isEqual(prevProps?.style, props.style) ||
+            !isEqual(prevProps?.className, props.className)
+        ) {
+            resize()
+        }
+    }, [props])
+
+    return <div ref={elementRef} style={style} className={`echarts-react ${className}`}></div>
+}
+
+export default EChartReact
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 887bdc8..c668bea 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -14,6 +14,9 @@ export const URL_SYS_SETTINGS_MAIL = `${URL_SYS_SETTINGS}/mail`
 export const URL_SYS_STATISTICS = '/system/statistics'
 export const URL_SYS_STATISTICS_SOFTWARE = `${URL_SYS_STATISTICS}/software`
 export const URL_SYS_STATISTICS_HARDWARE = `${URL_SYS_STATISTICS}/hardware`
+export const URL_SYS_STATISTICS_CPU = `${URL_SYS_STATISTICS}/cpu`
+export const URL_SYS_STATISTICS_MEMORY = `${URL_SYS_STATISTICS}/memory`
+export const URL_SYS_STATISTICS_JVM = `${URL_SYS_STATISTICS}/jvm`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/global.d.ts b/src/global.d.ts
index 36a6253..0524f23 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -351,3 +351,24 @@ interface HardwareInfoVo {
     memories: string
     disks: string
 }
+
+interface CpuInfoVo {
+    user: number
+    nice: number
+    system: number
+    idle: number
+    iowait: number
+    irq: number
+    softirq: number
+    steal: number
+    processors: CpuInfoVo[]
+}
+
+interface MemoryInfoVo {
+    total: number
+    free: number
+    virtualInUse: number
+    virtualMax: number
+    swapTotal: number
+    swapUsed: number
+}
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 6e23f0d..65d601a 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -1,16 +1,33 @@
 import React, { useState } from 'react'
 import Icon from '@ant-design/icons'
-// import { DualAxes, DualAxesConfig } from '@ant-design/plots'
+import * as echarts from 'echarts/core'
+import {
+    TooltipComponent,
+    TooltipComponentOption,
+    GridComponent,
+    GridComponentOption
+} from 'echarts/components'
+import { BarChart, BarSeriesOption } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
 import '@/assets/css/pages/system/index.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { utcToLocalTime } from '@/util/datetime'
-import { r_sys_statistics_hardware, r_sys_statistics_software } from '@/services/system'
+import {
+    r_sys_statistics_cpu,
+    r_sys_statistics_hardware,
+    r_sys_statistics_software
+} from '@/services/system'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import LoadingMask from '@/components/common/LoadingMask'
+import EChartReact from '@/components/common/echarts/EChartReact'
 
+echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer])
+type EChartsOption = echarts.ComposeOption<
+    TooltipComponentOption | GridComponentOption | BarSeriesOption
+>
 interface CommonCardProps extends React.PropsWithChildren {
     icon: IconComponent
     title: string
@@ -19,7 +36,7 @@ interface CommonCardProps extends React.PropsWithChildren {
 
 const CommonCard: React.FC<CommonCardProps> = (props) => {
     return (
-        <Card>
+        <Card style={{ overflow: 'visible' }}>
             <FlexBox className={'common-card'}>
                 <FlexBox direction={'horizontal'} className={'head'}>
                     <Icon component={props.icon} className={'icon'} />
@@ -27,7 +44,7 @@ const CommonCard: React.FC<CommonCardProps> = (props) => {
                 </FlexBox>
                 <LoadingMask
                     hidden={!props.loading}
-                    maskContent={<AntdSkeleton active paragraph={{ rows: 10 }} />}
+                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
                 >
                     {props.children}
                 </LoadingMask>
@@ -124,9 +141,9 @@ const HardwareInfo: React.FC = () => {
                     <div>CPU 架构</div>
                     <div>微架构</div>
                     <div>64位</div>
-                    <div>CPU 插槽</div>
-                    <div>CPU 内核</div>
-                    <div>CPU 逻辑处理器</div>
+                    <div>物理 CPU</div>
+                    <div>物理核心</div>
+                    <div>逻辑核心</div>
                     <div>内存</div>
                     <div>磁盘</div>
                 </FlexBox>
@@ -156,75 +173,121 @@ const HardwareInfo: React.FC = () => {
     )
 }
 
-const System: React.FC = () => {
-    /*
-    const dualAxesData = [
-        { year: '1991', value: 3, count: 10 },
-        { year: '1992', value: 4, count: 4 },
-        { year: '1993', value: 3.5, count: 5 },
-        { year: '1994', value: 5, count: 5 },
-        { year: '1995', value: 4.9, count: 4.9 },
-        { year: '1996', value: 6, count: 35 },
-        { year: '1997', value: 7, count: 7 },
-        { year: '1998', value: 9, count: 1 },
-        { year: '1999', value: 13, count: 20 }
-    ]
+const CPUInfo: React.FC = () => {
+    const [cpuInfoData, setCpuInfoData] = useState<BarSeriesOption[]>()
 
-    const userStatisticsData = [
-        { time: '2023-12-01', type: 'register', number: 23 },
-        { time: '2023-12-02', type: 'register', number: 123 },
-        { time: '2023-12-03', type: 'register', number: 1432 },
-        { time: '2023-12-05', type: 'register', number: 1 },
-        { time: '2023-12-04', type: 'register', number: 234 },
-        { time: '2023-12-06', type: 'register', number: 23 },
-        { time: '2023-12-07', type: 'register', number: 54 },
-        { time: '2023-12-08', type: 'register', number: 87 },
-        { time: '2023-12-09', type: 'register', number: 12 },
-        { time: '2023-12-10', type: 'register', number: 123 },
-        { time: '2023-12-11', type: 'register', number: 20 },
-        { time: '2023-12-01', type: 'login', number: 433 },
-        { time: '2023-12-02', type: 'login', number: 2 },
-        { time: '2023-12-03', type: 'login', number: 34 },
-        { time: '2023-12-05', type: 'login', number: 12 },
-        { time: '2023-12-04', type: 'login', number: 345 },
-        { time: '2023-12-06', type: 'login', number: 121 },
-        { time: '2023-12-07', type: 'login', number: 2 },
-        { time: '2023-12-08', type: 'login', number: 435 },
-        { time: '2023-12-09', type: 'login', number: 1 },
-        { time: '2023-12-10', type: 'login', number: 54 },
-        { time: '2023-12-11', type: 'login', number: 56 }
-    ]
-
-    const dualAxesConfig: DualAxesConfig = {
-        data: userStatisticsData,
-        slider: { x: true },
-        shapeField: 'smooth',
-        xField: 'time',
-        children: [
-            {
-                type: 'line',
-                yField: 'number',
-                colorField: 'type'
-            }
-        ]
+    const defaultSeriesOption: BarSeriesOption = {
+        type: 'bar',
+        stack: 'total',
+        emphasis: {
+            focus: 'series'
+        }
     }
-*/
 
+    useUpdatedEffect(() => {
+        setInterval(
+            () =>
+                r_sys_statistics_cpu().then((res) => {
+                    const response = res.data
+                    if (response.success) {
+                        const data = response.data
+                        if (data) {
+                            const cpuInfoData = Object.entries(data)
+                                .filter(([key]) => key !== 'processors')
+                                .map(([key, value]) => ({
+                                    ...defaultSeriesOption,
+                                    name: key,
+                                    data: [value as number]
+                                }))
+                            console.log(cpuInfoData)
+                            setCpuInfoData(cpuInfoData)
+                        }
+                    }
+                }),
+            5000
+        )
+    }, [])
+
+    const option: EChartsOption = {
+        tooltip: {},
+        xAxis: {
+            show: false
+        },
+        yAxis: {
+            data: ['总使用'],
+            axisLine: {
+                show: false
+            },
+            axisLabel: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                show: false
+            },
+            axisPointer: {
+                show: false
+            }
+        },
+        series: cpuInfoData
+    }
+
+    return (
+        <>
+            <CommonCard icon={IconFatwebCpu} title={'CPU 信息'} loading={false}>
+                <FlexBox className={'card-content'} direction={'horizontal'}>
+                    <FlexBox className={'key'}>
+                        <div>总占用</div>
+                        <div>总占用</div>
+                        <div>总占用</div>
+                    </FlexBox>
+                    <FlexBox className={'value-chart'}>
+                        <div>
+                            <EChartReact
+                                echarts={echarts}
+                                opts={{ renderer: 'svg', height: 12 }}
+                                option={option}
+                            />
+                        </div>
+                        <div></div>
+                        <div></div>
+                    </FlexBox>
+                </FlexBox>
+            </CommonCard>
+        </>
+    )
+}
+
+const MemoryInfo: React.FC = () => {
+    return (
+        <>
+            <CommonCard icon={IconFatwebMemory} title={'内存信息'} loading={true}></CommonCard>
+        </>
+    )
+}
+
+const JvmInfo: React.FC = () => {
+    return (
+        <>
+            <CommonCard icon={IconFatwebJava} title={'JVM 信息'} loading={true}></CommonCard>
+        </>
+    )
+}
+
+const System: React.FC = () => {
     return (
         <>
             <FitFullScreen>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
-                    <FlexBox className={'root-content'}>
-                        <FlexBox direction={'horizontal'} className={'root-row'}>
-                            <SoftwareInfo />
-                            <HardwareInfo />
-                        </FlexBox>
-                        <FlexBox direction={'horizontal'} className={'root-row'}>
-                            <Card style={{ height: '400px' }}>
-                                {/*<DualAxes {...dualAxesConfig} />*/}
-                            </Card>
-                            <div />
-                        </FlexBox>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <SoftwareInfo />
+                        <HardwareInfo />
+                        <CPUInfo />
+                        <MemoryInfo />
+                        <JvmInfo />
+                        <div />
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 23d3f0f..37da0ec 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -10,7 +10,10 @@ import {
     URL_SYS_LOG,
     URL_SYS_SETTINGS_MAIL,
     URL_SYS_STATISTICS_SOFTWARE,
-    URL_SYS_STATISTICS_HARDWARE
+    URL_SYS_STATISTICS_HARDWARE,
+    URL_SYS_STATISTICS_CPU,
+    URL_SYS_STATISTICS_MEMORY,
+    URL_SYS_STATISTICS_JVM
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -80,3 +83,9 @@ export const r_sys_statistics_software = () =>
 
 export const r_sys_statistics_hardware = () =>
     request.get<HardwareInfoVo>(URL_SYS_STATISTICS_HARDWARE)
+
+export const r_sys_statistics_cpu = () => request.get<CpuInfoVo>(URL_SYS_STATISTICS_CPU)
+
+export const r_sys_statistics_memory = () => request.get<MemoryInfoVo>(URL_SYS_STATISTICS_MEMORY)
+
+export const r_sys_statistics_jvm = () => request.get<MemoryInfoVo>(URL_SYS_STATISTICS_JVM)
diff --git a/src/util/hooks.tsx b/src/util/hooks.tsx
index da151a4..4667408 100644
--- a/src/util/hooks.tsx
+++ b/src/util/hooks.tsx
@@ -14,3 +14,11 @@ export const useUpdatedEffect = (
         }
     }, dependencies)
 }
+
+export const usePrevious = <T,>(value: T): T | undefined => {
+    const ref = useRef<T>()
+    useEffect(() => {
+        ref.current = value
+    })
+    return ref.current
+}

From 4e2d13c0644986b82f05676e4dc158e6d431e2c6 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 8 Dec 2023 15:08:22 +0800
Subject: [PATCH 116/307] Finish cpu statistics information

---
 src/assets/css/pages/system/index.scss        |   5 +-
 src/components/common/echarts/EChartReact.tsx | 181 -----------------
 src/global.d.ts                               |   1 +
 src/pages/system/index.tsx                    | 185 +++++++++++++-----
 src/util/hooks.tsx                            |   2 +-
 5 files changed, 141 insertions(+), 233 deletions(-)
 delete mode 100644 src/components/common/echarts/EChartReact.tsx

diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss
index 619ef30..b603847 100644
--- a/src/assets/css/pages/system/index.scss
+++ b/src/assets/css/pages/system/index.scss
@@ -35,7 +35,7 @@
         padding: 0 10px;
         gap: 10px;
 
-        .key {
+        .key, .value-percent {
           flex: 0 0 auto;
           color: constants.$font-main-color;
         }
@@ -52,7 +52,10 @@
         }
 
         .value-chart {
+          justify-content: space-around;
+          width: 0;
           >div {
+            max-height: 12px;
             height: 12px;
             >* {
               transform: translateY(1px);
diff --git a/src/components/common/echarts/EChartReact.tsx b/src/components/common/echarts/EChartReact.tsx
deleted file mode 100644
index 174f2b0..0000000
--- a/src/components/common/echarts/EChartReact.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import React, { CSSProperties, useState } from 'react'
-import echarts, { EChartsCoreOption, EChartsType } from 'echarts/core'
-import { RendererType } from 'echarts/types/src/util/types'
-import { LocaleOption } from 'echarts/types/src/core/locale'
-import { bind, clear } from 'size-sensor'
-import isEqual from 'fast-deep-equal'
-import { usePrevious } from '@/util/hooks'
-
-interface EChartsInitOpts {
-    locale?: string | LocaleOption
-    renderer?: RendererType
-    devicePixelRatio?: number
-    useDirtyRect?: boolean
-    useCoarsePointer?: boolean
-    pointerSize?: number
-    ssr?: boolean
-    width?: number | string
-    height?: number | string
-}
-
-interface EChartsReactProps {
-    echarts: typeof echarts
-    className?: string
-    style?: CSSProperties
-    option: EChartsCoreOption
-    theme?: string | object | null
-    notMerge?: boolean
-    lazyUpdate?: boolean
-    showLoading?: boolean
-    loadingOption?: object
-    opts?: EChartsInitOpts
-    onChartReady?: (instance: EChartsType) => void
-    onEvents?: Record<string, () => void>
-    shouldSetOption?: (prevProps: EChartsReactProps, props: EChartsReactProps) => boolean
-}
-
-const EChartReact: React.FC<EChartsReactProps> = (props) => {
-    const elementRef = useRef<HTMLDivElement>(null)
-    const prevProps = usePrevious(props)
-    const [echarts] = useState(props.echarts)
-    const [isInitialResize, setIsInitialResize] = useState(true)
-
-    const { style, className = '', theme, opts } = props
-
-    const renderNewECharts = () => {
-        const { onEvents, onChartReady } = props
-
-        const eChartsInstance = updateEChartsOption()
-
-        bindEvents(eChartsInstance, onEvents || {})
-
-        if (typeof onChartReady === 'function') {
-            onChartReady(eChartsInstance)
-        }
-
-        if (elementRef.current) {
-            bind(elementRef.current, () => {
-                resize()
-            })
-        }
-
-        return () => {
-            dispose()
-        }
-    }
-
-    const updateEChartsOption = () => {
-        const { option, notMerge = false, lazyUpdate = false, showLoading, loadingOption } = props
-
-        const eChartsInstance = getEChartsInstance()
-        eChartsInstance.setOption(option, notMerge, lazyUpdate)
-        if (showLoading) {
-            eChartsInstance.showLoading(loadingOption)
-        } else {
-            eChartsInstance.hideLoading()
-        }
-
-        return eChartsInstance
-    }
-
-    const getEChartsInstance = () =>
-        (elementRef.current && echarts.getInstanceByDom(elementRef.current)) ||
-        echarts.init(elementRef.current, theme, opts)
-
-    const bindEvents = (instance: EChartsType, events: EChartsReactProps['onEvents']) => {
-        const _bindEvents = (
-            eventName: string,
-            func: (param: unknown, instance: EChartsType) => void
-        ) => {
-            if (typeof func === 'function') {
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
-                instance.on(eventName, (param: unknown) => {
-                    func(param, instance)
-                })
-            }
-        }
-
-        for (const eventName in events) {
-            if (Object.prototype.hasOwnProperty.call(events, eventName)) {
-                _bindEvents(eventName, events[eventName])
-            }
-        }
-    }
-
-    const resize = () => {
-        const eChartsInstance = getEChartsInstance()
-
-        if (!isInitialResize) {
-            try {
-                eChartsInstance.resize()
-            } catch (e) {
-                console.warn(e)
-            }
-        }
-
-        setIsInitialResize(false)
-    }
-
-    const dispose = () => {
-        if (elementRef.current) {
-            try {
-                clear(elementRef.current)
-            } catch (e) {
-                console.warn(e)
-            }
-            echarts.dispose(elementRef.current)
-        }
-    }
-
-    const pick = (obj: EChartsReactProps | undefined, keys: string[]): Record<string, unknown> => {
-        const r = {}
-        keys.forEach((key) => {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            r[key] = obj[key]
-        })
-        return r
-    }
-
-    useEffect(() => {
-        renderNewECharts()
-    })
-
-    useEffect(() => {
-        const { shouldSetOption } = props
-        if (
-            typeof shouldSetOption === 'function' &&
-            prevProps &&
-            !shouldSetOption(prevProps, props)
-        ) {
-            return
-        }
-
-        if (
-            !isEqual(prevProps?.theme, props.theme) ||
-            !isEqual(prevProps?.opts, props.opts) ||
-            !isEqual(prevProps?.onEvents, props.onEvents)
-        ) {
-            dispose()
-            renderNewECharts()
-            return
-        }
-
-        const pickKeys = ['option', 'notMerge', 'lazyUpdate', 'showLoading', 'loadingOption']
-        if (!isEqual(pick(props, pickKeys), pick(prevProps, pickKeys))) {
-            updateEChartsOption()
-        }
-
-        if (
-            !isEqual(prevProps?.style, props.style) ||
-            !isEqual(prevProps?.className, props.className)
-        ) {
-            resize()
-        }
-    }, [props])
-
-    return <div ref={elementRef} style={style} className={`echarts-react ${className}`}></div>
-}
-
-export default EChartReact
diff --git a/src/global.d.ts b/src/global.d.ts
index 0524f23..e05f83a 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -361,6 +361,7 @@ interface CpuInfoVo {
     irq: number
     softirq: number
     steal: number
+    total: number
     processors: CpuInfoVo[]
 }
 
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 65d601a..ec76b2e 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Icon from '@ant-design/icons'
 import * as echarts from 'echarts/core'
 import {
@@ -8,7 +8,7 @@ import {
     GridComponentOption
 } from 'echarts/components'
 import { BarChart, BarSeriesOption } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
+import { SVGRenderer } from 'echarts/renderers'
 import '@/assets/css/pages/system/index.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { utcToLocalTime } from '@/util/datetime'
@@ -22,12 +22,12 @@ import FlexBox from '@/components/common/FlexBox'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import LoadingMask from '@/components/common/LoadingMask'
-import EChartReact from '@/components/common/echarts/EChartReact'
 
-echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer])
+echarts.use([TooltipComponent, GridComponent, BarChart, SVGRenderer])
 type EChartsOption = echarts.ComposeOption<
     TooltipComponentOption | GridComponentOption | BarSeriesOption
 >
+
 interface CommonCardProps extends React.PropsWithChildren {
     icon: IconComponent
     title: string
@@ -174,47 +174,54 @@ const HardwareInfo: React.FC = () => {
 }
 
 const CPUInfo: React.FC = () => {
-    const [cpuInfoData, setCpuInfoData] = useState<BarSeriesOption[]>()
+    const keyDivRef = useRef<HTMLDivElement>(null)
+    const percentDivRef = useRef<HTMLDivElement>(null)
+    const cpuInfoDivRef = useRef<HTMLDivElement>(null)
+    const cpuInfoEChatsRef = useRef<echarts.EChartsType[]>([])
+    const [isLoading, setIsLoading] = useState(true)
+    const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([])
 
     const defaultSeriesOption: BarSeriesOption = {
         type: 'bar',
         stack: 'total',
-        emphasis: {
-            focus: 'series'
+        itemStyle: {
+            color: (params) => {
+                switch (params.seriesName) {
+                    case 'idle':
+                        return '#F5F5F5'
+                    default:
+                        return params.color ?? echarts.color.random()
+                }
+            }
+        },
+        tooltip: {
+            valueFormatter: (value) => `${((value as number) * 100).toFixed(2)}%`
         }
     }
 
     useUpdatedEffect(() => {
-        setInterval(
-            () =>
-                r_sys_statistics_cpu().then((res) => {
-                    const response = res.data
-                    if (response.success) {
-                        const data = response.data
-                        if (data) {
-                            const cpuInfoData = Object.entries(data)
-                                .filter(([key]) => key !== 'processors')
-                                .map(([key, value]) => ({
-                                    ...defaultSeriesOption,
-                                    name: key,
-                                    data: [value as number]
-                                }))
-                            console.log(cpuInfoData)
-                            setCpuInfoData(cpuInfoData)
-                        }
-                    }
-                }),
-            5000
-        )
+        const intervalId = setInterval(() => getCpuInfo(), 2000)
+
+        const handleOnWindowResize = () => {
+            setTimeout(() => {
+                cpuInfoEChatsRef.current.forEach((value) => value.resize())
+            }, 50)
+        }
+
+        window.addEventListener('resize', handleOnWindowResize)
+
+        return () => {
+            clearInterval(intervalId)
+            window.removeEventListener('resize', handleOnWindowResize)
+        }
     }, [])
 
-    const option: EChartsOption = {
+    const cpuInfoEChartBaseOption: EChartsOption = {
         tooltip: {},
         xAxis: {
             show: false
         },
         yAxis: {
-            data: ['总使用'],
             axisLine: {
                 show: false
             },
@@ -230,30 +237,109 @@ const CPUInfo: React.FC = () => {
             axisPointer: {
                 show: false
             }
-        },
-        series: cpuInfoData
+        }
     }
 
+    const getCpuInfo = () => {
+        void r_sys_statistics_cpu().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    if (isLoading) {
+                        setIsLoading(false)
+                    }
+
+                    setTimeout(() => {
+                        const dataList = data.processors.map((value) =>
+                            cpuInfoVoToCpuInfoData(value)
+                        )
+                        dataList.unshift(cpuInfoVoToCpuInfoData(data))
+
+                        setCpuInfoEChartsOption(
+                            dataList.map((value, index) => ({
+                                ...cpuInfoEChartBaseOption,
+                                yAxis: {
+                                    ...cpuInfoEChartBaseOption.yAxis,
+                                    data: [index === 0 ? '总占用' : `CPU ${index - 1}`]
+                                },
+                                series: value
+                            }))
+                        )
+
+                        if (percentDivRef.current) {
+                            percentDivRef.current.innerHTML = ''
+                            dataList.forEach((value) => {
+                                const percentElement = document.createElement('div')
+                                const idle = value.find((item) => item.name === 'idle')?.data[0]
+                                percentElement.innerText =
+                                    idle !== undefined
+                                        ? `${((1 - idle) * 100).toFixed(2)}%`
+                                        : 'Unknown'
+                                percentDivRef.current?.appendChild(percentElement)
+                            })
+                        }
+
+                        if (cpuInfoDivRef.current?.childElementCount !== dataList.length) {
+                            keyDivRef.current && (keyDivRef.current.innerHTML = '')
+                            cpuInfoDivRef.current && (cpuInfoDivRef.current.innerHTML = '')
+                            for (let i = 0; i < dataList.length; i++) {
+                                const keyElement = document.createElement('div')
+                                keyElement.innerText = i === 0 ? '总占用' : `CPU ${i - 1}`
+                                keyDivRef.current?.appendChild(keyElement)
+
+                                const valueElement = document.createElement('div')
+                                cpuInfoDivRef.current?.appendChild(valueElement)
+                                cpuInfoEChatsRef.current.push(
+                                    echarts.init(valueElement, null, { renderer: 'svg' })
+                                )
+                            }
+                        }
+                    })
+                }
+            }
+        })
+    }
+
+    const cpuInfoVoToCpuInfoData = (cpuInfoVo: CpuInfoVo) =>
+        Object.entries(cpuInfoVo)
+            .filter(([key]) => !['total', 'processors'].includes(key))
+            .map(([key, value]) => ({
+                ...defaultSeriesOption,
+                name: key,
+                data: [(value as number) / cpuInfoVo.total]
+            }))
+            .sort((a, b) => {
+                const order = [
+                    'steal',
+                    'irq',
+                    'softirq',
+                    'iowait',
+                    'system',
+                    'nice',
+                    'user',
+                    'idle'
+                ]
+                return order.indexOf(a.name) - order.indexOf(b.name)
+            })
+
+    useEffect(() => {
+        cpuInfoEChatsRef.current?.forEach((value, index) => {
+            try {
+                value.setOption(cpuInfoEChartsOption[index])
+            } catch (e) {
+                /* empty */
+            }
+        })
+    }, [cpuInfoEChartsOption])
+
     return (
         <>
-            <CommonCard icon={IconFatwebCpu} title={'CPU 信息'} loading={false}>
+            <CommonCard icon={IconFatwebCpu} title={'CPU 信息'} loading={isLoading}>
                 <FlexBox className={'card-content'} direction={'horizontal'}>
-                    <FlexBox className={'key'}>
-                        <div>总占用</div>
-                        <div>总占用</div>
-                        <div>总占用</div>
-                    </FlexBox>
-                    <FlexBox className={'value-chart'}>
-                        <div>
-                            <EChartReact
-                                echarts={echarts}
-                                opts={{ renderer: 'svg', height: 12 }}
-                                option={option}
-                            />
-                        </div>
-                        <div></div>
-                        <div></div>
-                    </FlexBox>
+                    <FlexBox className={'key'} ref={keyDivRef} />
+                    <FlexBox className={'value-chart'} ref={cpuInfoDivRef} />
+                    <FlexBox className={'value-percent'} ref={percentDivRef} />
                 </FlexBox>
             </CommonCard>
         </>
@@ -287,7 +373,6 @@ const System: React.FC = () => {
                         <CPUInfo />
                         <MemoryInfo />
                         <JvmInfo />
-                        <div />
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>
diff --git a/src/util/hooks.tsx b/src/util/hooks.tsx
index 4667408..6152d2a 100644
--- a/src/util/hooks.tsx
+++ b/src/util/hooks.tsx
@@ -10,7 +10,7 @@ export const useUpdatedEffect = (
         if (isFirstRender.current) {
             isFirstRender.current = false
         } else {
-            effect()
+            return effect()
         }
     }, dependencies)
 }

From 633985af8e6739cfc24046dc76a96d081f6e73a3 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 8 Dec 2023 17:14:32 +0800
Subject: [PATCH 117/307] Finish memory statistics information

---
 src/global.d.ts            |   2 +
 src/pages/system/index.tsx | 293 ++++++++++++++++++++++++++++++-------
 src/util/common.tsx        |  77 ++++++++++
 3 files changed, 322 insertions(+), 50 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index e05f83a..16a1fab 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -372,4 +372,6 @@ interface MemoryInfoVo {
     virtualMax: number
     swapTotal: number
     swapUsed: number
+    jvmTotal: number
+    jvmFree: number
 }
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index ec76b2e..6add3f4 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -15,6 +15,7 @@ import { utcToLocalTime } from '@/util/datetime'
 import {
     r_sys_statistics_cpu,
     r_sys_statistics_hardware,
+    r_sys_statistics_memory,
     r_sys_statistics_software
 } from '@/services/system'
 import Card from '@/components/common/Card'
@@ -22,6 +23,7 @@ import FlexBox from '@/components/common/FlexBox'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import LoadingMask from '@/components/common/LoadingMask'
+import { formatByteSize } from '@/util/common.tsx'
 
 echarts.use([TooltipComponent, GridComponent, BarChart, SVGRenderer])
 type EChartsOption = echarts.ComposeOption<
@@ -34,6 +36,50 @@ interface CommonCardProps extends React.PropsWithChildren {
     loading?: boolean
 }
 
+const barDefaultSeriesOption: BarSeriesOption = {
+    type: 'bar',
+    stack: 'total',
+    itemStyle: {
+        color: (params) => {
+            switch (params.seriesName) {
+                case 'idle':
+                case 'free':
+                    return '#F5F5F5'
+                default:
+                    return params.color ?? echarts.color.random()
+            }
+        }
+    }
+}
+
+const eChartsBaseOption: EChartsOption = {
+    tooltip: {
+        axisPointer: {
+            axis: 'x'
+        }
+    },
+    xAxis: {
+        show: false
+    },
+    yAxis: {
+        axisLine: {
+            show: false
+        },
+        axisLabel: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            show: false
+        },
+        axisPointer: {
+            show: false
+        }
+    }
+}
+
 const CommonCard: React.FC<CommonCardProps> = (props) => {
     return (
         <Card style={{ overflow: 'visible' }}>
@@ -181,26 +227,15 @@ const CPUInfo: React.FC = () => {
     const [isLoading, setIsLoading] = useState(true)
     const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([])
 
-    const defaultSeriesOption: BarSeriesOption = {
-        type: 'bar',
-        stack: 'total',
-        itemStyle: {
-            color: (params) => {
-                switch (params.seriesName) {
-                    case 'idle':
-                        return '#F5F5F5'
-                    default:
-                        return params.color ?? echarts.color.random()
-                }
-            }
-        },
+    const cpuDefaultSeriesOption: BarSeriesOption = {
+        ...barDefaultSeriesOption,
         tooltip: {
             valueFormatter: (value) => `${((value as number) * 100).toFixed(2)}%`
         }
     }
 
     useUpdatedEffect(() => {
-        const intervalId = setInterval(() => getCpuInfo(), 2000)
+        const intervalId = setInterval(getCpuInfo(), 2000)
 
         const handleOnWindowResize = () => {
             setTimeout(() => {
@@ -216,30 +251,6 @@ const CPUInfo: React.FC = () => {
         }
     }, [])
 
-    const cpuInfoEChartBaseOption: EChartsOption = {
-        tooltip: {},
-        xAxis: {
-            show: false
-        },
-        yAxis: {
-            axisLine: {
-                show: false
-            },
-            axisLabel: {
-                show: false
-            },
-            axisTick: {
-                show: false
-            },
-            splitLine: {
-                show: false
-            },
-            axisPointer: {
-                show: false
-            }
-        }
-    }
-
     const getCpuInfo = () => {
         void r_sys_statistics_cpu().then((res) => {
             const response = res.data
@@ -258,9 +269,9 @@ const CPUInfo: React.FC = () => {
 
                         setCpuInfoEChartsOption(
                             dataList.map((value, index) => ({
-                                ...cpuInfoEChartBaseOption,
+                                ...eChartsBaseOption,
                                 yAxis: {
-                                    ...cpuInfoEChartBaseOption.yAxis,
+                                    ...eChartsBaseOption.yAxis,
                                     data: [index === 0 ? '总占用' : `CPU ${index - 1}`]
                                 },
                                 series: value
@@ -299,13 +310,15 @@ const CPUInfo: React.FC = () => {
                 }
             }
         })
+
+        return getCpuInfo
     }
 
     const cpuInfoVoToCpuInfoData = (cpuInfoVo: CpuInfoVo) =>
         Object.entries(cpuInfoVo)
             .filter(([key]) => !['total', 'processors'].includes(key))
             .map(([key, value]) => ({
-                ...defaultSeriesOption,
+                ...cpuDefaultSeriesOption,
                 name: key,
                 data: [(value as number) / cpuInfoVo.total]
             }))
@@ -347,17 +360,198 @@ const CPUInfo: React.FC = () => {
 }
 
 const MemoryInfo: React.FC = () => {
-    return (
-        <>
-            <CommonCard icon={IconFatwebMemory} title={'内存信息'} loading={true}></CommonCard>
-        </>
-    )
-}
+    const percentDivRef = useRef<HTMLDivElement>(null)
+    const memoryInfoDivRef = useRef<HTMLDivElement>(null)
+    const memoryInfoEChatsRef = useRef<echarts.EChartsType[]>([])
+    const [isLoading, setIsLoading] = useState(true)
+    const [memoryInfoEChartsOption, setMemoryInfoEChartsOption] = useState<EChartsOption[]>([])
+
+    const memoryDefaultSeriesOption: BarSeriesOption = {
+        ...barDefaultSeriesOption,
+        tooltip: { valueFormatter: (value) => formatByteSize(value as number) }
+    }
+
+    useUpdatedEffect(() => {
+        const intervalId = setInterval(getMemoryInfo(), 2000)
+
+        const handleOnWindowResize = () => {
+            setTimeout(() => {
+                memoryInfoEChatsRef.current.forEach((value) => value.resize())
+            }, 50)
+        }
+
+        window.addEventListener('resize', handleOnWindowResize)
+
+        return () => {
+            clearInterval(intervalId)
+            window.removeEventListener('resize', handleOnWindowResize)
+        }
+    }, [])
+
+    const getMemoryInfo = () => {
+        void r_sys_statistics_memory().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    if (isLoading) {
+                        setIsLoading(false)
+                    }
+
+                    setTimeout(() => {
+                        const eEchartsOptions = [
+                            {
+                                ...eChartsBaseOption,
+                                xAxis: {
+                                    ...eChartsBaseOption.xAxis,
+                                    max: data.total
+                                },
+                                yAxis: {
+                                    ...eChartsBaseOption.yAxis,
+                                    data: ['物理内存']
+                                },
+                                series: [
+                                    {
+                                        ...memoryDefaultSeriesOption,
+                                        name: 'used',
+                                        data: [data.total - data.free]
+                                    },
+                                    {
+                                        ...memoryDefaultSeriesOption,
+                                        name: 'free',
+                                        data: [data.free]
+                                    }
+                                ]
+                            },
+                            {
+                                ...eChartsBaseOption,
+                                xAxis: {
+                                    ...eChartsBaseOption.xAxis,
+                                    max: data.virtualMax
+                                },
+                                yAxis: {
+                                    ...eChartsBaseOption.yAxis,
+                                    data: ['虚拟']
+                                },
+                                series: [
+                                    {
+                                        ...memoryDefaultSeriesOption,
+                                        name: 'used',
+                                        data: [data.virtualInUse]
+                                    },
+                                    {
+                                        ...memoryDefaultSeriesOption,
+                                        name: 'free',
+                                        data: [data.virtualMax - data.virtualInUse]
+                                    }
+                                ]
+                            },
+                            {
+                                ...eChartsBaseOption,
+                                xAxis: {
+                                    ...eChartsBaseOption.xAxis,
+                                    max: data.swapTotal
+                                },
+                                yAxis: {
+                                    ...eChartsBaseOption.yAxis,
+                                    data: ['swap']
+                                },
+                                series: [
+                                    {
+                                        ...memoryDefaultSeriesOption,
+                                        name: 'used',
+                                        data: [data.swapUsed]
+                                    },
+                                    {
+                                        ...memoryDefaultSeriesOption,
+                                        name: 'free',
+                                        data: [data.swapTotal - data.swapUsed]
+                                    }
+                                ]
+                            },
+                            {
+                                ...eChartsBaseOption,
+                                xAxis: {
+                                    ...eChartsBaseOption.xAxis,
+                                    max: data.jvmTotal
+                                },
+                                yAxis: {
+                                    ...eChartsBaseOption.yAxis,
+                                    data: ['jvm 内存']
+                                },
+                                series: [
+                                    {
+                                        ...memoryDefaultSeriesOption,
+                                        name: 'used',
+                                        data: [data.jvmTotal - data.jvmFree]
+                                    },
+                                    {
+                                        ...memoryDefaultSeriesOption,
+                                        name: 'free',
+                                        data: [data.jvmFree]
+                                    }
+                                ]
+                            }
+                        ]
+                        setMemoryInfoEChartsOption(eEchartsOptions)
+
+                        if (percentDivRef.current) {
+                            percentDivRef.current.innerHTML = ''
+                            eEchartsOptions.forEach((value) => {
+                                const percentElement = document.createElement('div')
+                                percentElement.innerText = `${(
+                                    (value.series[0].data[0] /
+                                        (value.series[0].data[0] + value.series[1].data[0])) *
+                                    100
+                                ).toFixed(2)}%`
+
+                                percentDivRef.current?.appendChild(percentElement)
+                            })
+                        }
+
+                        if (!memoryInfoEChatsRef.current.length) {
+                            memoryInfoDivRef.current && (memoryInfoDivRef.current.innerHTML = '')
+
+                            eEchartsOptions.forEach(() => {
+                                const element = document.createElement('div')
+                                memoryInfoDivRef.current?.appendChild(element)
+                                memoryInfoEChatsRef.current.push(
+                                    echarts.init(element, null, { renderer: 'svg' })
+                                )
+                            })
+                        }
+                    })
+                }
+            }
+        })
+
+        return getMemoryInfo
+    }
+
+    useEffect(() => {
+        memoryInfoEChatsRef.current?.forEach((value, index) => {
+            try {
+                value.setOption(memoryInfoEChartsOption[index])
+            } catch (e) {
+                /* empty */
+            }
+        })
+    }, [memoryInfoEChartsOption])
 
-const JvmInfo: React.FC = () => {
     return (
         <>
-            <CommonCard icon={IconFatwebJava} title={'JVM 信息'} loading={true}></CommonCard>
+            <CommonCard icon={IconFatwebMemory} title={'内存信息'} loading={isLoading}>
+                <FlexBox className={'card-content'} direction={'horizontal'}>
+                    <FlexBox className={'key'}>
+                        <div>物理内存</div>
+                        <div>虚拟内存</div>
+                        <div>swap</div>
+                        <div>jvm 内存</div>
+                    </FlexBox>
+                    <FlexBox className={'value-chart'} ref={memoryInfoDivRef} />
+                    <FlexBox className={'value-percent'} ref={percentDivRef} />
+                </FlexBox>
+            </CommonCard>
         </>
     )
 }
@@ -372,7 +566,6 @@ const System: React.FC = () => {
                         <HardwareInfo />
                         <CPUInfo />
                         <MemoryInfo />
-                        <JvmInfo />
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>
diff --git a/src/util/common.tsx b/src/util/common.tsx
index 099ff6a..1e014ea 100644
--- a/src/util/common.tsx
+++ b/src/util/common.tsx
@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
+import { floor } from 'lodash'
 
 export const randomInt = (start: number, end: number) => {
     if (start > end) {
@@ -54,3 +55,79 @@ export const removeLoadingMask = (id: string) => {
         value.parentNode?.removeChild(value)
     })
 }
+
+export enum ByteUnit {
+    B = 'B',
+    KiB = 'KiB',
+    Mib = 'Mib',
+    GiB = 'GiB',
+    TiB = 'TiB',
+    PiB = 'PiB',
+    EiB = 'EiB',
+    ZiB = 'ZiB',
+    YiB = 'YiB'
+}
+
+export const formatByteSize = (byteSize: number): string => {
+    const BASE = 1024
+    if (byteSize <= -1) {
+        return byteSize.toString()
+    }
+
+    if (floor(byteSize / BASE) <= 0) {
+        return formatByte(byteSize, ByteUnit.B)
+    }
+
+    byteSize /= BASE
+    if (floor(byteSize / BASE) <= 0) {
+        return formatByte(byteSize, ByteUnit.KiB)
+    }
+
+    byteSize /= BASE
+    if (floor(byteSize / BASE) <= 0) {
+        return formatByte(byteSize, ByteUnit.Mib)
+    }
+
+    byteSize /= BASE
+    if (floor(byteSize / BASE) <= 0) {
+        return formatByte(byteSize, ByteUnit.GiB)
+    }
+
+    byteSize /= BASE
+    if (floor(byteSize / BASE) <= 0) {
+        return formatByte(byteSize, ByteUnit.TiB)
+    }
+
+    byteSize /= BASE
+    if (floor(byteSize / BASE) <= 0) {
+        return formatByte(byteSize, ByteUnit.PiB)
+    }
+
+    byteSize /= BASE
+    if (floor(byteSize / BASE) <= 0) {
+        return formatByte(byteSize, ByteUnit.EiB)
+    }
+
+    byteSize /= BASE
+    if (floor(byteSize / BASE) <= 0) {
+        return formatByte(byteSize, ByteUnit.ZiB)
+    }
+
+    byteSize /= BASE
+    return formatByte(byteSize, ByteUnit.YiB)
+}
+
+const formatByte = (size: number, unit: ByteUnit): string => {
+    let precision
+    if ((size * 1000) % 10 > 0) {
+        precision = 3
+    } else if ((size * 100) % 10 > 0) {
+        precision = 2
+    } else if ((size * 10) % 10 > 0) {
+        precision = 1
+    } else {
+        precision = 0
+    }
+
+    return `${size.toFixed(precision)}${unit}`
+}

From 81cc23248c4b7a1a81e732e7a92aadf298b8efe6 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 8 Dec 2023 17:47:08 +0800
Subject: [PATCH 118/307] Optimize code

---
 src/pages/system/index.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 6add3f4..f2d4b29 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -53,11 +53,7 @@ const barDefaultSeriesOption: BarSeriesOption = {
 }
 
 const eChartsBaseOption: EChartsOption = {
-    tooltip: {
-        axisPointer: {
-            axis: 'x'
-        }
-    },
+    tooltip: {},
     xAxis: {
         show: false
     },
@@ -399,7 +395,7 @@ const MemoryInfo: React.FC = () => {
                     }
 
                     setTimeout(() => {
-                        const eEchartsOptions = [
+                        const eEchartsOption = [
                             {
                                 ...eChartsBaseOption,
                                 xAxis: {
@@ -493,11 +489,11 @@ const MemoryInfo: React.FC = () => {
                                 ]
                             }
                         ]
-                        setMemoryInfoEChartsOption(eEchartsOptions)
+                        setMemoryInfoEChartsOption(eEchartsOption)
 
                         if (percentDivRef.current) {
                             percentDivRef.current.innerHTML = ''
-                            eEchartsOptions.forEach((value) => {
+                            eEchartsOption.forEach((value) => {
                                 const percentElement = document.createElement('div')
                                 percentElement.innerText = `${(
                                     (value.series[0].data[0] /
@@ -512,7 +508,7 @@ const MemoryInfo: React.FC = () => {
                         if (!memoryInfoEChatsRef.current.length) {
                             memoryInfoDivRef.current && (memoryInfoDivRef.current.innerHTML = '')
 
-                            eEchartsOptions.forEach(() => {
+                            eEchartsOption.forEach(() => {
                                 const element = document.createElement('div')
                                 memoryInfoDivRef.current?.appendChild(element)
                                 memoryInfoEChatsRef.current.push(

From 88812f63c107a99a8bee1eace5b78a3c05d7cbd4 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 8 Dec 2023 18:13:15 +0800
Subject: [PATCH 119/307] Add disk.svg

---
 src/assets/svg/disk.svg | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/assets/svg/disk.svg

diff --git a/src/assets/svg/disk.svg b/src/assets/svg/disk.svg
new file mode 100644
index 0000000..16a5e21
--- /dev/null
+++ b/src/assets/svg/disk.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M960 736c0 41.27-33.4 74.66-74.67 74.66H138.67C97.4 810.66 64 777.27 64 736V586.67C64 545.4 97.4 512 138.67 512h746.67c41.26 0 74.66 33.4 74.66 74.67V736zM138.67 462.38c-13.84 0-35.31 4.29-47.95 9.54l150.05-225.19c12.17-18.37 40.08-33.39 62.02-33.39h417.7c22.19 0 49.86 14.79 62.26 33.39L932.8 471.92c-15.27-5.73-31.49-9.06-47.71-9.54H138.67z m472.8 198.96c0 27.43 22.19 49.86 49.86 49.86 27.43 0 49.86-22.18 49.86-49.86 0-27.43-22.42-49.86-49.86-49.86-27.43 0.24-49.86 22.43-49.86 49.86z m149.34 0c0 27.43 22.19 49.86 49.86 49.86 27.43 0 49.86-22.18 49.86-49.86 0-27.43-22.42-49.86-49.86-49.86-27.44 0.24-49.86 22.43-49.86 49.86z" /></svg>
\ No newline at end of file

From e9ba26174dbac1f84134a51d772689334dca4c00 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 9 Dec 2023 23:17:27 +0800
Subject: [PATCH 120/307] Optimize statistics page stylesheet

---
 src/assets/css/pages/system/index.scss | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss
index b603847..abdc828 100644
--- a/src/assets/css/pages/system/index.scss
+++ b/src/assets/css/pages/system/index.scss
@@ -6,7 +6,7 @@
   flex-wrap: wrap;
   justify-content: center;
 
-  >.card-box {
+  > .card-box {
     width: 48%;
     flex: 0 0 auto;
 
@@ -54,15 +54,21 @@
         .value-chart {
           justify-content: space-around;
           width: 0;
-          >div {
+
+          > div {
             max-height: 12px;
             height: 12px;
-            >* {
+
+            > * {
               transform: translateY(1px);
             }
           }
         }
 
+        .value-percent {
+          text-align: right;
+        }
+
         > * {
           gap: 5px;
         }

From 12e080ec85e3a591947d54f6f5e114c894441a8a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 9 Dec 2023 23:20:09 +0800
Subject: [PATCH 121/307] Add statistics filter to log management page

---
 src/pages/system/Log.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 925118c..1e7e36a 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -45,6 +45,7 @@ const Log: React.FC = () => {
             align: 'center',
             filters: [
                 { text: 'Info', value: 'INFO' },
+                { text: 'Statistics', value: 'STATISTICS' },
                 { text: 'Error', value: 'ERROR' }
             ]
         },

From b692ba7af6ea0313599073a5d0304f3a0decf801 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 10 Dec 2023 12:41:53 +0800
Subject: [PATCH 122/307] Finish storage information in statistics management
 page

---
 src/assets/css/pages/system/index.scss |   5 +
 src/constants/urls.constants.ts        |   3 +-
 src/global.d.ts                        |  17 +-
 src/pages/system/index.tsx             | 301 +++++++++++++------------
 src/services/system.tsx                |   7 +-
 5 files changed, 182 insertions(+), 151 deletions(-)

diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss
index abdc828..ecf9e7a 100644
--- a/src/assets/css/pages/system/index.scss
+++ b/src/assets/css/pages/system/index.scss
@@ -28,6 +28,11 @@
           display: flex;
           font-size: 1.2em;
         }
+
+        :nth-child(n+3) {
+          flex: 0 0 auto;
+          color: constants.$font-main-color;
+        }
       }
 
       .card-content {
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index c668bea..2de2b64 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -15,8 +15,7 @@ export const URL_SYS_STATISTICS = '/system/statistics'
 export const URL_SYS_STATISTICS_SOFTWARE = `${URL_SYS_STATISTICS}/software`
 export const URL_SYS_STATISTICS_HARDWARE = `${URL_SYS_STATISTICS}/hardware`
 export const URL_SYS_STATISTICS_CPU = `${URL_SYS_STATISTICS}/cpu`
-export const URL_SYS_STATISTICS_MEMORY = `${URL_SYS_STATISTICS}/memory`
-export const URL_SYS_STATISTICS_JVM = `${URL_SYS_STATISTICS}/jvm`
+export const URL_SYS_STATISTICS_STORAGE = `${URL_SYS_STATISTICS}/storage`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/global.d.ts b/src/global.d.ts
index 16a1fab..9be10db 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -365,13 +365,20 @@ interface CpuInfoVo {
     processors: CpuInfoVo[]
 }
 
-interface MemoryInfoVo {
-    total: number
-    free: number
-    virtualInUse: number
-    virtualMax: number
+interface StorageInfoVo {
+    memoryTotal: number
+    memoryFree: number
+    virtualMemoryInUse: number
+    virtualMemoryMax: number
     swapTotal: number
     swapUsed: number
     jvmTotal: number
     jvmFree: number
+    fileStores: FileStoreInfoVo[]
+}
+
+interface FileStoreInfoVo {
+    mount: string
+    total: number
+    free: number
 }
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index f2d4b29..4a8bb2a 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -11,31 +11,25 @@ import { BarChart, BarSeriesOption } from 'echarts/charts'
 import { SVGRenderer } from 'echarts/renderers'
 import '@/assets/css/pages/system/index.scss'
 import { useUpdatedEffect } from '@/util/hooks'
+import { formatByteSize } from '@/util/common'
 import { utcToLocalTime } from '@/util/datetime'
 import {
     r_sys_statistics_cpu,
     r_sys_statistics_hardware,
-    r_sys_statistics_memory,
-    r_sys_statistics_software
+    r_sys_statistics_software,
+    r_sys_statistics_storage
 } from '@/services/system'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import LoadingMask from '@/components/common/LoadingMask'
-import { formatByteSize } from '@/util/common.tsx'
 
 echarts.use([TooltipComponent, GridComponent, BarChart, SVGRenderer])
 type EChartsOption = echarts.ComposeOption<
     TooltipComponentOption | GridComponentOption | BarSeriesOption
 >
 
-interface CommonCardProps extends React.PropsWithChildren {
-    icon: IconComponent
-    title: string
-    loading?: boolean
-}
-
 const barDefaultSeriesOption: BarSeriesOption = {
     type: 'bar',
     stack: 'total',
@@ -76,6 +70,13 @@ const eChartsBaseOption: EChartsOption = {
     }
 }
 
+interface CommonCardProps extends React.PropsWithChildren {
+    icon: IconComponent
+    title: string
+    loading?: boolean
+    expand?: React.ReactNode
+}
+
 const CommonCard: React.FC<CommonCardProps> = (props) => {
     return (
         <Card style={{ overflow: 'visible' }}>
@@ -83,6 +84,7 @@ const CommonCard: React.FC<CommonCardProps> = (props) => {
                 <FlexBox direction={'horizontal'} className={'head'}>
                     <Icon component={props.icon} className={'icon'} />
                     <div className={'title'}>{props.title}</div>
+                    {props.expand}
                 </FlexBox>
                 <LoadingMask
                     hidden={!props.loading}
@@ -221,6 +223,7 @@ const CPUInfo: React.FC = () => {
     const cpuInfoDivRef = useRef<HTMLDivElement>(null)
     const cpuInfoEChatsRef = useRef<echarts.EChartsType[]>([])
     const [isLoading, setIsLoading] = useState(true)
+    const [refreshInterval, setRefreshInterval] = useState('5')
     const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([])
 
     const cpuDefaultSeriesOption: BarSeriesOption = {
@@ -231,8 +234,6 @@ const CPUInfo: React.FC = () => {
     }
 
     useUpdatedEffect(() => {
-        const intervalId = setInterval(getCpuInfo(), 2000)
-
         const handleOnWindowResize = () => {
             setTimeout(() => {
                 cpuInfoEChatsRef.current.forEach((value) => value.resize())
@@ -242,11 +243,18 @@ const CPUInfo: React.FC = () => {
         window.addEventListener('resize', handleOnWindowResize)
 
         return () => {
-            clearInterval(intervalId)
             window.removeEventListener('resize', handleOnWindowResize)
         }
     }, [])
 
+    useUpdatedEffect(() => {
+        const intervalId = setInterval(getCpuInfo(), parseInt(refreshInterval) * 1000)
+
+        return () => {
+            clearInterval(intervalId)
+        }
+    }, [refreshInterval])
+
     const getCpuInfo = () => {
         void r_sys_statistics_cpu().then((res) => {
             const response = res.data
@@ -287,7 +295,7 @@ const CPUInfo: React.FC = () => {
                             })
                         }
 
-                        if (cpuInfoDivRef.current?.childElementCount !== dataList.length) {
+                        if (!cpuInfoEChatsRef.current.length) {
                             keyDivRef.current && (keyDivRef.current.innerHTML = '')
                             cpuInfoDivRef.current && (cpuInfoDivRef.current.innerHTML = '')
                             for (let i = 0; i < dataList.length; i++) {
@@ -344,7 +352,31 @@ const CPUInfo: React.FC = () => {
 
     return (
         <>
-            <CommonCard icon={IconFatwebCpu} title={'CPU 信息'} loading={isLoading}>
+            <CommonCard
+                icon={IconFatwebCpu}
+                title={'CPU 信息'}
+                loading={isLoading}
+                expand={
+                    <AntdSelect
+                        value={refreshInterval}
+                        onChange={(value) => setRefreshInterval(value)}
+                    >
+                        <AntdSelect.Option key={1}>1秒</AntdSelect.Option>
+                        <AntdSelect.Option key={2}>2秒</AntdSelect.Option>
+                        <AntdSelect.Option key={3}>3秒</AntdSelect.Option>
+                        <AntdSelect.Option key={5}>5秒</AntdSelect.Option>
+                        <AntdSelect.Option key={10}>10秒</AntdSelect.Option>
+                        <AntdSelect.Option key={15}>15秒</AntdSelect.Option>
+                        <AntdSelect.Option key={20}>20秒</AntdSelect.Option>
+                        <AntdSelect.Option key={30}>30秒</AntdSelect.Option>
+                        <AntdSelect.Option key={60}>60秒</AntdSelect.Option>
+                        <AntdSelect.Option key={120}>2分</AntdSelect.Option>
+                        <AntdSelect.Option key={180}>3分</AntdSelect.Option>
+                        <AntdSelect.Option key={300}>5分</AntdSelect.Option>
+                        <AntdSelect.Option key={600}>10分</AntdSelect.Option>
+                    </AntdSelect>
+                }
+            >
                 <FlexBox className={'card-content'} direction={'horizontal'}>
                     <FlexBox className={'key'} ref={keyDivRef} />
                     <FlexBox className={'value-chart'} ref={cpuInfoDivRef} />
@@ -355,37 +387,44 @@ const CPUInfo: React.FC = () => {
     )
 }
 
-const MemoryInfo: React.FC = () => {
+const StorageInfo: React.FC = () => {
+    const keyDivRef = useRef<HTMLDivElement>(null)
     const percentDivRef = useRef<HTMLDivElement>(null)
-    const memoryInfoDivRef = useRef<HTMLDivElement>(null)
-    const memoryInfoEChatsRef = useRef<echarts.EChartsType[]>([])
+    const storageInfoDivRef = useRef<HTMLDivElement>(null)
+    const storageInfoEChatsRef = useRef<echarts.EChartsType[]>([])
     const [isLoading, setIsLoading] = useState(true)
-    const [memoryInfoEChartsOption, setMemoryInfoEChartsOption] = useState<EChartsOption[]>([])
+    const [refreshInterval, setRefreshInterval] = useState('5')
+    const [storageInfoEChartsOption, setStorageInfoEChartsOption] = useState<EChartsOption[]>([])
 
-    const memoryDefaultSeriesOption: BarSeriesOption = {
+    const storageDefaultSeriesOption: BarSeriesOption = {
         ...barDefaultSeriesOption,
         tooltip: { valueFormatter: (value) => formatByteSize(value as number) }
     }
 
     useUpdatedEffect(() => {
-        const intervalId = setInterval(getMemoryInfo(), 2000)
-
         const handleOnWindowResize = () => {
             setTimeout(() => {
-                memoryInfoEChatsRef.current.forEach((value) => value.resize())
+                storageInfoEChatsRef.current.forEach((value) => value.resize())
             }, 50)
         }
 
         window.addEventListener('resize', handleOnWindowResize)
 
         return () => {
-            clearInterval(intervalId)
             window.removeEventListener('resize', handleOnWindowResize)
         }
     }, [])
 
-    const getMemoryInfo = () => {
-        void r_sys_statistics_memory().then((res) => {
+    useUpdatedEffect(() => {
+        const intervalId = setInterval(getStorageInfo(), parseInt(refreshInterval) * 1000)
+
+        return () => {
+            clearInterval(intervalId)
+        }
+    }, [refreshInterval])
+
+    const getStorageInfo = () => {
+        void r_sys_statistics_storage().then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
@@ -395,123 +434,64 @@ const MemoryInfo: React.FC = () => {
                     }
 
                     setTimeout(() => {
-                        const eEchartsOption = [
-                            {
-                                ...eChartsBaseOption,
-                                xAxis: {
-                                    ...eChartsBaseOption.xAxis,
-                                    max: data.total
-                                },
-                                yAxis: {
-                                    ...eChartsBaseOption.yAxis,
-                                    data: ['物理内存']
-                                },
-                                series: [
-                                    {
-                                        ...memoryDefaultSeriesOption,
-                                        name: 'used',
-                                        data: [data.total - data.free]
-                                    },
-                                    {
-                                        ...memoryDefaultSeriesOption,
-                                        name: 'free',
-                                        data: [data.free]
-                                    }
-                                ]
-                            },
-                            {
-                                ...eChartsBaseOption,
-                                xAxis: {
-                                    ...eChartsBaseOption.xAxis,
-                                    max: data.virtualMax
-                                },
-                                yAxis: {
-                                    ...eChartsBaseOption.yAxis,
-                                    data: ['虚拟']
-                                },
-                                series: [
-                                    {
-                                        ...memoryDefaultSeriesOption,
-                                        name: 'used',
-                                        data: [data.virtualInUse]
-                                    },
-                                    {
-                                        ...memoryDefaultSeriesOption,
-                                        name: 'free',
-                                        data: [data.virtualMax - data.virtualInUse]
-                                    }
-                                ]
-                            },
-                            {
-                                ...eChartsBaseOption,
-                                xAxis: {
-                                    ...eChartsBaseOption.xAxis,
-                                    max: data.swapTotal
-                                },
-                                yAxis: {
-                                    ...eChartsBaseOption.yAxis,
-                                    data: ['swap']
-                                },
-                                series: [
-                                    {
-                                        ...memoryDefaultSeriesOption,
-                                        name: 'used',
-                                        data: [data.swapUsed]
-                                    },
-                                    {
-                                        ...memoryDefaultSeriesOption,
-                                        name: 'free',
-                                        data: [data.swapTotal - data.swapUsed]
-                                    }
-                                ]
-                            },
-                            {
-                                ...eChartsBaseOption,
-                                xAxis: {
-                                    ...eChartsBaseOption.xAxis,
-                                    max: data.jvmTotal
-                                },
-                                yAxis: {
-                                    ...eChartsBaseOption.yAxis,
-                                    data: ['jvm 内存']
-                                },
-                                series: [
-                                    {
-                                        ...memoryDefaultSeriesOption,
-                                        name: 'used',
-                                        data: [data.jvmTotal - data.jvmFree]
-                                    },
-                                    {
-                                        ...memoryDefaultSeriesOption,
-                                        name: 'free',
-                                        data: [data.jvmFree]
-                                    }
-                                ]
-                            }
+                        const eChartsOptions = [
+                            storageInfoVoToStorageEChartsOption(
+                                '物理内存',
+                                data.memoryTotal - data.memoryFree,
+                                data.memoryFree
+                            ),
+                            storageInfoVoToStorageEChartsOption(
+                                '虚拟内存',
+                                data.virtualMemoryInUse,
+                                data.virtualMemoryMax - data.virtualMemoryInUse
+                            ),
+                            storageInfoVoToStorageEChartsOption(
+                                'swap',
+                                data.swapUsed,
+                                data.swapTotal - data.swapUsed
+                            ),
+                            storageInfoVoToStorageEChartsOption(
+                                'jvm 内存',
+                                data.jvmTotal - data.jvmFree,
+                                data.jvmFree
+                            )
                         ]
-                        setMemoryInfoEChartsOption(eEchartsOption)
+                        data.fileStores.forEach((value) =>
+                            eChartsOptions.push(
+                                storageInfoVoToStorageEChartsOption(
+                                    value.mount,
+                                    value.total - value.free,
+                                    value.free
+                                )
+                            )
+                        )
+                        setStorageInfoEChartsOption(eChartsOptions)
 
-                        if (percentDivRef.current) {
+                        if (percentDivRef.current && keyDivRef.current) {
+                            keyDivRef.current.innerHTML = ''
                             percentDivRef.current.innerHTML = ''
-                            eEchartsOption.forEach((value) => {
+                            eChartsOptions.forEach((value) => {
+                                const keyElement = document.createElement('div')
                                 const percentElement = document.createElement('div')
+                                keyElement.innerText = value.yAxis.data[0]
                                 percentElement.innerText = `${(
                                     (value.series[0].data[0] /
                                         (value.series[0].data[0] + value.series[1].data[0])) *
                                     100
                                 ).toFixed(2)}%`
 
+                                keyDivRef.current?.appendChild(keyElement)
                                 percentDivRef.current?.appendChild(percentElement)
                             })
                         }
 
-                        if (!memoryInfoEChatsRef.current.length) {
-                            memoryInfoDivRef.current && (memoryInfoDivRef.current.innerHTML = '')
+                        if (!storageInfoEChatsRef.current.length) {
+                            storageInfoDivRef.current && (storageInfoDivRef.current.innerHTML = '')
 
-                            eEchartsOption.forEach(() => {
+                            eChartsOptions.forEach(() => {
                                 const element = document.createElement('div')
-                                memoryInfoDivRef.current?.appendChild(element)
-                                memoryInfoEChatsRef.current.push(
+                                storageInfoDivRef.current?.appendChild(element)
+                                storageInfoEChatsRef.current.push(
                                     echarts.init(element, null, { renderer: 'svg' })
                                 )
                             })
@@ -521,30 +501,73 @@ const MemoryInfo: React.FC = () => {
             }
         })
 
-        return getMemoryInfo
+        return getStorageInfo
     }
 
+    const storageInfoVoToStorageEChartsOption = (label: string, used: number, free: number) => ({
+        ...eChartsBaseOption,
+        xAxis: {
+            ...eChartsBaseOption.xAxis,
+            max: used + free
+        },
+        yAxis: {
+            ...eChartsBaseOption.yAxis,
+            data: [label]
+        },
+        series: [
+            {
+                ...storageDefaultSeriesOption,
+                name: 'used',
+                data: [used]
+            },
+            {
+                ...storageDefaultSeriesOption,
+                name: 'free',
+                data: [free]
+            }
+        ]
+    })
+
     useEffect(() => {
-        memoryInfoEChatsRef.current?.forEach((value, index) => {
+        storageInfoEChatsRef.current?.forEach((value, index) => {
             try {
-                value.setOption(memoryInfoEChartsOption[index])
+                value.setOption(storageInfoEChartsOption[index])
             } catch (e) {
                 /* empty */
             }
         })
-    }, [memoryInfoEChartsOption])
+    }, [storageInfoEChartsOption])
 
     return (
         <>
-            <CommonCard icon={IconFatwebMemory} title={'内存信息'} loading={isLoading}>
+            <CommonCard
+                icon={IconFatwebMemory}
+                title={'内存信息'}
+                loading={isLoading}
+                expand={
+                    <AntdSelect
+                        value={refreshInterval}
+                        onChange={(value) => setRefreshInterval(value)}
+                    >
+                        <AntdSelect.Option key={1}>1秒</AntdSelect.Option>
+                        <AntdSelect.Option key={2}>2秒</AntdSelect.Option>
+                        <AntdSelect.Option key={3}>3秒</AntdSelect.Option>
+                        <AntdSelect.Option key={5}>5秒</AntdSelect.Option>
+                        <AntdSelect.Option key={10}>10秒</AntdSelect.Option>
+                        <AntdSelect.Option key={15}>15秒</AntdSelect.Option>
+                        <AntdSelect.Option key={20}>20秒</AntdSelect.Option>
+                        <AntdSelect.Option key={30}>30秒</AntdSelect.Option>
+                        <AntdSelect.Option key={60}>60秒</AntdSelect.Option>
+                        <AntdSelect.Option key={120}>2分</AntdSelect.Option>
+                        <AntdSelect.Option key={180}>3分</AntdSelect.Option>
+                        <AntdSelect.Option key={300}>5分</AntdSelect.Option>
+                        <AntdSelect.Option key={600}>10分</AntdSelect.Option>
+                    </AntdSelect>
+                }
+            >
                 <FlexBox className={'card-content'} direction={'horizontal'}>
-                    <FlexBox className={'key'}>
-                        <div>物理内存</div>
-                        <div>虚拟内存</div>
-                        <div>swap</div>
-                        <div>jvm 内存</div>
-                    </FlexBox>
-                    <FlexBox className={'value-chart'} ref={memoryInfoDivRef} />
+                    <FlexBox className={'key'} ref={keyDivRef} />
+                    <FlexBox className={'value-chart'} ref={storageInfoDivRef} />
                     <FlexBox className={'value-percent'} ref={percentDivRef} />
                 </FlexBox>
             </CommonCard>
@@ -561,7 +584,7 @@ const System: React.FC = () => {
                         <SoftwareInfo />
                         <HardwareInfo />
                         <CPUInfo />
-                        <MemoryInfo />
+                        <StorageInfo />
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 37da0ec..599c24f 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -12,8 +12,7 @@ import {
     URL_SYS_STATISTICS_SOFTWARE,
     URL_SYS_STATISTICS_HARDWARE,
     URL_SYS_STATISTICS_CPU,
-    URL_SYS_STATISTICS_MEMORY,
-    URL_SYS_STATISTICS_JVM
+    URL_SYS_STATISTICS_STORAGE
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -86,6 +85,4 @@ export const r_sys_statistics_hardware = () =>
 
 export const r_sys_statistics_cpu = () => request.get<CpuInfoVo>(URL_SYS_STATISTICS_CPU)
 
-export const r_sys_statistics_memory = () => request.get<MemoryInfoVo>(URL_SYS_STATISTICS_MEMORY)
-
-export const r_sys_statistics_jvm = () => request.get<MemoryInfoVo>(URL_SYS_STATISTICS_JVM)
+export const r_sys_statistics_storage = () => request.get<StorageInfoVo>(URL_SYS_STATISTICS_STORAGE)

From 816351ea7361bedcd1be841f56657d9caebac900 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 11 Dec 2023 16:39:58 +0800
Subject: [PATCH 123/307] Fix chart can not resize when sidebar expand bug

---
 src/pages/system/index.tsx | 44 +++++++++++++++++---------------------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 4a8bb2a..e9dabb8 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -221,7 +221,7 @@ const CPUInfo: React.FC = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
     const percentDivRef = useRef<HTMLDivElement>(null)
     const cpuInfoDivRef = useRef<HTMLDivElement>(null)
-    const cpuInfoEChatsRef = useRef<echarts.EChartsType[]>([])
+    const cpuInfoEChartsRef = useRef<echarts.EChartsType[]>([])
     const [isLoading, setIsLoading] = useState(true)
     const [refreshInterval, setRefreshInterval] = useState('5')
     const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([])
@@ -234,18 +234,16 @@ const CPUInfo: React.FC = () => {
     }
 
     useUpdatedEffect(() => {
-        const handleOnWindowResize = () => {
-            setTimeout(() => {
-                cpuInfoEChatsRef.current.forEach((value) => value.resize())
-            }, 50)
-        }
+        const chartResizeObserver = new ResizeObserver(() => {
+            cpuInfoEChartsRef.current.forEach((value) => value.resize())
+        })
 
-        window.addEventListener('resize', handleOnWindowResize)
+        cpuInfoDivRef.current && chartResizeObserver.observe(cpuInfoDivRef.current)
 
         return () => {
-            window.removeEventListener('resize', handleOnWindowResize)
+            cpuInfoDivRef.current && chartResizeObserver.unobserve(cpuInfoDivRef.current)
         }
-    }, [])
+    }, [cpuInfoDivRef.current])
 
     useUpdatedEffect(() => {
         const intervalId = setInterval(getCpuInfo(), parseInt(refreshInterval) * 1000)
@@ -295,7 +293,7 @@ const CPUInfo: React.FC = () => {
                             })
                         }
 
-                        if (!cpuInfoEChatsRef.current.length) {
+                        if (!cpuInfoEChartsRef.current.length) {
                             keyDivRef.current && (keyDivRef.current.innerHTML = '')
                             cpuInfoDivRef.current && (cpuInfoDivRef.current.innerHTML = '')
                             for (let i = 0; i < dataList.length; i++) {
@@ -305,7 +303,7 @@ const CPUInfo: React.FC = () => {
 
                                 const valueElement = document.createElement('div')
                                 cpuInfoDivRef.current?.appendChild(valueElement)
-                                cpuInfoEChatsRef.current.push(
+                                cpuInfoEChartsRef.current.push(
                                     echarts.init(valueElement, null, { renderer: 'svg' })
                                 )
                             }
@@ -341,7 +339,7 @@ const CPUInfo: React.FC = () => {
             })
 
     useEffect(() => {
-        cpuInfoEChatsRef.current?.forEach((value, index) => {
+        cpuInfoEChartsRef.current?.forEach((value, index) => {
             try {
                 value.setOption(cpuInfoEChartsOption[index])
             } catch (e) {
@@ -391,7 +389,7 @@ const StorageInfo: React.FC = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
     const percentDivRef = useRef<HTMLDivElement>(null)
     const storageInfoDivRef = useRef<HTMLDivElement>(null)
-    const storageInfoEChatsRef = useRef<echarts.EChartsType[]>([])
+    const storageInfoEChartsRef = useRef<echarts.EChartsType[]>([])
     const [isLoading, setIsLoading] = useState(true)
     const [refreshInterval, setRefreshInterval] = useState('5')
     const [storageInfoEChartsOption, setStorageInfoEChartsOption] = useState<EChartsOption[]>([])
@@ -402,18 +400,16 @@ const StorageInfo: React.FC = () => {
     }
 
     useUpdatedEffect(() => {
-        const handleOnWindowResize = () => {
-            setTimeout(() => {
-                storageInfoEChatsRef.current.forEach((value) => value.resize())
-            }, 50)
-        }
+        const chartResizeObserver = new ResizeObserver(() => {
+            storageInfoEChartsRef.current.forEach((value) => value.resize())
+        })
 
-        window.addEventListener('resize', handleOnWindowResize)
+        storageInfoDivRef.current && chartResizeObserver.observe(storageInfoDivRef.current)
 
         return () => {
-            window.removeEventListener('resize', handleOnWindowResize)
+            storageInfoDivRef.current && chartResizeObserver.unobserve(storageInfoDivRef.current)
         }
-    }, [])
+    }, [storageInfoDivRef.current])
 
     useUpdatedEffect(() => {
         const intervalId = setInterval(getStorageInfo(), parseInt(refreshInterval) * 1000)
@@ -485,13 +481,13 @@ const StorageInfo: React.FC = () => {
                             })
                         }
 
-                        if (!storageInfoEChatsRef.current.length) {
+                        if (!storageInfoEChartsRef.current.length) {
                             storageInfoDivRef.current && (storageInfoDivRef.current.innerHTML = '')
 
                             eChartsOptions.forEach(() => {
                                 const element = document.createElement('div')
                                 storageInfoDivRef.current?.appendChild(element)
-                                storageInfoEChatsRef.current.push(
+                                storageInfoEChartsRef.current.push(
                                     echarts.init(element, null, { renderer: 'svg' })
                                 )
                             })
@@ -529,7 +525,7 @@ const StorageInfo: React.FC = () => {
     })
 
     useEffect(() => {
-        storageInfoEChatsRef.current?.forEach((value, index) => {
+        storageInfoEChartsRef.current?.forEach((value, index) => {
             try {
                 value.setOption(storageInfoEChartsOption[index])
             } catch (e) {

From 64e924f18cc5c392710acec4897aa65e6d120d1a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 12 Dec 2023 17:57:07 +0800
Subject: [PATCH 124/307] System log management adapts to sqlite

---
 src/global.d.ts          |  1 -
 src/pages/system/Log.tsx | 52 +---------------------------------------
 2 files changed, 1 insertion(+), 52 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index 9be10db..e7fe359 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -204,7 +204,6 @@ interface UserChangePasswordParam {
 
 interface SysLogGetParam extends PageParam {
     searchRequestUrl?: string
-    searchRegex?: boolean
     searchStartTime?: string
     searchEndTime?: string
 }
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 1e7e36a..3ef9a0f 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -1,10 +1,6 @@
 import React from 'react'
 import dayjs from 'dayjs'
-import {
-    COLOR_ERROR_SECONDARY,
-    COLOR_FONT_SECONDARY,
-    DATABASE_SELECT_SUCCESS
-} from '@/constants/common.constants'
+import { COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { useUpdatedEffect } from '@/util/hooks'
 import { dayjsToUtc, utcToLocalTime } from '@/util/datetime'
 import { r_sys_log_get } from '@/services/system'
@@ -28,8 +24,6 @@ const Log: React.FC = () => {
         }
     })
     const [searchRequestUrl, setSearchRequestUrl] = useState('')
-    const [useRegex, setUseRegex] = useState(false)
-    const [isRegexLegal, setIsRegexLegal] = useState(true)
     const [timeRange, setTimeRange] = useState<[string, string]>()
 
     const dataColumns: _ColumnsType<SysLogGetVo> = [
@@ -163,17 +157,6 @@ const Log: React.FC = () => {
 
     const handleOnSearchUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setSearchRequestUrl(e.target.value)
-
-        if (useRegex) {
-            try {
-                RegExp(e.target.value)
-                setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]')))
-            } catch (e) {
-                setIsRegexLegal(false)
-            }
-        } else {
-            setIsRegexLegal(true)
-        }
     }
 
     const handleOnSearchUrlKeyDown = (e: React.KeyboardEvent) => {
@@ -182,22 +165,6 @@ const Log: React.FC = () => {
         }
     }
 
-    const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
-        setUseRegex(e.target.checked)
-        if (e.target.checked) {
-            try {
-                RegExp(searchRequestUrl)
-                setIsRegexLegal(
-                    !(searchRequestUrl.includes('{}') || searchRequestUrl.includes('[]'))
-                )
-            } catch (e) {
-                setIsRegexLegal(false)
-            }
-        } else {
-            setIsRegexLegal(true)
-        }
-    }
-
     const handleOnDateRangeChange = (dates: [dayjs.Dayjs | null, dayjs.Dayjs | null] | null) => {
         if (dates && dates[0] && dates[1]) {
             setTimeRange([dayjsToUtc(dates[0]), dayjsToUtc(dates[1])])
@@ -215,11 +182,6 @@ const Log: React.FC = () => {
             return
         }
 
-        if (!isRegexLegal) {
-            void message.error('非法正则表达式')
-            return
-        }
-
         setLoading(true)
 
         void r_sys_log_get({
@@ -232,7 +194,6 @@ const Log: React.FC = () => {
             sortOrder:
                 tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
             searchRequestUrl: searchRequestUrl.trim().length ? searchRequestUrl : undefined,
-            searchRegex: useRegex ? useRegex : undefined,
             searchStartTime: timeRange && timeRange[0],
             searchEndTime: timeRange && timeRange[1],
             ...tableParams.filters
@@ -282,21 +243,10 @@ const Log: React.FC = () => {
                             请求 Url
                         </span>
                     }
-                    suffix={
-                        <>
-                            {!isRegexLegal ? (
-                                <span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
-                            ) : undefined}
-                            <AntdCheckbox checked={useRegex} onChange={handleOnUseRegexChange}>
-                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
-                            </AntdCheckbox>
-                        </>
-                    }
                     allowClear
                     value={searchRequestUrl}
                     onChange={handleOnSearchUrlChange}
                     onKeyDown={handleOnSearchUrlKeyDown}
-                    status={isRegexLegal ? undefined : 'error'}
                 />
             </Card>
             <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>

From 78e1aa3ebd695664253d9d54d1b8e14e06d0389d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 14 Dec 2023 18:31:25 +0800
Subject: [PATCH 125/307] Rename statistics to statistic

---
 src/constants/urls.constants.ts | 10 +++++-----
 src/pages/system/index.tsx      | 16 ++++++++--------
 src/services/system.tsx         | 20 ++++++++++----------
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 2de2b64..c4eadc9 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -11,11 +11,11 @@ export const URL_SYS_GROUP = '/system/group'
 export const URL_SYS_GROUP_LIST = '/system/group/list'
 export const URL_SYS_SETTINGS = '/system/settings'
 export const URL_SYS_SETTINGS_MAIL = `${URL_SYS_SETTINGS}/mail`
-export const URL_SYS_STATISTICS = '/system/statistics'
-export const URL_SYS_STATISTICS_SOFTWARE = `${URL_SYS_STATISTICS}/software`
-export const URL_SYS_STATISTICS_HARDWARE = `${URL_SYS_STATISTICS}/hardware`
-export const URL_SYS_STATISTICS_CPU = `${URL_SYS_STATISTICS}/cpu`
-export const URL_SYS_STATISTICS_STORAGE = `${URL_SYS_STATISTICS}/storage`
+export const URL_SYS_STATISTIC = '/system/statistic'
+export const URL_SYS_STATISTIC_SOFTWARE = `${URL_SYS_STATISTIC}/software`
+export const URL_SYS_STATISTIC_HARDWARE = `${URL_SYS_STATISTIC}/hardware`
+export const URL_SYS_STATISTIC_CPU = `${URL_SYS_STATISTIC}/cpu`
+export const URL_SYS_STATISTIC_STORAGE = `${URL_SYS_STATISTIC}/storage`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index e9dabb8..851cf37 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -14,10 +14,10 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { formatByteSize } from '@/util/common'
 import { utcToLocalTime } from '@/util/datetime'
 import {
-    r_sys_statistics_cpu,
-    r_sys_statistics_hardware,
-    r_sys_statistics_software,
-    r_sys_statistics_storage
+    r_sys_statistic_cpu,
+    r_sys_statistic_hardware,
+    r_sys_statistic_software,
+    r_sys_statistic_storage
 } from '@/services/system'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
@@ -101,7 +101,7 @@ const SoftwareInfo: React.FC = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
 
     useUpdatedEffect(() => {
-        void r_sys_statistics_software().then((res) => {
+        void r_sys_statistic_software().then((res) => {
             const response = res.data
             if (response.success) {
                 response.data && setSoftwareInfoData(response.data)
@@ -163,7 +163,7 @@ const HardwareInfo: React.FC = () => {
     const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
 
     useUpdatedEffect(() => {
-        void r_sys_statistics_hardware().then((res) => {
+        void r_sys_statistic_hardware().then((res) => {
             const response = res.data
             if (response.success) {
                 response.data && setHardwareInfoData(response.data)
@@ -254,7 +254,7 @@ const CPUInfo: React.FC = () => {
     }, [refreshInterval])
 
     const getCpuInfo = () => {
-        void r_sys_statistics_cpu().then((res) => {
+        void r_sys_statistic_cpu().then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
@@ -420,7 +420,7 @@ const StorageInfo: React.FC = () => {
     }, [refreshInterval])
 
     const getStorageInfo = () => {
-        void r_sys_statistics_storage().then((res) => {
+        void r_sys_statistic_storage().then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 599c24f..7c0b6a1 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -9,10 +9,10 @@ import {
     URL_SYS_GROUP_LIST,
     URL_SYS_LOG,
     URL_SYS_SETTINGS_MAIL,
-    URL_SYS_STATISTICS_SOFTWARE,
-    URL_SYS_STATISTICS_HARDWARE,
-    URL_SYS_STATISTICS_CPU,
-    URL_SYS_STATISTICS_STORAGE
+    URL_SYS_STATISTIC_SOFTWARE,
+    URL_SYS_STATISTIC_HARDWARE,
+    URL_SYS_STATISTIC_CPU,
+    URL_SYS_STATISTIC_STORAGE
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -77,12 +77,12 @@ export const r_sys_settings_mail_update = (param: MailSettingsParam) =>
 export const r_sys_settings_mail_send = (param: MailSendParam) =>
     request.post(URL_SYS_SETTINGS_MAIL, param)
 
-export const r_sys_statistics_software = () =>
-    request.get<SoftwareInfoVo>(URL_SYS_STATISTICS_SOFTWARE)
+export const r_sys_statistic_software = () =>
+    request.get<SoftwareInfoVo>(URL_SYS_STATISTIC_SOFTWARE)
 
-export const r_sys_statistics_hardware = () =>
-    request.get<HardwareInfoVo>(URL_SYS_STATISTICS_HARDWARE)
+export const r_sys_statistic_hardware = () =>
+    request.get<HardwareInfoVo>(URL_SYS_STATISTIC_HARDWARE)
 
-export const r_sys_statistics_cpu = () => request.get<CpuInfoVo>(URL_SYS_STATISTICS_CPU)
+export const r_sys_statistic_cpu = () => request.get<CpuInfoVo>(URL_SYS_STATISTIC_CPU)
 
-export const r_sys_statistics_storage = () => request.get<StorageInfoVo>(URL_SYS_STATISTICS_STORAGE)
+export const r_sys_statistic_storage = () => request.get<StorageInfoVo>(URL_SYS_STATISTIC_STORAGE)

From 8ac27b6e61f9580c63a51c4f10d9effad2d0daa8 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 14 Dec 2023 18:31:53 +0800
Subject: [PATCH 126/307] Add type of system log

---
 src/pages/system/Log.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 3ef9a0f..61df564 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -39,7 +39,11 @@ const Log: React.FC = () => {
             align: 'center',
             filters: [
                 { text: 'Info', value: 'INFO' },
-                { text: 'Statistics', value: 'STATISTICS' },
+                { text: 'Login', value: 'LOGIN' },
+                { text: 'Logout', value: 'LOGOUT' },
+                { text: 'Register', value: 'Register' },
+                { text: 'Statistic', value: 'STATISTIC' },
+                { text: 'API', value: 'API' },
                 { text: 'Error', value: 'ERROR' }
             ]
         },

From 33368f7f8969b7755b5be22915322836e1a6e50d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 19 Dec 2023 09:07:41 +0800
Subject: [PATCH 127/307] Add online info to statistics management page

---
 src/assets/css/pages/system/index.scss |   5 +
 src/assets/svg/online.svg              |   1 +
 src/constants/urls.constants.ts        |   1 +
 src/global.d.ts                        |  12 +-
 src/pages/system/index.tsx             | 168 +++++++++++++++++++++++--
 src/services/system.tsx                |   5 +-
 6 files changed, 176 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/svg/online.svg

diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss
index ecf9e7a..a41552d 100644
--- a/src/assets/css/pages/system/index.scss
+++ b/src/assets/css/pages/system/index.scss
@@ -74,6 +74,11 @@
           text-align: right;
         }
 
+        .big-chart {
+          width: 0;
+          height: 400px;
+        }
+
         > * {
           gap: 5px;
         }
diff --git a/src/assets/svg/online.svg b/src/assets/svg/online.svg
new file mode 100644
index 0000000..a6b0741
--- /dev/null
+++ b/src/assets/svg/online.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M739.584 575.561143A365.824 365.824 0 0 0 513.828571 950.857143H73.142857c0-242.358857 196.498286-438.857143 438.857143-438.857143 83.346286 0 161.243429 23.222857 227.584 63.561143zM512 512a219.428571 219.428571 0 1 1 0-438.857143 219.428571 219.428571 0 0 1 0 438.857143z m182.857143 146.285714h256v73.142857h-256v-73.142857z m-73.142857 109.714286h329.142857v73.142857h-329.142857v-73.142857z m-36.571429 109.714286h365.714286v73.142857H585.142857v-73.142857z" /></svg>
\ No newline at end of file
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index c4eadc9..ab5a1e2 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -16,6 +16,7 @@ export const URL_SYS_STATISTIC_SOFTWARE = `${URL_SYS_STATISTIC}/software`
 export const URL_SYS_STATISTIC_HARDWARE = `${URL_SYS_STATISTIC}/hardware`
 export const URL_SYS_STATISTIC_CPU = `${URL_SYS_STATISTIC}/cpu`
 export const URL_SYS_STATISTIC_STORAGE = `${URL_SYS_STATISTIC}/storage`
+export const URL_SYS_STATISTIC_ONLINE = `${URL_SYS_STATISTIC}/online`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/global.d.ts b/src/global.d.ts
index e7fe359..e51602e 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -294,10 +294,6 @@ interface AvatarBase64Vo {
     base64: string
 }
 
-interface SystemSettingsVo {
-    mail: MailSettingsVo
-}
-
 interface MailSettingsVo {
     host?: string
     port?: number
@@ -381,3 +377,11 @@ interface FileStoreInfoVo {
     total: number
     free: number
 }
+
+interface OnlineInfoVo {
+    current: number
+    history: {
+        time: string
+        record: string
+    }[]
+}
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 851cf37..55e65dd 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -5,9 +5,14 @@ import {
     TooltipComponent,
     TooltipComponentOption,
     GridComponent,
-    GridComponentOption
+    GridComponentOption,
+    ToolboxComponentOption,
+    DataZoomComponentOption,
+    ToolboxComponent,
+    DataZoomComponent
 } from 'echarts/components'
-import { BarChart, BarSeriesOption } from 'echarts/charts'
+import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
 import { SVGRenderer } from 'echarts/renderers'
 import '@/assets/css/pages/system/index.scss'
 import { useUpdatedEffect } from '@/util/hooks'
@@ -16,6 +21,7 @@ import { utcToLocalTime } from '@/util/datetime'
 import {
     r_sys_statistic_cpu,
     r_sys_statistic_hardware,
+    r_sys_statistic_online,
     r_sys_statistic_software,
     r_sys_statistic_storage
 } from '@/services/system'
@@ -25,9 +31,23 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import LoadingMask from '@/components/common/LoadingMask'
 
-echarts.use([TooltipComponent, GridComponent, BarChart, SVGRenderer])
+echarts.use([
+    TooltipComponent,
+    ToolboxComponent,
+    GridComponent,
+    DataZoomComponent,
+    BarChart,
+    LineChart,
+    SVGRenderer,
+    UniversalTransition
+])
 type EChartsOption = echarts.ComposeOption<
-    TooltipComponentOption | GridComponentOption | BarSeriesOption
+    | TooltipComponentOption
+    | ToolboxComponentOption
+    | GridComponentOption
+    | BarSeriesOption
+    | DataZoomComponentOption
+    | LineSeriesOption
 >
 
 const barDefaultSeriesOption: BarSeriesOption = {
@@ -46,7 +66,7 @@ const barDefaultSeriesOption: BarSeriesOption = {
     }
 }
 
-const eChartsBaseOption: EChartsOption = {
+const barEChartsBaseOption: EChartsOption = {
     tooltip: {},
     xAxis: {
         show: false
@@ -70,9 +90,43 @@ const eChartsBaseOption: EChartsOption = {
     }
 }
 
+const lineEChartsBaseOption: EChartsOption = {
+    tooltip: {
+        trigger: 'axis'
+    },
+    toolbox: {
+        feature: {
+            dataZoom: {
+                yAxisIndex: 'none'
+            },
+            restore: {},
+            saveAsImage: {}
+        }
+    },
+    xAxis: {
+        type: 'time'
+    },
+    yAxis: {
+        type: 'value',
+        interval: 1
+    },
+    dataZoom: [
+        {
+            type: 'inside',
+            start: 0,
+            end: 100
+        },
+        {
+            start: 0,
+            end: 100
+        }
+    ],
+    series: [{}]
+}
+
 interface CommonCardProps extends React.PropsWithChildren {
     icon: IconComponent
-    title: string
+    title: React.ReactNode
     loading?: boolean
     expand?: React.ReactNode
 }
@@ -97,6 +151,97 @@ const CommonCard: React.FC<CommonCardProps> = (props) => {
     )
 }
 
+const OnlineInfo: React.FC = () => {
+    const onlineInfoDivRef = useRef<HTMLDivElement>(null)
+    const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
+    const [isLoading, setIsLoading] = useState(false)
+    const [currentOnlineCount, setCurrentOnlineCount] = useState(-1)
+
+    useUpdatedEffect(() => {
+        const chartResizeObserver = new ResizeObserver(() => {
+            onlineInfoEChartsRef.current?.resize()
+        })
+
+        onlineInfoDivRef.current && chartResizeObserver.observe(onlineInfoDivRef.current)
+
+        return () => {
+            onlineInfoDivRef.current && chartResizeObserver.unobserve(onlineInfoDivRef.current)
+        }
+    }, [isLoading])
+
+    useUpdatedEffect(() => {
+        getOnlineInfo()
+    }, [])
+
+    const getOnlineInfo = () => {
+        if (isLoading) {
+            return
+        }
+
+        setIsLoading(true)
+
+        void r_sys_statistic_online().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    setIsLoading(false)
+
+                    setCurrentOnlineCount(data.current)
+
+                    setTimeout(() => {
+                        const dataList = data.history.map((value) => [value.time, value.record])
+
+                        onlineInfoEChartsRef.current = echarts.init(
+                            onlineInfoDivRef.current,
+                            null,
+                            { renderer: 'svg' }
+                        )
+
+                        onlineInfoEChartsRef.current?.setOption({
+                            ...lineEChartsBaseOption,
+                            series: [
+                                {
+                                    name: '在线人数',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    areaStyle: {},
+                                    data: dataList
+                                }
+                            ]
+                        })
+                    })
+                }
+            }
+        })
+    }
+
+    return (
+        <CommonCard
+            icon={IconFatwebOnline}
+            title={
+                <>
+                    <FlexBox gap={10} direction={'horizontal'}>
+                        <span style={{ whiteSpace: 'nowrap' }}>在线用户</span>
+                        <AntdTag>当前 {currentOnlineCount}</AntdTag>
+                    </FlexBox>
+                </>
+            }
+            loading={isLoading}
+            expand={
+                <AntdButton title={'刷新'} onClick={() => getOnlineInfo()}>
+                    <Icon component={IconFatwebRefresh} />
+                </AntdButton>
+            }
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <div className={'big-chart'} ref={onlineInfoDivRef} />
+            </FlexBox>
+        </CommonCard>
+    )
+}
+
 const SoftwareInfo: React.FC = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
 
@@ -271,9 +416,9 @@ const CPUInfo: React.FC = () => {
 
                         setCpuInfoEChartsOption(
                             dataList.map((value, index) => ({
-                                ...eChartsBaseOption,
+                                ...barEChartsBaseOption,
                                 yAxis: {
-                                    ...eChartsBaseOption.yAxis,
+                                    ...barEChartsBaseOption.yAxis,
                                     data: [index === 0 ? '总占用' : `CPU ${index - 1}`]
                                 },
                                 series: value
@@ -501,13 +646,13 @@ const StorageInfo: React.FC = () => {
     }
 
     const storageInfoVoToStorageEChartsOption = (label: string, used: number, free: number) => ({
-        ...eChartsBaseOption,
+        ...barEChartsBaseOption,
         xAxis: {
-            ...eChartsBaseOption.xAxis,
+            ...barEChartsBaseOption.xAxis,
             max: used + free
         },
         yAxis: {
-            ...eChartsBaseOption.yAxis,
+            ...barEChartsBaseOption.yAxis,
             data: [label]
         },
         series: [
@@ -577,6 +722,7 @@ const System: React.FC = () => {
             <FitFullScreen>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <OnlineInfo />
                         <SoftwareInfo />
                         <HardwareInfo />
                         <CPUInfo />
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 7c0b6a1..5945a13 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -12,7 +12,8 @@ import {
     URL_SYS_STATISTIC_SOFTWARE,
     URL_SYS_STATISTIC_HARDWARE,
     URL_SYS_STATISTIC_CPU,
-    URL_SYS_STATISTIC_STORAGE
+    URL_SYS_STATISTIC_STORAGE,
+    URL_SYS_STATISTIC_ONLINE
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -86,3 +87,5 @@ export const r_sys_statistic_hardware = () =>
 export const r_sys_statistic_cpu = () => request.get<CpuInfoVo>(URL_SYS_STATISTIC_CPU)
 
 export const r_sys_statistic_storage = () => request.get<StorageInfoVo>(URL_SYS_STATISTIC_STORAGE)
+
+export const r_sys_statistic_online = () => request.get<OnlineInfoVo>(URL_SYS_STATISTIC_ONLINE)

From 9b1beed8b543b90eb0a6ac8b9bdb89c38dddfbb2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 19 Dec 2023 10:25:20 +0800
Subject: [PATCH 128/307] Add scope select to online statistic

---
 src/global.d.ts            |  4 ++++
 src/pages/system/index.tsx | 37 +++++++++++++++++++++++++++++++------
 src/services/system.tsx    |  3 ++-
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index e51602e..6856688 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -385,3 +385,7 @@ interface OnlineInfoVo {
         record: string
     }[]
 }
+
+interface OnlineInfoGetParam {
+    scope: string
+}
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 55e65dd..16d688c 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -156,6 +156,7 @@ const OnlineInfo: React.FC = () => {
     const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
     const [isLoading, setIsLoading] = useState(false)
     const [currentOnlineCount, setCurrentOnlineCount] = useState(-1)
+    const [scope, setScope] = useState('WEAK')
 
     useUpdatedEffect(() => {
         const chartResizeObserver = new ResizeObserver(() => {
@@ -173,14 +174,23 @@ const OnlineInfo: React.FC = () => {
         getOnlineInfo()
     }, [])
 
-    const getOnlineInfo = () => {
+    const handleOnScopeChange = (value: string) => {
+        setScope(value)
+        getOnlineInfo(value)
+    }
+
+    const handleOnRefresh = () => {
+        getOnlineInfo()
+    }
+
+    const getOnlineInfo = (_scope: string = scope) => {
         if (isLoading) {
             return
         }
 
         setIsLoading(true)
 
-        void r_sys_statistic_online().then((res) => {
+        void r_sys_statistic_online({ scope: _scope }).then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
@@ -224,15 +234,30 @@ const OnlineInfo: React.FC = () => {
                 <>
                     <FlexBox gap={10} direction={'horizontal'}>
                         <span style={{ whiteSpace: 'nowrap' }}>在线用户</span>
-                        <AntdTag>当前 {currentOnlineCount}</AntdTag>
+                        <AntdTag>
+                            当前 {currentOnlineCount === -1 ? '获取中...' : currentOnlineCount}
+                        </AntdTag>
                     </FlexBox>
                 </>
             }
             loading={isLoading}
             expand={
-                <AntdButton title={'刷新'} onClick={() => getOnlineInfo()}>
-                    <Icon component={IconFatwebRefresh} />
-                </AntdButton>
+                <>
+                    <AntdSelect value={scope} onChange={handleOnScopeChange} disabled={isLoading}>
+                        <AntdSelect.Option key={'DAY'}>今天</AntdSelect.Option>
+                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
+                        <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
+                        <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'TWO_YEARS'}>最近2年</AntdSelect.Option>
+                        <AntdSelect.Option key={'THREE_YEARS'}>最近3年</AntdSelect.Option>
+                        <AntdSelect.Option key={'FIVE_YEARS'}>最近5年</AntdSelect.Option>
+                        <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
+                    </AntdSelect>
+                    <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
+                        <Icon component={IconFatwebRefresh} />
+                    </AntdButton>
+                </>
             }
         >
             <FlexBox className={'card-content'} direction={'horizontal'}>
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 5945a13..8686e6e 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -88,4 +88,5 @@ export const r_sys_statistic_cpu = () => request.get<CpuInfoVo>(URL_SYS_STATISTI
 
 export const r_sys_statistic_storage = () => request.get<StorageInfoVo>(URL_SYS_STATISTIC_STORAGE)
 
-export const r_sys_statistic_online = () => request.get<OnlineInfoVo>(URL_SYS_STATISTIC_ONLINE)
+export const r_sys_statistic_online = (param: OnlineInfoGetParam) =>
+    request.get<OnlineInfoVo>(URL_SYS_STATISTIC_ONLINE, param)

From 46ec332298654cfded3a992d0af177b1e64249b7 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 19 Dec 2023 16:51:04 +0800
Subject: [PATCH 129/307] Add active information management to statistic

---
 src/assets/svg/analysis.svg     |   1 +
 src/constants/urls.constants.ts |   1 +
 src/global.d.ts                 |  15 +++
 src/pages/system/index.tsx      | 178 ++++++++++++++++++++++++++++++--
 src/services/system.tsx         |   6 +-
 src/util/datetime.tsx           |   8 ++
 6 files changed, 202 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/svg/analysis.svg

diff --git a/src/assets/svg/analysis.svg b/src/assets/svg/analysis.svg
new file mode 100644
index 0000000..50f98c7
--- /dev/null
+++ b/src/assets/svg/analysis.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1024"><path d="M265.216 920.348444a41.472 41.472 0 0 1-41.415111-42.211555v-215.608889a42.154667 42.154667 0 1 1 83.512889 0v215.608889a42.097778 42.097778 0 0 1-42.097778 42.211555z m207.701333 0a41.472 41.472 0 0 1-41.358222-42.211555V536.689778a42.097778 42.097778 0 0 1 83.512889 0v340.764444a42.097778 42.097778 0 0 1-42.097778 42.894222z m207.758223 0a41.472 41.472 0 0 1-41.358223-42.211555V728.177778a42.097778 42.097778 0 0 1 83.512889 0v149.959111a42.097778 42.097778 0 0 1-42.097778 42.211555z m207.758222 0a41.472 41.472 0 0 1-41.415111-42.211555v-276.48a42.154667 42.154667 0 1 1 83.569777 0v279.950222a42.097778 42.097778 0 0 1-42.097777 38.684445zM210.659556 502.101333a41.415111 41.415111 0 0 1-33.792-16.554666 42.211556 42.211556 0 0 1 10.353777-58.766223l300.202667-231.537777a42.723556 42.723556 0 0 1 51.768889 0l138.069333 112.64 222.947556-185.969778a41.756444 41.756444 0 0 1 53.816889 63.601778l-247.808 208.782222a41.358222 41.358222 0 0 1-53.134223 0L515.072 280.917333 238.933333 493.112889a42.723556 42.723556 0 0 1-28.273777 8.988444z" /><path d="M927.118222 336.896a42.097778 42.097778 0 0 1-42.097778-41.472V179.313778h-117.361777a42.154667 42.154667 0 0 1 0-83.626667h159.459555a42.097778 42.097778 0 0 1 42.097778 41.415111v158.321778a42.097778 42.097778 0 0 1-42.097778 41.528889z" /></svg>
\ No newline at end of file
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index ab5a1e2..75c2374 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -17,6 +17,7 @@ export const URL_SYS_STATISTIC_HARDWARE = `${URL_SYS_STATISTIC}/hardware`
 export const URL_SYS_STATISTIC_CPU = `${URL_SYS_STATISTIC}/cpu`
 export const URL_SYS_STATISTIC_STORAGE = `${URL_SYS_STATISTIC}/storage`
 export const URL_SYS_STATISTIC_ONLINE = `${URL_SYS_STATISTIC}/online`
+export const URL_SYS_STATISTIC_ACTIVE = `${URL_SYS_STATISTIC}/active`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/global.d.ts b/src/global.d.ts
index 6856688..28204d2 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -389,3 +389,18 @@ interface OnlineInfoVo {
 interface OnlineInfoGetParam {
     scope: string
 }
+
+interface ActiveInfoVo {
+    registerHistory: {
+        time: string
+        count: number
+    }[]
+    loginHistory: {
+        time: string
+        count: number
+    }[]
+}
+
+interface ActiveInfoGetParam {
+    scope: string
+}
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 16d688c..566a518 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -14,11 +14,13 @@ import {
 import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
 import { UniversalTransition } from 'echarts/features'
 import { SVGRenderer } from 'echarts/renderers'
+import { TopLevelFormatterParams } from 'echarts/types/dist/shared'
 import '@/assets/css/pages/system/index.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { formatByteSize } from '@/util/common'
 import { utcToLocalTime } from '@/util/datetime'
 import {
+    r_sys_statistic_active,
     r_sys_statistic_cpu,
     r_sys_statistic_hardware,
     r_sys_statistic_online,
@@ -90,6 +92,30 @@ const barEChartsBaseOption: EChartsOption = {
     }
 }
 
+const getTooltipTimeFormatter = (format: string = 'yyyy-MM-DD HH:mm:ss') => {
+    return (params: TopLevelFormatterParams) =>
+        `${utcToLocalTime(
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
+            params[0].data[0],
+            format
+        )}<br><span style="display: flex; justify-content: space-between"><span>${
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            params[0]['marker']
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        }${params[0]['seriesName']}</span><span style="font-weight: bold">${
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
+            params[0].data[1]
+        }</span></span> `
+}
+
 const lineEChartsBaseOption: EChartsOption = {
     tooltip: {
         trigger: 'axis'
@@ -114,11 +140,8 @@ const lineEChartsBaseOption: EChartsOption = {
         {
             type: 'inside',
             start: 0,
-            end: 100
-        },
-        {
-            start: 0,
-            end: 100
+            end: 100,
+            minValueSpan: 2 * 60 * 60 * 1000
         }
     ],
     series: [{}]
@@ -201,7 +224,6 @@ const OnlineInfo: React.FC = () => {
 
                     setTimeout(() => {
                         const dataList = data.history.map((value) => [value.time, value.record])
-
                         onlineInfoEChartsRef.current = echarts.init(
                             onlineInfoDivRef.current,
                             null,
@@ -210,6 +232,13 @@ const OnlineInfo: React.FC = () => {
 
                         onlineInfoEChartsRef.current?.setOption({
                             ...lineEChartsBaseOption,
+                            tooltip: {
+                                ...lineEChartsBaseOption.tooltip,
+                                formatter: getTooltipTimeFormatter('yyyy-MM-DD HH:mm')
+                            },
+                            xAxis: {
+                                ...lineEChartsBaseOption.xAxis
+                            },
                             series: [
                                 {
                                     name: '在线人数',
@@ -267,6 +296,142 @@ const OnlineInfo: React.FC = () => {
     )
 }
 
+const ActiveInfo: React.FC = () => {
+    const activeInfoDivRef = useRef<HTMLDivElement>(null)
+    const activeInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
+    const [isLoading, setIsLoading] = useState(false)
+    const [scope, setScope] = useState('WEAK')
+
+    useUpdatedEffect(() => {
+        const chartResizeObserver = new ResizeObserver(() => {
+            activeInfoEChartsRef.current?.resize()
+        })
+
+        activeInfoDivRef.current && chartResizeObserver.observe(activeInfoDivRef.current)
+
+        return () => {
+            activeInfoDivRef.current && chartResizeObserver.unobserve(activeInfoDivRef.current)
+        }
+    }, [isLoading])
+
+    useUpdatedEffect(() => {
+        getActiveInfo()
+    }, [])
+
+    const handleOnScopeChange = (value: string) => {
+        setScope(value)
+        getActiveInfo(value)
+    }
+
+    const handleOnRefresh = () => {
+        getActiveInfo()
+    }
+
+    const getActiveInfo = (_scope: string = scope) => {
+        if (isLoading) {
+            return
+        }
+
+        setIsLoading(true)
+
+        void r_sys_statistic_active({ scope: _scope }).then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    setIsLoading(false)
+
+                    setTimeout(() => {
+                        const registerList = data.registerHistory.map((value) => [
+                            value.time,
+                            value.count
+                        ])
+                        const loginList = data.loginHistory.map((value) => [
+                            value.time,
+                            value.count
+                        ])
+
+                        activeInfoEChartsRef.current = echarts.init(
+                            activeInfoDivRef.current,
+                            null,
+                            { renderer: 'svg' }
+                        )
+
+                        activeInfoEChartsRef.current?.setOption({
+                            ...lineEChartsBaseOption,
+                            tooltip: {
+                                ...lineEChartsBaseOption.tooltip,
+                                formatter: getTooltipTimeFormatter('yyyy-MM-DD')
+                            },
+                            dataZoom: [
+                                {
+                                    type: 'inside',
+                                    start: 0,
+                                    end: 100,
+                                    minValueSpan: 2 * 24 * 60 * 60 * 1000
+                                }
+                            ],
+                            series: [
+                                {
+                                    name: '注册人数',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    areaStyle: {},
+                                    data: registerList
+                                },
+                                {
+                                    name: '登录人数',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    areaStyle: {},
+                                    data: loginList
+                                }
+                            ]
+                        })
+                    })
+                }
+            }
+        })
+    }
+
+    return (
+        <CommonCard
+            icon={IconFatwebAnalysis}
+            title={
+                <>
+                    <FlexBox gap={10} direction={'horizontal'}>
+                        <span style={{ whiteSpace: 'nowrap' }}>用户活跃</span>
+                    </FlexBox>
+                </>
+            }
+            loading={isLoading}
+            expand={
+                <>
+                    <AntdSelect value={scope} onChange={handleOnScopeChange} disabled={isLoading}>
+                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
+                        <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
+                        <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'TWO_YEARS'}>最近2年</AntdSelect.Option>
+                        <AntdSelect.Option key={'THREE_YEARS'}>最近3年</AntdSelect.Option>
+                        <AntdSelect.Option key={'FIVE_YEARS'}>最近5年</AntdSelect.Option>
+                        <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
+                    </AntdSelect>
+                    <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
+                        <Icon component={IconFatwebRefresh} />
+                    </AntdButton>
+                </>
+            }
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <div className={'big-chart'} ref={activeInfoDivRef} />
+            </FlexBox>
+        </CommonCard>
+    )
+}
+
 const SoftwareInfo: React.FC = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
 
@@ -748,6 +913,7 @@ const System: React.FC = () => {
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <OnlineInfo />
+                        <ActiveInfo />
                         <SoftwareInfo />
                         <HardwareInfo />
                         <CPUInfo />
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 8686e6e..9d8133e 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -13,7 +13,8 @@ import {
     URL_SYS_STATISTIC_HARDWARE,
     URL_SYS_STATISTIC_CPU,
     URL_SYS_STATISTIC_STORAGE,
-    URL_SYS_STATISTIC_ONLINE
+    URL_SYS_STATISTIC_ONLINE,
+    URL_SYS_STATISTIC_ACTIVE
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -90,3 +91,6 @@ export const r_sys_statistic_storage = () => request.get<StorageInfoVo>(URL_SYS_
 
 export const r_sys_statistic_online = (param: OnlineInfoGetParam) =>
     request.get<OnlineInfoVo>(URL_SYS_STATISTIC_ONLINE, param)
+
+export const r_sys_statistic_active = (param: ActiveInfoGetParam) =>
+    request.get<ActiveInfoVo>(URL_SYS_STATISTIC_ACTIVE, param)
diff --git a/src/util/datetime.tsx b/src/util/datetime.tsx
index b88ade6..ef94672 100644
--- a/src/util/datetime.tsx
+++ b/src/util/datetime.tsx
@@ -28,3 +28,11 @@ export const localTimeToUtc = (localTime: string) => {
 export const isPastTime = (utcTime: string) => {
     return moment.utc(utcTime).isBefore(moment.now())
 }
+
+export const utcToMillisecond = (utcTime: string) => {
+    return moment.utc(utcTime).valueOf()
+}
+
+export const millisecondToUtc = (millisecond: number) => {
+    return moment(millisecond).toISOString()
+}

From 810c301398b5007066040841c7df2372aa5560f1 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 19 Dec 2023 17:47:24 +0800
Subject: [PATCH 130/307] Autofill data between times

---
 src/pages/system/index.tsx | 48 ++++++++++++++++++++++++++++++--------
 src/util/datetime.tsx      | 21 ++++++++++++++++-
 2 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 566a518..841cfba 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -18,7 +18,7 @@ import { TopLevelFormatterParams } from 'echarts/types/dist/shared'
 import '@/assets/css/pages/system/index.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { formatByteSize } from '@/util/common'
-import { utcToLocalTime } from '@/util/datetime'
+import { getTimesBetweenTwoTimes, utcToLocalTime } from '@/util/datetime'
 import {
     r_sys_statistic_active,
     r_sys_statistic_cpu,
@@ -223,7 +223,17 @@ const OnlineInfo: React.FC = () => {
                     setCurrentOnlineCount(data.current)
 
                     setTimeout(() => {
-                        const dataList = data.history.map((value) => [value.time, value.record])
+                        const dataList = getTimesBetweenTwoTimes(
+                            data.history[0].time,
+                            data.history[data.history.length - 1].time,
+                            'minute'
+                        ).map((time) => [
+                            time,
+                            data.history.find(
+                                (value) => value.time.substring(0, 16) === time.substring(0, 16)
+                            )?.record ?? 0
+                        ])
+
                         onlineInfoEChartsRef.current = echarts.init(
                             onlineInfoDivRef.current,
                             null,
@@ -342,14 +352,32 @@ const ActiveInfo: React.FC = () => {
                     setIsLoading(false)
 
                     setTimeout(() => {
-                        const registerList = data.registerHistory.map((value) => [
-                            value.time,
-                            value.count
-                        ])
-                        const loginList = data.loginHistory.map((value) => [
-                            value.time,
-                            value.count
-                        ])
+                        const registerList = data.registerHistory.length
+                            ? getTimesBetweenTwoTimes(
+                                  data.registerHistory[0].time,
+                                  data.registerHistory[data.registerHistory.length - 1].time,
+                                  'day'
+                              ).map((time) => [
+                                  time,
+                                  data.registerHistory.find(
+                                      (value) =>
+                                          value.time.substring(0, 10) === time.substring(0, 10)
+                                  )?.count ?? 0
+                              ])
+                            : []
+                        const loginList = data.loginHistory.length
+                            ? getTimesBetweenTwoTimes(
+                                  data.loginHistory[0].time,
+                                  data.loginHistory[data.loginHistory.length - 1].time,
+                                  'day'
+                              ).map((time) => [
+                                  time,
+                                  data.loginHistory.find(
+                                      (value) =>
+                                          value.time.substring(0, 10) === time.substring(0, 10)
+                                  )?.count ?? 0
+                              ])
+                            : []
 
                         activeInfoEChartsRef.current = echarts.init(
                             activeInfoDivRef.current,
diff --git a/src/util/datetime.tsx b/src/util/datetime.tsx
index ef94672..1291c33 100644
--- a/src/util/datetime.tsx
+++ b/src/util/datetime.tsx
@@ -1,4 +1,4 @@
-import moment from 'moment/moment'
+import moment, { unitOfTime } from 'moment/moment'
 import dayjs from 'dayjs'
 
 export const getNowLocalTime = (format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
@@ -36,3 +36,22 @@ export const utcToMillisecond = (utcTime: string) => {
 export const millisecondToUtc = (millisecond: number) => {
     return moment(millisecond).toISOString()
 }
+
+export const getTimesBetweenTwoTimes = (
+    startTime: string,
+    endTime: string,
+    interval: unitOfTime.Diff
+) => {
+    const timesList: string[] = []
+    const start = moment.utc(startTime)
+    const end = moment.utc(endTime)
+
+    const count = end.diff(start, interval)
+    timesList.push(start.toISOString())
+
+    for (let i = 0; i < count; i++) {
+        timesList.push(start.add(1, interval).toISOString())
+    }
+
+    return timesList
+}

From 151dd4d5d56c25b8964c554f6170ad34703b7bf3 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 19 Dec 2023 18:19:43 +0800
Subject: [PATCH 131/307] Add statistic route

---
 src/pages/system/Statistic.tsx | 956 +++++++++++++++++++++++++++++++++
 src/pages/system/index.tsx     | 953 +-------------------------------
 src/router/system.tsx          |  12 +-
 3 files changed, 969 insertions(+), 952 deletions(-)
 create mode 100644 src/pages/system/Statistic.tsx

diff --git a/src/pages/system/Statistic.tsx b/src/pages/system/Statistic.tsx
new file mode 100644
index 0000000..54c4b90
--- /dev/null
+++ b/src/pages/system/Statistic.tsx
@@ -0,0 +1,956 @@
+import React, { useEffect, useState } from 'react'
+import Icon from '@ant-design/icons'
+import * as echarts from 'echarts/core'
+import {
+    TooltipComponent,
+    TooltipComponentOption,
+    GridComponent,
+    GridComponentOption,
+    ToolboxComponentOption,
+    DataZoomComponentOption,
+    ToolboxComponent,
+    DataZoomComponent
+} from 'echarts/components'
+import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
+import { SVGRenderer } from 'echarts/renderers'
+import { TopLevelFormatterParams } from 'echarts/types/dist/shared'
+import '@/assets/css/pages/system/index.scss'
+import { useUpdatedEffect } from '@/util/hooks'
+import { formatByteSize } from '@/util/common'
+import { getTimesBetweenTwoTimes, utcToLocalTime } from '@/util/datetime'
+import {
+    r_sys_statistic_active,
+    r_sys_statistic_cpu,
+    r_sys_statistic_hardware,
+    r_sys_statistic_online,
+    r_sys_statistic_software,
+    r_sys_statistic_storage
+} from '@/services/system'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import LoadingMask from '@/components/common/LoadingMask'
+
+echarts.use([
+    TooltipComponent,
+    ToolboxComponent,
+    GridComponent,
+    DataZoomComponent,
+    BarChart,
+    LineChart,
+    SVGRenderer,
+    UniversalTransition
+])
+type EChartsOption = echarts.ComposeOption<
+    | TooltipComponentOption
+    | ToolboxComponentOption
+    | GridComponentOption
+    | BarSeriesOption
+    | DataZoomComponentOption
+    | LineSeriesOption
+>
+
+const barDefaultSeriesOption: BarSeriesOption = {
+    type: 'bar',
+    stack: 'total',
+    itemStyle: {
+        color: (params) => {
+            switch (params.seriesName) {
+                case 'idle':
+                case 'free':
+                    return '#F5F5F5'
+                default:
+                    return params.color ?? echarts.color.random()
+            }
+        }
+    }
+}
+
+const barEChartsBaseOption: EChartsOption = {
+    tooltip: {},
+    xAxis: {
+        show: false
+    },
+    yAxis: {
+        axisLine: {
+            show: false
+        },
+        axisLabel: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            show: false
+        },
+        axisPointer: {
+            show: false
+        }
+    }
+}
+
+const getTooltipTimeFormatter = (format: string = 'yyyy-MM-DD HH:mm:ss') => {
+    return (params: TopLevelFormatterParams) =>
+        `${utcToLocalTime(
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
+            params[0].data[0],
+            format
+        )}<br><span style="display: flex; justify-content: space-between"><span>${
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            params[0]['marker']
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        }${params[0]['seriesName']}</span><span style="font-weight: bold">${
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
+            params[0].data[1]
+        }</span></span> `
+}
+
+const lineEChartsBaseOption: EChartsOption = {
+    tooltip: {
+        trigger: 'axis'
+    },
+    toolbox: {
+        feature: {
+            dataZoom: {
+                yAxisIndex: 'none'
+            },
+            restore: {},
+            saveAsImage: {}
+        }
+    },
+    xAxis: {
+        type: 'time'
+    },
+    yAxis: {
+        type: 'value',
+        interval: 1
+    },
+    dataZoom: [
+        {
+            type: 'inside',
+            start: 0,
+            end: 100,
+            minValueSpan: 2 * 60 * 60 * 1000
+        }
+    ],
+    series: [{}]
+}
+
+interface CommonCardProps extends React.PropsWithChildren {
+    icon: IconComponent
+    title: React.ReactNode
+    loading?: boolean
+    expand?: React.ReactNode
+}
+
+const CommonCard: React.FC<CommonCardProps> = (props) => {
+    return (
+        <Card style={{ overflow: 'visible' }}>
+            <FlexBox className={'common-card'}>
+                <FlexBox direction={'horizontal'} className={'head'}>
+                    <Icon component={props.icon} className={'icon'} />
+                    <div className={'title'}>{props.title}</div>
+                    {props.expand}
+                </FlexBox>
+                <LoadingMask
+                    hidden={!props.loading}
+                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
+                >
+                    {props.children}
+                </LoadingMask>
+            </FlexBox>
+        </Card>
+    )
+}
+
+const OnlineInfo: React.FC = () => {
+    const onlineInfoDivRef = useRef<HTMLDivElement>(null)
+    const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
+    const [isLoading, setIsLoading] = useState(false)
+    const [currentOnlineCount, setCurrentOnlineCount] = useState(-1)
+    const [scope, setScope] = useState('WEAK')
+
+    useUpdatedEffect(() => {
+        const chartResizeObserver = new ResizeObserver(() => {
+            onlineInfoEChartsRef.current?.resize()
+        })
+
+        onlineInfoDivRef.current && chartResizeObserver.observe(onlineInfoDivRef.current)
+
+        return () => {
+            onlineInfoDivRef.current && chartResizeObserver.unobserve(onlineInfoDivRef.current)
+        }
+    }, [isLoading])
+
+    useUpdatedEffect(() => {
+        getOnlineInfo()
+    }, [])
+
+    const handleOnScopeChange = (value: string) => {
+        setScope(value)
+        getOnlineInfo(value)
+    }
+
+    const handleOnRefresh = () => {
+        getOnlineInfo()
+    }
+
+    const getOnlineInfo = (_scope: string = scope) => {
+        if (isLoading) {
+            return
+        }
+
+        setIsLoading(true)
+
+        void r_sys_statistic_online({ scope: _scope }).then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    setIsLoading(false)
+
+                    setCurrentOnlineCount(data.current)
+
+                    setTimeout(() => {
+                        const dataList = getTimesBetweenTwoTimes(
+                            data.history[0].time,
+                            data.history[data.history.length - 1].time,
+                            'minute'
+                        ).map((time) => [
+                            time,
+                            data.history.find(
+                                (value) => value.time.substring(0, 16) === time.substring(0, 16)
+                            )?.record ?? 0
+                        ])
+
+                        onlineInfoEChartsRef.current = echarts.init(
+                            onlineInfoDivRef.current,
+                            null,
+                            { renderer: 'svg' }
+                        )
+
+                        onlineInfoEChartsRef.current?.setOption({
+                            ...lineEChartsBaseOption,
+                            tooltip: {
+                                ...lineEChartsBaseOption.tooltip,
+                                formatter: getTooltipTimeFormatter('yyyy-MM-DD HH:mm')
+                            },
+                            xAxis: {
+                                ...lineEChartsBaseOption.xAxis
+                            },
+                            series: [
+                                {
+                                    name: '在线人数',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    areaStyle: {},
+                                    data: dataList
+                                }
+                            ]
+                        })
+                    })
+                }
+            }
+        })
+    }
+
+    return (
+        <CommonCard
+            icon={IconFatwebOnline}
+            title={
+                <>
+                    <FlexBox gap={10} direction={'horizontal'}>
+                        <span style={{ whiteSpace: 'nowrap' }}>在线用户</span>
+                        <AntdTag>
+                            当前 {currentOnlineCount === -1 ? '获取中...' : currentOnlineCount}
+                        </AntdTag>
+                    </FlexBox>
+                </>
+            }
+            loading={isLoading}
+            expand={
+                <>
+                    <AntdSelect value={scope} onChange={handleOnScopeChange} disabled={isLoading}>
+                        <AntdSelect.Option key={'DAY'}>今天</AntdSelect.Option>
+                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
+                        <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
+                        <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'TWO_YEARS'}>最近2年</AntdSelect.Option>
+                        <AntdSelect.Option key={'THREE_YEARS'}>最近3年</AntdSelect.Option>
+                        <AntdSelect.Option key={'FIVE_YEARS'}>最近5年</AntdSelect.Option>
+                        <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
+                    </AntdSelect>
+                    <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
+                        <Icon component={IconFatwebRefresh} />
+                    </AntdButton>
+                </>
+            }
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <div className={'big-chart'} ref={onlineInfoDivRef} />
+            </FlexBox>
+        </CommonCard>
+    )
+}
+
+const ActiveInfo: React.FC = () => {
+    const activeInfoDivRef = useRef<HTMLDivElement>(null)
+    const activeInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
+    const [isLoading, setIsLoading] = useState(false)
+    const [scope, setScope] = useState('WEAK')
+
+    useUpdatedEffect(() => {
+        const chartResizeObserver = new ResizeObserver(() => {
+            activeInfoEChartsRef.current?.resize()
+        })
+
+        activeInfoDivRef.current && chartResizeObserver.observe(activeInfoDivRef.current)
+
+        return () => {
+            activeInfoDivRef.current && chartResizeObserver.unobserve(activeInfoDivRef.current)
+        }
+    }, [isLoading])
+
+    useUpdatedEffect(() => {
+        getActiveInfo()
+    }, [])
+
+    const handleOnScopeChange = (value: string) => {
+        setScope(value)
+        getActiveInfo(value)
+    }
+
+    const handleOnRefresh = () => {
+        getActiveInfo()
+    }
+
+    const getActiveInfo = (_scope: string = scope) => {
+        if (isLoading) {
+            return
+        }
+
+        setIsLoading(true)
+
+        void r_sys_statistic_active({ scope: _scope }).then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    setIsLoading(false)
+
+                    setTimeout(() => {
+                        const registerList = data.registerHistory.length
+                            ? getTimesBetweenTwoTimes(
+                                  data.registerHistory[0].time,
+                                  data.registerHistory[data.registerHistory.length - 1].time,
+                                  'day'
+                              ).map((time) => [
+                                  time,
+                                  data.registerHistory.find(
+                                      (value) =>
+                                          value.time.substring(0, 10) === time.substring(0, 10)
+                                  )?.count ?? 0
+                              ])
+                            : []
+                        const loginList = data.loginHistory.length
+                            ? getTimesBetweenTwoTimes(
+                                  data.loginHistory[0].time,
+                                  data.loginHistory[data.loginHistory.length - 1].time,
+                                  'day'
+                              ).map((time) => [
+                                  time,
+                                  data.loginHistory.find(
+                                      (value) =>
+                                          value.time.substring(0, 10) === time.substring(0, 10)
+                                  )?.count ?? 0
+                              ])
+                            : []
+
+                        activeInfoEChartsRef.current = echarts.init(
+                            activeInfoDivRef.current,
+                            null,
+                            { renderer: 'svg' }
+                        )
+
+                        activeInfoEChartsRef.current?.setOption({
+                            ...lineEChartsBaseOption,
+                            tooltip: {
+                                ...lineEChartsBaseOption.tooltip,
+                                formatter: getTooltipTimeFormatter('yyyy-MM-DD')
+                            },
+                            dataZoom: [
+                                {
+                                    type: 'inside',
+                                    start: 0,
+                                    end: 100,
+                                    minValueSpan: 2 * 24 * 60 * 60 * 1000
+                                }
+                            ],
+                            series: [
+                                {
+                                    name: '注册人数',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    areaStyle: {},
+                                    data: registerList
+                                },
+                                {
+                                    name: '登录人数',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    areaStyle: {},
+                                    data: loginList
+                                }
+                            ]
+                        })
+                    })
+                }
+            }
+        })
+    }
+
+    return (
+        <CommonCard
+            icon={IconFatwebAnalysis}
+            title={
+                <>
+                    <FlexBox gap={10} direction={'horizontal'}>
+                        <span style={{ whiteSpace: 'nowrap' }}>用户活跃</span>
+                    </FlexBox>
+                </>
+            }
+            loading={isLoading}
+            expand={
+                <>
+                    <AntdSelect value={scope} onChange={handleOnScopeChange} disabled={isLoading}>
+                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
+                        <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
+                        <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'TWO_YEARS'}>最近2年</AntdSelect.Option>
+                        <AntdSelect.Option key={'THREE_YEARS'}>最近3年</AntdSelect.Option>
+                        <AntdSelect.Option key={'FIVE_YEARS'}>最近5年</AntdSelect.Option>
+                        <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
+                    </AntdSelect>
+                    <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
+                        <Icon component={IconFatwebRefresh} />
+                    </AntdButton>
+                </>
+            }
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <div className={'big-chart'} ref={activeInfoDivRef} />
+            </FlexBox>
+        </CommonCard>
+    )
+}
+
+const SoftwareInfo: React.FC = () => {
+    const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
+
+    useUpdatedEffect(() => {
+        void r_sys_statistic_software().then((res) => {
+            const response = res.data
+            if (response.success) {
+                response.data && setSoftwareInfoData(response.data)
+            } else {
+                void message.error('获取软件信息失败，请稍后重试')
+            }
+        })
+    }, [])
+
+    return (
+        <CommonCard
+            icon={IconFatwebSoftware}
+            title={'软件信息'}
+            loading={softwareInfoData === undefined}
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <FlexBox className={'key'}>
+                    <div>操作系统</div>
+                    <div>位数</div>
+                    <div>Java</div>
+                    <div>Java 供应商</div>
+                    <div>Runtime</div>
+                    <div>JVM</div>
+                    <div>JVM 供应商</div>
+                    <div>操作系统启动时间</div>
+                    <div>后端服务器启动时间</div>
+                </FlexBox>
+                <FlexBox className={'value'}>
+                    <div title={softwareInfoData?.os}>{softwareInfoData?.os}</div>
+                    <div title={softwareInfoData?.bitness.toString()}>
+                        {softwareInfoData?.bitness}
+                    </div>
+                    <div
+                        title={`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}
+                    >{`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}</div>
+                    <div title={softwareInfoData?.javaVendor}>{softwareInfoData?.javaVendor}</div>
+                    <div
+                        title={`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}
+                    >{`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}</div>
+                    <div
+                        title={`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}
+                    >{`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}</div>
+                    <div title={softwareInfoData?.jvmVendor}>{softwareInfoData?.jvmVendor}</div>
+                    <div>
+                        {softwareInfoData?.osBootTime &&
+                            utcToLocalTime(softwareInfoData?.osBootTime)}
+                    </div>
+                    <div>
+                        {softwareInfoData?.serverStartupTime &&
+                            utcToLocalTime(softwareInfoData.serverStartupTime)}
+                    </div>
+                </FlexBox>
+            </FlexBox>
+        </CommonCard>
+    )
+}
+
+const HardwareInfo: React.FC = () => {
+    const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
+
+    useUpdatedEffect(() => {
+        void r_sys_statistic_hardware().then((res) => {
+            const response = res.data
+            if (response.success) {
+                response.data && setHardwareInfoData(response.data)
+            } else {
+                void message.error('获取硬件信息失败，请稍后重试')
+            }
+        })
+    }, [])
+
+    return (
+        <CommonCard
+            icon={IconFatwebHardware}
+            title={'硬件信息'}
+            loading={hardwareInfoData === undefined}
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <FlexBox className={'key'}>
+                    <div>CPU</div>
+                    <div>CPU 架构</div>
+                    <div>微架构</div>
+                    <div>64位</div>
+                    <div>物理 CPU</div>
+                    <div>物理核心</div>
+                    <div>逻辑核心</div>
+                    <div>内存</div>
+                    <div>磁盘</div>
+                </FlexBox>
+                <FlexBox className={'value'}>
+                    <div title={hardwareInfoData?.cpu}>{hardwareInfoData?.cpu}</div>
+                    <div title={hardwareInfoData?.arch}>{hardwareInfoData?.arch}</div>
+                    <div title={hardwareInfoData?.microarchitecture}>
+                        {hardwareInfoData?.microarchitecture}
+                    </div>
+                    <div title={hardwareInfoData?.is64Bit ? '是' : '否'}>
+                        {hardwareInfoData?.is64Bit ? '是' : '否'}
+                    </div>
+                    <div title={hardwareInfoData?.cpuPhysicalPackageCount.toString()}>
+                        {hardwareInfoData?.cpuPhysicalPackageCount}
+                    </div>
+                    <div title={hardwareInfoData?.cpuPhysicalProcessorCount.toString()}>
+                        {hardwareInfoData?.cpuPhysicalProcessorCount}
+                    </div>
+                    <div title={hardwareInfoData?.cpuLogicalProcessorCount.toString()}>
+                        {hardwareInfoData?.cpuLogicalProcessorCount}
+                    </div>
+                    <div title={hardwareInfoData?.memories}>{hardwareInfoData?.memories}</div>
+                    <div title={hardwareInfoData?.disks}>{hardwareInfoData?.disks}</div>
+                </FlexBox>
+            </FlexBox>
+        </CommonCard>
+    )
+}
+
+const CPUInfo: React.FC = () => {
+    const keyDivRef = useRef<HTMLDivElement>(null)
+    const percentDivRef = useRef<HTMLDivElement>(null)
+    const cpuInfoDivRef = useRef<HTMLDivElement>(null)
+    const cpuInfoEChartsRef = useRef<echarts.EChartsType[]>([])
+    const [isLoading, setIsLoading] = useState(true)
+    const [refreshInterval, setRefreshInterval] = useState('5')
+    const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([])
+
+    const cpuDefaultSeriesOption: BarSeriesOption = {
+        ...barDefaultSeriesOption,
+        tooltip: {
+            valueFormatter: (value) => `${((value as number) * 100).toFixed(2)}%`
+        }
+    }
+
+    useUpdatedEffect(() => {
+        const chartResizeObserver = new ResizeObserver(() => {
+            cpuInfoEChartsRef.current.forEach((value) => value.resize())
+        })
+
+        cpuInfoDivRef.current && chartResizeObserver.observe(cpuInfoDivRef.current)
+
+        return () => {
+            cpuInfoDivRef.current && chartResizeObserver.unobserve(cpuInfoDivRef.current)
+        }
+    }, [cpuInfoDivRef.current])
+
+    useUpdatedEffect(() => {
+        const intervalId = setInterval(getCpuInfo(), parseInt(refreshInterval) * 1000)
+
+        return () => {
+            clearInterval(intervalId)
+        }
+    }, [refreshInterval])
+
+    const getCpuInfo = () => {
+        void r_sys_statistic_cpu().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    if (isLoading) {
+                        setIsLoading(false)
+                    }
+
+                    setTimeout(() => {
+                        const dataList = data.processors.map((value) =>
+                            cpuInfoVoToCpuInfoData(value)
+                        )
+                        dataList.unshift(cpuInfoVoToCpuInfoData(data))
+
+                        setCpuInfoEChartsOption(
+                            dataList.map((value, index) => ({
+                                ...barEChartsBaseOption,
+                                yAxis: {
+                                    ...barEChartsBaseOption.yAxis,
+                                    data: [index === 0 ? '总占用' : `CPU ${index - 1}`]
+                                },
+                                series: value
+                            }))
+                        )
+
+                        if (percentDivRef.current) {
+                            percentDivRef.current.innerHTML = ''
+                            dataList.forEach((value) => {
+                                const percentElement = document.createElement('div')
+                                const idle = value.find((item) => item.name === 'idle')?.data[0]
+                                percentElement.innerText =
+                                    idle !== undefined
+                                        ? `${((1 - idle) * 100).toFixed(2)}%`
+                                        : 'Unknown'
+                                percentDivRef.current?.appendChild(percentElement)
+                            })
+                        }
+
+                        if (!cpuInfoEChartsRef.current.length) {
+                            keyDivRef.current && (keyDivRef.current.innerHTML = '')
+                            cpuInfoDivRef.current && (cpuInfoDivRef.current.innerHTML = '')
+                            for (let i = 0; i < dataList.length; i++) {
+                                const keyElement = document.createElement('div')
+                                keyElement.innerText = i === 0 ? '总占用' : `CPU ${i - 1}`
+                                keyDivRef.current?.appendChild(keyElement)
+
+                                const valueElement = document.createElement('div')
+                                cpuInfoDivRef.current?.appendChild(valueElement)
+                                cpuInfoEChartsRef.current.push(
+                                    echarts.init(valueElement, null, { renderer: 'svg' })
+                                )
+                            }
+                        }
+                    })
+                }
+            }
+        })
+
+        return getCpuInfo
+    }
+
+    const cpuInfoVoToCpuInfoData = (cpuInfoVo: CpuInfoVo) =>
+        Object.entries(cpuInfoVo)
+            .filter(([key]) => !['total', 'processors'].includes(key))
+            .map(([key, value]) => ({
+                ...cpuDefaultSeriesOption,
+                name: key,
+                data: [(value as number) / cpuInfoVo.total]
+            }))
+            .sort((a, b) => {
+                const order = [
+                    'steal',
+                    'irq',
+                    'softirq',
+                    'iowait',
+                    'system',
+                    'nice',
+                    'user',
+                    'idle'
+                ]
+                return order.indexOf(a.name) - order.indexOf(b.name)
+            })
+
+    useEffect(() => {
+        cpuInfoEChartsRef.current?.forEach((value, index) => {
+            try {
+                value.setOption(cpuInfoEChartsOption[index])
+            } catch (e) {
+                /* empty */
+            }
+        })
+    }, [cpuInfoEChartsOption])
+
+    return (
+        <>
+            <CommonCard
+                icon={IconFatwebCpu}
+                title={'CPU 信息'}
+                loading={isLoading}
+                expand={
+                    <AntdSelect
+                        value={refreshInterval}
+                        onChange={(value) => setRefreshInterval(value)}
+                    >
+                        <AntdSelect.Option key={1}>1秒</AntdSelect.Option>
+                        <AntdSelect.Option key={2}>2秒</AntdSelect.Option>
+                        <AntdSelect.Option key={3}>3秒</AntdSelect.Option>
+                        <AntdSelect.Option key={5}>5秒</AntdSelect.Option>
+                        <AntdSelect.Option key={10}>10秒</AntdSelect.Option>
+                        <AntdSelect.Option key={15}>15秒</AntdSelect.Option>
+                        <AntdSelect.Option key={20}>20秒</AntdSelect.Option>
+                        <AntdSelect.Option key={30}>30秒</AntdSelect.Option>
+                        <AntdSelect.Option key={60}>60秒</AntdSelect.Option>
+                        <AntdSelect.Option key={120}>2分</AntdSelect.Option>
+                        <AntdSelect.Option key={180}>3分</AntdSelect.Option>
+                        <AntdSelect.Option key={300}>5分</AntdSelect.Option>
+                        <AntdSelect.Option key={600}>10分</AntdSelect.Option>
+                    </AntdSelect>
+                }
+            >
+                <FlexBox className={'card-content'} direction={'horizontal'}>
+                    <FlexBox className={'key'} ref={keyDivRef} />
+                    <FlexBox className={'value-chart'} ref={cpuInfoDivRef} />
+                    <FlexBox className={'value-percent'} ref={percentDivRef} />
+                </FlexBox>
+            </CommonCard>
+        </>
+    )
+}
+
+const StorageInfo: React.FC = () => {
+    const keyDivRef = useRef<HTMLDivElement>(null)
+    const percentDivRef = useRef<HTMLDivElement>(null)
+    const storageInfoDivRef = useRef<HTMLDivElement>(null)
+    const storageInfoEChartsRef = useRef<echarts.EChartsType[]>([])
+    const [isLoading, setIsLoading] = useState(true)
+    const [refreshInterval, setRefreshInterval] = useState('5')
+    const [storageInfoEChartsOption, setStorageInfoEChartsOption] = useState<EChartsOption[]>([])
+
+    const storageDefaultSeriesOption: BarSeriesOption = {
+        ...barDefaultSeriesOption,
+        tooltip: { valueFormatter: (value) => formatByteSize(value as number) }
+    }
+
+    useUpdatedEffect(() => {
+        const chartResizeObserver = new ResizeObserver(() => {
+            storageInfoEChartsRef.current.forEach((value) => value.resize())
+        })
+
+        storageInfoDivRef.current && chartResizeObserver.observe(storageInfoDivRef.current)
+
+        return () => {
+            storageInfoDivRef.current && chartResizeObserver.unobserve(storageInfoDivRef.current)
+        }
+    }, [storageInfoDivRef.current])
+
+    useUpdatedEffect(() => {
+        const intervalId = setInterval(getStorageInfo(), parseInt(refreshInterval) * 1000)
+
+        return () => {
+            clearInterval(intervalId)
+        }
+    }, [refreshInterval])
+
+    const getStorageInfo = () => {
+        void r_sys_statistic_storage().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    if (isLoading) {
+                        setIsLoading(false)
+                    }
+
+                    setTimeout(() => {
+                        const eChartsOptions = [
+                            storageInfoVoToStorageEChartsOption(
+                                '物理内存',
+                                data.memoryTotal - data.memoryFree,
+                                data.memoryFree
+                            ),
+                            storageInfoVoToStorageEChartsOption(
+                                '虚拟内存',
+                                data.virtualMemoryInUse,
+                                data.virtualMemoryMax - data.virtualMemoryInUse
+                            ),
+                            storageInfoVoToStorageEChartsOption(
+                                'swap',
+                                data.swapUsed,
+                                data.swapTotal - data.swapUsed
+                            ),
+                            storageInfoVoToStorageEChartsOption(
+                                'jvm 内存',
+                                data.jvmTotal - data.jvmFree,
+                                data.jvmFree
+                            )
+                        ]
+                        data.fileStores.forEach((value) =>
+                            eChartsOptions.push(
+                                storageInfoVoToStorageEChartsOption(
+                                    value.mount,
+                                    value.total - value.free,
+                                    value.free
+                                )
+                            )
+                        )
+                        setStorageInfoEChartsOption(eChartsOptions)
+
+                        if (percentDivRef.current && keyDivRef.current) {
+                            keyDivRef.current.innerHTML = ''
+                            percentDivRef.current.innerHTML = ''
+                            eChartsOptions.forEach((value) => {
+                                const keyElement = document.createElement('div')
+                                const percentElement = document.createElement('div')
+                                keyElement.innerText = value.yAxis.data[0]
+                                percentElement.innerText = `${(
+                                    (value.series[0].data[0] /
+                                        (value.series[0].data[0] + value.series[1].data[0])) *
+                                    100
+                                ).toFixed(2)}%`
+
+                                keyDivRef.current?.appendChild(keyElement)
+                                percentDivRef.current?.appendChild(percentElement)
+                            })
+                        }
+
+                        if (!storageInfoEChartsRef.current.length) {
+                            storageInfoDivRef.current && (storageInfoDivRef.current.innerHTML = '')
+
+                            eChartsOptions.forEach(() => {
+                                const element = document.createElement('div')
+                                storageInfoDivRef.current?.appendChild(element)
+                                storageInfoEChartsRef.current.push(
+                                    echarts.init(element, null, { renderer: 'svg' })
+                                )
+                            })
+                        }
+                    })
+                }
+            }
+        })
+
+        return getStorageInfo
+    }
+
+    const storageInfoVoToStorageEChartsOption = (label: string, used: number, free: number) => ({
+        ...barEChartsBaseOption,
+        xAxis: {
+            ...barEChartsBaseOption.xAxis,
+            max: used + free
+        },
+        yAxis: {
+            ...barEChartsBaseOption.yAxis,
+            data: [label]
+        },
+        series: [
+            {
+                ...storageDefaultSeriesOption,
+                name: 'used',
+                data: [used]
+            },
+            {
+                ...storageDefaultSeriesOption,
+                name: 'free',
+                data: [free]
+            }
+        ]
+    })
+
+    useEffect(() => {
+        storageInfoEChartsRef.current?.forEach((value, index) => {
+            try {
+                value.setOption(storageInfoEChartsOption[index])
+            } catch (e) {
+                /* empty */
+            }
+        })
+    }, [storageInfoEChartsOption])
+
+    return (
+        <>
+            <CommonCard
+                icon={IconFatwebMemory}
+                title={'内存信息'}
+                loading={isLoading}
+                expand={
+                    <AntdSelect
+                        value={refreshInterval}
+                        onChange={(value) => setRefreshInterval(value)}
+                    >
+                        <AntdSelect.Option key={1}>1秒</AntdSelect.Option>
+                        <AntdSelect.Option key={2}>2秒</AntdSelect.Option>
+                        <AntdSelect.Option key={3}>3秒</AntdSelect.Option>
+                        <AntdSelect.Option key={5}>5秒</AntdSelect.Option>
+                        <AntdSelect.Option key={10}>10秒</AntdSelect.Option>
+                        <AntdSelect.Option key={15}>15秒</AntdSelect.Option>
+                        <AntdSelect.Option key={20}>20秒</AntdSelect.Option>
+                        <AntdSelect.Option key={30}>30秒</AntdSelect.Option>
+                        <AntdSelect.Option key={60}>60秒</AntdSelect.Option>
+                        <AntdSelect.Option key={120}>2分</AntdSelect.Option>
+                        <AntdSelect.Option key={180}>3分</AntdSelect.Option>
+                        <AntdSelect.Option key={300}>5分</AntdSelect.Option>
+                        <AntdSelect.Option key={600}>10分</AntdSelect.Option>
+                    </AntdSelect>
+                }
+            >
+                <FlexBox className={'card-content'} direction={'horizontal'}>
+                    <FlexBox className={'key'} ref={keyDivRef} />
+                    <FlexBox className={'value-chart'} ref={storageInfoDivRef} />
+                    <FlexBox className={'value-percent'} ref={percentDivRef} />
+                </FlexBox>
+            </CommonCard>
+        </>
+    )
+}
+
+const Statistic: React.FC = () => {
+    return (
+        <>
+            <FitFullScreen>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <OnlineInfo />
+                        <ActiveInfo />
+                        <SoftwareInfo />
+                        <HardwareInfo />
+                        <CPUInfo />
+                        <StorageInfo />
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullScreen>
+        </>
+    )
+}
+
+export default Statistic
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 841cfba..52eede3 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -1,956 +1,7 @@
-import React, { useEffect, useState } from 'react'
-import Icon from '@ant-design/icons'
-import * as echarts from 'echarts/core'
-import {
-    TooltipComponent,
-    TooltipComponentOption,
-    GridComponent,
-    GridComponentOption,
-    ToolboxComponentOption,
-    DataZoomComponentOption,
-    ToolboxComponent,
-    DataZoomComponent
-} from 'echarts/components'
-import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
-import { UniversalTransition } from 'echarts/features'
-import { SVGRenderer } from 'echarts/renderers'
-import { TopLevelFormatterParams } from 'echarts/types/dist/shared'
-import '@/assets/css/pages/system/index.scss'
-import { useUpdatedEffect } from '@/util/hooks'
-import { formatByteSize } from '@/util/common'
-import { getTimesBetweenTwoTimes, utcToLocalTime } from '@/util/datetime'
-import {
-    r_sys_statistic_active,
-    r_sys_statistic_cpu,
-    r_sys_statistic_hardware,
-    r_sys_statistic_online,
-    r_sys_statistic_software,
-    r_sys_statistic_storage
-} from '@/services/system'
-import Card from '@/components/common/Card'
-import FlexBox from '@/components/common/FlexBox'
-import FitFullScreen from '@/components/common/FitFullScreen'
-import HideScrollbar from '@/components/common/HideScrollbar'
-import LoadingMask from '@/components/common/LoadingMask'
-
-echarts.use([
-    TooltipComponent,
-    ToolboxComponent,
-    GridComponent,
-    DataZoomComponent,
-    BarChart,
-    LineChart,
-    SVGRenderer,
-    UniversalTransition
-])
-type EChartsOption = echarts.ComposeOption<
-    | TooltipComponentOption
-    | ToolboxComponentOption
-    | GridComponentOption
-    | BarSeriesOption
-    | DataZoomComponentOption
-    | LineSeriesOption
->
-
-const barDefaultSeriesOption: BarSeriesOption = {
-    type: 'bar',
-    stack: 'total',
-    itemStyle: {
-        color: (params) => {
-            switch (params.seriesName) {
-                case 'idle':
-                case 'free':
-                    return '#F5F5F5'
-                default:
-                    return params.color ?? echarts.color.random()
-            }
-        }
-    }
-}
-
-const barEChartsBaseOption: EChartsOption = {
-    tooltip: {},
-    xAxis: {
-        show: false
-    },
-    yAxis: {
-        axisLine: {
-            show: false
-        },
-        axisLabel: {
-            show: false
-        },
-        axisTick: {
-            show: false
-        },
-        splitLine: {
-            show: false
-        },
-        axisPointer: {
-            show: false
-        }
-    }
-}
-
-const getTooltipTimeFormatter = (format: string = 'yyyy-MM-DD HH:mm:ss') => {
-    return (params: TopLevelFormatterParams) =>
-        `${utcToLocalTime(
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
-            params[0].data[0],
-            format
-        )}<br><span style="display: flex; justify-content: space-between"><span>${
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            params[0]['marker']
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        }${params[0]['seriesName']}</span><span style="font-weight: bold">${
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
-            params[0].data[1]
-        }</span></span> `
-}
-
-const lineEChartsBaseOption: EChartsOption = {
-    tooltip: {
-        trigger: 'axis'
-    },
-    toolbox: {
-        feature: {
-            dataZoom: {
-                yAxisIndex: 'none'
-            },
-            restore: {},
-            saveAsImage: {}
-        }
-    },
-    xAxis: {
-        type: 'time'
-    },
-    yAxis: {
-        type: 'value',
-        interval: 1
-    },
-    dataZoom: [
-        {
-            type: 'inside',
-            start: 0,
-            end: 100,
-            minValueSpan: 2 * 60 * 60 * 1000
-        }
-    ],
-    series: [{}]
-}
-
-interface CommonCardProps extends React.PropsWithChildren {
-    icon: IconComponent
-    title: React.ReactNode
-    loading?: boolean
-    expand?: React.ReactNode
-}
-
-const CommonCard: React.FC<CommonCardProps> = (props) => {
-    return (
-        <Card style={{ overflow: 'visible' }}>
-            <FlexBox className={'common-card'}>
-                <FlexBox direction={'horizontal'} className={'head'}>
-                    <Icon component={props.icon} className={'icon'} />
-                    <div className={'title'}>{props.title}</div>
-                    {props.expand}
-                </FlexBox>
-                <LoadingMask
-                    hidden={!props.loading}
-                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
-                >
-                    {props.children}
-                </LoadingMask>
-            </FlexBox>
-        </Card>
-    )
-}
-
-const OnlineInfo: React.FC = () => {
-    const onlineInfoDivRef = useRef<HTMLDivElement>(null)
-    const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
-    const [isLoading, setIsLoading] = useState(false)
-    const [currentOnlineCount, setCurrentOnlineCount] = useState(-1)
-    const [scope, setScope] = useState('WEAK')
-
-    useUpdatedEffect(() => {
-        const chartResizeObserver = new ResizeObserver(() => {
-            onlineInfoEChartsRef.current?.resize()
-        })
-
-        onlineInfoDivRef.current && chartResizeObserver.observe(onlineInfoDivRef.current)
-
-        return () => {
-            onlineInfoDivRef.current && chartResizeObserver.unobserve(onlineInfoDivRef.current)
-        }
-    }, [isLoading])
-
-    useUpdatedEffect(() => {
-        getOnlineInfo()
-    }, [])
-
-    const handleOnScopeChange = (value: string) => {
-        setScope(value)
-        getOnlineInfo(value)
-    }
-
-    const handleOnRefresh = () => {
-        getOnlineInfo()
-    }
-
-    const getOnlineInfo = (_scope: string = scope) => {
-        if (isLoading) {
-            return
-        }
-
-        setIsLoading(true)
-
-        void r_sys_statistic_online({ scope: _scope }).then((res) => {
-            const response = res.data
-            if (response.success) {
-                const data = response.data
-                if (data) {
-                    setIsLoading(false)
-
-                    setCurrentOnlineCount(data.current)
-
-                    setTimeout(() => {
-                        const dataList = getTimesBetweenTwoTimes(
-                            data.history[0].time,
-                            data.history[data.history.length - 1].time,
-                            'minute'
-                        ).map((time) => [
-                            time,
-                            data.history.find(
-                                (value) => value.time.substring(0, 16) === time.substring(0, 16)
-                            )?.record ?? 0
-                        ])
-
-                        onlineInfoEChartsRef.current = echarts.init(
-                            onlineInfoDivRef.current,
-                            null,
-                            { renderer: 'svg' }
-                        )
-
-                        onlineInfoEChartsRef.current?.setOption({
-                            ...lineEChartsBaseOption,
-                            tooltip: {
-                                ...lineEChartsBaseOption.tooltip,
-                                formatter: getTooltipTimeFormatter('yyyy-MM-DD HH:mm')
-                            },
-                            xAxis: {
-                                ...lineEChartsBaseOption.xAxis
-                            },
-                            series: [
-                                {
-                                    name: '在线人数',
-                                    type: 'line',
-                                    smooth: true,
-                                    symbol: 'none',
-                                    areaStyle: {},
-                                    data: dataList
-                                }
-                            ]
-                        })
-                    })
-                }
-            }
-        })
-    }
-
-    return (
-        <CommonCard
-            icon={IconFatwebOnline}
-            title={
-                <>
-                    <FlexBox gap={10} direction={'horizontal'}>
-                        <span style={{ whiteSpace: 'nowrap' }}>在线用户</span>
-                        <AntdTag>
-                            当前 {currentOnlineCount === -1 ? '获取中...' : currentOnlineCount}
-                        </AntdTag>
-                    </FlexBox>
-                </>
-            }
-            loading={isLoading}
-            expand={
-                <>
-                    <AntdSelect value={scope} onChange={handleOnScopeChange} disabled={isLoading}>
-                        <AntdSelect.Option key={'DAY'}>今天</AntdSelect.Option>
-                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
-                        <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
-                        <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
-                        <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>
-                        <AntdSelect.Option key={'TWO_YEARS'}>最近2年</AntdSelect.Option>
-                        <AntdSelect.Option key={'THREE_YEARS'}>最近3年</AntdSelect.Option>
-                        <AntdSelect.Option key={'FIVE_YEARS'}>最近5年</AntdSelect.Option>
-                        <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
-                    </AntdSelect>
-                    <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
-                        <Icon component={IconFatwebRefresh} />
-                    </AntdButton>
-                </>
-            }
-        >
-            <FlexBox className={'card-content'} direction={'horizontal'}>
-                <div className={'big-chart'} ref={onlineInfoDivRef} />
-            </FlexBox>
-        </CommonCard>
-    )
-}
-
-const ActiveInfo: React.FC = () => {
-    const activeInfoDivRef = useRef<HTMLDivElement>(null)
-    const activeInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
-    const [isLoading, setIsLoading] = useState(false)
-    const [scope, setScope] = useState('WEAK')
-
-    useUpdatedEffect(() => {
-        const chartResizeObserver = new ResizeObserver(() => {
-            activeInfoEChartsRef.current?.resize()
-        })
-
-        activeInfoDivRef.current && chartResizeObserver.observe(activeInfoDivRef.current)
-
-        return () => {
-            activeInfoDivRef.current && chartResizeObserver.unobserve(activeInfoDivRef.current)
-        }
-    }, [isLoading])
-
-    useUpdatedEffect(() => {
-        getActiveInfo()
-    }, [])
-
-    const handleOnScopeChange = (value: string) => {
-        setScope(value)
-        getActiveInfo(value)
-    }
-
-    const handleOnRefresh = () => {
-        getActiveInfo()
-    }
-
-    const getActiveInfo = (_scope: string = scope) => {
-        if (isLoading) {
-            return
-        }
-
-        setIsLoading(true)
-
-        void r_sys_statistic_active({ scope: _scope }).then((res) => {
-            const response = res.data
-            if (response.success) {
-                const data = response.data
-                if (data) {
-                    setIsLoading(false)
-
-                    setTimeout(() => {
-                        const registerList = data.registerHistory.length
-                            ? getTimesBetweenTwoTimes(
-                                  data.registerHistory[0].time,
-                                  data.registerHistory[data.registerHistory.length - 1].time,
-                                  'day'
-                              ).map((time) => [
-                                  time,
-                                  data.registerHistory.find(
-                                      (value) =>
-                                          value.time.substring(0, 10) === time.substring(0, 10)
-                                  )?.count ?? 0
-                              ])
-                            : []
-                        const loginList = data.loginHistory.length
-                            ? getTimesBetweenTwoTimes(
-                                  data.loginHistory[0].time,
-                                  data.loginHistory[data.loginHistory.length - 1].time,
-                                  'day'
-                              ).map((time) => [
-                                  time,
-                                  data.loginHistory.find(
-                                      (value) =>
-                                          value.time.substring(0, 10) === time.substring(0, 10)
-                                  )?.count ?? 0
-                              ])
-                            : []
-
-                        activeInfoEChartsRef.current = echarts.init(
-                            activeInfoDivRef.current,
-                            null,
-                            { renderer: 'svg' }
-                        )
-
-                        activeInfoEChartsRef.current?.setOption({
-                            ...lineEChartsBaseOption,
-                            tooltip: {
-                                ...lineEChartsBaseOption.tooltip,
-                                formatter: getTooltipTimeFormatter('yyyy-MM-DD')
-                            },
-                            dataZoom: [
-                                {
-                                    type: 'inside',
-                                    start: 0,
-                                    end: 100,
-                                    minValueSpan: 2 * 24 * 60 * 60 * 1000
-                                }
-                            ],
-                            series: [
-                                {
-                                    name: '注册人数',
-                                    type: 'line',
-                                    smooth: true,
-                                    symbol: 'none',
-                                    areaStyle: {},
-                                    data: registerList
-                                },
-                                {
-                                    name: '登录人数',
-                                    type: 'line',
-                                    smooth: true,
-                                    symbol: 'none',
-                                    areaStyle: {},
-                                    data: loginList
-                                }
-                            ]
-                        })
-                    })
-                }
-            }
-        })
-    }
-
-    return (
-        <CommonCard
-            icon={IconFatwebAnalysis}
-            title={
-                <>
-                    <FlexBox gap={10} direction={'horizontal'}>
-                        <span style={{ whiteSpace: 'nowrap' }}>用户活跃</span>
-                    </FlexBox>
-                </>
-            }
-            loading={isLoading}
-            expand={
-                <>
-                    <AntdSelect value={scope} onChange={handleOnScopeChange} disabled={isLoading}>
-                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
-                        <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
-                        <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
-                        <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>
-                        <AntdSelect.Option key={'TWO_YEARS'}>最近2年</AntdSelect.Option>
-                        <AntdSelect.Option key={'THREE_YEARS'}>最近3年</AntdSelect.Option>
-                        <AntdSelect.Option key={'FIVE_YEARS'}>最近5年</AntdSelect.Option>
-                        <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
-                    </AntdSelect>
-                    <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
-                        <Icon component={IconFatwebRefresh} />
-                    </AntdButton>
-                </>
-            }
-        >
-            <FlexBox className={'card-content'} direction={'horizontal'}>
-                <div className={'big-chart'} ref={activeInfoDivRef} />
-            </FlexBox>
-        </CommonCard>
-    )
-}
-
-const SoftwareInfo: React.FC = () => {
-    const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
-
-    useUpdatedEffect(() => {
-        void r_sys_statistic_software().then((res) => {
-            const response = res.data
-            if (response.success) {
-                response.data && setSoftwareInfoData(response.data)
-            } else {
-                void message.error('获取软件信息失败，请稍后重试')
-            }
-        })
-    }, [])
-
-    return (
-        <CommonCard
-            icon={IconFatwebSoftware}
-            title={'软件信息'}
-            loading={softwareInfoData === undefined}
-        >
-            <FlexBox className={'card-content'} direction={'horizontal'}>
-                <FlexBox className={'key'}>
-                    <div>操作系统</div>
-                    <div>位数</div>
-                    <div>Java</div>
-                    <div>Java 供应商</div>
-                    <div>Runtime</div>
-                    <div>JVM</div>
-                    <div>JVM 供应商</div>
-                    <div>操作系统启动时间</div>
-                    <div>后端服务器启动时间</div>
-                </FlexBox>
-                <FlexBox className={'value'}>
-                    <div title={softwareInfoData?.os}>{softwareInfoData?.os}</div>
-                    <div title={softwareInfoData?.bitness.toString()}>
-                        {softwareInfoData?.bitness}
-                    </div>
-                    <div
-                        title={`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}
-                    >{`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}</div>
-                    <div title={softwareInfoData?.javaVendor}>{softwareInfoData?.javaVendor}</div>
-                    <div
-                        title={`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}
-                    >{`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}</div>
-                    <div
-                        title={`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}
-                    >{`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}</div>
-                    <div title={softwareInfoData?.jvmVendor}>{softwareInfoData?.jvmVendor}</div>
-                    <div>
-                        {softwareInfoData?.osBootTime &&
-                            utcToLocalTime(softwareInfoData?.osBootTime)}
-                    </div>
-                    <div>
-                        {softwareInfoData?.serverStartupTime &&
-                            utcToLocalTime(softwareInfoData.serverStartupTime)}
-                    </div>
-                </FlexBox>
-            </FlexBox>
-        </CommonCard>
-    )
-}
-
-const HardwareInfo: React.FC = () => {
-    const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
-
-    useUpdatedEffect(() => {
-        void r_sys_statistic_hardware().then((res) => {
-            const response = res.data
-            if (response.success) {
-                response.data && setHardwareInfoData(response.data)
-            } else {
-                void message.error('获取硬件信息失败，请稍后重试')
-            }
-        })
-    }, [])
-
-    return (
-        <CommonCard
-            icon={IconFatwebHardware}
-            title={'硬件信息'}
-            loading={hardwareInfoData === undefined}
-        >
-            <FlexBox className={'card-content'} direction={'horizontal'}>
-                <FlexBox className={'key'}>
-                    <div>CPU</div>
-                    <div>CPU 架构</div>
-                    <div>微架构</div>
-                    <div>64位</div>
-                    <div>物理 CPU</div>
-                    <div>物理核心</div>
-                    <div>逻辑核心</div>
-                    <div>内存</div>
-                    <div>磁盘</div>
-                </FlexBox>
-                <FlexBox className={'value'}>
-                    <div title={hardwareInfoData?.cpu}>{hardwareInfoData?.cpu}</div>
-                    <div title={hardwareInfoData?.arch}>{hardwareInfoData?.arch}</div>
-                    <div title={hardwareInfoData?.microarchitecture}>
-                        {hardwareInfoData?.microarchitecture}
-                    </div>
-                    <div title={hardwareInfoData?.is64Bit ? '是' : '否'}>
-                        {hardwareInfoData?.is64Bit ? '是' : '否'}
-                    </div>
-                    <div title={hardwareInfoData?.cpuPhysicalPackageCount.toString()}>
-                        {hardwareInfoData?.cpuPhysicalPackageCount}
-                    </div>
-                    <div title={hardwareInfoData?.cpuPhysicalProcessorCount.toString()}>
-                        {hardwareInfoData?.cpuPhysicalProcessorCount}
-                    </div>
-                    <div title={hardwareInfoData?.cpuLogicalProcessorCount.toString()}>
-                        {hardwareInfoData?.cpuLogicalProcessorCount}
-                    </div>
-                    <div title={hardwareInfoData?.memories}>{hardwareInfoData?.memories}</div>
-                    <div title={hardwareInfoData?.disks}>{hardwareInfoData?.disks}</div>
-                </FlexBox>
-            </FlexBox>
-        </CommonCard>
-    )
-}
-
-const CPUInfo: React.FC = () => {
-    const keyDivRef = useRef<HTMLDivElement>(null)
-    const percentDivRef = useRef<HTMLDivElement>(null)
-    const cpuInfoDivRef = useRef<HTMLDivElement>(null)
-    const cpuInfoEChartsRef = useRef<echarts.EChartsType[]>([])
-    const [isLoading, setIsLoading] = useState(true)
-    const [refreshInterval, setRefreshInterval] = useState('5')
-    const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([])
-
-    const cpuDefaultSeriesOption: BarSeriesOption = {
-        ...barDefaultSeriesOption,
-        tooltip: {
-            valueFormatter: (value) => `${((value as number) * 100).toFixed(2)}%`
-        }
-    }
-
-    useUpdatedEffect(() => {
-        const chartResizeObserver = new ResizeObserver(() => {
-            cpuInfoEChartsRef.current.forEach((value) => value.resize())
-        })
-
-        cpuInfoDivRef.current && chartResizeObserver.observe(cpuInfoDivRef.current)
-
-        return () => {
-            cpuInfoDivRef.current && chartResizeObserver.unobserve(cpuInfoDivRef.current)
-        }
-    }, [cpuInfoDivRef.current])
-
-    useUpdatedEffect(() => {
-        const intervalId = setInterval(getCpuInfo(), parseInt(refreshInterval) * 1000)
-
-        return () => {
-            clearInterval(intervalId)
-        }
-    }, [refreshInterval])
-
-    const getCpuInfo = () => {
-        void r_sys_statistic_cpu().then((res) => {
-            const response = res.data
-            if (response.success) {
-                const data = response.data
-                if (data) {
-                    if (isLoading) {
-                        setIsLoading(false)
-                    }
-
-                    setTimeout(() => {
-                        const dataList = data.processors.map((value) =>
-                            cpuInfoVoToCpuInfoData(value)
-                        )
-                        dataList.unshift(cpuInfoVoToCpuInfoData(data))
-
-                        setCpuInfoEChartsOption(
-                            dataList.map((value, index) => ({
-                                ...barEChartsBaseOption,
-                                yAxis: {
-                                    ...barEChartsBaseOption.yAxis,
-                                    data: [index === 0 ? '总占用' : `CPU ${index - 1}`]
-                                },
-                                series: value
-                            }))
-                        )
-
-                        if (percentDivRef.current) {
-                            percentDivRef.current.innerHTML = ''
-                            dataList.forEach((value) => {
-                                const percentElement = document.createElement('div')
-                                const idle = value.find((item) => item.name === 'idle')?.data[0]
-                                percentElement.innerText =
-                                    idle !== undefined
-                                        ? `${((1 - idle) * 100).toFixed(2)}%`
-                                        : 'Unknown'
-                                percentDivRef.current?.appendChild(percentElement)
-                            })
-                        }
-
-                        if (!cpuInfoEChartsRef.current.length) {
-                            keyDivRef.current && (keyDivRef.current.innerHTML = '')
-                            cpuInfoDivRef.current && (cpuInfoDivRef.current.innerHTML = '')
-                            for (let i = 0; i < dataList.length; i++) {
-                                const keyElement = document.createElement('div')
-                                keyElement.innerText = i === 0 ? '总占用' : `CPU ${i - 1}`
-                                keyDivRef.current?.appendChild(keyElement)
-
-                                const valueElement = document.createElement('div')
-                                cpuInfoDivRef.current?.appendChild(valueElement)
-                                cpuInfoEChartsRef.current.push(
-                                    echarts.init(valueElement, null, { renderer: 'svg' })
-                                )
-                            }
-                        }
-                    })
-                }
-            }
-        })
-
-        return getCpuInfo
-    }
-
-    const cpuInfoVoToCpuInfoData = (cpuInfoVo: CpuInfoVo) =>
-        Object.entries(cpuInfoVo)
-            .filter(([key]) => !['total', 'processors'].includes(key))
-            .map(([key, value]) => ({
-                ...cpuDefaultSeriesOption,
-                name: key,
-                data: [(value as number) / cpuInfoVo.total]
-            }))
-            .sort((a, b) => {
-                const order = [
-                    'steal',
-                    'irq',
-                    'softirq',
-                    'iowait',
-                    'system',
-                    'nice',
-                    'user',
-                    'idle'
-                ]
-                return order.indexOf(a.name) - order.indexOf(b.name)
-            })
-
-    useEffect(() => {
-        cpuInfoEChartsRef.current?.forEach((value, index) => {
-            try {
-                value.setOption(cpuInfoEChartsOption[index])
-            } catch (e) {
-                /* empty */
-            }
-        })
-    }, [cpuInfoEChartsOption])
-
-    return (
-        <>
-            <CommonCard
-                icon={IconFatwebCpu}
-                title={'CPU 信息'}
-                loading={isLoading}
-                expand={
-                    <AntdSelect
-                        value={refreshInterval}
-                        onChange={(value) => setRefreshInterval(value)}
-                    >
-                        <AntdSelect.Option key={1}>1秒</AntdSelect.Option>
-                        <AntdSelect.Option key={2}>2秒</AntdSelect.Option>
-                        <AntdSelect.Option key={3}>3秒</AntdSelect.Option>
-                        <AntdSelect.Option key={5}>5秒</AntdSelect.Option>
-                        <AntdSelect.Option key={10}>10秒</AntdSelect.Option>
-                        <AntdSelect.Option key={15}>15秒</AntdSelect.Option>
-                        <AntdSelect.Option key={20}>20秒</AntdSelect.Option>
-                        <AntdSelect.Option key={30}>30秒</AntdSelect.Option>
-                        <AntdSelect.Option key={60}>60秒</AntdSelect.Option>
-                        <AntdSelect.Option key={120}>2分</AntdSelect.Option>
-                        <AntdSelect.Option key={180}>3分</AntdSelect.Option>
-                        <AntdSelect.Option key={300}>5分</AntdSelect.Option>
-                        <AntdSelect.Option key={600}>10分</AntdSelect.Option>
-                    </AntdSelect>
-                }
-            >
-                <FlexBox className={'card-content'} direction={'horizontal'}>
-                    <FlexBox className={'key'} ref={keyDivRef} />
-                    <FlexBox className={'value-chart'} ref={cpuInfoDivRef} />
-                    <FlexBox className={'value-percent'} ref={percentDivRef} />
-                </FlexBox>
-            </CommonCard>
-        </>
-    )
-}
-
-const StorageInfo: React.FC = () => {
-    const keyDivRef = useRef<HTMLDivElement>(null)
-    const percentDivRef = useRef<HTMLDivElement>(null)
-    const storageInfoDivRef = useRef<HTMLDivElement>(null)
-    const storageInfoEChartsRef = useRef<echarts.EChartsType[]>([])
-    const [isLoading, setIsLoading] = useState(true)
-    const [refreshInterval, setRefreshInterval] = useState('5')
-    const [storageInfoEChartsOption, setStorageInfoEChartsOption] = useState<EChartsOption[]>([])
-
-    const storageDefaultSeriesOption: BarSeriesOption = {
-        ...barDefaultSeriesOption,
-        tooltip: { valueFormatter: (value) => formatByteSize(value as number) }
-    }
-
-    useUpdatedEffect(() => {
-        const chartResizeObserver = new ResizeObserver(() => {
-            storageInfoEChartsRef.current.forEach((value) => value.resize())
-        })
-
-        storageInfoDivRef.current && chartResizeObserver.observe(storageInfoDivRef.current)
-
-        return () => {
-            storageInfoDivRef.current && chartResizeObserver.unobserve(storageInfoDivRef.current)
-        }
-    }, [storageInfoDivRef.current])
-
-    useUpdatedEffect(() => {
-        const intervalId = setInterval(getStorageInfo(), parseInt(refreshInterval) * 1000)
-
-        return () => {
-            clearInterval(intervalId)
-        }
-    }, [refreshInterval])
-
-    const getStorageInfo = () => {
-        void r_sys_statistic_storage().then((res) => {
-            const response = res.data
-            if (response.success) {
-                const data = response.data
-                if (data) {
-                    if (isLoading) {
-                        setIsLoading(false)
-                    }
-
-                    setTimeout(() => {
-                        const eChartsOptions = [
-                            storageInfoVoToStorageEChartsOption(
-                                '物理内存',
-                                data.memoryTotal - data.memoryFree,
-                                data.memoryFree
-                            ),
-                            storageInfoVoToStorageEChartsOption(
-                                '虚拟内存',
-                                data.virtualMemoryInUse,
-                                data.virtualMemoryMax - data.virtualMemoryInUse
-                            ),
-                            storageInfoVoToStorageEChartsOption(
-                                'swap',
-                                data.swapUsed,
-                                data.swapTotal - data.swapUsed
-                            ),
-                            storageInfoVoToStorageEChartsOption(
-                                'jvm 内存',
-                                data.jvmTotal - data.jvmFree,
-                                data.jvmFree
-                            )
-                        ]
-                        data.fileStores.forEach((value) =>
-                            eChartsOptions.push(
-                                storageInfoVoToStorageEChartsOption(
-                                    value.mount,
-                                    value.total - value.free,
-                                    value.free
-                                )
-                            )
-                        )
-                        setStorageInfoEChartsOption(eChartsOptions)
-
-                        if (percentDivRef.current && keyDivRef.current) {
-                            keyDivRef.current.innerHTML = ''
-                            percentDivRef.current.innerHTML = ''
-                            eChartsOptions.forEach((value) => {
-                                const keyElement = document.createElement('div')
-                                const percentElement = document.createElement('div')
-                                keyElement.innerText = value.yAxis.data[0]
-                                percentElement.innerText = `${(
-                                    (value.series[0].data[0] /
-                                        (value.series[0].data[0] + value.series[1].data[0])) *
-                                    100
-                                ).toFixed(2)}%`
-
-                                keyDivRef.current?.appendChild(keyElement)
-                                percentDivRef.current?.appendChild(percentElement)
-                            })
-                        }
-
-                        if (!storageInfoEChartsRef.current.length) {
-                            storageInfoDivRef.current && (storageInfoDivRef.current.innerHTML = '')
-
-                            eChartsOptions.forEach(() => {
-                                const element = document.createElement('div')
-                                storageInfoDivRef.current?.appendChild(element)
-                                storageInfoEChartsRef.current.push(
-                                    echarts.init(element, null, { renderer: 'svg' })
-                                )
-                            })
-                        }
-                    })
-                }
-            }
-        })
-
-        return getStorageInfo
-    }
-
-    const storageInfoVoToStorageEChartsOption = (label: string, used: number, free: number) => ({
-        ...barEChartsBaseOption,
-        xAxis: {
-            ...barEChartsBaseOption.xAxis,
-            max: used + free
-        },
-        yAxis: {
-            ...barEChartsBaseOption.yAxis,
-            data: [label]
-        },
-        series: [
-            {
-                ...storageDefaultSeriesOption,
-                name: 'used',
-                data: [used]
-            },
-            {
-                ...storageDefaultSeriesOption,
-                name: 'free',
-                data: [free]
-            }
-        ]
-    })
-
-    useEffect(() => {
-        storageInfoEChartsRef.current?.forEach((value, index) => {
-            try {
-                value.setOption(storageInfoEChartsOption[index])
-            } catch (e) {
-                /* empty */
-            }
-        })
-    }, [storageInfoEChartsOption])
-
-    return (
-        <>
-            <CommonCard
-                icon={IconFatwebMemory}
-                title={'内存信息'}
-                loading={isLoading}
-                expand={
-                    <AntdSelect
-                        value={refreshInterval}
-                        onChange={(value) => setRefreshInterval(value)}
-                    >
-                        <AntdSelect.Option key={1}>1秒</AntdSelect.Option>
-                        <AntdSelect.Option key={2}>2秒</AntdSelect.Option>
-                        <AntdSelect.Option key={3}>3秒</AntdSelect.Option>
-                        <AntdSelect.Option key={5}>5秒</AntdSelect.Option>
-                        <AntdSelect.Option key={10}>10秒</AntdSelect.Option>
-                        <AntdSelect.Option key={15}>15秒</AntdSelect.Option>
-                        <AntdSelect.Option key={20}>20秒</AntdSelect.Option>
-                        <AntdSelect.Option key={30}>30秒</AntdSelect.Option>
-                        <AntdSelect.Option key={60}>60秒</AntdSelect.Option>
-                        <AntdSelect.Option key={120}>2分</AntdSelect.Option>
-                        <AntdSelect.Option key={180}>3分</AntdSelect.Option>
-                        <AntdSelect.Option key={300}>5分</AntdSelect.Option>
-                        <AntdSelect.Option key={600}>10分</AntdSelect.Option>
-                    </AntdSelect>
-                }
-            >
-                <FlexBox className={'card-content'} direction={'horizontal'}>
-                    <FlexBox className={'key'} ref={keyDivRef} />
-                    <FlexBox className={'value-chart'} ref={storageInfoDivRef} />
-                    <FlexBox className={'value-percent'} ref={percentDivRef} />
-                </FlexBox>
-            </CommonCard>
-        </>
-    )
-}
+import React from 'react'
 
 const System: React.FC = () => {
-    return (
-        <>
-            <FitFullScreen>
-                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
-                    <FlexBox direction={'horizontal'} className={'root-content'}>
-                        <OnlineInfo />
-                        <ActiveInfo />
-                        <SoftwareInfo />
-                        <HardwareInfo />
-                        <CPUInfo />
-                        <StorageInfo />
-                    </FlexBox>
-                </HideScrollbar>
-            </FitFullScreen>
-        </>
-    )
+    return <></>
 }
 
 export default System
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 33087c9..b49d535 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -7,9 +7,19 @@ const system: RouteJsonObject[] = [
         absolutePath: '/system',
         id: 'system',
         component: React.lazy(() => import('@/pages/system')),
+        name: '系统管理',
+        icon: React.lazy(() => import('~icons/fatweb/setting.jsx')),
+        menu: true
+    },
+    {
+        path: 'statistic',
+        absolutePath: '/system/statistic',
+        id: 'system-statistic',
+        component: React.lazy(() => import('@/pages/system/Statistic')),
         name: '系统概况',
         icon: React.lazy(() => import('~icons/fatweb/chart.jsx')),
-        menu: true
+        menu: true,
+        autoHide: true
     },
     {
         path: 'settings',

From ce380bedfa117ec605e24f7008b5a3d48d0e6ebc Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 20 Dec 2023 09:48:13 +0800
Subject: [PATCH 132/307] Rename index.scss to statistic.scss. Add permission
 to statistic management page.

---
 .../system/{index.scss => statistic.scss}     |  0
 src/pages/system/Statistic.tsx                | 21 ++++++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)
 rename src/assets/css/pages/system/{index.scss => statistic.scss} (100%)

diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/statistic.scss
similarity index 100%
rename from src/assets/css/pages/system/index.scss
rename to src/assets/css/pages/system/statistic.scss
diff --git a/src/pages/system/Statistic.tsx b/src/pages/system/Statistic.tsx
index 54c4b90..4a210df 100644
--- a/src/pages/system/Statistic.tsx
+++ b/src/pages/system/Statistic.tsx
@@ -15,7 +15,7 @@ import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/
 import { UniversalTransition } from 'echarts/features'
 import { SVGRenderer } from 'echarts/renderers'
 import { TopLevelFormatterParams } from 'echarts/types/dist/shared'
-import '@/assets/css/pages/system/index.scss'
+import '@/assets/css/pages/system/statistic.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { formatByteSize } from '@/util/common'
 import { getTimesBetweenTwoTimes, utcToLocalTime } from '@/util/datetime'
@@ -32,6 +32,7 @@ import FlexBox from '@/components/common/FlexBox'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import LoadingMask from '@/components/common/LoadingMask'
+import Permission from '@/components/common/Permission'
 
 echarts.use([
     TooltipComponent,
@@ -940,12 +941,18 @@ const Statistic: React.FC = () => {
             <FitFullScreen>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
-                        <OnlineInfo />
-                        <ActiveInfo />
-                        <SoftwareInfo />
-                        <HardwareInfo />
-                        <CPUInfo />
-                        <StorageInfo />
+                        <Permission operationCode={'system:statistic:query:usage'}>
+                            <OnlineInfo />
+                            <ActiveInfo />
+                        </Permission>
+                        <Permission operationCode={'system:statistic:query:base'}>
+                            <SoftwareInfo />
+                            <HardwareInfo />
+                        </Permission>
+                        <Permission operationCode={'system:statistic:query:real'}>
+                            <CPUInfo />
+                            <StorageInfo />
+                        </Permission>
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>

From 1b8abd790603748dddf5334db2e580b475b552bc Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 20 Dec 2023 11:37:16 +0800
Subject: [PATCH 133/307] Rename statistic to statistics

---
 .../{statistic.scss => statistics.scss}       |  0
 src/constants/urls.constants.ts               | 14 ++++----
 src/pages/SystemFramework.tsx                 |  2 +-
 src/pages/UserFramework.tsx                   |  2 +-
 src/pages/system/Log.tsx                      |  2 +-
 .../system/{Statistic.tsx => Statistics.tsx}  | 36 +++++++++----------
 src/router/system.tsx                         |  8 ++---
 src/services/system.tsx                       | 32 ++++++++---------
 8 files changed, 48 insertions(+), 48 deletions(-)
 rename src/assets/css/pages/system/{statistic.scss => statistics.scss} (100%)
 rename src/pages/system/{Statistic.tsx => Statistics.tsx} (98%)

diff --git a/src/assets/css/pages/system/statistic.scss b/src/assets/css/pages/system/statistics.scss
similarity index 100%
rename from src/assets/css/pages/system/statistic.scss
rename to src/assets/css/pages/system/statistics.scss
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 75c2374..ba5de7a 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -11,13 +11,13 @@ export const URL_SYS_GROUP = '/system/group'
 export const URL_SYS_GROUP_LIST = '/system/group/list'
 export const URL_SYS_SETTINGS = '/system/settings'
 export const URL_SYS_SETTINGS_MAIL = `${URL_SYS_SETTINGS}/mail`
-export const URL_SYS_STATISTIC = '/system/statistic'
-export const URL_SYS_STATISTIC_SOFTWARE = `${URL_SYS_STATISTIC}/software`
-export const URL_SYS_STATISTIC_HARDWARE = `${URL_SYS_STATISTIC}/hardware`
-export const URL_SYS_STATISTIC_CPU = `${URL_SYS_STATISTIC}/cpu`
-export const URL_SYS_STATISTIC_STORAGE = `${URL_SYS_STATISTIC}/storage`
-export const URL_SYS_STATISTIC_ONLINE = `${URL_SYS_STATISTIC}/online`
-export const URL_SYS_STATISTIC_ACTIVE = `${URL_SYS_STATISTIC}/active`
+export const URL_SYS_STATISTICS = '/system/statistics'
+export const URL_SYS_STATISTICS_SOFTWARE = `${URL_SYS_STATISTICS}/software`
+export const URL_SYS_STATISTICS_HARDWARE = `${URL_SYS_STATISTICS}/hardware`
+export const URL_SYS_STATISTICS_CPU = `${URL_SYS_STATISTICS}/cpu`
+export const URL_SYS_STATISTICS_STORAGE = `${URL_SYS_STATISTICS}/storage`
+export const URL_SYS_STATISTICS_ONLINE = `${URL_SYS_STATISTICS}/online`
+export const URL_SYS_STATISTICS_ACTIVE = `${URL_SYS_STATISTICS}/active`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 3563013..baad543 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -12,7 +12,7 @@ const SystemFramework: React.FC = () => {
         <>
             <FitFullScreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
-                    <Sidebar title={'系统设置'}>
+                    <Sidebar title={'系统配置'}>
                         <SidebarItemList>
                             {getSystemRouteJson().map((value) => {
                                 return value.menu ? (
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 6782f72..a8b5e4c 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -21,7 +21,7 @@ const ToolsFramework: React.FC = () => {
                                     <SidebarItem
                                         path={'/system'}
                                         icon={IconFatwebSetting}
-                                        text={'系统设置'}
+                                        text={'系统配置'}
                                     />
                                 </SidebarItemList>
                             ) : undefined
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 61df564..3916b24 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -42,7 +42,7 @@ const Log: React.FC = () => {
                 { text: 'Login', value: 'LOGIN' },
                 { text: 'Logout', value: 'LOGOUT' },
                 { text: 'Register', value: 'Register' },
-                { text: 'Statistic', value: 'STATISTIC' },
+                { text: 'Statistics', value: 'STATISTICS' },
                 { text: 'API', value: 'API' },
                 { text: 'Error', value: 'ERROR' }
             ]
diff --git a/src/pages/system/Statistic.tsx b/src/pages/system/Statistics.tsx
similarity index 98%
rename from src/pages/system/Statistic.tsx
rename to src/pages/system/Statistics.tsx
index 4a210df..f214d1d 100644
--- a/src/pages/system/Statistic.tsx
+++ b/src/pages/system/Statistics.tsx
@@ -15,17 +15,17 @@ import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/
 import { UniversalTransition } from 'echarts/features'
 import { SVGRenderer } from 'echarts/renderers'
 import { TopLevelFormatterParams } from 'echarts/types/dist/shared'
-import '@/assets/css/pages/system/statistic.scss'
+import '@/assets/css/pages/system/statistics.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { formatByteSize } from '@/util/common'
 import { getTimesBetweenTwoTimes, utcToLocalTime } from '@/util/datetime'
 import {
-    r_sys_statistic_active,
-    r_sys_statistic_cpu,
-    r_sys_statistic_hardware,
-    r_sys_statistic_online,
-    r_sys_statistic_software,
-    r_sys_statistic_storage
+    r_sys_statistics_active,
+    r_sys_statistics_cpu,
+    r_sys_statistics_hardware,
+    r_sys_statistics_online,
+    r_sys_statistics_software,
+    r_sys_statistics_storage
 } from '@/services/system'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
@@ -214,7 +214,7 @@ const OnlineInfo: React.FC = () => {
 
         setIsLoading(true)
 
-        void r_sys_statistic_online({ scope: _scope }).then((res) => {
+        void r_sys_statistics_online({ scope: _scope }).then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
@@ -345,7 +345,7 @@ const ActiveInfo: React.FC = () => {
 
         setIsLoading(true)
 
-        void r_sys_statistic_active({ scope: _scope }).then((res) => {
+        void r_sys_statistics_active({ scope: _scope }).then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
@@ -465,7 +465,7 @@ const SoftwareInfo: React.FC = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
 
     useUpdatedEffect(() => {
-        void r_sys_statistic_software().then((res) => {
+        void r_sys_statistics_software().then((res) => {
             const response = res.data
             if (response.success) {
                 response.data && setSoftwareInfoData(response.data)
@@ -527,7 +527,7 @@ const HardwareInfo: React.FC = () => {
     const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
 
     useUpdatedEffect(() => {
-        void r_sys_statistic_hardware().then((res) => {
+        void r_sys_statistics_hardware().then((res) => {
             const response = res.data
             if (response.success) {
                 response.data && setHardwareInfoData(response.data)
@@ -618,7 +618,7 @@ const CPUInfo: React.FC = () => {
     }, [refreshInterval])
 
     const getCpuInfo = () => {
-        void r_sys_statistic_cpu().then((res) => {
+        void r_sys_statistics_cpu().then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
@@ -784,7 +784,7 @@ const StorageInfo: React.FC = () => {
     }, [refreshInterval])
 
     const getStorageInfo = () => {
-        void r_sys_statistic_storage().then((res) => {
+        void r_sys_statistics_storage().then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
@@ -935,21 +935,21 @@ const StorageInfo: React.FC = () => {
     )
 }
 
-const Statistic: React.FC = () => {
+const Statistics: React.FC = () => {
     return (
         <>
             <FitFullScreen>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
-                        <Permission operationCode={'system:statistic:query:usage'}>
+                        <Permission operationCode={'system:statistics:query:usage'}>
                             <OnlineInfo />
                             <ActiveInfo />
                         </Permission>
-                        <Permission operationCode={'system:statistic:query:base'}>
+                        <Permission operationCode={'system:statistics:query:base'}>
                             <SoftwareInfo />
                             <HardwareInfo />
                         </Permission>
-                        <Permission operationCode={'system:statistic:query:real'}>
+                        <Permission operationCode={'system:statistics:query:real'}>
                             <CPUInfo />
                             <StorageInfo />
                         </Permission>
@@ -960,4 +960,4 @@ const Statistic: React.FC = () => {
     )
 }
 
-export default Statistic
+export default Statistics
diff --git a/src/router/system.tsx b/src/router/system.tsx
index b49d535..40ee0bd 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -12,10 +12,10 @@ const system: RouteJsonObject[] = [
         menu: true
     },
     {
-        path: 'statistic',
-        absolutePath: '/system/statistic',
-        id: 'system-statistic',
-        component: React.lazy(() => import('@/pages/system/Statistic')),
+        path: 'statistics',
+        absolutePath: '/system/statistics',
+        id: 'system-statistics',
+        component: React.lazy(() => import('@/pages/system/Statistics')),
         name: '系统概况',
         icon: React.lazy(() => import('~icons/fatweb/chart.jsx')),
         menu: true,
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 9d8133e..32ba2e9 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -9,12 +9,12 @@ import {
     URL_SYS_GROUP_LIST,
     URL_SYS_LOG,
     URL_SYS_SETTINGS_MAIL,
-    URL_SYS_STATISTIC_SOFTWARE,
-    URL_SYS_STATISTIC_HARDWARE,
-    URL_SYS_STATISTIC_CPU,
-    URL_SYS_STATISTIC_STORAGE,
-    URL_SYS_STATISTIC_ONLINE,
-    URL_SYS_STATISTIC_ACTIVE
+    URL_SYS_STATISTICS_SOFTWARE,
+    URL_SYS_STATISTICS_HARDWARE,
+    URL_SYS_STATISTICS_CPU,
+    URL_SYS_STATISTICS_STORAGE,
+    URL_SYS_STATISTICS_ONLINE,
+    URL_SYS_STATISTICS_ACTIVE
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -79,18 +79,18 @@ export const r_sys_settings_mail_update = (param: MailSettingsParam) =>
 export const r_sys_settings_mail_send = (param: MailSendParam) =>
     request.post(URL_SYS_SETTINGS_MAIL, param)
 
-export const r_sys_statistic_software = () =>
-    request.get<SoftwareInfoVo>(URL_SYS_STATISTIC_SOFTWARE)
+export const r_sys_statistics_software = () =>
+    request.get<SoftwareInfoVo>(URL_SYS_STATISTICS_SOFTWARE)
 
-export const r_sys_statistic_hardware = () =>
-    request.get<HardwareInfoVo>(URL_SYS_STATISTIC_HARDWARE)
+export const r_sys_statistics_hardware = () =>
+    request.get<HardwareInfoVo>(URL_SYS_STATISTICS_HARDWARE)
 
-export const r_sys_statistic_cpu = () => request.get<CpuInfoVo>(URL_SYS_STATISTIC_CPU)
+export const r_sys_statistics_cpu = () => request.get<CpuInfoVo>(URL_SYS_STATISTICS_CPU)
 
-export const r_sys_statistic_storage = () => request.get<StorageInfoVo>(URL_SYS_STATISTIC_STORAGE)
+export const r_sys_statistics_storage = () => request.get<StorageInfoVo>(URL_SYS_STATISTICS_STORAGE)
 
-export const r_sys_statistic_online = (param: OnlineInfoGetParam) =>
-    request.get<OnlineInfoVo>(URL_SYS_STATISTIC_ONLINE, param)
+export const r_sys_statistics_online = (param: OnlineInfoGetParam) =>
+    request.get<OnlineInfoVo>(URL_SYS_STATISTICS_ONLINE, param)
 
-export const r_sys_statistic_active = (param: ActiveInfoGetParam) =>
-    request.get<ActiveInfoVo>(URL_SYS_STATISTIC_ACTIVE, param)
+export const r_sys_statistics_active = (param: ActiveInfoGetParam) =>
+    request.get<ActiveInfoVo>(URL_SYS_STATISTICS_ACTIVE, param)

From 4d072e0de8a4cd1f7a49caca9529050732c53a80 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 20 Dec 2023 11:37:53 +0800
Subject: [PATCH 134/307] Add index to system management

---
 package-lock.json                      |   8 +-
 package.json                           |   3 +-
 src/assets/css/pages/system/index.scss |  40 ++++++++++
 src/assets/svg/option.svg              |   1 +
 src/components/common/Permission.tsx   |   8 +-
 src/pages/system/Statistics.tsx        |   1 +
 src/pages/system/index.tsx             | 100 ++++++++++++++++++++++++-
 src/router/index.tsx                   |   4 +-
 src/router/system.tsx                  |   2 +-
 9 files changed, 159 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/css/pages/system/index.scss
 create mode 100644 src/assets/svg/option.svg

diff --git a/package-lock.json b/package-lock.json
index 2b5973d..1e3d549 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,8 @@
         "react-dom": "^18.2.0",
         "react-router": "^6.20.1",
         "react-router-dom": "^6.20.1",
-        "size-sensor": "^1.0.2"
+        "size-sensor": "^1.0.2",
+        "vanilla-tilt": "^1.8.1"
       },
       "devDependencies": {
         "@svgr/core": "^8.1.0",
@@ -7933,6 +7934,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/vanilla-tilt": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
+      "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw=="
+    },
     "node_modules/vite": {
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.6.tgz",
diff --git a/package.json b/package.json
index 54679a0..2d59e37 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,8 @@
     "react-dom": "^18.2.0",
     "react-router": "^6.20.1",
     "react-router-dom": "^6.20.1",
-    "size-sensor": "^1.0.2"
+    "size-sensor": "^1.0.2",
+    "vanilla-tilt": "^1.8.1"
   },
   "devDependencies": {
     "@svgr/core": "^8.1.0",
diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss
new file mode 100644
index 0000000..f0a072a
--- /dev/null
+++ b/src/assets/css/pages/system/index.scss
@@ -0,0 +1,40 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=system] {
+  .root-content {
+    padding: 30px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > .card-box {
+      width: 200px;
+      height: 360px;
+      flex: 0 0 auto;
+      cursor: pointer;
+
+      .common-card {
+        width: 100%;
+        height: 100%;
+        margin-top: 100px;
+        text-align: center;
+        gap: 42px;
+
+        > * {
+          flex: 0 0 auto;
+          display: block;
+        }
+
+        .icon {
+          color: constants.$production-color;
+          font-size: constants.$SIZE_ICON_XL;
+        }
+
+        .text {
+          font-weight: bolder;
+          font-size: 2em;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/svg/option.svg b/src/assets/svg/option.svg
new file mode 100644
index 0000000..63b7795
--- /dev/null
+++ b/src/assets/svg/option.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M810.666667 384a128 128 0 0 0-120.32 85.333333H128a42.666667 42.666667 0 0 0 0 85.333334h562.346667A128 128 0 1 0 810.666667 384zM128 298.666667h50.346667a128 128 0 0 0 240.64 0H896a42.666667 42.666667 0 0 0 0-85.333334H418.986667a128 128 0 0 0-240.64 0H128a42.666667 42.666667 0 0 0 0 85.333334zM896 725.333333h-306.346667a128 128 0 0 0-240.64 0H128a42.666667 42.666667 0 0 0 0 85.333334h221.013333a128 128 0 0 0 240.64 0H896a42.666667 42.666667 0 0 0 0-85.333334z" /></svg>
\ No newline at end of file
diff --git a/src/components/common/Permission.tsx b/src/components/common/Permission.tsx
index a904354..57b37e5 100644
--- a/src/components/common/Permission.tsx
+++ b/src/components/common/Permission.tsx
@@ -1,12 +1,16 @@
 import React from 'react'
-import { hasPermission } from '@/util/auth'
+import { hasPathPermission, hasPermission } from '@/util/auth'
 
 interface PermissionProps extends React.PropsWithChildren {
     operationCode?: string
+    path?: string
 }
 
 const Permission: React.FC<PermissionProps> = (props) => {
-    if (!props.operationCode || hasPermission(props.operationCode)) {
+    if (
+        (!props.operationCode || hasPermission(props.operationCode)) &&
+        (!props.path || hasPathPermission(props.path))
+    ) {
         return props.children
     }
 
diff --git a/src/pages/system/Statistics.tsx b/src/pages/system/Statistics.tsx
index f214d1d..25ff4e7 100644
--- a/src/pages/system/Statistics.tsx
+++ b/src/pages/system/Statistics.tsx
@@ -213,6 +213,7 @@ const OnlineInfo: React.FC = () => {
         }
 
         setIsLoading(true)
+        setCurrentOnlineCount(-1)
 
         void r_sys_statistics_online({ scope: _scope }).then((res) => {
             const response = res.data
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 52eede3..242131e 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -1,7 +1,105 @@
 import React from 'react'
+import Icon from '@ant-design/icons'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/pages/system/index.scss'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import FitFullScreen from '@/components/common/FitFullScreen'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
+import Permission from '@/components/common/Permission.tsx'
+
+interface CommonCardProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: IconComponent
+    description?: React.ReactNode
+    options?: TiltOptions
+    url?: string
+}
+
+const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
+    const navigate = useNavigate()
+    const cardRef = useRef<HTMLDivElement>(null)
+    const {
+        style,
+        ref,
+        icon,
+        description,
+        options = {
+            reverse: true,
+            max: 8,
+            glare: true,
+            scale: 1.03
+        },
+        url,
+        children,
+        ..._props
+    } = props
+
+    useEffect(() => {
+        cardRef.current && VanillaTilt.init(cardRef.current, options)
+    }, [options])
+
+    const handleCardOnClick = () => {
+        url && navigate(url)
+    }
+
+    return (
+        <Card
+            style={{ overflow: 'visible', ...style }}
+            ref={cardRef}
+            {..._props}
+            onClick={handleCardOnClick}
+        >
+            <FlexBox className={'common-card'}>
+                <Icon component={icon} className={'icon'} />
+                <div className={'text'}>{children}</div>
+                <div className={'description'}>{description}</div>
+            </FlexBox>
+        </Card>
+    )
+})
 
 const System: React.FC = () => {
-    return <></>
+    return (
+        <>
+            <FitFullScreen data-component={'system'}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <Permission path={'/system/statistics'}>
+                            <CommonCard icon={IconFatwebAnalysis} url={'statistics'}>
+                                系统概况
+                            </CommonCard>
+                        </Permission>
+                        <Permission path={'/system/settings'}>
+                            <CommonCard icon={IconFatwebOption} url={'settings'}>
+                                系统设置
+                            </CommonCard>
+                        </Permission>
+                        <Permission path={'/system/user'}>
+                            <CommonCard icon={IconFatwebUser} url={'user'}>
+                                用户管理
+                            </CommonCard>
+                        </Permission>
+                        <Permission path={'/system/role'}>
+                            <CommonCard icon={IconFatwebRole} url={'role'}>
+                                角色管理
+                            </CommonCard>
+                        </Permission>
+                        <Permission path={'/system/group'}>
+                            <CommonCard icon={IconFatwebGroup} url={'group'}>
+                                群组管理
+                            </CommonCard>
+                        </Permission>
+                        <Permission path={'/system/log'}>
+                            <CommonCard icon={IconFatwebLog} url={'log'}>
+                                系统日志
+                            </CommonCard>
+                        </Permission>
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullScreen>
+        </>
+    )
 }
 
 export default System
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 0a7ae4d..9e90791 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -47,8 +47,8 @@ const root: RouteJsonObject[] = [
                 absolutePath: '/system',
                 id: 'systemFramework',
                 component: React.lazy(() => import('@/pages/SystemFramework')),
-                children: setTitle(system, '系统设置'),
-                name: '系统设置',
+                children: setTitle(system, '系统配置'),
+                name: '系统配置',
                 auth: true,
                 permission: true
             },
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 40ee0bd..e36d154 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -27,7 +27,7 @@ const system: RouteJsonObject[] = [
         id: 'system-settings',
         component: React.lazy(() => import('@/pages/system/Settings')),
         name: '系统设置',
-        icon: React.lazy(() => import('~icons/fatweb/setting.jsx')),
+        icon: React.lazy(() => import('~icons/fatweb/option.jsx')),
         menu: true,
         autoHide: true
     },

From 73bfe53edcfdf44f3c03e93aab38491a88b1b4d9 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 20 Dec 2023 14:55:15 +0800
Subject: [PATCH 135/307] Support login with email

---
 src/global.d.ts           |  2 +-
 src/pages/Login.tsx       | 10 +++++-----
 src/pages/system/User.tsx |  6 +++---
 src/services/auth.tsx     |  4 ++--
 src/util/auth.tsx         |  4 ++--
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index 28204d2..e0e4c8c 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -149,7 +149,7 @@ interface GroupVo {
 }
 
 interface LoginForm {
-    username: string
+    account: string
     password: string
 }
 
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index a1362cb..b64c68a 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -19,7 +19,7 @@ const Login: React.FC = () => {
 
     const onFinish = (values: LoginForm) => {
         setIsLoggingIn(true)
-        void login(values.username, values.password)
+        void login(values.account, values.password)
             .then((value) => {
                 const res = value.data
                 const { code, data } = res
@@ -64,7 +64,7 @@ const Login: React.FC = () => {
                     case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
                         void messageApi.error(
                             <>
-                                <strong>用户名</strong>或<strong>密码</strong>错误，请重试
+                                <strong>账号</strong>或<strong>密码</strong>错误，请重试
                             </>
                         )
                         setIsLoggingIn(false)
@@ -114,12 +114,12 @@ const Login: React.FC = () => {
                         >
                             <AntdForm.Item
                                 className={'login-from-item'}
-                                name={'username'}
-                                rules={[{ required: true, message: '用户名为空' }]}
+                                name={'account'}
+                                rules={[{ required: true, message: '账号为空' }]}
                             >
                                 <AntdInput
                                     prefix={<UserOutlined />}
-                                    placeholder={'用户名'}
+                                    placeholder={'邮箱/用户名'}
                                     disabled={isLoggingIn}
                                 />
                             </AntdForm.Item>
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index b611767..10a3dfa 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -522,7 +522,7 @@ const User: React.FC = () => {
                             getUser()
                             break
                         case DATABASE_DUPLICATE_KEY:
-                            void message.error('已存在相同用户名')
+                            void message.error('已存在相同用户名或邮箱')
                             break
                         default:
                             void message.error('更新失败，请稍后重试')
@@ -551,7 +551,7 @@ const User: React.FC = () => {
                             getUser()
                             break
                         case DATABASE_DUPLICATE_KEY:
-                            void message.error('已存在相同用户名')
+                            void message.error('已存在相同用户名或邮箱')
                             break
                         default:
                             void message.error('添加失败，请稍后重试')
@@ -810,7 +810,7 @@ const User: React.FC = () => {
             <AntdForm.Item
                 name={'email'}
                 label={'邮箱'}
-                rules={[{ whitespace: false, type: 'email' }]}
+                rules={[{ required: true, whitespace: false, type: 'email' }]}
             >
                 <AntdInput type={'email'} allowClear />
             </AntdForm.Item>
diff --git a/src/services/auth.tsx b/src/services/auth.tsx
index 16a3f48..1770854 100644
--- a/src/services/auth.tsx
+++ b/src/services/auth.tsx
@@ -1,9 +1,9 @@
 import { URL_LOGIN, URL_LOGOUT } from '@/constants/urls.constants'
 import request from '@/services'
 
-export const r_auth_login = (username: string, password: string) =>
+export const r_auth_login = (account: string, password: string) =>
     request.post<TokenVo>(URL_LOGIN, {
-        username,
+        account,
         password
     })
 
diff --git a/src/util/auth.tsx b/src/util/auth.tsx
index 9b1f958..4768ff4 100644
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -65,8 +65,8 @@ export const getCaptcha = (width: number, high: number, num: number) => {
     }
 }
 
-export const login = async (username: string, password: string) => {
-    return await r_auth_login(username, password)
+export const login = async (account: string, password: string) => {
+    return await r_auth_login(account, password)
 }
 
 export const logout = async () => {

From 8910c3a514eca224362ff51c7ec983ec8601655d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 20 Dec 2023 17:46:37 +0800
Subject: [PATCH 136/307] Rename FitFullScreen to FitFullscreen

---
 .../common/{FitFullScreen.tsx => FitFullscreen.tsx}       | 4 ++--
 src/components/common/FullscreenLoadingMask.tsx           | 6 +++---
 src/components/home/Footer.tsx                            | 6 +++---
 src/pages/SystemFramework.tsx                             | 6 +++---
 src/pages/ToolsFramework.tsx                              | 6 +++---
 src/pages/UserFramework.tsx                               | 6 +++---
 src/pages/home/index.tsx                                  | 4 ++--
 src/pages/system/Group.tsx                                | 6 +++---
 src/pages/system/Log.tsx                                  | 6 +++---
 src/pages/system/Role.tsx                                 | 6 +++---
 src/pages/system/Settings.tsx                             | 6 +++---
 src/pages/system/Statistics.tsx                           | 8 ++++----
 src/pages/system/User.tsx                                 | 6 +++---
 src/pages/system/index.tsx                                | 6 +++---
 14 files changed, 41 insertions(+), 41 deletions(-)
 rename src/components/common/{FitFullScreen.tsx => FitFullscreen.tsx} (87%)

diff --git a/src/components/common/FitFullScreen.tsx b/src/components/common/FitFullscreen.tsx
similarity index 87%
rename from src/components/common/FitFullScreen.tsx
rename to src/components/common/FitFullscreen.tsx
index 2c3a49c..09d3658 100644
--- a/src/components/common/FitFullScreen.tsx
+++ b/src/components/common/FitFullscreen.tsx
@@ -7,7 +7,7 @@ interface FitFullscreenProps
     backgroundColor?: string
 }
 
-const FitFullScreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => {
+const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => {
     const { zIndex, backgroundColor, className, style, ..._props } = props
     return (
         <div
@@ -23,4 +23,4 @@ const FitFullScreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref
     )
 })
 
-export default FitFullScreen
+export default FitFullscreen
diff --git a/src/components/common/FullscreenLoadingMask.tsx b/src/components/common/FullscreenLoadingMask.tsx
index 4bddf5d..749a4ce 100644
--- a/src/components/common/FullscreenLoadingMask.tsx
+++ b/src/components/common/FullscreenLoadingMask.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/fullscreen-loading-mask.scss'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 
 const FullscreenLoadingMask: React.FC = () => {
     const loadingIcon = (
@@ -16,11 +16,11 @@ const FullscreenLoadingMask: React.FC = () => {
     )
     return (
         <>
-            <FitFullScreen>
+            <FitFullscreen>
                 <div className={'fullscreen-loading-mask'}>
                     <AntdSpin indicator={loadingIcon} />
                 </div>
-            </FitFullScreen>
+            </FitFullscreen>
         </>
     )
 }
diff --git a/src/components/home/Footer.tsx b/src/components/home/Footer.tsx
index 3dee754..1b2641b 100644
--- a/src/components/home/Footer.tsx
+++ b/src/components/home/Footer.tsx
@@ -2,12 +2,12 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/home/footer.scss'
 import FitCenter from '@/components/common/FitCenter'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 
 const Footer: React.FC = () => {
     return (
         <>
-            <FitFullScreen backgroundColor={'#333'}>
+            <FitFullscreen backgroundColor={'#333'}>
                 <FitCenter vertical={true} style={{ gap: 20 }}>
                     <div className={'icons'}>
                         <NavLink to={'https://github.com/FatttSnake'}>
@@ -21,7 +21,7 @@ const Footer: React.FC = () => {
                         <NavLink to={'mailto:fatttsnake@fatweb.top'}>Mail</NavLink>
                     </div>
                 </FitCenter>
-            </FitFullScreen>
+            </FitFullscreen>
         </>
     )
 }
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index baad543..85d7c73 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@/assets/css/pages/system-framework.scss'
 import { getSystemRouteJson } from '@/router/system'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
@@ -10,7 +10,7 @@ import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 const SystemFramework: React.FC = () => {
     return (
         <>
-            <FitFullScreen className={'flex-horizontal'}>
+            <FitFullscreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar title={'系统配置'}>
                         <SidebarItemList>
@@ -39,7 +39,7 @@ const SystemFramework: React.FC = () => {
                         <Outlet />
                     </Suspense>
                 </div>
-            </FitFullScreen>
+            </FitFullscreen>
         </>
     )
 }
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index f1a970b..c80d9df 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@/assets/css/pages/tools-framework.scss'
 import { tools } from '@/router/tools'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 import SidebarScroll, { SidebarScrollElement } from '@/components/common/sidebar/SidebarScroll'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
@@ -20,7 +20,7 @@ const ToolsFramework: React.FC = () => {
 
     return (
         <>
-            <FitFullScreen className={'flex-horizontal'}>
+            <FitFullscreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar title={'氮工具'} onSidebarSwitch={handleOnSidebarSwitch}>
                         <SidebarItemList>
@@ -74,7 +74,7 @@ const ToolsFramework: React.FC = () => {
                         <Outlet />
                     </Suspense>
                 </div>
-            </FitFullScreen>
+            </FitFullscreen>
         </>
     )
 }
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index a8b5e4c..12a153f 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import '@/assets/css/pages/tools-framework.scss'
 import user from '@/router/user'
 import { hasPathPermission } from '@/util/auth'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 import Sidebar from '@/components/common/sidebar'
 import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
 import SidebarItem from '@/components/common/sidebar/SidebarItem'
@@ -11,7 +11,7 @@ import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 const ToolsFramework: React.FC = () => {
     return (
         <>
-            <FitFullScreen className={'flex-horizontal'}>
+            <FitFullscreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar
                         title={'个人中心'}
@@ -53,7 +53,7 @@ const ToolsFramework: React.FC = () => {
                         <Outlet />
                     </Suspense>
                 </div>
-            </FitFullScreen>
+            </FitFullscreen>
         </>
     )
 }
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index fda272d..8c82483 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import '@/assets/css/components/home/home.scss'
 import { HomeFrameworkContext } from '@/pages/HomeFramework'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 import Slogan from '@/components/home/Slogan'
 import OxygenToolbox from '@/components/home/OxygenToolbox'
 import Indicator from '@/components/common/Indicator'
@@ -155,7 +155,7 @@ const Home: React.FC = () => {
                 onKeyDown={handleKeyDown}
             >
                 {content.map((element, index) => {
-                    return <FitFullScreen key={index} {...element} />
+                    return <FitFullscreen key={index} {...element} />
                 })}
             </div>
 
diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index 3857267..8a3b5a0 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -23,7 +23,7 @@ import {
     r_sys_role_get_list
 } from '@/services/system'
 import Permission from '@/components/common/Permission'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
@@ -631,7 +631,7 @@ const Group: React.FC = () => {
 
     return (
         <>
-            <FitFullScreen>
+            <FitFullscreen>
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar
@@ -642,7 +642,7 @@ const Group: React.FC = () => {
                         {table}
                     </FlexBox>
                 </HideScrollbar>
-            </FitFullScreen>
+            </FitFullscreen>
             <AntdDrawer
                 title={isDrawerEdit ? '编辑用户组' : '添加用户组'}
                 width={'36vw'}
diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index 3916b24..b342dd7 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -4,7 +4,7 @@ import { COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/commo
 import { useUpdatedEffect } from '@/util/hooks'
 import { dayjsToUtc, utcToLocalTime } from '@/util/datetime'
 import { r_sys_log_get } from '@/services/system'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 import Card from '@/components/common/Card'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
@@ -284,7 +284,7 @@ const Log: React.FC = () => {
 
     return (
         <>
-            <FitFullScreen>
+            <FitFullscreen>
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar
@@ -295,7 +295,7 @@ const Log: React.FC = () => {
                         {table}
                     </FlexBox>
                 </HideScrollbar>
-            </FitFullScreen>
+            </FitFullscreen>
         </>
     )
 }
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index 74c7c0c..bfe58b0 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -23,7 +23,7 @@ import {
     r_sys_role_delete_list
 } from '@/services/system'
 import Permission from '@/components/common/Permission'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
@@ -638,7 +638,7 @@ const Role: React.FC = () => {
 
     return (
         <>
-            <FitFullScreen>
+            <FitFullscreen>
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar
@@ -649,7 +649,7 @@ const Role: React.FC = () => {
                         {table}
                     </FlexBox>
                 </HideScrollbar>
-            </FitFullScreen>
+            </FitFullscreen>
             <AntdDrawer
                 title={isDrawerEdit ? '编辑角色' : '添加角色'}
                 width={'36vw'}
diff --git a/src/pages/system/Settings.tsx b/src/pages/system/Settings.tsx
index 5406c5e..cb77dd8 100644
--- a/src/pages/system/Settings.tsx
+++ b/src/pages/system/Settings.tsx
@@ -8,7 +8,7 @@ import {
     r_sys_settings_mail_send,
     r_sys_settings_mail_update
 } from '@/services/system'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
@@ -195,7 +195,7 @@ const MailSettings: React.FC = () => {
 const Settings: React.FC = () => {
     return (
         <>
-            <FitFullScreen>
+            <FitFullscreen>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox className={'root-content'}>
                         <FlexBox direction={'horizontal'} className={'root-row'}>
@@ -206,7 +206,7 @@ const Settings: React.FC = () => {
                         </FlexBox>
                     </FlexBox>
                 </HideScrollbar>
-            </FitFullScreen>
+            </FitFullscreen>
         </>
     )
 }
diff --git a/src/pages/system/Statistics.tsx b/src/pages/system/Statistics.tsx
index 25ff4e7..4cd2fb0 100644
--- a/src/pages/system/Statistics.tsx
+++ b/src/pages/system/Statistics.tsx
@@ -29,7 +29,7 @@ import {
 } from '@/services/system'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
@@ -276,7 +276,7 @@ const OnlineInfo: React.FC = () => {
                     <FlexBox gap={10} direction={'horizontal'}>
                         <span style={{ whiteSpace: 'nowrap' }}>在线用户</span>
                         <AntdTag>
-                            当前 {currentOnlineCount === -1 ? '获取中...' : currentOnlineCount}
+                            {currentOnlineCount === -1 ? '获取中...' : `当前 ${currentOnlineCount}`}
                         </AntdTag>
                     </FlexBox>
                 </>
@@ -939,7 +939,7 @@ const StorageInfo: React.FC = () => {
 const Statistics: React.FC = () => {
     return (
         <>
-            <FitFullScreen>
+            <FitFullscreen>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Permission operationCode={'system:statistics:query:usage'}>
@@ -956,7 +956,7 @@ const Statistics: React.FC = () => {
                         </Permission>
                     </FlexBox>
                 </HideScrollbar>
-            </FitFullScreen>
+            </FitFullscreen>
         </>
     )
 }
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 10a3dfa..1824abd 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -26,7 +26,7 @@ import {
 } from '@/services/system'
 import Permission from '@/components/common/Permission'
 import { r_api_avatar_random_base64 } from '@/services/api/avatar'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
@@ -998,7 +998,7 @@ const User: React.FC = () => {
 
     return (
         <>
-            <FitFullScreen>
+            <FitFullscreen>
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar
@@ -1009,7 +1009,7 @@ const User: React.FC = () => {
                         {table}
                     </FlexBox>
                 </HideScrollbar>
-            </FitFullScreen>
+            </FitFullscreen>
             <AntdDrawer
                 title={isDrawerEdit ? '编辑用户' : '新增用户'}
                 width={'36vw'}
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index 242131e..bf1f129 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -3,7 +3,7 @@ import Icon from '@ant-design/icons'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import '@/assets/css/pages/system/index.scss'
 import HideScrollbar from '@/components/common/HideScrollbar'
-import FitFullScreen from '@/components/common/FitFullScreen'
+import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 import Permission from '@/components/common/Permission.tsx'
@@ -62,7 +62,7 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
 const System: React.FC = () => {
     return (
         <>
-            <FitFullScreen data-component={'system'}>
+            <FitFullscreen data-component={'system'}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Permission path={'/system/statistics'}>
@@ -97,7 +97,7 @@ const System: React.FC = () => {
                         </Permission>
                     </FlexBox>
                 </HideScrollbar>
-            </FitFullScreen>
+            </FitFullscreen>
         </>
     )
 }

From 1b78cd41634fdce2e0fc1ece903905563ef02e11 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 21 Dec 2023 10:36:01 +0800
Subject: [PATCH 137/307] Isolate component styles

---
 src/assets/css/common.scss                  |   1 +
 src/assets/css/components/home/home.scss    |   2 +-
 src/assets/css/pages/home-framework.scss    | 353 ++++++++++----------
 src/assets/css/pages/system-framework.scss  |  20 +-
 src/assets/css/pages/system/settings.scss   |  52 +--
 src/assets/css/pages/system/statistics.scss | 130 +++----
 src/assets/css/pages/tools-framework.scss   |  20 +-
 src/assets/css/pages/user-framework.scss    |  14 +
 src/pages/HomeFramework.tsx                 |   9 +-
 src/pages/SystemFramework.tsx               |   2 +-
 src/pages/ToolsFramework.tsx                |   2 +-
 src/pages/UserFramework.tsx                 |   4 +-
 src/pages/home/index.tsx                    |   3 +-
 src/pages/system/Group.tsx                  |   2 +-
 src/pages/system/Settings.tsx               |   2 +-
 src/pages/system/Statistics.tsx             |   2 +-
 16 files changed, 319 insertions(+), 299 deletions(-)
 create mode 100644 src/assets/css/pages/user-framework.scss

diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index 682ce00..d6a24a7 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -6,6 +6,7 @@
 }
 
 .body {
+  background-color: constants.$background-color;
   color: constants.$font-main-color;
   user-select: none;
   min-width: 900px;
diff --git a/src/assets/css/components/home/home.scss b/src/assets/css/components/home/home.scss
index f339e4f..5cd495e 100644
--- a/src/assets/css/components/home/home.scss
+++ b/src/assets/css/components/home/home.scss
@@ -1,4 +1,4 @@
-.indicator {
+[data-component=home].indicator {
   position: fixed;
   margin: {
     right: 20px;
diff --git a/src/assets/css/pages/home-framework.scss b/src/assets/css/pages/home-framework.scss
index 34717e0..78aae96 100644
--- a/src/assets/css/pages/home-framework.scss
+++ b/src/assets/css/pages/home-framework.scss
@@ -1,214 +1,217 @@
 @use "@/assets/css/mixins" as mixins;
 @use "@/assets/css/constants" as constants;
 
-.nav {
-  display: flex;
-  position: fixed;
-  align-items: center;
-  z-index: 1;
-  width: 100%;
-  height: 70px;
-  background-color: constants.$origin-color;
-  border: {
-    bottom: {
-      width: 1px;
-      style: solid;
-      color: constants.$border-color;
-    }
-  }
-  animation: .5s ease both;
-
-  @include mixins.unique-keyframes {
-    0% {
-      transform: translateY(-100%);
-    }
-    100% {
-      transform: translateY(0);
-    }
-  }
-
-  .logo {
-    padding: 0 40px;
-
-    .title {
-      font-size: 2.8em;
-      font-family: century gothic, texgyreadventor, stheiti, sans-serif;
-    }
-  }
-
-  nav {
+[data-component=home-framework] {
+  .nav {
     display: flex;
-    justify-content: end;
-    flex: 1;
-    transition: {
-      property: all;
-      duration: .5s;
-    };
-
-    .menu {
-      padding: 0 30px;
-
-      .item {
-        display: inline-block;
-        position: relative;
-        font-size: 1.5em;
-        transition: {
-          property: all;
-          duration: .3s;
-        };
-
-        a {
-          padding: 5px 20px;
-          color: constants.$url-color;
-        }
+    position: fixed;
+    align-items: center;
+    z-index: 1;
+    width: 100%;
+    height: 70px;
+    background-color: constants.$origin-color;
+    border: {
+      bottom: {
+        width: 1px;
+        style: solid;
+        color: constants.$border-color;
       }
+    }
+    animation: .5s ease both;
 
-      .active {
-        border: {
-          bottom: {
-            width: 2px;
-            style: solid;
-            color: constants.$url-active-color;
-          };
-        };
+    @include mixins.unique-keyframes {
+      0% {
+        transform: translateY(-100%);
       }
-
-      .item:hover {
-        transform: translateY(-5px);
+      100% {
+        transform: translateY(0);
       }
+    }
 
-      .item:hover .submenu {
-        display: block;
-        border: {
-          width: 1px;
-          color: constants.$border-color;
-          style: solid;
-        };
-        animation: 0.3s;
+    .logo {
+      padding: 0 40px;
 
-        @include mixins.unique-keyframes {
-          0% {
-            transform: translateY(-10px);
-            opacity: 0;
-          }
-        }
+      .title {
+        font-size: 2.8em;
+        font-family: century gothic, texgyreadventor, stheiti, sans-serif;
       }
+    }
 
-      .submenu {
-        display: none;
-        position: absolute;
-        width: 100%;
-        text-align: center;
-        background-color: constants.$origin-color;
-        overflow: hidden;
+    nav {
+      display: flex;
+      justify-content: end;
+      flex: 1;
+      transition: {
+        property: all;
+        duration: .5s;
+      };
+
+      .menu {
+        padding: 0 30px;
 
         .item {
-          display: block;
-          font-size: 0.8em;
-          transition: all 0s;
+          display: inline-block;
+          position: relative;
+          font-size: 1.5em;
+          transition: {
+            property: all;
+            duration: .3s;
+          };
 
           a {
-            display: block;
-            padding: 8px 0;
-          }
-        }
-
-        .item:hover {
-          transform: none;
-          a {
-            background-color: constants.$focus-color !important;
+            padding: 5px 20px;
+            color: constants.$url-color;
           }
         }
 
         .active {
-          font-weight: bold;
-          border: none;
+          border: {
+            bottom: {
+              width: 2px;
+              style: solid;
+              color: constants.$url-active-color;
+            };
+          };
         }
-      }
-    }
 
-    .dropdown-menu-button {
-      display: none;
-      margin: 0 20px;
-      width: 45px;
-      height: 45px;
-      justify-content: center;
-      align-items: center;
-      border-radius: 6px;
-    }
+        .item:hover {
+          transform: translateY(-5px);
+        }
 
-    .dropdown-menu-button.active {
-      background-color: transparentize(constants.$focus-color, 0.8);
-      border: {
-        width: 1px;
-        color: constants.$focus-color;
-        style: solid;
-      };
-    }
+        .item:hover .submenu {
+          display: block;
+          border: {
+            width: 1px;
+            color: constants.$border-color;
+            style: solid;
+          };
+          animation: 0.3s;
 
-    @media screen and (max-width: 900px) {
-      .menu {
-        display: none;
+          @include mixins.unique-keyframes {
+            0% {
+              transform: translateY(-10px);
+              opacity: 0;
+            }
+          }
+        }
+
+        .submenu {
+          display: none;
+          position: absolute;
+          width: 100%;
+          text-align: center;
+          background-color: constants.$origin-color;
+          overflow: hidden;
+
+          .item {
+            display: block;
+            font-size: 0.8em;
+            transition: all 0s;
+
+            a {
+              display: block;
+              padding: 8px 0;
+            }
+          }
+
+          .item:hover {
+            transform: none;
+
+            a {
+              background-color: constants.$focus-color !important;
+            }
+          }
+
+          .active {
+            font-weight: bold;
+            border: none;
+          }
+        }
       }
 
       .dropdown-menu-button {
-        display: flex;
+        display: none;
+        margin: 0 20px;
+        width: 45px;
+        height: 45px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 6px;
+      }
+
+      .dropdown-menu-button.active {
+        background-color: transparentize(constants.$focus-color, 0.8);
+        border: {
+          width: 1px;
+          color: constants.$focus-color;
+          style: solid;
+        };
+      }
+
+      @media screen and (max-width: 900px) {
+        .menu {
+          display: none;
+        }
+
+        .dropdown-menu-button {
+          display: flex;
+        }
       }
     }
   }
-}
 
-.dropdown-menu-content {
-  display: none;
+  .dropdown-menu-content {
+    display: none;
+
+    @media screen and (max-width: 900px) {
+      display: none;
+      position: fixed;
+      width: 100%;
+      top: 70px;
+      border: {
+        width: 1px;
+        color: constants.$border-color;
+        style: solid;
+      };
+      background-color: constants.$origin-color;
+      z-index: 1;
+
+      ul {
+        li {
+          font-size: 1.2em;
+          text-align: center;
+
+          a {
+            display: block;
+            width: 100%;
+            height: 100%;
+            padding: 10px;
+          }
+
+          :hover {
+            background-color: constants.$focus-color;
+          }
+        }
+      }
+    }
+  }
 
   @media screen and (max-width: 900px) {
-    display: none;
-    position: fixed;
-    width: 100%;
-    top: 70px;
-    border: {
-      width: 1px;
-      color: constants.$border-color;
-      style: solid;
-    };
-    background-color: constants.$origin-color;
-    z-index: 1;
+    .dropdown-menu-content.show {
+      display: block;
+    }
+  }
 
-    ul {
-      li {
-        font-size: 1.2em;
-        text-align: center;
+  .nav.hide {
+    animation: .5s ease both;
 
-        a {
-          display: block;
-          width: 100%;
-          height: 100%;
-          padding: 10px;
-        }
-
-        :hover {
-          background-color: constants.$focus-color;
-        }
+    @include mixins.unique-keyframes {
+      0% {
+        transform: translateY(0);
+      }
+      100% {
+        transform: translateY(-100%);
       }
-    }
-  }
-}
-
-@media screen and (max-width: 900px) {
-  .dropdown-menu-content.show {
-    display: block;
-  }
-}
-
-.nav.hide {
-  animation: .5s ease both;
-
-  @include mixins.unique-keyframes {
-    0% {
-      transform: translateY(0);
-    }
-    100% {
-      transform: translateY(-100%);
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/css/pages/system-framework.scss b/src/assets/css/pages/system-framework.scss
index 937d667..6966464 100644
--- a/src/assets/css/pages/system-framework.scss
+++ b/src/assets/css/pages/system-framework.scss
@@ -1,16 +1,14 @@
 @use "@/assets/css/constants" as constants;
 @use "@/assets/css/mixins" as mixins;
 
-body {
-  background-color: constants.$background-color;
-}
+[data-component=system-framework] {
+  .left-panel {
+    background-color: constants.$origin-color;
+  }
 
-.left-panel {
-  background-color: constants.$origin-color;
-}
-
-.right-panel {
-  flex: 1;
-  width: 0;
-  background-color: constants.$background-color;
+  .right-panel {
+    flex: 1;
+    width: 0;
+    background-color: constants.$background-color;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.scss
index 1b1d649..5af3198 100644
--- a/src/assets/css/pages/system/settings.scss
+++ b/src/assets/css/pages/system/settings.scss
@@ -1,38 +1,40 @@
 @use '@/assets/css/constants' as constants;
 
-.root-content {
-  padding: 30px;
-  gap: 20px;
-
-  .root-row {
+[data-component=system-settings] {
+  .root-content {
+    padding: 30px;
     gap: 20px;
 
-    .settings-card {
-      padding: 20px;
+    .root-row {
       gap: 20px;
-      color: constants.$main-color;
 
-      > .head {
-        align-items: center;
-        gap: 5px;
+      .settings-card {
+        padding: 20px;
+        gap: 20px;
+        color: constants.$main-color;
 
-        .icon {
-          font-size: constants.$SIZE_ICON_MD;
-          flex: 0 0 auto;
-        }
+        > .head {
+          align-items: center;
+          gap: 5px;
 
-        .title {
-          display: flex;
-          font-size: 1.2em;
-        }
+          .icon {
+            font-size: constants.$SIZE_ICON_MD;
+            flex: 0 0 auto;
+          }
 
-        :nth-child(n+3) {
-          flex: 0 0 auto;
-          color: constants.$font-main-color;
-        }
+          .title {
+            display: flex;
+            font-size: 1.2em;
+          }
 
-        .bt-save {
-          color: constants.$main-color;
+          :nth-child(n+3) {
+            flex: 0 0 auto;
+            color: constants.$font-main-color;
+          }
+
+          .bt-save {
+            color: constants.$main-color;
+          }
         }
       }
     }
diff --git a/src/assets/css/pages/system/statistics.scss b/src/assets/css/pages/system/statistics.scss
index a41552d..7d67e24 100644
--- a/src/assets/css/pages/system/statistics.scss
+++ b/src/assets/css/pages/system/statistics.scss
@@ -1,86 +1,88 @@
 @use '@/assets/css/constants' as constants;
 
-.root-content {
-  padding: 30px;
-  gap: 20px;
-  flex-wrap: wrap;
-  justify-content: center;
+[data-component=system-statistics] {
+  .root-content {
+    padding: 30px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
 
-  > .card-box {
-    width: 48%;
-    flex: 0 0 auto;
+    > .card-box {
+      width: 48%;
+      flex: 0 0 auto;
 
-    .common-card {
-      padding: 20px;
-      gap: 20px;
+      .common-card {
+        padding: 20px;
+        gap: 20px;
 
-      > .head {
-        align-items: center;
-        gap: 5px;
-        color: constants.$main-color;
+        > .head {
+          align-items: center;
+          gap: 5px;
+          color: constants.$main-color;
 
-        .icon {
-          font-size: constants.$SIZE_ICON_MD;
-          flex: 0 0 auto;
-        }
+          .icon {
+            font-size: constants.$SIZE_ICON_MD;
+            flex: 0 0 auto;
+          }
 
-        .title {
-          display: flex;
-          font-size: 1.2em;
-        }
+          .title {
+            display: flex;
+            font-size: 1.2em;
+          }
 
-        :nth-child(n+3) {
-          flex: 0 0 auto;
-          color: constants.$font-main-color;
-        }
-      }
-
-      .card-content {
-        font-size: 1.1em;
-        padding: 0 10px;
-        gap: 10px;
-
-        .key, .value-percent {
-          flex: 0 0 auto;
-          color: constants.$font-main-color;
-        }
-
-        .value {
-          color: constants.$font-secondary-color;
-          overflow: hidden;
-
-          > * {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
+          :nth-child(n+3) {
+            flex: 0 0 auto;
+            color: constants.$font-main-color;
           }
         }
 
-        .value-chart {
-          justify-content: space-around;
-          width: 0;
+        .card-content {
+          font-size: 1.1em;
+          padding: 0 10px;
+          gap: 10px;
 
-          > div {
-            max-height: 12px;
-            height: 12px;
+          .key, .value-percent {
+            flex: 0 0 auto;
+            color: constants.$font-main-color;
+          }
+
+          .value {
+            color: constants.$font-secondary-color;
+            overflow: hidden;
 
             > * {
-              transform: translateY(1px);
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
             }
           }
-        }
 
-        .value-percent {
-          text-align: right;
-        }
+          .value-chart {
+            justify-content: space-around;
+            width: 0;
 
-        .big-chart {
-          width: 0;
-          height: 400px;
-        }
+            > div {
+              max-height: 12px;
+              height: 12px;
 
-        > * {
-          gap: 5px;
+              > * {
+                transform: translateY(1px);
+              }
+            }
+          }
+
+          .value-percent {
+            text-align: right;
+          }
+
+          .big-chart {
+            width: 0;
+            height: 400px;
+          }
+
+          > * {
+            gap: 5px;
+          }
         }
       }
     }
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 937d667..5652c7d 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -1,16 +1,14 @@
 @use "@/assets/css/constants" as constants;
 @use "@/assets/css/mixins" as mixins;
 
-body {
-  background-color: constants.$background-color;
-}
+[data-component=tools-framework] {
+  .left-panel {
+    background-color: constants.$origin-color;
+  }
 
-.left-panel {
-  background-color: constants.$origin-color;
-}
-
-.right-panel {
-  flex: 1;
-  width: 0;
-  background-color: constants.$background-color;
+  .right-panel {
+    flex: 1;
+    width: 0;
+    background-color: constants.$background-color;
+  }
 }
\ No newline at end of file
diff --git a/src/assets/css/pages/user-framework.scss b/src/assets/css/pages/user-framework.scss
new file mode 100644
index 0000000..3523793
--- /dev/null
+++ b/src/assets/css/pages/user-framework.scss
@@ -0,0 +1,14 @@
+@use "@/assets/css/constants" as constants;
+@use "@/assets/css/mixins" as mixins;
+
+[data-component=user-framework] {
+  .left-panel {
+    background-color: constants.$origin-color;
+  }
+
+  .right-panel {
+    flex: 1;
+    width: 0;
+    background-color: constants.$background-color;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
index 605a2cd..200632f 100644
--- a/src/pages/HomeFramework.tsx
+++ b/src/pages/HomeFramework.tsx
@@ -78,6 +78,7 @@ const HomeFramework: React.FC = () => {
     return (
         <>
             <HideScrollbar
+                data-component={'home-framework'}
                 ref={hideScrollbarRef}
                 isPreventVerticalScroll={preventScroll}
                 isShowHorizontalScrollbar={true}
@@ -100,8 +101,8 @@ const HomeFramework: React.FC = () => {
                                                         isPending
                                                             ? 'pending'
                                                             : isActive
-                                                            ? 'active'
-                                                            : ''
+                                                              ? 'active'
+                                                              : ''
                                                     }
                                                 >
                                                     {(route.handle as RouteHandle).name}
@@ -126,8 +127,8 @@ const HomeFramework: React.FC = () => {
                                                                             isPending
                                                                                 ? 'pending'
                                                                                 : isActive
-                                                                                ? 'active'
-                                                                                : ''
+                                                                                  ? 'active'
+                                                                                  : ''
                                                                         }
                                                                     >
                                                                         {
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 85d7c73..9ca567c 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -10,7 +10,7 @@ import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 const SystemFramework: React.FC = () => {
     return (
         <>
-            <FitFullscreen className={'flex-horizontal'}>
+            <FitFullscreen data-component={'system-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar title={'系统配置'}>
                         <SidebarItemList>
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index c80d9df..666addf 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -20,7 +20,7 @@ const ToolsFramework: React.FC = () => {
 
     return (
         <>
-            <FitFullscreen className={'flex-horizontal'}>
+            <FitFullscreen data-component={'tools-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar title={'氮工具'} onSidebarSwitch={handleOnSidebarSwitch}>
                         <SidebarItemList>
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 12a153f..6a4e6da 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import '@/assets/css/pages/tools-framework.scss'
+import '@/assets/css/pages/user-framework.scss'
 import user from '@/router/user'
 import { hasPathPermission } from '@/util/auth'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -11,7 +11,7 @@ import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 const ToolsFramework: React.FC = () => {
     return (
         <>
-            <FitFullscreen className={'flex-horizontal'}>
+            <FitFullscreen data-component={'user-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar
                         title={'个人中心'}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 8c82483..5e6a323 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -146,6 +146,7 @@ const Home: React.FC = () => {
     return (
         <>
             <div
+                data-component={'home'}
                 tabIndex={0}
                 onWheel={handleWheel}
                 onTouchStart={handleTouchStart}
@@ -159,7 +160,7 @@ const Home: React.FC = () => {
                 })}
             </div>
 
-            <div hidden={navbarHidden} className={'indicator'}>
+            <div data-component={'home'} hidden={navbarHidden} className={'indicator'}>
                 <Indicator
                     total={content.length}
                     current={currentContent}
diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index 8a3b5a0..d83ed33 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -631,7 +631,7 @@ const Group: React.FC = () => {
 
     return (
         <>
-            <FitFullscreen>
+            <FitFullscreen data-component={'system-group'}>
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar
diff --git a/src/pages/system/Settings.tsx b/src/pages/system/Settings.tsx
index cb77dd8..f612e32 100644
--- a/src/pages/system/Settings.tsx
+++ b/src/pages/system/Settings.tsx
@@ -195,7 +195,7 @@ const MailSettings: React.FC = () => {
 const Settings: React.FC = () => {
     return (
         <>
-            <FitFullscreen>
+            <FitFullscreen data-component={'system-settings'}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox className={'root-content'}>
                         <FlexBox direction={'horizontal'} className={'root-row'}>
diff --git a/src/pages/system/Statistics.tsx b/src/pages/system/Statistics.tsx
index 4cd2fb0..a14d904 100644
--- a/src/pages/system/Statistics.tsx
+++ b/src/pages/system/Statistics.tsx
@@ -939,7 +939,7 @@ const StorageInfo: React.FC = () => {
 const Statistics: React.FC = () => {
     return (
         <>
-            <FitFullscreen>
+            <FitFullscreen data-component={'system-statistics'}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Permission operationCode={'system:statistics:query:usage'}>

From 85aba29ced073a3831f704c7713083732c8d6bc6 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 21 Dec 2023 18:36:31 +0800
Subject: [PATCH 138/307] Recode login page

---
 .../css/pages/{login.scss => login-.scss}     |   0
 src/assets/css/pages/sign.scss                | 161 ++++++++
 src/assets/svg/password.svg                   |   1 +
 src/pages/{Login.tsx => Login-.tsx}           |   2 +-
 src/pages/Sign.tsx                            | 347 ++++++++++++++++++
 src/pages/UserFramework.tsx                   |  13 +-
 src/router/index.tsx                          |  22 +-
 7 files changed, 540 insertions(+), 6 deletions(-)
 rename src/assets/css/pages/{login.scss => login-.scss} (100%)
 create mode 100644 src/assets/css/pages/sign.scss
 create mode 100644 src/assets/svg/password.svg
 rename src/pages/{Login.tsx => Login-.tsx} (99%)
 create mode 100644 src/pages/Sign.tsx

diff --git a/src/assets/css/pages/login.scss b/src/assets/css/pages/login-.scss
similarity index 100%
rename from src/assets/css/pages/login.scss
rename to src/assets/css/pages/login-.scss
diff --git a/src/assets/css/pages/sign.scss b/src/assets/css/pages/sign.scss
new file mode 100644
index 0000000..93ddf2a
--- /dev/null
+++ b/src/assets/css/pages/sign.scss
@@ -0,0 +1,161 @@
+@use "@/assets/css/mixins" as mixins;
+@use "@/assets/css/constants" as constants;
+
+[data-component=sign] {
+  background-color: #D2D0DD;
+  user-select: none;
+
+  a:hover {
+    color: constants.$production-color;
+  }
+
+  .sign-box {
+    position: relative;
+    background-color: constants.$origin-color;
+    width: 900px;
+    height: 600px;
+    overflow: hidden;
+    border-radius: 12px;
+
+    .left, .right {
+      opacity: 1;
+      animation: 1s ease;
+      @include mixins.unique-keyframes {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      > * {
+        width: 100%;
+        height: 100%;
+      }
+
+      &.hidden {
+        opacity: 0;
+        animation: 1s ease;
+        @include mixins.unique-keyframes {
+          0% {
+            opacity: 1;
+          }
+
+          100% {
+            opacity: 0;
+          }
+        }
+      }
+
+      > * {
+        .title {
+          margin-bottom: 20px;
+          transform: translateY(-10px);
+
+          .primary {
+            font-size: 2.4em;
+            font-weight: bolder;
+            color: constants.$production-color;
+          }
+
+          .secondary {
+            font-size: 1.2em;
+          }
+        }
+
+        .form {
+          width: 300px;
+
+          .addition {
+            justify-content: space-between;
+            margin-bottom: 14px;
+
+            > * {
+              flex: 0 0 auto;
+            }
+          }
+
+          .footer {
+            text-align: center;
+
+            a {
+              color: constants.$production-color;
+            }
+          }
+        }
+      }
+
+
+      .sign-up {
+
+      }
+
+      .sign-in {
+
+      }
+    }
+
+    .cover {
+      position: absolute;
+      height: 100%;
+      width: 50%;
+      background-color: #F3F4F8;
+      animation: 0.8s ease;
+      @include mixins.unique-keyframes {
+        0% {
+          left: 50%;
+        }
+
+        100% {
+          left: 0;
+        }
+      }
+
+      .ball-box {
+        position: relative;
+        overflow: hidden;
+
+        background-color: #F1F2F7;
+
+        .ball {
+          position: absolute;
+          width: 128px;
+          height: 128px;
+          background-color: constants.$production-color;
+          border-radius: 50%;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%) translateY(50%);
+        }
+      }
+
+      .mask {
+        transform: rotateZ(180deg);
+        filter: blur(12px);
+
+        .ball {
+          width: 140px;
+          height: 140px;
+        }
+      }
+    }
+
+    &.switch {
+      .cover {
+        left: 50%;
+        animation: 0.8s ease;
+        @include mixins.unique-keyframes {
+          0% {
+            left: 0;
+          }
+
+          100% {
+            left: 50%;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/svg/password.svg b/src/assets/svg/password.svg
new file mode 100644
index 0000000..acdcbb3
--- /dev/null
+++ b/src/assets/svg/password.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M768 426.666667V341.333333A256 256 0 0 0 256 341.333333v85.333334a85.333333 85.333333 0 0 0-85.333333 85.333333v341.333333a85.333333 85.333333 0 0 0 85.333333 85.333334h512a85.333333 85.333333 0 0 0 85.333333-85.333334v-341.333333a85.333333 85.333333 0 0 0-85.333333-85.333333zM341.333333 341.333333a170.666667 170.666667 0 0 1 341.333334 0v85.333334H341.333333z m298.666667 320a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333z m-170.666667 0a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333z m-170.666666 42.666667v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333z" /></svg>
\ No newline at end of file
diff --git a/src/pages/Login.tsx b/src/pages/Login-.tsx
similarity index 99%
rename from src/pages/Login.tsx
rename to src/pages/Login-.tsx
index b64c68a..42e3362 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login-.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import '@/assets/css/pages/login.scss'
+import '@/assets/css/pages/login-.scss'
 import {
     PERMISSION_LOGIN_SUCCESS,
     PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx
new file mode 100644
index 0000000..8622291
--- /dev/null
+++ b/src/pages/Sign.tsx
@@ -0,0 +1,347 @@
+import React, { useState } from 'react'
+import '@/assets/css/pages/sign.scss'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import FitCenter from '@/components/common/FitCenter'
+import FlexBox from '@/components/common/FlexBox'
+import { useNavigate } from 'react-router'
+import Icon from '@ant-design/icons'
+import { getUserInfo, login, setToken } from '@/util/auth.tsx'
+import {
+    PERMISSION_LOGIN_SUCCESS,
+    PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
+    PERMISSION_USER_DISABLE,
+    PERMISSION_USERNAME_NOT_FOUND
+} from '@/constants/common.constants.ts'
+import { AppContext } from '@/App.tsx'
+import { utcToLocalTime } from '@/util/datetime.tsx'
+import { useUpdatedEffect } from '@/util/hooks.tsx'
+
+const SignUp: React.FC = () => {
+    const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
+
+    return (
+        <div className={'sign-up'}>
+            <FitCenter>
+                <FlexBox>
+                    <div>Welcome join us</div>
+                    <AntdButton
+                        onClick={() =>
+                            navigate(
+                                `/login${
+                                    searchParams.toString() ? `?${searchParams.toString()}` : ''
+                                }`
+                            )
+                        }
+                    >
+                        登录
+                    </AntdButton>
+                    <AntdForm>
+                        <AntdForm.Item></AntdForm.Item>
+                    </AntdForm>
+                </FlexBox>
+            </FitCenter>
+        </div>
+    )
+}
+
+const Forget: React.FC = () => {
+    const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
+    const [isLoading, setIsLoading] = useState(false)
+    const [isFinish, setIsFinish] = useState(false)
+
+    const handleOnFinish = () => {
+        setIsFinish(true)
+    }
+
+    const handleOnRetry = () => {
+        setIsFinish(false)
+    }
+
+    return (
+        <div className={'forget'}>
+            <FitCenter>
+                <FlexBox>
+                    <div className={'title'}>
+                        <div className={'primary'}>找回密码</div>
+                        <div className={'secondary'}>Retrieve password</div>
+                    </div>
+                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
+                        {!isFinish ? (
+                            <>
+                                <AntdForm.Item
+                                    name={'account'}
+                                    rules={[{ required: true, message: '请输入邮箱' }]}
+                                >
+                                    <AntdInput
+                                        prefix={<Icon component={IconFatwebEmail} />}
+                                        placeholder={'邮箱'}
+                                        disabled={isLoading}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item>
+                                    <AntdButton
+                                        style={{ width: '100%' }}
+                                        type={'primary'}
+                                        htmlType={'submit'}
+                                        disabled={isLoading}
+                                        loading={isLoading}
+                                    >
+                                        确&ensp;&ensp;&ensp;&ensp;定
+                                    </AntdButton>
+                                </AntdForm.Item>
+                            </>
+                        ) : (
+                            <div style={{ marginBottom: 10 }}>
+                                我们发送了一封包含找回密码链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
+                                <a onClick={handleOnRetry}>重新发送</a>
+                            </div>
+                        )}
+
+                        <div className={'footer'}>
+                            找到了？
+                            <a
+                                onClick={() =>
+                                    navigate(
+                                        `/login${
+                                            searchParams.toString()
+                                                ? `?${searchParams.toString()}`
+                                                : ''
+                                        }`
+                                    )
+                                }
+                            >
+                                登录
+                            </a>
+                        </div>
+                    </AntdForm>
+                </FlexBox>
+            </FitCenter>
+        </div>
+    )
+}
+
+const SignIn: React.FC = () => {
+    const { refreshRouter } = useContext(AppContext)
+    const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
+    const [isSigningIn, setIsSigningIn] = useState(false)
+
+    const handleOnFinish = (loginForm: LoginForm) => {
+        if (isSigningIn) {
+            return
+        }
+        setIsSigningIn(true)
+
+        void login(loginForm.account, loginForm.password)
+            .then((res) => {
+                const response = res.data
+                const { code, data } = response
+                switch (code) {
+                    case PERMISSION_LOGIN_SUCCESS:
+                        setToken(data?.token ?? '')
+                        void message.success('登录成功')
+                        setTimeout(() => {
+                            void getUserInfo().then((user) => {
+                                refreshRouter()
+                                if (searchParams.has('redirect')) {
+                                    navigate(searchParams.get('redirect') ?? '/')
+                                } else {
+                                    navigate('/')
+                                }
+
+                                notification.success({
+                                    message: '欢迎回来',
+                                    description: (
+                                        <>
+                                            <span>
+                                                你好 <strong>{user.userInfo.nickname}</strong>
+                                            </span>
+                                            <br />
+                                            <span>
+                                                最近登录：
+                                                {user.lastLoginTime
+                                                    ? `${utcToLocalTime(user.lastLoginTime)}【${
+                                                          user.lastLoginIp
+                                                      }】`
+                                                    : '无'}
+                                            </span>
+                                        </>
+                                    ),
+                                    placement: 'topRight'
+                                })
+                            })
+                        }, 1500)
+                        break
+                    case PERMISSION_USERNAME_NOT_FOUND:
+                    case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
+                        void message.error(
+                            <>
+                                <strong>账号</strong>或<strong>密码</strong>错误，请重试
+                            </>
+                        )
+                        setIsSigningIn(false)
+                        break
+                    case PERMISSION_USER_DISABLE:
+                        void message.error(
+                            <>
+                                该用户已被<strong>禁用</strong>
+                            </>
+                        )
+                        setIsSigningIn(false)
+                        break
+                    default:
+                        void message.error(
+                            <>
+                                <strong>服务器出错了</strong>
+                            </>
+                        )
+                        setIsSigningIn(false)
+                }
+            })
+            .catch(() => {
+                setIsSigningIn(false)
+            })
+    }
+
+    return (
+        <div className={'sign-in'}>
+            <FitCenter>
+                <FlexBox>
+                    <div className={'title'}>
+                        <div className={'primary'}>欢迎回来</div>
+                        <div className={'secondary'}>Welcome back</div>
+                    </div>
+                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
+                        <AntdForm.Item
+                            name={'account'}
+                            rules={[{ required: true, message: '账号为空' }]}
+                        >
+                            <AntdInput
+                                prefix={<Icon component={IconFatwebUser} />}
+                                placeholder={'邮箱/用户名'}
+                                disabled={isSigningIn}
+                            />
+                        </AntdForm.Item>
+                        <AntdForm.Item
+                            name={'password'}
+                            rules={[{ required: true, message: '密码为空' }]}
+                        >
+                            <AntdInput.Password
+                                prefix={<Icon component={IconFatwebPassword} />}
+                                placeholder={'密码'}
+                                disabled={isSigningIn}
+                            />
+                        </AntdForm.Item>
+                        <FlexBox direction={'horizontal'} className={'addition'}>
+                            <AntdCheckbox disabled={isSigningIn}>记住密码</AntdCheckbox>
+                            <a
+                                onClick={() => {
+                                    navigate(
+                                        `/forget${
+                                            searchParams.toString()
+                                                ? `?${searchParams.toString()}`
+                                                : ''
+                                        }`
+                                    )
+                                }}
+                            >
+                                忘记密码？
+                            </a>
+                        </FlexBox>
+                        <AntdForm.Item>
+                            <AntdButton
+                                style={{ width: '100%' }}
+                                type={'primary'}
+                                htmlType={'submit'}
+                                disabled={isSigningIn}
+                                loading={isSigningIn}
+                            >
+                                登&ensp;&ensp;&ensp;&ensp;录
+                            </AntdButton>
+                        </AntdForm.Item>
+                        <div className={'footer'}>
+                            还没有账户？
+                            <a
+                                onClick={() =>
+                                    navigate(
+                                        `/register${
+                                            searchParams.toString()
+                                                ? `?${searchParams.toString()}`
+                                                : ''
+                                        }`
+                                    )
+                                }
+                            >
+                                注册
+                            </a>
+                        </div>
+                    </AntdForm>
+                </FlexBox>
+            </FitCenter>
+        </div>
+    )
+}
+
+const Sign: React.FC = () => {
+    const lastPage = useRef('none')
+    const currentPage = useRef('none')
+    const match = useMatches().reduce((_, second) => second)
+    const [isSwitch, setIsSwitch] = useState(false)
+
+    const leftPage = ['register', 'forget']
+
+    useUpdatedEffect(() => {
+        lastPage.current = currentPage.current
+        currentPage.current = match.id
+
+        setIsSwitch(leftPage.includes(currentPage.current))
+    }, [match.id])
+
+    const leftComponent = () => {
+        switch (leftPage.includes(currentPage.current) ? currentPage.current : lastPage.current) {
+            case 'forget':
+                return <Forget />
+            default:
+                return <SignUp />
+        }
+    }
+
+    const rightComponent = () => {
+        switch (leftPage.includes(currentPage.current) ? lastPage.current : currentPage.current) {
+            default:
+                return <SignIn />
+        }
+    }
+
+    return (
+        <>
+            <FitFullscreen data-component={'sign'}>
+                <FitCenter>
+                    <FlexBox
+                        direction={'horizontal'}
+                        className={`sign-box${isSwitch ? ' switch' : ''}`}
+                    >
+                        <div className={`left${!isSwitch ? ' hidden' : ''}`}>{leftComponent()}</div>
+                        <div className={`right${isSwitch ? ' hidden' : ''}`}>
+                            {rightComponent()}
+                        </div>
+                        <FlexBox className={'cover'}>
+                            <div className={'ball-box'}>
+                                <div className={'ball'} />
+                            </div>
+                            <div className={'ball-box'}>
+                                <div className={'mask'}>
+                                    <div className={'ball'} />
+                                </div>
+                            </div>
+                        </FlexBox>
+                    </FlexBox>
+                </FitCenter>
+            </FitFullscreen>
+        </>
+    )
+}
+
+export default Sign
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 6a4e6da..5e60a66 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -16,15 +16,20 @@ const ToolsFramework: React.FC = () => {
                     <Sidebar
                         title={'个人中心'}
                         bottomFixed={
-                            hasPathPermission('/system') ? (
-                                <SidebarItemList>
+                            <SidebarItemList>
+                                {hasPathPermission('/system') ? (
                                     <SidebarItem
                                         path={'/system'}
                                         icon={IconFatwebSetting}
                                         text={'系统配置'}
                                     />
-                                </SidebarItemList>
-                            ) : undefined
+                                ) : undefined}
+                                <SidebarItem
+                                    path={'/tools'}
+                                    icon={IconFatwebBack}
+                                    text={'回到氮工具'}
+                                />
+                            </SidebarItemList>
                         }
                     >
                         <SidebarItemList>
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 9e90791..3714009 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -6,17 +6,37 @@ import user from '@/router/user'
 import tools from '@/router/tools'
 import { getAuthRoute, mapJsonToRoute, setTitle } from '@/util/route'
 
+const lazySignPage = React.lazy(() => import('@/pages/Sign'))
+
 const root: RouteJsonObject[] = [
     {
         path: '/',
         absolutePath: '/',
         component: React.lazy(() => import('@/AuthRoute')),
         children: [
+            {
+                path: 'register',
+                absolutePath: '/register',
+                id: 'register',
+                component: lazySignPage
+            },
+            {
+                path: 'confirm',
+                absolutePath: '/confirm',
+                id: 'confirm',
+                component: lazySignPage
+            },
+            {
+                path: 'forget',
+                absolutePath: '/forget',
+                id: 'forget',
+                component: lazySignPage
+            },
             {
                 path: 'login',
                 absolutePath: '/login',
                 id: 'login',
-                component: React.lazy(() => import('@/pages/Login'))
+                component: lazySignPage
             },
             {
                 path: 'loading',

From bbc669ba3e8ce68b6b41a970c9429e66bee42cab Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 22 Dec 2023 17:57:32 +0800
Subject: [PATCH 139/307] Add register to sign page(temp)

---
 src/assets/css/pages/login-.scss              |  65 -----
 src/assets/css/pages/sign.scss                |  21 +-
 .../common/sidebar/SidebarFooter.tsx          |   6 +-
 src/constants/common.constants.ts             |   6 +
 src/constants/urls.constants.ts               |   2 +
 src/global.d.ts                               |  22 +-
 src/pages/Login-.tsx                          | 156 ------------
 src/pages/Sign.tsx                            | 225 +++++++++++++++---
 src/router/index.tsx                          |   6 +-
 src/services/auth.tsx                         |  12 +-
 src/util/auth.tsx                             |  11 -
 11 files changed, 247 insertions(+), 285 deletions(-)
 delete mode 100644 src/assets/css/pages/login-.scss
 delete mode 100644 src/pages/Login-.tsx

diff --git a/src/assets/css/pages/login-.scss b/src/assets/css/pages/login-.scss
deleted file mode 100644
index 988f60f..0000000
--- a/src/assets/css/pages/login-.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@use "@/assets/css/constants" as constants;
-
-.login-background {
-  display: flex;
-  height: 100vh;
-  width: 100vw;
-  justify-content: center;
-  align-items: center;
-  background-color: #B3E5FC;
-}
-
-.login-box {
-  display: flex;
-  width: 800px;
-  height: 450px;
-  background-color: #448AFF;
-}
-
-.login-box-left {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  flex: 2;
-}
-
-.login-box-left-text {
-  font-size: 3rem;
-  color: constants.$origin-color;
-  font-weight: bold;
-
-  > div:last-child {
-    font-size: 1.8rem;
-    font-weight: normal;
-  }
-}
-
-.login-box-right {
-  position: relative;
-  height: 100%;
-  flex: 3;
-  background-color: constants.$origin-color;
-}
-
-.login-from-text {
-  position: absolute;
-  top: 60px;
-  left: 40px;
-  font-weight: bold;
-  font-size: 2rem;
-}
-
-.login-from {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 30px;
-  width: 100%;
-  height: 100%;
-}
-
-.login-from-item {
-  width: 80%;
-}
\ No newline at end of file
diff --git a/src/assets/css/pages/sign.scss b/src/assets/css/pages/sign.scss
index 93ddf2a..73aaa2b 100644
--- a/src/assets/css/pages/sign.scss
+++ b/src/assets/css/pages/sign.scss
@@ -68,6 +68,10 @@
         .form {
           width: 300px;
 
+          button {
+            font-weight: bolder;
+          }
+
           .addition {
             justify-content: space-between;
             margin-bottom: 14px;
@@ -87,13 +91,22 @@
         }
       }
 
-
-      .sign-up {
-
+      .sign-up, .sign-in, .forget {
+        .footer {
+          a {
+            font-weight: bolder;
+          }
+        }
       }
 
-      .sign-in {
+      .sign-up, .forget {
+        .retry {
+          margin-bottom: 16px;
 
+          a {
+            font-weight: bolder;
+          }
+        }
       }
     }
 
diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx
index 98dfab8..77e6aac 100644
--- a/src/components/common/sidebar/SidebarFooter.tsx
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -2,7 +2,8 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import { COLOR_ERROR } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
-import { getLoginStatus, getNickname, logout } from '@/util/auth'
+import { getLoginStatus, getNickname, removeToken } from '@/util/auth'
+import { r_auth_logout } from '@/services/auth'
 
 const SidebarFooter: React.FC = () => {
     const matches = useMatches()
@@ -26,7 +27,8 @@ const SidebarFooter: React.FC = () => {
         }
 
         setExiting(true)
-        void logout().finally(() => {
+        void r_auth_logout().finally(() => {
+            removeToken()
             notification.info({
                 message: '已退出登录',
                 icon: <Icon component={IconFatwebExit} style={{ color: COLOR_ERROR }} />
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 36d67c3..393afdb 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -34,6 +34,9 @@ export const PERMISSION_LOGIN_SUCCESS = 20000
 export const PERMISSION_PASSWORD_CHANGE_SUCCESS = 20001
 export const PERMISSION_LOGOUT_SUCCESS = 20002
 export const PERMISSION_TOKEN_RENEW_SUCCESS = 20003
+export const PERMISSION_REGISTER_SUCCESS = 20004
+export const PERMISSION_RESEND_SUCCESS = 20005
+export const PERMISSION_VERIFY_SUCCESS = 20006
 
 export const PERMISSION_UNAUTHORIZED = 20050
 export const PERMISSION_USERNAME_NOT_FOUND = 20051
@@ -47,6 +50,9 @@ export const PERMISSION_OLD_PASSWORD_NOT_MATCH = 20058
 export const PERMISSION_LOGOUT_FAILED = 20059
 export const PERMISSION_TOKEN_ILLEGAL = 20060
 export const PERMISSION_TOKEN_HAS_EXPIRED = 20061
+export const PERMISSION_NO_VERIFICATION_REQUIRED = 20062
+export const PERMISSION_VERIFY_CODE_ERROR_OR_EXPIRED = 20063
+export const PERMISSION_ACCOUNT_NEED_INIT = 20064
 
 export const DATABASE_SELECT_SUCCESS = 30000
 export const DATABASE_SELECT_FAILED = 30005
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index ba5de7a..4795746 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -1,3 +1,5 @@
+export const URL_REGISTER = '/register'
+export const URL_VERIFY = '/verify'
 export const URL_LOGIN = '/login'
 export const URL_TOKEN = '/token'
 export const URL_LOGOUT = '/logout'
diff --git a/src/global.d.ts b/src/global.d.ts
index e0e4c8c..53d6df0 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -57,6 +57,23 @@ interface TokenVo {
     token: string
 }
 
+interface RegisterParam {
+    username: string
+    email: string
+    password: string
+}
+
+interface VerifyParam {
+    code: string
+    nickname?: string
+    avatar?: string
+}
+
+interface LoginParam {
+    account: string
+    password: string
+}
+
 interface UserWithPowerInfoVo {
     id: string
     username: string
@@ -148,11 +165,6 @@ interface GroupVo {
     updateTime: string
 }
 
-interface LoginForm {
-    account: string
-    password: string
-}
-
 interface PageVo<T> {
     current: number
     pages: number
diff --git a/src/pages/Login-.tsx b/src/pages/Login-.tsx
deleted file mode 100644
index 42e3362..0000000
--- a/src/pages/Login-.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from 'react'
-import '@/assets/css/pages/login-.scss'
-import {
-    PERMISSION_LOGIN_SUCCESS,
-    PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
-    PERMISSION_USER_DISABLE,
-    PERMISSION_USERNAME_NOT_FOUND
-} from '@/constants/common.constants'
-import { utcToLocalTime } from '@/util/datetime'
-import { getUserInfo, login, setToken } from '@/util/auth'
-import { AppContext } from '@/App'
-
-const Login: React.FC = () => {
-    const { refreshRouter } = useContext(AppContext)
-    const [messageApi, contextHolder] = message.useMessage()
-    const navigate = useNavigate()
-    const [searchParams] = useSearchParams()
-    const [isLoggingIn, setIsLoggingIn] = useState(false)
-
-    const onFinish = (values: LoginForm) => {
-        setIsLoggingIn(true)
-        void login(values.account, values.password)
-            .then((value) => {
-                const res = value.data
-                const { code, data } = res
-                switch (code) {
-                    case PERMISSION_LOGIN_SUCCESS:
-                        setToken(data?.token ?? '')
-                        void messageApi.success('登录成功')
-                        setTimeout(() => {
-                            void getUserInfo().then((user) => {
-                                refreshRouter()
-
-                                if (searchParams.has('redirect')) {
-                                    navigate(searchParams.get('redirect') ?? '/')
-                                } else {
-                                    navigate('/')
-                                }
-
-                                notification.success({
-                                    message: '欢迎回来',
-                                    description: (
-                                        <>
-                                            <span>
-                                                你好 <strong>{user.userInfo.nickname}</strong>
-                                            </span>
-                                            <br />
-                                            <span>
-                                                最近登录：
-                                                {user.lastLoginTime
-                                                    ? `${utcToLocalTime(user.lastLoginTime)}【${
-                                                          user.lastLoginIp
-                                                      }】`
-                                                    : '无'}
-                                            </span>
-                                        </>
-                                    ),
-                                    placement: 'topRight'
-                                })
-                            })
-                        }, 1500)
-                        break
-                    case PERMISSION_USERNAME_NOT_FOUND:
-                    case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
-                        void messageApi.error(
-                            <>
-                                <strong>账号</strong>或<strong>密码</strong>错误，请重试
-                            </>
-                        )
-                        setIsLoggingIn(false)
-                        break
-                    case PERMISSION_USER_DISABLE:
-                        void messageApi.error(
-                            <>
-                                该用户已被<strong>禁用</strong>
-                            </>
-                        )
-                        setIsLoggingIn(false)
-                        break
-                    default:
-                        void messageApi.error(
-                            <>
-                                <strong>服务器出错了</strong>
-                            </>
-                        )
-                        setIsLoggingIn(false)
-                }
-            })
-            .catch(() => {
-                setIsLoggingIn(false)
-            })
-    }
-
-    return (
-        <>
-            {contextHolder}
-            <div className={'login-background'}>
-                <div className={'login-box'}>
-                    <div className={'login-box-left'}>
-                        <div className={'login-box-left-text'}>
-                            <div>欢迎回来</div>
-                            <div>Welcome back</div>
-                        </div>
-                    </div>
-                    <div className={'login-box-right'}>
-                        <div className={'login-from-text'}>
-                            <span>登&ensp;录</span>
-                        </div>
-                        <AntdForm
-                            name="login-form"
-                            autoComplete="on"
-                            onFinish={onFinish}
-                            className={'login-from'}
-                        >
-                            <AntdForm.Item
-                                className={'login-from-item'}
-                                name={'account'}
-                                rules={[{ required: true, message: '账号为空' }]}
-                            >
-                                <AntdInput
-                                    prefix={<UserOutlined />}
-                                    placeholder={'邮箱/用户名'}
-                                    disabled={isLoggingIn}
-                                />
-                            </AntdForm.Item>
-                            <AntdForm.Item
-                                className={'login-from-item'}
-                                name={'password'}
-                                rules={[{ required: true, message: '密码为空' }]}
-                            >
-                                <AntdInput.Password
-                                    prefix={<LockOutlined />}
-                                    placeholder={'密码'}
-                                    disabled={isLoggingIn}
-                                />
-                            </AntdForm.Item>
-                            <AntdForm.Item className={'login-from-item'}>
-                                <AntdButton
-                                    style={{ width: '100%' }}
-                                    type={'primary'}
-                                    htmlType={'submit'}
-                                    disabled={isLoggingIn}
-                                    loading={isLoggingIn}
-                                >
-                                    登&ensp;&ensp;&ensp;&ensp;录
-                                </AntdButton>
-                            </AntdForm.Item>
-                        </AntdForm>
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
-
-export default Login
diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx
index 8622291..6ba1a08 100644
--- a/src/pages/Sign.tsx
+++ b/src/pages/Sign.tsx
@@ -1,43 +1,179 @@
 import React, { useState } from 'react'
-import '@/assets/css/pages/sign.scss'
-import FitFullscreen from '@/components/common/FitFullscreen'
-import FitCenter from '@/components/common/FitCenter'
-import FlexBox from '@/components/common/FlexBox'
 import { useNavigate } from 'react-router'
 import Icon from '@ant-design/icons'
-import { getUserInfo, login, setToken } from '@/util/auth.tsx'
+import '@/assets/css/pages/sign.scss'
 import {
+    DATABASE_DUPLICATE_KEY,
     PERMISSION_LOGIN_SUCCESS,
     PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
+    PERMISSION_REGISTER_SUCCESS,
     PERMISSION_USER_DISABLE,
     PERMISSION_USERNAME_NOT_FOUND
 } from '@/constants/common.constants.ts'
-import { AppContext } from '@/App.tsx'
-import { utcToLocalTime } from '@/util/datetime.tsx'
-import { useUpdatedEffect } from '@/util/hooks.tsx'
+import { getLoginStatus, getUserInfo, setToken } from '@/util/auth'
+import { AppContext } from '@/App'
+import { utcToLocalTime } from '@/util/datetime'
+import { useUpdatedEffect } from '@/util/hooks'
+import { r_auth_login, r_auth_register } from '@/services/auth'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import FitCenter from '@/components/common/FitCenter'
+import FlexBox from '@/components/common/FlexBox'
 
 const SignUp: React.FC = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
+    const [isSigningUp, setIsSigningUp] = useState(false)
+    const [isFinish, setIsFinish] = useState(false)
+
+    const handleOnFinish = (registerParam: RegisterParam) => {
+        if (isSigningUp) {
+            return
+        }
+        setIsSigningUp(true)
+        void r_auth_register({
+            username: registerParam.username,
+            email: registerParam.email,
+            password: registerParam.password
+        })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case PERMISSION_REGISTER_SUCCESS:
+                        void message.success('恭喜，您快要完成注册了')
+                        setIsFinish(true)
+                        break
+                    case DATABASE_DUPLICATE_KEY:
+                        void message.error('用户名或邮箱已被注册，请重试')
+                        setIsSigningUp(false)
+                        break
+                    default:
+                        void message.error('服务器出错了，请稍后重试')
+                        setIsSigningUp(false)
+                }
+            })
+            .catch(() => {
+                setIsSigningUp(false)
+            })
+    }
+
+    const handleOnRetry = () => {}
 
     return (
         <div className={'sign-up'}>
             <FitCenter>
                 <FlexBox>
-                    <div>Welcome join us</div>
-                    <AntdButton
-                        onClick={() =>
-                            navigate(
-                                `/login${
-                                    searchParams.toString() ? `?${searchParams.toString()}` : ''
-                                }`
-                            )
-                        }
-                    >
-                        登录
-                    </AntdButton>
-                    <AntdForm>
-                        <AntdForm.Item></AntdForm.Item>
+                    <div className={'title'}>
+                        <div className={'primary'}>创建账号</div>
+                        <div className={'secondary'}>Create account</div>
+                    </div>
+                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
+                        {!isFinish ? (
+                            <>
+                                <AntdForm.Item
+                                    name={'username'}
+                                    rules={[
+                                        { required: true, message: '请输入用户名' },
+                                        {
+                                            pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,38}$/,
+                                            message:
+                                                '只能包含字母、数字、连字符和下划线，不能以数字开头'
+                                        }
+                                    ]}
+                                >
+                                    <AntdInput
+                                        prefix={<Icon component={IconFatwebUser} />}
+                                        placeholder={'用户名'}
+                                        maxLength={39}
+                                        showCount={true}
+                                        disabled={isSigningUp}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item
+                                    name={'email'}
+                                    rules={[
+                                        { required: true, message: '请输入邮箱' },
+                                        { type: 'email', message: '不是有效的邮箱地址' }
+                                    ]}
+                                >
+                                    <AntdInput
+                                        type={'email'}
+                                        prefix={<Icon component={IconFatwebEmail} />}
+                                        placeholder={'邮箱'}
+                                        disabled={isSigningUp}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item
+                                    name={'password'}
+                                    rules={[
+                                        { required: true, message: '请输入密码' },
+                                        { min: 10, message: '密码至少为10位' },
+                                        { max: 30, message: '密码最多为30位' }
+                                    ]}
+                                >
+                                    <AntdInput.Password
+                                        prefix={<Icon component={IconFatwebPassword} />}
+                                        placeholder={'密码'}
+                                        disabled={isSigningUp}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item
+                                    name={'passwordConfirm'}
+                                    rules={[
+                                        { required: true, message: '请确认密码' },
+                                        ({ getFieldValue }) => ({
+                                            validator(_, value) {
+                                                if (!value || getFieldValue('password') === value) {
+                                                    return Promise.resolve()
+                                                }
+                                                return Promise.reject(
+                                                    new Error('两次密码输入必须一致')
+                                                )
+                                            }
+                                        })
+                                    ]}
+                                >
+                                    <AntdInput.Password
+                                        prefix={<Icon component={IconFatwebPassword} />}
+                                        placeholder={'确认密码'}
+                                        disabled={isSigningUp}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item>
+                                    <AntdButton
+                                        style={{ width: '100%' }}
+                                        type={'primary'}
+                                        htmlType={'submit'}
+                                        disabled={isSigningUp}
+                                        loading={isSigningUp}
+                                    >
+                                        注&ensp;&ensp;&ensp;&ensp;册
+                                    </AntdButton>
+                                </AntdForm.Item>
+                            </>
+                        ) : (
+                            <div className={'retry'}>
+                                我们发送了一封包含激活账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
+                                <a onClick={handleOnRetry}>重新发送</a>
+                            </div>
+                        )}
+
+                        <div className={'footer'}>
+                            已有账号？
+                            <a
+                                onClick={() =>
+                                    navigate(
+                                        `/login${
+                                            searchParams.toString()
+                                                ? `?${searchParams.toString()}`
+                                                : ''
+                                        }`,
+                                        { replace: true }
+                                    )
+                                }
+                            >
+                                登录
+                            </a>
+                        </div>
                     </AntdForm>
                 </FlexBox>
             </FitCenter>
@@ -45,6 +181,21 @@ const SignUp: React.FC = () => {
     )
 }
 
+const Verify: React.FC = () => {
+    const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
+
+    useUpdatedEffect(() => {
+        if (!getLoginStatus()) {
+            navigate(`/login${searchParams.toString() ? `?${searchParams.toString()}` : ''}`, {
+                replace: true
+            })
+        }
+    }, [])
+
+    return <></>
+}
+
 const Forget: React.FC = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
@@ -72,7 +223,10 @@ const Forget: React.FC = () => {
                             <>
                                 <AntdForm.Item
                                     name={'account'}
-                                    rules={[{ required: true, message: '请输入邮箱' }]}
+                                    rules={[
+                                        { required: true, message: '请输入邮箱' },
+                                        { type: 'email', message: '不是有效的邮箱地址' }
+                                    ]}
                                 >
                                     <AntdInput
                                         prefix={<Icon component={IconFatwebEmail} />}
@@ -93,7 +247,7 @@ const Forget: React.FC = () => {
                                 </AntdForm.Item>
                             </>
                         ) : (
-                            <div style={{ marginBottom: 10 }}>
+                            <div className={'retry'}>
                                 我们发送了一封包含找回密码链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
                                 <a onClick={handleOnRetry}>重新发送</a>
                             </div>
@@ -108,7 +262,8 @@ const Forget: React.FC = () => {
                                             searchParams.toString()
                                                 ? `?${searchParams.toString()}`
                                                 : ''
-                                        }`
+                                        }`,
+                                        { replace: true }
                                     )
                                 }
                             >
@@ -128,13 +283,13 @@ const SignIn: React.FC = () => {
     const [searchParams] = useSearchParams()
     const [isSigningIn, setIsSigningIn] = useState(false)
 
-    const handleOnFinish = (loginForm: LoginForm) => {
+    const handleOnFinish = (loginParam: LoginParam) => {
         if (isSigningIn) {
             return
         }
         setIsSigningIn(true)
 
-        void login(loginForm.account, loginForm.password)
+        void r_auth_login({ account: loginParam.account, password: loginParam.password })
             .then((res) => {
                 const response = res.data
                 const { code, data } = response
@@ -216,7 +371,7 @@ const SignIn: React.FC = () => {
                     <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
                         <AntdForm.Item
                             name={'account'}
-                            rules={[{ required: true, message: '账号为空' }]}
+                            rules={[{ required: true, message: '请输入账号' }]}
                         >
                             <AntdInput
                                 prefix={<Icon component={IconFatwebUser} />}
@@ -226,7 +381,7 @@ const SignIn: React.FC = () => {
                         </AntdForm.Item>
                         <AntdForm.Item
                             name={'password'}
-                            rules={[{ required: true, message: '密码为空' }]}
+                            rules={[{ required: true, message: '请输入密码' }]}
                         >
                             <AntdInput.Password
                                 prefix={<Icon component={IconFatwebPassword} />}
@@ -243,7 +398,8 @@ const SignIn: React.FC = () => {
                                             searchParams.toString()
                                                 ? `?${searchParams.toString()}`
                                                 : ''
-                                        }`
+                                        }`,
+                                        { replace: true }
                                     )
                                 }}
                             >
@@ -262,7 +418,7 @@ const SignIn: React.FC = () => {
                             </AntdButton>
                         </AntdForm.Item>
                         <div className={'footer'}>
-                            还没有账户？
+                            还没有账号？
                             <a
                                 onClick={() =>
                                     navigate(
@@ -270,7 +426,8 @@ const SignIn: React.FC = () => {
                                             searchParams.toString()
                                                 ? `?${searchParams.toString()}`
                                                 : ''
-                                        }`
+                                        }`,
+                                        { replace: true }
                                     )
                                 }
                             >
@@ -290,7 +447,7 @@ const Sign: React.FC = () => {
     const match = useMatches().reduce((_, second) => second)
     const [isSwitch, setIsSwitch] = useState(false)
 
-    const leftPage = ['register', 'forget']
+    const leftPage = ['register', 'verify', 'forget']
 
     useUpdatedEffect(() => {
         lastPage.current = currentPage.current
@@ -303,6 +460,8 @@ const Sign: React.FC = () => {
         switch (leftPage.includes(currentPage.current) ? currentPage.current : lastPage.current) {
             case 'forget':
                 return <Forget />
+            case 'verify':
+                return <Verify />
             default:
                 return <SignUp />
         }
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 3714009..4135a7f 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -21,9 +21,9 @@ const root: RouteJsonObject[] = [
                 component: lazySignPage
             },
             {
-                path: 'confirm',
-                absolutePath: '/confirm',
-                id: 'confirm',
+                path: 'verify',
+                absolutePath: '/verify',
+                id: 'verify',
                 component: lazySignPage
             },
             {
diff --git a/src/services/auth.tsx b/src/services/auth.tsx
index 1770854..8cf2075 100644
--- a/src/services/auth.tsx
+++ b/src/services/auth.tsx
@@ -1,10 +1,10 @@
-import { URL_LOGIN, URL_LOGOUT } from '@/constants/urls.constants'
+import { URL_LOGIN, URL_LOGOUT, URL_REGISTER, URL_VERIFY } from '@/constants/urls.constants'
 import request from '@/services'
 
-export const r_auth_login = (account: string, password: string) =>
-    request.post<TokenVo>(URL_LOGIN, {
-        account,
-        password
-    })
+export const r_auth_register = (param: RegisterParam) => request.post(URL_REGISTER, param)
+
+export const r_auth_verify = (param: VerifyParam) => request.post(URL_VERIFY, param)
+
+export const r_auth_login = (param: LoginParam) => request.post<TokenVo>(URL_LOGIN, param)
 
 export const r_auth_logout = () => request.post(URL_LOGOUT)
diff --git a/src/util/auth.tsx b/src/util/auth.tsx
index 4768ff4..ea138c3 100644
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -8,7 +8,6 @@ import { floorNumber, randomColor, randomFloat, randomInt } from '@/util/common'
 import { getLocalStorage, removeLocalStorage, setLocalStorage } from '@/util/browser'
 import { getFullTitle } from '@/util/route'
 import { r_sys_user_info } from '@/services/system'
-import { r_auth_login, r_auth_logout } from '@/services/auth'
 
 let captcha: Captcha
 
@@ -65,16 +64,6 @@ export const getCaptcha = (width: number, high: number, num: number) => {
     }
 }
 
-export const login = async (account: string, password: string) => {
-    return await r_auth_login(account, password)
-}
-
-export const logout = async () => {
-    return r_auth_logout().finally(() => {
-        removeToken()
-    })
-}
-
 export const getLoginStatus = () => {
     return getLocalStorage(STORAGE_TOKEN_KEY) !== null
 }

From 27a41944c6bc3b7937be6275c533e27694053b62 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 24 Dec 2023 23:44:51 +0800
Subject: [PATCH 140/307] Finish register in Sign

---
 src/AuthRoute.tsx               |  22 ++-
 src/constants/urls.constants.ts |   1 +
 src/global.d.ts                 |   2 +
 src/pages/Sign.tsx              | 287 +++++++++++++++++++++++++++-----
 src/services/auth.tsx           |  10 +-
 src/util/auth.tsx               |   8 +
 6 files changed, 278 insertions(+), 52 deletions(-)

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index 4fe0f43..2019960 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -1,6 +1,7 @@
 import { PRODUCTION_NAME } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
-import { getLoginStatus } from '@/util/auth'
+import { getLoginStatus, getVerifyStatus_async } from '@/util/auth'
+import { Navigate } from 'react-router'
 
 const AuthRoute = () => {
     const matches = useMatches()
@@ -9,17 +10,24 @@ const AuthRoute = () => {
     const location = useLocation()
     const outlet = useOutlet()
     const isLogin = getLoginStatus()
+    const isVerify = getVerifyStatus_async()
 
     return useMemo(() => {
         document.title = `${handle?.titlePrefix ?? ''}${
             handle?.title ? handle?.title : PRODUCTION_NAME
         }${handle?.titlePostfix ?? ''}`
-        if (matches.some(({ handle }) => (handle as RouteHandle)?.auth) && !isLogin) {
-            return (
-                <Navigate
-                    to={getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)}
-                />
-            )
+
+        if (matches.some(({ handle }) => (handle as RouteHandle)?.auth)) {
+            if (!isLogin) {
+                return (
+                    <Navigate
+                        to={getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)}
+                    />
+                )
+            }
+            if (isVerify === false && lastMatch.pathname !== '/verify') {
+                return <Navigate to={'/verify'} />
+            }
         }
         if (isLogin && lastMatch.pathname === '/login') {
             return <Navigate to={'/'} />
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 4795746..00c4129 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -1,4 +1,5 @@
 export const URL_REGISTER = '/register'
+export const URL_RESEND = '/resend'
 export const URL_VERIFY = '/verify'
 export const URL_LOGIN = '/login'
 export const URL_TOKEN = '/token'
diff --git a/src/global.d.ts b/src/global.d.ts
index 53d6df0..f3b852c 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -77,6 +77,7 @@ interface LoginParam {
 interface UserWithPowerInfoVo {
     id: string
     username: string
+    verified: boolean
     locking: boolean
     expiration: string
     credentialsExpiration: string
@@ -97,6 +98,7 @@ interface UserWithPowerInfoVo {
 interface UserWithRoleInfoVo {
     id: string
     username: string
+    verify: string
     locking: boolean
     expiration: string
     credentialsExpiration: string
diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx
index 6ba1a08..b72a083 100644
--- a/src/pages/Sign.tsx
+++ b/src/pages/Sign.tsx
@@ -3,27 +3,43 @@ import { useNavigate } from 'react-router'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/sign.scss'
 import {
+    COLOR_BACKGROUND,
     DATABASE_DUPLICATE_KEY,
+    PERMISSION_ACCOUNT_NEED_INIT,
     PERMISSION_LOGIN_SUCCESS,
     PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
     PERMISSION_REGISTER_SUCCESS,
     PERMISSION_USER_DISABLE,
     PERMISSION_USERNAME_NOT_FOUND
 } from '@/constants/common.constants.ts'
-import { getLoginStatus, getUserInfo, setToken } from '@/util/auth'
+import { getLoginStatus, getUserInfo, requestUserInfo, setToken } from '@/util/auth'
 import { AppContext } from '@/App'
 import { utcToLocalTime } from '@/util/datetime'
 import { useUpdatedEffect } from '@/util/hooks'
-import { r_auth_login, r_auth_register } from '@/services/auth'
+import { r_auth_login, r_auth_register, r_auth_resend, r_auth_verify } from '@/services/auth'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
+import { getRedirectUrl } from '@/util/route.tsx'
+import { r_api_avatar_random_base64 } from '@/services/api/avatar.tsx'
 
 const SignUp: React.FC = () => {
+    const location = useLocation()
     const navigate = useNavigate()
-    const [searchParams] = useSearchParams()
     const [isSigningUp, setIsSigningUp] = useState(false)
     const [isFinish, setIsFinish] = useState(false)
+    const [isSending, setIsSending] = useState(false)
+
+    useUpdatedEffect(() => {
+        if (location.pathname !== '/register') {
+            return
+        }
+        if (getLoginStatus()) {
+            navigate(`/login${location.search}`, {
+                replace: true
+            })
+        }
+    }, [location.pathname])
 
     const handleOnFinish = (registerParam: RegisterParam) => {
         if (isSigningUp) {
@@ -39,8 +55,22 @@ const SignUp: React.FC = () => {
                 const response = res.data
                 switch (response.code) {
                     case PERMISSION_REGISTER_SUCCESS:
-                        void message.success('恭喜，您快要完成注册了')
-                        setIsFinish(true)
+                        void r_auth_login({
+                            account: registerParam.email,
+                            password: registerParam.password
+                        }).then((res_) => {
+                            const response_ = res_.data
+                            switch (response_.code) {
+                                case PERMISSION_LOGIN_SUCCESS:
+                                    setToken(response_.data?.token ?? '')
+                                    void message.success('恭喜，您快要完成注册了')
+                                    setIsFinish(true)
+                                    break
+                                default:
+                                    void message.success('出错了，请稍后重试')
+                                    setIsSigningUp(false)
+                            }
+                        })
                         break
                     case DATABASE_DUPLICATE_KEY:
                         void message.error('用户名或邮箱已被注册，请重试')
@@ -56,7 +86,26 @@ const SignUp: React.FC = () => {
             })
     }
 
-    const handleOnRetry = () => {}
+    const handleOnResend = () => {
+        if (isSending) {
+            return
+        }
+        setIsSending(true)
+        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
+        void r_auth_resend()
+            .then((res) => {
+                const response = res.data
+                message.destroy('sending')
+                if (response.success) {
+                    void message.success('已发送验证邮件，请查收')
+                } else {
+                    void message.error('出错了，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsSending(false)
+            })
+    }
 
     return (
         <div className={'sign-up'}>
@@ -153,22 +202,15 @@ const SignUp: React.FC = () => {
                         ) : (
                             <div className={'retry'}>
                                 我们发送了一封包含激活账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
-                                <a onClick={handleOnRetry}>重新发送</a>
+                                <a onClick={handleOnResend}>重新发送</a>
                             </div>
                         )}
 
-                        <div className={'footer'}>
+                        <div className={'footer'} hidden={isFinish}>
                             已有账号？
                             <a
                                 onClick={() =>
-                                    navigate(
-                                        `/login${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { replace: true }
-                                    )
+                                    navigate(`/login${location.search}`, { replace: true })
                                 }
                             >
                                 登录
@@ -182,23 +224,201 @@ const SignUp: React.FC = () => {
 }
 
 const Verify: React.FC = () => {
+    const { refreshRouter } = useContext(AppContext)
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
+    const [hasCode, setHasCode] = useState(true)
+    const [isValid, setIsValid] = useState(true)
+    const [isSending, setIsSending] = useState(false)
+    const [isGettingAvatar, setIsGettingAvatar] = useState(false)
+    const [avatar, setAvatar] = useState('')
+    const [isVerifying, setIsVerifying] = useState(false)
 
     useUpdatedEffect(() => {
+        if (location.pathname !== '/verify') {
+            return
+        }
+
         if (!getLoginStatus()) {
-            navigate(`/login${searchParams.toString() ? `?${searchParams.toString()}` : ''}`, {
+            navigate(getRedirectUrl('/login', `${location.pathname}${location.search}`), {
                 replace: true
             })
+            return
         }
-    }, [])
 
-    return <></>
+        const code = searchParams.get('code')
+
+        if (!code) {
+            setHasCode(false)
+            return
+        }
+        void r_auth_verify({ code })
+            .then((res) => {
+                const response = res.data
+                if (response.code === PERMISSION_ACCOUNT_NEED_INIT) {
+                    void getUserInfo().then((user) => {
+                        setAvatar(user.userInfo.avatar)
+                    })
+                } else {
+                    setIsValid(false)
+                }
+            })
+            .catch(() => {
+                setIsValid(false)
+            })
+    }, [location.pathname])
+
+    const handleOnResend = () => {
+        if (isSending) {
+            return
+        }
+        setIsSending(true)
+        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
+        void r_auth_resend()
+            .then((res) => {
+                const response = res.data
+                message.destroy('sending')
+                if (response.success) {
+                    void message.success('已发送验证邮件，请查收')
+                } else {
+                    void message.error('出错了，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsSending(false)
+            })
+    }
+
+    const handleOnChangeAvatar = () => {
+        if (isGettingAvatar) {
+            return
+        }
+        setIsGettingAvatar(true)
+        void r_api_avatar_random_base64()
+            .then((res) => {
+                const response = res.data
+                if (response.success) {
+                    response.data?.base64 && setAvatar(response.data.base64)
+                }
+            })
+            .finally(() => {
+                setIsGettingAvatar(false)
+            })
+    }
+
+    const handleOnFinish = (verifyParam: VerifyParam) => {
+        if (isVerifying) {
+            return
+        }
+        setIsVerifying(true)
+
+        void r_auth_verify({
+            code: searchParams.get('code') ?? '',
+            avatar,
+            nickname: verifyParam.nickname
+        }).then((res) => {
+            const response = res.data
+            if (response.success) {
+                void message.success('恭喜你，完成了')
+                setTimeout(() => {
+                    void requestUserInfo().then(() => {
+                        refreshRouter()
+                        if (searchParams.has('redirect')) {
+                            navigate(searchParams.get('redirect') ?? '/')
+                        } else {
+                            navigate('/')
+                        }
+                    })
+                }, 1500)
+            } else {
+                void message.error('出错了，请稍后重试')
+                setIsVerifying(false)
+            }
+        })
+    }
+
+    return (
+        <>
+            <div className={'verify'}>
+                <FitCenter>
+                    <FlexBox>
+                        <div className={'title'}>
+                            <div className={'primary'}>验证账号</div>
+                            <div className={'secondary'}>Verify account</div>
+                        </div>
+                        <AntdForm className={'form'} onFinish={handleOnFinish}>
+                            <div className={'verify-process'} hidden={!hasCode || !isValid}>
+                                <div
+                                    style={{
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        marginBottom: 20
+                                    }}
+                                >
+                                    <AntdTooltip title={'点击获取新头像'}>
+                                        <AntdAvatar
+                                            src={
+                                                <img
+                                                    src={`data:image/png;base64,${avatar}`}
+                                                    alt={'avatar'}
+                                                />
+                                            }
+                                            size={100}
+                                            style={{
+                                                background: COLOR_BACKGROUND,
+                                                cursor: 'pointer'
+                                            }}
+                                            onClick={handleOnChangeAvatar}
+                                        />
+                                    </AntdTooltip>
+                                </div>
+                                <AntdForm.Item hidden name={'avatar'}>
+                                    <AntdInput value={avatar} />
+                                </AntdForm.Item>
+                                <AntdForm.Item
+                                    name={'nickname'}
+                                    rules={[
+                                        { required: true, message: '请输入昵称' },
+                                        { min: 3, message: '昵称至少为3个字符' }
+                                    ]}
+                                >
+                                    <AntdInput
+                                        disabled={isVerifying}
+                                        maxLength={20}
+                                        showCount
+                                        addonBefore={'昵称'}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item>
+                                    <AntdButton
+                                        style={{ width: '100%' }}
+                                        type={'primary'}
+                                        htmlType={'submit'}
+                                        disabled={isVerifying}
+                                        loading={isVerifying}
+                                    >
+                                        确&ensp;&ensp;&ensp;&ensp;定
+                                    </AntdButton>
+                                </AntdForm.Item>
+                            </div>
+                            <div className={'no-code'} hidden={hasCode}>
+                                在继续使用之前，我们需要确定您的电子邮箱地址的有效性，请点击&nbsp;
+                                <a onClick={handleOnResend}>发送验证邮件</a>
+                            </div>
+                            <div className={'not-valid'} hidden={!hasCode || isValid}>
+                                此链接有误或已失效，请点击&nbsp;
+                                <a onClick={handleOnResend}>重新发送验证邮件</a>
+                            </div>
+                        </AntdForm>
+                    </FlexBox>
+                </FitCenter>
+            </div>
+        </>
+    )
 }
 
 const Forget: React.FC = () => {
     const navigate = useNavigate()
-    const [searchParams] = useSearchParams()
     const [isLoading, setIsLoading] = useState(false)
     const [isFinish, setIsFinish] = useState(false)
 
@@ -257,14 +477,7 @@ const Forget: React.FC = () => {
                             找到了？
                             <a
                                 onClick={() =>
-                                    navigate(
-                                        `/login${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { replace: true }
-                                    )
+                                    navigate(`/login${location.search}`, { replace: true })
                                 }
                             >
                                 登录
@@ -393,14 +606,7 @@ const SignIn: React.FC = () => {
                             <AntdCheckbox disabled={isSigningIn}>记住密码</AntdCheckbox>
                             <a
                                 onClick={() => {
-                                    navigate(
-                                        `/forget${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { replace: true }
-                                    )
+                                    navigate(`/forget${location.search}`, { replace: true })
                                 }}
                             >
                                 忘记密码？
@@ -421,14 +627,7 @@ const SignIn: React.FC = () => {
                             还没有账号？
                             <a
                                 onClick={() =>
-                                    navigate(
-                                        `/register${
-                                            searchParams.toString()
-                                                ? `?${searchParams.toString()}`
-                                                : ''
-                                        }`,
-                                        { replace: true }
-                                    )
+                                    navigate(`/register${location.search}`, { replace: true })
                                 }
                             >
                                 注册
diff --git a/src/services/auth.tsx b/src/services/auth.tsx
index 8cf2075..6348b95 100644
--- a/src/services/auth.tsx
+++ b/src/services/auth.tsx
@@ -1,8 +1,16 @@
-import { URL_LOGIN, URL_LOGOUT, URL_REGISTER, URL_VERIFY } from '@/constants/urls.constants'
+import {
+    URL_LOGIN,
+    URL_LOGOUT,
+    URL_REGISTER,
+    URL_RESEND,
+    URL_VERIFY
+} from '@/constants/urls.constants'
 import request from '@/services'
 
 export const r_auth_register = (param: RegisterParam) => request.post(URL_REGISTER, param)
 
+export const r_auth_resend = () => request.post(URL_RESEND)
+
 export const r_auth_verify = (param: VerifyParam) => request.post(URL_VERIFY, param)
 
 export const r_auth_login = (param: LoginParam) => request.post<TokenVo>(URL_LOGIN, param)
diff --git a/src/util/auth.tsx b/src/util/auth.tsx
index ea138c3..75d0a9e 100644
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -68,6 +68,14 @@ export const getLoginStatus = () => {
     return getLocalStorage(STORAGE_TOKEN_KEY) !== null
 }
 
+export const getVerifyStatus_async = () => {
+    if (getLocalStorage(STORAGE_USER_INFO_KEY) === null) {
+        return undefined
+    }
+    return (JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as UserWithPowerInfoVo)
+        .verified
+}
+
 export const getUserInfo = async (): Promise<UserWithPowerInfoVo> => {
     if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) {
         return new Promise((resolve) => {

From 6510567fdf388ea5c9d4b402ccc44e351c7b8b58 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 25 Dec 2023 17:54:31 +0800
Subject: [PATCH 141/307] Optimize code

---
 src/assets/css/components/common/sidebar.scss |  7 ++-
 src/assets/css/pages/sign.scss                |  7 +++
 src/components/common/HideScrollbar.tsx       |  3 +
 .../common/sidebar/SidebarFooter.tsx          | 17 +++--
 src/global.d.ts                               |  5 ++
 src/pages/Sign.tsx                            | 32 +++++++---
 src/pages/system/Statistics.tsx               | 62 ++++++++++++-------
 src/pages/system/User.tsx                     | 19 +++++-
 src/util/auth.tsx                             |  6 ++
 9 files changed, 119 insertions(+), 39 deletions(-)

diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss
index 8f5117a..702af2a 100644
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -186,14 +186,19 @@
       justify-content: center;
       align-items: center;
       margin-left: 4px;
-      padding: 10px;
       width: 36px;
       height: 36px;
       font-size: constants.$SIZE_ICON_XS;
       border: 2px constants.$font-secondary-color solid;
       color: constants.$font-secondary-color;
       border-radius: 50%;
+      overflow: hidden;
       cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
     }
 
     .text {
diff --git a/src/assets/css/pages/sign.scss b/src/assets/css/pages/sign.scss
index 73aaa2b..73f0d1f 100644
--- a/src/assets/css/pages/sign.scss
+++ b/src/assets/css/pages/sign.scss
@@ -91,6 +91,13 @@
         }
       }
 
+      .verify {
+        a {
+          color: constants.$production-color;
+          font-weight: bolder;
+        }
+      }
+
       .sign-up, .sign-in, .forget {
         .footer {
           a {
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index d0ffcf9..6200598 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -433,6 +433,9 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
     }
 
     useEffect(() => {
+        setTimeout(() => {
+            reloadScrollbar()
+        }, 500)
         const resizeObserver = new ResizeObserver(() => {
             reloadScrollbar()
         })
diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx
index 77e6aac..454e67d 100644
--- a/src/components/common/sidebar/SidebarFooter.tsx
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Icon from '@ant-design/icons'
 import { COLOR_ERROR } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
-import { getLoginStatus, getNickname, removeToken } from '@/util/auth'
+import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
 import { r_auth_logout } from '@/services/auth'
 
 const SidebarFooter: React.FC = () => {
@@ -12,6 +12,7 @@ const SidebarFooter: React.FC = () => {
     const navigate = useNavigate()
     const [exiting, setExiting] = useState(false)
     const [nickname, setNickname] = useState('')
+    const [avatar, setAvatar] = useState('')
 
     const handleClickAvatar = () => {
         if (getLoginStatus()) {
@@ -45,6 +46,10 @@ const SidebarFooter: React.FC = () => {
         if (getLoginStatus()) {
             void getNickname().then((nickname) => {
                 setNickname(nickname)
+
+                void getAvatar().then((avatar) => {
+                    setAvatar(`data:image/png;base64,${avatar}`)
+                })
             })
         }
     }, [loginStatus])
@@ -56,7 +61,11 @@ const SidebarFooter: React.FC = () => {
                 onClick={handleClickAvatar}
                 title={getLoginStatus() ? '个人中心' : '登录'}
             >
-                <Icon component={IconFatwebUser} />
+                {avatar ? (
+                    <img src={avatar} alt={'Avatar'} />
+                ) : (
+                    <Icon viewBox={'-20 0 1024 1024'} component={IconFatwebUser} />
+                )}
             </span>
             <span hidden={getLoginStatus()} className={'text'}>
                 未
@@ -64,7 +73,7 @@ const SidebarFooter: React.FC = () => {
                     登录
                 </NavLink>
             </span>
-            <span hidden={!getLoginStatus()} className={'text'}>
+            <span hidden={!getLoginStatus()} className={'text'} title={nickname}>
                 {nickname}
             </span>
             <div
diff --git a/src/global.d.ts b/src/global.d.ts
index f3b852c..f8ce3eb 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -199,6 +199,7 @@ interface UserAddEditParam {
     id?: string
     username: string
     password?: string
+    verified: boolean
     locking?: boolean
     expiration?: string
     credentialsExpiration?: string
@@ -413,6 +414,10 @@ interface ActiveInfoVo {
         time: string
         count: number
     }[]
+    verifyHistory: {
+        time: string
+        count: number
+    }[]
 }
 
 interface ActiveInfoGetParam {
diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx
index b72a083..eb58a2f 100644
--- a/src/pages/Sign.tsx
+++ b/src/pages/Sign.tsx
@@ -8,6 +8,7 @@ import {
     PERMISSION_ACCOUNT_NEED_INIT,
     PERMISSION_LOGIN_SUCCESS,
     PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
+    PERMISSION_NO_VERIFICATION_REQUIRED,
     PERMISSION_REGISTER_SUCCESS,
     PERMISSION_USER_DISABLE,
     PERMISSION_USERNAME_NOT_FOUND
@@ -201,7 +202,7 @@ const SignUp: React.FC = () => {
                             </>
                         ) : (
                             <div className={'retry'}>
-                                我们发送了一封包含激活账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
+                                我们发送了一封包含验证账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
                                 <a onClick={handleOnResend}>重新发送</a>
                             </div>
                         )}
@@ -228,6 +229,7 @@ const Verify: React.FC = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const [hasCode, setHasCode] = useState(true)
+    const [needVerify, setNeedVerify] = useState(true)
     const [isValid, setIsValid] = useState(true)
     const [isSending, setIsSending] = useState(false)
     const [isGettingAvatar, setIsGettingAvatar] = useState(false)
@@ -255,12 +257,18 @@ const Verify: React.FC = () => {
         void r_auth_verify({ code })
             .then((res) => {
                 const response = res.data
-                if (response.code === PERMISSION_ACCOUNT_NEED_INIT) {
-                    void getUserInfo().then((user) => {
-                        setAvatar(user.userInfo.avatar)
-                    })
-                } else {
-                    setIsValid(false)
+                switch (response.code) {
+                    case PERMISSION_ACCOUNT_NEED_INIT:
+                        void getUserInfo().then((user) => {
+                            setAvatar(user.userInfo.avatar)
+                        })
+                        break
+                    case PERMISSION_NO_VERIFICATION_REQUIRED:
+                        void message.success('无需验证')
+                        setNeedVerify(false)
+                        break
+                    default:
+                        setIsValid(false)
                 }
             })
             .catch(() => {
@@ -347,7 +355,13 @@ const Verify: React.FC = () => {
                             <div className={'secondary'}>Verify account</div>
                         </div>
                         <AntdForm className={'form'} onFinish={handleOnFinish}>
-                            <div className={'verify-process'} hidden={!hasCode || !isValid}>
+                            <div className={'no-verify-need'} hidden={needVerify}>
+                                账号已验证通过，无需验证，点击&nbsp;<a href={'/'}>回到首页</a>
+                            </div>
+                            <div
+                                className={'verify-process'}
+                                hidden={!needVerify || !hasCode || !isValid}
+                            >
                                 <div
                                     style={{
                                         display: 'flex',
@@ -360,7 +374,7 @@ const Verify: React.FC = () => {
                                             src={
                                                 <img
                                                     src={`data:image/png;base64,${avatar}`}
-                                                    alt={'avatar'}
+                                                    alt={'Avatar'}
                                                 />
                                             }
                                             size={100}
diff --git a/src/pages/system/Statistics.tsx b/src/pages/system/Statistics.tsx
index a14d904..0129228 100644
--- a/src/pages/system/Statistics.tsx
+++ b/src/pages/system/Statistics.tsx
@@ -6,6 +6,8 @@ import {
     TooltipComponentOption,
     GridComponent,
     GridComponentOption,
+    LegendComponent,
+    LegendComponentOption,
     ToolboxComponentOption,
     DataZoomComponentOption,
     ToolboxComponent,
@@ -14,7 +16,7 @@ import {
 import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
 import { UniversalTransition } from 'echarts/features'
 import { SVGRenderer } from 'echarts/renderers'
-import { TopLevelFormatterParams } from 'echarts/types/dist/shared'
+import { CallbackDataParams } from 'echarts/types/dist/shared'
 import '@/assets/css/pages/system/statistics.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { formatByteSize } from '@/util/common'
@@ -38,6 +40,7 @@ echarts.use([
     TooltipComponent,
     ToolboxComponent,
     GridComponent,
+    LegendComponent,
     DataZoomComponent,
     BarChart,
     LineChart,
@@ -48,6 +51,7 @@ type EChartsOption = echarts.ComposeOption<
     | TooltipComponentOption
     | ToolboxComponentOption
     | GridComponentOption
+    | LegendComponentOption
     | BarSeriesOption
     | DataZoomComponentOption
     | LineSeriesOption
@@ -94,33 +98,26 @@ const barEChartsBaseOption: EChartsOption = {
 }
 
 const getTooltipTimeFormatter = (format: string = 'yyyy-MM-DD HH:mm:ss') => {
-    return (params: TopLevelFormatterParams) =>
-        `${utcToLocalTime(
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
-            params[0].data[0],
-            format
-        )}<br><span style="display: flex; justify-content: space-between"><span>${
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            params[0]['marker']
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        }${params[0]['seriesName']}</span><span style="font-weight: bold">${
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
-            params[0].data[1]
-        }</span></span> `
+    return (params: CallbackDataParams[]) =>
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        `${utcToLocalTime(params[0].data[0], format)}<br>${params
+            .map(
+                (param) =>
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-expect-error
+                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                    `<span style="display: flex; justify-content: space-between;"><span>${param.marker}${param.seriesName}</span><span style="font-weight: bold; margin-left: 16px;">${param.data[1]}</span></span>`
+            )
+            .join('')}`
 }
 
 const lineEChartsBaseOption: EChartsOption = {
     tooltip: {
         trigger: 'axis'
     },
+    legend: {},
     toolbox: {
         feature: {
             dataZoom: {
@@ -380,6 +377,19 @@ const ActiveInfo: React.FC = () => {
                                   )?.count ?? 0
                               ])
                             : []
+                        const verifyList = data.verifyHistory.length
+                            ? getTimesBetweenTwoTimes(
+                                  data.verifyHistory[0].time,
+                                  data.verifyHistory[data.verifyHistory.length - 1].time,
+                                  'day'
+                              ).map((time) => [
+                                  time,
+                                  data.verifyHistory.find(
+                                      (value) =>
+                                          value.time.substring(0, 10) === time.substring(0, 10)
+                                  )?.count ?? 0
+                              ])
+                            : []
 
                         activeInfoEChartsRef.current = echarts.init(
                             activeInfoDivRef.current,
@@ -417,6 +427,14 @@ const ActiveInfo: React.FC = () => {
                                     symbol: 'none',
                                     areaStyle: {},
                                     data: loginList
+                                },
+                                {
+                                    name: '验证账号人数',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    areaStyle: {},
+                                    data: verifyList
                                 }
                             ]
                         })
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 1824abd..10152ba 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -91,7 +91,7 @@ const User: React.FC = () => {
                         <AntdImage
                             preview={{ mask: <Icon component={IconFatwebEye}></Icon> }}
                             src={`data:image/png;base64,${value}`}
-                            alt={'avatar'}
+                            alt={'Avatar'}
                         />
                     }
                     style={{ background: COLOR_BACKGROUND }}
@@ -161,13 +161,21 @@ const User: React.FC = () => {
                         </>
                     }
                 >
-                    {!record.locking &&
+                    {!record.verify &&
+                    !record.locking &&
                     (!record.expiration || !isPastTime(record.expiration)) &&
                     (!record.credentialsExpiration || !isPastTime(record.credentialsExpiration)) &&
                     record.enable ? (
                         <AntdTag color={'green'}>正常</AntdTag>
                     ) : (
                         <>
+                            {record.verify ? (
+                                <>
+                                    <AntdPopover content={record.verify} trigger={'click'}>
+                                        <AntdTag style={{ cursor: 'pointer' }}>未验证</AntdTag>
+                                    </AntdPopover>
+                                </>
+                            ) : undefined}
                             {record.locking ? <AntdTag>锁定</AntdTag> : undefined}
                             {record.expiration && isPastTime(record.expiration) ? (
                                 <AntdTag>过期</AntdTag>
@@ -430,6 +438,7 @@ const User: React.FC = () => {
             form.setFieldValue('id', value.id)
             form.setFieldValue('username', value.username)
             form.setFieldValue('password', undefined)
+            form.setFieldValue('verified', !value.verify?.length)
             form.setFieldValue('locking', value.locking)
             form.setFieldValue('expiration', value.expiration)
             form.setFieldValue('credentialsExpiration', value.credentialsExpiration)
@@ -727,6 +736,7 @@ const User: React.FC = () => {
         if (!isDrawerEdit && formValues) {
             setNewFormValues({
                 username: formValues.username,
+                verified: formValues.verified,
                 locking: formValues.locking,
                 expiration: formValues.expiration,
                 credentialsExpiration: formValues.credentialsExpiration,
@@ -771,7 +781,7 @@ const User: React.FC = () => {
                                 src={`data:image/png;base64,${
                                     isDrawerEdit ? formValues?.avatar : avatar
                                 }`}
-                                alt={'avatar'}
+                                alt={'Avatar'}
                             />
                         }
                         size={100}
@@ -840,6 +850,9 @@ const User: React.FC = () => {
                             }))}
                         />
                     </AntdForm.Item>
+                    <AntdForm.Item name={'verified'} label={'已验证'}>
+                        <AntdSwitch />
+                    </AntdForm.Item>
                     <AntdForm.Item
                         valuePropName={'checked'}
                         name={'locking'}
diff --git a/src/util/auth.tsx b/src/util/auth.tsx
index 75d0a9e..7ff918e 100644
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -112,6 +112,12 @@ export const getNickname = async () => {
     return user.userInfo.nickname
 }
 
+export const getAvatar = async () => {
+    const user = await getUserInfo()
+
+    return user.userInfo.avatar
+}
+
 export const getUsername = async () => {
     const user = await getUserInfo()
 

From 647b203b6a4632288dd6682589b7fb0ef47acb1b Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 26 Dec 2023 17:45:03 +0800
Subject: [PATCH 142/307] Finish sign page

---
 src/assets/css/pages/sign.scss    |   7 +-
 src/constants/common.constants.ts |   5 +
 src/constants/urls.constants.ts   |   2 +
 src/global.d.ts                   |   9 ++
 src/pages/Sign.tsx                | 202 +++++++++++++++++++++++-------
 src/services/auth.tsx             |   6 +
 6 files changed, 187 insertions(+), 44 deletions(-)

diff --git a/src/assets/css/pages/sign.scss b/src/assets/css/pages/sign.scss
index 73f0d1f..d680211 100644
--- a/src/assets/css/pages/sign.scss
+++ b/src/assets/css/pages/sign.scss
@@ -5,6 +5,10 @@
   background-color: #D2D0DD;
   user-select: none;
 
+  a {
+    cursor: pointer;
+  }
+
   a:hover {
     color: constants.$production-color;
   }
@@ -67,6 +71,7 @@
 
         .form {
           width: 300px;
+          font-size: 14px;
 
           button {
             font-weight: bolder;
@@ -107,7 +112,7 @@
       }
 
       .sign-up, .forget {
-        .retry {
+        .retry, .success {
           margin-bottom: 16px;
 
           a {
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 393afdb..6377058 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -37,6 +37,8 @@ export const PERMISSION_TOKEN_RENEW_SUCCESS = 20003
 export const PERMISSION_REGISTER_SUCCESS = 20004
 export const PERMISSION_RESEND_SUCCESS = 20005
 export const PERMISSION_VERIFY_SUCCESS = 20006
+export const PERMISSION_FORGET_SUCCESS = 20007
+export const PERMISSION_RETRIEVE_SUCCESS = 20008
 
 export const PERMISSION_UNAUTHORIZED = 20050
 export const PERMISSION_USERNAME_NOT_FOUND = 20051
@@ -53,6 +55,9 @@ export const PERMISSION_TOKEN_HAS_EXPIRED = 20061
 export const PERMISSION_NO_VERIFICATION_REQUIRED = 20062
 export const PERMISSION_VERIFY_CODE_ERROR_OR_EXPIRED = 20063
 export const PERMISSION_ACCOUNT_NEED_INIT = 20064
+export const PERMISSION_USER_NOT_FOUND = 20065
+export const PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED = 20066
+export const PERMISSION_ACCOUNT_NEED_RESET_PASSWORD = 20067
 
 export const DATABASE_SELECT_SUCCESS = 30000
 export const DATABASE_SELECT_FAILED = 30005
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 00c4129..3ff3044 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -1,6 +1,8 @@
 export const URL_REGISTER = '/register'
 export const URL_RESEND = '/resend'
 export const URL_VERIFY = '/verify'
+export const URL_FORGET = '/forget'
+export const URL_RETRIEVE = '/retrieve'
 export const URL_LOGIN = '/login'
 export const URL_TOKEN = '/token'
 export const URL_LOGOUT = '/logout'
diff --git a/src/global.d.ts b/src/global.d.ts
index f8ce3eb..11865e6 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -69,6 +69,15 @@ interface VerifyParam {
     avatar?: string
 }
 
+interface ForgetParam {
+    email: string
+}
+
+interface RetrieveParam {
+    code: string
+    password: string
+}
+
 interface LoginParam {
     account: string
     password: string
diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx
index eb58a2f..b3a5b5c 100644
--- a/src/pages/Sign.tsx
+++ b/src/pages/Sign.tsx
@@ -10,6 +10,8 @@ import {
     PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
     PERMISSION_NO_VERIFICATION_REQUIRED,
     PERMISSION_REGISTER_SUCCESS,
+    PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED,
+    PERMISSION_RETRIEVE_SUCCESS,
     PERMISSION_USER_DISABLE,
     PERMISSION_USERNAME_NOT_FOUND
 } from '@/constants/common.constants.ts'
@@ -17,7 +19,14 @@ import { getLoginStatus, getUserInfo, requestUserInfo, setToken } from '@/util/a
 import { AppContext } from '@/App'
 import { utcToLocalTime } from '@/util/datetime'
 import { useUpdatedEffect } from '@/util/hooks'
-import { r_auth_login, r_auth_register, r_auth_resend, r_auth_verify } from '@/services/auth'
+import {
+    r_auth_forget,
+    r_auth_login,
+    r_auth_register,
+    r_auth_resend,
+    r_auth_retrieve,
+    r_auth_verify
+} from '@/services/auth'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
@@ -433,15 +442,65 @@ const Verify: React.FC = () => {
 
 const Forget: React.FC = () => {
     const navigate = useNavigate()
-    const [isLoading, setIsLoading] = useState(false)
-    const [isFinish, setIsFinish] = useState(false)
+    const [searchParams] = useSearchParams()
+    const [isSending, setIsSending] = useState(false)
+    const [isSent, setIsSent] = useState(false)
+    const [isChanging, setIsChanging] = useState(false)
+    const [isChanged, setIsChanged] = useState(false)
 
-    const handleOnFinish = () => {
-        setIsFinish(true)
+    const handleOnSend = (forgetParam: ForgetParam) => {
+        if (isSending) {
+            return
+        }
+        setIsSending(true)
+
+        void r_auth_forget(forgetParam)
+            .then((res) => {
+                const response = res.data
+                if (response.success) {
+                    void message.success('已发送验证邮件，请查收')
+                    setIsSent(true)
+                } else {
+                    void message.error('出错了，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsSending(false)
+            })
     }
 
     const handleOnRetry = () => {
-        setIsFinish(false)
+        setIsSent(false)
+    }
+
+    const handleOnChange = (retrieveParam: RetrieveParam) => {
+        if (isChanging) {
+            return
+        }
+        setIsChanging(true)
+
+        void r_auth_retrieve({
+            code: searchParams.get('code') ?? '',
+            password: retrieveParam.password
+        })
+            .then((res) => {
+                const response = res.data
+
+                switch (response.code) {
+                    case PERMISSION_RETRIEVE_SUCCESS:
+                        void message.success('密码已更新')
+                        setIsChanged(true)
+                        break
+                    case PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED:
+                        void message.error('验证码有误，请重新获取')
+                        break
+                    default:
+                        void message.error('出错了，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsChanging(false)
+            })
     }
 
     return (
@@ -452,52 +511,109 @@ const Forget: React.FC = () => {
                         <div className={'primary'}>找回密码</div>
                         <div className={'secondary'}>Retrieve password</div>
                     </div>
-                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
-                        {!isFinish ? (
+                    <div className={'form'}>
+                        {!searchParams.get('code') ? (
+                            !isSent ? (
+                                <>
+                                    <AntdForm autoComplete={'on'} onFinish={handleOnSend}>
+                                        <AntdForm.Item
+                                            name={'email'}
+                                            rules={[
+                                                { required: true, message: '请输入邮箱' },
+                                                { type: 'email', message: '不是有效的邮箱地址' }
+                                            ]}
+                                        >
+                                            <AntdInput
+                                                prefix={<Icon component={IconFatwebEmail} />}
+                                                placeholder={'邮箱'}
+                                                disabled={isSending}
+                                            />
+                                        </AntdForm.Item>
+                                        <AntdForm.Item>
+                                            <AntdButton
+                                                style={{ width: '100%' }}
+                                                type={'primary'}
+                                                htmlType={'submit'}
+                                                disabled={isSending}
+                                                loading={isSending}
+                                            >
+                                                确&ensp;&ensp;&ensp;&ensp;定
+                                            </AntdButton>
+                                        </AntdForm.Item>
+                                    </AntdForm>
+                                </>
+                            ) : (
+                                <div className={'retry'}>
+                                    我们向您发送了一封包含找回密码链接的邮件，如未收到，可能被归为垃圾邮件，请仔细检查。
+                                    <a onClick={handleOnRetry}>重新发送</a>
+                                </div>
+                            )
+                        ) : !isChanged ? (
                             <>
-                                <AntdForm.Item
-                                    name={'account'}
-                                    rules={[
-                                        { required: true, message: '请输入邮箱' },
-                                        { type: 'email', message: '不是有效的邮箱地址' }
-                                    ]}
-                                >
-                                    <AntdInput
-                                        prefix={<Icon component={IconFatwebEmail} />}
-                                        placeholder={'邮箱'}
-                                        disabled={isLoading}
-                                    />
-                                </AntdForm.Item>
-                                <AntdForm.Item>
-                                    <AntdButton
-                                        style={{ width: '100%' }}
-                                        type={'primary'}
-                                        htmlType={'submit'}
-                                        disabled={isLoading}
-                                        loading={isLoading}
+                                <AntdForm autoComplete={'on'} onFinish={handleOnChange}>
+                                    <AntdForm.Item
+                                        name={'password'}
+                                        rules={[
+                                            { required: true, message: '请输入密码' },
+                                            { min: 10, message: '密码至少为10位' },
+                                            { max: 30, message: '密码最多为30位' }
+                                        ]}
                                     >
-                                        确&ensp;&ensp;&ensp;&ensp;定
-                                    </AntdButton>
-                                </AntdForm.Item>
+                                        <AntdInput.Password
+                                            addonBefore={
+                                                <span>新&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
+                                            }
+                                            placeholder={'密码'}
+                                            disabled={isChanging}
+                                        />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item
+                                        name={'passwordConfirm'}
+                                        rules={[
+                                            { required: true, message: '请确认密码' },
+                                            ({ getFieldValue }) => ({
+                                                validator(_, value) {
+                                                    if (
+                                                        !value ||
+                                                        getFieldValue('password') === value
+                                                    ) {
+                                                        return Promise.resolve()
+                                                    }
+                                                    return Promise.reject(
+                                                        new Error('两次密码输入必须一致')
+                                                    )
+                                                }
+                                            })
+                                        ]}
+                                    >
+                                        <AntdInput.Password
+                                            addonBefore={'确认密码'}
+                                            placeholder={'确认密码'}
+                                            disabled={isChanging}
+                                        />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item>
+                                        <AntdButton
+                                            style={{ width: '100%' }}
+                                            type={'primary'}
+                                            htmlType={'submit'}
+                                            disabled={isChanging}
+                                            loading={isChanging}
+                                        >
+                                            更&ensp;&ensp;&ensp;&ensp;改
+                                        </AntdButton>
+                                    </AntdForm.Item>
+                                </AntdForm>
                             </>
                         ) : (
-                            <div className={'retry'}>
-                                我们发送了一封包含找回密码链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
-                                <a onClick={handleOnRetry}>重新发送</a>
-                            </div>
+                            <div className={'success'}>恭喜你，密码已更新，请重新登录。</div>
                         )}
 
                         <div className={'footer'}>
                             找到了？
-                            <a
-                                onClick={() =>
-                                    navigate(`/login${location.search}`, { replace: true })
-                                }
-                            >
-                                登录
-                            </a>
+                            <a onClick={() => navigate(`/login`, { replace: true })}>登录</a>
                         </div>
-                    </AntdForm>
+                    </div>
                 </FlexBox>
             </FitCenter>
         </div>
diff --git a/src/services/auth.tsx b/src/services/auth.tsx
index 6348b95..9bea6d8 100644
--- a/src/services/auth.tsx
+++ b/src/services/auth.tsx
@@ -1,8 +1,10 @@
 import {
+    URL_FORGET,
     URL_LOGIN,
     URL_LOGOUT,
     URL_REGISTER,
     URL_RESEND,
+    URL_RETRIEVE,
     URL_VERIFY
 } from '@/constants/urls.constants'
 import request from '@/services'
@@ -13,6 +15,10 @@ export const r_auth_resend = () => request.post(URL_RESEND)
 
 export const r_auth_verify = (param: VerifyParam) => request.post(URL_VERIFY, param)
 
+export const r_auth_forget = (param: ForgetParam) => request.post(URL_FORGET, param)
+
+export const r_auth_retrieve = (param: RetrieveParam) => request.post(URL_RETRIEVE, param)
+
 export const r_auth_login = (param: LoginParam) => request.post<TokenVo>(URL_LOGIN, param)
 
 export const r_auth_logout = () => request.post(URL_LOGOUT)

From 4eec5092ffa53d26bbf522320b3838434b8203a1 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 27 Dec 2023 10:06:43 +0800
Subject: [PATCH 143/307] Optimize code

---
 src/AuthRoute.tsx                               |  2 +-
 src/components/common/sidebar/SidebarFooter.tsx |  3 ++-
 src/pages/system/Statistics.tsx                 | 15 +++++++++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index 2019960..ae0e24a 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -29,7 +29,7 @@ const AuthRoute = () => {
                 return <Navigate to={'/verify'} />
             }
         }
-        if (isLogin && lastMatch.pathname === '/login') {
+        if (isLogin && ['/login', '/forget'].includes(lastMatch.pathname)) {
             return <Navigate to={'/'} />
         }
 
diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx
index 454e67d..2afed3e 100644
--- a/src/components/common/sidebar/SidebarFooter.tsx
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import Icon from '@ant-design/icons'
 import { COLOR_ERROR } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
+import { useUpdatedEffect } from '@/util/hooks'
 import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
 import { r_auth_logout } from '@/services/auth'
 
@@ -42,7 +43,7 @@ const SidebarFooter: React.FC = () => {
 
     const loginStatus = getLoginStatus()
 
-    useEffect(() => {
+    useUpdatedEffect(() => {
         if (getLoginStatus()) {
             void getNickname().then((nickname) => {
                 setNickname(nickname)
diff --git a/src/pages/system/Statistics.tsx b/src/pages/system/Statistics.tsx
index 0129228..ddf5a64 100644
--- a/src/pages/system/Statistics.tsx
+++ b/src/pages/system/Statistics.tsx
@@ -281,7 +281,12 @@ const OnlineInfo: React.FC = () => {
             loading={isLoading}
             expand={
                 <>
-                    <AntdSelect value={scope} onChange={handleOnScopeChange} disabled={isLoading}>
+                    <AntdSelect
+                        value={scope}
+                        onChange={handleOnScopeChange}
+                        disabled={isLoading}
+                        style={{ width: '8em' }}
+                    >
                         <AntdSelect.Option key={'DAY'}>今天</AntdSelect.Option>
                         <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
                         <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
@@ -399,6 +404,7 @@ const ActiveInfo: React.FC = () => {
 
                         activeInfoEChartsRef.current?.setOption({
                             ...lineEChartsBaseOption,
+                            useUTC: true,
                             tooltip: {
                                 ...lineEChartsBaseOption.tooltip,
                                 formatter: getTooltipTimeFormatter('yyyy-MM-DD')
@@ -457,7 +463,12 @@ const ActiveInfo: React.FC = () => {
             loading={isLoading}
             expand={
                 <>
-                    <AntdSelect value={scope} onChange={handleOnScopeChange} disabled={isLoading}>
+                    <AntdSelect
+                        value={scope}
+                        onChange={handleOnScopeChange}
+                        disabled={isLoading}
+                        style={{ width: '8em' }}
+                    >
                         <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
                         <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
                         <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>

From 81d6f0ac297061837026571597f70fc229a97b4e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 27 Dec 2023 17:12:42 +0800
Subject: [PATCH 144/307] Add base settings management to Settings page

---
 src/constants/urls.constants.ts |  1 +
 src/global.d.ts                 | 10 +++++
 src/pages/Sign.tsx              | 17 ++++---
 src/pages/ToolsFramework.tsx    |  2 +-
 src/pages/UserFramework.tsx     |  2 +-
 src/pages/system/Settings.tsx   | 80 ++++++++++++++++++++++++++++++++-
 src/pages/system/Statistics.tsx |  2 +-
 src/router/index.tsx            |  2 +-
 src/services/system.tsx         |  8 +++-
 9 files changed, 113 insertions(+), 11 deletions(-)

diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 3ff3044..d35f715 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -15,6 +15,7 @@ export const URL_SYS_ROLE_LIST = '/system/role/list'
 export const URL_SYS_GROUP = '/system/group'
 export const URL_SYS_GROUP_LIST = '/system/group/list'
 export const URL_SYS_SETTINGS = '/system/settings'
+export const URL_SYS_SETTINGS_BASE = `${URL_SYS_SETTINGS}/base`
 export const URL_SYS_SETTINGS_MAIL = `${URL_SYS_SETTINGS}/mail`
 export const URL_SYS_STATISTICS = '/system/statistics'
 export const URL_SYS_STATISTICS_SOFTWARE = `${URL_SYS_STATISTICS}/software`
diff --git a/src/global.d.ts b/src/global.d.ts
index 11865e6..54720b5 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -318,6 +318,16 @@ interface AvatarBase64Vo {
     base64: string
 }
 
+interface BaseSettingsVo {
+    appName?: string
+    appUrl?: string
+}
+
+interface BaseSettingsParam {
+    appName: string
+    appUrl: string
+}
+
 interface MailSettingsVo {
     host?: string
     port?: number
diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx
index b3a5b5c..ffdd5c2 100644
--- a/src/pages/Sign.tsx
+++ b/src/pages/Sign.tsx
@@ -6,6 +6,7 @@ import {
     COLOR_BACKGROUND,
     DATABASE_DUPLICATE_KEY,
     PERMISSION_ACCOUNT_NEED_INIT,
+    PERMISSION_FORGET_SUCCESS,
     PERMISSION_LOGIN_SUCCESS,
     PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
     PERMISSION_NO_VERIFICATION_REQUIRED,
@@ -13,6 +14,7 @@ import {
     PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED,
     PERMISSION_RETRIEVE_SUCCESS,
     PERMISSION_USER_DISABLE,
+    PERMISSION_USER_NOT_FOUND,
     PERMISSION_USERNAME_NOT_FOUND
 } from '@/constants/common.constants.ts'
 import { getLoginStatus, getUserInfo, requestUserInfo, setToken } from '@/util/auth'
@@ -457,11 +459,16 @@ const Forget: React.FC = () => {
         void r_auth_forget(forgetParam)
             .then((res) => {
                 const response = res.data
-                if (response.success) {
-                    void message.success('已发送验证邮件，请查收')
-                    setIsSent(true)
-                } else {
-                    void message.error('出错了，请稍后重试')
+                switch (response.code) {
+                    case PERMISSION_FORGET_SUCCESS:
+                        void message.success('已发送验证邮件，请查收')
+                        setIsSent(true)
+                        break
+                    case PERMISSION_USER_NOT_FOUND:
+                        void message.error('用户不存在')
+                        break
+                    default:
+                        void message.error('出错了，请稍后重试')
                 }
             })
             .finally(() => {
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 666addf..c079dd1 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -22,7 +22,7 @@ const ToolsFramework: React.FC = () => {
         <>
             <FitFullscreen data-component={'tools-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
-                    <Sidebar title={'氮工具'} onSidebarSwitch={handleOnSidebarSwitch}>
+                    <Sidebar title={'氧工具'} onSidebarSwitch={handleOnSidebarSwitch}>
                         <SidebarItemList>
                             <SidebarItem end path={''} icon={tools[0].icon} text={tools[0].name} />
                             <SidebarItem
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 5e60a66..5d84b56 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -27,7 +27,7 @@ const ToolsFramework: React.FC = () => {
                                 <SidebarItem
                                     path={'/tools'}
                                     icon={IconFatwebBack}
-                                    text={'回到氮工具'}
+                                    text={'回到氧工具'}
                                 />
                             </SidebarItemList>
                         }
diff --git a/src/pages/system/Settings.tsx b/src/pages/system/Settings.tsx
index f612e32..9fe36d6 100644
--- a/src/pages/system/Settings.tsx
+++ b/src/pages/system/Settings.tsx
@@ -4,6 +4,8 @@ import '@/assets/css/pages/system/settings.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
 import {
+    r_sys_settings_base_get,
+    r_sys_settings_base_update,
     r_sys_settings_mail_get,
     r_sys_settings_mail_send,
     r_sys_settings_mail_update
@@ -192,6 +194,80 @@ const MailSettings: React.FC = () => {
     )
 }
 
+const BaseSettings: React.FC = () => {
+    const [baseForm] = AntdForm.useForm<BaseSettingsParam>()
+    const baseFormValues = AntdForm.useWatch([], baseForm)
+    const [loading, setLoading] = useState(false)
+
+    const handleOnReset = () => {
+        getBaseSettings()
+    }
+
+    const handleOnSave = () => {
+        void r_sys_settings_base_update(baseFormValues).then((res) => {
+            const response = res.data
+            if (response.success) {
+                void message.success('保存设置成功')
+                getBaseSettings()
+            } else {
+                void message.error('保存设置失败，请稍后重试')
+            }
+        })
+    }
+
+    const getBaseSettings = () => {
+        if (loading) {
+            return
+        }
+
+        setLoading(true)
+        void r_sys_settings_base_get().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                data && baseForm.setFieldsValue(data)
+                setLoading(false)
+            }
+        })
+    }
+
+    useUpdatedEffect(() => {
+        getBaseSettings()
+    }, [])
+
+    return (
+        <>
+            <SettingsCard
+                icon={IconFatwebEmail}
+                title={'基础'}
+                loading={loading}
+                onReset={handleOnReset}
+                onSave={handleOnSave}
+                modifyOperationCode={'system:settings:modify:base'}
+            >
+                <AntdForm
+                    form={baseForm}
+                    labelCol={{ flex: '7em' }}
+                    disabled={!hasPermission('system:settings:modify:base')}
+                >
+                    <AntdForm.Item label={'应用名称'} name={'appName'}>
+                        <AntdInput />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'应用 URL'} name={'appUrl'}>
+                        <AntdInput />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'验证邮箱 URL'} name={'verifyUrl'}>
+                        <AntdInput placeholder={'验证码使用 ${verifyCode} 代替'} />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'找回密码 URL'} name={'retrieveUrl'}>
+                        <AntdInput placeholder={'验证码使用 ${retrieveCode} 代替'} />
+                    </AntdForm.Item>
+                </AntdForm>
+            </SettingsCard>
+        </>
+    )
+}
+
 const Settings: React.FC = () => {
     return (
         <>
@@ -199,10 +275,12 @@ const Settings: React.FC = () => {
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox className={'root-content'}>
                         <FlexBox direction={'horizontal'} className={'root-row'}>
+                            <Permission operationCode={'system:settings:query:base'}>
+                                <BaseSettings />
+                            </Permission>
                             <Permission operationCode={'system:settings:query:mail'}>
                                 <MailSettings />
                             </Permission>
-                            <div />
                         </FlexBox>
                     </FlexBox>
                 </HideScrollbar>
diff --git a/src/pages/system/Statistics.tsx b/src/pages/system/Statistics.tsx
index ddf5a64..51e094c 100644
--- a/src/pages/system/Statistics.tsx
+++ b/src/pages/system/Statistics.tsx
@@ -976,8 +976,8 @@ const Statistics: React.FC = () => {
                             <ActiveInfo />
                         </Permission>
                         <Permission operationCode={'system:statistics:query:base'}>
-                            <SoftwareInfo />
                             <HardwareInfo />
+                            <SoftwareInfo />
                         </Permission>
                         <Permission operationCode={'system:statistics:query:real'}>
                             <CPUInfo />
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 4135a7f..be7068b 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -49,7 +49,7 @@ const root: RouteJsonObject[] = [
                 absolutePath: '/tools',
                 id: 'toolsFramework',
                 component: React.lazy(() => import('@/pages/ToolsFramework')),
-                children: setTitle(tools, '氮工具'),
+                children: setTitle(tools, '氧工具'),
                 name: '工具',
                 auth: false
             },
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 32ba2e9..d995a84 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -14,7 +14,8 @@ import {
     URL_SYS_STATISTICS_CPU,
     URL_SYS_STATISTICS_STORAGE,
     URL_SYS_STATISTICS_ONLINE,
-    URL_SYS_STATISTICS_ACTIVE
+    URL_SYS_STATISTICS_ACTIVE,
+    URL_SYS_SETTINGS_BASE
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -71,6 +72,11 @@ export const r_sys_group_delete_list = (ids: React.Key[]) => request.delete(URL_
 export const r_sys_log_get = (param: SysLogGetParam) =>
     request.get<PageVo<SysLogGetVo>>(URL_SYS_LOG, param)
 
+export const r_sys_settings_base_get = () => request.get<BaseSettingsVo>(URL_SYS_SETTINGS_BASE)
+
+export const r_sys_settings_base_update = (param: BaseSettingsParam) =>
+    request.put(URL_SYS_SETTINGS_BASE, param)
+
 export const r_sys_settings_mail_get = () => request.get<MailSettingsVo>(URL_SYS_SETTINGS_MAIL)
 
 export const r_sys_settings_mail_update = (param: MailSettingsParam) =>

From 0b8df09336341e982e9c13b966b136531393d95c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 28 Dec 2023 17:50:26 +0800
Subject: [PATCH 145/307] Separate official website page

---
 .env.production                               |   2 +-
 .env.testing                                  |   2 +-
 index.html                                    |   2 +-
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 src/assets/css/components/home/footer.scss    |  21 --
 src/assets/css/components/home/home.scss      |  11 -
 src/assets/css/components/home/slogan.scss    |  63 -----
 src/assets/css/pages/home-framework.scss      | 217 -----------------
 .../common/FullscreenLoadingMask.tsx          |   2 +-
 src/components/common/LoadingMask.tsx         |   2 +-
 .../common/sidebar/SidebarFooter.tsx          |   6 +-
 src/components/common/sidebar/index.tsx       |   2 +-
 src/components/home/Footer.tsx                |  29 ---
 src/components/home/OxygenToolbox.tsx         |  17 --
 src/components/home/Slogan.tsx                |  50 ----
 src/constants/common.constants.ts             |   2 +-
 src/pages/HomeFramework.tsx                   | 223 ------------------
 src/pages/Sign.tsx                            |  14 +-
 src/pages/UserFramework.tsx                   |   8 +-
 src/pages/home/index.tsx                      | 174 --------------
 src/pages/system/Group.tsx                    |   6 +-
 src/pages/system/Role.tsx                     |   6 +-
 src/pages/system/Settings.tsx                 |  10 +-
 src/pages/system/Statistics.tsx               |  16 +-
 src/pages/system/User.tsx                     |  10 +-
 src/pages/system/index.tsx                    |  12 +-
 src/router/home.tsx                           |  38 ---
 src/router/index.tsx                          |  18 +-
 src/router/system.tsx                         |  14 +-
 src/router/tools.tsx                          | 116 ++++-----
 src/router/user.tsx                           |   2 +-
 vite.config.ts                                |   4 +-
 33 files changed, 125 insertions(+), 980 deletions(-)
 delete mode 100644 src/assets/css/components/home/footer.scss
 delete mode 100644 src/assets/css/components/home/home.scss
 delete mode 100644 src/assets/css/components/home/slogan.scss
 delete mode 100644 src/assets/css/pages/home-framework.scss
 delete mode 100644 src/components/home/Footer.tsx
 delete mode 100644 src/components/home/OxygenToolbox.tsx
 delete mode 100644 src/components/home/Slogan.tsx
 delete mode 100644 src/pages/HomeFramework.tsx
 delete mode 100644 src/pages/home/index.tsx
 delete mode 100644 src/router/home.tsx

diff --git a/.env.production b/.env.production
index 2e21eb8..245e99d 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,2 @@
-VITE_API_URL=https://api.fatweb.top
+VITE_API_URL=${PRODUCT_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
diff --git a/.env.testing b/.env.testing
index 86f60f7..ecf602a 100644
--- a/.env.testing
+++ b/.env.testing
@@ -1,3 +1,3 @@
 NODE_ENV=development
-VITE_API_URL=https://api-test.fatweb.top
+VITE_API_URL=${TEST_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
diff --git a/index.html b/index.html
index 93b7658..a51f501 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>FatWeb</title>
+    <title>Oxygen Toolbox</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package-lock.json b/package-lock.json
index 1e3d549..971b8f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "fatweb-ui",
+  "name": "oxygen-ui",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "fatweb-ui",
+      "name": "oxygen-ui",
       "version": "0.0.0",
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
diff --git a/package.json b/package.json
index 2d59e37..bd89530 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "fatweb-ui",
+  "name": "oxygen-ui",
   "private": true,
   "version": "0.0.0",
   "type": "module",
diff --git a/src/assets/css/components/home/footer.scss b/src/assets/css/components/home/footer.scss
deleted file mode 100644
index 551c276..0000000
--- a/src/assets/css/components/home/footer.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use "@/assets/css/constants" as constants;
-
-.icons {
-  display: flex;
-  gap: 20px;
-
-  .icon {
-    font-size: 8em;
-    color: constants.$origin-color;
-  }
-}
-
-.links {
-  font-size: 2em;
-  text-decoration: underline;
-  color: constants.$origin-color;
-
-  > * {
-    color: constants.$origin-color;
-  }
-}
\ No newline at end of file
diff --git a/src/assets/css/components/home/home.scss b/src/assets/css/components/home/home.scss
deleted file mode 100644
index 5cd495e..0000000
--- a/src/assets/css/components/home/home.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-[data-component=home].indicator {
-  position: fixed;
-  margin: {
-    right: 20px;
-  };
-  width: 20px;
-  height: 100px;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
\ No newline at end of file
diff --git a/src/assets/css/components/home/slogan.scss b/src/assets/css/components/home/slogan.scss
deleted file mode 100644
index 018eec3..0000000
--- a/src/assets/css/components/home/slogan.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@use "@/assets/css/mixins" as mixins;
-
-.center-box {
-  display: flex;
-  flex-direction: column;
-}
-
-.big-logo {
-  font: {
-    size: 5em;
-    weight: bold;
-  };
-  color: #666;
-}
-
-.slogan {
-  font: {
-    size: 1.3em;
-    style: italic;
-  };
-  color: #666;
-
-  .cursor {
-    font-style: normal;
-    animation: 1s infinite;
-
-    @include mixins.unique-keyframes {
-      0% {
-        opacity: 0;
-      }
-      50% {
-        opacity: 1;
-      }
-      100% {
-        opacity: 0;
-      }
-    }
-  }
-}
-
-.scroll-down {
-  position: absolute;
-  bottom: 10px;
-  padding: 20px;
-  cursor: pointer;
-  animation: 1.5s infinite;
-  @include mixins.unique-keyframes {
-    0%,
-    100% {
-      -ms-filter: none;
-      filter: none;
-      opacity: 1;
-      transform: translateY(10px);
-    }
-
-    50% {
-      -ms-filter: alpha(opacity=40);
-      filter: alpha(opacity=40);
-      opacity: .4;
-      transform: translateY(-10px);
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/assets/css/pages/home-framework.scss b/src/assets/css/pages/home-framework.scss
deleted file mode 100644
index 78aae96..0000000
--- a/src/assets/css/pages/home-framework.scss
+++ /dev/null
@@ -1,217 +0,0 @@
-@use "@/assets/css/mixins" as mixins;
-@use "@/assets/css/constants" as constants;
-
-[data-component=home-framework] {
-  .nav {
-    display: flex;
-    position: fixed;
-    align-items: center;
-    z-index: 1;
-    width: 100%;
-    height: 70px;
-    background-color: constants.$origin-color;
-    border: {
-      bottom: {
-        width: 1px;
-        style: solid;
-        color: constants.$border-color;
-      }
-    }
-    animation: .5s ease both;
-
-    @include mixins.unique-keyframes {
-      0% {
-        transform: translateY(-100%);
-      }
-      100% {
-        transform: translateY(0);
-      }
-    }
-
-    .logo {
-      padding: 0 40px;
-
-      .title {
-        font-size: 2.8em;
-        font-family: century gothic, texgyreadventor, stheiti, sans-serif;
-      }
-    }
-
-    nav {
-      display: flex;
-      justify-content: end;
-      flex: 1;
-      transition: {
-        property: all;
-        duration: .5s;
-      };
-
-      .menu {
-        padding: 0 30px;
-
-        .item {
-          display: inline-block;
-          position: relative;
-          font-size: 1.5em;
-          transition: {
-            property: all;
-            duration: .3s;
-          };
-
-          a {
-            padding: 5px 20px;
-            color: constants.$url-color;
-          }
-        }
-
-        .active {
-          border: {
-            bottom: {
-              width: 2px;
-              style: solid;
-              color: constants.$url-active-color;
-            };
-          };
-        }
-
-        .item:hover {
-          transform: translateY(-5px);
-        }
-
-        .item:hover .submenu {
-          display: block;
-          border: {
-            width: 1px;
-            color: constants.$border-color;
-            style: solid;
-          };
-          animation: 0.3s;
-
-          @include mixins.unique-keyframes {
-            0% {
-              transform: translateY(-10px);
-              opacity: 0;
-            }
-          }
-        }
-
-        .submenu {
-          display: none;
-          position: absolute;
-          width: 100%;
-          text-align: center;
-          background-color: constants.$origin-color;
-          overflow: hidden;
-
-          .item {
-            display: block;
-            font-size: 0.8em;
-            transition: all 0s;
-
-            a {
-              display: block;
-              padding: 8px 0;
-            }
-          }
-
-          .item:hover {
-            transform: none;
-
-            a {
-              background-color: constants.$focus-color !important;
-            }
-          }
-
-          .active {
-            font-weight: bold;
-            border: none;
-          }
-        }
-      }
-
-      .dropdown-menu-button {
-        display: none;
-        margin: 0 20px;
-        width: 45px;
-        height: 45px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 6px;
-      }
-
-      .dropdown-menu-button.active {
-        background-color: transparentize(constants.$focus-color, 0.8);
-        border: {
-          width: 1px;
-          color: constants.$focus-color;
-          style: solid;
-        };
-      }
-
-      @media screen and (max-width: 900px) {
-        .menu {
-          display: none;
-        }
-
-        .dropdown-menu-button {
-          display: flex;
-        }
-      }
-    }
-  }
-
-  .dropdown-menu-content {
-    display: none;
-
-    @media screen and (max-width: 900px) {
-      display: none;
-      position: fixed;
-      width: 100%;
-      top: 70px;
-      border: {
-        width: 1px;
-        color: constants.$border-color;
-        style: solid;
-      };
-      background-color: constants.$origin-color;
-      z-index: 1;
-
-      ul {
-        li {
-          font-size: 1.2em;
-          text-align: center;
-
-          a {
-            display: block;
-            width: 100%;
-            height: 100%;
-            padding: 10px;
-          }
-
-          :hover {
-            background-color: constants.$focus-color;
-          }
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: 900px) {
-    .dropdown-menu-content.show {
-      display: block;
-    }
-  }
-
-  .nav.hide {
-    animation: .5s ease both;
-
-    @include mixins.unique-keyframes {
-      0% {
-        transform: translateY(0);
-      }
-      100% {
-        transform: translateY(-100%);
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/components/common/FullscreenLoadingMask.tsx b/src/components/common/FullscreenLoadingMask.tsx
index 749a4ce..5310b94 100644
--- a/src/components/common/FullscreenLoadingMask.tsx
+++ b/src/components/common/FullscreenLoadingMask.tsx
@@ -8,7 +8,7 @@ const FullscreenLoadingMask: React.FC = () => {
     const loadingIcon = (
         <>
             <Icon
-                component={IconFatwebLoading}
+                component={IconOxygenLoading}
                 style={{ fontSize: 24, color: COLOR_FONT_MAIN }}
                 spin
             />
diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx
index 0107468..41d5854 100644
--- a/src/components/common/LoadingMask.tsx
+++ b/src/components/common/LoadingMask.tsx
@@ -11,7 +11,7 @@ const LoadingMask: React.FC<LoadingMaskProps> = (props) => {
     const loadingIcon = (
         <>
             <Icon
-                component={IconFatwebLoading}
+                component={IconOxygenLoading}
                 style={{ fontSize: 24, color: COLOR_FONT_MAIN }}
                 spin
             />
diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar/SidebarFooter.tsx
index 2afed3e..196686f 100644
--- a/src/components/common/sidebar/SidebarFooter.tsx
+++ b/src/components/common/sidebar/SidebarFooter.tsx
@@ -33,7 +33,7 @@ const SidebarFooter: React.FC = () => {
             removeToken()
             notification.info({
                 message: '已退出登录',
-                icon: <Icon component={IconFatwebExit} style={{ color: COLOR_ERROR }} />
+                icon: <Icon component={IconOxygenExit} style={{ color: COLOR_ERROR }} />
             })
             setTimeout(() => {
                 window.location.reload()
@@ -65,7 +65,7 @@ const SidebarFooter: React.FC = () => {
                 {avatar ? (
                     <img src={avatar} alt={'Avatar'} />
                 ) : (
-                    <Icon viewBox={'-20 0 1024 1024'} component={IconFatwebUser} />
+                    <Icon viewBox={'-20 0 1024 1024'} component={IconOxygenUser} />
                 )}
             </span>
             <span hidden={getLoginStatus()} className={'text'}>
@@ -84,7 +84,7 @@ const SidebarFooter: React.FC = () => {
                 <div className={'content'}>
                     <span hidden={!getLoginStatus()} className={'icon-exit'} onClick={handleLogout}>
                         <Icon
-                            component={exiting ? IconFatwebLoading : IconFatwebExit}
+                            component={exiting ? IconOxygenLoading : IconOxygenExit}
                             spin={exiting}
                         />
                     </span>
diff --git a/src/components/common/sidebar/index.tsx b/src/components/common/sidebar/index.tsx
index 5060455..d9b3266 100644
--- a/src/components/common/sidebar/index.tsx
+++ b/src/components/common/sidebar/index.tsx
@@ -29,7 +29,7 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
             >
                 <div className={'title'}>
                     <span className={'icon-box'} onClick={switchSidebar}>
-                        <Icon component={IconFatwebExpand} />
+                        <Icon component={IconOxygenExpand} />
                     </span>
                     <span className={'text'}>{props.title}</span>
                 </div>
diff --git a/src/components/home/Footer.tsx b/src/components/home/Footer.tsx
deleted file mode 100644
index 1b2641b..0000000
--- a/src/components/home/Footer.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import Icon from '@ant-design/icons'
-import '@/assets/css/components/home/footer.scss'
-import FitCenter from '@/components/common/FitCenter'
-import FitFullscreen from '@/components/common/FitFullscreen'
-
-const Footer: React.FC = () => {
-    return (
-        <>
-            <FitFullscreen backgroundColor={'#333'}>
-                <FitCenter vertical={true} style={{ gap: 20 }}>
-                    <div className={'icons'}>
-                        <NavLink to={'https://github.com/FatttSnake'}>
-                            <Icon component={IconFatwebGithub} className={'icon'} />
-                        </NavLink>
-                        <NavLink to={'https://ci.fatweb.top'}>
-                            <Icon component={IconFatwebJenkins} className={'icon'} />
-                        </NavLink>
-                    </div>
-                    <div className={'links'}>
-                        <NavLink to={'mailto:fatttsnake@fatweb.top'}>Mail</NavLink>
-                    </div>
-                </FitCenter>
-            </FitFullscreen>
-        </>
-    )
-}
-
-export default Footer
diff --git a/src/components/home/OxygenToolbox.tsx b/src/components/home/OxygenToolbox.tsx
deleted file mode 100644
index 576bd5b..0000000
--- a/src/components/home/OxygenToolbox.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import FitCenter from '@/components/common/FitCenter'
-
-const OxygenToolbox: React.FC = () => {
-    return (
-        <>
-            <FitCenter vertical>
-                <div>
-                    <div style={{ fontSize: '4.5em', fontWeight: 'bold' }}>Oxygen Toolbox</div>
-                    <div style={{ fontSize: '1.4em', textAlign: 'end' }}>is coming soon...</div>
-                </div>
-            </FitCenter>
-        </>
-    )
-}
-
-export default OxygenToolbox
diff --git a/src/components/home/Slogan.tsx b/src/components/home/Slogan.tsx
deleted file mode 100644
index e0439c0..0000000
--- a/src/components/home/Slogan.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react'
-import Icon from '@ant-design/icons'
-import '@/assets/css/components/home/slogan.scss'
-import FitCenter from '@/components/common/FitCenter'
-
-interface SloganProps {
-    onClickScrollDown: (event: React.MouseEvent) => void
-}
-
-const Slogan: React.FC<SloganProps> = (props) => {
-    const [slogan, setSlogan] = useState('')
-    const [sloganType, setSloganType] = useState(true)
-
-    const typeText = '因为热爱 所以折腾'
-    if (sloganType) {
-        setTimeout(() => {
-            if (slogan.length < typeText.length) {
-                setSlogan(typeText.substring(0, slogan.length + 1))
-            } else {
-                setSloganType(false)
-            }
-        }, 250)
-    } else {
-        setTimeout(() => {
-            if (slogan.length > 0) {
-                setSlogan(typeText.substring(0, slogan.length - 1))
-            } else {
-                setSloganType(true)
-            }
-        }, 100)
-    }
-
-    return (
-        <>
-            <FitCenter>
-                <div className={'center-box'}>
-                    <div className={'big-logo'}>FatWeb</div>
-                    <span id={'slogan'} className={'slogan'}>
-                        /* {slogan || <>&nbsp;</>} <span className={'cursor'}>|</span> */
-                    </span>
-                </div>
-                <div className={'scroll-down'} onClick={props.onClickScrollDown}>
-                    <Icon component={IconFatwebDown} style={{ fontSize: '1.8em', color: '#666' }} />
-                </div>
-            </FitCenter>
-        </>
-    )
-}
-
-export default Slogan
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 6377058..dbc1338 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -1,4 +1,4 @@
-export const PRODUCTION_NAME = 'FatWeb'
+export const PRODUCTION_NAME = 'Oxygen Toolbox'
 export const STORAGE_TOKEN_KEY = 'JWT_TOKEN'
 export const STORAGE_USER_INFO_KEY = 'USER_INFO'
 export const COLOR_ORIGIN = 'white'
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx
deleted file mode 100644
index 200632f..0000000
--- a/src/pages/HomeFramework.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import React from 'react'
-import Icon from '@ant-design/icons'
-import '@/assets/css/pages/home-framework.scss'
-import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
-import { getRouter } from '@/router'
-import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
-import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
-
-export const HomeFrameworkContext = createContext<{
-    navbarHiddenState: {
-        navbarHidden: boolean
-        setNavbarHidden: (newValue: boolean) => void
-    }
-    preventScrollState: {
-        preventScroll: boolean
-        setPreventScroll: (newValue: boolean) => void
-    }
-    showVerticalScrollbarState: {
-        showVerticalScrollbar: boolean
-        setShowVerticalScrollbar: (newValue: boolean) => void
-    }
-    showHorizontalScrollbarState: {
-        showHorizontalScrollbar: boolean
-        setShowHorizontalScrollbar: (newValue: boolean) => void
-    }
-    showDropdownMenuState: {
-        showDropdownMenu: boolean
-        setShowDropdownMenu: (newValue: boolean) => void
-    }
-    hideScrollbarRef: React.RefObject<HideScrollbarElement>
-}>({
-    navbarHiddenState: {
-        navbarHidden: false,
-        setNavbarHidden: () => undefined
-    },
-    preventScrollState: {
-        preventScroll: false,
-        setPreventScroll: () => undefined
-    },
-    showVerticalScrollbarState: {
-        showVerticalScrollbar: false,
-        setShowVerticalScrollbar: () => undefined
-    },
-    showHorizontalScrollbarState: {
-        showHorizontalScrollbar: false,
-        setShowHorizontalScrollbar: () => undefined
-    },
-    showDropdownMenuState: {
-        showDropdownMenu: false,
-        setShowDropdownMenu: () => undefined
-    },
-    hideScrollbarRef: createRef()
-})
-
-const HomeFramework: React.FC = () => {
-    const routeId = useMatches()[1].id
-    const routeChildren = getRouter().routes[0].children?.find((value) => value.id === routeId)
-        ?.children
-
-    const pathname = useLocation().pathname
-
-    const hideScrollbarRef = useRef<HideScrollbarElement>(null)
-
-    const [navbarHidden, setNavbarHidden] = useState(true)
-    const [preventScroll, setPreventScroll] = useState(false)
-    const [showVerticalScrollbar, setShowVerticalScrollbar] = useState(false)
-    const [showHorizontalScrollbar, setShowHorizontalScrollbar] = useState(false)
-    const [showDropdownMenu, setShowDropdownMenu] = useState(false)
-
-    useEffect(() => {
-        setNavbarHidden(false)
-    }, [pathname])
-
-    const handleMenuDropdownButtonClick = () => {
-        setShowDropdownMenu(!showDropdownMenu)
-    }
-
-    return (
-        <>
-            <HideScrollbar
-                data-component={'home-framework'}
-                ref={hideScrollbarRef}
-                isPreventVerticalScroll={preventScroll}
-                isShowHorizontalScrollbar={true}
-                minWidth={900}
-            >
-                <div className={'body'}>
-                    <div>
-                        <header className={`nav${navbarHidden ? ' hide' : ''}`}>
-                            <a className={'logo'} href={'https://fatweb.top'}>
-                                <span className={'title'}>FatWeb</span>
-                            </a>
-                            <nav>
-                                <ul className={'menu'}>
-                                    {routeChildren?.map((route) => {
-                                        return (route.handle as RouteHandle).menu ? (
-                                            <li className={'item'} key={route.id}>
-                                                <NavLink
-                                                    to={route.path ?? ''}
-                                                    className={({ isActive, isPending }) =>
-                                                        isPending
-                                                            ? 'pending'
-                                                            : isActive
-                                                              ? 'active'
-                                                              : ''
-                                                    }
-                                                >
-                                                    {(route.handle as RouteHandle).name}
-                                                </NavLink>
-                                                {route.children ? (
-                                                    <ul className={'submenu'}>
-                                                        {route.children.map((subRoute) => {
-                                                            return (subRoute.handle as RouteHandle)
-                                                                .menu ? (
-                                                                <li
-                                                                    className={'item'}
-                                                                    key={subRoute.id}
-                                                                >
-                                                                    <NavLink
-                                                                        to={`${route.path ?? ''}/${
-                                                                            subRoute.path ?? ''
-                                                                        }`}
-                                                                        className={({
-                                                                            isActive,
-                                                                            isPending
-                                                                        }) =>
-                                                                            isPending
-                                                                                ? 'pending'
-                                                                                : isActive
-                                                                                  ? 'active'
-                                                                                  : ''
-                                                                        }
-                                                                    >
-                                                                        {
-                                                                            (
-                                                                                subRoute.handle as RouteHandle
-                                                                            ).name
-                                                                        }
-                                                                    </NavLink>
-                                                                </li>
-                                                            ) : (
-                                                                <></>
-                                                            )
-                                                        })}
-                                                    </ul>
-                                                ) : (
-                                                    <></>
-                                                )}
-                                            </li>
-                                        ) : (
-                                            <></>
-                                        )
-                                    })}
-                                </ul>
-                                <div
-                                    className={`dropdown-menu-button${
-                                        showDropdownMenu ? ' active' : ''
-                                    }`}
-                                >
-                                    <Icon
-                                        component={IconFatwebMenu}
-                                        style={{ fontSize: '2.6em', color: COLOR_FONT_SECONDARY }}
-                                        onClick={handleMenuDropdownButtonClick}
-                                    />
-                                </div>
-                            </nav>
-                        </header>
-                        <div className={`dropdown-menu-content${showDropdownMenu ? ' show' : ''}`}>
-                            <ul>
-                                {routeChildren?.map((route) => {
-                                    return (
-                                        <li className={'item'} key={route.id}>
-                                            <NavLink
-                                                to={route.path ?? ''}
-                                                className={({ isActive, isPending }) =>
-                                                    isPending ? 'pending' : isActive ? 'active' : ''
-                                                }
-                                            >
-                                                {(route.handle as RouteHandle).name}
-                                            </NavLink>
-                                        </li>
-                                    )
-                                })}
-                            </ul>
-                        </div>
-                    </div>
-
-                    <HomeFrameworkContext.Provider
-                        value={{
-                            navbarHiddenState: { navbarHidden, setNavbarHidden },
-                            preventScrollState: { preventScroll, setPreventScroll },
-                            showVerticalScrollbarState: {
-                                showVerticalScrollbar,
-                                setShowVerticalScrollbar
-                            },
-                            showHorizontalScrollbarState: {
-                                showHorizontalScrollbar,
-                                setShowHorizontalScrollbar
-                            },
-                            showDropdownMenuState: {
-                                showDropdownMenu,
-                                setShowDropdownMenu
-                            },
-                            hideScrollbarRef
-                        }}
-                    >
-                        <Suspense
-                            fallback={
-                                <>
-                                    <FullscreenLoadingMask />
-                                </>
-                            }
-                        >
-                            <Outlet />
-                        </Suspense>
-                    </HomeFrameworkContext.Provider>
-                </div>
-            </HideScrollbar>
-        </>
-    )
-}
-
-export default HomeFramework
diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx
index ffdd5c2..131afbf 100644
--- a/src/pages/Sign.tsx
+++ b/src/pages/Sign.tsx
@@ -142,7 +142,7 @@ const SignUp: React.FC = () => {
                                     ]}
                                 >
                                     <AntdInput
-                                        prefix={<Icon component={IconFatwebUser} />}
+                                        prefix={<Icon component={IconOxygenUser} />}
                                         placeholder={'用户名'}
                                         maxLength={39}
                                         showCount={true}
@@ -158,7 +158,7 @@ const SignUp: React.FC = () => {
                                 >
                                     <AntdInput
                                         type={'email'}
-                                        prefix={<Icon component={IconFatwebEmail} />}
+                                        prefix={<Icon component={IconOxygenEmail} />}
                                         placeholder={'邮箱'}
                                         disabled={isSigningUp}
                                     />
@@ -172,7 +172,7 @@ const SignUp: React.FC = () => {
                                     ]}
                                 >
                                     <AntdInput.Password
-                                        prefix={<Icon component={IconFatwebPassword} />}
+                                        prefix={<Icon component={IconOxygenPassword} />}
                                         placeholder={'密码'}
                                         disabled={isSigningUp}
                                     />
@@ -194,7 +194,7 @@ const SignUp: React.FC = () => {
                                     ]}
                                 >
                                     <AntdInput.Password
-                                        prefix={<Icon component={IconFatwebPassword} />}
+                                        prefix={<Icon component={IconOxygenPassword} />}
                                         placeholder={'确认密码'}
                                         disabled={isSigningUp}
                                     />
@@ -531,7 +531,7 @@ const Forget: React.FC = () => {
                                             ]}
                                         >
                                             <AntdInput
-                                                prefix={<Icon component={IconFatwebEmail} />}
+                                                prefix={<Icon component={IconOxygenEmail} />}
                                                 placeholder={'邮箱'}
                                                 disabled={isSending}
                                             />
@@ -724,7 +724,7 @@ const SignIn: React.FC = () => {
                             rules={[{ required: true, message: '请输入账号' }]}
                         >
                             <AntdInput
-                                prefix={<Icon component={IconFatwebUser} />}
+                                prefix={<Icon component={IconOxygenUser} />}
                                 placeholder={'邮箱/用户名'}
                                 disabled={isSigningIn}
                             />
@@ -734,7 +734,7 @@ const SignIn: React.FC = () => {
                             rules={[{ required: true, message: '请输入密码' }]}
                         >
                             <AntdInput.Password
-                                prefix={<Icon component={IconFatwebPassword} />}
+                                prefix={<Icon component={IconOxygenPassword} />}
                                 placeholder={'密码'}
                                 disabled={isSigningIn}
                             />
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 5d84b56..a29c6b4 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -20,15 +20,11 @@ const ToolsFramework: React.FC = () => {
                                 {hasPathPermission('/system') ? (
                                     <SidebarItem
                                         path={'/system'}
-                                        icon={IconFatwebSetting}
+                                        icon={IconOxygenSetting}
                                         text={'系统配置'}
                                     />
                                 ) : undefined}
-                                <SidebarItem
-                                    path={'/tools'}
-                                    icon={IconFatwebBack}
-                                    text={'回到氧工具'}
-                                />
+                                <SidebarItem path={'/'} icon={IconOxygenBack} text={'回到氧工具'} />
                             </SidebarItemList>
                         }
                     >
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
deleted file mode 100644
index 5e6a323..0000000
--- a/src/pages/home/index.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import React from 'react'
-import '@/assets/css/components/home/home.scss'
-import { HomeFrameworkContext } from '@/pages/HomeFramework'
-import FitFullscreen from '@/components/common/FitFullscreen'
-import Slogan from '@/components/home/Slogan'
-import OxygenToolbox from '@/components/home/OxygenToolbox'
-import Indicator from '@/components/common/Indicator'
-import Footer from '@/components/home/Footer'
-
-const Home: React.FC = () => {
-    const {
-        hideScrollbarRef,
-        navbarHiddenState: { navbarHidden, setNavbarHidden },
-        showDropdownMenuState: { setShowDropdownMenu },
-        preventScrollState: { setPreventScroll }
-    } = useContext(HomeFrameworkContext)
-
-    const fitFullScreenRef = useRef<HTMLDivElement>(null)
-    const scrollTimeout = useRef(0)
-    const clickStart = useRef(0)
-
-    const [currentContent, setCurrentContent] = useState(0)
-
-    useEffect(() => {
-        setTimeout(() => {
-            setNavbarHidden(true)
-            setPreventScroll(true)
-        })
-    }, [setNavbarHidden, setPreventScroll])
-
-    useLayoutEffect(() => {
-        const handleWindowResize = () => {
-            handleScrollToContent(currentContent)()
-        }
-        window.addEventListener('resize', handleWindowResize)
-        return () => window.removeEventListener('resize', handleWindowResize)
-    })
-
-    const handleScrollToContent = (index: number) => {
-        return () => {
-            setShowDropdownMenu(false)
-            if (!index) {
-                setNavbarHidden(true)
-                hideScrollbarRef.current?.scrollY(0)
-            } else {
-                hideScrollbarRef.current?.scrollY(
-                    (fitFullScreenRef.current?.offsetHeight ?? 0) * index
-                )
-                setNavbarHidden(false)
-            }
-        }
-    }
-
-    const handleScrollUp = () => {
-        if (currentContent <= 0) {
-            return
-        }
-        handleScrollToContent(currentContent - 1)()
-        clearTimeout(scrollTimeout.current)
-        scrollTimeout.current = setTimeout(() => {
-            setCurrentContent(currentContent - 1)
-        }, 500)
-    }
-
-    const handleScrollDown = () => {
-        if (currentContent >= content.length - 1) {
-            return
-        }
-        handleScrollToContent(currentContent + 1)()
-        clearTimeout(scrollTimeout.current)
-        scrollTimeout.current = setTimeout(() => {
-            setCurrentContent(currentContent + 1)
-        }, 500)
-    }
-
-    const handleWheel = (event: React.WheelEvent) => {
-        if (event.altKey || event.ctrlKey || event.shiftKey || event.deltaY === 0) {
-            return
-        }
-
-        if (event.deltaY > 0) {
-            handleScrollDown()
-        } else {
-            handleScrollUp()
-        }
-    }
-
-    const handleTouchStart = (event: React.TouchEvent) => {
-        clickStart.current = event.touches[0].clientY
-    }
-
-    const handleTouchEnd = (event: React.TouchEvent) => {
-        const moveLength = clickStart.current - event.changedTouches[0].clientY
-        if (Math.abs(moveLength) < 100) {
-            return
-        }
-
-        if (moveLength > 0) {
-            handleScrollDown()
-        } else {
-            handleScrollUp()
-        }
-    }
-
-    const handleMouseDown = (event: React.MouseEvent) => {
-        clickStart.current = event.clientY
-    }
-
-    const handleMouseUp = (event: React.MouseEvent) => {
-        const moveLength = clickStart.current - event.clientY
-        if (Math.abs(moveLength) < 100) {
-            return
-        }
-
-        if (moveLength > 0) {
-            handleScrollDown()
-        } else {
-            handleScrollUp()
-        }
-    }
-
-    const handleKeyDown = (event: React.KeyboardEvent) => {
-        if (event.key === 'ArrowUp') {
-            handleScrollUp()
-        }
-        if (event.key === 'ArrowDown') {
-            handleScrollDown()
-        }
-    }
-
-    const handleIndicatorSwitch = (index: number) => {
-        setCurrentContent(index)
-        handleScrollToContent(index)()
-    }
-
-    const content = [
-        {
-            backgroundColor: '#FBFBFB',
-            ref: fitFullScreenRef,
-            children: <Slogan onClickScrollDown={handleScrollDown} />
-        },
-        { children: <OxygenToolbox /> },
-        { children: <Footer /> }
-    ]
-
-    return (
-        <>
-            <div
-                data-component={'home'}
-                tabIndex={0}
-                onWheel={handleWheel}
-                onTouchStart={handleTouchStart}
-                onTouchEnd={handleTouchEnd}
-                onMouseDown={handleMouseDown}
-                onMouseUp={handleMouseUp}
-                onKeyDown={handleKeyDown}
-            >
-                {content.map((element, index) => {
-                    return <FitFullscreen key={index} {...element} />
-                })}
-            </div>
-
-            <div data-component={'home'} hidden={navbarHidden} className={'indicator'}>
-                <Indicator
-                    total={content.length}
-                    current={currentContent}
-                    onSwitch={handleIndicatorSwitch}
-                />
-            </div>
-        </>
-    )
-}
-
-export default Home
diff --git a/src/pages/system/Group.tsx b/src/pages/system/Group.tsx
index d83ed33..309565f 100644
--- a/src/pages/system/Group.tsx
+++ b/src/pages/system/Group.tsx
@@ -503,7 +503,7 @@ const Group: React.FC = () => {
                         style={{ padding: '4px 8px' }}
                         onClick={handleOnAddBtnClick}
                     >
-                        <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
+                        <Icon component={IconOxygenPlus} style={{ fontSize: '1.2em' }} />
                     </AntdButton>
                 </Card>
             </Permission>
@@ -512,7 +512,7 @@ const Group: React.FC = () => {
                 style={{ overflow: 'inherit', flex: '0 0 auto' }}
             >
                 <AntdButton style={{ padding: '4px 8px' }} onClick={handleOnListDeleteBtnClick}>
-                    <Icon component={IconFatwebDelete} style={{ fontSize: '1.2em' }} />
+                    <Icon component={IconOxygenDelete} style={{ fontSize: '1.2em' }} />
                 </AntdButton>
             </Card>
             <Card style={{ overflow: 'inherit' }}>
@@ -577,7 +577,7 @@ const Group: React.FC = () => {
         <AntdSpace>
             <AntdTooltip title={'刷新角色列表'}>
                 <AntdButton onClick={getRoleData} disabled={isSubmitting}>
-                    <Icon component={IconFatwebRefresh} />
+                    <Icon component={IconOxygenRefresh} />
                 </AntdButton>
             </AntdTooltip>
             <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
diff --git a/src/pages/system/Role.tsx b/src/pages/system/Role.tsx
index bfe58b0..4e2a400 100644
--- a/src/pages/system/Role.tsx
+++ b/src/pages/system/Role.tsx
@@ -512,7 +512,7 @@ const Role: React.FC = () => {
                         style={{ padding: '4px 8px' }}
                         onClick={handleOnAddBtnClick}
                     >
-                        <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
+                        <Icon component={IconOxygenPlus} style={{ fontSize: '1.2em' }} />
                     </AntdButton>
                 </Card>
             </Permission>
@@ -521,7 +521,7 @@ const Role: React.FC = () => {
                 style={{ overflow: 'inherit', flex: '0 0 auto' }}
             >
                 <AntdButton style={{ padding: '4px 8px' }} onClick={handleOnListDeleteBtnClick}>
-                    <Icon component={IconFatwebDelete} style={{ fontSize: '1.2em' }} />
+                    <Icon component={IconOxygenDelete} style={{ fontSize: '1.2em' }} />
                 </AntdButton>
             </Card>
             <Card style={{ overflow: 'inherit' }}>
@@ -586,7 +586,7 @@ const Role: React.FC = () => {
         <AntdSpace>
             <AntdTooltip title={'刷新权限列表'}>
                 <AntdButton onClick={getPowerTreeData} disabled={isSubmitting}>
-                    <Icon component={IconFatwebRefresh} />
+                    <Icon component={IconOxygenRefresh} />
                 </AntdButton>
             </AntdTooltip>
             <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
diff --git a/src/pages/system/Settings.tsx b/src/pages/system/Settings.tsx
index 9fe36d6..f78bc9c 100644
--- a/src/pages/system/Settings.tsx
+++ b/src/pages/system/Settings.tsx
@@ -37,10 +37,10 @@ const SettingsCard: React.FC<SettingsCardProps> = (props) => {
                         <Permission operationCode={props.modifyOperationCode}>
                             {props.expand}
                             <AntdButton onClick={props.onReset} title={'重置'}>
-                                <Icon component={IconFatwebBack} />
+                                <Icon component={IconOxygenBack} />
                             </AntdButton>
                             <AntdButton className={'bt-save'} onClick={props.onSave} title={'保存'}>
-                                <Icon component={IconFatwebSave} />
+                                <Icon component={IconOxygenSave} />
                             </AntdButton>
                         </Permission>
                     ) : undefined}
@@ -145,7 +145,7 @@ const MailSettings: React.FC = () => {
     return (
         <>
             <SettingsCard
-                icon={IconFatwebEmail}
+                icon={IconOxygenEmail}
                 title={'邮件'}
                 loading={loading}
                 onReset={handleOnReset}
@@ -153,7 +153,7 @@ const MailSettings: React.FC = () => {
                 modifyOperationCode={'system:settings:modify:mail'}
                 expand={
                     <AntdButton onClick={handleOnTest} title={'测试'}>
-                        <Icon component={IconFatwebTest} />
+                        <Icon component={IconOxygenTest} />
                     </AntdButton>
                 }
             >
@@ -238,7 +238,7 @@ const BaseSettings: React.FC = () => {
     return (
         <>
             <SettingsCard
-                icon={IconFatwebEmail}
+                icon={IconOxygenEmail}
                 title={'基础'}
                 loading={loading}
                 onReset={handleOnReset}
diff --git a/src/pages/system/Statistics.tsx b/src/pages/system/Statistics.tsx
index 51e094c..3309b5e 100644
--- a/src/pages/system/Statistics.tsx
+++ b/src/pages/system/Statistics.tsx
@@ -267,7 +267,7 @@ const OnlineInfo: React.FC = () => {
 
     return (
         <CommonCard
-            icon={IconFatwebOnline}
+            icon={IconOxygenOnline}
             title={
                 <>
                     <FlexBox gap={10} direction={'horizontal'}>
@@ -298,7 +298,7 @@ const OnlineInfo: React.FC = () => {
                         <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
                     </AntdSelect>
                     <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
-                        <Icon component={IconFatwebRefresh} />
+                        <Icon component={IconOxygenRefresh} />
                     </AntdButton>
                 </>
             }
@@ -452,7 +452,7 @@ const ActiveInfo: React.FC = () => {
 
     return (
         <CommonCard
-            icon={IconFatwebAnalysis}
+            icon={IconOxygenAnalysis}
             title={
                 <>
                     <FlexBox gap={10} direction={'horizontal'}>
@@ -479,7 +479,7 @@ const ActiveInfo: React.FC = () => {
                         <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
                     </AntdSelect>
                     <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
-                        <Icon component={IconFatwebRefresh} />
+                        <Icon component={IconOxygenRefresh} />
                     </AntdButton>
                 </>
             }
@@ -507,7 +507,7 @@ const SoftwareInfo: React.FC = () => {
 
     return (
         <CommonCard
-            icon={IconFatwebSoftware}
+            icon={IconOxygenSoftware}
             title={'软件信息'}
             loading={softwareInfoData === undefined}
         >
@@ -569,7 +569,7 @@ const HardwareInfo: React.FC = () => {
 
     return (
         <CommonCard
-            icon={IconFatwebHardware}
+            icon={IconOxygenHardware}
             title={'硬件信息'}
             loading={hardwareInfoData === undefined}
         >
@@ -745,7 +745,7 @@ const CPUInfo: React.FC = () => {
     return (
         <>
             <CommonCard
-                icon={IconFatwebCpu}
+                icon={IconOxygenCpu}
                 title={'CPU 信息'}
                 loading={isLoading}
                 expand={
@@ -931,7 +931,7 @@ const StorageInfo: React.FC = () => {
     return (
         <>
             <CommonCard
-                icon={IconFatwebMemory}
+                icon={IconOxygenMemory}
                 title={'内存信息'}
                 loading={isLoading}
                 expand={
diff --git a/src/pages/system/User.tsx b/src/pages/system/User.tsx
index 10152ba..0aa934b 100644
--- a/src/pages/system/User.tsx
+++ b/src/pages/system/User.tsx
@@ -89,7 +89,7 @@ const User: React.FC = () => {
                 <AntdAvatar
                     src={
                         <AntdImage
-                            preview={{ mask: <Icon component={IconFatwebEye}></Icon> }}
+                            preview={{ mask: <Icon component={IconOxygenEye}></Icon> }}
                             src={`data:image/png;base64,${value}`}
                             alt={'Avatar'}
                         />
@@ -333,7 +333,7 @@ const User: React.FC = () => {
                     <>
                         <Icon
                             style={{ color: COLOR_PRODUCTION, marginRight: 10 }}
-                            component={IconFatwebSetting}
+                            component={IconOxygenSetting}
                         />
                         修改用户 {value.username} 的密码
                     </>
@@ -913,7 +913,7 @@ const User: React.FC = () => {
                         style={{ padding: '4px 8px' }}
                         onClick={handleOnAddBtnClick}
                     >
-                        <Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
+                        <Icon component={IconOxygenPlus} style={{ fontSize: '1.2em' }} />
                     </AntdButton>
                 </Card>
             </Permission>
@@ -922,7 +922,7 @@ const User: React.FC = () => {
                 style={{ overflow: 'inherit', flex: '0 0 auto' }}
             >
                 <AntdButton style={{ padding: '4px 8px' }} onClick={handleOnListDeleteBtnClick}>
-                    <Icon component={IconFatwebDelete} style={{ fontSize: '1.2em' }} />
+                    <Icon component={IconOxygenDelete} style={{ fontSize: '1.2em' }} />
                 </AntdButton>
             </Card>
             <Card style={{ overflow: 'inherit' }}>
@@ -992,7 +992,7 @@ const User: React.FC = () => {
         <AntdSpace>
             <AntdTooltip title={'刷新角色和用户组列表'}>
                 <AntdButton onClick={handleOnDrawerRefresh} disabled={isDrawerSubmitting}>
-                    <Icon component={IconFatwebRefresh} />
+                    <Icon component={IconOxygenRefresh} />
                 </AntdButton>
             </AntdTooltip>
             <AntdButton onClick={handleOnDrawerClose} disabled={isDrawerSubmitting}>
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index bf1f129..aa30561 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -66,32 +66,32 @@ const System: React.FC = () => {
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Permission path={'/system/statistics'}>
-                            <CommonCard icon={IconFatwebAnalysis} url={'statistics'}>
+                            <CommonCard icon={IconOxygenAnalysis} url={'statistics'}>
                                 系统概况
                             </CommonCard>
                         </Permission>
                         <Permission path={'/system/settings'}>
-                            <CommonCard icon={IconFatwebOption} url={'settings'}>
+                            <CommonCard icon={IconOxygenOption} url={'settings'}>
                                 系统设置
                             </CommonCard>
                         </Permission>
                         <Permission path={'/system/user'}>
-                            <CommonCard icon={IconFatwebUser} url={'user'}>
+                            <CommonCard icon={IconOxygenUser} url={'user'}>
                                 用户管理
                             </CommonCard>
                         </Permission>
                         <Permission path={'/system/role'}>
-                            <CommonCard icon={IconFatwebRole} url={'role'}>
+                            <CommonCard icon={IconOxygenRole} url={'role'}>
                                 角色管理
                             </CommonCard>
                         </Permission>
                         <Permission path={'/system/group'}>
-                            <CommonCard icon={IconFatwebGroup} url={'group'}>
+                            <CommonCard icon={IconOxygenGroup} url={'group'}>
                                 群组管理
                             </CommonCard>
                         </Permission>
                         <Permission path={'/system/log'}>
-                            <CommonCard icon={IconFatwebLog} url={'log'}>
+                            <CommonCard icon={IconOxygenLog} url={'log'}>
                                 系统日志
                             </CommonCard>
                         </Permission>
diff --git a/src/router/home.tsx b/src/router/home.tsx
deleted file mode 100644
index 228bbaa..0000000
--- a/src/router/home.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react'
-
-const home: RouteJsonObject[] = [
-    {
-        path: '',
-        absolutePath: '/',
-        id: 'home',
-        component: React.lazy(() => import('@/pages/home')),
-        name: '主页',
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'https://blog.fatweb.top',
-        absolutePath: 'https://blog.fatweb.top',
-        id: 'url-blog',
-        name: '博客',
-        menu: true
-    },
-    {
-        path: '/tools',
-        absolutePath: '/tools',
-        id: 'url-tools',
-        name: '工具',
-        menu: true,
-        children: [
-            {
-                path: 'translation',
-                absolutePath: '/tools/translation',
-                id: 'url-tools-translation',
-                name: '翻译',
-                menu: true
-            }
-        ]
-    }
-]
-
-export default home
diff --git a/src/router/index.tsx b/src/router/index.tsx
index be7068b..84716ac 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import _ from 'lodash'
 import system from '@/router/system'
-import home from '@/router/home'
 import user from '@/router/user'
 import tools from '@/router/tools'
 import { getAuthRoute, mapJsonToRoute, setTitle } from '@/util/route'
@@ -44,15 +43,6 @@ const root: RouteJsonObject[] = [
                 id: 'loading',
                 component: React.lazy(() => import('@/components/common/FullscreenLoadingMask'))
             },
-            {
-                path: 'tools',
-                absolutePath: '/tools',
-                id: 'toolsFramework',
-                component: React.lazy(() => import('@/pages/ToolsFramework')),
-                children: setTitle(tools, '氧工具'),
-                name: '工具',
-                auth: false
-            },
             {
                 path: 'user',
                 absolutePath: '/user',
@@ -75,9 +65,11 @@ const root: RouteJsonObject[] = [
             {
                 path: '',
                 absolutePath: '/',
-                id: 'homeFramework',
-                component: React.lazy(() => import('@/pages/HomeFramework')),
-                children: home
+                id: 'toolsFramework',
+                component: React.lazy(() => import('@/pages/ToolsFramework')),
+                children: setTitle(tools, '氧工具'),
+                name: '工具',
+                auth: false
             },
             {
                 path: '*',
diff --git a/src/router/system.tsx b/src/router/system.tsx
index e36d154..9dcade6 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -8,7 +8,7 @@ const system: RouteJsonObject[] = [
         id: 'system',
         component: React.lazy(() => import('@/pages/system')),
         name: '系统管理',
-        icon: React.lazy(() => import('~icons/fatweb/setting.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/setting.jsx')),
         menu: true
     },
     {
@@ -17,7 +17,7 @@ const system: RouteJsonObject[] = [
         id: 'system-statistics',
         component: React.lazy(() => import('@/pages/system/Statistics')),
         name: '系统概况',
-        icon: React.lazy(() => import('~icons/fatweb/chart.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/chart.jsx')),
         menu: true,
         autoHide: true
     },
@@ -27,7 +27,7 @@ const system: RouteJsonObject[] = [
         id: 'system-settings',
         component: React.lazy(() => import('@/pages/system/Settings')),
         name: '系统设置',
-        icon: React.lazy(() => import('~icons/fatweb/option.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/option.jsx')),
         menu: true,
         autoHide: true
     },
@@ -37,7 +37,7 @@ const system: RouteJsonObject[] = [
         id: 'system-user',
         component: React.lazy(() => import('@/pages/system/User')),
         name: '用户管理',
-        icon: React.lazy(() => import('~icons/fatweb/user.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/user.jsx')),
         menu: true,
         autoHide: true
     },
@@ -47,7 +47,7 @@ const system: RouteJsonObject[] = [
         id: 'system-role',
         component: React.lazy(() => import('@/pages/system/Role')),
         name: '角色管理',
-        icon: React.lazy(() => import('~icons/fatweb/role.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/role.jsx')),
         menu: true,
         autoHide: true
     },
@@ -57,7 +57,7 @@ const system: RouteJsonObject[] = [
         id: 'system-group',
         component: React.lazy(() => import('@/pages/system/Group')),
         name: '群组管理',
-        icon: React.lazy(() => import('~icons/fatweb/group.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/group.jsx')),
         menu: true,
         autoHide: true
     },
@@ -67,7 +67,7 @@ const system: RouteJsonObject[] = [
         id: 'system-log',
         component: React.lazy(() => import('@/pages/system/Log')),
         name: '系统日志',
-        icon: React.lazy(() => import('~icons/fatweb/log.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/log.jsx')),
         menu: true,
         autoHide: true
     },
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index d3dbfe3..8f1e01b 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -3,47 +3,47 @@ import React from 'react'
 export const tools: RouteJsonObject[] = [
     {
         path: '',
-        absolutePath: '/tools',
+        absolutePath: '/',
         id: 'tools',
         component: React.lazy(() => import('@/pages/tools')),
         name: '主页',
-        icon: React.lazy(() => import('~icons/fatweb/home.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/home.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'all',
-        absolutePath: '/tools/all',
+        absolutePath: '/all',
         id: 'tools-all',
         component: React.lazy(() => import('@/pages/tools')),
         name: '全部工具',
         titlePostfix: ' - 全部工具',
-        icon: React.lazy(() => import('~icons/fatweb/tool.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/tool.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation',
-        absolutePath: '/tools/translation',
+        absolutePath: '/translation',
         id: 'tools-translation',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false,
         children: [
             {
                 path: '1',
-                absolutePath: '/tools/translation/1',
+                absolutePath: '/translation/1',
                 id: '1',
                 name: '翻译1',
-                icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
+                icon: React.lazy(() => import('~icons/oxygen/logo.jsx')),
                 menu: true,
                 auth: false
             },
             {
                 path: '2',
-                absolutePath: '/tools/translation/2',
+                absolutePath: '/translation/2',
                 id: '2',
                 name: '翻译2',
                 menu: true,
@@ -53,17 +53,17 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation-',
-        absolutePath: '/tools/translation-',
+        absolutePath: '/translation-',
         id: 'tools-translation-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译-',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false,
         children: [
             {
                 path: '1-',
-                absolutePath: '/tools/translation-/1-',
+                absolutePath: '/translation-/1-',
                 id: '1-',
                 name: '翻译1-',
                 menu: true,
@@ -71,7 +71,7 @@ export const tools: RouteJsonObject[] = [
             },
             {
                 path: '2-',
-                absolutePath: '/tools/translation-/2-',
+                absolutePath: '/translation-/2-',
                 id: '2-',
                 name: '翻译2-',
                 menu: true,
@@ -81,217 +81,217 @@ export const tools: RouteJsonObject[] = [
     },
     {
         path: 'translation--',
-        absolutePath: '/tools/translation--',
+        absolutePath: '/translation--',
         id: 'tools-translation--',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--1',
-        absolutePath: '/tools/translation--1',
+        absolutePath: '/translation--1',
         id: 'tools-translation--1',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--1',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--2',
-        absolutePath: '/tools/translation--2',
+        absolutePath: '/translation--2',
         id: 'tools-translation--2',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--2',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--3',
-        absolutePath: '/tools/translation--3',
+        absolutePath: '/translation--3',
         id: 'tools-translation--3',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--3',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--4',
-        absolutePath: '/tools/translation--4',
+        absolutePath: '/translation--4',
         id: 'tools-translation--4',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--4',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--5',
-        absolutePath: '/tools/translation--5',
+        absolutePath: '/translation--5',
         id: 'tools-translation--5',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--5',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--6',
-        absolutePath: '/tools/translation--6',
+        absolutePath: '/translation--6',
         id: 'tools-translation--6',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--6',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--7',
-        absolutePath: '/tools/translation--7',
+        absolutePath: '/translation--7',
         id: 'tools-translation--7',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--7',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--8',
-        absolutePath: '/tools/translation--8',
+        absolutePath: '/translation--8',
         id: 'tools-translation--8',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--8',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--9',
-        absolutePath: '/tools/translation--9',
+        absolutePath: '/translation--9',
         id: 'tools-translation--9',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--9',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--10',
-        absolutePath: '/tools/translation--10',
+        absolutePath: '/translation--10',
         id: 'tools-translation--10',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--10',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--1-',
-        absolutePath: '/tools/translation--1-',
+        absolutePath: '/translation--1-',
         id: 'tools-translation--1-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--1-',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--2-',
-        absolutePath: '/tools/translation--2-',
+        absolutePath: '/translation--2-',
         id: 'tools-translation--2-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--2-',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--3-',
-        absolutePath: '/tools/translation--3-',
+        absolutePath: '/translation--3-',
         id: 'tools-translation--3-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--3-',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--4-',
-        absolutePath: '/tools/translation--4-',
+        absolutePath: '/translation--4-',
         id: 'tools-translation--4-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--4-',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--5-',
-        absolutePath: '/tools/translation--5-',
+        absolutePath: '/translation--5-',
         id: 'tools-translation--5-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--5-',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--6-',
-        absolutePath: '/tools/translation--6-',
+        absolutePath: '/translation--6-',
         id: 'tools-translation--6-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--6-',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--7-',
-        absolutePath: '/tools/translation--7-',
+        absolutePath: '/translation--7-',
         id: 'tools-translation--7-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--7-',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--8-',
-        absolutePath: '/tools/translation--8-',
+        absolutePath: '/translation--8-',
         id: 'tools-translation--8-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--8-',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--9-',
-        absolutePath: '/tools/translation--9-',
+        absolutePath: '/translation--9-',
         id: 'tools-translation--9-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--9-',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false
     },
     {
         path: 'translation--10-',
-        absolutePath: '/tools/translation--10-',
+        absolutePath: '/translation--10-',
         id: 'tools-translation--10-',
         component: React.lazy(() => import('@/pages/tools/Translation')),
         name: '翻译--10-',
-        icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
         auth: false,
         children: [
             {
                 path: '1-1',
-                absolutePath: '/tools/translation--10-/1-1',
+                absolutePath: '/translation--10-/1-1',
                 id: '1-1',
                 name: '翻译1-',
                 menu: true,
@@ -299,7 +299,7 @@ export const tools: RouteJsonObject[] = [
             },
             {
                 path: '2-1',
-                absolutePath: '/tools/translation--10-/2-1',
+                absolutePath: '/translation--10-/2-1',
                 id: '2-1',
                 name: '翻译2-',
                 menu: true,
@@ -310,7 +310,7 @@ export const tools: RouteJsonObject[] = [
     {
         path: '*',
         absolutePath: '*',
-        element: <Navigate to="/tools" replace />
+        element: <Navigate to="/" replace />
     }
 ]
 
diff --git a/src/router/user.tsx b/src/router/user.tsx
index 0d993c6..dde6c59 100644
--- a/src/router/user.tsx
+++ b/src/router/user.tsx
@@ -7,7 +7,7 @@ const user: RouteJsonObject[] = [
         id: 'user',
         component: React.lazy(() => import('@/pages/user')),
         name: '个人档案',
-        icon: React.lazy(() => import('~icons/fatweb/user.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/user.jsx')),
         menu: true
     },
     {
diff --git a/vite.config.ts b/vite.config.ts
index f95c0f6..5981025 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -49,7 +49,7 @@ export default defineConfig({
                 IconsResolver({
                     prefix: 'icon',
                     extension: 'jsx',
-                    customCollections: ['fatweb']
+                    customCollections: ['oxygen']
                 }),
                 AntDesignResolver({
                     resolveIcons: true
@@ -69,7 +69,7 @@ export default defineConfig({
             jsx: 'react',
             autoInstall: true,
             customCollections: {
-                fatweb: FileSystemIconLoader('src/assets/svg', (svg) =>
+                oxygen: FileSystemIconLoader('src/assets/svg', (svg) =>
                     svg.replace(/^svg /, '<svg fill="currentColor"')
                 )
             }

From 837ea40bf12e4881afc9a7b1dc5d463512d03ae6 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 29 Dec 2023 17:33:37 +0800
Subject: [PATCH 146/307] Optimize register. Add turnstile captcha to login.

---
 .env.development                  |  3 +-
 .env.production                   |  3 +-
 .env.testing                      |  3 +-
 package-lock.json                 | 10 ++++++
 package.json                      |  1 +
 src/constants/common.constants.ts |  3 ++
 src/global.d.ts                   |  2 ++
 src/pages/Sign.tsx                | 51 ++++++++++++++++++++-----------
 src/services/auth.tsx             |  2 +-
 9 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/.env.development b/.env.development
index 14639df..2d4393a 100644
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,3 @@
 VITE_API_URL=http://localhost:8080
-VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 245e99d..5062b96 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,3 @@
 VITE_API_URL=${PRODUCT_API_URL}
-VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
\ No newline at end of file
diff --git a/.env.testing b/.env.testing
index ecf602a..7475bc2 100644
--- a/.env.testing
+++ b/.env.testing
@@ -1,3 +1,4 @@
 NODE_ENV=development
 VITE_API_URL=${TEST_API_URL}
-VITE_API_TOKEN_URL=${VITE_API_URL}/token
\ No newline at end of file
+VITE_API_TOKEN_URL=${VITE_API_URL}/token
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 971b8f1..a071142 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
+        "@marsidev/react-turnstile": "^0.4.0",
         "antd": "^5.12.1",
         "axios": "^1.6.2",
         "dayjs": "^1.11.10",
@@ -1231,6 +1232,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@marsidev/react-turnstile": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.4.0.tgz",
+      "integrity": "sha512-U0lwTWQhP04AnIdWEbLpF/phpqtblNbrnE4yJMdvGyeOZOTmuHW3wB+V8X+BO55pTXZitp2GgJsrGkbUjwJIeQ==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/package.json b/package.json
index bd89530..8257e58 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
+    "@marsidev/react-turnstile": "^0.4.0",
     "antd": "^5.12.1",
     "axios": "^1.6.2",
     "dayjs": "^1.11.10",
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index dbc1338..abbdd71 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -29,6 +29,7 @@ export const SYSTEM_ERROR = 10050
 export const SYSTEM_TIMEOUT = 10051
 export const SYSTEM_REQUEST_ILLEGAL = 10052
 export const SYSTEM_ARGUMENT_NOT_VALID = 10053
+export const SYSTEM_INVALID_CAPTCHA_CODE = 10054
 
 export const PERMISSION_LOGIN_SUCCESS = 20000
 export const PERMISSION_PASSWORD_CHANGE_SUCCESS = 20001
@@ -73,3 +74,5 @@ export const DATABASE_NO_RECORD_FOUND = 30052
 
 export const API_AVATAR_SUCCESS = 50100
 export const API_AVATAR_ERROR = 50150
+
+export const H_CAPTCHA_SITE_KEY = import.meta.env.VITE_TURNSTILE_SITE_KEY
diff --git a/src/global.d.ts b/src/global.d.ts
index 54720b5..bb13ebf 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -4,6 +4,7 @@
 interface ImportMetaEnv {
     readonly VITE_API_URL: string
     readonly VITE_API_TOKEN_URL: string
+    readonly VITE_TURNSTILE_SITE_KEY: string
 }
 
 interface ImportMeta {
@@ -81,6 +82,7 @@ interface RetrieveParam {
 interface LoginParam {
     account: string
     password: string
+    captchaCode: string
 }
 
 interface UserWithPowerInfoVo {
diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx
index 131afbf..d8c720c 100644
--- a/src/pages/Sign.tsx
+++ b/src/pages/Sign.tsx
@@ -1,10 +1,12 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router'
 import Icon from '@ant-design/icons'
+import { Turnstile } from '@marsidev/react-turnstile'
 import '@/assets/css/pages/sign.scss'
 import {
     COLOR_BACKGROUND,
     DATABASE_DUPLICATE_KEY,
+    H_CAPTCHA_SITE_KEY,
     PERMISSION_ACCOUNT_NEED_INIT,
     PERMISSION_FORGET_SUCCESS,
     PERMISSION_LOGIN_SUCCESS,
@@ -15,7 +17,8 @@ import {
     PERMISSION_RETRIEVE_SUCCESS,
     PERMISSION_USER_DISABLE,
     PERMISSION_USER_NOT_FOUND,
-    PERMISSION_USERNAME_NOT_FOUND
+    PERMISSION_USERNAME_NOT_FOUND,
+    SYSTEM_INVALID_CAPTCHA_CODE
 } from '@/constants/common.constants.ts'
 import { getLoginStatus, getUserInfo, requestUserInfo, setToken } from '@/util/auth'
 import { AppContext } from '@/App'
@@ -67,22 +70,9 @@ const SignUp: React.FC = () => {
                 const response = res.data
                 switch (response.code) {
                     case PERMISSION_REGISTER_SUCCESS:
-                        void r_auth_login({
-                            account: registerParam.email,
-                            password: registerParam.password
-                        }).then((res_) => {
-                            const response_ = res_.data
-                            switch (response_.code) {
-                                case PERMISSION_LOGIN_SUCCESS:
-                                    setToken(response_.data?.token ?? '')
-                                    void message.success('恭喜，您快要完成注册了')
-                                    setIsFinish(true)
-                                    break
-                                default:
-                                    void message.success('出错了，请稍后重试')
-                                    setIsSigningUp(false)
-                            }
-                        })
+                        setToken(response.data?.token ?? '')
+                        void message.success('恭喜，您快要完成注册了')
+                        setIsFinish(true)
                         break
                     case DATABASE_DUPLICATE_KEY:
                         void message.error('用户名或邮箱已被注册，请重试')
@@ -632,6 +622,11 @@ const SignIn: React.FC = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const [isSigningIn, setIsSigningIn] = useState(false)
+    const [captchaCode, setCaptchaCode] = useState('')
+
+    const handleOnTurnstileSuccess = (token: string) => {
+        setCaptchaCode(token)
+    }
 
     const handleOnFinish = (loginParam: LoginParam) => {
         if (isSigningIn) {
@@ -639,7 +634,17 @@ const SignIn: React.FC = () => {
         }
         setIsSigningIn(true)
 
-        void r_auth_login({ account: loginParam.account, password: loginParam.password })
+        if (!captchaCode) {
+            void message.warning('请先通过验证')
+            setIsSigningIn(false)
+            return
+        }
+
+        void r_auth_login({
+            account: loginParam.account,
+            password: loginParam.password,
+            captchaCode
+        })
             .then((res) => {
                 const response = res.data
                 const { code, data } = response
@@ -696,6 +701,9 @@ const SignIn: React.FC = () => {
                         )
                         setIsSigningIn(false)
                         break
+                    case SYSTEM_INVALID_CAPTCHA_CODE:
+                        void message.error('验证码有误，请刷新重试')
+                        break
                     default:
                         void message.error(
                             <>
@@ -739,6 +747,13 @@ const SignIn: React.FC = () => {
                                 disabled={isSigningIn}
                             />
                         </AntdForm.Item>
+                        <AntdForm.Item>
+                            <Turnstile
+                                siteKey={H_CAPTCHA_SITE_KEY}
+                                options={{ theme: 'light' }}
+                                onSuccess={handleOnTurnstileSuccess}
+                            />
+                        </AntdForm.Item>
                         <FlexBox direction={'horizontal'} className={'addition'}>
                             <AntdCheckbox disabled={isSigningIn}>记住密码</AntdCheckbox>
                             <a
diff --git a/src/services/auth.tsx b/src/services/auth.tsx
index 9bea6d8..c470526 100644
--- a/src/services/auth.tsx
+++ b/src/services/auth.tsx
@@ -9,7 +9,7 @@ import {
 } from '@/constants/urls.constants'
 import request from '@/services'
 
-export const r_auth_register = (param: RegisterParam) => request.post(URL_REGISTER, param)
+export const r_auth_register = (param: RegisterParam) => request.post<TokenVo>(URL_REGISTER, param)
 
 export const r_auth_resend = () => request.post(URL_RESEND)
 

From edf5f088282ea83f6a804c53d29397b72bcb698c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 2 Jan 2024 16:46:11 +0800
Subject: [PATCH 147/307] Optimize Sign

---
 src/constants/common.constants.ts |   1 +
 src/global.d.ts                   |   3 +
 src/pages/Sign.tsx                | 176 ++++++++++++++++++++++--------
 src/services/index.tsx            |  10 +-
 4 files changed, 143 insertions(+), 47 deletions(-)

diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index abbdd71..035c5ef 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -30,6 +30,7 @@ export const SYSTEM_TIMEOUT = 10051
 export const SYSTEM_REQUEST_ILLEGAL = 10052
 export const SYSTEM_ARGUMENT_NOT_VALID = 10053
 export const SYSTEM_INVALID_CAPTCHA_CODE = 10054
+export const SYSTEM_REQUEST_TOO_FREQUENT = 10055
 
 export const PERMISSION_LOGIN_SUCCESS = 20000
 export const PERMISSION_PASSWORD_CHANGE_SUCCESS = 20001
diff --git a/src/global.d.ts b/src/global.d.ts
index bb13ebf..3d56975 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -62,6 +62,7 @@ interface RegisterParam {
     username: string
     email: string
     password: string
+    captchaCode: string
 }
 
 interface VerifyParam {
@@ -72,11 +73,13 @@ interface VerifyParam {
 
 interface ForgetParam {
     email: string
+    captchaCode: string
 }
 
 interface RetrieveParam {
     code: string
     password: string
+    captchaCode: string
 }
 
 interface LoginParam {
diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx
index d8c720c..44a226e 100644
--- a/src/pages/Sign.tsx
+++ b/src/pages/Sign.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router'
 import Icon from '@ant-design/icons'
-import { Turnstile } from '@marsidev/react-turnstile'
+import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import '@/assets/css/pages/sign.scss'
 import {
     COLOR_BACKGROUND,
@@ -41,9 +41,11 @@ import { r_api_avatar_random_base64 } from '@/services/api/avatar.tsx'
 const SignUp: React.FC = () => {
     const location = useLocation()
     const navigate = useNavigate()
+    const turnstileRef = useRef<TurnstileInstance>()
     const [isSigningUp, setIsSigningUp] = useState(false)
     const [isFinish, setIsFinish] = useState(false)
     const [isSending, setIsSending] = useState(false)
+    const [captchaCode, setCaptchaCode] = useState('')
 
     useUpdatedEffect(() => {
         if (location.pathname !== '/register') {
@@ -54,6 +56,9 @@ const SignUp: React.FC = () => {
                 replace: true
             })
         }
+        setTimeout(() => {
+            turnstileRef.current?.execute()
+        }, 200)
     }, [location.pathname])
 
     const handleOnFinish = (registerParam: RegisterParam) => {
@@ -61,10 +66,18 @@ const SignUp: React.FC = () => {
             return
         }
         setIsSigningUp(true)
+
+        if (!captchaCode) {
+            void message.warning('请先通过验证')
+            setIsSigningUp(false)
+            return
+        }
+
         void r_auth_register({
             username: registerParam.username,
             email: registerParam.email,
-            password: registerParam.password
+            password: registerParam.password,
+            captchaCode
         })
             .then((res) => {
                 const response = res.data
@@ -78,6 +91,9 @@ const SignUp: React.FC = () => {
                         void message.error('用户名或邮箱已被注册，请重试')
                         setIsSigningUp(false)
                         break
+                    case SYSTEM_INVALID_CAPTCHA_CODE:
+                        void message.error('验证码有误，请刷新重试')
+                        break
                     default:
                         void message.error('服务器出错了，请稍后重试')
                         setIsSigningUp(false)
@@ -97,7 +113,6 @@ const SignUp: React.FC = () => {
         void r_auth_resend()
             .then((res) => {
                 const response = res.data
-                message.destroy('sending')
                 if (response.success) {
                     void message.success('已发送验证邮件，请查收')
                 } else {
@@ -105,6 +120,7 @@ const SignUp: React.FC = () => {
                 }
             })
             .finally(() => {
+                message.destroy('sending')
                 setIsSending(false)
             })
     }
@@ -189,6 +205,15 @@ const SignUp: React.FC = () => {
                                         disabled={isSigningUp}
                                     />
                                 </AntdForm.Item>
+                                <AntdForm.Item>
+                                    <Turnstile
+                                        id={'sign-up-turnstile'}
+                                        ref={turnstileRef}
+                                        siteKey={H_CAPTCHA_SITE_KEY}
+                                        options={{ theme: 'light', execution: 'execute' }}
+                                        onSuccess={setCaptchaCode}
+                                    />
+                                </AntdForm.Item>
                                 <AntdForm.Item>
                                     <AntdButton
                                         style={{ width: '100%' }}
@@ -286,7 +311,6 @@ const Verify: React.FC = () => {
         void r_auth_resend()
             .then((res) => {
                 const response = res.data
-                message.destroy('sending')
                 if (response.success) {
                     void message.success('已发送验证邮件，请查收')
                 } else {
@@ -294,6 +318,7 @@ const Verify: React.FC = () => {
                 }
             })
             .finally(() => {
+                message.destroy('sending')
                 setIsSending(false)
             })
     }
@@ -435,10 +460,28 @@ const Verify: React.FC = () => {
 const Forget: React.FC = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
+    const turnstileRef = useRef<TurnstileInstance>()
+    const retrieveTurnstileRef = useRef<TurnstileInstance>()
     const [isSending, setIsSending] = useState(false)
     const [isSent, setIsSent] = useState(false)
     const [isChanging, setIsChanging] = useState(false)
     const [isChanged, setIsChanged] = useState(false)
+    const [captchaCode, setCaptchaCode] = useState('')
+    const [retrieveCpatchaCode, setRetrieveCpatchaCode] = useState('')
+
+    useUpdatedEffect(() => {
+        if (location.pathname !== '/forget') {
+            return
+        }
+
+        setTimeout(() => {
+            if (!searchParams.get('code')) {
+                turnstileRef.current?.execute()
+            } else {
+                retrieveTurnstileRef.current?.execute()
+            }
+        }, 200)
+    }, [location.pathname])
 
     const handleOnSend = (forgetParam: ForgetParam) => {
         if (isSending) {
@@ -446,28 +489,40 @@ const Forget: React.FC = () => {
         }
         setIsSending(true)
 
-        void r_auth_forget(forgetParam)
-            .then((res) => {
-                const response = res.data
-                switch (response.code) {
-                    case PERMISSION_FORGET_SUCCESS:
-                        void message.success('已发送验证邮件，请查收')
-                        setIsSent(true)
-                        break
-                    case PERMISSION_USER_NOT_FOUND:
-                        void message.error('用户不存在')
-                        break
-                    default:
-                        void message.error('出错了，请稍后重试')
-                }
-            })
-            .finally(() => {
-                setIsSending(false)
-            })
+        if (!captchaCode) {
+            void message.warning('请先通过验证')
+            setIsSending(false)
+            return
+        }
+
+        void r_auth_forget({ email: forgetParam.email, captchaCode }).then((res) => {
+            const response = res.data
+            switch (response.code) {
+                case PERMISSION_FORGET_SUCCESS:
+                    void message.success('已发送验证邮件，请查收')
+                    setIsSent(true)
+                    setIsSending(false)
+                    break
+                case PERMISSION_USER_NOT_FOUND:
+                    void message.error('用户不存在')
+                    setIsSending(false)
+                    break
+                case SYSTEM_INVALID_CAPTCHA_CODE:
+                    void message.error('验证码有误，请刷新重试')
+                    break
+                default:
+                    void message.error('出错了，请稍后重试')
+                    setIsSending(false)
+            }
+        })
     }
 
     const handleOnRetry = () => {
         setIsSent(false)
+
+        setTimeout(() => {
+            turnstileRef.current?.execute()
+        }, 200)
     }
 
     const handleOnChange = (retrieveParam: RetrieveParam) => {
@@ -478,26 +533,29 @@ const Forget: React.FC = () => {
 
         void r_auth_retrieve({
             code: searchParams.get('code') ?? '',
-            password: retrieveParam.password
-        })
-            .then((res) => {
-                const response = res.data
+            password: retrieveParam.password,
+            captchaCode: retrieveCpatchaCode
+        }).then((res) => {
+            const response = res.data
 
-                switch (response.code) {
-                    case PERMISSION_RETRIEVE_SUCCESS:
-                        void message.success('密码已更新')
-                        setIsChanged(true)
-                        break
-                    case PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED:
-                        void message.error('验证码有误，请重新获取')
-                        break
-                    default:
-                        void message.error('出错了，请稍后重试')
-                }
-            })
-            .finally(() => {
-                setIsChanging(false)
-            })
+            switch (response.code) {
+                case PERMISSION_RETRIEVE_SUCCESS:
+                    void message.success('密码已更新')
+                    setIsChanged(true)
+                    setIsChanging(false)
+                    break
+                case PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED:
+                    void message.error('请重新获取邮件')
+                    setIsChanging(false)
+                    break
+                case SYSTEM_INVALID_CAPTCHA_CODE:
+                    void message.error('验证码有误，请刷新重试')
+                    break
+                default:
+                    void message.error('出错了，请稍后重试')
+                    setIsChanging(false)
+            }
+        })
     }
 
     return (
@@ -526,6 +584,15 @@ const Forget: React.FC = () => {
                                                 disabled={isSending}
                                             />
                                         </AntdForm.Item>
+                                        <AntdForm.Item>
+                                            <Turnstile
+                                                id={'forget-turnstile'}
+                                                ref={turnstileRef}
+                                                siteKey={H_CAPTCHA_SITE_KEY}
+                                                options={{ theme: 'light', execution: 'execute' }}
+                                                onSuccess={setCaptchaCode}
+                                            />
+                                        </AntdForm.Item>
                                         <AntdForm.Item>
                                             <AntdButton
                                                 style={{ width: '100%' }}
@@ -589,6 +656,15 @@ const Forget: React.FC = () => {
                                             disabled={isChanging}
                                         />
                                     </AntdForm.Item>
+                                    <AntdForm.Item>
+                                        <Turnstile
+                                            id={'retrieve-turnstile'}
+                                            ref={retrieveTurnstileRef}
+                                            siteKey={H_CAPTCHA_SITE_KEY}
+                                            options={{ theme: 'light', execution: 'execute' }}
+                                            onSuccess={setRetrieveCpatchaCode}
+                                        />
+                                    </AntdForm.Item>
                                     <AntdForm.Item>
                                         <AntdButton
                                             style={{ width: '100%' }}
@@ -621,12 +697,18 @@ const SignIn: React.FC = () => {
     const { refreshRouter } = useContext(AppContext)
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
+    const turnstileRef = useRef<TurnstileInstance>()
     const [isSigningIn, setIsSigningIn] = useState(false)
     const [captchaCode, setCaptchaCode] = useState('')
 
-    const handleOnTurnstileSuccess = (token: string) => {
-        setCaptchaCode(token)
-    }
+    useUpdatedEffect(() => {
+        if (location.pathname !== '/login') {
+            return
+        }
+        setTimeout(() => {
+            turnstileRef.current?.execute()
+        }, 200)
+    }, [location.pathname])
 
     const handleOnFinish = (loginParam: LoginParam) => {
         if (isSigningIn) {
@@ -749,9 +831,11 @@ const SignIn: React.FC = () => {
                         </AntdForm.Item>
                         <AntdForm.Item>
                             <Turnstile
+                                id={'sign-in-turnstile'}
+                                ref={turnstileRef}
                                 siteKey={H_CAPTCHA_SITE_KEY}
-                                options={{ theme: 'light' }}
-                                onSuccess={handleOnTurnstileSuccess}
+                                options={{ theme: 'light', execution: 'execute' }}
+                                onSuccess={setCaptchaCode}
                             />
                         </AntdForm.Item>
                         <FlexBox direction={'horizontal'} className={'addition'}>
diff --git a/src/services/index.tsx b/src/services/index.tsx
index 7a1b612..2b8aeae 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -5,7 +5,8 @@ import {
     PERMISSION_TOKEN_HAS_EXPIRED,
     PERMISSION_TOKEN_ILLEGAL,
     PERMISSION_TOKEN_RENEW_SUCCESS,
-    PERMISSION_UNAUTHORIZED
+    PERMISSION_UNAUTHORIZED,
+    SYSTEM_REQUEST_TOO_FREQUENT
 } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
 import { getToken, setToken, removeToken } from '@/util/auth'
@@ -97,6 +98,13 @@ service.interceptors.response.use(
                     </>
                 )
                 throw response?.data
+            case SYSTEM_REQUEST_TOO_FREQUENT:
+                void message.warning(
+                    <>
+                        <strong>请求过于频繁，请稍后重试</strong>
+                    </>
+                )
+                throw response?.data
         }
         return response
     },

From 4d81bee0d062ff29d3cb50cd4bef4b9aa7bb42fa Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 3 Jan 2024 10:54:41 +0800
Subject: [PATCH 148/307] Optimize Sign page code

---
 src/pages/Sign.tsx        | 941 --------------------------------------
 src/pages/sign/Forget.tsx | 271 +++++++++++
 src/pages/sign/SignIn.tsx | 212 +++++++++
 src/pages/sign/SignUp.tsx | 237 ++++++++++
 src/pages/sign/Verify.tsx | 223 +++++++++
 src/pages/sign/index.tsx  |  74 +++
 src/router/index.tsx      |   2 +-
 7 files changed, 1018 insertions(+), 942 deletions(-)
 delete mode 100644 src/pages/Sign.tsx
 create mode 100644 src/pages/sign/Forget.tsx
 create mode 100644 src/pages/sign/SignIn.tsx
 create mode 100644 src/pages/sign/SignUp.tsx
 create mode 100644 src/pages/sign/Verify.tsx
 create mode 100644 src/pages/sign/index.tsx

diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx
deleted file mode 100644
index 44a226e..0000000
--- a/src/pages/Sign.tsx
+++ /dev/null
@@ -1,941 +0,0 @@
-import React, { useState } from 'react'
-import { useNavigate } from 'react-router'
-import Icon from '@ant-design/icons'
-import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
-import '@/assets/css/pages/sign.scss'
-import {
-    COLOR_BACKGROUND,
-    DATABASE_DUPLICATE_KEY,
-    H_CAPTCHA_SITE_KEY,
-    PERMISSION_ACCOUNT_NEED_INIT,
-    PERMISSION_FORGET_SUCCESS,
-    PERMISSION_LOGIN_SUCCESS,
-    PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
-    PERMISSION_NO_VERIFICATION_REQUIRED,
-    PERMISSION_REGISTER_SUCCESS,
-    PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED,
-    PERMISSION_RETRIEVE_SUCCESS,
-    PERMISSION_USER_DISABLE,
-    PERMISSION_USER_NOT_FOUND,
-    PERMISSION_USERNAME_NOT_FOUND,
-    SYSTEM_INVALID_CAPTCHA_CODE
-} from '@/constants/common.constants.ts'
-import { getLoginStatus, getUserInfo, requestUserInfo, setToken } from '@/util/auth'
-import { AppContext } from '@/App'
-import { utcToLocalTime } from '@/util/datetime'
-import { useUpdatedEffect } from '@/util/hooks'
-import {
-    r_auth_forget,
-    r_auth_login,
-    r_auth_register,
-    r_auth_resend,
-    r_auth_retrieve,
-    r_auth_verify
-} from '@/services/auth'
-import FitFullscreen from '@/components/common/FitFullscreen'
-import FitCenter from '@/components/common/FitCenter'
-import FlexBox from '@/components/common/FlexBox'
-import { getRedirectUrl } from '@/util/route.tsx'
-import { r_api_avatar_random_base64 } from '@/services/api/avatar.tsx'
-
-const SignUp: React.FC = () => {
-    const location = useLocation()
-    const navigate = useNavigate()
-    const turnstileRef = useRef<TurnstileInstance>()
-    const [isSigningUp, setIsSigningUp] = useState(false)
-    const [isFinish, setIsFinish] = useState(false)
-    const [isSending, setIsSending] = useState(false)
-    const [captchaCode, setCaptchaCode] = useState('')
-
-    useUpdatedEffect(() => {
-        if (location.pathname !== '/register') {
-            return
-        }
-        if (getLoginStatus()) {
-            navigate(`/login${location.search}`, {
-                replace: true
-            })
-        }
-        setTimeout(() => {
-            turnstileRef.current?.execute()
-        }, 200)
-    }, [location.pathname])
-
-    const handleOnFinish = (registerParam: RegisterParam) => {
-        if (isSigningUp) {
-            return
-        }
-        setIsSigningUp(true)
-
-        if (!captchaCode) {
-            void message.warning('请先通过验证')
-            setIsSigningUp(false)
-            return
-        }
-
-        void r_auth_register({
-            username: registerParam.username,
-            email: registerParam.email,
-            password: registerParam.password,
-            captchaCode
-        })
-            .then((res) => {
-                const response = res.data
-                switch (response.code) {
-                    case PERMISSION_REGISTER_SUCCESS:
-                        setToken(response.data?.token ?? '')
-                        void message.success('恭喜，您快要完成注册了')
-                        setIsFinish(true)
-                        break
-                    case DATABASE_DUPLICATE_KEY:
-                        void message.error('用户名或邮箱已被注册，请重试')
-                        setIsSigningUp(false)
-                        break
-                    case SYSTEM_INVALID_CAPTCHA_CODE:
-                        void message.error('验证码有误，请刷新重试')
-                        break
-                    default:
-                        void message.error('服务器出错了，请稍后重试')
-                        setIsSigningUp(false)
-                }
-            })
-            .catch(() => {
-                setIsSigningUp(false)
-            })
-    }
-
-    const handleOnResend = () => {
-        if (isSending) {
-            return
-        }
-        setIsSending(true)
-        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
-        void r_auth_resend()
-            .then((res) => {
-                const response = res.data
-                if (response.success) {
-                    void message.success('已发送验证邮件，请查收')
-                } else {
-                    void message.error('出错了，请稍后重试')
-                }
-            })
-            .finally(() => {
-                message.destroy('sending')
-                setIsSending(false)
-            })
-    }
-
-    return (
-        <div className={'sign-up'}>
-            <FitCenter>
-                <FlexBox>
-                    <div className={'title'}>
-                        <div className={'primary'}>创建账号</div>
-                        <div className={'secondary'}>Create account</div>
-                    </div>
-                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
-                        {!isFinish ? (
-                            <>
-                                <AntdForm.Item
-                                    name={'username'}
-                                    rules={[
-                                        { required: true, message: '请输入用户名' },
-                                        {
-                                            pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,38}$/,
-                                            message:
-                                                '只能包含字母、数字、连字符和下划线，不能以数字开头'
-                                        }
-                                    ]}
-                                >
-                                    <AntdInput
-                                        prefix={<Icon component={IconOxygenUser} />}
-                                        placeholder={'用户名'}
-                                        maxLength={39}
-                                        showCount={true}
-                                        disabled={isSigningUp}
-                                    />
-                                </AntdForm.Item>
-                                <AntdForm.Item
-                                    name={'email'}
-                                    rules={[
-                                        { required: true, message: '请输入邮箱' },
-                                        { type: 'email', message: '不是有效的邮箱地址' }
-                                    ]}
-                                >
-                                    <AntdInput
-                                        type={'email'}
-                                        prefix={<Icon component={IconOxygenEmail} />}
-                                        placeholder={'邮箱'}
-                                        disabled={isSigningUp}
-                                    />
-                                </AntdForm.Item>
-                                <AntdForm.Item
-                                    name={'password'}
-                                    rules={[
-                                        { required: true, message: '请输入密码' },
-                                        { min: 10, message: '密码至少为10位' },
-                                        { max: 30, message: '密码最多为30位' }
-                                    ]}
-                                >
-                                    <AntdInput.Password
-                                        prefix={<Icon component={IconOxygenPassword} />}
-                                        placeholder={'密码'}
-                                        disabled={isSigningUp}
-                                    />
-                                </AntdForm.Item>
-                                <AntdForm.Item
-                                    name={'passwordConfirm'}
-                                    rules={[
-                                        { required: true, message: '请确认密码' },
-                                        ({ getFieldValue }) => ({
-                                            validator(_, value) {
-                                                if (!value || getFieldValue('password') === value) {
-                                                    return Promise.resolve()
-                                                }
-                                                return Promise.reject(
-                                                    new Error('两次密码输入必须一致')
-                                                )
-                                            }
-                                        })
-                                    ]}
-                                >
-                                    <AntdInput.Password
-                                        prefix={<Icon component={IconOxygenPassword} />}
-                                        placeholder={'确认密码'}
-                                        disabled={isSigningUp}
-                                    />
-                                </AntdForm.Item>
-                                <AntdForm.Item>
-                                    <Turnstile
-                                        id={'sign-up-turnstile'}
-                                        ref={turnstileRef}
-                                        siteKey={H_CAPTCHA_SITE_KEY}
-                                        options={{ theme: 'light', execution: 'execute' }}
-                                        onSuccess={setCaptchaCode}
-                                    />
-                                </AntdForm.Item>
-                                <AntdForm.Item>
-                                    <AntdButton
-                                        style={{ width: '100%' }}
-                                        type={'primary'}
-                                        htmlType={'submit'}
-                                        disabled={isSigningUp}
-                                        loading={isSigningUp}
-                                    >
-                                        注&ensp;&ensp;&ensp;&ensp;册
-                                    </AntdButton>
-                                </AntdForm.Item>
-                            </>
-                        ) : (
-                            <div className={'retry'}>
-                                我们发送了一封包含验证账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
-                                <a onClick={handleOnResend}>重新发送</a>
-                            </div>
-                        )}
-
-                        <div className={'footer'} hidden={isFinish}>
-                            已有账号？
-                            <a
-                                onClick={() =>
-                                    navigate(`/login${location.search}`, { replace: true })
-                                }
-                            >
-                                登录
-                            </a>
-                        </div>
-                    </AntdForm>
-                </FlexBox>
-            </FitCenter>
-        </div>
-    )
-}
-
-const Verify: React.FC = () => {
-    const { refreshRouter } = useContext(AppContext)
-    const navigate = useNavigate()
-    const [searchParams] = useSearchParams()
-    const [hasCode, setHasCode] = useState(true)
-    const [needVerify, setNeedVerify] = useState(true)
-    const [isValid, setIsValid] = useState(true)
-    const [isSending, setIsSending] = useState(false)
-    const [isGettingAvatar, setIsGettingAvatar] = useState(false)
-    const [avatar, setAvatar] = useState('')
-    const [isVerifying, setIsVerifying] = useState(false)
-
-    useUpdatedEffect(() => {
-        if (location.pathname !== '/verify') {
-            return
-        }
-
-        if (!getLoginStatus()) {
-            navigate(getRedirectUrl('/login', `${location.pathname}${location.search}`), {
-                replace: true
-            })
-            return
-        }
-
-        const code = searchParams.get('code')
-
-        if (!code) {
-            setHasCode(false)
-            return
-        }
-        void r_auth_verify({ code })
-            .then((res) => {
-                const response = res.data
-                switch (response.code) {
-                    case PERMISSION_ACCOUNT_NEED_INIT:
-                        void getUserInfo().then((user) => {
-                            setAvatar(user.userInfo.avatar)
-                        })
-                        break
-                    case PERMISSION_NO_VERIFICATION_REQUIRED:
-                        void message.success('无需验证')
-                        setNeedVerify(false)
-                        break
-                    default:
-                        setIsValid(false)
-                }
-            })
-            .catch(() => {
-                setIsValid(false)
-            })
-    }, [location.pathname])
-
-    const handleOnResend = () => {
-        if (isSending) {
-            return
-        }
-        setIsSending(true)
-        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
-        void r_auth_resend()
-            .then((res) => {
-                const response = res.data
-                if (response.success) {
-                    void message.success('已发送验证邮件，请查收')
-                } else {
-                    void message.error('出错了，请稍后重试')
-                }
-            })
-            .finally(() => {
-                message.destroy('sending')
-                setIsSending(false)
-            })
-    }
-
-    const handleOnChangeAvatar = () => {
-        if (isGettingAvatar) {
-            return
-        }
-        setIsGettingAvatar(true)
-        void r_api_avatar_random_base64()
-            .then((res) => {
-                const response = res.data
-                if (response.success) {
-                    response.data?.base64 && setAvatar(response.data.base64)
-                }
-            })
-            .finally(() => {
-                setIsGettingAvatar(false)
-            })
-    }
-
-    const handleOnFinish = (verifyParam: VerifyParam) => {
-        if (isVerifying) {
-            return
-        }
-        setIsVerifying(true)
-
-        void r_auth_verify({
-            code: searchParams.get('code') ?? '',
-            avatar,
-            nickname: verifyParam.nickname
-        }).then((res) => {
-            const response = res.data
-            if (response.success) {
-                void message.success('恭喜你，完成了')
-                setTimeout(() => {
-                    void requestUserInfo().then(() => {
-                        refreshRouter()
-                        if (searchParams.has('redirect')) {
-                            navigate(searchParams.get('redirect') ?? '/')
-                        } else {
-                            navigate('/')
-                        }
-                    })
-                }, 1500)
-            } else {
-                void message.error('出错了，请稍后重试')
-                setIsVerifying(false)
-            }
-        })
-    }
-
-    return (
-        <>
-            <div className={'verify'}>
-                <FitCenter>
-                    <FlexBox>
-                        <div className={'title'}>
-                            <div className={'primary'}>验证账号</div>
-                            <div className={'secondary'}>Verify account</div>
-                        </div>
-                        <AntdForm className={'form'} onFinish={handleOnFinish}>
-                            <div className={'no-verify-need'} hidden={needVerify}>
-                                账号已验证通过，无需验证，点击&nbsp;<a href={'/'}>回到首页</a>
-                            </div>
-                            <div
-                                className={'verify-process'}
-                                hidden={!needVerify || !hasCode || !isValid}
-                            >
-                                <div
-                                    style={{
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        marginBottom: 20
-                                    }}
-                                >
-                                    <AntdTooltip title={'点击获取新头像'}>
-                                        <AntdAvatar
-                                            src={
-                                                <img
-                                                    src={`data:image/png;base64,${avatar}`}
-                                                    alt={'Avatar'}
-                                                />
-                                            }
-                                            size={100}
-                                            style={{
-                                                background: COLOR_BACKGROUND,
-                                                cursor: 'pointer'
-                                            }}
-                                            onClick={handleOnChangeAvatar}
-                                        />
-                                    </AntdTooltip>
-                                </div>
-                                <AntdForm.Item hidden name={'avatar'}>
-                                    <AntdInput value={avatar} />
-                                </AntdForm.Item>
-                                <AntdForm.Item
-                                    name={'nickname'}
-                                    rules={[
-                                        { required: true, message: '请输入昵称' },
-                                        { min: 3, message: '昵称至少为3个字符' }
-                                    ]}
-                                >
-                                    <AntdInput
-                                        disabled={isVerifying}
-                                        maxLength={20}
-                                        showCount
-                                        addonBefore={'昵称'}
-                                    />
-                                </AntdForm.Item>
-                                <AntdForm.Item>
-                                    <AntdButton
-                                        style={{ width: '100%' }}
-                                        type={'primary'}
-                                        htmlType={'submit'}
-                                        disabled={isVerifying}
-                                        loading={isVerifying}
-                                    >
-                                        确&ensp;&ensp;&ensp;&ensp;定
-                                    </AntdButton>
-                                </AntdForm.Item>
-                            </div>
-                            <div className={'no-code'} hidden={hasCode}>
-                                在继续使用之前，我们需要确定您的电子邮箱地址的有效性，请点击&nbsp;
-                                <a onClick={handleOnResend}>发送验证邮件</a>
-                            </div>
-                            <div className={'not-valid'} hidden={!hasCode || isValid}>
-                                此链接有误或已失效，请点击&nbsp;
-                                <a onClick={handleOnResend}>重新发送验证邮件</a>
-                            </div>
-                        </AntdForm>
-                    </FlexBox>
-                </FitCenter>
-            </div>
-        </>
-    )
-}
-
-const Forget: React.FC = () => {
-    const navigate = useNavigate()
-    const [searchParams] = useSearchParams()
-    const turnstileRef = useRef<TurnstileInstance>()
-    const retrieveTurnstileRef = useRef<TurnstileInstance>()
-    const [isSending, setIsSending] = useState(false)
-    const [isSent, setIsSent] = useState(false)
-    const [isChanging, setIsChanging] = useState(false)
-    const [isChanged, setIsChanged] = useState(false)
-    const [captchaCode, setCaptchaCode] = useState('')
-    const [retrieveCpatchaCode, setRetrieveCpatchaCode] = useState('')
-
-    useUpdatedEffect(() => {
-        if (location.pathname !== '/forget') {
-            return
-        }
-
-        setTimeout(() => {
-            if (!searchParams.get('code')) {
-                turnstileRef.current?.execute()
-            } else {
-                retrieveTurnstileRef.current?.execute()
-            }
-        }, 200)
-    }, [location.pathname])
-
-    const handleOnSend = (forgetParam: ForgetParam) => {
-        if (isSending) {
-            return
-        }
-        setIsSending(true)
-
-        if (!captchaCode) {
-            void message.warning('请先通过验证')
-            setIsSending(false)
-            return
-        }
-
-        void r_auth_forget({ email: forgetParam.email, captchaCode }).then((res) => {
-            const response = res.data
-            switch (response.code) {
-                case PERMISSION_FORGET_SUCCESS:
-                    void message.success('已发送验证邮件，请查收')
-                    setIsSent(true)
-                    setIsSending(false)
-                    break
-                case PERMISSION_USER_NOT_FOUND:
-                    void message.error('用户不存在')
-                    setIsSending(false)
-                    break
-                case SYSTEM_INVALID_CAPTCHA_CODE:
-                    void message.error('验证码有误，请刷新重试')
-                    break
-                default:
-                    void message.error('出错了，请稍后重试')
-                    setIsSending(false)
-            }
-        })
-    }
-
-    const handleOnRetry = () => {
-        setIsSent(false)
-
-        setTimeout(() => {
-            turnstileRef.current?.execute()
-        }, 200)
-    }
-
-    const handleOnChange = (retrieveParam: RetrieveParam) => {
-        if (isChanging) {
-            return
-        }
-        setIsChanging(true)
-
-        void r_auth_retrieve({
-            code: searchParams.get('code') ?? '',
-            password: retrieveParam.password,
-            captchaCode: retrieveCpatchaCode
-        }).then((res) => {
-            const response = res.data
-
-            switch (response.code) {
-                case PERMISSION_RETRIEVE_SUCCESS:
-                    void message.success('密码已更新')
-                    setIsChanged(true)
-                    setIsChanging(false)
-                    break
-                case PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED:
-                    void message.error('请重新获取邮件')
-                    setIsChanging(false)
-                    break
-                case SYSTEM_INVALID_CAPTCHA_CODE:
-                    void message.error('验证码有误，请刷新重试')
-                    break
-                default:
-                    void message.error('出错了，请稍后重试')
-                    setIsChanging(false)
-            }
-        })
-    }
-
-    return (
-        <div className={'forget'}>
-            <FitCenter>
-                <FlexBox>
-                    <div className={'title'}>
-                        <div className={'primary'}>找回密码</div>
-                        <div className={'secondary'}>Retrieve password</div>
-                    </div>
-                    <div className={'form'}>
-                        {!searchParams.get('code') ? (
-                            !isSent ? (
-                                <>
-                                    <AntdForm autoComplete={'on'} onFinish={handleOnSend}>
-                                        <AntdForm.Item
-                                            name={'email'}
-                                            rules={[
-                                                { required: true, message: '请输入邮箱' },
-                                                { type: 'email', message: '不是有效的邮箱地址' }
-                                            ]}
-                                        >
-                                            <AntdInput
-                                                prefix={<Icon component={IconOxygenEmail} />}
-                                                placeholder={'邮箱'}
-                                                disabled={isSending}
-                                            />
-                                        </AntdForm.Item>
-                                        <AntdForm.Item>
-                                            <Turnstile
-                                                id={'forget-turnstile'}
-                                                ref={turnstileRef}
-                                                siteKey={H_CAPTCHA_SITE_KEY}
-                                                options={{ theme: 'light', execution: 'execute' }}
-                                                onSuccess={setCaptchaCode}
-                                            />
-                                        </AntdForm.Item>
-                                        <AntdForm.Item>
-                                            <AntdButton
-                                                style={{ width: '100%' }}
-                                                type={'primary'}
-                                                htmlType={'submit'}
-                                                disabled={isSending}
-                                                loading={isSending}
-                                            >
-                                                确&ensp;&ensp;&ensp;&ensp;定
-                                            </AntdButton>
-                                        </AntdForm.Item>
-                                    </AntdForm>
-                                </>
-                            ) : (
-                                <div className={'retry'}>
-                                    我们向您发送了一封包含找回密码链接的邮件，如未收到，可能被归为垃圾邮件，请仔细检查。
-                                    <a onClick={handleOnRetry}>重新发送</a>
-                                </div>
-                            )
-                        ) : !isChanged ? (
-                            <>
-                                <AntdForm autoComplete={'on'} onFinish={handleOnChange}>
-                                    <AntdForm.Item
-                                        name={'password'}
-                                        rules={[
-                                            { required: true, message: '请输入密码' },
-                                            { min: 10, message: '密码至少为10位' },
-                                            { max: 30, message: '密码最多为30位' }
-                                        ]}
-                                    >
-                                        <AntdInput.Password
-                                            addonBefore={
-                                                <span>新&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
-                                            }
-                                            placeholder={'密码'}
-                                            disabled={isChanging}
-                                        />
-                                    </AntdForm.Item>
-                                    <AntdForm.Item
-                                        name={'passwordConfirm'}
-                                        rules={[
-                                            { required: true, message: '请确认密码' },
-                                            ({ getFieldValue }) => ({
-                                                validator(_, value) {
-                                                    if (
-                                                        !value ||
-                                                        getFieldValue('password') === value
-                                                    ) {
-                                                        return Promise.resolve()
-                                                    }
-                                                    return Promise.reject(
-                                                        new Error('两次密码输入必须一致')
-                                                    )
-                                                }
-                                            })
-                                        ]}
-                                    >
-                                        <AntdInput.Password
-                                            addonBefore={'确认密码'}
-                                            placeholder={'确认密码'}
-                                            disabled={isChanging}
-                                        />
-                                    </AntdForm.Item>
-                                    <AntdForm.Item>
-                                        <Turnstile
-                                            id={'retrieve-turnstile'}
-                                            ref={retrieveTurnstileRef}
-                                            siteKey={H_CAPTCHA_SITE_KEY}
-                                            options={{ theme: 'light', execution: 'execute' }}
-                                            onSuccess={setRetrieveCpatchaCode}
-                                        />
-                                    </AntdForm.Item>
-                                    <AntdForm.Item>
-                                        <AntdButton
-                                            style={{ width: '100%' }}
-                                            type={'primary'}
-                                            htmlType={'submit'}
-                                            disabled={isChanging}
-                                            loading={isChanging}
-                                        >
-                                            更&ensp;&ensp;&ensp;&ensp;改
-                                        </AntdButton>
-                                    </AntdForm.Item>
-                                </AntdForm>
-                            </>
-                        ) : (
-                            <div className={'success'}>恭喜你，密码已更新，请重新登录。</div>
-                        )}
-
-                        <div className={'footer'}>
-                            找到了？
-                            <a onClick={() => navigate(`/login`, { replace: true })}>登录</a>
-                        </div>
-                    </div>
-                </FlexBox>
-            </FitCenter>
-        </div>
-    )
-}
-
-const SignIn: React.FC = () => {
-    const { refreshRouter } = useContext(AppContext)
-    const navigate = useNavigate()
-    const [searchParams] = useSearchParams()
-    const turnstileRef = useRef<TurnstileInstance>()
-    const [isSigningIn, setIsSigningIn] = useState(false)
-    const [captchaCode, setCaptchaCode] = useState('')
-
-    useUpdatedEffect(() => {
-        if (location.pathname !== '/login') {
-            return
-        }
-        setTimeout(() => {
-            turnstileRef.current?.execute()
-        }, 200)
-    }, [location.pathname])
-
-    const handleOnFinish = (loginParam: LoginParam) => {
-        if (isSigningIn) {
-            return
-        }
-        setIsSigningIn(true)
-
-        if (!captchaCode) {
-            void message.warning('请先通过验证')
-            setIsSigningIn(false)
-            return
-        }
-
-        void r_auth_login({
-            account: loginParam.account,
-            password: loginParam.password,
-            captchaCode
-        })
-            .then((res) => {
-                const response = res.data
-                const { code, data } = response
-                switch (code) {
-                    case PERMISSION_LOGIN_SUCCESS:
-                        setToken(data?.token ?? '')
-                        void message.success('登录成功')
-                        setTimeout(() => {
-                            void getUserInfo().then((user) => {
-                                refreshRouter()
-                                if (searchParams.has('redirect')) {
-                                    navigate(searchParams.get('redirect') ?? '/')
-                                } else {
-                                    navigate('/')
-                                }
-
-                                notification.success({
-                                    message: '欢迎回来',
-                                    description: (
-                                        <>
-                                            <span>
-                                                你好 <strong>{user.userInfo.nickname}</strong>
-                                            </span>
-                                            <br />
-                                            <span>
-                                                最近登录：
-                                                {user.lastLoginTime
-                                                    ? `${utcToLocalTime(user.lastLoginTime)}【${
-                                                          user.lastLoginIp
-                                                      }】`
-                                                    : '无'}
-                                            </span>
-                                        </>
-                                    ),
-                                    placement: 'topRight'
-                                })
-                            })
-                        }, 1500)
-                        break
-                    case PERMISSION_USERNAME_NOT_FOUND:
-                    case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
-                        void message.error(
-                            <>
-                                <strong>账号</strong>或<strong>密码</strong>错误，请重试
-                            </>
-                        )
-                        setIsSigningIn(false)
-                        break
-                    case PERMISSION_USER_DISABLE:
-                        void message.error(
-                            <>
-                                该用户已被<strong>禁用</strong>
-                            </>
-                        )
-                        setIsSigningIn(false)
-                        break
-                    case SYSTEM_INVALID_CAPTCHA_CODE:
-                        void message.error('验证码有误，请刷新重试')
-                        break
-                    default:
-                        void message.error(
-                            <>
-                                <strong>服务器出错了</strong>
-                            </>
-                        )
-                        setIsSigningIn(false)
-                }
-            })
-            .catch(() => {
-                setIsSigningIn(false)
-            })
-    }
-
-    return (
-        <div className={'sign-in'}>
-            <FitCenter>
-                <FlexBox>
-                    <div className={'title'}>
-                        <div className={'primary'}>欢迎回来</div>
-                        <div className={'secondary'}>Welcome back</div>
-                    </div>
-                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
-                        <AntdForm.Item
-                            name={'account'}
-                            rules={[{ required: true, message: '请输入账号' }]}
-                        >
-                            <AntdInput
-                                prefix={<Icon component={IconOxygenUser} />}
-                                placeholder={'邮箱/用户名'}
-                                disabled={isSigningIn}
-                            />
-                        </AntdForm.Item>
-                        <AntdForm.Item
-                            name={'password'}
-                            rules={[{ required: true, message: '请输入密码' }]}
-                        >
-                            <AntdInput.Password
-                                prefix={<Icon component={IconOxygenPassword} />}
-                                placeholder={'密码'}
-                                disabled={isSigningIn}
-                            />
-                        </AntdForm.Item>
-                        <AntdForm.Item>
-                            <Turnstile
-                                id={'sign-in-turnstile'}
-                                ref={turnstileRef}
-                                siteKey={H_CAPTCHA_SITE_KEY}
-                                options={{ theme: 'light', execution: 'execute' }}
-                                onSuccess={setCaptchaCode}
-                            />
-                        </AntdForm.Item>
-                        <FlexBox direction={'horizontal'} className={'addition'}>
-                            <AntdCheckbox disabled={isSigningIn}>记住密码</AntdCheckbox>
-                            <a
-                                onClick={() => {
-                                    navigate(`/forget${location.search}`, { replace: true })
-                                }}
-                            >
-                                忘记密码？
-                            </a>
-                        </FlexBox>
-                        <AntdForm.Item>
-                            <AntdButton
-                                style={{ width: '100%' }}
-                                type={'primary'}
-                                htmlType={'submit'}
-                                disabled={isSigningIn}
-                                loading={isSigningIn}
-                            >
-                                登&ensp;&ensp;&ensp;&ensp;录
-                            </AntdButton>
-                        </AntdForm.Item>
-                        <div className={'footer'}>
-                            还没有账号？
-                            <a
-                                onClick={() =>
-                                    navigate(`/register${location.search}`, { replace: true })
-                                }
-                            >
-                                注册
-                            </a>
-                        </div>
-                    </AntdForm>
-                </FlexBox>
-            </FitCenter>
-        </div>
-    )
-}
-
-const Sign: React.FC = () => {
-    const lastPage = useRef('none')
-    const currentPage = useRef('none')
-    const match = useMatches().reduce((_, second) => second)
-    const [isSwitch, setIsSwitch] = useState(false)
-
-    const leftPage = ['register', 'verify', 'forget']
-
-    useUpdatedEffect(() => {
-        lastPage.current = currentPage.current
-        currentPage.current = match.id
-
-        setIsSwitch(leftPage.includes(currentPage.current))
-    }, [match.id])
-
-    const leftComponent = () => {
-        switch (leftPage.includes(currentPage.current) ? currentPage.current : lastPage.current) {
-            case 'forget':
-                return <Forget />
-            case 'verify':
-                return <Verify />
-            default:
-                return <SignUp />
-        }
-    }
-
-    const rightComponent = () => {
-        switch (leftPage.includes(currentPage.current) ? lastPage.current : currentPage.current) {
-            default:
-                return <SignIn />
-        }
-    }
-
-    return (
-        <>
-            <FitFullscreen data-component={'sign'}>
-                <FitCenter>
-                    <FlexBox
-                        direction={'horizontal'}
-                        className={`sign-box${isSwitch ? ' switch' : ''}`}
-                    >
-                        <div className={`left${!isSwitch ? ' hidden' : ''}`}>{leftComponent()}</div>
-                        <div className={`right${isSwitch ? ' hidden' : ''}`}>
-                            {rightComponent()}
-                        </div>
-                        <FlexBox className={'cover'}>
-                            <div className={'ball-box'}>
-                                <div className={'ball'} />
-                            </div>
-                            <div className={'ball-box'}>
-                                <div className={'mask'}>
-                                    <div className={'ball'} />
-                                </div>
-                            </div>
-                        </FlexBox>
-                    </FlexBox>
-                </FitCenter>
-            </FitFullscreen>
-        </>
-    )
-}
-
-export default Sign
diff --git a/src/pages/sign/Forget.tsx b/src/pages/sign/Forget.tsx
new file mode 100644
index 0000000..a307f2b
--- /dev/null
+++ b/src/pages/sign/Forget.tsx
@@ -0,0 +1,271 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
+import {
+    H_CAPTCHA_SITE_KEY,
+    PERMISSION_FORGET_SUCCESS,
+    PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED,
+    PERMISSION_RETRIEVE_SUCCESS,
+    PERMISSION_USER_NOT_FOUND,
+    SYSTEM_INVALID_CAPTCHA_CODE
+} from '@/constants/common.constants'
+import { useUpdatedEffect } from '@/util/hooks'
+import { r_auth_forget, r_auth_retrieve } from '@/services/auth'
+import FitCenter from '@/components/common/FitCenter'
+import FlexBox from '@/components/common/FlexBox'
+
+const Forget: React.FC = () => {
+    const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
+    const turnstileRef = useRef<TurnstileInstance>()
+    const retrieveTurnstileRef = useRef<TurnstileInstance>()
+    const [isSending, setIsSending] = useState(false)
+    const [isSent, setIsSent] = useState(false)
+    const [isChanging, setIsChanging] = useState(false)
+    const [isChanged, setIsChanged] = useState(false)
+    const [captchaCode, setCaptchaCode] = useState('')
+    const [retrieveCaptchaCode, setRetrieveCaptchaCode] = useState('')
+
+    useUpdatedEffect(() => {
+        if (!isSending) {
+            setCaptchaCode('')
+            turnstileRef.current?.reset()
+            turnstileRef.current?.execute()
+        }
+    }, [isSending])
+
+    useUpdatedEffect(() => {
+        if (!isChanging) {
+            setRetrieveCaptchaCode('')
+            retrieveTurnstileRef.current?.reset()
+            retrieveTurnstileRef.current?.execute()
+        }
+    }, [isChanging])
+
+    useUpdatedEffect(() => {
+        if (location.pathname !== '/forget') {
+            return
+        }
+
+        setTimeout(() => {
+            if (!searchParams.get('code')) {
+                turnstileRef.current?.execute()
+            } else {
+                retrieveTurnstileRef.current?.execute()
+            }
+        }, 500)
+    }, [location.pathname])
+
+    const handleOnSend = (forgetParam: ForgetParam) => {
+        if (isSending) {
+            return
+        }
+        setIsSending(true)
+
+        if (!captchaCode) {
+            void message.warning('请先通过验证')
+            setIsSending(false)
+            return
+        }
+
+        void r_auth_forget({ email: forgetParam.email, captchaCode })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case PERMISSION_FORGET_SUCCESS:
+                        void message.success('已发送验证邮件，请查收')
+                        setIsSent(true)
+                        break
+                    case PERMISSION_USER_NOT_FOUND:
+                        void message.error('用户不存在')
+                        break
+                    case SYSTEM_INVALID_CAPTCHA_CODE:
+                        void message.error('验证码有误，请重试')
+                        break
+                    default:
+                        void message.error('出错了，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsSending(false)
+            })
+    }
+
+    const handleOnRetry = () => {
+        setIsSent(false)
+
+        setTimeout(() => {
+            turnstileRef.current?.execute()
+        }, 500)
+    }
+
+    const handleOnChange = (retrieveParam: RetrieveParam) => {
+        if (isChanging) {
+            return
+        }
+        setIsChanging(true)
+
+        void r_auth_retrieve({
+            code: searchParams.get('code') ?? '',
+            password: retrieveParam.password,
+            captchaCode: retrieveCaptchaCode
+        })
+            .then((res) => {
+                const response = res.data
+
+                switch (response.code) {
+                    case PERMISSION_RETRIEVE_SUCCESS:
+                        void message.success('密码已更新')
+                        setIsChanged(true)
+                        break
+                    case PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED:
+                        void message.error('请重新获取邮件')
+                        break
+                    case SYSTEM_INVALID_CAPTCHA_CODE:
+                        void message.error('验证码有误，请重试')
+                        break
+                    default:
+                        void message.error('出错了，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsChanging(false)
+            })
+    }
+
+    return (
+        <div className={'forget'}>
+            <FitCenter>
+                <FlexBox>
+                    <div className={'title'}>
+                        <div className={'primary'}>找回密码</div>
+                        <div className={'secondary'}>Retrieve password</div>
+                    </div>
+                    <div className={'form'}>
+                        {!searchParams.get('code') ? (
+                            !isSent ? (
+                                <>
+                                    <AntdForm autoComplete={'on'} onFinish={handleOnSend}>
+                                        <AntdForm.Item
+                                            name={'email'}
+                                            rules={[
+                                                { required: true, message: '请输入邮箱' },
+                                                { type: 'email', message: '不是有效的邮箱地址' }
+                                            ]}
+                                        >
+                                            <AntdInput
+                                                prefix={<Icon component={IconOxygenEmail} />}
+                                                placeholder={'邮箱'}
+                                                disabled={isSending}
+                                            />
+                                        </AntdForm.Item>
+                                        <AntdForm.Item>
+                                            <Turnstile
+                                                id={'forget-turnstile'}
+                                                ref={turnstileRef}
+                                                siteKey={H_CAPTCHA_SITE_KEY}
+                                                options={{ theme: 'light', execution: 'execute' }}
+                                                onSuccess={setCaptchaCode}
+                                            />
+                                        </AntdForm.Item>
+                                        <AntdForm.Item>
+                                            <AntdButton
+                                                style={{ width: '100%' }}
+                                                type={'primary'}
+                                                htmlType={'submit'}
+                                                disabled={isSending}
+                                                loading={isSending}
+                                            >
+                                                确&ensp;&ensp;&ensp;&ensp;定
+                                            </AntdButton>
+                                        </AntdForm.Item>
+                                    </AntdForm>
+                                </>
+                            ) : (
+                                <div className={'retry'}>
+                                    我们向您发送了一封包含找回密码链接的邮件，如未收到，可能被归为垃圾邮件，请仔细检查。
+                                    <a onClick={handleOnRetry}>重新发送</a>
+                                </div>
+                            )
+                        ) : !isChanged ? (
+                            <>
+                                <AntdForm autoComplete={'on'} onFinish={handleOnChange}>
+                                    <AntdForm.Item
+                                        name={'password'}
+                                        rules={[
+                                            { required: true, message: '请输入密码' },
+                                            { min: 10, message: '密码至少为10位' },
+                                            { max: 30, message: '密码最多为30位' }
+                                        ]}
+                                    >
+                                        <AntdInput.Password
+                                            addonBefore={
+                                                <span>新&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
+                                            }
+                                            placeholder={'密码'}
+                                            disabled={isChanging}
+                                        />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item
+                                        name={'passwordConfirm'}
+                                        rules={[
+                                            { required: true, message: '请确认密码' },
+                                            ({ getFieldValue }) => ({
+                                                validator(_, value) {
+                                                    if (
+                                                        !value ||
+                                                        getFieldValue('password') === value
+                                                    ) {
+                                                        return Promise.resolve()
+                                                    }
+                                                    return Promise.reject(
+                                                        new Error('两次密码输入必须一致')
+                                                    )
+                                                }
+                                            })
+                                        ]}
+                                    >
+                                        <AntdInput.Password
+                                            addonBefore={'确认密码'}
+                                            placeholder={'确认密码'}
+                                            disabled={isChanging}
+                                        />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item>
+                                        <Turnstile
+                                            id={'retrieve-turnstile'}
+                                            ref={retrieveTurnstileRef}
+                                            siteKey={H_CAPTCHA_SITE_KEY}
+                                            options={{ theme: 'light', execution: 'execute' }}
+                                            onSuccess={setRetrieveCaptchaCode}
+                                        />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item>
+                                        <AntdButton
+                                            style={{ width: '100%' }}
+                                            type={'primary'}
+                                            htmlType={'submit'}
+                                            disabled={isChanging}
+                                            loading={isChanging}
+                                        >
+                                            更&ensp;&ensp;&ensp;&ensp;改
+                                        </AntdButton>
+                                    </AntdForm.Item>
+                                </AntdForm>
+                            </>
+                        ) : (
+                            <div className={'success'}>恭喜你，密码已更新，请重新登录。</div>
+                        )}
+
+                        <div className={'footer'}>
+                            找到了？
+                            <a onClick={() => navigate(`/login`, { replace: true })}>登录</a>
+                        </div>
+                    </div>
+                </FlexBox>
+            </FitCenter>
+        </div>
+    )
+}
+
+export default Forget
diff --git a/src/pages/sign/SignIn.tsx b/src/pages/sign/SignIn.tsx
new file mode 100644
index 0000000..ae1b0aa
--- /dev/null
+++ b/src/pages/sign/SignIn.tsx
@@ -0,0 +1,212 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
+import {
+    H_CAPTCHA_SITE_KEY,
+    PERMISSION_LOGIN_SUCCESS,
+    PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
+    PERMISSION_USER_DISABLE,
+    PERMISSION_USERNAME_NOT_FOUND,
+    SYSTEM_INVALID_CAPTCHA_CODE
+} from '@/constants/common.constants'
+import { useUpdatedEffect } from '@/util/hooks'
+import { getUserInfo, setToken } from '@/util/auth'
+import { utcToLocalTime } from '@/util/datetime'
+import { r_auth_login } from '@/services/auth'
+import { AppContext } from '@/App'
+import FitCenter from '@/components/common/FitCenter'
+import FlexBox from '@/components/common/FlexBox'
+
+const SignIn: React.FC = () => {
+    const { refreshRouter } = useContext(AppContext)
+    const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
+    const turnstileRef = useRef<TurnstileInstance>()
+    const [isSigningIn, setIsSigningIn] = useState(false)
+    const [captchaCode, setCaptchaCode] = useState('')
+
+    useUpdatedEffect(() => {
+        if (!isSigningIn) {
+            setCaptchaCode('')
+            turnstileRef.current?.reset()
+            turnstileRef.current?.execute()
+        }
+    }, [isSigningIn])
+
+    useUpdatedEffect(() => {
+        if (location.pathname !== '/login') {
+            return
+        }
+        setTimeout(() => {
+            turnstileRef.current?.execute()
+        }, 500)
+    }, [turnstileRef])
+
+    const handleOnFinish = (loginParam: LoginParam) => {
+        if (isSigningIn) {
+            return
+        }
+        setIsSigningIn(true)
+
+        if (!captchaCode) {
+            void message.warning('请先通过验证')
+            setIsSigningIn(false)
+            return
+        }
+
+        void r_auth_login({
+            account: loginParam.account,
+            password: loginParam.password,
+            captchaCode
+        })
+            .then((res) => {
+                const response = res.data
+                const { code, data } = response
+                switch (code) {
+                    case PERMISSION_LOGIN_SUCCESS:
+                        setToken(data?.token ?? '')
+                        void message.success('登录成功')
+                        setTimeout(() => {
+                            void getUserInfo().then((user) => {
+                                refreshRouter()
+                                if (searchParams.has('redirect')) {
+                                    navigate(searchParams.get('redirect') ?? '/')
+                                } else {
+                                    navigate('/')
+                                }
+
+                                notification.success({
+                                    message: '欢迎回来',
+                                    description: (
+                                        <>
+                                            <span>
+                                                你好 <strong>{user.userInfo.nickname}</strong>
+                                            </span>
+                                            <br />
+                                            <span>
+                                                最近登录：
+                                                {user.lastLoginTime
+                                                    ? `${utcToLocalTime(user.lastLoginTime)}【${
+                                                          user.lastLoginIp
+                                                      }】`
+                                                    : '无'}
+                                            </span>
+                                        </>
+                                    ),
+                                    placement: 'topRight'
+                                })
+                            })
+                        }, 1500)
+                        break
+                    case PERMISSION_USERNAME_NOT_FOUND:
+                    case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
+                        void message.error(
+                            <>
+                                <strong>账号</strong>或<strong>密码</strong>错误，请重试
+                            </>
+                        )
+                        setIsSigningIn(false)
+                        break
+                    case PERMISSION_USER_DISABLE:
+                        void message.error(
+                            <>
+                                该用户已被<strong>禁用</strong>
+                            </>
+                        )
+                        setIsSigningIn(false)
+                        break
+                    case SYSTEM_INVALID_CAPTCHA_CODE:
+                        void message.error('验证码有误，请重试')
+                        setIsSigningIn(false)
+                        break
+                    default:
+                        void message.error(
+                            <>
+                                <strong>服务器出错了</strong>
+                            </>
+                        )
+                        setIsSigningIn(false)
+                }
+            })
+            .catch(() => {
+                setIsSigningIn(false)
+            })
+    }
+
+    return (
+        <div className={'sign-in'}>
+            <FitCenter>
+                <FlexBox>
+                    <div className={'title'}>
+                        <div className={'primary'}>欢迎回来</div>
+                        <div className={'secondary'}>Welcome back</div>
+                    </div>
+                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
+                        <AntdForm.Item
+                            name={'account'}
+                            rules={[{ required: true, message: '请输入账号' }]}
+                        >
+                            <AntdInput
+                                prefix={<Icon component={IconOxygenUser} />}
+                                placeholder={'邮箱/用户名'}
+                                disabled={isSigningIn}
+                            />
+                        </AntdForm.Item>
+                        <AntdForm.Item
+                            name={'password'}
+                            rules={[{ required: true, message: '请输入密码' }]}
+                        >
+                            <AntdInput.Password
+                                prefix={<Icon component={IconOxygenPassword} />}
+                                placeholder={'密码'}
+                                disabled={isSigningIn}
+                            />
+                        </AntdForm.Item>
+                        <AntdForm.Item>
+                            <Turnstile
+                                id={'sign-in-turnstile'}
+                                ref={turnstileRef}
+                                siteKey={H_CAPTCHA_SITE_KEY}
+                                options={{ theme: 'light', execution: 'execute' }}
+                                onSuccess={setCaptchaCode}
+                            />
+                        </AntdForm.Item>
+                        <FlexBox direction={'horizontal'} className={'addition'}>
+                            <AntdCheckbox disabled={isSigningIn}>记住密码</AntdCheckbox>
+                            <a
+                                onClick={() => {
+                                    navigate(`/forget${location.search}`, { replace: true })
+                                }}
+                            >
+                                忘记密码？
+                            </a>
+                        </FlexBox>
+                        <AntdForm.Item>
+                            <AntdButton
+                                style={{ width: '100%' }}
+                                type={'primary'}
+                                htmlType={'submit'}
+                                disabled={isSigningIn}
+                                loading={isSigningIn}
+                            >
+                                登&ensp;&ensp;&ensp;&ensp;录
+                            </AntdButton>
+                        </AntdForm.Item>
+                        <div className={'footer'}>
+                            还没有账号？
+                            <a
+                                onClick={() =>
+                                    navigate(`/register${location.search}`, { replace: true })
+                                }
+                            >
+                                注册
+                            </a>
+                        </div>
+                    </AntdForm>
+                </FlexBox>
+            </FitCenter>
+        </div>
+    )
+}
+
+export default SignIn
diff --git a/src/pages/sign/SignUp.tsx b/src/pages/sign/SignUp.tsx
new file mode 100644
index 0000000..536ae28
--- /dev/null
+++ b/src/pages/sign/SignUp.tsx
@@ -0,0 +1,237 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
+import {
+    DATABASE_DUPLICATE_KEY,
+    H_CAPTCHA_SITE_KEY,
+    PERMISSION_REGISTER_SUCCESS,
+    SYSTEM_INVALID_CAPTCHA_CODE
+} from '@/constants/common.constants'
+import { useUpdatedEffect } from '@/util/hooks'
+import { getLoginStatus, setToken } from '@/util/auth'
+import { r_auth_register, r_auth_resend } from '@/services/auth'
+import FitCenter from '@/components/common/FitCenter'
+import FlexBox from '@/components/common/FlexBox'
+
+const SignUp: React.FC = () => {
+    const location = useLocation()
+    const navigate = useNavigate()
+    const turnstileRef = useRef<TurnstileInstance>()
+    const [isSigningUp, setIsSigningUp] = useState(false)
+    const [isFinish, setIsFinish] = useState(false)
+    const [isSending, setIsSending] = useState(false)
+    const [captchaCode, setCaptchaCode] = useState('')
+
+    useUpdatedEffect(() => {
+        if (!isSigningUp) {
+            setCaptchaCode('')
+            turnstileRef.current?.reset()
+            turnstileRef.current?.execute()
+        }
+    }, [isSigningUp])
+
+    useUpdatedEffect(() => {
+        if (location.pathname !== '/register') {
+            return
+        }
+        if (getLoginStatus()) {
+            navigate(`/login${location.search}`, {
+                replace: true
+            })
+        }
+        setTimeout(() => {
+            turnstileRef.current?.execute()
+        }, 500)
+    }, [location.pathname])
+
+    const handleOnFinish = (registerParam: RegisterParam) => {
+        if (isSigningUp) {
+            return
+        }
+        setIsSigningUp(true)
+
+        if (!captchaCode) {
+            void message.warning('请先通过验证')
+            setIsSigningUp(false)
+            return
+        }
+
+        void r_auth_register({
+            username: registerParam.username,
+            email: registerParam.email,
+            password: registerParam.password,
+            captchaCode
+        })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case PERMISSION_REGISTER_SUCCESS:
+                        setToken(response.data?.token ?? '')
+                        void message.success('恭喜，您快要完成注册了')
+                        setIsFinish(true)
+                        break
+                    case DATABASE_DUPLICATE_KEY:
+                        void message.error('用户名或邮箱已被注册，请重试')
+                        setIsSigningUp(false)
+                        break
+                    case SYSTEM_INVALID_CAPTCHA_CODE:
+                        void message.error('验证码有误，请重试')
+                        setIsSigningUp(false)
+                        break
+                    default:
+                        void message.error('服务器出错了，请稍后重试')
+                        setIsSigningUp(false)
+                }
+            })
+            .catch(() => {
+                setIsSigningUp(false)
+            })
+    }
+
+    const handleOnResend = () => {
+        if (isSending) {
+            return
+        }
+        setIsSending(true)
+        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
+        void r_auth_resend()
+            .then((res) => {
+                const response = res.data
+                if (response.success) {
+                    void message.success('已发送验证邮件，请查收')
+                } else {
+                    void message.error('出错了，请稍后重试')
+                }
+            })
+            .finally(() => {
+                message.destroy('sending')
+                setIsSending(false)
+            })
+    }
+
+    return (
+        <div className={'sign-up'}>
+            <FitCenter>
+                <FlexBox>
+                    <div className={'title'}>
+                        <div className={'primary'}>创建账号</div>
+                        <div className={'secondary'}>Create account</div>
+                    </div>
+                    <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
+                        {!isFinish ? (
+                            <>
+                                <AntdForm.Item
+                                    name={'username'}
+                                    rules={[
+                                        { required: true, message: '请输入用户名' },
+                                        {
+                                            pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,38}$/,
+                                            message:
+                                                '只能包含字母、数字、连字符和下划线，不能以数字开头'
+                                        }
+                                    ]}
+                                >
+                                    <AntdInput
+                                        prefix={<Icon component={IconOxygenUser} />}
+                                        placeholder={'用户名'}
+                                        maxLength={39}
+                                        showCount={true}
+                                        disabled={isSigningUp}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item
+                                    name={'email'}
+                                    rules={[
+                                        { required: true, message: '请输入邮箱' },
+                                        { type: 'email', message: '不是有效的邮箱地址' }
+                                    ]}
+                                >
+                                    <AntdInput
+                                        type={'email'}
+                                        prefix={<Icon component={IconOxygenEmail} />}
+                                        placeholder={'邮箱'}
+                                        disabled={isSigningUp}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item
+                                    name={'password'}
+                                    rules={[
+                                        { required: true, message: '请输入密码' },
+                                        { min: 10, message: '密码至少为10位' },
+                                        { max: 30, message: '密码最多为30位' }
+                                    ]}
+                                >
+                                    <AntdInput.Password
+                                        prefix={<Icon component={IconOxygenPassword} />}
+                                        placeholder={'密码'}
+                                        disabled={isSigningUp}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item
+                                    name={'passwordConfirm'}
+                                    rules={[
+                                        { required: true, message: '请确认密码' },
+                                        ({ getFieldValue }) => ({
+                                            validator(_, value) {
+                                                if (!value || getFieldValue('password') === value) {
+                                                    return Promise.resolve()
+                                                }
+                                                return Promise.reject(
+                                                    new Error('两次密码输入必须一致')
+                                                )
+                                            }
+                                        })
+                                    ]}
+                                >
+                                    <AntdInput.Password
+                                        prefix={<Icon component={IconOxygenPassword} />}
+                                        placeholder={'确认密码'}
+                                        disabled={isSigningUp}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item>
+                                    <Turnstile
+                                        id={'sign-up-turnstile'}
+                                        ref={turnstileRef}
+                                        siteKey={H_CAPTCHA_SITE_KEY}
+                                        options={{ theme: 'light', execution: 'execute' }}
+                                        onSuccess={setCaptchaCode}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item>
+                                    <AntdButton
+                                        style={{ width: '100%' }}
+                                        type={'primary'}
+                                        htmlType={'submit'}
+                                        disabled={isSigningUp}
+                                        loading={isSigningUp}
+                                    >
+                                        注&ensp;&ensp;&ensp;&ensp;册
+                                    </AntdButton>
+                                </AntdForm.Item>
+                            </>
+                        ) : (
+                            <div className={'retry'}>
+                                我们发送了一封包含验证账号链接的邮件到您的邮箱里，如未收到，可能被归为垃圾邮件，请仔细检查。
+                                <a onClick={handleOnResend}>重新发送</a>
+                            </div>
+                        )}
+
+                        <div className={'footer'} hidden={isFinish}>
+                            已有账号？
+                            <a
+                                onClick={() =>
+                                    navigate(`/login${location.search}`, { replace: true })
+                                }
+                            >
+                                登录
+                            </a>
+                        </div>
+                    </AntdForm>
+                </FlexBox>
+            </FitCenter>
+        </div>
+    )
+}
+
+export default SignUp
diff --git a/src/pages/sign/Verify.tsx b/src/pages/sign/Verify.tsx
new file mode 100644
index 0000000..17c0618
--- /dev/null
+++ b/src/pages/sign/Verify.tsx
@@ -0,0 +1,223 @@
+import React from 'react'
+import {
+    COLOR_BACKGROUND,
+    PERMISSION_ACCOUNT_NEED_INIT,
+    PERMISSION_NO_VERIFICATION_REQUIRED
+} from '@/constants/common.constants'
+import { useUpdatedEffect } from '@/util/hooks'
+import { getLoginStatus, getUserInfo, requestUserInfo } from '@/util/auth'
+import { getRedirectUrl } from '@/util/route'
+import { r_auth_resend, r_auth_verify } from '@/services/auth'
+import { r_api_avatar_random_base64 } from '@/services/api/avatar'
+import { AppContext } from '@/App'
+import FitCenter from '@/components/common/FitCenter'
+import FlexBox from '@/components/common/FlexBox'
+
+const Verify: React.FC = () => {
+    const { refreshRouter } = useContext(AppContext)
+    const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
+    const [hasCode, setHasCode] = useState(true)
+    const [needVerify, setNeedVerify] = useState(true)
+    const [isValid, setIsValid] = useState(true)
+    const [isSending, setIsSending] = useState(false)
+    const [isGettingAvatar, setIsGettingAvatar] = useState(false)
+    const [avatar, setAvatar] = useState('')
+    const [isVerifying, setIsVerifying] = useState(false)
+
+    useUpdatedEffect(() => {
+        if (location.pathname !== '/verify') {
+            return
+        }
+
+        if (!getLoginStatus()) {
+            navigate(getRedirectUrl('/login', `${location.pathname}${location.search}`), {
+                replace: true
+            })
+            return
+        }
+
+        const code = searchParams.get('code')
+
+        if (!code) {
+            setHasCode(false)
+            return
+        }
+        void r_auth_verify({ code })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case PERMISSION_ACCOUNT_NEED_INIT:
+                        void getUserInfo().then((user) => {
+                            setAvatar(user.userInfo.avatar)
+                        })
+                        break
+                    case PERMISSION_NO_VERIFICATION_REQUIRED:
+                        void message.success('无需验证')
+                        setNeedVerify(false)
+                        break
+                    default:
+                        setIsValid(false)
+                }
+            })
+            .catch(() => {
+                setIsValid(false)
+            })
+    }, [location.pathname])
+
+    const handleOnResend = () => {
+        if (isSending) {
+            return
+        }
+        setIsSending(true)
+        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
+        void r_auth_resend()
+            .then((res) => {
+                const response = res.data
+                if (response.success) {
+                    void message.success('已发送验证邮件，请查收')
+                } else {
+                    void message.error('出错了，请稍后重试')
+                }
+            })
+            .finally(() => {
+                message.destroy('sending')
+                setIsSending(false)
+            })
+    }
+
+    const handleOnChangeAvatar = () => {
+        if (isGettingAvatar) {
+            return
+        }
+        setIsGettingAvatar(true)
+        void r_api_avatar_random_base64()
+            .then((res) => {
+                const response = res.data
+                if (response.success) {
+                    response.data?.base64 && setAvatar(response.data.base64)
+                }
+            })
+            .finally(() => {
+                setIsGettingAvatar(false)
+            })
+    }
+
+    const handleOnFinish = (verifyParam: VerifyParam) => {
+        if (isVerifying) {
+            return
+        }
+        setIsVerifying(true)
+
+        void r_auth_verify({
+            code: searchParams.get('code') ?? '',
+            avatar,
+            nickname: verifyParam.nickname
+        }).then((res) => {
+            const response = res.data
+            if (response.success) {
+                void message.success('恭喜你，完成了')
+                setTimeout(() => {
+                    void requestUserInfo().then(() => {
+                        refreshRouter()
+                        if (searchParams.has('redirect')) {
+                            navigate(searchParams.get('redirect') ?? '/')
+                        } else {
+                            navigate('/')
+                        }
+                    })
+                }, 1500)
+            } else {
+                void message.error('出错了，请稍后重试')
+                setIsVerifying(false)
+            }
+        })
+    }
+
+    return (
+        <>
+            <div className={'verify'}>
+                <FitCenter>
+                    <FlexBox>
+                        <div className={'title'}>
+                            <div className={'primary'}>验证账号</div>
+                            <div className={'secondary'}>Verify account</div>
+                        </div>
+                        <AntdForm className={'form'} onFinish={handleOnFinish}>
+                            <div className={'no-verify-need'} hidden={needVerify}>
+                                账号已验证通过，无需验证，点击&nbsp;<a href={'/'}>回到首页</a>
+                            </div>
+                            <div
+                                className={'verify-process'}
+                                hidden={!needVerify || !hasCode || !isValid}
+                            >
+                                <div
+                                    style={{
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        marginBottom: 20
+                                    }}
+                                >
+                                    <AntdTooltip title={'点击获取新头像'}>
+                                        <AntdAvatar
+                                            src={
+                                                <img
+                                                    src={`data:image/png;base64,${avatar}`}
+                                                    alt={'Avatar'}
+                                                />
+                                            }
+                                            size={100}
+                                            style={{
+                                                background: COLOR_BACKGROUND,
+                                                cursor: 'pointer'
+                                            }}
+                                            onClick={handleOnChangeAvatar}
+                                        />
+                                    </AntdTooltip>
+                                </div>
+                                <AntdForm.Item hidden name={'avatar'}>
+                                    <AntdInput value={avatar} />
+                                </AntdForm.Item>
+                                <AntdForm.Item
+                                    name={'nickname'}
+                                    rules={[
+                                        { required: true, message: '请输入昵称' },
+                                        { min: 3, message: '昵称至少为3个字符' }
+                                    ]}
+                                >
+                                    <AntdInput
+                                        disabled={isVerifying}
+                                        maxLength={20}
+                                        showCount
+                                        addonBefore={'昵称'}
+                                    />
+                                </AntdForm.Item>
+                                <AntdForm.Item>
+                                    <AntdButton
+                                        style={{ width: '100%' }}
+                                        type={'primary'}
+                                        htmlType={'submit'}
+                                        disabled={isVerifying}
+                                        loading={isVerifying}
+                                    >
+                                        确&ensp;&ensp;&ensp;&ensp;定
+                                    </AntdButton>
+                                </AntdForm.Item>
+                            </div>
+                            <div className={'no-code'} hidden={hasCode}>
+                                在继续使用之前，我们需要确定您的电子邮箱地址的有效性，请点击&nbsp;
+                                <a onClick={handleOnResend}>发送验证邮件</a>
+                            </div>
+                            <div className={'not-valid'} hidden={!hasCode || isValid}>
+                                此链接有误或已失效，请点击&nbsp;
+                                <a onClick={handleOnResend}>重新发送验证邮件</a>
+                            </div>
+                        </AntdForm>
+                    </FlexBox>
+                </FitCenter>
+            </div>
+        </>
+    )
+}
+
+export default Verify
diff --git a/src/pages/sign/index.tsx b/src/pages/sign/index.tsx
new file mode 100644
index 0000000..476acc8
--- /dev/null
+++ b/src/pages/sign/index.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import '@/assets/css/pages/sign.scss'
+import { useUpdatedEffect } from '@/util/hooks'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import FitCenter from '@/components/common/FitCenter'
+import FlexBox from '@/components/common/FlexBox'
+import SignUp from '@/pages/sign/SignUp'
+import Verify from '@/pages/sign/Verify'
+import Forget from '@/pages/sign/Forget'
+import SignIn from '@/pages/sign/SignIn'
+
+const Sign: React.FC = () => {
+    const lastPage = useRef('none')
+    const currentPage = useRef('none')
+    const match = useMatches().reduce((_, second) => second)
+    const [isSwitch, setIsSwitch] = useState(false)
+
+    const leftPage = ['register', 'verify', 'forget']
+
+    useUpdatedEffect(() => {
+        lastPage.current = currentPage.current
+        currentPage.current = match.id
+
+        setIsSwitch(leftPage.includes(currentPage.current))
+    }, [match.id])
+
+    const leftComponent = () => {
+        switch (leftPage.includes(currentPage.current) ? currentPage.current : lastPage.current) {
+            case 'forget':
+                return <Forget />
+            case 'verify':
+                return <Verify />
+            default:
+                return <SignUp />
+        }
+    }
+
+    const rightComponent = () => {
+        switch (leftPage.includes(currentPage.current) ? lastPage.current : currentPage.current) {
+            default:
+                return <SignIn />
+        }
+    }
+
+    return (
+        <>
+            <FitFullscreen data-component={'sign'}>
+                <FitCenter>
+                    <FlexBox
+                        direction={'horizontal'}
+                        className={`sign-box${isSwitch ? ' switch' : ''}`}
+                    >
+                        <div className={`left${!isSwitch ? ' hidden' : ''}`}>{leftComponent()}</div>
+                        <div className={`right${isSwitch ? ' hidden' : ''}`}>
+                            {rightComponent()}
+                        </div>
+                        <FlexBox className={'cover'}>
+                            <div className={'ball-box'}>
+                                <div className={'ball'} />
+                            </div>
+                            <div className={'ball-box'}>
+                                <div className={'mask'}>
+                                    <div className={'ball'} />
+                                </div>
+                            </div>
+                        </FlexBox>
+                    </FlexBox>
+                </FitCenter>
+            </FitFullscreen>
+        </>
+    )
+}
+
+export default Sign
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 84716ac..c5aac51 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -5,7 +5,7 @@ import user from '@/router/user'
 import tools from '@/router/tools'
 import { getAuthRoute, mapJsonToRoute, setTitle } from '@/util/route'
 
-const lazySignPage = React.lazy(() => import('@/pages/Sign'))
+const lazySignPage = React.lazy(() => import('@/pages/sign'))
 
 const root: RouteJsonObject[] = [
     {

From d67aea289589d69ae90de093e1c2709c1a112d12 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 3 Jan 2024 13:48:04 +0800
Subject: [PATCH 149/307] Optimize statistics page code

---
 src/pages/system/Statistics.tsx              | 993 -------------------
 src/pages/system/statistics/ActiveInfo.tsx   | 192 ++++
 src/pages/system/statistics/CPUInfo.tsx      | 182 ++++
 src/pages/system/statistics/HardwareInfo.tsx |  65 ++
 src/pages/system/statistics/OnlineInfo.tsx   | 149 +++
 src/pages/system/statistics/SoftwareInfo.tsx |  70 ++
 src/pages/system/statistics/StorageInfo.tsx  | 201 ++++
 src/pages/system/statistics/index.tsx        |  69 ++
 src/pages/system/statistics/shared.ts        | 128 +++
 src/router/system.tsx                        |   2 +-
 10 files changed, 1057 insertions(+), 994 deletions(-)
 delete mode 100644 src/pages/system/Statistics.tsx
 create mode 100644 src/pages/system/statistics/ActiveInfo.tsx
 create mode 100644 src/pages/system/statistics/CPUInfo.tsx
 create mode 100644 src/pages/system/statistics/HardwareInfo.tsx
 create mode 100644 src/pages/system/statistics/OnlineInfo.tsx
 create mode 100644 src/pages/system/statistics/SoftwareInfo.tsx
 create mode 100644 src/pages/system/statistics/StorageInfo.tsx
 create mode 100644 src/pages/system/statistics/index.tsx
 create mode 100644 src/pages/system/statistics/shared.ts

diff --git a/src/pages/system/Statistics.tsx b/src/pages/system/Statistics.tsx
deleted file mode 100644
index 3309b5e..0000000
--- a/src/pages/system/Statistics.tsx
+++ /dev/null
@@ -1,993 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import Icon from '@ant-design/icons'
-import * as echarts from 'echarts/core'
-import {
-    TooltipComponent,
-    TooltipComponentOption,
-    GridComponent,
-    GridComponentOption,
-    LegendComponent,
-    LegendComponentOption,
-    ToolboxComponentOption,
-    DataZoomComponentOption,
-    ToolboxComponent,
-    DataZoomComponent
-} from 'echarts/components'
-import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
-import { UniversalTransition } from 'echarts/features'
-import { SVGRenderer } from 'echarts/renderers'
-import { CallbackDataParams } from 'echarts/types/dist/shared'
-import '@/assets/css/pages/system/statistics.scss'
-import { useUpdatedEffect } from '@/util/hooks'
-import { formatByteSize } from '@/util/common'
-import { getTimesBetweenTwoTimes, utcToLocalTime } from '@/util/datetime'
-import {
-    r_sys_statistics_active,
-    r_sys_statistics_cpu,
-    r_sys_statistics_hardware,
-    r_sys_statistics_online,
-    r_sys_statistics_software,
-    r_sys_statistics_storage
-} from '@/services/system'
-import Card from '@/components/common/Card'
-import FlexBox from '@/components/common/FlexBox'
-import FitFullscreen from '@/components/common/FitFullscreen'
-import HideScrollbar from '@/components/common/HideScrollbar'
-import LoadingMask from '@/components/common/LoadingMask'
-import Permission from '@/components/common/Permission'
-
-echarts.use([
-    TooltipComponent,
-    ToolboxComponent,
-    GridComponent,
-    LegendComponent,
-    DataZoomComponent,
-    BarChart,
-    LineChart,
-    SVGRenderer,
-    UniversalTransition
-])
-type EChartsOption = echarts.ComposeOption<
-    | TooltipComponentOption
-    | ToolboxComponentOption
-    | GridComponentOption
-    | LegendComponentOption
-    | BarSeriesOption
-    | DataZoomComponentOption
-    | LineSeriesOption
->
-
-const barDefaultSeriesOption: BarSeriesOption = {
-    type: 'bar',
-    stack: 'total',
-    itemStyle: {
-        color: (params) => {
-            switch (params.seriesName) {
-                case 'idle':
-                case 'free':
-                    return '#F5F5F5'
-                default:
-                    return params.color ?? echarts.color.random()
-            }
-        }
-    }
-}
-
-const barEChartsBaseOption: EChartsOption = {
-    tooltip: {},
-    xAxis: {
-        show: false
-    },
-    yAxis: {
-        axisLine: {
-            show: false
-        },
-        axisLabel: {
-            show: false
-        },
-        axisTick: {
-            show: false
-        },
-        splitLine: {
-            show: false
-        },
-        axisPointer: {
-            show: false
-        }
-    }
-}
-
-const getTooltipTimeFormatter = (format: string = 'yyyy-MM-DD HH:mm:ss') => {
-    return (params: CallbackDataParams[]) =>
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        `${utcToLocalTime(params[0].data[0], format)}<br>${params
-            .map(
-                (param) =>
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-expect-error
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    `<span style="display: flex; justify-content: space-between;"><span>${param.marker}${param.seriesName}</span><span style="font-weight: bold; margin-left: 16px;">${param.data[1]}</span></span>`
-            )
-            .join('')}`
-}
-
-const lineEChartsBaseOption: EChartsOption = {
-    tooltip: {
-        trigger: 'axis'
-    },
-    legend: {},
-    toolbox: {
-        feature: {
-            dataZoom: {
-                yAxisIndex: 'none'
-            },
-            restore: {},
-            saveAsImage: {}
-        }
-    },
-    xAxis: {
-        type: 'time'
-    },
-    yAxis: {
-        type: 'value',
-        interval: 1
-    },
-    dataZoom: [
-        {
-            type: 'inside',
-            start: 0,
-            end: 100,
-            minValueSpan: 2 * 60 * 60 * 1000
-        }
-    ],
-    series: [{}]
-}
-
-interface CommonCardProps extends React.PropsWithChildren {
-    icon: IconComponent
-    title: React.ReactNode
-    loading?: boolean
-    expand?: React.ReactNode
-}
-
-const CommonCard: React.FC<CommonCardProps> = (props) => {
-    return (
-        <Card style={{ overflow: 'visible' }}>
-            <FlexBox className={'common-card'}>
-                <FlexBox direction={'horizontal'} className={'head'}>
-                    <Icon component={props.icon} className={'icon'} />
-                    <div className={'title'}>{props.title}</div>
-                    {props.expand}
-                </FlexBox>
-                <LoadingMask
-                    hidden={!props.loading}
-                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
-                >
-                    {props.children}
-                </LoadingMask>
-            </FlexBox>
-        </Card>
-    )
-}
-
-const OnlineInfo: React.FC = () => {
-    const onlineInfoDivRef = useRef<HTMLDivElement>(null)
-    const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
-    const [isLoading, setIsLoading] = useState(false)
-    const [currentOnlineCount, setCurrentOnlineCount] = useState(-1)
-    const [scope, setScope] = useState('WEAK')
-
-    useUpdatedEffect(() => {
-        const chartResizeObserver = new ResizeObserver(() => {
-            onlineInfoEChartsRef.current?.resize()
-        })
-
-        onlineInfoDivRef.current && chartResizeObserver.observe(onlineInfoDivRef.current)
-
-        return () => {
-            onlineInfoDivRef.current && chartResizeObserver.unobserve(onlineInfoDivRef.current)
-        }
-    }, [isLoading])
-
-    useUpdatedEffect(() => {
-        getOnlineInfo()
-    }, [])
-
-    const handleOnScopeChange = (value: string) => {
-        setScope(value)
-        getOnlineInfo(value)
-    }
-
-    const handleOnRefresh = () => {
-        getOnlineInfo()
-    }
-
-    const getOnlineInfo = (_scope: string = scope) => {
-        if (isLoading) {
-            return
-        }
-
-        setIsLoading(true)
-        setCurrentOnlineCount(-1)
-
-        void r_sys_statistics_online({ scope: _scope }).then((res) => {
-            const response = res.data
-            if (response.success) {
-                const data = response.data
-                if (data) {
-                    setIsLoading(false)
-
-                    setCurrentOnlineCount(data.current)
-
-                    setTimeout(() => {
-                        const dataList = getTimesBetweenTwoTimes(
-                            data.history[0].time,
-                            data.history[data.history.length - 1].time,
-                            'minute'
-                        ).map((time) => [
-                            time,
-                            data.history.find(
-                                (value) => value.time.substring(0, 16) === time.substring(0, 16)
-                            )?.record ?? 0
-                        ])
-
-                        onlineInfoEChartsRef.current = echarts.init(
-                            onlineInfoDivRef.current,
-                            null,
-                            { renderer: 'svg' }
-                        )
-
-                        onlineInfoEChartsRef.current?.setOption({
-                            ...lineEChartsBaseOption,
-                            tooltip: {
-                                ...lineEChartsBaseOption.tooltip,
-                                formatter: getTooltipTimeFormatter('yyyy-MM-DD HH:mm')
-                            },
-                            xAxis: {
-                                ...lineEChartsBaseOption.xAxis
-                            },
-                            series: [
-                                {
-                                    name: '在线人数',
-                                    type: 'line',
-                                    smooth: true,
-                                    symbol: 'none',
-                                    areaStyle: {},
-                                    data: dataList
-                                }
-                            ]
-                        })
-                    })
-                }
-            }
-        })
-    }
-
-    return (
-        <CommonCard
-            icon={IconOxygenOnline}
-            title={
-                <>
-                    <FlexBox gap={10} direction={'horizontal'}>
-                        <span style={{ whiteSpace: 'nowrap' }}>在线用户</span>
-                        <AntdTag>
-                            {currentOnlineCount === -1 ? '获取中...' : `当前 ${currentOnlineCount}`}
-                        </AntdTag>
-                    </FlexBox>
-                </>
-            }
-            loading={isLoading}
-            expand={
-                <>
-                    <AntdSelect
-                        value={scope}
-                        onChange={handleOnScopeChange}
-                        disabled={isLoading}
-                        style={{ width: '8em' }}
-                    >
-                        <AntdSelect.Option key={'DAY'}>今天</AntdSelect.Option>
-                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
-                        <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
-                        <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
-                        <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>
-                        <AntdSelect.Option key={'TWO_YEARS'}>最近2年</AntdSelect.Option>
-                        <AntdSelect.Option key={'THREE_YEARS'}>最近3年</AntdSelect.Option>
-                        <AntdSelect.Option key={'FIVE_YEARS'}>最近5年</AntdSelect.Option>
-                        <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
-                    </AntdSelect>
-                    <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
-                        <Icon component={IconOxygenRefresh} />
-                    </AntdButton>
-                </>
-            }
-        >
-            <FlexBox className={'card-content'} direction={'horizontal'}>
-                <div className={'big-chart'} ref={onlineInfoDivRef} />
-            </FlexBox>
-        </CommonCard>
-    )
-}
-
-const ActiveInfo: React.FC = () => {
-    const activeInfoDivRef = useRef<HTMLDivElement>(null)
-    const activeInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
-    const [isLoading, setIsLoading] = useState(false)
-    const [scope, setScope] = useState('WEAK')
-
-    useUpdatedEffect(() => {
-        const chartResizeObserver = new ResizeObserver(() => {
-            activeInfoEChartsRef.current?.resize()
-        })
-
-        activeInfoDivRef.current && chartResizeObserver.observe(activeInfoDivRef.current)
-
-        return () => {
-            activeInfoDivRef.current && chartResizeObserver.unobserve(activeInfoDivRef.current)
-        }
-    }, [isLoading])
-
-    useUpdatedEffect(() => {
-        getActiveInfo()
-    }, [])
-
-    const handleOnScopeChange = (value: string) => {
-        setScope(value)
-        getActiveInfo(value)
-    }
-
-    const handleOnRefresh = () => {
-        getActiveInfo()
-    }
-
-    const getActiveInfo = (_scope: string = scope) => {
-        if (isLoading) {
-            return
-        }
-
-        setIsLoading(true)
-
-        void r_sys_statistics_active({ scope: _scope }).then((res) => {
-            const response = res.data
-            if (response.success) {
-                const data = response.data
-                if (data) {
-                    setIsLoading(false)
-
-                    setTimeout(() => {
-                        const registerList = data.registerHistory.length
-                            ? getTimesBetweenTwoTimes(
-                                  data.registerHistory[0].time,
-                                  data.registerHistory[data.registerHistory.length - 1].time,
-                                  'day'
-                              ).map((time) => [
-                                  time,
-                                  data.registerHistory.find(
-                                      (value) =>
-                                          value.time.substring(0, 10) === time.substring(0, 10)
-                                  )?.count ?? 0
-                              ])
-                            : []
-                        const loginList = data.loginHistory.length
-                            ? getTimesBetweenTwoTimes(
-                                  data.loginHistory[0].time,
-                                  data.loginHistory[data.loginHistory.length - 1].time,
-                                  'day'
-                              ).map((time) => [
-                                  time,
-                                  data.loginHistory.find(
-                                      (value) =>
-                                          value.time.substring(0, 10) === time.substring(0, 10)
-                                  )?.count ?? 0
-                              ])
-                            : []
-                        const verifyList = data.verifyHistory.length
-                            ? getTimesBetweenTwoTimes(
-                                  data.verifyHistory[0].time,
-                                  data.verifyHistory[data.verifyHistory.length - 1].time,
-                                  'day'
-                              ).map((time) => [
-                                  time,
-                                  data.verifyHistory.find(
-                                      (value) =>
-                                          value.time.substring(0, 10) === time.substring(0, 10)
-                                  )?.count ?? 0
-                              ])
-                            : []
-
-                        activeInfoEChartsRef.current = echarts.init(
-                            activeInfoDivRef.current,
-                            null,
-                            { renderer: 'svg' }
-                        )
-
-                        activeInfoEChartsRef.current?.setOption({
-                            ...lineEChartsBaseOption,
-                            useUTC: true,
-                            tooltip: {
-                                ...lineEChartsBaseOption.tooltip,
-                                formatter: getTooltipTimeFormatter('yyyy-MM-DD')
-                            },
-                            dataZoom: [
-                                {
-                                    type: 'inside',
-                                    start: 0,
-                                    end: 100,
-                                    minValueSpan: 2 * 24 * 60 * 60 * 1000
-                                }
-                            ],
-                            series: [
-                                {
-                                    name: '注册人数',
-                                    type: 'line',
-                                    smooth: true,
-                                    symbol: 'none',
-                                    areaStyle: {},
-                                    data: registerList
-                                },
-                                {
-                                    name: '登录人数',
-                                    type: 'line',
-                                    smooth: true,
-                                    symbol: 'none',
-                                    areaStyle: {},
-                                    data: loginList
-                                },
-                                {
-                                    name: '验证账号人数',
-                                    type: 'line',
-                                    smooth: true,
-                                    symbol: 'none',
-                                    areaStyle: {},
-                                    data: verifyList
-                                }
-                            ]
-                        })
-                    })
-                }
-            }
-        })
-    }
-
-    return (
-        <CommonCard
-            icon={IconOxygenAnalysis}
-            title={
-                <>
-                    <FlexBox gap={10} direction={'horizontal'}>
-                        <span style={{ whiteSpace: 'nowrap' }}>用户活跃</span>
-                    </FlexBox>
-                </>
-            }
-            loading={isLoading}
-            expand={
-                <>
-                    <AntdSelect
-                        value={scope}
-                        onChange={handleOnScopeChange}
-                        disabled={isLoading}
-                        style={{ width: '8em' }}
-                    >
-                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
-                        <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
-                        <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
-                        <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>
-                        <AntdSelect.Option key={'TWO_YEARS'}>最近2年</AntdSelect.Option>
-                        <AntdSelect.Option key={'THREE_YEARS'}>最近3年</AntdSelect.Option>
-                        <AntdSelect.Option key={'FIVE_YEARS'}>最近5年</AntdSelect.Option>
-                        <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
-                    </AntdSelect>
-                    <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
-                        <Icon component={IconOxygenRefresh} />
-                    </AntdButton>
-                </>
-            }
-        >
-            <FlexBox className={'card-content'} direction={'horizontal'}>
-                <div className={'big-chart'} ref={activeInfoDivRef} />
-            </FlexBox>
-        </CommonCard>
-    )
-}
-
-const SoftwareInfo: React.FC = () => {
-    const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
-
-    useUpdatedEffect(() => {
-        void r_sys_statistics_software().then((res) => {
-            const response = res.data
-            if (response.success) {
-                response.data && setSoftwareInfoData(response.data)
-            } else {
-                void message.error('获取软件信息失败，请稍后重试')
-            }
-        })
-    }, [])
-
-    return (
-        <CommonCard
-            icon={IconOxygenSoftware}
-            title={'软件信息'}
-            loading={softwareInfoData === undefined}
-        >
-            <FlexBox className={'card-content'} direction={'horizontal'}>
-                <FlexBox className={'key'}>
-                    <div>操作系统</div>
-                    <div>位数</div>
-                    <div>Java</div>
-                    <div>Java 供应商</div>
-                    <div>Runtime</div>
-                    <div>JVM</div>
-                    <div>JVM 供应商</div>
-                    <div>操作系统启动时间</div>
-                    <div>后端服务器启动时间</div>
-                </FlexBox>
-                <FlexBox className={'value'}>
-                    <div title={softwareInfoData?.os}>{softwareInfoData?.os}</div>
-                    <div title={softwareInfoData?.bitness.toString()}>
-                        {softwareInfoData?.bitness}
-                    </div>
-                    <div
-                        title={`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}
-                    >{`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}</div>
-                    <div title={softwareInfoData?.javaVendor}>{softwareInfoData?.javaVendor}</div>
-                    <div
-                        title={`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}
-                    >{`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}</div>
-                    <div
-                        title={`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}
-                    >{`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}</div>
-                    <div title={softwareInfoData?.jvmVendor}>{softwareInfoData?.jvmVendor}</div>
-                    <div>
-                        {softwareInfoData?.osBootTime &&
-                            utcToLocalTime(softwareInfoData?.osBootTime)}
-                    </div>
-                    <div>
-                        {softwareInfoData?.serverStartupTime &&
-                            utcToLocalTime(softwareInfoData.serverStartupTime)}
-                    </div>
-                </FlexBox>
-            </FlexBox>
-        </CommonCard>
-    )
-}
-
-const HardwareInfo: React.FC = () => {
-    const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
-
-    useUpdatedEffect(() => {
-        void r_sys_statistics_hardware().then((res) => {
-            const response = res.data
-            if (response.success) {
-                response.data && setHardwareInfoData(response.data)
-            } else {
-                void message.error('获取硬件信息失败，请稍后重试')
-            }
-        })
-    }, [])
-
-    return (
-        <CommonCard
-            icon={IconOxygenHardware}
-            title={'硬件信息'}
-            loading={hardwareInfoData === undefined}
-        >
-            <FlexBox className={'card-content'} direction={'horizontal'}>
-                <FlexBox className={'key'}>
-                    <div>CPU</div>
-                    <div>CPU 架构</div>
-                    <div>微架构</div>
-                    <div>64位</div>
-                    <div>物理 CPU</div>
-                    <div>物理核心</div>
-                    <div>逻辑核心</div>
-                    <div>内存</div>
-                    <div>磁盘</div>
-                </FlexBox>
-                <FlexBox className={'value'}>
-                    <div title={hardwareInfoData?.cpu}>{hardwareInfoData?.cpu}</div>
-                    <div title={hardwareInfoData?.arch}>{hardwareInfoData?.arch}</div>
-                    <div title={hardwareInfoData?.microarchitecture}>
-                        {hardwareInfoData?.microarchitecture}
-                    </div>
-                    <div title={hardwareInfoData?.is64Bit ? '是' : '否'}>
-                        {hardwareInfoData?.is64Bit ? '是' : '否'}
-                    </div>
-                    <div title={hardwareInfoData?.cpuPhysicalPackageCount.toString()}>
-                        {hardwareInfoData?.cpuPhysicalPackageCount}
-                    </div>
-                    <div title={hardwareInfoData?.cpuPhysicalProcessorCount.toString()}>
-                        {hardwareInfoData?.cpuPhysicalProcessorCount}
-                    </div>
-                    <div title={hardwareInfoData?.cpuLogicalProcessorCount.toString()}>
-                        {hardwareInfoData?.cpuLogicalProcessorCount}
-                    </div>
-                    <div title={hardwareInfoData?.memories}>{hardwareInfoData?.memories}</div>
-                    <div title={hardwareInfoData?.disks}>{hardwareInfoData?.disks}</div>
-                </FlexBox>
-            </FlexBox>
-        </CommonCard>
-    )
-}
-
-const CPUInfo: React.FC = () => {
-    const keyDivRef = useRef<HTMLDivElement>(null)
-    const percentDivRef = useRef<HTMLDivElement>(null)
-    const cpuInfoDivRef = useRef<HTMLDivElement>(null)
-    const cpuInfoEChartsRef = useRef<echarts.EChartsType[]>([])
-    const [isLoading, setIsLoading] = useState(true)
-    const [refreshInterval, setRefreshInterval] = useState('5')
-    const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([])
-
-    const cpuDefaultSeriesOption: BarSeriesOption = {
-        ...barDefaultSeriesOption,
-        tooltip: {
-            valueFormatter: (value) => `${((value as number) * 100).toFixed(2)}%`
-        }
-    }
-
-    useUpdatedEffect(() => {
-        const chartResizeObserver = new ResizeObserver(() => {
-            cpuInfoEChartsRef.current.forEach((value) => value.resize())
-        })
-
-        cpuInfoDivRef.current && chartResizeObserver.observe(cpuInfoDivRef.current)
-
-        return () => {
-            cpuInfoDivRef.current && chartResizeObserver.unobserve(cpuInfoDivRef.current)
-        }
-    }, [cpuInfoDivRef.current])
-
-    useUpdatedEffect(() => {
-        const intervalId = setInterval(getCpuInfo(), parseInt(refreshInterval) * 1000)
-
-        return () => {
-            clearInterval(intervalId)
-        }
-    }, [refreshInterval])
-
-    const getCpuInfo = () => {
-        void r_sys_statistics_cpu().then((res) => {
-            const response = res.data
-            if (response.success) {
-                const data = response.data
-                if (data) {
-                    if (isLoading) {
-                        setIsLoading(false)
-                    }
-
-                    setTimeout(() => {
-                        const dataList = data.processors.map((value) =>
-                            cpuInfoVoToCpuInfoData(value)
-                        )
-                        dataList.unshift(cpuInfoVoToCpuInfoData(data))
-
-                        setCpuInfoEChartsOption(
-                            dataList.map((value, index) => ({
-                                ...barEChartsBaseOption,
-                                yAxis: {
-                                    ...barEChartsBaseOption.yAxis,
-                                    data: [index === 0 ? '总占用' : `CPU ${index - 1}`]
-                                },
-                                series: value
-                            }))
-                        )
-
-                        if (percentDivRef.current) {
-                            percentDivRef.current.innerHTML = ''
-                            dataList.forEach((value) => {
-                                const percentElement = document.createElement('div')
-                                const idle = value.find((item) => item.name === 'idle')?.data[0]
-                                percentElement.innerText =
-                                    idle !== undefined
-                                        ? `${((1 - idle) * 100).toFixed(2)}%`
-                                        : 'Unknown'
-                                percentDivRef.current?.appendChild(percentElement)
-                            })
-                        }
-
-                        if (!cpuInfoEChartsRef.current.length) {
-                            keyDivRef.current && (keyDivRef.current.innerHTML = '')
-                            cpuInfoDivRef.current && (cpuInfoDivRef.current.innerHTML = '')
-                            for (let i = 0; i < dataList.length; i++) {
-                                const keyElement = document.createElement('div')
-                                keyElement.innerText = i === 0 ? '总占用' : `CPU ${i - 1}`
-                                keyDivRef.current?.appendChild(keyElement)
-
-                                const valueElement = document.createElement('div')
-                                cpuInfoDivRef.current?.appendChild(valueElement)
-                                cpuInfoEChartsRef.current.push(
-                                    echarts.init(valueElement, null, { renderer: 'svg' })
-                                )
-                            }
-                        }
-                    })
-                }
-            }
-        })
-
-        return getCpuInfo
-    }
-
-    const cpuInfoVoToCpuInfoData = (cpuInfoVo: CpuInfoVo) =>
-        Object.entries(cpuInfoVo)
-            .filter(([key]) => !['total', 'processors'].includes(key))
-            .map(([key, value]) => ({
-                ...cpuDefaultSeriesOption,
-                name: key,
-                data: [(value as number) / cpuInfoVo.total]
-            }))
-            .sort((a, b) => {
-                const order = [
-                    'steal',
-                    'irq',
-                    'softirq',
-                    'iowait',
-                    'system',
-                    'nice',
-                    'user',
-                    'idle'
-                ]
-                return order.indexOf(a.name) - order.indexOf(b.name)
-            })
-
-    useEffect(() => {
-        cpuInfoEChartsRef.current?.forEach((value, index) => {
-            try {
-                value.setOption(cpuInfoEChartsOption[index])
-            } catch (e) {
-                /* empty */
-            }
-        })
-    }, [cpuInfoEChartsOption])
-
-    return (
-        <>
-            <CommonCard
-                icon={IconOxygenCpu}
-                title={'CPU 信息'}
-                loading={isLoading}
-                expand={
-                    <AntdSelect
-                        value={refreshInterval}
-                        onChange={(value) => setRefreshInterval(value)}
-                    >
-                        <AntdSelect.Option key={1}>1秒</AntdSelect.Option>
-                        <AntdSelect.Option key={2}>2秒</AntdSelect.Option>
-                        <AntdSelect.Option key={3}>3秒</AntdSelect.Option>
-                        <AntdSelect.Option key={5}>5秒</AntdSelect.Option>
-                        <AntdSelect.Option key={10}>10秒</AntdSelect.Option>
-                        <AntdSelect.Option key={15}>15秒</AntdSelect.Option>
-                        <AntdSelect.Option key={20}>20秒</AntdSelect.Option>
-                        <AntdSelect.Option key={30}>30秒</AntdSelect.Option>
-                        <AntdSelect.Option key={60}>60秒</AntdSelect.Option>
-                        <AntdSelect.Option key={120}>2分</AntdSelect.Option>
-                        <AntdSelect.Option key={180}>3分</AntdSelect.Option>
-                        <AntdSelect.Option key={300}>5分</AntdSelect.Option>
-                        <AntdSelect.Option key={600}>10分</AntdSelect.Option>
-                    </AntdSelect>
-                }
-            >
-                <FlexBox className={'card-content'} direction={'horizontal'}>
-                    <FlexBox className={'key'} ref={keyDivRef} />
-                    <FlexBox className={'value-chart'} ref={cpuInfoDivRef} />
-                    <FlexBox className={'value-percent'} ref={percentDivRef} />
-                </FlexBox>
-            </CommonCard>
-        </>
-    )
-}
-
-const StorageInfo: React.FC = () => {
-    const keyDivRef = useRef<HTMLDivElement>(null)
-    const percentDivRef = useRef<HTMLDivElement>(null)
-    const storageInfoDivRef = useRef<HTMLDivElement>(null)
-    const storageInfoEChartsRef = useRef<echarts.EChartsType[]>([])
-    const [isLoading, setIsLoading] = useState(true)
-    const [refreshInterval, setRefreshInterval] = useState('5')
-    const [storageInfoEChartsOption, setStorageInfoEChartsOption] = useState<EChartsOption[]>([])
-
-    const storageDefaultSeriesOption: BarSeriesOption = {
-        ...barDefaultSeriesOption,
-        tooltip: { valueFormatter: (value) => formatByteSize(value as number) }
-    }
-
-    useUpdatedEffect(() => {
-        const chartResizeObserver = new ResizeObserver(() => {
-            storageInfoEChartsRef.current.forEach((value) => value.resize())
-        })
-
-        storageInfoDivRef.current && chartResizeObserver.observe(storageInfoDivRef.current)
-
-        return () => {
-            storageInfoDivRef.current && chartResizeObserver.unobserve(storageInfoDivRef.current)
-        }
-    }, [storageInfoDivRef.current])
-
-    useUpdatedEffect(() => {
-        const intervalId = setInterval(getStorageInfo(), parseInt(refreshInterval) * 1000)
-
-        return () => {
-            clearInterval(intervalId)
-        }
-    }, [refreshInterval])
-
-    const getStorageInfo = () => {
-        void r_sys_statistics_storage().then((res) => {
-            const response = res.data
-            if (response.success) {
-                const data = response.data
-                if (data) {
-                    if (isLoading) {
-                        setIsLoading(false)
-                    }
-
-                    setTimeout(() => {
-                        const eChartsOptions = [
-                            storageInfoVoToStorageEChartsOption(
-                                '物理内存',
-                                data.memoryTotal - data.memoryFree,
-                                data.memoryFree
-                            ),
-                            storageInfoVoToStorageEChartsOption(
-                                '虚拟内存',
-                                data.virtualMemoryInUse,
-                                data.virtualMemoryMax - data.virtualMemoryInUse
-                            ),
-                            storageInfoVoToStorageEChartsOption(
-                                'swap',
-                                data.swapUsed,
-                                data.swapTotal - data.swapUsed
-                            ),
-                            storageInfoVoToStorageEChartsOption(
-                                'jvm 内存',
-                                data.jvmTotal - data.jvmFree,
-                                data.jvmFree
-                            )
-                        ]
-                        data.fileStores.forEach((value) =>
-                            eChartsOptions.push(
-                                storageInfoVoToStorageEChartsOption(
-                                    value.mount,
-                                    value.total - value.free,
-                                    value.free
-                                )
-                            )
-                        )
-                        setStorageInfoEChartsOption(eChartsOptions)
-
-                        if (percentDivRef.current && keyDivRef.current) {
-                            keyDivRef.current.innerHTML = ''
-                            percentDivRef.current.innerHTML = ''
-                            eChartsOptions.forEach((value) => {
-                                const keyElement = document.createElement('div')
-                                const percentElement = document.createElement('div')
-                                keyElement.innerText = value.yAxis.data[0]
-                                percentElement.innerText = `${(
-                                    (value.series[0].data[0] /
-                                        (value.series[0].data[0] + value.series[1].data[0])) *
-                                    100
-                                ).toFixed(2)}%`
-
-                                keyDivRef.current?.appendChild(keyElement)
-                                percentDivRef.current?.appendChild(percentElement)
-                            })
-                        }
-
-                        if (!storageInfoEChartsRef.current.length) {
-                            storageInfoDivRef.current && (storageInfoDivRef.current.innerHTML = '')
-
-                            eChartsOptions.forEach(() => {
-                                const element = document.createElement('div')
-                                storageInfoDivRef.current?.appendChild(element)
-                                storageInfoEChartsRef.current.push(
-                                    echarts.init(element, null, { renderer: 'svg' })
-                                )
-                            })
-                        }
-                    })
-                }
-            }
-        })
-
-        return getStorageInfo
-    }
-
-    const storageInfoVoToStorageEChartsOption = (label: string, used: number, free: number) => ({
-        ...barEChartsBaseOption,
-        xAxis: {
-            ...barEChartsBaseOption.xAxis,
-            max: used + free
-        },
-        yAxis: {
-            ...barEChartsBaseOption.yAxis,
-            data: [label]
-        },
-        series: [
-            {
-                ...storageDefaultSeriesOption,
-                name: 'used',
-                data: [used]
-            },
-            {
-                ...storageDefaultSeriesOption,
-                name: 'free',
-                data: [free]
-            }
-        ]
-    })
-
-    useEffect(() => {
-        storageInfoEChartsRef.current?.forEach((value, index) => {
-            try {
-                value.setOption(storageInfoEChartsOption[index])
-            } catch (e) {
-                /* empty */
-            }
-        })
-    }, [storageInfoEChartsOption])
-
-    return (
-        <>
-            <CommonCard
-                icon={IconOxygenMemory}
-                title={'内存信息'}
-                loading={isLoading}
-                expand={
-                    <AntdSelect
-                        value={refreshInterval}
-                        onChange={(value) => setRefreshInterval(value)}
-                    >
-                        <AntdSelect.Option key={1}>1秒</AntdSelect.Option>
-                        <AntdSelect.Option key={2}>2秒</AntdSelect.Option>
-                        <AntdSelect.Option key={3}>3秒</AntdSelect.Option>
-                        <AntdSelect.Option key={5}>5秒</AntdSelect.Option>
-                        <AntdSelect.Option key={10}>10秒</AntdSelect.Option>
-                        <AntdSelect.Option key={15}>15秒</AntdSelect.Option>
-                        <AntdSelect.Option key={20}>20秒</AntdSelect.Option>
-                        <AntdSelect.Option key={30}>30秒</AntdSelect.Option>
-                        <AntdSelect.Option key={60}>60秒</AntdSelect.Option>
-                        <AntdSelect.Option key={120}>2分</AntdSelect.Option>
-                        <AntdSelect.Option key={180}>3分</AntdSelect.Option>
-                        <AntdSelect.Option key={300}>5分</AntdSelect.Option>
-                        <AntdSelect.Option key={600}>10分</AntdSelect.Option>
-                    </AntdSelect>
-                }
-            >
-                <FlexBox className={'card-content'} direction={'horizontal'}>
-                    <FlexBox className={'key'} ref={keyDivRef} />
-                    <FlexBox className={'value-chart'} ref={storageInfoDivRef} />
-                    <FlexBox className={'value-percent'} ref={percentDivRef} />
-                </FlexBox>
-            </CommonCard>
-        </>
-    )
-}
-
-const Statistics: React.FC = () => {
-    return (
-        <>
-            <FitFullscreen data-component={'system-statistics'}>
-                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
-                    <FlexBox direction={'horizontal'} className={'root-content'}>
-                        <Permission operationCode={'system:statistics:query:usage'}>
-                            <OnlineInfo />
-                            <ActiveInfo />
-                        </Permission>
-                        <Permission operationCode={'system:statistics:query:base'}>
-                            <HardwareInfo />
-                            <SoftwareInfo />
-                        </Permission>
-                        <Permission operationCode={'system:statistics:query:real'}>
-                            <CPUInfo />
-                            <StorageInfo />
-                        </Permission>
-                    </FlexBox>
-                </HideScrollbar>
-            </FitFullscreen>
-        </>
-    )
-}
-
-export default Statistics
diff --git a/src/pages/system/statistics/ActiveInfo.tsx b/src/pages/system/statistics/ActiveInfo.tsx
new file mode 100644
index 0000000..2d5eb99
--- /dev/null
+++ b/src/pages/system/statistics/ActiveInfo.tsx
@@ -0,0 +1,192 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import * as echarts from 'echarts/core'
+import { useUpdatedEffect } from '@/util/hooks'
+import { getTimesBetweenTwoTimes } from '@/util/datetime'
+import { r_sys_statistics_active } from '@/services/system'
+import FlexBox from '@/components/common/FlexBox'
+import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/system/statistics/shared'
+import { CommonCard } from '@/pages/system/statistics'
+
+const ActiveInfo: React.FC = () => {
+    const activeInfoDivRef = useRef<HTMLDivElement>(null)
+    const activeInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
+    const [isLoading, setIsLoading] = useState(false)
+    const [scope, setScope] = useState('WEAK')
+
+    useUpdatedEffect(() => {
+        const chartResizeObserver = new ResizeObserver(() => {
+            activeInfoEChartsRef.current?.resize()
+        })
+
+        activeInfoDivRef.current && chartResizeObserver.observe(activeInfoDivRef.current)
+
+        return () => {
+            activeInfoDivRef.current && chartResizeObserver.unobserve(activeInfoDivRef.current)
+        }
+    }, [isLoading])
+
+    useUpdatedEffect(() => {
+        getActiveInfo()
+    }, [])
+
+    const handleOnScopeChange = (value: string) => {
+        setScope(value)
+        getActiveInfo(value)
+    }
+
+    const handleOnRefresh = () => {
+        getActiveInfo()
+    }
+
+    const getActiveInfo = (_scope: string = scope) => {
+        if (isLoading) {
+            return
+        }
+
+        setIsLoading(true)
+
+        void r_sys_statistics_active({ scope: _scope }).then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    setIsLoading(false)
+
+                    setTimeout(() => {
+                        const registerList = data.registerHistory.length
+                            ? getTimesBetweenTwoTimes(
+                                  data.registerHistory[0].time,
+                                  data.registerHistory[data.registerHistory.length - 1].time,
+                                  'day'
+                              ).map((time) => [
+                                  time,
+                                  data.registerHistory.find(
+                                      (value) =>
+                                          value.time.substring(0, 10) === time.substring(0, 10)
+                                  )?.count ?? 0
+                              ])
+                            : []
+                        const loginList = data.loginHistory.length
+                            ? getTimesBetweenTwoTimes(
+                                  data.loginHistory[0].time,
+                                  data.loginHistory[data.loginHistory.length - 1].time,
+                                  'day'
+                              ).map((time) => [
+                                  time,
+                                  data.loginHistory.find(
+                                      (value) =>
+                                          value.time.substring(0, 10) === time.substring(0, 10)
+                                  )?.count ?? 0
+                              ])
+                            : []
+                        const verifyList = data.verifyHistory.length
+                            ? getTimesBetweenTwoTimes(
+                                  data.verifyHistory[0].time,
+                                  data.verifyHistory[data.verifyHistory.length - 1].time,
+                                  'day'
+                              ).map((time) => [
+                                  time,
+                                  data.verifyHistory.find(
+                                      (value) =>
+                                          value.time.substring(0, 10) === time.substring(0, 10)
+                                  )?.count ?? 0
+                              ])
+                            : []
+
+                        activeInfoEChartsRef.current = echarts.init(
+                            activeInfoDivRef.current,
+                            null,
+                            { renderer: 'svg' }
+                        )
+
+                        activeInfoEChartsRef.current?.setOption({
+                            ...lineEChartsBaseOption,
+                            useUTC: true,
+                            tooltip: {
+                                ...lineEChartsBaseOption.tooltip,
+                                formatter: getTooltipTimeFormatter('yyyy-MM-DD')
+                            },
+                            dataZoom: [
+                                {
+                                    type: 'inside',
+                                    start: 0,
+                                    end: 100,
+                                    minValueSpan: 2 * 24 * 60 * 60 * 1000
+                                }
+                            ],
+                            series: [
+                                {
+                                    name: '注册人数',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    areaStyle: {},
+                                    data: registerList
+                                },
+                                {
+                                    name: '登录人数',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    areaStyle: {},
+                                    data: loginList
+                                },
+                                {
+                                    name: '验证账号人数',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    areaStyle: {},
+                                    data: verifyList
+                                }
+                            ]
+                        })
+                    })
+                }
+            }
+        })
+    }
+
+    return (
+        <CommonCard
+            icon={IconOxygenAnalysis}
+            title={
+                <>
+                    <FlexBox gap={10} direction={'horizontal'}>
+                        <span style={{ whiteSpace: 'nowrap' }}>用户活跃</span>
+                    </FlexBox>
+                </>
+            }
+            loading={isLoading}
+            expand={
+                <>
+                    <AntdSelect
+                        value={scope}
+                        onChange={handleOnScopeChange}
+                        disabled={isLoading}
+                        style={{ width: '8em' }}
+                    >
+                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
+                        <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
+                        <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'TWO_YEARS'}>最近2年</AntdSelect.Option>
+                        <AntdSelect.Option key={'THREE_YEARS'}>最近3年</AntdSelect.Option>
+                        <AntdSelect.Option key={'FIVE_YEARS'}>最近5年</AntdSelect.Option>
+                        <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
+                    </AntdSelect>
+                    <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
+                        <Icon component={IconOxygenRefresh} />
+                    </AntdButton>
+                </>
+            }
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <div className={'big-chart'} ref={activeInfoDivRef} />
+            </FlexBox>
+        </CommonCard>
+    )
+}
+
+export default ActiveInfo
diff --git a/src/pages/system/statistics/CPUInfo.tsx b/src/pages/system/statistics/CPUInfo.tsx
new file mode 100644
index 0000000..8090e0c
--- /dev/null
+++ b/src/pages/system/statistics/CPUInfo.tsx
@@ -0,0 +1,182 @@
+import React from 'react'
+import * as echarts from 'echarts/core'
+import { BarSeriesOption } from 'echarts/charts'
+import { useUpdatedEffect } from '@/util/hooks'
+import { r_sys_statistics_cpu } from '@/services/system'
+import FlexBox from '@/components/common/FlexBox'
+import {
+    barDefaultSeriesOption,
+    barEChartsBaseOption,
+    EChartsOption
+} from '@/pages/system/statistics/shared'
+import { CommonCard } from '@/pages/system/statistics'
+
+const CPUInfo: React.FC = () => {
+    const keyDivRef = useRef<HTMLDivElement>(null)
+    const percentDivRef = useRef<HTMLDivElement>(null)
+    const cpuInfoDivRef = useRef<HTMLDivElement>(null)
+    const cpuInfoEChartsRef = useRef<echarts.EChartsType[]>([])
+    const [isLoading, setIsLoading] = useState(true)
+    const [refreshInterval, setRefreshInterval] = useState('5')
+    const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([])
+
+    const cpuDefaultSeriesOption: BarSeriesOption = {
+        ...barDefaultSeriesOption,
+        tooltip: {
+            valueFormatter: (value) => `${((value as number) * 100).toFixed(2)}%`
+        }
+    }
+
+    useUpdatedEffect(() => {
+        const chartResizeObserver = new ResizeObserver(() => {
+            cpuInfoEChartsRef.current.forEach((value) => value.resize())
+        })
+
+        cpuInfoDivRef.current && chartResizeObserver.observe(cpuInfoDivRef.current)
+
+        return () => {
+            cpuInfoDivRef.current && chartResizeObserver.unobserve(cpuInfoDivRef.current)
+        }
+    }, [cpuInfoDivRef.current])
+
+    useUpdatedEffect(() => {
+        const intervalId = setInterval(getCpuInfo(), parseInt(refreshInterval) * 1000)
+
+        return () => {
+            clearInterval(intervalId)
+        }
+    }, [refreshInterval])
+
+    const getCpuInfo = () => {
+        void r_sys_statistics_cpu().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    if (isLoading) {
+                        setIsLoading(false)
+                    }
+
+                    setTimeout(() => {
+                        const dataList = data.processors.map((value) =>
+                            cpuInfoVoToCpuInfoData(value)
+                        )
+                        dataList.unshift(cpuInfoVoToCpuInfoData(data))
+
+                        setCpuInfoEChartsOption(
+                            dataList.map((value, index) => ({
+                                ...barEChartsBaseOption,
+                                yAxis: {
+                                    ...barEChartsBaseOption.yAxis,
+                                    data: [index === 0 ? '总占用' : `CPU ${index - 1}`]
+                                },
+                                series: value
+                            }))
+                        )
+
+                        if (percentDivRef.current) {
+                            percentDivRef.current.innerHTML = ''
+                            dataList.forEach((value) => {
+                                const percentElement = document.createElement('div')
+                                const idle = value.find((item) => item.name === 'idle')?.data[0]
+                                percentElement.innerText =
+                                    idle !== undefined
+                                        ? `${((1 - idle) * 100).toFixed(2)}%`
+                                        : 'Unknown'
+                                percentDivRef.current?.appendChild(percentElement)
+                            })
+                        }
+
+                        if (!cpuInfoEChartsRef.current.length) {
+                            keyDivRef.current && (keyDivRef.current.innerHTML = '')
+                            cpuInfoDivRef.current && (cpuInfoDivRef.current.innerHTML = '')
+                            for (let i = 0; i < dataList.length; i++) {
+                                const keyElement = document.createElement('div')
+                                keyElement.innerText = i === 0 ? '总占用' : `CPU ${i - 1}`
+                                keyDivRef.current?.appendChild(keyElement)
+
+                                const valueElement = document.createElement('div')
+                                cpuInfoDivRef.current?.appendChild(valueElement)
+                                cpuInfoEChartsRef.current.push(
+                                    echarts.init(valueElement, null, { renderer: 'svg' })
+                                )
+                            }
+                        }
+                    })
+                }
+            }
+        })
+
+        return getCpuInfo
+    }
+
+    const cpuInfoVoToCpuInfoData = (cpuInfoVo: CpuInfoVo) =>
+        Object.entries(cpuInfoVo)
+            .filter(([key]) => !['total', 'processors'].includes(key))
+            .map(([key, value]) => ({
+                ...cpuDefaultSeriesOption,
+                name: key,
+                data: [(value as number) / cpuInfoVo.total]
+            }))
+            .sort((a, b) => {
+                const order = [
+                    'steal',
+                    'irq',
+                    'softirq',
+                    'iowait',
+                    'system',
+                    'nice',
+                    'user',
+                    'idle'
+                ]
+                return order.indexOf(a.name) - order.indexOf(b.name)
+            })
+
+    useEffect(() => {
+        cpuInfoEChartsRef.current?.forEach((value, index) => {
+            try {
+                value.setOption(cpuInfoEChartsOption[index])
+            } catch (e) {
+                /* empty */
+            }
+        })
+    }, [cpuInfoEChartsOption])
+
+    return (
+        <>
+            <CommonCard
+                icon={IconOxygenCpu}
+                title={'CPU 信息'}
+                loading={isLoading}
+                expand={
+                    <AntdSelect
+                        value={refreshInterval}
+                        onChange={(value) => setRefreshInterval(value)}
+                    >
+                        <AntdSelect.Option key={1}>1秒</AntdSelect.Option>
+                        <AntdSelect.Option key={2}>2秒</AntdSelect.Option>
+                        <AntdSelect.Option key={3}>3秒</AntdSelect.Option>
+                        <AntdSelect.Option key={5}>5秒</AntdSelect.Option>
+                        <AntdSelect.Option key={10}>10秒</AntdSelect.Option>
+                        <AntdSelect.Option key={15}>15秒</AntdSelect.Option>
+                        <AntdSelect.Option key={20}>20秒</AntdSelect.Option>
+                        <AntdSelect.Option key={30}>30秒</AntdSelect.Option>
+                        <AntdSelect.Option key={60}>60秒</AntdSelect.Option>
+                        <AntdSelect.Option key={120}>2分</AntdSelect.Option>
+                        <AntdSelect.Option key={180}>3分</AntdSelect.Option>
+                        <AntdSelect.Option key={300}>5分</AntdSelect.Option>
+                        <AntdSelect.Option key={600}>10分</AntdSelect.Option>
+                    </AntdSelect>
+                }
+            >
+                <FlexBox className={'card-content'} direction={'horizontal'}>
+                    <FlexBox className={'key'} ref={keyDivRef} />
+                    <FlexBox className={'value-chart'} ref={cpuInfoDivRef} />
+                    <FlexBox className={'value-percent'} ref={percentDivRef} />
+                </FlexBox>
+            </CommonCard>
+        </>
+    )
+}
+
+export default CPUInfo
diff --git a/src/pages/system/statistics/HardwareInfo.tsx b/src/pages/system/statistics/HardwareInfo.tsx
new file mode 100644
index 0000000..8864fec
--- /dev/null
+++ b/src/pages/system/statistics/HardwareInfo.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import { useUpdatedEffect } from '@/util/hooks'
+import { r_sys_statistics_hardware } from '@/services/system'
+import FlexBox from '@/components/common/FlexBox'
+import { CommonCard } from '@/pages/system/statistics'
+
+const HardwareInfo: React.FC = () => {
+    const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
+
+    useUpdatedEffect(() => {
+        void r_sys_statistics_hardware().then((res) => {
+            const response = res.data
+            if (response.success) {
+                response.data && setHardwareInfoData(response.data)
+            } else {
+                void message.error('获取硬件信息失败，请稍后重试')
+            }
+        })
+    }, [])
+
+    return (
+        <CommonCard
+            icon={IconOxygenHardware}
+            title={'硬件信息'}
+            loading={hardwareInfoData === undefined}
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <FlexBox className={'key'}>
+                    <div>CPU</div>
+                    <div>CPU 架构</div>
+                    <div>微架构</div>
+                    <div>64位</div>
+                    <div>物理 CPU</div>
+                    <div>物理核心</div>
+                    <div>逻辑核心</div>
+                    <div>内存</div>
+                    <div>磁盘</div>
+                </FlexBox>
+                <FlexBox className={'value'}>
+                    <div title={hardwareInfoData?.cpu}>{hardwareInfoData?.cpu}</div>
+                    <div title={hardwareInfoData?.arch}>{hardwareInfoData?.arch}</div>
+                    <div title={hardwareInfoData?.microarchitecture}>
+                        {hardwareInfoData?.microarchitecture}
+                    </div>
+                    <div title={hardwareInfoData?.is64Bit ? '是' : '否'}>
+                        {hardwareInfoData?.is64Bit ? '是' : '否'}
+                    </div>
+                    <div title={hardwareInfoData?.cpuPhysicalPackageCount.toString()}>
+                        {hardwareInfoData?.cpuPhysicalPackageCount}
+                    </div>
+                    <div title={hardwareInfoData?.cpuPhysicalProcessorCount.toString()}>
+                        {hardwareInfoData?.cpuPhysicalProcessorCount}
+                    </div>
+                    <div title={hardwareInfoData?.cpuLogicalProcessorCount.toString()}>
+                        {hardwareInfoData?.cpuLogicalProcessorCount}
+                    </div>
+                    <div title={hardwareInfoData?.memories}>{hardwareInfoData?.memories}</div>
+                    <div title={hardwareInfoData?.disks}>{hardwareInfoData?.disks}</div>
+                </FlexBox>
+            </FlexBox>
+        </CommonCard>
+    )
+}
+
+export default HardwareInfo
diff --git a/src/pages/system/statistics/OnlineInfo.tsx b/src/pages/system/statistics/OnlineInfo.tsx
new file mode 100644
index 0000000..7ddd95d
--- /dev/null
+++ b/src/pages/system/statistics/OnlineInfo.tsx
@@ -0,0 +1,149 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import * as echarts from 'echarts/core'
+import { useUpdatedEffect } from '@/util/hooks'
+import { getTimesBetweenTwoTimes } from '@/util/datetime'
+import { r_sys_statistics_online } from '@/services/system'
+import FlexBox from '@/components/common/FlexBox'
+import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/system/statistics/shared'
+import { CommonCard } from '@/pages/system/statistics'
+
+const OnlineInfo: React.FC = () => {
+    const onlineInfoDivRef = useRef<HTMLDivElement>(null)
+    const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
+    const [isLoading, setIsLoading] = useState(false)
+    const [currentOnlineCount, setCurrentOnlineCount] = useState(-1)
+    const [scope, setScope] = useState('WEAK')
+
+    useUpdatedEffect(() => {
+        const chartResizeObserver = new ResizeObserver(() => {
+            onlineInfoEChartsRef.current?.resize()
+        })
+
+        onlineInfoDivRef.current && chartResizeObserver.observe(onlineInfoDivRef.current)
+
+        return () => {
+            onlineInfoDivRef.current && chartResizeObserver.unobserve(onlineInfoDivRef.current)
+        }
+    }, [isLoading])
+
+    useUpdatedEffect(() => {
+        getOnlineInfo()
+    }, [])
+
+    const handleOnScopeChange = (value: string) => {
+        setScope(value)
+        getOnlineInfo(value)
+    }
+
+    const handleOnRefresh = () => {
+        getOnlineInfo()
+    }
+
+    const getOnlineInfo = (_scope: string = scope) => {
+        if (isLoading) {
+            return
+        }
+
+        setIsLoading(true)
+        setCurrentOnlineCount(-1)
+
+        void r_sys_statistics_online({ scope: _scope }).then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    setIsLoading(false)
+
+                    setCurrentOnlineCount(data.current)
+
+                    setTimeout(() => {
+                        const dataList = getTimesBetweenTwoTimes(
+                            data.history[0].time,
+                            data.history[data.history.length - 1].time,
+                            'minute'
+                        ).map((time) => [
+                            time,
+                            data.history.find(
+                                (value) => value.time.substring(0, 16) === time.substring(0, 16)
+                            )?.record ?? 0
+                        ])
+
+                        onlineInfoEChartsRef.current = echarts.init(
+                            onlineInfoDivRef.current,
+                            null,
+                            { renderer: 'svg' }
+                        )
+
+                        onlineInfoEChartsRef.current?.setOption({
+                            ...lineEChartsBaseOption,
+                            tooltip: {
+                                ...lineEChartsBaseOption.tooltip,
+                                formatter: getTooltipTimeFormatter('yyyy-MM-DD HH:mm')
+                            },
+                            xAxis: {
+                                ...lineEChartsBaseOption.xAxis
+                            },
+                            series: [
+                                {
+                                    name: '在线人数',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    areaStyle: {},
+                                    data: dataList
+                                }
+                            ]
+                        })
+                    })
+                }
+            }
+        })
+    }
+
+    return (
+        <CommonCard
+            icon={IconOxygenOnline}
+            title={
+                <>
+                    <FlexBox gap={10} direction={'horizontal'}>
+                        <span style={{ whiteSpace: 'nowrap' }}>在线用户</span>
+                        <AntdTag>
+                            {currentOnlineCount === -1 ? '获取中...' : `当前 ${currentOnlineCount}`}
+                        </AntdTag>
+                    </FlexBox>
+                </>
+            }
+            loading={isLoading}
+            expand={
+                <>
+                    <AntdSelect
+                        value={scope}
+                        onChange={handleOnScopeChange}
+                        disabled={isLoading}
+                        style={{ width: '8em' }}
+                    >
+                        <AntdSelect.Option key={'DAY'}>今天</AntdSelect.Option>
+                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
+                        <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
+                        <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>
+                        <AntdSelect.Option key={'TWO_YEARS'}>最近2年</AntdSelect.Option>
+                        <AntdSelect.Option key={'THREE_YEARS'}>最近3年</AntdSelect.Option>
+                        <AntdSelect.Option key={'FIVE_YEARS'}>最近5年</AntdSelect.Option>
+                        <AntdSelect.Option key={'ALL'}>全部</AntdSelect.Option>
+                    </AntdSelect>
+                    <AntdButton title={'刷新'} onClick={handleOnRefresh} disabled={isLoading}>
+                        <Icon component={IconOxygenRefresh} />
+                    </AntdButton>
+                </>
+            }
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <div className={'big-chart'} ref={onlineInfoDivRef} />
+            </FlexBox>
+        </CommonCard>
+    )
+}
+
+export default OnlineInfo
diff --git a/src/pages/system/statistics/SoftwareInfo.tsx b/src/pages/system/statistics/SoftwareInfo.tsx
new file mode 100644
index 0000000..5254691
--- /dev/null
+++ b/src/pages/system/statistics/SoftwareInfo.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import { useUpdatedEffect } from '@/util/hooks'
+import { utcToLocalTime } from '@/util/datetime'
+import { r_sys_statistics_software } from '@/services/system'
+import FlexBox from '@/components/common/FlexBox'
+import { CommonCard } from '@/pages/system/statistics'
+
+const SoftwareInfo: React.FC = () => {
+    const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
+
+    useUpdatedEffect(() => {
+        void r_sys_statistics_software().then((res) => {
+            const response = res.data
+            if (response.success) {
+                response.data && setSoftwareInfoData(response.data)
+            } else {
+                void message.error('获取软件信息失败，请稍后重试')
+            }
+        })
+    }, [])
+
+    return (
+        <CommonCard
+            icon={IconOxygenSoftware}
+            title={'软件信息'}
+            loading={softwareInfoData === undefined}
+        >
+            <FlexBox className={'card-content'} direction={'horizontal'}>
+                <FlexBox className={'key'}>
+                    <div>操作系统</div>
+                    <div>位数</div>
+                    <div>Java</div>
+                    <div>Java 供应商</div>
+                    <div>Runtime</div>
+                    <div>JVM</div>
+                    <div>JVM 供应商</div>
+                    <div>操作系统启动时间</div>
+                    <div>后端服务器启动时间</div>
+                </FlexBox>
+                <FlexBox className={'value'}>
+                    <div title={softwareInfoData?.os}>{softwareInfoData?.os}</div>
+                    <div title={softwareInfoData?.bitness.toString()}>
+                        {softwareInfoData?.bitness}
+                    </div>
+                    <div
+                        title={`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}
+                    >{`${softwareInfoData?.javaVersion} (${softwareInfoData?.javaVersionDate})`}</div>
+                    <div title={softwareInfoData?.javaVendor}>{softwareInfoData?.javaVendor}</div>
+                    <div
+                        title={`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}
+                    >{`${softwareInfoData?.javaRuntime} (build ${softwareInfoData?.javaRuntimeVersion})`}</div>
+                    <div
+                        title={`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}
+                    >{`${softwareInfoData?.jvm} (build ${softwareInfoData?.jvmVersion}, ${softwareInfoData?.jvmInfo})`}</div>
+                    <div title={softwareInfoData?.jvmVendor}>{softwareInfoData?.jvmVendor}</div>
+                    <div>
+                        {softwareInfoData?.osBootTime &&
+                            utcToLocalTime(softwareInfoData?.osBootTime)}
+                    </div>
+                    <div>
+                        {softwareInfoData?.serverStartupTime &&
+                            utcToLocalTime(softwareInfoData.serverStartupTime)}
+                    </div>
+                </FlexBox>
+            </FlexBox>
+        </CommonCard>
+    )
+}
+
+export default SoftwareInfo
diff --git a/src/pages/system/statistics/StorageInfo.tsx b/src/pages/system/statistics/StorageInfo.tsx
new file mode 100644
index 0000000..318c65d
--- /dev/null
+++ b/src/pages/system/statistics/StorageInfo.tsx
@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from 'react'
+import * as echarts from 'echarts/core'
+import { BarSeriesOption } from 'echarts/charts'
+import { formatByteSize } from '@/util/common'
+import { useUpdatedEffect } from '@/util/hooks'
+import { r_sys_statistics_storage } from '@/services/system'
+import FlexBox from '@/components/common/FlexBox'
+import {
+    barDefaultSeriesOption,
+    barEChartsBaseOption,
+    EChartsOption
+} from '@/pages/system/statistics/shared'
+import { CommonCard } from '@/pages/system/statistics'
+
+const StorageInfo: React.FC = () => {
+    const keyDivRef = useRef<HTMLDivElement>(null)
+    const percentDivRef = useRef<HTMLDivElement>(null)
+    const storageInfoDivRef = useRef<HTMLDivElement>(null)
+    const storageInfoEChartsRef = useRef<echarts.EChartsType[]>([])
+    const [isLoading, setIsLoading] = useState(true)
+    const [refreshInterval, setRefreshInterval] = useState('5')
+    const [storageInfoEChartsOption, setStorageInfoEChartsOption] = useState<EChartsOption[]>([])
+
+    const storageDefaultSeriesOption: BarSeriesOption = {
+        ...barDefaultSeriesOption,
+        tooltip: { valueFormatter: (value) => formatByteSize(value as number) }
+    }
+
+    useUpdatedEffect(() => {
+        const chartResizeObserver = new ResizeObserver(() => {
+            storageInfoEChartsRef.current.forEach((value) => value.resize())
+        })
+
+        storageInfoDivRef.current && chartResizeObserver.observe(storageInfoDivRef.current)
+
+        return () => {
+            storageInfoDivRef.current && chartResizeObserver.unobserve(storageInfoDivRef.current)
+        }
+    }, [storageInfoDivRef.current])
+
+    useUpdatedEffect(() => {
+        const intervalId = setInterval(getStorageInfo(), parseInt(refreshInterval) * 1000)
+
+        return () => {
+            clearInterval(intervalId)
+        }
+    }, [refreshInterval])
+
+    const getStorageInfo = () => {
+        void r_sys_statistics_storage().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                if (data) {
+                    if (isLoading) {
+                        setIsLoading(false)
+                    }
+
+                    setTimeout(() => {
+                        const eChartsOptions = [
+                            storageInfoVoToStorageEChartsOption(
+                                '物理内存',
+                                data.memoryTotal - data.memoryFree,
+                                data.memoryFree
+                            ),
+                            storageInfoVoToStorageEChartsOption(
+                                '虚拟内存',
+                                data.virtualMemoryInUse,
+                                data.virtualMemoryMax - data.virtualMemoryInUse
+                            ),
+                            storageInfoVoToStorageEChartsOption(
+                                'swap',
+                                data.swapUsed,
+                                data.swapTotal - data.swapUsed
+                            ),
+                            storageInfoVoToStorageEChartsOption(
+                                'jvm 内存',
+                                data.jvmTotal - data.jvmFree,
+                                data.jvmFree
+                            )
+                        ]
+                        data.fileStores.forEach((value) =>
+                            eChartsOptions.push(
+                                storageInfoVoToStorageEChartsOption(
+                                    value.mount,
+                                    value.total - value.free,
+                                    value.free
+                                )
+                            )
+                        )
+                        setStorageInfoEChartsOption(eChartsOptions)
+
+                        if (percentDivRef.current && keyDivRef.current) {
+                            keyDivRef.current.innerHTML = ''
+                            percentDivRef.current.innerHTML = ''
+                            eChartsOptions.forEach((value) => {
+                                const keyElement = document.createElement('div')
+                                const percentElement = document.createElement('div')
+                                keyElement.innerText = value.yAxis.data[0]
+                                percentElement.innerText = `${(
+                                    (value.series[0].data[0] /
+                                        (value.series[0].data[0] + value.series[1].data[0])) *
+                                    100
+                                ).toFixed(2)}%`
+
+                                keyDivRef.current?.appendChild(keyElement)
+                                percentDivRef.current?.appendChild(percentElement)
+                            })
+                        }
+
+                        if (!storageInfoEChartsRef.current.length) {
+                            storageInfoDivRef.current && (storageInfoDivRef.current.innerHTML = '')
+
+                            eChartsOptions.forEach(() => {
+                                const element = document.createElement('div')
+                                storageInfoDivRef.current?.appendChild(element)
+                                storageInfoEChartsRef.current.push(
+                                    echarts.init(element, null, { renderer: 'svg' })
+                                )
+                            })
+                        }
+                    })
+                }
+            }
+        })
+
+        return getStorageInfo
+    }
+
+    const storageInfoVoToStorageEChartsOption = (label: string, used: number, free: number) => ({
+        ...barEChartsBaseOption,
+        xAxis: {
+            ...barEChartsBaseOption.xAxis,
+            max: used + free
+        },
+        yAxis: {
+            ...barEChartsBaseOption.yAxis,
+            data: [label]
+        },
+        series: [
+            {
+                ...storageDefaultSeriesOption,
+                name: 'used',
+                data: [used]
+            },
+            {
+                ...storageDefaultSeriesOption,
+                name: 'free',
+                data: [free]
+            }
+        ]
+    })
+
+    useEffect(() => {
+        storageInfoEChartsRef.current?.forEach((value, index) => {
+            try {
+                value.setOption(storageInfoEChartsOption[index])
+            } catch (e) {
+                /* empty */
+            }
+        })
+    }, [storageInfoEChartsOption])
+
+    return (
+        <>
+            <CommonCard
+                icon={IconOxygenMemory}
+                title={'内存信息'}
+                loading={isLoading}
+                expand={
+                    <AntdSelect
+                        value={refreshInterval}
+                        onChange={(value) => setRefreshInterval(value)}
+                    >
+                        <AntdSelect.Option key={1}>1秒</AntdSelect.Option>
+                        <AntdSelect.Option key={2}>2秒</AntdSelect.Option>
+                        <AntdSelect.Option key={3}>3秒</AntdSelect.Option>
+                        <AntdSelect.Option key={5}>5秒</AntdSelect.Option>
+                        <AntdSelect.Option key={10}>10秒</AntdSelect.Option>
+                        <AntdSelect.Option key={15}>15秒</AntdSelect.Option>
+                        <AntdSelect.Option key={20}>20秒</AntdSelect.Option>
+                        <AntdSelect.Option key={30}>30秒</AntdSelect.Option>
+                        <AntdSelect.Option key={60}>60秒</AntdSelect.Option>
+                        <AntdSelect.Option key={120}>2分</AntdSelect.Option>
+                        <AntdSelect.Option key={180}>3分</AntdSelect.Option>
+                        <AntdSelect.Option key={300}>5分</AntdSelect.Option>
+                        <AntdSelect.Option key={600}>10分</AntdSelect.Option>
+                    </AntdSelect>
+                }
+            >
+                <FlexBox className={'card-content'} direction={'horizontal'}>
+                    <FlexBox className={'key'} ref={keyDivRef} />
+                    <FlexBox className={'value-chart'} ref={storageInfoDivRef} />
+                    <FlexBox className={'value-percent'} ref={percentDivRef} />
+                </FlexBox>
+            </CommonCard>
+        </>
+    )
+}
+
+export default StorageInfo
diff --git a/src/pages/system/statistics/index.tsx b/src/pages/system/statistics/index.tsx
new file mode 100644
index 0000000..587fb15
--- /dev/null
+++ b/src/pages/system/statistics/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import '@/assets/css/pages/system/statistics.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import LoadingMask from '@/components/common/LoadingMask'
+import Permission from '@/components/common/Permission'
+import OnlineInfo from '@/pages/system/statistics/OnlineInfo'
+import ActiveInfo from '@/pages/system/statistics/ActiveInfo'
+import SoftwareInfo from '@/pages/system/statistics/SoftwareInfo'
+import HardwareInfo from '@/pages/system/statistics/HardwareInfo'
+import CPUInfo from '@/pages/system/statistics/CPUInfo'
+import StorageInfo from '@/pages/system/statistics/StorageInfo'
+
+interface CommonCardProps extends React.PropsWithChildren {
+    icon: IconComponent
+    title: React.ReactNode
+    loading?: boolean
+    expand?: React.ReactNode
+}
+
+export const CommonCard: React.FC<CommonCardProps> = (props) => {
+    return (
+        <Card style={{ overflow: 'visible' }}>
+            <FlexBox className={'common-card'}>
+                <FlexBox direction={'horizontal'} className={'head'}>
+                    <Icon component={props.icon} className={'icon'} />
+                    <div className={'title'}>{props.title}</div>
+                    {props.expand}
+                </FlexBox>
+                <LoadingMask
+                    hidden={!props.loading}
+                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
+                >
+                    {props.children}
+                </LoadingMask>
+            </FlexBox>
+        </Card>
+    )
+}
+
+const Statistics: React.FC = () => {
+    return (
+        <>
+            <FitFullscreen data-component={'system-statistics'}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <Permission operationCode={'system:statistics:query:usage'}>
+                            <OnlineInfo />
+                            <ActiveInfo />
+                        </Permission>
+                        <Permission operationCode={'system:statistics:query:base'}>
+                            <HardwareInfo />
+                            <SoftwareInfo />
+                        </Permission>
+                        <Permission operationCode={'system:statistics:query:real'}>
+                            <CPUInfo />
+                            <StorageInfo />
+                        </Permission>
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullscreen>
+        </>
+    )
+}
+
+export default Statistics
diff --git a/src/pages/system/statistics/shared.ts b/src/pages/system/statistics/shared.ts
new file mode 100644
index 0000000..31fb6b4
--- /dev/null
+++ b/src/pages/system/statistics/shared.ts
@@ -0,0 +1,128 @@
+import * as echarts from 'echarts/core'
+import {
+    DataZoomComponent,
+    DataZoomComponentOption,
+    GridComponent,
+    GridComponentOption,
+    LegendComponent,
+    LegendComponentOption,
+    ToolboxComponent,
+    ToolboxComponentOption,
+    TooltipComponent,
+    TooltipComponentOption
+} from 'echarts/components'
+import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
+import { SVGRenderer } from 'echarts/renderers'
+import { UniversalTransition } from 'echarts/features'
+import { CallbackDataParams } from 'echarts/types/dist/shared'
+import { utcToLocalTime } from '@/util/datetime.tsx'
+
+echarts.use([
+    TooltipComponent,
+    ToolboxComponent,
+    GridComponent,
+    LegendComponent,
+    DataZoomComponent,
+    BarChart,
+    LineChart,
+    SVGRenderer,
+    UniversalTransition
+])
+
+export type EChartsOption = echarts.ComposeOption<
+    | TooltipComponentOption
+    | ToolboxComponentOption
+    | GridComponentOption
+    | LegendComponentOption
+    | BarSeriesOption
+    | DataZoomComponentOption
+    | LineSeriesOption
+>
+
+export const barDefaultSeriesOption: BarSeriesOption = {
+    type: 'bar',
+    stack: 'total',
+    itemStyle: {
+        color: (params) => {
+            switch (params.seriesName) {
+                case 'idle':
+                case 'free':
+                    return '#F5F5F5'
+                default:
+                    return params.color ?? echarts.color.random()
+            }
+        }
+    }
+}
+
+export const barEChartsBaseOption: EChartsOption = {
+    tooltip: {},
+    xAxis: {
+        show: false
+    },
+    yAxis: {
+        axisLine: {
+            show: false
+        },
+        axisLabel: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            show: false
+        },
+        axisPointer: {
+            show: false
+        }
+    }
+}
+
+export const getTooltipTimeFormatter = (format: string = 'yyyy-MM-DD HH:mm:ss') => {
+    return (params: CallbackDataParams[]) =>
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        `${utcToLocalTime(params[0].data[0], format)}<br>${params
+            .map(
+                (param) =>
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-expect-error
+                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                    `<span style="display: flex; justify-content: space-between;"><span>${param.marker}${param.seriesName}</span><span style="font-weight: bold; margin-left: 16px;">${param.data[1]}</span></span>`
+            )
+            .join('')}`
+}
+
+export const lineEChartsBaseOption: EChartsOption = {
+    tooltip: {
+        trigger: 'axis'
+    },
+    legend: {},
+    toolbox: {
+        feature: {
+            dataZoom: {
+                yAxisIndex: 'none'
+            },
+            restore: {},
+            saveAsImage: {}
+        }
+    },
+    xAxis: {
+        type: 'time'
+    },
+    yAxis: {
+        type: 'value',
+        interval: 1
+    },
+    dataZoom: [
+        {
+            type: 'inside',
+            start: 0,
+            end: 100,
+            minValueSpan: 2 * 60 * 60 * 1000
+        }
+    ],
+    series: [{}]
+}
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 9dcade6..1c35dd6 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -15,7 +15,7 @@ const system: RouteJsonObject[] = [
         path: 'statistics',
         absolutePath: '/system/statistics',
         id: 'system-statistics',
-        component: React.lazy(() => import('@/pages/system/Statistics')),
+        component: React.lazy(() => import('@/pages/system/statistics')),
         name: '系统概况',
         icon: React.lazy(() => import('~icons/oxygen/chart.jsx')),
         menu: true,

From bcd7b761acc18c03cb512031f2c6a02a71e4f517 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 3 Jan 2024 15:16:48 +0800
Subject: [PATCH 150/307] Optimize code

---
 src/components/common/Card.tsx                |    5 +-
 src/components/common/FitCenter.tsx           |    5 +-
 src/components/common/FitFullscreen.tsx       |   31 +-
 src/components/common/FlexBox.tsx             |   27 +-
 src/components/common/HideScrollbar.tsx       | 1062 +++++++++--------
 src/components/common/Indicator.tsx           |    4 +-
 .../common/sidebar/SidebarSeparate.tsx        |    6 +-
 src/pages/system/index.tsx                    |   58 +-
 src/pages/system/statistics/shared.ts         |    2 +-
 src/router/system.tsx                         |    2 +-
 10 files changed, 609 insertions(+), 593 deletions(-)

diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx
index 633326e..aaf0fa9 100644
--- a/src/components/common/Card.tsx
+++ b/src/components/common/Card.tsx
@@ -4,9 +4,8 @@ import '@/assets/css/components/common/card.scss'
 interface CardProps
     extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
 
-const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
-    const { className, ..._props } = props
-    return <div className={`card-box${className ? ` ${className}` : ''}`} {..._props} ref={ref} />
+const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
+    return <div className={`card-box${className ? ` ${className}` : ''}`} {...props} ref={ref} />
 })
 
 export default Card
diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx
index 44f7449..d735fcf 100644
--- a/src/components/common/FitCenter.tsx
+++ b/src/components/common/FitCenter.tsx
@@ -6,14 +6,13 @@ interface FitCenterProps
     vertical?: boolean
 }
 
-const FitCenter: React.FC<FitCenterProps> = (props) => {
-    const { className, vertical, ..._props } = props
+const FitCenter: React.FC<FitCenterProps> = ({ className, vertical, ...props }) => {
     return (
         <div
             className={`fit-center${className ? ` ${className}` : ''}${
                 vertical ? ' flex-vertical' : ' flex-horizontal'
             }`}
-            {..._props}
+            {...props}
         />
     )
 }
diff --git a/src/components/common/FitFullscreen.tsx b/src/components/common/FitFullscreen.tsx
index 09d3658..e236247 100644
--- a/src/components/common/FitFullscreen.tsx
+++ b/src/components/common/FitFullscreen.tsx
@@ -7,20 +7,21 @@ interface FitFullscreenProps
     backgroundColor?: string
 }
 
-const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => {
-    const { zIndex, backgroundColor, className, style, ..._props } = props
-    return (
-        <div
-            className={`fit-fullscreen${className ? ` ${className}` : ''}`}
-            style={{
-                zIndex,
-                backgroundColor,
-                ...style
-            }}
-            ref={ref}
-            {..._props}
-        />
-    )
-})
+const FitFullscreen = forwardRef<HTMLDivElement, FitFullscreenProps>(
+    ({ zIndex, backgroundColor, className, style, ...props }, ref) => {
+        return (
+            <div
+                className={`fit-fullscreen${className ? ` ${className}` : ''}`}
+                style={{
+                    zIndex,
+                    backgroundColor,
+                    ...style
+                }}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
 
 export default FitFullscreen
diff --git a/src/components/common/FlexBox.tsx b/src/components/common/FlexBox.tsx
index e9b3271..606ce43 100644
--- a/src/components/common/FlexBox.tsx
+++ b/src/components/common/FlexBox.tsx
@@ -7,18 +7,19 @@ interface FlexBoxProps
     gap?: number
 }
 
-const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>((props, ref) => {
-    const { className, direction, gap, style, ..._props } = props
-    return (
-        <div
-            className={`flex-box ${
-                direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
-            }${className ? ` ${className}` : ''}`}
-            style={{ gap, ...style }}
-            {..._props}
-            ref={ref}
-        />
-    )
-})
+const FlexBox = forwardRef<HTMLDivElement, FlexBoxProps>(
+    ({ className, direction, gap, style, ...props }, ref) => {
+        return (
+            <div
+                className={`flex-box ${
+                    direction === 'horizontal' ? 'flex-horizontal' : 'flex-vertical'
+                }${className ? ` ${className}` : ''}`}
+                style={{ gap, ...style }}
+                {...props}
+                ref={ref}
+            />
+        )
+    }
+)
 
 export default FlexBox
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 6200598..f444182 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -49,557 +49,575 @@ export interface HideScrollbarElement {
     refreshLayout(): void
 }
 
-const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((props, ref) => {
-    useImperativeHandle<HideScrollbarElement, HideScrollbarElement>(
-        ref,
-        () => {
-            return {
-                scrollTo(x, y, smooth?: boolean) {
+const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
+    (
+        {
+            isPreventScroll,
+            isPreventVerticalScroll,
+            isPreventHorizontalScroll,
+            isShowVerticalScrollbar,
+            isHiddenVerticalScrollbarWhenFull,
+            isShowHorizontalScrollbar,
+            isHiddenHorizontalScrollbarWhenFull,
+            minWidth,
+            minHeight,
+            scrollbarWidth,
+            autoHideWaitingTime,
+            children,
+            style,
+            className,
+            ...props
+        },
+        ref
+    ) => {
+        useImperativeHandle<HideScrollbarElement, HideScrollbarElement>(
+            ref,
+            () => {
+                return {
+                    scrollTo(x, y, smooth?: boolean) {
+                        rootRef.current?.scrollTo({
+                            left: x,
+                            top: y,
+                            behavior: smooth === false ? 'instant' : 'smooth'
+                        })
+                    },
+                    scrollX(x, smooth?: boolean) {
+                        rootRef.current?.scrollTo({
+                            left: x,
+                            behavior: smooth === false ? 'instant' : 'smooth'
+                        })
+                    },
+                    scrollY(y, smooth?: boolean) {
+                        rootRef.current?.scrollTo({
+                            top: y,
+                            behavior: smooth === false ? 'instant' : 'smooth'
+                        })
+                    },
+                    scrollLeft(length, smooth?: boolean) {
+                        rootRef.current?.scrollTo({
+                            left: rootRef.current?.scrollLeft - length,
+                            behavior: smooth === false ? 'instant' : 'smooth'
+                        })
+                    },
+                    scrollRight(length, smooth?: boolean) {
+                        rootRef.current?.scrollTo({
+                            left: rootRef.current?.scrollLeft + length,
+                            behavior: smooth === false ? 'instant' : 'smooth'
+                        })
+                    },
+                    scrollUp(length, smooth?: boolean) {
+                        rootRef.current?.scrollTo({
+                            top: rootRef.current?.scrollTop - length,
+                            behavior: smooth === false ? 'instant' : 'smooth'
+                        })
+                    },
+                    scrollDown(length, smooth?: boolean) {
+                        rootRef.current?.scrollTo({
+                            top: rootRef.current?.scrollTop + length,
+                            behavior: smooth === false ? 'instant' : 'smooth'
+                        })
+                    },
+                    getX() {
+                        return rootRef.current?.scrollLeft ?? 0
+                    },
+                    getY() {
+                        return rootRef.current?.scrollTop ?? 0
+                    },
+                    addEventListenerWithType<K extends keyof HTMLElementEventMap>(
+                        type: K,
+                        listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => never,
+                        options?: boolean | AddEventListenerOptions
+                    ): void {
+                        rootRef.current?.addEventListener<K>(type, listener, options)
+                    },
+                    addEventListener(
+                        type: string,
+                        listener: EventListenerOrEventListenerObject,
+                        options?: boolean | AddEventListenerOptions
+                    ): void {
+                        rootRef.current?.addEventListener(type, listener, options)
+                    },
+                    removeEventListenerWithType<K extends keyof HTMLElementEventMap>(
+                        type: K,
+                        listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => never,
+                        options?: boolean | EventListenerOptions
+                    ): void {
+                        rootRef.current?.removeEventListener<K>(type, listener, options)
+                    },
+                    removeEventListener(
+                        type: string,
+                        listener: EventListenerOrEventListenerObject,
+                        options?: boolean | EventListenerOptions
+                    ): void {
+                        rootRef.current?.removeEventListener(type, listener, options)
+                    },
+                    refreshLayout(): void {
+                        refreshLayout()
+                    }
+                }
+            },
+            []
+        )
+
+        const maskRef = useRef<HTMLDivElement>(null)
+        const rootRef = useRef<HTMLDivElement>(null)
+        const contentRef = useRef<HTMLDivElement>(null)
+        const wheelListenerRef = useRef<(event: WheelEvent) => void>(() => undefined)
+        const lastScrollbarClickPositionRef = useRef({ x: -1, y: -1 })
+        const lastScrollbarTouchPositionRef = useRef({ x: -1, y: -1 })
+        const lastTouchPositionRef = useRef({ x: -1, y: -1 })
+        const [refreshTime, setRefreshTime] = useState(0)
+
+        const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
+        const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
+        const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
+        const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false)
+        const [verticalScrollbarOnTouch, setVerticalScrollbarOnTouch] = useState(false)
+        const [verticalScrollbarAutoHide, setVerticalScrollbarAutoHide] = useState(false)
+
+        const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
+        const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100)
+        const [horizontalScrollbarPosition, setHorizontalScrollbarPosition] = useState(0)
+        const [horizontalScrollbarOnClick, setHorizontalScrollbarOnClick] = useState(false)
+        const [horizontalScrollbarOnTouch, setHorizontalScrollbarOnTouch] = useState(false)
+        const [horizontalScrollbarAutoHide, setHorizontalScrollbarAutoHide] = useState(false)
+
+        const isPreventAnyScroll =
+            isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll
+
+        useEffect(() => {
+            if (autoHideWaitingTime === undefined) {
+                return
+            }
+            setVerticalScrollbarAutoHide(false)
+            if (autoHideWaitingTime > 0) {
+                setTimeout(() => {
+                    setVerticalScrollbarAutoHide(true)
+                }, autoHideWaitingTime)
+            }
+        }, [autoHideWaitingTime, verticalScrollbarPosition])
+
+        useEffect(() => {
+            if (autoHideWaitingTime === undefined) {
+                return
+            }
+            setHorizontalScrollbarAutoHide(false)
+            if (autoHideWaitingTime > 0) {
+                setTimeout(() => {
+                    setHorizontalScrollbarAutoHide(true)
+                }, autoHideWaitingTime)
+            }
+        }, [autoHideWaitingTime, horizontalScrollbarPosition])
+
+        const handleDefaultTouchStart = useCallback(
+            (event: React.TouchEvent) => {
+                if (event.touches.length !== 1 || isPreventScroll) {
+                    lastTouchPositionRef.current = { x: -1, y: -1 }
+                    return
+                }
+
+                const { clientX, clientY } = event.touches[0]
+                lastTouchPositionRef.current = { x: clientX, y: clientY }
+            },
+            [isPreventScroll]
+        )
+
+        const handleDefaultTouchmove = useCallback(
+            (event: React.TouchEvent) => {
+                if (event.touches.length !== 1 || isPreventScroll) {
+                    lastTouchPositionRef.current = { x: -1, y: -1 }
+                    return
+                }
+                const { clientX, clientY } = event.touches[0]
+
+                if (!isPreventVerticalScroll) {
                     rootRef.current?.scrollTo({
-                        left: x,
-                        top: y,
-                        behavior: smooth === false ? 'instant' : 'smooth'
+                        top:
+                            rootRef.current?.scrollTop + (lastTouchPositionRef.current.y - clientY),
+                        behavior: 'instant'
                     })
-                },
-                scrollX(x, smooth?: boolean) {
+                }
+
+                if (!isPreventHorizontalScroll) {
                     rootRef.current?.scrollTo({
-                        left: x,
-                        behavior: smooth === false ? 'instant' : 'smooth'
+                        left:
+                            rootRef.current?.scrollLeft +
+                            (lastTouchPositionRef.current.x - clientX),
+                        behavior: 'instant'
                     })
-                },
-                scrollY(y, smooth?: boolean) {
-                    rootRef.current?.scrollTo({
-                        top: y,
-                        behavior: smooth === false ? 'instant' : 'smooth'
-                    })
-                },
-                scrollLeft(length, smooth?: boolean) {
-                    rootRef.current?.scrollTo({
-                        left: rootRef.current?.scrollLeft - length,
-                        behavior: smooth === false ? 'instant' : 'smooth'
-                    })
-                },
-                scrollRight(length, smooth?: boolean) {
-                    rootRef.current?.scrollTo({
-                        left: rootRef.current?.scrollLeft + length,
-                        behavior: smooth === false ? 'instant' : 'smooth'
-                    })
-                },
-                scrollUp(length, smooth?: boolean) {
-                    rootRef.current?.scrollTo({
-                        top: rootRef.current?.scrollTop - length,
-                        behavior: smooth === false ? 'instant' : 'smooth'
-                    })
-                },
-                scrollDown(length, smooth?: boolean) {
-                    rootRef.current?.scrollTo({
-                        top: rootRef.current?.scrollTop + length,
-                        behavior: smooth === false ? 'instant' : 'smooth'
-                    })
-                },
-                getX() {
-                    return rootRef.current?.scrollLeft ?? 0
-                },
-                getY() {
-                    return rootRef.current?.scrollTop ?? 0
-                },
-                addEventListenerWithType<K extends keyof HTMLElementEventMap>(
-                    type: K,
-                    listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => never,
-                    options?: boolean | AddEventListenerOptions
-                ): void {
-                    rootRef.current?.addEventListener<K>(type, listener, options)
-                },
-                addEventListener(
-                    type: string,
-                    listener: EventListenerOrEventListenerObject,
-                    options?: boolean | AddEventListenerOptions
-                ): void {
-                    rootRef.current?.addEventListener(type, listener, options)
-                },
-                removeEventListenerWithType<K extends keyof HTMLElementEventMap>(
-                    type: K,
-                    listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => never,
-                    options?: boolean | EventListenerOptions
-                ): void {
-                    rootRef.current?.removeEventListener<K>(type, listener, options)
-                },
-                removeEventListener(
-                    type: string,
-                    listener: EventListenerOrEventListenerObject,
-                    options?: boolean | EventListenerOptions
-                ): void {
-                    rootRef.current?.removeEventListener(type, listener, options)
-                },
-                refreshLayout(): void {
-                    refreshLayout()
+                }
+
+                lastTouchPositionRef.current = { x: clientX, y: clientY }
+            },
+            [isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
+        )
+
+        const handleDefaultMouseDown = (event: React.MouseEvent) => {
+            if (isPreventAnyScroll)
+                if (event.button === 1) {
+                    event.preventDefault()
+                }
+        }
+
+        const handleDefaultKeyDown = useCallback(
+            (event: React.KeyboardEvent) => {
+                if (
+                    isPreventScroll &&
+                    [
+                        'ArrowUp',
+                        'ArrowDown',
+                        'ArrowLeft',
+                        'ArrowRight',
+                        ' ',
+                        '',
+                        'PageUp',
+                        'PageDown',
+                        'Home',
+                        'End'
+                    ].find((value) => value === event.key)
+                ) {
+                    event.preventDefault()
+                }
+                if (
+                    isPreventVerticalScroll &&
+                    ['ArrowUp', 'ArrowDown', ' ', '', 'PageUp', 'PageDown', 'Home', 'End'].find(
+                        (value) => value === event.key
+                    )
+                ) {
+                    event.preventDefault()
+                }
+                if (
+                    isPreventHorizontalScroll &&
+                    ['ArrowLeft', 'ArrowRight'].find((value) => value === event.key)
+                ) {
+                    event.preventDefault()
+                }
+            },
+            [isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
+        )
+
+        const handleScrollbarMouseEvent = (eventFlag: string, scrollbarFlag: string) => {
+            return (event: React.MouseEvent) => {
+                switch (eventFlag) {
+                    case 'down':
+                        lastScrollbarClickPositionRef.current = {
+                            x: event.clientX,
+                            y: event.clientY
+                        }
+                        switch (scrollbarFlag) {
+                            case 'vertical':
+                                setVerticalScrollbarOnClick(true)
+                                break
+                            case 'horizontal':
+                                setHorizontalScrollbarOnClick(true)
+                                break
+                        }
+                        break
+                    case 'up':
+                    case 'leave':
+                        setVerticalScrollbarOnClick(false)
+                        setHorizontalScrollbarOnClick(false)
+                        break
+                    case 'move':
+                        if (verticalScrollbarOnClick) {
+                            rootRef.current?.scrollTo({
+                                top:
+                                    rootRef.current?.scrollTop +
+                                    ((event.clientY - lastScrollbarClickPositionRef.current.y) /
+                                        (rootRef.current?.clientHeight ?? 1)) *
+                                        (contentRef.current?.clientHeight ?? 0),
+                                behavior: 'instant'
+                            })
+                        }
+                        if (horizontalScrollbarOnClick) {
+                            rootRef.current?.scrollTo({
+                                left:
+                                    rootRef.current?.scrollLeft +
+                                    ((event.clientX - lastScrollbarClickPositionRef.current.x) /
+                                        (rootRef.current?.clientWidth ?? 1)) *
+                                        (contentRef.current?.clientWidth ?? 0),
+                                behavior: 'instant'
+                            })
+                        }
+                        lastScrollbarClickPositionRef.current = {
+                            x: event.clientX,
+                            y: event.clientY
+                        }
                 }
             }
-        },
-        []
-    )
-
-    const maskRef = useRef<HTMLDivElement>(null)
-    const rootRef = useRef<HTMLDivElement>(null)
-    const contentRef = useRef<HTMLDivElement>(null)
-    const wheelListenerRef = useRef<(event: WheelEvent) => void>(() => undefined)
-    const lastScrollbarClickPositionRef = useRef({ x: -1, y: -1 })
-    const lastScrollbarTouchPositionRef = useRef({ x: -1, y: -1 })
-    const lastTouchPositionRef = useRef({ x: -1, y: -1 })
-    const [refreshTime, setRefreshTime] = useState(0)
-
-    const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
-    const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
-    const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
-    const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false)
-    const [verticalScrollbarOnTouch, setVerticalScrollbarOnTouch] = useState(false)
-    const [verticalScrollbarAutoHide, setVerticalScrollbarAutoHide] = useState(false)
-
-    const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
-    const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100)
-    const [horizontalScrollbarPosition, setHorizontalScrollbarPosition] = useState(0)
-    const [horizontalScrollbarOnClick, setHorizontalScrollbarOnClick] = useState(false)
-    const [horizontalScrollbarOnTouch, setHorizontalScrollbarOnTouch] = useState(false)
-    const [horizontalScrollbarAutoHide, setHorizontalScrollbarAutoHide] = useState(false)
-
-    const {
-        isPreventScroll,
-        isPreventVerticalScroll,
-        isPreventHorizontalScroll,
-        isShowVerticalScrollbar,
-        isHiddenVerticalScrollbarWhenFull,
-        isShowHorizontalScrollbar,
-        isHiddenHorizontalScrollbarWhenFull,
-        minWidth,
-        minHeight,
-        scrollbarWidth,
-        autoHideWaitingTime,
-        children,
-        style,
-        className,
-        ..._props
-    } = props
-
-    const isPreventAnyScroll =
-        isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll
-
-    useEffect(() => {
-        if (autoHideWaitingTime === undefined) {
-            return
         }
-        setVerticalScrollbarAutoHide(false)
-        if (autoHideWaitingTime > 0) {
-            setTimeout(() => {
-                setVerticalScrollbarAutoHide(true)
-            }, autoHideWaitingTime)
+
+        const handleScrollbarTouchEvent = (eventFlag: string, scrollbarFlag: string) => {
+            return (event: React.TouchEvent) => {
+                switch (eventFlag) {
+                    case 'start':
+                        if (event.touches.length !== 1) {
+                            return
+                        }
+                        lastScrollbarTouchPositionRef.current = {
+                            x: event.touches[0].clientX,
+                            y: event.touches[0].clientY
+                        }
+                        switch (scrollbarFlag) {
+                            case 'vertical':
+                                setVerticalScrollbarOnTouch(true)
+                                break
+                            case 'horizontal':
+                                setHorizontalScrollbarOnTouch(true)
+                                break
+                        }
+                        break
+                    case 'end':
+                    case 'cancel':
+                        setVerticalScrollbarOnTouch(false)
+                        setHorizontalScrollbarOnTouch(false)
+                        break
+                    case 'move':
+                        if (event.touches.length !== 1) {
+                            return
+                        }
+                        if (verticalScrollbarOnTouch) {
+                            rootRef.current?.scrollTo({
+                                top:
+                                    rootRef.current?.scrollTop +
+                                    ((event.touches[0].clientY -
+                                        lastScrollbarClickPositionRef.current.y) /
+                                        (rootRef.current?.clientHeight ?? 1)) *
+                                        (contentRef.current?.clientHeight ?? 0),
+                                behavior: 'instant'
+                            })
+                        }
+                        if (horizontalScrollbarOnTouch) {
+                            rootRef.current?.scrollTo({
+                                left:
+                                    rootRef.current?.scrollLeft +
+                                    ((event.touches[0].clientX -
+                                        lastScrollbarClickPositionRef.current.x) /
+                                        (rootRef.current?.clientWidth ?? 1)) *
+                                        (contentRef.current?.clientWidth ?? 0),
+                                behavior: 'instant'
+                            })
+                        }
+                        lastScrollbarClickPositionRef.current = {
+                            x: event.touches[0].clientX,
+                            y: event.touches[0].clientY
+                        }
+                }
+            }
         }
-    }, [autoHideWaitingTime, verticalScrollbarPosition])
 
-    useEffect(() => {
-        if (autoHideWaitingTime === undefined) {
-            return
+        const handleDefaultScroll = () => {
+            setVerticalScrollbarPosition(
+                ((rootRef.current?.scrollTop ?? 0) / (contentRef.current?.clientHeight ?? 1)) * 100
+            )
+            setHorizontalScrollbarPosition(
+                ((rootRef.current?.scrollLeft ?? 0) / (contentRef.current?.clientWidth ?? 1)) * 100
+            )
         }
-        setHorizontalScrollbarAutoHide(false)
-        if (autoHideWaitingTime > 0) {
-            setTimeout(() => {
-                setHorizontalScrollbarAutoHide(true)
-            }, autoHideWaitingTime)
+
+        const refreshLayout = () => {
+            setRefreshTime(Date.now())
         }
-    }, [autoHideWaitingTime, horizontalScrollbarPosition])
 
-    const handleDefaultTouchStart = useCallback(
-        (event: React.TouchEvent) => {
-            if (event.touches.length !== 1 || isPreventScroll) {
-                lastTouchPositionRef.current = { x: -1, y: -1 }
-                return
-            }
+        const reloadScrollbar = () => {
+            setVerticalScrollbarWidth(
+                (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
+            )
+            setHorizontalScrollbarWidth(
+                (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
+            )
 
-            const { clientX, clientY } = event.touches[0]
-            lastTouchPositionRef.current = { x: clientX, y: clientY }
-        },
-        [isPreventScroll]
-    )
-
-    const handleDefaultTouchmove = useCallback(
-        (event: React.TouchEvent) => {
-            if (event.touches.length !== 1 || isPreventScroll) {
-                lastTouchPositionRef.current = { x: -1, y: -1 }
-                return
-            }
-            const { clientX, clientY } = event.touches[0]
-
-            if (!isPreventVerticalScroll) {
-                rootRef.current?.scrollTo({
-                    top: rootRef.current?.scrollTop + (lastTouchPositionRef.current.y - clientY),
-                    behavior: 'instant'
-                })
-            }
-
-            if (!isPreventHorizontalScroll) {
-                rootRef.current?.scrollTo({
-                    left: rootRef.current?.scrollLeft + (lastTouchPositionRef.current.x - clientX),
-                    behavior: 'instant'
-                })
-            }
-
-            lastTouchPositionRef.current = { x: clientX, y: clientY }
-        },
-        [isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
-    )
-
-    const handleDefaultMouseDown = (event: React.MouseEvent) => {
-        if (isPreventAnyScroll)
-            if (event.button === 1) {
-                event.preventDefault()
-            }
-    }
-
-    const handleDefaultKeyDown = useCallback(
-        (event: React.KeyboardEvent) => {
-            if (
-                isPreventScroll &&
-                [
-                    'ArrowUp',
-                    'ArrowDown',
-                    'ArrowLeft',
-                    'ArrowRight',
-                    ' ',
-                    '',
-                    'PageUp',
-                    'PageDown',
-                    'Home',
-                    'End'
-                ].find((value) => value === event.key)
-            ) {
-                event.preventDefault()
-            }
-            if (
-                isPreventVerticalScroll &&
-                ['ArrowUp', 'ArrowDown', ' ', '', 'PageUp', 'PageDown', 'Home', 'End'].find(
-                    (value) => value === event.key
+            rootRef.current &&
+                setVerticalScrollbarLength(
+                    (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
                 )
-            ) {
-                event.preventDefault()
-            }
-            if (
-                isPreventHorizontalScroll &&
-                ['ArrowLeft', 'ArrowRight'].find((value) => value === event.key)
-            ) {
-                event.preventDefault()
-            }
-        },
-        [isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
-    )
 
-    const handleScrollbarMouseEvent = (eventFlag: string, scrollbarFlag: string) => {
-        return (event: React.MouseEvent) => {
-            switch (eventFlag) {
-                case 'down':
-                    lastScrollbarClickPositionRef.current = { x: event.clientX, y: event.clientY }
-                    switch (scrollbarFlag) {
-                        case 'vertical':
-                            setVerticalScrollbarOnClick(true)
-                            break
-                        case 'horizontal':
-                            setHorizontalScrollbarOnClick(true)
-                            break
-                    }
-                    break
-                case 'up':
-                case 'leave':
-                    setVerticalScrollbarOnClick(false)
-                    setHorizontalScrollbarOnClick(false)
-                    break
-                case 'move':
-                    if (verticalScrollbarOnClick) {
-                        rootRef.current?.scrollTo({
-                            top:
-                                rootRef.current?.scrollTop +
-                                ((event.clientY - lastScrollbarClickPositionRef.current.y) /
-                                    (rootRef.current?.clientHeight ?? 1)) *
-                                    (contentRef.current?.clientHeight ?? 0),
-                            behavior: 'instant'
-                        })
-                    }
-                    if (horizontalScrollbarOnClick) {
-                        rootRef.current?.scrollTo({
-                            left:
-                                rootRef.current?.scrollLeft +
-                                ((event.clientX - lastScrollbarClickPositionRef.current.x) /
-                                    (rootRef.current?.clientWidth ?? 1)) *
-                                    (contentRef.current?.clientWidth ?? 0),
-                            behavior: 'instant'
-                        })
-                    }
-                    lastScrollbarClickPositionRef.current = {
-                        x: event.clientX,
-                        y: event.clientY
-                    }
-            }
+            rootRef.current &&
+                setHorizontalScrollbarLength(
+                    (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
+                )
+
+            refreshLayout()
         }
-    }
 
-    const handleScrollbarTouchEvent = (eventFlag: string, scrollbarFlag: string) => {
-        return (event: React.TouchEvent) => {
-            switch (eventFlag) {
-                case 'start':
-                    if (event.touches.length !== 1) {
-                        return
-                    }
-                    lastScrollbarTouchPositionRef.current = {
-                        x: event.touches[0].clientX,
-                        y: event.touches[0].clientY
-                    }
-                    switch (scrollbarFlag) {
-                        case 'vertical':
-                            setVerticalScrollbarOnTouch(true)
-                            break
-                        case 'horizontal':
-                            setHorizontalScrollbarOnTouch(true)
-                            break
-                    }
-                    break
-                case 'end':
-                case 'cancel':
-                    setVerticalScrollbarOnTouch(false)
-                    setHorizontalScrollbarOnTouch(false)
-                    break
-                case 'move':
-                    if (event.touches.length !== 1) {
-                        return
-                    }
-                    if (verticalScrollbarOnTouch) {
-                        rootRef.current?.scrollTo({
-                            top:
-                                rootRef.current?.scrollTop +
-                                ((event.touches[0].clientY -
-                                    lastScrollbarClickPositionRef.current.y) /
-                                    (rootRef.current?.clientHeight ?? 1)) *
-                                    (contentRef.current?.clientHeight ?? 0),
-                            behavior: 'instant'
-                        })
-                    }
-                    if (horizontalScrollbarOnTouch) {
-                        rootRef.current?.scrollTo({
-                            left:
-                                rootRef.current?.scrollLeft +
-                                ((event.touches[0].clientX -
-                                    lastScrollbarClickPositionRef.current.x) /
-                                    (rootRef.current?.clientWidth ?? 1)) *
-                                    (contentRef.current?.clientWidth ?? 0),
-                            behavior: 'instant'
-                        })
-                    }
-                    lastScrollbarClickPositionRef.current = {
-                        x: event.touches[0].clientX,
-                        y: event.touches[0].clientY
-                    }
+        useEffect(() => {
+            setTimeout(() => {
+                reloadScrollbar()
+            }, 500)
+            const resizeObserver = new ResizeObserver(() => {
+                reloadScrollbar()
+            })
+            maskRef.current && resizeObserver.observe(maskRef.current)
+            contentRef.current && resizeObserver.observe(contentRef.current)
+
+            return () => {
+                maskRef.current && resizeObserver.unobserve(maskRef.current)
+                contentRef.current && resizeObserver.unobserve(contentRef.current)
             }
-        }
-    }
+        }, [])
 
-    const handleDefaultScroll = () => {
-        setVerticalScrollbarPosition(
-            ((rootRef.current?.scrollTop ?? 0) / (contentRef.current?.clientHeight ?? 1)) * 100
-        )
-        setHorizontalScrollbarPosition(
-            ((rootRef.current?.scrollLeft ?? 0) / (contentRef.current?.clientWidth ?? 1)) * 100
-        )
-    }
-
-    const refreshLayout = () => {
-        setRefreshTime(Date.now())
-    }
-
-    const reloadScrollbar = () => {
-        setVerticalScrollbarWidth(
-            (rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
-        )
-        setHorizontalScrollbarWidth(
-            (rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
-        )
-
-        rootRef.current &&
-            setVerticalScrollbarLength(
-                (rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
-            )
-
-        rootRef.current &&
-            setHorizontalScrollbarLength(
-                (rootRef.current.clientWidth / (contentRef.current?.clientWidth ?? 0)) * 100
-            )
-
-        refreshLayout()
-    }
-
-    useEffect(() => {
-        setTimeout(() => {
-            reloadScrollbar()
-        }, 500)
-        const resizeObserver = new ResizeObserver(() => {
-            reloadScrollbar()
-        })
-        maskRef.current && resizeObserver.observe(maskRef.current)
-        contentRef.current && resizeObserver.observe(contentRef.current)
-
-        return () => {
-            maskRef.current && resizeObserver.unobserve(maskRef.current)
-            contentRef.current && resizeObserver.unobserve(contentRef.current)
-        }
-    }, [])
-
-    useEffect(() => {
-        rootRef.current?.removeEventListener('wheel', wheelListenerRef.current)
-        if (isPreventAnyScroll) {
-            const handleDefaultWheel = (event: WheelEvent) => {
-                if (!event.altKey && !event.ctrlKey) {
-                    if (isPreventScroll) {
-                        event.preventDefault()
-                        return
-                    }
-                    if (isPreventVerticalScroll && !event.shiftKey && !event.deltaX) {
-                        event.preventDefault()
-                        return
-                    }
-                    if (isPreventHorizontalScroll && (event.shiftKey || !event.deltaY)) {
-                        event.preventDefault()
-                        return
+        useEffect(() => {
+            rootRef.current?.removeEventListener('wheel', wheelListenerRef.current)
+            if (isPreventAnyScroll) {
+                const handleDefaultWheel = (event: WheelEvent) => {
+                    if (!event.altKey && !event.ctrlKey) {
+                        if (isPreventScroll) {
+                            event.preventDefault()
+                            return
+                        }
+                        if (isPreventVerticalScroll && !event.shiftKey && !event.deltaX) {
+                            event.preventDefault()
+                            return
+                        }
+                        if (isPreventHorizontalScroll && (event.shiftKey || !event.deltaY)) {
+                            event.preventDefault()
+                            return
+                        }
                     }
                 }
+                wheelListenerRef.current = handleDefaultWheel
+                rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
             }
-            wheelListenerRef.current = handleDefaultWheel
-            rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
-        }
-    }, [isPreventAnyScroll, isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll])
+        }, [
+            isPreventAnyScroll,
+            isPreventHorizontalScroll,
+            isPreventScroll,
+            isPreventVerticalScroll
+        ])
 
-    return (
-        <>
-            <div
-                className={'hide-scrollbar-mask'}
-                ref={maskRef}
-                onMouseMove={
-                    !isPreventScroll ? handleScrollbarMouseEvent('move', 'all') : undefined
-                }
-                onTouchMove={
-                    !isPreventScroll ? handleScrollbarTouchEvent('move', 'all') : undefined
-                }
-                onMouseUp={!isPreventScroll ? handleScrollbarMouseEvent('up', 'all') : undefined}
-                onTouchEnd={!isPreventScroll ? handleScrollbarTouchEvent('end', 'all') : undefined}
-                onMouseLeave={
-                    !isPreventScroll ? handleScrollbarMouseEvent('leave', 'all') : undefined
-                }
-                onTouchCancel={
-                    !isPreventScroll ? handleScrollbarTouchEvent('cancel', 'all') : undefined
-                }
-            >
+        return (
+            <>
                 <div
-                    ref={rootRef}
-                    className={`hide-scrollbar-selection${className ? ` ${className}` : ''}`}
-                    tabIndex={0}
-                    style={{
-                        width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
-                        height: `calc(${maskRef.current?.clientHeight}px + ${horizontalScrollbarWidth}px)`,
-                        touchAction: isPreventAnyScroll ? 'none' : '',
-                        msTouchAction: isPreventAnyScroll ? 'none' : '',
-                        ...style
-                    }}
-                    {..._props}
-                    onMouseDown={isPreventAnyScroll ? handleDefaultMouseDown : undefined}
-                    onKeyDown={isPreventAnyScroll ? handleDefaultKeyDown : undefined}
-                    onTouchStart={isPreventAnyScroll ? handleDefaultTouchStart : undefined}
-                    onTouchMove={isPreventAnyScroll ? handleDefaultTouchmove : undefined}
-                    onScroll={handleDefaultScroll}
+                    className={'hide-scrollbar-mask'}
+                    ref={maskRef}
+                    onMouseMove={
+                        !isPreventScroll ? handleScrollbarMouseEvent('move', 'all') : undefined
+                    }
+                    onTouchMove={
+                        !isPreventScroll ? handleScrollbarTouchEvent('move', 'all') : undefined
+                    }
+                    onMouseUp={
+                        !isPreventScroll ? handleScrollbarMouseEvent('up', 'all') : undefined
+                    }
+                    onTouchEnd={
+                        !isPreventScroll ? handleScrollbarTouchEvent('end', 'all') : undefined
+                    }
+                    onMouseLeave={
+                        !isPreventScroll ? handleScrollbarMouseEvent('leave', 'all') : undefined
+                    }
+                    onTouchCancel={
+                        !isPreventScroll ? handleScrollbarTouchEvent('cancel', 'all') : undefined
+                    }
                 >
                     <div
-                        className={'hide-scrollbar-content'}
-                        ref={contentRef}
-                        style={{ minWidth, minHeight }}
-                        data-refresh={refreshTime}
+                        ref={rootRef}
+                        className={`hide-scrollbar-selection${className ? ` ${className}` : ''}`}
+                        tabIndex={0}
+                        style={{
+                            width: `calc(${maskRef.current?.clientWidth}px + ${verticalScrollbarWidth}px)`,
+                            height: `calc(${maskRef.current?.clientHeight}px + ${horizontalScrollbarWidth}px)`,
+                            touchAction: isPreventAnyScroll ? 'none' : '',
+                            msTouchAction: isPreventAnyScroll ? 'none' : '',
+                            ...style
+                        }}
+                        {...props}
+                        onMouseDown={isPreventAnyScroll ? handleDefaultMouseDown : undefined}
+                        onKeyDown={isPreventAnyScroll ? handleDefaultKeyDown : undefined}
+                        onTouchStart={isPreventAnyScroll ? handleDefaultTouchStart : undefined}
+                        onTouchMove={isPreventAnyScroll ? handleDefaultTouchmove : undefined}
+                        onScroll={handleDefaultScroll}
                     >
-                        {children}
-                    </div>
-                </div>
-                <div
-                    hidden={
-                        !isShowVerticalScrollbar ||
-                        ((isHiddenVerticalScrollbarWhenFull ?? true) &&
-                            verticalScrollbarLength >= 100)
-                    }
-                    className={`scrollbar vertical-scrollbar${
-                        verticalScrollbarAutoHide ? ' hide' : ''
-                    }`}
-                    style={{
-                        height: maskRef.current ? maskRef.current?.clientHeight - 1 : undefined,
-                        top: maskRef.current?.clientTop,
-                        left: maskRef.current
-                            ? maskRef.current?.clientLeft + maskRef.current?.clientWidth - 1
-                            : undefined
-                    }}
-                >
-                    <div className={'box'} style={{ width: scrollbarWidth }}>
                         <div
-                            className={'block'}
-                            style={{
-                                height: `${verticalScrollbarLength}%`,
-                                top: `clamp(0px, ${verticalScrollbarPosition}%, ${
-                                    100 - verticalScrollbarLength
-                                }%)`
-                            }}
-                            onMouseDown={
-                                !isPreventScroll && !isPreventVerticalScroll
-                                    ? handleScrollbarMouseEvent('down', 'vertical')
-                                    : undefined
-                            }
-                            onTouchStart={
-                                !isPreventScroll && !isPreventVerticalScroll
-                                    ? handleScrollbarTouchEvent('start', 'vertical')
-                                    : undefined
-                            }
-                        />
+                            className={'hide-scrollbar-content'}
+                            ref={contentRef}
+                            style={{ minWidth, minHeight }}
+                            data-refresh={refreshTime}
+                        >
+                            {children}
+                        </div>
+                    </div>
+                    <div
+                        hidden={
+                            !isShowVerticalScrollbar ||
+                            ((isHiddenVerticalScrollbarWhenFull ?? true) &&
+                                verticalScrollbarLength >= 100)
+                        }
+                        className={`scrollbar vertical-scrollbar${
+                            verticalScrollbarAutoHide ? ' hide' : ''
+                        }`}
+                        style={{
+                            height: maskRef.current ? maskRef.current?.clientHeight - 1 : undefined,
+                            top: maskRef.current?.clientTop,
+                            left: maskRef.current
+                                ? maskRef.current?.clientLeft + maskRef.current?.clientWidth - 1
+                                : undefined
+                        }}
+                    >
+                        <div className={'box'} style={{ width: scrollbarWidth }}>
+                            <div
+                                className={'block'}
+                                style={{
+                                    height: `${verticalScrollbarLength}%`,
+                                    top: `clamp(0px, ${verticalScrollbarPosition}%, ${
+                                        100 - verticalScrollbarLength
+                                    }%)`
+                                }}
+                                onMouseDown={
+                                    !isPreventScroll && !isPreventVerticalScroll
+                                        ? handleScrollbarMouseEvent('down', 'vertical')
+                                        : undefined
+                                }
+                                onTouchStart={
+                                    !isPreventScroll && !isPreventVerticalScroll
+                                        ? handleScrollbarTouchEvent('start', 'vertical')
+                                        : undefined
+                                }
+                            />
+                        </div>
+                    </div>
+                    <div
+                        hidden={
+                            !isShowHorizontalScrollbar ||
+                            ((isHiddenHorizontalScrollbarWhenFull ?? true) &&
+                                horizontalScrollbarLength >= 100)
+                        }
+                        className={`scrollbar horizontal-scrollbar${
+                            horizontalScrollbarAutoHide ? ' hide' : ''
+                        }`}
+                        style={{
+                            width: maskRef.current ? maskRef.current?.clientWidth - 1 : undefined,
+                            left: maskRef.current?.clientLeft,
+                            top: maskRef.current
+                                ? maskRef.current?.clientTop + maskRef.current?.clientHeight - 1
+                                : undefined
+                        }}
+                    >
+                        <div className={'box'} style={{ height: scrollbarWidth }}>
+                            <div
+                                className={'block'}
+                                style={{
+                                    width: `${horizontalScrollbarLength}%`,
+                                    left: `clamp(0px, ${horizontalScrollbarPosition}%, ${
+                                        100 - horizontalScrollbarLength
+                                    }%)`
+                                }}
+                                onMouseDown={
+                                    !isPreventScroll && !isPreventHorizontalScroll
+                                        ? handleScrollbarMouseEvent('down', 'horizontal')
+                                        : undefined
+                                }
+                                onTouchStart={
+                                    !isPreventScroll && !isPreventHorizontalScroll
+                                        ? handleScrollbarTouchEvent('start', 'horizontal')
+                                        : undefined
+                                }
+                            />
+                        </div>
                     </div>
                 </div>
-                <div
-                    hidden={
-                        !isShowHorizontalScrollbar ||
-                        ((isHiddenHorizontalScrollbarWhenFull ?? true) &&
-                            horizontalScrollbarLength >= 100)
-                    }
-                    className={`scrollbar horizontal-scrollbar${
-                        horizontalScrollbarAutoHide ? ' hide' : ''
-                    }`}
-                    style={{
-                        width: maskRef.current ? maskRef.current?.clientWidth - 1 : undefined,
-                        left: maskRef.current?.clientLeft,
-                        top: maskRef.current
-                            ? maskRef.current?.clientTop + maskRef.current?.clientHeight - 1
-                            : undefined
-                    }}
-                >
-                    <div className={'box'} style={{ height: scrollbarWidth }}>
-                        <div
-                            className={'block'}
-                            style={{
-                                width: `${horizontalScrollbarLength}%`,
-                                left: `clamp(0px, ${horizontalScrollbarPosition}%, ${
-                                    100 - horizontalScrollbarLength
-                                }%)`
-                            }}
-                            onMouseDown={
-                                !isPreventScroll && !isPreventHorizontalScroll
-                                    ? handleScrollbarMouseEvent('down', 'horizontal')
-                                    : undefined
-                            }
-                            onTouchStart={
-                                !isPreventScroll && !isPreventHorizontalScroll
-                                    ? handleScrollbarTouchEvent('start', 'horizontal')
-                                    : undefined
-                            }
-                        />
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-})
+            </>
+        )
+    }
+)
 
 export default HideScrollbar
diff --git a/src/components/common/Indicator.tsx b/src/components/common/Indicator.tsx
index 3570521..a00213e 100644
--- a/src/components/common/Indicator.tsx
+++ b/src/components/common/Indicator.tsx
@@ -8,9 +8,7 @@ interface IndicatorProps {
     onSwitch?: (index: number) => void
 }
 
-const Indicator: React.FC<IndicatorProps> = (props) => {
-    const { total, current, onSwitch } = props
-
+const Indicator: React.FC<IndicatorProps> = ({ total, current, onSwitch }) => {
     const handleClick = (index: number) => {
         return () => {
             onSwitch && onSwitch(index)
diff --git a/src/components/common/sidebar/SidebarSeparate.tsx b/src/components/common/sidebar/SidebarSeparate.tsx
index 3887824..84070ef 100644
--- a/src/components/common/sidebar/SidebarSeparate.tsx
+++ b/src/components/common/sidebar/SidebarSeparate.tsx
@@ -2,10 +2,8 @@ import React from 'react'
 
 const SidebarSeparate: React.FC<
     React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-> = (props) => {
-    const { className, ..._props } = props
-
-    return <div className={`separate ${className ? ` ${className}` : ''}`} {..._props} />
+> = ({ className, ...props }) => {
+    return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
 }
 
 export default SidebarSeparate
diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx
index aa30561..639e7ac 100644
--- a/src/pages/system/index.tsx
+++ b/src/pages/system/index.tsx
@@ -6,7 +6,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
-import Permission from '@/components/common/Permission.tsx'
+import Permission from '@/components/common/Permission'
 
 interface CommonCardProps
     extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -16,11 +16,10 @@ interface CommonCardProps
     url?: string
 }
 
-const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
-    const navigate = useNavigate()
-    const cardRef = useRef<HTMLDivElement>(null)
-    const {
+const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>(
+    ({
         style,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         ref,
         icon,
         description,
@@ -32,32 +31,35 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>((props) => {
         },
         url,
         children,
-        ..._props
-    } = props
+        ...props
+    }) => {
+        const navigate = useNavigate()
+        const cardRef = useRef<HTMLDivElement>(null)
 
-    useEffect(() => {
-        cardRef.current && VanillaTilt.init(cardRef.current, options)
-    }, [options])
+        useEffect(() => {
+            cardRef.current && VanillaTilt.init(cardRef.current, options)
+        }, [options])
 
-    const handleCardOnClick = () => {
-        url && navigate(url)
+        const handleCardOnClick = () => {
+            url && navigate(url)
+        }
+
+        return (
+            <Card
+                style={{ overflow: 'visible', ...style }}
+                ref={cardRef}
+                {...props}
+                onClick={handleCardOnClick}
+            >
+                <FlexBox className={'common-card'}>
+                    <Icon component={icon} className={'icon'} />
+                    <div className={'text'}>{children}</div>
+                    <div className={'description'}>{description}</div>
+                </FlexBox>
+            </Card>
+        )
     }
-
-    return (
-        <Card
-            style={{ overflow: 'visible', ...style }}
-            ref={cardRef}
-            {..._props}
-            onClick={handleCardOnClick}
-        >
-            <FlexBox className={'common-card'}>
-                <Icon component={icon} className={'icon'} />
-                <div className={'text'}>{children}</div>
-                <div className={'description'}>{description}</div>
-            </FlexBox>
-        </Card>
-    )
-})
+)
 
 const System: React.FC = () => {
     return (
diff --git a/src/pages/system/statistics/shared.ts b/src/pages/system/statistics/shared.ts
index 31fb6b4..8e3a0f4 100644
--- a/src/pages/system/statistics/shared.ts
+++ b/src/pages/system/statistics/shared.ts
@@ -15,7 +15,7 @@ import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/
 import { SVGRenderer } from 'echarts/renderers'
 import { UniversalTransition } from 'echarts/features'
 import { CallbackDataParams } from 'echarts/types/dist/shared'
-import { utcToLocalTime } from '@/util/datetime.tsx'
+import { utcToLocalTime } from '@/util/datetime'
 
 echarts.use([
     TooltipComponent,
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 1c35dd6..ce3b836 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -25,7 +25,7 @@ const system: RouteJsonObject[] = [
         path: 'settings',
         absolutePath: '/system/settings',
         id: 'system-settings',
-        component: React.lazy(() => import('@/pages/system/Settings')),
+        component: React.lazy(() => import('@/pages/system/settings')),
         name: '系统设置',
         icon: React.lazy(() => import('~icons/oxygen/option.jsx')),
         menu: true,

From 71248cdb13e1ccb1ca75a3b430f9771766a9401c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 3 Jan 2024 15:17:59 +0800
Subject: [PATCH 151/307] Optimize Settings page

---
 src/assets/css/pages/system/settings.scss     |   6 +-
 src/pages/system/settings/BaseSettings.tsx    |  81 ++++++++++
 .../MailSettings.tsx}                         | 141 +-----------------
 src/pages/system/settings/index.tsx           |  70 +++++++++
 4 files changed, 158 insertions(+), 140 deletions(-)
 create mode 100644 src/pages/system/settings/BaseSettings.tsx
 rename src/pages/system/{Settings.tsx => settings/MailSettings.tsx} (52%)
 create mode 100644 src/pages/system/settings/index.tsx

diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.scss
index 5af3198..032a7dc 100644
--- a/src/assets/css/pages/system/settings.scss
+++ b/src/assets/css/pages/system/settings.scss
@@ -5,9 +5,13 @@
     padding: 30px;
     gap: 20px;
 
-    .root-row {
+    .root-col {
       gap: 20px;
 
+      > * {
+        flex: 0 0 auto;
+      }
+
       .settings-card {
         padding: 20px;
         gap: 20px;
diff --git a/src/pages/system/settings/BaseSettings.tsx b/src/pages/system/settings/BaseSettings.tsx
new file mode 100644
index 0000000..62402f6
--- /dev/null
+++ b/src/pages/system/settings/BaseSettings.tsx
@@ -0,0 +1,81 @@
+import React from 'react'
+import { useUpdatedEffect } from '@/util/hooks'
+import { hasPermission } from '@/util/auth'
+import { r_sys_settings_base_get, r_sys_settings_base_update } from '@/services/system'
+import { SettingsCard } from '@/pages/system/settings'
+
+const BaseSettings: React.FC = () => {
+    const [baseForm] = AntdForm.useForm<BaseSettingsParam>()
+    const baseFormValues = AntdForm.useWatch([], baseForm)
+    const [loading, setLoading] = useState(false)
+
+    const handleOnReset = () => {
+        getBaseSettings()
+    }
+
+    const handleOnSave = () => {
+        void r_sys_settings_base_update(baseFormValues).then((res) => {
+            const response = res.data
+            if (response.success) {
+                void message.success('保存设置成功')
+                getBaseSettings()
+            } else {
+                void message.error('保存设置失败，请稍后重试')
+            }
+        })
+    }
+
+    const getBaseSettings = () => {
+        if (loading) {
+            return
+        }
+
+        setLoading(true)
+        void r_sys_settings_base_get().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                data && baseForm.setFieldsValue(data)
+                setLoading(false)
+            }
+        })
+    }
+
+    useUpdatedEffect(() => {
+        getBaseSettings()
+    }, [])
+
+    return (
+        <>
+            <SettingsCard
+                icon={IconOxygenEmail}
+                title={'基础'}
+                loading={loading}
+                onReset={handleOnReset}
+                onSave={handleOnSave}
+                modifyOperationCode={'system:settings:modify:base'}
+            >
+                <AntdForm
+                    form={baseForm}
+                    labelCol={{ flex: '7em' }}
+                    disabled={!hasPermission('system:settings:modify:base')}
+                >
+                    <AntdForm.Item label={'应用名称'} name={'appName'}>
+                        <AntdInput />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'应用 URL'} name={'appUrl'}>
+                        <AntdInput />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'验证邮箱 URL'} name={'verifyUrl'}>
+                        <AntdInput placeholder={'验证码使用 ${verifyCode} 代替'} />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'找回密码 URL'} name={'retrieveUrl'}>
+                        <AntdInput placeholder={'验证码使用 ${retrieveCode} 代替'} />
+                    </AntdForm.Item>
+                </AntdForm>
+            </SettingsCard>
+        </>
+    )
+}
+
+export default BaseSettings
diff --git a/src/pages/system/Settings.tsx b/src/pages/system/settings/MailSettings.tsx
similarity index 52%
rename from src/pages/system/Settings.tsx
rename to src/pages/system/settings/MailSettings.tsx
index f78bc9c..cd0fd51 100644
--- a/src/pages/system/Settings.tsx
+++ b/src/pages/system/settings/MailSettings.tsx
@@ -1,55 +1,13 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
-import '@/assets/css/pages/system/settings.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
 import {
-    r_sys_settings_base_get,
-    r_sys_settings_base_update,
     r_sys_settings_mail_get,
     r_sys_settings_mail_send,
     r_sys_settings_mail_update
 } from '@/services/system'
-import FitFullscreen from '@/components/common/FitFullscreen'
-import HideScrollbar from '@/components/common/HideScrollbar'
-import Card from '@/components/common/Card'
-import FlexBox from '@/components/common/FlexBox'
-import LoadingMask from '@/components/common/LoadingMask'
-import Permission from '@/components/common/Permission'
-
-interface SettingsCardProps extends React.PropsWithChildren {
-    icon: IconComponent
-    title: string
-    loading?: boolean
-    modifyOperationCode?: string
-    expand?: React.ReactNode
-    onReset?: () => void
-    onSave?: () => void
-}
-const SettingsCard: React.FC<SettingsCardProps> = (props) => {
-    return (
-        <Card>
-            <FlexBox className={'settings-card'}>
-                <FlexBox direction={'horizontal'} className={'head'}>
-                    <Icon component={props.icon} className={'icon'} />
-                    <div className={'title'}>{props.title}</div>
-                    {!props.loading ? (
-                        <Permission operationCode={props.modifyOperationCode}>
-                            {props.expand}
-                            <AntdButton onClick={props.onReset} title={'重置'}>
-                                <Icon component={IconOxygenBack} />
-                            </AntdButton>
-                            <AntdButton className={'bt-save'} onClick={props.onSave} title={'保存'}>
-                                <Icon component={IconOxygenSave} />
-                            </AntdButton>
-                        </Permission>
-                    ) : undefined}
-                </FlexBox>
-                <LoadingMask hidden={!props.loading}>{props.children}</LoadingMask>
-            </FlexBox>
-        </Card>
-    )
-}
+import { SettingsCard } from '@/pages/system/settings'
 
 const MailSettings: React.FC = () => {
     const [modal, contextHolder] = AntdModal.useModal()
@@ -194,99 +152,4 @@ const MailSettings: React.FC = () => {
     )
 }
 
-const BaseSettings: React.FC = () => {
-    const [baseForm] = AntdForm.useForm<BaseSettingsParam>()
-    const baseFormValues = AntdForm.useWatch([], baseForm)
-    const [loading, setLoading] = useState(false)
-
-    const handleOnReset = () => {
-        getBaseSettings()
-    }
-
-    const handleOnSave = () => {
-        void r_sys_settings_base_update(baseFormValues).then((res) => {
-            const response = res.data
-            if (response.success) {
-                void message.success('保存设置成功')
-                getBaseSettings()
-            } else {
-                void message.error('保存设置失败，请稍后重试')
-            }
-        })
-    }
-
-    const getBaseSettings = () => {
-        if (loading) {
-            return
-        }
-
-        setLoading(true)
-        void r_sys_settings_base_get().then((res) => {
-            const response = res.data
-            if (response.success) {
-                const data = response.data
-                data && baseForm.setFieldsValue(data)
-                setLoading(false)
-            }
-        })
-    }
-
-    useUpdatedEffect(() => {
-        getBaseSettings()
-    }, [])
-
-    return (
-        <>
-            <SettingsCard
-                icon={IconOxygenEmail}
-                title={'基础'}
-                loading={loading}
-                onReset={handleOnReset}
-                onSave={handleOnSave}
-                modifyOperationCode={'system:settings:modify:base'}
-            >
-                <AntdForm
-                    form={baseForm}
-                    labelCol={{ flex: '7em' }}
-                    disabled={!hasPermission('system:settings:modify:base')}
-                >
-                    <AntdForm.Item label={'应用名称'} name={'appName'}>
-                        <AntdInput />
-                    </AntdForm.Item>
-                    <AntdForm.Item label={'应用 URL'} name={'appUrl'}>
-                        <AntdInput />
-                    </AntdForm.Item>
-                    <AntdForm.Item label={'验证邮箱 URL'} name={'verifyUrl'}>
-                        <AntdInput placeholder={'验证码使用 ${verifyCode} 代替'} />
-                    </AntdForm.Item>
-                    <AntdForm.Item label={'找回密码 URL'} name={'retrieveUrl'}>
-                        <AntdInput placeholder={'验证码使用 ${retrieveCode} 代替'} />
-                    </AntdForm.Item>
-                </AntdForm>
-            </SettingsCard>
-        </>
-    )
-}
-
-const Settings: React.FC = () => {
-    return (
-        <>
-            <FitFullscreen data-component={'system-settings'}>
-                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
-                    <FlexBox className={'root-content'}>
-                        <FlexBox direction={'horizontal'} className={'root-row'}>
-                            <Permission operationCode={'system:settings:query:base'}>
-                                <BaseSettings />
-                            </Permission>
-                            <Permission operationCode={'system:settings:query:mail'}>
-                                <MailSettings />
-                            </Permission>
-                        </FlexBox>
-                    </FlexBox>
-                </HideScrollbar>
-            </FitFullscreen>
-        </>
-    )
-}
-
-export default Settings
+export default MailSettings
diff --git a/src/pages/system/settings/index.tsx b/src/pages/system/settings/index.tsx
new file mode 100644
index 0000000..7da663d
--- /dev/null
+++ b/src/pages/system/settings/index.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import '@/assets/css/pages/system/settings.scss'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import LoadingMask from '@/components/common/LoadingMask'
+import Permission from '@/components/common/Permission'
+import BaseSettings from '@/pages/system/settings/BaseSettings'
+import MailSettings from '@/pages/system/settings/MailSettings'
+
+interface SettingsCardProps extends React.PropsWithChildren {
+    icon: IconComponent
+    title: string
+    loading?: boolean
+    modifyOperationCode?: string
+    expand?: React.ReactNode
+    onReset?: () => void
+    onSave?: () => void
+}
+export const SettingsCard: React.FC<SettingsCardProps> = (props) => {
+    return (
+        <Card>
+            <FlexBox className={'settings-card'}>
+                <FlexBox direction={'horizontal'} className={'head'}>
+                    <Icon component={props.icon} className={'icon'} />
+                    <div className={'title'}>{props.title}</div>
+                    {!props.loading ? (
+                        <Permission operationCode={props.modifyOperationCode}>
+                            {props.expand}
+                            <AntdButton onClick={props.onReset} title={'重置'}>
+                                <Icon component={IconOxygenBack} />
+                            </AntdButton>
+                            <AntdButton className={'bt-save'} onClick={props.onSave} title={'保存'}>
+                                <Icon component={IconOxygenSave} />
+                            </AntdButton>
+                        </Permission>
+                    ) : undefined}
+                </FlexBox>
+                <LoadingMask hidden={!props.loading}>{props.children}</LoadingMask>
+            </FlexBox>
+        </Card>
+    )
+}
+
+const Settings: React.FC = () => {
+    return (
+        <>
+            <FitFullscreen data-component={'system-settings'}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <FlexBox className={'root-col'}>
+                            <Permission operationCode={'system:settings:query:base'}>
+                                <BaseSettings />
+                            </Permission>
+                        </FlexBox>
+                        <FlexBox className={'root-col'}>
+                            <Permission operationCode={'system:settings:query:mail'}>
+                                <MailSettings />
+                            </Permission>
+                        </FlexBox>
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullscreen>
+        </>
+    )
+}
+
+export default Settings

From 74204a08708358b136139243e139d4ee92452c8b Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 4 Jan 2024 10:03:09 +0800
Subject: [PATCH 152/307] Optimize code

---
 src/pages/sign/Forget.tsx | 44 ++++++++++++++++++++-------------------
 src/pages/sign/SignIn.tsx | 22 ++++++++++----------
 src/pages/sign/SignUp.tsx | 17 ++++++++++-----
 3 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/src/pages/sign/Forget.tsx b/src/pages/sign/Forget.tsx
index a307f2b..e9bf48a 100644
--- a/src/pages/sign/Forget.tsx
+++ b/src/pages/sign/Forget.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -18,7 +18,27 @@ const Forget: React.FC = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const turnstileRef = useRef<TurnstileInstance>()
+    const turnstileRefCallback = useCallback(
+        (node: TurnstileInstance) => {
+            turnstileRef.current = node
+
+            if (location.pathname === '/forget' && !searchParams.get('code')) {
+                turnstileRef.current?.execute()
+            }
+        },
+        [location.pathname, searchParams]
+    )
     const retrieveTurnstileRef = useRef<TurnstileInstance>()
+    const retrieveTurnstileRefCallback = useCallback(
+        (node: TurnstileInstance) => {
+            retrieveTurnstileRef.current = node
+
+            if (location.pathname === '/forget' && searchParams.get('code')) {
+                retrieveTurnstileRef.current?.execute()
+            }
+        },
+        [location.pathname, searchParams]
+    )
     const [isSending, setIsSending] = useState(false)
     const [isSent, setIsSent] = useState(false)
     const [isChanging, setIsChanging] = useState(false)
@@ -42,20 +62,6 @@ const Forget: React.FC = () => {
         }
     }, [isChanging])
 
-    useUpdatedEffect(() => {
-        if (location.pathname !== '/forget') {
-            return
-        }
-
-        setTimeout(() => {
-            if (!searchParams.get('code')) {
-                turnstileRef.current?.execute()
-            } else {
-                retrieveTurnstileRef.current?.execute()
-            }
-        }, 500)
-    }, [location.pathname])
-
     const handleOnSend = (forgetParam: ForgetParam) => {
         if (isSending) {
             return
@@ -93,10 +99,6 @@ const Forget: React.FC = () => {
 
     const handleOnRetry = () => {
         setIsSent(false)
-
-        setTimeout(() => {
-            turnstileRef.current?.execute()
-        }, 500)
     }
 
     const handleOnChange = (retrieveParam: RetrieveParam) => {
@@ -162,7 +164,7 @@ const Forget: React.FC = () => {
                                         <AntdForm.Item>
                                             <Turnstile
                                                 id={'forget-turnstile'}
-                                                ref={turnstileRef}
+                                                ref={turnstileRefCallback}
                                                 siteKey={H_CAPTCHA_SITE_KEY}
                                                 options={{ theme: 'light', execution: 'execute' }}
                                                 onSuccess={setCaptchaCode}
@@ -234,7 +236,7 @@ const Forget: React.FC = () => {
                                     <AntdForm.Item>
                                         <Turnstile
                                             id={'retrieve-turnstile'}
-                                            ref={retrieveTurnstileRef}
+                                            ref={retrieveTurnstileRefCallback}
                                             siteKey={H_CAPTCHA_SITE_KEY}
                                             options={{ theme: 'light', execution: 'execute' }}
                                             onSuccess={setRetrieveCaptchaCode}
diff --git a/src/pages/sign/SignIn.tsx b/src/pages/sign/SignIn.tsx
index ae1b0aa..03d09fb 100644
--- a/src/pages/sign/SignIn.tsx
+++ b/src/pages/sign/SignIn.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -22,6 +22,15 @@ const SignIn: React.FC = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const turnstileRef = useRef<TurnstileInstance>()
+    const turnstileRefCallback = useCallback(
+        (node: TurnstileInstance) => {
+            turnstileRef.current = node
+            if (location.pathname === '/login') {
+                turnstileRef.current?.execute()
+            }
+        },
+        [location.pathname]
+    )
     const [isSigningIn, setIsSigningIn] = useState(false)
     const [captchaCode, setCaptchaCode] = useState('')
 
@@ -33,15 +42,6 @@ const SignIn: React.FC = () => {
         }
     }, [isSigningIn])
 
-    useUpdatedEffect(() => {
-        if (location.pathname !== '/login') {
-            return
-        }
-        setTimeout(() => {
-            turnstileRef.current?.execute()
-        }, 500)
-    }, [turnstileRef])
-
     const handleOnFinish = (loginParam: LoginParam) => {
         if (isSigningIn) {
             return
@@ -165,7 +165,7 @@ const SignIn: React.FC = () => {
                         <AntdForm.Item>
                             <Turnstile
                                 id={'sign-in-turnstile'}
-                                ref={turnstileRef}
+                                ref={turnstileRefCallback}
                                 siteKey={H_CAPTCHA_SITE_KEY}
                                 options={{ theme: 'light', execution: 'execute' }}
                                 onSuccess={setCaptchaCode}
diff --git a/src/pages/sign/SignUp.tsx b/src/pages/sign/SignUp.tsx
index 536ae28..edb13ee 100644
--- a/src/pages/sign/SignUp.tsx
+++ b/src/pages/sign/SignUp.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -17,6 +17,16 @@ const SignUp: React.FC = () => {
     const location = useLocation()
     const navigate = useNavigate()
     const turnstileRef = useRef<TurnstileInstance>()
+    const turnstileRefCallback = useCallback(
+        (node: TurnstileInstance) => {
+            turnstileRef.current = node
+
+            if (location.pathname === '/register') {
+                turnstileRef.current?.execute()
+            }
+        },
+        [location.pathname]
+    )
     const [isSigningUp, setIsSigningUp] = useState(false)
     const [isFinish, setIsFinish] = useState(false)
     const [isSending, setIsSending] = useState(false)
@@ -39,9 +49,6 @@ const SignUp: React.FC = () => {
                 replace: true
             })
         }
-        setTimeout(() => {
-            turnstileRef.current?.execute()
-        }, 500)
     }, [location.pathname])
 
     const handleOnFinish = (registerParam: RegisterParam) => {
@@ -192,7 +199,7 @@ const SignUp: React.FC = () => {
                                 <AntdForm.Item>
                                     <Turnstile
                                         id={'sign-up-turnstile'}
-                                        ref={turnstileRef}
+                                        ref={turnstileRefCallback}
                                         siteKey={H_CAPTCHA_SITE_KEY}
                                         options={{ theme: 'light', execution: 'execute' }}
                                         onSuccess={setCaptchaCode}

From b1cd4c90ad04a34d44dce77db4ad2a470247344a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 4 Jan 2024 17:59:58 +0800
Subject: [PATCH 153/307] Add sensitive word settings management

---
 src/assets/svg/sensitive.svg                  |   1 +
 src/constants/common.constants.ts             |   1 +
 src/constants/urls.constants.ts               |   1 +
 src/global.d.ts                               |  17 ++
 src/main.tsx                                  |   2 +-
 src/pages/sign/SignUp.tsx                     |   7 +-
 src/pages/sign/Verify.tsx                     |  40 +++--
 src/pages/system/settings/BaseSettings.tsx    |   2 +-
 .../system/settings/SensitiveWordSettings.tsx | 163 ++++++++++++++++++
 src/pages/system/settings/index.tsx           |  11 +-
 src/services/system.tsx                       |  15 +-
 11 files changed, 239 insertions(+), 21 deletions(-)
 create mode 100644 src/assets/svg/sensitive.svg
 create mode 100644 src/pages/system/settings/SensitiveWordSettings.tsx

diff --git a/src/assets/svg/sensitive.svg b/src/assets/svg/sensitive.svg
new file mode 100644
index 0000000..6ad88d5
--- /dev/null
+++ b/src/assets/svg/sensitive.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M962.56 972.8L61.44 972.8C30.72 972.8 0 942.08 0 911.36c0-40.96 30.72-61.44 61.44-61.44l51.2-1e-8 235.52-665.59999999c20.47999999-81.92 102.4-143.36 194.56-122.88 61.44000001 10.24 112.64 61.44 122.88 122.88l235.52 665.59999999 51.2 1e-8c40.96 0 71.68 20.47999999 71.68 61.44 0 30.72-30.72 61.44-61.44 61.44zM512 819.2c30.72 0 61.44-20.47999999 61.44-61.44 0-30.72-30.72-61.44-61.44-71.68-30.72 0-61.44 30.72-61.44 61.44 0 40.96 20.47999999 61.44 61.44 71.68z m0-512c-40.96 0-61.44 20.47999999-61.44000001 51.2l1e-8 30.72S481.28 614.4 512 604.15999999c20.48 10.24 61.44-215.04 61.44-215.03999999L573.44000001 358.4c0-40.96-30.72-61.44-61.44000001-51.2z" /></svg>
\ No newline at end of file
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 035c5ef..be6a3e7 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -31,6 +31,7 @@ export const SYSTEM_REQUEST_ILLEGAL = 10052
 export const SYSTEM_ARGUMENT_NOT_VALID = 10053
 export const SYSTEM_INVALID_CAPTCHA_CODE = 10054
 export const SYSTEM_REQUEST_TOO_FREQUENT = 10055
+export const SYSTEM_MATCH_SENSITIVE_WORD = 10056
 
 export const PERMISSION_LOGIN_SUCCESS = 20000
 export const PERMISSION_PASSWORD_CHANGE_SUCCESS = 20001
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index d35f715..260c1d7 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -17,6 +17,7 @@ export const URL_SYS_GROUP_LIST = '/system/group/list'
 export const URL_SYS_SETTINGS = '/system/settings'
 export const URL_SYS_SETTINGS_BASE = `${URL_SYS_SETTINGS}/base`
 export const URL_SYS_SETTINGS_MAIL = `${URL_SYS_SETTINGS}/mail`
+export const URL_SYS_SETTINGS_SENSITIVE = `${URL_SYS_SETTINGS}/sensitive`
 export const URL_SYS_STATISTICS = '/system/statistics'
 export const URL_SYS_STATISTICS_SOFTWARE = `${URL_SYS_STATISTICS}/software`
 export const URL_SYS_STATISTICS_HARDWARE = `${URL_SYS_STATISTICS}/hardware`
diff --git a/src/global.d.ts b/src/global.d.ts
index 3d56975..deec261 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -357,6 +357,23 @@ interface MailSendParam {
     to: string
 }
 
+interface SensitiveWordVo {
+    id: string
+    word: string
+    useFor: string[]
+    enable: boolean
+}
+
+interface SensitiveWordAddParam {
+    word: string
+    useFor?: string[]
+    enable?: boolean
+}
+
+interface SensitiveWordUpdateParam {
+    ids: string[]
+}
+
 interface SoftwareInfoVo {
     os: string
     bitness: number
diff --git a/src/main.tsx b/src/main.tsx
index 6a0a008..4cbf761 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -10,7 +10,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <AntdConfigProvider
             theme={{
-                token: { colorPrimary: COLOR_MAIN },
+                token: { colorPrimary: COLOR_MAIN, colorLinkHover: COLOR_MAIN },
                 components: {
                     Tree: {
                         colorBgContainer: 'transparent'
diff --git a/src/pages/sign/SignUp.tsx b/src/pages/sign/SignUp.tsx
index edb13ee..c91b508 100644
--- a/src/pages/sign/SignUp.tsx
+++ b/src/pages/sign/SignUp.tsx
@@ -5,7 +5,8 @@ import {
     DATABASE_DUPLICATE_KEY,
     H_CAPTCHA_SITE_KEY,
     PERMISSION_REGISTER_SUCCESS,
-    SYSTEM_INVALID_CAPTCHA_CODE
+    SYSTEM_INVALID_CAPTCHA_CODE,
+    SYSTEM_MATCH_SENSITIVE_WORD
 } from '@/constants/common.constants'
 import { useUpdatedEffect } from '@/util/hooks'
 import { getLoginStatus, setToken } from '@/util/auth'
@@ -85,6 +86,10 @@ const SignUp: React.FC = () => {
                         void message.error('验证码有误，请重试')
                         setIsSigningUp(false)
                         break
+                    case SYSTEM_MATCH_SENSITIVE_WORD:
+                        void message.error('用户名包含敏感词，请重试')
+                        setIsSigningUp(false)
+                        break
                     default:
                         void message.error('服务器出错了，请稍后重试')
                         setIsSigningUp(false)
diff --git a/src/pages/sign/Verify.tsx b/src/pages/sign/Verify.tsx
index 17c0618..8edb23c 100644
--- a/src/pages/sign/Verify.tsx
+++ b/src/pages/sign/Verify.tsx
@@ -2,7 +2,9 @@ import React from 'react'
 import {
     COLOR_BACKGROUND,
     PERMISSION_ACCOUNT_NEED_INIT,
-    PERMISSION_NO_VERIFICATION_REQUIRED
+    PERMISSION_NO_VERIFICATION_REQUIRED,
+    PERMISSION_VERIFY_SUCCESS,
+    SYSTEM_MATCH_SENSITIVE_WORD
 } from '@/constants/common.constants'
 import { useUpdatedEffect } from '@/util/hooks'
 import { getLoginStatus, getUserInfo, requestUserInfo } from '@/util/auth'
@@ -115,21 +117,27 @@ const Verify: React.FC = () => {
             nickname: verifyParam.nickname
         }).then((res) => {
             const response = res.data
-            if (response.success) {
-                void message.success('恭喜你，完成了')
-                setTimeout(() => {
-                    void requestUserInfo().then(() => {
-                        refreshRouter()
-                        if (searchParams.has('redirect')) {
-                            navigate(searchParams.get('redirect') ?? '/')
-                        } else {
-                            navigate('/')
-                        }
-                    })
-                }, 1500)
-            } else {
-                void message.error('出错了，请稍后重试')
-                setIsVerifying(false)
+            switch (response.code) {
+                case PERMISSION_VERIFY_SUCCESS:
+                    void message.success('恭喜你，完成了')
+                    setTimeout(() => {
+                        void requestUserInfo().then(() => {
+                            refreshRouter()
+                            if (searchParams.has('redirect')) {
+                                navigate(searchParams.get('redirect') ?? '/')
+                            } else {
+                                navigate('/')
+                            }
+                        })
+                    }, 1500)
+                    break
+                case SYSTEM_MATCH_SENSITIVE_WORD:
+                    void message.error('昵称包含敏感词，请重试')
+                    setIsVerifying(false)
+                    break
+                default:
+                    void message.error('出错了，请稍后重试')
+                    setIsVerifying(false)
             }
         })
     }
diff --git a/src/pages/system/settings/BaseSettings.tsx b/src/pages/system/settings/BaseSettings.tsx
index 62402f6..19a1304 100644
--- a/src/pages/system/settings/BaseSettings.tsx
+++ b/src/pages/system/settings/BaseSettings.tsx
@@ -29,8 +29,8 @@ const BaseSettings: React.FC = () => {
         if (loading) {
             return
         }
-
         setLoading(true)
+
         void r_sys_settings_base_get().then((res) => {
             const response = res.data
             if (response.success) {
diff --git a/src/pages/system/settings/SensitiveWordSettings.tsx b/src/pages/system/settings/SensitiveWordSettings.tsx
new file mode 100644
index 0000000..ceea0e1
--- /dev/null
+++ b/src/pages/system/settings/SensitiveWordSettings.tsx
@@ -0,0 +1,163 @@
+import React, { useState } from 'react'
+import Icon from '@ant-design/icons'
+import { DATABASE_DUPLICATE_KEY, DATABASE_INSERT_SUCCESS } from '@/constants/common.constants'
+import { useUpdatedEffect } from '@/util/hooks'
+import {
+    r_sys_settings_sensitive_add,
+    r_sys_settings_sensitive_delete,
+    r_sys_settings_sensitive_get,
+    r_sys_settings_sensitive_update
+} from '@/services/system'
+import { SettingsCard } from '@/pages/system/settings'
+
+const SensitiveWordSettings: React.FC = () => {
+    const [dataSource, setDataSource] = useState<SensitiveWordVo[]>()
+    const [targetKeys, setTargetKeys] = useState<string[]>([])
+    const [selectedKeys, setSelectedKeys] = useState<string[]>([])
+    const [loading, setLoading] = useState(false)
+    const [isAdding, setIsAdding] = useState(false)
+    const [newWord, setNewWord] = useState('')
+
+    const handleOnReset = () => {
+        getSensitiveWordSettings()
+    }
+
+    const handleOnSave = () => {
+        targetKeys &&
+            void r_sys_settings_sensitive_update({ ids: targetKeys }).then((res) => {
+                const response = res.data
+                if (response.success) {
+                    void message.success('保存成功')
+                    getSensitiveWordSettings()
+                } else {
+                    void message.error('保存失败，请稍后重试')
+                }
+            })
+    }
+
+    const handleOnDelete = () => {
+        void r_sys_settings_sensitive_delete(selectedKeys[0]).then((res) => {
+            const response = res.data
+            if (response.success) {
+                void message.success('删除成功')
+                getSensitiveWordSettings()
+            } else {
+                void message.error('删除失败，请稍后重试')
+            }
+        })
+    }
+
+    const getSensitiveWordSettings = () => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+
+        void r_sys_settings_sensitive_get().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                data && setDataSource(data)
+                data && setTargetKeys(data.filter((value) => value.enable).map((value) => value.id))
+                setLoading(false)
+            }
+        })
+    }
+
+    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setNewWord(e.target.value)
+    }
+
+    const handleOnAdd = () => {
+        if (isAdding) {
+            return
+        }
+        setIsAdding(true)
+
+        void r_sys_settings_sensitive_add({ word: newWord, enable: false })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_INSERT_SUCCESS:
+                        void message.success('添加成功')
+                        setNewWord('')
+                        getSensitiveWordSettings()
+                        break
+                    case DATABASE_DUPLICATE_KEY:
+                        void message.error('该词已存在')
+                        break
+                    default:
+                        void message.error('出错了，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsAdding(false)
+            })
+    }
+
+    useUpdatedEffect(() => {
+        getSensitiveWordSettings()
+    }, [])
+
+    return (
+        <>
+            <SettingsCard
+                icon={IconOxygenSensitive}
+                title={'敏感词'}
+                loading={loading}
+                onReset={handleOnReset}
+                onSave={handleOnSave}
+                modifyOperationCode={'system:settings:modify:sensitive'}
+            >
+                <AntdTransfer
+                    listStyle={{ width: '100%', height: 400 }}
+                    oneWay
+                    showSearch
+                    pagination
+                    disabled={isAdding}
+                    titles={[
+                        <span
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'flex-end'
+                            }}
+                        >
+                            {selectedKeys?.length === 1 ? (
+                                <AntdTooltip title={'删除选中项'}>
+                                    <Icon
+                                        style={{ fontSize: '1.2em' }}
+                                        component={IconOxygenDelete}
+                                        onClick={handleOnDelete}
+                                    />
+                                </AntdTooltip>
+                            ) : undefined}
+                            备选
+                        </span>,
+                        '拦截'
+                    ]}
+                    dataSource={dataSource}
+                    targetKeys={targetKeys}
+                    selectedKeys={selectedKeys}
+                    onChange={setTargetKeys}
+                    onSelectChange={setSelectedKeys}
+                    rowKey={(item) => item.id}
+                    render={(item) => item.word}
+                />
+                <AntdInput
+                    value={newWord}
+                    onChange={handleOnChange}
+                    onPressEnter={handleOnAdd}
+                    disabled={isAdding}
+                    suffix={
+                        <AntdButton type={'primary'} onClick={handleOnAdd} disabled={isAdding}>
+                            <Icon component={IconOxygenPlus} />
+                        </AntdButton>
+                    }
+                ></AntdInput>
+            </SettingsCard>
+        </>
+    )
+}
+
+export default SensitiveWordSettings
diff --git a/src/pages/system/settings/index.tsx b/src/pages/system/settings/index.tsx
index 7da663d..cf05b94 100644
--- a/src/pages/system/settings/index.tsx
+++ b/src/pages/system/settings/index.tsx
@@ -9,6 +9,7 @@ import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
 import BaseSettings from '@/pages/system/settings/BaseSettings'
 import MailSettings from '@/pages/system/settings/MailSettings'
+import SensitiveWordSettings from '@/pages/system/settings/SensitiveWordSettings'
 
 interface SettingsCardProps extends React.PropsWithChildren {
     icon: IconComponent
@@ -38,7 +39,12 @@ export const SettingsCard: React.FC<SettingsCardProps> = (props) => {
                         </Permission>
                     ) : undefined}
                 </FlexBox>
-                <LoadingMask hidden={!props.loading}>{props.children}</LoadingMask>
+                <LoadingMask
+                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
+                    hidden={!props.loading}
+                >
+                    {props.children}
+                </LoadingMask>
             </FlexBox>
         </Card>
     )
@@ -54,6 +60,9 @@ const Settings: React.FC = () => {
                             <Permission operationCode={'system:settings:query:base'}>
                                 <BaseSettings />
                             </Permission>
+                            <Permission operationCode={'system:settings:query:sensitive'}>
+                                <SensitiveWordSettings />
+                            </Permission>
                         </FlexBox>
                         <FlexBox className={'root-col'}>
                             <Permission operationCode={'system:settings:query:mail'}>
diff --git a/src/services/system.tsx b/src/services/system.tsx
index d995a84..4c6d321 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -15,7 +15,8 @@ import {
     URL_SYS_STATISTICS_STORAGE,
     URL_SYS_STATISTICS_ONLINE,
     URL_SYS_STATISTICS_ACTIVE,
-    URL_SYS_SETTINGS_BASE
+    URL_SYS_SETTINGS_BASE,
+    URL_SYS_SETTINGS_SENSITIVE
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -85,6 +86,18 @@ export const r_sys_settings_mail_update = (param: MailSettingsParam) =>
 export const r_sys_settings_mail_send = (param: MailSendParam) =>
     request.post(URL_SYS_SETTINGS_MAIL, param)
 
+export const r_sys_settings_sensitive_get = () =>
+    request.get<SensitiveWordVo[]>(URL_SYS_SETTINGS_SENSITIVE)
+
+export const r_sys_settings_sensitive_add = (param: SensitiveWordAddParam) =>
+    request.post(URL_SYS_SETTINGS_SENSITIVE, param)
+
+export const r_sys_settings_sensitive_update = (param: SensitiveWordUpdateParam) =>
+    request.put(URL_SYS_SETTINGS_SENSITIVE, param)
+
+export const r_sys_settings_sensitive_delete = (id: string) =>
+    request.delete(`${URL_SYS_SETTINGS_SENSITIVE}/${id}`)
+
 export const r_sys_statistics_software = () =>
     request.get<SoftwareInfoVo>(URL_SYS_STATISTICS_SOFTWARE)
 

From 3d8e55cbea4d081a38a603dd819e7536e3f8de8c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 5 Jan 2024 11:03:51 +0800
Subject: [PATCH 154/307] Pre rename dir

---
 .../{sidebar => sidebar_}/SidebarFooter.tsx   |  0
 .../{sidebar => sidebar_}/SidebarItem.tsx     |  2 +-
 .../{sidebar => sidebar_}/SidebarItemList.tsx |  0
 .../{sidebar => sidebar_}/SidebarScroll.tsx   |  0
 .../{sidebar => sidebar_}/SidebarSeparate.tsx |  0
 .../{sidebar => sidebar_}/SidebarSubmenu.tsx  |  0
 .../common/{sidebar => sidebar_}/index.tsx    |  4 +-
 src/pages/SystemFramework.tsx                 |  6 +--
 src/pages/ToolsFramework.tsx                  | 10 ++--
 src/pages/UserFramework.tsx                   |  6 +--
 src/pages/{sign => sign_}/Forget.tsx          |  0
 src/pages/{sign => sign_}/SignIn.tsx          |  0
 src/pages/{sign => sign_}/SignUp.tsx          |  0
 src/pages/{sign => sign_}/Verify.tsx          |  0
 src/pages/{sign => sign_}/index.tsx           |  8 +--
 src/pages/{system => system_}/Group.tsx       |  0
 src/pages/{system => system_}/Log.tsx         |  0
 src/pages/{system => system_}/Role.tsx        |  0
 src/pages/{system => system_}/User.tsx        |  0
 src/pages/{system => system_}/index.tsx       |  0
 .../settings_}/BaseSettings.tsx               |  2 +-
 .../settings_}/MailSettings.tsx               |  2 +-
 .../settings_}/SensitiveWordSettings.tsx      |  2 +-
 .../settings => system_/settings_}/index.tsx  |  6 +--
 .../statistics_}/ActiveInfo.tsx               |  4 +-
 .../statistics_}/CPUInfo.tsx                  |  4 +-
 .../statistics_}/HardwareInfo.tsx             |  2 +-
 .../statistics_}/OnlineInfo.tsx               |  4 +-
 .../statistics_}/SoftwareInfo.tsx             |  2 +-
 .../statistics_}/StorageInfo.tsx              |  4 +-
 .../statistics_}/index.tsx                    | 12 ++---
 .../statistics_}/shared.ts                    |  0
 src/pages/{tools => tools_}/All.tsx           |  0
 src/pages/{tools => tools_}/Translation.tsx   |  0
 src/pages/{tools => tools_}/index.tsx         |  0
 src/pages/{user => user_}/index.tsx           |  0
 src/router/index.tsx                          |  2 +-
 src/router/system.tsx                         | 14 +++---
 src/router/tools.tsx                          | 50 +++++++++----------
 src/router/user.tsx                           |  2 +-
 40 files changed, 74 insertions(+), 74 deletions(-)
 rename src/components/common/{sidebar => sidebar_}/SidebarFooter.tsx (100%)
 rename src/components/common/{sidebar => sidebar_}/SidebarItem.tsx (96%)
 rename src/components/common/{sidebar => sidebar_}/SidebarItemList.tsx (100%)
 rename src/components/common/{sidebar => sidebar_}/SidebarScroll.tsx (100%)
 rename src/components/common/{sidebar => sidebar_}/SidebarSeparate.tsx (100%)
 rename src/components/common/{sidebar => sidebar_}/SidebarSubmenu.tsx (100%)
 rename src/components/common/{sidebar => sidebar_}/index.tsx (91%)
 rename src/pages/{sign => sign_}/Forget.tsx (100%)
 rename src/pages/{sign => sign_}/SignIn.tsx (100%)
 rename src/pages/{sign => sign_}/SignUp.tsx (100%)
 rename src/pages/{sign => sign_}/Verify.tsx (100%)
 rename src/pages/{sign => sign_}/index.tsx (93%)
 rename src/pages/{system => system_}/Group.tsx (100%)
 rename src/pages/{system => system_}/Log.tsx (100%)
 rename src/pages/{system => system_}/Role.tsx (100%)
 rename src/pages/{system => system_}/User.tsx (100%)
 rename src/pages/{system => system_}/index.tsx (100%)
 rename src/pages/{system/settings => system_/settings_}/BaseSettings.tsx (97%)
 rename src/pages/{system/settings => system_/settings_}/MailSettings.tsx (99%)
 rename src/pages/{system/settings => system_/settings_}/SensitiveWordSettings.tsx (99%)
 rename src/pages/{system/settings => system_/settings_}/index.tsx (93%)
 rename src/pages/{system/statistics => system_/statistics_}/ActiveInfo.tsx (98%)
 rename src/pages/{system/statistics => system_/statistics_}/CPUInfo.tsx (98%)
 rename src/pages/{system/statistics => system_/statistics_}/HardwareInfo.tsx (97%)
 rename src/pages/{system/statistics => system_/statistics_}/OnlineInfo.tsx (98%)
 rename src/pages/{system/statistics => system_/statistics_}/SoftwareInfo.tsx (98%)
 rename src/pages/{system/statistics => system_/statistics_}/StorageInfo.tsx (98%)
 rename src/pages/{system/statistics => system_/statistics_}/index.tsx (86%)
 rename src/pages/{system/statistics => system_/statistics_}/shared.ts (100%)
 rename src/pages/{tools => tools_}/All.tsx (100%)
 rename src/pages/{tools => tools_}/Translation.tsx (100%)
 rename src/pages/{tools => tools_}/index.tsx (100%)
 rename src/pages/{user => user_}/index.tsx (100%)

diff --git a/src/components/common/sidebar/SidebarFooter.tsx b/src/components/common/sidebar_/SidebarFooter.tsx
similarity index 100%
rename from src/components/common/sidebar/SidebarFooter.tsx
rename to src/components/common/sidebar_/SidebarFooter.tsx
diff --git a/src/components/common/sidebar/SidebarItem.tsx b/src/components/common/sidebar_/SidebarItem.tsx
similarity index 96%
rename from src/components/common/sidebar/SidebarItem.tsx
rename to src/components/common/sidebar_/SidebarItem.tsx
index 20edf64..6289ac2 100644
--- a/src/components/common/sidebar/SidebarItem.tsx
+++ b/src/components/common/sidebar_/SidebarItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
-import SidebarSubmenu from '@/components/common/sidebar/SidebarSubmenu'
+import SidebarSubmenu from '@/components/common/sidebar_/SidebarSubmenu'
 
 type ItemProps = {
     icon?: IconComponent
diff --git a/src/components/common/sidebar/SidebarItemList.tsx b/src/components/common/sidebar_/SidebarItemList.tsx
similarity index 100%
rename from src/components/common/sidebar/SidebarItemList.tsx
rename to src/components/common/sidebar_/SidebarItemList.tsx
diff --git a/src/components/common/sidebar/SidebarScroll.tsx b/src/components/common/sidebar_/SidebarScroll.tsx
similarity index 100%
rename from src/components/common/sidebar/SidebarScroll.tsx
rename to src/components/common/sidebar_/SidebarScroll.tsx
diff --git a/src/components/common/sidebar/SidebarSeparate.tsx b/src/components/common/sidebar_/SidebarSeparate.tsx
similarity index 100%
rename from src/components/common/sidebar/SidebarSeparate.tsx
rename to src/components/common/sidebar_/SidebarSeparate.tsx
diff --git a/src/components/common/sidebar/SidebarSubmenu.tsx b/src/components/common/sidebar_/SidebarSubmenu.tsx
similarity index 100%
rename from src/components/common/sidebar/SidebarSubmenu.tsx
rename to src/components/common/sidebar_/SidebarSubmenu.tsx
diff --git a/src/components/common/sidebar/index.tsx b/src/components/common/sidebar_/index.tsx
similarity index 91%
rename from src/components/common/sidebar/index.tsx
rename to src/components/common/sidebar_/index.tsx
index d9b3266..96e3a90 100644
--- a/src/components/common/sidebar/index.tsx
+++ b/src/components/common/sidebar_/index.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/sidebar.scss'
 import { getLocalStorage, setLocalStorage } from '@/util/browser'
-import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate'
-import SidebarFooter from '@/components/common/sidebar/SidebarFooter'
+import SidebarSeparate from '@/components/common/sidebar_/SidebarSeparate'
+import SidebarFooter from '@/components/common/sidebar_/SidebarFooter'
 
 interface SidebarProps extends React.PropsWithChildren {
     title: string
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 9ca567c..189d747 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import '@/assets/css/pages/system-framework.scss'
 import { getSystemRouteJson } from '@/router/system'
 import FitFullscreen from '@/components/common/FitFullscreen'
-import Sidebar from '@/components/common/sidebar'
-import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
-import SidebarItem from '@/components/common/sidebar/SidebarItem'
+import Sidebar from 'src/components/common/sidebar_'
+import SidebarItemList from '@/components/common/sidebar_/SidebarItemList'
+import SidebarItem from '@/components/common/sidebar_/SidebarItem'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const SystemFramework: React.FC = () => {
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index c079dd1..b7a70c1 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -2,11 +2,11 @@ import React from 'react'
 import '@/assets/css/pages/tools-framework.scss'
 import { tools } from '@/router/tools'
 import FitFullscreen from '@/components/common/FitFullscreen'
-import SidebarScroll, { SidebarScrollElement } from '@/components/common/sidebar/SidebarScroll'
-import Sidebar from '@/components/common/sidebar'
-import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
-import SidebarItem from '@/components/common/sidebar/SidebarItem'
-import SidebarSeparate from '@/components/common/sidebar/SidebarSeparate'
+import SidebarScroll, { SidebarScrollElement } from '@/components/common/sidebar_/SidebarScroll'
+import Sidebar from 'src/components/common/sidebar_'
+import SidebarItemList from '@/components/common/sidebar_/SidebarItemList'
+import SidebarItem from '@/components/common/sidebar_/SidebarItem'
+import SidebarSeparate from '@/components/common/sidebar_/SidebarSeparate'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const ToolsFramework: React.FC = () => {
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index a29c6b4..172b9c3 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -3,9 +3,9 @@ import '@/assets/css/pages/user-framework.scss'
 import user from '@/router/user'
 import { hasPathPermission } from '@/util/auth'
 import FitFullscreen from '@/components/common/FitFullscreen'
-import Sidebar from '@/components/common/sidebar'
-import SidebarItemList from '@/components/common/sidebar/SidebarItemList'
-import SidebarItem from '@/components/common/sidebar/SidebarItem'
+import Sidebar from 'src/components/common/sidebar_'
+import SidebarItemList from '@/components/common/sidebar_/SidebarItemList'
+import SidebarItem from '@/components/common/sidebar_/SidebarItem'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const ToolsFramework: React.FC = () => {
diff --git a/src/pages/sign/Forget.tsx b/src/pages/sign_/Forget.tsx
similarity index 100%
rename from src/pages/sign/Forget.tsx
rename to src/pages/sign_/Forget.tsx
diff --git a/src/pages/sign/SignIn.tsx b/src/pages/sign_/SignIn.tsx
similarity index 100%
rename from src/pages/sign/SignIn.tsx
rename to src/pages/sign_/SignIn.tsx
diff --git a/src/pages/sign/SignUp.tsx b/src/pages/sign_/SignUp.tsx
similarity index 100%
rename from src/pages/sign/SignUp.tsx
rename to src/pages/sign_/SignUp.tsx
diff --git a/src/pages/sign/Verify.tsx b/src/pages/sign_/Verify.tsx
similarity index 100%
rename from src/pages/sign/Verify.tsx
rename to src/pages/sign_/Verify.tsx
diff --git a/src/pages/sign/index.tsx b/src/pages/sign_/index.tsx
similarity index 93%
rename from src/pages/sign/index.tsx
rename to src/pages/sign_/index.tsx
index 476acc8..947bc3b 100644
--- a/src/pages/sign/index.tsx
+++ b/src/pages/sign_/index.tsx
@@ -4,10 +4,10 @@ import { useUpdatedEffect } from '@/util/hooks'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
-import SignUp from '@/pages/sign/SignUp'
-import Verify from '@/pages/sign/Verify'
-import Forget from '@/pages/sign/Forget'
-import SignIn from '@/pages/sign/SignIn'
+import SignUp from '@/pages/sign_/SignUp'
+import Verify from '@/pages/sign_/Verify'
+import Forget from '@/pages/sign_/Forget'
+import SignIn from '@/pages/sign_/SignIn'
 
 const Sign: React.FC = () => {
     const lastPage = useRef('none')
diff --git a/src/pages/system/Group.tsx b/src/pages/system_/Group.tsx
similarity index 100%
rename from src/pages/system/Group.tsx
rename to src/pages/system_/Group.tsx
diff --git a/src/pages/system/Log.tsx b/src/pages/system_/Log.tsx
similarity index 100%
rename from src/pages/system/Log.tsx
rename to src/pages/system_/Log.tsx
diff --git a/src/pages/system/Role.tsx b/src/pages/system_/Role.tsx
similarity index 100%
rename from src/pages/system/Role.tsx
rename to src/pages/system_/Role.tsx
diff --git a/src/pages/system/User.tsx b/src/pages/system_/User.tsx
similarity index 100%
rename from src/pages/system/User.tsx
rename to src/pages/system_/User.tsx
diff --git a/src/pages/system/index.tsx b/src/pages/system_/index.tsx
similarity index 100%
rename from src/pages/system/index.tsx
rename to src/pages/system_/index.tsx
diff --git a/src/pages/system/settings/BaseSettings.tsx b/src/pages/system_/settings_/BaseSettings.tsx
similarity index 97%
rename from src/pages/system/settings/BaseSettings.tsx
rename to src/pages/system_/settings_/BaseSettings.tsx
index 19a1304..20bbbb2 100644
--- a/src/pages/system/settings/BaseSettings.tsx
+++ b/src/pages/system_/settings_/BaseSettings.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
 import { r_sys_settings_base_get, r_sys_settings_base_update } from '@/services/system'
-import { SettingsCard } from '@/pages/system/settings'
+import { SettingsCard } from '@/pages/system_/settings_'
 
 const BaseSettings: React.FC = () => {
     const [baseForm] = AntdForm.useForm<BaseSettingsParam>()
diff --git a/src/pages/system/settings/MailSettings.tsx b/src/pages/system_/settings_/MailSettings.tsx
similarity index 99%
rename from src/pages/system/settings/MailSettings.tsx
rename to src/pages/system_/settings_/MailSettings.tsx
index cd0fd51..fd060ae 100644
--- a/src/pages/system/settings/MailSettings.tsx
+++ b/src/pages/system_/settings_/MailSettings.tsx
@@ -7,7 +7,7 @@ import {
     r_sys_settings_mail_send,
     r_sys_settings_mail_update
 } from '@/services/system'
-import { SettingsCard } from '@/pages/system/settings'
+import { SettingsCard } from '@/pages/system_/settings_'
 
 const MailSettings: React.FC = () => {
     const [modal, contextHolder] = AntdModal.useModal()
diff --git a/src/pages/system/settings/SensitiveWordSettings.tsx b/src/pages/system_/settings_/SensitiveWordSettings.tsx
similarity index 99%
rename from src/pages/system/settings/SensitiveWordSettings.tsx
rename to src/pages/system_/settings_/SensitiveWordSettings.tsx
index ceea0e1..a3db305 100644
--- a/src/pages/system/settings/SensitiveWordSettings.tsx
+++ b/src/pages/system_/settings_/SensitiveWordSettings.tsx
@@ -8,7 +8,7 @@ import {
     r_sys_settings_sensitive_get,
     r_sys_settings_sensitive_update
 } from '@/services/system'
-import { SettingsCard } from '@/pages/system/settings'
+import { SettingsCard } from '@/pages/system_/settings_'
 
 const SensitiveWordSettings: React.FC = () => {
     const [dataSource, setDataSource] = useState<SensitiveWordVo[]>()
diff --git a/src/pages/system/settings/index.tsx b/src/pages/system_/settings_/index.tsx
similarity index 93%
rename from src/pages/system/settings/index.tsx
rename to src/pages/system_/settings_/index.tsx
index cf05b94..344d010 100644
--- a/src/pages/system/settings/index.tsx
+++ b/src/pages/system_/settings_/index.tsx
@@ -7,9 +7,9 @@ import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
-import BaseSettings from '@/pages/system/settings/BaseSettings'
-import MailSettings from '@/pages/system/settings/MailSettings'
-import SensitiveWordSettings from '@/pages/system/settings/SensitiveWordSettings'
+import BaseSettings from '@/pages/system_/settings_/BaseSettings'
+import MailSettings from '@/pages/system_/settings_/MailSettings'
+import SensitiveWordSettings from '@/pages/system_/settings_/SensitiveWordSettings'
 
 interface SettingsCardProps extends React.PropsWithChildren {
     icon: IconComponent
diff --git a/src/pages/system/statistics/ActiveInfo.tsx b/src/pages/system_/statistics_/ActiveInfo.tsx
similarity index 98%
rename from src/pages/system/statistics/ActiveInfo.tsx
rename to src/pages/system_/statistics_/ActiveInfo.tsx
index 2d5eb99..dfc1592 100644
--- a/src/pages/system/statistics/ActiveInfo.tsx
+++ b/src/pages/system_/statistics_/ActiveInfo.tsx
@@ -5,8 +5,8 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_active } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/system/statistics/shared'
-import { CommonCard } from '@/pages/system/statistics'
+import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/system_/statistics_/shared'
+import { CommonCard } from '@/pages/system_/statistics_'
 
 const ActiveInfo: React.FC = () => {
     const activeInfoDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/system/statistics/CPUInfo.tsx b/src/pages/system_/statistics_/CPUInfo.tsx
similarity index 98%
rename from src/pages/system/statistics/CPUInfo.tsx
rename to src/pages/system_/statistics_/CPUInfo.tsx
index 8090e0c..2677587 100644
--- a/src/pages/system/statistics/CPUInfo.tsx
+++ b/src/pages/system_/statistics_/CPUInfo.tsx
@@ -8,8 +8,8 @@ import {
     barDefaultSeriesOption,
     barEChartsBaseOption,
     EChartsOption
-} from '@/pages/system/statistics/shared'
-import { CommonCard } from '@/pages/system/statistics'
+} from '@/pages/system_/statistics_/shared'
+import { CommonCard } from '@/pages/system_/statistics_'
 
 const CPUInfo: React.FC = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/system/statistics/HardwareInfo.tsx b/src/pages/system_/statistics_/HardwareInfo.tsx
similarity index 97%
rename from src/pages/system/statistics/HardwareInfo.tsx
rename to src/pages/system_/statistics_/HardwareInfo.tsx
index 8864fec..3cc657b 100644
--- a/src/pages/system/statistics/HardwareInfo.tsx
+++ b/src/pages/system_/statistics_/HardwareInfo.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import { r_sys_statistics_hardware } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/system/statistics'
+import { CommonCard } from '@/pages/system_/statistics_'
 
 const HardwareInfo: React.FC = () => {
     const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
diff --git a/src/pages/system/statistics/OnlineInfo.tsx b/src/pages/system_/statistics_/OnlineInfo.tsx
similarity index 98%
rename from src/pages/system/statistics/OnlineInfo.tsx
rename to src/pages/system_/statistics_/OnlineInfo.tsx
index 7ddd95d..f1798fe 100644
--- a/src/pages/system/statistics/OnlineInfo.tsx
+++ b/src/pages/system_/statistics_/OnlineInfo.tsx
@@ -5,8 +5,8 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_online } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/system/statistics/shared'
-import { CommonCard } from '@/pages/system/statistics'
+import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/system_/statistics_/shared'
+import { CommonCard } from '@/pages/system_/statistics_'
 
 const OnlineInfo: React.FC = () => {
     const onlineInfoDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/system/statistics/SoftwareInfo.tsx b/src/pages/system_/statistics_/SoftwareInfo.tsx
similarity index 98%
rename from src/pages/system/statistics/SoftwareInfo.tsx
rename to src/pages/system_/statistics_/SoftwareInfo.tsx
index 5254691..0ea498d 100644
--- a/src/pages/system/statistics/SoftwareInfo.tsx
+++ b/src/pages/system_/statistics_/SoftwareInfo.tsx
@@ -3,7 +3,7 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { utcToLocalTime } from '@/util/datetime'
 import { r_sys_statistics_software } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/system/statistics'
+import { CommonCard } from '@/pages/system_/statistics_'
 
 const SoftwareInfo: React.FC = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
diff --git a/src/pages/system/statistics/StorageInfo.tsx b/src/pages/system_/statistics_/StorageInfo.tsx
similarity index 98%
rename from src/pages/system/statistics/StorageInfo.tsx
rename to src/pages/system_/statistics_/StorageInfo.tsx
index 318c65d..987444d 100644
--- a/src/pages/system/statistics/StorageInfo.tsx
+++ b/src/pages/system_/statistics_/StorageInfo.tsx
@@ -9,8 +9,8 @@ import {
     barDefaultSeriesOption,
     barEChartsBaseOption,
     EChartsOption
-} from '@/pages/system/statistics/shared'
-import { CommonCard } from '@/pages/system/statistics'
+} from '@/pages/system_/statistics_/shared'
+import { CommonCard } from '@/pages/system_/statistics_'
 
 const StorageInfo: React.FC = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/system/statistics/index.tsx b/src/pages/system_/statistics_/index.tsx
similarity index 86%
rename from src/pages/system/statistics/index.tsx
rename to src/pages/system_/statistics_/index.tsx
index 587fb15..8d60094 100644
--- a/src/pages/system/statistics/index.tsx
+++ b/src/pages/system_/statistics_/index.tsx
@@ -7,12 +7,12 @@ import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
-import OnlineInfo from '@/pages/system/statistics/OnlineInfo'
-import ActiveInfo from '@/pages/system/statistics/ActiveInfo'
-import SoftwareInfo from '@/pages/system/statistics/SoftwareInfo'
-import HardwareInfo from '@/pages/system/statistics/HardwareInfo'
-import CPUInfo from '@/pages/system/statistics/CPUInfo'
-import StorageInfo from '@/pages/system/statistics/StorageInfo'
+import OnlineInfo from '@/pages/system_/statistics_/OnlineInfo'
+import ActiveInfo from '@/pages/system_/statistics_/ActiveInfo'
+import SoftwareInfo from '@/pages/system_/statistics_/SoftwareInfo'
+import HardwareInfo from '@/pages/system_/statistics_/HardwareInfo'
+import CPUInfo from '@/pages/system_/statistics_/CPUInfo'
+import StorageInfo from '@/pages/system_/statistics_/StorageInfo'
 
 interface CommonCardProps extends React.PropsWithChildren {
     icon: IconComponent
diff --git a/src/pages/system/statistics/shared.ts b/src/pages/system_/statistics_/shared.ts
similarity index 100%
rename from src/pages/system/statistics/shared.ts
rename to src/pages/system_/statistics_/shared.ts
diff --git a/src/pages/tools/All.tsx b/src/pages/tools_/All.tsx
similarity index 100%
rename from src/pages/tools/All.tsx
rename to src/pages/tools_/All.tsx
diff --git a/src/pages/tools/Translation.tsx b/src/pages/tools_/Translation.tsx
similarity index 100%
rename from src/pages/tools/Translation.tsx
rename to src/pages/tools_/Translation.tsx
diff --git a/src/pages/tools/index.tsx b/src/pages/tools_/index.tsx
similarity index 100%
rename from src/pages/tools/index.tsx
rename to src/pages/tools_/index.tsx
diff --git a/src/pages/user/index.tsx b/src/pages/user_/index.tsx
similarity index 100%
rename from src/pages/user/index.tsx
rename to src/pages/user_/index.tsx
diff --git a/src/router/index.tsx b/src/router/index.tsx
index c5aac51..2469d6a 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -5,7 +5,7 @@ import user from '@/router/user'
 import tools from '@/router/tools'
 import { getAuthRoute, mapJsonToRoute, setTitle } from '@/util/route'
 
-const lazySignPage = React.lazy(() => import('@/pages/sign'))
+const lazySignPage = React.lazy(() => import('src/pages/sign_'))
 
 const root: RouteJsonObject[] = [
     {
diff --git a/src/router/system.tsx b/src/router/system.tsx
index ce3b836..638dd87 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -6,7 +6,7 @@ const system: RouteJsonObject[] = [
         path: '',
         absolutePath: '/system',
         id: 'system',
-        component: React.lazy(() => import('@/pages/system')),
+        component: React.lazy(() => import('src/pages/system_')),
         name: '系统管理',
         icon: React.lazy(() => import('~icons/oxygen/setting.jsx')),
         menu: true
@@ -15,7 +15,7 @@ const system: RouteJsonObject[] = [
         path: 'statistics',
         absolutePath: '/system/statistics',
         id: 'system-statistics',
-        component: React.lazy(() => import('@/pages/system/statistics')),
+        component: React.lazy(() => import('@/pages/system_/statistics_')),
         name: '系统概况',
         icon: React.lazy(() => import('~icons/oxygen/chart.jsx')),
         menu: true,
@@ -25,7 +25,7 @@ const system: RouteJsonObject[] = [
         path: 'settings',
         absolutePath: '/system/settings',
         id: 'system-settings',
-        component: React.lazy(() => import('@/pages/system/settings')),
+        component: React.lazy(() => import('@/pages/system_/settings_')),
         name: '系统设置',
         icon: React.lazy(() => import('~icons/oxygen/option.jsx')),
         menu: true,
@@ -35,7 +35,7 @@ const system: RouteJsonObject[] = [
         path: 'user',
         absolutePath: '/system/user',
         id: 'system-user',
-        component: React.lazy(() => import('@/pages/system/User')),
+        component: React.lazy(() => import('@/pages/system_/User')),
         name: '用户管理',
         icon: React.lazy(() => import('~icons/oxygen/user.jsx')),
         menu: true,
@@ -45,7 +45,7 @@ const system: RouteJsonObject[] = [
         path: 'role',
         absolutePath: '/system/role',
         id: 'system-role',
-        component: React.lazy(() => import('@/pages/system/Role')),
+        component: React.lazy(() => import('@/pages/system_/Role')),
         name: '角色管理',
         icon: React.lazy(() => import('~icons/oxygen/role.jsx')),
         menu: true,
@@ -55,7 +55,7 @@ const system: RouteJsonObject[] = [
         path: 'group',
         absolutePath: '/system/group',
         id: 'system-group',
-        component: React.lazy(() => import('@/pages/system/Group')),
+        component: React.lazy(() => import('@/pages/system_/Group')),
         name: '群组管理',
         icon: React.lazy(() => import('~icons/oxygen/group.jsx')),
         menu: true,
@@ -65,7 +65,7 @@ const system: RouteJsonObject[] = [
         path: 'log',
         absolutePath: '/system/log',
         id: 'system-log',
-        component: React.lazy(() => import('@/pages/system/Log')),
+        component: React.lazy(() => import('@/pages/system_/Log')),
         name: '系统日志',
         icon: React.lazy(() => import('~icons/oxygen/log.jsx')),
         menu: true,
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 8f1e01b..349e77f 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -5,7 +5,7 @@ export const tools: RouteJsonObject[] = [
         path: '',
         absolutePath: '/',
         id: 'tools',
-        component: React.lazy(() => import('@/pages/tools')),
+        component: React.lazy(() => import('src/pages/tools_')),
         name: '主页',
         icon: React.lazy(() => import('~icons/oxygen/home.jsx')),
         menu: true,
@@ -15,7 +15,7 @@ export const tools: RouteJsonObject[] = [
         path: 'all',
         absolutePath: '/all',
         id: 'tools-all',
-        component: React.lazy(() => import('@/pages/tools')),
+        component: React.lazy(() => import('src/pages/tools_')),
         name: '全部工具',
         titlePostfix: ' - 全部工具',
         icon: React.lazy(() => import('~icons/oxygen/tool.jsx')),
@@ -26,7 +26,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation',
         absolutePath: '/translation',
         id: 'tools-translation',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -55,7 +55,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation-',
         absolutePath: '/translation-',
         id: 'tools-translation-',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译-',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -83,7 +83,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--',
         absolutePath: '/translation--',
         id: 'tools-translation--',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -93,7 +93,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--1',
         absolutePath: '/translation--1',
         id: 'tools-translation--1',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--1',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -103,7 +103,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--2',
         absolutePath: '/translation--2',
         id: 'tools-translation--2',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--2',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -113,7 +113,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--3',
         absolutePath: '/translation--3',
         id: 'tools-translation--3',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--3',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -123,7 +123,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--4',
         absolutePath: '/translation--4',
         id: 'tools-translation--4',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--4',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -133,7 +133,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--5',
         absolutePath: '/translation--5',
         id: 'tools-translation--5',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--5',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -143,7 +143,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--6',
         absolutePath: '/translation--6',
         id: 'tools-translation--6',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--6',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -153,7 +153,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--7',
         absolutePath: '/translation--7',
         id: 'tools-translation--7',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--7',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -163,7 +163,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--8',
         absolutePath: '/translation--8',
         id: 'tools-translation--8',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--8',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -173,7 +173,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--9',
         absolutePath: '/translation--9',
         id: 'tools-translation--9',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--9',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -183,7 +183,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--10',
         absolutePath: '/translation--10',
         id: 'tools-translation--10',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--10',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -193,7 +193,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--1-',
         absolutePath: '/translation--1-',
         id: 'tools-translation--1-',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--1-',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -203,7 +203,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--2-',
         absolutePath: '/translation--2-',
         id: 'tools-translation--2-',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--2-',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -213,7 +213,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--3-',
         absolutePath: '/translation--3-',
         id: 'tools-translation--3-',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--3-',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -223,7 +223,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--4-',
         absolutePath: '/translation--4-',
         id: 'tools-translation--4-',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--4-',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -233,7 +233,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--5-',
         absolutePath: '/translation--5-',
         id: 'tools-translation--5-',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--5-',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -243,7 +243,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--6-',
         absolutePath: '/translation--6-',
         id: 'tools-translation--6-',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--6-',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -253,7 +253,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--7-',
         absolutePath: '/translation--7-',
         id: 'tools-translation--7-',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--7-',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -263,7 +263,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--8-',
         absolutePath: '/translation--8-',
         id: 'tools-translation--8-',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--8-',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -273,7 +273,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--9-',
         absolutePath: '/translation--9-',
         id: 'tools-translation--9-',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--9-',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
@@ -283,7 +283,7 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--10-',
         absolutePath: '/translation--10-',
         id: 'tools-translation--10-',
-        component: React.lazy(() => import('@/pages/tools/Translation')),
+        component: React.lazy(() => import('@/pages/tools_/Translation')),
         name: '翻译--10-',
         icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
         menu: true,
diff --git a/src/router/user.tsx b/src/router/user.tsx
index dde6c59..8279478 100644
--- a/src/router/user.tsx
+++ b/src/router/user.tsx
@@ -5,7 +5,7 @@ const user: RouteJsonObject[] = [
         path: '',
         absolutePath: '/user',
         id: 'user',
-        component: React.lazy(() => import('@/pages/user')),
+        component: React.lazy(() => import('src/pages/user_')),
         name: '个人档案',
         icon: React.lazy(() => import('~icons/oxygen/user.jsx')),
         menu: true

From 6c8c6088d186c77f561a2d55ec3cdd90f6b17389 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 5 Jan 2024 13:51:38 +0800
Subject: [PATCH 155/307] Optimize file name

---
 .../SidebarFooter.tsx => Sidebar/Footer.tsx}  |   4 +-
 .../SidebarItem.tsx => Sidebar/Item.tsx}      |  10 +-
 src/components/common/Sidebar/ItemList.tsx    |   7 ++
 .../SidebarScroll.tsx => Sidebar/Scroll.tsx}  |   4 +-
 .../Separate.tsx}                             |   4 +-
 .../Submenu.tsx}                              |   4 +-
 .../common/{sidebar_ => Sidebar}/index.tsx    |  30 ++++--
 .../common/sidebar_/SidebarItemList.tsx       |   7 --
 src/pages/{sign_ => Sign}/Forget.tsx          |   0
 src/pages/{sign_ => Sign}/SignIn.tsx          |   0
 src/pages/{sign_ => Sign}/SignUp.tsx          |   0
 src/pages/{sign_ => Sign}/Verify.tsx          |   0
 src/pages/{sign_ => Sign}/index.tsx           |   8 +-
 src/pages/{system_ => System}/Group.tsx       |   0
 src/pages/{system_ => System}/Log.tsx         |   0
 src/pages/{system_ => System}/Role.tsx        |   0
 .../Settings/Base.tsx}                        |   6 +-
 .../Settings/Mail.tsx}                        |   6 +-
 .../Settings/SensitiveWord.tsx}               |   6 +-
 .../settings_ => System/Settings}/index.tsx   |  12 +--
 .../Statistics}/ActiveInfo.tsx                |   4 +-
 .../Statistics}/CPUInfo.tsx                   |   4 +-
 .../Statistics}/HardwareInfo.tsx              |   2 +-
 .../Statistics}/OnlineInfo.tsx                |   4 +-
 .../Statistics}/SoftwareInfo.tsx              |   2 +-
 .../Statistics}/StorageInfo.tsx               |   4 +-
 .../Statistics}/index.tsx                     |  12 +--
 .../Statistics}/shared.ts                     |   0
 src/pages/{system_ => System}/User.tsx        |   0
 src/pages/{system_ => System}/index.tsx       |   0
 src/pages/SystemFramework.tsx                 |  10 +-
 src/pages/{tools_ => Tools}/All.tsx           |   0
 src/pages/{tools_ => Tools}/Translation.tsx   |   0
 src/pages/{tools_ => Tools}/index.tsx         |   0
 src/pages/ToolsFramework.tsx                  |  31 +++---
 src/pages/{user_ => User}/index.tsx           |   0
 src/pages/UserFramework.tsx                   |  22 ++--
 src/router/index.tsx                          |   2 +-
 src/router/system.tsx                         |  28 ++---
 src/router/tools.tsx                          | 102 +++++++++---------
 src/router/user.tsx                           |   4 +-
 41 files changed, 177 insertions(+), 162 deletions(-)
 rename src/components/common/{sidebar_/SidebarFooter.tsx => Sidebar/Footer.tsx} (97%)
 rename src/components/common/{sidebar_/SidebarItem.tsx => Sidebar/Item.tsx} (87%)
 create mode 100644 src/components/common/Sidebar/ItemList.tsx
 rename src/components/common/{sidebar_/SidebarScroll.tsx => Sidebar/Scroll.tsx} (86%)
 rename src/components/common/{sidebar_/SidebarSeparate.tsx => Sidebar/Separate.tsx} (78%)
 rename src/components/common/{sidebar_/SidebarSubmenu.tsx => Sidebar/Submenu.tsx} (80%)
 rename src/components/common/{sidebar_ => Sidebar}/index.tsx (62%)
 delete mode 100644 src/components/common/sidebar_/SidebarItemList.tsx
 rename src/pages/{sign_ => Sign}/Forget.tsx (100%)
 rename src/pages/{sign_ => Sign}/SignIn.tsx (100%)
 rename src/pages/{sign_ => Sign}/SignUp.tsx (100%)
 rename src/pages/{sign_ => Sign}/Verify.tsx (100%)
 rename src/pages/{sign_ => Sign}/index.tsx (93%)
 rename src/pages/{system_ => System}/Group.tsx (100%)
 rename src/pages/{system_ => System}/Log.tsx (100%)
 rename src/pages/{system_ => System}/Role.tsx (100%)
 rename src/pages/{system_/settings_/BaseSettings.tsx => System/Settings/Base.tsx} (95%)
 rename src/pages/{system_/settings_/MailSettings.tsx => System/Settings/Mail.tsx} (97%)
 rename src/pages/{system_/settings_/SensitiveWordSettings.tsx => System/Settings/SensitiveWord.tsx} (97%)
 rename src/pages/{system_/settings_ => System/Settings}/index.tsx (88%)
 rename src/pages/{system_/statistics_ => System/Statistics}/ActiveInfo.tsx (98%)
 rename src/pages/{system_/statistics_ => System/Statistics}/CPUInfo.tsx (98%)
 rename src/pages/{system_/statistics_ => System/Statistics}/HardwareInfo.tsx (97%)
 rename src/pages/{system_/statistics_ => System/Statistics}/OnlineInfo.tsx (98%)
 rename src/pages/{system_/statistics_ => System/Statistics}/SoftwareInfo.tsx (98%)
 rename src/pages/{system_/statistics_ => System/Statistics}/StorageInfo.tsx (98%)
 rename src/pages/{system_/statistics_ => System/Statistics}/index.tsx (86%)
 rename src/pages/{system_/statistics_ => System/Statistics}/shared.ts (100%)
 rename src/pages/{system_ => System}/User.tsx (100%)
 rename src/pages/{system_ => System}/index.tsx (100%)
 rename src/pages/{tools_ => Tools}/All.tsx (100%)
 rename src/pages/{tools_ => Tools}/Translation.tsx (100%)
 rename src/pages/{tools_ => Tools}/index.tsx (100%)
 rename src/pages/{user_ => User}/index.tsx (100%)

diff --git a/src/components/common/sidebar_/SidebarFooter.tsx b/src/components/common/Sidebar/Footer.tsx
similarity index 97%
rename from src/components/common/sidebar_/SidebarFooter.tsx
rename to src/components/common/Sidebar/Footer.tsx
index 196686f..64e0901 100644
--- a/src/components/common/sidebar_/SidebarFooter.tsx
+++ b/src/components/common/Sidebar/Footer.tsx
@@ -6,7 +6,7 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
 import { r_auth_logout } from '@/services/auth'
 
-const SidebarFooter: React.FC = () => {
+const Footer: React.FC = () => {
     const matches = useMatches()
     const lastMatch = matches.reduce((_, second) => second)
     const location = useLocation()
@@ -94,4 +94,4 @@ const SidebarFooter: React.FC = () => {
     )
 }
 
-export default SidebarFooter
+export default Footer
diff --git a/src/components/common/sidebar_/SidebarItem.tsx b/src/components/common/Sidebar/Item.tsx
similarity index 87%
rename from src/components/common/sidebar_/SidebarItem.tsx
rename to src/components/common/Sidebar/Item.tsx
index 6289ac2..87bd2ea 100644
--- a/src/components/common/sidebar_/SidebarItem.tsx
+++ b/src/components/common/Sidebar/Item.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Icon from '@ant-design/icons'
-import SidebarSubmenu from '@/components/common/sidebar_/SidebarSubmenu'
+import Submenu from '@/components/common/Sidebar/Submenu'
 
 type ItemProps = {
     icon?: IconComponent
@@ -10,7 +10,7 @@ type ItemProps = {
     end?: boolean
 }
 
-const SidebarItem: React.FC<ItemProps> = (props) => {
+const Item: React.FC<ItemProps> = (props) => {
     const [submenuTop, setSubmenuTop] = useState(0)
     const [submenuLeft, setSubmenuLeft] = useState(0)
 
@@ -50,12 +50,12 @@ const SidebarItem: React.FC<ItemProps> = (props) => {
                 </NavLink>
             </div>
             {props.children ? (
-                <SidebarSubmenu submenuTop={submenuTop} submenuLeft={submenuLeft}>
+                <Submenu submenuTop={submenuTop} submenuLeft={submenuLeft}>
                     {props.children}
-                </SidebarSubmenu>
+                </Submenu>
             ) : undefined}
         </li>
     )
 }
 
-export default SidebarItem
+export default Item
diff --git a/src/components/common/Sidebar/ItemList.tsx b/src/components/common/Sidebar/ItemList.tsx
new file mode 100644
index 0000000..661e94d
--- /dev/null
+++ b/src/components/common/Sidebar/ItemList.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const ItemList: React.FC<React.PropsWithChildren> = (props) => {
+    return <ul>{props.children}</ul>
+}
+
+export default ItemList
diff --git a/src/components/common/sidebar_/SidebarScroll.tsx b/src/components/common/Sidebar/Scroll.tsx
similarity index 86%
rename from src/components/common/sidebar_/SidebarScroll.tsx
rename to src/components/common/Sidebar/Scroll.tsx
index 4a7c8d7..6fc0c1f 100644
--- a/src/components/common/sidebar_/SidebarScroll.tsx
+++ b/src/components/common/Sidebar/Scroll.tsx
@@ -5,7 +5,7 @@ export interface SidebarScrollElement {
     refreshLayout(): void
 }
 
-const SidebarScroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>((props, ref) => {
+const Scroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>((props, ref) => {
     useImperativeHandle<SidebarScrollElement, SidebarScrollElement>(ref, () => {
         return {
             refreshLayout() {
@@ -30,4 +30,4 @@ const SidebarScroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>(
     )
 })
 
-export default SidebarScroll
+export default Scroll
diff --git a/src/components/common/sidebar_/SidebarSeparate.tsx b/src/components/common/Sidebar/Separate.tsx
similarity index 78%
rename from src/components/common/sidebar_/SidebarSeparate.tsx
rename to src/components/common/Sidebar/Separate.tsx
index 84070ef..6e626e7 100644
--- a/src/components/common/sidebar_/SidebarSeparate.tsx
+++ b/src/components/common/Sidebar/Separate.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 
-const SidebarSeparate: React.FC<
+const Separate: React.FC<
     React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 > = ({ className, ...props }) => {
     return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
 }
 
-export default SidebarSeparate
+export default Separate
diff --git a/src/components/common/sidebar_/SidebarSubmenu.tsx b/src/components/common/Sidebar/Submenu.tsx
similarity index 80%
rename from src/components/common/sidebar_/SidebarSubmenu.tsx
rename to src/components/common/Sidebar/Submenu.tsx
index ed2039b..6d7afdc 100644
--- a/src/components/common/sidebar_/SidebarSubmenu.tsx
+++ b/src/components/common/Sidebar/Submenu.tsx
@@ -5,7 +5,7 @@ interface SidebarSubmenuProps extends React.PropsWithChildren {
     submenuLeft: number
 }
 
-const SidebarSubmenu: React.FC<SidebarSubmenuProps> = (props) => {
+const Submenu: React.FC<SidebarSubmenuProps> = (props) => {
     return (
         <ul
             className={'submenu'}
@@ -19,4 +19,4 @@ const SidebarSubmenu: React.FC<SidebarSubmenuProps> = (props) => {
     )
 }
 
-export default SidebarSubmenu
+export default Submenu
diff --git a/src/components/common/sidebar_/index.tsx b/src/components/common/Sidebar/index.tsx
similarity index 62%
rename from src/components/common/sidebar_/index.tsx
rename to src/components/common/Sidebar/index.tsx
index 96e3a90..f12716b 100644
--- a/src/components/common/sidebar_/index.tsx
+++ b/src/components/common/Sidebar/index.tsx
@@ -2,8 +2,12 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/sidebar.scss'
 import { getLocalStorage, setLocalStorage } from '@/util/browser'
-import SidebarSeparate from '@/components/common/sidebar_/SidebarSeparate'
-import SidebarFooter from '@/components/common/sidebar_/SidebarFooter'
+import Item from '@/components/common/Sidebar/Item'
+import ItemList from '@/components/common/Sidebar/ItemList'
+import Scroll from '@/components/common/Sidebar/Scroll'
+import Separate from '@/components/common/Sidebar/Separate'
+import Submenu from '@/components/common/Sidebar/Submenu'
+import Footer from '@/components/common/Sidebar/Footer'
 
 interface SidebarProps extends React.PropsWithChildren {
     title: string
@@ -12,7 +16,14 @@ interface SidebarProps extends React.PropsWithChildren {
     bottomFixed?: React.ReactNode
 }
 
-const Sidebar: React.FC<SidebarProps> = (props) => {
+const Sidebar: React.FC<SidebarProps> & {
+    Item: typeof Item
+    ItemList: typeof ItemList
+    Scroll: typeof Scroll
+    Separate: typeof Separate
+    Submenu: typeof Submenu
+    Footer: typeof Footer
+} = (props) => {
     const [hideSidebar, setHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true')
 
     const switchSidebar = () => {
@@ -33,16 +44,23 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
                     </span>
                     <span className={'text'}>{props.title}</span>
                 </div>
-                <SidebarSeparate style={{ marginTop: 0 }} />
+                <Separate style={{ marginTop: 0 }} />
                 <div className={'content'}>{props.children}</div>
                 <div className={'bottom-fixed'} style={{ flex: 'none' }}>
                     {props.bottomFixed}
                 </div>
-                <SidebarSeparate style={{ marginTop: 0, marginBottom: 0 }} />
-                <SidebarFooter />
+                <Separate style={{ marginTop: 0, marginBottom: 0 }} />
+                <Footer />
             </div>
         </>
     )
 }
 
+Sidebar.Item = Item
+Sidebar.ItemList = ItemList
+Sidebar.Scroll = Scroll
+Sidebar.Separate = Separate
+Sidebar.Submenu = Submenu
+Sidebar.Footer = Footer
+
 export default Sidebar
diff --git a/src/components/common/sidebar_/SidebarItemList.tsx b/src/components/common/sidebar_/SidebarItemList.tsx
deleted file mode 100644
index 42337e1..0000000
--- a/src/components/common/sidebar_/SidebarItemList.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-
-const SidebarItemList: React.FC<React.PropsWithChildren> = (props) => {
-    return <ul>{props.children}</ul>
-}
-
-export default SidebarItemList
diff --git a/src/pages/sign_/Forget.tsx b/src/pages/Sign/Forget.tsx
similarity index 100%
rename from src/pages/sign_/Forget.tsx
rename to src/pages/Sign/Forget.tsx
diff --git a/src/pages/sign_/SignIn.tsx b/src/pages/Sign/SignIn.tsx
similarity index 100%
rename from src/pages/sign_/SignIn.tsx
rename to src/pages/Sign/SignIn.tsx
diff --git a/src/pages/sign_/SignUp.tsx b/src/pages/Sign/SignUp.tsx
similarity index 100%
rename from src/pages/sign_/SignUp.tsx
rename to src/pages/Sign/SignUp.tsx
diff --git a/src/pages/sign_/Verify.tsx b/src/pages/Sign/Verify.tsx
similarity index 100%
rename from src/pages/sign_/Verify.tsx
rename to src/pages/Sign/Verify.tsx
diff --git a/src/pages/sign_/index.tsx b/src/pages/Sign/index.tsx
similarity index 93%
rename from src/pages/sign_/index.tsx
rename to src/pages/Sign/index.tsx
index 947bc3b..c464068 100644
--- a/src/pages/sign_/index.tsx
+++ b/src/pages/Sign/index.tsx
@@ -4,10 +4,10 @@ import { useUpdatedEffect } from '@/util/hooks'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
-import SignUp from '@/pages/sign_/SignUp'
-import Verify from '@/pages/sign_/Verify'
-import Forget from '@/pages/sign_/Forget'
-import SignIn from '@/pages/sign_/SignIn'
+import SignUp from '@/pages/Sign/SignUp'
+import Verify from '@/pages/Sign/Verify'
+import Forget from '@/pages/Sign/Forget'
+import SignIn from '@/pages/Sign/SignIn'
 
 const Sign: React.FC = () => {
     const lastPage = useRef('none')
diff --git a/src/pages/system_/Group.tsx b/src/pages/System/Group.tsx
similarity index 100%
rename from src/pages/system_/Group.tsx
rename to src/pages/System/Group.tsx
diff --git a/src/pages/system_/Log.tsx b/src/pages/System/Log.tsx
similarity index 100%
rename from src/pages/system_/Log.tsx
rename to src/pages/System/Log.tsx
diff --git a/src/pages/system_/Role.tsx b/src/pages/System/Role.tsx
similarity index 100%
rename from src/pages/system_/Role.tsx
rename to src/pages/System/Role.tsx
diff --git a/src/pages/system_/settings_/BaseSettings.tsx b/src/pages/System/Settings/Base.tsx
similarity index 95%
rename from src/pages/system_/settings_/BaseSettings.tsx
rename to src/pages/System/Settings/Base.tsx
index 20bbbb2..b584d2d 100644
--- a/src/pages/system_/settings_/BaseSettings.tsx
+++ b/src/pages/System/Settings/Base.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
 import { r_sys_settings_base_get, r_sys_settings_base_update } from '@/services/system'
-import { SettingsCard } from '@/pages/system_/settings_'
+import { SettingsCard } from '@/pages/System/Settings'
 
-const BaseSettings: React.FC = () => {
+const Base: React.FC = () => {
     const [baseForm] = AntdForm.useForm<BaseSettingsParam>()
     const baseFormValues = AntdForm.useWatch([], baseForm)
     const [loading, setLoading] = useState(false)
@@ -78,4 +78,4 @@ const BaseSettings: React.FC = () => {
     )
 }
 
-export default BaseSettings
+export default Base
diff --git a/src/pages/system_/settings_/MailSettings.tsx b/src/pages/System/Settings/Mail.tsx
similarity index 97%
rename from src/pages/system_/settings_/MailSettings.tsx
rename to src/pages/System/Settings/Mail.tsx
index fd060ae..6e44a97 100644
--- a/src/pages/system_/settings_/MailSettings.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -7,9 +7,9 @@ import {
     r_sys_settings_mail_send,
     r_sys_settings_mail_update
 } from '@/services/system'
-import { SettingsCard } from '@/pages/system_/settings_'
+import { SettingsCard } from '@/pages/System/Settings'
 
-const MailSettings: React.FC = () => {
+const Mail: React.FC = () => {
     const [modal, contextHolder] = AntdModal.useModal()
     const [mailForm] = AntdForm.useForm<MailSettingsParam>()
     const mailFormValues = AntdForm.useWatch([], mailForm)
@@ -152,4 +152,4 @@ const MailSettings: React.FC = () => {
     )
 }
 
-export default MailSettings
+export default Mail
diff --git a/src/pages/system_/settings_/SensitiveWordSettings.tsx b/src/pages/System/Settings/SensitiveWord.tsx
similarity index 97%
rename from src/pages/system_/settings_/SensitiveWordSettings.tsx
rename to src/pages/System/Settings/SensitiveWord.tsx
index a3db305..b2eebec 100644
--- a/src/pages/system_/settings_/SensitiveWordSettings.tsx
+++ b/src/pages/System/Settings/SensitiveWord.tsx
@@ -8,9 +8,9 @@ import {
     r_sys_settings_sensitive_get,
     r_sys_settings_sensitive_update
 } from '@/services/system'
-import { SettingsCard } from '@/pages/system_/settings_'
+import { SettingsCard } from '@/pages/System/Settings'
 
-const SensitiveWordSettings: React.FC = () => {
+const SensitiveWord: React.FC = () => {
     const [dataSource, setDataSource] = useState<SensitiveWordVo[]>()
     const [targetKeys, setTargetKeys] = useState<string[]>([])
     const [selectedKeys, setSelectedKeys] = useState<string[]>([])
@@ -160,4 +160,4 @@ const SensitiveWordSettings: React.FC = () => {
     )
 }
 
-export default SensitiveWordSettings
+export default SensitiveWord
diff --git a/src/pages/system_/settings_/index.tsx b/src/pages/System/Settings/index.tsx
similarity index 88%
rename from src/pages/system_/settings_/index.tsx
rename to src/pages/System/Settings/index.tsx
index 344d010..ca5ea51 100644
--- a/src/pages/system_/settings_/index.tsx
+++ b/src/pages/System/Settings/index.tsx
@@ -7,9 +7,9 @@ import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
-import BaseSettings from '@/pages/system_/settings_/BaseSettings'
-import MailSettings from '@/pages/system_/settings_/MailSettings'
-import SensitiveWordSettings from '@/pages/system_/settings_/SensitiveWordSettings'
+import Base from '@/pages/System/Settings/Base'
+import Mail from '@/pages/System/Settings/Mail'
+import SensitiveWord from '@/pages/System/Settings/SensitiveWord'
 
 interface SettingsCardProps extends React.PropsWithChildren {
     icon: IconComponent
@@ -58,15 +58,15 @@ const Settings: React.FC = () => {
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <FlexBox className={'root-col'}>
                             <Permission operationCode={'system:settings:query:base'}>
-                                <BaseSettings />
+                                <Base />
                             </Permission>
                             <Permission operationCode={'system:settings:query:sensitive'}>
-                                <SensitiveWordSettings />
+                                <SensitiveWord />
                             </Permission>
                         </FlexBox>
                         <FlexBox className={'root-col'}>
                             <Permission operationCode={'system:settings:query:mail'}>
-                                <MailSettings />
+                                <Mail />
                             </Permission>
                         </FlexBox>
                     </FlexBox>
diff --git a/src/pages/system_/statistics_/ActiveInfo.tsx b/src/pages/System/Statistics/ActiveInfo.tsx
similarity index 98%
rename from src/pages/system_/statistics_/ActiveInfo.tsx
rename to src/pages/System/Statistics/ActiveInfo.tsx
index dfc1592..727e1d9 100644
--- a/src/pages/system_/statistics_/ActiveInfo.tsx
+++ b/src/pages/System/Statistics/ActiveInfo.tsx
@@ -5,8 +5,8 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_active } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/system_/statistics_/shared'
-import { CommonCard } from '@/pages/system_/statistics_'
+import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const ActiveInfo: React.FC = () => {
     const activeInfoDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/system_/statistics_/CPUInfo.tsx b/src/pages/System/Statistics/CPUInfo.tsx
similarity index 98%
rename from src/pages/system_/statistics_/CPUInfo.tsx
rename to src/pages/System/Statistics/CPUInfo.tsx
index 2677587..027a9cf 100644
--- a/src/pages/system_/statistics_/CPUInfo.tsx
+++ b/src/pages/System/Statistics/CPUInfo.tsx
@@ -8,8 +8,8 @@ import {
     barDefaultSeriesOption,
     barEChartsBaseOption,
     EChartsOption
-} from '@/pages/system_/statistics_/shared'
-import { CommonCard } from '@/pages/system_/statistics_'
+} from '@/pages/System/Statistics/shared'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const CPUInfo: React.FC = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/system_/statistics_/HardwareInfo.tsx b/src/pages/System/Statistics/HardwareInfo.tsx
similarity index 97%
rename from src/pages/system_/statistics_/HardwareInfo.tsx
rename to src/pages/System/Statistics/HardwareInfo.tsx
index 3cc657b..72dd651 100644
--- a/src/pages/system_/statistics_/HardwareInfo.tsx
+++ b/src/pages/System/Statistics/HardwareInfo.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import { r_sys_statistics_hardware } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/system_/statistics_'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const HardwareInfo: React.FC = () => {
     const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
diff --git a/src/pages/system_/statistics_/OnlineInfo.tsx b/src/pages/System/Statistics/OnlineInfo.tsx
similarity index 98%
rename from src/pages/system_/statistics_/OnlineInfo.tsx
rename to src/pages/System/Statistics/OnlineInfo.tsx
index f1798fe..c2badf2 100644
--- a/src/pages/system_/statistics_/OnlineInfo.tsx
+++ b/src/pages/System/Statistics/OnlineInfo.tsx
@@ -5,8 +5,8 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_online } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/system_/statistics_/shared'
-import { CommonCard } from '@/pages/system_/statistics_'
+import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const OnlineInfo: React.FC = () => {
     const onlineInfoDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/system_/statistics_/SoftwareInfo.tsx b/src/pages/System/Statistics/SoftwareInfo.tsx
similarity index 98%
rename from src/pages/system_/statistics_/SoftwareInfo.tsx
rename to src/pages/System/Statistics/SoftwareInfo.tsx
index 0ea498d..6309eca 100644
--- a/src/pages/system_/statistics_/SoftwareInfo.tsx
+++ b/src/pages/System/Statistics/SoftwareInfo.tsx
@@ -3,7 +3,7 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { utcToLocalTime } from '@/util/datetime'
 import { r_sys_statistics_software } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/system_/statistics_'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const SoftwareInfo: React.FC = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
diff --git a/src/pages/system_/statistics_/StorageInfo.tsx b/src/pages/System/Statistics/StorageInfo.tsx
similarity index 98%
rename from src/pages/system_/statistics_/StorageInfo.tsx
rename to src/pages/System/Statistics/StorageInfo.tsx
index 987444d..5a888cf 100644
--- a/src/pages/system_/statistics_/StorageInfo.tsx
+++ b/src/pages/System/Statistics/StorageInfo.tsx
@@ -9,8 +9,8 @@ import {
     barDefaultSeriesOption,
     barEChartsBaseOption,
     EChartsOption
-} from '@/pages/system_/statistics_/shared'
-import { CommonCard } from '@/pages/system_/statistics_'
+} from '@/pages/System/Statistics/shared'
+import { CommonCard } from '@/pages/System/Statistics'
 
 const StorageInfo: React.FC = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/system_/statistics_/index.tsx b/src/pages/System/Statistics/index.tsx
similarity index 86%
rename from src/pages/system_/statistics_/index.tsx
rename to src/pages/System/Statistics/index.tsx
index 8d60094..f5994ca 100644
--- a/src/pages/system_/statistics_/index.tsx
+++ b/src/pages/System/Statistics/index.tsx
@@ -7,12 +7,12 @@ import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
-import OnlineInfo from '@/pages/system_/statistics_/OnlineInfo'
-import ActiveInfo from '@/pages/system_/statistics_/ActiveInfo'
-import SoftwareInfo from '@/pages/system_/statistics_/SoftwareInfo'
-import HardwareInfo from '@/pages/system_/statistics_/HardwareInfo'
-import CPUInfo from '@/pages/system_/statistics_/CPUInfo'
-import StorageInfo from '@/pages/system_/statistics_/StorageInfo'
+import OnlineInfo from '@/pages/System/Statistics/OnlineInfo'
+import ActiveInfo from '@/pages/System/Statistics/ActiveInfo'
+import SoftwareInfo from '@/pages/System/Statistics/SoftwareInfo'
+import HardwareInfo from '@/pages/System/Statistics/HardwareInfo'
+import CPUInfo from '@/pages/System/Statistics/CPUInfo'
+import StorageInfo from '@/pages/System/Statistics/StorageInfo'
 
 interface CommonCardProps extends React.PropsWithChildren {
     icon: IconComponent
diff --git a/src/pages/system_/statistics_/shared.ts b/src/pages/System/Statistics/shared.ts
similarity index 100%
rename from src/pages/system_/statistics_/shared.ts
rename to src/pages/System/Statistics/shared.ts
diff --git a/src/pages/system_/User.tsx b/src/pages/System/User.tsx
similarity index 100%
rename from src/pages/system_/User.tsx
rename to src/pages/System/User.tsx
diff --git a/src/pages/system_/index.tsx b/src/pages/System/index.tsx
similarity index 100%
rename from src/pages/system_/index.tsx
rename to src/pages/System/index.tsx
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 189d747..fbfc2b0 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -2,9 +2,7 @@ import React from 'react'
 import '@/assets/css/pages/system-framework.scss'
 import { getSystemRouteJson } from '@/router/system'
 import FitFullscreen from '@/components/common/FitFullscreen'
-import Sidebar from 'src/components/common/sidebar_'
-import SidebarItemList from '@/components/common/sidebar_/SidebarItemList'
-import SidebarItem from '@/components/common/sidebar_/SidebarItem'
+import Sidebar from '@/components/common/Sidebar'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const SystemFramework: React.FC = () => {
@@ -13,10 +11,10 @@ const SystemFramework: React.FC = () => {
             <FitFullscreen data-component={'system-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar title={'系统配置'}>
-                        <SidebarItemList>
+                        <Sidebar.ItemList>
                             {getSystemRouteJson().map((value) => {
                                 return value.menu ? (
-                                    <SidebarItem
+                                    <Sidebar.Item
                                         end={value.id === 'system' ? true : undefined}
                                         path={value.absolutePath}
                                         icon={value.icon}
@@ -25,7 +23,7 @@ const SystemFramework: React.FC = () => {
                                     />
                                 ) : undefined
                             })}
-                        </SidebarItemList>
+                        </Sidebar.ItemList>
                     </Sidebar>
                 </div>
                 <div className={'right-panel'}>
diff --git a/src/pages/tools_/All.tsx b/src/pages/Tools/All.tsx
similarity index 100%
rename from src/pages/tools_/All.tsx
rename to src/pages/Tools/All.tsx
diff --git a/src/pages/tools_/Translation.tsx b/src/pages/Tools/Translation.tsx
similarity index 100%
rename from src/pages/tools_/Translation.tsx
rename to src/pages/Tools/Translation.tsx
diff --git a/src/pages/tools_/index.tsx b/src/pages/Tools/index.tsx
similarity index 100%
rename from src/pages/tools_/index.tsx
rename to src/pages/Tools/index.tsx
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index b7a70c1..be7ff21 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -2,11 +2,8 @@ import React from 'react'
 import '@/assets/css/pages/tools-framework.scss'
 import { tools } from '@/router/tools'
 import FitFullscreen from '@/components/common/FitFullscreen'
-import SidebarScroll, { SidebarScrollElement } from '@/components/common/sidebar_/SidebarScroll'
-import Sidebar from 'src/components/common/sidebar_'
-import SidebarItemList from '@/components/common/sidebar_/SidebarItemList'
-import SidebarItem from '@/components/common/sidebar_/SidebarItem'
-import SidebarSeparate from '@/components/common/sidebar_/SidebarSeparate'
+import Sidebar from '@/components/common/Sidebar'
+import { SidebarScrollElement } from '@/components/common/Sidebar/Scroll'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const ToolsFramework: React.FC = () => {
@@ -23,23 +20,23 @@ const ToolsFramework: React.FC = () => {
             <FitFullscreen data-component={'tools-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar title={'氧工具'} onSidebarSwitch={handleOnSidebarSwitch}>
-                        <SidebarItemList>
-                            <SidebarItem end path={''} icon={tools[0].icon} text={tools[0].name} />
-                            <SidebarItem
+                        <Sidebar.ItemList>
+                            <Sidebar.Item end path={''} icon={tools[0].icon} text={tools[0].name} />
+                            <Sidebar.Item
                                 end
                                 path={'all'}
                                 icon={tools[1].icon}
                                 text={tools[1].name}
                             />
-                        </SidebarItemList>
-                        <SidebarSeparate style={{ marginBottom: 0 }} />
-                        <SidebarScroll ref={sidebarScrollRef}>
-                            <SidebarItemList>
+                        </Sidebar.ItemList>
+                        <Sidebar.Separate style={{ marginBottom: 0 }} />
+                        <Sidebar.Scroll ref={sidebarScrollRef}>
+                            <Sidebar.ItemList>
                                 {tools.map((tool) => {
                                     return tool.menu &&
                                         tool.id !== 'tools' &&
                                         tool.id !== 'tools-all' ? (
-                                        <SidebarItem
+                                        <Sidebar.Item
                                             path={tool.absolutePath}
                                             icon={tool.icon}
                                             text={tool.name}
@@ -48,7 +45,7 @@ const ToolsFramework: React.FC = () => {
                                             {tool.children
                                                 ? tool.children.map((subTool) => {
                                                       return (
-                                                          <SidebarItem
+                                                          <Sidebar.Item
                                                               path={subTool.absolutePath}
                                                               text={subTool.name}
                                                               key={subTool.id}
@@ -56,11 +53,11 @@ const ToolsFramework: React.FC = () => {
                                                       )
                                                   })
                                                 : undefined}
-                                        </SidebarItem>
+                                        </Sidebar.Item>
                                     ) : undefined
                                 })}
-                            </SidebarItemList>
-                        </SidebarScroll>
+                            </Sidebar.ItemList>
+                        </Sidebar.Scroll>
                     </Sidebar>
                 </div>
                 <div className={'right-panel'}>
diff --git a/src/pages/user_/index.tsx b/src/pages/User/index.tsx
similarity index 100%
rename from src/pages/user_/index.tsx
rename to src/pages/User/index.tsx
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 172b9c3..75a5577 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -3,9 +3,7 @@ import '@/assets/css/pages/user-framework.scss'
 import user from '@/router/user'
 import { hasPathPermission } from '@/util/auth'
 import FitFullscreen from '@/components/common/FitFullscreen'
-import Sidebar from 'src/components/common/sidebar_'
-import SidebarItemList from '@/components/common/sidebar_/SidebarItemList'
-import SidebarItem from '@/components/common/sidebar_/SidebarItem'
+import Sidebar from '@/components/common/Sidebar'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const ToolsFramework: React.FC = () => {
@@ -16,22 +14,26 @@ const ToolsFramework: React.FC = () => {
                     <Sidebar
                         title={'个人中心'}
                         bottomFixed={
-                            <SidebarItemList>
+                            <Sidebar.ItemList>
                                 {hasPathPermission('/system') ? (
-                                    <SidebarItem
+                                    <Sidebar.Item
                                         path={'/system'}
                                         icon={IconOxygenSetting}
                                         text={'系统配置'}
                                     />
                                 ) : undefined}
-                                <SidebarItem path={'/'} icon={IconOxygenBack} text={'回到氧工具'} />
-                            </SidebarItemList>
+                                <Sidebar.Item
+                                    path={'/'}
+                                    icon={IconOxygenBack}
+                                    text={'回到氧工具'}
+                                />
+                            </Sidebar.ItemList>
                         }
                     >
-                        <SidebarItemList>
+                        <Sidebar.ItemList>
                             {user.map((value) => {
                                 return value.menu ? (
-                                    <SidebarItem
+                                    <Sidebar.Item
                                         end={value.id === 'user' ? true : undefined}
                                         path={value.absolutePath}
                                         icon={value.icon}
@@ -40,7 +42,7 @@ const ToolsFramework: React.FC = () => {
                                     />
                                 ) : undefined
                             })}
-                        </SidebarItemList>
+                        </Sidebar.ItemList>
                     </Sidebar>
                 </div>
                 <div className={'right-panel'}>
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 2469d6a..84716ac 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -5,7 +5,7 @@ import user from '@/router/user'
 import tools from '@/router/tools'
 import { getAuthRoute, mapJsonToRoute, setTitle } from '@/util/route'
 
-const lazySignPage = React.lazy(() => import('src/pages/sign_'))
+const lazySignPage = React.lazy(() => import('@/pages/Sign'))
 
 const root: RouteJsonObject[] = [
     {
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 638dd87..9633dc4 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -6,18 +6,18 @@ const system: RouteJsonObject[] = [
         path: '',
         absolutePath: '/system',
         id: 'system',
-        component: React.lazy(() => import('src/pages/system_')),
+        component: React.lazy(() => import('@/pages/System')),
         name: '系统管理',
-        icon: React.lazy(() => import('~icons/oxygen/setting.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/setting')),
         menu: true
     },
     {
         path: 'statistics',
         absolutePath: '/system/statistics',
         id: 'system-statistics',
-        component: React.lazy(() => import('@/pages/system_/statistics_')),
+        component: React.lazy(() => import('@/pages/System/Statistics')),
         name: '系统概况',
-        icon: React.lazy(() => import('~icons/oxygen/chart.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/chart')),
         menu: true,
         autoHide: true
     },
@@ -25,9 +25,9 @@ const system: RouteJsonObject[] = [
         path: 'settings',
         absolutePath: '/system/settings',
         id: 'system-settings',
-        component: React.lazy(() => import('@/pages/system_/settings_')),
+        component: React.lazy(() => import('@/pages/System/Settings')),
         name: '系统设置',
-        icon: React.lazy(() => import('~icons/oxygen/option.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/option')),
         menu: true,
         autoHide: true
     },
@@ -35,9 +35,9 @@ const system: RouteJsonObject[] = [
         path: 'user',
         absolutePath: '/system/user',
         id: 'system-user',
-        component: React.lazy(() => import('@/pages/system_/User')),
+        component: React.lazy(() => import('@/pages/System/User')),
         name: '用户管理',
-        icon: React.lazy(() => import('~icons/oxygen/user.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/user')),
         menu: true,
         autoHide: true
     },
@@ -45,9 +45,9 @@ const system: RouteJsonObject[] = [
         path: 'role',
         absolutePath: '/system/role',
         id: 'system-role',
-        component: React.lazy(() => import('@/pages/system_/Role')),
+        component: React.lazy(() => import('@/pages/System/Role')),
         name: '角色管理',
-        icon: React.lazy(() => import('~icons/oxygen/role.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/role')),
         menu: true,
         autoHide: true
     },
@@ -55,9 +55,9 @@ const system: RouteJsonObject[] = [
         path: 'group',
         absolutePath: '/system/group',
         id: 'system-group',
-        component: React.lazy(() => import('@/pages/system_/Group')),
+        component: React.lazy(() => import('@/pages/System/Group')),
         name: '群组管理',
-        icon: React.lazy(() => import('~icons/oxygen/group.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/group')),
         menu: true,
         autoHide: true
     },
@@ -65,9 +65,9 @@ const system: RouteJsonObject[] = [
         path: 'log',
         absolutePath: '/system/log',
         id: 'system-log',
-        component: React.lazy(() => import('@/pages/system_/Log')),
+        component: React.lazy(() => import('@/pages/System/Log')),
         name: '系统日志',
-        icon: React.lazy(() => import('~icons/oxygen/log.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/log')),
         menu: true,
         autoHide: true
     },
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 349e77f..b6abe60 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -5,9 +5,9 @@ export const tools: RouteJsonObject[] = [
         path: '',
         absolutePath: '/',
         id: 'tools',
-        component: React.lazy(() => import('src/pages/tools_')),
+        component: React.lazy(() => import('@/pages/Tools')),
         name: '主页',
-        icon: React.lazy(() => import('~icons/oxygen/home.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/home')),
         menu: true,
         auth: false
     },
@@ -15,10 +15,10 @@ export const tools: RouteJsonObject[] = [
         path: 'all',
         absolutePath: '/all',
         id: 'tools-all',
-        component: React.lazy(() => import('src/pages/tools_')),
+        component: React.lazy(() => import('@/pages/Tools')),
         name: '全部工具',
         titlePostfix: ' - 全部工具',
-        icon: React.lazy(() => import('~icons/oxygen/tool.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/tool')),
         menu: true,
         auth: false
     },
@@ -26,9 +26,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation',
         absolutePath: '/translation',
         id: 'tools-translation',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [
@@ -37,7 +37,7 @@ export const tools: RouteJsonObject[] = [
                 absolutePath: '/translation/1',
                 id: '1',
                 name: '翻译1',
-                icon: React.lazy(() => import('~icons/oxygen/logo.jsx')),
+                icon: React.lazy(() => import('~icons/oxygen/logo')),
                 menu: true,
                 auth: false
             },
@@ -55,9 +55,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation-',
         absolutePath: '/translation-',
         id: 'tools-translation-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [
@@ -83,9 +83,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--',
         absolutePath: '/translation--',
         id: 'tools-translation--',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -93,9 +93,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--1',
         absolutePath: '/translation--1',
         id: 'tools-translation--1',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--1',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -103,9 +103,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--2',
         absolutePath: '/translation--2',
         id: 'tools-translation--2',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--2',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -113,9 +113,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--3',
         absolutePath: '/translation--3',
         id: 'tools-translation--3',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--3',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -123,9 +123,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--4',
         absolutePath: '/translation--4',
         id: 'tools-translation--4',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--4',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -133,9 +133,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--5',
         absolutePath: '/translation--5',
         id: 'tools-translation--5',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--5',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -143,9 +143,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--6',
         absolutePath: '/translation--6',
         id: 'tools-translation--6',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--6',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -153,9 +153,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--7',
         absolutePath: '/translation--7',
         id: 'tools-translation--7',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--7',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -163,9 +163,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--8',
         absolutePath: '/translation--8',
         id: 'tools-translation--8',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--8',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -173,9 +173,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--9',
         absolutePath: '/translation--9',
         id: 'tools-translation--9',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--9',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -183,9 +183,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--10',
         absolutePath: '/translation--10',
         id: 'tools-translation--10',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--10',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -193,9 +193,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--1-',
         absolutePath: '/translation--1-',
         id: 'tools-translation--1-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--1-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -203,9 +203,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--2-',
         absolutePath: '/translation--2-',
         id: 'tools-translation--2-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--2-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -213,9 +213,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--3-',
         absolutePath: '/translation--3-',
         id: 'tools-translation--3-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--3-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -223,9 +223,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--4-',
         absolutePath: '/translation--4-',
         id: 'tools-translation--4-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--4-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -233,9 +233,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--5-',
         absolutePath: '/translation--5-',
         id: 'tools-translation--5-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--5-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -243,9 +243,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--6-',
         absolutePath: '/translation--6-',
         id: 'tools-translation--6-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--6-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -253,9 +253,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--7-',
         absolutePath: '/translation--7-',
         id: 'tools-translation--7-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--7-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -263,9 +263,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--8-',
         absolutePath: '/translation--8-',
         id: 'tools-translation--8-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--8-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -273,9 +273,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--9-',
         absolutePath: '/translation--9-',
         id: 'tools-translation--9-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--9-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -283,9 +283,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--10-',
         absolutePath: '/translation--10-',
         id: 'tools-translation--10-',
-        component: React.lazy(() => import('@/pages/tools_/Translation')),
+        component: React.lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--10-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [
diff --git a/src/router/user.tsx b/src/router/user.tsx
index 8279478..875bbea 100644
--- a/src/router/user.tsx
+++ b/src/router/user.tsx
@@ -5,9 +5,9 @@ const user: RouteJsonObject[] = [
         path: '',
         absolutePath: '/user',
         id: 'user',
-        component: React.lazy(() => import('src/pages/user_')),
+        component: React.lazy(() => import('@/pages/User')),
         name: '个人档案',
-        icon: React.lazy(() => import('~icons/oxygen/user.jsx')),
+        icon: React.lazy(() => import('~icons/oxygen/user')),
         menu: true
     },
     {

From 82b5e75046240ae1eb262d3aec862488e278155a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 5 Jan 2024 18:28:48 +0800
Subject: [PATCH 156/307] React Playground temp

---
 package-lock.json                             |  12 ++
 package.json                                  |   2 +
 src/components/ReactPlayground/Playground.tsx |  73 +++++++++++
 src/components/ReactPlayground/Provider.tsx   |  95 +++++++++++++++
 src/components/ReactPlayground/Utils.ts       | 113 ++++++++++++++++++
 src/components/ReactPlayground/index.tsx      |  16 +++
 src/components/ReactPlayground/shared.ts      |  78 ++++++++++++
 .../ReactPlayground/template/.eslintrc.cjs    |  18 +++
 .../ReactPlayground/template/.gitignore       |  24 ++++
 .../ReactPlayground/template/README.md        |  28 +++++
 .../ReactPlayground/template/import-map.json  |   6 +
 .../ReactPlayground/template/index.html       |  13 ++
 .../ReactPlayground/template/package.json     |  28 +++++
 .../ReactPlayground/template/public/vite.svg  |   1 +
 .../ReactPlayground/template/src/App.css      |  65 ++++++++++
 .../ReactPlayground/template/src/App.tsx      |  17 +++
 .../ReactPlayground/template/src/main.tsx     |  10 ++
 .../ReactPlayground/template/tsconfig.json    |  25 ++++
 .../template/tsconfig.node.json               |  10 ++
 .../ReactPlayground/template/vite.config.js   |   7 ++
 src/components/files.ts                       |  46 +++++++
 src/pages/OnlineEditor.tsx                    |   7 ++
 src/router/index.tsx                          |   7 ++
 23 files changed, 701 insertions(+)
 create mode 100644 src/components/ReactPlayground/Playground.tsx
 create mode 100644 src/components/ReactPlayground/Provider.tsx
 create mode 100644 src/components/ReactPlayground/Utils.ts
 create mode 100644 src/components/ReactPlayground/index.tsx
 create mode 100644 src/components/ReactPlayground/shared.ts
 create mode 100644 src/components/ReactPlayground/template/.eslintrc.cjs
 create mode 100644 src/components/ReactPlayground/template/.gitignore
 create mode 100644 src/components/ReactPlayground/template/README.md
 create mode 100644 src/components/ReactPlayground/template/import-map.json
 create mode 100644 src/components/ReactPlayground/template/index.html
 create mode 100644 src/components/ReactPlayground/template/package.json
 create mode 100644 src/components/ReactPlayground/template/public/vite.svg
 create mode 100644 src/components/ReactPlayground/template/src/App.css
 create mode 100644 src/components/ReactPlayground/template/src/App.tsx
 create mode 100644 src/components/ReactPlayground/template/src/main.tsx
 create mode 100644 src/components/ReactPlayground/template/tsconfig.json
 create mode 100644 src/components/ReactPlayground/template/tsconfig.node.json
 create mode 100644 src/components/ReactPlayground/template/vite.config.js
 create mode 100644 src/components/files.ts
 create mode 100644 src/pages/OnlineEditor.tsx

diff --git a/package-lock.json b/package-lock.json
index a071142..e7d4e10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,11 +15,13 @@
         "dayjs": "^1.11.10",
         "echarts": "^5.4.3",
         "fast-deep-equal": "^3.1.3",
+        "fflate": "^0.8.1",
         "jwt-decode": "^4.0.0",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
         "match-sorter": "^6.3.1",
         "moment": "^2.29.4",
+        "monaco-editor": "^0.45.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^6.20.1",
@@ -3890,6 +3892,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.8.1.tgz",
+      "integrity": "sha512-/exOvEuc+/iaUm105QIiOt4LpBdMTWsXxqR0HDF35vx3fmaKzw7354gTilCh5rkzEt8WYyG//ku3h3nRmd7CHQ=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5263,6 +5270,11 @@
         "node": "*"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.45.0",
+      "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.45.0.tgz",
+      "integrity": "sha512-mjv1G1ZzfEE3k9HZN0dQ2olMdwIfaeAAjFiwNprLfYNRSz7ctv9XuCT7gPtBGrMUeV1/iZzYKj17Khu1hxoHOA=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index 8257e58..5fc24d9 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,13 @@
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "fast-deep-equal": "^3.1.3",
+    "fflate": "^0.8.1",
     "jwt-decode": "^4.0.0",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "moment": "^2.29.4",
+    "monaco-editor": "^0.45.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.20.1",
diff --git a/src/components/ReactPlayground/Playground.tsx b/src/components/ReactPlayground/Playground.tsx
new file mode 100644
index 0000000..ecb7d82
--- /dev/null
+++ b/src/components/ReactPlayground/Playground.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import { IPlayground } from '@/components/ReactPlayground/shared.ts'
+import { PlaygroundContext } from '@/components/ReactPlayground/Provider.tsx'
+import { ENTRY_FILE_NAME, initFiles, MAIN_FILE_NAME } from '@/components/files.ts'
+import {
+    getCustomActiveFile,
+    getMergedCustomFiles,
+    getPlaygroundTheme
+} from '@/components/ReactPlayground/Utils.ts'
+
+const defaultCodeSandboxOptions = {
+    theme: 'dark',
+    editorHeight: '100vh',
+    showUrlHash: true
+}
+
+const Playground: React.FC<IPlayground> = (props) => {
+    const {
+        width = '100vw',
+        height = '100vh',
+        theme,
+        files: propsFiles,
+        importMap,
+        showCompileOutput = true,
+        showHeader = true,
+        showFileSelector = true,
+        fileSelectorReadOnly = false,
+        border = false,
+        defaultSizes,
+        onFilesChange,
+        autorun = true
+    } = props
+    const { filesHash, changeTheme, files, setFiles, setSelectedFileName } =
+        useContext(PlaygroundContext)
+    const options = Object.assign(defaultCodeSandboxOptions, props.options || {})
+
+    useEffect(() => {
+        if (propsFiles && !propsFiles?.[MAIN_FILE_NAME]) {
+            throw new Error(
+                `Missing required property : '${MAIN_FILE_NAME}' is a mandatory property for 'files'`
+            )
+        } else if (propsFiles) {
+            const newFiles = getMergedCustomFiles(propsFiles, importMap)
+            if (newFiles) {
+                setFiles(newFiles)
+            }
+            const selectedFileName = getCustomActiveFile(propsFiles)
+            if (selectedFileName) {
+                setSelectedFileName(selectedFileName)
+            }
+        }
+    }, [propsFiles])
+
+    useEffect(() => {
+        setTimeout(() => {
+            if (!theme) {
+                changeTheme(getPlaygroundTheme())
+            } else {
+                changeTheme(theme)
+            }
+        }, 15)
+    }, [theme])
+
+    useEffect(() => {
+        if (!propsFiles) {
+            setFiles(initFiles)
+        }
+    }, [])
+
+    return files[ENTRY_FILE_NAME] ? <></> : undefined
+}
+
+export default Playground
diff --git a/src/components/ReactPlayground/Provider.tsx b/src/components/ReactPlayground/Provider.tsx
new file mode 100644
index 0000000..31f6370
--- /dev/null
+++ b/src/components/ReactPlayground/Provider.tsx
@@ -0,0 +1,95 @@
+import React from 'react'
+import { IFiles, IPlaygroundContext, ITheme } from '@/components/ReactPlayground/shared.ts'
+import { MAIN_FILE_NAME } from '@/components/files.ts'
+import {
+    fileNameToLanguage,
+    setPlaygroundTheme,
+    strToBase64
+} from '@/components/ReactPlayground/Utils.ts'
+
+const initialContext: Partial<IPlaygroundContext> = {
+    selectedFileName: MAIN_FILE_NAME
+}
+
+export const PlaygroundContext = createContext<IPlaygroundContext>(
+    initialContext as IPlaygroundContext
+)
+
+interface ProviderProps extends React.PropsWithChildren {
+    saveOnUrl?: boolean
+}
+
+const Provider: React.FC<ProviderProps> = ({ children, saveOnUrl }) => {
+    const [files, setFiles] = useState<IFiles>({})
+    const [theme, setTheme] = useState(initialContext.theme!)
+    const [selectedFileName, setSelectedFileName] = useState(initialContext.selectedFileName!)
+    const [filesHash, setFilesHash] = useState('')
+
+    const addFile = (name: string) => {
+        files[name] = {
+            name,
+            language: fileNameToLanguage(name),
+            value: ''
+        }
+        setFiles({ ...files })
+    }
+
+    const removeFile = (name: string) => {
+        delete files[name]
+        setFiles({ ...files })
+    }
+
+    const changeFileName = (oldFileName: string, newFileName: string) => {
+        if (!files[oldFileName] || !newFileName) {
+            return
+        }
+
+        const { [oldFileName]: value, ...other } = files
+        const newFile: IFiles = {
+            [newFileName]: {
+                ...value,
+                language: fileNameToLanguage(newFileName),
+                name: newFileName
+            }
+        }
+        setFiles({
+            ...other,
+            ...newFile
+        })
+    }
+
+    const changeTheme = (theme: ITheme) => {
+        setPlaygroundTheme(theme)
+        setTheme(theme)
+    }
+
+    useEffect(() => {
+        const hash = strToBase64(JSON.stringify(files))
+        if (saveOnUrl) {
+            window.location.hash = hash
+        }
+        setFilesHash(hash)
+    }, [files])
+
+    return (
+        <PlaygroundContext.Provider
+            value={{
+                theme,
+                filesHash,
+                files,
+                selectedFileName,
+                setTheme,
+                changeTheme,
+                setSelectedFileName,
+                setFiles,
+                addFile,
+                removeFile,
+                changeFileName
+            }}
+        >
+            {children}
+        </PlaygroundContext.Provider>
+    )
+}
+
+export default Provider
diff --git a/src/components/ReactPlayground/Utils.ts b/src/components/ReactPlayground/Utils.ts
new file mode 100644
index 0000000..77f4df4
--- /dev/null
+++ b/src/components/ReactPlayground/Utils.ts
@@ -0,0 +1,113 @@
+import { ICustomFiles, IFiles, IImportMap, ITheme } from '@/components/ReactPlayground/shared.ts'
+import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
+import { IMPORT_MAP_FILE_NAME, reactTemplateFiles } from '@/components/files.ts'
+
+export const strToBase64 = (str: string) => {
+    const buffer = strToU8(str)
+    const zipped = zlibSync(buffer, { level: 9 })
+    const binary = strFromU8(zipped, true)
+    return btoa(binary)
+}
+
+export const base64ToStr = (base64: string) => {
+    const binary = atob(base64)
+
+    // zlib header (x78), level 9 (xDA)
+    if (binary.startsWith('\x78\xDA')) {
+        const buffer = strToU8(binary, true)
+        const unzipped = unzlibSync(buffer)
+        return strFromU8(unzipped)
+    }
+
+    return ''
+}
+
+export const fileNameToLanguage = (name: string) => {
+    const suffix = name.split('.').pop() || ''
+    if (['js', 'jsx'].includes(suffix)) return 'javascript'
+    if (['ts', 'tsx'].includes(suffix)) return 'typescript'
+    if (['json'].includes(suffix)) return 'json'
+    if (['css'].includes(suffix)) return 'css'
+    return 'javascript'
+}
+
+const STORAGE_DARK_THEME = 'react-playground-prefer-dark'
+
+export const setPlaygroundTheme = (theme: ITheme) => {
+    localStorage.setItem(STORAGE_DARK_THEME, String(theme === 'dark'))
+    document
+        .querySelectorAll('div[data-id="react-playground"]')
+        ?.forEach((item) => item.setAttribute('class', theme))
+}
+
+export const getPlaygroundTheme = () => {
+    const isDarkTheme = JSON.parse(localStorage.getItem(STORAGE_DARK_THEME) || 'false')
+    return isDarkTheme ? 'dark' : 'light'
+}
+
+const transformCustomFiles = (files: ICustomFiles) => {
+    const newFiles: IFiles = {}
+    Object.keys(files).forEach((key) => {
+        const tempFile = files[key]
+        if (typeof tempFile === 'string') {
+            newFiles[key] = {
+                name: key,
+                language: fileNameToLanguage(key),
+                value: tempFile
+            }
+        } else {
+            newFiles[key] = {
+                name: key,
+                language: fileNameToLanguage(key),
+                value: tempFile.code,
+                hidden: tempFile.hidden,
+                active: tempFile.active
+            }
+        }
+    })
+
+    return newFiles
+}
+
+export const getMergedCustomFiles = (files?: ICustomFiles, importMap?: IImportMap) => {
+    if (!files) return null
+    if (importMap) {
+        return {
+            ...reactTemplateFiles,
+            ...transformCustomFiles(files),
+            [IMPORT_MAP_FILE_NAME]: {
+                name: IMPORT_MAP_FILE_NAME,
+                language: 'json',
+                value: JSON.stringify(importMap, null, 2)
+            }
+        }
+    } else {
+        return {
+            ...reactTemplateFiles,
+            ...transformCustomFiles(files)
+        }
+    }
+}
+
+export const getCustomActiveFile = (files?: ICustomFiles) => {
+    if (!files) return null
+    return Object.keys(files).find((key) => {
+        const tempFile = files[key]
+        if (typeof tempFile !== 'string' && tempFile.active) {
+            return key
+        }
+        return null
+    })
+}
+export const getFilesFromUrl = () => {
+    let files: IFiles | undefined
+    try {
+        if (typeof window !== 'undefined') {
+            const hash = window.location.hash
+            if (hash) files = JSON.parse(base64ToStr(hash?.split('#')[1]))
+        }
+    } catch (error) {
+        console.error(error)
+    }
+    return files
+}
diff --git a/src/components/ReactPlayground/index.tsx b/src/components/ReactPlayground/index.tsx
new file mode 100644
index 0000000..f417e64
--- /dev/null
+++ b/src/components/ReactPlayground/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import Provider from '@/components/ReactPlayground/Provider.tsx'
+import { IPlayground } from '@/components/ReactPlayground/shared.ts'
+import Playground from '@/components/ReactPlayground/Playground.tsx'
+
+const ReactPlayground: React.FC<IPlayground> = (props) => {
+    return (
+        <>
+            <Provider saveOnUrl={props.saveOnUrl}>
+                <Playground {...props} />
+            </Provider>
+        </>
+    )
+}
+
+export default ReactPlayground
diff --git a/src/components/ReactPlayground/shared.ts b/src/components/ReactPlayground/shared.ts
new file mode 100644
index 0000000..3fa42c1
--- /dev/null
+++ b/src/components/ReactPlayground/shared.ts
@@ -0,0 +1,78 @@
+import React from 'react'
+import { editor } from 'monaco-editor'
+
+export interface IFile {
+    name: string
+    value: string
+    language: string
+    active?: boolean
+    hidden?: boolean
+}
+
+export interface IFiles {
+    [key: string]: IFile
+}
+
+export type ITheme = 'light' | 'dark'
+
+export type IImportMap = { imports: Record<string, string> }
+
+export interface ICustomFiles {
+    [key: string]:
+        | string
+        | {
+              code: string
+              active?: boolean
+              hidden?: boolean
+          }
+}
+export type IEditorOptions = editor.IStandaloneEditorConstructionOptions & any
+export interface IEditorContainer {
+    showFileSelector?: boolean
+    fileSelectorReadOnly?: boolean
+    options?: IEditorOptions
+}
+
+export interface IOutput {
+    showCompileOutput?: boolean
+}
+
+export interface ISplitPane {
+    children?: React.ReactNode[]
+    defaultSizes?: number[]
+}
+
+export type IPlayground = {
+    width?: string | number
+    height?: string | number
+    theme?: ITheme
+    importMap?: IImportMap
+    files?: ICustomFiles
+    options?: {
+        lineNumbers?: boolean
+        fontSize?: number
+        tabSize?: number
+    }
+    showHeader?: boolean
+    border?: boolean
+    onFilesChange?: (url: string) => void
+    saveOnUrl?: boolean
+    autorun?: boolean
+    // recompileDelay
+} & Omit<IEditorContainer, 'options'> &
+    IOutput &
+    ISplitPane
+
+export interface IPlaygroundContext {
+    files: IFiles
+    filesHash: string
+    theme: ITheme
+    selectedFileName: string
+    setSelectedFileName: (fileName: string) => void
+    setTheme: (theme: ITheme) => void
+    setFiles: (files: IFiles) => void
+    addFile: (fileName: string) => void
+    removeFile: (fileName: string) => void
+    changeFileName: (oldFieldName: string, newFieldName: string) => void
+    changeTheme: (theme: ITheme) => void
+}
diff --git a/src/components/ReactPlayground/template/.eslintrc.cjs b/src/components/ReactPlayground/template/.eslintrc.cjs
new file mode 100644
index 0000000..d6c9537
--- /dev/null
+++ b/src/components/ReactPlayground/template/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/src/components/ReactPlayground/template/.gitignore b/src/components/ReactPlayground/template/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/src/components/ReactPlayground/template/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/src/components/ReactPlayground/template/README.md b/src/components/ReactPlayground/template/README.md
new file mode 100644
index 0000000..23892a5
--- /dev/null
+++ b/src/components/ReactPlayground/template/README.md
@@ -0,0 +1,28 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+  gitignore
diff --git a/src/components/ReactPlayground/template/import-map.json b/src/components/ReactPlayground/template/import-map.json
new file mode 100644
index 0000000..fc687e0
--- /dev/null
+++ b/src/components/ReactPlayground/template/import-map.json
@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "react": "https://esm.sh/react@18.2.0",
+    "react-dom/client": "https://esm.sh/react-dom@18.2.0"
+  }
+}
diff --git a/src/components/ReactPlayground/template/index.html b/src/components/ReactPlayground/template/index.html
new file mode 100644
index 0000000..e4b78ea
--- /dev/null
+++ b/src/components/ReactPlayground/template/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/src/components/ReactPlayground/template/package.json b/src/components/ReactPlayground/template/package.json
new file mode 100644
index 0000000..fdcdf71
--- /dev/null
+++ b/src/components/ReactPlayground/template/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "react-playground",
+  "author": "fewismuch",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/src/components/ReactPlayground/template/public/vite.svg b/src/components/ReactPlayground/template/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/src/components/ReactPlayground/template/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/ReactPlayground/template/src/App.css b/src/components/ReactPlayground/template/src/App.css
new file mode 100644
index 0000000..d15241f
--- /dev/null
+++ b/src/components/ReactPlayground/template/src/App.css
@@ -0,0 +1,65 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  line-height: 1.5;
+  color: rgb(255 255 255 / 87%);
+  text-rendering: optimizelegibility;
+  text-size-adjust: 100%;
+  background-color: #242424;
+  color-scheme: light dark;
+  font-synthesis: none;
+}
+
+#root {
+  max-width: 1280px;
+  padding: 2rem;
+  margin: 0 auto;
+  text-align: center;
+}
+
+body {
+  display: flex;
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+  place-items: center;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  padding: 0.6em 1.2em;
+  font-family: inherit;
+  font-size: 1em;
+  font-weight: 500;
+  cursor: pointer;
+  background-color: #1a1a1a;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #fff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/src/components/ReactPlayground/template/src/App.tsx b/src/components/ReactPlayground/template/src/App.tsx
new file mode 100644
index 0000000..87189c5
--- /dev/null
+++ b/src/components/ReactPlayground/template/src/App.tsx
@@ -0,0 +1,17 @@
+import { useState } from 'react'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <h1>Hello World</h1>
+      <div className='card'>
+        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+      </div>
+    </>
+  )
+}
+
+export default App
diff --git a/src/components/ReactPlayground/template/src/main.tsx b/src/components/ReactPlayground/template/src/main.tsx
new file mode 100644
index 0000000..ad8ece1
--- /dev/null
+++ b/src/components/ReactPlayground/template/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/src/components/ReactPlayground/template/tsconfig.json b/src/components/ReactPlayground/template/tsconfig.json
new file mode 100644
index 0000000..a7fc6fb
--- /dev/null
+++ b/src/components/ReactPlayground/template/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/src/components/ReactPlayground/template/tsconfig.node.json b/src/components/ReactPlayground/template/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/src/components/ReactPlayground/template/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/src/components/ReactPlayground/template/vite.config.js b/src/components/ReactPlayground/template/vite.config.js
new file mode 100644
index 0000000..f16716a
--- /dev/null
+++ b/src/components/ReactPlayground/template/vite.config.js
@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+})
diff --git a/src/components/files.ts b/src/components/files.ts
new file mode 100644
index 0000000..07b762b
--- /dev/null
+++ b/src/components/files.ts
@@ -0,0 +1,46 @@
+import importMap from './template/import-map.json?raw'
+import AppCss from './template/src/App.css?raw'
+import App from './template/src/App.tsx?raw'
+import main from './template/src/main.tsx?raw'
+import { IFiles } from '@/components/ReactPlayground/shared.ts'
+import { fileNameToLanguage } from '@/components/ReactPlayground/Utils.ts'
+
+export const MAIN_FILE_NAME = 'App.tsx'
+export const IMPORT_MAP_FILE_NAME = 'import-map.json'
+export const ENTRY_FILE_NAME = 'main.tsx'
+
+export const initFiles: IFiles = getFilesFromUrl() || {
+    [ENTRY_FILE_NAME]: {
+        name: ENTRY_FILE_NAME,
+        language: fileNameToLanguage(ENTRY_FILE_NAME),
+        value: main
+    },
+    [MAIN_FILE_NAME]: {
+        name: MAIN_FILE_NAME,
+        language: fileNameToLanguage(MAIN_FILE_NAME),
+        value: App
+    },
+    'App.css': {
+        name: 'App.css',
+        language: 'css',
+        value: AppCss
+    },
+    [IMPORT_MAP_FILE_NAME]: {
+        name: IMPORT_MAP_FILE_NAME,
+        language: fileNameToLanguage(IMPORT_MAP_FILE_NAME),
+        value: importMap
+    }
+}
+
+export const reactTemplateFiles = {
+    [ENTRY_FILE_NAME]: {
+        name: ENTRY_FILE_NAME,
+        language: fileNameToLanguage(ENTRY_FILE_NAME),
+        value: main
+    },
+    [IMPORT_MAP_FILE_NAME]: {
+        name: IMPORT_MAP_FILE_NAME,
+        language: fileNameToLanguage(IMPORT_MAP_FILE_NAME),
+        value: importMap
+    }
+}
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
new file mode 100644
index 0000000..7d67ca3
--- /dev/null
+++ b/src/pages/OnlineEditor.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const OnlineEditor: React.FC = () => {
+    return <></>
+}
+
+export default OnlineEditor
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 84716ac..2f5880c 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -62,6 +62,13 @@ const root: RouteJsonObject[] = [
                 auth: true,
                 permission: true
             },
+            {
+                path: 'online-editor',
+                absolutePath: '/online-editor',
+                id: 'online-editor',
+                component: React.lazy(() => import('@/pages/OnlineEditor')),
+                name: '在线编辑器'
+            },
             {
                 path: '',
                 absolutePath: '/',

From d526d913b90284060ef1df2fb39898c7d2646934 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 8 Jan 2024 00:16:08 +0800
Subject: [PATCH 157/307] Finish editor in Playground Code Editor

---
 package-lock.json                             | 46 +++++++++-
 package.json                                  |  3 +
 .../ReactPlayground/CodeEditor/Editor/ata.ts  | 83 +++++++++++++++++
 .../CodeEditor/Editor/editor.scss             | 43 +++++++++
 .../CodeEditor/Editor/hooks.ts                | 72 +++++++++++++++
 .../CodeEditor/Editor/index.tsx               | 90 +++++++++++++++++++
 .../CodeEditor/Editor/monacoConfig.ts         | 34 +++++++
 src/components/ReactPlayground/Playground.tsx |  6 +-
 src/components/ReactPlayground/Provider.tsx   |  4 +-
 src/components/ReactPlayground/files.ts       | 68 ++++++++++++++
 src/components/ReactPlayground/shared.ts      |  6 +-
 .../ReactPlayground/{Utils.ts => utils.ts}    | 47 +++++-----
 src/components/files.ts                       | 46 ----------
 src/pages/OnlineEditor.tsx                    | 14 ++-
 14 files changed, 484 insertions(+), 78 deletions(-)
 create mode 100644 src/components/ReactPlayground/CodeEditor/Editor/ata.ts
 create mode 100644 src/components/ReactPlayground/CodeEditor/Editor/editor.scss
 create mode 100644 src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
 create mode 100644 src/components/ReactPlayground/CodeEditor/Editor/index.tsx
 create mode 100644 src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts
 create mode 100644 src/components/ReactPlayground/files.ts
 rename src/components/ReactPlayground/{Utils.ts => utils.ts} (94%)
 delete mode 100644 src/components/files.ts

diff --git a/package-lock.json b/package-lock.json
index e7d4e10..93cb57b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
         "@marsidev/react-turnstile": "^0.4.0",
+        "@monaco-editor/react": "^4.6.0",
+        "@typescript/ata": "^0.9.4",
         "antd": "^5.12.1",
         "axios": "^1.6.2",
         "dayjs": "^1.11.10",
@@ -22,6 +24,7 @@
         "match-sorter": "^6.3.1",
         "moment": "^2.29.4",
         "monaco-editor": "^0.45.0",
+        "monaco-jsx-syntax-highlight": "^1.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^6.20.1",
@@ -1243,6 +1246,30 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmmirror.com/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2196,6 +2223,14 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@typescript/ata": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmmirror.com/@typescript/ata/-/ata-0.9.4.tgz",
+      "integrity": "sha512-PaJ16WouPV/SaA+c0tnOKIqYq24+m93ipl/e0Dkxuianer+ibc5b0/6ZgfCFF8J7QEp57dySMSP9nWOFaCfJnw==",
+      "peerDependencies": {
+        "typescript": "^4.4.4"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -5275,6 +5310,11 @@
       "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.45.0.tgz",
       "integrity": "sha512-mjv1G1ZzfEE3k9HZN0dQ2olMdwIfaeAAjFiwNprLfYNRSz7ctv9XuCT7gPtBGrMUeV1/iZzYKj17Khu1hxoHOA=="
     },
+    "node_modules/monaco-jsx-syntax-highlight": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/monaco-jsx-syntax-highlight/-/monaco-jsx-syntax-highlight-1.2.0.tgz",
+      "integrity": "sha512-sKzfmNMxLp3Dcwndz0F/EdP3rqe+Z6FbDPazj+/ByNbqoXWkzgb/ocat8h3vpiTwPPiDtSHidT0BFMvLkMtG8A=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -7127,6 +7167,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/string-convert": {
       "version": "0.2.1",
       "resolved": "https://registry.npmmirror.com/string-convert/-/string-convert-0.2.1.tgz",
@@ -7705,7 +7750,6 @@
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
       "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
-      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index 5fc24d9..9f82e44 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@marsidev/react-turnstile": "^0.4.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@typescript/ata": "^0.9.4",
     "antd": "^5.12.1",
     "axios": "^1.6.2",
     "dayjs": "^1.11.10",
@@ -28,6 +30,7 @@
     "match-sorter": "^6.3.1",
     "moment": "^2.29.4",
     "monaco-editor": "^0.45.0",
+    "monaco-jsx-syntax-highlight": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.20.1",
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/ata.ts b/src/components/ReactPlayground/CodeEditor/Editor/ata.ts
new file mode 100644
index 0000000..370e8c9
--- /dev/null
+++ b/src/components/ReactPlayground/CodeEditor/Editor/ata.ts
@@ -0,0 +1,83 @@
+import { ATABootstrapConfig, setupTypeAcquisition } from '@typescript/ata'
+
+type DelegateListener = Required<{
+    [k in keyof ATABootstrapConfig['delegate']]: Set<NonNullable<ATABootstrapConfig['delegate'][k]>>
+}>
+
+const createDelegate = (): DelegateListener => {
+    return {
+        receivedFile: new Set(),
+        progress: new Set(),
+        errorMessage: new Set(),
+        finished: new Set(),
+        started: new Set()
+    }
+}
+
+const delegateListener = createDelegate()
+
+type InferSet<T> = T extends Set<infer U> ? U : never
+
+export const createATA = async () => {
+    // @ts-ignore
+    const ts = await import('https://esm.sh/typescript@5.3.3')
+    const ata = setupTypeAcquisition({
+        projectName: 'monaco-ts',
+        typescript: ts,
+        logger: console,
+        fetcher: (input, init) => {
+            let result: any
+            try {
+                result = fetch(input, init)
+            } catch (error) {
+                console.error('Error fetching data:', error)
+            }
+            return result
+        },
+        delegate: {
+            receivedFile: (code, path) => {
+                delegateListener.receivedFile.forEach((fn) => fn(code, path))
+            },
+            progress: (downloaded, estimatedTotal) => {
+                delegateListener.progress.forEach((fn) => fn(downloaded, estimatedTotal))
+            },
+            started: () => {
+                delegateListener.started.forEach((fn) => fn())
+            },
+            finished: (files) => {
+                delegateListener.finished.forEach((fn) => fn(files))
+            }
+        }
+    })
+
+    const acquireType = (code: string) => ata(code)
+
+    const addListener = <T extends keyof DelegateListener>(
+        event: T,
+        handler: InferSet<DelegateListener[T]>
+    ) => {
+        // @ts-ignore
+        delegateListener[event].add(handler)
+    }
+
+    const removeListener = <T extends keyof DelegateListener>(
+        event: T,
+        handler: InferSet<DelegateListener[T]>
+    ) => {
+        // @ts-ignore
+        delegateListener[event].delete(handler)
+    }
+
+    const dispose = () => {
+        for (const key in delegateListener) {
+            delegateListener[key as keyof DelegateListener].clear()
+        }
+    }
+
+    return {
+        acquireType,
+        addListener,
+        removeListener,
+        dispose
+    }
+}
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/editor.scss b/src/components/ReactPlayground/CodeEditor/Editor/editor.scss
new file mode 100644
index 0000000..c72555d
--- /dev/null
+++ b/src/components/ReactPlayground/CodeEditor/Editor/editor.scss
@@ -0,0 +1,43 @@
+.monaco-editor-light {
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--border);
+
+  .jsx-tag-angle-bracket {
+    color: #800000;
+  }
+
+  .jsx-text {
+    color: #000;
+  }
+
+  .jsx-tag-name {
+    color: #800000;
+  }
+
+  .jsx-tag-attribute-key {
+    color: #f00;
+  }
+}
+
+.monaco-editor-vs-dark {
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--border);
+
+  .jsx-tag-angle-bracket {
+    color: #808080;
+  }
+
+  .jsx-text {
+    color: #d4d4d4;
+  }
+
+  .jsx-tag-name {
+    color: #569cd6;
+  }
+
+  .jsx-tag-attribute-key {
+    color: #9cdcfe;
+  }
+}
\ No newline at end of file
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts b/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
new file mode 100644
index 0000000..2834852
--- /dev/null
+++ b/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
@@ -0,0 +1,72 @@
+import { editor, IPosition, Selection } from 'monaco-editor'
+import ScrollType = editor.ScrollType
+import { Monaco } from '@monaco-editor/react'
+import { getWorker, MonacoJsxSyntaxHighlight } from 'monaco-jsx-syntax-highlight'
+import { createATA } from '@/components/ReactPlayground/CodeEditor/Editor/ata.ts'
+
+export const useEditor = () => {
+    const doOpenEditor = (
+        editor: editor.IStandaloneCodeEditor,
+        input: { options: { selection: Selection } }
+    ) => {
+        const selection = input.options ? input.options.selection : null
+        if (selection) {
+            if (
+                typeof selection.endLineNumber === 'number' &&
+                typeof selection.endColumn === 'number'
+            ) {
+                editor.setSelection(selection)
+                editor.revealRangeInCenter(selection, ScrollType.Immediate)
+            } else {
+                const position: IPosition = {
+                    lineNumber: selection.startLineNumber,
+                    column: selection.startColumn
+                }
+                editor.setPosition(position)
+                editor.revealPositionInCenter(position, ScrollType.Immediate)
+            }
+        }
+    }
+
+    const loadJsxSyntaxHighlight = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+        const monacoJsxSyntaxHighlight = new MonacoJsxSyntaxHighlight(getWorker(), monaco)
+        const { highlighter, dispose } = monacoJsxSyntaxHighlight.highlighterBuilder({ editor })
+
+        editor.onDidChangeModelContent(() => {
+            highlighter()
+        })
+        highlighter()
+
+        return { highlighter, dispose }
+    }
+
+    const autoLoadExtraLib = async (
+        editor: editor.IStandaloneCodeEditor,
+        monaco: Monaco,
+        defaultValue: string,
+        onWatch: any
+    ) => {
+        const typeHelper = await createATA()
+
+        onWatch(typeHelper)
+
+        editor.onDidChangeModelContent(() => {
+            typeHelper.acquireType(editor.getValue())
+        })
+
+        const addLibraryToRuntime = (code: string, path: string) => {
+            monaco.languages.typescript.typescriptDefaults.addExtraLib(code, `file://${path}`)
+        }
+
+        typeHelper.addListener('receivedFile', addLibraryToRuntime)
+        typeHelper.acquireType(defaultValue)
+
+        return typeHelper
+    }
+
+    return {
+        doOpenEditor,
+        loadJsxSyntaxHighlight,
+        autoLoadExtraLib
+    }
+}
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/index.tsx b/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
new file mode 100644
index 0000000..e3d1610
--- /dev/null
+++ b/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
@@ -0,0 +1,90 @@
+import React from 'react'
+import { editor, Selection } from 'monaco-editor'
+import MonacoEditor, { Monaco } from '@monaco-editor/react'
+import '@/components/ReactPlayground/CodeEditor/Editor/editor.scss'
+import { IEditorOptions, IFile, IFiles, ITheme } from '@/components/ReactPlayground/shared'
+import { MonacoEditorConfig } from '@/components/ReactPlayground/CodeEditor/Editor/monacoConfig'
+import { fileNameToLanguage } from '@/components/ReactPlayground/utils'
+import { useEditor } from '@/components/ReactPlayground/CodeEditor/Editor/hooks'
+
+interface EditorProps {
+    file: IFile
+    onChange?: (code: string | undefined) => void
+    options?: IEditorOptions
+    theme?: ITheme
+    files?: IFiles
+    onJumpFile?: (fileName: string) => void
+}
+
+const Editor: React.FC<EditorProps> = ({ file, files, theme, onChange, options, onJumpFile }) => {
+    const editorRef = useRef<editor.IStandaloneCodeEditor>()
+    const { doOpenEditor, loadJsxSyntaxHighlight } = useEditor()
+    const jsxSyntaxHighlightRef = useRef<{
+        highlighter: (code?: string | undefined) => void
+        dispose: () => void
+    }>({
+        highlighter: () => undefined,
+        dispose: () => undefined
+    })
+
+    const handleOnEditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+        editorRef.current = editor
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+            void editor.getAction('editor.action.formatDocument')?.run()
+        })
+
+        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+            jsx: monaco.languages.typescript.JsxEmit.Preserve,
+            esModuleInterop: true
+        })
+
+        files &&
+            Object.entries(files).forEach(([key]) => {
+                if (!monaco.editor.getModel(monaco.Uri.parse(`file:///${key}`))) {
+                    monaco.editor.createModel(
+                        files[key].value,
+                        fileNameToLanguage(key),
+                        monaco.Uri.parse(`file:///${key}`)
+                    )
+                }
+            })
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        editor['_codeEditorService'].doOpenEditor = function (
+            editor: editor.IStandaloneCodeEditor,
+            input: { options: { selection: Selection }; resource: { path: string } }
+        ) {
+            const path = input.resource.path
+            if (!path.startsWith('/node_modules/')) {
+                onJumpFile?.(path.replace('/', ''))
+                doOpenEditor(editor, input)
+            }
+        }
+
+        jsxSyntaxHighlightRef.current = loadJsxSyntaxHighlight(editor, monaco)
+    }
+
+    useEffect(() => {
+        editorRef.current?.focus()
+        jsxSyntaxHighlightRef?.current?.highlighter?.()
+    }, [file.name])
+
+    return (
+        <>
+            <MonacoEditor
+                theme={theme}
+                path={file.name}
+                className={`monaco-editor-${theme ?? 'light'}`}
+                language={file.language}
+                value={file.value}
+                onChange={onChange}
+                onMount={handleOnEditorDidMount}
+                options={{ ...MonacoEditorConfig, ...options, theme: undefined }}
+            />
+        </>
+    )
+}
+
+export default Editor
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts b/src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts
new file mode 100644
index 0000000..20f570a
--- /dev/null
+++ b/src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts
@@ -0,0 +1,34 @@
+import { editor } from 'monaco-editor'
+
+export const MonacoEditorConfig: editor.IStandaloneEditorConstructionOptions = {
+  automaticLayout: true,
+  cursorBlinking: 'smooth',
+  fontLigatures: true,
+  formatOnPaste: true,
+  formatOnType: true,
+  fontSize: 14,
+  showDeprecated: true,
+  showUnused: true,
+  showFoldingControls: 'mouseover',
+  scrollBeyondLastLine: false,
+  minimap: {
+    enabled: false,
+  },
+  inlineSuggest: {
+    enabled: false,
+  },
+  fixedOverflowWidgets: true,
+  smoothScrolling: true,
+  smartSelect: {
+    selectSubwords: true,
+    selectLeadingAndTrailingWhitespace: true,
+  },
+  tabSize: 2,
+  overviewRulerBorder: false, // 不要滚动条的边框
+  // 滚动条设置
+  scrollbar: {
+    verticalScrollbarSize: 6, // 竖滚动条
+    horizontalScrollbarSize: 6, // 横滚动条
+  },
+  // lineNumbers: 'off', // 隐藏控制行号
+}
diff --git a/src/components/ReactPlayground/Playground.tsx b/src/components/ReactPlayground/Playground.tsx
index ecb7d82..12780bb 100644
--- a/src/components/ReactPlayground/Playground.tsx
+++ b/src/components/ReactPlayground/Playground.tsx
@@ -1,3 +1,4 @@
+/*
 import React from 'react'
 import { IPlayground } from '@/components/ReactPlayground/shared.ts'
 import { PlaygroundContext } from '@/components/ReactPlayground/Provider.tsx'
@@ -6,7 +7,7 @@ import {
     getCustomActiveFile,
     getMergedCustomFiles,
     getPlaygroundTheme
-} from '@/components/ReactPlayground/Utils.ts'
+} from '@/components/ReactPlayground/utils.ts'
 
 const defaultCodeSandboxOptions = {
     theme: 'dark',
@@ -67,7 +68,8 @@ const Playground: React.FC<IPlayground> = (props) => {
         }
     }, [])
 
-    return files[ENTRY_FILE_NAME] ? <></> : undefined
+    return files[ENTRY_FILE_NAME] ? <div></div> : undefined
 }
 
 export default Playground
+*/
diff --git a/src/components/ReactPlayground/Provider.tsx b/src/components/ReactPlayground/Provider.tsx
index 31f6370..71b11e5 100644
--- a/src/components/ReactPlayground/Provider.tsx
+++ b/src/components/ReactPlayground/Provider.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import { IFiles, IPlaygroundContext, ITheme } from '@/components/ReactPlayground/shared.ts'
-import { MAIN_FILE_NAME } from '@/components/files.ts'
+import { MAIN_FILE_NAME } from '@/components/ReactPlayground/files.ts'
 import {
     fileNameToLanguage,
     setPlaygroundTheme,
     strToBase64
-} from '@/components/ReactPlayground/Utils.ts'
+} from '@/components/ReactPlayground/utils.ts'
 
 const initialContext: Partial<IPlaygroundContext> = {
     selectedFileName: MAIN_FILE_NAME
diff --git a/src/components/ReactPlayground/files.ts b/src/components/ReactPlayground/files.ts
new file mode 100644
index 0000000..338df8d
--- /dev/null
+++ b/src/components/ReactPlayground/files.ts
@@ -0,0 +1,68 @@
+import importMap from '@/components/ReactPlayground/template/import-map.json?raw'
+import AppCss from '@/components/ReactPlayground/template/src/App.css?raw'
+import App from '@/components/ReactPlayground/template/src/App.tsx?raw'
+import main from '@/components/ReactPlayground/template/src/main.tsx?raw'
+import { IFiles } from '@/components/ReactPlayground/shared'
+import { base64ToStr } from '@/components/ReactPlayground/utils.ts'
+
+export const MAIN_FILE_NAME = 'App.tsx'
+export const IMPORT_MAP_FILE_NAME = 'import-map.json'
+export const ENTRY_FILE_NAME = 'main.tsx'
+
+const fileNameToLanguage = (name: string) => {
+    const suffix = name.split('.').pop() || ''
+    if (['js', 'jsx'].includes(suffix)) return 'javascript'
+    if (['ts', 'tsx'].includes(suffix)) return 'typescript'
+    if (['json'].includes(suffix)) return 'json'
+    if (['css'].includes(suffix)) return 'css'
+    return 'javascript'
+}
+
+const getFilesFromUrl = () => {
+    let files: IFiles | undefined
+    try {
+        if (typeof window !== 'undefined') {
+            const hash = window.location.hash
+            if (hash) files = JSON.parse(base64ToStr(hash?.split('#')[1]))
+        }
+    } catch (error) {
+        console.error(error)
+    }
+    return files
+}
+
+export const initFiles: IFiles = getFilesFromUrl() || {
+    [ENTRY_FILE_NAME]: {
+        name: ENTRY_FILE_NAME,
+        language: fileNameToLanguage(ENTRY_FILE_NAME),
+        value: main
+    },
+    [MAIN_FILE_NAME]: {
+        name: MAIN_FILE_NAME,
+        language: fileNameToLanguage(MAIN_FILE_NAME),
+        value: App
+    },
+    'App.css': {
+        name: 'App.css',
+        language: 'css',
+        value: AppCss
+    },
+    [IMPORT_MAP_FILE_NAME]: {
+        name: IMPORT_MAP_FILE_NAME,
+        language: fileNameToLanguage(IMPORT_MAP_FILE_NAME),
+        value: importMap
+    }
+}
+
+export const reactTemplateFiles = {
+    [ENTRY_FILE_NAME]: {
+        name: ENTRY_FILE_NAME,
+        language: fileNameToLanguage(ENTRY_FILE_NAME),
+        value: main
+    },
+    [IMPORT_MAP_FILE_NAME]: {
+        name: IMPORT_MAP_FILE_NAME,
+        language: fileNameToLanguage(IMPORT_MAP_FILE_NAME),
+        value: importMap
+    }
+}
diff --git a/src/components/ReactPlayground/shared.ts b/src/components/ReactPlayground/shared.ts
index 3fa42c1..bbdf821 100644
--- a/src/components/ReactPlayground/shared.ts
+++ b/src/components/ReactPlayground/shared.ts
@@ -4,7 +4,7 @@ import { editor } from 'monaco-editor'
 export interface IFile {
     name: string
     value: string
-    language: string
+    language: 'javascript' | 'typescript' | 'json' | 'css'
     active?: boolean
     hidden?: boolean
 }
@@ -13,7 +13,7 @@ export interface IFiles {
     [key: string]: IFile
 }
 
-export type ITheme = 'light' | 'dark'
+export type ITheme = 'light' | 'vs-dark'
 
 export type IImportMap = { imports: Record<string, string> }
 
@@ -26,7 +26,7 @@ export interface ICustomFiles {
               hidden?: boolean
           }
 }
-export type IEditorOptions = editor.IStandaloneEditorConstructionOptions & any
+export type IEditorOptions = editor.IStandaloneEditorConstructionOptions
 export interface IEditorContainer {
     showFileSelector?: boolean
     fileSelectorReadOnly?: boolean
diff --git a/src/components/ReactPlayground/Utils.ts b/src/components/ReactPlayground/utils.ts
similarity index 94%
rename from src/components/ReactPlayground/Utils.ts
rename to src/components/ReactPlayground/utils.ts
index 77f4df4..0569a37 100644
--- a/src/components/ReactPlayground/Utils.ts
+++ b/src/components/ReactPlayground/utils.ts
@@ -1,6 +1,6 @@
-import { ICustomFiles, IFiles, IImportMap, ITheme } from '@/components/ReactPlayground/shared.ts'
 import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
-import { IMPORT_MAP_FILE_NAME, reactTemplateFiles } from '@/components/files.ts'
+import { ICustomFiles, IFiles, IImportMap, ITheme } from '@/components/ReactPlayground/shared'
+import { IMPORT_MAP_FILE_NAME, reactTemplateFiles } from '@/components/ReactPlayground/files'
 
 export const strToBase64 = (str: string) => {
     const buffer = strToU8(str)
@@ -22,19 +22,10 @@ export const base64ToStr = (base64: string) => {
     return ''
 }
 
-export const fileNameToLanguage = (name: string) => {
-    const suffix = name.split('.').pop() || ''
-    if (['js', 'jsx'].includes(suffix)) return 'javascript'
-    if (['ts', 'tsx'].includes(suffix)) return 'typescript'
-    if (['json'].includes(suffix)) return 'json'
-    if (['css'].includes(suffix)) return 'css'
-    return 'javascript'
-}
-
 const STORAGE_DARK_THEME = 'react-playground-prefer-dark'
 
 export const setPlaygroundTheme = (theme: ITheme) => {
-    localStorage.setItem(STORAGE_DARK_THEME, String(theme === 'dark'))
+    localStorage.setItem(STORAGE_DARK_THEME, String(theme === 'vs-dark'))
     document
         .querySelectorAll('div[data-id="react-playground"]')
         ?.forEach((item) => item.setAttribute('class', theme))
@@ -42,7 +33,7 @@ export const setPlaygroundTheme = (theme: ITheme) => {
 
 export const getPlaygroundTheme = () => {
     const isDarkTheme = JSON.parse(localStorage.getItem(STORAGE_DARK_THEME) || 'false')
-    return isDarkTheme ? 'dark' : 'light'
+    return isDarkTheme ? 'vs-dark' : 'light'
 }
 
 const transformCustomFiles = (files: ICustomFiles) => {
@@ -69,6 +60,17 @@ const transformCustomFiles = (files: ICustomFiles) => {
     return newFiles
 }
 
+export const getCustomActiveFile = (files?: ICustomFiles) => {
+    if (!files) return null
+    return Object.keys(files).find((key) => {
+        const tempFile = files[key]
+        if (typeof tempFile !== 'string' && tempFile.active) {
+            return key
+        }
+        return null
+    })
+}
+
 export const getMergedCustomFiles = (files?: ICustomFiles, importMap?: IImportMap) => {
     if (!files) return null
     if (importMap) {
@@ -89,16 +91,6 @@ export const getMergedCustomFiles = (files?: ICustomFiles, importMap?: IImportMa
     }
 }
 
-export const getCustomActiveFile = (files?: ICustomFiles) => {
-    if (!files) return null
-    return Object.keys(files).find((key) => {
-        const tempFile = files[key]
-        if (typeof tempFile !== 'string' && tempFile.active) {
-            return key
-        }
-        return null
-    })
-}
 export const getFilesFromUrl = () => {
     let files: IFiles | undefined
     try {
@@ -111,3 +103,12 @@ export const getFilesFromUrl = () => {
     }
     return files
 }
+
+export const fileNameToLanguage = (name: string) => {
+    const suffix = name.split('.').pop() || ''
+    if (['js', 'jsx'].includes(suffix)) return 'javascript'
+    if (['ts', 'tsx'].includes(suffix)) return 'typescript'
+    if (['json'].includes(suffix)) return 'json'
+    if (['css'].includes(suffix)) return 'css'
+    return 'javascript'
+}
diff --git a/src/components/files.ts b/src/components/files.ts
deleted file mode 100644
index 07b762b..0000000
--- a/src/components/files.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import importMap from './template/import-map.json?raw'
-import AppCss from './template/src/App.css?raw'
-import App from './template/src/App.tsx?raw'
-import main from './template/src/main.tsx?raw'
-import { IFiles } from '@/components/ReactPlayground/shared.ts'
-import { fileNameToLanguage } from '@/components/ReactPlayground/Utils.ts'
-
-export const MAIN_FILE_NAME = 'App.tsx'
-export const IMPORT_MAP_FILE_NAME = 'import-map.json'
-export const ENTRY_FILE_NAME = 'main.tsx'
-
-export const initFiles: IFiles = getFilesFromUrl() || {
-    [ENTRY_FILE_NAME]: {
-        name: ENTRY_FILE_NAME,
-        language: fileNameToLanguage(ENTRY_FILE_NAME),
-        value: main
-    },
-    [MAIN_FILE_NAME]: {
-        name: MAIN_FILE_NAME,
-        language: fileNameToLanguage(MAIN_FILE_NAME),
-        value: App
-    },
-    'App.css': {
-        name: 'App.css',
-        language: 'css',
-        value: AppCss
-    },
-    [IMPORT_MAP_FILE_NAME]: {
-        name: IMPORT_MAP_FILE_NAME,
-        language: fileNameToLanguage(IMPORT_MAP_FILE_NAME),
-        value: importMap
-    }
-}
-
-export const reactTemplateFiles = {
-    [ENTRY_FILE_NAME]: {
-        name: ENTRY_FILE_NAME,
-        language: fileNameToLanguage(ENTRY_FILE_NAME),
-        value: main
-    },
-    [IMPORT_MAP_FILE_NAME]: {
-        name: IMPORT_MAP_FILE_NAME,
-        language: fileNameToLanguage(IMPORT_MAP_FILE_NAME),
-        value: importMap
-    }
-}
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index 7d67ca3..04293c8 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,7 +1,19 @@
 import React from 'react'
+import Editor from '@/components/ReactPlayground/CodeEditor/Editor'
 
 const OnlineEditor: React.FC = () => {
-    return <></>
+    return (
+        <>
+            <Editor
+                theme={'light'}
+                file={{
+                    name: 'App.tsx',
+                    language: 'typescript',
+                    value: 'const a = () => {}'
+                }}
+            />
+        </>
+    )
 }
 
 export default OnlineEditor

From 88c66bd7a77a7a92ffa2eb79b23ac0c0022e8aa8 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 8 Jan 2024 13:43:47 +0800
Subject: [PATCH 158/307] Optimize code

---
 src/components/common/Indicator.tsx         |  2 +-
 src/components/common/Sidebar/Item.tsx      | 10 +++---
 src/components/common/Sidebar/index.tsx     |  2 +-
 src/pages/System/Group.tsx                  |  4 +--
 src/pages/System/Role.tsx                   |  4 +--
 src/pages/System/Settings/SensitiveWord.tsx |  4 +--
 src/pages/System/Settings/index.tsx         |  4 +--
 src/pages/System/User.tsx                   | 36 ++++++++++-----------
 src/pages/SystemFramework.tsx               | 20 ++++++------
 src/pages/ToolsFramework.tsx                | 21 ++++++------
 src/pages/UserFramework.tsx                 | 24 +++++++-------
 src/util/route.tsx                          |  7 ++--
 12 files changed, 68 insertions(+), 70 deletions(-)

diff --git a/src/components/common/Indicator.tsx b/src/components/common/Indicator.tsx
index a00213e..1b56baa 100644
--- a/src/components/common/Indicator.tsx
+++ b/src/components/common/Indicator.tsx
@@ -11,7 +11,7 @@ interface IndicatorProps {
 const Indicator: React.FC<IndicatorProps> = ({ total, current, onSwitch }) => {
     const handleClick = (index: number) => {
         return () => {
-            onSwitch && onSwitch(index)
+            onSwitch?.(index)
         }
     }
 
diff --git a/src/components/common/Sidebar/Item.tsx b/src/components/common/Sidebar/Item.tsx
index 87bd2ea..289b746 100644
--- a/src/components/common/Sidebar/Item.tsx
+++ b/src/components/common/Sidebar/Item.tsx
@@ -16,7 +16,7 @@ const Item: React.FC<ItemProps> = (props) => {
 
     const showSubmenu = (e: React.MouseEvent) => {
         const parentElement = e.currentTarget.parentElement
-        if (parentElement && parentElement.childElementCount === 2) {
+        if (parentElement?.childElementCount === 2) {
             const parentClientRect = parentElement.getBoundingClientRect()
             if (parentClientRect.top <= screen.height / 2) {
                 setSubmenuTop(parentClientRect.top)
@@ -42,18 +42,16 @@ const Item: React.FC<ItemProps> = (props) => {
                     }
                 >
                     <div className={'icon-box'}>
-                        {props.icon ? (
-                            <Icon className={'icon'} component={props.icon} />
-                        ) : undefined}
+                        {props.icon && <Icon className={'icon'} component={props.icon} />}
                     </div>
                     <span className={'text'}>{props.text}</span>
                 </NavLink>
             </div>
-            {props.children ? (
+            {props.children && (
                 <Submenu submenuTop={submenuTop} submenuLeft={submenuLeft}>
                     {props.children}
                 </Submenu>
-            ) : undefined}
+            )}
         </li>
     )
 }
diff --git a/src/components/common/Sidebar/index.tsx b/src/components/common/Sidebar/index.tsx
index f12716b..ae45063 100644
--- a/src/components/common/Sidebar/index.tsx
+++ b/src/components/common/Sidebar/index.tsx
@@ -29,7 +29,7 @@ const Sidebar: React.FC<SidebarProps> & {
     const switchSidebar = () => {
         setLocalStorage('HIDE_SIDEBAR', !hideSidebar ? 'true' : 'false')
         setHideSidebar(!hideSidebar)
-        props.onSidebarSwitch && props.onSidebarSwitch(hideSidebar)
+        props.onSidebarSwitch?.(hideSidebar)
     }
 
     return (
diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index 309565f..0340fce 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -529,9 +529,9 @@ const Group: React.FC = () => {
                     }
                     suffix={
                         <>
-                            {!isRegexLegal ? (
+                            {!isRegexLegal && (
                                 <span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
-                            ) : undefined}
+                            )}
                             <AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
                                 <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
                             </AntdCheckbox>
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index 4e2a400..dc059aa 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -538,9 +538,9 @@ const Role: React.FC = () => {
                     }
                     suffix={
                         <>
-                            {!isRegexLegal ? (
+                            {!isRegexLegal && (
                                 <span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
-                            ) : undefined}
+                            )}
                             <AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
                                 <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
                             </AntdCheckbox>
diff --git a/src/pages/System/Settings/SensitiveWord.tsx b/src/pages/System/Settings/SensitiveWord.tsx
index b2eebec..429b741 100644
--- a/src/pages/System/Settings/SensitiveWord.tsx
+++ b/src/pages/System/Settings/SensitiveWord.tsx
@@ -123,7 +123,7 @@ const SensitiveWord: React.FC = () => {
                                 justifyContent: 'flex-end'
                             }}
                         >
-                            {selectedKeys?.length === 1 ? (
+                            {selectedKeys?.length === 1 && (
                                 <AntdTooltip title={'删除选中项'}>
                                     <Icon
                                         style={{ fontSize: '1.2em' }}
@@ -131,7 +131,7 @@ const SensitiveWord: React.FC = () => {
                                         onClick={handleOnDelete}
                                     />
                                 </AntdTooltip>
-                            ) : undefined}
+                            )}
                             备选
                         </span>,
                         '拦截'
diff --git a/src/pages/System/Settings/index.tsx b/src/pages/System/Settings/index.tsx
index ca5ea51..f411aac 100644
--- a/src/pages/System/Settings/index.tsx
+++ b/src/pages/System/Settings/index.tsx
@@ -27,7 +27,7 @@ export const SettingsCard: React.FC<SettingsCardProps> = (props) => {
                 <FlexBox direction={'horizontal'} className={'head'}>
                     <Icon component={props.icon} className={'icon'} />
                     <div className={'title'}>{props.title}</div>
-                    {!props.loading ? (
+                    {!props.loading && (
                         <Permission operationCode={props.modifyOperationCode}>
                             {props.expand}
                             <AntdButton onClick={props.onReset} title={'重置'}>
@@ -37,7 +37,7 @@ export const SettingsCard: React.FC<SettingsCardProps> = (props) => {
                                 <Icon component={IconOxygenSave} />
                             </AntdButton>
                         </Permission>
-                    ) : undefined}
+                    )}
                 </FlexBox>
                 <LoadingMask
                     maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 0aa934b..fbf2761 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -169,22 +169,20 @@ const User: React.FC = () => {
                         <AntdTag color={'green'}>正常</AntdTag>
                     ) : (
                         <>
-                            {record.verify ? (
+                            {record.verify && (
                                 <>
                                     <AntdPopover content={record.verify} trigger={'click'}>
                                         <AntdTag style={{ cursor: 'pointer' }}>未验证</AntdTag>
                                     </AntdPopover>
                                 </>
-                            ) : undefined}
-                            {record.locking ? <AntdTag>锁定</AntdTag> : undefined}
-                            {record.expiration && isPastTime(record.expiration) ? (
+                            )}
+                            {record.locking && <AntdTag>锁定</AntdTag>}
+                            {record.expiration && isPastTime(record.expiration) && (
                                 <AntdTag>过期</AntdTag>
-                            ) : undefined}
+                            )}
                             {record.credentialsExpiration &&
-                            isPastTime(record.credentialsExpiration) ? (
-                                <AntdTag>改密</AntdTag>
-                            ) : undefined}
-                            {!record.enable ? <AntdTag>禁用</AntdTag> : undefined}
+                                isPastTime(record.credentialsExpiration) && <AntdTag>改密</AntdTag>}
+                            {!record.enable && <AntdTag>禁用</AntdTag>}
                         </>
                     )}
                 </AntdTooltip>
@@ -215,14 +213,14 @@ const User: React.FC = () => {
                             </a>
                         </Permission>
                         <Permission operationCode={'system:user:delete:one'}>
-                            {record.id !== '0' ? (
+                            {record.id !== '0' && (
                                 <a
                                     style={{ color: COLOR_PRODUCTION }}
                                     onClick={handleOnDeleteBtnClick(record)}
                                 >
                                     删除
                                 </a>
-                            ) : undefined}
+                            )}
                         </Permission>
                     </AntdSpace>
                 </>
@@ -378,7 +376,7 @@ const User: React.FC = () => {
                         >
                             <AntdInput.Password />
                         </AntdForm.Item>
-                        {value.id !== '0' ? (
+                        {value.id !== '0' && (
                             <AntdForm.Item
                                 name={'needChangePassword'}
                                 label={'需改密'}
@@ -387,7 +385,7 @@ const User: React.FC = () => {
                             >
                                 <AntdSwitch />
                             </AntdForm.Item>
-                        ) : undefined}
+                        )}
                     </AntdForm>
                 ),
                 onOk: () =>
@@ -803,7 +801,7 @@ const User: React.FC = () => {
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
-            {!isDrawerEdit ? (
+            {!isDrawerEdit && (
                 <>
                     <AntdForm.Item
                         name={'password'}
@@ -813,7 +811,7 @@ const User: React.FC = () => {
                         <AntdInput.Password allowClear />
                     </AntdForm.Item>
                 </>
-            ) : undefined}
+            )}
             <AntdForm.Item name={'nickname'} label={'昵称'} rules={[{ whitespace: false }]}>
                 <AntdInput allowClear />
             </AntdForm.Item>
@@ -824,7 +822,7 @@ const User: React.FC = () => {
             >
                 <AntdInput type={'email'} allowClear />
             </AntdForm.Item>
-            {formValues?.id !== '0' ? (
+            {formValues?.id !== '0' && (
                 <>
                     <AntdForm.Item name={'roleIds'} label={'角色'}>
                         <AntdSelect
@@ -900,7 +898,7 @@ const User: React.FC = () => {
                         <AntdSwitch />
                     </AntdForm.Item>
                 </>
-            ) : undefined}
+            )}
         </AntdForm>
     )
 
@@ -943,9 +941,9 @@ const User: React.FC = () => {
                     }
                     suffix={
                         <>
-                            {!isRegexLegal ? (
+                            {!isRegexLegal && (
                                 <span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
-                            ) : undefined}
+                            )}
                             <AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
                                 <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
                             </AntdCheckbox>
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index fbfc2b0..a47a786 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -13,15 +13,17 @@ const SystemFramework: React.FC = () => {
                     <Sidebar title={'系统配置'}>
                         <Sidebar.ItemList>
                             {getSystemRouteJson().map((value) => {
-                                return value.menu ? (
-                                    <Sidebar.Item
-                                        end={value.id === 'system' ? true : undefined}
-                                        path={value.absolutePath}
-                                        icon={value.icon}
-                                        text={value.name}
-                                        key={value.id}
-                                    />
-                                ) : undefined
+                                return (
+                                    value.menu && (
+                                        <Sidebar.Item
+                                            end={value.id === 'system' ? true : undefined}
+                                            path={value.absolutePath}
+                                            icon={value.icon}
+                                            text={value.name}
+                                            key={value.id}
+                                        />
+                                    )
+                                )
                             })}
                         </Sidebar.ItemList>
                     </Sidebar>
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index be7ff21..42e5ec2 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -42,17 +42,16 @@ const ToolsFramework: React.FC = () => {
                                             text={tool.name}
                                             key={tool.id}
                                         >
-                                            {tool.children
-                                                ? tool.children.map((subTool) => {
-                                                      return (
-                                                          <Sidebar.Item
-                                                              path={subTool.absolutePath}
-                                                              text={subTool.name}
-                                                              key={subTool.id}
-                                                          />
-                                                      )
-                                                  })
-                                                : undefined}
+                                            {tool.children &&
+                                                tool.children.map((subTool) => {
+                                                    return (
+                                                        <Sidebar.Item
+                                                            path={subTool.absolutePath}
+                                                            text={subTool.name}
+                                                            key={subTool.id}
+                                                        />
+                                                    )
+                                                })}
                                         </Sidebar.Item>
                                     ) : undefined
                                 })}
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 75a5577..3c9361a 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -15,13 +15,13 @@ const ToolsFramework: React.FC = () => {
                         title={'个人中心'}
                         bottomFixed={
                             <Sidebar.ItemList>
-                                {hasPathPermission('/system') ? (
+                                {hasPathPermission('/system') && (
                                     <Sidebar.Item
                                         path={'/system'}
                                         icon={IconOxygenSetting}
                                         text={'系统配置'}
                                     />
-                                ) : undefined}
+                                )}
                                 <Sidebar.Item
                                     path={'/'}
                                     icon={IconOxygenBack}
@@ -32,15 +32,17 @@ const ToolsFramework: React.FC = () => {
                     >
                         <Sidebar.ItemList>
                             {user.map((value) => {
-                                return value.menu ? (
-                                    <Sidebar.Item
-                                        end={value.id === 'user' ? true : undefined}
-                                        path={value.absolutePath}
-                                        icon={value.icon}
-                                        text={value.name}
-                                        key={value.id}
-                                    />
-                                ) : undefined
+                                return (
+                                    value.menu && (
+                                        <Sidebar.Item
+                                            end={value.id === 'user' && true}
+                                            path={value.absolutePath}
+                                            icon={value.icon}
+                                            text={value.name}
+                                            key={value.id}
+                                        />
+                                    )
+                                )
                             })}
                         </Sidebar.ItemList>
                     </Sidebar>
diff --git a/src/util/route.tsx b/src/util/route.tsx
index 7812af8..0899079 100644
--- a/src/util/route.tsx
+++ b/src/util/route.tsx
@@ -7,10 +7,9 @@ export const getRedirectUrl = (path: string, redirectUrl: string): string => {
 
 export const getFullTitle = (data: _DataNode, preTitle?: string) => {
     data.fullTitle = `${preTitle ? `${preTitle}-` : ''}${data.title as string}`
-    data.children &&
-        data.children.forEach((value) => {
-            getFullTitle(value, data.fullTitle)
-        })
+    data.children?.forEach((value) => {
+        getFullTitle(value, data.fullTitle)
+    })
 
     return data
 }

From 57098156136294ccea6fc8798cf0d2a1af90d123 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 8 Jan 2024 18:09:05 +0800
Subject: [PATCH 159/307] Add FileSelector to CodeEditor

---
 src/assets/svg/close.svg                      |   1 +
 .../ReactPlayground/CodeEditor/Editor/ata.ts  |  37 +++--
 .../CodeEditor/Editor/hooks.ts                |  41 ++++-
 .../CodeEditor/Editor/index.tsx               |  23 ++-
 .../CodeEditor/Editor/monacoConfig.ts         |  60 +++----
 .../CodeEditor/FileSelector/Item.tsx          | 114 +++++++++++++
 .../FileSelector/file-selector.scss           |  54 +++++++
 .../CodeEditor/FileSelector/index.tsx         | 151 ++++++++++++++++++
 .../ReactPlayground/CodeEditor/index.tsx      |  72 +++++++++
 src/components/ReactPlayground/shared.ts      |   4 +-
 src/components/ReactPlayground/utils.ts       |  16 +-
 src/pages/OnlineEditor.tsx                    |  29 +++-
 12 files changed, 540 insertions(+), 62 deletions(-)
 create mode 100644 src/assets/svg/close.svg
 create mode 100644 src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx
 create mode 100644 src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss
 create mode 100644 src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
 create mode 100644 src/components/ReactPlayground/CodeEditor/index.tsx

diff --git a/src/assets/svg/close.svg b/src/assets/svg/close.svg
new file mode 100644
index 0000000..3e959cf
--- /dev/null
+++ b/src/assets/svg/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1028 1024"><path d="M646.4 512l345.6-345.6c38.4-38.4 38.4-96 0-134.4-38.4-38.4-96-38.4-134.4 0L512 377.6 166.4 32C128-6.4 70.4-6.4 32 32c-38.4 38.4-38.4 96 0 134.4L377.6 512l-345.6 345.6c-38.4 38.4-38.4 96 0 134.4 19.2 19.2 44.8 25.6 70.4 25.6s51.2-6.4 70.4-25.6L512 646.4l345.6 345.6c19.2 19.2 44.8 25.6 70.4 25.6s51.2-6.4 70.4-25.6c38.4-38.4 38.4-96 0-134.4L646.4 512z" /></svg>
\ No newline at end of file
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/ata.ts b/src/components/ReactPlayground/CodeEditor/Editor/ata.ts
index 370e8c9..df03b68 100644
--- a/src/components/ReactPlayground/CodeEditor/Editor/ata.ts
+++ b/src/components/ReactPlayground/CodeEditor/Editor/ata.ts
@@ -18,32 +18,47 @@ const delegateListener = createDelegate()
 
 type InferSet<T> = T extends Set<infer U> ? U : never
 
-export const createATA = async () => {
-    // @ts-ignore
+export interface TypeHelper {
+    dispose: () => void
+    acquireType: (code: string) => void
+    removeListener: <T extends keyof DelegateListener>(
+        event: T,
+        handler: InferSet<DelegateListener[T]>
+    ) => void
+    addListener: <T extends keyof DelegateListener>(
+        event: T,
+        handler: InferSet<DelegateListener[T]>
+    ) => void
+}
+
+export const createATA = async (): Promise<TypeHelper> => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const ts = await import('https://esm.sh/typescript@5.3.3')
     const ata = setupTypeAcquisition({
         projectName: 'monaco-ts',
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         typescript: ts,
         logger: console,
         fetcher: (input, init) => {
-            let result: any
             try {
-                result = fetch(input, init)
+                return fetch(input, init)
             } catch (error) {
                 console.error('Error fetching data:', error)
             }
-            return result
+            return new Promise(() => {})
         },
         delegate: {
             receivedFile: (code, path) => {
                 delegateListener.receivedFile.forEach((fn) => fn(code, path))
             },
-            progress: (downloaded, estimatedTotal) => {
-                delegateListener.progress.forEach((fn) => fn(downloaded, estimatedTotal))
-            },
             started: () => {
                 delegateListener.started.forEach((fn) => fn())
             },
+            progress: (downloaded, estimatedTotal) => {
+                delegateListener.progress.forEach((fn) => fn(downloaded, estimatedTotal))
+            },
             finished: (files) => {
                 delegateListener.finished.forEach((fn) => fn(files))
             }
@@ -56,7 +71,8 @@ export const createATA = async () => {
         event: T,
         handler: InferSet<DelegateListener[T]>
     ) => {
-        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
         delegateListener[event].add(handler)
     }
 
@@ -64,7 +80,8 @@ export const createATA = async () => {
         event: T,
         handler: InferSet<DelegateListener[T]>
     ) => {
-        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
         delegateListener[event].delete(handler)
     }
 
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts b/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
index 2834852..f14aa3b 100644
--- a/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
+++ b/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
@@ -2,7 +2,7 @@ import { editor, IPosition, Selection } from 'monaco-editor'
 import ScrollType = editor.ScrollType
 import { Monaco } from '@monaco-editor/react'
 import { getWorker, MonacoJsxSyntaxHighlight } from 'monaco-jsx-syntax-highlight'
-import { createATA } from '@/components/ReactPlayground/CodeEditor/Editor/ata.ts'
+import { createATA, TypeHelper } from '@/components/ReactPlayground/CodeEditor/Editor/ata.ts'
 
 export const useEditor = () => {
     const doOpenEditor = (
@@ -44,7 +44,7 @@ export const useEditor = () => {
         editor: editor.IStandaloneCodeEditor,
         monaco: Monaco,
         defaultValue: string,
-        onWatch: any
+        onWatch: (typeHelper: TypeHelper) => () => void
     ) => {
         const typeHelper = await createATA()
 
@@ -70,3 +70,40 @@ export const useEditor = () => {
         autoLoadExtraLib
     }
 }
+
+export const useTypesProgress = () => {
+    const [progress, setProgress] = useState(0)
+    const [total, setTotal] = useState(0)
+    const [finished, setFinished] = useState(false)
+
+    const onWatch = (typeHelper: TypeHelper) => {
+        const handleStarted = () => {
+            setFinished(false)
+        }
+        typeHelper.addListener('started', handleStarted)
+
+        const handleProgress = (progress: number, total: number) => {
+            setProgress(progress)
+            setTotal(total)
+        }
+        typeHelper.addListener('progress', handleProgress)
+
+        const handleFinished = () => {
+            setFinished(true)
+        }
+        typeHelper.addListener('progress', handleFinished)
+
+        return () => {
+            typeHelper.removeListener('started', handleStarted)
+            typeHelper.removeListener('progress', handleProgress)
+            typeHelper.removeListener('finished', handleFinished)
+        }
+    }
+
+    return {
+        progress,
+        total,
+        finished,
+        onWatch
+    }
+}
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/index.tsx b/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
index e3d1610..7be12ca 100644
--- a/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
+++ b/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
@@ -2,23 +2,30 @@ import React from 'react'
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
 import '@/components/ReactPlayground/CodeEditor/Editor/editor.scss'
-import { IEditorOptions, IFile, IFiles, ITheme } from '@/components/ReactPlayground/shared'
+import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared'
 import { MonacoEditorConfig } from '@/components/ReactPlayground/CodeEditor/Editor/monacoConfig'
 import { fileNameToLanguage } from '@/components/ReactPlayground/utils'
-import { useEditor } from '@/components/ReactPlayground/CodeEditor/Editor/hooks'
+import { useEditor, useTypesProgress } from '@/components/ReactPlayground/CodeEditor/Editor/hooks'
 
 interface EditorProps {
-    file: IFile
+    files?: IFiles
+    selectedFileName?: string
     onChange?: (code: string | undefined) => void
     options?: IEditorOptions
     theme?: ITheme
-    files?: IFiles
     onJumpFile?: (fileName: string) => void
 }
 
-const Editor: React.FC<EditorProps> = ({ file, files, theme, onChange, options, onJumpFile }) => {
+const Editor: React.FC<EditorProps> = ({
+    files = {},
+    selectedFileName = '',
+    theme,
+    onChange,
+    options,
+    onJumpFile
+}) => {
     const editorRef = useRef<editor.IStandaloneCodeEditor>()
-    const { doOpenEditor, loadJsxSyntaxHighlight } = useEditor()
+    const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor()
     const jsxSyntaxHighlightRef = useRef<{
         highlighter: (code?: string | undefined) => void
         dispose: () => void
@@ -26,6 +33,8 @@ const Editor: React.FC<EditorProps> = ({ file, files, theme, onChange, options,
         highlighter: () => undefined,
         dispose: () => undefined
     })
+    const { onWatch } = useTypesProgress()
+    const file = files[selectedFileName] ?? { name: 'Untitled' }
 
     const handleOnEditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
         editorRef.current = editor
@@ -64,6 +73,8 @@ const Editor: React.FC<EditorProps> = ({ file, files, theme, onChange, options,
         }
 
         jsxSyntaxHighlightRef.current = loadJsxSyntaxHighlight(editor, monaco)
+
+        void autoLoadExtraLib(editor, monaco, file.value, onWatch)
     }
 
     useEffect(() => {
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts b/src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts
index 20f570a..7411eb7 100644
--- a/src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts
+++ b/src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts
@@ -1,34 +1,34 @@
 import { editor } from 'monaco-editor'
 
 export const MonacoEditorConfig: editor.IStandaloneEditorConstructionOptions = {
-  automaticLayout: true,
-  cursorBlinking: 'smooth',
-  fontLigatures: true,
-  formatOnPaste: true,
-  formatOnType: true,
-  fontSize: 14,
-  showDeprecated: true,
-  showUnused: true,
-  showFoldingControls: 'mouseover',
-  scrollBeyondLastLine: false,
-  minimap: {
-    enabled: false,
-  },
-  inlineSuggest: {
-    enabled: false,
-  },
-  fixedOverflowWidgets: true,
-  smoothScrolling: true,
-  smartSelect: {
-    selectSubwords: true,
-    selectLeadingAndTrailingWhitespace: true,
-  },
-  tabSize: 2,
-  overviewRulerBorder: false, // 不要滚动条的边框
-  // 滚动条设置
-  scrollbar: {
-    verticalScrollbarSize: 6, // 竖滚动条
-    horizontalScrollbarSize: 6, // 横滚动条
-  },
-  // lineNumbers: 'off', // 隐藏控制行号
+    automaticLayout: true,
+    cursorBlinking: 'smooth',
+    fontLigatures: true,
+    formatOnPaste: true,
+    formatOnType: true,
+    fontSize: 14,
+    showDeprecated: true,
+    showUnused: true,
+    showFoldingControls: 'mouseover',
+    scrollBeyondLastLine: false,
+    minimap: {
+        enabled: false
+    },
+    inlineSuggest: {
+        enabled: false
+    },
+    fixedOverflowWidgets: true,
+    smoothScrolling: true,
+    smartSelect: {
+        selectSubwords: true,
+        selectLeadingAndTrailingWhitespace: true
+    },
+    tabSize: 2,
+    overviewRulerBorder: false, // 不要滚动条的边框
+    // 滚动条设置
+    scrollbar: {
+        verticalScrollbarSize: 6, // 竖滚动条
+        horizontalScrollbarSize: 6 // 横滚动条
+    }
+    // lineNumbers: 'off', // 隐藏控制行号
 }
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx b/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx
new file mode 100644
index 0000000..27bbc02
--- /dev/null
+++ b/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx
@@ -0,0 +1,114 @@
+import React from 'react'
+
+interface ItemProps {
+    readonly?: boolean
+    creating?: boolean
+    value: string
+    active?: boolean
+    onOk?: (fileName: string) => void
+    onCancel?: () => void
+    onRemove?: (fileName: string) => void
+    onClick?: () => void
+    onValidate?: (newFileName: string, oldFileName: string) => boolean
+}
+
+const Item: React.FC<ItemProps> = ({
+    readonly = false,
+    value,
+    active = false,
+    onOk,
+    onCancel,
+    onRemove,
+    onClick,
+    onValidate,
+    ...prop
+}) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const [fileName, setFileName] = useState(value)
+    const [creating, setCreating] = useState(prop.creating)
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Enter') {
+            event.preventDefault()
+            finishNameFile()
+        } else if (event.key === 'Escape') {
+            event.preventDefault()
+            cancelNameFile()
+        }
+    }
+
+    const finishNameFile = () => {
+        if (!creating || onValidate ? !onValidate?.(fileName, value) : false) {
+            return
+        }
+
+        if (fileName === value && active) {
+            setCreating(false)
+            return
+        }
+
+        onOk?.(fileName)
+        setCreating(false)
+    }
+
+    const cancelNameFile = () => {
+        setFileName(value)
+        setCreating(false)
+        onCancel?.()
+    }
+
+    const handleOnDoubleClick = () => {
+        if (readonly) {
+            return
+        }
+
+        setCreating(true)
+        setFileName(value)
+        setTimeout(() => {
+            inputRef.current?.focus()
+        })
+    }
+
+    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setFileName(e.target.value)
+    }
+
+    const handleOnDelete = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        if (confirm(`确定删除文件 ${value} ？`)) {
+            onRemove?.(value)
+        }
+    }
+
+    useEffect(() => {
+        inputRef.current?.focus()
+    }, [])
+
+    return (
+        <div className={`tab-item${active ? ' active' : ''}`} onClick={onClick}>
+            {creating ? (
+                <div className={'tab-item-input'}>
+                    <input
+                        ref={inputRef}
+                        value={fileName}
+                        onChange={handleOnChange}
+                        onBlur={finishNameFile}
+                        onKeyDown={handleKeyDown}
+                    />
+                    <span className={'tab-item-input-mask'}>{fileName}</span>
+                </div>
+            ) : (
+                <>
+                    <div onDoubleClick={handleOnDoubleClick}>{value}</div>
+                    {!readonly && (
+                        <div className={'tab-item-close'} onClick={handleOnDelete}>
+                            <IconOxygenClose />
+                        </div>
+                    )}
+                </>
+            )}
+        </div>
+    )
+}
+
+export default Item
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss b/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss
new file mode 100644
index 0000000..9da47bf
--- /dev/null
+++ b/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss
@@ -0,0 +1,54 @@
+[data-component=playground-file-selector].tab{
+  display: flex;
+  flex-direction: row;
+  gap: 1px;
+  padding: 10px 20px 0 20px;
+
+  .tab-item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    height: 30px;
+    padding: 0 20px;
+    border: 1px solid #f0f0f0;
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 6px 6px 0 0;
+    cursor: pointer;
+
+    .tab-item-input {
+      position: relative;
+      min-width: 40px;
+      transform: translateY(1px);
+
+      .tab-item-input-mask {
+        display: inline-block;
+        color: transparent;
+      }
+      input {
+        position: absolute;
+        background-color: transparent;
+        width: 100%;
+        font-size: 1em;
+      }
+    }
+
+    .tab-item-close {
+      transform: translateX(10px);
+
+      :hover {
+        fill: #888;
+      }
+
+      svg {
+        height: 8px;
+        fill: #666;
+      }
+    }
+
+    &.active {
+      background-color: white;
+      border-bottom: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx b/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
new file mode 100644
index 0000000..6e0039a
--- /dev/null
+++ b/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
@@ -0,0 +1,151 @@
+import React from 'react'
+import '@/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss'
+import { IFiles } from '@/components/ReactPlayground/shared.ts'
+import {
+    ENTRY_FILE_NAME,
+    IMPORT_MAP_FILE_NAME,
+    MAIN_FILE_NAME
+} from '@/components/ReactPlayground/files.ts'
+import Item from '@/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx'
+
+interface FileSelectorProps {
+    files?: IFiles
+    onChange?: (fileName: string) => void
+    onError?: (msg: string) => void
+    readonly?: boolean
+    readonlyFiles?: string[]
+    onRemoveFile?: (fileName: string) => void
+    onAddFile?: (fileName: string) => void
+    onUpdateFileName?: (newFileName: string, oldFileName: string) => void
+    selectedFileName?: string
+}
+
+const FileSelector: React.FC<FileSelectorProps> = ({
+    files = {},
+    onChange,
+    onError,
+    readonly = false,
+    readonlyFiles = [],
+    onRemoveFile,
+    onAddFile,
+    onUpdateFileName,
+    selectedFileName = ''
+}) => {
+    const [tabs, setTabs] = useState<string[]>([])
+    const [creating, setCreating] = useState(false)
+
+    const getMaxSequenceTabName = (filesName: string[]) => {
+        const result = filesName.reduce((max, filesName) => {
+            const match = filesName.match(/Component(\d+)\.tsx/)
+            if (match) {
+                const sequenceNumber = parseInt(match[1], 10)
+                return Math.max(Number(max), sequenceNumber)
+            }
+            return max
+        }, 0)
+
+        return `Component${result + 1}.tsx`
+    }
+
+    const addTab = () => {
+        setTabs([...tabs, getMaxSequenceTabName(tabs)])
+        setCreating(true)
+    }
+
+    const handleOnCancel = () => {
+        if (!creating) {
+            return
+        }
+
+        tabs.pop()
+        setTabs([...tabs])
+        setCreating(false)
+    }
+
+    const handleOnClickTab = (fileName: string) => {
+        if (creating) {
+            return
+        }
+
+        onChange?.(fileName)
+    }
+
+    const editImportMap = () => {
+        onChange?.(IMPORT_MAP_FILE_NAME)
+    }
+
+    const handleOnSaveTab = (value: string, item: string) => {
+        if (creating) {
+            onAddFile?.(value)
+            setCreating(false)
+        } else {
+            onUpdateFileName?.(item, value)
+        }
+
+        setTimeout(() => {
+            handleOnClickTab(value)
+        })
+    }
+
+    const handleOnValidateTab = (newFileName: string, oldFileName: string) => {
+        if (!/\.(jsx|tsx|js|ts|css|json|svg)$/.test(newFileName)) {
+            onError?.(
+                'Playground only supports *.jsx, *.tsx, *.js, *.ts, *.css, *.json, *.svg files.'
+            )
+
+            return false
+        }
+
+        if (tabs.includes(newFileName) && newFileName !== oldFileName) {
+            onError?.(`File "${newFileName}" already exists.`)
+            return false
+        }
+
+        return true
+    }
+
+    const handleOnRemove = (fileName: string) => {
+        onRemoveFile?.(fileName)
+        handleOnClickTab(Object.keys(files)[Object.keys(files).length - 1])
+    }
+
+    useEffect(() => {
+        Object.keys(files).length &&
+            setTabs(
+                Object.keys(files).filter(
+                    (item) =>
+                        ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) &&
+                        !files[item].hidden
+                )
+            )
+    }, [files])
+
+    return (
+        <>
+            <div
+                data-component={'playground-file-selector'}
+                className={'tab'}
+                style={{ flex: '0 0 auto' }}
+            >
+                {tabs.map((item, index) => (
+                    <Item
+                        key={index + item}
+                        value={item}
+                        active={selectedFileName == item}
+                        creating={creating}
+                        readonly={
+                            readonly || readonlyFiles.includes(item) || MAIN_FILE_NAME == item
+                        }
+                        onValidate={handleOnValidateTab}
+                        onOk={(name) => handleOnSaveTab(name, item)}
+                        onCancel={handleOnCancel}
+                        onRemove={handleOnRemove}
+                        onClick={() => handleOnClickTab(item)}
+                    />
+                ))}
+            </div>
+        </>
+    )
+}
+
+export default FileSelector
diff --git a/src/components/ReactPlayground/CodeEditor/index.tsx b/src/components/ReactPlayground/CodeEditor/index.tsx
new file mode 100644
index 0000000..0952284
--- /dev/null
+++ b/src/components/ReactPlayground/CodeEditor/index.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+import FileSelector from '@/components/ReactPlayground/CodeEditor/FileSelector'
+import Editor from '@/components/ReactPlayground/CodeEditor/Editor'
+import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared.ts'
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import _ from 'lodash'
+
+interface CodeEditorProps {
+    theme: ITheme
+    files: IFiles
+    readonly?: boolean
+    readonlyFiles?: string[]
+    selectedFileName: string
+    options?: IEditorOptions
+    onSelectedFileChange?: (fileName: string) => void
+    onRemoveFile?: (fileName: string, files: IFiles) => void
+}
+
+const CodeEditor: React.FC<CodeEditorProps> = ({
+    theme,
+    files,
+    readonly,
+    readonlyFiles,
+    options,
+    onSelectedFileChange,
+    onRemoveFile,
+    ...props
+}) => {
+    const [selectedFileName, setSelectedFileName] = useState(props.selectedFileName)
+
+    const handleOnChangeSelectedFile = (fileName: string) => {
+        if (onSelectedFileChange) {
+            onSelectedFileChange(fileName)
+        } else {
+            setSelectedFileName(fileName)
+        }
+    }
+
+    const handleOnRemoveFile = (fileName: string) => {
+        const clone = _.cloneDeep(files)
+        delete clone[fileName]
+        onRemoveFile?.(fileName, clone)
+    }
+
+    return (
+        <>
+            <FitFullscreen>
+                <FlexBox style={{ height: '100%' }}>
+                    <FileSelector
+                        files={files}
+                        readonly={readonly}
+                        readonlyFiles={readonlyFiles}
+                        selectedFileName={
+                            onSelectedFileChange ? props.selectedFileName : selectedFileName
+                        }
+                        onChange={handleOnChangeSelectedFile}
+                        onRemoveFile={handleOnRemoveFile}
+                    />
+                    <Editor
+                        theme={theme}
+                        selectedFileName={selectedFileName}
+                        files={files}
+                        options={options}
+                    />
+                </FlexBox>
+            </FitFullscreen>
+        </>
+    )
+}
+
+export default CodeEditor
diff --git a/src/components/ReactPlayground/shared.ts b/src/components/ReactPlayground/shared.ts
index bbdf821..02fee27 100644
--- a/src/components/ReactPlayground/shared.ts
+++ b/src/components/ReactPlayground/shared.ts
@@ -1,10 +1,12 @@
 import React from 'react'
 import { editor } from 'monaco-editor'
 
+export type ILanguage = 'javascript' | 'typescript' | 'json' | 'css'
+
 export interface IFile {
     name: string
     value: string
-    language: 'javascript' | 'typescript' | 'json' | 'css'
+    language: ILanguage
     active?: boolean
     hidden?: boolean
 }
diff --git a/src/components/ReactPlayground/utils.ts b/src/components/ReactPlayground/utils.ts
index 0569a37..95b5a90 100644
--- a/src/components/ReactPlayground/utils.ts
+++ b/src/components/ReactPlayground/utils.ts
@@ -1,5 +1,11 @@
 import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
-import { ICustomFiles, IFiles, IImportMap, ITheme } from '@/components/ReactPlayground/shared'
+import {
+    ICustomFiles,
+    IFiles,
+    IImportMap,
+    ILanguage,
+    ITheme
+} from '@/components/ReactPlayground/shared'
 import { IMPORT_MAP_FILE_NAME, reactTemplateFiles } from '@/components/ReactPlayground/files'
 
 export const strToBase64 = (str: string) => {
@@ -31,8 +37,8 @@ export const setPlaygroundTheme = (theme: ITheme) => {
         ?.forEach((item) => item.setAttribute('class', theme))
 }
 
-export const getPlaygroundTheme = () => {
-    const isDarkTheme = JSON.parse(localStorage.getItem(STORAGE_DARK_THEME) || 'false')
+export const getPlaygroundTheme = (): ITheme => {
+    const isDarkTheme = JSON.parse(localStorage.getItem(STORAGE_DARK_THEME) || 'false') as ITheme
     return isDarkTheme ? 'vs-dark' : 'light'
 }
 
@@ -96,7 +102,7 @@ export const getFilesFromUrl = () => {
     try {
         if (typeof window !== 'undefined') {
             const hash = window.location.hash
-            if (hash) files = JSON.parse(base64ToStr(hash?.split('#')[1]))
+            if (hash) files = JSON.parse(base64ToStr(hash?.split('#')[1])) as IFiles
         }
     } catch (error) {
         console.error(error)
@@ -104,7 +110,7 @@ export const getFilesFromUrl = () => {
     return files
 }
 
-export const fileNameToLanguage = (name: string) => {
+export const fileNameToLanguage = (name: string): ILanguage => {
     const suffix = name.split('.').pop() || ''
     if (['js', 'jsx'].includes(suffix)) return 'javascript'
     if (['ts', 'tsx'].includes(suffix)) return 'typescript'
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index 04293c8..974ce4c 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,16 +1,29 @@
-import React from 'react'
-import Editor from '@/components/ReactPlayground/CodeEditor/Editor'
+import React, { useState } from 'react'
+import CodeEditor from '@/components/ReactPlayground/CodeEditor'
+import { fileNameToLanguage } from '@/components/ReactPlayground/utils.ts'
+import { IFiles } from '@/components/ReactPlayground/shared.ts'
 
 const OnlineEditor: React.FC = () => {
+    const [files, setFiles] = useState<IFiles>({
+        abc: {
+            name: 'App.tsx',
+            language: fileNameToLanguage('App.tsx'),
+            value: 'const a = () => {}'
+        },
+        cde: {
+            name: 'App.css',
+            language: fileNameToLanguage('App.css'),
+            value: '.title {}'
+        }
+    })
+
     return (
         <>
-            <Editor
+            <CodeEditor
                 theme={'light'}
-                file={{
-                    name: 'App.tsx',
-                    language: 'typescript',
-                    value: 'const a = () => {}'
-                }}
+                files={files}
+                selectedFileName={'abc'}
+                onRemoveFile={(_, files) => setFiles(files)}
             />
         </>
     )

From 5a320e459ab1f98bac2c30c662e848cbea25b9dc Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 9 Jan 2024 00:10:03 +0800
Subject: [PATCH 160/307] Optimize remove file, rename file and readonly in
 CodeEditor

---
 .../CodeEditor/Editor/hooks.ts                |  2 +-
 .../CodeEditor/Editor/index.tsx               | 11 +++++-
 .../CodeEditor/FileSelector/Item.tsx          | 24 +++++++++++-
 .../FileSelector/file-selector.scss           |  3 +-
 .../CodeEditor/FileSelector/index.tsx         | 32 +++++++++-------
 .../ReactPlayground/CodeEditor/index.tsx      | 37 ++++++++++++++++---
 src/components/ReactPlayground/shared.ts      |  2 +-
 src/components/ReactPlayground/utils.ts       |  1 +
 src/pages/OnlineEditor.tsx                    | 34 +++++++++++++++--
 9 files changed, 115 insertions(+), 31 deletions(-)

diff --git a/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts b/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
index f14aa3b..7535cc7 100644
--- a/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
+++ b/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
@@ -2,7 +2,7 @@ import { editor, IPosition, Selection } from 'monaco-editor'
 import ScrollType = editor.ScrollType
 import { Monaco } from '@monaco-editor/react'
 import { getWorker, MonacoJsxSyntaxHighlight } from 'monaco-jsx-syntax-highlight'
-import { createATA, TypeHelper } from '@/components/ReactPlayground/CodeEditor/Editor/ata.ts'
+import { createATA, TypeHelper } from '@/components/ReactPlayground/CodeEditor/Editor/ata'
 
 export const useEditor = () => {
     const doOpenEditor = (
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/index.tsx b/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
index 7be12ca..c3887bf 100644
--- a/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
+++ b/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
@@ -3,13 +3,14 @@ import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
 import '@/components/ReactPlayground/CodeEditor/Editor/editor.scss'
 import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared'
-import { MonacoEditorConfig } from '@/components/ReactPlayground/CodeEditor/Editor/monacoConfig'
 import { fileNameToLanguage } from '@/components/ReactPlayground/utils'
 import { useEditor, useTypesProgress } from '@/components/ReactPlayground/CodeEditor/Editor/hooks'
+import { MonacoEditorConfig } from '@/components/ReactPlayground/CodeEditor/Editor/monacoConfig'
 
 interface EditorProps {
     files?: IFiles
     selectedFileName?: string
+    readonly?: boolean
     onChange?: (code: string | undefined) => void
     options?: IEditorOptions
     theme?: ITheme
@@ -19,6 +20,7 @@ interface EditorProps {
 const Editor: React.FC<EditorProps> = ({
     files = {},
     selectedFileName = '',
+    readonly,
     theme,
     onChange,
     options,
@@ -92,7 +94,12 @@ const Editor: React.FC<EditorProps> = ({
                 value={file.value}
                 onChange={onChange}
                 onMount={handleOnEditorDidMount}
-                options={{ ...MonacoEditorConfig, ...options, theme: undefined }}
+                options={{
+                    ...MonacoEditorConfig,
+                    ...options,
+                    theme: undefined,
+                    readOnly: readonly
+                }}
             />
         </>
     )
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx b/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx
index 27bbc02..bcb447c 100644
--- a/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx
+++ b/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx
@@ -5,6 +5,8 @@ interface ItemProps {
     creating?: boolean
     value: string
     active?: boolean
+    hasEditing?: boolean
+    setHasEditing?: React.Dispatch<React.SetStateAction<boolean>>
     onOk?: (fileName: string) => void
     onCancel?: () => void
     onRemove?: (fileName: string) => void
@@ -16,6 +18,8 @@ const Item: React.FC<ItemProps> = ({
     readonly = false,
     value,
     active = false,
+    hasEditing,
+    setHasEditing,
     onOk,
     onCancel,
     onRemove,
@@ -27,6 +31,14 @@ const Item: React.FC<ItemProps> = ({
     const [fileName, setFileName] = useState(value)
     const [creating, setCreating] = useState(prop.creating)
 
+    const handleOnClick = () => {
+        if (hasEditing) {
+            return
+        }
+
+        onClick?.()
+    }
+
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.key === 'Enter') {
             event.preventDefault()
@@ -39,30 +51,35 @@ const Item: React.FC<ItemProps> = ({
 
     const finishNameFile = () => {
         if (!creating || onValidate ? !onValidate?.(fileName, value) : false) {
+            inputRef.current?.focus()
             return
         }
 
         if (fileName === value && active) {
             setCreating(false)
+            setHasEditing?.(false)
             return
         }
 
         onOk?.(fileName)
         setCreating(false)
+        setHasEditing?.(false)
     }
 
     const cancelNameFile = () => {
         setFileName(value)
         setCreating(false)
+        setHasEditing?.(false)
         onCancel?.()
     }
 
     const handleOnDoubleClick = () => {
-        if (readonly) {
+        if (readonly || creating || hasEditing) {
             return
         }
 
         setCreating(true)
+        setHasEditing?.(true)
         setFileName(value)
         setTimeout(() => {
             inputRef.current?.focus()
@@ -75,6 +92,9 @@ const Item: React.FC<ItemProps> = ({
 
     const handleOnDelete = (e: React.MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
+        if (hasEditing) {
+            return
+        }
         if (confirm(`确定删除文件 ${value} ？`)) {
             onRemove?.(value)
         }
@@ -85,7 +105,7 @@ const Item: React.FC<ItemProps> = ({
     }, [])
 
     return (
-        <div className={`tab-item${active ? ' active' : ''}`} onClick={onClick}>
+        <div className={`tab-item${active ? ' active' : ''}`} onClick={handleOnClick}>
             {creating ? (
                 <div className={'tab-item-input'}>
                     <input
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss b/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss
index 9da47bf..5ed521f 100644
--- a/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss
+++ b/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss
@@ -2,11 +2,10 @@
   display: flex;
   flex-direction: row;
   gap: 1px;
-  padding: 10px 20px 0 20px;
+  padding: 4px 20px 0 20px;
 
   .tab-item {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     height: 30px;
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx b/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
index 6e0039a..3eee08a 100644
--- a/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
@@ -1,19 +1,15 @@
 import React from 'react'
 import '@/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss'
-import { IFiles } from '@/components/ReactPlayground/shared.ts'
-import {
-    ENTRY_FILE_NAME,
-    IMPORT_MAP_FILE_NAME,
-    MAIN_FILE_NAME
-} from '@/components/ReactPlayground/files.ts'
-import Item from '@/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx'
+import { IFiles } from '@/components/ReactPlayground/shared'
+import { ENTRY_FILE_NAME, IMPORT_MAP_FILE_NAME } from '@/components/ReactPlayground/files'
+import Item from '@/components/ReactPlayground/CodeEditor/FileSelector/Item'
 
 interface FileSelectorProps {
     files?: IFiles
     onChange?: (fileName: string) => void
     onError?: (msg: string) => void
     readonly?: boolean
-    readonlyFiles?: string[]
+    notRemovableFiles?: string[]
     onRemoveFile?: (fileName: string) => void
     onAddFile?: (fileName: string) => void
     onUpdateFileName?: (newFileName: string, oldFileName: string) => void
@@ -25,7 +21,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     onChange,
     onError,
     readonly = false,
-    readonlyFiles = [],
+    notRemovableFiles = [],
     onRemoveFile,
     onAddFile,
     onUpdateFileName,
@@ -33,6 +29,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
 }) => {
     const [tabs, setTabs] = useState<string[]>([])
     const [creating, setCreating] = useState(false)
+    const [hasEditing, setHasEditing] = useState(false)
 
     const getMaxSequenceTabName = (filesName: string[]) => {
         const result = filesName.reduce((max, filesName) => {
@@ -79,7 +76,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
             onAddFile?.(value)
             setCreating(false)
         } else {
-            onUpdateFileName?.(item, value)
+            onUpdateFileName?.(value, item)
         }
 
         setTimeout(() => {
@@ -106,7 +103,14 @@ const FileSelector: React.FC<FileSelectorProps> = ({
 
     const handleOnRemove = (fileName: string) => {
         onRemoveFile?.(fileName)
-        handleOnClickTab(Object.keys(files)[Object.keys(files).length - 1])
+        if (fileName === selectedFileName) {
+            const index = Object.keys(files).indexOf(fileName) - 1
+            if (index >= 0) {
+                handleOnClickTab(Object.keys(files)[index])
+            } else {
+                handleOnClickTab(Object.keys(files)[1])
+            }
+        }
     }
 
     useEffect(() => {
@@ -133,9 +137,9 @@ const FileSelector: React.FC<FileSelectorProps> = ({
                         value={item}
                         active={selectedFileName == item}
                         creating={creating}
-                        readonly={
-                            readonly || readonlyFiles.includes(item) || MAIN_FILE_NAME == item
-                        }
+                        readonly={readonly || notRemovableFiles.includes(item)}
+                        hasEditing={hasEditing}
+                        setHasEditing={setHasEditing}
                         onValidate={handleOnValidateTab}
                         onOk={(name) => handleOnSaveTab(name, item)}
                         onCancel={handleOnCancel}
diff --git a/src/components/ReactPlayground/CodeEditor/index.tsx b/src/components/ReactPlayground/CodeEditor/index.tsx
index 0952284..a59640c 100644
--- a/src/components/ReactPlayground/CodeEditor/index.tsx
+++ b/src/components/ReactPlayground/CodeEditor/index.tsx
@@ -1,20 +1,23 @@
-import React, { useState } from 'react'
+import React from 'react'
+import _ from 'lodash'
+import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared'
+import { fileNameToLanguage } from '@/components/ReactPlayground/utils'
 import FileSelector from '@/components/ReactPlayground/CodeEditor/FileSelector'
 import Editor from '@/components/ReactPlayground/CodeEditor/Editor'
-import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared.ts'
-import FitFullscreen from '@/components/common/FitFullscreen.tsx'
-import FlexBox from '@/components/common/FlexBox.tsx'
-import _ from 'lodash'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import FlexBox from '@/components/common/FlexBox'
 
 interface CodeEditorProps {
     theme: ITheme
     files: IFiles
     readonly?: boolean
     readonlyFiles?: string[]
+    notRemovable?: string[]
     selectedFileName: string
     options?: IEditorOptions
     onSelectedFileChange?: (fileName: string) => void
     onRemoveFile?: (fileName: string, files: IFiles) => void
+    onRenameFile?: (newFileName: string, oldFileName: string, files: IFiles) => void
 }
 
 const CodeEditor: React.FC<CodeEditorProps> = ({
@@ -22,9 +25,11 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     files,
     readonly,
     readonlyFiles,
+    notRemovable,
     options,
     onSelectedFileChange,
     onRemoveFile,
+    onRenameFile,
     ...props
 }) => {
     const [selectedFileName, setSelectedFileName] = useState(props.selectedFileName)
@@ -43,6 +48,24 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
         onRemoveFile?.(fileName, clone)
     }
 
+    const handleOnUpdateFileName = (newFileName: string, oldFileName: string) => {
+        if (!files[oldFileName] || !newFileName) {
+            return
+        }
+
+        const { [oldFileName]: value, ...rest } = files
+        const newFile: IFiles = {
+            [newFileName]: {
+                ...value,
+                language: fileNameToLanguage(newFileName),
+                name: newFileName
+            }
+        }
+        const newFiles: IFiles = { ...rest, ...newFile }
+
+        onRenameFile?.(newFileName, oldFileName, newFiles)
+    }
+
     return (
         <>
             <FitFullscreen>
@@ -50,18 +73,20 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                     <FileSelector
                         files={files}
                         readonly={readonly}
-                        readonlyFiles={readonlyFiles}
+                        notRemovableFiles={notRemovable}
                         selectedFileName={
                             onSelectedFileChange ? props.selectedFileName : selectedFileName
                         }
                         onChange={handleOnChangeSelectedFile}
                         onRemoveFile={handleOnRemoveFile}
+                        onUpdateFileName={handleOnUpdateFileName}
                     />
                     <Editor
                         theme={theme}
                         selectedFileName={selectedFileName}
                         files={files}
                         options={options}
+                        readonly={readonly || readonlyFiles?.includes(selectedFileName)}
                     />
                 </FlexBox>
             </FitFullscreen>
diff --git a/src/components/ReactPlayground/shared.ts b/src/components/ReactPlayground/shared.ts
index 02fee27..0c7354e 100644
--- a/src/components/ReactPlayground/shared.ts
+++ b/src/components/ReactPlayground/shared.ts
@@ -1,7 +1,7 @@
 import React from 'react'
 import { editor } from 'monaco-editor'
 
-export type ILanguage = 'javascript' | 'typescript' | 'json' | 'css'
+export type ILanguage = 'javascript' | 'typescript' | 'json' | 'css' | 'xml'
 
 export interface IFile {
     name: string
diff --git a/src/components/ReactPlayground/utils.ts b/src/components/ReactPlayground/utils.ts
index 95b5a90..38ac84a 100644
--- a/src/components/ReactPlayground/utils.ts
+++ b/src/components/ReactPlayground/utils.ts
@@ -116,5 +116,6 @@ export const fileNameToLanguage = (name: string): ILanguage => {
     if (['ts', 'tsx'].includes(suffix)) return 'typescript'
     if (['json'].includes(suffix)) return 'json'
     if (['css'].includes(suffix)) return 'css'
+    if (['svg'].includes(suffix)) return 'xml'
     return 'javascript'
 }
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index 974ce4c..008cc53 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -5,25 +5,53 @@ import { IFiles } from '@/components/ReactPlayground/shared.ts'
 
 const OnlineEditor: React.FC = () => {
     const [files, setFiles] = useState<IFiles>({
-        abc: {
+        ['App.tsx']: {
             name: 'App.tsx',
             language: fileNameToLanguage('App.tsx'),
             value: 'const a = () => {}'
         },
+        ['App.css']: {
+            name: 'App.css',
+            language: fileNameToLanguage('App.css'),
+            value: '.title {}'
+        },
         cde: {
             name: 'App.css',
             language: fileNameToLanguage('App.css'),
             value: '.title {}'
+        },
+        def: {
+            name: 'App.css',
+            language: fileNameToLanguage('App.css'),
+            value: '.title {}'
+        },
+        efg: {
+            name: 'App.css',
+            language: fileNameToLanguage('App.css'),
+            value: '.title {}'
+        },
+        fgh: {
+            name: 'App.css',
+            language: fileNameToLanguage('App.css'),
+            value: '.title {}'
+        },
+        ghi: {
+            name: 'App.css',
+            language: fileNameToLanguage('App.css'),
+            value: '.title {}'
         }
     })
 
     return (
         <>
             <CodeEditor
-                theme={'light'}
+                theme={'vs-dark'}
                 files={files}
-                selectedFileName={'abc'}
+                selectedFileName={'App.css'}
+                notRemovable={['App.css']}
+                readonlyFiles={['App.tsx']}
                 onRemoveFile={(_, files) => setFiles(files)}
+                onRenameFile={(_, __, files) => setFiles(files)}
             />
         </>
     )

From 3ec95ee8a47dbce39baf079ed8881323ffbc5af9 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 9 Jan 2024 10:47:32 +0800
Subject: [PATCH 161/307] Finish CodeEditor

---
 .../CodeEditor/Editor/index.tsx               |   2 +-
 .../CodeEditor/FileSelector/Item.tsx          |   7 +-
 .../FileSelector/file-selector.scss           |  39 ++++++-
 .../CodeEditor/FileSelector/index.tsx         |  65 ++++++++---
 .../CodeEditor/code-editor.scss               |   5 +
 .../ReactPlayground/CodeEditor/index.tsx      |  45 +++++++-
 src/components/ReactPlayground/Playground.tsx |  75 ------------
 src/components/ReactPlayground/Provider.tsx   |  95 ---------------
 src/components/ReactPlayground/files.ts       |  85 +++++++++++++-
 src/components/ReactPlayground/index.tsx      |  14 +--
 src/components/ReactPlayground/utils.ts       | 108 +-----------------
 src/pages/OnlineEditor.tsx                    |  11 +-
 12 files changed, 224 insertions(+), 327 deletions(-)
 create mode 100644 src/components/ReactPlayground/CodeEditor/code-editor.scss
 delete mode 100644 src/components/ReactPlayground/Playground.tsx
 delete mode 100644 src/components/ReactPlayground/Provider.tsx

diff --git a/src/components/ReactPlayground/CodeEditor/Editor/index.tsx b/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
index c3887bf..6eb1a40 100644
--- a/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
+++ b/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
@@ -3,7 +3,7 @@ import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
 import '@/components/ReactPlayground/CodeEditor/Editor/editor.scss'
 import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared'
-import { fileNameToLanguage } from '@/components/ReactPlayground/utils'
+import { fileNameToLanguage } from '@/components/ReactPlayground/files'
 import { useEditor, useTypesProgress } from '@/components/ReactPlayground/CodeEditor/Editor/hooks'
 import { MonacoEditorConfig } from '@/components/ReactPlayground/CodeEditor/Editor/monacoConfig'
 
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx b/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx
index bcb447c..209c245 100644
--- a/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx
+++ b/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 
 interface ItemProps {
+    className?: string
     readonly?: boolean
     creating?: boolean
     value: string
@@ -15,6 +16,7 @@ interface ItemProps {
 }
 
 const Item: React.FC<ItemProps> = ({
+    className,
     readonly = false,
     value,
     active = false,
@@ -105,7 +107,10 @@ const Item: React.FC<ItemProps> = ({
     }, [])
 
     return (
-        <div className={`tab-item${active ? ' active' : ''}`} onClick={handleOnClick}>
+        <div
+            className={`tab-item${active ? ' active' : ''}${className ? ` ${className}` : ''}`}
+            onClick={handleOnClick}
+        >
             {creating ? (
                 <div className={'tab-item-input'}>
                     <input
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss b/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss
index 5ed521f..a1a0ecd 100644
--- a/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss
+++ b/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss
@@ -1,13 +1,45 @@
 [data-component=playground-file-selector].tab{
   display: flex;
-  flex-direction: row;
-  gap: 1px;
-  padding: 4px 20px 0 20px;
+  flex: 0 0 auto;
+  height: 40px;
+
+  .multiple {
+    flex: 1;
+    width: 0;
+
+    .tab-content {
+      height: 40px;
+      align-items: flex-end;
+      gap: 2px;
+      margin-left: 10px;
+
+      .tab-item-add {
+        padding: 0 12px;
+      }
+
+      .tabs-margin-right {
+        height: 100%;
+
+        > * {
+          height: 100%;
+          width: 10px;
+        }
+      }
+    }
+  }
+
+  .sticky {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: flex-end;
+    margin-right: 10px;
+  }
 
   .tab-item {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex: 0 0 auto;
     height: 30px;
     padding: 0 20px;
     border: 1px solid #f0f0f0;
@@ -50,4 +82,5 @@
       border-bottom: none;
     }
   }
+
 }
\ No newline at end of file
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx b/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
index 3eee08a..701075d 100644
--- a/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
@@ -3,6 +3,8 @@ import '@/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss'
 import { IFiles } from '@/components/ReactPlayground/shared'
 import { ENTRY_FILE_NAME, IMPORT_MAP_FILE_NAME } from '@/components/ReactPlayground/files'
 import Item from '@/components/ReactPlayground/CodeEditor/FileSelector/Item'
+import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
+import FlexBox from '@/components/common/FlexBox'
 
 interface FileSelectorProps {
     files?: IFiles
@@ -27,6 +29,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     onUpdateFileName,
     selectedFileName = ''
 }) => {
+    const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const [tabs, setTabs] = useState<string[]>([])
     const [creating, setCreating] = useState(false)
     const [hasEditing, setHasEditing] = useState(false)
@@ -47,6 +50,9 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     const addTab = () => {
         setTabs([...tabs, getMaxSequenceTabName(tabs)])
         setCreating(true)
+        setTimeout(() => {
+            hideScrollbarRef.current?.scrollRight(1000)
+        })
     }
 
     const handleOnCancel = () => {
@@ -126,27 +132,48 @@ const FileSelector: React.FC<FileSelectorProps> = ({
 
     return (
         <>
-            <div
-                data-component={'playground-file-selector'}
-                className={'tab'}
-                style={{ flex: '0 0 auto' }}
-            >
-                {tabs.map((item, index) => (
+            <div data-component={'playground-file-selector'} className={'tab'}>
+                <div className={'multiple'}>
+                    <HideScrollbar ref={hideScrollbarRef}>
+                        <FlexBox direction={'horizontal'} className={'tab-content'}>
+                            {tabs.map((item, index) => (
+                                <Item
+                                    key={index + item}
+                                    value={item}
+                                    active={selectedFileName === item}
+                                    creating={creating}
+                                    readonly={readonly || notRemovableFiles.includes(item)}
+                                    hasEditing={hasEditing}
+                                    setHasEditing={setHasEditing}
+                                    onValidate={handleOnValidateTab}
+                                    onOk={(name) => handleOnSaveTab(name, item)}
+                                    onCancel={handleOnCancel}
+                                    onRemove={handleOnRemove}
+                                    onClick={() => handleOnClickTab(item)}
+                                />
+                            ))}
+                            {!readonly && (
+                                <Item
+                                    className={'tab-item-add'}
+                                    value={'+'}
+                                    onClick={addTab}
+                                    readonly
+                                />
+                            )}
+                            <div className={'tabs-margin-right'}>
+                                <div />
+                            </div>
+                        </FlexBox>
+                    </HideScrollbar>
+                </div>
+                <div className={'sticky'}>
                     <Item
-                        key={index + item}
-                        value={item}
-                        active={selectedFileName == item}
-                        creating={creating}
-                        readonly={readonly || notRemovableFiles.includes(item)}
-                        hasEditing={hasEditing}
-                        setHasEditing={setHasEditing}
-                        onValidate={handleOnValidateTab}
-                        onOk={(name) => handleOnSaveTab(name, item)}
-                        onCancel={handleOnCancel}
-                        onRemove={handleOnRemove}
-                        onClick={() => handleOnClickTab(item)}
+                        value={'Import Map'}
+                        active={selectedFileName === IMPORT_MAP_FILE_NAME}
+                        onClick={editImportMap}
+                        readonly
                     />
-                ))}
+                </div>
             </div>
         </>
     )
diff --git a/src/components/ReactPlayground/CodeEditor/code-editor.scss b/src/components/ReactPlayground/CodeEditor/code-editor.scss
new file mode 100644
index 0000000..9ff6eaf
--- /dev/null
+++ b/src/components/ReactPlayground/CodeEditor/code-editor.scss
@@ -0,0 +1,5 @@
+[data-component=playground-code-editor] {
+  section {
+    height: 0 !important;
+  }
+}
\ No newline at end of file
diff --git a/src/components/ReactPlayground/CodeEditor/index.tsx b/src/components/ReactPlayground/CodeEditor/index.tsx
index a59640c..7c9f8e2 100644
--- a/src/components/ReactPlayground/CodeEditor/index.tsx
+++ b/src/components/ReactPlayground/CodeEditor/index.tsx
@@ -1,14 +1,15 @@
 import React from 'react'
 import _ from 'lodash'
+import '@/components/ReactPlayground/CodeEditor/code-editor.scss'
 import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared'
-import { fileNameToLanguage } from '@/components/ReactPlayground/utils'
+import { fileNameToLanguage } from '@/components/ReactPlayground/files'
 import FileSelector from '@/components/ReactPlayground/CodeEditor/FileSelector'
 import Editor from '@/components/ReactPlayground/CodeEditor/Editor'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 
 interface CodeEditorProps {
-    theme: ITheme
+    theme?: ITheme
     files: IFiles
     readonly?: boolean
     readonlyFiles?: string[]
@@ -16,8 +17,10 @@ interface CodeEditorProps {
     selectedFileName: string
     options?: IEditorOptions
     onSelectedFileChange?: (fileName: string) => void
+    onAddFile?: (fileName: string, files: IFiles) => void
     onRemoveFile?: (fileName: string, files: IFiles) => void
     onRenameFile?: (newFileName: string, oldFileName: string, files: IFiles) => void
+    onChangeFileContent?: (content: string, fileName: string, files: IFiles) => void
 }
 
 const CodeEditor: React.FC<CodeEditorProps> = ({
@@ -28,8 +31,10 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     notRemovable,
     options,
     onSelectedFileChange,
+    onAddFile,
     onRemoveFile,
     onRenameFile,
+    onChangeFileContent,
     ...props
 }) => {
     const [selectedFileName, setSelectedFileName] = useState(props.selectedFileName)
@@ -48,6 +53,17 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
         onRemoveFile?.(fileName, clone)
     }
 
+    const handleOnAddFile = (fileName: string) => {
+        const clone = _.cloneDeep(files)
+        clone[fileName] = {
+            name: fileName,
+            language: fileNameToLanguage(fileName),
+            value: ''
+        }
+        onAddFile?.(fileName, clone)
+        handleOnChangeSelectedFile(fileName)
+    }
+
     const handleOnUpdateFileName = (newFileName: string, oldFileName: string) => {
         if (!files[oldFileName] || !newFileName) {
             return
@@ -66,9 +82,19 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
         onRenameFile?.(newFileName, oldFileName, newFiles)
     }
 
+    const handleOnChangeFileContent = (code = '') => {
+        const clone = _.cloneDeep(files)
+        clone[onSelectedFileChange ? props.selectedFileName : selectedFileName].value = code ?? ''
+        onChangeFileContent?.(
+            code,
+            onSelectedFileChange ? props.selectedFileName : selectedFileName,
+            clone
+        )
+    }
+
     return (
         <>
-            <FitFullscreen>
+            <FitFullscreen data-component={'playground-code-editor'}>
                 <FlexBox style={{ height: '100%' }}>
                     <FileSelector
                         files={files}
@@ -80,13 +106,22 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                         onChange={handleOnChangeSelectedFile}
                         onRemoveFile={handleOnRemoveFile}
                         onUpdateFileName={handleOnUpdateFileName}
+                        onAddFile={handleOnAddFile}
                     />
                     <Editor
                         theme={theme}
-                        selectedFileName={selectedFileName}
+                        selectedFileName={
+                            onSelectedFileChange ? props.selectedFileName : selectedFileName
+                        }
                         files={files}
                         options={options}
-                        readonly={readonly || readonlyFiles?.includes(selectedFileName)}
+                        readonly={
+                            readonly ||
+                            readonlyFiles?.includes(
+                                onSelectedFileChange ? props.selectedFileName : selectedFileName
+                            )
+                        }
+                        onChange={handleOnChangeFileContent}
                     />
                 </FlexBox>
             </FitFullscreen>
diff --git a/src/components/ReactPlayground/Playground.tsx b/src/components/ReactPlayground/Playground.tsx
deleted file mode 100644
index 12780bb..0000000
--- a/src/components/ReactPlayground/Playground.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
-import React from 'react'
-import { IPlayground } from '@/components/ReactPlayground/shared.ts'
-import { PlaygroundContext } from '@/components/ReactPlayground/Provider.tsx'
-import { ENTRY_FILE_NAME, initFiles, MAIN_FILE_NAME } from '@/components/files.ts'
-import {
-    getCustomActiveFile,
-    getMergedCustomFiles,
-    getPlaygroundTheme
-} from '@/components/ReactPlayground/utils.ts'
-
-const defaultCodeSandboxOptions = {
-    theme: 'dark',
-    editorHeight: '100vh',
-    showUrlHash: true
-}
-
-const Playground: React.FC<IPlayground> = (props) => {
-    const {
-        width = '100vw',
-        height = '100vh',
-        theme,
-        files: propsFiles,
-        importMap,
-        showCompileOutput = true,
-        showHeader = true,
-        showFileSelector = true,
-        fileSelectorReadOnly = false,
-        border = false,
-        defaultSizes,
-        onFilesChange,
-        autorun = true
-    } = props
-    const { filesHash, changeTheme, files, setFiles, setSelectedFileName } =
-        useContext(PlaygroundContext)
-    const options = Object.assign(defaultCodeSandboxOptions, props.options || {})
-
-    useEffect(() => {
-        if (propsFiles && !propsFiles?.[MAIN_FILE_NAME]) {
-            throw new Error(
-                `Missing required property : '${MAIN_FILE_NAME}' is a mandatory property for 'files'`
-            )
-        } else if (propsFiles) {
-            const newFiles = getMergedCustomFiles(propsFiles, importMap)
-            if (newFiles) {
-                setFiles(newFiles)
-            }
-            const selectedFileName = getCustomActiveFile(propsFiles)
-            if (selectedFileName) {
-                setSelectedFileName(selectedFileName)
-            }
-        }
-    }, [propsFiles])
-
-    useEffect(() => {
-        setTimeout(() => {
-            if (!theme) {
-                changeTheme(getPlaygroundTheme())
-            } else {
-                changeTheme(theme)
-            }
-        }, 15)
-    }, [theme])
-
-    useEffect(() => {
-        if (!propsFiles) {
-            setFiles(initFiles)
-        }
-    }, [])
-
-    return files[ENTRY_FILE_NAME] ? <div></div> : undefined
-}
-
-export default Playground
-*/
diff --git a/src/components/ReactPlayground/Provider.tsx b/src/components/ReactPlayground/Provider.tsx
deleted file mode 100644
index 71b11e5..0000000
--- a/src/components/ReactPlayground/Provider.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react'
-import { IFiles, IPlaygroundContext, ITheme } from '@/components/ReactPlayground/shared.ts'
-import { MAIN_FILE_NAME } from '@/components/ReactPlayground/files.ts'
-import {
-    fileNameToLanguage,
-    setPlaygroundTheme,
-    strToBase64
-} from '@/components/ReactPlayground/utils.ts'
-
-const initialContext: Partial<IPlaygroundContext> = {
-    selectedFileName: MAIN_FILE_NAME
-}
-
-export const PlaygroundContext = createContext<IPlaygroundContext>(
-    initialContext as IPlaygroundContext
-)
-
-interface ProviderProps extends React.PropsWithChildren {
-    saveOnUrl?: boolean
-}
-
-const Provider: React.FC<ProviderProps> = ({ children, saveOnUrl }) => {
-    const [files, setFiles] = useState<IFiles>({})
-    const [theme, setTheme] = useState(initialContext.theme!)
-    const [selectedFileName, setSelectedFileName] = useState(initialContext.selectedFileName!)
-    const [filesHash, setFilesHash] = useState('')
-
-    const addFile = (name: string) => {
-        files[name] = {
-            name,
-            language: fileNameToLanguage(name),
-            value: ''
-        }
-        setFiles({ ...files })
-    }
-
-    const removeFile = (name: string) => {
-        delete files[name]
-        setFiles({ ...files })
-    }
-
-    const changeFileName = (oldFileName: string, newFileName: string) => {
-        if (!files[oldFileName] || !newFileName) {
-            return
-        }
-
-        const { [oldFileName]: value, ...other } = files
-        const newFile: IFiles = {
-            [newFileName]: {
-                ...value,
-                language: fileNameToLanguage(newFileName),
-                name: newFileName
-            }
-        }
-        setFiles({
-            ...other,
-            ...newFile
-        })
-    }
-
-    const changeTheme = (theme: ITheme) => {
-        setPlaygroundTheme(theme)
-        setTheme(theme)
-    }
-
-    useEffect(() => {
-        const hash = strToBase64(JSON.stringify(files))
-        if (saveOnUrl) {
-            window.location.hash = hash
-        }
-        setFilesHash(hash)
-    }, [files])
-
-    return (
-        <PlaygroundContext.Provider
-            value={{
-                theme,
-                filesHash,
-                files,
-                selectedFileName,
-                setTheme,
-                changeTheme,
-                setSelectedFileName,
-                setFiles,
-                addFile,
-                removeFile,
-                changeFileName
-            }}
-        >
-            {children}
-        </PlaygroundContext.Provider>
-    )
-}
-
-export default Provider
diff --git a/src/components/ReactPlayground/files.ts b/src/components/ReactPlayground/files.ts
index 338df8d..c3d37c3 100644
--- a/src/components/ReactPlayground/files.ts
+++ b/src/components/ReactPlayground/files.ts
@@ -1,15 +1,15 @@
+import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
 import importMap from '@/components/ReactPlayground/template/import-map.json?raw'
 import AppCss from '@/components/ReactPlayground/template/src/App.css?raw'
 import App from '@/components/ReactPlayground/template/src/App.tsx?raw'
 import main from '@/components/ReactPlayground/template/src/main.tsx?raw'
-import { IFiles } from '@/components/ReactPlayground/shared'
-import { base64ToStr } from '@/components/ReactPlayground/utils.ts'
+import { ICustomFiles, IFiles, IImportMap } from '@/components/ReactPlayground/shared'
 
 export const MAIN_FILE_NAME = 'App.tsx'
 export const IMPORT_MAP_FILE_NAME = 'import-map.json'
 export const ENTRY_FILE_NAME = 'main.tsx'
 
-const fileNameToLanguage = (name: string) => {
+export const fileNameToLanguage = (name: string) => {
     const suffix = name.split('.').pop() || ''
     if (['js', 'jsx'].includes(suffix)) return 'javascript'
     if (['ts', 'tsx'].includes(suffix)) return 'typescript'
@@ -18,12 +18,87 @@ const fileNameToLanguage = (name: string) => {
     return 'javascript'
 }
 
-const getFilesFromUrl = () => {
+export const strToBase64 = (str: string) => {
+    const buffer = strToU8(str)
+    const zipped = zlibSync(buffer, { level: 9 })
+    const binary = strFromU8(zipped, true)
+    return btoa(binary)
+}
+
+export const base64ToStr = (base64: string) => {
+    const binary = atob(base64)
+
+    // zlib header (x78), level 9 (xDA)
+    if (binary.startsWith('\x78\xDA')) {
+        const buffer = strToU8(binary, true)
+        const unzipped = unzlibSync(buffer)
+        return strFromU8(unzipped)
+    }
+
+    return ''
+}
+
+const transformCustomFiles = (files: ICustomFiles) => {
+    const newFiles: IFiles = {}
+    Object.keys(files).forEach((key) => {
+        const tempFile = files[key]
+        if (typeof tempFile === 'string') {
+            newFiles[key] = {
+                name: key,
+                language: fileNameToLanguage(key),
+                value: tempFile
+            }
+        } else {
+            newFiles[key] = {
+                name: key,
+                language: fileNameToLanguage(key),
+                value: tempFile.code,
+                hidden: tempFile.hidden,
+                active: tempFile.active
+            }
+        }
+    })
+
+    return newFiles
+}
+
+export const getCustomActiveFile = (files?: ICustomFiles) => {
+    if (!files) return null
+    return Object.keys(files).find((key) => {
+        const tempFile = files[key]
+        if (typeof tempFile !== 'string' && tempFile.active) {
+            return key
+        }
+        return null
+    })
+}
+
+export const getMergedCustomFiles = (files?: ICustomFiles, importMap?: IImportMap) => {
+    if (!files) return null
+    if (importMap) {
+        return {
+            ...reactTemplateFiles,
+            ...transformCustomFiles(files),
+            [IMPORT_MAP_FILE_NAME]: {
+                name: IMPORT_MAP_FILE_NAME,
+                language: 'json',
+                value: JSON.stringify(importMap, null, 2)
+            }
+        }
+    } else {
+        return {
+            ...reactTemplateFiles,
+            ...transformCustomFiles(files)
+        }
+    }
+}
+
+export const getFilesFromUrl = () => {
     let files: IFiles | undefined
     try {
         if (typeof window !== 'undefined') {
             const hash = window.location.hash
-            if (hash) files = JSON.parse(base64ToStr(hash?.split('#')[1]))
+            if (hash) files = JSON.parse(base64ToStr(hash?.split('#')[1])) as IFiles
         }
     } catch (error) {
         console.error(error)
diff --git a/src/components/ReactPlayground/index.tsx b/src/components/ReactPlayground/index.tsx
index f417e64..853cfea 100644
--- a/src/components/ReactPlayground/index.tsx
+++ b/src/components/ReactPlayground/index.tsx
@@ -1,16 +1,8 @@
 import React from 'react'
-import Provider from '@/components/ReactPlayground/Provider.tsx'
-import { IPlayground } from '@/components/ReactPlayground/shared.ts'
-import Playground from '@/components/ReactPlayground/Playground.tsx'
+import { IPlayground } from '@/components/ReactPlayground/shared'
 
-const ReactPlayground: React.FC<IPlayground> = (props) => {
-    return (
-        <>
-            <Provider saveOnUrl={props.saveOnUrl}>
-                <Playground {...props} />
-            </Provider>
-        </>
-    )
+const ReactPlayground: React.FC<IPlayground> = () => {
+    return <></>
 }
 
 export default ReactPlayground
diff --git a/src/components/ReactPlayground/utils.ts b/src/components/ReactPlayground/utils.ts
index 38ac84a..fc87e25 100644
--- a/src/components/ReactPlayground/utils.ts
+++ b/src/components/ReactPlayground/utils.ts
@@ -1,32 +1,4 @@
-import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
-import {
-    ICustomFiles,
-    IFiles,
-    IImportMap,
-    ILanguage,
-    ITheme
-} from '@/components/ReactPlayground/shared'
-import { IMPORT_MAP_FILE_NAME, reactTemplateFiles } from '@/components/ReactPlayground/files'
-
-export const strToBase64 = (str: string) => {
-    const buffer = strToU8(str)
-    const zipped = zlibSync(buffer, { level: 9 })
-    const binary = strFromU8(zipped, true)
-    return btoa(binary)
-}
-
-export const base64ToStr = (base64: string) => {
-    const binary = atob(base64)
-
-    // zlib header (x78), level 9 (xDA)
-    if (binary.startsWith('\x78\xDA')) {
-        const buffer = strToU8(binary, true)
-        const unzipped = unzlibSync(buffer)
-        return strFromU8(unzipped)
-    }
-
-    return ''
-}
+import { ITheme } from '@/components/ReactPlayground/shared'
 
 const STORAGE_DARK_THEME = 'react-playground-prefer-dark'
 
@@ -41,81 +13,3 @@ export const getPlaygroundTheme = (): ITheme => {
     const isDarkTheme = JSON.parse(localStorage.getItem(STORAGE_DARK_THEME) || 'false') as ITheme
     return isDarkTheme ? 'vs-dark' : 'light'
 }
-
-const transformCustomFiles = (files: ICustomFiles) => {
-    const newFiles: IFiles = {}
-    Object.keys(files).forEach((key) => {
-        const tempFile = files[key]
-        if (typeof tempFile === 'string') {
-            newFiles[key] = {
-                name: key,
-                language: fileNameToLanguage(key),
-                value: tempFile
-            }
-        } else {
-            newFiles[key] = {
-                name: key,
-                language: fileNameToLanguage(key),
-                value: tempFile.code,
-                hidden: tempFile.hidden,
-                active: tempFile.active
-            }
-        }
-    })
-
-    return newFiles
-}
-
-export const getCustomActiveFile = (files?: ICustomFiles) => {
-    if (!files) return null
-    return Object.keys(files).find((key) => {
-        const tempFile = files[key]
-        if (typeof tempFile !== 'string' && tempFile.active) {
-            return key
-        }
-        return null
-    })
-}
-
-export const getMergedCustomFiles = (files?: ICustomFiles, importMap?: IImportMap) => {
-    if (!files) return null
-    if (importMap) {
-        return {
-            ...reactTemplateFiles,
-            ...transformCustomFiles(files),
-            [IMPORT_MAP_FILE_NAME]: {
-                name: IMPORT_MAP_FILE_NAME,
-                language: 'json',
-                value: JSON.stringify(importMap, null, 2)
-            }
-        }
-    } else {
-        return {
-            ...reactTemplateFiles,
-            ...transformCustomFiles(files)
-        }
-    }
-}
-
-export const getFilesFromUrl = () => {
-    let files: IFiles | undefined
-    try {
-        if (typeof window !== 'undefined') {
-            const hash = window.location.hash
-            if (hash) files = JSON.parse(base64ToStr(hash?.split('#')[1])) as IFiles
-        }
-    } catch (error) {
-        console.error(error)
-    }
-    return files
-}
-
-export const fileNameToLanguage = (name: string): ILanguage => {
-    const suffix = name.split('.').pop() || ''
-    if (['js', 'jsx'].includes(suffix)) return 'javascript'
-    if (['ts', 'tsx'].includes(suffix)) return 'typescript'
-    if (['json'].includes(suffix)) return 'json'
-    if (['css'].includes(suffix)) return 'css'
-    if (['svg'].includes(suffix)) return 'xml'
-    return 'javascript'
-}
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index 008cc53..342e781 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 import CodeEditor from '@/components/ReactPlayground/CodeEditor'
-import { fileNameToLanguage } from '@/components/ReactPlayground/utils.ts'
-import { IFiles } from '@/components/ReactPlayground/shared.ts'
+import { fileNameToLanguage } from '@/components/ReactPlayground/files'
+import { IFiles } from '@/components/ReactPlayground/shared'
 
 const OnlineEditor: React.FC = () => {
     const [files, setFiles] = useState<IFiles>({
@@ -45,13 +45,14 @@ const OnlineEditor: React.FC = () => {
     return (
         <>
             <CodeEditor
-                theme={'vs-dark'}
                 files={files}
                 selectedFileName={'App.css'}
-                notRemovable={['App.css']}
+                notRemovable={['App.css', 'fgh']}
                 readonlyFiles={['App.tsx']}
+                onAddFile={(_, files) => setFiles(files)}
                 onRemoveFile={(_, files) => setFiles(files)}
                 onRenameFile={(_, __, files) => setFiles(files)}
+                onChangeFileContent={(_, __, files) => setFiles(files)}
             />
         </>
     )

From 087b63261012621329ad2bad2f71037cf93bbfce Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 9 Jan 2024 11:42:11 +0800
Subject: [PATCH 162/307] Optimize CodeEditor

---
 .../CodeEditor/FileSelector/index.tsx         | 35 +++++++++-------
 .../ReactPlayground/CodeEditor/index.tsx      |  6 ++-
 src/pages/OnlineEditor.tsx                    | 42 +------------------
 3 files changed, 26 insertions(+), 57 deletions(-)

diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx b/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
index 701075d..fd90ed9 100644
--- a/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
@@ -120,14 +120,15 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     }
 
     useEffect(() => {
-        Object.keys(files).length &&
-            setTabs(
-                Object.keys(files).filter(
-                    (item) =>
-                        ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) &&
-                        !files[item].hidden
-                )
-            )
+        Object.keys(files).length
+            ? setTabs(
+                  Object.keys(files).filter(
+                      (item) =>
+                          ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) &&
+                          !files[item].hidden
+                  )
+              )
+            : setTabs([])
     }, [files])
 
     return (
@@ -166,14 +167,16 @@ const FileSelector: React.FC<FileSelectorProps> = ({
                         </FlexBox>
                     </HideScrollbar>
                 </div>
-                <div className={'sticky'}>
-                    <Item
-                        value={'Import Map'}
-                        active={selectedFileName === IMPORT_MAP_FILE_NAME}
-                        onClick={editImportMap}
-                        readonly
-                    />
-                </div>
+                {files[IMPORT_MAP_FILE_NAME] && (
+                    <div className={'sticky'}>
+                        <Item
+                            value={'Import Map'}
+                            active={selectedFileName === IMPORT_MAP_FILE_NAME}
+                            onClick={editImportMap}
+                            readonly
+                        />
+                    </div>
+                )}
             </div>
         </>
     )
diff --git a/src/components/ReactPlayground/CodeEditor/index.tsx b/src/components/ReactPlayground/CodeEditor/index.tsx
index 7c9f8e2..41c7d74 100644
--- a/src/components/ReactPlayground/CodeEditor/index.tsx
+++ b/src/components/ReactPlayground/CodeEditor/index.tsx
@@ -83,6 +83,9 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     }
 
     const handleOnChangeFileContent = (code = '') => {
+        if (!files[onSelectedFileChange ? props.selectedFileName : selectedFileName]) {
+            return
+        }
         const clone = _.cloneDeep(files)
         clone[onSelectedFileChange ? props.selectedFileName : selectedFileName].value = code ?? ''
         onChangeFileContent?.(
@@ -119,7 +122,8 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                             readonly ||
                             readonlyFiles?.includes(
                                 onSelectedFileChange ? props.selectedFileName : selectedFileName
-                            )
+                            ) ||
+                            !files[onSelectedFileChange ? props.selectedFileName : selectedFileName]
                         }
                         onChange={handleOnChangeFileContent}
                     />
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index 342e781..b90d258 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,54 +1,16 @@
 import React from 'react'
 import CodeEditor from '@/components/ReactPlayground/CodeEditor'
-import { fileNameToLanguage } from '@/components/ReactPlayground/files'
+import { initFiles } from '@/components/ReactPlayground/files'
 import { IFiles } from '@/components/ReactPlayground/shared'
 
 const OnlineEditor: React.FC = () => {
-    const [files, setFiles] = useState<IFiles>({
-        ['App.tsx']: {
-            name: 'App.tsx',
-            language: fileNameToLanguage('App.tsx'),
-            value: 'const a = () => {}'
-        },
-        ['App.css']: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        },
-        cde: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        },
-        def: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        },
-        efg: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        },
-        fgh: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        },
-        ghi: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        }
-    })
+    const [files, setFiles] = useState<IFiles>(initFiles)
 
     return (
         <>
             <CodeEditor
                 files={files}
                 selectedFileName={'App.css'}
-                notRemovable={['App.css', 'fgh']}
-                readonlyFiles={['App.tsx']}
                 onAddFile={(_, files) => setFiles(files)}
                 onRemoveFile={(_, files) => setFiles(files)}
                 onRenameFile={(_, __, files) => setFiles(files)}

From f9d0cc2611062befa2531539af47562952d3bfc6 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 9 Jan 2024 11:47:00 +0800
Subject: [PATCH 163/307] Rename ReactPlayground to Playground

---
 .../CodeEditor/Editor/ata.ts                           |  0
 .../CodeEditor/Editor/editor.scss                      |  0
 .../CodeEditor/Editor/hooks.ts                         |  2 +-
 .../CodeEditor/Editor/index.tsx                        | 10 +++++-----
 .../CodeEditor/Editor/monacoConfig.ts                  |  0
 .../CodeEditor/FileSelector/Item.tsx                   |  0
 .../CodeEditor/FileSelector/file-selector.scss         |  0
 .../CodeEditor/FileSelector/index.tsx                  |  8 ++++----
 .../CodeEditor/code-editor.scss                        |  0
 .../CodeEditor/index.tsx                               | 10 +++++-----
 .../{ReactPlayground => Playground}/files.ts           | 10 +++++-----
 .../{ReactPlayground => Playground}/index.tsx          |  2 +-
 .../{ReactPlayground => Playground}/shared.ts          |  0
 .../template/.eslintrc.cjs                             |  0
 .../template/.gitignore                                |  0
 .../{ReactPlayground => Playground}/template/README.md |  0
 .../template/import-map.json                           |  0
 .../template/index.html                                |  0
 .../template/package.json                              |  0
 .../template/public/vite.svg                           |  0
 .../template/src/App.css                               |  0
 .../template/src/App.tsx                               |  0
 .../template/src/main.tsx                              |  0
 .../template/tsconfig.json                             |  0
 .../template/tsconfig.node.json                        |  0
 .../template/vite.config.js                            |  0
 .../{ReactPlayground => Playground}/utils.ts           |  2 +-
 src/pages/OnlineEditor.tsx                             |  6 +++---
 28 files changed, 25 insertions(+), 25 deletions(-)
 rename src/components/{ReactPlayground => Playground}/CodeEditor/Editor/ata.ts (100%)
 rename src/components/{ReactPlayground => Playground}/CodeEditor/Editor/editor.scss (100%)
 rename src/components/{ReactPlayground => Playground}/CodeEditor/Editor/hooks.ts (97%)
 rename src/components/{ReactPlayground => Playground}/CodeEditor/Editor/index.tsx (88%)
 rename src/components/{ReactPlayground => Playground}/CodeEditor/Editor/monacoConfig.ts (100%)
 rename src/components/{ReactPlayground => Playground}/CodeEditor/FileSelector/Item.tsx (100%)
 rename src/components/{ReactPlayground => Playground}/CodeEditor/FileSelector/file-selector.scss (100%)
 rename src/components/{ReactPlayground => Playground}/CodeEditor/FileSelector/index.tsx (96%)
 rename src/components/{ReactPlayground => Playground}/CodeEditor/code-editor.scss (100%)
 rename src/components/{ReactPlayground => Playground}/CodeEditor/index.tsx (92%)
 rename src/components/{ReactPlayground => Playground}/files.ts (90%)
 rename src/components/{ReactPlayground => Playground}/index.tsx (66%)
 rename src/components/{ReactPlayground => Playground}/shared.ts (100%)
 rename src/components/{ReactPlayground => Playground}/template/.eslintrc.cjs (100%)
 rename src/components/{ReactPlayground => Playground}/template/.gitignore (100%)
 rename src/components/{ReactPlayground => Playground}/template/README.md (100%)
 rename src/components/{ReactPlayground => Playground}/template/import-map.json (100%)
 rename src/components/{ReactPlayground => Playground}/template/index.html (100%)
 rename src/components/{ReactPlayground => Playground}/template/package.json (100%)
 rename src/components/{ReactPlayground => Playground}/template/public/vite.svg (100%)
 rename src/components/{ReactPlayground => Playground}/template/src/App.css (100%)
 rename src/components/{ReactPlayground => Playground}/template/src/App.tsx (100%)
 rename src/components/{ReactPlayground => Playground}/template/src/main.tsx (100%)
 rename src/components/{ReactPlayground => Playground}/template/tsconfig.json (100%)
 rename src/components/{ReactPlayground => Playground}/template/tsconfig.node.json (100%)
 rename src/components/{ReactPlayground => Playground}/template/vite.config.js (100%)
 rename src/components/{ReactPlayground => Playground}/utils.ts (89%)

diff --git a/src/components/ReactPlayground/CodeEditor/Editor/ata.ts b/src/components/Playground/CodeEditor/Editor/ata.ts
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/Editor/ata.ts
rename to src/components/Playground/CodeEditor/Editor/ata.ts
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/editor.scss b/src/components/Playground/CodeEditor/Editor/editor.scss
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/Editor/editor.scss
rename to src/components/Playground/CodeEditor/Editor/editor.scss
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts b/src/components/Playground/CodeEditor/Editor/hooks.ts
similarity index 97%
rename from src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
rename to src/components/Playground/CodeEditor/Editor/hooks.ts
index 7535cc7..b1f591f 100644
--- a/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
+++ b/src/components/Playground/CodeEditor/Editor/hooks.ts
@@ -2,7 +2,7 @@ import { editor, IPosition, Selection } from 'monaco-editor'
 import ScrollType = editor.ScrollType
 import { Monaco } from '@monaco-editor/react'
 import { getWorker, MonacoJsxSyntaxHighlight } from 'monaco-jsx-syntax-highlight'
-import { createATA, TypeHelper } from '@/components/ReactPlayground/CodeEditor/Editor/ata'
+import { createATA, TypeHelper } from '@/components/Playground/CodeEditor/Editor/ata'
 
 export const useEditor = () => {
     const doOpenEditor = (
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx
similarity index 88%
rename from src/components/ReactPlayground/CodeEditor/Editor/index.tsx
rename to src/components/Playground/CodeEditor/Editor/index.tsx
index 6eb1a40..aef15e8 100644
--- a/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
-import '@/components/ReactPlayground/CodeEditor/Editor/editor.scss'
-import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared'
-import { fileNameToLanguage } from '@/components/ReactPlayground/files'
-import { useEditor, useTypesProgress } from '@/components/ReactPlayground/CodeEditor/Editor/hooks'
-import { MonacoEditorConfig } from '@/components/ReactPlayground/CodeEditor/Editor/monacoConfig'
+import '@/components/Playground/CodeEditor/Editor/editor.scss'
+import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
+import { fileNameToLanguage } from '@/components/Playground/files'
+import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks'
+import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
 
 interface EditorProps {
     files?: IFiles
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts b/src/components/Playground/CodeEditor/Editor/monacoConfig.ts
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts
rename to src/components/Playground/CodeEditor/Editor/monacoConfig.ts
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx
rename to src/components/Playground/CodeEditor/FileSelector/Item.tsx
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss b/src/components/Playground/CodeEditor/FileSelector/file-selector.scss
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss
rename to src/components/Playground/CodeEditor/FileSelector/file-selector.scss
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
similarity index 96%
rename from src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
rename to src/components/Playground/CodeEditor/FileSelector/index.tsx
index fd90ed9..5dc817e 100644
--- a/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import '@/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss'
-import { IFiles } from '@/components/ReactPlayground/shared'
-import { ENTRY_FILE_NAME, IMPORT_MAP_FILE_NAME } from '@/components/ReactPlayground/files'
-import Item from '@/components/ReactPlayground/CodeEditor/FileSelector/Item'
+import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
+import { IFiles } from '@/components/Playground/shared'
+import { ENTRY_FILE_NAME, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
+import Item from '@/components/Playground/CodeEditor/FileSelector/Item'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 
diff --git a/src/components/ReactPlayground/CodeEditor/code-editor.scss b/src/components/Playground/CodeEditor/code-editor.scss
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/code-editor.scss
rename to src/components/Playground/CodeEditor/code-editor.scss
diff --git a/src/components/ReactPlayground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
similarity index 92%
rename from src/components/ReactPlayground/CodeEditor/index.tsx
rename to src/components/Playground/CodeEditor/index.tsx
index 41c7d74..8e7b635 100644
--- a/src/components/ReactPlayground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import _ from 'lodash'
-import '@/components/ReactPlayground/CodeEditor/code-editor.scss'
-import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared'
-import { fileNameToLanguage } from '@/components/ReactPlayground/files'
-import FileSelector from '@/components/ReactPlayground/CodeEditor/FileSelector'
-import Editor from '@/components/ReactPlayground/CodeEditor/Editor'
+import '@/components/Playground/CodeEditor/code-editor.scss'
+import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
+import { fileNameToLanguage } from '@/components/Playground/files'
+import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
+import Editor from '@/components/Playground/CodeEditor/Editor'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 
diff --git a/src/components/ReactPlayground/files.ts b/src/components/Playground/files.ts
similarity index 90%
rename from src/components/ReactPlayground/files.ts
rename to src/components/Playground/files.ts
index c3d37c3..0f90245 100644
--- a/src/components/ReactPlayground/files.ts
+++ b/src/components/Playground/files.ts
@@ -1,9 +1,9 @@
 import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
-import importMap from '@/components/ReactPlayground/template/import-map.json?raw'
-import AppCss from '@/components/ReactPlayground/template/src/App.css?raw'
-import App from '@/components/ReactPlayground/template/src/App.tsx?raw'
-import main from '@/components/ReactPlayground/template/src/main.tsx?raw'
-import { ICustomFiles, IFiles, IImportMap } from '@/components/ReactPlayground/shared'
+import importMap from '@/components/Playground/template/import-map.json?raw'
+import AppCss from '@/components/Playground/template/src/App.css?raw'
+import App from '@/components/Playground/template/src/App.tsx?raw'
+import main from '@/components/Playground/template/src/main.tsx?raw'
+import { ICustomFiles, IFiles, IImportMap } from '@/components/Playground/shared'
 
 export const MAIN_FILE_NAME = 'App.tsx'
 export const IMPORT_MAP_FILE_NAME = 'import-map.json'
diff --git a/src/components/ReactPlayground/index.tsx b/src/components/Playground/index.tsx
similarity index 66%
rename from src/components/ReactPlayground/index.tsx
rename to src/components/Playground/index.tsx
index 853cfea..7e7694c 100644
--- a/src/components/ReactPlayground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { IPlayground } from '@/components/ReactPlayground/shared'
+import { IPlayground } from '@/components/Playground/shared'
 
 const ReactPlayground: React.FC<IPlayground> = () => {
     return <></>
diff --git a/src/components/ReactPlayground/shared.ts b/src/components/Playground/shared.ts
similarity index 100%
rename from src/components/ReactPlayground/shared.ts
rename to src/components/Playground/shared.ts
diff --git a/src/components/ReactPlayground/template/.eslintrc.cjs b/src/components/Playground/template/.eslintrc.cjs
similarity index 100%
rename from src/components/ReactPlayground/template/.eslintrc.cjs
rename to src/components/Playground/template/.eslintrc.cjs
diff --git a/src/components/ReactPlayground/template/.gitignore b/src/components/Playground/template/.gitignore
similarity index 100%
rename from src/components/ReactPlayground/template/.gitignore
rename to src/components/Playground/template/.gitignore
diff --git a/src/components/ReactPlayground/template/README.md b/src/components/Playground/template/README.md
similarity index 100%
rename from src/components/ReactPlayground/template/README.md
rename to src/components/Playground/template/README.md
diff --git a/src/components/ReactPlayground/template/import-map.json b/src/components/Playground/template/import-map.json
similarity index 100%
rename from src/components/ReactPlayground/template/import-map.json
rename to src/components/Playground/template/import-map.json
diff --git a/src/components/ReactPlayground/template/index.html b/src/components/Playground/template/index.html
similarity index 100%
rename from src/components/ReactPlayground/template/index.html
rename to src/components/Playground/template/index.html
diff --git a/src/components/ReactPlayground/template/package.json b/src/components/Playground/template/package.json
similarity index 100%
rename from src/components/ReactPlayground/template/package.json
rename to src/components/Playground/template/package.json
diff --git a/src/components/ReactPlayground/template/public/vite.svg b/src/components/Playground/template/public/vite.svg
similarity index 100%
rename from src/components/ReactPlayground/template/public/vite.svg
rename to src/components/Playground/template/public/vite.svg
diff --git a/src/components/ReactPlayground/template/src/App.css b/src/components/Playground/template/src/App.css
similarity index 100%
rename from src/components/ReactPlayground/template/src/App.css
rename to src/components/Playground/template/src/App.css
diff --git a/src/components/ReactPlayground/template/src/App.tsx b/src/components/Playground/template/src/App.tsx
similarity index 100%
rename from src/components/ReactPlayground/template/src/App.tsx
rename to src/components/Playground/template/src/App.tsx
diff --git a/src/components/ReactPlayground/template/src/main.tsx b/src/components/Playground/template/src/main.tsx
similarity index 100%
rename from src/components/ReactPlayground/template/src/main.tsx
rename to src/components/Playground/template/src/main.tsx
diff --git a/src/components/ReactPlayground/template/tsconfig.json b/src/components/Playground/template/tsconfig.json
similarity index 100%
rename from src/components/ReactPlayground/template/tsconfig.json
rename to src/components/Playground/template/tsconfig.json
diff --git a/src/components/ReactPlayground/template/tsconfig.node.json b/src/components/Playground/template/tsconfig.node.json
similarity index 100%
rename from src/components/ReactPlayground/template/tsconfig.node.json
rename to src/components/Playground/template/tsconfig.node.json
diff --git a/src/components/ReactPlayground/template/vite.config.js b/src/components/Playground/template/vite.config.js
similarity index 100%
rename from src/components/ReactPlayground/template/vite.config.js
rename to src/components/Playground/template/vite.config.js
diff --git a/src/components/ReactPlayground/utils.ts b/src/components/Playground/utils.ts
similarity index 89%
rename from src/components/ReactPlayground/utils.ts
rename to src/components/Playground/utils.ts
index fc87e25..5cfabc2 100644
--- a/src/components/ReactPlayground/utils.ts
+++ b/src/components/Playground/utils.ts
@@ -1,4 +1,4 @@
-import { ITheme } from '@/components/ReactPlayground/shared'
+import { ITheme } from '@/components/Playground/shared'
 
 const STORAGE_DARK_THEME = 'react-playground-prefer-dark'
 
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index b90d258..e4c44d4 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import CodeEditor from '@/components/ReactPlayground/CodeEditor'
-import { initFiles } from '@/components/ReactPlayground/files'
-import { IFiles } from '@/components/ReactPlayground/shared'
+import CodeEditor from '@/components/Playground/CodeEditor'
+import { initFiles } from '@/components/Playground/files'
+import { IFiles } from '@/components/Playground/shared'
 
 const OnlineEditor: React.FC = () => {
     const [files, setFiles] = useState<IFiles>(initFiles)

From d98fd522cf5e95802dbd47b4f16f345e417bd41d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 9 Jan 2024 14:53:55 +0800
Subject: [PATCH 164/307] Optimize CodeEditor

---
 .../CodeEditor/FileSelector/index.tsx         | 20 ++++-
 .../Playground/CodeEditor/code-editor.scss    | 13 +++-
 .../Playground/CodeEditor/index.tsx           | 78 +++++++++++--------
 src/components/Playground/files.ts            | 57 +-------------
 src/components/Playground/shared.ts           | 62 ---------------
 5 files changed, 73 insertions(+), 157 deletions(-)

diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index 5dc817e..b32547d 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -48,6 +48,10 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     }
 
     const addTab = () => {
+        if (hasEditing) {
+            return
+        }
+
         setTabs([...tabs, getMaxSequenceTabName(tabs)])
         setCreating(true)
         setTimeout(() => {
@@ -74,6 +78,10 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     }
 
     const editImportMap = () => {
+        if (hasEditing) {
+            return
+        }
+
         onChange?.(IMPORT_MAP_FILE_NAME)
     }
 
@@ -104,17 +112,23 @@ const FileSelector: React.FC<FileSelectorProps> = ({
             return false
         }
 
+        onError?.('')
+
         return true
     }
 
     const handleOnRemove = (fileName: string) => {
         onRemoveFile?.(fileName)
         if (fileName === selectedFileName) {
-            const index = Object.keys(files).indexOf(fileName) - 1
+            const keys = Object.keys(files).filter(
+                (item) =>
+                    ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) && !files[item].hidden
+            )
+            const index = keys.indexOf(fileName) - 1
             if (index >= 0) {
-                handleOnClickTab(Object.keys(files)[index])
+                handleOnClickTab(keys[index])
             } else {
-                handleOnClickTab(Object.keys(files)[1])
+                handleOnClickTab(keys[1])
             }
         }
     }
diff --git a/src/components/Playground/CodeEditor/code-editor.scss b/src/components/Playground/CodeEditor/code-editor.scss
index 9ff6eaf..d8da64c 100644
--- a/src/components/Playground/CodeEditor/code-editor.scss
+++ b/src/components/Playground/CodeEditor/code-editor.scss
@@ -1,5 +1,14 @@
 [data-component=playground-code-editor] {
-  section {
-    height: 0 !important;
+  width: 100%;
+  height: 100%;
+
+  .playground-code-editor-message {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    background-color: #FF4D4FAA;
+    padding: 5px 10px;
+    font-size: 1.6em;
   }
 }
\ No newline at end of file
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index 8e7b635..97991a5 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -5,7 +5,6 @@ import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
 import { fileNameToLanguage } from '@/components/Playground/files'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
 import Editor from '@/components/Playground/CodeEditor/Editor'
-import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 
 interface CodeEditorProps {
@@ -21,6 +20,7 @@ interface CodeEditorProps {
     onRemoveFile?: (fileName: string, files: IFiles) => void
     onRenameFile?: (newFileName: string, oldFileName: string, files: IFiles) => void
     onChangeFileContent?: (content: string, fileName: string, files: IFiles) => void
+    onError?: (msg: string) => void
 }
 
 const CodeEditor: React.FC<CodeEditorProps> = ({
@@ -35,9 +35,11 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     onRemoveFile,
     onRenameFile,
     onChangeFileContent,
+    onError,
     ...props
 }) => {
     const [selectedFileName, setSelectedFileName] = useState(props.selectedFileName)
+    const [errorMsg, setErrorMsg] = useState('')
 
     const handleOnChangeSelectedFile = (fileName: string) => {
         if (onSelectedFileChange) {
@@ -82,7 +84,15 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
         onRenameFile?.(newFileName, oldFileName, newFiles)
     }
 
-    const handleOnChangeFileContent = (code = '') => {
+    const handleOnError = (msg: string) => {
+        if (onError) {
+            onError(msg)
+        } else {
+            setErrorMsg(msg)
+        }
+    }
+
+    const handleOnChangeFileContent = _.debounce((code = '') => {
         if (!files[onSelectedFileChange ? props.selectedFileName : selectedFileName]) {
             return
         }
@@ -93,42 +103,42 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
             onSelectedFileChange ? props.selectedFileName : selectedFileName,
             clone
         )
-    }
+    }, 250)
 
     return (
         <>
-            <FitFullscreen data-component={'playground-code-editor'}>
-                <FlexBox style={{ height: '100%' }}>
-                    <FileSelector
-                        files={files}
-                        readonly={readonly}
-                        notRemovableFiles={notRemovable}
-                        selectedFileName={
+            <FlexBox data-component={'playground-code-editor'}>
+                <FileSelector
+                    files={files}
+                    readonly={readonly}
+                    notRemovableFiles={notRemovable}
+                    selectedFileName={
+                        onSelectedFileChange ? props.selectedFileName : selectedFileName
+                    }
+                    onChange={handleOnChangeSelectedFile}
+                    onRemoveFile={handleOnRemoveFile}
+                    onUpdateFileName={handleOnUpdateFileName}
+                    onAddFile={handleOnAddFile}
+                    onError={handleOnError}
+                />
+                <Editor
+                    theme={theme}
+                    selectedFileName={
+                        onSelectedFileChange ? props.selectedFileName : selectedFileName
+                    }
+                    files={files}
+                    options={options}
+                    readonly={
+                        readonly ||
+                        readonlyFiles?.includes(
                             onSelectedFileChange ? props.selectedFileName : selectedFileName
-                        }
-                        onChange={handleOnChangeSelectedFile}
-                        onRemoveFile={handleOnRemoveFile}
-                        onUpdateFileName={handleOnUpdateFileName}
-                        onAddFile={handleOnAddFile}
-                    />
-                    <Editor
-                        theme={theme}
-                        selectedFileName={
-                            onSelectedFileChange ? props.selectedFileName : selectedFileName
-                        }
-                        files={files}
-                        options={options}
-                        readonly={
-                            readonly ||
-                            readonlyFiles?.includes(
-                                onSelectedFileChange ? props.selectedFileName : selectedFileName
-                            ) ||
-                            !files[onSelectedFileChange ? props.selectedFileName : selectedFileName]
-                        }
-                        onChange={handleOnChangeFileContent}
-                    />
-                </FlexBox>
-            </FitFullscreen>
+                        ) ||
+                        !files[onSelectedFileChange ? props.selectedFileName : selectedFileName]
+                    }
+                    onChange={handleOnChangeFileContent}
+                />
+                {errorMsg && <div className={'playground-code-editor-message'}>{errorMsg}</div>}
+            </FlexBox>
         </>
     )
 }
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index 0f90245..c1d441c 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -3,7 +3,7 @@ import importMap from '@/components/Playground/template/import-map.json?raw'
 import AppCss from '@/components/Playground/template/src/App.css?raw'
 import App from '@/components/Playground/template/src/App.tsx?raw'
 import main from '@/components/Playground/template/src/main.tsx?raw'
-import { ICustomFiles, IFiles, IImportMap } from '@/components/Playground/shared'
+import { IFiles } from '@/components/Playground/shared'
 
 export const MAIN_FILE_NAME = 'App.tsx'
 export const IMPORT_MAP_FILE_NAME = 'import-map.json'
@@ -38,61 +38,6 @@ export const base64ToStr = (base64: string) => {
     return ''
 }
 
-const transformCustomFiles = (files: ICustomFiles) => {
-    const newFiles: IFiles = {}
-    Object.keys(files).forEach((key) => {
-        const tempFile = files[key]
-        if (typeof tempFile === 'string') {
-            newFiles[key] = {
-                name: key,
-                language: fileNameToLanguage(key),
-                value: tempFile
-            }
-        } else {
-            newFiles[key] = {
-                name: key,
-                language: fileNameToLanguage(key),
-                value: tempFile.code,
-                hidden: tempFile.hidden,
-                active: tempFile.active
-            }
-        }
-    })
-
-    return newFiles
-}
-
-export const getCustomActiveFile = (files?: ICustomFiles) => {
-    if (!files) return null
-    return Object.keys(files).find((key) => {
-        const tempFile = files[key]
-        if (typeof tempFile !== 'string' && tempFile.active) {
-            return key
-        }
-        return null
-    })
-}
-
-export const getMergedCustomFiles = (files?: ICustomFiles, importMap?: IImportMap) => {
-    if (!files) return null
-    if (importMap) {
-        return {
-            ...reactTemplateFiles,
-            ...transformCustomFiles(files),
-            [IMPORT_MAP_FILE_NAME]: {
-                name: IMPORT_MAP_FILE_NAME,
-                language: 'json',
-                value: JSON.stringify(importMap, null, 2)
-            }
-        }
-    } else {
-        return {
-            ...reactTemplateFiles,
-            ...transformCustomFiles(files)
-        }
-    }
-}
-
 export const getFilesFromUrl = () => {
     let files: IFiles | undefined
     try {
diff --git a/src/components/Playground/shared.ts b/src/components/Playground/shared.ts
index 0c7354e..dfcde1e 100644
--- a/src/components/Playground/shared.ts
+++ b/src/components/Playground/shared.ts
@@ -1,4 +1,3 @@
-import React from 'react'
 import { editor } from 'monaco-editor'
 
 export type ILanguage = 'javascript' | 'typescript' | 'json' | 'css' | 'xml'
@@ -7,7 +6,6 @@ export interface IFile {
     name: string
     value: string
     language: ILanguage
-    active?: boolean
     hidden?: boolean
 }
 
@@ -17,64 +15,4 @@ export interface IFiles {
 
 export type ITheme = 'light' | 'vs-dark'
 
-export type IImportMap = { imports: Record<string, string> }
-
-export interface ICustomFiles {
-    [key: string]:
-        | string
-        | {
-              code: string
-              active?: boolean
-              hidden?: boolean
-          }
-}
 export type IEditorOptions = editor.IStandaloneEditorConstructionOptions
-export interface IEditorContainer {
-    showFileSelector?: boolean
-    fileSelectorReadOnly?: boolean
-    options?: IEditorOptions
-}
-
-export interface IOutput {
-    showCompileOutput?: boolean
-}
-
-export interface ISplitPane {
-    children?: React.ReactNode[]
-    defaultSizes?: number[]
-}
-
-export type IPlayground = {
-    width?: string | number
-    height?: string | number
-    theme?: ITheme
-    importMap?: IImportMap
-    files?: ICustomFiles
-    options?: {
-        lineNumbers?: boolean
-        fontSize?: number
-        tabSize?: number
-    }
-    showHeader?: boolean
-    border?: boolean
-    onFilesChange?: (url: string) => void
-    saveOnUrl?: boolean
-    autorun?: boolean
-    // recompileDelay
-} & Omit<IEditorContainer, 'options'> &
-    IOutput &
-    ISplitPane
-
-export interface IPlaygroundContext {
-    files: IFiles
-    filesHash: string
-    theme: ITheme
-    selectedFileName: string
-    setSelectedFileName: (fileName: string) => void
-    setTheme: (theme: ITheme) => void
-    setFiles: (files: IFiles) => void
-    addFile: (fileName: string) => void
-    removeFile: (fileName: string) => void
-    changeFileName: (oldFieldName: string, newFieldName: string) => void
-    changeTheme: (theme: ITheme) => void
-}

From d802844516c3c9da8c0d25adf032d23de6c3150f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 9 Jan 2024 16:03:22 +0800
Subject: [PATCH 165/307] Optimize CodeEditor

---
 .../Playground/CodeEditor/Editor/index.tsx    |  1 +
 .../Playground/CodeEditor/Editor/loader.ts    |  7 +++++
 .../Playground/CodeEditor/index.tsx           | 30 ++++++++++++-------
 src/pages/OnlineEditor.tsx                    |  1 -
 4 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Playground/CodeEditor/Editor/loader.ts

diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx
index aef15e8..7186f81 100644
--- a/src/components/Playground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
 import '@/components/Playground/CodeEditor/Editor/editor.scss'
+import '@/components/Playground/CodeEditor/Editor/loader'
 import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
 import { fileNameToLanguage } from '@/components/Playground/files'
 import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks'
diff --git a/src/components/Playground/CodeEditor/Editor/loader.ts b/src/components/Playground/CodeEditor/Editor/loader.ts
new file mode 100644
index 0000000..c568b2c
--- /dev/null
+++ b/src/components/Playground/CodeEditor/Editor/loader.ts
@@ -0,0 +1,7 @@
+import { loader } from '@monaco-editor/react'
+
+loader.config({
+    paths: {
+        vs: 'https://unpkg.com/monaco-editor@0.45.0/min/vs'
+    }
+})
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index 97991a5..6014a5a 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -2,7 +2,11 @@ import React from 'react'
 import _ from 'lodash'
 import '@/components/Playground/CodeEditor/code-editor.scss'
 import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
-import { fileNameToLanguage } from '@/components/Playground/files'
+import {
+    ENTRY_FILE_NAME,
+    fileNameToLanguage,
+    IMPORT_MAP_FILE_NAME
+} from '@/components/Playground/files'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
 import Editor from '@/components/Playground/CodeEditor/Editor'
 import FlexBox from '@/components/common/FlexBox'
@@ -13,7 +17,7 @@ interface CodeEditorProps {
     readonly?: boolean
     readonlyFiles?: string[]
     notRemovable?: string[]
-    selectedFileName: string
+    selectedFileName?: string
     options?: IEditorOptions
     onSelectedFileChange?: (fileName: string) => void
     onAddFile?: (fileName: string, files: IFiles) => void
@@ -38,7 +42,12 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     onError,
     ...props
 }) => {
-    const [selectedFileName, setSelectedFileName] = useState(props.selectedFileName)
+    const filteredFilesName = Object.keys(files).filter(
+        (item) => ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) && !files[item].hidden
+    )
+    const propsSelectedFileName =
+        props.selectedFileName ?? (filteredFilesName.length ? filteredFilesName[0] : '')
+    const [selectedFileName, setSelectedFileName] = useState(propsSelectedFileName)
     const [errorMsg, setErrorMsg] = useState('')
 
     const handleOnChangeSelectedFile = (fileName: string) => {
@@ -93,14 +102,14 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     }
 
     const handleOnChangeFileContent = _.debounce((code = '') => {
-        if (!files[onSelectedFileChange ? props.selectedFileName : selectedFileName]) {
+        if (!files[onSelectedFileChange ? propsSelectedFileName : selectedFileName]) {
             return
         }
         const clone = _.cloneDeep(files)
-        clone[onSelectedFileChange ? props.selectedFileName : selectedFileName].value = code ?? ''
+        clone[onSelectedFileChange ? propsSelectedFileName : selectedFileName].value = code ?? ''
         onChangeFileContent?.(
             code,
-            onSelectedFileChange ? props.selectedFileName : selectedFileName,
+            onSelectedFileChange ? propsSelectedFileName : selectedFileName,
             clone
         )
     }, 250)
@@ -113,7 +122,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                     readonly={readonly}
                     notRemovableFiles={notRemovable}
                     selectedFileName={
-                        onSelectedFileChange ? props.selectedFileName : selectedFileName
+                        onSelectedFileChange ? propsSelectedFileName : selectedFileName
                     }
                     onChange={handleOnChangeSelectedFile}
                     onRemoveFile={handleOnRemoveFile}
@@ -124,18 +133,19 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                 <Editor
                     theme={theme}
                     selectedFileName={
-                        onSelectedFileChange ? props.selectedFileName : selectedFileName
+                        onSelectedFileChange ? propsSelectedFileName : selectedFileName
                     }
                     files={files}
                     options={options}
                     readonly={
                         readonly ||
                         readonlyFiles?.includes(
-                            onSelectedFileChange ? props.selectedFileName : selectedFileName
+                            onSelectedFileChange ? propsSelectedFileName : selectedFileName
                         ) ||
-                        !files[onSelectedFileChange ? props.selectedFileName : selectedFileName]
+                        !files[onSelectedFileChange ? propsSelectedFileName : selectedFileName]
                     }
                     onChange={handleOnChangeFileContent}
+                    onJumpFile={handleOnChangeSelectedFile}
                 />
                 {errorMsg && <div className={'playground-code-editor-message'}>{errorMsg}</div>}
             </FlexBox>
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index e4c44d4..1f45a3c 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -10,7 +10,6 @@ const OnlineEditor: React.FC = () => {
         <>
             <CodeEditor
                 files={files}
-                selectedFileName={'App.css'}
                 onAddFile={(_, files) => setFiles(files)}
                 onRemoveFile={(_, files) => setFiles(files)}
                 onRenameFile={(_, __, files) => setFiles(files)}

From e846c2808281c0cf6506bca155ede43c1ee5c60e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 9 Jan 2024 17:50:59 +0800
Subject: [PATCH 166/307] Add loading to editor

---
 .../Playground/CodeEditor/Editor/editor.scss  | 113 +++++++++++++-----
 .../Playground/CodeEditor/Editor/index.tsx    |  35 +++---
 src/components/Playground/index.tsx           |   3 +-
 3 files changed, 104 insertions(+), 47 deletions(-)

diff --git a/src/components/Playground/CodeEditor/Editor/editor.scss b/src/components/Playground/CodeEditor/Editor/editor.scss
index c72555d..e9f66a6 100644
--- a/src/components/Playground/CodeEditor/Editor/editor.scss
+++ b/src/components/Playground/CodeEditor/Editor/editor.scss
@@ -1,43 +1,98 @@
-.monaco-editor-light {
-  height: 100%;
-  overflow: hidden;
-  background-color: var(--border);
-
-  .jsx-tag-angle-bracket {
-    color: #800000;
+@mixin keyframes($animationName) {
+  @-webkit-keyframes #{$animationName} {
+    @content
   }
-
-  .jsx-text {
-    color: #000;
+  @-moz-keyframes #{$animationName} {
+    @content
   }
-
-  .jsx-tag-name {
-    color: #800000;
+  @-o-keyframes #{$animationName} {
+    @content
   }
-
-  .jsx-tag-attribute-key {
-    color: #f00;
+  @keyframes #{$animationName} {
+    @content
   }
 }
 
-.monaco-editor-vs-dark {
-  height: 100%;
-  overflow: hidden;
-  background-color: var(--border);
+@mixin unique-keyframes {
+  $animationName: unique-id();
+  animation-name: $animationName;
+  @include keyframes($animationName) {
+    @content
+  }
+}
 
-  .jsx-tag-angle-bracket {
-    color: #808080;
+[data-component=playground-code-editor-editor] {
+  position: relative;
+  height: 0;
+
+  .monaco-editor-light {
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--border);
+
+    .jsx-tag-angle-bracket {
+      color: #800000;
+    }
+
+    .jsx-text {
+      color: #000;
+    }
+
+    .jsx-tag-name {
+      color: #800000;
+    }
+
+    .jsx-tag-attribute-key {
+      color: #f00;
+    }
   }
 
-  .jsx-text {
-    color: #d4d4d4;
+  .monaco-editor-vs-dark {
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--border);
+
+    .jsx-tag-angle-bracket {
+      color: #808080;
+    }
+
+    .jsx-text {
+      color: #d4d4d4;
+    }
+
+    .jsx-tag-name {
+      color: #569cd6;
+    }
+
+    .jsx-tag-attribute-key {
+      color: #9cdcfe;
+    }
   }
 
-  .jsx-tag-name {
-    color: #569cd6;
-  }
+  .playground-code-editor-loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 4px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: {
+      top: 2px #666 solid;
+      bottom: 2px #ddd solid;
+      left: 2px #ddd solid;
+      right: 2px #ddd solid;
+    };
+    animation: .6s linear infinite;
 
-  .jsx-tag-attribute-key {
-    color: #9cdcfe;
+    @include unique-keyframes {
+      0% {
+        transform: rotateZ(0);
+      }
+
+      100% {
+        transform: rotateZ(360deg);
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx
index 7186f81..96e5a54 100644
--- a/src/components/Playground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -36,7 +36,7 @@ const Editor: React.FC<EditorProps> = ({
         highlighter: () => undefined,
         dispose: () => undefined
     })
-    const { onWatch } = useTypesProgress()
+    const { total, finished, onWatch } = useTypesProgress()
     const file = files[selectedFileName] ?? { name: 'Untitled' }
 
     const handleOnEditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
@@ -87,21 +87,24 @@ const Editor: React.FC<EditorProps> = ({
 
     return (
         <>
-            <MonacoEditor
-                theme={theme}
-                path={file.name}
-                className={`monaco-editor-${theme ?? 'light'}`}
-                language={file.language}
-                value={file.value}
-                onChange={onChange}
-                onMount={handleOnEditorDidMount}
-                options={{
-                    ...MonacoEditorConfig,
-                    ...options,
-                    theme: undefined,
-                    readOnly: readonly
-                }}
-            />
+            <div data-component={'playground-code-editor-editor'}>
+                <MonacoEditor
+                    theme={theme}
+                    path={file.name}
+                    className={`monaco-editor-${theme ?? 'light'}`}
+                    language={file.language}
+                    value={file.value}
+                    onChange={onChange}
+                    onMount={handleOnEditorDidMount}
+                    options={{
+                        ...MonacoEditorConfig,
+                        ...options,
+                        theme: undefined,
+                        readOnly: readonly
+                    }}
+                />
+                {total > 0 && !finished && <div className={'playground-code-editor-loading'} />}
+            </div>
         </>
     )
 }
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index 7e7694c..c041da6 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-import { IPlayground } from '@/components/Playground/shared'
 
-const ReactPlayground: React.FC<IPlayground> = () => {
+const ReactPlayground: React.FC = () => {
     return <></>
 }
 

From 71052009aec6f1cc43e594d6a04f3e4429befefa Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 10 Jan 2024 18:15:17 +0800
Subject: [PATCH 167/307] Add compiler

---
 package-lock.json                           | 14 +++-
 package.json                                |  1 +
 src/components/Playground/Preview/index.tsx | 78 +++++++++++++++++++++
 src/components/Playground/compiler.ts       | 30 ++++++++
 src/components/Playground/files.ts          | 36 +++++++++-
 src/pages/OnlineEditor.tsx                  | 22 ++++--
 6 files changed, 172 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Playground/Preview/index.tsx
 create mode 100644 src/components/Playground/compiler.ts

diff --git a/package-lock.json b/package-lock.json
index 93cb57b..5e6af34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "axios": "^1.6.2",
         "dayjs": "^1.11.10",
         "echarts": "^5.4.3",
+        "esbuild-wasm": "^0.19.11",
         "fast-deep-equal": "^3.1.3",
         "fflate": "^0.8.1",
         "jwt-decode": "^4.0.0",
@@ -2228,7 +2229,7 @@
       "resolved": "https://registry.npmmirror.com/@typescript/ata/-/ata-0.9.4.tgz",
       "integrity": "sha512-PaJ16WouPV/SaA+c0tnOKIqYq24+m93ipl/e0Dkxuianer+ibc5b0/6ZgfCFF8J7QEp57dySMSP9nWOFaCfJnw==",
       "peerDependencies": {
-        "typescript": "^4.4.4"
+        "typescript": ">=4.4.4 <6.0.0"
       }
     },
     "node_modules/@ungap/structured-clone": {
@@ -3302,6 +3303,17 @@
         "@esbuild/win32-x64": "0.19.8"
       }
     },
+    "node_modules/esbuild-wasm": {
+      "version": "0.19.11",
+      "resolved": "https://registry.npmmirror.com/esbuild-wasm/-/esbuild-wasm-0.19.11.tgz",
+      "integrity": "sha512-MIhnpc1TxERUHomteO/ZZHp+kUawGEc03D/8vMHGzffLvbFLeDe6mwxqEZwlqBNY7SLWbyp6bBQAcCen8+wpjQ==",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
diff --git a/package.json b/package.json
index 9f82e44..6d72dbf 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "axios": "^1.6.2",
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
+    "esbuild-wasm": "^0.19.11",
     "fast-deep-equal": "^3.1.3",
     "fflate": "^0.8.1",
     "jwt-decode": "^4.0.0",
diff --git a/src/components/Playground/Preview/index.tsx b/src/components/Playground/Preview/index.tsx
new file mode 100644
index 0000000..e9473c2
--- /dev/null
+++ b/src/components/Playground/Preview/index.tsx
@@ -0,0 +1,78 @@
+import React, { useRef, useState } from 'react'
+import { IFiles } from '@/components/Playground/shared.ts'
+import { useUpdatedEffect } from '@/util/hooks.tsx'
+import Compiler from '@/components/Playground/compiler.ts'
+import { Loader } from 'esbuild-wasm'
+import { cssToJs, jsonToJs } from '@/components/Playground/files.ts'
+
+interface OutputProps {
+    files: IFiles
+}
+
+const Preview: React.FC<OutputProps> = ({ files }) => {
+    const compiler = useRef<Compiler>()
+    const [compileCode, setCompileCode] = useState('')
+    const [fileName, setFileName] = useState('main.tsx')
+
+    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setFileName(e.target.value)
+    }
+
+    useUpdatedEffect(() => {
+        if (!compiler.current) {
+            compiler.current = new Compiler()
+        }
+    }, [])
+
+    useUpdatedEffect(() => {
+        if (files[fileName]) {
+            try {
+                const file = files[fileName]
+
+                let loader: Loader
+                let code = file.value
+
+                switch (file.language) {
+                    case 'typescript':
+                        loader = 'tsx'
+                        break
+                    case 'javascript':
+                        loader = 'jsx'
+                        break
+                    case 'css':
+                        code = cssToJs(file)
+                        loader = 'js'
+                        break
+                    case 'json':
+                        code = jsonToJs(file)
+                        loader = 'js'
+                        break
+                    case 'xml':
+                        loader = 'default'
+                }
+
+                compiler.current
+                    ?.transform(code, loader)
+                    .then((value) => {
+                        setCompileCode(value.code)
+                    })
+                    .catch((e) => {
+                        console.error('编译失败', e)
+                    })
+            } catch (e) {
+                setCompileCode('')
+            }
+        } else {
+            setCompileCode('')
+        }
+    }, [fileName, files])
+
+    return (
+        <>
+            <AntdInput.TextArea value={compileCode} />
+            <AntdInput value={fileName} onChange={handleOnChange} />
+        </>
+    )
+}
+
+export default Preview
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
new file mode 100644
index 0000000..ece9440
--- /dev/null
+++ b/src/components/Playground/compiler.ts
@@ -0,0 +1,30 @@
+import esbuild, { Loader } from 'esbuild-wasm'
+import wasm from 'esbuild-wasm/esbuild.wasm?url'
+
+class Compiler {
+    private init = false
+
+    constructor() {
+        try {
+            void esbuild.initialize({ worker: true, wasmURL: wasm }).then(() => {
+                this.init = true
+            })
+        } catch (e) {
+            throw e
+        }
+    }
+
+    transform = (code: string, loader: Loader) =>
+        new Promise<boolean>((resolve) => {
+            const timer = setInterval(() => {
+                if (this.init) {
+                    clearInterval(timer)
+                    resolve(true)
+                }
+            }, 100)
+        }).then(() => {
+            return esbuild.transform(code, { loader })
+        })
+}
+
+export default Compiler
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index c1d441c..ab47d75 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -3,7 +3,7 @@ import importMap from '@/components/Playground/template/import-map.json?raw'
 import AppCss from '@/components/Playground/template/src/App.css?raw'
 import App from '@/components/Playground/template/src/App.tsx?raw'
 import main from '@/components/Playground/template/src/main.tsx?raw'
-import { IFiles } from '@/components/Playground/shared'
+import { IFile, IFiles } from '@/components/Playground/shared'
 
 export const MAIN_FILE_NAME = 'App.tsx'
 export const IMPORT_MAP_FILE_NAME = 'import-map.json'
@@ -51,6 +51,40 @@ export const getFilesFromUrl = () => {
     return files
 }
 
+export const getModuleFile = (files: IFiles, moduleName: string) => {
+    let _moduleName = moduleName.split('./').pop() || ''
+    if (!_moduleName.includes('.')) {
+        const realModuleName = Object.keys(files).find((key) =>
+            key.split('.').includes(_moduleName)
+        )
+        if (realModuleName) _moduleName = realModuleName
+    }
+    return files[_moduleName]
+}
+
+export const jsonToJs = (file: IFile) => {
+    const js = `export default ${file.value}`
+    return URL.createObjectURL(new Blob([js], { type: 'application/javascript' }))
+}
+
+export const cssToJs = (file: IFile) => {
+    const randomId = new Date().getTime()
+    const js = `
+                  (() => {
+                    let stylesheet = document.getElementById('style_${randomId}_${file.name}');
+                    if (!stylesheet) {
+                      stylesheet = document.createElement('style')
+                      stylesheet.setAttribute('id', 'style_${randomId}_${file.name}')
+                      document.head.appendChild(stylesheet)
+                    }
+                    const styles = document.createTextNode(\`${file.value}\`)
+                    stylesheet.innerHTML = ''
+                    stylesheet.appendChild(styles)
+                  })()
+                  `
+    return URL.createObjectURL(new Blob([js], { type: 'application/javascript' }))
+}
+
 export const initFiles: IFiles = getFilesFromUrl() || {
     [ENTRY_FILE_NAME]: {
         name: ENTRY_FILE_NAME,
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index 1f45a3c..aacaff1 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -2,19 +2,27 @@ import React from 'react'
 import CodeEditor from '@/components/Playground/CodeEditor'
 import { initFiles } from '@/components/Playground/files'
 import { IFiles } from '@/components/Playground/shared'
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import Preview from '@/components/Playground/Preview'
 
 const OnlineEditor: React.FC = () => {
     const [files, setFiles] = useState<IFiles>(initFiles)
 
     return (
         <>
-            <CodeEditor
-                files={files}
-                onAddFile={(_, files) => setFiles(files)}
-                onRemoveFile={(_, files) => setFiles(files)}
-                onRenameFile={(_, __, files) => setFiles(files)}
-                onChangeFileContent={(_, __, files) => setFiles(files)}
-            />
+            <FitFullscreen>
+                <FlexBox style={{ width: '100%', height: '100%' }} direction={'horizontal'}>
+                    <CodeEditor
+                        files={files}
+                        onAddFile={(_, files) => setFiles(files)}
+                        onRemoveFile={(_, files) => setFiles(files)}
+                        onRenameFile={(_, __, files) => setFiles(files)}
+                        onChangeFileContent={(_, __, files) => setFiles(files)}
+                    />
+                    <Preview files={files} />
+                </FlexBox>
+            </FitFullscreen>
         </>
     )
 }

From 309d5892c74470ec1c16e5f6a1d71bd3dfe2e326 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 10 Jan 2024 23:00:30 +0800
Subject: [PATCH 168/307] Optimize Transform

---
 .../Playground/CodeEditor/Editor/index.tsx    |  2 +-
 .../Playground/CodeEditor/index.tsx           |  2 +-
 src/components/Playground/Preview/index.tsx   | 78 -------------------
 src/components/Playground/Transform/index.tsx | 77 ++++++++++++++++++
 src/components/Playground/compiler.ts         |  4 +-
 src/components/Playground/files.ts            | 40 +++++-----
 src/pages/OnlineEditor.tsx                    | 15 ++--
 7 files changed, 111 insertions(+), 107 deletions(-)
 delete mode 100644 src/components/Playground/Preview/index.tsx
 create mode 100644 src/components/Playground/Transform/index.tsx

diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx
index 96e5a54..35ba545 100644
--- a/src/components/Playground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -37,7 +37,7 @@ const Editor: React.FC<EditorProps> = ({
         dispose: () => undefined
     })
     const { total, finished, onWatch } = useTypesProgress()
-    const file = files[selectedFileName] ?? { name: 'Untitled' }
+    const file = files[selectedFileName] || { name: 'Untitled' }
 
     const handleOnEditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
         editorRef.current = editor
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index 6014a5a..ea269e3 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -46,7 +46,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
         (item) => ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) && !files[item].hidden
     )
     const propsSelectedFileName =
-        props.selectedFileName ?? (filteredFilesName.length ? filteredFilesName[0] : '')
+        props.selectedFileName || (filteredFilesName.length ? filteredFilesName[0] : '')
     const [selectedFileName, setSelectedFileName] = useState(propsSelectedFileName)
     const [errorMsg, setErrorMsg] = useState('')
 
diff --git a/src/components/Playground/Preview/index.tsx b/src/components/Playground/Preview/index.tsx
deleted file mode 100644
index e9473c2..0000000
--- a/src/components/Playground/Preview/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { IFiles } from '@/components/Playground/shared.ts'
-import { useUpdatedEffect } from '@/util/hooks.tsx'
-import Compiler from '@/components/Playground/compiler.ts'
-import { Loader } from 'esbuild-wasm'
-import { cssToJs, jsonToJs } from '@/components/Playground/files.ts'
-
-interface OutputProps {
-    files: IFiles
-}
-
-const Preview: React.FC<OutputProps> = ({ files }) => {
-    const compiler = useRef<Compiler>()
-    const [compileCode, setCompileCode] = useState('')
-    const [fileName, setFileName] = useState('main.tsx')
-
-    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setFileName(e.target.value)
-    }
-
-    useUpdatedEffect(() => {
-        if (!compiler.current) {
-            compiler.current = new Compiler()
-        }
-    }, [])
-
-    useUpdatedEffect(() => {
-        if (files[fileName]) {
-            try {
-                const file = files[fileName]
-
-                let loader: Loader
-                let code = file.value
-
-                switch (file.language) {
-                    case 'typescript':
-                        loader = 'tsx'
-                        break
-                    case 'javascript':
-                        loader = 'jsx'
-                        break
-                    case 'css':
-                        code = cssToJs(file)
-                        loader = 'js'
-                        break
-                    case 'json':
-                        code = jsonToJs(file)
-                        loader = 'js'
-                        break
-                    case 'xml':
-                        loader = 'default'
-                }
-
-                compiler.current
-                    ?.transform(code, loader)
-                    .then((value) => {
-                        setCompileCode(value.code)
-                    })
-                    .catch((e) => {
-                        console.error('编译失败', e)
-                    })
-            } catch (e) {
-                setCompileCode('')
-            }
-        } else {
-            setCompileCode('')
-        }
-    }, [fileName, files])
-
-    return (
-        <>
-            <AntdInput.TextArea value={compileCode} />
-            <AntdInput value={fileName} onChange={handleOnChange} />
-        </>
-    )
-}
-
-export default Preview
diff --git a/src/components/Playground/Transform/index.tsx b/src/components/Playground/Transform/index.tsx
new file mode 100644
index 0000000..796ee64
--- /dev/null
+++ b/src/components/Playground/Transform/index.tsx
@@ -0,0 +1,77 @@
+import React from 'react'
+import MonacoEditor from '@monaco-editor/react'
+import { Loader } from 'esbuild-wasm'
+import { useUpdatedEffect } from '@/util/hooks'
+import { IFile, ITheme } from '@/components/Playground/shared'
+import Compiler from '@/components/Playground/compiler'
+import { cssToJs, jsonToJs } from '@/components/Playground/files'
+import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
+
+interface OutputProps {
+    file: IFile
+    theme?: ITheme
+}
+
+const Preview: React.FC<OutputProps> = ({ file, theme }) => {
+    const compiler = useRef<Compiler>()
+    const [compileCode, setCompileCode] = useState('')
+
+    useUpdatedEffect(() => {
+        if (!compiler.current) {
+            compiler.current = new Compiler()
+        }
+    }, [])
+
+    const compile = (code: string, loader: Loader) => {
+        compiler.current
+            ?.transform(code, loader)
+            .then((value) => {
+                setCompileCode(value.code)
+            })
+            .catch((e) => {
+                console.error('编译失败', e)
+            })
+    }
+
+    useUpdatedEffect(() => {
+        if (file) {
+            try {
+                const code = file.value
+
+                switch (file.language) {
+                    case 'typescript':
+                        compile(code, 'tsx')
+                        break
+                    case 'javascript':
+                        compile(code, 'jsx')
+                        break
+                    case 'css':
+                        setCompileCode(cssToJs(file))
+                        break
+                    case 'json':
+                        setCompileCode(jsonToJs(file))
+                        break
+                    case 'xml':
+                        setCompileCode(code)
+                }
+            } catch (e) {
+                setCompileCode('')
+            }
+        } else {
+            setCompileCode('')
+        }
+    }, [file])
+
+    return (
+        <>
+            <MonacoEditor
+                theme={theme}
+                language={'javascript'}
+                value={compileCode}
+                options={{ ...MonacoEditorConfig, readOnly: false }}
+            />
+        </>
+    )
+}
+
+export default Preview
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index ece9440..e896478 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -9,9 +9,7 @@ class Compiler {
             void esbuild.initialize({ worker: true, wasmURL: wasm }).then(() => {
                 this.init = true
             })
-        } catch (e) {
-            throw e
-        }
+        } catch (e) {}
     }
 
     transform = (code: string, loader: Loader) =>
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index ab47d75..9b7f4f2 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -3,18 +3,19 @@ import importMap from '@/components/Playground/template/import-map.json?raw'
 import AppCss from '@/components/Playground/template/src/App.css?raw'
 import App from '@/components/Playground/template/src/App.tsx?raw'
 import main from '@/components/Playground/template/src/main.tsx?raw'
-import { IFile, IFiles } from '@/components/Playground/shared'
+import { IFile, IFiles, ILanguage } from '@/components/Playground/shared'
 
 export const MAIN_FILE_NAME = 'App.tsx'
 export const IMPORT_MAP_FILE_NAME = 'import-map.json'
 export const ENTRY_FILE_NAME = 'main.tsx'
 
-export const fileNameToLanguage = (name: string) => {
+export const fileNameToLanguage = (name: string): ILanguage => {
     const suffix = name.split('.').pop() || ''
     if (['js', 'jsx'].includes(suffix)) return 'javascript'
     if (['ts', 'tsx'].includes(suffix)) return 'typescript'
     if (['json'].includes(suffix)) return 'json'
     if (['css'].includes(suffix)) return 'css'
+    if (['svg'].includes(suffix)) return 'xml'
     return 'javascript'
 }
 
@@ -62,27 +63,30 @@ export const getModuleFile = (files: IFiles, moduleName: string) => {
     return files[_moduleName]
 }
 
+export const jsToBlob = (code: string) => {
+    return URL.createObjectURL(new Blob([code], { type: 'application/javascript' }))
+}
+
 export const jsonToJs = (file: IFile) => {
-    const js = `export default ${file.value}`
-    return URL.createObjectURL(new Blob([js], { type: 'application/javascript' }))
+    return `export default ${file.value}`
 }
 
 export const cssToJs = (file: IFile) => {
     const randomId = new Date().getTime()
-    const js = `
-                  (() => {
-                    let stylesheet = document.getElementById('style_${randomId}_${file.name}');
-                    if (!stylesheet) {
-                      stylesheet = document.createElement('style')
-                      stylesheet.setAttribute('id', 'style_${randomId}_${file.name}')
-                      document.head.appendChild(stylesheet)
-                    }
-                    const styles = document.createTextNode(\`${file.value}\`)
-                    stylesheet.innerHTML = ''
-                    stylesheet.appendChild(styles)
-                  })()
-                  `
-    return URL.createObjectURL(new Blob([js], { type: 'application/javascript' }))
+    return `(() => {
+  let stylesheet = document.getElementById('style_${randomId}_${file.name}');
+  if (!stylesheet) {
+    stylesheet = document.createElement('style')
+    stylesheet.setAttribute('id', 'style_${randomId}_${file.name}')
+    document.head.appendChild(stylesheet)
+  }
+  const styles = document.createTextNode(
+\`${file.value}\`
+    )
+  stylesheet.innerHTML = ''
+  stylesheet.appendChild(styles)
+})()
+`
 }
 
 export const initFiles: IFiles = getFilesFromUrl() || {
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index aacaff1..be818c9 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,13 +1,14 @@
-import React from 'react'
+import React, { useState } from 'react'
 import CodeEditor from '@/components/Playground/CodeEditor'
-import { initFiles } from '@/components/Playground/files'
+import { initFiles, MAIN_FILE_NAME } from '@/components/Playground/files'
 import { IFiles } from '@/components/Playground/shared'
-import FitFullscreen from '@/components/common/FitFullscreen.tsx'
-import FlexBox from '@/components/common/FlexBox.tsx'
-import Preview from '@/components/Playground/Preview'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import FlexBox from '@/components/common/FlexBox'
+import Transform from '@/components/Playground/Transform'
 
 const OnlineEditor: React.FC = () => {
     const [files, setFiles] = useState<IFiles>(initFiles)
+    const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
 
     return (
         <>
@@ -15,12 +16,14 @@ const OnlineEditor: React.FC = () => {
                 <FlexBox style={{ width: '100%', height: '100%' }} direction={'horizontal'}>
                     <CodeEditor
                         files={files}
+                        onSelectedFileChange={setSelectedFileName}
+                        selectedFileName={selectedFileName}
                         onAddFile={(_, files) => setFiles(files)}
                         onRemoveFile={(_, files) => setFiles(files)}
                         onRenameFile={(_, __, files) => setFiles(files)}
                         onChangeFileContent={(_, __, files) => setFiles(files)}
                     />
-                    <Preview files={files} />
+                    <Transform file={files[selectedFileName]} />
                 </FlexBox>
             </FitFullscreen>
         </>

From 528dff1487c6e6720901746a93c82bf7561f73c5 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 11 Jan 2024 11:04:16 +0800
Subject: [PATCH 169/307] Optimize transform speed

---
 src/components/Playground/Transform/index.tsx | 8 +++++++-
 src/components/Playground/compiler.ts         | 8 +++++++-
 src/components/Playground/utils.ts            | 7 +++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/Playground/Transform/index.tsx b/src/components/Playground/Transform/index.tsx
index 796ee64..c351015 100644
--- a/src/components/Playground/Transform/index.tsx
+++ b/src/components/Playground/Transform/index.tsx
@@ -6,6 +6,7 @@ import { IFile, ITheme } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
 import { cssToJs, jsonToJs } from '@/components/Playground/files'
 import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
+import { addReactImport } from '@/components/Playground/utils.ts'
 
 interface OutputProps {
     file: IFile
@@ -23,8 +24,13 @@ const Preview: React.FC<OutputProps> = ({ file, theme }) => {
     }, [])
 
     const compile = (code: string, loader: Loader) => {
+        let _code = code
+        if (['jsx', 'tsx'].includes(loader)) {
+            _code = addReactImport(code)
+        }
+
         compiler.current
-            ?.transform(code, loader)
+            ?.transform(_code, loader)
             .then((value) => {
                 setCompileCode(value.code)
             })
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index e896478..fd97187 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -9,11 +9,17 @@ class Compiler {
             void esbuild.initialize({ worker: true, wasmURL: wasm }).then(() => {
                 this.init = true
             })
-        } catch (e) {}
+        } catch (e) {
+            /* empty */
+        }
     }
 
     transform = (code: string, loader: Loader) =>
         new Promise<boolean>((resolve) => {
+            if (this.init) {
+                resolve(true)
+                return
+            }
             const timer = setInterval(() => {
                 if (this.init) {
                     clearInterval(timer)
diff --git a/src/components/Playground/utils.ts b/src/components/Playground/utils.ts
index 5cfabc2..d1d9968 100644
--- a/src/components/Playground/utils.ts
+++ b/src/components/Playground/utils.ts
@@ -13,3 +13,10 @@ export const getPlaygroundTheme = (): ITheme => {
     const isDarkTheme = JSON.parse(localStorage.getItem(STORAGE_DARK_THEME) || 'false') as ITheme
     return isDarkTheme ? 'vs-dark' : 'light'
 }
+
+export const addReactImport = (code: string) => {
+    if (!/import\s+React/g.test(code)) {
+        return `import React from 'react';\n${code}`
+    }
+    return code
+}

From 949e29e7cc75d71eeae210beb09c9a1ae73a1ff6 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 11 Jan 2024 18:34:12 +0800
Subject: [PATCH 170/307] Add compile to compiler (still not working)

---
 .../CodeEditor/FileSelector/index.tsx         |  12 +-
 .../Playground/CodeEditor/index.tsx           |   3 +-
 src/components/Playground/Transform/index.tsx |  30 ++-
 src/components/Playground/compiler.ts         | 176 +++++++++++++++++-
 src/components/Playground/files.ts            |   4 +-
 src/components/Playground/shared.ts           |   4 +
 src/pages/OnlineEditor.tsx                    |   2 +-
 7 files changed, 211 insertions(+), 20 deletions(-)

diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index b32547d..bdcb004 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
 import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
 import { IFiles } from '@/components/Playground/shared'
-import { ENTRY_FILE_NAME, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
+import {
+    ENTRY_FILE_NAME,
+    getFileNameList,
+    IMPORT_MAP_FILE_NAME
+} from '@/components/Playground/files'
 import Item from '@/components/Playground/CodeEditor/FileSelector/Item'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
@@ -120,7 +124,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     const handleOnRemove = (fileName: string) => {
         onRemoveFile?.(fileName)
         if (fileName === selectedFileName) {
-            const keys = Object.keys(files).filter(
+            const keys = getFileNameList(files).filter(
                 (item) =>
                     ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) && !files[item].hidden
             )
@@ -134,9 +138,9 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     }
 
     useEffect(() => {
-        Object.keys(files).length
+        getFileNameList(files).length
             ? setTabs(
-                  Object.keys(files).filter(
+                  getFileNameList(files).filter(
                       (item) =>
                           ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) &&
                           !files[item].hidden
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index ea269e3..05f8b9f 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -5,6 +5,7 @@ import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
 import {
     ENTRY_FILE_NAME,
     fileNameToLanguage,
+    getFileNameList,
     IMPORT_MAP_FILE_NAME
 } from '@/components/Playground/files'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
@@ -42,7 +43,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     onError,
     ...props
 }) => {
-    const filteredFilesName = Object.keys(files).filter(
+    const filteredFilesName = getFileNameList(files).filter(
         (item) => ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) && !files[item].hidden
     )
     const propsSelectedFileName =
diff --git a/src/components/Playground/Transform/index.tsx b/src/components/Playground/Transform/index.tsx
index c351015..9162f14 100644
--- a/src/components/Playground/Transform/index.tsx
+++ b/src/components/Playground/Transform/index.tsx
@@ -2,18 +2,19 @@ import React from 'react'
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
 import { useUpdatedEffect } from '@/util/hooks'
-import { IFile, ITheme } from '@/components/Playground/shared'
+import { IFiles, IImportMap, ITheme } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
 import { cssToJs, jsonToJs } from '@/components/Playground/files'
 import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
 import { addReactImport } from '@/components/Playground/utils.ts'
 
 interface OutputProps {
-    file: IFile
+    files: IFiles
+    selectedFileName: string
     theme?: ITheme
 }
 
-const Preview: React.FC<OutputProps> = ({ file, theme }) => {
+const Preview: React.FC<OutputProps> = ({ files, selectedFileName, theme }) => {
     const compiler = useRef<Compiler>()
     const [compileCode, setCompileCode] = useState('')
 
@@ -37,14 +38,25 @@ const Preview: React.FC<OutputProps> = ({ file, theme }) => {
             .catch((e) => {
                 console.error('编译失败', e)
             })
+
+        compiler.current
+            ?.compile(files, {
+                imports: {
+                    react: 'https://esm.sh/react@18.2.0',
+                    'react-dom/client': 'https://esm.sh/react-dom@18.2.0'
+                }
+            })
+            .then((r) => {
+                console.log(r)
+            })
     }
 
     useUpdatedEffect(() => {
-        if (file) {
+        if (files[selectedFileName]) {
             try {
-                const code = file.value
+                const code = files[selectedFileName].value
 
-                switch (file.language) {
+                switch (files[selectedFileName].language) {
                     case 'typescript':
                         compile(code, 'tsx')
                         break
@@ -52,10 +64,10 @@ const Preview: React.FC<OutputProps> = ({ file, theme }) => {
                         compile(code, 'jsx')
                         break
                     case 'css':
-                        setCompileCode(cssToJs(file))
+                        setCompileCode(cssToJs(files[selectedFileName]))
                         break
                     case 'json':
-                        setCompileCode(jsonToJs(file))
+                        setCompileCode(jsonToJs(files[selectedFileName]))
                         break
                     case 'xml':
                         setCompileCode(code)
@@ -66,7 +78,7 @@ const Preview: React.FC<OutputProps> = ({ file, theme }) => {
         } else {
             setCompileCode('')
         }
-    }, [file])
+    }, [files[selectedFileName]])
 
     return (
         <>
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index fd97187..854c0f5 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -1,9 +1,17 @@
-import esbuild, { Loader } from 'esbuild-wasm'
+import esbuild, { Loader, OnLoadArgs, Plugin, PluginBuild } from 'esbuild-wasm'
 import wasm from 'esbuild-wasm/esbuild.wasm?url'
+import { IFiles, IImportMap } from '@/components/Playground/shared.ts'
+import { cssToJs, ENTRY_FILE_NAME, jsonToJs } from '@/components/Playground/files.ts'
+import localforage from 'localforage'
+import axios from 'axios'
 
 class Compiler {
     private init = false
 
+    fileCache = localforage.createInstance({
+        name: 'fileCache'
+    })
+
     constructor() {
         try {
             void esbuild.initialize({ worker: true, wasmURL: wasm }).then(() => {
@@ -15,20 +23,180 @@ class Compiler {
     }
 
     transform = (code: string, loader: Loader) =>
-        new Promise<boolean>((resolve) => {
+        new Promise<void>((resolve) => {
             if (this.init) {
-                resolve(true)
+                resolve()
                 return
             }
             const timer = setInterval(() => {
                 if (this.init) {
                     clearInterval(timer)
-                    resolve(true)
+                    resolve()
                 }
             }, 100)
         }).then(() => {
             return esbuild.transform(code, { loader })
         })
+
+    compile = (files: IFiles, importMap: IImportMap) =>
+        new Promise<void>((resolve) => {
+            if (this.init) {
+                resolve()
+                return
+            }
+            const timer = setInterval(() => {
+                if (this.init) {
+                    clearInterval(timer)
+                    resolve()
+                }
+            }, 100)
+        }).then(() => {
+            return esbuild.build({
+                bundle: true,
+                entryPoints: [ENTRY_FILE_NAME],
+                format: 'esm',
+                metafile: true,
+                write: false,
+                plugins: [this.fileResolverPlugin(files, importMap)]
+            })
+        })
+
+    stop = () => {
+        esbuild.stop()
+    }
+
+    private fileResolverPlugin = (files: IFiles, importMap: IImportMap): Plugin => {
+        return {
+            name: 'file-resolver-plugin',
+            setup: (build: PluginBuild) => {
+                build.onResolve({ filter: /.*/ }, async (args: esbuild.OnResolveArgs) => {
+                    if (args.path === ENTRY_FILE_NAME) {
+                        return {
+                            namespace: 'OxygenToolbox',
+                            path: args.path
+                        }
+                    }
+                    if (args.path.startsWith('./') && files[args.path.substring(2)]) {
+                        return {
+                            namespace: 'OxygenToolbox',
+                            path: args.path.substring(2)
+                        }
+                    }
+                    if (args.path.startsWith('./') && files[`${args.path.substring(2)}.tsx`]) {
+                        return {
+                            namespace: 'OxygenToolbox',
+                            path: `${args.path.substring(2)}.tsx`
+                        }
+                    }
+                    if (args.path.startsWith('./') && files[`${args.path.substring(2)}.jsx`]) {
+                        return {
+                            namespace: 'OxygenToolbox',
+                            path: `${args.path.substring(2)}.jsx`
+                        }
+                    }
+                    if (args.path.startsWith('./') && files[`${args.path.substring(2)}.ts`]) {
+                        return {
+                            namespace: 'OxygenToolbox',
+                            path: `${args.path.substring(2)}.ts`
+                        }
+                    }
+                    if (args.path.startsWith('./') && files[`${args.path.substring(2)}.js`]) {
+                        return {
+                            namespace: 'OxygenToolbox',
+                            path: `${args.path.substring(2)}.js`
+                        }
+                    }
+
+                    const path = importMap.imports[args.path]
+
+                    if (!path) {
+                        throw Error(`Import '${args.path}' not found in Import Map`)
+                    }
+
+                    return {
+                        namespace: 'default',
+                        path
+                    }
+                })
+
+                build.onLoad({ filter: /.*\.css$/ }, async (args: OnLoadArgs) => {
+                    const contents = cssToJs(files[args.path])
+                    return {
+                        loader: 'js',
+                        contents
+                    }
+                })
+
+                build.onLoad({ filter: /.*\.json$/ }, async (args: OnLoadArgs) => {
+                    const contents = jsonToJs(files[args.path])
+                    return {
+                        loader: 'js',
+                        contents
+                    }
+                })
+
+                build.onLoad({ filter: /.*\.svg$/ }, async (args: OnLoadArgs) => {
+                    const contents = files[args.path].value
+                    return {
+                        loader: 'text',
+                        contents
+                    }
+                })
+
+                build.onLoad({ filter: /.*/ }, async (args: OnLoadArgs) => {
+                    if (args.path === ENTRY_FILE_NAME) {
+                        return {
+                            loader: 'tsx',
+                            contents: files[ENTRY_FILE_NAME].value
+                        }
+                    }
+
+                    if (files[args.path]) {
+                        const contents = files[args.path].value
+                        if (args.path.endsWith('.jsx')) {
+                            return {
+                                loader: 'jsx',
+                                contents
+                            }
+                        }
+                        if (args.path.endsWith('.ts')) {
+                            return {
+                                loader: 'ts',
+                                contents
+                            }
+                        }
+                        if (args.path.endsWith('.js')) {
+                            return {
+                                loader: 'js',
+                                contents
+                            }
+                        }
+                        return {
+                            loader: 'tsx',
+                            contents
+                        }
+                    }
+
+                    const cached = await this.fileCache.getItem<esbuild.OnLoadResult>(args.path)
+
+                    if (cached) {
+                        return cached
+                    }
+
+                    const { data, request } = await axios.get(args.path)
+                    const result: esbuild.OnLoadResult = {
+                        loader: 'jsx',
+                        contents: data,
+                        resolveDir: new URL('./', request.responseURL).pathname
+                    }
+
+                    await this.fileCache.setItem(args.path, request)
+
+                    return result
+                })
+            }
+        }
+    }
 }
 
 export default Compiler
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index 9b7f4f2..69a1396 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -9,6 +9,8 @@ export const MAIN_FILE_NAME = 'App.tsx'
 export const IMPORT_MAP_FILE_NAME = 'import-map.json'
 export const ENTRY_FILE_NAME = 'main.tsx'
 
+export const getFileNameList = (files: IFiles) => Object.keys(files)
+
 export const fileNameToLanguage = (name: string): ILanguage => {
     const suffix = name.split('.').pop() || ''
     if (['js', 'jsx'].includes(suffix)) return 'javascript'
@@ -55,7 +57,7 @@ export const getFilesFromUrl = () => {
 export const getModuleFile = (files: IFiles, moduleName: string) => {
     let _moduleName = moduleName.split('./').pop() || ''
     if (!_moduleName.includes('.')) {
-        const realModuleName = Object.keys(files).find((key) =>
+        const realModuleName = getFileNameList(files).find((key) =>
             key.split('.').includes(_moduleName)
         )
         if (realModuleName) _moduleName = realModuleName
diff --git a/src/components/Playground/shared.ts b/src/components/Playground/shared.ts
index dfcde1e..0e07563 100644
--- a/src/components/Playground/shared.ts
+++ b/src/components/Playground/shared.ts
@@ -13,6 +13,10 @@ export interface IFiles {
     [key: string]: IFile
 }
 
+export interface IImportMap {
+    imports: Record<string, string>
+}
+
 export type ITheme = 'light' | 'vs-dark'
 
 export type IEditorOptions = editor.IStandaloneEditorConstructionOptions
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index be818c9..07c8e0b 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -23,7 +23,7 @@ const OnlineEditor: React.FC = () => {
                         onRenameFile={(_, __, files) => setFiles(files)}
                         onChangeFileContent={(_, __, files) => setFiles(files)}
                     />
-                    <Transform file={files[selectedFileName]} />
+                    <Transform files={files} selectedFileName={selectedFileName} />
                 </FlexBox>
             </FitFullscreen>
         </>

From dc64b4993c91e6840d7b5f827488a1da1ac18931 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 12 Jan 2024 13:50:46 +0800
Subject: [PATCH 171/307] Optimize compiler. Add preview to Playground.

---
 src/components/Playground/Preview/iframe.html | 58 +++++++++++
 src/components/Playground/Preview/index.tsx   | 95 +++++++++++++++++++
 .../Playground/Preview/preview.scss           |  7 ++
 src/components/Playground/Transform/index.tsx | 59 ++++--------
 src/components/Playground/compiler.ts         | 40 ++++++--
 src/pages/OnlineEditor.tsx                    |  6 +-
 6 files changed, 213 insertions(+), 52 deletions(-)
 create mode 100644 src/components/Playground/Preview/iframe.html
 create mode 100644 src/components/Playground/Preview/index.tsx
 create mode 100644 src/components/Playground/Preview/preview.scss

diff --git a/src/components/Playground/Preview/iframe.html b/src/components/Playground/Preview/iframe.html
new file mode 100644
index 0000000..9257ece
--- /dev/null
+++ b/src/components/Playground/Preview/iframe.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Preview</title>
+  <!-- es-module-shims -->
+</head>
+<body>
+<script>
+  window.addEventListener("error", (e) => {
+    window.parent.postMessage({ type: "ERROR", message: e.message });
+  });
+
+  window.addEventListener("load", () => {
+    window.parent.postMessage({ type: "LOADED", message: "" });
+  });
+
+  window.addEventListener("message", ({ data }) => {
+    if (data?.type === "UPDATE") {
+      // Record old styles that need to be removed
+      const appStyleElement = document.querySelectorAll("style[id^=\"style_\"]") || [];
+
+      // Remove old app
+      const appSrcElement = document.querySelector("#appSrc");
+      const oldSrc = appSrcElement.getAttribute("src");
+      appSrcElement.remove();
+
+      // Add new app
+      const script = document.createElement("script");
+      script.src = URL.createObjectURL(
+        new Blob([data.data.compiledCode], {
+          type: "application/javascript"
+        })
+      );
+      script.id = "appSrc";
+      script.type = "module";
+      script.onload = () => {
+        // Remove old style
+        appStyleElement.forEach(element => {
+          element.remove();
+        });
+      };
+      document.body.appendChild(script);
+      URL.revokeObjectURL(oldSrc);
+      window.parent.postMessage({ type: "DONE", message: "" });
+    }
+  });
+</script>
+<script type="module" id="appSrc"></script>
+<div id="root">
+  <div
+    style="position:absolute;top: 0;left:0;width:100%;height:100%;display: flex;justify-content: center;align-items: center;">
+    Loading...
+  </div>
+</div>
+</body>
+</html>
diff --git a/src/components/Playground/Preview/index.tsx b/src/components/Playground/Preview/index.tsx
new file mode 100644
index 0000000..f3b1325
--- /dev/null
+++ b/src/components/Playground/Preview/index.tsx
@@ -0,0 +1,95 @@
+import React, { useRef, useState } from 'react'
+import { IFiles } from '@/components/Playground/shared'
+import iframeRaw from '@/components/Playground/Preview/iframe.html?raw'
+import { useUpdatedEffect } from '@/util/hooks'
+import { IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
+import Compiler from '@/components/Playground/compiler'
+import '@/components/Playground/Preview/preview.scss'
+
+interface PreviewProps {
+    iframeKey: string
+    files: IFiles
+}
+
+interface IMessage {
+    type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE'
+    msg: string
+    data: {
+        compiledCode: string
+    }
+}
+
+const getIframeUrl = (iframeRaw: string) => {
+    const shimsUrl = '//unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js'
+    // 判断浏览器是否支持esm ，不支持esm就引入es-module-shims
+    const newIframeRaw =
+        typeof import.meta === 'undefined'
+            ? iframeRaw.replace(
+                  '<!-- es-module-shims -->',
+                  `<script async src="${shimsUrl}"></script>`
+              )
+            : iframeRaw
+    return URL.createObjectURL(new Blob([newIframeRaw], { type: 'text/html' }))
+}
+
+const iframeUrl = getIframeUrl(iframeRaw)
+
+const Preview: React.FC<PreviewProps> = ({ iframeKey, files }) => {
+    const iframeRef = useRef<HTMLIFrameElement>(null)
+    const [errorMsg, setErrorMsg] = useState('')
+    const [loaded, setLoaded] = useState(false)
+
+    const handleMessage = ({ data }: { data: IMessage }) => {
+        const { type, msg } = data
+        switch (type) {
+            case 'LOADED':
+                setLoaded(true)
+                break
+            case 'ERROR':
+                setErrorMsg(msg)
+                break
+            default:
+                setErrorMsg('')
+        }
+    }
+
+    useEffect(() => {
+        console.error(errorMsg)
+    }, [errorMsg])
+
+    useUpdatedEffect(() => {
+        window.addEventListener('message', handleMessage)
+
+        return () => {
+            window.removeEventListener('message', handleMessage)
+        }
+    }, [])
+
+    useUpdatedEffect(() => {
+        Compiler.compile(files, JSON.parse(files[IMPORT_MAP_FILE_NAME].value))
+            .then((result) => {
+                if (loaded) {
+                    iframeRef.current?.contentWindow?.postMessage({
+                        type: 'UPDATE',
+                        data: { compiledCode: result.outputFiles[0].text }
+                    } as IMessage)
+                }
+            })
+            .catch((e) => {
+                setErrorMsg(e)
+            })
+    }, [files, Compiler, loaded])
+
+    return (
+        <div data-component={'playground-preview'}>
+            <iframe
+                key={iframeKey}
+                ref={iframeRef}
+                src={iframeUrl}
+                sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals allow-same-origin"
+            />
+        </div>
+    )
+}
+
+export default Preview
diff --git a/src/components/Playground/Preview/preview.scss b/src/components/Playground/Preview/preview.scss
new file mode 100644
index 0000000..5836dce
--- /dev/null
+++ b/src/components/Playground/Preview/preview.scss
@@ -0,0 +1,7 @@
+[data-component=playground-preview] {
+  display: flex;
+  iframe {
+    border: none;
+    flex: 1;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Playground/Transform/index.tsx b/src/components/Playground/Transform/index.tsx
index 9162f14..23dd8be 100644
--- a/src/components/Playground/Transform/index.tsx
+++ b/src/components/Playground/Transform/index.tsx
@@ -2,27 +2,19 @@ import React from 'react'
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
 import { useUpdatedEffect } from '@/util/hooks'
-import { IFiles, IImportMap, ITheme } from '@/components/Playground/shared'
+import { IFile, ITheme } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
 import { cssToJs, jsonToJs } from '@/components/Playground/files'
 import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
-import { addReactImport } from '@/components/Playground/utils.ts'
+import { addReactImport } from '@/components/Playground/utils'
 
 interface OutputProps {
-    files: IFiles
-    selectedFileName: string
+    file: IFile
     theme?: ITheme
 }
 
-const Preview: React.FC<OutputProps> = ({ files, selectedFileName, theme }) => {
-    const compiler = useRef<Compiler>()
-    const [compileCode, setCompileCode] = useState('')
-
-    useUpdatedEffect(() => {
-        if (!compiler.current) {
-            compiler.current = new Compiler()
-        }
-    }, [])
+const Transform: React.FC<OutputProps> = ({ file, theme }) => {
+    const [compiledCode, setCompiledCode] = useState('')
 
     const compile = (code: string, loader: Loader) => {
         let _code = code
@@ -30,33 +22,21 @@ const Preview: React.FC<OutputProps> = ({ files, selectedFileName, theme }) => {
             _code = addReactImport(code)
         }
 
-        compiler.current
-            ?.transform(_code, loader)
+        Compiler?.transform(_code, loader)
             .then((value) => {
-                setCompileCode(value.code)
+                setCompiledCode(value.code)
             })
             .catch((e) => {
                 console.error('编译失败', e)
             })
-
-        compiler.current
-            ?.compile(files, {
-                imports: {
-                    react: 'https://esm.sh/react@18.2.0',
-                    'react-dom/client': 'https://esm.sh/react-dom@18.2.0'
-                }
-            })
-            .then((r) => {
-                console.log(r)
-            })
     }
 
     useUpdatedEffect(() => {
-        if (files[selectedFileName]) {
+        if (file) {
             try {
-                const code = files[selectedFileName].value
+                const code = file.value
 
-                switch (files[selectedFileName].language) {
+                switch (file.language) {
                     case 'typescript':
                         compile(code, 'tsx')
                         break
@@ -64,32 +44,33 @@ const Preview: React.FC<OutputProps> = ({ files, selectedFileName, theme }) => {
                         compile(code, 'jsx')
                         break
                     case 'css':
-                        setCompileCode(cssToJs(files[selectedFileName]))
+                        setCompiledCode(cssToJs(file))
                         break
                     case 'json':
-                        setCompileCode(jsonToJs(files[selectedFileName]))
+                        setCompiledCode(jsonToJs(file))
                         break
                     case 'xml':
-                        setCompileCode(code)
+                        setCompiledCode(code)
                 }
             } catch (e) {
-                setCompileCode('')
+                console.log(e)
+                setCompiledCode('')
             }
         } else {
-            setCompileCode('')
+            setCompiledCode('')
         }
-    }, [files[selectedFileName]])
+    }, [file, Compiler])
 
     return (
         <>
             <MonacoEditor
                 theme={theme}
                 language={'javascript'}
-                value={compileCode}
-                options={{ ...MonacoEditorConfig, readOnly: false }}
+                value={compiledCode}
+                options={{ ...MonacoEditorConfig, readOnly: true }}
             />
         </>
     )
 }
 
-export default Preview
+export default Transform
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index 854c0f5..c86aa76 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -1,9 +1,9 @@
 import esbuild, { Loader, OnLoadArgs, Plugin, PluginBuild } from 'esbuild-wasm'
-import wasm from 'esbuild-wasm/esbuild.wasm?url'
 import { IFiles, IImportMap } from '@/components/Playground/shared.ts'
 import { cssToJs, ENTRY_FILE_NAME, jsonToJs } from '@/components/Playground/files.ts'
 import localforage from 'localforage'
 import axios from 'axios'
+import { addReactImport } from '@/components/Playground/utils.ts'
 
 class Compiler {
     private init = false
@@ -14,11 +14,13 @@ class Compiler {
 
     constructor() {
         try {
-            void esbuild.initialize({ worker: true, wasmURL: wasm }).then(() => {
-                this.init = true
-            })
+            void esbuild
+                .initialize({ worker: true, wasmURL: 'https://esm.sh/esbuild-wasm/esbuild.wasm' })
+                .finally(() => {
+                    this.init = true
+                })
         } catch (e) {
-            /* empty */
+            this.init = true
         }
     }
 
@@ -107,6 +109,24 @@ class Compiler {
                         }
                     }
 
+                    if (/^https?:\/\/.*/.test(args.path)) {
+                        return {
+                            namespace: 'default',
+                            path: args.path
+                        }
+                    }
+
+                    if (
+                        args.path.includes('./') ||
+                        args.path.includes('../') ||
+                        args.path.startsWith('/')
+                    ) {
+                        return {
+                            namespace: 'default',
+                            path: new URL(args.path, args.resolveDir.substring(1)).href
+                        }
+                    }
+
                     const path = importMap.imports[args.path]
 
                     if (!path) {
@@ -147,12 +167,12 @@ class Compiler {
                     if (args.path === ENTRY_FILE_NAME) {
                         return {
                             loader: 'tsx',
-                            contents: files[ENTRY_FILE_NAME].value
+                            contents: addReactImport(files[ENTRY_FILE_NAME].value)
                         }
                     }
 
                     if (files[args.path]) {
-                        const contents = files[args.path].value
+                        const contents = addReactImport(files[args.path].value)
                         if (args.path.endsWith('.jsx')) {
                             return {
                                 loader: 'jsx',
@@ -187,10 +207,10 @@ class Compiler {
                     const result: esbuild.OnLoadResult = {
                         loader: 'jsx',
                         contents: data,
-                        resolveDir: new URL('./', request.responseURL).pathname
+                        resolveDir: request.responseURL
                     }
 
-                    await this.fileCache.setItem(args.path, request)
+                    await this.fileCache.setItem(args.path, result)
 
                     return result
                 })
@@ -199,4 +219,4 @@ class Compiler {
     }
 }
 
-export default Compiler
+export default new Compiler()
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index 07c8e0b..248c26b 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import CodeEditor from '@/components/Playground/CodeEditor'
-import { initFiles, MAIN_FILE_NAME } from '@/components/Playground/files'
+import { IMPORT_MAP_FILE_NAME, initFiles, MAIN_FILE_NAME } from '@/components/Playground/files'
 import { IFiles } from '@/components/Playground/shared'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
-import Transform from '@/components/Playground/Transform'
+import Preview from '@/components/Playground/Preview'
 
 const OnlineEditor: React.FC = () => {
     const [files, setFiles] = useState<IFiles>(initFiles)
@@ -23,7 +23,7 @@ const OnlineEditor: React.FC = () => {
                         onRenameFile={(_, __, files) => setFiles(files)}
                         onChangeFileContent={(_, __, files) => setFiles(files)}
                     />
-                    <Transform files={files} selectedFileName={selectedFileName} />
+                    <Preview iframeKey={files[IMPORT_MAP_FILE_NAME].value} files={files} />
                 </FlexBox>
             </FitFullscreen>
         </>

From ed4cef1c78f8fc0c0e825c4b7ffff18d15a9500c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 12 Jan 2024 16:57:25 +0800
Subject: [PATCH 172/307] Finish Playground

---
 .../CodeEditor/FileSelector/index.tsx         |  7 ++-
 .../Playground/CodeEditor/code-editor.scss    | 11 +---
 .../Playground/CodeEditor/index.tsx           |  5 +-
 .../{ => Output}/Preview/iframe.html          |  6 +--
 .../Playground/{ => Output}/Preview/index.tsx | 21 ++++----
 .../{ => Output}/Preview/preview.scss         |  1 +
 .../{ => Output}/Transform/index.tsx          | 24 +++++----
 .../Output/Transform/transform.scss           |  3 ++
 src/components/Playground/Output/index.tsx    | 40 ++++++++++++++
 src/components/Playground/files.ts            | 14 ++---
 src/components/Playground/index.tsx           | 52 +++++++++++++++++--
 src/components/Playground/playground.scss     | 18 +++++++
 src/pages/OnlineEditor.tsx                    | 25 ++-------
 13 files changed, 156 insertions(+), 71 deletions(-)
 rename src/components/Playground/{ => Output}/Preview/iframe.html (88%)
 rename src/components/Playground/{ => Output}/Preview/index.tsx (82%)
 rename src/components/Playground/{ => Output}/Preview/preview.scss (82%)
 rename src/components/Playground/{ => Output}/Transform/index.tsx (73%)
 create mode 100644 src/components/Playground/Output/Transform/transform.scss
 create mode 100644 src/components/Playground/Output/index.tsx
 create mode 100644 src/components/Playground/playground.scss

diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index bdcb004..ac8e15d 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -64,10 +64,10 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     }
 
     const handleOnCancel = () => {
+        onError?.('')
         if (!creating) {
             return
         }
-
         tabs.pop()
         setTabs([...tabs])
         setCreating(false)
@@ -111,7 +111,10 @@ const FileSelector: React.FC<FileSelectorProps> = ({
             return false
         }
 
-        if (tabs.includes(newFileName) && newFileName !== oldFileName) {
+        if (
+            tabs.map((item) => item.toLowerCase()).includes(newFileName.toLowerCase()) &&
+            newFileName.toLowerCase() !== oldFileName.toLowerCase()
+        ) {
             onError?.(`File "${newFileName}" already exists.`)
             return false
         }
diff --git a/src/components/Playground/CodeEditor/code-editor.scss b/src/components/Playground/CodeEditor/code-editor.scss
index d8da64c..3887677 100644
--- a/src/components/Playground/CodeEditor/code-editor.scss
+++ b/src/components/Playground/CodeEditor/code-editor.scss
@@ -1,14 +1,5 @@
 [data-component=playground-code-editor] {
+  position: relative;
   width: 100%;
   height: 100%;
-
-  .playground-code-editor-message {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    color: white;
-    background-color: #FF4D4FAA;
-    padding: 5px 10px;
-    font-size: 1.6em;
-  }
 }
\ No newline at end of file
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index 05f8b9f..35fad62 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -3,7 +3,6 @@ import _ from 'lodash'
 import '@/components/Playground/CodeEditor/code-editor.scss'
 import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
 import {
-    ENTRY_FILE_NAME,
     fileNameToLanguage,
     getFileNameList,
     IMPORT_MAP_FILE_NAME
@@ -44,7 +43,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     ...props
 }) => {
     const filteredFilesName = getFileNameList(files).filter(
-        (item) => ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) && !files[item].hidden
+        (item) => ![IMPORT_MAP_FILE_NAME].includes(item) && !files[item].hidden
     )
     const propsSelectedFileName =
         props.selectedFileName || (filteredFilesName.length ? filteredFilesName[0] : '')
@@ -148,7 +147,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                     onChange={handleOnChangeFileContent}
                     onJumpFile={handleOnChangeSelectedFile}
                 />
-                {errorMsg && <div className={'playground-code-editor-message'}>{errorMsg}</div>}
+                {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
             </FlexBox>
         </>
     )
diff --git a/src/components/Playground/Preview/iframe.html b/src/components/Playground/Output/Preview/iframe.html
similarity index 88%
rename from src/components/Playground/Preview/iframe.html
rename to src/components/Playground/Output/Preview/iframe.html
index 9257ece..b485bf9 100644
--- a/src/components/Playground/Preview/iframe.html
+++ b/src/components/Playground/Output/Preview/iframe.html
@@ -9,11 +9,11 @@
 <body>
 <script>
   window.addEventListener("error", (e) => {
-    window.parent.postMessage({ type: "ERROR", message: e.message });
+    window.parent.postMessage({ type: "ERROR", msg: e.message });
   });
 
   window.addEventListener("load", () => {
-    window.parent.postMessage({ type: "LOADED", message: "" });
+    window.parent.postMessage({ type: "LOADED", msg: "" });
   });
 
   window.addEventListener("message", ({ data }) => {
@@ -43,7 +43,7 @@
       };
       document.body.appendChild(script);
       URL.revokeObjectURL(oldSrc);
-      window.parent.postMessage({ type: "DONE", message: "" });
+      window.parent.postMessage({ type: "DONE", msg: "" });
     }
   });
 </script>
diff --git a/src/components/Playground/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx
similarity index 82%
rename from src/components/Playground/Preview/index.tsx
rename to src/components/Playground/Output/Preview/index.tsx
index f3b1325..17e310f 100644
--- a/src/components/Playground/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -1,14 +1,14 @@
 import React, { useRef, useState } from 'react'
-import { IFiles } from '@/components/Playground/shared'
-import iframeRaw from '@/components/Playground/Preview/iframe.html?raw'
+import { IFiles, IImportMap } from '@/components/Playground/shared'
+import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
 import { useUpdatedEffect } from '@/util/hooks'
-import { IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
 import Compiler from '@/components/Playground/compiler'
-import '@/components/Playground/Preview/preview.scss'
+import '@/components/Playground/Output/Preview/preview.scss'
 
 interface PreviewProps {
     iframeKey: string
     files: IFiles
+    importMap: IImportMap
 }
 
 interface IMessage {
@@ -34,7 +34,7 @@ const getIframeUrl = (iframeRaw: string) => {
 
 const iframeUrl = getIframeUrl(iframeRaw)
 
-const Preview: React.FC<PreviewProps> = ({ iframeKey, files }) => {
+const Preview: React.FC<PreviewProps> = ({ iframeKey, files, importMap }) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
     const [errorMsg, setErrorMsg] = useState('')
     const [loaded, setLoaded] = useState(false)
@@ -48,15 +48,11 @@ const Preview: React.FC<PreviewProps> = ({ iframeKey, files }) => {
             case 'ERROR':
                 setErrorMsg(msg)
                 break
-            default:
+            case 'DONE':
                 setErrorMsg('')
         }
     }
 
-    useEffect(() => {
-        console.error(errorMsg)
-    }, [errorMsg])
-
     useUpdatedEffect(() => {
         window.addEventListener('message', handleMessage)
 
@@ -66,7 +62,7 @@ const Preview: React.FC<PreviewProps> = ({ iframeKey, files }) => {
     }, [])
 
     useUpdatedEffect(() => {
-        Compiler.compile(files, JSON.parse(files[IMPORT_MAP_FILE_NAME].value))
+        Compiler.compile(files, importMap)
             .then((result) => {
                 if (loaded) {
                     iframeRef.current?.contentWindow?.postMessage({
@@ -76,7 +72,7 @@ const Preview: React.FC<PreviewProps> = ({ iframeKey, files }) => {
                 }
             })
             .catch((e) => {
-                setErrorMsg(e)
+                setErrorMsg(`编译失败：${e.message}`)
             })
     }, [files, Compiler, loaded])
 
@@ -88,6 +84,7 @@ const Preview: React.FC<PreviewProps> = ({ iframeKey, files }) => {
                 src={iframeUrl}
                 sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals allow-same-origin"
             />
+            {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
         </div>
     )
 }
diff --git a/src/components/Playground/Preview/preview.scss b/src/components/Playground/Output/Preview/preview.scss
similarity index 82%
rename from src/components/Playground/Preview/preview.scss
rename to src/components/Playground/Output/Preview/preview.scss
index 5836dce..b7da9e6 100644
--- a/src/components/Playground/Preview/preview.scss
+++ b/src/components/Playground/Output/Preview/preview.scss
@@ -1,5 +1,6 @@
 [data-component=playground-preview] {
   display: flex;
+  position: relative;
   iframe {
     border: none;
     flex: 1;
diff --git a/src/components/Playground/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx
similarity index 73%
rename from src/components/Playground/Transform/index.tsx
rename to src/components/Playground/Output/Transform/index.tsx
index 23dd8be..1b01cf8 100644
--- a/src/components/Playground/Transform/index.tsx
+++ b/src/components/Playground/Output/Transform/index.tsx
@@ -1,12 +1,13 @@
-import React from 'react'
+import React, { useState } from 'react'
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
-import { useUpdatedEffect } from '@/util/hooks'
-import { IFile, ITheme } from '@/components/Playground/shared'
-import Compiler from '@/components/Playground/compiler'
-import { cssToJs, jsonToJs } from '@/components/Playground/files'
-import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
-import { addReactImport } from '@/components/Playground/utils'
+import '@/components/Playground/Output/Transform/transform.scss'
+import { useUpdatedEffect } from '@/util/hooks.tsx'
+import { IFile, ITheme } from '@/components/Playground/shared.ts'
+import Compiler from '@/components/Playground/compiler.ts'
+import { cssToJs, jsonToJs } from '@/components/Playground/files.ts'
+import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig.ts'
+import { addReactImport } from '@/components/Playground/utils.ts'
 
 interface OutputProps {
     file: IFile
@@ -15,6 +16,7 @@ interface OutputProps {
 
 const Transform: React.FC<OutputProps> = ({ file, theme }) => {
     const [compiledCode, setCompiledCode] = useState('')
+    const [errorMsg, setErrorMsg] = useState('')
 
     const compile = (code: string, loader: Loader) => {
         let _code = code
@@ -25,9 +27,10 @@ const Transform: React.FC<OutputProps> = ({ file, theme }) => {
         Compiler?.transform(_code, loader)
             .then((value) => {
                 setCompiledCode(value.code)
+                setErrorMsg('')
             })
             .catch((e) => {
-                console.error('编译失败', e)
+                setErrorMsg(`编译失败：${e.message}`)
             })
     }
 
@@ -62,14 +65,15 @@ const Transform: React.FC<OutputProps> = ({ file, theme }) => {
     }, [file, Compiler])
 
     return (
-        <>
+        <div data-component={'playground-transform'}>
             <MonacoEditor
                 theme={theme}
                 language={'javascript'}
                 value={compiledCode}
                 options={{ ...MonacoEditorConfig, readOnly: true }}
             />
-        </>
+            {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
+        </div>
     )
 }
 
diff --git a/src/components/Playground/Output/Transform/transform.scss b/src/components/Playground/Output/Transform/transform.scss
new file mode 100644
index 0000000..f54a125
--- /dev/null
+++ b/src/components/Playground/Output/Transform/transform.scss
@@ -0,0 +1,3 @@
+[data-component=playground-transform] {
+  position: relative;
+}
\ No newline at end of file
diff --git a/src/components/Playground/Output/index.tsx b/src/components/Playground/Output/index.tsx
new file mode 100644
index 0000000..680efb1
--- /dev/null
+++ b/src/components/Playground/Output/index.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
+import Transform from '@/components/Playground/Output/Transform'
+import { IFiles, IImportMap } from '@/components/Playground/shared.ts'
+import Preview from '@/components/Playground/Output/Preview'
+
+interface OutputProps {
+    files: IFiles
+    selectedFileName: string
+    importMap: IImportMap
+}
+
+const Output: React.FC<OutputProps> = ({ files, selectedFileName, importMap }) => {
+    const [selectedTab, setSelectedTab] = useState('Preview')
+
+    return (
+        <FlexBox data-component={'playground-code-output'}>
+            <FileSelector
+                files={{
+                    Preview: { name: 'Preview', language: 'json', value: '' },
+                    Transform: { name: 'Transform', language: 'json', value: '' }
+                }}
+                selectedFileName={selectedTab}
+                onChange={(tabName) => setSelectedTab(tabName)}
+                readonly
+            />
+            {selectedTab === 'Preview' && (
+                <Preview
+                    iframeKey={JSON.stringify(importMap)}
+                    files={files}
+                    importMap={importMap}
+                />
+            )}
+            {selectedTab === 'Transform' && <Transform file={files[selectedFileName]} />}
+        </FlexBox>
+    )
+}
+
+export default Output
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index 69a1396..b1138e0 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -3,7 +3,7 @@ import importMap from '@/components/Playground/template/import-map.json?raw'
 import AppCss from '@/components/Playground/template/src/App.css?raw'
 import App from '@/components/Playground/template/src/App.tsx?raw'
 import main from '@/components/Playground/template/src/main.tsx?raw'
-import { IFile, IFiles, ILanguage } from '@/components/Playground/shared'
+import { IFile, IFiles, IImportMap, ILanguage } from '@/components/Playground/shared'
 
 export const MAIN_FILE_NAME = 'App.tsx'
 export const IMPORT_MAP_FILE_NAME = 'import-map.json'
@@ -106,11 +106,13 @@ export const initFiles: IFiles = getFilesFromUrl() || {
         name: 'App.css',
         language: 'css',
         value: AppCss
-    },
-    [IMPORT_MAP_FILE_NAME]: {
-        name: IMPORT_MAP_FILE_NAME,
-        language: fileNameToLanguage(IMPORT_MAP_FILE_NAME),
-        value: importMap
+    }
+}
+
+export const initImportMap: IImportMap = {
+    imports: {
+        react: 'https://esm.sh/react@18.2.0',
+        'react-dom/client': 'https://esm.sh/react-dom@18.2.0'
     }
 }
 
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index c041da6..1aa0bc2 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,7 +1,51 @@
-import React from 'react'
+import React, { useState } from 'react'
+import '@/components/Playground/playground.scss'
+import FlexBox from '@/components/common/FlexBox'
+import CodeEditor from '@/components/Playground/CodeEditor'
+import Output from '@/components/Playground/Output'
+import { IFiles, IImportMap } from '@/components/Playground/shared.ts'
+import { IMPORT_MAP_FILE_NAME, MAIN_FILE_NAME } from '@/components/Playground/files.ts'
 
-const ReactPlayground: React.FC = () => {
-    return <></>
+interface PlaygroundProps {
+    initFiles: IFiles
+    initImportMap: IImportMap
 }
 
-export default ReactPlayground
+const Playground: React.FC<PlaygroundProps> = ({ initFiles, initImportMap }) => {
+    const [files, setFiles] = useState(initFiles)
+    const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
+    const [importMap, setImportMap] = useState<IImportMap>(initImportMap)
+
+    const handleOnChangeFileContent = (content: string, fileName: string, files: IFiles) => {
+        if (fileName === IMPORT_MAP_FILE_NAME) {
+            setImportMap(JSON.parse(content))
+        } else {
+            delete files[IMPORT_MAP_FILE_NAME]
+            setFiles(files)
+        }
+    }
+
+    return (
+        <FlexBox data-component={'playground'} direction={'horizontal'}>
+            <CodeEditor
+                files={{
+                    ...files,
+                    'import-map.json': {
+                        name: IMPORT_MAP_FILE_NAME,
+                        language: 'json',
+                        value: JSON.stringify(importMap, null, 2)
+                    }
+                }}
+                selectedFileName={selectedFileName}
+                onAddFile={(_, files) => setFiles(files)}
+                onRemoveFile={(_, files) => setFiles(files)}
+                onRenameFile={(_, __, files) => setFiles(files)}
+                onChangeFileContent={handleOnChangeFileContent}
+                onSelectedFileChange={setSelectedFileName}
+            />
+            <Output files={files} selectedFileName={selectedFileName} importMap={importMap} />
+        </FlexBox>
+    )
+}
+
+export default Playground
diff --git a/src/components/Playground/playground.scss b/src/components/Playground/playground.scss
new file mode 100644
index 0000000..35c78d1
--- /dev/null
+++ b/src/components/Playground/playground.scss
@@ -0,0 +1,18 @@
+[data-component=playground] {
+  width: 100%;
+  height: 100%;
+
+  > * {
+    width: 0 !important;
+  }
+
+  .playground-error-message {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    background-color: #FF4D4FAA;
+    padding: 5px 10px;
+    font-size: 1.2em;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index 248c26b..deebac8 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,30 +1,13 @@
-import React, { useState } from 'react'
-import CodeEditor from '@/components/Playground/CodeEditor'
-import { IMPORT_MAP_FILE_NAME, initFiles, MAIN_FILE_NAME } from '@/components/Playground/files'
-import { IFiles } from '@/components/Playground/shared'
+import React from 'react'
 import FitFullscreen from '@/components/common/FitFullscreen'
-import FlexBox from '@/components/common/FlexBox'
-import Preview from '@/components/Playground/Preview'
+import Playground from '@/components/Playground'
+import { initFiles, initImportMap } from '@/components/Playground/files.ts'
 
 const OnlineEditor: React.FC = () => {
-    const [files, setFiles] = useState<IFiles>(initFiles)
-    const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
-
     return (
         <>
             <FitFullscreen>
-                <FlexBox style={{ width: '100%', height: '100%' }} direction={'horizontal'}>
-                    <CodeEditor
-                        files={files}
-                        onSelectedFileChange={setSelectedFileName}
-                        selectedFileName={selectedFileName}
-                        onAddFile={(_, files) => setFiles(files)}
-                        onRemoveFile={(_, files) => setFiles(files)}
-                        onRenameFile={(_, __, files) => setFiles(files)}
-                        onChangeFileContent={(_, __, files) => setFiles(files)}
-                    />
-                    <Preview iframeKey={files[IMPORT_MAP_FILE_NAME].value} files={files} />
-                </FlexBox>
+                <Playground initFiles={initFiles} initImportMap={initImportMap} />
             </FitFullscreen>
         </>
     )

From dc4e49343b955319203b4f56025b0d9afb5ad722 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 12 Jan 2024 18:11:02 +0800
Subject: [PATCH 173/307] Remove svg support in Playground

---
 .../CodeEditor/FileSelector/index.tsx         | 23 ++++++-------------
 .../Playground/CodeEditor/index.tsx           |  2 +-
 .../Playground/Output/Preview/index.tsx       |  6 ++---
 .../Playground/Output/Transform/index.tsx     | 14 +++++------
 src/components/Playground/Output/index.tsx    |  6 ++---
 src/components/Playground/compiler.ts         | 17 +++++---------
 src/components/Playground/files.ts            |  6 ++---
 src/components/Playground/index.tsx           |  6 ++---
 8 files changed, 33 insertions(+), 47 deletions(-)

diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index ac8e15d..5f07aa5 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -1,14 +1,10 @@
 import React from 'react'
 import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
-import { IFiles } from '@/components/Playground/shared'
-import {
-    ENTRY_FILE_NAME,
-    getFileNameList,
-    IMPORT_MAP_FILE_NAME
-} from '@/components/Playground/files'
-import Item from '@/components/Playground/CodeEditor/FileSelector/Item'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
+import { IFiles } from '@/components/Playground/shared'
+import { getFileNameList, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
+import Item from '@/components/Playground/CodeEditor/FileSelector/Item'
 
 interface FileSelectorProps {
     files?: IFiles
@@ -103,10 +99,8 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     }
 
     const handleOnValidateTab = (newFileName: string, oldFileName: string) => {
-        if (!/\.(jsx|tsx|js|ts|css|json|svg)$/.test(newFileName)) {
-            onError?.(
-                'Playground only supports *.jsx, *.tsx, *.js, *.ts, *.css, *.json, *.svg files.'
-            )
+        if (!/\.(jsx|tsx|js|ts|css|json)$/.test(newFileName)) {
+            onError?.('Playground only supports *.jsx, *.tsx, *.js, *.ts, *.css, *.json files.')
 
             return false
         }
@@ -128,8 +122,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
         onRemoveFile?.(fileName)
         if (fileName === selectedFileName) {
             const keys = getFileNameList(files).filter(
-                (item) =>
-                    ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) && !files[item].hidden
+                (item) => ![IMPORT_MAP_FILE_NAME].includes(item) && !files[item].hidden
             )
             const index = keys.indexOf(fileName) - 1
             if (index >= 0) {
@@ -144,9 +137,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
         getFileNameList(files).length
             ? setTabs(
                   getFileNameList(files).filter(
-                      (item) =>
-                          ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) &&
-                          !files[item].hidden
+                      (item) => ![IMPORT_MAP_FILE_NAME].includes(item) && !files[item].hidden
                   )
               )
             : setTabs([])
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index 35fad62..93d7e0b 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import _ from 'lodash'
 import '@/components/Playground/CodeEditor/code-editor.scss'
+import FlexBox from '@/components/common/FlexBox'
 import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
 import {
     fileNameToLanguage,
@@ -9,7 +10,6 @@ import {
 } from '@/components/Playground/files'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
 import Editor from '@/components/Playground/CodeEditor/Editor'
-import FlexBox from '@/components/common/FlexBox'
 
 interface CodeEditorProps {
     theme?: ITheme
diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx
index 17e310f..18366b2 100644
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -1,9 +1,9 @@
 import React, { useRef, useState } from 'react'
-import { IFiles, IImportMap } from '@/components/Playground/shared'
-import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
 import { useUpdatedEffect } from '@/util/hooks'
-import Compiler from '@/components/Playground/compiler'
 import '@/components/Playground/Output/Preview/preview.scss'
+import { IFiles, IImportMap } from '@/components/Playground/shared'
+import Compiler from '@/components/Playground/compiler'
+import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
 
 interface PreviewProps {
     iframeKey: string
diff --git a/src/components/Playground/Output/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx
index 1b01cf8..122a3a0 100644
--- a/src/components/Playground/Output/Transform/index.tsx
+++ b/src/components/Playground/Output/Transform/index.tsx
@@ -1,13 +1,13 @@
-import React, { useState } from 'react'
+import React from 'react'
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
 import '@/components/Playground/Output/Transform/transform.scss'
-import { useUpdatedEffect } from '@/util/hooks.tsx'
-import { IFile, ITheme } from '@/components/Playground/shared.ts'
-import Compiler from '@/components/Playground/compiler.ts'
-import { cssToJs, jsonToJs } from '@/components/Playground/files.ts'
-import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig.ts'
-import { addReactImport } from '@/components/Playground/utils.ts'
+import { useUpdatedEffect } from '@/util/hooks'
+import { IFile, ITheme } from '@/components/Playground/shared'
+import { addReactImport } from '@/components/Playground/utils'
+import { cssToJs, jsonToJs } from '@/components/Playground/files'
+import Compiler from '@/components/Playground/compiler'
+import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
 
 interface OutputProps {
     file: IFile
diff --git a/src/components/Playground/Output/index.tsx b/src/components/Playground/Output/index.tsx
index 680efb1..6c58d20 100644
--- a/src/components/Playground/Output/index.tsx
+++ b/src/components/Playground/Output/index.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
-import FlexBox from '@/components/common/FlexBox.tsx'
+import React from 'react'
+import FlexBox from '@/components/common/FlexBox'
+import { IFiles, IImportMap } from '@/components/Playground/shared'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
 import Transform from '@/components/Playground/Output/Transform'
-import { IFiles, IImportMap } from '@/components/Playground/shared.ts'
 import Preview from '@/components/Playground/Output/Preview'
 
 interface OutputProps {
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index c86aa76..97f4761 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -1,9 +1,9 @@
 import esbuild, { Loader, OnLoadArgs, Plugin, PluginBuild } from 'esbuild-wasm'
-import { IFiles, IImportMap } from '@/components/Playground/shared.ts'
-import { cssToJs, ENTRY_FILE_NAME, jsonToJs } from '@/components/Playground/files.ts'
 import localforage from 'localforage'
 import axios from 'axios'
-import { addReactImport } from '@/components/Playground/utils.ts'
+import { IFiles, IImportMap } from '@/components/Playground/shared'
+import { cssToJs, ENTRY_FILE_NAME, jsonToJs } from '@/components/Playground/files'
+import { addReactImport } from '@/components/Playground/utils'
 
 class Compiler {
     private init = false
@@ -108,6 +108,9 @@ class Compiler {
                             path: `${args.path.substring(2)}.js`
                         }
                     }
+                    if (/\.\/.*\.css/.test(args.path) && !args.resolveDir) {
+                        throw Error(`Css '${args.path}' not found`)
+                    }
 
                     if (/^https?:\/\/.*/.test(args.path)) {
                         return {
@@ -155,14 +158,6 @@ class Compiler {
                     }
                 })
 
-                build.onLoad({ filter: /.*\.svg$/ }, async (args: OnLoadArgs) => {
-                    const contents = files[args.path].value
-                    return {
-                        loader: 'text',
-                        contents
-                    }
-                })
-
                 build.onLoad({ filter: /.*/ }, async (args: OnLoadArgs) => {
                     if (args.path === ENTRY_FILE_NAME) {
                         return {
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index b1138e0..695e0f0 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -1,9 +1,9 @@
 import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
+import { IFile, IFiles, IImportMap, ILanguage } from '@/components/Playground/shared'
 import importMap from '@/components/Playground/template/import-map.json?raw'
 import AppCss from '@/components/Playground/template/src/App.css?raw'
 import App from '@/components/Playground/template/src/App.tsx?raw'
 import main from '@/components/Playground/template/src/main.tsx?raw'
-import { IFile, IFiles, IImportMap, ILanguage } from '@/components/Playground/shared'
 
 export const MAIN_FILE_NAME = 'App.tsx'
 export const IMPORT_MAP_FILE_NAME = 'import-map.json'
@@ -17,7 +17,6 @@ export const fileNameToLanguage = (name: string): ILanguage => {
     if (['ts', 'tsx'].includes(suffix)) return 'typescript'
     if (['json'].includes(suffix)) return 'json'
     if (['css'].includes(suffix)) return 'css'
-    if (['svg'].includes(suffix)) return 'xml'
     return 'javascript'
 }
 
@@ -95,7 +94,8 @@ export const initFiles: IFiles = getFilesFromUrl() || {
     [ENTRY_FILE_NAME]: {
         name: ENTRY_FILE_NAME,
         language: fileNameToLanguage(ENTRY_FILE_NAME),
-        value: main
+        value: main,
+        hidden: true
     },
     [MAIN_FILE_NAME]: {
         name: MAIN_FILE_NAME,
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index 1aa0bc2..df2b8a9 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from 'react'
+import React from 'react'
 import '@/components/Playground/playground.scss'
+import { IFiles, IImportMap } from '@/components/Playground/shared'
+import { IMPORT_MAP_FILE_NAME, MAIN_FILE_NAME } from '@/components/Playground/files'
 import FlexBox from '@/components/common/FlexBox'
 import CodeEditor from '@/components/Playground/CodeEditor'
 import Output from '@/components/Playground/Output'
-import { IFiles, IImportMap } from '@/components/Playground/shared.ts'
-import { IMPORT_MAP_FILE_NAME, MAIN_FILE_NAME } from '@/components/Playground/files.ts'
 
 interface PlaygroundProps {
     initFiles: IFiles

From 8e880cc1ed88ab5e1ce8936f7d17a8fb3ee44859 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 12 Jan 2024 23:45:33 +0800
Subject: [PATCH 174/307] Optimize code

---
 .../Playground/Output/Transform/index.tsx     |  5 ++---
 src/components/Playground/compiler.ts         | 15 ++++++-------
 src/components/Playground/files.ts            |  7 ++++++
 src/components/Playground/index.tsx           |  2 +-
 src/components/Playground/utils.ts            | 22 -------------------
 5 files changed, 17 insertions(+), 34 deletions(-)
 delete mode 100644 src/components/Playground/utils.ts

diff --git a/src/components/Playground/Output/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx
index 122a3a0..a5eb75a 100644
--- a/src/components/Playground/Output/Transform/index.tsx
+++ b/src/components/Playground/Output/Transform/index.tsx
@@ -4,8 +4,7 @@ import { Loader } from 'esbuild-wasm'
 import '@/components/Playground/Output/Transform/transform.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { IFile, ITheme } from '@/components/Playground/shared'
-import { addReactImport } from '@/components/Playground/utils'
-import { cssToJs, jsonToJs } from '@/components/Playground/files'
+import { cssToJs, jsonToJs, addReactImport } from '@/components/Playground/files'
 import Compiler from '@/components/Playground/compiler'
 import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
 
@@ -29,7 +28,7 @@ const Transform: React.FC<OutputProps> = ({ file, theme }) => {
                 setCompiledCode(value.code)
                 setErrorMsg('')
             })
-            .catch((e) => {
+            .catch((e: Error) => {
                 setErrorMsg(`编译失败：${e.message}`)
             })
     }
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index 97f4761..1862e24 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -2,8 +2,7 @@ import esbuild, { Loader, OnLoadArgs, Plugin, PluginBuild } from 'esbuild-wasm'
 import localforage from 'localforage'
 import axios from 'axios'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
-import { cssToJs, ENTRY_FILE_NAME, jsonToJs } from '@/components/Playground/files'
-import { addReactImport } from '@/components/Playground/utils'
+import { cssToJs, ENTRY_FILE_NAME, jsonToJs, addReactImport } from '@/components/Playground/files'
 
 class Compiler {
     private init = false
@@ -71,7 +70,7 @@ class Compiler {
         return {
             name: 'file-resolver-plugin',
             setup: (build: PluginBuild) => {
-                build.onResolve({ filter: /.*/ }, async (args: esbuild.OnResolveArgs) => {
+                build.onResolve({ filter: /.*/ }, (args: esbuild.OnResolveArgs) => {
                     if (args.path === ENTRY_FILE_NAME) {
                         return {
                             namespace: 'OxygenToolbox',
@@ -142,7 +141,7 @@ class Compiler {
                     }
                 })
 
-                build.onLoad({ filter: /.*\.css$/ }, async (args: OnLoadArgs) => {
+                build.onLoad({ filter: /.*\.css$/ }, (args: OnLoadArgs) => {
                     const contents = cssToJs(files[args.path])
                     return {
                         loader: 'js',
@@ -150,7 +149,7 @@ class Compiler {
                     }
                 })
 
-                build.onLoad({ filter: /.*\.json$/ }, async (args: OnLoadArgs) => {
+                build.onLoad({ filter: /.*\.json$/ }, (args: OnLoadArgs) => {
                     const contents = jsonToJs(files[args.path])
                     return {
                         loader: 'js',
@@ -198,11 +197,11 @@ class Compiler {
                         return cached
                     }
 
-                    const { data, request } = await axios.get(args.path)
+                    const axiosResponse = await axios.get<string>(args.path)
                     const result: esbuild.OnLoadResult = {
                         loader: 'jsx',
-                        contents: data,
-                        resolveDir: request.responseURL
+                        contents: axiosResponse.data,
+                        resolveDir: (axiosResponse.request as XMLHttpRequest).responseURL
                     }
 
                     await this.fileCache.setItem(args.path, result)
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index 695e0f0..e876732 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -90,6 +90,13 @@ export const cssToJs = (file: IFile) => {
 `
 }
 
+export const addReactImport = (code: string) => {
+    if (!/import\s+React/g.test(code)) {
+        return `import React from 'react';\n${code}`
+    }
+    return code
+}
+
 export const initFiles: IFiles = getFilesFromUrl() || {
     [ENTRY_FILE_NAME]: {
         name: ENTRY_FILE_NAME,
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index df2b8a9..c7d2fbb 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -18,7 +18,7 @@ const Playground: React.FC<PlaygroundProps> = ({ initFiles, initImportMap }) =>
 
     const handleOnChangeFileContent = (content: string, fileName: string, files: IFiles) => {
         if (fileName === IMPORT_MAP_FILE_NAME) {
-            setImportMap(JSON.parse(content))
+            setImportMap(JSON.parse(content) as IImportMap)
         } else {
             delete files[IMPORT_MAP_FILE_NAME]
             setFiles(files)
diff --git a/src/components/Playground/utils.ts b/src/components/Playground/utils.ts
deleted file mode 100644
index d1d9968..0000000
--- a/src/components/Playground/utils.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ITheme } from '@/components/Playground/shared'
-
-const STORAGE_DARK_THEME = 'react-playground-prefer-dark'
-
-export const setPlaygroundTheme = (theme: ITheme) => {
-    localStorage.setItem(STORAGE_DARK_THEME, String(theme === 'vs-dark'))
-    document
-        .querySelectorAll('div[data-id="react-playground"]')
-        ?.forEach((item) => item.setAttribute('class', theme))
-}
-
-export const getPlaygroundTheme = (): ITheme => {
-    const isDarkTheme = JSON.parse(localStorage.getItem(STORAGE_DARK_THEME) || 'false') as ITheme
-    return isDarkTheme ? 'vs-dark' : 'light'
-}
-
-export const addReactImport = (code: string) => {
-    if (!/import\s+React/g.test(code)) {
-        return `import React from 'react';\n${code}`
-    }
-    return code
-}

From 97c23334f76bcede5555810b8bc33818829b1c69 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 13 Jan 2024 22:16:29 +0800
Subject: [PATCH 175/307] Optimize CodeEditor. CodeEditor add tsconfig support.

---
 package-lock.json                             |  24 +-
 .../Playground/CodeEditor/Editor/index.tsx    |  40 +-
 .../CodeEditor/FileSelector/Item.tsx          |   2 +
 .../CodeEditor/FileSelector/index.tsx         |  46 +-
 .../Playground/CodeEditor/index.tsx           |  12 +-
 src/components/Playground/files.ts            |  63 +-
 .../Playground/import-map-schema.json         |   6 +
 src/components/Playground/index.tsx           |  80 +-
 src/components/Playground/shared.ts           |   7 +-
 .../Playground/tsconfig-schema.json           | 820 ++++++++++++++++++
 src/pages/OnlineEditor.tsx                    |   8 +-
 11 files changed, 1043 insertions(+), 65 deletions(-)
 create mode 100644 src/components/Playground/import-map-schema.json
 create mode 100644 src/components/Playground/tsconfig-schema.json

diff --git a/package-lock.json b/package-lock.json
index 5e6af34..d132bcd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1893,15 +1893,15 @@
       "peer": true
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+      "version": "15.7.11",
+      "resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.11.tgz",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.42",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.42.tgz",
-      "integrity": "sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==",
+      "version": "18.2.47",
+      "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.2.47.tgz",
+      "integrity": "sha512-xquNkkOirwyCgoClNk85BjP+aqnIS+ckAJ8i37gAbDs14jfW/J23f2GItAf33oiUPQnqNMALiFeoM9Y5mbjpVQ==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1910,18 +1910,18 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.17",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.17.tgz",
-      "integrity": "sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==",
+      "version": "18.2.18",
+      "resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.2.18.tgz",
+      "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
     },
     "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+      "version": "0.16.8",
+      "resolved": "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
       "dev": true
     },
     "node_modules/@types/semver": {
diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx
index 35ba545..2e8e6e0 100644
--- a/src/components/Playground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -3,12 +3,13 @@ import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
 import '@/components/Playground/CodeEditor/Editor/editor.scss'
 import '@/components/Playground/CodeEditor/Editor/loader'
-import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
-import { fileNameToLanguage } from '@/components/Playground/files'
+import { IEditorOptions, IFiles, ITheme, ITsConfig } from '@/components/Playground/shared'
+import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'
 import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks'
 import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
 
 interface EditorProps {
+    tsConfig?: ITsConfig
     files?: IFiles
     selectedFileName?: string
     readonly?: boolean
@@ -19,6 +20,7 @@ interface EditorProps {
 }
 
 const Editor: React.FC<EditorProps> = ({
+    tsConfig,
     files = {},
     selectedFileName = '',
     readonly,
@@ -28,6 +30,7 @@ const Editor: React.FC<EditorProps> = ({
     onJumpFile
 }) => {
     const editorRef = useRef<editor.IStandaloneCodeEditor>()
+    const monacoRef = useRef<Monaco>()
     const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor()
     const jsxSyntaxHighlightRef = useRef<{
         highlighter: (code?: string | undefined) => void
@@ -39,16 +42,12 @@ const Editor: React.FC<EditorProps> = ({
     const { total, finished, onWatch } = useTypesProgress()
     const file = files[selectedFileName] || { name: 'Untitled' }
 
-    const handleOnEditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
-        editorRef.current = editor
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
-            void editor.getAction('editor.action.formatDocument')?.run()
-        })
-
-        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-            jsx: monaco.languages.typescript.JsxEmit.Preserve,
-            esModuleInterop: true
-        })
+    const handleOnEditorWillMount = (monaco: Monaco) => {
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions(tsconfigJsonDiagnosticsOptions)
+        tsConfig &&
+            monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
+                tsConfig.compilerOptions
+            )
 
         files &&
             Object.entries(files).forEach(([key]) => {
@@ -60,6 +59,15 @@ const Editor: React.FC<EditorProps> = ({
                     )
                 }
             })
+    }
+
+    const handleOnEditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+        editorRef.current = editor
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+            void editor.getAction('editor.action.formatDocument')?.run()
+        })
+
+        monacoRef.current = monaco
 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
@@ -85,6 +93,13 @@ const Editor: React.FC<EditorProps> = ({
         jsxSyntaxHighlightRef?.current?.highlighter?.()
     }, [file.name])
 
+    useEffect(() => {
+        tsConfig &&
+            monacoRef.current?.languages.typescript.typescriptDefaults.setCompilerOptions(
+                tsConfig.compilerOptions
+            )
+    }, [tsConfig])
+
     return (
         <>
             <div data-component={'playground-code-editor-editor'}>
@@ -95,6 +110,7 @@ const Editor: React.FC<EditorProps> = ({
                     language={file.language}
                     value={file.value}
                     onChange={onChange}
+                    beforeMount={handleOnEditorWillMount}
                     onMount={handleOnEditorDidMount}
                     options={{
                         ...MonacoEditorConfig,
diff --git a/src/components/Playground/CodeEditor/FileSelector/Item.tsx b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
index 209c245..d81b507 100644
--- a/src/components/Playground/CodeEditor/FileSelector/Item.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
@@ -85,6 +85,7 @@ const Item: React.FC<ItemProps> = ({
         setFileName(value)
         setTimeout(() => {
             inputRef.current?.focus()
+            inputRef.current?.setSelectionRange(0, inputRef.current?.value.lastIndexOf('.'))
         })
     }
 
@@ -119,6 +120,7 @@ const Item: React.FC<ItemProps> = ({
                         onChange={handleOnChange}
                         onBlur={finishNameFile}
                         onKeyDown={handleKeyDown}
+                        spellCheck={'false'}
                     />
                     <span className={'tab-item-input-mask'}>{fileName}</span>
                 </div>
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index 5f07aa5..5bacab9 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -3,7 +3,11 @@ import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles } from '@/components/Playground/shared'
-import { getFileNameList, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
+import {
+    getFileNameList,
+    IMPORT_MAP_FILE_NAME,
+    TS_CONFIG_FILE_NAME
+} from '@/components/Playground/files'
 import Item from '@/components/Playground/CodeEditor/FileSelector/Item'
 
 interface FileSelectorProps {
@@ -85,6 +89,14 @@ const FileSelector: React.FC<FileSelectorProps> = ({
         onChange?.(IMPORT_MAP_FILE_NAME)
     }
 
+    const editTsConfig = () => {
+        if (hasEditing) {
+            return
+        }
+
+        onChange?.(TS_CONFIG_FILE_NAME)
+    }
+
     const handleOnSaveTab = (value: string, item: string) => {
         if (creating) {
             onAddFile?.(value)
@@ -122,7 +134,9 @@ const FileSelector: React.FC<FileSelectorProps> = ({
         onRemoveFile?.(fileName)
         if (fileName === selectedFileName) {
             const keys = getFileNameList(files).filter(
-                (item) => ![IMPORT_MAP_FILE_NAME].includes(item) && !files[item].hidden
+                (item) =>
+                    ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) &&
+                    !files[item].hidden
             )
             const index = keys.indexOf(fileName) - 1
             if (index >= 0) {
@@ -137,7 +151,9 @@ const FileSelector: React.FC<FileSelectorProps> = ({
         getFileNameList(files).length
             ? setTabs(
                   getFileNameList(files).filter(
-                      (item) => ![IMPORT_MAP_FILE_NAME].includes(item) && !files[item].hidden
+                      (item) =>
+                          ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) &&
+                          !files[item].hidden
                   )
               )
             : setTabs([])
@@ -179,14 +195,24 @@ const FileSelector: React.FC<FileSelectorProps> = ({
                         </FlexBox>
                     </HideScrollbar>
                 </div>
-                {files[IMPORT_MAP_FILE_NAME] && (
+                {(files[IMPORT_MAP_FILE_NAME] || files[TS_CONFIG_FILE_NAME]) && (
                     <div className={'sticky'}>
-                        <Item
-                            value={'Import Map'}
-                            active={selectedFileName === IMPORT_MAP_FILE_NAME}
-                            onClick={editImportMap}
-                            readonly
-                        />
+                        {files[TS_CONFIG_FILE_NAME] && (
+                            <Item
+                                value={'tsconfig.json'}
+                                active={selectedFileName === TS_CONFIG_FILE_NAME}
+                                onClick={editTsConfig}
+                                readonly
+                            />
+                        )}
+                        {files[IMPORT_MAP_FILE_NAME] && (
+                            <Item
+                                value={'Import Map'}
+                                active={selectedFileName === IMPORT_MAP_FILE_NAME}
+                                onClick={editImportMap}
+                                readonly
+                            />
+                        )}
                     </div>
                 )}
             </div>
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index 93d7e0b..0062904 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -2,17 +2,19 @@ import React from 'react'
 import _ from 'lodash'
 import '@/components/Playground/CodeEditor/code-editor.scss'
 import FlexBox from '@/components/common/FlexBox'
-import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
+import { IEditorOptions, IFiles, ITheme, ITsConfig } from '@/components/Playground/shared'
 import {
     fileNameToLanguage,
     getFileNameList,
-    IMPORT_MAP_FILE_NAME
+    IMPORT_MAP_FILE_NAME,
+    TS_CONFIG_FILE_NAME
 } from '@/components/Playground/files'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
 import Editor from '@/components/Playground/CodeEditor/Editor'
 
 interface CodeEditorProps {
     theme?: ITheme
+    tsConfig?: ITsConfig
     files: IFiles
     readonly?: boolean
     readonlyFiles?: string[]
@@ -29,6 +31,7 @@ interface CodeEditorProps {
 
 const CodeEditor: React.FC<CodeEditorProps> = ({
     theme,
+    tsConfig,
     files,
     readonly,
     readonlyFiles,
@@ -43,7 +46,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     ...props
 }) => {
     const filteredFilesName = getFileNameList(files).filter(
-        (item) => ![IMPORT_MAP_FILE_NAME].includes(item) && !files[item].hidden
+        (item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden
     )
     const propsSelectedFileName =
         props.selectedFileName || (filteredFilesName.length ? filteredFilesName[0] : '')
@@ -101,7 +104,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
         }
     }
 
-    const handleOnChangeFileContent = _.debounce((code = '') => {
+    const handleOnChangeFileContent = _.debounce((code: string = '') => {
         if (!files[onSelectedFileChange ? propsSelectedFileName : selectedFileName]) {
             return
         }
@@ -131,6 +134,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                     onError={handleOnError}
                 />
                 <Editor
+                    tsConfig={tsConfig}
                     theme={theme}
                     selectedFileName={
                         onSelectedFileChange ? propsSelectedFileName : selectedFileName
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index e876732..3e3ca26 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -1,10 +1,18 @@
 import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
-import { IFile, IFiles, IImportMap, ILanguage } from '@/components/Playground/shared'
-import importMap from '@/components/Playground/template/import-map.json?raw'
+import { IFile, IFiles, IImportMap, ILanguage, ITsConfig } from '@/components/Playground/shared'
 import AppCss from '@/components/Playground/template/src/App.css?raw'
 import App from '@/components/Playground/template/src/App.tsx?raw'
 import main from '@/components/Playground/template/src/main.tsx?raw'
+import tsconfigSchema from '@/components/Playground/tsconfig-schema.json'
+import importMapSchema from '@/components/Playground/import-map-schema.json'
+import { languages } from 'monaco-editor'
+import DiagnosticsOptions = languages.json.DiagnosticsOptions
+import ScriptTarget = languages.typescript.ScriptTarget
+import ModuleKind = languages.typescript.ModuleKind
+import ModuleResolutionKind = languages.typescript.ModuleResolutionKind
+import JsxEmit = languages.typescript.JsxEmit
 
+export const TS_CONFIG_FILE_NAME = 'tsconfig.json'
 export const MAIN_FILE_NAME = 'App.tsx'
 export const IMPORT_MAP_FILE_NAME = 'import-map.json'
 export const ENTRY_FILE_NAME = 'main.tsx'
@@ -97,6 +105,28 @@ export const addReactImport = (code: string) => {
     return code
 }
 
+export const tsconfigJsonDiagnosticsOptions: DiagnosticsOptions = {
+    validate: true,
+    schemas: [
+        {
+            uri: 'tsconfig.json',
+            fileMatch: ['tsconfig.json'],
+            schema: {
+                type: 'object',
+                properties: tsconfigSchema
+            }
+        },
+        {
+            uri: 'import-map.json',
+            fileMatch: ['import-map.json'],
+            schema: {
+                type: 'object',
+                properties: importMapSchema
+            }
+        }
+    ]
+}
+
 export const initFiles: IFiles = getFilesFromUrl() || {
     [ENTRY_FILE_NAME]: {
         name: ENTRY_FILE_NAME,
@@ -123,15 +153,24 @@ export const initImportMap: IImportMap = {
     }
 }
 
-export const reactTemplateFiles = {
-    [ENTRY_FILE_NAME]: {
-        name: ENTRY_FILE_NAME,
-        language: fileNameToLanguage(ENTRY_FILE_NAME),
-        value: main
-    },
-    [IMPORT_MAP_FILE_NAME]: {
-        name: IMPORT_MAP_FILE_NAME,
-        language: fileNameToLanguage(IMPORT_MAP_FILE_NAME),
-        value: importMap
+export const initTsConfig: ITsConfig = {
+    compilerOptions: {
+        target: ScriptTarget.ES2020,
+        useDefineForClassFields: true,
+        module: ModuleKind.ESNext,
+        skipLibCheck: true,
+        moduleResolution: ModuleResolutionKind.NodeJs,
+        allowImportingTsExtensions: true,
+        resolveJsonModule: true,
+        isolatedModules: true,
+        noEmit: true,
+        jsx: JsxEmit.ReactJSX,
+        strict: true,
+        noUnusedLocals: true,
+        noUnusedParameters: true,
+        noFallthroughCasesInSwitch: true,
+        composite: true,
+        types: ['node'],
+        allowSyntheticDefaultImports: true
     }
 }
diff --git a/src/components/Playground/import-map-schema.json b/src/components/Playground/import-map-schema.json
new file mode 100644
index 0000000..9c6f4b3
--- /dev/null
+++ b/src/components/Playground/import-map-schema.json
@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "type": "object",
+    "description": "Import map"
+  }
+}
\ No newline at end of file
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index c7d2fbb..9fa22b4 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,39 +1,95 @@
-import React from 'react'
+import React, { useState } from 'react'
 import '@/components/Playground/playground.scss'
-import { IFiles, IImportMap } from '@/components/Playground/shared'
-import { IMPORT_MAP_FILE_NAME, MAIN_FILE_NAME } from '@/components/Playground/files'
+import { useUpdatedEffect } from '@/util/hooks'
+import { IFiles, IImportMap, ITsConfig } from '@/components/Playground/shared'
+import {
+    IMPORT_MAP_FILE_NAME,
+    MAIN_FILE_NAME,
+    TS_CONFIG_FILE_NAME
+} from '@/components/Playground/files'
 import FlexBox from '@/components/common/FlexBox'
 import CodeEditor from '@/components/Playground/CodeEditor'
 import Output from '@/components/Playground/Output'
 
 interface PlaygroundProps {
     initFiles: IFiles
-    initImportMap: IImportMap
+    initImportMapRaw: string
+    initTsConfigRaw: string
 }
 
-const Playground: React.FC<PlaygroundProps> = ({ initFiles, initImportMap }) => {
+const Playground: React.FC<PlaygroundProps> = ({
+    initFiles,
+    initImportMapRaw,
+    initTsConfigRaw
+}) => {
     const [files, setFiles] = useState(initFiles)
     const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
-    const [importMap, setImportMap] = useState<IImportMap>(initImportMap)
+    const [importMapRaw, setImportMapRaw] = useState<string>(initImportMapRaw)
+    const [importMap, setImportMap] = useState<IImportMap>()
+    const [tsConfigRaw, setTsConfigRaw] = useState<string>(initTsConfigRaw)
+    const [tsConfig, setTsConfig] = useState<ITsConfig>()
+
+    if (!importMap) {
+        try {
+            setImportMap(JSON.parse(importMapRaw) as IImportMap)
+        } catch (e) {
+            setImportMap({ imports: {} })
+        }
+    }
+    if (!tsConfig) {
+        try {
+            setTsConfig(JSON.parse(tsConfigRaw) as ITsConfig)
+        } catch (e) {
+            setTsConfig({ compilerOptions: {} })
+        }
+    }
 
     const handleOnChangeFileContent = (content: string, fileName: string, files: IFiles) => {
         if (fileName === IMPORT_MAP_FILE_NAME) {
-            setImportMap(JSON.parse(content) as IImportMap)
-        } else {
-            delete files[IMPORT_MAP_FILE_NAME]
-            setFiles(files)
+            setImportMapRaw(content)
+            return
         }
+        if (fileName === TS_CONFIG_FILE_NAME) {
+            setTsConfigRaw(content)
+            return
+        }
+
+        delete files[IMPORT_MAP_FILE_NAME]
+        delete files[TS_CONFIG_FILE_NAME]
+        setFiles(files)
     }
 
+    useUpdatedEffect(() => {
+        try {
+            setImportMap(JSON.parse(importMapRaw) as IImportMap)
+        } catch (e) {
+            /* empty */
+        }
+    }, [importMapRaw])
+
+    useUpdatedEffect(() => {
+        try {
+            setTsConfig(JSON.parse(tsConfigRaw) as ITsConfig)
+        } catch (e) {
+            /* empty */
+        }
+    }, [tsConfigRaw])
+
     return (
         <FlexBox data-component={'playground'} direction={'horizontal'}>
             <CodeEditor
+                tsConfig={tsConfig}
                 files={{
                     ...files,
                     'import-map.json': {
                         name: IMPORT_MAP_FILE_NAME,
                         language: 'json',
-                        value: JSON.stringify(importMap, null, 2)
+                        value: importMapRaw
+                    },
+                    'tsconfig.json': {
+                        name: TS_CONFIG_FILE_NAME,
+                        language: 'json',
+                        value: tsConfigRaw
                     }
                 }}
                 selectedFileName={selectedFileName}
@@ -43,7 +99,7 @@ const Playground: React.FC<PlaygroundProps> = ({ initFiles, initImportMap }) =>
                 onChangeFileContent={handleOnChangeFileContent}
                 onSelectedFileChange={setSelectedFileName}
             />
-            <Output files={files} selectedFileName={selectedFileName} importMap={importMap} />
+            <Output files={files} selectedFileName={selectedFileName} importMap={importMap!} />
         </FlexBox>
     )
 }
diff --git a/src/components/Playground/shared.ts b/src/components/Playground/shared.ts
index 0e07563..6c3dbb1 100644
--- a/src/components/Playground/shared.ts
+++ b/src/components/Playground/shared.ts
@@ -1,4 +1,5 @@
-import { editor } from 'monaco-editor'
+import { editor, languages } from 'monaco-editor'
+import CompilerOptions = languages.typescript.CompilerOptions
 
 export type ILanguage = 'javascript' | 'typescript' | 'json' | 'css' | 'xml'
 
@@ -17,6 +18,10 @@ export interface IImportMap {
     imports: Record<string, string>
 }
 
+export interface ITsConfig {
+    compilerOptions: CompilerOptions
+}
+
 export type ITheme = 'light' | 'vs-dark'
 
 export type IEditorOptions = editor.IStandaloneEditorConstructionOptions
diff --git a/src/components/Playground/tsconfig-schema.json b/src/components/Playground/tsconfig-schema.json
new file mode 100644
index 0000000..c6fb943
--- /dev/null
+++ b/src/components/Playground/tsconfig-schema.json
@@ -0,0 +1,820 @@
+{
+  "compilerOptions": {
+    "type": "object",
+    "description": "Instructs the TypeScript compiler how to compile .ts files.",
+    "properties": {
+      "allowJs": {
+        "description": "Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowJs"
+      },
+      "allowSyntheticDefaultImports": {
+        "description": "Allow 'import x from y' when a module doesn't have a default export.",
+        "type": "boolean",
+        "markdownDescription": "Allow 'import x from y' when a module doesn't have a default export.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports"
+      },
+      "allowUmdGlobalAccess": {
+        "description": "Allow accessing UMD globals from modules.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Allow accessing UMD globals from modules.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowUmdGlobalAccess"
+      },
+      "allowUnreachableCode": {
+        "description": "Disable error reporting for unreachable code.",
+        "type": "boolean",
+        "markdownDescription": "Disable error reporting for unreachable code.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowUnreachableCode"
+      },
+      "allowUnusedLabels": {
+        "description": "Disable error reporting for unused labels.",
+        "type": "boolean",
+        "markdownDescription": "Disable error reporting for unused labels.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowUnusedLabels"
+      },
+      "alwaysStrict": {
+        "description": "Ensure 'use strict' is always emitted.",
+        "type": "boolean",
+        "markdownDescription": "Ensure 'use strict' is always emitted.\n\nSee more: https://www.typescriptlang.org/tsconfig#alwaysStrict"
+      },
+      "baseUrl": {
+        "description": "Specify the base directory to resolve non-relative module names.",
+        "type": "string",
+        "markdownDescription": "Specify the base directory to resolve non-relative module names.\n\nSee more: https://www.typescriptlang.org/tsconfig#baseUrl"
+      },
+      "charset": {
+        "description": "No longer supported. In early versions, manually set the text encoding for reading files.",
+        "type": "string",
+        "markdownDescription": "No longer supported. In early versions, manually set the text encoding for reading files.\n\nSee more: https://www.typescriptlang.org/tsconfig#charset"
+      },
+      "checkJs": {
+        "description": "Enable error reporting in type-checked JavaScript files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable error reporting in type-checked JavaScript files.\n\nSee more: https://www.typescriptlang.org/tsconfig#checkJs"
+      },
+      "declaration": {
+        "description": "Generate .d.ts files from TypeScript and JavaScript files in your project.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Generate .d.ts files from TypeScript and JavaScript files in your project.\n\nSee more: https://www.typescriptlang.org/tsconfig#declaration"
+      },
+      "declarationMap": {
+        "description": "Create sourcemaps for d.ts files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Create sourcemaps for d.ts files.\n\nSee more: https://www.typescriptlang.org/tsconfig#declarationMap"
+      },
+      "emitDeclarationOnly": {
+        "description": "Only output d.ts files and not JavaScript files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Only output d.ts files and not JavaScript files.\n\nSee more: https://www.typescriptlang.org/tsconfig#emitDeclarationOnly"
+      },
+      "declarationDir": {
+        "description": "Specify the output directory for generated declaration files.",
+        "type": ["string", "null"],
+        "markdownDescription": "Specify the output directory for generated declaration files.\n\nSee more: https://www.typescriptlang.org/tsconfig#declarationDir"
+      },
+      "disableSizeLimit": {
+        "description": "Remove the 20mb cap on total source code size for JavaScript files in the TypeScript language server.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Remove the 20mb cap on total source code size for JavaScript files in the TypeScript language server.\n\nSee more: https://www.typescriptlang.org/tsconfig#disableSizeLimit"
+      },
+      "disableSourceOfProjectReferenceRedirect": {
+        "description": "Disable preferring source files instead of declaration files when referencing composite projects",
+        "type": "boolean",
+        "markdownDescription": "Disable preferring source files instead of declaration files when referencing composite projects\n\nSee more: https://www.typescriptlang.org/tsconfig#disableSourceOfProjectReferenceRedirect"
+      },
+      "downlevelIteration": {
+        "description": "Emit more compliant, but verbose and less performant JavaScript for iteration.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Emit more compliant, but verbose and less performant JavaScript for iteration.\n\nSee more: https://www.typescriptlang.org/tsconfig#downlevelIteration"
+      },
+      "emitBOM": {
+        "description": "Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files.\n\nSee more: https://www.typescriptlang.org/tsconfig#emitBOM"
+      },
+      "emitDecoratorMetadata": {
+        "description": "Emit design-type metadata for decorated declarations in source files.",
+        "type": "boolean",
+        "markdownDescription": "Emit design-type metadata for decorated declarations in source files.\n\nSee more: https://www.typescriptlang.org/tsconfig#emitDecoratorMetadata"
+      },
+      "experimentalDecorators": {
+        "description": "Enable experimental support for TC39 stage 2 draft decorators.",
+        "type": "boolean",
+        "markdownDescription": "Enable experimental support for TC39 stage 2 draft decorators.\n\nSee more: https://www.typescriptlang.org/tsconfig#experimentalDecorators"
+      },
+      "forceConsistentCasingInFileNames": {
+        "description": "Ensure that casing is correct in imports.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Ensure that casing is correct in imports.\n\nSee more: https://www.typescriptlang.org/tsconfig#forceConsistentCasingInFileNames"
+      },
+      "importHelpers": {
+        "description": "Allow importing helper functions from tslib once per project, instead of including them per-file.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Allow importing helper functions from tslib once per project, instead of including them per-file.\n\nSee more: https://www.typescriptlang.org/tsconfig#importHelpers"
+      },
+      "inlineSourceMap": {
+        "description": "Include sourcemap files inside the emitted JavaScript.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Include sourcemap files inside the emitted JavaScript.\n\nSee more: https://www.typescriptlang.org/tsconfig#inlineSourceMap"
+      },
+      "inlineSources": {
+        "description": "Include source code in the sourcemaps inside the emitted JavaScript.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Include source code in the sourcemaps inside the emitted JavaScript.\n\nSee more: https://www.typescriptlang.org/tsconfig#inlineSources"
+      },
+      "isolatedModules": {
+        "description": "Ensure that each file can be safely transpiled without relying on other imports.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Ensure that each file can be safely transpiled without relying on other imports.\n\nSee more: https://www.typescriptlang.org/tsconfig#isolatedModules"
+      },
+      "jsx": {
+        "description": "Specify what JSX code is generated.",
+        "enum": [0, 1, 2, 3, 4, 5],
+        "markdownDescription": "Specify what JSX code is generated.\n\n0 = none\n\n1 = preserve\n\n2 = react\n\n3 = react-native\n\n4 = react-jsx\n\n5 = react-jsxdev"
+      },
+      "keyofStringsOnly": {
+        "description": "Make keyof only return strings instead of string, numbers or symbols. Legacy option.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Make keyof only return strings instead of string, numbers or symbols. Legacy option.\n\nSee more: https://www.typescriptlang.org/tsconfig#keyofStringsOnly"
+      },
+      "lib": {
+        "description": "Specify a set of bundled library declaration files that describe the target runtime environment.",
+        "type": "array",
+        "uniqueItems": true,
+        "items": {
+          "type": "string",
+          "anyOf": [
+            {
+              "enum": [
+                "ES5",
+                "ES6",
+                "ES2015",
+                "ES2015.Collection",
+                "ES2015.Core",
+                "ES2015.Generator",
+                "ES2015.Iterable",
+                "ES2015.Promise",
+                "ES2015.Proxy",
+                "ES2015.Reflect",
+                "ES2015.Symbol.WellKnown",
+                "ES2015.Symbol",
+                "ES2016",
+                "ES2016.Array.Include",
+                "ES2017",
+                "ES2017.Intl",
+                "ES2017.Object",
+                "ES2017.SharedMemory",
+                "ES2017.String",
+                "ES2017.TypedArrays",
+                "ES2018",
+                "ES2018.AsyncGenerator",
+                "ES2018.AsyncIterable",
+                "ES2018.Intl",
+                "ES2018.Promise",
+                "ES2018.Regexp",
+                "ES2019",
+                "ES2019.Array",
+                "ES2019.Intl",
+                "ES2019.Object",
+                "ES2019.String",
+                "ES2019.Symbol",
+                "ES2020",
+                "ES2020.BigInt",
+                "ES2020.Promise",
+                "ES2020.String",
+                "ES2020.Symbol.WellKnown",
+                "ESNext",
+                "ESNext.Array",
+                "ESNext.AsyncIterable",
+                "ESNext.BigInt",
+                "ESNext.Intl",
+                "ESNext.Promise",
+                "ESNext.String",
+                "ESNext.Symbol",
+                "DOM",
+                "DOM.Iterable",
+                "ScriptHost",
+                "WebWorker",
+                "WebWorker.ImportScripts",
+                "Webworker.Iterable",
+                "ES7",
+                "ES2021",
+                "ES2020.SharedMemory",
+                "ES2020.Intl",
+                "ES2020.Date",
+                "ES2020.Number",
+                "ES2021.Promise",
+                "ES2021.String",
+                "ES2021.WeakRef",
+                "ESNext.WeakRef",
+                "ES2021.Intl",
+                "ES2022",
+                "ES2022.Array",
+                "ES2022.Error",
+                "ES2022.Intl",
+                "ES2022.Object",
+                "ES2022.String",
+                "ES2022.SharedMemory",
+                "ES2022.RegExp",
+                "ES2023",
+                "ES2023.Array",
+                "Decorators",
+                "Decorators.Legacy",
+                "ES2017.Date",
+                "ES2023.Collection",
+                "ESNext.Decorators",
+                "ESNext.Disposable"
+              ]
+            },
+            {
+              "pattern": "^[Ee][Ss]5|[Ee][Ss]6|[Ee][Ss]7$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2015(\\.([Cc][Oo][Ll][Ll][Ee][Cc][Tt][Ii][Oo][Nn]|[Cc][Oo][Rr][Ee]|[Gg][Ee][Nn][Ee][Rr][Aa][Tt][Oo][Rr]|[Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Pp][Rr][Oo][Xx][Yy]|[Rr][Ee][Ff][Ll][Ee][Cc][Tt]|[Ss][Yy][Mm][Bb][Oo][Ll]\\.[Ww][Ee][Ll][Ll][Kk][Nn][Oo][Ww][Nn]|[Ss][Yy][Mm][Bb][Oo][Ll]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2016(\\.[Aa][Rr][Rr][Aa][Yy]\\.[Ii][Nn][Cc][Ll][Uu][Dd][Ee])?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2017(\\.([Ii][Nn][Tt][Ll]|[Oo][Bb][Jj][Ee][Cc][Tt]|[Ss][Hh][Aa][Rr][Ee][Dd][Mm][Ee][Mm][Oo][Rr][Yy]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Tt][Yy][Pp][Ee][Dd][Aa][Rr][Rr][Aa][Yy][Ss]|[Dd][Aa][Tt][Ee]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2018(\\.([Aa][Ss][Yy][Nn][Cc][Gg][Ee][Nn][Ee][Rr][Aa][Tt][Oo][Rr]|[Aa][Ss][Yy][Nn][Cc][Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee]|[Ii][Nn][Tt][Ll]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Rr][Ee][Gg][Ee][Xx][Pp]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2019(\\.([Aa][Rr][Rr][Aa][Yy]|[Ii][Nn][Tt][Ll]|[Oo][Bb][Jj][Ee][Cc][Tt]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ss][Yy][Mm][Bb][Oo][Ll]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2020(\\.([Bb][Ii][Gg][Ii][Nn][Tt]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ss][Yy][Mm][Bb][Oo][Ll]\\.[Ww][Ee][Ll][Ll][Kk][Nn][Oo][Ww][Nn]|[Ss][Hh][Aa][Rr][Ee][Dd][Mm][Ee][Mm][Oo][Rr][Yy]|[Ii][Nn][Tt][Ll]|[Dd][Aa][Tt][Ee]|[Nn][Uu][Mm][Bb][Ee][Rr]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2021(\\.([Ii][Nn][Tt][Ll]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ww][Ee][Aa][Kk][Rr][Ee][Ff]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2022(\\.([Aa][Rr][Rr][Aa][Yy]|[Ee][Rr][Rr][Oo][Rr]|[Ii][Nn][Tt][Ll]|[Oo][Bb][Jj][Ee][Cc][Tt]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ss][Hh][Aa][Rr][Ee][Dd][Mm][Ee][Mm][Oo][Rr][Yy]|[Rr][Ee][Gg][Ee][Xx][Pp]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss]2023(\\.([Aa][Rr][Rr][Aa][Yy]|[Cc][Oo][Ll][Ll][Ee][Cc][Tt][Ii][Oo][Nn]))?$"
+            },
+            {
+              "pattern": "^[Ee][Ss][Nn][Ee][Xx][Tt](\\.([Aa][Rr][Rr][Aa][Yy]|[Aa][Ss][Yy][Nn][Cc][Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee]|[Bb][Ii][Gg][Ii][Nn][Tt]|[Ii][Nn][Tt][Ll]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ss][Yy][Mm][Bb][Oo][Ll]|[Ww][Ee][Aa][Kk][Rr][Ee][Ff]|[Dd][Ee][Cc][Oo][Rr][Aa][Tt][Oo][Rr][Ss]|[Dd][Ii][Ss][Pp][Oo][Ss][Aa][Bb][Ll][Ee]))?$"
+            },
+            {
+              "pattern": "^[Dd][Oo][Mm](\\.[Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee])?$"
+            },
+            {
+              "pattern": "^[Ss][Cc][Rr][Ii][Pp][Tt][Hh][Oo][Ss][Tt]$"
+            },
+            {
+              "pattern": "^[Ww][Ee][Bb][Ww][Oo][Rr][Kk][Ee][Rr](\\.([Ii][Mm][Pp][Oo][Rr][Tt][Ss][Cc][Rr][Ii][Pp][Tt][Ss]|[Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee]))?$"
+            },
+            {
+              "pattern": "^[Dd][Ee][Cc][Oo][Rr][Aa][Tt][Oo][Rr][Ss](\\.([Ll][Ee][Gg][Aa][Cc][Yy]))?$"
+            }
+          ]
+        },
+        "markdownDescription": "Specify a set of bundled library declaration files that describe the target runtime environment.\n\nSee more: https://www.typescriptlang.org/tsconfig#lib"
+      },
+      "locale": {
+        "description": "Locale",
+        "type": "string",
+        "markdownDescription": "Locale"
+      },
+      "mapRoot": {
+        "description": "Specify the location where debugger should locate map files instead of generated locations.",
+        "type": "string",
+        "markdownDescription": "Specify the location where debugger should locate map files instead of generated locations.\n\nSee more: https://www.typescriptlang.org/tsconfig#mapRoot"
+      },
+      "maxNodeModuleJsDepth": {
+        "description": "Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`.",
+        "type": "number",
+        "default": 0,
+        "markdownDescription": "Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`.\n\nSee more: https://www.typescriptlang.org/tsconfig#maxNodeModuleJsDepth"
+      },
+      "module": {
+        "description": "Specify what module code is generated.",
+        "type": "number",
+        "enum": [0, 1, 2, 3, 4, 5, 99],
+        "markdownDescription": "Specify what module code is generated.\n\n0 = None\n\n1 = CommonJS\n\n2 = AMD\n\n3 = UMD\n\n4 = System\n\n5 = ES2015\n\n99 = ESNext"
+      },
+      "moduleResolution": {
+        "description": "Specify how TypeScript looks up a file from a given module specifier.",
+        "type": "number",
+        "enum": [1, 2],
+        "markdownDescription": "Specify how TypeScript looks up a file from a given module specifier.\n\n1 = Classic\n\n2 = NodeJs"
+      },
+      "newLine": {
+        "description": "Set the newline character for emitting files.",
+        "type": "string",
+        "enum": [0, 1],
+        "markdownDescription": "Set the newline character for emitting files.\n\n0 = CarriageReturnLineFeed\n\n1 = LineFeed"
+      },
+      "noEmit": {
+        "description": "Disable emitting file from a compilation.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable emitting file from a compilation.\n\nSee more: https://www.typescriptlang.org/tsconfig#noEmit"
+      },
+      "noEmitHelpers": {
+        "description": "Disable generating custom helper functions like `__extends` in compiled output.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable generating custom helper functions like `__extends` in compiled output.\n\nSee more: https://www.typescriptlang.org/tsconfig#noEmitHelpers"
+      },
+      "noEmitOnError": {
+        "description": "Disable emitting files if any type checking errors are reported.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable emitting files if any type checking errors are reported.\n\nSee more: https://www.typescriptlang.org/tsconfig#noEmitOnError"
+      },
+      "noErrorTruncation": {
+        "description": "Disable truncating types in error messages.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable truncating types in error messages.\n\nSee more: https://www.typescriptlang.org/tsconfig#noErrorTruncation"
+      },
+      "noFallthroughCasesInSwitch": {
+        "description": "Enable error reporting for fallthrough cases in switch statements.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable error reporting for fallthrough cases in switch statements.\n\nSee more: https://www.typescriptlang.org/tsconfig#noFallthroughCasesInSwitch"
+      },
+      "noImplicitAny": {
+        "description": "Enable error reporting for expressions and declarations with an implied `any` type..",
+        "type": "boolean",
+        "markdownDescription": "Enable error reporting for expressions and declarations with an implied `any` type..\n\nSee more: https://www.typescriptlang.org/tsconfig#noImplicitAny"
+      },
+      "noImplicitReturns": {
+        "description": "Enable error reporting for codepaths that do not explicitly return in a function.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable error reporting for codepaths that do not explicitly return in a function.\n\nSee more: https://www.typescriptlang.org/tsconfig#noImplicitReturns"
+      },
+      "noImplicitThis": {
+        "description": "Enable error reporting when `this` is given the type `any`.",
+        "type": "boolean",
+        "markdownDescription": "Enable error reporting when `this` is given the type `any`.\n\nSee more: https://www.typescriptlang.org/tsconfig#noImplicitThis"
+      },
+      "noStrictGenericChecks": {
+        "description": "Disable strict checking of generic signatures in function types.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable strict checking of generic signatures in function types.\n\nSee more: https://www.typescriptlang.org/tsconfig#noStrictGenericChecks"
+      },
+      "noUnusedLocals": {
+        "description": "Enable error reporting when a local variables aren't read.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable error reporting when a local variables aren't read.\n\nSee more: https://www.typescriptlang.org/tsconfig#noUnusedLocals"
+      },
+      "noUnusedParameters": {
+        "description": "Raise an error when a function parameter isn't read",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Raise an error when a function parameter isn't read\n\nSee more: https://www.typescriptlang.org/tsconfig#noUnusedParameters"
+      },
+      "noImplicitUseStrict": {
+        "description": "Disable adding 'use strict' directives in emitted JavaScript files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable adding 'use strict' directives in emitted JavaScript files.\n\nSee more: https://www.typescriptlang.org/tsconfig#noImplicitUseStrict"
+      },
+      "noLib": {
+        "description": "Disable including any library files, including the default lib.d.ts.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable including any library files, including the default lib.d.ts.\n\nSee more: https://www.typescriptlang.org/tsconfig#noLib"
+      },
+      "noResolve": {
+        "description": "Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project.\n\nSee more: https://www.typescriptlang.org/tsconfig#noResolve"
+      },
+      "out": {
+        "description": "Out",
+        "type": "string",
+        "markdownDescription": "Out"
+      },
+      "outFile": {
+        "description": "Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output.",
+        "type": "string",
+        "markdownDescription": "Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output.\n\nSee more: https://www.typescriptlang.org/tsconfig#outFile"
+      },
+      "outDir": {
+        "description": "Specify an output folder for all emitted files.",
+        "type": "string",
+        "markdownDescription": "Specify an output folder for all emitted files.\n\nSee more: https://www.typescriptlang.org/tsconfig#outDir"
+      },
+      "paths": {
+        "description": "Specify a set of entries that re-map imports to additional lookup locations.",
+        "type": "object",
+        "additionalProperties": {
+          "type": "array",
+          "uniqueItems": true,
+          "items": {
+            "type": "string",
+            "description": "Path mapping to be computed relative to baseUrl option."
+          }
+        },
+        "markdownDescription": "Specify a set of entries that re-map imports to additional lookup locations.\n\nSee more: https://www.typescriptlang.org/tsconfig#paths"
+      },
+      "preserveConstEnums": {
+        "description": "Disable erasing `const enum` declarations in generated code.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable erasing `const enum` declarations in generated code.\n\nSee more: https://www.typescriptlang.org/tsconfig#preserveConstEnums"
+      },
+      "preserveSymlinks": {
+        "description": "Disable resolving symlinks to their realpath. This correlates to the same flag in node.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable resolving symlinks to their realpath. This correlates to the same flag in node.\n\nSee more: https://www.typescriptlang.org/tsconfig#preserveSymlinks"
+      },
+      "project": {
+        "description": "Project",
+        "type": "string",
+        "markdownDescription": "Project"
+      },
+      "reactNamespace": {
+        "description": "Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit.",
+        "type": "string",
+        "default": "React",
+        "markdownDescription": "Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit.\n\nSee more: https://www.typescriptlang.org/tsconfig#reactNamespace"
+      },
+      "jsxFactory": {
+        "description": "Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'",
+        "type": "string",
+        "default": "React.createElement",
+        "markdownDescription": "Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'\n\nSee more: https://www.typescriptlang.org/tsconfig#jsxFactory"
+      },
+      "composite": {
+        "description": "Enable constraints that allow a TypeScript project to be used with project references.",
+        "type": "boolean",
+        "default": true,
+        "markdownDescription": "Enable constraints that allow a TypeScript project to be used with project references.\n\nSee more: https://www.typescriptlang.org/tsconfig#composite"
+      },
+      "removeComments": {
+        "description": "Disable emitting comments.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable emitting comments.\n\nSee more: https://www.typescriptlang.org/tsconfig#removeComments"
+      },
+      "rootDir": {
+        "description": "Specify the root folder within your source files.",
+        "type": "string",
+        "markdownDescription": "Specify the root folder within your source files.\n\nSee more: https://www.typescriptlang.org/tsconfig#rootDir"
+      },
+      "rootDirs": {
+        "description": "Allow multiple folders to be treated as one when resolving modules.",
+        "type": "array",
+        "uniqueItems": true,
+        "items": {
+          "type": "string"
+        },
+        "markdownDescription": "Allow multiple folders to be treated as one when resolving modules.\n\nSee more: https://www.typescriptlang.org/tsconfig#rootDirs"
+      },
+      "skipLibCheck": {
+        "description": "Skip type checking all .d.ts files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Skip type checking all .d.ts files.\n\nSee more: https://www.typescriptlang.org/tsconfig#skipLibCheck"
+      },
+      "skipDefaultLibCheck": {
+        "description": "Skip type checking .d.ts files that are included with TypeScript.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Skip type checking .d.ts files that are included with TypeScript.\n\nSee more: https://www.typescriptlang.org/tsconfig#skipDefaultLibCheck"
+      },
+      "sourceMap": {
+        "description": "Create source map files for emitted JavaScript files.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Create source map files for emitted JavaScript files.\n\nSee more: https://www.typescriptlang.org/tsconfig#sourceMap"
+      },
+      "sourceRoot": {
+        "description": "Specify the root path for debuggers to find the reference source code.",
+        "type": "string",
+        "markdownDescription": "Specify the root path for debuggers to find the reference source code.\n\nSee more: https://www.typescriptlang.org/tsconfig#sourceRoot"
+      },
+      "strict": {
+        "description": "Enable all strict type checking options.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable all strict type checking options.\n\nSee more: https://www.typescriptlang.org/tsconfig#strict"
+      },
+      "strictFunctionTypes": {
+        "description": "When assigning functions, check to ensure parameters and the return values are subtype-compatible.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "When assigning functions, check to ensure parameters and the return values are subtype-compatible.\n\nSee more: https://www.typescriptlang.org/tsconfig#strictFunctionTypes"
+      },
+      "strictBindCallApply": {
+        "description": "Check that the arguments for `bind`, `call`, and `apply` methods match the original function.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Check that the arguments for `bind`, `call`, and `apply` methods match the original function.\n\nSee more: https://www.typescriptlang.org/tsconfig#strictBindCallApply"
+      },
+      "strictNullChecks": {
+        "description": "When type checking, take into account `null` and `undefined`.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "When type checking, take into account `null` and `undefined`.\n\nSee more: https://www.typescriptlang.org/tsconfig#strictNullChecks"
+      },
+      "strictPropertyInitialization": {
+        "description": "Check for class properties that are declared but not set in the constructor.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Check for class properties that are declared but not set in the constructor.\n\nSee more: https://www.typescriptlang.org/tsconfig#strictPropertyInitialization"
+      },
+      "stripInternal": {
+        "description": "Disable emitting declarations that have `@internal` in their JSDoc comments.",
+        "type": "boolean",
+        "markdownDescription": "Disable emitting declarations that have `@internal` in their JSDoc comments.\n\nSee more: https://www.typescriptlang.org/tsconfig#stripInternal"
+      },
+      "suppressExcessPropertyErrors": {
+        "description": "Disable reporting of excess property errors during the creation of object literals.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Disable reporting of excess property errors during the creation of object literals.\n\nSee more: https://www.typescriptlang.org/tsconfig#suppressExcessPropertyErrors"
+      },
+      "suppressImplicitAnyIndexErrors": {
+        "description": "Suppress `noImplicitAny` errors when indexing objects that lack index signatures.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Suppress `noImplicitAny` errors when indexing objects that lack index signatures.\n\nSee more: https://www.typescriptlang.org/tsconfig#suppressImplicitAnyIndexErrors"
+      },
+      "target": {
+        "description": "Set the JavaScript language version for emitted JavaScript and include compatible library declarations.",
+        "type": "number",
+        "default": "ES3",
+        "enum": [0, 1, 2, 3, 4, 5, 6, 7, 99, 100, 99],
+        "markdownDescription": "Set the JavaScript language version for emitted JavaScript and include compatible library declarations.\n\n0 = ES3\n\n1 = ES5\n\n2 = ES2015\n\n3 = ES2016\n\n4 = ES2017\n\n5 = ES2018\n\n6 = ES2019\n\n7 = ES2020\n\n99 = ESNext\n\n100 = JSON\n\n99 = Latest"
+      },
+      "traceResolution": {
+        "description": "Enable tracing of the name resolution process. Requires TypeScript version 2.0 or later.",
+        "type": "boolean",
+        "default": false
+      },
+      "resolveJsonModule": {
+        "description": "Enable importing .json files",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Enable importing .json files\n\nSee more: https://www.typescriptlang.org/tsconfig#resolveJsonModule"
+      },
+      "types": {
+        "description": "Specify type package names to be included without being referenced in a source file.",
+        "type": "array",
+        "uniqueItems": true,
+        "items": {
+          "type": "string"
+        },
+        "markdownDescription": "Specify type package names to be included without being referenced in a source file.\n\nSee more: https://www.typescriptlang.org/tsconfig#types"
+      },
+      "typeRoots": {
+        "description": "Specify multiple folders that act like `./node_modules/@types`.",
+        "type": "array",
+        "uniqueItems": true,
+        "items": {
+          "type": "string"
+        },
+        "markdownDescription": "Specify multiple folders that act like `./node_modules/@types`.\n\nSee more: https://www.typescriptlang.org/tsconfig#typeRoots"
+      },
+      "esModuleInterop": {
+        "description": "Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility.\n\nSee more: https://www.typescriptlang.org/tsconfig#esModuleInterop"
+      },
+      "useDefineForClassFields": {
+        "description": "Emit ECMAScript-standard-compliant class fields.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Emit ECMAScript-standard-compliant class fields.\n\nSee more: https://www.typescriptlang.org/tsconfig#useDefineForClassFields"
+      },
+
+      "allowArbitraryExtensions": {
+        "description": "Enable importing files with any extension, provided a declaration file is present.",
+        "type": "boolean",
+        "markdownDescription": "Enable importing files with any extension, provided a declaration file is present.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions"
+      },
+      "allowImportingTsExtensions": {
+        "description": "Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set.",
+        "type": "boolean",
+        "markdownDescription": "Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set.\n\nSee more: https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions"
+      },
+      "customConditions": {
+        "description": "Conditions to set in addition to the resolver-specific defaults when resolving imports.",
+        "type": "array",
+        "uniqueItems": true,
+        "items": {
+          "type": "string"
+        },
+        "markdownDescription": "Conditions to set in addition to the resolver-specific defaults when resolving imports.\n\nSee more: https://www.typescriptlang.org/tsconfig#customConditions"
+      },
+      "diagnostics": {
+        "description": "Output compiler performance information after building.",
+        "type": "boolean",
+        "markdownDescription": "Output compiler performance information after building.\n\nSee more: https://www.typescriptlang.org/tsconfig#diagnostics"
+      },
+      "disableReferencedProjectLoad": {
+        "description": "Reduce the number of projects loaded automatically by TypeScript.",
+        "type": "boolean",
+        "markdownDescription": "Reduce the number of projects loaded automatically by TypeScript.\n\nSee more: https://www.typescriptlang.org/tsconfig#disableReferencedProjectLoad"
+      },
+      "noPropertyAccessFromIndexSignature": {
+        "description": "Enforces using indexed accessors for keys declared using an indexed type",
+        "type": "boolean",
+        "markdownDescription": "Enforces using indexed accessors for keys declared using an indexed type\n\nSee more: https://www.typescriptlang.org/tsconfig#noPropertyAccessFromIndexSignature"
+      },
+      "exactOptionalPropertyTypes": {
+        "description": "Differentiate between undefined and not present when type checking",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Differentiate between undefined and not present when type checking\n\nSee more: https://www.typescriptlang.org/tsconfig#exactOptionalPropertyTypes"
+      },
+      "incremental": {
+        "description": "Enable incremental compilation. Requires TypeScript version 3.4 or later.",
+        "type": "boolean"
+      },
+      "tsBuildInfoFile": {
+        "description": "Specify the folder for .tsbuildinfo incremental compilation files.",
+        "default": ".tsbuildinfo",
+        "type": "string",
+        "markdownDescription": "Specify the folder for .tsbuildinfo incremental compilation files.\n\nSee more: https://www.typescriptlang.org/tsconfig#tsBuildInfoFile"
+      },
+      "jsxFragmentFactory": {
+        "description": "Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'.",
+        "type": "string",
+        "default": "React.Fragment",
+        "markdownDescription": "Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'.\n\nSee more: https://www.typescriptlang.org/tsconfig#jsxFragmentFactory"
+      },
+      "jsxImportSource": {
+        "description": "Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx`.",
+        "type": "string",
+        "default": "react",
+        "markdownDescription": "Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx`.\n\nSee more: https://www.typescriptlang.org/tsconfig#jsxImportSource"
+      },
+      "listFiles": {
+        "description": "Print all of the files read during the compilation.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Print all of the files read during the compilation.\n\nSee more: https://www.typescriptlang.org/tsconfig#listFiles"
+      },
+      "preserveValueImports": {
+        "description": "Preserve unused imported values in the JavaScript output that would otherwise be removed",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Preserve unused imported values in the JavaScript output that would otherwise be removed\n\nSee more: https://www.typescriptlang.org/tsconfig#preserveValueImports"
+      },
+      "preserveWatchOutput": {
+        "description": "Disable wiping the console in watch mode",
+        "type": "boolean",
+        "markdownDescription": "Disable wiping the console in watch mode\n\nSee more: https://www.typescriptlang.org/tsconfig#preserveWatchOutput"
+      },
+      "pretty": {
+        "description": "Enable color and formatting in output to make compiler errors easier to read",
+        "type": "boolean",
+        "default": true,
+        "markdownDescription": "Enable color and formatting in output to make compiler errors easier to read\n\nSee more: https://www.typescriptlang.org/tsconfig#pretty"
+      },
+      "useUnknownInCatchVariables": {
+        "description": "Default catch clause variables as `unknown` instead of `any`.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Default catch clause variables as `unknown` instead of `any`.\n\nSee more: https://www.typescriptlang.org/tsconfig#useUnknownInCatchVariables"
+      },
+      "watch": {
+        "description": "Watch input files.",
+        "type": "boolean"
+      },
+      "fallbackPolling": {
+        "description": "Specify the polling strategy to use when the system runs out of or doesn't support native file watchers. Requires TypeScript version 3.8 or later.",
+        "enum": [
+          "fixedPollingInterval",
+          "priorityPollingInterval",
+          "dynamicPriorityPolling",
+          "fixedInterval",
+          "priorityInterval",
+          "dynamicPriority",
+          "fixedChunkSize"
+        ]
+      },
+      "watchDirectory": {
+        "description": "Specify the strategy for watching directories under systems that lack recursive file-watching functionality. Requires TypeScript version 3.8 or later.",
+        "enum": [
+          "useFsEvents",
+          "fixedPollingInterval",
+          "dynamicPriorityPolling",
+          "fixedChunkSizePolling"
+        ],
+        "default": "useFsEvents"
+      },
+      "watchFile": {
+        "description": "Specify the strategy for watching individual files. Requires TypeScript version 3.8 or later.",
+        "enum": [
+          "fixedPollingInterval",
+          "priorityPollingInterval",
+          "dynamicPriorityPolling",
+          "useFsEvents",
+          "useFsEventsOnParentDirectory",
+          "fixedChunkSizePolling"
+        ],
+        "default": "useFsEvents"
+      },
+      "noUncheckedIndexedAccess": {
+        "description": "Add `undefined` to a type when accessed using an index.",
+        "type": "boolean",
+        "markdownDescription": "Add `undefined` to a type when accessed using an index.\n\nSee more: https://www.typescriptlang.org/tsconfig#noUncheckedIndexedAccess"
+      },
+      "noImplicitOverride": {
+        "description": "Ensure overriding members in derived classes are marked with an override modifier.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Ensure overriding members in derived classes are marked with an override modifier.\n\nSee more: https://www.typescriptlang.org/tsconfig#noImplicitOverride"
+      },
+      "generateCpuProfile": {
+        "description": "Emit a v8 CPU profile of the compiler run for debugging.",
+        "type": "string",
+        "default": "profile.cpuprofile",
+        "markdownDescription": "Emit a v8 CPU profile of the compiler run for debugging.\n\nSee more: https://www.typescriptlang.org/tsconfig#generateCpuProfile"
+      },
+      "plugins": {
+        "description": "Specify a list of language service plugins to include.",
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "name": {
+              "description": "Plugin name.",
+              "type": "string"
+            }
+          }
+        },
+        "markdownDescription": "Specify a list of language service plugins to include.\n\nSee more: https://www.typescriptlang.org/tsconfig#plugins"
+      },
+      "listEmittedFiles": {
+        "description": "Print the names of emitted files after a compilation.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Print the names of emitted files after a compilation.\n\nSee more: https://www.typescriptlang.org/tsconfig#listEmittedFiles"
+      },
+      "moduleDetection": {
+        "description": "Specify how TypeScript determine a file as module.",
+        "enum": ["auto", "legacy", "force"]
+      },
+      "importsNotUsedAsValues": {
+        "description": "Specify emit/checking behavior for imports that are only used for types.",
+        "default": "remove",
+        "enum": ["remove", "preserve", "error"]
+      },
+      "resolvePackageJsonExports": {
+        "description": "Use the package.json 'exports' field when resolving package imports.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Use the package.json 'exports' field when resolving package imports.\n\nSee more: https://www.typescriptlang.org/tsconfig#resolvePackageJsonExports"
+      },
+      "resolvePackageJsonImports": {
+        "description": "Use the package.json 'imports' field when resolving imports.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Use the package.json 'imports' field when resolving imports.\n\nSee more: https://www.typescriptlang.org/tsconfig#resolvePackageJsonImports"
+      },
+      "assumeChangesOnlyAffectDirectDependencies": {
+        "description": "Have recompiles in '--incremental' and '--watch' assume that changes within a file will only affect files directly depending on it. Requires TypeScript version 3.8 or later.",
+        "type": "boolean"
+      },
+      "extendedDiagnostics": {
+        "description": "Output more detailed compiler performance information after building.",
+        "type": "boolean",
+        "default": false,
+        "markdownDescription": "Output more detailed compiler performance information after building.\n\nSee more: https://www.typescriptlang.org/tsconfig#extendedDiagnostics"
+      },
+      "listFilesOnly": {
+        "description": "Print names of files that are part of the compilation and then stop processing.",
+        "type": "boolean"
+      },
+      "disableSolutionSearching": {
+        "description": "Opt a project out of multi-project reference checking when editing.",
+        "type": "boolean",
+        "markdownDescription": "Opt a project out of multi-project reference checking when editing.\n\nSee more: https://www.typescriptlang.org/tsconfig#disableSolutionSearching"
+      },
+      "verbatimModuleSyntax": {
+        "description": "Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting.",
+        "type": "boolean",
+        "markdownDescription": "Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting.\n\nSee more: https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index deebac8..805f647 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,13 +1,17 @@
 import React from 'react'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Playground from '@/components/Playground'
-import { initFiles, initImportMap } from '@/components/Playground/files.ts'
+import { initFiles, initImportMap, initTsConfig } from '@/components/Playground/files'
 
 const OnlineEditor: React.FC = () => {
     return (
         <>
             <FitFullscreen>
-                <Playground initFiles={initFiles} initImportMap={initImportMap} />
+                <Playground
+                    initFiles={initFiles}
+                    initImportMapRaw={JSON.stringify(initImportMap, null, 2)}
+                    initTsConfigRaw={JSON.stringify(initTsConfig, null, 2)}
+                />
             </FitFullscreen>
         </>
     )

From b0be3bc4a724ec24324be14a613acb156e939afe Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 14 Jan 2024 00:51:03 +0800
Subject: [PATCH 176/307] Optimize code

---
 src/App.tsx                                   |   3 +-
 src/ant-design.d.ts                           |   8 +-
 .../Playground/CodeEditor/Editor/index.tsx    |   5 +-
 .../CodeEditor/FileSelector/Item.tsx          |  14 +--
 .../CodeEditor/FileSelector/index.tsx         |   5 +-
 .../Playground/CodeEditor/index.tsx           |   5 +-
 .../Playground/Output/Preview/index.tsx       |   3 +-
 .../Playground/Output/Transform/index.tsx     |   3 +-
 src/components/Playground/Output/index.tsx    |   3 +-
 src/components/Playground/index.tsx           |   7 +-
 src/components/common/Card.tsx                |   5 +-
 src/components/common/FitCenter.tsx           |   7 +-
 src/components/common/FitFullscreen.tsx       |   4 +-
 src/components/common/FlexBox.tsx             |   5 +-
 .../common/FullscreenLoadingMask.tsx          |   3 +-
 src/components/common/HideScrollbar.tsx       |  16 +--
 src/components/common/Indicator.tsx           |   3 +-
 src/components/common/LoadingMask.tsx         |   8 +-
 src/components/common/Permission.tsx          |   6 +-
 src/components/common/Sidebar/Footer.tsx      |   3 +-
 src/components/common/Sidebar/Item.tsx        |   8 +-
 src/components/common/Sidebar/ItemList.tsx    |   4 +-
 src/components/common/Sidebar/Scroll.tsx      |   4 +-
 src/components/common/Sidebar/Separate.tsx    |   9 +-
 src/components/common/Sidebar/Submenu.tsx     |   6 +-
 src/components/common/Sidebar/index.tsx       |  15 +--
 src/main.tsx                                  |  10 +-
 src/pages/OnlineEditor.tsx                    |   3 +-
 src/pages/Sign/Forget.tsx                     |   3 +-
 src/pages/Sign/SignIn.tsx                     |   3 +-
 src/pages/Sign/SignUp.tsx                     |   3 +-
 src/pages/Sign/Verify.tsx                     |   3 +-
 src/pages/Sign/index.tsx                      |   3 +-
 src/pages/System/Group.tsx                    |  12 +-
 src/pages/System/Log.tsx                      |   8 +-
 src/pages/System/Role.tsx                     |  12 +-
 src/pages/System/Settings/Base.tsx            |   3 +-
 src/pages/System/Settings/Mail.tsx            |   3 +-
 src/pages/System/Settings/SensitiveWord.tsx   |   6 +-
 src/pages/System/Settings/index.tsx           |  10 +-
 src/pages/System/Statistics/ActiveInfo.tsx    |   3 +-
 src/pages/System/Statistics/CPUInfo.tsx       |   3 +-
 src/pages/System/Statistics/HardwareInfo.tsx  |   3 +-
 src/pages/System/Statistics/OnlineInfo.tsx    |   3 +-
 src/pages/System/Statistics/SoftwareInfo.tsx  |   3 +-
 src/pages/System/Statistics/StorageInfo.tsx   |   3 +-
 src/pages/System/Statistics/index.tsx         |  12 +-
 src/pages/System/User.tsx                     |  12 +-
 src/pages/System/index.tsx                    |   8 +-
 src/pages/SystemFramework.tsx                 |   3 +-
 src/pages/Tools/All.tsx                       |   4 +-
 src/pages/Tools/Translation.tsx               |   4 +-
 src/pages/Tools/index.tsx                     |   4 +-
 src/pages/ToolsFramework.tsx                  |   3 +-
 src/pages/User/index.tsx                      |   4 +-
 src/pages/UserFramework.tsx                   |   3 +-
 src/router/index.tsx                          |  15 ++-
 src/router/system.tsx                         |  29 +++--
 src/router/tools.tsx                          | 104 +++++++++---------
 src/router/user.tsx                           |   6 +-
 src/services/system.tsx                       |   8 +-
 src/util/common.tsx                           |   4 +-
 src/util/hooks.tsx                            |   7 +-
 63 files changed, 217 insertions(+), 275 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 82ce06b..bd05da7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { getRouter } from '@/router'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
@@ -6,7 +5,7 @@ export const AppContext = createContext<{ refreshRouter: () => void }>({
     refreshRouter: () => undefined
 })
 
-const App: React.FC = () => {
+const App = () => {
     const [routerState, setRouterState] = useState(getRouter)
 
     return (
diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts
index d3f35af..17e849d 100644
--- a/src/ant-design.d.ts
+++ b/src/ant-design.d.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ComponentType, ForwardRefExoticComponent, Key, SVGProps } from 'react'
 import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
 import { TablePaginationConfig } from 'antd/lib'
 import { ColumnsType, FilterValue, SorterResult, SortOrder } from 'antd/es/table/interface'
@@ -7,8 +7,8 @@ import type { DataNode } from 'antd/es/tree'
 
 declare global {
     type IconComponent =
-        | React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>
-        | React.ForwardRefExoticComponent<CustomIconComponentProps>
+        | ComponentType<CustomIconComponentProps | SVGProps<SVGSVGElement>>
+        | ForwardRefExoticComponent<CustomIconComponentProps>
 
     type _TablePaginationConfig = TablePaginationConfig
 
@@ -18,7 +18,7 @@ declare global {
     type _SortOrder = SortOrder
     type _CheckboxChangeEvent = CheckboxChangeEvent
     interface _DataNode extends DataNode {
-        value: React.Key
+        value: Key
         fullTitle?: string
         parentId?: number
         children?: _DataNode[]
diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx
index 2e8e6e0..6e8e483 100644
--- a/src/components/Playground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
 import '@/components/Playground/CodeEditor/Editor/editor.scss'
@@ -19,7 +18,7 @@ interface EditorProps {
     onJumpFile?: (fileName: string) => void
 }
 
-const Editor: React.FC<EditorProps> = ({
+const Editor = ({
     tsConfig,
     files = {},
     selectedFileName = '',
@@ -28,7 +27,7 @@ const Editor: React.FC<EditorProps> = ({
     onChange,
     options,
     onJumpFile
-}) => {
+}: EditorProps) => {
     const editorRef = useRef<editor.IStandaloneCodeEditor>()
     const monacoRef = useRef<Monaco>()
     const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor()
diff --git a/src/components/Playground/CodeEditor/FileSelector/Item.tsx b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
index d81b507..4fe7c1f 100644
--- a/src/components/Playground/CodeEditor/FileSelector/Item.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react'
 
 interface ItemProps {
     className?: string
@@ -7,7 +7,7 @@ interface ItemProps {
     value: string
     active?: boolean
     hasEditing?: boolean
-    setHasEditing?: React.Dispatch<React.SetStateAction<boolean>>
+    setHasEditing?: Dispatch<SetStateAction<boolean>>
     onOk?: (fileName: string) => void
     onCancel?: () => void
     onRemove?: (fileName: string) => void
@@ -15,7 +15,7 @@ interface ItemProps {
     onValidate?: (newFileName: string, oldFileName: string) => boolean
 }
 
-const Item: React.FC<ItemProps> = ({
+const Item = ({
     className,
     readonly = false,
     value,
@@ -28,7 +28,7 @@ const Item: React.FC<ItemProps> = ({
     onClick,
     onValidate,
     ...prop
-}) => {
+}: ItemProps) => {
     const inputRef = useRef<HTMLInputElement>(null)
     const [fileName, setFileName] = useState(value)
     const [creating, setCreating] = useState(prop.creating)
@@ -41,7 +41,7 @@ const Item: React.FC<ItemProps> = ({
         onClick?.()
     }
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
         if (event.key === 'Enter') {
             event.preventDefault()
             finishNameFile()
@@ -89,11 +89,11 @@ const Item: React.FC<ItemProps> = ({
         })
     }
 
-    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
         setFileName(e.target.value)
     }
 
-    const handleOnDelete = (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleOnDelete = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         if (hasEditing) {
             return
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index 5bacab9..f8fd51c 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
@@ -22,7 +21,7 @@ interface FileSelectorProps {
     selectedFileName?: string
 }
 
-const FileSelector: React.FC<FileSelectorProps> = ({
+const FileSelector = ({
     files = {},
     onChange,
     onError,
@@ -32,7 +31,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     onAddFile,
     onUpdateFileName,
     selectedFileName = ''
-}) => {
+}: FileSelectorProps) => {
     const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const [tabs, setTabs] = useState<string[]>([])
     const [creating, setCreating] = useState(false)
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index 0062904..7b1cbb6 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import _ from 'lodash'
 import '@/components/Playground/CodeEditor/code-editor.scss'
 import FlexBox from '@/components/common/FlexBox'
@@ -29,7 +28,7 @@ interface CodeEditorProps {
     onError?: (msg: string) => void
 }
 
-const CodeEditor: React.FC<CodeEditorProps> = ({
+const CodeEditor = ({
     theme,
     tsConfig,
     files,
@@ -44,7 +43,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     onChangeFileContent,
     onError,
     ...props
-}) => {
+}: CodeEditorProps) => {
     const filteredFilesName = getFileNameList(files).filter(
         (item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden
     )
diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx
index 18366b2..753e70a 100644
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -1,4 +1,3 @@
-import React, { useRef, useState } from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import '@/components/Playground/Output/Preview/preview.scss'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
@@ -34,7 +33,7 @@ const getIframeUrl = (iframeRaw: string) => {
 
 const iframeUrl = getIframeUrl(iframeRaw)
 
-const Preview: React.FC<PreviewProps> = ({ iframeKey, files, importMap }) => {
+const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
     const [errorMsg, setErrorMsg] = useState('')
     const [loaded, setLoaded] = useState(false)
diff --git a/src/components/Playground/Output/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx
index a5eb75a..419f4bc 100644
--- a/src/components/Playground/Output/Transform/index.tsx
+++ b/src/components/Playground/Output/Transform/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
 import '@/components/Playground/Output/Transform/transform.scss'
@@ -13,7 +12,7 @@ interface OutputProps {
     theme?: ITheme
 }
 
-const Transform: React.FC<OutputProps> = ({ file, theme }) => {
+const Transform = ({ file, theme }: OutputProps) => {
     const [compiledCode, setCompiledCode] = useState('')
     const [errorMsg, setErrorMsg] = useState('')
 
diff --git a/src/components/Playground/Output/index.tsx b/src/components/Playground/Output/index.tsx
index 6c58d20..5b58410 100644
--- a/src/components/Playground/Output/index.tsx
+++ b/src/components/Playground/Output/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
@@ -11,7 +10,7 @@ interface OutputProps {
     importMap: IImportMap
 }
 
-const Output: React.FC<OutputProps> = ({ files, selectedFileName, importMap }) => {
+const Output = ({ files, selectedFileName, importMap }: OutputProps) => {
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index 9fa22b4..cabccc8 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react'
 import '@/components/Playground/playground.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import { IFiles, IImportMap, ITsConfig } from '@/components/Playground/shared'
@@ -17,11 +16,7 @@ interface PlaygroundProps {
     initTsConfigRaw: string
 }
 
-const Playground: React.FC<PlaygroundProps> = ({
-    initFiles,
-    initImportMapRaw,
-    initTsConfigRaw
-}) => {
+const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: PlaygroundProps) => {
     const [files, setFiles] = useState(initFiles)
     const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
     const [importMapRaw, setImportMapRaw] = useState<string>(initImportMapRaw)
diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx
index aaf0fa9..82802f7 100644
--- a/src/components/common/Card.tsx
+++ b/src/components/common/Card.tsx
@@ -1,8 +1,7 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/card.scss'
 
-interface CardProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
+interface CardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
 
 const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
     return <div className={`card-box${className ? ` ${className}` : ''}`} {...props} ref={ref} />
diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx
index d735fcf..a0be5ce 100644
--- a/src/components/common/FitCenter.tsx
+++ b/src/components/common/FitCenter.tsx
@@ -1,12 +1,11 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/fit-center.scss'
 
-interface FitCenterProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface FitCenterProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     vertical?: boolean
 }
 
-const FitCenter: React.FC<FitCenterProps> = ({ className, vertical, ...props }) => {
+const FitCenter = ({ className, vertical, ...props }: FitCenterProps) => {
     return (
         <div
             className={`fit-center${className ? ` ${className}` : ''}${
diff --git a/src/components/common/FitFullscreen.tsx b/src/components/common/FitFullscreen.tsx
index e236247..8d80704 100644
--- a/src/components/common/FitFullscreen.tsx
+++ b/src/components/common/FitFullscreen.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/fit-fullscreen.scss'
 
 interface FitFullscreenProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     zIndex?: number
     backgroundColor?: string
 }
diff --git a/src/components/common/FlexBox.tsx b/src/components/common/FlexBox.tsx
index 606ce43..58ca4d7 100644
--- a/src/components/common/FlexBox.tsx
+++ b/src/components/common/FlexBox.tsx
@@ -1,8 +1,7 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/flex-box.scss'
 
-interface FlexBoxProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface FlexBoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     direction?: 'horizontal' | 'vertical'
     gap?: number
 }
diff --git a/src/components/common/FullscreenLoadingMask.tsx b/src/components/common/FullscreenLoadingMask.tsx
index 5310b94..2c9240e 100644
--- a/src/components/common/FullscreenLoadingMask.tsx
+++ b/src/components/common/FullscreenLoadingMask.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/fullscreen-loading-mask.scss'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import FitFullscreen from '@/components/common/FitFullscreen'
 
-const FullscreenLoadingMask: React.FC = () => {
+const FullscreenLoadingMask = () => {
     const loadingIcon = (
         <>
             <Icon
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index f444182..237ff7a 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import { TouchEvent, MouseEvent, KeyboardEvent, DetailedHTMLProps, HTMLAttributes } from 'react'
 import '@/assets/css/components/common/hide-scrollbar.scss'
 
 interface HideScrollbarProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     isPreventScroll?: boolean
     isPreventVerticalScroll?: boolean
     isPreventHorizontalScroll?: boolean
@@ -210,7 +210,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         }, [autoHideWaitingTime, horizontalScrollbarPosition])
 
         const handleDefaultTouchStart = useCallback(
-            (event: React.TouchEvent) => {
+            (event: TouchEvent) => {
                 if (event.touches.length !== 1 || isPreventScroll) {
                     lastTouchPositionRef.current = { x: -1, y: -1 }
                     return
@@ -223,7 +223,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         )
 
         const handleDefaultTouchmove = useCallback(
-            (event: React.TouchEvent) => {
+            (event: TouchEvent) => {
                 if (event.touches.length !== 1 || isPreventScroll) {
                     lastTouchPositionRef.current = { x: -1, y: -1 }
                     return
@@ -252,7 +252,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
             [isPreventHorizontalScroll, isPreventScroll, isPreventVerticalScroll]
         )
 
-        const handleDefaultMouseDown = (event: React.MouseEvent) => {
+        const handleDefaultMouseDown = (event: MouseEvent) => {
             if (isPreventAnyScroll)
                 if (event.button === 1) {
                     event.preventDefault()
@@ -260,7 +260,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         }
 
         const handleDefaultKeyDown = useCallback(
-            (event: React.KeyboardEvent) => {
+            (event: KeyboardEvent) => {
                 if (
                     isPreventScroll &&
                     [
@@ -297,7 +297,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         )
 
         const handleScrollbarMouseEvent = (eventFlag: string, scrollbarFlag: string) => {
-            return (event: React.MouseEvent) => {
+            return (event: MouseEvent) => {
                 switch (eventFlag) {
                     case 'down':
                         lastScrollbarClickPositionRef.current = {
@@ -348,7 +348,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         }
 
         const handleScrollbarTouchEvent = (eventFlag: string, scrollbarFlag: string) => {
-            return (event: React.TouchEvent) => {
+            return (event: TouchEvent) => {
                 switch (eventFlag) {
                     case 'start':
                         if (event.touches.length !== 1) {
diff --git a/src/components/common/Indicator.tsx b/src/components/common/Indicator.tsx
index 1b56baa..2304254 100644
--- a/src/components/common/Indicator.tsx
+++ b/src/components/common/Indicator.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import _ from 'lodash'
 import '@/assets/css/components/common/indicator.scss'
 
@@ -8,7 +7,7 @@ interface IndicatorProps {
     onSwitch?: (index: number) => void
 }
 
-const Indicator: React.FC<IndicatorProps> = ({ total, current, onSwitch }) => {
+const Indicator = ({ total, current, onSwitch }: IndicatorProps) => {
     const handleClick = (index: number) => {
         return () => {
             onSwitch?.(index)
diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx
index 41d5854..f843af5 100644
--- a/src/components/common/LoadingMask.tsx
+++ b/src/components/common/LoadingMask.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/loading-mask.scss'
 import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 
-interface LoadingMaskProps extends React.PropsWithChildren {
+interface LoadingMaskProps extends PropsWithChildren {
     hidden?: boolean
-    maskContent?: React.ReactNode
+    maskContent?: ReactNode
 }
-const LoadingMask: React.FC<LoadingMaskProps> = (props) => {
+const LoadingMask = (props: LoadingMaskProps) => {
     const loadingIcon = (
         <>
             <Icon
diff --git a/src/components/common/Permission.tsx b/src/components/common/Permission.tsx
index 57b37e5..c3035b9 100644
--- a/src/components/common/Permission.tsx
+++ b/src/components/common/Permission.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 import { hasPathPermission, hasPermission } from '@/util/auth'
 
-interface PermissionProps extends React.PropsWithChildren {
+interface PermissionProps extends PropsWithChildren {
     operationCode?: string
     path?: string
 }
 
-const Permission: React.FC<PermissionProps> = (props) => {
+const Permission = (props: PermissionProps) => {
     if (
         (!props.operationCode || hasPermission(props.operationCode)) &&
         (!props.path || hasPathPermission(props.path))
diff --git a/src/components/common/Sidebar/Footer.tsx b/src/components/common/Sidebar/Footer.tsx
index 64e0901..a25a5f2 100644
--- a/src/components/common/Sidebar/Footer.tsx
+++ b/src/components/common/Sidebar/Footer.tsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react'
 import Icon from '@ant-design/icons'
 import { COLOR_ERROR } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
@@ -6,7 +5,7 @@ import { useUpdatedEffect } from '@/util/hooks'
 import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
 import { r_auth_logout } from '@/services/auth'
 
-const Footer: React.FC = () => {
+const Footer = () => {
     const matches = useMatches()
     const lastMatch = matches.reduce((_, second) => second)
     const location = useLocation()
diff --git a/src/components/common/Sidebar/Item.tsx b/src/components/common/Sidebar/Item.tsx
index 289b746..1031b15 100644
--- a/src/components/common/Sidebar/Item.tsx
+++ b/src/components/common/Sidebar/Item.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { ReactNode, MouseEvent } from 'react'
 import Icon from '@ant-design/icons'
 import Submenu from '@/components/common/Sidebar/Submenu'
 
@@ -6,15 +6,15 @@ type ItemProps = {
     icon?: IconComponent
     text?: string
     path: string
-    children?: React.ReactNode
+    children?: ReactNode
     end?: boolean
 }
 
-const Item: React.FC<ItemProps> = (props) => {
+const Item = (props: ItemProps) => {
     const [submenuTop, setSubmenuTop] = useState(0)
     const [submenuLeft, setSubmenuLeft] = useState(0)
 
-    const showSubmenu = (e: React.MouseEvent) => {
+    const showSubmenu = (e: MouseEvent) => {
         const parentElement = e.currentTarget.parentElement
         if (parentElement?.childElementCount === 2) {
             const parentClientRect = parentElement.getBoundingClientRect()
diff --git a/src/components/common/Sidebar/ItemList.tsx b/src/components/common/Sidebar/ItemList.tsx
index 661e94d..44ec841 100644
--- a/src/components/common/Sidebar/ItemList.tsx
+++ b/src/components/common/Sidebar/ItemList.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 
-const ItemList: React.FC<React.PropsWithChildren> = (props) => {
+const ItemList = (props: PropsWithChildren) => {
     return <ul>{props.children}</ul>
 }
 
diff --git a/src/components/common/Sidebar/Scroll.tsx b/src/components/common/Sidebar/Scroll.tsx
index 6fc0c1f..e27f1c0 100644
--- a/src/components/common/Sidebar/Scroll.tsx
+++ b/src/components/common/Sidebar/Scroll.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 
 export interface SidebarScrollElement {
     refreshLayout(): void
 }
 
-const Scroll = forwardRef<SidebarScrollElement, React.PropsWithChildren>((props, ref) => {
+const Scroll = forwardRef<SidebarScrollElement, PropsWithChildren>((props, ref) => {
     useImperativeHandle<SidebarScrollElement, SidebarScrollElement>(ref, () => {
         return {
             refreshLayout() {
diff --git a/src/components/common/Sidebar/Separate.tsx b/src/components/common/Sidebar/Separate.tsx
index 6e626e7..4c42aff 100644
--- a/src/components/common/Sidebar/Separate.tsx
+++ b/src/components/common/Sidebar/Separate.tsx
@@ -1,8 +1,9 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 
-const Separate: React.FC<
-    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-> = ({ className, ...props }) => {
+const Separate = ({
+    className,
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
     return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
 }
 
diff --git a/src/components/common/Sidebar/Submenu.tsx b/src/components/common/Sidebar/Submenu.tsx
index 6d7afdc..02497e6 100644
--- a/src/components/common/Sidebar/Submenu.tsx
+++ b/src/components/common/Sidebar/Submenu.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import { PropsWithChildren } from 'react'
 
-interface SidebarSubmenuProps extends React.PropsWithChildren {
+interface SidebarSubmenuProps extends PropsWithChildren {
     submenuTop: number
     submenuLeft: number
 }
 
-const Submenu: React.FC<SidebarSubmenuProps> = (props) => {
+const Submenu = (props: SidebarSubmenuProps) => {
     return (
         <ul
             className={'submenu'}
diff --git a/src/components/common/Sidebar/index.tsx b/src/components/common/Sidebar/index.tsx
index ae45063..db30b6a 100644
--- a/src/components/common/Sidebar/index.tsx
+++ b/src/components/common/Sidebar/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/sidebar.scss'
 import { getLocalStorage, setLocalStorage } from '@/util/browser'
@@ -9,21 +9,14 @@ import Separate from '@/components/common/Sidebar/Separate'
 import Submenu from '@/components/common/Sidebar/Submenu'
 import Footer from '@/components/common/Sidebar/Footer'
 
-interface SidebarProps extends React.PropsWithChildren {
+interface SidebarProps extends PropsWithChildren {
     title: string
     width?: string
     onSidebarSwitch?: (hidden: boolean) => void
-    bottomFixed?: React.ReactNode
+    bottomFixed?: ReactNode
 }
 
-const Sidebar: React.FC<SidebarProps> & {
-    Item: typeof Item
-    ItemList: typeof ItemList
-    Scroll: typeof Scroll
-    Separate: typeof Separate
-    Submenu: typeof Submenu
-    Footer: typeof Footer
-} = (props) => {
+const Sidebar = (props: SidebarProps) => {
     const [hideSidebar, setHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true')
 
     const switchSidebar = () => {
diff --git a/src/main.tsx b/src/main.tsx
index 4cbf761..c8665a4 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 import zh_CN from 'antd/locale/zh_CN'
 import '@/assets/css/base.scss'
 import '@/assets/css/common.scss'
 import { COLOR_MAIN } from '@/constants/common.constants'
 import App from './App'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
         <AntdConfigProvider
             theme={{
                 token: { colorPrimary: COLOR_MAIN, colorLinkHover: COLOR_MAIN },
@@ -21,5 +21,5 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         >
             <App />
         </AntdConfigProvider>
-    </React.StrictMode>
+    </StrictMode>
 )
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index 805f647..a4b6dc0 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,9 +1,8 @@
-import React from 'react'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Playground from '@/components/Playground'
 import { initFiles, initImportMap, initTsConfig } from '@/components/Playground/files'
 
-const OnlineEditor: React.FC = () => {
+const OnlineEditor = () => {
     return (
         <>
             <FitFullscreen>
diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx
index e9bf48a..3e094e4 100644
--- a/src/pages/Sign/Forget.tsx
+++ b/src/pages/Sign/Forget.tsx
@@ -1,4 +1,3 @@
-import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -14,7 +13,7 @@ import { r_auth_forget, r_auth_retrieve } from '@/services/auth'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
 
-const Forget: React.FC = () => {
+const Forget = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const turnstileRef = useRef<TurnstileInstance>()
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index 03d09fb..85ab8af 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -1,4 +1,3 @@
-import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -17,7 +16,7 @@ import { AppContext } from '@/App'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
 
-const SignIn: React.FC = () => {
+const SignIn = () => {
     const { refreshRouter } = useContext(AppContext)
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx
index c91b508..61b4f2e 100644
--- a/src/pages/Sign/SignUp.tsx
+++ b/src/pages/Sign/SignUp.tsx
@@ -1,4 +1,3 @@
-import React, { useCallback } from 'react'
 import Icon from '@ant-design/icons'
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
 import {
@@ -14,7 +13,7 @@ import { r_auth_register, r_auth_resend } from '@/services/auth'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
 
-const SignUp: React.FC = () => {
+const SignUp = () => {
     const location = useLocation()
     const navigate = useNavigate()
     const turnstileRef = useRef<TurnstileInstance>()
diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx
index 8edb23c..c370db5 100644
--- a/src/pages/Sign/Verify.tsx
+++ b/src/pages/Sign/Verify.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import {
     COLOR_BACKGROUND,
     PERMISSION_ACCOUNT_NEED_INIT,
@@ -15,7 +14,7 @@ import { AppContext } from '@/App'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
 
-const Verify: React.FC = () => {
+const Verify = () => {
     const { refreshRouter } = useContext(AppContext)
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
diff --git a/src/pages/Sign/index.tsx b/src/pages/Sign/index.tsx
index c464068..01417b6 100644
--- a/src/pages/Sign/index.tsx
+++ b/src/pages/Sign/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import '@/assets/css/pages/sign.scss'
 import { useUpdatedEffect } from '@/util/hooks'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -9,7 +8,7 @@ import Verify from '@/pages/Sign/Verify'
 import Forget from '@/pages/Sign/Forget'
 import SignIn from '@/pages/Sign/SignIn'
 
-const Sign: React.FC = () => {
+const Sign = () => {
     const lastPage = useRef('none')
     const currentPage = useRef('none')
     const match = useMatches().reduce((_, second) => second)
diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index 0340fce..fcea149 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { ChangeEvent, Key, KeyboardEvent } from 'react'
 import Icon from '@ant-design/icons'
 import {
     COLOR_ERROR_SECONDARY,
@@ -28,7 +28,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 
-const Group: React.FC = () => {
+const Group = () => {
     const [modal, contextHolder] = AntdModal.useModal()
     const [form] = AntdForm.useForm<GroupAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
@@ -55,7 +55,7 @@ const Group: React.FC = () => {
     const [roleData, setRoleData] = useState<RoleVo[]>([])
     const [isLoadingRole, setIsLoadingRole] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
-    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
+    const [tableSelectedItem, setTableSelectedItem] = useState<Key[]>([])
 
     const dataColumns: _ColumnsType<GroupWithRoleGetVo> = [
         {
@@ -172,7 +172,7 @@ const Group: React.FC = () => {
         }
     }
 
-    const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
+    const handleOnTableSelectChange = (selectedRowKeys: Key[]) => {
         setTableSelectedItem(selectedRowKeys)
     }
 
@@ -331,7 +331,7 @@ const Group: React.FC = () => {
         }
     }
 
-    const handleOnSearchNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnSearchNameChange = (e: ChangeEvent<HTMLInputElement>) => {
         setSearchName(e.target.value)
 
         if (isUseRegex) {
@@ -346,7 +346,7 @@ const Group: React.FC = () => {
         }
     }
 
-    const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
+    const handleOnSearchNameKeyDown = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
             getGroup()
         }
diff --git a/src/pages/System/Log.tsx b/src/pages/System/Log.tsx
index b342dd7..a596053 100644
--- a/src/pages/System/Log.tsx
+++ b/src/pages/System/Log.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { ChangeEvent, KeyboardEvent } from 'react'
 import dayjs from 'dayjs'
 import { COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { useUpdatedEffect } from '@/util/hooks'
@@ -9,7 +9,7 @@ import Card from '@/components/common/Card'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 
-const Log: React.FC = () => {
+const Log = () => {
     const [logData, setLogData] = useState<SysLogGetVo[]>([])
     const [loading, setLoading] = useState(false)
     const [tableParams, setTableParams] = useState<TableParam>({
@@ -159,11 +159,11 @@ const Log: React.FC = () => {
         }
     }
 
-    const handleOnSearchUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnSearchUrlChange = (e: ChangeEvent<HTMLInputElement>) => {
         setSearchRequestUrl(e.target.value)
     }
 
-    const handleOnSearchUrlKeyDown = (e: React.KeyboardEvent) => {
+    const handleOnSearchUrlKeyDown = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
             getLog()
         }
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index dc059aa..00c0f28 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { ChangeEvent, Key, KeyboardEvent } from 'react'
 import Icon from '@ant-design/icons'
 import {
     COLOR_ERROR_SECONDARY,
@@ -28,7 +28,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 
-const Role: React.FC = () => {
+const Role = () => {
     const [modal, contextHolder] = AntdModal.useModal()
     const [form] = AntdForm.useForm<RoleAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
@@ -55,7 +55,7 @@ const Role: React.FC = () => {
     const [powerTreeData, setPowerTreeData] = useState<_DataNode[]>([])
     const [isLoadingPower, setIsLoadingPower] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
-    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
+    const [tableSelectedItem, setTableSelectedItem] = useState<Key[]>([])
 
     const dataColumns: _ColumnsType<RoleWithPowerGetVo> = [
         {
@@ -164,7 +164,7 @@ const Role: React.FC = () => {
         }
     }
 
-    const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
+    const handleOnTableSelectChange = (selectedRowKeys: Key[]) => {
         setTableSelectedItem(selectedRowKeys)
     }
 
@@ -320,7 +320,7 @@ const Role: React.FC = () => {
         }
     }
 
-    const handleOnSearchNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnSearchNameChange = (e: ChangeEvent<HTMLInputElement>) => {
         setSearchName(e.target.value)
 
         if (isUseRegex) {
@@ -335,7 +335,7 @@ const Role: React.FC = () => {
         }
     }
 
-    const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
+    const handleOnSearchNameKeyDown = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
             getRole()
         }
diff --git a/src/pages/System/Settings/Base.tsx b/src/pages/System/Settings/Base.tsx
index b584d2d..8b52d43 100644
--- a/src/pages/System/Settings/Base.tsx
+++ b/src/pages/System/Settings/Base.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
 import { r_sys_settings_base_get, r_sys_settings_base_update } from '@/services/system'
 import { SettingsCard } from '@/pages/System/Settings'
 
-const Base: React.FC = () => {
+const Base = () => {
     const [baseForm] = AntdForm.useForm<BaseSettingsParam>()
     const baseFormValues = AntdForm.useWatch([], baseForm)
     const [loading, setLoading] = useState(false)
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index 6e44a97..87802b5 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import Icon from '@ant-design/icons'
 import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
@@ -9,7 +8,7 @@ import {
 } from '@/services/system'
 import { SettingsCard } from '@/pages/System/Settings'
 
-const Mail: React.FC = () => {
+const Mail = () => {
     const [modal, contextHolder] = AntdModal.useModal()
     const [mailForm] = AntdForm.useForm<MailSettingsParam>()
     const mailFormValues = AntdForm.useWatch([], mailForm)
diff --git a/src/pages/System/Settings/SensitiveWord.tsx b/src/pages/System/Settings/SensitiveWord.tsx
index 429b741..ab2daf2 100644
--- a/src/pages/System/Settings/SensitiveWord.tsx
+++ b/src/pages/System/Settings/SensitiveWord.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { ChangeEvent } from 'react'
 import Icon from '@ant-design/icons'
 import { DATABASE_DUPLICATE_KEY, DATABASE_INSERT_SUCCESS } from '@/constants/common.constants'
 import { useUpdatedEffect } from '@/util/hooks'
@@ -10,7 +10,7 @@ import {
 } from '@/services/system'
 import { SettingsCard } from '@/pages/System/Settings'
 
-const SensitiveWord: React.FC = () => {
+const SensitiveWord = () => {
     const [dataSource, setDataSource] = useState<SensitiveWordVo[]>()
     const [targetKeys, setTargetKeys] = useState<string[]>([])
     const [selectedKeys, setSelectedKeys] = useState<string[]>([])
@@ -64,7 +64,7 @@ const SensitiveWord: React.FC = () => {
         })
     }
 
-    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
         setNewWord(e.target.value)
     }
 
diff --git a/src/pages/System/Settings/index.tsx b/src/pages/System/Settings/index.tsx
index f411aac..927c742 100644
--- a/src/pages/System/Settings/index.tsx
+++ b/src/pages/System/Settings/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/settings.scss'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -11,16 +11,16 @@ import Base from '@/pages/System/Settings/Base'
 import Mail from '@/pages/System/Settings/Mail'
 import SensitiveWord from '@/pages/System/Settings/SensitiveWord'
 
-interface SettingsCardProps extends React.PropsWithChildren {
+interface SettingsCardProps extends PropsWithChildren {
     icon: IconComponent
     title: string
     loading?: boolean
     modifyOperationCode?: string
-    expand?: React.ReactNode
+    expand?: ReactNode
     onReset?: () => void
     onSave?: () => void
 }
-export const SettingsCard: React.FC<SettingsCardProps> = (props) => {
+export const SettingsCard = (props: SettingsCardProps) => {
     return (
         <Card>
             <FlexBox className={'settings-card'}>
@@ -50,7 +50,7 @@ export const SettingsCard: React.FC<SettingsCardProps> = (props) => {
     )
 }
 
-const Settings: React.FC = () => {
+const Settings = () => {
     return (
         <>
             <FitFullscreen data-component={'system-settings'}>
diff --git a/src/pages/System/Statistics/ActiveInfo.tsx b/src/pages/System/Statistics/ActiveInfo.tsx
index 727e1d9..d3e2000 100644
--- a/src/pages/System/Statistics/ActiveInfo.tsx
+++ b/src/pages/System/Statistics/ActiveInfo.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import Icon from '@ant-design/icons'
 import * as echarts from 'echarts/core'
 import { useUpdatedEffect } from '@/util/hooks'
@@ -8,7 +7,7 @@ import FlexBox from '@/components/common/FlexBox'
 import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
 import { CommonCard } from '@/pages/System/Statistics'
 
-const ActiveInfo: React.FC = () => {
+const ActiveInfo = () => {
     const activeInfoDivRef = useRef<HTMLDivElement>(null)
     const activeInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
     const [isLoading, setIsLoading] = useState(false)
diff --git a/src/pages/System/Statistics/CPUInfo.tsx b/src/pages/System/Statistics/CPUInfo.tsx
index 027a9cf..885a236 100644
--- a/src/pages/System/Statistics/CPUInfo.tsx
+++ b/src/pages/System/Statistics/CPUInfo.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import * as echarts from 'echarts/core'
 import { BarSeriesOption } from 'echarts/charts'
 import { useUpdatedEffect } from '@/util/hooks'
@@ -11,7 +10,7 @@ import {
 } from '@/pages/System/Statistics/shared'
 import { CommonCard } from '@/pages/System/Statistics'
 
-const CPUInfo: React.FC = () => {
+const CPUInfo = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
     const percentDivRef = useRef<HTMLDivElement>(null)
     const cpuInfoDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/System/Statistics/HardwareInfo.tsx b/src/pages/System/Statistics/HardwareInfo.tsx
index 72dd651..f571a90 100644
--- a/src/pages/System/Statistics/HardwareInfo.tsx
+++ b/src/pages/System/Statistics/HardwareInfo.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import { r_sys_statistics_hardware } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
 import { CommonCard } from '@/pages/System/Statistics'
 
-const HardwareInfo: React.FC = () => {
+const HardwareInfo = () => {
     const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
 
     useUpdatedEffect(() => {
diff --git a/src/pages/System/Statistics/OnlineInfo.tsx b/src/pages/System/Statistics/OnlineInfo.tsx
index c2badf2..29271ea 100644
--- a/src/pages/System/Statistics/OnlineInfo.tsx
+++ b/src/pages/System/Statistics/OnlineInfo.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import Icon from '@ant-design/icons'
 import * as echarts from 'echarts/core'
 import { useUpdatedEffect } from '@/util/hooks'
@@ -8,7 +7,7 @@ import FlexBox from '@/components/common/FlexBox'
 import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
 import { CommonCard } from '@/pages/System/Statistics'
 
-const OnlineInfo: React.FC = () => {
+const OnlineInfo = () => {
     const onlineInfoDivRef = useRef<HTMLDivElement>(null)
     const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
     const [isLoading, setIsLoading] = useState(false)
diff --git a/src/pages/System/Statistics/SoftwareInfo.tsx b/src/pages/System/Statistics/SoftwareInfo.tsx
index 6309eca..a187349 100644
--- a/src/pages/System/Statistics/SoftwareInfo.tsx
+++ b/src/pages/System/Statistics/SoftwareInfo.tsx
@@ -1,11 +1,10 @@
-import React from 'react'
 import { useUpdatedEffect } from '@/util/hooks'
 import { utcToLocalTime } from '@/util/datetime'
 import { r_sys_statistics_software } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
 import { CommonCard } from '@/pages/System/Statistics'
 
-const SoftwareInfo: React.FC = () => {
+const SoftwareInfo = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
 
     useUpdatedEffect(() => {
diff --git a/src/pages/System/Statistics/StorageInfo.tsx b/src/pages/System/Statistics/StorageInfo.tsx
index 5a888cf..3e4fa34 100644
--- a/src/pages/System/Statistics/StorageInfo.tsx
+++ b/src/pages/System/Statistics/StorageInfo.tsx
@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from 'react'
 import * as echarts from 'echarts/core'
 import { BarSeriesOption } from 'echarts/charts'
 import { formatByteSize } from '@/util/common'
@@ -12,7 +11,7 @@ import {
 } from '@/pages/System/Statistics/shared'
 import { CommonCard } from '@/pages/System/Statistics'
 
-const StorageInfo: React.FC = () => {
+const StorageInfo = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
     const percentDivRef = useRef<HTMLDivElement>(null)
     const storageInfoDivRef = useRef<HTMLDivElement>(null)
diff --git a/src/pages/System/Statistics/index.tsx b/src/pages/System/Statistics/index.tsx
index f5994ca..853b0a8 100644
--- a/src/pages/System/Statistics/index.tsx
+++ b/src/pages/System/Statistics/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/statistics.scss'
 import Card from '@/components/common/Card'
@@ -14,14 +14,14 @@ import HardwareInfo from '@/pages/System/Statistics/HardwareInfo'
 import CPUInfo from '@/pages/System/Statistics/CPUInfo'
 import StorageInfo from '@/pages/System/Statistics/StorageInfo'
 
-interface CommonCardProps extends React.PropsWithChildren {
+interface CommonCardProps extends PropsWithChildren {
     icon: IconComponent
-    title: React.ReactNode
+    title: ReactNode
     loading?: boolean
-    expand?: React.ReactNode
+    expand?: ReactNode
 }
 
-export const CommonCard: React.FC<CommonCardProps> = (props) => {
+export const CommonCard = (props: CommonCardProps) => {
     return (
         <Card style={{ overflow: 'visible' }}>
             <FlexBox className={'common-card'}>
@@ -41,7 +41,7 @@ export const CommonCard: React.FC<CommonCardProps> = (props) => {
     )
 }
 
-const Statistics: React.FC = () => {
+const Statistics = () => {
     return (
         <>
             <FitFullscreen data-component={'system-statistics'}>
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index fbf2761..29591b2 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { ChangeEvent, Key, KeyboardEvent } from 'react'
 import Icon from '@ant-design/icons'
 import dayjs from 'dayjs'
 import {
@@ -36,7 +36,7 @@ interface ChangePasswordFields extends UserChangePasswordParam {
     needChangePassword: boolean
 }
 
-const User: React.FC = () => {
+const User = () => {
     const [modal, contextHolder] = AntdModal.useModal()
 
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -66,7 +66,7 @@ const User: React.FC = () => {
                 } 项 共 ${total} 项`
         }
     })
-    const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
+    const [tableSelectedItem, setTableSelectedItem] = useState<Key[]>([])
     const [userData, setUserData] = useState<UserWithRoleInfoVo[]>([])
     const [isLoadingUserData, setIsLoadingUserData] = useState(false)
 
@@ -254,7 +254,7 @@ const User: React.FC = () => {
         }
     }
 
-    const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
+    const handleOnTableSelectChange = (selectedRowKeys: Key[]) => {
         setTableSelectedItem(selectedRowKeys)
     }
 
@@ -570,7 +570,7 @@ const User: React.FC = () => {
         }
     }
 
-    const handleOnSearchValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleOnSearchValueChange = (e: ChangeEvent<HTMLInputElement>) => {
         setSearchValue(e.target.value)
 
         if (isUseRegex) {
@@ -585,7 +585,7 @@ const User: React.FC = () => {
         }
     }
 
-    const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
+    const handleOnSearchNameKeyDown = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
             getUser()
         }
diff --git a/src/pages/System/index.tsx b/src/pages/System/index.tsx
index 639e7ac..1fd60d2 100644
--- a/src/pages/System/index.tsx
+++ b/src/pages/System/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import '@/assets/css/pages/system/index.scss'
@@ -9,9 +9,9 @@ import Card from '@/components/common/Card'
 import Permission from '@/components/common/Permission'
 
 interface CommonCardProps
-    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     icon: IconComponent
-    description?: React.ReactNode
+    description?: ReactNode
     options?: TiltOptions
     url?: string
 }
@@ -61,7 +61,7 @@ const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>(
     }
 )
 
-const System: React.FC = () => {
+const System = () => {
     return (
         <>
             <FitFullscreen data-component={'system'}>
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index a47a786..00d3a17 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -1,11 +1,10 @@
-import React from 'react'
 import '@/assets/css/pages/system-framework.scss'
 import { getSystemRouteJson } from '@/router/system'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Sidebar from '@/components/common/Sidebar'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
-const SystemFramework: React.FC = () => {
+const SystemFramework = () => {
     return (
         <>
             <FitFullscreen data-component={'system-framework'} className={'flex-horizontal'}>
diff --git a/src/pages/Tools/All.tsx b/src/pages/Tools/All.tsx
index 85e812d..b5af6ff 100644
--- a/src/pages/Tools/All.tsx
+++ b/src/pages/Tools/All.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-const All: React.FC = () => {
+const All = () => {
     return <></>
 }
 
diff --git a/src/pages/Tools/Translation.tsx b/src/pages/Tools/Translation.tsx
index 6057f22..bb9dad6 100644
--- a/src/pages/Tools/Translation.tsx
+++ b/src/pages/Tools/Translation.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-const Translation: React.FC = () => {
+const Translation = () => {
     return <></>
 }
 
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 5a1c5e9..0f205de 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-const Tools: React.FC = () => {
+const Tools = () => {
     return <></>
 }
 
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 42e5ec2..0e5d787 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import '@/assets/css/pages/tools-framework.scss'
 import { tools } from '@/router/tools'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -6,7 +5,7 @@ import Sidebar from '@/components/common/Sidebar'
 import { SidebarScrollElement } from '@/components/common/Sidebar/Scroll'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
-const ToolsFramework: React.FC = () => {
+const ToolsFramework = () => {
     const sidebarScrollRef = useRef<SidebarScrollElement>(null)
 
     const handleOnSidebarSwitch = () => {
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index 4e446cd..aa61947 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-const User: React.FC = () => {
+const User = () => {
     return <></>
 }
 
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 3c9361a..90c205c 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import '@/assets/css/pages/user-framework.scss'
 import user from '@/router/user'
 import { hasPathPermission } from '@/util/auth'
@@ -6,7 +5,7 @@ import FitFullscreen from '@/components/common/FitFullscreen'
 import Sidebar from '@/components/common/Sidebar'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
-const ToolsFramework: React.FC = () => {
+const ToolsFramework = () => {
     return (
         <>
             <FitFullscreen data-component={'user-framework'} className={'flex-horizontal'}>
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 2f5880c..158d7db 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,17 +1,16 @@
-import React from 'react'
 import _ from 'lodash'
 import system from '@/router/system'
 import user from '@/router/user'
 import tools from '@/router/tools'
 import { getAuthRoute, mapJsonToRoute, setTitle } from '@/util/route'
 
-const lazySignPage = React.lazy(() => import('@/pages/Sign'))
+const lazySignPage = lazy(() => import('@/pages/Sign'))
 
 const root: RouteJsonObject[] = [
     {
         path: '/',
         absolutePath: '/',
-        component: React.lazy(() => import('@/AuthRoute')),
+        component: lazy(() => import('@/AuthRoute')),
         children: [
             {
                 path: 'register',
@@ -41,13 +40,13 @@ const root: RouteJsonObject[] = [
                 path: 'loading',
                 absolutePath: '/loading',
                 id: 'loading',
-                component: React.lazy(() => import('@/components/common/FullscreenLoadingMask'))
+                component: lazy(() => import('@/components/common/FullscreenLoadingMask'))
             },
             {
                 path: 'user',
                 absolutePath: '/user',
                 id: 'userFramework',
-                component: React.lazy(() => import('@/pages/UserFramework')),
+                component: lazy(() => import('@/pages/UserFramework')),
                 children: setTitle(user, '个人中心'),
                 name: '个人中心',
                 auth: true
@@ -56,7 +55,7 @@ const root: RouteJsonObject[] = [
                 path: 'system',
                 absolutePath: '/system',
                 id: 'systemFramework',
-                component: React.lazy(() => import('@/pages/SystemFramework')),
+                component: lazy(() => import('@/pages/SystemFramework')),
                 children: setTitle(system, '系统配置'),
                 name: '系统配置',
                 auth: true,
@@ -66,14 +65,14 @@ const root: RouteJsonObject[] = [
                 path: 'online-editor',
                 absolutePath: '/online-editor',
                 id: 'online-editor',
-                component: React.lazy(() => import('@/pages/OnlineEditor')),
+                component: lazy(() => import('@/pages/OnlineEditor')),
                 name: '在线编辑器'
             },
             {
                 path: '',
                 absolutePath: '/',
                 id: 'toolsFramework',
-                component: React.lazy(() => import('@/pages/ToolsFramework')),
+                component: lazy(() => import('@/pages/ToolsFramework')),
                 children: setTitle(tools, '氧工具'),
                 name: '工具',
                 auth: false
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 9633dc4..3c0a0b3 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { getAuthRoute } from '@/util/route'
 
 const system: RouteJsonObject[] = [
@@ -6,18 +5,18 @@ const system: RouteJsonObject[] = [
         path: '',
         absolutePath: '/system',
         id: 'system',
-        component: React.lazy(() => import('@/pages/System')),
+        component: lazy(() => import('@/pages/System')),
         name: '系统管理',
-        icon: React.lazy(() => import('~icons/oxygen/setting')),
+        icon: lazy(() => import('~icons/oxygen/setting')),
         menu: true
     },
     {
         path: 'statistics',
         absolutePath: '/system/statistics',
         id: 'system-statistics',
-        component: React.lazy(() => import('@/pages/System/Statistics')),
+        component: lazy(() => import('@/pages/System/Statistics')),
         name: '系统概况',
-        icon: React.lazy(() => import('~icons/oxygen/chart')),
+        icon: lazy(() => import('~icons/oxygen/chart')),
         menu: true,
         autoHide: true
     },
@@ -25,9 +24,9 @@ const system: RouteJsonObject[] = [
         path: 'settings',
         absolutePath: '/system/settings',
         id: 'system-settings',
-        component: React.lazy(() => import('@/pages/System/Settings')),
+        component: lazy(() => import('@/pages/System/Settings')),
         name: '系统设置',
-        icon: React.lazy(() => import('~icons/oxygen/option')),
+        icon: lazy(() => import('~icons/oxygen/option')),
         menu: true,
         autoHide: true
     },
@@ -35,9 +34,9 @@ const system: RouteJsonObject[] = [
         path: 'user',
         absolutePath: '/system/user',
         id: 'system-user',
-        component: React.lazy(() => import('@/pages/System/User')),
+        component: lazy(() => import('@/pages/System/User')),
         name: '用户管理',
-        icon: React.lazy(() => import('~icons/oxygen/user')),
+        icon: lazy(() => import('~icons/oxygen/user')),
         menu: true,
         autoHide: true
     },
@@ -45,9 +44,9 @@ const system: RouteJsonObject[] = [
         path: 'role',
         absolutePath: '/system/role',
         id: 'system-role',
-        component: React.lazy(() => import('@/pages/System/Role')),
+        component: lazy(() => import('@/pages/System/Role')),
         name: '角色管理',
-        icon: React.lazy(() => import('~icons/oxygen/role')),
+        icon: lazy(() => import('~icons/oxygen/role')),
         menu: true,
         autoHide: true
     },
@@ -55,9 +54,9 @@ const system: RouteJsonObject[] = [
         path: 'group',
         absolutePath: '/system/group',
         id: 'system-group',
-        component: React.lazy(() => import('@/pages/System/Group')),
+        component: lazy(() => import('@/pages/System/Group')),
         name: '群组管理',
-        icon: React.lazy(() => import('~icons/oxygen/group')),
+        icon: lazy(() => import('~icons/oxygen/group')),
         menu: true,
         autoHide: true
     },
@@ -65,9 +64,9 @@ const system: RouteJsonObject[] = [
         path: 'log',
         absolutePath: '/system/log',
         id: 'system-log',
-        component: React.lazy(() => import('@/pages/System/Log')),
+        component: lazy(() => import('@/pages/System/Log')),
         name: '系统日志',
-        icon: React.lazy(() => import('~icons/oxygen/log')),
+        icon: lazy(() => import('~icons/oxygen/log')),
         menu: true,
         autoHide: true
     },
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index b6abe60..aaad39c 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -1,13 +1,11 @@
-import React from 'react'
-
 export const tools: RouteJsonObject[] = [
     {
         path: '',
         absolutePath: '/',
         id: 'tools',
-        component: React.lazy(() => import('@/pages/Tools')),
+        component: lazy(() => import('@/pages/Tools')),
         name: '主页',
-        icon: React.lazy(() => import('~icons/oxygen/home')),
+        icon: lazy(() => import('~icons/oxygen/home')),
         menu: true,
         auth: false
     },
@@ -15,10 +13,10 @@ export const tools: RouteJsonObject[] = [
         path: 'all',
         absolutePath: '/all',
         id: 'tools-all',
-        component: React.lazy(() => import('@/pages/Tools')),
+        component: lazy(() => import('@/pages/Tools')),
         name: '全部工具',
         titlePostfix: ' - 全部工具',
-        icon: React.lazy(() => import('~icons/oxygen/tool')),
+        icon: lazy(() => import('~icons/oxygen/tool')),
         menu: true,
         auth: false
     },
@@ -26,9 +24,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation',
         absolutePath: '/translation',
         id: 'tools-translation',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [
@@ -37,7 +35,7 @@ export const tools: RouteJsonObject[] = [
                 absolutePath: '/translation/1',
                 id: '1',
                 name: '翻译1',
-                icon: React.lazy(() => import('~icons/oxygen/logo')),
+                icon: lazy(() => import('~icons/oxygen/logo')),
                 menu: true,
                 auth: false
             },
@@ -55,9 +53,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation-',
         absolutePath: '/translation-',
         id: 'tools-translation-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [
@@ -83,9 +81,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--',
         absolutePath: '/translation--',
         id: 'tools-translation--',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -93,9 +91,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--1',
         absolutePath: '/translation--1',
         id: 'tools-translation--1',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--1',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -103,9 +101,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--2',
         absolutePath: '/translation--2',
         id: 'tools-translation--2',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--2',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -113,9 +111,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--3',
         absolutePath: '/translation--3',
         id: 'tools-translation--3',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--3',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -123,9 +121,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--4',
         absolutePath: '/translation--4',
         id: 'tools-translation--4',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--4',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -133,9 +131,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--5',
         absolutePath: '/translation--5',
         id: 'tools-translation--5',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--5',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -143,9 +141,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--6',
         absolutePath: '/translation--6',
         id: 'tools-translation--6',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--6',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -153,9 +151,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--7',
         absolutePath: '/translation--7',
         id: 'tools-translation--7',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--7',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -163,9 +161,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--8',
         absolutePath: '/translation--8',
         id: 'tools-translation--8',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--8',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -173,9 +171,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--9',
         absolutePath: '/translation--9',
         id: 'tools-translation--9',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--9',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -183,9 +181,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--10',
         absolutePath: '/translation--10',
         id: 'tools-translation--10',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--10',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -193,9 +191,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--1-',
         absolutePath: '/translation--1-',
         id: 'tools-translation--1-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--1-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -203,9 +201,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--2-',
         absolutePath: '/translation--2-',
         id: 'tools-translation--2-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--2-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -213,9 +211,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--3-',
         absolutePath: '/translation--3-',
         id: 'tools-translation--3-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--3-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -223,9 +221,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--4-',
         absolutePath: '/translation--4-',
         id: 'tools-translation--4-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--4-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -233,9 +231,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--5-',
         absolutePath: '/translation--5-',
         id: 'tools-translation--5-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--5-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -243,9 +241,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--6-',
         absolutePath: '/translation--6-',
         id: 'tools-translation--6-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--6-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -253,9 +251,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--7-',
         absolutePath: '/translation--7-',
         id: 'tools-translation--7-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--7-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -263,9 +261,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--8-',
         absolutePath: '/translation--8-',
         id: 'tools-translation--8-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--8-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -273,9 +271,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--9-',
         absolutePath: '/translation--9-',
         id: 'tools-translation--9-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--9-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false
     },
@@ -283,9 +281,9 @@ export const tools: RouteJsonObject[] = [
         path: 'translation--10-',
         absolutePath: '/translation--10-',
         id: 'tools-translation--10-',
-        component: React.lazy(() => import('@/pages/Tools/Translation')),
+        component: lazy(() => import('@/pages/Tools/Translation')),
         name: '翻译--10-',
-        icon: React.lazy(() => import('~icons/oxygen/jenkins')),
+        icon: lazy(() => import('~icons/oxygen/jenkins')),
         menu: true,
         auth: false,
         children: [
diff --git a/src/router/user.tsx b/src/router/user.tsx
index 875bbea..20d084d 100644
--- a/src/router/user.tsx
+++ b/src/router/user.tsx
@@ -1,13 +1,11 @@
-import React from 'react'
-
 const user: RouteJsonObject[] = [
     {
         path: '',
         absolutePath: '/user',
         id: 'user',
-        component: React.lazy(() => import('@/pages/User')),
+        component: lazy(() => import('@/pages/User')),
         name: '个人档案',
-        icon: React.lazy(() => import('~icons/oxygen/user')),
+        icon: lazy(() => import('~icons/oxygen/user')),
         menu: true
     },
     {
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 4c6d321..8e6cd7f 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { Key } from 'react'
 import {
     URL_SYS_USER_INFO,
     URL_SYS_USER,
@@ -34,7 +34,7 @@ export const r_sys_user_change_password = (param: UserChangePasswordParam) =>
 
 export const r_sys_user_delete = (id: string) => request.delete(`${URL_SYS_USER}/${id}`)
 
-export const r_sys_user_delete_list = (ids: React.Key[]) => request.delete(URL_SYS_USER, { ids })
+export const r_sys_user_delete_list = (ids: Key[]) => request.delete(URL_SYS_USER, { ids })
 
 export const r_sys_power_get_list = () => request.get<PowerSetVo>(URL_SYS_POWER_LIST)
 
@@ -52,7 +52,7 @@ export const r_sys_role_update = (param: RoleAddEditParam) => request.put(URL_SY
 
 export const r_sys_role_delete = (id: string) => request.delete(`${URL_SYS_ROLE}/${id}`)
 
-export const r_sys_role_delete_list = (ids: React.Key[]) => request.delete(URL_SYS_ROLE, { ids })
+export const r_sys_role_delete_list = (ids: Key[]) => request.delete(URL_SYS_ROLE, { ids })
 
 export const r_sys_group_get = (param: GroupGetParam) =>
     request.get<PageVo<GroupWithRoleGetVo>>(URL_SYS_GROUP, param)
@@ -68,7 +68,7 @@ export const r_sys_group_update = (param: GroupAddEditParam) => request.put(URL_
 
 export const r_sys_group_delete = (id: string) => request.delete(`${URL_SYS_GROUP}/${id}`)
 
-export const r_sys_group_delete_list = (ids: React.Key[]) => request.delete(URL_SYS_GROUP, { ids })
+export const r_sys_group_delete_list = (ids: Key[]) => request.delete(URL_SYS_GROUP, { ids })
 
 export const r_sys_log_get = (param: SysLogGetParam) =>
     request.get<PageVo<SysLogGetVo>>(URL_SYS_LOG, param)
diff --git a/src/util/common.tsx b/src/util/common.tsx
index 1e014ea..043b554 100644
--- a/src/util/common.tsx
+++ b/src/util/common.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 import { floor } from 'lodash'
 
@@ -47,7 +47,7 @@ export const showLoadingMask = (id: string) => {
         'position: fixed; width: 100vw; height: 100vh; z-index: 10000; left: 0; top: 0;'
     )
 
-    return ReactDOM.createRoot(container).render(<FullscreenLoadingMask />)
+    return createRoot(container).render(<FullscreenLoadingMask />)
 }
 
 export const removeLoadingMask = (id: string) => {
diff --git a/src/util/hooks.tsx b/src/util/hooks.tsx
index 6152d2a..44cf769 100644
--- a/src/util/hooks.tsx
+++ b/src/util/hooks.tsx
@@ -1,9 +1,6 @@
-import React from 'react'
+import { DependencyList, EffectCallback } from 'react'
 
-export const useUpdatedEffect = (
-    effect: React.EffectCallback,
-    dependencies: React.DependencyList
-) => {
+export const useUpdatedEffect = (effect: EffectCallback, dependencies: DependencyList) => {
     const isFirstRender = useRef(true)
 
     useEffect(() => {

From bcf29f74ef31c38090dec70ce85458130e5d0bd3 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 14 Jan 2024 11:14:14 +0800
Subject: [PATCH 177/307] Optimize code. Update templates.

---
 .../Playground/CodeEditor/Editor/hooks.ts     |  2 +
 .../Playground/CodeEditor/Editor/index.tsx    | 16 +++---
 .../CodeEditor/FileSelector/index.tsx         |  4 +-
 .../Playground/CodeEditor/index.tsx           |  8 +--
 src/components/Playground/files.ts            | 51 ++++---------------
 src/components/Playground/index.tsx           | 26 +++++-----
 src/components/Playground/shared.ts           |  2 +-
 .../Playground/template/.eslintrc.cjs         | 18 -------
 src/components/Playground/template/.gitignore | 24 ---------
 src/components/Playground/template/README.md  | 28 ----------
 src/components/Playground/template/index.html | 13 -----
 .../Playground/template/package.json          | 28 ----------
 .../Playground/template/public/vite.svg       |  1 -
 .../Playground/template/src/App.tsx           | 17 -------
 .../Playground/template/tsconfig.json         | 25 ---------
 .../Playground/template/tsconfig.node.json    | 10 ----
 .../Playground/template/vite.config.js        |  7 ---
 .../{template/src => templates/demo}/App.css  |  0
 .../Playground/templates/demo/App.tsx         | 17 +++++++
 .../demo}/import-map.json                     |  2 +-
 .../{template/src => templates/demo}/main.tsx |  6 +--
 .../Playground/templates/demo/tsconfig.json   | 21 ++++++++
 .../Playground/templates/init/App.tsx         |  5 ++
 .../Playground/templates/init/import-map.json |  6 +++
 .../Playground/templates/init/main.tsx        | 10 ++++
 .../Playground/templates/init/tsconfig.json   | 21 ++++++++
 src/pages/OnlineEditor.tsx                    |  4 +-
 27 files changed, 125 insertions(+), 247 deletions(-)
 delete mode 100644 src/components/Playground/template/.eslintrc.cjs
 delete mode 100644 src/components/Playground/template/.gitignore
 delete mode 100644 src/components/Playground/template/README.md
 delete mode 100644 src/components/Playground/template/index.html
 delete mode 100644 src/components/Playground/template/package.json
 delete mode 100644 src/components/Playground/template/public/vite.svg
 delete mode 100644 src/components/Playground/template/src/App.tsx
 delete mode 100644 src/components/Playground/template/tsconfig.json
 delete mode 100644 src/components/Playground/template/tsconfig.node.json
 delete mode 100644 src/components/Playground/template/vite.config.js
 rename src/components/Playground/{template/src => templates/demo}/App.css (100%)
 create mode 100644 src/components/Playground/templates/demo/App.tsx
 rename src/components/Playground/{template => templates/demo}/import-map.json (98%)
 rename src/components/Playground/{template/src => templates/demo}/main.tsx (71%)
 create mode 100644 src/components/Playground/templates/demo/tsconfig.json
 create mode 100644 src/components/Playground/templates/init/App.tsx
 create mode 100644 src/components/Playground/templates/init/import-map.json
 create mode 100644 src/components/Playground/templates/init/main.tsx
 create mode 100644 src/components/Playground/templates/init/tsconfig.json

diff --git a/src/components/Playground/CodeEditor/Editor/hooks.ts b/src/components/Playground/CodeEditor/Editor/hooks.ts
index b1f591f..21e47ed 100644
--- a/src/components/Playground/CodeEditor/Editor/hooks.ts
+++ b/src/components/Playground/CodeEditor/Editor/hooks.ts
@@ -50,6 +50,8 @@ export const useEditor = () => {
 
         onWatch(typeHelper)
 
+        typeHelper.acquireType(`import React from 'react'`)
+
         editor.onDidChangeModelContent(() => {
             typeHelper.acquireType(editor.getValue())
         })
diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx
index 6e8e483..7dcedd3 100644
--- a/src/components/Playground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -2,13 +2,13 @@ import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
 import '@/components/Playground/CodeEditor/Editor/editor.scss'
 import '@/components/Playground/CodeEditor/Editor/loader'
-import { IEditorOptions, IFiles, ITheme, ITsConfig } from '@/components/Playground/shared'
+import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'
 import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks'
 import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
 
 interface EditorProps {
-    tsConfig?: ITsConfig
+    tsconfig?: ITsconfig
     files?: IFiles
     selectedFileName?: string
     readonly?: boolean
@@ -19,7 +19,7 @@ interface EditorProps {
 }
 
 const Editor = ({
-    tsConfig,
+    tsconfig,
     files = {},
     selectedFileName = '',
     readonly,
@@ -43,9 +43,9 @@ const Editor = ({
 
     const handleOnEditorWillMount = (monaco: Monaco) => {
         monaco.languages.json.jsonDefaults.setDiagnosticsOptions(tsconfigJsonDiagnosticsOptions)
-        tsConfig &&
+        tsconfig &&
             monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
-                tsConfig.compilerOptions
+                tsconfig.compilerOptions
             )
 
         files &&
@@ -93,11 +93,11 @@ const Editor = ({
     }, [file.name])
 
     useEffect(() => {
-        tsConfig &&
+        tsconfig &&
             monacoRef.current?.languages.typescript.typescriptDefaults.setCompilerOptions(
-                tsConfig.compilerOptions
+                tsconfig.compilerOptions
             )
-    }, [tsConfig])
+    }, [tsconfig])
 
     return (
         <>
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index f8fd51c..aa2cb62 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -88,7 +88,7 @@ const FileSelector = ({
         onChange?.(IMPORT_MAP_FILE_NAME)
     }
 
-    const editTsConfig = () => {
+    const editTsconfig = () => {
         if (hasEditing) {
             return
         }
@@ -200,7 +200,7 @@ const FileSelector = ({
                             <Item
                                 value={'tsconfig.json'}
                                 active={selectedFileName === TS_CONFIG_FILE_NAME}
-                                onClick={editTsConfig}
+                                onClick={editTsconfig}
                                 readonly
                             />
                         )}
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index 7b1cbb6..f1f30ab 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import '@/components/Playground/CodeEditor/code-editor.scss'
 import FlexBox from '@/components/common/FlexBox'
-import { IEditorOptions, IFiles, ITheme, ITsConfig } from '@/components/Playground/shared'
+import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
 import {
     fileNameToLanguage,
     getFileNameList,
@@ -13,7 +13,7 @@ import Editor from '@/components/Playground/CodeEditor/Editor'
 
 interface CodeEditorProps {
     theme?: ITheme
-    tsConfig?: ITsConfig
+    tsconfig?: ITsconfig
     files: IFiles
     readonly?: boolean
     readonlyFiles?: string[]
@@ -30,7 +30,7 @@ interface CodeEditorProps {
 
 const CodeEditor = ({
     theme,
-    tsConfig,
+    tsconfig,
     files,
     readonly,
     readonlyFiles,
@@ -133,7 +133,7 @@ const CodeEditor = ({
                     onError={handleOnError}
                 />
                 <Editor
-                    tsConfig={tsConfig}
+                    tsconfig={tsconfig}
                     theme={theme}
                     selectedFileName={
                         onSelectedFileChange ? propsSelectedFileName : selectedFileName
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index 3e3ca26..da960ca 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -1,16 +1,13 @@
 import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
-import { IFile, IFiles, IImportMap, ILanguage, ITsConfig } from '@/components/Playground/shared'
-import AppCss from '@/components/Playground/template/src/App.css?raw'
-import App from '@/components/Playground/template/src/App.tsx?raw'
-import main from '@/components/Playground/template/src/main.tsx?raw'
-import tsconfigSchema from '@/components/Playground/tsconfig-schema.json'
-import importMapSchema from '@/components/Playground/import-map-schema.json'
 import { languages } from 'monaco-editor'
 import DiagnosticsOptions = languages.json.DiagnosticsOptions
-import ScriptTarget = languages.typescript.ScriptTarget
-import ModuleKind = languages.typescript.ModuleKind
-import ModuleResolutionKind = languages.typescript.ModuleResolutionKind
-import JsxEmit = languages.typescript.JsxEmit
+import { IFile, IFiles, IImportMap, ILanguage, ITsconfig } from '@/components/Playground/shared'
+import initTsconfigFile from '@/components/Playground/templates/init/tsconfig.json'
+import initImportMapFile from '@/components/Playground/templates/init/import-map.json'
+import main from '@/components/Playground/templates/init/main.tsx?raw'
+import App from '@/components/Playground/templates/init/App.tsx?raw'
+import tsconfigSchema from '@/components/Playground/tsconfig-schema.json'
+import importMapSchema from '@/components/Playground/import-map-schema.json'
 
 export const TS_CONFIG_FILE_NAME = 'tsconfig.json'
 export const MAIN_FILE_NAME = 'App.tsx'
@@ -138,39 +135,9 @@ export const initFiles: IFiles = getFilesFromUrl() || {
         name: MAIN_FILE_NAME,
         language: fileNameToLanguage(MAIN_FILE_NAME),
         value: App
-    },
-    'App.css': {
-        name: 'App.css',
-        language: 'css',
-        value: AppCss
     }
 }
 
-export const initImportMap: IImportMap = {
-    imports: {
-        react: 'https://esm.sh/react@18.2.0',
-        'react-dom/client': 'https://esm.sh/react-dom@18.2.0'
-    }
-}
+export const initImportMap: IImportMap = initImportMapFile
 
-export const initTsConfig: ITsConfig = {
-    compilerOptions: {
-        target: ScriptTarget.ES2020,
-        useDefineForClassFields: true,
-        module: ModuleKind.ESNext,
-        skipLibCheck: true,
-        moduleResolution: ModuleResolutionKind.NodeJs,
-        allowImportingTsExtensions: true,
-        resolveJsonModule: true,
-        isolatedModules: true,
-        noEmit: true,
-        jsx: JsxEmit.ReactJSX,
-        strict: true,
-        noUnusedLocals: true,
-        noUnusedParameters: true,
-        noFallthroughCasesInSwitch: true,
-        composite: true,
-        types: ['node'],
-        allowSyntheticDefaultImports: true
-    }
-}
+export const initTsconfig: ITsconfig = initTsconfigFile
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index cabccc8..ac1a580 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,6 +1,6 @@
 import '@/components/Playground/playground.scss'
 import { useUpdatedEffect } from '@/util/hooks'
-import { IFiles, IImportMap, ITsConfig } from '@/components/Playground/shared'
+import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
 import {
     IMPORT_MAP_FILE_NAME,
     MAIN_FILE_NAME,
@@ -13,16 +13,16 @@ import Output from '@/components/Playground/Output'
 interface PlaygroundProps {
     initFiles: IFiles
     initImportMapRaw: string
-    initTsConfigRaw: string
+    initTsconfigRaw: string
 }
 
-const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: PlaygroundProps) => {
+const Playground = ({ initFiles, initImportMapRaw, initTsconfigRaw }: PlaygroundProps) => {
     const [files, setFiles] = useState(initFiles)
     const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
     const [importMapRaw, setImportMapRaw] = useState<string>(initImportMapRaw)
     const [importMap, setImportMap] = useState<IImportMap>()
-    const [tsConfigRaw, setTsConfigRaw] = useState<string>(initTsConfigRaw)
-    const [tsConfig, setTsConfig] = useState<ITsConfig>()
+    const [tsconfigRaw, setTsconfigRaw] = useState<string>(initTsconfigRaw)
+    const [tsconfig, setTsconfig] = useState<ITsconfig>()
 
     if (!importMap) {
         try {
@@ -31,11 +31,11 @@ const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: Playground
             setImportMap({ imports: {} })
         }
     }
-    if (!tsConfig) {
+    if (!tsconfig) {
         try {
-            setTsConfig(JSON.parse(tsConfigRaw) as ITsConfig)
+            setTsconfig(JSON.parse(tsconfigRaw) as ITsconfig)
         } catch (e) {
-            setTsConfig({ compilerOptions: {} })
+            setTsconfig({ compilerOptions: {} })
         }
     }
 
@@ -45,7 +45,7 @@ const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: Playground
             return
         }
         if (fileName === TS_CONFIG_FILE_NAME) {
-            setTsConfigRaw(content)
+            setTsconfigRaw(content)
             return
         }
 
@@ -64,16 +64,16 @@ const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: Playground
 
     useUpdatedEffect(() => {
         try {
-            setTsConfig(JSON.parse(tsConfigRaw) as ITsConfig)
+            setTsconfig(JSON.parse(tsconfigRaw) as ITsconfig)
         } catch (e) {
             /* empty */
         }
-    }, [tsConfigRaw])
+    }, [tsconfigRaw])
 
     return (
         <FlexBox data-component={'playground'} direction={'horizontal'}>
             <CodeEditor
-                tsConfig={tsConfig}
+                tsconfig={tsconfig}
                 files={{
                     ...files,
                     'import-map.json': {
@@ -84,7 +84,7 @@ const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: Playground
                     'tsconfig.json': {
                         name: TS_CONFIG_FILE_NAME,
                         language: 'json',
-                        value: tsConfigRaw
+                        value: tsconfigRaw
                     }
                 }}
                 selectedFileName={selectedFileName}
diff --git a/src/components/Playground/shared.ts b/src/components/Playground/shared.ts
index 6c3dbb1..e144fdb 100644
--- a/src/components/Playground/shared.ts
+++ b/src/components/Playground/shared.ts
@@ -18,7 +18,7 @@ export interface IImportMap {
     imports: Record<string, string>
 }
 
-export interface ITsConfig {
+export interface ITsconfig {
     compilerOptions: CompilerOptions
 }
 
diff --git a/src/components/Playground/template/.eslintrc.cjs b/src/components/Playground/template/.eslintrc.cjs
deleted file mode 100644
index d6c9537..0000000
--- a/src/components/Playground/template/.eslintrc.cjs
+++ /dev/null
@@ -1,18 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}
diff --git a/src/components/Playground/template/.gitignore b/src/components/Playground/template/.gitignore
deleted file mode 100644
index a547bf3..0000000
--- a/src/components/Playground/template/.gitignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/src/components/Playground/template/README.md b/src/components/Playground/template/README.md
deleted file mode 100644
index 23892a5..0000000
--- a/src/components/Playground/template/README.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
-  gitignore
diff --git a/src/components/Playground/template/index.html b/src/components/Playground/template/index.html
deleted file mode 100644
index e4b78ea..0000000
--- a/src/components/Playground/template/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
diff --git a/src/components/Playground/template/package.json b/src/components/Playground/template/package.json
deleted file mode 100644
index fdcdf71..0000000
--- a/src/components/Playground/template/package.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "react-playground",
-  "author": "fewismuch",
-  "version": "1.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
-  }
-}
diff --git a/src/components/Playground/template/public/vite.svg b/src/components/Playground/template/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/src/components/Playground/template/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/Playground/template/src/App.tsx b/src/components/Playground/template/src/App.tsx
deleted file mode 100644
index 87189c5..0000000
--- a/src/components/Playground/template/src/App.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useState } from 'react'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <h1>Hello World</h1>
-      <div className='card'>
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-      </div>
-    </>
-  )
-}
-
-export default App
diff --git a/src/components/Playground/template/tsconfig.json b/src/components/Playground/template/tsconfig.json
deleted file mode 100644
index a7fc6fb..0000000
--- a/src/components/Playground/template/tsconfig.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
diff --git a/src/components/Playground/template/tsconfig.node.json b/src/components/Playground/template/tsconfig.node.json
deleted file mode 100644
index 42872c5..0000000
--- a/src/components/Playground/template/tsconfig.node.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
diff --git a/src/components/Playground/template/vite.config.js b/src/components/Playground/template/vite.config.js
deleted file mode 100644
index f16716a..0000000
--- a/src/components/Playground/template/vite.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import react from '@vitejs/plugin-react-swc'
-import { defineConfig } from 'vite'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()]
-})
diff --git a/src/components/Playground/template/src/App.css b/src/components/Playground/templates/demo/App.css
similarity index 100%
rename from src/components/Playground/template/src/App.css
rename to src/components/Playground/templates/demo/App.css
diff --git a/src/components/Playground/templates/demo/App.tsx b/src/components/Playground/templates/demo/App.tsx
new file mode 100644
index 0000000..9409963
--- /dev/null
+++ b/src/components/Playground/templates/demo/App.tsx
@@ -0,0 +1,17 @@
+import { useState } from 'react'
+import './App.css'
+
+const App = () => {
+    const [count, setCount] = useState(0)
+
+    return (
+        <>
+            <h1>Hello World</h1>
+            <div className="card">
+                <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+            </div>
+        </>
+    )
+}
+
+export default App
diff --git a/src/components/Playground/template/import-map.json b/src/components/Playground/templates/demo/import-map.json
similarity index 98%
rename from src/components/Playground/template/import-map.json
rename to src/components/Playground/templates/demo/import-map.json
index fc687e0..7a84fdb 100644
--- a/src/components/Playground/template/import-map.json
+++ b/src/components/Playground/templates/demo/import-map.json
@@ -3,4 +3,4 @@
     "react": "https://esm.sh/react@18.2.0",
     "react-dom/client": "https://esm.sh/react-dom@18.2.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Playground/template/src/main.tsx b/src/components/Playground/templates/demo/main.tsx
similarity index 71%
rename from src/components/Playground/template/src/main.tsx
rename to src/components/Playground/templates/demo/main.tsx
index ad8ece1..652c259 100644
--- a/src/components/Playground/template/src/main.tsx
+++ b/src/components/Playground/templates/demo/main.tsx
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
 )
diff --git a/src/components/Playground/templates/demo/tsconfig.json b/src/components/Playground/templates/demo/tsconfig.json
new file mode 100644
index 0000000..26da82b
--- /dev/null
+++ b/src/components/Playground/templates/demo/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": 7,
+    "useDefineForClassFields": true,
+    "module": 99,
+    "skipLibCheck": true,
+    "moduleResolution": 2,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": 4,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "composite": true,
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true
+  }
+}
\ No newline at end of file
diff --git a/src/components/Playground/templates/init/App.tsx b/src/components/Playground/templates/init/App.tsx
new file mode 100644
index 0000000..b751878
--- /dev/null
+++ b/src/components/Playground/templates/init/App.tsx
@@ -0,0 +1,5 @@
+const App = () => {
+    return <></>
+}
+
+export default App
diff --git a/src/components/Playground/templates/init/import-map.json b/src/components/Playground/templates/init/import-map.json
new file mode 100644
index 0000000..7a84fdb
--- /dev/null
+++ b/src/components/Playground/templates/init/import-map.json
@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "react": "https://esm.sh/react@18.2.0",
+    "react-dom/client": "https://esm.sh/react-dom@18.2.0"
+  }
+}
\ No newline at end of file
diff --git a/src/components/Playground/templates/init/main.tsx b/src/components/Playground/templates/init/main.tsx
new file mode 100644
index 0000000..652c259
--- /dev/null
+++ b/src/components/Playground/templates/init/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+)
diff --git a/src/components/Playground/templates/init/tsconfig.json b/src/components/Playground/templates/init/tsconfig.json
new file mode 100644
index 0000000..26da82b
--- /dev/null
+++ b/src/components/Playground/templates/init/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": 7,
+    "useDefineForClassFields": true,
+    "module": 99,
+    "skipLibCheck": true,
+    "moduleResolution": 2,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": 4,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "composite": true,
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true
+  }
+}
\ No newline at end of file
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index a4b6dc0..f3ba8be 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,6 +1,6 @@
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Playground from '@/components/Playground'
-import { initFiles, initImportMap, initTsConfig } from '@/components/Playground/files'
+import { initFiles, initImportMap, initTsconfig } from '@/components/Playground/files'
 
 const OnlineEditor = () => {
     return (
@@ -9,7 +9,7 @@ const OnlineEditor = () => {
                 <Playground
                     initFiles={initFiles}
                     initImportMapRaw={JSON.stringify(initImportMap, null, 2)}
-                    initTsConfigRaw={JSON.stringify(initTsConfig, null, 2)}
+                    initTsconfigRaw={JSON.stringify(initTsconfig, null, 2)}
                 />
             </FitFullscreen>
         </>

From 6d08e1a8e8c57774b8a712477cc0ff40e94aa6d8 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 15 Jan 2024 15:57:48 +0800
Subject: [PATCH 178/307] Fix can not autoload in production mode bug

---
 src/components/Playground/Output/Preview/index.tsx    | 7 +++----
 src/components/Playground/Output/Preview/preview.scss | 1 +
 src/components/Playground/Output/Transform/index.tsx  | 3 +--
 src/components/Playground/index.tsx                   | 9 ++++-----
 src/components/common/Sidebar/Footer.tsx              | 3 +--
 src/pages/Sign/Forget.tsx                             | 5 ++---
 src/pages/Sign/SignIn.tsx                             | 3 +--
 src/pages/Sign/SignUp.tsx                             | 5 ++---
 src/pages/Sign/Verify.tsx                             | 3 +--
 src/pages/Sign/index.tsx                              | 3 +--
 src/pages/System/Group.tsx                            | 3 +--
 src/pages/System/Log.tsx                              | 3 +--
 src/pages/System/Role.tsx                             | 3 +--
 src/pages/System/Settings/Base.tsx                    | 3 +--
 src/pages/System/Settings/Mail.tsx                    | 3 +--
 src/pages/System/Settings/SensitiveWord.tsx           | 3 +--
 src/pages/System/Statistics/ActiveInfo.tsx            | 5 ++---
 src/pages/System/Statistics/CPUInfo.tsx               | 5 ++---
 src/pages/System/Statistics/HardwareInfo.tsx          | 3 +--
 src/pages/System/Statistics/OnlineInfo.tsx            | 5 ++---
 src/pages/System/Statistics/SoftwareInfo.tsx          | 3 +--
 src/pages/System/Statistics/StorageInfo.tsx           | 5 ++---
 src/pages/System/User.tsx                             | 3 +--
 src/pages/UserFramework.tsx                           | 4 ++--
 24 files changed, 36 insertions(+), 57 deletions(-)

diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx
index 753e70a..f0b4424 100644
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -1,4 +1,3 @@
-import { useUpdatedEffect } from '@/util/hooks'
 import '@/components/Playground/Output/Preview/preview.scss'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
@@ -52,7 +51,7 @@ const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
         }
     }
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         window.addEventListener('message', handleMessage)
 
         return () => {
@@ -60,7 +59,7 @@ const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
         }
     }, [])
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         Compiler.compile(files, importMap)
             .then((result) => {
                 if (loaded) {
@@ -70,7 +69,7 @@ const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
                     } as IMessage)
                 }
             })
-            .catch((e) => {
+            .catch((e: Error) => {
                 setErrorMsg(`编译失败：${e.message}`)
             })
     }, [files, Compiler, loaded])
diff --git a/src/components/Playground/Output/Preview/preview.scss b/src/components/Playground/Output/Preview/preview.scss
index b7da9e6..37f7040 100644
--- a/src/components/Playground/Output/Preview/preview.scss
+++ b/src/components/Playground/Output/Preview/preview.scss
@@ -1,6 +1,7 @@
 [data-component=playground-preview] {
   display: flex;
   position: relative;
+
   iframe {
     border: none;
     flex: 1;
diff --git a/src/components/Playground/Output/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx
index 419f4bc..51cd0f5 100644
--- a/src/components/Playground/Output/Transform/index.tsx
+++ b/src/components/Playground/Output/Transform/index.tsx
@@ -1,7 +1,6 @@
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
 import '@/components/Playground/Output/Transform/transform.scss'
-import { useUpdatedEffect } from '@/util/hooks'
 import { IFile, ITheme } from '@/components/Playground/shared'
 import { cssToJs, jsonToJs, addReactImport } from '@/components/Playground/files'
 import Compiler from '@/components/Playground/compiler'
@@ -32,7 +31,7 @@ const Transform = ({ file, theme }: OutputProps) => {
             })
     }
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         if (file) {
             try {
                 const code = file.value
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index ac1a580..4eedc30 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,5 +1,4 @@
 import '@/components/Playground/playground.scss'
-import { useUpdatedEffect } from '@/util/hooks'
 import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
 import {
     IMPORT_MAP_FILE_NAME,
@@ -54,7 +53,7 @@ const Playground = ({ initFiles, initImportMapRaw, initTsconfigRaw }: Playground
         setFiles(files)
     }
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         try {
             setImportMap(JSON.parse(importMapRaw) as IImportMap)
         } catch (e) {
@@ -62,7 +61,7 @@ const Playground = ({ initFiles, initImportMapRaw, initTsconfigRaw }: Playground
         }
     }, [importMapRaw])
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         try {
             setTsconfig(JSON.parse(tsconfigRaw) as ITsconfig)
         } catch (e) {
@@ -76,12 +75,12 @@ const Playground = ({ initFiles, initImportMapRaw, initTsconfigRaw }: Playground
                 tsconfig={tsconfig}
                 files={{
                     ...files,
-                    'import-map.json': {
+                    [IMPORT_MAP_FILE_NAME]: {
                         name: IMPORT_MAP_FILE_NAME,
                         language: 'json',
                         value: importMapRaw
                     },
-                    'tsconfig.json': {
+                    [TS_CONFIG_FILE_NAME]: {
                         name: TS_CONFIG_FILE_NAME,
                         language: 'json',
                         value: tsconfigRaw
diff --git a/src/components/common/Sidebar/Footer.tsx b/src/components/common/Sidebar/Footer.tsx
index a25a5f2..8095ef2 100644
--- a/src/components/common/Sidebar/Footer.tsx
+++ b/src/components/common/Sidebar/Footer.tsx
@@ -1,7 +1,6 @@
 import Icon from '@ant-design/icons'
 import { COLOR_ERROR } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
-import { useUpdatedEffect } from '@/util/hooks'
 import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
 import { r_auth_logout } from '@/services/auth'
 
@@ -42,7 +41,7 @@ const Footer = () => {
 
     const loginStatus = getLoginStatus()
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         if (getLoginStatus()) {
             void getNickname().then((nickname) => {
                 setNickname(nickname)
diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx
index 3e094e4..06a0b58 100644
--- a/src/pages/Sign/Forget.tsx
+++ b/src/pages/Sign/Forget.tsx
@@ -8,7 +8,6 @@ import {
     PERMISSION_USER_NOT_FOUND,
     SYSTEM_INVALID_CAPTCHA_CODE
 } from '@/constants/common.constants'
-import { useUpdatedEffect } from '@/util/hooks'
 import { r_auth_forget, r_auth_retrieve } from '@/services/auth'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
@@ -45,7 +44,7 @@ const Forget = () => {
     const [captchaCode, setCaptchaCode] = useState('')
     const [retrieveCaptchaCode, setRetrieveCaptchaCode] = useState('')
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         if (!isSending) {
             setCaptchaCode('')
             turnstileRef.current?.reset()
@@ -53,7 +52,7 @@ const Forget = () => {
         }
     }, [isSending])
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         if (!isChanging) {
             setRetrieveCaptchaCode('')
             retrieveTurnstileRef.current?.reset()
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index 85ab8af..11d86f0 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -8,7 +8,6 @@ import {
     PERMISSION_USERNAME_NOT_FOUND,
     SYSTEM_INVALID_CAPTCHA_CODE
 } from '@/constants/common.constants'
-import { useUpdatedEffect } from '@/util/hooks'
 import { getUserInfo, setToken } from '@/util/auth'
 import { utcToLocalTime } from '@/util/datetime'
 import { r_auth_login } from '@/services/auth'
@@ -33,7 +32,7 @@ const SignIn = () => {
     const [isSigningIn, setIsSigningIn] = useState(false)
     const [captchaCode, setCaptchaCode] = useState('')
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         if (!isSigningIn) {
             setCaptchaCode('')
             turnstileRef.current?.reset()
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx
index 61b4f2e..0ee88f8 100644
--- a/src/pages/Sign/SignUp.tsx
+++ b/src/pages/Sign/SignUp.tsx
@@ -7,7 +7,6 @@ import {
     SYSTEM_INVALID_CAPTCHA_CODE,
     SYSTEM_MATCH_SENSITIVE_WORD
 } from '@/constants/common.constants'
-import { useUpdatedEffect } from '@/util/hooks'
 import { getLoginStatus, setToken } from '@/util/auth'
 import { r_auth_register, r_auth_resend } from '@/services/auth'
 import FitCenter from '@/components/common/FitCenter'
@@ -32,7 +31,7 @@ const SignUp = () => {
     const [isSending, setIsSending] = useState(false)
     const [captchaCode, setCaptchaCode] = useState('')
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         if (!isSigningUp) {
             setCaptchaCode('')
             turnstileRef.current?.reset()
@@ -40,7 +39,7 @@ const SignUp = () => {
         }
     }, [isSigningUp])
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         if (location.pathname !== '/register') {
             return
         }
diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx
index c370db5..049c684 100644
--- a/src/pages/Sign/Verify.tsx
+++ b/src/pages/Sign/Verify.tsx
@@ -5,7 +5,6 @@ import {
     PERMISSION_VERIFY_SUCCESS,
     SYSTEM_MATCH_SENSITIVE_WORD
 } from '@/constants/common.constants'
-import { useUpdatedEffect } from '@/util/hooks'
 import { getLoginStatus, getUserInfo, requestUserInfo } from '@/util/auth'
 import { getRedirectUrl } from '@/util/route'
 import { r_auth_resend, r_auth_verify } from '@/services/auth'
@@ -26,7 +25,7 @@ const Verify = () => {
     const [avatar, setAvatar] = useState('')
     const [isVerifying, setIsVerifying] = useState(false)
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         if (location.pathname !== '/verify') {
             return
         }
diff --git a/src/pages/Sign/index.tsx b/src/pages/Sign/index.tsx
index 01417b6..7e7db24 100644
--- a/src/pages/Sign/index.tsx
+++ b/src/pages/Sign/index.tsx
@@ -1,5 +1,4 @@
 import '@/assets/css/pages/sign.scss'
-import { useUpdatedEffect } from '@/util/hooks'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
@@ -16,7 +15,7 @@ const Sign = () => {
 
     const leftPage = ['register', 'verify', 'forget']
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         lastPage.current = currentPage.current
         currentPage.current = match.id
 
diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index fcea149..1d9e64e 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -10,7 +10,6 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
 import { utcToLocalTime } from '@/util/datetime'
 import {
@@ -484,7 +483,7 @@ const Group = () => {
         }
     }, [formValues])
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         getGroup()
     }, [
         JSON.stringify(tableParams.filters),
diff --git a/src/pages/System/Log.tsx b/src/pages/System/Log.tsx
index a596053..1de1dea 100644
--- a/src/pages/System/Log.tsx
+++ b/src/pages/System/Log.tsx
@@ -1,7 +1,6 @@
 import { ChangeEvent, KeyboardEvent } from 'react'
 import dayjs from 'dayjs'
 import { COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
-import { useUpdatedEffect } from '@/util/hooks'
 import { dayjsToUtc, utcToLocalTime } from '@/util/datetime'
 import { r_sys_log_get } from '@/services/system'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -223,7 +222,7 @@ const Log = () => {
             })
     }
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         getLog()
     }, [
         JSON.stringify(tableParams.filters),
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index 00c0f28..a0be4af 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -10,7 +10,6 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { useUpdatedEffect } from '@/util/hooks'
 import { utcToLocalTime } from '@/util/datetime'
 import { hasPermission, powerListToPowerTree } from '@/util/auth'
 import {
@@ -493,7 +492,7 @@ const Role = () => {
         }
     }, [formValues])
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         getRole()
     }, [
         JSON.stringify(tableParams.filters),
diff --git a/src/pages/System/Settings/Base.tsx b/src/pages/System/Settings/Base.tsx
index 8b52d43..f4839e5 100644
--- a/src/pages/System/Settings/Base.tsx
+++ b/src/pages/System/Settings/Base.tsx
@@ -1,4 +1,3 @@
-import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
 import { r_sys_settings_base_get, r_sys_settings_base_update } from '@/services/system'
 import { SettingsCard } from '@/pages/System/Settings'
@@ -40,7 +39,7 @@ const Base = () => {
         })
     }
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         getBaseSettings()
     }, [])
 
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index 87802b5..d540030 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -1,5 +1,4 @@
 import Icon from '@ant-design/icons'
-import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
 import {
     r_sys_settings_mail_get,
@@ -95,7 +94,7 @@ const Mail = () => {
         })
     }
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         getMailSettings()
     }, [])
 
diff --git a/src/pages/System/Settings/SensitiveWord.tsx b/src/pages/System/Settings/SensitiveWord.tsx
index ab2daf2..f61b713 100644
--- a/src/pages/System/Settings/SensitiveWord.tsx
+++ b/src/pages/System/Settings/SensitiveWord.tsx
@@ -1,7 +1,6 @@
 import { ChangeEvent } from 'react'
 import Icon from '@ant-design/icons'
 import { DATABASE_DUPLICATE_KEY, DATABASE_INSERT_SUCCESS } from '@/constants/common.constants'
-import { useUpdatedEffect } from '@/util/hooks'
 import {
     r_sys_settings_sensitive_add,
     r_sys_settings_sensitive_delete,
@@ -95,7 +94,7 @@ const SensitiveWord = () => {
             })
     }
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         getSensitiveWordSettings()
     }, [])
 
diff --git a/src/pages/System/Statistics/ActiveInfo.tsx b/src/pages/System/Statistics/ActiveInfo.tsx
index d3e2000..c79c012 100644
--- a/src/pages/System/Statistics/ActiveInfo.tsx
+++ b/src/pages/System/Statistics/ActiveInfo.tsx
@@ -1,6 +1,5 @@
 import Icon from '@ant-design/icons'
 import * as echarts from 'echarts/core'
-import { useUpdatedEffect } from '@/util/hooks'
 import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_active } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
@@ -13,7 +12,7 @@ const ActiveInfo = () => {
     const [isLoading, setIsLoading] = useState(false)
     const [scope, setScope] = useState('WEAK')
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         const chartResizeObserver = new ResizeObserver(() => {
             activeInfoEChartsRef.current?.resize()
         })
@@ -25,7 +24,7 @@ const ActiveInfo = () => {
         }
     }, [isLoading])
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         getActiveInfo()
     }, [])
 
diff --git a/src/pages/System/Statistics/CPUInfo.tsx b/src/pages/System/Statistics/CPUInfo.tsx
index 885a236..1d53964 100644
--- a/src/pages/System/Statistics/CPUInfo.tsx
+++ b/src/pages/System/Statistics/CPUInfo.tsx
@@ -1,6 +1,5 @@
 import * as echarts from 'echarts/core'
 import { BarSeriesOption } from 'echarts/charts'
-import { useUpdatedEffect } from '@/util/hooks'
 import { r_sys_statistics_cpu } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
 import {
@@ -26,7 +25,7 @@ const CPUInfo = () => {
         }
     }
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         const chartResizeObserver = new ResizeObserver(() => {
             cpuInfoEChartsRef.current.forEach((value) => value.resize())
         })
@@ -38,7 +37,7 @@ const CPUInfo = () => {
         }
     }, [cpuInfoDivRef.current])
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         const intervalId = setInterval(getCpuInfo(), parseInt(refreshInterval) * 1000)
 
         return () => {
diff --git a/src/pages/System/Statistics/HardwareInfo.tsx b/src/pages/System/Statistics/HardwareInfo.tsx
index f571a90..96399ca 100644
--- a/src/pages/System/Statistics/HardwareInfo.tsx
+++ b/src/pages/System/Statistics/HardwareInfo.tsx
@@ -1,4 +1,3 @@
-import { useUpdatedEffect } from '@/util/hooks'
 import { r_sys_statistics_hardware } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
 import { CommonCard } from '@/pages/System/Statistics'
@@ -6,7 +5,7 @@ import { CommonCard } from '@/pages/System/Statistics'
 const HardwareInfo = () => {
     const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         void r_sys_statistics_hardware().then((res) => {
             const response = res.data
             if (response.success) {
diff --git a/src/pages/System/Statistics/OnlineInfo.tsx b/src/pages/System/Statistics/OnlineInfo.tsx
index 29271ea..03ea1a4 100644
--- a/src/pages/System/Statistics/OnlineInfo.tsx
+++ b/src/pages/System/Statistics/OnlineInfo.tsx
@@ -1,6 +1,5 @@
 import Icon from '@ant-design/icons'
 import * as echarts from 'echarts/core'
-import { useUpdatedEffect } from '@/util/hooks'
 import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_online } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
@@ -14,7 +13,7 @@ const OnlineInfo = () => {
     const [currentOnlineCount, setCurrentOnlineCount] = useState(-1)
     const [scope, setScope] = useState('WEAK')
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         const chartResizeObserver = new ResizeObserver(() => {
             onlineInfoEChartsRef.current?.resize()
         })
@@ -26,7 +25,7 @@ const OnlineInfo = () => {
         }
     }, [isLoading])
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         getOnlineInfo()
     }, [])
 
diff --git a/src/pages/System/Statistics/SoftwareInfo.tsx b/src/pages/System/Statistics/SoftwareInfo.tsx
index a187349..65fe84a 100644
--- a/src/pages/System/Statistics/SoftwareInfo.tsx
+++ b/src/pages/System/Statistics/SoftwareInfo.tsx
@@ -1,4 +1,3 @@
-import { useUpdatedEffect } from '@/util/hooks'
 import { utcToLocalTime } from '@/util/datetime'
 import { r_sys_statistics_software } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
@@ -7,7 +6,7 @@ import { CommonCard } from '@/pages/System/Statistics'
 const SoftwareInfo = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         void r_sys_statistics_software().then((res) => {
             const response = res.data
             if (response.success) {
diff --git a/src/pages/System/Statistics/StorageInfo.tsx b/src/pages/System/Statistics/StorageInfo.tsx
index 3e4fa34..c68a198 100644
--- a/src/pages/System/Statistics/StorageInfo.tsx
+++ b/src/pages/System/Statistics/StorageInfo.tsx
@@ -1,7 +1,6 @@
 import * as echarts from 'echarts/core'
 import { BarSeriesOption } from 'echarts/charts'
 import { formatByteSize } from '@/util/common'
-import { useUpdatedEffect } from '@/util/hooks'
 import { r_sys_statistics_storage } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
 import {
@@ -25,7 +24,7 @@ const StorageInfo = () => {
         tooltip: { valueFormatter: (value) => formatByteSize(value as number) }
     }
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         const chartResizeObserver = new ResizeObserver(() => {
             storageInfoEChartsRef.current.forEach((value) => value.resize())
         })
@@ -37,7 +36,7 @@ const StorageInfo = () => {
         }
     }, [storageInfoDivRef.current])
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         const intervalId = setInterval(getStorageInfo(), parseInt(refreshInterval) * 1000)
 
         return () => {
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 29591b2..9944054 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -11,7 +11,6 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { useUpdatedEffect } from '@/util/hooks'
 import { hasPermission } from '@/util/auth'
 import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc, getNowUtc } from '@/util/datetime'
 import {
@@ -748,7 +747,7 @@ const User = () => {
         }
     }, [formValues])
 
-    useUpdatedEffect(() => {
+    useEffect(() => {
         getUser()
     }, [
         JSON.stringify(tableParams.filters),
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 90c205c..2cba983 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -5,7 +5,7 @@ import FitFullscreen from '@/components/common/FitFullscreen'
 import Sidebar from '@/components/common/Sidebar'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
-const ToolsFramework = () => {
+const UserFramework = () => {
     return (
         <>
             <FitFullscreen data-component={'user-framework'} className={'flex-horizontal'}>
@@ -62,4 +62,4 @@ const ToolsFramework = () => {
     )
 }
 
-export default ToolsFramework
+export default UserFramework

From 4240db5a0d1b7c433f2e2de3edf16331ee96297e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 15 Jan 2024 18:29:41 +0800
Subject: [PATCH 179/307] Upgrade dependencies

---
 package-lock.json | 1004 ++++++++++++++++-----------------------------
 package.json      |   42 +-
 2 files changed, 384 insertions(+), 662 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d132bcd..901d1e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,11 @@
       "version": "0.0.0",
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
-        "@marsidev/react-turnstile": "^0.4.0",
+        "@marsidev/react-turnstile": "^0.4.1",
         "@monaco-editor/react": "^4.6.0",
         "@typescript/ata": "^0.9.4",
-        "antd": "^5.12.1",
-        "axios": "^1.6.2",
+        "antd": "^5.13.1",
+        "axios": "^1.6.5",
         "dayjs": "^1.11.10",
         "echarts": "^5.4.3",
         "esbuild-wasm": "^0.19.11",
@@ -23,13 +23,13 @@
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
         "match-sorter": "^6.3.1",
-        "moment": "^2.29.4",
+        "moment": "^2.30.1",
         "monaco-editor": "^0.45.0",
         "monaco-jsx-syntax-highlight": "^1.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router": "^6.20.1",
-        "react-router-dom": "^6.20.1",
+        "react-router": "^6.21.2",
+        "react-router-dom": "^6.21.2",
         "size-sensor": "^1.0.2",
         "vanilla-tilt": "^1.8.1"
       },
@@ -38,28 +38,28 @@
         "@svgr/plugin-jsx": "^8.1.0",
         "@types/jsdom": "^21.1.6",
         "@types/lodash": "^4.14.202",
-        "@types/node": "^20.10.4",
-        "@types/react": "^18.2.42",
-        "@types/react-dom": "^18.2.17",
-        "@typescript-eslint/eslint-plugin": "^6.13.2",
-        "@typescript-eslint/parser": "^6.13.2",
+        "@types/node": "^20.11.1",
+        "@types/react": "^18.2.48",
+        "@types/react-dom": "^18.2.18",
+        "@typescript-eslint/eslint-plugin": "^6.18.1",
+        "@typescript-eslint/parser": "^6.18.1",
         "@vitejs/plugin-react": "^4.2.1",
-        "eslint": "^8.55.0",
+        "eslint": "^8.56.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-config-standard-with-typescript": "^40.0.0",
-        "eslint-plugin-import": "^2.29.0",
-        "eslint-plugin-prettier": "^5.0.1",
+        "eslint-config-standard-with-typescript": "^43.0.0",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-promise": "^6.1.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.5",
-        "jsdom": "^23.0.1",
-        "prettier": "^3.1.0",
-        "sass": "^1.69.5",
+        "jsdom": "^23.2.0",
+        "prettier": "^3.2.2",
+        "sass": "^1.69.7",
         "stylelint-config-prettier": "^9.0.5",
         "typescript": "^5.3.3",
-        "unplugin-auto-import": "^0.17.2",
-        "unplugin-icons": "^0.18.1",
-        "vite": "^5.0.6"
+        "unplugin-auto-import": "^0.17.3",
+        "unplugin-icons": "^0.18.2",
+        "vite": "^5.0.11"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -85,23 +85,23 @@
       }
     },
     "node_modules/@ant-design/colors": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-7.0.0.tgz",
-      "integrity": "sha512-iVm/9PfGCbC0dSMBrz7oiEXZaaGH7ceU40OJEfKmyuzR9R5CRimJYPlRiFtMQGQcbNMea/ePcoIebi4ASGYXtg==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-7.0.2.tgz",
+      "integrity": "sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==",
       "dependencies": {
-        "@ctrl/tinycolor": "^3.4.0"
+        "@ctrl/tinycolor": "^3.6.1"
       }
     },
     "node_modules/@ant-design/cssinjs": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.18.0.tgz",
-      "integrity": "sha512-NXzfnNjJgpn+L6d0cD2cS14Tsqs46Bsua6PwVMlmN+F0OEoa9PhJRwUWmI+HyIrc4cgVZVfQTDpXC0p07Jmglw==",
+      "version": "1.18.2",
+      "resolved": "https://registry.npmmirror.com/@ant-design/cssinjs/-/cssinjs-1.18.2.tgz",
+      "integrity": "sha512-514V9rjLaFYb3v4s55/8bg2E6fb81b99s3crDZf4nSwtiDLLXs8axnIph+q2TVkY2hbJPZOn/cVsVcnLkzFy7w==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "@emotion/hash": "^0.8.0",
         "@emotion/unitless": "^0.7.5",
         "classnames": "^2.3.1",
-        "csstype": "^3.0.10",
+        "csstype": "^3.1.3",
         "rc-util": "^5.35.0",
         "stylis": "^4.0.13"
       },
@@ -218,11 +218,22 @@
       }
     },
     "node_modules/@antfu/utils": {
-      "version": "0.7.6",
-      "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.6.tgz",
-      "integrity": "sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==",
+      "version": "0.7.7",
+      "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.7.tgz",
+      "integrity": "sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==",
       "dev": true
     },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/@asamuzakjp/dom-selector/-/dom-selector-2.0.2.tgz",
+      "integrity": "sha512-x1KXOatwofR6ZAYzXRBL5wrdV0vwNxlTCK9NCuLqAzQYARqGcvFwiJA6A1ERuh+dgeA4Dxm3JBYictIes+SqUQ==",
+      "dev": true,
+      "dependencies": {
+        "bidi-js": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "is-potential-custom-element-name": "^1.0.1"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
@@ -502,9 +513,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
-      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
+      "version": "7.23.8",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.8.tgz",
+      "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -584,12 +595,12 @@
     },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
     "node_modules/@emotion/unitless": {
       "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.7.5.tgz",
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "node_modules/@esbuild/android-arm": {
@@ -1019,9 +1030,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.55.0.tgz",
-      "integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmmirror.com/@eslint/js/-/js-8.56.0.tgz",
+      "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1239,9 +1250,9 @@
       }
     },
     "node_modules/@marsidev/react-turnstile": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.4.0.tgz",
-      "integrity": "sha512-U0lwTWQhP04AnIdWEbLpF/phpqtblNbrnE4yJMdvGyeOZOTmuHW3wB+V8X+BO55pTXZitp2GgJsrGkbUjwJIeQ==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/@marsidev/react-turnstile/-/react-turnstile-0.4.1.tgz",
+      "integrity": "sha512-uZusUW9mPr0csWpls8bApe5iuRK0YK7H1PCKqfM4djW3OA9GB9rU68irjk7xRO8qlHyj0aDTeVu9tTLPExBO4Q==",
       "peerDependencies": {
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
@@ -1306,32 +1317,24 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@pkgr/utils": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmmirror.com/@pkgr/utils/-/utils-2.4.2.tgz",
-      "integrity": "sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==",
+    "node_modules/@pkgr/core": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmmirror.com/@pkgr/core/-/core-0.1.0.tgz",
+      "integrity": "sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==",
       "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "fast-glob": "^3.3.0",
-        "is-glob": "^4.0.3",
-        "open": "^9.1.0",
-        "picocolors": "^1.0.0",
-        "tslib": "^2.6.0"
-      },
       "engines": {
         "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
       }
     },
     "node_modules/@rc-component/color-picker": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmmirror.com/@rc-component/color-picker/-/color-picker-1.4.1.tgz",
-      "integrity": "sha512-vh5EWqnsayZa/JwUznqDaPJz39jznx/YDbyBuVJntv735tKXKwEUZZb2jYEldOg+NKWZwtALjGMrNeGBmqFoEw==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/@rc-component/color-picker/-/color-picker-1.5.1.tgz",
+      "integrity": "sha512-onyAFhWKXuG4P162xE+7IgaJkPkwM94XlOYnQuu69XdXWMfxpeFi6tpJBsieIMV7EnyLV5J3lDzdLiFeK0iEBA==",
       "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "@ctrl/tinycolor": "^3.6.0",
+        "@babel/runtime": "^7.23.6",
+        "@ctrl/tinycolor": "^3.6.1",
         "classnames": "^2.2.6",
-        "rc-util": "^5.30.0"
+        "rc-util": "^5.38.1"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -1340,7 +1343,7 @@
     },
     "node_modules/@rc-component/context": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@rc-component/context/-/context-1.4.0.tgz",
       "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
@@ -1353,7 +1356,7 @@
     },
     "node_modules/@rc-component/mini-decimal": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
       "integrity": "sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==",
       "dependencies": {
         "@babel/runtime": "^7.18.0"
@@ -1397,9 +1400,9 @@
       }
     },
     "node_modules/@rc-component/tour": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.11.0.tgz",
-      "integrity": "sha512-JRjzuvZf8LWY/8fM9N4rw/XUV1LdWwuIBrlJYRNFbaRynhlFdbYw5ac1R645P/SOCT7sB5LWBY7jfCJ6oaMGsg==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmmirror.com/@rc-component/tour/-/tour-1.12.1.tgz",
+      "integrity": "sha512-P2pvSN+rImacOoTuT4NZ+tdjJmxoi6FZ9w++7GnYK6hVeU8qD+iLnDHkgtE7tuvpZxIRS3dPF5O2ykupHx9E/g==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "@rc-component/portal": "^1.0.0-9",
@@ -1436,16 +1439,16 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz",
-      "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.14.2.tgz",
+      "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==",
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
       "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
       "dev": true,
       "dependencies": {
@@ -1829,7 +1832,7 @@
     },
     "node_modules/@types/estree": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
@@ -1846,7 +1849,7 @@
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
@@ -1870,9 +1873,9 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "20.10.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz",
-      "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==",
+      "version": "20.11.1",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.11.1.tgz",
+      "integrity": "sha512-DsXojJUES2M+FE8CpptJTKpg+r54moV9ZEncPstni1WHFmTcCzeFLnMFfyhCVS8XNOy/OQG+8lVxRLRrVHmV5A==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -1899,9 +1902,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.47",
-      "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.2.47.tgz",
-      "integrity": "sha512-xquNkkOirwyCgoClNk85BjP+aqnIS+ckAJ8i37gAbDs14jfW/J23f2GItAf33oiUPQnqNMALiFeoM9Y5mbjpVQ==",
+      "version": "18.2.48",
+      "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.2.48.tgz",
+      "integrity": "sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1926,7 +1929,7 @@
     },
     "node_modules/@types/semver": {
       "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/semver/-/semver-7.5.6.tgz",
       "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==",
       "dev": true
     },
@@ -1937,16 +1940,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.13.2.tgz",
-      "integrity": "sha512-3+9OGAWHhk4O1LlcwLBONbdXsAhLjyCFogJY/cWy2lxdVJ2JrcTF2pTGMaLl2AE7U1l31n8Py4a8bx5DLf/0dQ==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.18.1.tgz",
+      "integrity": "sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.13.2",
-        "@typescript-eslint/type-utils": "6.13.2",
-        "@typescript-eslint/utils": "6.13.2",
-        "@typescript-eslint/visitor-keys": "6.13.2",
+        "@typescript-eslint/scope-manager": "6.18.1",
+        "@typescript-eslint/type-utils": "6.18.1",
+        "@typescript-eslint/utils": "6.18.1",
+        "@typescript-eslint/visitor-keys": "6.18.1",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.4",
@@ -1957,10 +1960,6 @@
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
       "peerDependencies": {
         "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
         "eslint": "^7.0.0 || ^8.0.0"
@@ -2005,24 +2004,20 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.13.2.tgz",
-      "integrity": "sha512-MUkcC+7Wt/QOGeVlM8aGGJZy1XV5YKjTpq9jK6r6/iLsGXhBVaGP5N0UYvFsu9BFlSpwY9kMretzdBH01rkRXg==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-6.18.1.tgz",
+      "integrity": "sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.13.2",
-        "@typescript-eslint/types": "6.13.2",
-        "@typescript-eslint/typescript-estree": "6.13.2",
-        "@typescript-eslint/visitor-keys": "6.13.2",
+        "@typescript-eslint/scope-manager": "6.18.1",
+        "@typescript-eslint/types": "6.18.1",
+        "@typescript-eslint/typescript-estree": "6.18.1",
+        "@typescript-eslint/visitor-keys": "6.18.1",
         "debug": "^4.3.4"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
       "peerDependencies": {
         "eslint": "^7.0.0 || ^8.0.0"
       },
@@ -2033,40 +2028,32 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.13.2.tgz",
-      "integrity": "sha512-CXQA0xo7z6x13FeDYCgBkjWzNqzBn8RXaE3QVQVIUm74fWJLkJkaHmHdKStrxQllGh6Q4eUGyNpMe0b1hMkXFA==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-6.18.1.tgz",
+      "integrity": "sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.13.2",
-        "@typescript-eslint/visitor-keys": "6.13.2"
+        "@typescript-eslint/types": "6.18.1",
+        "@typescript-eslint/visitor-keys": "6.18.1"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.13.2.tgz",
-      "integrity": "sha512-Qr6ssS1GFongzH2qfnWKkAQmMUyZSyOr0W54nZNU1MDfo+U4Mv3XveeLZzadc/yq8iYhQZHYT+eoXJqnACM1tw==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-6.18.1.tgz",
+      "integrity": "sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.13.2",
-        "@typescript-eslint/utils": "6.13.2",
+        "@typescript-eslint/typescript-estree": "6.18.1",
+        "@typescript-eslint/utils": "6.18.1",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.0.1"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
       "peerDependencies": {
         "eslint": "^7.0.0 || ^8.0.0"
       },
@@ -2077,48 +2064,50 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.13.2.tgz",
-      "integrity": "sha512-7sxbQ+EMRubQc3wTfTsycgYpSujyVbI1xw+3UMRUcrhSy+pN09y/lWzeKDbvhoqcRbHdc+APLs/PWYi/cisLPg==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/types/-/types-6.18.1.tgz",
+      "integrity": "sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.13.2.tgz",
-      "integrity": "sha512-SuD8YLQv6WHnOEtKv8D6HZUzOub855cfPnPMKvdM/Bh1plv1f7Q/0iFUDLKKlxHcEstQnaUU4QZskgQq74t+3w==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.1.tgz",
+      "integrity": "sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.13.2",
-        "@typescript-eslint/visitor-keys": "6.13.2",
+        "@typescript-eslint/types": "6.18.1",
+        "@typescript-eslint/visitor-keys": "6.18.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
         "semver": "^7.5.4",
         "ts-api-utils": "^1.0.1"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
       "peerDependenciesMeta": {
         "typescript": {
           "optional": true
         }
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
       "dependencies": {
@@ -2128,9 +2117,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
       "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
       "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
@@ -2145,38 +2146,34 @@
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/yallist": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.13.2.tgz",
-      "integrity": "sha512-b9Ptq4eAZUym4idijCRzl61oPCwwREcfDI8xGk751Vhzig5fFZR9CyzDz4Sp/nxSLBYxUPyh4QdIDqWykFhNmQ==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-6.18.1.tgz",
+      "integrity": "sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
         "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.13.2",
-        "@typescript-eslint/types": "6.13.2",
-        "@typescript-eslint/typescript-estree": "6.13.2",
+        "@typescript-eslint/scope-manager": "6.18.1",
+        "@typescript-eslint/types": "6.18.1",
+        "@typescript-eslint/typescript-estree": "6.18.1",
         "semver": "^7.5.4"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
       "peerDependencies": {
         "eslint": "^7.0.0 || ^8.0.0"
       }
     },
     "node_modules/@typescript-eslint/utils/node_modules/lru-cache": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
       "dependencies": {
@@ -2188,7 +2185,7 @@
     },
     "node_modules/@typescript-eslint/utils/node_modules/semver": {
       "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
       "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
@@ -2203,25 +2200,21 @@
     },
     "node_modules/@typescript-eslint/utils/node_modules/yallist": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.13.2.tgz",
-      "integrity": "sha512-OGznFs0eAQXJsp+xSd6k/O1UbFi/K/L7WjqeRoFE7vadjAF9y0uppXhYNQNEqygjou782maGClOoZwPqF0Drlw==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.1.tgz",
+      "integrity": "sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.13.2",
+        "@typescript-eslint/types": "6.18.1",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
       }
     },
     "node_modules/@typescript/ata": {
@@ -2328,63 +2321,58 @@
       }
     },
     "node_modules/antd": {
-      "version": "5.12.1",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-5.12.1.tgz",
-      "integrity": "sha512-lDTg4U/4MxDD4OK0sLM3D0ge+5nHKj27dUj4ufF1FhQKPcRkVnkCWJ43gb1Cn+S3ybvz7yfsiEv0v+QqWJgPlA==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmmirror.com/antd/-/antd-5.13.1.tgz",
+      "integrity": "sha512-/qAPsr6UyJPSFZQD9G7kW98GelH2Bajli+1q7CRW4IinYQ0R0UVJckFX11emByhiU4Jd4WNH/hOO+fZtp0eVDA==",
       "dependencies": {
-        "@ant-design/colors": "^7.0.0",
-        "@ant-design/cssinjs": "^1.18.0",
+        "@ant-design/colors": "^7.0.2",
+        "@ant-design/cssinjs": "^1.18.2",
         "@ant-design/icons": "^5.2.6",
         "@ant-design/react-slick": "~1.0.2",
-        "@babel/runtime": "^7.23.4",
         "@ctrl/tinycolor": "^3.6.1",
-        "@rc-component/color-picker": "~1.4.1",
+        "@rc-component/color-picker": "~1.5.1",
         "@rc-component/mutate-observer": "^1.1.0",
-        "@rc-component/tour": "~1.11.0",
+        "@rc-component/tour": "~1.12.1",
         "@rc-component/trigger": "^1.18.2",
-        "classnames": "^2.3.2",
+        "classnames": "^2.5.1",
         "copy-to-clipboard": "^3.3.3",
-        "dayjs": "^1.11.1",
+        "dayjs": "^1.11.10",
         "qrcode.react": "^3.1.0",
-        "rc-cascader": "~3.20.0",
+        "rc-cascader": "~3.21.0",
         "rc-checkbox": "~3.1.0",
         "rc-collapse": "~3.7.2",
         "rc-dialog": "~9.3.4",
-        "rc-drawer": "~6.5.2",
+        "rc-drawer": "~7.0.0",
         "rc-dropdown": "~4.1.0",
         "rc-field-form": "~1.41.0",
         "rc-image": "~7.5.1",
-        "rc-input": "~1.3.6",
-        "rc-input-number": "~8.4.0",
-        "rc-mentions": "~2.9.1",
-        "rc-menu": "~9.12.2",
+        "rc-input": "~1.4.3",
+        "rc-input-number": "~8.6.1",
+        "rc-mentions": "~2.10.1",
+        "rc-menu": "~9.12.4",
         "rc-motion": "^2.9.0",
         "rc-notification": "~5.3.0",
-        "rc-pagination": "~4.0.1",
+        "rc-pagination": "~4.0.4",
         "rc-picker": "~3.14.6",
         "rc-progress": "~3.5.1",
         "rc-rate": "~2.12.0",
         "rc-resize-observer": "^1.4.0",
         "rc-segmented": "~2.2.2",
-        "rc-select": "~14.10.0",
+        "rc-select": "~14.11.0",
         "rc-slider": "~10.5.0",
         "rc-steps": "~6.0.1",
         "rc-switch": "~4.1.0",
-        "rc-table": "~7.36.0",
-        "rc-tabs": "~12.14.1",
-        "rc-textarea": "~1.5.3",
-        "rc-tooltip": "~6.1.2",
+        "rc-table": "~7.37.0",
+        "rc-tabs": "~14.0.0",
+        "rc-textarea": "~1.6.3",
+        "rc-tooltip": "~6.1.3",
         "rc-tree": "~5.8.2",
-        "rc-tree-select": "~5.15.0",
-        "rc-upload": "~4.3.5",
+        "rc-tree-select": "~5.17.0",
+        "rc-upload": "~4.5.2",
         "rc-util": "^5.38.1",
         "scroll-into-view-if-needed": "^3.1.0",
         "throttle-debounce": "^5.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/ant-design"
-      },
       "peerDependencies": {
         "react": ">=16.9.0",
         "react-dom": ">=16.9.0"
@@ -2437,7 +2425,7 @@
     },
     "node_modules/array-tree-filter": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
       "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
     },
     "node_modules/array-union": {
@@ -2558,11 +2546,11 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
-      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "version": "1.6.5",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.5.tgz",
+      "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==",
       "dependencies": {
-        "follow-redirects": "^1.15.0",
+        "follow-redirects": "^1.15.4",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -2573,13 +2561,13 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
-    "node_modules/big-integer": {
-      "version": "1.6.51",
-      "resolved": "https://registry.npmmirror.com/big-integer/-/big-integer-1.6.51.tgz",
-      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
       "dev": true,
-      "engines": {
-        "node": ">=0.6"
+      "dependencies": {
+        "require-from-string": "^2.0.2"
       }
     },
     "node_modules/binary-extensions": {
@@ -2591,18 +2579,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/bplist-parser": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmmirror.com/bplist-parser/-/bplist-parser-0.2.0.tgz",
-      "integrity": "sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==",
-      "dev": true,
-      "dependencies": {
-        "big-integer": "^1.6.44"
-      },
-      "engines": {
-        "node": ">= 5.10.0"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2689,18 +2665,6 @@
       "dev": true,
       "peer": true
     },
-    "node_modules/bundle-name": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/bundle-name/-/bundle-name-3.0.0.tgz",
-      "integrity": "sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==",
-      "dev": true,
-      "dependencies": {
-        "run-applescript": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
@@ -2808,9 +2772,9 @@
       }
     },
     "node_modules/classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
     "node_modules/color-convert": {
       "version": "1.9.3",
@@ -2917,6 +2881,19 @@
         "node": ">=12.22"
       }
     },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
@@ -2931,21 +2908,21 @@
       }
     },
     "node_modules/cssstyle": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/cssstyle/-/cssstyle-3.0.0.tgz",
-      "integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/cssstyle/-/cssstyle-4.0.1.tgz",
+      "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==",
       "dev": true,
       "dependencies": {
         "rrweb-cssom": "^0.6.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/data-urls": {
       "version": "5.0.0",
@@ -3028,34 +3005,6 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
-    "node_modules/default-browser": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/default-browser/-/default-browser-4.0.0.tgz",
-      "integrity": "sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==",
-      "dev": true,
-      "dependencies": {
-        "bundle-name": "^3.0.0",
-        "default-browser-id": "^3.0.0",
-        "execa": "^7.1.1",
-        "titleize": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      }
-    },
-    "node_modules/default-browser-id": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/default-browser-id/-/default-browser-id-3.0.0.tgz",
-      "integrity": "sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==",
-      "dev": true,
-      "dependencies": {
-        "bplist-parser": "^0.2.0",
-        "untildify": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/define-data-property": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
@@ -3070,15 +3019,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/define-lazy-prop": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
-      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/define-properties": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.0.tgz",
@@ -3333,15 +3273,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.55.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.55.0.tgz",
-      "integrity": "sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmmirror.com/eslint/-/eslint-8.56.0.tgz",
+      "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.55.0",
+        "@eslint/js": "8.56.0",
         "@humanwhocodes/config-array": "^0.11.13",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -3382,9 +3322,6 @@
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/eslint-config-prettier": {
@@ -3415,9 +3352,9 @@
       }
     },
     "node_modules/eslint-config-standard-with-typescript": {
-      "version": "40.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-40.0.0.tgz",
-      "integrity": "sha512-GXUJcwIXiTQaS3H4etv8a1lejVVdZYaxZNz3g7vt6GoJosQqMTurbmSC4FVGyHiGT/d1TjFr3+47A3xsHhsG+Q==",
+      "version": "43.0.0",
+      "resolved": "https://registry.npmmirror.com/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-43.0.0.tgz",
+      "integrity": "sha512-AT0qK01M5bmsWiE3UZvaQO5da1y1n6uQckAKqGNe6zPW5IOzgMLXZxw77nnFm+C11nxAZXsCPrbsgJhSrGfX6Q==",
       "dev": true,
       "dependencies": {
         "@typescript-eslint/parser": "^6.4.0",
@@ -3496,9 +3433,9 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.29.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz",
-      "integrity": "sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==",
+      "version": "2.29.1",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
+      "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
       "dev": true,
       "dependencies": {
         "array-includes": "^3.1.7",
@@ -3517,7 +3454,7 @@
         "object.groupby": "^1.0.1",
         "object.values": "^1.1.7",
         "semver": "^6.3.1",
-        "tsconfig-paths": "^3.14.2"
+        "tsconfig-paths": "^3.15.0"
       },
       "engines": {
         "node": ">=4"
@@ -3607,23 +3544,21 @@
       "peer": true
     },
     "node_modules/eslint-plugin-prettier": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.1.tgz",
-      "integrity": "sha512-m3u5RnR56asrwV/lDC4GHorlW75DsFfmUcjfCYylTUs85dBRnB7VM6xG8eCMJdeDRnppzmxZVf1GEPJvl1JmNg==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
+      "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==",
       "dev": true,
       "dependencies": {
         "prettier-linter-helpers": "^1.0.0",
-        "synckit": "^0.8.5"
+        "synckit": "^0.8.6"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
-      "funding": {
-        "url": "https://opencollective.com/prettier"
-      },
       "peerDependencies": {
         "@types/eslint": ">=8.0.0",
         "eslint": ">=8.0.0",
+        "eslint-config-prettier": "*",
         "prettier": ">=3.0.0"
       },
       "peerDependenciesMeta": {
@@ -3836,7 +3771,7 @@
     },
     "node_modules/estree-walker": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
@@ -3849,26 +3784,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/execa": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmmirror.com/execa/-/execa-7.2.0.tgz",
-      "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.1",
-        "human-signals": "^4.3.0",
-        "is-stream": "^3.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^5.1.0",
-        "onetime": "^6.0.0",
-        "signal-exit": "^3.0.7",
-        "strip-final-newline": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
-      }
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4002,9 +3917,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "version": "1.15.5",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "engines": {
         "node": ">=4.0"
       },
@@ -4428,15 +4343,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/human-signals": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-4.3.1.tgz",
-      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=14.18.0"
-      }
-    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -4632,18 +4538,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/is-docker": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-3.0.0.tgz",
-      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
-      "dev": true,
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      }
-    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4675,21 +4569,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-inside-container": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/is-inside-container/-/is-inside-container-1.0.0.tgz",
-      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
-      "dev": true,
-      "dependencies": {
-        "is-docker": "^3.0.0"
-      },
-      "bin": {
-        "is-inside-container": "cli.js"
-      },
-      "engines": {
-        "node": ">=14.16"
-      }
-    },
     "node_modules/is-negative-zero": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
@@ -4831,30 +4710,6 @@
         "call-bind": "^1.0.2"
       }
     },
-    "node_modules/is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "dev": true,
-      "dependencies": {
-        "is-docker": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-wsl/node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "dev": true,
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/isarray/-/isarray-2.0.5.tgz",
@@ -4885,12 +4740,13 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "23.0.1",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-23.0.1.tgz",
-      "integrity": "sha512-2i27vgvlUsGEBO9+/kJQRbtqtm+191b5zAZrU/UezVmnC2dlDAFLgDYJvAEi94T4kjsRKkezEtLQTgsNEsW2lQ==",
+      "version": "23.2.0",
+      "resolved": "https://registry.npmmirror.com/jsdom/-/jsdom-23.2.0.tgz",
+      "integrity": "sha512-L88oL7D/8ufIES+Zjz7v0aes+oBMh2Xnh3ygWvL0OaICOomKEPKuPnIfBJekiXr+BHbbMjrWn/xqrDQuxFTeyA==",
       "dev": true,
       "dependencies": {
-        "cssstyle": "^3.0.0",
+        "@asamuzakjp/dom-selector": "^2.0.1",
+        "cssstyle": "^4.0.1",
         "data-urls": "^5.0.0",
         "decimal.js": "^10.4.3",
         "form-data": "^4.0.0",
@@ -4898,7 +4754,6 @@
         "http-proxy-agent": "^7.0.0",
         "https-proxy-agent": "^7.0.2",
         "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.7",
         "parse5": "^7.1.2",
         "rrweb-cssom": "^0.6.0",
         "saxes": "^6.0.0",
@@ -4909,7 +4764,7 @@
         "whatwg-encoding": "^3.1.1",
         "whatwg-mimetype": "^4.0.0",
         "whatwg-url": "^14.0.0",
-        "ws": "^8.14.2",
+        "ws": "^8.16.0",
         "xml-name-validator": "^5.0.0"
       },
       "engines": {
@@ -5138,7 +4993,7 @@
     },
     "node_modules/magic-string": {
       "version": "0.30.5",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
       "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
       "dev": true,
       "dependencies": {
@@ -5174,6 +5029,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "node_modules/meow": {
       "version": "9.0.0",
       "resolved": "https://registry.npmmirror.com/meow/-/meow-9.0.0.tgz",
@@ -5310,9 +5171,9 @@
       }
     },
     "node_modules/moment": {
-      "version": "2.29.4",
-      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
-      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "version": "2.30.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
       "engines": {
         "node": "*"
       }
@@ -5455,12 +5316,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/nwsapi": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmmirror.com/nwsapi/-/nwsapi-2.2.7.tgz",
-      "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
-      "dev": true
-    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -5552,21 +5407,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/open": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmmirror.com/open/-/open-9.1.0.tgz",
-      "integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
-      "dev": true,
-      "dependencies": {
-        "default-browser": "^4.0.0",
-        "define-lazy-prop": "^3.0.0",
-        "is-inside-container": "^1.0.0",
-        "is-wsl": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      }
-    },
     "node_modules/optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmmirror.com/optionator/-/optionator-0.9.3.tgz",
@@ -5814,18 +5654,15 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz",
-      "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.2.2.tgz",
+      "integrity": "sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
       "engines": {
         "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/prettier-linter-helpers": {
@@ -5891,14 +5728,14 @@
       }
     },
     "node_modules/rc-cascader": {
-      "version": "3.20.0",
-      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.20.0.tgz",
-      "integrity": "sha512-lkT9EEwOcYdjZ/jvhLoXGzprK1sijT3/Tp4BLxQQcHDZkkOzzwYQC9HgmKoJz0K7CukMfgvO9KqHeBdgE+pELw==",
+      "version": "3.21.0",
+      "resolved": "https://registry.npmmirror.com/rc-cascader/-/rc-cascader-3.21.0.tgz",
+      "integrity": "sha512-7aADjbfqiR4HrTHG9S019p2jeKM/AxISPA5+sBJR7Mlhm/i+lR7VjBju3KQulJNJLKNEnQYg4TFhcPf2SLua9g==",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "array-tree-filter": "^2.1.0",
         "classnames": "^2.3.1",
-        "rc-select": "~14.10.0",
+        "rc-select": "~14.11.0-0",
         "rc-tree": "~5.8.1",
         "rc-util": "^5.37.0"
       },
@@ -5953,9 +5790,9 @@
       }
     },
     "node_modules/rc-drawer": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-6.5.2.tgz",
-      "integrity": "sha512-QckxAnQNdhh4vtmKN0ZwDf3iakO83W9eZcSKWYYTDv4qcD2fHhRAZJJ/OE6v2ZlQ2kSqCJX5gYssF4HJFvsEPQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/rc-drawer/-/rc-drawer-7.0.0.tgz",
+      "integrity": "sha512-ePcS4KtQnn57bCbVXazHN2iC8nTPCXlWEIA/Pft87Pd9U7ZeDkdRzG47jWG2/TAFXFlFltRAMcslqmUM8NPCGA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/portal": "^1.1.1",
@@ -5970,7 +5807,7 @@
     },
     "node_modules/rc-dropdown": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/rc-dropdown/-/rc-dropdown-4.1.0.tgz",
       "integrity": "sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
@@ -6018,9 +5855,9 @@
       }
     },
     "node_modules/rc-input": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.3.6.tgz",
-      "integrity": "sha512-/HjTaKi8/Ts4zNbYaB5oWCquxFyFQO4Co1MnMgoCeGJlpe7k8Eir2HN0a0F9IHDmmo+GYiGgPpz7w/d/krzsJA==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmmirror.com/rc-input/-/rc-input-1.4.3.tgz",
+      "integrity": "sha512-aHyQUAIRmTlOnvk5EcNqEpJ+XMtfMpYRAJayIlJfsvvH9cAKUWboh4egm23vgMA7E+c/qm4BZcnrDcA960GC1w==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -6032,14 +5869,14 @@
       }
     },
     "node_modules/rc-input-number": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-8.4.0.tgz",
-      "integrity": "sha512-B6rziPOLRmeP7kcS5qbdC5hXvvDHYKV4vUxmahevYx2E6crS2bRi0xLDjhJ0E1HtOWo8rTmaE2EBJAkTCZOLdA==",
+      "version": "8.6.1",
+      "resolved": "https://registry.npmmirror.com/rc-input-number/-/rc-input-number-8.6.1.tgz",
+      "integrity": "sha512-gaAMUKtUKLktJ3Yx93tjgYY1M0HunnoqzPEqkb9//Ydup4DcG0TFL9yHBA3pgVdNIt5f0UWyHCgFBj//JxeD6A==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/mini-decimal": "^1.0.1",
         "classnames": "^2.2.5",
-        "rc-input": "~1.3.5",
+        "rc-input": "~1.4.0",
         "rc-util": "^5.28.0"
       },
       "peerDependencies": {
@@ -6048,16 +5885,16 @@
       }
     },
     "node_modules/rc-mentions": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.9.1.tgz",
-      "integrity": "sha512-cZuElWr/5Ws0PXx1uxobxfYh4mqUw2FitfabR62YnWgm+WAfDyXZXqZg5DxXW+M1cgVvntrQgDDd9LrihrXzew==",
+      "version": "2.10.1",
+      "resolved": "https://registry.npmmirror.com/rc-mentions/-/rc-mentions-2.10.1.tgz",
+      "integrity": "sha512-72qsEcr/7su+a07ndJ1j8rI9n0Ka/ngWOLYnWMMv0p2mi/5zPwPrEDTt6Uqpe8FWjWhueDJx/vzunL6IdKDYMg==",
       "dependencies": {
         "@babel/runtime": "^7.22.5",
         "@rc-component/trigger": "^1.5.0",
         "classnames": "^2.2.6",
-        "rc-input": "~1.3.5",
+        "rc-input": "~1.4.0",
         "rc-menu": "~9.12.0",
-        "rc-textarea": "~1.5.0",
+        "rc-textarea": "~1.6.1",
         "rc-util": "^5.34.1"
       },
       "peerDependencies": {
@@ -6066,9 +5903,9 @@
       }
     },
     "node_modules/rc-menu": {
-      "version": "9.12.2",
-      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.12.2.tgz",
-      "integrity": "sha512-NzloFH2pRUYmQ3S/YbJAvRkgCZaLvq0sRa5rgJtuIHLfPPprNHNyepeSlT64+dbVqI4qRWL44VN0lUCldCbbfg==",
+      "version": "9.12.4",
+      "resolved": "https://registry.npmmirror.com/rc-menu/-/rc-menu-9.12.4.tgz",
+      "integrity": "sha512-t2NcvPLV1mFJzw4F21ojOoRVofK2rWhpKPx69q2raUsiHPDP6DDevsBILEYdsIegqBeSXoWs2bf6CueBKg3BFg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^1.17.0",
@@ -6116,7 +5953,7 @@
     },
     "node_modules/rc-overflow": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.3.2.tgz",
+      "resolved": "https://registry.npmmirror.com/rc-overflow/-/rc-overflow-1.3.2.tgz",
       "integrity": "sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
@@ -6130,9 +5967,9 @@
       }
     },
     "node_modules/rc-pagination": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-4.0.1.tgz",
-      "integrity": "sha512-udrYHGTVXBm5HxE+RYeu9P9o+M7aZSFMwGd2OvYupvSI/wt1jzn2arHb30/nwpJ7tV876BkvJQBvctMH4fDmLw==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmmirror.com/rc-pagination/-/rc-pagination-4.0.4.tgz",
+      "integrity": "sha512-GGrLT4NgG6wgJpT/hHIpL9nELv27A1XbSZzECIuQBQTVSf4xGKxWr6I/jhpRPauYEWEbWVw22ObG6tJQqwJqWQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.3.2",
@@ -6241,9 +6078,9 @@
       }
     },
     "node_modules/rc-select": {
-      "version": "14.10.0",
-      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.10.0.tgz",
-      "integrity": "sha512-TsIJTYafTTapCA32LLNpx/AD6ntepR1TG8jEVx35NiAAWCPymhUfuca8kRcUNd3WIGVMDcMKn9kkphoxEz+6Ag==",
+      "version": "14.11.0",
+      "resolved": "https://registry.npmmirror.com/rc-select/-/rc-select-14.11.0.tgz",
+      "integrity": "sha512-8J8G/7duaGjFiTXCBLWfh5P+KDWyA3KTlZDfV3xj/asMPqB2cmxfM+lH50wRiPIRsCQ6EbkCFBccPuaje3DHIg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^1.5.0",
@@ -6310,9 +6147,9 @@
       }
     },
     "node_modules/rc-table": {
-      "version": "7.36.0",
-      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.36.0.tgz",
-      "integrity": "sha512-3xVcdCC5OLeOOhaCg+5Lps2oPreM/GWXmUXWTSX4p6vF7F76ABM4dfPpMJ9Dnf5yGRyh+8pe7FRyhRVnWw2H/w==",
+      "version": "7.37.0",
+      "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.37.0.tgz",
+      "integrity": "sha512-hEB17ktLRVfVmdo+U8MjGr+PuIgdQ8Cxj/N5lwMvP/Az7TOrQxwTMLVEDoj207tyPYLTWifHIF9EJREWwyk67g==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/context": "^1.4.0",
@@ -6330,9 +6167,9 @@
       }
     },
     "node_modules/rc-tabs": {
-      "version": "12.14.1",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.14.1.tgz",
-      "integrity": "sha512-1xlE7JQNYxD5RwBsM7jf2xSdUrkmTSDFLFEm2gqAgnsRlOGydEzXXNAVTOT6QcgM1G/gCm+AgG+FYPUGb4Hs4g==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmmirror.com/rc-tabs/-/rc-tabs-14.0.0.tgz",
+      "integrity": "sha512-lp1YWkaPnjlyhOZCPrAWxK6/P6nMGX/BAZcAC3nuVwKz0Byfp+vNnQKK8BRCP2g/fzu+SeB5dm9aUigRu3tRkQ==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
@@ -6351,13 +6188,13 @@
       }
     },
     "node_modules/rc-textarea": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.5.3.tgz",
-      "integrity": "sha512-oH682ghHx++stFNYrosPRBfwsypywrTXpaD0/5Z8MPkUOnyOQUaY9ueL9tMu6BP1LfsuYQ1VLpg5OtshViLNgA==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmmirror.com/rc-textarea/-/rc-textarea-1.6.3.tgz",
+      "integrity": "sha512-8k7+8Y2GJ/cQLiClFMg8kUXOOdvcFQrnGeSchOvI2ZMIVvX5a3zQpLxoODL0HTrvU63fPkRmMuqaEcOF9dQemA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.1",
-        "rc-input": "~1.3.5",
+        "rc-input": "~1.4.0",
         "rc-resize-observer": "^1.0.0",
         "rc-util": "^5.27.0"
       },
@@ -6367,9 +6204,9 @@
       }
     },
     "node_modules/rc-tooltip": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-6.1.2.tgz",
-      "integrity": "sha512-89zwvybvCxGJu3+gGF8w5AXd4HHk6hIN7K0vZbkzjilVaEAIWPqc1fcyeUeP71n3VCcw7pTL9LyFupFbrx8gHw==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmmirror.com/rc-tooltip/-/rc-tooltip-6.1.3.tgz",
+      "integrity": "sha512-HMSbSs5oieZ7XddtINUddBLSVgsnlaSb3bZrzzGWjXa7/B7nNedmsuz72s7EWFEro9mNa7RyF3gOXKYqvJiTcQ==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "@rc-component/trigger": "^1.18.0",
@@ -6382,7 +6219,7 @@
     },
     "node_modules/rc-tree": {
       "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.8.2.tgz",
+      "resolved": "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.8.2.tgz",
       "integrity": "sha512-xH/fcgLHWTLmrSuNphU8XAqV7CdaOQgm4KywlLGNoTMhDAcNR3GVNP6cZzb0GrKmIZ9yae+QLot/cAgUdPRMzg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
@@ -6400,13 +6237,13 @@
       }
     },
     "node_modules/rc-tree-select": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.15.0.tgz",
-      "integrity": "sha512-YJHfdO6azFnR0/JuNBZLDptGE4/RGfVeHAafUIYcm2T3RBkL1O8aVqiHvwIyLzdK59ry0NLrByd+3TkfpRM+9Q==",
+      "version": "5.17.0",
+      "resolved": "https://registry.npmmirror.com/rc-tree-select/-/rc-tree-select-5.17.0.tgz",
+      "integrity": "sha512-7sRGafswBhf7n6IuHyCEFCildwQIgyKiV8zfYyUoWfZEFdhuk7lCH+DN0aHt+oJrdiY9+6Io/LDXloGe01O8XQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
-        "rc-select": "~14.10.0",
+        "rc-select": "~14.11.0-0",
         "rc-tree": "~5.8.1",
         "rc-util": "^5.16.1"
       },
@@ -6416,9 +6253,9 @@
       }
     },
     "node_modules/rc-upload": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.3.5.tgz",
-      "integrity": "sha512-EHlKJbhkgFSQHliTj9v/2K5aEuFwfUQgZARzD7AmAPOneZEPiCNF3n6PEWIuqz9h7oq6FuXgdR67sC5BWFxJbA==",
+      "version": "4.5.2",
+      "resolved": "https://registry.npmmirror.com/rc-upload/-/rc-upload-4.5.2.tgz",
+      "integrity": "sha512-QO3ne77DwnAPKFn0bA5qJM81QBjQi0e0NHdkvpFyY73Bea2NfITiotqJqVjHgeYPOJu5lLVR32TNGP084aSoXA==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "classnames": "^2.2.5",
@@ -6444,7 +6281,7 @@
     },
     "node_modules/rc-virtual-list": {
       "version": "3.11.3",
-      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.3.tgz",
+      "resolved": "https://registry.npmmirror.com/rc-virtual-list/-/rc-virtual-list-3.11.3.tgz",
       "integrity": "sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==",
       "dependencies": {
         "@babel/runtime": "^7.20.0",
@@ -6498,11 +6335,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.20.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz",
-      "integrity": "sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==",
+      "version": "6.21.2",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.21.2.tgz",
+      "integrity": "sha512-jJcgiwDsnaHIeC+IN7atO0XiSRCrOsQAHHbChtJxmgqG2IaYQXSnhqGb5vk2CU/wBQA12Zt+TkbuJjIn65gzbA==",
       "dependencies": {
-        "@remix-run/router": "1.13.1"
+        "@remix-run/router": "1.14.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6512,12 +6349,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.20.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.1.tgz",
-      "integrity": "sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==",
+      "version": "6.21.2",
+      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.21.2.tgz",
+      "integrity": "sha512-tE13UukgUOh2/sqYr6jPzZTzmzc70aGRP4pAjG2if0IP3aUT+sBtAKUJh0qMh0zylJHGLmzS+XWVaON4UklHeg==",
       "dependencies": {
-        "@remix-run/router": "1.13.1",
-        "react-router": "6.20.1"
+        "@remix-run/router": "1.14.2",
+        "react-router": "6.21.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6719,7 +6556,6 @@
       "resolved": "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6817,98 +6653,6 @@
       "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
       "dev": true
     },
-    "node_modules/run-applescript": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmmirror.com/run-applescript/-/run-applescript-5.0.0.tgz",
-      "integrity": "sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==",
-      "dev": true,
-      "dependencies": {
-        "execa": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/run-applescript/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/run-applescript/node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
-    "node_modules/run-applescript/node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/run-applescript/node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/run-applescript/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/run-applescript/node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmmirror.com/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/run-applescript/node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -6951,9 +6695,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.69.5",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
-      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "version": "1.69.7",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.7.tgz",
+      "integrity": "sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -6996,9 +6740,9 @@
       }
     },
     "node_modules/scule": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/scule/-/scule-1.1.1.tgz",
-      "integrity": "sha512-sHtm/SsIK9BUBI3EFT/Gnp9VoKfY6QLvlkvAE6YK7454IF8FSgJEAnJpVdSC7K5/pjI5NfxhzBLW2JAfYA/shQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.2.0.tgz",
+      "integrity": "sha512-CRCmi5zHQnSoeCik9565PONMg0kfkvYmcSqrbOJY4txFfy1wvVULV4FDaiXhUblUgahdqz3F2NwHZ8i4eBTwUw==",
       "dev": true
     },
     "node_modules/semver": {
@@ -7300,14 +7044,11 @@
     },
     "node_modules/strip-literal": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.3.0.tgz",
+      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-1.3.0.tgz",
       "integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.10.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/style-search": {
@@ -7421,9 +7162,9 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
-      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
@@ -7503,13 +7244,13 @@
       "dev": true
     },
     "node_modules/synckit": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmmirror.com/synckit/-/synckit-0.8.5.tgz",
-      "integrity": "sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==",
+      "version": "0.8.8",
+      "resolved": "https://registry.npmmirror.com/synckit/-/synckit-0.8.8.tgz",
+      "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
       "dev": true,
       "dependencies": {
-        "@pkgr/utils": "^2.3.1",
-        "tslib": "^2.5.0"
+        "@pkgr/core": "^0.1.0",
+        "tslib": "^2.6.2"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -7566,15 +7307,6 @@
         "node": ">=12.22"
       }
     },
-    "node_modules/titleize": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/titleize/-/titleize-3.0.0.tgz",
-      "integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -7651,9 +7383,9 @@
       }
     },
     "node_modules/tsconfig-paths": {
-      "version": "3.14.2",
-      "resolved": "https://registry.npmmirror.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
-      "integrity": "sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==",
+      "version": "3.15.0",
+      "resolved": "https://registry.npmmirror.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
       "dev": true,
       "dependencies": {
         "@types/json5": "^0.0.29",
@@ -7795,34 +7527,42 @@
       "dev": true
     },
     "node_modules/unimport": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.6.0.tgz",
-      "integrity": "sha512-yXW3Z30yk1vX8fxO8uHlq9wY9K+L56LHp4Hlbv8i7tW+NENSOv8AaFJUPtOQchxlT7/JBAzCtkrBtcVjKIr1VQ==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/unimport/-/unimport-3.7.1.tgz",
+      "integrity": "sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==",
       "dev": true,
       "dependencies": {
-        "@rollup/pluginutils": "^5.0.5",
+        "@rollup/pluginutils": "^5.1.0",
+        "acorn": "^8.11.2",
         "escape-string-regexp": "^5.0.0",
+        "estree-walker": "^3.0.3",
         "fast-glob": "^3.3.2",
         "local-pkg": "^0.5.0",
         "magic-string": "^0.30.5",
         "mlly": "^1.4.2",
         "pathe": "^1.1.1",
         "pkg-types": "^1.0.3",
-        "scule": "^1.1.0",
+        "scule": "^1.1.1",
         "strip-literal": "^1.3.0",
         "unplugin": "^1.5.1"
       }
     },
     "node_modules/unimport/node_modules/escape-string-regexp": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
       "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
       "dev": true,
       "engines": {
         "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unimport/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
       }
     },
     "node_modules/universalify": {
@@ -7835,38 +7575,35 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.5.1.tgz",
-      "integrity": "sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.6.0.tgz",
+      "integrity": "sha512-BfJEpWBu3aE/AyHx8VaNE/WgouoQxgH9baAiH82JjX8cqVyi3uJQstqwD5J+SZxIK326SZIhsSZlALXVBCknTQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.11.2",
         "chokidar": "^3.5.3",
         "webpack-sources": "^3.2.3",
-        "webpack-virtual-modules": "^0.6.0"
+        "webpack-virtual-modules": "^0.6.1"
       }
     },
     "node_modules/unplugin-auto-import": {
-      "version": "0.17.2",
-      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.17.2.tgz",
-      "integrity": "sha512-Eu/xWI6SH4jTWXvzOfXQWAxRtiz/gMObm7wXtgMj7wBjHQKLgHTmHd4R4oha87KYGah1aKMqiqDeAxiPmfSoTg==",
+      "version": "0.17.3",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.17.3.tgz",
+      "integrity": "sha512-0cn0wr8X579TtdZKUAps0dDVrYzttx38ImdxZjmCeNlMDJX8UuSjO83vFqgS4ClNDIGWAute+xl9j5vRSX+vsw==",
       "dev": true,
       "dependencies": {
-        "@antfu/utils": "^0.7.6",
+        "@antfu/utils": "^0.7.7",
         "@rollup/pluginutils": "^5.1.0",
         "fast-glob": "^3.3.2",
         "local-pkg": "^0.5.0",
         "magic-string": "^0.30.5",
         "minimatch": "^9.0.3",
-        "unimport": "^3.6.0",
-        "unplugin": "^1.5.1"
+        "unimport": "^3.7.0",
+        "unplugin": "^1.6.0"
       },
       "engines": {
         "node": ">=14"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
       "peerDependencies": {
         "@nuxt/kit": "^3.2.2",
         "@vueuse/core": "*"
@@ -7902,9 +7639,9 @@
       }
     },
     "node_modules/unplugin-icons": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.18.1.tgz",
-      "integrity": "sha512-WzKu/eoq74YC7vyEAGsFebkRzsZrRkR4FUzLU6gbpfa7WRaVVpQS2n7LSxE1iRUN0scKL5b9bq+i0wucR+ttFQ==",
+      "version": "0.18.2",
+      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.18.2.tgz",
+      "integrity": "sha512-OgZoIJHGubeJmc3KePMOy62ovtxPEJfNMlr5tU+1ZqHGpSXubg3fnqq28VPvLL0D5vKj2PRCJF9tVGbQ7vBXJQ==",
       "dev": true,
       "dependencies": {
         "@antfu/install-pkg": "^0.3.0",
@@ -7915,9 +7652,6 @@
         "local-pkg": "^0.5.0",
         "unplugin": "^1.5.1"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
       "peerDependencies": {
         "@svgr/core": ">=7.0.0",
         "@svgx/core": "^1.0.1",
@@ -7943,15 +7677,6 @@
         }
       }
     },
-    "node_modules/untildify": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/untildify/-/untildify-4.0.0.tgz",
-      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.11",
       "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
@@ -8018,9 +7743,9 @@
       "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw=="
     },
     "node_modules/vite": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.6.tgz",
-      "integrity": "sha512-MD3joyAEBtV7QZPl2JVVUai6zHms3YOmLR+BpMzLlX2Yzjfcc4gTgNi09d/Rua3F4EtC8zdwPU8eQYyib4vVMQ==",
+      "version": "5.0.11",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.0.11.tgz",
+      "integrity": "sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.19.3",
@@ -8033,9 +7758,6 @@
       "engines": {
         "node": "^18.0.0 || >=20.0.0"
       },
-      "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
       "optionalDependencies": {
         "fsevents": "~2.3.3"
       },
@@ -8207,9 +7929,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.14.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
diff --git a/package.json b/package.json
index 6d72dbf..c5cbd78 100644
--- a/package.json
+++ b/package.json
@@ -15,11 +15,11 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@marsidev/react-turnstile": "^0.4.0",
+    "@marsidev/react-turnstile": "^0.4.1",
     "@monaco-editor/react": "^4.6.0",
     "@typescript/ata": "^0.9.4",
-    "antd": "^5.12.1",
-    "axios": "^1.6.2",
+    "antd": "^5.13.1",
+    "axios": "^1.6.5",
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "esbuild-wasm": "^0.19.11",
@@ -29,13 +29,13 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
-    "moment": "^2.29.4",
+    "moment": "^2.30.1",
     "monaco-editor": "^0.45.0",
     "monaco-jsx-syntax-highlight": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.20.1",
-    "react-router-dom": "^6.20.1",
+    "react-router": "^6.21.2",
+    "react-router-dom": "^6.21.2",
     "size-sensor": "^1.0.2",
     "vanilla-tilt": "^1.8.1"
   },
@@ -44,27 +44,27 @@
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/jsdom": "^21.1.6",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.10.4",
-    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@types/node": "^20.11.1",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard-with-typescript": "^40.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-config-standard-with-typescript": "^43.0.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "jsdom": "^23.0.1",
-    "prettier": "^3.1.0",
-    "sass": "^1.69.5",
+    "jsdom": "^23.2.0",
+    "prettier": "^3.2.2",
+    "sass": "^1.69.7",
     "stylelint-config-prettier": "^9.0.5",
     "typescript": "^5.3.3",
-    "unplugin-auto-import": "^0.17.2",
-    "unplugin-icons": "^0.18.1",
-    "vite": "^5.0.6"
+    "unplugin-auto-import": "^0.17.3",
+    "unplugin-icons": "^0.18.2",
+    "vite": "^5.0.11"
   }
 }

From ec3f552ec59d0632d11fc198e7e90b2156cd21d1 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 15 Jan 2024 18:30:27 +0800
Subject: [PATCH 180/307] Optimize Playground. Add create tool page.

---
 src/assets/css/pages/tools/create.scss        |  48 +++
 src/assets/svg/help.svg                       |   1 +
 src/assets/svg/newProject.svg                 |   1 +
 src/assets/svg/store.svg                      |   1 +
 .../Playground/Output/Preview/preview.scss    |   2 +
 src/components/Playground/files.ts            |  24 +-
 src/components/Playground/shared.ts           |  11 +
 src/components/Playground/templates.ts        |  59 ++++
 .../templates/{init => base}/App.tsx          |   0
 .../templates/{init => base}/import-map.json  |   0
 .../templates/{init => base}/main.tsx         |   0
 .../templates/{init => base}/tsconfig.json    |   0
 src/pages/OnlineEditor.tsx                    |  19 --
 src/pages/Tools/Create.tsx                    | 191 +++++++++++
 src/pages/Tools/Translation.tsx               |   5 -
 src/pages/ToolsFramework.tsx                  |   4 +-
 src/router/index.tsx                          |   7 -
 src/router/tools.tsx                          | 304 +-----------------
 18 files changed, 332 insertions(+), 345 deletions(-)
 create mode 100644 src/assets/css/pages/tools/create.scss
 create mode 100644 src/assets/svg/help.svg
 create mode 100644 src/assets/svg/newProject.svg
 create mode 100644 src/assets/svg/store.svg
 create mode 100644 src/components/Playground/templates.ts
 rename src/components/Playground/templates/{init => base}/App.tsx (100%)
 rename src/components/Playground/templates/{init => base}/import-map.json (100%)
 rename src/components/Playground/templates/{init => base}/main.tsx (100%)
 rename src/components/Playground/templates/{init => base}/tsconfig.json (100%)
 delete mode 100644 src/pages/OnlineEditor.tsx
 create mode 100644 src/pages/Tools/Create.tsx
 delete mode 100644 src/pages/Tools/Translation.tsx

diff --git a/src/assets/css/pages/tools/create.scss b/src/assets/css/pages/tools/create.scss
new file mode 100644
index 0000000..dea6b9a
--- /dev/null
+++ b/src/assets/css/pages/tools/create.scss
@@ -0,0 +1,48 @@
+@use "@/assets/css/mixins" as mixins;
+@use "@/assets/css/constants" as constants;
+
+[data-component=tools-create] {
+  .root-content {
+    padding: 20px;
+    gap: 20px;
+    height: 100%;
+    width: 100%;
+
+    > * {
+      gap: 10px;
+      width: 0;
+
+      .title {
+        flex: 0 0 auto;
+        height: 40px;
+
+        > * {
+          height: 100%;
+          width: 100%;
+          justify-content: center;
+          align-items: center;
+          font-size: 1.6em;
+          color: constants.$production-color;
+          font-weight: bolder;
+        }
+      }
+
+      .config {
+        .config-content {
+          padding: 20px;
+
+          .help {
+            margin-left: 6px;
+            color: constants.$font-main-color;
+            font-size: 0.8em;
+          }
+
+          .create-bt {
+            width: 100%;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/svg/help.svg b/src/assets/svg/help.svg
new file mode 100644
index 0000000..189c1ca
--- /dev/null
+++ b/src/assets/svg/help.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1024 512c0 282.624-229.376 512-512 512S0 794.624 0 512 229.376 0 512 0s512 229.376 512 512z m-510.464 209.408c-23.552 0-43.008 19.456-43.008 43.008v9.728c0 23.552 19.456 42.496 43.008 42.496 23.552 0 43.008-18.944 43.008-42.496v-9.728c0-23.552-19.456-43.008-43.008-43.008z m10.24-481.792c-56.32-1.024-99.84 13.312-129.536 42.496-32.256 31.744-48.64 81.408-48.64 147.456v0.512c1.024 10.752 10.752 30.72 37.376 30.72 26.624 0 35.328-20.48 35.84-31.232-1.024-40.96 8.192-71.168 27.136-89.6 17.92-17.408 45.568-25.6 81.92-23.552 49.664 5.632 74.752 32.768 76.8 82.944-3.584 22.528-23.04 52.224-57.344 88.576C500.224 536.576 476.16 580.608 476.16 619.52v39.424c1.536 9.728 10.752 27.648 35.328 27.648 24.064 0 33.792-17.92 35.328-27.648v-27.648c0-29.696 22.016-66.56 66.048-108.544 48.128-44.032 72.192-85.504 72.192-123.392-4.608-101.888-58.368-155.648-161.28-159.744z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/newProject.svg b/src/assets/svg/newProject.svg
new file mode 100644
index 0000000..23d79f4
--- /dev/null
+++ b/src/assets/svg/newProject.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M899.5 288.4L528 74c-9.9-5.7-22.1-5.7-32 0L140.3 278.9c-10 5.6-16.1 16.2-16.2 27.6l-0.1 410.6c0 11.4 6.1 22 16 27.7L512 959v0.1c20-11.4 32-32.5 32-55.3l-0.1-372.6 323.7-187.3c19.7-11.5 31.9-32.6 31.9-55.5zM188 698.7V362.4l292 168.7v335.7L188 698.7z m323.8-223L220.4 306.9 512 138.7 803.6 307 511.8 475.7z" /><path d="M928 672H800V544c0-17.7-14.3-32-32-32s-32 14.3-32 32v128H608c-17.7 0-32 14.3-32 32s14.3 32 32 32h128v128c0 17.7 14.3 32 32 32s32-14.3 32-32V736h128c17.7 0 32-14.3 32-32s-14.3-32-32-32z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/store.svg b/src/assets/svg/store.svg
new file mode 100644
index 0000000..8362142
--- /dev/null
+++ b/src/assets/svg/store.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M42.666667 149.482667A106.752 106.752 0 0 1 149.482667 42.666667h725.034666A106.752 106.752 0 0 1 981.333333 149.482667v725.034666A106.752 106.752 0 0 1 874.517333 981.333333H149.482667A106.752 106.752 0 0 1 42.666667 874.517333V149.482667z m85.333333 0v725.034666C128 886.421333 137.578667 896 149.482667 896h725.034666c11.904 0 21.482667-9.578667 21.482667-21.482667V149.482667C896 137.578667 886.421333 128 874.517333 128H149.482667C137.578667 128 128 137.578667 128 149.482667zM661.333333 213.333333a42.666667 42.666667 0 1 1 85.333334 0v106.666667c0 129.536-105.088 234.666667-234.666667 234.666667-129.536 0-234.666667-105.216-234.666667-234.666667v-106.666667a42.666667 42.666667 0 1 1 85.333334 0v106.666667c0 82.346667 66.944 149.333333 149.333333 149.333333 82.453333 0 149.333333-66.922667 149.333333-149.333333v-106.666667z" /></svg>
\ No newline at end of file
diff --git a/src/components/Playground/Output/Preview/preview.scss b/src/components/Playground/Output/Preview/preview.scss
index 37f7040..9fd2079 100644
--- a/src/components/Playground/Output/Preview/preview.scss
+++ b/src/components/Playground/Output/Preview/preview.scss
@@ -1,6 +1,8 @@
 [data-component=playground-preview] {
   display: flex;
   position: relative;
+  width: 100%;
+  height: 100%;
 
   iframe {
     border: none;
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index da960ca..dfa88ec 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -1,11 +1,7 @@
 import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
 import { languages } from 'monaco-editor'
 import DiagnosticsOptions = languages.json.DiagnosticsOptions
-import { IFile, IFiles, IImportMap, ILanguage, ITsconfig } from '@/components/Playground/shared'
-import initTsconfigFile from '@/components/Playground/templates/init/tsconfig.json'
-import initImportMapFile from '@/components/Playground/templates/init/import-map.json'
-import main from '@/components/Playground/templates/init/main.tsx?raw'
-import App from '@/components/Playground/templates/init/App.tsx?raw'
+import { IFile, IFiles, ILanguage } from '@/components/Playground/shared'
 import tsconfigSchema from '@/components/Playground/tsconfig-schema.json'
 import importMapSchema from '@/components/Playground/import-map-schema.json'
 
@@ -123,21 +119,3 @@ export const tsconfigJsonDiagnosticsOptions: DiagnosticsOptions = {
         }
     ]
 }
-
-export const initFiles: IFiles = getFilesFromUrl() || {
-    [ENTRY_FILE_NAME]: {
-        name: ENTRY_FILE_NAME,
-        language: fileNameToLanguage(ENTRY_FILE_NAME),
-        value: main,
-        hidden: true
-    },
-    [MAIN_FILE_NAME]: {
-        name: MAIN_FILE_NAME,
-        language: fileNameToLanguage(MAIN_FILE_NAME),
-        value: App
-    }
-}
-
-export const initImportMap: IImportMap = initImportMapFile
-
-export const initTsconfig: ITsconfig = initTsconfigFile
diff --git a/src/components/Playground/shared.ts b/src/components/Playground/shared.ts
index e144fdb..d220e18 100644
--- a/src/components/Playground/shared.ts
+++ b/src/components/Playground/shared.ts
@@ -14,6 +14,17 @@ export interface IFiles {
     [key: string]: IFile
 }
 
+export interface ITemplate {
+    name: string
+    tsconfig: ITsconfig
+    importMap: IImportMap
+    files: IFiles
+}
+
+export interface ITemplates {
+    [key: string]: ITemplate
+}
+
 export interface IImportMap {
     imports: Record<string, string>
 }
diff --git a/src/components/Playground/templates.ts b/src/components/Playground/templates.ts
new file mode 100644
index 0000000..3b1ac93
--- /dev/null
+++ b/src/components/Playground/templates.ts
@@ -0,0 +1,59 @@
+import { ITemplates } from '@/components/Playground/shared'
+import { ENTRY_FILE_NAME, MAIN_FILE_NAME } from '@/components/Playground/files'
+
+import baseTsconfig from '@/components/Playground/templates/base/tsconfig.json'
+import baseImportMap from '@/components/Playground/templates/base/import-map.json'
+import baseMain from '@/components/Playground/templates/base/main.tsx?raw'
+import baseApp from '@/components/Playground/templates/base/App.tsx?raw'
+
+import demoTsconfig from '@/components/Playground/templates/demo/tsconfig.json'
+import demoImportMap from '@/components/Playground/templates/demo/import-map.json'
+import demoMain from '@/components/Playground/templates/demo/main.tsx?raw'
+import demoApp from '@/components/Playground/templates/demo/App.tsx?raw'
+import demoAppCSS from '@/components/Playground/templates/demo/App.css?raw'
+
+const templates: ITemplates = {
+    base: {
+        name: '基础',
+        tsconfig: baseTsconfig,
+        importMap: baseImportMap,
+        files: {
+            [ENTRY_FILE_NAME]: {
+                name: ENTRY_FILE_NAME,
+                language: 'typescript',
+                value: baseMain,
+                hidden: true
+            },
+            [MAIN_FILE_NAME]: {
+                name: MAIN_FILE_NAME,
+                language: 'typescript',
+                value: baseApp
+            }
+        }
+    },
+    demo: {
+        name: 'Demo',
+        tsconfig: demoTsconfig,
+        importMap: demoImportMap,
+        files: {
+            [ENTRY_FILE_NAME]: {
+                name: ENTRY_FILE_NAME,
+                language: 'typescript',
+                value: demoMain,
+                hidden: true
+            },
+            [MAIN_FILE_NAME]: {
+                name: MAIN_FILE_NAME,
+                language: 'typescript',
+                value: demoApp
+            },
+            ['App.css']: {
+                name: 'App.css',
+                language: 'css',
+                value: demoAppCSS
+            }
+        }
+    }
+}
+
+export default templates
diff --git a/src/components/Playground/templates/init/App.tsx b/src/components/Playground/templates/base/App.tsx
similarity index 100%
rename from src/components/Playground/templates/init/App.tsx
rename to src/components/Playground/templates/base/App.tsx
diff --git a/src/components/Playground/templates/init/import-map.json b/src/components/Playground/templates/base/import-map.json
similarity index 100%
rename from src/components/Playground/templates/init/import-map.json
rename to src/components/Playground/templates/base/import-map.json
diff --git a/src/components/Playground/templates/init/main.tsx b/src/components/Playground/templates/base/main.tsx
similarity index 100%
rename from src/components/Playground/templates/init/main.tsx
rename to src/components/Playground/templates/base/main.tsx
diff --git a/src/components/Playground/templates/init/tsconfig.json b/src/components/Playground/templates/base/tsconfig.json
similarity index 100%
rename from src/components/Playground/templates/init/tsconfig.json
rename to src/components/Playground/templates/base/tsconfig.json
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
deleted file mode 100644
index f3ba8be..0000000
--- a/src/pages/OnlineEditor.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import FitFullscreen from '@/components/common/FitFullscreen'
-import Playground from '@/components/Playground'
-import { initFiles, initImportMap, initTsconfig } from '@/components/Playground/files'
-
-const OnlineEditor = () => {
-    return (
-        <>
-            <FitFullscreen>
-                <Playground
-                    initFiles={initFiles}
-                    initImportMapRaw={JSON.stringify(initImportMap, null, 2)}
-                    initTsconfigRaw={JSON.stringify(initTsconfig, null, 2)}
-                />
-            </FitFullscreen>
-        </>
-    )
-}
-
-export default OnlineEditor
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
new file mode 100644
index 0000000..fb0e8f5
--- /dev/null
+++ b/src/pages/Tools/Create.tsx
@@ -0,0 +1,191 @@
+import '@/assets/css/pages/tools/create.scss'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import Card from '@/components/common/Card.tsx'
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import Preview from '@/components/Playground/Output/Preview'
+import templates from '@/components/Playground/templates.ts'
+import { useEffect } from 'react'
+import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import Icon from '@ant-design/icons'
+
+const Create = () => {
+    const [form] = AntdForm.useForm<{
+        name: string
+        toolId: string
+        desc: string
+        version: string
+        template: string
+        private: boolean
+        keyword: string[]
+        category: string[]
+    }>()
+    const formValues = AntdForm.useWatch([], form)
+    const [template, setTemplate] = useState(templates['demo'])
+
+    useEffect(() => {
+        formValues?.template && setTemplate(templates[formValues?.template])
+    }, [formValues?.template])
+
+    useEffect(() => {
+        const temp: string[] = []
+        formValues?.keyword.forEach((item) => {
+            if (item.length <= 10) {
+                temp.push(item)
+            }
+        })
+        form.setFieldValue('keyword', temp)
+    }, [form, formValues?.keyword])
+
+    return (
+        <FitFullscreen data-component={'tools-create'}>
+            <FlexBox direction={'horizontal'} className={'root-content'}>
+                <FlexBox>
+                    <Card className={'title'}>
+                        <FlexBox>配置</FlexBox>
+                    </Card>
+                    <Card className={'config'}>
+                        <HideScrollbar>
+                            <div className={'config-content'}>
+                                <AntdForm form={form} layout={'vertical'}>
+                                    <AntdForm.Item
+                                        label={'名称'}
+                                        name={'name'}
+                                        rules={[{ required: true }]}
+                                    >
+                                        <AntdInput
+                                            maxLength={20}
+                                            showCount
+                                            placeholder={'请输入名称'}
+                                        />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item
+                                        label={'工具 ID'}
+                                        name={'toolId'}
+                                        rules={[
+                                            { required: true },
+                                            {
+                                                pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,19}$/,
+                                                message:
+                                                    '只能包含字母、数字、连字符和下划线，不能以数字开头'
+                                            }
+                                        ]}
+                                    >
+                                        <AntdInput
+                                            maxLength={20}
+                                            showCount
+                                            placeholder={'请输入工具 ID'}
+                                        />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item label={'简介'} name={'desc'}>
+                                        <AntdInput.TextArea
+                                            autoSize={{ minRows: 6, maxRows: 6 }}
+                                            maxLength={200}
+                                            showCount
+                                            placeholder={'请输入简介'}
+                                        />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item
+                                        label={'版本'}
+                                        name={'version'}
+                                        rules={[
+                                            { required: true },
+                                            {
+                                                pattern: /^\d+\.\d+\.\d+$/,
+                                                message: `格式必须为 '<数字>.<数字>.<数字>', eg. 1.0.3`
+                                            }
+                                        ]}
+                                    >
+                                        <AntdInput
+                                            maxLength={10}
+                                            showCount
+                                            placeholder={'请输入版本'}
+                                        />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item
+                                        label={'模板'}
+                                        name={'template'}
+                                        initialValue={'demo'}
+                                        rules={[{ required: true }]}
+                                    >
+                                        <AntdSelect>
+                                            {Object.keys(templates).map((item) => (
+                                                <AntdSelect.Option key={item}>
+                                                    {templates[item].name}
+                                                </AntdSelect.Option>
+                                            ))}
+                                        </AntdSelect>
+                                    </AntdForm.Item>
+                                    <AntdForm.Item
+                                        label={'访问权限'}
+                                        name={'private'}
+                                        initialValue={false}
+                                    >
+                                        <AntdSwitch
+                                            checkedChildren={'私有'}
+                                            unCheckedChildren={'公开'}
+                                        />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item
+                                        label={
+                                            <>
+                                                关键字
+                                                <AntdTooltip
+                                                    title={'工具搜索（每个不超过10个字符）'}
+                                                >
+                                                    <Icon
+                                                        className={'help'}
+                                                        component={IconOxygenHelp}
+                                                    />
+                                                </AntdTooltip>
+                                            </>
+                                        }
+                                        name={'keyword'}
+                                        rules={[{ required: true, message: '请输入关键字' }]}
+                                    >
+                                        <AntdSelect mode={'tags'} maxCount={20} />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item
+                                        label={
+                                            <>
+                                                类别
+                                                <AntdTooltip title={'工具分类'}>
+                                                    <Icon
+                                                        className={'help'}
+                                                        component={IconOxygenHelp}
+                                                    />
+                                                </AntdTooltip>
+                                            </>
+                                        }
+                                        name={'category'}
+                                        rules={[{ required: true }]}
+                                    >
+                                        <AntdSelect mode={'multiple'} />
+                                    </AntdForm.Item>
+                                    <AntdForm.Item>
+                                        <AntdButton className={'create-bt'} type={'primary'}>
+                                            创建
+                                        </AntdButton>
+                                    </AntdForm.Item>
+                                </AntdForm>
+                            </div>
+                        </HideScrollbar>
+                    </Card>
+                </FlexBox>
+                <FlexBox>
+                    <Card className={'title'}>
+                        <FlexBox>预览</FlexBox>
+                    </Card>
+                    <Card className={'preview'}>
+                        <Preview
+                            iframeKey={JSON.stringify(template.importMap)}
+                            files={template.files}
+                            importMap={template.importMap}
+                        />
+                    </Card>
+                </FlexBox>
+            </FlexBox>
+        </FitFullscreen>
+    )
+}
+
+export default Create
diff --git a/src/pages/Tools/Translation.tsx b/src/pages/Tools/Translation.tsx
deleted file mode 100644
index bb9dad6..0000000
--- a/src/pages/Tools/Translation.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Translation = () => {
-    return <></>
-}
-
-export default Translation
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 0e5d787..b3dcb87 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -23,7 +23,7 @@ const ToolsFramework = () => {
                             <Sidebar.Item end path={''} icon={tools[0].icon} text={tools[0].name} />
                             <Sidebar.Item
                                 end
-                                path={'all'}
+                                path={'store'}
                                 icon={tools[1].icon}
                                 text={tools[1].name}
                             />
@@ -34,7 +34,7 @@ const ToolsFramework = () => {
                                 {tools.map((tool) => {
                                     return tool.menu &&
                                         tool.id !== 'tools' &&
-                                        tool.id !== 'tools-all' ? (
+                                        tool.id !== 'tools-store' ? (
                                         <Sidebar.Item
                                             path={tool.absolutePath}
                                             icon={tool.icon}
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 158d7db..39ae83c 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -61,13 +61,6 @@ const root: RouteJsonObject[] = [
                 auth: true,
                 permission: true
             },
-            {
-                path: 'online-editor',
-                absolutePath: '/online-editor',
-                id: 'online-editor',
-                component: lazy(() => import('@/pages/OnlineEditor')),
-                name: '在线编辑器'
-            },
             {
                 path: '',
                 absolutePath: '/',
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index aaad39c..30c6ada 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -10,300 +10,26 @@ export const tools: RouteJsonObject[] = [
         auth: false
     },
     {
-        path: 'all',
-        absolutePath: '/all',
-        id: 'tools-all',
+        path: 'store',
+        absolutePath: '/store',
+        id: 'tools-store',
         component: lazy(() => import('@/pages/Tools')),
-        name: '全部工具',
-        titlePostfix: ' - 全部工具',
-        icon: lazy(() => import('~icons/oxygen/tool')),
+        name: '工具商店',
+        titlePostfix: ' - 商店',
+        icon: lazy(() => import('~icons/oxygen/store')),
         menu: true,
-        auth: false
+        auth: true
     },
     {
-        path: 'translation',
-        absolutePath: '/translation',
-        id: 'tools-translation',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
+        path: 'create',
+        absolutePath: '/create',
+        id: 'tools-create',
+        component: lazy(() => import('@/pages/Tools/Create')),
+        name: '创建工具',
+        titlePostfix: ' - 创建新工具',
+        icon: lazy(() => import('~icons/oxygen/newProject')),
         menu: true,
-        auth: false,
-        children: [
-            {
-                path: '1',
-                absolutePath: '/translation/1',
-                id: '1',
-                name: '翻译1',
-                icon: lazy(() => import('~icons/oxygen/logo')),
-                menu: true,
-                auth: false
-            },
-            {
-                path: '2',
-                absolutePath: '/translation/2',
-                id: '2',
-                name: '翻译2',
-                menu: true,
-                auth: false
-            }
-        ]
-    },
-    {
-        path: 'translation-',
-        absolutePath: '/translation-',
-        id: 'tools-translation-',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译-',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false,
-        children: [
-            {
-                path: '1-',
-                absolutePath: '/translation-/1-',
-                id: '1-',
-                name: '翻译1-',
-                menu: true,
-                auth: false
-            },
-            {
-                path: '2-',
-                absolutePath: '/translation-/2-',
-                id: '2-',
-                name: '翻译2-',
-                menu: true,
-                auth: false
-            }
-        ]
-    },
-    {
-        path: 'translation--',
-        absolutePath: '/translation--',
-        id: 'tools-translation--',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--1',
-        absolutePath: '/translation--1',
-        id: 'tools-translation--1',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--1',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--2',
-        absolutePath: '/translation--2',
-        id: 'tools-translation--2',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--2',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--3',
-        absolutePath: '/translation--3',
-        id: 'tools-translation--3',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--3',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--4',
-        absolutePath: '/translation--4',
-        id: 'tools-translation--4',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--4',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--5',
-        absolutePath: '/translation--5',
-        id: 'tools-translation--5',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--5',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--6',
-        absolutePath: '/translation--6',
-        id: 'tools-translation--6',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--6',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--7',
-        absolutePath: '/translation--7',
-        id: 'tools-translation--7',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--7',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--8',
-        absolutePath: '/translation--8',
-        id: 'tools-translation--8',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--8',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--9',
-        absolutePath: '/translation--9',
-        id: 'tools-translation--9',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--9',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--10',
-        absolutePath: '/translation--10',
-        id: 'tools-translation--10',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--10',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--1-',
-        absolutePath: '/translation--1-',
-        id: 'tools-translation--1-',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--1-',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--2-',
-        absolutePath: '/translation--2-',
-        id: 'tools-translation--2-',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--2-',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--3-',
-        absolutePath: '/translation--3-',
-        id: 'tools-translation--3-',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--3-',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--4-',
-        absolutePath: '/translation--4-',
-        id: 'tools-translation--4-',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--4-',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--5-',
-        absolutePath: '/translation--5-',
-        id: 'tools-translation--5-',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--5-',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--6-',
-        absolutePath: '/translation--6-',
-        id: 'tools-translation--6-',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--6-',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--7-',
-        absolutePath: '/translation--7-',
-        id: 'tools-translation--7-',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--7-',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--8-',
-        absolutePath: '/translation--8-',
-        id: 'tools-translation--8-',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--8-',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--9-',
-        absolutePath: '/translation--9-',
-        id: 'tools-translation--9-',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--9-',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false
-    },
-    {
-        path: 'translation--10-',
-        absolutePath: '/translation--10-',
-        id: 'tools-translation--10-',
-        component: lazy(() => import('@/pages/Tools/Translation')),
-        name: '翻译--10-',
-        icon: lazy(() => import('~icons/oxygen/jenkins')),
-        menu: true,
-        auth: false,
-        children: [
-            {
-                path: '1-1',
-                absolutePath: '/translation--10-/1-1',
-                id: '1-1',
-                name: '翻译1-',
-                menu: true,
-                auth: false
-            },
-            {
-                path: '2-1',
-                absolutePath: '/translation--10-/2-1',
-                id: '2-1',
-                name: '翻译2-',
-                menu: true,
-                auth: false
-            }
-        ]
+        auth: true
     },
     {
         path: '*',

From b738634eff9e25a40b522cbf4aa21847aa277019 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 16 Jan 2024 23:37:07 +0800
Subject: [PATCH 181/307] Add tools setting page

---
 src/assets/svg/base.svg          |  1 +
 src/assets/svg/template.svg      |  1 +
 src/pages/System/Tools/index.tsx |  5 +++++
 src/router/system.tsx            | 10 ++++++++++
 4 files changed, 17 insertions(+)
 create mode 100644 src/assets/svg/base.svg
 create mode 100644 src/assets/svg/template.svg
 create mode 100644 src/pages/System/Tools/index.tsx

diff --git a/src/assets/svg/base.svg b/src/assets/svg/base.svg
new file mode 100644
index 0000000..f1e2ede
--- /dev/null
+++ b/src/assets/svg/base.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1001.472 608.768l-473.088-216.576c-5.12-2.048-10.752-3.584-15.872-3.584s-10.752 1.024-15.872 3.584L22.528 608.768c-13.824 6.656-22.528 19.968-22.528 35.328 0 15.36 8.704 28.672 23.04 35.328l473.088 212.992c10.24 4.608 21.504 4.608 31.744 0l473.088-212.992c14.336-6.144 23.04-19.968 23.04-35.328 0-15.36-8.704-28.672-22.528-35.328z" /><path d="M23.04 435.2l125.952 56.32c12.8 5.632 27.648 0 33.28-12.288 5.632-12.8 0-27.648-12.288-33.28l-103.424-46.08 445.44-203.776 445.952 204.288-102.912 46.08c-12.8 5.632-18.432 20.48-12.288 33.28s20.48 18.432 33.28 12.288L1000.96 435.2c14.336-6.144 23.04-19.968 23.04-35.328 0-15.36-8.704-29.184-22.528-35.328L527.872 148.48c-5.12-2.048-10.752-3.584-15.872-3.584s-10.752 1.024-15.872 3.584L22.528 365.056C8.704 371.2 0 385.024 0 400.384s8.704 28.672 23.04 34.816z" /><path d="M23.04 433.152l125.952 56.32c12.8 5.632 27.648 0 33.28-12.288 5.632-12.8 0-27.648-12.288-33.28l-103.424-46.08 445.44-204.288 445.952 204.288-102.912 46.592c-12.8 5.632-18.432 20.48-12.288 33.28s20.48 18.432 33.28 12.288l125.44-56.832c14.336-6.144 23.04-19.968 23.04-35.328 0-15.36-8.704-29.184-22.528-35.328l-473.088-216.576c-5.12-2.048-10.752-3.584-15.872-3.584s-10.752 1.024-15.872 3.584L22.528 362.496C8.704 369.152 0 382.464 0 397.824c0 15.36 8.704 29.184 23.04 35.328z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/template.svg b/src/assets/svg/template.svg
new file mode 100644
index 0000000..09b663d
--- /dev/null
+++ b/src/assets/svg/template.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M832 96H192c-52.935 0-96 43.065-96 96v640c0 52.935 43.065 96 96 96h640c52.935 0 96-43.065 96-96V192c0-52.935-43.065-96-96-96z m-640 64h640c17.645 0 32 14.355 32 32v160H160V192c0-17.645 14.355-32 32-32z m-32 672V416h192v448H192c-17.645 0-32-14.355-32-32z m672 32H416V416h448v416c0 17.645-14.355 32-32 32z" /></svg>
\ No newline at end of file
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
new file mode 100644
index 0000000..0f205de
--- /dev/null
+++ b/src/pages/System/Tools/index.tsx
@@ -0,0 +1,5 @@
+const Tools = () => {
+    return <></>
+}
+
+export default Tools
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 3c0a0b3..1cdac3d 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -30,6 +30,16 @@ const system: RouteJsonObject[] = [
         menu: true,
         autoHide: true
     },
+    {
+        path: 'tools',
+        absolutePath: '/system/tools',
+        id: 'system-tools',
+        component: lazy(() => import('@/pages/System/Tools')),
+        name: '工具配置',
+        icon: lazy(() => import('~icons/oxygen/tool')),
+        menu: true,
+        autoHide: true
+    },
     {
         path: 'user',
         absolutePath: '/system/user',

From c460e2c4cf70c3d188d397f50195f30e3dde72b1 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 18 Jan 2024 14:13:53 +0800
Subject: [PATCH 182/307] Add tool category management page

---
 src/constants/urls.constants.ts     |   4 +
 src/global.d.ts                     |  60 ++++++
 src/pages/System/Tools/Base.tsx     |   5 +
 src/pages/System/Tools/Category.tsx | 316 ++++++++++++++++++++++++++++
 src/pages/System/Tools/Template.tsx |   5 +
 src/pages/System/Tools/index.tsx    |   2 +-
 src/pages/SystemFramework.tsx       |  39 ++--
 src/pages/Tools/Create.tsx          |  29 +--
 src/pages/ToolsFramework.tsx        |  13 +-
 src/router/system.tsx               |  41 +++-
 src/services/system.tsx             |  14 +-
 src/util/auth.tsx                   |   9 +-
 12 files changed, 482 insertions(+), 55 deletions(-)
 create mode 100644 src/pages/System/Tools/Base.tsx
 create mode 100644 src/pages/System/Tools/Category.tsx
 create mode 100644 src/pages/System/Tools/Template.tsx

diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 260c1d7..84eb783 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -25,6 +25,10 @@ export const URL_SYS_STATISTICS_CPU = `${URL_SYS_STATISTICS}/cpu`
 export const URL_SYS_STATISTICS_STORAGE = `${URL_SYS_STATISTICS}/storage`
 export const URL_SYS_STATISTICS_ONLINE = `${URL_SYS_STATISTICS}/online`
 export const URL_SYS_STATISTICS_ACTIVE = `${URL_SYS_STATISTICS}/active`
+export const URL_SYS_TOOL = '/system/tool'
+export const URL_SYS_TOOL_CATEGORY = `${URL_SYS_TOOL}/category`
+export const URL_SYS_TOOL_BASE = `${URL_SYS_TOOL}/base`
+export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/global.d.ts b/src/global.d.ts
index deec261..408aaea 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -464,3 +464,63 @@ interface ActiveInfoVo {
 interface ActiveInfoGetParam {
     scope: string
 }
+
+interface ToolCategoryVo {
+    id: string
+    name: string
+    enable: boolean
+    createTime: string
+    updateTime: string
+}
+
+interface ToolCategoryAddEditParam {
+    id?: string
+    name: string
+    enable: string
+}
+
+interface ToolDataVo {
+    id: string
+    data: string
+    createTime: string
+    updateTime: string
+}
+
+interface ToolBaseVo {
+    id: string
+    name: string
+    source: ToolDataVo
+    dist: ToolDataVo
+    createTime: string
+    updateTime: string
+}
+
+interface ToolTemplateVo {
+    id: string
+    name: string
+    ver: string
+    baseId: string
+    source: ToolDataVo
+    dist: ToolDataVo
+    createTime: string
+    updateTime: string
+}
+
+interface ToolVo {
+    id: string
+    name: string
+    toolId: string
+    description: string
+    baseId: string
+    author: UserInfoVo
+    ver: string
+    privately: boolean
+    keywords: string[]
+    categories: ToolCategoryVo[]
+    source: ToolDataVo
+    dist: ToolDataVo
+    publish: boolean
+    review: number
+    createTime: string
+    updateTime: string
+}
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
new file mode 100644
index 0000000..4870323
--- /dev/null
+++ b/src/pages/System/Tools/Base.tsx
@@ -0,0 +1,5 @@
+const Base = () => {
+    return <>3</>
+}
+
+export default Base
diff --git a/src/pages/System/Tools/Category.tsx b/src/pages/System/Tools/Category.tsx
new file mode 100644
index 0000000..6ac6519
--- /dev/null
+++ b/src/pages/System/Tools/Category.tsx
@@ -0,0 +1,316 @@
+import {
+    COLOR_PRODUCTION,
+    DATABASE_DELETE_SUCCESS,
+    DATABASE_DUPLICATE_KEY,
+    DATABASE_INSERT_SUCCESS,
+    DATABASE_SELECT_SUCCESS,
+    DATABASE_UPDATE_SUCCESS
+} from '@/constants/common.constants'
+import { utcToLocalTime } from '@/util/datetime'
+import {
+    r_sys_tool_category_add,
+    r_sys_tool_category_delete,
+    r_sys_tool_category_get,
+    r_sys_tool_category_update
+} from '@/services/system'
+import Card from '@/components/common/Card'
+import Permission from '@/components/common/Permission'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+
+const Category = () => {
+    const [modal, contextHolder] = AntdModal.useModal()
+    const [form] = AntdForm.useForm<ToolCategoryAddEditParam>()
+    const formValues = AntdForm.useWatch([], form)
+    const [newFormValues, setNewFormValues] = useState<ToolCategoryAddEditParam>()
+    const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>([])
+    const [isLoading, setIsLoading] = useState(false)
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const [isDrawerEdit, setIsDrawerEdit] = useState(false)
+    const [submittable, setSubmittable] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+
+    const handleOnAddBtnClick = () => {
+        setIsDrawerEdit(false)
+        setIsDrawerOpen(true)
+        form.setFieldValue('id', undefined)
+        form.setFieldValue('name', newFormValues?.name)
+        form.setFieldValue('enable', newFormValues?.enable ?? true)
+    }
+
+    const handleOnEditBtnClick = (value: ToolCategoryVo) => {
+        return () => {
+            setIsDrawerEdit(true)
+            setIsDrawerOpen(true)
+            form.setFieldValue('id', value.id)
+            form.setFieldValue('name', value.name)
+            form.setFieldValue('enable', value.enable)
+            void form.validateFields()
+        }
+    }
+
+    const categoryColumns: _ColumnsType<ToolCategoryVo> = [
+        {
+            title: 'ID',
+            dataIndex: 'id',
+            width: '15%'
+        },
+        {
+            title: '名称',
+            dataIndex: 'name'
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            width: '20%',
+            align: 'center',
+            render: (value: string) => utcToLocalTime(value)
+        },
+        {
+            title: '修改时间',
+            dataIndex: 'updateTime',
+            width: '20%',
+            align: 'center',
+            render: (value: string) => utcToLocalTime(value)
+        },
+        {
+            title: '状态',
+            dataIndex: 'enable',
+            width: '5%',
+            align: 'center',
+            render: (value) =>
+                value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>
+        },
+        {
+            title: (
+                <>
+                    操作 (<a onClick={handleOnAddBtnClick}>新增</a>)
+                </>
+            ),
+            dataIndex: 'enable',
+            width: '15em',
+            align: 'center',
+            render: (_, record) => (
+                <>
+                    <AntdSpace size={'middle'}>
+                        <Permission operationCode={'system:tool:modify:category'}>
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnEditBtnClick(record)}
+                            >
+                                编辑
+                            </a>
+                        </Permission>
+                        <Permission operationCode={'system:tool:delete:category'}>
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnDeleteBtnClick(record)}
+                            >
+                                删除
+                            </a>
+                        </Permission>
+                    </AntdSpace>
+                </>
+            )
+        }
+    ]
+
+    const handleOnDeleteBtnClick = (value: ToolCategoryVo) => {
+        return () => {
+            modal
+                .confirm({
+                    title: '确定删除',
+                    content: `确定删除类别 ${value.name} 吗？`
+                })
+                .then(
+                    (confirmed) => {
+                        if (confirmed) {
+                            setIsLoading(true)
+
+                            void r_sys_tool_category_delete(value.id)
+                                .then((res) => {
+                                    const response = res.data
+                                    if (response.code === DATABASE_DELETE_SUCCESS) {
+                                        void message.success('删除成功')
+                                        setTimeout(() => {
+                                            getCategory()
+                                        })
+                                    } else {
+                                        void message.error('删除失败，请稍后重试')
+                                    }
+                                })
+                                .finally(() => {
+                                    setIsLoading(false)
+                                })
+                        }
+                    },
+                    () => {}
+                )
+        }
+    }
+
+    const handleOnDrawerClose = () => {
+        setIsDrawerOpen(false)
+    }
+
+    const handleOnSubmit = () => {
+        if (isSubmitting) {
+            return
+        }
+        setIsSubmitting(true)
+
+        if (isDrawerEdit) {
+            void r_sys_tool_category_update(formValues)
+                .then((res) => {
+                    const response = res.data
+                    switch (response.code) {
+                        case DATABASE_UPDATE_SUCCESS:
+                            setIsDrawerOpen(false)
+                            void message.success('更新成功')
+                            getCategory()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error('已存在相同名称的类别')
+                            break
+                        default:
+                            void message.error('更新失败，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        } else {
+            void r_sys_tool_category_add(formValues)
+                .then((res) => {
+                    const response = res.data
+                    switch (response.code) {
+                        case DATABASE_INSERT_SUCCESS:
+                            setIsDrawerOpen(false)
+                            void message.success('添加成功')
+                            setNewFormValues(undefined)
+                            getCategory()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error('已存在相同名称的类别')
+                            break
+                        default:
+                            void message.error('添加失败，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        }
+    }
+
+    const getCategory = () => {
+        if (isLoading) {
+            return
+        }
+        setIsLoading(true)
+
+        void r_sys_tool_category_get()
+            .then((res) => {
+                const response = res.data
+                if (response.code === DATABASE_SELECT_SUCCESS) {
+                    setCategoryData(response.data!)
+                } else {
+                    void message.error('获取失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoading(false)
+            })
+    }
+
+    useEffect(() => {
+        form.validateFields({ validateOnly: true }).then(
+            () => {
+                setSubmittable(true)
+            },
+            () => {
+                setSubmittable(false)
+            }
+        )
+
+        if (!isDrawerEdit && formValues) {
+            setNewFormValues({
+                name: formValues.name,
+                enable: formValues.enable
+            })
+        }
+    }, [formValues])
+
+    useEffect(() => {
+        getCategory()
+    }, [])
+
+    const drawerToolbar = (
+        <AntdSpace>
+            <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
+                取消
+            </AntdButton>
+            <AntdButton
+                type={'primary'}
+                disabled={!submittable}
+                loading={isSubmitting}
+                onClick={handleOnSubmit}
+            >
+                提交
+            </AntdButton>
+        </AntdSpace>
+    )
+
+    const addAndEditForm = (
+        <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
+            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+                <AntdInput disabled />
+            </AntdForm.Item>
+            <AntdForm.Item
+                name={'name'}
+                label={'名称'}
+                rules={[{ required: true, whitespace: false }]}
+            >
+                <AntdInput allowClear />
+            </AntdForm.Item>
+            <AntdForm.Item name={'enable'} label={'状态'}>
+                <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
+            </AntdForm.Item>
+        </AntdForm>
+    )
+
+    return (
+        <>
+            <FitFullscreen data-component={'system-tools-category'}>
+                <HideScrollbar
+                    style={{ padding: 30 }}
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={1000}
+                >
+                    <Card>
+                        <AntdTable
+                            dataSource={categoryData}
+                            columns={categoryColumns}
+                            rowKey={(record) => record.id}
+                            loading={isLoading}
+                            pagination={false}
+                        />
+                    </Card>
+                </HideScrollbar>
+            </FitFullscreen>
+            <AntdDrawer
+                title={isDrawerEdit ? '编辑类别' : '添加类别'}
+                onClose={handleOnDrawerClose}
+                open={isDrawerOpen}
+                closable={!isSubmitting}
+                maskClosable={!isSubmitting}
+                extra={drawerToolbar}
+            >
+                {addAndEditForm}
+            </AntdDrawer>
+            {contextHolder}
+        </>
+    )
+}
+
+export default Category
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
new file mode 100644
index 0000000..edf5155
--- /dev/null
+++ b/src/pages/System/Tools/Template.tsx
@@ -0,0 +1,5 @@
+const Template = () => {
+    return <>2</>
+}
+
+export default Template
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 0f205de..170916e 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -1,5 +1,5 @@
 const Tools = () => {
-    return <></>
+    return <>1</>
 }
 
 export default Tools
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 00d3a17..6084d97 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -10,21 +10,32 @@ const SystemFramework = () => {
             <FitFullscreen data-component={'system-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
                     <Sidebar title={'系统配置'}>
-                        <Sidebar.ItemList>
-                            {getSystemRouteJson().map((value) => {
-                                return (
-                                    value.menu && (
-                                        <Sidebar.Item
-                                            end={value.id === 'system' ? true : undefined}
-                                            path={value.absolutePath}
-                                            icon={value.icon}
-                                            text={value.name}
-                                            key={value.id}
-                                        />
+                        <Sidebar.Scroll>
+                            <Sidebar.ItemList>
+                                {getSystemRouteJson().map((route) => {
+                                    return (
+                                        route.menu && (
+                                            <Sidebar.Item
+                                                end={route.id === 'system' ? true : undefined}
+                                                path={route.absolutePath}
+                                                icon={route.icon}
+                                                text={route.name}
+                                                key={route.id}
+                                            >
+                                                {route.children?.map((subRoute) => (
+                                                    <Sidebar.Item
+                                                        end
+                                                        path={subRoute.absolutePath}
+                                                        text={subRoute.name}
+                                                        key={subRoute.id}
+                                                    />
+                                                ))}
+                                            </Sidebar.Item>
+                                        )
                                     )
-                                )
-                            })}
-                        </Sidebar.ItemList>
+                                })}
+                            </Sidebar.ItemList>
+                        </Sidebar.Scroll>
                     </Sidebar>
                 </div>
                 <div className={'right-panel'}>
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index fb0e8f5..46cc42b 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -6,7 +6,6 @@ import Preview from '@/components/Playground/Output/Preview'
 import templates from '@/components/Playground/templates.ts'
 import { useEffect } from 'react'
 import HideScrollbar from '@/components/common/HideScrollbar.tsx'
-import Icon from '@ant-design/icons'
 
 const Create = () => {
     const [form] = AntdForm.useForm<{
@@ -126,36 +125,16 @@ const Create = () => {
                                         />
                                     </AntdForm.Item>
                                     <AntdForm.Item
-                                        label={
-                                            <>
-                                                关键字
-                                                <AntdTooltip
-                                                    title={'工具搜索（每个不超过10个字符）'}
-                                                >
-                                                    <Icon
-                                                        className={'help'}
-                                                        component={IconOxygenHelp}
-                                                    />
-                                                </AntdTooltip>
-                                            </>
-                                        }
+                                        label={'关键字'}
+                                        tooltip={'工具搜索（每个不超过10个字符）'}
                                         name={'keyword'}
                                         rules={[{ required: true, message: '请输入关键字' }]}
                                     >
                                         <AntdSelect mode={'tags'} maxCount={20} />
                                     </AntdForm.Item>
                                     <AntdForm.Item
-                                        label={
-                                            <>
-                                                类别
-                                                <AntdTooltip title={'工具分类'}>
-                                                    <Icon
-                                                        className={'help'}
-                                                        component={IconOxygenHelp}
-                                                    />
-                                                </AntdTooltip>
-                                            </>
-                                        }
+                                        label={'类别'}
+                                        tooltip={'工具分类'}
                                         name={'category'}
                                         rules={[{ required: true }]}
                                     >
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index b3dcb87..2abb04e 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -2,23 +2,14 @@ import '@/assets/css/pages/tools-framework.scss'
 import { tools } from '@/router/tools'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Sidebar from '@/components/common/Sidebar'
-import { SidebarScrollElement } from '@/components/common/Sidebar/Scroll'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 const ToolsFramework = () => {
-    const sidebarScrollRef = useRef<SidebarScrollElement>(null)
-
-    const handleOnSidebarSwitch = () => {
-        setTimeout(() => {
-            sidebarScrollRef.current?.refreshLayout()
-        }, 300)
-    }
-
     return (
         <>
             <FitFullscreen data-component={'tools-framework'} className={'flex-horizontal'}>
                 <div className={'left-panel'}>
-                    <Sidebar title={'氧工具'} onSidebarSwitch={handleOnSidebarSwitch}>
+                    <Sidebar title={'氧工具'}>
                         <Sidebar.ItemList>
                             <Sidebar.Item end path={''} icon={tools[0].icon} text={tools[0].name} />
                             <Sidebar.Item
@@ -29,7 +20,7 @@ const ToolsFramework = () => {
                             />
                         </Sidebar.ItemList>
                         <Sidebar.Separate style={{ marginBottom: 0 }} />
-                        <Sidebar.Scroll ref={sidebarScrollRef}>
+                        <Sidebar.Scroll>
                             <Sidebar.ItemList>
                                 {tools.map((tool) => {
                                     return tool.menu &&
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 1cdac3d..30f1f8e 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -34,11 +34,48 @@ const system: RouteJsonObject[] = [
         path: 'tools',
         absolutePath: '/system/tools',
         id: 'system-tools',
-        component: lazy(() => import('@/pages/System/Tools')),
         name: '工具配置',
         icon: lazy(() => import('~icons/oxygen/tool')),
         menu: true,
-        autoHide: true
+        autoHide: true,
+        children: [
+            {
+                path: '',
+                absolutePath: '/system/tools',
+                id: 'system-tools-index',
+                component: lazy(() => import('@/pages/System/Tools')),
+                name: '工具管理',
+                menu: true,
+                autoHide: true
+            },
+            {
+                path: 'template',
+                absolutePath: '/system/tools/template',
+                id: 'system-tools-template',
+                component: lazy(() => import('@/pages/System/Tools/Template')),
+                name: '模板管理',
+                menu: true,
+                autoHide: true
+            },
+            {
+                path: 'base',
+                absolutePath: '/system/tools/base',
+                id: 'system-tools-base',
+                component: lazy(() => import('@/pages/System/Tools/Base')),
+                name: '基板管理',
+                menu: true,
+                autoHide: true
+            },
+            {
+                path: 'category',
+                absolutePath: '/system/tools/category',
+                id: 'system-tools-category',
+                component: lazy(() => import('@/pages/System/Tools/Category')),
+                name: '类别管理',
+                menu: true,
+                autoHide: true
+            }
+        ]
     },
     {
         path: 'user',
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 8e6cd7f..690bb21 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -16,7 +16,8 @@ import {
     URL_SYS_STATISTICS_ONLINE,
     URL_SYS_STATISTICS_ACTIVE,
     URL_SYS_SETTINGS_BASE,
-    URL_SYS_SETTINGS_SENSITIVE
+    URL_SYS_SETTINGS_SENSITIVE,
+    URL_SYS_TOOL_CATEGORY
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -113,3 +114,14 @@ export const r_sys_statistics_online = (param: OnlineInfoGetParam) =>
 
 export const r_sys_statistics_active = (param: ActiveInfoGetParam) =>
     request.get<ActiveInfoVo>(URL_SYS_STATISTICS_ACTIVE, param)
+
+export const r_sys_tool_category_get = () => request.get<ToolCategoryVo[]>(URL_SYS_TOOL_CATEGORY)
+
+export const r_sys_tool_category_add = (param: ToolCategoryAddEditParam) =>
+    request.post(URL_SYS_TOOL_CATEGORY, param)
+
+export const r_sys_tool_category_update = (param: ToolCategoryAddEditParam) =>
+    request.put(URL_SYS_TOOL_CATEGORY, param)
+
+export const r_sys_tool_category_delete = (id: string) =>
+    request.delete(`${URL_SYS_TOOL_CATEGORY}/${id}`)
diff --git a/src/util/auth.tsx b/src/util/auth.tsx
index 7ff918e..6fc66fc 100644
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -253,7 +253,14 @@ export const getPermissionPath = (): string[] => {
 }
 
 export const hasPathPermission = (path: string) => {
-    return getPermissionPath().indexOf(path) !== -1
+    let flag = false
+    getPermissionPath().forEach((value) => {
+        if (RegExp(value).test(path)) {
+            flag = true
+            return
+        }
+    })
+    return flag
 }
 
 export const getPermission = (): string[] => {

From 9bcf55971819680d8918750aaabda2252df9b7fc Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 18 Jan 2024 14:53:28 +0800
Subject: [PATCH 183/307] Upgrade HideScrollbar

---
 src/components/common/HideScrollbar.tsx | 163 ++++++++++++------------
 1 file changed, 84 insertions(+), 79 deletions(-)

diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 237ff7a..be9dfc5 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -52,13 +52,13 @@ export interface HideScrollbarElement {
 const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
     (
         {
-            isPreventScroll,
-            isPreventVerticalScroll,
-            isPreventHorizontalScroll,
-            isShowVerticalScrollbar,
-            isHiddenVerticalScrollbarWhenFull,
-            isShowHorizontalScrollbar,
-            isHiddenHorizontalScrollbarWhenFull,
+            isPreventScroll = false,
+            isPreventVerticalScroll = false,
+            isPreventHorizontalScroll = false,
+            isShowVerticalScrollbar = true,
+            isHiddenVerticalScrollbarWhenFull = true,
+            isShowHorizontalScrollbar = true,
+            isHiddenHorizontalScrollbarWhenFull = true,
             minWidth,
             minHeight,
             scrollbarWidth,
@@ -536,84 +536,89 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                             {children}
                         </div>
                     </div>
-                    <div
-                        hidden={
-                            !isShowVerticalScrollbar ||
-                            ((isHiddenVerticalScrollbarWhenFull ?? true) &&
-                                verticalScrollbarLength >= 100)
-                        }
-                        className={`scrollbar vertical-scrollbar${
-                            verticalScrollbarAutoHide ? ' hide' : ''
-                        }`}
-                        style={{
-                            height: maskRef.current ? maskRef.current?.clientHeight - 1 : undefined,
-                            top: maskRef.current?.clientTop,
-                            left: maskRef.current
-                                ? maskRef.current?.clientLeft + maskRef.current?.clientWidth - 1
-                                : undefined
-                        }}
-                    >
-                        <div className={'box'} style={{ width: scrollbarWidth }}>
+                    {isShowVerticalScrollbar &&
+                        (!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && (
                             <div
-                                className={'block'}
+                                className={`scrollbar vertical-scrollbar${
+                                    verticalScrollbarAutoHide ? ' hide' : ''
+                                }`}
                                 style={{
-                                    height: `${verticalScrollbarLength}%`,
-                                    top: `clamp(0px, ${verticalScrollbarPosition}%, ${
-                                        100 - verticalScrollbarLength
-                                    }%)`
+                                    height: maskRef.current
+                                        ? maskRef.current?.clientHeight - 1
+                                        : undefined,
+                                    top: maskRef.current?.clientTop,
+                                    left: maskRef.current
+                                        ? maskRef.current?.clientLeft +
+                                          maskRef.current?.clientWidth -
+                                          1
+                                        : undefined
                                 }}
-                                onMouseDown={
-                                    !isPreventScroll && !isPreventVerticalScroll
-                                        ? handleScrollbarMouseEvent('down', 'vertical')
-                                        : undefined
-                                }
-                                onTouchStart={
-                                    !isPreventScroll && !isPreventVerticalScroll
-                                        ? handleScrollbarTouchEvent('start', 'vertical')
-                                        : undefined
-                                }
-                            />
-                        </div>
-                    </div>
-                    <div
-                        hidden={
-                            !isShowHorizontalScrollbar ||
-                            ((isHiddenHorizontalScrollbarWhenFull ?? true) &&
-                                horizontalScrollbarLength >= 100)
-                        }
-                        className={`scrollbar horizontal-scrollbar${
-                            horizontalScrollbarAutoHide ? ' hide' : ''
-                        }`}
-                        style={{
-                            width: maskRef.current ? maskRef.current?.clientWidth - 1 : undefined,
-                            left: maskRef.current?.clientLeft,
-                            top: maskRef.current
-                                ? maskRef.current?.clientTop + maskRef.current?.clientHeight - 1
-                                : undefined
-                        }}
-                    >
-                        <div className={'box'} style={{ height: scrollbarWidth }}>
+                            >
+                                <div className={'box'} style={{ width: scrollbarWidth }}>
+                                    <div
+                                        className={'block'}
+                                        style={{
+                                            height: `${verticalScrollbarLength}%`,
+                                            top: `clamp(0px, ${verticalScrollbarPosition}%, ${
+                                                100 - verticalScrollbarLength
+                                            }%)`
+                                        }}
+                                        onMouseDown={
+                                            !isPreventScroll && !isPreventVerticalScroll
+                                                ? handleScrollbarMouseEvent('down', 'vertical')
+                                                : undefined
+                                        }
+                                        onTouchStart={
+                                            !isPreventScroll && !isPreventVerticalScroll
+                                                ? handleScrollbarTouchEvent('start', 'vertical')
+                                                : undefined
+                                        }
+                                    />
+                                </div>
+                            </div>
+                        )}
+                    {isShowHorizontalScrollbar &&
+                        (!isHiddenHorizontalScrollbarWhenFull ||
+                            horizontalScrollbarLength < 100) && (
                             <div
-                                className={'block'}
+                                className={`scrollbar horizontal-scrollbar${
+                                    horizontalScrollbarAutoHide ? ' hide' : ''
+                                }`}
                                 style={{
-                                    width: `${horizontalScrollbarLength}%`,
-                                    left: `clamp(0px, ${horizontalScrollbarPosition}%, ${
-                                        100 - horizontalScrollbarLength
-                                    }%)`
+                                    width: maskRef.current
+                                        ? maskRef.current?.clientWidth - 1
+                                        : undefined,
+                                    left: maskRef.current?.clientLeft,
+                                    top: maskRef.current
+                                        ? maskRef.current?.clientTop +
+                                          maskRef.current?.clientHeight -
+                                          1
+                                        : undefined
                                 }}
-                                onMouseDown={
-                                    !isPreventScroll && !isPreventHorizontalScroll
-                                        ? handleScrollbarMouseEvent('down', 'horizontal')
-                                        : undefined
-                                }
-                                onTouchStart={
-                                    !isPreventScroll && !isPreventHorizontalScroll
-                                        ? handleScrollbarTouchEvent('start', 'horizontal')
-                                        : undefined
-                                }
-                            />
-                        </div>
-                    </div>
+                            >
+                                <div className={'box'} style={{ height: scrollbarWidth }}>
+                                    <div
+                                        className={'block'}
+                                        style={{
+                                            width: `${horizontalScrollbarLength}%`,
+                                            left: `clamp(0px, ${horizontalScrollbarPosition}%, ${
+                                                100 - horizontalScrollbarLength
+                                            }%)`
+                                        }}
+                                        onMouseDown={
+                                            !isPreventScroll && !isPreventHorizontalScroll
+                                                ? handleScrollbarMouseEvent('down', 'horizontal')
+                                                : undefined
+                                        }
+                                        onTouchStart={
+                                            !isPreventScroll && !isPreventHorizontalScroll
+                                                ? handleScrollbarTouchEvent('start', 'horizontal')
+                                                : undefined
+                                        }
+                                    />
+                                </div>
+                            </div>
+                        )}
                 </div>
             </>
         )

From 343152c9d3886b670eefecdc1d6f2b3402cabbb2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 18 Jan 2024 17:29:42 +0800
Subject: [PATCH 184/307] Optimize layout and stylesheet

---
 src/assets/css/components/common/sidebar.scss | 16 ++++++++--
 src/components/common/Sidebar/Scroll.tsx      | 21 ++----------
 src/pages/System/Group.tsx                    |  9 +++---
 src/pages/System/Log.tsx                      |  2 +-
 src/pages/System/Role.tsx                     |  9 +++---
 src/pages/System/Settings/index.tsx           |  2 +-
 src/pages/System/Statistics/index.tsx         |  2 +-
 src/pages/System/User.tsx                     | 32 +++++--------------
 src/pages/System/index.tsx                    |  2 +-
 9 files changed, 37 insertions(+), 58 deletions(-)

diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss
index 702af2a..ca67fd6 100644
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -100,10 +100,21 @@
           }
 
           .submenu {
-            display: none;
+            visibility: hidden;
             position: fixed;
             padding-left: 20px;
             z-index: 10000;
+            animation: 0.1s ease forwards;
+            @include mixins.unique-keyframes {
+              0% {
+                transform: translateX(0);
+                opacity: 1;
+              }
+              100% {
+                transform: translateX(-10px);
+                opacity: 0;
+              }
+            }
 
             .content {
               display: flex;
@@ -144,7 +155,7 @@
             }
 
             .submenu {
-              display: block;
+              visibility: visible;
               animation: 0.3s ease;
               @include mixins.unique-keyframes {
                 0% {
@@ -185,6 +196,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
+      flex: 0 0 auto;
       margin-left: 4px;
       width: 36px;
       height: 36px;
diff --git a/src/components/common/Sidebar/Scroll.tsx b/src/components/common/Sidebar/Scroll.tsx
index e27f1c0..97ff649 100644
--- a/src/components/common/Sidebar/Scroll.tsx
+++ b/src/components/common/Sidebar/Scroll.tsx
@@ -1,33 +1,18 @@
 import { PropsWithChildren } from 'react'
-import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
-
-export interface SidebarScrollElement {
-    refreshLayout(): void
-}
-
-const Scroll = forwardRef<SidebarScrollElement, PropsWithChildren>((props, ref) => {
-    useImperativeHandle<SidebarScrollElement, SidebarScrollElement>(ref, () => {
-        return {
-            refreshLayout() {
-                hideScrollbarRef.current?.refreshLayout()
-            }
-        }
-    })
-
-    const hideScrollbarRef = useRef<HideScrollbarElement>(null)
+import HideScrollbar from '@/components/common/HideScrollbar'
 
+const Scroll = (props: PropsWithChildren) => {
     return (
         <div className={'scroll'}>
             <HideScrollbar
                 isShowVerticalScrollbar={true}
                 scrollbarWidth={2}
                 autoHideWaitingTime={800}
-                ref={hideScrollbarRef}
             >
                 {props.children}
             </HideScrollbar>
         </div>
     )
-})
+}
 
 export default Scroll
diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index 1d9e64e..d286e84 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -594,7 +594,7 @@ const Group = () => {
     )
 
     const addAndEditForm = (
-        <AntdForm form={form} disabled={isSubmitting}>
+        <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
             <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
                 <AntdInput disabled />
             </AntdForm.Item>
@@ -620,10 +620,10 @@ const Group = () => {
             <AntdForm.Item
                 valuePropName={'checked'}
                 name={'enable'}
-                label={'启用'}
+                label={'状态'}
                 rules={[{ required: true, type: 'boolean' }]}
             >
-                <AntdSwitch />
+                <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
             </AntdForm.Item>
         </AntdForm>
     )
@@ -634,7 +634,7 @@ const Group = () => {
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar
-                    autoHideWaitingTime={500}
+                    autoHideWaitingTime={1000}
                 >
                     <FlexBox gap={20}>
                         {toolbar}
@@ -644,7 +644,6 @@ const Group = () => {
             </FitFullscreen>
             <AntdDrawer
                 title={isDrawerEdit ? '编辑用户组' : '添加用户组'}
-                width={'36vw'}
                 onClose={handleOnDrawerClose}
                 open={isDrawerOpen}
                 closable={!isSubmitting}
diff --git a/src/pages/System/Log.tsx b/src/pages/System/Log.tsx
index 1de1dea..86f4294 100644
--- a/src/pages/System/Log.tsx
+++ b/src/pages/System/Log.tsx
@@ -287,7 +287,7 @@ const Log = () => {
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar
-                    autoHideWaitingTime={500}
+                    autoHideWaitingTime={1000}
                 >
                     <FlexBox gap={20}>
                         {toolbar}
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index a0be4af..4d6b2fd 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -603,7 +603,7 @@ const Role = () => {
     )
 
     const addAndEditForm = (
-        <AntdForm form={form} disabled={isSubmitting}>
+        <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
             <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
                 <AntdInput disabled />
             </AntdForm.Item>
@@ -627,10 +627,10 @@ const Role = () => {
             <AntdForm.Item
                 valuePropName={'checked'}
                 name={'enable'}
-                label={'启用'}
+                label={'状态'}
                 rules={[{ required: true, type: 'boolean' }]}
             >
-                <AntdSwitch />
+                <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
             </AntdForm.Item>
         </AntdForm>
     )
@@ -641,7 +641,7 @@ const Role = () => {
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar
-                    autoHideWaitingTime={500}
+                    autoHideWaitingTime={1000}
                 >
                     <FlexBox gap={20}>
                         {toolbar}
@@ -651,7 +651,6 @@ const Role = () => {
             </FitFullscreen>
             <AntdDrawer
                 title={isDrawerEdit ? '编辑角色' : '添加角色'}
-                width={'36vw'}
                 onClose={handleOnDrawerClose}
                 open={isDrawerOpen}
                 closable={!isSubmitting}
diff --git a/src/pages/System/Settings/index.tsx b/src/pages/System/Settings/index.tsx
index 927c742..ce09551 100644
--- a/src/pages/System/Settings/index.tsx
+++ b/src/pages/System/Settings/index.tsx
@@ -54,7 +54,7 @@ const Settings = () => {
     return (
         <>
             <FitFullscreen data-component={'system-settings'}>
-                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <FlexBox className={'root-col'}>
                             <Permission operationCode={'system:settings:query:base'}>
diff --git a/src/pages/System/Statistics/index.tsx b/src/pages/System/Statistics/index.tsx
index 853b0a8..1fa79ba 100644
--- a/src/pages/System/Statistics/index.tsx
+++ b/src/pages/System/Statistics/index.tsx
@@ -45,7 +45,7 @@ const Statistics = () => {
     return (
         <>
             <FitFullscreen data-component={'system-statistics'}>
-                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Permission operationCode={'system:statistics:query:usage'}>
                             <OnlineInfo />
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 9944054..076c758 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -758,12 +758,7 @@ const User = () => {
     ])
 
     const addAndEditForm = (
-        <AntdForm
-            form={form}
-            disabled={isDrawerSubmitting}
-            labelCol={{ span: 6 }}
-            wrapperCol={{ span: 18 }}
-        >
+        <AntdForm form={form} disabled={isDrawerSubmitting} layout={'vertical'}>
             <div
                 style={{
                     display: 'flex',
@@ -847,16 +842,11 @@ const User = () => {
                             }))}
                         />
                     </AntdForm.Item>
-                    <AntdForm.Item name={'verified'} label={'已验证'}>
-                        <AntdSwitch />
+                    <AntdForm.Item name={'verified'} label={'验证'}>
+                        <AntdSwitch checkedChildren={'已验证'} unCheckedChildren={'未验证'} />
                     </AntdForm.Item>
-                    <AntdForm.Item
-                        valuePropName={'checked'}
-                        name={'locking'}
-                        label={'锁定'}
-                        rules={[{ type: 'boolean' }]}
-                    >
-                        <AntdSwitch />
+                    <AntdForm.Item name={'locking'} label={'锁定'}>
+                        <AntdSwitch checkedChildren={'已锁定'} unCheckedChildren={'未锁定'} />
                     </AntdForm.Item>
                     <AntdForm.Item
                         name={'expiration'}
@@ -888,13 +878,8 @@ const User = () => {
                             style={{ width: '100%' }}
                         />
                     </AntdForm.Item>
-                    <AntdForm.Item
-                        valuePropName={'checked'}
-                        name={'enable'}
-                        label={'启用'}
-                        rules={[{ type: 'boolean' }]}
-                    >
-                        <AntdSwitch />
+                    <AntdForm.Item name={'enable'} label={'启用'}>
+                        <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
                     </AntdForm.Item>
                 </>
             )}
@@ -1012,7 +997,7 @@ const User = () => {
                 <HideScrollbar
                     style={{ padding: 30 }}
                     isShowVerticalScrollbar
-                    autoHideWaitingTime={500}
+                    autoHideWaitingTime={1000}
                 >
                     <FlexBox gap={20}>
                         {toolbar}
@@ -1022,7 +1007,6 @@ const User = () => {
             </FitFullscreen>
             <AntdDrawer
                 title={isDrawerEdit ? '编辑用户' : '新增用户'}
-                width={'36vw'}
                 onClose={handleOnDrawerClose}
                 open={isDrawerOpen}
                 closable={!isDrawerSubmitting}
diff --git a/src/pages/System/index.tsx b/src/pages/System/index.tsx
index 1fd60d2..c5cb37d 100644
--- a/src/pages/System/index.tsx
+++ b/src/pages/System/index.tsx
@@ -65,7 +65,7 @@ const System = () => {
     return (
         <>
             <FitFullscreen data-component={'system'}>
-                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Permission path={'/system/statistics'}>
                             <CommonCard icon={IconOxygenAnalysis} url={'statistics'}>

From f3dc9d0e4f59bfa767a77db444fd71e55a0c0645 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 19 Jan 2024 18:28:53 +0800
Subject: [PATCH 185/307] Optimize Playground

---
 .../Playground/CodeEditor/index.tsx           | 30 +++++++++++--------
 src/components/Playground/Output/index.tsx    |  3 ++
 src/components/Playground/files.ts            | 15 ++++++++++
 src/components/Playground/index.tsx           |  3 ++
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index f1f30ab..c4bd636 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -13,6 +13,7 @@ import Editor from '@/components/Playground/CodeEditor/Editor'
 
 interface CodeEditorProps {
     theme?: ITheme
+    showFileSelector?: boolean
     tsconfig?: ITsconfig
     files: IFiles
     readonly?: boolean
@@ -30,6 +31,7 @@ interface CodeEditorProps {
 
 const CodeEditor = ({
     theme,
+    showFileSelector = true,
     tsconfig,
     files,
     readonly,
@@ -119,19 +121,21 @@ const CodeEditor = ({
     return (
         <>
             <FlexBox data-component={'playground-code-editor'}>
-                <FileSelector
-                    files={files}
-                    readonly={readonly}
-                    notRemovableFiles={notRemovable}
-                    selectedFileName={
-                        onSelectedFileChange ? propsSelectedFileName : selectedFileName
-                    }
-                    onChange={handleOnChangeSelectedFile}
-                    onRemoveFile={handleOnRemoveFile}
-                    onUpdateFileName={handleOnUpdateFileName}
-                    onAddFile={handleOnAddFile}
-                    onError={handleOnError}
-                />
+                {showFileSelector && (
+                    <FileSelector
+                        files={files}
+                        readonly={readonly}
+                        notRemovableFiles={notRemovable}
+                        selectedFileName={
+                            onSelectedFileChange ? propsSelectedFileName : selectedFileName
+                        }
+                        onChange={handleOnChangeSelectedFile}
+                        onRemoveFile={handleOnRemoveFile}
+                        onUpdateFileName={handleOnUpdateFileName}
+                        onAddFile={handleOnAddFile}
+                        onError={handleOnError}
+                    />
+                )}
                 <Editor
                     tsconfig={tsconfig}
                     theme={theme}
diff --git a/src/components/Playground/Output/index.tsx b/src/components/Playground/Output/index.tsx
index 5b58410..7325852 100644
--- a/src/components/Playground/Output/index.tsx
+++ b/src/components/Playground/Output/index.tsx
@@ -36,4 +36,7 @@ const Output = ({ files, selectedFileName, importMap }: OutputProps) => {
     )
 }
 
+Output.Preview = Preview
+Output.Transform = Transform
+
 export default Output
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index dfa88ec..5a7b143 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -4,6 +4,7 @@ import DiagnosticsOptions = languages.json.DiagnosticsOptions
 import { IFile, IFiles, ILanguage } from '@/components/Playground/shared'
 import tsconfigSchema from '@/components/Playground/tsconfig-schema.json'
 import importMapSchema from '@/components/Playground/import-map-schema.json'
+import { formatByteSize } from '@/util/common.tsx'
 
 export const TS_CONFIG_FILE_NAME = 'tsconfig.json'
 export const MAIN_FILE_NAME = 'App.tsx'
@@ -41,6 +42,20 @@ export const base64ToStr = (base64: string) => {
     return ''
 }
 
+export const getFilesSize = (files: IFiles) =>
+    formatByteSize(strToU8(JSON.stringify(files)).byteLength)
+
+export const base64ToFiles = (base64: string): IFiles => {
+    try {
+        return JSON.parse(base64ToStr(base64)) as IFiles
+    } catch (e) {
+        console.error(e)
+        return {}
+    }
+}
+
+export const filesToBase64 = (files: IFiles): string => strToBase64(JSON.stringify(files))
+
 export const getFilesFromUrl = () => {
     let files: IFiles | undefined
     try {
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index 4eedc30..895ca03 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -98,4 +98,7 @@ const Playground = ({ initFiles, initImportMapRaw, initTsconfigRaw }: Playground
     )
 }
 
+Playground.CodeEditor = CodeEditor
+Playground.Output = Output
+
 export default Playground

From 2521b0c9519d3d02765bbe97c0330c5ced73f09c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 19 Jan 2024 18:29:31 +0800
Subject: [PATCH 186/307] Add ToolBase management page

---
 src/assets/css/pages/system/tools/base.scss |   8 +
 src/constants/urls.constants.ts             |   1 +
 src/global.d.ts                             |  20 +
 src/pages/System/Tools/Base.tsx             | 492 +++++++++++++++++++-
 src/pages/System/Tools/Category.tsx         |  28 +-
 src/services/system.tsx                     |  19 +-
 6 files changed, 554 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/css/pages/system/tools/base.scss

diff --git a/src/assets/css/pages/system/tools/base.scss b/src/assets/css/pages/system/tools/base.scss
new file mode 100644
index 0000000..627cc25
--- /dev/null
+++ b/src/assets/css/pages/system/tools/base.scss
@@ -0,0 +1,8 @@
+[data-component=system-tools-base] {
+  .root-content {
+    padding: 20px;
+    gap: 10px;
+    height: 100%;
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 84eb783..4b04f01 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -28,6 +28,7 @@ export const URL_SYS_STATISTICS_ACTIVE = `${URL_SYS_STATISTICS}/active`
 export const URL_SYS_TOOL = '/system/tool'
 export const URL_SYS_TOOL_CATEGORY = `${URL_SYS_TOOL}/category`
 export const URL_SYS_TOOL_BASE = `${URL_SYS_TOOL}/base`
+export const URL_SYS_TOOL_BASE_LIST = `${URL_SYS_TOOL_BASE}/list`
 export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
 
 export const URL_API_V1 = '/api/v1'
diff --git a/src/global.d.ts b/src/global.d.ts
index 408aaea..d771a46 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -491,10 +491,19 @@ interface ToolBaseVo {
     name: string
     source: ToolDataVo
     dist: ToolDataVo
+    enable: boolean
     createTime: string
     updateTime: string
 }
 
+interface ToolBaseAddEditParam {
+    id?: string
+    name?: string
+    source?: string
+    dist?: string
+    enable?: boolean
+}
+
 interface ToolTemplateVo {
     id: string
     name: string
@@ -502,10 +511,21 @@ interface ToolTemplateVo {
     baseId: string
     source: ToolDataVo
     dist: ToolDataVo
+    enable: boolean
     createTime: string
     updateTime: string
 }
 
+interface ToolTemplateAddEditParam {
+    id: string
+    name: string
+    ver: string
+    baseId: string
+    source?: string
+    dist?: string
+    enable: boolean
+}
+
 interface ToolVo {
     id: string
     name: string
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index 4870323..78278a6 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -1,5 +1,495 @@
+import '@/assets/css/pages/system/tools/base.scss'
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import Card from '@/components/common/Card.tsx'
+import CodeEditor from '@/components/Playground/CodeEditor'
+import { useState } from 'react'
+import { IFile, IFiles } from '@/components/Playground/shared.ts'
+import {
+    r_sys_tool_base_add,
+    r_sys_tool_base_delete,
+    r_sys_tool_base_get_one,
+    r_sys_tool_base_getList,
+    r_sys_tool_base_update
+} from '@/services/system.tsx'
+import {
+    COLOR_PRODUCTION,
+    DATABASE_DELETE_SUCCESS,
+    DATABASE_DUPLICATE_KEY,
+    DATABASE_INSERT_SUCCESS,
+    DATABASE_SELECT_SUCCESS,
+    DATABASE_UPDATE_SUCCESS
+} from '@/constants/common.constants.ts'
+import { utcToLocalTime } from '@/util/datetime.tsx'
+import Permission from '@/components/common/Permission.tsx'
+import { base64ToFiles, filesToBase64, getFilesSize } from '@/components/Playground/files.ts'
+
 const Base = () => {
-    return <>3</>
+    const [modal, contextHolder] = AntdModal.useModal()
+    const [form] = AntdForm.useForm<ToolBaseAddEditParam>()
+    const formValues = AntdForm.useWatch([], form)
+    const [newFormValues, setNewFormValues] = useState<ToolBaseAddEditParam>()
+    const [isLoading, setIsLoading] = useState(false)
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const [isDrawerEdit, setIsDrawerEdit] = useState(false)
+    const [submittable, setSubmittable] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [editingFiles, setEditingFiles] = useState<IFiles>()
+    const [editingFileName, setEditingFileName] = useState('')
+    const [hasEdited, setHasEdited] = useState(false)
+    const [baseData, setBaseData] = useState<ToolBaseVo[]>([])
+    const [baseDetailData, setBaseDetailData] = useState<Record<string, ToolBaseVo>>({})
+    const [baseDetailLoading, setBaseDetailLoading] = useState<Record<string, boolean>>({})
+
+    const handleOnAddBtnClick = () => {
+        setIsDrawerEdit(false)
+        setIsDrawerOpen(true)
+        form.setFieldValue('id', undefined)
+        form.setFieldValue('name', newFormValues?.name)
+        form.setFieldValue('enable', newFormValues?.enable ?? true)
+    }
+
+    const baseColumns: _ColumnsType<ToolBaseVo> = [
+        { title: '名称', dataIndex: 'name' },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            width: '20%',
+            align: 'center',
+            render: (value: string) => utcToLocalTime(value)
+        },
+        {
+            title: '修改时间',
+            dataIndex: 'updateTime',
+            width: '20%',
+            align: 'center',
+            render: (value: string) => utcToLocalTime(value)
+        },
+        {
+            title: '状态',
+            dataIndex: 'enable',
+            width: '5%',
+            align: 'center',
+            render: (value) =>
+                value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>
+        },
+        {
+            title: (
+                <>
+                    操作 (
+                    <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
+                        新增
+                    </a>
+                    )
+                </>
+            ),
+            dataIndex: 'enable',
+            width: '15em',
+            align: 'center',
+            render: (_, record) => (
+                <>
+                    <AntdSpace size={'middle'}>
+                        <Permission operationCode={'system:tool:modify:base'}>
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnEditBtnClick(record)}
+                            >
+                                编辑
+                            </a>
+                        </Permission>
+                        <Permission operationCode={'system:tool:delete:base'}>
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnDeleteBtnClick(record)}
+                            >
+                                删除
+                            </a>
+                        </Permission>
+                    </AntdSpace>
+                </>
+            )
+        }
+    ]
+
+    const handleOnEditBtnClick = (value: ToolBaseVo) => {
+        return () => {
+            setIsDrawerEdit(true)
+            setIsDrawerOpen(true)
+            form.setFieldValue('id', value.id)
+            form.setFieldValue('name', value.name)
+            form.setFieldValue('enable', value.enable)
+            void form.validateFields()
+        }
+    }
+
+    const handleOnDeleteBtnClick = (value: ToolBaseVo) => {
+        return () => {
+            modal
+                .confirm({
+                    title: '确定删除',
+                    content: `确定删除基板 ${value.name} 吗？`
+                })
+                .then(
+                    (confirmed) => {
+                        if (confirmed) {
+                            setIsLoading(true)
+
+                            void r_sys_tool_base_delete(value.id)
+                                .then((res) => {
+                                    const response = res.data
+                                    if (response.code === DATABASE_DELETE_SUCCESS) {
+                                        void message.success('删除成功')
+                                        setTimeout(() => {
+                                            getBase()
+                                        })
+                                    } else {
+                                        void message.error('删除失败，请稍后重试')
+                                    }
+                                })
+                                .finally(() => {
+                                    setIsLoading(false)
+                                })
+                        }
+                    },
+                    () => {}
+                )
+        }
+    }
+
+    const handleOnSubmit = () => {
+        if (isSubmitting) {
+            return
+        }
+        setIsSubmitting(true)
+
+        if (isDrawerEdit) {
+            void r_sys_tool_base_update(formValues)
+                .then((res) => {
+                    const response = res.data
+                    switch (response.code) {
+                        case DATABASE_UPDATE_SUCCESS:
+                            setIsDrawerOpen(false)
+                            void message.success('更新成功')
+                            getBase()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error('已存在相同名称的基板')
+                            break
+                        default:
+                            void message.error('更新失败，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        } else {
+            void r_sys_tool_base_add(formValues)
+                .then((res) => {
+                    const response = res.data
+                    switch (response.code) {
+                        case DATABASE_INSERT_SUCCESS:
+                            setIsDrawerOpen(false)
+                            void message.success('添加成功')
+                            setNewFormValues(undefined)
+                            getBase()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error('已存在相同名称的基板')
+                            break
+                        default:
+                            void message.error('添加失败，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        }
+    }
+
+    const handleOnDrawerClose = () => {
+        setIsDrawerOpen(false)
+    }
+
+    const getBase = () => {
+        if (isLoading) {
+            return
+        }
+        setIsLoading(true)
+
+        void r_sys_tool_base_getList()
+            .then((res) => {
+                const response = res.data
+                if (response.code === DATABASE_SELECT_SUCCESS) {
+                    setBaseData(response.data!)
+                } else {
+                    void message.error('获取失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoading(false)
+            })
+    }
+
+    const handleOnExpand = (expanded: boolean, record: ToolBaseVo) => {
+        if (!expanded) {
+            setEditingFiles(undefined)
+            return
+        }
+        getBaseDetail(record)
+    }
+
+    const getBaseDetail = (record: ToolBaseVo) => {
+        if (baseDetailLoading[record.id]) {
+            return
+        }
+        setBaseDetailLoading({ ...baseDetailLoading, [record.id]: true })
+
+        void r_sys_tool_base_get_one(record.id)
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setBaseDetailData({ ...baseDetailData, [record.id]: response.data! })
+                        break
+                    default:
+                        void message.error(`获取基板 ${record.name} 文件内容失败，请稍后重试`)
+                }
+            })
+            .finally(() => {
+                setBaseDetailLoading({ ...baseDetailLoading, [record.id]: false })
+            })
+    }
+
+    const expandedRowRender = (record: ToolBaseVo) => {
+        const baseDetailVo = baseDetailData[record.id]
+        let sourceFiles: IFiles | undefined = undefined
+        let sourceFileList: IFile[] = []
+        if (baseDetailVo) {
+            sourceFiles = base64ToFiles(baseDetailVo.source.data)
+            sourceFileList = Object.values(sourceFiles)
+        }
+
+        const detailColumns: _ColumnsType<IFile> = [
+            { title: '文件名', dataIndex: 'name' },
+            {
+                title: (
+                    <>
+                        文件总大小
+                        <br />
+                        {sourceFiles ? getFilesSize(sourceFiles) : 'Unknown'}
+                    </>
+                ),
+                width: '10em',
+                align: 'center'
+            },
+            {
+                title: (
+                    <>
+                        修改时间
+                        <br />
+                        {baseDetailVo ? utcToLocalTime(baseDetailVo.source.updateTime) : 'Unknown'}
+                    </>
+                ),
+                width: '15em',
+                align: 'center'
+            },
+            {
+                title: (
+                    <>
+                        操作 (<a style={{ color: COLOR_PRODUCTION }}>新增</a>)
+                    </>
+                ),
+                dataIndex: 'enable',
+                width: '10em',
+                align: 'center',
+                render: (_, record) => (
+                    <>
+                        <AntdSpace size={'middle'}>
+                            <Permission operationCode={'system:tool:modify:category'}>
+                                <a onClick={handleOnEditFile()} style={{ color: COLOR_PRODUCTION }}>
+                                    编辑
+                                </a>
+                            </Permission>
+                            <Permission operationCode={'system:tool:delete:category'}>
+                                <a
+                                    onClick={handleOnDeleteFile(record.name)}
+                                    style={{ color: COLOR_PRODUCTION }}
+                                >
+                                    删除
+                                </a>
+                            </Permission>
+                        </AntdSpace>
+                    </>
+                )
+            }
+        ]
+
+        const handleOnEditFile = () => {
+            return () => {}
+        }
+
+        const handleOnDeleteFile = (fileName: string) => {
+            return () => {
+                if (hasEdited) {
+                    void message.warning('删除文件前请先保存更改')
+                    return
+                }
+
+                modal
+                    .confirm({
+                        title: '确定删除',
+                        content: `确定删除文件 ${fileName} 吗？`
+                    })
+                    .then(
+                        (confirmed) => {
+                            if (confirmed) {
+                                setBaseDetailLoading({ ...baseDetailLoading, [record.id]: true })
+
+                                delete sourceFiles![fileName]
+
+                                void r_sys_tool_base_update({
+                                    id: record.id,
+                                    source: filesToBase64(sourceFiles!)
+                                })
+                                    .then((res) => {
+                                        const response = res.data
+                                        switch (response.code) {
+                                            case DATABASE_UPDATE_SUCCESS:
+                                                void message.success('删除成功')
+                                                setTimeout(() => {
+                                                    getBaseDetail(record)
+                                                })
+                                                break
+                                            default:
+                                                void message.error('删除失败，请稍后重试')
+                                        }
+                                    })
+                                    .finally(() => {
+                                        setBaseDetailLoading({
+                                            ...baseDetailLoading,
+                                            [record.id]: false
+                                        })
+                                    })
+                            }
+                        },
+                        () => {}
+                    )
+            }
+        }
+
+        return (
+            <Card>
+                <AntdTable
+                    loading={baseDetailLoading[record.id]}
+                    dataSource={sourceFileList}
+                    columns={detailColumns}
+                    pagination={false}
+                />
+            </Card>
+        )
+    }
+
+    useEffect(() => {
+        form.validateFields({ validateOnly: true }).then(
+            () => {
+                setSubmittable(true)
+            },
+            () => {
+                setSubmittable(false)
+            }
+        )
+
+        if (!isDrawerEdit && formValues) {
+            setNewFormValues({
+                name: formValues.name,
+                enable: formValues.enable
+            })
+        }
+    }, [formValues])
+
+    useEffect(() => {
+        getBase()
+    }, [])
+
+    const drawerToolbar = (
+        <AntdSpace>
+            <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
+                取消
+            </AntdButton>
+            <AntdButton
+                type={'primary'}
+                disabled={!submittable}
+                loading={isSubmitting}
+                onClick={handleOnSubmit}
+            >
+                提交
+            </AntdButton>
+        </AntdSpace>
+    )
+
+    const addAndEditForm = (
+        <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
+            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+                <AntdInput disabled />
+            </AntdForm.Item>
+            <AntdForm.Item
+                name={'name'}
+                label={'名称'}
+                rules={[{ required: true, whitespace: false }]}
+            >
+                <AntdInput allowClear />
+            </AntdForm.Item>
+            <AntdForm.Item name={'enable'} label={'状态'}>
+                <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
+            </AntdForm.Item>
+        </AntdForm>
+    )
+
+    return (
+        <>
+            <FitFullscreen data-component={'system-tools-base'}>
+                <FlexBox direction={'horizontal'} className={'root-content'}>
+                    <HideScrollbar>
+                        <Card>
+                            <AntdTable
+                                dataSource={baseData}
+                                columns={baseColumns}
+                                rowKey={(record) => record.id}
+                                loading={isLoading}
+                                pagination={false}
+                                expandable={{
+                                    expandedRowRender,
+                                    onExpand: handleOnExpand
+                                }}
+                            />
+                        </Card>
+                    </HideScrollbar>
+                    {editingFiles && (
+                        <Card>
+                            <CodeEditor
+                                files={editingFiles}
+                                selectedFileName={editingFileName}
+                                onSelectedFileChange={() => {}}
+                                showFileSelector={false}
+                            />
+                        </Card>
+                    )}
+                </FlexBox>
+                <AntdDrawer
+                    title={isDrawerEdit ? '编辑基板' : '添加基板'}
+                    onClose={handleOnDrawerClose}
+                    open={isDrawerOpen}
+                    closable={!isSubmitting}
+                    maskClosable={!isSubmitting}
+                    extra={drawerToolbar}
+                >
+                    {addAndEditForm}
+                </AntdDrawer>
+            </FitFullscreen>
+            {contextHolder}
+        </>
+    )
 }
 
 export default Base
diff --git a/src/pages/System/Tools/Category.tsx b/src/pages/System/Tools/Category.tsx
index 6ac6519..f7dd19c 100644
--- a/src/pages/System/Tools/Category.tsx
+++ b/src/pages/System/Tools/Category.tsx
@@ -38,17 +38,6 @@ const Category = () => {
         form.setFieldValue('enable', newFormValues?.enable ?? true)
     }
 
-    const handleOnEditBtnClick = (value: ToolCategoryVo) => {
-        return () => {
-            setIsDrawerEdit(true)
-            setIsDrawerOpen(true)
-            form.setFieldValue('id', value.id)
-            form.setFieldValue('name', value.name)
-            form.setFieldValue('enable', value.enable)
-            void form.validateFields()
-        }
-    }
-
     const categoryColumns: _ColumnsType<ToolCategoryVo> = [
         {
             title: 'ID',
@@ -84,7 +73,11 @@ const Category = () => {
         {
             title: (
                 <>
-                    操作 (<a onClick={handleOnAddBtnClick}>新增</a>)
+                    操作 (
+                    <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
+                        新增
+                    </a>
+                    )
                 </>
             ),
             dataIndex: 'enable',
@@ -115,6 +108,17 @@ const Category = () => {
         }
     ]
 
+    const handleOnEditBtnClick = (value: ToolCategoryVo) => {
+        return () => {
+            setIsDrawerEdit(true)
+            setIsDrawerOpen(true)
+            form.setFieldValue('id', value.id)
+            form.setFieldValue('name', value.name)
+            form.setFieldValue('enable', value.enable)
+            void form.validateFields()
+        }
+    }
+
     const handleOnDeleteBtnClick = (value: ToolCategoryVo) => {
         return () => {
             modal
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 690bb21..9271605 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -17,7 +17,9 @@ import {
     URL_SYS_STATISTICS_ACTIVE,
     URL_SYS_SETTINGS_BASE,
     URL_SYS_SETTINGS_SENSITIVE,
-    URL_SYS_TOOL_CATEGORY
+    URL_SYS_TOOL_CATEGORY,
+    URL_SYS_TOOL_BASE,
+    URL_SYS_TOOL_BASE_LIST
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -125,3 +127,18 @@ export const r_sys_tool_category_update = (param: ToolCategoryAddEditParam) =>
 
 export const r_sys_tool_category_delete = (id: string) =>
     request.delete(`${URL_SYS_TOOL_CATEGORY}/${id}`)
+
+export const r_sys_tool_base_getList = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE_LIST)
+
+export const r_sys_tool_base_get = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE)
+
+export const r_sys_tool_base_get_one = (id: string) =>
+    request.get<ToolBaseVo>(`${URL_SYS_TOOL_BASE}/${id}`)
+
+export const r_sys_tool_base_add = (param: ToolBaseAddEditParam) =>
+    request.post(URL_SYS_TOOL_BASE, param)
+
+export const r_sys_tool_base_update = (param: ToolBaseAddEditParam) =>
+    request.put(URL_SYS_TOOL_BASE, param)
+
+export const r_sys_tool_base_delete = (id: string) => request.delete(`${URL_SYS_TOOL_BASE}/${id}`)

From 3a973a3c93f79a0d194b0fc1ceced93a34574822 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 21 Jan 2024 23:43:10 +0800
Subject: [PATCH 187/307] Optimize ToolBase management page

---
 src/assets/css/pages/system/tools/base.scss |   7 +
 src/pages/System/Tools/Base.tsx             | 226 +++++++++++++++++---
 2 files changed, 209 insertions(+), 24 deletions(-)

diff --git a/src/assets/css/pages/system/tools/base.scss b/src/assets/css/pages/system/tools/base.scss
index 627cc25..b92b36d 100644
--- a/src/assets/css/pages/system/tools/base.scss
+++ b/src/assets/css/pages/system/tools/base.scss
@@ -1,8 +1,15 @@
+@use '@/assets/css/constants' as constants;
+
 [data-component=system-tools-base] {
   .root-content {
     padding: 20px;
     gap: 10px;
     height: 100%;
     width: 100%;
+
+    .has-edited::after {
+      content: '*';
+      color: constants.$font-secondary-color;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index 78278a6..f4968a1 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -5,7 +5,7 @@ import HideScrollbar from '@/components/common/HideScrollbar.tsx'
 import Card from '@/components/common/Card.tsx'
 import CodeEditor from '@/components/Playground/CodeEditor'
 import { useState } from 'react'
-import { IFile, IFiles } from '@/components/Playground/shared.ts'
+import { IFile, IFiles, ITsconfig } from '@/components/Playground/shared.ts'
 import {
     r_sys_tool_base_add,
     r_sys_tool_base_delete,
@@ -23,26 +23,39 @@ import {
 } from '@/constants/common.constants.ts'
 import { utcToLocalTime } from '@/util/datetime.tsx'
 import Permission from '@/components/common/Permission.tsx'
-import { base64ToFiles, filesToBase64, getFilesSize } from '@/components/Playground/files.ts'
+import {
+    base64ToFiles,
+    fileNameToLanguage,
+    filesToBase64,
+    getFilesSize,
+    TS_CONFIG_FILE_NAME
+} from '@/components/Playground/files.ts'
 
 const Base = () => {
     const [modal, contextHolder] = AntdModal.useModal()
     const [form] = AntdForm.useForm<ToolBaseAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
+    const [addFileForm] = AntdForm.useForm<{ fileName: string }>()
     const [newFormValues, setNewFormValues] = useState<ToolBaseAddEditParam>()
     const [isLoading, setIsLoading] = useState(false)
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
     const [isDrawerEdit, setIsDrawerEdit] = useState(false)
     const [submittable, setSubmittable] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
-    const [editingFiles, setEditingFiles] = useState<IFiles>()
+    const [editingBaseId, setEditingBaseId] = useState<string>('')
+    const [editingFiles, setEditingFiles] = useState<Record<string, IFiles>>({})
     const [editingFileName, setEditingFileName] = useState('')
-    const [hasEdited, setHasEdited] = useState(false)
+    const [hasEdited, setHasEdited] = useState<Record<string, boolean>>({})
     const [baseData, setBaseData] = useState<ToolBaseVo[]>([])
     const [baseDetailData, setBaseDetailData] = useState<Record<string, ToolBaseVo>>({})
     const [baseDetailLoading, setBaseDetailLoading] = useState<Record<string, boolean>>({})
+    const [tsconfig, setTsconfig] = useState<ITsconfig>()
 
     const handleOnAddBtnClick = () => {
+        if (Object.keys(hasEdited).length) {
+            void message.warning('新增前请保存修改')
+            return
+        }
         setIsDrawerEdit(false)
         setIsDrawerOpen(true)
         form.setFieldValue('id', undefined)
@@ -51,7 +64,14 @@ const Base = () => {
     }
 
     const baseColumns: _ColumnsType<ToolBaseVo> = [
-        { title: '名称', dataIndex: 'name' },
+        {
+            title: '名称',
+            render: (_, record) => (
+                <span className={hasEdited[record.id] ? 'has-edited' : undefined}>
+                    {record.name}
+                </span>
+            )
+        },
         {
             title: '创建时间',
             dataIndex: 'createTime',
@@ -90,6 +110,16 @@ const Base = () => {
             render: (_, record) => (
                 <>
                     <AntdSpace size={'middle'}>
+                        {hasEdited[record.id] && (
+                            <Permission operationCode={'system:tool:modify:base'}>
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnSaveBtnClick(record)}
+                                >
+                                    保存
+                                </a>
+                            </Permission>
+                        )}
                         <Permission operationCode={'system:tool:modify:base'}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
@@ -112,8 +142,42 @@ const Base = () => {
         }
     ]
 
+    const handleOnSaveBtnClick = (value: ToolBaseVo) => {
+        return () => {
+            if (isLoading) {
+                return
+            }
+            setIsLoading(true)
+
+            const source = filesToBase64(editingFiles[value.id])
+
+            void r_sys_tool_base_update({ id: value.id, source })
+                .then((res) => {
+                    const response = res.data
+                    switch (response.code) {
+                        case DATABASE_UPDATE_SUCCESS:
+                            void message.success('保存成功')
+                            delete hasEdited[value.id]
+                            setHasEdited({ ...hasEdited })
+                            getBaseDetail(value)
+                            break
+                        default:
+                            void message.error('出错了，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsLoading(false)
+                })
+        }
+    }
+
     const handleOnEditBtnClick = (value: ToolBaseVo) => {
         return () => {
+            if (Object.keys(hasEdited).length) {
+                void message.warning('编辑前请保存修改')
+                return
+            }
+
             setIsDrawerEdit(true)
             setIsDrawerOpen(true)
             form.setFieldValue('id', value.id)
@@ -140,6 +204,10 @@ const Base = () => {
                                     const response = res.data
                                     if (response.code === DATABASE_DELETE_SUCCESS) {
                                         void message.success('删除成功')
+                                        setHasEdited({})
+                                        setEditingFileName('')
+                                        setEditingFiles({})
+                                        setEditingBaseId('')
                                         setTimeout(() => {
                                             getBase()
                                         })
@@ -233,14 +301,14 @@ const Base = () => {
 
     const handleOnExpand = (expanded: boolean, record: ToolBaseVo) => {
         if (!expanded) {
-            setEditingFiles(undefined)
+            setEditingFileName('')
             return
         }
         getBaseDetail(record)
     }
 
     const getBaseDetail = (record: ToolBaseVo) => {
-        if (baseDetailLoading[record.id]) {
+        if (baseDetailLoading[record.id] || hasEdited[record.id]) {
             return
         }
         setBaseDetailLoading({ ...baseDetailLoading, [record.id]: true })
@@ -270,6 +338,95 @@ const Base = () => {
             sourceFileList = Object.values(sourceFiles)
         }
 
+        const handleOnAddFile = () => {
+            if (Object.keys(hasEdited).length) {
+                void message.warning('新建文件前请先保存更改')
+                return
+            }
+
+            void modal.confirm({
+                title: '新建文件',
+                content: (
+                    <AntdForm form={addFileForm}>
+                        <AntdForm.Item
+                            name={'fileName'}
+                            label={'文件名'}
+                            style={{ marginTop: 10 }}
+                            rules={[
+                                { required: true },
+                                {
+                                    pattern: /\.(jsx|tsx|js|ts|css|json)$/,
+                                    message: '仅支持 *.jsx, *.tsx, *.js, *.ts, *.css, *.json 文件'
+                                },
+                                ({ getFieldValue }) => ({
+                                    validator() {
+                                        const newFileName = getFieldValue('fileName') as string
+                                        if (Object.keys(sourceFiles!).includes(newFileName)) {
+                                            return Promise.reject(new Error('文件已存在'))
+                                        }
+                                        return Promise.resolve()
+                                    }
+                                })
+                            ]}
+                        >
+                            <AntdInput />
+                        </AntdForm.Item>
+                    </AntdForm>
+                ),
+                onOk: () =>
+                    addFileForm.validateFields().then(
+                        () => {
+                            return new Promise((resolve) => {
+                                const newFileName = addFileForm.getFieldValue('fileName') as string
+
+                                setBaseDetailLoading({ ...baseDetailLoading, [record.id]: true })
+
+                                sourceFiles = {
+                                    ...sourceFiles,
+                                    [newFileName]: {
+                                        name: newFileName,
+                                        language: fileNameToLanguage(newFileName),
+                                        value: ''
+                                    }
+                                }
+
+                                void r_sys_tool_base_update({
+                                    id: record.id,
+                                    source: filesToBase64(sourceFiles)
+                                })
+                                    .then((res) => {
+                                        addFileForm.setFieldValue('fileName', '')
+                                        const response = res.data
+                                        switch (response.code) {
+                                            case DATABASE_UPDATE_SUCCESS:
+                                                void message.success('添加成功')
+                                                setTimeout(() => {
+                                                    getBaseDetail(record)
+                                                })
+                                                resolve(true)
+                                                break
+                                            default:
+                                                void message.error('添加失败，请稍后重试')
+                                                resolve(true)
+                                        }
+                                    })
+                                    .finally(() => {
+                                        setBaseDetailLoading({
+                                            ...baseDetailLoading,
+                                            [record.id]: false
+                                        })
+                                    })
+                            })
+                        },
+                        () => {
+                            return new Promise((_, reject) => {
+                                reject('请输入文件名')
+                            })
+                        }
+                    )
+            })
+        }
+
         const detailColumns: _ColumnsType<IFile> = [
             { title: '文件名', dataIndex: 'name' },
             {
@@ -286,18 +443,11 @@ const Base = () => {
             {
                 title: (
                     <>
-                        修改时间
-                        <br />
-                        {baseDetailVo ? utcToLocalTime(baseDetailVo.source.updateTime) : 'Unknown'}
-                    </>
-                ),
-                width: '15em',
-                align: 'center'
-            },
-            {
-                title: (
-                    <>
-                        操作 (<a style={{ color: COLOR_PRODUCTION }}>新增</a>)
+                        操作 (
+                        <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddFile}>
+                            新增
+                        </a>
+                        )
                     </>
                 ),
                 dataIndex: 'enable',
@@ -307,7 +457,10 @@ const Base = () => {
                     <>
                         <AntdSpace size={'middle'}>
                             <Permission operationCode={'system:tool:modify:category'}>
-                                <a onClick={handleOnEditFile()} style={{ color: COLOR_PRODUCTION }}>
+                                <a
+                                    onClick={handleOnEditFile(record.name)}
+                                    style={{ color: COLOR_PRODUCTION }}
+                                >
                                     编辑
                                 </a>
                             </Permission>
@@ -325,8 +478,17 @@ const Base = () => {
             }
         ]
 
-        const handleOnEditFile = () => {
-            return () => {}
+        const handleOnEditFile = (fileName: string) => {
+            return () => {
+                if (editingBaseId !== record.id) {
+                    setTsconfig(undefined)
+                }
+                if (!hasEdited[record.id]) {
+                    setEditingFiles({ ...editingFiles, [record.id]: sourceFiles! })
+                }
+                setEditingBaseId(record.id)
+                setEditingFileName(fileName)
+            }
         }
 
         const handleOnDeleteFile = (fileName: string) => {
@@ -390,6 +552,20 @@ const Base = () => {
         )
     }
 
+    const handleOnChangeFileContent = (_content: string, _fileName: string, files: IFiles) => {
+        setEditingFiles({ ...editingFiles, [editingBaseId]: files })
+        setHasEdited({ ...hasEdited, [editingBaseId]: true })
+    }
+
+    useEffect(() => {
+        try {
+            const tsconfigStr = editingFiles[editingBaseId][TS_CONFIG_FILE_NAME].value
+            setTsconfig(JSON.parse(tsconfigStr) as ITsconfig)
+        } catch (e) {
+            /* empty */
+        }
+    }, [editingFiles, editingBaseId])
+
     useEffect(() => {
         form.validateFields({ validateOnly: true }).then(
             () => {
@@ -465,13 +641,15 @@ const Base = () => {
                             />
                         </Card>
                     </HideScrollbar>
-                    {editingFiles && (
+                    {editingFileName && (
                         <Card>
                             <CodeEditor
-                                files={editingFiles}
+                                files={editingFiles[editingBaseId]}
                                 selectedFileName={editingFileName}
                                 onSelectedFileChange={() => {}}
+                                onChangeFileContent={handleOnChangeFileContent}
                                 showFileSelector={false}
+                                tsconfig={tsconfig}
                             />
                         </Card>
                     )}

From 8a954abedfbfff431a1f195a2b7d65d17c87a422 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 22 Jan 2024 16:06:09 +0800
Subject: [PATCH 188/307] Optimize CodeEditor

---
 src/components/Playground/CodeEditor/Editor/index.tsx | 4 +++-
 src/components/Playground/files.ts                    | 1 -
 src/components/Playground/tsconfig-schema.json        | 5 +++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx
index 7dcedd3..c1f71fb 100644
--- a/src/components/Playground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -48,7 +48,8 @@ const Editor = ({
                 tsconfig.compilerOptions
             )
 
-        files &&
+        if (files) {
+            monaco.editor.getModels().forEach((model) => model.dispose())
             Object.entries(files).forEach(([key]) => {
                 if (!monaco.editor.getModel(monaco.Uri.parse(`file:///${key}`))) {
                     monaco.editor.createModel(
@@ -58,6 +59,7 @@ const Editor = ({
                     )
                 }
             })
+        }
     }
 
     const handleOnEditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index 5a7b143..ec68d81 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -49,7 +49,6 @@ export const base64ToFiles = (base64: string): IFiles => {
     try {
         return JSON.parse(base64ToStr(base64)) as IFiles
     } catch (e) {
-        console.error(e)
         return {}
     }
 }
diff --git a/src/components/Playground/tsconfig-schema.json b/src/components/Playground/tsconfig-schema.json
index c6fb943..f2556a1 100644
--- a/src/components/Playground/tsconfig-schema.json
+++ b/src/components/Playground/tsconfig-schema.json
@@ -139,6 +139,7 @@
       },
       "jsx": {
         "description": "Specify what JSX code is generated.",
+        "type": "number",
         "enum": [0, 1, 2, 3, 4, 5],
         "markdownDescription": "Specify what JSX code is generated.\n\n0 = none\n\n1 = preserve\n\n2 = react\n\n3 = react-native\n\n4 = react-jsx\n\n5 = react-jsxdev"
       },
@@ -316,7 +317,7 @@
       },
       "newLine": {
         "description": "Set the newline character for emitting files.",
-        "type": "string",
+        "type": "number",
         "enum": [0, 1],
         "markdownDescription": "Set the newline character for emitting files.\n\n0 = CarriageReturnLineFeed\n\n1 = LineFeed"
       },
@@ -558,7 +559,7 @@
       "target": {
         "description": "Set the JavaScript language version for emitted JavaScript and include compatible library declarations.",
         "type": "number",
-        "default": "ES3",
+        "default": 0,
         "enum": [0, 1, 2, 3, 4, 5, 6, 7, 99, 100, 99],
         "markdownDescription": "Set the JavaScript language version for emitted JavaScript and include compatible library declarations.\n\n0 = ES3\n\n1 = ES5\n\n2 = ES2015\n\n3 = ES2016\n\n4 = ES2017\n\n5 = ES2018\n\n6 = ES2019\n\n7 = ES2020\n\n99 = ESNext\n\n100 = JSON\n\n99 = Latest"
       },

From 691f13381d637bb6a50e03b51ec96e86a889a17d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 22 Jan 2024 16:54:42 +0800
Subject: [PATCH 189/307] Add rename file to ToolBase management page

---
 src/assets/css/pages/system/tools/base.scss |  28 ++-
 src/pages/System/Tools/Base.tsx             | 230 ++++++++++++++++----
 vite.config.ts                              |   4 +-
 3 files changed, 222 insertions(+), 40 deletions(-)

diff --git a/src/assets/css/pages/system/tools/base.scss b/src/assets/css/pages/system/tools/base.scss
index b92b36d..2513936 100644
--- a/src/assets/css/pages/system/tools/base.scss
+++ b/src/assets/css/pages/system/tools/base.scss
@@ -2,7 +2,7 @@
 
 [data-component=system-tools-base] {
   .root-content {
-    padding: 20px;
+    padding: 30px;
     gap: 10px;
     height: 100%;
     width: 100%;
@@ -11,5 +11,31 @@
       content: '*';
       color: constants.$font-secondary-color;
     }
+
+    >*:first-child {
+      height: fit-content;
+    }
+
+    > *:nth-child(2) {
+      position: sticky;
+      top: 20px;
+      height: calc(100vh - 40px);
+    }
+
+    .close-editor-btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background-color: constants.$font-secondary-color;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      color: white;
+      box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
+      cursor: pointer;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index f4968a1..7734e0e 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -1,18 +1,5 @@
+import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/tools/base.scss'
-import FitFullscreen from '@/components/common/FitFullscreen.tsx'
-import FlexBox from '@/components/common/FlexBox.tsx'
-import HideScrollbar from '@/components/common/HideScrollbar.tsx'
-import Card from '@/components/common/Card.tsx'
-import CodeEditor from '@/components/Playground/CodeEditor'
-import { useState } from 'react'
-import { IFile, IFiles, ITsconfig } from '@/components/Playground/shared.ts'
-import {
-    r_sys_tool_base_add,
-    r_sys_tool_base_delete,
-    r_sys_tool_base_get_one,
-    r_sys_tool_base_getList,
-    r_sys_tool_base_update
-} from '@/services/system.tsx'
 import {
     COLOR_PRODUCTION,
     DATABASE_DELETE_SUCCESS,
@@ -20,22 +7,40 @@ import {
     DATABASE_INSERT_SUCCESS,
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
-} from '@/constants/common.constants.ts'
+} from '@/constants/common.constants'
 import { utcToLocalTime } from '@/util/datetime.tsx'
-import Permission from '@/components/common/Permission.tsx'
+import {
+    r_sys_tool_base_add,
+    r_sys_tool_base_delete,
+    r_sys_tool_base_get_one,
+    r_sys_tool_base_getList,
+    r_sys_tool_base_update
+} from '@/services/system'
+import { IFile, IFiles, ITsconfig } from '@/components/Playground/shared'
 import {
     base64ToFiles,
     fileNameToLanguage,
     filesToBase64,
     getFilesSize,
     TS_CONFIG_FILE_NAME
-} from '@/components/Playground/files.ts'
+} from '@/components/Playground/files'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import FlexBox from '@/components/common/FlexBox'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import Card from '@/components/common/Card'
+import CodeEditor from '@/components/Playground/CodeEditor'
+import Permission from '@/components/common/Permission'
 
 const Base = () => {
+    const blocker = useBlocker(
+        ({ currentLocation, nextLocation }) =>
+            currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
+    )
     const [modal, contextHolder] = AntdModal.useModal()
     const [form] = AntdForm.useForm<ToolBaseAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
     const [addFileForm] = AntdForm.useForm<{ fileName: string }>()
+    const [renameFileForm] = AntdForm.useForm<{ fileName: string }>()
     const [newFormValues, setNewFormValues] = useState<ToolBaseAddEditParam>()
     const [isLoading, setIsLoading] = useState(false)
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -51,6 +56,19 @@ const Base = () => {
     const [baseDetailLoading, setBaseDetailLoading] = useState<Record<string, boolean>>({})
     const [tsconfig, setTsconfig] = useState<ITsconfig>()
 
+    useBeforeUnload(
+        useCallback(
+            (event) => {
+                if (Object.keys(hasEdited).length) {
+                    event.preventDefault()
+                    event.returnValue = ''
+                }
+            },
+            [hasEdited]
+        ),
+        { capture: true }
+    )
+
     const handleOnAddBtnClick = () => {
         if (Object.keys(hasEdited).length) {
             void message.warning('新增前请保存修改')
@@ -275,6 +293,10 @@ const Base = () => {
         }
     }
 
+    const handleOnCloseBtnClick = () => {
+        setEditingFileName('')
+    }
+
     const handleOnDrawerClose = () => {
         setIsDrawerOpen(false)
     }
@@ -301,7 +323,6 @@ const Base = () => {
 
     const handleOnExpand = (expanded: boolean, record: ToolBaseVo) => {
         if (!expanded) {
-            setEditingFileName('')
             return
         }
         getBaseDetail(record)
@@ -361,7 +382,11 @@ const Base = () => {
                                 ({ getFieldValue }) => ({
                                     validator() {
                                         const newFileName = getFieldValue('fileName') as string
-                                        if (Object.keys(sourceFiles!).includes(newFileName)) {
+                                        if (
+                                            Object.keys(sourceFiles!)
+                                                .map((item) => item.toLowerCase())
+                                                .includes(newFileName.toLowerCase())
+                                        ) {
                                             return Promise.reject(new Error('文件已存在'))
                                         }
                                         return Promise.resolve()
@@ -451,7 +476,7 @@ const Base = () => {
                     </>
                 ),
                 dataIndex: 'enable',
-                width: '10em',
+                width: '12em',
                 align: 'center',
                 render: (_, record) => (
                     <>
@@ -464,6 +489,14 @@ const Base = () => {
                                     编辑
                                 </a>
                             </Permission>
+                            <Permission operationCode={'system:tool:modify:category'}>
+                                <a
+                                    onClick={handleOnRenameFile(record.name)}
+                                    style={{ color: COLOR_PRODUCTION }}
+                                >
+                                    重命名
+                                </a>
+                            </Permission>
                             <Permission operationCode={'system:tool:delete:category'}>
                                 <a
                                     onClick={handleOnDeleteFile(record.name)}
@@ -491,9 +524,114 @@ const Base = () => {
             }
         }
 
+        const handleOnRenameFile = (fileName: string) => {
+            return () => {
+                if (Object.keys(hasEdited).length) {
+                    void message.warning('重命名文件前请先保存更改')
+                    return
+                }
+                renameFileForm.setFieldValue('fileName', fileName)
+                void modal.confirm({
+                    title: '重命名文件',
+                    content: (
+                        <AntdForm form={renameFileForm}>
+                            <AntdForm.Item
+                                name={'fileName'}
+                                label={'新文件名'}
+                                style={{ marginTop: 10 }}
+                                rules={[
+                                    { required: true },
+                                    {
+                                        pattern: /\.(jsx|tsx|js|ts|css|json)$/,
+                                        message:
+                                            '仅支持 *.jsx, *.tsx, *.js, *.ts, *.css, *.json 文件'
+                                    },
+                                    ({ getFieldValue }) => ({
+                                        validator() {
+                                            const newFileName = getFieldValue('fileName') as string
+                                            if (
+                                                Object.keys(sourceFiles!)
+                                                    .map((item) => item.toLowerCase())
+                                                    .includes(newFileName?.toLowerCase()) &&
+                                                newFileName.toLowerCase() !== fileName.toLowerCase()
+                                            ) {
+                                                return Promise.reject(new Error('文件已存在'))
+                                            }
+
+                                            return Promise.resolve()
+                                        }
+                                    })
+                                ]}
+                            >
+                                <AntdInput />
+                            </AntdForm.Item>
+                        </AntdForm>
+                    ),
+                    onOk: () =>
+                        renameFileForm.validateFields().then(
+                            () => {
+                                return new Promise((resolve) => {
+                                    const newFileName = renameFileForm.getFieldValue(
+                                        'fileName'
+                                    ) as string
+                                    const temp = sourceFiles![fileName].value
+                                    delete sourceFiles![fileName]
+
+                                    sourceFiles = {
+                                        ...sourceFiles,
+                                        [newFileName]: {
+                                            name: newFileName,
+                                            language: fileNameToLanguage(newFileName),
+                                            value: temp
+                                        }
+                                    }
+
+                                    void r_sys_tool_base_update({
+                                        id: record.id,
+                                        source: filesToBase64(sourceFiles)
+                                    })
+                                        .then((res) => {
+                                            const response = res.data
+                                            switch (response.code) {
+                                                case DATABASE_UPDATE_SUCCESS:
+                                                    void message.success('重命名成功')
+                                                    if (
+                                                        editingBaseId === record.id &&
+                                                        editingFileName === fileName
+                                                    ) {
+                                                        setEditingFileName('')
+                                                    }
+                                                    setTimeout(() => {
+                                                        getBaseDetail(record)
+                                                    })
+                                                    break
+                                                default:
+                                                    void message.error('重命名失败，请稍后重试')
+                                            }
+                                        })
+                                        .finally(() => {
+                                            setBaseDetailLoading({
+                                                ...baseDetailLoading,
+                                                [record.id]: false
+                                            })
+                                        })
+
+                                    resolve(true)
+                                })
+                            },
+                            () => {
+                                return new Promise((_, reject) => {
+                                    reject('请输入文件名')
+                                })
+                            }
+                        )
+                })
+            }
+        }
+
         const handleOnDeleteFile = (fileName: string) => {
             return () => {
-                if (hasEdited) {
+                if (Object.keys(hasEdited).length) {
                     void message.warning('删除文件前请先保存更改')
                     return
                 }
@@ -519,6 +657,12 @@ const Base = () => {
                                         switch (response.code) {
                                             case DATABASE_UPDATE_SUCCESS:
                                                 void message.success('删除成功')
+                                                if (
+                                                    editingBaseId === record.id &&
+                                                    editingFileName === fileName
+                                                ) {
+                                                    setEditingFileName('')
+                                                }
                                                 setTimeout(() => {
                                                     getBaseDetail(record)
                                                 })
@@ -547,6 +691,7 @@ const Base = () => {
                     dataSource={sourceFileList}
                     columns={detailColumns}
                     pagination={false}
+                    rowKey={(record) => record.name}
                 />
             </Card>
         )
@@ -625,8 +770,8 @@ const Base = () => {
     return (
         <>
             <FitFullscreen data-component={'system-tools-base'}>
-                <FlexBox direction={'horizontal'} className={'root-content'}>
-                    <HideScrollbar>
+                <HideScrollbar>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Card>
                             <AntdTable
                                 dataSource={baseData}
@@ -640,20 +785,23 @@ const Base = () => {
                                 }}
                             />
                         </Card>
-                    </HideScrollbar>
-                    {editingFileName && (
-                        <Card>
-                            <CodeEditor
-                                files={editingFiles[editingBaseId]}
-                                selectedFileName={editingFileName}
-                                onSelectedFileChange={() => {}}
-                                onChangeFileContent={handleOnChangeFileContent}
-                                showFileSelector={false}
-                                tsconfig={tsconfig}
-                            />
-                        </Card>
-                    )}
-                </FlexBox>
+                        {editingFileName && (
+                            <Card>
+                                <CodeEditor
+                                    files={editingFiles[editingBaseId]}
+                                    selectedFileName={editingFileName}
+                                    onSelectedFileChange={() => {}}
+                                    onChangeFileContent={handleOnChangeFileContent}
+                                    showFileSelector={false}
+                                    tsconfig={tsconfig}
+                                />
+                                <div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
+                                    <Icon component={IconOxygenClose} />
+                                </div>
+                            </Card>
+                        )}
+                    </FlexBox>
+                </HideScrollbar>
                 <AntdDrawer
                     title={isDrawerEdit ? '编辑基板' : '添加基板'}
                     onClose={handleOnDrawerClose}
@@ -666,6 +814,14 @@ const Base = () => {
                 </AntdDrawer>
             </FitFullscreen>
             {contextHolder}
+            <AntdModal
+                open={blocker.state === 'blocked'}
+                title={'未保存'}
+                onOk={() => blocker.proceed?.()}
+                onCancel={() => blocker.reset?.()}
+            >
+                离开此页面将丢失所有未保存数据，是否继续？
+            </AntdModal>
         </>
     )
 }
diff --git a/vite.config.ts b/vite.config.ts
index 5981025..9bde5ad 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,8 +27,8 @@ export default defineConfig({
                 'react-router-dom',
                 {
                     react: ['Suspense', 'createContext'],
-                    'react-router': ['useMatches', 'RouterProvider'],
-                    'react-router-dom': ['createBrowserRouter'],
+                    'react-router': ['useMatches', 'RouterProvider', 'useBlocker'],
+                    'react-router-dom': ['createBrowserRouter', 'useBeforeUnload'],
                     antd: ['message', 'notification']
                 },
                 {

From 027519aa60cacedb1fbe33bf54b1b2a49a3a34dd Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 22 Jan 2024 18:19:31 +0800
Subject: [PATCH 190/307] Add ToolTemplate management page

---
 src/constants/urls.constants.ts     |   1 -
 src/global.d.ts                     |  12 +-
 src/pages/System/Tools/Base.tsx     |   4 +-
 src/pages/System/Tools/Template.tsx | 891 +++++++++++++++++++++++++++-
 src/services/system.tsx             |  18 +-
 5 files changed, 911 insertions(+), 15 deletions(-)

diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 4b04f01..84eb783 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -28,7 +28,6 @@ export const URL_SYS_STATISTICS_ACTIVE = `${URL_SYS_STATISTICS}/active`
 export const URL_SYS_TOOL = '/system/tool'
 export const URL_SYS_TOOL_CATEGORY = `${URL_SYS_TOOL}/category`
 export const URL_SYS_TOOL_BASE = `${URL_SYS_TOOL}/base`
-export const URL_SYS_TOOL_BASE_LIST = `${URL_SYS_TOOL_BASE}/list`
 export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
 
 export const URL_API_V1 = '/api/v1'
diff --git a/src/global.d.ts b/src/global.d.ts
index d771a46..818b33a 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -507,23 +507,19 @@ interface ToolBaseAddEditParam {
 interface ToolTemplateVo {
     id: string
     name: string
-    ver: string
     baseId: string
     source: ToolDataVo
-    dist: ToolDataVo
     enable: boolean
     createTime: string
     updateTime: string
 }
 
 interface ToolTemplateAddEditParam {
-    id: string
-    name: string
-    ver: string
-    baseId: string
+    id?: string
+    name?: string
+    baseId?: string
     source?: string
-    dist?: string
-    enable: boolean
+    enable?: boolean
 }
 
 interface ToolVo {
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index 7734e0e..0990a33 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -13,7 +13,7 @@ import {
     r_sys_tool_base_add,
     r_sys_tool_base_delete,
     r_sys_tool_base_get_one,
-    r_sys_tool_base_getList,
+    r_sys_tool_base_get,
     r_sys_tool_base_update
 } from '@/services/system'
 import { IFile, IFiles, ITsconfig } from '@/components/Playground/shared'
@@ -307,7 +307,7 @@ const Base = () => {
         }
         setIsLoading(true)
 
-        void r_sys_tool_base_getList()
+        void r_sys_tool_base_get()
             .then((res) => {
                 const response = res.data
                 if (response.code === DATABASE_SELECT_SUCCESS) {
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index edf5155..f80bdb9 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -1,5 +1,894 @@
+import Icon from '@ant-design/icons'
+import '@/assets/css/pages/system/tools/base.scss'
+import {
+    COLOR_PRODUCTION,
+    DATABASE_DELETE_SUCCESS,
+    DATABASE_DUPLICATE_KEY,
+    DATABASE_INSERT_SUCCESS,
+    DATABASE_SELECT_SUCCESS,
+    DATABASE_UPDATE_SUCCESS
+} from '@/constants/common.constants'
+import { utcToLocalTime } from '@/util/datetime.tsx'
+import {
+    r_sys_tool_template_update,
+    r_sys_tool_template_delete,
+    r_sys_tool_template_add,
+    r_sys_tool_template_get,
+    r_sys_tool_template_get_one,
+    r_sys_tool_base_get
+} from '@/services/system'
+import { IFile, IFiles, ITsconfig } from '@/components/Playground/shared'
+import {
+    base64ToFiles,
+    fileNameToLanguage,
+    filesToBase64,
+    getFilesSize,
+    TS_CONFIG_FILE_NAME
+} from '@/components/Playground/files'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import FlexBox from '@/components/common/FlexBox'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import Card from '@/components/common/Card'
+import CodeEditor from '@/components/Playground/CodeEditor'
+import Permission from '@/components/common/Permission'
+import { useState } from 'react'
+
 const Template = () => {
-    return <>2</>
+    const blocker = useBlocker(
+        ({ currentLocation, nextLocation }) =>
+            currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
+    )
+    const [modal, contextHolder] = AntdModal.useModal()
+    const [form] = AntdForm.useForm<ToolTemplateAddEditParam>()
+    const formValues = AntdForm.useWatch([], form)
+    const [addFileForm] = AntdForm.useForm<{ fileName: string }>()
+    const [renameFileForm] = AntdForm.useForm<{ fileName: string }>()
+    const [newFormValues, setNewFormValues] = useState<ToolTemplateAddEditParam>()
+    const [isLoading, setIsLoading] = useState(false)
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const [isDrawerEdit, setIsDrawerEdit] = useState(false)
+    const [baseData, setBaseData] = useState<ToolBaseVo[]>([])
+    const [isLoadingBaseData, setIsLoadingBaseData] = useState(false)
+    const [submittable, setSubmittable] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [editingTemplateId, setEditingTemplateId] = useState<string>('')
+    const [editingFiles, setEditingFiles] = useState<Record<string, IFiles>>({})
+    const [editingFileName, setEditingFileName] = useState('')
+    const [hasEdited, setHasEdited] = useState<Record<string, boolean>>({})
+    const [templateData, setTemplateData] = useState<ToolTemplateVo[]>([])
+    const [templateDetailData, setTemplateDetailData] = useState<Record<string, ToolTemplateVo>>({})
+    const [templateDetailLoading, setTemplateDetailLoading] = useState<Record<string, boolean>>({})
+    const [tsconfig, setTsconfig] = useState<ITsconfig>()
+
+    useBeforeUnload(
+        useCallback(
+            (event) => {
+                if (Object.keys(hasEdited).length) {
+                    event.preventDefault()
+                    event.returnValue = ''
+                }
+            },
+            [hasEdited]
+        ),
+        { capture: true }
+    )
+
+    const handleOnAddBtnClick = () => {
+        if (Object.keys(hasEdited).length) {
+            void message.warning('新增前请保存修改')
+            return
+        }
+        setIsDrawerEdit(false)
+        setIsDrawerOpen(true)
+        form.setFieldValue('id', undefined)
+        form.setFieldValue('name', newFormValues?.name)
+        form.setFieldValue('baseId', newFormValues?.baseId)
+        form.setFieldValue('enable', newFormValues?.enable ?? true)
+        if (!baseData || !baseData.length) {
+            getBaseData()
+        }
+    }
+
+    const templateColumns: _ColumnsType<ToolTemplateVo> = [
+        {
+            title: '名称',
+            render: (_, record) => (
+                <span className={hasEdited[record.id] ? 'has-edited' : undefined}>
+                    {record.name}
+                </span>
+            )
+        },
+        {
+            title: '基板',
+            dataIndex: ['base', 'name']
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            width: '20%',
+            align: 'center',
+            render: (value: string) => utcToLocalTime(value)
+        },
+        {
+            title: '修改时间',
+            dataIndex: 'updateTime',
+            width: '20%',
+            align: 'center',
+            render: (value: string) => utcToLocalTime(value)
+        },
+        {
+            title: '状态',
+            dataIndex: 'enable',
+            width: '5%',
+            align: 'center',
+            render: (value) =>
+                value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>
+        },
+        {
+            title: (
+                <>
+                    操作 (
+                    <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
+                        新增
+                    </a>
+                    )
+                </>
+            ),
+            dataIndex: 'enable',
+            width: '15em',
+            align: 'center',
+            render: (_, record) => (
+                <>
+                    <AntdSpace size={'middle'}>
+                        {hasEdited[record.id] && (
+                            <Permission operationCode={'system:tool:modify:base'}>
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnSaveBtnClick(record)}
+                                >
+                                    保存
+                                </a>
+                            </Permission>
+                        )}
+                        <Permission operationCode={'system:tool:modify:base'}>
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnEditBtnClick(record)}
+                            >
+                                编辑
+                            </a>
+                        </Permission>
+                        <Permission operationCode={'system:tool:delete:base'}>
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnDeleteBtnClick(record)}
+                            >
+                                删除
+                            </a>
+                        </Permission>
+                    </AntdSpace>
+                </>
+            )
+        }
+    ]
+
+    const handleOnSaveBtnClick = (value: ToolTemplateVo) => {
+        return () => {
+            if (isLoading) {
+                return
+            }
+            setIsLoading(true)
+
+            const source = filesToBase64(editingFiles[value.id])
+
+            void r_sys_tool_template_update({ id: value.id, source })
+                .then((res) => {
+                    const response = res.data
+                    switch (response.code) {
+                        case DATABASE_UPDATE_SUCCESS:
+                            void message.success('保存成功')
+                            delete hasEdited[value.id]
+                            setHasEdited({ ...hasEdited })
+                            getTemplateDetail(value)
+                            break
+                        default:
+                            void message.error('出错了，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsLoading(false)
+                })
+        }
+    }
+
+    const handleOnEditBtnClick = (value: ToolTemplateVo) => {
+        return () => {
+            if (Object.keys(hasEdited).length) {
+                void message.warning('编辑前请保存修改')
+                return
+            }
+
+            setIsDrawerEdit(true)
+            setIsDrawerOpen(true)
+            form.setFieldValue('id', value.id)
+            form.setFieldValue('name', value.name)
+            form.setFieldValue('baseId', value.baseId)
+            form.setFieldValue('enable', value.enable)
+            if (!baseData || !baseData.length) {
+                getBaseData()
+            }
+            void form.validateFields()
+        }
+    }
+
+    const handleOnDeleteBtnClick = (value: ToolTemplateVo) => {
+        return () => {
+            modal
+                .confirm({
+                    title: '确定删除',
+                    content: `确定删除模板 ${value.name} 吗？`
+                })
+                .then(
+                    (confirmed) => {
+                        if (confirmed) {
+                            setIsLoading(true)
+
+                            void r_sys_tool_template_delete(value.id)
+                                .then((res) => {
+                                    const response = res.data
+                                    if (response.code === DATABASE_DELETE_SUCCESS) {
+                                        void message.success('删除成功')
+                                        setHasEdited({})
+                                        setEditingFileName('')
+                                        setEditingFiles({})
+                                        setEditingTemplateId('')
+                                        setTimeout(() => {
+                                            getTemplate()
+                                        })
+                                    } else {
+                                        void message.error('删除失败，请稍后重试')
+                                    }
+                                })
+                                .finally(() => {
+                                    setIsLoading(false)
+                                })
+                        }
+                    },
+                    () => {}
+                )
+        }
+    }
+
+    const filterOption = (input: string, option?: { label: string; value: string }) =>
+        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+
+    const handleOnSubmit = () => {
+        if (isSubmitting) {
+            return
+        }
+        setIsSubmitting(true)
+
+        if (isDrawerEdit) {
+            void r_sys_tool_template_update(formValues)
+                .then((res) => {
+                    const response = res.data
+                    switch (response.code) {
+                        case DATABASE_UPDATE_SUCCESS:
+                            setIsDrawerOpen(false)
+                            void message.success('更新成功')
+                            getTemplate()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error('已存在相同名称的模板')
+                            break
+                        default:
+                            void message.error('更新失败，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        } else {
+            void r_sys_tool_template_add(formValues)
+                .then((res) => {
+                    const response = res.data
+                    switch (response.code) {
+                        case DATABASE_INSERT_SUCCESS:
+                            setIsDrawerOpen(false)
+                            void message.success('添加成功')
+                            setNewFormValues(undefined)
+                            getTemplate()
+                            break
+                        case DATABASE_DUPLICATE_KEY:
+                            void message.error('已存在相同名称的模板')
+                            break
+                        default:
+                            void message.error('添加失败，请稍后重试')
+                    }
+                })
+                .finally(() => {
+                    setIsSubmitting(false)
+                })
+        }
+    }
+
+    const handleOnCloseBtnClick = () => {
+        setEditingFileName('')
+    }
+
+    const handleOnDrawerClose = () => {
+        setIsDrawerOpen(false)
+    }
+
+    const getTemplate = () => {
+        if (isLoading) {
+            return
+        }
+        setIsLoading(true)
+
+        void r_sys_tool_template_get()
+            .then((res) => {
+                const response = res.data
+                if (response.code === DATABASE_SELECT_SUCCESS) {
+                    setTemplateData(response.data!)
+                } else {
+                    void message.error('获取失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoading(false)
+            })
+    }
+
+    const handleOnExpand = (expanded: boolean, record: ToolTemplateVo) => {
+        if (!expanded) {
+            return
+        }
+        getTemplateDetail(record)
+    }
+
+    const getTemplateDetail = (record: ToolTemplateVo) => {
+        if (templateDetailLoading[record.id] || hasEdited[record.id]) {
+            return
+        }
+        setTemplateDetailLoading({ ...templateDetailLoading, [record.id]: true })
+
+        void r_sys_tool_template_get_one(record.id)
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setTemplateDetailData({
+                            ...templateDetailData,
+                            [record.id]: response.data!
+                        })
+                        break
+                    default:
+                        void message.error(`获取模板 ${record.name} 文件内容失败，请稍后重试`)
+                }
+            })
+            .finally(() => {
+                setTemplateDetailLoading({ ...templateDetailLoading, [record.id]: false })
+            })
+    }
+
+    const expandedRowRender = (record: ToolTemplateVo) => {
+        const templateDetailVo = templateDetailData[record.id]
+        let sourceFiles: IFiles | undefined = undefined
+        let sourceFileList: IFile[] = []
+        if (templateDetailVo) {
+            sourceFiles = base64ToFiles(templateDetailVo.source.data)
+            sourceFileList = Object.values(sourceFiles)
+        }
+
+        const handleOnAddFile = () => {
+            if (Object.keys(hasEdited).length) {
+                void message.warning('新建文件前请先保存更改')
+                return
+            }
+
+            void modal.confirm({
+                title: '新建文件',
+                content: (
+                    <AntdForm form={addFileForm}>
+                        <AntdForm.Item
+                            name={'fileName'}
+                            label={'文件名'}
+                            style={{ marginTop: 10 }}
+                            rules={[
+                                { required: true },
+                                {
+                                    pattern: /\.(jsx|tsx|js|ts|css|json)$/,
+                                    message: '仅支持 *.jsx, *.tsx, *.js, *.ts, *.css, *.json 文件'
+                                },
+                                ({ getFieldValue }) => ({
+                                    validator() {
+                                        const newFileName = getFieldValue('fileName') as string
+                                        if (
+                                            Object.keys(sourceFiles!)
+                                                .map((item) => item.toLowerCase())
+                                                .includes(newFileName.toLowerCase())
+                                        ) {
+                                            return Promise.reject(new Error('文件已存在'))
+                                        }
+                                        return Promise.resolve()
+                                    }
+                                })
+                            ]}
+                        >
+                            <AntdInput />
+                        </AntdForm.Item>
+                    </AntdForm>
+                ),
+                onOk: () =>
+                    addFileForm.validateFields().then(
+                        () => {
+                            return new Promise((resolve) => {
+                                const newFileName = addFileForm.getFieldValue('fileName') as string
+
+                                setTemplateDetailLoading({
+                                    ...templateDetailLoading,
+                                    [record.id]: true
+                                })
+
+                                sourceFiles = {
+                                    ...sourceFiles,
+                                    [newFileName]: {
+                                        name: newFileName,
+                                        language: fileNameToLanguage(newFileName),
+                                        value: ''
+                                    }
+                                }
+
+                                void r_sys_tool_template_update({
+                                    id: record.id,
+                                    source: filesToBase64(sourceFiles)
+                                })
+                                    .then((res) => {
+                                        addFileForm.setFieldValue('fileName', '')
+                                        const response = res.data
+                                        switch (response.code) {
+                                            case DATABASE_UPDATE_SUCCESS:
+                                                void message.success('添加成功')
+                                                setTimeout(() => {
+                                                    getTemplateDetail(record)
+                                                })
+                                                resolve(true)
+                                                break
+                                            default:
+                                                void message.error('添加失败，请稍后重试')
+                                                resolve(true)
+                                        }
+                                    })
+                                    .finally(() => {
+                                        setTemplateDetailLoading({
+                                            ...templateDetailLoading,
+                                            [record.id]: false
+                                        })
+                                    })
+                            })
+                        },
+                        () => {
+                            return new Promise((_, reject) => {
+                                reject('请输入文件名')
+                            })
+                        }
+                    )
+            })
+        }
+
+        const detailColumns: _ColumnsType<IFile> = [
+            { title: '文件名', dataIndex: 'name' },
+            {
+                title: (
+                    <>
+                        文件总大小
+                        <br />
+                        {sourceFiles ? getFilesSize(sourceFiles) : 'Unknown'}
+                    </>
+                ),
+                width: '10em',
+                align: 'center'
+            },
+            {
+                title: (
+                    <>
+                        操作 (
+                        <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddFile}>
+                            新增
+                        </a>
+                        )
+                    </>
+                ),
+                dataIndex: 'enable',
+                width: '12em',
+                align: 'center',
+                render: (_, record) => (
+                    <>
+                        <AntdSpace size={'middle'}>
+                            <Permission operationCode={'system:tool:modify:category'}>
+                                <a
+                                    onClick={handleOnEditFile(record.name)}
+                                    style={{ color: COLOR_PRODUCTION }}
+                                >
+                                    编辑
+                                </a>
+                            </Permission>
+                            <Permission operationCode={'system:tool:modify:category'}>
+                                <a
+                                    onClick={handleOnRenameFile(record.name)}
+                                    style={{ color: COLOR_PRODUCTION }}
+                                >
+                                    重命名
+                                </a>
+                            </Permission>
+                            <Permission operationCode={'system:tool:delete:category'}>
+                                <a
+                                    onClick={handleOnDeleteFile(record.name)}
+                                    style={{ color: COLOR_PRODUCTION }}
+                                >
+                                    删除
+                                </a>
+                            </Permission>
+                        </AntdSpace>
+                    </>
+                )
+            }
+        ]
+
+        const handleOnEditFile = (fileName: string) => {
+            return () => {
+                if (editingTemplateId !== record.id) {
+                    setTsconfig(undefined)
+                }
+                if (!hasEdited[record.id]) {
+                    setEditingFiles({ ...editingFiles, [record.id]: sourceFiles! })
+                }
+                setEditingTemplateId(record.id)
+                setEditingFileName(fileName)
+            }
+        }
+
+        const handleOnRenameFile = (fileName: string) => {
+            return () => {
+                if (Object.keys(hasEdited).length) {
+                    void message.warning('重命名文件前请先保存更改')
+                    return
+                }
+                renameFileForm.setFieldValue('fileName', fileName)
+                void modal.confirm({
+                    title: '重命名文件',
+                    content: (
+                        <AntdForm form={renameFileForm}>
+                            <AntdForm.Item
+                                name={'fileName'}
+                                label={'新文件名'}
+                                style={{ marginTop: 10 }}
+                                rules={[
+                                    { required: true },
+                                    {
+                                        pattern: /\.(jsx|tsx|js|ts|css|json)$/,
+                                        message:
+                                            '仅支持 *.jsx, *.tsx, *.js, *.ts, *.css, *.json 文件'
+                                    },
+                                    ({ getFieldValue }) => ({
+                                        validator() {
+                                            const newFileName = getFieldValue('fileName') as string
+                                            if (
+                                                Object.keys(sourceFiles!)
+                                                    .map((item) => item.toLowerCase())
+                                                    .includes(newFileName?.toLowerCase()) &&
+                                                newFileName.toLowerCase() !== fileName.toLowerCase()
+                                            ) {
+                                                return Promise.reject(new Error('文件已存在'))
+                                            }
+
+                                            return Promise.resolve()
+                                        }
+                                    })
+                                ]}
+                            >
+                                <AntdInput />
+                            </AntdForm.Item>
+                        </AntdForm>
+                    ),
+                    onOk: () =>
+                        renameFileForm.validateFields().then(
+                            () => {
+                                return new Promise((resolve) => {
+                                    const newFileName = renameFileForm.getFieldValue(
+                                        'fileName'
+                                    ) as string
+                                    const temp = sourceFiles![fileName].value
+                                    delete sourceFiles![fileName]
+
+                                    sourceFiles = {
+                                        ...sourceFiles,
+                                        [newFileName]: {
+                                            name: newFileName,
+                                            language: fileNameToLanguage(newFileName),
+                                            value: temp
+                                        }
+                                    }
+
+                                    void r_sys_tool_template_update({
+                                        id: record.id,
+                                        source: filesToBase64(sourceFiles)
+                                    })
+                                        .then((res) => {
+                                            const response = res.data
+                                            switch (response.code) {
+                                                case DATABASE_UPDATE_SUCCESS:
+                                                    void message.success('重命名成功')
+                                                    if (
+                                                        editingTemplateId === record.id &&
+                                                        editingFileName === fileName
+                                                    ) {
+                                                        setEditingFileName('')
+                                                    }
+                                                    setTimeout(() => {
+                                                        getTemplateDetail(record)
+                                                    })
+                                                    break
+                                                default:
+                                                    void message.error('重命名失败，请稍后重试')
+                                            }
+                                        })
+                                        .finally(() => {
+                                            setTemplateDetailLoading({
+                                                ...templateDetailLoading,
+                                                [record.id]: false
+                                            })
+                                        })
+
+                                    resolve(true)
+                                })
+                            },
+                            () => {
+                                return new Promise((_, reject) => {
+                                    reject('请输入文件名')
+                                })
+                            }
+                        )
+                })
+            }
+        }
+
+        const handleOnDeleteFile = (fileName: string) => {
+            return () => {
+                if (Object.keys(hasEdited).length) {
+                    void message.warning('删除文件前请先保存更改')
+                    return
+                }
+
+                modal
+                    .confirm({
+                        title: '确定删除',
+                        content: `确定删除文件 ${fileName} 吗？`
+                    })
+                    .then(
+                        (confirmed) => {
+                            if (confirmed) {
+                                setTemplateDetailLoading({
+                                    ...templateDetailLoading,
+                                    [record.id]: true
+                                })
+
+                                delete sourceFiles![fileName]
+
+                                void r_sys_tool_template_update({
+                                    id: record.id,
+                                    source: filesToBase64(sourceFiles!)
+                                })
+                                    .then((res) => {
+                                        const response = res.data
+                                        switch (response.code) {
+                                            case DATABASE_UPDATE_SUCCESS:
+                                                void message.success('删除成功')
+                                                if (
+                                                    editingTemplateId === record.id &&
+                                                    editingFileName === fileName
+                                                ) {
+                                                    setEditingFileName('')
+                                                }
+                                                setTimeout(() => {
+                                                    getTemplateDetail(record)
+                                                })
+                                                break
+                                            default:
+                                                void message.error('删除失败，请稍后重试')
+                                        }
+                                    })
+                                    .finally(() => {
+                                        setTemplateDetailLoading({
+                                            ...templateDetailLoading,
+                                            [record.id]: false
+                                        })
+                                    })
+                            }
+                        },
+                        () => {}
+                    )
+            }
+        }
+
+        return (
+            <Card>
+                <AntdTable
+                    loading={templateDetailLoading[record.id]}
+                    dataSource={sourceFileList}
+                    columns={detailColumns}
+                    pagination={false}
+                    rowKey={(record) => record.name}
+                />
+            </Card>
+        )
+    }
+
+    const handleOnChangeFileContent = (_content: string, _fileName: string, files: IFiles) => {
+        setEditingFiles({ ...editingFiles, [editingTemplateId]: files })
+        setHasEdited({ ...hasEdited, [editingTemplateId]: true })
+    }
+
+    const getBaseData = () => {
+        if (isLoadingBaseData) {
+            return
+        }
+        setIsLoadingBaseData(true)
+
+        void r_sys_tool_base_get()
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setBaseData(response.data!)
+                        break
+                    default:
+                        void message.error('获取基板列表失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoadingBaseData(false)
+            })
+    }
+
+    useEffect(() => {
+        try {
+            const tsconfigStr = editingFiles[editingTemplateId][TS_CONFIG_FILE_NAME].value
+            setTsconfig(JSON.parse(tsconfigStr) as ITsconfig)
+        } catch (e) {
+            /* empty */
+        }
+    }, [editingFiles, editingTemplateId])
+
+    useEffect(() => {
+        form.validateFields({ validateOnly: true }).then(
+            () => {
+                setSubmittable(true)
+            },
+            () => {
+                setSubmittable(false)
+            }
+        )
+
+        if (!isDrawerEdit && formValues) {
+            setNewFormValues({
+                name: formValues.name,
+                enable: formValues.enable
+            })
+        }
+    }, [formValues])
+
+    useEffect(() => {
+        getTemplate()
+    }, [])
+
+    const drawerToolbar = (
+        <AntdSpace>
+            <AntdTooltip title={'刷新基板列表'}>
+                <AntdButton onClick={getBaseData} disabled={isSubmitting}>
+                    <Icon component={IconOxygenRefresh} />
+                </AntdButton>
+            </AntdTooltip>
+            <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
+                取消
+            </AntdButton>
+            <AntdButton
+                type={'primary'}
+                disabled={!submittable}
+                loading={isSubmitting}
+                onClick={handleOnSubmit}
+            >
+                提交
+            </AntdButton>
+        </AntdSpace>
+    )
+
+    const addAndEditForm = (
+        <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
+            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+                <AntdInput disabled />
+            </AntdForm.Item>
+            <AntdForm.Item
+                name={'name'}
+                label={'名称'}
+                rules={[{ required: true, whitespace: false }]}
+            >
+                <AntdInput allowClear />
+            </AntdForm.Item>
+            <AntdForm.Item name={'baseId'} label={'基板'} rules={[{ required: true }]}>
+                <AntdSelect
+                    showSearch
+                    filterOption={filterOption}
+                    options={baseData.map((value) => ({
+                        value: value.id,
+                        label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
+                    }))}
+                />
+            </AntdForm.Item>
+            <AntdForm.Item name={'enable'} label={'状态'}>
+                <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
+            </AntdForm.Item>
+        </AntdForm>
+    )
+
+    return (
+        <>
+            <FitFullscreen data-component={'system-tools-base'}>
+                <HideScrollbar>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <Card>
+                            <AntdTable
+                                dataSource={templateData}
+                                columns={templateColumns}
+                                rowKey={(record) => record.id}
+                                loading={isLoading}
+                                pagination={false}
+                                expandable={{
+                                    expandedRowRender,
+                                    onExpand: handleOnExpand
+                                }}
+                            />
+                        </Card>
+                        {editingFileName && (
+                            <Card>
+                                <CodeEditor
+                                    files={editingFiles[editingTemplateId]}
+                                    selectedFileName={editingFileName}
+                                    onSelectedFileChange={() => {}}
+                                    onChangeFileContent={handleOnChangeFileContent}
+                                    showFileSelector={false}
+                                    tsconfig={tsconfig}
+                                />
+                                <div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
+                                    <Icon component={IconOxygenClose} />
+                                </div>
+                            </Card>
+                        )}
+                    </FlexBox>
+                </HideScrollbar>
+                <AntdDrawer
+                    title={isDrawerEdit ? '编辑基板' : '添加基板'}
+                    onClose={handleOnDrawerClose}
+                    open={isDrawerOpen}
+                    closable={!isSubmitting}
+                    maskClosable={!isSubmitting}
+                    extra={drawerToolbar}
+                >
+                    {addAndEditForm}
+                </AntdDrawer>
+            </FitFullscreen>
+            {contextHolder}
+            <AntdModal
+                open={blocker.state === 'blocked'}
+                title={'未保存'}
+                onOk={() => blocker.proceed?.()}
+                onCancel={() => blocker.reset?.()}
+            >
+                离开此页面将丢失所有未保存数据，是否继续？
+            </AntdModal>
+        </>
+    )
 }
 
 export default Template
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 9271605..f26efad 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -19,7 +19,7 @@ import {
     URL_SYS_SETTINGS_SENSITIVE,
     URL_SYS_TOOL_CATEGORY,
     URL_SYS_TOOL_BASE,
-    URL_SYS_TOOL_BASE_LIST
+    URL_SYS_TOOL_TEMPLATE
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -128,8 +128,6 @@ export const r_sys_tool_category_update = (param: ToolCategoryAddEditParam) =>
 export const r_sys_tool_category_delete = (id: string) =>
     request.delete(`${URL_SYS_TOOL_CATEGORY}/${id}`)
 
-export const r_sys_tool_base_getList = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE_LIST)
-
 export const r_sys_tool_base_get = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE)
 
 export const r_sys_tool_base_get_one = (id: string) =>
@@ -142,3 +140,17 @@ export const r_sys_tool_base_update = (param: ToolBaseAddEditParam) =>
     request.put(URL_SYS_TOOL_BASE, param)
 
 export const r_sys_tool_base_delete = (id: string) => request.delete(`${URL_SYS_TOOL_BASE}/${id}`)
+
+export const r_sys_tool_template_get = () => request.get<ToolTemplateVo[]>(URL_SYS_TOOL_TEMPLATE)
+
+export const r_sys_tool_template_get_one = (id: string) =>
+    request.get<ToolTemplateVo>(`${URL_SYS_TOOL_TEMPLATE}/${id}`)
+
+export const r_sys_tool_template_add = (param: ToolTemplateAddEditParam) =>
+    request.post(URL_SYS_TOOL_TEMPLATE, param)
+
+export const r_sys_tool_template_update = (param: ToolTemplateAddEditParam) =>
+    request.put(URL_SYS_TOOL_TEMPLATE, param)
+
+export const r_sys_tool_template_delete = (id: string) =>
+    request.delete(`${URL_SYS_TOOL_TEMPLATE}/${id}`)

From 12cdff377e71fb58659a78b21a30a4abe3a55e21 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 23 Jan 2024 00:45:05 +0800
Subject: [PATCH 191/307] Optimize ToolTemplate management page

---
 src/assets/css/pages/system/tools/base.scss | 1 +
 src/global.d.ts                             | 1 +
 src/pages/System/Tools/Template.tsx         | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/pages/system/tools/base.scss b/src/assets/css/pages/system/tools/base.scss
index 2513936..50ab0fb 100644
--- a/src/assets/css/pages/system/tools/base.scss
+++ b/src/assets/css/pages/system/tools/base.scss
@@ -34,6 +34,7 @@
       height: 32px;
       border-radius: 50%;
       color: white;
+      opacity: 0.6;
       box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
       cursor: pointer;
     }
diff --git a/src/global.d.ts b/src/global.d.ts
index 818b33a..5972364 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -512,6 +512,7 @@ interface ToolTemplateVo {
     enable: boolean
     createTime: string
     updateTime: string
+    base: ToolBaseVo
 }
 
 interface ToolTemplateAddEditParam {
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index f80bdb9..febaa7a 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -212,7 +212,7 @@ const Template = () => {
             setIsDrawerOpen(true)
             form.setFieldValue('id', value.id)
             form.setFieldValue('name', value.name)
-            form.setFieldValue('baseId', value.baseId)
+            form.setFieldValue('baseId', value.base.id)
             form.setFieldValue('enable', value.enable)
             if (!baseData || !baseData.length) {
                 getBaseData()
@@ -774,6 +774,7 @@ const Template = () => {
         if (!isDrawerEdit && formValues) {
             setNewFormValues({
                 name: formValues.name,
+                baseId: formValues.baseId,
                 enable: formValues.enable
             })
         }

From e2d2710823cfed4f843f2de13004f9bcde1bce5a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 23 Jan 2024 09:36:57 +0800
Subject: [PATCH 192/307] Optimize AuthRoute

---
 src/AuthRoute.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index ae0e24a..c93526f 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -4,6 +4,7 @@ import { getLoginStatus, getVerifyStatus_async } from '@/util/auth'
 import { Navigate } from 'react-router'
 
 const AuthRoute = () => {
+    const [searchParams] = useSearchParams()
     const matches = useMatches()
     const lastMatch = matches.reduce((_, second) => second)
     const handle = lastMatch.handle as RouteHandle
@@ -30,7 +31,11 @@ const AuthRoute = () => {
             }
         }
         if (isLogin && ['/login', '/forget'].includes(lastMatch.pathname)) {
-            return <Navigate to={'/'} />
+            if (searchParams.has('redirect')) {
+                return <Navigate to={searchParams.get('redirect') ?? '/'} />
+            } else {
+                return <Navigate to={'/'} />
+            }
         }
 
         if (location.pathname.length > 1 && location.pathname.endsWith('/')) {

From 2e331658c5a934b4269975b2ee5d0e94c94a5ce0 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 23 Jan 2024 15:32:15 +0800
Subject: [PATCH 193/307] Add compile to ToolBase management page

---
 src/assets/css/pages/system/tools/base.scss   |   2 +-
 .../Playground/Output/Preview/index.tsx       |   3 +-
 src/components/Playground/compiler.ts         |   4 +-
 src/global.d.ts                               |   7 +-
 src/pages/System/Settings/Mail.tsx            |   6 +-
 src/pages/System/Tools/Base.tsx               | 328 ++++++++++++++----
 src/pages/System/Tools/Template.tsx           |  13 +-
 src/pages/System/User.tsx                     |   4 +-
 8 files changed, 276 insertions(+), 91 deletions(-)

diff --git a/src/assets/css/pages/system/tools/base.scss b/src/assets/css/pages/system/tools/base.scss
index 50ab0fb..358c38b 100644
--- a/src/assets/css/pages/system/tools/base.scss
+++ b/src/assets/css/pages/system/tools/base.scss
@@ -19,7 +19,7 @@
     > *:nth-child(2) {
       position: sticky;
       top: 20px;
-      height: calc(100vh - 40px);
+      height: calc(100vh - 60px);
     }
 
     .close-editor-btn {
diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx
index f0b4424..8620120 100644
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -2,6 +2,7 @@ import '@/components/Playground/Output/Preview/preview.scss'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
 import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
+import { ENTRY_FILE_NAME } from '@/components/Playground/files.ts'
 
 interface PreviewProps {
     iframeKey: string
@@ -60,7 +61,7 @@ const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
     }, [])
 
     useEffect(() => {
-        Compiler.compile(files, importMap)
+        Compiler.compile(files, importMap, [ENTRY_FILE_NAME])
             .then((result) => {
                 if (loaded) {
                     iframeRef.current?.contentWindow?.postMessage({
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index 1862e24..244c435 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -39,7 +39,7 @@ class Compiler {
             return esbuild.transform(code, { loader })
         })
 
-    compile = (files: IFiles, importMap: IImportMap) =>
+    compile = (files: IFiles, importMap: IImportMap, entryPoints: string[]) =>
         new Promise<void>((resolve) => {
             if (this.init) {
                 resolve()
@@ -54,7 +54,7 @@ class Compiler {
         }).then(() => {
             return esbuild.build({
                 bundle: true,
-                entryPoints: [ENTRY_FILE_NAME],
+                entryPoints: entryPoints,
                 format: 'esm',
                 metafile: true,
                 write: false,
diff --git a/src/global.d.ts b/src/global.d.ts
index 5972364..a950bd8 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -481,9 +481,9 @@ interface ToolCategoryAddEditParam {
 
 interface ToolDataVo {
     id: string
-    data: string
-    createTime: string
-    updateTime: string
+    data?: string
+    createTime?: string
+    updateTime?: string
 }
 
 interface ToolBaseVo {
@@ -491,6 +491,7 @@ interface ToolBaseVo {
     name: string
     source: ToolDataVo
     dist: ToolDataVo
+    compiled: boolean
     enable: boolean
     createTime: string
     updateTime: string
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index d540030..935f91c 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -37,7 +37,7 @@ const Mail = () => {
             onOk: () =>
                 mailSendForm.validateFields().then(
                     () => {
-                        return new Promise((resolve) => {
+                        return new Promise<void>((resolve) => {
                             void r_sys_settings_mail_send({
                                 to: mailSendForm.getFieldValue('to') as string
                             }).then((res) => {
@@ -45,10 +45,10 @@ const Mail = () => {
 
                                 if (response.success) {
                                     void message.success('发送成功')
-                                    resolve(true)
+                                    resolve()
                                 } else {
                                     void message.error('发送失败，请检查配置后重试')
-                                    resolve(true)
+                                    resolve()
                                 }
                             })
                         })
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index 0990a33..64dd690 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -16,12 +16,14 @@ import {
     r_sys_tool_base_get,
     r_sys_tool_base_update
 } from '@/services/system'
-import { IFile, IFiles, ITsconfig } from '@/components/Playground/shared'
+import { IFile, IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
 import {
     base64ToFiles,
     fileNameToLanguage,
     filesToBase64,
     getFilesSize,
+    IMPORT_MAP_FILE_NAME,
+    strToBase64,
     TS_CONFIG_FILE_NAME
 } from '@/components/Playground/files'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -30,6 +32,8 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import Card from '@/components/common/Card'
 import CodeEditor from '@/components/Playground/CodeEditor'
 import Permission from '@/components/common/Permission'
+import { useState } from 'react'
+import compiler from '@/components/Playground/compiler.ts'
 
 const Base = () => {
     const blocker = useBlocker(
@@ -55,6 +59,8 @@ const Base = () => {
     const [baseDetailData, setBaseDetailData] = useState<Record<string, ToolBaseVo>>({})
     const [baseDetailLoading, setBaseDetailLoading] = useState<Record<string, boolean>>({})
     const [tsconfig, setTsconfig] = useState<ITsconfig>()
+    const [compiling, setCompiling] = useState(false)
+    const [compileForm] = AntdForm.useForm<{ entryFileName: string }>()
 
     useBeforeUnload(
         useCallback(
@@ -70,10 +76,6 @@ const Base = () => {
     )
 
     const handleOnAddBtnClick = () => {
-        if (Object.keys(hasEdited).length) {
-            void message.warning('新增前请保存修改')
-            return
-        }
         setIsDrawerEdit(false)
         setIsDrawerOpen(true)
         form.setFieldValue('id', undefined)
@@ -93,41 +95,62 @@ const Base = () => {
         {
             title: '创建时间',
             dataIndex: 'createTime',
-            width: '20%',
+            width: '15em',
             align: 'center',
             render: (value: string) => utcToLocalTime(value)
         },
         {
             title: '修改时间',
             dataIndex: 'updateTime',
-            width: '20%',
+            width: '15em',
             align: 'center',
             render: (value: string) => utcToLocalTime(value)
         },
         {
             title: '状态',
-            dataIndex: 'enable',
-            width: '5%',
+            width: '10em',
             align: 'center',
-            render: (value) =>
-                value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>
+            render: (_, record) => (
+                <>
+                    {record.enable ? (
+                        <AntdTag color={'success'}>启用</AntdTag>
+                    ) : (
+                        <AntdTag>禁用</AntdTag>
+                    )}
+                    {!record.compiled && <AntdTag>未编译</AntdTag>}
+                </>
+            )
         },
         {
             title: (
                 <>
-                    操作 (
-                    <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
-                        新增
-                    </a>
-                    )
+                    操作
+                    {!Object.keys(hasEdited).length && (
+                        <>
+                            {' '}
+                            (
+                            <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
+                                新增
+                            </a>
+                            )
+                        </>
+                    )}
                 </>
             ),
             dataIndex: 'enable',
-            width: '15em',
+            width: '12em',
             align: 'center',
             render: (_, record) => (
                 <>
                     <AntdSpace size={'middle'}>
+                        {!record.compiled && !Object.keys(hasEdited).length && (
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnCompileBtnClick(record)}
+                            >
+                                编译
+                            </a>
+                        )}
                         {hasEdited[record.id] && (
                             <Permission operationCode={'system:tool:modify:base'}>
                                 <a
@@ -138,14 +161,16 @@ const Base = () => {
                                 </a>
                             </Permission>
                         )}
-                        <Permission operationCode={'system:tool:modify:base'}>
-                            <a
-                                style={{ color: COLOR_PRODUCTION }}
-                                onClick={handleOnEditBtnClick(record)}
-                            >
-                                编辑
-                            </a>
-                        </Permission>
+                        {!Object.keys(hasEdited).length && (
+                            <Permission operationCode={'system:tool:modify:base'}>
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnEditBtnClick(record)}
+                                >
+                                    编辑
+                                </a>
+                            </Permission>
+                        )}
                         <Permission operationCode={'system:tool:delete:base'}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
@@ -160,6 +185,163 @@ const Base = () => {
         }
     ]
 
+    const handleOnCompileBtnClick = (value: ToolBaseVo) => {
+        return () => {
+            if (compiling || isLoading) {
+                return
+            }
+            setCompiling(true)
+            setIsLoading(true)
+            void message.loading({ content: '加载文件中', key: 'compile-loading', duration: 0 })
+
+            if (!baseDetailLoading[value.id]) {
+                getBaseDetail(value)
+            }
+
+            void new Promise<void>((resolve, reject) => {
+                const timer = setInterval(() => {
+                    let loading
+                    let data
+                    setBaseDetailLoading((prevState) => {
+                        loading = prevState[value.id]
+                        return prevState
+                    })
+                    setBaseDetailData((prevState) => {
+                        data = prevState[value.id]
+                        return prevState
+                    })
+                    if (!loading && data) {
+                        clearInterval(timer)
+                        resolve()
+                    }
+                    if (loading !== undefined && !loading && !data) {
+                        clearInterval(timer)
+                        reject()
+                    }
+                }, 100)
+            })
+                .then(() => {
+                    let baseDetail: ToolBaseVo
+                    setBaseDetailData((prevState) => {
+                        baseDetail = prevState[value.id]
+                        return prevState
+                    })
+                    message.destroy('compile-loading')
+                    const files = base64ToFiles(baseDetail!.source.data!)
+                    if (!Object.keys(files).includes(IMPORT_MAP_FILE_NAME)) {
+                        void message.warning(`编译中止：未包含 ${IMPORT_MAP_FILE_NAME} 文件`)
+                        setCompiling(false)
+                        setIsLoading(false)
+                        return
+                    }
+                    let importMap: IImportMap
+                    try {
+                        importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap
+                    } catch (e) {
+                        void message.warning(`编译中止：Import Map 文件转换失败`)
+                        setCompiling(false)
+                        setIsLoading(false)
+                        return
+                    }
+
+                    compileForm.setFieldValue('entryFileName', undefined)
+                    void modal.confirm({
+                        title: '编译',
+                        content: (
+                            <>
+                                <AntdForm form={compileForm}>
+                                    <AntdForm.Item
+                                        name={'entryFileName'}
+                                        label={'入口文件'}
+                                        style={{ marginTop: 10 }}
+                                        rules={[{ required: true, message: '请选择入口文件' }]}
+                                    >
+                                        <AntdSelect
+                                            options={Object.keys(files)
+                                                .filter(
+                                                    (value) =>
+                                                        ![
+                                                            IMPORT_MAP_FILE_NAME,
+                                                            TS_CONFIG_FILE_NAME
+                                                        ].includes(value)
+                                                )
+                                                .map((value) => ({ value, label: value }))}
+                                        />
+                                    </AntdForm.Item>
+                                </AntdForm>
+                            </>
+                        ),
+                        onOk: () =>
+                            compileForm.validateFields().then(
+                                () => {
+                                    return new Promise<void>((resolve) => {
+                                        resolve()
+                                        void message.loading({
+                                            content: '编译中',
+                                            key: 'compiling',
+                                            duration: 0
+                                        })
+                                        void compiler
+                                            .compile(files, importMap, [
+                                                compileForm.getFieldValue('entryFileName') as string
+                                            ])
+                                            .then((result) => {
+                                                void message.destroy('compiling')
+                                                void message.loading({
+                                                    content: '上传中',
+                                                    key: 'uploading',
+                                                    duration: 0
+                                                })
+                                                console.debug(result.outputFiles[0].text)
+                                                void r_sys_tool_base_update({
+                                                    id: value.id,
+                                                    dist: strToBase64(result.outputFiles[0].text)
+                                                })
+                                                    .then((res) => {
+                                                        const response = res.data
+                                                        switch (response.code) {
+                                                            case DATABASE_UPDATE_SUCCESS:
+                                                                void message.success('编译成功')
+                                                                getBase()
+                                                                break
+                                                            default:
+                                                                void message.error('上传失败')
+                                                        }
+                                                    })
+                                                    .finally(() => {
+                                                        void message.destroy('uploading')
+                                                        setCompiling(false)
+                                                        setIsLoading(false)
+                                                    })
+                                            })
+                                            .catch((e: Error) => {
+                                                void message.error(`编译失败：${e.message}`)
+                                                void message.destroy('compiling')
+                                                setCompiling(false)
+                                                setIsLoading(false)
+                                            })
+                                    })
+                                },
+                                () => {
+                                    return new Promise((_, reject) => {
+                                        reject('请选择入口文件')
+                                    })
+                                }
+                            ),
+                        onCancel: () => {
+                            setCompiling(false)
+                            setIsLoading(false)
+                        }
+                    })
+                })
+                .catch(() => {
+                    setCompiling(false)
+                    setIsLoading(false)
+                    message.destroy('compile-loading')
+                })
+        }
+    }
+
     const handleOnSaveBtnClick = (value: ToolBaseVo) => {
         return () => {
             if (isLoading) {
@@ -191,11 +373,6 @@ const Base = () => {
 
     const handleOnEditBtnClick = (value: ToolBaseVo) => {
         return () => {
-            if (Object.keys(hasEdited).length) {
-                void message.warning('编辑前请保存修改')
-                return
-            }
-
             setIsDrawerEdit(true)
             setIsDrawerOpen(true)
             form.setFieldValue('id', value.id)
@@ -340,6 +517,17 @@ const Base = () => {
                 switch (response.code) {
                     case DATABASE_SELECT_SUCCESS:
                         setBaseDetailData({ ...baseDetailData, [record.id]: response.data! })
+                        setBaseData(
+                            baseData.map((value) =>
+                                value.id === response.data!.id
+                                    ? {
+                                          ...response.data!,
+                                          source: { id: response.data!.source.id },
+                                          dist: { id: response.data!.dist.id }
+                                      }
+                                    : value
+                            )
+                        )
                         break
                     default:
                         void message.error(`获取基板 ${record.name} 文件内容失败，请稍后重试`)
@@ -355,16 +543,11 @@ const Base = () => {
         let sourceFiles: IFiles | undefined = undefined
         let sourceFileList: IFile[] = []
         if (baseDetailVo) {
-            sourceFiles = base64ToFiles(baseDetailVo.source.data)
+            sourceFiles = base64ToFiles(baseDetailVo.source.data!)
             sourceFileList = Object.values(sourceFiles)
         }
 
         const handleOnAddFile = () => {
-            if (Object.keys(hasEdited).length) {
-                void message.warning('新建文件前请先保存更改')
-                return
-            }
-
             void modal.confirm({
                 title: '新建文件',
                 content: (
@@ -401,7 +584,7 @@ const Base = () => {
                 onOk: () =>
                     addFileForm.validateFields().then(
                         () => {
-                            return new Promise((resolve) => {
+                            return new Promise<void>((resolve) => {
                                 const newFileName = addFileForm.getFieldValue('fileName') as string
 
                                 setBaseDetailLoading({ ...baseDetailLoading, [record.id]: true })
@@ -428,11 +611,11 @@ const Base = () => {
                                                 setTimeout(() => {
                                                     getBaseDetail(record)
                                                 })
-                                                resolve(true)
+                                                resolve()
                                                 break
                                             default:
                                                 void message.error('添加失败，请稍后重试')
-                                                resolve(true)
+                                                resolve()
                                         }
                                     })
                                     .finally(() => {
@@ -468,11 +651,17 @@ const Base = () => {
             {
                 title: (
                     <>
-                        操作 (
-                        <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddFile}>
-                            新增
-                        </a>
-                        )
+                        操作
+                        {!Object.keys(hasEdited).length && (
+                            <>
+                                {' '}
+                                (
+                                <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddFile}>
+                                    新增
+                                </a>
+                                )
+                            </>
+                        )}
                     </>
                 ),
                 dataIndex: 'enable',
@@ -489,22 +678,26 @@ const Base = () => {
                                     编辑
                                 </a>
                             </Permission>
-                            <Permission operationCode={'system:tool:modify:category'}>
-                                <a
-                                    onClick={handleOnRenameFile(record.name)}
-                                    style={{ color: COLOR_PRODUCTION }}
-                                >
-                                    重命名
-                                </a>
-                            </Permission>
-                            <Permission operationCode={'system:tool:delete:category'}>
-                                <a
-                                    onClick={handleOnDeleteFile(record.name)}
-                                    style={{ color: COLOR_PRODUCTION }}
-                                >
-                                    删除
-                                </a>
-                            </Permission>
+                            {!Object.keys(hasEdited).length && (
+                                <Permission operationCode={'system:tool:modify:category'}>
+                                    <a
+                                        onClick={handleOnRenameFile(record.name)}
+                                        style={{ color: COLOR_PRODUCTION }}
+                                    >
+                                        重命名
+                                    </a>
+                                </Permission>
+                            )}
+                            {!Object.keys(hasEdited).length && (
+                                <Permission operationCode={'system:tool:delete:category'}>
+                                    <a
+                                        onClick={handleOnDeleteFile(record.name)}
+                                        style={{ color: COLOR_PRODUCTION }}
+                                    >
+                                        删除
+                                    </a>
+                                </Permission>
+                            )}
                         </AntdSpace>
                     </>
                 )
@@ -526,10 +719,6 @@ const Base = () => {
 
         const handleOnRenameFile = (fileName: string) => {
             return () => {
-                if (Object.keys(hasEdited).length) {
-                    void message.warning('重命名文件前请先保存更改')
-                    return
-                }
                 renameFileForm.setFieldValue('fileName', fileName)
                 void modal.confirm({
                     title: '重命名文件',
@@ -570,7 +759,7 @@ const Base = () => {
                     onOk: () =>
                         renameFileForm.validateFields().then(
                             () => {
-                                return new Promise((resolve) => {
+                                return new Promise<void>((resolve) => {
                                     const newFileName = renameFileForm.getFieldValue(
                                         'fileName'
                                     ) as string
@@ -615,8 +804,7 @@ const Base = () => {
                                                 [record.id]: false
                                             })
                                         })
-
-                                    resolve(true)
+                                    resolve()
                                 })
                             },
                             () => {
@@ -631,11 +819,6 @@ const Base = () => {
 
         const handleOnDeleteFile = (fileName: string) => {
             return () => {
-                if (Object.keys(hasEdited).length) {
-                    void message.warning('删除文件前请先保存更改')
-                    return
-                }
-
                 modal
                     .confirm({
                         title: '确定删除',
@@ -794,6 +977,7 @@ const Base = () => {
                                     onChangeFileContent={handleOnChangeFileContent}
                                     showFileSelector={false}
                                     tsconfig={tsconfig}
+                                    readonly={isLoading || baseDetailLoading[editingBaseId]}
                                 />
                                 <div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
                                     <Icon component={IconOxygenClose} />
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index febaa7a..882f445 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -377,7 +377,7 @@ const Template = () => {
         let sourceFiles: IFiles | undefined = undefined
         let sourceFileList: IFile[] = []
         if (templateDetailVo) {
-            sourceFiles = base64ToFiles(templateDetailVo.source.data)
+            sourceFiles = base64ToFiles(templateDetailVo.source.data!)
             sourceFileList = Object.values(sourceFiles)
         }
 
@@ -423,7 +423,7 @@ const Template = () => {
                 onOk: () =>
                     addFileForm.validateFields().then(
                         () => {
-                            return new Promise((resolve) => {
+                            return new Promise<void>((resolve) => {
                                 const newFileName = addFileForm.getFieldValue('fileName') as string
 
                                 setTemplateDetailLoading({
@@ -453,11 +453,11 @@ const Template = () => {
                                                 setTimeout(() => {
                                                     getTemplateDetail(record)
                                                 })
-                                                resolve(true)
+                                                resolve()
                                                 break
                                             default:
                                                 void message.error('添加失败，请稍后重试')
-                                                resolve(true)
+                                                resolve()
                                         }
                                     })
                                     .finally(() => {
@@ -595,7 +595,7 @@ const Template = () => {
                     onOk: () =>
                         renameFileForm.validateFields().then(
                             () => {
-                                return new Promise((resolve) => {
+                                return new Promise<void>((resolve) => {
                                     const newFileName = renameFileForm.getFieldValue(
                                         'fileName'
                                     ) as string
@@ -640,8 +640,7 @@ const Template = () => {
                                                 [record.id]: false
                                             })
                                         })
-
-                                    resolve(true)
+                                    resolve()
                                 })
                             },
                             () => {
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 076c758..281adde 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -392,7 +392,7 @@ const User = () => {
                         .validateFields()
                         .then(
                             () => {
-                                return new Promise((resolve, reject) => {
+                                return new Promise<void>((resolve, reject) => {
                                     void r_sys_user_change_password({
                                         id: changePasswordForm.getFieldValue('id') as string,
                                         password: changePasswordForm.getFieldValue(
@@ -407,7 +407,7 @@ const User = () => {
                                         const response = res.data
                                         if (response.success) {
                                             void message.success('修改密码成功')
-                                            resolve(true)
+                                            resolve()
                                         } else {
                                             reject(response.msg)
                                         }

From f758485f403e292f9152504ad0a60544611c06ce Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 23 Jan 2024 16:13:52 +0800
Subject: [PATCH 194/307] Optimize compiler

---
 src/components/Playground/compiler.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index 244c435..566eac9 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -58,7 +58,7 @@ class Compiler {
                 format: 'esm',
                 metafile: true,
                 write: false,
-                plugins: [this.fileResolverPlugin(files, importMap)]
+                plugins: [this.fileResolverPlugin(files, importMap, entryPoints)]
             })
         })
 
@@ -66,12 +66,16 @@ class Compiler {
         esbuild.stop()
     }
 
-    private fileResolverPlugin = (files: IFiles, importMap: IImportMap): Plugin => {
+    private fileResolverPlugin = (
+        files: IFiles,
+        importMap: IImportMap,
+        entryPoints: string[]
+    ): Plugin => {
         return {
             name: 'file-resolver-plugin',
             setup: (build: PluginBuild) => {
                 build.onResolve({ filter: /.*/ }, (args: esbuild.OnResolveArgs) => {
-                    if (args.path === ENTRY_FILE_NAME) {
+                    if (entryPoints.includes(args.path)) {
                         return {
                             namespace: 'OxygenToolbox',
                             path: args.path

From ee23f03e4c492c8391d8119409701087ac0bf90d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 23 Jan 2024 16:55:09 +0800
Subject: [PATCH 195/307] Optimize Editor

---
 src/components/Playground/CodeEditor/index.tsx | 4 ++--
 src/pages/System/Tools/Base.tsx                | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index c4bd636..938aa66 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -105,7 +105,7 @@ const CodeEditor = ({
         }
     }
 
-    const handleOnChangeFileContent = _.debounce((code: string = '') => {
+    const handleOnChangeFileContent = (code: string = '') => {
         if (!files[onSelectedFileChange ? propsSelectedFileName : selectedFileName]) {
             return
         }
@@ -116,7 +116,7 @@ const CodeEditor = ({
             onSelectedFileChange ? propsSelectedFileName : selectedFileName,
             clone
         )
-    }, 250)
+    }
 
     return (
         <>
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index 64dd690..e0b0596 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -26,14 +26,13 @@ import {
     strToBase64,
     TS_CONFIG_FILE_NAME
 } from '@/components/Playground/files'
+import compiler from '@/components/Playground/compiler'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import Card from '@/components/common/Card'
 import CodeEditor from '@/components/Playground/CodeEditor'
 import Permission from '@/components/common/Permission'
-import { useState } from 'react'
-import compiler from '@/components/Playground/compiler.ts'
 
 const Base = () => {
     const blocker = useBlocker(
@@ -292,6 +291,7 @@ const Base = () => {
                                                     key: 'uploading',
                                                     duration: 0
                                                 })
+                                                // TODO Remove debug
                                                 console.debug(result.outputFiles[0].text)
                                                 void r_sys_tool_base_update({
                                                     id: value.id,
@@ -882,7 +882,9 @@ const Base = () => {
 
     const handleOnChangeFileContent = (_content: string, _fileName: string, files: IFiles) => {
         setEditingFiles({ ...editingFiles, [editingBaseId]: files })
-        setHasEdited({ ...hasEdited, [editingBaseId]: true })
+        if (!hasEdited[editingBaseId]) {
+            setHasEdited({ ...hasEdited, [editingBaseId]: true })
+        }
     }
 
     useEffect(() => {

From 50f7b99bbe689a15b033355f9342a8c9f9a798af Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 23 Jan 2024 18:03:32 +0800
Subject: [PATCH 196/307] Optimize code

---
 src/pages/System/Tools/Base.tsx     |   1 -
 src/pages/System/Tools/Template.tsx | 135 +++++++++++++++-------------
 2 files changed, 71 insertions(+), 65 deletions(-)

diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index e0b0596..d4a4907 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -136,7 +136,6 @@ const Base = () => {
                     )}
                 </>
             ),
-            dataIndex: 'enable',
             width: '12em',
             align: 'center',
             render: (_, record) => (
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index 882f445..f9a2eed 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -74,10 +74,6 @@ const Template = () => {
     )
 
     const handleOnAddBtnClick = () => {
-        if (Object.keys(hasEdited).length) {
-            void message.warning('新增前请保存修改')
-            return
-        }
         setIsDrawerEdit(false)
         setIsDrawerOpen(true)
         form.setFieldValue('id', undefined)
@@ -105,21 +101,21 @@ const Template = () => {
         {
             title: '创建时间',
             dataIndex: 'createTime',
-            width: '20%',
+            width: '0',
             align: 'center',
             render: (value: string) => utcToLocalTime(value)
         },
         {
             title: '修改时间',
             dataIndex: 'updateTime',
-            width: '20%',
+            width: '0',
             align: 'center',
             render: (value: string) => utcToLocalTime(value)
         },
         {
             title: '状态',
             dataIndex: 'enable',
-            width: '5%',
+            width: '0',
             align: 'center',
             render: (value) =>
                 value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>
@@ -127,15 +123,20 @@ const Template = () => {
         {
             title: (
                 <>
-                    操作 (
-                    <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
-                        新增
-                    </a>
-                    )
+                    操作
+                    {!Object.keys(hasEdited).length && (
+                        <>
+                            {' '}
+                            (
+                            <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
+                                新增
+                            </a>
+                            )
+                        </>
+                    )}
                 </>
             ),
-            dataIndex: 'enable',
-            width: '15em',
+            width: '8em',
             align: 'center',
             render: (_, record) => (
                 <>
@@ -150,14 +151,16 @@ const Template = () => {
                                 </a>
                             </Permission>
                         )}
-                        <Permission operationCode={'system:tool:modify:base'}>
-                            <a
-                                style={{ color: COLOR_PRODUCTION }}
-                                onClick={handleOnEditBtnClick(record)}
-                            >
-                                编辑
-                            </a>
-                        </Permission>
+                        {!Object.keys(hasEdited).length && (
+                            <Permission operationCode={'system:tool:modify:base'}>
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnEditBtnClick(record)}
+                                >
+                                    编辑
+                                </a>
+                            </Permission>
+                        )}
                         <Permission operationCode={'system:tool:delete:base'}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
@@ -203,11 +206,6 @@ const Template = () => {
 
     const handleOnEditBtnClick = (value: ToolTemplateVo) => {
         return () => {
-            if (Object.keys(hasEdited).length) {
-                void message.warning('编辑前请保存修改')
-                return
-            }
-
             setIsDrawerEdit(true)
             setIsDrawerOpen(true)
             form.setFieldValue('id', value.id)
@@ -362,6 +360,16 @@ const Template = () => {
                             ...templateDetailData,
                             [record.id]: response.data!
                         })
+                        setTemplateData(
+                            templateData.map((value) =>
+                                value.id === response.data!.id
+                                    ? {
+                                          ...response.data!,
+                                          source: { id: response.data!.source.id }
+                                      }
+                                    : value
+                            )
+                        )
                         break
                     default:
                         void message.error(`获取模板 ${record.name} 文件内容失败，请稍后重试`)
@@ -382,11 +390,6 @@ const Template = () => {
         }
 
         const handleOnAddFile = () => {
-            if (Object.keys(hasEdited).length) {
-                void message.warning('新建文件前请先保存更改')
-                return
-            }
-
             void modal.confirm({
                 title: '新建文件',
                 content: (
@@ -493,11 +496,17 @@ const Template = () => {
             {
                 title: (
                     <>
-                        操作 (
-                        <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddFile}>
-                            新增
-                        </a>
-                        )
+                        操作
+                        {!Object.keys(hasEdited).length && (
+                            <>
+                                {' '}
+                                (
+                                <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddFile}>
+                                    新增
+                                </a>
+                                )
+                            </>
+                        )}
                     </>
                 ),
                 dataIndex: 'enable',
@@ -514,22 +523,26 @@ const Template = () => {
                                     编辑
                                 </a>
                             </Permission>
-                            <Permission operationCode={'system:tool:modify:category'}>
-                                <a
-                                    onClick={handleOnRenameFile(record.name)}
-                                    style={{ color: COLOR_PRODUCTION }}
-                                >
-                                    重命名
-                                </a>
-                            </Permission>
-                            <Permission operationCode={'system:tool:delete:category'}>
-                                <a
-                                    onClick={handleOnDeleteFile(record.name)}
-                                    style={{ color: COLOR_PRODUCTION }}
-                                >
-                                    删除
-                                </a>
-                            </Permission>
+                            {!Object.keys(hasEdited).length && (
+                                <Permission operationCode={'system:tool:modify:category'}>
+                                    <a
+                                        onClick={handleOnRenameFile(record.name)}
+                                        style={{ color: COLOR_PRODUCTION }}
+                                    >
+                                        重命名
+                                    </a>
+                                </Permission>
+                            )}
+                            {!Object.keys(hasEdited).length && (
+                                <Permission operationCode={'system:tool:delete:category'}>
+                                    <a
+                                        onClick={handleOnDeleteFile(record.name)}
+                                        style={{ color: COLOR_PRODUCTION }}
+                                    >
+                                        删除
+                                    </a>
+                                </Permission>
+                            )}
                         </AntdSpace>
                     </>
                 )
@@ -551,10 +564,6 @@ const Template = () => {
 
         const handleOnRenameFile = (fileName: string) => {
             return () => {
-                if (Object.keys(hasEdited).length) {
-                    void message.warning('重命名文件前请先保存更改')
-                    return
-                }
                 renameFileForm.setFieldValue('fileName', fileName)
                 void modal.confirm({
                     title: '重命名文件',
@@ -655,11 +664,6 @@ const Template = () => {
 
         const handleOnDeleteFile = (fileName: string) => {
             return () => {
-                if (Object.keys(hasEdited).length) {
-                    void message.warning('删除文件前请先保存更改')
-                    return
-                }
-
                 modal
                     .confirm({
                         title: '确定删除',
@@ -726,7 +730,9 @@ const Template = () => {
 
     const handleOnChangeFileContent = (_content: string, _fileName: string, files: IFiles) => {
         setEditingFiles({ ...editingFiles, [editingTemplateId]: files })
-        setHasEdited({ ...hasEdited, [editingTemplateId]: true })
+        if (!hasEdited[editingTemplateId]) {
+            setHasEdited({ ...hasEdited, [editingTemplateId]: true })
+        }
     }
 
     const getBaseData = () => {
@@ -859,6 +865,7 @@ const Template = () => {
                                     onChangeFileContent={handleOnChangeFileContent}
                                     showFileSelector={false}
                                     tsconfig={tsconfig}
+                                    readonly={isLoading || templateDetailLoading[editingTemplateId]}
                                 />
                                 <div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
                                     <Icon component={IconOxygenClose} />
@@ -868,7 +875,7 @@ const Template = () => {
                     </FlexBox>
                 </HideScrollbar>
                 <AntdDrawer
-                    title={isDrawerEdit ? '编辑基板' : '添加基板'}
+                    title={isDrawerEdit ? '编辑模板' : '添加模板'}
                     onClose={handleOnDrawerClose}
                     open={isDrawerOpen}
                     closable={!isSubmitting}

From 55065cd5afc233b1313bd5ce2b0c5abccbab8eee Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 24 Jan 2024 14:34:19 +0800
Subject: [PATCH 197/307] Upgrade dependencies

---
 package-lock.json | 244 ++++++++++++++++++++--------------------------
 package.json      |  26 ++---
 2 files changed, 119 insertions(+), 151 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 901d1e6..0c6b21d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,24 +12,24 @@
         "@marsidev/react-turnstile": "^0.4.1",
         "@monaco-editor/react": "^4.6.0",
         "@typescript/ata": "^0.9.4",
-        "antd": "^5.13.1",
+        "antd": "^5.13.2",
         "axios": "^1.6.5",
         "dayjs": "^1.11.10",
         "echarts": "^5.4.3",
-        "esbuild-wasm": "^0.19.11",
+        "esbuild-wasm": "^0.19.12",
         "fast-deep-equal": "^3.1.3",
         "fflate": "^0.8.1",
         "jwt-decode": "^4.0.0",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
-        "match-sorter": "^6.3.1",
+        "match-sorter": "^6.3.3",
         "moment": "^2.30.1",
         "monaco-editor": "^0.45.0",
         "monaco-jsx-syntax-highlight": "^1.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router": "^6.21.2",
-        "react-router-dom": "^6.21.2",
+        "react-router": "^6.21.3",
+        "react-router-dom": "^6.21.3",
         "size-sensor": "^1.0.2",
         "vanilla-tilt": "^1.8.1"
       },
@@ -38,28 +38,28 @@
         "@svgr/plugin-jsx": "^8.1.0",
         "@types/jsdom": "^21.1.6",
         "@types/lodash": "^4.14.202",
-        "@types/node": "^20.11.1",
+        "@types/node": "^20.11.5",
         "@types/react": "^18.2.48",
         "@types/react-dom": "^18.2.18",
-        "@typescript-eslint/eslint-plugin": "^6.18.1",
-        "@typescript-eslint/parser": "^6.18.1",
+        "@typescript-eslint/eslint-plugin": "^6.19.1",
+        "@typescript-eslint/parser": "^6.19.1",
         "@vitejs/plugin-react": "^4.2.1",
         "eslint": "^8.56.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-config-standard-with-typescript": "^43.0.0",
+        "eslint-config-standard-with-typescript": "^43.0.1",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-promise": "^6.1.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.5",
-        "jsdom": "^23.2.0",
-        "prettier": "^3.2.2",
-        "sass": "^1.69.7",
+        "jsdom": "^24.0.0",
+        "prettier": "^3.2.4",
+        "sass": "^1.70.0",
         "stylelint-config-prettier": "^9.0.5",
         "typescript": "^5.3.3",
         "unplugin-auto-import": "^0.17.3",
         "unplugin-icons": "^0.18.2",
-        "vite": "^5.0.11"
+        "vite": "^5.0.12"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -223,17 +223,6 @@
       "integrity": "sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==",
       "dev": true
     },
-    "node_modules/@asamuzakjp/dom-selector": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmmirror.com/@asamuzakjp/dom-selector/-/dom-selector-2.0.2.tgz",
-      "integrity": "sha512-x1KXOatwofR6ZAYzXRBL5wrdV0vwNxlTCK9NCuLqAzQYARqGcvFwiJA6A1ERuh+dgeA4Dxm3JBYictIes+SqUQ==",
-      "dev": true,
-      "dependencies": {
-        "bidi-js": "^1.0.3",
-        "css-tree": "^2.3.1",
-        "is-potential-custom-element-name": "^1.0.1"
-      }
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
@@ -1400,9 +1389,9 @@
       }
     },
     "node_modules/@rc-component/tour": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmmirror.com/@rc-component/tour/-/tour-1.12.1.tgz",
-      "integrity": "sha512-P2pvSN+rImacOoTuT4NZ+tdjJmxoi6FZ9w++7GnYK6hVeU8qD+iLnDHkgtE7tuvpZxIRS3dPF5O2ykupHx9E/g==",
+      "version": "1.12.3",
+      "resolved": "https://registry.npmmirror.com/@rc-component/tour/-/tour-1.12.3.tgz",
+      "integrity": "sha512-U4mf1FiUxGCwrX4ed8op77Y8VKur+8Y/61ylxtqGbcSoh1EBC7bWd/DkLu0ClTUrKZInqEi1FL7YgFtnT90vHA==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "@rc-component/portal": "^1.0.0-9",
@@ -1873,9 +1862,9 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "20.11.1",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.11.1.tgz",
-      "integrity": "sha512-DsXojJUES2M+FE8CpptJTKpg+r54moV9ZEncPstni1WHFmTcCzeFLnMFfyhCVS8XNOy/OQG+8lVxRLRrVHmV5A==",
+      "version": "20.11.5",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.11.5.tgz",
+      "integrity": "sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -1940,16 +1929,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.18.1.tgz",
-      "integrity": "sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==",
+      "version": "6.19.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.19.1.tgz",
+      "integrity": "sha512-roQScUGFruWod9CEyoV5KlCYrubC/fvG8/1zXuT0WTcxX87GnMMmnksMwSg99lo1xiKrBzw2icsJPMAw1OtKxg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.18.1",
-        "@typescript-eslint/type-utils": "6.18.1",
-        "@typescript-eslint/utils": "6.18.1",
-        "@typescript-eslint/visitor-keys": "6.18.1",
+        "@typescript-eslint/scope-manager": "6.19.1",
+        "@typescript-eslint/type-utils": "6.19.1",
+        "@typescript-eslint/utils": "6.19.1",
+        "@typescript-eslint/visitor-keys": "6.19.1",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.4",
@@ -2004,15 +1993,15 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-6.18.1.tgz",
-      "integrity": "sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==",
+      "version": "6.19.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-6.19.1.tgz",
+      "integrity": "sha512-WEfX22ziAh6pRE9jnbkkLGp/4RhTpffr2ZK5bJ18M8mIfA8A+k97U9ZyaXCEJRlmMHh7R9MJZWXp/r73DzINVQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.18.1",
-        "@typescript-eslint/types": "6.18.1",
-        "@typescript-eslint/typescript-estree": "6.18.1",
-        "@typescript-eslint/visitor-keys": "6.18.1",
+        "@typescript-eslint/scope-manager": "6.19.1",
+        "@typescript-eslint/types": "6.19.1",
+        "@typescript-eslint/typescript-estree": "6.19.1",
+        "@typescript-eslint/visitor-keys": "6.19.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -2028,26 +2017,26 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-6.18.1.tgz",
-      "integrity": "sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==",
+      "version": "6.19.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-6.19.1.tgz",
+      "integrity": "sha512-4CdXYjKf6/6aKNMSly/BP4iCSOpvMmqtDzRtqFyyAae3z5kkqEjKndR5vDHL8rSuMIIWP8u4Mw4VxLyxZW6D5w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.18.1",
-        "@typescript-eslint/visitor-keys": "6.18.1"
+        "@typescript-eslint/types": "6.19.1",
+        "@typescript-eslint/visitor-keys": "6.19.1"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-6.18.1.tgz",
-      "integrity": "sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==",
+      "version": "6.19.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-6.19.1.tgz",
+      "integrity": "sha512-0vdyld3ecfxJuddDjACUvlAeYNrHP/pDeQk2pWBR2ESeEzQhg52DF53AbI9QCBkYE23lgkhLCZNkHn2hEXXYIg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.18.1",
-        "@typescript-eslint/utils": "6.18.1",
+        "@typescript-eslint/typescript-estree": "6.19.1",
+        "@typescript-eslint/utils": "6.19.1",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -2064,22 +2053,22 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/types/-/types-6.18.1.tgz",
-      "integrity": "sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==",
+      "version": "6.19.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/types/-/types-6.19.1.tgz",
+      "integrity": "sha512-6+bk6FEtBhvfYvpHsDgAL3uo4BfvnTnoge5LrrCj2eJN8g3IJdLTD4B/jK3Q6vo4Ql/Hoip9I8aB6fF+6RfDqg==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.1.tgz",
-      "integrity": "sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==",
+      "version": "6.19.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.19.1.tgz",
+      "integrity": "sha512-aFdAxuhzBFRWhy+H20nYu19+Km+gFfwNO4TEqyszkMcgBDYQjmPJ61erHxuT2ESJXhlhrO7I5EFIlZ+qGR8oVA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.18.1",
-        "@typescript-eslint/visitor-keys": "6.18.1",
+        "@typescript-eslint/types": "6.19.1",
+        "@typescript-eslint/visitor-keys": "6.19.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -2151,17 +2140,17 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-6.18.1.tgz",
-      "integrity": "sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==",
+      "version": "6.19.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-6.19.1.tgz",
+      "integrity": "sha512-JvjfEZuP5WoMqwh9SPAPDSHSg9FBHHGhjPugSRxu5jMfjvBpq5/sGTD+9M9aQ5sh6iJ8AY/Kk/oUYVEMAPwi7w==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
         "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.18.1",
-        "@typescript-eslint/types": "6.18.1",
-        "@typescript-eslint/typescript-estree": "6.18.1",
+        "@typescript-eslint/scope-manager": "6.19.1",
+        "@typescript-eslint/types": "6.19.1",
+        "@typescript-eslint/typescript-estree": "6.19.1",
         "semver": "^7.5.4"
       },
       "engines": {
@@ -2205,12 +2194,12 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.1.tgz",
-      "integrity": "sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==",
+      "version": "6.19.1",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.19.1.tgz",
+      "integrity": "sha512-gkdtIO+xSO/SmI0W68DBg4u1KElmIUo3vXzgHyGPs6cxgB0sa3TlptRAAE0hUY1hM6FcDKEv7aIwiTGm76cXfQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.18.1",
+        "@typescript-eslint/types": "6.19.1",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -2321,9 +2310,9 @@
       }
     },
     "node_modules/antd": {
-      "version": "5.13.1",
-      "resolved": "https://registry.npmmirror.com/antd/-/antd-5.13.1.tgz",
-      "integrity": "sha512-/qAPsr6UyJPSFZQD9G7kW98GelH2Bajli+1q7CRW4IinYQ0R0UVJckFX11emByhiU4Jd4WNH/hOO+fZtp0eVDA==",
+      "version": "5.13.2",
+      "resolved": "https://registry.npmmirror.com/antd/-/antd-5.13.2.tgz",
+      "integrity": "sha512-P+N8gc0NOPy2WqJj/57Ey3dZUmb7nEUwAM+CIJaR5SOEjZnhEtMGRJSt+3lnhJ3MNRR39aR6NYkRVp2mYfphiA==",
       "dependencies": {
         "@ant-design/colors": "^7.0.2",
         "@ant-design/cssinjs": "^1.18.2",
@@ -2332,7 +2321,7 @@
         "@ctrl/tinycolor": "^3.6.1",
         "@rc-component/color-picker": "~1.5.1",
         "@rc-component/mutate-observer": "^1.1.0",
-        "@rc-component/tour": "~1.12.1",
+        "@rc-component/tour": "~1.12.2",
         "@rc-component/trigger": "^1.18.2",
         "classnames": "^2.5.1",
         "copy-to-clipboard": "^3.3.3",
@@ -2561,15 +2550,6 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
-    "node_modules/bidi-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/bidi-js/-/bidi-js-1.0.3.tgz",
-      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
-      "dev": true,
-      "dependencies": {
-        "require-from-string": "^2.0.2"
-      }
-    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -2881,19 +2861,6 @@
         "node": ">=12.22"
       }
     },
-    "node_modules/css-tree": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmmirror.com/css-tree/-/css-tree-2.3.1.tgz",
-      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-      "dev": true,
-      "dependencies": {
-        "mdn-data": "2.0.30",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-      }
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
@@ -3244,9 +3211,9 @@
       }
     },
     "node_modules/esbuild-wasm": {
-      "version": "0.19.11",
-      "resolved": "https://registry.npmmirror.com/esbuild-wasm/-/esbuild-wasm-0.19.11.tgz",
-      "integrity": "sha512-MIhnpc1TxERUHomteO/ZZHp+kUawGEc03D/8vMHGzffLvbFLeDe6mwxqEZwlqBNY7SLWbyp6bBQAcCen8+wpjQ==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmmirror.com/esbuild-wasm/-/esbuild-wasm-0.19.12.tgz",
+      "integrity": "sha512-Zmc4hk6FibJZBcTx5/8K/4jT3/oG1vkGTEeKJUQFCUQKimD6Q7+adp/bdVQyYJFolMKaXkQnVZdV4O5ZaTYmyQ==",
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -3352,9 +3319,9 @@
       }
     },
     "node_modules/eslint-config-standard-with-typescript": {
-      "version": "43.0.0",
-      "resolved": "https://registry.npmmirror.com/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-43.0.0.tgz",
-      "integrity": "sha512-AT0qK01M5bmsWiE3UZvaQO5da1y1n6uQckAKqGNe6zPW5IOzgMLXZxw77nnFm+C11nxAZXsCPrbsgJhSrGfX6Q==",
+      "version": "43.0.1",
+      "resolved": "https://registry.npmmirror.com/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-43.0.1.tgz",
+      "integrity": "sha512-WfZ986+qzIzX6dcr4yGUyVb/l9N3Z8wPXCc5z/70fljs3UbWhhV+WxrfgsqMToRzuuyX9MqZ974pq2UPhDTOcA==",
       "dev": true,
       "dependencies": {
         "@typescript-eslint/parser": "^6.4.0",
@@ -4740,12 +4707,11 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "23.2.0",
-      "resolved": "https://registry.npmmirror.com/jsdom/-/jsdom-23.2.0.tgz",
-      "integrity": "sha512-L88oL7D/8ufIES+Zjz7v0aes+oBMh2Xnh3ygWvL0OaICOomKEPKuPnIfBJekiXr+BHbbMjrWn/xqrDQuxFTeyA==",
+      "version": "24.0.0",
+      "resolved": "https://registry.npmmirror.com/jsdom/-/jsdom-24.0.0.tgz",
+      "integrity": "sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==",
       "dev": true,
       "dependencies": {
-        "@asamuzakjp/dom-selector": "^2.0.1",
         "cssstyle": "^4.0.1",
         "data-urls": "^5.0.0",
         "decimal.js": "^10.4.3",
@@ -4754,6 +4720,7 @@
         "http-proxy-agent": "^7.0.0",
         "https-proxy-agent": "^7.0.2",
         "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.7",
         "parse5": "^7.1.2",
         "rrweb-cssom": "^0.6.0",
         "saxes": "^6.0.0",
@@ -5014,12 +4981,12 @@
       }
     },
     "node_modules/match-sorter": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmmirror.com/match-sorter/-/match-sorter-6.3.1.tgz",
-      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmmirror.com/match-sorter/-/match-sorter-6.3.3.tgz",
+      "integrity": "sha512-sgiXxrRijEe0SzHKGX4HouCpfHRPnqteH42UdMEW7BlWy990ZkzcvonJGv4Uu9WE7Y1f8Yocm91+4qFPCbmNww==",
       "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "remove-accents": "0.4.2"
+        "@babel/runtime": "^7.23.8",
+        "remove-accents": "0.5.0"
       }
     },
     "node_modules/mathml-tag-names": {
@@ -5029,12 +4996,6 @@
       "dev": true,
       "peer": true
     },
-    "node_modules/mdn-data": {
-      "version": "2.0.30",
-      "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.30.tgz",
-      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-      "dev": true
-    },
     "node_modules/meow": {
       "version": "9.0.0",
       "resolved": "https://registry.npmmirror.com/meow/-/meow-9.0.0.tgz",
@@ -5316,6 +5277,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmmirror.com/nwsapi/-/nwsapi-2.2.7.tgz",
+      "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
+      "dev": true
+    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -5654,9 +5621,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.2.2.tgz",
-      "integrity": "sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.2.4.tgz",
+      "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -6335,9 +6302,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.21.2",
-      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.21.2.tgz",
-      "integrity": "sha512-jJcgiwDsnaHIeC+IN7atO0XiSRCrOsQAHHbChtJxmgqG2IaYQXSnhqGb5vk2CU/wBQA12Zt+TkbuJjIn65gzbA==",
+      "version": "6.21.3",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.21.3.tgz",
+      "integrity": "sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==",
       "dependencies": {
         "@remix-run/router": "1.14.2"
       },
@@ -6349,12 +6316,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.21.2",
-      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.21.2.tgz",
-      "integrity": "sha512-tE13UukgUOh2/sqYr6jPzZTzmzc70aGRP4pAjG2if0IP3aUT+sBtAKUJh0qMh0zylJHGLmzS+XWVaON4UklHeg==",
+      "version": "6.21.3",
+      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.21.3.tgz",
+      "integrity": "sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==",
       "dependencies": {
         "@remix-run/router": "1.14.2",
-        "react-router": "6.21.2"
+        "react-router": "6.21.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6547,15 +6514,16 @@
       }
     },
     "node_modules/remove-accents": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmmirror.com/remove-accents/-/remove-accents-0.4.2.tgz",
-      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+      "version": "0.5.0",
+      "resolved": "https://registry.npmmirror.com/remove-accents/-/remove-accents-0.5.0.tgz",
+      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
     },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6695,9 +6663,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.69.7",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.69.7.tgz",
-      "integrity": "sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==",
+      "version": "1.70.0",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.70.0.tgz",
+      "integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -7743,9 +7711,9 @@
       "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw=="
     },
     "node_modules/vite": {
-      "version": "5.0.11",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.0.11.tgz",
-      "integrity": "sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==",
+      "version": "5.0.12",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.0.12.tgz",
+      "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.19.3",
diff --git a/package.json b/package.json
index c5cbd78..d9bdd2d 100644
--- a/package.json
+++ b/package.json
@@ -18,24 +18,24 @@
     "@marsidev/react-turnstile": "^0.4.1",
     "@monaco-editor/react": "^4.6.0",
     "@typescript/ata": "^0.9.4",
-    "antd": "^5.13.1",
+    "antd": "^5.13.2",
     "axios": "^1.6.5",
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
-    "esbuild-wasm": "^0.19.11",
+    "esbuild-wasm": "^0.19.12",
     "fast-deep-equal": "^3.1.3",
     "fflate": "^0.8.1",
     "jwt-decode": "^4.0.0",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
-    "match-sorter": "^6.3.1",
+    "match-sorter": "^6.3.3",
     "moment": "^2.30.1",
     "monaco-editor": "^0.45.0",
     "monaco-jsx-syntax-highlight": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.21.2",
-    "react-router-dom": "^6.21.2",
+    "react-router": "^6.21.3",
+    "react-router-dom": "^6.21.3",
     "size-sensor": "^1.0.2",
     "vanilla-tilt": "^1.8.1"
   },
@@ -44,27 +44,27 @@
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/jsdom": "^21.1.6",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.1",
+    "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard-with-typescript": "^43.0.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "jsdom": "^23.2.0",
-    "prettier": "^3.2.2",
-    "sass": "^1.69.7",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.2.4",
+    "sass": "^1.70.0",
     "stylelint-config-prettier": "^9.0.5",
     "typescript": "^5.3.3",
     "unplugin-auto-import": "^0.17.3",
     "unplugin-icons": "^0.18.2",
-    "vite": "^5.0.11"
+    "vite": "^5.0.12"
   }
 }

From cade87febee01443e0c1abdeb8bf72aaec3a6b6f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 24 Jan 2024 14:35:29 +0800
Subject: [PATCH 198/307] Optimize Playground

---
 .../Playground/Output/Preview/Render.tsx      | 77 +++++++++++++++++++
 .../Playground/Output/Preview/index.tsx       | 68 ++--------------
 src/components/Playground/compiler.ts         |  5 +-
 3 files changed, 89 insertions(+), 61 deletions(-)
 create mode 100644 src/components/Playground/Output/Preview/Render.tsx

diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx
new file mode 100644
index 0000000..940a80f
--- /dev/null
+++ b/src/components/Playground/Output/Preview/Render.tsx
@@ -0,0 +1,77 @@
+import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
+
+interface RenderProps {
+    iframeKey: string
+    compiledCode: string
+    onError?: (errorMsg: string) => void
+}
+
+interface IMessage {
+    type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE'
+    msg: string
+    data: {
+        compiledCode: string
+    }
+}
+
+const getIframeUrl = (iframeRaw: string) => {
+    const shimsUrl = '//unpkg.com/es-module-shims/dist/es-module-shims.js'
+    // 判断浏览器是否支持esm ，不支持esm就引入es-module-shims
+    const newIframeRaw =
+        typeof import.meta === 'undefined'
+            ? iframeRaw.replace(
+                  '<!-- es-module-shims -->',
+                  `<script async src="${shimsUrl}"></script>`
+              )
+            : iframeRaw
+    return URL.createObjectURL(new Blob([newIframeRaw], { type: 'text/html' }))
+}
+
+const iframeUrl = getIframeUrl(iframeRaw)
+
+const Render = ({ iframeKey, compiledCode, onError }: RenderProps) => {
+    const iframeRef = useRef<HTMLIFrameElement>(null)
+    const [loaded, setLoaded] = useState(false)
+
+    const handleMessage = ({ data }: { data: IMessage }) => {
+        const { type, msg } = data
+        switch (type) {
+            case 'LOADED':
+                setLoaded(true)
+                break
+            case 'ERROR':
+                onError?.(msg)
+                break
+            case 'DONE':
+                onError?.('')
+        }
+    }
+
+    useEffect(() => {
+        window.addEventListener('message', handleMessage)
+
+        return () => {
+            window.removeEventListener('message', handleMessage)
+        }
+    }, [])
+
+    useEffect(() => {
+        if (loaded) {
+            iframeRef.current?.contentWindow?.postMessage({
+                type: 'UPDATE',
+                data: { compiledCode }
+            } as IMessage)
+        }
+    }, [compiledCode, loaded])
+
+    return (
+        <iframe
+            key={iframeKey}
+            ref={iframeRef}
+            src={iframeUrl}
+            sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals allow-same-origin"
+        />
+    )
+}
+
+export default Render
diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx
index 8620120..2f6dd0b 100644
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -1,8 +1,8 @@
 import '@/components/Playground/Output/Preview/preview.scss'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
-import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
-import { ENTRY_FILE_NAME } from '@/components/Playground/files.ts'
+import { ENTRY_FILE_NAME } from '@/components/Playground/files'
+import Render from '@/components/Playground/Output/Preview/Render'
 
 interface PreviewProps {
     iframeKey: string
@@ -10,79 +10,27 @@ interface PreviewProps {
     importMap: IImportMap
 }
 
-interface IMessage {
-    type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE'
-    msg: string
-    data: {
-        compiledCode: string
-    }
-}
-
-const getIframeUrl = (iframeRaw: string) => {
-    const shimsUrl = '//unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js'
-    // 判断浏览器是否支持esm ，不支持esm就引入es-module-shims
-    const newIframeRaw =
-        typeof import.meta === 'undefined'
-            ? iframeRaw.replace(
-                  '<!-- es-module-shims -->',
-                  `<script async src="${shimsUrl}"></script>`
-              )
-            : iframeRaw
-    return URL.createObjectURL(new Blob([newIframeRaw], { type: 'text/html' }))
-}
-
-const iframeUrl = getIframeUrl(iframeRaw)
-
 const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
-    const iframeRef = useRef<HTMLIFrameElement>(null)
     const [errorMsg, setErrorMsg] = useState('')
-    const [loaded, setLoaded] = useState(false)
+    const [compiledCode, setCompiledCode] = useState('')
 
-    const handleMessage = ({ data }: { data: IMessage }) => {
-        const { type, msg } = data
-        switch (type) {
-            case 'LOADED':
-                setLoaded(true)
-                break
-            case 'ERROR':
-                setErrorMsg(msg)
-                break
-            case 'DONE':
-                setErrorMsg('')
-        }
+    const handleOnError = (errorMsg: string) => {
+        setErrorMsg(errorMsg)
     }
 
-    useEffect(() => {
-        window.addEventListener('message', handleMessage)
-
-        return () => {
-            window.removeEventListener('message', handleMessage)
-        }
-    }, [])
-
     useEffect(() => {
         Compiler.compile(files, importMap, [ENTRY_FILE_NAME])
             .then((result) => {
-                if (loaded) {
-                    iframeRef.current?.contentWindow?.postMessage({
-                        type: 'UPDATE',
-                        data: { compiledCode: result.outputFiles[0].text }
-                    } as IMessage)
-                }
+                setCompiledCode(result.outputFiles[0].text)
             })
             .catch((e: Error) => {
                 setErrorMsg(`编译失败：${e.message}`)
             })
-    }, [files, Compiler, loaded])
+    }, [files, Compiler])
 
     return (
         <div data-component={'playground-preview'}>
-            <iframe
-                key={iframeKey}
-                ref={iframeRef}
-                src={iframeUrl}
-                sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals allow-same-origin"
-            />
+            <Render iframeKey={iframeKey} compiledCode={compiledCode} onError={handleOnError} />
             {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
         </div>
     )
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index 566eac9..d7a9bea 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -14,7 +14,10 @@ class Compiler {
     constructor() {
         try {
             void esbuild
-                .initialize({ worker: true, wasmURL: 'https://esm.sh/esbuild-wasm/esbuild.wasm' })
+                .initialize({
+                    worker: true,
+                    wasmURL: 'https://esm.sh/esbuild-wasm@0.19.12/esbuild.wasm'
+                })
                 .finally(() => {
                     this.init = true
                 })

From 7ad480e23af1183f76df06cab3ed3a5bea97866d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 24 Jan 2024 14:35:41 +0800
Subject: [PATCH 199/307] Optimize code

---
 src/AuthRoute.tsx                          | 1 +
 src/pages/System/Statistics/OnlineInfo.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index c93526f..fa7241d 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -22,6 +22,7 @@ const AuthRoute = () => {
             if (!isLogin) {
                 return (
                     <Navigate
+                        replace
                         to={getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`)}
                     />
                 )
diff --git a/src/pages/System/Statistics/OnlineInfo.tsx b/src/pages/System/Statistics/OnlineInfo.tsx
index 03ea1a4..59704af 100644
--- a/src/pages/System/Statistics/OnlineInfo.tsx
+++ b/src/pages/System/Statistics/OnlineInfo.tsx
@@ -121,7 +121,7 @@ const OnlineInfo = () => {
                         disabled={isLoading}
                         style={{ width: '8em' }}
                     >
-                        <AntdSelect.Option key={'DAY'}>今天</AntdSelect.Option>
+                        <AntdSelect.Option key={'DAY'}>最近24小时</AntdSelect.Option>
                         <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
                         <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
                         <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>

From 983d8e0923063fc8aec29513cc53502590155dae Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 24 Jan 2024 16:09:16 +0800
Subject: [PATCH 200/307] Optimize route

---
 src/AuthRoute.tsx             |  1 -
 src/global.d.ts               |  1 +
 src/pages/SystemFramework.tsx | 23 ++++++++++++++---------
 src/router/system.tsx         |  4 ++++
 src/util/route.tsx            | 14 ++++++++++----
 5 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx
index fa7241d..0336fd1 100644
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -1,7 +1,6 @@
 import { PRODUCTION_NAME } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
 import { getLoginStatus, getVerifyStatus_async } from '@/util/auth'
-import { Navigate } from 'react-router'
 
 const AuthRoute = () => {
     const [searchParams] = useSearchParams()
diff --git a/src/global.d.ts b/src/global.d.ts
index a950bd8..772a515 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -25,6 +25,7 @@ interface RouteJsonObject {
     menu?: boolean
     auth?: boolean
     permission?: boolean
+    operationCode?: string
     autoHide?: boolean
     children?: RouteJsonObject[]
 }
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index 6084d97..f0e616c 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -14,7 +14,8 @@ const SystemFramework = () => {
                             <Sidebar.ItemList>
                                 {getSystemRouteJson().map((route) => {
                                     return (
-                                        route.menu && (
+                                        route.menu &&
+                                        route.name && (
                                             <Sidebar.Item
                                                 end={route.id === 'system' ? true : undefined}
                                                 path={route.absolutePath}
@@ -22,14 +23,18 @@ const SystemFramework = () => {
                                                 text={route.name}
                                                 key={route.id}
                                             >
-                                                {route.children?.map((subRoute) => (
-                                                    <Sidebar.Item
-                                                        end
-                                                        path={subRoute.absolutePath}
-                                                        text={subRoute.name}
-                                                        key={subRoute.id}
-                                                    />
-                                                ))}
+                                                {route.children?.map(
+                                                    (subRoute) =>
+                                                        subRoute &&
+                                                        subRoute.name && (
+                                                            <Sidebar.Item
+                                                                end
+                                                                path={subRoute.absolutePath}
+                                                                text={subRoute.name}
+                                                                key={subRoute.id}
+                                                            />
+                                                        )
+                                                )}
                                             </Sidebar.Item>
                                         )
                                     )
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 30f1f8e..58158e1 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -45,6 +45,7 @@ const system: RouteJsonObject[] = [
                 id: 'system-tools-index',
                 component: lazy(() => import('@/pages/System/Tools')),
                 name: '工具管理',
+                operationCode: 'system:tool:query:tool',
                 menu: true,
                 autoHide: true
             },
@@ -54,6 +55,7 @@ const system: RouteJsonObject[] = [
                 id: 'system-tools-template',
                 component: lazy(() => import('@/pages/System/Tools/Template')),
                 name: '模板管理',
+                operationCode: 'system:tool:query:template',
                 menu: true,
                 autoHide: true
             },
@@ -63,6 +65,7 @@ const system: RouteJsonObject[] = [
                 id: 'system-tools-base',
                 component: lazy(() => import('@/pages/System/Tools/Base')),
                 name: '基板管理',
+                operationCode: 'system:tool:query:base',
                 menu: true,
                 autoHide: true
             },
@@ -72,6 +75,7 @@ const system: RouteJsonObject[] = [
                 id: 'system-tools-category',
                 component: lazy(() => import('@/pages/System/Tools/Category')),
                 name: '类别管理',
+                operationCode: 'system:tool:query:category',
                 menu: true,
                 autoHide: true
             }
diff --git a/src/util/route.tsx b/src/util/route.tsx
index 0899079..caf8372 100644
--- a/src/util/route.tsx
+++ b/src/util/route.tsx
@@ -1,5 +1,4 @@
-import { RouteObject } from 'react-router'
-import { hasPathPermission } from '@/util/auth'
+import { hasPathPermission, hasPermission } from '@/util/auth'
 
 export const getRedirectUrl = (path: string, redirectUrl: string): string => {
     return `${path}?redirect=${encodeURIComponent(redirectUrl)}`
@@ -18,12 +17,13 @@ export const getAuthRoute = (
     route: RouteJsonObject[],
     parentPermission: boolean = false
 ): RouteJsonObject[] => {
-    return route
+    const temp = route
         .filter(
             (value) =>
                 value.path === '*' ||
                 !(value.permission || parentPermission) ||
-                hasPathPermission(value.absolutePath)
+                (hasPathPermission(value.absolutePath) &&
+                    (!value.operationCode || hasPermission(value.operationCode)))
         )
         .map((value) => {
             if (value.children) {
@@ -31,6 +31,12 @@ export const getAuthRoute = (
             }
             return value
         })
+    temp.push({
+        path: '',
+        absolutePath: '',
+        element: <Navigate to={temp[0].absolutePath} replace />
+    })
+    return temp
 }
 
 export const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => {

From d6eaf819003cb803723700691c1d9588c303392e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 24 Jan 2024 16:10:16 +0800
Subject: [PATCH 201/307] Optimize permission

---
 src/components/common/Permission.tsx        |  4 +-
 src/pages/System/Group.tsx                  |  8 ++--
 src/pages/System/Role.tsx                   |  8 ++--
 src/pages/System/Settings/Base.tsx          |  2 +-
 src/pages/System/Settings/Mail.tsx          |  2 +-
 src/pages/System/Settings/SensitiveWord.tsx |  2 +-
 src/pages/System/Settings/index.tsx         |  8 ++--
 src/pages/System/Statistics/index.tsx       |  6 +--
 src/pages/System/Tools/Base.tsx             | 53 +++++++++++++--------
 src/pages/System/Tools/Category.tsx         | 18 ++++---
 src/pages/System/Tools/Template.tsx         | 40 ++++++++++------
 src/pages/System/User.tsx                   |  8 ++--
 12 files changed, 95 insertions(+), 64 deletions(-)

diff --git a/src/components/common/Permission.tsx b/src/components/common/Permission.tsx
index c3035b9..3a62604 100644
--- a/src/components/common/Permission.tsx
+++ b/src/components/common/Permission.tsx
@@ -2,13 +2,13 @@ import { PropsWithChildren } from 'react'
 import { hasPathPermission, hasPermission } from '@/util/auth'
 
 interface PermissionProps extends PropsWithChildren {
-    operationCode?: string
+    operationCode?: string[]
     path?: string
 }
 
 const Permission = (props: PermissionProps) => {
     if (
-        (!props.operationCode || hasPermission(props.operationCode)) &&
+        (!props.operationCode || props.operationCode.some(hasPermission)) &&
         (!props.path || hasPathPermission(props.path))
     ) {
         return props.children
diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index d286e84..51ae287 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -106,7 +106,7 @@ const Group = () => {
             render: (value, record) => (
                 <>
                     <AntdSpace size={'middle'}>
-                        <Permission operationCode={'system:group:modify:status'}>
+                        <Permission operationCode={['system:group:modify:status']}>
                             {value ? (
                                 <a
                                     style={{ color: COLOR_PRODUCTION }}
@@ -123,7 +123,7 @@ const Group = () => {
                                 </a>
                             )}
                         </Permission>
-                        <Permission operationCode={'system:group:modify:one'}>
+                        <Permission operationCode={['system:group:modify:one']}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnEditBtnClick(record)}
@@ -131,7 +131,7 @@ const Group = () => {
                                 编辑
                             </a>
                         </Permission>
-                        <Permission operationCode={'system:group:delete:one'}>
+                        <Permission operationCode={['system:group:delete:one']}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnDeleteBtnClick(record)}
@@ -495,7 +495,7 @@ const Group = () => {
 
     const toolbar = (
         <FlexBox direction={'horizontal'} gap={10}>
-            <Permission operationCode={'system:group:add:one'}>
+            <Permission operationCode={['system:group:add:one']}>
                 <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
                     <AntdButton
                         type={'primary'}
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index 4d6b2fd..04efd72 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -98,7 +98,7 @@ const Role = () => {
             render: (value, record) => (
                 <>
                     <AntdSpace size={'middle'}>
-                        <Permission operationCode={'system:role:modify:status'}>
+                        <Permission operationCode={['system:role:modify:status']}>
                             {value ? (
                                 <a
                                     style={{ color: COLOR_PRODUCTION }}
@@ -115,7 +115,7 @@ const Role = () => {
                                 </a>
                             )}
                         </Permission>
-                        <Permission operationCode={'system:role:modify:one'}>
+                        <Permission operationCode={['system:role:modify:one']}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnEditBtnClick(record)}
@@ -123,7 +123,7 @@ const Role = () => {
                                 编辑
                             </a>
                         </Permission>
-                        <Permission operationCode={'system:role:delete:one'}>
+                        <Permission operationCode={['system:role:delete:one']}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnDeleteBtnClick(record)}
@@ -504,7 +504,7 @@ const Role = () => {
 
     const toolbar = (
         <FlexBox direction={'horizontal'} gap={10}>
-            <Permission operationCode={'system:role:add:one'}>
+            <Permission operationCode={['system:role:add:one']}>
                 <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
                     <AntdButton
                         type={'primary'}
diff --git a/src/pages/System/Settings/Base.tsx b/src/pages/System/Settings/Base.tsx
index f4839e5..969e215 100644
--- a/src/pages/System/Settings/Base.tsx
+++ b/src/pages/System/Settings/Base.tsx
@@ -51,7 +51,7 @@ const Base = () => {
                 loading={loading}
                 onReset={handleOnReset}
                 onSave={handleOnSave}
-                modifyOperationCode={'system:settings:modify:base'}
+                modifyOperationCode={['system:settings:modify:base']}
             >
                 <AntdForm
                     form={baseForm}
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index 935f91c..91d6694 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -106,7 +106,7 @@ const Mail = () => {
                 loading={loading}
                 onReset={handleOnReset}
                 onSave={handleOnSave}
-                modifyOperationCode={'system:settings:modify:mail'}
+                modifyOperationCode={['system:settings:modify:mail']}
                 expand={
                     <AntdButton onClick={handleOnTest} title={'测试'}>
                         <Icon component={IconOxygenTest} />
diff --git a/src/pages/System/Settings/SensitiveWord.tsx b/src/pages/System/Settings/SensitiveWord.tsx
index f61b713..7284f54 100644
--- a/src/pages/System/Settings/SensitiveWord.tsx
+++ b/src/pages/System/Settings/SensitiveWord.tsx
@@ -106,7 +106,7 @@ const SensitiveWord = () => {
                 loading={loading}
                 onReset={handleOnReset}
                 onSave={handleOnSave}
-                modifyOperationCode={'system:settings:modify:sensitive'}
+                modifyOperationCode={['system:settings:modify:sensitive']}
             >
                 <AntdTransfer
                     listStyle={{ width: '100%', height: 400 }}
diff --git a/src/pages/System/Settings/index.tsx b/src/pages/System/Settings/index.tsx
index ce09551..ac2d4c6 100644
--- a/src/pages/System/Settings/index.tsx
+++ b/src/pages/System/Settings/index.tsx
@@ -15,7 +15,7 @@ interface SettingsCardProps extends PropsWithChildren {
     icon: IconComponent
     title: string
     loading?: boolean
-    modifyOperationCode?: string
+    modifyOperationCode?: string[]
     expand?: ReactNode
     onReset?: () => void
     onSave?: () => void
@@ -57,15 +57,15 @@ const Settings = () => {
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <FlexBox className={'root-col'}>
-                            <Permission operationCode={'system:settings:query:base'}>
+                            <Permission operationCode={['system:settings:query:base']}>
                                 <Base />
                             </Permission>
-                            <Permission operationCode={'system:settings:query:sensitive'}>
+                            <Permission operationCode={['system:settings:query:sensitive']}>
                                 <SensitiveWord />
                             </Permission>
                         </FlexBox>
                         <FlexBox className={'root-col'}>
-                            <Permission operationCode={'system:settings:query:mail'}>
+                            <Permission operationCode={['system:settings:query:mail']}>
                                 <Mail />
                             </Permission>
                         </FlexBox>
diff --git a/src/pages/System/Statistics/index.tsx b/src/pages/System/Statistics/index.tsx
index 1fa79ba..04077b2 100644
--- a/src/pages/System/Statistics/index.tsx
+++ b/src/pages/System/Statistics/index.tsx
@@ -47,15 +47,15 @@ const Statistics = () => {
             <FitFullscreen data-component={'system-statistics'}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
-                        <Permission operationCode={'system:statistics:query:usage'}>
+                        <Permission operationCode={['system:statistics:query:usage']}>
                             <OnlineInfo />
                             <ActiveInfo />
                         </Permission>
-                        <Permission operationCode={'system:statistics:query:base'}>
+                        <Permission operationCode={['system:statistics:query:base']}>
                             <HardwareInfo />
                             <SoftwareInfo />
                         </Permission>
-                        <Permission operationCode={'system:statistics:query:real'}>
+                        <Permission operationCode={['system:statistics:query:real']}>
                             <CPUInfo />
                             <StorageInfo />
                         </Permission>
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index d4a4907..f651653 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -8,7 +8,8 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { utcToLocalTime } from '@/util/datetime.tsx'
+import { utcToLocalTime } from '@/util/datetime'
+import { hasPermission } from '@/util/auth'
 import {
     r_sys_tool_base_add,
     r_sys_tool_base_delete,
@@ -125,14 +126,14 @@ const Base = () => {
                 <>
                     操作
                     {!Object.keys(hasEdited).length && (
-                        <>
+                        <Permission operationCode={['system:tool:add:base']}>
                             {' '}
                             (
                             <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
                                 新增
                             </a>
                             )
-                        </>
+                        </Permission>
                     )}
                 </>
             ),
@@ -142,15 +143,17 @@ const Base = () => {
                 <>
                     <AntdSpace size={'middle'}>
                         {!record.compiled && !Object.keys(hasEdited).length && (
-                            <a
-                                style={{ color: COLOR_PRODUCTION }}
-                                onClick={handleOnCompileBtnClick(record)}
-                            >
-                                编译
-                            </a>
+                            <Permission operationCode={['system:tool:modify:base']}>
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnCompileBtnClick(record)}
+                                >
+                                    编译
+                                </a>
+                            </Permission>
                         )}
                         {hasEdited[record.id] && (
-                            <Permission operationCode={'system:tool:modify:base'}>
+                            <Permission operationCode={['system:tool:modify:base']}>
                                 <a
                                     style={{ color: COLOR_PRODUCTION }}
                                     onClick={handleOnSaveBtnClick(record)}
@@ -160,7 +163,7 @@ const Base = () => {
                             </Permission>
                         )}
                         {!Object.keys(hasEdited).length && (
-                            <Permission operationCode={'system:tool:modify:base'}>
+                            <Permission operationCode={['system:tool:modify:base']}>
                                 <a
                                     style={{ color: COLOR_PRODUCTION }}
                                     onClick={handleOnEditBtnClick(record)}
@@ -169,7 +172,7 @@ const Base = () => {
                                 </a>
                             </Permission>
                         )}
-                        <Permission operationCode={'system:tool:delete:base'}>
+                        <Permission operationCode={['system:tool:delete:base']}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnDeleteBtnClick(record)}
@@ -652,14 +655,14 @@ const Base = () => {
                     <>
                         操作
                         {!Object.keys(hasEdited).length && (
-                            <>
+                            <Permission operationCode={['system:tool:modify:base']}>
                                 {' '}
                                 (
                                 <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddFile}>
                                     新增
                                 </a>
                                 )
-                            </>
+                            </Permission>
                         )}
                     </>
                 ),
@@ -669,16 +672,21 @@ const Base = () => {
                 render: (_, record) => (
                     <>
                         <AntdSpace size={'middle'}>
-                            <Permission operationCode={'system:tool:modify:category'}>
+                            <Permission
+                                operationCode={[
+                                    'system:tool:query:base',
+                                    'system:tool:modify:base'
+                                ]}
+                            >
                                 <a
                                     onClick={handleOnEditFile(record.name)}
                                     style={{ color: COLOR_PRODUCTION }}
                                 >
-                                    编辑
+                                    {hasPermission('system:tool:modify:base') ? '编辑' : '查看'}
                                 </a>
                             </Permission>
                             {!Object.keys(hasEdited).length && (
-                                <Permission operationCode={'system:tool:modify:category'}>
+                                <Permission operationCode={['system:tool:modify:base']}>
                                     <a
                                         onClick={handleOnRenameFile(record.name)}
                                         style={{ color: COLOR_PRODUCTION }}
@@ -688,7 +696,7 @@ const Base = () => {
                                 </Permission>
                             )}
                             {!Object.keys(hasEdited).length && (
-                                <Permission operationCode={'system:tool:delete:category'}>
+                                <Permission operationCode={['system:tool:delete:base']}>
                                     <a
                                         onClick={handleOnDeleteFile(record.name)}
                                         style={{ color: COLOR_PRODUCTION }}
@@ -880,6 +888,9 @@ const Base = () => {
     }
 
     const handleOnChangeFileContent = (_content: string, _fileName: string, files: IFiles) => {
+        if (!hasPermission('system:tool:modify:base')) {
+            return
+        }
         setEditingFiles({ ...editingFiles, [editingBaseId]: files })
         if (!hasEdited[editingBaseId]) {
             setHasEdited({ ...hasEdited, [editingBaseId]: true })
@@ -978,7 +989,11 @@ const Base = () => {
                                     onChangeFileContent={handleOnChangeFileContent}
                                     showFileSelector={false}
                                     tsconfig={tsconfig}
-                                    readonly={isLoading || baseDetailLoading[editingBaseId]}
+                                    readonly={
+                                        isLoading ||
+                                        baseDetailLoading[editingBaseId] ||
+                                        !hasPermission('system:tool:modify:base')
+                                    }
                                 />
                                 <div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
                                     <Icon component={IconOxygenClose} />
diff --git a/src/pages/System/Tools/Category.tsx b/src/pages/System/Tools/Category.tsx
index f7dd19c..e415db3 100644
--- a/src/pages/System/Tools/Category.tsx
+++ b/src/pages/System/Tools/Category.tsx
@@ -73,11 +73,15 @@ const Category = () => {
         {
             title: (
                 <>
-                    操作 (
-                    <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
-                        新增
-                    </a>
-                    )
+                    操作
+                    <Permission operationCode={['system:tool:add:category']}>
+                        {' '}
+                        (
+                        <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
+                            新增
+                        </a>
+                        )
+                    </Permission>
                 </>
             ),
             dataIndex: 'enable',
@@ -86,7 +90,7 @@ const Category = () => {
             render: (_, record) => (
                 <>
                     <AntdSpace size={'middle'}>
-                        <Permission operationCode={'system:tool:modify:category'}>
+                        <Permission operationCode={['system:tool:modify:category']}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnEditBtnClick(record)}
@@ -94,7 +98,7 @@ const Category = () => {
                                 编辑
                             </a>
                         </Permission>
-                        <Permission operationCode={'system:tool:delete:category'}>
+                        <Permission operationCode={['system:tool:delete:category']}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnDeleteBtnClick(record)}
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index f9a2eed..aa95a38 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -8,7 +8,8 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS
 } from '@/constants/common.constants'
-import { utcToLocalTime } from '@/util/datetime.tsx'
+import { utcToLocalTime } from '@/util/datetime'
+import { hasPermission } from '@/util/auth'
 import {
     r_sys_tool_template_update,
     r_sys_tool_template_delete,
@@ -31,7 +32,6 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import Card from '@/components/common/Card'
 import CodeEditor from '@/components/Playground/CodeEditor'
 import Permission from '@/components/common/Permission'
-import { useState } from 'react'
 
 const Template = () => {
     const blocker = useBlocker(
@@ -125,14 +125,14 @@ const Template = () => {
                 <>
                     操作
                     {!Object.keys(hasEdited).length && (
-                        <>
+                        <Permission operationCode={['system:tool:add:template']}>
                             {' '}
                             (
                             <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
                                 新增
                             </a>
                             )
-                        </>
+                        </Permission>
                     )}
                 </>
             ),
@@ -142,7 +142,7 @@ const Template = () => {
                 <>
                     <AntdSpace size={'middle'}>
                         {hasEdited[record.id] && (
-                            <Permission operationCode={'system:tool:modify:base'}>
+                            <Permission operationCode={['system:tool:modify:template']}>
                                 <a
                                     style={{ color: COLOR_PRODUCTION }}
                                     onClick={handleOnSaveBtnClick(record)}
@@ -152,7 +152,7 @@ const Template = () => {
                             </Permission>
                         )}
                         {!Object.keys(hasEdited).length && (
-                            <Permission operationCode={'system:tool:modify:base'}>
+                            <Permission operationCode={['system:tool:modify:template']}>
                                 <a
                                     style={{ color: COLOR_PRODUCTION }}
                                     onClick={handleOnEditBtnClick(record)}
@@ -161,7 +161,7 @@ const Template = () => {
                                 </a>
                             </Permission>
                         )}
-                        <Permission operationCode={'system:tool:delete:base'}>
+                        <Permission operationCode={['system:tool:delete:template']}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnDeleteBtnClick(record)}
@@ -498,14 +498,14 @@ const Template = () => {
                     <>
                         操作
                         {!Object.keys(hasEdited).length && (
-                            <>
+                            <Permission operationCode={['system:tool:modify:template']}>
                                 {' '}
                                 (
                                 <a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddFile}>
                                     新增
                                 </a>
                                 )
-                            </>
+                            </Permission>
                         )}
                     </>
                 ),
@@ -515,16 +515,21 @@ const Template = () => {
                 render: (_, record) => (
                     <>
                         <AntdSpace size={'middle'}>
-                            <Permission operationCode={'system:tool:modify:category'}>
+                            <Permission
+                                operationCode={[
+                                    'system:tool:query:template',
+                                    'system:tool:modify:template'
+                                ]}
+                            >
                                 <a
                                     onClick={handleOnEditFile(record.name)}
                                     style={{ color: COLOR_PRODUCTION }}
                                 >
-                                    编辑
+                                    {hasPermission('system:tool:modify:template') ? '编辑' : '查看'}
                                 </a>
                             </Permission>
                             {!Object.keys(hasEdited).length && (
-                                <Permission operationCode={'system:tool:modify:category'}>
+                                <Permission operationCode={['system:tool:modify:template']}>
                                     <a
                                         onClick={handleOnRenameFile(record.name)}
                                         style={{ color: COLOR_PRODUCTION }}
@@ -534,7 +539,7 @@ const Template = () => {
                                 </Permission>
                             )}
                             {!Object.keys(hasEdited).length && (
-                                <Permission operationCode={'system:tool:delete:category'}>
+                                <Permission operationCode={['system:tool:delete:template']}>
                                     <a
                                         onClick={handleOnDeleteFile(record.name)}
                                         style={{ color: COLOR_PRODUCTION }}
@@ -729,6 +734,9 @@ const Template = () => {
     }
 
     const handleOnChangeFileContent = (_content: string, _fileName: string, files: IFiles) => {
+        if (!hasPermission('system:tool:modify:template')) {
+            return
+        }
         setEditingFiles({ ...editingFiles, [editingTemplateId]: files })
         if (!hasEdited[editingTemplateId]) {
             setHasEdited({ ...hasEdited, [editingTemplateId]: true })
@@ -865,7 +873,11 @@ const Template = () => {
                                     onChangeFileContent={handleOnChangeFileContent}
                                     showFileSelector={false}
                                     tsconfig={tsconfig}
-                                    readonly={isLoading || templateDetailLoading[editingTemplateId]}
+                                    readonly={
+                                        isLoading ||
+                                        templateDetailLoading[editingTemplateId] ||
+                                        !hasPermission('system:tool:modify:template')
+                                    }
                                 />
                                 <div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
                                     <Icon component={IconOxygenClose} />
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 281adde..6836d4f 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -195,7 +195,7 @@ const User = () => {
             render: (_, record) => (
                 <>
                     <AntdSpace size={'middle'}>
-                        <Permission operationCode={'system:user:modify:password'}>
+                        <Permission operationCode={['system:user:modify:password']}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnChangePasswordBtnClick(record)}
@@ -203,7 +203,7 @@ const User = () => {
                                 修改密码
                             </a>
                         </Permission>
-                        <Permission operationCode={'system:user:modify:one'}>
+                        <Permission operationCode={['system:user:modify:one']}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnEditBtnClick(record)}
@@ -211,7 +211,7 @@ const User = () => {
                                 编辑
                             </a>
                         </Permission>
-                        <Permission operationCode={'system:user:delete:one'}>
+                        <Permission operationCode={['system:user:delete:one']}>
                             {record.id !== '0' && (
                                 <a
                                     style={{ color: COLOR_PRODUCTION }}
@@ -888,7 +888,7 @@ const User = () => {
 
     const toolbar = (
         <FlexBox direction={'horizontal'} gap={10}>
-            <Permission operationCode={'system:user:add:one'}>
+            <Permission operationCode={['system:user:add:one']}>
                 <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
                     <AntdButton
                         type={'primary'}

From 34034ec59b376b7548c5387c08e0dfde2ea3ea9b Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 24 Jan 2024 17:03:56 +0800
Subject: [PATCH 202/307] Optimize Playground

---
 src/components/Playground/files.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Playground/files.ts b/src/components/Playground/files.ts
index ec68d81..7b91bb5 100644
--- a/src/components/Playground/files.ts
+++ b/src/components/Playground/files.ts
@@ -1,10 +1,10 @@
 import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
 import { languages } from 'monaco-editor'
 import DiagnosticsOptions = languages.json.DiagnosticsOptions
+import { formatByteSize } from '@/util/common'
 import { IFile, IFiles, ILanguage } from '@/components/Playground/shared'
 import tsconfigSchema from '@/components/Playground/tsconfig-schema.json'
 import importMapSchema from '@/components/Playground/import-map-schema.json'
-import { formatByteSize } from '@/util/common.tsx'
 
 export const TS_CONFIG_FILE_NAME = 'tsconfig.json'
 export const MAIN_FILE_NAME = 'App.tsx'

From 96acaddf77878e60bc6cf9cb1d43af37728096f1 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 25 Jan 2024 15:35:52 +0800
Subject: [PATCH 203/307] Optimize Playground

---
 .../Playground/CodeEditor/FileSelector/index.tsx |  6 ++++++
 src/components/Playground/CodeEditor/index.tsx   |  3 +++
 .../Playground/Output/Preview/Render.tsx         |  2 ++
 .../Playground/Output/Preview/iframe.html        |  7 +------
 .../Playground/Output/Preview/index.tsx          |  8 +++++---
 .../Playground/Output/Preview/preview.scss       |  5 -----
 .../Playground/Output/Preview/render.scss        |  6 ++++++
 src/components/Playground/Output/index.tsx       |  8 +++++---
 src/components/Playground/compiler.ts            | 16 ++++++++--------
 src/components/Playground/index.tsx              | 16 ++++++++++++++--
 src/pages/System/Tools/Base.tsx                  | 10 ++++++----
 src/pages/System/Tools/Template.tsx              |  4 ++--
 12 files changed, 58 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Playground/Output/Preview/render.scss

diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index aa2cb62..b86cb55 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -110,6 +110,10 @@ const FileSelector = ({
     }
 
     const handleOnValidateTab = (newFileName: string, oldFileName: string) => {
+        if (newFileName.length > 40) {
+            onError?.('File name is too long, maximum 40 characters.')
+        }
+
         if (!/\.(jsx|tsx|js|ts|css|json)$/.test(newFileName)) {
             onError?.('Playground only supports *.jsx, *.tsx, *.js, *.ts, *.css, *.json files.')
 
@@ -219,4 +223,6 @@ const FileSelector = ({
     )
 }
 
+FileSelector.Item = Item
+
 export default FileSelector
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index 938aa66..b2d70d6 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -160,4 +160,7 @@ const CodeEditor = ({
     )
 }
 
+CodeEditor.Editor = Editor
+CodeEditor.FileSelector = FileSelector
+
 export default CodeEditor
diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx
index 940a80f..62464d2 100644
--- a/src/components/Playground/Output/Preview/Render.tsx
+++ b/src/components/Playground/Output/Preview/Render.tsx
@@ -1,3 +1,4 @@
+import '@/components/Playground/Output/Preview/render.scss'
 import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
 
 interface RenderProps {
@@ -66,6 +67,7 @@ const Render = ({ iframeKey, compiledCode, onError }: RenderProps) => {
 
     return (
         <iframe
+            data-component={'playground-output-preview-render'}
             key={iframeKey}
             ref={iframeRef}
             src={iframeUrl}
diff --git a/src/components/Playground/Output/Preview/iframe.html b/src/components/Playground/Output/Preview/iframe.html
index b485bf9..95c6c95 100644
--- a/src/components/Playground/Output/Preview/iframe.html
+++ b/src/components/Playground/Output/Preview/iframe.html
@@ -48,11 +48,6 @@
   });
 </script>
 <script type="module" id="appSrc"></script>
-<div id="root">
-  <div
-    style="position:absolute;top: 0;left:0;width:100%;height:100%;display: flex;justify-content: center;align-items: center;">
-    Loading...
-  </div>
-</div>
+<div id="root"></div>
 </body>
 </html>
diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx
index 2f6dd0b..93cedc3 100644
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -1,16 +1,16 @@
 import '@/components/Playground/Output/Preview/preview.scss'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
 import Compiler from '@/components/Playground/compiler'
-import { ENTRY_FILE_NAME } from '@/components/Playground/files'
 import Render from '@/components/Playground/Output/Preview/Render'
 
 interface PreviewProps {
     iframeKey: string
     files: IFiles
     importMap: IImportMap
+    entryPoint: string
 }
 
-const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
+const Preview = ({ iframeKey, files, importMap, entryPoint }: PreviewProps) => {
     const [errorMsg, setErrorMsg] = useState('')
     const [compiledCode, setCompiledCode] = useState('')
 
@@ -19,7 +19,7 @@ const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
     }
 
     useEffect(() => {
-        Compiler.compile(files, importMap, [ENTRY_FILE_NAME])
+        Compiler.compile(files, importMap, entryPoint)
             .then((result) => {
                 setCompiledCode(result.outputFiles[0].text)
             })
@@ -36,4 +36,6 @@ const Preview = ({ iframeKey, files, importMap }: PreviewProps) => {
     )
 }
 
+Preview.Render = Render
+
 export default Preview
diff --git a/src/components/Playground/Output/Preview/preview.scss b/src/components/Playground/Output/Preview/preview.scss
index 9fd2079..e69a5b6 100644
--- a/src/components/Playground/Output/Preview/preview.scss
+++ b/src/components/Playground/Output/Preview/preview.scss
@@ -3,9 +3,4 @@
   position: relative;
   width: 100%;
   height: 100%;
-
-  iframe {
-    border: none;
-    flex: 1;
-  }
 }
\ No newline at end of file
diff --git a/src/components/Playground/Output/Preview/render.scss b/src/components/Playground/Output/Preview/render.scss
new file mode 100644
index 0000000..fc11967
--- /dev/null
+++ b/src/components/Playground/Output/Preview/render.scss
@@ -0,0 +1,6 @@
+[data-component=playground-output-preview-render] {
+  border: none;
+  height: 100%;
+  width: 100%;
+  flex: 1;
+}
\ No newline at end of file
diff --git a/src/components/Playground/Output/index.tsx b/src/components/Playground/Output/index.tsx
index 7325852..bf729b7 100644
--- a/src/components/Playground/Output/index.tsx
+++ b/src/components/Playground/Output/index.tsx
@@ -1,6 +1,6 @@
 import FlexBox from '@/components/common/FlexBox'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
-import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
+import Playground from '@/components/Playground'
 import Transform from '@/components/Playground/Output/Transform'
 import Preview from '@/components/Playground/Output/Preview'
 
@@ -8,14 +8,15 @@ interface OutputProps {
     files: IFiles
     selectedFileName: string
     importMap: IImportMap
+    entryPoint: string
 }
 
-const Output = ({ files, selectedFileName, importMap }: OutputProps) => {
+const Output = ({ files, selectedFileName, importMap, entryPoint }: OutputProps) => {
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (
         <FlexBox data-component={'playground-code-output'}>
-            <FileSelector
+            <Playground.CodeEditor.FileSelector
                 files={{
                     Preview: { name: 'Preview', language: 'json', value: '' },
                     Transform: { name: 'Transform', language: 'json', value: '' }
@@ -29,6 +30,7 @@ const Output = ({ files, selectedFileName, importMap }: OutputProps) => {
                     iframeKey={JSON.stringify(importMap)}
                     files={files}
                     importMap={importMap}
+                    entryPoint={entryPoint}
                 />
             )}
             {selectedTab === 'Transform' && <Transform file={files[selectedFileName]} />}
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index d7a9bea..74cbaf9 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -2,7 +2,7 @@ import esbuild, { Loader, OnLoadArgs, Plugin, PluginBuild } from 'esbuild-wasm'
 import localforage from 'localforage'
 import axios from 'axios'
 import { IFiles, IImportMap } from '@/components/Playground/shared'
-import { cssToJs, ENTRY_FILE_NAME, jsonToJs, addReactImport } from '@/components/Playground/files'
+import { cssToJs, jsonToJs, addReactImport } from '@/components/Playground/files'
 
 class Compiler {
     private init = false
@@ -42,7 +42,7 @@ class Compiler {
             return esbuild.transform(code, { loader })
         })
 
-    compile = (files: IFiles, importMap: IImportMap, entryPoints: string[]) =>
+    compile = (files: IFiles, importMap: IImportMap, entryPoint: string) =>
         new Promise<void>((resolve) => {
             if (this.init) {
                 resolve()
@@ -57,11 +57,11 @@ class Compiler {
         }).then(() => {
             return esbuild.build({
                 bundle: true,
-                entryPoints: entryPoints,
+                entryPoints: [entryPoint],
                 format: 'esm',
                 metafile: true,
                 write: false,
-                plugins: [this.fileResolverPlugin(files, importMap, entryPoints)]
+                plugins: [this.fileResolverPlugin(files, importMap, entryPoint)]
             })
         })
 
@@ -72,13 +72,13 @@ class Compiler {
     private fileResolverPlugin = (
         files: IFiles,
         importMap: IImportMap,
-        entryPoints: string[]
+        entryPoint: string
     ): Plugin => {
         return {
             name: 'file-resolver-plugin',
             setup: (build: PluginBuild) => {
                 build.onResolve({ filter: /.*/ }, (args: esbuild.OnResolveArgs) => {
-                    if (entryPoints.includes(args.path)) {
+                    if (entryPoint === args.path) {
                         return {
                             namespace: 'OxygenToolbox',
                             path: args.path
@@ -165,10 +165,10 @@ class Compiler {
                 })
 
                 build.onLoad({ filter: /.*/ }, async (args: OnLoadArgs) => {
-                    if (args.path === ENTRY_FILE_NAME) {
+                    if (entryPoint === args.path) {
                         return {
                             loader: 'tsx',
-                            contents: addReactImport(files[ENTRY_FILE_NAME].value)
+                            contents: addReactImport(files[entryPoint].value)
                         }
                     }
 
diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx
index 895ca03..44273ba 100644
--- a/src/components/Playground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,6 +1,7 @@
 import '@/components/Playground/playground.scss'
 import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
 import {
+    ENTRY_FILE_NAME,
     IMPORT_MAP_FILE_NAME,
     MAIN_FILE_NAME,
     TS_CONFIG_FILE_NAME
@@ -13,9 +14,15 @@ interface PlaygroundProps {
     initFiles: IFiles
     initImportMapRaw: string
     initTsconfigRaw: string
+    entryPoint?: string
 }
 
-const Playground = ({ initFiles, initImportMapRaw, initTsconfigRaw }: PlaygroundProps) => {
+const Playground = ({
+    initFiles,
+    initImportMapRaw,
+    initTsconfigRaw,
+    entryPoint = ENTRY_FILE_NAME
+}: PlaygroundProps) => {
     const [files, setFiles] = useState(initFiles)
     const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME)
     const [importMapRaw, setImportMapRaw] = useState<string>(initImportMapRaw)
@@ -93,7 +100,12 @@ const Playground = ({ initFiles, initImportMapRaw, initTsconfigRaw }: Playground
                 onChangeFileContent={handleOnChangeFileContent}
                 onSelectedFileChange={setSelectedFileName}
             />
-            <Output files={files} selectedFileName={selectedFileName} importMap={importMap!} />
+            <Output
+                files={files}
+                selectedFileName={selectedFileName}
+                importMap={importMap!}
+                entryPoint={entryPoint}
+            />
         </FlexBox>
     )
 }
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index f651653..ed1f268 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -32,8 +32,8 @@ import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import Card from '@/components/common/Card'
-import CodeEditor from '@/components/Playground/CodeEditor'
 import Permission from '@/components/common/Permission'
+import Playground from '@/components/Playground'
 
 const Base = () => {
     const blocker = useBlocker(
@@ -283,9 +283,11 @@ const Base = () => {
                                             duration: 0
                                         })
                                         void compiler
-                                            .compile(files, importMap, [
+                                            .compile(
+                                                files,
+                                                importMap,
                                                 compileForm.getFieldValue('entryFileName') as string
-                                            ])
+                                            )
                                             .then((result) => {
                                                 void message.destroy('compiling')
                                                 void message.loading({
@@ -982,7 +984,7 @@ const Base = () => {
                         </Card>
                         {editingFileName && (
                             <Card>
-                                <CodeEditor
+                                <Playground.CodeEditor
                                     files={editingFiles[editingBaseId]}
                                     selectedFileName={editingFileName}
                                     onSelectedFileChange={() => {}}
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index aa95a38..2fc3757 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -30,8 +30,8 @@ import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import Card from '@/components/common/Card'
-import CodeEditor from '@/components/Playground/CodeEditor'
 import Permission from '@/components/common/Permission'
+import Playground from '@/components/Playground'
 
 const Template = () => {
     const blocker = useBlocker(
@@ -866,7 +866,7 @@ const Template = () => {
                         </Card>
                         {editingFileName && (
                             <Card>
-                                <CodeEditor
+                                <Playground.CodeEditor
                                     files={editingFiles[editingTemplateId]}
                                     selectedFileName={editingFileName}
                                     onSelectedFileChange={() => {}}

From 37fcfecbb75b5364d5a742fde7741b1b5299affa Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 25 Jan 2024 15:37:59 +0800
Subject: [PATCH 204/307] Optimize tool base management page

---
 src/global.d.ts                     |  2 --
 src/pages/System/Tools/Base.tsx     | 24 +-----------------------
 src/pages/System/Tools/Category.tsx |  1 -
 src/pages/System/Tools/Template.tsx |  3 +--
 4 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index 772a515..f3e3bef 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -493,7 +493,6 @@ interface ToolBaseVo {
     source: ToolDataVo
     dist: ToolDataVo
     compiled: boolean
-    enable: boolean
     createTime: string
     updateTime: string
 }
@@ -503,7 +502,6 @@ interface ToolBaseAddEditParam {
     name?: string
     source?: string
     dist?: string
-    enable?: boolean
 }
 
 interface ToolTemplateVo {
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index ed1f268..42fef8a 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -80,7 +80,6 @@ const Base = () => {
         setIsDrawerOpen(true)
         form.setFieldValue('id', undefined)
         form.setFieldValue('name', newFormValues?.name)
-        form.setFieldValue('enable', newFormValues?.enable ?? true)
     }
 
     const baseColumns: _ColumnsType<ToolBaseVo> = [
@@ -106,21 +105,6 @@ const Base = () => {
             align: 'center',
             render: (value: string) => utcToLocalTime(value)
         },
-        {
-            title: '状态',
-            width: '10em',
-            align: 'center',
-            render: (_, record) => (
-                <>
-                    {record.enable ? (
-                        <AntdTag color={'success'}>启用</AntdTag>
-                    ) : (
-                        <AntdTag>禁用</AntdTag>
-                    )}
-                    {!record.compiled && <AntdTag>未编译</AntdTag>}
-                </>
-            )
-        },
         {
             title: (
                 <>
@@ -381,7 +365,6 @@ const Base = () => {
             setIsDrawerOpen(true)
             form.setFieldValue('id', value.id)
             form.setFieldValue('name', value.name)
-            form.setFieldValue('enable', value.enable)
             void form.validateFields()
         }
     }
@@ -668,7 +651,6 @@ const Base = () => {
                         )}
                     </>
                 ),
-                dataIndex: 'enable',
                 width: '12em',
                 align: 'center',
                 render: (_, record) => (
@@ -920,8 +902,7 @@ const Base = () => {
 
         if (!isDrawerEdit && formValues) {
             setNewFormValues({
-                name: formValues.name,
-                enable: formValues.enable
+                name: formValues.name
             })
         }
     }, [formValues])
@@ -958,9 +939,6 @@ const Base = () => {
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
-            <AntdForm.Item name={'enable'} label={'状态'}>
-                <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
-            </AntdForm.Item>
         </AntdForm>
     )
 
diff --git a/src/pages/System/Tools/Category.tsx b/src/pages/System/Tools/Category.tsx
index e415db3..f38b051 100644
--- a/src/pages/System/Tools/Category.tsx
+++ b/src/pages/System/Tools/Category.tsx
@@ -84,7 +84,6 @@ const Category = () => {
                     </Permission>
                 </>
             ),
-            dataIndex: 'enable',
             width: '15em',
             align: 'center',
             render: (_, record) => (
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index 2fc3757..f5ae678 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -509,7 +509,6 @@ const Template = () => {
                         )}
                     </>
                 ),
-                dataIndex: 'enable',
                 width: '12em',
                 align: 'center',
                 render: (_, record) => (
@@ -836,7 +835,7 @@ const Template = () => {
                     filterOption={filterOption}
                     options={baseData.map((value) => ({
                         value: value.id,
-                        label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
+                        label: value.name
                     }))}
                 />
             </AntdForm.Item>

From 5fb4cfe55dca8a9d5b90ad0826aa4b14e520d246 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 26 Jan 2024 14:29:53 +0800
Subject: [PATCH 205/307] Add create tool page

---
 .../Playground/Output/Preview/iframe.html     |   7 +-
 src/constants/urls.constants.ts               |   4 +
 src/global.d.ts                               |  13 +
 src/pages/System/Tools/Template.tsx           |  11 +
 src/pages/Tools/Create.tsx                    | 228 ++++++++++++++----
 src/services/index.tsx                        |  17 +-
 src/services/tool.tsx                         |  11 +
 7 files changed, 240 insertions(+), 51 deletions(-)
 create mode 100644 src/services/tool.tsx

diff --git a/src/components/Playground/Output/Preview/iframe.html b/src/components/Playground/Output/Preview/iframe.html
index 95c6c95..b485bf9 100644
--- a/src/components/Playground/Output/Preview/iframe.html
+++ b/src/components/Playground/Output/Preview/iframe.html
@@ -48,6 +48,11 @@
   });
 </script>
 <script type="module" id="appSrc"></script>
-<div id="root"></div>
+<div id="root">
+  <div
+    style="position:absolute;top: 0;left:0;width:100%;height:100%;display: flex;justify-content: center;align-items: center;">
+    Loading...
+  </div>
+</div>
 </body>
 </html>
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 84eb783..266a0d3 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -30,5 +30,9 @@ export const URL_SYS_TOOL_CATEGORY = `${URL_SYS_TOOL}/category`
 export const URL_SYS_TOOL_BASE = `${URL_SYS_TOOL}/base`
 export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
 
+export const URL_TOOL = '/tool'
+export const URL_TOOL_TEMPLATE = `${URL_TOOL}/template`
+export const URL_TOOL_CATEGORY = `${URL_TOOL}/category`
+
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/global.d.ts b/src/global.d.ts
index f3e3bef..9740e02 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -509,6 +509,7 @@ interface ToolTemplateVo {
     name: string
     baseId: string
     source: ToolDataVo
+    entryPoint: string
     enable: boolean
     createTime: string
     updateTime: string
@@ -520,6 +521,7 @@ interface ToolTemplateAddEditParam {
     name?: string
     baseId?: string
     source?: string
+    entryPoint?: string
     enable?: boolean
 }
 
@@ -541,3 +543,14 @@ interface ToolVo {
     createTime: string
     updateTime: string
 }
+
+interface ToolCreateParam {
+    name: string
+    toolId: string
+    description: string
+    ver: string
+    templateId: string
+    privately: boolean
+    keywords: string[]
+    categories: string[]
+}
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index f5ae678..28f4c78 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -79,6 +79,7 @@ const Template = () => {
         form.setFieldValue('id', undefined)
         form.setFieldValue('name', newFormValues?.name)
         form.setFieldValue('baseId', newFormValues?.baseId)
+        form.setFieldValue('entryPoint', newFormValues?.entryPoint)
         form.setFieldValue('enable', newFormValues?.enable ?? true)
         if (!baseData || !baseData.length) {
             getBaseData()
@@ -98,6 +99,10 @@ const Template = () => {
             title: '基板',
             dataIndex: ['base', 'name']
         },
+        {
+            title: '入口',
+            dataIndex: 'entryPoint'
+        },
         {
             title: '创建时间',
             dataIndex: 'createTime',
@@ -211,6 +216,7 @@ const Template = () => {
             form.setFieldValue('id', value.id)
             form.setFieldValue('name', value.name)
             form.setFieldValue('baseId', value.base.id)
+            form.setFieldValue('entryPoint', value.entryPoint)
             form.setFieldValue('enable', value.enable)
             if (!baseData || !baseData.length) {
                 getBaseData()
@@ -787,6 +793,7 @@ const Template = () => {
             setNewFormValues({
                 name: formValues.name,
                 baseId: formValues.baseId,
+                entryPoint: formValues.entryPoint,
                 enable: formValues.enable
             })
         }
@@ -839,6 +846,9 @@ const Template = () => {
                     }))}
                 />
             </AntdForm.Item>
+            <AntdForm.Item name={'entryPoint'} label={'入口'} rules={[{ required: true }]}>
+                <AntdInput allowClear />
+            </AntdForm.Item>
             <AntdForm.Item name={'enable'} label={'状态'}>
                 <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
             </AntdForm.Item>
@@ -857,6 +867,7 @@ const Template = () => {
                                 rowKey={(record) => record.id}
                                 loading={isLoading}
                                 pagination={false}
+                                scroll={{ x: true }}
                                 expandable={{
                                     expandedRowRender,
                                     onExpand: handleOnExpand
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index 46cc42b..eccc362 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -1,39 +1,151 @@
 import '@/assets/css/pages/tools/create.scss'
-import FlexBox from '@/components/common/FlexBox.tsx'
-import Card from '@/components/common/Card.tsx'
-import FitFullscreen from '@/components/common/FitFullscreen.tsx'
-import Preview from '@/components/Playground/Output/Preview'
-import templates from '@/components/Playground/templates.ts'
-import { useEffect } from 'react'
-import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import {
+    DATABASE_DUPLICATE_KEY,
+    DATABASE_INSERT_SUCCESS,
+    DATABASE_SELECT_SUCCESS
+} from '@/constants/common.constants'
+import {
+    r_tool_category_get,
+    r_tool_create,
+    r_tool_template_get,
+    r_tool_template_get_one
+} from '@/services/tool'
+import { IImportMap } from '@/components/Playground/shared'
+import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
+import compiler from '@/components/Playground/compiler'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import Playground from '@/components/Playground'
 
 const Create = () => {
-    const [form] = AntdForm.useForm<{
-        name: string
-        toolId: string
-        desc: string
-        version: string
-        template: string
-        private: boolean
-        keyword: string[]
-        category: string[]
-    }>()
+    const [form] = AntdForm.useForm<ToolCreateParam>()
     const formValues = AntdForm.useWatch([], form)
-    const [template, setTemplate] = useState(templates['demo'])
+    const [templateData, setTemplateData] = useState<ToolTemplateVo[]>()
+    const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>()
+    const [templateDetailData, setTemplateDetailData] = useState<Record<string, ToolTemplateVo>>({})
+    const [previewTemplate, setPreviewTemplate] = useState('')
+    const [loadingTemplate, setLoadingTemplate] = useState(false)
+    const [loadingCategory, setLoadingCategory] = useState(false)
+    const [creating, setCreating] = useState(false)
+    const [compiledCode, setCompiledCode] = useState('')
+
+    const handleOnFinish = (toolAddParam: ToolCreateParam) => {
+        setCreating(true)
+
+        void r_tool_create(toolAddParam)
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_INSERT_SUCCESS:
+                        void message.success(
+                            `创建工具 ${response.data!.name}<${response.data!.toolId}>:${response.data!.ver} 成功`
+                        )
+                        break
+                    case DATABASE_DUPLICATE_KEY:
+                        void message.warning('已存在相同 ID 相同版本的应用')
+                        setCreating(false)
+                        break
+                    default:
+                        void message.error('创建失败，请稍后重试')
+                        setCreating(false)
+                }
+            })
+            .catch(() => {
+                setCreating(false)
+            })
+    }
+
+    const handleOnTemplateChange = (value: string) => {
+        setPreviewTemplate(value)
+        if (templateDetailData[value]) {
+            return
+        }
+
+        setLoadingTemplate(true)
+        void r_tool_template_get_one(value)
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setTemplateDetailData({ ...templateDetailData, [value]: response.data! })
+                        break
+                    default:
+                        void message.error('获取模板信息失败')
+                }
+            })
+            .finally(() => {
+                setLoadingTemplate(false)
+            })
+    }
 
     useEffect(() => {
-        formValues?.template && setTemplate(templates[formValues?.template])
-    }, [formValues?.template])
+        const template = templateDetailData[previewTemplate]
+        if (!template) {
+            return
+        }
+        try {
+            const baseDist = base64ToStr(template.base.dist.data!)
+            const files = base64ToFiles(template.source.data!)
+            const importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap
+
+            void compiler
+                .compile(files, importMap, template.entryPoint)
+                .then((result) => {
+                    const output = result.outputFiles[0].text
+                    setCompiledCode(`${output}\n${baseDist}`)
+                })
+                .catch((reason) => {
+                    void message.error(`编译失败：${reason}`)
+                })
+        } catch (e) {
+            void message.error(`载入模板 ${templateDetailData[previewTemplate].name} 失败`)
+        }
+    }, [templateDetailData, previewTemplate])
 
     useEffect(() => {
         const temp: string[] = []
-        formValues?.keyword.forEach((item) => {
+        formValues?.keywords.forEach((item) => {
             if (item.length <= 10) {
                 temp.push(item)
             }
         })
         form.setFieldValue('keyword', temp)
-    }, [form, formValues?.keyword])
+    }, [form, formValues?.keywords])
+
+    useEffect(() => {
+        setLoadingTemplate(true)
+        setLoadingCategory(true)
+        void r_tool_template_get()
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setTemplateData(response.data!)
+                        break
+                    default:
+                        void message.error('获取模板列表失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoadingTemplate(false)
+            })
+        void r_tool_category_get()
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setCategoryData(response.data!)
+                        break
+                    default:
+                        void message.error('获取类别列表失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoadingCategory(false)
+            })
+    }, [])
 
     return (
         <FitFullscreen data-component={'tools-create'}>
@@ -45,7 +157,12 @@ const Create = () => {
                     <Card className={'config'}>
                         <HideScrollbar>
                             <div className={'config-content'}>
-                                <AntdForm form={form} layout={'vertical'}>
+                                <AntdForm
+                                    form={form}
+                                    layout={'vertical'}
+                                    onFinish={handleOnFinish}
+                                    disabled={creating}
+                                >
                                     <AntdForm.Item
                                         label={'名称'}
                                         name={'name'}
@@ -75,7 +192,7 @@ const Create = () => {
                                             placeholder={'请输入工具 ID'}
                                         />
                                     </AntdForm.Item>
-                                    <AntdForm.Item label={'简介'} name={'desc'}>
+                                    <AntdForm.Item label={'简介'} name={'description'}>
                                         <AntdInput.TextArea
                                             autoSize={{ minRows: 6, maxRows: 6 }}
                                             maxLength={200}
@@ -85,7 +202,7 @@ const Create = () => {
                                     </AntdForm.Item>
                                     <AntdForm.Item
                                         label={'版本'}
-                                        name={'version'}
+                                        name={'ver'}
                                         rules={[
                                             { required: true },
                                             {
@@ -102,21 +219,23 @@ const Create = () => {
                                     </AntdForm.Item>
                                     <AntdForm.Item
                                         label={'模板'}
-                                        name={'template'}
-                                        initialValue={'demo'}
+                                        name={'templateId'}
                                         rules={[{ required: true }]}
                                     >
-                                        <AntdSelect>
-                                            {Object.keys(templates).map((item) => (
-                                                <AntdSelect.Option key={item}>
-                                                    {templates[item].name}
-                                                </AntdSelect.Option>
-                                            ))}
-                                        </AntdSelect>
+                                        <AntdSelect
+                                            placeholder={'请选择模板'}
+                                            options={templateData?.map((value) => ({
+                                                value: value.id,
+                                                label: value.name
+                                            }))}
+                                            loading={loadingTemplate}
+                                            disabled={loadingTemplate}
+                                            onChange={handleOnTemplateChange}
+                                        />
                                     </AntdForm.Item>
                                     <AntdForm.Item
                                         label={'访问权限'}
-                                        name={'private'}
+                                        name={'privately'}
                                         initialValue={false}
                                     >
                                         <AntdSwitch
@@ -127,21 +246,39 @@ const Create = () => {
                                     <AntdForm.Item
                                         label={'关键字'}
                                         tooltip={'工具搜索（每个不超过10个字符）'}
-                                        name={'keyword'}
+                                        name={'keywords'}
                                         rules={[{ required: true, message: '请输入关键字' }]}
                                     >
-                                        <AntdSelect mode={'tags'} maxCount={20} />
+                                        <AntdSelect
+                                            placeholder={'请输入关键字'}
+                                            mode={'tags'}
+                                            maxCount={20}
+                                        />
                                     </AntdForm.Item>
                                     <AntdForm.Item
                                         label={'类别'}
                                         tooltip={'工具分类'}
-                                        name={'category'}
+                                        name={'categories'}
                                         rules={[{ required: true }]}
                                     >
-                                        <AntdSelect mode={'multiple'} />
+                                        <AntdSelect
+                                            placeholder={'请选择类别'}
+                                            mode={'multiple'}
+                                            options={categoryData?.map((value) => ({
+                                                value: value.id,
+                                                label: value.name
+                                            }))}
+                                            loading={loadingCategory}
+                                            disabled={loadingCategory}
+                                        />
                                     </AntdForm.Item>
                                     <AntdForm.Item>
-                                        <AntdButton className={'create-bt'} type={'primary'}>
+                                        <AntdButton
+                                            className={'create-bt'}
+                                            type={'primary'}
+                                            htmlType={'submit'}
+                                            loading={creating}
+                                        >
                                             创建
                                         </AntdButton>
                                     </AntdForm.Item>
@@ -155,11 +292,12 @@ const Create = () => {
                         <FlexBox>预览</FlexBox>
                     </Card>
                     <Card className={'preview'}>
-                        <Preview
-                            iframeKey={JSON.stringify(template.importMap)}
-                            files={template.files}
-                            importMap={template.importMap}
-                        />
+                        {compiledCode && (
+                            <Playground.Output.Preview.Render
+                                iframeKey={previewTemplate}
+                                compiledCode={compiledCode}
+                            />
+                        )}
                     </Card>
                 </FlexBox>
             </FlexBox>
diff --git a/src/services/index.tsx b/src/services/index.tsx
index 2b8aeae..c4652b7 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -109,11 +109,18 @@ service.interceptors.response.use(
         return response
     },
     async (error: AxiosError) => {
-        void message.error(
-            <>
-                <strong>服务器出错</strong>，请稍后重试
-            </>
-        )
+        if (
+            error.code === 'ETIMEDOUT' ||
+            (error.code === 'ECONNABORTED' && error.message.includes('timeout'))
+        ) {
+            void message.error('请求超时，请稍后重试')
+        } else {
+            void message.error(
+                <>
+                    <strong>服务器出错</strong>，请稍后重试
+                </>
+            )
+        }
         return await Promise.reject(error?.response?.data)
     }
 )
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
new file mode 100644
index 0000000..7621345
--- /dev/null
+++ b/src/services/tool.tsx
@@ -0,0 +1,11 @@
+import request from '@/services/index'
+import { URL_TOOL, URL_TOOL_CATEGORY, URL_TOOL_TEMPLATE } from '@/constants/urls.constants'
+
+export const r_tool_template_get = () => request.get<ToolTemplateVo[]>(URL_TOOL_TEMPLATE)
+
+export const r_tool_template_get_one = (id: string) =>
+    request.get<ToolTemplateVo>(`${URL_TOOL_TEMPLATE}/${id}`)
+
+export const r_tool_category_get = () => request.get<ToolCategoryVo[]>(URL_TOOL_CATEGORY)
+
+export const r_tool_create = (param: ToolCreateParam) => request.post<ToolVo>(URL_TOOL, param)

From 988f759901511ceebcb0e5ce9b1e437575a81595 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 26 Jan 2024 17:30:37 +0800
Subject: [PATCH 206/307] Add icon to tool create

---
 src/ant-design.d.ts        |  5 +++-
 src/global.d.ts            |  3 ++
 src/pages/Tools/Create.tsx | 58 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts
index 17e849d..a3b26db 100644
--- a/src/ant-design.d.ts
+++ b/src/ant-design.d.ts
@@ -1,6 +1,6 @@
 import { ComponentType, ForwardRefExoticComponent, Key, SVGProps } from 'react'
 import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
-import { TablePaginationConfig } from 'antd/lib'
+import { GetProp, TablePaginationConfig, UploadProps } from 'antd/lib'
 import { ColumnsType, FilterValue, SorterResult, SortOrder } from 'antd/es/table/interface'
 import { CheckboxChangeEvent } from 'antd/es/checkbox'
 import type { DataNode } from 'antd/es/tree'
@@ -23,4 +23,7 @@ declare global {
         parentId?: number
         children?: _DataNode[]
     }
+
+    type _UploadProps = UploadProps
+    type _GetProp<T, PropName> = GetProp<T, PropName>
 }
diff --git a/src/global.d.ts b/src/global.d.ts
index 9740e02..e0f47e9 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -529,6 +529,7 @@ interface ToolVo {
     id: string
     name: string
     toolId: string
+    icon: string
     description: string
     baseId: string
     author: UserInfoVo
@@ -540,6 +541,7 @@ interface ToolVo {
     dist: ToolDataVo
     publish: boolean
     review: number
+    publishTime: string
     createTime: string
     updateTime: string
 }
@@ -547,6 +549,7 @@ interface ToolVo {
 interface ToolCreateParam {
     name: string
     toolId: string
+    icon: string
     description: string
     ver: string
     templateId: string
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index eccc362..8a0c87d 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -1,3 +1,4 @@
+import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/create.scss'
 import {
     DATABASE_DUPLICATE_KEY,
@@ -57,6 +58,27 @@ const Create = () => {
             })
     }
 
+    const handleOnIconBeforeUpload = (
+        file: Parameters<_GetProp<_UploadProps, 'beforeUpload'>>[0]
+    ) => {
+        if (file.type !== 'image/svg+xml') {
+            void message.error('仅支持 svg 文件')
+            return false
+        }
+        if (file.size / 1024 / 1024 > 2) {
+            void message.error('文件大小不能大于2MiB')
+        }
+
+        const reader = new FileReader()
+        reader.addEventListener('load', () => {
+            form.setFieldValue('icon', reader.result!.toString().split(',')[1])
+            void form.validateFields()
+        })
+        reader.readAsDataURL(file)
+
+        return false
+    }
+
     const handleOnTemplateChange = (value: string) => {
         setPreviewTemplate(value)
         if (templateDetailData[value]) {
@@ -163,6 +185,42 @@ const Create = () => {
                                     onFinish={handleOnFinish}
                                     disabled={creating}
                                 >
+                                    <AntdForm.Item
+                                        label={'图标'}
+                                        name={''}
+                                        rules={[
+                                            ({ getFieldValue }) => ({
+                                                validator() {
+                                                    if (!getFieldValue('icon')) {
+                                                        return Promise.reject(
+                                                            new Error('请选择图标')
+                                                        )
+                                                    }
+                                                    return Promise.resolve()
+                                                }
+                                            })
+                                        ]}
+                                    >
+                                        <AntdUpload
+                                            listType={'picture-card'}
+                                            showUploadList={false}
+                                            beforeUpload={handleOnIconBeforeUpload}
+                                            accept={'image/svg+xml'}
+                                        >
+                                            {formValues?.icon ? (
+                                                <img
+                                                    src={`data:image/svg+xml;base64,${formValues.icon}`}
+                                                    alt={'icon'}
+                                                    style={{ width: '100%' }}
+                                                />
+                                            ) : (
+                                                <Icon component={IconOxygenPlus} />
+                                            )}
+                                        </AntdUpload>
+                                    </AntdForm.Item>
+                                    <AntdForm.Item name={'icon'}>
+                                        <AntdInput />
+                                    </AntdForm.Item>
                                     <AntdForm.Item
                                         label={'名称'}
                                         name={'name'}

From 4dbae810bb411256e38feb9df89d07b4b183fd05 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 29 Jan 2024 00:05:41 +0800
Subject: [PATCH 207/307] Optimize stylesheet

---
 src/pages/System/Tools/Category.tsx | 5 -----
 src/pages/System/Tools/Template.tsx | 6 +++---
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/pages/System/Tools/Category.tsx b/src/pages/System/Tools/Category.tsx
index f38b051..c17bf62 100644
--- a/src/pages/System/Tools/Category.tsx
+++ b/src/pages/System/Tools/Category.tsx
@@ -39,11 +39,6 @@ const Category = () => {
     }
 
     const categoryColumns: _ColumnsType<ToolCategoryVo> = [
-        {
-            title: 'ID',
-            dataIndex: 'id',
-            width: '15%'
-        },
         {
             title: '名称',
             dataIndex: 'name'
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index 28f4c78..5586c15 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -106,21 +106,21 @@ const Template = () => {
         {
             title: '创建时间',
             dataIndex: 'createTime',
-            width: '0',
+            width: '7em',
             align: 'center',
             render: (value: string) => utcToLocalTime(value)
         },
         {
             title: '修改时间',
             dataIndex: 'updateTime',
-            width: '0',
+            width: '7em',
             align: 'center',
             render: (value: string) => utcToLocalTime(value)
         },
         {
             title: '状态',
             dataIndex: 'enable',
-            width: '0',
+            width: '5em',
             align: 'center',
             render: (value) =>
                 value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>

From ad47030cb2f2cb0faf8fb2b4d75e284d45c14dbf Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 29 Jan 2024 15:20:58 +0800
Subject: [PATCH 208/307] Optimize sign page stylesheet

---
 src/assets/css/pages/sign.scss | 45 +++-------------------------------
 1 file changed, 4 insertions(+), 41 deletions(-)

diff --git a/src/assets/css/pages/sign.scss b/src/assets/css/pages/sign.scss
index d680211..ad54058 100644
--- a/src/assets/css/pages/sign.scss
+++ b/src/assets/css/pages/sign.scss
@@ -23,16 +23,7 @@
 
     .left, .right {
       opacity: 1;
-      animation: 1s ease;
-      @include mixins.unique-keyframes {
-        0% {
-          opacity: 0;
-        }
-
-        100% {
-          opacity: 1;
-        }
-      }
+      transition: all 1s ease;
 
       > * {
         width: 100%;
@@ -41,16 +32,6 @@
 
       &.hidden {
         opacity: 0;
-        animation: 1s ease;
-        @include mixins.unique-keyframes {
-          0% {
-            opacity: 1;
-          }
-
-          100% {
-            opacity: 0;
-          }
-        }
       }
 
       > * {
@@ -127,16 +108,7 @@
       height: 100%;
       width: 50%;
       background-color: #F3F4F8;
-      animation: 0.8s ease;
-      @include mixins.unique-keyframes {
-        0% {
-          left: 50%;
-        }
-
-        100% {
-          left: 0;
-        }
-      }
+      transition: all 0.8s ease;
 
       .ball-box {
         position: relative;
@@ -169,17 +141,8 @@
 
     &.switch {
       .cover {
-        left: 50%;
-        animation: 0.8s ease;
-        @include mixins.unique-keyframes {
-          0% {
-            left: 0;
-          }
-
-          100% {
-            left: 50%;
-          }
-        }
+        transform: translateX(100%);
+        transition: all 0.8s ease;
       }
     }
   }

From 0e804ff7320a84ca5fb5ff9901f732cf45741c05 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 30 Jan 2024 13:33:57 +0800
Subject: [PATCH 209/307] Add personal tool management page

---
 src/assets/css/pages/tools/index.scss | 107 ++++++++++++++
 src/constants/urls.constants.ts       |   1 +
 src/global.d.ts                       |   5 +-
 src/pages/Sign/SignUp.tsx             |   4 +-
 src/pages/Sign/Verify.tsx             |   4 +-
 src/pages/System/Tools/Base.tsx       |  18 +--
 src/pages/Tools/Create.tsx            |  20 +--
 src/pages/Tools/View.tsx              |  61 ++++++++
 src/pages/Tools/index.tsx             | 203 +++++++++++++++++++++++++-
 src/router/tools.tsx                  |  16 +-
 src/services/index.tsx                |  67 +++++----
 src/services/tool.tsx                 |  12 +-
 12 files changed, 457 insertions(+), 61 deletions(-)
 create mode 100644 src/assets/css/pages/tools/index.scss
 create mode 100644 src/pages/Tools/View.tsx

diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.scss
new file mode 100644
index 0000000..bb85d5a
--- /dev/null
+++ b/src/assets/css/pages/tools/index.scss
@@ -0,0 +1,107 @@
+@use "@/assets/css/mixins" as mixins;
+@use '@/assets/css/constants' as constants;
+
+[data-component=tools] {
+  .root-content {
+    padding: 30px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > .card-box {
+      width: 180px;
+      height: 290px;
+      flex: 0 0 auto;
+
+      .common-card {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        align-items: center;
+
+        > * {
+          flex: 0 0 auto;
+          display: block;
+        }
+
+        .version-select {
+          position: absolute;
+          top: 10px;
+          left: 10px;
+        }
+
+        .icon {
+          display: flex;
+          padding-top: 50px;
+          padding-bottom: 20px;
+          color: constants.$production-color;
+          font-size: constants.$SIZE_ICON_XL;
+          justify-content: center;
+
+          img {
+            width: constants.$SIZE_ICON_XL;
+          }
+        }
+
+        .tool-name {
+          font-weight: bolder;
+          font-size: 1.6em;
+        }
+      }
+    }
+
+
+    & > :first-child {
+      cursor: pointer;
+
+      .info {
+        padding-top: 50px;
+      }
+    }
+
+    & > :not(:first-child) {
+      .info {
+        transform: translateY(20px);
+        transition: all 0.1s ease;
+      }
+
+      .operation {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        padding-bottom: 20px;
+        gap: 4px;
+        width: 70%;
+        flex-direction: column;
+        align-items: center;
+        visibility: hidden;
+        opacity: 0;
+
+        > *, .edit > * {
+          width: 100%;
+        }
+
+        .edit {
+          > * {
+            > :first-child {
+              flex: 1;
+            }
+          }
+        }
+      }
+    }
+
+    & > :not(:first-child):hover {
+      .info {
+        transform: translateY(-10px);
+        transition: all 0.2s ease;
+      }
+
+      .operation {
+        visibility: visible;
+        opacity: 1;
+        transition: all 0.4s ease;
+      }
+    }
+  }
+}
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 266a0d3..b285d75 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -33,6 +33,7 @@ export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
 export const URL_TOOL = '/tool'
 export const URL_TOOL_TEMPLATE = `${URL_TOOL}/template`
 export const URL_TOOL_CATEGORY = `${URL_TOOL}/category`
+export const URL_TOOL_DETAIL = `${URL_TOOL}/detail`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/global.d.ts b/src/global.d.ts
index e0f47e9..1c55dee 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -534,14 +534,12 @@ interface ToolVo {
     baseId: string
     author: UserInfoVo
     ver: string
-    privately: boolean
     keywords: string[]
     categories: ToolCategoryVo[]
     source: ToolDataVo
     dist: ToolDataVo
-    publish: boolean
+    publish: string
     review: number
-    publishTime: string
     createTime: string
     updateTime: string
 }
@@ -553,7 +551,6 @@ interface ToolCreateParam {
     description: string
     ver: string
     templateId: string
-    privately: boolean
     keywords: string[]
     categories: string[]
 }
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx
index 0ee88f8..9827d1e 100644
--- a/src/pages/Sign/SignUp.tsx
+++ b/src/pages/Sign/SignUp.tsx
@@ -103,7 +103,7 @@ const SignUp = () => {
             return
         }
         setIsSending(true)
-        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
+        void message.loading({ content: '发送中', key: 'SENDING', duration: 0 })
         void r_auth_resend()
             .then((res) => {
                 const response = res.data
@@ -114,7 +114,7 @@ const SignUp = () => {
                 }
             })
             .finally(() => {
-                message.destroy('sending')
+                message.destroy('SENDING')
                 setIsSending(false)
             })
     }
diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx
index 049c684..be3ef19 100644
--- a/src/pages/Sign/Verify.tsx
+++ b/src/pages/Sign/Verify.tsx
@@ -70,7 +70,7 @@ const Verify = () => {
             return
         }
         setIsSending(true)
-        void message.loading({ content: '发送中', key: 'sending', duration: 0 })
+        void message.loading({ content: '发送中', key: 'SENDING', duration: 0 })
         void r_auth_resend()
             .then((res) => {
                 const response = res.data
@@ -81,7 +81,7 @@ const Verify = () => {
                 }
             })
             .finally(() => {
-                message.destroy('sending')
+                message.destroy('SENDING')
                 setIsSending(false)
             })
     }
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index 42fef8a..47d3147 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -177,7 +177,7 @@ const Base = () => {
             }
             setCompiling(true)
             setIsLoading(true)
-            void message.loading({ content: '加载文件中', key: 'compile-loading', duration: 0 })
+            void message.loading({ content: '加载文件中', key: 'COMPILE_LOADING', duration: 0 })
 
             if (!baseDetailLoading[value.id]) {
                 getBaseDetail(value)
@@ -211,7 +211,7 @@ const Base = () => {
                         baseDetail = prevState[value.id]
                         return prevState
                     })
-                    message.destroy('compile-loading')
+                    message.destroy('COMPILE_LOADING')
                     const files = base64ToFiles(baseDetail!.source.data!)
                     if (!Object.keys(files).includes(IMPORT_MAP_FILE_NAME)) {
                         void message.warning(`编译中止：未包含 ${IMPORT_MAP_FILE_NAME} 文件`)
@@ -263,7 +263,7 @@ const Base = () => {
                                         resolve()
                                         void message.loading({
                                             content: '编译中',
-                                            key: 'compiling',
+                                            key: 'COMPILING',
                                             duration: 0
                                         })
                                         void compiler
@@ -273,14 +273,12 @@ const Base = () => {
                                                 compileForm.getFieldValue('entryFileName') as string
                                             )
                                             .then((result) => {
-                                                void message.destroy('compiling')
+                                                message.destroy('COMPILING')
                                                 void message.loading({
                                                     content: '上传中',
-                                                    key: 'uploading',
+                                                    key: 'UPLOADING',
                                                     duration: 0
                                                 })
-                                                // TODO Remove debug
-                                                console.debug(result.outputFiles[0].text)
                                                 void r_sys_tool_base_update({
                                                     id: value.id,
                                                     dist: strToBase64(result.outputFiles[0].text)
@@ -297,14 +295,14 @@ const Base = () => {
                                                         }
                                                     })
                                                     .finally(() => {
-                                                        void message.destroy('uploading')
+                                                        message.destroy('UPLOADING')
                                                         setCompiling(false)
                                                         setIsLoading(false)
                                                     })
                                             })
                                             .catch((e: Error) => {
                                                 void message.error(`编译失败：${e.message}`)
-                                                void message.destroy('compiling')
+                                                message.destroy('COMPILING')
                                                 setCompiling(false)
                                                 setIsLoading(false)
                                             })
@@ -325,7 +323,7 @@ const Base = () => {
                 .catch(() => {
                     setCompiling(false)
                     setIsLoading(false)
-                    message.destroy('compile-loading')
+                    message.destroy('COMPILE_LOADING')
                 })
         }
     }
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index 8a0c87d..b6f6acb 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -45,7 +45,7 @@ const Create = () => {
                         )
                         break
                     case DATABASE_DUPLICATE_KEY:
-                        void message.warning('已存在相同 ID 相同版本的应用')
+                        void message.warning('已存在相同 ID 相同版本或未发布版本的应用')
                         setCreating(false)
                         break
                     default:
@@ -71,8 +71,9 @@ const Create = () => {
 
         const reader = new FileReader()
         reader.addEventListener('load', () => {
+            // eslint-disable-next-line @typescript-eslint/no-base-to-string
             form.setFieldValue('icon', reader.result!.toString().split(',')[1])
-            void form.validateFields()
+            void form.validateFields(['icon'])
         })
         reader.readAsDataURL(file)
 
@@ -187,7 +188,7 @@ const Create = () => {
                                 >
                                     <AntdForm.Item
                                         label={'图标'}
-                                        name={''}
+                                        name={'icon'}
                                         rules={[
                                             ({ getFieldValue }) => ({
                                                 validator() {
@@ -200,6 +201,7 @@ const Create = () => {
                                                 }
                                             })
                                         ]}
+                                        getValueFromEvent={() => {}}
                                     >
                                         <AntdUpload
                                             listType={'picture-card'}
@@ -218,7 +220,7 @@ const Create = () => {
                                             )}
                                         </AntdUpload>
                                     </AntdForm.Item>
-                                    <AntdForm.Item name={'icon'}>
+                                    <AntdForm.Item name={'icon'} hidden>
                                         <AntdInput />
                                     </AntdForm.Item>
                                     <AntdForm.Item
@@ -291,16 +293,6 @@ const Create = () => {
                                             onChange={handleOnTemplateChange}
                                         />
                                     </AntdForm.Item>
-                                    <AntdForm.Item
-                                        label={'访问权限'}
-                                        name={'privately'}
-                                        initialValue={false}
-                                    >
-                                        <AntdSwitch
-                                            checkedChildren={'私有'}
-                                            unCheckedChildren={'公开'}
-                                        />
-                                    </AntdForm.Item>
                                     <AntdForm.Item
                                         label={'关键字'}
                                         tooltip={'工具搜索（每个不超过10个字符）'}
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
new file mode 100644
index 0000000..f20e37e
--- /dev/null
+++ b/src/pages/Tools/View.tsx
@@ -0,0 +1,61 @@
+import { r_tool_detail } from '@/services/tool.tsx'
+import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import { getLoginStatus } from '@/util/auth.tsx'
+
+const View = () => {
+    const navigate = useNavigate()
+    const [loading, setLoading] = useState(false)
+    const { username, toolId, ver } = useParams()
+
+    const getTool = () => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+        void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
+
+        void r_tool_detail(username!, toolId!, ver || 'latest')
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        console.log(response.data)
+                        break
+                    case DATABASE_NO_RECORD_FOUND:
+                        void message.error('未找到指定工具')
+                        navigate('/')
+                        break
+                    default:
+                        void message.error('获取工具信息失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        if (username === '!' && !getLoginStatus()) {
+            navigate('/')
+            return
+        }
+        if (username !== '!' && ver) {
+            navigate(`/view/${username}/${toolId}`)
+            return
+        }
+        if (username === '!' && !ver) {
+            navigate(`/view/!/${toolId}/latest`)
+            return
+        }
+        getTool()
+    }, [])
+
+    return (
+        <>
+            {username}:{toolId}:{ver}
+        </>
+    )
+}
+
+export default View
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 0f205de..256313f 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -1,5 +1,206 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode, useState } from 'react'
+import Icon from '@ant-design/icons'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/pages/tools/index.scss'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
+import { r_tool_get } from '@/services/tool.tsx'
+import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import { getLoginStatus } from '@/util/auth.tsx'
+import { useNavigate } from 'react-router'
+
+interface CommonCardProps
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: ReactNode
+    toolName?: string
+    toolId?: string
+    options?: TiltOptions
+    url?: string
+    onOpen?: () => void
+    onEdit?: () => void
+    onPublish?: () => void
+    onDelete?: () => void
+}
+
+const CommonCard = ({
+    style,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref,
+    icon,
+    toolName,
+    toolId,
+    options = {
+        reverse: true,
+        max: 8,
+        glare: true,
+        ['max-glare']: 0.3,
+        scale: 1.03
+    },
+    url,
+    onOpen,
+    onEdit,
+    onPublish,
+    onDelete,
+    children,
+    ...props
+}: CommonCardProps) => {
+    const navigate = useNavigate()
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current && VanillaTilt.init(cardRef.current, options)
+    }, [options])
+
+    const handleCardOnClick = () => {
+        url && navigate(url)
+    }
+
+    return (
+        <Card
+            style={{ overflow: 'visible', ...style }}
+            ref={cardRef}
+            {...props}
+            onClick={handleCardOnClick}
+        >
+            <FlexBox className={'common-card'}>
+                <div className={'icon'}>{icon}</div>
+                <div className={'info'}>
+                    {toolName && <div className={'tool-name'}>{toolName}</div>}
+                    {toolId && <div className={'tool-id'}>{`ID: ${toolId}`}</div>}
+                </div>
+                <div className={'operation'}>
+                    {onOpen && (
+                        <AntdButton onClick={onOpen} size={'small'} type={'primary'}>
+                            打开
+                        </AntdButton>
+                    )}
+                    {onEdit && (
+                        <div className={'edit'}>
+                            <AntdButton.Group size={'small'}>
+                                <AntdButton>编辑</AntdButton>
+                                {onPublish && <AntdButton>发布</AntdButton>}
+                            </AntdButton.Group>
+                        </div>
+                    )}
+                    {onDelete && (
+                        <AntdButton size={'small'} danger>
+                            删除
+                        </AntdButton>
+                    )}
+                </div>
+                {children}
+            </FlexBox>
+        </Card>
+    )
+}
+
+interface ToolCardProps {
+    tools: ToolVo[]
+}
+
+const ToolCard = ({ tools }: ToolCardProps) => {
+    const navigate = useNavigate()
+    const [selectedTool, setSelectedTool] = useState(tools[0])
+
+    const handleOnVersionChange = (value: string) => {
+        setSelectedTool(tools.find((item) => item.id === value)!)
+    }
+
+    const handleOnOpenTool = () => {
+        navigate(`/view/!/${selectedTool.toolId}/${selectedTool.ver}`)
+    }
+
+    const handleOnEditTool = () => {}
+
+    const handleOnPublishTool = () => {}
+
+    const handleOnDeleteTool = () => {}
+
+    return (
+        <CommonCard
+            icon={<img src={`data:image/svg+xml;base64,${selectedTool.icon}`} alt={'Icon'} />}
+            toolName={selectedTool.name}
+            toolId={selectedTool.toolId}
+            onOpen={handleOnOpenTool}
+            onEdit={handleOnEditTool}
+            onPublish={handleOnPublishTool}
+            onDelete={handleOnDeleteTool}
+        >
+            <AntdSelect
+                className={'version-select'}
+                size={'small'}
+                value={selectedTool.id}
+                onChange={handleOnVersionChange}
+                options={tools.map((value) => ({
+                    value: value.id,
+                    label: `${value.ver}${value.publish === '0' ? '*' : ''}`
+                }))}
+            />
+        </CommonCard>
+    )
+}
+
 const Tools = () => {
-    return <></>
+    const [loading, setLoading] = useState(false)
+    const [toolData, setToolData] = useState<ToolVo[]>()
+
+    const getTool = () => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+        void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
+
+        void r_tool_get()
+            .then((res) => {
+                const response = res.data
+
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setToolData(response.data!)
+                        break
+                    default:
+                        void message.error('获取工具失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        if (!getLoginStatus()) {
+            return
+        }
+        getTool()
+    }, [])
+
+    return (
+        <>
+            <FitFullscreen data-component={'tools'}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <CommonCard
+                            icon={<Icon component={IconOxygenNewProject} />}
+                            toolName={'创建工具'}
+                            url={'/create'}
+                        />
+                        {toolData &&
+                            Object.values(
+                                toolData.reduce((result: Record<string, ToolVo[]>, item) => {
+                                    result[item.toolId] = result[item.toolId] || []
+                                    result[item.toolId].push(item)
+                                    return result
+                                }, {})
+                            ).map((value, index) => <ToolCard key={index} tools={value} />)}
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullscreen>
+        </>
+    )
 }
 
 export default Tools
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 30c6ada..7c16e4f 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -28,9 +28,23 @@ export const tools: RouteJsonObject[] = [
         name: '创建工具',
         titlePostfix: ' - 创建新工具',
         icon: lazy(() => import('~icons/oxygen/newProject')),
-        menu: true,
+        menu: false,
         auth: true
     },
+    {
+        path: 'view/:username/:toolId/:ver',
+        absolutePath: '/view',
+        id: 'tools-view-ver',
+        component: lazy(() => import('@/pages/Tools/View')),
+        name: '查看'
+    },
+    {
+        path: 'view/:username/:toolId',
+        absolutePath: '/view',
+        id: 'tools-view',
+        component: lazy(() => import('@/pages/Tools/View')),
+        name: '查看'
+    },
     {
         path: '*',
         absolutePath: '*',
diff --git a/src/services/index.tsx b/src/services/index.tsx
index c4652b7..149a65e 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -68,11 +68,14 @@ service.interceptors.response.use(
         switch (response.data.code) {
             case PERMISSION_UNAUTHORIZED:
                 removeToken()
-                void message.error(
-                    <>
-                        <strong>未登录</strong>
-                    </>
-                )
+                void message.error({
+                    content: (
+                        <>
+                            <strong>未登录</strong>
+                        </>
+                    ),
+                    key: 'NO_LOGIN'
+                })
                 setTimeout(() => {
                     location.reload()
                 }, 1500)
@@ -80,11 +83,14 @@ service.interceptors.response.use(
             case PERMISSION_TOKEN_ILLEGAL:
             case PERMISSION_TOKEN_HAS_EXPIRED:
                 removeToken()
-                void message.error(
-                    <>
-                        <strong>登录已过期</strong>
-                    </>
-                )
+                void message.error({
+                    content: (
+                        <>
+                            <strong>登录已过期</strong>
+                        </>
+                    ),
+                    key: 'LOGIN_HAS_EXPIRED'
+                })
                 setTimeout(() => {
                     location.replace(
                         getRedirectUrl('/login', `${location.pathname}${location.search}`)
@@ -92,18 +98,24 @@ service.interceptors.response.use(
                 }, 1500)
                 throw response?.data
             case PERMISSION_ACCESS_DENIED:
-                void message.error(
-                    <>
-                        <strong>暂无权限操作</strong>
-                    </>
-                )
+                void message.error({
+                    content: (
+                        <>
+                            <strong>暂无权限操作</strong>
+                        </>
+                    ),
+                    key: 'ACCESS_DENIED'
+                })
                 throw response?.data
             case SYSTEM_REQUEST_TOO_FREQUENT:
-                void message.warning(
-                    <>
-                        <strong>请求过于频繁，请稍后重试</strong>
-                    </>
-                )
+                void message.warning({
+                    content: (
+                        <>
+                            <strong>请求过于频繁，请稍后重试</strong>
+                        </>
+                    ),
+                    key: 'REQUEST_TOO_FREQUENT'
+                })
                 throw response?.data
         }
         return response
@@ -113,13 +125,16 @@ service.interceptors.response.use(
             error.code === 'ETIMEDOUT' ||
             (error.code === 'ECONNABORTED' && error.message.includes('timeout'))
         ) {
-            void message.error('请求超时，请稍后重试')
+            void message.error({ content: '请求超时，请稍后重试', key: 'TIMEOUT' })
         } else {
-            void message.error(
-                <>
-                    <strong>服务器出错</strong>，请稍后重试
-                </>
-            )
+            void message.error({
+                content: (
+                    <>
+                        <strong>服务器出错</strong>，请稍后重试
+                    </>
+                ),
+                key: 'SERVER_ERROR'
+            })
         }
         return await Promise.reject(error?.response?.data)
     }
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
index 7621345..705fd7c 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.tsx
@@ -1,5 +1,10 @@
 import request from '@/services/index'
-import { URL_TOOL, URL_TOOL_CATEGORY, URL_TOOL_TEMPLATE } from '@/constants/urls.constants'
+import {
+    URL_TOOL,
+    URL_TOOL_CATEGORY,
+    URL_TOOL_DETAIL,
+    URL_TOOL_TEMPLATE
+} from '@/constants/urls.constants'
 
 export const r_tool_template_get = () => request.get<ToolTemplateVo[]>(URL_TOOL_TEMPLATE)
 
@@ -9,3 +14,8 @@ export const r_tool_template_get_one = (id: string) =>
 export const r_tool_category_get = () => request.get<ToolCategoryVo[]>(URL_TOOL_CATEGORY)
 
 export const r_tool_create = (param: ToolCreateParam) => request.post<ToolVo>(URL_TOOL, param)
+
+export const r_tool_get = () => request.get<ToolVo[]>(URL_TOOL)
+
+export const r_tool_detail = (username: string, toolId: string, ver: string) =>
+    request.get<ToolVo>(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`)

From d6ff952596db97ebc8f991a456486f56527daa4c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 30 Jan 2024 19:24:37 +0800
Subject: [PATCH 210/307] Add tool view page

---
 src/assets/css/pages/tools/index.scss |  10 +-
 src/assets/css/pages/tools/view.scss  |   8 ++
 src/assets/svg/upgrade.svg            |   1 +
 src/constants/common.constants.ts     |   2 +
 src/global.d.ts                       |  10 +-
 src/pages/Tools/Create.tsx            |   6 +-
 src/pages/Tools/View.tsx              |  47 ++++++--
 src/pages/Tools/index.tsx             | 166 +++++++++++++++++++++++---
 src/services/tool.tsx                 |   4 +
 9 files changed, 227 insertions(+), 27 deletions(-)
 create mode 100644 src/assets/css/pages/tools/view.scss
 create mode 100644 src/assets/svg/upgrade.svg

diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.scss
index bb85d5a..8f0bcab 100644
--- a/src/assets/css/pages/tools/index.scss
+++ b/src/assets/css/pages/tools/index.scss
@@ -28,6 +28,14 @@
           position: absolute;
           top: 10px;
           left: 10px;
+          width: 6em;
+        }
+
+        .upgrade-bt {
+          position: absolute;
+          top: 10px;
+          right: 10px;
+          font-size: 1.8em;
         }
 
         .icon {
@@ -61,7 +69,7 @@
 
     & > :not(:first-child) {
       .info {
-        transform: translateY(20px);
+        transform: translateY(40px);
         transition: all 0.1s ease;
       }
 
diff --git a/src/assets/css/pages/tools/view.scss b/src/assets/css/pages/tools/view.scss
new file mode 100644
index 0000000..df4f6a6
--- /dev/null
+++ b/src/assets/css/pages/tools/view.scss
@@ -0,0 +1,8 @@
+[data-component=tools-view] {
+  padding: 30px;
+
+  .card-box {
+    height: 100%;
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/svg/upgrade.svg b/src/assets/svg/upgrade.svg
new file mode 100644
index 0000000..aa55d78
--- /dev/null
+++ b/src/assets/svg/upgrade.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M837.008696 338.365217 583.234783 84.591304c-24.486957-24.486957-66.782609-24.486957-91.269565 0L235.965217 338.365217c-17.808696 17.808696-24.486957 46.747826-13.356522 71.234783 11.130435 24.486957 33.391304 40.069565 60.104348 40.069565l91.269565 0L373.982609 645.565217l46.747826 0L420.730435 402.921739l-135.791304 0c-11.130435 0-15.582609-8.904348-17.808696-11.130435-2.226087-2.226087-4.452174-13.356522 4.452174-20.034783L523.130435 115.756522C527.582609 113.530435 532.034783 111.304348 536.486957 111.304348s8.904348 2.226087 13.356522 4.452174l256 256c8.904348 8.904348 4.452174 17.808696 4.452174 20.034783-2.226087 2.226087-6.678261 11.130435-17.808696 11.130435l-135.791304 0 0 289.391304c0 2.226087-2.226087 2.226087-2.226087 2.226087L373.982609 694.53913l0 46.747826 278.26087 0c26.713043 0 48.973913-22.26087 48.973913-48.973913L701.217391 449.669565l91.269565 0c26.713043 0 48.973913-15.582609 60.104348-40.069565C861.495652 385.113043 857.043478 358.4 837.008696 338.365217L837.008696 338.365217zM837.008696 338.365217M714.573913 839.234783c0 15.582609-11.130435 26.713043-26.713043 26.713043L394.017391 865.947826c-15.582609 0-26.713043-11.130435-26.713043-26.713043l0 0c0-15.582609 11.130435-26.713043 26.713043-26.713043l293.843478 0C703.443478 812.521739 714.573913 823.652174 714.573913 839.234783L714.573913 839.234783 714.573913 839.234783zM714.573913 839.234783M670.052174 946.086957c0 11.130435-8.904348 22.26087-20.034783 22.26087l-220.382609 0c-11.130435 0-20.034783-8.904348-20.034783-22.26087l0 0c0-11.130435 8.904348-22.26087 20.034783-22.26087l220.382609 0C661.147826 923.826087 670.052174 934.956522 670.052174 946.086957L670.052174 946.086957 670.052174 946.086957zM670.052174 946.086957" /></svg>
\ No newline at end of file
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index be6a3e7..12cc77e 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -74,6 +74,8 @@ export const DATABASE_EXECUTE_ERROR = 30050
 export const DATABASE_DUPLICATE_KEY = 30051
 export const DATABASE_NO_RECORD_FOUND = 30052
 
+export const TOOL_ILLEGAL_VERSION = 40050
+
 export const API_AVATAR_SUCCESS = 50100
 export const API_AVATAR_ERROR = 50150
 
diff --git a/src/global.d.ts b/src/global.d.ts
index 1c55dee..0a6942b 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -531,15 +531,16 @@ interface ToolVo {
     toolId: string
     icon: string
     description: string
-    baseId: string
+    base: ToolBaseVo
     author: UserInfoVo
     ver: string
     keywords: string[]
     categories: ToolCategoryVo[]
     source: ToolDataVo
     dist: ToolDataVo
+    entryPoint: string
     publish: string
-    review: number
+    review: 'NONE' | 'PASS' | 'REJECT'
     createTime: string
     updateTime: string
 }
@@ -554,3 +555,8 @@ interface ToolCreateParam {
     keywords: string[]
     categories: string[]
 }
+
+interface ToolUpgradeParam {
+    toolId: string
+    ver: string
+}
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index b6f6acb..746eaca 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -11,9 +11,9 @@ import {
     r_tool_template_get,
     r_tool_template_get_one
 } from '@/services/tool'
+import compiler from '@/components/Playground/compiler'
 import { IImportMap } from '@/components/Playground/shared'
 import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
-import compiler from '@/components/Playground/compiler'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -21,6 +21,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import Playground from '@/components/Playground'
 
 const Create = () => {
+    const navigate = useNavigate()
     const [form] = AntdForm.useForm<ToolCreateParam>()
     const formValues = AntdForm.useWatch([], form)
     const [templateData, setTemplateData] = useState<ToolTemplateVo[]>()
@@ -43,9 +44,10 @@ const Create = () => {
                         void message.success(
                             `创建工具 ${response.data!.name}<${response.data!.toolId}>:${response.data!.ver} 成功`
                         )
+                        navigate(`/view/!/${response.data!.toolId}/${response.data!.ver}`)
                         break
                     case DATABASE_DUPLICATE_KEY:
-                        void message.warning('已存在相同 ID 相同版本或未发布版本的应用')
+                        void message.warning('已存在相同 ID 的应用')
                         setCreating(false)
                         break
                     default:
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index f20e37e..459f750 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -1,11 +1,39 @@
-import { r_tool_detail } from '@/services/tool.tsx'
-import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
-import { getLoginStatus } from '@/util/auth.tsx'
+import '@/assets/css/pages/tools/view.scss'
+import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { getLoginStatus } from '@/util/auth'
+import { r_tool_detail } from '@/services/tool'
+import compiler from '@/components/Playground/compiler'
+import { IImportMap } from '@/components/Playground/shared'
+import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import Playground from '@/components/Playground'
+import Card from '@/components/common/Card'
 
 const View = () => {
     const navigate = useNavigate()
     const [loading, setLoading] = useState(false)
     const { username, toolId, ver } = useParams()
+    const [compiledCode, setCompiledCode] = useState('')
+
+    const render = (toolVo: ToolVo) => {
+        try {
+            const baseDist = base64ToStr(toolVo.base.dist.data!)
+            const files = base64ToFiles(toolVo.source.data!)
+            const importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap
+
+            void compiler
+                .compile(files, importMap, toolVo.entryPoint)
+                .then((result) => {
+                    const output = result.outputFiles[0].text
+                    setCompiledCode(`${output}\n${baseDist}`)
+                })
+                .catch((reason) => {
+                    void message.error(`编译失败：${reason}`)
+                })
+        } catch (e) {
+            void message.error('载入工具失败')
+        }
+    }
 
     const getTool = () => {
         if (loading) {
@@ -19,7 +47,7 @@ const View = () => {
                 const response = res.data
                 switch (response.code) {
                     case DATABASE_SELECT_SUCCESS:
-                        console.log(response.data)
+                        render(response.data!)
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
@@ -52,9 +80,14 @@ const View = () => {
     }, [])
 
     return (
-        <>
-            {username}:{toolId}:{ver}
-        </>
+        <FitFullscreen data-component={'tools-view'}>
+            <Card>
+                <Playground.Output.Preview.Render
+                    iframeKey={`${username}:${toolId}:${ver}`}
+                    compiledCode={compiledCode}
+                />
+            </Card>
+        </FitFullscreen>
     )
 }
 
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 256313f..23632aa 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -1,15 +1,19 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode, useState } from 'react'
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import '@/assets/css/pages/tools/index.scss'
+import {
+    DATABASE_DELETE_SUCCESS,
+    DATABASE_SELECT_SUCCESS,
+    DATABASE_UPDATE_SUCCESS,
+    TOOL_ILLEGAL_VERSION
+} from '@/constants/common.constants'
+import { getLoginStatus } from '@/util/auth'
+import { r_tool_delete, r_tool_get, r_tool_upgrade } from '@/services/tool'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
-import { r_tool_get } from '@/services/tool.tsx'
-import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
-import { getLoginStatus } from '@/util/auth.tsx'
-import { useNavigate } from 'react-router'
 
 interface CommonCardProps
     extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -79,13 +83,13 @@ const CommonCard = ({
                     {onEdit && (
                         <div className={'edit'}>
                             <AntdButton.Group size={'small'}>
-                                <AntdButton>编辑</AntdButton>
-                                {onPublish && <AntdButton>发布</AntdButton>}
+                                <AntdButton onClick={onEdit}>编辑</AntdButton>
+                                {onPublish && <AntdButton onClick={onPublish}>发布</AntdButton>}
                             </AntdButton.Group>
                         </div>
                     )}
                     {onDelete && (
-                        <AntdButton size={'small'} danger>
+                        <AntdButton size={'small'} danger onClick={onDelete}>
                             删除
                         </AntdButton>
                     )}
@@ -98,9 +102,11 @@ const CommonCard = ({
 
 interface ToolCardProps {
     tools: ToolVo[]
+    onDelete?: (tool: ToolVo) => void
+    onUpgrade?: (tool: ToolVo) => void
 }
 
-const ToolCard = ({ tools }: ToolCardProps) => {
+const ToolCard = ({ tools, onDelete, onUpgrade }: ToolCardProps) => {
     const navigate = useNavigate()
     const [selectedTool, setSelectedTool] = useState(tools[0])
 
@@ -112,11 +118,25 @@ const ToolCard = ({ tools }: ToolCardProps) => {
         navigate(`/view/!/${selectedTool.toolId}/${selectedTool.ver}`)
     }
 
-    const handleOnEditTool = () => {}
+    const handleOnEditTool = () => {
+        if (selectedTool.publish === '0') {
+            return () => {}
+        }
+    }
 
-    const handleOnPublishTool = () => {}
+    const handleOnPublishTool = () => {
+        if (selectedTool.publish === '0') {
+            return () => {}
+        }
+    }
 
-    const handleOnDeleteTool = () => {}
+    const handleOnDeleteTool = () => {
+        onDelete?.(selectedTool)
+    }
+
+    const handleOnUpgradeTool = () => {
+        onUpgrade?.(selectedTool)
+    }
 
     return (
         <CommonCard
@@ -124,8 +144,8 @@ const ToolCard = ({ tools }: ToolCardProps) => {
             toolName={selectedTool.name}
             toolId={selectedTool.toolId}
             onOpen={handleOnOpenTool}
-            onEdit={handleOnEditTool}
-            onPublish={handleOnPublishTool}
+            onEdit={handleOnEditTool()}
+            onPublish={handleOnPublishTool()}
             onDelete={handleOnDeleteTool}
         >
             <AntdSelect
@@ -138,13 +158,121 @@ const ToolCard = ({ tools }: ToolCardProps) => {
                     label: `${value.ver}${value.publish === '0' ? '*' : ''}`
                 }))}
             />
+            {tools.every((value) => value.publish !== '0') && (
+                <AntdTooltip title={'更新'}>
+                    <Icon
+                        component={IconOxygenUpgrade}
+                        className={'upgrade-bt'}
+                        onClick={handleOnUpgradeTool}
+                    />
+                </AntdTooltip>
+            )}
         </CommonCard>
     )
 }
 
 const Tools = () => {
+    const navigate = useNavigate()
+    const [modal, contextHolder] = AntdModal.useModal()
     const [loading, setLoading] = useState(false)
     const [toolData, setToolData] = useState<ToolVo[]>()
+    const [upgradeForm] = AntdForm.useForm<ToolUpgradeParam>()
+
+    const handleOnDeleteTool = (tool: ToolVo) => {
+        modal
+            .confirm({
+                title: '确定删除',
+                content: `确定删除工具 ${tool.name}:${tool.ver} 吗？`
+            })
+            .then(
+                (confirmed) => {
+                    if (confirmed) {
+                        setLoading(true)
+
+                        void r_tool_delete(tool.id)
+                            .then((res) => {
+                                const response = res.data
+                                if (response.code === DATABASE_DELETE_SUCCESS) {
+                                    void message.success('删除成功')
+                                    getTool()
+                                } else {
+                                    void message.error('删除失败，请稍后重试')
+                                }
+                            })
+                            .finally(() => {
+                                setLoading(false)
+                            })
+                    }
+                },
+                () => {}
+            )
+    }
+
+    const handleOnUpgradeTool = (tool: ToolVo) => {
+        void modal.confirm({
+            title: '更新应用',
+            content: (
+                <>
+                    <AntdForm form={upgradeForm}>
+                        <AntdForm.Item
+                            initialValue={tool.toolId}
+                            name={'toolId'}
+                            label={'工具 ID'}
+                            style={{ marginTop: 10 }}
+                        >
+                            <AntdInput disabled />
+                        </AntdForm.Item>
+                        <AntdForm.Item
+                            name={'ver'}
+                            label={'版本'}
+                            rules={[
+                                { required: true },
+                                {
+                                    pattern: /^\d+\.\d+\.\d+$/,
+                                    message: `格式必须为 '<数字>.<数字>.<数字>', eg. 1.0.3`
+                                }
+                            ]}
+                        >
+                            <AntdInput maxLength={10} showCount placeholder={'请输入版本'} />
+                        </AntdForm.Item>
+                    </AntdForm>
+                </>
+            ),
+            onOk: () =>
+                upgradeForm.validateFields().then(
+                    () => {
+                        return new Promise<void>((resolve, reject) => {
+                            void r_tool_upgrade({
+                                toolId: upgradeForm.getFieldValue('toolId') as string,
+                                ver: upgradeForm.getFieldValue('ver') as string
+                            }).then((res) => {
+                                const response = res.data
+                                switch (response.code) {
+                                    case DATABASE_UPDATE_SUCCESS:
+                                        void message.success('创建新版本成功')
+                                        const toolVo = response.data!
+                                        navigate(`/view/!/${toolVo.toolId}/${toolVo.ver}`)
+                                        resolve()
+                                        break
+                                    case TOOL_ILLEGAL_VERSION:
+                                        void message.error('版本有误，请重新输入')
+                                        reject()
+                                        break
+                                    default:
+                                        void message.error('更新失败，请稍后重试')
+                                        reject()
+                                }
+                            })
+                        })
+                    },
+                    () => {
+                        return new Promise((_, reject) => {
+                            reject('未输入版本')
+                        })
+                    }
+                )
+        })
+    }
 
     const getTool = () => {
         if (loading) {
@@ -195,10 +323,18 @@ const Tools = () => {
                                     result[item.toolId].push(item)
                                     return result
                                 }, {})
-                            ).map((value, index) => <ToolCard key={index} tools={value} />)}
+                            ).map((value) => (
+                                <ToolCard
+                                    key={JSON.stringify(value)}
+                                    tools={value}
+                                    onDelete={handleOnDeleteTool}
+                                    onUpgrade={handleOnUpgradeTool}
+                                />
+                            ))}
                     </FlexBox>
                 </HideScrollbar>
             </FitFullscreen>
+            {contextHolder}
         </>
     )
 }
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
index 705fd7c..7339843 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.tsx
@@ -15,7 +15,11 @@ export const r_tool_category_get = () => request.get<ToolCategoryVo[]>(URL_TOOL_
 
 export const r_tool_create = (param: ToolCreateParam) => request.post<ToolVo>(URL_TOOL, param)
 
+export const r_tool_upgrade = (param: ToolUpgradeParam) => request.patch<ToolVo>(URL_TOOL, param)
+
 export const r_tool_get = () => request.get<ToolVo[]>(URL_TOOL)
 
 export const r_tool_detail = (username: string, toolId: string, ver: string) =>
     request.get<ToolVo>(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`)
+
+export const r_tool_delete = (id: string) => request.delete(`${URL_TOOL}/${id}`)

From 28140543c4c4970a5eafb8cb5d9ed94d8acde3aa Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 31 Jan 2024 18:07:16 +0800
Subject: [PATCH 211/307] Add tool edit page

---
 src/assets/css/pages/tools/edit.scss          |   6 +
 .../Playground/Output/Preview/index.tsx       |  20 ++-
 .../Playground/Output/Preview/preview.scss    |  10 ++
 src/components/Playground/Output/index.tsx    |  13 +-
 src/components/Playground/playground.scss     |  10 --
 src/global.d.ts                               |   2 +-
 src/pages/System/Tools/index.tsx              |  12 +-
 src/pages/Tools/Edit.tsx                      | 168 ++++++++++++++++++
 src/pages/Tools/View.tsx                      |   2 +-
 src/pages/Tools/index.tsx                     |  26 ++-
 src/router/tools.tsx                          |   7 +
 11 files changed, 254 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/css/pages/tools/edit.scss
 create mode 100644 src/pages/Tools/Edit.tsx

diff --git a/src/assets/css/pages/tools/edit.scss b/src/assets/css/pages/tools/edit.scss
new file mode 100644
index 0000000..fb79eda
--- /dev/null
+++ b/src/assets/css/pages/tools/edit.scss
@@ -0,0 +1,6 @@
+[data-component=tools-edit] {
+  .root-content {
+    width: 100%;
+    height: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx
index 93cedc3..d960c35 100644
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -8,9 +8,18 @@ interface PreviewProps {
     files: IFiles
     importMap: IImportMap
     entryPoint: string
+    preExpansionCode?: string
+    postExpansionCode?: string
 }
 
-const Preview = ({ iframeKey, files, importMap, entryPoint }: PreviewProps) => {
+const Preview = ({
+    iframeKey,
+    files,
+    importMap,
+    entryPoint,
+    preExpansionCode = '',
+    postExpansionCode = ''
+}: PreviewProps) => {
     const [errorMsg, setErrorMsg] = useState('')
     const [compiledCode, setCompiledCode] = useState('')
 
@@ -19,14 +28,19 @@ const Preview = ({ iframeKey, files, importMap, entryPoint }: PreviewProps) => {
     }
 
     useEffect(() => {
+        if (!Object.keys(files).length || !importMap || !entryPoint.length) {
+            return
+        }
         Compiler.compile(files, importMap, entryPoint)
             .then((result) => {
-                setCompiledCode(result.outputFiles[0].text)
+                setCompiledCode(
+                    `${preExpansionCode}\n${result.outputFiles[0].text}\n${postExpansionCode}`
+                )
             })
             .catch((e: Error) => {
                 setErrorMsg(`编译失败：${e.message}`)
             })
-    }, [files, Compiler])
+    }, [files, Compiler, importMap, entryPoint])
 
     return (
         <div data-component={'playground-preview'}>
diff --git a/src/components/Playground/Output/Preview/preview.scss b/src/components/Playground/Output/Preview/preview.scss
index e69a5b6..f4a3b6e 100644
--- a/src/components/Playground/Output/Preview/preview.scss
+++ b/src/components/Playground/Output/Preview/preview.scss
@@ -3,4 +3,14 @@
   position: relative;
   width: 100%;
   height: 100%;
+
+  .playground-error-message {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    background-color: #FF4D4FAA;
+    padding: 5px 10px;
+    font-size: 1.2em;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Playground/Output/index.tsx b/src/components/Playground/Output/index.tsx
index bf729b7..b138375 100644
--- a/src/components/Playground/Output/index.tsx
+++ b/src/components/Playground/Output/index.tsx
@@ -9,9 +9,18 @@ interface OutputProps {
     selectedFileName: string
     importMap: IImportMap
     entryPoint: string
+    preExpansionCode?: string
+    postExpansionCode?: string
 }
 
-const Output = ({ files, selectedFileName, importMap, entryPoint }: OutputProps) => {
+const Output = ({
+    files,
+    selectedFileName,
+    importMap,
+    entryPoint,
+    preExpansionCode,
+    postExpansionCode
+}: OutputProps) => {
     const [selectedTab, setSelectedTab] = useState('Preview')
 
     return (
@@ -31,6 +40,8 @@ const Output = ({ files, selectedFileName, importMap, entryPoint }: OutputProps)
                     files={files}
                     importMap={importMap}
                     entryPoint={entryPoint}
+                    preExpansionCode={preExpansionCode}
+                    postExpansionCode={postExpansionCode}
                 />
             )}
             {selectedTab === 'Transform' && <Transform file={files[selectedFileName]} />}
diff --git a/src/components/Playground/playground.scss b/src/components/Playground/playground.scss
index 35c78d1..b4b927d 100644
--- a/src/components/Playground/playground.scss
+++ b/src/components/Playground/playground.scss
@@ -5,14 +5,4 @@
   > * {
     width: 0 !important;
   }
-
-  .playground-error-message {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    color: white;
-    background-color: #FF4D4FAA;
-    padding: 5px 10px;
-    font-size: 1.2em;
-  }
 }
\ No newline at end of file
diff --git a/src/global.d.ts b/src/global.d.ts
index 0a6942b..481d5f7 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -540,7 +540,7 @@ interface ToolVo {
     dist: ToolDataVo
     entryPoint: string
     publish: string
-    review: 'NONE' | 'PASS' | 'REJECT'
+    review: 'NONE' | 'PROCESSING' | 'PASS' | 'REJECT'
     createTime: string
     updateTime: string
 }
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 170916e..44880c7 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -1,5 +1,15 @@
+import Playground from '@/components/Playground'
+import templates from '@/components/Playground/templates'
+
 const Tools = () => {
-    return <>1</>
+    const template = templates['base']
+    return (
+        <Playground
+            initFiles={template.files}
+            initTsconfigRaw={JSON.stringify(template.tsconfig, null, 2)}
+            initImportMapRaw={JSON.stringify(template.importMap, null, 2)}
+        />
+    )
 }
 
 export default Tools
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
new file mode 100644
index 0000000..63ef259
--- /dev/null
+++ b/src/pages/Tools/Edit.tsx
@@ -0,0 +1,168 @@
+import '@/assets/css/pages/tools/edit.scss'
+import { r_tool_detail } from '@/services/tool.tsx'
+import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import { useEffect, useState } from 'react'
+import Playground from '@/components/Playground'
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared.ts'
+import {
+    base64ToFiles,
+    base64ToStr,
+    IMPORT_MAP_FILE_NAME,
+    TS_CONFIG_FILE_NAME
+} from '@/components/Playground/files.ts'
+import LoadingMask from '@/components/common/LoadingMask.tsx'
+
+const Edit = () => {
+    const navigate = useNavigate()
+    const { toolId } = useParams()
+    const [loading, setLoading] = useState(false)
+    const [toolData, setToolData] = useState<ToolVo>()
+    const [files, setFiles] = useState<IFiles>({})
+    const [selectedFileName, setSelectedFileName] = useState('')
+    const [importMapRaw, setImportMapRaw] = useState<string>('')
+    const [importMap, setImportMap] = useState<IImportMap>()
+    const [tsconfigRaw, setTsconfigRaw] = useState<string>('')
+    const [tsconfig, setTsconfig] = useState<ITsconfig>()
+    const [entryPoint, setEntryPoint] = useState('')
+    const [baseDist, setBaseDist] = useState('')
+
+    const handleOnChangeFileContent = (content: string, fileName: string, files: IFiles) => {
+        if (fileName === IMPORT_MAP_FILE_NAME) {
+            setImportMapRaw(content)
+            return
+        }
+        if (fileName === TS_CONFIG_FILE_NAME) {
+            setTsconfigRaw(content)
+            return
+        }
+
+        delete files[IMPORT_MAP_FILE_NAME]
+        delete files[TS_CONFIG_FILE_NAME]
+        setFiles(files)
+    }
+
+    const getTool = () => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+        void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
+
+        void r_tool_detail('!', toolId!, 'latest')
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        switch (response.data!.review) {
+                            case 'NONE':
+                            case 'REJECT':
+                                setToolData(response.data!)
+                                break
+                            case 'PROCESSING':
+                                void message.warning('工具审核中，请勿修改')
+                                navigate('/')
+                                break
+                            default:
+                                void message.warning('请先创建新版本后编辑工具')
+                                navigate('/')
+                        }
+                        break
+                    case DATABASE_NO_RECORD_FOUND:
+                        void message.error('未找到指定工具')
+                        navigate('/')
+                        break
+                    default:
+                        void message.error('获取工具信息失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        try {
+            setImportMap(JSON.parse(importMapRaw) as IImportMap)
+        } catch (e) {
+            /* empty */
+        }
+    }, [importMapRaw])
+
+    useEffect(() => {
+        setTimeout(() => {
+            try {
+                setTsconfig(JSON.parse(tsconfigRaw) as ITsconfig)
+            } catch (e) {
+                /* empty */
+            }
+        }, 1000)
+    }, [tsconfigRaw])
+
+    useEffect(() => {
+        if (!toolData) {
+            return
+        }
+        try {
+            setBaseDist(base64ToStr(toolData.base.dist.data!))
+            const files = base64ToFiles(toolData.source.data!)
+            setFiles(files)
+            setImportMapRaw(files[IMPORT_MAP_FILE_NAME].value)
+            setTsconfigRaw(files[TS_CONFIG_FILE_NAME].value)
+            setEntryPoint(toolData.entryPoint)
+            setTimeout(() => {
+                setSelectedFileName(toolData.entryPoint)
+            }, 100)
+        } catch (e) {
+            console.error(e)
+            void message.error('载入工具失败')
+        }
+    }, [toolData])
+
+    useEffect(() => {
+        getTool()
+    }, [])
+
+    return (
+        <FitFullscreen data-component={'tools-edit'}>
+            <FlexBox direction={'horizontal'} className={'root-content'}>
+                <LoadingMask hidden={!loading}>
+                    <Playground.CodeEditor
+                        tsconfig={tsconfig}
+                        files={{
+                            ...files,
+                            [IMPORT_MAP_FILE_NAME]: {
+                                name: IMPORT_MAP_FILE_NAME,
+                                language: 'json',
+                                value: importMapRaw
+                            },
+                            [TS_CONFIG_FILE_NAME]: {
+                                name: TS_CONFIG_FILE_NAME,
+                                language: 'json',
+                                value: tsconfigRaw
+                            }
+                        }}
+                        notRemovable={[entryPoint]}
+                        selectedFileName={selectedFileName}
+                        onAddFile={(_, files) => setFiles(files)}
+                        onRemoveFile={(_, files) => setFiles(files)}
+                        onRenameFile={(_, __, files) => setFiles(files)}
+                        onChangeFileContent={handleOnChangeFileContent}
+                        onSelectedFileChange={setSelectedFileName}
+                    />
+                    <Playground.Output
+                        files={files}
+                        selectedFileName={selectedFileName}
+                        importMap={importMap!}
+                        entryPoint={entryPoint}
+                        postExpansionCode={baseDist}
+                    />
+                </LoadingMask>
+            </FlexBox>
+        </FitFullscreen>
+    )
+}
+
+export default Edit
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index 459f750..7d1ae1e 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -11,8 +11,8 @@ import Card from '@/components/common/Card'
 
 const View = () => {
     const navigate = useNavigate()
-    const [loading, setLoading] = useState(false)
     const { username, toolId, ver } = useParams()
+    const [loading, setLoading] = useState(false)
     const [compiledCode, setCompiledCode] = useState('')
 
     const render = (toolVo: ToolVo) => {
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 23632aa..b89ff28 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -25,6 +25,7 @@ interface CommonCardProps
     onOpen?: () => void
     onEdit?: () => void
     onPublish?: () => void
+    onCancelReview?: () => void
     onDelete?: () => void
 }
 
@@ -46,6 +47,7 @@ const CommonCard = ({
     onOpen,
     onEdit,
     onPublish,
+    onCancelReview,
     onDelete,
     children,
     ...props
@@ -80,14 +82,19 @@ const CommonCard = ({
                             打开
                         </AntdButton>
                     )}
-                    {onEdit && (
+                    {onEdit && onPublish && (
                         <div className={'edit'}>
                             <AntdButton.Group size={'small'}>
                                 <AntdButton onClick={onEdit}>编辑</AntdButton>
-                                {onPublish && <AntdButton onClick={onPublish}>发布</AntdButton>}
+                                <AntdButton onClick={onPublish}>发布</AntdButton>
                             </AntdButton.Group>
                         </div>
                     )}
+                    {onCancelReview && (
+                        <AntdButton size={'small'} onClick={onCancelReview}>
+                            取消审核
+                        </AntdButton>
+                    )}
                     {onDelete && (
                         <AntdButton size={'small'} danger onClick={onDelete}>
                             删除
@@ -119,13 +126,21 @@ const ToolCard = ({ tools, onDelete, onUpgrade }: ToolCardProps) => {
     }
 
     const handleOnEditTool = () => {
-        if (selectedTool.publish === '0') {
-            return () => {}
+        if (selectedTool.publish === '0' && ['NONE', 'REJECT'].includes(selectedTool.review)) {
+            return () => {
+                navigate(`/edit/${tools[0].toolId}`)
+            }
         }
     }
 
     const handleOnPublishTool = () => {
-        if (selectedTool.publish === '0') {
+        if (selectedTool.publish === '0' && ['NONE', 'REJECT'].includes(selectedTool.review)) {
+            return () => {}
+        }
+    }
+
+    const handleOnCancelReview = () => {
+        if (selectedTool.publish === '0' && selectedTool.review === 'PROCESSING') {
             return () => {}
         }
     }
@@ -146,6 +161,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade }: ToolCardProps) => {
             onOpen={handleOnOpenTool}
             onEdit={handleOnEditTool()}
             onPublish={handleOnPublishTool()}
+            onCancelReview={handleOnCancelReview()}
             onDelete={handleOnDeleteTool}
         >
             <AntdSelect
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 7c16e4f..4e94d80 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -45,6 +45,13 @@ export const tools: RouteJsonObject[] = [
         component: lazy(() => import('@/pages/Tools/View')),
         name: '查看'
     },
+    {
+        path: 'edit/:toolId',
+        absolutePath: '/edit',
+        id: 'tools-edit',
+        component: lazy(() => import('@/pages/Tools/Edit')),
+        name: '查看'
+    },
     {
         path: '*',
         absolutePath: '*',

From 2b566aeb85bdd4608f016f6770aa6803de1321b9 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 1 Feb 2024 16:52:53 +0800
Subject: [PATCH 212/307] Finish tool edit page

---
 build/resolvers/antd.ts                 |   1 +
 package-lock.json                       |  45 +++
 package.json                            |   1 +
 src/assets/css/pages/tools/edit.scss    |  22 ++
 src/components/common/HideScrollbar.tsx |  56 ++--
 src/constants/common.constants.ts       |   3 +
 src/global.d.ts                         |  10 +
 src/pages/Tools/Edit.tsx                | 390 +++++++++++++++++++++---
 src/pages/Tools/index.tsx               |  17 +-
 src/services/tool.tsx                   |   2 +
 10 files changed, 479 insertions(+), 68 deletions(-)

diff --git a/build/resolvers/antd.ts b/build/resolvers/antd.ts
index 3d18000..f0d1b45 100644
--- a/build/resolvers/antd.ts
+++ b/build/resolvers/antd.ts
@@ -295,6 +295,7 @@ const primitiveNames = [
     'DropdownButton',
     'Drawer',
     'Empty',
+    'FloatButton',
     'Form',
     'FormItem',
     'FormItemRest',
diff --git a/package-lock.json b/package-lock.json
index 0c6b21d..4a95697 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "monaco-jsx-syntax-highlight": "^1.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-draggable": "^4.4.6",
         "react-router": "^6.21.3",
         "react-router-dom": "^6.21.3",
         "size-sensor": "^1.0.2",
@@ -2756,6 +2757,14 @@
       "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -5283,6 +5292,14 @@
       "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
       "dev": true
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -5644,6 +5661,21 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -6287,6 +6319,19 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmmirror.com/react-draggable/-/react-draggable-4.4.6.tgz",
+      "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
diff --git a/package.json b/package.json
index d9bdd2d..c96b4e2 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "monaco-jsx-syntax-highlight": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
     "react-router": "^6.21.3",
     "react-router-dom": "^6.21.3",
     "size-sensor": "^1.0.2",
diff --git a/src/assets/css/pages/tools/edit.scss b/src/assets/css/pages/tools/edit.scss
index fb79eda..2693826 100644
--- a/src/assets/css/pages/tools/edit.scss
+++ b/src/assets/css/pages/tools/edit.scss
@@ -2,5 +2,27 @@
   .root-content {
     width: 100%;
     height: 100%;
+
+    > * {
+      width: 0;
+    }
+
+    .draggable-mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .draggable-content {
+    position: fixed;
+    inset-inline-end: 32px;
+    inset-block-end: 48px;
+
+    > * {
+      position: relative;
+      inset-inline-end: 0;
+      inset-block-end: 0;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index be9dfc5..ed12cbf 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -458,26 +458,48 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
 
         useEffect(() => {
             rootRef.current?.removeEventListener('wheel', wheelListenerRef.current)
-            if (isPreventAnyScroll) {
-                const handleDefaultWheel = (event: WheelEvent) => {
-                    if (!event.altKey && !event.ctrlKey) {
-                        if (isPreventScroll) {
-                            event.preventDefault()
-                            return
-                        }
-                        if (isPreventVerticalScroll && !event.shiftKey && !event.deltaX) {
-                            event.preventDefault()
-                            return
-                        }
-                        if (isPreventHorizontalScroll && (event.shiftKey || !event.deltaY)) {
-                            event.preventDefault()
-                            return
-                        }
+            const handleDefaultWheel = (event: WheelEvent) => {
+                if (!event.altKey && !event.ctrlKey) {
+                    if (isPreventScroll) {
+                        event.preventDefault()
+                        return
+                    }
+                    if (
+                        isPreventVerticalScroll &&
+                        verticalScrollbarLength < 100 &&
+                        !event.shiftKey &&
+                        !event.deltaX
+                    ) {
+                        event.preventDefault()
+                        return
+                    }
+                    if (isPreventHorizontalScroll && (event.shiftKey || !event.deltaY)) {
+                        event.preventDefault()
+                        return
+                    }
+                    let length = verticalScrollbarLength
+                    setVerticalScrollbarLength((prevState) => {
+                        length = prevState
+                        return prevState
+                    })
+                    console.log(length)
+                    if (
+                        !isPreventHorizontalScroll &&
+                        length >= 100 &&
+                        !event.shiftKey &&
+                        !event.deltaX
+                    ) {
+                        event.preventDefault()
+                        rootRef.current?.scrollTo({
+                            left: rootRef.current?.scrollLeft + event.deltaY,
+                            behavior: 'smooth'
+                        })
+                        return
                     }
                 }
-                wheelListenerRef.current = handleDefaultWheel
-                rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
             }
+            wheelListenerRef.current = handleDefaultWheel
+            rootRef.current?.addEventListener('wheel', handleDefaultWheel, { passive: false })
         }, [
             isPreventAnyScroll,
             isPreventHorizontalScroll,
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 12cc77e..958fb05 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -75,6 +75,9 @@ export const DATABASE_DUPLICATE_KEY = 30051
 export const DATABASE_NO_RECORD_FOUND = 30052
 
 export const TOOL_ILLEGAL_VERSION = 40050
+export const TOOL_UNDER_REVIEW = 40051
+export const TOOL_HAS_UNPUBLISHED_VERSION = 40052
+export const TOOL_HAS_BEEN_PUBLISHED = 40053
 
 export const API_AVATAR_SUCCESS = 50100
 export const API_AVATAR_ERROR = 50150
diff --git a/src/global.d.ts b/src/global.d.ts
index 481d5f7..1602afc 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -560,3 +560,13 @@ interface ToolUpgradeParam {
     toolId: string
     ver: string
 }
+
+interface ToolUpdateParam {
+    id: string
+    name?: string
+    icon?: string
+    description?: string
+    keywords?: string[]
+    categories?: string[]
+    source?: string
+}
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index 63ef259..f6079f8 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -1,22 +1,32 @@
 import '@/assets/css/pages/tools/edit.scss'
-import { r_tool_detail } from '@/services/tool.tsx'
-import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
-import { useEffect, useState } from 'react'
-import Playground from '@/components/Playground'
-import FitFullscreen from '@/components/common/FitFullscreen.tsx'
-import FlexBox from '@/components/common/FlexBox.tsx'
-import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared.ts'
+import Draggable from 'react-draggable'
+import Icon from '@ant-design/icons'
+import {
+    DATABASE_NO_RECORD_FOUND,
+    DATABASE_SELECT_SUCCESS,
+    DATABASE_UPDATE_SUCCESS,
+    TOOL_HAS_BEEN_PUBLISHED,
+    TOOL_UNDER_REVIEW
+} from '@/constants/common.constants'
+import { r_tool_category_get, r_tool_detail, r_tool_update } from '@/services/tool'
+import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
 import {
     base64ToFiles,
     base64ToStr,
+    filesToBase64,
     IMPORT_MAP_FILE_NAME,
     TS_CONFIG_FILE_NAME
-} from '@/components/Playground/files.ts'
-import LoadingMask from '@/components/common/LoadingMask.tsx'
+} from '@/components/Playground/files'
+import Playground from '@/components/Playground'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import FlexBox from '@/components/common/FlexBox'
+import LoadingMask from '@/components/common/LoadingMask'
 
 const Edit = () => {
     const navigate = useNavigate()
     const { toolId } = useParams()
+    const [form] = AntdForm.useForm<ToolUpdateParam>()
+    const formValues = AntdForm.useWatch([], form)
     const [loading, setLoading] = useState(false)
     const [toolData, setToolData] = useState<ToolVo>()
     const [files, setFiles] = useState<IFiles>({})
@@ -27,8 +37,17 @@ const Edit = () => {
     const [tsconfig, setTsconfig] = useState<ITsconfig>()
     const [entryPoint, setEntryPoint] = useState('')
     const [baseDist, setBaseDist] = useState('')
+    const [showDraggableMask, setShowDraggableMask] = useState(false)
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+    const [submittable, setSubmittable] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [hasEdited, setHasEdited] = useState(false)
+    const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>()
+    const [loadingCategory, setLoadingCategory] = useState(false)
 
     const handleOnChangeFileContent = (content: string, fileName: string, files: IFiles) => {
+        setHasEdited(true)
+
         if (fileName === IMPORT_MAP_FILE_NAME) {
             setImportMapRaw(content)
             return
@@ -38,11 +57,144 @@ const Edit = () => {
             return
         }
 
-        delete files[IMPORT_MAP_FILE_NAME]
-        delete files[TS_CONFIG_FILE_NAME]
         setFiles(files)
     }
 
+    const handleOnSetting = () => {
+        setIsDrawerOpen(true)
+        form.setFieldValue('icon', toolData?.icon)
+        form.setFieldValue('name', toolData?.name)
+        form.setFieldValue('description', toolData?.description)
+        form.setFieldValue('keywords', toolData?.keywords)
+        form.setFieldValue(
+            'categories',
+            toolData?.categories.map((value) => value.id)
+        )
+        if (!categoryData || !categoryData.length) {
+            getCategory()
+        }
+        void form.validateFields()
+    }
+
+    const handleOnSave = () => {
+        if (isSubmitting) {
+            return
+        }
+        setIsSubmitting(true)
+        void message.loading({ content: '保存中', key: 'SAVING', duration: 0 })
+
+        void r_tool_update({
+            id: toolData!.id,
+            source: filesToBase64(files)
+        })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_UPDATE_SUCCESS:
+                        void message.success('保存成功')
+                        getTool()
+                        break
+                    case TOOL_UNDER_REVIEW:
+                        void message.error('保存失败：工具审核中')
+                        navigate('/')
+                        break
+                    case TOOL_HAS_BEEN_PUBLISHED:
+                        void message.error('保存失败：工具已发布')
+                        navigate('/')
+                        break
+                    default:
+                        void message.error('保存失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsSubmitting(false)
+                message.destroy('SAVING')
+            })
+    }
+
+    const handleOnDrawerClose = () => {
+        setIsDrawerOpen(false)
+    }
+
+    const handleOnIconBeforeUpload = (
+        file: Parameters<_GetProp<_UploadProps, 'beforeUpload'>>[0]
+    ) => {
+        if (file.type !== 'image/svg+xml') {
+            void message.error('仅支持 svg 文件')
+            return false
+        }
+        if (file.size / 1024 / 1024 > 2) {
+            void message.error('文件大小不能大于2MiB')
+        }
+
+        const reader = new FileReader()
+        reader.addEventListener('load', () => {
+            // eslint-disable-next-line @typescript-eslint/no-base-to-string
+            form.setFieldValue('icon', reader.result!.toString().split(',')[1])
+            void form.validateFields(['icon'])
+        })
+        reader.readAsDataURL(file)
+
+        return false
+    }
+
+    const handleOnSubmit = () => {
+        if (isSubmitting) {
+            return
+        }
+        setIsSubmitting(true)
+
+        void r_tool_update({
+            ...formValues,
+            id: toolData!.id
+        })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_UPDATE_SUCCESS:
+                        setIsDrawerOpen(false)
+                        void message.success('保存成功')
+                        getTool()
+                        break
+                    case TOOL_UNDER_REVIEW:
+                        void message.error('保存失败：工具审核中')
+                        navigate('/')
+                        break
+                    case TOOL_HAS_BEEN_PUBLISHED:
+                        void message.error('保存失败：工具已发布')
+                        navigate('/')
+                        break
+                    default:
+                        void message.error('保存失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsSubmitting(false)
+            })
+    }
+
+    const getCategory = () => {
+        if (loadingCategory) {
+            return
+        }
+        setLoadingCategory(true)
+
+        void r_tool_category_get()
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setCategoryData(response.data!)
+                        break
+                    default:
+                        void message.error('获取类别列表失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoadingCategory(false)
+            })
+    }
+
     const getTool = () => {
         if (loading) {
             return
@@ -59,6 +211,7 @@ const Edit = () => {
                             case 'NONE':
                             case 'REJECT':
                                 setToolData(response.data!)
+                                setHasEdited(false)
                                 break
                             case 'PROCESSING':
                                 void message.warning('工具审核中，请勿修改')
@@ -114,54 +267,195 @@ const Edit = () => {
             setEntryPoint(toolData.entryPoint)
             setTimeout(() => {
                 setSelectedFileName(toolData.entryPoint)
-            }, 100)
+            }, 500)
         } catch (e) {
             console.error(e)
             void message.error('载入工具失败')
         }
     }, [toolData])
 
+    useEffect(() => {
+        form.validateFields({ validateOnly: true }).then(
+            () => {
+                setSubmittable(true)
+            },
+            () => {
+                setSubmittable(false)
+            }
+        )
+    }, [formValues])
+
     useEffect(() => {
         getTool()
     }, [])
 
-    return (
-        <FitFullscreen data-component={'tools-edit'}>
-            <FlexBox direction={'horizontal'} className={'root-content'}>
-                <LoadingMask hidden={!loading}>
-                    <Playground.CodeEditor
-                        tsconfig={tsconfig}
-                        files={{
-                            ...files,
-                            [IMPORT_MAP_FILE_NAME]: {
-                                name: IMPORT_MAP_FILE_NAME,
-                                language: 'json',
-                                value: importMapRaw
-                            },
-                            [TS_CONFIG_FILE_NAME]: {
-                                name: TS_CONFIG_FILE_NAME,
-                                language: 'json',
-                                value: tsconfigRaw
+    const drawerToolbar = (
+        <AntdSpace>
+            <AntdTooltip title={'刷新类别列表'}>
+                <AntdButton onClick={getCategory} disabled={isSubmitting}>
+                    <Icon component={IconOxygenRefresh} />
+                </AntdButton>
+            </AntdTooltip>
+            <AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
+                取消
+            </AntdButton>
+            <AntdButton
+                type={'primary'}
+                disabled={!submittable}
+                loading={isSubmitting}
+                onClick={handleOnSubmit}
+            >
+                提交
+            </AntdButton>
+        </AntdSpace>
+    )
+
+    const editForm = (
+        <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
+            <AntdForm.Item
+                label={'图标'}
+                name={'icon'}
+                rules={[
+                    ({ getFieldValue }) => ({
+                        validator() {
+                            if (!getFieldValue('icon')) {
+                                return Promise.reject(new Error('请选择图标'))
                             }
-                        }}
-                        notRemovable={[entryPoint]}
-                        selectedFileName={selectedFileName}
-                        onAddFile={(_, files) => setFiles(files)}
-                        onRemoveFile={(_, files) => setFiles(files)}
-                        onRenameFile={(_, __, files) => setFiles(files)}
-                        onChangeFileContent={handleOnChangeFileContent}
-                        onSelectedFileChange={setSelectedFileName}
-                    />
-                    <Playground.Output
-                        files={files}
-                        selectedFileName={selectedFileName}
-                        importMap={importMap!}
-                        entryPoint={entryPoint}
-                        postExpansionCode={baseDist}
-                    />
-                </LoadingMask>
-            </FlexBox>
-        </FitFullscreen>
+                            return Promise.resolve()
+                        }
+                    })
+                ]}
+                getValueFromEvent={() => {}}
+            >
+                <AntdUpload
+                    listType={'picture-card'}
+                    showUploadList={false}
+                    beforeUpload={handleOnIconBeforeUpload}
+                    accept={'image/svg+xml'}
+                >
+                    {formValues?.icon ? (
+                        <img
+                            src={`data:image/svg+xml;base64,${formValues.icon}`}
+                            alt={'icon'}
+                            style={{ width: '100%' }}
+                        />
+                    ) : (
+                        <Icon component={IconOxygenPlus} />
+                    )}
+                </AntdUpload>
+            </AntdForm.Item>
+            <AntdForm.Item name={'icon'} hidden>
+                <AntdInput />
+            </AntdForm.Item>
+            <AntdForm.Item label={'名称'} name={'name'} rules={[{ required: true }]}>
+                <AntdInput maxLength={20} showCount placeholder={'请输入名称'} />
+            </AntdForm.Item>
+            <AntdForm.Item label={'简介'} name={'description'}>
+                <AntdInput.TextArea
+                    autoSize={{ minRows: 6, maxRows: 6 }}
+                    maxLength={200}
+                    showCount
+                    placeholder={'请输入简介'}
+                />
+            </AntdForm.Item>
+            <AntdForm.Item
+                label={'关键字'}
+                tooltip={'工具搜索（每个不超过10个字符）'}
+                name={'keywords'}
+                rules={[{ required: true, message: '请输入关键字' }]}
+            >
+                <AntdSelect placeholder={'请输入关键字'} mode={'tags'} maxCount={20} />
+            </AntdForm.Item>
+            <AntdForm.Item
+                label={'类别'}
+                tooltip={'工具分类'}
+                name={'categories'}
+                rules={[{ required: true }]}
+            >
+                <AntdSelect
+                    placeholder={'请选择类别'}
+                    mode={'multiple'}
+                    options={categoryData?.map((value) => ({
+                        value: value.id,
+                        label: value.name
+                    }))}
+                    loading={loadingCategory}
+                    disabled={loadingCategory}
+                />
+            </AntdForm.Item>
+        </AntdForm>
+    )
+
+    return (
+        <>
+            <FitFullscreen data-component={'tools-edit'}>
+                <FlexBox direction={'horizontal'} className={'root-content'}>
+                    <LoadingMask hidden={!loading}>
+                        <Playground.CodeEditor
+                            tsconfig={tsconfig}
+                            files={{
+                                ...files,
+                                [IMPORT_MAP_FILE_NAME]: {
+                                    name: IMPORT_MAP_FILE_NAME,
+                                    language: 'json',
+                                    value: importMapRaw
+                                },
+                                [TS_CONFIG_FILE_NAME]: {
+                                    name: TS_CONFIG_FILE_NAME,
+                                    language: 'json',
+                                    value: tsconfigRaw
+                                }
+                            }}
+                            notRemovable={[entryPoint]}
+                            selectedFileName={selectedFileName}
+                            onAddFile={(_, files) => setFiles(files)}
+                            onRemoveFile={(_, files) => setFiles(files)}
+                            onRenameFile={(_, __, files) => setFiles(files)}
+                            onChangeFileContent={handleOnChangeFileContent}
+                            onSelectedFileChange={setSelectedFileName}
+                        />
+                        <Playground.Output
+                            files={files}
+                            selectedFileName={selectedFileName}
+                            importMap={importMap!}
+                            entryPoint={entryPoint}
+                            postExpansionCode={baseDist}
+                        />
+                    </LoadingMask>
+                    {showDraggableMask && <div className={'draggable-mask'} />}
+                </FlexBox>
+                <Draggable
+                    onStart={() => setShowDraggableMask(true)}
+                    onStop={() => setShowDraggableMask(false)}
+                    bounds={'#root'}
+                >
+                    <div className={'draggable-content'}>
+                        {hasEdited ? (
+                            <AntdFloatButton
+                                type={'primary'}
+                                icon={<Icon component={IconOxygenSave} />}
+                                onClick={handleOnSave}
+                            />
+                        ) : (
+                            <AntdFloatButton
+                                icon={<Icon component={IconOxygenSetting} />}
+                                onClick={handleOnSetting}
+                            />
+                        )}
+                    </div>
+                </Draggable>
+            </FitFullscreen>
+            <AntdDrawer
+                title={'配置工具'}
+                onClose={handleOnDrawerClose}
+                open={isDrawerOpen}
+                closable={!isSubmitting}
+                maskClosable={true}
+                extra={drawerToolbar}
+            >
+                {editForm}
+            </AntdDrawer>
+        </>
     )
 }
 
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index b89ff28..331cf38 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -6,7 +6,9 @@ import {
     DATABASE_DELETE_SUCCESS,
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS,
-    TOOL_ILLEGAL_VERSION
+    TOOL_HAS_UNPUBLISHED_VERSION,
+    TOOL_ILLEGAL_VERSION,
+    TOOL_UNDER_REVIEW
 } from '@/constants/common.constants'
 import { getLoginStatus } from '@/util/auth'
 import { r_tool_delete, r_tool_get, r_tool_upgrade } from '@/services/tool'
@@ -266,14 +268,23 @@ const Tools = () => {
                                 switch (response.code) {
                                     case DATABASE_UPDATE_SUCCESS:
                                         void message.success('创建新版本成功')
-                                        const toolVo = response.data!
-                                        navigate(`/view/!/${toolVo.toolId}/${toolVo.ver}`)
+                                        navigate(
+                                            `/view/!/${response.data!.toolId}/${response.data!.ver}`
+                                        )
                                         resolve()
                                         break
                                     case TOOL_ILLEGAL_VERSION:
                                         void message.error('版本有误，请重新输入')
                                         reject()
                                         break
+                                    case TOOL_UNDER_REVIEW:
+                                        void message.error('更新失败：工具审核中')
+                                        resolve()
+                                        break
+                                    case TOOL_HAS_UNPUBLISHED_VERSION:
+                                        void message.error('更新失败：存在未发布版本')
+                                        resolve()
+                                        break
                                     default:
                                         void message.error('更新失败，请稍后重试')
                                         reject()
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
index 7339843..9f7da61 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.tsx
@@ -22,4 +22,6 @@ export const r_tool_get = () => request.get<ToolVo[]>(URL_TOOL)
 export const r_tool_detail = (username: string, toolId: string, ver: string) =>
     request.get<ToolVo>(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`)
 
+export const r_tool_update = (param: ToolUpdateParam) => request.put<ToolVo>(URL_TOOL, param)
+
 export const r_tool_delete = (id: string) => request.delete(`${URL_TOOL}/${id}`)

From a7df95a613566f57239595c3e3f81cc7a60d30d8 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 1 Feb 2024 17:52:44 +0800
Subject: [PATCH 213/307] Optimize renderer security

---
 .../Playground/Output/Preview/Render.tsx      | 39 +++++--------------
 .../Playground/Output/Preview/iframe.html     |  9 -----
 .../Playground/Output/Preview/index.tsx       |  7 +---
 3 files changed, 12 insertions(+), 43 deletions(-)

diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx
index 62464d2..8f803cb 100644
--- a/src/components/Playground/Output/Preview/Render.tsx
+++ b/src/components/Playground/Output/Preview/Render.tsx
@@ -4,7 +4,6 @@ import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
 interface RenderProps {
     iframeKey: string
     compiledCode: string
-    onError?: (errorMsg: string) => void
 }
 
 interface IMessage {
@@ -30,38 +29,19 @@ const getIframeUrl = (iframeRaw: string) => {
 
 const iframeUrl = getIframeUrl(iframeRaw)
 
-const Render = ({ iframeKey, compiledCode, onError }: RenderProps) => {
+const Render = ({ iframeKey, compiledCode }: RenderProps) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
     const [loaded, setLoaded] = useState(false)
 
-    const handleMessage = ({ data }: { data: IMessage }) => {
-        const { type, msg } = data
-        switch (type) {
-            case 'LOADED':
-                setLoaded(true)
-                break
-            case 'ERROR':
-                onError?.(msg)
-                break
-            case 'DONE':
-                onError?.('')
-        }
-    }
-
-    useEffect(() => {
-        window.addEventListener('message', handleMessage)
-
-        return () => {
-            window.removeEventListener('message', handleMessage)
-        }
-    }, [])
-
     useEffect(() => {
         if (loaded) {
-            iframeRef.current?.contentWindow?.postMessage({
-                type: 'UPDATE',
-                data: { compiledCode }
-            } as IMessage)
+            iframeRef.current?.contentWindow?.postMessage(
+                {
+                    type: 'UPDATE',
+                    data: { compiledCode }
+                } as IMessage,
+                '*'
+            )
         }
     }, [compiledCode, loaded])
 
@@ -71,7 +51,8 @@ const Render = ({ iframeKey, compiledCode, onError }: RenderProps) => {
             key={iframeKey}
             ref={iframeRef}
             src={iframeUrl}
-            sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals allow-same-origin"
+            onLoad={() => setLoaded(true)}
+            sandbox="allow-downloads allow-forms allow-modals allow-scripts"
         />
     )
 }
diff --git a/src/components/Playground/Output/Preview/iframe.html b/src/components/Playground/Output/Preview/iframe.html
index b485bf9..23aea0b 100644
--- a/src/components/Playground/Output/Preview/iframe.html
+++ b/src/components/Playground/Output/Preview/iframe.html
@@ -8,14 +8,6 @@
 </head>
 <body>
 <script>
-  window.addEventListener("error", (e) => {
-    window.parent.postMessage({ type: "ERROR", msg: e.message });
-  });
-
-  window.addEventListener("load", () => {
-    window.parent.postMessage({ type: "LOADED", msg: "" });
-  });
-
   window.addEventListener("message", ({ data }) => {
     if (data?.type === "UPDATE") {
       // Record old styles that need to be removed
@@ -43,7 +35,6 @@
       };
       document.body.appendChild(script);
       URL.revokeObjectURL(oldSrc);
-      window.parent.postMessage({ type: "DONE", msg: "" });
     }
   });
 </script>
diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx
index d960c35..686a760 100644
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -23,10 +23,6 @@ const Preview = ({
     const [errorMsg, setErrorMsg] = useState('')
     const [compiledCode, setCompiledCode] = useState('')
 
-    const handleOnError = (errorMsg: string) => {
-        setErrorMsg(errorMsg)
-    }
-
     useEffect(() => {
         if (!Object.keys(files).length || !importMap || !entryPoint.length) {
             return
@@ -36,6 +32,7 @@ const Preview = ({
                 setCompiledCode(
                     `${preExpansionCode}\n${result.outputFiles[0].text}\n${postExpansionCode}`
                 )
+                setErrorMsg('')
             })
             .catch((e: Error) => {
                 setErrorMsg(`编译失败：${e.message}`)
@@ -44,7 +41,7 @@ const Preview = ({
 
     return (
         <div data-component={'playground-preview'}>
-            <Render iframeKey={iframeKey} compiledCode={compiledCode} onError={handleOnError} />
+            <Render iframeKey={iframeKey} compiledCode={compiledCode} />
             {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
         </div>
     )

From 8e5031e8a335875ce313dd9a5a8de73db28679d6 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 1 Feb 2024 18:18:45 +0800
Subject: [PATCH 214/307] Fix route error in production mode

---
 src/util/route.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/util/route.tsx b/src/util/route.tsx
index caf8372..b2227a5 100644
--- a/src/util/route.tsx
+++ b/src/util/route.tsx
@@ -31,11 +31,13 @@ export const getAuthRoute = (
             }
             return value
         })
-    temp.push({
-        path: '',
-        absolutePath: '',
-        element: <Navigate to={temp[0].absolutePath} replace />
-    })
+    if (temp[0]) {
+        temp.push({
+            path: '',
+            absolutePath: '',
+            element: <Navigate to={temp[0].absolutePath} replace />
+        })
+    }
     return temp
 }
 

From 06213d3414d28f8d30a4472e05da0aa8358c9a2f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 1 Feb 2024 19:07:46 +0800
Subject: [PATCH 215/307] Add tool submit and cancel management

---
 src/constants/common.constants.ts |   9 ++-
 src/pages/Tools/All.tsx           |   5 --
 src/pages/Tools/Store.tsx         |   5 ++
 src/pages/Tools/index.tsx         | 106 ++++++++++++++++++++++++++++--
 src/router/tools.tsx              |   2 +-
 src/services/tool.tsx             |   4 ++
 6 files changed, 117 insertions(+), 14 deletions(-)
 delete mode 100644 src/pages/Tools/All.tsx
 create mode 100644 src/pages/Tools/Store.tsx

diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 958fb05..aada843 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -74,10 +74,15 @@ export const DATABASE_EXECUTE_ERROR = 30050
 export const DATABASE_DUPLICATE_KEY = 30051
 export const DATABASE_NO_RECORD_FOUND = 30052
 
+export const TOOL_SUBMIT_SUCCESS = 40010
+export const TOOL_CANCEL_SUCCESS = 40011
 export const TOOL_ILLEGAL_VERSION = 40050
 export const TOOL_UNDER_REVIEW = 40051
-export const TOOL_HAS_UNPUBLISHED_VERSION = 40052
-export const TOOL_HAS_BEEN_PUBLISHED = 40053
+export const TOOL_NOT_UNDER_REVIEW = 40052
+export const TOOL_HAS_UNPUBLISHED_VERSION = 40053
+export const TOOL_HAS_BEEN_PUBLISHED = 40054
+export const TOOL_SUBMIT_ERROR = 40060
+export const TOOL_CANCEL_ERROR = 40061
 
 export const API_AVATAR_SUCCESS = 50100
 export const API_AVATAR_ERROR = 50150
diff --git a/src/pages/Tools/All.tsx b/src/pages/Tools/All.tsx
deleted file mode 100644
index b5af6ff..0000000
--- a/src/pages/Tools/All.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const All = () => {
-    return <></>
-}
-
-export default All
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
new file mode 100644
index 0000000..34bdf42
--- /dev/null
+++ b/src/pages/Tools/Store.tsx
@@ -0,0 +1,5 @@
+const Store = () => {
+    return <></>
+}
+
+export default Store
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 331cf38..f392793 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -6,12 +6,22 @@ import {
     DATABASE_DELETE_SUCCESS,
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS,
+    TOOL_CANCEL_SUCCESS,
+    TOOL_HAS_BEEN_PUBLISHED,
     TOOL_HAS_UNPUBLISHED_VERSION,
     TOOL_ILLEGAL_VERSION,
+    TOOL_NOT_UNDER_REVIEW,
+    TOOL_SUBMIT_SUCCESS,
     TOOL_UNDER_REVIEW
 } from '@/constants/common.constants'
 import { getLoginStatus } from '@/util/auth'
-import { r_tool_delete, r_tool_get, r_tool_upgrade } from '@/services/tool'
+import {
+    r_tool_cancel,
+    r_tool_delete,
+    r_tool_get,
+    r_tool_submit,
+    r_tool_upgrade
+} from '@/services/tool'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
@@ -113,9 +123,11 @@ interface ToolCardProps {
     tools: ToolVo[]
     onDelete?: (tool: ToolVo) => void
     onUpgrade?: (tool: ToolVo) => void
+    onSubmit?: (tool: ToolVo) => void
+    onCancel?: (tool: ToolVo) => void
 }
 
-const ToolCard = ({ tools, onDelete, onUpgrade }: ToolCardProps) => {
+const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardProps) => {
     const navigate = useNavigate()
     const [selectedTool, setSelectedTool] = useState(tools[0])
 
@@ -137,13 +149,17 @@ const ToolCard = ({ tools, onDelete, onUpgrade }: ToolCardProps) => {
 
     const handleOnPublishTool = () => {
         if (selectedTool.publish === '0' && ['NONE', 'REJECT'].includes(selectedTool.review)) {
-            return () => {}
+            return () => {
+                onSubmit?.(selectedTool)
+            }
         }
     }
 
     const handleOnCancelReview = () => {
         if (selectedTool.publish === '0' && selectedTool.review === 'PROCESSING') {
-            return () => {}
+            return () => {
+                onCancel?.(selectedTool)
+            }
         }
     }
 
@@ -199,7 +215,7 @@ const Tools = () => {
     const handleOnDeleteTool = (tool: ToolVo) => {
         modal
             .confirm({
-                title: '确定删除',
+                title: '删除',
                 content: `确定删除工具 ${tool.name}:${tool.ver} 吗？`
             })
             .then(
@@ -228,7 +244,7 @@ const Tools = () => {
 
     const handleOnUpgradeTool = (tool: ToolVo) => {
         void modal.confirm({
-            title: '更新应用',
+            title: '更新工具',
             content: (
                 <>
                     <AntdForm form={upgradeForm}>
@@ -301,6 +317,82 @@ const Tools = () => {
         })
     }
 
+    const handleOnSubmitTool = (tool: ToolVo) => {
+        modal
+            .confirm({
+                title: '提交审核',
+                content: `确定提交审核工具 ${tool.name}:${tool.ver} 吗？`
+            })
+            .then(
+                (confirmed) => {
+                    if (confirmed) {
+                        setLoading(true)
+
+                        void r_tool_submit(tool.id)
+                            .then((res) => {
+                                const response = res.data
+                                switch (response.code) {
+                                    case TOOL_SUBMIT_SUCCESS:
+                                        void message.success('提交审核成功')
+                                        getTool()
+                                        break
+                                    case TOOL_UNDER_REVIEW:
+                                        void message.warning('工具审核中，请勿重复提交')
+                                        break
+                                    case TOOL_HAS_BEEN_PUBLISHED:
+                                        void message.warning('工具已发布，请创建新版本')
+                                        break
+                                    default:
+                                        void message.error('提交审核失败，请稍后重试')
+                                }
+                            })
+                            .finally(() => {
+                                setLoading(false)
+                            })
+                    }
+                },
+                () => {}
+            )
+    }
+
+    const handleOnCancelTool = (tool: ToolVo) => {
+        modal
+            .confirm({
+                title: '取消审核',
+                content: `确定取消审核工具 ${tool.name}:${tool.ver} 吗？`
+            })
+            .then(
+                (confirmed) => {
+                    if (confirmed) {
+                        setLoading(true)
+
+                        void r_tool_cancel(tool.id)
+                            .then((res) => {
+                                const response = res.data
+                                switch (response.code) {
+                                    case TOOL_CANCEL_SUCCESS:
+                                        void message.success('取消审核成功')
+                                        getTool()
+                                        break
+                                    case TOOL_NOT_UNDER_REVIEW:
+                                        void message.warning('工具非审核状态')
+                                        break
+                                    case TOOL_HAS_BEEN_PUBLISHED:
+                                        void message.warning('工具已发布，请创建新版本')
+                                        break
+                                    default:
+                                        void message.error('取消审核失败，请稍后重试')
+                                }
+                            })
+                            .finally(() => {
+                                setLoading(false)
+                            })
+                    }
+                },
+                () => {}
+            )
+    }
+
     const getTool = () => {
         if (loading) {
             return
@@ -356,6 +448,8 @@ const Tools = () => {
                                     tools={value}
                                     onDelete={handleOnDeleteTool}
                                     onUpgrade={handleOnUpgradeTool}
+                                    onSubmit={handleOnSubmitTool}
+                                    onCancel={handleOnCancelTool}
                                 />
                             ))}
                     </FlexBox>
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 4e94d80..2bc88ac 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -13,7 +13,7 @@ export const tools: RouteJsonObject[] = [
         path: 'store',
         absolutePath: '/store',
         id: 'tools-store',
-        component: lazy(() => import('@/pages/Tools')),
+        component: lazy(() => import('@/pages/Tools/Store')),
         name: '工具商店',
         titlePostfix: ' - 商店',
         icon: lazy(() => import('~icons/oxygen/store')),
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
index 9f7da61..e36ece2 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.tsx
@@ -24,4 +24,8 @@ export const r_tool_detail = (username: string, toolId: string, ver: string) =>
 
 export const r_tool_update = (param: ToolUpdateParam) => request.put<ToolVo>(URL_TOOL, param)
 
+export const r_tool_submit = (id: string) => request.post(`${URL_TOOL}/${id}`)
+
+export const r_tool_cancel = (id: string) => request.put(`${URL_TOOL}/${id}`)
+
 export const r_tool_delete = (id: string) => request.delete(`${URL_TOOL}/${id}`)

From 838c37595d27a0dfb90aea0560b17bda4946defb Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 2 Feb 2024 17:42:40 +0800
Subject: [PATCH 216/307] Add code and execute page to tool management

---
 src/assets/css/pages/system/index.scss        |   1 +
 src/assets/css/pages/system/tools/code.scss   |  20 +
 .../css/pages/system/tools/execute.scss       |   8 +
 src/assets/css/pages/tools/index.scss         |   2 +-
 src/assets/svg/execute.svg                    |   1 +
 src/constants/common.constants.ts             |   3 +-
 src/global.d.ts                               |  25 +-
 src/pages/System/Tools/Code.tsx               |  91 ++++
 src/pages/System/Tools/Execute.tsx            |  80 +++
 src/pages/System/Tools/index.tsx              | 487 +++++++++++++++++-
 src/pages/System/User.tsx                     |   8 +-
 src/pages/SystemFramework.tsx                 |   2 +-
 src/pages/Tools/Create.tsx                    |   2 +-
 src/pages/Tools/Edit.tsx                      |  28 +-
 src/pages/Tools/View.tsx                      |   8 +-
 src/pages/Tools/index.tsx                     |   4 +-
 src/router/system.tsx                         |  14 +
 src/services/system.tsx                       |  16 +-
 18 files changed, 770 insertions(+), 30 deletions(-)
 create mode 100644 src/assets/css/pages/system/tools/code.scss
 create mode 100644 src/assets/css/pages/system/tools/execute.scss
 create mode 100644 src/assets/svg/execute.svg
 create mode 100644 src/pages/System/Tools/Code.tsx
 create mode 100644 src/pages/System/Tools/Execute.tsx

diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss
index f0a072a..1cf03d1 100644
--- a/src/assets/css/pages/system/index.scss
+++ b/src/assets/css/pages/system/index.scss
@@ -11,6 +11,7 @@
       width: 200px;
       height: 360px;
       flex: 0 0 auto;
+      overflow: hidden !important;
       cursor: pointer;
 
       .common-card {
diff --git a/src/assets/css/pages/system/tools/code.scss b/src/assets/css/pages/system/tools/code.scss
new file mode 100644
index 0000000..69ffc34
--- /dev/null
+++ b/src/assets/css/pages/system/tools/code.scss
@@ -0,0 +1,20 @@
+[data-component=system-tools-code] {
+  padding: 30px;
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+  }
+
+  .draggable-content {
+    position: fixed;
+    inset-inline-end: 48px;
+    inset-block-end: 48px;
+
+    > * {
+      position: relative;
+      inset-inline-end: 0;
+      inset-block-end: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/css/pages/system/tools/execute.scss b/src/assets/css/pages/system/tools/execute.scss
new file mode 100644
index 0000000..c831c75
--- /dev/null
+++ b/src/assets/css/pages/system/tools/execute.scss
@@ -0,0 +1,8 @@
+[data-component=system-tools-execute] {
+  padding: 30px;
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.scss
index 8f0bcab..9ee637a 100644
--- a/src/assets/css/pages/tools/index.scss
+++ b/src/assets/css/pages/tools/index.scss
@@ -28,7 +28,7 @@
           position: absolute;
           top: 10px;
           left: 10px;
-          width: 6em;
+          width: 8em;
         }
 
         .upgrade-bt {
diff --git a/src/assets/svg/execute.svg b/src/assets/svg/execute.svg
new file mode 100644
index 0000000..9cbf71a
--- /dev/null
+++ b/src/assets/svg/execute.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M750.912 505.216L256 198.016c-27.712-17.024-64 4.288-64 36.288v614.4c0 32 36.288 53.312 64 36.288l492.8-307.2c29.888-14.976 29.888-57.6 2.112-72.576z" /></svg>
\ No newline at end of file
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index aada843..29052c6 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -80,7 +80,8 @@ export const TOOL_ILLEGAL_VERSION = 40050
 export const TOOL_UNDER_REVIEW = 40051
 export const TOOL_NOT_UNDER_REVIEW = 40052
 export const TOOL_HAS_UNPUBLISHED_VERSION = 40053
-export const TOOL_HAS_BEEN_PUBLISHED = 40054
+export const TOOL_HAS_NOT_BEEN_PUBLISHED = 40054
+export const TOOL_HAS_BEEN_PUBLISHED = 40055
 export const TOOL_SUBMIT_ERROR = 40060
 export const TOOL_CANCEL_ERROR = 40061
 
diff --git a/src/global.d.ts b/src/global.d.ts
index 1602afc..25f9d67 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -89,6 +89,23 @@ interface LoginParam {
     captchaCode: string
 }
 
+interface UserWithInfoVo {
+    id: string
+    username: string
+    verified: boolean
+    locking: boolean
+    expiration: string
+    credentialsExpiration: string
+    enable: boolean
+    currentLoginTime: string
+    currentLoginIp: string
+    lastLoginTime: string
+    lastLoginIp: string
+    createTime: string
+    updateTime: string
+    userInfo: UserInfoVo
+}
+
 interface UserWithPowerInfoVo {
     id: string
     username: string
@@ -532,7 +549,7 @@ interface ToolVo {
     icon: string
     description: string
     base: ToolBaseVo
-    author: UserInfoVo
+    author: UserWithInfoVo
     ver: string
     keywords: string[]
     categories: ToolCategoryVo[]
@@ -570,3 +587,9 @@ interface ToolUpdateParam {
     categories?: string[]
     source?: string
 }
+
+interface ToolManagementGetParam extends PageParam {
+    searchType?: string
+    searchValue?: string
+    searchRegex?: boolean
+}
diff --git a/src/pages/System/Tools/Code.tsx b/src/pages/System/Tools/Code.tsx
new file mode 100644
index 0000000..0f881b5
--- /dev/null
+++ b/src/pages/System/Tools/Code.tsx
@@ -0,0 +1,91 @@
+import { r_sys_tool_get_one } from '@/services/system.tsx'
+import '@/assets/css/pages/system/tools/code.scss'
+import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import Playground from '@/components/Playground'
+import { useState } from 'react'
+import { IFiles } from '@/components/Playground/shared.ts'
+import { base64ToFiles } from '@/components/Playground/files.ts'
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import Card from '@/components/common/Card.tsx'
+import Draggable from 'react-draggable'
+import Icon from '@ant-design/icons'
+
+const Code = () => {
+    const navigate = useNavigate()
+    const { id } = useParams()
+    const [loading, setLoading] = useState(false)
+    const [files, setFiles] = useState<IFiles>({})
+    const [selectedFileName, setSelectedFileName] = useState('')
+
+    const handleOnRunTool = () => {
+        navigate(`/system/tools/execute/${id}`)
+    }
+
+    const render = (toolVo: ToolVo) => {
+        try {
+            setFiles(base64ToFiles(toolVo.source.data!))
+            setSelectedFileName(toolVo.entryPoint)
+        } catch (e) {
+            void message.error('载入工具失败')
+        }
+    }
+
+    const getTool = () => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+        void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
+
+        void r_sys_tool_get_one(id!)
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        render(response.data!)
+                        break
+                    case DATABASE_NO_RECORD_FOUND:
+                        void message.error('未找到指定工具')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
+                        break
+                    default:
+                        void message.error('获取工具信息失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        getTool()
+    }, [])
+
+    return (
+        <FitFullscreen data-component={'system-tools-code'}>
+            <Card>
+                <Playground.CodeEditor
+                    readonly
+                    files={files}
+                    selectedFileName={selectedFileName}
+                    onSelectedFileChange={setSelectedFileName}
+                />
+            </Card>
+
+            <Draggable bounds={'#root'}>
+                <div className={'draggable-content'}>
+                    <AntdFloatButton
+                        type={'primary'}
+                        icon={<Icon component={IconOxygenExecute} />}
+                        onClick={handleOnRunTool}
+                    />
+                </div>
+            </Draggable>
+        </FitFullscreen>
+    )
+}
+
+export default Code
diff --git a/src/pages/System/Tools/Execute.tsx b/src/pages/System/Tools/Execute.tsx
new file mode 100644
index 0000000..1b13b1b
--- /dev/null
+++ b/src/pages/System/Tools/Execute.tsx
@@ -0,0 +1,80 @@
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import '@/assets/css/pages/system/tools/execute.scss'
+import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files.ts'
+import { IImportMap } from '@/components/Playground/shared.ts'
+import compiler from '@/components/Playground/compiler.ts'
+import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import { r_sys_tool_get_one } from '@/services/system.tsx'
+import Card from '@/components/common/Card.tsx'
+import Playground from '@/components/Playground'
+
+const Execute = () => {
+    const navigate = useNavigate()
+    const { id } = useParams()
+    const [loading, setLoading] = useState(false)
+    const [compiledCode, setCompiledCode] = useState('')
+
+    const render = (toolVo: ToolVo) => {
+        try {
+            const baseDist = base64ToStr(toolVo.base.dist.data!)
+            const files = base64ToFiles(toolVo.source.data!)
+            const importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap
+
+            void compiler
+                .compile(files, importMap, toolVo.entryPoint)
+                .then((result) => {
+                    const output = result.outputFiles[0].text
+                    setCompiledCode(`${output}\n${baseDist}`)
+                })
+                .catch((reason) => {
+                    void message.error(`编译失败：${reason}`)
+                })
+        } catch (e) {
+            void message.error('载入工具失败')
+        }
+    }
+
+    const getTool = () => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+        void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
+
+        void r_sys_tool_get_one(id!)
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        render(response.data!)
+                        break
+                    case DATABASE_NO_RECORD_FOUND:
+                        void message.error('未找到指定工具')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
+                        break
+                    default:
+                        void message.error('获取工具信息失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        getTool()
+    }, [])
+
+    return (
+        <FitFullscreen data-component={'system-tools-execute'}>
+            <Card>
+                <Playground.Output.Preview.Render iframeKey={`${id}`} compiledCode={compiledCode} />
+            </Card>
+        </FitFullscreen>
+    )
+}
+
+export default Execute
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 44880c7..30a1112 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -1,14 +1,485 @@
-import Playground from '@/components/Playground'
-import templates from '@/components/Playground/templates'
+import { ChangeEvent, KeyboardEvent } from 'react'
+import {
+    r_sys_tool_delete,
+    r_sys_tool_get,
+    r_sys_tool_off_shelve,
+    r_sys_tool_pass,
+    r_sys_tool_reject
+} from '@/services/system'
+import {
+    COLOR_BACKGROUND,
+    COLOR_ERROR_SECONDARY,
+    COLOR_PRODUCTION,
+    DATABASE_DELETE_SUCCESS,
+    DATABASE_SELECT_SUCCESS,
+    DATABASE_UPDATE_SUCCESS,
+    TOOL_NOT_UNDER_REVIEW
+} from '@/constants/common.constants.ts'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import Card from '@/components/common/Card.tsx'
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import Icon from '@ant-design/icons'
 
 const Tools = () => {
-    const template = templates['base']
+    const navigate = useNavigate()
+    const [modal, contextHolder] = AntdModal.useModal()
+    const [tableParams, setTableParams] = useState<TableParam>({
+        pagination: {
+            current: 1,
+            pageSize: 20,
+            position: ['bottomCenter'],
+            showTotal: (total, range) =>
+                `第 ${
+                    range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
+                } 项 共 ${total} 项`
+        }
+    })
+    const [toolData, setToolData] = useState<ToolVo[]>([])
+    const [isLoading, setIsLoading] = useState(false)
+    const [searchType, setSearchType] = useState('ALL')
+    const [searchValue, setSearchValue] = useState('')
+    const [isUseRegex, setIsUseRegex] = useState(false)
+    const [isRegexLegal, setIsRegexLegal] = useState(true)
+    const [form] = AntdForm.useForm<{ pass: boolean }>()
+
+    const dataColumns: _ColumnsType<ToolVo> = [
+        {
+            dataIndex: 'icon',
+            title: '图标',
+            render: (value) => (
+                <AntdAvatar
+                    src={
+                        <AntdImage
+                            preview={{ mask: <Icon component={IconOxygenEye}></Icon> }}
+                            src={`data:image/svg+xml;base64,${value}`}
+                            alt={'Avatar'}
+                        />
+                    }
+                    style={{ background: COLOR_BACKGROUND }}
+                />
+            ),
+            width: '0',
+            align: 'center'
+        },
+        {
+            title: '名称',
+            render: (_, record) => (
+                <AntdTooltip title={record.description}>{record.name}</AntdTooltip>
+            )
+        },
+        { dataIndex: 'toolId', title: '工具 ID' },
+        { dataIndex: 'ver', title: '版本' },
+        {
+            title: '作者',
+            render: (_, record) => `${record.author.userInfo.nickname}(${record.author.username})`
+        },
+        {
+            dataIndex: 'keywords',
+            title: '关键词',
+            render: (value: string[]) => value.map((item) => <AntdTag>{item}</AntdTag>)
+        },
+        {
+            dataIndex: 'categories',
+            title: '类别',
+            render: (value: { name: string }[]) =>
+                value.map((item) => <AntdTag>{item.name}</AntdTag>)
+        },
+        {
+            dataIndex: 'review',
+            title: '状态',
+            width: '4em',
+            render: (value) => {
+                switch (value) {
+                    case 'NONE':
+                        return <AntdTag>编码</AntdTag>
+                    case 'PROCESSING':
+                        return <AntdTag color={'purple'}>审核</AntdTag>
+                    case 'REJECT':
+                        return <AntdTag color={'yellow'}>驳回</AntdTag>
+                    case 'PASS':
+                        return <AntdTag color={'green'}>通过</AntdTag>
+                }
+            },
+            filters: [
+                { text: '编码', value: 'NONE' },
+                { text: '审核', value: 'PROCESSING' },
+                { text: '驳回', value: 'REJECT' },
+                { text: '通过', value: 'PASS' }
+            ]
+        },
+        {
+            title: '操作',
+            width: '12em',
+            align: 'center',
+            render: (_, record) => (
+                <>
+                    <AntdSpace size={'middle'}>
+                        <a
+                            style={{ color: COLOR_PRODUCTION }}
+                            onClick={handleOnViewBtnClick(record)}
+                        >
+                            查看
+                        </a>
+                        {record.review === 'PROCESSING' && (
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnReviewBtnClick(record)}
+                            >
+                                审核
+                            </a>
+                        )}
+                        {record.review === 'PASS' && (
+                            <a
+                                style={{ color: COLOR_PRODUCTION }}
+                                onClick={handleOnOffShelveBtnClick(record)}
+                            >
+                                下架
+                            </a>
+                        )}
+                        <a
+                            style={{ color: COLOR_PRODUCTION }}
+                            onClick={handleOnDeleteBtnClick(record)}
+                        >
+                            删除
+                        </a>
+                    </AntdSpace>{' '}
+                </>
+            )
+        }
+    ]
+
+    const handleOnTableChange = (
+        pagination: _TablePaginationConfig,
+        filters: Record<string, _FilterValue | null>,
+        sorter: _SorterResult<ToolVo> | _SorterResult<ToolVo>[]
+    ) => {
+        pagination = { ...tableParams.pagination, ...pagination }
+        if (Array.isArray(sorter)) {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.map((value) => value.field).join(',')
+            })
+        } else {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.field,
+                sortOrder: sorter.order
+            })
+        }
+
+        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+            setToolData([])
+        }
+    }
+
+    const handleOnViewBtnClick = (value: ToolVo) => {
+        return () => {
+            navigate(`/system/tools/code/${value.id}`)
+        }
+    }
+
+    const handleOnReviewBtnClick = (value: ToolVo) => {
+        return () => {
+            form.setFieldValue('pass', undefined)
+            void modal.confirm({
+                title: '审核',
+                content: (
+                    <AntdForm form={form}>
+                        <AntdForm.Item
+                            name={'pass'}
+                            style={{ marginTop: 10 }}
+                            rules={[{ required: true }]}
+                        >
+                            <AntdRadio.Group>
+                                <AntdRadio value={true}>通过</AntdRadio>
+                                <AntdRadio value={false}>驳回</AntdRadio>
+                            </AntdRadio.Group>
+                        </AntdForm.Item>
+                    </AntdForm>
+                ),
+                onOk: () =>
+                    form.validateFields().then(() => {
+                        return new Promise<void>((resolve) => {
+                            switch (form.getFieldValue('pass')) {
+                                case true:
+                                    void r_sys_tool_pass(value.id).then((res) => {
+                                        const response = res.data
+                                        switch (response.code) {
+                                            case DATABASE_UPDATE_SUCCESS:
+                                                void message.success('更新成功')
+                                                getTool()
+                                                resolve()
+                                                break
+                                            case TOOL_NOT_UNDER_REVIEW:
+                                                void message.warning('工具处于非审核状态')
+                                                resolve()
+                                                break
+                                            default:
+                                                void message.error('更新失败，请稍后重试')
+                                                resolve()
+                                        }
+                                    })
+                                    break
+                                default:
+                                    void r_sys_tool_reject(value.id).then((res) => {
+                                        const response = res.data
+                                        switch (response.code) {
+                                            case DATABASE_UPDATE_SUCCESS:
+                                                void message.success('更新成功')
+                                                resolve()
+                                                break
+                                            case TOOL_NOT_UNDER_REVIEW:
+                                                void message.warning('工具处于非审核状态')
+                                                resolve()
+                                                break
+                                            default:
+                                                void message.error('更新失败，请稍后重试')
+                                                resolve()
+                                        }
+                                    })
+                            }
+                        })
+                    })
+            })
+        }
+    }
+
+    const handleOnOffShelveBtnClick = (value: ToolVo) => {
+        return () => {
+            modal
+                .confirm({
+                    title: '确定下架',
+                    content: `确定下架工具 ${value.author.username}:${value.toolId}:${value.ver} 吗？`
+                })
+                .then(
+                    (confirmed) => {
+                        if (confirmed) {
+                            setIsLoading(true)
+
+                            void r_sys_tool_off_shelve(value.id)
+                                .then((res) => {
+                                    const response = res.data
+                                    if (response.code === DATABASE_UPDATE_SUCCESS) {
+                                        void message.success('下架成功')
+                                        setTimeout(() => {
+                                            getTool()
+                                        })
+                                    } else {
+                                        void message.error('下架失败，请稍后重试')
+                                    }
+                                })
+                                .finally(() => {
+                                    setIsLoading(false)
+                                })
+                        }
+                    },
+                    () => {}
+                )
+        }
+    }
+
+    const handleOnDeleteBtnClick = (value: ToolVo) => {
+        return () => {
+            modal
+                .confirm({
+                    title: '确定删除',
+                    content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.ver} 吗？`
+                })
+                .then(
+                    (confirmed) => {
+                        if (confirmed) {
+                            setIsLoading(true)
+
+                            void r_sys_tool_delete(value.id)
+                                .then((res) => {
+                                    const response = res.data
+                                    if (response.code === DATABASE_DELETE_SUCCESS) {
+                                        void message.success('删除成功')
+                                        setTimeout(() => {
+                                            getTool()
+                                        })
+                                    } else {
+                                        void message.error('删除失败，请稍后重试')
+                                    }
+                                })
+                                .finally(() => {
+                                    setIsLoading(false)
+                                })
+                        }
+                    },
+                    () => {}
+                )
+        }
+    }
+
+    const handleOnSearchValueChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setSearchValue(e.target.value)
+
+        if (isUseRegex) {
+            try {
+                RegExp(e.target.value)
+                setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]')))
+            } catch (e) {
+                setIsRegexLegal(false)
+            }
+        } else {
+            setIsRegexLegal(true)
+        }
+    }
+
+    const handleOnSearchValueKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            getTool()
+        }
+    }
+
+    const handleOnSearchTypeChange = (value: string) => {
+        setSearchType(value)
+    }
+
+    const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
+        setIsUseRegex(e.target.checked)
+        if (e.target.checked) {
+            try {
+                RegExp(searchValue)
+                setIsRegexLegal(!(searchValue.includes('{}') || searchValue.includes('[]')))
+            } catch (e) {
+                setIsRegexLegal(false)
+            }
+        } else {
+            setIsRegexLegal(true)
+        }
+    }
+
+    const handleOnQueryBtnClick = () => {
+        getTool()
+    }
+
+    const getTool = () => {
+        if (isLoading) {
+            return
+        }
+
+        if (!isRegexLegal) {
+            void message.error('非法正则表达式')
+            return
+        }
+        setIsLoading(true)
+
+        void r_sys_tool_get({
+            currentPage: tableParams.pagination?.current,
+            pageSize: tableParams.pagination?.pageSize,
+            sortField:
+                tableParams.sortField && tableParams.sortOrder
+                    ? (tableParams.sortField as string)
+                    : undefined,
+            sortOrder:
+                tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
+            searchType,
+            searchValue: searchValue.trim().length ? searchValue : undefined,
+            searchRegex: isUseRegex ? isUseRegex : undefined,
+            ...tableParams.filters
+        })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setToolData(response.data!.records)
+                        setTableParams({
+                            ...tableParams,
+                            pagination: {
+                                ...tableParams.pagination,
+                                total: response.data!.total
+                            }
+                        })
+                        break
+                    default:
+                        void message.error('获取失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoading(false)
+            })
+    }
+
+    useEffect(() => {
+        getTool()
+    }, [
+        JSON.stringify(tableParams.filters),
+        JSON.stringify(tableParams.sortField),
+        JSON.stringify(tableParams.sortOrder),
+        JSON.stringify(tableParams.pagination?.pageSize),
+        JSON.stringify(tableParams.pagination?.current)
+    ])
+
+    const toolbar = (
+        <FlexBox direction={'horizontal'} gap={10}>
+            <Card style={{ overflow: 'inherit' }}>
+                <AntdInput
+                    addonBefore={
+                        <AntdSelect
+                            value={searchType}
+                            onChange={handleOnSearchTypeChange}
+                            style={{ width: '6em' }}
+                            dropdownStyle={{ textAlign: 'center' }}
+                        ></AntdSelect>
+                    }
+                    suffix={
+                        <>
+                            {!isRegexLegal && (
+                                <span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
+                            )}
+                            <AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
+                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
+                            </AntdCheckbox>
+                        </>
+                    }
+                    allowClear
+                    value={searchValue}
+                    onChange={handleOnSearchValueChange}
+                    onKeyDown={handleOnSearchValueKeyDown}
+                    status={isRegexLegal ? undefined : 'error'}
+                />
+            </Card>
+            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
+                    查询
+                </AntdButton>
+            </Card>
+        </FlexBox>
+    )
+
+    const table = (
+        <Card>
+            <AntdTable
+                dataSource={toolData}
+                columns={dataColumns}
+                pagination={tableParams.pagination}
+                loading={isLoading}
+                onChange={handleOnTableChange}
+            />
+        </Card>
+    )
+
     return (
-        <Playground
-            initFiles={template.files}
-            initTsconfigRaw={JSON.stringify(template.tsconfig, null, 2)}
-            initImportMapRaw={JSON.stringify(template.importMap, null, 2)}
-        />
+        <>
+            <FitFullscreen>
+                <HideScrollbar
+                    style={{ padding: 30 }}
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={1000}
+                >
+                    <FlexBox gap={20}>
+                        {toolbar}
+                        {table}
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullscreen>
+            {contextHolder}
+        </>
     )
 }
 
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 6836d4f..af9ee4b 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -77,7 +77,7 @@ const User = () => {
     const dataColumns: _ColumnsType<UserWithRoleInfoVo> = [
         {
             dataIndex: 'username',
-            title: '用户',
+            title: '用户名',
             render: (value, record) => <AntdTooltip title={record.id}>{value}</AntdTooltip>,
             width: '0'
         },
@@ -249,7 +249,7 @@ const User = () => {
         }
 
         if (pagination.pageSize !== tableParams.pagination?.pageSize) {
-            setGroupData([])
+            setUserData([])
         }
     }
 
@@ -584,7 +584,7 @@ const User = () => {
         }
     }
 
-    const handleOnSearchNameKeyDown = (e: KeyboardEvent) => {
+    const handleOnSearchValueKeyDown = (e: KeyboardEvent) => {
         if (e.key === 'Enter') {
             getUser()
         }
@@ -936,7 +936,7 @@ const User = () => {
                     allowClear
                     value={searchValue}
                     onChange={handleOnSearchValueChange}
-                    onKeyDown={handleOnSearchNameKeyDown}
+                    onKeyDown={handleOnSearchValueKeyDown}
                     status={isRegexLegal ? undefined : 'error'}
                 />
             </Card>
diff --git a/src/pages/SystemFramework.tsx b/src/pages/SystemFramework.tsx
index f0e616c..1200286 100644
--- a/src/pages/SystemFramework.tsx
+++ b/src/pages/SystemFramework.tsx
@@ -25,7 +25,7 @@ const SystemFramework = () => {
                                             >
                                                 {route.children?.map(
                                                     (subRoute) =>
-                                                        subRoute &&
+                                                        subRoute.menu &&
                                                         subRoute.name && (
                                                             <Sidebar.Item
                                                                 end
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index 746eaca..6270329 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -44,7 +44,7 @@ const Create = () => {
                         void message.success(
                             `创建工具 ${response.data!.name}<${response.data!.toolId}>:${response.data!.ver} 成功`
                         )
-                        navigate(`/view/!/${response.data!.toolId}/${response.data!.ver}`)
+                        navigate(`/edit/${response.data!.toolId}`)
                         break
                     case DATABASE_DUPLICATE_KEY:
                         void message.warning('已存在相同 ID 的应用')
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index f6079f8..01d63d4 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -96,11 +96,15 @@ const Edit = () => {
                         break
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
-                        navigate('/')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
-                        navigate('/')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
                         break
                     default:
                         void message.error('保存失败，请稍后重试')
@@ -158,11 +162,15 @@ const Edit = () => {
                         break
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
-                        navigate('/')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
-                        navigate('/')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
                         break
                     default:
                         void message.error('保存失败，请稍后重试')
@@ -215,16 +223,22 @@ const Edit = () => {
                                 break
                             case 'PROCESSING':
                                 void message.warning('工具审核中，请勿修改')
-                                navigate('/')
+                                setTimeout(() => {
+                                    navigate(-1)
+                                }, 3000)
                                 break
                             default:
                                 void message.warning('请先创建新版本后编辑工具')
-                                navigate('/')
+                                setTimeout(() => {
+                                    navigate(-1)
+                                }, 3000)
                         }
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
-                        navigate('/')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
                         break
                     default:
                         void message.error('获取工具信息失败，请稍后重试')
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index 7d1ae1e..7f15644 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -51,7 +51,9 @@ const View = () => {
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
-                        navigate('/')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
                         break
                     default:
                         void message.error('获取工具信息失败，请稍后重试')
@@ -65,7 +67,9 @@ const View = () => {
 
     useEffect(() => {
         if (username === '!' && !getLoginStatus()) {
-            navigate('/')
+            setTimeout(() => {
+                navigate(-1)
+            }, 3000)
             return
         }
         if (username !== '!' && ver) {
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index f392793..c00eea4 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -284,9 +284,7 @@ const Tools = () => {
                                 switch (response.code) {
                                     case DATABASE_UPDATE_SUCCESS:
                                         void message.success('创建新版本成功')
-                                        navigate(
-                                            `/view/!/${response.data!.toolId}/${response.data!.ver}`
-                                        )
+                                        navigate(`/edit/${response.data!.toolId}`)
                                         resolve()
                                         break
                                     case TOOL_ILLEGAL_VERSION:
diff --git a/src/router/system.tsx b/src/router/system.tsx
index 58158e1..b4ded5f 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -49,6 +49,20 @@ const system: RouteJsonObject[] = [
                 menu: true,
                 autoHide: true
             },
+            {
+                path: 'code/:id',
+                absolutePath: '/system/tools/code',
+                id: 'system-tools-code',
+                component: lazy(() => import('@/pages/System/Tools/Code')),
+                name: '查看工具'
+            },
+            {
+                path: 'execute/:id',
+                absolutePath: '/system/tools/execute',
+                id: 'system-tools-execute',
+                component: lazy(() => import('@/pages/System/Tools/Execute')),
+                name: '运行工具'
+            },
             {
                 path: 'template',
                 absolutePath: '/system/tools/template',
diff --git a/src/services/system.tsx b/src/services/system.tsx
index f26efad..db0cf72 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -19,7 +19,8 @@ import {
     URL_SYS_SETTINGS_SENSITIVE,
     URL_SYS_TOOL_CATEGORY,
     URL_SYS_TOOL_BASE,
-    URL_SYS_TOOL_TEMPLATE
+    URL_SYS_TOOL_TEMPLATE,
+    URL_SYS_TOOL
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -154,3 +155,16 @@ export const r_sys_tool_template_update = (param: ToolTemplateAddEditParam) =>
 
 export const r_sys_tool_template_delete = (id: string) =>
     request.delete(`${URL_SYS_TOOL_TEMPLATE}/${id}`)
+
+export const r_sys_tool_get = (param: ToolManagementGetParam) =>
+    request.get<PageVo<ToolVo>>(URL_SYS_TOOL, param)
+
+export const r_sys_tool_get_one = (id: string) => request.get<ToolVo>(`${URL_SYS_TOOL}/${id}`)
+
+export const r_sys_tool_pass = (id: string) => request.post<ToolVo>(`${URL_SYS_TOOL}/${id}`)
+
+export const r_sys_tool_reject = (id: string) => request.put<ToolVo>(`${URL_SYS_TOOL}/${id}`)
+
+export const r_sys_tool_off_shelve = (id: string) => request.patch<ToolVo>(`${URL_SYS_TOOL}/${id}`)
+
+export const r_sys_tool_delete = (id: string) => request.delete(`${URL_SYS_TOOL}/${id}`)

From 522347060cc5b35ecfa248eb8a1d426ae44a6d23 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 2 Feb 2024 18:02:35 +0800
Subject: [PATCH 217/307] Add search type to tool management page

---
 src/pages/System/Tools/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 30a1112..9e707c5 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -425,7 +425,14 @@ const Tools = () => {
                             onChange={handleOnSearchTypeChange}
                             style={{ width: '6em' }}
                             dropdownStyle={{ textAlign: 'center' }}
-                        ></AntdSelect>
+                        >
+                            <AntdSelect.Option value={'ALL'}>全部</AntdSelect.Option>
+                            <AntdSelect.Option value={'NAME'}>名称</AntdSelect.Option>
+                            <AntdSelect.Option value={'TOOL_ID'}>工具 ID</AntdSelect.Option>
+                            <AntdSelect.Option value={'NICKNAME'}>昵称</AntdSelect.Option>
+                            <AntdSelect.Option value={'USERNAME'}>用户名</AntdSelect.Option>
+                            <AntdSelect.Option value={'KEYWORD'}>关键词</AntdSelect.Option>
+                        </AntdSelect>
                     }
                     suffix={
                         <>

From 524b57ed8bcde55bb02eccec82d707f678ea47e8 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 4 Feb 2024 01:56:17 +0800
Subject: [PATCH 218/307] Add auto publish to tool management

---
 src/global.d.ts                  |   4 +
 src/pages/System/Tools/index.tsx | 142 ++++++++++++++++++++++++-------
 src/pages/Tools/index.tsx        |   2 +-
 src/services/system.tsx          |   3 +-
 4 files changed, 117 insertions(+), 34 deletions(-)

diff --git a/src/global.d.ts b/src/global.d.ts
index 25f9d67..99eb5ab 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -593,3 +593,7 @@ interface ToolManagementGetParam extends PageParam {
     searchValue?: string
     searchRegex?: boolean
 }
+
+interface ToolManagementPassParam {
+    dist: string
+}
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 9e707c5..8073d1d 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent, KeyboardEvent } from 'react'
 import {
     r_sys_tool_delete,
     r_sys_tool_get,
+    r_sys_tool_get_one,
     r_sys_tool_off_shelve,
     r_sys_tool_pass,
     r_sys_tool_reject
@@ -20,6 +21,9 @@ import Card from '@/components/common/Card.tsx'
 import FitFullscreen from '@/components/common/FitFullscreen.tsx'
 import HideScrollbar from '@/components/common/HideScrollbar.tsx'
 import Icon from '@ant-design/icons'
+import compiler from '@/components/Playground/compiler.ts'
+import { base64ToFiles, IMPORT_MAP_FILE_NAME, strToBase64 } from '@/components/Playground/files.ts'
+import { IImportMap } from '@/components/Playground/shared.ts'
 
 const Tools = () => {
     const navigate = useNavigate()
@@ -205,41 +209,115 @@ const Tools = () => {
                         return new Promise<void>((resolve) => {
                             switch (form.getFieldValue('pass')) {
                                 case true:
-                                    void r_sys_tool_pass(value.id).then((res) => {
-                                        const response = res.data
-                                        switch (response.code) {
-                                            case DATABASE_UPDATE_SUCCESS:
-                                                void message.success('更新成功')
-                                                getTool()
-                                                resolve()
-                                                break
-                                            case TOOL_NOT_UNDER_REVIEW:
-                                                void message.warning('工具处于非审核状态')
-                                                resolve()
-                                                break
-                                            default:
-                                                void message.error('更新失败，请稍后重试')
-                                                resolve()
-                                        }
+                                    void message.loading({
+                                        content: '加载工具中……',
+                                        key: 'LOADING_TOOL',
+                                        duration: 0
                                     })
+                                    void r_sys_tool_get_one(value.id)
+                                        .then((res) => {
+                                            message.destroy('LOADING_TOOL')
+                                            const response = res.data
+                                            switch (response.code) {
+                                                case DATABASE_SELECT_SUCCESS:
+                                                    void message.loading({
+                                                        content: '编译中……',
+                                                        key: 'COMPILING',
+                                                        duration: 0
+                                                    })
+                                                    try {
+                                                        const toolVo = response.data!
+                                                        const files = base64ToFiles(
+                                                            toolVo.source.data!
+                                                        )
+                                                        const importMap = JSON.parse(
+                                                            files[IMPORT_MAP_FILE_NAME].value
+                                                        ) as IImportMap
+                                                        void compiler
+                                                            .compile(
+                                                                files,
+                                                                importMap,
+                                                                toolVo.entryPoint
+                                                            )
+                                                            .then((result) => {
+                                                                message.destroy('COMPILING')
+                                                                void message.loading({
+                                                                    content: '发布中……',
+                                                                    key: 'UPLOADING',
+                                                                    duration: 0
+                                                                })
+                                                                void r_sys_tool_pass(value.id, {
+                                                                    dist: strToBase64(
+                                                                        result.outputFiles[0].text
+                                                                    )
+                                                                })
+                                                                    .then((res) => {
+                                                                        message.destroy('UPLOADING')
+                                                                        const response = res.data
+                                                                        switch (response.code) {
+                                                                            case DATABASE_UPDATE_SUCCESS:
+                                                                                void message.success(
+                                                                                    '发布成功'
+                                                                                )
+                                                                                getTool()
+                                                                                break
+                                                                            case TOOL_NOT_UNDER_REVIEW:
+                                                                                void message.warning(
+                                                                                    '工具处于非审核状态'
+                                                                                )
+                                                                                break
+                                                                            default:
+                                                                                void message.error(
+                                                                                    '发布失败，请稍后重试'
+                                                                                )
+                                                                        }
+                                                                    })
+                                                                    .catch(() => {
+                                                                        message.destroy('UPLOADING')
+                                                                    })
+                                                                    .finally(() => {
+                                                                        resolve()
+                                                                    })
+                                                            })
+                                                    } catch (e) {
+                                                        resolve()
+                                                        message.destroy('COMPILING')
+                                                        void message.error(
+                                                            '编译失败，请检查代码后重试'
+                                                        )
+                                                    }
+                                                    break
+                                                default:
+                                                    resolve()
+                                                    void message.error('加载工具失败，稍后重试')
+                                            }
+                                        })
+                                        .catch(() => {
+                                            message.destroy('LOADING_TOOL')
+                                            resolve()
+                                        })
                                     break
                                 default:
-                                    void r_sys_tool_reject(value.id).then((res) => {
-                                        const response = res.data
-                                        switch (response.code) {
-                                            case DATABASE_UPDATE_SUCCESS:
-                                                void message.success('更新成功')
-                                                resolve()
-                                                break
-                                            case TOOL_NOT_UNDER_REVIEW:
-                                                void message.warning('工具处于非审核状态')
-                                                resolve()
-                                                break
-                                            default:
-                                                void message.error('更新失败，请稍后重试')
-                                                resolve()
-                                        }
-                                    })
+                                    void r_sys_tool_reject(value.id)
+                                        .then((res) => {
+                                            const response = res.data
+                                            switch (response.code) {
+                                                case DATABASE_UPDATE_SUCCESS:
+                                                    void message.success('更新成功')
+                                                    resolve()
+                                                    break
+                                                case TOOL_NOT_UNDER_REVIEW:
+                                                    void message.warning('工具处于非审核状态')
+                                                    resolve()
+                                                    break
+                                                default:
+                                                    void message.error('更新失败，请稍后重试')
+                                                    resolve()
+                                            }
+                                        })
+                                        .finally(() => {
+                                            getTool()
+                                        })
                             }
                         })
                     })
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index c00eea4..44725b5 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -370,7 +370,6 @@ const Tools = () => {
                                 switch (response.code) {
                                     case TOOL_CANCEL_SUCCESS:
                                         void message.success('取消审核成功')
-                                        getTool()
                                         break
                                     case TOOL_NOT_UNDER_REVIEW:
                                         void message.warning('工具非审核状态')
@@ -384,6 +383,7 @@ const Tools = () => {
                             })
                             .finally(() => {
                                 setLoading(false)
+                                getTool()
                             })
                     }
                 },
diff --git a/src/services/system.tsx b/src/services/system.tsx
index db0cf72..616fa42 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -161,7 +161,8 @@ export const r_sys_tool_get = (param: ToolManagementGetParam) =>
 
 export const r_sys_tool_get_one = (id: string) => request.get<ToolVo>(`${URL_SYS_TOOL}/${id}`)
 
-export const r_sys_tool_pass = (id: string) => request.post<ToolVo>(`${URL_SYS_TOOL}/${id}`)
+export const r_sys_tool_pass = (id: string, param: ToolManagementPassParam) =>
+    request.post<ToolVo>(`${URL_SYS_TOOL}/${id}`, param)
 
 export const r_sys_tool_reject = (id: string) => request.put<ToolVo>(`${URL_SYS_TOOL}/${id}`)
 

From b798bb3eb5e1d07510393fdb7e30abc87d11823d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 17 Feb 2024 14:27:20 +0800
Subject: [PATCH 219/307] Optimize modal

---
 src/pages/System/Group.tsx          | 2 ++
 src/pages/System/Role.tsx           | 2 ++
 src/pages/System/Settings/Mail.tsx  | 1 +
 src/pages/System/Tools/Base.tsx     | 5 +++++
 src/pages/System/Tools/Category.tsx | 1 +
 src/pages/System/Tools/Template.tsx | 4 ++++
 src/pages/System/Tools/index.tsx    | 3 +++
 src/pages/System/User.tsx           | 3 +++
 src/pages/Tools/index.tsx           | 4 ++++
 9 files changed, 25 insertions(+)

diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index 51ae287..529cf43 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -191,6 +191,7 @@ const Group = () => {
         modal
             .confirm({
                 title: '确定删除',
+                maskClosable: true,
                 content: `确定删除选中的 ${tableSelectedItem.length} 个用户组吗？`
             })
             .then(
@@ -243,6 +244,7 @@ const Group = () => {
             modal
                 .confirm({
                     title: '确定删除',
+                    maskClosable: true,
                     content: `确定删除角色 ${value.name} 吗？`
                 })
                 .then(
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index 04efd72..989f7cb 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -183,6 +183,7 @@ const Role = () => {
         modal
             .confirm({
                 title: '确定删除',
+                maskClosable: true,
                 content: `确定删除选中的 ${tableSelectedItem.length} 个角色吗？`
             })
             .then(
@@ -235,6 +236,7 @@ const Role = () => {
             modal
                 .confirm({
                     title: '确定删除',
+                    maskClosable: true,
                     content: `确定删除角色 ${value.name} 吗？`
                 })
                 .then(
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index 91d6694..da1e02a 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -17,6 +17,7 @@ const Mail = () => {
     const handleOnTest = () => {
         void modal.confirm({
             title: '发送测试邮件',
+            maskClosable: true,
             content: (
                 <>
                     <AntdForm form={mailSendForm}>
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index 47d3147..e57891e 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -232,6 +232,7 @@ const Base = () => {
                     compileForm.setFieldValue('entryFileName', undefined)
                     void modal.confirm({
                         title: '编译',
+                        maskClosable: true,
                         content: (
                             <>
                                 <AntdForm form={compileForm}>
@@ -372,6 +373,7 @@ const Base = () => {
             modal
                 .confirm({
                     title: '确定删除',
+                    maskClosable: true,
                     content: `确定删除基板 ${value.name} 吗？`
                 })
                 .then(
@@ -535,6 +537,7 @@ const Base = () => {
         const handleOnAddFile = () => {
             void modal.confirm({
                 title: '新建文件',
+                maskClosable: true,
                 content: (
                     <AntdForm form={addFileForm}>
                         <AntdForm.Item
@@ -711,6 +714,7 @@ const Base = () => {
                 renameFileForm.setFieldValue('fileName', fileName)
                 void modal.confirm({
                     title: '重命名文件',
+                    maskClosable: true,
                     content: (
                         <AntdForm form={renameFileForm}>
                             <AntdForm.Item
@@ -811,6 +815,7 @@ const Base = () => {
                 modal
                     .confirm({
                         title: '确定删除',
+                        maskClosable: true,
                         content: `确定删除文件 ${fileName} 吗？`
                     })
                     .then(
diff --git a/src/pages/System/Tools/Category.tsx b/src/pages/System/Tools/Category.tsx
index c17bf62..625e287 100644
--- a/src/pages/System/Tools/Category.tsx
+++ b/src/pages/System/Tools/Category.tsx
@@ -122,6 +122,7 @@ const Category = () => {
             modal
                 .confirm({
                     title: '确定删除',
+                    maskClosable: true,
                     content: `确定删除类别 ${value.name} 吗？`
                 })
                 .then(
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index 5586c15..f6985ac 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -230,6 +230,7 @@ const Template = () => {
             modal
                 .confirm({
                     title: '确定删除',
+                    maskClosable: true,
                     content: `确定删除模板 ${value.name} 吗？`
                 })
                 .then(
@@ -398,6 +399,7 @@ const Template = () => {
         const handleOnAddFile = () => {
             void modal.confirm({
                 title: '新建文件',
+                maskClosable: true,
                 content: (
                     <AntdForm form={addFileForm}>
                         <AntdForm.Item
@@ -577,6 +579,7 @@ const Template = () => {
                 renameFileForm.setFieldValue('fileName', fileName)
                 void modal.confirm({
                     title: '重命名文件',
+                    maskClosable: true,
                     content: (
                         <AntdForm form={renameFileForm}>
                             <AntdForm.Item
@@ -677,6 +680,7 @@ const Template = () => {
                 modal
                     .confirm({
                         title: '确定删除',
+                        maskClosable: true,
                         content: `确定删除文件 ${fileName} 吗？`
                     })
                     .then(
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 8073d1d..abd429a 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -190,6 +190,7 @@ const Tools = () => {
             form.setFieldValue('pass', undefined)
             void modal.confirm({
                 title: '审核',
+                maskClosable: true,
                 content: (
                     <AntdForm form={form}>
                         <AntdForm.Item
@@ -330,6 +331,7 @@ const Tools = () => {
             modal
                 .confirm({
                     title: '确定下架',
+                    maskClosable: true,
                     content: `确定下架工具 ${value.author.username}:${value.toolId}:${value.ver} 吗？`
                 })
                 .then(
@@ -364,6 +366,7 @@ const Tools = () => {
             modal
                 .confirm({
                     title: '确定删除',
+                    maskClosable: true,
                     content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.ver} 吗？`
                 })
                 .then(
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index af9ee4b..05a0255 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -286,6 +286,7 @@ const User = () => {
         modal
             .confirm({
                 title: '确定删除',
+                maskClosable: true,
                 content: `确定删除选中的 ${tableSelectedItem.length} 个用户吗？`
             })
             .then(
@@ -335,6 +336,7 @@ const User = () => {
                         修改用户 {value.username} 的密码
                     </>
                 ),
+                maskClosable: true,
                 content: (
                     <AntdForm
                         form={changePasswordForm}
@@ -466,6 +468,7 @@ const User = () => {
             modal
                 .confirm({
                     title: '确定删除',
+                    maskClosable: true,
                     content: `确定删除用户 ${value.username} 吗？`
                 })
                 .then(
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 44725b5..b27f0dd 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -216,6 +216,7 @@ const Tools = () => {
         modal
             .confirm({
                 title: '删除',
+                maskClosable: true,
                 content: `确定删除工具 ${tool.name}:${tool.ver} 吗？`
             })
             .then(
@@ -245,6 +246,7 @@ const Tools = () => {
     const handleOnUpgradeTool = (tool: ToolVo) => {
         void modal.confirm({
             title: '更新工具',
+            maskClosable: true,
             content: (
                 <>
                     <AntdForm form={upgradeForm}>
@@ -319,6 +321,7 @@ const Tools = () => {
         modal
             .confirm({
                 title: '提交审核',
+                maskClosable: true,
                 content: `确定提交审核工具 ${tool.name}:${tool.ver} 吗？`
             })
             .then(
@@ -357,6 +360,7 @@ const Tools = () => {
         modal
             .confirm({
                 title: '取消审核',
+                maskClosable: true,
                 content: `确定取消审核工具 ${tool.name}:${tool.ver} 吗？`
             })
             .then(

From 751d878a46f4d77f02a5e7483a8f8869e8a525da Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 17 Feb 2024 14:27:36 +0800
Subject: [PATCH 220/307] Add store page (temp)

---
 src/constants/urls.constants.ts |   1 +
 src/global.d.ts                 |   4 +
 src/pages/Tools/Store.tsx       | 150 +++++++++++++++++++++++++++++++-
 src/services/tool.tsx           |   4 +
 4 files changed, 158 insertions(+), 1 deletion(-)

diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index b285d75..ae9b637 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -31,6 +31,7 @@ export const URL_SYS_TOOL_BASE = `${URL_SYS_TOOL}/base`
 export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
 
 export const URL_TOOL = '/tool'
+export const URL_TOOL_STORE = `${URL_TOOL}/store`
 export const URL_TOOL_TEMPLATE = `${URL_TOOL}/template`
 export const URL_TOOL_CATEGORY = `${URL_TOOL}/category`
 export const URL_TOOL_DETAIL = `${URL_TOOL}/detail`
diff --git a/src/global.d.ts b/src/global.d.ts
index 99eb5ab..e543e28 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -597,3 +597,7 @@ interface ToolManagementGetParam extends PageParam {
 interface ToolManagementPassParam {
     dist: string
 }
+
+interface ToolStoreGetParam extends PageParam {
+    searchValue?: string
+}
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index 34bdf42..04ce990 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -1,5 +1,153 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode, useEffect, useState } from 'react'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import Card from '@/components/common/Card.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+import Icon from '@ant-design/icons'
+import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+import FitFullscreen from '@/components/common/FitFullscreen.tsx'
+import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import { r_tool_store_get } from '@/services/tool.tsx'
+
+interface CommonCardProps
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: ReactNode
+    toolName: string
+    toolId: string
+    options?: TiltOptions
+    url: string
+    authorName: string
+    authorAvatar: string
+    authorUsername: string
+    ver: string
+}
+
+const CommonCard = ({
+    style,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref,
+    icon,
+    toolName,
+    toolId,
+    options = {
+        reverse: true,
+        max: 8,
+        glare: true,
+        ['max-glare']: 0.3,
+        scale: 1.03
+    },
+    url,
+    authorName,
+    authorAvatar,
+    authorUsername,
+    ver,
+    ...props
+}: CommonCardProps) => {
+    const navigate = useNavigate()
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current && VanillaTilt.init(cardRef.current, options)
+    }, [options])
+
+    const handleCardOnClick = () => {
+        url && navigate(url)
+    }
+
+    return (
+        <Card
+            style={{ overflow: 'visible', ...style }}
+            ref={cardRef}
+            {...props}
+            onClick={handleCardOnClick}
+        >
+            <FlexBox className={'common-card'}>
+                <div className={'icon'}>{icon}</div>
+                <div className={'version'}>{ver}</div>
+                <div className={'info'}>
+                    <div className={'tool-name'}>{toolName}</div>
+                    <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                </div>
+                <div className={'author'}>
+                    <div className={'avatar'}>
+                        <AntdAvatar
+                            src={
+                                <AntdImage
+                                    preview={{ mask: <Icon component={IconOxygenEye}></Icon> }}
+                                    src={`data:image/png;base64,${authorAvatar}`}
+                                    alt={'Avatar'}
+                                />
+                            }
+                            style={{ background: COLOR_BACKGROUND }}
+                        />
+                    </div>
+                    <AntdTooltip title={authorUsername}>
+                        <div className={'author-name'}>{authorName}</div>
+                    </AntdTooltip>
+                </div>
+            </FlexBox>
+        </Card>
+    )
+}
+
 const Store = () => {
-    return <></>
+    const [isLoading, setIsLoading] = useState(false)
+    const [currentPage, setCurrentPage] = useState(1)
+    const [hasNextPage, setHasNextPage] = useState(true)
+    const [toolData, setToolData] = useState<ToolVo[]>()
+
+    const getTool = () => {
+        if (isLoading) {
+            return
+        }
+        setIsLoading(true)
+        void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
+
+        void r_tool_store_get({ currentPage })
+            .then((res) => {
+                const response = res.data
+
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setToolData(response.data?.records)
+                }
+            })
+            .finally(() => {
+                setIsLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        getTool()
+    }, [])
+
+    return (
+        <>
+            <FitFullscreen data-component={'store'}>
+                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        {toolData?.map((value) => (
+                            <CommonCard
+                                icon={
+                                    <img
+                                        src={`data:image/svg+xml;base64,${value.icon}`}
+                                        alt={'Icon'}
+                                    />
+                                }
+                                toolName={value.name}
+                                toolId={value.toolId}
+                                url={''}
+                                authorName={value.author.userInfo.nickname}
+                                authorAvatar={value.author.userInfo.avatar}
+                                authorUsername={value.author.username}
+                                ver={value.ver}
+                            />
+                        ))}
+                    </FlexBox>
+                </HideScrollbar>
+            </FitFullscreen>
+        </>
+    )
 }
 
 export default Store
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
index e36ece2..601ec56 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.tsx
@@ -3,6 +3,7 @@ import {
     URL_TOOL,
     URL_TOOL_CATEGORY,
     URL_TOOL_DETAIL,
+    URL_TOOL_STORE,
     URL_TOOL_TEMPLATE
 } from '@/constants/urls.constants'
 
@@ -29,3 +30,6 @@ export const r_tool_submit = (id: string) => request.post(`${URL_TOOL}/${id}`)
 export const r_tool_cancel = (id: string) => request.put(`${URL_TOOL}/${id}`)
 
 export const r_tool_delete = (id: string) => request.delete(`${URL_TOOL}/${id}`)
+
+export const r_tool_store_get = (param: ToolStoreGetParam) =>
+    request.get<PageVo<ToolVo>>(URL_TOOL_STORE, param)

From ae16808e1da19cfe6b3640c8819529cc400191fa Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 18 Feb 2024 17:49:55 +0800
Subject: [PATCH 221/307] Optimize code

---
 src/pages/System/Tools/Code.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/pages/System/Tools/Code.tsx b/src/pages/System/Tools/Code.tsx
index 0f881b5..56fac42 100644
--- a/src/pages/System/Tools/Code.tsx
+++ b/src/pages/System/Tools/Code.tsx
@@ -1,14 +1,13 @@
-import { r_sys_tool_get_one } from '@/services/system.tsx'
-import '@/assets/css/pages/system/tools/code.scss'
-import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
-import Playground from '@/components/Playground'
-import { useState } from 'react'
-import { IFiles } from '@/components/Playground/shared.ts'
-import { base64ToFiles } from '@/components/Playground/files.ts'
-import FitFullscreen from '@/components/common/FitFullscreen.tsx'
-import Card from '@/components/common/Card.tsx'
 import Draggable from 'react-draggable'
 import Icon from '@ant-design/icons'
+import '@/assets/css/pages/system/tools/code.scss'
+import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { r_sys_tool_get_one } from '@/services/system'
+import { IFiles } from '@/components/Playground/shared'
+import { base64ToFiles } from '@/components/Playground/files'
+import Playground from '@/components/Playground'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import Card from '@/components/common/Card'
 
 const Code = () => {
     const navigate = useNavigate()

From 3c495cfa16d0e91de1d432ae381143cbd0792e94 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 18 Feb 2024 17:50:31 +0800
Subject: [PATCH 222/307] Finish store

---
 src/assets/css/constants.scss          |   3 +-
 src/assets/css/pages/tools/index.scss  |   2 +-
 src/assets/css/pages/tools/source.scss |   8 ++
 src/assets/css/pages/tools/store.scss  | 117 +++++++++++++++++++++++++
 src/assets/svg/code.svg                |   1 +
 src/assets/svg/more.svg                |   1 +
 src/pages/Tools/Source.tsx             |  89 +++++++++++++++++++
 src/pages/Tools/Store.tsx              |  94 ++++++++++++++++----
 src/pages/Tools/View.tsx               |  40 +++++----
 src/pages/Tools/index.tsx              |  26 ++++--
 src/router/tools.tsx                   |  22 ++++-
 11 files changed, 362 insertions(+), 41 deletions(-)
 create mode 100644 src/assets/css/pages/tools/source.scss
 create mode 100644 src/assets/css/pages/tools/store.scss
 create mode 100644 src/assets/svg/code.svg
 create mode 100644 src/assets/svg/more.svg
 create mode 100644 src/pages/Tools/Source.tsx

diff --git a/src/assets/css/constants.scss b/src/assets/css/constants.scss
index 50786e0..923b3e5 100644
--- a/src/assets/css/constants.scss
+++ b/src/assets/css/constants.scss
@@ -17,4 +17,5 @@ $SIZE_ICON_XS: 16px;
 $SIZE_ICON_SM: 20px;
 $SIZE_ICON_MD: 24px;
 $SIZE_ICON_LG: 32px;
-$SIZE_ICON_XL: 64px;
\ No newline at end of file
+$SIZE_ICON_XL: 64px;
+$SIZE_ICON_XXL: 96px;
\ No newline at end of file
diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.scss
index 9ee637a..000ce1e 100644
--- a/src/assets/css/pages/tools/index.scss
+++ b/src/assets/css/pages/tools/index.scss
@@ -20,8 +20,8 @@
         align-items: center;
 
         > * {
-          flex: 0 0 auto;
           display: block;
+          flex: 0 0 auto;
         }
 
         .version-select {
diff --git a/src/assets/css/pages/tools/source.scss b/src/assets/css/pages/tools/source.scss
new file mode 100644
index 0000000..eba55ab
--- /dev/null
+++ b/src/assets/css/pages/tools/source.scss
@@ -0,0 +1,8 @@
+[data-component=tools-source] {
+  padding: 30px;
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.scss
new file mode 100644
index 0000000..eccb0d2
--- /dev/null
+++ b/src/assets/css/pages/tools/store.scss
@@ -0,0 +1,117 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=tools-store] {
+  .root-content {
+    padding: 30px;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    > .card-box {
+      width: 180px;
+      height: 290px;
+      flex: 0 0 auto;
+      cursor: pointer;
+
+      .common-card {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        align-items: center;
+
+        > * {
+          display: block;
+          flex: 0 0 auto;
+        }
+
+
+        .icon {
+          display: flex;
+          padding-top: 40px;
+          padding-bottom: 20px;
+          color: constants.$production-color;
+          font-size: constants.$SIZE_ICON_XL;
+          justify-content: center;
+
+          img {
+            width: constants.$SIZE_ICON_XL;
+          }
+        }
+
+        .version {
+          position: absolute;
+          left: 10px;
+          top: 10px;
+        }
+
+        .info {
+          padding-top: 20px;
+
+          .tool-name {
+            font-weight: bolder;
+            font-size: 1.6em;
+          }
+
+          .tool-desc {
+            margin-top: 10px;
+            color: constants.$font-secondary-color;
+          }
+        }
+
+        .author {
+          display: flex;
+          margin-top: auto;
+          flex-direction: row;
+          justify-content: end;
+          padding-bottom: 10px;
+          gap: 10px;
+
+          .avatar {
+            > * {
+              width: 24px;
+              height: 24px;
+            }
+          }
+
+          .author-name {
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        .operation {
+          position: absolute;
+          top: 6px;
+          right: 12px;
+          font-size: 1.6em;
+
+          >*:hover {
+            color: constants.$font-secondary-color;
+          }
+        }
+      }
+
+      .load-more-card {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        align-items: center;
+
+        .icon {
+          display: flex;
+          font-size: constants.$SIZE_ICON_XXL;
+          color: constants.$production-color;
+          align-items: center;
+          transform: translateY(-20px);
+        }
+
+        .text {
+          position: absolute;
+          top: 60%;
+          font-size: 1.2em;
+          font-weight: bolder;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/svg/code.svg b/src/assets/svg/code.svg
new file mode 100644
index 0000000..256aba2
--- /dev/null
+++ b/src/assets/svg/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M305.6 225.6c-17.6-17.6-43.2-17.6-59.2 0L19.2 460.8c-25.6 30.4-25.6 72 0 97.6l225.6 235.2c8 8 20.8 12.8 30.4 12.8s20.8-4.8 30.4-12.8c17.6-17.6 17.6-43.2 0-59.2L88 512l217.6-225.6c17.6-17.6 17.6-43.2 0-60.8zM1001.6 460.8L774.4 225.6c-17.6-17.6-43.2-17.6-59.2 0s-17.6 43.2 0 59.2L932.8 512 715.2 737.6c-17.6 17.6-17.6 43.2 0 59.2 8 8 17.6 12.8 30.4 12.8 12.8 0 20.8-4.8 30.4-12.8l225.6-235.2c28.8-28.8 28.8-70.4 0-100.8zM612.8 230.4c-20.8-8-46.4 4.8-56 25.6L382.4 742.4c-8 20.8 4.8 46.4 25.6 56 4.8 0 8 4.8 12.8 4.8 17.6 0 33.6-12.8 38.4-30.4l179.2-491.2c8-20.8-4.8-46.4-25.6-51.2z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/more.svg b/src/assets/svg/more.svg
new file mode 100644
index 0000000..289f2a6
--- /dev/null
+++ b/src/assets/svg/more.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M243.2 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /><path d="M512 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /><path d="M780.8 512m-83.2 0a1.3 1.3 0 1 0 166.4 0 1.3 1.3 0 1 0-166.4 0Z" /></svg>
\ No newline at end of file
diff --git a/src/pages/Tools/Source.tsx b/src/pages/Tools/Source.tsx
new file mode 100644
index 0000000..399bf51
--- /dev/null
+++ b/src/pages/Tools/Source.tsx
@@ -0,0 +1,89 @@
+import '@/assets/css/pages/tools/source.scss'
+import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { r_tool_detail } from '@/services/tool'
+import { IFiles } from '@/components/Playground/shared'
+import { base64ToFiles } from '@/components/Playground/files'
+import Playground from '@/components/Playground'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import Card from '@/components/common/Card'
+import { getLoginStatus } from '@/util/auth.tsx'
+
+const Source = () => {
+    const navigate = useNavigate()
+    const { username, toolId, ver } = useParams()
+    const [loading, setLoading] = useState(false)
+    const [files, setFiles] = useState<IFiles>({})
+    const [selectedFileName, setSelectedFileName] = useState('')
+
+    const render = (toolVo: ToolVo) => {
+        try {
+            setFiles(base64ToFiles(toolVo.source.data!))
+            setSelectedFileName(toolVo.entryPoint)
+        } catch (e) {
+            void message.error('载入工具失败')
+        }
+    }
+
+    const getTool = () => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+        void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
+
+        void r_tool_detail(username!, toolId!, ver || 'latest')
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        render(response.data!)
+                        break
+                    case DATABASE_NO_RECORD_FOUND:
+                        void message.error('未找到指定工具')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
+                        break
+                    default:
+                        void message.error('获取工具信息失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        if (username === '!' && !getLoginStatus()) {
+            setTimeout(() => {
+                navigate(-1)
+            }, 3000)
+            return
+        }
+        if (username !== '!' && ver) {
+            navigate(`/source/${username}/${toolId}`)
+            return
+        }
+        if (username === '!' && !ver) {
+            navigate(`/source/!/${toolId}/latest`)
+            return
+        }
+        getTool()
+    }, [])
+
+    return (
+        <FitFullscreen data-component={'tools-source'}>
+            <Card>
+                <Playground.CodeEditor
+                    readonly
+                    files={files}
+                    selectedFileName={selectedFileName}
+                    onSelectedFileChange={setSelectedFileName}
+                />
+            </Card>
+        </FitFullscreen>
+    )
+}
+
+export default Source
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index 04ce990..6683e48 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -1,18 +1,20 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode, useEffect, useState } from 'react'
+import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
-import Card from '@/components/common/Card.tsx'
-import FlexBox from '@/components/common/FlexBox.tsx'
 import Icon from '@ant-design/icons'
-import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
-import FitFullscreen from '@/components/common/FitFullscreen.tsx'
-import HideScrollbar from '@/components/common/HideScrollbar.tsx'
-import { r_tool_store_get } from '@/services/tool.tsx'
+import '@/assets/css/pages/tools/store.scss'
+import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { r_tool_store_get } from '@/services/tool'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
 
 interface CommonCardProps
     extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     icon: ReactNode
     toolName: string
     toolId: string
+    toolDesc: string
     options?: TiltOptions
     url: string
     authorName: string
@@ -28,6 +30,7 @@ const CommonCard = ({
     icon,
     toolName,
     toolId,
+    toolDesc,
     options = {
         reverse: true,
         max: 8,
@@ -53,6 +56,11 @@ const CommonCard = ({
         url && navigate(url)
     }
 
+    const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigate(`/source/${authorUsername}/${toolId}`)
+    }
+
     return (
         <Card
             style={{ overflow: 'visible', ...style }}
@@ -62,10 +70,13 @@ const CommonCard = ({
         >
             <FlexBox className={'common-card'}>
                 <div className={'icon'}>{icon}</div>
-                <div className={'version'}>{ver}</div>
+                <div className={'version'}>
+                    <AntdTag>V{ver}</AntdTag>
+                </div>
                 <div className={'info'}>
                     <div className={'tool-name'}>{toolName}</div>
                     <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                    {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
                 </div>
                 <div className={'author'}>
                     <div className={'avatar'}>
@@ -84,6 +95,41 @@ const CommonCard = ({
                         <div className={'author-name'}>{authorName}</div>
                     </AntdTooltip>
                 </div>
+                <div className={'operation'}>
+                    <AntdTooltip title={'源码'}>
+                        <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
+                    </AntdTooltip>
+                </div>
+            </FlexBox>
+        </Card>
+    )
+}
+
+interface LoadMoreCardProps {
+    onClick: () => void
+}
+
+const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current &&
+            VanillaTilt.init(cardRef.current, {
+                reverse: true,
+                max: 8,
+                glare: true,
+                ['max-glare']: 0.3,
+                scale: 1.03
+            })
+    }, [])
+
+    return (
+        <Card style={{ overflow: 'visible' }} ref={cardRef} onClick={onClick}>
+            <FlexBox className={'load-more-card'}>
+                <div className={'icon'}>
+                    <Icon component={IconOxygenMore} />{' '}
+                </div>
+                <div className={'text'}>加载更多</div>
             </FlexBox>
         </Card>
     )
@@ -91,24 +137,31 @@ const CommonCard = ({
 
 const Store = () => {
     const [isLoading, setIsLoading] = useState(false)
-    const [currentPage, setCurrentPage] = useState(1)
+    const [currentPage, setCurrentPage] = useState(0)
     const [hasNextPage, setHasNextPage] = useState(true)
-    const [toolData, setToolData] = useState<ToolVo[]>()
+    const [toolData, setToolData] = useState<ToolVo[]>([])
 
-    const getTool = () => {
+    const getTool = (page: number) => {
         if (isLoading) {
             return
         }
         setIsLoading(true)
         void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
 
-        void r_tool_store_get({ currentPage })
+        void r_tool_store_get({ currentPage: page })
             .then((res) => {
                 const response = res.data
 
                 switch (response.code) {
                     case DATABASE_SELECT_SUCCESS:
-                        setToolData(response.data?.records)
+                        setCurrentPage(page)
+                        setToolData([...toolData, ...response.data!.records])
+                        if (response.data?.current === response.data?.pages) {
+                            setHasNextPage(false)
+                        }
+                        break
+                    default:
+                        void message.error('加载失败，请稍后重试')
                 }
             })
             .finally(() => {
@@ -117,13 +170,20 @@ const Store = () => {
             })
     }
 
+    const handleOnLoadMore = () => {
+        if (isLoading) {
+            return
+        }
+        getTool(currentPage + 1)
+    }
+
     useEffect(() => {
-        getTool()
+        getTool(1)
     }, [])
 
     return (
         <>
-            <FitFullscreen data-component={'store'}>
+            <FitFullscreen data-component={'tools-store'}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         {toolData?.map((value) => (
@@ -136,13 +196,15 @@ const Store = () => {
                                 }
                                 toolName={value.name}
                                 toolId={value.toolId}
-                                url={''}
+                                toolDesc={value.description}
+                                url={`/view/${value.author.username}/${value.toolId}`}
                                 authorName={value.author.userInfo.nickname}
                                 authorAvatar={value.author.userInfo.avatar}
                                 authorUsername={value.author.username}
                                 ver={value.ver}
                             />
                         ))}
+                        {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
                     </FlexBox>
                 </HideScrollbar>
             </FitFullscreen>
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index 7f15644..2e1c0f6 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -16,22 +16,32 @@ const View = () => {
     const [compiledCode, setCompiledCode] = useState('')
 
     const render = (toolVo: ToolVo) => {
-        try {
-            const baseDist = base64ToStr(toolVo.base.dist.data!)
-            const files = base64ToFiles(toolVo.source.data!)
-            const importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap
+        if (username === '!') {
+            try {
+                const baseDist = base64ToStr(toolVo.base.dist.data!)
+                const files = base64ToFiles(toolVo.source.data!)
+                const importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap
 
-            void compiler
-                .compile(files, importMap, toolVo.entryPoint)
-                .then((result) => {
-                    const output = result.outputFiles[0].text
-                    setCompiledCode(`${output}\n${baseDist}`)
-                })
-                .catch((reason) => {
-                    void message.error(`编译失败：${reason}`)
-                })
-        } catch (e) {
-            void message.error('载入工具失败')
+                void compiler
+                    .compile(files, importMap, toolVo.entryPoint)
+                    .then((result) => {
+                        const output = result.outputFiles[0].text
+                        setCompiledCode(`${output}\n${baseDist}`)
+                    })
+                    .catch((reason) => {
+                        void message.error(`编译失败：${reason}`)
+                    })
+            } catch (e) {
+                void message.error('载入工具失败')
+            }
+        } else {
+            try {
+                const baseDist = base64ToStr(toolVo.base.dist.data!)
+                const dist = base64ToStr(toolVo.dist.data!)
+                setCompiledCode(`${dist}\n${baseDist}`)
+            } catch (e) {
+                void message.error('载入工具失败')
+            }
         }
     }
 
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index b27f0dd..d7b3a39 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -36,6 +36,7 @@ interface CommonCardProps
     url?: string
     onOpen?: () => void
     onEdit?: () => void
+    onSource?: () => void
     onPublish?: () => void
     onCancelReview?: () => void
     onDelete?: () => void
@@ -58,6 +59,7 @@ const CommonCard = ({
     url,
     onOpen,
     onEdit,
+    onSource,
     onPublish,
     onCancelReview,
     onDelete,
@@ -102,6 +104,11 @@ const CommonCard = ({
                             </AntdButton.Group>
                         </div>
                     )}
+                    {onSource && (
+                        <AntdButton size={'small'} onClick={onSource}>
+                            源码
+                        </AntdButton>
+                    )}
                     {onCancelReview && (
                         <AntdButton size={'small'} onClick={onCancelReview}>
                             取消审核
@@ -140,15 +147,23 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
     }
 
     const handleOnEditTool = () => {
-        if (selectedTool.publish === '0' && ['NONE', 'REJECT'].includes(selectedTool.review)) {
+        if (['NONE', 'REJECT'].includes(selectedTool.review)) {
             return () => {
                 navigate(`/edit/${tools[0].toolId}`)
             }
         }
     }
 
+    const handleOnSourceTool = () => {
+        if (selectedTool.review === 'PASS') {
+            return () => {
+                navigate(`/source/!/${selectedTool.toolId}/${selectedTool.ver}`)
+            }
+        }
+    }
+
     const handleOnPublishTool = () => {
-        if (selectedTool.publish === '0' && ['NONE', 'REJECT'].includes(selectedTool.review)) {
+        if (['NONE', 'REJECT'].includes(selectedTool.review)) {
             return () => {
                 onSubmit?.(selectedTool)
             }
@@ -156,7 +171,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
     }
 
     const handleOnCancelReview = () => {
-        if (selectedTool.publish === '0' && selectedTool.review === 'PROCESSING') {
+        if (selectedTool.review === 'PROCESSING') {
             return () => {
                 onCancel?.(selectedTool)
             }
@@ -178,6 +193,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
             toolId={selectedTool.toolId}
             onOpen={handleOnOpenTool}
             onEdit={handleOnEditTool()}
+            onSource={handleOnSourceTool()}
             onPublish={handleOnPublishTool()}
             onCancelReview={handleOnCancelReview()}
             onDelete={handleOnDeleteTool}
@@ -189,10 +205,10 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
                 onChange={handleOnVersionChange}
                 options={tools.map((value) => ({
                     value: value.id,
-                    label: `${value.ver}${value.publish === '0' ? '*' : ''}`
+                    label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`
                 }))}
             />
-            {tools.every((value) => value.publish !== '0') && (
+            {tools.every((value) => value.review === 'PASS') && (
                 <AntdTooltip title={'更新'}>
                     <Icon
                         component={IconOxygenUpgrade}
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 2bc88ac..5eb2764 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -17,8 +17,7 @@ export const tools: RouteJsonObject[] = [
         name: '工具商店',
         titlePostfix: ' - 商店',
         icon: lazy(() => import('~icons/oxygen/store')),
-        menu: true,
-        auth: true
+        menu: true
     },
     {
         path: 'create',
@@ -50,7 +49,24 @@ export const tools: RouteJsonObject[] = [
         absolutePath: '/edit',
         id: 'tools-edit',
         component: lazy(() => import('@/pages/Tools/Edit')),
-        name: '查看'
+        name: '编辑',
+        auth: true
+    },
+    {
+        path: 'source/:username/:toolId/:ver',
+        absolutePath: '/source',
+        id: 'tools-source-ver',
+        component: lazy(() => import('@/pages/Tools/Source')),
+        name: '源码',
+        auth: true
+    },
+    {
+        path: 'source/:username/:toolId',
+        absolutePath: '/source',
+        id: 'tools-source',
+        component: lazy(() => import('@/pages/Tools/Source')),
+        name: '源码',
+        auth: true
     },
     {
         path: '*',

From b478081600cf67a9c45ef606de201d2f18c3e486 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 18 Feb 2024 18:06:26 +0800
Subject: [PATCH 223/307] Add permission

---
 src/pages/System/Tools/index.tsx | 41 ++++++++++++++++++--------------
 src/router/system.tsx            |  2 ++
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index abd429a..fc0e123 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -24,6 +24,7 @@ import Icon from '@ant-design/icons'
 import compiler from '@/components/Playground/compiler.ts'
 import { base64ToFiles, IMPORT_MAP_FILE_NAME, strToBase64 } from '@/components/Playground/files.ts'
 import { IImportMap } from '@/components/Playground/shared.ts'
+import Permission from '@/components/common/Permission.tsx'
 
 const Tools = () => {
     const navigate = useNavigate()
@@ -125,28 +126,32 @@ const Tools = () => {
                         >
                             查看
                         </a>
-                        {record.review === 'PROCESSING' && (
+                        <Permission operationCode={['system:tool:modify:tool']}>
+                            {record.review === 'PROCESSING' && (
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnReviewBtnClick(record)}
+                                >
+                                    审核
+                                </a>
+                            )}
+                            {record.review === 'PASS' && (
+                                <a
+                                    style={{ color: COLOR_PRODUCTION }}
+                                    onClick={handleOnOffShelveBtnClick(record)}
+                                >
+                                    下架
+                                </a>
+                            )}
+                        </Permission>
+                        <Permission operationCode={['system:tool:delete:tool']}>
                             <a
                                 style={{ color: COLOR_PRODUCTION }}
-                                onClick={handleOnReviewBtnClick(record)}
+                                onClick={handleOnDeleteBtnClick(record)}
                             >
-                                审核
+                                删除
                             </a>
-                        )}
-                        {record.review === 'PASS' && (
-                            <a
-                                style={{ color: COLOR_PRODUCTION }}
-                                onClick={handleOnOffShelveBtnClick(record)}
-                            >
-                                下架
-                            </a>
-                        )}
-                        <a
-                            style={{ color: COLOR_PRODUCTION }}
-                            onClick={handleOnDeleteBtnClick(record)}
-                        >
-                            删除
-                        </a>
+                        </Permission>
                     </AntdSpace>{' '}
                 </>
             )
diff --git a/src/router/system.tsx b/src/router/system.tsx
index b4ded5f..828af70 100644
--- a/src/router/system.tsx
+++ b/src/router/system.tsx
@@ -54,6 +54,7 @@ const system: RouteJsonObject[] = [
                 absolutePath: '/system/tools/code',
                 id: 'system-tools-code',
                 component: lazy(() => import('@/pages/System/Tools/Code')),
+                operationCode: 'system:tool:query:tool',
                 name: '查看工具'
             },
             {
@@ -61,6 +62,7 @@ const system: RouteJsonObject[] = [
                 absolutePath: '/system/tools/execute',
                 id: 'system-tools-execute',
                 component: lazy(() => import('@/pages/System/Tools/Execute')),
+                operationCode: 'system:tool:query:tool',
                 name: '运行工具'
             },
             {

From 48ff94a2c931fa951d57a381c13c982047264b85 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 19 Feb 2024 18:42:29 +0800
Subject: [PATCH 224/307] Add search to store

---
 src/assets/css/pages/tools/store.scss | 16 +++++++++-
 src/pages/Tools/Store.tsx             | 42 ++++++++++++++++++---------
 2 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.scss
index eccb0d2..6b5789e 100644
--- a/src/assets/css/pages/tools/store.scss
+++ b/src/assets/css/pages/tools/store.scss
@@ -1,11 +1,25 @@
 @use '@/assets/css/constants' as constants;
 
 [data-component=tools-store] {
+  .search {
+    display: flex;
+    position: sticky;
+    width: 100%;
+    margin-top: 20px;
+    top: 20px;
+    z-index: 10;
+    justify-content: center;
+
+    >* {
+      width: 80%;
+    }
+  }
+
   .root-content {
     padding: 30px;
     gap: 20px;
     flex-wrap: wrap;
-    justify-content: flex-start;
+    justify-content: center;
 
     > .card-box {
       width: 180px;
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index 6683e48..38a6a85 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -141,24 +141,39 @@ const Store = () => {
     const [hasNextPage, setHasNextPage] = useState(true)
     const [toolData, setToolData] = useState<ToolVo[]>([])
 
-    const getTool = (page: number) => {
+    const handleOnSearch = (value: string) => {
+        getTool(1, value)
+    }
+
+    const handleOnLoadMore = () => {
+        if (isLoading) {
+            return
+        }
+        getTool(currentPage + 1, '')
+    }
+
+    const getTool = (page: number, searchValue: string) => {
         if (isLoading) {
             return
         }
         setIsLoading(true)
         void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
 
-        void r_tool_store_get({ currentPage: page })
+        void r_tool_store_get({ currentPage: page, searchValue })
             .then((res) => {
                 const response = res.data
 
                 switch (response.code) {
                     case DATABASE_SELECT_SUCCESS:
-                        setCurrentPage(page)
-                        setToolData([...toolData, ...response.data!.records])
-                        if (response.data?.current === response.data?.pages) {
+                        setCurrentPage(response.data!.current)
+                        if (response.data!.current === response.data!.pages) {
                             setHasNextPage(false)
                         }
+                        if (response.data!.current === 1) {
+                            setToolData(response.data!.records)
+                        } else {
+                            setToolData([...toolData, ...response.data!.records])
+                        }
                         break
                     default:
                         void message.error('加载失败，请稍后重试')
@@ -170,21 +185,22 @@ const Store = () => {
             })
     }
 
-    const handleOnLoadMore = () => {
-        if (isLoading) {
-            return
-        }
-        getTool(currentPage + 1)
-    }
-
     useEffect(() => {
-        getTool(1)
+        getTool(1, '')
     }, [])
 
     return (
         <>
             <FitFullscreen data-component={'tools-store'}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
+                    <div className={'search'}>
+                        <AntdInput.Search
+                            placeholder={'请输入工具名或关键字'}
+                            enterButton
+                            loading={isLoading}
+                            onSearch={handleOnSearch}
+                        />
+                    </div>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         {toolData?.map((value) => (
                             <CommonCard

From 9ab8a0268cd4a058ae629b9b1a95dc44b723f790 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 20 Feb 2024 11:18:24 +0800
Subject: [PATCH 225/307] Upgrade HideScrollbar

---
 src/components/common/HideScrollbar.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index ed12cbf..962dd00 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -1,4 +1,11 @@
-import { TouchEvent, MouseEvent, KeyboardEvent, DetailedHTMLProps, HTMLAttributes } from 'react'
+import {
+    TouchEvent,
+    MouseEvent,
+    KeyboardEvent,
+    DetailedHTMLProps,
+    HTMLAttributes,
+    UIEvent
+} from 'react'
 import '@/assets/css/components/common/hide-scrollbar.scss'
 
 interface HideScrollbarProps
@@ -63,6 +70,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
             minHeight,
             scrollbarWidth,
             autoHideWaitingTime,
+            onScroll,
             children,
             style,
             className,
@@ -406,7 +414,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
             }
         }
 
-        const handleDefaultScroll = () => {
+        const handleDefaultScroll = (event: UIEvent<HTMLDivElement>) => {
+            onScroll?.(event)
             setVerticalScrollbarPosition(
                 ((rootRef.current?.scrollTop ?? 0) / (contentRef.current?.clientHeight ?? 1)) * 100
             )
@@ -482,7 +491,6 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                         length = prevState
                         return prevState
                     })
-                    console.log(length)
                     if (
                         !isPreventHorizontalScroll &&
                         length >= 100 &&

From 94294d90b206120d8e8077a57a85e8771b0bfa0f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 20 Feb 2024 11:19:09 +0800
Subject: [PATCH 226/307] Hide search bar when scroll

---
 src/assets/css/pages/tools/store.scss |  9 +++++++--
 src/pages/Tools/Store.tsx             | 23 ++++++++++++++++++++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.scss
index 6b5789e..d1a6d13 100644
--- a/src/assets/css/pages/tools/store.scss
+++ b/src/assets/css/pages/tools/store.scss
@@ -9,10 +9,15 @@
     top: 20px;
     z-index: 10;
     justify-content: center;
+    transition: all 0.3s ease;
 
-    >* {
+    > * {
       width: 80%;
     }
+
+    &.hide {
+      transform: translateY(-60px);
+    }
   }
 
   .root-content {
@@ -99,7 +104,7 @@
           right: 12px;
           font-size: 1.6em;
 
-          >*:hover {
+          > *:hover {
             color: constants.$font-secondary-color;
           }
         }
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index 38a6a85..a7ea3e7 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } from 'react'
+import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode, UIEvent, useState } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/store.scss'
@@ -136,15 +136,26 @@ const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
 }
 
 const Store = () => {
+    const scrollTopRef = useRef(0)
     const [isLoading, setIsLoading] = useState(false)
     const [currentPage, setCurrentPage] = useState(0)
     const [hasNextPage, setHasNextPage] = useState(true)
     const [toolData, setToolData] = useState<ToolVo[]>([])
+    const [hideSearch, setHideSearch] = useState(false)
 
     const handleOnSearch = (value: string) => {
         getTool(1, value)
     }
 
+    const handleOnScroll = (event: UIEvent<HTMLDivElement>) => {
+        if (event.currentTarget.scrollTop < scrollTopRef.current) {
+            setHideSearch(false)
+        } else {
+            setHideSearch(true)
+        }
+        scrollTopRef.current = event.currentTarget.scrollTop
+    }
+
     const handleOnLoadMore = () => {
         if (isLoading) {
             return
@@ -192,11 +203,16 @@ const Store = () => {
     return (
         <>
             <FitFullscreen data-component={'tools-store'}>
-                <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
-                    <div className={'search'}>
+                <HideScrollbar
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={1000}
+                    onScroll={handleOnScroll}
+                >
+                    <div className={`search${hideSearch ? ' hide' : ''}`}>
                         <AntdInput.Search
                             placeholder={'请输入工具名或关键字'}
                             enterButton
+                            allowClear
                             loading={isLoading}
                             onSearch={handleOnSearch}
                         />
@@ -204,6 +220,7 @@ const Store = () => {
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         {toolData?.map((value) => (
                             <CommonCard
+                                key={value.id}
                                 icon={
                                     <img
                                         src={`data:image/svg+xml;base64,${value.icon}`}

From 2b1212b676d1c5e84247f691eab56848fa05b4e4 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 20 Feb 2024 11:42:42 +0800
Subject: [PATCH 227/307] Add tool-related links to system index page

---
 src/assets/svg/category.svg |  1 +
 src/pages/System/index.tsx  | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 src/assets/svg/category.svg

diff --git a/src/assets/svg/category.svg b/src/assets/svg/category.svg
new file mode 100644
index 0000000..3f14378
--- /dev/null
+++ b/src/assets/svg/category.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M128 426.666667H85.333333V170.794667C85.333333 147.157333 104.746667 128 127.658667 128h768.682666A42.24 42.24 0 0 1 938.666667 170.794667V426.666667h-42.666667v426.709333a42.496 42.496 0 0 1-42.368 42.624H170.368A42.453333 42.453333 0 0 1 128 853.376V426.666667z m682.666667 0H213.333333v384h597.333334v-384zM170.666667 213.333333v128h682.666666V213.333333H170.666667z m213.333333 298.666667h256v85.333333H384v-85.333333z" /></svg>
\ No newline at end of file
diff --git a/src/pages/System/index.tsx b/src/pages/System/index.tsx
index c5cb37d..57203a0 100644
--- a/src/pages/System/index.tsx
+++ b/src/pages/System/index.tsx
@@ -77,6 +77,26 @@ const System = () => {
                                 系统设置
                             </CommonCard>
                         </Permission>
+                        <Permission operationCode={['system:tool:query:tool']}>
+                            <CommonCard icon={IconOxygenTool} url={'tools'}>
+                                工具管理
+                            </CommonCard>
+                        </Permission>
+                        <Permission operationCode={['system:tool:query:template']}>
+                            <CommonCard icon={IconOxygenTemplate} url={'tools/template'}>
+                                模板管理
+                            </CommonCard>
+                        </Permission>
+                        <Permission operationCode={['system:tool:query:base']}>
+                            <CommonCard icon={IconOxygenBase} url={'tools/base'}>
+                                基板管理
+                            </CommonCard>
+                        </Permission>
+                        <Permission operationCode={['system:tool:query:category']}>
+                            <CommonCard icon={IconOxygenCategory} url={'tools/category'}>
+                                类别管理
+                            </CommonCard>
+                        </Permission>
                         <Permission path={'/system/user'}>
                             <CommonCard icon={IconOxygenUser} url={'user'}>
                                 用户管理

From 66486f86f0fb27e6a2eb11dddb22f0d0a6970514 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 21 Feb 2024 11:47:13 +0800
Subject: [PATCH 228/307] Optimize code

---
 src/pages/Tools/Store.tsx   | 2 ++
 src/pages/UserFramework.tsx | 2 +-
 src/util/auth.tsx           | 4 ++--
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index a7ea3e7..5f330df 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -179,6 +179,8 @@ const Store = () => {
                         setCurrentPage(response.data!.current)
                         if (response.data!.current === response.data!.pages) {
                             setHasNextPage(false)
+                        } else {
+                            setHasNextPage(true)
                         }
                         if (response.data!.current === 1) {
                             setToolData(response.data!.records)
diff --git a/src/pages/UserFramework.tsx b/src/pages/UserFramework.tsx
index 2cba983..52057c1 100644
--- a/src/pages/UserFramework.tsx
+++ b/src/pages/UserFramework.tsx
@@ -23,7 +23,7 @@ const UserFramework = () => {
                                 )}
                                 <Sidebar.Item
                                     path={'/'}
-                                    icon={IconOxygenBack}
+                                    icon={IconOxygenTool}
                                     text={'回到氧工具'}
                                 />
                             </Sidebar.ItemList>
diff --git a/src/util/auth.tsx b/src/util/auth.tsx
index 6fc66fc..7ec4687 100644
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -76,8 +76,8 @@ export const getVerifyStatus_async = () => {
         .verified
 }
 
-export const getUserInfo = async (): Promise<UserWithPowerInfoVo> => {
-    if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) {
+export const getUserInfo = async (force = false): Promise<UserWithPowerInfoVo> => {
+    if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null && !force) {
         return new Promise((resolve) => {
             resolve(
                 JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as UserWithPowerInfoVo

From 380b82f9a9a6e50d2bc511494d2fa9526c28d2df Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 21 Feb 2024 16:36:51 +0800
Subject: [PATCH 229/307] Fix incorrect scrolling bug in HideScrollbar

---
 src/components/common/HideScrollbar.tsx | 27 +++++++++++--------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 962dd00..a79889b 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -486,24 +486,21 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                         event.preventDefault()
                         return
                     }
-                    let length = verticalScrollbarLength
                     setVerticalScrollbarLength((prevState) => {
-                        length = prevState
+                        if (
+                            !isPreventHorizontalScroll &&
+                            prevState >= 100 &&
+                            !event.shiftKey &&
+                            !event.deltaX
+                        ) {
+                            event.preventDefault()
+                            rootRef.current?.scrollTo({
+                                left: rootRef.current?.scrollLeft + event.deltaY,
+                                behavior: 'smooth'
+                            })
+                        }
                         return prevState
                     })
-                    if (
-                        !isPreventHorizontalScroll &&
-                        length >= 100 &&
-                        !event.shiftKey &&
-                        !event.deltaX
-                    ) {
-                        event.preventDefault()
-                        rootRef.current?.scrollTo({
-                            left: rootRef.current?.scrollLeft + event.deltaY,
-                            behavior: 'smooth'
-                        })
-                        return
-                    }
                 }
             }
             wheelListenerRef.current = handleDefaultWheel

From d2e0f32f5b03666a965599eb76e8922cbc7b9a85 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 22 Feb 2024 17:59:42 +0800
Subject: [PATCH 230/307] Add user profile page

---
 src/assets/css/constants.scss        |   1 +
 src/assets/css/pages/user/index.scss | 135 +++++++++
 src/assets/svg/share.svg             |   1 +
 src/global.d.ts                      |  12 +-
 src/pages/System/User.tsx            |   4 +-
 src/pages/User/index.tsx             | 391 ++++++++++++++++++++++++++-
 src/services/system.tsx              |  10 +-
 src/util/auth.tsx                    |   4 +-
 8 files changed, 550 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/css/pages/user/index.scss
 create mode 100644 src/assets/svg/share.svg

diff --git a/src/assets/css/constants.scss b/src/assets/css/constants.scss
index 923b3e5..aa21c9f 100644
--- a/src/assets/css/constants.scss
+++ b/src/assets/css/constants.scss
@@ -10,6 +10,7 @@ $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;
 $focus-color: #DDDDDD;
+$divide-color: rgba(204, 204, 204, 0.66);
 $border-color: rgba(204, 204, 204, 0.33);
 $url-color: rgba(102, 102, 102, .8);
 $url-active-color: #ccc;
diff --git a/src/assets/css/pages/user/index.scss b/src/assets/css/pages/user/index.scss
new file mode 100644
index 0000000..ca80775
--- /dev/null
+++ b/src/assets/css/pages/user/index.scss
@@ -0,0 +1,135 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=user] .root-content {
+  padding: {
+    top: 80px;
+    left: 30px;
+    right: 30px;
+    bottom: 30px;
+  };
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    align-items: center;
+    min-width: 900px;
+    padding-bottom: 20px;
+
+    > :not(:first-child) {
+      padding: {
+        left: 60px;
+        right: 60px;
+      };
+    }
+
+    .divide {
+      height: 1px;
+      width: calc(100% - 120px);
+      background-color: constants.$divide-color;
+      margin: {
+        left: 60px;
+        right: 60px;
+      };
+    }
+
+    .info {
+      margin-left: 40px;
+      transform: translateY(-40px);
+
+      > * {
+        flex: 0 0 auto;
+      }
+
+      .avatar-box {
+        background-color: white;
+        padding: 4px;
+        border-radius: 50%;
+        box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
+
+        .avatar {
+          background-color: transparent !important;
+        }
+      }
+
+      .info-name {
+        margin: {
+          top: 20px;
+          left: 24px;
+        };
+        justify-content: center;
+
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .nickname {
+          font-size: 2.4em;
+          font-weight: bolder;
+          color: constants.$production-color;
+        }
+
+        .url {
+          > span {
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+
+    .title {
+      align-items: center;
+
+      .content {
+        padding: {
+          bottom: 30px;
+        };
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .text {
+          font-size: 1.6em;
+          font-weight: bolder;
+        }
+
+        .operation {
+          gap: 10px;
+        }
+      }
+    }
+
+    .table {
+      gap: 24px;
+
+      padding: {
+        top: 30px;
+        bottom: 20px;
+      };
+
+      .row {
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .label {
+          font-size: 1.4em;
+          font-weight: bolder;
+          width: 400px;
+        }
+
+        .input {
+          width: 400px;
+
+          > * {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/svg/share.svg b/src/assets/svg/share.svg
new file mode 100644
index 0000000..f3dfe23
--- /dev/null
+++ b/src/assets/svg/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1001.627381 394.106435a44.521739 44.521739 0 1 1-88.598261 0V208.228174l-398.914783 398.914783a54.049391 54.049391 0 1 1-76.577391-76.310261l397.579131-397.490087h-182.984348a44.78887 44.78887 0 1 1 0-89.043479h298.740869c1.335652 0 2.226087 0.534261 3.561739 0.623305s1.78087-0.623304 2.671305-0.623305a40.069565 40.069565 0 0 1 27.158261 11.620174c1.157565 0.667826 2.226087 1.513739 3.116521 2.448696 0.890435 0.979478 1.78087 2.092522 2.671305 3.161043a41.360696 41.360696 0 0 1 11.575652 27.158261c0 0.979478-0.445217 1.825391-0.445218 2.80487s0.445217 2.359652 0.445218 3.650783v298.963478zM111.192598 934.956522h712.347826v-400.695652h89.043479v400.695652a89.043478 89.043478 0 0 1-89.043479 89.043478H111.192598a89.043478 89.043478 0 0 1-89.043478-89.043478V222.608696a89.043478 89.043478 0 0 1 89.043478-89.043479h400.695652v89.043479H111.192598v712.347826z" /></svg>
\ No newline at end of file
diff --git a/src/global.d.ts b/src/global.d.ts
index e543e28..8562706 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -59,6 +59,11 @@ interface TokenVo {
     token: string
 }
 
+interface UserInfoUpdateParam {
+    avatar?: string
+    nickname?: string
+}
+
 interface RegisterParam {
     username: string
     email: string
@@ -89,6 +94,11 @@ interface LoginParam {
     captchaCode: string
 }
 
+interface UserChangePasswordParam {
+    originalPassword: string
+    newPassword: string
+}
+
 interface UserWithInfoVo {
     id: string
     username: string
@@ -243,7 +253,7 @@ interface UserAddEditParam {
     groupIds: number[]
 }
 
-interface UserChangePasswordParam {
+interface UserUpdatePasswordParam {
     id: string
     password: string
     credentialsExpiration?: string
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 05a0255..d4a4ea2 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -30,7 +30,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 
-interface ChangePasswordFields extends UserChangePasswordParam {
+interface ChangePasswordFields extends UserUpdatePasswordParam {
     passwordConfirm: string
     needChangePassword: boolean
 }
@@ -200,7 +200,7 @@ const User = () => {
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnChangePasswordBtnClick(record)}
                             >
-                                修改密码
+                                更改密码
                             </a>
                         </Permission>
                         <Permission operationCode={['system:user:modify:one']}>
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index aa61947..cf8147a 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -1,5 +1,394 @@
+import Icon from '@ant-design/icons'
+import '@/assets/css/pages/user/index.scss'
+import {
+    COLOR_BACKGROUND,
+    COLOR_ERROR,
+    COLOR_PRODUCTION,
+    DATABASE_UPDATE_SUCCESS,
+    PERMISSION_ACCESS_DENIED,
+    PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR
+} from '@/constants/common.constants'
+import { utcToLocalTime } from '@/util/datetime'
+import { getUserInfo, removeToken } from '@/util/auth'
+import { r_sys_user_info_change_password, r_sys_user_info_update } from '@/services/system'
+import { r_api_avatar_random_base64 } from '@/services/api/avatar'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import HideScrollbar from '@/components/common/HideScrollbar'
+
+interface ChangePasswordFields extends UserUpdatePasswordParam {
+    newPasswordConfirm: string
+}
+
 const User = () => {
-    return <></>
+    const [modal, contextHolder] = AntdModal.useModal()
+    const [form] = AntdForm.useForm<UserInfoUpdateParam>()
+    const formValues = AntdForm.useWatch([], form)
+    const [isLoading, setIsLoading] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [isSubmittable, setIsSubmittable] = useState(false)
+    const [isGettingAvatar, setIsGettingAvatar] = useState(false)
+    const [avatar, setAvatar] = useState('')
+    const [userWithPowerInfoVo, setUserWithPowerInfoVo] = useState<UserWithPowerInfoVo>()
+    const [changePasswordForm] = AntdForm.useForm<ChangePasswordFields>()
+
+    const handleOnReset = () => {
+        getProfile()
+    }
+
+    const handleOnSave = () => {
+        if (isSubmitting) {
+            return
+        }
+        setIsSubmitting(true)
+        void message.loading({ content: '保存中', key: 'LOADING', duration: 0 })
+
+        void r_sys_user_info_update({ avatar, nickname: formValues.nickname })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_UPDATE_SUCCESS:
+                        void message.success('保存成功')
+                        getProfile()
+                        break
+                    default:
+                        void message.error('保存失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsSubmitting(false)
+                void message.destroy('LOADING')
+            })
+    }
+
+    const handleOnChangeAvatar = () => {
+        if (isLoading || isGettingAvatar) {
+            return
+        }
+        setIsGettingAvatar(true)
+        void r_api_avatar_random_base64()
+            .then((res) => {
+                const response = res.data
+                if (response.success) {
+                    response.data?.base64 && setAvatar(response.data.base64)
+                }
+            })
+            .finally(() => {
+                setIsGettingAvatar(false)
+            })
+    }
+
+    const handleOnChangePassword = () => {
+        changePasswordForm.resetFields()
+
+        void modal.confirm({
+            icon: <></>,
+            title: (
+                <>
+                    <Icon
+                        style={{ color: COLOR_PRODUCTION, marginRight: 10 }}
+                        component={IconOxygenSetting}
+                    />
+                    修改密码
+                </>
+            ),
+            maskClosable: true,
+            content: (
+                <AntdForm
+                    form={changePasswordForm}
+                    style={{ marginTop: 20 }}
+                    labelCol={{ span: 6 }}
+                    wrapperCol={{ span: 18 }}
+                >
+                    <AntdForm.Item
+                        name={'originalPassword'}
+                        label={'原密码'}
+                        labelAlign={'right'}
+                        rules={[{ required: true, message: '请输入原密码' }]}
+                    >
+                        <AntdInput.Password placeholder={'请输入原密码'} />
+                    </AntdForm.Item>
+                    <AntdForm.Item
+                        name={'newPassword'}
+                        label={'新密码'}
+                        labelAlign={'right'}
+                        rules={[
+                            { required: true, message: '请输入新密码' },
+                            { min: 10, message: '密码至少为10位' },
+                            { max: 30, message: '密码最多为30位' }
+                        ]}
+                    >
+                        <AntdInput.Password placeholder={'请输入新密码'} />
+                    </AntdForm.Item>
+                    <AntdForm.Item
+                        name={'newPasswordConfirm'}
+                        label={'确认密码'}
+                        labelAlign={'right'}
+                        rules={[
+                            { required: true, message: '请确认密码' },
+                            ({ getFieldValue }) => ({
+                                validator(_, value) {
+                                    if (!value || getFieldValue('newPassword') === value) {
+                                        return Promise.resolve()
+                                    }
+                                    return Promise.reject(new Error('两次密码输入必须一致'))
+                                }
+                            })
+                        ]}
+                    >
+                        <AntdInput.Password placeholder={'请确认密码'} />
+                    </AntdForm.Item>
+                </AntdForm>
+            ),
+            onOk: () =>
+                changePasswordForm.validateFields().then(
+                    () => {
+                        return new Promise<void>((resolve, reject) => {
+                            void r_sys_user_info_change_password({
+                                originalPassword: changePasswordForm.getFieldValue(
+                                    'originalPassword'
+                                ) as string,
+                                newPassword: changePasswordForm.getFieldValue(
+                                    'newPassword'
+                                ) as string
+                            }).then((res) => {
+                                const response = res.data
+                                switch (response.code) {
+                                    case DATABASE_UPDATE_SUCCESS:
+                                        void message.success('密码修改成功，请重新登录')
+                                        removeToken()
+                                        notification.info({
+                                            message: '已退出登录',
+                                            icon: (
+                                                <Icon
+                                                    component={IconOxygenExit}
+                                                    style={{ color: COLOR_ERROR }}
+                                                />
+                                            )
+                                        })
+                                        setTimeout(() => {
+                                            window.location.reload()
+                                        }, 1500)
+                                        resolve()
+                                        break
+                                    case PERMISSION_ACCESS_DENIED:
+                                        void message.error('拒绝访问')
+                                        resolve()
+                                        break
+                                    case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
+                                        void message.warning('原密码错误，请重新输入')
+                                        reject(response.msg)
+                                        break
+                                    default:
+                                        void message.error('出错了，请稍后重试')
+                                        resolve()
+                                }
+                            })
+                        })
+                    },
+                    () => {
+                        return new Promise((_, reject) => {
+                            reject('输入有误')
+                        })
+                    }
+                )
+        })
+    }
+
+    const getProfile = () => {
+        if (isLoading) {
+            return
+        }
+        setIsLoading(true)
+
+        void getUserInfo(true)
+            .then((userWithPowerInfoVo) => {
+                setAvatar(userWithPowerInfoVo.userInfo.avatar)
+                form.setFieldValue('nickname', userWithPowerInfoVo.userInfo.nickname)
+                setUserWithPowerInfoVo(userWithPowerInfoVo)
+            })
+            .finally(() => {
+                setIsLoading(false)
+            })
+    }
+
+    useEffect(() => {
+        form.validateFields({ validateOnly: true }).then(
+            () => {
+                setIsSubmittable(true)
+            },
+            () => {
+                setIsSubmittable(false)
+            }
+        )
+    }, [formValues])
+
+    useEffect(() => {
+        getProfile()
+    }, [])
+
+    return (
+        <>
+            <FitFullscreen data-component={'user'}>
+                <HideScrollbar
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={1000}
+                    className={'root-content'}
+                >
+                    <Card>
+                        <FlexBox className={'info'} direction={'horizontal'}>
+                            <AntdTooltip title={'点击获取新头像'}>
+                                <div className={'avatar-box'}>
+                                    <AntdAvatar
+                                        src={
+                                            <img
+                                                src={`data:image/png;base64,${avatar}`}
+                                                alt={'Avatar'}
+                                            />
+                                        }
+                                        size={144}
+                                        style={{
+                                            background: COLOR_BACKGROUND,
+                                            cursor: 'pointer'
+                                        }}
+                                        className={'avatar'}
+                                        onClick={handleOnChangeAvatar}
+                                    />
+                                </div>
+                            </AntdTooltip>
+                            <FlexBox className={'info-name'}>
+                                <div className={'nickname'}>
+                                    {userWithPowerInfoVo?.userInfo.nickname}
+                                </div>
+                                <a
+                                    className={'url'}
+                                    href={
+                                        userWithPowerInfoVo?.username &&
+                                        new URL(
+                                            `/view/${userWithPowerInfoVo.username}`,
+                                            location.href
+                                        ).href
+                                    }
+                                >
+                                    {userWithPowerInfoVo?.username &&
+                                        new URL(
+                                            `/view/${userWithPowerInfoVo.username}`,
+                                            location.href
+                                        ).href}
+                                    <Icon component={IconOxygenShare} />
+                                </a>
+                            </FlexBox>
+                        </FlexBox>
+                        <FlexBox className={'title'}>
+                            <FlexBox direction={'horizontal'} className={'content'}>
+                                <div className={'text'}>档案管理</div>
+                                <FlexBox className={'operation'} direction={'horizontal'}>
+                                    <AntdButton onClick={handleOnReset} loading={isLoading}>
+                                        重置
+                                    </AntdButton>
+                                    <AntdButton
+                                        onClick={handleOnSave}
+                                        type={'primary'}
+                                        disabled={isLoading || !isSubmittable}
+                                    >
+                                        保存
+                                    </AntdButton>
+                                </FlexBox>
+                            </FlexBox>
+                        </FlexBox>
+                        <div className={'divide'} />
+                        <FlexBox className={'profile table'}>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>昵称</div>
+                                <div className={'input'}>
+                                    <AntdForm form={form}>
+                                        <AntdForm.Item
+                                            name={'nickname'}
+                                            rules={[
+                                                { required: true, message: '请输入昵称' },
+                                                { min: 3, message: '昵称至少为3个字符' }
+                                            ]}
+                                            style={{ marginBottom: 0 }}
+                                        >
+                                            <AntdInput
+                                                maxLength={20}
+                                                showCount
+                                                disabled={isLoading}
+                                            />
+                                        </AntdForm.Item>
+                                    </AntdForm>
+                                </div>
+                            </FlexBox>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>用户名</div>
+                                <div className={'input'}>
+                                    <AntdInput disabled value={userWithPowerInfoVo?.username} />
+                                </div>
+                            </FlexBox>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>邮箱</div>
+                                <div className={'input'}>
+                                    <AntdInput
+                                        disabled
+                                        value={userWithPowerInfoVo?.userInfo.email}
+                                    />
+                                </div>
+                            </FlexBox>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>注册时间</div>
+                                <div className={'input'}>
+                                    <AntdInput
+                                        disabled
+                                        value={utcToLocalTime(
+                                            userWithPowerInfoVo?.createTime ?? ''
+                                        )}
+                                    />
+                                </div>
+                            </FlexBox>
+                        </FlexBox>
+                        <div className={'divide'} />
+                        <FlexBox className={'security table'}>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>上次登录 IP</div>
+                                <div className={'input'}>
+                                    <AntdInput disabled value={userWithPowerInfoVo?.lastLoginIp} />
+                                </div>
+                            </FlexBox>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>上次登录时间</div>
+                                <div className={'input'}>
+                                    <AntdInput
+                                        disabled
+                                        value={utcToLocalTime(
+                                            userWithPowerInfoVo?.lastLoginTime ?? ''
+                                        )}
+                                    />
+                                </div>
+                            </FlexBox>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>密码</div>
+                                <div className={'input'}>
+                                    <AntdSpace.Compact>
+                                        <AntdInput disabled value={'********'} />
+                                        <AntdButton
+                                            type={'primary'}
+                                            title={'更改密码'}
+                                            disabled={isLoading}
+                                            onClick={handleOnChangePassword}
+                                        >
+                                            <Icon component={IconOxygenRefresh} />
+                                        </AntdButton>
+                                    </AntdSpace.Compact>
+                                </div>
+                            </FlexBox>
+                        </FlexBox>
+                    </Card>
+                </HideScrollbar>
+            </FitFullscreen>
+            {contextHolder}
+        </>
+    )
 }
 
 export default User
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 616fa42..d5dd6af 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -24,7 +24,13 @@ import {
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
-export const r_sys_user_info = () => request.get<UserWithPowerInfoVo>(URL_SYS_USER_INFO)
+export const r_sys_user_info_get = () => request.get<UserWithPowerInfoVo>(URL_SYS_USER_INFO)
+
+export const r_sys_user_info_update = (param: UserInfoUpdateParam) =>
+    request.patch(URL_SYS_USER_INFO, param)
+
+export const r_sys_user_info_change_password = (param: UserChangePasswordParam) =>
+    request.post(URL_SYS_USER_INFO, param)
 
 export const r_sys_user_get = (param: UserGetParam) =>
     request.get<PageVo<UserWithRoleInfoVo>>(URL_SYS_USER, param)
@@ -33,7 +39,7 @@ export const r_sys_user_add = (param: UserAddEditParam) => request.post(URL_SYS_
 
 export const r_sys_user_update = (param: UserAddEditParam) => request.put(URL_SYS_USER, param)
 
-export const r_sys_user_change_password = (param: UserChangePasswordParam) =>
+export const r_sys_user_change_password = (param: UserUpdatePasswordParam) =>
     request.patch(URL_SYS_USER, param)
 
 export const r_sys_user_delete = (id: string) => request.delete(`${URL_SYS_USER}/${id}`)
diff --git a/src/util/auth.tsx b/src/util/auth.tsx
index 7ec4687..fab8f1c 100644
--- a/src/util/auth.tsx
+++ b/src/util/auth.tsx
@@ -7,7 +7,7 @@ import {
 import { floorNumber, randomColor, randomFloat, randomInt } from '@/util/common'
 import { getLocalStorage, removeLocalStorage, setLocalStorage } from '@/util/browser'
 import { getFullTitle } from '@/util/route'
-import { r_sys_user_info } from '@/services/system'
+import { r_sys_user_info_get } from '@/services/system'
 
 let captcha: Captcha
 
@@ -90,7 +90,7 @@ export const getUserInfo = async (force = false): Promise<UserWithPowerInfoVo> =
 export const requestUserInfo = async () => {
     let user: UserWithPowerInfoVo | null
 
-    await r_sys_user_info().then((value) => {
+    await r_sys_user_info_get().then((value) => {
         const response = value.data
         if (response.code === DATABASE_SELECT_SUCCESS) {
             user = response.data

From 6dce685e7c386652af4d7e13964686194aa3fca7 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 23 Feb 2024 11:05:45 +0800
Subject: [PATCH 231/307] Add developer profile page

---
 src/assets/css/pages/tools/store.scss |   8 +
 src/assets/css/pages/tools/user.scss  | 188 ++++++++++++++++
 src/assets/svg/copy.svg               |   1 +
 src/pages/System/Tools/Execute.tsx    |  14 +-
 src/pages/System/Tools/index.tsx      |  20 +-
 src/pages/Tools/Source.tsx            |   2 +-
 src/pages/Tools/Store.tsx             |  23 +-
 src/pages/Tools/User.tsx              | 295 ++++++++++++++++++++++++++
 src/pages/User/index.tsx              |   4 +-
 src/router/tools.tsx                  |   7 +
 src/services/system.tsx               |   3 +
 src/services/tool.tsx                 |   3 +
 12 files changed, 542 insertions(+), 26 deletions(-)
 create mode 100644 src/assets/css/pages/tools/user.scss
 create mode 100644 src/assets/svg/copy.svg
 create mode 100644 src/pages/Tools/User.tsx

diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.scss
index d1a6d13..2028cec 100644
--- a/src/assets/css/pages/tools/store.scss
+++ b/src/assets/css/pages/tools/store.scss
@@ -132,5 +132,13 @@
         }
       }
     }
+
+    .no-tool {
+      display: flex;
+      justify-content: center;
+      font-size: 1.4em;
+      font-weight: bolder;
+      color: constants.$font-secondary-color;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/assets/css/pages/tools/user.scss b/src/assets/css/pages/tools/user.scss
new file mode 100644
index 0000000..be5635e
--- /dev/null
+++ b/src/assets/css/pages/tools/user.scss
@@ -0,0 +1,188 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=tools-store-user] .root-content {
+  padding: {
+    top: 80px;
+    left: 30px;
+    right: 30px;
+    bottom: 30px;
+  };
+
+  .root-box {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    align-items: center;
+    min-width: 900px;
+    padding-bottom: 20px;
+
+    > .info {
+      margin-left: 40px;
+      transform: translateY(-40px);
+
+      > * {
+        flex: 0 0 auto;
+      }
+
+      .avatar-box {
+        background-color: white;
+        padding: 4px;
+        border-radius: 50%;
+        box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
+
+        .avatar {
+          background-color: transparent !important;
+        }
+      }
+
+      .info-name {
+        margin: {
+          top: 20px;
+          left: 24px;
+        };
+        justify-content: center;
+
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .nickname {
+          font-size: 2.4em;
+          font-weight: bolder;
+          color: constants.$production-color;
+        }
+
+        .url {
+          cursor: pointer;
+
+          > span {
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+
+    .tools {
+      padding: 20px;
+      gap: 20px;
+      flex-wrap: wrap;
+      justify-content: center;
+
+      > .card-box {
+        width: 180px;
+        height: 290px;
+        flex: 0 0 auto;
+        cursor: pointer;
+
+        .common-card {
+          width: 100%;
+          height: 100%;
+          text-align: center;
+          align-items: center;
+
+          > * {
+            display: block;
+            flex: 0 0 auto;
+          }
+
+
+          .icon {
+            display: flex;
+            padding-top: 40px;
+            padding-bottom: 20px;
+            color: constants.$production-color;
+            font-size: constants.$SIZE_ICON_XL;
+            justify-content: center;
+
+            img {
+              width: constants.$SIZE_ICON_XL;
+            }
+          }
+
+          .version {
+            position: absolute;
+            left: 10px;
+            top: 10px;
+          }
+
+          .info {
+            padding-top: 20px;
+
+            .tool-name {
+              font-weight: bolder;
+              font-size: 1.6em;
+            }
+
+            .tool-desc {
+              margin-top: 10px;
+              color: constants.$font-secondary-color;
+            }
+          }
+
+          .author {
+            display: flex;
+            margin-top: auto;
+            flex-direction: row;
+            justify-content: end;
+            padding-bottom: 10px;
+            gap: 10px;
+
+            .avatar {
+              > * {
+                width: 24px;
+                height: 24px;
+              }
+            }
+
+            .author-name {
+              display: flex;
+              align-items: center;
+            }
+          }
+
+          .operation {
+            position: absolute;
+            top: 6px;
+            right: 12px;
+            font-size: 1.6em;
+
+            > *:hover {
+              color: constants.$font-secondary-color;
+            }
+          }
+        }
+
+        .load-more-card {
+          width: 100%;
+          height: 100%;
+          text-align: center;
+          align-items: center;
+
+          .icon {
+            display: flex;
+            font-size: constants.$SIZE_ICON_XXL;
+            color: constants.$production-color;
+            align-items: center;
+            transform: translateY(-20px);
+          }
+
+          .text {
+            position: absolute;
+            top: 60%;
+            font-size: 1.2em;
+            font-weight: bolder;
+          }
+        }
+      }
+
+      .no-tool {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 20px;
+        font-size: 1.2em;
+        font-weight: bolder;
+        color: constants.$font-secondary-color;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/svg/copy.svg b/src/assets/svg/copy.svg
new file mode 100644
index 0000000..0b71764
--- /dev/null
+++ b/src/assets/svg/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M672 832 224 832c-52.928 0-96-43.072-96-96L128 160c0-52.928 43.072-96 96-96l448 0c52.928 0 96 43.072 96 96l0 576C768 788.928 724.928 832 672 832zM224 128C206.368 128 192 142.368 192 160l0 576c0 17.664 14.368 32 32 32l448 0c17.664 0 32-14.336 32-32L704 160c0-17.632-14.336-32-32-32L224 128z" /><path d="M800 960 320 960c-17.664 0-32-14.304-32-32s14.336-32 32-32l480 0c17.664 0 32-14.336 32-32L832 256c0-17.664 14.304-32 32-32s32 14.336 32 32l0 608C896 916.928 852.928 960 800 960z" /><path d="M544 320 288 320c-17.664 0-32-14.336-32-32s14.336-32 32-32l256 0c17.696 0 32 14.336 32 32S561.696 320 544 320z" /><path d="M608 480 288.032 480c-17.664 0-32-14.336-32-32s14.336-32 32-32L608 416c17.696 0 32 14.336 32 32S625.696 480 608 480z" /><path d="M608 640 288 640c-17.664 0-32-14.304-32-32s14.336-32 32-32l320 0c17.696 0 32 14.304 32 32S625.696 640 608 640z" /></svg>
\ No newline at end of file
diff --git a/src/pages/System/Tools/Execute.tsx b/src/pages/System/Tools/Execute.tsx
index 1b13b1b..8099d32 100644
--- a/src/pages/System/Tools/Execute.tsx
+++ b/src/pages/System/Tools/Execute.tsx
@@ -1,12 +1,12 @@
-import FitFullscreen from '@/components/common/FitFullscreen.tsx'
 import '@/assets/css/pages/system/tools/execute.scss'
-import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files.ts'
-import { IImportMap } from '@/components/Playground/shared.ts'
-import compiler from '@/components/Playground/compiler.ts'
-import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
-import { r_sys_tool_get_one } from '@/services/system.tsx'
-import Card from '@/components/common/Card.tsx'
+import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { r_sys_tool_get_one } from '@/services/system'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import Card from '@/components/common/Card'
 import Playground from '@/components/Playground'
+import compiler from '@/components/Playground/compiler'
+import { IImportMap } from '@/components/Playground/shared'
+import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
 
 const Execute = () => {
     const navigate = useNavigate()
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index fc0e123..26b0aa4 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -1,4 +1,5 @@
 import { ChangeEvent, KeyboardEvent } from 'react'
+import Icon from '@ant-design/icons'
 import {
     r_sys_tool_delete,
     r_sys_tool_get,
@@ -15,16 +16,15 @@ import {
     DATABASE_SELECT_SUCCESS,
     DATABASE_UPDATE_SUCCESS,
     TOOL_NOT_UNDER_REVIEW
-} from '@/constants/common.constants.ts'
-import FlexBox from '@/components/common/FlexBox.tsx'
-import Card from '@/components/common/Card.tsx'
-import FitFullscreen from '@/components/common/FitFullscreen.tsx'
-import HideScrollbar from '@/components/common/HideScrollbar.tsx'
-import Icon from '@ant-design/icons'
-import compiler from '@/components/Playground/compiler.ts'
-import { base64ToFiles, IMPORT_MAP_FILE_NAME, strToBase64 } from '@/components/Playground/files.ts'
-import { IImportMap } from '@/components/Playground/shared.ts'
-import Permission from '@/components/common/Permission.tsx'
+} from '@/constants/common.constants'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import compiler from '@/components/Playground/compiler'
+import { IImportMap } from '@/components/Playground/shared'
+import { base64ToFiles, IMPORT_MAP_FILE_NAME, strToBase64 } from '@/components/Playground/files'
+import Permission from '@/components/common/Permission'
 
 const Tools = () => {
     const navigate = useNavigate()
diff --git a/src/pages/Tools/Source.tsx b/src/pages/Tools/Source.tsx
index 399bf51..0c79b7b 100644
--- a/src/pages/Tools/Source.tsx
+++ b/src/pages/Tools/Source.tsx
@@ -6,7 +6,7 @@ import { base64ToFiles } from '@/components/Playground/files'
 import Playground from '@/components/Playground'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Card from '@/components/common/Card'
-import { getLoginStatus } from '@/util/auth.tsx'
+import { getLoginStatus } from '@/util/auth'
 
 const Source = () => {
     const navigate = useNavigate()
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index 5f330df..5de53ab 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode, UIEvent, useState } from 'react'
+import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode, UIEvent } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/store.scss'
@@ -56,6 +56,11 @@ const CommonCard = ({
         url && navigate(url)
     }
 
+    const handleOnClickAuthor = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigate(authorUsername)
+    }
+
     const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         navigate(`/source/${authorUsername}/${toolId}`)
@@ -78,12 +83,12 @@ const CommonCard = ({
                     <div className={'tool-id'}>{`ID: ${toolId}`}</div>
                     {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
                 </div>
-                <div className={'author'}>
+                <div className={'author'} onClick={handleOnClickAuthor}>
                     <div className={'avatar'}>
                         <AntdAvatar
                             src={
                                 <AntdImage
-                                    preview={{ mask: <Icon component={IconOxygenEye}></Icon> }}
+                                    preview={false}
                                     src={`data:image/png;base64,${authorAvatar}`}
                                     alt={'Avatar'}
                                 />
@@ -139,11 +144,13 @@ const Store = () => {
     const scrollTopRef = useRef(0)
     const [isLoading, setIsLoading] = useState(false)
     const [currentPage, setCurrentPage] = useState(0)
-    const [hasNextPage, setHasNextPage] = useState(true)
+    const [hasNextPage, setHasNextPage] = useState(false)
     const [toolData, setToolData] = useState<ToolVo[]>([])
     const [hideSearch, setHideSearch] = useState(false)
+    const [searchValue, setSearchValue] = useState('')
 
     const handleOnSearch = (value: string) => {
+        setSearchValue(value)
         getTool(1, value)
     }
 
@@ -160,7 +167,7 @@ const Store = () => {
         if (isLoading) {
             return
         }
-        getTool(currentPage + 1, '')
+        getTool(currentPage + 1, searchValue)
     }
 
     const getTool = (page: number, searchValue: string) => {
@@ -177,7 +184,10 @@ const Store = () => {
                 switch (response.code) {
                     case DATABASE_SELECT_SUCCESS:
                         setCurrentPage(response.data!.current)
-                        if (response.data!.current === response.data!.pages) {
+                        if (
+                            response.data!.current === response.data!.pages ||
+                            response.data!.total === 0
+                        ) {
                             setHasNextPage(false)
                         } else {
                             setHasNextPage(true)
@@ -220,6 +230,7 @@ const Store = () => {
                         />
                     </div>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
+                        {!toolData.length && <div className={'no-tool'}>未找到任何工具</div>}
                         {toolData?.map((value) => (
                             <CommonCard
                                 key={value.id}
diff --git a/src/pages/Tools/User.tsx b/src/pages/Tools/User.tsx
new file mode 100644
index 0000000..d12569e
--- /dev/null
+++ b/src/pages/Tools/User.tsx
@@ -0,0 +1,295 @@
+import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } from 'react'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import Icon from '@ant-design/icons'
+import '@/assets/css/pages/tools/user.scss'
+import {
+    COLOR_BACKGROUND,
+    DATABASE_NO_RECORD_FOUND,
+    DATABASE_SELECT_SUCCESS
+} from '@/constants/common.constants'
+import { r_sys_user_info_get_basic } from '@/services/system'
+import { r_tool_store_get_by_username } from '@/services/tool'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import HideScrollbar from '@/components/common/HideScrollbar'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+
+interface CommonCardProps
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: ReactNode
+    toolName: string
+    toolId: string
+    toolDesc: string
+    options?: TiltOptions
+    url: string
+    authorUsername: string
+    ver: string
+}
+
+const CommonCard = ({
+    style,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref,
+    icon,
+    toolName,
+    toolId,
+    toolDesc,
+    options = {
+        reverse: true,
+        max: 8,
+        glare: true,
+        ['max-glare']: 0.3,
+        scale: 1.03
+    },
+    url,
+    authorUsername,
+    ver,
+    ...props
+}: CommonCardProps) => {
+    const navigate = useNavigate()
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current && VanillaTilt.init(cardRef.current, options)
+    }, [options])
+
+    const handleCardOnClick = () => {
+        url && navigate(url)
+    }
+
+    const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigate(`/source/${authorUsername}/${toolId}`)
+    }
+
+    return (
+        <Card
+            style={{ overflow: 'visible', ...style }}
+            ref={cardRef}
+            {...props}
+            onClick={handleCardOnClick}
+        >
+            <FlexBox className={'common-card'}>
+                <div className={'icon'}>{icon}</div>
+                <div className={'version'}>
+                    <AntdTag>V{ver}</AntdTag>
+                </div>
+                <div className={'info'}>
+                    <div className={'tool-name'}>{toolName}</div>
+                    <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                    {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
+                </div>
+                <div className={'operation'}>
+                    <AntdTooltip title={'源码'}>
+                        <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
+                    </AntdTooltip>
+                </div>
+            </FlexBox>
+        </Card>
+    )
+}
+
+interface LoadMoreCardProps {
+    onClick: () => void
+}
+
+const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current &&
+            VanillaTilt.init(cardRef.current, {
+                reverse: true,
+                max: 8,
+                glare: true,
+                ['max-glare']: 0.3,
+                scale: 1.03
+            })
+    }, [])
+
+    return (
+        <Card style={{ overflow: 'visible' }} ref={cardRef} onClick={onClick}>
+            <FlexBox className={'load-more-card'}>
+                <div className={'icon'}>
+                    <Icon component={IconOxygenMore} />{' '}
+                </div>
+                <div className={'text'}>加载更多</div>
+            </FlexBox>
+        </Card>
+    )
+}
+
+const User = () => {
+    const { username } = useParams()
+    const navigate = useNavigate()
+    const [isLoading, setIsLoading] = useState(false)
+    const [userWithInfoVo, setUserWithInfoVo] = useState<UserWithInfoVo>()
+    const [isLoadingTools, setIsLoadingTools] = useState(false)
+    const [currentPage, setCurrentPage] = useState(0)
+    const [hasNextPage, setHasNextPage] = useState(false)
+    const [toolData, setToolData] = useState<ToolVo[]>([])
+
+    const handleOnCopyToClipboard = (username?: string) => {
+        return username
+            ? () => {
+                  void navigator.clipboard
+                      .writeText(new URL(`/store/${username}`, location.href).href)
+                      .then(() => {
+                          void message.success('已复制到剪切板')
+                      })
+              }
+            : undefined
+    }
+
+    const getProfile = () => {
+        if (isLoading) {
+            return
+        }
+        setIsLoading(true)
+        void message.loading({ content: '加载中', key: 'LOADING', duration: 0 })
+
+        void r_sys_user_info_get_basic(username!)
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setUserWithInfoVo(response.data!)
+                        getTool(1)
+                        break
+                    case DATABASE_NO_RECORD_FOUND:
+                        void message.warning('用户不存在')
+                        setTimeout(() => {
+                            navigate(-1)
+                        }, 3000)
+                        break
+                    default:
+                        void message.error('获取失败请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoading(false)
+                void message.destroy('LOADING')
+            })
+    }
+
+    const handleOnLoadMore = () => {
+        if (isLoading) {
+            return
+        }
+        getTool(currentPage + 1)
+    }
+
+    const getTool = (page: number) => {
+        if (isLoadingTools) {
+            return
+        }
+        setIsLoadingTools(true)
+        void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
+
+        void r_tool_store_get_by_username(username!, { currentPage: page })
+            .then((res) => {
+                const response = res.data
+
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setCurrentPage(response.data!.current)
+                        if (
+                            response.data!.current === response.data!.pages ||
+                            response.data!.total === 0
+                        ) {
+                            setHasNextPage(false)
+                        } else {
+                            setHasNextPage(true)
+                        }
+                        if (response.data!.current === 1) {
+                            setToolData(response.data!.records)
+                        } else {
+                            setToolData([...toolData, ...response.data!.records])
+                        }
+                        break
+                    default:
+                        void message.error('加载失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsLoadingTools(false)
+                message.destroy('LOADING')
+            })
+    }
+
+    useEffect(() => {
+        getProfile()
+    }, [])
+
+    return (
+        <>
+            <FitFullscreen data-component={'tools-store-user'}>
+                <HideScrollbar
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={1000}
+                    className={'root-content'}
+                >
+                    <Card className={'root-box'}>
+                        <FlexBox className={'info'} direction={'horizontal'}>
+                            <div className={'avatar-box'}>
+                                <AntdAvatar
+                                    src={
+                                        <img
+                                            src={`data:image/png;base64,${userWithInfoVo?.userInfo.avatar}`}
+                                            alt={'Avatar'}
+                                        />
+                                    }
+                                    size={144}
+                                    style={{
+                                        background: COLOR_BACKGROUND,
+                                        cursor: 'pointer'
+                                    }}
+                                    className={'avatar'}
+                                />
+                            </div>
+                            <FlexBox className={'info-name'}>
+                                <div className={'nickname'}>
+                                    {userWithInfoVo?.userInfo.nickname}
+                                </div>
+                                <a
+                                    className={'url'}
+                                    onClick={handleOnCopyToClipboard(userWithInfoVo?.username)}
+                                >
+                                    {userWithInfoVo?.username &&
+                                        new URL(`/store/${userWithInfoVo.username}`, location.href)
+                                            .href}
+                                    <Icon component={IconOxygenCopy} />
+                                </a>
+                            </FlexBox>
+                        </FlexBox>
+                        <FlexBox direction={'horizontal'} className={'tools'}>
+                            {!toolData.length && (
+                                <div className={'no-tool'}>该开发者暂未发布任何工具</div>
+                            )}
+                            {toolData?.map((value) => (
+                                <CommonCard
+                                    key={value.id}
+                                    icon={
+                                        <img
+                                            src={`data:image/svg+xml;base64,${value.icon}`}
+                                            alt={'Icon'}
+                                        />
+                                    }
+                                    toolName={value.name}
+                                    toolId={value.toolId}
+                                    toolDesc={value.description}
+                                    url={`/view/${value.author.username}/${value.toolId}`}
+                                    authorUsername={value.author.username}
+                                    ver={value.ver}
+                                />
+                            ))}
+                            {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
+                        </FlexBox>
+                    </Card>
+                </HideScrollbar>
+            </FitFullscreen>
+        </>
+    )
+}
+
+export default User
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index cf8147a..7af2d92 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -266,14 +266,14 @@ const User = () => {
                                     href={
                                         userWithPowerInfoVo?.username &&
                                         new URL(
-                                            `/view/${userWithPowerInfoVo.username}`,
+                                            `/store/${userWithPowerInfoVo.username}`,
                                             location.href
                                         ).href
                                     }
                                 >
                                     {userWithPowerInfoVo?.username &&
                                         new URL(
-                                            `/view/${userWithPowerInfoVo.username}`,
+                                            `/store/${userWithPowerInfoVo.username}`,
                                             location.href
                                         ).href}
                                     <Icon component={IconOxygenShare} />
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 5eb2764..12ef973 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -19,6 +19,13 @@ export const tools: RouteJsonObject[] = [
         icon: lazy(() => import('~icons/oxygen/store')),
         menu: true
     },
+    {
+        path: 'store/:username',
+        absolutePath: '/store',
+        id: 'tools-view-user',
+        component: lazy(() => import('@/pages/Tools/User')),
+        name: '开发者'
+    },
     {
         path: 'create',
         absolutePath: '/create',
diff --git a/src/services/system.tsx b/src/services/system.tsx
index d5dd6af..0047416 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -26,6 +26,9 @@ import request from '@/services/index'
 
 export const r_sys_user_info_get = () => request.get<UserWithPowerInfoVo>(URL_SYS_USER_INFO)
 
+export const r_sys_user_info_get_basic = (username: string) =>
+    request.get<UserWithInfoVo>(`${URL_SYS_USER_INFO}/${username}`)
+
 export const r_sys_user_info_update = (param: UserInfoUpdateParam) =>
     request.patch(URL_SYS_USER_INFO, param)
 
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
index 601ec56..1bb8f18 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.tsx
@@ -33,3 +33,6 @@ export const r_tool_delete = (id: string) => request.delete(`${URL_TOOL}/${id}`)
 
 export const r_tool_store_get = (param: ToolStoreGetParam) =>
     request.get<PageVo<ToolVo>>(URL_TOOL_STORE, param)
+
+export const r_tool_store_get_by_username = (username: string, param: ToolStoreGetParam) =>
+    request.get<PageVo<ToolVo>>(`${URL_TOOL_STORE}/${username}`, param)

From 935a1a223ac10b732a2e0c77423a5607bb4680b6 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 1 Mar 2024 15:33:30 +0800
Subject: [PATCH 232/307] Add two-factor

---
 src/assets/svg/lock.svg                 |   1 +
 src/assets/svg/safe.svg                 |   1 +
 src/assets/svg/unlock.svg               |   1 +
 src/constants/common.constants.ts       |   4 +
 src/constants/urls.constants.ts         |   2 +
 src/global.d.ts                         |  26 +++
 src/pages/Sign/SignIn.tsx               |  70 +++++++-
 src/pages/System/Settings/TwoFactor.tsx |  73 +++++++++
 src/pages/System/Settings/index.tsx     |   4 +
 src/pages/User/index.tsx                | 203 +++++++++++++++++++++++-
 src/services/auth.tsx                   |   9 ++
 src/services/system.tsx                 |   9 +-
 12 files changed, 399 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/svg/lock.svg
 create mode 100644 src/assets/svg/safe.svg
 create mode 100644 src/assets/svg/unlock.svg
 create mode 100644 src/pages/System/Settings/TwoFactor.tsx

diff --git a/src/assets/svg/lock.svg b/src/assets/svg/lock.svg
new file mode 100644
index 0000000..54890e2
--- /dev/null
+++ b/src/assets/svg/lock.svg
@@ -0,0 +1 @@
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 725.333333c46.933333 0 85.333333-38.4 85.333333-85.333333s-38.4-85.333333-85.333333-85.333333-85.333333 38.4-85.333333 85.333333 38.4 85.333333 85.333333 85.333333z m256-384h-42.666667v-85.333333c0-117.76-95.573333-213.333333-213.333333-213.333333S298.666667 138.24 298.666667 256v85.333333h-42.666667c-46.933333 0-85.333333 38.4-85.333333 85.333334v426.666666c0 46.933333 38.4 85.333333 85.333333 85.333334h512c46.933333 0 85.333333-38.4 85.333333-85.333334V426.666667c0-46.933333-38.4-85.333333-85.333333-85.333334z m-388.266667-85.333333c0-72.96 59.306667-132.266667 132.266667-132.266667s132.266667 59.306667 132.266667 132.266667v85.333333H379.733333v-85.333333zM768 853.333333H256V426.666667h512v426.666666z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/safe.svg b/src/assets/svg/safe.svg
new file mode 100644
index 0000000..5f19ab9
--- /dev/null
+++ b/src/assets/svg/safe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 78.869333l21.162667 12.096c69.717333 39.829333 150.677333 65.344 215.466666 80.874667 32.149333 7.722667 59.776 12.864 79.274667 16.064a824.981333 824.981333 0 0 0 28.437333 4.16l1.386667 0.170667 0.32 0.021333L896 196.48v361.728l-0.576 3.477333L853.333333 554.666667c42.090667 7.018667 42.069333 7.04 42.069334 7.061333v0.064l-0.021334 0.106667-0.064 0.32-0.170666 0.917333-0.554667 2.922667c-0.490667 2.410667-1.216 5.76-2.218667 9.898666-2.026667 8.277333-5.226667 19.861333-10.005333 33.856a495.445333 495.445333 0 0 1-51.797333 106.666667c-52.736 82.112-146.069333 174.869333-306.773334 221.098667l-11.797333 3.413333-11.797333-3.413333c-160.704-46.229333-254.037333-138.986667-306.773334-221.12a495.573333 495.573333 0 0 1-51.797333-106.645334 394.709333 394.709333 0 0 1-10.005333-33.856 262.250667 262.250667 0 0 1-2.773334-12.8l-0.192-0.938666-0.042666-0.32-0.021334-0.106667v-0.064c0-0.021333 0-0.042667 42.069334-7.061333l-42.090667 7.018666L128 558.208V196.48l37.952-4.224 0.32-0.021333 1.386667-0.170667 5.824-0.768c5.184-0.704 12.864-1.813333 22.613333-3.413333 19.498667-3.2 47.146667-8.32 79.274667-16.042667 64.768-15.530667 145.749333-41.045333 215.466666-80.874667L512 78.869333z m-298.666667 192.661334v278.976a310.4 310.4 0 0 0 9.045334 31.701333c7.765333 22.72 21.056 54.186667 42.858666 88.149333 42.026667 65.408 116.16 141.013333 246.762667 181.696 130.602667-40.661333 204.757333-116.288 246.762667-181.696a410.304 410.304 0 0 0 42.88-88.149333A309.76 309.76 0 0 0 810.666667 550.506667V271.530667c-20.906667-3.477333-49.28-8.853333-81.962667-16.704C666.154667 239.786667 586.026667 215.338667 512 176.618667c-74.026667 38.72-154.176 63.189333-216.704 78.208-32.704 7.850667-61.077333 13.226667-81.962667 16.704z m517.098667 146.154666L486.933333 661.184 328.746667 503.04l60.352-60.330667 97.834666 97.813334 183.146667-183.146667 60.352 60.330667z" /></svg>
\ No newline at end of file
diff --git a/src/assets/svg/unlock.svg b/src/assets/svg/unlock.svg
new file mode 100644
index 0000000..6f740bb
--- /dev/null
+++ b/src/assets/svg/unlock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 725.333333c47.146667 0 85.333333-38.186667 85.333333-85.333333s-38.186667-85.333333-85.333333-85.333333-85.333333 38.186667-85.333333 85.333333 38.186667 85.333333 85.333333 85.333333z m256-384h-42.666667v-85.333333c0-117.76-95.573333-213.333333-213.333333-213.333333S298.666667 138.24 298.666667 256h81.066666c0-72.96 59.306667-132.266667 132.266667-132.266667 72.96 0 132.266667 59.306667 132.266667 132.266667v85.333333H256c-47.146667 0-85.333333 38.186667-85.333333 85.333334v426.666666c0 47.146667 38.186667 85.333333 85.333333 85.333334h512c47.146667 0 85.333333-38.186667 85.333333-85.333334V426.666667c0-47.146667-38.186667-85.333333-85.333333-85.333334z m0 512H256V426.666667h512v426.666666z" /></svg>
\ No newline at end of file
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 29052c6..6a4a6fe 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -61,6 +61,10 @@ export const PERMISSION_ACCOUNT_NEED_INIT = 20064
 export const PERMISSION_USER_NOT_FOUND = 20065
 export const PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED = 20066
 export const PERMISSION_ACCOUNT_NEED_RESET_PASSWORD = 20067
+export const PERMISSION_NEED_TWO_FACTOR = 20068
+export const PERMISSION_ALREADY_HAS_TWO_FACTOR = 20069
+export const PERMISSION_NO_TWO_FACTOR_FOUND = 20070
+export const PERMISSION_TWO_FACTOR_VERIFICATION_CODE_ERROR = 20071
 
 export const DATABASE_SELECT_SUCCESS = 30000
 export const DATABASE_SELECT_FAILED = 30005
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index ae9b637..615dab8 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -6,6 +6,7 @@ export const URL_RETRIEVE = '/retrieve'
 export const URL_LOGIN = '/login'
 export const URL_TOKEN = '/token'
 export const URL_LOGOUT = '/logout'
+export const URL_TWO_FACTOR = '/two-factor'
 export const URL_SYS_LOG = '/system/log'
 export const URL_SYS_USER_INFO = '/system/user/info'
 export const URL_SYS_USER = '/system/user'
@@ -18,6 +19,7 @@ export const URL_SYS_SETTINGS = '/system/settings'
 export const URL_SYS_SETTINGS_BASE = `${URL_SYS_SETTINGS}/base`
 export const URL_SYS_SETTINGS_MAIL = `${URL_SYS_SETTINGS}/mail`
 export const URL_SYS_SETTINGS_SENSITIVE = `${URL_SYS_SETTINGS}/sensitive`
+export const URL_SYS_SETTINGS_TWO_FACTOR = `${URL_SYS_SETTINGS}/two-factor`
 export const URL_SYS_STATISTICS = '/system/statistics'
 export const URL_SYS_STATISTICS_SOFTWARE = `${URL_SYS_STATISTICS}/software`
 export const URL_SYS_STATISTICS_HARDWARE = `${URL_SYS_STATISTICS}/hardware`
diff --git a/src/global.d.ts b/src/global.d.ts
index 8562706..be92e36 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -92,6 +92,7 @@ interface LoginParam {
     account: string
     password: string
     captchaCode: string
+    twoFactorCode?: string
 }
 
 interface UserChangePasswordParam {
@@ -99,9 +100,18 @@ interface UserChangePasswordParam {
     newPassword: string
 }
 
+interface TwoFactorValidateParam {
+    code: string
+}
+
+interface TwoFactorRemoveParam {
+    code: string
+}
+
 interface UserWithInfoVo {
     id: string
     username: string
+    twoFactor: boolean
     verified: boolean
     locking: boolean
     expiration: string
@@ -119,6 +129,7 @@ interface UserWithInfoVo {
 interface UserWithPowerInfoVo {
     id: string
     username: string
+    twoFactor: boolean
     verified: boolean
     locking: boolean
     expiration: string
@@ -140,6 +151,7 @@ interface UserWithPowerInfoVo {
 interface UserWithRoleInfoVo {
     id: string
     username: string
+    twoFactor: boolean
     verify: string
     locking: boolean
     expiration: string
@@ -164,6 +176,10 @@ interface UserInfoVo {
     email: string
 }
 
+interface TwoFactorVo {
+    qrCodeSVGBase64: string
+}
+
 interface ModuleVo {
     id: number
     name: string
@@ -402,6 +418,16 @@ interface SensitiveWordUpdateParam {
     ids: string[]
 }
 
+interface TwoFactorSettingsVo {
+    issuer: string
+    secretKeyLength: number
+}
+
+interface TwoFactorSettingsParam {
+    issuer: string
+    secretKeyLength: number
+}
+
 interface SoftwareInfoVo {
     os: string
     bitness: number
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index 11d86f0..5e7dfa3 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -4,6 +4,8 @@ import {
     H_CAPTCHA_SITE_KEY,
     PERMISSION_LOGIN_SUCCESS,
     PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
+    PERMISSION_NEED_TWO_FACTOR,
+    PERMISSION_TWO_FACTOR_VERIFICATION_CODE_ERROR,
     PERMISSION_USER_DISABLE,
     PERMISSION_USERNAME_NOT_FOUND,
     SYSTEM_INVALID_CAPTCHA_CODE
@@ -16,6 +18,7 @@ import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
 
 const SignIn = () => {
+    const [modal, contextHolder] = AntdModal.useModal()
     const { refreshRouter } = useContext(AppContext)
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
@@ -29,6 +32,7 @@ const SignIn = () => {
         },
         [location.pathname]
     )
+    const [twoFactorForm] = AntdForm.useForm<{ twoFactorCode: string }>()
     const [isSigningIn, setIsSigningIn] = useState(false)
     const [captchaCode, setCaptchaCode] = useState('')
 
@@ -55,7 +59,8 @@ const SignIn = () => {
         void r_auth_login({
             account: loginParam.account,
             password: loginParam.password,
-            captchaCode
+            captchaCode,
+            twoFactorCode: loginParam.twoFactorCode
         })
             .then((res) => {
                 const response = res.data
@@ -96,6 +101,56 @@ const SignIn = () => {
                             })
                         }, 1500)
                         break
+                    case PERMISSION_NEED_TWO_FACTOR:
+                        twoFactorForm.resetFields()
+                        void modal.confirm({
+                            title: '双因素验证',
+                            getContainer: false,
+                            centered: true,
+                            content: (
+                                <>
+                                    <AntdForm form={twoFactorForm}>
+                                        <AntdForm.Item
+                                            name={'twoFactorCode'}
+                                            label={'验证码'}
+                                            style={{ marginTop: 10 }}
+                                            rules={[{ required: true, len: 6 }]}
+                                        >
+                                            <AntdInput
+                                                showCount
+                                                maxLength={6}
+                                                ref={(input) => {
+                                                    input?.focus()
+                                                }}
+                                            />
+                                        </AntdForm.Item>
+                                    </AntdForm>
+                                </>
+                            ),
+                            onOk: () =>
+                                twoFactorForm.validateFields().then(
+                                    () => {
+                                        return new Promise<void>((resolve) => {
+                                            handleOnFinish({
+                                                ...loginParam,
+                                                twoFactorCode: twoFactorForm.getFieldValue(
+                                                    'twoFactorCode'
+                                                ) as string
+                                            })
+                                            resolve()
+                                        })
+                                    },
+                                    () => {
+                                        return new Promise((_, reject) => {
+                                            reject('输入有误')
+                                        })
+                                    }
+                                ),
+                            onCancel: () => {
+                                setIsSigningIn(false)
+                            }
+                        })
+                        break
                     case PERMISSION_USERNAME_NOT_FOUND:
                     case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
                         void message.error(
@@ -105,6 +160,10 @@ const SignIn = () => {
                         )
                         setIsSigningIn(false)
                         break
+                    case PERMISSION_TWO_FACTOR_VERIFICATION_CODE_ERROR:
+                        void message.error('双因素验证码错误')
+                        setIsSigningIn(false)
+                        break
                     case PERMISSION_USER_DISABLE:
                         void message.error(
                             <>
@@ -170,7 +229,13 @@ const SignIn = () => {
                             />
                         </AntdForm.Item>
                         <FlexBox direction={'horizontal'} className={'addition'}>
-                            <AntdCheckbox disabled={isSigningIn}>记住密码</AntdCheckbox>
+                            <a
+                                onClick={() => {
+                                    navigate('/')
+                                }}
+                            >
+                                返回首页
+                            </a>
                             <a
                                 onClick={() => {
                                     navigate(`/forget${location.search}`, { replace: true })
@@ -203,6 +268,7 @@ const SignIn = () => {
                     </AntdForm>
                 </FlexBox>
             </FitCenter>
+            {contextHolder}
         </div>
     )
 }
diff --git a/src/pages/System/Settings/TwoFactor.tsx b/src/pages/System/Settings/TwoFactor.tsx
new file mode 100644
index 0000000..a94e8fc
--- /dev/null
+++ b/src/pages/System/Settings/TwoFactor.tsx
@@ -0,0 +1,73 @@
+import { hasPermission } from '@/util/auth'
+import { r_sys_settings_two_factor_get, r_sys_settings_two_factor_update } from '@/services/system'
+import { SettingsCard } from '@/pages/System/Settings'
+
+const TwoFactor = () => {
+    const [twoFactorForm] = AntdForm.useForm<TwoFactorSettingsParam>()
+    const twoFactorFormValues = AntdForm.useWatch([], twoFactorForm)
+    const [loading, setLoading] = useState(false)
+
+    const handleOnReset = () => {
+        getTwoFactorSettings()
+    }
+
+    const handleOnSave = () => {
+        void r_sys_settings_two_factor_update(twoFactorFormValues).then((res) => {
+            const response = res.data
+            if (response.success) {
+                void message.success('保存设置成功')
+                getTwoFactorSettings()
+            } else {
+                void message.error('保存设置失败，请稍后重试')
+            }
+        })
+    }
+
+    const getTwoFactorSettings = () => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+
+        void r_sys_settings_two_factor_get().then((res) => {
+            const response = res.data
+            if (response.success) {
+                const data = response.data
+                data && twoFactorForm.setFieldsValue(data)
+                setLoading(false)
+            }
+        })
+    }
+
+    useEffect(() => {
+        getTwoFactorSettings()
+    }, [])
+
+    return (
+        <>
+            <SettingsCard
+                icon={IconOxygenSafe}
+                title={'双因素'}
+                loading={loading}
+                onReset={handleOnReset}
+                onSave={handleOnSave}
+                modifyOperationCode={['system:settings:modify:two-factor']}
+            >
+                <AntdForm
+                    form={twoFactorForm}
+                    labelCol={{ flex: '7em' }}
+                    disabled={!hasPermission('system:settings:modify:two-factor')}
+                >
+                    <AntdForm.Item label={'提供者'} name={'issuer'}>
+                        <AntdInput />
+                    </AntdForm.Item>
+                    <AntdForm.Item label={'密钥长度'} name={'secretKeyLength'}>
+                        <AntdInputNumber min={3} max={64} style={{ width: '100%' }} />
+                    </AntdForm.Item>
+                </AntdForm>
+            </SettingsCard>
+        </>
+    )
+}
+
+export default TwoFactor
diff --git a/src/pages/System/Settings/index.tsx b/src/pages/System/Settings/index.tsx
index ac2d4c6..94cba62 100644
--- a/src/pages/System/Settings/index.tsx
+++ b/src/pages/System/Settings/index.tsx
@@ -10,6 +10,7 @@ import Permission from '@/components/common/Permission'
 import Base from '@/pages/System/Settings/Base'
 import Mail from '@/pages/System/Settings/Mail'
 import SensitiveWord from '@/pages/System/Settings/SensitiveWord'
+import TwoFactor from '@/pages/System/Settings/TwoFactor.tsx'
 
 interface SettingsCardProps extends PropsWithChildren {
     icon: IconComponent
@@ -68,6 +69,9 @@ const Settings = () => {
                             <Permission operationCode={['system:settings:query:mail']}>
                                 <Mail />
                             </Permission>
+                            <Permission operationCode={['system:settings:query:two-factor']}>
+                                <TwoFactor />
+                            </Permission>
                         </FlexBox>
                     </FlexBox>
                 </HideScrollbar>
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index 7af2d92..61ae9c6 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -11,6 +11,11 @@ import {
 import { utcToLocalTime } from '@/util/datetime'
 import { getUserInfo, removeToken } from '@/util/auth'
 import { r_sys_user_info_change_password, r_sys_user_info_update } from '@/services/system'
+import {
+    r_auth_two_factor_create,
+    r_auth_two_factor_remove,
+    r_auth_two_factor_validate
+} from '@/services/auth'
 import { r_api_avatar_random_base64 } from '@/services/api/avatar'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Card from '@/components/common/Card'
@@ -25,6 +30,7 @@ const User = () => {
     const [modal, contextHolder] = AntdModal.useModal()
     const [form] = AntdForm.useForm<UserInfoUpdateParam>()
     const formValues = AntdForm.useWatch([], form)
+    const [twoFactorForm] = AntdForm.useForm<{ twoFactorCode: string }>()
     const [isLoading, setIsLoading] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [isSubmittable, setIsSubmittable] = useState(false)
@@ -93,6 +99,8 @@ const User = () => {
                     修改密码
                 </>
             ),
+            getContainer: false,
+            centered: true,
             maskClosable: true,
             content: (
                 <AntdForm
@@ -107,7 +115,12 @@ const User = () => {
                         labelAlign={'right'}
                         rules={[{ required: true, message: '请输入原密码' }]}
                     >
-                        <AntdInput.Password placeholder={'请输入原密码'} />
+                        <AntdInput.Password
+                            placeholder={'请输入原密码'}
+                            ref={(input) => {
+                                input?.focus()
+                            }}
+                        />
                     </AntdForm.Item>
                     <AntdForm.Item
                         name={'newPassword'}
@@ -196,6 +209,160 @@ const User = () => {
         })
     }
 
+    const handleOnChangeTwoFactor = (enable: boolean) => {
+        return () => {
+            twoFactorForm.resetFields()
+            if (enable) {
+                void modal.confirm({
+                    title: '双因素',
+                    centered: true,
+                    maskClosable: true,
+                    content: '确定解除双因素？',
+                    onOk: () => {
+                        void modal.confirm({
+                            title: '解除双因素',
+                            getContainer: false,
+                            centered: true,
+                            maskClosable: true,
+                            content: (
+                                <>
+                                    <AntdForm form={twoFactorForm}>
+                                        <AntdForm.Item
+                                            name={'twoFactorCode'}
+                                            label={'验证码'}
+                                            style={{ marginTop: 10 }}
+                                            rules={[{ required: true, len: 6 }]}
+                                        >
+                                            <AntdInput
+                                                showCount
+                                                maxLength={6}
+                                                ref={(input) => {
+                                                    input?.focus()
+                                                }}
+                                            />
+                                        </AntdForm.Item>
+                                    </AntdForm>
+                                </>
+                            ),
+                            onOk: () =>
+                                twoFactorForm.validateFields().then(
+                                    () => {
+                                        return new Promise<void>((resolve) => {
+                                            void r_auth_two_factor_remove({
+                                                code: twoFactorForm.getFieldValue(
+                                                    'twoFactorCode'
+                                                ) as string
+                                            })
+                                                .then((res) => {
+                                                    const response = res.data
+                                                    if (response.success) {
+                                                        void message.success('解绑成功')
+                                                        getProfile()
+                                                    } else {
+                                                        void message.error('解绑失败，请稍后重试')
+                                                    }
+                                                })
+                                                .finally(() => {
+                                                    resolve()
+                                                })
+                                        })
+                                    },
+                                    () => {
+                                        return new Promise((_, reject) => {
+                                            reject('输入有误')
+                                        })
+                                    }
+                                )
+                        })
+                    }
+                })
+            } else {
+                if (isLoading) {
+                    return
+                }
+                setIsLoading(true)
+                void message.loading({ content: '加载中', key: 'LOADING', duration: 0 })
+                void r_auth_two_factor_create()
+                    .then((res) => {
+                        message.destroy('LOADING')
+                        const response = res.data
+                        if (response.success) {
+                            void modal.confirm({
+                                title: '绑定双因素',
+                                getContainer: false,
+                                centered: true,
+                                maskClosable: true,
+                                content: (
+                                    <>
+                                        <AntdImage
+                                            src={`data:image/svg+xml;base64,${response.data?.qrCodeSVGBase64}`}
+                                            alt={'Two-factor'}
+                                            preview={false}
+                                        />
+                                        <AntdForm form={twoFactorForm}>
+                                            <AntdForm.Item
+                                                name={'twoFactorCode'}
+                                                label={'验证码'}
+                                                style={{ marginTop: 10, marginRight: 30 }}
+                                                rules={[{ required: true, len: 6 }]}
+                                            >
+                                                <AntdInput
+                                                    showCount
+                                                    maxLength={6}
+                                                    ref={(input) => {
+                                                        input?.focus()
+                                                    }}
+                                                />
+                                            </AntdForm.Item>
+                                        </AntdForm>
+                                    </>
+                                ),
+                                onOk: () =>
+                                    twoFactorForm.validateFields().then(
+                                        () => {
+                                            return new Promise<void>((resolve) => {
+                                                void r_auth_two_factor_validate({
+                                                    code: twoFactorForm.getFieldValue(
+                                                        'twoFactorCode'
+                                                    ) as string
+                                                })
+                                                    .then((res) => {
+                                                        const response = res.data
+                                                        if (response.success) {
+                                                            void message.success('绑定成功')
+                                                            getProfile()
+                                                        } else {
+                                                            void message.error(
+                                                                '绑定失败，请稍后重试'
+                                                            )
+                                                        }
+                                                    })
+                                                    .finally(() => {
+                                                        resolve()
+                                                    })
+                                            })
+                                        },
+                                        () => {
+                                            return new Promise((_, reject) => {
+                                                reject('输入有误')
+                                            })
+                                        }
+                                    )
+                            })
+                        } else {
+                            void message.error('获取双因素绑定二维码失败，请稍后重试')
+                        }
+                    })
+                    .catch(() => {
+                        message.destroy('LOADING')
+                    })
+                    .finally(() => {
+                        setIsLoading(false)
+                    })
+            }
+        }
+    }
+
     const getProfile = () => {
         if (isLoading) {
             return
@@ -382,6 +549,40 @@ const User = () => {
                                     </AntdSpace.Compact>
                                 </div>
                             </FlexBox>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>双因素</div>
+                                <div className={'input'}>
+                                    <AntdSpace.Compact>
+                                        <AntdInput
+                                            disabled
+                                            style={{
+                                                color: userWithPowerInfoVo?.twoFactor
+                                                    ? COLOR_PRODUCTION
+                                                    : undefined
+                                            }}
+                                            value={
+                                                userWithPowerInfoVo?.twoFactor ? '已设置' : '未设置'
+                                            }
+                                        />
+                                        <AntdButton
+                                            type={'primary'}
+                                            title={userWithPowerInfoVo?.twoFactor ? '解绑' : '绑定'}
+                                            disabled={isLoading}
+                                            onClick={handleOnChangeTwoFactor(
+                                                userWithPowerInfoVo?.twoFactor ?? false
+                                            )}
+                                        >
+                                            <Icon
+                                                component={
+                                                    userWithPowerInfoVo?.twoFactor
+                                                        ? IconOxygenUnlock
+                                                        : IconOxygenLock
+                                                }
+                                            />
+                                        </AntdButton>
+                                    </AntdSpace.Compact>
+                                </div>
+                            </FlexBox>
                         </FlexBox>
                     </Card>
                 </HideScrollbar>
diff --git a/src/services/auth.tsx b/src/services/auth.tsx
index c470526..f3f080b 100644
--- a/src/services/auth.tsx
+++ b/src/services/auth.tsx
@@ -5,6 +5,7 @@ import {
     URL_REGISTER,
     URL_RESEND,
     URL_RETRIEVE,
+    URL_TWO_FACTOR,
     URL_VERIFY
 } from '@/constants/urls.constants'
 import request from '@/services'
@@ -21,4 +22,12 @@ export const r_auth_retrieve = (param: RetrieveParam) => request.post(URL_RETRIE
 
 export const r_auth_login = (param: LoginParam) => request.post<TokenVo>(URL_LOGIN, param)
 
+export const r_auth_two_factor_create = () => request.get<TwoFactorVo>(URL_TWO_FACTOR)
+
+export const r_auth_two_factor_validate = (param: TwoFactorValidateParam) =>
+    request.post(URL_TWO_FACTOR, param)
+
+export const r_auth_two_factor_remove = (param: TwoFactorRemoveParam) =>
+    request.delete(URL_TWO_FACTOR, param)
+
 export const r_auth_logout = () => request.post(URL_LOGOUT)
diff --git a/src/services/system.tsx b/src/services/system.tsx
index 0047416..c64bef0 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -20,7 +20,8 @@ import {
     URL_SYS_TOOL_CATEGORY,
     URL_SYS_TOOL_BASE,
     URL_SYS_TOOL_TEMPLATE,
-    URL_SYS_TOOL
+    URL_SYS_TOOL,
+    URL_SYS_SETTINGS_TWO_FACTOR
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -111,6 +112,12 @@ export const r_sys_settings_sensitive_update = (param: SensitiveWordUpdateParam)
 export const r_sys_settings_sensitive_delete = (id: string) =>
     request.delete(`${URL_SYS_SETTINGS_SENSITIVE}/${id}`)
 
+export const r_sys_settings_two_factor_get = () =>
+    request.get<TwoFactorSettingsVo>(URL_SYS_SETTINGS_TWO_FACTOR)
+
+export const r_sys_settings_two_factor_update = (param: TwoFactorSettingsParam) =>
+    request.put(URL_SYS_SETTINGS_TWO_FACTOR, param)
+
 export const r_sys_statistics_software = () =>
     request.get<SoftwareInfoVo>(URL_SYS_STATISTICS_SOFTWARE)
 

From fb94ae6a52ac4b1cf34e7aedbd7bb6fe15cfe0d7 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 1 Mar 2024 15:34:01 +0800
Subject: [PATCH 233/307] Optimize code

---
 src/pages/System/Settings/Base.tsx  |  2 +-
 src/pages/System/Settings/Mail.tsx  | 10 ++++++++--
 src/pages/System/Tools/Base.tsx     | 17 +++++++++++++++--
 src/pages/System/Tools/Template.tsx | 16 ++++++++++++++--
 src/pages/System/Tools/index.tsx    |  1 +
 src/pages/System/User.tsx           |  8 +++++++-
 src/pages/Tools/index.tsx           | 11 ++++++++++-
 7 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/src/pages/System/Settings/Base.tsx b/src/pages/System/Settings/Base.tsx
index 969e215..aa473c6 100644
--- a/src/pages/System/Settings/Base.tsx
+++ b/src/pages/System/Settings/Base.tsx
@@ -46,7 +46,7 @@ const Base = () => {
     return (
         <>
             <SettingsCard
-                icon={IconOxygenEmail}
+                icon={IconOxygenBase}
                 title={'基础'}
                 loading={loading}
                 onReset={handleOnReset}
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index da1e02a..f2bd212 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -17,6 +17,8 @@ const Mail = () => {
     const handleOnTest = () => {
         void modal.confirm({
             title: '发送测试邮件',
+            getContainer: false,
+            centered: true,
             maskClosable: true,
             content: (
                 <>
@@ -27,7 +29,11 @@ const Mail = () => {
                             style={{ marginTop: 10 }}
                             rules={[{ required: true, type: 'email' }]}
                         >
-                            <AntdInput />
+                            <AntdInput
+                                ref={(input) => {
+                                    input?.focus()
+                                }}
+                            />
                         </AntdForm.Item>
                     </AntdForm>
                     <AntdTag style={{ whiteSpace: 'normal' }}>
@@ -56,7 +62,7 @@ const Mail = () => {
                     },
                     () => {
                         return new Promise((_, reject) => {
-                            reject('未输入接收者')
+                            reject('输入有误')
                         })
                     }
                 )
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index e57891e..6e7a566 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -232,6 +232,7 @@ const Base = () => {
                     compileForm.setFieldValue('entryFileName', undefined)
                     void modal.confirm({
                         title: '编译',
+                        centered: true,
                         maskClosable: true,
                         content: (
                             <>
@@ -537,6 +538,8 @@ const Base = () => {
         const handleOnAddFile = () => {
             void modal.confirm({
                 title: '新建文件',
+                getContainer: false,
+                centered: true,
                 maskClosable: true,
                 content: (
                     <AntdForm form={addFileForm}>
@@ -565,7 +568,11 @@ const Base = () => {
                                 })
                             ]}
                         >
-                            <AntdInput />
+                            <AntdInput
+                                ref={(input) => {
+                                    input?.focus()
+                                }}
+                            />
                         </AntdForm.Item>
                     </AntdForm>
                 ),
@@ -714,6 +721,8 @@ const Base = () => {
                 renameFileForm.setFieldValue('fileName', fileName)
                 void modal.confirm({
                     title: '重命名文件',
+                    getContainer: false,
+                    centered: true,
                     maskClosable: true,
                     content: (
                         <AntdForm form={renameFileForm}>
@@ -745,7 +754,11 @@ const Base = () => {
                                     })
                                 ]}
                             >
-                                <AntdInput />
+                                <AntdInput
+                                    ref={(input) => {
+                                        input?.focus()
+                                    }}
+                                />
                             </AntdForm.Item>
                         </AntdForm>
                     ),
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index f6985ac..330f9a8 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -399,6 +399,8 @@ const Template = () => {
         const handleOnAddFile = () => {
             void modal.confirm({
                 title: '新建文件',
+                getContainer: false,
+                centered: true,
                 maskClosable: true,
                 content: (
                     <AntdForm form={addFileForm}>
@@ -427,7 +429,11 @@ const Template = () => {
                                 })
                             ]}
                         >
-                            <AntdInput />
+                            <AntdInput
+                                ref={(input) => {
+                                    input?.focus()
+                                }}
+                            />
                         </AntdForm.Item>
                     </AntdForm>
                 ),
@@ -579,6 +585,8 @@ const Template = () => {
                 renameFileForm.setFieldValue('fileName', fileName)
                 void modal.confirm({
                     title: '重命名文件',
+                    getContainer: false,
+                    centered: true,
                     maskClosable: true,
                     content: (
                         <AntdForm form={renameFileForm}>
@@ -610,7 +618,11 @@ const Template = () => {
                                     })
                                 ]}
                             >
-                                <AntdInput />
+                                <AntdInput
+                                    ref={(input) => {
+                                        input?.focus()
+                                    }}
+                                />
                             </AntdForm.Item>
                         </AntdForm>
                     ),
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 26b0aa4..8eef2d1 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -195,6 +195,7 @@ const Tools = () => {
             form.setFieldValue('pass', undefined)
             void modal.confirm({
                 title: '审核',
+                centered: true,
                 maskClosable: true,
                 content: (
                     <AntdForm form={form}>
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index d4a4ea2..3b18a2b 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -336,6 +336,8 @@ const User = () => {
                         修改用户 {value.username} 的密码
                     </>
                 ),
+                getContainer: false,
+                centered: true,
                 maskClosable: true,
                 content: (
                     <AntdForm
@@ -356,7 +358,11 @@ const User = () => {
                                 }
                             ]}
                         >
-                            <AntdInput.Password />
+                            <AntdInput.Password
+                                ref={(input) => {
+                                    input?.focus()
+                                }}
+                            />
                         </AntdForm.Item>
                         <AntdForm.Item
                             name={'passwordConfirm'}
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index d7b3a39..d3b930c 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -262,6 +262,8 @@ const Tools = () => {
     const handleOnUpgradeTool = (tool: ToolVo) => {
         void modal.confirm({
             title: '更新工具',
+            getContainer: false,
+            centered: true,
             maskClosable: true,
             content: (
                 <>
@@ -285,7 +287,14 @@ const Tools = () => {
                                 }
                             ]}
                         >
-                            <AntdInput maxLength={10} showCount placeholder={'请输入版本'} />
+                            <AntdInput
+                                maxLength={10}
+                                showCount
+                                placeholder={'请输入版本'}
+                                ref={(input) => {
+                                    input?.focus()
+                                }}
+                            />
                         </AntdForm.Item>
                     </AntdForm>
                 </>

From 3b11b262b9da874c5b89123e94e53fff6a1a53f9 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 1 Mar 2024 16:35:49 +0800
Subject: [PATCH 234/307] Fix modal can not focus second input bug

---
 src/pages/Sign/SignIn.tsx           | 24 ++++++----
 src/pages/System/Settings/Mail.tsx  | 22 ++++++---
 src/pages/System/Tools/Base.tsx     | 50 +++++++++++++------
 src/pages/System/Tools/Template.tsx | 44 +++++++++++------
 src/pages/System/Tools/index.tsx    |  6 +++
 src/pages/System/User.tsx           | 18 ++++---
 src/pages/Tools/index.tsx           | 25 ++++++----
 src/pages/User/index.tsx            | 74 +++++++++++++++++++----------
 8 files changed, 178 insertions(+), 85 deletions(-)

diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index 5e7dfa3..31da7b3 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -105,24 +105,30 @@ const SignIn = () => {
                         twoFactorForm.resetFields()
                         void modal.confirm({
                             title: '双因素验证',
-                            getContainer: false,
                             centered: true,
+                            footer: (_, { OkBtn, CancelBtn }) => (
+                                <>
+                                    <OkBtn />
+                                    <CancelBtn />
+                                </>
+                            ),
                             content: (
                                 <>
-                                    <AntdForm form={twoFactorForm}>
+                                    <AntdForm
+                                        form={twoFactorForm}
+                                        ref={(ref) => {
+                                            setTimeout(() => {
+                                                ref?.getFieldInstance('twoFactorCode').focus()
+                                            }, 50)
+                                        }}
+                                    >
                                         <AntdForm.Item
                                             name={'twoFactorCode'}
                                             label={'验证码'}
                                             style={{ marginTop: 10 }}
                                             rules={[{ required: true, len: 6 }]}
                                         >
-                                            <AntdInput
-                                                showCount
-                                                maxLength={6}
-                                                ref={(input) => {
-                                                    input?.focus()
-                                                }}
-                                            />
+                                            <AntdInput showCount maxLength={6} />
                                         </AntdForm.Item>
                                     </AntdForm>
                                 </>
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index f2bd212..898581e 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -17,23 +17,31 @@ const Mail = () => {
     const handleOnTest = () => {
         void modal.confirm({
             title: '发送测试邮件',
-            getContainer: false,
             centered: true,
             maskClosable: true,
+            footer: (_, { OkBtn, CancelBtn }) => (
+                <>
+                    <OkBtn />
+                    <CancelBtn />
+                </>
+            ),
             content: (
                 <>
-                    <AntdForm form={mailSendForm}>
+                    <AntdForm
+                        form={mailSendForm}
+                        ref={(ref) => {
+                            setTimeout(() => {
+                                ref?.getFieldInstance('to').focus()
+                            }, 50)
+                        }}
+                    >
                         <AntdForm.Item
                             name={'to'}
                             label={'接收人'}
                             style={{ marginTop: 10 }}
                             rules={[{ required: true, type: 'email' }]}
                         >
-                            <AntdInput
-                                ref={(input) => {
-                                    input?.focus()
-                                }}
-                            />
+                            <AntdInput />
                         </AntdForm.Item>
                     </AntdForm>
                     <AntdTag style={{ whiteSpace: 'normal' }}>
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index 6e7a566..ac97229 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -234,6 +234,12 @@ const Base = () => {
                         title: '编译',
                         centered: true,
                         maskClosable: true,
+                        footer: (_, { OkBtn, CancelBtn }) => (
+                            <>
+                                <OkBtn />
+                                <CancelBtn />
+                            </>
+                        ),
                         content: (
                             <>
                                 <AntdForm form={compileForm}>
@@ -538,11 +544,23 @@ const Base = () => {
         const handleOnAddFile = () => {
             void modal.confirm({
                 title: '新建文件',
-                getContainer: false,
                 centered: true,
                 maskClosable: true,
+                footer: (_, { OkBtn, CancelBtn }) => (
+                    <>
+                        <OkBtn />
+                        <CancelBtn />
+                    </>
+                ),
                 content: (
-                    <AntdForm form={addFileForm}>
+                    <AntdForm
+                        form={addFileForm}
+                        ref={(ref) => {
+                            setTimeout(() => {
+                                ref?.getFieldInstance('fileName').focus()
+                            }, 50)
+                        }}
+                    >
                         <AntdForm.Item
                             name={'fileName'}
                             label={'文件名'}
@@ -568,11 +586,7 @@ const Base = () => {
                                 })
                             ]}
                         >
-                            <AntdInput
-                                ref={(input) => {
-                                    input?.focus()
-                                }}
-                            />
+                            <AntdInput />
                         </AntdForm.Item>
                     </AntdForm>
                 ),
@@ -721,11 +735,23 @@ const Base = () => {
                 renameFileForm.setFieldValue('fileName', fileName)
                 void modal.confirm({
                     title: '重命名文件',
-                    getContainer: false,
                     centered: true,
                     maskClosable: true,
+                    footer: (_, { OkBtn, CancelBtn }) => (
+                        <>
+                            <OkBtn />
+                            <CancelBtn />
+                        </>
+                    ),
                     content: (
-                        <AntdForm form={renameFileForm}>
+                        <AntdForm
+                            form={renameFileForm}
+                            ref={(ref) => {
+                                setTimeout(() => {
+                                    ref?.getFieldInstance('fileName').focus()
+                                }, 50)
+                            }}
+                        >
                             <AntdForm.Item
                                 name={'fileName'}
                                 label={'新文件名'}
@@ -754,11 +780,7 @@ const Base = () => {
                                     })
                                 ]}
                             >
-                                <AntdInput
-                                    ref={(input) => {
-                                        input?.focus()
-                                    }}
-                                />
+                                <AntdInput />
                             </AntdForm.Item>
                         </AntdForm>
                     ),
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index 330f9a8..c7c5e55 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -399,11 +399,23 @@ const Template = () => {
         const handleOnAddFile = () => {
             void modal.confirm({
                 title: '新建文件',
-                getContainer: false,
                 centered: true,
                 maskClosable: true,
+                footer: (_, { OkBtn, CancelBtn }) => (
+                    <>
+                        <OkBtn />
+                        <CancelBtn />
+                    </>
+                ),
                 content: (
-                    <AntdForm form={addFileForm}>
+                    <AntdForm
+                        form={addFileForm}
+                        ref={(ref) => {
+                            setTimeout(() => {
+                                ref?.getFieldInstance('fileName').focus()
+                            }, 50)
+                        }}
+                    >
                         <AntdForm.Item
                             name={'fileName'}
                             label={'文件名'}
@@ -429,11 +441,7 @@ const Template = () => {
                                 })
                             ]}
                         >
-                            <AntdInput
-                                ref={(input) => {
-                                    input?.focus()
-                                }}
-                            />
+                            <AntdInput />
                         </AntdForm.Item>
                     </AntdForm>
                 ),
@@ -585,11 +593,23 @@ const Template = () => {
                 renameFileForm.setFieldValue('fileName', fileName)
                 void modal.confirm({
                     title: '重命名文件',
-                    getContainer: false,
                     centered: true,
                     maskClosable: true,
+                    footer: (_, { OkBtn, CancelBtn }) => (
+                        <>
+                            <OkBtn />
+                            <CancelBtn />
+                        </>
+                    ),
                     content: (
-                        <AntdForm form={renameFileForm}>
+                        <AntdForm
+                            form={renameFileForm}
+                            ref={(ref) => {
+                                setTimeout(() => {
+                                    ref?.getFieldInstance('fileName').focus()
+                                }, 50)
+                            }}
+                        >
                             <AntdForm.Item
                                 name={'fileName'}
                                 label={'新文件名'}
@@ -618,11 +638,7 @@ const Template = () => {
                                     })
                                 ]}
                             >
-                                <AntdInput
-                                    ref={(input) => {
-                                        input?.focus()
-                                    }}
-                                />
+                                <AntdInput />
                             </AntdForm.Item>
                         </AntdForm>
                     ),
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 8eef2d1..40d5004 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -197,6 +197,12 @@ const Tools = () => {
                 title: '审核',
                 centered: true,
                 maskClosable: true,
+                footer: (_, { OkBtn, CancelBtn }) => (
+                    <>
+                        <OkBtn />
+                        <CancelBtn />
+                    </>
+                ),
                 content: (
                     <AntdForm form={form}>
                         <AntdForm.Item
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 3b18a2b..02b5c02 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -336,15 +336,25 @@ const User = () => {
                         修改用户 {value.username} 的密码
                     </>
                 ),
-                getContainer: false,
                 centered: true,
                 maskClosable: true,
+                footer: (_, { OkBtn, CancelBtn }) => (
+                    <>
+                        <OkBtn />
+                        <CancelBtn />
+                    </>
+                ),
                 content: (
                     <AntdForm
                         form={changePasswordForm}
                         style={{ marginTop: 20 }}
                         labelCol={{ span: 6 }}
                         wrapperCol={{ span: 18 }}
+                        ref={(ref) => {
+                            setTimeout(() => {
+                                ref?.getFieldInstance('password').focus()
+                            }, 50)
+                        }}
                     >
                         <AntdForm.Item name={'id'} label={'ID'} labelAlign={'right'}>
                             <AntdInput disabled />
@@ -358,11 +368,7 @@ const User = () => {
                                 }
                             ]}
                         >
-                            <AntdInput.Password
-                                ref={(input) => {
-                                    input?.focus()
-                                }}
-                            />
+                            <AntdInput.Password />
                         </AntdForm.Item>
                         <AntdForm.Item
                             name={'passwordConfirm'}
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index d3b930c..7b6ab08 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -262,12 +262,24 @@ const Tools = () => {
     const handleOnUpgradeTool = (tool: ToolVo) => {
         void modal.confirm({
             title: '更新工具',
-            getContainer: false,
             centered: true,
             maskClosable: true,
+            footer: (_, { OkBtn, CancelBtn }) => (
+                <>
+                    <OkBtn />
+                    <CancelBtn />
+                </>
+            ),
             content: (
                 <>
-                    <AntdForm form={upgradeForm}>
+                    <AntdForm
+                        form={upgradeForm}
+                        ref={(ref) => {
+                            setTimeout(() => {
+                                ref?.getFieldInstance('toolId').focus()
+                            }, 50)
+                        }}
+                    >
                         <AntdForm.Item
                             initialValue={tool.toolId}
                             name={'toolId'}
@@ -287,14 +299,7 @@ const Tools = () => {
                                 }
                             ]}
                         >
-                            <AntdInput
-                                maxLength={10}
-                                showCount
-                                placeholder={'请输入版本'}
-                                ref={(input) => {
-                                    input?.focus()
-                                }}
-                            />
+                            <AntdInput maxLength={10} showCount placeholder={'请输入版本'} />
                         </AntdForm.Item>
                     </AntdForm>
                 </>
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index 61ae9c6..249247f 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -99,15 +99,25 @@ const User = () => {
                     修改密码
                 </>
             ),
-            getContainer: false,
             centered: true,
             maskClosable: true,
+            footer: (_, { OkBtn, CancelBtn }) => (
+                <>
+                    <OkBtn />
+                    <CancelBtn />
+                </>
+            ),
             content: (
                 <AntdForm
                     form={changePasswordForm}
                     style={{ marginTop: 20 }}
                     labelCol={{ span: 6 }}
                     wrapperCol={{ span: 18 }}
+                    ref={(ref) => {
+                        setTimeout(() => {
+                            ref?.getFieldInstance('originalPassword').focus()
+                        }, 50)
+                    }}
                 >
                     <AntdForm.Item
                         name={'originalPassword'}
@@ -115,12 +125,7 @@ const User = () => {
                         labelAlign={'right'}
                         rules={[{ required: true, message: '请输入原密码' }]}
                     >
-                        <AntdInput.Password
-                            placeholder={'请输入原密码'}
-                            ref={(input) => {
-                                input?.focus()
-                            }}
-                        />
+                        <AntdInput.Password placeholder={'请输入原密码'} />
                     </AntdForm.Item>
                     <AntdForm.Item
                         name={'newPassword'}
@@ -217,29 +222,42 @@ const User = () => {
                     title: '双因素',
                     centered: true,
                     maskClosable: true,
+                    focusTriggerAfterClose: false,
+                    footer: (_, { OkBtn, CancelBtn }) => (
+                        <>
+                            <OkBtn />
+                            <CancelBtn />
+                        </>
+                    ),
                     content: '确定解除双因素？',
                     onOk: () => {
                         void modal.confirm({
                             title: '解除双因素',
-                            getContainer: false,
                             centered: true,
                             maskClosable: true,
+                            footer: (_, { OkBtn, CancelBtn }) => (
+                                <>
+                                    <OkBtn />
+                                    <CancelBtn />
+                                </>
+                            ),
                             content: (
                                 <>
-                                    <AntdForm form={twoFactorForm}>
+                                    <AntdForm
+                                        form={twoFactorForm}
+                                        ref={(ref) => {
+                                            setTimeout(() => {
+                                                ref?.getFieldInstance('twoFactorCode').focus()
+                                            }, 50)
+                                        }}
+                                    >
                                         <AntdForm.Item
                                             name={'twoFactorCode'}
                                             label={'验证码'}
                                             style={{ marginTop: 10 }}
                                             rules={[{ required: true, len: 6 }]}
                                         >
-                                            <AntdInput
-                                                showCount
-                                                maxLength={6}
-                                                ref={(input) => {
-                                                    input?.focus()
-                                                }}
-                                            />
+                                            <AntdInput showCount maxLength={6} />
                                         </AntdForm.Item>
                                     </AntdForm>
                                 </>
@@ -289,9 +307,14 @@ const User = () => {
                         if (response.success) {
                             void modal.confirm({
                                 title: '绑定双因素',
-                                getContainer: false,
                                 centered: true,
                                 maskClosable: true,
+                                footer: (_, { OkBtn, CancelBtn }) => (
+                                    <>
+                                        <OkBtn />
+                                        <CancelBtn />
+                                    </>
+                                ),
                                 content: (
                                     <>
                                         <AntdImage
@@ -299,20 +322,21 @@ const User = () => {
                                             alt={'Two-factor'}
                                             preview={false}
                                         />
-                                        <AntdForm form={twoFactorForm}>
+                                        <AntdForm
+                                            form={twoFactorForm}
+                                            ref={(ref) => {
+                                                setTimeout(() => {
+                                                    ref?.getFieldInstance('twoFactorCode').focus()
+                                                }, 50)
+                                            }}
+                                        >
                                             <AntdForm.Item
                                                 name={'twoFactorCode'}
                                                 label={'验证码'}
                                                 style={{ marginTop: 10, marginRight: 30 }}
                                                 rules={[{ required: true, len: 6 }]}
                                             >
-                                                <AntdInput
-                                                    showCount
-                                                    maxLength={6}
-                                                    ref={(input) => {
-                                                        input?.focus()
-                                                    }}
-                                                />
+                                                <AntdInput showCount maxLength={6} />
                                             </AntdForm.Item>
                                         </AntdForm>
                                     </>

From c67b7b911a4ae3f2b907f0532b7ecce2fe0e8a14 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 1 Mar 2024 17:50:34 +0800
Subject: [PATCH 235/307] Optimize Turnstile load

---
 package-lock.json                             |  8 +++---
 package.json                                  |  2 +-
 src/assets/css/pages/sign.scss                |  5 ++++
 .../Playground/Output/Transform/index.tsx     |  2 +-
 src/pages/Sign/Forget.tsx                     | 25 +++++++++++++++++--
 src/pages/Sign/SignIn.tsx                     | 13 +++++++++-
 src/pages/Sign/SignUp.tsx                     | 13 +++++++++-
 7 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4a95697..0b2e579 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
-        "@marsidev/react-turnstile": "^0.4.1",
+        "@marsidev/react-turnstile": "^0.5.3",
         "@monaco-editor/react": "^4.6.0",
         "@typescript/ata": "^0.9.4",
         "antd": "^5.13.2",
@@ -1240,9 +1240,9 @@
       }
     },
     "node_modules/@marsidev/react-turnstile": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmmirror.com/@marsidev/react-turnstile/-/react-turnstile-0.4.1.tgz",
-      "integrity": "sha512-uZusUW9mPr0csWpls8bApe5iuRK0YK7H1PCKqfM4djW3OA9GB9rU68irjk7xRO8qlHyj0aDTeVu9tTLPExBO4Q==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.5.3.tgz",
+      "integrity": "sha512-lx3p2/56esPt8Ksr37K8uhPt/K4Mg8xaIfCV8MPKmE/1X4aHesRqZok1+L1ySQwsdWoEe5+KJOhBXka8lFBwNg==",
       "peerDependencies": {
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
diff --git a/package.json b/package.json
index c96b4e2..510e405 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@marsidev/react-turnstile": "^0.4.1",
+    "@marsidev/react-turnstile": "^0.5.3",
     "@monaco-editor/react": "^4.6.0",
     "@typescript/ata": "^0.9.4",
     "antd": "^5.13.2",
diff --git a/src/assets/css/pages/sign.scss b/src/assets/css/pages/sign.scss
index ad54058..96ffe38 100644
--- a/src/assets/css/pages/sign.scss
+++ b/src/assets/css/pages/sign.scss
@@ -85,6 +85,11 @@
       }
 
       .sign-up, .sign-in, .forget {
+        .loading-turnstile {
+          display: flex;
+          justify-content: center;
+        }
+
         .footer {
           a {
             font-weight: bolder;
diff --git a/src/components/Playground/Output/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx
index 51cd0f5..849a44a 100644
--- a/src/components/Playground/Output/Transform/index.tsx
+++ b/src/components/Playground/Output/Transform/index.tsx
@@ -53,7 +53,7 @@ const Transform = ({ file, theme }: OutputProps) => {
                         setCompiledCode(code)
                 }
             } catch (e) {
-                console.log(e)
+                console.error(e)
                 setCompiledCode('')
             }
         } else {
diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx
index 06a0b58..63d7121 100644
--- a/src/pages/Sign/Forget.tsx
+++ b/src/pages/Sign/Forget.tsx
@@ -6,6 +6,7 @@ import {
     PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED,
     PERMISSION_RETRIEVE_SUCCESS,
     PERMISSION_USER_NOT_FOUND,
+    SIZE_ICON_MD,
     SYSTEM_INVALID_CAPTCHA_CODE
 } from '@/constants/common.constants'
 import { r_auth_forget, r_auth_retrieve } from '@/services/auth'
@@ -160,11 +161,21 @@ const Forget = () => {
                                             />
                                         </AntdForm.Item>
                                         <AntdForm.Item>
+                                            {!turnstileRef.current && (
+                                                <div className={'loading-turnstile'}>
+                                                    <Icon
+                                                        component={IconOxygenLoading}
+                                                        style={{ fontSize: SIZE_ICON_MD }}
+                                                        spin
+                                                    />
+                                                </div>
+                                            )}
                                             <Turnstile
                                                 id={'forget-turnstile'}
                                                 ref={turnstileRefCallback}
                                                 siteKey={H_CAPTCHA_SITE_KEY}
-                                                options={{ theme: 'light', execution: 'execute' }}
+                                                hidden={!turnstileRef.current}
+                                                options={{ theme: 'light' }}
                                                 onSuccess={setCaptchaCode}
                                             />
                                         </AntdForm.Item>
@@ -232,11 +243,21 @@ const Forget = () => {
                                         />
                                     </AntdForm.Item>
                                     <AntdForm.Item>
+                                        {!turnstileRef.current && (
+                                            <div className={'loading-turnstile'}>
+                                                <Icon
+                                                    component={IconOxygenLoading}
+                                                    style={{ fontSize: SIZE_ICON_MD }}
+                                                    spin
+                                                />
+                                            </div>
+                                        )}
                                         <Turnstile
                                             id={'retrieve-turnstile'}
                                             ref={retrieveTurnstileRefCallback}
                                             siteKey={H_CAPTCHA_SITE_KEY}
-                                            options={{ theme: 'light', execution: 'execute' }}
+                                            hidden={!turnstileRef.current}
+                                            options={{ theme: 'light' }}
                                             onSuccess={setRetrieveCaptchaCode}
                                         />
                                     </AntdForm.Item>
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index 31da7b3..854886e 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -8,6 +8,7 @@ import {
     PERMISSION_TWO_FACTOR_VERIFICATION_CODE_ERROR,
     PERMISSION_USER_DISABLE,
     PERMISSION_USERNAME_NOT_FOUND,
+    SIZE_ICON_MD,
     SYSTEM_INVALID_CAPTCHA_CODE
 } from '@/constants/common.constants'
 import { getUserInfo, setToken } from '@/util/auth'
@@ -226,11 +227,21 @@ const SignIn = () => {
                             />
                         </AntdForm.Item>
                         <AntdForm.Item>
+                            {!turnstileRef.current && (
+                                <div className={'loading-turnstile'}>
+                                    <Icon
+                                        component={IconOxygenLoading}
+                                        style={{ fontSize: SIZE_ICON_MD }}
+                                        spin
+                                    />
+                                </div>
+                            )}
                             <Turnstile
                                 id={'sign-in-turnstile'}
                                 ref={turnstileRefCallback}
                                 siteKey={H_CAPTCHA_SITE_KEY}
-                                options={{ theme: 'light', execution: 'execute' }}
+                                hidden={!turnstileRef.current}
+                                options={{ theme: 'light' }}
                                 onSuccess={setCaptchaCode}
                             />
                         </AntdForm.Item>
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx
index 9827d1e..23ce21b 100644
--- a/src/pages/Sign/SignUp.tsx
+++ b/src/pages/Sign/SignUp.tsx
@@ -4,6 +4,7 @@ import {
     DATABASE_DUPLICATE_KEY,
     H_CAPTCHA_SITE_KEY,
     PERMISSION_REGISTER_SUCCESS,
+    SIZE_ICON_MD,
     SYSTEM_INVALID_CAPTCHA_CODE,
     SYSTEM_MATCH_SENSITIVE_WORD
 } from '@/constants/common.constants'
@@ -200,11 +201,21 @@ const SignUp = () => {
                                     />
                                 </AntdForm.Item>
                                 <AntdForm.Item>
+                                    {!turnstileRef.current && (
+                                        <div className={'loading-turnstile'}>
+                                            <Icon
+                                                component={IconOxygenLoading}
+                                                style={{ fontSize: SIZE_ICON_MD }}
+                                                spin
+                                            />
+                                        </div>
+                                    )}
                                     <Turnstile
                                         id={'sign-up-turnstile'}
                                         ref={turnstileRefCallback}
                                         siteKey={H_CAPTCHA_SITE_KEY}
-                                        options={{ theme: 'light', execution: 'execute' }}
+                                        hidden={!turnstileRef.current}
+                                        options={{ theme: 'light' }}
                                         onSuccess={setCaptchaCode}
                                     />
                                 </AntdForm.Item>

From 841475b3054471566f9130ca1a314fd5c9a0fca1 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 4 Mar 2024 10:49:24 +0800
Subject: [PATCH 236/307] Fix: verify email page - error hint

---
 src/pages/Sign/Verify.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx
index be3ef19..26efe94 100644
--- a/src/pages/Sign/Verify.tsx
+++ b/src/pages/Sign/Verify.tsx
@@ -2,6 +2,7 @@ import {
     COLOR_BACKGROUND,
     PERMISSION_ACCOUNT_NEED_INIT,
     PERMISSION_NO_VERIFICATION_REQUIRED,
+    PERMISSION_RESEND_SUCCESS,
     PERMISSION_VERIFY_SUCCESS,
     SYSTEM_MATCH_SENSITIVE_WORD
 } from '@/constants/common.constants'
@@ -74,10 +75,16 @@ const Verify = () => {
         void r_auth_resend()
             .then((res) => {
                 const response = res.data
-                if (response.success) {
-                    void message.success('已发送验证邮件，请查收')
-                } else {
-                    void message.error('出错了，请稍后重试')
+                switch (response.code) {
+                    case PERMISSION_RESEND_SUCCESS:
+                        void message.success('已发送验证邮件，请查收')
+                        break
+                    case PERMISSION_NO_VERIFICATION_REQUIRED:
+                        void message.warning('账户已验证')
+                        navigate('/')
+                        break
+                    default:
+                        void message.error('出错了，请稍后重试')
                 }
             })
             .finally(() => {

From db28fba694148952d65d0dfada96ed5000dcc485 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 4 Mar 2024 14:48:04 +0800
Subject: [PATCH 237/307] Fix: sign page - turnstile on every page load at the
 same time

---
 src/assets/css/pages/sign.scss |  5 ---
 src/pages/Sign/Forget.tsx      | 79 +++++++++++++++-------------------
 src/pages/Sign/SignIn.tsx      | 44 +++++++++----------
 src/pages/Sign/SignUp.tsx      | 45 ++++++++++---------
 4 files changed, 78 insertions(+), 95 deletions(-)

diff --git a/src/assets/css/pages/sign.scss b/src/assets/css/pages/sign.scss
index 96ffe38..ad54058 100644
--- a/src/assets/css/pages/sign.scss
+++ b/src/assets/css/pages/sign.scss
@@ -85,11 +85,6 @@
       }
 
       .sign-up, .sign-in, .forget {
-        .loading-turnstile {
-          display: flex;
-          justify-content: center;
-        }
-
         .footer {
           a {
             font-weight: bolder;
diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx
index 63d7121..b84290a 100644
--- a/src/pages/Sign/Forget.tsx
+++ b/src/pages/Sign/Forget.tsx
@@ -6,7 +6,6 @@ import {
     PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED,
     PERMISSION_RETRIEVE_SUCCESS,
     PERMISSION_USER_NOT_FOUND,
-    SIZE_ICON_MD,
     SYSTEM_INVALID_CAPTCHA_CODE
 } from '@/constants/common.constants'
 import { r_auth_forget, r_auth_retrieve } from '@/services/auth'
@@ -17,27 +16,8 @@ const Forget = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const turnstileRef = useRef<TurnstileInstance>()
-    const turnstileRefCallback = useCallback(
-        (node: TurnstileInstance) => {
-            turnstileRef.current = node
-
-            if (location.pathname === '/forget' && !searchParams.get('code')) {
-                turnstileRef.current?.execute()
-            }
-        },
-        [location.pathname, searchParams]
-    )
     const retrieveTurnstileRef = useRef<TurnstileInstance>()
-    const retrieveTurnstileRefCallback = useCallback(
-        (node: TurnstileInstance) => {
-            retrieveTurnstileRef.current = node
-
-            if (location.pathname === '/forget' && searchParams.get('code')) {
-                retrieveTurnstileRef.current?.execute()
-            }
-        },
-        [location.pathname, searchParams]
-    )
+    const [refreshTime, setRefreshTime] = useState(0)
     const [isSending, setIsSending] = useState(false)
     const [isSent, setIsSent] = useState(false)
     const [isChanging, setIsChanging] = useState(false)
@@ -45,6 +25,25 @@ const Forget = () => {
     const [captchaCode, setCaptchaCode] = useState('')
     const [retrieveCaptchaCode, setRetrieveCaptchaCode] = useState('')
 
+    useEffect(() => {
+        const timer = setInterval(() => {
+            if (window.turnstile) {
+                clearInterval(timer)
+                setRefreshTime(Date.now())
+                if (location.pathname === '/forget' && !searchParams.get('code')) {
+                    setTimeout(() => {
+                        turnstileRef.current?.execute()
+                    }, 500)
+                }
+                if (location.pathname === '/forget' && searchParams.get('code')) {
+                    setTimeout(() => {
+                        retrieveTurnstileRef.current?.execute()
+                    }, 500)
+                }
+            }
+        })
+    }, [location.pathname])
+
     useEffect(() => {
         if (!isSending) {
             setCaptchaCode('')
@@ -161,22 +160,17 @@ const Forget = () => {
                                             />
                                         </AntdForm.Item>
                                         <AntdForm.Item>
-                                            {!turnstileRef.current && (
-                                                <div className={'loading-turnstile'}>
-                                                    <Icon
-                                                        component={IconOxygenLoading}
-                                                        style={{ fontSize: SIZE_ICON_MD }}
-                                                        spin
-                                                    />
-                                                </div>
-                                            )}
                                             <Turnstile
                                                 id={'forget-turnstile'}
-                                                ref={turnstileRefCallback}
+                                                ref={turnstileRef}
                                                 siteKey={H_CAPTCHA_SITE_KEY}
-                                                hidden={!turnstileRef.current}
-                                                options={{ theme: 'light' }}
+                                                options={{
+                                                    theme: 'light',
+                                                    execution: 'execute',
+                                                    appearance: 'execute'
+                                                }}
                                                 onSuccess={setCaptchaCode}
+                                                data-refresh={refreshTime}
                                             />
                                         </AntdForm.Item>
                                         <AntdForm.Item>
@@ -243,22 +237,17 @@ const Forget = () => {
                                         />
                                     </AntdForm.Item>
                                     <AntdForm.Item>
-                                        {!turnstileRef.current && (
-                                            <div className={'loading-turnstile'}>
-                                                <Icon
-                                                    component={IconOxygenLoading}
-                                                    style={{ fontSize: SIZE_ICON_MD }}
-                                                    spin
-                                                />
-                                            </div>
-                                        )}
                                         <Turnstile
                                             id={'retrieve-turnstile'}
-                                            ref={retrieveTurnstileRefCallback}
+                                            ref={retrieveTurnstileRef}
                                             siteKey={H_CAPTCHA_SITE_KEY}
-                                            hidden={!turnstileRef.current}
-                                            options={{ theme: 'light' }}
+                                            options={{
+                                                theme: 'light',
+                                                execution: 'execute',
+                                                appearance: 'execute'
+                                            }}
                                             onSuccess={setRetrieveCaptchaCode}
+                                            data-refresh={refreshTime}
                                         />
                                     </AntdForm.Item>
                                     <AntdForm.Item>
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index 854886e..0eaac4e 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -8,7 +8,6 @@ import {
     PERMISSION_TWO_FACTOR_VERIFICATION_CODE_ERROR,
     PERMISSION_USER_DISABLE,
     PERMISSION_USERNAME_NOT_FOUND,
-    SIZE_ICON_MD,
     SYSTEM_INVALID_CAPTCHA_CODE
 } from '@/constants/common.constants'
 import { getUserInfo, setToken } from '@/util/auth'
@@ -24,19 +23,25 @@ const SignIn = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const turnstileRef = useRef<TurnstileInstance>()
-    const turnstileRefCallback = useCallback(
-        (node: TurnstileInstance) => {
-            turnstileRef.current = node
-            if (location.pathname === '/login') {
-                turnstileRef.current?.execute()
-            }
-        },
-        [location.pathname]
-    )
+    const [refreshTime, setRefreshTime] = useState(0)
     const [twoFactorForm] = AntdForm.useForm<{ twoFactorCode: string }>()
     const [isSigningIn, setIsSigningIn] = useState(false)
     const [captchaCode, setCaptchaCode] = useState('')
 
+    useEffect(() => {
+        const timer = setInterval(() => {
+            if (window.turnstile) {
+                clearInterval(timer)
+                setRefreshTime(Date.now())
+                if (location.pathname === '/login') {
+                    setTimeout(() => {
+                        turnstileRef.current?.execute()
+                    }, 500)
+                }
+            }
+        })
+    }, [location.pathname])
+
     useEffect(() => {
         if (!isSigningIn) {
             setCaptchaCode('')
@@ -227,22 +232,17 @@ const SignIn = () => {
                             />
                         </AntdForm.Item>
                         <AntdForm.Item>
-                            {!turnstileRef.current && (
-                                <div className={'loading-turnstile'}>
-                                    <Icon
-                                        component={IconOxygenLoading}
-                                        style={{ fontSize: SIZE_ICON_MD }}
-                                        spin
-                                    />
-                                </div>
-                            )}
                             <Turnstile
                                 id={'sign-in-turnstile'}
-                                ref={turnstileRefCallback}
+                                ref={turnstileRef}
                                 siteKey={H_CAPTCHA_SITE_KEY}
-                                hidden={!turnstileRef.current}
-                                options={{ theme: 'light' }}
+                                options={{
+                                    theme: 'light',
+                                    execution: 'execute',
+                                    appearance: 'execute'
+                                }}
                                 onSuccess={setCaptchaCode}
+                                data-refresh={refreshTime}
                             />
                         </AntdForm.Item>
                         <FlexBox direction={'horizontal'} className={'addition'}>
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx
index 23ce21b..4a52b4e 100644
--- a/src/pages/Sign/SignUp.tsx
+++ b/src/pages/Sign/SignUp.tsx
@@ -4,7 +4,6 @@ import {
     DATABASE_DUPLICATE_KEY,
     H_CAPTCHA_SITE_KEY,
     PERMISSION_REGISTER_SUCCESS,
-    SIZE_ICON_MD,
     SYSTEM_INVALID_CAPTCHA_CODE,
     SYSTEM_MATCH_SENSITIVE_WORD
 } from '@/constants/common.constants'
@@ -17,21 +16,26 @@ const SignUp = () => {
     const location = useLocation()
     const navigate = useNavigate()
     const turnstileRef = useRef<TurnstileInstance>()
-    const turnstileRefCallback = useCallback(
-        (node: TurnstileInstance) => {
-            turnstileRef.current = node
-
-            if (location.pathname === '/register') {
-                turnstileRef.current?.execute()
-            }
-        },
-        [location.pathname]
-    )
+    const [refreshTime, setRefreshTime] = useState(0)
     const [isSigningUp, setIsSigningUp] = useState(false)
     const [isFinish, setIsFinish] = useState(false)
     const [isSending, setIsSending] = useState(false)
     const [captchaCode, setCaptchaCode] = useState('')
 
+    useEffect(() => {
+        const timer = setInterval(() => {
+            if (window.turnstile) {
+                clearInterval(timer)
+                setRefreshTime(Date.now())
+                if (location.pathname === '/register') {
+                    setTimeout(() => {
+                        turnstileRef.current?.execute()
+                    }, 500)
+                }
+            }
+        })
+    }, [location.pathname])
+
     useEffect(() => {
         if (!isSigningUp) {
             setCaptchaCode('')
@@ -201,22 +205,17 @@ const SignUp = () => {
                                     />
                                 </AntdForm.Item>
                                 <AntdForm.Item>
-                                    {!turnstileRef.current && (
-                                        <div className={'loading-turnstile'}>
-                                            <Icon
-                                                component={IconOxygenLoading}
-                                                style={{ fontSize: SIZE_ICON_MD }}
-                                                spin
-                                            />
-                                        </div>
-                                    )}
                                     <Turnstile
                                         id={'sign-up-turnstile'}
-                                        ref={turnstileRefCallback}
+                                        ref={turnstileRef}
                                         siteKey={H_CAPTCHA_SITE_KEY}
-                                        hidden={!turnstileRef.current}
-                                        options={{ theme: 'light' }}
+                                        options={{
+                                            theme: 'light',
+                                            execution: 'execute',
+                                            appearance: 'execute'
+                                        }}
                                         onSuccess={setCaptchaCode}
+                                        data-refresh={refreshTime}
                                     />
                                 </AntdForm.Item>
                                 <AntdForm.Item>

From 65fc6e9c287e8db8e350d0a1cfd6990d7660f286 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 4 Mar 2024 15:01:38 +0800
Subject: [PATCH 238/307] Optimize: two-factor - remove autocomplete when
 typing

---
 src/pages/Sign/Forget.tsx |  2 ++
 src/pages/Sign/SignIn.tsx |  6 +++++-
 src/pages/Sign/SignUp.tsx |  2 ++
 src/pages/User/index.tsx  | 12 ++++++++++--
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx
index b84290a..4c1f4ca 100644
--- a/src/pages/Sign/Forget.tsx
+++ b/src/pages/Sign/Forget.tsx
@@ -204,6 +204,7 @@ const Forget = () => {
                                         ]}
                                     >
                                         <AntdInput.Password
+                                            id={'forget-password'}
                                             addonBefore={
                                                 <span>新&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
                                             }
@@ -231,6 +232,7 @@ const Forget = () => {
                                         ]}
                                     >
                                         <AntdInput.Password
+                                            id={'forget-password-confirm'}
                                             addonBefore={'确认密码'}
                                             placeholder={'确认密码'}
                                             disabled={isChanging}
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index 0eaac4e..b81bc4d 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -134,7 +134,11 @@ const SignIn = () => {
                                             style={{ marginTop: 10 }}
                                             rules={[{ required: true, len: 6 }]}
                                         >
-                                            <AntdInput showCount maxLength={6} />
+                                            <AntdInput
+                                                showCount
+                                                maxLength={6}
+                                                autoComplete={'off'}
+                                            />
                                         </AntdForm.Item>
                                     </AntdForm>
                                 </>
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx
index 4a52b4e..99d6db4 100644
--- a/src/pages/Sign/SignUp.tsx
+++ b/src/pages/Sign/SignUp.tsx
@@ -177,6 +177,7 @@ const SignUp = () => {
                                     ]}
                                 >
                                     <AntdInput.Password
+                                        id={'sign-up-password'}
                                         prefix={<Icon component={IconOxygenPassword} />}
                                         placeholder={'密码'}
                                         disabled={isSigningUp}
@@ -199,6 +200,7 @@ const SignUp = () => {
                                     ]}
                                 >
                                     <AntdInput.Password
+                                        id={'sign-up-password-confirm'}
                                         prefix={<Icon component={IconOxygenPassword} />}
                                         placeholder={'确认密码'}
                                         disabled={isSigningUp}
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index 249247f..6d4c2fd 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -257,7 +257,11 @@ const User = () => {
                                             style={{ marginTop: 10 }}
                                             rules={[{ required: true, len: 6 }]}
                                         >
-                                            <AntdInput showCount maxLength={6} />
+                                            <AntdInput
+                                                showCount
+                                                maxLength={6}
+                                                autoComplete={'off'}
+                                            />
                                         </AntdForm.Item>
                                     </AntdForm>
                                 </>
@@ -336,7 +340,11 @@ const User = () => {
                                                 style={{ marginTop: 10, marginRight: 30 }}
                                                 rules={[{ required: true, len: 6 }]}
                                             >
-                                                <AntdInput showCount maxLength={6} />
+                                                <AntdInput
+                                                    showCount
+                                                    maxLength={6}
+                                                    autoComplete={'off'}
+                                                />
                                             </AntdForm.Item>
                                         </AntdForm>
                                     </>

From 2d059a48d9287777dffcc58b2b0f5f0cc1022e26 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 5 Mar 2024 10:34:28 +0800
Subject: [PATCH 239/307] Optimize: two-factor - add binding operation prompt

---
 src/pages/User/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index 6d4c2fd..23c4671 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -326,6 +326,10 @@ const User = () => {
                                             alt={'Two-factor'}
                                             preview={false}
                                         />
+                                        <AntdTag style={{ whiteSpace: 'normal' }}>
+                                            请使用身份验证器APP（eg. Microsoft Authenticator, Google
+                                            Authenticator）扫描二维码，并在下方输入显示的动态二维码进行绑定
+                                        </AntdTag>
                                         <AntdForm
                                             form={twoFactorForm}
                                             ref={(ref) => {

From c48480146fd38417443e15f43a56fbe5d0342a11 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 5 Mar 2024 10:40:14 +0800
Subject: [PATCH 240/307] Fix: ToolsFramework - clicking the store button for
 the first time cannot jump after logging in bug

---
 src/pages/ToolsFramework.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 2abb04e..7a36100 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -11,10 +11,15 @@ const ToolsFramework = () => {
                 <div className={'left-panel'}>
                     <Sidebar title={'氧工具'}>
                         <Sidebar.ItemList>
-                            <Sidebar.Item end path={''} icon={tools[0].icon} text={tools[0].name} />
                             <Sidebar.Item
                                 end
-                                path={'store'}
+                                path={'/'}
+                                icon={tools[0].icon}
+                                text={tools[0].name}
+                            />
+                            <Sidebar.Item
+                                end
+                                path={'/store'}
                                 icon={tools[1].icon}
                                 text={tools[1].name}
                             />

From cce295f72051b40b900349c5016ac6989eda9c54 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 5 Mar 2024 10:53:17 +0800
Subject: [PATCH 241/307] Docs: package.json - update version to
 '1.0.0-SNAPSHOT'

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0b2e579..e422ea3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "oxygen-ui",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "oxygen-ui",
-      "version": "0.0.0",
+      "version": "1.0.0",
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
         "@marsidev/react-turnstile": "^0.5.3",
diff --git a/package.json b/package.json
index 510e405..46ac778 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "oxygen-ui",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0-SNAPSHOT",
   "type": "module",
   "scripts": {
     "dev": "vite",

From 1b9e527b68ce4097d296dd8ce3b3a91d6162f060 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 15 Mar 2024 14:01:54 +0800
Subject: [PATCH 242/307] Style: all - change page padding to 20px

---
 package.json                                  |  3 +-
 src/assets/css/common.scss                    |  2 +-
 src/assets/css/components/common/card.scss    |  2 +-
 .../css/components/common/hide-scrollbar.scss |  2 +-
 .../css/components/common/indicator.scss      |  2 +-
 src/assets/css/components/common/sidebar.scss |  2 +-
 src/assets/css/pages/sign.scss                |  2 +-
 src/assets/css/pages/system-framework.scss    |  2 +-
 src/assets/css/pages/system/index.scss        |  4 +-
 src/assets/css/pages/system/settings.scss     |  4 +-
 src/assets/css/pages/system/statistics.scss   |  4 +-
 src/assets/css/pages/system/tools/base.scss   |  4 +-
 src/assets/css/pages/system/tools/code.scss   |  4 +-
 .../css/pages/system/tools/execute.scss       |  4 +-
 src/assets/css/pages/tools-framework.scss     |  2 +-
 src/assets/css/pages/tools/create.scss        |  2 +-
 src/assets/css/pages/tools/edit.scss          | 27 ++++---
 src/assets/css/pages/tools/index.scss         |  2 +-
 src/assets/css/pages/tools/source.scss        |  4 +-
 src/assets/css/pages/tools/store.scss         |  4 +-
 src/assets/css/pages/tools/user.scss          |  8 +-
 src/assets/css/pages/tools/view.scss          |  4 +-
 src/assets/css/pages/user-framework.scss      |  2 +-
 src/assets/css/pages/user/index.scss          |  8 +-
 src/pages/System/Group.tsx                    |  2 +-
 src/pages/System/Log.tsx                      |  2 +-
 src/pages/System/Role.tsx                     |  2 +-
 src/pages/System/Tools/Category.tsx           |  2 +-
 src/pages/System/Tools/index.tsx              |  2 +-
 src/pages/System/User.tsx                     |  2 +-
 src/pages/Tools/Edit.tsx                      | 73 ++++++++++---------
 31 files changed, 100 insertions(+), 89 deletions(-)

diff --git a/package.json b/package.json
index 46ac778..122f9ac 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,9 @@
   "scripts": {
     "dev": "vite",
     "dev-host": "vite --host 0.0.0.0",
-    "build": "vite build",
+    "build": "vite build && npm run typecheck",
     "build-test": "vite build --mode testing",
+    "typecheck": "tsc",
     "clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write src/",
diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index d6a24a7..3b85b09 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -115,4 +115,4 @@
 .flex-vertical {
   display: flex;
   flex-direction: column;
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/components/common/card.scss b/src/assets/css/components/common/card.scss
index 8daf288..46a6be4 100644
--- a/src/assets/css/components/common/card.scss
+++ b/src/assets/css/components/common/card.scss
@@ -5,4 +5,4 @@
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 427964a..32fcf8d 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -90,4 +90,4 @@
       height: 8px;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/components/common/indicator.scss b/src/assets/css/components/common/indicator.scss
index 1af0d13..be5054f 100644
--- a/src/assets/css/components/common/indicator.scss
+++ b/src/assets/css/components/common/indicator.scss
@@ -31,4 +31,4 @@
   .active > * {
     background-color: constants.$font-secondary-color !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss
index ca67fd6..42190cd 100644
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -319,4 +319,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/sign.scss b/src/assets/css/pages/sign.scss
index ad54058..62748e0 100644
--- a/src/assets/css/pages/sign.scss
+++ b/src/assets/css/pages/sign.scss
@@ -146,4 +146,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/system-framework.scss b/src/assets/css/pages/system-framework.scss
index 6966464..4f8ea07 100644
--- a/src/assets/css/pages/system-framework.scss
+++ b/src/assets/css/pages/system-framework.scss
@@ -11,4 +11,4 @@
     width: 0;
     background-color: constants.$background-color;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss
index 1cf03d1..f41fad8 100644
--- a/src/assets/css/pages/system/index.scss
+++ b/src/assets/css/pages/system/index.scss
@@ -2,7 +2,7 @@
 
 [data-component=system] {
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: flex-start;
@@ -38,4 +38,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.scss
index 032a7dc..839e7dd 100644
--- a/src/assets/css/pages/system/settings.scss
+++ b/src/assets/css/pages/system/settings.scss
@@ -2,7 +2,7 @@
 
 [data-component=system-settings] {
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 20px;
 
     .root-col {
@@ -43,4 +43,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/system/statistics.scss b/src/assets/css/pages/system/statistics.scss
index 7d67e24..8c7230c 100644
--- a/src/assets/css/pages/system/statistics.scss
+++ b/src/assets/css/pages/system/statistics.scss
@@ -2,7 +2,7 @@
 
 [data-component=system-statistics] {
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: center;
@@ -87,4 +87,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/system/tools/base.scss b/src/assets/css/pages/system/tools/base.scss
index 358c38b..d8dc5ca 100644
--- a/src/assets/css/pages/system/tools/base.scss
+++ b/src/assets/css/pages/system/tools/base.scss
@@ -2,7 +2,7 @@
 
 [data-component=system-tools-base] {
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 10px;
     height: 100%;
     width: 100%;
@@ -39,4 +39,4 @@
       cursor: pointer;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/system/tools/code.scss b/src/assets/css/pages/system/tools/code.scss
index 69ffc34..7908a36 100644
--- a/src/assets/css/pages/system/tools/code.scss
+++ b/src/assets/css/pages/system/tools/code.scss
@@ -1,5 +1,5 @@
 [data-component=system-tools-code] {
-  padding: 30px;
+  padding: 20px;
 
   .card-box {
     width: 100%;
@@ -17,4 +17,4 @@
       inset-block-end: 0;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/system/tools/execute.scss b/src/assets/css/pages/system/tools/execute.scss
index c831c75..4beeb74 100644
--- a/src/assets/css/pages/system/tools/execute.scss
+++ b/src/assets/css/pages/system/tools/execute.scss
@@ -1,8 +1,8 @@
 [data-component=system-tools-execute] {
-  padding: 30px;
+  padding: 20px;
 
   .card-box {
     width: 100%;
     height: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 5652c7d..79d055f 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -11,4 +11,4 @@
     width: 0;
     background-color: constants.$background-color;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/tools/create.scss b/src/assets/css/pages/tools/create.scss
index dea6b9a..a01a5ae 100644
--- a/src/assets/css/pages/tools/create.scss
+++ b/src/assets/css/pages/tools/create.scss
@@ -45,4 +45,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/tools/edit.scss b/src/assets/css/pages/tools/edit.scss
index 2693826..2671d2c 100644
--- a/src/assets/css/pages/tools/edit.scss
+++ b/src/assets/css/pages/tools/edit.scss
@@ -1,22 +1,29 @@
 [data-component=tools-edit] {
-  .root-content {
-    width: 100%;
+  padding: 20px;
+
+  .card-box {
     height: 100%;
+    width: 100%;
 
-    > * {
-      width: 0;
-    }
-
-    .draggable-mask {
-      position: absolute;
+    .root-content {
       width: 100%;
       height: 100%;
+
+      > * {
+        width: 0;
+      }
+
+      .draggable-mask {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 
   .draggable-content {
     position: fixed;
-    inset-inline-end: 32px;
+    inset-inline-end: 48px;
     inset-block-end: 48px;
 
     > * {
@@ -25,4 +32,4 @@
       inset-block-end: 0;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.scss
index 000ce1e..6bba3c3 100644
--- a/src/assets/css/pages/tools/index.scss
+++ b/src/assets/css/pages/tools/index.scss
@@ -3,7 +3,7 @@
 
 [data-component=tools] {
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: flex-start;
diff --git a/src/assets/css/pages/tools/source.scss b/src/assets/css/pages/tools/source.scss
index eba55ab..6a358a5 100644
--- a/src/assets/css/pages/tools/source.scss
+++ b/src/assets/css/pages/tools/source.scss
@@ -1,8 +1,8 @@
 [data-component=tools-source] {
-  padding: 30px;
+  padding: 20px;
 
   .card-box {
     width: 100%;
     height: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.scss
index 2028cec..ffc4ab0 100644
--- a/src/assets/css/pages/tools/store.scss
+++ b/src/assets/css/pages/tools/store.scss
@@ -21,7 +21,7 @@
   }
 
   .root-content {
-    padding: 30px;
+    padding: 20px;
     gap: 20px;
     flex-wrap: wrap;
     justify-content: center;
@@ -141,4 +141,4 @@
       color: constants.$font-secondary-color;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/tools/user.scss b/src/assets/css/pages/tools/user.scss
index be5635e..f0d02a1 100644
--- a/src/assets/css/pages/tools/user.scss
+++ b/src/assets/css/pages/tools/user.scss
@@ -3,9 +3,9 @@
 [data-component=tools-store-user] .root-content {
   padding: {
     top: 80px;
-    left: 30px;
-    right: 30px;
-    bottom: 30px;
+    left: 20px;
+    right: 20px;
+    bottom: 20px;
   };
 
   .root-box {
@@ -185,4 +185,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/tools/view.scss b/src/assets/css/pages/tools/view.scss
index df4f6a6..c5cb6a9 100644
--- a/src/assets/css/pages/tools/view.scss
+++ b/src/assets/css/pages/tools/view.scss
@@ -1,8 +1,8 @@
 [data-component=tools-view] {
-  padding: 30px;
+  padding: 20px;
 
   .card-box {
     height: 100%;
     width: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/user-framework.scss b/src/assets/css/pages/user-framework.scss
index 3523793..cd21ab7 100644
--- a/src/assets/css/pages/user-framework.scss
+++ b/src/assets/css/pages/user-framework.scss
@@ -11,4 +11,4 @@
     width: 0;
     background-color: constants.$background-color;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/pages/user/index.scss b/src/assets/css/pages/user/index.scss
index ca80775..6bcce1d 100644
--- a/src/assets/css/pages/user/index.scss
+++ b/src/assets/css/pages/user/index.scss
@@ -3,9 +3,9 @@
 [data-component=user] .root-content {
   padding: {
     top: 80px;
-    left: 30px;
-    right: 30px;
-    bottom: 30px;
+    left: 20px;
+    right: 20px;
+    bottom: 20px;
   };
 
   .card-box {
@@ -132,4 +132,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index 529cf43..2a82ac7 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -634,7 +634,7 @@ const Group = () => {
         <>
             <FitFullscreen data-component={'system-group'}>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >
diff --git a/src/pages/System/Log.tsx b/src/pages/System/Log.tsx
index 86f4294..d665c00 100644
--- a/src/pages/System/Log.tsx
+++ b/src/pages/System/Log.tsx
@@ -285,7 +285,7 @@ const Log = () => {
         <>
             <FitFullscreen>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index 989f7cb..5462f44 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -641,7 +641,7 @@ const Role = () => {
         <>
             <FitFullscreen>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >
diff --git a/src/pages/System/Tools/Category.tsx b/src/pages/System/Tools/Category.tsx
index 625e287..802065a 100644
--- a/src/pages/System/Tools/Category.tsx
+++ b/src/pages/System/Tools/Category.tsx
@@ -286,7 +286,7 @@ const Category = () => {
         <>
             <FitFullscreen data-component={'system-tools-category'}>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 40d5004..851c390 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -568,7 +568,7 @@ const Tools = () => {
         <>
             <FitFullscreen>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 02b5c02..5efb44b 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -1010,7 +1010,7 @@ const User = () => {
         <>
             <FitFullscreen>
                 <HideScrollbar
-                    style={{ padding: 30 }}
+                    style={{ padding: 20 }}
                     isShowVerticalScrollbar
                     autoHideWaitingTime={1000}
                 >
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index 01d63d4..6a56e0e 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -21,6 +21,7 @@ import Playground from '@/components/Playground'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 import LoadingMask from '@/components/common/LoadingMask'
+import Card from '@/components/common/Card'
 
 const Edit = () => {
     const navigate = useNavigate()
@@ -403,41 +404,43 @@ const Edit = () => {
     return (
         <>
             <FitFullscreen data-component={'tools-edit'}>
-                <FlexBox direction={'horizontal'} className={'root-content'}>
-                    <LoadingMask hidden={!loading}>
-                        <Playground.CodeEditor
-                            tsconfig={tsconfig}
-                            files={{
-                                ...files,
-                                [IMPORT_MAP_FILE_NAME]: {
-                                    name: IMPORT_MAP_FILE_NAME,
-                                    language: 'json',
-                                    value: importMapRaw
-                                },
-                                [TS_CONFIG_FILE_NAME]: {
-                                    name: TS_CONFIG_FILE_NAME,
-                                    language: 'json',
-                                    value: tsconfigRaw
-                                }
-                            }}
-                            notRemovable={[entryPoint]}
-                            selectedFileName={selectedFileName}
-                            onAddFile={(_, files) => setFiles(files)}
-                            onRemoveFile={(_, files) => setFiles(files)}
-                            onRenameFile={(_, __, files) => setFiles(files)}
-                            onChangeFileContent={handleOnChangeFileContent}
-                            onSelectedFileChange={setSelectedFileName}
-                        />
-                        <Playground.Output
-                            files={files}
-                            selectedFileName={selectedFileName}
-                            importMap={importMap!}
-                            entryPoint={entryPoint}
-                            postExpansionCode={baseDist}
-                        />
-                    </LoadingMask>
-                    {showDraggableMask && <div className={'draggable-mask'} />}
-                </FlexBox>
+                <Card>
+                    <FlexBox direction={'horizontal'} className={'root-content'}>
+                        <LoadingMask hidden={!loading}>
+                            <Playground.CodeEditor
+                                tsconfig={tsconfig}
+                                files={{
+                                    ...files,
+                                    [IMPORT_MAP_FILE_NAME]: {
+                                        name: IMPORT_MAP_FILE_NAME,
+                                        language: 'json',
+                                        value: importMapRaw
+                                    },
+                                    [TS_CONFIG_FILE_NAME]: {
+                                        name: TS_CONFIG_FILE_NAME,
+                                        language: 'json',
+                                        value: tsconfigRaw
+                                    }
+                                }}
+                                notRemovable={[entryPoint]}
+                                selectedFileName={selectedFileName}
+                                onAddFile={(_, files) => setFiles(files)}
+                                onRemoveFile={(_, files) => setFiles(files)}
+                                onRenameFile={(_, __, files) => setFiles(files)}
+                                onChangeFileContent={handleOnChangeFileContent}
+                                onSelectedFileChange={setSelectedFileName}
+                            />
+                            <Playground.Output
+                                files={files}
+                                selectedFileName={selectedFileName}
+                                importMap={importMap!}
+                                entryPoint={entryPoint}
+                                postExpansionCode={baseDist}
+                            />
+                        </LoadingMask>
+                        {showDraggableMask && <div className={'draggable-mask'} />}
+                    </FlexBox>
+                </Card>
                 <Draggable
                     onStart={() => setShowDraggableMask(true)}
                     onStop={() => setShowDraggableMask(false)}

From f985a2f75076debb15d033fe8d44d420c96236fd Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 15 Mar 2024 15:26:08 +0800
Subject: [PATCH 243/307] Optimize: method return - add return undefined value

---
 build/resolvers/antd.ts   | 1 +
 src/pages/Tools/index.tsx | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/build/resolvers/antd.ts b/build/resolvers/antd.ts
index f0d1b45..0bb5132 100644
--- a/build/resolvers/antd.ts
+++ b/build/resolvers/antd.ts
@@ -417,6 +417,7 @@ export const AntDesignResolver = (options: AntDesignResolverOptions = {}): Compo
                     sideEffects: getSideEffects(importName, options)
                 }
             }
+            return undefined
         }
     }
 }
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 7b6ab08..2cc3bbe 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -152,6 +152,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
                 navigate(`/edit/${tools[0].toolId}`)
             }
         }
+        return undefined
     }
 
     const handleOnSourceTool = () => {
@@ -160,6 +161,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
                 navigate(`/source/!/${selectedTool.toolId}/${selectedTool.ver}`)
             }
         }
+        return undefined
     }
 
     const handleOnPublishTool = () => {
@@ -168,6 +170,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
                 onSubmit?.(selectedTool)
             }
         }
+        return undefined
     }
 
     const handleOnCancelReview = () => {
@@ -176,6 +179,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
                 onCancel?.(selectedTool)
             }
         }
+        return undefined
     }
 
     const handleOnDeleteTool = () => {

From 4b1a3fbc016c5483d2c576812a67bcc8b2ca0fc3 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 18 Mar 2024 17:23:31 +0800
Subject: [PATCH 244/307] Feat: all - support multiple platforms

---
 .env.development                            |   5 +-
 .env.production                             |   3 +-
 .env.testing                                |   3 +-
 package-lock.json                           |   4 +-
 src/assets/css/pages/system/tools/base.scss |   2 +-
 src/assets/css/pages/tools/create.scss      |  12 ++
 src/assets/css/pages/tools/index.scss       |   2 +-
 src/constants/urls.constants.ts             |   1 +
 src/global.d.ts                             |  10 ++
 src/pages/System/Tools/Base.tsx             |  98 +++++++++++-
 src/pages/System/Tools/Code.tsx             |  11 +-
 src/pages/System/Tools/Execute.tsx          |   2 +-
 src/pages/System/Tools/Template.tsx         | 158 +++++++++++++++++---
 src/pages/System/Tools/index.tsx            |  12 +-
 src/pages/Tools/Create.tsx                  |  69 ++++++---
 src/pages/Tools/Edit.tsx                    |  23 ++-
 src/pages/Tools/Source.tsx                  |  18 ++-
 src/pages/Tools/User.tsx                    |   2 +-
 src/pages/Tools/View.tsx                    |  18 ++-
 src/pages/Tools/index.tsx                   | 104 +++++++++++--
 src/services/system.tsx                     |  11 +-
 src/services/tool.tsx                       |   7 +-
 src/util/common.tsx                         |   4 +-
 23 files changed, 487 insertions(+), 92 deletions(-)

diff --git a/.env.development b/.env.development
index 2d4393a..92ef92f 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,4 @@
-VITE_API_URL=http://localhost:8080
+VITE_PLATFORM=WEB
+VITE_API_URL=${DEV_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
-VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
\ No newline at end of file
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
diff --git a/.env.production b/.env.production
index 5062b96..ef7c119 100644
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,4 @@
+VITE_PLATFORM=WEB
 VITE_API_URL=${PRODUCT_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
-VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
\ No newline at end of file
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
diff --git a/.env.testing b/.env.testing
index 7475bc2..1b6606e 100644
--- a/.env.testing
+++ b/.env.testing
@@ -1,4 +1,5 @@
 NODE_ENV=development
+VITE_PLATFORM=WEB
 VITE_API_URL=${TEST_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
-VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
\ No newline at end of file
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
diff --git a/package-lock.json b/package-lock.json
index e422ea3..fd47514 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "oxygen-ui",
-  "version": "1.0.0",
+  "version": "1.0.0-SNAPSHOT",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "oxygen-ui",
-      "version": "1.0.0",
+      "version": "1.0.0-SNAPSHOT",
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
         "@marsidev/react-turnstile": "^0.5.3",
diff --git a/src/assets/css/pages/system/tools/base.scss b/src/assets/css/pages/system/tools/base.scss
index d8dc5ca..bab7210 100644
--- a/src/assets/css/pages/system/tools/base.scss
+++ b/src/assets/css/pages/system/tools/base.scss
@@ -19,7 +19,7 @@
     > *:nth-child(2) {
       position: sticky;
       top: 20px;
-      height: calc(100vh - 60px);
+      height: calc(100vh - 40px);
     }
 
     .close-editor-btn {
diff --git a/src/assets/css/pages/tools/create.scss b/src/assets/css/pages/tools/create.scss
index a01a5ae..0306a9b 100644
--- a/src/assets/css/pages/tools/create.scss
+++ b/src/assets/css/pages/tools/create.scss
@@ -43,6 +43,18 @@
           }
         }
       }
+
+      .preview {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .no-preview {
+          font-weight: bolder;
+          color: constants.$font-secondary-color;
+          font-size: 1.4em;
+        }
+      }
     }
   }
 }
diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.scss
index 6bba3c3..4b59fe2 100644
--- a/src/assets/css/pages/tools/index.scss
+++ b/src/assets/css/pages/tools/index.scss
@@ -28,7 +28,7 @@
           position: absolute;
           top: 10px;
           left: 10px;
-          width: 8em;
+          width: 9em;
         }
 
         .upgrade-bt {
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 615dab8..c3b20f7 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -30,6 +30,7 @@ export const URL_SYS_STATISTICS_ACTIVE = `${URL_SYS_STATISTICS}/active`
 export const URL_SYS_TOOL = '/system/tool'
 export const URL_SYS_TOOL_CATEGORY = `${URL_SYS_TOOL}/category`
 export const URL_SYS_TOOL_BASE = `${URL_SYS_TOOL}/base`
+export const URL_SYS_TOOL_BASE_LIST = `${URL_SYS_TOOL_BASE}/list`
 export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
 
 export const URL_TOOL = '/tool'
diff --git a/src/global.d.ts b/src/global.d.ts
index be92e36..e67e298 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,7 +1,10 @@
 /// <reference types="vite/client" />
 /// <reference types="./ant-design" />
 
+type Platform = 'WEB' | 'DESKTOP' | 'ANDROID'
+
 interface ImportMetaEnv {
+    readonly VITE_PLATFORM: Platform
     readonly VITE_API_URL: string
     readonly VITE_API_TOKEN_URL: string
     readonly VITE_TURNSTILE_SITE_KEY: string
@@ -545,6 +548,7 @@ interface ToolBaseVo {
     name: string
     source: ToolDataVo
     dist: ToolDataVo
+    platform: Platform
     compiled: boolean
     createTime: string
     updateTime: string
@@ -555,6 +559,7 @@ interface ToolBaseAddEditParam {
     name?: string
     source?: string
     dist?: string
+    platform?: Platform
 }
 
 interface ToolTemplateVo {
@@ -562,6 +567,7 @@ interface ToolTemplateVo {
     name: string
     baseId: string
     source: ToolDataVo
+    platform: Platform
     entryPoint: string
     enable: boolean
     createTime: string
@@ -574,6 +580,7 @@ interface ToolTemplateAddEditParam {
     name?: string
     baseId?: string
     source?: string
+    platform?: Platform
     entryPoint?: string
     enable?: boolean
 }
@@ -583,6 +590,7 @@ interface ToolVo {
     name: string
     toolId: string
     icon: string
+    platform: Platform
     description: string
     base: ToolBaseVo
     author: UserWithInfoVo
@@ -602,6 +610,7 @@ interface ToolCreateParam {
     name: string
     toolId: string
     icon: string
+    platform: Platform
     description: string
     ver: string
     templateId: string
@@ -612,6 +621,7 @@ interface ToolCreateParam {
 interface ToolUpgradeParam {
     toolId: string
     ver: string
+    platform: Platform
 }
 
 interface ToolUpdateParam {
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index ac97229..ccf9dda 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -41,6 +41,17 @@ const Base = () => {
             currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
     )
     const [modal, contextHolder] = AntdModal.useModal()
+    const [tableParams, setTableParams] = useState<TableParam>({
+        pagination: {
+            current: 1,
+            pageSize: 20,
+            position: ['bottomCenter'],
+            showTotal: (total, range) =>
+                `第 ${
+                    range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
+                } 项 共 ${total} 项`
+        }
+    })
     const [form] = AntdForm.useForm<ToolBaseAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
     const [addFileForm] = AntdForm.useForm<{ fileName: string }>()
@@ -62,6 +73,32 @@ const Base = () => {
     const [compiling, setCompiling] = useState(false)
     const [compileForm] = AntdForm.useForm<{ entryFileName: string }>()
 
+    const handleOnTableChange = (
+        pagination: _TablePaginationConfig,
+        filters: Record<string, _FilterValue | null>,
+        sorter: _SorterResult<ToolBaseVo> | _SorterResult<ToolBaseVo>[]
+    ) => {
+        pagination = { ...tableParams.pagination, ...pagination }
+        if (Array.isArray(sorter)) {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.map((value) => value.field).join(',')
+            })
+        } else {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.field,
+                sortOrder: sorter.order
+            })
+        }
+
+        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+            setBaseData([])
+        }
+    }
+
     useBeforeUnload(
         useCallback(
             (event) => {
@@ -78,8 +115,9 @@ const Base = () => {
     const handleOnAddBtnClick = () => {
         setIsDrawerEdit(false)
         setIsDrawerOpen(true)
-        form.setFieldValue('id', undefined)
+        form.setFieldValue('id', null)
         form.setFieldValue('name', newFormValues?.name)
+        form.setFieldValue('platform', newFormValues?.platform)
     }
 
     const baseColumns: _ColumnsType<ToolBaseVo> = [
@@ -91,6 +129,16 @@ const Base = () => {
                 </span>
             )
         },
+        {
+            title: '平台',
+            dataIndex: 'platform',
+            render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
+            filters: [
+                { text: 'Web', value: 'WEB' },
+                { text: 'Desktop', value: 'DESKTOP' },
+                { text: 'Android', value: 'ANDROID' }
+            ]
+        },
         {
             title: '创建时间',
             dataIndex: 'createTime',
@@ -371,6 +419,7 @@ const Base = () => {
             setIsDrawerOpen(true)
             form.setFieldValue('id', value.id)
             form.setFieldValue('name', value.name)
+            form.setFieldValue('platform', value.platform)
             void form.validateFields()
         }
     }
@@ -478,11 +527,28 @@ const Base = () => {
         }
         setIsLoading(true)
 
-        void r_sys_tool_base_get()
+        void r_sys_tool_base_get({
+            currentPage: tableParams.pagination?.current,
+            pageSize: tableParams.pagination?.pageSize,
+            sortField:
+                tableParams.sortField && tableParams.sortOrder
+                    ? (tableParams.sortField as string)
+                    : undefined,
+            sortOrder:
+                tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
+            ...tableParams.filters
+        })
             .then((res) => {
                 const response = res.data
                 if (response.code === DATABASE_SELECT_SUCCESS) {
-                    setBaseData(response.data!)
+                    setBaseData(response.data!.records)
+                    setTableParams({
+                        ...tableParams,
+                        pagination: {
+                            ...tableParams.pagination,
+                            total: response.data!.total
+                        }
+                    })
                 } else {
                     void message.error('获取失败，请稍后重试')
                 }
@@ -940,14 +1006,21 @@ const Base = () => {
 
         if (!isDrawerEdit && formValues) {
             setNewFormValues({
-                name: formValues.name
+                name: formValues.name,
+                platform: formValues.platform
             })
         }
     }, [formValues])
 
     useEffect(() => {
         getBase()
-    }, [])
+    }, [
+        JSON.stringify(tableParams.filters),
+        JSON.stringify(tableParams.sortField),
+        JSON.stringify(tableParams.sortOrder),
+        JSON.stringify(tableParams.pagination?.pageSize),
+        JSON.stringify(tableParams.pagination?.current)
+    ])
 
     const drawerToolbar = (
         <AntdSpace>
@@ -977,6 +1050,18 @@ const Base = () => {
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
+            <AntdForm.Item
+                name={'platform'}
+                label={'平台'}
+                rules={[{ required: true }]}
+                hidden={isDrawerEdit}
+            >
+                <AntdSelect>
+                    <AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
+                    <AntdSelect.Option key={'DESKTOP'}>Desktop</AntdSelect.Option>
+                    <AntdSelect.Option key={'ANDROID'}>Android</AntdSelect.Option>
+                </AntdSelect>
+            </AntdForm.Item>
         </AntdForm>
     )
 
@@ -990,12 +1075,13 @@ const Base = () => {
                                 dataSource={baseData}
                                 columns={baseColumns}
                                 rowKey={(record) => record.id}
+                                pagination={tableParams.pagination}
                                 loading={isLoading}
-                                pagination={false}
                                 expandable={{
                                     expandedRowRender,
                                     onExpand: handleOnExpand
                                 }}
+                                onChange={handleOnTableChange}
                             />
                         </Card>
                         {editingFileName && (
diff --git a/src/pages/System/Tools/Code.tsx b/src/pages/System/Tools/Code.tsx
index 56fac42..3a2a286 100644
--- a/src/pages/System/Tools/Code.tsx
+++ b/src/pages/System/Tools/Code.tsx
@@ -2,6 +2,7 @@ import Draggable from 'react-draggable'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/tools/code.scss'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { checkDesktop } from '@/util/common'
 import { r_sys_tool_get_one } from '@/services/system'
 import { IFiles } from '@/components/Playground/shared'
 import { base64ToFiles } from '@/components/Playground/files'
@@ -15,15 +16,21 @@ const Code = () => {
     const [loading, setLoading] = useState(false)
     const [files, setFiles] = useState<IFiles>({})
     const [selectedFileName, setSelectedFileName] = useState('')
+    const [platform, setPlatform] = useState<Platform>('WEB')
 
     const handleOnRunTool = () => {
-        navigate(`/system/tools/execute/${id}`)
+        if (checkDesktop() || platform !== 'DESKTOP') {
+            navigate(`/system/tools/execute/${id}`)
+        } else {
+            void message.warning('此应用需要桌面端环境，请在桌面端运行')
+        }
     }
 
     const render = (toolVo: ToolVo) => {
         try {
             setFiles(base64ToFiles(toolVo.source.data!))
             setSelectedFileName(toolVo.entryPoint)
+            setPlatform(toolVo.platform)
         } catch (e) {
             void message.error('载入工具失败')
         }
@@ -46,7 +53,7 @@ const Code = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
diff --git a/src/pages/System/Tools/Execute.tsx b/src/pages/System/Tools/Execute.tsx
index 8099d32..fe5dbb2 100644
--- a/src/pages/System/Tools/Execute.tsx
+++ b/src/pages/System/Tools/Execute.tsx
@@ -51,7 +51,7 @@ const Execute = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index c7c5e55..6c663d4 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -16,7 +16,7 @@ import {
     r_sys_tool_template_add,
     r_sys_tool_template_get,
     r_sys_tool_template_get_one,
-    r_sys_tool_base_get
+    r_sys_tool_base_get_list
 } from '@/services/system'
 import { IFile, IFiles, ITsconfig } from '@/components/Playground/shared'
 import {
@@ -39,6 +39,17 @@ const Template = () => {
             currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
     )
     const [modal, contextHolder] = AntdModal.useModal()
+    const [tableParams, setTableParams] = useState<TableParam>({
+        pagination: {
+            current: 1,
+            pageSize: 20,
+            position: ['bottomCenter'],
+            showTotal: (total, range) =>
+                `第 ${
+                    range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
+                } 项 共 ${total} 项`
+        }
+    })
     const [form] = AntdForm.useForm<ToolTemplateAddEditParam>()
     const formValues = AntdForm.useWatch([], form)
     const [addFileForm] = AntdForm.useForm<{ fileName: string }>()
@@ -60,6 +71,32 @@ const Template = () => {
     const [templateDetailLoading, setTemplateDetailLoading] = useState<Record<string, boolean>>({})
     const [tsconfig, setTsconfig] = useState<ITsconfig>()
 
+    const handleOnTableChange = (
+        pagination: _TablePaginationConfig,
+        filters: Record<string, _FilterValue | null>,
+        sorter: _SorterResult<ToolTemplateVo> | _SorterResult<ToolTemplateVo>[]
+    ) => {
+        pagination = { ...tableParams.pagination, ...pagination }
+        if (Array.isArray(sorter)) {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.map((value) => value.field).join(',')
+            })
+        } else {
+            setTableParams({
+                pagination,
+                filters,
+                sortField: sorter.field,
+                sortOrder: sorter.order
+            })
+        }
+
+        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+            setBaseData([])
+        }
+    }
+
     useBeforeUnload(
         useCallback(
             (event) => {
@@ -95,6 +132,16 @@ const Template = () => {
                 </span>
             )
         },
+        {
+            title: '平台',
+            dataIndex: 'platform',
+            render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
+            filters: [
+                { text: 'Web', value: 'WEB' },
+                { text: 'Desktop', value: 'DESKTOP' },
+                { text: 'Android', value: 'ANDROID' }
+            ]
+        },
         {
             title: '基板',
             dataIndex: ['base', 'name']
@@ -264,9 +311,6 @@ const Template = () => {
         }
     }
 
-    const filterOption = (input: string, option?: { label: string; value: string }) =>
-        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
-
     const handleOnSubmit = () => {
         if (isSubmitting) {
             return
@@ -294,7 +338,12 @@ const Template = () => {
                     setIsSubmitting(false)
                 })
         } else {
-            void r_sys_tool_template_add(formValues)
+            void r_sys_tool_template_add({
+                ...formValues,
+                baseId: formValues.baseId
+                    ? (formValues.baseId as unknown as string[])[1]
+                    : undefined
+            })
                 .then((res) => {
                     const response = res.data
                     switch (response.code) {
@@ -331,11 +380,28 @@ const Template = () => {
         }
         setIsLoading(true)
 
-        void r_sys_tool_template_get()
+        void r_sys_tool_template_get({
+            currentPage: tableParams.pagination?.current,
+            pageSize: tableParams.pagination?.pageSize,
+            sortField:
+                tableParams.sortField && tableParams.sortOrder
+                    ? (tableParams.sortField as string)
+                    : undefined,
+            sortOrder:
+                tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
+            ...tableParams.filters
+        })
             .then((res) => {
                 const response = res.data
                 if (response.code === DATABASE_SELECT_SUCCESS) {
-                    setTemplateData(response.data!)
+                    setTemplateData(response.data!.records)
+                    setTableParams({
+                        ...tableParams,
+                        pagination: {
+                            ...tableParams.pagination,
+                            total: response.data!.total
+                        }
+                    })
                 } else {
                     void message.error('获取失败，请稍后重试')
                 }
@@ -786,7 +852,7 @@ const Template = () => {
         }
         setIsLoadingBaseData(true)
 
-        void r_sys_tool_base_get()
+        void r_sys_tool_base_get_list()
             .then((res) => {
                 const response = res.data
                 switch (response.code) {
@@ -831,9 +897,64 @@ const Template = () => {
         }
     }, [formValues])
 
+    const baseDataGroupByPlatform = () => {
+        interface Node {
+            label: string
+            value: string
+            children?: Node[]
+        }
+        const temp: Node[] = []
+        baseData.forEach((value) => {
+            if (!temp.length) {
+                temp.push({
+                    label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
+                    value: value.platform,
+                    children: [
+                        {
+                            label: value.name,
+                            value: value.id
+                        }
+                    ]
+                })
+            } else {
+                if (
+                    !temp.some((platform, platformIndex) => {
+                        if (platform.value === value.platform) {
+                            temp[platformIndex].children!.push({
+                                label: value.name,
+                                value: value.id
+                            })
+                            return true
+                        }
+                        return false
+                    })
+                ) {
+                    temp.push({
+                        label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
+                        value: value.platform,
+                        children: [
+                            {
+                                label: value.name,
+                                value: value.id
+                            }
+                        ]
+                    })
+                }
+            }
+        })
+
+        return temp
+    }
+
     useEffect(() => {
         getTemplate()
-    }, [])
+    }, [
+        JSON.stringify(tableParams.filters),
+        JSON.stringify(tableParams.sortField),
+        JSON.stringify(tableParams.sortOrder),
+        JSON.stringify(tableParams.pagination?.pageSize),
+        JSON.stringify(tableParams.pagination?.current)
+    ])
 
     const drawerToolbar = (
         <AntdSpace>
@@ -868,15 +989,13 @@ const Template = () => {
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
-            <AntdForm.Item name={'baseId'} label={'基板'} rules={[{ required: true }]}>
-                <AntdSelect
-                    showSearch
-                    filterOption={filterOption}
-                    options={baseData.map((value) => ({
-                        value: value.id,
-                        label: value.name
-                    }))}
-                />
+            <AntdForm.Item
+                hidden={isDrawerEdit}
+                name={'baseId'}
+                label={'基板'}
+                rules={[{ required: true }]}
+            >
+                <AntdCascader showSearch allowClear={false} options={baseDataGroupByPlatform()} />
             </AntdForm.Item>
             <AntdForm.Item name={'entryPoint'} label={'入口'} rules={[{ required: true }]}>
                 <AntdInput allowClear />
@@ -897,13 +1016,14 @@ const Template = () => {
                                 dataSource={templateData}
                                 columns={templateColumns}
                                 rowKey={(record) => record.id}
+                                pagination={tableParams.pagination}
                                 loading={isLoading}
-                                pagination={false}
                                 scroll={{ x: true }}
                                 expandable={{
                                     expandedRowRender,
                                     onExpand: handleOnExpand
                                 }}
+                                onChange={handleOnTableChange}
                             />
                         </Card>
                         {editingFileName && (
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 851c390..500241c 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -75,6 +75,16 @@ const Tools = () => {
         },
         { dataIndex: 'toolId', title: '工具 ID' },
         { dataIndex: 'ver', title: '版本' },
+        {
+            title: '平台',
+            dataIndex: 'platform',
+            render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
+            filters: [
+                { text: 'Web', value: 'WEB' },
+                { text: 'Desktop', value: 'DESKTOP' },
+                { text: 'Android', value: 'ANDROID' }
+            ]
+        },
         {
             title: '作者',
             render: (_, record) => `${record.author.userInfo.nickname}(${record.author.username})`
@@ -379,7 +389,7 @@ const Tools = () => {
                 .confirm({
                     title: '确定删除',
                     maskClosable: true,
-                    content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.ver} 吗？`
+                    content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}:${value.ver} 吗？`
                 })
                 .then(
                     (confirmed) => {
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index 6270329..b8cf71a 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -42,9 +42,11 @@ const Create = () => {
                 switch (response.code) {
                     case DATABASE_INSERT_SUCCESS:
                         void message.success(
-                            `创建工具 ${response.data!.name}<${response.data!.toolId}>:${response.data!.ver} 成功`
+                            `创建工具 ${response.data!.name}<${response.data!.toolId}:${response.data!.platform.slice(0, 1)}${response.data!.platform.slice(1).toLowerCase()}:${response.data!.ver}> 成功`
+                        )
+                        navigate(
+                            `/edit/${response.data!.toolId}${response.data!.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${response.data!.platform}` : ''}`
                         )
-                        navigate(`/edit/${response.data!.toolId}`)
                         break
                     case DATABASE_DUPLICATE_KEY:
                         void message.warning('已存在相同 ID 的应用')
@@ -82,6 +84,30 @@ const Create = () => {
         return false
     }
 
+    const handleOnPlatformChange = (value: string) => {
+        setLoadingTemplate(true)
+        void r_tool_template_get({
+            platform: value
+        })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setTemplateData(response.data!)
+                        response.data?.length
+                            ? form.setFieldValue('templateId', response.data?.[0].id)
+                            : form.setFieldValue('templateId', null)
+                        response.data?.length && handleOnTemplateChange(response.data?.[0].id)
+                        break
+                    default:
+                        void message.error('获取模板列表失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setLoadingTemplate(false)
+            })
+    }
+
     const handleOnTemplateChange = (value: string) => {
         setPreviewTemplate(value)
         if (templateDetailData[value]) {
@@ -110,6 +136,7 @@ const Create = () => {
         if (!template) {
             return
         }
+        setCompiledCode('')
         try {
             const baseDist = base64ToStr(template.base.dist.data!)
             const files = base64ToFiles(template.source.data!)
@@ -123,6 +150,7 @@ const Create = () => {
                 })
                 .catch((reason) => {
                     void message.error(`编译失败：${reason}`)
+                    setCompiledCode(baseDist)
                 })
         } catch (e) {
             void message.error(`载入模板 ${templateDetailData[previewTemplate].name} 失败`)
@@ -140,22 +168,7 @@ const Create = () => {
     }, [form, formValues?.keywords])
 
     useEffect(() => {
-        setLoadingTemplate(true)
         setLoadingCategory(true)
-        void r_tool_template_get()
-            .then((res) => {
-                const response = res.data
-                switch (response.code) {
-                    case DATABASE_SELECT_SUCCESS:
-                        setTemplateData(response.data!)
-                        break
-                    default:
-                        void message.error('获取模板列表失败，请稍后重试')
-                }
-            })
-            .finally(() => {
-                setLoadingTemplate(false)
-            })
         void r_tool_category_get()
             .then((res) => {
                 const response = res.data
@@ -254,6 +267,24 @@ const Create = () => {
                                             placeholder={'请输入工具 ID'}
                                         />
                                     </AntdForm.Item>
+                                    <AntdForm.Item
+                                        label={'平台'}
+                                        name={'platform'}
+                                        rules={[{ required: true }]}
+                                    >
+                                        <AntdSelect
+                                            placeholder={'请选择平台'}
+                                            onChange={handleOnPlatformChange}
+                                        >
+                                            <AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
+                                            <AntdSelect.Option key={'DESKTOP'}>
+                                                Desktop
+                                            </AntdSelect.Option>
+                                            <AntdSelect.Option key={'ANDROID'}>
+                                                Android
+                                            </AntdSelect.Option>
+                                        </AntdSelect>
+                                    </AntdForm.Item>
                                     <AntdForm.Item label={'简介'} name={'description'}>
                                         <AntdInput.TextArea
                                             autoSize={{ minRows: 6, maxRows: 6 }}
@@ -344,11 +375,13 @@ const Create = () => {
                         <FlexBox>预览</FlexBox>
                     </Card>
                     <Card className={'preview'}>
-                        {compiledCode && (
+                        {compiledCode ? (
                             <Playground.Output.Preview.Render
                                 iframeKey={previewTemplate}
                                 compiledCode={compiledCode}
                             />
+                        ) : (
+                            <span className={'no-preview'}>暂无预览</span>
                         )}
                     </Card>
                 </FlexBox>
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index 6a56e0e..907c117 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -26,6 +26,9 @@ import Card from '@/components/common/Card'
 const Edit = () => {
     const navigate = useNavigate()
     const { toolId } = useParams()
+    const [searchParams] = useSearchParams({
+        platform: import.meta.env.VITE_PLATFORM
+    })
     const [form] = AntdForm.useForm<ToolUpdateParam>()
     const formValues = AntdForm.useWatch([], form)
     const [loading, setLoading] = useState(false)
@@ -98,13 +101,13 @@ const Edit = () => {
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
@@ -164,13 +167,13 @@ const Edit = () => {
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
@@ -211,7 +214,7 @@ const Edit = () => {
         setLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
-        void r_tool_detail('!', toolId!, 'latest')
+        void r_tool_detail('!', toolId!, 'latest', searchParams.get('platform') as Platform)
             .then((res) => {
                 const response = res.data
                 switch (response.code) {
@@ -225,20 +228,20 @@ const Edit = () => {
                             case 'PROCESSING':
                                 void message.warning('工具审核中，请勿修改')
                                 setTimeout(() => {
-                                    navigate(-1)
+                                    navigate('/')
                                 }, 3000)
                                 break
                             default:
                                 void message.warning('请先创建新版本后编辑工具')
                                 setTimeout(() => {
-                                    navigate(-1)
+                                    navigate('/')
                                 }, 3000)
                         }
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
@@ -301,6 +304,10 @@ const Edit = () => {
     }, [formValues])
 
     useEffect(() => {
+        if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
+            navigate('/')
+            return
+        }
         getTool()
     }, [])
 
diff --git a/src/pages/Tools/Source.tsx b/src/pages/Tools/Source.tsx
index 0c79b7b..e5da384 100644
--- a/src/pages/Tools/Source.tsx
+++ b/src/pages/Tools/Source.tsx
@@ -11,6 +11,9 @@ import { getLoginStatus } from '@/util/auth'
 const Source = () => {
     const navigate = useNavigate()
     const { username, toolId, ver } = useParams()
+    const [searchParams] = useSearchParams({
+        platform: import.meta.env.VITE_PLATFORM
+    })
     const [loading, setLoading] = useState(false)
     const [files, setFiles] = useState<IFiles>({})
     const [selectedFileName, setSelectedFileName] = useState('')
@@ -31,7 +34,12 @@ const Source = () => {
         setLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
-        void r_tool_detail(username!, toolId!, ver || 'latest')
+        void r_tool_detail(
+            username!,
+            toolId!,
+            ver || 'latest',
+            searchParams.get('platform') as Platform
+        )
             .then((res) => {
                 const response = res.data
                 switch (response.code) {
@@ -41,7 +49,7 @@ const Source = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
@@ -57,7 +65,7 @@ const Source = () => {
     useEffect(() => {
         if (username === '!' && !getLoginStatus()) {
             setTimeout(() => {
-                navigate(-1)
+                navigate('/')
             }, 3000)
             return
         }
@@ -69,6 +77,10 @@ const Source = () => {
             navigate(`/source/!/${toolId}/latest`)
             return
         }
+        if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
+            navigate('/')
+            return
+        }
         getTool()
     }, [])
 
diff --git a/src/pages/Tools/User.tsx b/src/pages/Tools/User.tsx
index d12569e..67d2508 100644
--- a/src/pages/Tools/User.tsx
+++ b/src/pages/Tools/User.tsx
@@ -159,7 +159,7 @@ const User = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.warning('用户不存在')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index 2e1c0f6..92bbbc8 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -12,6 +12,9 @@ import Card from '@/components/common/Card'
 const View = () => {
     const navigate = useNavigate()
     const { username, toolId, ver } = useParams()
+    const [searchParams] = useSearchParams({
+        platform: import.meta.env.VITE_PLATFORM
+    })
     const [loading, setLoading] = useState(false)
     const [compiledCode, setCompiledCode] = useState('')
 
@@ -52,7 +55,12 @@ const View = () => {
         setLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
-        void r_tool_detail(username!, toolId!, ver || 'latest')
+        void r_tool_detail(
+            username!,
+            toolId!,
+            ver || 'latest',
+            searchParams.get('platform') as Platform
+        )
             .then((res) => {
                 const response = res.data
                 switch (response.code) {
@@ -62,7 +70,7 @@ const View = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate(-1)
+                            navigate('/')
                         }, 3000)
                         break
                     default:
@@ -78,7 +86,7 @@ const View = () => {
     useEffect(() => {
         if (username === '!' && !getLoginStatus()) {
             setTimeout(() => {
-                navigate(-1)
+                navigate('/')
             }, 3000)
             return
         }
@@ -90,6 +98,10 @@ const View = () => {
             navigate(`/view/!/${toolId}/latest`)
             return
         }
+        if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
+            navigate('/')
+            return
+        }
         getTool()
     }, [])
 
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 2cc3bbe..edac408 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -14,6 +14,7 @@ import {
     TOOL_SUBMIT_SUCCESS,
     TOOL_UNDER_REVIEW
 } from '@/constants/common.constants'
+import { checkDesktop } from '@/util/common'
 import { getLoginStatus } from '@/util/auth'
 import {
     r_tool_cancel,
@@ -138,18 +139,30 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
     const navigate = useNavigate()
     const [selectedTool, setSelectedTool] = useState(tools[0])
 
-    const handleOnVersionChange = (value: string) => {
-        setSelectedTool(tools.find((item) => item.id === value)!)
+    const handleOnVersionChange = (value: (string | number)[]) => {
+        setSelectedTool(tools.find((item) => item.id === value[1])!)
     }
 
     const handleOnOpenTool = () => {
-        navigate(`/view/!/${selectedTool.toolId}/${selectedTool.ver}`)
+        if (checkDesktop() || selectedTool.platform !== 'DESKTOP') {
+            navigate(
+                `/view/!/${selectedTool.toolId}/${selectedTool.ver}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
+            )
+        } else {
+            void message.warning('此应用需要桌面端环境，请在桌面端打开')
+        }
     }
 
     const handleOnEditTool = () => {
         if (['NONE', 'REJECT'].includes(selectedTool.review)) {
             return () => {
-                navigate(`/edit/${tools[0].toolId}`)
+                if (checkDesktop() || selectedTool.platform !== 'DESKTOP') {
+                    navigate(
+                        `/edit/${selectedTool.toolId}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
+                    )
+                } else {
+                    void message.warning('此应用需要桌面端环境，请在桌面端编辑')
+                }
             }
         }
         return undefined
@@ -158,7 +171,9 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
     const handleOnSourceTool = () => {
         if (selectedTool.review === 'PASS') {
             return () => {
-                navigate(`/source/!/${selectedTool.toolId}/${selectedTool.ver}`)
+                navigate(
+                    `/source/!/${selectedTool.toolId}/${selectedTool.ver}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
+                )
             }
         }
         return undefined
@@ -190,6 +205,55 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
         onUpgrade?.(selectedTool)
     }
 
+    const toolsGroupByPlatform = (tools: ToolVo[]) => {
+        interface Node {
+            label: string
+            value: string
+            children?: Node[]
+        }
+        const temp: Node[] = []
+        tools.forEach((value) => {
+            if (!temp.length) {
+                temp.push({
+                    label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
+                    value: value.platform,
+                    children: [
+                        {
+                            label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
+                            value: value.id
+                        }
+                    ]
+                })
+            } else {
+                if (
+                    !temp.some((platform, platformIndex) => {
+                        if (platform.value === value.platform) {
+                            temp[platformIndex].children!.push({
+                                label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
+                                value: value.id
+                            })
+                            return true
+                        }
+                        return false
+                    })
+                ) {
+                    temp.push({
+                        label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
+                        value: value.platform,
+                        children: [
+                            {
+                                label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`,
+                                value: value.id
+                            }
+                        ]
+                    })
+                }
+            }
+        })
+
+        return temp
+    }
+
     return (
         <CommonCard
             icon={<img src={`data:image/svg+xml;base64,${selectedTool.icon}`} alt={'Icon'} />}
@@ -202,15 +266,17 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
             onCancelReview={handleOnCancelReview()}
             onDelete={handleOnDeleteTool}
         >
-            <AntdSelect
+            <AntdCascader
                 className={'version-select'}
                 size={'small'}
-                value={selectedTool.id}
+                allowClear={false}
+                value={[
+                    tools.find((value) => value.id === selectedTool.id)!.platform,
+                    selectedTool.id
+                ]}
+                displayRender={(label: string[]) => `${label[0].slice(0, 1)}-${label[1]}`}
                 onChange={handleOnVersionChange}
-                options={tools.map((value) => ({
-                    value: value.id,
-                    label: `${value.ver}${value.review !== 'PASS' ? '*' : ''}`
-                }))}
+                options={toolsGroupByPlatform(tools)}
             />
             {tools.every((value) => value.review === 'PASS') && (
                 <AntdTooltip title={'更新'}>
@@ -237,7 +303,7 @@ const Tools = () => {
             .confirm({
                 title: '删除',
                 maskClosable: true,
-                content: `确定删除工具 ${tool.name}:${tool.ver} 吗？`
+                content: `确定删除工具 ${tool.toolId}:${tool.platform.slice(0, 1)}${tool.platform.slice(1).toLowerCase()}:${tool.ver} 吗？`
             })
             .then(
                 (confirmed) => {
@@ -313,14 +379,22 @@ const Tools = () => {
                     () => {
                         return new Promise<void>((resolve, reject) => {
                             void r_tool_upgrade({
-                                toolId: upgradeForm.getFieldValue('toolId') as string,
-                                ver: upgradeForm.getFieldValue('ver') as string
+                                toolId: tool.toolId,
+                                ver: upgradeForm.getFieldValue('ver') as string,
+                                platform: tool.platform
                             }).then((res) => {
                                 const response = res.data
                                 switch (response.code) {
                                     case DATABASE_UPDATE_SUCCESS:
                                         void message.success('创建新版本成功')
-                                        navigate(`/edit/${response.data!.toolId}`)
+                                        if (
+                                            checkDesktop() ||
+                                            response.data!.platform !== 'DESKTOP'
+                                        ) {
+                                            navigate(
+                                                `/edit/${response.data!.toolId}${response.data!.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${response.data!.platform}` : ''}`
+                                            )
+                                        }
                                         resolve()
                                         break
                                     case TOOL_ILLEGAL_VERSION:
diff --git a/src/services/system.tsx b/src/services/system.tsx
index c64bef0..047b0be 100644
--- a/src/services/system.tsx
+++ b/src/services/system.tsx
@@ -21,7 +21,8 @@ import {
     URL_SYS_TOOL_BASE,
     URL_SYS_TOOL_TEMPLATE,
     URL_SYS_TOOL,
-    URL_SYS_SETTINGS_TWO_FACTOR
+    URL_SYS_SETTINGS_TWO_FACTOR,
+    URL_SYS_TOOL_BASE_LIST
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
@@ -145,7 +146,10 @@ export const r_sys_tool_category_update = (param: ToolCategoryAddEditParam) =>
 export const r_sys_tool_category_delete = (id: string) =>
     request.delete(`${URL_SYS_TOOL_CATEGORY}/${id}`)
 
-export const r_sys_tool_base_get = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE)
+export const r_sys_tool_base_get = (param: PageParam) =>
+    request.get<PageVo<ToolBaseVo>>(URL_SYS_TOOL_BASE, param)
+
+export const r_sys_tool_base_get_list = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE_LIST)
 
 export const r_sys_tool_base_get_one = (id: string) =>
     request.get<ToolBaseVo>(`${URL_SYS_TOOL_BASE}/${id}`)
@@ -158,7 +162,8 @@ export const r_sys_tool_base_update = (param: ToolBaseAddEditParam) =>
 
 export const r_sys_tool_base_delete = (id: string) => request.delete(`${URL_SYS_TOOL_BASE}/${id}`)
 
-export const r_sys_tool_template_get = () => request.get<ToolTemplateVo[]>(URL_SYS_TOOL_TEMPLATE)
+export const r_sys_tool_template_get = (param: PageParam) =>
+    request.get<PageVo<ToolTemplateVo>>(URL_SYS_TOOL_TEMPLATE, param)
 
 export const r_sys_tool_template_get_one = (id: string) =>
     request.get<ToolTemplateVo>(`${URL_SYS_TOOL_TEMPLATE}/${id}`)
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
index 1bb8f18..995bb79 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.tsx
@@ -7,7 +7,8 @@ import {
     URL_TOOL_TEMPLATE
 } from '@/constants/urls.constants'
 
-export const r_tool_template_get = () => request.get<ToolTemplateVo[]>(URL_TOOL_TEMPLATE)
+export const r_tool_template_get = (param: { platform: string }) =>
+    request.get<ToolTemplateVo[]>(URL_TOOL_TEMPLATE, param)
 
 export const r_tool_template_get_one = (id: string) =>
     request.get<ToolTemplateVo>(`${URL_TOOL_TEMPLATE}/${id}`)
@@ -20,8 +21,8 @@ export const r_tool_upgrade = (param: ToolUpgradeParam) => request.patch<ToolVo>
 
 export const r_tool_get = () => request.get<ToolVo[]>(URL_TOOL)
 
-export const r_tool_detail = (username: string, toolId: string, ver: string) =>
-    request.get<ToolVo>(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`)
+export const r_tool_detail = (username: string, toolId: string, ver: string, platform: Platform) =>
+    request.get<ToolVo>(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`, { platform })
 
 export const r_tool_update = (param: ToolUpdateParam) => request.put<ToolVo>(URL_TOOL, param)
 
diff --git a/src/util/common.tsx b/src/util/common.tsx
index 043b554..f32740e 100644
--- a/src/util/common.tsx
+++ b/src/util/common.tsx
@@ -118,7 +118,7 @@ export const formatByteSize = (byteSize: number): string => {
 }
 
 const formatByte = (size: number, unit: ByteUnit): string => {
-    let precision
+    let precision: number
     if ((size * 1000) % 10 > 0) {
         precision = 3
     } else if ((size * 100) % 10 > 0) {
@@ -131,3 +131,5 @@ const formatByte = (size: number, unit: ByteUnit): string => {
 
     return `${size.toFixed(precision)}${unit}`
 }
+
+export const checkDesktop = () => import.meta.env.VITE_PLATFORM === 'DESKTOP'

From ad0907892c1ab5109b402ecbc79dfe11981cf0cc Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 19 Mar 2024 18:33:40 +0800
Subject: [PATCH 245/307] Feat: store - support multiple platforms

---
 build/resolvers/antd.ts               |   6 +-
 package-lock.json                     |   6 +
 package.json                          |   3 +-
 src/assets/css/pages/tools/store.scss |  10 +-
 src/assets/css/pages/tools/user.scss  |  10 +-
 src/assets/svg/browser.svg            |   1 +
 src/assets/svg/desktop.svg            |   1 +
 src/assets/svg/info.svg               |   1 +
 src/assets/svg/mobile.svg             |   1 +
 src/main.tsx                          |   5 +-
 src/pages/Tools/Store.tsx             | 266 ++++++++++++++++++++------
 src/pages/Tools/User.tsx              | 229 +++++++++++++++++-----
 12 files changed, 429 insertions(+), 110 deletions(-)
 create mode 100644 src/assets/svg/browser.svg
 create mode 100644 src/assets/svg/desktop.svg
 create mode 100644 src/assets/svg/info.svg
 create mode 100644 src/assets/svg/mobile.svg

diff --git a/build/resolvers/antd.ts b/build/resolvers/antd.ts
index 0bb5132..4506424 100644
--- a/build/resolvers/antd.ts
+++ b/build/resolvers/antd.ts
@@ -149,7 +149,10 @@ const matchComponents: IMatcher[] = [
         pattern: /^Mentions/,
         styleDir: 'mentions'
     },
-
+    {
+        pattern: /^QRCode/,
+        styleDir: 'qr-code'
+    },
     {
         pattern: /^Step/,
         styleDir: 'steps'
@@ -337,6 +340,7 @@ const primitiveNames = [
     'Rate',
     'Result',
     'Row',
+    'QRCode',
     'Select',
     'SelectOptGroup',
     'SelectOption',
diff --git a/package-lock.json b/package-lock.json
index fd47514..a47f8f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@typescript/ata": "^0.9.4",
         "antd": "^5.13.2",
         "axios": "^1.6.5",
+        "custom-protocol-check": "^1.4.0",
         "dayjs": "^1.11.10",
         "echarts": "^5.4.3",
         "esbuild-wasm": "^0.19.12",
@@ -2900,6 +2901,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/custom-protocol-check": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/custom-protocol-check/-/custom-protocol-check-1.4.0.tgz",
+      "integrity": "sha512-eMTyp8AKnE5eo+mKNqG3743eb5ZND5LhBgf9F8BN2tVdhSBnOCHH7me7iTcv0BUDhUW2dBQiHWLWMy776yZW1A=="
+    },
     "node_modules/data-urls": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
diff --git a/package.json b/package.json
index 122f9ac..2e0d431 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "dev": "vite",
     "dev-host": "vite --host 0.0.0.0",
     "build": "vite build && npm run typecheck",
-    "build-test": "vite build --mode testing",
+    "build-test": "vite build --mode testing && npm run typecheck",
     "typecheck": "tsc",
     "clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -21,6 +21,7 @@
     "@typescript/ata": "^0.9.4",
     "antd": "^5.13.2",
     "axios": "^1.6.5",
+    "custom-protocol-check": "^1.4.0",
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "esbuild-wasm": "^0.19.12",
diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.scss
index ffc4ab0..3bffda7 100644
--- a/src/assets/css/pages/tools/store.scss
+++ b/src/assets/css/pages/tools/store.scss
@@ -99,10 +99,12 @@
         }
 
         .operation {
+          display: flex;
           position: absolute;
-          top: 6px;
+          top: 10px;
           right: 12px;
           font-size: 1.6em;
+          gap: 4px;
 
           > *:hover {
             color: constants.$font-secondary-color;
@@ -141,4 +143,10 @@
       color: constants.$font-secondary-color;
     }
   }
+
+  .android-qrcode {
+    align-items: center;
+    transform: translateX(-16px);
+    gap: 20px;
+  }
 }
diff --git a/src/assets/css/pages/tools/user.scss b/src/assets/css/pages/tools/user.scss
index f0d02a1..05f0cc5 100644
--- a/src/assets/css/pages/tools/user.scss
+++ b/src/assets/css/pages/tools/user.scss
@@ -141,10 +141,12 @@
           }
 
           .operation {
+            display: flex;
             position: absolute;
-            top: 6px;
+            top: 10px;
             right: 12px;
             font-size: 1.6em;
+            gap: 4px;
 
             > *:hover {
               color: constants.$font-secondary-color;
@@ -185,4 +187,10 @@
       }
     }
   }
+
+  .android-qrcode {
+    align-items: center;
+    transform: translateX(-16px);
+    gap: 20px;
+  }
 }
diff --git a/src/assets/svg/browser.svg b/src/assets/svg/browser.svg
new file mode 100644
index 0000000..a4f2afe
--- /dev/null
+++ b/src/assets/svg/browser.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 885.76a392.2944 392.2944 0 1 1 392.192-392.192A392.6016 392.6016 0 0 1 512 885.76z m0-702.5664A310.3744 310.3744 0 1 0 822.6816 493.568 310.6816 310.6816 0 0 0 512 183.1936z" /><path d="M978.432 263.8848c-22.9376-46.6944-127.2832-36.5568-193.7408-11.3664l29.0816 76.5952c4.3008-1.6384 8.6016-3.1744 12.8-4.5056l-8.704 5.4272c-76.0832 47.0016-187.0848 107.1104-304.64 165.0688S280.2688 604.16 196.7104 636.1088l-2.1504 0.8192-30.72-49.5616C91.136 632.2176 22.4256 674.7136 46.3872 723.1488c9.216 18.8416 26.3168 26.112 48.3328 26.112 34.816 0 81.92-18.0224 131.072-36.5568 87.1424-33.0752 202.0352-84.1728 323.584-144.0768S781.6192 448.7168 860.8768 399.36c72.8064-44.544 141.5168-87.04 117.5552-135.4752zM125.7472 675.0208l24.064-26.624 11.3664 26.624z m739.7376-350.5152a98.304 98.304 0 0 0-18.2272-32.4608 152.1664 152.1664 0 0 1 57.0368-10.24 115.5072 115.5072 0 0 1-38.8096 42.7008z" /></svg>
diff --git a/src/assets/svg/desktop.svg b/src/assets/svg/desktop.svg
new file mode 100644
index 0000000..67759d5
--- /dev/null
+++ b/src/assets/svg/desktop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M810.666667 128H213.333333a128 128 0 0 0-128 128v341.333333a128 128 0 0 0 128 128h256v85.333334H298.666667a42.666667 42.666667 0 0 0 0 85.333333h426.666666a42.666667 42.666667 0 0 0 0-85.333333h-170.666666v-85.333334h256a128 128 0 0 0 128-128V256a128 128 0 0 0-128-128z m42.666666 469.333333a42.666667 42.666667 0 0 1-42.666666 42.666667H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V256a42.666667 42.666667 0 0 1 42.666666-42.666667h597.333334a42.666667 42.666667 0 0 1 42.666666 42.666667z" /></svg>
diff --git a/src/assets/svg/info.svg b/src/assets/svg/info.svg
new file mode 100644
index 0000000..d0312db
--- /dev/null
+++ b/src/assets/svg/info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 938.715429A426.642286 426.642286 0 1 1 512 85.357714a426.642286 426.642286 0 0 1 0 853.357715z m-42.642286-469.357715v256h85.284572v-256H469.284571z m0-170.642285V384h85.284572V298.715429H469.284571z" /></svg>
diff --git a/src/assets/svg/mobile.svg b/src/assets/svg/mobile.svg
new file mode 100644
index 0000000..e6de593
--- /dev/null
+++ b/src/assets/svg/mobile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M768 64a64 64 0 0 1 64 64v768a64 64 0 0 1-64 64H256a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h512z m-32 64H288a32 32 0 0 0-32 32v704a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32z m-223.488 608a48 48 0 1 1 0 96 48 48 0 0 1 0-96z" /></svg>
diff --git a/src/main.tsx b/src/main.tsx
index c8665a4..84f0207 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -10,7 +10,10 @@ createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <AntdConfigProvider
             theme={{
-                token: { colorPrimary: COLOR_MAIN, colorLinkHover: COLOR_MAIN },
+                token: {
+                    colorPrimary: COLOR_MAIN,
+                    colorLinkHover: COLOR_MAIN
+                },
                 components: {
                     Tree: {
                         colorBgContainer: 'transparent'
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index 5de53ab..0e11024 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -1,8 +1,10 @@
 import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode, UIEvent } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/store.scss'
-import { COLOR_BACKGROUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { COLOR_BACKGROUND, COLOR_MAIN, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { checkDesktop } from '@/util/common'
 import { r_tool_store_get } from '@/services/tool'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
@@ -16,11 +18,12 @@ interface CommonCardProps
     toolId: string
     toolDesc: string
     options?: TiltOptions
-    url: string
     authorName: string
     authorAvatar: string
     authorUsername: string
     ver: string
+    platform: Platform
+    supportPlatform: Platform[]
 }
 
 const CommonCard = ({
@@ -38,14 +41,16 @@ const CommonCard = ({
         ['max-glare']: 0.3,
         scale: 1.03
     },
-    url,
     authorName,
     authorAvatar,
     authorUsername,
     ver,
+    platform,
+    supportPlatform,
     ...props
 }: CommonCardProps) => {
     const navigate = useNavigate()
+    const [modal, contextHolder] = AntdModal.useModal()
     const cardRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
@@ -53,7 +58,31 @@ const CommonCard = ({
     }, [options])
 
     const handleCardOnClick = () => {
-        url && navigate(url)
+        if (!checkDesktop() && platform === 'DESKTOP') {
+            void message.warning('此应用需要桌面端环境，请在桌面端打开')
+            return
+        }
+        if (platform === 'ANDROID') {
+            void modal.info({
+                icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+                title: 'Android 端',
+                centered: true,
+                maskClosable: true,
+                content: (
+                    <FlexBox className={'android-qrcode'}>
+                        <AntdQRCode
+                            value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                            size={300}
+                        />
+                        <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                    </FlexBox>
+                )
+            })
+            return
+        }
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
     }
 
     const handleOnClickAuthor = (e: MouseEvent<HTMLDivElement>) => {
@@ -63,50 +92,130 @@ const CommonCard = ({
 
     const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigate(`/source/${authorUsername}/${toolId}`)
+        navigate(
+            `/source/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
+    }
+
+    const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        void modal.info({
+            icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+            title: 'Android 端',
+            centered: true,
+            maskClosable: true,
+            content: (
+                <FlexBox className={'android-qrcode'}>
+                    <AntdQRCode
+                        value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                        size={300}
+                    />
+                    <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                </FlexBox>
+            )
+        })
+    }
+
+    const handleOnDesktopBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        if (!checkDesktop()) {
+            void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
+            protocolCheck(
+                `oxygen://openurl/view/${authorUsername}/${toolId}`,
+                () => {
+                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+                    void message.destroy('LOADING')
+                },
+                () => {
+                    void message.destroy('LOADING')
+                },
+                2000,
+                () => {
+                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+                    void message.destroy('LOADING')
+                }
+            )
+            return
+        }
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
+    }
+
+    const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
     }
 
     return (
-        <Card
-            style={{ overflow: 'visible', ...style }}
-            ref={cardRef}
-            {...props}
-            onClick={handleCardOnClick}
-        >
-            <FlexBox className={'common-card'}>
-                <div className={'icon'}>{icon}</div>
-                <div className={'version'}>
-                    <AntdTag>V{ver}</AntdTag>
-                </div>
-                <div className={'info'}>
-                    <div className={'tool-name'}>{toolName}</div>
-                    <div className={'tool-id'}>{`ID: ${toolId}`}</div>
-                    {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
-                </div>
-                <div className={'author'} onClick={handleOnClickAuthor}>
-                    <div className={'avatar'}>
-                        <AntdAvatar
-                            src={
-                                <AntdImage
-                                    preview={false}
-                                    src={`data:image/png;base64,${authorAvatar}`}
-                                    alt={'Avatar'}
-                                />
-                            }
-                            style={{ background: COLOR_BACKGROUND }}
-                        />
+        <>
+            <Card
+                style={{ overflow: 'visible', ...style }}
+                ref={cardRef}
+                {...props}
+                onClick={handleCardOnClick}
+            >
+                <FlexBox className={'common-card'}>
+                    <div className={'icon'}>{icon}</div>
+                    <div className={'version'}>
+                        <AntdTag>
+                            {platform.slice(0, 1)}-{ver}
+                        </AntdTag>
                     </div>
-                    <AntdTooltip title={authorUsername}>
-                        <div className={'author-name'}>{authorName}</div>
-                    </AntdTooltip>
-                </div>
-                <div className={'operation'}>
-                    <AntdTooltip title={'源码'}>
-                        <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
-                    </AntdTooltip>
-                </div>
-            </FlexBox>
-        </Card>
+                    <div className={'info'}>
+                        <div className={'tool-name'}>{toolName}</div>
+                        <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                        {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
+                    </div>
+                    <div className={'author'} onClick={handleOnClickAuthor}>
+                        <div className={'avatar'}>
+                            <AntdAvatar
+                                src={
+                                    <AntdImage
+                                        preview={false}
+                                        src={`data:image/png;base64,${authorAvatar}`}
+                                        alt={'Avatar'}
+                                    />
+                                }
+                                style={{ background: COLOR_BACKGROUND }}
+                            />
+                        </div>
+                        <AntdTooltip title={authorUsername}>
+                            <div className={'author-name'}>{authorName}</div>
+                        </AntdTooltip>
+                    </div>
+                    <div className={'operation'}>
+                        {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
+                            <AntdTooltip title={'Android 端'}>
+                                <Icon
+                                    component={IconOxygenMobile}
+                                    onClick={handleOnAndroidBtnClick}
+                                />
+                            </AntdTooltip>
+                        )}
+                        {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
+                            <AntdTooltip title={'Web 端'}>
+                                <Icon component={IconOxygenBrowser} onClick={handleOnWebBtnClick} />
+                            </AntdTooltip>
+                        )}
+                        {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
+                            <AntdTooltip title={'桌面端'}>
+                                <Icon
+                                    component={IconOxygenDesktop}
+                                    onClick={handleOnDesktopBtnClick}
+                                />
+                            </AntdTooltip>
+                        )}
+                        <AntdTooltip title={'源码'}>
+                            <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
+                        </AntdTooltip>
+                    </div>
+                </FlexBox>
+            </Card>
+            {contextHolder}
+        </>
     )
 }
 
@@ -231,25 +340,58 @@ const Store = () => {
                     </div>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         {!toolData.length && <div className={'no-tool'}>未找到任何工具</div>}
-                        {toolData?.map((value) => (
-                            <CommonCard
-                                key={value.id}
-                                icon={
-                                    <img
-                                        src={`data:image/svg+xml;base64,${value.icon}`}
-                                        alt={'Icon'}
-                                    />
+                        {toolData
+                            ?.reduce((previousValue: ToolVo[], currentValue) => {
+                                if (
+                                    !previousValue.some(
+                                        (value) =>
+                                            value.author.id === currentValue.author.id &&
+                                            value.toolId === currentValue.toolId
+                                    )
+                                ) {
+                                    previousValue.push(currentValue)
                                 }
-                                toolName={value.name}
-                                toolId={value.toolId}
-                                toolDesc={value.description}
-                                url={`/view/${value.author.username}/${value.toolId}`}
-                                authorName={value.author.userInfo.nickname}
-                                authorAvatar={value.author.userInfo.avatar}
-                                authorUsername={value.author.username}
-                                ver={value.ver}
-                            />
-                        ))}
+                                return previousValue
+                            }, [])
+                            .map((item) => {
+                                const tools = toolData.filter(
+                                    (value) =>
+                                        value.author.id === item.author.id &&
+                                        value.toolId === item.toolId
+                                )
+                                const webTool = tools.find((value) => value.platform === 'WEB')
+                                const desktopTool = tools.find(
+                                    (value) => value.platform === 'DESKTOP'
+                                )
+                                const androidTool = tools.find(
+                                    (value) => value.platform === 'ANDROID'
+                                )
+                                const firstTool =
+                                    (checkDesktop()
+                                        ? desktopTool || webTool
+                                        : webTool || desktopTool) || androidTool
+
+                                return (
+                                    <CommonCard
+                                        key={firstTool!.id}
+                                        icon={
+                                            <img
+                                                src={`data:image/svg+xml;base64,${firstTool!.icon}`}
+                                                alt={'Icon'}
+                                            />
+                                        }
+                                        toolName={firstTool!.name}
+                                        toolId={firstTool!.toolId}
+                                        toolDesc={firstTool!.description}
+                                        authorName={firstTool!.author.userInfo.nickname}
+                                        authorAvatar={firstTool!.author.userInfo.avatar}
+                                        authorUsername={firstTool!.author.username}
+                                        ver={firstTool!.ver}
+                                        platform={firstTool!.platform}
+                                        supportPlatform={tools.map((value) => value.platform)}
+                                    />
+                                )
+                            })}
                         {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
                     </FlexBox>
                 </HideScrollbar>
diff --git a/src/pages/Tools/User.tsx b/src/pages/Tools/User.tsx
index 67d2508..2d1c9e5 100644
--- a/src/pages/Tools/User.tsx
+++ b/src/pages/Tools/User.tsx
@@ -1,12 +1,15 @@
 import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/user.scss'
 import {
     COLOR_BACKGROUND,
+    COLOR_MAIN,
     DATABASE_NO_RECORD_FOUND,
     DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
+import { checkDesktop } from '@/util/common'
 import { r_sys_user_info_get_basic } from '@/services/system'
 import { r_tool_store_get_by_username } from '@/services/tool'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -21,9 +24,10 @@ interface CommonCardProps
     toolId: string
     toolDesc: string
     options?: TiltOptions
-    url: string
     authorUsername: string
     ver: string
+    platform: Platform
+    supportPlatform: Platform[]
 }
 
 const CommonCard = ({
@@ -41,12 +45,14 @@ const CommonCard = ({
         ['max-glare']: 0.3,
         scale: 1.03
     },
-    url,
     authorUsername,
     ver,
+    platform,
+    supportPlatform,
     ...props
 }: CommonCardProps) => {
     const navigate = useNavigate()
+    const [modal, contextHolder] = AntdModal.useModal()
     const cardRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
@@ -54,38 +60,142 @@ const CommonCard = ({
     }, [options])
 
     const handleCardOnClick = () => {
-        url && navigate(url)
+        if (!checkDesktop() && platform === 'DESKTOP') {
+            void message.warning('此应用需要桌面端环境，请在桌面端打开')
+            return
+        }
+        if (platform === 'ANDROID') {
+            void modal.info({
+                icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+                title: 'Android 端',
+                centered: true,
+                maskClosable: true,
+                content: (
+                    <FlexBox className={'android-qrcode'}>
+                        <AntdQRCode
+                            value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                            size={300}
+                        />
+                        <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                    </FlexBox>
+                )
+            })
+            return
+        }
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
     }
 
     const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigate(`/source/${authorUsername}/${toolId}`)
+        navigate(
+            `/source/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
+    }
+
+    const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        void modal.info({
+            icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+            title: 'Android 端',
+            centered: true,
+            maskClosable: true,
+            content: (
+                <FlexBox className={'android-qrcode'}>
+                    <AntdQRCode
+                        value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                        size={300}
+                    />
+                    <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                </FlexBox>
+            )
+        })
+    }
+
+    const handleOnDesktopBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        if (!checkDesktop()) {
+            void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
+            protocolCheck(
+                `oxygen://openurl/view/${authorUsername}/${toolId}`,
+                () => {
+                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+                    void message.destroy('LOADING')
+                },
+                () => {
+                    void message.destroy('LOADING')
+                },
+                2000,
+                () => {
+                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+                    void message.destroy('LOADING')
+                }
+            )
+            return
+        }
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
+    }
+
+    const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigate(
+            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+        )
     }
 
     return (
-        <Card
-            style={{ overflow: 'visible', ...style }}
-            ref={cardRef}
-            {...props}
-            onClick={handleCardOnClick}
-        >
-            <FlexBox className={'common-card'}>
-                <div className={'icon'}>{icon}</div>
-                <div className={'version'}>
-                    <AntdTag>V{ver}</AntdTag>
-                </div>
-                <div className={'info'}>
-                    <div className={'tool-name'}>{toolName}</div>
-                    <div className={'tool-id'}>{`ID: ${toolId}`}</div>
-                    {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
-                </div>
-                <div className={'operation'}>
-                    <AntdTooltip title={'源码'}>
-                        <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
-                    </AntdTooltip>
-                </div>
-            </FlexBox>
-        </Card>
+        <>
+            <Card
+                style={{ overflow: 'visible', ...style }}
+                ref={cardRef}
+                {...props}
+                onClick={handleCardOnClick}
+            >
+                <FlexBox className={'common-card'}>
+                    <div className={'icon'}>{icon}</div>
+                    <div className={'version'}>
+                        <AntdTag>
+                            {platform.slice(0, 1)}-{ver}
+                        </AntdTag>
+                    </div>
+                    <div className={'info'}>
+                        <div className={'tool-name'}>{toolName}</div>
+                        <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                        {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
+                    </div>
+                    <div className={'operation'}>
+                        {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
+                            <AntdTooltip title={'Android 端'}>
+                                <Icon
+                                    component={IconOxygenMobile}
+                                    onClick={handleOnAndroidBtnClick}
+                                />
+                            </AntdTooltip>
+                        )}
+                        {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
+                            <AntdTooltip title={'Web 端'}>
+                                <Icon component={IconOxygenBrowser} onClick={handleOnWebBtnClick} />
+                            </AntdTooltip>
+                        )}
+                        {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
+                            <AntdTooltip title={'桌面端'}>
+                                <Icon
+                                    component={IconOxygenDesktop}
+                                    onClick={handleOnDesktopBtnClick}
+                                />
+                            </AntdTooltip>
+                        )}
+                        <AntdTooltip title={'源码'}>
+                            <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
+                        </AntdTooltip>
+                    </div>
+                </FlexBox>
+            </Card>
+            {contextHolder}
+        </>
     )
 }
 
@@ -266,23 +376,56 @@ const User = () => {
                             {!toolData.length && (
                                 <div className={'no-tool'}>该开发者暂未发布任何工具</div>
                             )}
-                            {toolData?.map((value) => (
-                                <CommonCard
-                                    key={value.id}
-                                    icon={
-                                        <img
-                                            src={`data:image/svg+xml;base64,${value.icon}`}
-                                            alt={'Icon'}
-                                        />
+                            {toolData
+                                ?.reduce((previousValue: ToolVo[], currentValue) => {
+                                    if (
+                                        !previousValue.some(
+                                            (value) =>
+                                                value.author.id === currentValue.author.id &&
+                                                value.toolId === currentValue.toolId
+                                        )
+                                    ) {
+                                        previousValue.push(currentValue)
                                     }
-                                    toolName={value.name}
-                                    toolId={value.toolId}
-                                    toolDesc={value.description}
-                                    url={`/view/${value.author.username}/${value.toolId}`}
-                                    authorUsername={value.author.username}
-                                    ver={value.ver}
-                                />
-                            ))}
+                                    return previousValue
+                                }, [])
+                                .map((item) => {
+                                    const tools = toolData.filter(
+                                        (value) =>
+                                            value.author.id === item.author.id &&
+                                            value.toolId === item.toolId
+                                    )
+                                    const webTool = tools.find((value) => value.platform === 'WEB')
+                                    const desktopTool = tools.find(
+                                        (value) => value.platform === 'DESKTOP'
+                                    )
+                                    const androidTool = tools.find(
+                                        (value) => value.platform === 'ANDROID'
+                                    )
+                                    const firstTool =
+                                        (checkDesktop()
+                                            ? desktopTool || webTool
+                                            : webTool || desktopTool) || androidTool
+
+                                    return (
+                                        <CommonCard
+                                            key={firstTool!.id}
+                                            icon={
+                                                <img
+                                                    src={`data:image/svg+xml;base64,${firstTool!.icon}`}
+                                                    alt={'Icon'}
+                                                />
+                                            }
+                                            toolName={firstTool!.name}
+                                            toolId={firstTool!.toolId}
+                                            toolDesc={firstTool!.description}
+                                            authorUsername={firstTool!.author.username}
+                                            ver={firstTool!.ver}
+                                            platform={firstTool!.platform}
+                                            supportPlatform={tools.map((value) => value.platform)}
+                                        />
+                                    )
+                                })}
                             {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
                         </FlexBox>
                     </Card>

From 3e34ae761678dde0705d621f9e0022f6e0673bb5 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 21 Mar 2024 16:01:23 +0800
Subject: [PATCH 246/307] Fix: create - can not upgrade tool bug

---
 src/pages/Tools/index.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index edac408..8671178 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -278,7 +278,9 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
                 onChange={handleOnVersionChange}
                 options={toolsGroupByPlatform(tools)}
             />
-            {tools.every((value) => value.review === 'PASS') && (
+            {tools
+                .filter((value) => value.platform === selectedTool.platform)
+                .every((value) => value.review === 'PASS') && (
                 <AntdTooltip title={'更新'}>
                     <Icon
                         component={IconOxygenUpgrade}
@@ -349,6 +351,7 @@ const Tools = () => {
                                 ref?.getFieldInstance('toolId').focus()
                             }, 50)
                         }}
+                        labelCol={{ span: 4 }}
                     >
                         <AntdForm.Item
                             initialValue={tool.toolId}
@@ -358,6 +361,17 @@ const Tools = () => {
                         >
                             <AntdInput disabled />
                         </AntdForm.Item>
+                        <AntdForm.Item
+                            initialValue={tool.platform}
+                            label={'平台'}
+                            name={'platform'}
+                        >
+                            <AntdSelect disabled>
+                                <AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
+                                <AntdSelect.Option key={'DESKTOP'}>Desktop</AntdSelect.Option>
+                                <AntdSelect.Option key={'ANDROID'}>Android</AntdSelect.Option>
+                            </AntdSelect>
+                        </AntdForm.Item>
                         <AntdForm.Item
                             name={'ver'}
                             label={'版本'}

From 3ac302c14bcb8b7c307892b27f719e6f694326b4 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 22 Mar 2024 16:54:43 +0800
Subject: [PATCH 247/307] Feat: edit and view - support simulated Android
 device preview

---
 .../css/components/common/hide-scrollbar.scss |   4 +-
 src/assets/css/pages/tools/view.scss          |   1 +
 src/assets/svg/arrowDown.svg                  |   1 +
 src/assets/svg/rotateLeft.svg                 |   1 +
 src/assets/svg/rotateRight.svg                |   1 +
 src/assets/svg/zoom.svg                       |   1 +
 .../Playground/Output/Preview/Render.tsx      | 203 +++++++++++++++++-
 .../Playground/Output/Preview/iframe.html     |   4 +
 .../Playground/Output/Preview/index.tsx       |   6 +-
 .../Playground/Output/Preview/preview.scss    |   5 +-
 .../Playground/Output/Preview/render.scss     |  76 ++++++-
 src/components/Playground/Output/index.tsx    |   5 +-
 src/pages/Tools/Edit.tsx                      |   1 +
 src/pages/Tools/View.tsx                      |   3 +
 14 files changed, 298 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/svg/arrowDown.svg
 create mode 100644 src/assets/svg/rotateLeft.svg
 create mode 100644 src/assets/svg/rotateRight.svg
 create mode 100644 src/assets/svg/zoom.svg

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 32fcf8d..80f9463 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -14,8 +14,8 @@
     -ms-overflow-style: none;
 
     .hide-scrollbar-content {
-      display: inline-block;
-      width: 100%;
+      width: fit-content;
+      min-width: 100%;
     }
   }
 
diff --git a/src/assets/css/pages/tools/view.scss b/src/assets/css/pages/tools/view.scss
index c5cb6a9..6caa46f 100644
--- a/src/assets/css/pages/tools/view.scss
+++ b/src/assets/css/pages/tools/view.scss
@@ -2,6 +2,7 @@
   padding: 20px;
 
   .card-box {
+    position: relative;
     height: 100%;
     width: 100%;
   }
diff --git a/src/assets/svg/arrowDown.svg b/src/assets/svg/arrowDown.svg
new file mode 100644
index 0000000..55da18e
--- /dev/null
+++ b/src/assets/svg/arrowDown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M482.133333 738.133333L136.533333 392.533333c-17.066667-17.066667-17.066667-42.666667 0-59.733333 8.533333-8.533333 19.2-12.8 29.866667-12.8h689.066667c23.466667 0 42.666667 19.2 42.666666 42.666667 0 10.666667-4.266667 21.333333-12.8 29.866666L541.866667 738.133333c-17.066667 17.066667-42.666667 17.066667-59.733334 0z" /></svg>
diff --git a/src/assets/svg/rotateLeft.svg b/src/assets/svg/rotateLeft.svg
new file mode 100644
index 0000000..4805887
--- /dev/null
+++ b/src/assets/svg/rotateLeft.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H188V494h440v326z" /><path d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-0.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7 0.4 12.6-6.1v-63.9c12.9 0.1 25.9 0.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-0.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3z" /></svg>
diff --git a/src/assets/svg/rotateRight.svg b/src/assets/svg/rotateRight.svg
new file mode 100644
index 0000000..3dfbfd1
--- /dev/null
+++ b/src/assets/svg/rotateRight.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-0.4-12.6 6.1l-0.2 64c-118.6 0.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-0.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z" /><path d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H396V494h440v326z" /></svg>
diff --git a/src/assets/svg/zoom.svg b/src/assets/svg/zoom.svg
new file mode 100644
index 0000000..00ac81b
--- /dev/null
+++ b/src/assets/svg/zoom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M720 464H560V304a48 48 0 1 0-96 0v160H304a48 48 0 1 0 0 96h160v160a48 48 0 1 0 96 0V560h160a48 48 0 1 0 0-96zM512 0C229.232 0 0 229.232 0 512c0 282.768 229.232 512 512 512h464a48 48 0 0 0 48-48V512.032 512C1024 229.232 794.768 0 512 0z m416 512.016C928 741.744 741.776 927.968 512.064 928H512C282.256 928 96 741.76 96 512 96 282.256 282.256 96 512 96s416 186.256 416 416.016z" /></svg>
diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx
index 8f803cb..2965bf0 100644
--- a/src/components/Playground/Output/Preview/Render.tsx
+++ b/src/components/Playground/Output/Preview/Render.tsx
@@ -1,19 +1,30 @@
+import { ChangeEvent } from 'react'
 import '@/components/Playground/Output/Preview/render.scss'
+import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
+import HideScrollbar from '@/components/common/HideScrollbar'
 
 interface RenderProps {
     iframeKey: string
     compiledCode: string
+    mobileMode?: boolean
 }
 
 interface IMessage {
-    type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE'
+    type: 'LOADED' | 'ERROR' | 'UPDATE' | 'DONE' | 'SCALE'
     msg: string
     data: {
-        compiledCode: string
+        compiledCode?: string
+        zoom?: number
     }
 }
 
+interface IDevice {
+    name: string
+    width: number
+    height: number
+}
+
 const getIframeUrl = (iframeRaw: string) => {
     const shimsUrl = '//unpkg.com/es-module-shims/dist/es-module-shims.js'
     // 判断浏览器是否支持esm ，不支持esm就引入es-module-shims
@@ -29,9 +40,112 @@ const getIframeUrl = (iframeRaw: string) => {
 
 const iframeUrl = getIframeUrl(iframeRaw)
 
-const Render = ({ iframeKey, compiledCode }: RenderProps) => {
+const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
     const [loaded, setLoaded] = useState(false)
+    const [selectedDevice, setSelectedDevice] = useState('Pixel 7')
+    const [zoom, setZoom] = useState(1)
+    const [isRotate, setIsRotate] = useState(false)
+
+    const devices: IDevice[] = [
+        {
+            name: 'iPhone SE',
+            width: 375,
+            height: 667
+        },
+        {
+            name: 'iPhone XR',
+            width: 414,
+            height: 896
+        },
+        {
+            name: 'iPhone 12 Pro',
+            width: 390,
+            height: 844
+        },
+        {
+            name: 'iPhone 14 Pro Max',
+            width: 430,
+            height: 932
+        },
+        {
+            name: 'Pixel 7',
+            width: 412,
+            height: 915
+        },
+        {
+            name: 'Samsung Galaxy S8+',
+            width: 360,
+            height: 740
+        },
+        {
+            name: 'Samsung Galaxy S20 Ultra',
+            width: 412,
+            height: 915
+        },
+        {
+            name: 'iPad Mini',
+            width: 768,
+            height: 1024
+        },
+        {
+            name: 'iPad Air',
+            width: 820,
+            height: 1180
+        },
+        {
+            name: 'iPad Pro',
+            width: 1024,
+            height: 1366
+        },
+        {
+            name: 'Surface Pro 7',
+            width: 912,
+            height: 1368
+        },
+        {
+            name: 'Surface Duo',
+            width: 540,
+            height: 720
+        },
+        {
+            name: 'Galaxy Fold',
+            width: 280,
+            height: 653
+        },
+        {
+            name: 'Asus Zenbook Fold',
+            width: 853,
+            height: 1280
+        },
+        {
+            name: 'Samsung Galaxy A51/71',
+            width: 412,
+            height: 914
+        },
+        {
+            name: 'Nest Hub',
+            width: 1024,
+            height: 600
+        },
+        {
+            name: 'Nest Hub Max',
+            width: 1280,
+            height: 800
+        }
+    ]
+
+    const handleOnChangeDevice = (e: ChangeEvent<HTMLSelectElement>) => {
+        setSelectedDevice(e.target.value)
+    }
+
+    const handleOnChangeZoom = (e: ChangeEvent<HTMLInputElement>) => {
+        setZoom(Number(e.target.value))
+    }
+
+    const handleOnRotateDevice = () => {
+        setIsRotate(!isRotate)
+    }
 
     useEffect(() => {
         if (loaded) {
@@ -43,9 +157,88 @@ const Render = ({ iframeKey, compiledCode }: RenderProps) => {
                 '*'
             )
         }
-    }, [compiledCode, loaded])
+    }, [loaded, compiledCode])
 
-    return (
+    useEffect(() => {
+        if (loaded) {
+            iframeRef.current?.contentWindow?.postMessage(
+                {
+                    type: 'SCALE',
+                    data: { zoom: zoom }
+                } as IMessage,
+                '*'
+            )
+        }
+    }, [loaded, zoom])
+
+    return mobileMode ? (
+        <>
+            <HideScrollbar
+                className={'mobile-mode-background'}
+                isShowVerticalScrollbar
+                isShowHorizontalScrollbar
+                autoHideWaitingTime={1000}
+            >
+                <div className={'mobile-mode-content'} style={{ zoom }}>
+                    <div className={`device${isRotate ? ' rotate' : ''}`}>
+                        <div className={`device-header${isRotate ? ' rotate' : ''}`} />
+                        <div
+                            className={`device-content${isRotate ? ' rotate' : ''}`}
+                            style={{
+                                width: isRotate
+                                    ? devices.find((value) => value.name === selectedDevice)
+                                          ?.height ?? 915
+                                    : devices.find((value) => value.name === selectedDevice)
+                                          ?.width ?? 412,
+                                height: isRotate
+                                    ? devices.find((value) => value.name === selectedDevice)
+                                          ?.width ?? 412
+                                    : devices.find((value) => value.name === selectedDevice)
+                                          ?.height ?? 915
+                            }}
+                        >
+                            <iframe
+                                data-component={'playground-output-preview-render'}
+                                key={iframeKey}
+                                ref={iframeRef}
+                                src={iframeUrl}
+                                onLoad={() => setLoaded(true)}
+                                sandbox="allow-downloads allow-forms allow-modals allow-scripts"
+                            />
+                        </div>
+                        <div className={`device-footer${isRotate ? ' rotate' : ''}`} />
+                    </div>
+                </div>
+            </HideScrollbar>
+
+            <div className={'switch-device'}>
+                <IconOxygenMobile fill={COLOR_FONT_MAIN} />
+                <select value={selectedDevice} onChange={handleOnChangeDevice}>
+                    {devices.map((value) => (
+                        <option value={value.name}>{value.name}</option>
+                    ))}
+                </select>
+                <div className={'rotate-device'} title={'旋转屏幕'} onClick={handleOnRotateDevice}>
+                    {isRotate ? (
+                        <IconOxygenRotateRight fill={COLOR_FONT_MAIN} />
+                    ) : (
+                        <IconOxygenRotateLeft fill={COLOR_FONT_MAIN} />
+                    )}
+                </div>
+            </div>
+            <div className={'switch-zoom'}>
+                <IconOxygenZoom fill={COLOR_FONT_MAIN} />
+                <input
+                    type={'range'}
+                    min={0.5}
+                    max={2}
+                    step={0.1}
+                    value={zoom}
+                    onChange={handleOnChangeZoom}
+                />
+            </div>
+        </>
+    ) : (
         <iframe
             data-component={'playground-output-preview-render'}
             key={iframeKey}
diff --git a/src/components/Playground/Output/Preview/iframe.html b/src/components/Playground/Output/Preview/iframe.html
index 23aea0b..db6655a 100644
--- a/src/components/Playground/Output/Preview/iframe.html
+++ b/src/components/Playground/Output/Preview/iframe.html
@@ -36,6 +36,10 @@
       document.body.appendChild(script);
       URL.revokeObjectURL(oldSrc);
     }
+
+    if (data?.type === "SCALE") {
+      document.getElementById("root").style.zoom = data.data.zoom
+    }
   });
 </script>
 <script type="module" id="appSrc"></script>
diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx
index 686a760..f9882e5 100644
--- a/src/components/Playground/Output/Preview/index.tsx
+++ b/src/components/Playground/Output/Preview/index.tsx
@@ -10,6 +10,7 @@ interface PreviewProps {
     entryPoint: string
     preExpansionCode?: string
     postExpansionCode?: string
+    mobileMode?: boolean
 }
 
 const Preview = ({
@@ -18,7 +19,8 @@ const Preview = ({
     importMap,
     entryPoint,
     preExpansionCode = '',
-    postExpansionCode = ''
+    postExpansionCode = '',
+    mobileMode = false
 }: PreviewProps) => {
     const [errorMsg, setErrorMsg] = useState('')
     const [compiledCode, setCompiledCode] = useState('')
@@ -41,7 +43,7 @@ const Preview = ({
 
     return (
         <div data-component={'playground-preview'}>
-            <Render iframeKey={iframeKey} compiledCode={compiledCode} />
+            <Render iframeKey={iframeKey} compiledCode={compiledCode} mobileMode={mobileMode} />
             {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
         </div>
     )
diff --git a/src/components/Playground/Output/Preview/preview.scss b/src/components/Playground/Output/Preview/preview.scss
index f4a3b6e..1b66f44 100644
--- a/src/components/Playground/Output/Preview/preview.scss
+++ b/src/components/Playground/Output/Preview/preview.scss
@@ -1,8 +1,7 @@
 [data-component=playground-preview] {
   display: flex;
   position: relative;
-  width: 100%;
-  height: 100%;
+  height: 0;
 
   .playground-error-message {
     position: absolute;
@@ -13,4 +12,4 @@
     padding: 5px 10px;
     font-size: 1.2em;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Playground/Output/Preview/render.scss b/src/components/Playground/Output/Preview/render.scss
index fc11967..e39b9a8 100644
--- a/src/components/Playground/Output/Preview/render.scss
+++ b/src/components/Playground/Output/Preview/render.scss
@@ -1,6 +1,80 @@
+@use '@/assets/css/constants' as constants;
+
 [data-component=playground-output-preview-render] {
   border: none;
   height: 100%;
   width: 100%;
   flex: 1;
-}
\ No newline at end of file
+}
+
+.mobile-mode-background {
+  background-color: rgba(204, 204, 204, 0.66);
+
+  .mobile-mode-content {
+    padding: 80px;
+  }
+
+  .device {
+    display: flex;
+    flex-direction: column;
+    background-color: #EEEFF2;
+    width: fit-content;
+    margin: 0 auto;
+    border-radius: 40px;
+
+    &.rotate {
+      flex-direction: row;
+    }
+
+    .device-header {
+      margin: 20px auto;
+      width: 60px;
+      height: 10px;
+      border-radius: 5px;
+      background-color: #C8C9CC;
+
+      &.rotate {
+        margin: auto 20px;
+        width: 10px;
+        height: 60px;
+      }
+    }
+
+    .device-content {
+      margin: 0 10px;
+      background-color: white;
+
+      &.rotate {
+        margin: 10px 0;
+      }
+    }
+
+    .device-footer {
+      margin: 20px auto;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background-color: #C8C9CC;
+
+      &.rotate {
+        margin: auto 20px;
+      }
+    }
+  }
+}
+
+.switch-device, .switch-zoom {
+  display: flex;
+  position: absolute;
+  top: 10px;
+  align-items: center;
+  gap: 4px;
+}
+
+.switch-device {
+  left: 10px;
+}
+
+.switch-zoom {
+  right: 10px;
+}
diff --git a/src/components/Playground/Output/index.tsx b/src/components/Playground/Output/index.tsx
index b138375..2264a64 100644
--- a/src/components/Playground/Output/index.tsx
+++ b/src/components/Playground/Output/index.tsx
@@ -11,6 +11,7 @@ interface OutputProps {
     entryPoint: string
     preExpansionCode?: string
     postExpansionCode?: string
+    mobileMode?: boolean
 }
 
 const Output = ({
@@ -19,7 +20,8 @@ const Output = ({
     importMap,
     entryPoint,
     preExpansionCode,
-    postExpansionCode
+    postExpansionCode,
+    mobileMode = false
 }: OutputProps) => {
     const [selectedTab, setSelectedTab] = useState('Preview')
 
@@ -42,6 +44,7 @@ const Output = ({
                     entryPoint={entryPoint}
                     preExpansionCode={preExpansionCode}
                     postExpansionCode={postExpansionCode}
+                    mobileMode={mobileMode}
                 />
             )}
             {selectedTab === 'Transform' && <Transform file={files[selectedFileName]} />}
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index 907c117..1a2267b 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -443,6 +443,7 @@ const Edit = () => {
                                 importMap={importMap!}
                                 entryPoint={entryPoint}
                                 postExpansionCode={baseDist}
+                                mobileMode={toolData?.platform === 'ANDROID'}
                             />
                         </LoadingMask>
                         {showDraggableMask && <div className={'draggable-mask'} />}
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index 92bbbc8..375ddef 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -17,8 +17,10 @@ const View = () => {
     })
     const [loading, setLoading] = useState(false)
     const [compiledCode, setCompiledCode] = useState('')
+    const [isAndroid, setIsAndroid] = useState(false)
 
     const render = (toolVo: ToolVo) => {
+        setIsAndroid(toolVo.platform === 'ANDROID')
         if (username === '!') {
             try {
                 const baseDist = base64ToStr(toolVo.base.dist.data!)
@@ -111,6 +113,7 @@ const View = () => {
                 <Playground.Output.Preview.Render
                     iframeKey={`${username}:${toolId}:${ver}`}
                     compiledCode={compiledCode}
+                    mobileMode={isAndroid}
                 />
             </Card>
         </FitFullscreen>

From 1667b404ff41a73f2fca14d95d63ade1fb757c5f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 22 Mar 2024 17:40:48 +0800
Subject: [PATCH 248/307] Feat: create - support simulated Android device
 preview

---
 src/assets/css/pages/tools/create.scss | 1 +
 src/pages/Tools/Create.tsx             | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/assets/css/pages/tools/create.scss b/src/assets/css/pages/tools/create.scss
index 0306a9b..5a9e83c 100644
--- a/src/assets/css/pages/tools/create.scss
+++ b/src/assets/css/pages/tools/create.scss
@@ -46,6 +46,7 @@
 
       .preview {
         display: flex;
+        position: relative;
         justify-content: center;
         align-items: center;
 
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index b8cf71a..ae2db82 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -379,6 +379,7 @@ const Create = () => {
                             <Playground.Output.Preview.Render
                                 iframeKey={previewTemplate}
                                 compiledCode={compiledCode}
+                                mobileMode={formValues.platform === 'ANDROID'}
                             />
                         ) : (
                             <span className={'no-preview'}>暂无预览</span>

From 2cc79d1da82ad11894f40b6293783db04f3a07b6 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 26 Mar 2024 11:42:00 +0800
Subject: [PATCH 249/307] Optimize: User Management - optimize nickname
 verification

---
 src/pages/System/User.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 5efb44b..f1692c7 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -821,7 +821,11 @@ const User = () => {
                     </AntdForm.Item>
                 </>
             )}
-            <AntdForm.Item name={'nickname'} label={'昵称'} rules={[{ whitespace: false }]}>
+            <AntdForm.Item
+                name={'nickname'}
+                label={'昵称'}
+                rules={[{ required: true, whitespace: false }]}
+            >
                 <AntdInput allowClear />
             </AntdForm.Item>
             <AntdForm.Item

From b471d55e7a2c06c2b494f259147acad96f4678d0 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 22 Apr 2024 00:27:27 +0800
Subject: [PATCH 250/307] Fix(Input): Fixed the problem of not validating
 whitespace characters

Fixed the problem of not validating whitespace characters
---
 src/pages/System/Group.tsx          | 2 +-
 src/pages/System/Role.tsx           | 2 +-
 src/pages/System/Tools/Base.tsx     | 2 +-
 src/pages/System/Tools/Category.tsx | 2 +-
 src/pages/System/Tools/Template.tsx | 2 +-
 src/pages/System/User.tsx           | 8 ++++----
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index 2a82ac7..15bdbe7 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -603,7 +603,7 @@ const Group = () => {
             <AntdForm.Item
                 name={'name'}
                 label={'名称'}
-                rules={[{ required: true, whitespace: false }]}
+                rules={[{ required: true, whitespace: true }]}
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index 5462f44..570beb2 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -612,7 +612,7 @@ const Role = () => {
             <AntdForm.Item
                 name={'name'}
                 label={'名称'}
-                rules={[{ required: true, whitespace: false }]}
+                rules={[{ required: true, whitespace: true }]}
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index ccf9dda..528a107 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -1046,7 +1046,7 @@ const Base = () => {
             <AntdForm.Item
                 name={'name'}
                 label={'名称'}
-                rules={[{ required: true, whitespace: false }]}
+                rules={[{ required: true, whitespace: true }]}
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
diff --git a/src/pages/System/Tools/Category.tsx b/src/pages/System/Tools/Category.tsx
index 802065a..68dc276 100644
--- a/src/pages/System/Tools/Category.tsx
+++ b/src/pages/System/Tools/Category.tsx
@@ -272,7 +272,7 @@ const Category = () => {
             <AntdForm.Item
                 name={'name'}
                 label={'名称'}
-                rules={[{ required: true, whitespace: false }]}
+                rules={[{ required: true, whitespace: true }]}
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index 6c663d4..97a4457 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -985,7 +985,7 @@ const Template = () => {
             <AntdForm.Item
                 name={'name'}
                 label={'名称'}
-                rules={[{ required: true, whitespace: false }]}
+                rules={[{ required: true, whitespace: true }]}
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index f1692c7..5facab6 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -806,7 +806,7 @@ const User = () => {
             <AntdForm.Item
                 name={'username'}
                 label={'用户名'}
-                rules={[{ required: true, whitespace: false }]}
+                rules={[{ required: true, whitespace: true }]}
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
@@ -815,7 +815,7 @@ const User = () => {
                     <AntdForm.Item
                         name={'password'}
                         label={'密码'}
-                        rules={[{ required: true, whitespace: false }]}
+                        rules={[{ required: true, whitespace: true }]}
                     >
                         <AntdInput.Password allowClear />
                     </AntdForm.Item>
@@ -824,14 +824,14 @@ const User = () => {
             <AntdForm.Item
                 name={'nickname'}
                 label={'昵称'}
-                rules={[{ required: true, whitespace: false }]}
+                rules={[{ required: true, whitespace: true }]}
             >
                 <AntdInput allowClear />
             </AntdForm.Item>
             <AntdForm.Item
                 name={'email'}
                 label={'邮箱'}
-                rules={[{ required: true, whitespace: false, type: 'email' }]}
+                rules={[{ required: true, whitespace: true, type: 'email' }]}
             >
                 <AntdInput type={'email'} allowClear />
             </AntdForm.Item>

From 0f9056014430a1181ef7aa26564db4a331ea4a1b Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 22 Apr 2024 15:15:07 +0800
Subject: [PATCH 251/307] Refactor(Statistics): Correct incorrect spelling

Correct WEAK to WEEK
---
 src/pages/System/Statistics/ActiveInfo.tsx | 4 ++--
 src/pages/System/Statistics/OnlineInfo.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/System/Statistics/ActiveInfo.tsx b/src/pages/System/Statistics/ActiveInfo.tsx
index c79c012..0e93ff6 100644
--- a/src/pages/System/Statistics/ActiveInfo.tsx
+++ b/src/pages/System/Statistics/ActiveInfo.tsx
@@ -10,7 +10,7 @@ const ActiveInfo = () => {
     const activeInfoDivRef = useRef<HTMLDivElement>(null)
     const activeInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
     const [isLoading, setIsLoading] = useState(false)
-    const [scope, setScope] = useState('WEAK')
+    const [scope, setScope] = useState('WEEK')
 
     useEffect(() => {
         const chartResizeObserver = new ResizeObserver(() => {
@@ -165,7 +165,7 @@ const ActiveInfo = () => {
                         disabled={isLoading}
                         style={{ width: '8em' }}
                     >
-                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
+                        <AntdSelect.Option key={'WEEK'}>最近7天</AntdSelect.Option>
                         <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
                         <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
                         <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>
diff --git a/src/pages/System/Statistics/OnlineInfo.tsx b/src/pages/System/Statistics/OnlineInfo.tsx
index 59704af..67b7f32 100644
--- a/src/pages/System/Statistics/OnlineInfo.tsx
+++ b/src/pages/System/Statistics/OnlineInfo.tsx
@@ -11,7 +11,7 @@ const OnlineInfo = () => {
     const onlineInfoEChartsRef = useRef<echarts.EChartsType | null>(null)
     const [isLoading, setIsLoading] = useState(false)
     const [currentOnlineCount, setCurrentOnlineCount] = useState(-1)
-    const [scope, setScope] = useState('WEAK')
+    const [scope, setScope] = useState('WEEK')
 
     useEffect(() => {
         const chartResizeObserver = new ResizeObserver(() => {
@@ -122,7 +122,7 @@ const OnlineInfo = () => {
                         style={{ width: '8em' }}
                     >
                         <AntdSelect.Option key={'DAY'}>最近24小时</AntdSelect.Option>
-                        <AntdSelect.Option key={'WEAK'}>最近7天</AntdSelect.Option>
+                        <AntdSelect.Option key={'WEEK'}>最近7天</AntdSelect.Option>
                         <AntdSelect.Option key={'MONTH'}>最近30天</AntdSelect.Option>
                         <AntdSelect.Option key={'QUARTER'}>最近3个月</AntdSelect.Option>
                         <AntdSelect.Option key={'YEAR'}>最近12个月</AntdSelect.Option>

From f55e5281f4f95664cad6a30a7e2ad3a8cfed54a3 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 22 Apr 2024 15:18:20 +0800
Subject: [PATCH 252/307] Perf(Statistics): Optimize chart display performance
 for online users

Optimize the display performance of online user icons when selecting for a long time
---
 src/pages/System/Statistics/OnlineInfo.tsx | 64 +++++++++++++++++++---
 1 file changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/pages/System/Statistics/OnlineInfo.tsx b/src/pages/System/Statistics/OnlineInfo.tsx
index 67b7f32..624ceca 100644
--- a/src/pages/System/Statistics/OnlineInfo.tsx
+++ b/src/pages/System/Statistics/OnlineInfo.tsx
@@ -59,13 +59,53 @@ const OnlineInfo = () => {
                         const dataList = getTimesBetweenTwoTimes(
                             data.history[0].time,
                             data.history[data.history.length - 1].time,
-                            'minute'
-                        ).map((time) => [
-                            time,
-                            data.history.find(
-                                (value) => value.time.substring(0, 16) === time.substring(0, 16)
-                            )?.record ?? 0
-                        ])
+                            _scope === 'DAY'
+                                ? 'minute'
+                                : _scope === 'WEEK'
+                                  ? 'minute'
+                                  : _scope === 'MONTH'
+                                    ? 'hour'
+                                    : 'day'
+                        ).map((time) => {
+                            const records = data.history
+                                .filter(
+                                    (value) =>
+                                        value.time.substring(
+                                            0,
+                                            _scope === 'DAY'
+                                                ? 16
+                                                : _scope === 'WEEK'
+                                                  ? 16
+                                                  : _scope === 'MONTH'
+                                                    ? 13
+                                                    : 10
+                                        ) ===
+                                        time.substring(
+                                            0,
+                                            _scope === 'DAY'
+                                                ? 16
+                                                : _scope === 'WEEK'
+                                                  ? 16
+                                                  : _scope === 'MONTH'
+                                                    ? 13
+                                                    : 10
+                                        )
+                                )
+                                .map((item) => Number(item.record))
+                            return [
+                                time.substring(
+                                    0,
+                                    _scope === 'DAY'
+                                        ? 16
+                                        : _scope === 'WEEK'
+                                          ? 16
+                                          : _scope === 'MONTH'
+                                            ? 13
+                                            : 10
+                                ),
+                                records.length ? Math.max(...records) : 0
+                            ]
+                        })
 
                         onlineInfoEChartsRef.current = echarts.init(
                             onlineInfoDivRef.current,
@@ -77,7 +117,15 @@ const OnlineInfo = () => {
                             ...lineEChartsBaseOption,
                             tooltip: {
                                 ...lineEChartsBaseOption.tooltip,
-                                formatter: getTooltipTimeFormatter('yyyy-MM-DD HH:mm')
+                                formatter: getTooltipTimeFormatter(
+                                    _scope === 'DAY'
+                                        ? 'yyyy-MM-DD HH:mm'
+                                        : _scope === 'WEEK'
+                                          ? 'yyyy-MM-DD HH:mm'
+                                          : _scope === 'MONTH'
+                                            ? 'yyyy-MM-DD HH时'
+                                            : 'yyyy-MM-DD'
+                                )
                             },
                             xAxis: {
                                 ...lineEChartsBaseOption.xAxis

From 5d28f7d8d7d2fb4036fc14ce2c0be5a0be89c07c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 22 Apr 2024 18:09:42 +0800
Subject: [PATCH 253/307] Refactor(Form): Optimize form input experience

Add placeholder. Optimize form validation. Hide ID input.
---
 src/pages/Sign/Forget.tsx                   |  7 +--
 src/pages/Sign/SignIn.tsx                   | 17 +++++--
 src/pages/Sign/SignUp.tsx                   | 10 ++--
 src/pages/Sign/Verify.tsx                   |  1 +
 src/pages/System/Group.tsx                  | 12 +++--
 src/pages/System/Log.tsx                    |  1 +
 src/pages/System/Role.tsx                   | 12 +++--
 src/pages/System/Settings/Base.tsx          | 12 +++--
 src/pages/System/Settings/Mail.tsx          | 24 ++++++----
 src/pages/System/Settings/SensitiveWord.tsx |  3 +-
 src/pages/System/Settings/TwoFactor.tsx     |  9 +++-
 src/pages/System/Tools/Base.tsx             | 27 ++++++-----
 src/pages/System/Tools/Category.tsx         |  7 +--
 src/pages/System/Tools/Code.tsx             | 52 +++++++++++++--------
 src/pages/System/Tools/Template.tsx         | 35 +++++++++-----
 src/pages/System/Tools/index.tsx            | 11 +++--
 src/pages/System/User.tsx                   | 41 ++++++++--------
 src/pages/Tools/Create.tsx                  | 22 ++++-----
 src/pages/Tools/Edit.tsx                    | 14 ++++--
 src/pages/Tools/Store.tsx                   |  2 +-
 src/pages/Tools/index.tsx                   |  3 +-
 src/pages/User/index.tsx                    | 21 ++++++---
 22 files changed, 213 insertions(+), 130 deletions(-)

diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx
index 4c1f4ca..1cbc871 100644
--- a/src/pages/Sign/Forget.tsx
+++ b/src/pages/Sign/Forget.tsx
@@ -155,8 +155,8 @@ const Forget = () => {
                                         >
                                             <AntdInput
                                                 prefix={<Icon component={IconOxygenEmail} />}
-                                                placeholder={'邮箱'}
                                                 disabled={isSending}
+                                                placeholder={'邮箱'}
                                             />
                                         </AntdForm.Item>
                                         <AntdForm.Item>
@@ -199,6 +199,7 @@ const Forget = () => {
                                         name={'password'}
                                         rules={[
                                             { required: true, message: '请输入密码' },
+                                            { whitespace: true, message: '密码不能为空字符' },
                                             { min: 10, message: '密码至少为10位' },
                                             { max: 30, message: '密码最多为30位' }
                                         ]}
@@ -208,8 +209,8 @@ const Forget = () => {
                                             addonBefore={
                                                 <span>新&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
                                             }
-                                            placeholder={'密码'}
                                             disabled={isChanging}
+                                            placeholder={'密码'}
                                         />
                                     </AntdForm.Item>
                                     <AntdForm.Item
@@ -234,8 +235,8 @@ const Forget = () => {
                                         <AntdInput.Password
                                             id={'forget-password-confirm'}
                                             addonBefore={'确认密码'}
-                                            placeholder={'确认密码'}
                                             disabled={isChanging}
+                                            placeholder={'确认密码'}
                                         />
                                     </AntdForm.Item>
                                     <AntdForm.Item>
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index b81bc4d..be500bd 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -124,6 +124,7 @@ const SignIn = () => {
                                         form={twoFactorForm}
                                         ref={(ref) => {
                                             setTimeout(() => {
+                                                // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
                                                 ref?.getFieldInstance('twoFactorCode').focus()
                                             }, 50)
                                         }}
@@ -132,7 +133,7 @@ const SignIn = () => {
                                             name={'twoFactorCode'}
                                             label={'验证码'}
                                             style={{ marginTop: 10 }}
-                                            rules={[{ required: true, len: 6 }]}
+                                            rules={[{ required: true, whitespace: true, len: 6 }]}
                                         >
                                             <AntdInput
                                                 showCount
@@ -217,22 +218,28 @@ const SignIn = () => {
                     <AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
                         <AntdForm.Item
                             name={'account'}
-                            rules={[{ required: true, message: '请输入账号' }]}
+                            rules={[
+                                { required: true, message: '请输入账号' },
+                                { whitespace: true, message: '账号不能为空字符' }
+                            ]}
                         >
                             <AntdInput
                                 prefix={<Icon component={IconOxygenUser} />}
-                                placeholder={'邮箱/用户名'}
                                 disabled={isSigningIn}
+                                placeholder={'邮箱/用户名'}
                             />
                         </AntdForm.Item>
                         <AntdForm.Item
                             name={'password'}
-                            rules={[{ required: true, message: '请输入密码' }]}
+                            rules={[
+                                { required: true, message: '请输入密码' },
+                                { whitespace: true, message: '密码不能为空字符' }
+                            ]}
                         >
                             <AntdInput.Password
                                 prefix={<Icon component={IconOxygenPassword} />}
-                                placeholder={'密码'}
                                 disabled={isSigningIn}
+                                placeholder={'密码'}
                             />
                         </AntdForm.Item>
                         <AntdForm.Item>
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx
index 99d6db4..b1c8b41 100644
--- a/src/pages/Sign/SignUp.tsx
+++ b/src/pages/Sign/SignUp.tsx
@@ -139,6 +139,7 @@ const SignUp = () => {
                                     name={'username'}
                                     rules={[
                                         { required: true, message: '请输入用户名' },
+                                        { whitespace: true, message: '用户名不能为空字符' },
                                         {
                                             pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,38}$/,
                                             message:
@@ -148,10 +149,10 @@ const SignUp = () => {
                                 >
                                     <AntdInput
                                         prefix={<Icon component={IconOxygenUser} />}
-                                        placeholder={'用户名'}
                                         maxLength={39}
                                         showCount={true}
                                         disabled={isSigningUp}
+                                        placeholder={'用户名'}
                                     />
                                 </AntdForm.Item>
                                 <AntdForm.Item
@@ -164,14 +165,15 @@ const SignUp = () => {
                                     <AntdInput
                                         type={'email'}
                                         prefix={<Icon component={IconOxygenEmail} />}
-                                        placeholder={'邮箱'}
                                         disabled={isSigningUp}
+                                        placeholder={'邮箱'}
                                     />
                                 </AntdForm.Item>
                                 <AntdForm.Item
                                     name={'password'}
                                     rules={[
                                         { required: true, message: '请输入密码' },
+                                        { whitespace: true, message: '密码不能为空字符' },
                                         { min: 10, message: '密码至少为10位' },
                                         { max: 30, message: '密码最多为30位' }
                                     ]}
@@ -179,8 +181,8 @@ const SignUp = () => {
                                     <AntdInput.Password
                                         id={'sign-up-password'}
                                         prefix={<Icon component={IconOxygenPassword} />}
-                                        placeholder={'密码'}
                                         disabled={isSigningUp}
+                                        placeholder={'密码'}
                                     />
                                 </AntdForm.Item>
                                 <AntdForm.Item
@@ -202,8 +204,8 @@ const SignUp = () => {
                                     <AntdInput.Password
                                         id={'sign-up-password-confirm'}
                                         prefix={<Icon component={IconOxygenPassword} />}
-                                        placeholder={'确认密码'}
                                         disabled={isSigningUp}
+                                        placeholder={'确认密码'}
                                     />
                                 </AntdForm.Item>
                                 <AntdForm.Item>
diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx
index 26efe94..006b72d 100644
--- a/src/pages/Sign/Verify.tsx
+++ b/src/pages/Sign/Verify.tsx
@@ -195,6 +195,7 @@ const Verify = () => {
                                     name={'nickname'}
                                     rules={[
                                         { required: true, message: '请输入昵称' },
+                                        { whitespace: true, message: '昵称不能为空字符' },
                                         { min: 3, message: '昵称至少为3个字符' }
                                     ]}
                                 >
diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index 15bdbe7..f248ffb 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -190,8 +190,9 @@ const Group = () => {
     const handleOnListDeleteBtnClick = () => {
         modal
             .confirm({
-                title: '确定删除',
+                centered: true,
                 maskClosable: true,
+                title: '确定删除',
                 content: `确定删除选中的 ${tableSelectedItem.length} 个用户组吗？`
             })
             .then(
@@ -243,8 +244,9 @@ const Group = () => {
         return () => {
             modal
                 .confirm({
-                    title: '确定删除',
+                    centered: true,
                     maskClosable: true,
+                    title: '确定删除',
                     content: `确定删除角色 ${value.name} 吗？`
                 })
                 .then(
@@ -543,6 +545,7 @@ const Group = () => {
                     onChange={handleOnSearchNameChange}
                     onKeyDown={handleOnSearchNameKeyDown}
                     status={isRegexLegal ? undefined : 'error'}
+                    placeholder={'请输入搜索内容'}
                 />
             </Card>
             <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
@@ -597,7 +600,7 @@ const Group = () => {
 
     const addAndEditForm = (
         <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
-            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+            <AntdForm.Item hidden name={'id'} label={'ID'}>
                 <AntdInput disabled />
             </AntdForm.Item>
             <AntdForm.Item
@@ -605,7 +608,7 @@ const Group = () => {
                 label={'名称'}
                 rules={[{ required: true, whitespace: true }]}
             >
-                <AntdInput allowClear />
+                <AntdInput allowClear placeholder={'请输入名称'} />
             </AntdForm.Item>
             <AntdForm.Item name={'roleIds'} label={'角色'}>
                 <AntdSelect
@@ -617,6 +620,7 @@ const Group = () => {
                         value: value.id,
                         label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
                     }))}
+                    placeholder={'请选择角色'}
                 />
             </AntdForm.Item>
             <AntdForm.Item
diff --git a/src/pages/System/Log.tsx b/src/pages/System/Log.tsx
index d665c00..145b01c 100644
--- a/src/pages/System/Log.tsx
+++ b/src/pages/System/Log.tsx
@@ -250,6 +250,7 @@ const Log = () => {
                     value={searchRequestUrl}
                     onChange={handleOnSearchUrlChange}
                     onKeyDown={handleOnSearchUrlKeyDown}
+                    placeholder={'请输入搜索内容'}
                 />
             </Card>
             <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index 570beb2..ce4e5e7 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -182,8 +182,9 @@ const Role = () => {
     const handleOnListDeleteBtnClick = () => {
         modal
             .confirm({
-                title: '确定删除',
+                centered: true,
                 maskClosable: true,
+                title: '确定删除',
                 content: `确定删除选中的 ${tableSelectedItem.length} 个角色吗？`
             })
             .then(
@@ -235,8 +236,9 @@ const Role = () => {
         return () => {
             modal
                 .confirm({
-                    title: '确定删除',
+                    centered: true,
                     maskClosable: true,
+                    title: '确定删除',
                     content: `确定删除角色 ${value.name} 吗？`
                 })
                 .then(
@@ -552,6 +554,7 @@ const Role = () => {
                     onChange={handleOnSearchNameChange}
                     onKeyDown={handleOnSearchNameKeyDown}
                     status={isRegexLegal ? undefined : 'error'}
+                    placeholder={'请输入搜索内容'}
                 />
             </Card>
             <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
@@ -606,7 +609,7 @@ const Role = () => {
 
     const addAndEditForm = (
         <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
-            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+            <AntdForm.Item hidden name={'id'} label={'ID'}>
                 <AntdInput disabled />
             </AntdForm.Item>
             <AntdForm.Item
@@ -614,7 +617,7 @@ const Role = () => {
                 label={'名称'}
                 rules={[{ required: true, whitespace: true }]}
             >
-                <AntdInput allowClear />
+                <AntdInput allowClear placeholder={'请输入名称'} />
             </AntdForm.Item>
             <AntdForm.Item name={'powerIds'} label={'权限'}>
                 <AntdTreeSelect
@@ -624,6 +627,7 @@ const Role = () => {
                     allowClear
                     treeNodeFilterProp={'fullTitle'}
                     loading={isLoadingPower}
+                    placeholder={'请选择权限'}
                 />
             </AntdForm.Item>
             <AntdForm.Item
diff --git a/src/pages/System/Settings/Base.tsx b/src/pages/System/Settings/Base.tsx
index aa473c6..d0dd2ee 100644
--- a/src/pages/System/Settings/Base.tsx
+++ b/src/pages/System/Settings/Base.tsx
@@ -59,16 +59,20 @@ const Base = () => {
                     disabled={!hasPermission('system:settings:modify:base')}
                 >
                     <AntdForm.Item label={'应用名称'} name={'appName'}>
-                        <AntdInput />
+                        <AntdInput placeholder={'请输入应用名称'} />
                     </AntdForm.Item>
                     <AntdForm.Item label={'应用 URL'} name={'appUrl'}>
-                        <AntdInput />
+                        <AntdInput placeholder={'请输入应用 URL'} />
                     </AntdForm.Item>
                     <AntdForm.Item label={'验证邮箱 URL'} name={'verifyUrl'}>
-                        <AntdInput placeholder={'验证码使用 ${verifyCode} 代替'} />
+                        <AntdInput
+                            placeholder={'请输入验证邮箱 URL，验证码使用 ${verifyCode} 代替'}
+                        />
                     </AntdForm.Item>
                     <AntdForm.Item label={'找回密码 URL'} name={'retrieveUrl'}>
-                        <AntdInput placeholder={'验证码使用 ${retrieveCode} 代替'} />
+                        <AntdInput
+                            placeholder={'请输入找回密码 URL，验证码使用 ${retrieveCode} 代替'}
+                        />
                     </AntdForm.Item>
                 </AntdForm>
             </SettingsCard>
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index 898581e..22d0222 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -31,6 +31,7 @@ const Mail = () => {
                         form={mailSendForm}
                         ref={(ref) => {
                             setTimeout(() => {
+                                // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
                                 ref?.getFieldInstance('to').focus()
                             }, 50)
                         }}
@@ -41,7 +42,7 @@ const Mail = () => {
                             style={{ marginTop: 10 }}
                             rules={[{ required: true, type: 'email' }]}
                         >
-                            <AntdInput />
+                            <AntdInput placeholder={'请输入接收人'} />
                         </AntdForm.Item>
                     </AntdForm>
                     <AntdTag style={{ whiteSpace: 'normal' }}>
@@ -134,29 +135,34 @@ const Mail = () => {
                     disabled={!hasPermission('system:settings:modify:mail')}
                 >
                     <AntdForm.Item label={'SMTP 服务器'} name={'host'}>
-                        <AntdInput />
+                        <AntdInput placeholder={'请输入 SMTP 服务器'} />
                     </AntdForm.Item>
-                    <AntdForm.Item label={'端口'} name={'port'}>
-                        <AntdInputNumber min={0} max={65535} style={{ width: '100%' }} />
+                    <AntdForm.Item label={'端口号'} name={'port'}>
+                        <AntdInputNumber
+                            min={0}
+                            max={65535}
+                            style={{ width: '100%' }}
+                            placeholder={'请输入端口号'}
+                        />
                     </AntdForm.Item>
                     <AntdForm.Item label={'安全类型'} name={'securityType'}>
-                        <AntdSelect>
+                        <AntdSelect placeholder={'请选择安全类型'}>
                             <AntdSelect.Option key={'None'}>None</AntdSelect.Option>
                             <AntdSelect.Option key={'SSL/TLS'}>SSL/TLS</AntdSelect.Option>
                             <AntdSelect.Option key={'StartTls'}>StartTls</AntdSelect.Option>
                         </AntdSelect>
                     </AntdForm.Item>
                     <AntdForm.Item label={'用户名'} name={'username'}>
-                        <AntdInput />
+                        <AntdInput placeholder={'请输入用户名'} />
                     </AntdForm.Item>
                     <AntdForm.Item label={'密码'} name={'password'}>
-                        <AntdInput.Password />
+                        <AntdInput.Password placeholder={'请输入密码'} />
                     </AntdForm.Item>
                     <AntdForm.Item label={'发送者'} name={'from'}>
-                        <AntdInput />
+                        <AntdInput placeholder={'请输入发送者'} />
                     </AntdForm.Item>
                     <AntdForm.Item label={'发送者名称'} name={'fromName'}>
-                        <AntdInput />
+                        <AntdInput placeholder={'请输入发送者名称'} />
                     </AntdForm.Item>
                 </AntdForm>
             </SettingsCard>
diff --git a/src/pages/System/Settings/SensitiveWord.tsx b/src/pages/System/Settings/SensitiveWord.tsx
index 7284f54..7b738a3 100644
--- a/src/pages/System/Settings/SensitiveWord.tsx
+++ b/src/pages/System/Settings/SensitiveWord.tsx
@@ -153,7 +153,8 @@ const SensitiveWord = () => {
                             <Icon component={IconOxygenPlus} />
                         </AntdButton>
                     }
-                ></AntdInput>
+                    placeholder={'请输入敏感词'}
+                />
             </SettingsCard>
         </>
     )
diff --git a/src/pages/System/Settings/TwoFactor.tsx b/src/pages/System/Settings/TwoFactor.tsx
index a94e8fc..7d93d61 100644
--- a/src/pages/System/Settings/TwoFactor.tsx
+++ b/src/pages/System/Settings/TwoFactor.tsx
@@ -59,10 +59,15 @@ const TwoFactor = () => {
                     disabled={!hasPermission('system:settings:modify:two-factor')}
                 >
                     <AntdForm.Item label={'提供者'} name={'issuer'}>
-                        <AntdInput />
+                        <AntdInput placeholder={'请输入提供者'} />
                     </AntdForm.Item>
                     <AntdForm.Item label={'密钥长度'} name={'secretKeyLength'}>
-                        <AntdInputNumber min={3} max={64} style={{ width: '100%' }} />
+                        <AntdInputNumber
+                            min={3}
+                            max={64}
+                            style={{ width: '100%' }}
+                            placeholder={'请输入密钥长度'}
+                        />
                     </AntdForm.Item>
                 </AntdForm>
             </SettingsCard>
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index 528a107..d68e248 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -279,9 +279,9 @@ const Base = () => {
 
                     compileForm.setFieldValue('entryFileName', undefined)
                     void modal.confirm({
-                        title: '编译',
                         centered: true,
                         maskClosable: true,
+                        title: '编译',
                         footer: (_, { OkBtn, CancelBtn }) => (
                             <>
                                 <OkBtn />
@@ -295,7 +295,7 @@ const Base = () => {
                                         name={'entryFileName'}
                                         label={'入口文件'}
                                         style={{ marginTop: 10 }}
-                                        rules={[{ required: true, message: '请选择入口文件' }]}
+                                        rules={[{ required: true }]}
                                     >
                                         <AntdSelect
                                             options={Object.keys(files)
@@ -307,6 +307,7 @@ const Base = () => {
                                                         ].includes(value)
                                                 )
                                                 .map((value) => ({ value, label: value }))}
+                                            placeholder={'请选择入口文件'}
                                         />
                                     </AntdForm.Item>
                                 </AntdForm>
@@ -428,8 +429,9 @@ const Base = () => {
         return () => {
             modal
                 .confirm({
-                    title: '确定删除',
+                    centered: true,
                     maskClosable: true,
+                    title: '确定删除',
                     content: `确定删除基板 ${value.name} 吗？`
                 })
                 .then(
@@ -609,9 +611,9 @@ const Base = () => {
 
         const handleOnAddFile = () => {
             void modal.confirm({
-                title: '新建文件',
                 centered: true,
                 maskClosable: true,
+                title: '新建文件',
                 footer: (_, { OkBtn, CancelBtn }) => (
                     <>
                         <OkBtn />
@@ -623,6 +625,7 @@ const Base = () => {
                         form={addFileForm}
                         ref={(ref) => {
                             setTimeout(() => {
+                                // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
                                 ref?.getFieldInstance('fileName').focus()
                             }, 50)
                         }}
@@ -652,7 +655,7 @@ const Base = () => {
                                 })
                             ]}
                         >
-                            <AntdInput />
+                            <AntdInput placeholder={'请输入文件名'} />
                         </AntdForm.Item>
                     </AntdForm>
                 ),
@@ -800,9 +803,9 @@ const Base = () => {
             return () => {
                 renameFileForm.setFieldValue('fileName', fileName)
                 void modal.confirm({
-                    title: '重命名文件',
                     centered: true,
                     maskClosable: true,
+                    title: '重命名文件',
                     footer: (_, { OkBtn, CancelBtn }) => (
                         <>
                             <OkBtn />
@@ -814,6 +817,7 @@ const Base = () => {
                             form={renameFileForm}
                             ref={(ref) => {
                                 setTimeout(() => {
+                                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
                                     ref?.getFieldInstance('fileName').focus()
                                 }, 50)
                             }}
@@ -846,7 +850,7 @@ const Base = () => {
                                     })
                                 ]}
                             >
-                                <AntdInput />
+                                <AntdInput placeholder={'请输入空文件名'} />
                             </AntdForm.Item>
                         </AntdForm>
                     ),
@@ -915,8 +919,9 @@ const Base = () => {
             return () => {
                 modal
                     .confirm({
-                        title: '确定删除',
+                        centered: true,
                         maskClosable: true,
+                        title: '确定删除',
                         content: `确定删除文件 ${fileName} 吗？`
                     })
                     .then(
@@ -1040,7 +1045,7 @@ const Base = () => {
 
     const addAndEditForm = (
         <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
-            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+            <AntdForm.Item hidden name={'id'} label={'ID'}>
                 <AntdInput disabled />
             </AntdForm.Item>
             <AntdForm.Item
@@ -1048,7 +1053,7 @@ const Base = () => {
                 label={'名称'}
                 rules={[{ required: true, whitespace: true }]}
             >
-                <AntdInput allowClear />
+                <AntdInput allowClear placeholder={'请输入名称'} />
             </AntdForm.Item>
             <AntdForm.Item
                 name={'platform'}
@@ -1056,7 +1061,7 @@ const Base = () => {
                 rules={[{ required: true }]}
                 hidden={isDrawerEdit}
             >
-                <AntdSelect>
+                <AntdSelect placeholder={'请选择平台'}>
                     <AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
                     <AntdSelect.Option key={'DESKTOP'}>Desktop</AntdSelect.Option>
                     <AntdSelect.Option key={'ANDROID'}>Android</AntdSelect.Option>
diff --git a/src/pages/System/Tools/Category.tsx b/src/pages/System/Tools/Category.tsx
index 68dc276..60652af 100644
--- a/src/pages/System/Tools/Category.tsx
+++ b/src/pages/System/Tools/Category.tsx
@@ -121,8 +121,9 @@ const Category = () => {
         return () => {
             modal
                 .confirm({
-                    title: '确定删除',
+                    centered: true,
                     maskClosable: true,
+                    title: '确定删除',
                     content: `确定删除类别 ${value.name} 吗？`
                 })
                 .then(
@@ -266,7 +267,7 @@ const Category = () => {
 
     const addAndEditForm = (
         <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
-            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+            <AntdForm.Item hidden name={'id'} label={'ID'}>
                 <AntdInput disabled />
             </AntdForm.Item>
             <AntdForm.Item
@@ -274,7 +275,7 @@ const Category = () => {
                 label={'名称'}
                 rules={[{ required: true, whitespace: true }]}
             >
-                <AntdInput allowClear />
+                <AntdInput allowClear placeholder={'请输入名称'} />
             </AntdForm.Item>
             <AntdForm.Item name={'enable'} label={'状态'}>
                 <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
diff --git a/src/pages/System/Tools/Code.tsx b/src/pages/System/Tools/Code.tsx
index 3a2a286..a02e109 100644
--- a/src/pages/System/Tools/Code.tsx
+++ b/src/pages/System/Tools/Code.tsx
@@ -12,6 +12,7 @@ import Card from '@/components/common/Card'
 
 const Code = () => {
     const navigate = useNavigate()
+    const [modal, contextHolder] = AntdModal.useModal()
     const { id } = useParams()
     const [loading, setLoading] = useState(false)
     const [files, setFiles] = useState<IFiles>({})
@@ -20,7 +21,15 @@ const Code = () => {
 
     const handleOnRunTool = () => {
         if (checkDesktop() || platform !== 'DESKTOP') {
-            navigate(`/system/tools/execute/${id}`)
+            void modal.confirm({
+                centered: true,
+                maskClosable: true,
+                title: '注意',
+                content: '运行前请仔细查阅工具代码！',
+                onOk: () => {
+                    navigate(`/system/tools/execute/${id}`)
+                }
+            })
         } else {
             void message.warning('此应用需要桌面端环境，请在桌面端运行')
         }
@@ -71,26 +80,29 @@ const Code = () => {
     }, [])
 
     return (
-        <FitFullscreen data-component={'system-tools-code'}>
-            <Card>
-                <Playground.CodeEditor
-                    readonly
-                    files={files}
-                    selectedFileName={selectedFileName}
-                    onSelectedFileChange={setSelectedFileName}
-                />
-            </Card>
-
-            <Draggable bounds={'#root'}>
-                <div className={'draggable-content'}>
-                    <AntdFloatButton
-                        type={'primary'}
-                        icon={<Icon component={IconOxygenExecute} />}
-                        onClick={handleOnRunTool}
+        <>
+            <FitFullscreen data-component={'system-tools-code'}>
+                <Card>
+                    <Playground.CodeEditor
+                        readonly
+                        files={files}
+                        selectedFileName={selectedFileName}
+                        onSelectedFileChange={setSelectedFileName}
                     />
-                </div>
-            </Draggable>
-        </FitFullscreen>
+                </Card>
+
+                <Draggable bounds={'#root'}>
+                    <div className={'draggable-content'}>
+                        <AntdFloatButton
+                            type={'primary'}
+                            icon={<Icon component={IconOxygenExecute} />}
+                            onClick={handleOnRunTool}
+                        />
+                    </div>
+                </Draggable>
+            </FitFullscreen>
+            {contextHolder}
+        </>
     )
 }
 
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index 97a4457..332a158 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -276,8 +276,9 @@ const Template = () => {
         return () => {
             modal
                 .confirm({
-                    title: '确定删除',
+                    centered: true,
                     maskClosable: true,
+                    title: '确定删除',
                     content: `确定删除模板 ${value.name} 吗？`
                 })
                 .then(
@@ -464,9 +465,9 @@ const Template = () => {
 
         const handleOnAddFile = () => {
             void modal.confirm({
-                title: '新建文件',
                 centered: true,
                 maskClosable: true,
+                title: '新建文件',
                 footer: (_, { OkBtn, CancelBtn }) => (
                     <>
                         <OkBtn />
@@ -478,6 +479,7 @@ const Template = () => {
                         form={addFileForm}
                         ref={(ref) => {
                             setTimeout(() => {
+                                // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
                                 ref?.getFieldInstance('fileName').focus()
                             }, 50)
                         }}
@@ -507,7 +509,7 @@ const Template = () => {
                                 })
                             ]}
                         >
-                            <AntdInput />
+                            <AntdInput placeholder={'请输入文件名'} />
                         </AntdForm.Item>
                     </AntdForm>
                 ),
@@ -658,9 +660,9 @@ const Template = () => {
             return () => {
                 renameFileForm.setFieldValue('fileName', fileName)
                 void modal.confirm({
-                    title: '重命名文件',
                     centered: true,
                     maskClosable: true,
+                    title: '重命名文件',
                     footer: (_, { OkBtn, CancelBtn }) => (
                         <>
                             <OkBtn />
@@ -672,6 +674,7 @@ const Template = () => {
                             form={renameFileForm}
                             ref={(ref) => {
                                 setTimeout(() => {
+                                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
                                     ref?.getFieldInstance('fileName').focus()
                                 }, 50)
                             }}
@@ -704,7 +707,7 @@ const Template = () => {
                                     })
                                 ]}
                             >
-                                <AntdInput />
+                                <AntdInput placeholder={'请输入新文件名'} />
                             </AntdForm.Item>
                         </AntdForm>
                     ),
@@ -773,8 +776,9 @@ const Template = () => {
             return () => {
                 modal
                     .confirm({
-                        title: '确定删除',
+                        centered: true,
                         maskClosable: true,
+                        title: '确定删除',
                         content: `确定删除文件 ${fileName} 吗？`
                     })
                     .then(
@@ -979,7 +983,7 @@ const Template = () => {
 
     const addAndEditForm = (
         <AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
-            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+            <AntdForm.Item hidden name={'id'} label={'ID'}>
                 <AntdInput disabled />
             </AntdForm.Item>
             <AntdForm.Item
@@ -987,7 +991,7 @@ const Template = () => {
                 label={'名称'}
                 rules={[{ required: true, whitespace: true }]}
             >
-                <AntdInput allowClear />
+                <AntdInput allowClear placeholder={'请输入名称'} />
             </AntdForm.Item>
             <AntdForm.Item
                 hidden={isDrawerEdit}
@@ -995,10 +999,19 @@ const Template = () => {
                 label={'基板'}
                 rules={[{ required: true }]}
             >
-                <AntdCascader showSearch allowClear={false} options={baseDataGroupByPlatform()} />
+                <AntdCascader
+                    showSearch
+                    allowClear={false}
+                    options={baseDataGroupByPlatform()}
+                    placeholder={'请选择基板'}
+                />
             </AntdForm.Item>
-            <AntdForm.Item name={'entryPoint'} label={'入口'} rules={[{ required: true }]}>
-                <AntdInput allowClear />
+            <AntdForm.Item
+                name={'entryPoint'}
+                label={'入口文件'}
+                rules={[{ required: true, whitespace: true }]}
+            >
+                <AntdInput allowClear placeholder={'请输入入口文件'} />
             </AntdForm.Item>
             <AntdForm.Item name={'enable'} label={'状态'}>
                 <AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 500241c..467ebab 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -56,7 +56,7 @@ const Tools = () => {
                 <AntdAvatar
                     src={
                         <AntdImage
-                            preview={{ mask: <Icon component={IconOxygenEye}></Icon> }}
+                            preview={{ mask: <Icon component={IconOxygenEye} /> }}
                             src={`data:image/svg+xml;base64,${value}`}
                             alt={'Avatar'}
                         />
@@ -204,9 +204,9 @@ const Tools = () => {
         return () => {
             form.setFieldValue('pass', undefined)
             void modal.confirm({
-                title: '审核',
                 centered: true,
                 maskClosable: true,
+                title: '审核',
                 footer: (_, { OkBtn, CancelBtn }) => (
                     <>
                         <OkBtn />
@@ -352,8 +352,9 @@ const Tools = () => {
         return () => {
             modal
                 .confirm({
-                    title: '确定下架',
+                    centered: true,
                     maskClosable: true,
+                    title: '确定下架',
                     content: `确定下架工具 ${value.author.username}:${value.toolId}:${value.ver} 吗？`
                 })
                 .then(
@@ -387,8 +388,9 @@ const Tools = () => {
         return () => {
             modal
                 .confirm({
-                    title: '确定删除',
+                    centered: true,
                     maskClosable: true,
+                    title: '确定删除',
                     content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}:${value.ver} 吗？`
                 })
                 .then(
@@ -552,6 +554,7 @@ const Tools = () => {
                     onChange={handleOnSearchValueChange}
                     onKeyDown={handleOnSearchValueKeyDown}
                     status={isRegexLegal ? undefined : 'error'}
+                    placeholder={'请输入搜索内容'}
                 />
             </Card>
             <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 5facab6..9b67fb1 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -88,7 +88,7 @@ const User = () => {
                 <AntdAvatar
                     src={
                         <AntdImage
-                            preview={{ mask: <Icon component={IconOxygenEye}></Icon> }}
+                            preview={{ mask: <Icon component={IconOxygenEye} /> }}
                             src={`data:image/png;base64,${value}`}
                             alt={'Avatar'}
                         />
@@ -285,8 +285,9 @@ const User = () => {
     const handleOnListDeleteBtnClick = () => {
         modal
             .confirm({
-                title: '确定删除',
+                centered: true,
                 maskClosable: true,
+                title: '确定删除',
                 content: `确定删除选中的 ${tableSelectedItem.length} 个用户吗？`
             })
             .then(
@@ -326,6 +327,8 @@ const User = () => {
                 value.credentialsExpiration && isPastTime(value.credentialsExpiration)
             )
             void modal.confirm({
+                centered: true,
+                maskClosable: true,
                 icon: <></>,
                 title: (
                     <>
@@ -336,8 +339,6 @@ const User = () => {
                         修改用户 {value.username} 的密码
                     </>
                 ),
-                centered: true,
-                maskClosable: true,
                 footer: (_, { OkBtn, CancelBtn }) => (
                     <>
                         <OkBtn />
@@ -352,23 +353,17 @@ const User = () => {
                         wrapperCol={{ span: 18 }}
                         ref={(ref) => {
                             setTimeout(() => {
+                                // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
                                 ref?.getFieldInstance('password').focus()
                             }, 50)
                         }}
                     >
-                        <AntdForm.Item name={'id'} label={'ID'} labelAlign={'right'}>
-                            <AntdInput disabled />
-                        </AntdForm.Item>
                         <AntdForm.Item
                             name={'password'}
                             label={'密码'}
-                            rules={[
-                                {
-                                    required: true
-                                }
-                            ]}
+                            rules={[{ required: true, whitespace: true }]}
                         >
-                            <AntdInput.Password />
+                            <AntdInput.Password placeholder={'请输入密码'} />
                         </AntdForm.Item>
                         <AntdForm.Item
                             name={'passwordConfirm'}
@@ -387,7 +382,7 @@ const User = () => {
                                 })
                             ]}
                         >
-                            <AntdInput.Password />
+                            <AntdInput.Password placeholder={'请确认密码'} />
                         </AntdForm.Item>
                         {value.id !== '0' && (
                             <AntdForm.Item
@@ -479,8 +474,9 @@ const User = () => {
         return () => {
             modal
                 .confirm({
-                    title: '确定删除',
+                    centered: true,
                     maskClosable: true,
+                    title: '确定删除',
                     content: `确定删除用户 ${value.username} 吗？`
                 })
                 .then(
@@ -800,7 +796,7 @@ const User = () => {
             <AntdForm.Item hidden name={'avatar'}>
                 <AntdInput />
             </AntdForm.Item>
-            <AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
+            <AntdForm.Item hidden name={'id'} label={'ID'}>
                 <AntdInput disabled />
             </AntdForm.Item>
             <AntdForm.Item
@@ -808,7 +804,7 @@ const User = () => {
                 label={'用户名'}
                 rules={[{ required: true, whitespace: true }]}
             >
-                <AntdInput allowClear />
+                <AntdInput allowClear placeholder={'请输入用户名'} />
             </AntdForm.Item>
             {!isDrawerEdit && (
                 <>
@@ -817,7 +813,7 @@ const User = () => {
                         label={'密码'}
                         rules={[{ required: true, whitespace: true }]}
                     >
-                        <AntdInput.Password allowClear />
+                        <AntdInput.Password allowClear placeholder={'请输入密码'} />
                     </AntdForm.Item>
                 </>
             )}
@@ -826,14 +822,14 @@ const User = () => {
                 label={'昵称'}
                 rules={[{ required: true, whitespace: true }]}
             >
-                <AntdInput allowClear />
+                <AntdInput allowClear placeholder={'请输入昵称'} />
             </AntdForm.Item>
             <AntdForm.Item
                 name={'email'}
                 label={'邮箱'}
-                rules={[{ required: true, whitespace: true, type: 'email' }]}
+                rules={[{ required: true, type: 'email' }]}
             >
-                <AntdInput type={'email'} allowClear />
+                <AntdInput type={'email'} allowClear placeholder={'请输入邮箱'} />
             </AntdForm.Item>
             {formValues?.id !== '0' && (
                 <>
@@ -847,6 +843,7 @@ const User = () => {
                                 value: value.id,
                                 label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
                             }))}
+                            placeholder={'请选择角色'}
                         />
                     </AntdForm.Item>
                     <AntdForm.Item name={'groupIds'} label={'用户组'}>
@@ -859,6 +856,7 @@ const User = () => {
                                 value: value.id,
                                 label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
                             }))}
+                            placeholder={'请选择用户组'}
                         />
                     </AntdForm.Item>
                     <AntdForm.Item name={'verified'} label={'验证'}>
@@ -957,6 +955,7 @@ const User = () => {
                     onChange={handleOnSearchValueChange}
                     onKeyDown={handleOnSearchValueKeyDown}
                     status={isRegexLegal ? undefined : 'error'}
+                    placeholder={'请输入搜索内容'}
                 />
             </Card>
             <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index ae2db82..afb36f9 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -241,7 +241,7 @@ const Create = () => {
                                     <AntdForm.Item
                                         label={'名称'}
                                         name={'name'}
-                                        rules={[{ required: true }]}
+                                        rules={[{ required: true, whitespace: true }]}
                                     >
                                         <AntdInput
                                             maxLength={20}
@@ -253,7 +253,7 @@ const Create = () => {
                                         label={'工具 ID'}
                                         name={'toolId'}
                                         rules={[
-                                            { required: true },
+                                            { required: true, whitespace: true },
                                             {
                                                 pattern: /^[a-zA-Z-_][0-9a-zA-Z-_]{2,19}$/,
                                                 message:
@@ -270,11 +270,11 @@ const Create = () => {
                                     <AntdForm.Item
                                         label={'平台'}
                                         name={'platform'}
-                                        rules={[{ required: true }]}
+                                        rules={[{ required: true, whitespace: true }]}
                                     >
                                         <AntdSelect
-                                            placeholder={'请选择平台'}
                                             onChange={handleOnPlatformChange}
+                                            placeholder={'请选择平台'}
                                         >
                                             <AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
                                             <AntdSelect.Option key={'DESKTOP'}>
@@ -297,7 +297,7 @@ const Create = () => {
                                         label={'版本'}
                                         name={'ver'}
                                         rules={[
-                                            { required: true },
+                                            { required: true, whitespace: true },
                                             {
                                                 pattern: /^\d+\.\d+\.\d+$/,
                                                 message: `格式必须为 '<数字>.<数字>.<数字>', eg. 1.0.3`
@@ -313,10 +313,9 @@ const Create = () => {
                                     <AntdForm.Item
                                         label={'模板'}
                                         name={'templateId'}
-                                        rules={[{ required: true }]}
+                                        rules={[{ required: true, whitespace: true }]}
                                     >
                                         <AntdSelect
-                                            placeholder={'请选择模板'}
                                             options={templateData?.map((value) => ({
                                                 value: value.id,
                                                 label: value.name
@@ -324,28 +323,28 @@ const Create = () => {
                                             loading={loadingTemplate}
                                             disabled={loadingTemplate}
                                             onChange={handleOnTemplateChange}
+                                            placeholder={'请选择模板'}
                                         />
                                     </AntdForm.Item>
                                     <AntdForm.Item
                                         label={'关键字'}
                                         tooltip={'工具搜索（每个不超过10个字符）'}
                                         name={'keywords'}
-                                        rules={[{ required: true, message: '请输入关键字' }]}
+                                        rules={[{ required: true, whitespace: true }]}
                                     >
                                         <AntdSelect
-                                            placeholder={'请输入关键字'}
                                             mode={'tags'}
                                             maxCount={20}
+                                            placeholder={'请输入关键字'}
                                         />
                                     </AntdForm.Item>
                                     <AntdForm.Item
                                         label={'类别'}
                                         tooltip={'工具分类'}
                                         name={'categories'}
-                                        rules={[{ required: true }]}
+                                        rules={[{ required: true, whitespace: true }]}
                                     >
                                         <AntdSelect
-                                            placeholder={'请选择类别'}
                                             mode={'multiple'}
                                             options={categoryData?.map((value) => ({
                                                 value: value.id,
@@ -353,6 +352,7 @@ const Create = () => {
                                             }))}
                                             loading={loadingCategory}
                                             disabled={loadingCategory}
+                                            placeholder={'请选择类别'}
                                         />
                                     </AntdForm.Item>
                                     <AntdForm.Item>
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index 1a2267b..ccb7fb9 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -369,7 +369,11 @@ const Edit = () => {
             <AntdForm.Item name={'icon'} hidden>
                 <AntdInput />
             </AntdForm.Item>
-            <AntdForm.Item label={'名称'} name={'name'} rules={[{ required: true }]}>
+            <AntdForm.Item
+                label={'名称'}
+                name={'name'}
+                rules={[{ required: true, whitespace: true }]}
+            >
                 <AntdInput maxLength={20} showCount placeholder={'请输入名称'} />
             </AntdForm.Item>
             <AntdForm.Item label={'简介'} name={'description'}>
@@ -384,18 +388,17 @@ const Edit = () => {
                 label={'关键字'}
                 tooltip={'工具搜索（每个不超过10个字符）'}
                 name={'keywords'}
-                rules={[{ required: true, message: '请输入关键字' }]}
+                rules={[{ required: true, whitespace: true }]}
             >
-                <AntdSelect placeholder={'请输入关键字'} mode={'tags'} maxCount={20} />
+                <AntdSelect mode={'tags'} maxCount={20} placeholder={'请输入关键字'} />
             </AntdForm.Item>
             <AntdForm.Item
                 label={'类别'}
                 tooltip={'工具分类'}
                 name={'categories'}
-                rules={[{ required: true }]}
+                rules={[{ required: true, whitespace: true }]}
             >
                 <AntdSelect
-                    placeholder={'请选择类别'}
                     mode={'multiple'}
                     options={categoryData?.map((value) => ({
                         value: value.id,
@@ -403,6 +406,7 @@ const Edit = () => {
                     }))}
                     loading={loadingCategory}
                     disabled={loadingCategory}
+                    placeholder={'请选择类别'}
                 />
             </AntdForm.Item>
         </AntdForm>
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index 0e11024..f3837d0 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -331,11 +331,11 @@ const Store = () => {
                 >
                     <div className={`search${hideSearch ? ' hide' : ''}`}>
                         <AntdInput.Search
-                            placeholder={'请输入工具名或关键字'}
                             enterButton
                             allowClear
                             loading={isLoading}
                             onSearch={handleOnSearch}
+                            placeholder={'请输入工具名或关键字'}
                         />
                     </div>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 8671178..ee81c29 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -348,6 +348,7 @@ const Tools = () => {
                         form={upgradeForm}
                         ref={(ref) => {
                             setTimeout(() => {
+                                // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
                                 ref?.getFieldInstance('toolId').focus()
                             }, 50)
                         }}
@@ -376,7 +377,7 @@ const Tools = () => {
                             name={'ver'}
                             label={'版本'}
                             rules={[
-                                { required: true },
+                                { required: true, whitespace: true },
                                 {
                                     pattern: /^\d+\.\d+\.\d+$/,
                                     message: `格式必须为 '<数字>.<数字>.<数字>', eg. 1.0.3`
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index 23c4671..7cf28a2 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -115,6 +115,7 @@ const User = () => {
                     wrapperCol={{ span: 18 }}
                     ref={(ref) => {
                         setTimeout(() => {
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
                             ref?.getFieldInstance('originalPassword').focus()
                         }, 50)
                     }}
@@ -123,7 +124,7 @@ const User = () => {
                         name={'originalPassword'}
                         label={'原密码'}
                         labelAlign={'right'}
-                        rules={[{ required: true, message: '请输入原密码' }]}
+                        rules={[{ required: true, whitespace: true }]}
                     >
                         <AntdInput.Password placeholder={'请输入原密码'} />
                     </AntdForm.Item>
@@ -132,7 +133,7 @@ const User = () => {
                         label={'新密码'}
                         labelAlign={'right'}
                         rules={[
-                            { required: true, message: '请输入新密码' },
+                            { required: true, whitespace: true },
                             { min: 10, message: '密码至少为10位' },
                             { max: 30, message: '密码最多为30位' }
                         ]}
@@ -144,7 +145,7 @@ const User = () => {
                         label={'确认密码'}
                         labelAlign={'right'}
                         rules={[
-                            { required: true, message: '请确认密码' },
+                            { required: true },
                             ({ getFieldValue }) => ({
                                 validator(_, value) {
                                     if (!value || getFieldValue('newPassword') === value) {
@@ -247,6 +248,7 @@ const User = () => {
                                         form={twoFactorForm}
                                         ref={(ref) => {
                                             setTimeout(() => {
+                                                // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
                                                 ref?.getFieldInstance('twoFactorCode').focus()
                                             }, 50)
                                         }}
@@ -255,12 +257,13 @@ const User = () => {
                                             name={'twoFactorCode'}
                                             label={'验证码'}
                                             style={{ marginTop: 10 }}
-                                            rules={[{ required: true, len: 6 }]}
+                                            rules={[{ required: true, whitespace: true, len: 6 }]}
                                         >
                                             <AntdInput
                                                 showCount
                                                 maxLength={6}
                                                 autoComplete={'off'}
+                                                placeholder={'请输入验证码'}
                                             />
                                         </AntdForm.Item>
                                     </AntdForm>
@@ -334,6 +337,7 @@ const User = () => {
                                             form={twoFactorForm}
                                             ref={(ref) => {
                                                 setTimeout(() => {
+                                                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
                                                     ref?.getFieldInstance('twoFactorCode').focus()
                                                 }, 50)
                                             }}
@@ -342,12 +346,15 @@ const User = () => {
                                                 name={'twoFactorCode'}
                                                 label={'验证码'}
                                                 style={{ marginTop: 10, marginRight: 30 }}
-                                                rules={[{ required: true, len: 6 }]}
+                                                rules={[
+                                                    { required: true, whitespace: true, len: 6 }
+                                                ]}
                                             >
                                                 <AntdInput
                                                     showCount
                                                     maxLength={6}
                                                     autoComplete={'off'}
+                                                    placeholder={'请输入验证码'}
                                                 />
                                             </AntdForm.Item>
                                         </AntdForm>
@@ -410,6 +417,7 @@ const User = () => {
                 setAvatar(userWithPowerInfoVo.userInfo.avatar)
                 form.setFieldValue('nickname', userWithPowerInfoVo.userInfo.nickname)
                 setUserWithPowerInfoVo(userWithPowerInfoVo)
+                void form.validateFields()
             })
             .finally(() => {
                 setIsLoading(false)
@@ -509,7 +517,7 @@ const User = () => {
                                         <AntdForm.Item
                                             name={'nickname'}
                                             rules={[
-                                                { required: true, message: '请输入昵称' },
+                                                { required: true, whitespace: true },
                                                 { min: 3, message: '昵称至少为3个字符' }
                                             ]}
                                             style={{ marginBottom: 0 }}
@@ -518,6 +526,7 @@ const User = () => {
                                                 maxLength={20}
                                                 showCount
                                                 disabled={isLoading}
+                                                placeholder={'请输入昵称'}
                                             />
                                         </AntdForm.Item>
                                     </AntdForm>

From 804005cae3d1b3f73ebeced5a713bbaa18785e9a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 22 Apr 2024 18:14:43 +0800
Subject: [PATCH 254/307] Refactor(Editor): Add a prompt to leave the page

Add a prompt to leave the page when content has been changed
---
 src/pages/System/Tools/Base.tsx     | 32 +++++++++++++++++------------
 src/pages/System/Tools/Template.tsx | 32 +++++++++++++++++------------
 src/pages/Tools/Edit.tsx            | 31 ++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index d68e248..d1f8745 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -73,6 +73,19 @@ const Base = () => {
     const [compiling, setCompiling] = useState(false)
     const [compileForm] = AntdForm.useForm<{ entryFileName: string }>()
 
+    useBeforeUnload(
+        useCallback(
+            (event) => {
+                if (Object.keys(hasEdited).length) {
+                    event.preventDefault()
+                    event.returnValue = ''
+                }
+            },
+            [hasEdited]
+        ),
+        { capture: true }
+    )
+
     const handleOnTableChange = (
         pagination: _TablePaginationConfig,
         filters: Record<string, _FilterValue | null>,
@@ -99,19 +112,6 @@ const Base = () => {
         }
     }
 
-    useBeforeUnload(
-        useCallback(
-            (event) => {
-                if (Object.keys(hasEdited).length) {
-                    event.preventDefault()
-                    event.returnValue = ''
-                }
-            },
-            [hasEdited]
-        ),
-        { capture: true }
-    )
-
     const handleOnAddBtnClick = () => {
         setIsDrawerEdit(false)
         setIsDrawerOpen(true)
@@ -1128,6 +1128,12 @@ const Base = () => {
                 title={'未保存'}
                 onOk={() => blocker.proceed?.()}
                 onCancel={() => blocker.reset?.()}
+                footer={(_, { OkBtn, CancelBtn }) => (
+                    <>
+                        <OkBtn />
+                        <CancelBtn />
+                    </>
+                )}
             >
                 离开此页面将丢失所有未保存数据，是否继续？
             </AntdModal>
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index 332a158..bf7d6b0 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -71,6 +71,19 @@ const Template = () => {
     const [templateDetailLoading, setTemplateDetailLoading] = useState<Record<string, boolean>>({})
     const [tsconfig, setTsconfig] = useState<ITsconfig>()
 
+    useBeforeUnload(
+        useCallback(
+            (event) => {
+                if (Object.keys(hasEdited).length) {
+                    event.preventDefault()
+                    event.returnValue = ''
+                }
+            },
+            [hasEdited]
+        ),
+        { capture: true }
+    )
+
     const handleOnTableChange = (
         pagination: _TablePaginationConfig,
         filters: Record<string, _FilterValue | null>,
@@ -97,19 +110,6 @@ const Template = () => {
         }
     }
 
-    useBeforeUnload(
-        useCallback(
-            (event) => {
-                if (Object.keys(hasEdited).length) {
-                    event.preventDefault()
-                    event.returnValue = ''
-                }
-            },
-            [hasEdited]
-        ),
-        { capture: true }
-    )
-
     const handleOnAddBtnClick = () => {
         setIsDrawerEdit(false)
         setIsDrawerOpen(true)
@@ -1078,6 +1078,12 @@ const Template = () => {
                 title={'未保存'}
                 onOk={() => blocker.proceed?.()}
                 onCancel={() => blocker.reset?.()}
+                footer={(_, { OkBtn, CancelBtn }) => (
+                    <>
+                        <OkBtn />
+                        <CancelBtn />
+                    </>
+                )}
             >
                 离开此页面将丢失所有未保存数据，是否继续？
             </AntdModal>
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index ccb7fb9..8b5504f 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -24,6 +24,10 @@ import LoadingMask from '@/components/common/LoadingMask'
 import Card from '@/components/common/Card'
 
 const Edit = () => {
+    const blocker = useBlocker(
+        ({ currentLocation, nextLocation }) =>
+            currentLocation.pathname !== nextLocation.pathname && hasEdited
+    )
     const navigate = useNavigate()
     const { toolId } = useParams()
     const [searchParams] = useSearchParams({
@@ -49,6 +53,19 @@ const Edit = () => {
     const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>()
     const [loadingCategory, setLoadingCategory] = useState(false)
 
+    useBeforeUnload(
+        useCallback(
+            (event) => {
+                if (hasEdited) {
+                    event.preventDefault()
+                    event.returnValue = ''
+                }
+            },
+            [hasEdited]
+        ),
+        { capture: true }
+    )
+
     const handleOnChangeFileContent = (content: string, fileName: string, files: IFiles) => {
         setHasEdited(true)
 
@@ -484,6 +501,20 @@ const Edit = () => {
             >
                 {editForm}
             </AntdDrawer>
+            <AntdModal
+                open={blocker.state === 'blocked'}
+                title={'未保存'}
+                onOk={() => blocker.proceed?.()}
+                onCancel={() => blocker.reset?.()}
+                footer={(_, { OkBtn, CancelBtn }) => (
+                    <>
+                        <OkBtn />
+                        <CancelBtn />
+                    </>
+                )}
+            >
+                离开此页面将丢失所有未保存数据，是否继续？
+            </AntdModal>
         </>
     )
 }

From 2cd74d00277ff8cd4115f3f02ff4f5531f4b7c8e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 25 Apr 2024 22:54:04 +0800
Subject: [PATCH 255/307] Refactor(Router): Change home to repository

Change home route to repository. Switch repository and store place in menu.
---
 src/pages/Sign/SignIn.tsx          |  8 ++------
 src/pages/Sign/Verify.tsx          |  8 ++------
 src/pages/System/Tools/Code.tsx    |  2 +-
 src/pages/System/Tools/Execute.tsx |  2 +-
 src/pages/Tools/Edit.tsx           | 16 ++++++++--------
 src/pages/Tools/Source.tsx         |  6 +++---
 src/pages/Tools/View.tsx           |  4 ++--
 src/pages/ToolsFramework.tsx       |  8 ++++----
 src/router/tools.tsx               | 26 +++++++++++++++-----------
 9 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index be500bd..cef1eba 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -78,11 +78,7 @@ const SignIn = () => {
                         setTimeout(() => {
                             void getUserInfo().then((user) => {
                                 refreshRouter()
-                                if (searchParams.has('redirect')) {
-                                    navigate(searchParams.get('redirect') ?? '/')
-                                } else {
-                                    navigate('/')
-                                }
+                                navigate(searchParams.get('redirect') ?? '/repository')
 
                                 notification.success({
                                     message: '欢迎回来',
@@ -262,7 +258,7 @@ const SignIn = () => {
                                     navigate('/')
                                 }}
                             >
-                                返回首页
+                                返回主页
                             </a>
                             <a
                                 onClick={() => {
diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx
index 006b72d..06280c7 100644
--- a/src/pages/Sign/Verify.tsx
+++ b/src/pages/Sign/Verify.tsx
@@ -81,7 +81,7 @@ const Verify = () => {
                         break
                     case PERMISSION_NO_VERIFICATION_REQUIRED:
                         void message.warning('账户已验证')
-                        navigate('/')
+                        navigate('/repository')
                         break
                     default:
                         void message.error('出错了，请稍后重试')
@@ -128,11 +128,7 @@ const Verify = () => {
                     setTimeout(() => {
                         void requestUserInfo().then(() => {
                             refreshRouter()
-                            if (searchParams.has('redirect')) {
-                                navigate(searchParams.get('redirect') ?? '/')
-                            } else {
-                                navigate('/')
-                            }
+                            navigate(searchParams.get('redirect') ?? '/repository')
                         })
                     }, 1500)
                     break
diff --git a/src/pages/System/Tools/Code.tsx b/src/pages/System/Tools/Code.tsx
index a02e109..49f63f0 100644
--- a/src/pages/System/Tools/Code.tsx
+++ b/src/pages/System/Tools/Code.tsx
@@ -62,7 +62,7 @@ const Code = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate('/')
+                            navigate('/repository')
                         }, 3000)
                         break
                     default:
diff --git a/src/pages/System/Tools/Execute.tsx b/src/pages/System/Tools/Execute.tsx
index fe5dbb2..85a73bc 100644
--- a/src/pages/System/Tools/Execute.tsx
+++ b/src/pages/System/Tools/Execute.tsx
@@ -51,7 +51,7 @@ const Execute = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate('/')
+                            navigate('/system/tools')
                         }, 3000)
                         break
                     default:
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index 8b5504f..bbc478f 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -118,13 +118,13 @@ const Edit = () => {
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
                         setTimeout(() => {
-                            navigate('/')
+                            navigate('/repository')
                         }, 3000)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
                         setTimeout(() => {
-                            navigate('/')
+                            navigate('/repository')
                         }, 3000)
                         break
                     default:
@@ -184,13 +184,13 @@ const Edit = () => {
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
                         setTimeout(() => {
-                            navigate('/')
+                            navigate('/repository')
                         }, 3000)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
                         setTimeout(() => {
-                            navigate('/')
+                            navigate('/repository')
                         }, 3000)
                         break
                     default:
@@ -245,20 +245,20 @@ const Edit = () => {
                             case 'PROCESSING':
                                 void message.warning('工具审核中，请勿修改')
                                 setTimeout(() => {
-                                    navigate('/')
+                                    navigate('/repository')
                                 }, 3000)
                                 break
                             default:
                                 void message.warning('请先创建新版本后编辑工具')
                                 setTimeout(() => {
-                                    navigate('/')
+                                    navigate('/repository')
                                 }, 3000)
                         }
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate('/')
+                            navigate('/repository')
                         }, 3000)
                         break
                     default:
@@ -322,7 +322,7 @@ const Edit = () => {
 
     useEffect(() => {
         if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
-            navigate('/')
+            navigate('/repository')
             return
         }
         getTool()
diff --git a/src/pages/Tools/Source.tsx b/src/pages/Tools/Source.tsx
index e5da384..d808c86 100644
--- a/src/pages/Tools/Source.tsx
+++ b/src/pages/Tools/Source.tsx
@@ -49,7 +49,7 @@ const Source = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate('/')
+                            navigate('/repository')
                         }, 3000)
                         break
                     default:
@@ -65,7 +65,7 @@ const Source = () => {
     useEffect(() => {
         if (username === '!' && !getLoginStatus()) {
             setTimeout(() => {
-                navigate('/')
+                navigate('/repository')
             }, 3000)
             return
         }
@@ -78,7 +78,7 @@ const Source = () => {
             return
         }
         if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
-            navigate('/')
+            navigate('/repository')
             return
         }
         getTool()
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index 375ddef..9b60593 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -72,7 +72,7 @@ const View = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate('/')
+                            navigate('/repository')
                         }, 3000)
                         break
                     default:
@@ -101,7 +101,7 @@ const View = () => {
             return
         }
         if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
-            navigate('/')
+            navigate('/repository')
             return
         }
         getTool()
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 7a36100..13bd59c 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -13,13 +13,13 @@ const ToolsFramework = () => {
                         <Sidebar.ItemList>
                             <Sidebar.Item
                                 end
-                                path={'/'}
+                                path={'/store'}
                                 icon={tools[0].icon}
                                 text={tools[0].name}
                             />
                             <Sidebar.Item
                                 end
-                                path={'/store'}
+                                path={'/repository'}
                                 icon={tools[1].icon}
                                 text={tools[1].name}
                             />
@@ -29,8 +29,8 @@ const ToolsFramework = () => {
                             <Sidebar.ItemList>
                                 {tools.map((tool) => {
                                     return tool.menu &&
-                                        tool.id !== 'tools' &&
-                                        tool.id !== 'tools-store' ? (
+                                        tool.id !== 'tools-store' &&
+                                        tool.id !== 'tools-repository' ? (
                                         <Sidebar.Item
                                             path={tool.absolutePath}
                                             icon={tool.icon}
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index 12ef973..ca18ede 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -1,14 +1,4 @@
 export const tools: RouteJsonObject[] = [
-    {
-        path: '',
-        absolutePath: '/',
-        id: 'tools',
-        component: lazy(() => import('@/pages/Tools')),
-        name: '主页',
-        icon: lazy(() => import('~icons/oxygen/home')),
-        menu: true,
-        auth: false
-    },
     {
         path: 'store',
         absolutePath: '/store',
@@ -19,6 +9,21 @@ export const tools: RouteJsonObject[] = [
         icon: lazy(() => import('~icons/oxygen/store')),
         menu: true
     },
+    {
+        path: 'repository',
+        absolutePath: '/repository',
+        id: 'tools-repository',
+        component: lazy(() => import('@/pages/Tools')),
+        name: '个人仓库',
+        titlePostfix: ' - 仓库',
+        icon: lazy(() => import('~icons/oxygen/home')),
+        menu: true
+    },
+    {
+        path: '',
+        absolutePath: '/',
+        element: <Navigate to="/store" replace />
+    },
     {
         path: 'store/:username',
         absolutePath: '/store',
@@ -34,7 +39,6 @@ export const tools: RouteJsonObject[] = [
         name: '创建工具',
         titlePostfix: ' - 创建新工具',
         icon: lazy(() => import('~icons/oxygen/newProject')),
-        menu: false,
         auth: true
     },
     {

From 3f22f8188045b3a8d3666bc4dc72830f2e2bff37 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 26 Apr 2024 09:38:28 +0800
Subject: [PATCH 256/307] Refactor(HideScrollbar): Add scrollbar padding
 attributes

Add scrollbar padding attributes to allow custom scrollbar padding style
---
 src/assets/css/components/common/hide-scrollbar.scss |  2 --
 src/components/common/HideScrollbar.tsx              | 10 ++++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 80f9463..6ca07e8 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -68,7 +68,6 @@
   }
 
   .vertical-scrollbar {
-    padding: 12px 2px;
     height: 100%;
     left: 100%;
     top: 0;
@@ -80,7 +79,6 @@
   }
 
   .horizontal-scrollbar {
-    padding: 4px 12px;
     width: 100%;
     left: 0;
     top: 100%;
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index a79889b..0515efc 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -21,6 +21,8 @@ interface HideScrollbarProps
     minHeight?: string | number
     scrollbarWidth?: string | number
     autoHideWaitingTime?: number
+    scrollbarAsidePadding?: number
+    scrollbarEdgePadding?: number
 }
 
 export interface HideScrollbarElement {
@@ -74,6 +76,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
             children,
             style,
             className,
+            scrollbarAsidePadding = 12,
+            scrollbarEdgePadding = 4,
             ...props
         },
         ref
@@ -578,7 +582,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                                         ? maskRef.current?.clientLeft +
                                           maskRef.current?.clientWidth -
                                           1
-                                        : undefined
+                                        : undefined,
+                                    padding: `${scrollbarAsidePadding}px ${scrollbarEdgePadding}px`
                                 }}
                             >
                                 <div className={'box'} style={{ width: scrollbarWidth }}>
@@ -620,7 +625,8 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                                         ? maskRef.current?.clientTop +
                                           maskRef.current?.clientHeight -
                                           1
-                                        : undefined
+                                        : undefined,
+                                    padding: `${scrollbarEdgePadding}px ${scrollbarAsidePadding}px`
                                 }}
                             >
                                 <div className={'box'} style={{ height: scrollbarWidth }}>

From 0e354ca833debb14dffcc03c22043d774e72594e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 26 Apr 2024 09:41:39 +0800
Subject: [PATCH 257/307] Fix(FileSelector): Fix scrollbar can not auto hide
 bug

Fix scrollbar can not auto hide bug. Optimize scrollbar style.
---
 .../Playground/CodeEditor/FileSelector/index.tsx          | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index b86cb55..1c06853 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -166,7 +166,13 @@ const FileSelector = ({
         <>
             <div data-component={'playground-file-selector'} className={'tab'}>
                 <div className={'multiple'}>
-                    <HideScrollbar ref={hideScrollbarRef}>
+                    <HideScrollbar
+                        ref={hideScrollbarRef}
+                        autoHideWaitingTime={800}
+                        scrollbarWidth={1}
+                        scrollbarAsidePadding={0}
+                        scrollbarEdgePadding={0}
+                    >
                         <FlexBox direction={'horizontal'} className={'tab-content'}>
                             {tabs.map((item, index) => (
                                 <Item

From 296a45df0048fb150c3f5f1e388b15aceb7c7674 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 26 Apr 2024 09:56:36 +0800
Subject: [PATCH 258/307] Chore(Eslint): Dismiss exhaustive deps warning

Add config to dismiss exhaustive deps warning
---
 .eslintrc.cjs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 522cb9d..ad8474d 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -34,6 +34,7 @@ module.exports = {
             'warn',
             { allowConstantExport: true }
         ],
-        '@typescript-eslint/no-non-null-assertion': 'off'
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        'react-hooks/exhaustive-deps': 'off',
     }
 }

From 64c510cd42c79cef4a8a121f13c4f0afbdf7ab67 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 26 Apr 2024 11:25:42 +0800
Subject: [PATCH 259/307] Refactor(Navigate): Optimize navigate

Unified management navigation
---
 src/components/common/Sidebar/Footer.tsx |   5 +-
 src/pages/Sign/Forget.tsx                |  11 ++-
 src/pages/Sign/SignIn.tsx                |  14 ++-
 src/pages/Sign/SignUp.tsx                |   9 +-
 src/pages/Sign/Verify.tsx                |   8 +-
 src/pages/System/Tools/Code.tsx          |   5 +-
 src/pages/System/Tools/Execute.tsx       |   3 +-
 src/pages/System/Tools/index.tsx         |   3 +-
 src/pages/Tools/Create.tsx               |   5 +-
 src/pages/Tools/Edit.tsx                 |  17 ++--
 src/pages/Tools/Source.tsx               |  20 ++--
 src/pages/Tools/Store.tsx                |  19 ++--
 src/pages/Tools/User.tsx                 |  19 ++--
 src/pages/Tools/View.tsx                 |  18 ++--
 src/pages/Tools/index.tsx                |  27 +++--
 src/util/navigation.tsx                  | 119 +++++++++++++++++++++++
 16 files changed, 220 insertions(+), 82 deletions(-)
 create mode 100644 src/util/navigation.tsx

diff --git a/src/components/common/Sidebar/Footer.tsx b/src/components/common/Sidebar/Footer.tsx
index 8095ef2..f7cc765 100644
--- a/src/components/common/Sidebar/Footer.tsx
+++ b/src/components/common/Sidebar/Footer.tsx
@@ -2,6 +2,7 @@ import Icon from '@ant-design/icons'
 import { COLOR_ERROR } from '@/constants/common.constants'
 import { getRedirectUrl } from '@/util/route'
 import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth'
+import { navigateToLogin, navigateToUser } from '@/util/navigation'
 import { r_auth_logout } from '@/services/auth'
 
 const Footer = () => {
@@ -15,9 +16,9 @@ const Footer = () => {
 
     const handleClickAvatar = () => {
         if (getLoginStatus()) {
-            navigate('/user')
+            navigateToUser(navigate)
         } else {
-            navigate(getRedirectUrl('/login', `${lastMatch.pathname}${location.search}`))
+            navigateToLogin(navigate, undefined, `${lastMatch.pathname}${location.search}`)
         }
     }
 
diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx
index 1cbc871..dafa452 100644
--- a/src/pages/Sign/Forget.tsx
+++ b/src/pages/Sign/Forget.tsx
@@ -8,6 +8,7 @@ import {
     PERMISSION_USER_NOT_FOUND,
     SYSTEM_INVALID_CAPTCHA_CODE
 } from '@/constants/common.constants'
+import { navigateToLogin } from '@/util/navigation'
 import { r_auth_forget, r_auth_retrieve } from '@/services/auth'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
@@ -272,7 +273,15 @@ const Forget = () => {
 
                         <div className={'footer'}>
                             找到了？
-                            <a onClick={() => navigate(`/login`, { replace: true })}>登录</a>
+                            <a
+                                onClick={() =>
+                                    navigateToLogin(navigate, undefined, undefined, {
+                                        replace: true
+                                    })
+                                }
+                            >
+                                登录
+                            </a>
                         </div>
                     </div>
                 </FlexBox>
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index cef1eba..1812be6 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -12,6 +12,12 @@ import {
 } from '@/constants/common.constants'
 import { getUserInfo, setToken } from '@/util/auth'
 import { utcToLocalTime } from '@/util/datetime'
+import {
+    navigateToForget,
+    navigateToRedirect,
+    navigateToRegister,
+    navigateToRoot
+} from '@/util/navigation'
 import { r_auth_login } from '@/services/auth'
 import { AppContext } from '@/App'
 import FitCenter from '@/components/common/FitCenter'
@@ -78,7 +84,7 @@ const SignIn = () => {
                         setTimeout(() => {
                             void getUserInfo().then((user) => {
                                 refreshRouter()
-                                navigate(searchParams.get('redirect') ?? '/repository')
+                                navigateToRedirect(navigate, searchParams, '/repository')
 
                                 notification.success({
                                     message: '欢迎回来',
@@ -255,14 +261,14 @@ const SignIn = () => {
                         <FlexBox direction={'horizontal'} className={'addition'}>
                             <a
                                 onClick={() => {
-                                    navigate('/')
+                                    navigateToRoot(navigate)
                                 }}
                             >
                                 返回主页
                             </a>
                             <a
                                 onClick={() => {
-                                    navigate(`/forget${location.search}`, { replace: true })
+                                    navigateToForget(navigate, location.search, { replace: true })
                                 }}
                             >
                                 忘记密码？
@@ -283,7 +289,7 @@ const SignIn = () => {
                             还没有账号？
                             <a
                                 onClick={() =>
-                                    navigate(`/register${location.search}`, { replace: true })
+                                    navigateToRegister(navigate, location.search, { replace: true })
                                 }
                             >
                                 注册
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx
index b1c8b41..3d997b5 100644
--- a/src/pages/Sign/SignUp.tsx
+++ b/src/pages/Sign/SignUp.tsx
@@ -8,6 +8,7 @@ import {
     SYSTEM_MATCH_SENSITIVE_WORD
 } from '@/constants/common.constants'
 import { getLoginStatus, setToken } from '@/util/auth'
+import { navigateToLogin } from '@/util/navigation'
 import { r_auth_register, r_auth_resend } from '@/services/auth'
 import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
@@ -49,9 +50,7 @@ const SignUp = () => {
             return
         }
         if (getLoginStatus()) {
-            navigate(`/login${location.search}`, {
-                replace: true
-            })
+            navigateToLogin(navigate, location.search, undefined, { replace: true })
         }
     }, [location.pathname])
 
@@ -245,7 +244,9 @@ const SignUp = () => {
                             已有账号？
                             <a
                                 onClick={() =>
-                                    navigate(`/login${location.search}`, { replace: true })
+                                    navigateToLogin(navigate, location.search, undefined, {
+                                        replace: true
+                                    })
                                 }
                             >
                                 登录
diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx
index 06280c7..0dd3a73 100644
--- a/src/pages/Sign/Verify.tsx
+++ b/src/pages/Sign/Verify.tsx
@@ -7,7 +7,7 @@ import {
     SYSTEM_MATCH_SENSITIVE_WORD
 } from '@/constants/common.constants'
 import { getLoginStatus, getUserInfo, requestUserInfo } from '@/util/auth'
-import { getRedirectUrl } from '@/util/route'
+import { navigateToLogin, navigateToRedirect, navigateToRepository } from '@/util/navigation'
 import { r_auth_resend, r_auth_verify } from '@/services/auth'
 import { r_api_avatar_random_base64 } from '@/services/api/avatar'
 import { AppContext } from '@/App'
@@ -32,7 +32,7 @@ const Verify = () => {
         }
 
         if (!getLoginStatus()) {
-            navigate(getRedirectUrl('/login', `${location.pathname}${location.search}`), {
+            navigateToLogin(navigate, undefined, `${location.pathname}${location.search}`, {
                 replace: true
             })
             return
@@ -81,7 +81,7 @@ const Verify = () => {
                         break
                     case PERMISSION_NO_VERIFICATION_REQUIRED:
                         void message.warning('账户已验证')
-                        navigate('/repository')
+                        navigateToRepository(navigate)
                         break
                     default:
                         void message.error('出错了，请稍后重试')
@@ -128,7 +128,7 @@ const Verify = () => {
                     setTimeout(() => {
                         void requestUserInfo().then(() => {
                             refreshRouter()
-                            navigate(searchParams.get('redirect') ?? '/repository')
+                            navigateToRedirect(navigate, searchParams, '/repository')
                         })
                     }, 1500)
                     break
diff --git a/src/pages/System/Tools/Code.tsx b/src/pages/System/Tools/Code.tsx
index 49f63f0..8a34820 100644
--- a/src/pages/System/Tools/Code.tsx
+++ b/src/pages/System/Tools/Code.tsx
@@ -3,6 +3,7 @@ import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/tools/code.scss'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { checkDesktop } from '@/util/common'
+import { navigateToExecute, navigateToRepository } from '@/util/navigation'
 import { r_sys_tool_get_one } from '@/services/system'
 import { IFiles } from '@/components/Playground/shared'
 import { base64ToFiles } from '@/components/Playground/files'
@@ -27,7 +28,7 @@ const Code = () => {
                 title: '注意',
                 content: '运行前请仔细查阅工具代码！',
                 onOk: () => {
-                    navigate(`/system/tools/execute/${id}`)
+                    navigateToExecute(navigate, id!)
                 }
             })
         } else {
@@ -62,7 +63,7 @@ const Code = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate('/repository')
+                            navigateToRepository(navigate)
                         }, 3000)
                         break
                     default:
diff --git a/src/pages/System/Tools/Execute.tsx b/src/pages/System/Tools/Execute.tsx
index 85a73bc..9e35825 100644
--- a/src/pages/System/Tools/Execute.tsx
+++ b/src/pages/System/Tools/Execute.tsx
@@ -1,5 +1,6 @@
 import '@/assets/css/pages/system/tools/execute.scss'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { navigateToTools } from '@/util/navigation'
 import { r_sys_tool_get_one } from '@/services/system'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Card from '@/components/common/Card'
@@ -51,7 +52,7 @@ const Execute = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate('/system/tools')
+                            navigateToTools(navigate)
                         }, 3000)
                         break
                     default:
diff --git a/src/pages/System/Tools/index.tsx b/src/pages/System/Tools/index.tsx
index 467ebab..36690ca 100644
--- a/src/pages/System/Tools/index.tsx
+++ b/src/pages/System/Tools/index.tsx
@@ -17,6 +17,7 @@ import {
     DATABASE_UPDATE_SUCCESS,
     TOOL_NOT_UNDER_REVIEW
 } from '@/constants/common.constants'
+import { navigateToCode } from '@/util/navigation'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -196,7 +197,7 @@ const Tools = () => {
 
     const handleOnViewBtnClick = (value: ToolVo) => {
         return () => {
-            navigate(`/system/tools/code/${value.id}`)
+            navigateToCode(navigate, value.id)
         }
     }
 
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index afb36f9..5085ef9 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -5,6 +5,7 @@ import {
     DATABASE_INSERT_SUCCESS,
     DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
+import { navigateToEdit } from '@/util/navigation'
 import {
     r_tool_category_get,
     r_tool_create,
@@ -44,9 +45,7 @@ const Create = () => {
                         void message.success(
                             `创建工具 ${response.data!.name}<${response.data!.toolId}:${response.data!.platform.slice(0, 1)}${response.data!.platform.slice(1).toLowerCase()}:${response.data!.ver}> 成功`
                         )
-                        navigate(
-                            `/edit/${response.data!.toolId}${response.data!.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${response.data!.platform}` : ''}`
-                        )
+                        navigateToEdit(navigate, response.data!.toolId, response.data!.platform)
                         break
                     case DATABASE_DUPLICATE_KEY:
                         void message.warning('已存在相同 ID 的应用')
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index bbc478f..85dcc5f 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -8,6 +8,7 @@ import {
     TOOL_HAS_BEEN_PUBLISHED,
     TOOL_UNDER_REVIEW
 } from '@/constants/common.constants'
+import { navigateToRepository } from '@/util/navigation'
 import { r_tool_category_get, r_tool_detail, r_tool_update } from '@/services/tool'
 import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
 import {
@@ -118,13 +119,13 @@ const Edit = () => {
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
                         setTimeout(() => {
-                            navigate('/repository')
+                            navigateToRepository(navigate)
                         }, 3000)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
                         setTimeout(() => {
-                            navigate('/repository')
+                            navigateToRepository(navigate)
                         }, 3000)
                         break
                     default:
@@ -184,13 +185,13 @@ const Edit = () => {
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
                         setTimeout(() => {
-                            navigate('/repository')
+                            navigateToRepository(navigate)
                         }, 3000)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
                         setTimeout(() => {
-                            navigate('/repository')
+                            navigateToRepository(navigate)
                         }, 3000)
                         break
                     default:
@@ -245,20 +246,20 @@ const Edit = () => {
                             case 'PROCESSING':
                                 void message.warning('工具审核中，请勿修改')
                                 setTimeout(() => {
-                                    navigate('/repository')
+                                    navigateToRepository(navigate)
                                 }, 3000)
                                 break
                             default:
                                 void message.warning('请先创建新版本后编辑工具')
                                 setTimeout(() => {
-                                    navigate('/repository')
+                                    navigateToRepository(navigate)
                                 }, 3000)
                         }
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate('/repository')
+                            navigateToRepository(navigate)
                         }, 3000)
                         break
                     default:
@@ -322,7 +323,7 @@ const Edit = () => {
 
     useEffect(() => {
         if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
-            navigate('/repository')
+            navigateToRepository(navigate)
             return
         }
         getTool()
diff --git a/src/pages/Tools/Source.tsx b/src/pages/Tools/Source.tsx
index d808c86..a229115 100644
--- a/src/pages/Tools/Source.tsx
+++ b/src/pages/Tools/Source.tsx
@@ -1,12 +1,13 @@
 import '@/assets/css/pages/tools/source.scss'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import { getLoginStatus } from '@/util/auth'
+import { navigateToRepository, navigateToSource } from '@/util/navigation'
 import { r_tool_detail } from '@/services/tool'
 import { IFiles } from '@/components/Playground/shared'
 import { base64ToFiles } from '@/components/Playground/files'
 import Playground from '@/components/Playground'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Card from '@/components/common/Card'
-import { getLoginStatus } from '@/util/auth'
 
 const Source = () => {
     const navigate = useNavigate()
@@ -49,7 +50,7 @@ const Source = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate('/repository')
+                            navigateToRepository(navigate)
                         }, 3000)
                         break
                     default:
@@ -63,22 +64,23 @@ const Source = () => {
     }
 
     useEffect(() => {
+        const platform = searchParams.get('platform')!
+        if (!['WEB', 'DESKTOP', 'ANDROID'].includes(platform)) {
+            navigateToRepository(navigate)
+            return
+        }
         if (username === '!' && !getLoginStatus()) {
             setTimeout(() => {
-                navigate('/repository')
+                navigateToRepository(navigate)
             }, 3000)
             return
         }
         if (username !== '!' && ver) {
-            navigate(`/source/${username}/${toolId}`)
+            navigateToSource(navigate, username!, toolId!, platform as Platform)
             return
         }
         if (username === '!' && !ver) {
-            navigate(`/source/!/${toolId}/latest`)
-            return
-        }
-        if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
-            navigate('/repository')
+            navigateToSource(navigate, '!', toolId!, platform as Platform, 'latest')
             return
         }
         getTool()
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index f3837d0..43651e9 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -5,6 +5,7 @@ import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/store.scss'
 import { COLOR_BACKGROUND, COLOR_MAIN, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { checkDesktop } from '@/util/common'
+import { navigateToSource, navigateToStore, navigateToView } from '@/util/navigation'
 import { r_tool_store_get } from '@/services/tool'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
@@ -80,21 +81,17 @@ const CommonCard = ({
             })
             return
         }
-        navigate(
-            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
-        )
+        navigateToView(navigate, authorUsername, toolId, platform)
     }
 
     const handleOnClickAuthor = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigate(authorUsername)
+        navigateToStore(navigate, authorUsername)
     }
 
     const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigate(
-            `/source/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
-        )
+        navigateToSource(navigate, authorUsername, toolId, platform)
     }
 
     const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
@@ -137,16 +134,12 @@ const CommonCard = ({
             )
             return
         }
-        navigate(
-            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
-        )
+        navigateToView(navigate, authorUsername, toolId, platform)
     }
 
     const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigate(
-            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
-        )
+        navigateToView(navigate, authorUsername, toolId, platform)
     }
 
     return (
diff --git a/src/pages/Tools/User.tsx b/src/pages/Tools/User.tsx
index 2d1c9e5..bfe2fd7 100644
--- a/src/pages/Tools/User.tsx
+++ b/src/pages/Tools/User.tsx
@@ -10,6 +10,7 @@ import {
     DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
 import { checkDesktop } from '@/util/common'
+import { navigateToRoot, navigateToSource, navigateToView } from '@/util/navigation'
 import { r_sys_user_info_get_basic } from '@/services/system'
 import { r_tool_store_get_by_username } from '@/services/tool'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -82,16 +83,12 @@ const CommonCard = ({
             })
             return
         }
-        navigate(
-            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
-        )
+        navigateToView(navigate, authorUsername, toolId, platform)
     }
 
     const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigate(
-            `/source/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
-        )
+        navigateToSource(navigate, authorUsername, toolId, platform)
     }
 
     const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
@@ -134,16 +131,12 @@ const CommonCard = ({
             )
             return
         }
-        navigate(
-            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
-        )
+        navigateToView(navigate, authorUsername, toolId, platform)
     }
 
     const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigate(
-            `/view/${authorUsername}/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
-        )
+        navigateToView(navigate, authorUsername, toolId, platform)
     }
 
     return (
@@ -269,7 +262,7 @@ const User = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.warning('用户不存在')
                         setTimeout(() => {
-                            navigate('/')
+                            navigateToRoot(navigate)
                         }, 3000)
                         break
                     default:
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index 9b60593..d61e981 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -1,6 +1,7 @@
 import '@/assets/css/pages/tools/view.scss'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { getLoginStatus } from '@/util/auth'
+import { navigateToRepository, navigateToRoot, navigateToView } from '@/util/navigation'
 import { r_tool_detail } from '@/services/tool'
 import compiler from '@/components/Playground/compiler'
 import { IImportMap } from '@/components/Playground/shared'
@@ -72,7 +73,7 @@ const View = () => {
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
                         setTimeout(() => {
-                            navigate('/repository')
+                            navigateToRepository(navigate)
                         }, 3000)
                         break
                     default:
@@ -86,22 +87,23 @@ const View = () => {
     }
 
     useEffect(() => {
+        const platform = searchParams.get('platform')!
+        if (!['WEB', 'DESKTOP', 'ANDROID'].includes(platform)) {
+            navigateToRepository(navigate)
+            return
+        }
         if (username === '!' && !getLoginStatus()) {
             setTimeout(() => {
-                navigate('/')
+                navigateToRoot(navigate)
             }, 3000)
             return
         }
         if (username !== '!' && ver) {
-            navigate(`/view/${username}/${toolId}`)
+            navigateToView(navigate, username!, toolId!, platform as Platform)
             return
         }
         if (username === '!' && !ver) {
-            navigate(`/view/!/${toolId}/latest`)
-            return
-        }
-        if (!['WEB', 'DESKTOP', 'ANDROID'].includes(searchParams.get('platform')!)) {
-            navigate('/repository')
+            navigateToView(navigate, '!', toolId!, platform as Platform)
             return
         }
         getTool()
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index ee81c29..09f9176 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -16,6 +16,7 @@ import {
 } from '@/constants/common.constants'
 import { checkDesktop } from '@/util/common'
 import { getLoginStatus } from '@/util/auth'
+import { navigateToEdit, navigateToSource, navigateToView } from '@/util/navigation'
 import {
     r_tool_cancel,
     r_tool_delete,
@@ -145,8 +146,12 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
 
     const handleOnOpenTool = () => {
         if (checkDesktop() || selectedTool.platform !== 'DESKTOP') {
-            navigate(
-                `/view/!/${selectedTool.toolId}/${selectedTool.ver}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
+            navigateToView(
+                navigate,
+                '!',
+                selectedTool.toolId,
+                selectedTool.platform,
+                selectedTool.ver
             )
         } else {
             void message.warning('此应用需要桌面端环境，请在桌面端打开')
@@ -157,9 +162,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
         if (['NONE', 'REJECT'].includes(selectedTool.review)) {
             return () => {
                 if (checkDesktop() || selectedTool.platform !== 'DESKTOP') {
-                    navigate(
-                        `/edit/${selectedTool.toolId}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
-                    )
+                    navigateToEdit(navigate, selectedTool.toolId, selectedTool.platform)
                 } else {
                     void message.warning('此应用需要桌面端环境，请在桌面端编辑')
                 }
@@ -171,8 +174,12 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
     const handleOnSourceTool = () => {
         if (selectedTool.review === 'PASS') {
             return () => {
-                navigate(
-                    `/source/!/${selectedTool.toolId}/${selectedTool.ver}${selectedTool.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${selectedTool.platform}` : ''}`
+                navigateToSource(
+                    navigate,
+                    '!',
+                    selectedTool.toolId,
+                    selectedTool.platform,
+                    selectedTool.ver
                 )
             }
         }
@@ -406,8 +413,10 @@ const Tools = () => {
                                             checkDesktop() ||
                                             response.data!.platform !== 'DESKTOP'
                                         ) {
-                                            navigate(
-                                                `/edit/${response.data!.toolId}${response.data!.platform !== import.meta.env.VITE_PLATFORM ? `?platform=${response.data!.platform}` : ''}`
+                                            navigateToEdit(
+                                                navigate,
+                                                response.data!.toolId,
+                                                response.data!.platform
                                             )
                                         }
                                         resolve()
diff --git a/src/util/navigation.tsx b/src/util/navigation.tsx
new file mode 100644
index 0000000..088d636
--- /dev/null
+++ b/src/util/navigation.tsx
@@ -0,0 +1,119 @@
+import { NavigateFunction, NavigateOptions } from 'react-router'
+import { getRedirectUrl } from '@/util/route'
+
+export const navigateToRoot = (navigate: NavigateFunction, options?: NavigateOptions) => {
+    navigate('/', options)
+}
+
+export const navigateToStore = (
+    navigate: NavigateFunction,
+    username?: string,
+    options?: NavigateOptions
+) => {
+    navigate(`/store${username ? `/${username}` : ''}`, options)
+}
+
+export const navigateToRepository = (navigate: NavigateFunction, options?: NavigateOptions) => {
+    navigate('/repository', options)
+}
+
+export const navigateToLogin = (
+    navigate: NavigateFunction,
+    locationSearch?: string,
+    redirectUrl?: string,
+    options?: NavigateOptions
+) => {
+    navigate(
+        redirectUrl ? getRedirectUrl('/login', redirectUrl) : `/login${locationSearch}`,
+        options
+    )
+}
+
+export const navigateToView = (
+    navigate: NavigateFunction,
+    username: string,
+    toolId: string,
+    platform: Platform,
+    version?: string,
+    options?: NavigateOptions
+) => {
+    navigate(
+        `/view/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
+        options
+    )
+}
+
+export const navigateToSource = (
+    navigate: NavigateFunction,
+    username: string,
+    toolId: string,
+    platform: Platform,
+    version?: string,
+    options?: NavigateOptions
+) => {
+    navigate(
+        `/source/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
+        options
+    )
+}
+
+export const navigateToRedirect = (
+    navigate: NavigateFunction,
+    searchParams: URLSearchParams,
+    defaultUrl: '/repository' | '/',
+    options?: NavigateOptions
+) => {
+    navigate(searchParams.get('redirect') ?? defaultUrl, options)
+}
+
+export const navigateToForget = (
+    navigate: NavigateFunction,
+    locationSearch: string,
+    options?: NavigateOptions
+) => {
+    navigate(`/forget/${locationSearch}`, options)
+}
+
+export const navigateToRegister = (
+    navigate: NavigateFunction,
+    locationSearch: string,
+    options?: NavigateOptions
+) => {
+    navigate(`/register/${locationSearch}`, options)
+}
+
+export const navigateToExecute = (
+    navigate: NavigateFunction,
+    toolId: string,
+    options?: NavigateOptions
+) => {
+    navigate(`/system/tools/execute/${toolId}`, options)
+}
+
+export const navigateToCode = (
+    navigate: NavigateFunction,
+    toolId: string,
+    options?: NavigateOptions
+) => {
+    navigate(`/system/tools/code/${toolId}`, options)
+}
+
+export const navigateToEdit = (
+    navigate: NavigateFunction,
+    toolId: string,
+    platform: Platform,
+    options?: NavigateOptions
+) => {
+    navigate(
+        `/edit/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
+        options
+    )
+}
+
+export const navigateToUser = (navigate: NavigateFunction, options?: NavigateOptions) => {
+    navigate('/user', options)
+}
+
+export const navigateToTools = (navigate: NavigateFunction, options?: NavigateOptions) => {
+    navigate('/system/tools', options)
+}

From 5c77e1ae9092745b7a3a30264f97a6bb807577e5 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 26 Apr 2024 18:09:07 +0800
Subject: [PATCH 260/307] Feat(Store): Add tool favorite control

Add tool favorite control
---
 src/assets/svg/star.svg           |  1 +
 src/assets/svg/starFilled.svg     |  1 +
 src/constants/common.constants.ts |  2 ++
 src/constants/urls.constants.ts   |  1 +
 src/global.d.ts                   |  7 +++++
 src/pages/Tools/Store.tsx         | 51 +++++++++++++++++++++++++++++--
 src/services/tool.tsx             |  7 +++++
 7 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/svg/star.svg
 create mode 100644 src/assets/svg/starFilled.svg

diff --git a/src/assets/svg/star.svg b/src/assets/svg/star.svg
new file mode 100644
index 0000000..9cda14b
--- /dev/null
+++ b/src/assets/svg/star.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1151 1024"><path d="M1056.069394 342.982943L763.905526 300.38821 633.321676 35.620955c-23.397106-47.194163-91.188723-47.794089-114.785804 0L387.952021 300.38821 95.788154 342.982943c-52.39352 7.59906-73.390924 72.191072-35.395623 109.186496l211.373859 205.974527-49.993817 290.964016c-8.998887 52.593496 46.394262 91.988624 92.788525 67.391666L575.928774 879.116638l261.367676 137.38301c46.394262 24.396983 101.787412-14.79817 92.788525-67.391666l-49.993818-290.964016 211.373859-205.974527c37.995301-36.995425 16.997898-101.587436-35.395622-109.186496zM777.103894 624.548121l47.394139 276.765772L575.928774 770.730042l-248.569259 130.583851 47.394139-276.765772-201.175121-195.975763 277.965624-40.395005 124.384617-251.968838 124.384617 251.968838 277.965623 40.395005-201.17512 195.975763z" /></svg>
diff --git a/src/assets/svg/starFilled.svg b/src/assets/svg/starFilled.svg
new file mode 100644
index 0000000..849b839
--- /dev/null
+++ b/src/assets/svg/starFilled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1151 1024"><path d="M518.535872 35.620955L387.952021 300.38821 95.788154 342.982943c-52.39352 7.59906-73.390924 72.191072-35.395623 109.186496l211.373859 205.974527-49.993817 290.964016c-8.998887 52.593496 46.394262 91.988624 92.788525 67.391666L575.928774 879.116638l261.367676 137.38301c46.394262 24.396983 101.787412-14.79817 92.788525-67.391666l-49.993818-290.964016 211.373859-205.974527c37.995301-36.995425 16.997898-101.587436-35.395622-109.186496L763.905526 300.38821 633.321676 35.620955c-23.397106-47.194163-91.188723-47.794089-114.785804 0z" /></svg>
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index 6a4a6fe..bde0fe0 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -1,6 +1,7 @@
 export const PRODUCTION_NAME = 'Oxygen Toolbox'
 export const STORAGE_TOKEN_KEY = 'JWT_TOKEN'
 export const STORAGE_USER_INFO_KEY = 'USER_INFO'
+export const STORAGE_FAVORITE_KEY = 'FAVORITE'
 export const COLOR_ORIGIN = 'white'
 export const COLOR_PRODUCTION = '#4E47BB'
 export const COLOR_MAIN = COLOR_PRODUCTION
@@ -77,6 +78,7 @@ export const DATABASE_DELETE_FILED = 30035
 export const DATABASE_EXECUTE_ERROR = 30050
 export const DATABASE_DUPLICATE_KEY = 30051
 export const DATABASE_NO_RECORD_FOUND = 30052
+export const DATABASE_RECORD_ALREADY_EXISTS = 30053
 
 export const TOOL_SUBMIT_SUCCESS = 40010
 export const TOOL_CANCEL_SUCCESS = 40011
diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index c3b20f7..18cec2a 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -38,6 +38,7 @@ export const URL_TOOL_STORE = `${URL_TOOL}/store`
 export const URL_TOOL_TEMPLATE = `${URL_TOOL}/template`
 export const URL_TOOL_CATEGORY = `${URL_TOOL}/category`
 export const URL_TOOL_DETAIL = `${URL_TOOL}/detail`
+export const URL_TOOL_FAVORITE = `${URL_TOOL}/favorite`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`
diff --git a/src/global.d.ts b/src/global.d.ts
index e67e298..63d1a81 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -604,6 +604,7 @@ interface ToolVo {
     review: 'NONE' | 'PROCESSING' | 'PASS' | 'REJECT'
     createTime: string
     updateTime: string
+    favorite: boolean
 }
 
 interface ToolCreateParam {
@@ -647,3 +648,9 @@ interface ToolManagementPassParam {
 interface ToolStoreGetParam extends PageParam {
     searchValue?: string
 }
+
+interface ToolFavoriteAddRemoveParam {
+    username: string
+    toolId: string
+    platform: Platform
+}
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index 43651e9..1539c73 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -3,10 +3,15 @@ import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/store.scss'
-import { COLOR_BACKGROUND, COLOR_MAIN, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
+import {
+    COLOR_BACKGROUND,
+    COLOR_MAIN,
+    COLOR_PRODUCTION,
+    DATABASE_SELECT_SUCCESS
+} from '@/constants/common.constants'
 import { checkDesktop } from '@/util/common'
 import { navigateToSource, navigateToStore, navigateToView } from '@/util/navigation'
-import { r_tool_store_get } from '@/services/tool'
+import { r_tool_add_favorite, r_tool_remove_favorite, r_tool_store_get } from '@/services/tool'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import FitFullscreen from '@/components/common/FitFullscreen'
@@ -25,6 +30,7 @@ interface CommonCardProps
     ver: string
     platform: Platform
     supportPlatform: Platform[]
+    favorite: boolean
 }
 
 const CommonCard = ({
@@ -48,11 +54,13 @@ const CommonCard = ({
     ver,
     platform,
     supportPlatform,
+    favorite,
     ...props
 }: CommonCardProps) => {
     const navigate = useNavigate()
     const [modal, contextHolder] = AntdModal.useModal()
     const cardRef = useRef<HTMLDivElement>(null)
+    const [favorite_, setFavorite_] = useState<boolean>(favorite)
 
     useEffect(() => {
         cardRef.current && VanillaTilt.init(cardRef.current, options)
@@ -94,6 +102,37 @@ const CommonCard = ({
         navigateToSource(navigate, authorUsername, toolId, platform)
     }
 
+    const handleOnStarBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        if (favorite_) {
+            void r_tool_remove_favorite({
+                username: authorUsername,
+                toolId: toolId,
+                platform: platform
+            }).then((res) => {
+                const response = res.data
+                if (response.success) {
+                    setFavorite_(false)
+                } else {
+                    void message.error('取消收藏失败，请稍后重试')
+                }
+            })
+        } else {
+            void r_tool_add_favorite({
+                username: authorUsername,
+                toolId: toolId,
+                platform: platform
+            }).then((res) => {
+                const response = res.data
+                if (response.success) {
+                    setFavorite_(true)
+                } else {
+                    void message.error('收藏失败，请稍后重试')
+                }
+            })
+        }
+    }
+
     const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         void modal.info({
@@ -204,6 +243,13 @@ const CommonCard = ({
                         <AntdTooltip title={'源码'}>
                             <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
                         </AntdTooltip>
+                        <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
+                            <Icon
+                                component={favorite_ ? IconOxygenStarFilled : IconOxygenStar}
+                                style={{ color: favorite_ ? COLOR_PRODUCTION : undefined }}
+                                onClick={handleOnStarBtnClick}
+                            />
+                        </AntdTooltip>
                     </div>
                 </FlexBox>
             </Card>
@@ -382,6 +428,7 @@ const Store = () => {
                                         ver={firstTool!.ver}
                                         platform={firstTool!.platform}
                                         supportPlatform={tools.map((value) => value.platform)}
+                                        favorite={firstTool!.favorite}
                                     />
                                 )
                             })}
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
index 995bb79..3464627 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.tsx
@@ -3,6 +3,7 @@ import {
     URL_TOOL,
     URL_TOOL_CATEGORY,
     URL_TOOL_DETAIL,
+    URL_TOOL_FAVORITE,
     URL_TOOL_STORE,
     URL_TOOL_TEMPLATE
 } from '@/constants/urls.constants'
@@ -37,3 +38,9 @@ export const r_tool_store_get = (param: ToolStoreGetParam) =>
 
 export const r_tool_store_get_by_username = (username: string, param: ToolStoreGetParam) =>
     request.get<PageVo<ToolVo>>(`${URL_TOOL_STORE}/${username}`, param)
+
+export const r_tool_add_favorite = (param: ToolFavoriteAddRemoveParam) =>
+    request.post(`${URL_TOOL_FAVORITE}`, param)
+
+export const r_tool_remove_favorite = (param: ToolFavoriteAddRemoveParam) =>
+    request.delete(`${URL_TOOL_FAVORITE}`, param)

From 8dd10910c946ebdb9b737ef246728d325eeb2740 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 27 Apr 2024 15:28:41 +0800
Subject: [PATCH 261/307] Fix(CreateTool): Fix input validation

Fix can not submit because of input validation bug
---
 src/pages/Tools/Create.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index 5085ef9..21888e0 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -329,7 +329,7 @@ const Create = () => {
                                         label={'关键字'}
                                         tooltip={'工具搜索（每个不超过10个字符）'}
                                         name={'keywords'}
-                                        rules={[{ required: true, whitespace: true }]}
+                                        rules={[{ required: true }]}
                                     >
                                         <AntdSelect
                                             mode={'tags'}
@@ -341,7 +341,7 @@ const Create = () => {
                                         label={'类别'}
                                         tooltip={'工具分类'}
                                         name={'categories'}
-                                        rules={[{ required: true, whitespace: true }]}
+                                        rules={[{ required: true }]}
                                     >
                                         <AntdSelect
                                             mode={'multiple'}

From 0674635577a46fb01c9b1585b5b668ce2fb8be0b Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 27 Apr 2024 17:55:46 +0800
Subject: [PATCH 262/307] Feat(PersonalTool): Add pagination

Add pagination to personal tool management
---
 src/assets/css/pages/tools/index.scss | 23 +++++++++
 src/pages/Tools/index.tsx             | 69 +++++++++++++++++++++++----
 src/services/tool.tsx                 |  2 +-
 3 files changed, 85 insertions(+), 9 deletions(-)

diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.scss
index 4b59fe2..c8df8f6 100644
--- a/src/assets/css/pages/tools/index.scss
+++ b/src/assets/css/pages/tools/index.scss
@@ -56,6 +56,29 @@
           font-size: 1.6em;
         }
       }
+
+      .load-more-card {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        align-items: center;
+        cursor: pointer;
+
+        .icon {
+          display: flex;
+          font-size: constants.$SIZE_ICON_XXL;
+          color: constants.$production-color;
+          align-items: center;
+          transform: translateY(-20px);
+        }
+
+        .text {
+          position: absolute;
+          top: 60%;
+          font-size: 1.2em;
+          font-weight: bolder;
+        }
+      }
     }
 
 
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 09f9176..2733c31 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -300,11 +300,43 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
     )
 }
 
+interface LoadMoreCardProps {
+    onClick: () => void
+}
+
+const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current &&
+            VanillaTilt.init(cardRef.current, {
+                reverse: true,
+                max: 8,
+                glare: true,
+                ['max-glare']: 0.3,
+                scale: 1.03
+            })
+    }, [])
+
+    return (
+        <Card style={{ overflow: 'visible' }} ref={cardRef} onClick={onClick}>
+            <FlexBox className={'load-more-card'}>
+                <div className={'icon'}>
+                    <Icon component={IconOxygenMore} />{' '}
+                </div>
+                <div className={'text'}>加载更多</div>
+            </FlexBox>
+        </Card>
+    )
+}
+
 const Tools = () => {
     const navigate = useNavigate()
     const [modal, contextHolder] = AntdModal.useModal()
     const [loading, setLoading] = useState(false)
-    const [toolData, setToolData] = useState<ToolVo[]>()
+    const [currentPage, setCurrentPage] = useState(0)
+    const [hasNextPage, setHasNextPage] = useState(false)
+    const [toolData, setToolData] = useState<ToolVo[]>([])
     const [upgradeForm] = AntdForm.useForm<ToolUpgradeParam>()
 
     const handleOnDeleteTool = (tool: ToolVo) => {
@@ -324,7 +356,7 @@ const Tools = () => {
                                 const response = res.data
                                 if (response.code === DATABASE_DELETE_SUCCESS) {
                                     void message.success('删除成功')
-                                    getTool()
+                                    getTool(1)
                                 } else {
                                     void message.error('删除失败，请稍后重试')
                                 }
@@ -467,7 +499,7 @@ const Tools = () => {
                                 switch (response.code) {
                                     case TOOL_SUBMIT_SUCCESS:
                                         void message.success('提交审核成功')
-                                        getTool()
+                                        getTool(1)
                                         break
                                     case TOOL_UNDER_REVIEW:
                                         void message.warning('工具审核中，请勿重复提交')
@@ -519,7 +551,7 @@ const Tools = () => {
                             })
                             .finally(() => {
                                 setLoading(false)
-                                getTool()
+                                getTool(1)
                             })
                     }
                 },
@@ -527,20 +559,40 @@ const Tools = () => {
             )
     }
 
-    const getTool = () => {
+    const handleOnLoadMore = () => {
+        if (loading) {
+            return
+        }
+        getTool(currentPage + 1)
+    }
+
+    const getTool = (page: number) => {
         if (loading) {
             return
         }
         setLoading(true)
         void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
 
-        void r_tool_get()
+        void r_tool_get({ currentPage: page })
             .then((res) => {
                 const response = res.data
 
                 switch (response.code) {
                     case DATABASE_SELECT_SUCCESS:
-                        setToolData(response.data!)
+                        setCurrentPage(response.data!.current)
+                        if (
+                            response.data!.current === response.data!.pages ||
+                            response.data!.total === 0
+                        ) {
+                            setHasNextPage(false)
+                        } else {
+                            setHasNextPage(true)
+                        }
+                        if (response.data!.current === 1) {
+                            setToolData(response.data!.records)
+                        } else {
+                            setToolData([...toolData, ...response.data!.records])
+                        }
                         break
                     default:
                         void message.error('获取工具失败，请稍后重试')
@@ -556,7 +608,7 @@ const Tools = () => {
         if (!getLoginStatus()) {
             return
         }
-        getTool()
+        getTool(1)
     }, [])
 
     return (
@@ -586,6 +638,7 @@ const Tools = () => {
                                     onCancel={handleOnCancelTool}
                                 />
                             ))}
+                        {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
                     </FlexBox>
                 </HideScrollbar>
             </FitFullscreen>
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
index 3464627..b462f37 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.tsx
@@ -20,7 +20,7 @@ export const r_tool_create = (param: ToolCreateParam) => request.post<ToolVo>(UR
 
 export const r_tool_upgrade = (param: ToolUpgradeParam) => request.patch<ToolVo>(URL_TOOL, param)
 
-export const r_tool_get = () => request.get<ToolVo[]>(URL_TOOL)
+export const r_tool_get = (param: PageParam) => request.get<PageVo<ToolVo>>(URL_TOOL, param)
 
 export const r_tool_detail = (username: string, toolId: string, ver: string, platform: Platform) =>
     request.get<ToolVo>(`${URL_TOOL_DETAIL}/${username}/${toolId}/${ver}`, { platform })

From a5b26d9680455a345ecbf96aaaf1ef7a60b1bf3a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 28 Apr 2024 11:33:22 +0800
Subject: [PATCH 263/307] Refactor(URL): Change URL_TOOL_FAVORITE

---
 src/constants/urls.constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/constants/urls.constants.ts b/src/constants/urls.constants.ts
index 18cec2a..225ff25 100644
--- a/src/constants/urls.constants.ts
+++ b/src/constants/urls.constants.ts
@@ -38,7 +38,7 @@ export const URL_TOOL_STORE = `${URL_TOOL}/store`
 export const URL_TOOL_TEMPLATE = `${URL_TOOL}/template`
 export const URL_TOOL_CATEGORY = `${URL_TOOL}/category`
 export const URL_TOOL_DETAIL = `${URL_TOOL}/detail`
-export const URL_TOOL_FAVORITE = `${URL_TOOL}/favorite`
+export const URL_TOOL_FAVORITE = `${URL_TOOL_STORE}/favorite`
 
 export const URL_API_V1 = '/api/v1'
 export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`

From 497fb28b5d231f5c3cff974699cd5c70b5bc0840 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 28 Apr 2024 11:37:57 +0800
Subject: [PATCH 264/307] Refactor(Card): Component all cards

Make all cards into components
---
 .../css/components/system/setting-card.scss   |  33 ++
 .../components/system/statistics-card.scss    |  78 +++++
 .../css/components/system/system-card.scss    |  28 ++
 .../css/components/tools/load-more-card.scss  |  27 ++
 .../css/components/tools/repository-card.scss |  47 +++
 .../css/components/tools/store-card.scss      |  85 +++++
 src/assets/css/pages/system/index.scss        |  24 --
 src/assets/css/pages/system/settings.scss     |  30 --
 src/assets/css/pages/system/statistics.scss   |  75 -----
 src/assets/css/pages/tools/index.scss         |  67 ----
 src/assets/css/pages/tools/store.scss         | 103 -------
 src/assets/css/pages/tools/user.scss          | 103 -------
 src/components/system/SettingCard.tsx         |  48 +++
 src/components/system/StatisticsCard.tsx      |  35 +++
 src/components/system/SystemCard.tsx          |  62 ++++
 src/components/tools/LoadMoreCard.tsx         |  42 +++
 src/components/tools/RepositoryCard.tsx       | 107 +++++++
 src/components/tools/StoreCard.tsx            | 256 +++++++++++++++
 src/pages/System/Settings/Base.tsx            |   2 +-
 src/pages/System/Settings/Mail.tsx            |   2 +-
 src/pages/System/Settings/SensitiveWord.tsx   |   2 +-
 src/pages/System/Settings/TwoFactor.tsx       |   2 +-
 src/pages/System/Settings/index.tsx           |  45 +--
 src/pages/System/Statistics/ActiveInfo.tsx    |   6 +-
 src/pages/System/Statistics/CPUInfo.tsx       |   6 +-
 src/pages/System/Statistics/HardwareInfo.tsx  |   6 +-
 src/pages/System/Statistics/OnlineInfo.tsx    |   6 +-
 src/pages/System/Statistics/SoftwareInfo.tsx  |   6 +-
 src/pages/System/Statistics/StorageInfo.tsx   |   6 +-
 src/pages/System/Statistics/index.tsx         |  31 --
 src/pages/System/index.tsx                    |  98 ++----
 src/pages/Tools/Store.tsx                     | 291 +-----------------
 src/pages/Tools/User.tsx                      | 215 +------------
 src/pages/Tools/index.tsx                     | 140 +--------
 34 files changed, 908 insertions(+), 1206 deletions(-)
 create mode 100644 src/assets/css/components/system/setting-card.scss
 create mode 100644 src/assets/css/components/system/statistics-card.scss
 create mode 100644 src/assets/css/components/system/system-card.scss
 create mode 100644 src/assets/css/components/tools/load-more-card.scss
 create mode 100644 src/assets/css/components/tools/repository-card.scss
 create mode 100644 src/assets/css/components/tools/store-card.scss
 create mode 100644 src/components/system/SettingCard.tsx
 create mode 100644 src/components/system/StatisticsCard.tsx
 create mode 100644 src/components/system/SystemCard.tsx
 create mode 100644 src/components/tools/LoadMoreCard.tsx
 create mode 100644 src/components/tools/RepositoryCard.tsx
 create mode 100644 src/components/tools/StoreCard.tsx

diff --git a/src/assets/css/components/system/setting-card.scss b/src/assets/css/components/system/setting-card.scss
new file mode 100644
index 0000000..4703dc8
--- /dev/null
+++ b/src/assets/css/components/system/setting-card.scss
@@ -0,0 +1,33 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-setting-card] {
+  .settings-card {
+    padding: 20px;
+    gap: 20px;
+    color: constants.$main-color;
+
+    > .head {
+      align-items: center;
+      gap: 5px;
+
+      .icon {
+        font-size: constants.$SIZE_ICON_MD;
+        flex: 0 0 auto;
+      }
+
+      .title {
+        display: flex;
+        font-size: 1.2em;
+      }
+
+      :nth-child(n+3) {
+        flex: 0 0 auto;
+        color: constants.$font-main-color;
+      }
+
+      .bt-save {
+        color: constants.$main-color;
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/system/statistics-card.scss b/src/assets/css/components/system/statistics-card.scss
new file mode 100644
index 0000000..600a45f
--- /dev/null
+++ b/src/assets/css/components/system/statistics-card.scss
@@ -0,0 +1,78 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-statistics-card] {
+  .statistics-card {
+    padding: 20px;
+    gap: 20px;
+
+    > .head {
+      align-items: center;
+      gap: 5px;
+      color: constants.$main-color;
+
+      .icon {
+        font-size: constants.$SIZE_ICON_MD;
+        flex: 0 0 auto;
+      }
+
+      .title {
+        display: flex;
+        font-size: 1.2em;
+      }
+
+      :nth-child(n+3) {
+        flex: 0 0 auto;
+        color: constants.$font-main-color;
+      }
+    }
+
+    .card-content {
+      font-size: 1.1em;
+      padding: 0 10px;
+      gap: 10px;
+
+      .key, .value-percent {
+        flex: 0 0 auto;
+        color: constants.$font-main-color;
+      }
+
+      .value {
+        color: constants.$font-secondary-color;
+        overflow: hidden;
+
+        > * {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .value-chart {
+        justify-content: space-around;
+        width: 0;
+
+        > div {
+          max-height: 12px;
+          height: 12px;
+
+          > * {
+            transform: translateY(1px);
+          }
+        }
+      }
+
+      .value-percent {
+        text-align: right;
+      }
+
+      .big-chart {
+        width: 0;
+        height: 400px;
+      }
+
+      > * {
+        gap: 5px;
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/system/system-card.scss b/src/assets/css/components/system/system-card.scss
new file mode 100644
index 0000000..9c12029
--- /dev/null
+++ b/src/assets/css/components/system/system-card.scss
@@ -0,0 +1,28 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-system-card] {
+  cursor: pointer;
+
+  .system-card {
+    width: 100%;
+    height: 100%;
+    margin-top: 100px;
+    text-align: center;
+    gap: 42px;
+
+    > * {
+      flex: 0 0 auto;
+      display: block;
+    }
+
+    .icon {
+      color: constants.$production-color;
+      font-size: constants.$SIZE_ICON_XL;
+    }
+
+    .text {
+      font-weight: bolder;
+      font-size: 2em;
+    }
+  }
+}
diff --git a/src/assets/css/components/tools/load-more-card.scss b/src/assets/css/components/tools/load-more-card.scss
new file mode 100644
index 0000000..aa3d7ab
--- /dev/null
+++ b/src/assets/css/components/tools/load-more-card.scss
@@ -0,0 +1,27 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-load-more-card] {
+  cursor: pointer;
+
+  .load-more-card {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    align-items: center;
+
+    .icon {
+      display: flex;
+      font-size: constants.$SIZE_ICON_XXL;
+      color: constants.$production-color;
+      align-items: center;
+      transform: translateY(-20px);
+    }
+
+    .text {
+      position: absolute;
+      top: 60%;
+      font-size: 1.2em;
+      font-weight: bolder;
+    }
+  }
+}
diff --git a/src/assets/css/components/tools/repository-card.scss b/src/assets/css/components/tools/repository-card.scss
new file mode 100644
index 0000000..06d360e
--- /dev/null
+++ b/src/assets/css/components/tools/repository-card.scss
@@ -0,0 +1,47 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-repository-card] {
+  .repository-card {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    align-items: center;
+
+    > * {
+      display: block;
+      flex: 0 0 auto;
+    }
+
+    .version-select {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      width: 9em;
+    }
+
+    .upgrade-bt {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      font-size: 1.8em;
+    }
+
+    .icon {
+      display: flex;
+      padding-top: 50px;
+      padding-bottom: 20px;
+      color: constants.$production-color;
+      font-size: constants.$SIZE_ICON_XL;
+      justify-content: center;
+
+      img {
+        width: constants.$SIZE_ICON_XL;
+      }
+    }
+
+    .tool-name {
+      font-weight: bolder;
+      font-size: 1.6em;
+    }
+  }
+}
diff --git a/src/assets/css/components/tools/store-card.scss b/src/assets/css/components/tools/store-card.scss
new file mode 100644
index 0000000..15d0570
--- /dev/null
+++ b/src/assets/css/components/tools/store-card.scss
@@ -0,0 +1,85 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=component-store-card] {
+  cursor: pointer;
+
+  .store-card {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    align-items: center;
+
+    > * {
+      display: block;
+      flex: 0 0 auto;
+    }
+
+
+    .icon {
+      display: flex;
+      padding-top: 40px;
+      padding-bottom: 20px;
+      color: constants.$production-color;
+      font-size: constants.$SIZE_ICON_XL;
+      justify-content: center;
+
+      img {
+        width: constants.$SIZE_ICON_XL;
+      }
+    }
+
+    .version {
+      position: absolute;
+      left: 10px;
+      top: 10px;
+    }
+
+    .info {
+      padding-top: 20px;
+
+      .tool-name {
+        font-weight: bolder;
+        font-size: 1.6em;
+      }
+
+      .tool-desc {
+        margin-top: 10px;
+        color: constants.$font-secondary-color;
+      }
+    }
+
+    .author {
+      display: flex;
+      margin-top: auto;
+      flex-direction: row;
+      justify-content: end;
+      padding-bottom: 10px;
+      gap: 10px;
+
+      .avatar {
+        > * {
+          width: 24px;
+          height: 24px;
+        }
+      }
+
+      .author-name {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .operation {
+      display: flex;
+      position: absolute;
+      top: 10px;
+      right: 12px;
+      font-size: 1.6em;
+      gap: 4px;
+
+      > *:hover {
+        color: constants.$font-secondary-color;
+      }
+    }
+  }
+}
diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss
index f41fad8..6f3f7b6 100644
--- a/src/assets/css/pages/system/index.scss
+++ b/src/assets/css/pages/system/index.scss
@@ -12,30 +12,6 @@
       height: 360px;
       flex: 0 0 auto;
       overflow: hidden !important;
-      cursor: pointer;
-
-      .common-card {
-        width: 100%;
-        height: 100%;
-        margin-top: 100px;
-        text-align: center;
-        gap: 42px;
-
-        > * {
-          flex: 0 0 auto;
-          display: block;
-        }
-
-        .icon {
-          color: constants.$production-color;
-          font-size: constants.$SIZE_ICON_XL;
-        }
-
-        .text {
-          font-weight: bolder;
-          font-size: 2em;
-        }
-      }
     }
   }
 }
diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.scss
index 839e7dd..7db4529 100644
--- a/src/assets/css/pages/system/settings.scss
+++ b/src/assets/css/pages/system/settings.scss
@@ -11,36 +11,6 @@
       > * {
         flex: 0 0 auto;
       }
-
-      .settings-card {
-        padding: 20px;
-        gap: 20px;
-        color: constants.$main-color;
-
-        > .head {
-          align-items: center;
-          gap: 5px;
-
-          .icon {
-            font-size: constants.$SIZE_ICON_MD;
-            flex: 0 0 auto;
-          }
-
-          .title {
-            display: flex;
-            font-size: 1.2em;
-          }
-
-          :nth-child(n+3) {
-            flex: 0 0 auto;
-            color: constants.$font-main-color;
-          }
-
-          .bt-save {
-            color: constants.$main-color;
-          }
-        }
-      }
     }
   }
 }
diff --git a/src/assets/css/pages/system/statistics.scss b/src/assets/css/pages/system/statistics.scss
index 8c7230c..40e15a5 100644
--- a/src/assets/css/pages/system/statistics.scss
+++ b/src/assets/css/pages/system/statistics.scss
@@ -10,81 +10,6 @@
     > .card-box {
       width: 48%;
       flex: 0 0 auto;
-
-      .common-card {
-        padding: 20px;
-        gap: 20px;
-
-        > .head {
-          align-items: center;
-          gap: 5px;
-          color: constants.$main-color;
-
-          .icon {
-            font-size: constants.$SIZE_ICON_MD;
-            flex: 0 0 auto;
-          }
-
-          .title {
-            display: flex;
-            font-size: 1.2em;
-          }
-
-          :nth-child(n+3) {
-            flex: 0 0 auto;
-            color: constants.$font-main-color;
-          }
-        }
-
-        .card-content {
-          font-size: 1.1em;
-          padding: 0 10px;
-          gap: 10px;
-
-          .key, .value-percent {
-            flex: 0 0 auto;
-            color: constants.$font-main-color;
-          }
-
-          .value {
-            color: constants.$font-secondary-color;
-            overflow: hidden;
-
-            > * {
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
-          }
-
-          .value-chart {
-            justify-content: space-around;
-            width: 0;
-
-            > div {
-              max-height: 12px;
-              height: 12px;
-
-              > * {
-                transform: translateY(1px);
-              }
-            }
-          }
-
-          .value-percent {
-            text-align: right;
-          }
-
-          .big-chart {
-            width: 0;
-            height: 400px;
-          }
-
-          > * {
-            gap: 5px;
-          }
-        }
-      }
     }
   }
 }
diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.scss
index c8df8f6..48a169f 100644
--- a/src/assets/css/pages/tools/index.scss
+++ b/src/assets/css/pages/tools/index.scss
@@ -12,73 +12,6 @@
       width: 180px;
       height: 290px;
       flex: 0 0 auto;
-
-      .common-card {
-        width: 100%;
-        height: 100%;
-        text-align: center;
-        align-items: center;
-
-        > * {
-          display: block;
-          flex: 0 0 auto;
-        }
-
-        .version-select {
-          position: absolute;
-          top: 10px;
-          left: 10px;
-          width: 9em;
-        }
-
-        .upgrade-bt {
-          position: absolute;
-          top: 10px;
-          right: 10px;
-          font-size: 1.8em;
-        }
-
-        .icon {
-          display: flex;
-          padding-top: 50px;
-          padding-bottom: 20px;
-          color: constants.$production-color;
-          font-size: constants.$SIZE_ICON_XL;
-          justify-content: center;
-
-          img {
-            width: constants.$SIZE_ICON_XL;
-          }
-        }
-
-        .tool-name {
-          font-weight: bolder;
-          font-size: 1.6em;
-        }
-      }
-
-      .load-more-card {
-        width: 100%;
-        height: 100%;
-        text-align: center;
-        align-items: center;
-        cursor: pointer;
-
-        .icon {
-          display: flex;
-          font-size: constants.$SIZE_ICON_XXL;
-          color: constants.$production-color;
-          align-items: center;
-          transform: translateY(-20px);
-        }
-
-        .text {
-          position: absolute;
-          top: 60%;
-          font-size: 1.2em;
-          font-weight: bolder;
-        }
-      }
     }
 
 
diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.scss
index 3bffda7..b87a3f5 100644
--- a/src/assets/css/pages/tools/store.scss
+++ b/src/assets/css/pages/tools/store.scss
@@ -30,109 +30,6 @@
       width: 180px;
       height: 290px;
       flex: 0 0 auto;
-      cursor: pointer;
-
-      .common-card {
-        width: 100%;
-        height: 100%;
-        text-align: center;
-        align-items: center;
-
-        > * {
-          display: block;
-          flex: 0 0 auto;
-        }
-
-
-        .icon {
-          display: flex;
-          padding-top: 40px;
-          padding-bottom: 20px;
-          color: constants.$production-color;
-          font-size: constants.$SIZE_ICON_XL;
-          justify-content: center;
-
-          img {
-            width: constants.$SIZE_ICON_XL;
-          }
-        }
-
-        .version {
-          position: absolute;
-          left: 10px;
-          top: 10px;
-        }
-
-        .info {
-          padding-top: 20px;
-
-          .tool-name {
-            font-weight: bolder;
-            font-size: 1.6em;
-          }
-
-          .tool-desc {
-            margin-top: 10px;
-            color: constants.$font-secondary-color;
-          }
-        }
-
-        .author {
-          display: flex;
-          margin-top: auto;
-          flex-direction: row;
-          justify-content: end;
-          padding-bottom: 10px;
-          gap: 10px;
-
-          .avatar {
-            > * {
-              width: 24px;
-              height: 24px;
-            }
-          }
-
-          .author-name {
-            display: flex;
-            align-items: center;
-          }
-        }
-
-        .operation {
-          display: flex;
-          position: absolute;
-          top: 10px;
-          right: 12px;
-          font-size: 1.6em;
-          gap: 4px;
-
-          > *:hover {
-            color: constants.$font-secondary-color;
-          }
-        }
-      }
-
-      .load-more-card {
-        width: 100%;
-        height: 100%;
-        text-align: center;
-        align-items: center;
-
-        .icon {
-          display: flex;
-          font-size: constants.$SIZE_ICON_XXL;
-          color: constants.$production-color;
-          align-items: center;
-          transform: translateY(-20px);
-        }
-
-        .text {
-          position: absolute;
-          top: 60%;
-          font-size: 1.2em;
-          font-weight: bolder;
-        }
-      }
     }
 
     .no-tool {
diff --git a/src/assets/css/pages/tools/user.scss b/src/assets/css/pages/tools/user.scss
index 05f0cc5..97eb6c0 100644
--- a/src/assets/css/pages/tools/user.scss
+++ b/src/assets/css/pages/tools/user.scss
@@ -72,109 +72,6 @@
         width: 180px;
         height: 290px;
         flex: 0 0 auto;
-        cursor: pointer;
-
-        .common-card {
-          width: 100%;
-          height: 100%;
-          text-align: center;
-          align-items: center;
-
-          > * {
-            display: block;
-            flex: 0 0 auto;
-          }
-
-
-          .icon {
-            display: flex;
-            padding-top: 40px;
-            padding-bottom: 20px;
-            color: constants.$production-color;
-            font-size: constants.$SIZE_ICON_XL;
-            justify-content: center;
-
-            img {
-              width: constants.$SIZE_ICON_XL;
-            }
-          }
-
-          .version {
-            position: absolute;
-            left: 10px;
-            top: 10px;
-          }
-
-          .info {
-            padding-top: 20px;
-
-            .tool-name {
-              font-weight: bolder;
-              font-size: 1.6em;
-            }
-
-            .tool-desc {
-              margin-top: 10px;
-              color: constants.$font-secondary-color;
-            }
-          }
-
-          .author {
-            display: flex;
-            margin-top: auto;
-            flex-direction: row;
-            justify-content: end;
-            padding-bottom: 10px;
-            gap: 10px;
-
-            .avatar {
-              > * {
-                width: 24px;
-                height: 24px;
-              }
-            }
-
-            .author-name {
-              display: flex;
-              align-items: center;
-            }
-          }
-
-          .operation {
-            display: flex;
-            position: absolute;
-            top: 10px;
-            right: 12px;
-            font-size: 1.6em;
-            gap: 4px;
-
-            > *:hover {
-              color: constants.$font-secondary-color;
-            }
-          }
-        }
-
-        .load-more-card {
-          width: 100%;
-          height: 100%;
-          text-align: center;
-          align-items: center;
-
-          .icon {
-            display: flex;
-            font-size: constants.$SIZE_ICON_XXL;
-            color: constants.$production-color;
-            align-items: center;
-            transform: translateY(-20px);
-          }
-
-          .text {
-            position: absolute;
-            top: 60%;
-            font-size: 1.2em;
-            font-weight: bolder;
-          }
-        }
       }
 
       .no-tool {
diff --git a/src/components/system/SettingCard.tsx b/src/components/system/SettingCard.tsx
new file mode 100644
index 0000000..874efd1
--- /dev/null
+++ b/src/components/system/SettingCard.tsx
@@ -0,0 +1,48 @@
+import { PropsWithChildren, ReactNode } from 'react'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/system/setting-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import Permission from '@/components/common/Permission'
+import LoadingMask from '@/components/common/LoadingMask'
+
+interface SettingsCardProps extends PropsWithChildren {
+    icon: IconComponent
+    title: string
+    loading?: boolean
+    modifyOperationCode?: string[]
+    expand?: ReactNode
+    onReset?: () => void
+    onSave?: () => void
+}
+export const SettingsCard = (props: SettingsCardProps) => {
+    return (
+        <Card data-component={'component-setting-card'}>
+            <FlexBox className={'settings-card'}>
+                <FlexBox direction={'horizontal'} className={'head'}>
+                    <Icon component={props.icon} className={'icon'} />
+                    <div className={'title'}>{props.title}</div>
+                    {!props.loading && (
+                        <Permission operationCode={props.modifyOperationCode}>
+                            {props.expand}
+                            <AntdButton onClick={props.onReset} title={'重置'}>
+                                <Icon component={IconOxygenBack} />
+                            </AntdButton>
+                            <AntdButton className={'bt-save'} onClick={props.onSave} title={'保存'}>
+                                <Icon component={IconOxygenSave} />
+                            </AntdButton>
+                        </Permission>
+                    )}
+                </FlexBox>
+                <LoadingMask
+                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
+                    hidden={!props.loading}
+                >
+                    {props.children}
+                </LoadingMask>
+            </FlexBox>
+        </Card>
+    )
+}
+
+export default SettingsCard
diff --git a/src/components/system/StatisticsCard.tsx b/src/components/system/StatisticsCard.tsx
new file mode 100644
index 0000000..567d6e2
--- /dev/null
+++ b/src/components/system/StatisticsCard.tsx
@@ -0,0 +1,35 @@
+import { PropsWithChildren, ReactNode } from 'react'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/system/statistics-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import LoadingMask from '@/components/common/LoadingMask'
+
+interface StatisticsCardProps extends PropsWithChildren {
+    icon: IconComponent
+    title: ReactNode
+    loading?: boolean
+    expand?: ReactNode
+}
+
+export const StatisticsCard = (props: StatisticsCardProps) => {
+    return (
+        <Card data-component={'component-statistics-card'} style={{ overflow: 'visible' }}>
+            <FlexBox className={'statistics-card'}>
+                <FlexBox direction={'horizontal'} className={'head'}>
+                    <Icon component={props.icon} className={'icon'} />
+                    <div className={'title'}>{props.title}</div>
+                    {props.expand}
+                </FlexBox>
+                <LoadingMask
+                    hidden={!props.loading}
+                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
+                >
+                    {props.children}
+                </LoadingMask>
+            </FlexBox>
+        </Card>
+    )
+}
+
+export default StatisticsCard
diff --git a/src/components/system/SystemCard.tsx b/src/components/system/SystemCard.tsx
new file mode 100644
index 0000000..1afce03
--- /dev/null
+++ b/src/components/system/SystemCard.tsx
@@ -0,0 +1,62 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
+import Icon from '@ant-design/icons'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/components/system/system-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+
+interface SystemCardProps
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: IconComponent
+    description?: ReactNode
+    options?: TiltOptions
+    url?: string
+}
+
+const SystemCard = forwardRef<HTMLDivElement, SystemCardProps>(
+    ({
+        style,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ref,
+        icon,
+        description,
+        options = {
+            reverse: true,
+            max: 8,
+            glare: true,
+            scale: 1.03
+        },
+        url,
+        children,
+        ...props
+    }) => {
+        const navigate = useNavigate()
+        const cardRef = useRef<HTMLDivElement>(null)
+
+        useEffect(() => {
+            cardRef.current && VanillaTilt.init(cardRef.current, options)
+        }, [options])
+
+        const handleCardOnClick = () => {
+            url && navigate(url)
+        }
+
+        return (
+            <Card
+                data-component={'component-system-card'}
+                style={{ overflow: 'visible', ...style }}
+                ref={cardRef}
+                {...props}
+                onClick={handleCardOnClick}
+            >
+                <FlexBox className={'system-card'}>
+                    <Icon component={icon} className={'icon'} />
+                    <div className={'text'}>{children}</div>
+                    <div className={'description'}>{description}</div>
+                </FlexBox>
+            </Card>
+        )
+    }
+)
+
+export default SystemCard
diff --git a/src/components/tools/LoadMoreCard.tsx b/src/components/tools/LoadMoreCard.tsx
new file mode 100644
index 0000000..a7c0736
--- /dev/null
+++ b/src/components/tools/LoadMoreCard.tsx
@@ -0,0 +1,42 @@
+import VanillaTilt from 'vanilla-tilt'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/tools/load-more-card.scss'
+import FlexBox from '@/components/common/FlexBox'
+import Card from '@/components/common/Card'
+
+interface LoadMoreCardProps {
+    onClick: () => void
+}
+
+const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current &&
+            VanillaTilt.init(cardRef.current, {
+                reverse: true,
+                max: 8,
+                glare: true,
+                ['max-glare']: 0.3,
+                scale: 1.03
+            })
+    }, [])
+
+    return (
+        <Card
+            data-component={'component-load-more-card'}
+            style={{ overflow: 'visible' }}
+            ref={cardRef}
+            onClick={onClick}
+        >
+            <FlexBox className={'load-more-card'}>
+                <div className={'icon'}>
+                    <Icon component={IconOxygenMore} />{' '}
+                </div>
+                <div className={'text'}>加载更多</div>
+            </FlexBox>
+        </Card>
+    )
+}
+
+export default LoadMoreCard
diff --git a/src/components/tools/RepositoryCard.tsx b/src/components/tools/RepositoryCard.tsx
new file mode 100644
index 0000000..c00a9d7
--- /dev/null
+++ b/src/components/tools/RepositoryCard.tsx
@@ -0,0 +1,107 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/components/tools/repository-card.scss'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+
+interface RepositoryCardProps
+    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: ReactNode
+    toolName?: string
+    toolId?: string
+    options?: TiltOptions
+    url?: string
+    onOpen?: () => void
+    onEdit?: () => void
+    onSource?: () => void
+    onPublish?: () => void
+    onCancelReview?: () => void
+    onDelete?: () => void
+}
+
+const RepositoryCard = ({
+    style,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref,
+    icon,
+    toolName,
+    toolId,
+    options = {
+        reverse: true,
+        max: 8,
+        glare: true,
+        ['max-glare']: 0.3,
+        scale: 1.03
+    },
+    url,
+    onOpen,
+    onEdit,
+    onSource,
+    onPublish,
+    onCancelReview,
+    onDelete,
+    children,
+    ...props
+}: RepositoryCardProps) => {
+    const navigate = useNavigate()
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current && VanillaTilt.init(cardRef.current, options)
+    }, [options])
+
+    const handleCardOnClick = () => {
+        url && navigate(url)
+    }
+
+    return (
+        <Card
+            data-component={'component-repository-card'}
+            style={{ overflow: 'visible', ...style }}
+            ref={cardRef}
+            {...props}
+            onClick={handleCardOnClick}
+        >
+            <FlexBox className={'repository-card'}>
+                <div className={'icon'}>{icon}</div>
+                <div className={'info'}>
+                    {toolName && <div className={'tool-name'}>{toolName}</div>}
+                    {toolId && <div className={'tool-id'}>{`ID: ${toolId}`}</div>}
+                </div>
+                <div className={'operation'}>
+                    {onOpen && (
+                        <AntdButton onClick={onOpen} size={'small'} type={'primary'}>
+                            打开
+                        </AntdButton>
+                    )}
+                    {onEdit && onPublish && (
+                        <div className={'edit'}>
+                            <AntdButton.Group size={'small'}>
+                                <AntdButton onClick={onEdit}>编辑</AntdButton>
+                                <AntdButton onClick={onPublish}>发布</AntdButton>
+                            </AntdButton.Group>
+                        </div>
+                    )}
+                    {onSource && (
+                        <AntdButton size={'small'} onClick={onSource}>
+                            源码
+                        </AntdButton>
+                    )}
+                    {onCancelReview && (
+                        <AntdButton size={'small'} onClick={onCancelReview}>
+                            取消审核
+                        </AntdButton>
+                    )}
+                    {onDelete && (
+                        <AntdButton size={'small'} danger onClick={onDelete}>
+                            删除
+                        </AntdButton>
+                    )}
+                </div>
+                {children}
+            </FlexBox>
+        </Card>
+    )
+}
+
+export default RepositoryCard
diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
new file mode 100644
index 0000000..b305ee3
--- /dev/null
+++ b/src/components/tools/StoreCard.tsx
@@ -0,0 +1,256 @@
+import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } from 'react'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import protocolCheck from 'custom-protocol-check'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/tools/store-card.scss'
+import { COLOR_BACKGROUND, COLOR_MAIN, COLOR_PRODUCTION } from '@/constants/common.constants'
+import { checkDesktop } from '@/util/common'
+import { navigateToSource, navigateToStore, navigateToView } from '@/util/navigation'
+import { r_tool_add_favorite, r_tool_remove_favorite } from '@/services/tool'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+
+interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: ReactNode
+    toolName: string
+    toolId: string
+    toolDesc: string
+    options?: TiltOptions
+    authorName?: string
+    authorAvatar?: string
+    authorUsername: string
+    ver: string
+    platform: Platform
+    supportPlatform: Platform[]
+    favorite: boolean
+}
+
+const StoreCard = ({
+    style,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref,
+    icon,
+    toolName,
+    toolId,
+    toolDesc,
+    options = {
+        reverse: true,
+        max: 8,
+        glare: true,
+        ['max-glare']: 0.3,
+        scale: 1.03
+    },
+    authorName,
+    authorAvatar,
+    authorUsername,
+    ver,
+    platform,
+    supportPlatform,
+    favorite,
+    ...props
+}: StoreCardProps) => {
+    const navigate = useNavigate()
+    const [modal, contextHolder] = AntdModal.useModal()
+    const cardRef = useRef<HTMLDivElement>(null)
+    const [favorite_, setFavorite_] = useState<boolean>(favorite)
+
+    useEffect(() => {
+        cardRef.current && VanillaTilt.init(cardRef.current, options)
+    }, [options])
+
+    const handleCardOnClick = () => {
+        if (!checkDesktop() && platform === 'DESKTOP') {
+            void message.warning('此应用需要桌面端环境，请在桌面端打开')
+            return
+        }
+        if (platform === 'ANDROID') {
+            void modal.info({
+                icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+                title: 'Android 端',
+                centered: true,
+                maskClosable: true,
+                content: (
+                    <FlexBox className={'android-qrcode'}>
+                        <AntdQRCode
+                            value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                            size={300}
+                        />
+                        <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                    </FlexBox>
+                )
+            })
+            return
+        }
+        navigateToView(navigate, authorUsername, toolId, platform)
+    }
+
+    const handleOnClickAuthor = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigateToStore(navigate, authorUsername)
+    }
+
+    const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigateToSource(navigate, authorUsername, toolId, platform)
+    }
+
+    const handleOnStarBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        if (favorite_) {
+            void r_tool_remove_favorite({
+                username: authorUsername,
+                toolId: toolId,
+                platform: platform
+            }).then((res) => {
+                const response = res.data
+                if (response.success) {
+                    setFavorite_(false)
+                } else {
+                    void message.error('取消收藏失败，请稍后重试')
+                }
+            })
+        } else {
+            void r_tool_add_favorite({
+                username: authorUsername,
+                toolId: toolId,
+                platform: platform
+            }).then((res) => {
+                const response = res.data
+                if (response.success) {
+                    setFavorite_(true)
+                } else {
+                    void message.error('收藏失败，请稍后重试')
+                }
+            })
+        }
+    }
+
+    const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        void modal.info({
+            icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
+            title: 'Android 端',
+            centered: true,
+            maskClosable: true,
+            content: (
+                <FlexBox className={'android-qrcode'}>
+                    <AntdQRCode
+                        value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                        size={300}
+                    />
+                    <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
+                </FlexBox>
+            )
+        })
+    }
+
+    const handleOnDesktopBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        if (!checkDesktop()) {
+            void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
+            protocolCheck(
+                `oxygen://openurl/view/${authorUsername}/${toolId}`,
+                () => {
+                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+                    void message.destroy('LOADING')
+                },
+                () => {
+                    void message.destroy('LOADING')
+                },
+                2000,
+                () => {
+                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
+                    void message.destroy('LOADING')
+                }
+            )
+            return
+        }
+        navigateToView(navigate, authorUsername, toolId, platform)
+    }
+
+    const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation()
+        navigateToView(navigate, authorUsername, toolId, platform)
+    }
+
+    return (
+        <>
+            <Card
+                data-component={'component-store-card'}
+                style={{ overflow: 'visible', ...style }}
+                ref={cardRef}
+                {...props}
+                onClick={handleCardOnClick}
+            >
+                <FlexBox className={'store-card'}>
+                    <div className={'icon'}>{icon}</div>
+                    <div className={'version'}>
+                        <AntdTag>
+                            {platform.slice(0, 1)}-{ver}
+                        </AntdTag>
+                    </div>
+                    <div className={'info'}>
+                        <div className={'tool-name'}>{toolName}</div>
+                        <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                        {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
+                    </div>
+                    {authorAvatar && authorName && (
+                        <div className={'author'} onClick={handleOnClickAuthor}>
+                            <div className={'avatar'}>
+                                <AntdAvatar
+                                    src={
+                                        <AntdImage
+                                            preview={false}
+                                            src={`data:image/png;base64,${authorAvatar}`}
+                                            alt={'Avatar'}
+                                        />
+                                    }
+                                    style={{ background: COLOR_BACKGROUND }}
+                                />
+                            </div>
+                            <AntdTooltip title={authorUsername}>
+                                <div className={'author-name'}>{authorName}</div>
+                            </AntdTooltip>
+                        </div>
+                    )}
+                    <div className={'operation'}>
+                        {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
+                            <AntdTooltip title={'Android 端'}>
+                                <Icon
+                                    component={IconOxygenMobile}
+                                    onClick={handleOnAndroidBtnClick}
+                                />
+                            </AntdTooltip>
+                        )}
+                        {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
+                            <AntdTooltip title={'Web 端'}>
+                                <Icon component={IconOxygenBrowser} onClick={handleOnWebBtnClick} />
+                            </AntdTooltip>
+                        )}
+                        {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
+                            <AntdTooltip title={'桌面端'}>
+                                <Icon
+                                    component={IconOxygenDesktop}
+                                    onClick={handleOnDesktopBtnClick}
+                                />
+                            </AntdTooltip>
+                        )}
+                        <AntdTooltip title={'源码'}>
+                            <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
+                        </AntdTooltip>
+                        <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
+                            <Icon
+                                component={favorite_ ? IconOxygenStarFilled : IconOxygenStar}
+                                style={{ color: favorite_ ? COLOR_PRODUCTION : undefined }}
+                                onClick={handleOnStarBtnClick}
+                            />
+                        </AntdTooltip>
+                    </div>
+                </FlexBox>
+            </Card>
+            {contextHolder}
+        </>
+    )
+}
+
+export default StoreCard
diff --git a/src/pages/System/Settings/Base.tsx b/src/pages/System/Settings/Base.tsx
index d0dd2ee..2f11c1e 100644
--- a/src/pages/System/Settings/Base.tsx
+++ b/src/pages/System/Settings/Base.tsx
@@ -1,6 +1,6 @@
 import { hasPermission } from '@/util/auth'
 import { r_sys_settings_base_get, r_sys_settings_base_update } from '@/services/system'
-import { SettingsCard } from '@/pages/System/Settings'
+import SettingsCard from '@/components/system/SettingCard'
 
 const Base = () => {
     const [baseForm] = AntdForm.useForm<BaseSettingsParam>()
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index 22d0222..205474b 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -5,7 +5,7 @@ import {
     r_sys_settings_mail_send,
     r_sys_settings_mail_update
 } from '@/services/system'
-import { SettingsCard } from '@/pages/System/Settings'
+import SettingsCard from '@/components/system/SettingCard'
 
 const Mail = () => {
     const [modal, contextHolder] = AntdModal.useModal()
diff --git a/src/pages/System/Settings/SensitiveWord.tsx b/src/pages/System/Settings/SensitiveWord.tsx
index 7b738a3..db80be5 100644
--- a/src/pages/System/Settings/SensitiveWord.tsx
+++ b/src/pages/System/Settings/SensitiveWord.tsx
@@ -7,7 +7,7 @@ import {
     r_sys_settings_sensitive_get,
     r_sys_settings_sensitive_update
 } from '@/services/system'
-import { SettingsCard } from '@/pages/System/Settings'
+import SettingsCard from '@/components/system/SettingCard'
 
 const SensitiveWord = () => {
     const [dataSource, setDataSource] = useState<SensitiveWordVo[]>()
diff --git a/src/pages/System/Settings/TwoFactor.tsx b/src/pages/System/Settings/TwoFactor.tsx
index 7d93d61..08f80fd 100644
--- a/src/pages/System/Settings/TwoFactor.tsx
+++ b/src/pages/System/Settings/TwoFactor.tsx
@@ -1,6 +1,6 @@
 import { hasPermission } from '@/util/auth'
 import { r_sys_settings_two_factor_get, r_sys_settings_two_factor_update } from '@/services/system'
-import { SettingsCard } from '@/pages/System/Settings'
+import SettingsCard from '@/components/system/SettingCard'
 
 const TwoFactor = () => {
     const [twoFactorForm] = AntdForm.useForm<TwoFactorSettingsParam>()
diff --git a/src/pages/System/Settings/index.tsx b/src/pages/System/Settings/index.tsx
index 94cba62..c23cf3b 100644
--- a/src/pages/System/Settings/index.tsx
+++ b/src/pages/System/Settings/index.tsx
@@ -1,55 +1,12 @@
-import { PropsWithChildren, ReactNode } from 'react'
-import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/settings.scss'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
-import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
-import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
 import Base from '@/pages/System/Settings/Base'
 import Mail from '@/pages/System/Settings/Mail'
 import SensitiveWord from '@/pages/System/Settings/SensitiveWord'
-import TwoFactor from '@/pages/System/Settings/TwoFactor.tsx'
-
-interface SettingsCardProps extends PropsWithChildren {
-    icon: IconComponent
-    title: string
-    loading?: boolean
-    modifyOperationCode?: string[]
-    expand?: ReactNode
-    onReset?: () => void
-    onSave?: () => void
-}
-export const SettingsCard = (props: SettingsCardProps) => {
-    return (
-        <Card>
-            <FlexBox className={'settings-card'}>
-                <FlexBox direction={'horizontal'} className={'head'}>
-                    <Icon component={props.icon} className={'icon'} />
-                    <div className={'title'}>{props.title}</div>
-                    {!props.loading && (
-                        <Permission operationCode={props.modifyOperationCode}>
-                            {props.expand}
-                            <AntdButton onClick={props.onReset} title={'重置'}>
-                                <Icon component={IconOxygenBack} />
-                            </AntdButton>
-                            <AntdButton className={'bt-save'} onClick={props.onSave} title={'保存'}>
-                                <Icon component={IconOxygenSave} />
-                            </AntdButton>
-                        </Permission>
-                    )}
-                </FlexBox>
-                <LoadingMask
-                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
-                    hidden={!props.loading}
-                >
-                    {props.children}
-                </LoadingMask>
-            </FlexBox>
-        </Card>
-    )
-}
+import TwoFactor from '@/pages/System/Settings/TwoFactor'
 
 const Settings = () => {
     return (
diff --git a/src/pages/System/Statistics/ActiveInfo.tsx b/src/pages/System/Statistics/ActiveInfo.tsx
index 0e93ff6..65f800a 100644
--- a/src/pages/System/Statistics/ActiveInfo.tsx
+++ b/src/pages/System/Statistics/ActiveInfo.tsx
@@ -4,7 +4,7 @@ import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_active } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
 import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const ActiveInfo = () => {
     const activeInfoDivRef = useRef<HTMLDivElement>(null)
@@ -147,7 +147,7 @@ const ActiveInfo = () => {
     }
 
     return (
-        <CommonCard
+        <StatisticsCard
             icon={IconOxygenAnalysis}
             title={
                 <>
@@ -183,7 +183,7 @@ const ActiveInfo = () => {
             <FlexBox className={'card-content'} direction={'horizontal'}>
                 <div className={'big-chart'} ref={activeInfoDivRef} />
             </FlexBox>
-        </CommonCard>
+        </StatisticsCard>
     )
 }
 
diff --git a/src/pages/System/Statistics/CPUInfo.tsx b/src/pages/System/Statistics/CPUInfo.tsx
index 1d53964..0303f09 100644
--- a/src/pages/System/Statistics/CPUInfo.tsx
+++ b/src/pages/System/Statistics/CPUInfo.tsx
@@ -7,7 +7,7 @@ import {
     barEChartsBaseOption,
     EChartsOption
 } from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const CPUInfo = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
@@ -142,7 +142,7 @@ const CPUInfo = () => {
 
     return (
         <>
-            <CommonCard
+            <StatisticsCard
                 icon={IconOxygenCpu}
                 title={'CPU 信息'}
                 loading={isLoading}
@@ -172,7 +172,7 @@ const CPUInfo = () => {
                     <FlexBox className={'value-chart'} ref={cpuInfoDivRef} />
                     <FlexBox className={'value-percent'} ref={percentDivRef} />
                 </FlexBox>
-            </CommonCard>
+            </StatisticsCard>
         </>
     )
 }
diff --git a/src/pages/System/Statistics/HardwareInfo.tsx b/src/pages/System/Statistics/HardwareInfo.tsx
index 96399ca..f6f0c9e 100644
--- a/src/pages/System/Statistics/HardwareInfo.tsx
+++ b/src/pages/System/Statistics/HardwareInfo.tsx
@@ -1,6 +1,6 @@
 import { r_sys_statistics_hardware } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const HardwareInfo = () => {
     const [hardwareInfoData, setHardwareInfoData] = useState<HardwareInfoVo>()
@@ -17,7 +17,7 @@ const HardwareInfo = () => {
     }, [])
 
     return (
-        <CommonCard
+        <StatisticsCard
             icon={IconOxygenHardware}
             title={'硬件信息'}
             loading={hardwareInfoData === undefined}
@@ -56,7 +56,7 @@ const HardwareInfo = () => {
                     <div title={hardwareInfoData?.disks}>{hardwareInfoData?.disks}</div>
                 </FlexBox>
             </FlexBox>
-        </CommonCard>
+        </StatisticsCard>
     )
 }
 
diff --git a/src/pages/System/Statistics/OnlineInfo.tsx b/src/pages/System/Statistics/OnlineInfo.tsx
index 624ceca..3bc5921 100644
--- a/src/pages/System/Statistics/OnlineInfo.tsx
+++ b/src/pages/System/Statistics/OnlineInfo.tsx
@@ -4,7 +4,7 @@ import { getTimesBetweenTwoTimes } from '@/util/datetime'
 import { r_sys_statistics_online } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
 import { getTooltipTimeFormatter, lineEChartsBaseOption } from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const OnlineInfo = () => {
     const onlineInfoDivRef = useRef<HTMLDivElement>(null)
@@ -148,7 +148,7 @@ const OnlineInfo = () => {
     }
 
     return (
-        <CommonCard
+        <StatisticsCard
             icon={IconOxygenOnline}
             title={
                 <>
@@ -188,7 +188,7 @@ const OnlineInfo = () => {
             <FlexBox className={'card-content'} direction={'horizontal'}>
                 <div className={'big-chart'} ref={onlineInfoDivRef} />
             </FlexBox>
-        </CommonCard>
+        </StatisticsCard>
     )
 }
 
diff --git a/src/pages/System/Statistics/SoftwareInfo.tsx b/src/pages/System/Statistics/SoftwareInfo.tsx
index 65fe84a..a7bf4c5 100644
--- a/src/pages/System/Statistics/SoftwareInfo.tsx
+++ b/src/pages/System/Statistics/SoftwareInfo.tsx
@@ -1,7 +1,7 @@
 import { utcToLocalTime } from '@/util/datetime'
 import { r_sys_statistics_software } from '@/services/system'
 import FlexBox from '@/components/common/FlexBox'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const SoftwareInfo = () => {
     const [softwareInfoData, setSoftwareInfoData] = useState<SoftwareInfoVo>()
@@ -18,7 +18,7 @@ const SoftwareInfo = () => {
     }, [])
 
     return (
-        <CommonCard
+        <StatisticsCard
             icon={IconOxygenSoftware}
             title={'软件信息'}
             loading={softwareInfoData === undefined}
@@ -61,7 +61,7 @@ const SoftwareInfo = () => {
                     </div>
                 </FlexBox>
             </FlexBox>
-        </CommonCard>
+        </StatisticsCard>
     )
 }
 
diff --git a/src/pages/System/Statistics/StorageInfo.tsx b/src/pages/System/Statistics/StorageInfo.tsx
index c68a198..9202234 100644
--- a/src/pages/System/Statistics/StorageInfo.tsx
+++ b/src/pages/System/Statistics/StorageInfo.tsx
@@ -8,7 +8,7 @@ import {
     barEChartsBaseOption,
     EChartsOption
 } from '@/pages/System/Statistics/shared'
-import { CommonCard } from '@/pages/System/Statistics'
+import StatisticsCard from '@/components/system/StatisticsCard'
 
 const StorageInfo = () => {
     const keyDivRef = useRef<HTMLDivElement>(null)
@@ -161,7 +161,7 @@ const StorageInfo = () => {
 
     return (
         <>
-            <CommonCard
+            <StatisticsCard
                 icon={IconOxygenMemory}
                 title={'内存信息'}
                 loading={isLoading}
@@ -191,7 +191,7 @@ const StorageInfo = () => {
                     <FlexBox className={'value-chart'} ref={storageInfoDivRef} />
                     <FlexBox className={'value-percent'} ref={percentDivRef} />
                 </FlexBox>
-            </CommonCard>
+            </StatisticsCard>
         </>
     )
 }
diff --git a/src/pages/System/Statistics/index.tsx b/src/pages/System/Statistics/index.tsx
index 04077b2..2e04c84 100644
--- a/src/pages/System/Statistics/index.tsx
+++ b/src/pages/System/Statistics/index.tsx
@@ -1,11 +1,7 @@
-import { PropsWithChildren, ReactNode } from 'react'
-import Icon from '@ant-design/icons'
 import '@/assets/css/pages/system/statistics.scss'
-import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
-import LoadingMask from '@/components/common/LoadingMask'
 import Permission from '@/components/common/Permission'
 import OnlineInfo from '@/pages/System/Statistics/OnlineInfo'
 import ActiveInfo from '@/pages/System/Statistics/ActiveInfo'
@@ -14,33 +10,6 @@ import HardwareInfo from '@/pages/System/Statistics/HardwareInfo'
 import CPUInfo from '@/pages/System/Statistics/CPUInfo'
 import StorageInfo from '@/pages/System/Statistics/StorageInfo'
 
-interface CommonCardProps extends PropsWithChildren {
-    icon: IconComponent
-    title: ReactNode
-    loading?: boolean
-    expand?: ReactNode
-}
-
-export const CommonCard = (props: CommonCardProps) => {
-    return (
-        <Card style={{ overflow: 'visible' }}>
-            <FlexBox className={'common-card'}>
-                <FlexBox direction={'horizontal'} className={'head'}>
-                    <Icon component={props.icon} className={'icon'} />
-                    <div className={'title'}>{props.title}</div>
-                    {props.expand}
-                </FlexBox>
-                <LoadingMask
-                    hidden={!props.loading}
-                    maskContent={<AntdSkeleton active paragraph={{ rows: 6 }} />}
-                >
-                    {props.children}
-                </LoadingMask>
-            </FlexBox>
-        </Card>
-    )
-}
-
 const Statistics = () => {
     return (
         <>
diff --git a/src/pages/System/index.tsx b/src/pages/System/index.tsx
index 57203a0..c194cae 100644
--- a/src/pages/System/index.tsx
+++ b/src/pages/System/index.tsx
@@ -1,65 +1,9 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
-import Icon from '@ant-design/icons'
-import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import '@/assets/css/pages/system/index.scss'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
-import Card from '@/components/common/Card'
 import Permission from '@/components/common/Permission'
-
-interface CommonCardProps
-    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    icon: IconComponent
-    description?: ReactNode
-    options?: TiltOptions
-    url?: string
-}
-
-const CommonCard = forwardRef<HTMLDivElement, CommonCardProps>(
-    ({
-        style,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ref,
-        icon,
-        description,
-        options = {
-            reverse: true,
-            max: 8,
-            glare: true,
-            scale: 1.03
-        },
-        url,
-        children,
-        ...props
-    }) => {
-        const navigate = useNavigate()
-        const cardRef = useRef<HTMLDivElement>(null)
-
-        useEffect(() => {
-            cardRef.current && VanillaTilt.init(cardRef.current, options)
-        }, [options])
-
-        const handleCardOnClick = () => {
-            url && navigate(url)
-        }
-
-        return (
-            <Card
-                style={{ overflow: 'visible', ...style }}
-                ref={cardRef}
-                {...props}
-                onClick={handleCardOnClick}
-            >
-                <FlexBox className={'common-card'}>
-                    <Icon component={icon} className={'icon'} />
-                    <div className={'text'}>{children}</div>
-                    <div className={'description'}>{description}</div>
-                </FlexBox>
-            </Card>
-        )
-    }
-)
+import SystemCard from '@/components/system/SystemCard.tsx'
 
 const System = () => {
     return (
@@ -68,54 +12,54 @@ const System = () => {
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Permission path={'/system/statistics'}>
-                            <CommonCard icon={IconOxygenAnalysis} url={'statistics'}>
+                            <SystemCard icon={IconOxygenAnalysis} url={'statistics'}>
                                 系统概况
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission path={'/system/settings'}>
-                            <CommonCard icon={IconOxygenOption} url={'settings'}>
+                            <SystemCard icon={IconOxygenOption} url={'settings'}>
                                 系统设置
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:tool']}>
-                            <CommonCard icon={IconOxygenTool} url={'tools'}>
+                            <SystemCard icon={IconOxygenTool} url={'tools'}>
                                 工具管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:template']}>
-                            <CommonCard icon={IconOxygenTemplate} url={'tools/template'}>
+                            <SystemCard icon={IconOxygenTemplate} url={'tools/template'}>
                                 模板管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:base']}>
-                            <CommonCard icon={IconOxygenBase} url={'tools/base'}>
+                            <SystemCard icon={IconOxygenBase} url={'tools/base'}>
                                 基板管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:category']}>
-                            <CommonCard icon={IconOxygenCategory} url={'tools/category'}>
+                            <SystemCard icon={IconOxygenCategory} url={'tools/category'}>
                                 类别管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission path={'/system/user'}>
-                            <CommonCard icon={IconOxygenUser} url={'user'}>
+                            <SystemCard icon={IconOxygenUser} url={'user'}>
                                 用户管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission path={'/system/role'}>
-                            <CommonCard icon={IconOxygenRole} url={'role'}>
+                            <SystemCard icon={IconOxygenRole} url={'role'}>
                                 角色管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission path={'/system/group'}>
-                            <CommonCard icon={IconOxygenGroup} url={'group'}>
+                            <SystemCard icon={IconOxygenGroup} url={'group'}>
                                 群组管理
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                         <Permission path={'/system/log'}>
-                            <CommonCard icon={IconOxygenLog} url={'log'}>
+                            <SystemCard icon={IconOxygenLog} url={'log'}>
                                 系统日志
-                            </CommonCard>
+                            </SystemCard>
                         </Permission>
                     </FlexBox>
                 </HideScrollbar>
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index 1539c73..ac27fc2 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -1,292 +1,13 @@
-import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode, UIEvent } from 'react'
-import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
-import protocolCheck from 'custom-protocol-check'
-import Icon from '@ant-design/icons'
+import { UIEvent } from 'react'
 import '@/assets/css/pages/tools/store.scss'
-import {
-    COLOR_BACKGROUND,
-    COLOR_MAIN,
-    COLOR_PRODUCTION,
-    DATABASE_SELECT_SUCCESS
-} from '@/constants/common.constants'
+import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { checkDesktop } from '@/util/common'
-import { navigateToSource, navigateToStore, navigateToView } from '@/util/navigation'
-import { r_tool_add_favorite, r_tool_remove_favorite, r_tool_store_get } from '@/services/tool'
-import Card from '@/components/common/Card'
+import { r_tool_store_get } from '@/services/tool'
 import FlexBox from '@/components/common/FlexBox'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
-
-interface CommonCardProps
-    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    icon: ReactNode
-    toolName: string
-    toolId: string
-    toolDesc: string
-    options?: TiltOptions
-    authorName: string
-    authorAvatar: string
-    authorUsername: string
-    ver: string
-    platform: Platform
-    supportPlatform: Platform[]
-    favorite: boolean
-}
-
-const CommonCard = ({
-    style,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ref,
-    icon,
-    toolName,
-    toolId,
-    toolDesc,
-    options = {
-        reverse: true,
-        max: 8,
-        glare: true,
-        ['max-glare']: 0.3,
-        scale: 1.03
-    },
-    authorName,
-    authorAvatar,
-    authorUsername,
-    ver,
-    platform,
-    supportPlatform,
-    favorite,
-    ...props
-}: CommonCardProps) => {
-    const navigate = useNavigate()
-    const [modal, contextHolder] = AntdModal.useModal()
-    const cardRef = useRef<HTMLDivElement>(null)
-    const [favorite_, setFavorite_] = useState<boolean>(favorite)
-
-    useEffect(() => {
-        cardRef.current && VanillaTilt.init(cardRef.current, options)
-    }, [options])
-
-    const handleCardOnClick = () => {
-        if (!checkDesktop() && platform === 'DESKTOP') {
-            void message.warning('此应用需要桌面端环境，请在桌面端打开')
-            return
-        }
-        if (platform === 'ANDROID') {
-            void modal.info({
-                icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
-                title: 'Android 端',
-                centered: true,
-                maskClosable: true,
-                content: (
-                    <FlexBox className={'android-qrcode'}>
-                        <AntdQRCode
-                            value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
-                            size={300}
-                        />
-                        <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
-                    </FlexBox>
-                )
-            })
-            return
-        }
-        navigateToView(navigate, authorUsername, toolId, platform)
-    }
-
-    const handleOnClickAuthor = (e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        navigateToStore(navigate, authorUsername)
-    }
-
-    const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        navigateToSource(navigate, authorUsername, toolId, platform)
-    }
-
-    const handleOnStarBtnClick = (e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        if (favorite_) {
-            void r_tool_remove_favorite({
-                username: authorUsername,
-                toolId: toolId,
-                platform: platform
-            }).then((res) => {
-                const response = res.data
-                if (response.success) {
-                    setFavorite_(false)
-                } else {
-                    void message.error('取消收藏失败，请稍后重试')
-                }
-            })
-        } else {
-            void r_tool_add_favorite({
-                username: authorUsername,
-                toolId: toolId,
-                platform: platform
-            }).then((res) => {
-                const response = res.data
-                if (response.success) {
-                    setFavorite_(true)
-                } else {
-                    void message.error('收藏失败，请稍后重试')
-                }
-            })
-        }
-    }
-
-    const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        void modal.info({
-            icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
-            title: 'Android 端',
-            centered: true,
-            maskClosable: true,
-            content: (
-                <FlexBox className={'android-qrcode'}>
-                    <AntdQRCode
-                        value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
-                        size={300}
-                    />
-                    <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
-                </FlexBox>
-            )
-        })
-    }
-
-    const handleOnDesktopBtnClick = (e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        if (!checkDesktop()) {
-            void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
-            protocolCheck(
-                `oxygen://openurl/view/${authorUsername}/${toolId}`,
-                () => {
-                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
-                    void message.destroy('LOADING')
-                },
-                () => {
-                    void message.destroy('LOADING')
-                },
-                2000,
-                () => {
-                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
-                    void message.destroy('LOADING')
-                }
-            )
-            return
-        }
-        navigateToView(navigate, authorUsername, toolId, platform)
-    }
-
-    const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        navigateToView(navigate, authorUsername, toolId, platform)
-    }
-
-    return (
-        <>
-            <Card
-                style={{ overflow: 'visible', ...style }}
-                ref={cardRef}
-                {...props}
-                onClick={handleCardOnClick}
-            >
-                <FlexBox className={'common-card'}>
-                    <div className={'icon'}>{icon}</div>
-                    <div className={'version'}>
-                        <AntdTag>
-                            {platform.slice(0, 1)}-{ver}
-                        </AntdTag>
-                    </div>
-                    <div className={'info'}>
-                        <div className={'tool-name'}>{toolName}</div>
-                        <div className={'tool-id'}>{`ID: ${toolId}`}</div>
-                        {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
-                    </div>
-                    <div className={'author'} onClick={handleOnClickAuthor}>
-                        <div className={'avatar'}>
-                            <AntdAvatar
-                                src={
-                                    <AntdImage
-                                        preview={false}
-                                        src={`data:image/png;base64,${authorAvatar}`}
-                                        alt={'Avatar'}
-                                    />
-                                }
-                                style={{ background: COLOR_BACKGROUND }}
-                            />
-                        </div>
-                        <AntdTooltip title={authorUsername}>
-                            <div className={'author-name'}>{authorName}</div>
-                        </AntdTooltip>
-                    </div>
-                    <div className={'operation'}>
-                        {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
-                            <AntdTooltip title={'Android 端'}>
-                                <Icon
-                                    component={IconOxygenMobile}
-                                    onClick={handleOnAndroidBtnClick}
-                                />
-                            </AntdTooltip>
-                        )}
-                        {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
-                            <AntdTooltip title={'Web 端'}>
-                                <Icon component={IconOxygenBrowser} onClick={handleOnWebBtnClick} />
-                            </AntdTooltip>
-                        )}
-                        {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
-                            <AntdTooltip title={'桌面端'}>
-                                <Icon
-                                    component={IconOxygenDesktop}
-                                    onClick={handleOnDesktopBtnClick}
-                                />
-                            </AntdTooltip>
-                        )}
-                        <AntdTooltip title={'源码'}>
-                            <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
-                        </AntdTooltip>
-                        <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
-                            <Icon
-                                component={favorite_ ? IconOxygenStarFilled : IconOxygenStar}
-                                style={{ color: favorite_ ? COLOR_PRODUCTION : undefined }}
-                                onClick={handleOnStarBtnClick}
-                            />
-                        </AntdTooltip>
-                    </div>
-                </FlexBox>
-            </Card>
-            {contextHolder}
-        </>
-    )
-}
-
-interface LoadMoreCardProps {
-    onClick: () => void
-}
-
-const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
-    const cardRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        cardRef.current &&
-            VanillaTilt.init(cardRef.current, {
-                reverse: true,
-                max: 8,
-                glare: true,
-                ['max-glare']: 0.3,
-                scale: 1.03
-            })
-    }, [])
-
-    return (
-        <Card style={{ overflow: 'visible' }} ref={cardRef} onClick={onClick}>
-            <FlexBox className={'load-more-card'}>
-                <div className={'icon'}>
-                    <Icon component={IconOxygenMore} />{' '}
-                </div>
-                <div className={'text'}>加载更多</div>
-            </FlexBox>
-        </Card>
-    )
-}
+import StoreCard from '@/components/tools/StoreCard'
+import LoadMoreCard from '@/components/tools/LoadMoreCard'
 
 const Store = () => {
     const scrollTopRef = useRef(0)
@@ -411,7 +132,7 @@ const Store = () => {
                                         : webTool || desktopTool) || androidTool
 
                                 return (
-                                    <CommonCard
+                                    <StoreCard
                                         key={firstTool!.id}
                                         icon={
                                             <img
diff --git a/src/pages/Tools/User.tsx b/src/pages/Tools/User.tsx
index bfe2fd7..369b912 100644
--- a/src/pages/Tools/User.tsx
+++ b/src/pages/Tools/User.tsx
@@ -1,226 +1,20 @@
-import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } from 'react'
-import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
-import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
 import '@/assets/css/pages/tools/user.scss'
 import {
     COLOR_BACKGROUND,
-    COLOR_MAIN,
     DATABASE_NO_RECORD_FOUND,
     DATABASE_SELECT_SUCCESS
 } from '@/constants/common.constants'
 import { checkDesktop } from '@/util/common'
-import { navigateToRoot, navigateToSource, navigateToView } from '@/util/navigation'
+import { navigateToRoot } from '@/util/navigation'
 import { r_sys_user_info_get_basic } from '@/services/system'
 import { r_tool_store_get_by_username } from '@/services/tool'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
-
-interface CommonCardProps
-    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    icon: ReactNode
-    toolName: string
-    toolId: string
-    toolDesc: string
-    options?: TiltOptions
-    authorUsername: string
-    ver: string
-    platform: Platform
-    supportPlatform: Platform[]
-}
-
-const CommonCard = ({
-    style,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ref,
-    icon,
-    toolName,
-    toolId,
-    toolDesc,
-    options = {
-        reverse: true,
-        max: 8,
-        glare: true,
-        ['max-glare']: 0.3,
-        scale: 1.03
-    },
-    authorUsername,
-    ver,
-    platform,
-    supportPlatform,
-    ...props
-}: CommonCardProps) => {
-    const navigate = useNavigate()
-    const [modal, contextHolder] = AntdModal.useModal()
-    const cardRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        cardRef.current && VanillaTilt.init(cardRef.current, options)
-    }, [options])
-
-    const handleCardOnClick = () => {
-        if (!checkDesktop() && platform === 'DESKTOP') {
-            void message.warning('此应用需要桌面端环境，请在桌面端打开')
-            return
-        }
-        if (platform === 'ANDROID') {
-            void modal.info({
-                icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
-                title: 'Android 端',
-                centered: true,
-                maskClosable: true,
-                content: (
-                    <FlexBox className={'android-qrcode'}>
-                        <AntdQRCode
-                            value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
-                            size={300}
-                        />
-                        <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
-                    </FlexBox>
-                )
-            })
-            return
-        }
-        navigateToView(navigate, authorUsername, toolId, platform)
-    }
-
-    const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        navigateToSource(navigate, authorUsername, toolId, platform)
-    }
-
-    const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        void modal.info({
-            icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
-            title: 'Android 端',
-            centered: true,
-            maskClosable: true,
-            content: (
-                <FlexBox className={'android-qrcode'}>
-                    <AntdQRCode
-                        value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
-                        size={300}
-                    />
-                    <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
-                </FlexBox>
-            )
-        })
-    }
-
-    const handleOnDesktopBtnClick = (e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        if (!checkDesktop()) {
-            void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
-            protocolCheck(
-                `oxygen://openurl/view/${authorUsername}/${toolId}`,
-                () => {
-                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
-                    void message.destroy('LOADING')
-                },
-                () => {
-                    void message.destroy('LOADING')
-                },
-                2000,
-                () => {
-                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
-                    void message.destroy('LOADING')
-                }
-            )
-            return
-        }
-        navigateToView(navigate, authorUsername, toolId, platform)
-    }
-
-    const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        navigateToView(navigate, authorUsername, toolId, platform)
-    }
-
-    return (
-        <>
-            <Card
-                style={{ overflow: 'visible', ...style }}
-                ref={cardRef}
-                {...props}
-                onClick={handleCardOnClick}
-            >
-                <FlexBox className={'common-card'}>
-                    <div className={'icon'}>{icon}</div>
-                    <div className={'version'}>
-                        <AntdTag>
-                            {platform.slice(0, 1)}-{ver}
-                        </AntdTag>
-                    </div>
-                    <div className={'info'}>
-                        <div className={'tool-name'}>{toolName}</div>
-                        <div className={'tool-id'}>{`ID: ${toolId}`}</div>
-                        {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
-                    </div>
-                    <div className={'operation'}>
-                        {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
-                            <AntdTooltip title={'Android 端'}>
-                                <Icon
-                                    component={IconOxygenMobile}
-                                    onClick={handleOnAndroidBtnClick}
-                                />
-                            </AntdTooltip>
-                        )}
-                        {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
-                            <AntdTooltip title={'Web 端'}>
-                                <Icon component={IconOxygenBrowser} onClick={handleOnWebBtnClick} />
-                            </AntdTooltip>
-                        )}
-                        {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
-                            <AntdTooltip title={'桌面端'}>
-                                <Icon
-                                    component={IconOxygenDesktop}
-                                    onClick={handleOnDesktopBtnClick}
-                                />
-                            </AntdTooltip>
-                        )}
-                        <AntdTooltip title={'源码'}>
-                            <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
-                        </AntdTooltip>
-                    </div>
-                </FlexBox>
-            </Card>
-            {contextHolder}
-        </>
-    )
-}
-
-interface LoadMoreCardProps {
-    onClick: () => void
-}
-
-const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
-    const cardRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        cardRef.current &&
-            VanillaTilt.init(cardRef.current, {
-                reverse: true,
-                max: 8,
-                glare: true,
-                ['max-glare']: 0.3,
-                scale: 1.03
-            })
-    }, [])
-
-    return (
-        <Card style={{ overflow: 'visible' }} ref={cardRef} onClick={onClick}>
-            <FlexBox className={'load-more-card'}>
-                <div className={'icon'}>
-                    <Icon component={IconOxygenMore} />{' '}
-                </div>
-                <div className={'text'}>加载更多</div>
-            </FlexBox>
-        </Card>
-    )
-}
+import StoreCard from '@/components/tools/StoreCard'
+import LoadMoreCard from '@/components/tools/LoadMoreCard'
 
 const User = () => {
     const { username } = useParams()
@@ -401,7 +195,7 @@ const User = () => {
                                             : webTool || desktopTool) || androidTool
 
                                     return (
-                                        <CommonCard
+                                        <StoreCard
                                             key={firstTool!.id}
                                             icon={
                                                 <img
@@ -416,6 +210,7 @@ const User = () => {
                                             ver={firstTool!.ver}
                                             platform={firstTool!.platform}
                                             supportPlatform={tools.map((value) => value.platform)}
+                                            favorite={firstTool!.favorite}
                                         />
                                     )
                                 })}
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 2733c31..cd5ec46 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -1,6 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
-import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import '@/assets/css/pages/tools/index.scss'
 import {
     DATABASE_DELETE_SUCCESS,
@@ -27,106 +25,8 @@ import {
 import FitFullscreen from '@/components/common/FitFullscreen'
 import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
-import Card from '@/components/common/Card'
-
-interface CommonCardProps
-    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    icon: ReactNode
-    toolName?: string
-    toolId?: string
-    options?: TiltOptions
-    url?: string
-    onOpen?: () => void
-    onEdit?: () => void
-    onSource?: () => void
-    onPublish?: () => void
-    onCancelReview?: () => void
-    onDelete?: () => void
-}
-
-const CommonCard = ({
-    style,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ref,
-    icon,
-    toolName,
-    toolId,
-    options = {
-        reverse: true,
-        max: 8,
-        glare: true,
-        ['max-glare']: 0.3,
-        scale: 1.03
-    },
-    url,
-    onOpen,
-    onEdit,
-    onSource,
-    onPublish,
-    onCancelReview,
-    onDelete,
-    children,
-    ...props
-}: CommonCardProps) => {
-    const navigate = useNavigate()
-    const cardRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        cardRef.current && VanillaTilt.init(cardRef.current, options)
-    }, [options])
-
-    const handleCardOnClick = () => {
-        url && navigate(url)
-    }
-
-    return (
-        <Card
-            style={{ overflow: 'visible', ...style }}
-            ref={cardRef}
-            {...props}
-            onClick={handleCardOnClick}
-        >
-            <FlexBox className={'common-card'}>
-                <div className={'icon'}>{icon}</div>
-                <div className={'info'}>
-                    {toolName && <div className={'tool-name'}>{toolName}</div>}
-                    {toolId && <div className={'tool-id'}>{`ID: ${toolId}`}</div>}
-                </div>
-                <div className={'operation'}>
-                    {onOpen && (
-                        <AntdButton onClick={onOpen} size={'small'} type={'primary'}>
-                            打开
-                        </AntdButton>
-                    )}
-                    {onEdit && onPublish && (
-                        <div className={'edit'}>
-                            <AntdButton.Group size={'small'}>
-                                <AntdButton onClick={onEdit}>编辑</AntdButton>
-                                <AntdButton onClick={onPublish}>发布</AntdButton>
-                            </AntdButton.Group>
-                        </div>
-                    )}
-                    {onSource && (
-                        <AntdButton size={'small'} onClick={onSource}>
-                            源码
-                        </AntdButton>
-                    )}
-                    {onCancelReview && (
-                        <AntdButton size={'small'} onClick={onCancelReview}>
-                            取消审核
-                        </AntdButton>
-                    )}
-                    {onDelete && (
-                        <AntdButton size={'small'} danger onClick={onDelete}>
-                            删除
-                        </AntdButton>
-                    )}
-                </div>
-                {children}
-            </FlexBox>
-        </Card>
-    )
-}
+import RepositoryCard from '@/components/tools/RepositoryCard'
+import LoadMoreCard from '@/components/tools/LoadMoreCard'
 
 interface ToolCardProps {
     tools: ToolVo[]
@@ -262,7 +162,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
     }
 
     return (
-        <CommonCard
+        <RepositoryCard
             icon={<img src={`data:image/svg+xml;base64,${selectedTool.icon}`} alt={'Icon'} />}
             toolName={selectedTool.name}
             toolId={selectedTool.toolId}
@@ -296,37 +196,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
                     />
                 </AntdTooltip>
             )}
-        </CommonCard>
-    )
-}
-
-interface LoadMoreCardProps {
-    onClick: () => void
-}
-
-const LoadMoreCard = ({ onClick }: LoadMoreCardProps) => {
-    const cardRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        cardRef.current &&
-            VanillaTilt.init(cardRef.current, {
-                reverse: true,
-                max: 8,
-                glare: true,
-                ['max-glare']: 0.3,
-                scale: 1.03
-            })
-    }, [])
-
-    return (
-        <Card style={{ overflow: 'visible' }} ref={cardRef} onClick={onClick}>
-            <FlexBox className={'load-more-card'}>
-                <div className={'icon'}>
-                    <Icon component={IconOxygenMore} />{' '}
-                </div>
-                <div className={'text'}>加载更多</div>
-            </FlexBox>
-        </Card>
+        </RepositoryCard>
     )
 }
 
@@ -616,7 +486,7 @@ const Tools = () => {
             <FitFullscreen data-component={'tools'}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
-                        <CommonCard
+                        <RepositoryCard
                             icon={<Icon component={IconOxygenNewProject} />}
                             toolName={'创建工具'}
                             url={'/create'}

From aa96359f46804ae412d2a2aaac1ceee1c127eee2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 28 Apr 2024 15:24:23 +0800
Subject: [PATCH 265/307] Feat(ToolRepository): Add favorite tool list

Add favorite tool list to user tool repository
---
 src/assets/css/pages/tools/index.scss | 128 +++++++++++++-------
 src/components/tools/StoreCard.tsx    |  57 ++++-----
 src/global.d.ts                       |   2 +-
 src/pages/Tools/Store.tsx             |   4 +-
 src/pages/Tools/User.tsx              |   3 +-
 src/pages/Tools/index.tsx             | 162 ++++++++++++++++++++++----
 src/services/tool.tsx                 |   7 +-
 7 files changed, 260 insertions(+), 103 deletions(-)

diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.scss
index 48a169f..db8f1a9 100644
--- a/src/assets/css/pages/tools/index.scss
+++ b/src/assets/css/pages/tools/index.scss
@@ -5,66 +5,104 @@
   .root-content {
     padding: 20px;
     gap: 20px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
 
-    > .card-box {
-      width: 180px;
-      height: 290px;
-      flex: 0 0 auto;
-    }
+    .own-content {
+      gap: 20px;
+      flex-wrap: wrap;
+      justify-content: flex-start;
 
-
-    & > :first-child {
-      cursor: pointer;
-
-      .info {
-        padding-top: 50px;
-      }
-    }
-
-    & > :not(:first-child) {
-      .info {
-        transform: translateY(40px);
-        transition: all 0.1s ease;
+      > .card-box {
+        width: 180px;
+        height: 290px;
+        flex: 0 0 auto;
       }
 
-      .operation {
-        display: flex;
-        flex: 1;
-        justify-content: center;
-        padding-bottom: 20px;
-        gap: 4px;
-        width: 70%;
-        flex-direction: column;
-        align-items: center;
-        visibility: hidden;
-        opacity: 0;
 
-        > *, .edit > * {
-          width: 100%;
+      & > :first-child {
+        cursor: pointer;
+
+        .info {
+          padding-top: 50px;
+        }
+      }
+
+      & > :not(:first-child) {
+        .info {
+          transform: translateY(40px);
+          transition: all 0.1s ease;
         }
 
-        .edit {
-          > * {
-            > :first-child {
-              flex: 1;
+        .operation {
+          display: flex;
+          flex: 1;
+          justify-content: center;
+          padding-bottom: 20px;
+          gap: 4px;
+          width: 70%;
+          flex-direction: column;
+          align-items: center;
+          visibility: hidden;
+          opacity: 0;
+
+          > *, .edit > * {
+            width: 100%;
+          }
+
+          .edit {
+            > * {
+              > :first-child {
+                flex: 1;
+              }
             }
           }
         }
       }
+
+      & > :not(:first-child):hover {
+        .info {
+          transform: translateY(-10px);
+          transition: all 0.2s ease;
+        }
+
+        .operation {
+          visibility: visible;
+          opacity: 1;
+          transition: all 0.4s ease;
+        }
+      }
     }
 
-    & > :not(:first-child):hover {
-      .info {
-        transform: translateY(-10px);
-        transition: all 0.2s ease;
+    .favorite-divider {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 20px;
+
+      :first-child, :last-child {
+        height: 0;
+        border: {
+          width: 1px;
+          color: constants.$divide-color;
+          style: dashed;
+        };
       }
 
-      .operation {
-        visibility: visible;
-        opacity: 1;
-        transition: all 0.4s ease;
+      .divider-text {
+        flex: 0 0 auto;
+        font-size: 1.2em;
+        color: constants.$font-secondary-color;
+      }
+    }
+
+    .star-content {
+      gap: 20px;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+
+      > .card-box {
+        width: 180px;
+        height: 290px;
+        flex: 0 0 auto;
       }
     }
   }
diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
index b305ee3..d500b36 100644
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -9,6 +9,7 @@ import { navigateToSource, navigateToStore, navigateToView } from '@/util/naviga
 import { r_tool_add_favorite, r_tool_remove_favorite } from '@/services/tool'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
+import { getUserId } from '@/util/auth.tsx'
 
 interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     icon: ReactNode
@@ -16,9 +17,8 @@ interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement
     toolId: string
     toolDesc: string
     options?: TiltOptions
-    authorName?: string
-    authorAvatar?: string
-    authorUsername: string
+    author: UserWithInfoVo
+    showAuthor?: boolean
     ver: string
     platform: Platform
     supportPlatform: Platform[]
@@ -40,9 +40,8 @@ const StoreCard = ({
         ['max-glare']: 0.3,
         scale: 1.03
     },
-    authorName,
-    authorAvatar,
-    authorUsername,
+    author,
+    showAuthor = true,
     ver,
     platform,
     supportPlatform,
@@ -53,9 +52,11 @@ const StoreCard = ({
     const [modal, contextHolder] = AntdModal.useModal()
     const cardRef = useRef<HTMLDivElement>(null)
     const [favorite_, setFavorite_] = useState<boolean>(favorite)
+    const [userId, setUserId] = useState('')
 
     useEffect(() => {
         cardRef.current && VanillaTilt.init(cardRef.current, options)
+        getUserId().then((value) => setUserId(value))
     }, [options])
 
     const handleCardOnClick = () => {
@@ -72,7 +73,7 @@ const StoreCard = ({
                 content: (
                     <FlexBox className={'android-qrcode'}>
                         <AntdQRCode
-                            value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                            value={`oxygen://openurl/view/${author.username}/${toolId}`}
                             size={300}
                         />
                         <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
@@ -81,24 +82,24 @@ const StoreCard = ({
             })
             return
         }
-        navigateToView(navigate, authorUsername, toolId, platform)
+        navigateToView(navigate, author.username, toolId, platform)
     }
 
     const handleOnClickAuthor = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigateToStore(navigate, authorUsername)
+        navigateToStore(navigate, author.username)
     }
 
     const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigateToSource(navigate, authorUsername, toolId, platform)
+        navigateToSource(navigate, author.username, toolId, platform)
     }
 
     const handleOnStarBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         if (favorite_) {
             void r_tool_remove_favorite({
-                username: authorUsername,
+                authorId: author.id,
                 toolId: toolId,
                 platform: platform
             }).then((res) => {
@@ -111,7 +112,7 @@ const StoreCard = ({
             })
         } else {
             void r_tool_add_favorite({
-                username: authorUsername,
+                authorId: author.id,
                 toolId: toolId,
                 platform: platform
             }).then((res) => {
@@ -135,7 +136,7 @@ const StoreCard = ({
             content: (
                 <FlexBox className={'android-qrcode'}>
                     <AntdQRCode
-                        value={`oxygen://openurl/view/${authorUsername}/${toolId}`}
+                        value={`oxygen://openurl/view/${author.username}/${toolId}`}
                         size={300}
                     />
                     <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
@@ -149,7 +150,7 @@ const StoreCard = ({
         if (!checkDesktop()) {
             void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
             protocolCheck(
-                `oxygen://openurl/view/${authorUsername}/${toolId}`,
+                `oxygen://openurl/view/${author.username}/${toolId}`,
                 () => {
                     void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
                     void message.destroy('LOADING')
@@ -165,12 +166,12 @@ const StoreCard = ({
             )
             return
         }
-        navigateToView(navigate, authorUsername, toolId, platform)
+        navigateToView(navigate, author.username, toolId, platform)
     }
 
     const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigateToView(navigate, authorUsername, toolId, platform)
+        navigateToView(navigate, author.username, toolId, platform)
     }
 
     return (
@@ -194,22 +195,22 @@ const StoreCard = ({
                         <div className={'tool-id'}>{`ID: ${toolId}`}</div>
                         {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
                     </div>
-                    {authorAvatar && authorName && (
+                    {showAuthor && (
                         <div className={'author'} onClick={handleOnClickAuthor}>
                             <div className={'avatar'}>
                                 <AntdAvatar
                                     src={
                                         <AntdImage
                                             preview={false}
-                                            src={`data:image/png;base64,${authorAvatar}`}
+                                            src={`data:image/png;base64,${author.userInfo.avatar}`}
                                             alt={'Avatar'}
                                         />
                                     }
                                     style={{ background: COLOR_BACKGROUND }}
                                 />
                             </div>
-                            <AntdTooltip title={authorUsername}>
-                                <div className={'author-name'}>{authorName}</div>
+                            <AntdTooltip title={author.username}>
+                                <div className={'author-name'}>{author.userInfo.nickname}</div>
                             </AntdTooltip>
                         </div>
                     )}
@@ -238,13 +239,15 @@ const StoreCard = ({
                         <AntdTooltip title={'源码'}>
                             <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
                         </AntdTooltip>
-                        <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
-                            <Icon
-                                component={favorite_ ? IconOxygenStarFilled : IconOxygenStar}
-                                style={{ color: favorite_ ? COLOR_PRODUCTION : undefined }}
-                                onClick={handleOnStarBtnClick}
-                            />
-                        </AntdTooltip>
+                        {author.id !== userId && (
+                            <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
+                                <Icon
+                                    component={favorite_ ? IconOxygenStarFilled : IconOxygenStar}
+                                    style={{ color: favorite_ ? COLOR_PRODUCTION : undefined }}
+                                    onClick={handleOnStarBtnClick}
+                                />
+                            </AntdTooltip>
+                        )}
                     </div>
                 </FlexBox>
             </Card>
diff --git a/src/global.d.ts b/src/global.d.ts
index 63d1a81..6af5e98 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -650,7 +650,7 @@ interface ToolStoreGetParam extends PageParam {
 }
 
 interface ToolFavoriteAddRemoveParam {
-    username: string
+    authorId: string
     toolId: string
     platform: Platform
 }
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index ac27fc2..f187751 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -143,9 +143,7 @@ const Store = () => {
                                         toolName={firstTool!.name}
                                         toolId={firstTool!.toolId}
                                         toolDesc={firstTool!.description}
-                                        authorName={firstTool!.author.userInfo.nickname}
-                                        authorAvatar={firstTool!.author.userInfo.avatar}
-                                        authorUsername={firstTool!.author.username}
+                                        author={firstTool!.author}
                                         ver={firstTool!.ver}
                                         platform={firstTool!.platform}
                                         supportPlatform={tools.map((value) => value.platform)}
diff --git a/src/pages/Tools/User.tsx b/src/pages/Tools/User.tsx
index 369b912..2124196 100644
--- a/src/pages/Tools/User.tsx
+++ b/src/pages/Tools/User.tsx
@@ -206,7 +206,8 @@ const User = () => {
                                             toolName={firstTool!.name}
                                             toolId={firstTool!.toolId}
                                             toolDesc={firstTool!.description}
-                                            authorUsername={firstTool!.author.username}
+                                            author={firstTool!.author}
+                                            showAuthor={false}
                                             ver={firstTool!.ver}
                                             platform={firstTool!.platform}
                                             supportPlatform={tools.map((value) => value.platform)}
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index cd5ec46..95526da 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -19,6 +19,7 @@ import {
     r_tool_cancel,
     r_tool_delete,
     r_tool_get,
+    r_tool_get_favorite,
     r_tool_submit,
     r_tool_upgrade
 } from '@/services/tool'
@@ -27,6 +28,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import RepositoryCard from '@/components/tools/RepositoryCard'
 import LoadMoreCard from '@/components/tools/LoadMoreCard'
+import StoreCard from '@/components/tools/StoreCard.tsx'
 
 interface ToolCardProps {
     tools: ToolVo[]
@@ -208,6 +210,9 @@ const Tools = () => {
     const [hasNextPage, setHasNextPage] = useState(false)
     const [toolData, setToolData] = useState<ToolVo[]>([])
     const [upgradeForm] = AntdForm.useForm<ToolUpgradeParam>()
+    const [currentStarPage, setCurrentStarPage] = useState(0)
+    const [hasNextStarPage, setHasNextStarPage] = useState(false)
+    const [starToolData, setStarToolData] = useState<ToolVo[]>([])
 
     const handleOnDeleteTool = (tool: ToolVo) => {
         modal
@@ -436,6 +441,13 @@ const Tools = () => {
         getTool(currentPage + 1)
     }
 
+    const handleOnLoadMoreStar = () => {
+        if (loading) {
+            return
+        }
+        getStarTool(currentStarPage + 1)
+    }
+
     const getTool = (page: number) => {
         if (loading) {
             return
@@ -468,6 +480,47 @@ const Tools = () => {
                         void message.error('获取工具失败，请稍后重试')
                 }
             })
+            .finally(() => {
+                setLoading(false)
+                message.destroy('LOADING')
+                if (currentStarPage === 0) {
+                    getStarTool(1)
+                }
+            })
+    }
+
+    const getStarTool = (page: number) => {
+        if (loading) {
+            return
+        }
+        setLoading(true)
+        void message.loading({ content: '加载收藏列表中', key: 'LOADING', duration: 0 })
+
+        void r_tool_get_favorite({ currentPage: page })
+            .then((res) => {
+                const response = res.data
+
+                switch (response.code) {
+                    case DATABASE_SELECT_SUCCESS:
+                        setCurrentStarPage(response.data!.current)
+                        if (
+                            response.data!.current === response.data!.pages ||
+                            response.data!.total === 0
+                        ) {
+                            setHasNextStarPage(false)
+                        } else {
+                            setHasNextStarPage(true)
+                        }
+                        if (response.data!.current === 1) {
+                            setStarToolData(response.data!.records)
+                        } else {
+                            setStarToolData([...starToolData, ...response.data!.records])
+                        }
+                        break
+                    default:
+                        void message.error('加载失败，请稍后重试')
+                }
+            })
             .finally(() => {
                 setLoading(false)
                 message.destroy('LOADING')
@@ -485,30 +538,91 @@ const Tools = () => {
         <>
             <FitFullscreen data-component={'tools'}>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
-                    <FlexBox direction={'horizontal'} className={'root-content'}>
-                        <RepositoryCard
-                            icon={<Icon component={IconOxygenNewProject} />}
-                            toolName={'创建工具'}
-                            url={'/create'}
-                        />
-                        {toolData &&
-                            Object.values(
-                                toolData.reduce((result: Record<string, ToolVo[]>, item) => {
-                                    result[item.toolId] = result[item.toolId] || []
-                                    result[item.toolId].push(item)
-                                    return result
-                                }, {})
-                            ).map((value) => (
-                                <ToolCard
-                                    key={JSON.stringify(value)}
-                                    tools={value}
-                                    onDelete={handleOnDeleteTool}
-                                    onUpgrade={handleOnUpgradeTool}
-                                    onSubmit={handleOnSubmitTool}
-                                    onCancel={handleOnCancelTool}
-                                />
-                            ))}
-                        {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
+                    <FlexBox direction={'vertical'} className={'root-content'}>
+                        <FlexBox direction={'horizontal'} className={'own-content'}>
+                            <RepositoryCard
+                                icon={<Icon component={IconOxygenNewProject} />}
+                                toolName={'创建工具'}
+                                url={'/create'}
+                            />
+                            {toolData &&
+                                Object.values(
+                                    toolData.reduce((result: Record<string, ToolVo[]>, item) => {
+                                        result[item.toolId] = result[item.toolId] || []
+                                        result[item.toolId].push(item)
+                                        return result
+                                    }, {})
+                                ).map((value) => (
+                                    <ToolCard
+                                        key={JSON.stringify(value)}
+                                        tools={value}
+                                        onDelete={handleOnDeleteTool}
+                                        onUpgrade={handleOnUpgradeTool}
+                                        onSubmit={handleOnSubmitTool}
+                                        onCancel={handleOnCancelTool}
+                                    />
+                                ))}
+                            {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
+                        </FlexBox>
+                        <FlexBox className={'favorite-divider'}>
+                            <div />
+                            <div className={'divider-text'}>收藏</div>
+                            <div />
+                        </FlexBox>
+                        <FlexBox direction={'horizontal'} className={'star-content'}>
+                            {starToolData
+                                ?.reduce((previousValue: ToolVo[], currentValue) => {
+                                    if (
+                                        !previousValue.some(
+                                            (value) =>
+                                                value.author.id === currentValue.author.id &&
+                                                value.toolId === currentValue.toolId
+                                        )
+                                    ) {
+                                        previousValue.push(currentValue)
+                                    }
+                                    return previousValue
+                                }, [])
+                                .map((item) => {
+                                    const tools = starToolData.filter(
+                                        (value) =>
+                                            value.author.id === item.author.id &&
+                                            value.toolId === item.toolId
+                                    )
+                                    const webTool = tools.find((value) => value.platform === 'WEB')
+                                    const desktopTool = tools.find(
+                                        (value) => value.platform === 'DESKTOP'
+                                    )
+                                    const androidTool = tools.find(
+                                        (value) => value.platform === 'ANDROID'
+                                    )
+                                    const firstTool =
+                                        (checkDesktop()
+                                            ? desktopTool || webTool
+                                            : webTool || desktopTool) || androidTool
+
+                                    return (
+                                        <StoreCard
+                                            key={firstTool!.id}
+                                            icon={
+                                                <img
+                                                    src={`data:image/svg+xml;base64,${firstTool!.icon}`}
+                                                    alt={'Icon'}
+                                                />
+                                            }
+                                            toolName={firstTool!.name}
+                                            toolId={firstTool!.toolId}
+                                            toolDesc={firstTool!.description}
+                                            author={firstTool!.author}
+                                            ver={firstTool!.ver}
+                                            platform={firstTool!.platform}
+                                            supportPlatform={tools.map((value) => value.platform)}
+                                            favorite={firstTool!.favorite}
+                                        />
+                                    )
+                                })}
+                            {hasNextStarPage && <LoadMoreCard onClick={handleOnLoadMoreStar} />}
+                        </FlexBox>
                     </FlexBox>
                 </HideScrollbar>
             </FitFullscreen>
diff --git a/src/services/tool.tsx b/src/services/tool.tsx
index b462f37..2a31952 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.tsx
@@ -40,7 +40,10 @@ export const r_tool_store_get_by_username = (username: string, param: ToolStoreG
     request.get<PageVo<ToolVo>>(`${URL_TOOL_STORE}/${username}`, param)
 
 export const r_tool_add_favorite = (param: ToolFavoriteAddRemoveParam) =>
-    request.post(`${URL_TOOL_FAVORITE}`, param)
+    request.post(URL_TOOL_FAVORITE, param)
 
 export const r_tool_remove_favorite = (param: ToolFavoriteAddRemoveParam) =>
-    request.delete(`${URL_TOOL_FAVORITE}`, param)
+    request.delete(URL_TOOL_FAVORITE, param)
+
+export const r_tool_get_favorite = (param: PageParam) =>
+    request.get<PageVo<ToolVo>>(URL_TOOL_FAVORITE, param)

From 340a842b4ca2c1ab19f9f9338aaf4b243f453a8e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 28 Apr 2024 16:14:04 +0800
Subject: [PATCH 266/307] Refactor(UrlCard): Optimize UrlCard

---
 .../system-card.scss => common/url-card.scss} |  6 +-
 src/assets/css/pages/system/index.scss        |  2 +-
 src/components/common/UrlCard.tsx             | 57 +++++++++++++++++
 src/components/system/SystemCard.tsx          | 62 -------------------
 src/components/tools/RepositoryCard.tsx       | 12 +---
 src/pages/System/index.tsx                    | 42 ++++++-------
 src/pages/Tools/index.tsx                     | 11 ++--
 7 files changed, 89 insertions(+), 103 deletions(-)
 rename src/assets/css/components/{system/system-card.scss => common/url-card.scss} (82%)
 create mode 100644 src/components/common/UrlCard.tsx
 delete mode 100644 src/components/system/SystemCard.tsx

diff --git a/src/assets/css/components/system/system-card.scss b/src/assets/css/components/common/url-card.scss
similarity index 82%
rename from src/assets/css/components/system/system-card.scss
rename to src/assets/css/components/common/url-card.scss
index 9c12029..8110115 100644
--- a/src/assets/css/components/system/system-card.scss
+++ b/src/assets/css/components/common/url-card.scss
@@ -1,12 +1,12 @@
 @use '@/assets/css/constants' as constants;
 
-[data-component=component-system-card] {
+[data-component=component-url-card] {
   cursor: pointer;
 
-  .system-card {
+  .url-card {
     width: 100%;
     height: 100%;
-    margin-top: 100px;
+    margin-top: 80px;
     text-align: center;
     gap: 42px;
 
diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss
index 6f3f7b6..5dbfd3f 100644
--- a/src/assets/css/pages/system/index.scss
+++ b/src/assets/css/pages/system/index.scss
@@ -9,7 +9,7 @@
 
     > .card-box {
       width: 200px;
-      height: 360px;
+      height: 320px;
       flex: 0 0 auto;
       overflow: hidden !important;
     }
diff --git a/src/components/common/UrlCard.tsx b/src/components/common/UrlCard.tsx
new file mode 100644
index 0000000..13abf64
--- /dev/null
+++ b/src/components/common/UrlCard.tsx
@@ -0,0 +1,57 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
+import Icon from '@ant-design/icons'
+import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
+import '@/assets/css/components/common/url-card.scss'
+import Card from '@/components/common/Card.tsx'
+import FlexBox from '@/components/common/FlexBox.tsx'
+
+interface UrlCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    icon: IconComponent
+    description?: ReactNode
+    options?: TiltOptions
+    url?: string
+}
+
+const UrlCard = ({
+    style,
+    icon,
+    description,
+    options = {
+        reverse: true,
+        max: 8,
+        glare: true,
+        scale: 1.03
+    },
+    url,
+    children,
+    ...props
+}: UrlCardProps) => {
+    const navigate = useNavigate()
+    const cardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        cardRef.current && VanillaTilt.init(cardRef.current, options)
+    }, [options])
+
+    const handleCardOnClick = () => {
+        url && navigate(url)
+    }
+
+    return (
+        <Card
+            data-component={'component-url-card'}
+            style={{ overflow: 'visible', ...style }}
+            {...props}
+            ref={cardRef}
+            onClick={handleCardOnClick}
+        >
+            <FlexBox className={'url-card'}>
+                <Icon component={icon} className={'icon'} />
+                <div className={'text'}>{children}</div>
+                <div className={'description'}>{description}</div>
+            </FlexBox>
+        </Card>
+    )
+}
+
+export default UrlCard
diff --git a/src/components/system/SystemCard.tsx b/src/components/system/SystemCard.tsx
deleted file mode 100644
index 1afce03..0000000
--- a/src/components/system/SystemCard.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
-import Icon from '@ant-design/icons'
-import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
-import '@/assets/css/components/system/system-card.scss'
-import Card from '@/components/common/Card'
-import FlexBox from '@/components/common/FlexBox'
-
-interface SystemCardProps
-    extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    icon: IconComponent
-    description?: ReactNode
-    options?: TiltOptions
-    url?: string
-}
-
-const SystemCard = forwardRef<HTMLDivElement, SystemCardProps>(
-    ({
-        style,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ref,
-        icon,
-        description,
-        options = {
-            reverse: true,
-            max: 8,
-            glare: true,
-            scale: 1.03
-        },
-        url,
-        children,
-        ...props
-    }) => {
-        const navigate = useNavigate()
-        const cardRef = useRef<HTMLDivElement>(null)
-
-        useEffect(() => {
-            cardRef.current && VanillaTilt.init(cardRef.current, options)
-        }, [options])
-
-        const handleCardOnClick = () => {
-            url && navigate(url)
-        }
-
-        return (
-            <Card
-                data-component={'component-system-card'}
-                style={{ overflow: 'visible', ...style }}
-                ref={cardRef}
-                {...props}
-                onClick={handleCardOnClick}
-            >
-                <FlexBox className={'system-card'}>
-                    <Icon component={icon} className={'icon'} />
-                    <div className={'text'}>{children}</div>
-                    <div className={'description'}>{description}</div>
-                </FlexBox>
-            </Card>
-        )
-    }
-)
-
-export default SystemCard
diff --git a/src/components/tools/RepositoryCard.tsx b/src/components/tools/RepositoryCard.tsx
index c00a9d7..eebe6dd 100644
--- a/src/components/tools/RepositoryCard.tsx
+++ b/src/components/tools/RepositoryCard.tsx
@@ -7,10 +7,9 @@ import FlexBox from '@/components/common/FlexBox'
 interface RepositoryCardProps
     extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     icon: ReactNode
-    toolName?: string
-    toolId?: string
+    toolName: string
+    toolId: string
     options?: TiltOptions
-    url?: string
     onOpen?: () => void
     onEdit?: () => void
     onSource?: () => void
@@ -33,7 +32,6 @@ const RepositoryCard = ({
         ['max-glare']: 0.3,
         scale: 1.03
     },
-    url,
     onOpen,
     onEdit,
     onSource,
@@ -43,24 +41,18 @@ const RepositoryCard = ({
     children,
     ...props
 }: RepositoryCardProps) => {
-    const navigate = useNavigate()
     const cardRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
         cardRef.current && VanillaTilt.init(cardRef.current, options)
     }, [options])
 
-    const handleCardOnClick = () => {
-        url && navigate(url)
-    }
-
     return (
         <Card
             data-component={'component-repository-card'}
             style={{ overflow: 'visible', ...style }}
             ref={cardRef}
             {...props}
-            onClick={handleCardOnClick}
         >
             <FlexBox className={'repository-card'}>
                 <div className={'icon'}>{icon}</div>
diff --git a/src/pages/System/index.tsx b/src/pages/System/index.tsx
index c194cae..6ab01d5 100644
--- a/src/pages/System/index.tsx
+++ b/src/pages/System/index.tsx
@@ -3,7 +3,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 import Permission from '@/components/common/Permission'
-import SystemCard from '@/components/system/SystemCard.tsx'
+import UrlCard from '@/components/common/UrlCard'
 
 const System = () => {
     return (
@@ -12,54 +12,54 @@ const System = () => {
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Permission path={'/system/statistics'}>
-                            <SystemCard icon={IconOxygenAnalysis} url={'statistics'}>
+                            <UrlCard icon={IconOxygenAnalysis} url={'statistics'}>
                                 系统概况
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission path={'/system/settings'}>
-                            <SystemCard icon={IconOxygenOption} url={'settings'}>
+                            <UrlCard icon={IconOxygenOption} url={'settings'}>
                                 系统设置
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:tool']}>
-                            <SystemCard icon={IconOxygenTool} url={'tools'}>
+                            <UrlCard icon={IconOxygenTool} url={'tools'}>
                                 工具管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:template']}>
-                            <SystemCard icon={IconOxygenTemplate} url={'tools/template'}>
+                            <UrlCard icon={IconOxygenTemplate} url={'tools/template'}>
                                 模板管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:base']}>
-                            <SystemCard icon={IconOxygenBase} url={'tools/base'}>
+                            <UrlCard icon={IconOxygenBase} url={'tools/base'}>
                                 基板管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission operationCode={['system:tool:query:category']}>
-                            <SystemCard icon={IconOxygenCategory} url={'tools/category'}>
+                            <UrlCard icon={IconOxygenCategory} url={'tools/category'}>
                                 类别管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission path={'/system/user'}>
-                            <SystemCard icon={IconOxygenUser} url={'user'}>
+                            <UrlCard icon={IconOxygenUser} url={'user'}>
                                 用户管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission path={'/system/role'}>
-                            <SystemCard icon={IconOxygenRole} url={'role'}>
+                            <UrlCard icon={IconOxygenRole} url={'role'}>
                                 角色管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission path={'/system/group'}>
-                            <SystemCard icon={IconOxygenGroup} url={'group'}>
+                            <UrlCard icon={IconOxygenGroup} url={'group'}>
                                 群组管理
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                         <Permission path={'/system/log'}>
-                            <SystemCard icon={IconOxygenLog} url={'log'}>
+                            <UrlCard icon={IconOxygenLog} url={'log'}>
                                 系统日志
-                            </SystemCard>
+                            </UrlCard>
                         </Permission>
                     </FlexBox>
                 </HideScrollbar>
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 95526da..9269bbb 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -28,7 +28,8 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import RepositoryCard from '@/components/tools/RepositoryCard'
 import LoadMoreCard from '@/components/tools/LoadMoreCard'
-import StoreCard from '@/components/tools/StoreCard.tsx'
+import StoreCard from '@/components/tools/StoreCard'
+import UrlCard from '@/components/common/UrlCard'
 
 interface ToolCardProps {
     tools: ToolVo[]
@@ -540,11 +541,9 @@ const Tools = () => {
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={1000}>
                     <FlexBox direction={'vertical'} className={'root-content'}>
                         <FlexBox direction={'horizontal'} className={'own-content'}>
-                            <RepositoryCard
-                                icon={<Icon component={IconOxygenNewProject} />}
-                                toolName={'创建工具'}
-                                url={'/create'}
-                            />
+                            <UrlCard icon={IconOxygenNewProject} url={'/create'}>
+                                创建工具
+                            </UrlCard>
                             {toolData &&
                                 Object.values(
                                     toolData.reduce((result: Record<string, ToolVo[]>, item) => {

From 843f47346a4bc5121441d331692f287bdc4792c9 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 30 Apr 2024 13:39:25 +0800
Subject: [PATCH 267/307] Fix(Tool): Fix the bug that can not load when switch
 between two tools

Fix the bug that can not load when switch between two tools. Optimize navigate when can not find tool.
---
 src/pages/System/Tools/Code.tsx    |  6 ++----
 src/pages/System/Tools/Execute.tsx |  6 ++----
 src/pages/Tools/Edit.tsx           |  6 ++----
 src/pages/Tools/Source.tsx         | 10 +++-------
 4 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/pages/System/Tools/Code.tsx b/src/pages/System/Tools/Code.tsx
index 8a34820..a5d8e89 100644
--- a/src/pages/System/Tools/Code.tsx
+++ b/src/pages/System/Tools/Code.tsx
@@ -62,9 +62,7 @@ const Code = () => {
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
-                        setTimeout(() => {
-                            navigateToRepository(navigate)
-                        }, 3000)
+                        navigateToRepository(navigate)
                         break
                     default:
                         void message.error('获取工具信息失败，请稍后重试')
@@ -78,7 +76,7 @@ const Code = () => {
 
     useEffect(() => {
         getTool()
-    }, [])
+    }, [id])
 
     return (
         <>
diff --git a/src/pages/System/Tools/Execute.tsx b/src/pages/System/Tools/Execute.tsx
index 9e35825..41455f7 100644
--- a/src/pages/System/Tools/Execute.tsx
+++ b/src/pages/System/Tools/Execute.tsx
@@ -51,9 +51,7 @@ const Execute = () => {
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
-                        setTimeout(() => {
-                            navigateToTools(navigate)
-                        }, 3000)
+                        navigateToTools(navigate)
                         break
                     default:
                         void message.error('获取工具信息失败，请稍后重试')
@@ -67,7 +65,7 @@ const Execute = () => {
 
     useEffect(() => {
         getTool()
-    }, [])
+    }, [id])
 
     return (
         <FitFullscreen data-component={'system-tools-execute'}>
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index 85dcc5f..aee142c 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -258,9 +258,7 @@ const Edit = () => {
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
-                        setTimeout(() => {
-                            navigateToRepository(navigate)
-                        }, 3000)
+                        navigateToRepository(navigate)
                         break
                     default:
                         void message.error('获取工具信息失败，请稍后重试')
@@ -327,7 +325,7 @@ const Edit = () => {
             return
         }
         getTool()
-    }, [])
+    }, [toolId, searchParams])
 
     const drawerToolbar = (
         <AntdSpace>
diff --git a/src/pages/Tools/Source.tsx b/src/pages/Tools/Source.tsx
index a229115..7c7244e 100644
--- a/src/pages/Tools/Source.tsx
+++ b/src/pages/Tools/Source.tsx
@@ -49,9 +49,7 @@ const Source = () => {
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
-                        setTimeout(() => {
-                            navigateToRepository(navigate)
-                        }, 3000)
+                        navigateToRepository(navigate)
                         break
                     default:
                         void message.error('获取工具信息失败，请稍后重试')
@@ -70,9 +68,7 @@ const Source = () => {
             return
         }
         if (username === '!' && !getLoginStatus()) {
-            setTimeout(() => {
-                navigateToRepository(navigate)
-            }, 3000)
+            navigateToRepository(navigate)
             return
         }
         if (username !== '!' && ver) {
@@ -84,7 +80,7 @@ const Source = () => {
             return
         }
         getTool()
-    }, [])
+    }, [username, toolId, ver, searchParams])
 
     return (
         <FitFullscreen data-component={'tools-source'}>

From 7b61a5fdb3272538ba020d6963bc9cfc4a8828d2 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 30 Apr 2024 13:42:36 +0800
Subject: [PATCH 268/307] Feat(Menu): Add tool menu via drag and drop

Drag and drop a tool card to add tool menu
---
 package-lock.json                             |  55 ++++-
 package.json                                  |   3 +
 src/assets/css/components/common/sidebar.scss |  41 +++-
 .../css/components/dnd/drag-handle.scss       |   5 +
 .../css/components/tools/repository-card.scss |  28 ++-
 .../css/components/tools/store-card.scss      |  57 +++--
 src/assets/css/pages/tools-framework.scss     |   7 +
 src/assets/css/pages/tools/index.scss         |   5 +-
 src/assets/css/pages/tools/store.scss         |   2 +-
 src/assets/css/pages/tools/user.scss          |   2 +-
 src/assets/svg/handle.svg                     |   1 +
 src/components/common/Sidebar/Item.tsx        |  15 +-
 src/components/common/Sidebar/Separate.tsx    |   2 +-
 src/components/dnd/DragHandle.tsx             |  27 +++
 src/components/dnd/Draggable.tsx              |  47 ++++
 src/components/dnd/DraggableOverlay.tsx       |  22 ++
 src/components/dnd/Droppable.tsx              |  16 ++
 src/components/dnd/HandleContext.ts           |  13 +
 src/components/dnd/Sortable.tsx               |  54 +++++
 src/components/tools/RepositoryCard.tsx       | 105 ++++----
 src/components/tools/StoreCard.tsx            | 168 +++++++------
 src/constants/common.constants.ts             |   2 +-
 src/global.d.ts                               |   8 +
 src/pages/Tools/Store.tsx                     |   7 +-
 src/pages/Tools/User.tsx                      |   7 +-
 src/pages/Tools/View.tsx                      |  13 +-
 src/pages/Tools/index.tsx                     | 125 +++++-----
 src/pages/ToolsFramework.tsx                  | 224 +++++++++++++-----
 src/util/common.tsx                           |  14 ++
 src/util/navigation.tsx                       |   8 +
 30 files changed, 785 insertions(+), 298 deletions(-)
 create mode 100644 src/assets/css/components/dnd/drag-handle.scss
 create mode 100644 src/assets/svg/handle.svg
 create mode 100644 src/components/dnd/DragHandle.tsx
 create mode 100644 src/components/dnd/Draggable.tsx
 create mode 100644 src/components/dnd/DraggableOverlay.tsx
 create mode 100644 src/components/dnd/Droppable.tsx
 create mode 100644 src/components/dnd/HandleContext.ts
 create mode 100644 src/components/dnd/Sortable.tsx

diff --git a/package-lock.json b/package-lock.json
index a47f8f0..4a7cbd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
       "version": "1.0.0-SNAPSHOT",
       "dependencies": {
         "@ant-design/icons": "^5.2.6",
+        "@dnd-kit/core": "^6.1.0",
+        "@dnd-kit/sortable": "^8.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@marsidev/react-turnstile": "^0.5.3",
         "@monaco-editor/react": "^4.6.0",
         "@typescript/ata": "^0.9.4",
@@ -584,6 +587,55 @@
         "node": ">=10"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz",
+      "integrity": "sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.1.0.tgz",
+      "integrity": "sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-8.0.0.tgz",
+      "integrity": "sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.1.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz",
@@ -7428,8 +7480,7 @@
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
diff --git a/package.json b/package.json
index 2e0d431..25380a4 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,9 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@marsidev/react-turnstile": "^0.5.3",
     "@monaco-editor/react": "^4.6.0",
     "@typescript/ata": "^0.9.4",
diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss
index 42190cd..6e3def4 100644
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -55,13 +55,14 @@
     .scroll {
       min-height: 0;
       flex: 1;
+      width: 100%;
     }
 
     ul {
-      > li {
+      > li, > div > li {
+        padding: 2px 14px;
         &.item {
           position: relative;
-          margin: 4px 14px;
           font-size: 1.4em;
 
           >.menu-bt {
@@ -78,6 +79,10 @@
               height: 40px;
               font-size: constants.$SIZE_ICON_SM;
               cursor: pointer;
+
+              img{
+                width: 100%;
+              }
             }
 
             a {
@@ -86,6 +91,7 @@
               height: 100%;
               width: 100%;
               transition: all 0.2s;
+              background-color: constants.$origin-color;
 
               .text {
                 flex: 1;
@@ -94,7 +100,12 @@
 
               &.active {
                 color: constants.$origin-color;
-                background-color: constants.$main-color !important;
+                background-color: constants.$main-color;
+
+                img {
+                  filter: drop-shadow(1000px 0 0 constants.$origin-color);
+                  transform: translate(-1000px);
+                }
               }
             }
           }
@@ -136,11 +147,11 @@
 
                   &.active {
                     color: constants.$origin-color;
-                    background-color: constants.$main-color !important;
+                    background-color: constants.$main-color;
                   }
                 }
 
-                &:hover a {
+                &:hover a:not(.active) {
                   background-color: constants.$background-color;
                 }
               }
@@ -149,7 +160,7 @@
 
           &:hover {
             >.menu-bt {
-              a {
+              a:not(.active) {
                 background-color: constants.$background-color;
               }
             }
@@ -171,6 +182,22 @@
           }
         }
       }
+
+      .delete {
+        .menu-bt {
+          border: {
+            width: 1px;
+            color: constants.$error-secondary-color;
+            style: dashed;
+          };
+          filter: drop-shadow(1000px 0 0 constants.$error-secondary-color);
+          transform: translate(-1000px);
+
+          > a {
+            background-color: transparent !important;
+          }
+        }
+      }
     }
   }
 
@@ -257,7 +284,7 @@
     }
 
     .menu-bt {
-      .text {
+      .text, .extend {
         display: none;
       }
     }
diff --git a/src/assets/css/components/dnd/drag-handle.scss b/src/assets/css/components/dnd/drag-handle.scss
new file mode 100644
index 0000000..22b1088
--- /dev/null
+++ b/src/assets/css/components/dnd/drag-handle.scss
@@ -0,0 +1,5 @@
+[data-component=component-drag-handle] {
+  background-color: transparent;
+  color: unset;
+  cursor: grab;
+}
diff --git a/src/assets/css/components/tools/repository-card.scss b/src/assets/css/components/tools/repository-card.scss
index 06d360e..b563c6f 100644
--- a/src/assets/css/components/tools/repository-card.scss
+++ b/src/assets/css/components/tools/repository-card.scss
@@ -1,6 +1,8 @@
 @use '@/assets/css/constants' as constants;
 
 [data-component=component-repository-card] {
+  height: 100%;
+
   .repository-card {
     width: 100%;
     height: 100%;
@@ -12,23 +14,25 @@
       flex: 0 0 auto;
     }
 
-    .version-select {
-      position: absolute;
-      top: 10px;
-      left: 10px;
-      width: 9em;
-    }
+    .header {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      padding: 10px;
 
-    .upgrade-bt {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      font-size: 1.8em;
+      .version-select {
+        width: 9em;
+        margin-right: auto;
+      }
+
+      >:not(.version-select) {
+        font-size: 1.6em;
+      }
     }
 
     .icon {
       display: flex;
-      padding-top: 50px;
+      padding-top: 10px;
       padding-bottom: 20px;
       color: constants.$production-color;
       font-size: constants.$SIZE_ICON_XL;
diff --git a/src/assets/css/components/tools/store-card.scss b/src/assets/css/components/tools/store-card.scss
index 15d0570..1652173 100644
--- a/src/assets/css/components/tools/store-card.scss
+++ b/src/assets/css/components/tools/store-card.scss
@@ -1,6 +1,7 @@
 @use '@/assets/css/constants' as constants;
 
 [data-component=component-store-card] {
+  height: 100%;
   cursor: pointer;
 
   .store-card {
@@ -14,10 +15,31 @@
       flex: 0 0 auto;
     }
 
+    .header {
+      display: flex;
+      width: 100%;
+      padding: 10px;
+      justify-content: space-between;
+
+      .version {
+        width: 0;
+      }
+
+      .operation {
+        display: flex;
+        font-size: 1.6em;
+        gap: 4px;
+        opacity: 0;
+
+        > *:hover {
+          color: constants.$font-secondary-color;
+        }
+      }
+    }
 
     .icon {
       display: flex;
-      padding-top: 40px;
+      padding-top: 10px;
       padding-bottom: 20px;
       color: constants.$production-color;
       font-size: constants.$SIZE_ICON_XL;
@@ -28,12 +50,6 @@
       }
     }
 
-    .version {
-      position: absolute;
-      left: 10px;
-      top: 10px;
-    }
-
     .info {
       padding-top: 20px;
 
@@ -43,8 +59,16 @@
       }
 
       .tool-desc {
-        margin-top: 10px;
+        margin: {
+          top: 10px;
+          left: auto;
+          right: auto;
+        };
         color: constants.$font-secondary-color;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-height: 40px;
+        width: 80%;
       }
     }
 
@@ -68,17 +92,16 @@
         align-items: center;
       }
     }
+  }
 
-    .operation {
-      display: flex;
-      position: absolute;
-      top: 10px;
-      right: 12px;
-      font-size: 1.6em;
-      gap: 4px;
+  :hover {
+    .header {
+      .version {
+        opacity: 0;
+      }
 
-      > *:hover {
-        color: constants.$font-secondary-color;
+      .operation {
+        opacity: 1;
       }
     }
   }
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 79d055f..137c254 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -4,6 +4,13 @@
 [data-component=tools-framework] {
   .left-panel {
     background-color: constants.$origin-color;
+
+    .menu-droppable {
+      display: flex;
+      min-height: 0;
+      flex: 1;
+      width: 100%;
+    }
   }
 
   .right-panel {
diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.scss
index db8f1a9..95a2196 100644
--- a/src/assets/css/pages/tools/index.scss
+++ b/src/assets/css/pages/tools/index.scss
@@ -11,7 +11,7 @@
       flex-wrap: wrap;
       justify-content: flex-start;
 
-      > .card-box {
+      > .card-box, > div {
         width: 180px;
         height: 290px;
         flex: 0 0 auto;
@@ -77,6 +77,7 @@
       flex-direction: row;
       align-items: center;
       gap: 20px;
+      margin-top: 20px;
 
       :first-child, :last-child {
         height: 0;
@@ -99,7 +100,7 @@
       flex-wrap: wrap;
       justify-content: flex-start;
 
-      > .card-box {
+      > .card-box, > div {
         width: 180px;
         height: 290px;
         flex: 0 0 auto;
diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.scss
index b87a3f5..3bead2e 100644
--- a/src/assets/css/pages/tools/store.scss
+++ b/src/assets/css/pages/tools/store.scss
@@ -26,7 +26,7 @@
     flex-wrap: wrap;
     justify-content: center;
 
-    > .card-box {
+    > div {
       width: 180px;
       height: 290px;
       flex: 0 0 auto;
diff --git a/src/assets/css/pages/tools/user.scss b/src/assets/css/pages/tools/user.scss
index 97eb6c0..54d0e74 100644
--- a/src/assets/css/pages/tools/user.scss
+++ b/src/assets/css/pages/tools/user.scss
@@ -68,7 +68,7 @@
       flex-wrap: wrap;
       justify-content: center;
 
-      > .card-box {
+      > div {
         width: 180px;
         height: 290px;
         flex: 0 0 auto;
diff --git a/src/assets/svg/handle.svg b/src/assets/svg/handle.svg
new file mode 100644
index 0000000..5d9156f
--- /dev/null
+++ b/src/assets/svg/handle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" /></svg>
diff --git a/src/components/common/Sidebar/Item.tsx b/src/components/common/Sidebar/Item.tsx
index 1031b15..7f6885d 100644
--- a/src/components/common/Sidebar/Item.tsx
+++ b/src/components/common/Sidebar/Item.tsx
@@ -3,10 +3,11 @@ import Icon from '@ant-design/icons'
 import Submenu from '@/components/common/Sidebar/Submenu'
 
 type ItemProps = {
-    icon?: IconComponent
+    icon?: IconComponent | string
     text?: string
     path: string
     children?: ReactNode
+    extend?: ReactNode
     end?: boolean
 }
 
@@ -42,9 +43,19 @@ const Item = (props: ItemProps) => {
                     }
                 >
                     <div className={'icon-box'}>
-                        {props.icon && <Icon className={'icon'} component={props.icon} />}
+                        {props.icon &&
+                            (typeof props.icon === 'string' ? (
+                                <img
+                                    className={'icon'}
+                                    src={`data:image/svg+xml;base64,${props.icon}`}
+                                    alt={'icon'}
+                                />
+                            ) : (
+                                <Icon className={'icon'} component={props.icon} />
+                            ))}
                     </div>
                     <span className={'text'}>{props.text}</span>
+                    <div className={'extend'}>{props.extend}</div>
                 </NavLink>
             </div>
             {props.children && (
diff --git a/src/components/common/Sidebar/Separate.tsx b/src/components/common/Sidebar/Separate.tsx
index 4c42aff..b1ffa0f 100644
--- a/src/components/common/Sidebar/Separate.tsx
+++ b/src/components/common/Sidebar/Separate.tsx
@@ -4,7 +4,7 @@ const Separate = ({
     className,
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
-    return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
+    return <div className={`separate${className ? ` ${className}` : ''}`} {...props} />
 }
 
 export default Separate
diff --git a/src/components/dnd/DragHandle.tsx b/src/components/dnd/DragHandle.tsx
new file mode 100644
index 0000000..eb81812
--- /dev/null
+++ b/src/components/dnd/DragHandle.tsx
@@ -0,0 +1,27 @@
+import { HandleContextInst } from '@/components/dnd/HandleContext'
+import Icon from '@ant-design/icons'
+import '@/assets/css/components/dnd/drag-handle.scss'
+
+interface DragHandleProps {
+    padding?: string | number
+}
+
+const DragHandle = ({ padding }: DragHandleProps) => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { attributes, listeners, ref } = useContext(HandleContextInst)
+
+    return (
+        <button
+            data-component={'component-drag-handle'}
+            style={{ padding }}
+            ref={ref}
+            className={'drag-handle'}
+            {...attributes}
+            {...listeners}
+        >
+            <Icon component={IconOxygenHandle} />
+        </button>
+    )
+}
+
+export default DragHandle
diff --git a/src/components/dnd/Draggable.tsx b/src/components/dnd/Draggable.tsx
new file mode 100644
index 0000000..756570d
--- /dev/null
+++ b/src/components/dnd/Draggable.tsx
@@ -0,0 +1,47 @@
+import { CSSProperties, PropsWithChildren } from 'react'
+import { useDraggable } from '@dnd-kit/core'
+import { HandleContext, HandleContextInst } from '@/components/dnd/HandleContext'
+
+interface DraggableProps extends PropsWithChildren {
+    id: string
+    data: ToolMenuItem
+}
+
+const Draggable = ({ id, data, children }: DraggableProps) => {
+    const {
+        attributes,
+        isDragging,
+        listeners,
+        setNodeRef: draggableRef,
+        setActivatorNodeRef,
+        transform
+    } = useDraggable({
+        id,
+        data
+    })
+    const context = useMemo<HandleContext>(
+        () => ({
+            attributes,
+            listeners,
+            ref: setActivatorNodeRef
+        }),
+        [attributes, listeners, setActivatorNodeRef]
+    )
+    const style: CSSProperties | undefined = transform
+        ? {
+              opacity: isDragging ? 0 : undefined,
+              transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+              zIndex: 10000
+          }
+        : undefined
+
+    return (
+        <HandleContextInst.Provider value={context}>
+            <div ref={draggableRef} style={style}>
+                {children}
+            </div>
+        </HandleContextInst.Provider>
+    )
+}
+
+export default Draggable
diff --git a/src/components/dnd/DraggableOverlay.tsx b/src/components/dnd/DraggableOverlay.tsx
new file mode 100644
index 0000000..0e4f3fd
--- /dev/null
+++ b/src/components/dnd/DraggableOverlay.tsx
@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react'
+import { defaultDropAnimationSideEffects, DragOverlay, DropAnimation } from '@dnd-kit/core'
+
+interface DraggableOverlayProps extends PropsWithChildren {
+    isDelete?: boolean
+}
+
+const dropAnimationConfig: DropAnimation = {
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+            active: {
+                opacity: '0.4'
+            }
+        }
+    })
+}
+
+const DraggableOverlay = ({ children }: DraggableOverlayProps) => {
+    return <DragOverlay dropAnimation={dropAnimationConfig}>{children}</DragOverlay>
+}
+
+export default DraggableOverlay
diff --git a/src/components/dnd/Droppable.tsx b/src/components/dnd/Droppable.tsx
new file mode 100644
index 0000000..08229b0
--- /dev/null
+++ b/src/components/dnd/Droppable.tsx
@@ -0,0 +1,16 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import { useDroppable } from '@dnd-kit/core'
+
+interface DroppableProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    id: string
+}
+
+const Droppable = ({ id, ...props }: DroppableProps) => {
+    const { setNodeRef: droppableRef } = useDroppable({
+        id
+    })
+
+    return <div {...props} ref={droppableRef} />
+}
+
+export default Droppable
diff --git a/src/components/dnd/HandleContext.ts b/src/components/dnd/HandleContext.ts
new file mode 100644
index 0000000..88420b2
--- /dev/null
+++ b/src/components/dnd/HandleContext.ts
@@ -0,0 +1,13 @@
+import { DraggableSyntheticListeners } from '@dnd-kit/core'
+
+export interface HandleContext {
+    attributes: Record<string, any>
+    listeners: DraggableSyntheticListeners
+    ref(node: HTMLElement | null): void
+}
+
+export const HandleContextInst = createContext<HandleContext>({
+    attributes: {},
+    listeners: undefined,
+    ref() {}
+})
diff --git a/src/components/dnd/Sortable.tsx b/src/components/dnd/Sortable.tsx
new file mode 100644
index 0000000..81cd0b7
--- /dev/null
+++ b/src/components/dnd/Sortable.tsx
@@ -0,0 +1,54 @@
+import { CSSProperties, PropsWithChildren } from 'react'
+import { useSortable } from '@dnd-kit/sortable'
+import { HandleContext, HandleContextInst } from '@/components/dnd/HandleContext'
+
+interface SortableProps extends PropsWithChildren {
+    id: string
+    data: ToolMenuItem
+    isDelete?: boolean
+}
+
+const Sortable = ({ id, data, isDelete, children }: SortableProps) => {
+    const {
+        attributes,
+        isDragging,
+        listeners,
+        setNodeRef: draggableRef,
+        setActivatorNodeRef,
+        transform,
+        transition
+    } = useSortable({
+        id,
+        data
+    })
+    const context = useMemo<HandleContext>(
+        () => ({
+            attributes,
+            listeners,
+            ref: setActivatorNodeRef
+        }),
+        [attributes, listeners, setActivatorNodeRef]
+    )
+    const style: CSSProperties | undefined = transform
+        ? {
+              opacity: isDragging ? 0.4 : undefined,
+              transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+              zIndex: 10000,
+              transition
+          }
+        : undefined
+
+    return (
+        <HandleContextInst.Provider value={context}>
+            <div
+                ref={draggableRef}
+                style={style}
+                className={isDragging && isDelete ? 'delete' : undefined}
+            >
+                {children}
+            </div>
+        </HandleContextInst.Provider>
+    )
+}
+
+export default Sortable
diff --git a/src/components/tools/RepositoryCard.tsx b/src/components/tools/RepositoryCard.tsx
index eebe6dd..bbbe8d6 100644
--- a/src/components/tools/RepositoryCard.tsx
+++ b/src/components/tools/RepositoryCard.tsx
@@ -1,14 +1,17 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import '@/assets/css/components/tools/repository-card.scss'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
+import Draggable from '@/components/dnd/Draggable'
+import DragHandle from '@/components/dnd/DragHandle.tsx'
 
 interface RepositoryCardProps
     extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    icon: ReactNode
+    icon: string
     toolName: string
     toolId: string
+    ver: string
     options?: TiltOptions
     onOpen?: () => void
     onEdit?: () => void
@@ -25,6 +28,7 @@ const RepositoryCard = ({
     icon,
     toolName,
     toolId,
+    ver,
     options = {
         reverse: true,
         max: 8,
@@ -48,51 +52,58 @@ const RepositoryCard = ({
     }, [options])
 
     return (
-        <Card
-            data-component={'component-repository-card'}
-            style={{ overflow: 'visible', ...style }}
-            ref={cardRef}
-            {...props}
-        >
-            <FlexBox className={'repository-card'}>
-                <div className={'icon'}>{icon}</div>
-                <div className={'info'}>
-                    {toolName && <div className={'tool-name'}>{toolName}</div>}
-                    {toolId && <div className={'tool-id'}>{`ID: ${toolId}`}</div>}
-                </div>
-                <div className={'operation'}>
-                    {onOpen && (
-                        <AntdButton onClick={onOpen} size={'small'} type={'primary'}>
-                            打开
-                        </AntdButton>
-                    )}
-                    {onEdit && onPublish && (
-                        <div className={'edit'}>
-                            <AntdButton.Group size={'small'}>
-                                <AntdButton onClick={onEdit}>编辑</AntdButton>
-                                <AntdButton onClick={onPublish}>发布</AntdButton>
-                            </AntdButton.Group>
-                        </div>
-                    )}
-                    {onSource && (
-                        <AntdButton size={'small'} onClick={onSource}>
-                            源码
-                        </AntdButton>
-                    )}
-                    {onCancelReview && (
-                        <AntdButton size={'small'} onClick={onCancelReview}>
-                            取消审核
-                        </AntdButton>
-                    )}
-                    {onDelete && (
-                        <AntdButton size={'small'} danger onClick={onDelete}>
-                            删除
-                        </AntdButton>
-                    )}
-                </div>
-                {children}
-            </FlexBox>
-        </Card>
+        <Draggable id={toolId} data={{ icon, toolName, toolId, authorUsername: '!', ver }}>
+            <Card
+                data-component={'component-repository-card'}
+                style={{ overflow: 'visible', ...style }}
+                ref={cardRef}
+                {...props}
+            >
+                <FlexBox className={'repository-card'}>
+                    <div className={'header'}>
+                        {children}
+                        <DragHandle />
+                    </div>
+                    <div className={'icon'}>
+                        <img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
+                    </div>
+                    <div className={'info'}>
+                        <div className={'tool-name'}>{toolName}</div>
+                        <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                    </div>
+                    <div className={'operation'}>
+                        {onOpen && (
+                            <AntdButton onClick={onOpen} size={'small'} type={'primary'}>
+                                打开
+                            </AntdButton>
+                        )}
+                        {onEdit && onPublish && (
+                            <div className={'edit'}>
+                                <AntdButton.Group size={'small'}>
+                                    <AntdButton onClick={onEdit}>编辑</AntdButton>
+                                    <AntdButton onClick={onPublish}>发布</AntdButton>
+                                </AntdButton.Group>
+                            </div>
+                        )}
+                        {onSource && (
+                            <AntdButton size={'small'} onClick={onSource}>
+                                源码
+                            </AntdButton>
+                        )}
+                        {onCancelReview && (
+                            <AntdButton size={'small'} onClick={onCancelReview}>
+                                取消审核
+                            </AntdButton>
+                        )}
+                        {onDelete && (
+                            <AntdButton size={'small'} danger onClick={onDelete}>
+                                删除
+                            </AntdButton>
+                        )}
+                    </div>
+                </FlexBox>
+            </Card>
+        </Draggable>
     )
 }
 
diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
index d500b36..0a77fb8 100644
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes, MouseEvent, ReactNode } from 'react'
+import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
@@ -10,9 +10,11 @@ import { r_tool_add_favorite, r_tool_remove_favorite } from '@/services/tool'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import { getUserId } from '@/util/auth.tsx'
+import DragHandle from '@/components/dnd/DragHandle.tsx'
+import Draggable from '@/components/dnd/Draggable.tsx'
 
 interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    icon: ReactNode
+    icon: string
     toolName: string
     toolId: string
     toolDesc: string
@@ -176,81 +178,101 @@ const StoreCard = ({
 
     return (
         <>
-            <Card
-                data-component={'component-store-card'}
-                style={{ overflow: 'visible', ...style }}
-                ref={cardRef}
-                {...props}
-                onClick={handleCardOnClick}
+            <Draggable
+                id={`${author.username}:${toolId}:${ver}`}
+                data={{ icon, toolName, toolId, authorUsername: author.username, ver: 'latest' }}
             >
-                <FlexBox className={'store-card'}>
-                    <div className={'icon'}>{icon}</div>
-                    <div className={'version'}>
-                        <AntdTag>
-                            {platform.slice(0, 1)}-{ver}
-                        </AntdTag>
-                    </div>
-                    <div className={'info'}>
-                        <div className={'tool-name'}>{toolName}</div>
-                        <div className={'tool-id'}>{`ID: ${toolId}`}</div>
-                        {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
-                    </div>
-                    {showAuthor && (
-                        <div className={'author'} onClick={handleOnClickAuthor}>
-                            <div className={'avatar'}>
-                                <AntdAvatar
-                                    src={
-                                        <AntdImage
-                                            preview={false}
-                                            src={`data:image/png;base64,${author.userInfo.avatar}`}
-                                            alt={'Avatar'}
-                                        />
-                                    }
-                                    style={{ background: COLOR_BACKGROUND }}
-                                />
+                <Card
+                    data-component={'component-store-card'}
+                    style={{ overflow: 'visible', ...style }}
+                    ref={cardRef}
+                    {...props}
+                    onClick={handleCardOnClick}
+                >
+                    <FlexBox className={'store-card'}>
+                        <div className={'header'}>
+                            <div className={'version'}>
+                                <AntdTag>
+                                    {platform.slice(0, 1)}-{ver}
+                                </AntdTag>
+                            </div>
+                            <div className={'operation'}>
+                                {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
+                                    <AntdTooltip title={'Android 端'}>
+                                        <Icon
+                                            component={IconOxygenMobile}
+                                            onClick={handleOnAndroidBtnClick}
+                                        />
+                                    </AntdTooltip>
+                                )}
+                                {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
+                                    <AntdTooltip title={'Web 端'}>
+                                        <Icon
+                                            component={IconOxygenBrowser}
+                                            onClick={handleOnWebBtnClick}
+                                        />
+                                    </AntdTooltip>
+                                )}
+                                {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
+                                    <AntdTooltip title={'桌面端'}>
+                                        <Icon
+                                            component={IconOxygenDesktop}
+                                            onClick={handleOnDesktopBtnClick}
+                                        />
+                                    </AntdTooltip>
+                                )}
+                                <AntdTooltip title={'源码'}>
+                                    <Icon
+                                        component={IconOxygenCode}
+                                        onClick={handleOnSourceBtnClick}
+                                    />
+                                </AntdTooltip>
+                                {author.id !== userId && (
+                                    <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
+                                        <Icon
+                                            component={
+                                                favorite_ ? IconOxygenStarFilled : IconOxygenStar
+                                            }
+                                            style={{
+                                                color: favorite_ ? COLOR_PRODUCTION : undefined
+                                            }}
+                                            onClick={handleOnStarBtnClick}
+                                        />
+                                    </AntdTooltip>
+                                )}
+                                <DragHandle />
                             </div>
-                            <AntdTooltip title={author.username}>
-                                <div className={'author-name'}>{author.userInfo.nickname}</div>
-                            </AntdTooltip>
                         </div>
-                    )}
-                    <div className={'operation'}>
-                        {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
-                            <AntdTooltip title={'Android 端'}>
-                                <Icon
-                                    component={IconOxygenMobile}
-                                    onClick={handleOnAndroidBtnClick}
-                                />
-                            </AntdTooltip>
+                        <div className={'icon'}>
+                            <img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
+                        </div>
+                        <div className={'info'}>
+                            <div className={'tool-name'}>{toolName}</div>
+                            <div className={'tool-id'}>{`ID: ${toolId}`}</div>
+                            {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
+                        </div>
+                        {showAuthor && (
+                            <div className={'author'} onClick={handleOnClickAuthor}>
+                                <div className={'avatar'}>
+                                    <AntdAvatar
+                                        src={
+                                            <AntdImage
+                                                preview={false}
+                                                src={`data:image/png;base64,${author.userInfo.avatar}`}
+                                                alt={'Avatar'}
+                                            />
+                                        }
+                                        style={{ background: COLOR_BACKGROUND }}
+                                    />
+                                </div>
+                                <AntdTooltip title={author.username}>
+                                    <div className={'author-name'}>{author.userInfo.nickname}</div>
+                                </AntdTooltip>
+                            </div>
                         )}
-                        {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
-                            <AntdTooltip title={'Web 端'}>
-                                <Icon component={IconOxygenBrowser} onClick={handleOnWebBtnClick} />
-                            </AntdTooltip>
-                        )}
-                        {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
-                            <AntdTooltip title={'桌面端'}>
-                                <Icon
-                                    component={IconOxygenDesktop}
-                                    onClick={handleOnDesktopBtnClick}
-                                />
-                            </AntdTooltip>
-                        )}
-                        <AntdTooltip title={'源码'}>
-                            <Icon component={IconOxygenCode} onClick={handleOnSourceBtnClick} />
-                        </AntdTooltip>
-                        {author.id !== userId && (
-                            <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
-                                <Icon
-                                    component={favorite_ ? IconOxygenStarFilled : IconOxygenStar}
-                                    style={{ color: favorite_ ? COLOR_PRODUCTION : undefined }}
-                                    onClick={handleOnStarBtnClick}
-                                />
-                            </AntdTooltip>
-                        )}
-                    </div>
-                </FlexBox>
-            </Card>
+                    </FlexBox>
+                </Card>
+            </Draggable>
             {contextHolder}
         </>
     )
diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts
index bde0fe0..e381d5f 100644
--- a/src/constants/common.constants.ts
+++ b/src/constants/common.constants.ts
@@ -1,7 +1,7 @@
 export const PRODUCTION_NAME = 'Oxygen Toolbox'
 export const STORAGE_TOKEN_KEY = 'JWT_TOKEN'
 export const STORAGE_USER_INFO_KEY = 'USER_INFO'
-export const STORAGE_FAVORITE_KEY = 'FAVORITE'
+export const STORAGE_TOOL_MENU_ITEM_KEY = 'TOOL_MENU_ITEM'
 export const COLOR_ORIGIN = 'white'
 export const COLOR_PRODUCTION = '#4E47BB'
 export const COLOR_MAIN = COLOR_PRODUCTION
diff --git a/src/global.d.ts b/src/global.d.ts
index 6af5e98..15496ad 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -654,3 +654,11 @@ interface ToolFavoriteAddRemoveParam {
     toolId: string
     platform: Platform
 }
+
+interface ToolMenuItem {
+    icon: string
+    toolName: string
+    toolId: string
+    authorUsername: string
+    ver: string
+}
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index f187751..eca029d 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -134,12 +134,7 @@ const Store = () => {
                                 return (
                                     <StoreCard
                                         key={firstTool!.id}
-                                        icon={
-                                            <img
-                                                src={`data:image/svg+xml;base64,${firstTool!.icon}`}
-                                                alt={'Icon'}
-                                            />
-                                        }
+                                        icon={firstTool!.icon}
                                         toolName={firstTool!.name}
                                         toolId={firstTool!.toolId}
                                         toolDesc={firstTool!.description}
diff --git a/src/pages/Tools/User.tsx b/src/pages/Tools/User.tsx
index 2124196..4fb4cd1 100644
--- a/src/pages/Tools/User.tsx
+++ b/src/pages/Tools/User.tsx
@@ -197,12 +197,7 @@ const User = () => {
                                     return (
                                         <StoreCard
                                             key={firstTool!.id}
-                                            icon={
-                                                <img
-                                                    src={`data:image/svg+xml;base64,${firstTool!.icon}`}
-                                                    alt={'Icon'}
-                                                />
-                                            }
+                                            icon={firstTool!.icon}
                                             toolName={firstTool!.name}
                                             toolId={firstTool!.toolId}
                                             toolDesc={firstTool!.description}
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index d61e981..ab10c0b 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -32,7 +32,10 @@ const View = () => {
                     .compile(files, importMap, toolVo.entryPoint)
                     .then((result) => {
                         const output = result.outputFiles[0].text
-                        setCompiledCode(`${output}\n${baseDist}`)
+                        setCompiledCode('')
+                        setTimeout(() => {
+                            setCompiledCode(`${output}\n${baseDist}`)
+                        })
                     })
                     .catch((reason) => {
                         void message.error(`编译失败：${reason}`)
@@ -72,9 +75,7 @@ const View = () => {
                         break
                     case DATABASE_NO_RECORD_FOUND:
                         void message.error('未找到指定工具')
-                        setTimeout(() => {
-                            navigateToRepository(navigate)
-                        }, 3000)
+                        navigateToRepository(navigate)
                         break
                     default:
                         void message.error('获取工具信息失败，请稍后重试')
@@ -103,11 +104,11 @@ const View = () => {
             return
         }
         if (username === '!' && !ver) {
-            navigateToView(navigate, '!', toolId!, platform as Platform)
+            navigateToView(navigate, '!', toolId!, platform as Platform, 'latest')
             return
         }
         getTool()
-    }, [])
+    }, [username, toolId, ver, searchParams])
 
     return (
         <FitFullscreen data-component={'tools-view'}>
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 9269bbb..1a3d848 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -166,9 +166,10 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
 
     return (
         <RepositoryCard
-            icon={<img src={`data:image/svg+xml;base64,${selectedTool.icon}`} alt={'Icon'} />}
+            icon={selectedTool.icon}
             toolName={selectedTool.name}
             toolId={selectedTool.toolId}
+            ver={selectedTool.ver}
             onOpen={handleOnOpenTool}
             onEdit={handleOnEditTool()}
             onSource={handleOnSourceTool()}
@@ -563,65 +564,71 @@ const Tools = () => {
                                 ))}
                             {hasNextPage && <LoadMoreCard onClick={handleOnLoadMore} />}
                         </FlexBox>
-                        <FlexBox className={'favorite-divider'}>
-                            <div />
-                            <div className={'divider-text'}>收藏</div>
-                            <div />
-                        </FlexBox>
-                        <FlexBox direction={'horizontal'} className={'star-content'}>
-                            {starToolData
-                                ?.reduce((previousValue: ToolVo[], currentValue) => {
-                                    if (
-                                        !previousValue.some(
-                                            (value) =>
-                                                value.author.id === currentValue.author.id &&
-                                                value.toolId === currentValue.toolId
-                                        )
-                                    ) {
-                                        previousValue.push(currentValue)
-                                    }
-                                    return previousValue
-                                }, [])
-                                .map((item) => {
-                                    const tools = starToolData.filter(
-                                        (value) =>
-                                            value.author.id === item.author.id &&
-                                            value.toolId === item.toolId
-                                    )
-                                    const webTool = tools.find((value) => value.platform === 'WEB')
-                                    const desktopTool = tools.find(
-                                        (value) => value.platform === 'DESKTOP'
-                                    )
-                                    const androidTool = tools.find(
-                                        (value) => value.platform === 'ANDROID'
-                                    )
-                                    const firstTool =
-                                        (checkDesktop()
-                                            ? desktopTool || webTool
-                                            : webTool || desktopTool) || androidTool
-
-                                    return (
-                                        <StoreCard
-                                            key={firstTool!.id}
-                                            icon={
-                                                <img
-                                                    src={`data:image/svg+xml;base64,${firstTool!.icon}`}
-                                                    alt={'Icon'}
-                                                />
+                        {starToolData.length ? (
+                            <>
+                                <FlexBox className={'favorite-divider'}>
+                                    <div />
+                                    <div className={'divider-text'}>收藏</div>
+                                    <div />
+                                </FlexBox>
+                                <FlexBox direction={'horizontal'} className={'star-content'}>
+                                    {starToolData
+                                        ?.reduce((previousValue: ToolVo[], currentValue) => {
+                                            if (
+                                                !previousValue.some(
+                                                    (value) =>
+                                                        value.author.id ===
+                                                            currentValue.author.id &&
+                                                        value.toolId === currentValue.toolId
+                                                )
+                                            ) {
+                                                previousValue.push(currentValue)
                                             }
-                                            toolName={firstTool!.name}
-                                            toolId={firstTool!.toolId}
-                                            toolDesc={firstTool!.description}
-                                            author={firstTool!.author}
-                                            ver={firstTool!.ver}
-                                            platform={firstTool!.platform}
-                                            supportPlatform={tools.map((value) => value.platform)}
-                                            favorite={firstTool!.favorite}
-                                        />
-                                    )
-                                })}
-                            {hasNextStarPage && <LoadMoreCard onClick={handleOnLoadMoreStar} />}
-                        </FlexBox>
+                                            return previousValue
+                                        }, [])
+                                        .map((item) => {
+                                            const tools = starToolData.filter(
+                                                (value) =>
+                                                    value.author.id === item.author.id &&
+                                                    value.toolId === item.toolId
+                                            )
+                                            const webTool = tools.find(
+                                                (value) => value.platform === 'WEB'
+                                            )
+                                            const desktopTool = tools.find(
+                                                (value) => value.platform === 'DESKTOP'
+                                            )
+                                            const androidTool = tools.find(
+                                                (value) => value.platform === 'ANDROID'
+                                            )
+                                            const firstTool =
+                                                (checkDesktop()
+                                                    ? desktopTool || webTool
+                                                    : webTool || desktopTool) || androidTool
+
+                                            return (
+                                                <StoreCard
+                                                    key={firstTool!.id}
+                                                    icon={firstTool!.icon}
+                                                    toolName={firstTool!.name}
+                                                    toolId={firstTool!.toolId}
+                                                    toolDesc={firstTool!.description}
+                                                    author={firstTool!.author}
+                                                    ver={firstTool!.ver}
+                                                    platform={firstTool!.platform}
+                                                    supportPlatform={tools.map(
+                                                        (value) => value.platform
+                                                    )}
+                                                    favorite={firstTool!.favorite}
+                                                />
+                                            )
+                                        })}
+                                    {hasNextStarPage && (
+                                        <LoadMoreCard onClick={handleOnLoadMoreStar} />
+                                    )}
+                                </FlexBox>
+                            </>
+                        ) : undefined}
                     </FlexBox>
                 </HideScrollbar>
             </FitFullscreen>
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 13bd59c..4b284cb 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -1,70 +1,184 @@
+import { DndContext, DragOverEvent, DragStartEvent } from '@dnd-kit/core'
+import Droppable from '@/components/dnd/Droppable'
+import type { DragEndEvent } from '@dnd-kit/core/dist/types'
 import '@/assets/css/pages/tools-framework.scss'
 import { tools } from '@/router/tools'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Sidebar from '@/components/common/Sidebar'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
+import { arrayMove, SortableContext } from '@dnd-kit/sortable'
+import { getViewPath } from '@/util/navigation.tsx'
+import Sortable from '@/components/dnd/Sortable.tsx'
+import DragHandle from '@/components/dnd/DragHandle.tsx'
+import DraggableOverlay from '@/components/dnd/DraggableOverlay.tsx'
+import { getToolMenuItem, saveToolMenuItem } from '@/util/common.tsx'
 
 const ToolsFramework = () => {
+    const [isDelete, setIsDelete] = useState(false)
+    const [toolMenuItem, setToolMenuItem] = useState<ToolMenuItem[]>(getToolMenuItem)
+    const [activeItem, setActiveItem] = useState<ToolMenuItem | null>(null)
+
+    const handleOnDragStart = ({ active }: DragStartEvent) => {
+        setActiveItem(active.data.current as ToolMenuItem)
+    }
+
+    const handleOnDragOver = ({ over }: DragOverEvent) => {
+        setIsDelete(over === null)
+    }
+
+    const handleOnDragEnd = ({ active, over }: DragEndEvent) => {
+        if (over && active.id !== over?.id) {
+            const activeIndex = toolMenuItem.findIndex(
+                ({ authorUsername, toolId, ver }) =>
+                    `${authorUsername}:${toolId}:${ver}` === active.id
+            )
+            const overIndex = toolMenuItem.findIndex(
+                ({ authorUsername, toolId, ver }) =>
+                    `${authorUsername}:${toolId}:${ver}` === over.id
+            )
+            setToolMenuItem(arrayMove(toolMenuItem, activeIndex, overIndex))
+        }
+
+        if (!over) {
+            setToolMenuItem(
+                toolMenuItem.filter(
+                    ({ authorUsername, toolId, ver }) =>
+                        `${authorUsername}:${toolId}:${ver}` !== active?.id
+                )
+            )
+        }
+
+        if (!active.data.current?.sortable && over) {
+            const newItem = active.data.current as ToolMenuItem
+            if (
+                toolMenuItem.findIndex(
+                    ({ authorUsername, toolId, ver }) =>
+                        authorUsername === newItem.authorUsername &&
+                        toolId === newItem.toolId &&
+                        ver === newItem.ver
+                ) === -1
+            ) {
+                setToolMenuItem([...toolMenuItem, newItem])
+            }
+        }
+
+        console.log('active', active)
+        console.log('over', over)
+
+        setActiveItem(null)
+    }
+
+    const handleOnDragCancel = () => {
+        setActiveItem(null)
+    }
+
+    useEffect(() => {
+        saveToolMenuItem(toolMenuItem)
+    }, [toolMenuItem])
+
     return (
         <>
             <FitFullscreen data-component={'tools-framework'} className={'flex-horizontal'}>
-                <div className={'left-panel'}>
-                    <Sidebar title={'氧工具'}>
-                        <Sidebar.ItemList>
-                            <Sidebar.Item
-                                end
-                                path={'/store'}
-                                icon={tools[0].icon}
-                                text={tools[0].name}
-                            />
-                            <Sidebar.Item
-                                end
-                                path={'/repository'}
-                                icon={tools[1].icon}
-                                text={tools[1].name}
-                            />
-                        </Sidebar.ItemList>
-                        <Sidebar.Separate style={{ marginBottom: 0 }} />
-                        <Sidebar.Scroll>
+                <DndContext
+                    onDragStart={handleOnDragStart}
+                    onDragOver={handleOnDragOver}
+                    onDragEnd={handleOnDragEnd}
+                    onDragCancel={handleOnDragCancel}
+                >
+                    <div className={'left-panel'}>
+                        <Sidebar title={'氧工具'}>
                             <Sidebar.ItemList>
-                                {tools.map((tool) => {
-                                    return tool.menu &&
-                                        tool.id !== 'tools-store' &&
-                                        tool.id !== 'tools-repository' ? (
-                                        <Sidebar.Item
-                                            path={tool.absolutePath}
-                                            icon={tool.icon}
-                                            text={tool.name}
-                                            key={tool.id}
-                                        >
-                                            {tool.children &&
-                                                tool.children.map((subTool) => {
-                                                    return (
-                                                        <Sidebar.Item
-                                                            path={subTool.absolutePath}
-                                                            text={subTool.name}
-                                                            key={subTool.id}
-                                                        />
-                                                    )
-                                                })}
-                                        </Sidebar.Item>
-                                    ) : undefined
-                                })}
+                                <Sidebar.Item
+                                    end
+                                    path={'/store'}
+                                    icon={tools[0].icon}
+                                    text={tools[0].name}
+                                />
+                                <Sidebar.Item
+                                    end
+                                    path={'/repository'}
+                                    icon={tools[1].icon}
+                                    text={tools[1].name}
+                                />
                             </Sidebar.ItemList>
-                        </Sidebar.Scroll>
-                    </Sidebar>
-                </div>
-                <div className={'right-panel'}>
-                    <Suspense
-                        fallback={
-                            <>
-                                <FullscreenLoadingMask />
-                            </>
-                        }
-                    >
-                        <Outlet />
-                    </Suspense>
-                </div>
+                            <Sidebar.Separate />
+                            <Droppable id={'menu'} className={'menu-droppable'}>
+                                <Sidebar.Scroll>
+                                    <Sidebar.ItemList>
+                                        <SortableContext
+                                            items={toolMenuItem.map(
+                                                ({ authorUsername, toolId, ver }) =>
+                                                    `${authorUsername}:${toolId}:${ver}`
+                                            )}
+                                        >
+                                            {toolMenuItem.map(
+                                                ({
+                                                    icon,
+                                                    toolName,
+                                                    toolId,
+                                                    authorUsername,
+                                                    ver
+                                                }) => (
+                                                    <Sortable
+                                                        id={`${authorUsername}:${toolId}:${ver}`}
+                                                        data={{
+                                                            icon,
+                                                            toolName,
+                                                            toolId,
+                                                            authorUsername,
+                                                            ver
+                                                        }}
+                                                        isDelete={isDelete}
+                                                    >
+                                                        <Sidebar.Item
+                                                            path={getViewPath(
+                                                                authorUsername,
+                                                                toolId,
+                                                                import.meta.env.VITE_PLATFORM,
+                                                                ver
+                                                            )}
+                                                            icon={icon}
+                                                            text={toolName}
+                                                            key={`${authorUsername}:${toolId}`}
+                                                            extend={<DragHandle padding={10} />}
+                                                        />
+                                                    </Sortable>
+                                                )
+                                            )}
+                                        </SortableContext>
+                                        <DraggableOverlay>
+                                            {activeItem && (
+                                                <Sidebar.Item
+                                                    path={getViewPath(
+                                                        activeItem.authorUsername,
+                                                        activeItem.toolId,
+                                                        import.meta.env.VITE_PLATFORM,
+                                                        activeItem.ver
+                                                    )}
+                                                    icon={activeItem.icon}
+                                                    text={activeItem.toolName}
+                                                    key={`${activeItem.authorUsername}:${activeItem.toolId}:${activeItem.ver}`}
+                                                    extend={<DragHandle padding={10} />}
+                                                />
+                                            )}
+                                        </DraggableOverlay>
+                                    </Sidebar.ItemList>
+                                </Sidebar.Scroll>
+                            </Droppable>
+                        </Sidebar>
+                    </div>
+                    <div className={'right-panel'}>
+                        <Suspense
+                            fallback={
+                                <>
+                                    <FullscreenLoadingMask />
+                                </>
+                            }
+                        >
+                            <Outlet />
+                        </Suspense>
+                    </div>
+                </DndContext>
             </FitFullscreen>
         </>
     )
diff --git a/src/util/common.tsx b/src/util/common.tsx
index f32740e..f6c6e9c 100644
--- a/src/util/common.tsx
+++ b/src/util/common.tsx
@@ -1,6 +1,8 @@
 import { createRoot } from 'react-dom/client'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 import { floor } from 'lodash'
+import { getLocalStorage, setLocalStorage } from '@/util/browser.tsx'
+import { STORAGE_TOOL_MENU_ITEM_KEY } from '@/constants/common.constants.ts'
 
 export const randomInt = (start: number, end: number) => {
     if (start > end) {
@@ -133,3 +135,15 @@ const formatByte = (size: number, unit: ByteUnit): string => {
 }
 
 export const checkDesktop = () => import.meta.env.VITE_PLATFORM === 'DESKTOP'
+
+export const saveToolMenuItem = (toolMenuItem: ToolMenuItem[]) => {
+    setLocalStorage(STORAGE_TOOL_MENU_ITEM_KEY, JSON.stringify(toolMenuItem))
+}
+
+export const getToolMenuItem = (): ToolMenuItem[] => {
+    const s = getLocalStorage(STORAGE_TOOL_MENU_ITEM_KEY)
+    if (!s) {
+        return []
+    }
+    return JSON.parse(s) as ToolMenuItem[]
+}
diff --git a/src/util/navigation.tsx b/src/util/navigation.tsx
index 088d636..fceb2fe 100644
--- a/src/util/navigation.tsx
+++ b/src/util/navigation.tsx
@@ -117,3 +117,11 @@ export const navigateToUser = (navigate: NavigateFunction, options?: NavigateOpt
 export const navigateToTools = (navigate: NavigateFunction, options?: NavigateOptions) => {
     navigate('/system/tools', options)
 }
+
+export const getViewPath = (
+    username: string,
+    toolId: string,
+    platform: Platform,
+    version?: string
+) =>
+    `/view/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`

From 870204db0aeef33d912fb78dcbdd1cf064e3eeee Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 30 Apr 2024 15:16:16 +0800
Subject: [PATCH 269/307] Refactor(Tool): Optimize use experience

Remove navigate delay. Clean out old code before setting up compile code.
---
 src/pages/System/Tools/Execute.tsx |  5 ++++-
 src/pages/Tools/Edit.tsx           | 24 ++++++------------------
 src/pages/Tools/View.tsx           |  5 ++---
 3 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/pages/System/Tools/Execute.tsx b/src/pages/System/Tools/Execute.tsx
index 41455f7..449dd13 100644
--- a/src/pages/System/Tools/Execute.tsx
+++ b/src/pages/System/Tools/Execute.tsx
@@ -25,7 +25,10 @@ const Execute = () => {
                 .compile(files, importMap, toolVo.entryPoint)
                 .then((result) => {
                     const output = result.outputFiles[0].text
-                    setCompiledCode(`${output}\n${baseDist}`)
+                    setCompiledCode('')
+                    setTimeout(() => {
+                        setCompiledCode(`${output}\n${baseDist}`)
+                    })
                 })
                 .catch((reason) => {
                     void message.error(`编译失败：${reason}`)
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index aee142c..b424d1d 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -118,15 +118,11 @@ const Edit = () => {
                         break
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
-                        setTimeout(() => {
-                            navigateToRepository(navigate)
-                        }, 3000)
+                        navigateToRepository(navigate)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
-                        setTimeout(() => {
-                            navigateToRepository(navigate)
-                        }, 3000)
+                        navigateToRepository(navigate)
                         break
                     default:
                         void message.error('保存失败，请稍后重试')
@@ -184,15 +180,11 @@ const Edit = () => {
                         break
                     case TOOL_UNDER_REVIEW:
                         void message.error('保存失败：工具审核中')
-                        setTimeout(() => {
-                            navigateToRepository(navigate)
-                        }, 3000)
+                        navigateToRepository(navigate)
                         break
                     case TOOL_HAS_BEEN_PUBLISHED:
                         void message.error('保存失败：工具已发布')
-                        setTimeout(() => {
-                            navigateToRepository(navigate)
-                        }, 3000)
+                        navigateToRepository(navigate)
                         break
                     default:
                         void message.error('保存失败，请稍后重试')
@@ -245,15 +237,11 @@ const Edit = () => {
                                 break
                             case 'PROCESSING':
                                 void message.warning('工具审核中，请勿修改')
-                                setTimeout(() => {
-                                    navigateToRepository(navigate)
-                                }, 3000)
+                                navigateToRepository(navigate)
                                 break
                             default:
                                 void message.warning('请先创建新版本后编辑工具')
-                                setTimeout(() => {
-                                    navigateToRepository(navigate)
-                                }, 3000)
+                                navigateToRepository(navigate)
                         }
                         break
                     case DATABASE_NO_RECORD_FOUND:
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index ab10c0b..e7e1c3b 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -94,9 +94,8 @@ const View = () => {
             return
         }
         if (username === '!' && !getLoginStatus()) {
-            setTimeout(() => {
-                navigateToRoot(navigate)
-            }, 3000)
+            void message.error('未登录')
+            navigateToRoot(navigate)
             return
         }
         if (username !== '!' && ver) {

From c481fcac2ce8dee0a10c6e65ad2f6b4d9a5ab609 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 30 Apr 2024 15:16:55 +0800
Subject: [PATCH 270/307] Refactor(Sign): Optimize navigate to login

---
 src/pages/Sign/Forget.tsx | 2 +-
 src/pages/Sign/Verify.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx
index dafa452..f9e3072 100644
--- a/src/pages/Sign/Forget.tsx
+++ b/src/pages/Sign/Forget.tsx
@@ -275,7 +275,7 @@ const Forget = () => {
                             找到了？
                             <a
                                 onClick={() =>
-                                    navigateToLogin(navigate, undefined, undefined, {
+                                    navigateToLogin(navigate, location.search, undefined, {
                                         replace: true
                                     })
                                 }
diff --git a/src/pages/Sign/Verify.tsx b/src/pages/Sign/Verify.tsx
index 0dd3a73..c21a6e2 100644
--- a/src/pages/Sign/Verify.tsx
+++ b/src/pages/Sign/Verify.tsx
@@ -32,7 +32,7 @@ const Verify = () => {
         }
 
         if (!getLoginStatus()) {
-            navigateToLogin(navigate, undefined, `${location.pathname}${location.search}`, {
+            navigateToLogin(navigate, location.search, undefined, {
                 replace: true
             })
             return

From af8e90109832d443f449ee462829ee014c2a0c0e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 30 Apr 2024 15:20:57 +0800
Subject: [PATCH 271/307] Refactor(Card): Optimize import

---
 src/components/common/UrlCard.tsx       | 4 ++--
 src/components/tools/RepositoryCard.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/UrlCard.tsx b/src/components/common/UrlCard.tsx
index 13abf64..9e55624 100644
--- a/src/components/common/UrlCard.tsx
+++ b/src/components/common/UrlCard.tsx
@@ -2,8 +2,8 @@ import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
 import Icon from '@ant-design/icons'
 import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
 import '@/assets/css/components/common/url-card.scss'
-import Card from '@/components/common/Card.tsx'
-import FlexBox from '@/components/common/FlexBox.tsx'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
 
 interface UrlCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     icon: IconComponent
diff --git a/src/components/tools/RepositoryCard.tsx b/src/components/tools/RepositoryCard.tsx
index bbbe8d6..31d57a1 100644
--- a/src/components/tools/RepositoryCard.tsx
+++ b/src/components/tools/RepositoryCard.tsx
@@ -4,7 +4,7 @@ import '@/assets/css/components/tools/repository-card.scss'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
 import Draggable from '@/components/dnd/Draggable'
-import DragHandle from '@/components/dnd/DragHandle.tsx'
+import DragHandle from '@/components/dnd/DragHandle'
 
 interface RepositoryCardProps
     extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {

From 929b2f3b91d97ba92e47dd8a8b2b36b99cf8796f Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 30 Apr 2024 15:22:54 +0800
Subject: [PATCH 272/307] Feat(Menu): Add drop mask

Add drop mask to menu. Optimize tool description.
---
 src/assets/css/components/dnd/drop-mask.scss  | 30 +++++++++++++++++++
 .../css/components/tools/store-card.scss      |  2 ++
 src/assets/css/pages/tools-framework.scss     |  1 +
 src/assets/svg/receive.svg                    |  1 +
 src/components/dnd/DropMask.tsx               | 14 +++++++++
 src/components/tools/StoreCard.tsx            | 30 ++++++++++++++-----
 src/pages/ToolsFramework.tsx                  | 24 ++++++++-------
 src/util/common.tsx                           | 13 ++++++--
 8 files changed, 95 insertions(+), 20 deletions(-)
 create mode 100644 src/assets/css/components/dnd/drop-mask.scss
 create mode 100644 src/assets/svg/receive.svg
 create mode 100644 src/components/dnd/DropMask.tsx

diff --git a/src/assets/css/components/dnd/drop-mask.scss b/src/assets/css/components/dnd/drop-mask.scss
new file mode 100644
index 0000000..f721b1b
--- /dev/null
+++ b/src/assets/css/components/dnd/drop-mask.scss
@@ -0,0 +1,30 @@
+@use "@/assets/css/constants" as constants;
+
+[data-component=component-drop-mask] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: {
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
+  };
+  background-color: constants.$origin-color;
+
+  .drop-mask-border {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    border: {
+      width: 2px;
+      color: constants.$font-secondary-color;
+      style: dashed;
+      radius: 8px;
+    };
+    font-size: 1.8em;
+  }
+}
diff --git a/src/assets/css/components/tools/store-card.scss b/src/assets/css/components/tools/store-card.scss
index 1652173..c42f825 100644
--- a/src/assets/css/components/tools/store-card.scss
+++ b/src/assets/css/components/tools/store-card.scss
@@ -23,6 +23,7 @@
 
       .version {
         width: 0;
+        transition: all 0.2s;
       }
 
       .operation {
@@ -30,6 +31,7 @@
         font-size: 1.6em;
         gap: 4px;
         opacity: 0;
+        transition: all 0.2s;
 
         > *:hover {
           color: constants.$font-secondary-color;
diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 137c254..9fd7751 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -7,6 +7,7 @@
 
     .menu-droppable {
       display: flex;
+      position: relative;
       min-height: 0;
       flex: 1;
       width: 100%;
diff --git a/src/assets/svg/receive.svg b/src/assets/svg/receive.svg
new file mode 100644
index 0000000..654ce96
--- /dev/null
+++ b/src/assets/svg/receive.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M927.929032 640.065509a31.994541 31.994541 0 0 0-31.994541 31.994541v127.978163c0 52.918971-43.064652 95.983623-95.983623 95.983623h-575.901736c-52.918971 0-95.983623-43.064652-95.983623-95.983623v-127.978163a31.994541 31.994541 0 0 0-63.989082 0v127.978163C64.076427 888.279157 135.872177 960.010918 224.049132 960.010918h575.901736c88.240944 0 159.972705-71.731761 159.972705-159.972705v-127.978163a31.994541 31.994541 0 0 0-31.994541-31.994541z" /><path d="M412.113043 777.386079c18.684812 18.684812 43.256619 28.027218 67.892416 28.027217s49.143615-9.342406 67.892416-28.027217l274.705128-274.705129A31.930552 31.930552 0 0 0 799.950868 448.098263h-159.140846a629.524587 629.524587 0 0 1 44.408423-202.909378L765.652721 44.0712a32.122519 32.122519 0 0 0-7.998636-35.449951 32.122519 32.122519 0 0 0-35.961864-5.055137L566.582687 81.120879A443.124392 443.124392 0 0 0 321.184558 448.098263H160.06005a31.994541 31.994541 0 0 0-22.652135 54.646676l274.705128 274.64114zM352.027295 512.023356a31.994541 31.994541 0 0 0 31.994541-31.994541A379.711212 379.711212 0 0 1 595.185806 138.391107l79.858375-39.929187-49.207604 122.923026A692.7458 692.7458 0 0 0 575.989082 480.092804a31.994541 31.994541 0 0 0 31.994541 31.994541h114.732424l-220.058453 220.058453a31.994541 31.994541 0 0 1-45.240281 0L237.294872 512.087345 352.027295 512.023356z" /></svg>
diff --git a/src/components/dnd/DropMask.tsx b/src/components/dnd/DropMask.tsx
new file mode 100644
index 0000000..48428b8
--- /dev/null
+++ b/src/components/dnd/DropMask.tsx
@@ -0,0 +1,14 @@
+import '@/assets/css/components/dnd/drop-mask.scss'
+import Icon from '@ant-design/icons'
+
+const DropMask = () => {
+    return (
+        <div data-component={'component-drop-mask'}>
+            <div className={'drop-mask-border'}>
+                <Icon component={IconOxygenReceive} />
+            </div>
+        </div>
+    )
+}
+
+export default DropMask
diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
index 0a77fb8..375553c 100644
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -4,14 +4,19 @@ import protocolCheck from 'custom-protocol-check'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/tools/store-card.scss'
 import { COLOR_BACKGROUND, COLOR_MAIN, COLOR_PRODUCTION } from '@/constants/common.constants'
-import { checkDesktop } from '@/util/common'
-import { navigateToSource, navigateToStore, navigateToView } from '@/util/navigation'
+import { checkDesktop, omitText } from '@/util/common'
+import { getLoginStatus, getUserId } from '@/util/auth'
+import {
+    navigateToLogin,
+    navigateToSource,
+    navigateToStore,
+    navigateToView
+} from '@/util/navigation'
 import { r_tool_add_favorite, r_tool_remove_favorite } from '@/services/tool'
 import Card from '@/components/common/Card'
 import FlexBox from '@/components/common/FlexBox'
-import { getUserId } from '@/util/auth.tsx'
-import DragHandle from '@/components/dnd/DragHandle.tsx'
-import Draggable from '@/components/dnd/Draggable.tsx'
+import DragHandle from '@/components/dnd/DragHandle'
+import Draggable from '@/components/dnd/Draggable'
 
 interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     icon: string
@@ -58,7 +63,9 @@ const StoreCard = ({
 
     useEffect(() => {
         cardRef.current && VanillaTilt.init(cardRef.current, options)
-        getUserId().then((value) => setUserId(value))
+        if (getLoginStatus()) {
+            void getUserId().then((value) => setUserId(value))
+        }
     }, [options])
 
     const handleCardOnClick = () => {
@@ -99,6 +106,10 @@ const StoreCard = ({
 
     const handleOnStarBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
+        if (!getLoginStatus()) {
+            navigateToLogin(navigate, undefined, `${location.pathname}${location.search}`)
+            return
+        }
         if (favorite_) {
             void r_tool_remove_favorite({
                 authorId: author.id,
@@ -249,7 +260,12 @@ const StoreCard = ({
                         <div className={'info'}>
                             <div className={'tool-name'}>{toolName}</div>
                             <div className={'tool-id'}>{`ID: ${toolId}`}</div>
-                            {toolDesc && <div className={'tool-desc'}>{`简介：${toolDesc}`}</div>}
+                            {toolDesc && (
+                                <div
+                                    className={'tool-desc'}
+                                    title={toolDesc}
+                                >{`简介：${omitText(toolDesc, 18)}`}</div>
+                            )}
                         </div>
                         {showAuthor && (
                             <div className={'author'} onClick={handleOnClickAuthor}>
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 4b284cb..698698a 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -1,25 +1,30 @@
 import { DndContext, DragOverEvent, DragStartEvent } from '@dnd-kit/core'
-import Droppable from '@/components/dnd/Droppable'
+import { arrayMove, SortableContext } from '@dnd-kit/sortable'
 import type { DragEndEvent } from '@dnd-kit/core/dist/types'
 import '@/assets/css/pages/tools-framework.scss'
 import { tools } from '@/router/tools'
+import { getToolMenuItem, saveToolMenuItem } from '@/util/common'
+import { getViewPath } from '@/util/navigation'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Sidebar from '@/components/common/Sidebar'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
-import { arrayMove, SortableContext } from '@dnd-kit/sortable'
-import { getViewPath } from '@/util/navigation.tsx'
-import Sortable from '@/components/dnd/Sortable.tsx'
-import DragHandle from '@/components/dnd/DragHandle.tsx'
-import DraggableOverlay from '@/components/dnd/DraggableOverlay.tsx'
-import { getToolMenuItem, saveToolMenuItem } from '@/util/common.tsx'
+import Sortable from '@/components/dnd/Sortable'
+import DragHandle from '@/components/dnd/DragHandle'
+import DraggableOverlay from '@/components/dnd/DraggableOverlay'
+import DropMask from '@/components/dnd/DropMask'
+import Droppable from '@/components/dnd/Droppable'
 
 const ToolsFramework = () => {
     const [isDelete, setIsDelete] = useState(false)
     const [toolMenuItem, setToolMenuItem] = useState<ToolMenuItem[]>(getToolMenuItem)
     const [activeItem, setActiveItem] = useState<ToolMenuItem | null>(null)
+    const [showDropMask, setShowDropMask] = useState(false)
 
     const handleOnDragStart = ({ active }: DragStartEvent) => {
         setActiveItem(active.data.current as ToolMenuItem)
+        if (!active.data.current?.sortable) {
+            setShowDropMask(true)
+        }
     }
 
     const handleOnDragOver = ({ over }: DragOverEvent) => {
@@ -62,10 +67,8 @@ const ToolsFramework = () => {
             }
         }
 
-        console.log('active', active)
-        console.log('over', over)
-
         setActiveItem(null)
+        setShowDropMask(false)
     }
 
     const handleOnDragCancel = () => {
@@ -164,6 +167,7 @@ const ToolsFramework = () => {
                                         </DraggableOverlay>
                                     </Sidebar.ItemList>
                                 </Sidebar.Scroll>
+                                {showDropMask && <DropMask />}
                             </Droppable>
                         </Sidebar>
                     </div>
diff --git a/src/util/common.tsx b/src/util/common.tsx
index f6c6e9c..fe98bb4 100644
--- a/src/util/common.tsx
+++ b/src/util/common.tsx
@@ -1,8 +1,8 @@
 import { createRoot } from 'react-dom/client'
-import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 import { floor } from 'lodash'
-import { getLocalStorage, setLocalStorage } from '@/util/browser.tsx'
-import { STORAGE_TOOL_MENU_ITEM_KEY } from '@/constants/common.constants.ts'
+import { STORAGE_TOOL_MENU_ITEM_KEY } from '@/constants/common.constants'
+import { getLocalStorage, setLocalStorage } from '@/util/browser'
+import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
 
 export const randomInt = (start: number, end: number) => {
     if (start > end) {
@@ -147,3 +147,10 @@ export const getToolMenuItem = (): ToolMenuItem[] => {
     }
     return JSON.parse(s) as ToolMenuItem[]
 }
+
+export const omitText = (text: string, length: number) => {
+    if (text.length <= length) {
+        return text
+    }
+    return `${text.substring(0, length)}...`
+}

From c5ab4e242d2c70131813411ec383df4e302a5291 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 30 Apr 2024 16:18:11 +0800
Subject: [PATCH 273/307] Fix(Menu): Fix submenu style exception

Fix submenu style exception. Optimize menu stylesheet
---
 src/assets/css/components/common/sidebar.scss | 26 +++++++++++++------
 src/components/common/Sidebar/Item.tsx        | 11 ++++----
 src/components/tools/StoreCard.tsx            |  2 +-
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss
index 6e3def4..c456daf 100644
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -27,6 +27,7 @@
       font-size: constants.$SIZE_ICON_SM;
       border-radius: 8px;
       cursor: pointer;
+
       span {
         transform: rotateZ(180deg);
         transition: all .3s;
@@ -61,11 +62,12 @@
     ul {
       > li, > div > li {
         padding: 2px 14px;
+
         &.item {
           position: relative;
-          font-size: 1.4em;
+          font-size: 1rem;
 
-          >.menu-bt {
+          > .menu-bt {
             border-radius: 8px;
             overflow: hidden;
             height: 40px;
@@ -80,7 +82,7 @@
               font-size: constants.$SIZE_ICON_SM;
               cursor: pointer;
 
-              img{
+              img {
                 width: 100%;
               }
             }
@@ -96,6 +98,9 @@
               .text {
                 flex: 1;
                 padding-left: 8px;
+                width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
               }
 
               &.active {
@@ -113,7 +118,7 @@
           .submenu {
             visibility: hidden;
             position: fixed;
-            padding-left: 20px;
+            padding-left: 10px;
             z-index: 10000;
             animation: 0.1s ease forwards;
             @include mixins.unique-keyframes {
@@ -134,11 +139,13 @@
               padding: 10px 10px;
               background-color: constants.$origin-color;
               border-radius: 8px;
+              box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1);
 
               .item {
                 border-radius: 8px;
                 white-space: nowrap;
                 overflow: hidden;
+                padding: 0;
 
                 a {
                   display: block;
@@ -159,7 +166,7 @@
           }
 
           &:hover {
-            >.menu-bt {
+            > .menu-bt {
               a:not(.active) {
                 background-color: constants.$background-color;
               }
@@ -249,7 +256,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      a{
+      a {
         color: constants.$main-color;
         text-decoration: underline;
       }
@@ -278,6 +285,7 @@
           transition: all .3s;
         }
       }
+
       .text {
         display: none;
       }
@@ -299,6 +307,7 @@
 
     .footer {
       position: relative;
+
       .text {
         display: none;
       }
@@ -309,7 +318,7 @@
         padding-left: 6px;
         left: 100%;
         z-index: 1000;
-        box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
+        box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
 
         .content {
           padding: 8px;
@@ -318,6 +327,7 @@
 
           .icon-exit {
             padding: 4px 8px;
+
             &:hover {
               border-radius: 8px;
               background-color: constants.$background-color;
@@ -326,7 +336,7 @@
         }
 
         &.hide {
-          display: none!important;
+          display: none !important;
         }
       }
 
diff --git a/src/components/common/Sidebar/Item.tsx b/src/components/common/Sidebar/Item.tsx
index 7f6885d..74ebfa0 100644
--- a/src/components/common/Sidebar/Item.tsx
+++ b/src/components/common/Sidebar/Item.tsx
@@ -42,9 +42,9 @@ const Item = (props: ItemProps) => {
                         isPending ? 'pending' : isActive ? 'active' : ''
                     }
                 >
-                    <div className={'icon-box'}>
-                        {props.icon &&
-                            (typeof props.icon === 'string' ? (
+                    {props.icon && (
+                        <div className={'icon-box'}>
+                            {typeof props.icon === 'string' ? (
                                 <img
                                     className={'icon'}
                                     src={`data:image/svg+xml;base64,${props.icon}`}
@@ -52,8 +52,9 @@ const Item = (props: ItemProps) => {
                                 />
                             ) : (
                                 <Icon className={'icon'} component={props.icon} />
-                            ))}
-                    </div>
+                            )}
+                        </div>
+                    )}
                     <span className={'text'}>{props.text}</span>
                     <div className={'extend'}>{props.extend}</div>
                 </NavLink>
diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
index 375553c..5997a71 100644
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -191,7 +191,7 @@ const StoreCard = ({
         <>
             <Draggable
                 id={`${author.username}:${toolId}:${ver}`}
-                data={{ icon, toolName, toolId, authorUsername: author.username, ver: 'latest' }}
+                data={{ icon, toolName, toolId, authorUsername: author.username, ver: '' }}
             >
                 <Card
                     data-component={'component-store-card'}

From 0ca5d8fc5277d42dc8536d030aa9f5b2aa3c549e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 30 Apr 2024 16:22:19 +0800
Subject: [PATCH 274/307] Refactor(StoreCard): Remove tooltip

Remove tooltip from author info
---
 src/components/tools/StoreCard.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
index 5997a71..63bd8d9 100644
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -281,9 +281,7 @@ const StoreCard = ({
                                         style={{ background: COLOR_BACKGROUND }}
                                     />
                                 </div>
-                                <AntdTooltip title={author.username}>
-                                    <div className={'author-name'}>{author.userInfo.nickname}</div>
-                                </AntdTooltip>
+                                <div className={'author-name'}>{author.userInfo.nickname}</div>
                             </div>
                         )}
                     </FlexBox>

From 80bec52fcdbcf18cbe52c0b77b5e9e714191dd1d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 May 2024 16:12:57 +0800
Subject: [PATCH 275/307] Refactor(Modal): Optimize modal code

---
 src/pages/Sign/SignIn.tsx          |  2 +-
 src/pages/System/Settings/Mail.tsx |  2 +-
 src/pages/Tools/index.tsx          | 11 +++++++----
 src/pages/User/index.tsx           | 10 +++++-----
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index 1812be6..a81563a 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -112,8 +112,8 @@ const SignIn = () => {
                     case PERMISSION_NEED_TWO_FACTOR:
                         twoFactorForm.resetFields()
                         void modal.confirm({
-                            title: '双因素验证',
                             centered: true,
+                            title: '双因素验证',
                             footer: (_, { OkBtn, CancelBtn }) => (
                                 <>
                                     <OkBtn />
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index 205474b..68224ba 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -16,9 +16,9 @@ const Mail = () => {
 
     const handleOnTest = () => {
         void modal.confirm({
-            title: '发送测试邮件',
             centered: true,
             maskClosable: true,
+            title: '发送测试邮件',
             footer: (_, { OkBtn, CancelBtn }) => (
                 <>
                     <OkBtn />
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 1a3d848..78aef88 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -219,8 +219,9 @@ const Tools = () => {
     const handleOnDeleteTool = (tool: ToolVo) => {
         modal
             .confirm({
-                title: '删除',
+                centered: true,
                 maskClosable: true,
+                title: '删除',
                 content: `确定删除工具 ${tool.toolId}:${tool.platform.slice(0, 1)}${tool.platform.slice(1).toLowerCase()}:${tool.ver} 吗？`
             })
             .then(
@@ -249,9 +250,9 @@ const Tools = () => {
 
     const handleOnUpgradeTool = (tool: ToolVo) => {
         void modal.confirm({
-            title: '更新工具',
             centered: true,
             maskClosable: true,
+            title: '更新工具',
             footer: (_, { OkBtn, CancelBtn }) => (
                 <>
                     <OkBtn />
@@ -361,8 +362,9 @@ const Tools = () => {
     const handleOnSubmitTool = (tool: ToolVo) => {
         modal
             .confirm({
-                title: '提交审核',
+                centered: true,
                 maskClosable: true,
+                title: '提交审核',
                 content: `确定提交审核工具 ${tool.name}:${tool.ver} 吗？`
             })
             .then(
@@ -400,8 +402,9 @@ const Tools = () => {
     const handleOnCancelTool = (tool: ToolVo) => {
         modal
             .confirm({
-                title: '取消审核',
+                centered: true,
                 maskClosable: true,
+                title: '取消审核',
                 content: `确定取消审核工具 ${tool.name}:${tool.ver} 吗？`
             })
             .then(
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index 7cf28a2..b4415be 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -89,6 +89,8 @@ const User = () => {
         changePasswordForm.resetFields()
 
         void modal.confirm({
+            centered: true,
+            maskClosable: true,
             icon: <></>,
             title: (
                 <>
@@ -99,8 +101,6 @@ const User = () => {
                     修改密码
                 </>
             ),
-            centered: true,
-            maskClosable: true,
             footer: (_, { OkBtn, CancelBtn }) => (
                 <>
                     <OkBtn />
@@ -220,10 +220,10 @@ const User = () => {
             twoFactorForm.resetFields()
             if (enable) {
                 void modal.confirm({
-                    title: '双因素',
                     centered: true,
                     maskClosable: true,
                     focusTriggerAfterClose: false,
+                    title: '双因素',
                     footer: (_, { OkBtn, CancelBtn }) => (
                         <>
                             <OkBtn />
@@ -233,9 +233,9 @@ const User = () => {
                     content: '确定解除双因素？',
                     onOk: () => {
                         void modal.confirm({
-                            title: '解除双因素',
                             centered: true,
                             maskClosable: true,
+                            title: '解除双因素',
                             footer: (_, { OkBtn, CancelBtn }) => (
                                 <>
                                     <OkBtn />
@@ -313,9 +313,9 @@ const User = () => {
                         const response = res.data
                         if (response.success) {
                             void modal.confirm({
-                                title: '绑定双因素',
                                 centered: true,
                                 maskClosable: true,
+                                title: '绑定双因素',
                                 footer: (_, { OkBtn, CancelBtn }) => (
                                     <>
                                         <OkBtn />

From 6e4e5ed9aa2a7578065499fe53e4d8c29d6617d0 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 May 2024 17:48:12 +0800
Subject: [PATCH 276/307] Fix(ToolBase and ToolTemplate): Optimize panel side

---
 src/assets/css/pages/system/tools/base.scss   |  1 +
 .../css/pages/system/tools/template.scss      | 43 +++++++++++++++++++
 src/pages/System/Tools/Template.tsx           |  4 +-
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/css/pages/system/tools/template.scss

diff --git a/src/assets/css/pages/system/tools/base.scss b/src/assets/css/pages/system/tools/base.scss
index bab7210..e23e257 100644
--- a/src/assets/css/pages/system/tools/base.scss
+++ b/src/assets/css/pages/system/tools/base.scss
@@ -13,6 +13,7 @@
     }
 
     >*:first-child {
+      width: 0;
       height: fit-content;
     }
 
diff --git a/src/assets/css/pages/system/tools/template.scss b/src/assets/css/pages/system/tools/template.scss
new file mode 100644
index 0000000..dacf2c0
--- /dev/null
+++ b/src/assets/css/pages/system/tools/template.scss
@@ -0,0 +1,43 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=system-tools-template] {
+  .root-content {
+    padding: 20px;
+    gap: 10px;
+    height: 100%;
+    width: 100%;
+
+    .has-edited::after {
+      content: '*';
+      color: constants.$font-secondary-color;
+    }
+
+    >*:first-child {
+      width: 0;
+      height: fit-content;
+    }
+
+    > *:nth-child(2) {
+      position: sticky;
+      top: 20px;
+      height: calc(100vh - 40px);
+    }
+
+    .close-editor-btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background-color: constants.$font-secondary-color;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      color: white;
+      opacity: 0.6;
+      box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
+      cursor: pointer;
+    }
+  }
+}
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index bf7d6b0..1a04639 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -1,5 +1,5 @@
 import Icon from '@ant-design/icons'
-import '@/assets/css/pages/system/tools/base.scss'
+import '@/assets/css/pages/system/tools/template.scss'
 import {
     COLOR_PRODUCTION,
     DATABASE_DELETE_SUCCESS,
@@ -1021,7 +1021,7 @@ const Template = () => {
 
     return (
         <>
-            <FitFullscreen data-component={'system-tools-base'}>
+            <FitFullscreen data-component={'system-tools-template'}>
                 <HideScrollbar>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Card>

From 2f70ae8ced9e4ae340892a428cd156d6a8a4f5c0 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 May 2024 18:06:26 +0800
Subject: [PATCH 277/307] Fix(ToolExecute and ToolView): Fix the bug that can
 not load tool

Fix the bug that can not load tool when switch tool
---
 src/pages/System/Tools/Execute.tsx | 2 +-
 src/pages/Tools/View.tsx           | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/pages/System/Tools/Execute.tsx b/src/pages/System/Tools/Execute.tsx
index 449dd13..ca8c277 100644
--- a/src/pages/System/Tools/Execute.tsx
+++ b/src/pages/System/Tools/Execute.tsx
@@ -28,7 +28,7 @@ const Execute = () => {
                     setCompiledCode('')
                     setTimeout(() => {
                         setCompiledCode(`${output}\n${baseDist}`)
-                    })
+                    }, 100)
                 })
                 .catch((reason) => {
                     void message.error(`编译失败：${reason}`)
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index e7e1c3b..c965b37 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -35,7 +35,7 @@ const View = () => {
                         setCompiledCode('')
                         setTimeout(() => {
                             setCompiledCode(`${output}\n${baseDist}`)
-                        })
+                        }, 100)
                     })
                     .catch((reason) => {
                         void message.error(`编译失败：${reason}`)
@@ -47,7 +47,10 @@ const View = () => {
             try {
                 const baseDist = base64ToStr(toolVo.base.dist.data!)
                 const dist = base64ToStr(toolVo.dist.data!)
-                setCompiledCode(`${dist}\n${baseDist}`)
+                setCompiledCode('')
+                setTimeout(() => {
+                    setCompiledCode(`${dist}\n${baseDist}`)
+                }, 100)
             } catch (e) {
                 void message.error('载入工具失败')
             }

From de9d1b4b74428293fd2e0e1d5651ceede0f89af5 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 May 2024 18:09:37 +0800
Subject: [PATCH 278/307] Feat(Menu): Support multi-platform

Support add multi-platform tool to menu
---
 src/components/tools/RepositoryCard.tsx |  7 ++++-
 src/components/tools/StoreCard.tsx      | 15 +++++++---
 src/global.d.ts                         |  1 +
 src/pages/Tools/index.tsx               |  1 +
 src/pages/ToolsFramework.tsx            | 37 +++++++++++++++----------
 5 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/src/components/tools/RepositoryCard.tsx b/src/components/tools/RepositoryCard.tsx
index 31d57a1..656bcc4 100644
--- a/src/components/tools/RepositoryCard.tsx
+++ b/src/components/tools/RepositoryCard.tsx
@@ -12,6 +12,7 @@ interface RepositoryCardProps
     toolName: string
     toolId: string
     ver: string
+    platform: Platform
     options?: TiltOptions
     onOpen?: () => void
     onEdit?: () => void
@@ -29,6 +30,7 @@ const RepositoryCard = ({
     toolName,
     toolId,
     ver,
+    platform,
     options = {
         reverse: true,
         max: 8,
@@ -52,7 +54,10 @@ const RepositoryCard = ({
     }, [options])
 
     return (
-        <Draggable id={toolId} data={{ icon, toolName, toolId, authorUsername: '!', ver }}>
+        <Draggable
+            id={`!:${toolId}:${ver}:${platform}`}
+            data={{ icon, toolName, toolId, authorUsername: '!', ver, platform }}
+        >
             <Card
                 data-component={'component-repository-card'}
                 style={{ overflow: 'visible', ...style }}
diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
index 63bd8d9..66b57b0 100644
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -179,19 +179,26 @@ const StoreCard = ({
             )
             return
         }
-        navigateToView(navigate, author.username, toolId, platform)
+        navigateToView(navigate, author.username, toolId, 'DESKTOP')
     }
 
     const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        navigateToView(navigate, author.username, toolId, platform)
+        navigateToView(navigate, author.username, toolId, 'WEB')
     }
 
     return (
         <>
             <Draggable
-                id={`${author.username}:${toolId}:${ver}`}
-                data={{ icon, toolName, toolId, authorUsername: author.username, ver: '' }}
+                id={`${author.username}:${toolId}:${ver}:${platform}`}
+                data={{
+                    icon,
+                    toolName,
+                    toolId,
+                    authorUsername: author.username,
+                    ver: '',
+                    platform: platform
+                }}
             >
                 <Card
                     data-component={'component-store-card'}
diff --git a/src/global.d.ts b/src/global.d.ts
index 15496ad..41b47cc 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -661,4 +661,5 @@ interface ToolMenuItem {
     toolId: string
     authorUsername: string
     ver: string
+    platform: Platform
 }
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index 78aef88..a2bae0c 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -170,6 +170,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
             toolName={selectedTool.name}
             toolId={selectedTool.toolId}
             ver={selectedTool.ver}
+            platform={selectedTool.platform}
             onOpen={handleOnOpenTool}
             onEdit={handleOnEditTool()}
             onSource={handleOnSourceTool()}
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 698698a..8217fd2 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -3,7 +3,7 @@ import { arrayMove, SortableContext } from '@dnd-kit/sortable'
 import type { DragEndEvent } from '@dnd-kit/core/dist/types'
 import '@/assets/css/pages/tools-framework.scss'
 import { tools } from '@/router/tools'
-import { getToolMenuItem, saveToolMenuItem } from '@/util/common'
+import { checkDesktop, getToolMenuItem, saveToolMenuItem } from '@/util/common'
 import { getViewPath } from '@/util/navigation'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import Sidebar from '@/components/common/Sidebar'
@@ -34,12 +34,12 @@ const ToolsFramework = () => {
     const handleOnDragEnd = ({ active, over }: DragEndEvent) => {
         if (over && active.id !== over?.id) {
             const activeIndex = toolMenuItem.findIndex(
-                ({ authorUsername, toolId, ver }) =>
-                    `${authorUsername}:${toolId}:${ver}` === active.id
+                ({ authorUsername, toolId, ver, platform }) =>
+                    `${authorUsername}:${toolId}:${ver}:${platform}` === active.id
             )
             const overIndex = toolMenuItem.findIndex(
-                ({ authorUsername, toolId, ver }) =>
-                    `${authorUsername}:${toolId}:${ver}` === over.id
+                ({ authorUsername, toolId, ver, platform }) =>
+                    `${authorUsername}:${toolId}:${ver}:${platform}` === over.id
             )
             setToolMenuItem(arrayMove(toolMenuItem, activeIndex, overIndex))
         }
@@ -47,8 +47,8 @@ const ToolsFramework = () => {
         if (!over) {
             setToolMenuItem(
                 toolMenuItem.filter(
-                    ({ authorUsername, toolId, ver }) =>
-                        `${authorUsername}:${toolId}:${ver}` !== active?.id
+                    ({ authorUsername, toolId, ver, platform }) =>
+                        `${authorUsername}:${toolId}:${ver}:${platform}` !== active?.id
                 )
             )
         }
@@ -63,7 +63,12 @@ const ToolsFramework = () => {
                         ver === newItem.ver
                 ) === -1
             ) {
-                setToolMenuItem([...toolMenuItem, newItem])
+                if (!checkDesktop() && newItem.platform === 'DESKTOP') {
+                    void message.warning('暂不支持添加桌面端应用')
+                    setToolMenuItem(toolMenuItem)
+                } else {
+                    setToolMenuItem([...toolMenuItem, newItem])
+                }
             }
         }
 
@@ -110,8 +115,8 @@ const ToolsFramework = () => {
                                     <Sidebar.ItemList>
                                         <SortableContext
                                             items={toolMenuItem.map(
-                                                ({ authorUsername, toolId, ver }) =>
-                                                    `${authorUsername}:${toolId}:${ver}`
+                                                ({ authorUsername, toolId, ver, platform }) =>
+                                                    `${authorUsername}:${toolId}:${ver}:${platform}`
                                             )}
                                         >
                                             {toolMenuItem.map(
@@ -120,16 +125,18 @@ const ToolsFramework = () => {
                                                     toolName,
                                                     toolId,
                                                     authorUsername,
-                                                    ver
+                                                    ver,
+                                                    platform
                                                 }) => (
                                                     <Sortable
-                                                        id={`${authorUsername}:${toolId}:${ver}`}
+                                                        id={`${authorUsername}:${toolId}:${ver}:${platform}`}
                                                         data={{
                                                             icon,
                                                             toolName,
                                                             toolId,
                                                             authorUsername,
-                                                            ver
+                                                            ver,
+                                                            platform
                                                         }}
                                                         isDelete={isDelete}
                                                     >
@@ -137,12 +144,12 @@ const ToolsFramework = () => {
                                                             path={getViewPath(
                                                                 authorUsername,
                                                                 toolId,
-                                                                import.meta.env.VITE_PLATFORM,
+                                                                platform,
                                                                 ver
                                                             )}
                                                             icon={icon}
                                                             text={toolName}
-                                                            key={`${authorUsername}:${toolId}`}
+                                                            key={`${authorUsername}:${toolId}:${ver}:${platform}`}
                                                             extend={<DragHandle padding={10} />}
                                                         />
                                                     </Sortable>

From 5a028a825996fdb8affd6adf3a5355c85b17eae5 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 1 May 2024 18:35:12 +0800
Subject: [PATCH 279/307] Feat(StoreCard): Support emulator

Support run tool by emulator
---
 src/components/tools/StoreCard.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
index 66b57b0..5572658 100644
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -74,7 +74,7 @@ const StoreCard = ({
             return
         }
         if (platform === 'ANDROID') {
-            void modal.info({
+            void modal.confirm({
                 icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
                 title: 'Android 端',
                 centered: true,
@@ -87,7 +87,12 @@ const StoreCard = ({
                         />
                         <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
                     </FlexBox>
-                )
+                ),
+                okText: '确定',
+                cancelText: '模拟器',
+                onCancel() {
+                    navigateToView(navigate, author.username, toolId, platform)
+                }
             })
             return
         }
@@ -141,7 +146,7 @@ const StoreCard = ({
 
     const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
-        void modal.info({
+        void modal.confirm({
             icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
             title: 'Android 端',
             centered: true,
@@ -154,7 +159,12 @@ const StoreCard = ({
                     />
                     <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
                 </FlexBox>
-            )
+            ),
+            okText: '确定',
+            cancelText: '模拟器',
+            onCancel() {
+                navigateToView(navigate, author.username, toolId, 'ANDROID')
+            }
         })
     }
 

From 7f639743ec04b3d80626693088cd3d1a0b24394d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 2 May 2024 01:15:42 +0800
Subject: [PATCH 280/307] Build(Package): Upgrade dependencies

---
 package-lock.json                             | 3361 +++++++++--------
 package.json                                  |   60 +-
 .../Playground/CodeEditor/Editor/loader.ts    |    2 +-
 src/components/Playground/compiler.ts         |    2 +-
 4 files changed, 1841 insertions(+), 1584 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4a7cbd4..eda36a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,33 +8,33 @@
       "name": "oxygen-ui",
       "version": "1.0.0-SNAPSHOT",
       "dependencies": {
-        "@ant-design/icons": "^5.2.6",
+        "@ant-design/icons": "^5.3.6",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
         "@dnd-kit/utilities": "^3.2.2",
-        "@marsidev/react-turnstile": "^0.5.3",
+        "@marsidev/react-turnstile": "^0.6.0",
         "@monaco-editor/react": "^4.6.0",
         "@typescript/ata": "^0.9.4",
-        "antd": "^5.13.2",
-        "axios": "^1.6.5",
+        "antd": "^5.16.5",
+        "axios": "^1.6.8",
         "custom-protocol-check": "^1.4.0",
-        "dayjs": "^1.11.10",
-        "echarts": "^5.4.3",
-        "esbuild-wasm": "^0.19.12",
+        "dayjs": "^1.11.11",
+        "echarts": "^5.5.0",
+        "esbuild-wasm": "^0.20.2",
         "fast-deep-equal": "^3.1.3",
-        "fflate": "^0.8.1",
+        "fflate": "^0.8.2",
         "jwt-decode": "^4.0.0",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
-        "match-sorter": "^6.3.3",
+        "match-sorter": "^6.3.4",
         "moment": "^2.30.1",
-        "monaco-editor": "^0.45.0",
+        "monaco-editor": "^0.48.0",
         "monaco-jsx-syntax-highlight": "^1.2.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-draggable": "^4.4.6",
-        "react-router": "^6.21.3",
-        "react-router-dom": "^6.21.3",
+        "react-router": "^6.23.0",
+        "react-router-dom": "^6.23.0",
         "size-sensor": "^1.0.2",
         "vanilla-tilt": "^1.8.1"
       },
@@ -42,48 +42,39 @@
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
         "@types/jsdom": "^21.1.6",
-        "@types/lodash": "^4.14.202",
-        "@types/node": "^20.11.5",
-        "@types/react": "^18.2.48",
-        "@types/react-dom": "^18.2.18",
-        "@typescript-eslint/eslint-plugin": "^6.19.1",
-        "@typescript-eslint/parser": "^6.19.1",
+        "@types/lodash": "^4.17.0",
+        "@types/node": "^20.12.7",
+        "@types/react": "^18.3.1",
+        "@types/react-dom": "^18.3.0",
+        "@typescript-eslint/eslint-plugin": "^7.8.0",
+        "@typescript-eslint/parser": "^7.8.0",
         "@vitejs/plugin-react": "^4.2.1",
-        "eslint": "^8.56.0",
+        "eslint": "^8.57.0",
+        "eslint-config-love": "^47.0.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-config-standard-with-typescript": "^43.0.1",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-promise": "^6.1.1",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.4.5",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.6",
         "jsdom": "^24.0.0",
-        "prettier": "^3.2.4",
-        "sass": "^1.70.0",
+        "prettier": "^3.2.5",
+        "sass": "^1.76.0",
         "stylelint-config-prettier": "^9.0.5",
-        "typescript": "^5.3.3",
-        "unplugin-auto-import": "^0.17.3",
-        "unplugin-icons": "^0.18.2",
-        "vite": "^5.0.12"
-      }
-    },
-    "node_modules/@aashutoshrathi/word-wrap": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmmirror.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
-      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
+        "typescript": "^5.4.5",
+        "unplugin-auto-import": "^0.17.5",
+        "unplugin-icons": "^0.19.0",
+        "vite": "^5.2.10"
       }
     },
     "node_modules/@ampproject/remapping": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz",
-      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.0",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
         "node": ">=6.0.0"
@@ -98,9 +89,9 @@
       }
     },
     "node_modules/@ant-design/cssinjs": {
-      "version": "1.18.2",
-      "resolved": "https://registry.npmmirror.com/@ant-design/cssinjs/-/cssinjs-1.18.2.tgz",
-      "integrity": "sha512-514V9rjLaFYb3v4s55/8bg2E6fb81b99s3crDZf4nSwtiDLLXs8axnIph+q2TVkY2hbJPZOn/cVsVcnLkzFy7w==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmmirror.com/@ant-design/cssinjs/-/cssinjs-1.20.0.tgz",
+      "integrity": "sha512-uG3iWzJxgNkADdZmc6W0Ci3iQAUOvLMcM8SnnmWq3r6JeocACft4ChnY/YWvI2Y+rG/68QBla/O+udke1yH3vg==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "@emotion/hash": "^0.8.0",
@@ -116,12 +107,12 @@
       }
     },
     "node_modules/@ant-design/icons": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.2.6.tgz",
-      "integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
+      "version": "5.3.6",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.3.6.tgz",
+      "integrity": "sha512-JeWsgNjvkTTC73YDPgWOgdScRku/iHN9JU0qk39OSEmJSCiRghQMLlxGTCY5ovbRRoXjxHXnUKgQEgBDnQfKmA==",
       "dependencies": {
         "@ant-design/colors": "^7.0.0",
-        "@ant-design/icons-svg": "^4.3.0",
+        "@ant-design/icons-svg": "^4.4.0",
         "@babel/runtime": "^7.11.2",
         "classnames": "^2.2.6",
         "rc-util": "^5.31.1"
@@ -135,14 +126,14 @@
       }
     },
     "node_modules/@ant-design/icons-svg": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
-      "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
+      "version": "4.4.2",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
+      "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA=="
     },
     "node_modules/@ant-design/react-slick": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/@ant-design/react-slick/-/react-slick-1.0.2.tgz",
-      "integrity": "sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@ant-design/react-slick/-/react-slick-1.1.2.tgz",
+      "integrity": "sha512-EzlvzE6xQUBrZuuhSAFTdsr4P2bBBHGZwKFemEfq8gIGyIQCxalYfZW/T2ORbtQx5rU69o+WycP3exY/7T1hGA==",
       "dependencies": {
         "@babel/runtime": "^7.10.4",
         "classnames": "^2.2.5",
@@ -155,71 +146,12 @@
       }
     },
     "node_modules/@antfu/install-pkg": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.3.1.tgz",
-      "integrity": "sha512-A3zWY9VeTPnxlMiZtsGHw2lSd3ghwvL8s9RiGOtqvDxhhFfZ781ynsGBa/iUnDJ5zBrmTFQrJDud3TGgRISaxw==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmmirror.com/@antfu/install-pkg/-/install-pkg-0.3.3.tgz",
+      "integrity": "sha512-nHHsk3NXQ6xkCfiRRC8Nfrg8pU5kkr3P3Y9s9dKqiuRmBD0Yap7fymNDjGFKeWhZQHqqbCS5CfeMy9wtExM24w==",
       "dev": true,
       "dependencies": {
-        "execa": "^8.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@antfu/install-pkg/node_modules/execa": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
-      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^8.0.1",
-        "human-signals": "^5.0.0",
-        "is-stream": "^3.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^5.1.0",
-        "onetime": "^6.0.0",
-        "signal-exit": "^4.1.0",
-        "strip-final-newline": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=16.17"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/@antfu/install-pkg/node_modules/get-stream": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
-      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
-      "dev": true,
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@antfu/install-pkg/node_modules/human-signals": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
-      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=16.17.0"
-      }
-    },
-    "node_modules/@antfu/install-pkg/node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "@jsdevtools/ez-spawn": "^3.0.4"
       }
     },
     "node_modules/@antfu/utils": {
@@ -229,43 +161,43 @@
       "dev": true
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
-      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+      "version": "7.24.2",
+      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.24.2.tgz",
+      "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
       "dev": true,
       "dependencies": {
-        "@babel/highlight": "^7.23.4",
-        "chalk": "^2.4.2"
+        "@babel/highlight": "^7.24.2",
+        "picocolors": "^1.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.22.9",
-      "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.22.9.tgz",
-      "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.24.4.tgz",
+      "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.5.tgz",
-      "integrity": "sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.24.5.tgz",
+      "integrity": "sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.5",
-        "@babel/helper-compilation-targets": "^7.22.15",
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.5",
-        "@babel/parser": "^7.23.5",
-        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.5",
-        "@babel/types": "^7.23.5",
+        "@babel/code-frame": "^7.24.2",
+        "@babel/generator": "^7.24.5",
+        "@babel/helper-compilation-targets": "^7.23.6",
+        "@babel/helper-module-transforms": "^7.24.5",
+        "@babel/helpers": "^7.24.5",
+        "@babel/parser": "^7.24.5",
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.5",
+        "@babel/types": "^7.24.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -274,21 +206,17 @@
       },
       "engines": {
         "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.5.tgz",
-      "integrity": "sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.24.5.tgz",
+      "integrity": "sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.23.5",
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "@jridgewell/trace-mapping": "^0.3.17",
+        "@babel/types": "^7.24.5",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^2.5.1"
       },
       "engines": {
@@ -296,14 +224,14 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz",
-      "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
+      "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
       "dev": true,
       "dependencies": {
-        "@babel/compat-data": "^7.22.9",
-        "@babel/helper-validator-option": "^7.22.15",
-        "browserslist": "^4.21.9",
+        "@babel/compat-data": "^7.23.5",
+        "@babel/helper-validator-option": "^7.23.5",
+        "browserslist": "^4.22.2",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
       },
@@ -313,7 +241,7 @@
     },
     "node_modules/@babel/helper-environment-visitor": {
       "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
       "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
       "dev": true,
       "engines": {
@@ -322,7 +250,7 @@
     },
     "node_modules/@babel/helper-function-name": {
       "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
       "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
       "dev": true,
       "dependencies": {
@@ -335,7 +263,7 @@
     },
     "node_modules/@babel/helper-hoist-variables": {
       "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
       "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
       "dev": true,
       "dependencies": {
@@ -346,28 +274,28 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
-      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "version": "7.24.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.15"
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
-      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.24.5.tgz",
+      "integrity": "sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-module-imports": "^7.22.15",
-        "@babel/helper-simple-access": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/helper-validator-identifier": "^7.22.20"
+        "@babel/helper-module-imports": "^7.24.3",
+        "@babel/helper-simple-access": "^7.24.5",
+        "@babel/helper-split-export-declaration": "^7.24.5",
+        "@babel/helper-validator-identifier": "^7.24.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -377,97 +305,98 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz",
+      "integrity": "sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-simple-access": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
-      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-simple-access/-/helper-simple-access-7.24.5.tgz",
+      "integrity": "sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.5"
+        "@babel/types": "^7.24.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.5.tgz",
+      "integrity": "sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.5"
+        "@babel/types": "^7.24.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
-      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz",
+      "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz",
-      "integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.5.tgz",
-      "integrity": "sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.24.5.tgz",
+      "integrity": "sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.5",
-        "@babel/types": "^7.23.5"
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.5",
+        "@babel/types": "^7.24.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
-      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/highlight/-/highlight-7.24.5.tgz",
+      "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.20",
+        "@babel/helper-validator-identifier": "^7.24.5",
         "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0"
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz",
-      "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.24.5.tgz",
+      "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -477,12 +406,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz",
-      "integrity": "sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.5.tgz",
+      "integrity": "sha512-RtCJoUO2oYrYwFPtR1/jkoBEcFuI1ae9a9IMxeyAVa3a1Ap4AnxmyIKG2b2FaJKqkidw/0cxRbWN+HOs6ZWd1w==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -492,12 +421,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz",
-      "integrity": "sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.1.tgz",
+      "integrity": "sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -507,9 +436,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.8",
-      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.8.tgz",
-      "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.5.tgz",
+      "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -518,34 +447,34 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
-      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.24.0.tgz",
+      "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/parser": "^7.22.15",
-        "@babel/types": "^7.22.15"
+        "@babel/code-frame": "^7.23.5",
+        "@babel/parser": "^7.24.0",
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.5.tgz",
-      "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.24.5.tgz",
+      "integrity": "sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.5",
+        "@babel/code-frame": "^7.24.2",
+        "@babel/generator": "^7.24.5",
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.5",
-        "@babel/types": "^7.23.5",
-        "debug": "^4.1.0",
+        "@babel/helper-split-export-declaration": "^7.24.5",
+        "@babel/parser": "^7.24.5",
+        "@babel/types": "^7.24.5",
+        "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -553,13 +482,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz",
-      "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.24.5.tgz",
+      "integrity": "sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.23.4",
-        "@babel/helper-validator-identifier": "^7.22.20",
+        "@babel/helper-string-parser": "^7.24.1",
+        "@babel/helper-validator-identifier": "^7.24.5",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -589,7 +518,7 @@
     },
     "node_modules/@dnd-kit/accessibility": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz",
       "integrity": "sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==",
       "dependencies": {
         "tslib": "^2.0.0"
@@ -600,7 +529,7 @@
     },
     "node_modules/@dnd-kit/core": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/core/-/core-6.1.0.tgz",
       "integrity": "sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==",
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.0",
@@ -614,7 +543,7 @@
     },
     "node_modules/@dnd-kit/sortable": {
       "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-8.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/sortable/-/sortable-8.0.0.tgz",
       "integrity": "sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==",
       "dependencies": {
         "@dnd-kit/utilities": "^3.2.2",
@@ -627,7 +556,7 @@
     },
     "node_modules/@dnd-kit/utilities": {
       "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "resolved": "https://registry.npmmirror.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
       "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
       "dependencies": {
         "tslib": "^2.0.0"
@@ -646,10 +575,26 @@
       "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.7.5.tgz",
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.8.tgz",
-      "integrity": "sha512-31E2lxlGM1KEfivQl8Yf5aYU/mflz9g06H6S15ITUFQueMFtFjESRMoDSkvMo8thYvLBax+VKTPlpnx+sPicOA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
       "cpu": [
         "arm"
       ],
@@ -663,9 +608,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.8.tgz",
-      "integrity": "sha512-B8JbS61bEunhfx8kasogFENgQfr/dIp+ggYXwTqdbMAgGDhRa3AaPpQMuQU0rNxDLECj6FhDzk1cF9WHMVwrtA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
       "cpu": [
         "arm64"
       ],
@@ -679,9 +624,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.8.tgz",
-      "integrity": "sha512-rdqqYfRIn4jWOp+lzQttYMa2Xar3OK9Yt2fhOhzFXqg0rVWEfSclJvZq5fZslnz6ypHvVf3CT7qyf0A5pM682A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
       "cpu": [
         "x64"
       ],
@@ -695,9 +640,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.8.tgz",
-      "integrity": "sha512-RQw9DemMbIq35Bprbboyf8SmOr4UXsRVxJ97LgB55VKKeJOOdvsIPy0nFyF2l8U+h4PtBx/1kRf0BelOYCiQcw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
       "cpu": [
         "arm64"
       ],
@@ -711,9 +656,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.8.tgz",
-      "integrity": "sha512-3sur80OT9YdeZwIVgERAysAbwncom7b4bCI2XKLjMfPymTud7e/oY4y+ci1XVp5TfQp/bppn7xLw1n/oSQY3/Q==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
       "cpu": [
         "x64"
       ],
@@ -727,9 +672,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.8.tgz",
-      "integrity": "sha512-WAnPJSDattvS/XtPCTj1tPoTxERjcTpH6HsMr6ujTT+X6rylVe8ggxk8pVxzf5U1wh5sPODpawNicF5ta/9Tmw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
       "cpu": [
         "arm64"
       ],
@@ -743,9 +688,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.8.tgz",
-      "integrity": "sha512-ICvZyOplIjmmhjd6mxi+zxSdpPTKFfyPPQMQTK/w+8eNK6WV01AjIztJALDtwNNfFhfZLux0tZLC+U9nSyA5Zg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
       "cpu": [
         "x64"
       ],
@@ -759,9 +704,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.8.tgz",
-      "integrity": "sha512-H4vmI5PYqSvosPaTJuEppU9oz1dq2A7Mr2vyg5TF9Ga+3+MGgBdGzcyBP7qK9MrwFQZlvNyJrvz6GuCaj3OukQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
       "cpu": [
         "arm"
       ],
@@ -775,9 +720,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.8.tgz",
-      "integrity": "sha512-z1zMZivxDLHWnyGOctT9JP70h0beY54xDDDJt4VpTX+iwA77IFsE1vCXWmprajJGa+ZYSqkSbRQ4eyLCpCmiCQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
       "cpu": [
         "arm64"
       ],
@@ -791,9 +736,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.8.tgz",
-      "integrity": "sha512-1a8suQiFJmZz1khm/rDglOc8lavtzEMRo0v6WhPgxkrjcU0LkHj+TwBrALwoz/OtMExvsqbbMI0ChyelKabSvQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
       "cpu": [
         "ia32"
       ],
@@ -807,9 +752,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.8.tgz",
-      "integrity": "sha512-fHZWS2JJxnXt1uYJsDv9+b60WCc2RlvVAy1F76qOLtXRO+H4mjt3Tr6MJ5l7Q78X8KgCFudnTuiQRBhULUyBKQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
       "cpu": [
         "loong64"
       ],
@@ -823,9 +768,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.8.tgz",
-      "integrity": "sha512-Wy/z0EL5qZYLX66dVnEg9riiwls5IYnziwuju2oUiuxVc+/edvqXa04qNtbrs0Ukatg5HEzqT94Zs7J207dN5Q==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
       "cpu": [
         "mips64el"
       ],
@@ -839,9 +784,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.8.tgz",
-      "integrity": "sha512-ETaW6245wK23YIEufhMQ3HSeHO7NgsLx8gygBVldRHKhOlD1oNeNy/P67mIh1zPn2Hr2HLieQrt6tWrVwuqrxg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
       "cpu": [
         "ppc64"
       ],
@@ -855,9 +800,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.8.tgz",
-      "integrity": "sha512-T2DRQk55SgoleTP+DtPlMrxi/5r9AeFgkhkZ/B0ap99zmxtxdOixOMI570VjdRCs9pE4Wdkz7JYrsPvsl7eESg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
       "cpu": [
         "riscv64"
       ],
@@ -871,9 +816,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.8.tgz",
-      "integrity": "sha512-NPxbdmmo3Bk7mbNeHmcCd7R7fptJaczPYBaELk6NcXxy7HLNyWwCyDJ/Xx+/YcNH7Im5dHdx9gZ5xIwyliQCbg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
       "cpu": [
         "s390x"
       ],
@@ -887,9 +832,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.8.tgz",
-      "integrity": "sha512-lytMAVOM3b1gPypL2TRmZ5rnXl7+6IIk8uB3eLsV1JwcizuolblXRrc5ShPrO9ls/b+RTp+E6gbsuLWHWi2zGg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
       "cpu": [
         "x64"
       ],
@@ -903,9 +848,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.8.tgz",
-      "integrity": "sha512-hvWVo2VsXz/8NVt1UhLzxwAfo5sioj92uo0bCfLibB0xlOmimU/DeAEsQILlBQvkhrGjamP0/el5HU76HAitGw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
       "cpu": [
         "x64"
       ],
@@ -919,9 +864,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.8.tgz",
-      "integrity": "sha512-/7Y7u77rdvmGTxR83PgaSvSBJCC2L3Kb1M/+dmSIvRvQPXXCuC97QAwMugBNG0yGcbEGfFBH7ojPzAOxfGNkwQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
       "cpu": [
         "x64"
       ],
@@ -935,9 +880,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.8.tgz",
-      "integrity": "sha512-9Lc4s7Oi98GqFA4HzA/W2JHIYfnXbUYgekUP/Sm4BG9sfLjyv6GKKHKKVs83SMicBF2JwAX6A1PuOLMqpD001w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
       "cpu": [
         "x64"
       ],
@@ -951,9 +896,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.8.tgz",
-      "integrity": "sha512-rq6WzBGjSzihI9deW3fC2Gqiak68+b7qo5/3kmB6Gvbh/NYPA0sJhrnp7wgV4bNwjqM+R2AApXGxMO7ZoGhIJg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
       "cpu": [
         "arm64"
       ],
@@ -967,9 +912,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.8.tgz",
-      "integrity": "sha512-AIAbverbg5jMvJznYiGhrd3sumfwWs8572mIJL5NQjJa06P8KfCPWZQ0NwZbPQnbQi9OWSZhFVSUWjjIrn4hSw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
       "cpu": [
         "ia32"
       ],
@@ -983,9 +928,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.8.tgz",
-      "integrity": "sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
       "cpu": [
         "x64"
       ],
@@ -1014,9 +959,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmmirror.com/@eslint-community/regexpp/-/regexpp-4.8.0.tgz",
-      "integrity": "sha512-JylOEEzDiOryeUnFbQz+oViCXS0KsvR1mvHkoMiu5+UiBvy+RYX7tzlIIIEstF/gVa2tj9AQXk3dgnxv6KxhFg==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmmirror.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
+      "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
       "dev": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
@@ -1024,7 +969,7 @@
     },
     "node_modules/@eslint/eslintrc": {
       "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "resolved": "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
       "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "dev": true,
       "dependencies": {
@@ -1040,61 +985,96 @@
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.23.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
-      "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
+      "version": "13.24.0",
+      "resolved": "https://registry.npmmirror.com/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
       },
       "engines": {
         "node": ">=8"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": "*"
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/type-fest": {
       "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true,
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmmirror.com/@eslint/js/-/js-8.56.0.tgz",
-      "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmmirror.com/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.13",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
-      "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
+      "version": "0.11.14",
+      "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
       "dev": true,
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.1",
-        "debug": "^4.1.1",
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
         "minimatch": "^3.0.5"
       },
       "engines": {
         "node": ">=10.10.0"
       }
     },
+    "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -1105,172 +1085,69 @@
       }
     },
     "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
-      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
     "node_modules/@iconify/types": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@iconify/types/-/types-2.0.0.tgz",
       "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
       "dev": true
     },
     "node_modules/@iconify/utils": {
-      "version": "2.1.12",
-      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.1.12.tgz",
-      "integrity": "sha512-7vf3Uk6H7TKX4QMs2gbg5KR1X9J0NJzKSRNWhMZ+PWN92l0t6Q3tj2ZxLDG07rC3ppWBtTtA4FPmkQphuEmdsg==",
+      "version": "2.1.23",
+      "resolved": "https://registry.npmmirror.com/@iconify/utils/-/utils-2.1.23.tgz",
+      "integrity": "sha512-YGNbHKM5tyDvdWZ92y2mIkrfvm5Fvhe6WJSkWu7vvOFhMtYDP0casZpoRz0XEHZCrYsR4stdGT3cZ52yp5qZdQ==",
       "dev": true,
       "dependencies": {
         "@antfu/install-pkg": "^0.1.1",
-        "@antfu/utils": "^0.7.5",
+        "@antfu/utils": "^0.7.7",
         "@iconify/types": "^2.0.0",
         "debug": "^4.3.4",
         "kolorist": "^1.8.0",
-        "local-pkg": "^0.4.3"
+        "local-pkg": "^0.5.0",
+        "mlly": "^1.6.1"
       }
     },
     "node_modules/@iconify/utils/node_modules/@antfu/install-pkg": {
       "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@antfu/install-pkg/-/install-pkg-0.1.1.tgz",
       "integrity": "sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==",
       "dev": true,
       "dependencies": {
         "execa": "^5.1.1",
         "find-up": "^5.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@iconify/utils/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/@iconify/utils/node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
-    "node_modules/@iconify/utils/node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@iconify/utils/node_modules/local-pkg": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
-      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@iconify/utils/node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@iconify/utils/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@iconify/utils/node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@iconify/utils/node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
         "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
-      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/set-array": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
       "dev": true,
       "engines": {
         "node": ">=6.0.0"
@@ -1283,19 +1160,34 @@
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
-      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
+      "version": "0.3.25",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@jsdevtools/ez-spawn": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@jsdevtools/ez-spawn/-/ez-spawn-3.0.4.tgz",
+      "integrity": "sha512-f5DRIOZf7wxogefH03RjMPMdBF7ADTWUMoOs9kaJo06EfwF+aFhMZMDZxHg/Xe12hptN9xoZjGso2fdjapBRIA==",
+      "dev": true,
+      "dependencies": {
+        "call-me-maybe": "^1.0.1",
+        "cross-spawn": "^7.0.3",
+        "string-argv": "^0.3.1",
+        "type-detect": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@marsidev/react-turnstile": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.5.3.tgz",
-      "integrity": "sha512-lx3p2/56esPt8Ksr37K8uhPt/K4Mg8xaIfCV8MPKmE/1X4aHesRqZok1+L1ySQwsdWoEe5+KJOhBXka8lFBwNg==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmmirror.com/@marsidev/react-turnstile/-/react-turnstile-0.6.0.tgz",
+      "integrity": "sha512-CXv2xy27f3a7Rn1PqFeTKGxkdv4uiD7Zpbazeb+1AbC3VEfTk0OFNiyQvIIFn+kCYWkeTLdY7pXRzsfebHH97w==",
       "peerDependencies": {
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
@@ -1361,18 +1253,18 @@
       }
     },
     "node_modules/@pkgr/core": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmmirror.com/@pkgr/core/-/core-0.1.0.tgz",
-      "integrity": "sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
       "dev": true,
       "engines": {
         "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
       }
     },
     "node_modules/@rc-component/color-picker": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmmirror.com/@rc-component/color-picker/-/color-picker-1.5.1.tgz",
-      "integrity": "sha512-onyAFhWKXuG4P162xE+7IgaJkPkwM94XlOYnQuu69XdXWMfxpeFi6tpJBsieIMV7EnyLV5J3lDzdLiFeK0iEBA==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmmirror.com/@rc-component/color-picker/-/color-picker-1.5.3.tgz",
+      "integrity": "sha512-+tGGH3nLmYXTalVe0L8hSZNs73VTP5ueSHwUlDC77KKRaN7G4DS4wcpG5DTDzdcV/Yas+rzA6UGgIyzd8fS4cw==",
       "dependencies": {
         "@babel/runtime": "^7.23.6",
         "@ctrl/tinycolor": "^3.6.1",
@@ -1427,7 +1319,7 @@
     },
     "node_modules/@rc-component/portal": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.2.tgz",
+      "resolved": "https://registry.npmmirror.com/@rc-component/portal/-/portal-1.1.2.tgz",
       "integrity": "sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
@@ -1443,13 +1335,13 @@
       }
     },
     "node_modules/@rc-component/tour": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmmirror.com/@rc-component/tour/-/tour-1.12.3.tgz",
-      "integrity": "sha512-U4mf1FiUxGCwrX4ed8op77Y8VKur+8Y/61ylxtqGbcSoh1EBC7bWd/DkLu0ClTUrKZInqEi1FL7YgFtnT90vHA==",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmmirror.com/@rc-component/tour/-/tour-1.14.2.tgz",
+      "integrity": "sha512-A75DZ8LVvahBIvxooj3Gvf2sxe+CGOkmzPNX7ek0i0AJHyKZ1HXe5ieIGo3m0FMdZfVOlbCJ952Duq8VKAHk6g==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "@rc-component/portal": "^1.0.0-9",
-        "@rc-component/trigger": "^1.3.6",
+        "@rc-component/trigger": "^2.0.0",
         "classnames": "^2.3.2",
         "rc-util": "^5.24.4"
       },
@@ -1462,9 +1354,9 @@
       }
     },
     "node_modules/@rc-component/trigger": {
-      "version": "1.18.2",
-      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.18.2.tgz",
-      "integrity": "sha512-jRLYgFgjLEPq3MvS87fIhcfuywFSRDaDrYw1FLku7Cm4esszvzTbA0JBsyacAyLrK9rF3TiHFcvoEDMzoD3CTA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/@rc-component/trigger/-/trigger-2.1.1.tgz",
+      "integrity": "sha512-UjHkedkgtEcgQu87w1VuWug1idoDJV7VUt0swxHXRcmei2uu1AuUzGBPEUlmOmXGJ+YtTgZfVLi7kuAUKoZTMA==",
       "dependencies": {
         "@babel/runtime": "^7.23.2",
         "@rc-component/portal": "^1.1.0",
@@ -1482,9 +1374,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.14.2",
-      "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.14.2.tgz",
-      "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -1512,9 +1404,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.6.1.tgz",
-      "integrity": "sha512-0WQ0ouLejaUCRsL93GD4uft3rOmB8qoQMU05Kb8CmMtMBe7XUDLAltxVZI1q6byNqEtU7N1ZX1Vw5lIpgulLQA==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
+      "integrity": "sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==",
       "cpu": [
         "arm"
       ],
@@ -1525,9 +1417,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.6.1.tgz",
-      "integrity": "sha512-1TKm25Rn20vr5aTGGZqo6E4mzPicCUD79k17EgTLAsXc1zysyi4xXKACfUbwyANEPAEIxkzwue6JZ+stYzWUTA==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.2.tgz",
+      "integrity": "sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==",
       "cpu": [
         "arm64"
       ],
@@ -1538,9 +1430,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.6.1.tgz",
-      "integrity": "sha512-cEXJQY/ZqMACb+nxzDeX9IPLAg7S94xouJJCNVE5BJM8JUEP4HeTF+ti3cmxWeSJo+5D+o8Tc0UAWUkfENdeyw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.2.tgz",
+      "integrity": "sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==",
       "cpu": [
         "arm64"
       ],
@@ -1551,9 +1443,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.6.1.tgz",
-      "integrity": "sha512-LoSU9Xu56isrkV2jLldcKspJ7sSXmZWkAxg7sW/RfF7GS4F5/v4EiqKSMCFbZtDu2Nc1gxxFdQdKwkKS4rwxNg==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.2.tgz",
+      "integrity": "sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==",
       "cpu": [
         "x64"
       ],
@@ -1564,9 +1456,22 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.6.1.tgz",
-      "integrity": "sha512-EfI3hzYAy5vFNDqpXsNxXcgRDcFHUWSx5nnRSCKwXuQlI5J9dD84g2Usw81n3FLBNsGCegKGwwTVsSKK9cooSQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.2.tgz",
+      "integrity": "sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.2.tgz",
+      "integrity": "sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==",
       "cpu": [
         "arm"
       ],
@@ -1577,9 +1482,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.6.1.tgz",
-      "integrity": "sha512-9lhc4UZstsegbNLhH0Zu6TqvDfmhGzuCWtcTFXY10VjLLUe4Mr0Ye2L3rrtHaDd/J5+tFMEuo5LTCSCMXWfUKw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.2.tgz",
+      "integrity": "sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==",
       "cpu": [
         "arm64"
       ],
@@ -1590,9 +1495,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.6.1.tgz",
-      "integrity": "sha512-FfoOK1yP5ksX3wwZ4Zk1NgyGHZyuRhf99j64I5oEmirV8EFT7+OhUZEnP+x17lcP/QHJNWGsoJwrz4PJ9fBEXw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.2.tgz",
+      "integrity": "sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==",
       "cpu": [
         "arm64"
       ],
@@ -1602,10 +1507,49 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.2.tgz",
+      "integrity": "sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.2.tgz",
+      "integrity": "sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.2.tgz",
+      "integrity": "sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.6.1.tgz",
-      "integrity": "sha512-DNGZvZDO5YF7jN5fX8ZqmGLjZEXIJRdJEdTFMhiyXqyXubBa0WVLDWSNlQ5JR2PNgDbEV1VQowhVRUh+74D+RA==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.2.tgz",
+      "integrity": "sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==",
       "cpu": [
         "x64"
       ],
@@ -1616,9 +1560,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.6.1.tgz",
-      "integrity": "sha512-RkJVNVRM+piYy87HrKmhbexCHg3A6Z6MU0W9GHnJwBQNBeyhCJG9KDce4SAMdicQnpURggSvtbGo9xAWOfSvIQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.2.tgz",
+      "integrity": "sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==",
       "cpu": [
         "x64"
       ],
@@ -1629,9 +1573,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.6.1.tgz",
-      "integrity": "sha512-v2FVT6xfnnmTe3W9bJXl6r5KwJglMK/iRlkKiIFfO6ysKs0rDgz7Cwwf3tjldxQUrHL9INT/1r4VA0n9L/F1vQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.2.tgz",
+      "integrity": "sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==",
       "cpu": [
         "arm64"
       ],
@@ -1642,9 +1586,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.6.1.tgz",
-      "integrity": "sha512-YEeOjxRyEjqcWphH9dyLbzgkF8wZSKAKUkldRY6dgNR5oKs2LZazqGB41cWJ4Iqqcy9/zqYgmzBkRoVz3Q9MLw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.2.tgz",
+      "integrity": "sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==",
       "cpu": [
         "ia32"
       ],
@@ -1655,9 +1599,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.6.1.tgz",
-      "integrity": "sha512-0zfTlFAIhgz8V2G8STq8toAjsYYA6eci1hnXuyOTUFnymrtJwnS6uGKiv3v5UrPZkBlamLvrLV2iiaeqCKzb0A==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.2.tgz",
+      "integrity": "sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==",
       "cpu": [
         "x64"
       ],
@@ -1834,7 +1778,7 @@
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/babel__core/-/babel__core-7.20.5.tgz",
       "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
       "dev": true,
       "dependencies": {
@@ -1846,9 +1790,9 @@
       }
     },
     "node_modules/@types/babel__generator": {
-      "version": "7.6.7",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.7.tgz",
-      "integrity": "sha512-6Sfsq+EaaLrw4RmdFWE9Onp63TOUue71AWb4Gpa6JxzgTYtimbM086WnYTy2U67AofR++QKCo08ZP6pwx8YFHQ==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmmirror.com/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
       "dev": true,
       "dependencies": {
         "@babel/types": "^7.0.0"
@@ -1856,7 +1800,7 @@
     },
     "node_modules/@types/babel__template": {
       "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/babel__template/-/babel__template-7.4.4.tgz",
       "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
       "dev": true,
       "dependencies": {
@@ -1865,9 +1809,9 @@
       }
     },
     "node_modules/@types/babel__traverse": {
-      "version": "7.20.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.4.tgz",
-      "integrity": "sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==",
+      "version": "7.20.5",
+      "resolved": "https://registry.npmmirror.com/@types/babel__traverse/-/babel__traverse-7.20.5.tgz",
+      "integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==",
       "dev": true,
       "dependencies": {
         "@babel/types": "^7.20.7"
@@ -1881,7 +1825,7 @@
     },
     "node_modules/@types/jsdom": {
       "version": "21.1.6",
-      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/jsdom/-/jsdom-21.1.6.tgz",
       "integrity": "sha512-/7kkMsC+/kMs7gAYmmBR9P0vGTnOoLhQhyhQJSlXGI5bzTHp6xdo0TtKWQAsz6pmSAeVqKSbqeyP6hytqr9FDw==",
       "dev": true,
       "dependencies": {
@@ -1903,109 +1847,102 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.202",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
-      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+      "version": "4.17.0",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.0.tgz",
+      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==",
       "dev": true
     },
     "node_modules/@types/minimist": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmmirror.com/@types/minimist/-/minimist-1.2.2.tgz",
-      "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmmirror.com/@types/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
       "dev": true,
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "20.11.5",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.11.5.tgz",
-      "integrity": "sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==",
+      "version": "20.12.7",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.12.7.tgz",
+      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
     },
     "node_modules/@types/normalize-package-data": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
-      "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
+      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
       "dev": true,
       "peer": true
     },
     "node_modules/@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
       "dev": true,
       "peer": true
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.11",
-      "resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
+      "version": "15.7.12",
+      "resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.48",
-      "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.2.48.tgz",
-      "integrity": "sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.18",
-      "resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.2.18.tgz",
-      "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
-    },
     "node_modules/@types/semver": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmmirror.com/@types/semver/-/semver-7.5.6.tgz",
-      "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==",
+      "version": "7.5.8",
+      "resolved": "https://registry.npmmirror.com/@types/semver/-/semver-7.5.8.tgz",
+      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
     "node_modules/@types/tough-cookie": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmmirror.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
-      "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmmirror.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.19.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.19.1.tgz",
-      "integrity": "sha512-roQScUGFruWod9CEyoV5KlCYrubC/fvG8/1zXuT0WTcxX87GnMMmnksMwSg99lo1xiKrBzw2icsJPMAw1OtKxg==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.8.0.tgz",
+      "integrity": "sha512-gFTT+ezJmkwutUPmB0skOj3GZJtlEGnlssems4AjkVweUPGj7jRwwqg0Hhg7++kPGJqKtTYx+R05Ftww372aIg==",
       "dev": true,
       "dependencies": {
-        "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.19.1",
-        "@typescript-eslint/type-utils": "6.19.1",
-        "@typescript-eslint/utils": "6.19.1",
-        "@typescript-eslint/visitor-keys": "6.19.1",
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "7.8.0",
+        "@typescript-eslint/type-utils": "7.8.0",
+        "@typescript-eslint/utils": "7.8.0",
+        "@typescript-eslint/visitor-keys": "7.8.0",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
-        "ignore": "^5.2.4",
+        "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
-        "eslint": "^7.0.0 || ^8.0.0"
+        "@typescript-eslint/parser": "^7.0.0",
+        "eslint": "^8.56.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -2026,9 +1963,9 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -2047,22 +1984,22 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.19.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-6.19.1.tgz",
-      "integrity": "sha512-WEfX22ziAh6pRE9jnbkkLGp/4RhTpffr2ZK5bJ18M8mIfA8A+k97U9ZyaXCEJRlmMHh7R9MJZWXp/r73DzINVQ==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-7.8.0.tgz",
+      "integrity": "sha512-KgKQly1pv0l4ltcftP59uQZCi4HUYswCLbTqVZEJu7uLX8CTLyswqMLqLN+2QFz4jCptqWVV4SB7vdxcH2+0kQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.19.1",
-        "@typescript-eslint/types": "6.19.1",
-        "@typescript-eslint/typescript-estree": "6.19.1",
-        "@typescript-eslint/visitor-keys": "6.19.1",
+        "@typescript-eslint/scope-manager": "7.8.0",
+        "@typescript-eslint/types": "7.8.0",
+        "@typescript-eslint/typescript-estree": "7.8.0",
+        "@typescript-eslint/visitor-keys": "7.8.0",
         "debug": "^4.3.4"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^8.56.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -2071,34 +2008,34 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.19.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-6.19.1.tgz",
-      "integrity": "sha512-4CdXYjKf6/6aKNMSly/BP4iCSOpvMmqtDzRtqFyyAae3z5kkqEjKndR5vDHL8rSuMIIWP8u4Mw4VxLyxZW6D5w==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-7.8.0.tgz",
+      "integrity": "sha512-viEmZ1LmwsGcnr85gIq+FCYI7nO90DVbE37/ll51hjv9aG+YZMb4WDE2fyWpUR4O/UrhGRpYXK/XajcGTk2B8g==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.19.1",
-        "@typescript-eslint/visitor-keys": "6.19.1"
+        "@typescript-eslint/types": "7.8.0",
+        "@typescript-eslint/visitor-keys": "7.8.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.19.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-6.19.1.tgz",
-      "integrity": "sha512-0vdyld3ecfxJuddDjACUvlAeYNrHP/pDeQk2pWBR2ESeEzQhg52DF53AbI9QCBkYE23lgkhLCZNkHn2hEXXYIg==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-7.8.0.tgz",
+      "integrity": "sha512-H70R3AefQDQpz9mGv13Uhi121FNMh+WEaRqcXTX09YEDky21km4dV1ZXJIp8QjXc4ZaVkXVdohvWDzbnbHDS+A==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.19.1",
-        "@typescript-eslint/utils": "6.19.1",
+        "@typescript-eslint/typescript-estree": "7.8.0",
+        "@typescript-eslint/utils": "7.8.0",
         "debug": "^4.3.4",
-        "ts-api-utils": "^1.0.1"
+        "ts-api-utils": "^1.3.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^8.56.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -2107,31 +2044,31 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.19.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/types/-/types-6.19.1.tgz",
-      "integrity": "sha512-6+bk6FEtBhvfYvpHsDgAL3uo4BfvnTnoge5LrrCj2eJN8g3IJdLTD4B/jK3Q6vo4Ql/Hoip9I8aB6fF+6RfDqg==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/types/-/types-7.8.0.tgz",
+      "integrity": "sha512-wf0peJ+ZGlcH+2ZS23aJbOv+ztjeeP8uQ9GgwMJGVLx/Nj9CJt17GWgWWoSmoRVKAX2X+7fzEnAjxdvK2gqCLw==",
       "dev": true,
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.19.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.19.1.tgz",
-      "integrity": "sha512-aFdAxuhzBFRWhy+H20nYu19+Km+gFfwNO4TEqyszkMcgBDYQjmPJ61erHxuT2ESJXhlhrO7I5EFIlZ+qGR8oVA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.8.0.tgz",
+      "integrity": "sha512-5pfUCOwK5yjPaJQNy44prjCwtr981dO8Qo9J9PwYXZ0MosgAbfEMB008dJ5sNo3+/BN6ytBPuSvXUg9SAqB0dg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.19.1",
-        "@typescript-eslint/visitor-keys": "6.19.1",
+        "@typescript-eslint/types": "7.8.0",
+        "@typescript-eslint/visitor-keys": "7.8.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
-        "minimatch": "9.0.3",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -2139,15 +2076,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -2160,22 +2088,10 @@
         "node": ">=10"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -2194,24 +2110,24 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.19.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-6.19.1.tgz",
-      "integrity": "sha512-JvjfEZuP5WoMqwh9SPAPDSHSg9FBHHGhjPugSRxu5jMfjvBpq5/sGTD+9M9aQ5sh6iJ8AY/Kk/oUYVEMAPwi7w==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-7.8.0.tgz",
+      "integrity": "sha512-L0yFqOCflVqXxiZyXrDr80lnahQfSOfc9ELAAZ75sqicqp2i36kEZZGuUymHNFoYOqxRT05up760b4iGsl02nQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@types/json-schema": "^7.0.12",
-        "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.19.1",
-        "@typescript-eslint/types": "6.19.1",
-        "@typescript-eslint/typescript-estree": "6.19.1",
-        "semver": "^7.5.4"
+        "@types/json-schema": "^7.0.15",
+        "@types/semver": "^7.5.8",
+        "@typescript-eslint/scope-manager": "7.8.0",
+        "@typescript-eslint/types": "7.8.0",
+        "@typescript-eslint/typescript-estree": "7.8.0",
+        "semver": "^7.6.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^8.56.0"
       }
     },
     "node_modules/@typescript-eslint/utils/node_modules/lru-cache": {
@@ -2227,9 +2143,9 @@
       }
     },
     "node_modules/@typescript-eslint/utils/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -2248,16 +2164,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.19.1",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.19.1.tgz",
-      "integrity": "sha512-gkdtIO+xSO/SmI0W68DBg4u1KElmIUo3vXzgHyGPs6cxgB0sa3TlptRAAE0hUY1hM6FcDKEv7aIwiTGm76cXfQ==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.8.0.tgz",
+      "integrity": "sha512-q4/gibTNBQNA0lGyYQCmWRS5D15n8rXh4QjK3KV+MBPlTYHpfBUT3D3PaPR/HeNiI9W6R7FvlkcGhNyAoP+caA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.19.1",
-        "eslint-visitor-keys": "^3.4.1"
+        "@typescript-eslint/types": "7.8.0",
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || >=20.0.0"
       }
     },
     "node_modules/@typescript/ata": {
@@ -2265,18 +2181,18 @@
       "resolved": "https://registry.npmmirror.com/@typescript/ata/-/ata-0.9.4.tgz",
       "integrity": "sha512-PaJ16WouPV/SaA+c0tnOKIqYq24+m93ipl/e0Dkxuianer+ibc5b0/6ZgfCFF8J7QEp57dySMSP9nWOFaCfJnw==",
       "peerDependencies": {
-        "typescript": ">=4.4.4 <6.0.0"
+        "typescript": ">=4.4.4"
       }
     },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
       "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
       "dev": true,
       "dependencies": {
@@ -2294,9 +2210,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.11.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
-      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
+      "version": "8.11.3",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -2307,7 +2223,7 @@
     },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true,
       "peerDependencies": {
@@ -2315,9 +2231,9 @@
       }
     },
     "node_modules/agent-base": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
-      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4"
@@ -2328,7 +2244,7 @@
     },
     "node_modules/ajv": {
       "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "dependencies": {
@@ -2336,10 +2252,6 @@
         "fast-json-stable-stringify": "^2.0.0",
         "json-schema-traverse": "^0.4.1",
         "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
     "node_modules/ansi-regex": {
@@ -2353,7 +2265,7 @@
     },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
       "dev": true,
       "dependencies": {
@@ -2364,55 +2276,56 @@
       }
     },
     "node_modules/antd": {
-      "version": "5.13.2",
-      "resolved": "https://registry.npmmirror.com/antd/-/antd-5.13.2.tgz",
-      "integrity": "sha512-P+N8gc0NOPy2WqJj/57Ey3dZUmb7nEUwAM+CIJaR5SOEjZnhEtMGRJSt+3lnhJ3MNRR39aR6NYkRVp2mYfphiA==",
+      "version": "5.16.5",
+      "resolved": "https://registry.npmmirror.com/antd/-/antd-5.16.5.tgz",
+      "integrity": "sha512-8MGjf2ejlii2iVH4F960jwpdGiU+ISWPdiMA2O1AJSFJFA3eCxVLHkKRGiagsRmdo3AUU8tuPfQsqbLuEIlswA==",
       "dependencies": {
         "@ant-design/colors": "^7.0.2",
-        "@ant-design/cssinjs": "^1.18.2",
-        "@ant-design/icons": "^5.2.6",
-        "@ant-design/react-slick": "~1.0.2",
+        "@ant-design/cssinjs": "^1.18.5",
+        "@ant-design/icons": "^5.3.6",
+        "@ant-design/react-slick": "~1.1.2",
+        "@babel/runtime": "^7.24.4",
         "@ctrl/tinycolor": "^3.6.1",
-        "@rc-component/color-picker": "~1.5.1",
+        "@rc-component/color-picker": "~1.5.3",
         "@rc-component/mutate-observer": "^1.1.0",
-        "@rc-component/tour": "~1.12.2",
-        "@rc-component/trigger": "^1.18.2",
+        "@rc-component/tour": "~1.14.2",
+        "@rc-component/trigger": "^2.1.1",
         "classnames": "^2.5.1",
         "copy-to-clipboard": "^3.3.3",
         "dayjs": "^1.11.10",
         "qrcode.react": "^3.1.0",
-        "rc-cascader": "~3.21.0",
-        "rc-checkbox": "~3.1.0",
-        "rc-collapse": "~3.7.2",
-        "rc-dialog": "~9.3.4",
-        "rc-drawer": "~7.0.0",
-        "rc-dropdown": "~4.1.0",
-        "rc-field-form": "~1.41.0",
-        "rc-image": "~7.5.1",
-        "rc-input": "~1.4.3",
-        "rc-input-number": "~8.6.1",
-        "rc-mentions": "~2.10.1",
-        "rc-menu": "~9.12.4",
+        "rc-cascader": "~3.24.1",
+        "rc-checkbox": "~3.2.0",
+        "rc-collapse": "~3.7.3",
+        "rc-dialog": "~9.4.0",
+        "rc-drawer": "~7.1.0",
+        "rc-dropdown": "~4.2.0",
+        "rc-field-form": "~1.44.0",
+        "rc-image": "~7.6.0",
+        "rc-input": "~1.4.5",
+        "rc-input-number": "~9.0.0",
+        "rc-mentions": "~2.11.1",
+        "rc-menu": "~9.13.0",
         "rc-motion": "^2.9.0",
-        "rc-notification": "~5.3.0",
+        "rc-notification": "~5.4.0",
         "rc-pagination": "~4.0.4",
-        "rc-picker": "~3.14.6",
-        "rc-progress": "~3.5.1",
+        "rc-picker": "~4.4.2",
+        "rc-progress": "~4.0.0",
         "rc-rate": "~2.12.0",
         "rc-resize-observer": "^1.4.0",
-        "rc-segmented": "~2.2.2",
-        "rc-select": "~14.11.0",
-        "rc-slider": "~10.5.0",
+        "rc-segmented": "~2.3.0",
+        "rc-select": "~14.13.1",
+        "rc-slider": "~10.6.2",
         "rc-steps": "~6.0.1",
         "rc-switch": "~4.1.0",
-        "rc-table": "~7.37.0",
-        "rc-tabs": "~14.0.0",
+        "rc-table": "~7.45.4",
+        "rc-tabs": "~14.1.1",
         "rc-textarea": "~1.6.3",
-        "rc-tooltip": "~6.1.3",
-        "rc-tree": "~5.8.2",
-        "rc-tree-select": "~5.17.0",
+        "rc-tooltip": "~6.2.0",
+        "rc-tree": "~5.8.5",
+        "rc-tree-select": "~5.19.0",
         "rc-upload": "~4.5.2",
-        "rc-util": "^5.38.1",
+        "rc-util": "^5.39.1",
         "scroll-into-view-if-needed": "^3.1.0",
         "throttle-debounce": "^5.0.0"
       },
@@ -2441,25 +2354,29 @@
       "dev": true
     },
     "node_modules/array-buffer-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
-      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "is-array-buffer": "^3.0.1"
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/array-includes": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmmirror.com/array-includes/-/array-includes-3.1.7.tgz",
-      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmmirror.com/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
         "is-string": "^1.0.7"
       },
       "engines": {
@@ -2481,16 +2398,17 @@
       }
     },
     "node_modules/array.prototype.findlastindex": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmmirror.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
-      "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmmirror.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
+      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2498,7 +2416,7 @@
     },
     "node_modules/array.prototype.flat": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "resolved": "https://registry.npmmirror.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
       "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
       "dev": true,
       "dependencies": {
@@ -2509,14 +2427,11 @@
       },
       "engines": {
         "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/array.prototype.flatmap": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "resolved": "https://registry.npmmirror.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
       "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
       "dev": true,
       "dependencies": {
@@ -2527,22 +2442,21 @@
       },
       "engines": {
         "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.1.tgz",
-      "integrity": "sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
       "dev": true,
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "get-intrinsic": "^1.2.1",
-        "is-array-buffer": "^3.0.2",
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
         "is-shared-array-buffer": "^1.0.2"
       },
       "engines": {
@@ -2571,7 +2485,7 @@
     },
     "node_modules/async-validator": {
       "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
     "node_modules/asynckit": {
@@ -2580,20 +2494,23 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
       "dev": true,
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/axios": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.5.tgz",
-      "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
       "dependencies": {
-        "follow-redirects": "^1.15.4",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -2605,22 +2522,21 @@
       "dev": true
     },
     "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
       "dev": true,
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dev": true,
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "balanced-match": "^1.0.0"
       }
     },
     "node_modules/braces": {
@@ -2636,15 +2552,15 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.21.10",
-      "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.21.10.tgz",
-      "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.23.0.tgz",
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
       "dev": true,
       "dependencies": {
-        "caniuse-lite": "^1.0.30001517",
-        "electron-to-chromium": "^1.4.477",
-        "node-releases": "^2.0.13",
-        "update-browserslist-db": "^1.0.11"
+        "caniuse-lite": "^1.0.30001587",
+        "electron-to-chromium": "^1.4.668",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.0.13"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -2653,10 +2569,20 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/builtin-modules": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/builtin-modules/-/builtin-modules-3.3.0.tgz",
+      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/builtins": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmmirror.com/builtins/-/builtins-5.0.1.tgz",
-      "integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/builtins/-/builtins-5.1.0.tgz",
+      "integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -2677,9 +2603,9 @@
       }
     },
     "node_modules/builtins/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -2700,15 +2626,27 @@
       "peer": true
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dev": true,
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
+    "node_modules/call-me-maybe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
+      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==",
+      "dev": true
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
@@ -2753,14 +2691,14 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001525",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001525.tgz",
-      "integrity": "sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==",
+      "version": "1.0.30001614",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001614.tgz",
+      "integrity": "sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog==",
       "dev": true
     },
     "node_modules/chalk": {
       "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "dev": true,
       "dependencies": {
@@ -2773,9 +2711,9 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
-      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
@@ -2820,7 +2758,7 @@
     },
     "node_modules/color-convert": {
       "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
       "dev": true,
       "dependencies": {
@@ -2829,7 +2767,7 @@
     },
     "node_modules/color-name": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
@@ -2853,7 +2791,7 @@
     },
     "node_modules/compute-scroll-into-view": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
       "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
     },
     "node_modules/concat-map": {
@@ -2862,9 +2800,15 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/confbox": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.1.7.tgz",
+      "integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==",
+      "dev": true
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
@@ -2877,9 +2821,9 @@
       }
     },
     "node_modules/cosmiconfig": {
-      "version": "8.3.3",
-      "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-8.3.3.tgz",
-      "integrity": "sha512-/VY+0IvFoE47hwgKHu8feeBFIb1Z1mcJFiLrNwaJpLoLa9qwLVquMGMr2OUwQmhpJDtsSQSasg/TMv1imec9xA==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
       "dev": true,
       "dependencies": {
         "import-fresh": "^3.3.0",
@@ -2914,13 +2858,13 @@
       }
     },
     "node_modules/css-functions-list": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmmirror.com/css-functions-list/-/css-functions-list-3.2.0.tgz",
-      "integrity": "sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/css-functions-list/-/css-functions-list-3.2.2.tgz",
+      "integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==",
       "dev": true,
       "peer": true,
       "engines": {
-        "node": ">=12.22"
+        "node": ">=12 || >=16"
       }
     },
     "node_modules/cssesc": {
@@ -2955,12 +2899,12 @@
     },
     "node_modules/custom-protocol-check": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/custom-protocol-check/-/custom-protocol-check-1.4.0.tgz",
+      "resolved": "https://registry.npmmirror.com/custom-protocol-check/-/custom-protocol-check-1.4.0.tgz",
       "integrity": "sha512-eMTyp8AKnE5eo+mKNqG3743eb5ZND5LhBgf9F8BN2tVdhSBnOCHH7me7iTcv0BUDhUW2dBQiHWLWMy776yZW1A=="
     },
     "node_modules/data-urls": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/data-urls/-/data-urls-5.0.0.tgz",
       "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
       "dev": true,
       "dependencies": {
@@ -2971,10 +2915,52 @@
         "node": ">=18"
       }
     },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/dayjs": {
-      "version": "1.11.10",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+      "version": "1.11.11",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz",
+      "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -3040,25 +3026,26 @@
       "dev": true
     },
     "node_modules/define-data-property": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
-      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/define-properties": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.0.tgz",
-      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
       "dev": true,
       "dependencies": {
+        "define-data-property": "^1.0.1",
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
       },
@@ -3109,23 +3096,23 @@
       }
     },
     "node_modules/echarts": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
-      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
+      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
       "dependencies": {
         "tslib": "2.3.0",
-        "zrender": "5.4.4"
+        "zrender": "5.5.0"
       }
     },
     "node_modules/echarts/node_modules/tslib": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.508",
-      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.508.tgz",
-      "integrity": "sha512-FFa8QKjQK/A5QuFr2167myhMesGrhlOBD+3cYNxO9/S4XzHEXesyTD/1/xF644gC8buFPz3ca6G1LOQD0tZrrg==",
+      "version": "1.4.752",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.752.tgz",
+      "integrity": "sha512-P3QJreYI/AUTcfBVrC4zy9KvnZWekViThgQMX/VpJ+IsOBbcX5JFpORM4qWapwWQ+agb2nYAOyn/4PMXOk0m2Q==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -3154,76 +3141,116 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmmirror.com/es-abstract/-/es-abstract-1.22.1.tgz",
-      "integrity": "sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==",
+      "version": "1.23.3",
+      "resolved": "https://registry.npmmirror.com/es-abstract/-/es-abstract-1.23.3.tgz",
+      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
       "dev": true,
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "arraybuffer.prototype.slice": "^1.0.1",
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-set-tostringtag": "^2.0.1",
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
         "es-to-primitive": "^1.2.1",
-        "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.2.1",
-        "get-symbol-description": "^1.0.0",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
-        "has": "^1.0.3",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.5",
-        "is-array-buffer": "^3.0.2",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
         "is-callable": "^1.2.7",
-        "is-negative-zero": "^2.0.2",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
+        "is-shared-array-buffer": "^1.0.3",
         "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.10",
+        "is-typed-array": "^1.1.13",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.3",
+        "object-inspect": "^1.13.1",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.0",
-        "safe-array-concat": "^1.0.0",
-        "safe-regex-test": "^1.0.0",
-        "string.prototype.trim": "^1.2.7",
-        "string.prototype.trimend": "^1.0.6",
-        "string.prototype.trimstart": "^1.0.6",
-        "typed-array-buffer": "^1.0.0",
-        "typed-array-byte-length": "^1.0.0",
-        "typed-array-byte-offset": "^1.0.0",
-        "typed-array-length": "^1.0.4",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.6",
         "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.10"
+        "which-typed-array": "^1.1.15"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
-      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.1.3",
-        "has": "^1.0.3",
-        "has-tostringtag": "^1.0.0"
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/es-shim-unscopables": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
-      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
+      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
       "dev": true,
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
       }
     },
     "node_modules/es-to-primitive": {
@@ -3241,9 +3268,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.19.8",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.8.tgz",
-      "integrity": "sha512-l7iffQpT2OrZfH2rXIp7/FkmaeZM0vxbxN9KfiCwGYuZqzMg/JdvX26R31Zxn/Pxvsrg3Y9N6XTcnknqDyyv4w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -3253,34 +3280,35 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.19.8",
-        "@esbuild/android-arm64": "0.19.8",
-        "@esbuild/android-x64": "0.19.8",
-        "@esbuild/darwin-arm64": "0.19.8",
-        "@esbuild/darwin-x64": "0.19.8",
-        "@esbuild/freebsd-arm64": "0.19.8",
-        "@esbuild/freebsd-x64": "0.19.8",
-        "@esbuild/linux-arm": "0.19.8",
-        "@esbuild/linux-arm64": "0.19.8",
-        "@esbuild/linux-ia32": "0.19.8",
-        "@esbuild/linux-loong64": "0.19.8",
-        "@esbuild/linux-mips64el": "0.19.8",
-        "@esbuild/linux-ppc64": "0.19.8",
-        "@esbuild/linux-riscv64": "0.19.8",
-        "@esbuild/linux-s390x": "0.19.8",
-        "@esbuild/linux-x64": "0.19.8",
-        "@esbuild/netbsd-x64": "0.19.8",
-        "@esbuild/openbsd-x64": "0.19.8",
-        "@esbuild/sunos-x64": "0.19.8",
-        "@esbuild/win32-arm64": "0.19.8",
-        "@esbuild/win32-ia32": "0.19.8",
-        "@esbuild/win32-x64": "0.19.8"
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
       }
     },
     "node_modules/esbuild-wasm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmmirror.com/esbuild-wasm/-/esbuild-wasm-0.19.12.tgz",
-      "integrity": "sha512-Zmc4hk6FibJZBcTx5/8K/4jT3/oG1vkGTEeKJUQFCUQKimD6Q7+adp/bdVQyYJFolMKaXkQnVZdV4O5ZaTYmyQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/esbuild-wasm/-/esbuild-wasm-0.20.2.tgz",
+      "integrity": "sha512-7o6nmsEqlcXJXMNqnx5K+M4w4OPx7yTFXQHcJyeP3SkXb8p2T8N9E1ayK4vd/qDBepH6fuPoZwiFvZm8x5qv+w==",
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -3289,9 +3317,9 @@
       }
     },
     "node_modules/escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -3299,7 +3327,7 @@
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "dev": true,
       "engines": {
@@ -3307,16 +3335,16 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmmirror.com/eslint/-/eslint-8.56.0.tgz",
-      "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmmirror.com/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.56.0",
-        "@humanwhocodes/config-array": "^0.11.13",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -3358,9 +3386,78 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/eslint-compat-utils": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmmirror.com/eslint-compat-utils/-/eslint-compat-utils-0.5.0.tgz",
+      "integrity": "sha512-dc6Y8tzEcSYZMHa+CMPLi/hyo1FzNeonbhJL7Ol0ccuKQkwopJcJBA9YL/xmMTLU1eKigXo9vj9nALElWYSowg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
+      }
+    },
+    "node_modules/eslint-compat-utils/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint-compat-utils/node_modules/semver": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint-compat-utils/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/eslint-config-love": {
+      "version": "47.0.0",
+      "resolved": "https://registry.npmmirror.com/eslint-config-love/-/eslint-config-love-47.0.0.tgz",
+      "integrity": "sha512-wIeJhb4/NF7nE5Ltppg1e9dp1Auxx0+ZPRysrXQ3uBKlW4Nj/UiTZu4r3sKWCxo6HGcRcI4MC1Q5421y3fny2w==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/parser": "^7.0.1"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^7.0.1",
+        "eslint": "^8.0.1",
+        "eslint-plugin-import": "^2.25.2",
+        "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+        "eslint-plugin-promise": "^6.0.0",
+        "typescript": "*"
+      }
+    },
     "node_modules/eslint-config-prettier": {
       "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
       "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
       "dev": true,
       "bin": {
@@ -3370,39 +3467,6 @@
         "eslint": ">=7.0.0"
       }
     },
-    "node_modules/eslint-config-standard": {
-      "version": "17.1.0",
-      "resolved": "https://registry.npmmirror.com/eslint-config-standard/-/eslint-config-standard-17.1.0.tgz",
-      "integrity": "sha512-IwHwmaBNtDK4zDHQukFDW5u/aTb8+meQWZvNFWkiGmbWjD6bqyuSSBxxXKkCftCUzc1zwCH2m/baCNDLGmuO5Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "eslint": "^8.0.1",
-        "eslint-plugin-import": "^2.25.2",
-        "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
-        "eslint-plugin-promise": "^6.0.0"
-      }
-    },
-    "node_modules/eslint-config-standard-with-typescript": {
-      "version": "43.0.1",
-      "resolved": "https://registry.npmmirror.com/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-43.0.1.tgz",
-      "integrity": "sha512-WfZ986+qzIzX6dcr4yGUyVb/l9N3Z8wPXCc5z/70fljs3UbWhhV+WxrfgsqMToRzuuyX9MqZ974pq2UPhDTOcA==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/parser": "^6.4.0",
-        "eslint-config-standard": "17.1.0"
-      },
-      "peerDependencies": {
-        "@typescript-eslint/eslint-plugin": "^6.4.0",
-        "eslint": "^8.0.1",
-        "eslint-plugin-import": "^2.25.2",
-        "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
-        "eslint-plugin-promise": "^6.0.0",
-        "typescript": "*"
-      }
-    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "resolved": "https://registry.npmmirror.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -3424,9 +3488,9 @@
       }
     },
     "node_modules/eslint-module-utils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmmirror.com/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz",
-      "integrity": "sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz",
+      "integrity": "sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==",
       "dev": true,
       "dependencies": {
         "debug": "^3.2.7"
@@ -3450,14 +3514,15 @@
       }
     },
     "node_modules/eslint-plugin-es-x": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-es-x/-/eslint-plugin-es-x-7.2.0.tgz",
-      "integrity": "sha512-9dvv5CcvNjSJPqnS5uZkqb3xmbeqRLnvXKK7iI5+oK/yTusyc46zbBZKENGsOfojm/mKfszyZb+wNqNPAPeGXA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-es-x/-/eslint-plugin-es-x-7.6.0.tgz",
+      "integrity": "sha512-I0AmeNgevgaTR7y2lrVCJmGYF0rjoznpDvqV/kIkZSZbZ8Rw3eu4cGlvBBULScfkSOCzqKbff5LR4CNrV7mZHA==",
       "dev": true,
       "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.1.2",
-        "@eslint-community/regexpp": "^4.6.0"
+        "@eslint-community/regexpp": "^4.6.0",
+        "eslint-compat-utils": "^0.5.0"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -3497,6 +3562,16 @@
         "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
       }
     },
+    "node_modules/eslint-plugin-import/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "node_modules/eslint-plugin-import/node_modules/debug": {
       "version": "3.2.7",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
@@ -3518,17 +3593,32 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eslint-plugin-import/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/eslint-plugin-n": {
-      "version": "16.0.2",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-n/-/eslint-plugin-n-16.0.2.tgz",
-      "integrity": "sha512-Y66uDfUNbBzypsr0kELWrIz+5skicECrLUqlWuXawNSLUq3ltGlCwu6phboYYOTSnoTdHgTLrc+5Ydo6KjzZog==",
+      "version": "16.6.2",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-n/-/eslint-plugin-n-16.6.2.tgz",
+      "integrity": "sha512-6TyDmZ1HXoFQXnhCTUjVFULReoBPOAjpuiKELMkeP40yffI/1ZRO+d9ug/VC6fqISo2WkuIBk3cvuRPALaWlOQ==",
       "dev": true,
       "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "builtins": "^5.0.1",
-        "eslint-plugin-es-x": "^7.1.0",
+        "eslint-plugin-es-x": "^7.5.0",
+        "get-tsconfig": "^4.7.0",
+        "globals": "^13.24.0",
         "ignore": "^5.2.4",
+        "is-builtin-module": "^3.2.1",
         "is-core-module": "^2.12.1",
         "minimatch": "^3.1.2",
         "resolve": "^1.22.2",
@@ -3541,6 +3631,30 @@
         "eslint": ">=7.0.0"
       }
     },
+    "node_modules/eslint-plugin-n/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint-plugin-n/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmmirror.com/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/eslint-plugin-n/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -3554,10 +3668,23 @@
         "node": ">=10"
       }
     },
+    "node_modules/eslint-plugin-n/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/eslint-plugin-n/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -3570,6 +3697,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/eslint-plugin-n/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/eslint-plugin-n/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
@@ -3617,9 +3754,9 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
       "dev": true,
       "engines": {
         "node": ">=10"
@@ -3629,9 +3766,9 @@
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.5.tgz",
-      "integrity": "sha512-D53FYKJa+fDmZMtriODxvhwrO+IOqrxoEo21gMA0sjHdU6dPVH4OhyFip9ypl8HOF5RV5KdTo+rBQLvnY2cO8w==",
+      "version": "0.4.6",
+      "resolved": "https://registry.npmmirror.com/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.6.tgz",
+      "integrity": "sha512-NjGXdm7zgcKRkKMua34qVO9doI7VOxZ6ancSvBELJSSoX97jyndXcSoa8XBh69JoB31dNz3EEzlMcizZl7LaMA==",
       "dev": true,
       "peerDependencies": {
         "eslint": ">=7"
@@ -3671,6 +3808,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "node_modules/eslint/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
@@ -3712,9 +3859,9 @@
       }
     },
     "node_modules/eslint/node_modules/globals": {
-      "version": "13.21.0",
-      "resolved": "https://registry.npmmirror.com/globals/-/globals-13.21.0.tgz",
-      "integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
+      "version": "13.24.0",
+      "resolved": "https://registry.npmmirror.com/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -3732,6 +3879,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@@ -3755,7 +3914,7 @@
     },
     "node_modules/espree": {
       "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "resolved": "https://registry.npmmirror.com/espree/-/espree-9.6.1.tgz",
       "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
       "dependencies": {
@@ -3765,9 +3924,6 @@
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/esquery": {
@@ -3818,9 +3974,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-diff": {
@@ -3831,7 +4007,7 @@
     },
     "node_modules/fast-glob": {
       "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dev": true,
       "dependencies": {
@@ -3859,7 +4035,7 @@
     },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true
     },
@@ -3880,18 +4056,18 @@
       }
     },
     "node_modules/fastq": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmmirror.com/fastq/-/fastq-1.15.0.tgz",
-      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "version": "1.17.1",
+      "resolved": "https://registry.npmmirror.com/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
       "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
     },
     "node_modules/fflate": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.8.1.tgz",
-      "integrity": "sha512-/exOvEuc+/iaUm105QIiOt4LpBdMTWsXxqR0HDF35vx3fmaKzw7354gTilCh5rkzEt8WYyG//ku3h3nRmd7CHQ=="
+      "version": "0.8.2",
+      "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
     },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
@@ -3931,29 +4107,29 @@
       }
     },
     "node_modules/flat-cache": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/flat-cache/-/flat-cache-3.1.0.tgz",
-      "integrity": "sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
       "dev": true,
       "dependencies": {
-        "flatted": "^3.2.7",
+        "flatted": "^3.2.9",
         "keyv": "^4.5.3",
         "rimraf": "^3.0.2"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": "^10.12.0 || >=12.0.0"
       }
     },
     "node_modules/flatted": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmmirror.com/flatted/-/flatted-3.2.7.tgz",
-      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "engines": {
         "node": ">=4.0"
       },
@@ -4007,12 +4183,9 @@
     },
     "node_modules/function-bind": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
+      "dev": true
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.6",
@@ -4045,15 +4218,19 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dev": true,
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3"
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/get-stream": {
@@ -4066,18 +4243,29 @@
       }
     },
     "node_modules/get-symbol-description": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
-      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-tsconfig": {
+      "version": "4.7.3",
+      "resolved": "https://registry.npmmirror.com/get-tsconfig/-/get-tsconfig-4.7.3.tgz",
+      "integrity": "sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
@@ -4107,6 +4295,28 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/global-modules": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/global-modules/-/global-modules-2.0.0.tgz",
@@ -4150,7 +4360,7 @@
     },
     "node_modules/globals": {
       "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true,
       "engines": {
@@ -4158,12 +4368,13 @@
       }
     },
     "node_modules/globalthis": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/globalthis/-/globalthis-1.0.3.tgz",
-      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
       "dev": true,
       "dependencies": {
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4218,18 +4429,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
-      "dependencies": {
-        "function-bind": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -4238,7 +4437,7 @@
     },
     "node_modules/has-flag": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "dev": true,
       "engines": {
@@ -4246,18 +4445,18 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.1.1"
+        "es-define-property": "^1.0.0"
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -4273,21 +4472,21 @@
       }
     },
     "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dev": true,
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
-      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -4331,7 +4530,7 @@
     },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
       "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
       "dev": true,
       "dependencies": {
@@ -4352,9 +4551,9 @@
       }
     },
     "node_modules/http-proxy-agent": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
-      "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmmirror.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "dev": true,
       "dependencies": {
         "agent-base": "^7.1.0",
@@ -4365,9 +4564,9 @@
       }
     },
     "node_modules/https-proxy-agent": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.2.tgz",
-      "integrity": "sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
+      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
       "dev": true,
       "dependencies": {
         "agent-base": "^7.0.2",
@@ -4377,9 +4576,18 @@
         "node": ">= 14"
       }
     },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "dependencies": {
@@ -4390,9 +4598,9 @@
       }
     },
     "node_modules/ignore": {
-      "version": "5.2.4",
-      "resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.2.4.tgz",
-      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.3.1.tgz",
+      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
       "dev": true,
       "engines": {
         "node": ">= 4"
@@ -4404,9 +4612,9 @@
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
     "node_modules/immutable": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.4.tgz",
-      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "version": "4.3.5",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.5.tgz",
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
       "dev": true
     },
     "node_modules/import-fresh": {
@@ -4475,13 +4683,13 @@
       "peer": true
     },
     "node_modules/internal-slot": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmmirror.com/internal-slot/-/internal-slot-1.0.5.tgz",
-      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.0",
-        "has": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.0",
         "side-channel": "^1.0.4"
       },
       "engines": {
@@ -4489,14 +4697,16 @@
       }
     },
     "node_modules/is-array-buffer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmmirror.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/is-arrayish": {
@@ -4539,6 +4749,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-builtin-module": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
+      "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "builtin-modules": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.7.tgz",
@@ -4550,14 +4773,23 @@
     },
     "node_modules/is-core-module": {
       "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
       "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dev": true,
+      "dependencies": {
+        "is-typed-array": "^1.1.13"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/is-date-object": {
@@ -4604,9 +4836,9 @@
       }
     },
     "node_modules/is-negative-zero": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmmirror.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -4682,21 +4914,24 @@
       }
     },
     "node_modules/is-shared-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/is-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-3.0.0.tgz",
-      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "dev": true,
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": ">=8"
       }
     },
     "node_modules/is-string": {
@@ -4724,12 +4959,12 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmmirror.com/is-typed-array/-/is-typed-array-1.1.12.tgz",
-      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmmirror.com/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
       "dev": true,
       "dependencies": {
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4815,7 +5050,7 @@
     },
     "node_modules/jsesc": {
       "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true,
       "bin": {
@@ -4839,7 +5074,7 @@
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true
     },
@@ -4869,24 +5104,18 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonc-parser": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
-      "dev": true
-    },
     "node_modules/jwt-decode": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/jwt-decode/-/jwt-decode-4.0.0.tgz",
       "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/keyv": {
-      "version": "4.5.3",
-      "resolved": "https://registry.npmmirror.com/keyv/-/keyv-4.5.3.tgz",
-      "integrity": "sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==",
+      "version": "4.5.4",
+      "resolved": "https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "dev": true,
       "dependencies": {
         "json-buffer": "3.0.1"
@@ -4911,7 +5140,7 @@
     },
     "node_modules/kolorist": {
       "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "resolved": "https://registry.npmmirror.com/kolorist/-/kolorist-1.8.0.tgz",
       "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
       "dev": true
     },
@@ -4944,7 +5173,7 @@
     },
     "node_modules/local-pkg": {
       "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.5.0.tgz",
       "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
       "dev": true,
       "dependencies": {
@@ -4953,9 +5182,6 @@
       },
       "engines": {
         "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/localforage": {
@@ -5026,15 +5252,12 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.5",
-      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
-      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+      "version": "0.30.10",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.10.tgz",
+      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
       "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
       }
     },
     "node_modules/map-obj": {
@@ -5048,9 +5271,9 @@
       }
     },
     "node_modules/match-sorter": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmmirror.com/match-sorter/-/match-sorter-6.3.3.tgz",
-      "integrity": "sha512-sgiXxrRijEe0SzHKGX4HouCpfHRPnqteH42UdMEW7BlWy990ZkzcvonJGv4Uu9WE7Y1f8Yocm91+4qFPCbmNww==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmmirror.com/match-sorter/-/match-sorter-6.3.4.tgz",
+      "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==",
       "dependencies": {
         "@babel/runtime": "^7.23.8",
         "remove-accents": "0.5.0"
@@ -5135,12 +5358,12 @@
       }
     },
     "node_modules/mimic-fn": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-4.0.0.tgz",
-      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true,
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
       }
     },
     "node_modules/min-indent": {
@@ -5154,15 +5377,15 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "9.0.4",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
       "dev": true,
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": "*"
+        "node": ">=16 || 14 >=14.17"
       }
     },
     "node_modules/minimist": {
@@ -5187,15 +5410,15 @@
       }
     },
     "node_modules/mlly": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
-      "integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.7.0.tgz",
+      "integrity": "sha512-U9SDaXGEREBYQgfejV97coK0UL1r+qnF2SyO9A3qcI8MzKnsIFKHNVEkrDyNncQTKQQumsasmeq84eNMdBfsNQ==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.10.0",
-        "pathe": "^1.1.1",
-        "pkg-types": "^1.0.3",
-        "ufo": "^1.3.0"
+        "acorn": "^8.11.3",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.1.0",
+        "ufo": "^1.5.3"
       }
     },
     "node_modules/moment": {
@@ -5207,9 +5430,9 @@
       }
     },
     "node_modules/monaco-editor": {
-      "version": "0.45.0",
-      "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.45.0.tgz",
-      "integrity": "sha512-mjv1G1ZzfEE3k9HZN0dQ2olMdwIfaeAAjFiwNprLfYNRSz7ctv9XuCT7gPtBGrMUeV1/iZzYKj17Khu1hxoHOA=="
+      "version": "0.48.0",
+      "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.48.0.tgz",
+      "integrity": "sha512-goSDElNqFfw7iDHMg8WDATkfcyeLTNpBHQpO8incK6p5qZt5G/1j41X0xdGzpIkGojGXM+QiRQyLjnfDVvrpwA=="
     },
     "node_modules/monaco-jsx-syntax-highlight": {
       "version": "1.2.0",
@@ -5224,15 +5447,9 @@
     },
     "node_modules/nanoid": {
       "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -5257,9 +5474,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.13",
-      "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.13.tgz",
-      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
+      "version": "2.0.14",
+      "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
       "dev": true
     },
     "node_modules/normalize-package-data": {
@@ -5292,9 +5509,9 @@
       }
     },
     "node_modules/normalize-package-data/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -5324,30 +5541,21 @@
       }
     },
     "node_modules/npm-run-path": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-5.1.0.tgz",
-      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
       "dev": true,
       "dependencies": {
-        "path-key": "^4.0.0"
+        "path-key": "^3.0.0"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      }
-    },
-    "node_modules/npm-run-path/node_modules/path-key": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/path-key/-/path-key-4.0.0.tgz",
-      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
+        "node": ">=8"
       }
     },
     "node_modules/nwsapi": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmmirror.com/nwsapi/-/nwsapi-2.2.7.tgz",
-      "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
+      "version": "2.2.9",
+      "resolved": "https://registry.npmmirror.com/nwsapi/-/nwsapi-2.2.9.tgz",
+      "integrity": "sha512-2f3F0SEEer8bBu0dsNCFF50N0cTThV1nWFYcEYFZttdW0lDAoybv9cQoK7X7/68Z89S7FoRrVjP1LPX4XRf9vg==",
       "dev": true
     },
     "node_modules/object-assign": {
@@ -5359,9 +5567,9 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
       "dev": true
     },
     "node_modules/object-keys": {
@@ -5374,13 +5582,13 @@
       }
     },
     "node_modules/object.assign": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmmirror.com/object.assign/-/object.assign-4.1.4.tgz",
-      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "version": "4.1.5",
+      "resolved": "https://registry.npmmirror.com/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
         "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
@@ -5389,40 +5597,43 @@
       }
     },
     "node_modules/object.fromentries": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmmirror.com/object.fromentries/-/object.fromentries-2.0.7.tgz",
-      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmmirror.com/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/object.groupby": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/object.groupby/-/object.groupby-1.0.1.tgz",
-      "integrity": "sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/object.values": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmmirror.com/object.values/-/object.values-1.1.7.tgz",
-      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5438,29 +5649,29 @@
       }
     },
     "node_modules/onetime": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/onetime/-/onetime-6.0.0.tgz",
-      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "dev": true,
       "dependencies": {
-        "mimic-fn": "^4.0.0"
+        "mimic-fn": "^2.1.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
       }
     },
     "node_modules/optionator": {
-      "version": "0.9.3",
-      "resolved": "https://registry.npmmirror.com/optionator/-/optionator-0.9.3.tgz",
-      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
+      "version": "0.9.4",
+      "resolved": "https://registry.npmmirror.com/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "dev": true,
       "dependencies": {
-        "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
         "levn": "^0.4.1",
         "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0"
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -5579,9 +5790,9 @@
       }
     },
     "node_modules/pathe": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
-      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
       "dev": true
     },
     "node_modules/picocolors": {
@@ -5600,39 +5811,34 @@
       }
     },
     "node_modules/pkg-types": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
-      "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.1.0.tgz",
+      "integrity": "sha512-/RpmvKdxKf8uILTtoOhAgf30wYbP2Qw+L9p3Rvshx1JZVX+XQNZQFjlbmGHEGIm4CkVPlSn+NXmIM8+9oWQaSA==",
       "dev": true,
       "dependencies": {
-        "jsonc-parser": "^3.2.0",
-        "mlly": "^1.2.0",
-        "pathe": "^1.1.0"
+        "confbox": "^0.1.7",
+        "mlly": "^1.6.1",
+        "pathe": "^1.1.2"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.32",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
-      "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -5666,9 +5872,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "version": "6.0.16",
+      "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -5696,9 +5902,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.2.4.tgz",
-      "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -5747,7 +5953,7 @@
     },
     "node_modules/punycode": {
       "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true,
       "engines": {
@@ -5785,14 +5991,14 @@
       }
     },
     "node_modules/rc-cascader": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmmirror.com/rc-cascader/-/rc-cascader-3.21.0.tgz",
-      "integrity": "sha512-7aADjbfqiR4HrTHG9S019p2jeKM/AxISPA5+sBJR7Mlhm/i+lR7VjBju3KQulJNJLKNEnQYg4TFhcPf2SLua9g==",
+      "version": "3.24.1",
+      "resolved": "https://registry.npmmirror.com/rc-cascader/-/rc-cascader-3.24.1.tgz",
+      "integrity": "sha512-RgKuYgEGPx+6wCgguYFHjMsDZdCyydZd58YJRCfYQ8FObqLnZW0x/vUcEyPjhWIj1EhjV958IcR+NFPDbbj9kg==",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "array-tree-filter": "^2.1.0",
         "classnames": "^2.3.1",
-        "rc-select": "~14.11.0-0",
+        "rc-select": "~14.13.0",
         "rc-tree": "~5.8.1",
         "rc-util": "^5.37.0"
       },
@@ -5802,9 +6008,9 @@
       }
     },
     "node_modules/rc-checkbox": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/rc-checkbox/-/rc-checkbox-3.1.0.tgz",
-      "integrity": "sha512-PAwpJFnBa3Ei+5pyqMMXdcKYKNBMS+TvSDiLdDnARnMJHC8ESxwPfm4Ao1gJiKtWLdmGfigascnCpwrHFgoOBQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/rc-checkbox/-/rc-checkbox-3.2.0.tgz",
+      "integrity": "sha512-8inzw4y9dAhZmv/Ydl59Qdy5tdp9CKg4oPVcRigi+ga/yKPZS5m5SyyQPtYSgbcqHRYOdUhiPSeKfktc76du1A==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.3.2",
@@ -5816,9 +6022,9 @@
       }
     },
     "node_modules/rc-collapse": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-3.7.2.tgz",
-      "integrity": "sha512-ZRw6ipDyOnfLFySxAiCMdbHtb5ePAsB9mT17PA6y1mRD/W6KHRaZeb5qK/X9xDV1CqgyxMpzw0VdS74PCcUk4A==",
+      "version": "3.7.3",
+      "resolved": "https://registry.npmmirror.com/rc-collapse/-/rc-collapse-3.7.3.tgz",
+      "integrity": "sha512-60FJcdTRn0X5sELF18TANwtVi7FtModq649H11mYF1jh83DniMoM4MqY627sEKRCTm4+WXfGDcB7hY5oW6xhyw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -5831,9 +6037,9 @@
       }
     },
     "node_modules/rc-dialog": {
-      "version": "9.3.4",
-      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.3.4.tgz",
-      "integrity": "sha512-975X3018GhR+EjZFbxA2Z57SX5rnu0G0/OxFgMMvZK4/hQWEm3MHaNvP4wXpxYDoJsp+xUvVW+GB9CMMCm81jA==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmmirror.com/rc-dialog/-/rc-dialog-9.4.0.tgz",
+      "integrity": "sha512-AScCexaLACvf8KZRqCPz12BJ8olszXOS4lKlkMyzDQHS1m0zj1KZMYgmMCh39ee0Dcv8kyrj8mTqxuLyhH+QuQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/portal": "^1.0.0-8",
@@ -5847,15 +6053,15 @@
       }
     },
     "node_modules/rc-drawer": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmmirror.com/rc-drawer/-/rc-drawer-7.0.0.tgz",
-      "integrity": "sha512-ePcS4KtQnn57bCbVXazHN2iC8nTPCXlWEIA/Pft87Pd9U7ZeDkdRzG47jWG2/TAFXFlFltRAMcslqmUM8NPCGA==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmmirror.com/rc-drawer/-/rc-drawer-7.1.0.tgz",
+      "integrity": "sha512-nBE1rF5iZvpavoyqhSSz2mk/yANltA7g3aF0U45xkx381n3we/RKs9cJfNKp9mSWCedOKWt9FLEwZDaAaOGn2w==",
       "dependencies": {
-        "@babel/runtime": "^7.10.1",
+        "@babel/runtime": "^7.23.9",
         "@rc-component/portal": "^1.1.1",
         "classnames": "^2.2.6",
         "rc-motion": "^2.6.1",
-        "rc-util": "^5.36.0"
+        "rc-util": "^5.38.1"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -5863,12 +6069,12 @@
       }
     },
     "node_modules/rc-dropdown": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/rc-dropdown/-/rc-dropdown-4.1.0.tgz",
-      "integrity": "sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/rc-dropdown/-/rc-dropdown-4.2.0.tgz",
+      "integrity": "sha512-odM8Ove+gSh0zU27DUj5cG1gNKg7mLWBYzB5E4nNLrLwBmYEgYP43vHKDGOVZcJSVElQBI0+jTQgjnq0NfLjng==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@rc-component/trigger": "^1.7.0",
+        "@rc-component/trigger": "^2.0.0",
         "classnames": "^2.2.6",
         "rc-util": "^5.17.0"
       },
@@ -5878,9 +6084,9 @@
       }
     },
     "node_modules/rc-field-form": {
-      "version": "1.41.0",
-      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.41.0.tgz",
-      "integrity": "sha512-k9AS0wmxfJfusWDP/YXWTpteDNaQ4isJx9UKxx4/e8Dub4spFeZ54/EuN2sYrMRID/+hUznPgVZeg+Gf7XSYCw==",
+      "version": "1.44.0",
+      "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.44.0.tgz",
+      "integrity": "sha512-el7w87fyDUsca63Y/s8qJcq9kNkf/J5h+iTdqG5WsSHLH0e6Usl7QuYSmSVzJMgtp40mOVZIY/W/QP9zwrp1FA==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "async-validator": "^4.1.0",
@@ -5895,14 +6101,14 @@
       }
     },
     "node_modules/rc-image": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-7.5.1.tgz",
-      "integrity": "sha512-Z9loECh92SQp0nSipc0MBuf5+yVC05H/pzC+Nf8xw1BKDFUJzUeehYBjaWlxly8VGBZJcTHYri61Fz9ng1G3Ag==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmmirror.com/rc-image/-/rc-image-7.6.0.tgz",
+      "integrity": "sha512-tL3Rvd1sS+frZQ01i+tkeUPaOeFz2iG9/scAt/Cfs0hyCRVA/w0Pu1J/JxIX8blalvmHE0bZQRYdOmRAzWu4Hg==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "@rc-component/portal": "^1.0.2",
         "classnames": "^2.2.6",
-        "rc-dialog": "~9.3.4",
+        "rc-dialog": "~9.4.0",
         "rc-motion": "^2.6.2",
         "rc-util": "^5.34.1"
       },
@@ -5912,9 +6118,9 @@
       }
     },
     "node_modules/rc-input": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmmirror.com/rc-input/-/rc-input-1.4.3.tgz",
-      "integrity": "sha512-aHyQUAIRmTlOnvk5EcNqEpJ+XMtfMpYRAJayIlJfsvvH9cAKUWboh4egm23vgMA7E+c/qm4BZcnrDcA960GC1w==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmmirror.com/rc-input/-/rc-input-1.4.5.tgz",
+      "integrity": "sha512-AjzykhwnwYTRSwwgCu70CGKBIAv6bP2nqnFptnNTprph/TF1BAs0Qxl91mie/BR6n827WIJB6ZjaRf9iiMwAfw==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -5926,9 +6132,9 @@
       }
     },
     "node_modules/rc-input-number": {
-      "version": "8.6.1",
-      "resolved": "https://registry.npmmirror.com/rc-input-number/-/rc-input-number-8.6.1.tgz",
-      "integrity": "sha512-gaAMUKtUKLktJ3Yx93tjgYY1M0HunnoqzPEqkb9//Ydup4DcG0TFL9yHBA3pgVdNIt5f0UWyHCgFBj//JxeD6A==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmmirror.com/rc-input-number/-/rc-input-number-9.0.0.tgz",
+      "integrity": "sha512-RfcDBDdWFFetouWFXBA+WPEC8LzBXyngr9b+yTLVIygfFu7HiLRGn/s/v9wwno94X7KFvnb28FNynMGj9XJlDQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/mini-decimal": "^1.0.1",
@@ -5942,15 +6148,15 @@
       }
     },
     "node_modules/rc-mentions": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmmirror.com/rc-mentions/-/rc-mentions-2.10.1.tgz",
-      "integrity": "sha512-72qsEcr/7su+a07ndJ1j8rI9n0Ka/ngWOLYnWMMv0p2mi/5zPwPrEDTt6Uqpe8FWjWhueDJx/vzunL6IdKDYMg==",
+      "version": "2.11.1",
+      "resolved": "https://registry.npmmirror.com/rc-mentions/-/rc-mentions-2.11.1.tgz",
+      "integrity": "sha512-upb4AK1SRFql7qGnbLEvJqLMugVVIyjmwBJW9L0eLoN9po4JmJZaBzmKA4089fNtsU8k6l/tdZiVafyooeKnLw==",
       "dependencies": {
         "@babel/runtime": "^7.22.5",
-        "@rc-component/trigger": "^1.5.0",
+        "@rc-component/trigger": "^2.0.0",
         "classnames": "^2.2.6",
         "rc-input": "~1.4.0",
-        "rc-menu": "~9.12.0",
+        "rc-menu": "~9.13.0",
         "rc-textarea": "~1.6.1",
         "rc-util": "^5.34.1"
       },
@@ -5960,12 +6166,12 @@
       }
     },
     "node_modules/rc-menu": {
-      "version": "9.12.4",
-      "resolved": "https://registry.npmmirror.com/rc-menu/-/rc-menu-9.12.4.tgz",
-      "integrity": "sha512-t2NcvPLV1mFJzw4F21ojOoRVofK2rWhpKPx69q2raUsiHPDP6DDevsBILEYdsIegqBeSXoWs2bf6CueBKg3BFg==",
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/rc-menu/-/rc-menu-9.13.0.tgz",
+      "integrity": "sha512-1l8ooCB3HcYJKCltC/s7OxRKRjgymdl9htrCeGZcXNaMct0RxZRK6OPV3lPhVksIvAGMgzPd54ClpZ5J4b8cZA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
-        "@rc-component/trigger": "^1.17.0",
+        "@rc-component/trigger": "^2.0.0",
         "classnames": "2.x",
         "rc-motion": "^2.4.3",
         "rc-overflow": "^1.3.1",
@@ -5978,7 +6184,7 @@
     },
     "node_modules/rc-motion": {
       "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.0.tgz",
+      "resolved": "https://registry.npmmirror.com/rc-motion/-/rc-motion-2.9.0.tgz",
       "integrity": "sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
@@ -5991,9 +6197,9 @@
       }
     },
     "node_modules/rc-notification": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-5.3.0.tgz",
-      "integrity": "sha512-WCf0uCOkZ3HGfF0p1H4Sgt7aWfipxORWTPp7o6prA3vxwtWhtug3GfpYls1pnBp4WA+j8vGIi5c2/hQRpGzPcQ==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmmirror.com/rc-notification/-/rc-notification-5.4.0.tgz",
+      "integrity": "sha512-li19y9RoYJciF3WRFvD+DvWS70jdL8Fr+Gfb/OshK+iY6iTkwzoigmSIp76/kWh5tF5i/i9im12X3nsF85GYdA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -6038,14 +6244,16 @@
       }
     },
     "node_modules/rc-picker": {
-      "version": "3.14.6",
-      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-3.14.6.tgz",
-      "integrity": "sha512-AdKKW0AqMwZsKvIpwUWDUnpuGKZVrbxVTZTNjcO+pViGkjC1EBcjMgxVe8tomOEaIHJL5Gd13vS8Rr3zzxWmag==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmmirror.com/rc-picker/-/rc-picker-4.4.2.tgz",
+      "integrity": "sha512-MdbAXvwiGyhb+bHe66qPps8xPQivzEgcyCp3/MPK4T+oER0gOmVRCEDxaD4FhYG/7GLH3rDrHpu79BvEn2JFTQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
-        "@rc-component/trigger": "^1.5.0",
+        "@rc-component/trigger": "^2.0.0",
         "classnames": "^2.2.1",
-        "rc-util": "^5.30.0"
+        "rc-overflow": "^1.3.2",
+        "rc-resize-observer": "^1.4.0",
+        "rc-util": "^5.38.1"
       },
       "engines": {
         "node": ">=8.x"
@@ -6074,9 +6282,9 @@
       }
     },
     "node_modules/rc-progress": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.5.1.tgz",
-      "integrity": "sha512-V6Amx6SbLRwPin/oD+k1vbPrO8+9Qf8zW1T8A7o83HdNafEVvAxPV5YsgtKFP+Ud5HghLj33zKOcEHrcrUGkfw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/rc-progress/-/rc-progress-4.0.0.tgz",
+      "integrity": "sha512-oofVMMafOCokIUIBnZLNcOZFsABaUw8PPrf1/y0ZBvKZNpOiu5h4AO9vv11Sw0p4Hb3D0yGWuEattcQGtNJ/aw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.6",
@@ -6106,7 +6314,7 @@
     },
     "node_modules/rc-resize-observer": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz",
+      "resolved": "https://registry.npmmirror.com/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz",
       "integrity": "sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==",
       "dependencies": {
         "@babel/runtime": "^7.20.7",
@@ -6120,9 +6328,9 @@
       }
     },
     "node_modules/rc-segmented": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmmirror.com/rc-segmented/-/rc-segmented-2.2.2.tgz",
-      "integrity": "sha512-Mq52M96QdHMsNdE/042ibT5vkcGcD5jxKp7HgPC2SRofpia99P5fkfHy1pEaajLMF/kj0+2Lkq1UZRvqzo9mSA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/rc-segmented/-/rc-segmented-2.3.0.tgz",
+      "integrity": "sha512-I3FtM5Smua/ESXutFfb8gJ8ZPcvFR+qUgeeGFQHBOvRiRKyAk4aBE5nfqrxXx+h8/vn60DQjOt6i4RNtrbOobg==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -6135,12 +6343,12 @@
       }
     },
     "node_modules/rc-select": {
-      "version": "14.11.0",
-      "resolved": "https://registry.npmmirror.com/rc-select/-/rc-select-14.11.0.tgz",
-      "integrity": "sha512-8J8G/7duaGjFiTXCBLWfh5P+KDWyA3KTlZDfV3xj/asMPqB2cmxfM+lH50wRiPIRsCQ6EbkCFBccPuaje3DHIg==",
+      "version": "14.13.1",
+      "resolved": "https://registry.npmmirror.com/rc-select/-/rc-select-14.13.1.tgz",
+      "integrity": "sha512-A1VHqjIOemxLnUGRxLGVqXBs8jGcJemI5NXxOJwU5PQc1wigAu1T4PRLgMkTPDOz8gPhlY9dwsPzMgakMc2QjQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
-        "@rc-component/trigger": "^1.5.0",
+        "@rc-component/trigger": "^2.1.1",
         "classnames": "2.x",
         "rc-motion": "^2.0.1",
         "rc-overflow": "^1.3.1",
@@ -6156,13 +6364,13 @@
       }
     },
     "node_modules/rc-slider": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.5.0.tgz",
-      "integrity": "sha512-xiYght50cvoODZYI43v3Ylsqiw14+D7ELsgzR40boDZaya1HFa1Etnv9MDkQE8X/UrXAffwv2AcNAhslgYuDTw==",
+      "version": "10.6.2",
+      "resolved": "https://registry.npmmirror.com/rc-slider/-/rc-slider-10.6.2.tgz",
+      "integrity": "sha512-FjkoFjyvUQWcBo1F3RgSglky3ar0+qHLM41PlFVYB4Bj3RD8E/Mv7kqMouLFBU+3aFglMzzctAIWRwajEuueSw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
-        "rc-util": "^5.27.0"
+        "rc-util": "^5.36.0"
       },
       "engines": {
         "node": ">=8.x"
@@ -6204,9 +6412,9 @@
       }
     },
     "node_modules/rc-table": {
-      "version": "7.37.0",
-      "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.37.0.tgz",
-      "integrity": "sha512-hEB17ktLRVfVmdo+U8MjGr+PuIgdQ8Cxj/N5lwMvP/Az7TOrQxwTMLVEDoj207tyPYLTWifHIF9EJREWwyk67g==",
+      "version": "7.45.5",
+      "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.45.5.tgz",
+      "integrity": "sha512-R5sOfToOk7CalSkebZpqM8lkKWOJR7uXPGEhjjTSoj5egyHBwMxaACoPj2oI+6qLSll9yZrG5K+8HTN57b2Ahg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/context": "^1.4.0",
@@ -6224,14 +6432,14 @@
       }
     },
     "node_modules/rc-tabs": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmmirror.com/rc-tabs/-/rc-tabs-14.0.0.tgz",
-      "integrity": "sha512-lp1YWkaPnjlyhOZCPrAWxK6/P6nMGX/BAZcAC3nuVwKz0Byfp+vNnQKK8BRCP2g/fzu+SeB5dm9aUigRu3tRkQ==",
+      "version": "14.1.1",
+      "resolved": "https://registry.npmmirror.com/rc-tabs/-/rc-tabs-14.1.1.tgz",
+      "integrity": "sha512-5nOr9PVpJy2SWHTLgv1+kESDOb0tFzl0cYU9r9d8LfL0Wg9i/n1B558rmkxdQHgBwMqxmwoyPSAbQROxMQe8nw==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
-        "rc-dropdown": "~4.1.0",
-        "rc-menu": "~9.12.0",
+        "rc-dropdown": "~4.2.0",
+        "rc-menu": "~9.13.0",
         "rc-motion": "^2.6.2",
         "rc-resize-observer": "^1.0.0",
         "rc-util": "^5.34.1"
@@ -6261,12 +6469,12 @@
       }
     },
     "node_modules/rc-tooltip": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmmirror.com/rc-tooltip/-/rc-tooltip-6.1.3.tgz",
-      "integrity": "sha512-HMSbSs5oieZ7XddtINUddBLSVgsnlaSb3bZrzzGWjXa7/B7nNedmsuz72s7EWFEro9mNa7RyF3gOXKYqvJiTcQ==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/rc-tooltip/-/rc-tooltip-6.2.0.tgz",
+      "integrity": "sha512-iS/3iOAvtDh9GIx1ulY7EFUXUtktFccNLsARo3NPgLf0QW9oT0w3dA9cYWlhqAKmD+uriEwdWz1kH0Qs4zk2Aw==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
-        "@rc-component/trigger": "^1.18.0",
+        "@rc-component/trigger": "^2.0.0",
         "classnames": "^2.3.1"
       },
       "peerDependencies": {
@@ -6275,9 +6483,9 @@
       }
     },
     "node_modules/rc-tree": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.8.2.tgz",
-      "integrity": "sha512-xH/fcgLHWTLmrSuNphU8XAqV7CdaOQgm4KywlLGNoTMhDAcNR3GVNP6cZzb0GrKmIZ9yae+QLot/cAgUdPRMzg==",
+      "version": "5.8.5",
+      "resolved": "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.8.5.tgz",
+      "integrity": "sha512-PRfcZtVDNkR7oh26RuNe1hpw11c1wfgzwmPFL0lnxGnYefe9lDAO6cg5wJKIAwyXFVt5zHgpjYmaz0CPy1ZtKg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -6294,13 +6502,13 @@
       }
     },
     "node_modules/rc-tree-select": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmmirror.com/rc-tree-select/-/rc-tree-select-5.17.0.tgz",
-      "integrity": "sha512-7sRGafswBhf7n6IuHyCEFCildwQIgyKiV8zfYyUoWfZEFdhuk7lCH+DN0aHt+oJrdiY9+6Io/LDXloGe01O8XQ==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmmirror.com/rc-tree-select/-/rc-tree-select-5.19.0.tgz",
+      "integrity": "sha512-f4l5EsmSGF3ggj76YTzKNPY9SnXfFaer7ZccTSGb3urUf54L+cCqyT+UsPr+S5TAr8mZSxJ7g3CgkCe+cVQ6sw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
-        "rc-select": "~14.11.0-0",
+        "rc-select": "~14.13.0",
         "rc-tree": "~5.8.1",
         "rc-util": "^5.16.1"
       },
@@ -6324,9 +6532,9 @@
       }
     },
     "node_modules/rc-util": {
-      "version": "5.38.1",
-      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.38.1.tgz",
-      "integrity": "sha512-e4ZMs7q9XqwTuhIK7zBIVFltUtMSjphuPPQXHoHlzRzNdOwUxDejo0Zls5HYaJfRKNURcsS/ceKVULlhjBrxng==",
+      "version": "5.39.1",
+      "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.39.1.tgz",
+      "integrity": "sha512-OW/ERynNDgNr4y0oiFmtes3rbEamXw7GHGbkbNd9iRr7kgT03T6fT0b9WpJ3mbxKhyOcAHnGcIoh5u/cjrC2OQ==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "react-is": "^18.2.0"
@@ -6337,9 +6545,9 @@
       }
     },
     "node_modules/rc-virtual-list": {
-      "version": "3.11.3",
-      "resolved": "https://registry.npmmirror.com/rc-virtual-list/-/rc-virtual-list-3.11.3.tgz",
-      "integrity": "sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==",
+      "version": "3.11.5",
+      "resolved": "https://registry.npmmirror.com/rc-virtual-list/-/rc-virtual-list-3.11.5.tgz",
+      "integrity": "sha512-iZRW99m5jAxtwKNPLwUrPryurcnKpXBdTyhuBp6ythf7kg/otKO5cCiIvL55GQwU0QGSlouQS0tnkciRMJUwRQ==",
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "classnames": "^2.2.6",
@@ -6350,14 +6558,14 @@
         "node": ">=8.x"
       },
       "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
       }
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmmirror.com/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmmirror.com/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -6366,15 +6574,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-draggable": {
@@ -6391,25 +6599,25 @@
       }
     },
     "node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+      "version": "18.3.1",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
     "node_modules/react-refresh": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz",
-      "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
+      "version": "0.14.2",
+      "resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.2.tgz",
+      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-router": {
-      "version": "6.21.3",
-      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.21.3.tgz",
-      "integrity": "sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
       "dependencies": {
-        "@remix-run/router": "1.14.2"
+        "@remix-run/router": "1.16.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6419,12 +6627,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.21.3",
-      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.21.3.tgz",
-      "integrity": "sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
       "dependencies": {
-        "@remix-run/router": "1.14.2",
-        "react-router": "6.21.3"
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6595,25 +6803,23 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
-      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "set-function-name": "^2.0.0"
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/remove-accents": {
@@ -6644,7 +6850,7 @@
     },
     "node_modules/resolve": {
       "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "dev": true,
       "dependencies": {
@@ -6654,9 +6860,6 @@
       },
       "bin": {
         "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/resolve-from": {
@@ -6668,6 +6871,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz",
@@ -6691,10 +6901,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.6.1.tgz",
-      "integrity": "sha512-jZHaZotEHQaHLgKr8JnQiDT1rmatjgKlMekyksz+yk9jt/8z9quNjnKNRoaM0wd9DC2QKXjmWWuDYtM3jfF8pQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.17.2.tgz",
+      "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
       "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -6703,18 +6916,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.6.1",
-        "@rollup/rollup-android-arm64": "4.6.1",
-        "@rollup/rollup-darwin-arm64": "4.6.1",
-        "@rollup/rollup-darwin-x64": "4.6.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.6.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.6.1",
-        "@rollup/rollup-linux-arm64-musl": "4.6.1",
-        "@rollup/rollup-linux-x64-gnu": "4.6.1",
-        "@rollup/rollup-linux-x64-musl": "4.6.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.6.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.6.1",
-        "@rollup/rollup-win32-x64-msvc": "4.6.1",
+        "@rollup/rollup-android-arm-eabi": "4.17.2",
+        "@rollup/rollup-android-arm64": "4.17.2",
+        "@rollup/rollup-darwin-arm64": "4.17.2",
+        "@rollup/rollup-darwin-x64": "4.17.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.17.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.17.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.17.2",
+        "@rollup/rollup-linux-arm64-musl": "4.17.2",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.17.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.17.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.17.2",
+        "@rollup/rollup-linux-x64-gnu": "4.17.2",
+        "@rollup/rollup-linux-x64-musl": "4.17.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.17.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.17.2",
+        "@rollup/rollup-win32-x64-msvc": "4.17.2",
         "fsevents": "~2.3.2"
       }
     },
@@ -6734,13 +6951,13 @@
       }
     },
     "node_modules/safe-array-concat": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
-      "integrity": "sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
         "has-symbols": "^1.0.3",
         "isarray": "^2.0.5"
       },
@@ -6749,26 +6966,29 @@
       }
     },
     "node_modules/safe-regex-test": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
-      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.3",
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
         "is-regex": "^1.1.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.70.0",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.70.0.tgz",
-      "integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==",
+      "version": "1.76.0",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.76.0.tgz",
+      "integrity": "sha512-nc3LeqvF2FNW5xGF1zxZifdW3ffIz5aBb7I7tSvOoNu7z1RQ6pFt9MBuiPtjgaI62YWrM/txjWlOCFiGtf2xpw==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -6795,25 +7015,25 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
     },
     "node_modules/scroll-into-view-if-needed": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
       "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
       "dependencies": {
         "compute-scroll-into-view": "^3.0.2"
       }
     },
     "node_modules/scule": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.2.0.tgz",
-      "integrity": "sha512-CRCmi5zHQnSoeCik9565PONMg0kfkvYmcSqrbOJY4txFfy1wvVULV4FDaiXhUblUgahdqz3F2NwHZ8i4eBTwUw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
       "dev": true
     },
     "node_modules/semver": {
@@ -6825,15 +7045,33 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/set-function-name": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
-      "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dev": true,
       "dependencies": {
-        "define-data-property": "^1.0.1",
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
         "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.0"
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6861,14 +7099,18 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/signal-exit": {
@@ -6879,7 +7121,7 @@
     },
     "node_modules/size-sensor": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-1.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-1.0.2.tgz",
       "integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw=="
     },
     "node_modules/slash": {
@@ -6950,9 +7192,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -6970,9 +7212,9 @@
       }
     },
     "node_modules/spdx-exceptions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
       "dev": true,
       "peer": true
     },
@@ -6988,9 +7230,9 @@
       }
     },
     "node_modules/spdx-license-ids": {
-      "version": "3.0.13",
-      "resolved": "https://registry.npmmirror.com/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz",
-      "integrity": "sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==",
+      "version": "3.0.17",
+      "resolved": "https://registry.npmmirror.com/spdx-license-ids/-/spdx-license-ids-3.0.17.tgz",
+      "integrity": "sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==",
       "dev": true,
       "peer": true
     },
@@ -6999,6 +7241,15 @@
       "resolved": "https://registry.npmmirror.com/state-local/-/state-local-1.0.7.tgz",
       "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
     "node_modules/string-convert": {
       "version": "0.2.1",
       "resolved": "https://registry.npmmirror.com/string-convert/-/string-convert-0.2.1.tgz",
@@ -7020,42 +7271,43 @@
       }
     },
     "node_modules/string.prototype.trim": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
-      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmmirror.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
-      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       }
     },
     "node_modules/string.prototype.trimstart": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmmirror.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
-      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/strip-ansi": {
@@ -7080,12 +7332,12 @@
       }
     },
     "node_modules/strip-final-newline": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
-      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true,
       "engines": {
-        "node": ">=12"
+        "node": ">=6"
       }
     },
     "node_modules/strip-indent": {
@@ -7103,14 +7355,11 @@
     },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true,
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/strip-literal": {
@@ -7233,13 +7482,13 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.1.tgz",
-      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+      "version": "4.3.2",
+      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
       "dev": true,
       "dependencies": {
@@ -7328,9 +7577,9 @@
       }
     },
     "node_modules/table": {
-      "version": "6.8.1",
-      "resolved": "https://registry.npmmirror.com/table/-/table-6.8.1.tgz",
-      "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==",
+      "version": "6.8.2",
+      "resolved": "https://registry.npmmirror.com/table/-/table-6.8.2.tgz",
+      "integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -7345,16 +7594,16 @@
       }
     },
     "node_modules/table/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.13.0.tgz",
+      "integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
+        "fast-deep-equal": "^3.1.3",
         "json-schema-traverse": "^1.0.0",
         "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
+        "uri-js": "^4.4.1"
       }
     },
     "node_modules/table/node_modules/json-schema-traverse": {
@@ -7405,9 +7654,9 @@
       "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
     },
     "node_modules/tough-cookie": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.1.3.tgz",
-      "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
       "dev": true,
       "dependencies": {
         "psl": "^1.1.33",
@@ -7421,7 +7670,7 @@
     },
     "node_modules/tr46": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/tr46/-/tr46-5.0.0.tgz",
       "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
       "dev": true,
       "dependencies": {
@@ -7442,12 +7691,12 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/ts-api-utils/-/ts-api-utils-1.0.2.tgz",
-      "integrity": "sha512-Cbu4nIqnEdd+THNEsBdkolnOXhg0I8XteoHaEKgvsxpsbWda4IsUut2c187HxywQCvveojow0Dgw/amxtSKVkQ==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
       "dev": true,
       "engines": {
-        "node": ">=16.13.0"
+        "node": ">=16"
       },
       "peerDependencies": {
         "typescript": ">=4.2.0"
@@ -7494,6 +7743,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmmirror.com/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/type-fest": {
       "version": "0.18.1",
       "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.18.1.tgz",
@@ -7505,65 +7763,73 @@
       }
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
-      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
-        "is-typed-array": "^1.1.10"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/typed-array-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
-      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
       "dev": true,
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmmirror.com/typed-array-length/-/typed-array-length-1.0.4.tgz",
-      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "is-typed-array": "^1.1.9"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7573,9 +7839,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.1.tgz",
-      "integrity": "sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.5.3.tgz",
+      "integrity": "sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==",
       "dev": true
     },
     "node_modules/unbox-primitive": {
@@ -7592,7 +7858,7 @@
     },
     "node_modules/undici-types": {
       "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
@@ -7645,21 +7911,24 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.6.0.tgz",
-      "integrity": "sha512-BfJEpWBu3aE/AyHx8VaNE/WgouoQxgH9baAiH82JjX8cqVyi3uJQstqwD5J+SZxIK326SZIhsSZlALXVBCknTQ==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.10.1.tgz",
+      "integrity": "sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.11.2",
-        "chokidar": "^3.5.3",
+        "acorn": "^8.11.3",
+        "chokidar": "^3.6.0",
         "webpack-sources": "^3.2.3",
         "webpack-virtual-modules": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       }
     },
     "node_modules/unplugin-auto-import": {
-      "version": "0.17.3",
-      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.17.3.tgz",
-      "integrity": "sha512-0cn0wr8X579TtdZKUAps0dDVrYzttx38ImdxZjmCeNlMDJX8UuSjO83vFqgS4ClNDIGWAute+xl9j5vRSX+vsw==",
+      "version": "0.17.5",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.17.5.tgz",
+      "integrity": "sha512-fHNDkDSxv3PGagX1wmKBYBkgaM4AKAgZmdJw/bxjhNljx9KSXSgHpGfX0MwUrq9qw6q1bhHIZVWyOwoY2koo4w==",
       "dev": true,
       "dependencies": {
         "@antfu/utils": "^0.7.7",
@@ -7668,7 +7937,7 @@
         "local-pkg": "^0.5.0",
         "magic-string": "^0.30.5",
         "minimatch": "^9.0.3",
-        "unimport": "^3.7.0",
+        "unimport": "^3.7.1",
         "unplugin": "^1.6.0"
       },
       "engines": {
@@ -7687,40 +7956,19 @@
         }
       }
     },
-    "node_modules/unplugin-auto-import/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/unplugin-auto-import/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/unplugin-icons": {
-      "version": "0.18.2",
-      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.18.2.tgz",
-      "integrity": "sha512-OgZoIJHGubeJmc3KePMOy62ovtxPEJfNMlr5tU+1ZqHGpSXubg3fnqq28VPvLL0D5vKj2PRCJF9tVGbQ7vBXJQ==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.19.0.tgz",
+      "integrity": "sha512-u5g/gIZPZEj1wUGEQxe9nzftOSqmblhusc+sL3cawIRoIt/xWpE6XYcPOfAeFTYNjSbRrX/3QiX89PFiazgU1w==",
       "dev": true,
       "dependencies": {
-        "@antfu/install-pkg": "^0.3.0",
-        "@antfu/utils": "^0.7.6",
-        "@iconify/utils": "^2.1.12",
+        "@antfu/install-pkg": "^0.3.3",
+        "@antfu/utils": "^0.7.7",
+        "@iconify/utils": "^2.1.23",
         "debug": "^4.3.4",
         "kolorist": "^1.8.0",
         "local-pkg": "^0.5.0",
-        "unplugin": "^1.5.1"
+        "unplugin": "^1.10.1"
       },
       "peerDependencies": {
         "@svgr/core": ">=7.0.0",
@@ -7748,12 +7996,12 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
-      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
+      "version": "1.0.14",
+      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.14.tgz",
+      "integrity": "sha512-JixKH8GR2pWYshIPUg/NujK3JO7JiqEEUiNArE86NQyrgUuZeTlZQN3xuS/yiV5Kb48ev9K6RqNkaJjXsdg7Jw==",
       "dev": true,
       "dependencies": {
-        "escalade": "^3.1.1",
+        "escalade": "^3.1.2",
         "picocolors": "^1.0.0"
       },
       "bin": {
@@ -7809,18 +8057,18 @@
     },
     "node_modules/vanilla-tilt": {
       "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
+      "resolved": "https://registry.npmmirror.com/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
       "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw=="
     },
     "node_modules/vite": {
-      "version": "5.0.12",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.0.12.tgz",
-      "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
+      "version": "5.2.10",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.2.10.tgz",
+      "integrity": "sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.19.3",
-        "postcss": "^8.4.32",
-        "rollup": "^4.2.0"
+        "esbuild": "^0.20.1",
+        "postcss": "^8.4.38",
+        "rollup": "^4.13.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -7866,7 +8114,7 @@
     },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
       "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
       "dev": true,
       "dependencies": {
@@ -7878,7 +8126,7 @@
     },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
       "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
       "dev": true,
       "engines": {
@@ -7887,7 +8135,7 @@
     },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
       "dev": true,
       "engines": {
@@ -7896,13 +8144,13 @@
     },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
       "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
       "dev": true
     },
     "node_modules/whatwg-encoding": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
       "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
       "dev": true,
       "dependencies": {
@@ -7914,7 +8162,7 @@
     },
     "node_modules/whatwg-mimetype": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
       "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
       "dev": true,
       "engines": {
@@ -7923,7 +8171,7 @@
     },
     "node_modules/whatwg-url": {
       "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-14.0.0.tgz",
       "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
       "dev": true,
       "dependencies": {
@@ -7963,21 +8211,30 @@
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmmirror.com/which-typed-array/-/which-typed-array-1.1.11.tgz",
-      "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmmirror.com/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
       "dev": true,
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmmirror.com/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
@@ -7999,9 +8256,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "version": "8.17.0",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.17.0.tgz",
+      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
@@ -8021,7 +8278,7 @@
     },
     "node_modules/xml-name-validator": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
       "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
       "dev": true,
       "engines": {
@@ -8070,16 +8327,16 @@
       }
     },
     "node_modules/zrender": {
-      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
-      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
+      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
       "dependencies": {
         "tslib": "2.3.0"
       }
     },
     "node_modules/zrender/node_modules/tslib": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   }
diff --git a/package.json b/package.json
index 25380a4..2775c82 100644
--- a/package.json
+++ b/package.json
@@ -15,33 +15,33 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.2.6",
+    "@ant-design/icons": "^5.3.6",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@marsidev/react-turnstile": "^0.5.3",
+    "@marsidev/react-turnstile": "^0.6.0",
     "@monaco-editor/react": "^4.6.0",
     "@typescript/ata": "^0.9.4",
-    "antd": "^5.13.2",
-    "axios": "^1.6.5",
+    "antd": "^5.16.5",
+    "axios": "^1.6.8",
     "custom-protocol-check": "^1.4.0",
-    "dayjs": "^1.11.10",
-    "echarts": "^5.4.3",
-    "esbuild-wasm": "^0.19.12",
+    "dayjs": "^1.11.11",
+    "echarts": "^5.5.0",
+    "esbuild-wasm": "^0.20.2",
     "fast-deep-equal": "^3.1.3",
-    "fflate": "^0.8.1",
+    "fflate": "^0.8.2",
     "jwt-decode": "^4.0.0",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
-    "match-sorter": "^6.3.3",
+    "match-sorter": "^6.3.4",
     "moment": "^2.30.1",
-    "monaco-editor": "^0.45.0",
+    "monaco-editor": "^0.48.0",
     "monaco-jsx-syntax-highlight": "^1.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
-    "react-router": "^6.21.3",
-    "react-router-dom": "^6.21.3",
+    "react-router": "^6.23.0",
+    "react-router-dom": "^6.23.0",
     "size-sensor": "^1.0.2",
     "vanilla-tilt": "^1.8.1"
   },
@@ -49,28 +49,28 @@
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/jsdom": "^21.1.6",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.5",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
+    "eslint-config-love": "^47.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "jsdom": "^24.0.0",
-    "prettier": "^3.2.4",
-    "sass": "^1.70.0",
+    "prettier": "^3.2.5",
+    "sass": "^1.76.0",
     "stylelint-config-prettier": "^9.0.5",
-    "typescript": "^5.3.3",
-    "unplugin-auto-import": "^0.17.3",
-    "unplugin-icons": "^0.18.2",
-    "vite": "^5.0.12"
+    "typescript": "^5.4.5",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-icons": "^0.19.0",
+    "vite": "^5.2.10"
   }
 }
diff --git a/src/components/Playground/CodeEditor/Editor/loader.ts b/src/components/Playground/CodeEditor/Editor/loader.ts
index c568b2c..f212880 100644
--- a/src/components/Playground/CodeEditor/Editor/loader.ts
+++ b/src/components/Playground/CodeEditor/Editor/loader.ts
@@ -2,6 +2,6 @@ import { loader } from '@monaco-editor/react'
 
 loader.config({
     paths: {
-        vs: 'https://unpkg.com/monaco-editor@0.45.0/min/vs'
+        vs: 'https://unpkg.com/monaco-editor@0.48.0/min/vs'
     }
 })
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index 74cbaf9..1c2614c 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -16,7 +16,7 @@ class Compiler {
             void esbuild
                 .initialize({
                     worker: true,
-                    wasmURL: 'https://esm.sh/esbuild-wasm@0.19.12/esbuild.wasm'
+                    wasmURL: 'https://esm.sh/esbuild-wasm@0.20.2/esbuild.wasm'
                 })
                 .finally(() => {
                     this.init = true

From 552efb9e8a97f5d11bbdc641219914bba396559e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 6 May 2024 10:45:34 +0800
Subject: [PATCH 281/307] Build(Package): Update dependencies

---
 package-lock.json | 119 +++++++++++++++++++++++++---------------------
 package.json      |  10 ++--
 2 files changed, 71 insertions(+), 58 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eda36a5..dac5d89 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,14 +8,14 @@
       "name": "oxygen-ui",
       "version": "1.0.0-SNAPSHOT",
       "dependencies": {
-        "@ant-design/icons": "^5.3.6",
+        "@ant-design/icons": "^5.3.7",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@marsidev/react-turnstile": "^0.6.0",
         "@monaco-editor/react": "^4.6.0",
         "@typescript/ata": "^0.9.4",
-        "antd": "^5.16.5",
+        "antd": "^5.17.0",
         "axios": "^1.6.8",
         "custom-protocol-check": "^1.4.0",
         "dayjs": "^1.11.11",
@@ -42,8 +42,8 @@
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
         "@types/jsdom": "^21.1.6",
-        "@types/lodash": "^4.17.0",
-        "@types/node": "^20.12.7",
+        "@types/lodash": "^4.17.1",
+        "@types/node": "^20.12.8",
         "@types/react": "^18.3.1",
         "@types/react-dom": "^18.3.0",
         "@typescript-eslint/eslint-plugin": "^7.8.0",
@@ -64,7 +64,7 @@
         "typescript": "^5.4.5",
         "unplugin-auto-import": "^0.17.5",
         "unplugin-icons": "^0.19.0",
-        "vite": "^5.2.10"
+        "vite": "^5.2.11"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -107,9 +107,9 @@
       }
     },
     "node_modules/@ant-design/icons": {
-      "version": "5.3.6",
-      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.3.6.tgz",
-      "integrity": "sha512-JeWsgNjvkTTC73YDPgWOgdScRku/iHN9JU0qk39OSEmJSCiRghQMLlxGTCY5ovbRRoXjxHXnUKgQEgBDnQfKmA==",
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.3.7.tgz",
+      "integrity": "sha512-bCPXTAg66f5bdccM4TT21SQBDO1Ek2gho9h3nO9DAKXJP4sq+5VBjrQMSxMVXSB3HyEz+cUbHQ5+6ogxCOpaew==",
       "dependencies": {
         "@ant-design/colors": "^7.0.0",
         "@ant-design/icons-svg": "^4.4.0",
@@ -1261,6 +1261,17 @@
         "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
       }
     },
+    "node_modules/@rc-component/async-validator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.1.tgz",
+      "integrity": "sha512-QEoRKwsdwgCC+k5prXyDOqsZOR2WD+lWnM4mbMR97afDKVFwrBkdrzw67wHIvrmXjtsd8uTbE7rnX1wWAhkc9w==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.4"
+      },
+      "engines": {
+        "node": ">=14.x"
+      }
+    },
     "node_modules/@rc-component/color-picker": {
       "version": "1.5.3",
       "resolved": "https://registry.npmmirror.com/@rc-component/color-picker/-/color-picker-1.5.3.tgz",
@@ -1847,9 +1858,9 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.0",
-      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.0.tgz",
-      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==",
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.1.tgz",
+      "integrity": "sha512-X+2qazGS3jxLAIz5JDXDzglAF3KpijdhFxlf/V1+hEsOUc+HnWi81L/uv/EvGuV90WY+7mPGFCUDGfQC3Gj95Q==",
       "dev": true
     },
     "node_modules/@types/minimist": {
@@ -1860,9 +1871,9 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "20.12.7",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.12.7.tgz",
-      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
+      "version": "20.12.8",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.8.tgz",
+      "integrity": "sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -2276,15 +2287,15 @@
       }
     },
     "node_modules/antd": {
-      "version": "5.16.5",
-      "resolved": "https://registry.npmmirror.com/antd/-/antd-5.16.5.tgz",
-      "integrity": "sha512-8MGjf2ejlii2iVH4F960jwpdGiU+ISWPdiMA2O1AJSFJFA3eCxVLHkKRGiagsRmdo3AUU8tuPfQsqbLuEIlswA==",
+      "version": "5.17.0",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.17.0.tgz",
+      "integrity": "sha512-jrzMIcaTJIy12/GJ2PfgchgZGuAlDodlaOKd05/TxEtFilRHnv8oaf0qfqNGG3slvvuy4J/57xn21jM4cLl7Hw==",
       "dependencies": {
         "@ant-design/colors": "^7.0.2",
-        "@ant-design/cssinjs": "^1.18.5",
+        "@ant-design/cssinjs": "^1.19.1",
         "@ant-design/icons": "^5.3.6",
         "@ant-design/react-slick": "~1.1.2",
-        "@babel/runtime": "^7.24.4",
+        "@babel/runtime": "^7.24.5",
         "@ctrl/tinycolor": "^3.6.1",
         "@rc-component/color-picker": "~1.5.3",
         "@rc-component/mutate-observer": "^1.1.0",
@@ -2294,13 +2305,13 @@
         "copy-to-clipboard": "^3.3.3",
         "dayjs": "^1.11.10",
         "qrcode.react": "^3.1.0",
-        "rc-cascader": "~3.24.1",
+        "rc-cascader": "~3.25.0",
         "rc-checkbox": "~3.2.0",
         "rc-collapse": "~3.7.3",
         "rc-dialog": "~9.4.0",
         "rc-drawer": "~7.1.0",
         "rc-dropdown": "~4.2.0",
-        "rc-field-form": "~1.44.0",
+        "rc-field-form": "~2.0.0",
         "rc-image": "~7.6.0",
         "rc-input": "~1.4.5",
         "rc-input-number": "~9.0.0",
@@ -2309,7 +2320,7 @@
         "rc-motion": "^2.9.0",
         "rc-notification": "~5.4.0",
         "rc-pagination": "~4.0.4",
-        "rc-picker": "~4.4.2",
+        "rc-picker": "~4.5.0",
         "rc-progress": "~4.0.0",
         "rc-rate": "~2.12.0",
         "rc-resize-observer": "^1.4.0",
@@ -2318,17 +2329,21 @@
         "rc-slider": "~10.6.2",
         "rc-steps": "~6.0.1",
         "rc-switch": "~4.1.0",
-        "rc-table": "~7.45.4",
-        "rc-tabs": "~14.1.1",
+        "rc-table": "~7.45.5",
+        "rc-tabs": "~15.0.0 ",
         "rc-textarea": "~1.6.3",
         "rc-tooltip": "~6.2.0",
         "rc-tree": "~5.8.5",
-        "rc-tree-select": "~5.19.0",
+        "rc-tree-select": "~5.20.0",
         "rc-upload": "~4.5.2",
         "rc-util": "^5.39.1",
         "scroll-into-view-if-needed": "^3.1.0",
         "throttle-debounce": "^5.0.0"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ant-design"
+      },
       "peerDependencies": {
         "react": ">=16.9.0",
         "react-dom": ">=16.9.0"
@@ -2385,7 +2400,7 @@
     },
     "node_modules/array-tree-filter": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
       "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
     },
     "node_modules/array-union": {
@@ -2483,11 +2498,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/async-validator": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
-      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
-    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@@ -5991,9 +6001,9 @@
       }
     },
     "node_modules/rc-cascader": {
-      "version": "3.24.1",
-      "resolved": "https://registry.npmmirror.com/rc-cascader/-/rc-cascader-3.24.1.tgz",
-      "integrity": "sha512-RgKuYgEGPx+6wCgguYFHjMsDZdCyydZd58YJRCfYQ8FObqLnZW0x/vUcEyPjhWIj1EhjV958IcR+NFPDbbj9kg==",
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.25.0.tgz",
+      "integrity": "sha512-mBY6/CykOvzAYnIye0rpt5JkMAXJaX8zZawOwSndbKuFakYE+leqBQWIZoN9HIgAptPpTi2Aty3RvbaBmk8SKQ==",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "array-tree-filter": "^2.1.0",
@@ -6070,7 +6080,7 @@
     },
     "node_modules/rc-dropdown": {
       "version": "4.2.0",
-      "resolved": "https://registry.npmmirror.com/rc-dropdown/-/rc-dropdown-4.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.2.0.tgz",
       "integrity": "sha512-odM8Ove+gSh0zU27DUj5cG1gNKg7mLWBYzB5E4nNLrLwBmYEgYP43vHKDGOVZcJSVElQBI0+jTQgjnq0NfLjng==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
@@ -6084,12 +6094,12 @@
       }
     },
     "node_modules/rc-field-form": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.44.0.tgz",
-      "integrity": "sha512-el7w87fyDUsca63Y/s8qJcq9kNkf/J5h+iTdqG5WsSHLH0e6Usl7QuYSmSVzJMgtp40mOVZIY/W/QP9zwrp1FA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-2.0.0.tgz",
+      "integrity": "sha512-Xwp8SoSbWQOsz3s7IwEkDj/fF73Wa+vVPtP+gnaq6wVvPX8aPhx1vrHpFcgmiIOKdKIdezGLFsTyU3kNXn+IEA==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
-        "async-validator": "^4.1.0",
+        "@rc-component/async-validator": "^5.0.1",
         "rc-util": "^5.32.2"
       },
       "engines": {
@@ -6244,9 +6254,9 @@
       }
     },
     "node_modules/rc-picker": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmmirror.com/rc-picker/-/rc-picker-4.4.2.tgz",
-      "integrity": "sha512-MdbAXvwiGyhb+bHe66qPps8xPQivzEgcyCp3/MPK4T+oER0gOmVRCEDxaD4FhYG/7GLH3rDrHpu79BvEn2JFTQ==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-4.5.0.tgz",
+      "integrity": "sha512-suqz9bzuhBQlf7u+bZd1bJLPzhXpk12w6AjQ9BTPTiFwexVZgUKViG1KNLyfFvW6tCUZZK0HmCCX7JAyM+JnCg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^2.0.0",
@@ -6344,7 +6354,7 @@
     },
     "node_modules/rc-select": {
       "version": "14.13.1",
-      "resolved": "https://registry.npmmirror.com/rc-select/-/rc-select-14.13.1.tgz",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.13.1.tgz",
       "integrity": "sha512-A1VHqjIOemxLnUGRxLGVqXBs8jGcJemI5NXxOJwU5PQc1wigAu1T4PRLgMkTPDOz8gPhlY9dwsPzMgakMc2QjQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
@@ -6432,9 +6442,9 @@
       }
     },
     "node_modules/rc-tabs": {
-      "version": "14.1.1",
-      "resolved": "https://registry.npmmirror.com/rc-tabs/-/rc-tabs-14.1.1.tgz",
-      "integrity": "sha512-5nOr9PVpJy2SWHTLgv1+kESDOb0tFzl0cYU9r9d8LfL0Wg9i/n1B558rmkxdQHgBwMqxmwoyPSAbQROxMQe8nw==",
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-15.0.0.tgz",
+      "integrity": "sha512-7m541VcEiJSpHZmosMZNMIhemxtIN+f0WDhZNyXQ1/cZ40aaWsknlbj0FH6HryLoKEQvBnCI89hgQuT7MBSOBA==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
@@ -6484,7 +6494,7 @@
     },
     "node_modules/rc-tree": {
       "version": "5.8.5",
-      "resolved": "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.8.5.tgz",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.8.5.tgz",
       "integrity": "sha512-PRfcZtVDNkR7oh26RuNe1hpw11c1wfgzwmPFL0lnxGnYefe9lDAO6cg5wJKIAwyXFVt5zHgpjYmaz0CPy1ZtKg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
@@ -6502,9 +6512,9 @@
       }
     },
     "node_modules/rc-tree-select": {
-      "version": "5.19.0",
-      "resolved": "https://registry.npmmirror.com/rc-tree-select/-/rc-tree-select-5.19.0.tgz",
-      "integrity": "sha512-f4l5EsmSGF3ggj76YTzKNPY9SnXfFaer7ZccTSGb3urUf54L+cCqyT+UsPr+S5TAr8mZSxJ7g3CgkCe+cVQ6sw==",
+      "version": "5.20.0",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.20.0.tgz",
+      "integrity": "sha512-zFtkHx5/6PnXSi3oSbBSFbIPiJJQdpSU3qz/joLe75URgvxmTHi989O8MtMgpwyZwrCMOJpGi6L1uy+13uzZPw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -8061,9 +8071,9 @@
       "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw=="
     },
     "node_modules/vite": {
-      "version": "5.2.10",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.2.10.tgz",
-      "integrity": "sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==",
+      "version": "5.2.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz",
+      "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",
@@ -8076,6 +8086,9 @@
       "engines": {
         "node": "^18.0.0 || >=20.0.0"
       },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
       "optionalDependencies": {
         "fsevents": "~2.3.3"
       },
diff --git a/package.json b/package.json
index 2775c82..6e1d189 100644
--- a/package.json
+++ b/package.json
@@ -15,14 +15,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.3.6",
+    "@ant-design/icons": "^5.3.7",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@marsidev/react-turnstile": "^0.6.0",
     "@monaco-editor/react": "^4.6.0",
     "@typescript/ata": "^0.9.4",
-    "antd": "^5.16.5",
+    "antd": "^5.17.0",
     "axios": "^1.6.8",
     "custom-protocol-check": "^1.4.0",
     "dayjs": "^1.11.11",
@@ -49,8 +49,8 @@
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/jsdom": "^21.1.6",
-    "@types/lodash": "^4.17.0",
-    "@types/node": "^20.12.7",
+    "@types/lodash": "^4.17.1",
+    "@types/node": "^20.12.8",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
@@ -71,6 +71,6 @@
     "typescript": "^5.4.5",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-icons": "^0.19.0",
-    "vite": "^5.2.10"
+    "vite": "^5.2.11"
   }
 }

From f785c8271f2cc7512cd72bf732715bff6f496766 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 6 May 2024 11:01:02 +0800
Subject: [PATCH 282/307] Build(SensitiveWord and Echarts): Fix tsc error

---
 src/pages/System/Settings/SensitiveWord.tsx |  8 ++++++--
 src/pages/System/Statistics/shared.ts       | 10 ++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pages/System/Settings/SensitiveWord.tsx b/src/pages/System/Settings/SensitiveWord.tsx
index db80be5..0a0c32e 100644
--- a/src/pages/System/Settings/SensitiveWord.tsx
+++ b/src/pages/System/Settings/SensitiveWord.tsx
@@ -138,8 +138,12 @@ const SensitiveWord = () => {
                     dataSource={dataSource}
                     targetKeys={targetKeys}
                     selectedKeys={selectedKeys}
-                    onChange={setTargetKeys}
-                    onSelectChange={setSelectedKeys}
+                    onChange={(value) => {
+                        setTargetKeys(value as string[])
+                    }}
+                    onSelectChange={(value) => {
+                        setSelectedKeys(value as string[])
+                    }}
                     rowKey={(item) => item.id}
                     render={(item) => item.word}
                 />
diff --git a/src/pages/System/Statistics/shared.ts b/src/pages/System/Statistics/shared.ts
index 8e3a0f4..bebc1b6 100644
--- a/src/pages/System/Statistics/shared.ts
+++ b/src/pages/System/Statistics/shared.ts
@@ -14,6 +14,8 @@ import {
 import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
 import { SVGRenderer } from 'echarts/renderers'
 import { UniversalTransition } from 'echarts/features'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 import { CallbackDataParams } from 'echarts/types/dist/shared'
 import { utcToLocalTime } from '@/util/datetime'
 
@@ -81,15 +83,11 @@ export const barEChartsBaseOption: EChartsOption = {
 
 export const getTooltipTimeFormatter = (format: string = 'yyyy-MM-DD HH:mm:ss') => {
     return (params: CallbackDataParams[]) =>
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
         `${utcToLocalTime(params[0].data[0], format)}<br>${params
             .map(
                 (param) =>
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-expect-error
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                     `<span style="display: flex; justify-content: space-between;"><span>${param.marker}${param.seriesName}</span><span style="font-weight: bold; margin-left: 16px;">${param.data[1]}</span></span>`
             )
             .join('')}`

From 5e6c8f214c3fa7951d849b02bcf99e48938bfc73 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 6 May 2024 15:25:08 +0800
Subject: [PATCH 283/307] Refactor(TS): Rename some file from *.tsx to *.ts

---
 src/services/api/{avatar.tsx => avatar.ts} | 0
 src/services/{auth.tsx => auth.ts}         | 0
 src/services/{system.tsx => system.ts}     | 2 +-
 src/services/{tool.tsx => tool.ts}         | 2 +-
 src/util/{auth.tsx => auth.ts}             | 0
 src/util/{browser.tsx => browser.ts}       | 0
 src/util/{hooks.tsx => hooks.ts}           | 0
 src/util/{navigation.tsx => navigation.ts} | 0
 8 files changed, 2 insertions(+), 2 deletions(-)
 rename src/services/api/{avatar.tsx => avatar.ts} (100%)
 rename src/services/{auth.tsx => auth.ts} (100%)
 rename src/services/{system.tsx => system.ts} (99%)
 rename src/services/{tool.tsx => tool.ts} (98%)
 rename src/util/{auth.tsx => auth.ts} (100%)
 rename src/util/{browser.tsx => browser.ts} (100%)
 rename src/util/{hooks.tsx => hooks.ts} (100%)
 rename src/util/{navigation.tsx => navigation.ts} (100%)

diff --git a/src/services/api/avatar.tsx b/src/services/api/avatar.ts
similarity index 100%
rename from src/services/api/avatar.tsx
rename to src/services/api/avatar.ts
diff --git a/src/services/auth.tsx b/src/services/auth.ts
similarity index 100%
rename from src/services/auth.tsx
rename to src/services/auth.ts
diff --git a/src/services/system.tsx b/src/services/system.ts
similarity index 99%
rename from src/services/system.tsx
rename to src/services/system.ts
index 047b0be..cd9e41d 100644
--- a/src/services/system.tsx
+++ b/src/services/system.ts
@@ -24,7 +24,7 @@ import {
     URL_SYS_SETTINGS_TWO_FACTOR,
     URL_SYS_TOOL_BASE_LIST
 } from '@/constants/urls.constants'
-import request from '@/services/index'
+import request from '@/services'
 
 export const r_sys_user_info_get = () => request.get<UserWithPowerInfoVo>(URL_SYS_USER_INFO)
 
diff --git a/src/services/tool.tsx b/src/services/tool.ts
similarity index 98%
rename from src/services/tool.tsx
rename to src/services/tool.ts
index 2a31952..5fe9183 100644
--- a/src/services/tool.tsx
+++ b/src/services/tool.ts
@@ -1,4 +1,4 @@
-import request from '@/services/index'
+import request from '@/services'
 import {
     URL_TOOL,
     URL_TOOL_CATEGORY,
diff --git a/src/util/auth.tsx b/src/util/auth.ts
similarity index 100%
rename from src/util/auth.tsx
rename to src/util/auth.ts
diff --git a/src/util/browser.tsx b/src/util/browser.ts
similarity index 100%
rename from src/util/browser.tsx
rename to src/util/browser.ts
diff --git a/src/util/hooks.tsx b/src/util/hooks.ts
similarity index 100%
rename from src/util/hooks.tsx
rename to src/util/hooks.ts
diff --git a/src/util/navigation.tsx b/src/util/navigation.ts
similarity index 100%
rename from src/util/navigation.tsx
rename to src/util/navigation.ts

From 779e0ab2c00bc659773b995db427969db61dd89c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 6 May 2024 15:37:45 +0800
Subject: [PATCH 284/307] Refactor(Variable): Optimize variable name

---
 .../Playground/CodeEditor/Editor/hooks.ts     |  8 ++--
 .../CodeEditor/FileSelector/Item.tsx          | 16 +++----
 .../CodeEditor/FileSelector/index.tsx         | 16 +++----
 .../Playground/Output/Preview/Render.tsx      | 14 +++---
 src/components/Playground/compiler.ts         |  2 +-
 src/components/common/HideScrollbar.tsx       | 48 +++++++++----------
 src/components/common/LoadingMask.tsx         |  1 +
 src/components/common/Sidebar/Footer.tsx      | 10 ++--
 src/components/common/Sidebar/index.tsx       | 10 ++--
 src/pages/System/Group.tsx                    |  8 ++--
 src/pages/System/Log.tsx                      | 10 ++--
 src/pages/System/Role.tsx                     |  8 ++--
 src/pages/System/Settings/Base.tsx            | 10 ++--
 src/pages/System/Settings/Mail.tsx            | 10 ++--
 src/pages/System/Settings/SensitiveWord.tsx   | 10 ++--
 src/pages/System/Settings/TwoFactor.tsx       | 10 ++--
 src/pages/System/Tools/Base.tsx               | 26 +++++-----
 src/pages/System/Tools/Category.tsx           |  8 ++--
 src/pages/System/Tools/Code.tsx               |  8 ++--
 src/pages/System/Tools/Execute.tsx            |  8 ++--
 src/pages/System/Tools/Template.tsx           |  8 ++--
 src/pages/Tools/Create.tsx                    | 38 +++++++--------
 src/pages/Tools/Edit.tsx                      | 38 +++++++--------
 src/pages/Tools/Source.tsx                    |  8 ++--
 src/pages/Tools/Store.tsx                     |  8 ++--
 src/pages/Tools/View.tsx                      |  8 ++--
 src/pages/Tools/index.tsx                     | 30 ++++++------
 src/pages/ToolsFramework.tsx                  |  8 ++--
 28 files changed, 194 insertions(+), 193 deletions(-)

diff --git a/src/components/Playground/CodeEditor/Editor/hooks.ts b/src/components/Playground/CodeEditor/Editor/hooks.ts
index 21e47ed..2224b2f 100644
--- a/src/components/Playground/CodeEditor/Editor/hooks.ts
+++ b/src/components/Playground/CodeEditor/Editor/hooks.ts
@@ -76,11 +76,11 @@ export const useEditor = () => {
 export const useTypesProgress = () => {
     const [progress, setProgress] = useState(0)
     const [total, setTotal] = useState(0)
-    const [finished, setFinished] = useState(false)
+    const [isFinished, setIsFinished] = useState(false)
 
     const onWatch = (typeHelper: TypeHelper) => {
         const handleStarted = () => {
-            setFinished(false)
+            setIsFinished(false)
         }
         typeHelper.addListener('started', handleStarted)
 
@@ -91,7 +91,7 @@ export const useTypesProgress = () => {
         typeHelper.addListener('progress', handleProgress)
 
         const handleFinished = () => {
-            setFinished(true)
+            setIsFinished(true)
         }
         typeHelper.addListener('progress', handleFinished)
 
@@ -105,7 +105,7 @@ export const useTypesProgress = () => {
     return {
         progress,
         total,
-        finished,
+        finished: isFinished,
         onWatch
     }
 }
diff --git a/src/components/Playground/CodeEditor/FileSelector/Item.tsx b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
index 4fe7c1f..31ea29b 100644
--- a/src/components/Playground/CodeEditor/FileSelector/Item.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
@@ -31,7 +31,7 @@ const Item = ({
 }: ItemProps) => {
     const inputRef = useRef<HTMLInputElement>(null)
     const [fileName, setFileName] = useState(value)
-    const [creating, setCreating] = useState(prop.creating)
+    const [isCreating, setIsCreating] = useState(prop.creating)
 
     const handleOnClick = () => {
         if (hasEditing) {
@@ -52,35 +52,35 @@ const Item = ({
     }
 
     const finishNameFile = () => {
-        if (!creating || onValidate ? !onValidate?.(fileName, value) : false) {
+        if (!isCreating || onValidate ? !onValidate?.(fileName, value) : false) {
             inputRef.current?.focus()
             return
         }
 
         if (fileName === value && active) {
-            setCreating(false)
+            setIsCreating(false)
             setHasEditing?.(false)
             return
         }
 
         onOk?.(fileName)
-        setCreating(false)
+        setIsCreating(false)
         setHasEditing?.(false)
     }
 
     const cancelNameFile = () => {
         setFileName(value)
-        setCreating(false)
+        setIsCreating(false)
         setHasEditing?.(false)
         onCancel?.()
     }
 
     const handleOnDoubleClick = () => {
-        if (readonly || creating || hasEditing) {
+        if (readonly || isCreating || hasEditing) {
             return
         }
 
-        setCreating(true)
+        setIsCreating(true)
         setHasEditing?.(true)
         setFileName(value)
         setTimeout(() => {
@@ -112,7 +112,7 @@ const Item = ({
             className={`tab-item${active ? ' active' : ''}${className ? ` ${className}` : ''}`}
             onClick={handleOnClick}
         >
-            {creating ? (
+            {isCreating ? (
                 <div className={'tab-item-input'}>
                     <input
                         ref={inputRef}
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index 1c06853..ffe35b0 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -34,7 +34,7 @@ const FileSelector = ({
 }: FileSelectorProps) => {
     const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const [tabs, setTabs] = useState<string[]>([])
-    const [creating, setCreating] = useState(false)
+    const [isCreating, setIsCreating] = useState(false)
     const [hasEditing, setHasEditing] = useState(false)
 
     const getMaxSequenceTabName = (filesName: string[]) => {
@@ -56,7 +56,7 @@ const FileSelector = ({
         }
 
         setTabs([...tabs, getMaxSequenceTabName(tabs)])
-        setCreating(true)
+        setIsCreating(true)
         setTimeout(() => {
             hideScrollbarRef.current?.scrollRight(1000)
         })
@@ -64,16 +64,16 @@ const FileSelector = ({
 
     const handleOnCancel = () => {
         onError?.('')
-        if (!creating) {
+        if (!isCreating) {
             return
         }
         tabs.pop()
         setTabs([...tabs])
-        setCreating(false)
+        setIsCreating(false)
     }
 
     const handleOnClickTab = (fileName: string) => {
-        if (creating) {
+        if (isCreating) {
             return
         }
 
@@ -97,9 +97,9 @@ const FileSelector = ({
     }
 
     const handleOnSaveTab = (value: string, item: string) => {
-        if (creating) {
+        if (isCreating) {
             onAddFile?.(value)
-            setCreating(false)
+            setIsCreating(false)
         } else {
             onUpdateFileName?.(value, item)
         }
@@ -179,7 +179,7 @@ const FileSelector = ({
                                     key={index + item}
                                     value={item}
                                     active={selectedFileName === item}
-                                    creating={creating}
+                                    creating={isCreating}
                                     readonly={readonly || notRemovableFiles.includes(item)}
                                     hasEditing={hasEditing}
                                     setHasEditing={setHasEditing}
diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx
index 2965bf0..102dd2c 100644
--- a/src/components/Playground/Output/Preview/Render.tsx
+++ b/src/components/Playground/Output/Preview/Render.tsx
@@ -42,7 +42,7 @@ const iframeUrl = getIframeUrl(iframeRaw)
 
 const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
-    const [loaded, setLoaded] = useState(false)
+    const [isLoaded, setIsLoaded] = useState(false)
     const [selectedDevice, setSelectedDevice] = useState('Pixel 7')
     const [zoom, setZoom] = useState(1)
     const [isRotate, setIsRotate] = useState(false)
@@ -148,7 +148,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
     }
 
     useEffect(() => {
-        if (loaded) {
+        if (isLoaded) {
             iframeRef.current?.contentWindow?.postMessage(
                 {
                     type: 'UPDATE',
@@ -157,10 +157,10 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                 '*'
             )
         }
-    }, [loaded, compiledCode])
+    }, [isLoaded, compiledCode])
 
     useEffect(() => {
-        if (loaded) {
+        if (isLoaded) {
             iframeRef.current?.contentWindow?.postMessage(
                 {
                     type: 'SCALE',
@@ -169,7 +169,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                 '*'
             )
         }
-    }, [loaded, zoom])
+    }, [isLoaded, zoom])
 
     return mobileMode ? (
         <>
@@ -202,7 +202,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                                 key={iframeKey}
                                 ref={iframeRef}
                                 src={iframeUrl}
-                                onLoad={() => setLoaded(true)}
+                                onLoad={() => setIsLoaded(true)}
                                 sandbox="allow-downloads allow-forms allow-modals allow-scripts"
                             />
                         </div>
@@ -244,7 +244,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
             key={iframeKey}
             ref={iframeRef}
             src={iframeUrl}
-            onLoad={() => setLoaded(true)}
+            onLoad={() => setIsLoaded(true)}
             sandbox="allow-downloads allow-forms allow-modals allow-scripts"
         />
     )
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index 1c2614c..27a330e 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -66,7 +66,7 @@ class Compiler {
         })
 
     stop = () => {
-        esbuild.stop()
+        void esbuild.stop()
     }
 
     private fileResolverPlugin = (
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index 0515efc..3a349db 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -183,16 +183,16 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
         const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
         const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
         const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
-        const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false)
-        const [verticalScrollbarOnTouch, setVerticalScrollbarOnTouch] = useState(false)
-        const [verticalScrollbarAutoHide, setVerticalScrollbarAutoHide] = useState(false)
+        const [isVerticalScrollbarOnClick, setIsVerticalScrollbarOnClick] = useState(false)
+        const [isVerticalScrollbarOnTouch, setIsVerticalScrollbarOnTouch] = useState(false)
+        const [isVerticalScrollbarAutoHide, setIsVerticalScrollbarAutoHide] = useState(false)
 
         const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0)
         const [horizontalScrollbarLength, setHorizontalScrollbarLength] = useState(100)
         const [horizontalScrollbarPosition, setHorizontalScrollbarPosition] = useState(0)
-        const [horizontalScrollbarOnClick, setHorizontalScrollbarOnClick] = useState(false)
-        const [horizontalScrollbarOnTouch, setHorizontalScrollbarOnTouch] = useState(false)
-        const [horizontalScrollbarAutoHide, setHorizontalScrollbarAutoHide] = useState(false)
+        const [isHorizontalScrollbarOnClick, setIsHorizontalScrollbarOnClick] = useState(false)
+        const [isHorizontalScrollbarOnTouch, setIsHorizontalScrollbarOnTouch] = useState(false)
+        const [isHorizontalScrollbarAutoHide, setIsHorizontalScrollbarAutoHide] = useState(false)
 
         const isPreventAnyScroll =
             isPreventScroll || isPreventVerticalScroll || isPreventHorizontalScroll
@@ -201,10 +201,10 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
             if (autoHideWaitingTime === undefined) {
                 return
             }
-            setVerticalScrollbarAutoHide(false)
+            setIsVerticalScrollbarAutoHide(false)
             if (autoHideWaitingTime > 0) {
                 setTimeout(() => {
-                    setVerticalScrollbarAutoHide(true)
+                    setIsVerticalScrollbarAutoHide(true)
                 }, autoHideWaitingTime)
             }
         }, [autoHideWaitingTime, verticalScrollbarPosition])
@@ -213,10 +213,10 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
             if (autoHideWaitingTime === undefined) {
                 return
             }
-            setHorizontalScrollbarAutoHide(false)
+            setIsHorizontalScrollbarAutoHide(false)
             if (autoHideWaitingTime > 0) {
                 setTimeout(() => {
-                    setHorizontalScrollbarAutoHide(true)
+                    setIsHorizontalScrollbarAutoHide(true)
                 }, autoHideWaitingTime)
             }
         }, [autoHideWaitingTime, horizontalScrollbarPosition])
@@ -318,20 +318,20 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                         }
                         switch (scrollbarFlag) {
                             case 'vertical':
-                                setVerticalScrollbarOnClick(true)
+                                setIsVerticalScrollbarOnClick(true)
                                 break
                             case 'horizontal':
-                                setHorizontalScrollbarOnClick(true)
+                                setIsHorizontalScrollbarOnClick(true)
                                 break
                         }
                         break
                     case 'up':
                     case 'leave':
-                        setVerticalScrollbarOnClick(false)
-                        setHorizontalScrollbarOnClick(false)
+                        setIsVerticalScrollbarOnClick(false)
+                        setIsHorizontalScrollbarOnClick(false)
                         break
                     case 'move':
-                        if (verticalScrollbarOnClick) {
+                        if (isVerticalScrollbarOnClick) {
                             rootRef.current?.scrollTo({
                                 top:
                                     rootRef.current?.scrollTop +
@@ -341,7 +341,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                                 behavior: 'instant'
                             })
                         }
-                        if (horizontalScrollbarOnClick) {
+                        if (isHorizontalScrollbarOnClick) {
                             rootRef.current?.scrollTo({
                                 left:
                                     rootRef.current?.scrollLeft +
@@ -372,23 +372,23 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                         }
                         switch (scrollbarFlag) {
                             case 'vertical':
-                                setVerticalScrollbarOnTouch(true)
+                                setIsVerticalScrollbarOnTouch(true)
                                 break
                             case 'horizontal':
-                                setHorizontalScrollbarOnTouch(true)
+                                setIsHorizontalScrollbarOnTouch(true)
                                 break
                         }
                         break
                     case 'end':
                     case 'cancel':
-                        setVerticalScrollbarOnTouch(false)
-                        setHorizontalScrollbarOnTouch(false)
+                        setIsVerticalScrollbarOnTouch(false)
+                        setIsHorizontalScrollbarOnTouch(false)
                         break
                     case 'move':
                         if (event.touches.length !== 1) {
                             return
                         }
-                        if (verticalScrollbarOnTouch) {
+                        if (isVerticalScrollbarOnTouch) {
                             rootRef.current?.scrollTo({
                                 top:
                                     rootRef.current?.scrollTop +
@@ -399,7 +399,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                                 behavior: 'instant'
                             })
                         }
-                        if (horizontalScrollbarOnTouch) {
+                        if (isHorizontalScrollbarOnTouch) {
                             rootRef.current?.scrollTo({
                                 left:
                                     rootRef.current?.scrollLeft +
@@ -571,7 +571,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                         (!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && (
                             <div
                                 className={`scrollbar vertical-scrollbar${
-                                    verticalScrollbarAutoHide ? ' hide' : ''
+                                    isVerticalScrollbarAutoHide ? ' hide' : ''
                                 }`}
                                 style={{
                                     height: maskRef.current
@@ -614,7 +614,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>(
                             horizontalScrollbarLength < 100) && (
                             <div
                                 className={`scrollbar horizontal-scrollbar${
-                                    horizontalScrollbarAutoHide ? ' hide' : ''
+                                    isHorizontalScrollbarAutoHide ? ' hide' : ''
                                 }`}
                                 style={{
                                     width: maskRef.current
diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx
index f843af5..54dac5c 100644
--- a/src/components/common/LoadingMask.tsx
+++ b/src/components/common/LoadingMask.tsx
@@ -7,6 +7,7 @@ interface LoadingMaskProps extends PropsWithChildren {
     hidden?: boolean
     maskContent?: ReactNode
 }
+
 const LoadingMask = (props: LoadingMaskProps) => {
     const loadingIcon = (
         <>
diff --git a/src/components/common/Sidebar/Footer.tsx b/src/components/common/Sidebar/Footer.tsx
index f7cc765..64f2bfd 100644
--- a/src/components/common/Sidebar/Footer.tsx
+++ b/src/components/common/Sidebar/Footer.tsx
@@ -10,7 +10,7 @@ const Footer = () => {
     const lastMatch = matches.reduce((_, second) => second)
     const location = useLocation()
     const navigate = useNavigate()
-    const [exiting, setExiting] = useState(false)
+    const [isExiting, setIsExiting] = useState(false)
     const [nickname, setNickname] = useState('')
     const [avatar, setAvatar] = useState('')
 
@@ -23,11 +23,11 @@ const Footer = () => {
     }
 
     const handleLogout = () => {
-        if (exiting) {
+        if (isExiting) {
             return
         }
 
-        setExiting(true)
+        setIsExiting(true)
         void r_auth_logout().finally(() => {
             removeToken()
             notification.info({
@@ -83,8 +83,8 @@ const Footer = () => {
                 <div className={'content'}>
                     <span hidden={!getLoginStatus()} className={'icon-exit'} onClick={handleLogout}>
                         <Icon
-                            component={exiting ? IconOxygenLoading : IconOxygenExit}
-                            spin={exiting}
+                            component={isExiting ? IconOxygenLoading : IconOxygenExit}
+                            spin={isExiting}
                         />
                     </span>
                 </div>
diff --git a/src/components/common/Sidebar/index.tsx b/src/components/common/Sidebar/index.tsx
index db30b6a..660e062 100644
--- a/src/components/common/Sidebar/index.tsx
+++ b/src/components/common/Sidebar/index.tsx
@@ -17,18 +17,18 @@ interface SidebarProps extends PropsWithChildren {
 }
 
 const Sidebar = (props: SidebarProps) => {
-    const [hideSidebar, setHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true')
+    const [isHideSidebar, setIsHideSidebar] = useState(getLocalStorage('HIDE_SIDEBAR') === 'true')
 
     const switchSidebar = () => {
-        setLocalStorage('HIDE_SIDEBAR', !hideSidebar ? 'true' : 'false')
-        setHideSidebar(!hideSidebar)
-        props.onSidebarSwitch?.(hideSidebar)
+        setLocalStorage('HIDE_SIDEBAR', !isHideSidebar ? 'true' : 'false')
+        setIsHideSidebar(!isHideSidebar)
+        props.onSidebarSwitch?.(isHideSidebar)
     }
 
     return (
         <>
             <div
-                className={`sidebar${hideSidebar ? ' hide' : ''}`}
+                className={`sidebar${isHideSidebar ? ' hide' : ''}`}
                 style={{ width: props.width ?? 'clamp(180px, 20vw, 240px)' }}
             >
                 <div className={'title'}>
diff --git a/src/pages/System/Group.tsx b/src/pages/System/Group.tsx
index f248ffb..2f91b52 100644
--- a/src/pages/System/Group.tsx
+++ b/src/pages/System/Group.tsx
@@ -50,7 +50,7 @@ const Group = () => {
     const [isRegexLegal, setIsRegexLegal] = useState(true)
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
     const [isDrawerEdit, setIsDrawerEdit] = useState(false)
-    const [submittable, setSubmittable] = useState(false)
+    const [isSubmittable, setIsSubmittable] = useState(false)
     const [roleData, setRoleData] = useState<RoleVo[]>([])
     const [isLoadingRole, setIsLoadingRole] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
@@ -471,10 +471,10 @@ const Group = () => {
     useEffect(() => {
         form.validateFields({ validateOnly: true }).then(
             () => {
-                setSubmittable(true)
+                setIsSubmittable(true)
             },
             () => {
-                setSubmittable(false)
+                setIsSubmittable(false)
             }
         )
 
@@ -589,7 +589,7 @@ const Group = () => {
             </AntdButton>
             <AntdButton
                 type={'primary'}
-                disabled={!submittable}
+                disabled={!isSubmittable}
                 loading={isSubmitting}
                 onClick={handleOnSubmit}
             >
diff --git a/src/pages/System/Log.tsx b/src/pages/System/Log.tsx
index 145b01c..f11c331 100644
--- a/src/pages/System/Log.tsx
+++ b/src/pages/System/Log.tsx
@@ -10,7 +10,7 @@ import FlexBox from '@/components/common/FlexBox'
 
 const Log = () => {
     const [logData, setLogData] = useState<SysLogGetVo[]>([])
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
     const [tableParams, setTableParams] = useState<TableParam>({
         pagination: {
             current: 1,
@@ -181,11 +181,11 @@ const Log = () => {
     }
 
     const getLog = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
 
-        setLoading(true)
+        setIsLoading(true)
 
         void r_sys_log_get({
             currentPage: tableParams.pagination?.current,
@@ -218,7 +218,7 @@ const Log = () => {
                 }
             })
             .finally(() => {
-                setLoading(false)
+                setIsLoading(false)
             })
     }
 
@@ -276,7 +276,7 @@ const Log = () => {
                 columns={dataColumns}
                 rowKey={(record) => record.id}
                 pagination={tableParams.pagination}
-                loading={loading}
+                loading={isLoading}
                 onChange={handleOnTableChange}
             />
         </Card>
diff --git a/src/pages/System/Role.tsx b/src/pages/System/Role.tsx
index ce4e5e7..8cab6d9 100644
--- a/src/pages/System/Role.tsx
+++ b/src/pages/System/Role.tsx
@@ -50,7 +50,7 @@ const Role = () => {
     const [isRegexLegal, setIsRegexLegal] = useState(true)
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
     const [isDrawerEdit, setIsDrawerEdit] = useState(false)
-    const [submittable, setSubmittable] = useState(false)
+    const [isSubmittable, setIsSubmittable] = useState(false)
     const [powerTreeData, setPowerTreeData] = useState<_DataNode[]>([])
     const [isLoadingPower, setIsLoadingPower] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
@@ -480,10 +480,10 @@ const Role = () => {
     useEffect(() => {
         form.validateFields({ validateOnly: true }).then(
             () => {
-                setSubmittable(true)
+                setIsSubmittable(true)
             },
             () => {
-                setSubmittable(false)
+                setIsSubmittable(false)
             }
         )
 
@@ -598,7 +598,7 @@ const Role = () => {
             </AntdButton>
             <AntdButton
                 type={'primary'}
-                disabled={!submittable}
+                disabled={!isSubmittable}
                 loading={isSubmitting}
                 onClick={handleOnSubmit}
             >
diff --git a/src/pages/System/Settings/Base.tsx b/src/pages/System/Settings/Base.tsx
index 2f11c1e..57351d9 100644
--- a/src/pages/System/Settings/Base.tsx
+++ b/src/pages/System/Settings/Base.tsx
@@ -5,7 +5,7 @@ import SettingsCard from '@/components/system/SettingCard'
 const Base = () => {
     const [baseForm] = AntdForm.useForm<BaseSettingsParam>()
     const baseFormValues = AntdForm.useWatch([], baseForm)
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
 
     const handleOnReset = () => {
         getBaseSettings()
@@ -24,17 +24,17 @@ const Base = () => {
     }
 
     const getBaseSettings = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
-        setLoading(true)
+        setIsLoading(true)
 
         void r_sys_settings_base_get().then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
                 data && baseForm.setFieldsValue(data)
-                setLoading(false)
+                setIsLoading(false)
             }
         })
     }
@@ -48,7 +48,7 @@ const Base = () => {
             <SettingsCard
                 icon={IconOxygenBase}
                 title={'基础'}
-                loading={loading}
+                loading={isLoading}
                 onReset={handleOnReset}
                 onSave={handleOnSave}
                 modifyOperationCode={['system:settings:modify:base']}
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index 68224ba..9347d8f 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -11,7 +11,7 @@ const Mail = () => {
     const [modal, contextHolder] = AntdModal.useModal()
     const [mailForm] = AntdForm.useForm<MailSettingsParam>()
     const mailFormValues = AntdForm.useWatch([], mailForm)
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
     const [mailSendForm] = AntdForm.useForm<MailSendParam>()
 
     const handleOnTest = () => {
@@ -95,17 +95,17 @@ const Mail = () => {
     }
 
     const getMailSettings = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
 
-        setLoading(true)
+        setIsLoading(true)
         void r_sys_settings_mail_get().then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
                 data && mailForm.setFieldsValue(data)
-                setLoading(false)
+                setIsLoading(false)
             }
         })
     }
@@ -119,7 +119,7 @@ const Mail = () => {
             <SettingsCard
                 icon={IconOxygenEmail}
                 title={'邮件'}
-                loading={loading}
+                loading={isLoading}
                 onReset={handleOnReset}
                 onSave={handleOnSave}
                 modifyOperationCode={['system:settings:modify:mail']}
diff --git a/src/pages/System/Settings/SensitiveWord.tsx b/src/pages/System/Settings/SensitiveWord.tsx
index 0a0c32e..f0f8da6 100644
--- a/src/pages/System/Settings/SensitiveWord.tsx
+++ b/src/pages/System/Settings/SensitiveWord.tsx
@@ -13,7 +13,7 @@ const SensitiveWord = () => {
     const [dataSource, setDataSource] = useState<SensitiveWordVo[]>()
     const [targetKeys, setTargetKeys] = useState<string[]>([])
     const [selectedKeys, setSelectedKeys] = useState<string[]>([])
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
     const [isAdding, setIsAdding] = useState(false)
     const [newWord, setNewWord] = useState('')
 
@@ -47,10 +47,10 @@ const SensitiveWord = () => {
     }
 
     const getSensitiveWordSettings = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
-        setLoading(true)
+        setIsLoading(true)
 
         void r_sys_settings_sensitive_get().then((res) => {
             const response = res.data
@@ -58,7 +58,7 @@ const SensitiveWord = () => {
                 const data = response.data
                 data && setDataSource(data)
                 data && setTargetKeys(data.filter((value) => value.enable).map((value) => value.id))
-                setLoading(false)
+                setIsLoading(false)
             }
         })
     }
@@ -103,7 +103,7 @@ const SensitiveWord = () => {
             <SettingsCard
                 icon={IconOxygenSensitive}
                 title={'敏感词'}
-                loading={loading}
+                loading={isLoading}
                 onReset={handleOnReset}
                 onSave={handleOnSave}
                 modifyOperationCode={['system:settings:modify:sensitive']}
diff --git a/src/pages/System/Settings/TwoFactor.tsx b/src/pages/System/Settings/TwoFactor.tsx
index 08f80fd..b9c55ee 100644
--- a/src/pages/System/Settings/TwoFactor.tsx
+++ b/src/pages/System/Settings/TwoFactor.tsx
@@ -5,7 +5,7 @@ import SettingsCard from '@/components/system/SettingCard'
 const TwoFactor = () => {
     const [twoFactorForm] = AntdForm.useForm<TwoFactorSettingsParam>()
     const twoFactorFormValues = AntdForm.useWatch([], twoFactorForm)
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
 
     const handleOnReset = () => {
         getTwoFactorSettings()
@@ -24,17 +24,17 @@ const TwoFactor = () => {
     }
 
     const getTwoFactorSettings = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
-        setLoading(true)
+        setIsLoading(true)
 
         void r_sys_settings_two_factor_get().then((res) => {
             const response = res.data
             if (response.success) {
                 const data = response.data
                 data && twoFactorForm.setFieldsValue(data)
-                setLoading(false)
+                setIsLoading(false)
             }
         })
     }
@@ -48,7 +48,7 @@ const TwoFactor = () => {
             <SettingsCard
                 icon={IconOxygenSafe}
                 title={'双因素'}
-                loading={loading}
+                loading={isLoading}
                 onReset={handleOnReset}
                 onSave={handleOnSave}
                 modifyOperationCode={['system:settings:modify:two-factor']}
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index d1f8745..40f44b7 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -60,7 +60,7 @@ const Base = () => {
     const [isLoading, setIsLoading] = useState(false)
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
     const [isDrawerEdit, setIsDrawerEdit] = useState(false)
-    const [submittable, setSubmittable] = useState(false)
+    const [isSubmittable, setIsSubmittable] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [editingBaseId, setEditingBaseId] = useState<string>('')
     const [editingFiles, setEditingFiles] = useState<Record<string, IFiles>>({})
@@ -70,7 +70,7 @@ const Base = () => {
     const [baseDetailData, setBaseDetailData] = useState<Record<string, ToolBaseVo>>({})
     const [baseDetailLoading, setBaseDetailLoading] = useState<Record<string, boolean>>({})
     const [tsconfig, setTsconfig] = useState<ITsconfig>()
-    const [compiling, setCompiling] = useState(false)
+    const [isCompiling, setIsCompiling] = useState(false)
     const [compileForm] = AntdForm.useForm<{ entryFileName: string }>()
 
     useBeforeUnload(
@@ -220,10 +220,10 @@ const Base = () => {
 
     const handleOnCompileBtnClick = (value: ToolBaseVo) => {
         return () => {
-            if (compiling || isLoading) {
+            if (isCompiling || isLoading) {
                 return
             }
-            setCompiling(true)
+            setIsCompiling(true)
             setIsLoading(true)
             void message.loading({ content: '加载文件中', key: 'COMPILE_LOADING', duration: 0 })
 
@@ -263,7 +263,7 @@ const Base = () => {
                     const files = base64ToFiles(baseDetail!.source.data!)
                     if (!Object.keys(files).includes(IMPORT_MAP_FILE_NAME)) {
                         void message.warning(`编译中止：未包含 ${IMPORT_MAP_FILE_NAME} 文件`)
-                        setCompiling(false)
+                        setIsCompiling(false)
                         setIsLoading(false)
                         return
                     }
@@ -272,7 +272,7 @@ const Base = () => {
                         importMap = JSON.parse(files[IMPORT_MAP_FILE_NAME].value) as IImportMap
                     } catch (e) {
                         void message.warning(`编译中止：Import Map 文件转换失败`)
-                        setCompiling(false)
+                        setIsCompiling(false)
                         setIsLoading(false)
                         return
                     }
@@ -353,14 +353,14 @@ const Base = () => {
                                                     })
                                                     .finally(() => {
                                                         message.destroy('UPLOADING')
-                                                        setCompiling(false)
+                                                        setIsCompiling(false)
                                                         setIsLoading(false)
                                                     })
                                             })
                                             .catch((e: Error) => {
                                                 void message.error(`编译失败：${e.message}`)
                                                 message.destroy('COMPILING')
-                                                setCompiling(false)
+                                                setIsCompiling(false)
                                                 setIsLoading(false)
                                             })
                                     })
@@ -372,13 +372,13 @@ const Base = () => {
                                 }
                             ),
                         onCancel: () => {
-                            setCompiling(false)
+                            setIsCompiling(false)
                             setIsLoading(false)
                         }
                     })
                 })
                 .catch(() => {
-                    setCompiling(false)
+                    setIsCompiling(false)
                     setIsLoading(false)
                     message.destroy('COMPILE_LOADING')
                 })
@@ -1002,10 +1002,10 @@ const Base = () => {
     useEffect(() => {
         form.validateFields({ validateOnly: true }).then(
             () => {
-                setSubmittable(true)
+                setIsSubmittable(true)
             },
             () => {
-                setSubmittable(false)
+                setIsSubmittable(false)
             }
         )
 
@@ -1034,7 +1034,7 @@ const Base = () => {
             </AntdButton>
             <AntdButton
                 type={'primary'}
-                disabled={!submittable}
+                disabled={!isSubmittable}
                 loading={isSubmitting}
                 onClick={handleOnSubmit}
             >
diff --git a/src/pages/System/Tools/Category.tsx b/src/pages/System/Tools/Category.tsx
index 60652af..b7fc552 100644
--- a/src/pages/System/Tools/Category.tsx
+++ b/src/pages/System/Tools/Category.tsx
@@ -27,7 +27,7 @@ const Category = () => {
     const [isLoading, setIsLoading] = useState(false)
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
     const [isDrawerEdit, setIsDrawerEdit] = useState(false)
-    const [submittable, setSubmittable] = useState(false)
+    const [isSubmittable, setIsSubmittable] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
 
     const handleOnAddBtnClick = () => {
@@ -230,10 +230,10 @@ const Category = () => {
     useEffect(() => {
         form.validateFields({ validateOnly: true }).then(
             () => {
-                setSubmittable(true)
+                setIsSubmittable(true)
             },
             () => {
-                setSubmittable(false)
+                setIsSubmittable(false)
             }
         )
 
@@ -256,7 +256,7 @@ const Category = () => {
             </AntdButton>
             <AntdButton
                 type={'primary'}
-                disabled={!submittable}
+                disabled={!isSubmittable}
                 loading={isSubmitting}
                 onClick={handleOnSubmit}
             >
diff --git a/src/pages/System/Tools/Code.tsx b/src/pages/System/Tools/Code.tsx
index a5d8e89..e9e9f1a 100644
--- a/src/pages/System/Tools/Code.tsx
+++ b/src/pages/System/Tools/Code.tsx
@@ -15,7 +15,7 @@ const Code = () => {
     const navigate = useNavigate()
     const [modal, contextHolder] = AntdModal.useModal()
     const { id } = useParams()
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
     const [files, setFiles] = useState<IFiles>({})
     const [selectedFileName, setSelectedFileName] = useState('')
     const [platform, setPlatform] = useState<Platform>('WEB')
@@ -47,10 +47,10 @@ const Code = () => {
     }
 
     const getTool = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
-        setLoading(true)
+        setIsLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
         void r_sys_tool_get_one(id!)
@@ -69,7 +69,7 @@ const Code = () => {
                 }
             })
             .finally(() => {
-                setLoading(false)
+                setIsLoading(false)
                 message.destroy('LOADING')
             })
     }
diff --git a/src/pages/System/Tools/Execute.tsx b/src/pages/System/Tools/Execute.tsx
index ca8c277..11f88f1 100644
--- a/src/pages/System/Tools/Execute.tsx
+++ b/src/pages/System/Tools/Execute.tsx
@@ -12,7 +12,7 @@ import { base64ToFiles, base64ToStr, IMPORT_MAP_FILE_NAME } from '@/components/P
 const Execute = () => {
     const navigate = useNavigate()
     const { id } = useParams()
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
     const [compiledCode, setCompiledCode] = useState('')
 
     const render = (toolVo: ToolVo) => {
@@ -39,10 +39,10 @@ const Execute = () => {
     }
 
     const getTool = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
-        setLoading(true)
+        setIsLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
         void r_sys_tool_get_one(id!)
@@ -61,7 +61,7 @@ const Execute = () => {
                 }
             })
             .finally(() => {
-                setLoading(false)
+                setIsLoading(false)
                 message.destroy('LOADING')
             })
     }
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index 1a04639..b3f79d9 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -60,7 +60,7 @@ const Template = () => {
     const [isDrawerEdit, setIsDrawerEdit] = useState(false)
     const [baseData, setBaseData] = useState<ToolBaseVo[]>([])
     const [isLoadingBaseData, setIsLoadingBaseData] = useState(false)
-    const [submittable, setSubmittable] = useState(false)
+    const [isSubmittable, setIsSubmittable] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [editingTemplateId, setEditingTemplateId] = useState<string>('')
     const [editingFiles, setEditingFiles] = useState<Record<string, IFiles>>({})
@@ -884,10 +884,10 @@ const Template = () => {
     useEffect(() => {
         form.validateFields({ validateOnly: true }).then(
             () => {
-                setSubmittable(true)
+                setIsSubmittable(true)
             },
             () => {
-                setSubmittable(false)
+                setIsSubmittable(false)
             }
         )
 
@@ -972,7 +972,7 @@ const Template = () => {
             </AntdButton>
             <AntdButton
                 type={'primary'}
-                disabled={!submittable}
+                disabled={!isSubmittable}
                 loading={isSubmitting}
                 onClick={handleOnSubmit}
             >
diff --git a/src/pages/Tools/Create.tsx b/src/pages/Tools/Create.tsx
index 21888e0..5fa73b1 100644
--- a/src/pages/Tools/Create.tsx
+++ b/src/pages/Tools/Create.tsx
@@ -29,13 +29,13 @@ const Create = () => {
     const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>()
     const [templateDetailData, setTemplateDetailData] = useState<Record<string, ToolTemplateVo>>({})
     const [previewTemplate, setPreviewTemplate] = useState('')
-    const [loadingTemplate, setLoadingTemplate] = useState(false)
-    const [loadingCategory, setLoadingCategory] = useState(false)
-    const [creating, setCreating] = useState(false)
+    const [isLoadingTemplate, setIsLoadingTemplate] = useState(false)
+    const [isLoadingCategory, setIsLoadingCategory] = useState(false)
+    const [isCreating, setIsCreating] = useState(false)
     const [compiledCode, setCompiledCode] = useState('')
 
     const handleOnFinish = (toolAddParam: ToolCreateParam) => {
-        setCreating(true)
+        setIsCreating(true)
 
         void r_tool_create(toolAddParam)
             .then((res) => {
@@ -49,15 +49,15 @@ const Create = () => {
                         break
                     case DATABASE_DUPLICATE_KEY:
                         void message.warning('已存在相同 ID 的应用')
-                        setCreating(false)
+                        setIsCreating(false)
                         break
                     default:
                         void message.error('创建失败，请稍后重试')
-                        setCreating(false)
+                        setIsCreating(false)
                 }
             })
             .catch(() => {
-                setCreating(false)
+                setIsCreating(false)
             })
     }
 
@@ -84,7 +84,7 @@ const Create = () => {
     }
 
     const handleOnPlatformChange = (value: string) => {
-        setLoadingTemplate(true)
+        setIsLoadingTemplate(true)
         void r_tool_template_get({
             platform: value
         })
@@ -103,7 +103,7 @@ const Create = () => {
                 }
             })
             .finally(() => {
-                setLoadingTemplate(false)
+                setIsLoadingTemplate(false)
             })
     }
 
@@ -113,7 +113,7 @@ const Create = () => {
             return
         }
 
-        setLoadingTemplate(true)
+        setIsLoadingTemplate(true)
         void r_tool_template_get_one(value)
             .then((res) => {
                 const response = res.data
@@ -126,7 +126,7 @@ const Create = () => {
                 }
             })
             .finally(() => {
-                setLoadingTemplate(false)
+                setIsLoadingTemplate(false)
             })
     }
 
@@ -167,7 +167,7 @@ const Create = () => {
     }, [form, formValues?.keywords])
 
     useEffect(() => {
-        setLoadingCategory(true)
+        setIsLoadingCategory(true)
         void r_tool_category_get()
             .then((res) => {
                 const response = res.data
@@ -180,7 +180,7 @@ const Create = () => {
                 }
             })
             .finally(() => {
-                setLoadingCategory(false)
+                setIsLoadingCategory(false)
             })
     }, [])
 
@@ -198,7 +198,7 @@ const Create = () => {
                                     form={form}
                                     layout={'vertical'}
                                     onFinish={handleOnFinish}
-                                    disabled={creating}
+                                    disabled={isCreating}
                                 >
                                     <AntdForm.Item
                                         label={'图标'}
@@ -319,8 +319,8 @@ const Create = () => {
                                                 value: value.id,
                                                 label: value.name
                                             }))}
-                                            loading={loadingTemplate}
-                                            disabled={loadingTemplate}
+                                            loading={isLoadingTemplate}
+                                            disabled={isLoadingTemplate}
                                             onChange={handleOnTemplateChange}
                                             placeholder={'请选择模板'}
                                         />
@@ -349,8 +349,8 @@ const Create = () => {
                                                 value: value.id,
                                                 label: value.name
                                             }))}
-                                            loading={loadingCategory}
-                                            disabled={loadingCategory}
+                                            loading={isLoadingCategory}
+                                            disabled={isLoadingCategory}
                                             placeholder={'请选择类别'}
                                         />
                                     </AntdForm.Item>
@@ -359,7 +359,7 @@ const Create = () => {
                                             className={'create-bt'}
                                             type={'primary'}
                                             htmlType={'submit'}
-                                            loading={creating}
+                                            loading={isCreating}
                                         >
                                             创建
                                         </AntdButton>
diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index b424d1d..1bac51d 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -36,7 +36,7 @@ const Edit = () => {
     })
     const [form] = AntdForm.useForm<ToolUpdateParam>()
     const formValues = AntdForm.useWatch([], form)
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
     const [toolData, setToolData] = useState<ToolVo>()
     const [files, setFiles] = useState<IFiles>({})
     const [selectedFileName, setSelectedFileName] = useState('')
@@ -46,13 +46,13 @@ const Edit = () => {
     const [tsconfig, setTsconfig] = useState<ITsconfig>()
     const [entryPoint, setEntryPoint] = useState('')
     const [baseDist, setBaseDist] = useState('')
-    const [showDraggableMask, setShowDraggableMask] = useState(false)
+    const [isShowDraggableMask, setIsShowDraggableMask] = useState(false)
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
-    const [submittable, setSubmittable] = useState(false)
+    const [isSubmittable, setIsSubmittable] = useState(false)
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [hasEdited, setHasEdited] = useState(false)
     const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>()
-    const [loadingCategory, setLoadingCategory] = useState(false)
+    const [isLoadingCategory, setIsLoadingCategory] = useState(false)
 
     useBeforeUnload(
         useCallback(
@@ -196,10 +196,10 @@ const Edit = () => {
     }
 
     const getCategory = () => {
-        if (loadingCategory) {
+        if (isLoadingCategory) {
             return
         }
-        setLoadingCategory(true)
+        setIsLoadingCategory(true)
 
         void r_tool_category_get()
             .then((res) => {
@@ -213,15 +213,15 @@ const Edit = () => {
                 }
             })
             .finally(() => {
-                setLoadingCategory(false)
+                setIsLoadingCategory(false)
             })
     }
 
     const getTool = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
-        setLoading(true)
+        setIsLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
         void r_tool_detail('!', toolId!, 'latest', searchParams.get('platform') as Platform)
@@ -253,7 +253,7 @@ const Edit = () => {
                 }
             })
             .finally(() => {
-                setLoading(false)
+                setIsLoading(false)
                 message.destroy('LOADING')
             })
     }
@@ -299,10 +299,10 @@ const Edit = () => {
     useEffect(() => {
         form.validateFields({ validateOnly: true }).then(
             () => {
-                setSubmittable(true)
+                setIsSubmittable(true)
             },
             () => {
-                setSubmittable(false)
+                setIsSubmittable(false)
             }
         )
     }, [formValues])
@@ -327,7 +327,7 @@ const Edit = () => {
             </AntdButton>
             <AntdButton
                 type={'primary'}
-                disabled={!submittable}
+                disabled={!isSubmittable}
                 loading={isSubmitting}
                 onClick={handleOnSubmit}
             >
@@ -408,8 +408,8 @@ const Edit = () => {
                         value: value.id,
                         label: value.name
                     }))}
-                    loading={loadingCategory}
-                    disabled={loadingCategory}
+                    loading={isLoadingCategory}
+                    disabled={isLoadingCategory}
                     placeholder={'请选择类别'}
                 />
             </AntdForm.Item>
@@ -421,7 +421,7 @@ const Edit = () => {
             <FitFullscreen data-component={'tools-edit'}>
                 <Card>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
-                        <LoadingMask hidden={!loading}>
+                        <LoadingMask hidden={!isLoading}>
                             <Playground.CodeEditor
                                 tsconfig={tsconfig}
                                 files={{
@@ -454,12 +454,12 @@ const Edit = () => {
                                 mobileMode={toolData?.platform === 'ANDROID'}
                             />
                         </LoadingMask>
-                        {showDraggableMask && <div className={'draggable-mask'} />}
+                        {isShowDraggableMask && <div className={'draggable-mask'} />}
                     </FlexBox>
                 </Card>
                 <Draggable
-                    onStart={() => setShowDraggableMask(true)}
-                    onStop={() => setShowDraggableMask(false)}
+                    onStart={() => setIsShowDraggableMask(true)}
+                    onStop={() => setIsShowDraggableMask(false)}
                     bounds={'#root'}
                 >
                     <div className={'draggable-content'}>
diff --git a/src/pages/Tools/Source.tsx b/src/pages/Tools/Source.tsx
index 7c7244e..dd6cc7d 100644
--- a/src/pages/Tools/Source.tsx
+++ b/src/pages/Tools/Source.tsx
@@ -15,7 +15,7 @@ const Source = () => {
     const [searchParams] = useSearchParams({
         platform: import.meta.env.VITE_PLATFORM
     })
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
     const [files, setFiles] = useState<IFiles>({})
     const [selectedFileName, setSelectedFileName] = useState('')
 
@@ -29,10 +29,10 @@ const Source = () => {
     }
 
     const getTool = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
-        setLoading(true)
+        setIsLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
         void r_tool_detail(
@@ -56,7 +56,7 @@ const Source = () => {
                 }
             })
             .finally(() => {
-                setLoading(false)
+                setIsLoading(false)
                 message.destroy('LOADING')
             })
     }
diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx
index eca029d..27f449c 100644
--- a/src/pages/Tools/Store.tsx
+++ b/src/pages/Tools/Store.tsx
@@ -15,7 +15,7 @@ const Store = () => {
     const [currentPage, setCurrentPage] = useState(0)
     const [hasNextPage, setHasNextPage] = useState(false)
     const [toolData, setToolData] = useState<ToolVo[]>([])
-    const [hideSearch, setHideSearch] = useState(false)
+    const [isHideSearch, setIsHideSearch] = useState(false)
     const [searchValue, setSearchValue] = useState('')
 
     const handleOnSearch = (value: string) => {
@@ -25,9 +25,9 @@ const Store = () => {
 
     const handleOnScroll = (event: UIEvent<HTMLDivElement>) => {
         if (event.currentTarget.scrollTop < scrollTopRef.current) {
-            setHideSearch(false)
+            setIsHideSearch(false)
         } else {
-            setHideSearch(true)
+            setIsHideSearch(true)
         }
         scrollTopRef.current = event.currentTarget.scrollTop
     }
@@ -89,7 +89,7 @@ const Store = () => {
                     autoHideWaitingTime={1000}
                     onScroll={handleOnScroll}
                 >
-                    <div className={`search${hideSearch ? ' hide' : ''}`}>
+                    <div className={`search${isHideSearch ? ' hide' : ''}`}>
                         <AntdInput.Search
                             enterButton
                             allowClear
diff --git a/src/pages/Tools/View.tsx b/src/pages/Tools/View.tsx
index c965b37..327394f 100644
--- a/src/pages/Tools/View.tsx
+++ b/src/pages/Tools/View.tsx
@@ -16,7 +16,7 @@ const View = () => {
     const [searchParams] = useSearchParams({
         platform: import.meta.env.VITE_PLATFORM
     })
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
     const [compiledCode, setCompiledCode] = useState('')
     const [isAndroid, setIsAndroid] = useState(false)
 
@@ -58,10 +58,10 @@ const View = () => {
     }
 
     const getTool = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
-        setLoading(true)
+        setIsLoading(true)
         void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
 
         void r_tool_detail(
@@ -85,7 +85,7 @@ const View = () => {
                 }
             })
             .finally(() => {
-                setLoading(false)
+                setIsLoading(false)
                 message.destroy('LOADING')
             })
     }
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index a2bae0c..a7bfe6a 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -208,7 +208,7 @@ const ToolCard = ({ tools, onDelete, onUpgrade, onSubmit, onCancel }: ToolCardPr
 const Tools = () => {
     const navigate = useNavigate()
     const [modal, contextHolder] = AntdModal.useModal()
-    const [loading, setLoading] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
     const [currentPage, setCurrentPage] = useState(0)
     const [hasNextPage, setHasNextPage] = useState(false)
     const [toolData, setToolData] = useState<ToolVo[]>([])
@@ -228,7 +228,7 @@ const Tools = () => {
             .then(
                 (confirmed) => {
                     if (confirmed) {
-                        setLoading(true)
+                        setIsLoading(true)
 
                         void r_tool_delete(tool.id)
                             .then((res) => {
@@ -241,7 +241,7 @@ const Tools = () => {
                                 }
                             })
                             .finally(() => {
-                                setLoading(false)
+                                setIsLoading(false)
                             })
                     }
                 },
@@ -371,7 +371,7 @@ const Tools = () => {
             .then(
                 (confirmed) => {
                     if (confirmed) {
-                        setLoading(true)
+                        setIsLoading(true)
 
                         void r_tool_submit(tool.id)
                             .then((res) => {
@@ -392,7 +392,7 @@ const Tools = () => {
                                 }
                             })
                             .finally(() => {
-                                setLoading(false)
+                                setIsLoading(false)
                             })
                     }
                 },
@@ -411,7 +411,7 @@ const Tools = () => {
             .then(
                 (confirmed) => {
                     if (confirmed) {
-                        setLoading(true)
+                        setIsLoading(true)
 
                         void r_tool_cancel(tool.id)
                             .then((res) => {
@@ -431,7 +431,7 @@ const Tools = () => {
                                 }
                             })
                             .finally(() => {
-                                setLoading(false)
+                                setIsLoading(false)
                                 getTool(1)
                             })
                     }
@@ -441,24 +441,24 @@ const Tools = () => {
     }
 
     const handleOnLoadMore = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
         getTool(currentPage + 1)
     }
 
     const handleOnLoadMoreStar = () => {
-        if (loading) {
+        if (isLoading) {
             return
         }
         getStarTool(currentStarPage + 1)
     }
 
     const getTool = (page: number) => {
-        if (loading) {
+        if (isLoading) {
             return
         }
-        setLoading(true)
+        setIsLoading(true)
         void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 })
 
         void r_tool_get({ currentPage: page })
@@ -487,7 +487,7 @@ const Tools = () => {
                 }
             })
             .finally(() => {
-                setLoading(false)
+                setIsLoading(false)
                 message.destroy('LOADING')
                 if (currentStarPage === 0) {
                     getStarTool(1)
@@ -496,10 +496,10 @@ const Tools = () => {
     }
 
     const getStarTool = (page: number) => {
-        if (loading) {
+        if (isLoading) {
             return
         }
-        setLoading(true)
+        setIsLoading(true)
         void message.loading({ content: '加载收藏列表中', key: 'LOADING', duration: 0 })
 
         void r_tool_get_favorite({ currentPage: page })
@@ -528,7 +528,7 @@ const Tools = () => {
                 }
             })
             .finally(() => {
-                setLoading(false)
+                setIsLoading(false)
                 message.destroy('LOADING')
             })
     }
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index 8217fd2..839caa5 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -18,12 +18,12 @@ const ToolsFramework = () => {
     const [isDelete, setIsDelete] = useState(false)
     const [toolMenuItem, setToolMenuItem] = useState<ToolMenuItem[]>(getToolMenuItem)
     const [activeItem, setActiveItem] = useState<ToolMenuItem | null>(null)
-    const [showDropMask, setShowDropMask] = useState(false)
+    const [isShowDropMask, setIsShowDropMask] = useState(false)
 
     const handleOnDragStart = ({ active }: DragStartEvent) => {
         setActiveItem(active.data.current as ToolMenuItem)
         if (!active.data.current?.sortable) {
-            setShowDropMask(true)
+            setIsShowDropMask(true)
         }
     }
 
@@ -73,7 +73,7 @@ const ToolsFramework = () => {
         }
 
         setActiveItem(null)
-        setShowDropMask(false)
+        setIsShowDropMask(false)
     }
 
     const handleOnDragCancel = () => {
@@ -174,7 +174,7 @@ const ToolsFramework = () => {
                                         </DraggableOverlay>
                                     </Sidebar.ItemList>
                                 </Sidebar.Scroll>
-                                {showDropMask && <DropMask />}
+                                {isShowDropMask && <DropMask />}
                             </Droppable>
                         </Sidebar>
                     </div>

From c62e5c1e777feb84e73fd92fbd8ee8903f2fef14 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 8 May 2024 15:10:15 +0800
Subject: [PATCH 285/307] Refactor(StoreCard): Fix the bug that open android
 emulator automatically

Fix the bug that open android emulator automatically when click mask
---
 src/assets/css/components/tools/store-card.scss | 1 +
 src/components/tools/StoreCard.tsx              | 6 ++----
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/components/tools/store-card.scss b/src/assets/css/components/tools/store-card.scss
index c42f825..f5c082e 100644
--- a/src/assets/css/components/tools/store-card.scss
+++ b/src/assets/css/components/tools/store-card.scss
@@ -32,6 +32,7 @@
         gap: 4px;
         opacity: 0;
         transition: all 0.2s;
+        z-index: 100;
 
         > *:hover {
           color: constants.$font-secondary-color;
diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
index 5572658..e2123f4 100644
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -75,10 +75,9 @@ const StoreCard = ({
         }
         if (platform === 'ANDROID') {
             void modal.confirm({
+                centered: true,
                 icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
                 title: 'Android 端',
-                centered: true,
-                maskClosable: true,
                 content: (
                     <FlexBox className={'android-qrcode'}>
                         <AntdQRCode
@@ -147,10 +146,9 @@ const StoreCard = ({
     const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         void modal.confirm({
+            centered: true,
             icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
             title: 'Android 端',
-            centered: true,
-            maskClosable: true,
             content: (
                 <FlexBox className={'android-qrcode'}>
                     <AntdQRCode

From 0ad19e24a0215b3101beea4f1db035b5e2eb3db8 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 8 May 2024 17:17:33 +0800
Subject: [PATCH 286/307] Refactor(Service): Add network error message

---
 src/services/index.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/services/index.tsx b/src/services/index.tsx
index 149a65e..db8d15e 100644
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -126,6 +126,15 @@ service.interceptors.response.use(
             (error.code === 'ECONNABORTED' && error.message.includes('timeout'))
         ) {
             void message.error({ content: '请求超时，请稍后重试', key: 'TIMEOUT' })
+        } else if (error.code === 'ERR_NETWORK') {
+            void message.error({
+                content: (
+                    <>
+                        <strong>网络错误</strong>，请检查网络后重试
+                    </>
+                ),
+                key: 'NETWORK_ERROR'
+            })
         } else {
             void message.error({
                 content: (

From 386744d7022515505bf4b1f01cee9a15a313fbc3 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 8 May 2024 17:19:28 +0800
Subject: [PATCH 287/307] Refactor(Navigation): Optimize url operate

---
 src/util/navigation.ts | 44 ++++++++++++++++++++++++++++++------------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/util/navigation.ts b/src/util/navigation.ts
index fceb2fe..4f4b9b0 100644
--- a/src/util/navigation.ts
+++ b/src/util/navigation.ts
@@ -37,10 +37,15 @@ export const navigateToView = (
     version?: string,
     options?: NavigateOptions
 ) => {
-    navigate(
-        `/view/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
-        options
+    const url = new URL(
+        `/view/${username}/${toolId}${version ? `/${version}` : ''}`,
+        window.location.href
     )
+    if (platform !== import.meta.env.VITE_PLATFORM) {
+        url.searchParams.append('platform', platform)
+    }
+
+    navigate(`${url.pathname}${url.search}`, options)
 }
 
 export const navigateToSource = (
@@ -51,10 +56,14 @@ export const navigateToSource = (
     version?: string,
     options?: NavigateOptions
 ) => {
-    navigate(
-        `/source/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
-        options
+    const url = new URL(
+        `/source/${username}/${toolId}${version ? `/${version}` : ''}`,
+        window.location.href
     )
+    if (platform !== import.meta.env.VITE_PLATFORM) {
+        url.searchParams.append('platform', platform)
+    }
+    navigate(`${url.pathname}${url.search}`, options)
 }
 
 export const navigateToRedirect = (
@@ -104,10 +113,12 @@ export const navigateToEdit = (
     platform: Platform,
     options?: NavigateOptions
 ) => {
-    navigate(
-        `/edit/${toolId}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`,
-        options
-    )
+    const url = new URL(`/edit/${toolId}`, window.location.href)
+    if (platform !== import.meta.env.VITE_PLATFORM) {
+        url.searchParams.append('platform', platform)
+    }
+
+    navigate(`${url.pathname}${url.search}`, options)
 }
 
 export const navigateToUser = (navigate: NavigateFunction, options?: NavigateOptions) => {
@@ -123,5 +134,14 @@ export const getViewPath = (
     toolId: string,
     platform: Platform,
     version?: string
-) =>
-    `/view/${username}/${toolId}${version ? `/${version}` : ''}${platform !== import.meta.env.VITE_PLATFORM ? `?platform=${platform}` : ''}`
+) => {
+    const url = new URL(
+        `/view/${username}/${toolId}${version ? `/${version}` : ''}`,
+        window.location.href
+    )
+    if (platform !== import.meta.env.VITE_PLATFORM) {
+        url.searchParams.append('platform', platform)
+    }
+
+    return `${url.pathname}${url.search}`
+}

From f55eac12495b9c3ac6261daef5a1ad187487af94 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 11 May 2024 16:37:22 +0800
Subject: [PATCH 288/307] Refactor(StoreCard): Optimize android qr-code url

---
 src/components/tools/StoreCard.tsx | 11 +++--------
 src/util/navigation.ts             |  3 +++
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
index e2123f4..c16e3d4 100644
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -7,6 +7,7 @@ import { COLOR_BACKGROUND, COLOR_MAIN, COLOR_PRODUCTION } from '@/constants/comm
 import { checkDesktop, omitText } from '@/util/common'
 import { getLoginStatus, getUserId } from '@/util/auth'
 import {
+    getAndroidUrl,
     navigateToLogin,
     navigateToSource,
     navigateToStore,
@@ -80,10 +81,7 @@ const StoreCard = ({
                 title: 'Android 端',
                 content: (
                     <FlexBox className={'android-qrcode'}>
-                        <AntdQRCode
-                            value={`oxygen://openurl/view/${author.username}/${toolId}`}
-                            size={300}
-                        />
+                        <AntdQRCode value={getAndroidUrl(author.username, toolId)} size={300} />
                         <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
                     </FlexBox>
                 ),
@@ -151,10 +149,7 @@ const StoreCard = ({
             title: 'Android 端',
             content: (
                 <FlexBox className={'android-qrcode'}>
-                    <AntdQRCode
-                        value={`oxygen://openurl/view/${author.username}/${toolId}`}
-                        size={300}
-                    />
+                    <AntdQRCode value={getAndroidUrl(author.username, toolId)} size={300} />
                     <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
                 </FlexBox>
             ),
diff --git a/src/util/navigation.ts b/src/util/navigation.ts
index 4f4b9b0..19da234 100644
--- a/src/util/navigation.ts
+++ b/src/util/navigation.ts
@@ -145,3 +145,6 @@ export const getViewPath = (
 
     return `${url.pathname}${url.search}`
 }
+
+export const getAndroidUrl = (username: string, toolId: string) =>
+    `oxygen://opentool/${username}/${toolId}`

From da32a27ad67c51150b839110f060ae7191186ee9 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sat, 11 May 2024 18:56:36 +0800
Subject: [PATCH 289/307] Fix(Sidebar): Fix the bug that submenu can not
 display

---
 src/assets/css/components/common/sidebar.scss | 4 ++++
 src/components/common/Sidebar/Item.tsx        | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.scss
index c456daf..08fe6e5 100644
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -152,6 +152,10 @@
                   padding: 8px 16px;
                   transition: all 0.2s;
 
+                  .text {
+                    width: unset;
+                  }
+
                   &.active {
                     color: constants.$origin-color;
                     background-color: constants.$main-color;
diff --git a/src/components/common/Sidebar/Item.tsx b/src/components/common/Sidebar/Item.tsx
index 74ebfa0..f488368 100644
--- a/src/components/common/Sidebar/Item.tsx
+++ b/src/components/common/Sidebar/Item.tsx
@@ -12,8 +12,8 @@ type ItemProps = {
 }
 
 const Item = (props: ItemProps) => {
-    const [submenuTop, setSubmenuTop] = useState(0)
-    const [submenuLeft, setSubmenuLeft] = useState(0)
+    const [submenuTop, setSubmenuTop] = useState(Number.MAX_VALUE)
+    const [submenuLeft, setSubmenuLeft] = useState(Number.MAX_VALUE)
 
     const showSubmenu = (e: MouseEvent) => {
         const parentElement = e.currentTarget.parentElement

From f04a4090783740897cfe40cca88dbe38e1a17332 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 12 May 2024 03:43:36 +0800
Subject: [PATCH 290/307] Refactor(Render): Allow to read and write clipboard
 in iframe

---
 src/components/Playground/Output/Preview/Render.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx
index 102dd2c..3c8651a 100644
--- a/src/components/Playground/Output/Preview/Render.tsx
+++ b/src/components/Playground/Output/Preview/Render.tsx
@@ -203,7 +203,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                                 ref={iframeRef}
                                 src={iframeUrl}
                                 onLoad={() => setIsLoaded(true)}
-                                sandbox="allow-downloads allow-forms allow-modals allow-scripts"
+                                sandbox="allow-downloads allow-forms allow-modals allow-scripts clipboard-read clipboard-write"
                             />
                         </div>
                         <div className={`device-footer${isRotate ? ' rotate' : ''}`} />
@@ -245,7 +245,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
             ref={iframeRef}
             src={iframeUrl}
             onLoad={() => setIsLoaded(true)}
-            sandbox="allow-downloads allow-forms allow-modals allow-scripts"
+            sandbox="allow-downloads allow-forms allow-modals allow-scripts clipboard-read clipboard-write"
         />
     )
 }

From 0ead91ce4f6e3e5627eae4030c3b260a303556a1 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 12 May 2024 04:05:06 +0800
Subject: [PATCH 291/307] Refactor(Render): Allow to read and write clipboard
 in iframe

---
 src/components/Playground/Output/Preview/Render.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx
index 3c8651a..e8f7d65 100644
--- a/src/components/Playground/Output/Preview/Render.tsx
+++ b/src/components/Playground/Output/Preview/Render.tsx
@@ -203,7 +203,8 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
                                 ref={iframeRef}
                                 src={iframeUrl}
                                 onLoad={() => setIsLoaded(true)}
-                                sandbox="allow-downloads allow-forms allow-modals allow-scripts clipboard-read clipboard-write"
+                                sandbox="allow-downloads allow-forms allow-modals allow-scripts"
+                                allow={'clipboard-read; clipboard-write'}
                             />
                         </div>
                         <div className={`device-footer${isRotate ? ' rotate' : ''}`} />
@@ -245,7 +246,8 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
             ref={iframeRef}
             src={iframeUrl}
             onLoad={() => setIsLoaded(true)}
-            sandbox="allow-downloads allow-forms allow-modals allow-scripts clipboard-read clipboard-write"
+            sandbox={'allow-downloads allow-forms allow-modals allow-scripts'}
+            allow={'clipboard-read; clipboard-write'}
         />
     )
 }

From 9d4121faf4f8e3516125d3777e3765303ff2808e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Sun, 12 May 2024 04:36:02 +0800
Subject: [PATCH 292/307] Fix(Edit): Fix undefined in AntdSelect

---
 src/pages/Tools/Edit.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Tools/Edit.tsx b/src/pages/Tools/Edit.tsx
index 1bac51d..ba1bcc3 100644
--- a/src/pages/Tools/Edit.tsx
+++ b/src/pages/Tools/Edit.tsx
@@ -392,7 +392,7 @@ const Edit = () => {
                 label={'关键字'}
                 tooltip={'工具搜索（每个不超过10个字符）'}
                 name={'keywords'}
-                rules={[{ required: true, whitespace: true }]}
+                rules={[{ required: true }]}
             >
                 <AntdSelect mode={'tags'} maxCount={20} placeholder={'请输入关键字'} />
             </AntdForm.Item>
@@ -400,7 +400,7 @@ const Edit = () => {
                 label={'类别'}
                 tooltip={'工具分类'}
                 name={'categories'}
-                rules={[{ required: true, whitespace: true }]}
+                rules={[{ required: true }]}
             >
                 <AntdSelect
                     mode={'multiple'}

From b8ed24d3209fef83fd0d4460c3720c9340b7650c Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 21 May 2024 14:36:08 +0800
Subject: [PATCH 293/307] Fix(Navigation): Fix navigate bug

---
 src/util/navigation.ts | 40 +++++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/util/navigation.ts b/src/util/navigation.ts
index 19da234..140215a 100644
--- a/src/util/navigation.ts
+++ b/src/util/navigation.ts
@@ -37,15 +37,15 @@ export const navigateToView = (
     version?: string,
     options?: NavigateOptions
 ) => {
-    const url = new URL(
-        `/view/${username}/${toolId}${version ? `/${version}` : ''}`,
-        window.location.href
-    )
+    const searchParams = new URLSearchParams()
     if (platform !== import.meta.env.VITE_PLATFORM) {
-        url.searchParams.append('platform', platform)
+        searchParams.append('platform', platform)
     }
 
-    navigate(`${url.pathname}${url.search}`, options)
+    navigate(
+        `/view/${username}/${toolId}${version ? `/${version}` : ''}${searchParams.size ? `?${searchParams.toString()}` : ''}`,
+        options
+    )
 }
 
 export const navigateToSource = (
@@ -56,14 +56,15 @@ export const navigateToSource = (
     version?: string,
     options?: NavigateOptions
 ) => {
-    const url = new URL(
-        `/source/${username}/${toolId}${version ? `/${version}` : ''}`,
-        window.location.href
-    )
+    const searchParams = new URLSearchParams()
     if (platform !== import.meta.env.VITE_PLATFORM) {
-        url.searchParams.append('platform', platform)
+        searchParams.append('platform', platform)
     }
-    navigate(`${url.pathname}${url.search}`, options)
+
+    navigate(
+        `/source/${username}/${toolId}${version ? `/${version}` : ''}${searchParams.size ? `?${searchParams.toString()}` : ''}`,
+        options
+    )
 }
 
 export const navigateToRedirect = (
@@ -113,12 +114,12 @@ export const navigateToEdit = (
     platform: Platform,
     options?: NavigateOptions
 ) => {
-    const url = new URL(`/edit/${toolId}`, window.location.href)
+    const searchParams = new URLSearchParams()
     if (platform !== import.meta.env.VITE_PLATFORM) {
-        url.searchParams.append('platform', platform)
+        searchParams.append('platform', platform)
     }
 
-    navigate(`${url.pathname}${url.search}`, options)
+    navigate(`/edit/${toolId}${searchParams.size ? `?${searchParams.toString()}` : ''}`, options)
 }
 
 export const navigateToUser = (navigate: NavigateFunction, options?: NavigateOptions) => {
@@ -135,15 +136,12 @@ export const getViewPath = (
     platform: Platform,
     version?: string
 ) => {
-    const url = new URL(
-        `/view/${username}/${toolId}${version ? `/${version}` : ''}`,
-        window.location.href
-    )
+    const searchParams = new URLSearchParams()
     if (platform !== import.meta.env.VITE_PLATFORM) {
-        url.searchParams.append('platform', platform)
+        searchParams.append('platform', platform)
     }
 
-    return `${url.pathname}${url.search}`
+    return `/view/${username}/${toolId}${version ? `/${version}` : ''}${searchParams.size ? `?${searchParams.toString()}` : ''}`
 }
 
 export const getAndroidUrl = (username: string, toolId: string) =>

From 130687288586523dc15920ae9153f0a887362b9e Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 21 May 2024 14:37:46 +0800
Subject: [PATCH 294/307] Refactor(URL): Optimize url

---
 .env.development                     |  1 +
 .env.production                      |  1 +
 .env.testing                         |  1 +
 src/assets/css/pages/user/index.scss |  2 ++
 src/global.d.ts                      |  1 +
 src/pages/Tools/User.tsx             |  8 +++++---
 src/pages/User/index.tsx             | 24 +++++++++++++++---------
 7 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/.env.development b/.env.development
index 92ef92f..0c1ca3c 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,5 @@
 VITE_PLATFORM=WEB
+VITE_UI_URL=${DEV_UI_URL}
 VITE_API_URL=${DEV_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
 VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
diff --git a/.env.production b/.env.production
index ef7c119..528d73a 100644
--- a/.env.production
+++ b/.env.production
@@ -1,4 +1,5 @@
 VITE_PLATFORM=WEB
+VITE_UI_URL=${PRODUCT_UI_URL}
 VITE_API_URL=${PRODUCT_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
 VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
diff --git a/.env.testing b/.env.testing
index 1b6606e..b5fb949 100644
--- a/.env.testing
+++ b/.env.testing
@@ -1,5 +1,6 @@
 NODE_ENV=development
 VITE_PLATFORM=WEB
+VITE_UI_URL=${TEST_UI_URL}
 VITE_API_URL=${TEST_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
 VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}
diff --git a/src/assets/css/pages/user/index.scss b/src/assets/css/pages/user/index.scss
index 6bcce1d..1b1bce0 100644
--- a/src/assets/css/pages/user/index.scss
+++ b/src/assets/css/pages/user/index.scss
@@ -70,6 +70,8 @@
         }
 
         .url {
+          cursor: pointer;
+
           > span {
             margin-left: 8px;
           }
diff --git a/src/global.d.ts b/src/global.d.ts
index 41b47cc..5bcfef7 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -5,6 +5,7 @@ type Platform = 'WEB' | 'DESKTOP' | 'ANDROID'
 
 interface ImportMetaEnv {
     readonly VITE_PLATFORM: Platform
+    readonly VITE_UI_URL: string
     readonly VITE_API_URL: string
     readonly VITE_API_TOKEN_URL: string
     readonly VITE_TURNSTILE_SITE_KEY: string
diff --git a/src/pages/Tools/User.tsx b/src/pages/Tools/User.tsx
index 4fb4cd1..4e33762 100644
--- a/src/pages/Tools/User.tsx
+++ b/src/pages/Tools/User.tsx
@@ -30,7 +30,7 @@ const User = () => {
         return username
             ? () => {
                   void navigator.clipboard
-                      .writeText(new URL(`/store/${username}`, location.href).href)
+                      .writeText(new URL(`/store/${username}`, import.meta.env.VITE_UI_URL).href)
                       .then(() => {
                           void message.success('已复制到剪切板')
                       })
@@ -153,8 +153,10 @@ const User = () => {
                                     onClick={handleOnCopyToClipboard(userWithInfoVo?.username)}
                                 >
                                     {userWithInfoVo?.username &&
-                                        new URL(`/store/${userWithInfoVo.username}`, location.href)
-                                            .href}
+                                        new URL(
+                                            `/store/${userWithInfoVo.username}`,
+                                            import.meta.env.VITE_UI_URL
+                                        ).href}
                                     <Icon component={IconOxygenCopy} />
                                 </a>
                             </FlexBox>
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index b4415be..f470ff4 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -39,6 +39,18 @@ const User = () => {
     const [userWithPowerInfoVo, setUserWithPowerInfoVo] = useState<UserWithPowerInfoVo>()
     const [changePasswordForm] = AntdForm.useForm<ChangePasswordFields>()
 
+    const handleOnCopyToClipboard = (username?: string) => {
+        return username
+            ? () => {
+                  void navigator.clipboard
+                      .writeText(new URL(`/store/${username}`, import.meta.env.VITE_UI_URL).href)
+                      .then(() => {
+                          void message.success('已复制到剪切板')
+                      })
+              }
+            : undefined
+    }
+
     const handleOnReset = () => {
         getProfile()
     }
@@ -474,20 +486,14 @@ const User = () => {
                                 </div>
                                 <a
                                     className={'url'}
-                                    href={
-                                        userWithPowerInfoVo?.username &&
-                                        new URL(
-                                            `/store/${userWithPowerInfoVo.username}`,
-                                            location.href
-                                        ).href
-                                    }
+                                    onClick={handleOnCopyToClipboard(userWithPowerInfoVo?.username)}
                                 >
                                     {userWithPowerInfoVo?.username &&
                                         new URL(
                                             `/store/${userWithPowerInfoVo.username}`,
-                                            location.href
+                                            import.meta.env.VITE_UI_URL
                                         ).href}
-                                    <Icon component={IconOxygenShare} />
+                                    <Icon component={IconOxygenCopy} />
                                 </a>
                             </FlexBox>
                         </FlexBox>

From a90e7cfdcaf996dce240f8f6b182f7cb6fc2cd11 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 21 May 2024 16:00:03 +0800
Subject: [PATCH 295/307] Refactor(Playground): Fix the bug that unexpectedly
 remove styles for base

Fix the bug that unexpectedly remove styles for base when editing code
---
 src/components/Playground/Output/Preview/iframe.html |  2 +-
 src/pages/System/Tools/Base.tsx                      | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Playground/Output/Preview/iframe.html b/src/components/Playground/Output/Preview/iframe.html
index db6655a..5aae2e3 100644
--- a/src/components/Playground/Output/Preview/iframe.html
+++ b/src/components/Playground/Output/Preview/iframe.html
@@ -11,7 +11,7 @@
   window.addEventListener("message", ({ data }) => {
     if (data?.type === "UPDATE") {
       // Record old styles that need to be removed
-      const appStyleElement = document.querySelectorAll("style[id^=\"style_\"]") || [];
+      const appStyleElement = document.querySelectorAll("style:not(style[id$=\"_oxygen_base_style.css\"])") || [];
 
       // Remove old app
       const appSrcElement = document.querySelector("#appSrc");
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index 40f44b7..46a313d 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -637,8 +637,10 @@ const Base = () => {
                             rules={[
                                 { required: true },
                                 {
-                                    pattern: /\.(jsx|tsx|js|ts|css|json)$/,
-                                    message: '仅支持 *.jsx, *.tsx, *.js, *.ts, *.css, *.json 文件'
+                                    pattern:
+                                        /(\.jsx|\.tsx|\.js|\.ts|_oxygen_base_style\.css|\.json)$/,
+                                    message:
+                                        '仅支持 *.jsx, *.tsx, *.js, *.ts, *_oxygen_base_style.css, *.json 文件'
                                 },
                                 ({ getFieldValue }) => ({
                                     validator() {
@@ -829,9 +831,10 @@ const Base = () => {
                                 rules={[
                                     { required: true },
                                     {
-                                        pattern: /\.(jsx|tsx|js|ts|css|json)$/,
+                                        pattern:
+                                            /(\.jsx|\.tsx|\.js|\.ts|_oxygen_base_style\.css|\.json)$/,
                                         message:
-                                            '仅支持 *.jsx, *.tsx, *.js, *.ts, *.css, *.json 文件'
+                                            '仅支持 *.jsx, *.tsx, *.js, *.ts, *_oxygen_base_style.css, *.json 文件'
                                     },
                                     ({ getFieldValue }) => ({
                                         validator() {

From 3ba1f3542077b8cbc00c3c6e76d56b242ab5c77d Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Tue, 21 May 2024 17:41:09 +0800
Subject: [PATCH 296/307] Refactor(Protocol): Optimize desktop and app prtocol

---
 .env.development                   | 2 ++
 .env.production                    | 2 ++
 .env.testing                       | 2 ++
 src/components/tools/StoreCard.tsx | 2 +-
 src/global.d.ts                    | 2 ++
 src/util/navigation.ts             | 2 +-
 6 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/.env.development b/.env.development
index 0c1ca3c..8da6dd0 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,6 @@
 VITE_PLATFORM=WEB
+VITE_DESKTOP_PROTOCOL=oxygen-desktop
+VITE_APP_PROTOCOL=oxygen-app
 VITE_UI_URL=${DEV_UI_URL}
 VITE_API_URL=${DEV_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
diff --git a/.env.production b/.env.production
index 528d73a..2153461 100644
--- a/.env.production
+++ b/.env.production
@@ -1,4 +1,6 @@
 VITE_PLATFORM=WEB
+VITE_DESKTOP_PROTOCOL=oxygen-desktop
+VITE_APP_PROTOCOL=oxygen-app
 VITE_UI_URL=${PRODUCT_UI_URL}
 VITE_API_URL=${PRODUCT_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
diff --git a/.env.testing b/.env.testing
index b5fb949..1980edc 100644
--- a/.env.testing
+++ b/.env.testing
@@ -1,5 +1,7 @@
 NODE_ENV=development
 VITE_PLATFORM=WEB
+VITE_DESKTOP_PROTOCOL=oxygen-desktop
+VITE_APP_PROTOCOL=oxygen-app
 VITE_UI_URL=${TEST_UI_URL}
 VITE_API_URL=${TEST_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx
index c16e3d4..3b5e112 100644
--- a/src/components/tools/StoreCard.tsx
+++ b/src/components/tools/StoreCard.tsx
@@ -166,7 +166,7 @@ const StoreCard = ({
         if (!checkDesktop()) {
             void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
             protocolCheck(
-                `oxygen://openurl/view/${author.username}/${toolId}`,
+                `${import.meta.env.VITE_DESKTOP_PROTOCOL}://openurl/view/${author.username}/${toolId}`,
                 () => {
                     void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
                     void message.destroy('LOADING')
diff --git a/src/global.d.ts b/src/global.d.ts
index 5bcfef7..7a2b303 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -5,6 +5,8 @@ type Platform = 'WEB' | 'DESKTOP' | 'ANDROID'
 
 interface ImportMetaEnv {
     readonly VITE_PLATFORM: Platform
+    readonly VITE_DESKTOP_PROTOCOL: string
+    readonly VITE_APP_PROTOCOL: string
     readonly VITE_UI_URL: string
     readonly VITE_API_URL: string
     readonly VITE_API_TOKEN_URL: string
diff --git a/src/util/navigation.ts b/src/util/navigation.ts
index 140215a..06737d0 100644
--- a/src/util/navigation.ts
+++ b/src/util/navigation.ts
@@ -145,4 +145,4 @@ export const getViewPath = (
 }
 
 export const getAndroidUrl = (username: string, toolId: string) =>
-    `oxygen://opentool/${username}/${toolId}`
+    `${import.meta.env.VITE_APP_PROTOCOL}://opentool/${username}/${toolId}`

From 55a65084e2cbc9ce20b9c2662023d1506d948bbb Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 24 May 2024 18:07:27 +0800
Subject: [PATCH 297/307] Build(Package): Update config

---
 package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6e1d189..bd41061 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,11 @@
 {
   "name": "oxygen-ui",
   "private": true,
-  "version": "1.0.0-SNAPSHOT",
   "type": "module",
+  "version": "1.0.0-SNAPSHOT",
+  "description": "Oxygen Toolbox browser version",
+  "author": "FatttSnake",
+  "homepage": "https://tool.fatweb.top",
   "scripts": {
     "dev": "vite",
     "dev-host": "vite --host 0.0.0.0",

From 0a23e0a0fc794585f6a6e98bfde0671a69a3e974 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 13 Jun 2024 15:15:46 +0800
Subject: [PATCH 298/307] Build(.env): Update env

---
 .env.development | 4 ++--
 .env.testing     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.env.development b/.env.development
index 8da6dd0..4f63504 100644
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,6 @@
 VITE_PLATFORM=WEB
-VITE_DESKTOP_PROTOCOL=oxygen-desktop
-VITE_APP_PROTOCOL=oxygen-app
+VITE_DESKTOP_PROTOCOL=dev-oxygen-desktop
+VITE_APP_PROTOCOL=dev-oxygen-app
 VITE_UI_URL=${DEV_UI_URL}
 VITE_API_URL=${DEV_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
diff --git a/.env.testing b/.env.testing
index 1980edc..c16675e 100644
--- a/.env.testing
+++ b/.env.testing
@@ -1,7 +1,7 @@
 NODE_ENV=development
 VITE_PLATFORM=WEB
-VITE_DESKTOP_PROTOCOL=oxygen-desktop
-VITE_APP_PROTOCOL=oxygen-app
+VITE_DESKTOP_PROTOCOL=test-oxygen-desktop
+VITE_APP_PROTOCOL=test-oxygen-app
 VITE_UI_URL=${TEST_UI_URL}
 VITE_API_URL=${TEST_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token

From 637fd236c5d1b521b194802ee2d9589cdad3bf03 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 13 Jun 2024 15:16:25 +0800
Subject: [PATCH 299/307] Build(package.json): Upgrade dependencies

---
 package-lock.json                             | 992 ++++++++----------
 package.json                                  |  46 +-
 .../Playground/CodeEditor/Editor/loader.ts    |   2 +-
 src/components/Playground/compiler.ts         |   2 +-
 4 files changed, 448 insertions(+), 594 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dac5d89..ace8864 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,15 +12,14 @@
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
         "@dnd-kit/utilities": "^3.2.2",
-        "@marsidev/react-turnstile": "^0.6.0",
+        "@marsidev/react-turnstile": "^0.7.1",
         "@monaco-editor/react": "^4.6.0",
-        "@typescript/ata": "^0.9.4",
-        "antd": "^5.17.0",
-        "axios": "^1.6.8",
+        "antd": "^5.18.1",
+        "axios": "^1.7.2",
         "custom-protocol-check": "^1.4.0",
         "dayjs": "^1.11.11",
         "echarts": "^5.5.0",
-        "esbuild-wasm": "^0.20.2",
+        "esbuild-wasm": "^0.21.5",
         "fast-deep-equal": "^3.1.3",
         "fflate": "^0.8.2",
         "jwt-decode": "^4.0.0",
@@ -28,43 +27,44 @@
         "lodash": "^4.17.21",
         "match-sorter": "^6.3.4",
         "moment": "^2.30.1",
-        "monaco-editor": "^0.48.0",
+        "monaco-editor": "^0.49.0",
         "monaco-jsx-syntax-highlight": "^1.2.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-draggable": "^4.4.6",
-        "react-router": "^6.23.0",
-        "react-router-dom": "^6.23.0",
+        "react-router": "^6.23.1",
+        "react-router-dom": "^6.23.1",
         "size-sensor": "^1.0.2",
         "vanilla-tilt": "^1.8.1"
       },
       "devDependencies": {
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
-        "@types/jsdom": "^21.1.6",
-        "@types/lodash": "^4.17.1",
-        "@types/node": "^20.12.8",
-        "@types/react": "^18.3.1",
+        "@types/jsdom": "^21.1.7",
+        "@types/lodash": "^4.17.5",
+        "@types/node": "^20.14.2",
+        "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
-        "@typescript-eslint/eslint-plugin": "^7.8.0",
-        "@typescript-eslint/parser": "^7.8.0",
-        "@vitejs/plugin-react": "^4.2.1",
+        "@typescript-eslint/eslint-plugin": "^7.13.0",
+        "@typescript-eslint/parser": "^7.13.0",
+        "@typescript/ata": "^0.9.6",
+        "@vitejs/plugin-react": "^4.3.1",
         "eslint": "^8.57.0",
-        "eslint-config-love": "^47.0.0",
+        "eslint-config-love": "^52.0.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-prettier": "^5.1.3",
-        "eslint-plugin-promise": "^6.1.1",
+        "eslint-plugin-promise": "^6.2.0",
         "eslint-plugin-react-hooks": "^4.6.2",
-        "eslint-plugin-react-refresh": "^0.4.6",
-        "jsdom": "^24.0.0",
-        "prettier": "^3.2.5",
-        "sass": "^1.76.0",
+        "eslint-plugin-react-refresh": "^0.4.7",
+        "jsdom": "^24.1.0",
+        "prettier": "^3.3.2",
+        "sass": "^1.77.5",
         "stylelint-config-prettier": "^9.0.5",
         "typescript": "^5.4.5",
-        "unplugin-auto-import": "^0.17.5",
+        "unplugin-auto-import": "^0.17.6",
         "unplugin-icons": "^0.19.0",
-        "vite": "^5.2.11"
+        "vite": "^5.2.13"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -155,10 +155,13 @@
       }
     },
     "node_modules/@antfu/utils": {
-      "version": "0.7.7",
-      "resolved": "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.7.tgz",
-      "integrity": "sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==",
-      "dev": true
+      "version": "0.7.8",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.8.tgz",
+      "integrity": "sha512-rWQkqXRESdjXtc+7NRfK9lASQjpXJu1ayp7qi1d23zZorY+wBHVLHHoVcMsEnkqEBWTFqbztO7/QdJFzyEcLTg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
     },
     "node_modules/@babel/code-frame": {
       "version": "7.24.2",
@@ -1185,9 +1188,9 @@
       }
     },
     "node_modules/@marsidev/react-turnstile": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmmirror.com/@marsidev/react-turnstile/-/react-turnstile-0.6.0.tgz",
-      "integrity": "sha512-CXv2xy27f3a7Rn1PqFeTKGxkdv4uiD7Zpbazeb+1AbC3VEfTk0OFNiyQvIIFn+kCYWkeTLdY7pXRzsfebHH97w==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.7.1.tgz",
+      "integrity": "sha512-SGa0cweJ2mP1RRi9oJJrlPpZHvlklLqu8tlXDLEbsQ/WExM8Ng9cr9439lZcnu8+tfeVpQIe8qFB1UU5uE+KlQ==",
       "peerDependencies": {
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
@@ -1262,9 +1265,9 @@
       }
     },
     "node_modules/@rc-component/async-validator": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.1.tgz",
-      "integrity": "sha512-QEoRKwsdwgCC+k5prXyDOqsZOR2WD+lWnM4mbMR97afDKVFwrBkdrzw67wHIvrmXjtsd8uTbE7rnX1wWAhkc9w==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.4.tgz",
+      "integrity": "sha512-qgGdcVIF604M9EqjNF0hbUTz42bz/RDtxWdWuU5EQe3hi7M8ob54B6B35rOsvX5eSvIHIzT9iH1R3n+hk3CGfg==",
       "dependencies": {
         "@babel/runtime": "^7.24.4"
       },
@@ -1289,7 +1292,7 @@
     },
     "node_modules/@rc-component/context": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/@rc-component/context/-/context-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz",
       "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
@@ -1302,7 +1305,7 @@
     },
     "node_modules/@rc-component/mini-decimal": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
       "integrity": "sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==",
       "dependencies": {
         "@babel/runtime": "^7.18.0"
@@ -1346,9 +1349,9 @@
       }
     },
     "node_modules/@rc-component/tour": {
-      "version": "1.14.2",
-      "resolved": "https://registry.npmmirror.com/@rc-component/tour/-/tour-1.14.2.tgz",
-      "integrity": "sha512-A75DZ8LVvahBIvxooj3Gvf2sxe+CGOkmzPNX7ek0i0AJHyKZ1HXe5ieIGo3m0FMdZfVOlbCJ952Duq8VKAHk6g==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.15.0.tgz",
+      "integrity": "sha512-h6hyILDwL+In9GAgRobwRWihLqqsD7Uft3fZGrJ7L4EiyCoxbnNYwzPXDfz7vNDhWeVyvAWQJj9fJCzpI4+b4g==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "@rc-component/portal": "^1.0.0-9",
@@ -1365,9 +1368,9 @@
       }
     },
     "node_modules/@rc-component/trigger": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmmirror.com/@rc-component/trigger/-/trigger-2.1.1.tgz",
-      "integrity": "sha512-UjHkedkgtEcgQu87w1VuWug1idoDJV7VUt0swxHXRcmei2uu1AuUzGBPEUlmOmXGJ+YtTgZfVLi7kuAUKoZTMA==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-2.2.0.tgz",
+      "integrity": "sha512-QarBCji02YE9aRFhZgRZmOpXBj0IZutRippsVBv85sxvG4FGk/vRxwAlkn3MS9zK5mwbETd86mAVg2tKqTkdJA==",
       "dependencies": {
         "@babel/runtime": "^7.23.2",
         "@rc-component/portal": "^1.1.0",
@@ -1385,9 +1388,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmmirror.com/@remix-run/router/-/router-1.16.0.tgz",
-      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -1835,9 +1838,9 @@
       "dev": true
     },
     "node_modules/@types/jsdom": {
-      "version": "21.1.6",
-      "resolved": "https://registry.npmmirror.com/@types/jsdom/-/jsdom-21.1.6.tgz",
-      "integrity": "sha512-/7kkMsC+/kMs7gAYmmBR9P0vGTnOoLhQhyhQJSlXGI5bzTHp6xdo0TtKWQAsz6pmSAeVqKSbqeyP6hytqr9FDw==",
+      "version": "21.1.7",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz",
+      "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -1845,12 +1848,6 @@
         "parse5": "^7.0.0"
       }
     },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.15",
-      "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz",
-      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
-    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmmirror.com/@types/json5/-/json5-0.0.29.tgz",
@@ -1858,9 +1855,9 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.1.tgz",
-      "integrity": "sha512-X+2qazGS3jxLAIz5JDXDzglAF3KpijdhFxlf/V1+hEsOUc+HnWi81L/uv/EvGuV90WY+7mPGFCUDGfQC3Gj95Q==",
+      "version": "4.17.5",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.5.tgz",
+      "integrity": "sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw==",
       "dev": true
     },
     "node_modules/@types/minimist": {
@@ -1871,9 +1868,9 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "20.12.8",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.8.tgz",
-      "integrity": "sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==",
+      "version": "20.14.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.2.tgz",
+      "integrity": "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -1900,9 +1897,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
+      "version": "18.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1918,12 +1915,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/semver": {
-      "version": "7.5.8",
-      "resolved": "https://registry.npmmirror.com/@types/semver/-/semver-7.5.8.tgz",
-      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
-      "dev": true
-    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
       "resolved": "https://registry.npmmirror.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -1931,26 +1922,28 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.8.0.tgz",
-      "integrity": "sha512-gFTT+ezJmkwutUPmB0skOj3GZJtlEGnlssems4AjkVweUPGj7jRwwqg0Hhg7++kPGJqKtTYx+R05Ftww372aIg==",
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.13.0.tgz",
+      "integrity": "sha512-FX1X6AF0w8MdVFLSdqwqN/me2hyhuQg4ykN6ZpVhh1ij/80pTvDKclX1sZB9iqex8SjQfVhwMKs3JtnnMLzG9w==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.8.0",
-        "@typescript-eslint/type-utils": "7.8.0",
-        "@typescript-eslint/utils": "7.8.0",
-        "@typescript-eslint/visitor-keys": "7.8.0",
-        "debug": "^4.3.4",
+        "@typescript-eslint/scope-manager": "7.13.0",
+        "@typescript-eslint/type-utils": "7.13.0",
+        "@typescript-eslint/utils": "7.13.0",
+        "@typescript-eslint/visitor-keys": "7.13.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
-        "semver": "^7.6.0",
         "ts-api-utils": "^1.3.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
       "peerDependencies": {
         "@typescript-eslint/parser": "^7.0.0",
         "eslint": "^8.56.0"
@@ -1961,54 +1954,25 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/@typescript-eslint/parser": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-7.8.0.tgz",
-      "integrity": "sha512-KgKQly1pv0l4ltcftP59uQZCi4HUYswCLbTqVZEJu7uLX8CTLyswqMLqLN+2QFz4jCptqWVV4SB7vdxcH2+0kQ==",
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.13.0.tgz",
+      "integrity": "sha512-EjMfl69KOS9awXXe83iRN7oIEXy9yYdqWfqdrFAYAAr6syP8eLEFI7ZE4939antx2mNgPRW/o1ybm2SFYkbTVA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "7.8.0",
-        "@typescript-eslint/types": "7.8.0",
-        "@typescript-eslint/typescript-estree": "7.8.0",
-        "@typescript-eslint/visitor-keys": "7.8.0",
+        "@typescript-eslint/scope-manager": "7.13.0",
+        "@typescript-eslint/types": "7.13.0",
+        "@typescript-eslint/typescript-estree": "7.13.0",
+        "@typescript-eslint/visitor-keys": "7.13.0",
         "debug": "^4.3.4"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
       "peerDependencies": {
         "eslint": "^8.56.0"
       },
@@ -2019,32 +1983,40 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-7.8.0.tgz",
-      "integrity": "sha512-viEmZ1LmwsGcnr85gIq+FCYI7nO90DVbE37/ll51hjv9aG+YZMb4WDE2fyWpUR4O/UrhGRpYXK/XajcGTk2B8g==",
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.13.0.tgz",
+      "integrity": "sha512-ZrMCe1R6a01T94ilV13egvcnvVJ1pxShkE0+NDjDzH4nvG1wXpwsVI5bZCvE7AEDH1mXEx5tJSVR68bLgG7Dng==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.8.0",
-        "@typescript-eslint/visitor-keys": "7.8.0"
+        "@typescript-eslint/types": "7.13.0",
+        "@typescript-eslint/visitor-keys": "7.13.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-7.8.0.tgz",
-      "integrity": "sha512-H70R3AefQDQpz9mGv13Uhi121FNMh+WEaRqcXTX09YEDky21km4dV1ZXJIp8QjXc4ZaVkXVdohvWDzbnbHDS+A==",
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.13.0.tgz",
+      "integrity": "sha512-xMEtMzxq9eRkZy48XuxlBFzpVMDurUAfDu5Rz16GouAtXm0TaAoTFzqWUFPPuQYXI/CDaH/Bgx/fk/84t/Bc9A==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.8.0",
-        "@typescript-eslint/utils": "7.8.0",
+        "@typescript-eslint/typescript-estree": "7.13.0",
+        "@typescript-eslint/utils": "7.13.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
       "peerDependencies": {
         "eslint": "^8.56.0"
       },
@@ -2055,22 +2027,26 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/types/-/types-7.8.0.tgz",
-      "integrity": "sha512-wf0peJ+ZGlcH+2ZS23aJbOv+ztjeeP8uQ9GgwMJGVLx/Nj9CJt17GWgWWoSmoRVKAX2X+7fzEnAjxdvK2gqCLw==",
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.13.0.tgz",
+      "integrity": "sha512-QWuwm9wcGMAuTsxP+qz6LBBd3Uq8I5Nv8xb0mk54jmNoCyDspnMvVsOxI6IsMmway5d1S9Su2+sCKv1st2l6eA==",
       "dev": true,
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.8.0.tgz",
-      "integrity": "sha512-5pfUCOwK5yjPaJQNy44prjCwtr981dO8Qo9J9PwYXZ0MosgAbfEMB008dJ5sNo3+/BN6ytBPuSvXUg9SAqB0dg==",
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.13.0.tgz",
+      "integrity": "sha512-cAvBvUoobaoIcoqox1YatXOnSl3gx92rCZoMRPzMNisDiM12siGilSM4+dJAekuuHTibI2hVC2fYK79iSFvWjw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.8.0",
-        "@typescript-eslint/visitor-keys": "7.8.0",
+        "@typescript-eslint/types": "7.13.0",
+        "@typescript-eslint/visitor-keys": "7.13.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -2081,32 +2057,21 @@
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
       "peerDependenciesMeta": {
         "typescript": {
           "optional": true
         }
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
+      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
       "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -2114,83 +2079,50 @@
         "node": ">=10"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/@typescript-eslint/utils": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-7.8.0.tgz",
-      "integrity": "sha512-L0yFqOCflVqXxiZyXrDr80lnahQfSOfc9ELAAZ75sqicqp2i36kEZZGuUymHNFoYOqxRT05up760b4iGsl02nQ==",
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.13.0.tgz",
+      "integrity": "sha512-jceD8RgdKORVnB4Y6BqasfIkFhl4pajB1wVxrF4akxD2QPM8GNYjgGwEzYS+437ewlqqrg7Dw+6dhdpjMpeBFQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@types/json-schema": "^7.0.15",
-        "@types/semver": "^7.5.8",
-        "@typescript-eslint/scope-manager": "7.8.0",
-        "@typescript-eslint/types": "7.8.0",
-        "@typescript-eslint/typescript-estree": "7.8.0",
-        "semver": "^7.6.0"
+        "@typescript-eslint/scope-manager": "7.13.0",
+        "@typescript-eslint/types": "7.13.0",
+        "@typescript-eslint/typescript-estree": "7.13.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
       },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
       "peerDependencies": {
         "eslint": "^8.56.0"
       }
     },
-    "node_modules/@typescript-eslint/utils/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.8.0.tgz",
-      "integrity": "sha512-q4/gibTNBQNA0lGyYQCmWRS5D15n8rXh4QjK3KV+MBPlTYHpfBUT3D3PaPR/HeNiI9W6R7FvlkcGhNyAoP+caA==",
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.13.0.tgz",
+      "integrity": "sha512-nxn+dozQx+MK61nn/JP+M4eCkHDSxSLDpgE3WcQo0+fkjEolnaB5jswvIKC4K56By8MMgIho7f1PVxERHEo8rw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.8.0",
+        "@typescript-eslint/types": "7.13.0",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
     "node_modules/@typescript/ata": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmmirror.com/@typescript/ata/-/ata-0.9.4.tgz",
-      "integrity": "sha512-PaJ16WouPV/SaA+c0tnOKIqYq24+m93ipl/e0Dkxuianer+ibc5b0/6ZgfCFF8J7QEp57dySMSP9nWOFaCfJnw==",
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/@typescript/ata/-/ata-0.9.6.tgz",
+      "integrity": "sha512-Kj3dmkIRAZ4YRp4hMgEYQ3PghSRO13oUtmhesun5AC9YT/EzZtLbvXBPiqu5clHEHE/chJ2lc3KUsZY1zwMqPg==",
+      "dev": true,
       "peerDependencies": {
         "typescript": ">=4.4.4"
       }
@@ -2202,16 +2134,16 @@
       "dev": true
     },
     "node_modules/@vitejs/plugin-react": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
-      "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz",
+      "integrity": "sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==",
       "dev": true,
       "dependencies": {
-        "@babel/core": "^7.23.5",
-        "@babel/plugin-transform-react-jsx-self": "^7.23.3",
-        "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+        "@babel/core": "^7.24.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.24.5",
+        "@babel/plugin-transform-react-jsx-source": "^7.24.1",
         "@types/babel__core": "^7.20.5",
-        "react-refresh": "^0.14.0"
+        "react-refresh": "^0.14.2"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -2287,56 +2219,56 @@
       }
     },
     "node_modules/antd": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-5.17.0.tgz",
-      "integrity": "sha512-jrzMIcaTJIy12/GJ2PfgchgZGuAlDodlaOKd05/TxEtFilRHnv8oaf0qfqNGG3slvvuy4J/57xn21jM4cLl7Hw==",
+      "version": "5.18.1",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.18.1.tgz",
+      "integrity": "sha512-l762vsoIpA3xsVsbIExlce3hgFgiLdflGEgdo8NFnq17Qq3fHIMJklGzM8WNpdJJ4iUk4FzritmSSnHk0Y5kZA==",
       "dependencies": {
         "@ant-design/colors": "^7.0.2",
         "@ant-design/cssinjs": "^1.19.1",
-        "@ant-design/icons": "^5.3.6",
+        "@ant-design/icons": "^5.3.7",
         "@ant-design/react-slick": "~1.1.2",
         "@babel/runtime": "^7.24.5",
         "@ctrl/tinycolor": "^3.6.1",
         "@rc-component/color-picker": "~1.5.3",
         "@rc-component/mutate-observer": "^1.1.0",
-        "@rc-component/tour": "~1.14.2",
-        "@rc-component/trigger": "^2.1.1",
+        "@rc-component/tour": "~1.15.0",
+        "@rc-component/trigger": "^2.2.0",
         "classnames": "^2.5.1",
         "copy-to-clipboard": "^3.3.3",
         "dayjs": "^1.11.10",
         "qrcode.react": "^3.1.0",
-        "rc-cascader": "~3.25.0",
-        "rc-checkbox": "~3.2.0",
+        "rc-cascader": "~3.26.0",
+        "rc-checkbox": "~3.3.0",
         "rc-collapse": "~3.7.3",
-        "rc-dialog": "~9.4.0",
-        "rc-drawer": "~7.1.0",
+        "rc-dialog": "~9.5.2",
+        "rc-drawer": "~7.2.0",
         "rc-dropdown": "~4.2.0",
-        "rc-field-form": "~2.0.0",
-        "rc-image": "~7.6.0",
-        "rc-input": "~1.4.5",
-        "rc-input-number": "~9.0.0",
-        "rc-mentions": "~2.11.1",
-        "rc-menu": "~9.13.0",
-        "rc-motion": "^2.9.0",
-        "rc-notification": "~5.4.0",
+        "rc-field-form": "~2.2.1",
+        "rc-image": "~7.9.0",
+        "rc-input": "~1.5.1",
+        "rc-input-number": "~9.1.0",
+        "rc-mentions": "~2.14.0",
+        "rc-menu": "~9.14.0",
+        "rc-motion": "^2.9.1",
+        "rc-notification": "~5.6.0",
         "rc-pagination": "~4.0.4",
         "rc-picker": "~4.5.0",
         "rc-progress": "~4.0.0",
-        "rc-rate": "~2.12.0",
+        "rc-rate": "~2.13.0",
         "rc-resize-observer": "^1.4.0",
         "rc-segmented": "~2.3.0",
-        "rc-select": "~14.13.1",
+        "rc-select": "~14.14.0",
         "rc-slider": "~10.6.2",
         "rc-steps": "~6.0.1",
         "rc-switch": "~4.1.0",
-        "rc-table": "~7.45.5",
-        "rc-tabs": "~15.0.0 ",
-        "rc-textarea": "~1.6.3",
+        "rc-table": "~7.45.7",
+        "rc-tabs": "~15.1.0",
+        "rc-textarea": "~1.7.0",
         "rc-tooltip": "~6.2.0",
-        "rc-tree": "~5.8.5",
-        "rc-tree-select": "~5.20.0",
+        "rc-tree": "~5.8.7",
+        "rc-tree-select": "~5.21.0",
         "rc-upload": "~4.5.2",
-        "rc-util": "^5.39.1",
+        "rc-util": "^5.41.0",
         "scroll-into-view-if-needed": "^3.1.0",
         "throttle-debounce": "^5.0.0"
       },
@@ -2516,9 +2448,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.8.tgz",
-      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -2579,62 +2511,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/builtin-modules": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmmirror.com/builtin-modules/-/builtin-modules-3.3.0.tgz",
-      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/builtins": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmmirror.com/builtins/-/builtins-5.1.0.tgz",
-      "integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "semver": "^7.0.0"
-      }
-    },
-    "node_modules/builtins/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/builtins/node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/builtins/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.7.tgz",
@@ -3132,6 +3008,19 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.17.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz",
+      "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -3316,9 +3205,9 @@
       }
     },
     "node_modules/esbuild-wasm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmmirror.com/esbuild-wasm/-/esbuild-wasm-0.20.2.tgz",
-      "integrity": "sha512-7o6nmsEqlcXJXMNqnx5K+M4w4OPx7yTFXQHcJyeP3SkXb8p2T8N9E1ayK4vd/qDBepH6fuPoZwiFvZm8x5qv+w==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.21.5.tgz",
+      "integrity": "sha512-L/FlOPMMFtw+6qPAbuPvJXdrOYOp9yx/PEwSrIZW0qghY4vgV003evdYDwqQ/9ENMQI0B6RMod9xT4FHtto6OQ==",
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -3397,11 +3286,10 @@
       }
     },
     "node_modules/eslint-compat-utils": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmmirror.com/eslint-compat-utils/-/eslint-compat-utils-0.5.0.tgz",
-      "integrity": "sha512-dc6Y8tzEcSYZMHa+CMPLi/hyo1FzNeonbhJL7Ol0ccuKQkwopJcJBA9YL/xmMTLU1eKigXo9vj9nALElWYSowg==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
+      "integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "semver": "^7.5.4"
       },
@@ -3412,28 +3300,11 @@
         "eslint": ">=6.0.0"
       }
     },
-    "node_modules/eslint-compat-utils/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/eslint-compat-utils/node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
+      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
       "dev": true,
-      "peer": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -3441,27 +3312,19 @@
         "node": ">=10"
       }
     },
-    "node_modules/eslint-compat-utils/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/eslint-config-love": {
-      "version": "47.0.0",
-      "resolved": "https://registry.npmmirror.com/eslint-config-love/-/eslint-config-love-47.0.0.tgz",
-      "integrity": "sha512-wIeJhb4/NF7nE5Ltppg1e9dp1Auxx0+ZPRysrXQ3uBKlW4Nj/UiTZu4r3sKWCxo6HGcRcI4MC1Q5421y3fny2w==",
+      "version": "52.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-love/-/eslint-config-love-52.0.0.tgz",
+      "integrity": "sha512-4H2+FtgWOKZkvGUKoPz7x7hHxgHr1+P2N2D96JzQ6wrePQsoMEvkTB9fHmItpmq2aIawufkfQczKmQTIZUq69w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/parser": "^7.0.1"
+        "eslint-plugin-import": "^2.25.2",
+        "eslint-plugin-n": "^17.0.0",
+        "eslint-plugin-promise": "^6.0.0",
+        "typescript-eslint": "^7.11.0"
       },
       "peerDependencies": {
-        "@typescript-eslint/eslint-plugin": "^7.0.1",
         "eslint": "^8.0.1",
-        "eslint-plugin-import": "^2.25.2",
-        "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
-        "eslint-plugin-promise": "^6.0.0",
         "typescript": "*"
       }
     },
@@ -3524,15 +3387,18 @@
       }
     },
     "node_modules/eslint-plugin-es-x": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-es-x/-/eslint-plugin-es-x-7.6.0.tgz",
-      "integrity": "sha512-I0AmeNgevgaTR7y2lrVCJmGYF0rjoznpDvqV/kIkZSZbZ8Rw3eu4cGlvBBULScfkSOCzqKbff5LR4CNrV7mZHA==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-es-x/-/eslint-plugin-es-x-7.7.0.tgz",
+      "integrity": "sha512-aP3qj8BwiEDPttxQkZdI221DLKq9sI/qHolE2YSQL1/9+xk7dTV+tB1Fz8/IaCA+lnLA1bDEnvaS2LKs0k2Uig==",
       "dev": true,
-      "peer": true,
+      "funding": [
+        "https://github.com/sponsors/ota-meshi",
+        "https://opencollective.com/eslint"
+      ],
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.1.2",
         "@eslint-community/regexpp": "^4.6.0",
-        "eslint-compat-utils": "^0.5.0"
+        "eslint-compat-utils": "^0.5.1"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -3616,90 +3482,47 @@
       }
     },
     "node_modules/eslint-plugin-n": {
-      "version": "16.6.2",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-n/-/eslint-plugin-n-16.6.2.tgz",
-      "integrity": "sha512-6TyDmZ1HXoFQXnhCTUjVFULReoBPOAjpuiKELMkeP40yffI/1ZRO+d9ug/VC6fqISo2WkuIBk3cvuRPALaWlOQ==",
+      "version": "17.8.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-17.8.1.tgz",
+      "integrity": "sha512-KdG0h0voZms8UhndNu8DeWx1eM4sY+A4iXtsNo6kOfJLYHNeTGPacGalJ9GcvrbmOL3r/7QOMwVZDSw+1SqsrA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "builtins": "^5.0.1",
+        "enhanced-resolve": "^5.17.0",
         "eslint-plugin-es-x": "^7.5.0",
         "get-tsconfig": "^4.7.0",
-        "globals": "^13.24.0",
+        "globals": "^15.0.0",
         "ignore": "^5.2.4",
-        "is-builtin-module": "^3.2.1",
-        "is-core-module": "^2.12.1",
-        "minimatch": "^3.1.2",
-        "resolve": "^1.22.2",
+        "minimatch": "^9.0.0",
         "semver": "^7.5.3"
       },
       "engines": {
-        "node": ">=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       },
       "peerDependencies": {
-        "eslint": ">=7.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-n/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "eslint": ">=8.23.0"
       }
     },
     "node_modules/eslint-plugin-n/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmmirror.com/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "version": "15.4.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.4.0.tgz",
+      "integrity": "sha512-unnwvMZpv0eDUyjNyh9DH/yxUaRYrEjW/qK4QcdrHg3oO11igUQrCSgODHEqxlKg8v2CD2Sd7UkqqEBoz5U7TQ==",
       "dev": true,
-      "peer": true,
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint-plugin-n/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
+        "node": ">=18"
       },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/eslint-plugin-n/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/eslint-plugin-n/node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
+      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
       "dev": true,
-      "peer": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -3707,23 +3530,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/eslint-plugin-n/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/eslint-plugin-n/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/eslint-plugin-prettier": {
       "version": "5.1.3",
       "resolved": "https://registry.npmmirror.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
@@ -3752,15 +3558,18 @@
       }
     },
     "node_modules/eslint-plugin-promise": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz",
-      "integrity": "sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.2.0.tgz",
+      "integrity": "sha512-QmAqwizauvnKOlifxyDj2ObfULpHQawlg/zQdgEixur9vl0CvZGv/LCJV2rtj3210QCoeGBzVMfMXqGAOr/4fA==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0"
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
@@ -3776,9 +3585,9 @@
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmmirror.com/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.6.tgz",
-      "integrity": "sha512-NjGXdm7zgcKRkKMua34qVO9doI7VOxZ6ancSvBELJSSoX97jyndXcSoa8XBh69JoB31dNz3EEzlMcizZl7LaMA==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.7.tgz",
+      "integrity": "sha512-yrj+KInFmwuQS2UQcg1SF83ha1tuHC1jMQbRNyuWtlEzzKRDgAl7L4Yp4NlDUZTZNlWvHEzOtJhMi40R7JxcSw==",
       "dev": true,
       "peerDependencies": {
         "eslint": ">=7"
@@ -4267,13 +4076,15 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.7.3",
-      "resolved": "https://registry.npmmirror.com/get-tsconfig/-/get-tsconfig-4.7.3.tgz",
-      "integrity": "sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==",
+      "version": "4.7.5",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.5.tgz",
+      "integrity": "sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
     "node_modules/glob": {
@@ -4423,6 +4234,12 @@
         "get-intrinsic": "^1.1.3"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/graphemer/-/graphemer-1.4.0.tgz",
@@ -4759,19 +4576,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/is-builtin-module": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmmirror.com/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
-      "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "builtin-modules": "^3.3.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.7.tgz",
@@ -5019,9 +4823,9 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "24.0.0",
-      "resolved": "https://registry.npmmirror.com/jsdom/-/jsdom-24.0.0.tgz",
-      "integrity": "sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==",
+      "version": "24.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.0.tgz",
+      "integrity": "sha512-6gpM7pRXCwIOKxX47cgOyvyQDN/Eh0f1MeKySBV2xGdKtqJBLj8P25eY3EVCWo2mglDDzozR2r2MW4T+JiNUZA==",
       "dev": true,
       "dependencies": {
         "cssstyle": "^4.0.1",
@@ -5029,21 +4833,21 @@
         "decimal.js": "^10.4.3",
         "form-data": "^4.0.0",
         "html-encoding-sniffer": "^4.0.0",
-        "http-proxy-agent": "^7.0.0",
-        "https-proxy-agent": "^7.0.2",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.4",
         "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.7",
+        "nwsapi": "^2.2.10",
         "parse5": "^7.1.2",
-        "rrweb-cssom": "^0.6.0",
+        "rrweb-cssom": "^0.7.0",
         "saxes": "^6.0.0",
         "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.1.3",
+        "tough-cookie": "^4.1.4",
         "w3c-xmlserializer": "^5.0.0",
         "webidl-conversions": "^7.0.0",
         "whatwg-encoding": "^3.1.1",
         "whatwg-mimetype": "^4.0.0",
         "whatwg-url": "^14.0.0",
-        "ws": "^8.16.0",
+        "ws": "^8.17.0",
         "xml-name-validator": "^5.0.0"
       },
       "engines": {
@@ -5058,6 +4862,12 @@
         }
       }
     },
+    "node_modules/jsdom/node_modules/rrweb-cssom": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+      "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
+      "dev": true
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
@@ -5440,9 +5250,9 @@
       }
     },
     "node_modules/monaco-editor": {
-      "version": "0.48.0",
-      "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.48.0.tgz",
-      "integrity": "sha512-goSDElNqFfw7iDHMg8WDATkfcyeLTNpBHQpO8incK6p5qZt5G/1j41X0xdGzpIkGojGXM+QiRQyLjnfDVvrpwA=="
+      "version": "0.49.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.49.0.tgz",
+      "integrity": "sha512-2I8/T3X/hLxB2oPHgqcNYUVdA/ZEFShT7IAujifIPMfKkNbLOqY8XCoyHCXrsdjb36dW9MwoTwBCFpXKMwNwaQ=="
     },
     "node_modules/monaco-jsx-syntax-highlight": {
       "version": "1.2.0",
@@ -5563,9 +5373,9 @@
       }
     },
     "node_modules/nwsapi": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmmirror.com/nwsapi/-/nwsapi-2.2.9.tgz",
-      "integrity": "sha512-2f3F0SEEer8bBu0dsNCFF50N0cTThV1nWFYcEYFZttdW0lDAoybv9cQoK7X7/68Z89S7FoRrVjP1LPX4XRf9vg==",
+      "version": "2.2.10",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.10.tgz",
+      "integrity": "sha512-QK0sRs7MKv0tKe1+5uZIQk/C8XGza4DAnztJG8iD+TpJIORARrCxczA738awHrZoHeTjSSoHqao2teO0dC/gFQ==",
       "dev": true
     },
     "node_modules/object-assign": {
@@ -5912,15 +5722,18 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
+      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
       "engines": {
         "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/prettier-linter-helpers": {
@@ -6001,14 +5814,14 @@
       }
     },
     "node_modules/rc-cascader": {
-      "version": "3.25.0",
-      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.25.0.tgz",
-      "integrity": "sha512-mBY6/CykOvzAYnIye0rpt5JkMAXJaX8zZawOwSndbKuFakYE+leqBQWIZoN9HIgAptPpTi2Aty3RvbaBmk8SKQ==",
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.26.0.tgz",
+      "integrity": "sha512-L1dml383TPSJD1I11YwxuVbmqaJY64psZqFp1ETlgl3LEOwDu76Cyl11fw5dmjJhMlUWwM5dECQfqJgfebhUjg==",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "array-tree-filter": "^2.1.0",
         "classnames": "^2.3.1",
-        "rc-select": "~14.13.0",
+        "rc-select": "~14.14.0",
         "rc-tree": "~5.8.1",
         "rc-util": "^5.37.0"
       },
@@ -6018,9 +5831,9 @@
       }
     },
     "node_modules/rc-checkbox": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmmirror.com/rc-checkbox/-/rc-checkbox-3.2.0.tgz",
-      "integrity": "sha512-8inzw4y9dAhZmv/Ydl59Qdy5tdp9CKg4oPVcRigi+ga/yKPZS5m5SyyQPtYSgbcqHRYOdUhiPSeKfktc76du1A==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-3.3.0.tgz",
+      "integrity": "sha512-Ih3ZaAcoAiFKJjifzwsGiT/f/quIkxJoklW4yKGho14Olulwn8gN7hOBve0/WGDg5o/l/5mL0w7ff7/YGvefVw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.3.2",
@@ -6047,9 +5860,9 @@
       }
     },
     "node_modules/rc-dialog": {
-      "version": "9.4.0",
-      "resolved": "https://registry.npmmirror.com/rc-dialog/-/rc-dialog-9.4.0.tgz",
-      "integrity": "sha512-AScCexaLACvf8KZRqCPz12BJ8olszXOS4lKlkMyzDQHS1m0zj1KZMYgmMCh39ee0Dcv8kyrj8mTqxuLyhH+QuQ==",
+      "version": "9.5.2",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.5.2.tgz",
+      "integrity": "sha512-qVUjc8JukG+j/pNaHVSRa2GO2/KbV2thm7yO4hepQ902eGdYK913sGkwg/fh9yhKYV1ql3BKIN2xnud3rEXAPw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/portal": "^1.0.0-8",
@@ -6063,9 +5876,9 @@
       }
     },
     "node_modules/rc-drawer": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmmirror.com/rc-drawer/-/rc-drawer-7.1.0.tgz",
-      "integrity": "sha512-nBE1rF5iZvpavoyqhSSz2mk/yANltA7g3aF0U45xkx381n3we/RKs9cJfNKp9mSWCedOKWt9FLEwZDaAaOGn2w==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-7.2.0.tgz",
+      "integrity": "sha512-9lOQ7kBekEJRdEpScHvtmEtXnAsy+NGDXiRWc2ZVC7QXAazNVbeT4EraQKYwCME8BJLa8Bxqxvs5swwyOepRwg==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@rc-component/portal": "^1.1.1",
@@ -6094,12 +5907,12 @@
       }
     },
     "node_modules/rc-field-form": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-2.0.0.tgz",
-      "integrity": "sha512-Xwp8SoSbWQOsz3s7IwEkDj/fF73Wa+vVPtP+gnaq6wVvPX8aPhx1vrHpFcgmiIOKdKIdezGLFsTyU3kNXn+IEA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-2.2.1.tgz",
+      "integrity": "sha512-uoNqDoR7A4tn4QTSqoWPAzrR7ZwOK5I+vuZ/qdcHtbKx+ZjEsTg7QXm2wk/jalDiSksAQmATxL0T5LJkRREdIA==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
-        "@rc-component/async-validator": "^5.0.1",
+        "@rc-component/async-validator": "^5.0.3",
         "rc-util": "^5.32.2"
       },
       "engines": {
@@ -6111,14 +5924,14 @@
       }
     },
     "node_modules/rc-image": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmmirror.com/rc-image/-/rc-image-7.6.0.tgz",
-      "integrity": "sha512-tL3Rvd1sS+frZQ01i+tkeUPaOeFz2iG9/scAt/Cfs0hyCRVA/w0Pu1J/JxIX8blalvmHE0bZQRYdOmRAzWu4Hg==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-7.9.0.tgz",
+      "integrity": "sha512-l4zqO5E0quuLMCtdKfBgj4Suv8tIS011F5k1zBBlK25iMjjiNHxA0VeTzGFtUZERSA45gvpXDg8/P6qNLjR25g==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "@rc-component/portal": "^1.0.2",
         "classnames": "^2.2.6",
-        "rc-dialog": "~9.4.0",
+        "rc-dialog": "~9.5.2",
         "rc-motion": "^2.6.2",
         "rc-util": "^5.34.1"
       },
@@ -6128,9 +5941,9 @@
       }
     },
     "node_modules/rc-input": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmmirror.com/rc-input/-/rc-input-1.4.5.tgz",
-      "integrity": "sha512-AjzykhwnwYTRSwwgCu70CGKBIAv6bP2nqnFptnNTprph/TF1BAs0Qxl91mie/BR6n827WIJB6ZjaRf9iiMwAfw==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.5.1.tgz",
+      "integrity": "sha512-+nOzQJDeIfIpNP/SgY45LXSKbuMlp4Yap2y8c+ZpU7XbLmNzUd6+d5/S75sA/52jsVE6S/AkhkkDEAOjIu7i6g==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -6142,15 +5955,15 @@
       }
     },
     "node_modules/rc-input-number": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmmirror.com/rc-input-number/-/rc-input-number-9.0.0.tgz",
-      "integrity": "sha512-RfcDBDdWFFetouWFXBA+WPEC8LzBXyngr9b+yTLVIygfFu7HiLRGn/s/v9wwno94X7KFvnb28FNynMGj9XJlDQ==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-9.1.0.tgz",
+      "integrity": "sha512-NqJ6i25Xn/AgYfVxynlevIhX3FuKlMwIFpucGG1h98SlK32wQwDK0zhN9VY32McOmuaqzftduNYWWooWz8pXQA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/mini-decimal": "^1.0.1",
         "classnames": "^2.2.5",
-        "rc-input": "~1.4.0",
-        "rc-util": "^5.28.0"
+        "rc-input": "~1.5.0",
+        "rc-util": "^5.40.1"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -6158,16 +5971,16 @@
       }
     },
     "node_modules/rc-mentions": {
-      "version": "2.11.1",
-      "resolved": "https://registry.npmmirror.com/rc-mentions/-/rc-mentions-2.11.1.tgz",
-      "integrity": "sha512-upb4AK1SRFql7qGnbLEvJqLMugVVIyjmwBJW9L0eLoN9po4JmJZaBzmKA4089fNtsU8k6l/tdZiVafyooeKnLw==",
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.14.0.tgz",
+      "integrity": "sha512-qKR59FMuF8PK4ZqsbWX3UuA5P1M/snzyqV6Yt3y1DCFbCEdqUGIBgQp6vEfLCO6Z0RoRFlzXtCeSlBTcDDpg1A==",
       "dependencies": {
         "@babel/runtime": "^7.22.5",
         "@rc-component/trigger": "^2.0.0",
         "classnames": "^2.2.6",
-        "rc-input": "~1.4.0",
-        "rc-menu": "~9.13.0",
-        "rc-textarea": "~1.6.1",
+        "rc-input": "~1.5.0",
+        "rc-menu": "~9.14.0",
+        "rc-textarea": "~1.7.0",
         "rc-util": "^5.34.1"
       },
       "peerDependencies": {
@@ -6176,9 +5989,9 @@
       }
     },
     "node_modules/rc-menu": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmmirror.com/rc-menu/-/rc-menu-9.13.0.tgz",
-      "integrity": "sha512-1l8ooCB3HcYJKCltC/s7OxRKRjgymdl9htrCeGZcXNaMct0RxZRK6OPV3lPhVksIvAGMgzPd54ClpZ5J4b8cZA==",
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.14.0.tgz",
+      "integrity": "sha512-La3LBCDMLMs9Q/8mTGbnscb+ZeJ26ebkLz9xJFHd2SD8vfsCKl1Z/k3mwbxyKL01lB40fel1s9Nn9LAv/nmVJQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^2.0.0",
@@ -6193,13 +6006,13 @@
       }
     },
     "node_modules/rc-motion": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmmirror.com/rc-motion/-/rc-motion-2.9.0.tgz",
-      "integrity": "sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==",
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.1.tgz",
+      "integrity": "sha512-QD4bUqByjVQs7PhUT1d4bNxvtTcK9ETwtg7psbDfo6TmYalH/1hhjj4r2hbhW7g5OOEqYHhfwfj4noIvuOVRtQ==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
-        "rc-util": "^5.21.0"
+        "rc-util": "^5.39.3"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -6207,9 +6020,9 @@
       }
     },
     "node_modules/rc-notification": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmmirror.com/rc-notification/-/rc-notification-5.4.0.tgz",
-      "integrity": "sha512-li19y9RoYJciF3WRFvD+DvWS70jdL8Fr+Gfb/OshK+iY6iTkwzoigmSIp76/kWh5tF5i/i9im12X3nsF85GYdA==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-5.6.0.tgz",
+      "integrity": "sha512-TGQW5T7waOxLwgJG7fXcw8l7AQiFOjaZ7ISF5PrU526nunHRNcTMuzKihQHaF4E/h/KfOCDk3Mv8eqzbu2e28w==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -6306,9 +6119,9 @@
       }
     },
     "node_modules/rc-rate": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmmirror.com/rc-rate/-/rc-rate-2.12.0.tgz",
-      "integrity": "sha512-g092v5iZCdVzbjdn28FzvWebK2IutoVoiTeqoLTj9WM7SjA/gOJIw5/JFZMRyJYYVe1jLAU2UhAfstIpCNRozg==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.13.0.tgz",
+      "integrity": "sha512-oxvx1Q5k5wD30sjN5tqAyWTvJfLNNJn7Oq3IeS4HxWfAiC4BOXMITNAsw7u/fzdtO4MS8Ki8uRLOzcnEuoQiAw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
@@ -6353,9 +6166,9 @@
       }
     },
     "node_modules/rc-select": {
-      "version": "14.13.1",
-      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.13.1.tgz",
-      "integrity": "sha512-A1VHqjIOemxLnUGRxLGVqXBs8jGcJemI5NXxOJwU5PQc1wigAu1T4PRLgMkTPDOz8gPhlY9dwsPzMgakMc2QjQ==",
+      "version": "14.14.0",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.14.0.tgz",
+      "integrity": "sha512-Uo2wulrjoPPRLCPd7zlK4ZFVJxlTN//yp1xWP/U+TUOQCyXrT+Duvq/Si5OzVcmQyWAUSbsplc2OwNNhvbOeKQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^2.1.1",
@@ -6422,16 +6235,16 @@
       }
     },
     "node_modules/rc-table": {
-      "version": "7.45.5",
-      "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.45.5.tgz",
-      "integrity": "sha512-R5sOfToOk7CalSkebZpqM8lkKWOJR7uXPGEhjjTSoj5egyHBwMxaACoPj2oI+6qLSll9yZrG5K+8HTN57b2Ahg==",
+      "version": "7.45.7",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.45.7.tgz",
+      "integrity": "sha512-wi9LetBL1t1csxyGkMB2p3mCiMt+NDexMlPbXHvQFmBBAsMxrgNSAPwUci2zDLUq9m8QdWc1Nh8suvrpy9mXrg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/context": "^1.4.0",
         "classnames": "^2.2.5",
         "rc-resize-observer": "^1.1.0",
         "rc-util": "^5.37.0",
-        "rc-virtual-list": "^3.11.1"
+        "rc-virtual-list": "^3.14.2"
       },
       "engines": {
         "node": ">=8.x"
@@ -6442,14 +6255,14 @@
       }
     },
     "node_modules/rc-tabs": {
-      "version": "15.0.0",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-15.0.0.tgz",
-      "integrity": "sha512-7m541VcEiJSpHZmosMZNMIhemxtIN+f0WDhZNyXQ1/cZ40aaWsknlbj0FH6HryLoKEQvBnCI89hgQuT7MBSOBA==",
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-15.1.1.tgz",
+      "integrity": "sha512-Tc7bJvpEdkWIVCUL7yQrMNBJY3j44NcyWS48jF/UKMXuUlzaXK+Z/pEL5LjGcTadtPvVmNqA40yv7hmr+tCOAw==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
         "rc-dropdown": "~4.2.0",
-        "rc-menu": "~9.13.0",
+        "rc-menu": "~9.14.0",
         "rc-motion": "^2.6.2",
         "rc-resize-observer": "^1.0.0",
         "rc-util": "^5.34.1"
@@ -6463,13 +6276,13 @@
       }
     },
     "node_modules/rc-textarea": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmmirror.com/rc-textarea/-/rc-textarea-1.6.3.tgz",
-      "integrity": "sha512-8k7+8Y2GJ/cQLiClFMg8kUXOOdvcFQrnGeSchOvI2ZMIVvX5a3zQpLxoODL0HTrvU63fPkRmMuqaEcOF9dQemA==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.7.0.tgz",
+      "integrity": "sha512-UxizYJkWkmxP3zofXgc487QiGyDmhhheDLLjIWbFtDmiru1ls30KpO8odDaPyqNUIy9ugj5djxTEuezIn6t3Jg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.1",
-        "rc-input": "~1.4.0",
+        "rc-input": "~1.5.0",
         "rc-resize-observer": "^1.0.0",
         "rc-util": "^5.27.0"
       },
@@ -6493,9 +6306,9 @@
       }
     },
     "node_modules/rc-tree": {
-      "version": "5.8.5",
-      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.8.5.tgz",
-      "integrity": "sha512-PRfcZtVDNkR7oh26RuNe1hpw11c1wfgzwmPFL0lnxGnYefe9lDAO6cg5wJKIAwyXFVt5zHgpjYmaz0CPy1ZtKg==",
+      "version": "5.8.8",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.8.8.tgz",
+      "integrity": "sha512-S+mCMWo91m5AJqjz3PdzKilGgbFm7fFJRFiTDOcoRbD7UfMOPnerXwMworiga0O2XIo383UoWuEfeHs1WOltag==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -6512,13 +6325,13 @@
       }
     },
     "node_modules/rc-tree-select": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.20.0.tgz",
-      "integrity": "sha512-zFtkHx5/6PnXSi3oSbBSFbIPiJJQdpSU3qz/joLe75URgvxmTHi989O8MtMgpwyZwrCMOJpGi6L1uy+13uzZPw==",
+      "version": "5.21.0",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.21.0.tgz",
+      "integrity": "sha512-w+9qEu6zh0G3wt9N/hzWNSnqYH1i9mH1Nqxo0caxLRRFXF5yZWYmpCDoDTMdQM1Y4z3Q5yj08qyrPH/d4AtumA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
-        "rc-select": "~14.13.0",
+        "rc-select": "~14.14.0",
         "rc-tree": "~5.8.1",
         "rc-util": "^5.16.1"
       },
@@ -6542,9 +6355,9 @@
       }
     },
     "node_modules/rc-util": {
-      "version": "5.39.1",
-      "resolved": "https://registry.npmmirror.com/rc-util/-/rc-util-5.39.1.tgz",
-      "integrity": "sha512-OW/ERynNDgNr4y0oiFmtes3rbEamXw7GHGbkbNd9iRr7kgT03T6fT0b9WpJ3mbxKhyOcAHnGcIoh5u/cjrC2OQ==",
+      "version": "5.42.1",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.42.1.tgz",
+      "integrity": "sha512-9raEonoOiRka2hXedkMjILdz24Z4UHfAoyWSi/na1B4w4fiBujV+atJEdQrZST+Bs7NuQB0FFBsRAdD8ykInfg==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "react-is": "^18.2.0"
@@ -6555,9 +6368,9 @@
       }
     },
     "node_modules/rc-virtual-list": {
-      "version": "3.11.5",
-      "resolved": "https://registry.npmmirror.com/rc-virtual-list/-/rc-virtual-list-3.11.5.tgz",
-      "integrity": "sha512-iZRW99m5jAxtwKNPLwUrPryurcnKpXBdTyhuBp6ythf7kg/otKO5cCiIvL55GQwU0QGSlouQS0tnkciRMJUwRQ==",
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.14.2.tgz",
+      "integrity": "sha512-rA+W5xryhklJAcmswNyuKB3ZGeB855io+yOFQK5u/RXhjdshGblfKpNkQr4/9fBhZns0+uiL/0/s6IP2krtSmg==",
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "classnames": "^2.2.6",
@@ -6623,11 +6436,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.23.0",
-      "resolved": "https://registry.npmmirror.com/react-router/-/react-router-6.23.0.tgz",
-      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
       "dependencies": {
-        "@remix-run/router": "1.16.0"
+        "@remix-run/router": "1.16.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6637,12 +6450,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.23.0",
-      "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-6.23.0.tgz",
-      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
       "dependencies": {
-        "@remix-run/router": "1.16.0",
-        "react-router": "6.23.0"
+        "@remix-run/router": "1.16.1",
+        "react-router": "6.23.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -6883,10 +6696,12 @@
     },
     "node_modules/resolve-pkg-maps": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
       "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
       "dev": true,
-      "peer": true
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
     },
     "node_modules/reusify": {
       "version": "1.0.4",
@@ -6996,9 +6811,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.76.0",
-      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.76.0.tgz",
-      "integrity": "sha512-nc3LeqvF2FNW5xGF1zxZifdW3ffIz5aBb7I7tSvOoNu7z1RQ6pFt9MBuiPtjgaI62YWrM/txjWlOCFiGtf2xpw==",
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.5.tgz",
+      "integrity": "sha512-oDfX1mukIlxacPdQqNb6mV2tVCrnE+P3nVYioy72V5tlk56CPNcO4TCuFcaCRKKfJ1M3lH95CleRS+dVKL2qMg==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -7623,6 +7438,15 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -7840,6 +7664,7 @@
       "version": "5.4.5",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.4.5.tgz",
       "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7848,6 +7673,32 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-7.13.0.tgz",
+      "integrity": "sha512-upO0AXxyBwJ4BbiC6CRgAJKtGYha2zw4m1g7TIVPSonwYEuf7vCicw3syjS1OxdDMTz96sZIXl3Jx3vWJLLKFw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "7.13.0",
+        "@typescript-eslint/parser": "7.13.0",
+        "@typescript-eslint/utils": "7.13.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ufo": {
       "version": "1.5.3",
       "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.5.3.tgz",
@@ -7936,23 +7787,26 @@
       }
     },
     "node_modules/unplugin-auto-import": {
-      "version": "0.17.5",
-      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.17.5.tgz",
-      "integrity": "sha512-fHNDkDSxv3PGagX1wmKBYBkgaM4AKAgZmdJw/bxjhNljx9KSXSgHpGfX0MwUrq9qw6q1bhHIZVWyOwoY2koo4w==",
+      "version": "0.17.6",
+      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.17.6.tgz",
+      "integrity": "sha512-dmX0Pex5DzMzVuALkexboOZvh51fL/BD6aoPO7qHoTYGlQp0GRKsREv2KMF1lzYI9SXKQiRxAjwzbQnrFFNydQ==",
       "dev": true,
       "dependencies": {
-        "@antfu/utils": "^0.7.7",
+        "@antfu/utils": "^0.7.8",
         "@rollup/pluginutils": "^5.1.0",
         "fast-glob": "^3.3.2",
         "local-pkg": "^0.5.0",
-        "magic-string": "^0.30.5",
-        "minimatch": "^9.0.3",
+        "magic-string": "^0.30.10",
+        "minimatch": "^9.0.4",
         "unimport": "^3.7.1",
-        "unplugin": "^1.6.0"
+        "unplugin": "^1.10.1"
       },
       "engines": {
         "node": ">=14"
       },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
       "peerDependencies": {
         "@nuxt/kit": "^3.2.2",
         "@vueuse/core": "*"
@@ -8071,9 +7925,9 @@
       "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw=="
     },
     "node_modules/vite": {
-      "version": "5.2.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz",
-      "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
+      "version": "5.2.13",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.13.tgz",
+      "integrity": "sha512-SSq1noJfY9pR3I1TUENL3rQYDQCFqgD+lM6fTRAM8Nv6Lsg5hDLaXkjETVeBt+7vZBCMoibD+6IWnT2mJ+Zb/A==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",
diff --git a/package.json b/package.json
index bd41061..de1354f 100644
--- a/package.json
+++ b/package.json
@@ -22,15 +22,14 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@marsidev/react-turnstile": "^0.6.0",
+    "@marsidev/react-turnstile": "^0.7.1",
     "@monaco-editor/react": "^4.6.0",
-    "@typescript/ata": "^0.9.4",
-    "antd": "^5.17.0",
-    "axios": "^1.6.8",
+    "antd": "^5.18.1",
+    "axios": "^1.7.2",
     "custom-protocol-check": "^1.4.0",
     "dayjs": "^1.11.11",
     "echarts": "^5.5.0",
-    "esbuild-wasm": "^0.20.2",
+    "esbuild-wasm": "^0.21.5",
     "fast-deep-equal": "^3.1.3",
     "fflate": "^0.8.2",
     "jwt-decode": "^4.0.0",
@@ -38,42 +37,43 @@
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.4",
     "moment": "^2.30.1",
-    "monaco-editor": "^0.48.0",
+    "monaco-editor": "^0.49.0",
     "monaco-jsx-syntax-highlight": "^1.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
-    "react-router": "^6.23.0",
-    "react-router-dom": "^6.23.0",
+    "react-router": "^6.23.1",
+    "react-router-dom": "^6.23.1",
     "size-sensor": "^1.0.2",
     "vanilla-tilt": "^1.8.1"
   },
   "devDependencies": {
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@types/jsdom": "^21.1.6",
-    "@types/lodash": "^4.17.1",
-    "@types/node": "^20.12.8",
-    "@types/react": "^18.3.1",
+    "@types/jsdom": "^21.1.7",
+    "@types/lodash": "^4.17.5",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "@typescript/ata": "^0.9.6",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.57.0",
-    "eslint-config-love": "^47.0.0",
+    "eslint-config-love": "^52.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-promise": "^6.2.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "jsdom": "^24.0.0",
-    "prettier": "^3.2.5",
-    "sass": "^1.76.0",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "jsdom": "^24.1.0",
+    "prettier": "^3.3.2",
+    "sass": "^1.77.5",
     "stylelint-config-prettier": "^9.0.5",
     "typescript": "^5.4.5",
-    "unplugin-auto-import": "^0.17.5",
+    "unplugin-auto-import": "^0.17.6",
     "unplugin-icons": "^0.19.0",
-    "vite": "^5.2.11"
+    "vite": "^5.2.13"
   }
 }
diff --git a/src/components/Playground/CodeEditor/Editor/loader.ts b/src/components/Playground/CodeEditor/Editor/loader.ts
index f212880..f1eb028 100644
--- a/src/components/Playground/CodeEditor/Editor/loader.ts
+++ b/src/components/Playground/CodeEditor/Editor/loader.ts
@@ -2,6 +2,6 @@ import { loader } from '@monaco-editor/react'
 
 loader.config({
     paths: {
-        vs: 'https://unpkg.com/monaco-editor@0.48.0/min/vs'
+        vs: 'https://unpkg.com/monaco-editor@0.49.0/min/vs'
     }
 })
diff --git a/src/components/Playground/compiler.ts b/src/components/Playground/compiler.ts
index 27a330e..e7939f7 100644
--- a/src/components/Playground/compiler.ts
+++ b/src/components/Playground/compiler.ts
@@ -16,7 +16,7 @@ class Compiler {
             void esbuild
                 .initialize({
                     worker: true,
-                    wasmURL: 'https://esm.sh/esbuild-wasm@0.20.2/esbuild.wasm'
+                    wasmURL: 'https://esm.sh/esbuild-wasm@0.21.5/esbuild.wasm'
                 })
                 .finally(() => {
                     this.init = true

From 1b89cb6bbdf6bfe3455a2257380993d1c5bace02 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 13 Jun 2024 15:17:18 +0800
Subject: [PATCH 300/307] Fix(Form): Fix ref error

---
 src/pages/Sign/SignIn.tsx           |  9 ++++++---
 src/pages/System/Settings/Mail.tsx  |  4 ++--
 src/pages/System/Tools/Base.tsx     |  8 ++++----
 src/pages/System/Tools/Template.tsx |  8 ++++----
 src/pages/System/User.tsx           |  4 ++--
 src/pages/Tools/index.tsx           |  4 ++--
 src/pages/User/index.tsx            | 22 ++++++++++++++--------
 7 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx
index a81563a..c6d7258 100644
--- a/src/pages/Sign/SignIn.tsx
+++ b/src/pages/Sign/SignIn.tsx
@@ -124,10 +124,13 @@ const SignIn = () => {
                                 <>
                                     <AntdForm
                                         form={twoFactorForm}
-                                        ref={(ref) => {
+                                        ref={() => {
                                             setTimeout(() => {
-                                                // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-                                                ref?.getFieldInstance('twoFactorCode').focus()
+                                                // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+                                                twoFactorForm
+                                                    .getFieldInstance('twoFactorCode')
+                                                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                                                    .focus()
                                             }, 50)
                                         }}
                                     >
diff --git a/src/pages/System/Settings/Mail.tsx b/src/pages/System/Settings/Mail.tsx
index 9347d8f..66734fa 100644
--- a/src/pages/System/Settings/Mail.tsx
+++ b/src/pages/System/Settings/Mail.tsx
@@ -29,10 +29,10 @@ const Mail = () => {
                 <>
                     <AntdForm
                         form={mailSendForm}
-                        ref={(ref) => {
+                        ref={() => {
                             setTimeout(() => {
                                 // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-                                ref?.getFieldInstance('to').focus()
+                                mailSendForm?.getFieldInstance('to').focus()
                             }, 50)
                         }}
                     >
diff --git a/src/pages/System/Tools/Base.tsx b/src/pages/System/Tools/Base.tsx
index 46a313d..6cee084 100644
--- a/src/pages/System/Tools/Base.tsx
+++ b/src/pages/System/Tools/Base.tsx
@@ -623,10 +623,10 @@ const Base = () => {
                 content: (
                     <AntdForm
                         form={addFileForm}
-                        ref={(ref) => {
+                        ref={() => {
                             setTimeout(() => {
                                 // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-                                ref?.getFieldInstance('fileName').focus()
+                                addFileForm?.getFieldInstance('fileName').focus()
                             }, 50)
                         }}
                     >
@@ -817,10 +817,10 @@ const Base = () => {
                     content: (
                         <AntdForm
                             form={renameFileForm}
-                            ref={(ref) => {
+                            ref={() => {
                                 setTimeout(() => {
                                     // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-                                    ref?.getFieldInstance('fileName').focus()
+                                    renameFileForm?.getFieldInstance('fileName').focus()
                                 }, 50)
                             }}
                         >
diff --git a/src/pages/System/Tools/Template.tsx b/src/pages/System/Tools/Template.tsx
index b3f79d9..310793f 100644
--- a/src/pages/System/Tools/Template.tsx
+++ b/src/pages/System/Tools/Template.tsx
@@ -477,10 +477,10 @@ const Template = () => {
                 content: (
                     <AntdForm
                         form={addFileForm}
-                        ref={(ref) => {
+                        ref={() => {
                             setTimeout(() => {
                                 // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-                                ref?.getFieldInstance('fileName').focus()
+                                addFileForm?.getFieldInstance('fileName').focus()
                             }, 50)
                         }}
                     >
@@ -672,10 +672,10 @@ const Template = () => {
                     content: (
                         <AntdForm
                             form={renameFileForm}
-                            ref={(ref) => {
+                            ref={() => {
                                 setTimeout(() => {
                                     // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-                                    ref?.getFieldInstance('fileName').focus()
+                                    renameFileForm?.getFieldInstance('fileName').focus()
                                 }, 50)
                             }}
                         >
diff --git a/src/pages/System/User.tsx b/src/pages/System/User.tsx
index 9b67fb1..1ce8c2a 100644
--- a/src/pages/System/User.tsx
+++ b/src/pages/System/User.tsx
@@ -351,10 +351,10 @@ const User = () => {
                         style={{ marginTop: 20 }}
                         labelCol={{ span: 6 }}
                         wrapperCol={{ span: 18 }}
-                        ref={(ref) => {
+                        ref={() => {
                             setTimeout(() => {
                                 // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-                                ref?.getFieldInstance('password').focus()
+                                changePasswordForm?.getFieldInstance('password').focus()
                             }, 50)
                         }}
                     >
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
index a7bfe6a..f9bd850 100644
--- a/src/pages/Tools/index.tsx
+++ b/src/pages/Tools/index.tsx
@@ -264,10 +264,10 @@ const Tools = () => {
                 <>
                     <AntdForm
                         form={upgradeForm}
-                        ref={(ref) => {
+                        ref={() => {
                             setTimeout(() => {
                                 // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-                                ref?.getFieldInstance('toolId').focus()
+                                upgradeForm?.getFieldInstance('toolId').focus()
                             }, 50)
                         }}
                         labelCol={{ span: 4 }}
diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
index f470ff4..10c0eaf 100644
--- a/src/pages/User/index.tsx
+++ b/src/pages/User/index.tsx
@@ -125,10 +125,10 @@ const User = () => {
                     style={{ marginTop: 20 }}
                     labelCol={{ span: 6 }}
                     wrapperCol={{ span: 18 }}
-                    ref={(ref) => {
+                    ref={() => {
                         setTimeout(() => {
                             // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-                            ref?.getFieldInstance('originalPassword').focus()
+                            changePasswordForm?.getFieldInstance('originalPassword').focus()
                         }, 50)
                     }}
                 >
@@ -258,10 +258,13 @@ const User = () => {
                                 <>
                                     <AntdForm
                                         form={twoFactorForm}
-                                        ref={(ref) => {
+                                        ref={() => {
                                             setTimeout(() => {
-                                                // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-                                                ref?.getFieldInstance('twoFactorCode').focus()
+                                                // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+                                                twoFactorForm
+                                                    ?.getFieldInstance('twoFactorCode')
+                                                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                                                    .focus()
                                             }, 50)
                                         }}
                                     >
@@ -347,10 +350,13 @@ const User = () => {
                                         </AntdTag>
                                         <AntdForm
                                             form={twoFactorForm}
-                                            ref={(ref) => {
+                                            ref={() => {
                                                 setTimeout(() => {
-                                                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
-                                                    ref?.getFieldInstance('twoFactorCode').focus()
+                                                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+                                                    twoFactorForm
+                                                        ?.getFieldInstance('twoFactorCode')
+                                                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                                                        .focus()
                                                 }, 50)
                                             }}
                                         >

From dbcb16396540bde88990162eec78ca6dd277c51a Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 13 Jun 2024 17:56:57 +0800
Subject: [PATCH 301/307] Build(Package): Update config

---
 package.json | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index de1354f..5f1ead5 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,11 @@
   "type": "module",
   "version": "1.0.0-SNAPSHOT",
   "description": "Oxygen Toolbox browser version",
-  "author": "FatttSnake",
+  "author":  {
+    "name": "FatttSnake",
+    "email": "fatttsnake@fatweb.top",
+    "url": "https://fatweb.top"
+  },
   "homepage": "https://tool.fatweb.top",
   "scripts": {
     "dev": "vite",

From c390ba1a2c7a31f49ddfc8a8fe1c71fe71ebb1bc Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Mon, 15 Jul 2024 00:03:07 +0800
Subject: [PATCH 302/307] Fix(HideScrollbar): Fix error stylesheet

---
 src/assets/css/components/common/hide-scrollbar.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss
index 6ca07e8..758e68f 100644
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -14,7 +14,6 @@
     -ms-overflow-style: none;
 
     .hide-scrollbar-content {
-      width: fit-content;
       min-width: 100%;
     }
   }

From a08cb2b811c7b19331834e66845359472fdf57ac Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 6 Sep 2024 09:42:13 +0800
Subject: [PATCH 303/307] Build(package.json): Add script to package dist

---
 package.json |  1 +
 package.sh   | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 package.sh

diff --git a/package.json b/package.json
index 5f1ead5..1676b36 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "dev": "vite",
     "dev-host": "vite --host 0.0.0.0",
     "build": "vite build && npm run typecheck",
+    "build:package": "npm run build && bash package.sh ${npm_package_version}",
     "build-test": "vite build --mode testing && npm run typecheck",
     "typecheck": "tsc",
     "clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts",
diff --git a/package.sh b/package.sh
new file mode 100644
index 0000000..1f8cdd2
--- /dev/null
+++ b/package.sh
@@ -0,0 +1,20 @@
+#!/bin/bash
+
+FILE_NAME=oxygen-ui${1:+-v$1}
+GZ_FILE_NAME=${FILE_NAME}.tar.gz
+ZIP_FILE_NAME=${FILE_NAME}.zip
+
+cp -r dist ${FILE_NAME}
+
+tar -czvf ${GZ_FILE_NAME} ${FILE_NAME}
+zip -rv9 ${ZIP_FILE_NAME} ${FILE_NAME}
+
+md5sum ${GZ_FILE_NAME} | awk '{ print $1 }' > ${GZ_FILE_NAME}.md5
+sha1sum ${GZ_FILE_NAME} | awk '{ print $1 }' > ${GZ_FILE_NAME}.sha1
+sha256sum ${GZ_FILE_NAME} | awk '{ print $1 }' > ${GZ_FILE_NAME}.sha256
+sha512sum ${GZ_FILE_NAME} | awk '{ print $1 }' > ${GZ_FILE_NAME}.sha512
+
+md5sum ${ZIP_FILE_NAME} | awk '{ print $1 }' > ${ZIP_FILE_NAME}.md5
+sha1sum ${ZIP_FILE_NAME} | awk '{ print $1 }' > ${ZIP_FILE_NAME}.sha1
+sha256sum ${ZIP_FILE_NAME} | awk '{ print $1 }' > ${ZIP_FILE_NAME}.sha256
+sha512sum ${ZIP_FILE_NAME} | awk '{ print $1 }' > ${ZIP_FILE_NAME}.sha512

From 9de8ea5694eff164fde7adcca13ef3fb460142f8 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 6 Sep 2024 10:02:46 +0800
Subject: [PATCH 304/307] Refactor(Logo): Update logo

---
 public/logo.png         | Bin 44116 -> 23926 bytes
 public/logo.svg         |   2 +-
 src/assets/svg/logo.svg |   2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/logo.png b/public/logo.png
index f3703ebc6dca8e8f596a7ad3beca0a607e4a7a1b..89c0af8329c16b90f98b24bebeee4be82dcbcf2e 100644
GIT binary patch
literal 23926
zcmeFX=Of(D_Xiq%qps+^eUyl9S8uzkL|?4liQc34h}B#4=$7b&=)ESQ1dAmI61|fU
zL<D!g_xb$`?r$IL%zMf?GiT16^O`f00M}6?BW5Ii^ym?p`g3LdN00EaS^P%;JZ$oO
z<lBcwkMJJBwGb-U&xil}{htK>|0)3@c@n_?_JE(hj=>`wTs(XNLL$IpViHm^ata{j
z6Dn#NS~_|LMkZz!RyKAHPOksBd3gDr@;?(06cQE@6%z-6B_yS!Wn|^#6%>^qP?)lc
zs@ijP4NWa=9bLGdz5&9}$k@cx%-q7#%G$=(&i;jiqm#3XtDC!rr<b?SOJ6_#fWV;O
zkkGL3h{#t_ucMJMv2pPUiAl*RscCQ0GcvQXb8_G2<rfqd6_=Ev%F5qWR902j)YjEE
zyl-s!(A?76*51+C)!ozE*FP{gG(7V0)9B~1@rlVVQ`0l(*|~Yl!s6GZ<&|%%YwO>C
zY;10A@9ggF9~>SXpPZik{B?fu`||4g&&}W4e|PssfMqaN6gYO8YRV54MCYF#Ju+ob
zSB4<y8IFe@ze*-}Ao_Xs<#gqf*>(D}Yg5W}AtX7CdioRo3Ugxh8o%B(<%+UgjgAa`
zJ(Q%H%ya!Q!Iv$m4rh614+AZ-ZVl4KzQy*DB@{>?6u|L+fB)YypoILZVIh(O-JdLL
zF1oMe<{wrmg8jc&f;Aln<nK3dSaeh3fWz4t-zZog))c#v|Jy4$8>R3pA>}}Zek}6&
z_AT<ZChOs>!%LQn917TTQ*fWAtPOlI-LwmYN}1@-NIswf9(tF>A437W8pon{z)P8{
zoxx^o<(FkI)=E+GfnW(Fa9Yo0pP%tyCiEEuumK?BWi6i-tLk_K9KM<^N!Jwrvv-Nj
zFHYaGO|`T>Ljv0uHZ=3y)SUnv?lr&M^SuJ7u(_(^C9P5D)yH!nbSZIfbS*i1O)`WX
z*_0OYT{MRl90eTak%P_An;(>KVoRe#H0eV%4<P{CzV({c;f*5>WRuB3LhHou7XXfW
zj5E05!k7!2^Ht|>@ayD70*x3lU~W69=Sl$Em_IJ9>#acm4!g!<<JRcl9d=}V+l1mA
zYmQ+wkh9&jvD~u0j*LTDU}0V9c1fQN8oyN25*5(grho)~&<~|Laqwlqb}m16U77mp
z3WR=y=5e={SZ8t|MXZOJS7u);130uKQ?5W{P(aI?T2D6x6yR%_1?xGtB<Dcp<uktv
zXK^RyKn7<-R2AKs5<&s<TBts4><k6MT>>SsBTS7|a}HEvgaT{{&nQ|4*tXb_B10lF
zLm~i<<ge^0I&Wrip@8yW+BpW=P;AvwieDlVmb=k}j?AaxL?D#@&`{>{Gi+MpFI2?U
z0Y(A||K{kNlOchl2g*(dgd9jcImKDioM3F{=WH_C)>yh5rjRPrlNjJIP<~%d9$WD-
z&9B%Rn?mVi^ymN_q(8w$`)&Y^-?HFbooz3y0(lCf^Q>M0p^bC52U;}_>`1f=d(ojP
zfWt3ex614h2U4N!<pH8!1_<3hXD>Q}U@J_u_sqyRkgQd+<7Q9*YGlN(IgSH~-Y}L~
zZUjP|jpucFFTTbCp)KDI+yj*WfxikxH@6IHOigc%BS7`iT31htJa~}ande*&j+Aw$
z{CHHs*YnHdK^#c8EXJY<yMXnL7?&0F!HN=~L+U~|w&@+m7qJW-$tTdxkAr@(Ss_og
z&S{EHp8+<=18*2qPubtvQxtg$BfVpK=&eq{BCv27>u|sZZtjlQ>)%%*5NjE0MZiYb
zLZEor)Q)Yhk6*tJaQH^SiQ2%X_r|aPj03r4IqV$fG~_LN5Z1$v+`1d9?teYYk0#@X
z0ODkGXK!@lhNdf+3W+$FJ&9@PiK5q_lAQ!lse(X7nkDjRd6;AnAyn#H9^xHC@}<Js
z4=i){4tP3~ZM}+Lv<h%|*{YOtX3)fZpU|8G+0qA7S$~b{UG|GElmcuxi`R@*i6CgY
zVPNbBn|}JWZ8eWyTqSULcD<A{)26!RfP7C0pvI)4avFycDwnk&=U_e|=6@+l>My^x
zL5S^?9fn}9VkY%}wzeUG<*aBBMIf?R<QIq4sur?x+>Sw$k$v(JEN4TRiE8ryMocKs
zEUGX-Txg7*Ja+V2fkC8DDT_8(vRxoC>6OUZh8|$U?^-0WUt|T)JrWHZK9Kt^Ru*X6
ziSmoP#frz!>@y(Z8Og{RB(ReTDrH^nLF(pDMt|nmJt7DkCOB+#q8~7de*AZi<u3#v
zSuIk)p{@Ozp?i)+=r!<E#70=R`I7i;Id~04hV)L@jte-)H$T-zsvn|RbYg(-DZkrK
z@X(ql))dfHK7|E7j|INhzdtViYW=<3lK6}NThBLG%_pqeC#=Kjs*S{&4c2rq_G(E6
zF+c%ivGZiHFaT<Z#xI%`tBUY6PdIkplF7v#gsI743qE8`cThtC+Uunk*sTi9G~W;F
zz^bsiri`^FfCKc4xpbc8H@0BPLS~H_TM&ZOxdveA7s0BIuzNw(hiKou#s^CX96c?8
z2L((K&My;U8JY?z7Jad1f&xw=-eullEj{`5?075$fP#4_7EM~yK>_j+Wxj$jKxl5y
zfkhy;hh~hQjG-zwb}Qbz(z(Pz0%iOw4E&>kP~J0DnR!QHBrt@mT$~JB(D5>EUpa0P
z7H{GfFcUg(qCKN-dAnTBviXC2YhQVbUD-Xm@0No0!&Z%%cXWufUvZ%U*6e+v_%>oE
zHfsEeq*rq<kDSBq;5QAa?dKiuex5GB{K8QnXY5}#`{(ynz23cn`yek^JU!!vlN1~G
z-~r<f+Vo|CQv6a^31!%J%)E9*OYdV2yFErWu3&PVKn=#C?XjmoPDe&&#}~%K2cu|p
z*4IGMEz@DXE5oRf>~+<>KUE-Pd|p(tt61TwjLhdYY~v^GVzsM0-rZgY)ZekB4|EAC
zhYuK;%f*@99${%mBG~)n3Qr+2BYXf#S#UVQ4p=C(5hyb>fsg&hs~IEm?xj6w9rz;7
zu1u<3$tn9I?0WwGG#dD!_3Z=#xfM)@KHUw)&fBA0%xU=M@VKh)1Z)274uRPRq;&f^
znz9#`#2j`<fb0W8NqSA$P*Ui}B_aNKR?i<ru-kk(A`Uxug6tYH<Lch@fHssE)|sT$
zjOkIVqFne-4wMW4l)e=3bOP_BRMXb-<M%+$s}+NEQSX!j7d1%;fF!70KY`XeO|-RS
z7C8K5MlZ_2J9E!PQdkM#hM9KsyZgaYEa@!lh24=Vm7=xaU*0rlJ*}D7SeIa^qizpc
z+YrM#z%&=EU6KhDN$l8=DNbljlI#TzLyKn^X1l37)0~)3HdH8(O^9<1)i*2n??J0-
zM>nT&K%=_$L|Ybjirm8@ojQlBXy9U9_gh<c1(x^z_c&%pgEzoo@+YIW^b^Mu-XCHk
z(HfB;Bv8U<+DmTy>S)8$L9xtVL4btAeZ+SGs+eRZ3wrFi$B?J#ww?S6cr~|wFC9wn
z{o){#1<qMGkZrW|k`>v6N)(({7%<e%Vy02BI}S&%LILKT2O{=IKU1)7|I^bF(VYJG
zBpk?;-^-IG>MXb%$Ua2Tp}oMLdvgLP;G0X!+uhqXJR~q+`(PktcV+QA9tTo8o3S}_
zcUiLbf1@+nU6%)aj{5KvOU~lF&)lWg(*BteVB^s`>j2s$l2i)|M4qnbC}@<wnBL#T
zx?FYs)xHc>lVDu}07qffeKi>4bn#IFi*F3;cyn&5Q@oa`8rYHE?XHr&14*tYArG-w
zkKYL$iOPI9*JJo@ok@f>BAoeVYq9<PHaC^>2hueKMnVzSL&ao$O%2T_o_U=%aU~l!
zfdX%XG;guMN!eg$rRH03224B-6H~-3(Y4+F+4|0V{j8w9s&ZF^7wmsq`F$_^&*4^w
z<=lUiPyj&&(ZjyIRGpe37RfcN^amp;9l~Fx6F~uVGU2f$vv+e?YtrE&J*n$(A1H(b
zdS;05Cnerg8NUV&gQqRE4FjwQIFPbICBO9=9(b?-4fkn@K{U-Jc2>Pc1=ZulI@sA-
z^x$Fmju-(P%nkFDt~s&*D1hjwScfGnngi)w-;%0N7a57ItiAU<%<{o9NktrZ9kvfV
zMgqyV^I&-Og4jj7SXF~*VMXerGg&J79*ZPwpL|8L6S-np3Y5FNO~W$GGIIe<V@;XV
zcpM0Qh>sO{c|(b6H+BMhf3jj%jEJFtD(A!U4}{o0)CMk1U@L4B6qGO}fB}m#MUb(#
z*aLx+iPne%0=tlp4{u$1hp^O!;Q2P#LFxRI*7g>_itIK?vw}ee3!fsLW~tL)*fbDL
zeSw9I0|}r{16bAgE(ua2#sblf>|JLf4&+*J7zk@>pi7ow+G6-nKu?`|CMj0hr}=aL
z*<+DqkGONj-v3fn(0KX(nvvyiD*!l-h4Og1uzJ~Z@nW9&D;BqfGC8L%V(Ztxf?^c0
zPUTyHl7Tyx&i!fW(_Ji9jr4F%{LGF7xJqnSF!(Bl`~JE4)s)v64T3qv+x3z)2HC7`
zW6O&qetqb#%6*MJJ1VxOLx_06aeZMbR4@L6P;a<^H+$>__??yw=sv<at!qTpOtQ{S
zT$?h}K|{FlTds=DF{pPsa%96h`So@_w;_Y7jPv+`O89NJoVm7lOL)UmLULa+Z&Zg>
zb7sAl4LQ!+?uTdMBMyl-%;?^Uzaz3`yPo&<Wyj6n{Y$^#1ZH2Yx$=zN?ZIu=lg(A_
zVdb3RHm^}WWCuuU{EOLOb|?MzCyVe~@gtm|l5+#p^@LLAjCX9uqjn#1G6`Is8qD6#
zjk!Ty`$cX|ASQ0gFkf@W2ovpHaDK}$^r<O@8-zhozvVbRl<pF++p&Dw^daA^dUSme
zD0CskWlH{SUmYe-Ko#`<w%`*By&+?O|DkGa<_hbu;bwqH8F^Dm3<y2_Qp9S6fYbrT
zyJS!lS-rU7%f7met17|TK0B(mwMx2msW6QGXD{D`I<Ko<?^gv1oddXT@vcO(V@)?=
zHdud)*XJcP73p8peCnP6p8k5wHTjevX2Rm)_;=%a*ful87yWQHvW#$AQpue3FWRry
zlFKD7`hf30B<q1*bAl_G?fWB7Q{&V_X4xr5yaPp>)8v|RHUD9psgZ8=_S7Dzk3YEN
zJPk?SZV!Myrum4N<yxrz;&ZQ9@pR1&r$w6AJ5oEb%goHnL0oy?as}g&y;*srTGt#s
zyKVJIHaKaeAu-N7fjha3wv1`qZq96&d5S{6<5);!6{On1L3!nqS|YQGxAEjmq`90`
zc|kh&Q-fx#bho2Hqq%M8l>+}ycK4B%!jN}HG2U?;$;V8}JC@^_^2C{|&>}13ul{#W
zYIbbsjP*<C*jG_GC6sF^)qlm1BQ&-dw|AH=2MW@!!@4S}gF+Ey3Tph2&JkkO&BnND
zN6{=M+Z@?D%qhX!9|Zg@v=Xy<A@YP9<k1Y{PVxK)^sqdFdD1Jrx+)vonE-wa?bT15
z%M}`m4Pu`o`r<~KGS}fZi$ij`mHL@q3T$F&5r-U0&<WAQMV4U}Pn)1K&Tbvj13oQ`
zGYxoYoxHL$MI)TZyffi%_@fQ-;zow)(ewCIxmZ7XNB&z@!`pVkFQVxhCrH6C$XzNA
zv=f${LMqq?rgk2Cvp8%a-)@i{Eg5W+(O6?5y`;3t!B|R#)C8?h!<$1O2}l^}4&GaV
z9e>5_0z;}wQ|PC|VZxPpfUZ)f%AI0xGbX9@%V*LGMXj%gzKYqV7)l;9$fx`v!qaj}
zT4<;0IkjSvDF#S<X#==50OENJl;I9o;TqgM{~wu3G~kxQVte(>6jO;~#kXTRnwbK1
z2Zeglamk2v$!kf(C1yvH36ycvLORD8g#V3)^{gMT64A)KXz9$ZpnUdAUU6wsWX|zB
zg0?a=TjL~(<ru{w1MSq(=wS^H39NtIc4{jc$H<i<*Pu4NHe^RGaIag1|8aN?aY(cT
zAt&<zBgZ6%KbHlxLyoh(6!#N;8906^x;`)$e%MPTspE27f!FZb;5j%a7qBZwSv{P0
z24BL<KC+ZTS#0qZT#~Vn2)?W)A;NxrTL+)hLW#-tHbogYC*QIwQ&v&XU;gehHinJ+
z;$#QY2E5U-Cymv{96$V#C6RPD>kHd(>nO1%gnnER<4-pv3Hb4A78q`ex1MBWI#MRK
zODcfJVOL9+{T4q|>N(6WddD?oc{r0L;*=U-i~RV$T=6aV_ESU!<??m%sSVB2$V<jD
zRso~P5FwcCRgftFWjv`)^!DthxC2nV#Xi{;=)Q@^$T32qX&A|!wBd1(nDNQHLOpKs
z?{=5}*pIrNb`KM2a%iq2+fC5wu0;H{j_QTzv7JCl6S2`bxwgIXz0WVc$NDQ*OyYN+
zQ;33_TNkW#8JDXpxdCJu#a}iblLtcnGoW8iY;H=LbVf?rpm>rP7Rofd+mMUV*5<u&
zvmSTH>65xq@QRb~0;kT;l;8X$;JWGIaW4-OBJ*Yu*kZ`hA-J!{>EQo%k`Tjyu-}V|
z){TLW`Fio_ws(nfKL7J}<4zAxqPdVzioodUt!VbLH~(t&r+5NWjNP4^F%Lx9_^*BJ
zZ&uD<a+~(_B|IZK#qS~phWW{i^=dp)en@zfeA8kf@ALOzR(?_SZvy?#5~x?@PrCEN
zhQhsq`?80E_8?zl=l(rF(&gtz)x-8sJA-&Yz6Tam^u_bJY+KRhUb>PkO|fAnjj0y*
zi`2pWNpa@?k^LztiTxQqOUYT-awXcU5YKtDSRvp#Y2Rk6cx})qY@1T>vS#|3cbq}-
zswUpu3Ki$O)HsHrGgf6o`@wfN1^T`e9uJo%wt}{rPvfc$)J*K&mbk9r(m7x0(2`ww
zh{tCZm5jy<#XRd(3Xh28J}nDzA^YJcsPJ<(Xj%9_7`5*-rRo)#1!__BaE`^Ob6Sn;
zelMzgA^f|VZ@m|u&ueiCQQ}D7&fzW07Ly4oR07;ZLY{N3MW~%QOIH^ESC(Pn$UCO_
zLBFSvwn-_@9<%F=Czb6q$eKSM_)HnaA1U5#pZ$Y4yk<?jNolGGbNEaOv2_D7^%RcB
zb;!|AAo@XmrdLN(0Srx0H0aUsF6*3S0Idzl0C9X;YQ_|QdB+exzzdRdng$VvKQoD@
z4ZK9{ZDo`PU+`n-PSG4iW`Ax+a0B&n*S!mI;uxrwv)S*zk01`!I+d*z!9lpRQe2tc
z^(k>J|LHi^|9<@_<WIGUZ0ASk+UtIz54o+0GHdv1H5VlIyAlA9yz<U^w7DF#Z9OTP
zVAP<|kX33dIFw%281k;Zg4ncegO;mi+T5o}Nm9}Oh<LA4Ci+9BDGqn>HA(F`uEo|U
zDgR#N7d(=zZ#s95Bcic?>0wmt#icT8{Da`>RcOUr$jB2amq(EXQXj>WD;9S2HZRW&
zD$>2vT*Yg?Wbia87g#WEI7p2oC0C?e!Z*RP(6)O)0=k2~%-M>ytr+gjoLQh+#>S)K
zgyf2t1^8yRmC7aIkT$<u(dbxn6(&~Yv=ZX^3a|Ggy++RriD(|<zk{ecMEC|^WHO|K
zvR?m&o$MTZ>;<ytJ!(4y?yG4FMNek2w2sZZSzNWIS!7Tve_<T6Ms_7`bfpkXjE~+I
z0pGBm8k{XM+y<8=pQ#q&JS)mqA6b1|(8C$`A^pZ>20#8G_YV_ThQxE*W7U2;Qqj68
z?Cy+YAjHf4yZ95^4+o&>CrjoRBgqLBfr!^**J5q?IJW&p3XGqvDFTdaS?t-5ip1Gp
zzdtv4W-ShwpQ=n(9UR@<MTadnF1+SLNM^6}k=eG--+|_EmzK&w-|H)ZpMxVy$(Ju}
zYFFsiZs!Wb`}0KohvPMMRmOj_l4To`xBKgmPqmlRDeH07OuC6^?;L$!A1}M=S8U?f
zC?u2yEoL{>Wle#;5z(+Gx@N0ein$I`uO}%?Y>ziPS#7F}pEHtO$s8YA<_lbq$5Z`x
zr(QHVgumWj$1vS})XN8{bwb;i+Zf0@H;1#Z>wt<wSQ>Cg{4GB{zu%9|*y3P(&){CO
zDv|HzOBGM$f2r5OYul7K|1bHAVjHdo;Ea~hlivM+23zeBPi45Ob4Q+ojTkMB?*~}C
z%GeNNJo8=BBVyBT>r+q`Wt#(}4L^sq)F@xA@liU?2ld#(imjb%Tjx0vyHaDNOmJd<
z>6Gbb_IeL=cYz>yOEdnU>_$3eQSj9~ecA}0kC$Fo$L5a^T{P*Pt*pAabFCA5;w@GL
z7LP}N_QJsHmxDW-?X#qf!vU(Zh=J_ae2$OEE~t}#Q7_z3SiG0j{>606!=3Fo;ZCgg
z<tdT#TP{NzWI^?!P3JdWkcy7!(ia$LArts1Toq5A1g}*}wN1=?Xo}xyj=9K2*x`Ck
z%UlCSEgr8bV@B4^eFwQT%8gB0Q_GZl6xvl%$%wC~)esHBB%x0fF`L|-OC_Ljza@=L
zoqQJ$W@S<9d6R=SltH<cYq~F^#gTiy1A+TaNWLq(vZ&;&vjJ*87qc7Mxk#PQEl(cM
zoaMNZiSJX!SOYTi)ZCv-HM1nm<qv&Z=|ajRomt69qW49M(TmpaCfV%nQEqqoZWpn{
zInUH~Bau&8olC4Q3P!~SmL)p<O*M4^IOf`+pK1keD$@kck|vdo%ws$mEo#8pzeSI?
zRPzr5;;FRDrQg4DT#u~Ah6KFJC7sI#Y}hVbcp|YYYO!4<ZS)CJM^gQ{%^USn&AIFt
ze@R7<ZR)q|$Hx<%m8PDtMrj6V9Y3IfXat!p9hY<M9*54)C)zD_%pfx@`Szh0qdA17
z4c)*jLY_VG@Qvn$9GS<HmTFB{=d?8F>r_+1N<{v+@#C_1{m5BmhRafQ&BJ+;_ZQ?-
zm-z0R<oT}h%6b&@2sT(|UCj&@|0jNSejjK<Wj&85fl$x#6;+;>PzbV?Di~}?jJPzb
zG{rSDfEG;RId^AYO!lIGC}Q@+JGE9F^WB+_QM^-Nz-A|tb2k%eXcFV3V6n@eFDQxA
zE)unSNUT>q$LgBh7qYv(#}<Co78of#93No(D&(O;L2<|-qV#}qkT#;KD_@B^Uqkz4
ze`J#fE-{!{>;f<nN^sZ*4W}KnG@B2zv>~Di2N^TOm+C~gHXWey`Q9J@u%_4XWU9U*
zy}V&Q6-(JYqLAHJ_hoqn(6G?Flps%3dv2K{mR!;YKY|=y&{|ZO5l%^x28g8Ynh{X`
z<}=h}%X`)Ie)$vHGsY~uW@f}YTa6x1cZ58mvMVB%4-Lw674$?t=htz1e)|kov52Xn
zSbc}l86AwY#rt&t`U;H?D?Y1PMB*#^nA5_7sra*}Due`W#np4y*88YI-BBNY61e~H
z%Xep0?q{mepJp!{G~Y|U@?iRJ6Mv7@25>(Ocagqa+KXxkieqK(Y9j&ts(&Hy51)zt
zd1g2nCES5+VZ591^C!#So6YuLGFwg?BA!aUU$Ba8LXlz^bmbj~jr99%m9DbUWwQ2m
zT<$iw+7cw3KUiwFj#8l6Y!A6AEO%bM)UJ6GKr5t-F+A;?Eia96(_s28+J?h^6X0$`
zseL7?Tr3n(>nr^F37h=z=F9K3sio7Va;BcL)fqu=R(23EDOoppF|@&@D_zOyb4}}z
ze0PbD51MAW{ybdOC$6#018lDe#gT>;r4tBONjizmn|KuqqJ@5&WK7IX?X3Gl^q)vw
zc+r9b{Kqb7tSAR7fx-(w8YFuf^Pa-}1$~m)NtA}*U2=MhP1l7>`*-$Nw5AB|DloC!
z$DfYb(0<~FpD#=sP!nDlR|Dqb@?b(;G!=i}h{*x*<eFAXL)<GT%7wgmTne#_WuLJ?
zGT0yS$F3H-4X3ZeKR!%QO~uGmIf@&-NA47(mIEL^Xlq-laL+BzoRl-+HVQC$3h?Gv
zc!8jLQ<|EImZxC#IkEjNp@}EYQ~-6^3Qny!@l8I91NB{cqde@Ve-vY`UO|6Tns~Fx
zDjvLChsS<5z{HbVJNNaIGnQIkJ^~z{NrtJ7?lH+U4)?l8;9dQs7}lj&Cl1|n63pA-
zB?g?ylkx){HTAE{y8feF-&vARskVENs9p;2A?rIV&a!2@3lfXe=KIPQ_d%T2Nb~o+
zpK&SjSz9cBo2pWtJmQB1{>QsXI3YCU9^oZ&T>eEORs?^d?=yV}rBR*Q#ahCXQ`_3#
zyyt7$-2Kr0J%)){TKJY=?WK_W_T$)d8fw`oY*RcV+1%Ywa&GfzzuMn&=XWaH|Hy#e
z3NSNETK+7v=l(hW4J#a0h-dv4gCB~I&fPYdvE`p}Wx4xS8wKLGqQufTOA(B)5F%H^
zeSvFz9WhgI0qPP7J^7bhA#BqY>eBxmUUrExyQjuaMu|<nIg^c*pm!~7&Yx(ICXkqu
z%SCBNLBESu(hj<&&4)4k;v3SxuQ2<T?xm1D-VpyPm)<PIty=FgkiV^&@pzjm_QMFC
zN{C2%MAQP02%%XSeu2`$F4uP}e#~Q>4$<U>g;LdXUc_$ZizRg?#gT(Y+)pI2jpG*9
z?MN-sGU~L23=2|UB_dn_xI#`+Ng5EcnQCU$T=^9|^P7BIZRC@32K&fi*A{xbnX-@P
z_s~loj#A3(5PBRsk@~0bs!Olr-Hyek+za~k_fpEn&r(F&X^n1+MMdbi7mF}Ig7FI>
z6~&OjJkm4IYO2VG2-W7uAUWt$f3rsO*zf)ZUu)yLyy%Bi;!iC{R|ri`Bu585vk+i%
z{pbXMvql9gOo=Eq*Y_!cUy>(#gE>TifcGLG?5c{Hb_vvvXIIO@l^0t*eIdTsKIqEC
zK%%V&4ObGZ<oH3&?=Ori<cRO$1Zfb%yWevHBzXxWWr7(8GI{@gAhO#hQOz)7)%$oi
z`t}=nork@^YGOtW6ZnQ1XWfq<gNJj+FkY+*Kf{<SuFsT_Pxm$`=<IgwYqIG|R8iVh
zWdASVz^5v96)@!5Lr-#6rmSJ6rhO0X&qh>p;Esxwr7WP-Pdo$VZ&!XZob}xwHzgf$
zQlAZiNl%<3KaP>AUeR&7WlS%9BdR;G7x)+b<UrIllOgVvI>M3YJbY{{r)rS8@7^w`
z@goOq{w=+Vn)0Tl76~(Qfn1d55QXnr2uU&H_~FWbL4NMxNUe#z(<6y=R4&PalJ<@`
z_e1|HcZmU+oY33b0X0g4F^8=9S?cASxg4cJ<!1Wigmu>p<u@{vm35g@&i_1sR=4hE
z9C${Pj#^>K8GACWR}ANUD%|b7>^36h=2@g%-17O;`|H<(?pq9N0?6#<sGPB=g@4Hj
zu*ZBZ{KsXE2RlIT?h@i;rGBrP!C`9ps?R+9=cHOjPg7=ZW}x)NGcII`^*NJE`-vI5
z;6sr|H;!W6EDn@#`8bV#R(OOiziF}$DST5<PZUEbSL|D#3)Sa*T6+8H$*wz_zX>vo
zOpIaS(RL_u!rc|0D=SzmGqD03m8Wrr;*{iir=Vc=ABmBsle@d}_>+N*?!uHXF8Zll
z?1a~0F##P>5ylTNuo2IYav(gf4@@~6lh>*tQ=c<R?}7vS*fC%`HrPUC8^~2XBd~oD
zF*(+5tk#c09PhWGYnB5M2hwkOJ-KN9Dv<NKM83_D#;s$qOP0gI1KoP@Uob~>khz~=
z$}u%u=Y}RD&r^#N!m_Unq#s&*(5TgmWyG^8K`mb}P3V(PmO;oxX+YhHQ?mPSrN%^q
zFoEAbf=f&8hnMEe=L=S!f6mFE1}6~?p4`qmT@gg!Kk_(^rW!l3o627u(9m1kHu>ai
z-_rRmSrg1qovnFa&370d+@4`%c>#x@`%m?BI|*v4OS5Lm`|Y+|?GLtCPK`b-&6B8w
z05K!07=`F&lP?CWO9ovh7~vi=;{W=_(X?NoQHkHGbIxv*tH16WD1v272zLJ@*M_})
zUFzxP(ood25->Wkj=%3yRl=LM8zZP)N-1FsLst|8HN#+ie82}5u*otjzhT}Rl@p#J
z>XdMV)A#+_KamMv1xgp%hg{7W#Eq5W%>R+vW)S@i%D284+fM8Mdt79EdaBPr=u)5w
z6VQgjhdr2r%J6iJp{TFb31=x9@Qp0GxoR~XlD8Y++FfgTr_pnFGcS_*_5{%jg4Uzr
zkvGLL<mz|p-$%B>CW~dr2;<FFqr-}j&|;m;MN#MPad#QstG*c5Gmppc>h*V|haf7R
z>X*sWZInjlBX7s$Y0SW~!y>BCx^61+pZ{szeugxnKwo;r_-b9N3Qn2s2H#8`hUy{r
zxDT6dDuejYe^1;GcfH8A<e^07WOa9=OE(lC4XY{dm%^`k7Obc2p4WxKO3dP13TZBZ
z+Fhm?rxEmdeEpYK6`+p-^g=F@Ebh|v?QcJ{R8hAEr)`|nkzC42vf7wfFT}Ez%ssyq
zhP|k2tn^f?^83kNh)nt}4UPUYgPirO$P|oS=(i`eB+`Cw``^HS&<5fbhH+FKYK;c8
z^m_u(h*=U~w7Z?8%NZR%q{#P)C;W>~cu`-G8BS6cK286Z(hTwab36~UB8Q1S@4-bF
z#NU&x`c1M~0D56HP&_(r_II<?x3*NNYq#%n*gs*ioNtdtyI-eXN!MR-*dO3J{}koA
zuml*cu-G8ZMj-`zF0a?pFhk?|p0}B!n%^(4&v)D;*vh4OhD{XFvkI>kD#dbkmHIRp
zrgC1wQ6skeB3$HVh3PPZKmC1mj}vP{?t0V?lw4?R-?i+!8`!oPGicr~!s~vks)89N
z!0T!%JP^DyUC>OswD9`+-sVO3CF}1$$pc}2)p{axYJTm;Hf?(h25gXqIEJDJJ3d2O
zJQ_yAOV6r!yCk|%mp7VDp{z!sg`(Nt=noOHS_Be25EMl<VtN@~7s9UsTC*+uy6<go
z+oqS?5Qv(7!7oNTLHh3H(Im7Yjj!x4Zfs4yP8<_K-P+XBdE0A7ZQq*bs$6_}KEj4U
zjE5FFl$JUk^gEAb*4CO<9*r(pREri7hvRWuRWjzKpj5je`KakhqO;a?t9o#Zj)qKn
zfD_>93Vma)ZnHeZj(oLfIy9ldihj#VW}T*Kg&?`jS{{Dv!QU=Tsn_@1|0NTo>#B=7
z(Jz+cN&DQd>9_?Qr!SXr`eeS<tIw4U{sIm2AANdaq{k;t7TXy$9Vk<8lq=fNgNr=@
z(4=CNsK4qr$Ula=lEy$?9Bh%_55n4P+o(s^>)@3U5(`0OdSN;X-7r)o1GUCw98UK<
z!NibjvBjvxsVV#gvEjH&Li{F$L0bZR^a3x&?)%`Qhw_V^Ae%0{<UR)<c&QoBLS9V#
zbY(~+B+vY5)?^Lw+R8k^)ksKza}-hOAbst&B2)UR`sKfI_-0l#H9u*TXUQCa#Bj(n
z=cwZrpyBWU!i|G7?>X5DG+~Ah^OmBIad(a&XDEckIYu!PIMs$Yvs3;_1KuYhcwYhM
z?qKxG*OGioaTKns*^6|Jco#A$5Ab>n?!=olT-QcTv!JU2c-DU4nVdP84S!`xZ$r_B
z1J^ZNMTlqnbWwBH=slY5VPz99(gvSSY0i)Wv-%`8lV>$Uc=3lXiQB@!sLxLi{9@v4
zuotW8Z99~Z1yWZrdRsvhVFy?K`M0Nt9;y(nQrT79qsw=Oj={in7{<~3$?#1EqeYVQ
z`aAd;(LS83=oC%0c%(Eb7uWRUzC!hytMD<VRIqISuqxam@7|`w^F;VK_^aDwSS!u<
zr|46aZe=2qMx2HVk>Rc=vy*3WBG^FTJ+-n?fcS~)Bv*=$#e#VRs%VvLs+P4v6ZGmb
z!v%!`O!Xw@%O{G+!27`QcAOrrC;nF0cp~n~XQ=ZP?iwe9gm>2BFAB)>=;}3;20(Cw
z&oGoM-T!<xXO1mi4bT@bCluC((wp+@{wTUM<Y;#AltRbIhsZyO(Dn<;wGXIw&a*O?
z?+9qv%xz7YMel>VKhZ7?>9%5S6Qss_Fk8<4$N;VdnJi?yRh8h>(>U*5-FcoxXaV7}
zUy`*Ak+@3(8&lca(CQgYKtmXzVSZw~(A9jZV-A$V>rN-vPgb7tv%FG)Glh2LJXj%`
zMXU5vD*0tuHBJ|Xw_E~R0QLXZ093#6KpcH<n>6+qFRP)=f<}FeXdxHZoz9?K0RE;v
zv3=6&oTvFUh#^3vFvr|af|y(GpvtO|tJP7V_MD6}B+2zfxNl_7i*0phh5cwmzJq1(
z_QmhpxX%@7f+=CeX)Yv0Pf$Znerf4V(QYny-z^OogP*)NRk>?E;%cR+jvZj(Jb=)&
zr`5-nWq6vX8oX#z>6g(ADr>NOBkVxsu_06abx8MmpGa0JxBblr@ADSnDV++Abya8o
z`I=!rW&L0}8d)jO<4?gM4dstn)%q77nmg-p#=g$#%9;Qcu+P&}rlVOfsM~D`m@|c5
zS9leB21U&h9hg$%U@r``vN#8jIs)kK4iMd}R|&Qv&F&6(s)oroeGe4aI9fZo5y$+>
zbGaJW7k})@ljL(Y9h{{r60sTcG&q;O&P0t$6=L7^IlCS=#hm!DSwBM>MY7R^5Ts*t
zDxju)lvWokAk4J#_OGxR^wlDCu%|T|HV)qt?H(U!iYwWNT5~0nh}Dcq{)!*$c}2YQ
zTM1?06>*RmZ2j;0zNHu7+8V7ILW}cNq|gN*mDcXfi>L|D@;nzmwk2Gv79ZX(fDuG!
zK>p*Z!3gsG=n8lm-7arIOR(~8R;h|ZchxL5^BZokT!AwY(^l!IU-txWQ=E@qxwRai
zJdn2B3_+gWI$Z{BL@D*KnPLXMhQ4VOPHADmk!M&3;rBw#_wi_CZVvdjY$>kM*?-v!
zg+duVg;r3iA1ol8wOzKEcI`z=a#Z_WKwo+QZzq0Uedf{?UKwtL3mtfMPr{c*9Q-OS
z9|NjRg_HlgP*A?&&+Z1|tUs1p&X@pHcjl@FKML**Wq>$s*XV|J0u$xcbGw+Y&{?N`
zbi;{kKFPL%9#LaL7Y3-jv1@AB%~ML8j(NVmH&wJ;U2MU<46QLS@WWPtZY}X8SdB&Z
z-02IXv6m}3Y$Yg~F5U2(cEt*NX-5f%wyIK%2WX67Y(6zTS#5BjH7*I29Qf37G#5~?
zq!GxN^qjG;HI3I)P6S6UsQ;b*cdpVyj#wWW+}L?`k2h6BTsMz!++2tsqO_mU&D=)Z
zjLMrLw&^ISy9zunD30xL)}A)VaPlws&V{h%N<TzZ#(PT9^ibjmix#&18Z+RE8{K~;
zM<<r?6tJXK&T?~pz_gMBfrrhnQ$%(~>sdbL&aa&H=#R71LTPG45!o{XI~z{C1OG}W
zzqSexa8Hj{>PzpWV-4*{Hv`Uvb8^y~Dh4iwq*r*LjE6m5A*_9IN-iw<6u-#J+5Ilt
zuSn9Cu6$pAImNbB;{pDm1n8|eV*dISk#q9Un1N6(B`LI+n$h`dOA4h`8_}Y81`*|2
zonOgpQ<B@hQOTf9v2e|*6u!WVp#H-#U-Fb+%(yusat}|jqKmz`sl`{`Jvb*A(X2~x
z4w;YnJ1Ar}-zGC;!c{ZeFqT<32_WRuC1Bhl!cTS#ngn_alQsW)$>(z=7YnA+E6mrR
zbH(d<j&i%BB;qP6(54ZB7CR=t5Wpoz0~spPt8B?fx|wjS(LnRYb0yUDGX|YV<*eW0
zYt^{!_PmxyLiE*}w6#7G=YID8d2!l^r}%(zE5!;u62>w!bnyQ0=0?B#RW8P`g6fVR
zykK2(mOQps@OZJe8CcvGX;V_yZ8^Kw9a{YM-&!T}Vbg#Z>DEntZ7Zbs8N;|5z(mvj
zi?ULmR;(yJj^ykkHyNd(97XZg8y~=#diUIe4O=6cl{`GadXJb-=vO_5fh4?6UF1tS
zVh?xwVDLE)=MQT}t}0esPkZN*;5VOJ690x5lD2K~inaOx-00U1z)PQ5TCGm!KJ1Nh
z)vt6!<Us^qej8*r{#!krJ!X)Wo(yI6A|yK}KJOcWOJu1j=^o~YuSNqkI=Y%4JjzeI
zejQ%$b7kQikh-uB(;rvKuHoJ8Yt=P`mdcbpm3+YfHen@#wMuDa$8zb0@pE+of)D5T
zmbEG0{1Me{-$mg6_fNYo)$fyf{wmllGc6`SIH<Lc?o-?H5WHDP?fJ+*znb?=X|An^
zzrRyi`Q~;nM-V3p^r+#GS}++7n@BHL!kDi#nfOffqcai#Pd)DK(6=EK?P{WzC9A`k
zCy^~Ii7uVls22gB$9recZLY(rSMxGzC3Uzv8ERGf6|LQ9VNY_yZ?9e*F|6|ff}%#d
z=m<jG9rV=HK68CHUB<ZRJ}cbM2v&&wb*ueLYN&>ZUSl_f@BJKe_abCz+|G<UJj}n^
zU}GFqd%^uXG=~wRR{ZgV^vE6mpZeB|0OcrsSdO^!=g8V}rIg6(`FmO^NG^Bsi#4o+
zHuRN;g>XOS?R0;(=JxdXg;>Kzi9Xe#VbL3y;a_N@+a1ORgzM=fWzG2m#OM-9LM`Ku
z_GJqbwVy+`Tj6Iv#K<@lrj@ydO*lt*CX_Lr*gt0y{_G>DfGW_ADIzWBUi3#wco^%a
zgo8_U3+yqQUc%>DW}nch?Mj3AjIO%Rkj4kbhub~0Dr;F2`^~KCN|bvJBCXa$#>&Op
z3N2xNZ5vIQNiI=^Rhd95i%<U{bALYPG5j-uCx3YIPC_1t{sV+DzIvtM0$SWC22_0t
zIRrDRWEJZ;&>E^ye*Mc38@ZM%-fvQ*($Pa2pdbCAqa6&DzMR|e5?b%vqaQ!UE654|
z<9){S3xL{rS?kT@SKXV#D0t0T>LdXRdVEt{HT!RCf}MKCL#_I&BrCJ=12%HiC!hFs
z?8$p_cLzFq4@c?3cNzoO$7RjYCF^E%yy_uI6D%J1QyLG?r#zwkNfa$o5A@q^S?XIJ
zhew~(r>&l^U10`&1OxQDerx(z%&`f~UX57oinYIF`(65Wdr0vw{bC6P0_GFwWbmQl
z7n<+X*EO(|_PovPGZo8eT9}WfbE2ZBHbl?IIBciN^Zr!o^h+Ot>q3M1t5^~DGVao(
zcybLM9qMg>7pv_HQ?|g1AIfycm3G3=@~_pO{{?M7liy`en+)%fAePf<VJ-;Q?V-lP
z5uZEr9%p2Sx5Wh>g7=n~IZ#ov*{3PjjX|?VXCz_zK2}3ufSR|qBSGWlRw*;CW~L6H
z(SI-r+8w_M)?&f8JgTa>^7wmlR<sNnLml!V>`4|h+@hh6BR}9XJqmT1pkG<U=XJiI
z$u?W1<gLDw%$AvBW+c5bsQT<vShe1@CetAhvla4UPW=>ynwzX%pO)dn#BeV$G|`>u
zjeZ#o;j3MJrcnD+&yd>iPM5!}k{Qu6q_#F1OlkBWATyqiPaTqNCXk?p(lxPj;2Ctx
z5i^p&DC?~~pk!{}tLYgU!E0uE;Wb`DWFj3;pqfEZ(=YLeFMk_ke&EAkK4%<CE={>5
zr}w46mGe5P*XgqLlrN_chlbU@+7e_R>L{QtJsH!@(yWl|YrTS1a=zb>HEUg(3OJHe
ze*40eqrcaD+BM=U3+B&e!~+v<qxq6#$~#rh{_cwemZ6U@u3dBx4-<W|n6*}Wtv?~<
z@tPFy0{gG1_-Rwbp%GtTK^mbMxSln&4t-|MR^%Azg5Ne?;Ru88o9Dn;Y$X#+lVdjc
zHYM1=p|~ofKMhc;>u}fB5<+vuJJeBk;OU~%{*mI&ToexqE$7-H$pHC^)|u;Qu<Cy~
z&yg?O!R)?gJUZx3k=iq(%Q713z4{-2wl5WRLJ3q)iwM81ob{TE?`ihco4)<@(@Qx(
z_3FW?shV@GqOD>hI!w0qN2e%e&tI50`#wqIMhzO3B~AUQUJaFpu~*}K%`;C<OTiyU
z#cd%YUa)&3eC+f{d+#WAi?z(kz<ZT}0dY(~QRebXQpHD?y*f3mn-mIHGn>Bt<pQV}
zO*#Ng0+)0R@=v9izkb(U8~xFVLY$7gP!5=)Ow9CCMn_|ua9(dx%-el0N%eNsxtwQi
zuu&{V<h#Q-iT$U`BJS_`woR3Gj3m|Ych=uYEq_qPZ>Uu0mjUE!YqIoyiUxFhR5GNF
zj>Ps?j0>rucxph<T>?IgSiwXEMH)<s&b<t<A&U>LvbyGSrf>Kiil>|-mc(NMkPXS$
z{re<F<4)E7xIPiORWmBg0@T0kxT8iTL(rBOH=);Nvrx7i2&h=?4zx<rRQ}Al_Dd`u
zC{;D@1OmTVLySCZ97w6(#F6VE7nva9HD71-`QZF<IeEvQd=e~+|M*?DV=Rvbn7(&B
zN$gxxE4RdxtyMLUkA~*{ae3PV-&d{OdgwNON^SU{7{@p45>>i}Ibp`X)2{11grLah
z=YlLwCHuDY_IVV^jOf~1^LS*8XdpWQXekD5;PzdCD@)MB?(X9;s>sE@q&sTc9qc(p
z19L`;AFh-1<u_;bogD3Tpf$y7)p-+HTitn=vIM^0aw#CX7|$}=Wu}}N^KPLc&axDM
zOzz(l7}~dWw6Q{u{l<X}_U8(LuU&ysh>~A}UcC6K0&fvuJk-F?UQxBpaR4wrzw1{<
zKR4U-hEY3r=c8D9NeMI_)VauF<iQoe>#8U(mwIh=0HcO&&KV^r>+fBB={M(uC_e9X
zj@YdpDgvFE(x_>qeDD<-RK-;-o+5z@ak$cZyG?>GuXT5?jP`FG4x`==%G$VzLk*fR
z?!lSe4-K%F!NlR3<tJKD^dvP;Fa=}=KF|Q@eoZ^(85Jg|&yet7w*9OxCN>YRr#siN
zivr@|+$#(8qm5B_WZ!>$*ue@hp2anIBOHv!H7SL6^S<0xb>#gD`afwf5EMQ7jXA9p
zOuhRyx|FE;yBC0QY-!RXIc%PO>TnJa|4pg9kfJA1R?GK`3Ot25|A#AnN~OqWPW(0X
zy9g!pT5_LmdSiKso_uT=%=t~S^3o!6{+25Knwof6YH4=_u|d5OT=?*s^|h+_m5|yi
zCxUX##^_fsKRYMKG&ROKr>+3ZAmT5KA!tTogJTF>^YEJQwUyJC6LqD*9fTe3d7rMm
z+~ZrB+)9(U(s}399?IWhG1B~{N*QV0moPN$=qh6SHb;Z`S=uWr(5OmN<DU`G2or!2
z<|_b&3lsac!q8@ii};Xl48D@=rH(>049TyEyFgG!25fvcA0_;{ze>6}Q?C>%6!Y{i
zm$TUAN>pic#HfV_{wl;_m-BlgX!yFR1qFhUQ9qw3Rqy6<W{7!erHsDB9O2>nJAPqN
z?q@*kIzPqlRp*k!mvvL8I#z?z<?pCqRY>GhBcOJpTnCR5lp}ggb?#9K^`I0fRFz^1
z*j<KfVKqa|`F|P(u}v(b#t+vG7t;s+#<M?#;b&dxp_qW^Btj{ABJ%>BEo~L_Eof3y
znAieho2p6a_w4e98lujS+%*oUR;y6u_yJ}7A-?pDozd&R*Ae9|hbSc&v2Sm3smAB(
zNe95;r=?IzoGQJVDj+(Cu#@V_C~36k34xrNOTMNayHMsZb<ZXclo0Z72ZB~h?)wFB
zR<9^lR+42bed_K>Mi!_*j42B~RY4C>@9xKzswy0MbG^<;6TPZrFBQsWOn4=P@nSkY
zbzpo?LtLnHA(v3vhE=9SD4TxIWd+a=Pw=NGuEvf&Dgv;teYgI4%~EFstQ6(zQk($z
z8#BzT#?M}DMF{SB5))BL5TVkqjo8=1PktA1XA@YFHtTE%|M4W>iShNW-rE<{#PTW)
z{c5Px)?tqA+cy*MxY>VbALf`pZoj5U$wA_NMaz|NI`hP+-wVc+HZxUE&5rVc3UaEW
zUwy0jVzF(mx<)&6fBJ4#qkM1yG{XzXSFz23@L@RO@>gS_RW~jP_kikya?TF+(l8<a
zP~equnrdAlF5SG`JP=eeEKraMcNS>-GaL=|bx9c?lPu9-u8V)gia8^d8gyl>S0FA_
zyU<cX3sYAzq(IkaYS#15`TV2>o1c;6$k%+V8@nd=|8^RMC#M@-6ou=Ameb{MCW~>w
z1`1KzGzd3cd1?(4Se>8Bt3aCa$@;ig?_ih{GAW1?<FN&GwaNvl3Oa!JLhG|n+oC}c
zrp0?Ty7i0Sc2E4Qd{Wq5jkT^6WEjF&$4eZPItN<&f0tFc&&Og4jIjTnC-vT+Rxs0$
z<VL{;#FUYK7I>IrN}KvqGzH8IdFGN&$OkVO*1C1w>~wury{cHX(fMw`8MT+*xT%;d
zP=|MJsd3jIB~JS80}t0eRX(>kIe`#LWZ{26aaW$dt%)%)D9=cvF*?ktQnYMnjP9D~
zl8M-<I!hZCo>t21lA{O&Wer>CqN+p1Ymkvp+{Dhj#Sk_Ep(z`Dd$<kY^5Sa@>`OW7
zUIiYQzhj8s2ff&yW?Me{NAfq#>eyag0-yr69^PLJRMsnMaTa{w=0jfsMt-FzMak4)
zych~Mbr>hCSqb!Cx@5QkTjL$2Wh#k@F%d#Z+{Q+{)H{9ll3bdh&7efr-V&p4dJF_+
z_4dwjp=GZEamaoG3(G3gV!N3klg{LkU~0Z1^~^9UDizRu6t}UfY+>n_u|87atqNBu
zNO`1lU*jgc^cbHF_SS$7V()_7^-it;VSE9M*jIy4bPQ-*N>~SeXqjUXH$9RtL29<|
z^t|q@@ii6rE;r!k6XLeNt21^+7OBv$H!iQh-l^#zj4q)2)ou_qByFBqmuqI3%IJ8d
z>-fg#Ph@e2$;%3VRiBjD8TnDFo%??um-$XxE&mN%{lHh6#QDYc=Q@1PwbC&^H9_Np
zMx0Ug8zZ6u3vJEhpWjs9|Dz!k+%if{b`X8>)n?X&^RarWz})upooY<2-*Z2=+PwU{
z>%05C@V$tF!2GS?lI!60z1tg;5q!i!@g-HAdx^|gjD{2S9Drg_p?eOlGNm`&7scU2
z%^x=L=Is`t_fmnt)|3ZH>GD^<_rre7e4c~ZX}vwpmtL|RjW@fQRpL5cDR@N}vJIOO
zh_BptL&kd%H?su>@1>s-FBG<<#qJX^-4w^lP|>hD@`a@k3to#-pBp@4?n%#%IL0k?
zqhvWwpa&Hm1yD3>eQ;*REZn-pUkWXa{l|DHjo6=rcT&;_IXu_GM@LZAnP!vzcq+5(
z#Da!5IHC0wbRcV+#g&j|Ti(xeaM?}xh8v@>A_L936CZUuzDOLn7r!(*PN&_so`g*7
z+}P~PZW25<GqO~VaKy-H4$cL)rB1o#<8OWD$oGX%<PA7D1n;e`)9r6Q%y*7?7swfF
zw2jQad06>BMgsG^=P+$p%zhilOwS2HKl7%OaIl5+C&i-<^agRuxAF)xorx;$V5_5~
z73TZrI4KwS#}!0mZM=_Z#GG3#5N03W&=cDT;tAl1yiPU#nHC_`x!d7c<sV+~iwJ|+
z&7hD2%{^NBA_>CaBjT;q>}i-&iK|3Gsf4R4q)kjp*2E-MG7B*>EQ$`if}V!cor-LW
zxJnii3AuN7bx#=Giby1UNyyqb2x(MjO|Hx5m}6BX*;hs$#R!#3esY>x``iUo&OM@?
zl?XU?dM=0GBfY8#yQ8782nNkn(pGyX=b}UbgN>w3jDvYuFAJ=@dd)$&ehO#SZhYIn
znu-WO7|Ci(Ba-m%Gk$G{_;+|gML5MoBB}aQ_YUHx1E<ZcDBhy0+}W+u!fuh0&5kEm
zzAP#J<ow!|K8~gOGj_4hg<g>`*wDY~c>2<t%2qKh2Mt&JSPDJ1V{|YuN92#dml+8<
zb6aBN9z71_d+9B21M_vMKhmq&vtk?xmEbR$LaP&bTj10!uTc%+Co-=-S(>G1bPIJu
zbiW?$WXmp#wArsu#Sw8;e0HLMr<5c}E!|mQt0s7bHqkAe7y%9Y(eXQoWU(sMKopx-
zJHp|I1c}TR>O@O(2*$c?-RkY)@k(?0G>x@uv8-M$IR8~5#rb$q%e^ph#rx9d@?WCl
zi&UfUvXB~619k=to@pAQBn)PuGb(wskNJEZL{$!LsgK9|QVBzG3^N97=If8+`LD$=
z8lI`D;9nGa?-T+gqP5pF%Zt+Z6E2phCn;32Gm{uXCa1ko78nAzr~1OWBk#LIT$)ZS
z;T1P=?*C6Q-}%ml1GOEyDj|qnDnTV}jo5oe?X7CmN=xlgvo&fI5mnM!rS=G|DveQU
zi#>~~A5p9JE+sWzpPu*m51#Yo+~>N^IiK(AjJru|+oa^2HfwQpYhiY#X5DXRJR4zV
zEZkZ5$F(NylZlW*Vv@87#r?(BVvN@LTC|s)R_9QnmNdt%^P|+qh1@^yK&n5?I5~(g
zxPE<6)VTDZYGE=bZes_Jx&KU|z1zNU|5icc*Hi42_%A$*>1>ic*6K%m6(I^3MQ5tH
z8|#U=1ZjZYL8>dIrluw0+EnezhI8to|NiyAcf-B67!!ET&R{#>2tON-<u1H;*?U43
zDdKW(Oop+i(}a51wV8wnFiUHJ@~nxC&r}-WjM81L2FwfxK~Y1?5`yW$n)yMpB8TE-
z&d0n7YB?Du#Qv3z9U~{#vs^4yZ43VsX{MTgKL(gOqiB5!UgiXk%c^b{O^AZ(>R%Ns
zyt@%UU895y|HE@>cewOfvF?+#gip}XCC{7aX(GuEMNdddX2htMSJvMxy|GqrHDyn$
z>HMSIwdq$P+^OyfTGB$#&XE3)f9vyo3eBzq3l?tte=%LD;-{689}+`xW^e27z}gsq
zIiPh@SGk|DmqjmUv~~B~WY;<fjqN>wH%sD}nCVZ%Q!VWm?@^UR=*RCzoSumkjVP`b
zdgPrIr?Bs9!t`=3{OI*RH6dwBatkbEDVd?k(Av90NhkiG)9B&Fb58?B3q85hAK^8T
zv$GUL<43VK8!0fhI^|!wlQ6ze%`N;OWWspt>v915?yE=O{8<4S;5S{sB1ct!-7kRA
zq1o-(m%U&DuE6qexNFEyy!uJ2nOeMckc9hpH<?aP50=RC3U9+Z07*Dokg$LTNu3qa
zqS_)Hy&1NCXczE)%W7ihk4D@N2q4C4ya-@aWI+~&Y3V_Ss-La!b}|JEsP((aHXpL`
zmce<||IQG7xoPLaCu=@~z|A>k-7~DrOEg)obN$EuH=6|xHmV;9KUO(BtMEBkH#xnR
zuQ$OQe#*<6d|TVgksOju(WeFUMMTOXoK;Z2*EEqis~Q$^hbzVm*8POD?@OiyGcs{Q
z>;Nh**XxnOaOXII=s|quwq>e*L=EP?%38uxszgrFIjXObQNIAbJY7C%Jj}l-v3)AO
z1%pDi)|%hvicD85;|3G}ot$el04B3D39xRVrKv&M97RNBXcO?z9(G1z;JkJEQ0)P2
zBS=lO>xni4D%AsC+Q{Xcixy$8f9a6N5~s@q_{cdg2hc~TF!6sO`V?fknoE-HI&GSl
zqvu|5-eLuuB}p$+$VD%jhrnTjvk=x<%GS3>grNG)-DLZ?9u5G@<d?=b6aWc?$_Q+%
zW>z0*XnH;Dp@RgbV|ed0)#<51WJGMmiVPsZ7G9#H4ED<{&U9fv8+JCijGIdXzWrPX
z0Fs8U|C%w`P{EGaVwAMgO$MKW&QzY52*tOrnuv7@GL$f$CdWr4(iKj)2|@DA!BO@_
znI*zu)1jQC5VDAKW{6mn@##l`!%)Mv968`LiO%$}y|`Ln%qOog273Sh<Ar^Bn5imO
z_xkJ}*MP!ctb=H0m%o5JcU4m0j8cnqKe1F4-RsFW$L)+Z=Rn>V)<k9LBYVuq%0miU
z(R16tya$Q}dS}Y96>pFC)5{iH&>Wf_ry=?leh$@%rMBz$P}~N{9^t+0u13L*)!T93
ze`%i-7~pv(tG%@znV9b;0iz0$W#z~BvP5{9-TAs8g!yCX%`sk;B2N2F`*67bm?T59
z(zTImsZT)>=wJO}rFNtnB?{*nozL#&r+VzM9#}>ow-;C7Kh`<2JOZU)6YCK3Cc4&V
z75c*DSEb6NShH~Us=?ClaA`-?q#zExzt(LM+4qVjBG09Mq+zTa%m!2FS|3=`83V(*
z$Jzfp1PqHgmLN<4JNfPZJ9szQ14D!GnNG@Qd``R(adUHS3{({FZ3f->XjAqWlBB_H
z<y{pkP5}DWQPdK+;h{eK)*i8Q_3q@tGjg+`A{nAK=3=?3Or=H(`iqDx9;z4)rHuq;
zt!B7j99PW;#jmLh9Z7sWm|vPUQ2ff+COCPR!?3nif~%wwPmm5@rBrzCmc_%|M;d_N
z`pOz1CRrvjv~Zw3-N78`K}B^)w<nzxKs`U*1~{h(GbDH#siD4QqNBU^Hmy4xZ?)}u
zPpeZz+5@HN+Zd!w{s-ybf@NRr@TisNGY0r&x;uMn-vm|Bw*3c8WtflPb_GQexZoUZ
z=Td#?>=<7G#H~!qR+&w!kBiVf#q7E&V4Du@bKW*ysZj}l0M}X|Ab3<z7CP3zZmQwq
zqe#xFO0I2Sb6y!|ucP2>Q~M8)TNw2}NIoJ#o2ZzGj>en15bgQk12nA%ZcM*c)HEol
ziYYP;sh(w1(bE7^XdPvSkc^Be+VstDSWQ-lLqHP=KIb=+-*1^w3_dper>pi*B`Ni~
z<1LSVW6H%pZrIvt-$*EgwZcH{9iyam=N}4qhW@u+iqW3~+_xw=?`bXr);66%Zvns}
zdC?ew!IDhJEQV#;!Ksn!4yD=!B)RGCN*Ms(qrf>KK&GbVwma24((>4jGE!cu>#}g+
z+Bw1{1f2FpTZMc=dPcxM{7YxSZEtXz3FKe#vb3I|X#;S3N<?PXTRVGk0H|DFCoX^q
z@T-zQxnNbV;(058DHB^YiF5>DNgs2h>7m3tFT*Ua)X}9>rIwO^f#T&RHIbbYA=Lin
zNH6C=3BA7|?yP;$@5=Yy>2-cGx>wF;>;<zHmt<2hcYE!>z$s>CP+ctR{$nR_dME?2
zr@!;xFHl|?0vIJ`KA%A%H1nvKn!CPMlGDahVi8zA_arLf!{)Rj!U?Cv&lQn4;>IHr
zyX<;b#@#;Ol)G5nh&&RTw4lSctU3#&5|P`)S2M$4MD7?n8@k&IuWKLwR?w#?v+LXZ
zj`^Dfj+s!BZEVe_aKh&`F1iQ!g%Phu*S536wMOK=Du7;i^9-2<KyC=dpg+vD<Xr9-
z)^^pXiWx4Hl;^%A5GxBYsROFijFMQG*^Z1{(xyKaGuKTmH|%)joqhAUAUHGq!g;lv
zBQsR5x^M9*9QK~}3D&`wx#y1D4aPuvtsA@Ea%r2ASUFN0wcO-BA69NA*0*XEzUcZ)
zRL<(#9AeQix5c-H2fpZd8BNd<DZo7P@?eNpY}aJQ>%}iEkB&9XDJwcn$ge&;tbZYf
z$5g8Xw(r~c6a<F9I4>xhSogUs!uTEC1htpcd=Tn1eY@F_20`}6fZL>#(=EiI*Xc0d
z>M^i5t84(`$43l%%?0(uhH<MI@me{!^{&l`EaKYY-hGH$V?Dof)+OrWzZSOsuH19-
zHwKR3XImAVshd@CFvHq!lEtKTdz%5V_<}*`C8_V}%$J#bgJfQaTOm-VWYrCk3*GZK
zoa%C~OZIQyRl-UQad_*LOty~c@x?k29&pY7<0LB^<4UK3rHZo{T%p--=2?#sOya_{
zDhNgR81=E5dq~WrpYmC*vj|_z+*RKuHop{Zg{|WIo<59u0h1e)<QkF|uKTt;J<GhF
zO_%we+mWP4ttg|)WvR|1Wm@{*Ct@OKaM&$z%;th*DlDm{PX0H*?r4<dh}iLjD~8Oc
zGISk22LI)hV)IZ_Ka(l168M23Or=PtNC{M)w5e&+PS|U}s@s9`ZeXRlv)EH?0!iu&
znbdi@zzqsANfUQ(4;V-7hY*=}AuDy}+eeOoARng*ZbOZ{HD%iT>djqy-`G@)CCcy%
zl2K^&T(MiA?Q40(7e8BV)dsA80a+%Xwp>9>ZL5s5flOgLC04_Ar<ai%Z+bpojiHWX
zCZI`9#}Z+pE+!dmt3ueWt!72$s6x^6ca{?LX7~r3-iZt2buZOZYhp*x*xIl#LHD<Z
zH5uvEa<pdnNma=~Eb9UxQhhMqcz^|)7IG7#0WLZkg<TI-XGCM-on$CgIFK0Jo_ro!
zNGJpLwZ+yA^izY;U7~Y~jr=v^i)EtS-m@HbGxER9WYyE1+X@-0Fbns<U$Y|yFZLG(
z8uQ0)){k9x`NmJjMo3w>KgzD6sb`gVF5HgqRI%wMC9*F3^cb^Lm;jZDdm7OXgsY0O
zFJD;n?w!{17V|akxP;77wc1)IZq6SE+jJ#&nwH!TLguV#rEVhQe|%D6SQdRU^=u?^
zVt_O5XQk%+(g_FC9{7w=EMKcB1H(N`GF-LJ!ALwhl58V<hacST+(zmsH+S!4VI}IH
zTWj{!!VhFb7FEB)+5Efh%=sGX?u4Ce<uARbQT>S$W7@N4AeU@C4hiR>E64x-3;cXw
z>e8lRDR~)^+VF;b|Nf20Df*c;+0SBnIm-o|O^FikDu%R8_r66r-S?F${zaQEUJ-Q8
z>`dZls?LZwox8cN@$MqFChn{gP;-i9Q<BY}2oK1-*yFM6usP?A7>aO~v!im0yb@E|
zOje71Y5uu)u<5A|gT-3yJ9Z?q+5lU{3Ois(_Pgny`HZHt+5^UzD{@jK%MV((NLi>Y
zpo^AsVh}-V!y;v^?E1ifrFHm&_FW3vgCrgmUS(jmbYBXs+c86@$IphcADJ39T^4{C
z>v37{{6HjcaWPvM<A0s`qS14BU`BX26eRUE(<yz1olb5`#HL3FAjvg90=Uqp`^O#e
zQ{wAo$8J#EK!{Gv?6B`ZYdx>~8d--zq*xMMA5W1B*aPtX_9KV)&SPymS0QnI0Xm%x
zb5Ew&n&nFc`U6{@2GM^avNGK0Q}d^IRTT3Olt+e5E}+RZE+G|q(NY@y_iWnJM@m(X
zNrz2dHCbVRa4uJ5Wa1is=e$2;^QrJzkob-3$?;NpmoPovEDCM$(NI7oKISlf1U$Ly
zuxC5q`;~i4r`}}4mm1t0L%~OxqD3dqry^jL;kIYnE*?TNW>v|RIxkAGCqV@SR7EmA
zy&iT#5KZpfeUjzl=C4yEB#Nj0D-qdZKPi4wZH7fb=XMz56FcvyWDhaJdcvJz`o>Em
zdY1<tfDuAtc=#1lHhL-$Rv7$+@kz(3c-F8#W3leVVhQyDAd>vqs>`1yk|+}J=E=hG
z?U)%}x;#m@#!!C405PG=Svx>YX4mylQH}B!qo$T^K2kB+^sRJmb=KZGtPOKl9lVtE
zk{;^hoxKP~mHRgbKzxMBL?5&XzRic;@aU05ai7hnQtAU2N%D={=YQ9rL-Uer!3u-a
zWV;^6U-1sXS)RdS7>eh+1=NIm5qHkoWTS&-1{FWms-W1Oj$LThKq!<5UJXUGdvfu_
z>S+(=Q-NaUzJIg+SiPrzlCzQpME2UH&RdeswaLW1<EIok@DZBU8kWgLuGEH%mFMFi
zB*ufgM0AE@_?#RMQ~03;KgeiSYSR=Y2a4vGw|G$?4bC*M)CacL``_2RmfmjWb|&4t
z`brFp<1FjEhozPrNRmjf4z=o1EV|P_t6{#)13+4|QeIW?->zx7czb?moArZ=EiPl!
zq6kXMvs|JhE?c1I`FVVNcs=jcZTwC_`4|4UY!ohkCkR?LL7BB7B1`nGbc4{lKWCU2
z4#&rro|MuEQll^Raru+EQPTncGFPUj=vi1kJungc8hpZUa*971f7p7HiXJB*Yc43a
zdp0nguSX!1?&ABfaT*#c#AZl&;_4=1Y52zI@ymh?m*&=t(u3DgFGuBtuEqrkDJhLv
zu=KxJ1{RxSGh(4iLd?s|Q)#T#Sg;5b%5lJ_b$1Pa1ZEYyn~z!cTxUdT&D?~ek>5_#
z44zIYV6FNu#-XM1&v~@&7XPNiBp8tlnFsdl>5)H1!y(mJ15Dq&G!r5>UtFf>tS0lF
zkYO6+9GgA%<y@k-j@)At!7Ue*X2+5@_T_)J$Q0jq2Dqw|DlWk=zET~|W$E~rxJ@qX
z%c0eTl&Yty+Borlx4BqcD)Dd@_Cy=?j$!Fom{S!$J({9Y7=do2(FN=KD(f=8T^7=~
z+wqrL%RpL{8O>GciOpOiu!9-=l<zT*hou6l(+#khkAswm?v;Pdh`@0)|D@!kCT=vF
z8&qAGh=sGb8#nS#N;Rdx3esq*E1>@%^w3>uOe|<h7ng!)phUYh%a{nFj_j^ge`TCA
z6%-6&jJC4>c$F4q*rV>r?@g-(JibzN5kW1R5FH&#)V5%6VR2b$fa>IdL<IUh$0Por
zKN-ppB<7fpgJ}QUCm#bnN{*W{iWh<)+m717Jns99T3Mcf!59%OWnJ8@6D1n-11>(S
zRF}s-_*5ZSOpALcdpUZ_Iu8VKD~{IZm-%_bik0dY6V~t)JJH2Tb*yefagLtMTHG6|
z`zgKRzLHwp#e%FXNClBn9V*Y8*Aw_fT+E7prSs7zz$;&&u@fWNB2b*m-e*X8{Gx#l
z^#)m9i_!g{JOu;E(Za=K{^VmRzwlww+L#}D9fhjQRW%VTJCo8u>F4U=_*-@v69U#l
z5oXyWYMtMkwXa}wQ-Me#vrQ8U2XF|EmD4)m!&)p2y^fXBPWC~VxoygWwG&1PbQ+8m
zHQujOI3UbEgrFhBXVcA^%#~{leu6)zlp**5FGjx)e2MVab@FVBj^A1J;lqFJLotNE
z4u*bZ(Ll_Skn&QA-1jGTP|Ei$xr=f%@4PW&!Q~Ld@SC3?7@LuUv0qBGfh_8SpmQkP
z2p0@NxpRNTE?x_joCVXTX4+{agzfTD;HGa}N(*(Ir!(UC3nhchVVSb^BB<!o&eK#(
z?ZybW+;-YU4|TiWofa44c2JnX@=Rru9(N+=1QqJ=9PrgFjv%eiz?qBX@F3L2XT!R9
z7KF+s2p6}0%q9f$)C*QGE+DPjBI+Kz&!NV3>+~TCre;X?V7CfB0z&4fRSF~3HCh76
zp3dcBz?CNOeS3%2)ROmtjs<-Ba%8&Yvhy8`>^Ai=^K{+^V>nlflM!{*-kuN?P&xqF
z#a{QgTb<}yS#uvUFfgL`QU^|aHH)gQIhRL(>C;w%FN~@y7T>=H)0Yqjb0GSE40dU8
zCi;UU-Rc`7hu&bMCVIsPTM|+l9D}j8F+R&dbLFnj@}o;--UgfAEeP2#1tV?I-D0U#
zGZ`}=*aA4?LO`hE4?$5)@FA%@5#dC5hL%8e^rbaMvaqW<6Ey|5Xh;5-4A%KtKu~uJ
z^pE(k2}--bSWKXxa|J$AP!+F;s_4pTj6_H0N!Y3rqc0AhBZX>Ic(`bo6W#L~a#<w)
z$@i!e`wQb*mP%fBU<WP1)lEfT>P&%kFHTH2P@Ygxkz{m!6012sTA)X@AqS1=aKnFt
zq9y&@b|L0j?$2CoF;iwegFjMlO}!hZgB>j^Y?n~#6{QX~@H4_>IP#8+m`e)Mjg=^2
z%mqVJN@67!lg@$hI@Iz?{z4`8b<6J;qjieq_xJM<bk$4$3QWNX2F<rFbm-kfz1{Dk
zVAh`#?!arOva-3UaJ@f07N6>Yc%GUSK^Gy)-nkDn_76lGj;T3N?@R96>@X_Wx07BO
zf&GfhT39*0x67=S3TY7gUN>Ik%m(D2=aC|s7+@?vWc|IFa~>NS+2~_*V%f{(J=U+;
zmL_ilndv9CH!@@;3cbP);+7tQar_F!%XgokPPTIfTf8y7>H#O4l6N>wCs*zN1HsH3
zbTx%ru1-YrT}^{dZt}xGL64sY*)wl@j32%-U*v}+rH4$5j9Z4d%BnW|t^Vi552M9w
zr{(56P_u>GtAwN7ucL@2$e!2#dQLapoU&D(FMf#d1LI6|H?n2?PM$J-a@Mvt>K@hP
zhq>q|LC;$ru<tldowtx{`!e$01DTO_o2+6D9vjhfoV2zrA#RHfr+76~$K9h|^Dzkm
zUTnHO<<3J%Sy>NH_c=ifrc3az!lOe&CgU8!<E04hvXJrm-Q|lVpN!l<gF6@usAflg
zjf9jn=+8YlYTA|geWkv7*%WY5K@#3+UjKuONj8eYOxX;`XdkU9`mXgd^t>LqD=q(V
zBK5tQ`4>II;k(iiTd@N1j9W7Yy>)$H=Ko7`%fDn=CS33`EB0DmDJBDSwTw`e8jjKb
E556_RWdHyG

literal 44116
zcma&Oby$?^*ET#LEs6}1QVxT3h)PKbgA5@cU5WyVq*Bri${;l$DY+?W=@L*R21!Y2
zBqbE-hWEP1{rsNyeU9h&j_(h}y}9oz*IL)P&UIclMpIqs0tFKV3<kTPj7Dj}VCSO1
zpCB?4@P9_mPvwCh<S)>MPB7ScIP{00f70g|24jaQqweUqC9gGDxw4G7q&J)|LS^22
zRz~vm8qz&#ttE)L7jsYCp)LkZclGuu|AgtIeR{G(;*7?|6jy>Z_1u^U+kj{(DnjYo
zDF*3FJap;q>HN*qR#pu*rBk}}F8)b9GPx_mCcWixws$H^R|ox^dY$(2v{ToQ2w||k
zr%zAY&#Hy(r%siIfA`KR8aG_J9dz>DkXmA`-F$BUtLW`qN@`0*i-FDQp2N&U3rZMF
z&gKp~0W4kbwDZi%P93!<fAEfqSm;t?gYRDZ_(GpgJt83f@OyuY@PYXgxFKDxLI>q{
ziZiUHWc%49TeodRMg|Nftab?vgK>wSZBmt}BZc3h5^1O3QEjm)uXA0s^I2@lF+UQ(
z7TdlKU@Wp$pLZN!>rPG)lm>k>5rMT!uKnqI;)8g#HS1Z9rI`IF<oGE;iMBido=Cxv
zg&GrQq3$ZD`J5F>4udH|V`XnsJah9AO;%_6no%w69wF?K124<=`G*~AXU=uGvqNX}
zLTU#Q40eSK3Hu~h`;)C#BOh}f%aeOFpqA1~iCMdvtB^O5jJ{?DS`3gQgl(tE?oTgW
z)4s=bwubrVc?=TS|Isc1)#?~%DL?>wMM_8x>*F|`Nqd+$PSbi~_5QU^Mi~YPx0)gW
zL#)4^X8@K`pobDBCkqWv@+;f%fbXj^@rMh}SKqeo%ZnDv2cr<!g#aDU)nzc_bdKX6
zvS&-psLS5IT87D*0moOdXp2f)rPREMN1O&QKYM6Y6;ZOsOVhz`#@BS|wfWL>>YsyQ
zX(P+BlS6fQ#oSUsJ16YGCIx1w&U)8(b2AR-&Rp{a5!m0QXbZ0IsW=Pnw`!imuxE^5
z9pug(|2P{>B%7O0J9qta$JJNpEKh#;sKg}|m|vVf=xy**>sgslSfea;8-En~MiRp{
zUlhXgD~fw0agzepM+vn-Y;r7Qxim|AcU{w2$YbOUD(Md5YTGhKvy7VxCMOLIhSOmq
zP)I0rT_Az3L0P492B|gM9E_4DP7WjE9C$zg<AwPX!MJg)RE^9!jPweRrRw52Umvq$
z?H#P5&>zZJ5?AVamI-0pq+prYN#}UyiiHK+^i}Tl8Dc6H6cOEEYHvm{Qnzb+%41-#
zR%pF13m$Ymw^T4RnRozezrpVlLjbpmph3c!INe@4hUXQ-U<c4+aFfl%_(jx5%uQBh
zdwpVFS`&X%Xg%l}jWkH)Zz*4ld@3sO00xtUX38F(=54ii>q;a4FCjl|&2+8L=qw62
z`LD;D6G#zq*ds6tzt3=$Ijt4<yO!4#5TKE=c6Kl#Mz9FN+=2&diJDB(oe1%7Y*A>W
z$mpw|O$h8cSRxUO42&gx&%|T4>tXh{y_kOS2K*4<65Lf^h~0(_{77N1$bi8$%=gm>
zsZV`l(79qRv{N!GjX_(CBSlKtknsE;&Zukdx5!|WgkY6CzGQPfO#bL-?(TavnOqbM
zru#Fn03=-Ek@~9=V#6zk7?__=pd6vxQmykz>xX`BC6{qI#7?q{YL;CZ8tELJ^2fcy
zTuO)>=1l~qrS7<Vcz)|~_VuXtbBCR~ne12(bzpeZn4k%wURBofd@<0Y4bTeoycq3R
zvh<!drf9uxPOOU*VJ)=Pc0ynm!_mmgix&HZ^OCujV0DyWIz>xmF}>>=_bb0L!WpUb
zs`4bT=&id*cus(>2|@Y*ShYSC!P^JNCKjRA`C}m{YfKcH1qnAgr>hM6$qcrnBD7Oo
zrs=ZYmB{a7!T<R+G4yN5HgEPkp^_G(SDD*%yOYd(ZlxHVHBYUKEK`6dmQG%Jg9_ki
zSHMop1QEzxfi~c}py$up@8#jwqtH({;22ahj4VHz?*~P(W$g^Cj}An$_pzO<9xp|;
z?4;&-$wj|nac=x@s}A!nt4`x`luCpX1|@&=ojkXi)!c&*RzUzZ!urSN>$FMF=b7uI
z>vmxQsHAhiD&UVIV=~Yp4YV+(b6~|(YL9<d(knQG353RIr~y9%PmrIRcjk_^G4X=E
zzXF<3Spv;q)U<a*9_}}t2V;YbORe>#g$G}+GNGIRSSn4Xc-hUa`N?oq_`4jVxCD0W
z)BJdx^FyT8Xb4I^<xesaHb?>%UEAq^LqljykGa9qyp}i5{wnq<utxZ!W2Put6daaM
z2u9Q#G+P7rZ7hx8iAHBd4C`e}qqE%EfLTOpXQ0bwF2deYfR<`&XPq>J4o(f2FZ7Bb
zup1=eZ6IW2EhKY9Yr;TND#XC8xr+BEw963>=TE}z3<|Rg;Cby}?2zBIK3dR&aT9~t
z=@joDYnRVPW?$c5k~`8nMj>3H&~qg`rB)`KTKs!(IC*$Eiyo3%8OBWn`b`XLy^olE
zkCqqW)Us{!N43dg(MtxvE(j6iuwXfM0`@lAG+)OvUFKPq5IYni9K;7#q{x<jtiha2
z6#6G=2og3AP4jw&ILZ0B7SmR&0(TTzmGu@E+^PqI%4f%FUIfpGgAhoW%-47+G&AjT
zJ2zOQJX=*!0*rHnA|fN0JsOq{A~NOM5$_)u3Db{mt)<8eIfQ`wU@|&Of(xD(fRe8z
zLe#db%EH*m3CV?pAMOQnU3)V(!DSezh18lRh37qwe1*XF0KcqYnBpLZUB86(^S?yh
z{>O#c!OP{v6=JZ@0^^w(=qx9GIJp2R77UpTDc9>hNngF!`fX2ZmVp?vmhoQ^%kLay
z&a)N-lr%)}^!AUx-;8(u_?mw-`;5^5T65J2`wve%Z(ary=yvka!J-fuMub?CU8NhA
z61}i5U`2jjEjgOq)#8qLEfRSVqjLvQiG*zNLwiIB^ZC;|NP<`A2+8|69`0oq5pOiy
z$`rqQ2ca8<79fW&^J6h6G;;fG$_J*70$CUd3_N(QZMMePK}tj>DVomk4j4jw&E%ub
z-Dlh&7K0@m|Fc5nN8l$%=$tU(Yh@#Nx!qISw*y!jJ?IpJBGl=~(?l9RBTat|%$sF?
z$8;>Tq0^zck5eRt9vWOM*z<HERx*9tg#)x7E7&dPuo2&bjTskaKErj#%SaIpA$VRt
zEk+F-5|zL<`w%bXF;Z=c1V2f^GAg;9#IsSQI!&0eD=`vP86&ch*P%fowQQKdY6mWH
z5O@%RSvWpCTWDXBcaVy<=7Hy(AmE1eD3!+tfBQdd?Re3uml{d*lN&Ut>V6XMd*g~=
z)K=a<o7x75B6lp_o55tnU&yY5r>=pg&by!J`;;S3_ZPabOUzib6Du^`za!MD`eHpV
zNl%u38_Zc?_7iw;rqh6#D$@8?>x^g>kCJWUM|2h={sjW&AC+t{7O-#62uK@6Qj3{F
z<{F}z_pV|kHn$ZJochKBM_~&n#H6FaF0`D)14aar(7p(hHg2+Y*7r(!l#V#EV->fc
z^A4VO>mnv7?u&I1On?+L8FJ3_Br@1x=o?jTLBxHMY_vs$6nILab%Xw+Y!up0>v5%?
zUmWm&!7l%jQxCnC@pr|NcNsq*{-5?PexT{<+fcgEUSk0JMc_~L9t)b?(b_MZ^OxET
zM8(B$k;6xIF@xsN2t3-CUl^@kiwF1?cmk97pCQxU*RyWOMlqz;^Gk5X-h%o2&`FXE
zo+W1qP<#n90@KmFPTIJ;O1rTjv-R+mAa+*j(p^M72R3@i<0_Us3JoKs8zp$g06YS5
z(d*a9XM}_e!tvS1*U_m93J4Y_gH0r~>9pW9yO7SvN|qLx#YC=o18h?V^Zr-~V%?cv
zkQ~_L6@1WD0e<-9F<0T;VyA9`6%f3+v7;p?*4N)l9?mH`UK?b`#(j5V#y`54ERDtK
zz~JN!ix%9`IvfPn;B@5nA1yg^)bkQbDE4rU7C4QEFd(${V4DbXf~=8p_rShuiyZBk
z3X=9d4m0h3%pzQ;av8K}ofw6d1_5e{2Q>K_JlP7KBu+dz6k2Llbet_&ltaAc!p{2m
zK+zmS^qx5%3!??wbD3SwrHc@<FJWZa4LDDglOHOnn&2kY5ZaFd1WQNZqn|>H&6X^Y
z2EOMpwuz{^CFOv>qasfU2K{t^ej>VL4$se(N8AOCYn_Lnjmv8^QVzpRk9`9A830Ja
zAi;Z^zWhgdgc8`xED4R`kHm`P7#;8*d%#aIL7zXc=y8bE%)?p}e@qZ0)NX!DBVBiy
zQ0d4FYw~fp?S!e>zSKD)`m{aUOyEe<Y|dfPZaG<^(MxN~x;++kTmNWWYE^t#KqJ4X
zc<KH`Z)9#8t(2JiSkmf#XYHbgaqRcz5tT@n)1wb5fdRgjD?fmh4*Fc9o$>L_I(=w<
z<v^avsP`(h`=D{di!fDUO=jLG7^BI-&t7xgcCAL2b!ASG*jFl9jpuo>U+?l_+f2(_
z+A`qentlV1Z#l-qkVa7v!P!5@UXe9r=**No&2gkcYAFYzR_cF-qH;D7Sf&S9+;${b
z6ZD5qJ%n)bD5{(fgs2+Fxuwq)aZ2q2Ciw|<y5r7zvYy&c3yqD3ZmL-hxqgdXF3kG~
z{`K>#^YC`0nk6wA`NP)AA4LxnmV#h43dHb7`pipTcnV%?FJ*>4pR~zCwN-0lDsH{!
zi$(Kz`D$XEBa0f~JR4gIobYtL_b9@7KMEveDxa8775}Vk98aXyx9Z<_OpsMcDi&V1
zW6{Qeby}FW&3mM==)Lb_d{{)B%+=e17h=(Vgqj#4904twfnPuMaI|nA{?T9`cPjC0
z#@MxTMUJ!oV+_(RAGK1dgQzzGs5={k@N77Fik}M7@0<?%<0upN70dH;BTjDj-QPZK
zbjgM1&97N=YDH$lM~76h1cYMIPW+~N3S8-M@)_W?fpcHAWu>pp$};(A&NHziuqRmD
zVk;5m=8a&KWVLQb48_YxMPOz>LCo<Z&iT;%sAgqQW66tA!!TTG)xeg5dBE`KdWx>m
zb;aoA!lx7u3ry@P=dUkTEIg4ckce9@>?2R;p?CzXMnHl3iL)|Fv|&(QqLufa4&vxO
z=B=I@HVbZ*GgJ9>NKcj3T;2E~FLu$OvF4S!94Gt}j28X#mcI8~ZaD(}aeQOyr`t7C
zmq?W?)!R43mO@;*RXL+okg@3Mnwz(D5Hw&-GDwMHah$$4%X?ahz7zWgO*syU`G^S3
zwod;FK`~X+$DvEf(~M0T0W?r&gj?AZ82=3teKdDZpFItKL;mTq-cKITBiHA*Ll>xJ
zWu6Rm9*<ngDNiz=%pJ|MO6VEOST0=twehH0Jg2<ML9*cBl>3RK4FZ}ejb6jhc|H?0
z7;jYHjpD;LjosYBHeufwnJ}>MaVi%4_mp_CW<`JQW5P)J#s`zV3sIpSz;=j)9ZgVi
zC*QgZ)u}0IiQpbzbf=FulJ_5)#STGe2ZNGqy^0lxLXXQ}(S9TnEX94HsAl%Z6nxtO
z1&s%Dt&d`LH@pI+LM2&j7zPaOO4TgGvzKwsdZp?#U~EzbqdAL(o{|N2X;0KFX?IQ^
zN%Hw&9~G9iQWOd6TmoCG@4eLy=1cP<dOSG3TnPc;9U6%p{4DV&Tm~1Bc|`liq4TOH
znhZ>8kAr(0cdC7)R*&FnhSJgQl*IZ7o!pQd!i1jue#n&!a?0DBR>tQ(+dHUPK9S@b
zFw9W;V}hilAc9MF3{4+y9RKDmaFlBZ#-h)I7)6H(TN<ox51gFE$IKvB2T3o}`D^sF
zhZnUCGMr3Kir9z;6j|S?8S3U1>t0W}Mf=HFFSc0C@?NV*%B@uGX;!M2Z_J@?5_>45
z5pIHxUyK_*bSVZm0?(Cf1s#4HJLQvf)M0s#GD^pL3}Y_<eWbVB7V_?DVb(M`Ma=83
z#;G8;!?Y1)xVL&g`N)vY0R>GvnWHbhTARh{BFi4Yd4d;6fulq2007U<T9CHUNUctv
z*d_EcX?@?L*MK6q;#p9bBL_X8mC1|=0}wk-sx7(d<1N*!dGUA<m8jK&5w)$OfsLPT
zMD<x0pYBq*rnzo|%~SDU$czY{NXuOLbpyM?(Dlo(aqt?ao=rj0D@(-rw07r*?MG9R
zGLaMKYR6U>;+JaCsTk)**~0kBnUf!hvm&l5FHNLq$fc16JU#<p_RX!qjdH|rqt2n}
z)5r7f?NMd<7ZplSPf0D>wJ=%mycR7?1>R4g2$BgR$b$2JUE~G9tImu>aHDqUtv?^l
zdDdM~h!}S4VhT8&K{DW^j!$C<Ly{>Kqpgbil)>C-=ayJp7dE2C1d&>#7#&AZelTe$
zEoJ^*h|1YQfH)4)ns`!_MevYOh7EgEA5-x`&$1%5;g+|C`_y&$FYv@uYRn)&6vgh_
z5NN*y?2kZF>4VW~=?ohRUI)-$(M-~M@<qB%!<35bT>>a81o*>y`!1rj|36ug93y*l
zA0rr1vQ49tWP^b^%{kCBc(VHlYzgkNKs4IMm_V|1<ApU}FIt}O4tvIRFp|Z>5X*=B
zq~JL_E0r4AC|s3t7V8_(J}<!0Z?qpPI;N~r*b({%-K|-?{m$u!nZ#??z3G4cGYA0M
zEGYCbmzPdC8qOdpL0G&h@D`$N6{Q&)MCT_b|I1`+vini?(1i`oQiF>iwHdvKQM0>?
zIKTAGX_)`Np#pcTc7|H<Rw42xF(G-SW4EhVeDmuT*M-vVf9J8|4R*q=<C-%Hal=;^
zbL;mxfG+}Le%K0Hz^y^F8>?BYf7glFbj>@tiv4;TBO51#U7lpe9;yTS4V_gcFiM2%
z2i``6>s}5~vv)j9SGk0KA8gZj^gSsg-pI-YoTa0_n@UKndx5AVSAUcdVHA4j-*nCI
z+IL1--pi+fn)0LUQJOp>UVEjZFN#mUO`bSAfBIel@@@he{JyBDgH<PDVD{IvznkS4
z!&4%BfefkBRylp8bMDo;hMrLhKt3Q*h49wWS}5wN?SG|Ta-6oWwImKK->7ib1jxyA
znjAH-b-i)3i5YR;e)=hag9>DRt5GPGO(_oSAxI&;|7KB&2m)&kx42DPgS?5P<1ecU
z>>w@9F6WD!i&&BqA`QdG(3K;A5dP(qU~3%<PdCpJ;kWrOp}Avin)U*NU(kNQ-DdR^
ze}u<e|94vG-lJi4f`HYOu@o6;eO?nHL%s!*IlA*FqJ3!13vIEcf6pNguqt5kD}Xrx
zJ_4ryj8^$Gv%WBh>Ll@b#$drHMto%7wr5;mz~VNMD%}`V-QqW3^1SFQxUoO#8vH62
z7Wfnqe+8S*X*Q~L37wE+({vU{OI`b1hzf4i6$lLr3YE}L82W`|nHK+gg)KQ5pdTuy
z&-Q?Qd6LTh&%rMO$Ol8I-<z^hjx7VO!QIs;r7nl}WPUi~xQ;*GL7_3cK@rLoh%-_w
zNWR$_1leV6?e5W;3?IT@iuK-^AUsd|71$@S77);Ku3}Z#;iHWIN#|e<Pj7o&`NTBv
zpx~T;kjcj%re}69rJj7+yZFwR3Nv^I5Q7TwXdY!iseqLkWO|Jvqzu5Qv1W=G3X&nk
zZ(x<E89O=7wK;C$^B=2-U%F|UngBm@0#k*Fv0lQ``rdSk+qxwUp2ogyC#PiS><C1?
zME}j}w#h-W<goBk4n!w(h^q>-kRc7Ocgzuyge}bDGs%8t$e+<j*jv<x&{g<=(VH6s
zL$4I1@k5pI$|%@KRO;1cBU2-?>7I(*(Q^1I<JhudcaNl=MZd17brTt>z!E_#C7a5m
ze>^d7Q(#kA7HQI6GC?I_wzY7}bVU63h;CEwM6Wpj#ibHG7rX-murGa|*}1$?T@r9R
z);><j%T1p-!S)!gN#z`kMIS1{eo`m}?5TJZ(9_kLwaT%7#$7pGKTDzFizKzR%*!Xp
zJenCU>jfElUJFD&*K?MMc@qNb2Z1r&F`)Dp`SYFT>*_8(3C$FVE%T*6@@%4Ql2V?e
zl_slM-fF*|0#4yyDLuU2D>UFtwzZJtgAF!!yinmgza|bGE41q?2Z$+J=YTa0C2x~U
zvS4w{?jT3|$&jmP0hpCQp2ACC#O*5oN4p2VM^csx)hu<L`ni5OTS(eONCB+u7eQUP
zQwo9Qh33&a?2oBdZ$wfufFvk-u8srC5`%-c1j%Fs!<RiSMxl!w(8y2h<j81!FL6J)
z=7iPLU#63EU5`I~m&YXgd<sGtB@L@$y1uhs09*kHGGH8u_237dMd<hSKHYHXmm5)+
zVw9GaeBDm-p7a77oGnGeBT;<27ZtaymL+aFGTV!fCz59=-?--8<9ZJ~XdCrB_<K=x
z(`?{;6h;G}_sTkpfXH#iLYEbbBOwVxXAy!9{*%{*fWELS)QNjaH;j}2xv2&+zZ|QA
z9_{Lcx;UG!v69|JZ<h-__y-K@B~x^hO91Nd9OM#C(H#Yd3-&(woD`K6i9a*<$jSKL
zlA_n#4UmjLBvjJY{8vEAXK2VF_@Z$Ed!%r3VetsJ0{XbxHLHYXNx7E`*NxoyAFt49
zk0kUYaj3J%FV-yf3>XTOZUC$)0&OYCWfOanC;)(iS-{nvq|BW}IlPy<7`A$Pa<nze
znOhY1r|7mWDKA!H*17~`1d=x$L>@{Db8~48<W;l)Qo}^Z+d2!sCizj!`!RHyS8N)z
zR{w@@(PBvFh@OH8FTkk<ywI8Sljc2mlgKa5@y7X;H3ecvc9XsJ>9h-MBvU0)dK*Qa
zmzEe*hcb*~aUgB0)?+c@1D)O0#$4XpQb_A7QpxhT_#R4d<>(E6<o^Qi!=U%y(QX8M
zo%_+1X*X}|I+CozGNyxhTL$GRqh%^to~cM3#Onu`%i|INrcIH+9t84QkkR5&K`j4V
zp(|_5nw|H2@`00<3r-i~d@|hdLh+xh=aYG;szUg3Di?Vy?y)|i_2s`EkEByD$`hBh
zo16u%cONz)c_ZzPh9_@v>Ars0Xz&j7#wp^YbpJi7u1yQTx@@>ISRONzj?h9Kc28CI
z$U6()wxS30#&?VAZPfEGHh7haf^1F2Vlm<$kne?O!<Sj{`3J0p;n?#kvH#kQ(^BPy
z()~ww{z62N)Mlr!?s$64O@%Z+5Po2qe5%RzL}l^Nct{G0rV6MSz-e)Af|LrfkeoY+
zod<nf+*h!Gay2xY`|16U<YN#3{cgSn!26AYtPq(+@Avq2a<qk1Ni^3GS+xPO%m%(}
z`TT2`3xJ6vm_gS&Y3U$Bgf~6KglA3zo)|W7@rSSjAt^n3$mS)M5P#x2s#I~dtmj2Q
zEM0XP>;nIF|M^18rO#r|RmGYG;(}eW6wa@<ROgD;PO-(Ahh{&1%;HVIP5!lw*;}6H
zztj4?*B<-Y{2#Mc@}1J6j!T1Ns9|Hcbozk|!cm%H-?e(x*~Iz#9!40oiq|SxNx9mw
zIJE7pSls?gUThVKOE#Qmn;go03=V_VYHsR)h<20YK`@Hl^OFIqqF%ewtoR2Auj#2~
zeTSUWolAM_8g^isZJXTgEiPaQhPnCtoS*28XZ{uxHtn^irR!a9aOS(q9`_S^n0jrd
z;_QQrfp@AV*JZ0eFqbTV-oKfm8=0-~bH!QD_#u?cfjpt_4$1BCSPF~R<O>ewdt{-y
z$bjd`;|<B)smVHs2V0t;7hsgHR_MF~5_x#BJ$AaASpk#gkUJ6mWDG2lM?|qK9JV*!
zp#M7Of5O2np3rsUkvw$D^yj4{zH@4+TLjN=mLzch1+_JV7{G*H1SgfYznr{l&Eu`{
zazq&`w4w7e0Hff8kR-(1L#LUf(rXW&OE~+oAMU4*ojS3&&ycYYgY(ll4A4F}5l)fe
z5nxl^pNt!XalA;v(d+i#k9U(o!WK$5=xsQlR`RN~X&X_6eCVv`@?x3C9)Kz(<;G$l
zww4~CaC_*5>(sSkV`yYFK(l!jxmK9V@BY-bE_4DU^Y$Cp_puea*Ql!dh;Ara!5H}|
zH?saPMMk{%vRJ)0y_4YIi1IRf=g~pKhHZ3zmpZ^aKB@1Og-_(%T3=VJ(Xv$;JYg&L
zW&4LMew`s+$ntZOXQzwZX(jdVrS@7=X0x>PDYhpM`1ZcPY?xITJo+Nmnk_mu#&j|g
zeTafR3wQ_6({NOe6fN!|)Fu5b_shK4x#XUuM<Gy<qnn6$qhjI8i;d1T&4Q1Xs$`9y
z-2VvYSvk1_JQ+@D&%{SK>S!;1QZ(}*(nhd|xehf3(vf26kEN3^7&~4I01mw^QLw6j
z;CBy`uycoi1)*Fw^scsnao2_1Cfbk1<~GN55xhBe%CfoTV_PCAL${~~47<m*-kF@q
z1VQH^$g(9s;(dfaX9H!E7zf$7XmN4yuXAlv^{fT^Z4aPWI=D5TkD~i1`yRz>HKvKt
z0i(}qlxAI{Q~FC|`27ZFD1#0y+}~Envt;%AIgG`p?@uvm#OzpJz-s9L#D>pW>j4`8
z8A+c6$aUhbsQcb<d(i%^>n=N%64(d}QmX@l>gRg)w@3#I16$23mVEm3PhEtDp)94U
zI~NmNVjpa{6#?cZ$WS+u4|m-@7$<wXEI$*5j|yO%ZwmqwxxviXpDoXB+!8K(y!dfR
z(RAd#*9;@z92tcXSn{MOoLPG?s;+&vR3l0Xkny8e!J%y*0-$)^=cv>`6uWUV^rA`4
zvxxcxa(IUyHAcrO_Ag;SY5s1R2C)YN@E>A|?Bo#Vr$Ds&^ax~RGWN$m!~$vcNA~ng
z6cM-CvC_<-zu$Y(V2^l9(OI04*K-A)cf)xkdN_eik|77xJX%3|z5wSrVHUpl08xIf
z3~-%DEsWy7TMA+<s3Y_V2fAMbE1Ph|cRQSR<9Ll$A6i7P@s&3rUm?Nc!@&+sXzW+!
z+t|F#@1uTSsg}DkaTRNH4*r>vp&QEdIyuYW*E2MPwIfl(r?q$rS8fQvdls?NpI5ei
z3=Vm};>Pv_UP6|s!k1;BfPj<CH{K?Hn%|_i3`z!N)F6C_f_&&pxU6KX(M`+93}p*m
zP#^gQ>LX_%_zYs?Z~FY~_O+rS6;EKHAl31^DiX59PK|qNK(j%`xHln*ab^*|ifw>a
z2aMlpO6mC_k;6Jo6wY25i6GbHQ*Z;*Elj-P>%5W>67**AGPCfoAU4_@K&)NIPa&w6
zst8pm+ZEj<=iGjSp8tc?dViO25Y&Sg9Ofc51VXveLb>==5xH!j8(>&CBugw>wa`-?
zP$Av{AVGd<h?qQ#+&;}b3q=uD1RXS*lJ)K_Yp%?+v87Si=Y%&bv1;c&I7ry+9`BDY
zF-Ub&H#V`T_c%hzAiTG#oH-`Ue%XbS)VHs=KZulNeYb8@+b)?F$ULI^i_WAsJS*~x
zYlMrem=F1$mx!qM{-Fb-xxmObvD2th4FzNEcaAM}OZ;xfc?Lxq+^I^vhCL@gCb&Y5
z4wmnwX>LE4=v|UGY&ZRL`r+jcvFwe(#+;dxj9pB0xhc^zq4qBhJ9^)nM?Y-RfBf<3
zIKe=AZ9g+{RA%}%nZ*U>;|;fO$urkvO(2sU+-eD66kcJ+zIp)VCf?1TIR8_>^s^#s
zacBi9n?y$l#RVk1Qrx@<sK?QnQ@&uH!ktS}du|5N4}6QQcz4t%%_MDZ@eS@iT^W<h
zDX*)(g*kGrP&o`@F8wWWp4FFEZ<Qt#&;fByzI|LZt-nb4#-s0X@4K4rIS+T4>Y9Zg
zX&#}Z0m&%*0wOAvW7=V$CpvWw>8Y9Jl^v%jGK*F)^0u-N-{;Ok;LJ3xqqZ*vc3~Kd
z%5eqs_-zbSOZZx4K@)|q(UN@4Rk-fl475HMEN(>gyi(UMNecw$X)tKz?u#v{s;1XW
zImNMWxl#wbLum#KNyS}?mX`}L-+6P&bCSL|>vgLCQ)8;1Q*N~RUcwl{zW|=X7978_
zbzd(28LVxjZ_{{f91OL1(R-ML78feM9}{l4VIiH`@G4&+mk(P!O{Wcbs6<<ZZPPqd
zz7@cV0KPmT=Pm$wLIWOpGL(ySTaod_yXYgR+zaS0p>f@Z`#&bHk%Xnh;<llf#S9<4
z`_~U1M59Y)rlkRw#R4U&|3xTJ`VD|Fn2&v-<lG#%l~z0@LyD2p`}8?Ystz&BHrhGC
zf#F|Dd4{)sN6LgK9FQg;dvCz=)-zST1Lho{Kr7c;7#};u)=l)rD7A1S;A+%N8+e~-
zf`9K9iI~(QTMyt-7oP)<0*;u~7+JhcJ}W4Twx~vyRrpY+v*r}bTq8?;J&~99tKk9q
zwW71i{EP-`$_3MB9_*>N`aN^it3@tXwzT<v`&hK0h#WNLcQ^(VA6<L1<df8MMMcFD
zs0P`=$BA>dG}_8OL}XiW3Y5*#AJ>l*^POKc_`CWBk<&XKLobfCC)ieao_%YU)Oy-P
zrg`=BS<d#mZ-5NsMsQiz+3S<=H4j&mjHMGA3a(l~XDI;N`Y!44#1eR(?(85Q_xzLq
zy8#X-GroM3#|GPw!9dj@V3M>jL62u6pAOq3e;w<zDkQT|W<Fld?40eOcB*;>p_gGl
zlrWT1b{Yas!3>N0ehsPBo4E+cHwojvHEGJX1GKEWj`wme`v=)xJl+2GC}L|mT&&6+
zES>cQG|>$}UQ`15uZ|I;Qw1GMalgK40v7QNN?tb4b|qIfiJVo!GyPTha3>T9d1{w)
zP1AN-B1<j>qmuUg!Sbs>1zcNs#AIub3;~Gj1lAT+vk!^}Kcq*9+%BzWj~XZ!^)Y-F
z4^X8Arlclh=@#&ex13n}B~nbqO}j_%#GW^(d}n1u=e{E~ct3;ZqJHi43x{|84{6Mr
zjT`#v!OZ6`PizmAkg5`}rC7+}3!IjpTKr1?OUnY%S4j-Nf?5>r^WV4*RdWf-w7y*B
zi2BfZPxiz^IQPI{)0rLnM8$&f+%;sG3*7L}DJU8WVzr`yTI5#@&J0v!!C8mgCVIXj
zpWS=uRj+(%{=V(is7td4HlrnLa)|7kn77d+YJeCZ36p?+RwK2#|IID|J#<c2mXznm
z+%w(&dT6N#C$`H=io%wj)L)Dv!l(tJ+5#)VJ8L6q4vavP(G9oy?|1zuc}u1aG7~HF
z=?C)aqK(AJEY$4}M@Is#95gme%R@2)lCUTLFRikjP}fqh((3GSE1cH9>+?O?qcPj3
ziB}+PKmnuhaAUGJF9XP!6cI5{9sVz0b16e`W9+@SETP1swvsiRlowKq7{l-TiMy7h
zI?lVz5zxEh&~BEXRMHNK@T_xly13@RwgzvMgd96d?Xsn*aady+2MzS1#V3Qif2;R9
z2FQK^!4y{t48NN%I~JzSuj`%E>?)sH{DR&E^8zSzE>3K3l|0pW&`k&pkWn}en@jt5
z3;rEm%3m_XZ-Rf=`Ku^j&-6Qhub12E+)n*PrZBG{K&;9jeEkt~D&Ra<BTz5Z5UQ7G
z4uj}a=C@6O#1D<U*_@G-?@E@%L6#LPc6waUS-Mxvjt$<-+Nx4UfDx8;!X-}p$br!n
z#RCnLG*c+v1FG@A1T|Vc?Sq@cOhnN<g$gs_vS%yFA%&M&!7<ERi|pTkBxx43z;gQg
zEAAruf7KzdlPfgICG_w_7$#_{d>#-nMf>d4ygh6>T1&iBN?^{CpPeE}Es_91o7dmz
z`p@-8{7}H+rF;NtJ!_BC*xif&zWvZCeZ}(X$v3qjLLTqLwoo}Hx4GV?GX7aMjJ+bF
zvm*vLNYZ1-VF9`X&K`uvE09*qs6&NH@I2wD{?z`PlCEFVS#jzt82-0hKq7MU3v`kK
zf)kw;M~>(DOT&rRsgQ7ML;|5vdwG;@fZT4vt&Nwt#lQPOKz^K#Cp#@7k!4{rSN~O7
z02?SH#AD$;$-0NZYpu|k7a(>z%Xd^zTz9cKO95_$32(<EV=I-xE0~IwwmCfEcykGg
z%<ui>KGg|gQ%XSIMm?*oufP<AbBqJUF0fr9yEYPL<6KylWg5qp#m;eUjI)&Nzh-J)
z8_N6eLcvFMId;#ssr-WL)^X^LTL9PH<^-rHHXNPxn0|Se9ZM&P_{*Bqabi~_<PhEC
zunF-?5u=?s#d|jqQQkkooAw>8hlUvP)NhKADYpW71~7+RO++w(xhZGaTd*~w^7z1k
zj%8KJ`rZSCl2arzZPbA1bL?2k7c5;p22-9dmSWO>5T0>CUJH0GRtkcYj3i-p(P$nU
za1K?eAttx*LJHtJK`IBgK>$hA{h~5`BQbqI7fqzqCT(K2!V9;urv%XVr2*mrDL#0V
z5dp~*Sc!gVI!q8<>HSxzR}vRT+ziMp;@#(jnm&p@bg9Ivs(v|i{c8gT9l(IsB2Z6%
zb5p>Vncje00BWHkU}GzaliyE!?`yG(-fdOOKEi`GQy(k6mT6xydJt5x=xl<&4i1Qn
z;3bB4LPBt>SNM4SSePjGOZPvqXfWsK5ayx-3l?toL%Sl%210k+y?1XMp}=hsGm_%^
z575?-hDDS@$o+pIPL>$Jp`j{%S>3W*cl12xZv%zbeWO-|fwVZWlTFpniuJB%P3+iW
zK&*|wej?#M3t0Obw<sC3L3q+uUrt6@pTtKiS^e*vigVZ_$yJDcP3q*$omvTgG`3=%
zSn{Xfbq__>($SY=bMFD6rV3gwW30>}S|fh!z4JE}TkDwTEQ#W+2iC^r<IyYymAV}?
zZ^|nwv!phX^A(W+m1@{Iq2;7pc_-%hRf!Kv{4agQO$&6UBqL01Y&N96&Ardp_|sXl
zPUCPeW*yQQR+OQEqh3uCbBTD+>;Lk2I1*>Jr_|VV<B;fv#9@$DaV+cV@!sRxq`=E|
z{^ag=>9`ElYM@UIdJJH4KWah>Nn@1(qpr8h7jY-nk*Cl|v?D?`DRFnS`z}M4T;sC7
zsS&m5?{~*xC>3ewOt+CkBoJgK`m0(X=rC&FOm~UGoybW?rqTeC1RS%DFJ8+gjjoN6
zUzxZ(EOxS@dPn)FQ4+vM(Ue=gj=Ohl2NEi(p0+=!()C|1d~$E{YfSm~lh4k2oG(L<
zGAr_oQ#bd<vVo@;+DzGNSf-qwrfWQ#a~=*@Vjqzh!IMOX)9UgAZz?PEWvJ8ZogJB0
zFQxf+nYdIA0jG!Ru`I~`TcAoZ6@eOK(s`ZG$CY4Jjv51U5U2p+p}}Rkbe-GZYoMgD
zh8u*k6D4GS4GYHh$Z^*l95lrc3GfnGcEL<O?a@;TjI(_~G#Bj}z6L045aGP>iIgMi
z`QZ?~<z7ML4&Y&MEsGIA!fIUr@$KlW8|bWyKxV;j`oFO~n)JX%dhVICXc0SdHmV81
z6ZaM8Ug8r^NH>Q`M&Or`lmjX^%EimEkK^9??6f}Wn9|68_X>5*=NlL)<Taoef<olt
zGC?%!27+gmcqE<y5*C--W1bi0jY{?H0y<!|<9{5Ebk5x^D*7)-b^~pZi`4qn1TQUS
z$Ex(y9R@9fGB$HM>Y5oA&A{*)XckgD*euqGH}5r_Huvun48>hwAmzfES@8iW8as8D
z-#1FA+H=|XY=JIb2nZ^*@1{M%D<=T>z6sHcp9Y<+nQTh%EyzFGIvN5M#5-p%AQI2*
zp|_{hcY%u-+f0<`1ebUl#4Sngy#bD!NC>KzA?o+ce|Zu+N;JLzYv}8U-uiEYV?>rQ
zV=6$TEWOEsMRyDcAwV$!U3~<qp3hiP^5r}lr+Z}^6~L&Ig*I!hf6`Zai}~K=d#^o5
zlou$MwBHR@)wLg58+ZTe0MvFw7YUD@OLxrN#6EFJt-x?Y5fp{uoVvFbTpDC6<}`pF
zpuRQM^|-2vu2WknZ6@A%TFHE?@|K1zsOOji%?R<?Z-EirGXsH_zVk=7GXV$i$7sR2
z;4dQ~;l2$?c&==nVEbI2WEN?JoZ2XRBjh}5M?s3{^5by3matau_=+fmx+~Qt3jr4e
zXy<MPAn6H*L@d1jN(C0?f!wLjNK!j^EnANDaEG3*?fjD3kc2uowC@0UEU=k1EJP!L
z`q;fING%CacE<}K@IrUEhq`5I;F=|I|JI0^>`Lj^wt#bOK>Y?4AQZ6ZA_B||ovH;d
z45PCQ^ilw)yQ%-XL6D98yspFkZnn?YOU6KaNwbXR4kD%=m>WAbkPXlbbfEtKKRGDr
z1;1*K3~+Yw`AcoHrBOW`FD=_+i^4rtv4|K_{@>pm)sK%L;lNHtqpRoS5gEDcQ5Qa#
zdD@Y}6DOWfarQ@Zfw%$yojNPf0(MVvT?TYizjRfkcfkBIJr;LS*`n>G0?_|SXVLWD
z*<HNF`ucQk%PD%Ul4a$-erd8VuiPlm*;q~uj_P}bEHHE1xkyLGfk4|@Tq_W#@AVVN
zQX(AOd+xk5-M~`3Xp%iV2&Lkg!keby@%qF1;xC@9N>Wu~-twQD7N$PVDmW&0>YQa)
zWX~M@pk)Kfo^2r19rr?e=gYBbS8HKx4S_g%$xkKgdc{sG4kz6gpMMS%3XU2vGM}#t
znyT|+7q-d!du1N~j74`i2<8ECSoV%C?jhNH#<Z7Uf{@oBQwVA?1}6$JykLVKk%R#y
zxFx3RA`Yl?@s9sjsR3?SH~{T;=&&s5XgtMysMC@kN^ej7=9j+&=A=0m7v|jtyqX3w
z60o0r=ikfeb%S2)l~EC4t~cZ`wnO01hO~g38u<hfpfz}2_HqnL4{;4JR4Z8Am@GX+
zi2Chb`q*RM*gcX-MT?95u5m5~H~19UpZo>vO*t`qS&Hlqq8^F;4L~Ry!!LNvI@LfJ
z(Bvy6x{`p&0wsvY=!!auQ7eDSg2>leSB$P<bs+|+B}Yc({}0y%yHZ4l>uGE=|1B2T
z6^e@!nj$dQ{QRV0=!Qt^Dyz<eome~Txwlnf4ap7t!-Lm49a_y}tLjpfR3VNj`DNGQ
zE~wEO+t!<IP)FMBIi8wX71*R69tDko9cPJR8Aqkf;MwRojaF-K`3)(L9>?EQheXvt
z75&7xjGQx^cvhmbW1v&t3*F;Gkp9r<NHS7TpFO_aDX4S*6;FuM$*ZC#5Ce_5R|)D(
zj-W%3F>huu%`oU24c*}fVMc+o%q12F|4qe<wOgZ6`AOfo0_tfmbKyKX92r9uRTQJj
z{>h$RCf+8g$0ogg9YFFvDuYQr1&JWUuPRG|aA2^P3=+IUB7n)(%20JXY|AG~XSA3g
z_5QIDcjrpNTK?3QoMK=h7Pi{NU@IUJKQSvw=IWHM;jYy)8*A+dd=teopEqhCxc<u~
z3e9k_s7UVRZ$?~gJ6j?RwteqZ;h%#Ysk6DH8>Iq6dLstE61KhDM634`!IrDq9@EEG
z#X&3(T`o&`tw4j<HLZ!>I~z-B+Xkta!c2`d&9o?vVQI_H|KDq=-El~5o%X)HE|o16
z6BOY9;RRdc7$NIBS2m;F?36a&@Jvrg5KRl#zNEw&Xsj{}CHriymJG%}Yt$}${+mHN
z{7rkCD81C_wjj-tf%F~hE;xNzS10s@4hT&6HKcN%Gx|Mix3yROSfp}W+r7JVx9V=-
z<T{mfiO=*qvn^0!IQnwHY!GP*YWI*O<R79O>}{f79T8!*8>M&AAh;j3=oAifUGAl^
zu_5;Ur;kg=v8dnOM*NiLv`2-JFVFiQ)>RLmL78u3dVXW%`B6nQICWii?V)z=aIe+h
zN!mxdSP;c=EgMVwFOxuRkv|r<dDOCPZ@o-Y6-Zn2B~27jdIkHwyy>V!EdJF0s7}aU
z2o)jgM&~PYxc)=p;_0}*^OqPvsX^y}br0PRx#C&emY3jL7l_r#4vQU>xescT<kE8$
z0IEG7zv`mK&i0UI<M%BRcI=7_7U#Ix0^}r=3~v_mGBnUFFHs1EJKI(A_bE|-3WdrJ
z>YF}h$95)KI<(TKCbPZC7TTg7rEDaU{>T;qBE^3bgC1?&fH5n$_j-^K80hg2^iJvM
z^GRa?V2;SLWDrJO&=wwlk8~8m7>T91KS8GGV6&82ZEtaRH;hl_Y~F-B<~(A`gggHA
zz!C)pWXb={$8CpTWs?kT27Wjzvj@`9=gHs&Fzz5N#UqXTxs;f<%;$1?ROYQV+GATb
zWN)*1Z?U7U3+a2E<^`7;9L{BrE98Lz<51l2Wr!Nm5MPdbYE+4^;UaRh=PQ&^-}wAZ
z5c75na8ed#+5`9qrL*a5f^cnKq81BWne8!Ue>3o+b%`)<`<guC@fiWKKU%5VP^l>d
zmEV-#!UUM4=1)K=UsOj>kBEY>3_h0PiZ3!8@nFYiBXct%&LocLpIZ$%F?r90_DW0B
zDf?Ed)PAUbq(KQtFAOTl=_0tr&{c|%tDTqwq}jNmy0K7{lQC6ruS`{;xf~*P63SE0
zwV6p|?aE}xr7`F*jO+z%^iGEgi{cg{rKG7lTK_q}-O`Ld?g0@M&J5HDs&-cT^h6??
zYoK&91<{QiBsEYeC`%#D%^DGId3Ib><jF?6<_Inp^(tCyaszhN54uQbhIwmomfZpl
z1hy(rQZq4*$QdGZ-`Z7hYE1K5H~$Rfo-7zOfVBRt1wo?NYo`x0b=!8z+1!mSAEpr;
znVjMV-XNyTxZg6a=YY;ZJi*`3m;;>mK&X%d<jXhpq=ZJVA8yF{2py8Hzq?H$G<Dr=
z7X0jWU1va)rVd{>a=JT~YHhRK9?<?A6K==rcDy{v*;DEfFcHZ&HO!yc<@=y$FVQ^J
z`Jw5-B~eo+bCcgyb(3r!w_`rjGW+HiEq<SEFKLf+y;xCIw-_~cM5J+SXZmrHcTQ<)
zIBAJLU3}@cWDTniH9K?(s~GK3#(g?ptNd#{<A=<BlJ8vqAxgb=>Dc%Zdo?6;cMrxs
z8BnJ)(|sB0x{_N-i%UPOIh#^?{hT2W$QQE59szx|p*k2)`*U5W_^Y$2)5m2SN&F?g
zGG5m4incasv%xiQ!?Bb_-r-)#Jy0(ugiilJ6{MWK`cY=$foO7-=y{9ThDfx<A!JOD
z(v@XylQMxp7)Y4*sx)$PSv}nete8dOWskcGaR$hE)W<Jld2$F(ZfqXN?}q^qX4DMa
zGH0W8)rcpmW5xV3vaHYVTOSFiY~ja-?5Bk1-Ec{JA$6%ep5ETlgEy-NTxMHT{J8La
zD;nIs0HoOKCusnx-}D+|>t?n&r0lsl>1TWVWPna+XD@Mob@#1ZTg{~V@5S%T(JUC<
zdbmx`cjWPYNfIP2^|<)<>N61H*L#NboIEGStwH*#J7%N>R%M7C;crAIOZTp%D8ga5
z>h3u{aUX{!*-*A7)>W@#v)iOb#xxQXQ*0_}FN~xZF}PSEp^3&IsQ`=<TfM{9M7up%
zKK3(xP3A^J%qOQ)uWSwOYz_4G&H-S+<9m$%?1Su;Uq(-4nr%6`wa5I4xuV}Jf5nf9
z%3{cXJ07WY5C0ZR*VYLEdish*NXyFN!6^cS8IV(t=H!1F^p+P^bh+1J?0JCurFK8K
z+2r(3`S~B0^%orAyjb2RJLJTC&vd{YCSGjc0|?rM7e`FV_<POHhweL0pZfm2iA0K-
z=(Xy|TwMEzBB9MRZ<5~Jy%qnIu*UJ=OK%TQ^hza8g#w?jm*77F`EaQ4CTPcJxLSq%
zxer3i+xd4(^cgWmM-)1%|ABCq#XHW;ntgMJtTD1!d>gNN(ZwOStH3;*J0Fj7fqM(_
zb07}qb(9Z_`cta6txWmKA!va76UrIYCeDFe<Te63{^RD5dDF?CarX|{!JY*w*(+WT
zOZFR?$EIC9IkgT4x!CdITawREdT+NWXM8Pc)fh3A@!hxUR*fz|icYD6rvOx1NVxYy
z)GQ?fhx^OiJfD3QHSJ)%OCecJN9r9M^}q19%OEu#?z1#7!_wdlBaSFB*;3X#8M?Q!
z{{~2(iwqi=^`hh5FYDi5OkbDtHrefS`<xQ{09<g>eRU07h5~eK&rQkj%6o*2QcX1O
z*y|w7{Jl#mlBy3@*VgM3!^e7ug=)6L%r;Xd%9-XTRKL{i?sZ=amH#WD8R-9cb6AgT
zzFVV^blOBFX(|Bq@-Bk29T0B1W1Nsu%y86?+9622oG*IHtu&=;4p0e+Kqdx|E_u;B
z6smB99ybIeu5^x`No?pZSDG<y{FfGhXB_@s=$lLT9H;M~nNx@xa(FEE?U~s|SV~>$
zIbGGsUjJP}UmK840_adYr;oS)DYFriH+ILZV;7nXOl-XalFEbT=$D!n=2E%D&UO`i
zD}tot<0X9eF4!!sH_Eu3w4eN_SDx$R68CM)J$jxk4JtjXtCIF*tW8@I)nQ_9zl$#(
zaio-gcQ3RpBzt68qiyiq-BEhq&)wuXNi5Eh7fdl07omq}Jvr9I*xC&}HgWJ;?mcC&
z3Yu~lRp{-0)vM&g>tef2Ud#Ke$DETFOa2}uFEk477CPNyHn>70VsP)z!;XRL6!1h6
zeDxn~VM7`g!a?~8+^7{~_{mIz%`7#~0U|YU)!?6-BH@+y{XZ^r(0s0r{#<bTqT1;=
zxb|l*Ch;$|0wok1S^HBWvt$bMWv^3>zk5eo%^#ovTMNe!aW|hkeb)Ae`;p7d6G{tV
z*FC=@6W=Y9-9{;z#L{=n?%i8^0}`DHtIw^(dQo&=V|rHIy1~T$s9Biz%BH}vksr5n
z*G*8YkKZRZ9UX=bZehWTtA;X5rCP-xwXchK=dq(^F#uwME!{hDp?mu5)w6sRR<zOF
z7xeMhK|DcF05mXEP3&?x9{+6iSm<Q=_7%@%A-OBc_iP}^S6O!~xE&UYenwoWVQyDQ
z=-wH_71!VC=?ZF-A>h(Xj7k=#C@ZAU$Qsxn9g5Xx0%J;6U?u2>##FTBYRcvn=+nFZ
zh7L;X$4vl5tqBNx%_Hl=d+LvGG20r#m&YU!SWuwUuq&tq7kGh&x6t;}zF!E@tect*
zIV?<3WIy1Ej9aQD;74}P<8wE{LD}$1EKgyz)Xu2HMnn6~dy$-S2u4{CTr$b!Mw%t|
z7@aulDW@)hJ46G9#<x;*0W9y#Ehg@j5KK9kd7SD%#4TrwP4U?#$0UDA?cuF*()?3i
z{nkMXft6HOAr?-dWy&75D!ix5uD>=d9CsftxdfUv=6CDkO0u3Yl|{dSp3l<&==q%b
z`tue3B+p4(%DA}^xD#=!+hSS3^{h5~V2A&T?Go}TDGcl7rZxvHEzN<JUb6kA5@HVM
zHL|56{>GL{Du#9Xjip|%Kf=8dgl}68>Pt+?^#tg8r(bs9Yo|!c1fTO3ZhoX@AXYj@
z2;4(FxcwJ=#gc^O7EF0925#|L%82{w+3~~Xuf4w;krqDTo%5XnkI#fPFM1ZxFRn;#
zUn6ql+yXNEp3+L!2>fbZ3k)36RkD;3Zh8UQP}3)V9|iW!clUU5MCi?uuf=);mID7^
zvs_*gg<%1H8ua}ozeD`ML;%iufB=`Xac&>tI;=jqi5NWC=^|YmNoFF2WeXSI^*A-z
z7kmHrsvc$3*u$m!uEhO5kMNg;0i)rH?DxJDfT}_xsuhntd%Pa`Y;=((6jSsO%~{WX
zTMc+VDr-0H&4=v24${0hlm|p=531P>7}(I@jMGllKDhNXsDDlYWJwPJxKRQWE}SFm
zL>OCt6iKgXciO=x7XIjSeS|%14T5e>D=a@&+V3*O<8;7%^GrVc#fqR|O;y^m9*TJ_
z+7$CGpt*qr*}vk^KwFY(04nG*z&Ct}0tX^L?w{U{>-Czsm>&VIydHmB6>UGi7Q#GY
zr0bY=spDT^9o+CAl*d;~H<4j7aA_pd6=b2bE)lyCrC~kP5Y`XP{<m2{%;gb+xs912
zW}(Kjhzlc&1ab|@vK|kFvt2qwvn#Uz<FEF+5eRt#P|cSlprTdDVT}zne$KW4hjMB~
z;Tl!4b_=fpMnMq~>nUNdu#rkXeO8<e{t^UZWcl<&g%45y@VfzFF<>p2@}pcpPDTpt
zMK+KML5!)3)?T|?@DTJ$steIi1}sleu9|=nV*DDm3ScYXj6@u<O+8<>POP7QGEVb(
zq1SSLD&{4-P5ruYkr2GF_4o5~HZ7zE@9@V+w<(lKgw!_!({Mf?`$6p)H`W+Tzr>pq
zB>~aOysV=y`r}EHacc(ng-!NRTk($L(2%k$wXuKW@*K|<1GM4p=y7MrVWD-eVKw2X
zhakPk<mKkU%<}_n?QL@GqxKppZ!_NKEZ+YN>q$ctCI0qMvAgY($pNKUOZGR}8$%^K
z=Y5{WiRuMi#i!AQD{iar<pe|b6F0dbweK~vJUq`(J7zs<$#3~97B_%6CEO(IV}ne@
z!1b|(Bs(v5fL|UBm`7iLdYE`q+KgVy39g@-Hl#o|YjRvc3d2~4A}LuiaN7W1K^d)f
z1|Jz&ihNj2CqrKwGX%q*_!;dw;4JS4K}u$8CV79;%`Cpn?O&lXrkisCvjha<;^`(H
zpo!-42$(eVl?l>wc{DkhKqog~Sir!Q?aMEoa*MjtSr2#T$$&vYv7Dfow#!c|&axRk
z!S|?Zu8=5rSdSMk!0G`r`7D10$MH#6+;_Wf=cSruN@KuXPDj639Ev{{{kI7^+~g(?
z+%N)^W`Vze`V=roJQe=o)~-MO)X{G_*6N8ELb(z0+;Ud2mn@b4NoN5=odi`SnX<~P
z3S-IVi+ZJM7`*r9ULYMkF!G32#M67|tZ^U-DT>8C`nvKnc(2iORGJ#LjoDHvF)nME
z{ZeZR3=el16u}}C0PBCi%cT2+Sj4U&FbX#dY79=cTW}um2?S1&gtEFn&7RW@i>WY}
zhl;T1s9rr4xS3OB3}4=@1s|{IeLw$ZOND52*z)wruz{$ZKhT=NA3%Z%(TkWcJ9)e^
zzP*%7!QCQO7knKf%JM;u3y`V(Q>=pjY{+)BN=~VsuD{Oo33M?h6}YAvBtbUH(Nms3
z5&F0{`3CyS@_{b_?6CJBbA;HG+k5O~Iw;VRK^HbMZZZGS6M8F%rKQNKSU$+@0vC@I
zoz$;lImw8DffyYI&A7LFK6LB#)T>~JF$e<Fa8>hU?Jp|1gP8mLRTTPw1ISS2c`8iV
zr;pc~x;#>uC(ndHj5Yk=1g+7rck`~>*A>sHFMN`)Pi<!V!7&u@JWhG&X38_-l=pHG
z(-Qr^7ml&$FM^Js;DkjBX#avs_%zL(Uw5bKy-nyB`^O!fyO#wfjexG51-0>bGub>L
z<N<voa)1+78Nt%4LCU$g4_?q<kCa*`gY|&$GwD(DJuX&IIcv*+97Ko5+!gxJ2+tCM
zs!r+b3Y1M*v}>vWX7!>5&=1Z^+~&aUHT_B56W67N!TP<!o7O~PbtRG5Xv@MNeC3~8
zoE@t${}2=eZ4KKWyd)NJ+F*v5lI4q}n49)16)3v;;&ZXMZ(Hj=LT?sea*unay-(uY
z8l7adQc-th0N*N&mo&2B?;wKmD^a%Y)lNDbnihtyl`p1%kl%U`$X{tC4rkOk|J&_!
za{a-;E*Wg58JwZA*HW8)d6fO%-#{7n`&%A(pRh|l|9e|kg88fjodp%^)+-j^hRrAb
zD7xP?Rf@;KOVcM0={gDgL=5vSK3_*Vy8SDw+;ONVv?_d}$9_TY&EE>YIuP+B-u`M2
zZeX=9uF<sd70I0a-n$wJ)8qxf*2nzV9`FI+11ErEa8SvUkK>9;t-34<4jWKDxGf-v
zE$s%e_BAI6hnaA9BPl~@66V>uu=k;pmVm-|VlE9gJTjmL^~6A#`=Ow;BYSdTYjLS<
zK%b56EImi{SYm(Cj)&RYd-^b!nS9u+vWmAfPrRsTVP3iI(7JH$U}LD5PpPLxRCdd>
zsMI~e^w&$(I$5oynxG?&N}dtv8IQEl)1HZ*$WvFnKNCOgq)(62K1Rmsf!j3D*Jfr$
zS3KK~IyS(Scp;<L53s$#&E^CRlRf6yylu+S)kP7dwQZ&g^O#h&)h7aOzVA&}!L@c3
zMlShye0k^Iz-bw8)RCxh>tLl0xWT-E>R_t}DuT0DMf=sSbnu@yXmJ`g!k}0Q($#nM
zE&dNzZypcT_y2)kN<v{sCHu9NwJ0H5HFi;C-zpPjNfELuEi+k%kg~KW$riG2sW3_u
z*|%hvWDD81-|OoA`Tl;7-#_!<&fIg)d7amJEzj3-Uw}^gEA3|59h(VbV`BT3q=~tZ
zK8H?lLnWM$Ie^-+GWN8T0(}lkz0?pDdX4OG`!SpfixM5_?N&i3j5oQ^`qlu&HK@tY
zl{h=!44C!Y;I$0oBK5L;pZ%p|Ek=G(v9TRf$)DZ^zF%wJXjma@LsIpkztAyhvS@f*
zG-XgX?R3QWAuI&w*~)9j%|*Gh7^OoEdIAZRT__-NpbokYVW{*g9aI||A=!R>CvsYB
z@P1ah!+~Rxn8Vd|5$blbh<MicjF)-wLebniHPD4EbDJrw5RjD8M#E?%nv^LFP&u~d
zVt8yD@+#6HqtR41ZOCaGrfwi7`!q4b@y4k_=CQ}AE3_XMAIM6ME^L_gojSo2Fk7@M
zGB2x1VmP~Oxa@c5E=ezmPqct9ZZwIa(%Q^|mkP8pM&^DeC4fJ>e`W=~|5fS}i1=;|
zF}n)>5JT=x<!EPpuFQh_D^6O|ZI*ML9%fEl`qptp)V&*C7rp+MU0JW|mo>I@rk)hz
znYGpS$sgw|6H`IeX8W(guke$MBbOn{*OGGM88zxG8u8c~tbDggcTo;_OcA+H-1H0y
zlIftN!EyaHhf6OM_3ux8-)fPb{JzX$8r_%JV|-l`5^ch<v=;x3yRerm)2*!*;GM@K
zBF1Z`qU|N1cRpP#y;PLJVEi&yneZ=<MQPV2!^DB7aaS6*@ixy5j2Z~t{a5>Wdqxp6
zn`C3M-)K|~F9kn}Qrm+``RoKNSS%$Du((O;LBB~>Dh{#wV#OT@RiGx3u{P=-01x8u
zIDP3*@@0wW48C@8a!&AfNE!{^@<2x)Txdgxqa0y{#mT&>>VXs^UW<GG9}E}2|1U4~
zFnwZah@mP+Vn0@UeG={2PtL)(MU>RIXw9SQQ_qMon`$|%a_Tn7fSXnS1n$!#yB^h9
z=?D(Ytg3$@QO>t|e+W55|6kXsmHp&fcu0v6T`!(TX0{`I!Yv>iu<FDfTauJp)^<0M
zg~RR7xO6^`9rK2!ICw1ZemQdNEuKGkGLmh#-5d+@gh|C+F2W0H<!(U^UEc$p1D<f7
zFx+>6esrnn80gOb-IfNod9NF>sAla%zKYP)yg$U#bT1q+!xG9M|1m~KcK!K2m+ts(
ztRy!79yO)Ts)F89lSahHi<23SK_c`p$7rt^gwl=|>WIL6ZJjFb9$4oV{Fl4<6%xBq
z90!vU<%rg2>1cP~!C=|(%Bn4Z13`&2hKBIPP|muFi_H8zESm|f;FyLkXKlJ6C|Omc
z<8V95MOmB$82~Bcc$86=d{ae6<=95L)0b*!CK%KdIDYpOt}Ep)Y4XB9=i_aPO{+!N
zc0%`Q5U7|T$7+W9L~A3zxOu*PIF9;DkS~UF0dAY`uW01(MHHKnfKx>7)UOPD{4AIk
z`GFjk;}C#Ko*gIBgrktJN84lTL$M9P5@VonkKlearS4HNed%d`TIZX8cExu{>W9M6
zI*8Jry5hS#Rdv<r@dzJ+T#t#!(h?@0(jgrB*P_Sc7d#bG(Tsy>51&J183Jto<>*D|
zQ-5`R2#!~x&?CR(U>{B%%>4PF5{xNRJ+jULDfP|rR93!ppS3-^bS@|2!BiL-hf;nJ
z93!1|A~WkwY#UvVl!Oosn(irwFOz$)J~CJVz|%uXDWTVQQ;Mq=qY6?I0-((NFym&(
zA-^1A4Aa<s_myynhQOaT?%hE9(fAMfMj{-K2HzC>oo_0lLFvi0xxDEG0nkwdW;hAf
zkMT1(+Q{CmFwLQt#OiE5mjsdgd2^ezTY#oPR663Et$}#41~Uiu$V4RmHJpjdO|jk8
zN>_exln(jk{}~@-%lj#T?6|XYMNw$k1YkOk!nXWo3#ga>htPhH^4jMjbQ5ZY8hdt<
z3~1o`MCcHz#*~9PhUBL}ft)*iyBR|zsk{DVEk3<)>vC2>w@lJjxf|<;#?}C5PW*>C
zfI0Wdn`9F-k}UAkiw`*{Rq<;~1<t<5{UL2gP<x{L{c=_$m(D;*nk0v1JZ3TDNaGLi
z@mGW2o<#+2z-<?5O_9C4w8^sRtQ#I48zpNVAHnr}iZ@g@13^P!HNLB{t<~Iiqcg3Z
z!}0{2jNgCHU~t^8NPLPPcK<hCWUt&<+}Yx2O8kFi^{SeI0tD8Z4>&eD%P>3((;!mM
zJ$b|NSIV=#G9X_)+xb=+*Cx53R5*IOcY+Qrj{{3>+$zing>ZFwDUUVk`Zqc~NY}^l
zu$cTuP1o2tN*5aif*)#nBImw_r{_&pz28o9wLnFi!O8>6_ZH59t3@K(U3IqFJGg6!
zO?b(^y9Yp-z8H$JvbKna6^U1MwqC#yW*cG~IkCnA3E=YaoLGJ+kje1nYmLbs@y&P>
zRMc~qH;^Hzv0hmp7-)U*gVduf$eVlB{Kxh{`Zu<b#xL|ay8c?=UjK{+E|QTf4%HAd
zJEw^zJ1`y~=Yd&xcHx^S>2F=@TZ_Yth~WFua@G{CX`{MzsKNU8SS&Y#KAOT$w!Cva
zL!)U=rEWBZPA^U57_W$NpY~A^4{dyW%F>Xq%EERe+VP9pyapQa6bvkFtTohG{D^1t
zYmKV8M)gL<%s=DnSdu10>lxH3;3Y#g_m^v+d((^Bdin1a$*9k2Yu}i}A%dZvK72L<
zYtOR9NY_^zH?sjb^aM==W%H@YQ5(O~r_g~n(kK4ZkJRT>DtQOQF8-FT7WlpNlgFX3
z=n<ADlW2m0{m*X}4Rv(CehXc%p8JN`&JtX|9$FN&nI&ZTS+-S>i~L8MaRZ0i*Vc*k
zFIq}cw&>f8s~qc}jW6O49*K(l(<_XG7`}Pf6c`sc|MFI!n*8g%;*evrv>4iP+>J<a
zTx@Q43HBd0J3RA~(VjJ>l6gIGXZ`coU{<BzDjK&W)cX21-BdH=)qWWH*=yCbR`CEN
zhrtLg9;>D;7PwC$H<IgbLGYP4(s&^H7XIbF(`0<4NmmpLY5WoX(|VyxHGT%01CL8N
z{eg@sep2|bip<a4%4JgK(frT_raK;hM1*nOxlk&YQoX;*=WsA|Jh}`0?>bmONIyO=
zwEEtOt@-GNCWDDZ=nvs8YtB7i&5JZY7?+z|xy^f&B;#mh{Ur~g8~kG;WdE8g^)GC+
z?hW}=+STUx%C&bM(y4Mu2{$#mIkraDiD|kVDeV`WrcerGO3E!dQZ7yEJeIQloZ)2-
zJ)(FO!hDPzzV0gdolbX`yB;%puQa~8kR&qcrYc<}h0R!h&7gF#Cc&w8;g+Uae13hV
z)qm}ozQ|uO&P{Mh!Hiqp*3$YBZt*w(6yy|#qZ}`oShhKV=_3*qQ`M4^FP&o2%*kTr
zK8LrHhHfNEMbl0g==Zir!mR<)1yrC+H1L3F(~;cqM9RlKmz=XMTRU%zbbfyslaiP`
zlSnZFMS_%49!}bi%YRr>I(coQ@zS3}%FuC!=dQjF`Xq+CI@FZP=exz7LTe`Y2CH~`
z9;Jo5ynrbk&FJ`igsmBWLMbiatHsTL9{mmW)kA6$CZ@$0plcv@f88Zak{sij$<b4-
zN6knd$ctY3dKf_-madZ1cgh!UvnHvm{jSe#y21NeS!O+<!1HONK*J>?E$g_UXB>$k
zdeo35oxe&t+4Q9gjP|uIVCq3OkC&)%jGO6&6;o0#Q#w5zq7h{FV7=`t+d>gXse|7=
zo4AVkhOX>4sIO7yHVpDT?`M<#W;xG2{C}Mb?`xt%dD7987cikWFEpW%t^x!l_XeB{
z{`9q4V(qG|sK-QGlzm?(t-&QV$(GIhnksjZco84zySGI^Qd+w*nIbc^x`S#nsIJf;
zPPX+W$#5i^qkT<m9NbZEr%@xdwaBO}rz>;_V!p#vhx-v;VV(IEP?1MPxU^)$6^g-D
zkLbJdu7N7|*L8KS5{o{6ZtlO@1}$_>1q4MA9f|N;0?}Z)ZAyt9F#vFy)+I@*$e#sr
zUH)>yH8;>hVKIPb0%V64hKblro5_xUG5oTNQe630os&&vMU(^$<J3r5KSFmvmDH;U
z7Xx%pYEZp)Q`rPGU;ZA{UQl_mSd!yFe9^w1)-uzI&^D_KycT30QNHvaHZx&pd2?Ym
zM`>y+7N!$}%Gi9ULHQ^qBKNS&IWR*WK}x1SB{LSQ7)^GBeqJ6=UiU0ONv?e7MQ5Od
z7gDtu>hFWW%3}~_cXNk;vO)-clJ<79Dcws8=yYmrflB8M`Z{7uJi<Gx($y~CAtV-|
zlO`AGnxx}Z0u>LRA(0&trtZJlo+cje^G=AoqV%t2<bmC!2W282qoc+0UR=l%SG&^L
zb6<;PUhH8pXwfIBTpuOLXFs3-xgX!q@`7Yh-b~QN1S3Tir5&@o+IjPD;=x<Em<pvU
z#-x*|el#W4sB*2@5*rJ(EA<RMo=m4ln3xJ_JpQvF_X*fC+>E60V*nRjBOd~rY-M8O
zAs2be5aiI=c!CfRW!)riCLT>JV@6K1>BsKrW-~ygS(uLK)g`2Z&BDYQ?zEd=DoE?A
zw&eh1E_{j~v{R8jnvm+ZlDfHw3-2?s{M$<Cbg57EjVfMMa26=tS~zJH#YA$g#+w~7
z+sgAu<Gy}9I{?fyQz$8dH0Z2Chy9E9!){^+tACvqQT>A(Ik*3|iKW0p-pLS=nJO6Q
zlBM}`H$ieTBxfpt^q{1?-)FCs$wZRcFP5hv;&Bzwgq&j>4c|?XkVn45O`)Gxa-;V?
zz~|We{nY$0Huz`|WO&M#*`-K)S?!DIHc0Fo7b#+<-Yx?u1ncaA>HjN_@rJTzAXU65
z1mC~$eIhvTA`3kdBC%Iis-U3bqK^)mT(39kz}()}34y*zGfgnVlAxyN8B~-KXo@0N
z=nsstOf71I6GC>z3>4q*bzCu&AAyAW#$$9a5KQcGQA}p6w<cyT9I!?O%Kv^0b4#Qv
z2;K>`axkge)1y#iohlm5nBQ!82%x}nQF38$v=G^kzwlbAsK;nV&&I7go(Qs!8h6aS
zn|)fH&#gv7MDE-ibP3*OV&#<VV<ERkebM6}!&Lv`@twA)8$^kP>Rb&3-TjvqPpHcF
zG{*uubJt9e-13o;8&H!oJTxhCdP>=vtU@CR8i30H7rt~r*QYHKRC!4%5~y`T%8k5?
zjsQaS#$Hf7HF2c`29MQq|3b0<pt@dx`}q8;tcXU~4On74e%0jL?wvYlXxEispHb4D
zVj0zIFN>Pf!vq49EN-s8IfP*2+;IiV6I=&$3}OfxmpK~VD<Q}P;mk)^Q&)(HvG*S8
zA9GpNYa`<?#GA6PPRU7!JeaX2&or5!Kf_<Xe{X9H#j4=n3@)v&>y}Rp4~-3ezqO`6
z<Wj5+wc_gw4uSP0<4Gg)A7>>d%%Tn?7OV~>K+m{w`S{kglE0o$3QbAU0onIyq`GB4
z^O2ywz{0Ul<ko=TG*9OR<GdB&-d$2j@*CgX1ctk`k&xXUwX_uG6vkfm=?igr-O$yq
zhATX-H}U}c?;`^V5$5VaUtW3&%WeO727fCfKQ+Ht{y5i=$hD1tW}oa{hc*a`t?ySe
z<d|DOUES`(C$1ZrcOhlPp)<*VneZq4JNf$(9*xU}L)PUCCZbo5cE^Kl^oYg>o9WW@
zk&~owX@cT8(hkqa>aBe{Hkg{4+cO2KyA_|0#57kNE?-fga~HC?e8jWt^*`rVD9l9n
z=3%=HJH51$f&ExBT;or_dCO#Brz<9&v*>+5kSC&o<Sw@}-TMNAu6s*`Db)q*5dMb@
zCfyIbSurs_{Ud7X;>2%Z@Z_Kc1y4GTv`UFB4tx-24(-k9ITHD-ZJvQ${9j*d1|=?A
zyi?F>^`|9g$MeZL{b#dERhz=v!b7twEgoXTS8@B|wR)xgEzfw6jjg4H(}K2i`}FE{
zpYzGF6k$Z87~`H>8IM@db;GxVTdXa_xvT@ub7SC`=<fDw(1L6z?bgD*Wv`%`*$?lP
zYe~%1b$wfFQL?cy95?9U+jI@O%e?H*Wk3)Uc0KCqJ9FsU_Wx^)MsOi*Pg56gfqYad
z98_qEs92~&ofdar(YNcNL%yED_&@s%#+YPiFNGnEX7vHj=trT_5@Xl0`nrs>sLv}k
zdgOYl`DDeY>wa?mbH>=Qf?^J6CW}>WQw2K>)VDy<i$0nRcC?2ehwpep@tWvVz*giJ
z-A#OzhrE><?SHudv{U-%`r5bWm+i1d&~rM32?j<;M|KM#Y>uIgxx^F<59))-HeGYK
zJ{_p?@(3e>l+{c6^uI-a4sg!TmJ4hFUAviS`$8{mtfZ*3Q13r~t^v;=H=Pf4>nfz{
z6VQ8BmG(wNZteNp$-BRS=0=!MYX2}NG2b5yWm>+*JFkXIo&v|J1Y(2_@Mz4Tn~ewt
zt%+)5A`JukeB*NzjPK(oiHm0i=ny}HHziGyKKwT9<jMot&;UZbErejh<RH3<@tzf~
zr}yn?`h81@u%AOI5Qbm{&_$bOk&Wl~pK;rWgE_oIVBbR}QIGnxeNcIiO##}PluMCY
zqX0t?wqD_)#87j~|7#<ySHMv!%-;;;-$62;R4L&$6V|SwX}F8#|G_|AMyq-5&;Q!X
zQZhO@DW%gJMK);p%(^gaUX~>qrMhJH8tlZAAVAr2?hKWzsJaJ}lMh41`Ehhbf(+@8
z(G)SoW4m?S(dd>dqz7UjMYzK8j}m`c#Z4bqFdz|zLC4&j1(TuqZmShd#eFp(?YIb#
z73(BzS@l0)j>Gck%GAy9WN`6GXFWmO-on>ii`T&(eb5n&Nh!7_H}2N`FNY6sf)8Yh
zbn`-BX`qwWNqnTv%&z5b(NnG_O^No#DQ72Yk0@|CU4ay`7Vo)|XG(6@z_fQG6}RQH
z)m!*mKd+hWXj`(<O(~M_^{}m{Mzz{wPS9fQhMIQ(xm0{$d4L_>%Rr&dXs6h5K#urW
zx5VQ3DTeZ3N6^TP9cBv_kmnFNZO=87cD;XJWH8jqJjgS4HlS@LqF#GO<(2ei4?aBf
z!fxoeXp1UzFO1WP`z=YX2gnEcs_4^EQwT0y5}UbO;JIoET~XuaE{qH3o<Y`whjX2z
zy3tk-g-1J~^^IF9zHI%BFnMIn>jdgM4}p#(CAj?y<`JsFALkl<qKLd~sm}+X|6!zC
z!v6~frp28iZKn<r4ud4>ks%pu)=&tMp-)TawQSYnb1)S1)ybUDF)S_btz>M_{@C*u
zA;&55izqn~`bVH-X(xw;uimLQ5A&aQ-2x4rioLiz*U|y(Q2H&}IGYf#zzD6IYA?$7
z2hDQ2FS%P!9)m;n6)b!wXrCo>pK@#Q+s_kW^}0XR%$!#fb*>3WatVlEgiHzL$c!6e
z#*erqi&7=A-kMWI$s0!>e)^N|eRcEo3eaEtfiSr~^~Ps=>C&lPaPS4NoWZ2UeAx#-
z`3?pVuoO)WrL82Di73Zgw2WaC$G!2nq|sSXQPwZ=K}p~K=09Piq?FuV*Gb=)yyK+)
zRmMG}Q^S8Fj_N9>E19XQH&jH@&b<b2c;A;yzUuZS!kd+~!GLU!LQ|!6-VPOR9s`qu
z-aC|Xd=HydX89SW1a3t_^nmaYHBt$Me*~Z#{S)O;>G4n0$xmyX`vk;ED;61xin>wR
z7qZR<BoSO(4!iHHPjy-4Qa@T-uSc3r9T(T5xprCPRk|8jd6UO#Fwn|f#JG0`;2a~>
z>G<mI>pid|8cInkoe@0W=%`r6n3-7p2Co)?Ic8Aah2yX!7B<M*K3H~xBQjo&AEC6K
zAf+vDN0125Nr$6ZVLE?|1Y>K4PP3$lv#d|P?fA0<=LKsRTK=I3{A$T_<3{JbR3Kv!
zF7d=tCdB(^%*U=YfV1*@5VHLgc|K87PTxgK1%EP{*qdaoiK{b$35jXg{dv<g%?2Nh
zGF}@s(yrkXcqq++>zBv&W`JDL7}I4QzR1SF^{J93zUM-2)Je<?Gky=^W&9bwuI|a`
zfvhtC7ha1O5XraZP>Q^Y6~@$`LVZ5YcJy+<`&ZuHoAnXDGgI0{G>{?E1hh~{pu^HD
zy=_#<6qEH!V)MUC!i-Jdi@-xOuA@x=-DNl=Q0Bz@S38{gVqgVt6CiCQb+=x#J^O&Z
z`ThbmJF?DaMP0)3HECGxBw6CzjpB*bz(4i=hgZL?W`3$!ioBK)xHng2iu6E*rlI=s
zhAY<;q(wk^XJqw{LXL$ZD=6H5xJHc{w(%TRCHtsMk5oI(nIgz9)r8~#HM^&Ww~J1Z
z-ik^%*tlFSo?XmLnzd-~M>#jM4(dPE-Jj!-N|8_Kb@<6mxxjT8Y7KJmb<m>7JD<aM
zpD(b})2r*hyr!9lb53j7^LXe0W?H9f+)@&+M|~$rmbBcMes)>L%JpB{MpIppFwlSR
z&H>2bCKope(fa07gqGP=&4C40LMqSZmZl57Qgh6yzILX4le;SDbO@mUY>LJk!mD@o
z%3(PIaqORb2coiP_TfJL<WO3dWvHXaD9UGkPeiU@dGC+D`SR)kcCzqLs<D%uQpi(P
z&csidyurG(L&+V}yszqaMe!}mlSeBUW)~X-pr`at|N7#A)eikhfW47}t}?d4=h2w3
zm1d*(BWBkHSbjOw+Bnc%e6H})1dFC!xdwMe1>e8+cJf=T4f<ayoyE??W;MfyIPzLV
zMv+89jlBCT?~w7z*Q(Cbvm!+qG!_1_VPXW$G_pEv_93L9v1Tpw2Dw%hDc4!{?Av+0
zI>*!|^Lqa+--^wxnhtoG3k*g5u@L6oxw!U|$1JFN@vbkf)EGaBn~q`({aGn>r~dw=
z16^R&Ll>zhuHWmf>-huD3x(;$Kc@YC>+DG`FN(4s>Zf_`J{A=h!IgPj+U`d2#^hA1
zy~Xt+=w)_K4?Lc}IGwz=rk9P1CCTZ<?rV>It=WMDCD%rm!#v3hzLAiOTqNpa4+#a@
z{GcQ~S_HmGIWx&V;=S;Dc~?@XtAWX9dGe&M)pU}r)I%rKb}C9D$5h$9Mup_5HmtJH
z$d~|3{bX;oeTBk}pc#urBf$qOKc|>3{`3;+w)hq(^>x4rz4$xt+1z4sy}b&jCC4!|
z-&Oxej)oT75iKt01_QZ>Ic8AME<wJNvlQ1;y#B><Ru(9uVF{i=Z7HQ7mRx(|6~4~f
zz9#F41UWkc9|YOQ76Pd=S2p^B7aWdS%Rv!7fCA8(T(0AYdTHR;z^hge@W>No8P(~Z
zKdVmr-Mb*r!v`Lwyx9qqbB7^n1kDK;65b{DZS=TTCa5%?wT}DzqwGzjs9CV$k^GD_
z2EUm4?>%?Cc%w2G-z)pMDzS_aAt%Y27mAZ$>2@>qHXTXkKJbjgl&Psw@3n;moAT8a
z|D0sbX?NDw@-=%ZF7SxsGXP0bs{7_!r?;7+sb*Hh3n`jLyw#6d*HpxuiuO6A@6|q9
z@}?=$Z7|8g#9K1jU%gJ@<;$76;I^bVy|n4#eYyDiE6~TT%R<z{X{Eh7(Ub>!Jypb2
zKoAOIKS6HoDq-ZTxto**mR#6g0%+30;&X1=&sxoCfwj&W-)}?HF^sgwMz_b_E5}=`
z4Sv^Q27}w)LcGn)({=ie*Ix^0h^QuY3e&PrUaYRCxHR3Bzf+gmkq|K7xO!!-&Ypdm
z)v2iL{<RqDUTr`}0R~+PJ2>xro-e~S>ymN|suHcuUw^7(O?{)>U7jETFDE*S_Bk+`
zlMFse49N5q1b$A2CUS^IeF?R|30}{$)^S_pDTh)8RB=5qg>)PcnhTOc-VDa$N8!~I
zP%w+tfM;|jPgqY9mL;$oOQ{92U$o4w_oe>E5~L@hDQ=sc6-&)m2U6cVA26?1pzU{)
z$GXS#J!+DO?8sbv+qwAt-uGP$5@3}fsy_fK3seY5pIxkMf_1&9&C~JYsPLD|e~mR>
zR8Kx)ZaqYjc+^xTA9S}kMCDVCM%jP};8|y?3o#6PV$n9&T$F>P0bKbv8r(rIYH35l
zNUcDwAGgl1kchE*(6>4;?{TCZ)NArnvJ(?C^Bb$d=sn&G2acytvWP0IhmE*p92Tt{
zc$2gsA{MEx4ZY?19L9o4Ih$kW0baXP`7W$j>hBSFUlwvbR$pzlB|!0uS3}8mBh4WZ
z;9Ln6!xo2GRl~C<_+J)8u6}EL<Z^X4?mtiaaU8|Oy0~}vFTFY3{!1VsVB|#us&d>*
zPBaz-r_u|&p>!0Te1q5oxjVRGE@k@Obtub%_G6c4Dn#ssIzG?a{!Dwcr<3M?AhY(7
zgD+o{JyxQ%hw?kmv;tqeSojH=X}0BLLIatPSAN}uXMA<CTl?5%og4J?wFCC?M8da#
z7@)j(%h#Q9x<*lVCOnQgD)w)u%8=L`Z^?)*^)y@c4@KqVf*%&&^w%vq+4RWTx-4mF
z?i|BEqOr5vqU!zbAC2EVG*`dYh8GL%(ly^kFNlhR3eOM0tDTOA4%f^s6_*b^kb{lu
zgARPZ`H#IF&9Xi^5H}P8a_Afp-T^fbY0vg^Whf(O)aR5VRw16V0G<3YRSYSwG$xN8
zfE4I)MGSQPoPke~bAzQI5C8lY&rx214=eu(_gtHBGqE;Kyr?lL6I$OpJA1`ZT87Wm
z(Obqq+l<LPUlC)jSc}arX9mOPF&0IrKMSiXXT~9_@Zzxnc$YQ+m9FP`kh1Xn7jx-J
z_}z^rmH)crCX*@O=QpY=%iUrmkL_3qdL(wh_X3B7n);Rp4GbUS^Phao&k|9%+a4<2
zLp{OaqdR+^&g`|EEK?x;1$DX_pTr8GHw0b@y|_05g2TsaBV*6<((8)-lxgU@xp=N+
zw~v#n?`v<-e3N3DLQ(2uX|ewmp8?OQDf2>2nU%)GW2%T^aFS;;S2Xgjh55qF`o{oN
zPVUOV>2(o)vOTZO3XdeIevq~@T+Lg~D7RdB&4^&bx6l<gF`J{<u1Y@A$H}c1wDbEl
zBWlCgWbjtRY;ezddP1|)f`OsRzK^P8kaPp7zY>D)r#^q~k`fm@lDgi}e`em`TTNm0
zHCd1I=?cDVX>pVnv<xS&&w7LcGxTIb?#*s9bjoN$7D2pj44XvpR?K8*U#Wr*JO9Hv
zvhxMnt>$RLs^zttsimB@q>2HS(71Ys5ifcD6t@Tpr9%|eB=mj~Zkabl&JBxQ$Uh35
zZ!(2$GZv&4H{dK4+{K0ER#<LMq}uzheHuCxZYFpPNA^^|F)oVZ_BF-lD54!RkNJ>u
zguSswNtNrLIGqZla|Dtj8cgtn+Ei0bf;7%|h1OvgJc@nnE&r%Ir#6#N&X(&qVu_kA
zs5FPW{Zail-~wLD&UU>+d(K6ADT&jwXe5Qg#vky9lks9Iz@BYEgGQ{yvn!$nD`L%3
zfkuQ^>z)%@P0bcRoF=yoa4yxR+6S(EV*PwT4i|kKpHd-$3g_OZJQAMy^<!1MDLzmO
z3GrIFqpnop!4XrLS*zY^z)7xk4x<d7S5mJoOOeiOwL2PEkvox9RFHGwn2W_PD}6QE
z$D{^#r@}xk<Wib>ilRR)PQ1yE<@~|v@CH-W4Hadh!K90`MOTiE^|5cG9p#D=VxuIk
z<)g;<`;>f=bC?d}FHkk}Kod55-=B@yFoe8c9aUh?@9B(g4k|aJv^$KF9vn2cvq!yp
z`EFs~lw$MPeLHsYsc_02^Wu>myU07kbR?q@4LLjCp9Z^Qk7C2TuybFuh)&N;qDr9Y
z>e|!IWKUGCCx3Z5RekO*&vck|R7dRx1H6JHN~=&)JBzQAIp=)U0W}8ctLryRl4s0S
z^Bt+nG)m!CZ<za4n5&7eGrdoVmCiJ(e0r$7-A`c22wF!UN*KD=CKY^DkH*@5ATd29
z)N2GrJ3NzO#F`a^M1*>M65IDUeYudo^2TH=>sLC&YB*wJ=uFUJ(`u|utCB_fxM$>A
zmW9ge_szX`)V0^YHK+IueTiYSD|clXYZ%&+g>Nt5u#}66qg*#f&Hu35W=4T~QL#)-
zJciA$8|J6v@3GkQql=V#C^3$b-&~pxf@i%YO5qUy2fW5MoYF>UJ^1Wo^Bw{6c`_VP
z7q1Xj<f}7wdwZsl<Gm>rm4>;=KVw{E&D5dMRMojUeRcoe5fQeR9;)KCVUM=sEM4&Y
z1{-V$;`aA<tP`t!;LMj|JNW1k+QBxk^!(tp7#EuG%<=7^Q5)kd?yet?D;=6OI`4J@
z-_EWM+pM61x}9f0lxc0^0|9@2$GTT7VIRBvd<|HO-Mkghf)Dp(*2Y<?qd!i*9cNF@
z@~Bo>Xgej4Wg_S8kre91n^n*s>h&HS$b}XgKTC~duATv)cfL-2osDM1+COT`BBY`)
z73S7equj+jK6m#0HR{|q^MVsHH{`V?$!sU{_xLAli*^6|v9qDW@g*rdJ1D!=b9YpP
z{n+=4%Hz~M)^omf^^U>i#=N2zJ$F~D$Ii+us5LcNZgf<47Rt=b)#rHmU7fQRh^w|Q
z=-B7GD1&G$R4k7kbt+yUFxK}53<+%1tB8HT8#Jwt7v4?f+Vjw9l}7m$Rb5%rs=l%+
zs}NNFTV=NRO{8QOy<*-AFRmU-{W`NsvmVPmy-ilv#?mLU^xd7jHULe#X|BHZG8FrG
zoEx-!DuKUWK2hLZ?4oyj`3Fuj&WQTcW%NqM`4VxOAmHM&@ppe`lFiTrE6Cr2yBRDE
zBC`z~qqdc{jNO^2IrlfIA^N=@_00Ccx@NVFu!sQYq4}DDz)rqs-{FYLHL}DmrF#Cf
z(j;uz<a?=KZAR6j2X9}M+z_uAe7te!Sew@hp?vH|-Zm}5{Eo(B*kbyfKQEN|0b^Ot
zdu6MmA1V$WSWn{YkU)>}lJB*t0R*qP{#)L?`*Uh`;Ly&2Ml*579-+VaPa2D=>{1rr
z%xO{&?kfmhU!JY*EK6P5%|a1GKUc}%4xpKMYM8(cm5kOR1bH->t0r%gToJn=|M#x@
z`tW`+qxI1{^=9m3pObsX?|dy^=ty08>@yOq;V;Dxax6a37Wgb4PYrcWWk*6<7c-kz
zv%fJ9pLAawvA1Imy{a&<{AkV9`@rq~t~{Xxtp&4rzfi`|<L;|}K8!1*eHaX$e_vxC
z?49XZEGoSx`l&6ByDl9^o*+?9Pju98LtB`#;5DE#=BZ28&wmvNyD|+&O%pFS2&*~1
z)Sbr(n9MeXOIM|Qiu$sBcxu?ivwdUk-ksdS?#?6XKR>|xvk;Nd>vY`h+~m+D*)M$7
z*AJoj;DPn#Mtu}+`S<l-_?nA+9A6}dp4=nc;?0C0F=vf5?ylY&rLcWR<%Wqi>y_|Y
zRh;Ge8ibS_Gi3#}@r3E51}#EB7STouwO@V51tJg;$yg8BfqHP_xY=}ZN=hZ&ou-;#
z7N<EMq2tC=%Y@|~<Y?WeG}N@!<p`ovW<V|E(M2!#E{zzzqX4>;A`O;qu)7CP;SXip
z<P<t4L?ho!AX+Go7;ZQAz4HXnd3WU84uAt=3R6OMFliF@m$y3);R&3=a^Bgsvj$DR
zzlkcZ)WA$S{CSyP?mIWR?I$KiYI6#^OH8!VLbf7;mSa09r_J%(a9u6LtX2LrJ~Dzt
zr_C_}Yoc;FUvNwBSAv6cml+|XT~Kkw;hrCn@>2;|9-eyXiIm{c1q(WyrAj){)d>%9
z%X@`_J6=gdsT31@ku)rddn<yRDqI3O7~|_KNq{XlUeeOIo1;Z2%+<%=#|F7IvX$`b
z!oLYfm9&59bB8zB9=T+uaaT->>M<>hW=6R=;O{PVlqGUTK~PKVv46O>!E;oONNLxi
zcIMuk!>B4U=Cxvd>`Sj%vCgKb%MZhG<Kep06JKkKdeaEtZ5G=8L~Z<CFD<HFR~&d5
zu}6*xh7xy?ubH8A$hp8r0>HfrYN%wYp_NA<XJ`*MMv45x^za}pZE9l$3U+$;rCrfJ
zv5Vc<hQFXIq>QEw&6){FqLPtYkP!Tf0(vDB5?8Y>^W(V9xX54!aKWZZRfg=4j->1Z
z+AADFjp~A?Duee6(jhulkLb9q_K`&$GzqV9mU6ohgyRr1#a}n*g91A_HuEmo*HK0X
zzxy&CZ?;-yxCfh0(HRYXu@%!SCDh4oH~Cv$10FUCf#ljg=`7g!=_DXD?8B*U%%-?c
zQN#for5|OcRGL*Jp!qipaivQ{*oBXUP7EG+{O;xhC`P@c6D!y<^NCqB+@8%5z8-lV
z;ySRUNt5sZNQ5A7UY*yNbf0)D`;TN8Eq1pyZ9eng4^Fq;&``THQC{?#82&Men5AZh
z&0}BPmi*)%3vDwTS>8dDN=<63_Z9|n3%X4VyjM2FYms!Y86Fy<^UdX)dO!@<JAnFg
zL6jarUe({w;P)O;<szTSz*EOJ$#0fn4ZBIAyjn){o$-b0*hpSObfq1oQ!k0(uf@?&
zVq<;KuYvUj?_ncWc+K<oJ}wFl$GujD-{jc6qfHJf7s~kmKlUI!@|BNmi$}0adO3D1
zSK0XebuqJ!+5vz<nu{OH*qQX|1fYo)4Wq;Lp6eRkLzdBpHm|6(t=y=Z5eG4_&4bva
zvU$yBIdB(t`rVWT%NO=Xp{N|3*9yj>0w9NUmPQ?savSw%8XG#fN%%+pf}e>LSkBLt
z)}O?Rv%VLwb2S>G^7quEllXQ{vgqt}LA2Q{1)%1A6lQ`c_6(`Nb6XINXJYg)?RsWH
zIP4IPt12k{4LuV5*7x48-UaE1OaD~9hcM1JX9f@6o5n1Civ%I@ls2KEv*8+=Z;26p
z^wFN^$<VB4BB=NYW4w&2Q4czEQhnV)JP(GFl8jD2!?6p^e}S_+B*Ib^^nX`H(egdy
zr_0XNq}+kym{9%9OyI*4wg}73r??+R8Gxl49x+kYvXfN@nna0|yPAYc&iL;4%pk!=
zvNaqd1N0LF!Hjq9Y*4)S3)njAS;%z(YCb0VcFq#Pyx}n070p<ck^c1=aom&_4wyD|
zSRxb<3({8V>$f7P(@PwA+USfBs=gZQUdG0Ogoto4q=jDp{icY>+ZcR#vh!IOj_eYy
zvv3?%lJ+d*@BXN=EKy((14%R+EX(M$Qo7RW!Xfr#<%@@Kl^v(??T4BjQICv;7G{{f
zu7uUiMxbMMA_z12E@F5TB=9#S*m8p`JtHN^msY?G$Ek@+lb|AUl!Hu<O`w*(MWNjk
zN3Qh*fqrt-nc6Mf@>~T$bYen!cY%;}VnqM_PnOPlECO=EH5jj~!-#}XcWq0HwdfFe
z@jt;X7aY75qai6<W1Dzhj;;ib`xD4)MVwMVFmD>{y~ii)SzZ~^Xl88`vG)ev3SQPK
zsC1F;GS8TD8waQ_ppW4NhRtiGH0v@)Y_{>5)O#C!8|Qc=VS#yf3Q3s2n7FUgV*$cQ
z@37!Pv3Gum%8Ya$g3Z={(-Mh(kk3W=p+?!s0qZIfMvEO%cY;jQ(ojgoD6>X<3-5H*
zFy2aFRtEJ_mGe<}COq^yESeNzph-jJu8X4CCxG1HEg`)FAeByiD<Ov8eoT~FeU+iq
z#|Zbzz0T5boLr7qz;6omR_!z{IQ}tbjtFL-P-sALmM2$<lsGNwaAza1u?W4Ksi`ms
ztM^KJBbMg)pv8eT&&>tg3NhH+tZd@u`Fm=tF~T^?yA-bw4HGS3!dXuIwc6x{+pi^~
zYa|GvB+z6>`N;CKO_ltc3i~`cq<2=@?I5=L%Xl-@O7Dv}-;r;@8_n1fzTPks?7?KF
zWvhy0xK1V<^1~@yl%mTnc(cCykFMaEVcPq0Juo@RdzYPmF<$IR1c>z_2Het(hC6gn
zu_T>O&z*HbjIaf#RO-Ap(P`uso&e)d`C?=BJfj;`qdfRO(eAlP|F4(esfO^>t_os>
zvBz-`#b+vOo{Zo7rMouNH*QCfuW}=C?=t^#t}OCdwTK`2TI}o&=8cQq<5b4FoWkYK
z#lpzSUCGavRpjkA=pE`u0;x;I!IN*Ow*Wj5-feqxM^T>GCp}<<FYsnSX4nr0Y0l`P
zyq9{|Gn0td1%MGFL<P&Wu>W};+@@Ngn<pfq@Q-TrAXSZ0t4?$T+~DkL6(tVb+G*Or
zyi)KPVA3I}0?79tvrbf$B%k52`!~9<G*7gdcDDvz%kAK%pokC=EWcukQ(B2$U1}v#
zd>xuqm-lR}y;zI`iY-fXMT1_a&p-8l8svq;=4L2<&e7PmaJ(p-7!HGNlAd;$?lM=t
z8=mkToaj95jh{TUA@i*WGA1gRD1tt3=Ovp7(IJ-}yx1aF%{D_RF1UjyoDIY+b$8w(
zR`6GYO0&pq&C=MG87(b_KK~6C=Wa5Me=W>iF@g&Tsbi1c#Yz5_>v9U`n?3#<Oa@y+
zo@k$dbgP^(oYDfgc2<ECrnh<jmkWU3luC7qrknh58~DMyD2dohz&rL>6n|EOr?n5h
z1x8e8k7Or54&OY4mu@R#=Q;;2+^0xJt=Ap}8~`ML)*~*R-NNWm9NDRt1-6JYNf|q=
ztS7ho1Rgzx$6rBFHwOmf+|X|eY(KrDi8elXyQ)8}?n$yda9lIbnrn2|b!(#eRm80M
zb(^RNP+6v#qSzplzDe5JB#IxJPe=*KS^>MH^HrIdV5ljDm6JSnpW?YEXnE%X@c)}b
zUfa@E1j`NZIg*<@$J5HQ<AQpp%*)^k>j6UA<<mCmp`&v5*PTfb6I|72!DF-;x60gf
z?)2vxXKQHv%XdO4c;H|TuN)1>lsUKGC8u)n@!`q53FCTcA3$n!63e!<D46L9d!Qnk
zRJmE3@;|M)sSyT%!%7MXT1H$FVZiy8`8Fw%VMk8AI`V&15a;F~XNFUF$ZXq?khoX=
z400BC2)BqfruY<W2<tmrk#pHwMKZ-vb1pJ#E9_pjGaII$#;55Q0(lYzQF9zQL3Z`;
zSPz*E3?!@U3s95yxtPR_dT`-<rDx#aoz666NOQ|-?AX*v<)E(p2Gi};1(pQCTKS>}
zJ7@OHii0fQ>MDaKQ<#x=R$0yra-DU0-@8$dgBveO9l~T@PU9|ffwCyHxClF<*K75E
z67r2lWsTr^==9~kQ9e_5*!gGO(!M__N!vCQ$F(-Be5Agy({5TnbZN*@R?I3twiRC=
zZ#&kh-!`JeER+;HDQ&M9ZU^&7dM{xv80waFcDL%AIz7T2-=-TfaDX$5euun`i2IER
z{I-$OpurbFRXgC-r1yGTS}tcv8DMfvt(jXqA2wPq6Y?XA^71zY;gX7d*`F9rOFG0N
z!fPw6UkZ~(mTFO^AnwdAyhwi&2{Q&HxVJd^&I=D^mrW<cStWTcw7GJag^>*I$D21^
zo99YOIxdcK+B>_guC0V)lMdb4@`6zTD;9cgIBuSvGK{1zoQi}~;n?mjipNxj(p%<+
zjPD%er!M~}XO->3Ah%t|@D$8KDLCabcBWsoc4M}XI17cb%0KBo$a~Lq75?WSgWTFn
zF_CM`0y3R8u0oTk_}e)5>j>Clnq#b#$5n^EpTNdB)*QhitLmxX7XjN`V};p+;{Gyy
zfdhM;g+Ng!CDFpSc)>1zC<E%6>NvMGz&Y|drAbY|27Ix|00Z`l(YMG8WtfA~lj0$-
z&j2HuSo&-DiHS&JI&bTb5me4UtG+Ns7rdCSVsON?S>A9&+^2l~POKQ!fa;g{LQp^h
z-CeT=I%XHh#PGWW7vYwhU|&hOnSi8Nv&b@NBko9!pp0uIPsA_*6W57h$Hhz=*5E4_
zRs9Ywo#$bptR776sk)dIjw!yQH^$%VH+OylemtSDNsN3C%oynZv3w^XMaf<cOd6H9
z-$EMMT1%&TYV=4H)XA^%X7xvyW&WvL5V9BYcEjr}hr?tCs_f)&2(sgdkl@s9_Q-u#
z`QF-E3(M_`i9=`VY7^Xh;2|0r5sZYOhfT?+>>2sK)e)t*t%cC$5&>>Vntb#ITDWv3
z6@tJv%-N?kl34nrP%|wX9Qp^pcW%45a3))O<Hpfrr)l}_+%EF_b3W8uzo;4f_%Avn
zM&sVK{&~E!fi2wD1xjmN_?CYa3zYiF$^m!rwLbt8<se`Cl`oQHdD)|$qAg}-kV0}q
zY}2Ay5fnK5!}u2mPH7?!)-ay{z(`|T8W-gpS4;#uxwY#0^l%TH`fbRQ=Z|(r7pt^{
zVwWdv0+!~xD2!W>ug4>pDXV1u$(jrDc&cL5JZMg>R@gtcEY}A_-h~ove+V(>T*K^1
zPxccfeIfc!0YWLs#YT8RVFc4b=#&kdsHVJYs7KNYFzjAu0;U$m@32oQz})fycFz4#
zIHE;W3eEtoz4V8fFru|3=Vp$zCcY{B6p9wC2(6_+%2`SOIrf#~9tF$w<%~<e8C~0-
zl&~_k`tDwn=Hls*47%*tq?4_c3u>R#Jl)M0wAvG8(-#&1(1LV3b#ujaZ#a}<`q+Hc
zFp2io;`t^&KLSxP614sN3jAC(eDmku|8D+VD~}`5w{g~r4k<fuC!~V&grf61uXjwi
z#8N+?T8FRzIMOUf)HdaCw)a;>RBnYPxyQaLP;>@%=B)v<WV8?)*h+`>JA`Mbq3*W-
zNCJi&s=GDKRA-+)K82}rup!H7b140^O$({T0-dq>bw?Fkl&?Vzo4-4SSKI9u6iko2
zwbjGSH<1W2G}lh0B2ZFpFZi>fT+wDimsN0yn$$wdIq)CiyO{}Zn01Fplw6Vy65_2V
z1LkDRR_q7fgo6meq<0O|5h6_JOjGU2W^jrx#fofckq~M4<qcC38prOM*YVo?5jQFq
zrnC8*n*{7Px|dJjwdxFmp1^JAsvd08FeZN#nEjYi&O9-|0DRvx+0l?jbD`X$Ka8I|
ziXkR#*M-$+eE7R9w3999@-KlY{@d(LOSPJE+rBCDzNB_m<Nv-?ziN=X_#!4RcIdwS
z<7D}HFV%pF&24eY<=5H<oT!oEex9%NTlnXY`_Cl3YxF?0M|{7}MY)>K>?^xbv#aI2
zXbW7_IMEGs>}Ao7$--L!>Y}6Lg2_iG+1po(=@RI{GXe)*5a(ufbBCFbZv3W)&va?i
zQXwoH@4xcy#k-$YyU3OI9l%M|u<9<N=bquTjDiFIrUan9#=~&?6E3Sgm~GZ2FXRq9
zd``(Fj8e0jFcK+U_ApM9`r_9|1aZalm<yidhpo}=08K{(jj_As)239v{)DyR^94!2
z-1C{>F<|6R0oLBAk-Z3Jt^bnqwlwKw_Kp6<e`L`EvXC}}j5En&Nr__0^Mfv3hPPY>
z)cofRuY<?j{w&+tLObh33u~VpX|*-%UU9Cb_%`I6v=tvVMSr2&PCQo+T=naVpfq;K
z@b}N}IRPMI`#cvVI`@R~>3iO==Rw0i2Pdq*LEf}QhS|Utr55%6FDW~hh8=Boet%NF
zfWJGKbL)7?{DgK6zm_;7^2FN~Y^@~+RsO?2l%Mb)$i{2sdO5p3C3Wz#Rlf0o!?DTH
z@0hQnf~xJIW_qIN$*w{(o}+V0{4AAMr+$9spQS_I7}{FiYy`cq<6Yl28|LrnMa1w3
zH&=YhXLB_7qxvBTk&PN?jHob&%xAy=uW`O&f8VFt1#~&6!K$B{{3mj5l)<jf{r1K?
z3M>|e$sT*k1>q;<Ys_PB*QY0IuCDOBJtdu9aJS)sb?s=@Q!vUR9(%^P7M)tV&j}~n
z?70h2&(-I7au(i>wPp|$PG(EPrY7Q1(`W70!8?|-@a90h8oe#}3riBzGh1@D{1!)>
zZy!{#p=qtg!dFDY{{N#{9MCLFgEmRpF`ILw$L;EuKtN8?J4Qoxh~pC7oGN=m^l!GY
zlM@-229+1|)Bq+X%3yrm4}8sax!1d0C!;+-`AB1V`?o+c>sP2+y3@o+U2ktvZN8f}
zw~vc_-UOG}w`bHB8}{pxbe3?+PF?Y{eNFp56}@fGOFr^3%*(6CQhs4pI-5~cU<dN<
zVN<R~WL{y!d}bL3_a`&qSUXaqO1!#k%X6UPZb3oMr2?VqZerL?Qx3B5bM3%hsU;91
z{Og?;S;kHRLl$(szMY+Q{nkX*kn3dz<kdT7>O(LdPg+}!?vNz^yQZOGm=_mki2L{N
z{_`wjyhZuYo}<99;05dlt7Noi=O;bdTQ5<$vVGiv>%*7yGt~iPs<XHm4&uPkx~uAY
zC(G@!!fT@W1lI<T$llurmoY83H*qWSgcGo%zU@LPmu47FWGjFa|IdSz$N>vl+LF|0
z^Tk|PR#S`)`L&gf`@E!N^4k$&l5c4ukcw?B8`Iu6Y@9jQ^Vv^=D;}?XT^z2n-~avc
zmmW(eyDKB!?TvjkPkbgyi&ch0_>d=_TM3$*N3mw#S3c1HXZXoJC?_5AHc~pP?V`11
zlyRxWt2+}}noWQGLe(q(w8$4@won&^fFRkZpk((zcWHva>n(j4B09eFF5|e(jnTx3
z&98wrw?Kozx%{kad-!{ecl)cFCkuZ)-F-jVgGSF56WsG1j$cvc#d}Uky1(B)Wkuzj
z5B}<FE-F`Fh)<ua)du<6u)CeX_bp?x<1v@Bxko9i-OKG@(3J8EFd@-mlF|CV1*ZCU
z2n8Hy2)oys&%u2}F_CtqYTxKJ0Yt-PJH_PBB{pR@E}W9Q!V<C3@JiKmuXRcpx4=#$
zdK;ZDGpt-+=(g&@$rej^^q+1OGhsSt4!}k|K#iKen#<W&c;6p&suK$|qW-FO6hB&h
z1MJqM7G^}`3o~IStgZOOcJtVc6Xz_=(C6D?XB9KJ5S{pttmEsKqOegfV+%Ug+$wbY
zF<8kN9~NOnhwp`CkyeC`<7IGUwwX3c<>tlEkgPLc75S@CJFI3IYUIGZO(Hg`JieFK
zrh`2B#{10VIp)ULQF^kMZk^+1Z6^iURxZt|@SjjDflXl@rbqU{oWAt3F_q@z;+xif
z<R#pvl?t4gTK05by5*J)j{0^A*Hv{9DxR8;OZ*Z$;Yc~rQe=iaIpliY_U7tRbcfZ#
zotkH5RmonHj8T=lQfa>%irRB~+L@8VceyBB{}DQ)&|dKDMbVkVl4PM^?=%?rT^$pJ
zYYbRh{g3UHxjjs#L`tg`VQ)&i^7f8Y|FJ!+XedY@EsY$DpjS;dv6VM%!0cYDOHfDI
z-+!U?|6bQY&Q)%u?xWuO9gsO^zyGWd3NGpM!J_u!pg}Y076fq?73@d@cIJCMTWA=N
zcUlVrO~q$bD6A8Hli8C|kh5T<k%Ljt`anr{qU_!actSFmFFYqoghc2<OgW-mMo#nX
z6-LJ*DUA~<B7ASRAm0r&ax8;h8O|qBJd>B-KP3`vH1XSnn2@YnA-y51r;}C13r<{V
z1#AagTw`1!-&@aC6423hEA_78S;m({3fOb(F`E~*%|-dR-)67s?K+CQ)D*rfvFX=R
zg}Ta@dac!EVG4JcC_6pnBn@!n%t*>ri1i0(8tc#_ZE*QBTU*2Ay@0G%_pRaJj1wuY
z<DKnhFp&qG(K~+-%pRV^eDM#LT*l6^Us2mofNyreH-rDakw@jVE%A<r4!}cvw-Q3Z
zO)EaRedF2K)D{DFGOYLD-W}#5Q-o%6z`9%N0<SLeLx`^HApaDdCy{arPo=oQc;VYA
z+hBtottnOC=N9P1HnCS-VN~8{Ho7+~@G$cA3Vr@lmHsUw09pVE*H-x(tn<Ly_vVP+
z*{<GSNt@<Bcu^Xsv{Xh+I`-rE_QCiqKFAYmn2)cP$Sz17AW@>#>8Xa>D|wo$Cp;%(
z;pMTgh6HWu&3gZLyx+FC;0b)QXTvGqI?Kf+V^Yga6gUu_*bsvdC;W-qn5!p`<DQww
zKKenh*Kd6ywV;v<vBGPJo%rut1{}BENsphZ)v7je0V}l0T1X4l2@NqI{_pl#9Jf|_
zvEzciRovE)>r9l7L>(eKfSn4$=!edy$Bw23uQ+Av(Q91TO1Om=!DI2S$I$PvW0Dp{
zUplwiqwZn~?~N1`<ZJ_x74)mD8^|>BKXspQ10T8mc_MZqJJsu!By#v+hylD;590VL
zPEcS(6))*mQo2DaNRebhb_xq}ilai$;)y%rhP3hRyUD^ILVdP{UZowIdQ;1VJkro8
z(f~eQ=>hSwuJ+Cb^WqMp9*1cKU7x5v{nK66d0liNZ5+|kU)B3nAFBfhmQ%gwU;@xc
zKAX5BH~FV>xbA{J{X2l><JrllG0!*A4j;*T=POUj&*fyFRr#o`bRkFBqoq;wDMniP
zJ|b@fA77QQ7~Q!$TM3_uI{Ptq*gzfC{wRWE5kp*sa7?0`C^Cscj`bH~tUNa0OLOX#
zXF}3N1g-V(CrA)N+F#n9m(ab3y!5007m`vrD5NsA8m=9Ryt}oP5JvhprmH(Xa-*lf
z;gBzTxf~+65o}4<bp_?nJ1l{IK&MSqB8WC4ffeezWBv0ap~VPiG@szVITl#slrCgS
zBD>h5`GnA?c<_)}ZpRSABi(@X<?4I?-aWL`=M&idTLeiK69lmA1VF(Mu;i^|)Lu$`
z{vo((CCA9$U^|kG3Lew?-?vE%{3<u3_xt+~1a`!-4$(bn+e%>kZ>qi5@lB0AL?Z77
zZ!W{I;CSFd-z|<1Z(KB==)WnM;LU>Bwhc)>fXjcGFdS`@)_@!Hkto-mKdDGyeBr;J
zPUn8ec!>&HF!Wp2XRR`%bTfSC(M9C-xy}(=`AuTDa;j>DDQYL(lf11Wm=$6zbUU+u
z=fme1s%(bOIfACw_Y3T}EBWAq>8Ghm8dK(jcP;%(!RrED7iwONr=|vsPxbya^su6j
zx%VIAYC;N*$FkMb-LE{FFnlG=<Qd1q>89Y>YPOSycD!F=fA78h!-h)2M%PU3=It{%
z*Wh+0lmi9$R9-fW@~e}8%AE~nLp%Hq-`73E)HjRWZL3WB(ElR9YkIXYad&KRP{5qH
zz)HkeP{wISx`uEtLL=DUCsfKGya!BWg3mdI(rh$}jFonL3O#?eYQe<+8_TwR6Sk1$
zk-}74b8h+1hhM2oi9PB|o$fZX$uDK-V@iSNy95r~&rZJM1->`Lb=@W=@voe7E}Z${
zKecu;Gwv(<)N*^ZT57JKqqR}9;T2WB;_s<U3m*hsH>eKPgI8sog#{0Yph6heA3z`P
zCC_U0HDB;Jc;klqa1G1U%9is?l7DjC*K(ceiyoykZ>)61n*1@JcX}T>Sff-e!=I55
zBJw)8qC8oBWGLK+8H7B<!3h$$#O7nuR=eZxEjehiYW1AAzcC=ND6|Xh51g`(cy{$~
zYR}TI!RIXsS5yDa8wIT$U46k`$Qk_rM5^7V;AnR8K@7(_fSN>7P@fM^d=$M?hjneL
zHWq3{vlk{;HavFSrHQX|{~d8Xn(Q7CEEaH9C0~L*MsJ2#am4fe9zj%p-90Tu+lENl
zrb+nL5qxx`xpLKW2iqUt!8LPU>dB!>+Qz!QmgK$jZ#@+E-k#>Fm1kN@{8O8{x;!vf
z!V1dQ*mC2>g6sO0o5b5-l<47$4x%R^!)B>4l40a)Wo&kSW#}IDKa0objF`iGn>Rcc
zjJH?9G2L5Nl;9{yypws4X+2Sp-%^RL;lvEFas8ZM?=eP5rNg4aqC;BEMU6Q}qCQ8v
zC-7AT{eg@j=2Lh3S2iYxGebYv^E{7xKc2AUa{i&4WcK2U+OpFH<zTVi_37L-+o-W~
z!&^o4M?v-AeA~+ZH>7D@@{Y(VHRWI81xFR8`a4Vf8ENW+{f%2I7B*J)h|}Ge3FNgG
z-I1HUOKnGO?Cf5&IsrPIOYk34k{MO!{3z@qENE#33-;SSDA|AfVg7w$61OBOPQ&8W
zW&%Bbh)KNrR;pO*%#O~sHLj+TKjgJFll>X1{~9q|A}y?SZLD6Mb8n<>czaM9m-0Hq
zS(CY?mR9WWYJbP0f+vpVo?X9vRgXT#WI9V{zaaV?0-9NJlZ2}c5bqtrSzeAD%`>UC
zuRn2pWGq5p_jS4X!H2)B-%xX-x|GC&WKU&}a|K0C+*(jsS*+i^BL8$*5m)**m8r{l
zbsigi?II)0U+GBHQV2b^Rre_pLx$TDAkFRi98T%Tm8Av8EjaGf|EH=ekB4&m|4fQe
z(Tpfdj4@KlbwjRYGSf6NmL%B~%47*y!(<t<jV)$e-NMi&WzX8i6xW)Dlx0$cv0X~G
z?B;hKb$_q>^^bp^d7g7V=bX>y{ds@hpXX7!=36uLmyQJe?o<y424o=5zAv7`mLW>!
zs{HLhI=na=vin<z`USu>DBbCwPdWN7=g388!3Nd0ZIa9Jhp!cNHJOIqVB}<8t87zW
zSm>G8Gi~P-XlZWro3z`{Op105L~%-RfW>WUECF(?$`X&|>8`AvrntshYxNS#5UNW!
z%QVS;qb9y~tMSIlEkI<1xIc50OI*Kg7Ix0NWneL#XR=9^aP9u!xn2(@I~U^3GuNWK
zbwNVVZ@Jf5QSA^Qia8XJR4bMvC3BiUeX7@`gc!^4NN!U<QcS1rC)+<(U0=G-ny|R2
zNx+-yDpl0Upw;rTX*-U_#M3;jh_SgKh@NarXtq$8JrLdhBL%mTxtOr+RX(TA=<5$q
z>5RHsJI;(bQdNGktDJe&Z|YE0Ih*YPk_nYQTS%p<Q&rwL_Jmm(JoUJ$+-lw5cVghp
zU9O$NoJo>LTMpcy-m74UzOx+G(h319kZOwbMAH97*o8ntP>BSuq>NDp`i>%^o=j%b
zFjZcbqotf$*alMB?E0%tMm^T(vGDJ`##TW3394^MPF;F4<B1hI&bdJ$`Qlbay8ly=
zHi*(82e4PH(e;ELyIF0e(F&w3mTd%NXJ>gUdmD#YHS>-M22v;RWtt#JWXeaYQkvwI
zKzTjD6d|dEPK<AUEP6P!W)N{u)*WMSW19)`g-MWl8}wf-WnSF?ke;mT!R;EMhFP$>
z8SUCffC{c**weL=dG#^nZ-wMbTN#xA#XGcCS7gt9i%M@^mc#yFfREM`SfSHw<9BQi
z9Vj9OhAEn3JKbQ6WFJQiz_M_CF0>^QntQjJ?3AEe0@cREY0e$m4#l45y*cn9dZSpX
z=bx+S3!CZ%&>?b92ko~^0Wr`9VY|G@IkR^jJX#6Gc?zOO`mQ>a_C$f73QD^-{>VMI
z&k`j>#OV#gpvFTb#<n{4#G+@(BQsBUM%d0^k#`q{!4iK9cEE6D3dPo+ch6=0tv?E6
z81%(ZKc@v&^VL!|Y@j5UW&NgIT~G5`sj1DE)o)JB43TblI;)uDp>oUl+g6nYusJaY
zVT_Z#P%>-4^%_9voCe2^R%}4F;jSv8^MKzy$qkz!UG}_?>kDF34?)Orj(K+uvfj~q
zlYO@J=mFI}+q_=($JDQd6zoP#eOW=wenhGU!ypX*D~HGez7p-{cW;LG5fFuvz;7g!
zENnQTWDV0)3N_4YbB`uAyN1P$SDf;8RRI(uI}ivKy<C}DZfmS6vhHLXU!U#$QOC*i
z$|(=pgfYoI0Cvj~mJ+6SGp&A<{?kgGyaMeZ&;82u8SNsX1l1fAWJ}IZewAAvqfXm#
z#E+-JNem}rW!mP_noBFFS@0t5fIbVMy?#)74}FMkRT`6yN%C^PYNY(xvaF$Cr5l`*
zG!9!T-}`Gh^Jvl6!gne~Rpk=x<*$0*db+B-%*G*8Dq_S*jI^B2YwFQHjX^1<Wk^nG
zdh=s&tQ&DasSLQf9hV@{Wa5~u(-gG7=R>|X$gTe~z_R>tTV5Q-z<}hbeazlYZf@U$
zv`uk{7%)`ilQf-OK*IBGZBqLZQ8s2*@!GgGZ^L1#{P<-7j3Jb8D$^Zj&;RdFh~%A!
z+YQ4%Qo<KzYkFNHcY`SdLw#mjD|or*hWz*Ln$iI3<cZT4=Yr>NiP*Ks>tMV=L8wp4
zuU}nZ;(^4z!uJJQf%GjGx~Zk?4=>f76{e4OEgrGJk^g?JGXXZ-Ln@1%RJ62F!F6KZ
z{>$38l>N!$z|-vJO4FKo&+&MJk8g!BMMDw$bP5zf#p1n9d=fRm!V2v=T8Y%wemBp0
z_ynoFTEcXUf4P3&@!8Y^OS{wfPMu|bU5>l!UtvKLe^wI7w>BaV0u-3gJdyZF6Z$Wp
zFq?>5OMhc(mn$ZKDFWF@4T7*#HvKyj4M}ZmCZ3LjhtZm^joKO#O_Rmx?{j89AhfaW
z3vsNnuMaGBPT)H)L$t^8<p)h+9V(Sru~Xo#3B$lLQ!Yf8xRG<KgC(B2?ttP-4Y=M#
z(lLbc2Tx)nkZU0%710VgeuD#x?IOcZSYJzJbPVvFpr3mJ0~OxvzQL2gOXMK!k{)%<
z|B4oxwNk&)RASA0&;h_5`-zm{*iSswA_Sz8TC;Y*b=j_61iAI+>EQLa^%UL1ai(Ia
z0Sxe1sMvK7ZG4gjw3GCnd;ST{LwnL_&4Tsyek*c8ECr?#YC@xc9srdA&jM}?Na>;!
zO7wwzt3g#$2c5GsYAU=b<;4J<y&Z-uJlT2VG4Yph@&SZd%;SLzR!#yk_a%DDz#~2R
zikyh(bG1^pKkueCh7bxM)rda1g$CT!j|E7*2_$UKhG;T+12ckh%Yxa{LT3dqNfUCz
zX4qqVeA`<MiN`Ibv)chT7vktv30QE8jpH`Z(UQEKcN8Ic&(WHIpx{!PqW%%X2MLjG
z-KV|`QHl0>e;HG>A7ajeiLv_qTYw7G6|;}-xc=H;BhnxM9~}`51B+EoAv!F`zO&ne
z#6Zi(JveIe8@gPjpeOwM8`jmlR;O__ez+oVOnu8$-TwW`cF>}M3m?$14OuNjZp+Os
z#|;&GtGh6MxHyF?xcN-T8+}GRdxb@V9kM(x8opeeRVKWBS86F=+*HTq|2)i-Oq3ld
zxM6A=vlULVApl@y6ix-yPetOU@xd%93EI-)^!Cw3UD-w@fl)+i>4UXY=44f6rw%i*
z*-SeeY_Hw)uEw|3Gqg6Veco$dhP($3KQluS@O1|{-A2kk?X8B8lz<x|BzqpwvgWQ0
z_Qnmz3XX*GhP-tT2$~w=38y?ga<4+n@Wc{=-nF?S)2|Tq*4GnRU+>5~ijRnvO7`-2
zyP-W?qe$7DfbChL=?!uELR<L^?JzS)1+n~v+%*&QE&co<GiF4zcyo273$>5ZwQ4+@
zf0As2`jbcwD5NE|sr&PbgJ4#y&$TY+$!%=J4EUOfd@#Y+2?J+UJ(n6l#khk;4Sz8A
zgJ|Uxrez4xrQk+SEp;#mo4v(~h_90Zc%fuOeqw{vsR&jWSlgUvC97LdMXUHn$ODDC
zaO#tsA@Ie&)JX}=w=B?pfer}mv4&7E!XlkIDIt<gITqvn9LFGU+6S^>dK2635IRRB
z%4cqMPk2whLLr#-&Y3k51KLNMnp9*$vzcEJeG)-Gd&q#hKA1mzpEVh6X`{{$mma;d
zkMZB(C`-`|IKO32<5onE^&m8fc)|%Sw>V7Y5w!6ps8R!nc|U?4RBqXXqt468TCh-e
zuE3B|`$bzaMLx<){<}-aBTvd@YXf(0tM_?%b{!pINnr*_WLyIN^o8o|+IOdjv?84j
z&zd1QM96!b-bw1VeZ<C{`yDcZwbcTDT))_37v{NU*W{4EJ`<LG`vps4udcQ?cd}$6
zEQ=Wwx%gzLr?R)wO3r>`U213HM%ej=#mj;HienR}cpk?F=4PJca%?vy6+$$cC^JHD
zFKk6hwcW>&S~IMHezpoJxi7QL2=wL1+Qgf<D*CbW4rcz*SA1=~9k-Su!`K2C8F_vJ
zgS_dQAQM}nXAg)r*>~aKrKT_>l7U+pj&&t<y8W7KrVRb8^B=qDjyt3J!3UVX<7Q0^
z+<xbW!;uV)?0*l0_PUCe_W6Yqtg!$~Qba^_G~7_?XAY>(?Hnl3E=dtRrHq!_QC$!|
zz9^Hr1&&DVfDsstNcx!t><|IC<i~g4rZi9KHD!wG&4>JvPepa?h9T`RqAeaGeRt15
zsh8&k(2l^;)7eX}UzL#y9bf!3CKQiM?I4(X<@)~2&7ef;H%eHjTRD1`GsR1jUHeL%
z(la1sMMO)8F*FirNk}@nto3QyYeg`k&!I#YLGGvE@725+hcz+2$GcKH_$efZmgzL?
zSO~kZ5Dmz1AZFJt0Ppz#$FI3_ni7a-9~~6>s(`xd3<0BPjI`qaCPY1Z=%TU8H$ZN6
zr9la1u86vOA97USwm&=~D#hq$pmQM^r1q4%Fmtyc8PLARZqy+_C?qt2qoz8tNV+B<
zGzo4BTsDWIPqqL~BFEKp>K$tSiiq5s8DrkxE%_b%Fy!7@p<SAwVhcRA?WIpGUl;(G
z0+!g|!milC;P1vf3oSyN5XtHKmLMBlgrwzZVr)ho5$Z>R(tva#xyo_@BZE62b2m`{
zWA+I6XGKSPKn|wh=X{dvjfuhrP9!`m7os6&(+&IVZIg=)xSxJ$iN)z4oJ?7C*((h$
z!3TweNOzuxhD?s@f$JXUfL-+t#FKMHK-($P^m_TUmZkVD6e=>8n*wFjzSF2mun=lG
zuIs=9KHr4rt_;L7DmvRoKp0N?V$o>oUE^ZO_(%g0g?X0Ps3J}e5{&X}m`MxiQr$a_
z=7)a(0xex(!?<rg*PsXt9FA|g!faq5bvSWMk5aOt4?Djf75Q<bfYCE|BB;=)3=2Hh
zeGpfl);Vr5ke|OYG8k;OUdJbZDZRLSA7A{;nvom-|0-tk6zt))5)4|7n=<rtVdz;C
z^O5jjeLT#AUSj0ndtKQW6r0ru#G9u+ywE-8wf1T_D4*&VaUFLC-0sRUytoHz&4>Z8
z1nAFX5u6NKo9tT7*5TwmIG+Yh%R8DdWbduDXAEnZmnSYkqYpTSK0Uf~an370$N@B3
z^jSoHgp=+dJbiQ3z^D~;Wau3C{A!0_o_NY2pOq0Fmi!(7A&sgAOA|HFanMW?(dX8m
z@C6r4+j|Lg6Tk&GbB3-ptTWnr0{~iJ%0QWu7ef1a^~~t@X<k_S6@hM3Jgj9`S{u|7
zaqkl1HuFKou@^IJh%_ole$^;MLTNk4O`n?yHEg|p5fZL-&e58aK?@94%Dd)!EzXB=
zs6z;bBxT$plZb(;fL}>9IgB>2w<vcDK#6o{!H{mr*!|UB{$CG(IXKs6$kE$f2A66U
zHwKG(T?KnJ_~8{dL-y;Eh?<Add7}Wj&0#Z3G+hSAYfqx!Fyy#E%C?DJn?Kc*qc0l7
z4TetF<oG!%q{{Ha1580w4wYrtn(2*N<F|t|ASqq7K?_xp8c>jmtN_M)-zYN3sp_h{
zw26W3!-#s)glSXR<f=SakvxjO5lU~Hu6O=J{%2F&Mr&Tm>op;|<mI{KJ?xj<QRWs(
z(0~<TQ2fGN`}5UBru$8SoqJ2)hpmgwp78lmyZTLO+F~V|FJ3H_PkcmhCdo=kHDmx;
zc9WJBdLF!lBj!&9zW|)GMDpUHFj#~HB9+g$RZgtT>xBn;b41Frf8lyre|*Yb`5bi2
z-Q!S)I}CYe+wui$-*q+qU-f|s&_bj4DPyJhwEZQ4y$UFPE4-N|)QIv^yG>D@9uxdB
z6*k7q@l{m-=t;mP>hYbIT-nxb5Y=CWL(6S*1~bluS%7(HVyNWi0|%;^v(Nc~YiCzt
zJ#lJP{lI2>1&_TJ@(~8lmv5An_G_u?IST2bA4=1M=1zE*QNM+a?c<sJ4*NjF!!&Ga
zjVSJi54A6c7e#=PlrJNeopvWg9q(Ob>*`H*NJoexQ~BU6)44A-s>~^d7TuV1+Kx*-
zc3$W1A#NWtA9kpHek*3Ef6kj%*rgwF6kM$Gd!;$0U;dae^w44)I)yO)S-R-A*yB$Z
zK^-D!SEgh{7cjC4!2bIhxNZ%zFS}ZWF9RVfMfxF4<|H>NRNr@Zk|3zF%w0s>i4?%#
zo45t(V{_E#5iB&(_iz2@?GA`o?-9)onH*b0i@`d6han^GJ{Es7=gh0gOxXje+i$j~
z6&;Yx!fHA%<#2F|;L<&xN`z9i_~G~uy|0hC>h6JBP1wi1cgJ&#hAz}D%zuZ9%DXKh
zB*5UZjB5R~_uY22FF#uK0zvsx&cR<xBEH@$Zy=nTzbeMB1I}!zxwG;udDfU(Qqjd&
zjA@dWBT-K%s{a7YU=ei#J@ci{wFFM&8wD28sIzdpAvn536_wu3b}`_N`((VUydh_z
zzA_z04IE9Z`U~cB2uy(tB1Yb@AC}<E>jR%X_wAOZ-&eUe=g^m_{<eRK_ubWdqlD=o
z{0cY|J{vP0ZawJ!DpoyimB*nvUlNV@v0Z+RhaR7FkF?9E-~)e#`liHUg46Z?1E1cV
AH2?qr

diff --git a/public/logo.svg b/public/logo.svg
index e2769cb..6b67342 100644
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -1 +1 @@
-<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="911.75" height="898.91" viewBox="0 0 911.75 898.91"><defs><linearGradient id="FillColor" x1="0" x2="50%" y1="50%" y2="0"><stop offset="0%" stop-color="#2af598"/><stop offset="100%" stop-color="#009efd"/></linearGradient></defs><path fill="url(#FillColor)" d="M828.52,831.72c-216,259.7-774.46,115.85-765.17-319.5-19-292.76,370.82-602.09,704.81-367.11,44.53,48.2,81.39,32.52,121.28,46.67,28.28,14.3,21.36,42.61,52.36,142.6,31.6,101.09,60.92,133.92-17.45,182.4-28,11.34-46.6-2.34-117.82-25.31-92-29.65-109-22.33-132.66-48-27.26-29.62-14.42-50.13-41.31-80.13C507.2,259.81,336.39,351,290.74,489.72c-7,26.59-20.37,92.15,8.72,162.38,25.72,62.11,71.11,95.23,99.93,115.7C554.85,878.2,781.33,840.41,828.52,831.72Zm50.11-584.95c-15.4,5.93.73,47,16,40.82C910.07,281.66,893.94,240.63,878.63,246.77Zm-152,180.06c-4.34,15.92,35.73,26.64,39.92,10.68C770.9,421.58,730.83,410.86,726.63,426.83Z" transform="translate(-62.68 -62.16)"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M163.02222,512.46925c0-120.32665,148.19299-72.78997,99.83528-56.73616-52.82592,17.53717,3.63378,125.58865,18.88934,87.62713c33.53841-83.45605,46.12579,47.6319,85.48988,47.6319s118.37922-203.60678,140.67406-151.31284c79.98758,187.61591,112.95735-7.88122,147.96707,101.13525c35.29521,109.90545,69.93083-100.57107,86.31006-42.07384c12.83646,45.8445,32.071949,9.89985,48.34954-33.25533c18.309184-48.541344,71.33167-63.82206,71.33168,46.98389c0,190.31099-151.31284,349.42345-349.42345,349.42345s-349.423455-159.581652-349.42345-349.42345h-.00001Zm204.21451,7.54624c11.90208-.00001,20.79906,10.55427,20.79906,20.79905s-8.33525,20.79906-20.79905,20.79906-20.79906-10.2756-20.79906-20.79905s8.89698-20.79906,20.79905-20.79906Zm-20.79905-206.906c8.98327,0,15.69841,7.966,15.69841,15.69841s-6.29116,15.69841-15.69841,15.69841-15.69841-7.75567-15.69841-15.69841s6.71513-15.69841,15.69841-15.69841ZM283.6631,399.90118c7.38365,0,12.90304,6.54752,12.90304,12.90304s-5.17091,12.90304-12.90304,12.90304-12.90304-6.37465-12.90304-12.90304s5.51939-12.90304,12.90304-12.90304Zm150.92601-42.3338c19.80595,0,34.6112,17.56311,34.6112,34.6112s-13.87049,34.6112-34.6112,34.6112-34.6112-17.09939-34.6112-34.6112s14.80525-34.6112,34.6112-34.6112Zm253.87481,42.3338c15.97466,0,27.91596,14.16568,27.91596,27.91596s-11.18737,27.91596-27.91596,27.91596-27.91596-13.79166-27.91596-27.91596s11.9413-27.91596,27.91596-27.91596ZM331.77365,410.81435c5.19776,0,9.08316,4.60916,9.08316,9.08316s-3.64009,9.08316-9.08316,9.08316-9.08316-4.48746-9.08316-9.08316s3.8854-9.08316,9.08316-9.08316Zm208.4973-4.889257c9.59422,0,16.76605,8.50776,16.76605,16.76605s-6.71902,16.76605-16.76605,16.76605-16.76605-8.28313-16.76605-16.76605s7.17183-16.76605,16.76605-16.76605ZM595.57796,458.3984c14.37533,0,25.12112,12.74744,25.12112,25.12107s-10.06733,25.12107-25.12112,25.12107-25.12112-12.41087-25.12112-25.12107s10.74578-25.12107,25.12112-25.12107ZM423.529889,258.512076c8.78906,0,15.35902,7.79378,15.35902,15.35902s-6.15515,15.35902-15.35902,15.35902-15.35902-7.588-15.35902-15.35902s6.56996-15.35902,15.35902-15.35902ZM240.24369,609.45123c0,21.96764,17.4004,43.41792,43.41941,43.41792s43.41941-22.03199,43.41941-43.41792-18.57304-43.41792-43.41941-43.41792-43.41941,21.45028-43.41941,43.41792Zm43.41941-35.89644c20.54218,0,35.89777,18.21529,35.89777,35.89644s-14.38609,35.89644-35.89777,35.89644-35.89777-17.73435-35.89777-35.89644s15.35559-35.89644,35.89777-35.89644Zm311.17009,20.92398c0,17.38091,13.76725,34.35249,34.35356,34.35249s34.35355-17.43183,34.35355-34.35249-14.69504-34.35249-34.35356-34.35249-34.35355,16.97158-34.35355,34.35249Zm34.35355-26.69037c15.27375,0,26.69111,13.54376,26.69111,26.69037s-10.6965,26.69037-26.69111,26.69037-26.69111-13.18617-26.69111-26.69037s11.41736-26.69037,26.69111-26.69037ZM327.15834,709.98512c0,7.72308,6.11718,15.26428,15.26428,15.26428s15.26428-7.74571,15.26428-15.26428-6.52943-15.26428-15.26428-15.26428-15.26428,7.5412-15.26428,15.26428Zm15.26428-10.64897c6.09378,0,10.64897,5.40371,10.64897,10.64897s-4.26759,10.64897-10.64897,10.64897-10.64897-5.26104-10.64897-10.64897s4.55519-10.64897,10.64897-10.64897Zm49.20971-72.6274c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm240.08123,51.56982c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm70.29015,7.04378c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm-127.04051-9.72227c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378ZM459.34802,725.2494c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm282.91106-113.4516c0,11.10817,8.7984,21.95473,21.95473,21.95473s21.95473-11.14071,21.95473-21.95473-9.39133-21.95473-21.95473-21.95473-21.95473,10.84656-21.95473,21.95473Zm21.95473-16.27759c9.31471,0,16.27759,8.2599,16.27759,16.27759s-6.52327,16.27759-16.27759,16.27759-16.27759-8.04182-16.27759-16.27759s6.96288-16.27759,16.27759-16.27759ZM479.31806,505.4742c0,11.10817,8.7984,21.95473,21.95473,21.95473s21.95473-11.14071,21.95473-21.95473-9.39133-21.95473-21.95473-21.95473-21.95473,10.84656-21.95473,21.95473Zm21.95473-16.27759c9.31471,0,16.27759,8.2599,16.27759,16.27759s-6.52327,16.27759-16.27759,16.27759-16.27759-8.04182-16.27759-16.27759s6.96288-16.27759,16.27759-16.27759ZM479.44012,664.69548c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.70461c6.69786,0,11.70461,5.93939,11.70461,11.70461s-4.69064,11.70461-11.70461,11.70461-11.70461-5.78257-11.70461-11.70461s5.00675-11.70461,11.70461-11.70461Zm167.69208,73.7603c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.70461c6.69786,0,11.70461,5.93939,11.70461,11.70461s-4.69064,11.70461-11.70461,11.70461-11.70461-5.78257-11.70461-11.70461s5.00675-11.70461,11.70461-11.70461ZM523.5049,560.12628c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.70461c6.69786,0,11.70461,5.93939,11.70461,11.70461s-4.69064,11.70461-11.70461,11.70461-11.70461-5.78257-11.70461-11.70461s5.00675-11.70461,11.70461-11.70461ZM434.58911,566.03331c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.71187c6.70201,0,11.71187,5.94307,11.71187,11.71187s-4.69355,11.71187-11.71187,11.71187-11.71187-5.78616-11.71187-11.71187s5.00986-11.71187,11.71187-11.71187ZM578.35895,203.134695c46.94729,0,77.99631,35.53165,77.99631,77.99631s-33.7984,77.99631-77.99631,77.99631-77.99631-35.53165-77.99631-77.99631s31.04902-77.99631,77.99631-77.99631Z" fill="#fff"/></svg>
diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg
index d12ed75..d2b3a51 100644
--- a/src/assets/svg/logo.svg
+++ b/src/assets/svg/logo.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 911.75 898.91"><path d="M828.52,831.72c-216,259.7-774.46,115.85-765.17-319.5-19-292.76,370.82-602.09,704.81-367.11,44.53,48.2,81.39,32.52,121.28,46.67,28.28,14.3,21.36,42.61,52.36,142.6,31.6,101.09,60.92,133.92-17.45,182.4-28,11.34-46.6-2.34-117.82-25.31-92-29.65-109-22.33-132.66-48-27.26-29.62-14.42-50.13-41.31-80.13C507.2,259.81,336.39,351,290.74,489.72c-7,26.59-20.37,92.15,8.72,162.38,25.72,62.11,71.11,95.23,99.93,115.7C554.85,878.2,781.33,840.41,828.52,831.72Zm50.11-584.95c-15.4,5.93.73,47,16,40.82C910.07,281.66,893.94,240.63,878.63,246.77Zm-152,180.06c-4.34,15.92,35.73,26.64,39.92,10.68C770.9,421.58,730.83,410.86,726.63,426.83Z" transform="translate(-62.68 -62.16)"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M163.02222,512.46925c0-120.32665,148.19299-72.78997,99.83528-56.73616-52.82592,17.53717,3.63378,125.58865,18.88934,87.62713c33.53841-83.45605,46.12579,47.6319,85.48988,47.6319s118.37922-203.60678,140.67406-151.31284c79.98758,187.61591,112.95735-7.88122,147.96707,101.13525c35.29521,109.90545,69.93083-100.57107,86.31006-42.07384c12.83646,45.8445,32.071949,9.89985,48.34954-33.25533c18.309184-48.541344,71.33167-63.82206,71.33168,46.98389c0,190.31099-151.31284,349.42345-349.42345,349.42345s-349.423455-159.581652-349.42345-349.42345h-.00001Zm204.21451,7.54624c11.90208-.00001,20.79906,10.55427,20.79906,20.79905s-8.33525,20.79906-20.79905,20.79906-20.79906-10.2756-20.79906-20.79905s8.89698-20.79906,20.79905-20.79906Zm-20.79905-206.906c8.98327,0,15.69841,7.966,15.69841,15.69841s-6.29116,15.69841-15.69841,15.69841-15.69841-7.75567-15.69841-15.69841s6.71513-15.69841,15.69841-15.69841ZM283.6631,399.90118c7.38365,0,12.90304,6.54752,12.90304,12.90304s-5.17091,12.90304-12.90304,12.90304-12.90304-6.37465-12.90304-12.90304s5.51939-12.90304,12.90304-12.90304Zm150.92601-42.3338c19.80595,0,34.6112,17.56311,34.6112,34.6112s-13.87049,34.6112-34.6112,34.6112-34.6112-17.09939-34.6112-34.6112s14.80525-34.6112,34.6112-34.6112Zm253.87481,42.3338c15.97466,0,27.91596,14.16568,27.91596,27.91596s-11.18737,27.91596-27.91596,27.91596-27.91596-13.79166-27.91596-27.91596s11.9413-27.91596,27.91596-27.91596ZM331.77365,410.81435c5.19776,0,9.08316,4.60916,9.08316,9.08316s-3.64009,9.08316-9.08316,9.08316-9.08316-4.48746-9.08316-9.08316s3.8854-9.08316,9.08316-9.08316Zm208.4973-4.889257c9.59422,0,16.76605,8.50776,16.76605,16.76605s-6.71902,16.76605-16.76605,16.76605-16.76605-8.28313-16.76605-16.76605s7.17183-16.76605,16.76605-16.76605ZM595.57796,458.3984c14.37533,0,25.12112,12.74744,25.12112,25.12107s-10.06733,25.12107-25.12112,25.12107-25.12112-12.41087-25.12112-25.12107s10.74578-25.12107,25.12112-25.12107ZM423.529889,258.512076c8.78906,0,15.35902,7.79378,15.35902,15.35902s-6.15515,15.35902-15.35902,15.35902-15.35902-7.588-15.35902-15.35902s6.56996-15.35902,15.35902-15.35902ZM240.24369,609.45123c0,21.96764,17.4004,43.41792,43.41941,43.41792s43.41941-22.03199,43.41941-43.41792-18.57304-43.41792-43.41941-43.41792-43.41941,21.45028-43.41941,43.41792Zm43.41941-35.89644c20.54218,0,35.89777,18.21529,35.89777,35.89644s-14.38609,35.89644-35.89777,35.89644-35.89777-17.73435-35.89777-35.89644s15.35559-35.89644,35.89777-35.89644Zm311.17009,20.92398c0,17.38091,13.76725,34.35249,34.35356,34.35249s34.35355-17.43183,34.35355-34.35249-14.69504-34.35249-34.35356-34.35249-34.35355,16.97158-34.35355,34.35249Zm34.35355-26.69037c15.27375,0,26.69111,13.54376,26.69111,26.69037s-10.6965,26.69037-26.69111,26.69037-26.69111-13.18617-26.69111-26.69037s11.41736-26.69037,26.69111-26.69037ZM327.15834,709.98512c0,7.72308,6.11718,15.26428,15.26428,15.26428s15.26428-7.74571,15.26428-15.26428-6.52943-15.26428-15.26428-15.26428-15.26428,7.5412-15.26428,15.26428Zm15.26428-10.64897c6.09378,0,10.64897,5.40371,10.64897,10.64897s-4.26759,10.64897-10.64897,10.64897-10.64897-5.26104-10.64897-10.64897s4.55519-10.64897,10.64897-10.64897Zm49.20971-72.6274c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm240.08123,51.56982c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm70.29015,7.04378c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm-127.04051-9.72227c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378ZM459.34802,725.2494c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm282.91106-113.4516c0,11.10817,8.7984,21.95473,21.95473,21.95473s21.95473-11.14071,21.95473-21.95473-9.39133-21.95473-21.95473-21.95473-21.95473,10.84656-21.95473,21.95473Zm21.95473-16.27759c9.31471,0,16.27759,8.2599,16.27759,16.27759s-6.52327,16.27759-16.27759,16.27759-16.27759-8.04182-16.27759-16.27759s6.96288-16.27759,16.27759-16.27759ZM479.31806,505.4742c0,11.10817,8.7984,21.95473,21.95473,21.95473s21.95473-11.14071,21.95473-21.95473-9.39133-21.95473-21.95473-21.95473-21.95473,10.84656-21.95473,21.95473Zm21.95473-16.27759c9.31471,0,16.27759,8.2599,16.27759,16.27759s-6.52327,16.27759-16.27759,16.27759-16.27759-8.04182-16.27759-16.27759s6.96288-16.27759,16.27759-16.27759ZM479.44012,664.69548c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.70461c6.69786,0,11.70461,5.93939,11.70461,11.70461s-4.69064,11.70461-11.70461,11.70461-11.70461-5.78257-11.70461-11.70461s5.00675-11.70461,11.70461-11.70461Zm167.69208,73.7603c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.70461c6.69786,0,11.70461,5.93939,11.70461,11.70461s-4.69064,11.70461-11.70461,11.70461-11.70461-5.78257-11.70461-11.70461s5.00675-11.70461,11.70461-11.70461ZM523.5049,560.12628c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.70461c6.69786,0,11.70461,5.93939,11.70461,11.70461s-4.69064,11.70461-11.70461,11.70461-11.70461-5.78257-11.70461-11.70461s5.00675-11.70461,11.70461-11.70461ZM434.58911,566.03331c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.71187c6.70201,0,11.71187,5.94307,11.71187,11.71187s-4.69355,11.71187-11.71187,11.71187-11.71187-5.78616-11.71187-11.71187s5.00986-11.71187,11.71187-11.71187ZM578.35895,203.134695c46.94729,0,77.99631,35.53165,77.99631,77.99631s-33.7984,77.99631-77.99631,77.99631-77.99631-35.53165-77.99631-77.99631s31.04902-77.99631,77.99631-77.99631Z"/></svg>

From e9818d435f419e3863e55ec8f9adda5f76f81a29 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 6 Sep 2024 15:00:14 +0800
Subject: [PATCH 305/307] Refactor(License): Add LICENSE

---
 LICENSE | 674 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 674 insertions(+)
 create mode 100644 LICENSE

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..f288702
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

From 85f3d38faa19e567f902345ca92202d3ef443dbf Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 6 Sep 2024 15:02:25 +0800
Subject: [PATCH 306/307] Refactor(README): Add README.md and README_zh.md

---
 README.md    | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 README_zh.md | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 doc/logo.svg |  1 +
 3 files changed, 143 insertions(+)
 create mode 100644 README.md
 create mode 100644 README_zh.md
 create mode 100644 doc/logo.svg

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8378716
--- /dev/null
+++ b/README.md
@@ -0,0 +1,71 @@
+<div align="center">
+    <h1>
+        <img alt="Logo" src="doc/logo.svg" width="128">
+        <br>
+        <span>Web UI of Oxygen Toolbox</span>
+    </h1>
+</div>
+<div align="center">
+    <a href="https://ci.fatweb.top/job/Oxygen%20Toolbox%20UI/">
+        <img alt="Build" src="https://ci.fatweb.top/job/Oxygen%20Toolbox%20UI/badge/icon">
+    </a>
+    <a href="https://github.com/FatttSnake/oxygen-ui/releases/latest">
+        <img alt="Release" src="https://img.shields.io/github/v/release/FatttSnake/oxygen-ui">
+    </a>
+    <a href="LICENSE">
+        <img alt="LICENSE" src="https://img.shields.io/github/license/FatttSnake/oxygen-ui">
+    </a>
+</div>
+
+# Overview ([ZH](README_zh.md), EN)
+
+This project is a front-end web UI of Oxygen Toolbox and needs to be used with the back-end API.
+
+# Requires
+
+- Web Server (e.g. Nginx, Apache httpd)
+
+# Related projects
+
+[API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api)
+
+[Desktop Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-desktop)
+
+[Android Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-android)
+
+# Quick Start
+
+**1. Download the latest packaged production version from [Releases](https://github.com/FatttSnake/oxygen-ui/releases/latest) page**
+
+**2. Upload the file `oxygen-ui-*.tar.gz` or `oxygen-ui-*.zip` to the web server and unzip it**
+
+**3. Configure pseudo-static**
+
+Nginx:
+
+```nginx
+server {
+    ...
+    
+    index index.html
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    ...
+}
+```
+
+Apache httpd (.htaccess):
+
+```apache
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
+```
diff --git a/README_zh.md b/README_zh.md
new file mode 100644
index 0000000..352cae2
--- /dev/null
+++ b/README_zh.md
@@ -0,0 +1,71 @@
+<div align="center">
+    <h1>
+        <img alt="Logo" src="doc/logo.svg" width="128">
+        <br>
+        <span>Web UI of Oxygen Toolbox</span>
+    </h1>
+</div>
+<div align="center">
+    <a href="https://ci.fatweb.top/job/Oxygen%20Toolbox%20UI/">
+        <img alt="Build" src="https://ci.fatweb.top/job/Oxygen%20Toolbox%20UI/badge/icon">
+    </a>
+    <a href="https://github.com/FatttSnake/oxygen-ui/releases/latest">
+        <img alt="Release" src="https://img.shields.io/github/v/release/FatttSnake/oxygen-ui">
+    </a>
+    <a href="LICENSE">
+        <img alt="LICENSE" src="https://img.shields.io/github/license/FatttSnake/oxygen-ui">
+    </a>
+</div>
+
+# 概述 (ZH, [EN](README.md))
+
+本项目为 Oxygen Toolbox 的网页 UI，需配合后端 API 使用。
+
+# 环境要求
+
+- Web 服务器（如 Nginx, Apache httpd）
+
+# 关联项目
+
+[API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api)
+
+[Desktop Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-desktop)
+
+[Android Client of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-android)
+
+# 快速开始
+
+**1. 从 [Releases](https://github.com/FatttSnake/oxygen-ui/releases/latest) 页面下载最后打包的生产版本**
+
+**2. 将文件 `oxygen-ui-*.tar.gz` 或 `oxygen-ui-*.zip` 上传到 Web 服务器并解压**
+
+**3. 配置伪静态**
+
+Nginx:
+
+```nginx
+server {
+    ...
+    
+    index index.html
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    ...
+}
+```
+
+Apache httpd (.htaccess):
+
+```apache
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
+```
diff --git a/doc/logo.svg b/doc/logo.svg
new file mode 100644
index 0000000..6b67342
--- /dev/null
+++ b/doc/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M163.02222,512.46925c0-120.32665,148.19299-72.78997,99.83528-56.73616-52.82592,17.53717,3.63378,125.58865,18.88934,87.62713c33.53841-83.45605,46.12579,47.6319,85.48988,47.6319s118.37922-203.60678,140.67406-151.31284c79.98758,187.61591,112.95735-7.88122,147.96707,101.13525c35.29521,109.90545,69.93083-100.57107,86.31006-42.07384c12.83646,45.8445,32.071949,9.89985,48.34954-33.25533c18.309184-48.541344,71.33167-63.82206,71.33168,46.98389c0,190.31099-151.31284,349.42345-349.42345,349.42345s-349.423455-159.581652-349.42345-349.42345h-.00001Zm204.21451,7.54624c11.90208-.00001,20.79906,10.55427,20.79906,20.79905s-8.33525,20.79906-20.79905,20.79906-20.79906-10.2756-20.79906-20.79905s8.89698-20.79906,20.79905-20.79906Zm-20.79905-206.906c8.98327,0,15.69841,7.966,15.69841,15.69841s-6.29116,15.69841-15.69841,15.69841-15.69841-7.75567-15.69841-15.69841s6.71513-15.69841,15.69841-15.69841ZM283.6631,399.90118c7.38365,0,12.90304,6.54752,12.90304,12.90304s-5.17091,12.90304-12.90304,12.90304-12.90304-6.37465-12.90304-12.90304s5.51939-12.90304,12.90304-12.90304Zm150.92601-42.3338c19.80595,0,34.6112,17.56311,34.6112,34.6112s-13.87049,34.6112-34.6112,34.6112-34.6112-17.09939-34.6112-34.6112s14.80525-34.6112,34.6112-34.6112Zm253.87481,42.3338c15.97466,0,27.91596,14.16568,27.91596,27.91596s-11.18737,27.91596-27.91596,27.91596-27.91596-13.79166-27.91596-27.91596s11.9413-27.91596,27.91596-27.91596ZM331.77365,410.81435c5.19776,0,9.08316,4.60916,9.08316,9.08316s-3.64009,9.08316-9.08316,9.08316-9.08316-4.48746-9.08316-9.08316s3.8854-9.08316,9.08316-9.08316Zm208.4973-4.889257c9.59422,0,16.76605,8.50776,16.76605,16.76605s-6.71902,16.76605-16.76605,16.76605-16.76605-8.28313-16.76605-16.76605s7.17183-16.76605,16.76605-16.76605ZM595.57796,458.3984c14.37533,0,25.12112,12.74744,25.12112,25.12107s-10.06733,25.12107-25.12112,25.12107-25.12112-12.41087-25.12112-25.12107s10.74578-25.12107,25.12112-25.12107ZM423.529889,258.512076c8.78906,0,15.35902,7.79378,15.35902,15.35902s-6.15515,15.35902-15.35902,15.35902-15.35902-7.588-15.35902-15.35902s6.56996-15.35902,15.35902-15.35902ZM240.24369,609.45123c0,21.96764,17.4004,43.41792,43.41941,43.41792s43.41941-22.03199,43.41941-43.41792-18.57304-43.41792-43.41941-43.41792-43.41941,21.45028-43.41941,43.41792Zm43.41941-35.89644c20.54218,0,35.89777,18.21529,35.89777,35.89644s-14.38609,35.89644-35.89777,35.89644-35.89777-17.73435-35.89777-35.89644s15.35559-35.89644,35.89777-35.89644Zm311.17009,20.92398c0,17.38091,13.76725,34.35249,34.35356,34.35249s34.35355-17.43183,34.35355-34.35249-14.69504-34.35249-34.35356-34.35249-34.35355,16.97158-34.35355,34.35249Zm34.35355-26.69037c15.27375,0,26.69111,13.54376,26.69111,26.69037s-10.6965,26.69037-26.69111,26.69037-26.69111-13.18617-26.69111-26.69037s11.41736-26.69037,26.69111-26.69037ZM327.15834,709.98512c0,7.72308,6.11718,15.26428,15.26428,15.26428s15.26428-7.74571,15.26428-15.26428-6.52943-15.26428-15.26428-15.26428-15.26428,7.5412-15.26428,15.26428Zm15.26428-10.64897c6.09378,0,10.64897,5.40371,10.64897,10.64897s-4.26759,10.64897-10.64897,10.64897-10.64897-5.26104-10.64897-10.64897s4.55519-10.64897,10.64897-10.64897Zm49.20971-72.6274c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm240.08123,51.56982c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm70.29015,7.04378c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm-127.04051-9.72227c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378ZM459.34802,725.2494c0,5.08288,4.02597,10.04605,10.04605,10.04605s10.04605-5.09777,10.04605-10.04605-4.29729-10.04605-10.04605-10.04605-10.04605,4.96317-10.04605,10.04605Zm10.04605-7.04378c4.03074,0,7.04378,3.5743,7.04378,7.04378s-2.82281,7.04378-7.04378,7.04378-7.04378-3.47992-7.04378-7.04378s3.01304-7.04378,7.04378-7.04378Zm282.91106-113.4516c0,11.10817,8.7984,21.95473,21.95473,21.95473s21.95473-11.14071,21.95473-21.95473-9.39133-21.95473-21.95473-21.95473-21.95473,10.84656-21.95473,21.95473Zm21.95473-16.27759c9.31471,0,16.27759,8.2599,16.27759,16.27759s-6.52327,16.27759-16.27759,16.27759-16.27759-8.04182-16.27759-16.27759s6.96288-16.27759,16.27759-16.27759ZM479.31806,505.4742c0,11.10817,8.7984,21.95473,21.95473,21.95473s21.95473-11.14071,21.95473-21.95473-9.39133-21.95473-21.95473-21.95473-21.95473,10.84656-21.95473,21.95473Zm21.95473-16.27759c9.31471,0,16.27759,8.2599,16.27759,16.27759s-6.52327,16.27759-16.27759,16.27759-16.27759-8.04182-16.27759-16.27759s6.96288-16.27759,16.27759-16.27759ZM479.44012,664.69548c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.70461c6.69786,0,11.70461,5.93939,11.70461,11.70461s-4.69064,11.70461-11.70461,11.70461-11.70461-5.78257-11.70461-11.70461s5.00675-11.70461,11.70461-11.70461Zm167.69208,73.7603c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.70461c6.69786,0,11.70461,5.93939,11.70461,11.70461s-4.69064,11.70461-11.70461,11.70461-11.70461-5.78257-11.70461-11.70461s5.00675-11.70461,11.70461-11.70461ZM523.5049,560.12628c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.70461c6.69786,0,11.70461,5.93939,11.70461,11.70461s-4.69064,11.70461-11.70461,11.70461-11.70461-5.78257-11.70461-11.70461s5.00675-11.70461,11.70461-11.70461ZM434.58911,566.03331c0,8.48291,6.71902,16.76605,16.76605,16.76605s16.76605-8.50776,16.76605-16.76605-7.17183-16.76605-16.76605-16.76605-16.76605,8.28313-16.76605,16.76605Zm16.76605-11.71187c6.70201,0,11.71187,5.94307,11.71187,11.71187s-4.69355,11.71187-11.71187,11.71187-11.71187-5.78616-11.71187-11.71187s5.00986-11.71187,11.71187-11.71187ZM578.35895,203.134695c46.94729,0,77.99631,35.53165,77.99631,77.99631s-33.7984,77.99631-77.99631,77.99631-77.99631-35.53165-77.99631-77.99631s31.04902-77.99631,77.99631-77.99631Z" fill="#fff"/></svg>

From 842e167f8c2580fb70f34b9899e1e66c893800df Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 6 Sep 2024 15:15:23 +0800
Subject: [PATCH 307/307] Build(package.json): Update version from
 1.0.0-SNAPSHOT to 1.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1676b36..28c6bca 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "oxygen-ui",
   "private": true,
   "type": "module",
-  "version": "1.0.0-SNAPSHOT",
+  "version": "1.0.0",
   "description": "Oxygen Toolbox browser version",
   "author":  {
     "name": "FatttSnake",