Feat(Theme): Support dark mode
This commit is contained in:
378
package-lock.json
generated
378
package-lock.json
generated
@@ -15,6 +15,7 @@
|
||||
"@marsidev/react-turnstile": "^1.0.2",
|
||||
"@monaco-editor/react": "^4.6.0",
|
||||
"antd": "^5.21.4",
|
||||
"antd-style": "^3.7.0",
|
||||
"axios": "1.7.4",
|
||||
"custom-protocol-check": "^1.4.0",
|
||||
"dayjs": "^1.11.13",
|
||||
@@ -179,7 +180,6 @@
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.25.7",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/highlight": "^7.25.7",
|
||||
@@ -228,7 +228,6 @@
|
||||
},
|
||||
"node_modules/@babel/generator": {
|
||||
"version": "7.25.7",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.25.7",
|
||||
@@ -257,7 +256,6 @@
|
||||
},
|
||||
"node_modules/@babel/helper-module-imports": {
|
||||
"version": "7.25.7",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/traverse": "^7.25.7",
|
||||
@@ -306,7 +304,6 @@
|
||||
},
|
||||
"node_modules/@babel/helper-string-parser": {
|
||||
"version": "7.25.7",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
@@ -314,7 +311,6 @@
|
||||
},
|
||||
"node_modules/@babel/helper-validator-identifier": {
|
||||
"version": "7.25.7",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
@@ -342,7 +338,6 @@
|
||||
},
|
||||
"node_modules/@babel/highlight": {
|
||||
"version": "7.25.7",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-validator-identifier": "^7.25.7",
|
||||
@@ -356,7 +351,6 @@
|
||||
},
|
||||
"node_modules/@babel/parser": {
|
||||
"version": "7.25.8",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.25.8"
|
||||
@@ -408,7 +402,6 @@
|
||||
},
|
||||
"node_modules/@babel/template": {
|
||||
"version": "7.25.7",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.25.7",
|
||||
@@ -421,7 +414,6 @@
|
||||
},
|
||||
"node_modules/@babel/traverse": {
|
||||
"version": "7.25.7",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.25.7",
|
||||
@@ -440,14 +432,12 @@
|
||||
"version": "11.12.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
|
||||
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/types": {
|
||||
"version": "7.25.8",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-string-parser": "^7.25.7",
|
||||
@@ -510,14 +500,186 @@
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/babel-plugin": {
|
||||
"version": "11.12.0",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
|
||||
"integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-module-imports": "^7.16.7",
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/hash": "^0.9.2",
|
||||
"@emotion/memoize": "^0.9.0",
|
||||
"@emotion/serialize": "^1.2.0",
|
||||
"babel-plugin-macros": "^3.1.0",
|
||||
"convert-source-map": "^1.5.0",
|
||||
"escape-string-regexp": "^4.0.0",
|
||||
"find-root": "^1.1.0",
|
||||
"source-map": "^0.5.7",
|
||||
"stylis": "4.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": {
|
||||
"version": "0.9.2",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.2.tgz",
|
||||
"integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-1.9.0.tgz",
|
||||
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
|
||||
"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/babel-plugin/node_modules/source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.5.7.tgz",
|
||||
"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/babel-plugin/node_modules/stylis": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.2.0.tgz",
|
||||
"integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/cache": {
|
||||
"version": "11.13.1",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/cache/-/cache-11.13.1.tgz",
|
||||
"integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@emotion/memoize": "^0.9.0",
|
||||
"@emotion/sheet": "^1.4.0",
|
||||
"@emotion/utils": "^1.4.0",
|
||||
"@emotion/weak-memoize": "^0.4.0",
|
||||
"stylis": "4.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/cache/node_modules/stylis": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.2.0.tgz",
|
||||
"integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/css": {
|
||||
"version": "11.13.4",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/css/-/css-11.13.4.tgz",
|
||||
"integrity": "sha512-CthbOD5EBw+iN0rfM96Tuv5kaZN4nxPyYDvGUs0bc7wZBBiU/0mse+l+0O9RshW2d+v5HH1cme+BAbLJ/3Folw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@emotion/babel-plugin": "^11.12.0",
|
||||
"@emotion/cache": "^11.13.0",
|
||||
"@emotion/serialize": "^1.3.0",
|
||||
"@emotion/sheet": "^1.4.0",
|
||||
"@emotion/utils": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/hash": {
|
||||
"version": "0.8.0",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/memoize": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/memoize/-/memoize-0.9.0.tgz",
|
||||
"integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/react": {
|
||||
"version": "11.13.3",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/react/-/react-11.13.3.tgz",
|
||||
"integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/babel-plugin": "^11.12.0",
|
||||
"@emotion/cache": "^11.13.0",
|
||||
"@emotion/serialize": "^1.3.1",
|
||||
"@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
|
||||
"@emotion/utils": "^1.4.0",
|
||||
"@emotion/weak-memoize": "^0.4.0",
|
||||
"hoist-non-react-statics": "^3.3.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/serialize": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/serialize/-/serialize-1.3.2.tgz",
|
||||
"integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@emotion/hash": "^0.9.2",
|
||||
"@emotion/memoize": "^0.9.0",
|
||||
"@emotion/unitless": "^0.10.0",
|
||||
"@emotion/utils": "^1.4.1",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/serialize/node_modules/@emotion/hash": {
|
||||
"version": "0.9.2",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.2.tgz",
|
||||
"integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/serialize/node_modules/@emotion/unitless": {
|
||||
"version": "0.10.0",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.10.0.tgz",
|
||||
"integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/sheet": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/sheet/-/sheet-1.4.0.tgz",
|
||||
"integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/unitless": {
|
||||
"version": "0.7.5",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/use-insertion-effect-with-fallbacks": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
|
||||
"integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/utils": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/utils/-/utils-1.4.1.tgz",
|
||||
"integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@emotion/weak-memoize": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
|
||||
"integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@esbuild/win32-x64": {
|
||||
"version": "0.21.5",
|
||||
"cpu": [
|
||||
@@ -770,7 +932,6 @@
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.5",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/set-array": "^1.2.1",
|
||||
@@ -783,7 +944,6 @@
|
||||
},
|
||||
"node_modules/@jridgewell/resolve-uri": {
|
||||
"version": "3.1.2",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
@@ -791,7 +951,6 @@
|
||||
},
|
||||
"node_modules/@jridgewell/set-array": {
|
||||
"version": "1.2.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
@@ -799,12 +958,10 @@
|
||||
},
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.5.0",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.25",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
@@ -1382,6 +1539,12 @@
|
||||
"undici-types": "~6.19.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/parse-json": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.2.tgz",
|
||||
"integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.12",
|
||||
"dev": true,
|
||||
@@ -1690,7 +1853,6 @@
|
||||
},
|
||||
"node_modules/ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-convert": "^1.9.0"
|
||||
@@ -1762,6 +1924,26 @@
|
||||
"react-dom": ">=16.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/antd-style": {
|
||||
"version": "3.7.0",
|
||||
"resolved": "https://registry.npmmirror.com/antd-style/-/antd-style-3.7.0.tgz",
|
||||
"integrity": "sha512-u0KFUzCLrvzRmcJz7jz23KeM95df6TzJ9q5mqIOrF8e9jWj+um49APLtMQjEA8HmPeGQXeGZCRVS3fTKHaZzEg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ant-design/cssinjs": "^1.21.1",
|
||||
"@babel/runtime": "^7.24.1",
|
||||
"@emotion/cache": "^11.11.0",
|
||||
"@emotion/css": "^11.11.2",
|
||||
"@emotion/react": "^11.11.4",
|
||||
"@emotion/serialize": "^1.1.3",
|
||||
"@emotion/utils": "^1.2.1",
|
||||
"use-merge-value": "^1.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"antd": ">=5.8.1",
|
||||
"react": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/argparse": {
|
||||
"version": "2.0.1",
|
||||
"dev": true,
|
||||
@@ -1784,6 +1966,37 @@
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-plugin-macros": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
|
||||
"integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"cosmiconfig": "^7.0.0",
|
||||
"resolve": "^1.19.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10",
|
||||
"npm": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
|
||||
"integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/parse-json": "^4.0.0",
|
||||
"import-fresh": "^3.2.1",
|
||||
"parse-json": "^5.0.0",
|
||||
"path-type": "^4.0.0",
|
||||
"yaml": "^1.10.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"dev": true,
|
||||
@@ -1841,7 +2054,6 @@
|
||||
},
|
||||
"node_modules/callsites": {
|
||||
"version": "3.1.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
@@ -1879,7 +2091,6 @@
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "2.4.2",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ansi-styles": "^3.2.1",
|
||||
@@ -1919,7 +2130,6 @@
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-name": "1.1.3"
|
||||
@@ -1927,7 +2137,6 @@
|
||||
},
|
||||
"node_modules/color-name": {
|
||||
"version": "1.1.3",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
@@ -2054,7 +2263,6 @@
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.7",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ms": "^2.1.3"
|
||||
@@ -2151,7 +2359,6 @@
|
||||
},
|
||||
"node_modules/error-ex": {
|
||||
"version": "1.3.2",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-arrayish": "^0.2.1"
|
||||
@@ -2214,7 +2421,6 @@
|
||||
},
|
||||
"node_modules/escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.8.0"
|
||||
@@ -2625,6 +2831,12 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/find-root": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/find-root/-/find-root-1.1.0.tgz",
|
||||
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/find-up": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
|
||||
@@ -2676,6 +2888,15 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
"dev": true,
|
||||
@@ -2723,12 +2944,38 @@
|
||||
},
|
||||
"node_modules/has-flag": {
|
||||
"version": "3.0.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
|
||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/html-encoding-sniffer": {
|
||||
"version": "4.0.0",
|
||||
"dev": true,
|
||||
@@ -2809,7 +3056,6 @@
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"parent-module": "^1.0.0",
|
||||
@@ -2832,9 +3078,23 @@
|
||||
},
|
||||
"node_modules/is-arrayish": {
|
||||
"version": "0.2.1",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/is-core-module": {
|
||||
"version": "2.15.1",
|
||||
"resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.15.1.tgz",
|
||||
"integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"hasown": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-extglob": {
|
||||
"version": "2.1.1",
|
||||
"dev": true,
|
||||
@@ -2939,7 +3199,6 @@
|
||||
},
|
||||
"node_modules/jsesc": {
|
||||
"version": "3.0.2",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"jsesc": "bin/jsesc"
|
||||
@@ -2955,7 +3214,6 @@
|
||||
},
|
||||
"node_modules/json-parse-even-better-errors": {
|
||||
"version": "2.3.1",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/json-schema-traverse": {
|
||||
@@ -3056,7 +3314,6 @@
|
||||
},
|
||||
"node_modules/lines-and-columns": {
|
||||
"version": "1.2.4",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/local-pkg": {
|
||||
@@ -3264,7 +3521,6 @@
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
@@ -3394,7 +3650,6 @@
|
||||
},
|
||||
"node_modules/parent-module": {
|
||||
"version": "1.0.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"callsites": "^3.0.0"
|
||||
@@ -3405,7 +3660,6 @@
|
||||
},
|
||||
"node_modules/parse-json": {
|
||||
"version": "5.2.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.0.0",
|
||||
@@ -3457,9 +3711,14 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/path-parse": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
|
||||
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/path-type": {
|
||||
"version": "4.0.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
@@ -3472,7 +3731,6 @@
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.1.0",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
@@ -4271,9 +4529,25 @@
|
||||
"version": "1.5.1",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.8",
|
||||
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz",
|
||||
"integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-core-module": "^2.13.0",
|
||||
"path-parse": "^1.0.7",
|
||||
"supports-preserve-symlinks-flag": "^1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"resolve": "bin/resolve"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve-from": {
|
||||
"version": "4.0.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
@@ -4512,7 +4786,6 @@
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
"version": "5.5.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"has-flag": "^3.0.0"
|
||||
@@ -4521,6 +4794,18 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/supports-preserve-symlinks-flag": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
|
||||
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/svg-parser": {
|
||||
"version": "2.0.4",
|
||||
"dev": true,
|
||||
@@ -4567,7 +4852,6 @@
|
||||
},
|
||||
"node_modules/to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
@@ -4874,6 +5158,15 @@
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-merge-value": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/use-merge-value/-/use-merge-value-1.2.0.tgz",
|
||||
"integrity": "sha512-DXgG0kkgJN45TcyoXL49vJnn55LehnrmoHc7MbKi+QDBvr8dsesqws8UlyIWGHMR+JXgxc1nvY+jDGMlycsUcw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.x"
|
||||
}
|
||||
},
|
||||
"node_modules/vanilla-tilt": {
|
||||
"version": "1.8.1",
|
||||
"license": "MIT"
|
||||
@@ -5053,6 +5346,15 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/yaml": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmmirror.com/yaml/-/yaml-1.10.2.tgz",
|
||||
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/yocto-queue": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
"@marsidev/react-turnstile": "^1.0.2",
|
||||
"@monaco-editor/react": "^4.6.0",
|
||||
"antd": "^5.21.4",
|
||||
"antd-style": "^3.7.0",
|
||||
"axios": "1.7.4",
|
||||
"custom-protocol-check": "^1.4.0",
|
||||
"dayjs": "^1.11.13",
|
||||
|
||||
48
src/App.tsx
48
src/App.tsx
@@ -1,27 +1,65 @@
|
||||
import { theme } from 'antd'
|
||||
import zh_CN from 'antd/locale/zh_CN'
|
||||
import BaseStyles from '@/assets/css/base.style'
|
||||
import CommonStyles from '@/assets/css/common.style'
|
||||
import { COLOR_PRODUCTION } from '@/constants/common.constants'
|
||||
import { getRouter } from '@/router'
|
||||
import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
|
||||
|
||||
export const AppContext = createContext<{ refreshRouter: () => void }>({
|
||||
refreshRouter: () => undefined
|
||||
export const AppContext = createContext({
|
||||
refreshRouter: () => {},
|
||||
isDarkMode: false
|
||||
})
|
||||
|
||||
const App = () => {
|
||||
const [routerState, setRouterState] = useState(getRouter)
|
||||
const [isDarkMode, setIsDarkMode] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
setIsDarkMode(darkThemeMq.matches)
|
||||
const listener = (ev: MediaQueryListEvent) => {
|
||||
setIsDarkMode(ev.matches)
|
||||
}
|
||||
darkThemeMq.addEventListener('change', listener)
|
||||
|
||||
return () => {
|
||||
darkThemeMq.removeEventListener('change', listener)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<AntdConfigProvider
|
||||
theme={{
|
||||
cssVar: true,
|
||||
algorithm: isDarkMode ? theme.darkAlgorithm : undefined,
|
||||
token: {
|
||||
colorPrimary: COLOR_PRODUCTION,
|
||||
colorLinkHover: COLOR_PRODUCTION
|
||||
},
|
||||
components: {
|
||||
Tree: {
|
||||
colorBgContainer: 'transparent'
|
||||
}
|
||||
}
|
||||
}}
|
||||
locale={zh_CN}
|
||||
>
|
||||
<BaseStyles />
|
||||
<CommonStyles />
|
||||
<AppContext.Provider
|
||||
value={{
|
||||
refreshRouter: () => {
|
||||
setRouterState(getRouter())
|
||||
}
|
||||
},
|
||||
isDarkMode
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<FullscreenLoadingMask />}>
|
||||
<RouterProvider router={routerState} />
|
||||
</Suspense>
|
||||
</AppContext.Provider>
|
||||
</>
|
||||
</AntdConfigProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
em, i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button, input {
|
||||
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #fff;
|
||||
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.hide, .none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
display: block;
|
||||
content: ".";
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
32
src/assets/css/base.style.ts
Normal file
32
src/assets/css/base.style.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { createGlobalStyle } from 'antd-style'
|
||||
|
||||
export default createGlobalStyle(() => ({
|
||||
'*': { margin: 0, padding: 0, boxSizing: 'border-box' },
|
||||
html: { scrollBehavior: 'smooth' },
|
||||
'em, i': { fontStyle: 'normal' },
|
||||
li: { listStyle: 'none' },
|
||||
img: { border: 0, verticalAlign: 'middle' },
|
||||
button: { cursor: 'pointer' },
|
||||
a: { color: '#666', textDecoration: 'none' },
|
||||
'button, input': {
|
||||
fontFamily:
|
||||
'Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif',
|
||||
border: 0,
|
||||
outline: 'none'
|
||||
},
|
||||
body: {
|
||||
WebkitFontSmoothing: 'antialiased',
|
||||
backgroundColor: '#fff',
|
||||
font: '12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif',
|
||||
color: '#666'
|
||||
},
|
||||
'.hide, .none': { display: 'none' },
|
||||
'.clearfix:after': {
|
||||
visibility: 'hidden',
|
||||
clear: 'both',
|
||||
display: 'block',
|
||||
content: '"."',
|
||||
height: 0
|
||||
},
|
||||
'.clearfix': { zoom: 1 }
|
||||
}))
|
||||
@@ -1,118 +0,0 @@
|
||||
@import '@/assets/css/constants';
|
||||
|
||||
#root {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.body {
|
||||
background-color: @background-color;
|
||||
color: @font-main-color;
|
||||
user-select: none;
|
||||
min-width: 900px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.fill {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fill-with {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fill-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.background-origin {
|
||||
background-color: @origin-color;
|
||||
}
|
||||
|
||||
.center-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vertical-center-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.horizontal-center-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon-size-xs {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
> use {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-size-sm {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
> use {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-size-md {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
> use {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-size-lg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
> use {
|
||||
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-size-xl {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
> use {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-size-menu {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
|
||||
> use {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
43
src/assets/css/common.style.ts
Normal file
43
src/assets/css/common.style.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { createGlobalStyle } from 'antd-style'
|
||||
|
||||
export default createGlobalStyle(() => ({
|
||||
'.center-box': {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
'.vertical-center-box': { display: 'flex', alignItems: 'center' },
|
||||
'.horizontal-center-box': { display: 'flex', justifyContent: 'center' },
|
||||
'.icon-size-xs': {
|
||||
width: 16,
|
||||
height: 16,
|
||||
'> use': { width: 16, height: 16 }
|
||||
},
|
||||
'.icon-size-sm': {
|
||||
width: 20,
|
||||
height: 20,
|
||||
'> use': { width: 20, height: 20 }
|
||||
},
|
||||
'.icon-size-md': {
|
||||
width: 24,
|
||||
height: 24,
|
||||
'> use': { width: 24, height: 24 }
|
||||
},
|
||||
'.icon-size-lg': {
|
||||
width: 32,
|
||||
height: 32,
|
||||
'> use': { width: 32, height: 32 }
|
||||
},
|
||||
'.icon-size-xl': {
|
||||
width: 64,
|
||||
height: 64,
|
||||
'> use': { width: 64, height: 64 }
|
||||
},
|
||||
'.icon-size-menu': {
|
||||
width: 23,
|
||||
height: 23,
|
||||
'> use': { width: 23, height: 23 }
|
||||
},
|
||||
'.flex-horizontal': { display: 'flex', flexDirection: 'row' },
|
||||
'.flex-vertical': { display: 'flex', flexDirection: 'column' }
|
||||
}))
|
||||
@@ -1,8 +0,0 @@
|
||||
@import '@/assets/css/constants';
|
||||
|
||||
.cardBox {
|
||||
background-color: @origin-color;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
10
src/assets/css/components/common/card.style.ts
Normal file
10
src/assets/css/components/common/card.style.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
cardBox: {
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
overflow: 'hidden',
|
||||
boxShadow: token.boxShadowTertiary
|
||||
}
|
||||
}))
|
||||
@@ -1,7 +0,0 @@
|
||||
.fitCenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
11
src/assets/css/components/common/fit-center.style.ts
Normal file
11
src/assets/css/components/common/fit-center.style.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
fitCenter: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}))
|
||||
@@ -1,5 +0,0 @@
|
||||
.fitFullscreen {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
9
src/assets/css/components/common/fit-fullscreen.style.ts
Normal file
9
src/assets/css/components/common/fit-fullscreen.style.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
fitFullscreen: {
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100vh'
|
||||
}
|
||||
}))
|
||||
@@ -1,5 +0,0 @@
|
||||
.flexBox {
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
9
src/assets/css/components/common/flex-box.style.ts
Normal file
9
src/assets/css/components/common/flex-box.style.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
flexBox: {
|
||||
'> *': {
|
||||
flex: 1
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,10 +0,0 @@
|
||||
.fullscreenLoadingMask {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
background-color: rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
fullscreenLoadingMask: {
|
||||
position: 'absolute',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 100,
|
||||
backgroundColor: token.colorBgContainer
|
||||
}
|
||||
}))
|
||||
@@ -1,90 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
@import "@/assets/css/mixins";
|
||||
|
||||
.hideScrollbarMask {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.hideScrollbarSelection {
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
.hideScrollbarContent {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
opacity: .5;
|
||||
touch-action: none;
|
||||
|
||||
.box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.block {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background-color: @font-secondary-color;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
:hover {
|
||||
background-color: @font-main-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
animation: 0.4s linear;
|
||||
|
||||
.keyframes(m7t06K, {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
.verticalScrollbar {
|
||||
height: 100%;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
transform: translateX(-100%);
|
||||
|
||||
.box {
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontalScrollbar {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
transform: translateY(-100%);
|
||||
|
||||
.box {
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
84
src/assets/css/components/common/hide-scrollbar.style.ts
Normal file
84
src/assets/css/components/common/hide-scrollbar.style.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
import { createStyles, keyframes } from 'antd-style'
|
||||
|
||||
const fadeOut = keyframes`
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
`
|
||||
|
||||
export default createStyles(({ css, cx, token }) => {
|
||||
const scrollbarBox = cx(css`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: ${token.borderRadiusLG};
|
||||
overflow: hidden;
|
||||
`)
|
||||
|
||||
return {
|
||||
hideScrollbarMask: {
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
'::-webkit-scrollbar': {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
hideScrollbarSelection: {
|
||||
position: 'relative',
|
||||
overflow: 'scroll',
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none'
|
||||
},
|
||||
hideScrollbarContent: {
|
||||
minWidth: '100%'
|
||||
},
|
||||
scrollbar: {
|
||||
position: 'absolute',
|
||||
zIndex: 1000,
|
||||
opacity: 0.5,
|
||||
touchAction: 'none'
|
||||
},
|
||||
scrollbarBox,
|
||||
scrollbarBoxBlock: {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: token.borderRadiusLG,
|
||||
backgroundColor: token.colorTextSecondary,
|
||||
transition: 'background-color 0.2s',
|
||||
':hover': {
|
||||
backgroundColor: token.colorTextLabel
|
||||
}
|
||||
},
|
||||
verticalScrollbar: css`
|
||||
height: 100%;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
transform: translateX(-100%);
|
||||
|
||||
.${scrollbarBox} {
|
||||
width: ${token.sizeXXS}px;
|
||||
}
|
||||
`,
|
||||
horizontalScrollbar: css`
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
transform: translateY(-100%);
|
||||
|
||||
.${scrollbarBox} {
|
||||
height: ${token.sizeXXS}px;
|
||||
}
|
||||
`,
|
||||
hide: {
|
||||
display: 'block',
|
||||
opacity: 0,
|
||||
animation: `${fadeOut} 0.4s linear`
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,30 +0,0 @@
|
||||
@import '@/assets/css/constants';
|
||||
|
||||
.dotList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
flex: auto;
|
||||
cursor: pointer;
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid @font-secondary-color;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
:hover {
|
||||
background-color: @focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
.active > * {
|
||||
background-color: @font-secondary-color !important;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
.loadingMask {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
12
src/assets/css/components/common/loading-mask.style.ts
Normal file
12
src/assets/css/components/common/loading-mask.style.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
loadingMask: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 100
|
||||
}
|
||||
}))
|
||||
@@ -1,361 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
@import "@/assets/css/mixins";
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
transition: all .3s;
|
||||
white-space: nowrap;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
padding: 10px 14px;
|
||||
color: @main-color;
|
||||
overflow: hidden;
|
||||
|
||||
.iconBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: @SIZE_ICON_SM;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
transform: rotateZ(180deg);
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
letter-spacing: 0.2em;
|
||||
transform: translateX(0.1em);
|
||||
}
|
||||
}
|
||||
|
||||
.content, .bottomFixed {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
.scroll {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
> li, > div > li {
|
||||
padding: 2px 14px;
|
||||
|
||||
&.item {
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
|
||||
> .menuBt {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
|
||||
.iconBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: @SIZE_ICON_SM;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: all 0.2s;
|
||||
background-color: @origin-color;
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @origin-color;
|
||||
background-color: @main-color;
|
||||
|
||||
img {
|
||||
filter: drop-shadow(1000px 0 0 @origin-color);
|
||||
transform: translate(-1000px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> * {
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
padding-left: 10px;
|
||||
z-index: 10000;
|
||||
animation: 0.1s ease forwards;
|
||||
.keyframes(XxrGiu, {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
});
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 10px 10px;
|
||||
background-color: @origin-color;
|
||||
border-radius: 8px;
|
||||
box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.item {
|
||||
border-radius: 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 8px 16px;
|
||||
transition: all 0.2s;
|
||||
|
||||
.text {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @origin-color;
|
||||
background-color: @main-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover a:not(.active) {
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .menu-bt {
|
||||
a:not(.active) {
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
visibility: visible;
|
||||
animation: 0.3s ease;
|
||||
.keyframes(f6yTZM, {
|
||||
0% {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global .delete {
|
||||
:local .menuBt {
|
||||
border: 1px dashed @error-secondary-color;
|
||||
filter: drop-shadow(1000px 0 0 @error-secondary-color);
|
||||
transform: translate(-1000px);
|
||||
|
||||
> a {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separate {
|
||||
height: 0;
|
||||
margin: 10px 5px;
|
||||
border: 1px solid @font-secondary-color;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
padding: 8px 14px;
|
||||
color: @main-color;
|
||||
|
||||
.iconUser {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
margin-left: 4px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: @SIZE_ICON_XS;
|
||||
border: 2px @font-secondary-color solid;
|
||||
color: @font-secondary-color;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
padding-left: 10px;
|
||||
font-size: 1.4em;
|
||||
color: @font-main-color;
|
||||
user-select: text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
a {
|
||||
color: @main-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.iconExit {
|
||||
font-size: @SIZE_ICON_XS;
|
||||
color: @error-color;
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-radius: 8px;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
width: 68px !important;
|
||||
|
||||
.title {
|
||||
.iconBox {
|
||||
span {
|
||||
transform: rotateZ(360deg);
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menuBt {
|
||||
.text, .extend {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
.menuBt {
|
||||
.text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.submenuExit {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding-left: 6px;
|
||||
left: 100%;
|
||||
z-index: 1000;
|
||||
box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.content {
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: @origin-color;
|
||||
|
||||
.iconExit {
|
||||
padding: 4px 8px;
|
||||
|
||||
&:hover {
|
||||
border-radius: 8px;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .submenuExit {
|
||||
display: block;
|
||||
animation: 0.3s ease;
|
||||
.keyframes(mfdCZC, {
|
||||
0% {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
110
src/assets/css/components/common/sidebar/footer.style.ts
Normal file
110
src/assets/css/components/common/sidebar/footer.style.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
import { createStyles, keyframes } from 'antd-style'
|
||||
|
||||
const slideIn = keyframes`
|
||||
0% {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
`
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const collapsedExit = cx(css`
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding-left: ${token.paddingXS}px;
|
||||
left: 100%;
|
||||
z-index: 1000;
|
||||
box-shadow: 5px 5px 15px 0 ${token.colorBorder};
|
||||
`)
|
||||
|
||||
return {
|
||||
footer: css`
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
padding: ${token.paddingXS}px ${token.paddingSM}px;
|
||||
color: ${token.colorPrimary};
|
||||
|
||||
&:hover .${collapsedExit} {
|
||||
display: block;
|
||||
animation: ${slideIn} 0.3s ease;
|
||||
}
|
||||
`,
|
||||
|
||||
icon: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flex: '0 0 auto',
|
||||
marginLeft: token.marginXXS,
|
||||
width: token.sizeXL,
|
||||
height: token.sizeXL,
|
||||
fontSize: token.sizeMS,
|
||||
border: `2px ${token.colorBorder} solid`,
|
||||
color: token.colorBorder,
|
||||
borderRadius: '50%',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer',
|
||||
|
||||
img: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
},
|
||||
|
||||
text: {
|
||||
flex: 1,
|
||||
paddingLeft: token.paddingXS,
|
||||
fontSize: token.fontSizeLG,
|
||||
color: token.colorTextLabel,
|
||||
userSelect: 'text',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
a: {
|
||||
color: token.colorPrimary,
|
||||
textDecoration: 'underline'
|
||||
}
|
||||
},
|
||||
|
||||
collapsedText: {
|
||||
display: 'none'
|
||||
},
|
||||
|
||||
collapsedExit,
|
||||
|
||||
hide: {
|
||||
display: 'none !important'
|
||||
},
|
||||
|
||||
exitContent: {
|
||||
display: 'flex',
|
||||
backgroundColor: token.colorBgContainer
|
||||
},
|
||||
|
||||
collapsedExitContent: {
|
||||
padding: token.paddingXS,
|
||||
borderRadius: token.borderRadiusLG
|
||||
},
|
||||
|
||||
exitIcon: {
|
||||
fontSize: token.sizeMS,
|
||||
color: token.colorError,
|
||||
padding: `${token.paddingXXS}px ${token.paddingXS}px`,
|
||||
cursor: 'pointer',
|
||||
|
||||
'&:hover': {
|
||||
borderRadius: token.borderRadiusLG,
|
||||
backgroundColor: token.colorBgLayout
|
||||
}
|
||||
},
|
||||
|
||||
collapsedExitIcon: {
|
||||
padding: `${token.paddingXXS}px ${token.paddingXS}px`
|
||||
}
|
||||
}
|
||||
})
|
||||
85
src/assets/css/components/common/sidebar/index.style.ts
Normal file
85
src/assets/css/components/common/sidebar/index.style.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const title = cx(css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
padding: ${token.paddingXS}px ${token.paddingSM}px;
|
||||
color: ${token.colorPrimary};
|
||||
overflow: hidden;
|
||||
`)
|
||||
|
||||
const titleIcon = cx(css`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: ${token.paddingXS}px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: ${token.sizeMD}px;
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
transform: rotateZ(180deg);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: ${token.colorBgLayout};
|
||||
}
|
||||
`)
|
||||
|
||||
const titleText = cx(css`
|
||||
flex: 1;
|
||||
font-size: ${token.fontSizeHeading3}px;
|
||||
text-align: center;
|
||||
letter-spacing: ${token.sizeXS}px;
|
||||
`)
|
||||
|
||||
return {
|
||||
sidebar: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
userSelect: 'none',
|
||||
transition: 'all .3s',
|
||||
whiteSpace: 'nowrap'
|
||||
},
|
||||
|
||||
title,
|
||||
|
||||
titleIcon,
|
||||
|
||||
titleText,
|
||||
|
||||
content: {
|
||||
display: 'flex',
|
||||
minHeight: 0,
|
||||
flexDirection: 'column',
|
||||
flex: 1,
|
||||
|
||||
'ul > li, ul > div > li': {
|
||||
padding: `${token.paddingXXS}px ${token.paddingSM}px`
|
||||
}
|
||||
},
|
||||
|
||||
collapse: cx(css`
|
||||
width: ${token.sizeXL * 2}px !important;
|
||||
|
||||
.${title} {
|
||||
.${titleIcon} {
|
||||
span {
|
||||
transform: rotateZ(360deg);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.${titleText} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`)
|
||||
}
|
||||
})
|
||||
83
src/assets/css/components/common/sidebar/item.style.ts
Normal file
83
src/assets/css/components/common/sidebar/item.style.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const menuBt = cx(css`
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: all 0.2s;
|
||||
background-color: ${token.colorBgContainer};
|
||||
}
|
||||
`)
|
||||
|
||||
const active = cx(css`
|
||||
color: ${token.colorTextLightSolid};
|
||||
background-color: ${token.colorPrimary} !important;
|
||||
`)
|
||||
|
||||
return {
|
||||
item: css`
|
||||
position: relative;
|
||||
font-size: ${token.fontSizeHeading5}px;
|
||||
|
||||
&:hover > div > a:not(.${active}),
|
||||
&:hover > a:not(.${active}) {
|
||||
background-color: ${token.colorBgLayout};
|
||||
}
|
||||
`,
|
||||
|
||||
submenuItem: css`
|
||||
border-radius: ${token.borderRadiusLG}px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: ${token.paddingXS}px ${token.paddingMD}px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
`,
|
||||
|
||||
menuBt,
|
||||
|
||||
active,
|
||||
|
||||
icon: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: `0 ${token.paddingXS}px`,
|
||||
width: 40,
|
||||
height: 40,
|
||||
fontSize: token.sizeMD,
|
||||
cursor: 'pointer',
|
||||
|
||||
img: {
|
||||
width: '100%'
|
||||
}
|
||||
},
|
||||
|
||||
text: {
|
||||
flex: 1,
|
||||
paddingLeft: token.paddingXS,
|
||||
width: 0,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis'
|
||||
},
|
||||
|
||||
collapsedText: {
|
||||
display: 'none'
|
||||
},
|
||||
|
||||
collapsedExtend: {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
})
|
||||
9
src/assets/css/components/common/sidebar/scroll.style.ts
Normal file
9
src/assets/css/components/common/sidebar/scroll.style.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
scroll: {
|
||||
minHeight: 0,
|
||||
flex: 1,
|
||||
width: '100%'
|
||||
}
|
||||
}))
|
||||
9
src/assets/css/components/common/sidebar/separate.ts
Normal file
9
src/assets/css/components/common/sidebar/separate.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
separate: {
|
||||
height: 0,
|
||||
margin: `${token.marginSM}px ${token.marginXS}px`,
|
||||
border: `1px solid ${token.colorBorder}`
|
||||
}
|
||||
}))
|
||||
50
src/assets/css/components/common/sidebar/submenu.style.ts
Normal file
50
src/assets/css/components/common/sidebar/submenu.style.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { createStyles, keyframes } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => {
|
||||
const slideIn = keyframes`
|
||||
0% {
|
||||
transform: translateX(-${token.sizeSM}px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
`
|
||||
|
||||
const slideOut = keyframes`
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-${token.sizeSM}px);
|
||||
opacity: 0;
|
||||
}
|
||||
`
|
||||
|
||||
return {
|
||||
submenu: {
|
||||
visibility: 'hidden',
|
||||
position: 'fixed',
|
||||
paddingLeft: token.paddingXS,
|
||||
zIndex: 10000,
|
||||
animation: `${slideOut} 0.1s ease forwards`
|
||||
},
|
||||
|
||||
hoveredSubmenu: {
|
||||
visibility: 'visible',
|
||||
animation: `${slideIn} 0.3s ease`
|
||||
},
|
||||
|
||||
content: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: token.sizeXXS,
|
||||
padding: token.paddingSM,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
boxShadow: token.boxShadow
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,28 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
cursor: pointer;
|
||||
|
||||
.urlCard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 80px;
|
||||
text-align: center;
|
||||
gap: 42px;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: @production-color;
|
||||
font-size: @SIZE_ICON_XL;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: bolder;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
24
src/assets/css/components/common/url-card.style.ts
Normal file
24
src/assets/css/components/common/url-card.style.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
width: 180,
|
||||
height: 290,
|
||||
textAlign: 'center',
|
||||
gap: token.sizeXXL,
|
||||
cursor: 'pointer',
|
||||
'> *': {
|
||||
flex: '0 0 auto',
|
||||
display: 'block'
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
marginTop: 80,
|
||||
color: token.colorPrimary,
|
||||
fontSize: token.sizeXXL
|
||||
},
|
||||
text: {
|
||||
fontWeight: 'bolder',
|
||||
fontSize: token.fontSizeXL
|
||||
}
|
||||
}))
|
||||
@@ -1,5 +0,0 @@
|
||||
.root {
|
||||
background-color: transparent;
|
||||
color: unset;
|
||||
cursor: grab;
|
||||
}
|
||||
9
src/assets/css/components/dnd/drag-handle.style.ts
Normal file
9
src/assets/css/components/dnd/drag-handle.style.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
backgroundColor: 'transparent',
|
||||
color: 'unset',
|
||||
cursor: 'grab'
|
||||
}
|
||||
}))
|
||||
@@ -1,22 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 10px 10px;
|
||||
background-color: @origin-color;
|
||||
|
||||
.dropMaskBorder {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 2px dashed @font-secondary-color;
|
||||
border-radius: 8px;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
24
src/assets/css/components/dnd/drop-mask.style.ts
Normal file
24
src/assets/css/components/dnd/drop-mask.style.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
padding: `0 ${token.paddingSM}px ${token.paddingSM}px`,
|
||||
backgroundColor: token.colorBgContainer
|
||||
},
|
||||
|
||||
dropMaskBorder: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
border: `2px dashed ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
fontSize: token.fontSizeHeading3
|
||||
}
|
||||
}))
|
||||
15
src/assets/css/components/dnd/sortable.style.ts
Normal file
15
src/assets/css/components/dnd/sortable.style.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
delete: {
|
||||
'.dnd-delete-mask': {
|
||||
border: `1px dashed ${token.colorErrorHover}`,
|
||||
filter: `drop-shadow(1000px 0 0 ${token.colorErrorHover})`,
|
||||
transform: 'translate(-1000px)',
|
||||
|
||||
'> a': {
|
||||
backgroundColor: 'transparent !important'
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,33 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.settingsCard {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
color: @main-color;
|
||||
|
||||
> .head {
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.icon {
|
||||
font-size: @SIZE_ICON_MD;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
:nth-child(n+3) {
|
||||
flex: 0 0 auto;
|
||||
color: @font-main-color;
|
||||
}
|
||||
|
||||
.btSave {
|
||||
color: @main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
32
src/assets/css/components/system/setting-card.style.ts
Normal file
32
src/assets/css/components/system/setting-card.style.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: token.paddingLG,
|
||||
gap: token.paddingLG,
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
head: {
|
||||
alignItems: 'center',
|
||||
gap: token.sizeXXS,
|
||||
|
||||
'>:nth-child(n+3)': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
icon: {
|
||||
fontSize: token.sizeLG,
|
||||
flex: '0 0 auto'
|
||||
},
|
||||
|
||||
title: {
|
||||
display: 'flex',
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
btSave: {
|
||||
color: token.colorPrimary
|
||||
}
|
||||
}))
|
||||
@@ -1,78 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.statisticsCard {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
|
||||
> .head {
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: @main-color;
|
||||
|
||||
.icon {
|
||||
font-size: @SIZE_ICON_MD;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
:nth-child(n+3) {
|
||||
flex: 0 0 auto;
|
||||
color: @font-main-color;
|
||||
}
|
||||
}
|
||||
|
||||
:global .card-content {
|
||||
font-size: 1.1em;
|
||||
padding: 0 10px;
|
||||
gap: 10px;
|
||||
|
||||
.key, .value-percent {
|
||||
flex: 0 0 auto;
|
||||
color: @font-main-color;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: @font-secondary-color;
|
||||
overflow: hidden;
|
||||
|
||||
> * {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.value-chart {
|
||||
justify-content: space-around;
|
||||
width: 0;
|
||||
|
||||
> div {
|
||||
max-height: 12px;
|
||||
height: 12px;
|
||||
|
||||
> * {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.value-percent {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.big-chart {
|
||||
width: 0;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
> * {
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
src/assets/css/components/system/statistics-card.style.ts
Normal file
28
src/assets/css/components/system/statistics-card.style.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: token.paddingLG,
|
||||
gap: token.paddingLG
|
||||
},
|
||||
|
||||
head: {
|
||||
alignItems: 'center',
|
||||
gap: token.sizeXXS,
|
||||
color: token.colorPrimary,
|
||||
|
||||
'>:nth-child(n+3)': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
icon: {
|
||||
fontSize: token.sizeLG,
|
||||
flex: '0 0 auto'
|
||||
},
|
||||
|
||||
title: {
|
||||
display: 'flex',
|
||||
fontSize: token.fontSize
|
||||
}
|
||||
}))
|
||||
@@ -1,27 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
cursor: pointer;
|
||||
|
||||
.loadMoreCard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
font-size: @SIZE_ICON_XXL;
|
||||
color: @production-color;
|
||||
align-items: center;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
font-size: 1.2em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
src/assets/css/components/tools/load-more-card.style.ts
Normal file
26
src/assets/css/components/tools/load-more-card.style.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
textAlign: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
|
||||
'>*': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
icon: {
|
||||
fontSize: token.sizeXXL,
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
text: {
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder'
|
||||
}
|
||||
}))
|
||||
@@ -1,94 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
|
||||
.repositoryCard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
|
||||
:global .version-select {
|
||||
width: 9em;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
>:not(:global .version-select) {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
color: @production-color;
|
||||
font-size: @SIZE_ICON_XL;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: @SIZE_ICON_XL;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
transform: translateY(40px);
|
||||
transition: all 0.1s ease;
|
||||
|
||||
.toolName {
|
||||
font-weight: bolder;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.info {
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
padding-bottom: 20px;
|
||||
gap: 4px;
|
||||
width: 70%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
> *, .edit > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.edit {
|
||||
> * {
|
||||
> :first-child {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .operation {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
108
src/assets/css/components/tools/repository-card.style.ts
Normal file
108
src/assets/css/components/tools/repository-card.style.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const info = cx(css`
|
||||
padding: 0 ${token.paddingSM}px;
|
||||
transform: translateY(${token.sizeXL}px);
|
||||
transition: all 0.1s ease;
|
||||
`)
|
||||
|
||||
const edit = cx(css`
|
||||
> * {
|
||||
> :first-child {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
const toolDesc = cx(css`
|
||||
position: relative;
|
||||
margin-top: ${token.marginXS}px;
|
||||
color: ${token.colorTextDescription};
|
||||
transition: all 0.1s ease;
|
||||
`)
|
||||
|
||||
const operation = cx(css`
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex: 1;
|
||||
gap: ${token.sizeXXS}px;
|
||||
bottom: ${token.sizeLG}px;
|
||||
padding: 0 ${token.paddingLG}px;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
opacity: 0;
|
||||
|
||||
> *,
|
||||
.${edit} > * {
|
||||
width: 100%;
|
||||
}
|
||||
`)
|
||||
|
||||
return {
|
||||
root: css`
|
||||
width: 180px;
|
||||
height: 290px;
|
||||
text-align: center;
|
||||
gap: ${token.sizeSM}px;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.${info} {
|
||||
transform: translateY(-${token.sizeXXS}px);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.${toolDesc} {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.${operation} {
|
||||
opacity: 1;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
header: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
padding: token.paddingSM,
|
||||
gap: token.paddingXS,
|
||||
|
||||
'> :first-child': {
|
||||
width: 0,
|
||||
flex: 1
|
||||
},
|
||||
|
||||
'> :not(:first-child)': {
|
||||
fontSize: token.size
|
||||
}
|
||||
},
|
||||
|
||||
icon: {
|
||||
img: {
|
||||
width: token.sizeXL * 2
|
||||
}
|
||||
},
|
||||
|
||||
info,
|
||||
|
||||
toolName: {
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
},
|
||||
|
||||
toolDesc,
|
||||
|
||||
operation,
|
||||
|
||||
edit
|
||||
}
|
||||
})
|
||||
@@ -1,114 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
.storeCard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
|
||||
.version {
|
||||
width: 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
font-size: 1.6em;
|
||||
gap: 4px;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
z-index: 100;
|
||||
|
||||
> *:hover {
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
color: @production-color;
|
||||
font-size: @SIZE_ICON_XL;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: @SIZE_ICON_XL;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-top: 20px;
|
||||
|
||||
.toolName {
|
||||
font-weight: bolder;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.toolDesc {
|
||||
margin: 10px auto 0;
|
||||
color: @font-secondary-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 40px;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
padding-top: 8px;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
padding-bottom: 10px;
|
||||
gap: 10px;
|
||||
|
||||
.avatar {
|
||||
> * {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.authorName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:hover {
|
||||
.header {
|
||||
.version {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.operation {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.androidQrcode {
|
||||
align-items: center;
|
||||
transform: translateX(-16px);
|
||||
gap: 20px;
|
||||
}
|
||||
110
src/assets/css/components/tools/store-card.style.ts
Normal file
110
src/assets/css/components/tools/store-card.style.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const version = cx(css`
|
||||
width: 0;
|
||||
transition: all 0.2s;
|
||||
`)
|
||||
|
||||
const operation = cx(css`
|
||||
display: flex;
|
||||
font-size: 1.6em;
|
||||
gap: ${token.sizeXXS}px;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
z-index: 100;
|
||||
|
||||
> *:hover {
|
||||
color: ${token.colorIconHover};
|
||||
}
|
||||
`)
|
||||
|
||||
return {
|
||||
root: css`
|
||||
width: 180px;
|
||||
height: 290px;
|
||||
text-align: center;
|
||||
gap: ${token.sizeSM}px;
|
||||
cursor: pointer;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.${version} {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.${operation} {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
header: {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
padding: token.paddingSM,
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
|
||||
version,
|
||||
|
||||
operation,
|
||||
|
||||
icon: {
|
||||
img: {
|
||||
width: token.sizeXL * 2
|
||||
}
|
||||
},
|
||||
|
||||
info: {
|
||||
padding: `0 ${token.paddingSM}px`
|
||||
},
|
||||
|
||||
toolName: {
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
},
|
||||
|
||||
toolDesc: {
|
||||
marginTop: token.marginXS,
|
||||
color: token.colorTextDescription
|
||||
},
|
||||
|
||||
author: {
|
||||
display: 'flex',
|
||||
marginTop: 'auto',
|
||||
paddingBottom: token.paddingSM,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
gap: token.sizeXS,
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorPrimary
|
||||
}
|
||||
},
|
||||
|
||||
avatar: {
|
||||
'> *': {
|
||||
width: token.sizeLG,
|
||||
height: token.sizeLG
|
||||
}
|
||||
},
|
||||
|
||||
authorName: {
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
|
||||
androidQrcode: {
|
||||
alignItems: 'center',
|
||||
transform: 'translateX(-16px)',
|
||||
gap: token.sizeMD
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -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;
|
||||
@@ -1,15 +0,0 @@
|
||||
.keyframes(@animationName, @content) {
|
||||
animation-name: @animationName;
|
||||
@-webkit-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@-moz-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@-o-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
transform: translateY(-10px);
|
||||
|
||||
.primary {
|
||||
font-size: 2.4em;
|
||||
font-weight: bolder;
|
||||
color: @production-color;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 300px;
|
||||
font-size: 14px;
|
||||
|
||||
.retry, .success {
|
||||
margin-bottom: 16px;
|
||||
|
||||
a {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: @production-color;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
src/assets/css/pages/sign/forget.style.ts
Normal file
35
src/assets/css/pages/sign/forget.style.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
title: {
|
||||
marginBottom: token.marginMD,
|
||||
transform: `translateY(-${token.sizeSM}px)`
|
||||
},
|
||||
|
||||
primary: {
|
||||
fontSize: token.fontSizeHeading3,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
secondary: {
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
form: {
|
||||
width: 300,
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
retry: {
|
||||
marginBottom: token.margin
|
||||
},
|
||||
|
||||
success: {
|
||||
marginBottom: token.margin
|
||||
},
|
||||
|
||||
footer: {
|
||||
textAlign: 'center'
|
||||
}
|
||||
}))
|
||||
@@ -1,80 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
background-color: #D2D0DD;
|
||||
user-select: none;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: @production-color;
|
||||
}
|
||||
|
||||
.signBox {
|
||||
position: relative;
|
||||
background-color: @origin-color;
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
|
||||
.left, .right {
|
||||
opacity: 1;
|
||||
transition: all 1s ease;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
background-color: #F3F4F8;
|
||||
transition: all 0.8s ease;
|
||||
|
||||
.ballBox {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
background-color: #F1F2F7;
|
||||
|
||||
.ball {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background-color: @production-color;
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
transform: rotateZ(180deg);
|
||||
filter: blur(12px);
|
||||
|
||||
.ball {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.switch {
|
||||
.cover {
|
||||
transform: translateX(100%);
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
82
src/assets/css/pages/sign/index.style.ts
Normal file
82
src/assets/css/pages/sign/index.style.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ cx, css, token }) => {
|
||||
const cover = cx(css`
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
background-color: ${token.colorBgLayout};
|
||||
transition: all 0.8s ease;
|
||||
`)
|
||||
|
||||
const ball = cx(css`
|
||||
position: absolute;
|
||||
width: ${token.sizeXL * 4}px;
|
||||
height: ${token.sizeXL * 4}px;
|
||||
background-color: ${token.colorPrimary};
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(50%);
|
||||
`)
|
||||
|
||||
return {
|
||||
root: {
|
||||
backgroundColor: token.colorBorderSecondary,
|
||||
userSelect: 'none',
|
||||
|
||||
a: {
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
|
||||
signBox: {
|
||||
position: 'relative',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
width: 900,
|
||||
height: 600,
|
||||
overflow: 'hidden',
|
||||
borderRadius: token.borderRadiusLG
|
||||
},
|
||||
|
||||
switch: css`
|
||||
.${cover} {
|
||||
transform: translateX(100%);
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
`,
|
||||
|
||||
side: {
|
||||
opacity: 1,
|
||||
transition: 'all 1s ease',
|
||||
|
||||
'> *': {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
},
|
||||
|
||||
hidden: {
|
||||
opacity: 0
|
||||
},
|
||||
|
||||
cover,
|
||||
|
||||
ballBox: {
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
},
|
||||
|
||||
ball,
|
||||
|
||||
mask: css`
|
||||
transform: rotateZ(180deg);
|
||||
filter: blur(${token.sizeSM}px);
|
||||
|
||||
.${ball} {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
`
|
||||
}
|
||||
})
|
||||
@@ -1,41 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
transform: translateY(-10px);
|
||||
|
||||
.primary {
|
||||
font-size: 2.4em;
|
||||
font-weight: bolder;
|
||||
color: @production-color;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 300px;
|
||||
font-size: 14px;
|
||||
|
||||
.addition {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
|
||||
a {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: @production-color;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/assets/css/pages/sign/sign-in.style.ts
Normal file
36
src/assets/css/pages/sign/sign-in.style.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
title: {
|
||||
marginBottom: token.marginMD,
|
||||
transform: `translateY(-${token.sizeSM}px)`
|
||||
},
|
||||
|
||||
primary: {
|
||||
fontSize: token.fontSizeHeading3,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
secondary: {
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
form: {
|
||||
width: 300,
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
addition: {
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: token.margin,
|
||||
|
||||
a: {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
footer: {
|
||||
textAlign: 'center'
|
||||
}
|
||||
}))
|
||||
@@ -1,40 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
transform: translateY(-10px);
|
||||
|
||||
.primary {
|
||||
font-size: 2.4em;
|
||||
font-weight: bolder;
|
||||
color: @production-color;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 300px;
|
||||
font-size: 14px;
|
||||
|
||||
.retry, .success {
|
||||
margin-bottom: 16px;
|
||||
|
||||
a {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: @production-color;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
31
src/assets/css/pages/sign/sign-up.style.ts
Normal file
31
src/assets/css/pages/sign/sign-up.style.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
title: {
|
||||
marginBottom: token.marginMD,
|
||||
transform: `translateY(-${token.sizeSM}px)`
|
||||
},
|
||||
|
||||
primary: {
|
||||
fontSize: token.fontSizeHeading3,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
secondary: {
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
form: {
|
||||
width: 300,
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
retry: {
|
||||
marginBottom: token.margin
|
||||
},
|
||||
|
||||
footer: {
|
||||
textAlign: 'center'
|
||||
}
|
||||
}))
|
||||
@@ -1,28 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
transform: translateY(-10px);
|
||||
|
||||
.primary {
|
||||
font-size: 2.4em;
|
||||
font-weight: bolder;
|
||||
color: @production-color;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 300px;
|
||||
font-size: 14px;
|
||||
|
||||
a {
|
||||
color: @production-color;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
src/assets/css/pages/sign/verify.style.ts
Normal file
23
src/assets/css/pages/sign/verify.style.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
title: {
|
||||
marginBottom: token.marginMD,
|
||||
transform: `translateY(-${token.sizeSM}px)`
|
||||
},
|
||||
|
||||
primary: {
|
||||
fontSize: token.fontSizeHeading3,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
secondary: {
|
||||
fontSize: token.fontSize
|
||||
},
|
||||
|
||||
form: {
|
||||
width: 300,
|
||||
fontSize: token.fontSize
|
||||
}
|
||||
}))
|
||||
@@ -1,13 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.leftPanel {
|
||||
background-color: @origin-color;
|
||||
}
|
||||
|
||||
.rightPanel {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
13
src/assets/css/pages/system-framework.style.ts
Normal file
13
src/assets/css/pages/system-framework.style.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
leftPanel: {
|
||||
backgroundColor: token.colorBgContainer
|
||||
},
|
||||
|
||||
rightPanel: {
|
||||
flex: 1,
|
||||
width: 0,
|
||||
backgroundColor: token.colorBgLayout
|
||||
}
|
||||
}))
|
||||
@@ -1,15 +0,0 @@
|
||||
.root {
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
> div {
|
||||
width: 200px;
|
||||
height: 320px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/assets/css/pages/system/index.style.ts
Normal file
15
src/assets/css/pages/system/index.style.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'flex-start',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto',
|
||||
overflow: 'hidden !important'
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,14 +0,0 @@
|
||||
.root {
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
|
||||
.rootCol {
|
||||
gap: 20px;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
16
src/assets/css/pages/system/settings/index.style.ts
Normal file
16
src/assets/css/pages/system/settings/index.style.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20
|
||||
},
|
||||
|
||||
rootCol: {
|
||||
gap: 20,
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,13 +0,0 @@
|
||||
.root {
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
width: 48%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/assets/css/pages/system/statistics/common.style.ts
Normal file
44
src/assets/css/pages/system/statistics/common.style.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
content: {
|
||||
fontSize: token.fontSize,
|
||||
padding: '0 10px',
|
||||
gap: 10,
|
||||
|
||||
'> *': {
|
||||
gap: 5
|
||||
}
|
||||
},
|
||||
|
||||
bigChart: {
|
||||
width: 0,
|
||||
height: 400
|
||||
},
|
||||
|
||||
key: {
|
||||
flex: '0 0 auto',
|
||||
color: token.colorTextLabel
|
||||
},
|
||||
|
||||
value: {
|
||||
color: token.colorTextDescription,
|
||||
overflow: 'hidden',
|
||||
|
||||
'> *': {
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
}
|
||||
},
|
||||
|
||||
chartValue: {
|
||||
justifyContent: 'space-between',
|
||||
width: 0
|
||||
},
|
||||
|
||||
percentValue: {
|
||||
flex: '0 0 auto',
|
||||
color: token.colorTextDescription
|
||||
}
|
||||
}))
|
||||
16
src/assets/css/pages/system/statistics/index.style.ts
Normal file
16
src/assets/css/pages/system/statistics/index.style.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
minWidth: 800,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> div': {
|
||||
width: '48%',
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,44 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.hasEdited::after {
|
||||
content: '*';
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
|
||||
>*:first-child {
|
||||
width: 0;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
> *:nth-child(2) {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.closeEditorBtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: @font-secondary-color;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
opacity: 0.6;
|
||||
box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/assets/css/pages/system/tools/base.style.ts
Normal file
44
src/assets/css/pages/system/tools/base.style.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
|
||||
'> *:first-child': {
|
||||
width: 0,
|
||||
height: 'fit-content'
|
||||
},
|
||||
|
||||
'> *:nth-child(2)': {
|
||||
position: 'sticky',
|
||||
top: 20,
|
||||
height: 'calc(100vh - 40px)'
|
||||
}
|
||||
},
|
||||
|
||||
hasEdited: {
|
||||
'&::after': {
|
||||
content: '"*"',
|
||||
color: token.colorTextSecondary
|
||||
}
|
||||
},
|
||||
|
||||
closeEditorBtn: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
right: 10,
|
||||
backgroundColor: token.colorBorder,
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
color: token.colorTextSecondary,
|
||||
opacity: 0.6,
|
||||
boxShadow: token.boxShadow,
|
||||
cursor: 'pointer',
|
||||
zIndex: 1000
|
||||
}
|
||||
}))
|
||||
@@ -1,20 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.draggableContent {
|
||||
position: fixed;
|
||||
inset-inline-end: 48px;
|
||||
inset-block-end: 48px;
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
inset-inline-end: 0;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
24
src/assets/css/pages/system/tools/code.style.ts
Normal file
24
src/assets/css/pages/system/tools/code.style.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
rootBox: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
},
|
||||
|
||||
draggableContent: {
|
||||
position: 'fixed',
|
||||
insetInlineEnd: 48,
|
||||
insetBlockEnd: 48,
|
||||
|
||||
'> *': {
|
||||
position: 'relative',
|
||||
insetInlineEnd: 0,
|
||||
insetBlockEnd: 0
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,8 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
12
src/assets/css/pages/system/tools/execute.style.ts
Normal file
12
src/assets/css/pages/system/tools/execute.style.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
rootBox: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}))
|
||||
@@ -1,44 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.hasEdited::after {
|
||||
content: '*';
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
|
||||
>*:first-child {
|
||||
width: 0;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
> *:nth-child(2) {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.closeEditorBtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: @font-secondary-color;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
opacity: 0.6;
|
||||
box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/assets/css/pages/system/tools/template.style.ts
Normal file
44
src/assets/css/pages/system/tools/template.style.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
|
||||
'> *:first-child': {
|
||||
width: 0,
|
||||
height: 'fit-content'
|
||||
},
|
||||
|
||||
'> *:nth-child(2)': {
|
||||
position: 'sticky',
|
||||
top: 20,
|
||||
height: 'calc(100vh - 40px)'
|
||||
}
|
||||
},
|
||||
|
||||
hasEdited: {
|
||||
'&::after': {
|
||||
content: '"*"',
|
||||
color: token.colorTextSecondary
|
||||
}
|
||||
},
|
||||
|
||||
closeEditorBtn: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
right: 10,
|
||||
backgroundColor: token.colorBorder,
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
color: token.colorTextSecondary,
|
||||
opacity: 0.6,
|
||||
boxShadow: token.boxShadow,
|
||||
cursor: 'pointer',
|
||||
zIndex: 1000
|
||||
}
|
||||
}))
|
||||
@@ -1,21 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.leftPanel {
|
||||
background-color: @origin-color;
|
||||
|
||||
.menuDroppable {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rightPanel {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
21
src/assets/css/pages/tools-framework.style.ts
Normal file
21
src/assets/css/pages/tools-framework.style.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
leftPanel: {
|
||||
backgroundColor: token.colorBgContainer
|
||||
},
|
||||
|
||||
menuDroppable: {
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
minHeight: 0,
|
||||
flex: 1,
|
||||
width: '100%'
|
||||
},
|
||||
|
||||
rightPanel: {
|
||||
flex: 1,
|
||||
width: 0,
|
||||
backgroundColor: token.colorBgLayout
|
||||
}
|
||||
}))
|
||||
@@ -1,52 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
gap: 10px;
|
||||
width: 0;
|
||||
|
||||
.title {
|
||||
flex: 0 0 auto;
|
||||
height: 40px;
|
||||
|
||||
> * {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.6em;
|
||||
color: @production-color;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
.config {
|
||||
.configContent {
|
||||
padding: 20px;
|
||||
|
||||
.createBt {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.noPreview {
|
||||
font-weight: bolder;
|
||||
color: @font-secondary-color;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
52
src/assets/css/pages/tools/create.style.ts
Normal file
52
src/assets/css/pages/tools/create.style.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
|
||||
'> *': {
|
||||
gap: 10,
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
||||
title: {
|
||||
flex: '0 0 auto',
|
||||
height: 40,
|
||||
|
||||
'> *': {
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
}
|
||||
},
|
||||
|
||||
config: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
createBt: {
|
||||
width: '100%',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
|
||||
preview: {
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
|
||||
noPreview: {
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: token.fontSizeLG,
|
||||
fontWeight: 'bolder'
|
||||
}
|
||||
}))
|
||||
@@ -1,36 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.rootContent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> * {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.draggableMask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.draggableContent {
|
||||
position: fixed;
|
||||
inset-inline-end: 48px;
|
||||
inset-block-end: 48px;
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
inset-inline-end: 0;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
40
src/assets/css/pages/tools/edit.style.ts
Normal file
40
src/assets/css/pages/tools/edit.style.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
rootBox: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
},
|
||||
|
||||
content: {
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
|
||||
'> *': {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
||||
draggableMask: {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
},
|
||||
|
||||
draggableContent: {
|
||||
position: 'fixed',
|
||||
insetInlineEnd: 48,
|
||||
insetBlockEnd: 48,
|
||||
|
||||
'> *': {
|
||||
position: 'relative',
|
||||
insetInlineEnd: 0,
|
||||
insetBlockEnd: 0
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,54 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
|
||||
.ownContent {
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
> div {
|
||||
width: 180px;
|
||||
min-height: 290px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
& > :first-child {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.favoriteDivider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
|
||||
:first-child, :last-child {
|
||||
height: 0;
|
||||
border: 1px dashed @divide-color;
|
||||
}
|
||||
|
||||
.dividerText {
|
||||
flex: 0 0 auto;
|
||||
font-size: 1.2em;
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.starContent {
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
> div {
|
||||
width: 180px;
|
||||
min-height: 290px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
src/assets/css/pages/tools/index.style.ts
Normal file
45
src/assets/css/pages/tools/index.style.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20
|
||||
},
|
||||
|
||||
ownContent: {
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'flex-start',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
favoriteDivider: {
|
||||
alignItems: 'center',
|
||||
gap: 20,
|
||||
marginTop: 20,
|
||||
|
||||
'> :first-child, > :last-child': {
|
||||
height: 0,
|
||||
border: `1px dashed ${token.colorSplit}`
|
||||
}
|
||||
},
|
||||
|
||||
dividerText: {
|
||||
flex: '0 0 auto !important',
|
||||
fontSize: '1.2em',
|
||||
color: token.colorTextSecondary
|
||||
},
|
||||
|
||||
starContent: {
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'flex-start',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,8 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
12
src/assets/css/pages/tools/source.style.ts
Normal file
12
src/assets/css/pages/tools/source.style.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
content: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}))
|
||||
@@ -1,43 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.search {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
top: 20px;
|
||||
z-index: 10;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
> * {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
transform: translateY(-60px);
|
||||
}
|
||||
}
|
||||
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
width: 180px;
|
||||
min-height: 290px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.noTool {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.4em;
|
||||
font-weight: bolder;
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
41
src/assets/css/pages/tools/store.style.ts
Normal file
41
src/assets/css/pages/tools/store.style.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
search: {
|
||||
display: 'flex',
|
||||
position: 'sticky',
|
||||
width: '100%',
|
||||
marginTop: 20,
|
||||
top: 20,
|
||||
zIndex: 10,
|
||||
justifyContent: 'center',
|
||||
transition: 'all 0.3s ease',
|
||||
|
||||
'> *': {
|
||||
width: '80%'
|
||||
}
|
||||
},
|
||||
|
||||
hide: {
|
||||
transform: 'translateY(-60px)'
|
||||
},
|
||||
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
noTool: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
fontSize: '1.4em',
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorTextSecondary
|
||||
}
|
||||
}))
|
||||
@@ -1,79 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
padding: 80px 20px 20px 20px;
|
||||
|
||||
.rootBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
align-items: center;
|
||||
min-width: 900px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
> .info {
|
||||
margin-left: 40px;
|
||||
transform: translateY(-40px);
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.avatarBox {
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.avatar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.infoName {
|
||||
margin: 20px 0 0 24px;
|
||||
justify-content: center;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 2.4em;
|
||||
font-weight: bolder;
|
||||
color: @production-color;
|
||||
}
|
||||
|
||||
.url {
|
||||
cursor: pointer;
|
||||
|
||||
> span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tools {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
width: 180px;
|
||||
min-height: 290px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.noTool {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.2em;
|
||||
font-weight: bolder;
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
82
src/assets/css/pages/tools/user.style.ts
Normal file
82
src/assets/css/pages/tools/user.style.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: '80px 20px 20px 20px'
|
||||
},
|
||||
|
||||
content: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'visible',
|
||||
alignItems: 'center',
|
||||
minWidth: 900,
|
||||
paddingBottom: 20
|
||||
},
|
||||
|
||||
info: {
|
||||
marginLeft: 40,
|
||||
transform: 'translateY(-40px)',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto !important'
|
||||
}
|
||||
},
|
||||
|
||||
avatarBox: {
|
||||
backgroundColor: token.colorBgLayout,
|
||||
padding: 4,
|
||||
borderRadius: '50%',
|
||||
boxShadow: token.boxShadow
|
||||
},
|
||||
|
||||
avatar: {
|
||||
backgroundColor: 'transparent !important'
|
||||
},
|
||||
|
||||
infoName: {
|
||||
margin: '20px 0 0 20px',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
nickname: {
|
||||
fontSize: token.fontSizeHeading2,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
url: {
|
||||
cursor: 'pointer',
|
||||
|
||||
'> span': {
|
||||
marginLeft: 8
|
||||
}
|
||||
},
|
||||
|
||||
tools: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto',
|
||||
|
||||
'> div': {
|
||||
backgroundColor: token.colorBgLayout
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
noTool: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 20,
|
||||
fontSize: token.fontSizeLG,
|
||||
color: token.colorTextSecondary
|
||||
}
|
||||
}))
|
||||
@@ -1,9 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
13
src/assets/css/pages/tools/view.style.ts
Normal file
13
src/assets/css/pages/tools/view.style.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
content: {
|
||||
position: 'relative',
|
||||
height: '100%',
|
||||
width: '100%'
|
||||
}
|
||||
}))
|
||||
@@ -1,13 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.leftPanel {
|
||||
background-color: @origin-color;
|
||||
}
|
||||
|
||||
.rightPanel {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
13
src/assets/css/pages/user-framework.style.ts
Normal file
13
src/assets/css/pages/user-framework.style.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
leftPanel: {
|
||||
backgroundColor: token.colorBgContainer
|
||||
},
|
||||
|
||||
rightPanel: {
|
||||
flex: 1,
|
||||
width: 0,
|
||||
backgroundColor: token.colorBgLayout
|
||||
}
|
||||
}))
|
||||
@@ -1,118 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
padding: 80px 20px 20px 20px;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
align-items: center;
|
||||
min-width: 900px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
> :not(:first-child) {
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
.divide {
|
||||
height: 1px;
|
||||
width: calc(100% - 120px);
|
||||
background-color: @divide-color;
|
||||
margin: 0 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 40px;
|
||||
transform: translateY(-40px);
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.avatarBox {
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.avatar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.infoName {
|
||||
margin: 20px 0 0 24px;
|
||||
justify-content: center;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 2.4em;
|
||||
font-weight: bolder;
|
||||
color: @production-color;
|
||||
}
|
||||
|
||||
.url {
|
||||
cursor: pointer;
|
||||
|
||||
> span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
align-items: center;
|
||||
|
||||
.content {
|
||||
padding-bottom: 30px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1.6em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.operation {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile, .security {
|
||||
gap: 24px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.row {
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1.4em;
|
||||
font-weight: bolder;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 400px;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
114
src/assets/css/pages/user/index.style.ts
Normal file
114
src/assets/css/pages/user/index.style.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: '80px 20px 20px 20px'
|
||||
},
|
||||
|
||||
content: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'visible',
|
||||
alignItems: 'center',
|
||||
minWidth: 900,
|
||||
paddingBottom: 20,
|
||||
|
||||
'> :not(:first-child)': {
|
||||
padding: '0 60px'
|
||||
}
|
||||
},
|
||||
|
||||
info: {
|
||||
marginLeft: 40,
|
||||
transform: 'translateY(-40px)',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto !important'
|
||||
}
|
||||
},
|
||||
|
||||
avatarBox: {
|
||||
backgroundColor: token.colorBgLayout,
|
||||
padding: 4,
|
||||
borderRadius: '50%',
|
||||
boxShadow: token.boxShadow
|
||||
},
|
||||
|
||||
avatar: {
|
||||
backgroundColor: 'transparent !important'
|
||||
},
|
||||
|
||||
infoName: {
|
||||
margin: '20px 0 0 20px',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
nickname: {
|
||||
fontSize: token.fontSizeHeading2,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
url: {
|
||||
cursor: 'pointer',
|
||||
|
||||
'> span': {
|
||||
marginLeft: 8
|
||||
}
|
||||
},
|
||||
|
||||
header: {
|
||||
justifyContent: 'space-between',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
title: {
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder'
|
||||
},
|
||||
|
||||
operation: {
|
||||
gap: 10
|
||||
},
|
||||
|
||||
divider: {
|
||||
height: 1,
|
||||
width: 'calc(100% - 120px)',
|
||||
backgroundColor: token.colorSplit,
|
||||
margin: '30px 60px'
|
||||
},
|
||||
|
||||
list: {
|
||||
gap: 24
|
||||
},
|
||||
|
||||
row: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
label: {
|
||||
fontSize: token.fontSize,
|
||||
fontWeight: 'bolder',
|
||||
flex: 1
|
||||
},
|
||||
|
||||
input: {
|
||||
width: 400,
|
||||
|
||||
'> *': {
|
||||
width: '100%'
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,89 +0,0 @@
|
||||
.keyframes(@animationName, @content) {
|
||||
animation-name: @animationName;
|
||||
@-webkit-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@-moz-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@-o-keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
@keyframes @animationName {
|
||||
@content();
|
||||
}
|
||||
}
|
||||
|
||||
.root {
|
||||
position: relative;
|
||||
height: 0;
|
||||
|
||||
:global .monaco-editor-light {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--border);
|
||||
|
||||
.jsx-tag-angle-bracket {
|
||||
color: #800000;
|
||||
}
|
||||
|
||||
.jsx-text {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.jsx-tag-name {
|
||||
color: #800000;
|
||||
}
|
||||
|
||||
.jsx-tag-attribute-key {
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
|
||||
:global .monaco-editor-vs-dark {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--border);
|
||||
|
||||
.jsx-tag-angle-bracket {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.jsx-text {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.jsx-tag-name {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.jsx-tag-attribute-key {
|
||||
color: #9cdcfe;
|
||||
}
|
||||
}
|
||||
|
||||
.playgroundCodeEditorLoading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border-top: 2px #666 solid;
|
||||
border-right: 2px #ddd solid;
|
||||
border-bottom: 2px #ddd solid;
|
||||
border-left: 2px #ddd solid;
|
||||
animation: .6s linear infinite;
|
||||
|
||||
.keyframes(fUHD7o, {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
53
src/components/Playground/CodeEditor/Editor/index.style.ts
Normal file
53
src/components/Playground/CodeEditor/Editor/index.style.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { createStyles, keyframes } from 'antd-style'
|
||||
|
||||
const rotate = keyframes`
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
`
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
position: 'relative',
|
||||
height: 0,
|
||||
|
||||
'.monaco-editor-light': {
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'var(--border)',
|
||||
'.jsx-tag-angle-bracket': { color: '#800000' },
|
||||
'.jsx-text': { color: '#000' },
|
||||
'.jsx-tag-name': { color: '#800000' },
|
||||
'.jsx-tag-attribute-key': { color: '#f00' }
|
||||
},
|
||||
|
||||
'.monaco-editor-dark': {
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'var(--border)',
|
||||
'.jsx-tag-angle-bracket': { color: '#808080' },
|
||||
'.jsx-text': { color: '#d4d4d4' },
|
||||
'.jsx-tag-name': { color: '#569cd6' },
|
||||
'.jsx-tag-attribute-key': { color: '#9cdcfe' }
|
||||
}
|
||||
},
|
||||
|
||||
loading: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
margin: 4,
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: '50%',
|
||||
borderTop: '2px #666 solid',
|
||||
borderRight: '2px #ddd solid',
|
||||
borderBottom: '2px #ddd solid',
|
||||
borderLeft: '2px #ddd solid',
|
||||
animation: `${rotate} .6s linear infinite`
|
||||
}
|
||||
}))
|
||||
@@ -1,8 +1,8 @@
|
||||
import { editor, Selection } from 'monaco-editor'
|
||||
import MonacoEditor, { Monaco } from '@monaco-editor/react'
|
||||
import styles from '@/components/Playground/CodeEditor/Editor/index.module.less'
|
||||
import useStyles from '@/components/Playground/CodeEditor/Editor/index.style'
|
||||
import '@/components/Playground/CodeEditor/Editor/loader'
|
||||
import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
|
||||
import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared'
|
||||
import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'
|
||||
import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks'
|
||||
import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
|
||||
@@ -13,28 +13,29 @@ export interface ExtraLib {
|
||||
}
|
||||
|
||||
interface EditorProps {
|
||||
isDarkMode?: boolean
|
||||
tsconfig?: ITsconfig
|
||||
files?: IFiles
|
||||
selectedFileName?: string
|
||||
readonly?: boolean
|
||||
onChange?: (code: string | undefined) => void
|
||||
options?: IEditorOptions
|
||||
theme?: ITheme
|
||||
onJumpFile?: (fileName: string) => void
|
||||
extraLibs?: ExtraLib[]
|
||||
}
|
||||
|
||||
const Editor = ({
|
||||
isDarkMode,
|
||||
tsconfig,
|
||||
files = {},
|
||||
selectedFileName = '',
|
||||
readonly,
|
||||
theme,
|
||||
onChange,
|
||||
options,
|
||||
onJumpFile,
|
||||
extraLibs = []
|
||||
}: EditorProps) => {
|
||||
const { styles } = useStyles()
|
||||
const editorRef = useRef<editor.IStandaloneCodeEditor>()
|
||||
const monacoRef = useRef<Monaco>()
|
||||
const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor()
|
||||
@@ -114,9 +115,9 @@ const Editor = ({
|
||||
<>
|
||||
<div className={styles.root}>
|
||||
<MonacoEditor
|
||||
theme={theme}
|
||||
theme={isDarkMode ? 'vs-dark' : 'light'}
|
||||
path={file.name}
|
||||
className={`monaco-editor-${theme ?? 'light'}`}
|
||||
className={`monaco-editor-${isDarkMode ? 'dark' : 'light'}`}
|
||||
language={file.language}
|
||||
value={file.value}
|
||||
onChange={onChange}
|
||||
@@ -129,7 +130,7 @@ const Editor = ({
|
||||
readOnly: readonly
|
||||
}}
|
||||
/>
|
||||
{total > 0 && !finished && <div className={styles.playgroundCodeEditorLoading} />}
|
||||
{total > 0 && !finished && <div className={styles.loading} />}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Dispatch, SetStateAction, KeyboardEvent, ChangeEvent, MouseEvent } from 'react'
|
||||
import styles from '@/components/Playground/CodeEditor/FileSelector/item.module.less'
|
||||
import useStyles from '@/components/Playground/CodeEditor/FileSelector/item.style'
|
||||
|
||||
interface ItemProps {
|
||||
className?: string
|
||||
@@ -30,6 +30,7 @@ const Item = ({
|
||||
onValidate,
|
||||
...prop
|
||||
}: ItemProps) => {
|
||||
const { styles, cx } = useStyles()
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const [fileName, setFileName] = useState(value)
|
||||
const [isCreating, setIsCreating] = useState(prop.creating)
|
||||
@@ -110,7 +111,7 @@ const Item = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${styles.root}${active ? ` ${styles.active}` : ''}${className ? ` ${className}` : ''}`}
|
||||
className={cx(styles.root, active ? styles.active : '', className)}
|
||||
onClick={handleOnClick}
|
||||
>
|
||||
{isCreating ? (
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
.root{
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
height: 40px;
|
||||
|
||||
.multiple {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
|
||||
.tabContent {
|
||||
height: 40px;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
margin-left: 10px;
|
||||
|
||||
.tabItemAdd {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.tabsMarginRight {
|
||||
height: 100%;
|
||||
|
||||
> * {
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticky {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: flex-end;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user