From dbce6b9cf23cdc5d96ae0a587fa96af9b24c83c7 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 23 Oct 2024 10:17:45 +0800 Subject: [PATCH] Feat(Theme): Support dark mode --- package-lock.json | 378 ++++++++++++++++-- package.json | 1 + src/App.tsx | 48 ++- src/assets/css/base.less | 60 --- src/assets/css/base.style.ts | 32 ++ src/assets/css/common.less | 118 ------ src/assets/css/common.style.ts | 43 ++ .../css/components/common/card.module.less | 8 - .../css/components/common/card.style.ts | 10 + .../components/common/fit-center.module.less | 7 - .../css/components/common/fit-center.style.ts | 11 + .../common/fit-fullscreen.module.less | 5 - .../components/common/fit-fullscreen.style.ts | 9 + .../components/common/flex-box.module.less | 5 - .../css/components/common/flex-box.style.ts | 9 + .../fullscreen-loading-mask.module.less | 10 - .../common/fullscreen-loading-mask.style.ts | 14 + .../common/hide-scrollbar.module.less | 90 ----- .../components/common/hide-scrollbar.style.ts | 84 ++++ .../components/common/indicator.module.less | 30 -- .../common/loading-mask.module.less | 8 - .../components/common/loading-mask.style.ts | 12 + .../css/components/common/sidebar.module.less | 361 ----------------- .../components/common/sidebar/footer.style.ts | 110 +++++ .../components/common/sidebar/index.style.ts | 85 ++++ .../components/common/sidebar/item.style.ts | 83 ++++ .../components/common/sidebar/scroll.style.ts | 9 + .../css/components/common/sidebar/separate.ts | 9 + .../common/sidebar/submenu.style.ts | 50 +++ .../components/common/url-card.module.less | 28 -- .../css/components/common/url-card.style.ts | 24 ++ .../components/dnd/drag-handle.module.less | 5 - .../css/components/dnd/drag-handle.style.ts | 9 + .../css/components/dnd/drop-mask.module.less | 22 - .../css/components/dnd/drop-mask.style.ts | 24 ++ .../css/components/dnd/sortable.style.ts | 15 + .../system/setting-card.module.less | 33 -- .../components/system/setting-card.style.ts | 32 ++ .../system/statistics-card.module.less | 78 ---- .../system/statistics-card.style.ts | 28 ++ .../tools/load-more-card.module.less | 27 -- .../components/tools/load-more-card.style.ts | 26 ++ .../tools/repository-card.module.less | 94 ----- .../components/tools/repository-card.style.ts | 108 +++++ .../components/tools/store-card.module.less | 114 ------ .../css/components/tools/store-card.style.ts | 110 +++++ src/assets/css/constants.less | 22 - src/assets/css/mixins.less | 15 - src/assets/css/pages/sign/forget.module.less | 40 -- src/assets/css/pages/sign/forget.style.ts | 35 ++ src/assets/css/pages/sign/index.module.less | 80 ---- src/assets/css/pages/sign/index.style.ts | 82 ++++ src/assets/css/pages/sign/sign-in.module.less | 41 -- src/assets/css/pages/sign/sign-in.style.ts | 36 ++ src/assets/css/pages/sign/sign-up.module.less | 40 -- src/assets/css/pages/sign/sign-up.style.ts | 31 ++ src/assets/css/pages/sign/verify.module.less | 28 -- src/assets/css/pages/sign/verify.style.ts | 23 ++ .../css/pages/system-framework.module.less | 13 - .../css/pages/system-framework.style.ts | 13 + src/assets/css/pages/system/index.module.less | 15 - src/assets/css/pages/system/index.style.ts | 15 + .../css/pages/system/settings.module.less | 14 - .../css/pages/system/settings/index.style.ts | 16 + .../css/pages/system/statistics.module.less | 13 - .../pages/system/statistics/common.style.ts | 44 ++ .../pages/system/statistics/index.style.ts | 16 + .../css/pages/system/tools/base.module.less | 44 -- .../css/pages/system/tools/base.style.ts | 44 ++ .../css/pages/system/tools/code.module.less | 20 - .../css/pages/system/tools/code.style.ts | 24 ++ .../pages/system/tools/execute.module.less | 8 - .../css/pages/system/tools/execute.style.ts | 12 + .../pages/system/tools/template.module.less | 44 -- .../css/pages/system/tools/template.style.ts | 44 ++ .../css/pages/tools-framework.module.less | 21 - src/assets/css/pages/tools-framework.style.ts | 21 + src/assets/css/pages/tools/create.module.less | 52 --- src/assets/css/pages/tools/create.style.ts | 52 +++ src/assets/css/pages/tools/edit.module.less | 36 -- src/assets/css/pages/tools/edit.style.ts | 40 ++ src/assets/css/pages/tools/index.module.less | 54 --- src/assets/css/pages/tools/index.style.ts | 45 +++ src/assets/css/pages/tools/source.module.less | 8 - src/assets/css/pages/tools/source.style.ts | 12 + src/assets/css/pages/tools/store.module.less | 43 -- src/assets/css/pages/tools/store.style.ts | 41 ++ src/assets/css/pages/tools/user.module.less | 79 ---- src/assets/css/pages/tools/user.style.ts | 82 ++++ src/assets/css/pages/tools/view.module.less | 9 - src/assets/css/pages/tools/view.style.ts | 13 + .../css/pages/user-framework.module.less | 13 - src/assets/css/pages/user-framework.style.ts | 13 + src/assets/css/pages/user/index.module.less | 118 ------ src/assets/css/pages/user/index.style.ts | 114 ++++++ .../CodeEditor/Editor/index.module.less | 89 ----- .../CodeEditor/Editor/index.style.ts | 53 +++ .../Playground/CodeEditor/Editor/index.tsx | 15 +- .../CodeEditor/FileSelector/Item.tsx | 5 +- .../CodeEditor/FileSelector/index.module.less | 37 -- .../CodeEditor/FileSelector/index.style.ts | 41 ++ .../CodeEditor/FileSelector/index.tsx | 3 +- .../CodeEditor/FileSelector/item.module.less | 47 --- .../CodeEditor/FileSelector/item.style.ts | 54 +++ .../Playground/CodeEditor/index.module.less | 15 - .../Playground/CodeEditor/index.style.ts | 19 + .../Playground/CodeEditor/index.tsx | 11 +- .../Playground/Output/Preview/Render.tsx | 31 +- .../Output/Preview/index.module.less | 15 - .../Playground/Output/Preview/index.style.ts | 19 + .../Playground/Output/Preview/index.tsx | 3 +- .../Output/Preview/render.module.less | 78 ---- .../Playground/Output/Preview/render.style.ts | 84 ++++ .../Output/Transform/index.module.less | 13 - .../Output/Transform/index.style.ts | 17 + .../Playground/Output/Transform/index.tsx | 3 +- src/components/Playground/index.module.less | 8 - src/components/Playground/index.style.ts | 12 + src/components/Playground/index.tsx | 6 +- src/components/common/Card.tsx | 12 +- src/components/common/FitCenter.tsx | 10 +- src/components/common/FitFullscreen.tsx | 6 +- src/components/common/FlexBox.tsx | 10 +- .../common/FullscreenLoadingMask.tsx | 7 +- src/components/common/HideScrollbar.tsx | 32 +- src/components/common/Indicator.tsx | 36 -- src/components/common/LoadingMask.tsx | 7 +- src/components/common/Sidebar/Footer.tsx | 30 +- src/components/common/Sidebar/Item.tsx | 81 ++-- src/components/common/Sidebar/Scroll.tsx | 4 +- src/components/common/Sidebar/Separate.tsx | 6 +- src/components/common/Sidebar/Submenu.tsx | 28 +- src/components/common/Sidebar/index.tsx | 27 +- src/components/common/UrlCard.tsx | 6 +- src/components/dnd/DragHandle.tsx | 3 +- src/components/dnd/DropMask.tsx | 4 +- src/components/dnd/Sortable.tsx | 4 +- src/components/system/SettingCard.tsx | 8 +- src/components/system/StatisticsCard.tsx | 8 +- src/components/tools/LoadMoreCard.tsx | 12 +- src/components/tools/RepositoryCard.tsx | 22 +- src/components/tools/StoreCard.tsx | 39 +- src/constants/common.constants.ts | 17 - src/main.tsx | 21 +- src/pages/Sign/Forget.tsx | 242 ++++++----- src/pages/Sign/SignIn.tsx | 179 +++++---- src/pages/Sign/SignUp.tsx | 261 ++++++------ src/pages/Sign/Verify.tsx | 158 ++++---- src/pages/Sign/index.tsx | 9 +- src/pages/System/Group.tsx | 17 +- src/pages/System/Log.tsx | 6 +- src/pages/System/Role.tsx | 17 +- src/pages/System/Settings/index.tsx | 8 +- src/pages/System/Statistics/ActiveInfo.tsx | 6 +- src/pages/System/Statistics/CPUInfo.tsx | 10 +- src/pages/System/Statistics/HardwareInfo.tsx | 8 +- src/pages/System/Statistics/OnlineInfo.tsx | 6 +- src/pages/System/Statistics/SoftwareInfo.tsx | 8 +- src/pages/System/Statistics/StorageInfo.tsx | 10 +- src/pages/System/Statistics/index.tsx | 8 +- src/pages/System/Tools/Base.tsx | 29 +- src/pages/System/Tools/Category.tsx | 9 +- src/pages/System/Tools/Code.tsx | 6 +- src/pages/System/Tools/Execute.tsx | 3 +- src/pages/System/Tools/Template.tsx | 27 +- src/pages/System/Tools/index.tsx | 31 +- src/pages/System/User.tsx | 19 +- src/pages/System/index.tsx | 8 +- src/pages/SystemFramework.tsx | 100 ++--- src/pages/Tools/Create.tsx | 7 +- src/pages/Tools/Edit.tsx | 8 +- src/pages/Tools/Source.tsx | 8 +- src/pages/Tools/Store.tsx | 9 +- src/pages/Tools/User.tsx | 13 +- src/pages/Tools/View.tsx | 5 +- src/pages/Tools/index.tsx | 10 +- src/pages/ToolsFramework.tsx | 5 +- src/pages/User/index.tsx | 50 ++- src/pages/UserFramework.tsx | 6 +- src/util/common.tsx | 39 ++ 180 files changed, 3478 insertions(+), 3199 deletions(-) delete mode 100644 src/assets/css/base.less create mode 100644 src/assets/css/base.style.ts delete mode 100644 src/assets/css/common.less create mode 100644 src/assets/css/common.style.ts delete mode 100644 src/assets/css/components/common/card.module.less create mode 100644 src/assets/css/components/common/card.style.ts delete mode 100644 src/assets/css/components/common/fit-center.module.less create mode 100644 src/assets/css/components/common/fit-center.style.ts delete mode 100644 src/assets/css/components/common/fit-fullscreen.module.less create mode 100644 src/assets/css/components/common/fit-fullscreen.style.ts delete mode 100644 src/assets/css/components/common/flex-box.module.less create mode 100644 src/assets/css/components/common/flex-box.style.ts delete mode 100644 src/assets/css/components/common/fullscreen-loading-mask.module.less create mode 100644 src/assets/css/components/common/fullscreen-loading-mask.style.ts delete mode 100644 src/assets/css/components/common/hide-scrollbar.module.less create mode 100644 src/assets/css/components/common/hide-scrollbar.style.ts delete mode 100644 src/assets/css/components/common/indicator.module.less delete mode 100644 src/assets/css/components/common/loading-mask.module.less create mode 100644 src/assets/css/components/common/loading-mask.style.ts delete mode 100644 src/assets/css/components/common/sidebar.module.less create mode 100644 src/assets/css/components/common/sidebar/footer.style.ts create mode 100644 src/assets/css/components/common/sidebar/index.style.ts create mode 100644 src/assets/css/components/common/sidebar/item.style.ts create mode 100644 src/assets/css/components/common/sidebar/scroll.style.ts create mode 100644 src/assets/css/components/common/sidebar/separate.ts create mode 100644 src/assets/css/components/common/sidebar/submenu.style.ts delete mode 100644 src/assets/css/components/common/url-card.module.less create mode 100644 src/assets/css/components/common/url-card.style.ts delete mode 100644 src/assets/css/components/dnd/drag-handle.module.less create mode 100644 src/assets/css/components/dnd/drag-handle.style.ts delete mode 100644 src/assets/css/components/dnd/drop-mask.module.less create mode 100644 src/assets/css/components/dnd/drop-mask.style.ts create mode 100644 src/assets/css/components/dnd/sortable.style.ts delete mode 100644 src/assets/css/components/system/setting-card.module.less create mode 100644 src/assets/css/components/system/setting-card.style.ts delete mode 100644 src/assets/css/components/system/statistics-card.module.less create mode 100644 src/assets/css/components/system/statistics-card.style.ts delete mode 100644 src/assets/css/components/tools/load-more-card.module.less create mode 100644 src/assets/css/components/tools/load-more-card.style.ts delete mode 100644 src/assets/css/components/tools/repository-card.module.less create mode 100644 src/assets/css/components/tools/repository-card.style.ts delete mode 100644 src/assets/css/components/tools/store-card.module.less create mode 100644 src/assets/css/components/tools/store-card.style.ts delete mode 100644 src/assets/css/constants.less delete mode 100644 src/assets/css/mixins.less delete mode 100644 src/assets/css/pages/sign/forget.module.less create mode 100644 src/assets/css/pages/sign/forget.style.ts delete mode 100644 src/assets/css/pages/sign/index.module.less create mode 100644 src/assets/css/pages/sign/index.style.ts delete mode 100644 src/assets/css/pages/sign/sign-in.module.less create mode 100644 src/assets/css/pages/sign/sign-in.style.ts delete mode 100644 src/assets/css/pages/sign/sign-up.module.less create mode 100644 src/assets/css/pages/sign/sign-up.style.ts delete mode 100644 src/assets/css/pages/sign/verify.module.less create mode 100644 src/assets/css/pages/sign/verify.style.ts delete mode 100644 src/assets/css/pages/system-framework.module.less create mode 100644 src/assets/css/pages/system-framework.style.ts delete mode 100644 src/assets/css/pages/system/index.module.less create mode 100644 src/assets/css/pages/system/index.style.ts delete mode 100644 src/assets/css/pages/system/settings.module.less create mode 100644 src/assets/css/pages/system/settings/index.style.ts delete mode 100644 src/assets/css/pages/system/statistics.module.less create mode 100644 src/assets/css/pages/system/statistics/common.style.ts create mode 100644 src/assets/css/pages/system/statistics/index.style.ts delete mode 100644 src/assets/css/pages/system/tools/base.module.less create mode 100644 src/assets/css/pages/system/tools/base.style.ts delete mode 100644 src/assets/css/pages/system/tools/code.module.less create mode 100644 src/assets/css/pages/system/tools/code.style.ts delete mode 100644 src/assets/css/pages/system/tools/execute.module.less create mode 100644 src/assets/css/pages/system/tools/execute.style.ts delete mode 100644 src/assets/css/pages/system/tools/template.module.less create mode 100644 src/assets/css/pages/system/tools/template.style.ts delete mode 100644 src/assets/css/pages/tools-framework.module.less create mode 100644 src/assets/css/pages/tools-framework.style.ts delete mode 100644 src/assets/css/pages/tools/create.module.less create mode 100644 src/assets/css/pages/tools/create.style.ts delete mode 100644 src/assets/css/pages/tools/edit.module.less create mode 100644 src/assets/css/pages/tools/edit.style.ts delete mode 100644 src/assets/css/pages/tools/index.module.less create mode 100644 src/assets/css/pages/tools/index.style.ts delete mode 100644 src/assets/css/pages/tools/source.module.less create mode 100644 src/assets/css/pages/tools/source.style.ts delete mode 100644 src/assets/css/pages/tools/store.module.less create mode 100644 src/assets/css/pages/tools/store.style.ts delete mode 100644 src/assets/css/pages/tools/user.module.less create mode 100644 src/assets/css/pages/tools/user.style.ts delete mode 100644 src/assets/css/pages/tools/view.module.less create mode 100644 src/assets/css/pages/tools/view.style.ts delete mode 100644 src/assets/css/pages/user-framework.module.less create mode 100644 src/assets/css/pages/user-framework.style.ts delete mode 100644 src/assets/css/pages/user/index.module.less create mode 100644 src/assets/css/pages/user/index.style.ts delete mode 100644 src/components/Playground/CodeEditor/Editor/index.module.less create mode 100644 src/components/Playground/CodeEditor/Editor/index.style.ts delete mode 100644 src/components/Playground/CodeEditor/FileSelector/index.module.less create mode 100644 src/components/Playground/CodeEditor/FileSelector/index.style.ts delete mode 100644 src/components/Playground/CodeEditor/FileSelector/item.module.less create mode 100644 src/components/Playground/CodeEditor/FileSelector/item.style.ts delete mode 100644 src/components/Playground/CodeEditor/index.module.less create mode 100644 src/components/Playground/CodeEditor/index.style.ts delete mode 100644 src/components/Playground/Output/Preview/index.module.less create mode 100644 src/components/Playground/Output/Preview/index.style.ts delete mode 100644 src/components/Playground/Output/Preview/render.module.less create mode 100644 src/components/Playground/Output/Preview/render.style.ts delete mode 100644 src/components/Playground/Output/Transform/index.module.less create mode 100644 src/components/Playground/Output/Transform/index.style.ts delete mode 100644 src/components/Playground/index.module.less create mode 100644 src/components/Playground/index.style.ts delete mode 100644 src/components/common/Indicator.tsx diff --git a/package-lock.json b/package-lock.json index f69d854..0e42032 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@marsidev/react-turnstile": "^1.0.2", "@monaco-editor/react": "^4.6.0", "antd": "^5.21.4", + "antd-style": "^3.7.0", "axios": "1.7.4", "custom-protocol-check": "^1.4.0", "dayjs": "^1.11.13", @@ -179,7 +180,6 @@ }, "node_modules/@babel/code-frame": { "version": "7.25.7", - "dev": true, "license": "MIT", "dependencies": { "@babel/highlight": "^7.25.7", @@ -228,7 +228,6 @@ }, "node_modules/@babel/generator": { "version": "7.25.7", - "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.25.7", @@ -257,7 +256,6 @@ }, "node_modules/@babel/helper-module-imports": { "version": "7.25.7", - "dev": true, "license": "MIT", "dependencies": { "@babel/traverse": "^7.25.7", @@ -306,7 +304,6 @@ }, "node_modules/@babel/helper-string-parser": { "version": "7.25.7", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -314,7 +311,6 @@ }, "node_modules/@babel/helper-validator-identifier": { "version": "7.25.7", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -342,7 +338,6 @@ }, "node_modules/@babel/highlight": { "version": "7.25.7", - "dev": true, "license": "MIT", "dependencies": { "@babel/helper-validator-identifier": "^7.25.7", @@ -356,7 +351,6 @@ }, "node_modules/@babel/parser": { "version": "7.25.8", - "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.25.8" @@ -408,7 +402,6 @@ }, "node_modules/@babel/template": { "version": "7.25.7", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.25.7", @@ -421,7 +414,6 @@ }, "node_modules/@babel/traverse": { "version": "7.25.7", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.25.7", @@ -440,14 +432,12 @@ "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true, "engines": { "node": ">=4" } }, "node_modules/@babel/types": { "version": "7.25.8", - "dev": true, "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.25.7", @@ -510,14 +500,186 @@ "react": ">=16.8.0" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.12.0", + "resolved": "https://registry.npmmirror.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz", + "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==", + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/serialize": "^1.2.0", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": { + "version": "0.9.2", + "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.2.tgz", + "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==", + "license": "MIT" + }, + "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "license": "MIT" + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==", + "license": "MIT" + }, + "node_modules/@emotion/cache": { + "version": "11.13.1", + "resolved": "https://registry.npmmirror.com/@emotion/cache/-/cache-11.13.1.tgz", + "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.9.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/cache/node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==", + "license": "MIT" + }, + "node_modules/@emotion/css": { + "version": "11.13.4", + "resolved": "https://registry.npmmirror.com/@emotion/css/-/css-11.13.4.tgz", + "integrity": "sha512-CthbOD5EBw+iN0rfM96Tuv5kaZN4nxPyYDvGUs0bc7wZBBiU/0mse+l+0O9RshW2d+v5HH1cme+BAbLJ/3Folw==", + "license": "MIT", + "dependencies": { + "@emotion/babel-plugin": "^11.12.0", + "@emotion/cache": "^11.13.0", + "@emotion/serialize": "^1.3.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.0" + } + }, "node_modules/@emotion/hash": { "version": "0.8.0", "license": "MIT" }, + "node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmmirror.com/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, + "node_modules/@emotion/react": { + "version": "11.13.3", + "resolved": "https://registry.npmmirror.com/@emotion/react/-/react-11.13.3.tgz", + "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.12.0", + "@emotion/cache": "^11.13.0", + "@emotion/serialize": "^1.3.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.3.2", + "resolved": "https://registry.npmmirror.com/@emotion/serialize/-/serialize-1.3.2.tgz", + "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==", + "license": "MIT", + "dependencies": { + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/unitless": "^0.10.0", + "@emotion/utils": "^1.4.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/serialize/node_modules/@emotion/hash": { + "version": "0.9.2", + "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.2.tgz", + "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==", + "license": "MIT" + }, + "node_modules/@emotion/serialize/node_modules/@emotion/unitless": { + "version": "0.10.0", + "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.10.0.tgz", + "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==", + "license": "MIT" + }, + "node_modules/@emotion/sheet": { + "version": "1.4.0", + "resolved": "https://registry.npmmirror.com/@emotion/sheet/-/sheet-1.4.0.tgz", + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==", + "license": "MIT" + }, "node_modules/@emotion/unitless": { "version": "0.7.5", "license": "MIT" }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz", + "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.4.1", + "resolved": "https://registry.npmmirror.com/@emotion/utils/-/utils-1.4.1.tgz", + "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==", + "license": "MIT" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.4.0", + "resolved": "https://registry.npmmirror.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", + "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==", + "license": "MIT" + }, "node_modules/@esbuild/win32-x64": { "version": "0.21.5", "cpu": [ @@ -770,7 +932,6 @@ }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.5", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/set-array": "^1.2.1", @@ -783,7 +944,6 @@ }, "node_modules/@jridgewell/resolve-uri": { "version": "3.1.2", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -791,7 +951,6 @@ }, "node_modules/@jridgewell/set-array": { "version": "1.2.1", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -799,12 +958,10 @@ }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.5.0", - "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -1382,6 +1539,12 @@ "undici-types": "~6.19.2" } }, + "node_modules/@types/parse-json": { + "version": "4.0.2", + "resolved": "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.2.tgz", + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", + "license": "MIT" + }, "node_modules/@types/prop-types": { "version": "15.7.12", "dev": true, @@ -1690,7 +1853,6 @@ }, "node_modules/ansi-styles": { "version": "3.2.1", - "dev": true, "license": "MIT", "dependencies": { "color-convert": "^1.9.0" @@ -1762,6 +1924,26 @@ "react-dom": ">=16.9.0" } }, + "node_modules/antd-style": { + "version": "3.7.0", + "resolved": "https://registry.npmmirror.com/antd-style/-/antd-style-3.7.0.tgz", + "integrity": "sha512-u0KFUzCLrvzRmcJz7jz23KeM95df6TzJ9q5mqIOrF8e9jWj+um49APLtMQjEA8HmPeGQXeGZCRVS3fTKHaZzEg==", + "license": "MIT", + "dependencies": { + "@ant-design/cssinjs": "^1.21.1", + "@babel/runtime": "^7.24.1", + "@emotion/cache": "^11.11.0", + "@emotion/css": "^11.11.2", + "@emotion/react": "^11.11.4", + "@emotion/serialize": "^1.1.3", + "@emotion/utils": "^1.2.1", + "use-merge-value": "^1.2.0" + }, + "peerDependencies": { + "antd": ">=5.8.1", + "react": ">=18" + } + }, "node_modules/argparse": { "version": "2.0.1", "dev": true, @@ -1784,6 +1966,37 @@ "proxy-from-env": "^1.1.0" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmmirror.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, + "node_modules/babel-plugin-macros/node_modules/cosmiconfig": { + "version": "7.1.0", + "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz", + "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "license": "MIT", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "dev": true, @@ -1841,7 +2054,6 @@ }, "node_modules/callsites": { "version": "3.1.0", - "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -1879,7 +2091,6 @@ }, "node_modules/chalk": { "version": "2.4.2", - "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^3.2.1", @@ -1919,7 +2130,6 @@ }, "node_modules/color-convert": { "version": "1.9.3", - "dev": true, "license": "MIT", "dependencies": { "color-name": "1.1.3" @@ -1927,7 +2137,6 @@ }, "node_modules/color-name": { "version": "1.1.3", - "dev": true, "license": "MIT" }, "node_modules/combined-stream": { @@ -2054,7 +2263,6 @@ }, "node_modules/debug": { "version": "4.3.7", - "dev": true, "license": "MIT", "dependencies": { "ms": "^2.1.3" @@ -2151,7 +2359,6 @@ }, "node_modules/error-ex": { "version": "1.3.2", - "dev": true, "license": "MIT", "dependencies": { "is-arrayish": "^0.2.1" @@ -2214,7 +2421,6 @@ }, "node_modules/escape-string-regexp": { "version": "1.0.5", - "dev": true, "license": "MIT", "engines": { "node": ">=0.8.0" @@ -2625,6 +2831,12 @@ "node": ">=8" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", + "license": "MIT" + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -2676,6 +2888,15 @@ "node": ">= 6" } }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/gensync": { "version": "1.0.0-beta.2", "dev": true, @@ -2723,12 +2944,38 @@ }, "node_modules/has-flag": { "version": "3.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=4" } }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "license": "BSD-3-Clause", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" + }, "node_modules/html-encoding-sniffer": { "version": "4.0.0", "dev": true, @@ -2809,7 +3056,6 @@ }, "node_modules/import-fresh": { "version": "3.3.0", - "dev": true, "license": "MIT", "dependencies": { "parent-module": "^1.0.0", @@ -2832,9 +3078,23 @@ }, "node_modules/is-arrayish": { "version": "0.2.1", - "dev": true, "license": "MIT" }, + "node_modules/is-core-module": { + "version": "2.15.1", + "resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.15.1.tgz", + "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==", + "license": "MIT", + "dependencies": { + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "dev": true, @@ -2939,7 +3199,6 @@ }, "node_modules/jsesc": { "version": "3.0.2", - "dev": true, "license": "MIT", "bin": { "jsesc": "bin/jsesc" @@ -2955,7 +3214,6 @@ }, "node_modules/json-parse-even-better-errors": { "version": "2.3.1", - "dev": true, "license": "MIT" }, "node_modules/json-schema-traverse": { @@ -3056,7 +3314,6 @@ }, "node_modules/lines-and-columns": { "version": "1.2.4", - "dev": true, "license": "MIT" }, "node_modules/local-pkg": { @@ -3264,7 +3521,6 @@ }, "node_modules/ms": { "version": "2.1.3", - "dev": true, "license": "MIT" }, "node_modules/nanoid": { @@ -3394,7 +3650,6 @@ }, "node_modules/parent-module": { "version": "1.0.1", - "dev": true, "license": "MIT", "dependencies": { "callsites": "^3.0.0" @@ -3405,7 +3660,6 @@ }, "node_modules/parse-json": { "version": "5.2.0", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.0.0", @@ -3457,9 +3711,14 @@ "node": ">=8" } }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "license": "MIT" + }, "node_modules/path-type": { "version": "4.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -3472,7 +3731,6 @@ }, "node_modules/picocolors": { "version": "1.1.0", - "dev": true, "license": "ISC" }, "node_modules/picomatch": { @@ -4271,9 +4529,25 @@ "version": "1.5.1", "license": "MIT" }, + "node_modules/resolve": { + "version": "1.22.8", + "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "license": "MIT", + "dependencies": { + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/resolve-from": { "version": "4.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -4512,7 +4786,6 @@ }, "node_modules/supports-color": { "version": "5.5.0", - "dev": true, "license": "MIT", "dependencies": { "has-flag": "^3.0.0" @@ -4521,6 +4794,18 @@ "node": ">=4" } }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/svg-parser": { "version": "2.0.4", "dev": true, @@ -4567,7 +4852,6 @@ }, "node_modules/to-fast-properties": { "version": "2.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -4874,6 +5158,15 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-merge-value": { + "version": "1.2.0", + "resolved": "https://registry.npmmirror.com/use-merge-value/-/use-merge-value-1.2.0.tgz", + "integrity": "sha512-DXgG0kkgJN45TcyoXL49vJnn55LehnrmoHc7MbKi+QDBvr8dsesqws8UlyIWGHMR+JXgxc1nvY+jDGMlycsUcw==", + "license": "MIT", + "peerDependencies": { + "react": ">= 16.x" + } + }, "node_modules/vanilla-tilt": { "version": "1.8.1", "license": "MIT" @@ -5053,6 +5346,15 @@ "dev": true, "license": "ISC" }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmmirror.com/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index 9a415b4..111c091 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@marsidev/react-turnstile": "^1.0.2", "@monaco-editor/react": "^4.6.0", "antd": "^5.21.4", + "antd-style": "^3.7.0", "axios": "1.7.4", "custom-protocol-check": "^1.4.0", "dayjs": "^1.11.13", diff --git a/src/App.tsx b/src/App.tsx index bd05da7..879fec0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,27 +1,65 @@ +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 } from '@/constants/common.constants' import { getRouter } from '@/router' import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask' -export const AppContext = createContext<{ refreshRouter: () => void }>({ - refreshRouter: () => undefined +export const AppContext = createContext({ + refreshRouter: () => {}, + isDarkMode: false }) const App = () => { const [routerState, setRouterState] = useState(getRouter) + const [isDarkMode, setIsDarkMode] = useState(false) + + useEffect(() => { + const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)') + setIsDarkMode(darkThemeMq.matches) + const listener = (ev: MediaQueryListEvent) => { + setIsDarkMode(ev.matches) + } + darkThemeMq.addEventListener('change', listener) + + return () => { + darkThemeMq.removeEventListener('change', listener) + } + }, []) return ( - <> + + + { setRouterState(getRouter()) - } + }, + isDarkMode }} > }> - + ) } diff --git a/src/assets/css/base.less b/src/assets/css/base.less deleted file mode 100644 index 9644dde..0000000 --- a/src/assets/css/base.less +++ /dev/null @@ -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; -} diff --git a/src/assets/css/base.style.ts b/src/assets/css/base.style.ts new file mode 100644 index 0000000..46f2fc2 --- /dev/null +++ b/src/assets/css/base.style.ts @@ -0,0 +1,32 @@ +import { createGlobalStyle } from 'antd-style' + +export default createGlobalStyle(() => ({ + '*': { margin: 0, padding: 0, boxSizing: 'border-box' }, + html: { scrollBehavior: 'smooth' }, + 'em, i': { fontStyle: 'normal' }, + li: { listStyle: 'none' }, + img: { border: 0, verticalAlign: 'middle' }, + button: { cursor: 'pointer' }, + a: { color: '#666', textDecoration: 'none' }, + '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 } +})) diff --git a/src/assets/css/common.less b/src/assets/css/common.less deleted file mode 100644 index 025314e..0000000 --- a/src/assets/css/common.less +++ /dev/null @@ -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; -} diff --git a/src/assets/css/common.style.ts b/src/assets/css/common.style.ts new file mode 100644 index 0000000..fc13194 --- /dev/null +++ b/src/assets/css/common.style.ts @@ -0,0 +1,43 @@ +import { createGlobalStyle } from 'antd-style' + +export default createGlobalStyle(() => ({ + '.center-box': { + display: 'flex', + justifyContent: 'center', + alignItems: 'center' + }, + '.vertical-center-box': { display: 'flex', alignItems: 'center' }, + '.horizontal-center-box': { display: 'flex', justifyContent: 'center' }, + '.icon-size-xs': { + width: 16, + height: 16, + '> use': { width: 16, height: 16 } + }, + '.icon-size-sm': { + width: 20, + height: 20, + '> use': { width: 20, height: 20 } + }, + '.icon-size-md': { + width: 24, + height: 24, + '> use': { width: 24, height: 24 } + }, + '.icon-size-lg': { + width: 32, + height: 32, + '> use': { width: 32, height: 32 } + }, + '.icon-size-xl': { + width: 64, + height: 64, + '> use': { width: 64, height: 64 } + }, + '.icon-size-menu': { + width: 23, + height: 23, + '> use': { width: 23, height: 23 } + }, + '.flex-horizontal': { display: 'flex', flexDirection: 'row' }, + '.flex-vertical': { display: 'flex', flexDirection: 'column' } +})) diff --git a/src/assets/css/components/common/card.module.less b/src/assets/css/components/common/card.module.less deleted file mode 100644 index a99446b..0000000 --- a/src/assets/css/components/common/card.module.less +++ /dev/null @@ -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); -} diff --git a/src/assets/css/components/common/card.style.ts b/src/assets/css/components/common/card.style.ts new file mode 100644 index 0000000..fded40b --- /dev/null +++ b/src/assets/css/components/common/card.style.ts @@ -0,0 +1,10 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + cardBox: { + backgroundColor: token.colorBgContainer, + borderRadius: token.borderRadiusLG, + overflow: 'hidden', + boxShadow: token.boxShadowTertiary + } +})) diff --git a/src/assets/css/components/common/fit-center.module.less b/src/assets/css/components/common/fit-center.module.less deleted file mode 100644 index 4b43ffb..0000000 --- a/src/assets/css/components/common/fit-center.module.less +++ /dev/null @@ -1,7 +0,0 @@ -.fitCenter { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; -} diff --git a/src/assets/css/components/common/fit-center.style.ts b/src/assets/css/components/common/fit-center.style.ts new file mode 100644 index 0000000..6309261 --- /dev/null +++ b/src/assets/css/components/common/fit-center.style.ts @@ -0,0 +1,11 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + fitCenter: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: '100%' + } +})) diff --git a/src/assets/css/components/common/fit-fullscreen.module.less b/src/assets/css/components/common/fit-fullscreen.module.less deleted file mode 100644 index 3a21936..0000000 --- a/src/assets/css/components/common/fit-fullscreen.module.less +++ /dev/null @@ -1,5 +0,0 @@ -.fitFullscreen { - position: relative; - width: 100%; - height: 100vh; -} diff --git a/src/assets/css/components/common/fit-fullscreen.style.ts b/src/assets/css/components/common/fit-fullscreen.style.ts new file mode 100644 index 0000000..c8b1b2e --- /dev/null +++ b/src/assets/css/components/common/fit-fullscreen.style.ts @@ -0,0 +1,9 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + fitFullscreen: { + position: 'relative', + width: '100%', + height: '100vh' + } +})) diff --git a/src/assets/css/components/common/flex-box.module.less b/src/assets/css/components/common/flex-box.module.less deleted file mode 100644 index b92156e..0000000 --- a/src/assets/css/components/common/flex-box.module.less +++ /dev/null @@ -1,5 +0,0 @@ -.flexBox { - > * { - flex: 1; - } -} diff --git a/src/assets/css/components/common/flex-box.style.ts b/src/assets/css/components/common/flex-box.style.ts new file mode 100644 index 0000000..6d143dc --- /dev/null +++ b/src/assets/css/components/common/flex-box.style.ts @@ -0,0 +1,9 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + flexBox: { + '> *': { + flex: 1 + } + } +})) diff --git a/src/assets/css/components/common/fullscreen-loading-mask.module.less b/src/assets/css/components/common/fullscreen-loading-mask.module.less deleted file mode 100644 index 5480c7c..0000000 --- a/src/assets/css/components/common/fullscreen-loading-mask.module.less +++ /dev/null @@ -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); -} diff --git a/src/assets/css/components/common/fullscreen-loading-mask.style.ts b/src/assets/css/components/common/fullscreen-loading-mask.style.ts new file mode 100644 index 0000000..646756d --- /dev/null +++ b/src/assets/css/components/common/fullscreen-loading-mask.style.ts @@ -0,0 +1,14 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + fullscreenLoadingMask: { + position: 'absolute', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: '100%', + zIndex: 100, + backgroundColor: token.colorBgContainer + } +})) diff --git a/src/assets/css/components/common/hide-scrollbar.module.less b/src/assets/css/components/common/hide-scrollbar.module.less deleted file mode 100644 index 04f8982..0000000 --- a/src/assets/css/components/common/hide-scrollbar.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/components/common/hide-scrollbar.style.ts b/src/assets/css/components/common/hide-scrollbar.style.ts new file mode 100644 index 0000000..d31eb4d --- /dev/null +++ b/src/assets/css/components/common/hide-scrollbar.style.ts @@ -0,0 +1,84 @@ +import { createStyles, keyframes } from 'antd-style' + +const fadeOut = keyframes` + 0% { + opacity: 0.5; + } + 100% { + opacity: 0; + } +` + +export default createStyles(({ css, cx, token }) => { + const scrollbarBox = cx(css` + position: relative; + width: 100%; + height: 100%; + border-radius: ${token.borderRadiusLG}; + overflow: hidden; + `) + + return { + hideScrollbarMask: { + position: 'relative', + width: '100%', + height: '100%', + overflow: 'hidden', + '::-webkit-scrollbar': { + display: 'none' + } + }, + hideScrollbarSelection: { + position: 'relative', + overflow: 'scroll', + scrollbarWidth: 'none', + msOverflowStyle: 'none' + }, + hideScrollbarContent: { + minWidth: '100%' + }, + scrollbar: { + position: 'absolute', + zIndex: 1000, + opacity: 0.5, + touchAction: 'none' + }, + scrollbarBox, + scrollbarBoxBlock: { + position: 'absolute', + width: '100%', + height: '100%', + borderRadius: token.borderRadiusLG, + backgroundColor: token.colorTextSecondary, + transition: 'background-color 0.2s', + ':hover': { + backgroundColor: token.colorTextLabel + } + }, + verticalScrollbar: css` + height: 100%; + left: 100%; + top: 0; + transform: translateX(-100%); + + .${scrollbarBox} { + width: ${token.sizeXXS}px; + } + `, + horizontalScrollbar: css` + width: 100%; + left: 0; + top: 100%; + transform: translateY(-100%); + + .${scrollbarBox} { + height: ${token.sizeXXS}px; + } + `, + hide: { + display: 'block', + opacity: 0, + animation: `${fadeOut} 0.4s linear` + } + } +}) diff --git a/src/assets/css/components/common/indicator.module.less b/src/assets/css/components/common/indicator.module.less deleted file mode 100644 index 6723f9e..0000000 --- a/src/assets/css/components/common/indicator.module.less +++ /dev/null @@ -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; - } -} diff --git a/src/assets/css/components/common/loading-mask.module.less b/src/assets/css/components/common/loading-mask.module.less deleted file mode 100644 index da9e969..0000000 --- a/src/assets/css/components/common/loading-mask.module.less +++ /dev/null @@ -1,8 +0,0 @@ -.loadingMask { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - z-index: 100; -} diff --git a/src/assets/css/components/common/loading-mask.style.ts b/src/assets/css/components/common/loading-mask.style.ts new file mode 100644 index 0000000..b07324a --- /dev/null +++ b/src/assets/css/components/common/loading-mask.style.ts @@ -0,0 +1,12 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + loadingMask: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: '100%', + zIndex: 100 + } +})) diff --git a/src/assets/css/components/common/sidebar.module.less b/src/assets/css/components/common/sidebar.module.less deleted file mode 100644 index 97d470f..0000000 --- a/src/assets/css/components/common/sidebar.module.less +++ /dev/null @@ -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; - } - }); - } - } - } -} diff --git a/src/assets/css/components/common/sidebar/footer.style.ts b/src/assets/css/components/common/sidebar/footer.style.ts new file mode 100644 index 0000000..5315a80 --- /dev/null +++ b/src/assets/css/components/common/sidebar/footer.style.ts @@ -0,0 +1,110 @@ +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` + display: none; + position: absolute; + padding-left: ${token.paddingXS}px; + left: 100%; + z-index: 1000; + box-shadow: 5px 5px 15px 0 ${token.colorBorder}; + `) + + 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} { + display: block; + animation: ${slideIn} 0.3s ease; + } + `, + + 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 + }, + + 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` + } + } +}) diff --git a/src/assets/css/components/common/sidebar/index.style.ts b/src/assets/css/components/common/sidebar/index.style.ts new file mode 100644 index 0000000..52736c3 --- /dev/null +++ b/src/assets/css/components/common/sidebar/index.style.ts @@ -0,0 +1,85 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ cx, css, token }) => { + const title = cx(css` + display: flex; + align-items: center; + font-weight: bold; + padding: ${token.paddingXS}px ${token.paddingSM}px; + color: ${token.colorPrimary}; + overflow: hidden; + `) + + const titleIcon = cx(css` + display: flex; + justify-content: center; + align-items: center; + padding: ${token.paddingXS}px; + width: 40px; + height: 40px; + font-size: ${token.sizeMD}px; + border-radius: ${token.borderRadiusLG}px; + cursor: pointer; + + span { + transform: rotateZ(180deg); + transition: all 0.3s; + } + + &:hover { + background-color: ${token.colorBgLayout}; + } + `) + + const titleText = cx(css` + flex: 1; + font-size: ${token.fontSizeHeading3}px; + text-align: center; + letter-spacing: ${token.sizeXS}px; + `) + + return { + sidebar: { + display: 'flex', + flexDirection: 'column', + height: '100%', + userSelect: 'none', + transition: 'all .3s', + whiteSpace: 'nowrap' + }, + + title, + + titleIcon, + + titleText, + + content: { + display: 'flex', + minHeight: 0, + flexDirection: 'column', + flex: 1, + + 'ul > li, ul > div > li': { + padding: `${token.paddingXXS}px ${token.paddingSM}px` + } + }, + + collapse: cx(css` + width: ${token.sizeXL * 2}px !important; + + .${title} { + .${titleIcon} { + span { + transform: rotateZ(360deg); + transition: all 0.3s; + } + } + + .${titleText} { + display: none; + } + } + `) + } +}) diff --git a/src/assets/css/components/common/sidebar/item.style.ts b/src/assets/css/components/common/sidebar/item.style.ts new file mode 100644 index 0000000..6dc6ee2 --- /dev/null +++ b/src/assets/css/components/common/sidebar/item.style.ts @@ -0,0 +1,83 @@ +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, + 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' + } + } +}) diff --git a/src/assets/css/components/common/sidebar/scroll.style.ts b/src/assets/css/components/common/sidebar/scroll.style.ts new file mode 100644 index 0000000..919e060 --- /dev/null +++ b/src/assets/css/components/common/sidebar/scroll.style.ts @@ -0,0 +1,9 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + scroll: { + minHeight: 0, + flex: 1, + width: '100%' + } +})) diff --git a/src/assets/css/components/common/sidebar/separate.ts b/src/assets/css/components/common/sidebar/separate.ts new file mode 100644 index 0000000..e4fc99c --- /dev/null +++ b/src/assets/css/components/common/sidebar/separate.ts @@ -0,0 +1,9 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + separate: { + height: 0, + margin: `${token.marginSM}px ${token.marginXS}px`, + border: `1px solid ${token.colorBorder}` + } +})) diff --git a/src/assets/css/components/common/sidebar/submenu.style.ts b/src/assets/css/components/common/sidebar/submenu.style.ts new file mode 100644 index 0000000..39adc6a --- /dev/null +++ b/src/assets/css/components/common/sidebar/submenu.style.ts @@ -0,0 +1,50 @@ +import { createStyles, keyframes } from 'antd-style' + +export default createStyles(({ token }) => { + const slideIn = keyframes` + 0% { + transform: translateX(-${token.sizeSM}px); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } + ` + + const slideOut = keyframes` + 0% { + transform: translateX(0); + opacity: 1; + } + 100% { + transform: translateX(-${token.sizeSM}px); + opacity: 0; + } + ` + + return { + submenu: { + visibility: 'hidden', + position: 'fixed', + paddingLeft: token.paddingXS, + zIndex: 10000, + animation: `${slideOut} 0.1s ease forwards` + }, + + hoveredSubmenu: { + visibility: 'visible', + animation: `${slideIn} 0.3s ease` + }, + + content: { + display: 'flex', + flexDirection: 'column', + gap: token.sizeXXS, + padding: token.paddingSM, + backgroundColor: token.colorBgContainer, + borderRadius: token.borderRadiusLG, + boxShadow: token.boxShadow + } + } +}) diff --git a/src/assets/css/components/common/url-card.module.less b/src/assets/css/components/common/url-card.module.less deleted file mode 100644 index a17fb12..0000000 --- a/src/assets/css/components/common/url-card.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/components/common/url-card.style.ts b/src/assets/css/components/common/url-card.style.ts new file mode 100644 index 0000000..027b075 --- /dev/null +++ b/src/assets/css/components/common/url-card.style.ts @@ -0,0 +1,24 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + width: 180, + height: 290, + textAlign: 'center', + gap: token.sizeXXL, + cursor: 'pointer', + '> *': { + flex: '0 0 auto', + display: 'block' + } + }, + icon: { + marginTop: 80, + color: token.colorPrimary, + fontSize: token.sizeXXL + }, + text: { + fontWeight: 'bolder', + fontSize: token.fontSizeXL + } +})) diff --git a/src/assets/css/components/dnd/drag-handle.module.less b/src/assets/css/components/dnd/drag-handle.module.less deleted file mode 100644 index 01fe55a..0000000 --- a/src/assets/css/components/dnd/drag-handle.module.less +++ /dev/null @@ -1,5 +0,0 @@ -.root { - background-color: transparent; - color: unset; - cursor: grab; -} diff --git a/src/assets/css/components/dnd/drag-handle.style.ts b/src/assets/css/components/dnd/drag-handle.style.ts new file mode 100644 index 0000000..463bff9 --- /dev/null +++ b/src/assets/css/components/dnd/drag-handle.style.ts @@ -0,0 +1,9 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + root: { + backgroundColor: 'transparent', + color: 'unset', + cursor: 'grab' + } +})) diff --git a/src/assets/css/components/dnd/drop-mask.module.less b/src/assets/css/components/dnd/drop-mask.module.less deleted file mode 100644 index dc6ab81..0000000 --- a/src/assets/css/components/dnd/drop-mask.module.less +++ /dev/null @@ -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; - } -} diff --git a/src/assets/css/components/dnd/drop-mask.style.ts b/src/assets/css/components/dnd/drop-mask.style.ts new file mode 100644 index 0000000..5a25874 --- /dev/null +++ b/src/assets/css/components/dnd/drop-mask.style.ts @@ -0,0 +1,24 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + position: 'absolute', + left: 0, + top: 0, + width: '100%', + height: '100%', + padding: `0 ${token.paddingSM}px ${token.paddingSM}px`, + backgroundColor: token.colorBgContainer + }, + + dropMaskBorder: { + display: 'flex', + width: '100%', + height: '100%', + justifyContent: 'center', + alignItems: 'center', + border: `2px dashed ${token.colorBorder}`, + borderRadius: token.borderRadiusLG, + fontSize: token.fontSizeHeading3 + } +})) diff --git a/src/assets/css/components/dnd/sortable.style.ts b/src/assets/css/components/dnd/sortable.style.ts new file mode 100644 index 0000000..1176eb5 --- /dev/null +++ b/src/assets/css/components/dnd/sortable.style.ts @@ -0,0 +1,15 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + delete: { + '.dnd-delete-mask': { + border: `1px dashed ${token.colorErrorHover}`, + filter: `drop-shadow(1000px 0 0 ${token.colorErrorHover})`, + transform: 'translate(-1000px)', + + '> a': { + backgroundColor: 'transparent !important' + } + } + } +})) diff --git a/src/assets/css/components/system/setting-card.module.less b/src/assets/css/components/system/setting-card.module.less deleted file mode 100644 index 0aa2095..0000000 --- a/src/assets/css/components/system/setting-card.module.less +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/assets/css/components/system/setting-card.style.ts b/src/assets/css/components/system/setting-card.style.ts new file mode 100644 index 0000000..46422c2 --- /dev/null +++ b/src/assets/css/components/system/setting-card.style.ts @@ -0,0 +1,32 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + padding: token.paddingLG, + gap: token.paddingLG, + color: token.colorPrimary + }, + + head: { + alignItems: 'center', + gap: token.sizeXXS, + + '>:nth-child(n+3)': { + flex: '0 0 auto' + } + }, + + icon: { + fontSize: token.sizeLG, + flex: '0 0 auto' + }, + + title: { + display: 'flex', + fontSize: token.fontSize + }, + + btSave: { + color: token.colorPrimary + } +})) diff --git a/src/assets/css/components/system/statistics-card.module.less b/src/assets/css/components/system/statistics-card.module.less deleted file mode 100644 index 82cae27..0000000 --- a/src/assets/css/components/system/statistics-card.module.less +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/assets/css/components/system/statistics-card.style.ts b/src/assets/css/components/system/statistics-card.style.ts new file mode 100644 index 0000000..70e9866 --- /dev/null +++ b/src/assets/css/components/system/statistics-card.style.ts @@ -0,0 +1,28 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + padding: token.paddingLG, + gap: token.paddingLG + }, + + head: { + alignItems: 'center', + gap: token.sizeXXS, + color: token.colorPrimary, + + '>:nth-child(n+3)': { + flex: '0 0 auto' + } + }, + + icon: { + fontSize: token.sizeLG, + flex: '0 0 auto' + }, + + title: { + display: 'flex', + fontSize: token.fontSize + } +})) diff --git a/src/assets/css/components/tools/load-more-card.module.less b/src/assets/css/components/tools/load-more-card.module.less deleted file mode 100644 index a9541d9..0000000 --- a/src/assets/css/components/tools/load-more-card.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/components/tools/load-more-card.style.ts b/src/assets/css/components/tools/load-more-card.style.ts new file mode 100644 index 0000000..9fb2dcf --- /dev/null +++ b/src/assets/css/components/tools/load-more-card.style.ts @@ -0,0 +1,26 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + width: '100%', + height: '100%', + textAlign: 'center', + alignItems: 'center', + justifyContent: 'center', + cursor: 'pointer', + + '>*': { + flex: '0 0 auto' + } + }, + + icon: { + fontSize: token.sizeXXL, + color: token.colorPrimary + }, + + text: { + fontSize: token.fontSizeXL, + fontWeight: 'bolder' + } +})) diff --git a/src/assets/css/components/tools/repository-card.module.less b/src/assets/css/components/tools/repository-card.module.less deleted file mode 100644 index 6d03231..0000000 --- a/src/assets/css/components/tools/repository-card.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/components/tools/repository-card.style.ts b/src/assets/css/components/tools/repository-card.style.ts new file mode 100644 index 0000000..51aa70b --- /dev/null +++ b/src/assets/css/components/tools/repository-card.style.ts @@ -0,0 +1,108 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ cx, css, token }) => { + const info = cx(css` + padding: 0 ${token.paddingSM}px; + transform: translateY(${token.sizeXL}px); + transition: all 0.1s ease; + `) + + const edit = cx(css` + > * { + > :first-child { + flex: 1; + } + } + `) + + const toolDesc = cx(css` + position: relative; + margin-top: ${token.marginXS}px; + color: ${token.colorTextDescription}; + transition: all 0.1s ease; + `) + + const operation = cx(css` + display: flex; + position: absolute; + flex: 1; + gap: ${token.sizeXXS}px; + bottom: ${token.sizeLG}px; + padding: 0 ${token.paddingLG}px; + width: 100%; + flex-direction: column; + opacity: 0; + + > *, + .${edit} > * { + width: 100%; + } + `) + + return { + root: css` + width: 180px; + height: 290px; + text-align: center; + gap: ${token.sizeSM}px; + + > * { + flex: 0 0 auto; + } + + &:hover { + .${info} { + transform: translateY(-${token.sizeXXS}px); + transition: all 0.2s ease; + } + + .${toolDesc} { + opacity: 0; + } + + .${operation} { + opacity: 1; + transition: all 0.4s ease; + } + } + `, + + header: { + display: 'flex', + width: '100%', + padding: token.paddingSM, + gap: token.paddingXS, + + '> :first-child': { + width: 0, + flex: 1 + }, + + '> :not(:first-child)': { + fontSize: token.size + } + }, + + icon: { + img: { + width: token.sizeXL * 2 + } + }, + + info, + + toolName: { + fontSize: token.fontSizeXL, + fontWeight: 'bolder', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' + }, + + toolDesc, + + operation, + + edit + } +}) diff --git a/src/assets/css/components/tools/store-card.module.less b/src/assets/css/components/tools/store-card.module.less deleted file mode 100644 index 672d6f5..0000000 --- a/src/assets/css/components/tools/store-card.module.less +++ /dev/null @@ -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; -} diff --git a/src/assets/css/components/tools/store-card.style.ts b/src/assets/css/components/tools/store-card.style.ts new file mode 100644 index 0000000..95e0e08 --- /dev/null +++ b/src/assets/css/components/tools/store-card.style.ts @@ -0,0 +1,110 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ cx, css, token }) => { + const version = cx(css` + width: 0; + transition: all 0.2s; + `) + + const operation = cx(css` + display: flex; + font-size: 1.6em; + gap: ${token.sizeXXS}px; + opacity: 0; + transition: all 0.2s; + z-index: 100; + + > *:hover { + color: ${token.colorIconHover}; + } + `) + + return { + root: css` + width: 180px; + height: 290px; + text-align: center; + gap: ${token.sizeSM}px; + cursor: pointer; + + > * { + flex: 0 0 auto; + } + + &:hover { + .${version} { + opacity: 0; + } + + .${operation} { + opacity: 1; + } + } + `, + + header: { + display: 'flex', + width: '100%', + padding: token.paddingSM, + justifyContent: 'space-between' + }, + + version, + + operation, + + icon: { + img: { + width: token.sizeXL * 2 + } + }, + + info: { + padding: `0 ${token.paddingSM}px` + }, + + toolName: { + fontSize: token.fontSizeXL, + fontWeight: 'bolder', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' + }, + + toolDesc: { + marginTop: token.marginXS, + color: token.colorTextDescription + }, + + author: { + display: 'flex', + marginTop: 'auto', + paddingBottom: token.paddingSM, + flexDirection: 'row', + justifyContent: 'center', + gap: token.sizeXS, + + '&:hover': { + color: token.colorPrimary + } + }, + + avatar: { + '> *': { + width: token.sizeLG, + height: token.sizeLG + } + }, + + authorName: { + display: 'flex', + alignItems: 'center' + }, + + androidQrcode: { + alignItems: 'center', + transform: 'translateX(-16px)', + gap: token.sizeMD + } + } +}) diff --git a/src/assets/css/constants.less b/src/assets/css/constants.less deleted file mode 100644 index a34f019..0000000 --- a/src/assets/css/constants.less +++ /dev/null @@ -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; diff --git a/src/assets/css/mixins.less b/src/assets/css/mixins.less deleted file mode 100644 index a98a3c8..0000000 --- a/src/assets/css/mixins.less +++ /dev/null @@ -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(); - } -} diff --git a/src/assets/css/pages/sign/forget.module.less b/src/assets/css/pages/sign/forget.module.less deleted file mode 100644 index 585fe3f..0000000 --- a/src/assets/css/pages/sign/forget.module.less +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/assets/css/pages/sign/forget.style.ts b/src/assets/css/pages/sign/forget.style.ts new file mode 100644 index 0000000..21205bd --- /dev/null +++ b/src/assets/css/pages/sign/forget.style.ts @@ -0,0 +1,35 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + title: { + marginBottom: token.marginMD, + transform: `translateY(-${token.sizeSM}px)` + }, + + primary: { + fontSize: token.fontSizeHeading3, + fontWeight: 'bolder', + color: token.colorPrimary + }, + + secondary: { + fontSize: token.fontSize + }, + + form: { + width: 300, + fontSize: token.fontSize + }, + + retry: { + marginBottom: token.margin + }, + + success: { + marginBottom: token.margin + }, + + footer: { + textAlign: 'center' + } +})) diff --git a/src/assets/css/pages/sign/index.module.less b/src/assets/css/pages/sign/index.module.less deleted file mode 100644 index 26a78ab..0000000 --- a/src/assets/css/pages/sign/index.module.less +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/assets/css/pages/sign/index.style.ts b/src/assets/css/pages/sign/index.style.ts new file mode 100644 index 0000000..2a80b81 --- /dev/null +++ b/src/assets/css/pages/sign/index.style.ts @@ -0,0 +1,82 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ cx, css, token }) => { + const cover = cx(css` + position: absolute; + height: 100%; + width: 50%; + background-color: ${token.colorBgLayout}; + transition: all 0.8s ease; + `) + + const ball = cx(css` + position: absolute; + width: ${token.sizeXL * 4}px; + height: ${token.sizeXL * 4}px; + background-color: ${token.colorPrimary}; + border-radius: 50%; + bottom: 0; + left: 50%; + transform: translateX(-50%) translateY(50%); + `) + + return { + root: { + backgroundColor: token.colorBorderSecondary, + userSelect: 'none', + + a: { + fontWeight: 'bold' + } + }, + + signBox: { + position: 'relative', + backgroundColor: token.colorBgContainer, + width: 900, + height: 600, + overflow: 'hidden', + borderRadius: token.borderRadiusLG + }, + + switch: css` + .${cover} { + transform: translateX(100%); + transition: all 0.8s ease; + } + `, + + side: { + opacity: 1, + transition: 'all 1s ease', + + '> *': { + width: '100%', + height: '100%' + } + }, + + hidden: { + opacity: 0 + }, + + cover, + + ballBox: { + position: 'relative', + overflow: 'hidden' + }, + + ball, + + mask: css` + transform: rotateZ(180deg); + filter: blur(${token.sizeSM}px); + + .${ball} { + width: 140px; + height: 140px; + } + ` + } +}) diff --git a/src/assets/css/pages/sign/sign-in.module.less b/src/assets/css/pages/sign/sign-in.module.less deleted file mode 100644 index 47b8c60..0000000 --- a/src/assets/css/pages/sign/sign-in.module.less +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/assets/css/pages/sign/sign-in.style.ts b/src/assets/css/pages/sign/sign-in.style.ts new file mode 100644 index 0000000..d8c9b44 --- /dev/null +++ b/src/assets/css/pages/sign/sign-in.style.ts @@ -0,0 +1,36 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + title: { + marginBottom: token.marginMD, + transform: `translateY(-${token.sizeSM}px)` + }, + + primary: { + fontSize: token.fontSizeHeading3, + fontWeight: 'bolder', + color: token.colorPrimary + }, + + secondary: { + fontSize: token.fontSize + }, + + form: { + width: 300, + fontSize: token.fontSize + }, + + addition: { + justifyContent: 'space-between', + marginBottom: token.margin, + + a: { + flex: '0 0 auto' + } + }, + + footer: { + textAlign: 'center' + } +})) diff --git a/src/assets/css/pages/sign/sign-up.module.less b/src/assets/css/pages/sign/sign-up.module.less deleted file mode 100644 index 585fe3f..0000000 --- a/src/assets/css/pages/sign/sign-up.module.less +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/assets/css/pages/sign/sign-up.style.ts b/src/assets/css/pages/sign/sign-up.style.ts new file mode 100644 index 0000000..6aadeec --- /dev/null +++ b/src/assets/css/pages/sign/sign-up.style.ts @@ -0,0 +1,31 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + title: { + marginBottom: token.marginMD, + transform: `translateY(-${token.sizeSM}px)` + }, + + primary: { + fontSize: token.fontSizeHeading3, + fontWeight: 'bolder', + color: token.colorPrimary + }, + + secondary: { + fontSize: token.fontSize + }, + + form: { + width: 300, + fontSize: token.fontSize + }, + + retry: { + marginBottom: token.margin + }, + + footer: { + textAlign: 'center' + } +})) diff --git a/src/assets/css/pages/sign/verify.module.less b/src/assets/css/pages/sign/verify.module.less deleted file mode 100644 index 848923e..0000000 --- a/src/assets/css/pages/sign/verify.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/pages/sign/verify.style.ts b/src/assets/css/pages/sign/verify.style.ts new file mode 100644 index 0000000..ad380b6 --- /dev/null +++ b/src/assets/css/pages/sign/verify.style.ts @@ -0,0 +1,23 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + title: { + marginBottom: token.marginMD, + transform: `translateY(-${token.sizeSM}px)` + }, + + primary: { + fontSize: token.fontSizeHeading3, + fontWeight: 'bolder', + color: token.colorPrimary + }, + + secondary: { + fontSize: token.fontSize + }, + + form: { + width: 300, + fontSize: token.fontSize + } +})) diff --git a/src/assets/css/pages/system-framework.module.less b/src/assets/css/pages/system-framework.module.less deleted file mode 100644 index a9f6937..0000000 --- a/src/assets/css/pages/system-framework.module.less +++ /dev/null @@ -1,13 +0,0 @@ -@import "@/assets/css/constants"; - -.root { - .leftPanel { - background-color: @origin-color; - } - - .rightPanel { - flex: 1; - width: 0; - background-color: @background-color; - } -} diff --git a/src/assets/css/pages/system-framework.style.ts b/src/assets/css/pages/system-framework.style.ts new file mode 100644 index 0000000..5c18552 --- /dev/null +++ b/src/assets/css/pages/system-framework.style.ts @@ -0,0 +1,13 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + leftPanel: { + backgroundColor: token.colorBgContainer + }, + + rightPanel: { + flex: 1, + width: 0, + backgroundColor: token.colorBgLayout + } +})) diff --git a/src/assets/css/pages/system/index.module.less b/src/assets/css/pages/system/index.module.less deleted file mode 100644 index b6274c5..0000000 --- a/src/assets/css/pages/system/index.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/pages/system/index.style.ts b/src/assets/css/pages/system/index.style.ts new file mode 100644 index 0000000..c04b2ea --- /dev/null +++ b/src/assets/css/pages/system/index.style.ts @@ -0,0 +1,15 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + root: { + padding: 20, + gap: 20, + flexWrap: 'wrap', + justifyContent: 'flex-start', + + '> *': { + flex: '0 0 auto', + overflow: 'hidden !important' + } + } +})) diff --git a/src/assets/css/pages/system/settings.module.less b/src/assets/css/pages/system/settings.module.less deleted file mode 100644 index 6d455aa..0000000 --- a/src/assets/css/pages/system/settings.module.less +++ /dev/null @@ -1,14 +0,0 @@ -.root { - .rootContent { - padding: 20px; - gap: 20px; - - .rootCol { - gap: 20px; - - > * { - flex: 0 0 auto; - } - } - } -} diff --git a/src/assets/css/pages/system/settings/index.style.ts b/src/assets/css/pages/system/settings/index.style.ts new file mode 100644 index 0000000..156f6ae --- /dev/null +++ b/src/assets/css/pages/system/settings/index.style.ts @@ -0,0 +1,16 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + root: { + padding: 20, + gap: 20 + }, + + rootCol: { + gap: 20, + + '> *': { + flex: '0 0 auto' + } + } +})) diff --git a/src/assets/css/pages/system/statistics.module.less b/src/assets/css/pages/system/statistics.module.less deleted file mode 100644 index 6538354..0000000 --- a/src/assets/css/pages/system/statistics.module.less +++ /dev/null @@ -1,13 +0,0 @@ -.root { - .rootContent { - padding: 20px; - gap: 20px; - flex-wrap: wrap; - justify-content: center; - - > div { - width: 48%; - flex: 0 0 auto; - } - } -} diff --git a/src/assets/css/pages/system/statistics/common.style.ts b/src/assets/css/pages/system/statistics/common.style.ts new file mode 100644 index 0000000..7444f54 --- /dev/null +++ b/src/assets/css/pages/system/statistics/common.style.ts @@ -0,0 +1,44 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + content: { + fontSize: token.fontSize, + padding: '0 10px', + gap: 10, + + '> *': { + gap: 5 + } + }, + + bigChart: { + width: 0, + height: 400 + }, + + key: { + flex: '0 0 auto', + color: token.colorTextLabel + }, + + value: { + color: token.colorTextDescription, + overflow: 'hidden', + + '> *': { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' + } + }, + + chartValue: { + justifyContent: 'space-between', + width: 0 + }, + + percentValue: { + flex: '0 0 auto', + color: token.colorTextDescription + } +})) diff --git a/src/assets/css/pages/system/statistics/index.style.ts b/src/assets/css/pages/system/statistics/index.style.ts new file mode 100644 index 0000000..4299d26 --- /dev/null +++ b/src/assets/css/pages/system/statistics/index.style.ts @@ -0,0 +1,16 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + root: { + padding: 20, + gap: 20, + minWidth: 800, + flexWrap: 'wrap', + justifyContent: 'center', + + '> div': { + width: '48%', + flex: '0 0 auto' + } + } +})) diff --git a/src/assets/css/pages/system/tools/base.module.less b/src/assets/css/pages/system/tools/base.module.less deleted file mode 100644 index 05fdc8b..0000000 --- a/src/assets/css/pages/system/tools/base.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/pages/system/tools/base.style.ts b/src/assets/css/pages/system/tools/base.style.ts new file mode 100644 index 0000000..c552659 --- /dev/null +++ b/src/assets/css/pages/system/tools/base.style.ts @@ -0,0 +1,44 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + padding: 20, + gap: 20, + + '> *:first-child': { + width: 0, + height: 'fit-content' + }, + + '> *:nth-child(2)': { + position: 'sticky', + top: 20, + height: 'calc(100vh - 40px)' + } + }, + + hasEdited: { + '&::after': { + content: '"*"', + color: token.colorTextSecondary + } + }, + + closeEditorBtn: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + position: 'absolute', + top: 10, + right: 10, + backgroundColor: token.colorBorder, + width: 32, + height: 32, + borderRadius: '50%', + color: token.colorTextSecondary, + opacity: 0.6, + boxShadow: token.boxShadow, + cursor: 'pointer', + zIndex: 1000 + } +})) diff --git a/src/assets/css/pages/system/tools/code.module.less b/src/assets/css/pages/system/tools/code.module.less deleted file mode 100644 index f60ba1f..0000000 --- a/src/assets/css/pages/system/tools/code.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/pages/system/tools/code.style.ts b/src/assets/css/pages/system/tools/code.style.ts new file mode 100644 index 0000000..135fbfe --- /dev/null +++ b/src/assets/css/pages/system/tools/code.style.ts @@ -0,0 +1,24 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + root: { + padding: 20 + }, + + rootBox: { + width: '100%', + height: '100%' + }, + + draggableContent: { + position: 'fixed', + insetInlineEnd: 48, + insetBlockEnd: 48, + + '> *': { + position: 'relative', + insetInlineEnd: 0, + insetBlockEnd: 0 + } + } +})) diff --git a/src/assets/css/pages/system/tools/execute.module.less b/src/assets/css/pages/system/tools/execute.module.less deleted file mode 100644 index cec2f41..0000000 --- a/src/assets/css/pages/system/tools/execute.module.less +++ /dev/null @@ -1,8 +0,0 @@ -.root { - padding: 20px; - - .rootBox { - width: 100%; - height: 100%; - } -} diff --git a/src/assets/css/pages/system/tools/execute.style.ts b/src/assets/css/pages/system/tools/execute.style.ts new file mode 100644 index 0000000..5aa745a --- /dev/null +++ b/src/assets/css/pages/system/tools/execute.style.ts @@ -0,0 +1,12 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + root: { + padding: 20 + }, + + rootBox: { + width: '100%', + height: '100%' + } +})) diff --git a/src/assets/css/pages/system/tools/template.module.less b/src/assets/css/pages/system/tools/template.module.less deleted file mode 100644 index 05fdc8b..0000000 --- a/src/assets/css/pages/system/tools/template.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/pages/system/tools/template.style.ts b/src/assets/css/pages/system/tools/template.style.ts new file mode 100644 index 0000000..c552659 --- /dev/null +++ b/src/assets/css/pages/system/tools/template.style.ts @@ -0,0 +1,44 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + padding: 20, + gap: 20, + + '> *:first-child': { + width: 0, + height: 'fit-content' + }, + + '> *:nth-child(2)': { + position: 'sticky', + top: 20, + height: 'calc(100vh - 40px)' + } + }, + + hasEdited: { + '&::after': { + content: '"*"', + color: token.colorTextSecondary + } + }, + + closeEditorBtn: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + position: 'absolute', + top: 10, + right: 10, + backgroundColor: token.colorBorder, + width: 32, + height: 32, + borderRadius: '50%', + color: token.colorTextSecondary, + opacity: 0.6, + boxShadow: token.boxShadow, + cursor: 'pointer', + zIndex: 1000 + } +})) diff --git a/src/assets/css/pages/tools-framework.module.less b/src/assets/css/pages/tools-framework.module.less deleted file mode 100644 index 9b45e09..0000000 --- a/src/assets/css/pages/tools-framework.module.less +++ /dev/null @@ -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; - } -} diff --git a/src/assets/css/pages/tools-framework.style.ts b/src/assets/css/pages/tools-framework.style.ts new file mode 100644 index 0000000..8e0045c --- /dev/null +++ b/src/assets/css/pages/tools-framework.style.ts @@ -0,0 +1,21 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + leftPanel: { + backgroundColor: token.colorBgContainer + }, + + menuDroppable: { + display: 'flex', + position: 'relative', + minHeight: 0, + flex: 1, + width: '100%' + }, + + rightPanel: { + flex: 1, + width: 0, + backgroundColor: token.colorBgLayout + } +})) diff --git a/src/assets/css/pages/tools/create.module.less b/src/assets/css/pages/tools/create.module.less deleted file mode 100644 index b61fc4d..0000000 --- a/src/assets/css/pages/tools/create.module.less +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/assets/css/pages/tools/create.style.ts b/src/assets/css/pages/tools/create.style.ts new file mode 100644 index 0000000..816429f --- /dev/null +++ b/src/assets/css/pages/tools/create.style.ts @@ -0,0 +1,52 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + padding: 20, + gap: 20, + height: '100%', + width: '100%', + + '> *': { + gap: 10, + width: 0 + } + }, + + title: { + flex: '0 0 auto', + height: 40, + + '> *': { + height: '100%', + width: '100%', + justifyContent: 'center', + alignItems: 'center', + fontSize: token.fontSizeXL, + fontWeight: 'bolder', + color: token.colorPrimary + } + }, + + config: { + padding: 20 + }, + + createBt: { + width: '100%', + fontWeight: 'bold' + }, + + preview: { + display: 'flex', + position: 'relative', + justifyContent: 'center', + alignItems: 'center' + }, + + noPreview: { + color: token.colorTextSecondary, + fontSize: token.fontSizeLG, + fontWeight: 'bolder' + } +})) diff --git a/src/assets/css/pages/tools/edit.module.less b/src/assets/css/pages/tools/edit.module.less deleted file mode 100644 index 801dbc8..0000000 --- a/src/assets/css/pages/tools/edit.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/pages/tools/edit.style.ts b/src/assets/css/pages/tools/edit.style.ts new file mode 100644 index 0000000..7b1ee25 --- /dev/null +++ b/src/assets/css/pages/tools/edit.style.ts @@ -0,0 +1,40 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + root: { + padding: 20 + }, + + rootBox: { + width: '100%', + height: '100%' + }, + + content: { + position: 'relative', + width: '100%', + height: '100%', + + '> *': { + width: 0 + } + }, + + draggableMask: { + position: 'absolute', + width: '100%', + height: '100%' + }, + + draggableContent: { + position: 'fixed', + insetInlineEnd: 48, + insetBlockEnd: 48, + + '> *': { + position: 'relative', + insetInlineEnd: 0, + insetBlockEnd: 0 + } + } +})) diff --git a/src/assets/css/pages/tools/index.module.less b/src/assets/css/pages/tools/index.module.less deleted file mode 100644 index 998debe..0000000 --- a/src/assets/css/pages/tools/index.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/pages/tools/index.style.ts b/src/assets/css/pages/tools/index.style.ts new file mode 100644 index 0000000..8c2d9b1 --- /dev/null +++ b/src/assets/css/pages/tools/index.style.ts @@ -0,0 +1,45 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + padding: 20, + gap: 20 + }, + + ownContent: { + gap: 20, + flexWrap: 'wrap', + justifyContent: 'flex-start', + + '> div': { + flex: '0 0 auto' + } + }, + + favoriteDivider: { + alignItems: 'center', + gap: 20, + marginTop: 20, + + '> :first-child, > :last-child': { + height: 0, + border: `1px dashed ${token.colorSplit}` + } + }, + + dividerText: { + flex: '0 0 auto !important', + fontSize: '1.2em', + color: token.colorTextSecondary + }, + + starContent: { + gap: 20, + flexWrap: 'wrap', + justifyContent: 'flex-start', + + '> div': { + flex: '0 0 auto' + } + } +})) diff --git a/src/assets/css/pages/tools/source.module.less b/src/assets/css/pages/tools/source.module.less deleted file mode 100644 index cec2f41..0000000 --- a/src/assets/css/pages/tools/source.module.less +++ /dev/null @@ -1,8 +0,0 @@ -.root { - padding: 20px; - - .rootBox { - width: 100%; - height: 100%; - } -} diff --git a/src/assets/css/pages/tools/source.style.ts b/src/assets/css/pages/tools/source.style.ts new file mode 100644 index 0000000..309d155 --- /dev/null +++ b/src/assets/css/pages/tools/source.style.ts @@ -0,0 +1,12 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + root: { + padding: 20 + }, + + content: { + width: '100%', + height: '100%' + } +})) diff --git a/src/assets/css/pages/tools/store.module.less b/src/assets/css/pages/tools/store.module.less deleted file mode 100644 index 5c5f204..0000000 --- a/src/assets/css/pages/tools/store.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/assets/css/pages/tools/store.style.ts b/src/assets/css/pages/tools/store.style.ts new file mode 100644 index 0000000..2cf1641 --- /dev/null +++ b/src/assets/css/pages/tools/store.style.ts @@ -0,0 +1,41 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + search: { + display: 'flex', + position: 'sticky', + width: '100%', + marginTop: 20, + top: 20, + zIndex: 10, + justifyContent: 'center', + transition: 'all 0.3s ease', + + '> *': { + width: '80%' + } + }, + + hide: { + transform: 'translateY(-60px)' + }, + + root: { + padding: 20, + gap: 20, + flexWrap: 'wrap', + justifyContent: 'center', + + '> div': { + flex: '0 0 auto' + } + }, + + noTool: { + display: 'flex', + justifyContent: 'center', + fontSize: '1.4em', + fontWeight: 'bolder', + color: token.colorTextSecondary + } +})) diff --git a/src/assets/css/pages/tools/user.module.less b/src/assets/css/pages/tools/user.module.less deleted file mode 100644 index 50cdf39..0000000 --- a/src/assets/css/pages/tools/user.module.less +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/assets/css/pages/tools/user.style.ts b/src/assets/css/pages/tools/user.style.ts new file mode 100644 index 0000000..909d0b2 --- /dev/null +++ b/src/assets/css/pages/tools/user.style.ts @@ -0,0 +1,82 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + padding: '80px 20px 20px 20px' + }, + + content: { + width: '100%', + height: '100%', + overflow: 'visible', + alignItems: 'center', + minWidth: 900, + paddingBottom: 20 + }, + + info: { + marginLeft: 40, + transform: 'translateY(-40px)', + + '> *': { + flex: '0 0 auto !important' + } + }, + + avatarBox: { + backgroundColor: token.colorBgLayout, + padding: 4, + borderRadius: '50%', + boxShadow: token.boxShadow + }, + + avatar: { + backgroundColor: 'transparent !important' + }, + + infoName: { + margin: '20px 0 0 20px', + justifyContent: 'center', + + '> *': { + flex: '0 0 auto' + } + }, + + nickname: { + fontSize: token.fontSizeHeading2, + fontWeight: 'bolder', + color: token.colorPrimary + }, + + url: { + cursor: 'pointer', + + '> span': { + marginLeft: 8 + } + }, + + tools: { + padding: 20, + gap: 20, + flexWrap: 'wrap', + justifyContent: 'center', + + '> div': { + flex: '0 0 auto', + + '> div': { + backgroundColor: token.colorBgLayout + } + } + }, + + noTool: { + display: 'flex', + justifyContent: 'center', + marginBottom: 20, + fontSize: token.fontSizeLG, + color: token.colorTextSecondary + } +})) diff --git a/src/assets/css/pages/tools/view.module.less b/src/assets/css/pages/tools/view.module.less deleted file mode 100644 index fbf3abd..0000000 --- a/src/assets/css/pages/tools/view.module.less +++ /dev/null @@ -1,9 +0,0 @@ -.root { - padding: 20px; - - .rootBox { - position: relative; - height: 100%; - width: 100%; - } -} diff --git a/src/assets/css/pages/tools/view.style.ts b/src/assets/css/pages/tools/view.style.ts new file mode 100644 index 0000000..166a0c6 --- /dev/null +++ b/src/assets/css/pages/tools/view.style.ts @@ -0,0 +1,13 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + root: { + padding: 20 + }, + + content: { + position: 'relative', + height: '100%', + width: '100%' + } +})) diff --git a/src/assets/css/pages/user-framework.module.less b/src/assets/css/pages/user-framework.module.less deleted file mode 100644 index a9f6937..0000000 --- a/src/assets/css/pages/user-framework.module.less +++ /dev/null @@ -1,13 +0,0 @@ -@import "@/assets/css/constants"; - -.root { - .leftPanel { - background-color: @origin-color; - } - - .rightPanel { - flex: 1; - width: 0; - background-color: @background-color; - } -} diff --git a/src/assets/css/pages/user-framework.style.ts b/src/assets/css/pages/user-framework.style.ts new file mode 100644 index 0000000..5c18552 --- /dev/null +++ b/src/assets/css/pages/user-framework.style.ts @@ -0,0 +1,13 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + leftPanel: { + backgroundColor: token.colorBgContainer + }, + + rightPanel: { + flex: 1, + width: 0, + backgroundColor: token.colorBgLayout + } +})) diff --git a/src/assets/css/pages/user/index.module.less b/src/assets/css/pages/user/index.module.less deleted file mode 100644 index 18e8357..0000000 --- a/src/assets/css/pages/user/index.module.less +++ /dev/null @@ -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%; - } - } - } - } - } -} diff --git a/src/assets/css/pages/user/index.style.ts b/src/assets/css/pages/user/index.style.ts new file mode 100644 index 0000000..f39ed7e --- /dev/null +++ b/src/assets/css/pages/user/index.style.ts @@ -0,0 +1,114 @@ +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, + + '> :not(:first-child)': { + padding: '0 60px' + } + }, + + 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 + } + }, + + header: { + justifyContent: 'space-between', + + '> *': { + flex: '0 0 auto' + } + }, + + title: { + fontSize: token.fontSizeXL, + fontWeight: 'bolder' + }, + + operation: { + gap: 10 + }, + + divider: { + height: 1, + width: 'calc(100% - 120px)', + backgroundColor: token.colorSplit, + margin: '30px 60px' + }, + + list: { + gap: 24 + }, + + row: { + alignItems: 'center', + justifyContent: 'space-between', + + '> *': { + flex: '0 0 auto' + } + }, + + label: { + fontSize: token.fontSize, + fontWeight: 'bolder', + flex: 1 + }, + + input: { + width: 400, + + '> *': { + width: '100%' + } + } +})) diff --git a/src/components/Playground/CodeEditor/Editor/index.module.less b/src/components/Playground/CodeEditor/Editor/index.module.less deleted file mode 100644 index d2fde9f..0000000 --- a/src/components/Playground/CodeEditor/Editor/index.module.less +++ /dev/null @@ -1,89 +0,0 @@ -.keyframes(@animationName, @content) { - animation-name: @animationName; - @-webkit-keyframes @animationName { - @content(); - } - @-moz-keyframes @animationName { - @content(); - } - @-o-keyframes @animationName { - @content(); - } - @keyframes @animationName { - @content(); - } -} - -.root { - position: relative; - height: 0; - - :global .monaco-editor-light { - height: 100%; - overflow: hidden; - background-color: var(--border); - - .jsx-tag-angle-bracket { - color: #800000; - } - - .jsx-text { - color: #000; - } - - .jsx-tag-name { - color: #800000; - } - - .jsx-tag-attribute-key { - color: #f00; - } - } - - :global .monaco-editor-vs-dark { - height: 100%; - overflow: hidden; - background-color: var(--border); - - .jsx-tag-angle-bracket { - color: #808080; - } - - .jsx-text { - color: #d4d4d4; - } - - .jsx-tag-name { - color: #569cd6; - } - - .jsx-tag-attribute-key { - color: #9cdcfe; - } - } - - .playgroundCodeEditorLoading { - position: absolute; - top: 0; - right: 0; - margin: 4px; - width: 10px; - height: 10px; - border-radius: 50%; - border-top: 2px #666 solid; - border-right: 2px #ddd solid; - border-bottom: 2px #ddd solid; - border-left: 2px #ddd solid; - animation: .6s linear infinite; - - .keyframes(fUHD7o, { - 0% { - transform: rotateZ(0); - } - - 100% { - transform: rotateZ(360deg); - } - }); - } -} diff --git a/src/components/Playground/CodeEditor/Editor/index.style.ts b/src/components/Playground/CodeEditor/Editor/index.style.ts new file mode 100644 index 0000000..5e735c5 --- /dev/null +++ b/src/components/Playground/CodeEditor/Editor/index.style.ts @@ -0,0 +1,53 @@ +import { createStyles, keyframes } from 'antd-style' + +const rotate = keyframes` + 0% { + transform: rotateZ(0); + } + + 100% { + transform: rotateZ(360deg); + } +` + +export default createStyles(() => ({ + root: { + position: 'relative', + height: 0, + + '.monaco-editor-light': { + height: '100%', + overflow: 'hidden', + backgroundColor: 'var(--border)', + '.jsx-tag-angle-bracket': { color: '#800000' }, + '.jsx-text': { color: '#000' }, + '.jsx-tag-name': { color: '#800000' }, + '.jsx-tag-attribute-key': { color: '#f00' } + }, + + '.monaco-editor-dark': { + height: '100%', + overflow: 'hidden', + backgroundColor: 'var(--border)', + '.jsx-tag-angle-bracket': { color: '#808080' }, + '.jsx-text': { color: '#d4d4d4' }, + '.jsx-tag-name': { color: '#569cd6' }, + '.jsx-tag-attribute-key': { color: '#9cdcfe' } + } + }, + + loading: { + position: 'absolute', + top: 0, + right: 0, + margin: 4, + width: 10, + height: 10, + borderRadius: '50%', + borderTop: '2px #666 solid', + borderRight: '2px #ddd solid', + borderBottom: '2px #ddd solid', + borderLeft: '2px #ddd solid', + animation: `${rotate} .6s linear infinite` + } +})) diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx index 3e4e0ca..d6dac9a 100644 --- a/src/components/Playground/CodeEditor/Editor/index.tsx +++ b/src/components/Playground/CodeEditor/Editor/index.tsx @@ -1,8 +1,8 @@ import { editor, Selection } from 'monaco-editor' import MonacoEditor, { Monaco } from '@monaco-editor/react' -import styles from '@/components/Playground/CodeEditor/Editor/index.module.less' +import useStyles from '@/components/Playground/CodeEditor/Editor/index.style' import '@/components/Playground/CodeEditor/Editor/loader' -import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared' +import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared' import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files' import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks' import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig' @@ -13,28 +13,29 @@ export interface ExtraLib { } interface EditorProps { + isDarkMode?: boolean tsconfig?: ITsconfig files?: IFiles selectedFileName?: string readonly?: boolean onChange?: (code: string | undefined) => void options?: IEditorOptions - theme?: ITheme onJumpFile?: (fileName: string) => void extraLibs?: ExtraLib[] } const Editor = ({ + isDarkMode, tsconfig, files = {}, selectedFileName = '', readonly, - theme, onChange, options, onJumpFile, extraLibs = [] }: EditorProps) => { + const { styles } = useStyles() const editorRef = useRef() const monacoRef = useRef() const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor() @@ -114,9 +115,9 @@ const Editor = ({ <>
- {total > 0 && !finished &&
} + {total > 0 && !finished &&
}
) diff --git a/src/components/Playground/CodeEditor/FileSelector/Item.tsx b/src/components/Playground/CodeEditor/FileSelector/Item.tsx index de3aa88..b7e84bd 100644 --- a/src/components/Playground/CodeEditor/FileSelector/Item.tsx +++ b/src/components/Playground/CodeEditor/FileSelector/Item.tsx @@ -1,5 +1,5 @@ import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react' -import styles from '@/components/Playground/CodeEditor/FileSelector/item.module.less' +import useStyles from '@/components/Playground/CodeEditor/FileSelector/item.style' interface ItemProps { className?: string @@ -30,6 +30,7 @@ const Item = ({ onValidate, ...prop }: ItemProps) => { + const { styles, cx } = useStyles() const inputRef = useRef(null) const [fileName, setFileName] = useState(value) const [isCreating, setIsCreating] = useState(prop.creating) @@ -110,7 +111,7 @@ const Item = ({ return (
{isCreating ? ( diff --git a/src/components/Playground/CodeEditor/FileSelector/index.module.less b/src/components/Playground/CodeEditor/FileSelector/index.module.less deleted file mode 100644 index 41af930..0000000 --- a/src/components/Playground/CodeEditor/FileSelector/index.module.less +++ /dev/null @@ -1,37 +0,0 @@ -.root{ - display: flex; - flex: 0 0 auto; - height: 40px; - - .multiple { - flex: 1; - width: 0; - - .tabContent { - height: 40px; - align-items: flex-end; - gap: 2px; - margin-left: 10px; - - .tabItemAdd { - padding: 0 12px; - } - - .tabsMarginRight { - height: 100%; - - > * { - height: 100%; - width: 10px; - } - } - } - } - - .sticky { - display: flex; - flex: 0 0 auto; - align-items: flex-end; - margin-right: 10px; - } -} diff --git a/src/components/Playground/CodeEditor/FileSelector/index.style.ts b/src/components/Playground/CodeEditor/FileSelector/index.style.ts new file mode 100644 index 0000000..d19ffb5 --- /dev/null +++ b/src/components/Playground/CodeEditor/FileSelector/index.style.ts @@ -0,0 +1,41 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + root: { + display: 'flex', + flex: '0 0 auto', + height: 40 + }, + + multiple: { + flex: 1, + width: 0 + }, + + tabContent: { + height: 40, + alignItems: 'flex-end', + gap: 2, + marginLeft: 10 + }, + + tabItemAdd: { + padding: '0 12px' + }, + + tabsMarginRight: { + height: '100%', + + '> *': { + height: '100%', + width: 10 + } + }, + + sticky: { + display: 'flex', + flex: '0 0 auto', + alignItems: 'flex-end', + marginRight: 10 + } +})) diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx index b720c2f..661ad06 100644 --- a/src/components/Playground/CodeEditor/FileSelector/index.tsx +++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx @@ -1,4 +1,4 @@ -import styles from '@/components/Playground/CodeEditor/FileSelector/index.module.less' +import useStyles from '@/components/Playground/CodeEditor/FileSelector/index.style' import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' import FlexBox from '@/components/common/FlexBox' import { IFiles } from '@/components/Playground/shared' @@ -32,6 +32,7 @@ const FileSelector = ({ onUpdateFileName, selectedFileName = '' }: FileSelectorProps) => { + const { styles } = useStyles() const hideScrollbarRef = useRef(null) const [tabs, setTabs] = useState([]) const [isCreating, setIsCreating] = useState(false) diff --git a/src/components/Playground/CodeEditor/FileSelector/item.module.less b/src/components/Playground/CodeEditor/FileSelector/item.module.less deleted file mode 100644 index 959921a..0000000 --- a/src/components/Playground/CodeEditor/FileSelector/item.module.less +++ /dev/null @@ -1,47 +0,0 @@ -.root { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - height: 30px; - padding: 0 20px; - border: 1px solid #f0f0f0; - background-color: rgba(0, 0, 0, 0.04); - border-radius: 6px 6px 0 0; - cursor: pointer; - - .tabItemInput { - position: relative; - min-width: 40px; - transform: translateY(1px); - - .tabItemInputMask { - display: inline-block; - color: transparent; - } - input { - position: absolute; - background-color: transparent; - width: 100%; - font-size: 1em; - } - } - - .tabItemClose { - transform: translateX(10px); - - :hover { - fill: #888; - } - - svg { - height: 8px; - fill: #666; - } - } - - &.active { - background-color: white; - border-bottom: none; - } -} diff --git a/src/components/Playground/CodeEditor/FileSelector/item.style.ts b/src/components/Playground/CodeEditor/FileSelector/item.style.ts new file mode 100644 index 0000000..bb36fe1 --- /dev/null +++ b/src/components/Playground/CodeEditor/FileSelector/item.style.ts @@ -0,0 +1,54 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flex: '0 0 auto', + height: 30, + padding: '0 20px', + color: token.colorText, + border: `1px solid ${token.colorBorder}`, + backgroundColor: token.colorBgLayout, + borderRadius: '6px 6px 0 0', + cursor: 'pointer' + }, + + active: { + backgroundColor: token.colorBgElevated, + borderBottom: 'none' + }, + + tabItemInput: { + position: 'relative', + minWidth: 40, + transform: 'translateY(1px)', + + input: { + position: 'absolute', + backgroundColor: 'transparent', + width: '100%', + color: token.colorText, + fontSize: token.fontSizeSM + } + }, + + tabItemInputMask: { + display: 'inline-block', + color: 'transparent' + }, + + tabItemClose: { + transform: 'translateX(10px)', + + svg: { + height: token.sizeXS, + fill: token.colorTextSecondary + }, + + '>:hover': { + fill: token.colorTextDescription + } + } +})) diff --git a/src/components/Playground/CodeEditor/index.module.less b/src/components/Playground/CodeEditor/index.module.less deleted file mode 100644 index a31c350..0000000 --- a/src/components/Playground/CodeEditor/index.module.less +++ /dev/null @@ -1,15 +0,0 @@ -.root { - position: relative; - width: 100%; - height: 100%; - - .errorMessage { - position: absolute; - bottom: 0; - width: 100%; - color: white; - background-color: #FF4D4FAA; - padding: 5px 10px; - font-size: 1.2em; - } -} diff --git a/src/components/Playground/CodeEditor/index.style.ts b/src/components/Playground/CodeEditor/index.style.ts new file mode 100644 index 0000000..8b61578 --- /dev/null +++ b/src/components/Playground/CodeEditor/index.style.ts @@ -0,0 +1,19 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + position: 'relative', + width: '100%', + height: '100%' + }, + + errorMessage: { + position: 'absolute', + bottom: 0, + width: '100%', + color: token.colorErrorText, + backgroundColor: token.colorErrorBg, + padding: '5px 10px', + fontSize: token.fontSize + } +})) diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx index c7d24bb..c06a6ef 100644 --- a/src/components/Playground/CodeEditor/index.tsx +++ b/src/components/Playground/CodeEditor/index.tsx @@ -1,7 +1,7 @@ import _ from 'lodash' -import styles from '@/components/Playground/CodeEditor/index.module.less' +import useStyles from '@/components/Playground/CodeEditor/index.style' import FlexBox from '@/components/common/FlexBox' -import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared' +import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared' import { fileNameToLanguage, getFileNameList, @@ -12,7 +12,7 @@ import FileSelector from '@/components/Playground/CodeEditor/FileSelector' import Editor, { ExtraLib } from '@/components/Playground/CodeEditor/Editor' interface CodeEditorProps { - theme?: ITheme + isDarkMode?: boolean showFileSelector?: boolean tsconfig?: ITsconfig files: IFiles @@ -31,7 +31,7 @@ interface CodeEditorProps { } const CodeEditor = ({ - theme, + isDarkMode, showFileSelector = true, tsconfig, files, @@ -48,6 +48,7 @@ const CodeEditor = ({ extraLibs, ...props }: CodeEditorProps) => { + const { styles } = useStyles() const filteredFilesName = getFileNameList(files).filter( (item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden ) @@ -139,8 +140,8 @@ const CodeEditor = ({ /> )} { const iframeUrl = getIframeUrl(iframeRaw) const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => { + const { styles, theme, cx } = useStyles() const iframeRef = useRef(null) const [isLoaded, setIsLoaded] = useState(false) const [selectedDevice, setSelectedDevice] = useState('Pixel 7') @@ -164,7 +164,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => iframeRef.current?.contentWindow?.postMessage( { type: 'SCALE', - data: { zoom: zoom } + data: { zoom } } as IMessage, '*' ) @@ -180,12 +180,18 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => autoHideWaitingTime={1000} >
-
+
value.name === selectedDevice) @@ -210,14 +216,17 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => />
- +
{isRotate ? ( - + ) : ( - + )}
- + ({ + root: { + display: 'flex', + position: 'relative', + height: 0 + }, + + errorMessage: { + position: 'absolute', + bottom: 0, + width: '100%', + color: token.colorErrorText, + backgroundColor: token.colorErrorBg, + padding: '5px 10px', + fontSize: token.fontSize + } +})) diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx index ce91dbb..ba6641c 100644 --- a/src/components/Playground/Output/Preview/index.tsx +++ b/src/components/Playground/Output/Preview/index.tsx @@ -1,4 +1,4 @@ -import styles from '@/components/Playground/Output/Preview/index.module.less' +import useStyles from '@/components/Playground/Output/Preview/index.style' import { IFiles, IImportMap } from '@/components/Playground/shared' import Compiler from '@/components/Playground/compiler' import Render from '@/components/Playground/Output/Preview/Render' @@ -22,6 +22,7 @@ const Preview = ({ postExpansionCode = '', mobileMode = false }: PreviewProps) => { + const { styles } = useStyles() const [errorMsg, setErrorMsg] = useState('') const [compiledCode, setCompiledCode] = useState('') diff --git a/src/components/Playground/Output/Preview/render.module.less b/src/components/Playground/Output/Preview/render.module.less deleted file mode 100644 index fef1692..0000000 --- a/src/components/Playground/Output/Preview/render.module.less +++ /dev/null @@ -1,78 +0,0 @@ -.renderRoot { - border: none; - height: 100%; - width: 100%; - flex: 1; -} - -.mobileModeRoot { - background-color: rgba(204, 204, 204, 0.66); - - .mobileModeContent { - padding: 80px; - } - - .device { - display: flex; - flex-direction: column; - background-color: #EEEFF2; - width: fit-content; - margin: 0 auto; - border-radius: 40px; - - &.rotate { - flex-direction: row; - } - - .deviceHeader { - margin: 20px auto; - width: 60px; - height: 10px; - border-radius: 5px; - background-color: #C8C9CC; - - &.rotate { - margin: auto 20px; - width: 10px; - height: 60px; - } - } - - .deviceContent { - margin: 0 10px; - background-color: white; - - &.rotate { - margin: 10px 0; - } - } - - .deviceFooter { - margin: 20px auto; - width: 40px; - height: 40px; - border-radius: 50%; - background-color: #C8C9CC; - - &.rotate { - margin: auto 20px; - } - } - } -} - -.switchDevice, .switchZoom { - display: flex; - position: absolute; - top: 10px; - align-items: center; - gap: 4px; -} - -.switchDevice { - left: 10px; -} - -.switchZoom { - right: 10px; -} diff --git a/src/components/Playground/Output/Preview/render.style.ts b/src/components/Playground/Output/Preview/render.style.ts new file mode 100644 index 0000000..e7c4fba --- /dev/null +++ b/src/components/Playground/Output/Preview/render.style.ts @@ -0,0 +1,84 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + renderRoot: { + border: 'none', + height: '100%', + width: '100%', + flex: 1 + }, + + mobileModeRoot: { + backgroundColor: token.colorBgLayout + }, + + mobileModeContent: { + padding: 80 + }, + + device: { + display: 'flex', + flexDirection: 'column', + backgroundColor: token.colorBgElevated, + width: 'fit-content', + margin: '0 auto', + borderRadius: 40 + }, + + rotate: { + flexDirection: 'row' + }, + + deviceHeader: { + margin: '20px auto', + width: 60, + height: 10, + borderRadius: 5, + backgroundColor: token.colorBgMask + }, + + rotatedDeviceHeader: { + margin: 'auto 20px', + width: 10, + height: 60 + }, + + deviceContent: { + margin: '0 10px', + backgroundColor: token.colorBgLayout + }, + + rotatedDeviceContent: { + margin: '10px 0' + }, + + deviceFooter: { + margin: '20px auto', + width: 40, + height: 40, + borderRadius: '50%', + backgroundColor: token.colorBgMask + }, + + rotatedDeviceFooter: { + margin: 'auto 20px' + }, + + switchDevice: { + display: 'flex', + position: 'absolute', + top: 10, + left: 10, + alignItems: 'center', + gap: 4 + }, + + switchZoom: { + display: 'flex', + position: 'absolute', + top: 10, + right: 10, + alignItems: 'center', + gap: 4 + } +})) diff --git a/src/components/Playground/Output/Transform/index.module.less b/src/components/Playground/Output/Transform/index.module.less deleted file mode 100644 index 97455c5..0000000 --- a/src/components/Playground/Output/Transform/index.module.less +++ /dev/null @@ -1,13 +0,0 @@ -.root { - position: relative; - - .errorMessage { - position: absolute; - bottom: 0; - width: 100%; - color: white; - background-color: #FF4D4FAA; - padding: 5px 10px; - font-size: 1.2em; - } -} diff --git a/src/components/Playground/Output/Transform/index.style.ts b/src/components/Playground/Output/Transform/index.style.ts new file mode 100644 index 0000000..6c48409 --- /dev/null +++ b/src/components/Playground/Output/Transform/index.style.ts @@ -0,0 +1,17 @@ +import { createStyles } from 'antd-style' + +export default createStyles(({ token }) => ({ + root: { + position: 'relative' + }, + + errorMessage: { + position: 'absolute', + bottom: 0, + width: '100%', + color: token.colorErrorText, + backgroundColor: token.colorErrorBg, + padding: '5px 10px', + fontSize: token.fontSize + } +})) diff --git a/src/components/Playground/Output/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx index cdc16ca..acaa484 100644 --- a/src/components/Playground/Output/Transform/index.tsx +++ b/src/components/Playground/Output/Transform/index.tsx @@ -1,6 +1,6 @@ import MonacoEditor from '@monaco-editor/react' import { Loader } from 'esbuild-wasm' -import styles from '@/components/Playground/Output/Transform/index.module.less' +import useStyles from '@/components/Playground/Output/Transform/index.style' import { IFile, ITheme } from '@/components/Playground/shared' import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files' import Compiler from '@/components/Playground/compiler' @@ -12,6 +12,7 @@ interface OutputProps { } const Transform = ({ file, theme }: OutputProps) => { + const { styles } = useStyles() const [compiledCode, setCompiledCode] = useState('') const [errorMsg, setErrorMsg] = useState('') diff --git a/src/components/Playground/index.module.less b/src/components/Playground/index.module.less deleted file mode 100644 index f320f62..0000000 --- a/src/components/Playground/index.module.less +++ /dev/null @@ -1,8 +0,0 @@ -.root { - width: 100%; - height: 100%; - - > * { - width: 0 !important; - } -} diff --git a/src/components/Playground/index.style.ts b/src/components/Playground/index.style.ts new file mode 100644 index 0000000..55ab552 --- /dev/null +++ b/src/components/Playground/index.style.ts @@ -0,0 +1,12 @@ +import { createStyles } from 'antd-style' + +export default createStyles(() => ({ + root: { + width: '100%', + height: '100%', + + '> *': { + width: '0 !important' + } + } +})) diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx index c2be201..5288ad7 100644 --- a/src/components/Playground/index.tsx +++ b/src/components/Playground/index.tsx @@ -1,4 +1,4 @@ -import styles from '@/components/Playground/index.module.less' +import useStyles from '@/components/Playground/index.style' import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared' import { ENTRY_FILE_NAME, @@ -11,6 +11,7 @@ import CodeEditor from '@/components/Playground/CodeEditor' import Output from '@/components/Playground/Output' interface PlaygroundProps { + isDarkMode?: boolean initFiles: IFiles initImportMapRaw: string initTsconfigRaw: string @@ -18,11 +19,13 @@ interface PlaygroundProps { } const Playground = ({ + isDarkMode, initFiles, initImportMapRaw, initTsconfigRaw, entryPoint = ENTRY_FILE_NAME }: PlaygroundProps) => { + const { styles } = useStyles() const [files, setFiles] = useState(initFiles) const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME) const [importMapRaw, setImportMapRaw] = useState(initImportMapRaw) @@ -79,6 +82,7 @@ const Playground = ({ return ( , HTMLDivElement> const Card = forwardRef(({ className, ...props }, ref) => { - return ( -
- ) + const { styles, cx } = useStyles() + + return
}) export default Card diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx index b1b4a04..c40125b 100644 --- a/src/components/common/FitCenter.tsx +++ b/src/components/common/FitCenter.tsx @@ -1,16 +1,20 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' -import styles from '@/assets/css/components/common/fit-center.module.less' +import useStyles from '@/assets/css/components/common/fit-center.style' interface FitCenterProps extends DetailedHTMLProps, HTMLDivElement> { vertical?: boolean } const FitCenter = ({ className, vertical, ...props }: FitCenterProps) => { + const { styles, cx } = useStyles() + return (
) diff --git a/src/components/common/FitFullscreen.tsx b/src/components/common/FitFullscreen.tsx index f2af783..12dbbef 100644 --- a/src/components/common/FitFullscreen.tsx +++ b/src/components/common/FitFullscreen.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' -import styles from '@/assets/css/components/common/fit-fullscreen.module.less' +import useStyles from '@/assets/css/components/common/fit-fullscreen.style' interface FitFullscreenProps extends DetailedHTMLProps, HTMLDivElement> { @@ -9,9 +9,11 @@ interface FitFullscreenProps const FitFullscreen = forwardRef( ({ zIndex, backgroundColor, className, style, ...props }, ref) => { + const { styles, cx } = useStyles() + return (
, HTMLDivElement> { direction?: 'horizontal' | 'vertical' @@ -8,11 +8,15 @@ interface FlexBoxProps extends DetailedHTMLProps, const FlexBox = forwardRef( ({ className, direction, gap, style, ...props }, ref) => { + const { styles, cx } = useStyles() + return (
{ + const { styles, theme } = useStyles() + const loadingIcon = ( <> diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx index d94edaf..803f004 100644 --- a/src/components/common/HideScrollbar.tsx +++ b/src/components/common/HideScrollbar.tsx @@ -6,7 +6,7 @@ import { HTMLAttributes, UIEvent } from 'react' -import styles from '@/assets/css/components/common/hide-scrollbar.module.less' +import useStyles from '@/assets/css/components/common/hide-scrollbar.style' interface HideScrollbarProps extends DetailedHTMLProps, HTMLDivElement> { @@ -82,6 +82,8 @@ const HideScrollbar = forwardRef( }, ref ) => { + const { styles, cx } = useStyles() + useImperativeHandle(ref, () => { return { scrollTo(x, y, smooth?: boolean) { @@ -538,7 +540,7 @@ const HideScrollbar = forwardRef( >
( {isShowVerticalScrollbar && (!isHiddenVerticalScrollbarWhenFull || verticalScrollbarLength < 100) && (
( padding: `${scrollbarAsidePadding}px ${scrollbarEdgePadding}px` }} > -
+
( (!isHiddenHorizontalScrollbarWhenFull || horizontalScrollbarLength < 100) && (
( padding: `${scrollbarEdgePadding}px ${scrollbarAsidePadding}px` }} > -
+
void -} - -const Indicator = ({ total, current, onSwitch }: IndicatorProps) => { - const handleClick = (index: number) => { - return () => { - onSwitch?.(index) - } - } - - return ( - <> -
    - {_.range(0, total).map((_value, index) => { - return ( -
  • -
    -
    • - ) - })} -
- - ) -} - -export default Indicator diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx index 93c7e10..e9d34f8 100644 --- a/src/components/common/LoadingMask.tsx +++ b/src/components/common/LoadingMask.tsx @@ -1,7 +1,6 @@ import { PropsWithChildren, ReactNode } from 'react' import Icon from '@ant-design/icons' -import styles from '@/assets/css/components/common/loading-mask.module.less' -import { COLOR_FONT_MAIN } from '@/constants/common.constants' +import useStyles from '@/assets/css/components/common/loading-mask.style' interface LoadingMaskProps extends PropsWithChildren { hidden?: boolean @@ -9,11 +8,13 @@ interface LoadingMaskProps extends PropsWithChildren { } const LoadingMask = (props: LoadingMaskProps) => { + const { styles, theme } = useStyles() + const loadingIcon = ( <> diff --git a/src/components/common/Sidebar/Footer.tsx b/src/components/common/Sidebar/Footer.tsx index 5ed4eb3..38b5488 100644 --- a/src/components/common/Sidebar/Footer.tsx +++ b/src/components/common/Sidebar/Footer.tsx @@ -1,12 +1,14 @@ import Icon from '@ant-design/icons' -import styles from '@/assets/css/components/common/sidebar.module.less' -import { COLOR_ERROR } from '@/constants/common.constants' +import useStyles from '@/assets/css/components/common/sidebar/footer.style' +import { SidebarContext } from '@/components/common/Sidebar/index' import { getRedirectUrl } from '@/util/route' import { getAvatar, getLoginStatus, getNickname, removeToken } from '@/util/auth' import { navigateToLogin, navigateToUser } from '@/util/navigation' import { r_auth_logout } from '@/services/auth' const Footer = () => { + const { styles, theme, cx } = useStyles() + const { isCollapse } = useContext(SidebarContext) const matches = useMatches() const lastMatch = matches.reduce((_, second) => second) const location = useLocation() @@ -33,7 +35,7 @@ const Footer = () => { removeToken() notification.info({ message: '已退出登录', - icon: + icon: }) setTimeout(() => { window.location.reload() @@ -58,7 +60,7 @@ const Footer = () => { return (
@@ -74,17 +76,29 @@ const Footer = () => { 登录 -