🐛 fix dark mode invalidation

auto-import.d.ts

@@ -304,6 +304,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

components.d.ts

@@ -7,36 +7,52 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AAvatar: typeof import('ant-design-vue/es')['Avatar']
+    ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    AEmpty: typeof import('ant-design-vue/es')['Empty']
     AFlex: typeof import('ant-design-vue/es')['Flex']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AImage: typeof import('ant-design-vue/es')['Image']
+    AImagePreviewGroup: typeof import('ant-design-vue/es')['ImagePreviewGroup']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+    AList: typeof import('ant-design-vue/es')['List']
+    AListItem: typeof import('ant-design-vue/es')['ListItem']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopover: typeof import('ant-design-vue/es')['Popover']
     AQrcode: typeof import('ant-design-vue/es')['QRCode']
+    ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
+    ATag: typeof import('ant-design-vue/es')['Tag']
+    ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
     BoxDog: typeof import('./src/components/BoxDog/BoxDog.vue')['default']
     Card3D: typeof import('./src/components/Card3D/Card3D.vue')['default']
+    CloseCircleOutlined: typeof import('@ant-design/icons-vue')['CloseCircleOutlined']
     Clouds: typeof import('./src/components/Clouds/Clouds.vue')['default']
     CommentInput: typeof import('./src/components/CommentReply/src/CommentInput/CommentInput.vue')['default']
     CommentList: typeof import('./src/components/CommentReply/src/CommentList/CommentList.vue')['default']
     CommentReply: typeof import('./src/components/CommentReply/index.vue')['default']
     DynamicTitle: typeof import('./src/components/DynamicTitle/DynamicTitle.vue')['default']
     EffectsCard: typeof import('./src/components/EffectsCard/EffectsCard.vue')['default']
+    EyeOutlined: typeof import('@ant-design/icons-vue')['EyeOutlined']
     ForgetPage: typeof import('./src/views/Forget/ForgetPage.vue')['default']
     GithubOutlined: typeof import('@ant-design/icons-vue')['GithubOutlined']
     LandingPage: typeof import('./src/views/Landing/LandingPage.vue')['default']
+    LockOutlined: typeof import('@ant-design/icons-vue')['LockOutlined']
     LoginFooter: typeof import('./src/views/Login/LoginFooter.vue')['default']
     LoginPage: typeof import('./src/views/Login/LoginPage.vue')['default']
     MainPage: typeof import('./src/views/Main/MainPage.vue')['default']
@@ -52,6 +68,7 @@ declare module 'vue' {
     SafetyOutlined: typeof import('@ant-design/icons-vue')['SafetyOutlined']
     TabletOutlined: typeof import('@ant-design/icons-vue')['TabletOutlined']
     UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined']
+    WarningOutlined: typeof import('@ant-design/icons-vue')['WarningOutlined']
     WechatOutlined: typeof import('@ant-design/icons-vue')['WechatOutlined']
   }
 }

package.json

@@ -15,7 +15,7 @@
     "@types/animejs": "^3.1.12",
     "@types/crypto-js": "^4.2.2",
     "@types/json-stringify-safe": "^5.0.3",
-    "@types/node": "^22.7.5",
+    "@types/node": "^22.7.7",
     "@types/nprogress": "^0.2.3",
     "@vueuse/core": "^11.1.0",
     "alova": "^3.1.0",
@@ -25,7 +25,7 @@
     "browser-image-compression": "^2.0.2",
     "buffer": "^6.0.3",
     "crypto-js": "^4.2.0",
-    "eslint": "9.12.0",
+    "eslint": "9.13.0",
     "go-captcha-vue": "^2",
     "json-stringify-safe": "^5.0.1",
     "less": "^4.2.0",
@@ -46,16 +46,16 @@
     "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.12.0",
+    "@eslint/js": "^9.13.0",
     "@vitejs/plugin-vue": "^5.1.4",
-    "eslint-plugin-vue": "^9.29.0",
+    "eslint-plugin-vue": "^9.29.1",
     "globals": "^15.11.0",
-    "sass": "^1.79.5",
+    "sass": "^1.80.3",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.9.0",
+    "typescript-eslint": "^8.10.0",
     "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.9",
-    "vite-plugin-bundle-obfuscator": "^1.2.0",
+    "vite-plugin-bundle-obfuscator": "1.2.1",
     "vite-plugin-chunk-split": "^0.5.0",
     "vue-tsc": "^2.1.6"
   }

src/assets/styles/colors.module.scss

@@ -8,31 +8,31 @@ $purple: #722ED1;
 
 
 $colors: (
-        "red": (
+        red: (
                 primary: $red,
                 info: $red,
         ),
-        "orange": (
+        orange: (
                 primary: $orange,
                 info: $orange,
         ),
-        "yellow": (
+        yellow: (
                 primary: $yellow,
                 info: $yellow,
         ),
-        "cyan": (
+        cyan: (
                 primary: $cyan,
                 info: $cyan,
         ),
-        "green": (
+        green: (
                 primary: $green,
                 info: $green,
         ),
-        "blue": (
+        blue: (
                 primary: $blue,
                 info: $blue,
         ),
-        "purple": (
+        purple: (
                 primary: $purple,
                 info: $purple,
         )

src/assets/styles/global.scss

@@ -1,43 +0,0 @@
-@import "theme";
-
-:root {
-    --background-color: #ffffff;
-    --text-color: #000000;
-}
-
-[data-theme="dark"] {
-    --background-color: #121212;
-    --text-color: #ffffff;
-}
-
-#app {
-    position: relative;
-    transition: background-color 0.3s,
-    color 0.3s;
-    width: 100vw;
-    height: 100vh;
-    overflow-x: hidden;
-    @include useTheme {
-        background-color: getModeVar('bgColor') !important;
-        color: getModeVar('infoColor') !important;
-    }
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    font-size: 100%;
-    vertical-align: baseline;
-}
-
-#nprogress .bar {
-    background: #48c453 !important; //自定义颜色
-}
-
-#nprogress .peg {
-    box-shadow: 0 0 10px cyan, 0 0 5px cyan !important;
-}
-
-

src/assets/styles/normalize.css

@@ -0,0 +1,362 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+    display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+    background-color: transparent;
+}
+
+p {
+    display: block;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+    border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+    overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+    text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+    vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+    overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+    display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+    display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+    display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+    display: none;
+}

src/assets/styles/theme.scss

@@ -1,35 +1,35 @@
-@import "colors.module";
+:root {
-
+    --background-color: #ffffff;
-$modes: (
+    --text-color: #000000;
-        "light": (
+    // 着陆页背景颜色
-                bgColor: transparent,
+    --landing-background-color-main: #b9f187;
-                infoColor: #000
+    --comment-text-color: #767779;
-        ),
-        "dark": (
-                bgColor: rgba(15, 15, 16, 0.63),
-                infoColor: #fff
-        )
-);
-$curMode: light;
-$curTheme: red;
-@mixin useTheme() {
-    @each $key1, $value1 in $modes {
-        $curMode: $key1 !global;
-        @each $key2, $value2 in $colors {
-            $curTheme: $key2 !global;
-            html[data-dark='#{$key1}'][data-theme='#{$key2}'] & {
-                @content;
-            }
-        }
-    }
 }
 
-@function getModeVar($key) {
+[data-dark="dark"] {
-    $modeMap: map-get($modes, $curMode);
+    --background-color: #121212;
-    @return map-get($modeMap, $key);
+    --text-color: #ffffff;
+    // 着陆页背景颜色
+    --landing-background-color-main: rgb(0, 0, 0);
+    --comment-text-color: #ffffff;
 }
 
-@function getColor($key) {
+#app {
-    $themeMap: map-get($colors, $curTheme);
+    position: relative;
-    @return map-get($themeMap, $key);
+    transition: background-color 0.3s,
+    color 0.3s;
+    width: 100%;
+    min-height: 100vh;
+    overflow-x: hidden;
 }
+
+
+#nprogress .bar {
+    background: #48c453 !important; //自定义颜色
+}
+
+#nprogress .peg {
+    box-shadow: 0 0 10px cyan, 0 0 5px cyan !important;
+}
+
+

src/components/Clouds/index.scss

@@ -119,9 +119,6 @@ body {
     z-index: 1;
     width: 2000px;
     height: 100%;
-    //background: url("https://www.digitalocean.com/assets/media/products/header-04dcc3be.svg");
-    //background-position: bottom;
-    //background-repeat: no-repeat;
     content: "";
     transform: translateX(-50%);
 }

src/components/CommentReply/src/CommentInput/index.scss

@@ -22,7 +22,7 @@
 
         .comment-action-item {
             cursor: pointer;
-            color: #767779;
+            color: var(--comment-text-color);
 
             .comment-emoji-item {
                 display: flex;
@@ -33,7 +33,7 @@
 
             .comment-action-icon {
                 font-size: 14px;
-                color: #767779;
+                color: var(--comment-text-color);
             }
 
             .comment-action-icon:hover {

src/components/CommentReply/src/CommentList/index.scss

@@ -37,12 +37,12 @@
 
         .reply-ip {
             font-size: 12px;
-            color: #767779;
+            color: var(--comment-text-color);
         }
 
         .reply-time {
             font-size: 12px;
-            color: #767779;
+            color: var(--comment-text-color);
         }
 
         .reply-card {
@@ -61,14 +61,14 @@
 
                 .reply-action-btn {
                     font-size: 13px;
-                    color: #767779;
+                    color: var(--comment-text-color);
                     cursor: pointer;
 
                 }
 
                 .reply-action-icon {
                     font-size: 14px;
-                    color: #767779;
+                    color: var(--comment-text-color);
                     cursor: pointer;
 
                 }
@@ -90,7 +90,7 @@
                 .reply-action-icon-number {
                     font-size: 12px;
                     cursor: pointer;
-                    color: #767779;
+                    color: var(--comment-text-color);
                 }
             }
 
@@ -99,7 +99,7 @@
 
                 .reply-action-btn {
                     font-size: 15px;
-                    color: #767779;
+                    color: var(--comment-text-color);
                     cursor: pointer;
                 }
 
@@ -111,7 +111,7 @@
 
                 .reply-action-info {
                     font-size: 10px;
-                    color: #767779;
+                    color: var(--comment-text-color);
                     cursor: pointer;
                 }
             }

src/components/CommentReply/src/ReplyInput/index.scss

@@ -3,18 +3,18 @@
 
     .reply-input-title {
         font-size: 13px;
-        color: #767779;
+        color: var(--comment-text-color);
     }
 
     .reply-input-author {
         font-size: 13px;
-        color: #767779;
+        color: var(--comment-text-color);
     }
 
     .reply-input-cancel {
         margin-left: 10px;
         font-size: 13px;
-        color: #767779;
+        color: var(--comment-text-color);
         cursor: pointer;
     }
 
@@ -33,11 +33,11 @@
 
                 .comment-action-item-reply {
                     cursor: pointer;
-                    color: #767779;
+                    color: var(--comment-text-color);
 
                     .comment-action-icon-reply {
                         font-size: 14px;
-                        color: #767779;
+                        color: var(--comment-text-color);
                     }
 
                     .comment-action-icon-reply:hover {

src/components/CommentReply/src/ReplyList/index.scss

@@ -1,7 +1,7 @@
 .reply-item-child {
     margin-top: 10px;
     border-radius: 10px;
-    background-color: #f5f5f5;
+    background-color: var(--background-color);
     padding: 10px;
 
     .reply-pagination-child {
@@ -15,7 +15,7 @@
 
         .reply-at {
             font-size: 14px;
-            color: #767779;
+            color: var(--comment-text-color);
             cursor: pointer;
         }
 
@@ -38,12 +38,12 @@
 
         .reply-ip-child {
             font-size: 12px;
-            color: #767779;
+            color: var(--comment-text-color);
         }
 
         .reply-time-child {
             font-size: 12px;
-            color: #767779;
+            color: var(--comment-text-color);
         }
 
         .reply-card-child {
@@ -54,13 +54,13 @@
 
                 .reply-action-btn-child {
                     font-size: 13px;
-                    color: #767779;
+                    color: var(--comment-text-color);
                     cursor: pointer;
                 }
 
                 .reply-action-icon-child {
                     font-size: 14px;
-                    color: #767779;
+                    color: var(--comment-text-color);
                     cursor: pointer;
 
                 }
@@ -82,7 +82,7 @@
                 .reply-action-icon-number-child {
                     font-size: 12px;
                     cursor: pointer;
-                    color: #767779;
+                    color: var(--comment-text-color);
                 }
 
             }
@@ -92,7 +92,7 @@
 
                 .reply-action-btn-child {
                     font-size: 15px;
-                    color: #767779;
+                    color: var(--comment-text-color);
                     cursor: pointer;
                 }
 
@@ -104,7 +104,7 @@
 
                 .reply-action-info-child {
                     font-size: 10px;
-                    color: #767779;
+                    color: var(--comment-text-color);
                     cursor: pointer;
                 }
             }

src/components/CommentReply/src/ReplyReplyInput/index.scss

@@ -3,18 +3,18 @@
 
     .reply-input-title-child {
         font-size: 13px;
-        color: #767779;
+        color: var(--comment-text-color);
     }
 
     .reply-input-author-child {
         font-size: 13px;
-        color: #767779;
+        color: var(--comment-text-color);
     }
 
     .reply-input-cancel-child {
         margin-left: 10px;
         font-size: 13px;
-        color: #767779;
+        color: var(--comment-text-color);
         cursor: pointer;
     }
 
@@ -33,11 +33,11 @@
 
                 .comment-action-item-reply-child {
                     cursor: pointer;
-                    color: #767779;
+                    color: var(--comment-text-color);
 
                     .comment-action-icon-reply-child {
                         font-size: 14px;
-                        color: #767779;
+                        color: var(--comment-text-color);
                     }
 
                     .comment-action-icon-reply-child:hover {

src/layout/Landing/Content/Content.vue

@@ -1,7 +1,7 @@
 <template>
-  <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;">
+  <div class="landing-content">
-    <div style="height: 100px;margin-top: 50px;">
+    <div class="landing-content-title">
-      <span style="font-size: 50px; font-weight: bold;">{{ t('landing.title') }}</span>
+      <span class="landing-content-title-text">{{ t('landing.title') }}</span>
     </div>
     <Card3D/>
     <Clouds/>
@@ -15,6 +15,6 @@ import {useI18n} from "vue-i18n";
 
 const {t} = useI18n();
 </script>
-<style scoped lang="scss">
+<style scoped lang="scss" src="./index.scss">
 
 </style>

src/layout/Landing/Content/index.scss

@@ -0,0 +1,18 @@
+.landing-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+
+    .landing-content-title {
+        height: 100px;
+        margin-top: 50px;
+
+        .landing-content-title-text {
+            font-size: 50px;
+            font-weight: bold;
+            color: var(--text-color);
+        }
+    }
+}

src/layout/Landing/Header/Header.vue

@@ -101,6 +101,6 @@ const toggleTheme = (event: any) => {
 };
 
 </script>
-<style src="./index.scss" scoped>
+<style src="./index.scss" lang="scss" scoped>
 
 </style>

src/layout/Landing/index.scss

@@ -1,6 +1,6 @@
 .area {
-    background: #b9f187;
+    background: var(--landing-background-color-main) !important;
-    background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
+    color: var(--text-color);
     width: 100%;
     height: 100vh;
     z-index: -1;

src/main.ts

@@ -1,7 +1,6 @@
 import {createApp} from 'vue';
 import App from './App.vue';
-import '@/assets/styles/scroll-bar.scss';
+import "@/assets/styles/normalize.css";
-import '@/assets/styles/global.scss';
 import i18n from "@/locales/index.ts";
 import router from "@/router/router.ts";
 import "go-captcha-vue/dist/style.css";

src/utils/websocket/websocket.ts

@@ -64,6 +64,7 @@ export class WebSocketService {
         if (this.callbacks.error) {
             this.callbacks.error.forEach((cb) => (cb as EventCallback)());
         }
+        // setInterval(() => this.reconnect(), this.reconnectTimeoutMs);
     };
 
     private handleClose = (): void => {

src/views/404/NotFound.vue

@@ -74,6 +74,6 @@ async function backHome() {
 
 backHome();
 </script>
-<style src="./index.scss" scoped>
+<style src="./index.scss" lang="scss" scoped>
 
 </style>

src/views/Forget/ForgetPage.vue

@@ -320,6 +320,6 @@ async function checkPhoneLoginCaptcha(angle: number) {
   }
 }
 </script>
-<style src="./index.scss" scoped>
+<style src="./index.scss" lang="scss" scoped>
-@import "@/assets/styles/global.scss";
+
 </style>

src/views/Forget/index.scss

@@ -32,6 +32,7 @@
             font-size: 32px;
             font-weight: 600;
             margin-bottom: 32px;
+            color: var(--text-color);
         }
 
         .forget-card-span {
@@ -61,7 +62,7 @@
         .forget-card-title {
             font-size: 20px;
             font-weight: 600;
-            color: #222;
+            color: var(--text-color);
             line-height: 26px;
             margin-bottom: 24px
         }
@@ -109,8 +110,8 @@
 
 
     .area {
-        background: #b9f187;
+        background: var(--landing-background-color-main);
-        background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
+        // background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
         width: 100%;
         height: 100vh;
         z-index: -1;

src/views/Login/LoginFooter.vue

@@ -216,6 +216,6 @@ onBeforeMount(() => {
   });
 });
 </script>
-<style src="./index.scss" scoped>
+<style src="./index.scss" lang="scss" scoped>
 
 </style>

src/views/Login/LoginPage.vue

@@ -345,7 +345,7 @@ async function sendCaptcha() {
 /**
  *  账号登录  防抖
  */
-const accountLoginSubmitDebounce = useDebounceFn(accountLoginSubmit, 1000);
+const accountLoginSubmitDebounce = useDebounceFn(accountLoginSubmit, 300);
 
 /**
  * 账号登录提交
@@ -366,18 +366,17 @@ async function accountLoginSubmit() {
 /**
  * 手机登录提交  防抖
  */
-const phoneLoginSubmitDebounce = useDebounceFn(phoneLoginSubmit, 1000);
+const phoneLoginSubmitDebounce = useDebounceFn(phoneLoginSubmit, 300);
 
 /**
  * 手机登录提交
  */
 async function phoneLoginSubmit() {
-  loginLoading.value = true;
   phoneLoginFormRef.value
       .validate()
       .then(async () => {
+        loginLoading.value = true;
         const res: any = await phoneLoginApi(phoneLoginForm);
-        console.log(res);
         if (res.code === 200 && res.success) {
           const userStore = useStore().user;
           const {uid, access_token, refresh_token, expires_at, user_info} = res.data;

src/views/Login/index.scss

@@ -34,6 +34,7 @@
             font-size: 32px;
             font-weight: 600;
             margin-bottom: 32px;
+            color: var(--text-color);
         }
     }
 
@@ -89,8 +90,8 @@
 
     // 背景图动画
     .area {
-        background: #b9f187;
+        background: var(--landing-background-color-main);
-        background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
+        //background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
         width: 100%;
         height: 100vh;
         z-index: -1;

src/views/Main/MainPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+  <div class="main-page">
     <Header/>
     <CommentReply/>
 
@@ -35,6 +35,6 @@ onUnmounted(() => {
   websocket.close(false);
 });
 </script>
-<style scoped>
+<style scoped lang="less" src="./index.scss">
 
 </style>

src/views/Main/index.scss

@@ -0,0 +1,9 @@
+.main-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    width: 100%;
+    min-height: 100vh;
+}

src/views/QRLogin/QRLogin.vue

@@ -134,6 +134,6 @@ onMounted(async () => {
   });
 });
 </script>
-<style src="./index.scss" scoped>
+<style src="./index.scss" lang="scss" scoped>
-@import "@/assets/styles/global.scss";
+
 </style>

src/views/QRLogin/QRLoginFooter.vue

@@ -215,6 +215,6 @@ onBeforeMount(() => {
   });
 });
 </script>
-<style src="./index.scss" scoped>
+<style src="./index.scss"  lang="scss" scoped>
 
 </style>

src/views/QRLogin/index.scss

@@ -32,6 +32,7 @@
             font-size: 32px;
             font-weight: 600;
             margin-bottom: 32px;
+            color: var(--text-color);
         }
     }
 
@@ -44,7 +45,7 @@
         .qrlogin-card-item-span {
             font-size: 20px;
             font-weight: 600;
-            color: #222;
+            color: var(--text-color);
             line-height: 26px;
         }
 
@@ -97,8 +98,8 @@
     }
 
     .area {
-        background: #b9f187;
+        background: var(--landing-background-color-main);
-        background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
+        //background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
         width: 100%;
         height: 100vh;
         z-index: -1;

vite.config.ts

@@ -127,6 +127,7 @@ export default defineConfig(({mode}: { mode: string }): object => {
                     scss: {
                         api: "modern-compiler",
                         javascriptEnabled: true,
+                        additionalData: `@use "@/assets/styles/scroll-bar.scss"; @use "@/assets/styles/theme.scss";`
                     },
                     less: {
                         javascriptEnabled: true,