Change css to scss

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",

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",

src/assets/css/base.css

@@ -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
-}

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
+}

src/assets/css/common.css

@@ -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;
-}

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;
+  }
+}

src/assets/css/login.css

@@ -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%;
-}

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%;
+}

src/assets/css/manager.css

@@ -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;
-}

src/index.css

@@ -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;
-  }
-}

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/base.scss'
-import '@/assets/css/common.css'
+import '@/assets/css/common.scss'
 import zh_CN from 'antd/locale/zh_CN'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

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()

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
                 }