登录注册页面支持 dark 主题模式

web/src/assets/css/theme-dark.scss

@@ -1,10 +1,17 @@
 @use 'font.scss' as *;
-:root[data-theme="dark"] {
+:root[data-theme='dark'] {
   --text-fb: #fff;
   --text-color: rgba(255, 255, 255, 1) !important; // 主要的文本颜色
   --normal-color: rgba(163, 174, 208, 1); // 普通颜色
   --el-text-color-primary: #fff;
-  p, h1, h2, h3, h4, h5, h6, article {
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  article {
     // color: var(--text-color) !important;
     font-family: $font-regular;
   }

web/src/components/LoginDialog.vue

@@ -43,13 +43,13 @@
         <div class="w-full">
           <div
             class="text flex justify-center items-center pt-3 text-sm"
-            style="color: var(--login-text-color);"
+            style="color: var(--login-text-color)"
           >
             还没有账号？
             <el-button
               size="small"
               class="ml-2 rounded-md px-2 py-1 transition-colors duration-200"
-              style="color: var(--login-link-color);"
+              style="color: var(--login-link-color)"
               @click="login = false"
               @mouseenter="$event.target.style.background = 'var(--login-link-hover-bg)'"
               @mouseleave="$event.target.style.background = 'transparent'"
@@ -217,14 +217,16 @@
 
         <div
           class="text text-sm flex justify-center items-center w-full pt-3"
-          style="color: var(--login-text-color);"
+          style="color: var(--login-text-color)"
         >
           已有账号？
           <el-button
             size="small"
-            class="ml-2 rounded-md px-2 py-1"
+            class="ml-2 rounded-md px-2 py-1 transition-colors duration-200"
-            style="color: var(--login-link-color);"
+            style="color: var(--login-link-color)"
             @click="login = true"
+            @mouseenter="$event.target.style.background = 'var(--login-link-hover-bg)'"
+            @mouseleave="$event.target.style.background = 'transparent'"
             >登录</el-button
           >
         </div>

web/src/views/Login.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     class="min-h-screen flex items-center justify-center p-5 relative overflow-auto"
-    style="background: var(--login-bg);"
+    style="background: var(--login-bg)"
   >
     <router-link
       to="/"
       class="fixed top-5 left-5 z-50 flex items-center justify-center w-11 h-11 border border-transparent rounded-xl text-white no-underline shadow-lg backdrop-blur-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl"
-      style="background: var(--btnColor);"
+      style="background: var(--btnColor)"
       title="返回首页"
     >
       <i class="iconfont icon-home text-xl"></i>
@@ -14,23 +14,17 @@
     <div class="w-full max-w-md mx-auto">
       <div
         class="rounded-3xl p-10 shadow-2xl backdrop-blur-sm relative overflow-hidden"
-        style="background: var(--login-card-bg); border: 1px solid var(--login-card-border);"
+        style="background: var(--login-card-bg); border: 1px solid var(--login-card-border)"
       >
-        <div
+        <div class="absolute top-0 left-0 right-0 h-1" style="background: var(--btnColor)"></div>
-          class="absolute top-0 left-0 right-0 h-1"
-          style="background: var(--btnColor);"
-        ></div>
         <div class="text-center mb-8">
           <h1
             class="text-3xl font-semibold m-0 mb-2 tracking-tight"
-            style="color: var(--login-title-color);"
+            style="color: var(--login-title-color)"
           >
             欢迎登录
           </h1>
-          <p 
+          <p class="text-base m-0 leading-relaxed" style="color: var(--login-subtitle-color)">
-            class="text-base m-0 leading-relaxed"
-            style="color: var(--login-subtitle-color);"
-          >
             登录您的账户以继续使用服务
           </p>
         </div>

web/src/views/Register.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     class="min-h-screen flex items-center justify-center p-5 relative overflow-auto"
-    style="background: var(--login-bg);"
+    style="background: var(--login-bg)"
   >
     <router-link
       to="/"
       class="fixed top-5 left-5 z-50 flex items-center justify-center w-11 h-11 border border-transparent rounded-xl text-white no-underline shadow-lg backdrop-blur-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl"
-      style="background: var(--btnColor);"
+      style="background: var(--btnColor)"
       title="返回首页"
     >
       <i class="iconfont icon-home text-xl"></i>
@@ -14,23 +14,17 @@
     <div class="w-full max-w-md mx-auto">
       <div
         class="rounded-3xl p-10 shadow-2xl backdrop-blur-sm relative overflow-hidden"
-        style="background: var(--login-card-bg); border: 1px solid var(--login-card-border);"
+        style="background: var(--login-card-bg); border: 1px solid var(--login-card-border)"
       >
-        <div
+        <div class="absolute top-0 left-0 right-0 h-1" style="background: var(--btnColor)"></div>
-          class="absolute top-0 left-0 right-0 h-1"
-          style="background: var(--btnColor);"
-        ></div>
         <div class="text-center mb-8">
           <h1
             class="text-3xl font-semibold m-0 mb-2 tracking-tight"
-            style="color: var(--login-title-color);"
+            style="color: var(--login-title-color)"
           >
             用户注册
           </h1>
-          <p 
+          <p class="text-base m-0 leading-relaxed" style="color: var(--login-subtitle-color)">
-            class="text-base m-0 leading-relaxed"
-            style="color: var(--login-subtitle-color);"
-          >
             创建您的账户以开始使用服务
           </p>
         </div>