diff --git a/frontend/app/web-gold/src/views/agents/Agents.vue b/frontend/app/web-gold/src/views/agents/Agents.vue
index 9499c8ce8b..3b7cc7e760 100644
--- a/frontend/app/web-gold/src/views/agents/Agents.vue
+++ b/frontend/app/web-gold/src/views/agents/Agents.vue
@@ -407,11 +407,26 @@ onMounted(() => {
 
 <style scoped lang="less">
 // ============================================
-// 基础布局 - 使用设计系统变量
+// 基础布局 - 融合渐变背景
 // ============================================
 .agents-layout {
   height: 100%;
-  background: var(--color-bg-page);
+  // 亮色：从微妙蓝灰渐变到纯白，营造融合美感
+  background: linear-gradient(180deg, 
+    oklch(0.97 0.012 250) 0%, 
+    oklch(0.98 0.006 255) 15%,
+    oklch(0.995 0.002 260) 35%, 
+    oklch(1 0 0) 60%
+  );
+
+  .dark & {
+    // 暗色：从深蓝灰渐变到更深的统一色调
+    background: linear-gradient(180deg, 
+      oklch(0.15 0.008 255) 0%, 
+      oklch(0.13 0.006 260) 20%,
+      oklch(0.12 0.004 260) 50%
+    );
+  }
 }
 
 .agents-container {
@@ -422,12 +437,12 @@ onMounted(() => {
 }
 
 // ============================================
-// 头部区域 - 极简优雅
+// 头部区域 - 极简优雅，融入渐变背景
 // ============================================
 .agents-header {
   position: relative;
   padding: 48px 0 32px;
-  background: linear-gradient(90deg, rgba(56, 189, 248, 0.12) 0%, rgba(99, 102, 241, 0.14) 100%);
+  background: transparent;
   z-index: 10;
 }
 
@@ -441,22 +456,30 @@ onMounted(() => {
 .deco-circle {
   position: absolute;
   border-radius: 50%;
-  opacity: 0.5;
+  opacity: 0.6;
 
   &--1 {
-    width: 300px;
-    height: 300px;
-    right: -100px;
-    top: -150px;
-    background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
+    width: 400px;
+    height: 400px;
+    right: -150px;
+    top: -200px;
+    background: radial-gradient(circle, oklch(0.55 0.12 255 / 0.06) 0%, transparent 70%);
+
+    .dark & {
+      background: radial-gradient(circle, oklch(0.65 0.10 255 / 0.05) 0%, transparent 70%);
+    }
   }
 
   &--2 {
-    width: 200px;
-    height: 200px;
-    left: -50px;
-    bottom: -100px;
-    background: radial-gradient(circle, rgba(124, 58, 237, 0.04) 0%, transparent 70%);
+    width: 300px;
+    height: 300px;
+    left: -100px;
+    bottom: -150px;
+    background: radial-gradient(circle, oklch(0.55 0.12 290 / 0.04) 0%, transparent 70%);
+
+    .dark & {
+      background: radial-gradient(circle, oklch(0.65 0.10 290 / 0.03) 0%, transparent 70%);
+    }
   }
 }
 
@@ -513,12 +536,16 @@ onMounted(() => {
   }
 
   &:focus {
-    border-color: var(--color-primary-500);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--shadow-md);
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px oklch(0.35 0.06 255 / 0.15), var(--shadow-md);
+
+    .dark & {
+      box-shadow: 0 0 0 3px oklch(0.65 0.08 255 / 0.2), var(--shadow-md);
+    }
 
     & + .search-icon,
     & ~ .search-icon {
-      color: var(--color-primary-500);
+      color: var(--primary);
     }
   }
 
@@ -559,17 +586,21 @@ onMounted(() => {
   gap: 6px;
   padding: 0 16px;
   height: 52px;
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  background: var(--color-bg-card);
+  background: var(--card);
   cursor: pointer;
   transition: all var(--duration-fast);
   box-shadow: var(--shadow-sm);
 
   &:hover {
-    border-color: #f59e0b;
-    background: #fffbeb;
+    border-color: var(--warning);
+    background: oklch(0.95 0.08 85);
     box-shadow: var(--shadow-md);
+
+    .dark & {
+      background: oklch(0.25 0.06 85);
+    }
   }
 
   &:active {
@@ -579,13 +610,13 @@ onMounted(() => {
 
 .favorites-btn-icon {
   font-size: 18px;
-  color: #f59e0b;
+  color: var(--warning);
 }
 
 .favorites-btn-text {
   font-size: 14px;
   font-weight: 500;
-  color: var(--color-gray-700);
+  color: var(--foreground);
   white-space: nowrap;
 }
 
@@ -638,9 +669,9 @@ onMounted(() => {
   }
 
   &--active {
-    background: var(--color-gray-900);
-    color: white;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+    background: var(--foreground);
+    color: var(--background);
+    box-shadow: var(--shadow-md);
   }
 }
 
@@ -653,7 +684,7 @@ onMounted(() => {
   font-weight: 600;
   padding: 1px 6px;
   border-radius: 8px;
-  background: rgba(255,255,255,0.15);
+  background: oklch(0 0 0 / 0.08);
   color: inherit;
   opacity: 0.9;
 
@@ -669,6 +700,7 @@ onMounted(() => {
   flex: 1;
   overflow-y: auto;
   padding: 32px 24px 48px;
+  background: transparent;
 
   &::-webkit-scrollbar {
     width: 6px;
@@ -679,11 +711,11 @@ onMounted(() => {
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #E5E5E5;
+    background: var(--border);
     border-radius: 3px;
 
     &:hover {
-      background: #D4D4D4;
+      background: var(--muted-foreground);
     }
   }
 }
@@ -704,8 +736,12 @@ onMounted(() => {
   align-items: flex-start;
   justify-content: center;
   padding-top: 48px;
-  background: rgba(255, 255, 255, 0.7);
+  background: oklch(1 0 0 / 0.7);
   z-index: 10;
+
+  .dark & {
+    background: oklch(0.12 0.004 260 / 0.7);
+  }
 }
 
 .custom-spinner {
@@ -745,18 +781,24 @@ onMounted(() => {
 // ============================================
 .agent-card {
   position: relative;
-  background: var(--surface-elevated);
+  background: var(--card);
+  border: 1px solid var(--border);
   border-radius: 16px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   animation: cardReveal 0.5s ease-out backwards;
   animation-delay: calc(var(--i) * 0.04s);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
+  box-shadow: var(--shadow-sm);
 
   &:hover {
     transform: translateY(-4px);
-    box-shadow: 0 12px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--color-gray-300);
+
+    .dark & {
+      border-color: var(--color-gray-600);
+    }
 
     .card-footer {
       opacity: 1;
@@ -801,12 +843,12 @@ onMounted(() => {
   transform: scale(0.9);
   transition: all 0.3s ease;
 
-  &--blue { background: linear-gradient(135deg, #3B82F6, #8B5CF6); }
-  &--emerald { background: linear-gradient(135deg, #10B981, #06B6D4); }
-  &--violet { background: linear-gradient(135deg, #8B5CF6, #EC4899); }
-  &--rose { background: linear-gradient(135deg, #F43F5E, #F97316); }
-  &--amber { background: linear-gradient(135deg, #F59E0B, #EF4444); }
-  &--cyan { background: linear-gradient(135deg, #06B6D4, #3B82F6); }
+  &--blue { background: linear-gradient(135deg, oklch(0.55 0.15 255), oklch(0.55 0.15 290)); }
+  &--emerald { background: linear-gradient(135deg, oklch(0.55 0.12 160), oklch(0.50 0.10 195)); }
+  &--violet { background: linear-gradient(135deg, oklch(0.55 0.15 290), oklch(0.55 0.15 340)); }
+  &--rose { background: linear-gradient(135deg, oklch(0.55 0.18 10), oklch(0.55 0.15 40)); }
+  &--amber { background: linear-gradient(135deg, oklch(0.70 0.14 85), oklch(0.55 0.18 25)); }
+  &--cyan { background: linear-gradient(135deg, oklch(0.55 0.10 195), oklch(0.55 0.15 255)); }
 }
 
 .avatar-inner {
@@ -815,7 +857,7 @@ onMounted(() => {
   height: 52px;
   border-radius: 14px;
   overflow: hidden;
-  background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
+  background: var(--muted);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -829,7 +871,7 @@ onMounted(() => {
 
 .avatar-icon {
   font-size: 24px;
-  color: #9CA3AF;
+  color: var(--muted-foreground);
 }
 
 // 信息区域
@@ -851,7 +893,7 @@ onMounted(() => {
 .info-name {
   font-size: 15px;
   font-weight: 600;
-  color: #111827;
+  color: var(--foreground);
   margin: 0;
   line-height: 1.3;
   letter-spacing: -0.01em;
@@ -864,17 +906,26 @@ onMounted(() => {
   border-radius: 6px;
   white-space: nowrap;
 
-  &--blue { background: #EFF6FF; color: #2563EB; }
-  &--emerald { background: #ECFDF5; color: #059669; }
-  &--violet { background: #F5F3FF; color: #7C3AED; }
-  &--rose { background: #FFF1F2; color: #E11D48; }
-  &--amber { background: #FFFBEB; color: #D97706; }
-  &--cyan { background: #ECFEFF; color: #0891B2; }
+  &--blue { background: oklch(0.93 0.03 255); color: oklch(0.45 0.12 255); }
+  &--emerald { background: oklch(0.95 0.03 160); color: oklch(0.45 0.12 160); }
+  &--violet { background: oklch(0.95 0.03 290); color: oklch(0.45 0.12 290); }
+  &--rose { background: oklch(0.95 0.03 10); color: oklch(0.45 0.12 10); }
+  &--amber { background: oklch(0.95 0.08 85); color: oklch(0.50 0.15 85); }
+  &--cyan { background: oklch(0.95 0.03 195); color: oklch(0.45 0.10 195); }
+
+  .dark & {
+    &--blue { background: oklch(0.25 0.04 255); color: oklch(0.75 0.10 255); }
+    &--emerald { background: oklch(0.25 0.04 160); color: oklch(0.75 0.10 160); }
+    &--violet { background: oklch(0.25 0.04 290); color: oklch(0.75 0.10 290); }
+    &--rose { background: oklch(0.25 0.04 10); color: oklch(0.75 0.10 10); }
+    &--amber { background: oklch(0.25 0.06 85); color: oklch(0.80 0.12 85); }
+    &--cyan { background: oklch(0.25 0.04 195); color: oklch(0.75 0.08 195); }
+  }
 }
 
 .info-desc {
   font-size: 13px;
-  color: #6B7280;
+  color: var(--muted-foreground);
   margin: 0;
   line-height: 1.5;
   display: -webkit-box;
@@ -890,8 +941,8 @@ onMounted(() => {
   align-items: center;
   justify-content: flex-end;
   padding: 12px 16px;
-  border-top: 1px solid #F3F4F6;
-  background: #FAFAFA;
+  border-top: 1px solid var(--border);
+  background: var(--muted);
   opacity: 0;
   transform: translateY(4px);
   transition: all 0.25s ease;
@@ -908,19 +959,19 @@ onMounted(() => {
   align-items: center;
   gap: 5px;
   padding: 6px 12px;
-  background: white;
-  border: 1px solid #E5E7EB;
+  background: var(--card);
+  border: 1px solid var(--border);
   border-radius: 8px;
   font-size: 12px;
   font-weight: 500;
-  color: #6B7280;
+  color: var(--muted-foreground);
   cursor: pointer;
   transition: all 0.2s ease;
 
   &:hover {
-    border-color: #D1D5DB;
-    background: #F9FAFB;
-    color: #374151;
+    border-color: var(--color-gray-400);
+    background: var(--accent);
+    color: var(--foreground);
   }
 
   &:active {
@@ -928,14 +979,14 @@ onMounted(() => {
   }
 
   &--primary {
-    background: #111827;
-    border-color: #111827;
-    color: white;
+    background: var(--foreground);
+    border-color: var(--foreground);
+    color: var(--background);
 
     &:hover {
-      background: #1F2937;
-      border-color: #1F2937;
-      color: white;
+      background: var(--color-gray-700);
+      border-color: var(--color-gray-700);
+      color: var(--background);
     }
   }
 }
@@ -952,13 +1003,13 @@ onMounted(() => {
   width: 32px;
   height: 32px;
   border: none;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--card);
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-gray-400);
+  color: var(--muted-foreground);
   font-size: 16px;
   transition: all 0.2s ease;
   z-index: 2;
@@ -966,10 +1017,10 @@ onMounted(() => {
   transform: scale(0.8);
 
   &:hover {
-    background: white;
-    color: #F59E0B;
+    background: var(--accent);
+    color: var(--warning);
     transform: scale(1);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-md);
   }
 
   &:active {
@@ -980,12 +1031,16 @@ onMounted(() => {
   &--active {
     opacity: 1;
     transform: scale(1);
-    color: #F59E0B;
-    background: #FEF3C7;
+    color: var(--warning);
+    background: oklch(0.95 0.08 85);
+
+    .dark & {
+      background: oklch(0.25 0.06 85);
+    }
 
     &:hover {
-      background: #FDE68A;
-      color: #D97706;
+      background: oklch(0.90 0.10 85);
+      color: oklch(0.60 0.12 85);
     }
   }
 }
@@ -1100,10 +1155,10 @@ onMounted(() => {
   transform: translateX(-50%);
   width: 320px;
   max-width: calc(100vw - 48px);
-  background: var(--color-bg-card);
+  background: var(--card);
   border-radius: var(--radius-lg);
-  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
-  border: 1px solid var(--color-gray-200);
+  box-shadow: var(--shadow-xl);
+  border: 1px solid var(--border);
   z-index: 1001;
   overflow: hidden;
 }
@@ -1184,11 +1239,11 @@ onMounted(() => {
 
 .category-panel .panel-chip--active .panel-chip-name,
 .category-panel .panel-chip--active .panel-chip-count {
-  color: white;
+  color: var(--background);
 }
 
 .category-panel .panel-chip--active .panel-chip-count {
-  background: rgba(255,255,255,0.2);
+  background: oklch(0 0 0 / 0.15);
 }
 
 .category-panel .panel-chip-name {