fix: 修复前端暗黑模式下多个页面的白色背景问题

- 修复配置页面子标签(Header规则/会话Header/Body字段)的输入框和下拉框白色背景
- 修复SessionBodyFieldsConfig.vue中Select和MultiSelect下拉面板的白色背景
- 修复HeaderRulesConfig.vue中搜索输入框和过滤器下拉框的白色背景
- 修复session-headers.scss中输入框和下拉框的白色背景
- 将硬编码的#ffffff替换为var(--p-surface-card)以支持暗黑模式自动切换

Author: lanshuizhiyue

add_task_dark.png

@@ -28,9 +28,6 @@ $font-weight-medium: 500;
 $font-weight-semibold: 600;
 $font-weight-bold: 700;
 
-// 过渡
-$transition-base: all 0.2s ease;
-
 // 颜色
 $primary-color: #6366f1;
 $text-color: #1e293b;
@@ -40,49 +37,3 @@ $bg-color-dark: #0f172a;
 // 表面色
 $surface-lighter: #f8fafc;
 $surface-white: #ffffff;
-
-// ==================== 3D效果变量 ====================
-
-// 阴影效果
-$shadow-raised: 
-  0 2px 4px rgba(0, 0, 0, 0.05),
-  0 4px 8px rgba(0, 0, 0, 0.08),
-  inset 0 1px 0 rgba(255, 255, 255, 0.8);
-
-$shadow-elevated:
-  0 8px 16px rgba(0, 0, 0, 0.1),
-  0 16px 32px rgba(0, 0, 0, 0.08),
-  inset 0 1px 0 rgba(255, 255, 255, 0.9);
-
-$shadow-floating:
-  0 12px 24px rgba(0, 0, 0, 0.12),
-  0 24px 48px rgba(0, 0, 0, 0.1),
-  inset 0 1px 0 rgba(255, 255, 255, 1);
-
-$shadow-pressed:
-  inset 0 2px 4px rgba(0, 0, 0, 0.1),
-  inset 0 4px 8px rgba(0, 0, 0, 0.05),
-  0 1px 2px rgba(0, 0, 0, 0.05);
-
-$shadow-inset-dark: inset 0 2px 4px rgba(0, 0, 0, 0.08);
-$shadow-inset-light: inset 0 1px 2px rgba(255, 255, 255, 0.6);
-$shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
-
-// 边框效果
-$border-highlight: 1px solid rgba(255, 255, 255, 0.8);
-$border-shadow: 1px solid rgba(0, 0, 0, 0.08);
-
-// 变换效果
-$transform-hover: translateY(-2px);
-$transform-press: translateY(1px);
-$transform-float: translateY(-4px);
-
-// 渐变效果
-$gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-$gradient-secondary: linear-gradient(135deg, #64748b 0%, #475569 100%);
-$gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
-$gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-$gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-$gradient-rainbow: linear-gradient(90deg, 
-  #ef4444 0%, #f59e0b 16%, #eab308 32%, 
-  #22c55e 48%, #06b6d4 64%, #3b82f6 80%, #8b5cf6 100%);

current_page.png

@@ -33,12 +33,11 @@ declare module 'vue' {
     InputText: typeof import('primevue/inputtext')['default']
     Message: typeof import('primevue/message')['default']
     OfflineBanner: typeof import('./components/OfflineBanner.vue')['default']
+    Password: typeof import('primevue/password')['default']
     ProgressSpinner: typeof import('primevue/progressspinner')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchFilterBar: typeof import('./components/SearchFilterBar.vue')['default']
-    SelectButton: typeof import('primevue/selectbutton')['default']
-    Slider: typeof import('primevue/slider')['default']
     StatCard: typeof import('./components/StatCard.vue')['default']
     Tag: typeof import('primevue/tag')['default']
     TaskFilter: typeof import('./components/TaskFilter.vue')['default']

current_page2.png

@@ -45,8 +45,8 @@ defineProps<Props>()
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1rem;
-  background: var(--p-primary-50);
-  border: 1px solid var(--p-primary-200);
+  background: var(--p-surface-100);
+  border: 1px solid var(--p-surface-border);
   border-radius: var(--p-border-radius);
   margin-bottom: 1rem;
 }

src/frontEnd/src/assets/styles/index.scss

@@ -142,8 +142,8 @@ defineExpose({
 }
 
 .preset-info-form {
-  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
-  border: 1px solid rgba(99, 102, 241, 0.2);
+  background: var(--p-surface-100);
+  border: 1px solid var(--p-surface-border);
   border-radius: 8px;
   padding: 12px 16px;
   margin-bottom: 16px;

src/frontEnd/src/assets/styles/variables.scss

@@ -565,7 +565,7 @@ defineExpose({
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
+  background: var(--p-surface-50);
   border-bottom: 1px solid var(--surface-border);
   flex-wrap: wrap;
   
@@ -643,7 +643,6 @@ defineExpose({
   display: flex;
   gap: 2px;
   opacity: 0.5;
-  transition: opacity 0.2s;
   background: var(--surface-card);
   border: 1px solid var(--surface-border);
   border-radius: 4px;

src/frontEnd/src/components.d.ts

@@ -63,10 +63,9 @@ onUnmounted(() => {
   left: 0;
   right: 0;
   z-index: 999;
-  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
-  color: #78350f;
+  background: var(--p-yellow-500);
+  color: var(--p-yellow-900);
   padding: 12px 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .banner-content {