Fix(Simulation): Fix the bug that simulation cannot switch device and rotate

Fix(Render): Fix can not render device node when entering the page
Feat(Playground): Support load global js and css variables
2024-11-03 12:06:18 +08:00 · 2024-11-03 12:05:55 +08:00 · 2024-11-03 12:04:05 +08:00 · 2024-11-03 11:59:20 +08:00 · 2024-10-31 17:21:06 +08:00 · 2024-10-31 16:06:05 +08:00
206 changed files with 8685 additions and 4899 deletions
--- 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/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -32,8 +32,8 @@
  "dependencies": {
    "@electron-toolkit/preload": "^3.0.1",
    "@electron-toolkit/utils": "^3.0.0",
-    "electron-store": "^9.0.0",
-    "electron-updater": "^6.2.1"
+    "electron-store": "^10.0.0",
+    "electron-updater": "^6.3.9"
  },
  "devDependencies": {
    "@ant-design/icons": "^5.5.1",
@@ -41,55 +41,57 @@
    "@dnd-kit/sortable": "^8.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@electron-toolkit/tsconfig": "^1.0.1",
-    "@eslint/js": "^9.12.0",
+    "@eslint/js": "^9.13.0",
    "@marsidev/react-turnstile": "^1.0.2",
    "@monaco-editor/react": "^4.6.0",
+    "@shikijs/monaco": "^1.22.2",
    "@svgr/core": "^8.1.0",
    "@svgr/plugin-jsx": "^8.1.0",
    "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.17.10",
-    "@types/node": "^20.16.11",
-    "@types/react": "^18.3.11",
+    "@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.2",
-    "antd": "^5.21.4",
-    "axios": "^1.7.4",
+    "@vitejs/plugin-react": "^4.3.3",
+    "@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.13",
    "echarts": "^5.5.1",
-    "electron": "^31.0.1",
-    "electron-builder": "^24.13.3",
-    "electron-vite": "^2.2.0",
+    "electron": "^33.0.2",
+    "electron-builder": "^25.1.8",
+    "electron-vite": "^2.3.0",
    "esbuild-wasm": "^0.24.0",
-    "eslint": "^9.12.0",
+    "eslint": "^9.13.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-refresh": "^0.4.12",
+    "eslint-plugin-react-refresh": "^0.4.14",
    "fast-deep-equal": "^3.1.3",
    "fflate": "^0.8.2",
    "globals": "^15.11.0",
-    "jsdom": "^24.1.3",
+    "jsdom": "^25.0.1",
    "jwt-decode": "^4.0.0",
-    "less": "^4.2.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.52.0",
-    "monaco-jsx-syntax-highlight": "^1.2.0",
    "prettier": "^3.3.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-draggable": "^4.4.6",
    "react-router": "^6.27.0",
    "react-router-dom": "^6.27.0",
+    "shiki": "^1.22.2",
    "size-sensor": "^1.0.2",
    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.9.0",
+    "typescript-eslint": "^8.12.1",
    "unplugin-auto-import": "^0.18.3",
    "unplugin-icons": "^0.19.3",
    "vanilla-tilt": "^1.8.1",
-    "vite": "5.4.6"
+    "vite": "^5.4.10"
  }
 }
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -4,6 +4,7 @@ import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../build/icon.ico?asset'
 import path from 'node:path'
 import url from 'node:url'
+import fs from 'fs'

 let mainWindow: BrowserWindow

@@ -105,8 +106,19 @@ void app.whenReady().then(() => {
    protocol.handle('local', (request) => {
        const { host } = new URL(request.url)
        if (host === 'oxygen.fatweb.top') {
-            const filePath = request.url.slice('local://oxygen.fatweb.top/'.length)
-            return net.fetch(url.pathToFileURL(filePath).toString())
+            let filePath = request.url.slice('local://oxygen.fatweb.top/'.length)
+            if (fs.existsSync(filePath)) {
+                return net.fetch(url.pathToFileURL(filePath).toString())
+            }
+
+            filePath = join(join(__dirname, '../renderer'), filePath)
+            if (fs.existsSync(filePath)) {
+                return net.fetch(url.pathToFileURL(filePath).toString())
+            }
+
+            return net.fetch(
+                url.pathToFileURL(join(__dirname, '../renderer/index.html')).toString()
+            )
        } else {
            const filePath = request.url.slice('local://'.length)
            return net.fetch(url.pathToFileURL(filePath).toString())
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/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/renderer/src/assets/css/base.less
+++ b/src/renderer/src/assets/css/base.less
@@ -1,60 +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/renderer/src/assets/css/base.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/common.less
+++ b/src/renderer/src/assets/css/common.less
@@ -1,118 +0,0 @@
-@import '@/assets/css/constants';
-
-#root {
-  height: 100vh;
-  width: 100vw;
-}
-
-.body {
-  background-color: @background-color;
-  color: @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: @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/renderer/src/assets/css/common.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/card.module.less
+++ b/src/renderer/src/assets/css/components/common/card.module.less
@@ -1,8 +0,0 @@
-@import '@/assets/css/constants';
-
-.cardBox {
-  background-color: @origin-color;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
-}
--- a/src/renderer/src/assets/css/components/common/card.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/fit-center.module.less
+++ b/src/renderer/src/assets/css/components/common/fit-center.module.less
@@ -1,7 +0,0 @@
-.fitCenter {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
--- a/src/renderer/src/assets/css/components/common/fit-center.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/fit-fullscreen.module.less
+++ b/src/renderer/src/assets/css/components/common/fit-fullscreen.module.less
@@ -1,5 +0,0 @@
-.fitFullscreen {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-}
--- a/src/renderer/src/assets/css/components/common/fit-fullscreen.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/flex-box.module.less
+++ b/src/renderer/src/assets/css/components/common/flex-box.module.less
@@ -1,5 +0,0 @@
-.flexBox {
-  > * {
-    flex: 1;
-  }
-}
--- a/src/renderer/src/assets/css/components/common/flex-box.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/fullscreen-loading-mask.module.less
+++ b/src/renderer/src/assets/css/components/common/fullscreen-loading-mask.module.less
@@ -1,10 +0,0 @@
-.fullscreenLoadingMask {
-  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/renderer/src/assets/css/components/common/fullscreen-loading-mask.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/hide-scrollbar.module.less
+++ b/src/renderer/src/assets/css/components/common/hide-scrollbar.module.less
@@ -1,90 +0,0 @@
-@import "@/assets/css/constants";
-@import "@/assets/css/mixins";
-
-.hideScrollbarMask {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  .hideScrollbarSelection {
-    position: relative;
-    overflow: scroll;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    .hideScrollbarContent {
-      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: @font-secondary-color;
-        transition: background-color .2s;
-      }
-
-      :hover {
-        background-color: @font-main-color;
-      }
-    }
-
-    &.hide {
-      display: block;
-      opacity: 0;
-      animation: 0.4s linear;
-
-      .keyframes(m7t06K, {
-        0% {
-          opacity: 0.5;
-        }
-        100% {
-          opacity: 0;
-        }
-      });
-    }
-  }
-
-  .verticalScrollbar {
-    height: 100%;
-    left: 100%;
-    top: 0;
-    transform: translateX(-100%);
-
-    .box {
-      width: 6px;
-    }
-  }
-
-  .horizontalScrollbar {
-    width: 100%;
-    left: 0;
-    top: 100%;
-    transform: translateY(-100%);
-
-    .box {
-      height: 8px;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/components/common/hide-scrollbar.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/indicator.module.less
+++ b/src/renderer/src/assets/css/components/common/indicator.module.less
@@ -1,30 +0,0 @@
-@import '@/assets/css/constants';
-
-.dotList {
-  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: 2px solid @font-secondary-color;
-      transition: all .2s;
-    }
-
-    :hover {
-      background-color: @focus-color;
-    }
-  }
-
-  .active > * {
-    background-color: @font-secondary-color !important;
-  }
-}
--- a/src/renderer/src/assets/css/components/common/loading-mask.module.less
+++ b/src/renderer/src/assets/css/components/common/loading-mask.module.less
@@ -1,8 +0,0 @@
-.loadingMask {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-}
--- a/src/renderer/src/assets/css/components/common/loading-mask.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/sidebar.module.less
+++ b/src/renderer/src/assets/css/components/common/sidebar.module.less
@@ -1,361 +0,0 @@
-@import "@/assets/css/constants";
-@import "@/assets/css/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: @main-color;
-    overflow: hidden;
-
-    .iconBox {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 10px;
-      width: 40px;
-      height: 40px;
-      font-size: @SIZE_ICON_SM;
-      border-radius: 8px;
-      cursor: pointer;
-
-      span {
-        transform: rotateZ(180deg);
-        transition: all .3s;
-      }
-
-      &:hover {
-        background-color: @background-color;
-      }
-    }
-
-    .text {
-      flex: 1;
-      font-size: 2em;
-      text-align: center;
-      letter-spacing: 0.2em;
-      transform: translateX(0.1em);
-    }
-  }
-
-  .content, .bottomFixed {
-    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;
-
-          > .menuBt {
-            border-radius: 8px;
-            overflow: hidden;
-            height: 40px;
-
-            .iconBox {
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              padding: 0 10px;
-              width: 40px;
-              height: 40px;
-              font-size: @SIZE_ICON_SM;
-              cursor: pointer;
-
-              img {
-                width: 100%;
-              }
-            }
-
-            a {
-              display: flex;
-              align-items: center;
-              height: 100%;
-              width: 100%;
-              transition: all 0.2s;
-              background-color: @origin-color;
-
-              .text {
-                flex: 1;
-                padding-left: 8px;
-                width: 0;
-                overflow: hidden;
-                text-overflow: ellipsis;
-              }
-
-              &.active {
-                color: @origin-color;
-                background-color: @main-color;
-
-                img {
-                  filter: drop-shadow(1000px 0 0 @origin-color);
-                  transform: translate(-1000px);
-                }
-              }
-            }
-
-            &:hover {
-              > * {
-                background-color: @background-color;
-              }
-            }
-          }
-
-          .submenu {
-            visibility: hidden;
-            position: fixed;
-            padding-left: 10px;
-            z-index: 10000;
-            animation: 0.1s ease forwards;
-            .keyframes(XxrGiu, {
-              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: @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: @origin-color;
-                    background-color: @main-color;
-                  }
-                }
-
-                &:hover a:not(.active) {
-                  background-color: @background-color;
-                }
-              }
-            }
-          }
-
-          &:hover {
-            > .menu-bt {
-              a:not(.active) {
-                background-color: @background-color;
-              }
-            }
-
-            .submenu {
-              visibility: visible;
-              animation: 0.3s ease;
-              .keyframes(f6yTZM, {
-                0% {
-                  transform: translateX(-10px);
-                  opacity: 0;
-                }
-                100% {
-                  transform: translateX(0);
-                  opacity: 1;
-                }
-              });
-            }
-          }
-        }
-      }
-
-      :global .delete {
-        :local .menuBt {
-          border: 1px dashed @error-secondary-color;
-          filter: drop-shadow(1000px 0 0 @error-secondary-color);
-          transform: translate(-1000px);
-
-          > a {
-            background-color: transparent !important;
-          }
-        }
-      }
-    }
-  }
-
-  .separate {
-    height: 0;
-    margin: 10px 5px;
-    border: 1px solid @font-secondary-color;
-    opacity: 0.4;
-  }
-
-  .footer {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-    padding: 8px 14px;
-    color: @main-color;
-
-    .iconUser {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex: 0 0 auto;
-      margin-left: 4px;
-      width: 36px;
-      height: 36px;
-      font-size: @SIZE_ICON_XS;
-      border: 2px @font-secondary-color solid;
-      color: @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: @font-main-color;
-      user-select: text;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      a {
-        color: @main-color;
-        text-decoration: underline;
-      }
-    }
-
-    .iconExit {
-      font-size: @SIZE_ICON_XS;
-      color: @error-color;
-      padding: 6px 10px;
-      cursor: pointer;
-
-      &:hover {
-        border-radius: 8px;
-        background-color: @background-color;
-      }
-    }
-  }
-
-  &.hide {
-    width: 68px !important;
-
-    .title {
-      .iconBox {
-        span {
-          transform: rotateZ(360deg);
-          transition: all .3s;
-        }
-      }
-
-      .text {
-        display: none;
-      }
-    }
-
-    .menuBt {
-      .text, .extend {
-        display: none;
-      }
-    }
-
-    .submenu {
-      .menuBt {
-        .text {
-          display: block;
-        }
-      }
-    }
-
-    .footer {
-      position: relative;
-
-      .text {
-        display: none;
-      }
-
-      .submenuExit {
-        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: @origin-color;
-
-          .iconExit {
-            padding: 4px 8px;
-
-            &:hover {
-              border-radius: 8px;
-              background-color: @background-color;
-            }
-          }
-        }
-
-        &.hide {
-          display: none !important;
-        }
-      }
-
-      &:hover .submenuExit {
-        display: block;
-        animation: 0.3s ease;
-        .keyframes(mfdCZC, {
-          0% {
-            transform: translateX(-10px);
-            opacity: 0;
-          }
-          100% {
-            transform: translateX(0);
-            opacity: 1;
-          }
-        });
-      }
-    }
-  }
-}
--- a/src/renderer/src/assets/css/components/common/sidebar/footer.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/sidebar/index.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/sidebar/item.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/sidebar/scroll.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/sidebar/separate.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/sidebar/submenu.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/common/url-card.module.less
+++ b/src/renderer/src/assets/css/components/common/url-card.module.less
@@ -1,28 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  cursor: pointer;
-
-  .urlCard {
-    width: 100%;
-    height: 100%;
-    margin-top: 80px;
-    text-align: center;
-    gap: 42px;
-
-    > * {
-      flex: 0 0 auto;
-      display: block;
-    }
-
-    .icon {
-      color: @production-color;
-      font-size: @SIZE_ICON_XL;
-    }
-
-    .text {
-      font-weight: bolder;
-      font-size: 2em;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/components/common/url-card.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/dnd/drag-handle.module.less
+++ b/src/renderer/src/assets/css/components/dnd/drag-handle.module.less
@@ -1,5 +0,0 @@
-.root {
-  background-color: transparent;
-  color: unset;
-  cursor: grab;
-}
--- a/src/renderer/src/assets/css/components/dnd/drag-handle.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/dnd/drop-mask.module.less
+++ b/src/renderer/src/assets/css/components/dnd/drop-mask.module.less
@@ -1,22 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0 10px 10px;
-  background-color: @origin-color;
-
-  .dropMaskBorder {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    border: 2px dashed @font-secondary-color;
-    border-radius: 8px;
-    font-size: 1.8em;
-  }
-}
--- a/src/renderer/src/assets/css/components/dnd/drop-mask.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/dnd/sortable.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/system/setting-card.module.less
+++ b/src/renderer/src/assets/css/components/system/setting-card.module.less
@@ -1,33 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .settingsCard {
-    padding: 20px;
-    gap: 20px;
-    color: @main-color;
-
-    > .head {
-      align-items: center;
-      gap: 5px;
-
-      .icon {
-        font-size: @SIZE_ICON_MD;
-        flex: 0 0 auto;
-      }
-
-      .title {
-        display: flex;
-        font-size: 1.2em;
-      }
-
-      :nth-child(n+3) {
-        flex: 0 0 auto;
-        color: @font-main-color;
-      }
-
-      .btSave {
-        color: @main-color;
-      }
-    }
-  }
-}
--- a/src/renderer/src/assets/css/components/system/setting-card.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/system/statistics-card.module.less
+++ b/src/renderer/src/assets/css/components/system/statistics-card.module.less
@@ -1,78 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .statisticsCard {
-    padding: 20px;
-    gap: 20px;
-
-    > .head {
-      align-items: center;
-      gap: 5px;
-      color: @main-color;
-
-      .icon {
-        font-size: @SIZE_ICON_MD;
-        flex: 0 0 auto;
-      }
-
-      .title {
-        display: flex;
-        font-size: 1.2em;
-      }
-
-      :nth-child(n+3) {
-        flex: 0 0 auto;
-        color: @font-main-color;
-      }
-    }
-
-    :global .card-content {
-      font-size: 1.1em;
-      padding: 0 10px;
-      gap: 10px;
-
-      .key, .value-percent {
-        flex: 0 0 auto;
-        color: @font-main-color;
-      }
-
-      .value {
-        color: @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/renderer/src/assets/css/components/system/statistics-card.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/tools/load-more-card.module.less
+++ b/src/renderer/src/assets/css/components/tools/load-more-card.module.less
@@ -1,27 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  cursor: pointer;
-
-  .loadMoreCard {
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    align-items: center;
-
-    .icon {
-      display: flex;
-      font-size: @SIZE_ICON_XXL;
-      color: @production-color;
-      align-items: center;
-      transform: translateY(-20px);
-    }
-
-    .text {
-      position: absolute;
-      top: 60%;
-      font-size: 1.2em;
-      font-weight: bolder;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/components/tools/load-more-card.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/tools/local-card.module.less
+++ b/src/renderer/src/assets/css/components/tools/local-card.module.less
@@ -1,112 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  height: 100%;
-  cursor: pointer;
-
-  .localCard {
-    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;
-
-        > *:hover {
-          color: @font-secondary-color;
-        }
-      }
-    }
-
-    .icon {
-      display: flex;
-      padding-top: 10px;
-      padding-bottom: 20px;
-      color: @production-color;
-      font-size: @SIZE_ICON_XL;
-      justify-content: center;
-
-      img {
-        width: @SIZE_ICON_XL;
-      }
-    }
-
-    .info {
-      padding-top: 20px;
-
-      .toolName {
-        font-weight: bolder;
-        font-size: 1.6em;
-      }
-
-      .toolDesc {
-        margin: 10px auto 0;
-        color: @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;
-        }
-      }
-
-      .authorName {
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-
-  :hover {
-    .header {
-      .version {
-        opacity: 0;
-      }
-
-      .operation {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-.androidQrcode {
-  align-items: center;
-  transform: translateX(-16px);
-  gap: 20px;
-}
--- a/src/renderer/src/assets/css/components/tools/local-card.style.ts
+++ b/src/renderer/src/assets/css/components/tools/local-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/renderer/src/assets/css/components/tools/repository-card.module.less
+++ b/src/renderer/src/assets/css/components/tools/repository-card.module.less
@@ -1,94 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  height: 100%;
-
-  .repositoryCard {
-    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;
-
-      :global .version-select {
-        width: 9em;
-        margin-right: auto;
-      }
-
-      >:not(:global .version-select) {
-        font-size: 1.6em;
-      }
-    }
-
-    .icon {
-      display: flex;
-      padding-top: 10px;
-      padding-bottom: 20px;
-      color: @production-color;
-      font-size: @SIZE_ICON_XL;
-      justify-content: center;
-
-      img {
-        width: @SIZE_ICON_XL;
-      }
-    }
-
-    .info {
-      transform: translateY(40px);
-      transition: all 0.1s ease;
-
-      .toolName {
-        font-weight: bolder;
-        font-size: 1.6em;
-      }
-    }
-
-    &:hover {
-      .info {
-        transform: translateY(-10px);
-        transition: all 0.2s 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;
-          }
-        }
-      }
-    }
-
-    &:hover .operation {
-      visibility: visible;
-      opacity: 1;
-      transition: all 0.4s ease;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/components/tools/repository-card.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/components/tools/store-card.module.less
+++ b/src/renderer/src/assets/css/components/tools/store-card.module.less
@@ -1,114 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  height: 100%;
-  cursor: pointer;
-
-  .storeCard {
-    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: @font-secondary-color;
-        }
-      }
-    }
-
-    .icon {
-      display: flex;
-      padding-top: 10px;
-      padding-bottom: 20px;
-      color: @production-color;
-      font-size: @SIZE_ICON_XL;
-      justify-content: center;
-
-      img {
-        width: @SIZE_ICON_XL;
-      }
-    }
-
-    .info {
-      padding-top: 20px;
-
-      .toolName {
-        font-weight: bolder;
-        font-size: 1.6em;
-      }
-
-      .toolDesc {
-        margin: 10px auto 0;
-        color: @font-secondary-color;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-height: 40px;
-        width: 80%;
-      }
-    }
-
-    .author {
-      display: flex;
-      margin-top: auto;
-      padding-top: 8px;
-      flex-direction: row;
-      justify-content: end;
-      padding-bottom: 10px;
-      gap: 10px;
-
-      .avatar {
-        > * {
-          width: 24px;
-          height: 24px;
-        }
-      }
-
-      .authorName {
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-
-  :hover {
-    .header {
-      .version {
-        opacity: 0;
-      }
-
-      .operation {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-.androidQrcode {
-  align-items: center;
-  transform: translateX(-16px);
-  gap: 20px;
-}
--- a/src/renderer/src/assets/css/components/tools/store-card.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/constants.less
+++ b/src/renderer/src/assets/css/constants.less
@@ -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/renderer/src/assets/css/mixins.less
+++ b/src/renderer/src/assets/css/mixins.less
@@ -1,15 +0,0 @@
-.keyframes(@animationName, @content) {
-  animation-name: @animationName;
-  @-webkit-keyframes @animationName {
-    @content();
-  }
-  @-moz-keyframes @animationName {
-    @content();
-  }
-  @-o-keyframes @animationName {
-    @content();
-  }
-  @keyframes @animationName {
-    @content();
-  }
-}
--- a/src/renderer/src/assets/css/pages/sign/forget.module.less
+++ b/src/renderer/src/assets/css/pages/sign/forget.module.less
@@ -1,40 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .title {
-    margin-bottom: 20px;
-    transform: translateY(-10px);
-
-    .primary {
-      font-size: 2.4em;
-      font-weight: bolder;
-      color: @production-color;
-    }
-
-    .secondary {
-      font-size: 1.2em;
-    }
-  }
-
-  .form {
-    width: 300px;
-    font-size: 14px;
-
-    .retry, .success {
-      margin-bottom: 16px;
-
-      a {
-        font-weight: bolder;
-      }
-    }
-
-    .footer {
-      text-align: center;
-
-      a {
-        color: @production-color;
-        font-weight: bolder;
-      }
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/sign/forget.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/sign/index.module.less
+++ b/src/renderer/src/assets/css/pages/sign/index.module.less
@@ -1,80 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  background-color: #D2D0DD;
-  user-select: none;
-
-  a {
-    cursor: pointer;
-  }
-
-  a:hover {
-    color: @production-color;
-  }
-
-  .signBox {
-    position: relative;
-    background-color: @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;
-      }
-    }
-
-    .cover {
-      position: absolute;
-      height: 100%;
-      width: 50%;
-      background-color: #F3F4F8;
-      transition: all 0.8s ease;
-
-      .ballBox {
-        position: relative;
-        overflow: hidden;
-
-        background-color: #F1F2F7;
-
-        .ball {
-          position: absolute;
-          width: 128px;
-          height: 128px;
-          background-color: @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/renderer/src/assets/css/pages/sign/index.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/sign/sign-in.module.less
+++ b/src/renderer/src/assets/css/pages/sign/sign-in.module.less
@@ -1,41 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .title {
-    margin-bottom: 20px;
-    transform: translateY(-10px);
-
-    .primary {
-      font-size: 2.4em;
-      font-weight: bolder;
-      color: @production-color;
-    }
-
-    .secondary {
-      font-size: 1.2em;
-    }
-  }
-
-  .form {
-    width: 300px;
-    font-size: 14px;
-
-    .addition {
-      justify-content: space-between;
-      margin-bottom: 14px;
-
-      a {
-        flex: 0 0 auto;
-      }
-    }
-
-    .footer {
-      text-align: center;
-
-      a {
-        color: @production-color;
-        font-weight: bolder;
-      }
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/sign/sign-in.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/sign/sign-up.module.less
+++ b/src/renderer/src/assets/css/pages/sign/sign-up.module.less
@@ -1,40 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .title {
-    margin-bottom: 20px;
-    transform: translateY(-10px);
-
-    .primary {
-      font-size: 2.4em;
-      font-weight: bolder;
-      color: @production-color;
-    }
-
-    .secondary {
-      font-size: 1.2em;
-    }
-  }
-
-  .form {
-    width: 300px;
-    font-size: 14px;
-
-    .retry, .success {
-      margin-bottom: 16px;
-
-      a {
-        font-weight: bolder;
-      }
-    }
-
-    .footer {
-      text-align: center;
-
-      a {
-        color: @production-color;
-        font-weight: bolder;
-      }
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/sign/sign-up.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/sign/verify.module.less
+++ b/src/renderer/src/assets/css/pages/sign/verify.module.less
@@ -1,28 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .title {
-    margin-bottom: 20px;
-    transform: translateY(-10px);
-
-    .primary {
-      font-size: 2.4em;
-      font-weight: bolder;
-      color: @production-color;
-    }
-
-    .secondary {
-      font-size: 1.2em;
-    }
-  }
-
-  .form {
-    width: 300px;
-    font-size: 14px;
-
-    a {
-      color: @production-color;
-      font-weight: bolder;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/sign/verify.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/system-framework.module.less
+++ b/src/renderer/src/assets/css/pages/system-framework.module.less
@@ -1,13 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .leftPanel {
-    background-color: @origin-color;
-  }
-
-  .rightPanel {
-    flex: 1;
-    width: 0;
-    background-color: @background-color;
-  }
-}
--- a/src/renderer/src/assets/css/pages/system-framework.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/system/index.module.less
+++ b/src/renderer/src/assets/css/pages/system/index.module.less
@@ -1,15 +0,0 @@
-.root {
-  .rootContent {
-    padding: 20px;
-    gap: 20px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-
-    > div {
-      width: 200px;
-      height: 320px;
-      flex: 0 0 auto;
-      overflow: hidden !important;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/system/index.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/system/settings.module.less
+++ b/src/renderer/src/assets/css/pages/system/settings.module.less
@@ -1,14 +0,0 @@
-.root {
-  .rootContent {
-    padding: 20px;
-    gap: 20px;
-
-    .rootCol {
-      gap: 20px;
-
-      > * {
-        flex: 0 0 auto;
-      }
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/system/settings/index.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/system/statistics.module.less
+++ b/src/renderer/src/assets/css/pages/system/statistics.module.less
@@ -1,13 +0,0 @@
-.root {
-  .rootContent {
-    padding: 20px;
-    gap: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    > div {
-      width: 48%;
-      flex: 0 0 auto;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/system/statistics/common.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/system/statistics/index.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/system/tools/base.module.less
+++ b/src/renderer/src/assets/css/pages/system/tools/base.module.less
@@ -1,44 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .rootContent {
-    padding: 20px;
-    gap: 10px;
-    height: 100%;
-    width: 100%;
-
-    .hasEdited::after {
-      content: '*';
-      color: @font-secondary-color;
-    }
-
-    >*:first-child {
-      width: 0;
-      height: fit-content;
-    }
-
-    > *:nth-child(2) {
-      position: sticky;
-      top: 20px;
-      height: calc(100vh - 40px);
-    }
-
-    .closeEditorBtn {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      background-color: @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/renderer/src/assets/css/pages/system/tools/base.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/system/tools/code.module.less
+++ b/src/renderer/src/assets/css/pages/system/tools/code.module.less
@@ -1,20 +0,0 @@
-.root {
-  padding: 20px;
-
-  .rootBox {
-    width: 100%;
-    height: 100%;
-  }
-
-  .draggableContent {
-    position: fixed;
-    inset-inline-end: 48px;
-    inset-block-end: 48px;
-
-    > * {
-      position: relative;
-      inset-inline-end: 0;
-      inset-block-end: 0;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/system/tools/code.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/system/tools/execute.module.less
+++ b/src/renderer/src/assets/css/pages/system/tools/execute.module.less
@@ -1,8 +0,0 @@
-.root {
-  padding: 20px;
-
-  .rootBox {
-    width: 100%;
-    height: 100%;
-  }
-}
--- a/src/renderer/src/assets/css/pages/system/tools/execute.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/system/tools/template.module.less
+++ b/src/renderer/src/assets/css/pages/system/tools/template.module.less
@@ -1,44 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .rootContent {
-    padding: 20px;
-    gap: 10px;
-    height: 100%;
-    width: 100%;
-
-    .hasEdited::after {
-      content: '*';
-      color: @font-secondary-color;
-    }
-
-    >*:first-child {
-      width: 0;
-      height: fit-content;
-    }
-
-    > *:nth-child(2) {
-      position: sticky;
-      top: 20px;
-      height: calc(100vh - 40px);
-    }
-
-    .closeEditorBtn {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      background-color: @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/renderer/src/assets/css/pages/system/tools/template.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/tools-framework.module.less
+++ b/src/renderer/src/assets/css/pages/tools-framework.module.less
@@ -1,21 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .leftPanel {
-    background-color: @origin-color;
-
-    .menuDroppable {
-      display: flex;
-      position: relative;
-      min-height: 0;
-      flex: 1;
-      width: 100%;
-    }
-  }
-
-  .rightPanel {
-    flex: 1;
-    width: 0;
-    background-color: @background-color;
-  }
-}
--- a/src/renderer/src/assets/css/pages/tools-framework.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/tools/create.module.less
+++ b/src/renderer/src/assets/css/pages/tools/create.module.less
@@ -1,52 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  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: @production-color;
-        font-weight: bolder;
-      }
-    }
-
-    .config {
-      .configContent {
-        padding: 20px;
-
-        .createBt {
-          width: 100%;
-          font-weight: bold;
-        }
-      }
-    }
-
-    .preview {
-      display: flex;
-      position: relative;
-      justify-content: center;
-      align-items: center;
-
-      .noPreview {
-        font-weight: bolder;
-        color: @font-secondary-color;
-        font-size: 1.4em;
-      }
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/tools/create.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/tools/edit.module.less
+++ b/src/renderer/src/assets/css/pages/tools/edit.module.less
@@ -1,36 +0,0 @@
-.root {
-  padding: 20px;
-
-  .rootBox {
-    height: 100%;
-    width: 100%;
-
-    .rootContent {
-      position: relative;
-      width: 100%;
-      height: 100%;
-
-      > * {
-        width: 0;
-      }
-
-      .draggableMask {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  .draggableContent {
-    position: fixed;
-    inset-inline-end: 48px;
-    inset-block-end: 48px;
-
-    > * {
-      position: relative;
-      inset-inline-end: 0;
-      inset-block-end: 0;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/tools/edit.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/tools/index.module.less
+++ b/src/renderer/src/assets/css/pages/tools/index.module.less
@@ -1,54 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  padding: 20px;
-  gap: 20px;
-
-  .ownContent {
-    gap: 20px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-
-    > div {
-      width: 180px;
-      min-height: 290px;
-      flex: 0 0 auto;
-    }
-
-
-    & > :first-child {
-      cursor: pointer;
-    }
-  }
-
-  .favoriteDivider {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 20px;
-    margin-top: 20px;
-
-    :first-child, :last-child {
-      height: 0;
-      border: 1px dashed @divide-color;
-    }
-
-    .dividerText {
-      flex: 0 0 auto;
-      font-size: 1.2em;
-      color: @font-secondary-color;
-    }
-  }
-
-  .starContent {
-    gap: 20px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-
-    > div {
-      width: 180px;
-      min-height: 290px;
-      flex: 0 0 auto;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/tools/index.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/tools/local.module.less
+++ b/src/renderer/src/assets/css/pages/tools/local.module.less
@@ -1,43 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .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);
-    }
-  }
-
-  .rootContent {
-    padding: 20px;
-    gap: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    > div {
-      width: 180px;
-      min-height: 290px;
-      flex: 0 0 auto;
-    }
-
-    .noTool {
-      display: flex;
-      justify-content: center;
-      font-size: 1.4em;
-      font-weight: bolder;
-      color: @font-secondary-color;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/tools/local.style.ts
+++ b/src/renderer/src/assets/css/pages/tools/local.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/renderer/src/assets/css/pages/tools/source.module.less
+++ b/src/renderer/src/assets/css/pages/tools/source.module.less
@@ -1,8 +0,0 @@
-.root {
-  padding: 20px;
-
-  .rootBox {
-    width: 100%;
-    height: 100%;
-  }
-}
--- a/src/renderer/src/assets/css/pages/tools/source.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/tools/store.module.less
+++ b/src/renderer/src/assets/css/pages/tools/store.module.less
@@ -1,43 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .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);
-    }
-  }
-
-  .rootContent {
-    padding: 20px;
-    gap: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    > div {
-      width: 180px;
-      min-height: 290px;
-      flex: 0 0 auto;
-    }
-
-    .noTool {
-      display: flex;
-      justify-content: center;
-      font-size: 1.4em;
-      font-weight: bolder;
-      color: @font-secondary-color;
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/tools/store.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/tools/user.module.less
+++ b/src/renderer/src/assets/css/pages/tools/user.module.less
@@ -1,79 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  padding: 80px 20px 20px 20px;
-
-  .rootBox {
-    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;
-      }
-
-      .avatarBox {
-        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;
-        }
-      }
-
-      .infoName {
-        margin: 20px 0 0 24px;
-        justify-content: center;
-
-        > * {
-          flex: 0 0 auto;
-        }
-
-        .nickname {
-          font-size: 2.4em;
-          font-weight: bolder;
-          color: @production-color;
-        }
-
-        .url {
-          cursor: pointer;
-
-          > span {
-            margin-left: 8px;
-          }
-        }
-      }
-    }
-
-    .tools {
-      padding: 20px;
-      gap: 20px;
-      flex-wrap: wrap;
-      justify-content: center;
-
-      > div {
-        width: 180px;
-        min-height: 290px;
-        flex: 0 0 auto;
-      }
-
-      .noTool {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 20px;
-        font-size: 1.2em;
-        font-weight: bolder;
-        color: @font-secondary-color;
-      }
-    }
-  }
-}
--- a/src/renderer/src/assets/css/pages/tools/user.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/tools/view.module.less
+++ b/src/renderer/src/assets/css/pages/tools/view.module.less
@@ -1,9 +0,0 @@
-.root {
-  padding: 20px;
-
-  .rootBox {
-    position: relative;
-    height: 100%;
-    width: 100%;
-  }
-}
--- a/src/renderer/src/assets/css/pages/tools/view.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/user-framework.module.less
+++ b/src/renderer/src/assets/css/pages/user-framework.module.less
@@ -1,13 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  .leftPanel {
-    background-color: @origin-color;
-  }
-
-  .rightPanel {
-    flex: 1;
-    width: 0;
-    background-color: @background-color;
-  }
-}
--- a/src/renderer/src/assets/css/pages/user-framework.style.ts
+++ b/src/renderer/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/renderer/src/assets/css/pages/user/index.module.less
+++ b/src/renderer/src/assets/css/pages/user/index.module.less
@@ -1,118 +0,0 @@
-@import "@/assets/css/constants";
-
-.root {
-  padding: 80px 20px 20px 20px;
-
-  .content {
-    width: 100%;
-    height: 100%;
-    overflow: visible;
-    align-items: center;
-    min-width: 900px;
-    padding-bottom: 20px;
-
-    > :not(:first-child) {
-      padding: 0 60px;
-    }
-
-    .divide {
-      height: 1px;
-      width: calc(100% - 120px);
-      background-color: @divide-color;
-      margin: 0 60px;
-    }
-
-    .info {
-      margin-left: 40px;
-      transform: translateY(-40px);
-
-      > * {
-        flex: 0 0 auto;
-      }
-
-      .avatarBox {
-        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;
-        }
-      }
-
-      .infoName {
-        margin: 20px 0 0 24px;
-        justify-content: center;
-
-        > * {
-          flex: 0 0 auto;
-        }
-
-        .nickname {
-          font-size: 2.4em;
-          font-weight: bolder;
-          color: @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;
-        }
-      }
-    }
-
-    .profile, .security {
-      gap: 24px;
-      padding-top: 30px;
-      padding-bottom: 20px;
-
-      .row {
-        > * {
-          flex: 0 0 auto;
-        }
-
-        .label {
-          font-size: 1.4em;
-          font-weight: bolder;
-          width: 400px;
-        }
-
-        .input {
-          width: 400px;
-
-          > * {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
FatttSnake	d6fec531b2	Fix(Simulation): Fix the bug that simulation cannot switch device and rotate	2024-11-03 12:06:18 +08:00
FatttSnake	f491268c62	Fix(Render): Fix can not render device node when entering the page	2024-11-03 12:05:55 +08:00
FatttSnake	a33a405a07	Feat(Playground): Support load global js and css variables	2024-11-03 12:04:05 +08:00
FatttSnake	e2fe240877	Feat(Tools): Support theme	2024-11-03 11:59:20 +08:00
FatttSnake	b3e1b67515	Fix(electron): Fix the bug that the page cannot be loaded after refreshing	2024-10-31 17:21:06 +08:00
FatttSnake	1a529e4139	Fix(Sign): Fix the bug that the login page gets stuck when returning to the homepage	2024-10-31 16:06:05 +08:00
FatttSnake	9d1d5b10d6	Refactor(Code): Optimize code	2024-10-31 16:03:57 +08:00
FatttSnake	51dc1ed377	Refactor(common): Remove unused console log	2024-10-31 16:03:21 +08:00
FatttSnake	7fdd2b2465	Fix(View & Execute): Fixed the bug of being able to open Desktop tools in the web environment	2024-10-31 16:02:37 +08:00
FatttSnake	23be95d533	Refactor(Execute): Support mobile mode	2024-10-31 16:01:35 +08:00
FatttSnake	eaba5aa372	Fix(CodeEditor): Fix error stylesheet	2024-10-31 15:41:40 +08:00
FatttSnake	46b6e9f969	Refactor(Render): Using React Flow to render the mobile simulator	2024-10-31 15:40:26 +08:00
FatttSnake	4d5dc38d27	Build(package.json): Upgrade dependencies	2024-10-29 17:08:46 +08:00
FatttSnake	bfc5f81cfb	Build(package.json): Optimize dependencies	2024-10-28 17:57:11 +08:00
FatttSnake	a2dcf45f84	Feat(Theme): Support switch theme mode	2024-10-28 17:54:56 +08:00
FatttSnake	e97b932cf5	Fix(StyleSheet): Fix wrong styles	2024-10-28 17:50:26 +08:00
FatttSnake	635cda3821	Feat(CodeEditor): Support jsx highlight	2024-10-28 17:48:23 +08:00
FatttSnake	735928d53e	Feat(Hint): Support dark mode	2024-10-28 17:29:06 +08:00
FatttSnake	a067cc9ea0	Feat(Theme): Support dark mode	2024-10-28 16:56:42 +08:00