Merge pull request #34 from FatttSnake/hotfix/simulation_cannot_switch

Hotfix: Fix the bug that simulation cannot switch device and rotate
Fix(Simulation): Fix the bug that simulation cannot switch device and rotate
2024-11-03 11:25:39 +08:00 · 2024-11-03 11:20:58 +08:00 · 2024-11-02 19:47:30 +08:00 · 2024-11-02 19:35:35 +08:00 · 2024-11-02 19:18:29 +08:00 · 2024-11-02 18:45:10 +08:00
210 changed files with 9495 additions and 8533 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,40 +0,0 @@
-/* eslint-env node */
-
-module.exports = {
-    root: true,
-    env: { browser: true, es2020: true },
-    extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@typescript-eslint/recommended-requiring-type-checking',
-        'plugin:react-hooks/recommended',
-        'plugin:prettier/recommended',
-        './.eslintrc-auto-import.json'
-    ],
-    parser: '@typescript-eslint/parser',
-    parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        project: './tsconfig*.json',
-        tsconfigRootDir: __dirname,
-    },
-    plugins: [
-        'react-refresh',
-        'prettier'],
-    rules: {
-        'no-cond-assign': 'error',
-        'eqeqeq': 'error',
-        'prettier/prettier': [
-            'error',
-            {
-                endOfLine: 'auto',
-            }
-        ],
-        'react-refresh/only-export-components': [
-            'warn',
-            { allowConstantExport: true }
-        ],
-        '@typescript-eslint/no-non-null-assertion': 'off',
-        'react-hooks/exhaustive-deps': 'off',
-    }
-}
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -5,4 +5,4 @@
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
-}
+}
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ This project is a front-end web UI of Oxygen Toolbox and needs to be used with t
 # Requires

 - Web Server (e.g. Nginx, Apache httpd)
- [API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api) (v1.0.0 and later versions)
+- [API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api) (v1.0.0 or later versions)

 # Related projects

--- a/README_zh.md
+++ b/README_zh.md
@@ -24,7 +24,7 @@
 # 环境要求

 - Web 服务器（如 Nginx, Apache httpd）
- [API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api) (v1.0.0 及更高版本)
+- [API of Oxygen Toolbox](https://github.com/FatttSnake/oxygen-api) (v1.0.0 或更高版本)

 # 关联项目

--- a/build/resolvers/antd.ts
+++ b/build/resolvers/antd.ts
@@ -35,18 +35,17 @@ interface IMatcher {

 const matchComponents: IMatcher[] = [
    {
-        pattern: /^Avatar/,
-        styleDir: 'avatar'
+        pattern: /^Anchor/,
+        styleDir: 'anchor'
    },
    {
        pattern: /^AutoComplete/,
        styleDir: 'auto-complete'
    },
    {
-        pattern: /^Anchor/,
-        styleDir: 'anchor'
+        pattern: /^Avatar/,
+        styleDir: 'avatar'
    },
-
    {
        pattern: /^Badge/,
        styleDir: 'badge'
@@ -59,14 +58,18 @@ const matchComponents: IMatcher[] = [
        pattern: /^Button/,
        styleDir: 'button'
    },
-    {
-        pattern: /^Checkbox/,
-        styleDir: 'checkbox'
-    },
    {
        pattern: /^Card/,
        styleDir: 'card'
    },
+    {
+        pattern: /^CheckableTag/,
+        styleDir: 'tag'
+    },
+    {
+        pattern: /^Checkbox/,
+        styleDir: 'checkbox'
+    },
    {
        pattern: /^Collapse/,
        styleDir: 'collapse'
@@ -75,76 +78,30 @@ const matchComponents: IMatcher[] = [
        pattern: /^Descriptions/,
        styleDir: 'descriptions'
    },
-    {
-        pattern: /^RangePicker|^WeekPicker|^MonthPicker/,
-        styleDir: 'date-picker'
-    },
    {
        pattern: /^Dropdown/,
        styleDir: 'dropdown'
    },
-
    {
        pattern: /^Form/,
        styleDir: 'form'
    },
+    {
+        pattern: /^Image/,
+        styleDir: 'image'
+    },
    {
        pattern: /^InputNumber/,
        styleDir: 'input-number'
    },
-
-    {
-        pattern: /^Input|^Textarea/,
-        styleDir: 'input'
-    },
-    {
-        pattern: /^Statistic/,
-        styleDir: 'statistic'
-    },
-    {
-        pattern: /^CheckableTag/,
-        styleDir: 'tag'
-    },
-    {
-        pattern: /^TimeRangePicker/,
-        styleDir: 'time-picker'
-    },
    {
        pattern: /^Layout/,
        styleDir: 'layout'
    },
-    {
-        pattern: /^Menu|^SubMenu/,
-        styleDir: 'menu'
-    },
-
-    {
-        pattern: /^Table/,
-        styleDir: 'table'
-    },
-    {
-        pattern: /^TimePicker|^TimeRangePicker/,
-        styleDir: 'time-picker'
-    },
-    {
-        pattern: /^Radio/,
-        styleDir: 'radio'
-    },
-
-    {
-        pattern: /^Image/,
-        styleDir: 'image'
-    },
-
    {
        pattern: /^List/,
        styleDir: 'list'
    },
-
-    {
-        pattern: /^Tab/,
-        styleDir: 'tabs'
-    },
    {
        pattern: /^Mentions/,
        styleDir: 'mentions'
@@ -154,37 +111,72 @@ const matchComponents: IMatcher[] = [
        styleDir: 'qr-code'
    },
    {
-        pattern: /^Step/,
-        styleDir: 'steps'
+        pattern: /^Radio/,
+        styleDir: 'radio'
    },
-    {
-        pattern: /^Skeleton/,
-        styleDir: 'skeleton'
-    },
-
    {
        pattern: /^Select/,
        styleDir: 'select'
    },
    {
-        pattern: /^TreeSelect/,
-        styleDir: 'tree-select'
+        pattern: /^Skeleton/,
+        styleDir: 'skeleton'
    },
    {
-        pattern: /^Tree|^DirectoryTree/,
-        styleDir: 'tree'
+        pattern: /^Statistic/,
+        styleDir: 'statistic'
    },
    {
-        pattern: /^Typography/,
-        styleDir: 'typography'
+        pattern: /^Step/,
+        styleDir: 'steps'
+    },
+    {
+        pattern: /^Tab/,
+        styleDir: 'tabs'
+    },
+    {
+        pattern: /^Table/,
+        styleDir: 'table'
    },
    {
        pattern: /^Timeline/,
        styleDir: 'timeline'
    },
+    {
+        pattern: /^TimeRangePicker/,
+        styleDir: 'time-picker'
+    },
+    {
+        pattern: /^Typography/,
+        styleDir: 'typography'
+    },
+    {
+        pattern: /^TreeSelect/,
+        styleDir: 'tree-select'
+    },
    {
        pattern: /^Upload/,
        styleDir: 'upload'
+    },
+    {
+        pattern: /^Input|^Textarea/,
+        styleDir: 'input'
+    },
+    {
+        pattern: /^Menu|^SubMenu/,
+        styleDir: 'menu'
+    },
+    {
+        pattern: /^Tree|^DirectoryTree/,
+        styleDir: 'tree'
+    },
+    {
+        pattern: /^MonthPicker|^RangePicker|^WeekPicker/,
+        styleDir: 'date-picker'
+    },
+    {
+        pattern: /^TimePicker|^TimeRangePicker/,
+        styleDir: 'time-picker'
    }
 ]

@@ -257,12 +249,12 @@ const getSideEffects = (compName: string, options: AntDesignResolverOptions): Si

 const primitiveNames = [
    'Affix',
+    'Alert',
    'Anchor',
    'AnchorLink',
    'AutoComplete',
    'AutoCompleteOptGroup',
    'AutoCompleteOption',
-    'Alert',
    'Avatar',
    'AvatarGroup',
    'BackTop',
@@ -277,105 +269,106 @@ const primitiveNames = [
    'Card',
    'CardGrid',
    'CardMeta',
-    'Collapse',
-    'CollapsePanel',
    'Carousel',
    'Cascader',
+    'CheckableTag',
    'Checkbox',
    'CheckboxGroup',
    'Col',
+    'Collapse',
+    'CollapsePanel',
    'Comment',
    'ConfigProvider',
    'DatePicker',
-    'MonthPicker',
-    'WeekPicker',
-    'RangePicker',
-    'QuarterPicker',
    'Descriptions',
    'DescriptionsItem',
+    'DirectoryTree',
    'Divider',
+    'Drawer',
    'Dropdown',
    'DropdownButton',
-    'Drawer',
    'Empty',
    'FloatButton',
    'Form',
    'FormItem',
    'FormItemRest',
    'Grid',
-    'Input',
-    'InputGroup',
-    'InputPassword',
-    'InputSearch',
-    'Textarea',
    'Image',
    'ImagePreviewGroup',
+    'Input',
+    'InputGroup',
    'InputNumber',
+    'InputPassword',
+    'InputSearch',
    'Layout',
+    'LayoutContent',
+    'LayoutFooter',
    'LayoutHeader',
    'LayoutSider',
-    'LayoutFooter',
-    'LayoutContent',
    'List',
    'ListItem',
    'ListItemMeta',
+    'LocaleProvider',
+    'Mentions',
+    'MentionsOption',
    'Menu',
    'MenuDivider',
    'MenuItem',
    'MenuItemGroup',
-    'SubMenu',
-    'Mentions',
-    'MentionsOption',
    'Modal',
-    'Statistic',
-    'StatisticCountdown',
+    'MonthPicker',
    'PageHeader',
    'Pagination',
    'Popconfirm',
    'Popover',
    'Progress',
+    'QRCode',
+    'QuarterPicker',
    'Radio',
    'RadioButton',
    'RadioGroup',
+    'RangePicker',
    'Rate',
    'Result',
    'Row',
-    'QRCode',
+    'Segmented',
    'Select',
    'SelectOptGroup',
    'SelectOption',
    'Skeleton',
-    'SkeletonButton',
    'SkeletonAvatar',
-    'SkeletonInput',
+    'SkeletonButton',
    'SkeletonImage',
+    'SkeletonInput',
    'Slider',
    'Space',
    'Spin',
-    'Steps',
+    'Statistic',
+    'StatisticCountdown',
    'Step',
+    'Steps',
+    'SubMenu',
    'Switch',
    'Table',
    'TableColumn',
    'TableColumnGroup',
    'TableSummary',
-    'TableSummaryRow',
    'TableSummaryCell',
+    'TableSummaryRow',
+    'TabPane',
+    'Tabs',
+    'Tag',
+    'Textarea',
+    'Timeline',
+    'TimelineItem',
+    'TimePicker',
+    'TimeRangePicker',
+    'Tooltip',
    'Transfer',
    'Tree',
    'TreeNode',
-    'DirectoryTree',
    'TreeSelect',
    'TreeSelectNode',
-    'Tabs',
-    'TabPane',
-    'Tag',
-    'CheckableTag',
-    'TimePicker',
-    'TimeRangePicker',
-    'Timeline',
-    'TimelineItem',
-    'Tooltip',
    'Typography',
    'TypographyLink',
    'TypographyParagraph',
@@ -383,7 +376,7 @@ const primitiveNames = [
    'TypographyTitle',
    'Upload',
    'UploadDragger',
-    'LocaleProvider'
+    'WeekPicker'
 ]

 const prefix = 'Antd'
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,30 @@
+import globals from 'globals'
+import eslintJs from '@eslint/js'
+import tsEslint from 'typescript-eslint'
+
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+
+const config = {
+    name: 'Global config',
+    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+    rules: {
+        '@typescript-eslint/no-unused-expressions': [
+            'error',
+            {
+                allowShortCircuit: true,
+                allowTernary: true,
+                allowTaggedTemplates: true
+            }
+        ],
+        '@typescript-eslint/no-unused-vars': 'off'
+    }
+}
+
+export default [
+    { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+    { languageOptions: { globals: globals.browser } },
+    eslintJs.configs.recommended,
+    eslintPluginPrettierRecommended,
+    ...tsEslint.configs.recommended,
+    config
+]
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "oxygen-ui",
  "private": true,
  "type": "module",
-  "version": "1.0.1-SNAPSHOT",
+  "version": "1.1.0",
  "description": "Oxygen Toolbox browser version",
  "author": {
    "name": "FatttSnake",
@@ -23,62 +23,60 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@ant-design/icons": "^5.3.7",
+    "@ant-design/icons": "^5.5.1",
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/sortable": "^8.0.0",
    "@dnd-kit/utilities": "^3.2.2",
-    "@marsidev/react-turnstile": "^0.7.1",
+    "@marsidev/react-turnstile": "^1.0.2",
    "@monaco-editor/react": "^4.6.0",
-    "antd": "^5.18.1",
-    "axios": "^1.7.2",
+    "@shikijs/monaco": "^1.22.2",
+    "@xyflow/react": "^12.3.2",
+    "antd": "^5.21.6",
+    "antd-style": "^3.7.1",
+    "axios": "^1.7.7",
    "custom-protocol-check": "^1.4.0",
-    "dayjs": "^1.11.11",
-    "echarts": "^5.5.0",
-    "esbuild-wasm": "^0.21.5",
+    "dayjs": "^1.11.13",
+    "echarts": "^5.5.1",
+    "esbuild-wasm": "^0.24.0",
    "fast-deep-equal": "^3.1.3",
    "fflate": "^0.8.2",
    "jwt-decode": "^4.0.0",
    "localforage": "^1.10.0",
    "lodash": "^4.17.21",
-    "match-sorter": "^6.3.4",
+    "match-sorter": "^7.0.0",
    "moment": "^2.30.1",
-    "monaco-editor": "^0.49.0",
-    "monaco-jsx-syntax-highlight": "^1.2.0",
+    "monaco-editor": "^0.52.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-draggable": "^4.4.6",
-    "react-router": "^6.23.1",
-    "react-router-dom": "^6.23.1",
+    "react-router": "^6.27.0",
+    "react-router-dom": "^6.27.0",
+    "shiki": "^1.22.2",
    "size-sensor": "^1.0.2",
    "vanilla-tilt": "^1.8.1"
  },
  "devDependencies": {
+    "@eslint/js": "^9.13.0",
    "@svgr/core": "^8.1.0",
    "@svgr/plugin-jsx": "^8.1.0",
    "@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.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": "^52.0.0",
+    "@types/lodash": "^4.17.12",
+    "@types/node": "^22.8.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript/ata": "^0.9.7",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "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.6",
-    "unplugin-icons": "^0.19.0",
-    "vite": "^5.2.13"
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "jsdom": "^25.0.1",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.12.1",
+    "unplugin-auto-import": "^0.18.3",
+    "unplugin-icons": "^0.19.3",
+    "vite": "^5.4.10"
  }
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,27 +1,97 @@
+import { theme } from 'antd'
+import zh_CN from 'antd/locale/zh_CN'
+import BaseStyles from '@/assets/css/base.style'
+import CommonStyles from '@/assets/css/common.style'
+import {
+    COLOR_PRODUCTION,
+    THEME_DARK,
+    THEME_FOLLOW_SYSTEM,
+    THEME_LIGHT
+} from '@/constants/common.constants'
 import { getRouter } from '@/router'
+import { getThemeMode, init } from '@/util/common'
 import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'

-export const AppContext = createContext<{ refreshRouter: () => void }>({
-    refreshRouter: () => undefined
+export const AppContext = createContext({
+    refreshRouter: () => {},
+    isDarkMode: false
 })

 const App = () => {
+    const [messageInstance, messageHolder] = message.useMessage()
+    const [notificationInstance, notificationHolder] = notification.useNotification()
+    const [modalInstance, modalHolder] = AntdModal.useModal()
    const [routerState, setRouterState] = useState(getRouter)
+    const [themeMode, setThemeMode] = useState(getThemeMode())
+    const [isSystemDarkMode, setIsSystemDarkMode] = useState(false)
+
+    const getIsDark = () => {
+        switch (themeMode) {
+            case THEME_FOLLOW_SYSTEM:
+                return isSystemDarkMode
+            case THEME_LIGHT:
+                return false
+            case THEME_DARK:
+                return true
+        }
+    }
+
+    useEffect(() => {
+        init(messageInstance, notificationInstance, modalInstance)
+
+        const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
+        setIsSystemDarkMode(darkThemeMq.matches)
+        const darkThemeMqChangeListener = (ev: MediaQueryListEvent) => {
+            setIsSystemDarkMode(ev.matches)
+        }
+        darkThemeMq.addEventListener('change', darkThemeMqChangeListener)
+
+        const themeModeChangeListener = () => {
+            setThemeMode(getThemeMode())
+        }
+        window.addEventListener('localStorageChange', themeModeChangeListener)
+
+        return () => {
+            darkThemeMq.removeEventListener('change', darkThemeMqChangeListener)
+            window.removeEventListener('localStorageChange', themeModeChangeListener)
+        }
+    }, [])

    return (
-        <>
+        <AntdConfigProvider
+            theme={{
+                cssVar: true,
+                algorithm: getIsDark() ? theme.darkAlgorithm : theme.defaultAlgorithm,
+                token: {
+                    colorPrimary: COLOR_PRODUCTION,
+                    colorLinkHover: COLOR_PRODUCTION
+                },
+                components: {
+                    Tree: {
+                        colorBgContainer: 'transparent'
+                    }
+                }
+            }}
+            locale={zh_CN}
+        >
+            <BaseStyles />
+            <CommonStyles />
            <AppContext.Provider
                value={{
                    refreshRouter: () => {
                        setRouterState(getRouter())
-                    }
+                    },
+                    isDarkMode: getIsDark()
                }}
            >
                <Suspense fallback={<FullscreenLoadingMask />}>
                    <RouterProvider router={routerState} />
                </Suspense>
            </AppContext.Provider>
-        </>
+            {messageHolder}
+            {notificationHolder}
+            {modalHolder}
+        </AntdConfigProvider>
    )
 }

--- a/src/assets/css/_mixins.scss
+++ b/src/assets/css/_mixins.scss
@@ -1,22 +0,0 @@
-@mixin keyframes($animationName) {
-  @-webkit-keyframes #{$animationName} {
-    @content
-  }
-  @-moz-keyframes #{$animationName} {
-    @content
-  }
-  @-o-keyframes #{$animationName} {
-    @content
-  }
-  @keyframes #{$animationName} {
-    @content
-  }
-}
-
-@mixin unique-keyframes {
-  $animationName: unique-id();
-  animation-name: $animationName;
-  @include keyframes($animationName) {
-    @content
-  }
-}
--- a/src/assets/css/base.scss
+++ b/src/assets/css/base.scss
@@ -1,63 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-em,
-i {
-  font-style: normal
-}
-
-li {
-  list-style: none
-}
-
-img {
-  border: 0;
-  vertical-align: middle
-}
-
-button {
-  cursor: pointer
-}
-
-a {
-  color: #666;
-  text-decoration: none
-}
-
-button,
-input {
-  font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
-  border: 0;
-  outline: none;
-}
-
-body {
-  -webkit-font-smoothing: antialiased;
-  background-color: #fff;
-  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
-  color: #666
-}
-
-.hide,
-.none {
-  display: none
-}
-
-.clearfix:after {
-  visibility: hidden;
-  clear: both;
-  display: block;
-  content: ".";
-  height: 0
-}
-
-.clearfix {
-  *zoom: 1
-}
--- a/src/assets/css/base.style.ts
+++ b/src/assets/css/base.style.ts
@@ -0,0 +1,32 @@
+import { createGlobalStyle } from 'antd-style'
+
+export default createGlobalStyle(() => ({
+    '*': { margin: 0, padding: 0, boxSizing: 'border-box' },
+    html: { scrollBehavior: 'smooth' },
+    'em, i': { fontStyle: 'normal' },
+    li: { listStyle: 'none' },
+    img: { border: 0, verticalAlign: 'middle' },
+    button: { cursor: 'pointer' },
+    a: { color: '#666', textDecoration: 'none', whiteSpace: 'nowrap' },
+    'button, input': {
+        fontFamily:
+            'Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif',
+        border: 0,
+        outline: 'none'
+    },
+    body: {
+        WebkitFontSmoothing: 'antialiased',
+        backgroundColor: '#fff',
+        font: '12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif',
+        color: '#666'
+    },
+    '.hide, .none': { display: 'none' },
+    '.clearfix:after': {
+        visibility: 'hidden',
+        clear: 'both',
+        display: 'block',
+        content: '"."',
+        height: 0
+    },
+    '.clearfix': { zoom: 1 }
+}))
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -1,118 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-#root {
-  height: 100vh;
-  width: 100vw;
-}
-
-.body {
-  background-color: constants.$background-color;
-  color: constants.$font-main-color;
-  user-select: none;
-  min-width: 900px;
-  min-height: 400px;
-}
-
-.fill {
-  height: 100%;
-  width: 100%;
-}
-
-.fill-with {
-  width: 100%;
-}
-
-.fill-height {
-  height: 100%;
-}
-
-.background-origin {
-  background-color: constants.$origin-color;
-}
-
-.center-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.vertical-center-box {
-  display: flex;
-  align-items: center;
-}
-
-.horizontal-center-box {
-  display: flex;
-  justify-content: center;
-}
-
-.icon-size-xs {
-  width: 16px;
-  height: 16px;
-
-  > use {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-.icon-size-sm {
-  width: 20px;
-  height: 20px;
-
-  > use {
-    width: 20px;
-    height: 20px;
-  }
-}
-
-.icon-size-md {
-  width: 24px;
-  height: 24px;
-
-  > use {
-    width: 24px;
-    height: 24px;
-  }
-}
-
-.icon-size-lg {
-  width: 32px;
-  height: 32px;
-
-  > use {
-
-    width: 32px;
-    height: 32px;
-  }
-}
-
-.icon-size-xl {
-  width: 64px;
-  height: 64px;
-
-  > use {
-    width: 64px;
-    height: 64px;
-  }
-}
-
-.icon-size-menu {
-  width: 23px;
-  height: 23px;
-
-  > use {
-    width: 23px;
-    height: 23px;
-  }
-}
-
-.flex-horizontal {
-  display: flex;
-  flex-direction: row;
-}
-
-.flex-vertical {
-  display: flex;
-  flex-direction: column;
-}
--- a/src/assets/css/common.style.ts
+++ b/src/assets/css/common.style.ts
@@ -0,0 +1,43 @@
+import { createGlobalStyle } from 'antd-style'
+
+export default createGlobalStyle(() => ({
+    '.center-box': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    '.vertical-center-box': { display: 'flex', alignItems: 'center' },
+    '.horizontal-center-box': { display: 'flex', justifyContent: 'center' },
+    '.icon-size-xs': {
+        width: 16,
+        height: 16,
+        '> use': { width: 16, height: 16 }
+    },
+    '.icon-size-sm': {
+        width: 20,
+        height: 20,
+        '> use': { width: 20, height: 20 }
+    },
+    '.icon-size-md': {
+        width: 24,
+        height: 24,
+        '> use': { width: 24, height: 24 }
+    },
+    '.icon-size-lg': {
+        width: 32,
+        height: 32,
+        '> use': { width: 32, height: 32 }
+    },
+    '.icon-size-xl': {
+        width: 64,
+        height: 64,
+        '> use': { width: 64, height: 64 }
+    },
+    '.icon-size-menu': {
+        width: 23,
+        height: 23,
+        '> use': { width: 23, height: 23 }
+    },
+    '.flex-horizontal': { display: 'flex', flexDirection: 'row' },
+    '.flex-vertical': { display: 'flex', flexDirection: 'column' }
+}))
--- a/src/assets/css/components/common/card.scss
+++ b/src/assets/css/components/common/card.scss
@@ -1,8 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-.card-box {
-  background-color: constants.$origin-color;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
-}
--- a/src/assets/css/components/common/card.style.ts
+++ b/src/assets/css/components/common/card.style.ts
@@ -0,0 +1,10 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    cardBox: {
+        backgroundColor: token.colorBgContainer,
+        borderRadius: token.borderRadiusLG,
+        overflow: 'hidden',
+        boxShadow: token.boxShadowTertiary
+    }
+}))
--- a/src/assets/css/components/common/fit-center.scss
+++ b/src/assets/css/components/common/fit-center.scss
@@ -1,7 +0,0 @@
-.fit-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
--- a/src/assets/css/components/common/fit-center.style.ts
+++ b/src/assets/css/components/common/fit-center.style.ts
@@ -0,0 +1,11 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    fitCenter: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%'
+    }
+}))
--- a/src/assets/css/components/common/fit-fullscreen.scss
+++ b/src/assets/css/components/common/fit-fullscreen.scss
@@ -1,5 +0,0 @@
-.fit-fullscreen {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-}
--- a/src/assets/css/components/common/fit-fullscreen.style.ts
+++ b/src/assets/css/components/common/fit-fullscreen.style.ts
@@ -0,0 +1,9 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    fitFullscreen: {
+        position: 'relative',
+        width: '100%',
+        height: '100vh'
+    }
+}))
--- a/src/assets/css/components/common/flex-box.scss
+++ b/src/assets/css/components/common/flex-box.scss
@@ -1,5 +0,0 @@
-.flex-box {
-  > * {
-    flex: 1;
-  }
-}
--- a/src/assets/css/components/common/flex-box.style.ts
+++ b/src/assets/css/components/common/flex-box.style.ts
@@ -0,0 +1,12 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(
+    () => ({
+        flexBox: {
+            '> *': {
+                flex: 1
+            }
+        }
+    }),
+    { hashPriority: 'low' }
+)
--- a/src/assets/css/components/common/fullscreen-loading-mask.scss
+++ b/src/assets/css/components/common/fullscreen-loading-mask.scss
@@ -1,10 +0,0 @@
-.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);
-}
--- a/src/assets/css/components/common/fullscreen-loading-mask.style.ts
+++ b/src/assets/css/components/common/fullscreen-loading-mask.style.ts
@@ -0,0 +1,14 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    fullscreenLoadingMask: {
+        position: 'absolute',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+        zIndex: 100,
+        backgroundColor: token.colorBgContainer
+    }
+}))
--- a/src/assets/css/components/common/hide-scrollbar.scss
+++ b/src/assets/css/components/common/hide-scrollbar.scss
@@ -1,90 +0,0 @@
-@use '@/assets/css/constants' as constants;
-@use '@/assets/css/mixins' as mixins;
-
-.hide-scrollbar-mask {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  .hide-scrollbar-selection {
-    position: relative;
-    overflow: scroll;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    .hide-scrollbar-content {
-      min-width: 100%;
-    }
-  }
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
-  .scrollbar {
-    position: absolute;
-    z-index: 1000;
-    opacity: .5;
-    touch-action: none;
-
-    .box {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      border-radius: 8px;
-      overflow: hidden;
-
-
-      .block {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border-radius: 8px;
-        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 {
-    height: 100%;
-    left: 100%;
-    top: 0;
-    transform: translateX(-100%);
-
-    .box {
-      width: 6px;
-    }
-  }
-
-  .horizontal-scrollbar {
-    width: 100%;
-    left: 0;
-    top: 100%;
-    transform: translateY(-100%);
-
-    .box {
-      height: 8px;
-    }
-  }
-}
--- a/src/assets/css/components/common/hide-scrollbar.style.ts
+++ b/src/assets/css/components/common/hide-scrollbar.style.ts
@@ -0,0 +1,84 @@
+import { createStyles, keyframes } from 'antd-style'
+
+const fadeOut = keyframes`
+    0% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 0;
+    }
+`
+
+export default createStyles(({ css, cx, token }) => {
+    const scrollbarBox = cx(css`
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border-radius: ${token.borderRadiusLG};
+        overflow: hidden;
+    `)
+
+    return {
+        hideScrollbarMask: {
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+            '::-webkit-scrollbar': {
+                display: 'none'
+            }
+        },
+        hideScrollbarSelection: {
+            position: 'relative',
+            overflow: 'scroll',
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none'
+        },
+        hideScrollbarContent: {
+            minWidth: '100%'
+        },
+        scrollbar: {
+            position: 'absolute',
+            zIndex: 1000,
+            opacity: 0.5,
+            touchAction: 'none'
+        },
+        scrollbarBox,
+        scrollbarBoxBlock: {
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            borderRadius: token.borderRadiusLG,
+            backgroundColor: token.colorTextSecondary,
+            transition: 'background-color 0.2s',
+            ':hover': {
+                backgroundColor: token.colorTextLabel
+            }
+        },
+        verticalScrollbar: css`
+            height: 100%;
+            left: 100%;
+            top: 0;
+            transform: translateX(-100%);
+
+            .${scrollbarBox} {
+                width: ${token.sizeXXS}px;
+            }
+        `,
+        horizontalScrollbar: css`
+            width: 100%;
+            left: 0;
+            top: 100%;
+            transform: translateY(-100%);
+
+            .${scrollbarBox} {
+                height: ${token.sizeXXS}px;
+            }
+        `,
+        hide: {
+            display: 'block',
+            opacity: 0,
+            animation: `${fadeOut} 0.4s linear`
+        }
+    }
+})
--- a/src/assets/css/components/common/indicator.scss
+++ b/src/assets/css/components/common/indicator.scss
@@ -1,34 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-.dot-list {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-
-  .item {
-    flex: auto;
-    cursor: pointer;
-
-    .dot {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      border: {
-        width: 2px;
-        color: constants.$font-secondary-color;
-        style: solid;
-      };
-      transition: all .2s;
-    }
-
-    :hover {
-      background-color: constants.$focus-color;
-    }
-  }
-
-  .active > * {
-    background-color: constants.$font-secondary-color !important;
-  }
-}
--- a/src/assets/css/components/common/loading-mask.scss
+++ b/src/assets/css/components/common/loading-mask.scss
@@ -1,8 +0,0 @@
-.loading-mask {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-}
--- a/src/assets/css/components/common/loading-mask.style.ts
+++ b/src/assets/css/components/common/loading-mask.style.ts
@@ -0,0 +1,12 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    loadingMask: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+        zIndex: 100
+    }
+}))
--- a/src/assets/css/components/common/sidebar.scss
+++ b/src/assets/css/components/common/sidebar.scss
@@ -1,363 +0,0 @@
-@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, .bottom-fixed {
-    display: flex;
-    min-height: 0;
-    flex-direction: column;
-    flex: 1;
-
-    .scroll {
-      min-height: 0;
-      flex: 1;
-      width: 100%;
-    }
-
-    ul {
-      > li, > div > li {
-        padding: 2px 14px;
-
-        &.item {
-          position: relative;
-          font-size: 1rem;
-
-          > .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;
-
-              img {
-                width: 100%;
-              }
-            }
-
-            a {
-              display: flex;
-              align-items: center;
-              height: 100%;
-              width: 100%;
-              transition: all 0.2s;
-              background-color: constants.$origin-color;
-
-              .text {
-                flex: 1;
-                padding-left: 8px;
-                width: 0;
-                overflow: hidden;
-                text-overflow: ellipsis;
-              }
-
-              &.active {
-                color: constants.$origin-color;
-                background-color: constants.$main-color;
-
-                img {
-                  filter: drop-shadow(1000px 0 0 constants.$origin-color);
-                  transform: translate(-1000px);
-                }
-              }
-            }
-          }
-
-          .submenu {
-            visibility: hidden;
-            position: fixed;
-            padding-left: 10px;
-            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;
-              flex-direction: column;
-              gap: 2px;
-              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;
-                  padding: 8px 16px;
-                  transition: all 0.2s;
-
-                  .text {
-                    width: unset;
-                  }
-
-                  &.active {
-                    color: constants.$origin-color;
-                    background-color: constants.$main-color;
-                  }
-                }
-
-                &:hover a:not(.active) {
-                  background-color: constants.$background-color;
-                }
-              }
-            }
-          }
-
-          &:hover {
-            > .menu-bt {
-              a:not(.active) {
-                background-color: constants.$background-color;
-              }
-            }
-
-            .submenu {
-              visibility: visible;
-              animation: 0.3s ease;
-              @include mixins.unique-keyframes {
-                0% {
-                  transform: translateX(-10px);
-                  opacity: 0;
-                }
-                100% {
-                  transform: translateX(0);
-                  opacity: 1;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      .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;
-          }
-        }
-      }
-    }
-  }
-
-  .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;
-      flex: 0 0 auto;
-      margin-left: 4px;
-      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 {
-      flex: 1;
-      padding-left: 10px;
-      font-size: 1.4em;
-      color: constants.$font-main-color;
-      user-select: text;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      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, .extend {
-        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%;
-        z-index: 1000;
-        box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
-
-        .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;
-          }
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/components/common/sidebar/footer.style.ts
+++ b/src/assets/css/components/common/sidebar/footer.style.ts
@@ -0,0 +1,112 @@
+import { createStyles, keyframes } from 'antd-style'
+
+const slideIn = keyframes`
+    0% {
+        transform: translateX(-10px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+`
+
+export default createStyles(({ cx, css, token }) => {
+    const collapsedExit = cx(css`
+        opacity: 0;
+        position: absolute;
+        padding-left: ${token.paddingXS}px;
+        left: 100%;
+        z-index: 1000;
+        transform: translateX(-100%);
+    `)
+
+    return {
+        footer: css`
+            display: flex;
+            position: relative;
+            align-items: center;
+            font-weight: bold;
+            padding: ${token.paddingXS}px ${token.paddingSM}px;
+            color: ${token.colorPrimary};
+
+            &:hover .${collapsedExit} {
+                opacity: 1;
+                animation: ${slideIn} 0.3s ease;
+                transform: unset;
+            }
+        `,
+
+        icon: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flex: '0 0 auto',
+            marginLeft: token.marginXXS,
+            width: token.sizeXL,
+            height: token.sizeXL,
+            fontSize: token.sizeMS,
+            border: `2px ${token.colorBorder} solid`,
+            color: token.colorBorder,
+            borderRadius: '50%',
+            overflow: 'hidden',
+            cursor: 'pointer',
+
+            img: {
+                width: '100%',
+                height: '100%'
+            }
+        },
+
+        text: {
+            flex: 1,
+            paddingLeft: token.paddingXS,
+            fontSize: token.fontSizeLG,
+            color: token.colorTextLabel,
+            userSelect: 'text',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            a: {
+                color: token.colorPrimary,
+                textDecoration: 'underline'
+            }
+        },
+
+        collapsedText: {
+            display: 'none'
+        },
+
+        collapsedExit,
+
+        hide: {
+            display: 'none !important'
+        },
+
+        exitContent: {
+            display: 'flex',
+            backgroundColor: token.colorBgContainer
+        },
+
+        collapsedExitContent: {
+            padding: token.paddingXS,
+            borderRadius: token.borderRadiusLG,
+            boxShadow: token.boxShadow
+        },
+
+        exitIcon: {
+            fontSize: token.sizeMS,
+            color: token.colorError,
+            padding: `${token.paddingXXS}px ${token.paddingXS}px`,
+            cursor: 'pointer',
+
+            '&:hover': {
+                borderRadius: token.borderRadiusLG,
+                backgroundColor: token.colorBgLayout
+            }
+        },
+
+        collapsedExitIcon: {
+            padding: `${token.paddingXXS}px ${token.paddingXS}px`
+        }
+    }
+})
--- a/src/assets/css/components/common/sidebar/index.style.ts
+++ b/src/assets/css/components/common/sidebar/index.style.ts
@@ -0,0 +1,85 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ cx, css, token }) => {
+    const title = cx(css`
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+        padding: ${token.paddingXS}px ${token.paddingSM}px;
+        color: ${token.colorPrimary};
+        overflow: hidden;
+    `)
+
+    const titleIcon = cx(css`
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: ${token.paddingXS}px;
+        width: 40px;
+        height: 40px;
+        font-size: ${token.sizeMD}px;
+        border-radius: ${token.borderRadiusLG}px;
+        cursor: pointer;
+
+        span {
+            transform: rotateZ(180deg);
+            transition: all 0.3s;
+        }
+
+        &:hover {
+            background-color: ${token.colorBgLayout};
+        }
+    `)
+
+    const titleText = cx(css`
+        flex: 1;
+        font-size: ${token.fontSizeHeading3}px;
+        text-align: center;
+        letter-spacing: ${token.sizeXS}px;
+    `)
+
+    return {
+        sidebar: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            userSelect: 'none',
+            transition: 'all .3s',
+            whiteSpace: 'nowrap'
+        },
+
+        title,
+
+        titleIcon,
+
+        titleText,
+
+        content: {
+            display: 'flex',
+            minHeight: 0,
+            flexDirection: 'column',
+            flex: 1,
+
+            'ul > li, ul > div > li': {
+                padding: `${token.paddingXXS}px ${token.paddingSM}px`
+            }
+        },
+
+        collapse: cx(css`
+            width: ${token.sizeXL * 2}px !important;
+
+            .${title} {
+                .${titleIcon} {
+                    span {
+                        transform: rotateZ(360deg);
+                        transition: all 0.3s;
+                    }
+                }
+
+                .${titleText} {
+                    display: none;
+                }
+            }
+        `)
+    }
+})
--- a/src/assets/css/components/common/sidebar/item.style.ts
+++ b/src/assets/css/components/common/sidebar/item.style.ts
@@ -0,0 +1,84 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ cx, css, token }) => {
+    const menuBt = cx(css`
+        border-radius: ${token.borderRadiusLG}px;
+        overflow: hidden;
+        height: 40px;
+
+        a {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            transition: all 0.2s;
+            background-color: ${token.colorBgContainer};
+        }
+    `)
+
+    const active = cx(css`
+        color: ${token.colorTextLightSolid};
+        background-color: ${token.colorPrimary} !important;
+    `)
+
+    return {
+        item: css`
+            position: relative;
+            font-size: ${token.fontSizeHeading5}px;
+
+            &:hover > div > a:not(.${active}),
+            &:hover > a:not(.${active}) {
+                background-color: ${token.colorBgLayout};
+            }
+        `,
+
+        submenuItem: css`
+            border-radius: ${token.borderRadiusLG}px;
+            white-space: nowrap;
+            overflow: hidden;
+            padding: 0 !important;
+
+            a {
+                display: block;
+                padding: ${token.paddingXS}px ${token.paddingMD}px;
+                transition: all 0.2s;
+            }
+        `,
+
+        menuBt,
+
+        active,
+
+        icon: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: `0 ${token.paddingXS}px`,
+            width: 40,
+            height: 40,
+            flex: '0 0 auto',
+            fontSize: token.sizeMD,
+            cursor: 'pointer',
+
+            img: {
+                width: '100%'
+            }
+        },
+
+        text: {
+            flex: 1,
+            paddingLeft: token.paddingXS,
+            width: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        },
+
+        collapsedText: {
+            display: 'none'
+        },
+
+        collapsedExtend: {
+            display: 'none'
+        }
+    }
+})
--- a/src/assets/css/components/common/sidebar/scroll.style.ts
+++ b/src/assets/css/components/common/sidebar/scroll.style.ts
@@ -0,0 +1,9 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    scroll: {
+        minHeight: 0,
+        flex: 1,
+        width: '100%'
+    }
+}))
--- a/src/assets/css/components/common/sidebar/separate.ts
+++ b/src/assets/css/components/common/sidebar/separate.ts
@@ -0,0 +1,9 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    separate: {
+        height: 0,
+        margin: `${token.marginSM}px ${token.marginXS}px`,
+        border: `1px solid ${token.colorBorder}`
+    }
+}))
--- a/src/assets/css/components/common/sidebar/submenu.style.ts
+++ b/src/assets/css/components/common/sidebar/submenu.style.ts
@@ -0,0 +1,50 @@
+import { createStyles, keyframes } from 'antd-style'
+
+export default createStyles(({ token }) => {
+    const slideIn = keyframes`
+        0% {
+            transform: translateX(-${token.sizeSM}px);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    `
+
+    const slideOut = keyframes`
+         0% {
+           transform: translateX(0);
+           opacity: 1;
+         }
+         100% {
+           transform: translateX(-${token.sizeSM}px);
+           opacity: 0;
+         }
+    `
+
+    return {
+        submenu: {
+            visibility: 'hidden',
+            position: 'fixed',
+            paddingLeft: token.paddingXS,
+            zIndex: 10000,
+            animation: `${slideOut} 0.1s ease forwards`
+        },
+
+        hoveredSubmenu: {
+            visibility: 'visible',
+            animation: `${slideIn} 0.3s ease`
+        },
+
+        content: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: token.sizeXXS,
+            padding: token.paddingSM,
+            backgroundColor: token.colorBgContainer,
+            borderRadius: token.borderRadiusLG,
+            boxShadow: token.boxShadow
+        }
+    }
+})
--- a/src/assets/css/components/common/url-card.scss
+++ b/src/assets/css/components/common/url-card.scss
@@ -1,28 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=component-url-card] {
-  cursor: pointer;
-
-  .url-card {
-    width: 100%;
-    height: 100%;
-    margin-top: 80px;
-    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;
-    }
-  }
-}
--- a/src/assets/css/components/common/url-card.style.ts
+++ b/src/assets/css/components/common/url-card.style.ts
@@ -0,0 +1,24 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        width: 180,
+        height: 290,
+        textAlign: 'center',
+        gap: token.sizeXXL,
+        cursor: 'pointer',
+        '> *': {
+            flex: '0 0 auto',
+            display: 'block'
+        }
+    },
+    icon: {
+        marginTop: 80,
+        color: token.colorPrimary,
+        fontSize: token.sizeXXL
+    },
+    text: {
+        fontWeight: 'bolder',
+        fontSize: token.fontSizeXL
+    }
+}))
--- a/src/assets/css/components/dnd/drag-handle.scss
+++ b/src/assets/css/components/dnd/drag-handle.scss
@@ -1,5 +0,0 @@
-[data-component=component-drag-handle] {
-  background-color: transparent;
-  color: unset;
-  cursor: grab;
-}
--- a/src/assets/css/components/dnd/drag-handle.style.ts
+++ b/src/assets/css/components/dnd/drag-handle.style.ts
@@ -0,0 +1,9 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    root: {
+        backgroundColor: 'transparent',
+        color: 'unset',
+        cursor: 'grab'
+    }
+}))
--- a/src/assets/css/components/dnd/drop-mask.scss
+++ b/src/assets/css/components/dnd/drop-mask.scss
@@ -1,30 +0,0 @@
-@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;
-  }
-}
--- a/src/assets/css/components/dnd/drop-mask.style.ts
+++ b/src/assets/css/components/dnd/drop-mask.style.ts
@@ -0,0 +1,24 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        padding: `0 ${token.paddingSM}px ${token.paddingSM}px`,
+        backgroundColor: token.colorBgContainer
+    },
+
+    dropMaskBorder: {
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: `2px dashed ${token.colorBorder}`,
+        borderRadius: token.borderRadiusLG,
+        fontSize: token.fontSizeHeading3
+    }
+}))
--- a/src/assets/css/components/dnd/sortable.style.ts
+++ b/src/assets/css/components/dnd/sortable.style.ts
@@ -0,0 +1,15 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    delete: {
+        '.dnd-delete-mask': {
+            border: `1px dashed ${token.colorErrorHover}`,
+            filter: `drop-shadow(1000px 0 0 ${token.colorErrorHover})`,
+            transform: 'translate(-1000px)',
+
+            '> a': {
+                backgroundColor: 'transparent !important'
+            }
+        }
+    }
+}))
--- a/src/assets/css/components/system/setting-card.scss
+++ b/src/assets/css/components/system/setting-card.scss
@@ -1,33 +0,0 @@
-@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;
-      }
-    }
-  }
-}
--- a/src/assets/css/components/system/setting-card.style.ts
+++ b/src/assets/css/components/system/setting-card.style.ts
@@ -0,0 +1,32 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        padding: token.paddingLG,
+        gap: token.paddingLG,
+        color: token.colorPrimary
+    },
+
+    head: {
+        alignItems: 'center',
+        gap: token.sizeXXS,
+
+        '>:nth-child(n+3)': {
+            flex: '0 0 auto'
+        }
+    },
+
+    icon: {
+        fontSize: token.sizeLG,
+        flex: '0 0 auto'
+    },
+
+    title: {
+        display: 'flex',
+        fontSize: token.fontSize
+    },
+
+    btSave: {
+        color: token.colorPrimary
+    }
+}))
--- a/src/assets/css/components/system/statistics-card.scss
+++ b/src/assets/css/components/system/statistics-card.scss
@@ -1,78 +0,0 @@
-@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;
-      }
-    }
-  }
-}
--- a/src/assets/css/components/system/statistics-card.style.ts
+++ b/src/assets/css/components/system/statistics-card.style.ts
@@ -0,0 +1,28 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        padding: token.paddingLG,
+        gap: token.paddingLG
+    },
+
+    head: {
+        alignItems: 'center',
+        gap: token.sizeXXS,
+        color: token.colorPrimary,
+
+        '>:nth-child(n+3)': {
+            flex: '0 0 auto'
+        }
+    },
+
+    icon: {
+        fontSize: token.sizeLG,
+        flex: '0 0 auto'
+    },
+
+    title: {
+        display: 'flex',
+        fontSize: token.fontSize
+    }
+}))
--- a/src/assets/css/components/tools/load-more-card.scss
+++ b/src/assets/css/components/tools/load-more-card.scss
@@ -1,27 +0,0 @@
-@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;
-    }
-  }
-}
--- a/src/assets/css/components/tools/load-more-card.style.ts
+++ b/src/assets/css/components/tools/load-more-card.style.ts
@@ -0,0 +1,26 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+
+        '>*': {
+            flex: '0 0 auto'
+        }
+    },
+
+    icon: {
+        fontSize: token.sizeXXL,
+        color: token.colorPrimary
+    },
+
+    text: {
+        fontSize: token.fontSizeXL,
+        fontWeight: 'bolder'
+    }
+}))
--- a/src/assets/css/components/tools/repository-card.scss
+++ b/src/assets/css/components/tools/repository-card.scss
@@ -1,51 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=component-repository-card] {
-  height: 100%;
-
-  .repository-card {
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    align-items: center;
-
-    > * {
-      display: block;
-      flex: 0 0 auto;
-    }
-
-    .header {
-      display: flex;
-      width: 100%;
-      align-items: center;
-      padding: 10px;
-
-      .version-select {
-        width: 9em;
-        margin-right: auto;
-      }
-
-      >:not(.version-select) {
-        font-size: 1.6em;
-      }
-    }
-
-    .icon {
-      display: flex;
-      padding-top: 10px;
-      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;
-    }
-  }
-}
--- a/src/assets/css/components/tools/repository-card.style.ts
+++ b/src/assets/css/components/tools/repository-card.style.ts
@@ -0,0 +1,108 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ cx, css, token }) => {
+    const info = cx(css`
+        padding: 0 ${token.paddingSM}px;
+        transform: translateY(${token.sizeXL}px);
+        transition: all 0.1s ease;
+    `)
+
+    const edit = cx(css`
+        > * {
+            > :first-child {
+                flex: 1;
+            }
+        }
+    `)
+
+    const toolDesc = cx(css`
+        position: relative;
+        margin-top: ${token.marginXS}px;
+        color: ${token.colorTextDescription};
+        transition: all 0.1s ease;
+    `)
+
+    const operation = cx(css`
+        display: flex;
+        position: absolute;
+        flex: 1;
+        gap: ${token.sizeXXS}px;
+        bottom: ${token.sizeLG}px;
+        padding: 0 ${token.paddingLG}px;
+        width: 100%;
+        flex-direction: column;
+        opacity: 0;
+
+        > *,
+        .${edit} > * {
+            width: 100%;
+        }
+    `)
+
+    return {
+        root: css`
+            width: 180px;
+            height: 290px;
+            text-align: center;
+            gap: ${token.sizeSM}px;
+
+            > * {
+                flex: 0 0 auto;
+            }
+
+            &:hover {
+                .${info} {
+                    transform: translateY(-${token.sizeXXS}px);
+                    transition: all 0.2s ease;
+                }
+
+                .${toolDesc} {
+                    opacity: 0;
+                }
+
+                .${operation} {
+                    opacity: 1;
+                    transition: all 0.4s ease;
+                }
+            }
+        `,
+
+        header: {
+            display: 'flex',
+            width: '100%',
+            padding: token.paddingSM,
+            gap: token.paddingXS,
+
+            '> :first-child': {
+                width: 0,
+                flex: 1
+            },
+
+            '> :not(:first-child)': {
+                fontSize: token.size
+            }
+        },
+
+        icon: {
+            img: {
+                width: token.sizeXL * 2
+            }
+        },
+
+        info,
+
+        toolName: {
+            fontSize: token.fontSizeXL,
+            fontWeight: 'bolder',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        },
+
+        toolDesc,
+
+        operation,
+
+        edit
+    }
+})
--- a/src/assets/css/components/tools/store-card.scss
+++ b/src/assets/css/components/tools/store-card.scss
@@ -1,111 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=component-store-card] {
-  height: 100%;
-  cursor: pointer;
-
-  .store-card {
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    align-items: center;
-
-    > * {
-      display: block;
-      flex: 0 0 auto;
-    }
-
-    .header {
-      display: flex;
-      width: 100%;
-      padding: 10px;
-      justify-content: space-between;
-
-      .version {
-        width: 0;
-        transition: all 0.2s;
-      }
-
-      .operation {
-        display: flex;
-        font-size: 1.6em;
-        gap: 4px;
-        opacity: 0;
-        transition: all 0.2s;
-        z-index: 100;
-
-        > *:hover {
-          color: constants.$font-secondary-color;
-        }
-      }
-    }
-
-    .icon {
-      display: flex;
-      padding-top: 10px;
-      padding-bottom: 20px;
-      color: constants.$production-color;
-      font-size: constants.$SIZE_ICON_XL;
-      justify-content: center;
-
-      img {
-        width: constants.$SIZE_ICON_XL;
-      }
-    }
-
-    .info {
-      padding-top: 20px;
-
-      .tool-name {
-        font-weight: bolder;
-        font-size: 1.6em;
-      }
-
-      .tool-desc {
-        margin: {
-          top: 10px;
-          left: auto;
-          right: auto;
-        };
-        color: constants.$font-secondary-color;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-height: 40px;
-        width: 80%;
-      }
-    }
-
-    .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;
-      }
-    }
-  }
-
-  :hover {
-    .header {
-      .version {
-        opacity: 0;
-      }
-
-      .operation {
-        opacity: 1;
-      }
-    }
-  }
-}
--- a/src/assets/css/components/tools/store-card.style.ts
+++ b/src/assets/css/components/tools/store-card.style.ts
@@ -0,0 +1,110 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ cx, css, token }) => {
+    const version = cx(css`
+        width: 0;
+        transition: all 0.2s;
+    `)
+
+    const operation = cx(css`
+        display: flex;
+        font-size: 1.6em;
+        gap: ${token.sizeXXS}px;
+        opacity: 0;
+        transition: all 0.2s;
+        z-index: 100;
+
+        > *:hover {
+            color: ${token.colorIconHover};
+        }
+    `)
+
+    return {
+        root: css`
+            width: 180px;
+            height: 290px;
+            text-align: center;
+            gap: ${token.sizeSM}px;
+            cursor: pointer;
+
+            > * {
+                flex: 0 0 auto;
+            }
+
+            &:hover {
+                .${version} {
+                    opacity: 0;
+                }
+
+                .${operation} {
+                    opacity: 1;
+                }
+            }
+        `,
+
+        header: {
+            display: 'flex',
+            width: '100%',
+            padding: token.paddingSM,
+            justifyContent: 'space-between'
+        },
+
+        version,
+
+        operation,
+
+        icon: {
+            img: {
+                width: token.sizeXL * 2
+            }
+        },
+
+        info: {
+            padding: `0 ${token.paddingSM}px`
+        },
+
+        toolName: {
+            fontSize: token.fontSizeXL,
+            fontWeight: 'bolder',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        },
+
+        toolDesc: {
+            marginTop: token.marginXS,
+            color: token.colorTextDescription
+        },
+
+        author: {
+            display: 'flex',
+            marginTop: 'auto',
+            paddingBottom: token.paddingSM,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            gap: token.sizeXS,
+
+            '&:hover': {
+                color: token.colorPrimary
+            }
+        },
+
+        avatar: {
+            '> *': {
+                width: token.sizeLG,
+                height: token.sizeLG
+            }
+        },
+
+        authorName: {
+            display: 'flex',
+            alignItems: 'center'
+        },
+
+        androidQrcode: {
+            alignItems: 'center',
+            transform: 'translateX(-16px)',
+            gap: token.sizeMD
+        }
+    }
+})
--- a/src/assets/css/constants.scss
+++ b/src/assets/css/constants.scss
@@ -1,22 +0,0 @@
-$origin-color: white;
-$production-color: #4E47BB;
-$main-color: $production-color;
-$secondary-color: #BAB8E5;
-$error-color: #FF4D4F;
-$error-secondary-color: #FF7875;
-$blue-color: #1677FF;
-$active-color: #EBECFD;
-$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;
-$SIZE_ICON_XS: 16px;
-$SIZE_ICON_SM: 20px;
-$SIZE_ICON_MD: 24px;
-$SIZE_ICON_LG: 32px;
-$SIZE_ICON_XL: 64px;
-$SIZE_ICON_XXL: 96px;
--- a/src/assets/css/pages/sign.scss
+++ b/src/assets/css/pages/sign.scss
@@ -1,149 +0,0 @@
-@use "@/assets/css/mixins" as mixins;
-@use "@/assets/css/constants" as constants;
-
-[data-component=sign] {
-  background-color: #D2D0DD;
-  user-select: none;
-
-  a {
-    cursor: pointer;
-  }
-
-  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;
-      transition: all 1s ease;
-
-      > * {
-        width: 100%;
-        height: 100%;
-      }
-
-      &.hidden {
-        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;
-          font-size: 14px;
-
-          button {
-            font-weight: bolder;
-          }
-
-          .addition {
-            justify-content: space-between;
-            margin-bottom: 14px;
-
-            > * {
-              flex: 0 0 auto;
-            }
-          }
-
-          .footer {
-            text-align: center;
-
-            a {
-              color: constants.$production-color;
-            }
-          }
-        }
-      }
-
-      .verify {
-        a {
-          color: constants.$production-color;
-          font-weight: bolder;
-        }
-      }
-
-      .sign-up, .sign-in, .forget {
-        .footer {
-          a {
-            font-weight: bolder;
-          }
-        }
-      }
-
-      .sign-up, .forget {
-        .retry, .success {
-          margin-bottom: 16px;
-
-          a {
-            font-weight: bolder;
-          }
-        }
-      }
-    }
-
-    .cover {
-      position: absolute;
-      height: 100%;
-      width: 50%;
-      background-color: #F3F4F8;
-      transition: all 0.8s ease;
-
-      .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 {
-        transform: translateX(100%);
-        transition: all 0.8s ease;
-      }
-    }
-  }
-}
--- a/src/assets/css/pages/sign/forget.style.ts
+++ b/src/assets/css/pages/sign/forget.style.ts
@@ -0,0 +1,35 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    title: {
+        marginBottom: token.marginMD,
+        transform: `translateY(-${token.sizeSM}px)`
+    },
+
+    primary: {
+        fontSize: token.fontSizeHeading3,
+        fontWeight: 'bolder',
+        color: token.colorPrimary
+    },
+
+    secondary: {
+        fontSize: token.fontSize
+    },
+
+    form: {
+        width: 300,
+        fontSize: token.fontSize
+    },
+
+    retry: {
+        marginBottom: token.margin
+    },
+
+    success: {
+        marginBottom: token.margin
+    },
+
+    footer: {
+        textAlign: 'center'
+    }
+}))
--- a/src/assets/css/pages/sign/index.style.ts
+++ b/src/assets/css/pages/sign/index.style.ts
@@ -0,0 +1,82 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ cx, css, token }) => {
+    const cover = cx(css`
+        position: absolute;
+        height: 100%;
+        width: 50%;
+        background-color: ${token.colorBgLayout};
+        transition: all 0.8s ease;
+    `)
+
+    const ball = cx(css`
+        position: absolute;
+        width: ${token.sizeXL * 4}px;
+        height: ${token.sizeXL * 4}px;
+        background-color: ${token.colorPrimary};
+        border-radius: 50%;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(50%);
+    `)
+
+    return {
+        root: {
+            backgroundColor: token.colorBorderSecondary,
+            userSelect: 'none',
+
+            a: {
+                fontWeight: 'bold'
+            }
+        },
+
+        signBox: {
+            position: 'relative',
+            backgroundColor: token.colorBgContainer,
+            width: 900,
+            height: 600,
+            overflow: 'hidden',
+            borderRadius: token.borderRadiusLG
+        },
+
+        switch: css`
+            .${cover} {
+                transform: translateX(100%);
+                transition: all 0.8s ease;
+            }
+        `,
+
+        side: {
+            opacity: 1,
+            transition: 'all 1s ease',
+
+            '> *': {
+                width: '100%',
+                height: '100%'
+            }
+        },
+
+        hidden: {
+            opacity: 0
+        },
+
+        cover,
+
+        ballBox: {
+            position: 'relative',
+            overflow: 'hidden'
+        },
+
+        ball,
+
+        mask: css`
+            transform: rotateZ(180deg);
+            filter: blur(${token.sizeSM}px);
+
+            .${ball} {
+                width: 140px;
+                height: 140px;
+            }
+        `
+    }
+})
--- a/src/assets/css/pages/sign/sign-in.style.ts
+++ b/src/assets/css/pages/sign/sign-in.style.ts
@@ -0,0 +1,36 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    title: {
+        marginBottom: token.marginMD,
+        transform: `translateY(-${token.sizeSM}px)`
+    },
+
+    primary: {
+        fontSize: token.fontSizeHeading3,
+        fontWeight: 'bolder',
+        color: token.colorPrimary
+    },
+
+    secondary: {
+        fontSize: token.fontSize
+    },
+
+    form: {
+        width: 300,
+        fontSize: token.fontSize
+    },
+
+    addition: {
+        justifyContent: 'space-between',
+        marginBottom: token.margin,
+
+        a: {
+            flex: '0 0 auto'
+        }
+    },
+
+    footer: {
+        textAlign: 'center'
+    }
+}))
--- a/src/assets/css/pages/sign/sign-up.style.ts
+++ b/src/assets/css/pages/sign/sign-up.style.ts
@@ -0,0 +1,31 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    title: {
+        marginBottom: token.marginMD,
+        transform: `translateY(-${token.sizeSM}px)`
+    },
+
+    primary: {
+        fontSize: token.fontSizeHeading3,
+        fontWeight: 'bolder',
+        color: token.colorPrimary
+    },
+
+    secondary: {
+        fontSize: token.fontSize
+    },
+
+    form: {
+        width: 300,
+        fontSize: token.fontSize
+    },
+
+    retry: {
+        marginBottom: token.margin
+    },
+
+    footer: {
+        textAlign: 'center'
+    }
+}))
--- a/src/assets/css/pages/sign/verify.style.ts
+++ b/src/assets/css/pages/sign/verify.style.ts
@@ -0,0 +1,23 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    title: {
+        marginBottom: token.marginMD,
+        transform: `translateY(-${token.sizeSM}px)`
+    },
+
+    primary: {
+        fontSize: token.fontSizeHeading3,
+        fontWeight: 'bolder',
+        color: token.colorPrimary
+    },
+
+    secondary: {
+        fontSize: token.fontSize
+    },
+
+    form: {
+        width: 300,
+        fontSize: token.fontSize
+    }
+}))
--- a/src/assets/css/pages/system-framework.scss
+++ b/src/assets/css/pages/system-framework.scss
@@ -1,14 +0,0 @@
-@use "@/assets/css/constants" as constants;
-@use "@/assets/css/mixins" as mixins;
-
-[data-component=system-framework] {
-  .left-panel {
-    background-color: constants.$origin-color;
-  }
-
-  .right-panel {
-    flex: 1;
-    width: 0;
-    background-color: constants.$background-color;
-  }
-}
--- a/src/assets/css/pages/system-framework.style.ts
+++ b/src/assets/css/pages/system-framework.style.ts
@@ -0,0 +1,13 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    leftPanel: {
+        backgroundColor: token.colorBgContainer
+    },
+
+    rightPanel: {
+        flex: 1,
+        width: 0,
+        backgroundColor: token.colorBgLayout
+    }
+}))
--- a/src/assets/css/pages/system/index.scss
+++ b/src/assets/css/pages/system/index.scss
@@ -1,17 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=system] {
-  .root-content {
-    padding: 20px;
-    gap: 20px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-
-    > .card-box {
-      width: 200px;
-      height: 320px;
-      flex: 0 0 auto;
-      overflow: hidden !important;
-    }
-  }
-}
--- a/src/assets/css/pages/system/index.style.ts
+++ b/src/assets/css/pages/system/index.style.ts
@@ -0,0 +1,15 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    root: {
+        padding: 20,
+        gap: 20,
+        flexWrap: 'wrap',
+        justifyContent: 'flex-start',
+
+        '> *': {
+            flex: '0 0 auto',
+            overflow: 'hidden !important'
+        }
+    }
+}))
--- a/src/assets/css/pages/system/settings.scss
+++ b/src/assets/css/pages/system/settings.scss
@@ -1,16 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=system-settings] {
-  .root-content {
-    padding: 20px;
-    gap: 20px;
-
-    .root-col {
-      gap: 20px;
-
-      > * {
-        flex: 0 0 auto;
-      }
-    }
-  }
-}
--- a/src/assets/css/pages/system/settings/index.style.ts
+++ b/src/assets/css/pages/system/settings/index.style.ts
@@ -0,0 +1,16 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    root: {
+        padding: 20,
+        gap: 20
+    },
+
+    rootCol: {
+        gap: 20,
+
+        '> *': {
+            flex: '0 0 auto'
+        }
+    }
+}))
--- a/src/assets/css/pages/system/statistics.scss
+++ b/src/assets/css/pages/system/statistics.scss
@@ -1,15 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=system-statistics] {
-  .root-content {
-    padding: 20px;
-    gap: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    > .card-box {
-      width: 48%;
-      flex: 0 0 auto;
-    }
-  }
-}
--- a/src/assets/css/pages/system/statistics/common.style.ts
+++ b/src/assets/css/pages/system/statistics/common.style.ts
@@ -0,0 +1,44 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    content: {
+        fontSize: token.fontSize,
+        padding: '0 10px',
+        gap: 10,
+
+        '> *': {
+            gap: 5
+        }
+    },
+
+    bigChart: {
+        width: 0,
+        height: 400
+    },
+
+    key: {
+        flex: '0 0 auto',
+        color: token.colorTextLabel
+    },
+
+    value: {
+        color: token.colorTextDescription,
+        overflow: 'hidden',
+
+        '> *': {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }
+    },
+
+    chartValue: {
+        justifyContent: 'space-between',
+        width: 0
+    },
+
+    percentValue: {
+        flex: '0 0 auto',
+        color: token.colorTextDescription
+    }
+}))
--- a/src/assets/css/pages/system/statistics/index.style.ts
+++ b/src/assets/css/pages/system/statistics/index.style.ts
@@ -0,0 +1,16 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    root: {
+        padding: 20,
+        gap: 20,
+        minWidth: 800,
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+
+        '> div': {
+            width: '48%',
+            flex: '0 0 auto'
+        }
+    }
+}))
--- a/src/assets/css/pages/system/tools/base.scss
+++ b/src/assets/css/pages/system/tools/base.scss
@@ -1,44 +0,0 @@
-@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;
-    }
-
-    >*: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;
-      z-index: 1000;
-    }
-  }
-}
--- a/src/assets/css/pages/system/tools/base.style.ts
+++ b/src/assets/css/pages/system/tools/base.style.ts
@@ -0,0 +1,44 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        padding: 20,
+        gap: 20,
+
+        '> *:first-child': {
+            width: 0,
+            height: 'fit-content'
+        },
+
+        '> *:nth-child(2)': {
+            position: 'sticky',
+            top: 20,
+            height: 'calc(100vh - 40px)'
+        }
+    },
+
+    hasEdited: {
+        '&::after': {
+            content: '"*"',
+            color: token.colorTextSecondary
+        }
+    },
+
+    closeEditorBtn: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        backgroundColor: token.colorBorder,
+        width: 32,
+        height: 32,
+        borderRadius: '50%',
+        color: token.colorTextSecondary,
+        opacity: 0.6,
+        boxShadow: token.boxShadow,
+        cursor: 'pointer',
+        zIndex: 1000
+    }
+}))
--- a/src/assets/css/pages/system/tools/code.scss
+++ b/src/assets/css/pages/system/tools/code.scss
@@ -1,20 +0,0 @@
-[data-component=system-tools-code] {
-  padding: 20px;
-
-  .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;
-    }
-  }
-}
--- a/src/assets/css/pages/system/tools/code.style.ts
+++ b/src/assets/css/pages/system/tools/code.style.ts
@@ -0,0 +1,24 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    root: {
+        padding: 20
+    },
+
+    rootBox: {
+        width: '100%',
+        height: '100%'
+    },
+
+    draggableContent: {
+        position: 'fixed',
+        insetInlineEnd: 48,
+        insetBlockEnd: 48,
+
+        '> *': {
+            position: 'relative',
+            insetInlineEnd: 0,
+            insetBlockEnd: 0
+        }
+    }
+}))
--- a/src/assets/css/pages/system/tools/execute.scss
+++ b/src/assets/css/pages/system/tools/execute.scss
@@ -1,8 +0,0 @@
-[data-component=system-tools-execute] {
-  padding: 20px;
-
-  .card-box {
-    width: 100%;
-    height: 100%;
-  }
-}
--- a/src/assets/css/pages/system/tools/execute.style.ts
+++ b/src/assets/css/pages/system/tools/execute.style.ts
@@ -0,0 +1,12 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    root: {
+        padding: 20
+    },
+
+    rootBox: {
+        width: '100%',
+        height: '100%'
+    }
+}))
--- a/src/assets/css/pages/system/tools/template.scss
+++ b/src/assets/css/pages/system/tools/template.scss
@@ -1,44 +0,0 @@
-@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;
-      z-index: 1000;
-    }
-  }
-}
--- a/src/assets/css/pages/system/tools/template.style.ts
+++ b/src/assets/css/pages/system/tools/template.style.ts
@@ -0,0 +1,44 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        padding: 20,
+        gap: 20,
+
+        '> *:first-child': {
+            width: 0,
+            height: 'fit-content'
+        },
+
+        '> *:nth-child(2)': {
+            position: 'sticky',
+            top: 20,
+            height: 'calc(100vh - 40px)'
+        }
+    },
+
+    hasEdited: {
+        '&::after': {
+            content: '"*"',
+            color: token.colorTextSecondary
+        }
+    },
+
+    closeEditorBtn: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        backgroundColor: token.colorBorder,
+        width: 32,
+        height: 32,
+        borderRadius: '50%',
+        color: token.colorTextSecondary,
+        opacity: 0.6,
+        boxShadow: token.boxShadow,
+        cursor: 'pointer',
+        zIndex: 1000
+    }
+}))
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -1,22 +0,0 @@
-@use "@/assets/css/constants" as constants;
-@use "@/assets/css/mixins" as mixins;
-
-[data-component=tools-framework] {
-  .left-panel {
-    background-color: constants.$origin-color;
-
-    .menu-droppable {
-      display: flex;
-      position: relative;
-      min-height: 0;
-      flex: 1;
-      width: 100%;
-    }
-  }
-
-  .right-panel {
-    flex: 1;
-    width: 0;
-    background-color: constants.$background-color;
-  }
-}
--- a/src/assets/css/pages/tools-framework.style.ts
+++ b/src/assets/css/pages/tools-framework.style.ts
@@ -0,0 +1,21 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    leftPanel: {
+        backgroundColor: token.colorBgContainer
+    },
+
+    menuDroppable: {
+        display: 'flex',
+        position: 'relative',
+        minHeight: 0,
+        flex: 1,
+        width: '100%'
+    },
+
+    rightPanel: {
+        flex: 1,
+        width: 0,
+        backgroundColor: token.colorBgLayout
+    }
+}))
--- a/src/assets/css/pages/tools/create.scss
+++ b/src/assets/css/pages/tools/create.scss
@@ -1,61 +0,0 @@
-@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;
-          }
-        }
-      }
-
-      .preview {
-        display: flex;
-        position: relative;
-        justify-content: center;
-        align-items: center;
-
-        .no-preview {
-          font-weight: bolder;
-          color: constants.$font-secondary-color;
-          font-size: 1.4em;
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/pages/tools/create.style.ts
+++ b/src/assets/css/pages/tools/create.style.ts
@@ -0,0 +1,52 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        padding: 20,
+        gap: 20,
+        height: '100%',
+        width: '100%',
+
+        '> *': {
+            gap: 10,
+            width: 0
+        }
+    },
+
+    title: {
+        flex: '0 0 auto',
+        height: 40,
+
+        '> *': {
+            height: '100%',
+            width: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            fontSize: token.fontSizeXL,
+            fontWeight: 'bolder',
+            color: token.colorPrimary
+        }
+    },
+
+    config: {
+        padding: 20
+    },
+
+    createBt: {
+        width: '100%',
+        fontWeight: 'bold'
+    },
+
+    preview: {
+        display: 'flex',
+        position: 'relative',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+
+    noPreview: {
+        color: token.colorTextSecondary,
+        fontSize: token.fontSizeLG,
+        fontWeight: 'bolder'
+    }
+}))
--- a/src/assets/css/pages/tools/edit.scss
+++ b/src/assets/css/pages/tools/edit.scss
@@ -1,35 +0,0 @@
-[data-component=tools-edit] {
-  padding: 20px;
-
-  .card-box {
-    height: 100%;
-    width: 100%;
-
-    .root-content {
-      width: 100%;
-      height: 100%;
-
-      > * {
-        width: 0;
-      }
-
-      .draggable-mask {
-        position: absolute;
-        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;
-    }
-  }
-}
--- a/src/assets/css/pages/tools/edit.style.ts
+++ b/src/assets/css/pages/tools/edit.style.ts
@@ -0,0 +1,40 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    root: {
+        padding: 20
+    },
+
+    rootBox: {
+        width: '100%',
+        height: '100%'
+    },
+
+    content: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+
+        '> *': {
+            width: 0
+        }
+    },
+
+    draggableMask: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%'
+    },
+
+    draggableContent: {
+        position: 'fixed',
+        insetInlineEnd: 48,
+        insetBlockEnd: 48,
+
+        '> *': {
+            position: 'relative',
+            insetInlineEnd: 0,
+            insetBlockEnd: 0
+        }
+    }
+}))
--- a/src/assets/css/pages/tools/index.scss
+++ b/src/assets/css/pages/tools/index.scss
@@ -1,110 +0,0 @@
-@use "@/assets/css/mixins" as mixins;
-@use '@/assets/css/constants' as constants;
-
-[data-component=tools] {
-  .root-content {
-    padding: 20px;
-    gap: 20px;
-
-    .own-content {
-      gap: 20px;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-
-      > .card-box, > div {
-        width: 180px;
-        height: 290px;
-        flex: 0 0 auto;
-      }
-
-
-      & > :first-child {
-        cursor: pointer;
-
-        .info {
-          padding-top: 50px;
-        }
-      }
-
-      & > :not(:first-child) {
-        .info {
-          transform: translateY(40px);
-          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;
-        }
-      }
-    }
-
-    .favorite-divider {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 20px;
-      margin-top: 20px;
-
-      :first-child, :last-child {
-        height: 0;
-        border: {
-          width: 1px;
-          color: constants.$divide-color;
-          style: dashed;
-        };
-      }
-
-      .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, > div {
-        width: 180px;
-        height: 290px;
-        flex: 0 0 auto;
-      }
-    }
-  }
-}
--- a/src/assets/css/pages/tools/index.style.ts
+++ b/src/assets/css/pages/tools/index.style.ts
@@ -0,0 +1,45 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        padding: 20,
+        gap: 20
+    },
+
+    ownContent: {
+        gap: 20,
+        flexWrap: 'wrap',
+        justifyContent: 'flex-start',
+
+        '> div': {
+            flex: '0 0 auto'
+        }
+    },
+
+    favoriteDivider: {
+        alignItems: 'center',
+        gap: 20,
+        marginTop: 20,
+
+        '> :first-child, > :last-child': {
+            height: 0,
+            border: `1px dashed ${token.colorSplit}`
+        }
+    },
+
+    dividerText: {
+        flex: '0 0 auto !important',
+        fontSize: '1.2em',
+        color: token.colorTextSecondary
+    },
+
+    starContent: {
+        gap: 20,
+        flexWrap: 'wrap',
+        justifyContent: 'flex-start',
+
+        '> div': {
+            flex: '0 0 auto'
+        }
+    }
+}))
--- a/src/assets/css/pages/tools/source.scss
+++ b/src/assets/css/pages/tools/source.scss
@@ -1,8 +0,0 @@
-[data-component=tools-source] {
-  padding: 20px;
-
-  .card-box {
-    width: 100%;
-    height: 100%;
-  }
-}
--- a/src/assets/css/pages/tools/source.style.ts
+++ b/src/assets/css/pages/tools/source.style.ts
@@ -0,0 +1,12 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    root: {
+        padding: 20
+    },
+
+    content: {
+        width: '100%',
+        height: '100%'
+    }
+}))
--- a/src/assets/css/pages/tools/store.scss
+++ b/src/assets/css/pages/tools/store.scss
@@ -1,49 +0,0 @@
-@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;
-    transition: all 0.3s ease;
-
-    > * {
-      width: 80%;
-    }
-
-    &.hide {
-      transform: translateY(-60px);
-    }
-  }
-
-  .root-content {
-    padding: 20px;
-    gap: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    > div {
-      width: 180px;
-      height: 290px;
-      flex: 0 0 auto;
-    }
-
-    .no-tool {
-      display: flex;
-      justify-content: center;
-      font-size: 1.4em;
-      font-weight: bolder;
-      color: constants.$font-secondary-color;
-    }
-  }
-
-  .android-qrcode {
-    align-items: center;
-    transform: translateX(-16px);
-    gap: 20px;
-  }
-}
--- a/src/assets/css/pages/tools/store.style.ts
+++ b/src/assets/css/pages/tools/store.style.ts
@@ -0,0 +1,41 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    search: {
+        display: 'flex',
+        position: 'sticky',
+        width: '100%',
+        marginTop: 20,
+        top: 20,
+        zIndex: 10,
+        justifyContent: 'center',
+        transition: 'all 0.3s ease',
+
+        '> *': {
+            width: '80%'
+        }
+    },
+
+    hide: {
+        transform: 'translateY(-60px)'
+    },
+
+    root: {
+        padding: 20,
+        gap: 20,
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+
+        '> div': {
+            flex: '0 0 auto'
+        }
+    },
+
+    noTool: {
+        display: 'flex',
+        justifyContent: 'center',
+        fontSize: '1.4em',
+        fontWeight: 'bolder',
+        color: token.colorTextSecondary
+    }
+}))
--- a/src/assets/css/pages/tools/user.scss
+++ b/src/assets/css/pages/tools/user.scss
@@ -1,93 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=tools-store-user] .root-content {
-  padding: {
-    top: 80px;
-    left: 20px;
-    right: 20px;
-    bottom: 20px;
-  };
-
-  .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;
-
-      > div {
-        width: 180px;
-        height: 290px;
-        flex: 0 0 auto;
-      }
-
-      .no-tool {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 20px;
-        font-size: 1.2em;
-        font-weight: bolder;
-        color: constants.$font-secondary-color;
-      }
-    }
-  }
-
-  .android-qrcode {
-    align-items: center;
-    transform: translateX(-16px);
-    gap: 20px;
-  }
-}
--- a/src/assets/css/pages/tools/user.style.ts
+++ b/src/assets/css/pages/tools/user.style.ts
@@ -0,0 +1,82 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        padding: '80px 20px 20px 20px'
+    },
+
+    content: {
+        width: '100%',
+        height: '100%',
+        overflow: 'visible',
+        alignItems: 'center',
+        minWidth: 900,
+        paddingBottom: 20
+    },
+
+    info: {
+        marginLeft: 40,
+        transform: 'translateY(-40px)',
+
+        '> *': {
+            flex: '0 0 auto !important'
+        }
+    },
+
+    avatarBox: {
+        backgroundColor: token.colorBgLayout,
+        padding: 4,
+        borderRadius: '50%',
+        boxShadow: token.boxShadow
+    },
+
+    avatar: {
+        backgroundColor: 'transparent !important'
+    },
+
+    infoName: {
+        margin: '20px 0 0 20px',
+        justifyContent: 'center',
+
+        '> *': {
+            flex: '0 0 auto'
+        }
+    },
+
+    nickname: {
+        fontSize: token.fontSizeHeading2,
+        fontWeight: 'bolder',
+        color: token.colorPrimary
+    },
+
+    url: {
+        cursor: 'pointer',
+
+        '> span': {
+            marginLeft: 8
+        }
+    },
+
+    tools: {
+        padding: 20,
+        gap: 20,
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+
+        '> div': {
+            flex: '0 0 auto',
+
+            '> div': {
+                backgroundColor: token.colorBgLayout
+            }
+        }
+    },
+
+    noTool: {
+        display: 'flex',
+        justifyContent: 'center',
+        marginBottom: 20,
+        fontSize: token.fontSizeLG,
+        color: token.colorTextSecondary
+    }
+}))
--- a/src/assets/css/pages/tools/view.scss
+++ b/src/assets/css/pages/tools/view.scss
@@ -1,9 +0,0 @@
-[data-component=tools-view] {
-  padding: 20px;
-
-  .card-box {
-    position: relative;
-    height: 100%;
-    width: 100%;
-  }
-}
--- a/src/assets/css/pages/tools/view.style.ts
+++ b/src/assets/css/pages/tools/view.style.ts
@@ -0,0 +1,13 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+    root: {
+        padding: 20
+    },
+
+    content: {
+        position: 'relative',
+        height: '100%',
+        width: '100%'
+    }
+}))
--- a/src/assets/css/pages/user-framework.scss
+++ b/src/assets/css/pages/user-framework.scss
@@ -1,14 +0,0 @@
-@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;
-  }
-}
--- a/src/assets/css/pages/user-framework.style.ts
+++ b/src/assets/css/pages/user-framework.style.ts
@@ -0,0 +1,13 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    leftPanel: {
+        backgroundColor: token.colorBgContainer
+    },
+
+    rightPanel: {
+        flex: 1,
+        width: 0,
+        backgroundColor: token.colorBgLayout
+    }
+}))
--- a/src/assets/css/pages/user/index.scss
+++ b/src/assets/css/pages/user/index.scss
@@ -1,137 +0,0 @@
-@use '@/assets/css/constants' as constants;
-
-[data-component=user] .root-content {
-  padding: {
-    top: 80px;
-    left: 20px;
-    right: 20px;
-    bottom: 20px;
-  };
-
-  .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 {
-          cursor: pointer;
-
-          > 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%;
-          }
-        }
-      }
-    }
-  }
-}
--- a/src/assets/css/pages/user/index.style.ts
+++ b/src/assets/css/pages/user/index.style.ts
@@ -0,0 +1,116 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+    root: {
+        padding: '80px 20px 20px 20px'
+    },
+
+    content: {
+        width: '100%',
+        height: '100%',
+        overflow: 'visible !important',
+        alignItems: 'center',
+        minWidth: 900,
+        paddingBottom: 20,
+
+        '> :not(:first-child)': {
+            padding: '0 60px'
+        }
+    },
+
+    info: {
+        marginLeft: 40,
+        transform: 'translateY(-40px)',
+
+        '> *': {
+            flex: '0 0 auto'
+        }
+    },
+
+    avatarBox: {
+        backgroundColor: token.colorBgLayout,
+        padding: 4,
+        borderRadius: '50%',
+        boxShadow: token.boxShadow
+    },
+
+    avatar: {
+        backgroundColor: 'transparent !important'
+    },
+
+    infoName: {
+        margin: '20px 0 0 20px',
+        justifyContent: 'center',
+
+        '> *': {
+            flex: '0 0 auto'
+        }
+    },
+
+    nickname: {
+        fontSize: token.fontSizeHeading2,
+        fontWeight: 'bolder',
+        color: token.colorPrimary
+    },
+
+    url: {
+        cursor: 'pointer',
+
+        '> span': {
+            marginLeft: 8
+        }
+    },
+
+    header: {
+        justifyContent: 'space-between',
+        alignItems: 'center',
+
+        '> *': {
+            flex: '0 0 auto'
+        }
+    },
+
+    title: {
+        fontSize: token.fontSizeHeading3,
+        fontWeight: 'bolder'
+    },
+
+    operation: {
+        gap: 10
+    },
+
+    divider: {
+        height: 1,
+        width: 'calc(100% - 120px)',
+        backgroundColor: token.colorSplit,
+        margin: '30px 60px'
+    },
+
+    list: {
+        gap: 24
+    },
+
+    row: {
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: `0 ${token.paddingLG}px`,
+
+        '> *': {
+            flex: '0 0 auto'
+        }
+    },
+
+    label: {
+        fontSize: token.fontSizeLG,
+        fontWeight: 'bolder',
+        flex: 1
+    },
+
+    input: {
+        width: 400,
+
+        '> *': {
+            width: '100%'
+        }
+    }
+}))
--- a/src/assets/svg/themeDark.svg
+++ b/src/assets/svg/themeDark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M853.824 512c0 195.84-160.224 356.064-356.064 356.064-148.352 0-274.976-91.008-328.384-217.6h11.872c195.84 0 356.064-160.224 356.064-356.064a360.64 360.64 0 0 0-27.68-138.464c191.872 5.92 344.192 164.192 344.192 356.064zM509.632 76.8c-25.728 0-49.44 11.872-65.28 33.632s-17.792 51.424-7.904 75.168c13.856 35.616 21.76 71.2 21.76 108.8 0 152.32-124.64 276.96-276.96 276.96h-11.872c-25.728 0-49.44 11.872-65.28 33.632s-17.792 51.424-7.904 75.168C165.44 842.368 321.696 947.2 497.76 947.2c239.36 0 435.2-195.84 435.2-435.2A433.664 433.664 0 0 0 511.616 76.8h-1.984z"/></svg>
--- a/src/assets/svg/themeLight.svg
+++ b/src/assets/svg/themeLight.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M469.333333 128a42.666667 42.666667 0 0 1 85.333334 0v85.333333a42.666667 42.666667 0 0 1-85.333334 0V128z m0 682.666667a42.666667 42.666667 0 0 1 85.333334 0v85.333333a42.666667 42.666667 0 0 1-85.333334 0v-85.333333z m42.666667-85.333334a213.333333 213.333333 0 1 1 0-426.666666 213.333333 213.333333 0 0 1 0 426.666666z m0-85.333333a128 128 0 1 0 0-256 128 128 0 0 0 0 256z m-384-85.333333a42.666667 42.666667 0 0 1 0-85.333334h85.333333a42.666667 42.666667 0 0 1 0 85.333334H128z m682.666667 0a42.666667 42.666667 0 0 1 0-85.333334h85.333333a42.666667 42.666667 0 0 1 0 85.333334h-85.333333z m-30.165334-371.498667a42.666667 42.666667 0 0 1 60.330667 60.330667l-67.456 67.456a42.666667 42.666667 0 0 1-60.330667-60.330667l67.413334-67.456zM243.498667 840.832a42.666667 42.666667 0 1 1-60.330667-60.330667l67.456-67.456a42.666667 42.666667 0 1 1 60.330667 60.330667l-67.413334 67.456z m-60.330667-597.333333a42.666667 42.666667 0 0 1 60.330667-60.330667l67.456 67.456a42.666667 42.666667 0 0 1-60.330667 60.330667l-67.456-67.413334z m657.664 537.002666a42.666667 42.666667 0 0 1-60.330667 60.330667l-67.456-67.456a42.666667 42.666667 0 0 1 60.330667-60.330667l67.456 67.413334z" /></svg>
--- a/src/assets/svg/themeSystem.svg
+++ b/src/assets/svg/themeSystem.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M513.12 11.136c-42.784 0-84.336 5.376-123.872 15.456-2.352 0.56-4.816 1.232-7.168 1.904-9.296 2.464-18.48 5.264-27.552 8.288-1.12 0.336-2.24 0.784-3.472 1.12-5.264 1.792-10.64 3.696-15.792 5.712-1.904 0.672-3.808 1.456-5.712 2.24-13.216 5.264-26.208 10.976-38.976 17.36l-5.376 2.688c-19.824 10.192-38.864 21.504-57.008 34.16-1.68 1.12-3.248 2.352-4.928 3.472-16.352 11.648-32.032 24.192-46.816 37.744l-4.368 4.032a465.472 465.472 0 0 0-29.568 29.904c-1.344 1.456-2.688 3.024-4.032 4.48-78.4 88.256-126 204.624-126 332.08 0 276.528 224.112 500.64 500.64 500.64s500.64-224.112 500.64-500.64-224.112-500.64-500.64-500.64zM810.144 808.8c-38.64 38.64-83.552 68.88-133.504 90.048-51.184 21.616-105.504 32.704-161.616 32.928v-840c56.112 0.224 110.432 11.312 161.616 32.928 50.064 21.168 94.976 51.408 133.504 90.048 38.64 38.64 68.88 83.552 90.048 133.504 21.84 51.744 32.928 106.736 32.928 163.52s-11.088 111.776-32.928 163.52c-21.168 49.952-51.408 94.864-90.048 133.504z" /></svg>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
FatttSnake	610fb18cb1	Merge pull request #34 from FatttSnake/hotfix/simulation_cannot_switch Hotfix: Fix the bug that simulation cannot switch device and rotate	2024-11-03 11:25:39 +08:00
FatttSnake	d78a3ce682	Fix(Simulation): Fix the bug that simulation cannot switch device and rotate	2024-11-03 11:20:58 +08:00
FatttSnake	d7567b8b28	Merge pull request #32 from FatttSnake/release/1.1.0 v1.1.0	2024-11-02 19:47:30 +08:00
FatttSnake	1aabd233a6	Build(package.json): Update version from 1.0.3-SNAPSHOT to 1.1.0	2024-11-02 19:35:35 +08:00
FatttSnake	003f81ae98	Merge pull request #31 from FatttSnake/fix/render Fix cannot render device node when entering the page	2024-11-02 19:18:29 +08:00
FatttSnake	b0d24838cc	Fix(Render): Fix can not render device node when entering the page	2024-11-02 18:45:10 +08:00
FatttSnake	23a3a6354b	Merge pull request #30 from FatttSnake/feat/tool_theme Support load global js and css variables	2024-11-02 15:51:54 +08:00
FatttSnake	216d3fd41c	Feat(Playground): Support load global js and css variables	2024-11-02 15:27:32 +08:00
FatttSnake	451225c1cf	Feat(Tools): Support theme	2024-11-02 01:53:33 +08:00
FatttSnake	60d1309610	Merge pull request #29 from FatttSnake/fix/sign Fix the bug that the login page gets stuck when returning to the homepage	2024-10-31 17:45:57 +08:00
FatttSnake	c797cfc10d	Merge pull request #28 from FatttSnake/refactor/playground Using React Flow to render the mobile simulator	2024-10-31 17:29:42 +08:00
FatttSnake	beb29219be	Fix(Sign): Fix the bug that the login page gets stuck when returning to the homepage	2024-10-31 15:39:03 +08:00
FatttSnake	43edc9795f	Refactor(Code): Optimize code	2024-10-31 14:39:16 +08:00
FatttSnake	9c988327fd	Refactor(common): Remove unused console log	2024-10-31 11:51:39 +08:00
FatttSnake	550383bfec	Fix(View & Execute): Fixed the bug of being able to open Desktop tools in the web environment	2024-10-31 11:48:36 +08:00
FatttSnake	53f6680dfd	Refactor(Execute): Support mobile mode	2024-10-31 11:32:06 +08:00
FatttSnake	dd2ded7135	Fix(CodeEditor): Fix error stylesheet	2024-10-31 11:18:53 +08:00
FatttSnake	b75013afa7	Refactor(Render): Using React Flow to render the mobile simulator	2024-10-31 10:51:39 +08:00
FatttSnake	6880fe8b21	Merge pull request #27 from FatttSnake/build/dependencies Upgrade dependencies	2024-10-30 09:14:18 +08:00
FatttSnake	9df9fb5fc0	Build(package.json): Upgrade dependencies	2024-10-29 17:10:09 +08:00
FatttSnake	349bca5c12	Merge pull request #26 from FatttSnake/fix/eslint Fix eslint error	2024-10-24 11:26:09 +08:00
FatttSnake	ed47c0c62a	Fix(package.json): Fix eslint error Add dependency eslint-config-prettier to fix eslint error. Upgrade dependencies.	2024-10-24 11:18:17 +08:00
FatttSnake	3a441115dd	Merge pull request #25 from FatttSnake/feat/dark_mode Support dark mode	2024-10-24 04:04:43 +08:00
FatttSnake	aadf52e012	Build(package.json): Optimize dependencies	2024-10-24 04:03:33 +08:00
FatttSnake	bf8b0f5820	Merge branch 'dev' into feat/dark_mode # Conflicts: # package-lock.json	2024-10-24 03:49:38 +08:00
FatttSnake	f350ef0c5a	Merge pull request #24 from FatttSnake/fix/build Fix error on multi-platform build	2024-10-24 03:41:35 +08:00
FatttSnake	9d9aa93ba0	Build(package.json): Fix error on multi platform build	2024-10-24 03:40:04 +08:00
FatttSnake	b4384afdff	Merge pull request #23 from FatttSnake/fix/build Fix error on multi-platform build	2024-10-24 03:10:25 +08:00
FatttSnake	22edd7f06b	Build(package.json): Fix error on multi platform build	2024-10-24 03:09:15 +08:00
FatttSnake	84f2efaec0	Merge pull request #22 from FatttSnake/feat/native_api Support autoload Native API	2024-10-23 23:17:46 +08:00
FatttSnake	3eebb33aa6	Feat(Theme): Support switch theme mode	2024-10-23 19:04:30 +08:00
FatttSnake	dc1c052f69	Fix(StyleSheet): Fix wrong styles	2024-10-23 17:09:51 +08:00
FatttSnake	a467ad2021	Feat(CodeEditor): Support jsx highlight Chang theme of monaco. Support jsx highlight.	2024-10-23 16:29:16 +08:00
FatttSnake	1cdd1e5a93	Feat(Hint): Support dark mode	2024-10-23 14:37:43 +08:00
FatttSnake	dbce6b9cf2	Feat(Theme): Support dark mode	2024-10-23 10:22:49 +08:00
FatttSnake	b7c3fb8524	Refactor(css): Change all less to module mode	2024-10-18 10:14:31 +08:00
FatttSnake	3d77dc793b	Refactor(App): Change sass to less	2024-10-17 13:52:29 +08:00
FatttSnake	a482bbc14c	Fix(CodeEditor): Fix incorrect highlight jump	2024-10-16 18:19:52 +08:00
FatttSnake	47dac4c9c7	Feat(CodeEditor): Support add extra libs	2024-10-16 18:14:18 +08:00
FatttSnake	b353ab07e2	Build(package.json): Upgrade dependencies	2024-10-16 17:39:54 +08:00
FatttSnake	07f24333d9	Feat(Editor): Support autoload Native API	2024-10-15 17:11:56 +08:00
FatttSnake	2a32489617	Merge pull request #21 from FatttSnake/prepare/1.0.2 Update version from 1.0.2-SNAPSHOT to 1.0.3-SNAPSHOT	2024-10-09 22:43:42 +08:00
FatttSnake	47d9aa22d8	Merge pull request #20 from FatttSnake/release/1.0.2 v1.0.2	2024-10-09 22:41:47 +08:00
FatttSnake	c622c0c302	Build(package.json): Update version from 1.0.2 to 1.0.3-SNAPSHOT	2024-10-09 22:40:31 +08:00
FatttSnake	e601a96288	Build(package.json): Update version from 1.0.2-SNAPSHOT to 1.0.2	2024-10-09 22:40:03 +08:00
FatttSnake	d63473b3e3	Merge pull request #19 from FatttSnake/refactor/readme Update README	2024-10-09 22:38:12 +08:00
FatttSnake	e2cedef75c	Refactor(README): Update requires	2024-10-09 22:34:09 +08:00
FatttSnake	361e225244	Merge pull request #18 from FatttSnake/refactor/compiler Change esbuild transform and compile target to es2015	2024-09-30 16:53:36 +08:00
FatttSnake	aad0b9eb3b	Merge pull request #17 from FatttSnake/fix/style Fixed incorrect style that card content exceeds card size	2024-09-30 16:51:42 +08:00
FatttSnake	96a9714cdd	Refactor(compiler): Change esbuild transform and compile target to es2015	2024-09-30 16:47:06 +08:00
FatttSnake	3812ffd18f	Style(ToolCard): Fixed incorrect style that card content exceeds card size	2024-09-20 11:53:57 +08:00
FatttSnake	6f0ebfe358	Merge pull request #16 from FatttSnake/prepare/1.0.1 Update version from 1.0.1-SNAPSHOT to 1.0.2-SNAPSHOT	2024-09-19 16:44:47 +08:00
FatttSnake	0d3dd30591	Merge pull request #15 from FatttSnake/release/1.0.1 v1.0.1	2024-09-19 16:42:16 +08:00
FatttSnake	ac8d21c063	Build(package.json): Update version from 1.0.1 to 1.0.2-SNAPSHOT	2024-09-19 16:38:50 +08:00
FatttSnake	ebaa4d8851	Build(package.json): Update version from 1.0.1-SNAPSHOT to 1.0.1	2024-09-19 16:37:43 +08:00
FatttSnake	86cee4eaa5	Merge pull request #14 from FatttSnake/refactor/editor Fix draggable mask incorrect style	2024-09-19 13:59:52 +08:00
FatttSnake	768f9bce0f	Style(CodePage): Fix draggable mask incorrect style	2024-09-19 13:58:43 +08:00
FatttSnake	eb4107a7fd	Merge pull request #13 from FatttSnake/refactor/editor Fix "net::ERR_INSUFFICIENT_RESOURCES" exception	2024-09-19 10:00:36 +08:00
FatttSnake	264534f479	Fix(Management): Fix base and template management unable to jump file	2024-09-19 09:59:04 +08:00
FatttSnake	c2f6b5d49e	Fix(editor): Fix "net::ERR_INSUFFICIENT_RESOURCES" exception when the editor loads a large number of libraries	2024-09-19 09:45:24 +08:00
FatttSnake	4570a59455	Merge pull request #3 from FatttSnake/1.0.0 v1.0.0	2024-09-06 15:17:40 +08:00
FatttSnake	d0121b126b	Merge pull request 'v1.0-230926' (#27 ) from dev into master Reviewed-on: FatttSnake/fatweb-ui#27	2023-09-26 11:06:04 +08:00
FatttSnake	5eaae8eef7	Merge pull request 'Merge from dev branch to master' (#2 ) from dev into master Reviewed-on: FatttSnake/fatweb-ui#2	2023-09-04 23:26:46 +08:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M853.824 512c0 195.84-160.224 356.064-356.064 356.064-148.352 0-274.976-91.008-328.384-217.6h11.872c195.84 0 356.064-160.224 356.064-356.064a360.64 360.64 0 0 0-27.68-138.464c191.872 5.92 344.192 164.192 344.192 356.064zM509.632 76.8c-25.728 0-49.44 11.872-65.28 33.632s-17.792 51.424-7.904 75.168c13.856 35.616 21.76 71.2 21.76 108.8 0 152.32-124.64 276.96-276.96 276.96h-11.872c-25.728 0-49.44 11.872-65.28 33.632s-17.792 51.424-7.904 75.168C165.44 842.368 321.696 947.2 497.76 947.2c239.36 0 435.2-195.84 435.2-435.2A433.664 433.664 0 0 0 511.616 76.8h-1.984z"/></svg>