From 3d77dc793b851b64cdf7fe6fc27635a26d50e467 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 17 Oct 2024 13:50:47 +0800 Subject: [PATCH 1/8] Refactor(App): Change sass to less --- package-lock.json | 195 +++++++++++++++++- package.json | 2 +- src/assets/css/_mixins.scss | 22 -- src/assets/css/{base.scss => base.less} | 0 src/assets/css/{common.scss => common.less} | 8 +- .../common/{card.scss => card.less} | 4 +- .../{fit-center.scss => fit-center.less} | 2 +- ...it-fullscreen.scss => fit-fullscreen.less} | 2 +- .../common/{flex-box.scss => flex-box.less} | 2 +- ...mask.scss => fullscreen-loading-mask.less} | 2 +- ...ide-scrollbar.scss => hide-scrollbar.less} | 12 +- .../common/{indicator.scss => indicator.less} | 12 +- .../{loading-mask.scss => loading-mask.less} | 2 +- .../common/{sidebar.scss => sidebar.less} | 80 ++++--- .../common/{url-card.scss => url-card.less} | 6 +- .../{drag-handle.scss => drag-handle.less} | 0 src/assets/css/components/dnd/drop-mask.less | 22 ++ src/assets/css/components/dnd/drop-mask.scss | 30 --- .../{setting-card.scss => setting-card.less} | 10 +- ...tistics-card.scss => statistics-card.less} | 12 +- ...oad-more-card.scss => load-more-card.less} | 6 +- ...ository-card.scss => repository-card.less} | 8 +- .../{store-card.scss => store-card.less} | 18 +- src/assets/css/constants.less | 22 ++ src/assets/css/constants.scss | 22 -- src/assets/css/mixins.less | 15 ++ src/assets/css/pages/{sign.scss => sign.less} | 15 +- src/assets/css/pages/system-framework.less | 13 ++ src/assets/css/pages/system-framework.scss | 14 -- .../pages/system/{index.scss => index.less} | 2 - .../system/{settings.scss => settings.less} | 2 - .../{statistics.scss => statistics.less} | 2 - .../system/tools/{base.scss => base.less} | 6 +- .../system/tools/{code.scss => code.less} | 0 .../tools/{execute.scss => execute.less} | 0 .../tools/{template.scss => template.less} | 6 +- ...ls-framework.scss => tools-framework.less} | 7 +- .../pages/tools/{create.scss => create.less} | 9 +- .../css/pages/tools/{edit.scss => edit.less} | 0 .../pages/tools/{index.scss => index.less} | 11 +- .../pages/tools/{source.scss => source.less} | 0 .../pages/tools/{store.scss => store.less} | 4 +- .../css/pages/tools/{user.scss => user.less} | 18 +- .../css/pages/tools/{view.scss => view.less} | 0 src/assets/css/pages/user-framework.less | 13 ++ src/assets/css/pages/user-framework.scss | 14 -- .../css/pages/user/{index.scss => index.less} | 39 +--- .../Editor/{editor.scss => editor.less} | 43 ++-- .../Playground/CodeEditor/Editor/index.tsx | 2 +- ...{file-selector.scss => file-selector.less} | 0 .../CodeEditor/FileSelector/index.tsx | 2 +- .../{code-editor.scss => code-editor.less} | 0 .../Playground/CodeEditor/index.tsx | 2 +- .../Playground/Output/Preview/Render.tsx | 2 +- .../Playground/Output/Preview/index.tsx | 2 +- .../Preview/{preview.scss => preview.less} | 0 .../Preview/{render.scss => render.less} | 2 - .../Playground/Output/Transform/index.tsx | 2 +- .../{transform.scss => transform.less} | 0 src/components/Playground/index.tsx | 2 +- .../{playground.scss => playground.less} | 0 src/components/common/Card.tsx | 2 +- src/components/common/FitCenter.tsx | 2 +- src/components/common/FitFullscreen.tsx | 2 +- src/components/common/FlexBox.tsx | 2 +- .../common/FullscreenLoadingMask.tsx | 2 +- src/components/common/HideScrollbar.tsx | 2 +- src/components/common/Indicator.tsx | 2 +- src/components/common/LoadingMask.tsx | 2 +- src/components/common/Sidebar/index.tsx | 2 +- src/components/common/UrlCard.tsx | 2 +- src/components/dnd/DragHandle.tsx | 2 +- src/components/dnd/DropMask.tsx | 2 +- src/components/system/SettingCard.tsx | 2 +- src/components/system/StatisticsCard.tsx | 2 +- src/components/tools/LoadMoreCard.tsx | 2 +- src/components/tools/RepositoryCard.tsx | 3 +- src/components/tools/StoreCard.tsx | 4 +- src/main.tsx | 4 +- src/pages/Sign/index.tsx | 2 +- src/pages/System/Settings/index.tsx | 2 +- src/pages/System/Statistics/index.tsx | 2 +- src/pages/System/Tools/Base.tsx | 2 +- src/pages/System/Tools/Code.tsx | 2 +- src/pages/System/Tools/Execute.tsx | 2 +- src/pages/System/Tools/Template.tsx | 2 +- src/pages/System/index.tsx | 2 +- src/pages/SystemFramework.tsx | 2 +- src/pages/Tools/Create.tsx | 2 +- src/pages/Tools/Edit.tsx | 2 +- src/pages/Tools/Source.tsx | 2 +- src/pages/Tools/Store.tsx | 2 +- src/pages/Tools/User.tsx | 2 +- src/pages/Tools/View.tsx | 2 +- src/pages/Tools/index.tsx | 2 +- src/pages/ToolsFramework.tsx | 2 +- src/pages/User/index.tsx | 2 +- src/pages/UserFramework.tsx | 2 +- 98 files changed, 466 insertions(+), 363 deletions(-) delete mode 100644 src/assets/css/_mixins.scss rename src/assets/css/{base.scss => base.less} (100%) rename src/assets/css/{common.scss => common.less} (87%) rename src/assets/css/components/common/{card.scss => card.less} (53%) rename src/assets/css/components/common/{fit-center.scss => fit-center.less} (98%) rename src/assets/css/components/common/{fit-fullscreen.scss => fit-fullscreen.less} (97%) rename src/assets/css/components/common/{flex-box.scss => flex-box.less} (94%) rename src/assets/css/components/common/{fullscreen-loading-mask.scss => fullscreen-loading-mask.less} (99%) rename src/assets/css/components/common/{hide-scrollbar.scss => hide-scrollbar.less} (83%) rename src/assets/css/components/common/{indicator.scss => indicator.less} (53%) rename src/assets/css/components/common/{loading-mask.scss => loading-mask.less} (98%) rename src/assets/css/components/common/{sidebar.scss => sidebar.less} (76%) rename src/assets/css/components/common/{url-card.scss => url-card.less} (71%) rename src/assets/css/components/dnd/{drag-handle.scss => drag-handle.less} (100%) create mode 100644 src/assets/css/components/dnd/drop-mask.less delete mode 100644 src/assets/css/components/dnd/drop-mask.scss rename src/assets/css/components/system/{setting-card.scss => setting-card.less} (64%) rename src/assets/css/components/system/{statistics-card.scss => statistics-card.less} (80%) rename src/assets/css/components/tools/{load-more-card.scss => load-more-card.less} (75%) rename src/assets/css/components/tools/{repository-card.scss => repository-card.less} (80%) rename src/assets/css/components/tools/{store-card.scss => store-card.less} (80%) create mode 100644 src/assets/css/constants.less delete mode 100644 src/assets/css/constants.scss create mode 100644 src/assets/css/mixins.less rename src/assets/css/pages/{sign.scss => sign.less} (86%) create mode 100644 src/assets/css/pages/system-framework.less delete mode 100644 src/assets/css/pages/system-framework.scss rename src/assets/css/pages/system/{index.scss => index.less} (85%) rename src/assets/css/pages/system/{settings.scss => settings.less} (79%) rename src/assets/css/pages/system/{statistics.scss => statistics.less} (82%) rename src/assets/css/pages/system/tools/{base.scss => base.less} (83%) rename src/assets/css/pages/system/tools/{code.scss => code.less} (100%) rename src/assets/css/pages/system/tools/{execute.scss => execute.less} (100%) rename src/assets/css/pages/system/tools/{template.scss => template.less} (83%) rename src/assets/css/pages/{tools-framework.scss => tools-framework.less} (56%) rename src/assets/css/pages/tools/{create.scss => create.less} (80%) rename src/assets/css/pages/tools/{edit.scss => edit.less} (100%) rename src/assets/css/pages/tools/{index.scss => index.less} (88%) rename src/assets/css/pages/tools/{source.scss => source.less} (100%) rename src/assets/css/pages/tools/{store.scss => store.less} (89%) rename src/assets/css/pages/tools/{user.scss => user.less} (82%) rename src/assets/css/pages/tools/{view.scss => view.less} (100%) create mode 100644 src/assets/css/pages/user-framework.less delete mode 100644 src/assets/css/pages/user-framework.scss rename src/assets/css/pages/user/{index.scss => index.less} (75%) rename src/components/Playground/CodeEditor/Editor/{editor.scss => editor.less} (65%) rename src/components/Playground/CodeEditor/FileSelector/{file-selector.scss => file-selector.less} (100%) rename src/components/Playground/CodeEditor/{code-editor.scss => code-editor.less} (100%) rename src/components/Playground/Output/Preview/{preview.scss => preview.less} (100%) rename src/components/Playground/Output/Preview/{render.scss => render.less} (96%) rename src/components/Playground/Output/Transform/{transform.scss => transform.less} (100%) rename src/components/Playground/{playground.scss => playground.less} (100%) diff --git a/package-lock.json b/package-lock.json index 4975cea..f69d854 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,8 +53,8 @@ "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.11.0", "jsdom": "^24.1.3", + "less": "^4.2.0", "prettier": "^3.3.3", - "sass": "^1.79.5", "typescript": "^5.6.3", "typescript-eslint": "^8.9.0", "unplugin-auto-import": "^0.18.3", @@ -877,6 +877,8 @@ "version": "2.4.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", @@ -916,6 +918,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -1891,6 +1894,8 @@ "version": "4.0.1", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "readdirp": "^4.0.1" }, @@ -1954,6 +1959,18 @@ "dev": true, "license": "MIT" }, + "node_modules/copy-anything": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", + "dev": true, + "dependencies": { + "is-what": "^3.14.1" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/copy-to-clipboard": { "version": "3.3.3", "license": "MIT", @@ -2073,6 +2090,8 @@ "version": "1.0.3", "dev": true, "license": "Apache-2.0", + "optional": true, + "peer": true, "bin": { "detect-libc": "bin/detect-libc.js" }, @@ -2117,6 +2136,19 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/errno": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", + "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "dev": true, + "optional": true, + "dependencies": { + "prr": "~1.0.1" + }, + "bin": { + "errno": "cli.js" + } + }, "node_modules/error-ex": { "version": "1.3.2", "dev": true, @@ -2676,6 +2708,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "dev": true, + "optional": true + }, "node_modules/graphemer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", @@ -2744,6 +2783,19 @@ "node": ">= 4" } }, + "node_modules/image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "dev": true, + "optional": true, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/immediate": { "version": "3.0.6", "license": "MIT" @@ -2751,7 +2803,9 @@ "node_modules/immutable": { "version": "4.3.5", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/import-fresh": { "version": "3.3.0", @@ -2813,6 +2867,12 @@ "dev": true, "license": "MIT" }, + "node_modules/is-what": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", + "dev": true + }, "node_modules/isexe": { "version": "2.0.0", "dev": true, @@ -2948,6 +3008,32 @@ "dev": true, "license": "MIT" }, + "node_modules/less": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz", + "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==", + "dev": true, + "dependencies": { + "copy-anything": "^2.0.1", + "parse-node-version": "^1.0.1", + "tslib": "^2.3.0" + }, + "bin": { + "lessc": "bin/lessc" + }, + "engines": { + "node": ">=6" + }, + "optionalDependencies": { + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "needle": "^3.1.0", + "source-map": "~0.6.0" + } + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -3054,6 +3140,30 @@ "@jridgewell/sourcemap-codec": "^1.5.0" } }, + "node_modules/make-dir": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", + "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "dev": true, + "optional": true, + "dependencies": { + "pify": "^4.0.1", + "semver": "^5.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/make-dir/node_modules/semver": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, + "optional": true, + "bin": { + "semver": "bin/semver" + } + }, "node_modules/match-sorter": { "version": "6.3.4", "license": "MIT", @@ -3082,6 +3192,19 @@ "node": ">=8.6" } }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true, + "optional": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/mime-db": { "version": "1.52.0", "license": "MIT", @@ -3167,6 +3290,23 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/needle": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz", + "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", + "dev": true, + "optional": true, + "dependencies": { + "iconv-lite": "^0.6.3", + "sax": "^1.2.4" + }, + "bin": { + "needle": "bin/needle" + }, + "engines": { + "node": ">= 4.4.x" + } + }, "node_modules/no-case": { "version": "3.0.4", "dev": true, @@ -3179,7 +3319,9 @@ "node_modules/node-addon-api": { "version": "7.1.1", "dev": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/node-releases": { "version": "2.0.18", @@ -3278,6 +3420,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parse-node-version": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", + "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", + "dev": true, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/parse5": { "version": "7.1.2", "dev": true, @@ -3335,6 +3486,16 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true, + "optional": true, + "engines": { + "node": ">=6" + } + }, "node_modules/pkg-types": { "version": "1.2.1", "dev": true, @@ -3424,6 +3585,13 @@ "version": "1.1.0", "license": "MIT" }, + "node_modules/prr": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", + "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", + "dev": true, + "optional": true + }, "node_modules/psl": { "version": "1.9.0", "dev": true, @@ -4076,6 +4244,8 @@ "version": "4.0.2", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">= 14.16.0" }, @@ -4188,6 +4358,8 @@ "version": "1.79.5", "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@parcel/watcher": "^2.4.1", "chokidar": "^4.0.0", @@ -4201,6 +4373,13 @@ "node": ">=14.0.0" } }, + "node_modules/sax": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz", + "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==", + "dev": true, + "optional": true + }, "node_modules/saxes": { "version": "6.0.0", "dev": true, @@ -4273,6 +4452,16 @@ "tslib": "^2.0.3" } }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "dev": true, diff --git a/package.json b/package.json index 9e0e59d..9a415b4 100644 --- a/package.json +++ b/package.json @@ -68,8 +68,8 @@ "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.11.0", "jsdom": "^24.1.3", + "less": "^4.2.0", "prettier": "^3.3.3", - "sass": "^1.79.5", "typescript": "^5.6.3", "typescript-eslint": "^8.9.0", "unplugin-auto-import": "^0.18.3", diff --git a/src/assets/css/_mixins.scss b/src/assets/css/_mixins.scss deleted file mode 100644 index 47308ed..0000000 --- a/src/assets/css/_mixins.scss +++ /dev/null @@ -1,22 +0,0 @@ -@mixin keyframes($animationName) { - @-webkit-keyframes #{$animationName} { - @content - } - @-moz-keyframes #{$animationName} { - @content - } - @-o-keyframes #{$animationName} { - @content - } - @keyframes #{$animationName} { - @content - } -} - -@mixin unique-keyframes { - $animationName: unique-id(); - animation-name: $animationName; - @include keyframes($animationName) { - @content - } -} \ No newline at end of file diff --git a/src/assets/css/base.scss b/src/assets/css/base.less similarity index 100% rename from src/assets/css/base.scss rename to src/assets/css/base.less diff --git a/src/assets/css/common.scss b/src/assets/css/common.less similarity index 87% rename from src/assets/css/common.scss rename to src/assets/css/common.less index 3b85b09..025314e 100644 --- a/src/assets/css/common.scss +++ b/src/assets/css/common.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import '@/assets/css/constants'; #root { height: 100vh; @@ -6,8 +6,8 @@ } .body { - background-color: constants.$background-color; - color: constants.$font-main-color; + background-color: @background-color; + color: @font-main-color; user-select: none; min-width: 900px; min-height: 400px; @@ -27,7 +27,7 @@ } .background-origin { - background-color: constants.$origin-color; + background-color: @origin-color; } .center-box { diff --git a/src/assets/css/components/common/card.scss b/src/assets/css/components/common/card.less similarity index 53% rename from src/assets/css/components/common/card.scss rename to src/assets/css/components/common/card.less index 46a6be4..a19c6c0 100644 --- a/src/assets/css/components/common/card.scss +++ b/src/assets/css/components/common/card.less @@ -1,7 +1,7 @@ -@use '@/assets/css/constants' as constants; +@import '@/assets/css/constants'; .card-box { - background-color: constants.$origin-color; + 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/fit-center.scss b/src/assets/css/components/common/fit-center.less similarity index 98% rename from src/assets/css/components/common/fit-center.scss rename to src/assets/css/components/common/fit-center.less index fd07971..e3abab9 100644 --- a/src/assets/css/components/common/fit-center.scss +++ b/src/assets/css/components/common/fit-center.less @@ -4,4 +4,4 @@ align-items: center; width: 100%; height: 100%; -} \ No newline at end of file +} diff --git a/src/assets/css/components/common/fit-fullscreen.scss b/src/assets/css/components/common/fit-fullscreen.less similarity index 97% rename from src/assets/css/components/common/fit-fullscreen.scss rename to src/assets/css/components/common/fit-fullscreen.less index 83d0ff6..f3f3a4b 100644 --- a/src/assets/css/components/common/fit-fullscreen.scss +++ b/src/assets/css/components/common/fit-fullscreen.less @@ -2,4 +2,4 @@ position: relative; width: 100%; height: 100vh; -} \ No newline at end of file +} diff --git a/src/assets/css/components/common/flex-box.scss b/src/assets/css/components/common/flex-box.less similarity index 94% rename from src/assets/css/components/common/flex-box.scss rename to src/assets/css/components/common/flex-box.less index 2926ffc..cbae3d3 100644 --- a/src/assets/css/components/common/flex-box.scss +++ b/src/assets/css/components/common/flex-box.less @@ -2,4 +2,4 @@ > * { flex: 1; } -} \ No newline at end of file +} diff --git a/src/assets/css/components/common/fullscreen-loading-mask.scss b/src/assets/css/components/common/fullscreen-loading-mask.less similarity index 99% rename from src/assets/css/components/common/fullscreen-loading-mask.scss rename to src/assets/css/components/common/fullscreen-loading-mask.less index c4458cd..2e7cb52 100644 --- a/src/assets/css/components/common/fullscreen-loading-mask.scss +++ b/src/assets/css/components/common/fullscreen-loading-mask.less @@ -7,4 +7,4 @@ height: 100%; z-index: 100; background-color: rgba(200, 200, 200, 0.2); -} \ No newline at end of file +} diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.less similarity index 83% rename from src/assets/css/components/common/hide-scrollbar.scss rename to src/assets/css/components/common/hide-scrollbar.less index 758e68f..d033853 100644 --- a/src/assets/css/components/common/hide-scrollbar.scss +++ b/src/assets/css/components/common/hide-scrollbar.less @@ -1,5 +1,5 @@ -@use '@/assets/css/constants' as constants; -@use '@/assets/css/mixins' as mixins; +@import "@/assets/css/constants"; +@import "@/assets/css/mixins"; .hide-scrollbar-mask { position: relative; @@ -41,12 +41,12 @@ width: 100%; height: 100%; border-radius: 8px; - background-color: constants.$font-secondary-color; + background-color: @font-secondary-color; transition: background-color .2s; } :hover { - background-color: constants.$font-main-color; + background-color: @font-main-color; } } @@ -55,14 +55,14 @@ opacity: 0; animation: 0.4s linear; - @include mixins.unique-keyframes { + .keyframes(m7t06K, { 0% { opacity: 0.5; } 100% { opacity: 0; } - } + }); } } diff --git a/src/assets/css/components/common/indicator.scss b/src/assets/css/components/common/indicator.less similarity index 53% rename from src/assets/css/components/common/indicator.scss rename to src/assets/css/components/common/indicator.less index be5054f..0ac17b1 100644 --- a/src/assets/css/components/common/indicator.scss +++ b/src/assets/css/components/common/indicator.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import '@/assets/css/constants'; .dot-list { display: flex; @@ -15,20 +15,16 @@ width: 10px; height: 10px; border-radius: 50%; - border: { - width: 2px; - color: constants.$font-secondary-color; - style: solid; - }; + border: 2px solid @font-secondary-color; transition: all .2s; } :hover { - background-color: constants.$focus-color; + background-color: @focus-color; } } .active > * { - background-color: constants.$font-secondary-color !important; + background-color: @font-secondary-color !important; } } diff --git a/src/assets/css/components/common/loading-mask.scss b/src/assets/css/components/common/loading-mask.less similarity index 98% rename from src/assets/css/components/common/loading-mask.scss rename to src/assets/css/components/common/loading-mask.less index 9b44a1a..bbdda27 100644 --- a/src/assets/css/components/common/loading-mask.scss +++ b/src/assets/css/components/common/loading-mask.less @@ -5,4 +5,4 @@ width: 100%; height: 100%; z-index: 100; -} \ No newline at end of file +} diff --git a/src/assets/css/components/common/sidebar.scss b/src/assets/css/components/common/sidebar.less similarity index 76% rename from src/assets/css/components/common/sidebar.scss rename to src/assets/css/components/common/sidebar.less index 08fe6e5..5c9a44a 100644 --- a/src/assets/css/components/common/sidebar.scss +++ b/src/assets/css/components/common/sidebar.less @@ -1,5 +1,5 @@ -@use "@/assets/css/constants" as constants; -@use "@/assets/css/mixins" as mixins; +@import "@/assets/css/constants"; +@import "@/assets/css/mixins"; .sidebar { display: flex; @@ -14,7 +14,7 @@ align-items: center; font-weight: bold; padding: 10px 14px; - color: constants.$main-color; + color: @main-color; overflow: hidden; .icon-box { @@ -24,7 +24,7 @@ padding: 10px; width: 40px; height: 40px; - font-size: constants.$SIZE_ICON_SM; + font-size: @SIZE_ICON_SM; border-radius: 8px; cursor: pointer; @@ -34,7 +34,7 @@ } &:hover { - background-color: constants.$background-color; + background-color: @background-color; } } @@ -79,7 +79,7 @@ padding: 0 10px; width: 40px; height: 40px; - font-size: constants.$SIZE_ICON_SM; + font-size: @SIZE_ICON_SM; cursor: pointer; img { @@ -93,7 +93,7 @@ height: 100%; width: 100%; transition: all 0.2s; - background-color: constants.$origin-color; + background-color: @origin-color; .text { flex: 1; @@ -104,11 +104,11 @@ } &.active { - color: constants.$origin-color; - background-color: constants.$main-color; + color: @origin-color; + background-color: @main-color; img { - filter: drop-shadow(1000px 0 0 constants.$origin-color); + filter: drop-shadow(1000px 0 0 @origin-color); transform: translate(-1000px); } } @@ -121,7 +121,7 @@ padding-left: 10px; z-index: 10000; animation: 0.1s ease forwards; - @include mixins.unique-keyframes { + .keyframes(XxrGiu, { 0% { transform: translateX(0); opacity: 1; @@ -130,16 +130,16 @@ transform: translateX(-10px); opacity: 0; } - } + }); .content { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px; - background-color: constants.$origin-color; + background-color: @origin-color; border-radius: 8px; - box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1); + box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1); .item { border-radius: 8px; @@ -157,13 +157,13 @@ } &.active { - color: constants.$origin-color; - background-color: constants.$main-color; + color: @origin-color; + background-color: @main-color; } } &:hover a:not(.active) { - background-color: constants.$background-color; + background-color: @background-color; } } } @@ -172,14 +172,14 @@ &:hover { > .menu-bt { a:not(.active) { - background-color: constants.$background-color; + background-color: @background-color; } } .submenu { visibility: visible; animation: 0.3s ease; - @include mixins.unique-keyframes { + .keyframes(f6yTZM, { 0% { transform: translateX(-10px); opacity: 0; @@ -188,7 +188,7 @@ transform: translateX(0); opacity: 1; } - } + }); } } } @@ -196,12 +196,8 @@ .delete { .menu-bt { - border: { - width: 1px; - color: constants.$error-secondary-color; - style: dashed; - }; - filter: drop-shadow(1000px 0 0 constants.$error-secondary-color); + border: 1px dashed @error-secondary-color; + filter: drop-shadow(1000px 0 0 @error-secondary-color); transform: translate(-1000px); > a { @@ -215,11 +211,7 @@ .separate { height: 0; margin: 10px 5px; - border: { - width: 1px; - color: constants.$font-secondary-color; - style: solid; - }; + border: 1px solid @font-secondary-color; opacity: 0.4; } @@ -228,7 +220,7 @@ align-items: center; font-weight: bold; padding: 8px 14px; - color: constants.$main-color; + color: @main-color; .icon-user { display: flex; @@ -238,9 +230,9 @@ margin-left: 4px; width: 36px; height: 36px; - font-size: constants.$SIZE_ICON_XS; - border: 2px constants.$font-secondary-color solid; - color: constants.$font-secondary-color; + font-size: @SIZE_ICON_XS; + border: 2px @font-secondary-color solid; + color: @font-secondary-color; border-radius: 50%; overflow: hidden; cursor: pointer; @@ -255,26 +247,26 @@ flex: 1; padding-left: 10px; font-size: 1.4em; - color: constants.$font-main-color; + color: @font-main-color; user-select: text; overflow: hidden; text-overflow: ellipsis; a { - color: constants.$main-color; + color: @main-color; text-decoration: underline; } } .icon-exit { - font-size: constants.$SIZE_ICON_XS; - color: constants.$error-color; + font-size: @SIZE_ICON_XS; + color: @error-color; padding: 6px 10px; cursor: pointer; &:hover { border-radius: 8px; - background-color: constants.$background-color; + background-color: @background-color; } } } @@ -327,14 +319,14 @@ .content { padding: 8px; border-radius: 8px; - background-color: constants.$origin-color; + background-color: @origin-color; .icon-exit { padding: 4px 8px; &:hover { border-radius: 8px; - background-color: constants.$background-color; + background-color: @background-color; } } } @@ -347,7 +339,7 @@ &:hover .submenu-exit { display: block; animation: 0.3s ease; - @include mixins.unique-keyframes { + .keyframes(mfdCZC, { 0% { transform: translateX(-10px); opacity: 0; @@ -356,7 +348,7 @@ transform: translateX(0); opacity: 1; } - } + }); } } } diff --git a/src/assets/css/components/common/url-card.scss b/src/assets/css/components/common/url-card.less similarity index 71% rename from src/assets/css/components/common/url-card.scss rename to src/assets/css/components/common/url-card.less index 8110115..4cda414 100644 --- a/src/assets/css/components/common/url-card.scss +++ b/src/assets/css/components/common/url-card.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-url-card] { cursor: pointer; @@ -16,8 +16,8 @@ } .icon { - color: constants.$production-color; - font-size: constants.$SIZE_ICON_XL; + color: @production-color; + font-size: @SIZE_ICON_XL; } .text { diff --git a/src/assets/css/components/dnd/drag-handle.scss b/src/assets/css/components/dnd/drag-handle.less similarity index 100% rename from src/assets/css/components/dnd/drag-handle.scss rename to src/assets/css/components/dnd/drag-handle.less diff --git a/src/assets/css/components/dnd/drop-mask.less b/src/assets/css/components/dnd/drop-mask.less new file mode 100644 index 0000000..7f3f8f1 --- /dev/null +++ b/src/assets/css/components/dnd/drop-mask.less @@ -0,0 +1,22 @@ +@import "@/assets/css/constants"; + +[data-component=component-drop-mask] { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + padding: 0 10px 10px; + background-color: @origin-color; + + .drop-mask-border { + 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.scss b/src/assets/css/components/dnd/drop-mask.scss deleted file mode 100644 index f721b1b..0000000 --- a/src/assets/css/components/dnd/drop-mask.scss +++ /dev/null @@ -1,30 +0,0 @@ -@use "@/assets/css/constants" as constants; - -[data-component=component-drop-mask] { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - padding: { - left: 10px; - right: 10px; - bottom: 10px; - }; - background-color: constants.$origin-color; - - .drop-mask-border { - display: flex; - width: 100%; - height: 100%; - justify-content: center; - align-items: center; - border: { - width: 2px; - color: constants.$font-secondary-color; - style: dashed; - radius: 8px; - }; - font-size: 1.8em; - } -} diff --git a/src/assets/css/components/system/setting-card.scss b/src/assets/css/components/system/setting-card.less similarity index 64% rename from src/assets/css/components/system/setting-card.scss rename to src/assets/css/components/system/setting-card.less index 4703dc8..39f5736 100644 --- a/src/assets/css/components/system/setting-card.scss +++ b/src/assets/css/components/system/setting-card.less @@ -1,17 +1,17 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-setting-card] { .settings-card { padding: 20px; gap: 20px; - color: constants.$main-color; + color: @main-color; > .head { align-items: center; gap: 5px; .icon { - font-size: constants.$SIZE_ICON_MD; + font-size: @SIZE_ICON_MD; flex: 0 0 auto; } @@ -22,11 +22,11 @@ :nth-child(n+3) { flex: 0 0 auto; - color: constants.$font-main-color; + color: @font-main-color; } .bt-save { - color: constants.$main-color; + color: @main-color; } } } diff --git a/src/assets/css/components/system/statistics-card.scss b/src/assets/css/components/system/statistics-card.less similarity index 80% rename from src/assets/css/components/system/statistics-card.scss rename to src/assets/css/components/system/statistics-card.less index 600a45f..e1c726f 100644 --- a/src/assets/css/components/system/statistics-card.scss +++ b/src/assets/css/components/system/statistics-card.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-statistics-card] { .statistics-card { @@ -8,10 +8,10 @@ > .head { align-items: center; gap: 5px; - color: constants.$main-color; + color: @main-color; .icon { - font-size: constants.$SIZE_ICON_MD; + font-size: @SIZE_ICON_MD; flex: 0 0 auto; } @@ -22,7 +22,7 @@ :nth-child(n+3) { flex: 0 0 auto; - color: constants.$font-main-color; + color: @font-main-color; } } @@ -33,11 +33,11 @@ .key, .value-percent { flex: 0 0 auto; - color: constants.$font-main-color; + color: @font-main-color; } .value { - color: constants.$font-secondary-color; + color: @font-secondary-color; overflow: hidden; > * { diff --git a/src/assets/css/components/tools/load-more-card.scss b/src/assets/css/components/tools/load-more-card.less similarity index 75% rename from src/assets/css/components/tools/load-more-card.scss rename to src/assets/css/components/tools/load-more-card.less index aa3d7ab..716f4bf 100644 --- a/src/assets/css/components/tools/load-more-card.scss +++ b/src/assets/css/components/tools/load-more-card.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-load-more-card] { cursor: pointer; @@ -11,8 +11,8 @@ .icon { display: flex; - font-size: constants.$SIZE_ICON_XXL; - color: constants.$production-color; + font-size: @SIZE_ICON_XXL; + color: @production-color; align-items: center; transform: translateY(-20px); } diff --git a/src/assets/css/components/tools/repository-card.scss b/src/assets/css/components/tools/repository-card.less similarity index 80% rename from src/assets/css/components/tools/repository-card.scss rename to src/assets/css/components/tools/repository-card.less index b563c6f..b106fc4 100644 --- a/src/assets/css/components/tools/repository-card.scss +++ b/src/assets/css/components/tools/repository-card.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-repository-card] { height: 100%; @@ -34,12 +34,12 @@ display: flex; padding-top: 10px; padding-bottom: 20px; - color: constants.$production-color; - font-size: constants.$SIZE_ICON_XL; + color: @production-color; + font-size: @SIZE_ICON_XL; justify-content: center; img { - width: constants.$SIZE_ICON_XL; + width: @SIZE_ICON_XL; } } diff --git a/src/assets/css/components/tools/store-card.scss b/src/assets/css/components/tools/store-card.less similarity index 80% rename from src/assets/css/components/tools/store-card.scss rename to src/assets/css/components/tools/store-card.less index e4ad6e1..ef19aa4 100644 --- a/src/assets/css/components/tools/store-card.scss +++ b/src/assets/css/components/tools/store-card.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=component-store-card] { height: 100%; @@ -35,7 +35,7 @@ z-index: 100; > *:hover { - color: constants.$font-secondary-color; + color: @font-secondary-color; } } } @@ -44,12 +44,12 @@ display: flex; padding-top: 10px; padding-bottom: 20px; - color: constants.$production-color; - font-size: constants.$SIZE_ICON_XL; + color: @production-color; + font-size: @SIZE_ICON_XL; justify-content: center; img { - width: constants.$SIZE_ICON_XL; + width: @SIZE_ICON_XL; } } @@ -62,12 +62,8 @@ } .tool-desc { - margin: { - top: 10px; - left: auto; - right: auto; - }; - color: constants.$font-secondary-color; + margin: 10px auto 0; + color: @font-secondary-color; overflow: hidden; text-overflow: ellipsis; max-height: 40px; diff --git a/src/assets/css/constants.less b/src/assets/css/constants.less new file mode 100644 index 0000000..a34f019 --- /dev/null +++ b/src/assets/css/constants.less @@ -0,0 +1,22 @@ +@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/constants.scss b/src/assets/css/constants.scss deleted file mode 100644 index aa21c9f..0000000 --- a/src/assets/css/constants.scss +++ /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; \ No newline at end of file diff --git a/src/assets/css/mixins.less b/src/assets/css/mixins.less new file mode 100644 index 0000000..a98a3c8 --- /dev/null +++ b/src/assets/css/mixins.less @@ -0,0 +1,15 @@ +.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.scss b/src/assets/css/pages/sign.less similarity index 86% rename from src/assets/css/pages/sign.scss rename to src/assets/css/pages/sign.less index 62748e0..ce77959 100644 --- a/src/assets/css/pages/sign.scss +++ b/src/assets/css/pages/sign.less @@ -1,5 +1,4 @@ -@use "@/assets/css/mixins" as mixins; -@use "@/assets/css/constants" as constants; +@import "@/assets/css/constants"; [data-component=sign] { background-color: #D2D0DD; @@ -10,12 +9,12 @@ } a:hover { - color: constants.$production-color; + color: @production-color; } .sign-box { position: relative; - background-color: constants.$origin-color; + background-color: @origin-color; width: 900px; height: 600px; overflow: hidden; @@ -42,7 +41,7 @@ .primary { font-size: 2.4em; font-weight: bolder; - color: constants.$production-color; + color: @production-color; } .secondary { @@ -71,7 +70,7 @@ text-align: center; a { - color: constants.$production-color; + color: @production-color; } } } @@ -79,7 +78,7 @@ .verify { a { - color: constants.$production-color; + color: @production-color; font-weight: bolder; } } @@ -120,7 +119,7 @@ position: absolute; width: 128px; height: 128px; - background-color: constants.$production-color; + background-color: @production-color; border-radius: 50%; bottom: 0; left: 50%; diff --git a/src/assets/css/pages/system-framework.less b/src/assets/css/pages/system-framework.less new file mode 100644 index 0000000..a39df77 --- /dev/null +++ b/src/assets/css/pages/system-framework.less @@ -0,0 +1,13 @@ +@import "@/assets/css/constants"; + +[data-component=system-framework] { + .left-panel { + background-color: @origin-color; + } + + .right-panel { + flex: 1; + width: 0; + background-color: @background-color; + } +} diff --git a/src/assets/css/pages/system-framework.scss b/src/assets/css/pages/system-framework.scss deleted file mode 100644 index 4f8ea07..0000000 --- a/src/assets/css/pages/system-framework.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use "@/assets/css/constants" as constants; -@use "@/assets/css/mixins" as mixins; - -[data-component=system-framework] { - .left-panel { - background-color: constants.$origin-color; - } - - .right-panel { - flex: 1; - width: 0; - background-color: constants.$background-color; - } -} diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.less similarity index 85% rename from src/assets/css/pages/system/index.scss rename to src/assets/css/pages/system/index.less index 5dbfd3f..d10c4b8 100644 --- a/src/assets/css/pages/system/index.scss +++ b/src/assets/css/pages/system/index.less @@ -1,5 +1,3 @@ -@use '@/assets/css/constants' as constants; - [data-component=system] { .root-content { padding: 20px; diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.less similarity index 79% rename from src/assets/css/pages/system/settings.scss rename to src/assets/css/pages/system/settings.less index 7db4529..64c0e64 100644 --- a/src/assets/css/pages/system/settings.scss +++ b/src/assets/css/pages/system/settings.less @@ -1,5 +1,3 @@ -@use '@/assets/css/constants' as constants; - [data-component=system-settings] { .root-content { padding: 20px; diff --git a/src/assets/css/pages/system/statistics.scss b/src/assets/css/pages/system/statistics.less similarity index 82% rename from src/assets/css/pages/system/statistics.scss rename to src/assets/css/pages/system/statistics.less index 40e15a5..3b6dc2f 100644 --- a/src/assets/css/pages/system/statistics.scss +++ b/src/assets/css/pages/system/statistics.less @@ -1,5 +1,3 @@ -@use '@/assets/css/constants' as constants; - [data-component=system-statistics] { .root-content { padding: 20px; diff --git a/src/assets/css/pages/system/tools/base.scss b/src/assets/css/pages/system/tools/base.less similarity index 83% rename from src/assets/css/pages/system/tools/base.scss rename to src/assets/css/pages/system/tools/base.less index 8133ee5..cc874ae 100644 --- a/src/assets/css/pages/system/tools/base.scss +++ b/src/assets/css/pages/system/tools/base.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=system-tools-base] { .root-content { @@ -9,7 +9,7 @@ .has-edited::after { content: '*'; - color: constants.$font-secondary-color; + color: @font-secondary-color; } >*:first-child { @@ -30,7 +30,7 @@ position: absolute; top: 10px; right: 10px; - background-color: constants.$font-secondary-color; + background-color: @font-secondary-color; width: 32px; height: 32px; border-radius: 50%; diff --git a/src/assets/css/pages/system/tools/code.scss b/src/assets/css/pages/system/tools/code.less similarity index 100% rename from src/assets/css/pages/system/tools/code.scss rename to src/assets/css/pages/system/tools/code.less diff --git a/src/assets/css/pages/system/tools/execute.scss b/src/assets/css/pages/system/tools/execute.less similarity index 100% rename from src/assets/css/pages/system/tools/execute.scss rename to src/assets/css/pages/system/tools/execute.less diff --git a/src/assets/css/pages/system/tools/template.scss b/src/assets/css/pages/system/tools/template.less similarity index 83% rename from src/assets/css/pages/system/tools/template.scss rename to src/assets/css/pages/system/tools/template.less index 04b9f99..9d63a6f 100644 --- a/src/assets/css/pages/system/tools/template.scss +++ b/src/assets/css/pages/system/tools/template.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=system-tools-template] { .root-content { @@ -9,7 +9,7 @@ .has-edited::after { content: '*'; - color: constants.$font-secondary-color; + color: @font-secondary-color; } >*:first-child { @@ -30,7 +30,7 @@ position: absolute; top: 10px; right: 10px; - background-color: constants.$font-secondary-color; + background-color: @font-secondary-color; width: 32px; height: 32px; border-radius: 50%; diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.less similarity index 56% rename from src/assets/css/pages/tools-framework.scss rename to src/assets/css/pages/tools-framework.less index 9fd7751..be45eb0 100644 --- a/src/assets/css/pages/tools-framework.scss +++ b/src/assets/css/pages/tools-framework.less @@ -1,9 +1,8 @@ -@use "@/assets/css/constants" as constants; -@use "@/assets/css/mixins" as mixins; +@import "@/assets/css/constants"; [data-component=tools-framework] { .left-panel { - background-color: constants.$origin-color; + background-color: @origin-color; .menu-droppable { display: flex; @@ -17,6 +16,6 @@ .right-panel { flex: 1; width: 0; - background-color: constants.$background-color; + background-color: @background-color; } } diff --git a/src/assets/css/pages/tools/create.scss b/src/assets/css/pages/tools/create.less similarity index 80% rename from src/assets/css/pages/tools/create.scss rename to src/assets/css/pages/tools/create.less index 5a9e83c..26ee99e 100644 --- a/src/assets/css/pages/tools/create.scss +++ b/src/assets/css/pages/tools/create.less @@ -1,5 +1,4 @@ -@use "@/assets/css/mixins" as mixins; -@use "@/assets/css/constants" as constants; +@import "@/assets/css/constants"; [data-component=tools-create] { .root-content { @@ -22,7 +21,7 @@ justify-content: center; align-items: center; font-size: 1.6em; - color: constants.$production-color; + color: @production-color; font-weight: bolder; } } @@ -33,7 +32,7 @@ .help { margin-left: 6px; - color: constants.$font-main-color; + color: @font-main-color; font-size: 0.8em; } @@ -52,7 +51,7 @@ .no-preview { font-weight: bolder; - color: constants.$font-secondary-color; + color: @font-secondary-color; font-size: 1.4em; } } diff --git a/src/assets/css/pages/tools/edit.scss b/src/assets/css/pages/tools/edit.less similarity index 100% rename from src/assets/css/pages/tools/edit.scss rename to src/assets/css/pages/tools/edit.less diff --git a/src/assets/css/pages/tools/index.scss b/src/assets/css/pages/tools/index.less similarity index 88% rename from src/assets/css/pages/tools/index.scss rename to src/assets/css/pages/tools/index.less index f6c1481..62c0c24 100644 --- a/src/assets/css/pages/tools/index.scss +++ b/src/assets/css/pages/tools/index.less @@ -1,5 +1,4 @@ -@use "@/assets/css/mixins" as mixins; -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=tools] { .root-content { @@ -81,17 +80,13 @@ :first-child, :last-child { height: 0; - border: { - width: 1px; - color: constants.$divide-color; - style: dashed; - }; + border: 1px dashed @divide-color; } .divider-text { flex: 0 0 auto; font-size: 1.2em; - color: constants.$font-secondary-color; + color: @font-secondary-color; } } diff --git a/src/assets/css/pages/tools/source.scss b/src/assets/css/pages/tools/source.less similarity index 100% rename from src/assets/css/pages/tools/source.scss rename to src/assets/css/pages/tools/source.less diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.less similarity index 89% rename from src/assets/css/pages/tools/store.scss rename to src/assets/css/pages/tools/store.less index 4188cbe..ad564cf 100644 --- a/src/assets/css/pages/tools/store.scss +++ b/src/assets/css/pages/tools/store.less @@ -1,4 +1,4 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=tools-store] { .search { @@ -37,7 +37,7 @@ justify-content: center; font-size: 1.4em; font-weight: bolder; - color: constants.$font-secondary-color; + color: @font-secondary-color; } } diff --git a/src/assets/css/pages/tools/user.scss b/src/assets/css/pages/tools/user.less similarity index 82% rename from src/assets/css/pages/tools/user.scss rename to src/assets/css/pages/tools/user.less index 7c5a5e8..96c66a3 100644 --- a/src/assets/css/pages/tools/user.scss +++ b/src/assets/css/pages/tools/user.less @@ -1,12 +1,7 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=tools-store-user] .root-content { - padding: { - top: 80px; - left: 20px; - right: 20px; - bottom: 20px; - }; + padding: 80px 20px 20px 20px; .root-box { width: 100%; @@ -36,10 +31,7 @@ } .info-name { - margin: { - top: 20px; - left: 24px; - }; + margin: 20px 0 0 24px; justify-content: center; > * { @@ -49,7 +41,7 @@ .nickname { font-size: 2.4em; font-weight: bolder; - color: constants.$production-color; + color: @production-color; } .url { @@ -80,7 +72,7 @@ margin-bottom: 20px; font-size: 1.2em; font-weight: bolder; - color: constants.$font-secondary-color; + color: @font-secondary-color; } } } diff --git a/src/assets/css/pages/tools/view.scss b/src/assets/css/pages/tools/view.less similarity index 100% rename from src/assets/css/pages/tools/view.scss rename to src/assets/css/pages/tools/view.less diff --git a/src/assets/css/pages/user-framework.less b/src/assets/css/pages/user-framework.less new file mode 100644 index 0000000..ff9e98a --- /dev/null +++ b/src/assets/css/pages/user-framework.less @@ -0,0 +1,13 @@ +@import "@/assets/css/constants"; + +[data-component=user-framework] { + .left-panel { + background-color: @origin-color; + } + + .right-panel { + flex: 1; + width: 0; + background-color: @background-color; + } +} diff --git a/src/assets/css/pages/user-framework.scss b/src/assets/css/pages/user-framework.scss deleted file mode 100644 index cd21ab7..0000000 --- a/src/assets/css/pages/user-framework.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use "@/assets/css/constants" as constants; -@use "@/assets/css/mixins" as mixins; - -[data-component=user-framework] { - .left-panel { - background-color: constants.$origin-color; - } - - .right-panel { - flex: 1; - width: 0; - background-color: constants.$background-color; - } -} diff --git a/src/assets/css/pages/user/index.scss b/src/assets/css/pages/user/index.less similarity index 75% rename from src/assets/css/pages/user/index.scss rename to src/assets/css/pages/user/index.less index 1b1bce0..55cea6d 100644 --- a/src/assets/css/pages/user/index.scss +++ b/src/assets/css/pages/user/index.less @@ -1,12 +1,7 @@ -@use '@/assets/css/constants' as constants; +@import "@/assets/css/constants"; [data-component=user] .root-content { - padding: { - top: 80px; - left: 20px; - right: 20px; - bottom: 20px; - }; + padding: 80px 20px 20px 20px; .card-box { width: 100%; @@ -17,20 +12,14 @@ padding-bottom: 20px; > :not(:first-child) { - padding: { - left: 60px; - right: 60px; - }; + padding: 0 60px; } .divide { height: 1px; width: calc(100% - 120px); - background-color: constants.$divide-color; - margin: { - left: 60px; - right: 60px; - }; + background-color: @divide-color; + margin: 0 60px; } .info { @@ -53,10 +42,7 @@ } .info-name { - margin: { - top: 20px; - left: 24px; - }; + margin: 20px 0 0 24px; justify-content: center; > * { @@ -66,7 +52,7 @@ .nickname { font-size: 2.4em; font-weight: bolder; - color: constants.$production-color; + color: @production-color; } .url { @@ -83,9 +69,7 @@ align-items: center; .content { - padding: { - bottom: 30px; - }; + padding-bottom: 30px; justify-content: space-between; align-items: center; width: 100%; @@ -107,11 +91,8 @@ .table { gap: 24px; - - padding: { - top: 30px; - bottom: 20px; - }; + padding-top: 30px; + padding-bottom: 20px; .row { > * { diff --git a/src/components/Playground/CodeEditor/Editor/editor.scss b/src/components/Playground/CodeEditor/Editor/editor.less similarity index 65% rename from src/components/Playground/CodeEditor/Editor/editor.scss rename to src/components/Playground/CodeEditor/Editor/editor.less index e9f66a6..27fcffd 100644 --- a/src/components/Playground/CodeEditor/Editor/editor.scss +++ b/src/components/Playground/CodeEditor/Editor/editor.less @@ -1,23 +1,16 @@ -@mixin keyframes($animationName) { - @-webkit-keyframes #{$animationName} { - @content +.keyframes(@animationName, @content) { + animation-name: @animationName; + @-webkit-keyframes @animationName { + @content(); } - @-moz-keyframes #{$animationName} { - @content + @-moz-keyframes @animationName { + @content(); } - @-o-keyframes #{$animationName} { - @content + @-o-keyframes @animationName { + @content(); } - @keyframes #{$animationName} { - @content - } -} - -@mixin unique-keyframes { - $animationName: unique-id(); - animation-name: $animationName; - @include keyframes($animationName) { - @content + @keyframes @animationName { + @content(); } } @@ -77,15 +70,13 @@ width: 10px; height: 10px; border-radius: 50%; - border: { - top: 2px #666 solid; - bottom: 2px #ddd solid; - left: 2px #ddd solid; - right: 2px #ddd solid; - }; + border-top: 2px #666 solid; + border-right: 2px #ddd solid; + border-bottom: 2px #ddd solid; + border-left: 2px #ddd solid; animation: .6s linear infinite; - @include unique-keyframes { + .keyframes(fUHD7o, { 0% { transform: rotateZ(0); } @@ -93,6 +84,6 @@ 100% { transform: rotateZ(360deg); } - } + }); } -} \ No newline at end of file +} diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx index bb4b9db..30e8cb6 100644 --- a/src/components/Playground/CodeEditor/Editor/index.tsx +++ b/src/components/Playground/CodeEditor/Editor/index.tsx @@ -1,6 +1,6 @@ import { editor, Selection } from 'monaco-editor' import MonacoEditor, { Monaco } from '@monaco-editor/react' -import '@/components/Playground/CodeEditor/Editor/editor.scss' +import '@/components/Playground/CodeEditor/Editor/editor.less' import '@/components/Playground/CodeEditor/Editor/loader' import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared' import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files' diff --git a/src/components/Playground/CodeEditor/FileSelector/file-selector.scss b/src/components/Playground/CodeEditor/FileSelector/file-selector.less similarity index 100% rename from src/components/Playground/CodeEditor/FileSelector/file-selector.scss rename to src/components/Playground/CodeEditor/FileSelector/file-selector.less diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx index ffe35b0..49cdf6f 100644 --- a/src/components/Playground/CodeEditor/FileSelector/index.tsx +++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx @@ -1,4 +1,4 @@ -import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss' +import '@/components/Playground/CodeEditor/FileSelector/file-selector.less' import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' import FlexBox from '@/components/common/FlexBox' import { IFiles } from '@/components/Playground/shared' diff --git a/src/components/Playground/CodeEditor/code-editor.scss b/src/components/Playground/CodeEditor/code-editor.less similarity index 100% rename from src/components/Playground/CodeEditor/code-editor.scss rename to src/components/Playground/CodeEditor/code-editor.less diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx index 9116633..1cb2344 100644 --- a/src/components/Playground/CodeEditor/index.tsx +++ b/src/components/Playground/CodeEditor/index.tsx @@ -1,5 +1,5 @@ import _ from 'lodash' -import '@/components/Playground/CodeEditor/code-editor.scss' +import '@/components/Playground/CodeEditor/code-editor.less' import FlexBox from '@/components/common/FlexBox' import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared' import { diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx index 1d162ee..60acbf1 100644 --- a/src/components/Playground/Output/Preview/Render.tsx +++ b/src/components/Playground/Output/Preview/Render.tsx @@ -1,5 +1,5 @@ import { ChangeEvent } from 'react' -import '@/components/Playground/Output/Preview/render.scss' +import '@/components/Playground/Output/Preview/render.less' import { COLOR_FONT_MAIN } from '@/constants/common.constants' import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw' import HideScrollbar from '@/components/common/HideScrollbar' diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx index ea0145e..2c9b9f2 100644 --- a/src/components/Playground/Output/Preview/index.tsx +++ b/src/components/Playground/Output/Preview/index.tsx @@ -1,4 +1,4 @@ -import '@/components/Playground/Output/Preview/preview.scss' +import '@/components/Playground/Output/Preview/preview.less' import { IFiles, IImportMap } from '@/components/Playground/shared' import Compiler from '@/components/Playground/compiler' import Render from '@/components/Playground/Output/Preview/Render' diff --git a/src/components/Playground/Output/Preview/preview.scss b/src/components/Playground/Output/Preview/preview.less similarity index 100% rename from src/components/Playground/Output/Preview/preview.scss rename to src/components/Playground/Output/Preview/preview.less diff --git a/src/components/Playground/Output/Preview/render.scss b/src/components/Playground/Output/Preview/render.less similarity index 96% rename from src/components/Playground/Output/Preview/render.scss rename to src/components/Playground/Output/Preview/render.less index e39b9a8..cdda30b 100644 --- a/src/components/Playground/Output/Preview/render.scss +++ b/src/components/Playground/Output/Preview/render.less @@ -1,5 +1,3 @@ -@use '@/assets/css/constants' as constants; - [data-component=playground-output-preview-render] { border: none; height: 100%; diff --git a/src/components/Playground/Output/Transform/index.tsx b/src/components/Playground/Output/Transform/index.tsx index 6883751..9378425 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 '@/components/Playground/Output/Transform/transform.scss' +import '@/components/Playground/Output/Transform/transform.less' import { IFile, ITheme } from '@/components/Playground/shared' import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files' import Compiler from '@/components/Playground/compiler' diff --git a/src/components/Playground/Output/Transform/transform.scss b/src/components/Playground/Output/Transform/transform.less similarity index 100% rename from src/components/Playground/Output/Transform/transform.scss rename to src/components/Playground/Output/Transform/transform.less diff --git a/src/components/Playground/index.tsx b/src/components/Playground/index.tsx index 9e45a19..6e5a3fa 100644 --- a/src/components/Playground/index.tsx +++ b/src/components/Playground/index.tsx @@ -1,4 +1,4 @@ -import '@/components/Playground/playground.scss' +import '@/components/Playground/playground.less' import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared' import { ENTRY_FILE_NAME, diff --git a/src/components/Playground/playground.scss b/src/components/Playground/playground.less similarity index 100% rename from src/components/Playground/playground.scss rename to src/components/Playground/playground.less diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx index 1dded04..51132ab 100644 --- a/src/components/common/Card.tsx +++ b/src/components/common/Card.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' -import '@/assets/css/components/common/card.scss' +import '@/assets/css/components/common/card.less' type CardProps = DetailedHTMLProps, HTMLDivElement> diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx index a0be5ce..444264e 100644 --- a/src/components/common/FitCenter.tsx +++ b/src/components/common/FitCenter.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' -import '@/assets/css/components/common/fit-center.scss' +import '@/assets/css/components/common/fit-center.less' interface FitCenterProps extends DetailedHTMLProps, HTMLDivElement> { vertical?: boolean diff --git a/src/components/common/FitFullscreen.tsx b/src/components/common/FitFullscreen.tsx index 8d80704..772e2c0 100644 --- a/src/components/common/FitFullscreen.tsx +++ b/src/components/common/FitFullscreen.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' -import '@/assets/css/components/common/fit-fullscreen.scss' +import '@/assets/css/components/common/fit-fullscreen.less' interface FitFullscreenProps extends DetailedHTMLProps, HTMLDivElement> { diff --git a/src/components/common/FlexBox.tsx b/src/components/common/FlexBox.tsx index 58ca4d7..30ab610 100644 --- a/src/components/common/FlexBox.tsx +++ b/src/components/common/FlexBox.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' -import '@/assets/css/components/common/flex-box.scss' +import '@/assets/css/components/common/flex-box.less' interface FlexBoxProps extends DetailedHTMLProps, HTMLDivElement> { direction?: 'horizontal' | 'vertical' diff --git a/src/components/common/FullscreenLoadingMask.tsx b/src/components/common/FullscreenLoadingMask.tsx index 2c9240e..8ac2dc1 100644 --- a/src/components/common/FullscreenLoadingMask.tsx +++ b/src/components/common/FullscreenLoadingMask.tsx @@ -1,5 +1,5 @@ import Icon from '@ant-design/icons' -import '@/assets/css/components/common/fullscreen-loading-mask.scss' +import '@/assets/css/components/common/fullscreen-loading-mask.less' import { COLOR_FONT_MAIN } from '@/constants/common.constants' import FitFullscreen from '@/components/common/FitFullscreen' diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx index e064482..8c9d209 100644 --- a/src/components/common/HideScrollbar.tsx +++ b/src/components/common/HideScrollbar.tsx @@ -6,7 +6,7 @@ import { HTMLAttributes, UIEvent } from 'react' -import '@/assets/css/components/common/hide-scrollbar.scss' +import '@/assets/css/components/common/hide-scrollbar.less' interface HideScrollbarProps extends DetailedHTMLProps, HTMLDivElement> { diff --git a/src/components/common/Indicator.tsx b/src/components/common/Indicator.tsx index 2304254..7630379 100644 --- a/src/components/common/Indicator.tsx +++ b/src/components/common/Indicator.tsx @@ -1,5 +1,5 @@ import _ from 'lodash' -import '@/assets/css/components/common/indicator.scss' +import '@/assets/css/components/common/indicator.less' interface IndicatorProps { total: number diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx index 54dac5c..b9f500e 100644 --- a/src/components/common/LoadingMask.tsx +++ b/src/components/common/LoadingMask.tsx @@ -1,6 +1,6 @@ import { PropsWithChildren, ReactNode } from 'react' import Icon from '@ant-design/icons' -import '@/assets/css/components/common/loading-mask.scss' +import '@/assets/css/components/common/loading-mask.less' import { COLOR_FONT_MAIN } from '@/constants/common.constants' interface LoadingMaskProps extends PropsWithChildren { diff --git a/src/components/common/Sidebar/index.tsx b/src/components/common/Sidebar/index.tsx index 660e062..51ce1e5 100644 --- a/src/components/common/Sidebar/index.tsx +++ b/src/components/common/Sidebar/index.tsx @@ -1,6 +1,6 @@ import { PropsWithChildren, ReactNode } from 'react' import Icon from '@ant-design/icons' -import '@/assets/css/components/common/sidebar.scss' +import '@/assets/css/components/common/sidebar.less' import { getLocalStorage, setLocalStorage } from '@/util/browser' import Item from '@/components/common/Sidebar/Item' import ItemList from '@/components/common/Sidebar/ItemList' diff --git a/src/components/common/UrlCard.tsx b/src/components/common/UrlCard.tsx index 9e55624..28cae46 100644 --- a/src/components/common/UrlCard.tsx +++ b/src/components/common/UrlCard.tsx @@ -1,7 +1,7 @@ import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react' import Icon from '@ant-design/icons' import VanillaTilt, { TiltOptions } from 'vanilla-tilt' -import '@/assets/css/components/common/url-card.scss' +import '@/assets/css/components/common/url-card.less' import Card from '@/components/common/Card' import FlexBox from '@/components/common/FlexBox' diff --git a/src/components/dnd/DragHandle.tsx b/src/components/dnd/DragHandle.tsx index 6f27dc1..78acec1 100644 --- a/src/components/dnd/DragHandle.tsx +++ b/src/components/dnd/DragHandle.tsx @@ -1,6 +1,6 @@ import { HandleContextInst } from '@/components/dnd/HandleContext' import Icon from '@ant-design/icons' -import '@/assets/css/components/dnd/drag-handle.scss' +import '@/assets/css/components/dnd/drag-handle.less' interface DragHandleProps { padding?: string | number diff --git a/src/components/dnd/DropMask.tsx b/src/components/dnd/DropMask.tsx index 48428b8..c32d500 100644 --- a/src/components/dnd/DropMask.tsx +++ b/src/components/dnd/DropMask.tsx @@ -1,4 +1,4 @@ -import '@/assets/css/components/dnd/drop-mask.scss' +import '@/assets/css/components/dnd/drop-mask.less' import Icon from '@ant-design/icons' const DropMask = () => { diff --git a/src/components/system/SettingCard.tsx b/src/components/system/SettingCard.tsx index 874efd1..5315636 100644 --- a/src/components/system/SettingCard.tsx +++ b/src/components/system/SettingCard.tsx @@ -1,6 +1,6 @@ import { PropsWithChildren, ReactNode } from 'react' import Icon from '@ant-design/icons' -import '@/assets/css/components/system/setting-card.scss' +import '@/assets/css/components/system/setting-card.less' import Card from '@/components/common/Card' import FlexBox from '@/components/common/FlexBox' import Permission from '@/components/common/Permission' diff --git a/src/components/system/StatisticsCard.tsx b/src/components/system/StatisticsCard.tsx index 567d6e2..34f4a18 100644 --- a/src/components/system/StatisticsCard.tsx +++ b/src/components/system/StatisticsCard.tsx @@ -1,6 +1,6 @@ import { PropsWithChildren, ReactNode } from 'react' import Icon from '@ant-design/icons' -import '@/assets/css/components/system/statistics-card.scss' +import '@/assets/css/components/system/statistics-card.less' import Card from '@/components/common/Card' import FlexBox from '@/components/common/FlexBox' import LoadingMask from '@/components/common/LoadingMask' diff --git a/src/components/tools/LoadMoreCard.tsx b/src/components/tools/LoadMoreCard.tsx index a7c0736..8eba15e 100644 --- a/src/components/tools/LoadMoreCard.tsx +++ b/src/components/tools/LoadMoreCard.tsx @@ -1,6 +1,6 @@ import VanillaTilt from 'vanilla-tilt' import Icon from '@ant-design/icons' -import '@/assets/css/components/tools/load-more-card.scss' +import '@/assets/css/components/tools/load-more-card.less' import FlexBox from '@/components/common/FlexBox' import Card from '@/components/common/Card' diff --git a/src/components/tools/RepositoryCard.tsx b/src/components/tools/RepositoryCard.tsx index 656bcc4..19c1267 100644 --- a/src/components/tools/RepositoryCard.tsx +++ b/src/components/tools/RepositoryCard.tsx @@ -1,6 +1,6 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react' import VanillaTilt, { TiltOptions } from 'vanilla-tilt' -import '@/assets/css/components/tools/repository-card.scss' +import '@/assets/css/components/tools/repository-card.less' import Card from '@/components/common/Card' import FlexBox from '@/components/common/FlexBox' import Draggable from '@/components/dnd/Draggable' @@ -24,7 +24,6 @@ interface RepositoryCardProps const RepositoryCard = ({ style, - // eslint-disable-next-line @typescript-eslint/no-unused-vars ref, icon, toolName, diff --git a/src/components/tools/StoreCard.tsx b/src/components/tools/StoreCard.tsx index 3b5e112..e26e9ef 100644 --- a/src/components/tools/StoreCard.tsx +++ b/src/components/tools/StoreCard.tsx @@ -2,7 +2,7 @@ import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react' import VanillaTilt, { TiltOptions } from 'vanilla-tilt' import protocolCheck from 'custom-protocol-check' import Icon from '@ant-design/icons' -import '@/assets/css/components/tools/store-card.scss' +import '@/assets/css/components/tools/store-card.less' import { COLOR_BACKGROUND, COLOR_MAIN, COLOR_PRODUCTION } from '@/constants/common.constants' import { checkDesktop, omitText } from '@/util/common' import { getLoginStatus, getUserId } from '@/util/auth' @@ -35,7 +35,7 @@ interface StoreCardProps extends DetailedHTMLProps Date: Thu, 17 Oct 2024 20:26:06 +0800 Subject: [PATCH 2/8] Refactor(css): Change all less to module mode --- src/assets/css/base.less | 29 +++-- .../common/{card.less => card.module.less} | 2 +- ...fit-center.less => fit-center.module.less} | 2 +- ...screen.less => fit-fullscreen.module.less} | 2 +- .../{flex-box.less => flex-box.module.less} | 2 +- ...ss => fullscreen-loading-mask.module.less} | 2 +- ...ollbar.less => hide-scrollbar.module.less} | 10 +- .../{indicator.less => indicator.module.less} | 2 +- ...ing-mask.less => loading-mask.module.less} | 2 +- .../{sidebar.less => sidebar.module.less} | 34 +++--- .../{url-card.less => url-card.module.less} | 4 +- ...ag-handle.less => drag-handle.module.less} | 2 +- .../{drop-mask.less => drop-mask.module.less} | 4 +- ...ing-card.less => setting-card.module.less} | 6 +- ...-card.less => statistics-card.module.less} | 6 +- ...e-card.less => load-more-card.module.less} | 4 +- .../css/components/tools/repository-card.less | 51 --------- .../tools/repository-card.module.less | 94 ++++++++++++++++ ...store-card.less => store-card.module.less} | 16 ++- src/assets/css/pages/sign/forget.module.less | 40 +++++++ .../{sign.less => sign/index.module.less} | 74 +----------- src/assets/css/pages/sign/sign-in.module.less | 41 +++++++ src/assets/css/pages/sign/sign-up.module.less | 40 +++++++ src/assets/css/pages/sign/verify.module.less | 28 +++++ ...work.less => system-framework.module.less} | 6 +- .../system/{index.less => index.module.less} | 6 +- .../{settings.less => settings.module.less} | 6 +- ...statistics.less => statistics.module.less} | 6 +- .../tools/{base.less => base.module.less} | 8 +- .../tools/{code.less => code.module.less} | 6 +- .../tools/execute.module.less} | 4 +- .../{template.less => template.module.less} | 8 +- ...ework.less => tools-framework.module.less} | 8 +- src/assets/css/pages/tools/create.less | 60 ---------- src/assets/css/pages/tools/create.module.less | 52 +++++++++ .../tools/{edit.less => edit.module.less} | 10 +- src/assets/css/pages/tools/index.less | 105 ------------------ src/assets/css/pages/tools/index.module.less | 54 +++++++++ .../execute.less => tools/source.module.less} | 4 +- .../tools/{store.less => store.module.less} | 12 +- .../tools/{user.less => user.module.less} | 16 +-- .../tools/{view.less => view.module.less} | 4 +- ...mework.less => user-framework.module.less} | 6 +- .../user/{index.less => index.module.less} | 10 +- .../Editor/{editor.less => index.module.less} | 8 +- .../Playground/CodeEditor/Editor/index.tsx | 6 +- .../CodeEditor/FileSelector/Item.tsx | 9 +- .../FileSelector/file-selector.less | 86 -------------- .../CodeEditor/FileSelector/index.module.less | 37 ++++++ .../CodeEditor/FileSelector/index.tsx | 14 +-- .../CodeEditor/FileSelector/item.module.less | 47 ++++++++ .../Playground/CodeEditor/code-editor.less | 5 - .../Playground/CodeEditor/index.module.less | 15 +++ .../Playground/CodeEditor/index.tsx | 6 +- .../Playground/Output/Preview/Render.tsx | 28 +++-- .../{preview.less => index.module.less} | 4 +- .../Playground/Output/Preview/index.tsx | 6 +- .../{render.less => render.module.less} | 18 +-- .../Output/Transform/index.module.less | 13 +++ .../Playground/Output/Transform/index.tsx | 6 +- .../Output/Transform/transform.less | 3 - src/components/Playground/Output/index.tsx | 2 +- .../{playground.less => index.module.less} | 2 +- src/components/Playground/index.tsx | 4 +- src/components/common/Card.tsx | 10 +- src/components/common/FitCenter.tsx | 4 +- src/components/common/FitFullscreen.tsx | 4 +- src/components/common/FlexBox.tsx | 4 +- .../common/FullscreenLoadingMask.tsx | 4 +- src/components/common/HideScrollbar.tsx | 24 ++-- src/components/common/Indicator.tsx | 8 +- src/components/common/LoadingMask.tsx | 4 +- src/components/common/Sidebar/Footer.tsx | 19 ++-- src/components/common/Sidebar/Item.tsx | 21 ++-- src/components/common/Sidebar/Scroll.tsx | 3 +- src/components/common/Sidebar/Separate.tsx | 3 +- src/components/common/Sidebar/Submenu.tsx | 5 +- src/components/common/Sidebar/index.tsx | 14 +-- src/components/common/UrlCard.tsx | 12 +- src/components/dnd/DragHandle.tsx | 5 +- src/components/dnd/DropMask.tsx | 6 +- src/components/system/SettingCard.tsx | 18 +-- src/components/system/StatisticsCard.tsx | 12 +- src/components/tools/LoadMoreCard.tsx | 10 +- src/components/tools/RepositoryCard.tsx | 20 ++-- src/components/tools/StoreCard.tsx | 36 +++--- src/pages/Sign/Forget.tsx | 17 +-- src/pages/Sign/SignIn.tsx | 15 +-- src/pages/Sign/SignUp.tsx | 15 +-- src/pages/Sign/Verify.tsx | 22 ++-- src/pages/Sign/index.tsx | 24 ++-- src/pages/System/Group.tsx | 2 +- src/pages/System/Settings/index.tsx | 10 +- src/pages/System/Statistics/index.tsx | 6 +- src/pages/System/Tools/Base.tsx | 13 ++- src/pages/System/Tools/Category.tsx | 2 +- src/pages/System/Tools/Code.tsx | 8 +- src/pages/System/Tools/Execute.tsx | 6 +- src/pages/System/Tools/Template.tsx | 13 ++- src/pages/System/index.tsx | 6 +- src/pages/SystemFramework.tsx | 8 +- src/pages/Tools/Create.tsx | 20 ++-- src/pages/Tools/Edit.tsx | 12 +- src/pages/Tools/Source.tsx | 6 +- src/pages/Tools/Store.tsx | 10 +- src/pages/Tools/User.tsx | 24 ++-- src/pages/Tools/View.tsx | 6 +- src/pages/Tools/index.tsx | 20 ++-- src/pages/ToolsFramework.tsx | 10 +- src/pages/User/index.tsx | 84 +++++++------- src/pages/UserFramework.tsx | 8 +- 111 files changed, 962 insertions(+), 858 deletions(-) rename src/assets/css/components/common/{card.less => card.module.less} (93%) rename src/assets/css/components/common/{fit-center.less => fit-center.module.less} (87%) rename src/assets/css/components/common/{fit-fullscreen.less => fit-fullscreen.module.less} (75%) rename src/assets/css/components/common/{flex-box.less => flex-box.module.less} (69%) rename src/assets/css/components/common/{fullscreen-loading-mask.less => fullscreen-loading-mask.module.less} (87%) rename src/assets/css/components/common/{hide-scrollbar.less => hide-scrollbar.module.less} (90%) rename src/assets/css/components/common/{indicator.less => indicator.module.less} (97%) rename src/assets/css/components/common/{loading-mask.less => loading-mask.module.less} (87%) rename src/assets/css/components/common/{sidebar.less => sidebar.module.less} (94%) rename src/assets/css/components/common/{url-card.less => url-card.module.less} (87%) rename src/assets/css/components/dnd/{drag-handle.less => drag-handle.module.less} (62%) rename src/assets/css/components/dnd/{drop-mask.less => drop-mask.module.less} (86%) rename src/assets/css/components/system/{setting-card.less => setting-card.module.less} (85%) rename src/assets/css/components/system/{statistics-card.less => statistics-card.module.less} (93%) rename src/assets/css/components/tools/{load-more-card.less => load-more-card.module.less} (86%) delete mode 100644 src/assets/css/components/tools/repository-card.less create mode 100644 src/assets/css/components/tools/repository-card.module.less rename src/assets/css/components/tools/{store-card.less => store-card.module.less} (90%) create mode 100644 src/assets/css/pages/sign/forget.module.less rename src/assets/css/pages/{sign.less => sign/index.module.less} (51%) create mode 100644 src/assets/css/pages/sign/sign-in.module.less create mode 100644 src/assets/css/pages/sign/sign-up.module.less create mode 100644 src/assets/css/pages/sign/verify.module.less rename src/assets/css/pages/{user-framework.less => system-framework.module.less} (69%) rename src/assets/css/pages/system/{index.less => index.module.less} (76%) rename src/assets/css/pages/system/{settings.less => settings.module.less} (61%) rename src/assets/css/pages/system/{statistics.less => statistics.module.less} (65%) rename src/assets/css/pages/system/tools/{base.less => base.module.less} (87%) rename src/assets/css/pages/system/tools/{code.less => code.module.less} (76%) rename src/assets/css/pages/{tools/source.less => system/tools/execute.module.less} (56%) rename src/assets/css/pages/system/tools/{template.less => template.module.less} (87%) rename src/assets/css/pages/{tools-framework.less => tools-framework.module.less} (74%) delete mode 100644 src/assets/css/pages/tools/create.less create mode 100644 src/assets/css/pages/tools/create.module.less rename src/assets/css/pages/tools/{edit.less => edit.module.less} (79%) delete mode 100644 src/assets/css/pages/tools/index.less create mode 100644 src/assets/css/pages/tools/index.module.less rename src/assets/css/pages/{system/tools/execute.less => tools/source.module.less} (52%) rename src/assets/css/pages/tools/{store.less => store.module.less} (79%) rename src/assets/css/pages/tools/{user.less => user.module.less} (85%) rename src/assets/css/pages/tools/{view.less => view.module.less} (65%) rename src/assets/css/pages/{system-framework.less => user-framework.module.less} (68%) rename src/assets/css/pages/user/{index.less => index.module.less} (94%) rename src/components/Playground/CodeEditor/Editor/{editor.less => index.module.less} (90%) delete mode 100644 src/components/Playground/CodeEditor/FileSelector/file-selector.less create mode 100644 src/components/Playground/CodeEditor/FileSelector/index.module.less create mode 100644 src/components/Playground/CodeEditor/FileSelector/item.module.less delete mode 100644 src/components/Playground/CodeEditor/code-editor.less create mode 100644 src/components/Playground/CodeEditor/index.module.less rename src/components/Playground/Output/Preview/{preview.less => index.module.less} (75%) rename src/components/Playground/Output/Preview/{render.less => render.module.less} (81%) create mode 100644 src/components/Playground/Output/Transform/index.module.less delete mode 100644 src/components/Playground/Output/Transform/transform.less rename src/components/Playground/{playground.less => index.module.less} (70%) diff --git a/src/assets/css/base.less b/src/assets/css/base.less index 8bb5df0..9644dde 100644 --- a/src/assets/css/base.less +++ b/src/assets/css/base.less @@ -8,31 +8,29 @@ html { scroll-behavior: smooth; } -em, -i { - font-style: normal +em, i { + font-style: normal; } li { - list-style: none + list-style: none; } img { border: 0; - vertical-align: middle + vertical-align: middle; } button { - cursor: pointer + cursor: pointer; } a { color: #666; - text-decoration: none + text-decoration: none; } -button, -input { +button, input { font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; border: 0; outline: none; @@ -42,12 +40,11 @@ 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 + color: #666; } -.hide, -.none { - display: none +.hide, .none { + display: none; } .clearfix:after { @@ -55,9 +52,9 @@ body { clear: both; display: block; content: "."; - height: 0 + height: 0; } .clearfix { - *zoom: 1 -} \ No newline at end of file + zoom: 1; +} diff --git a/src/assets/css/components/common/card.less b/src/assets/css/components/common/card.module.less similarity index 93% rename from src/assets/css/components/common/card.less rename to src/assets/css/components/common/card.module.less index a19c6c0..a99446b 100644 --- a/src/assets/css/components/common/card.less +++ b/src/assets/css/components/common/card.module.less @@ -1,6 +1,6 @@ @import '@/assets/css/constants'; -.card-box { +.cardBox { background-color: @origin-color; border-radius: 8px; overflow: hidden; diff --git a/src/assets/css/components/common/fit-center.less b/src/assets/css/components/common/fit-center.module.less similarity index 87% rename from src/assets/css/components/common/fit-center.less rename to src/assets/css/components/common/fit-center.module.less index e3abab9..4b43ffb 100644 --- a/src/assets/css/components/common/fit-center.less +++ b/src/assets/css/components/common/fit-center.module.less @@ -1,4 +1,4 @@ -.fit-center { +.fitCenter { display: flex; justify-content: center; align-items: center; diff --git a/src/assets/css/components/common/fit-fullscreen.less b/src/assets/css/components/common/fit-fullscreen.module.less similarity index 75% rename from src/assets/css/components/common/fit-fullscreen.less rename to src/assets/css/components/common/fit-fullscreen.module.less index f3f3a4b..3a21936 100644 --- a/src/assets/css/components/common/fit-fullscreen.less +++ b/src/assets/css/components/common/fit-fullscreen.module.less @@ -1,4 +1,4 @@ -.fit-fullscreen { +.fitFullscreen { position: relative; width: 100%; height: 100vh; diff --git a/src/assets/css/components/common/flex-box.less b/src/assets/css/components/common/flex-box.module.less similarity index 69% rename from src/assets/css/components/common/flex-box.less rename to src/assets/css/components/common/flex-box.module.less index cbae3d3..b92156e 100644 --- a/src/assets/css/components/common/flex-box.less +++ b/src/assets/css/components/common/flex-box.module.less @@ -1,4 +1,4 @@ -.flex-box { +.flexBox { > * { flex: 1; } diff --git a/src/assets/css/components/common/fullscreen-loading-mask.less b/src/assets/css/components/common/fullscreen-loading-mask.module.less similarity index 87% rename from src/assets/css/components/common/fullscreen-loading-mask.less rename to src/assets/css/components/common/fullscreen-loading-mask.module.less index 2e7cb52..5480c7c 100644 --- a/src/assets/css/components/common/fullscreen-loading-mask.less +++ b/src/assets/css/components/common/fullscreen-loading-mask.module.less @@ -1,4 +1,4 @@ -.fullscreen-loading-mask { +.fullscreenLoadingMask { position: absolute; display: flex; justify-content: center; diff --git a/src/assets/css/components/common/hide-scrollbar.less b/src/assets/css/components/common/hide-scrollbar.module.less similarity index 90% rename from src/assets/css/components/common/hide-scrollbar.less rename to src/assets/css/components/common/hide-scrollbar.module.less index d033853..04f8982 100644 --- a/src/assets/css/components/common/hide-scrollbar.less +++ b/src/assets/css/components/common/hide-scrollbar.module.less @@ -1,19 +1,19 @@ @import "@/assets/css/constants"; @import "@/assets/css/mixins"; -.hide-scrollbar-mask { +.hideScrollbarMask { position: relative; width: 100%; height: 100%; overflow: hidden; - .hide-scrollbar-selection { + .hideScrollbarSelection { position: relative; overflow: scroll; scrollbar-width: none; -ms-overflow-style: none; - .hide-scrollbar-content { + .hideScrollbarContent { min-width: 100%; } } @@ -66,7 +66,7 @@ } } - .vertical-scrollbar { + .verticalScrollbar { height: 100%; left: 100%; top: 0; @@ -77,7 +77,7 @@ } } - .horizontal-scrollbar { + .horizontalScrollbar { width: 100%; left: 0; top: 100%; diff --git a/src/assets/css/components/common/indicator.less b/src/assets/css/components/common/indicator.module.less similarity index 97% rename from src/assets/css/components/common/indicator.less rename to src/assets/css/components/common/indicator.module.less index 0ac17b1..6723f9e 100644 --- a/src/assets/css/components/common/indicator.less +++ b/src/assets/css/components/common/indicator.module.less @@ -1,6 +1,6 @@ @import '@/assets/css/constants'; -.dot-list { +.dotList { display: flex; justify-content: center; align-items: center; diff --git a/src/assets/css/components/common/loading-mask.less b/src/assets/css/components/common/loading-mask.module.less similarity index 87% rename from src/assets/css/components/common/loading-mask.less rename to src/assets/css/components/common/loading-mask.module.less index bbdda27..da9e969 100644 --- a/src/assets/css/components/common/loading-mask.less +++ b/src/assets/css/components/common/loading-mask.module.less @@ -1,4 +1,4 @@ -.loading-mask { +.loadingMask { display: flex; justify-content: center; align-items: center; diff --git a/src/assets/css/components/common/sidebar.less b/src/assets/css/components/common/sidebar.module.less similarity index 94% rename from src/assets/css/components/common/sidebar.less rename to src/assets/css/components/common/sidebar.module.less index 5c9a44a..97d470f 100644 --- a/src/assets/css/components/common/sidebar.less +++ b/src/assets/css/components/common/sidebar.module.less @@ -17,7 +17,7 @@ color: @main-color; overflow: hidden; - .icon-box { + .iconBox { display: flex; justify-content: center; align-items: center; @@ -47,7 +47,7 @@ } } - .content, .bottom-fixed { + .content, .bottomFixed { display: flex; min-height: 0; flex-direction: column; @@ -67,12 +67,12 @@ position: relative; font-size: 1rem; - > .menu-bt { + > .menuBt { border-radius: 8px; overflow: hidden; height: 40px; - .icon-box { + .iconBox { display: flex; justify-content: center; align-items: center; @@ -113,6 +113,12 @@ } } } + + &:hover { + > * { + background-color: @background-color; + } + } } .submenu { @@ -194,8 +200,8 @@ } } - .delete { - .menu-bt { + :global .delete { + :local .menuBt { border: 1px dashed @error-secondary-color; filter: drop-shadow(1000px 0 0 @error-secondary-color); transform: translate(-1000px); @@ -222,7 +228,7 @@ padding: 8px 14px; color: @main-color; - .icon-user { + .iconUser { display: flex; justify-content: center; align-items: center; @@ -258,7 +264,7 @@ } } - .icon-exit { + .iconExit { font-size: @SIZE_ICON_XS; color: @error-color; padding: 6px 10px; @@ -275,7 +281,7 @@ width: 68px !important; .title { - .icon-box { + .iconBox { span { transform: rotateZ(360deg); transition: all .3s; @@ -287,14 +293,14 @@ } } - .menu-bt { + .menuBt { .text, .extend { display: none; } } .submenu { - .menu-bt { + .menuBt { .text { display: block; } @@ -308,7 +314,7 @@ display: none; } - .submenu-exit { + .submenuExit { display: none; position: absolute; padding-left: 6px; @@ -321,7 +327,7 @@ border-radius: 8px; background-color: @origin-color; - .icon-exit { + .iconExit { padding: 4px 8px; &:hover { @@ -336,7 +342,7 @@ } } - &:hover .submenu-exit { + &:hover .submenuExit { display: block; animation: 0.3s ease; .keyframes(mfdCZC, { diff --git a/src/assets/css/components/common/url-card.less b/src/assets/css/components/common/url-card.module.less similarity index 87% rename from src/assets/css/components/common/url-card.less rename to src/assets/css/components/common/url-card.module.less index 4cda414..a17fb12 100644 --- a/src/assets/css/components/common/url-card.less +++ b/src/assets/css/components/common/url-card.module.less @@ -1,9 +1,9 @@ @import "@/assets/css/constants"; -[data-component=component-url-card] { +.root { cursor: pointer; - .url-card { + .urlCard { width: 100%; height: 100%; margin-top: 80px; diff --git a/src/assets/css/components/dnd/drag-handle.less b/src/assets/css/components/dnd/drag-handle.module.less similarity index 62% rename from src/assets/css/components/dnd/drag-handle.less rename to src/assets/css/components/dnd/drag-handle.module.less index 22b1088..01fe55a 100644 --- a/src/assets/css/components/dnd/drag-handle.less +++ b/src/assets/css/components/dnd/drag-handle.module.less @@ -1,4 +1,4 @@ -[data-component=component-drag-handle] { +.root { background-color: transparent; color: unset; cursor: grab; diff --git a/src/assets/css/components/dnd/drop-mask.less b/src/assets/css/components/dnd/drop-mask.module.less similarity index 86% rename from src/assets/css/components/dnd/drop-mask.less rename to src/assets/css/components/dnd/drop-mask.module.less index 7f3f8f1..dc6ab81 100644 --- a/src/assets/css/components/dnd/drop-mask.less +++ b/src/assets/css/components/dnd/drop-mask.module.less @@ -1,6 +1,6 @@ @import "@/assets/css/constants"; -[data-component=component-drop-mask] { +.root { position: absolute; left: 0; top: 0; @@ -9,7 +9,7 @@ padding: 0 10px 10px; background-color: @origin-color; - .drop-mask-border { + .dropMaskBorder { display: flex; width: 100%; height: 100%; diff --git a/src/assets/css/components/system/setting-card.less b/src/assets/css/components/system/setting-card.module.less similarity index 85% rename from src/assets/css/components/system/setting-card.less rename to src/assets/css/components/system/setting-card.module.less index 39f5736..0aa2095 100644 --- a/src/assets/css/components/system/setting-card.less +++ b/src/assets/css/components/system/setting-card.module.less @@ -1,7 +1,7 @@ @import "@/assets/css/constants"; -[data-component=component-setting-card] { - .settings-card { +.root { + .settingsCard { padding: 20px; gap: 20px; color: @main-color; @@ -25,7 +25,7 @@ color: @font-main-color; } - .bt-save { + .btSave { color: @main-color; } } diff --git a/src/assets/css/components/system/statistics-card.less b/src/assets/css/components/system/statistics-card.module.less similarity index 93% rename from src/assets/css/components/system/statistics-card.less rename to src/assets/css/components/system/statistics-card.module.less index e1c726f..82cae27 100644 --- a/src/assets/css/components/system/statistics-card.less +++ b/src/assets/css/components/system/statistics-card.module.less @@ -1,7 +1,7 @@ @import "@/assets/css/constants"; -[data-component=component-statistics-card] { - .statistics-card { +.root { + .statisticsCard { padding: 20px; gap: 20px; @@ -26,7 +26,7 @@ } } - .card-content { + :global .card-content { font-size: 1.1em; padding: 0 10px; gap: 10px; diff --git a/src/assets/css/components/tools/load-more-card.less b/src/assets/css/components/tools/load-more-card.module.less similarity index 86% rename from src/assets/css/components/tools/load-more-card.less rename to src/assets/css/components/tools/load-more-card.module.less index 716f4bf..a9541d9 100644 --- a/src/assets/css/components/tools/load-more-card.less +++ b/src/assets/css/components/tools/load-more-card.module.less @@ -1,9 +1,9 @@ @import "@/assets/css/constants"; -[data-component=component-load-more-card] { +.root { cursor: pointer; - .load-more-card { + .loadMoreCard { width: 100%; height: 100%; text-align: center; diff --git a/src/assets/css/components/tools/repository-card.less b/src/assets/css/components/tools/repository-card.less deleted file mode 100644 index b106fc4..0000000 --- a/src/assets/css/components/tools/repository-card.less +++ /dev/null @@ -1,51 +0,0 @@ -@import "@/assets/css/constants"; - -[data-component=component-repository-card] { - height: 100%; - - .repository-card { - width: 100%; - height: 100%; - text-align: center; - align-items: center; - - > * { - display: block; - flex: 0 0 auto; - } - - .header { - display: flex; - width: 100%; - align-items: center; - padding: 10px; - - .version-select { - width: 9em; - margin-right: auto; - } - - >:not(.version-select) { - font-size: 1.6em; - } - } - - .icon { - display: flex; - padding-top: 10px; - padding-bottom: 20px; - color: @production-color; - font-size: @SIZE_ICON_XL; - justify-content: center; - - img { - width: @SIZE_ICON_XL; - } - } - - .tool-name { - font-weight: bolder; - font-size: 1.6em; - } - } -} diff --git a/src/assets/css/components/tools/repository-card.module.less b/src/assets/css/components/tools/repository-card.module.less new file mode 100644 index 0000000..6d03231 --- /dev/null +++ b/src/assets/css/components/tools/repository-card.module.less @@ -0,0 +1,94 @@ +@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/store-card.less b/src/assets/css/components/tools/store-card.module.less similarity index 90% rename from src/assets/css/components/tools/store-card.less rename to src/assets/css/components/tools/store-card.module.less index ef19aa4..672d6f5 100644 --- a/src/assets/css/components/tools/store-card.less +++ b/src/assets/css/components/tools/store-card.module.less @@ -1,10 +1,10 @@ @import "@/assets/css/constants"; -[data-component=component-store-card] { +.root { height: 100%; cursor: pointer; - .store-card { + .storeCard { width: 100%; height: 100%; text-align: center; @@ -56,12 +56,12 @@ .info { padding-top: 20px; - .tool-name { + .toolName { font-weight: bolder; font-size: 1.6em; } - .tool-desc { + .toolDesc { margin: 10px auto 0; color: @font-secondary-color; overflow: hidden; @@ -87,7 +87,7 @@ } } - .author-name { + .authorName { display: flex; align-items: center; } @@ -106,3 +106,9 @@ } } } + +.androidQrcode { + align-items: center; + transform: translateX(-16px); + gap: 20px; +} diff --git a/src/assets/css/pages/sign/forget.module.less b/src/assets/css/pages/sign/forget.module.less new file mode 100644 index 0000000..585fe3f --- /dev/null +++ b/src/assets/css/pages/sign/forget.module.less @@ -0,0 +1,40 @@ +@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.less b/src/assets/css/pages/sign/index.module.less similarity index 51% rename from src/assets/css/pages/sign.less rename to src/assets/css/pages/sign/index.module.less index ce77959..26a78ab 100644 --- a/src/assets/css/pages/sign.less +++ b/src/assets/css/pages/sign/index.module.less @@ -1,6 +1,6 @@ @import "@/assets/css/constants"; -[data-component=sign] { +.root { background-color: #D2D0DD; user-select: none; @@ -12,7 +12,7 @@ color: @production-color; } - .sign-box { + .signBox { position: relative; background-color: @origin-color; width: 900px; @@ -32,74 +32,6 @@ &.hidden { opacity: 0; } - - > * { - .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; - - button { - font-weight: bolder; - } - - .addition { - justify-content: space-between; - margin-bottom: 14px; - - > * { - flex: 0 0 auto; - } - } - - .footer { - text-align: center; - - a { - color: @production-color; - } - } - } - } - - .verify { - a { - color: @production-color; - font-weight: bolder; - } - } - - .sign-up, .sign-in, .forget { - .footer { - a { - font-weight: bolder; - } - } - } - - .sign-up, .forget { - .retry, .success { - margin-bottom: 16px; - - a { - font-weight: bolder; - } - } - } } .cover { @@ -109,7 +41,7 @@ background-color: #F3F4F8; transition: all 0.8s ease; - .ball-box { + .ballBox { position: relative; overflow: hidden; diff --git a/src/assets/css/pages/sign/sign-in.module.less b/src/assets/css/pages/sign/sign-in.module.less new file mode 100644 index 0000000..47b8c60 --- /dev/null +++ b/src/assets/css/pages/sign/sign-in.module.less @@ -0,0 +1,41 @@ +@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-up.module.less b/src/assets/css/pages/sign/sign-up.module.less new file mode 100644 index 0000000..585fe3f --- /dev/null +++ b/src/assets/css/pages/sign/sign-up.module.less @@ -0,0 +1,40 @@ +@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/verify.module.less b/src/assets/css/pages/sign/verify.module.less new file mode 100644 index 0000000..848923e --- /dev/null +++ b/src/assets/css/pages/sign/verify.module.less @@ -0,0 +1,28 @@ +@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/user-framework.less b/src/assets/css/pages/system-framework.module.less similarity index 69% rename from src/assets/css/pages/user-framework.less rename to src/assets/css/pages/system-framework.module.less index ff9e98a..a9f6937 100644 --- a/src/assets/css/pages/user-framework.less +++ b/src/assets/css/pages/system-framework.module.less @@ -1,11 +1,11 @@ @import "@/assets/css/constants"; -[data-component=user-framework] { - .left-panel { +.root { + .leftPanel { background-color: @origin-color; } - .right-panel { + .rightPanel { flex: 1; width: 0; background-color: @background-color; diff --git a/src/assets/css/pages/system/index.less b/src/assets/css/pages/system/index.module.less similarity index 76% rename from src/assets/css/pages/system/index.less rename to src/assets/css/pages/system/index.module.less index d10c4b8..b6274c5 100644 --- a/src/assets/css/pages/system/index.less +++ b/src/assets/css/pages/system/index.module.less @@ -1,11 +1,11 @@ -[data-component=system] { - .root-content { +.root { + .rootContent { padding: 20px; gap: 20px; flex-wrap: wrap; justify-content: flex-start; - > .card-box { + > div { width: 200px; height: 320px; flex: 0 0 auto; diff --git a/src/assets/css/pages/system/settings.less b/src/assets/css/pages/system/settings.module.less similarity index 61% rename from src/assets/css/pages/system/settings.less rename to src/assets/css/pages/system/settings.module.less index 64c0e64..6d455aa 100644 --- a/src/assets/css/pages/system/settings.less +++ b/src/assets/css/pages/system/settings.module.less @@ -1,9 +1,9 @@ -[data-component=system-settings] { - .root-content { +.root { + .rootContent { padding: 20px; gap: 20px; - .root-col { + .rootCol { gap: 20px; > * { diff --git a/src/assets/css/pages/system/statistics.less b/src/assets/css/pages/system/statistics.module.less similarity index 65% rename from src/assets/css/pages/system/statistics.less rename to src/assets/css/pages/system/statistics.module.less index 3b6dc2f..6538354 100644 --- a/src/assets/css/pages/system/statistics.less +++ b/src/assets/css/pages/system/statistics.module.less @@ -1,11 +1,11 @@ -[data-component=system-statistics] { - .root-content { +.root { + .rootContent { padding: 20px; gap: 20px; flex-wrap: wrap; justify-content: center; - > .card-box { + > div { width: 48%; flex: 0 0 auto; } diff --git a/src/assets/css/pages/system/tools/base.less b/src/assets/css/pages/system/tools/base.module.less similarity index 87% rename from src/assets/css/pages/system/tools/base.less rename to src/assets/css/pages/system/tools/base.module.less index cc874ae..05fdc8b 100644 --- a/src/assets/css/pages/system/tools/base.less +++ b/src/assets/css/pages/system/tools/base.module.less @@ -1,13 +1,13 @@ @import "@/assets/css/constants"; -[data-component=system-tools-base] { - .root-content { +.root { + .rootContent { padding: 20px; gap: 10px; height: 100%; width: 100%; - .has-edited::after { + .hasEdited::after { content: '*'; color: @font-secondary-color; } @@ -23,7 +23,7 @@ height: calc(100vh - 40px); } - .close-editor-btn { + .closeEditorBtn { display: flex; justify-content: center; align-items: center; diff --git a/src/assets/css/pages/system/tools/code.less b/src/assets/css/pages/system/tools/code.module.less similarity index 76% rename from src/assets/css/pages/system/tools/code.less rename to src/assets/css/pages/system/tools/code.module.less index 7908a36..f60ba1f 100644 --- a/src/assets/css/pages/system/tools/code.less +++ b/src/assets/css/pages/system/tools/code.module.less @@ -1,12 +1,12 @@ -[data-component=system-tools-code] { +.root { padding: 20px; - .card-box { + .rootBox { width: 100%; height: 100%; } - .draggable-content { + .draggableContent { position: fixed; inset-inline-end: 48px; inset-block-end: 48px; diff --git a/src/assets/css/pages/tools/source.less b/src/assets/css/pages/system/tools/execute.module.less similarity index 56% rename from src/assets/css/pages/tools/source.less rename to src/assets/css/pages/system/tools/execute.module.less index 6a358a5..cec2f41 100644 --- a/src/assets/css/pages/tools/source.less +++ b/src/assets/css/pages/system/tools/execute.module.less @@ -1,7 +1,7 @@ -[data-component=tools-source] { +.root { padding: 20px; - .card-box { + .rootBox { width: 100%; height: 100%; } diff --git a/src/assets/css/pages/system/tools/template.less b/src/assets/css/pages/system/tools/template.module.less similarity index 87% rename from src/assets/css/pages/system/tools/template.less rename to src/assets/css/pages/system/tools/template.module.less index 9d63a6f..05fdc8b 100644 --- a/src/assets/css/pages/system/tools/template.less +++ b/src/assets/css/pages/system/tools/template.module.less @@ -1,13 +1,13 @@ @import "@/assets/css/constants"; -[data-component=system-tools-template] { - .root-content { +.root { + .rootContent { padding: 20px; gap: 10px; height: 100%; width: 100%; - .has-edited::after { + .hasEdited::after { content: '*'; color: @font-secondary-color; } @@ -23,7 +23,7 @@ height: calc(100vh - 40px); } - .close-editor-btn { + .closeEditorBtn { display: flex; justify-content: center; align-items: center; diff --git a/src/assets/css/pages/tools-framework.less b/src/assets/css/pages/tools-framework.module.less similarity index 74% rename from src/assets/css/pages/tools-framework.less rename to src/assets/css/pages/tools-framework.module.less index be45eb0..9b45e09 100644 --- a/src/assets/css/pages/tools-framework.less +++ b/src/assets/css/pages/tools-framework.module.less @@ -1,10 +1,10 @@ @import "@/assets/css/constants"; -[data-component=tools-framework] { - .left-panel { +.root { + .leftPanel { background-color: @origin-color; - .menu-droppable { + .menuDroppable { display: flex; position: relative; min-height: 0; @@ -13,7 +13,7 @@ } } - .right-panel { + .rightPanel { flex: 1; width: 0; background-color: @background-color; diff --git a/src/assets/css/pages/tools/create.less b/src/assets/css/pages/tools/create.less deleted file mode 100644 index 26ee99e..0000000 --- a/src/assets/css/pages/tools/create.less +++ /dev/null @@ -1,60 +0,0 @@ -@import "@/assets/css/constants"; - -[data-component=tools-create] { - .root-content { - padding: 20px; - gap: 20px; - height: 100%; - width: 100%; - - > * { - gap: 10px; - width: 0; - - .title { - flex: 0 0 auto; - height: 40px; - - > * { - height: 100%; - width: 100%; - justify-content: center; - align-items: center; - font-size: 1.6em; - color: @production-color; - font-weight: bolder; - } - } - - .config { - .config-content { - padding: 20px; - - .help { - margin-left: 6px; - color: @font-main-color; - font-size: 0.8em; - } - - .create-bt { - width: 100%; - font-weight: bold; - } - } - } - - .preview { - display: flex; - position: relative; - justify-content: center; - align-items: center; - - .no-preview { - font-weight: bolder; - color: @font-secondary-color; - font-size: 1.4em; - } - } - } - } -} diff --git a/src/assets/css/pages/tools/create.module.less b/src/assets/css/pages/tools/create.module.less new file mode 100644 index 0000000..b61fc4d --- /dev/null +++ b/src/assets/css/pages/tools/create.module.less @@ -0,0 +1,52 @@ +@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/edit.less b/src/assets/css/pages/tools/edit.module.less similarity index 79% rename from src/assets/css/pages/tools/edit.less rename to src/assets/css/pages/tools/edit.module.less index 8f8b25d..801dbc8 100644 --- a/src/assets/css/pages/tools/edit.less +++ b/src/assets/css/pages/tools/edit.module.less @@ -1,11 +1,11 @@ -[data-component=tools-edit] { +.root { padding: 20px; - .card-box { + .rootBox { height: 100%; width: 100%; - .root-content { + .rootContent { position: relative; width: 100%; height: 100%; @@ -14,7 +14,7 @@ width: 0; } - .draggable-mask { + .draggableMask { position: absolute; width: 100%; height: 100%; @@ -22,7 +22,7 @@ } } - .draggable-content { + .draggableContent { position: fixed; inset-inline-end: 48px; inset-block-end: 48px; diff --git a/src/assets/css/pages/tools/index.less b/src/assets/css/pages/tools/index.less deleted file mode 100644 index 62c0c24..0000000 --- a/src/assets/css/pages/tools/index.less +++ /dev/null @@ -1,105 +0,0 @@ -@import "@/assets/css/constants"; - -[data-component=tools] { - .root-content { - padding: 20px; - gap: 20px; - - .own-content { - gap: 20px; - flex-wrap: wrap; - justify-content: flex-start; - - > .card-box, > div { - width: 180px; - min-height: 290px; - flex: 0 0 auto; - } - - - & > :first-child { - cursor: pointer; - - .info { - padding-top: 50px; - } - } - - & > :not(:first-child) { - .info { - transform: translateY(40px); - transition: all 0.1s ease; - } - - .operation { - display: flex; - flex: 1; - justify-content: center; - padding-bottom: 20px; - gap: 4px; - width: 70%; - flex-direction: column; - align-items: center; - visibility: hidden; - opacity: 0; - - > *, .edit > * { - width: 100%; - } - - .edit { - > * { - > :first-child { - flex: 1; - } - } - } - } - } - - & > :not(:first-child):hover { - .info { - transform: translateY(-10px); - transition: all 0.2s ease; - } - - .operation { - visibility: visible; - opacity: 1; - transition: all 0.4s ease; - } - } - } - - .favorite-divider { - display: flex; - flex-direction: row; - align-items: center; - gap: 20px; - margin-top: 20px; - - :first-child, :last-child { - height: 0; - border: 1px dashed @divide-color; - } - - .divider-text { - flex: 0 0 auto; - font-size: 1.2em; - color: @font-secondary-color; - } - } - - .star-content { - gap: 20px; - flex-wrap: wrap; - justify-content: flex-start; - - > .card-box, > div { - width: 180px; - min-height: 290px; - flex: 0 0 auto; - } - } - } -} diff --git a/src/assets/css/pages/tools/index.module.less b/src/assets/css/pages/tools/index.module.less new file mode 100644 index 0000000..998debe --- /dev/null +++ b/src/assets/css/pages/tools/index.module.less @@ -0,0 +1,54 @@ +@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/system/tools/execute.less b/src/assets/css/pages/tools/source.module.less similarity index 52% rename from src/assets/css/pages/system/tools/execute.less rename to src/assets/css/pages/tools/source.module.less index 4beeb74..cec2f41 100644 --- a/src/assets/css/pages/system/tools/execute.less +++ b/src/assets/css/pages/tools/source.module.less @@ -1,7 +1,7 @@ -[data-component=system-tools-execute] { +.root { padding: 20px; - .card-box { + .rootBox { width: 100%; height: 100%; } diff --git a/src/assets/css/pages/tools/store.less b/src/assets/css/pages/tools/store.module.less similarity index 79% rename from src/assets/css/pages/tools/store.less rename to src/assets/css/pages/tools/store.module.less index ad564cf..5c5f204 100644 --- a/src/assets/css/pages/tools/store.less +++ b/src/assets/css/pages/tools/store.module.less @@ -1,6 +1,6 @@ @import "@/assets/css/constants"; -[data-component=tools-store] { +.root { .search { display: flex; position: sticky; @@ -20,7 +20,7 @@ } } - .root-content { + .rootContent { padding: 20px; gap: 20px; flex-wrap: wrap; @@ -32,7 +32,7 @@ flex: 0 0 auto; } - .no-tool { + .noTool { display: flex; justify-content: center; font-size: 1.4em; @@ -40,10 +40,4 @@ color: @font-secondary-color; } } - - .android-qrcode { - align-items: center; - transform: translateX(-16px); - gap: 20px; - } } diff --git a/src/assets/css/pages/tools/user.less b/src/assets/css/pages/tools/user.module.less similarity index 85% rename from src/assets/css/pages/tools/user.less rename to src/assets/css/pages/tools/user.module.less index 96c66a3..50cdf39 100644 --- a/src/assets/css/pages/tools/user.less +++ b/src/assets/css/pages/tools/user.module.less @@ -1,9 +1,9 @@ @import "@/assets/css/constants"; -[data-component=tools-store-user] .root-content { +.root { padding: 80px 20px 20px 20px; - .root-box { + .rootBox { width: 100%; height: 100%; overflow: visible; @@ -19,7 +19,7 @@ flex: 0 0 auto; } - .avatar-box { + .avatarBox { background-color: white; padding: 4px; border-radius: 50%; @@ -30,7 +30,7 @@ } } - .info-name { + .infoName { margin: 20px 0 0 24px; justify-content: center; @@ -66,7 +66,7 @@ flex: 0 0 auto; } - .no-tool { + .noTool { display: flex; justify-content: center; margin-bottom: 20px; @@ -76,10 +76,4 @@ } } } - - .android-qrcode { - align-items: center; - transform: translateX(-16px); - gap: 20px; - } } diff --git a/src/assets/css/pages/tools/view.less b/src/assets/css/pages/tools/view.module.less similarity index 65% rename from src/assets/css/pages/tools/view.less rename to src/assets/css/pages/tools/view.module.less index 6caa46f..fbf3abd 100644 --- a/src/assets/css/pages/tools/view.less +++ b/src/assets/css/pages/tools/view.module.less @@ -1,7 +1,7 @@ -[data-component=tools-view] { +.root { padding: 20px; - .card-box { + .rootBox { position: relative; height: 100%; width: 100%; diff --git a/src/assets/css/pages/system-framework.less b/src/assets/css/pages/user-framework.module.less similarity index 68% rename from src/assets/css/pages/system-framework.less rename to src/assets/css/pages/user-framework.module.less index a39df77..a9f6937 100644 --- a/src/assets/css/pages/system-framework.less +++ b/src/assets/css/pages/user-framework.module.less @@ -1,11 +1,11 @@ @import "@/assets/css/constants"; -[data-component=system-framework] { - .left-panel { +.root { + .leftPanel { background-color: @origin-color; } - .right-panel { + .rightPanel { flex: 1; width: 0; background-color: @background-color; diff --git a/src/assets/css/pages/user/index.less b/src/assets/css/pages/user/index.module.less similarity index 94% rename from src/assets/css/pages/user/index.less rename to src/assets/css/pages/user/index.module.less index 55cea6d..18e8357 100644 --- a/src/assets/css/pages/user/index.less +++ b/src/assets/css/pages/user/index.module.less @@ -1,9 +1,9 @@ @import "@/assets/css/constants"; -[data-component=user] .root-content { +.root { padding: 80px 20px 20px 20px; - .card-box { + .content { width: 100%; height: 100%; overflow: visible; @@ -30,7 +30,7 @@ flex: 0 0 auto; } - .avatar-box { + .avatarBox { background-color: white; padding: 4px; border-radius: 50%; @@ -41,7 +41,7 @@ } } - .info-name { + .infoName { margin: 20px 0 0 24px; justify-content: center; @@ -89,7 +89,7 @@ } } - .table { + .profile, .security { gap: 24px; padding-top: 30px; padding-bottom: 20px; diff --git a/src/components/Playground/CodeEditor/Editor/editor.less b/src/components/Playground/CodeEditor/Editor/index.module.less similarity index 90% rename from src/components/Playground/CodeEditor/Editor/editor.less rename to src/components/Playground/CodeEditor/Editor/index.module.less index 27fcffd..d2fde9f 100644 --- a/src/components/Playground/CodeEditor/Editor/editor.less +++ b/src/components/Playground/CodeEditor/Editor/index.module.less @@ -14,11 +14,11 @@ } } -[data-component=playground-code-editor-editor] { +.root { position: relative; height: 0; - .monaco-editor-light { + :global .monaco-editor-light { height: 100%; overflow: hidden; background-color: var(--border); @@ -40,7 +40,7 @@ } } - .monaco-editor-vs-dark { + :global .monaco-editor-vs-dark { height: 100%; overflow: hidden; background-color: var(--border); @@ -62,7 +62,7 @@ } } - .playground-code-editor-loading { + .playgroundCodeEditorLoading { position: absolute; top: 0; right: 0; diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx index 30e8cb6..3e4e0ca 100644 --- a/src/components/Playground/CodeEditor/Editor/index.tsx +++ b/src/components/Playground/CodeEditor/Editor/index.tsx @@ -1,6 +1,6 @@ import { editor, Selection } from 'monaco-editor' import MonacoEditor, { Monaco } from '@monaco-editor/react' -import '@/components/Playground/CodeEditor/Editor/editor.less' +import styles from '@/components/Playground/CodeEditor/Editor/index.module.less' import '@/components/Playground/CodeEditor/Editor/loader' import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared' import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files' @@ -112,7 +112,7 @@ const Editor = ({ return ( <> -
+
- {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 31ea29b..de3aa88 100644 --- a/src/components/Playground/CodeEditor/FileSelector/Item.tsx +++ b/src/components/Playground/CodeEditor/FileSelector/Item.tsx @@ -1,4 +1,5 @@ import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react' +import styles from '@/components/Playground/CodeEditor/FileSelector/item.module.less' interface ItemProps { className?: string @@ -109,11 +110,11 @@ const Item = ({ return (
{isCreating ? ( -
+
- {fileName} + {fileName}
) : ( <>
{value}
{!readonly && ( -
+
)} diff --git a/src/components/Playground/CodeEditor/FileSelector/file-selector.less b/src/components/Playground/CodeEditor/FileSelector/file-selector.less deleted file mode 100644 index a4aca21..0000000 --- a/src/components/Playground/CodeEditor/FileSelector/file-selector.less +++ /dev/null @@ -1,86 +0,0 @@ -[data-component=playground-file-selector].tab{ - display: flex; - flex: 0 0 auto; - height: 40px; - - .multiple { - flex: 1; - width: 0; - - .tab-content { - height: 40px; - align-items: flex-end; - gap: 2px; - margin-left: 10px; - - .tab-item-add { - padding: 0 12px; - } - - .tabs-margin-right { - height: 100%; - - > * { - height: 100%; - width: 10px; - } - } - } - } - - .sticky { - display: flex; - flex: 0 0 auto; - align-items: flex-end; - margin-right: 10px; - } - - .tab-item { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - height: 30px; - padding: 0 20px; - border: 1px solid #f0f0f0; - background-color: rgba(0, 0, 0, 0.04); - border-radius: 6px 6px 0 0; - cursor: pointer; - - .tab-item-input { - position: relative; - min-width: 40px; - transform: translateY(1px); - - .tab-item-input-mask { - display: inline-block; - color: transparent; - } - input { - position: absolute; - background-color: transparent; - width: 100%; - font-size: 1em; - } - } - - .tab-item-close { - transform: translateX(10px); - - :hover { - fill: #888; - } - - svg { - height: 8px; - fill: #666; - } - } - - &.active { - background-color: white; - border-bottom: none; - } - } - -} diff --git a/src/components/Playground/CodeEditor/FileSelector/index.module.less b/src/components/Playground/CodeEditor/FileSelector/index.module.less new file mode 100644 index 0000000..41af930 --- /dev/null +++ b/src/components/Playground/CodeEditor/FileSelector/index.module.less @@ -0,0 +1,37 @@ +.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.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx index 49cdf6f..b720c2f 100644 --- a/src/components/Playground/CodeEditor/FileSelector/index.tsx +++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx @@ -1,4 +1,4 @@ -import '@/components/Playground/CodeEditor/FileSelector/file-selector.less' +import styles from '@/components/Playground/CodeEditor/FileSelector/index.module.less' import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar' import FlexBox from '@/components/common/FlexBox' import { IFiles } from '@/components/Playground/shared' @@ -164,8 +164,8 @@ const FileSelector = ({ return ( <> -
-
+
+
- + {tabs.map((item, index) => ( )} -
+
{(files[IMPORT_MAP_FILE_NAME] || files[TS_CONFIG_FILE_NAME]) && ( -
+
{files[TS_CONFIG_FILE_NAME] && ( - + {showFileSelector && ( - {errorMsg &&
{errorMsg}
} + {errorMsg &&
{errorMsg}
} ) diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx index 60acbf1..bc61aae 100644 --- a/src/components/Playground/Output/Preview/Render.tsx +++ b/src/components/Playground/Output/Preview/Render.tsx @@ -1,5 +1,5 @@ import { ChangeEvent } from 'react' -import '@/components/Playground/Output/Preview/render.less' +import styles from '@/components/Playground/Output/Preview/render.module.less' import { COLOR_FONT_MAIN } from '@/constants/common.constants' import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw' import HideScrollbar from '@/components/common/HideScrollbar' @@ -174,16 +174,18 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => return mobileMode ? ( <> -
-
-
+
+
+
value.name === selectedDevice) @@ -198,7 +200,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => }} >