From 75e872127c20b1eac1b43ea6ba71690c1e050ca0 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 5 Sep 2023 21:35:27 +0800 Subject: [PATCH] Change css to scss --- package-lock.json | 24 +++++++++ package.json | 1 + src/assets/css/base.css | 63 ---------------------- src/assets/css/base.scss | 63 ++++++++++++++++++++++ src/assets/css/common.css | 106 ------------------------------------- src/assets/css/common.scss | 105 ++++++++++++++++++++++++++++++++++++ src/assets/css/login.css | 63 ---------------------- src/assets/css/login.scss | 63 ++++++++++++++++++++++ src/assets/css/manager.css | 35 ------------ src/index.css | 69 ------------------------ src/main.tsx | 4 +- src/pages/Login.tsx | 2 +- src/router/index.tsx | 9 +--- 13 files changed, 260 insertions(+), 347 deletions(-) delete mode 100644 src/assets/css/base.css create mode 100644 src/assets/css/base.scss delete mode 100644 src/assets/css/common.css create mode 100644 src/assets/css/common.scss delete mode 100644 src/assets/css/login.css create mode 100644 src/assets/css/login.scss delete mode 100644 src/assets/css/manager.css delete mode 100644 src/index.css diff --git a/package-lock.json b/package-lock.json index 29c352d..c7826bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "eslint-plugin-react-refresh": "^0.4.3", "jsdom": "^22.1.0", "prettier": "^3.0.3", + "sass": "^1.66.1", "stylelint-config-prettier": "^9.0.5", "typescript": "^5.2.2", "unplugin-auto-import": "^0.16.6", @@ -4049,6 +4050,12 @@ "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz", "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==" }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz", @@ -6475,6 +6482,23 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/sass": { + "version": "1.66.1", + "resolved": "https://registry.npmmirror.com/sass/-/sass-1.66.1.tgz", + "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/saxes": { "version": "6.0.0", "resolved": "https://registry.npmmirror.com/saxes/-/saxes-6.0.0.tgz", diff --git a/package.json b/package.json index 2e64a58..2592cd4 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "eslint-plugin-react-refresh": "^0.4.3", "jsdom": "^22.1.0", "prettier": "^3.0.3", + "sass": "^1.66.1", "stylelint-config-prettier": "^9.0.5", "typescript": "^5.2.2", "unplugin-auto-import": "^0.16.6", diff --git a/src/assets/css/base.css b/src/assets/css/base.css deleted file mode 100644 index 1426524..0000000 --- a/src/assets/css/base.css +++ /dev/null @@ -1,63 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -em, -i { - font-style: normal -} - -li { - list-style: none -} - -img { - border: 0; - vertical-align: middle -} - -button { - cursor: pointer -} - -a { - color: #666; - text-decoration: none -} - -button, -input { - font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; - border: 0; - outline: none; -} - -body { - -webkit-font-smoothing: antialiased; - background-color: #fff; - font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; - color: #666 -} - -.hide, -.none { - display: none -} - -.clearfix:after { - visibility: hidden; - clear: both; - display: block; - content: "."; - height: 0 -} - -.clearfix { - *zoom: 1 -} \ No newline at end of file diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss new file mode 100644 index 0000000..8bb5df0 --- /dev/null +++ b/src/assets/css/base.scss @@ -0,0 +1,63 @@ +* { + 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 +} \ No newline at end of file diff --git a/src/assets/css/common.css b/src/assets/css/common.css deleted file mode 100644 index 1435e89..0000000 --- a/src/assets/css/common.css +++ /dev/null @@ -1,106 +0,0 @@ -:root { - --main-color: #00D4FF; - --background-color: #F5F5F5; - --font-main-color: #4D4D4D; - --font-secondary-color: #9E9E9E; -} - -.body { - color: var(--font-main-color); - user-select: none; - min-width: 1800px; - min-height: 400px; -} - -.fill { - height: 100%; - width: 100%; -} - -.fill-with { - width: 100%; -} - -.fill-height { - height: 100%; -} - -.background-white { - background-color: white; -} - -.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; -} - -.icon-size-xs > use { - width: 16px; - height: 16px; -} - -.icon-size-sm { - width: 20px; - height: 20px; -} - -.icon-size-sm > use { - width: 20px; - height: 20px; -} - -.icon-size-md { - width: 24px; - height: 24px; -} - -.icon-size-md > use { - width: 24px; - height: 24px; -} - -.icon-size-lg { - width: 32px; - height: 32px; -} - -.icon-size-lg > use { - width: 32px; - height: 32px; -} - -.icon-size-xl { - width: 64px; - height: 64px; -} - -.icon-size-xl > use { - width: 64px; - height: 64px; -} - -.icon-size-menu { - width: 23px; - height: 23px; -} - -.icon-size-menu > use { - width: 23px; - height: 23px; -} diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss new file mode 100644 index 0000000..539eee8 --- /dev/null +++ b/src/assets/css/common.scss @@ -0,0 +1,105 @@ +$main-color: #00D4FF; +$background-color: #F5F5F5; +$font-main-color: #4D4D4D; +$font-secondary-color: #9E9E9E; + +.body { + color: $font-main-color; + user-select: none; + min-width: 1800px; + min-height: 400px; +} + +.fill { + height: 100%; + width: 100%; +} + +.fill-with { + width: 100%; +} + +.fill-height { + height: 100%; +} + +.background-white { + background-color: white; +} + +.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; + } +} diff --git a/src/assets/css/login.css b/src/assets/css/login.css deleted file mode 100644 index fd5fe6e..0000000 --- a/src/assets/css/login.css +++ /dev/null @@ -1,63 +0,0 @@ -.login-background { - display: flex; - height: 100vh; - width: 100vw; - justify-content: center; - align-items: center; - background-color: #B3E5FC; -} - -.login-box { - display: flex; - width: 800px; - height: 450px; - background-color: #448AFF; -} - -.login-box-left { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - flex: 2; -} - -.login-box-left-text { - font-size: 3rem; - color: white; - font-weight: bold; -} - -.login-box-left-text>div:last-child { - font-size: 1.8rem; - font-weight: normal; -} - -.login-box-right { - position: relative; - height: 100%; - flex: 3; - background-color: white; -} - -.login-from-text { - position: absolute; - top: 60px; - left: 40px; - font-weight: bold; - font-size: 2rem; -} - -.login-from { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 30px; - width: 100%; - height: 100%; -} - -.login-from-item { - width: 80%; -} \ No newline at end of file diff --git a/src/assets/css/login.scss b/src/assets/css/login.scss new file mode 100644 index 0000000..22629a8 --- /dev/null +++ b/src/assets/css/login.scss @@ -0,0 +1,63 @@ +.login-background { + display: flex; + height: 100vh; + width: 100vw; + justify-content: center; + align-items: center; + background-color: #B3E5FC; +} + +.login-box { + display: flex; + width: 800px; + height: 450px; + background-color: #448AFF; +} + +.login-box-left { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + flex: 2; +} + +.login-box-left-text { + font-size: 3rem; + color: white; + font-weight: bold; + + > div:last-child { + font-size: 1.8rem; + font-weight: normal; + } +} + +.login-box-right { + position: relative; + height: 100%; + flex: 3; + background-color: white; +} + +.login-from-text { + position: absolute; + top: 60px; + left: 40px; + font-weight: bold; + font-size: 2rem; +} + +.login-from { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 30px; + width: 100%; + height: 100%; +} + +.login-from-item { + width: 80%; +} \ No newline at end of file diff --git a/src/assets/css/manager.css b/src/assets/css/manager.css deleted file mode 100644 index 17c4829..0000000 --- a/src/assets/css/manager.css +++ /dev/null @@ -1,35 +0,0 @@ -.top-bar { - display: flex; - justify-content: right; - background-color: #317ece; - padding: 10px 20px; -} - -.top-bar > button:hover { - color: #F5F5F5; - border-color: #F5F5F5; -} - -.search-row { - display: flex; - gap: 20px; - margin: 10px 10px; -} - -.search-row > * { - display: flex; - gap: 5px; - align-items: center; - flex: 1; - font-size: 1rem; -} - -.search-row > *:not(.operation-buttons) > *:last-child { - flex: 1; -} - -.operation-buttons { - display: flex; - justify-content: right; - gap: 10px; -} \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 2c3fac6..0000000 --- a/src/index.css +++ /dev/null @@ -1,69 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.tsx b/src/main.tsx index 89528f3..e91aef2 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,8 +1,8 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' -import '@/assets/css/base.css' -import '@/assets/css/common.css' +import '@/assets/css/base.scss' +import '@/assets/css/common.scss' import zh_CN from 'antd/locale/zh_CN' ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 40f71af..488f004 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -2,7 +2,7 @@ import React from 'react' import { login } from '@/utils/auth.ts' import { LOGIN_SUCCESS, LOGIN_USERNAME_PASSWORD_ERROR } from '@/constants/Common.constants.ts' import { setToken } from '@/utils/common.ts' -import '@/assets/css/login.css' +import '@/assets/css/login.scss' const Login: React.FC = () => { const [messageApi, contextHolder] = message.useMessage() diff --git a/src/router/index.tsx b/src/router/index.tsx index 316eacc..aeac318 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -12,15 +12,8 @@ const routes: RouteObject[] = [ }, { path: '', - id: 'manager', + id: 'home', Component: React.lazy(() => import('@/pages/Home')), - children: [ - { - id: 'manager-sub', - path: 'sub', - Component: React.lazy(() => import('@/pages/Home')) - } - ], handle: { auth: false } -- 2.49.1