update 重构暗黑模式样式 将所有写死的颜色统一整理

src/views/index.vue

@@ -131,7 +131,7 @@ const goTarget = (url: string) => {
   padding: 30px;
   background:
     radial-gradient(circle at top left, rgba(53, 109, 255, 0.16), transparent 30%),
-    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.42));
+    var(--app-surface-bg);
 }
 
 .hero-copy {
@@ -184,8 +184,8 @@ const goTarget = (url: string) => {
 .stat-card {
   padding: 18px 20px;
   border-radius: 22px;
-  background: rgba(255, 255, 255, 0.54);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -243,8 +243,8 @@ const goTarget = (url: string) => {
 .product-card {
   padding: 22px;
   border-radius: 24px;
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
   transition:
     transform 0.25s ease,
     box-shadow 0.25s ease,
@@ -308,8 +308,8 @@ const goTarget = (url: string) => {
 .capability-group {
   padding: 18px 18px 18px 20px;
   border-radius: 22px;
-  background: rgba(255, 255, 255, 0.46);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
 
   h3 {
     margin: 0 0 12px;
@@ -368,14 +368,7 @@ const goTarget = (url: string) => {
   .hero-panel {
     background:
       radial-gradient(circle at top left, rgba(53, 109, 255, 0.18), transparent 30%),
-      linear-gradient(135deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.48));
-  }
-
-  .stat-card,
-  .product-card,
-  .capability-group {
-    background: rgba(15, 23, 42, 0.5);
-    border-color: rgba(100, 116, 139, 0.16);
+      var(--app-surface-bg);
   }
 }
 </style>

src/views/login.vue

@@ -347,7 +347,7 @@ onMounted(() => {
   width: 100%;
   padding: 34px 30px 26px;
   z-index: 1;
-  background: rgba(248, 250, 252, 0.92);
+  background: var(--app-surface-bg);
 }
 
 .title-box {
@@ -386,8 +386,8 @@ onMounted(() => {
     color: var(--app-text-muted);
     padding: 10px;
     border-radius: 14px;
-    background: rgba(255, 255, 255, 0.72);
-    border: 1px solid rgba(148, 163, 184, 0.14);
+    background: var(--app-elevated-soft-bg);
+    border: 1px solid var(--app-surface-border);
   }
 }
 
@@ -425,8 +425,8 @@ onMounted(() => {
   padding: 14px 16px;
   margin-bottom: 22px;
   border-radius: 20px;
-  background: rgba(255, 255, 255, 0.58);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
 }
 
 .social-label {
@@ -455,9 +455,9 @@ onMounted(() => {
 
 .login-form :deep(.el-input__wrapper) {
   min-height: 48px;
-  background-color: rgba(255, 255, 255, 0.88);
+  background-color: var(--el-bg-color);
   border-radius: 16px;
-  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12) inset;
+  box-shadow: 0 0 0 1px var(--app-surface-border) inset;
 }
 
 .login-form :deep(.el-input__wrapper.is-focus) {
@@ -471,8 +471,8 @@ onMounted(() => {
 }
 
 .login-form :deep(.el-button.is-circle) {
-  background: rgba(255, 255, 255, 0.82);
-  border: 1px solid rgba(148, 163, 184, 0.16);
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
   color: var(--app-text-muted);
 }
 
@@ -487,8 +487,8 @@ onMounted(() => {
   box-sizing: border-box;
   border-radius: 16px;
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.88);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--el-bg-color);
+  border: 1px solid var(--app-surface-border);
 
   img {
     cursor: pointer;
@@ -562,19 +562,4 @@ onMounted(() => {
   }
 }
 
-:global(html.dark) {
-  .login-form {
-    background: rgba(12, 18, 30, 0.88);
-    border-color: rgba(100, 116, 139, 0.2);
-  }
-
-  .login-form :deep(.el-input__wrapper),
-  .login-code,
-  .title-box :deep(.lang-select--style),
-  .social-panel,
-  .login-form :deep(.el-button.is-circle) {
-    background: rgba(15, 23, 42, 0.56);
-    border-color: rgba(100, 116, 139, 0.2);
-  }
-}
 </style>

src/views/register.vue

@@ -328,7 +328,7 @@ onMounted(() => {
   width: 100%;
   padding: 34px 30px 26px;
   z-index: 1;
-  background: rgba(248, 250, 252, 0.92);
+  background: var(--app-surface-bg);
 }
 
 .title-box {
@@ -367,8 +367,8 @@ onMounted(() => {
     color: var(--app-text-muted);
     padding: 10px;
     border-radius: 14px;
-    background: rgba(255, 255, 255, 0.72);
-    border: 1px solid rgba(148, 163, 184, 0.14);
+    background: var(--app-elevated-soft-bg);
+    border: 1px solid var(--app-surface-border);
   }
 }
 
@@ -408,8 +408,8 @@ onMounted(() => {
   box-sizing: border-box;
   border-radius: 16px;
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.88);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--el-bg-color);
+  border: 1px solid var(--app-surface-border);
 
   img {
     cursor: pointer;
@@ -434,9 +434,9 @@ onMounted(() => {
 
 .register-form :deep(.el-input__wrapper) {
   min-height: 48px;
-  background-color: rgba(255, 255, 255, 0.88);
+  background-color: var(--el-bg-color);
   border-radius: 16px;
-  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12) inset;
+  box-shadow: 0 0 0 1px var(--app-surface-border) inset;
 }
 
 .register-form :deep(.el-input__wrapper.is-focus) {
@@ -503,17 +503,4 @@ onMounted(() => {
   }
 }
 
-:global(html.dark) {
-  .register-form {
-    background: rgba(12, 18, 30, 0.88);
-    border-color: rgba(100, 116, 139, 0.2);
-  }
-
-  .register-form :deep(.el-input__wrapper),
-  .register-code,
-  .title-box :deep(.lang-select--style) {
-    background: rgba(15, 23, 42, 0.56);
-    border-color: rgba(100, 116, 139, 0.2);
-  }
-}
 </style>

src/views/system/user/profile/thirdParty.vue

@@ -130,7 +130,7 @@ const authUrl = (source: string) => {
   padding: 12px 10px;
   border: 1px solid var(--app-surface-border);
   border-radius: 12px;
-  background: rgba(248, 250, 252, 0.82);
+  background: var(--app-elevated-soft-bg);
   transition:
     transform 0.2s ease,
     border-color 0.2s ease,

src/views/system/user/profile/userAvatar.vue

@@ -174,7 +174,7 @@ const closeDialog = () => {
   height: 120px;
   object-fit: cover;
   border-radius: 50%;
-  border: 4px solid rgba(255, 255, 255, 0.92);
+  border: 4px solid var(--app-surface-border);
   box-shadow: var(--app-shadow-sm);
 }
 
@@ -203,7 +203,7 @@ const closeDialog = () => {
   width: 200px;
   height: 200px;
   border-radius: 50%;
-  box-shadow: 0 0 4px #ccc;
+  box-shadow: var(--app-shadow-md);
   overflow: hidden;
 }
 </style>

src/views/workflow/spel/index.vue

@@ -403,9 +403,9 @@ onMounted(() => {
 .preview-box {
   width: 100%;
   padding: 10px 12px;
-  background-color: #f5f7fa;
+  background-color: var(--el-fill-color-light);
   border-radius: 4px;
-  color: #333;
+  color: var(--el-text-color-primary);
   font-family: monospace; /* 等宽字体更清晰 */
   white-space: nowrap; /* 禁止换行 */
   overflow-x: auto; /* 超出宽度时显示水平滚动条 */