From 116e363e83d254c8e245181047c5f873d4232e73 Mon Sep 17 00:00:00 2001
From: shenaowei <450702724@qq.com>
Date: Wed, 25 Feb 2026 23:44:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=95=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/GradientButton.vue         |  40 +--
 .../src/components/agents/ChatDrawer.vue      | 169 +++++----
 .../src/components/agents/HistoryPanel.vue    | 104 +++---
 .../src/layouts/components/BasicLayout.vue    |  10 +-
 .../src/layouts/components/CardLayout.vue     |  22 +-
 .../src/layouts/components/FormLayout.vue     |  24 +-
 .../layouts/components/FullWidthLayout.vue    |   2 +-
 .../src/layouts/components/LayoutHeader.vue   |  32 +-
 .../src/layouts/components/TabLayout.vue      |  32 +-
 frontend/app/web-gold/src/style.less          |  26 +-
 .../app/web-gold/src/views/agents/Agents.vue  | 184 ++++------
 .../src/views/content-style/Benchmark.vue     |  18 +-
 .../components/BenchmarkForm.vue              |  39 +--
 .../components/BenchmarkTable.vue             |  52 +--
 .../src/views/material/MaterialListNew.vue    | 297 ++++++++--------
 .../web-gold/src/views/trends/Forecast.vue    | 329 +++++++++---------
 16 files changed, 660 insertions(+), 720 deletions(-)

diff --git a/frontend/app/web-gold/src/components/GradientButton.vue b/frontend/app/web-gold/src/components/GradientButton.vue
index a3cbbf4205..e17c6aa897 100644
--- a/frontend/app/web-gold/src/components/GradientButton.vue
+++ b/frontend/app/web-gold/src/components/GradientButton.vue
@@ -93,27 +93,27 @@ const buttonClass = computed(() => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  padding: 8px 24px;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-6);
   border: none;
-  border-radius: 12px;
-  font-size: 16px;
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-base);
   font-weight: 500;
   color: #ffffff;
   cursor: pointer;
-  transition: all 0.2s ease;
-  background: var(--color-slate-900);
+  transition: all var(--duration-fast);
+  background: var(--color-gray-900);
   user-select: none;
 }
 
 .gradient-button:hover {
-  background: var(--color-slate-800);
+  background: var(--color-gray-800);
 }
 
 .gradient-button:active {
-  background: var(--color-slate-800);
+  background: var(--color-gray-800);
   transform: translateY(0);
-  box-shadow: 0 4px 6px -2px rgba(59, 130, 246, 0.15);
+  box-shadow: var(--shadow-primary);
 }
 
 .gradient-button__content,
@@ -123,7 +123,7 @@ const buttonClass = computed(() => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: var(--space-1);
 }
 
 .gradient-button__icon {
@@ -136,25 +136,25 @@ const buttonClass = computed(() => {
 }
 
 .gradient-button__loading-text {
-  margin-left: 4px;
+  margin-left: var(--space-1);
 }
 
 /* 尺寸变体 */
 .gradient-button--large {
   padding: 10px 20px;
-  font-size: 15px;
+  font-size: var(--font-size-sm);
   min-height: 36px;
 }
 
 .gradient-button--middle {
-  padding: 8px 16px;
-  font-size: 14px;
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--font-size-sm);
   min-height: 32px;
 }
 
 .gradient-button--small {
-  padding: 4px 12px;
-  font-size: 13px;
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--font-size-xs);
   min-height: 24px;
 }
 
@@ -169,13 +169,13 @@ const buttonClass = computed(() => {
 .gradient-button:disabled {
   opacity: 0.4;
   cursor: not-allowed;
-  background: var(--color-slate-700);
+  background: var(--color-gray-700);
   box-shadow: none;
 }
 
 .gradient-button--disabled:hover,
 .gradient-button:disabled:hover {
-  background: var(--color-slate-700);
+  background: var(--color-gray-700);
   transform: none;
   box-shadow: none;
 }
@@ -192,8 +192,8 @@ const buttonClass = computed(() => {
 /* 响应式调整 */
 @media (max-width: 768px) {
   .gradient-button--large {
-    padding: 8px 16px;
-    font-size: 14px;
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--font-size-sm);
     min-height: 32px;
   }
 }
diff --git a/frontend/app/web-gold/src/components/agents/ChatDrawer.vue b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
index 8d9b6ceef9..6b95af29bc 100644
--- a/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
+++ b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
@@ -354,14 +354,7 @@ watch(() => props.visible, (val) => {
 </script>
 
 <style scoped lang="less">
-@primary: #6366f1;
-@primary-dark: #4f46e5;
-@surface: #ffffff;
-@bg: #f8fafc;
-@text: #1e293b;
-@text-light: #64748b;
-@border: #e2e8f0;
-@radius: 12px;
+// 使用设计系统变量
 
 .chat-overlay {
   position: fixed;
@@ -376,7 +369,7 @@ watch(() => props.visible, (val) => {
 .chat-drawer {
   width: 560px;
   height: 100%;
-  background: @bg;
+  background: var(--color-bg-page);
   display: flex;
   flex-direction: column;
   transform: translateX(100%);
@@ -390,7 +383,7 @@ watch(() => props.visible, (val) => {
 .drawer-bg-pattern {
   position: absolute;
   inset: 0;
-  background-image: radial-gradient(circle at 1px 1px, rgba(99, 102, 241, 0.05) 1px, transparent 0);
+  background-image: radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.05) 1px, transparent 0);
   background-size: 24px 24px;
   pointer-events: none;
 }
@@ -403,7 +396,7 @@ watch(() => props.visible, (val) => {
   padding: 16px 20px;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(12px);
-  border-bottom: 1px solid @border;
+  border-bottom: 1px solid var(--color-gray-200);
   position: relative;
   z-index: 10;
 }
@@ -417,8 +410,8 @@ watch(() => props.visible, (val) => {
 .agent-avatar {
   width: 40px;
   height: 40px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, @primary, #8b5cf6);
+  border-radius: var(--radius-lg);
+  background: linear-gradient(135deg, var(--color-primary-500), #8b5cf6);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -445,31 +438,31 @@ watch(() => props.visible, (val) => {
 .agent-name {
   font-size: 15px;
   font-weight: 600;
-  color: @text;
+  color: var(--color-gray-900);
   margin: 0;
 }
 
 .agent-category {
   font-size: 12px;
-  color: @text-light;
+  color: var(--color-gray-600);
 }
 
 .close-btn {
   width: 36px;
   height: 36px;
-  border-radius: 10px;
+  border-radius: var(--radius-base);
   border: none;
   background: transparent;
-  color: @text-light;
+  color: var(--color-gray-600);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
+  transition: all var(--duration-fast);
 
   &:hover {
-    background: #f1f5f9;
-    color: @text;
+    background: var(--color-gray-100);
+    color: var(--color-gray-900);
   }
 }
 
@@ -504,7 +497,7 @@ watch(() => props.visible, (val) => {
   position: absolute;
   inset: 0;
   border-radius: 50%;
-  border: 2px solid rgba(99, 102, 241, 0.15);
+  border: 2px solid rgba(59, 130, 246, 0.15);
   animation: ringPulse 3s ease-in-out infinite;
 
   &.delay-1 {
@@ -530,11 +523,11 @@ watch(() => props.visible, (val) => {
   width: 48px;
   height: 48px;
   border-radius: 50%;
-  background: linear-gradient(135deg, @primary, #8b5cf6);
+  background: linear-gradient(135deg, var(--color-primary-500), #8b5cf6);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
+  box-shadow: var(--shadow-primary);
 }
 
 .core-icon {
@@ -545,13 +538,13 @@ watch(() => props.visible, (val) => {
 .empty-title {
   font-size: 18px;
   font-weight: 600;
-  color: @text;
+  color: var(--color-gray-900);
   margin: 0 0 8px;
 }
 
 .empty-desc {
   font-size: 14px;
-  color: @text-light;
+  color: var(--color-gray-600);
   margin: 0 0 28px;
   max-width: 280px;
   line-height: 1.6;
@@ -568,12 +561,12 @@ watch(() => props.visible, (val) => {
   align-items: center;
   gap: 10px;
   font-size: 13px;
-  color: @text-light;
+  color: var(--color-gray-600);
 }
 
 .feature-icon {
   font-size: 14px;
-  color: @primary;
+  color: var(--color-primary-500);
 }
 
 // Result Area
@@ -589,15 +582,15 @@ watch(() => props.visible, (val) => {
   align-items: flex-start;
   gap: 8px;
   padding: 12px 16px;
-  background: #f1f5f9;
-  border-radius: @radius;
+  background: var(--color-gray-100);
+  border-radius: var(--radius-lg);
   margin-bottom: 16px;
 }
 
 .prompt-text {
   flex: 1;
   font-size: 13px;
-  color: @text;
+  color: var(--color-gray-900);
   margin: 0;
   line-height: 1.5;
 }
@@ -608,16 +601,16 @@ watch(() => props.visible, (val) => {
   height: 28px;
   border: none;
   background: transparent;
-  color: @text-light;
-  border-radius: 6px;
+  color: var(--color-gray-600);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
 
   &:hover {
-    background: #e2e8f0;
-    color: @text;
+    background: var(--color-gray-200);
+    color: var(--color-gray-900);
   }
 }
 
@@ -625,13 +618,13 @@ watch(() => props.visible, (val) => {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
-  background: @surface;
-  border: 1px solid @border;
-  border-radius: @radius;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
   min-height: 200px;
 
   &::-webkit-scrollbar { width: 4px; }
-  &::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
+  &::-webkit-scrollbar-thumb { background: var(--color-gray-400); border-radius: 2px; }
 }
 
 .generating-skeleton {
@@ -642,10 +635,10 @@ watch(() => props.visible, (val) => {
 
 .skeleton-line {
   height: 14px;
-  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
+  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 
   &.short { width: 40%; }
   &.medium { width: 70%; }
@@ -659,7 +652,7 @@ watch(() => props.visible, (val) => {
 .result-content {
   font-size: 14px;
   line-height: 1.8;
-  color: @text;
+  color: var(--color-gray-900);
 
   &.is-streaming {
     opacity: 0.9;
@@ -673,12 +666,12 @@ watch(() => props.visible, (val) => {
   :deep(p) { margin: 0 0 12px; &:last-child { margin-bottom: 0; } }
   :deep(ul), :deep(ol) { margin: 8px 0; padding-left: 20px; }
   :deep(li) { margin-bottom: 4px; }
-  :deep(code) { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
+  :deep(code) { background: var(--color-gray-100); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 13px; }
   :deep(pre) {
-    background: #1e293b;
-    color: #e2e8f0;
+    background: var(--color-gray-900);
+    color: var(--color-gray-200);
     padding: 16px;
-    border-radius: 8px;
+    border-radius: var(--radius-base);
     overflow-x: auto;
     margin: 12px 0;
     code { background: transparent; padding: 0; }
@@ -689,7 +682,7 @@ watch(() => props.visible, (val) => {
   display: inline-block;
   width: 2px;
   height: 16px;
-  background: @primary;
+  background: var(--color-primary-500);
   margin-left: 2px;
   animation: blink 1s infinite;
   vertical-align: text-bottom;
@@ -713,28 +706,28 @@ watch(() => props.visible, (val) => {
   justify-content: center;
   gap: 6px;
   padding: 10px 20px;
-  border: 1px solid @border;
-  border-radius: 10px;
-  background: @surface;
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-base);
+  background: var(--color-bg-card);
   font-size: 13px;
   font-weight: 500;
-  color: @text;
+  color: var(--color-gray-900);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--duration-fast);
 
   &:hover {
-    border-color: @primary;
-    color: @primary;
+    border-color: var(--color-primary-500);
+    color: var(--color-primary-500);
   }
 
   &.primary {
-    background: @primary;
-    border-color: @primary;
+    background: var(--color-primary-500);
+    border-color: var(--color-primary-500);
     color: #fff;
 
     &:hover {
-      background: @primary-dark;
-      border-color: @primary-dark;
+      background: var(--color-primary-600);
+      border-color: var(--color-primary-600);
       color: #fff;
     }
   }
@@ -745,7 +738,7 @@ watch(() => props.visible, (val) => {
   padding: 16px 20px 20px;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(12px);
-  border-top: 1px solid @border;
+  border-top: 1px solid var(--color-gray-200);
   position: relative;
   z-index: 10;
 }
@@ -766,21 +759,21 @@ watch(() => props.visible, (val) => {
   justify-content: center;
   gap: 6px;
   padding: 8px 12px;
-  border: 1px solid @border;
-  border-radius: 10px;
-  background: @surface;
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-base);
+  background: var(--color-bg-card);
   font-size: 13px;
   font-weight: 500;
-  color: @text-light;
+  color: var(--color-gray-600);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--duration-fast);
 
-  &:hover { border-color: #cbd5e1; }
+  &:hover { border-color: var(--color-gray-400); }
 
   &.active {
-    border-color: @primary;
-    color: @primary;
-    background: rgba(99, 102, 241, 0.04);
+    border-color: var(--color-primary-500);
+    color: var(--color-primary-500);
+    background: rgba(59, 130, 246, 0.04);
   }
 
   &.pro.active {
@@ -799,19 +792,19 @@ watch(() => props.visible, (val) => {
   position: relative;
   display: flex;
   align-items: flex-end;
-  background: @surface;
-  border: 1px solid @border;
-  border-radius: 16px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  transition: all 0.25s ease;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  transition: all var(--duration-base);
 
   &:hover {
-    border-color: #cbd5e1;
+    border-color: var(--color-gray-400);
   }
 
   &.focused {
-    border-color: @primary;
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    border-color: var(--color-primary-500);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
   }
 }
 
@@ -826,10 +819,10 @@ watch(() => props.visible, (val) => {
   font-family: inherit;
   font-size: 14px;
   line-height: 1.5;
-  color: @text;
+  color: var(--color-gray-900);
   max-height: 120px;
 
-  &::placeholder { color: #94a3b8; }
+  &::placeholder { color: var(--color-gray-500); }
 }
 
 .submit-btn {
@@ -838,20 +831,20 @@ watch(() => props.visible, (val) => {
   bottom: 8px;
   width: 36px;
   height: 36px;
-  border-radius: 12px;
+  border-radius: var(--radius-lg);
   border: none;
-  background: linear-gradient(135deg, @primary 0%, #8b5cf6 100%);
+  background: linear-gradient(135deg, var(--color-primary-500) 0%, #8b5cf6 100%);
   color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
+  transition: all var(--duration-fast);
   opacity: 0.5;
 
   &:not(:disabled):hover {
     transform: scale(1.05);
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+    box-shadow: var(--shadow-primary);
   }
 
   &:disabled {
@@ -874,14 +867,14 @@ watch(() => props.visible, (val) => {
 .footer-tip {
   text-align: center;
   font-size: 11px;
-  color: #94a3b8;
+  color: var(--color-gray-500);
   margin: 8px 0 0;
 }
 
 // Transitions
 .drawer-fade-enter-active,
 .drawer-fade-leave-active {
-  transition: opacity 0.3s ease;
+  transition: opacity var(--duration-base);
 }
 .drawer-fade-enter-from,
 .drawer-fade-leave-to {
@@ -898,19 +891,19 @@ watch(() => props.visible, (val) => {
 .history-btn {
   width: 36px;
   height: 36px;
-  border-radius: 10px;
+  border-radius: var(--radius-base);
   border: none;
   background: transparent;
-  color: @text-light;
+  color: var(--color-gray-600);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
+  transition: all var(--duration-fast);
 
   &:hover {
-    background: #f1f5f9;
-    color: @primary;
+    background: var(--color-gray-100);
+    color: var(--color-primary-500);
   }
 }
 </style>
diff --git a/frontend/app/web-gold/src/components/agents/HistoryPanel.vue b/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
index 6d46d7545e..d62210de52 100644
--- a/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
+++ b/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
@@ -239,20 +239,12 @@ watch(() => props.visible, (val) => {
 </script>
 
 <style scoped lang="less">
-@primary: #6366f1;
-@primary-light: rgba(99, 102, 241, 0.1);
-@surface: #ffffff;
-@bg: #f8fafc;
-@text: #1e293b;
-@text-light: #64748b;
-@text-muted: #94a3b8;
-@border: #e2e8f0;
-@radius: 12px;
+// 使用设计系统变量
 
 .history-panel {
   position: absolute;
   inset: 0;
-  background: @bg;
+  background: var(--color-bg-page);
   z-index: 20;
   display: flex;
   flex-direction: column;
@@ -266,7 +258,7 @@ watch(() => props.visible, (val) => {
   padding: 16px 20px;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(12px);
-  border-bottom: 1px solid @border;
+  border-bottom: 1px solid var(--color-gray-200);
 }
 
 .header-left {
@@ -278,45 +270,45 @@ watch(() => props.visible, (val) => {
 .back-btn {
   width: 32px;
   height: 32px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   border: none;
   background: transparent;
-  color: @text-light;
+  color: var(--color-gray-600);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
+  transition: all var(--duration-fast);
 
   &:hover {
-    background: #f1f5f9;
-    color: @text;
+    background: var(--color-gray-100);
+    color: var(--color-gray-900);
   }
 }
 
 .header-title {
   font-size: 15px;
   font-weight: 600;
-  color: @text;
+  color: var(--color-gray-900);
   margin: 0;
 }
 
 .close-btn {
   width: 32px;
   height: 32px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   border: none;
   background: transparent;
-  color: @text-light;
+  color: var(--color-gray-600);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
+  transition: all var(--duration-fast);
 
   &:hover {
-    background: #fee2e2;
-    color: #ef4444;
+    background: var(--color-error-100);
+    color: var(--color-error-500);
   }
 }
 
@@ -348,7 +340,7 @@ watch(() => props.visible, (val) => {
   position: absolute;
   inset: 0;
   border-radius: 50%;
-  border: 2px dashed @border;
+  border: 2px dashed var(--color-gray-300);
   animation: ringRotate 20s linear infinite;
 }
 
@@ -362,19 +354,19 @@ watch(() => props.visible, (val) => {
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 32px;
-  color: @text-muted;
+  color: var(--color-gray-500);
 }
 
 .empty-text {
   font-size: 15px;
   font-weight: 500;
-  color: @text;
+  color: var(--color-gray-900);
   margin: 0 0 6px;
 }
 
 .empty-hint {
   font-size: 13px;
-  color: @text-muted;
+  color: var(--color-gray-500);
   margin: 0;
 }
 
@@ -400,7 +392,7 @@ watch(() => props.visible, (val) => {
 .group-label {
   font-size: 12px;
   font-weight: 600;
-  color: @text-light;
+  color: var(--color-gray-600);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -408,8 +400,8 @@ watch(() => props.visible, (val) => {
 .group-count {
   font-size: 11px;
   font-weight: 500;
-  color: @text-muted;
-  background: #f1f5f9;
+  color: var(--color-gray-500);
+  background: var(--color-gray-100);
   padding: 2px 8px;
   border-radius: 10px;
 }
@@ -427,20 +419,20 @@ watch(() => props.visible, (val) => {
   align-items: center;
   justify-content: space-between;
   padding: 14px 16px;
-  background: @surface;
-  border: 1px solid @border;
-  border-radius: @radius;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--duration-fast);
   text-align: left;
 
   &:hover {
-    border-color: @primary;
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
+    border-color: var(--color-primary-500);
+    box-shadow: var(--shadow-primary);
     transform: translateY(-1px);
 
     .meta-arrow {
-      color: @primary;
+      color: var(--color-primary-500);
       transform: translateX(2px);
     }
   }
@@ -454,7 +446,7 @@ watch(() => props.visible, (val) => {
 .card-title {
   font-size: 14px;
   font-weight: 600;
-  color: @text;
+  color: var(--color-gray-900);
   margin: 0 0 4px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -463,7 +455,7 @@ watch(() => props.visible, (val) => {
 
 .card-preview {
   font-size: 12px;
-  color: @text-muted;
+  color: var(--color-gray-500);
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -484,13 +476,13 @@ watch(() => props.visible, (val) => {
   align-items: center;
   gap: 4px;
   font-size: 11px;
-  color: @text-muted;
+  color: var(--color-gray-500);
 }
 
 .meta-arrow {
   font-size: 10px;
-  color: @text-muted;
-  transition: all 0.2s;
+  color: var(--color-gray-500);
+  transition: all var(--duration-fast);
 }
 
 // Message View
@@ -511,17 +503,17 @@ watch(() => props.visible, (val) => {
 }
 
 .message-bubble {
-  border-radius: @radius;
+  border-radius: var(--radius-lg);
   overflow: hidden;
 
   &--user {
-    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
-    border: 1px solid @border;
+    background: linear-gradient(135deg, var(--color-bg-page), var(--color-gray-100));
+    border: 1px solid var(--color-gray-200);
   }
 
   &--ai {
-    background: linear-gradient(135deg, @primary-light, rgba(139, 92, 246, 0.08));
-    border: 1px solid rgba(99, 102, 241, 0.2);
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.04));
+    border: 1px solid rgba(59, 130, 246, 0.2);
   }
 }
 
@@ -535,20 +527,20 @@ watch(() => props.visible, (val) => {
 
 .bubble-avatar {
   font-size: 14px;
-  color: @text-light;
+  color: var(--color-gray-600);
 }
 
 .bubble-label {
   font-size: 11px;
   font-weight: 600;
-  color: @text-light;
+  color: var(--color-gray-600);
   text-transform: uppercase;
   letter-spacing: 0.3px;
 }
 
 .bubble-time {
   font-size: 10px;
-  color: @text-muted;
+  color: var(--color-gray-500);
   margin-left: auto;
 }
 
@@ -558,17 +550,17 @@ watch(() => props.visible, (val) => {
   height: 24px;
   border: none;
   background: transparent;
-  color: @text-muted;
-  border-radius: 6px;
+  color: var(--color-gray-500);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
+  transition: all var(--duration-fast);
 
   &:hover {
-    background: rgba(99, 102, 241, 0.1);
-    color: @primary;
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--color-primary-500);
   }
 }
 
@@ -577,7 +569,7 @@ watch(() => props.visible, (val) => {
   padding: 12px 14px;
   font-size: 13px;
   line-height: 1.7;
-  color: @text;
+  color: var(--color-gray-900);
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -585,7 +577,7 @@ watch(() => props.visible, (val) => {
 // Transition
 .history-slide-enter-active,
 .history-slide-leave-active {
-  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+  transition: transform var(--duration-base) cubic-bezier(0.32, 0.72, 0, 1);
 }
 
 .history-slide-enter-from,
diff --git a/frontend/app/web-gold/src/layouts/components/BasicLayout.vue b/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
index 292db61c62..beda68c239 100644
--- a/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
@@ -36,9 +36,9 @@ const emit = defineEmits(['back'])
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
   overflow: hidden;
 }
 
@@ -48,7 +48,7 @@ const emit = defineEmits(['back'])
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
-  background: var(--bg-primary);
-  padding: var(--space-md);
+  background: var(--color-bg-card);
+  padding: var(--space-4);
 }
 </style>
diff --git a/frontend/app/web-gold/src/layouts/components/CardLayout.vue b/frontend/app/web-gold/src/layouts/components/CardLayout.vue
index 0077f8314f..0cd49809ad 100644
--- a/frontend/app/web-gold/src/layouts/components/CardLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/CardLayout.vue
@@ -59,9 +59,9 @@ const handleBack = () => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
   overflow: hidden;
 }
 
@@ -70,7 +70,7 @@ const handleBack = () => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--bg-primary);
+  background: var(--color-bg-card);
 
   &.no-padding {
     .card-layout__content {
@@ -80,20 +80,20 @@ const handleBack = () => {
 }
 
 .card-header {
-  padding: var(--space-md) var(--space-lg);
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-light);
-  font-size: 14px;
+  padding: var(--space-4) var(--space-6);
+  background: var(--color-gray-50);
+  border-bottom: 1px solid var(--color-gray-200);
+  font-size: var(--font-size-base);
   font-weight: 500;
-  color: var(--text-secondary);
+  color: var(--color-gray-600);
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
 
 .card-layout__content {
   flex: 1;
-  padding: var(--space-md);
+  padding: var(--space-4);
   overflow: auto;
-  background: var(--bg-primary);
+  background: var(--color-bg-card);
 }
 </style>
diff --git a/frontend/app/web-gold/src/layouts/components/FormLayout.vue b/frontend/app/web-gold/src/layouts/components/FormLayout.vue
index 0192e91317..7ade18a33a 100644
--- a/frontend/app/web-gold/src/layouts/components/FormLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/FormLayout.vue
@@ -98,16 +98,16 @@ const handleBack = () => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
 }
 
 .form-layout__content {
   flex: 1;
   overflow: auto;
-  padding: var(--space-md);
-  background: var(--bg-secondary);
+  padding: var(--space-4);
+  background: var(--color-gray-50);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -116,16 +116,16 @@ const handleBack = () => {
 .form-container {
   width: 100%;
   max-width: 600px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-md);
-  padding: var(--space-2xl);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
+  padding: var(--space-10);
 }
 
 .form-layout__footer {
-  padding: var(--space-md) var(--space-lg);
-  border-top: 1px solid var(--border-light);
-  background: var(--bg-primary);
+  padding: var(--space-4) var(--space-6);
+  border-top: 1px solid var(--color-gray-200);
+  background: var(--color-bg-card);
   flex-shrink: 0;
 }
 
diff --git a/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue b/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
index af71f70ea3..1b7bb273cd 100644
--- a/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
@@ -67,7 +67,7 @@ const handleBack = () => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--bg-primary);
+  background: var(--color-bg-card);
 }
 
 .full-width-layout__header-wrapper {
diff --git a/frontend/app/web-gold/src/layouts/components/LayoutHeader.vue b/frontend/app/web-gold/src/layouts/components/LayoutHeader.vue
index e1569844f6..e317f6e4a5 100644
--- a/frontend/app/web-gold/src/layouts/components/LayoutHeader.vue
+++ b/frontend/app/web-gold/src/layouts/components/LayoutHeader.vue
@@ -58,13 +58,13 @@ const handleBack = () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  border-bottom: 1px solid var(--border-light);
-  background: var(--bg-primary);
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-6);
+  border-bottom: 1px solid var(--color-gray-200);
+  background: var(--color-bg-card);
   flex-shrink: 0;
-  min-height: 64px;
-  transition: all 0.3s;
+  min-height: 56px;
+  transition: all var(--duration-base);
 
   &--ghost {
     background: transparent;
@@ -75,7 +75,7 @@ const handleBack = () => {
 .header-left {
   display: flex;
   align-items: center;
-  gap: var(--space-md);
+  gap: var(--space-4);
   flex: 1;
   min-width: 0;
 }
@@ -88,13 +88,13 @@ const handleBack = () => {
 }
 
 .back-btn {
-  padding: var(--space-xs);
+  padding: var(--space-1);
   border: none;
   background: transparent;
-  color: var(--text-secondary);
-  border-radius: var(--radius-sm);
+  color: var(--color-gray-600);
+  border-radius: var(--radius-base);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--duration-fast);
   font-size: 16px;
   line-height: 1;
   width: 32px;
@@ -104,15 +104,15 @@ const handleBack = () => {
   justify-content: center;
 
   &:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
+    background: var(--color-gray-100);
+    color: var(--color-gray-900);
   }
 }
 
 .header-title {
-  font-size: 18px;
+  font-size: var(--font-size-lg);
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--color-gray-900);
   margin: 0;
   line-height: 1.4;
   letter-spacing: -0.01em;
@@ -121,7 +121,7 @@ const handleBack = () => {
 .header-right {
   display: flex;
   align-items: center;
-  gap: var(--space-sm);
+  gap: var(--space-2);
   flex-shrink: 0;
 }
 </style>
diff --git a/frontend/app/web-gold/src/layouts/components/TabLayout.vue b/frontend/app/web-gold/src/layouts/components/TabLayout.vue
index 55966d4374..b9aee4fb8d 100644
--- a/frontend/app/web-gold/src/layouts/components/TabLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/TabLayout.vue
@@ -88,9 +88,9 @@ const handleBack = () => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
   overflow: hidden;
 }
 
@@ -100,39 +100,39 @@ const handleBack = () => {
 
 .tab-nav {
   display: flex;
-  border-bottom: 1px solid var(--border-light);
-  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--color-gray-200);
+  background: var(--color-gray-50);
   flex-shrink: 0;
 }
 
 .tab-item {
-  padding: var(--space-sm) var(--space-lg);
-  font-size: 14px;
+  padding: var(--space-2) var(--space-6);
+  font-size: var(--font-size-base);
   font-weight: 500;
-  color: var(--text-secondary);
+  color: var(--color-gray-600);
   border: none;
   background: transparent;
   cursor: pointer;
   border-bottom: 2px solid transparent;
-  transition: all 0.15s ease;
+  transition: all var(--duration-fast);
   white-space: nowrap;
 
   &:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
+    background: var(--color-gray-100);
+    color: var(--color-gray-900);
   }
 
   &.active {
-    color: var(--text-primary);
-    border-bottom-color: var(--text-primary);
-    background: var(--bg-primary);
+    color: var(--color-primary-500);
+    border-bottom-color: var(--color-primary-500);
+    background: var(--color-bg-card);
   }
 }
 
 .tab-content {
   flex: 1;
   overflow: auto;
-  background: var(--bg-primary);
-  padding: var(--space-md);
+  background: var(--color-bg-card);
+  padding: var(--space-4);
 }
 </style>
diff --git a/frontend/app/web-gold/src/style.less b/frontend/app/web-gold/src/style.less
index 711cce114f..1e575217a1 100644
--- a/frontend/app/web-gold/src/style.less
+++ b/frontend/app/web-gold/src/style.less
@@ -136,9 +136,12 @@
   // 阴影系统
   // ========================================
   --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
   --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --shadow-blue: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  --shadow-inset-card: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+  --glow-primary: 0 0 0 3px rgba(59, 130, 246, 0.15);
 
   // ========================================
   // 布局系统
@@ -159,21 +162,40 @@
 // ========================================
 [data-theme="dark"],
 .dark {
+  // 背景层级
   --color-bg:          #0F172A;
   --color-bg-page:     #0F172A;
   --color-bg-card:     #1E293B;
   --color-surface:     #1E293B;
 
+  // 中性灰 - 深色模式调整
+  --color-gray-50:  #1E293B;
+  --color-gray-100: #334155;
+  --color-gray-200: #475569;
+  --color-gray-300: #64748B;
+  --color-gray-400: #94A3B8;
+  --color-gray-500: #CBD5E1;
+  --color-gray-600: #E2E8F0;
+  --color-gray-700: #F1F5F9;
+  --color-gray-800: #F8FAFC;
+  --color-gray-900: #FFFFFF;
+
+  // 文字
   --color-text:          #F1F5F9;
   --color-text-primary:  #F1F5F9;
   --color-text-secondary: #94A3B8;
   --color-text-muted:    #64748B;
   --color-text-disabled: #475569;
 
+  // 边框
   --color-border:      #334155;
 
-  --color-primary:     #60A5FA;
-  --color-primary-hover: #93C5FD;
+  // 主色 - 深色模式提亮
+  --color-primary:        #60A5FA;
+  --color-primary-hover:  #93C5FD;
+  --color-primary-500:    #60A5FA;
+  --color-primary-400:    #93C5FD;
+  --color-primary-50:     rgba(96, 165, 250, 0.1);
 }
 
 /* ================================
diff --git a/frontend/app/web-gold/src/views/agents/Agents.vue b/frontend/app/web-gold/src/views/agents/Agents.vue
index b81ad421f3..b7a93a0a06 100644
--- a/frontend/app/web-gold/src/views/agents/Agents.vue
+++ b/frontend/app/web-gold/src/views/agents/Agents.vue
@@ -335,47 +335,11 @@ onMounted(() => {
 
 <style scoped lang="less">
 // ============================================
-// CSS Variables - 设计令牌
-// ============================================
-:root {
-  --surface-primary: #FAFAFA;
-  --surface-elevated: #FFFFFF;
-  --surface-muted: #F5F5F5;
-
-  --text-primary: #171717;
-  --text-secondary: #525252;
-  --text-tertiary: #A3A3A3;
-
-  --border-subtle: #E5E5E5;
-  --border-light: #F0F0F0;
-
-  --accent-blue: #2563EB;
-  --accent-emerald: #059669;
-  --accent-violet: #7C3AED;
-  --accent-rose: #E11D48;
-  --accent-amber: #D97706;
-  --accent-cyan: #0891B2;
-
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-  --radius-xl: 20px;
-
-  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
-  --shadow-md: 0 4px 12px rgba(0,0,0,0.05);
-  --shadow-lg: 0 8px 24px rgba(0,0,0,0.06);
-
-  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-// ============================================
-// 基础布局
+// 基础布局 - 使用设计系统变量
 // ============================================
 .agents-layout {
   height: 100%;
-  background: var(--surface-primary);
+  background: var(--color-bg-page);
 }
 
 .agents-container {
@@ -391,8 +355,8 @@ onMounted(() => {
 .agents-header {
   position: relative;
   padding: 48px 0 32px;
-  background: var(--surface-primary);
-  border-bottom: 1px solid var(--border-light);
+  background: var(--color-bg-page);
+  border-bottom: 1px solid var(--color-gray-200);
   z-index: 10;
 }
 
@@ -451,40 +415,40 @@ onMounted(() => {
   position: absolute;
   left: 18px;
   font-size: 16px;
-  color: var(--text-tertiary);
+  color: var(--color-gray-500);
   pointer-events: none;
-  transition: color var(--transition-fast);
+  transition: color var(--duration-fast);
 }
 
 .search-input {
   width: 100%;
   height: 52px;
   padding: 0 48px 0 48px;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-xl);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-lg);
   font-size: 15px;
-  color: var(--text-primary);
-  background: var(--surface-elevated);
+  color: var(--color-gray-900);
+  background: var(--color-bg-card);
   outline: none;
-  transition: all var(--transition-smooth);
+  transition: all var(--duration-base);
   box-shadow: var(--shadow-sm);
 
   &::placeholder {
-    color: var(--text-tertiary);
+    color: var(--color-gray-500);
   }
 
   &:focus {
-    border-color: var(--accent-blue);
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08), var(--shadow-md);
+    border-color: var(--color-primary-500);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--shadow-md);
 
     & + .search-icon,
     & ~ .search-icon {
-      color: var(--accent-blue);
+      color: var(--color-primary-500);
     }
   }
 
   &:hover:not(:focus) {
-    border-color: #D4D4D4;
+    border-color: var(--color-gray-400);
   }
 }
 
@@ -494,19 +458,19 @@ onMounted(() => {
   width: 24px;
   height: 24px;
   border: none;
-  background: var(--surface-muted);
+  background: var(--color-gray-100);
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-tertiary);
+  color: var(--color-gray-500);
   font-size: 10px;
-  transition: all var(--transition-fast);
+  transition: all var(--duration-fast);
 
   &:hover {
-    background: #E5E5E5;
-    color: var(--text-secondary);
+    background: var(--color-gray-200);
+    color: var(--color-gray-600);
   }
 }
 
@@ -547,19 +511,19 @@ onMounted(() => {
   border-radius: 17px;
   font-size: 13px;
   font-weight: 500;
-  color: var(--text-secondary);
+  color: var(--color-gray-600);
   background: transparent;
   cursor: pointer;
-  transition: all var(--transition-fast);
+  transition: all var(--duration-fast);
   white-space: nowrap;
 
   &:hover:not(.category-chip--active) {
-    background: var(--surface-muted);
-    color: var(--text-primary);
+    background: var(--color-gray-100);
+    color: var(--color-gray-900);
   }
 
   &--active {
-    background: var(--text-primary);
+    background: var(--color-gray-900);
     color: white;
     box-shadow: 0 2px 8px rgba(0,0,0,0.12);
   }
@@ -579,7 +543,7 @@ onMounted(() => {
   opacity: 0.9;
 
   .category-chip:not(.category-chip--active) & {
-    background: var(--surface-muted);
+    background: var(--color-gray-100);
   }
 }
 
@@ -616,8 +580,8 @@ onMounted(() => {
 .custom-spinner {
   width: 32px;
   height: 32px;
-  border: 2px solid var(--border-subtle);
-  border-top-color: var(--accent-blue);
+  border: 2px solid var(--color-gray-300);
+  border-top-color: var(--color-primary-500);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   margin: 0 auto;
@@ -851,35 +815,35 @@ onMounted(() => {
   width: 64px;
   height: 64px;
   border-radius: 50%;
-  background: var(--surface-muted);
+  background: var(--color-gray-100);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
-  color: var(--text-tertiary);
+  color: var(--color-gray-500);
   margin-bottom: 20px;
 }
 
 .empty-text {
   font-size: 15px;
-  color: var(--text-secondary);
+  color: var(--color-gray-600);
   margin: 0 0 16px 0;
 }
 
 .empty-action {
   padding: 8px 16px;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-base);
   font-size: 13px;
   font-weight: 500;
-  color: var(--text-secondary);
-  background: var(--surface-elevated);
+  color: var(--color-gray-600);
+  background: var(--color-bg-card);
   cursor: pointer;
-  transition: all var(--transition-fast);
+  transition: all var(--duration-fast);
 
   &:hover {
-    border-color: var(--text-tertiary);
-    color: var(--text-primary);
+    border-color: var(--color-gray-500);
+    color: var(--color-gray-900);
   }
 }
 
@@ -888,7 +852,7 @@ onMounted(() => {
 // ============================================
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity var(--transition-fast);
+  transition: opacity var(--duration-fast);
 }
 
 .fade-enter-from,
@@ -903,25 +867,25 @@ onMounted(() => {
   flex-shrink: 0;
   width: 34px;
   height: 34px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  background: var(--surface-elevated);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-base);
+  background: var(--color-bg-card);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-tertiary);
-  transition: all var(--transition-fast);
+  color: var(--color-gray-500);
+  transition: all var(--duration-fast);
 
   &:hover {
-    border-color: var(--text-tertiary);
-    color: var(--text-secondary);
-    background: var(--surface-muted);
+    border-color: var(--color-gray-500);
+    color: var(--color-gray-600);
+    background: var(--color-gray-100);
   }
 
   &--active {
-    background: var(--text-primary);
-    border-color: var(--text-primary);
+    background: var(--color-gray-900);
+    border-color: var(--color-gray-900);
     color: white;
   }
 }
@@ -939,10 +903,10 @@ onMounted(() => {
   transform: translateX(-50%);
   width: 320px;
   max-width: calc(100vw - 48px);
-  background: #FFFFFF;
-  border-radius: 14px;
+  background: var(--color-bg-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 #F0F0F0;
+  border: 1px solid var(--color-gray-200);
   z-index: 1001;
   overflow: hidden;
 }
@@ -952,13 +916,13 @@ onMounted(() => {
   align-items: center;
   justify-content: space-between;
   padding: 14px 16px;
-  border-bottom: 1px solid #F0F0F0;
+  border-bottom: 1px solid var(--color-gray-200);
 }
 
 .category-panel .panel-title {
   font-size: 13px;
   font-weight: 600;
-  color: #171717;
+  color: var(--color-gray-900);
 }
 
 .category-panel .panel-close {
@@ -966,19 +930,19 @@ onMounted(() => {
   height: 24px;
   border: none;
   background: transparent;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #A3A3A3;
+  color: var(--color-gray-500);
   font-size: 10px;
-  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--duration-fast);
 }
 
 .category-panel .panel-close:hover {
-  background: #F5F5F5;
-  color: #525252;
+  background: var(--color-gray-100);
+  color: var(--color-gray-600);
 }
 
 .category-panel .panel-grid {
@@ -995,7 +959,7 @@ onMounted(() => {
 }
 
 .category-panel .panel-grid::-webkit-scrollbar-thumb {
-  background: #E5E5E5;
+  background: var(--color-gray-300);
   border-radius: 2px;
 }
 
@@ -1004,21 +968,21 @@ onMounted(() => {
   align-items: center;
   justify-content: space-between;
   padding: 10px 12px;
-  border: 1px solid #F0F0F0;
-  border-radius: 10px;
-  background: #FFFFFF;
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-base);
+  background: var(--color-bg-card);
   cursor: pointer;
-  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--duration-fast);
 }
 
 .category-panel .panel-chip:hover:not(.panel-chip--active) {
-  border-color: #E5E5E5;
-  background: #F5F5F5;
+  border-color: var(--color-gray-300);
+  background: var(--color-gray-100);
 }
 
 .category-panel .panel-chip--active {
-  background: #171717;
-  border-color: #171717;
+  background: var(--color-gray-900);
+  border-color: var(--color-gray-900);
 }
 
 .category-panel .panel-chip--active .panel-chip-name,
@@ -1033,7 +997,7 @@ onMounted(() => {
 .category-panel .panel-chip-name {
   font-size: 13px;
   font-weight: 500;
-  color: #171717;
+  color: var(--color-gray-900);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1043,9 +1007,9 @@ onMounted(() => {
   font-size: 11px;
   font-weight: 600;
   padding: 2px 6px;
-  border-radius: 6px;
-  background: #F5F5F5;
-  color: #525252;
+  border-radius: var(--radius-sm);
+  background: var(--color-gray-100);
+  color: var(--color-gray-600);
   flex-shrink: 0;
   margin-left: 8px;
 }
@@ -1090,7 +1054,7 @@ onMounted(() => {
 
 .mask-enter-active,
 .mask-leave-active {
-  transition: opacity 0.15s ease;
+  transition: opacity var(--duration-fast);
 }
 
 .mask-enter-from,
diff --git a/frontend/app/web-gold/src/views/content-style/Benchmark.vue b/frontend/app/web-gold/src/views/content-style/Benchmark.vue
index 303a16dc8f..e8709f349b 100644
--- a/frontend/app/web-gold/src/views/content-style/Benchmark.vue
+++ b/frontend/app/web-gold/src/views/content-style/Benchmark.vue
@@ -327,7 +327,7 @@ defineOptions({ name: 'ContentStyleBenchmark' })
 }
 
 .stack>*+* {
-  margin-top: 16px;
+  margin-top: var(--space-4);
 }
 
 /* 稳定滚动条，只在垂直方向预留空间 */
@@ -336,13 +336,13 @@ defineOptions({ name: 'ContentStyleBenchmark' })
   max-width: 100%;
 }
 
-/* 卡片样式（不依赖 tailwind） */
+/* 卡片样式 */
 .card {
-  background: var(--color-surface);
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: var(--shadow-inset-card);
-  border: 1px solid var(--color-border);
+  background: var(--color-bg-card);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--color-gray-200);
 }
 
 /* 结果区预留最小高度，切换视图时避免高度突变 */
@@ -363,8 +363,8 @@ defineOptions({ name: 'ContentStyleBenchmark' })
 }
 
 .empty-state :deep(.ant-empty-description) {
-  color: var(--color-text-secondary);
-  font-size: 14px;
+  color: var(--color-gray-600);
+  font-size: var(--font-size-base);
 }
 
 /* 全屏 Spin 遮罩样式 */
diff --git a/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue b/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
index c64ae07a50..efc998e12f 100644
--- a/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
@@ -86,23 +86,23 @@ function handleReset() {
 
 <style scoped>
 .form-container {
-  background: var(--color-surface);
-  border-radius: 8px;
-  padding: 16px;
-  border: 1px solid var(--color-border);
+  background: var(--color-bg-card);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  border: 1px solid var(--color-gray-200);
 }
 
 .slider-row {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: var(--space-3);
 }
 
 .slider-num {
   min-width: 32px;
-  font-size: 14px;
+  font-size: var(--font-size-sm);
   font-weight: 600;
-  color: var(--color-primary);
+  color: var(--color-primary-500);
   text-align: center;
 }
 
@@ -111,7 +111,7 @@ function handleReset() {
   height: 4px;
   -webkit-appearance: none;
   appearance: none;
-  background: var(--color-slate-200);
+  background: var(--color-gray-200);
   border-radius: 2px;
   outline: none;
 
@@ -119,45 +119,44 @@ function handleReset() {
     -webkit-appearance: none;
     width: 16px;
     height: 16px;
-    background: var(--color-primary);
+    background: var(--color-primary-500);
     border-radius: 50%;
     cursor: pointer;
-    transition: transform 0.15s, box-shadow 0.15s;
+    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
 
     &:hover {
       transform: scale(1.15);
-      box-shadow: 0 0 0 4px rgba(0, 176, 48, 0.15);
+      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
     }
   }
 
   &::-moz-range-thumb {
     width: 16px;
     height: 16px;
-    background: var(--color-primary);
+    background: var(--color-primary-500);
     border-radius: 50%;
     cursor: pointer;
     border: none;
-    transition: transform 0.15s, box-shadow 0.15s;
+    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
 
     &:hover {
       transform: scale(1.15);
-      box-shadow: 0 0 0 4px rgba(0, 176, 48, 0.15);
+      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
     }
   }
 }
 
 .form-hint {
   margin-top: var(--space-1);
-  font-size: 14px;
-  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  color: var(--color-gray-600);
 }
 
 .points-hint {
-  margin-top: 12px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
+  margin-top: var(--space-3);
+  font-size: var(--font-size-xs);
+  color: var(--color-gray-600);
   text-align: center;
 }
-
 </style>
 
diff --git a/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue b/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
index e216a64bef..c9c292f985 100644
--- a/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
@@ -127,11 +127,11 @@ function formatNumber(value) {
 
 <style scoped>
 .card {
-  background: var(--color-surface);
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: var(--shadow-inset-card);
-  border: 1px solid var(--color-border);
+  background: var(--color-bg-card);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--color-gray-200);
   overflow: hidden;
 }
 
@@ -143,19 +143,19 @@ function formatNumber(value) {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: var(--space-3);
 }
 
 .button-group {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: var(--space-3);
 }
 
 .section-title {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  margin-bottom: 12px;
+  font-size: var(--font-size-xs);
+  color: var(--color-gray-600);
+  margin-bottom: var(--space-3);
 }
 
 .batch-btn {
@@ -163,7 +163,7 @@ function formatNumber(value) {
 }
 
 .batch-btn:hover {
-  box-shadow: var(--glow-primary);
+  box-shadow: var(--shadow-blue);
   filter: brightness(1.03);
 }
 
@@ -184,12 +184,12 @@ function formatNumber(value) {
 
 .top-tag {
   position: absolute;
-  top: 4px;
-  left: 4px;
+  top: var(--space-1);
+  left: var(--space-1);
   padding: 1px 6px;
   font-size: 10px;
   color: #fff;
-  background: #ff4d4f;
+  background: var(--color-error-500);
   border-radius: 2px;
 }
 
@@ -197,14 +197,14 @@ function formatNumber(value) {
   width: 80px;
   height: 45px;
   object-fit: cover;
-  border-radius: 4px;
-  border: 1px solid #eee;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-gray-200);
   transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .no-cover {
-  color: #999;
-  font-size: 12px;
+  color: var(--color-gray-500);
+  font-size: var(--font-size-xs);
 }
 
 .benchmark-table :deep(.ant-table-expand-icon-th),
@@ -248,32 +248,32 @@ function formatNumber(value) {
 .load-more-footer,
 .no-more-hint {
   text-align: center;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-gray-200);
 }
 
 .load-more-footer {
-  padding: 16px;
+  padding: var(--space-4);
 }
 
 .load-more-footer .ant-btn {
   max-width: 200px;
   height: 40px;
-  font-size: 14px;
-  border-radius: 8px;
+  font-size: var(--font-size-base);
+  border-radius: var(--radius-md);
 }
 
 .load-more-hint,
 .no-more-hint {
-  font-size: 12px;
-  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  color: var(--color-gray-600);
 }
 
 .load-more-hint {
-  margin-top: 8px;
+  margin-top: var(--space-2);
 }
 
 .no-more-hint {
-  padding: 12px;
+  padding: var(--space-3);
 }
 </style>
 
diff --git a/frontend/app/web-gold/src/views/material/MaterialListNew.vue b/frontend/app/web-gold/src/views/material/MaterialListNew.vue
index f400024869..4e6a67104f 100644
--- a/frontend/app/web-gold/src/views/material/MaterialListNew.vue
+++ b/frontend/app/web-gold/src/views/material/MaterialListNew.vue
@@ -743,25 +743,8 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="less">
-// ========================================
-// 变量定义
-// ========================================
-@primary-color: #6366f1;
-@primary-hover: #4f46e5;
-@primary-light: #eef2ff;
-@bg-page: #fafbfc;
-@bg-card: #ffffff;
-@border-color: #e5e7eb;
-@border-light: #f3f4f6;
-@text-primary: #111827;
-@text-secondary: #6b7280;
-@text-muted: #9ca3af;
-@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-@shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
-@shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
-@radius-sm: 8px;
-@radius-md: 12px;
-@radius-lg: 16px;
+// 使用设计系统变量
+// 主色: var(--color-primary-500) = #3B82F6
 
 // ========================================
 // 主容器
@@ -769,7 +752,7 @@ onMounted(async () => {
 .material-list-container {
   display: flex;
   height: 100%;
-  background: @bg-page;
+  background: var(--color-gray-50);
 }
 
 // ========================================
@@ -777,11 +760,11 @@ onMounted(async () => {
 // ========================================
 .material-sidebar {
   width: 220px;
-  background: @bg-card;
-  border-right: 1px solid @border-color;
+  background: var(--color-bg-card);
+  border-right: 1px solid var(--color-gray-200);
   display: flex;
   flex-direction: column;
-  padding: 20px 12px;
+  padding: var(--space-5) var(--space-3);
   flex-shrink: 0;
 }
 
@@ -803,13 +786,13 @@ onMounted(async () => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 8px;
-    margin-bottom: 12px;
+    padding: 0 var(--space-2);
+    margin-bottom: var(--space-3);
 
     span {
       font-size: 11px;
       font-weight: 600;
-      color: @text-muted;
+      color: var(--color-gray-500);
       text-transform: uppercase;
       letter-spacing: 0.8px;
     }
@@ -817,10 +800,10 @@ onMounted(async () => {
     .ant-btn {
       padding: 2px 6px;
       height: auto;
-      color: @text-muted;
+      color: var(--color-gray-500);
 
       &:hover {
-        color: @primary-color;
+        color: var(--color-primary-500);
       }
     }
   }
@@ -829,15 +812,15 @@ onMounted(async () => {
 .sidebar-group-list {
   flex: 1;
   overflow-y: auto;
-  margin: 0 -4px;
-  padding: 0 4px;
+  margin: 0 calc(var(--space-1) * -1);
+  padding: 0 var(--space-1);
 
   &::-webkit-scrollbar {
     width: 4px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: @border-color;
+    background: var(--color-gray-200);
     border-radius: 2px;
   }
 }
@@ -846,14 +829,14 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 12px;
+  padding: 10px var(--space-3);
   cursor: pointer;
-  border-radius: @radius-sm;
+  border-radius: var(--radius-md);
   margin-bottom: 2px;
-  transition: all 0.2s ease;
+  transition: all var(--duration-fast);
 
   &:hover {
-    background: @border-light;
+    background: var(--color-gray-100);
 
     .sidebar-group-item__action-btn {
       opacity: 1;
@@ -861,11 +844,11 @@ onMounted(async () => {
   }
 
   &--active {
-    background: @primary-light;
-    color: @primary-color;
+    background: var(--color-primary-50);
+    color: var(--color-primary-500);
 
     .sidebar-group-item__icon {
-      color: @primary-color;
+      color: var(--color-primary-500);
     }
   }
 
@@ -879,12 +862,12 @@ onMounted(async () => {
   &__icon {
     margin-right: 10px;
     font-size: 14px;
-    color: @text-muted;
+    color: var(--color-gray-500);
     flex-shrink: 0;
   }
 
   &__name {
-    font-size: 13px;
+    font-size: var(--font-size-sm);
     font-weight: 500;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -899,34 +882,34 @@ onMounted(async () => {
 
   &__count {
     font-size: 11px;
-    color: @text-muted;
-    margin-right: 6px;
+    color: var(--color-gray-500);
+    margin-right: var(--space-2);
   }
 
   &__action-btn {
     opacity: 0;
-    padding: 4px;
+    padding: var(--space-1);
     cursor: pointer;
-    color: @text-muted;
-    font-size: 12px;
-    transition: all 0.15s ease;
+    color: var(--color-gray-500);
+    font-size: var(--font-size-xs);
+    transition: all var(--duration-fast);
 
     &:hover {
-      color: @primary-color;
+      color: var(--color-primary-500);
     }
 
     &--danger:hover {
-      color: #ef4444;
+      color: var(--color-error-500);
     }
   }
 
   &__edit-input {
     :deep(.ant-input) {
       height: 24px;
-      font-size: 13px;
-      border-color: @primary-color;
-      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
-      border-radius: 4px;
+      font-size: var(--font-size-sm);
+      border-color: var(--color-primary-500);
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+      border-radius: var(--radius-sm);
     }
   }
 }
@@ -949,50 +932,50 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 24px;
-  background: @bg-card;
-  border-bottom: 1px solid @border-color;
-  gap: 24px;
+  padding: var(--space-4) var(--space-6);
+  background: var(--color-bg-card);
+  border-bottom: 1px solid var(--color-gray-200);
+  gap: var(--space-6);
 }
 
 // 分类切换器
 .category-switcher {
   display: flex;
-  background: @bg-page;
+  background: var(--color-gray-50);
   border-radius: 10px;
-  padding: 4px;
-  gap: 4px;
+  padding: var(--space-1);
+  gap: var(--space-1);
 
   &__item {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 10px 20px;
-    border-radius: 8px;
+    gap: var(--space-2);
+    padding: 10px var(--space-5);
+    border-radius: var(--radius-md);
     cursor: pointer;
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-weight: 500;
-    color: @text-secondary;
+    color: var(--color-gray-600);
     transition: all 0.25s ease;
 
     &:hover {
-      color: @text-primary;
+      color: var(--color-gray-900);
     }
 
     &--active {
-      background: @bg-card;
-      color: @primary-color;
-      box-shadow: @shadow-sm;
+      background: var(--color-bg-card);
+      color: var(--color-primary-500);
+      box-shadow: var(--shadow-sm);
 
       .category-switcher__icon {
-        color: @primary-color;
+        color: var(--color-primary-500);
       }
     }
   }
 
   &__icon {
     font-size: 16px;
-    color: @text-muted;
+    color: var(--color-gray-500);
     transition: color 0.25s ease;
   }
 }
@@ -1001,34 +984,34 @@ onMounted(async () => {
 .storage-quota {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  background: @bg-page;
-  border-radius: @radius-sm;
-  border: 1px solid @border-color;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-gray-50);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-gray-200);
 
   &__label {
-    font-size: 12px;
-    color: @text-muted;
+    font-size: var(--font-size-xs);
+    color: var(--color-gray-500);
   }
 
   &__value {
-    font-size: 12px;
+    font-size: var(--font-size-xs);
     font-weight: 500;
-    color: @text-primary;
+    color: var(--color-gray-900);
   }
 
   &__bar {
     width: 80px;
     height: 4px;
-    background: @border-color;
+    background: var(--color-gray-200);
     border-radius: 2px;
     overflow: hidden;
   }
 
   &__used {
     height: 100%;
-    background: linear-gradient(90deg, @primary-color, #818cf8);
+    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));
     border-radius: 2px;
     transition: width 0.3s ease;
   }
@@ -1038,34 +1021,34 @@ onMounted(async () => {
 .toolbar-actions {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: var(--space-3);
 
   .search-input {
     width: 280px;
 
     :deep(.ant-input) {
-      border-radius: @radius-sm;
-      border-color: @border-color;
-      background: @bg-page;
+      border-radius: var(--radius-md);
+      border-color: var(--color-gray-200);
+      background: var(--color-gray-50);
 
       &:focus {
-        background: @bg-card;
-        border-color: @primary-color;
-        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        background: var(--color-bg-card);
+        border-color: var(--color-primary-500);
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
       }
     }
 
     :deep(.ant-input-prefix) {
-      color: @text-muted;
+      color: var(--color-gray-500);
     }
   }
 
   .upload-btn {
-    border-radius: @radius-sm;
+    border-radius: var(--radius-md);
     font-weight: 500;
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: var(--space-2);
   }
 }
 
@@ -1076,31 +1059,31 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 24px;
-  background: @primary-light;
-  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
+  padding: var(--space-3) var(--space-6);
+  background: var(--color-primary-50);
+  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
 
   &__info {
     display: flex;
     align-items: center;
     gap: 10px;
-    font-size: 14px;
-    color: @text-primary;
+    font-size: var(--font-size-base);
+    color: var(--color-gray-900);
 
     .anticon {
-      color: @primary-color;
+      color: var(--color-primary-500);
       font-size: 16px;
     }
 
     strong {
-      color: @primary-color;
+      color: var(--color-primary-500);
       font-weight: 600;
     }
   }
 
   &__btns {
     display: flex;
-    gap: 8px;
+    gap: var(--space-2);
   }
 }
 
@@ -1120,7 +1103,7 @@ onMounted(async () => {
 // ========================================
 .material-content__list {
   flex: 1;
-  padding: 24px;
+  padding: var(--space-6);
   overflow-y: auto;
 
   .loading-spinner {
@@ -1135,7 +1118,7 @@ onMounted(async () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 80px 24px;
+  padding: 80px var(--space-6);
 
   &__icon {
     width: 80px;
@@ -1143,20 +1126,20 @@ onMounted(async () => {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: @border-light;
+    background: var(--color-gray-100);
     border-radius: 50%;
-    margin-bottom: 20px;
+    margin-bottom: var(--space-5);
 
     .anticon {
       font-size: 36px;
-      color: @text-muted;
+      color: var(--color-gray-500);
     }
   }
 
   &__text {
-    font-size: 15px;
-    color: @text-secondary;
-    margin-bottom: 20px;
+    font-size: var(--font-size-md);
+    color: var(--color-gray-600);
+    margin-bottom: var(--space-5);
   }
 }
 
@@ -1166,21 +1149,21 @@ onMounted(async () => {
 .material-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 20px;
+  gap: var(--space-5);
 }
 
 .material-item {
   position: relative;
-  background: @bg-card;
-  border: 1px solid @border-color;
-  border-radius: @radius-md;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
   overflow: hidden;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
   &:hover {
-    border-color: @primary-color;
-    box-shadow: @shadow-md;
+    border-color: var(--color-primary-500);
+    box-shadow: var(--shadow-md);
     transform: translateY(-2px);
 
     .material-item__check {
@@ -1193,12 +1176,12 @@ onMounted(async () => {
   }
 
   &--selected {
-    border-color: @primary-color;
-    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2), @shadow-md;
+    border-color: var(--color-primary-500);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), var(--shadow-md);
 
     .material-item__check .check-circle {
-      background: @primary-color;
-      border-color: @primary-color;
+      background: var(--color-primary-500);
+      border-color: var(--color-primary-500);
       opacity: 1;
 
       .anticon {
@@ -1214,30 +1197,30 @@ onMounted(async () => {
     left: 10px;
     z-index: 10;
     opacity: 0;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--duration-fast);
 
     .check-circle {
       width: 22px;
       height: 22px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.9);
-      border: 2px solid @border-color;
+      border: 2px solid var(--color-gray-200);
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: all 0.2s ease;
-      box-shadow: @shadow-sm;
+      transition: all var(--duration-fast);
+      box-shadow: var(--shadow-sm);
 
       .anticon {
-        font-size: 12px;
+        font-size: var(--font-size-xs);
         color: white;
         opacity: 0;
-        transition: opacity 0.2s ease;
+        transition: opacity var(--duration-fast);
       }
 
       &--checked {
-        background: @primary-color;
-        border-color: @primary-color;
+        background: var(--color-primary-500);
+        border-color: var(--color-primary-500);
 
         .anticon {
           opacity: 1;
@@ -1275,7 +1258,7 @@ onMounted(async () => {
 
     .anticon {
       font-size: 40px;
-      color: @text-muted;
+      color: var(--color-gray-500);
     }
   }
 
@@ -1284,7 +1267,7 @@ onMounted(async () => {
     bottom: 0;
     left: 0;
     right: 0;
-    padding: 8px 12px;
+    padding: var(--space-2) var(--space-3);
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
     opacity: 0;
     transition: opacity 0.3s ease;
@@ -1304,38 +1287,38 @@ onMounted(async () => {
   }
 
   &__name {
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-weight: 600;
-    color: @text-primary;
+    color: var(--color-gray-900);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     line-height: 1.4;
-    margin-bottom: 6px;
-    transition: color 0.2s ease;
+    margin-bottom: var(--space-2);
+    transition: color var(--duration-fast);
 
     &:hover {
-      color: @primary-color;
+      color: var(--color-primary-500);
     }
 
     :deep(.ant-input) {
-      font-size: 14px;
+      font-size: var(--font-size-base);
       font-weight: 600;
       height: 22px;
-      border-radius: 4px;
-      border-color: @primary-color;
-      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+      border-radius: var(--radius-sm);
+      border-color: var(--color-primary-500);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
     }
   }
 
   &__meta {
     display: flex;
     align-items: center;
-    font-size: 12px;
-    color: @text-muted;
+    font-size: var(--font-size-xs);
+    color: var(--color-gray-500);
 
     .meta-dot {
-      margin: 0 6px;
+      margin: 0 var(--space-2);
     }
   }
 }
@@ -1347,38 +1330,38 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 24px;
-  background: @bg-card;
-  border-top: 1px solid @border-color;
+  padding: 14px var(--space-6);
+  background: var(--color-bg-card);
+  border-top: 1px solid var(--color-gray-200);
 
   .footer-left {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: var(--space-4);
   }
 
   .footer-count {
-    font-size: 13px;
-    color: @text-muted;
+    font-size: var(--font-size-sm);
+    color: var(--color-gray-500);
   }
 
   :deep(.ant-pagination) {
     .ant-pagination-item {
-      border-radius: 6px;
-      border-color: @border-color;
+      border-radius: var(--radius-base);
+      border-color: var(--color-gray-200);
 
       &:hover {
-        border-color: @primary-color;
+        border-color: var(--color-primary-500);
 
         a {
-          color: @primary-color;
+          color: var(--color-primary-500);
         }
       }
     }
 
     .ant-pagination-item-active {
-      border-color: @primary-color;
-      background: @primary-color;
+      border-color: var(--color-primary-500);
+      background: var(--color-primary-500);
 
       a {
         color: white;
@@ -1387,8 +1370,8 @@ onMounted(async () => {
 
     .ant-pagination-options {
       .ant-select-selector {
-        border-radius: 6px;
-        border-color: @border-color;
+        border-radius: var(--radius-base);
+        border-color: var(--color-gray-200);
       }
     }
   }
@@ -1400,17 +1383,17 @@ onMounted(async () => {
 :deep(.batch-delete-modal),
 :deep(.delete-group-modal) {
   .ant-modal-content {
-    border-radius: @radius-md;
+    border-radius: var(--radius-lg);
     overflow: hidden;
   }
 
   .ant-modal-body {
-    padding: 24px;
+    padding: var(--space-6);
   }
 
   .ant-modal-footer {
-    padding: 16px 24px;
-    border-top: 1px solid @border-color;
+    padding: var(--space-4) var(--space-6);
+    border-top: 1px solid var(--color-gray-200);
   }
 }
 </style>
diff --git a/frontend/app/web-gold/src/views/trends/Forecast.vue b/frontend/app/web-gold/src/views/trends/Forecast.vue
index 44bc73056b..d515932d81 100644
--- a/frontend/app/web-gold/src/views/trends/Forecast.vue
+++ b/frontend/app/web-gold/src/views/trends/Forecast.vue
@@ -631,52 +631,39 @@ onMounted(() => {
 </template>
 
 <style scoped lang="less">
-// 设计系统变量
-@primary: #00b030;
-@primary-light: #00c838;
-@primary-glow: rgba(0, 176, 48, 0.12);
-@bg-base: #f5f6f8;
-@bg-card: #ffffff;
-@bg-elevated: #fafbfc;
-@border-subtle: rgba(0, 0, 0, 0.04);
-@border-default: rgba(0, 0, 0, 0.08);
-@text-primary: rgba(0, 0, 0, 0.88);
-@text-secondary: rgba(0, 0, 0, 0.55);
-@text-tertiary: rgba(0, 0, 0, 0.35);
-@radius-sm: 6px;
-@radius-md: 10px;
-@radius-lg: 14px;
+// 使用设计系统变量
+// 主色: var(--color-primary-500) = #3B82F6
 
 // 页面布局
 .forecast-page {
   display: grid;
   grid-template-columns: 1fr 400px;
-  gap: 16px;
+  gap: var(--space-4);
   height: 100%;
-  background: @bg-base;
+  background: var(--color-gray-50);
 }
 
 // 面板基础
 .search-panel,
 .create-panel {
-  background: @bg-card;
-  border: 1px solid @border-subtle;
-  border-radius: @radius-lg;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--shadow-sm);
 }
 
 .panel-header {
-  padding: 16px 20px;
-  border-bottom: 1px solid @border-subtle;
+  padding: var(--space-4) var(--space-5);
+  border-bottom: 1px solid var(--color-gray-200);
 }
 
 .panel-title {
-  font-size: 15px;
+  font-size: var(--font-size-md);
   font-weight: 600;
-  color: @text-primary;
+  color: var(--color-gray-900);
   margin: 0;
   letter-spacing: -0.01em;
 }
@@ -684,8 +671,8 @@ onMounted(() => {
 // ========== 搜索面板 ==========
 .search-bar {
   display: flex;
-  gap: 8px;
-  padding: 12px 16px;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
 }
 
 .search-input-wrap {
@@ -695,31 +682,31 @@ onMounted(() => {
 
 .search-icon {
   position: absolute;
-  left: 12px;
+  left: var(--space-3);
   top: 50%;
   transform: translateY(-50%);
   width: 16px;
   height: 16px;
-  color: @text-tertiary;
+  color: var(--color-gray-400);
   pointer-events: none;
 }
 
 .search-input {
   width: 100%;
   height: 38px;
-  padding: 0 12px 0 38px;
-  font-size: 14px;
-  color: @text-primary;
-  background: @bg-base;
-  border: 1px solid @border-default;
-  border-radius: @radius-sm;
-  transition: all 0.2s;
+  padding: 0 var(--space-3) 0 38px;
+  font-size: var(--font-size-base);
+  color: var(--color-gray-900);
+  background: var(--color-gray-50);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-base);
+  transition: all var(--duration-fast);
 
-  &::placeholder { color: @text-tertiary; }
+  &::placeholder { color: var(--color-gray-400); }
   &:focus {
     outline: none;
-    border-color: @primary;
-    box-shadow: 0 0 0 3px @primary-glow;
+    border-color: var(--color-primary-500);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
   }
   &:disabled { opacity: 0.5; }
 }
@@ -727,19 +714,19 @@ onMounted(() => {
 .search-btn {
   padding: 0 18px;
   height: 38px;
-  font-size: 14px;
+  font-size: var(--font-size-base);
   font-weight: 500;
   color: #fff;
-  background: @primary;
+  background: var(--color-primary-500);
   border: none;
-  border-radius: @radius-sm;
+  border-radius: var(--radius-base);
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 6px;
-  transition: all 0.2s;
+  gap: var(--space-2);
+  transition: all var(--duration-fast);
 
-  &:hover:not(:disabled) { background: @primary-light; }
+  &:hover:not(:disabled) { background: var(--color-primary-400); }
   &:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 
@@ -760,34 +747,34 @@ onMounted(() => {
 // 筛选器
 .filters-row {
   display: flex;
-  gap: 12px;
-  padding: 0 16px 12px;
-  border-bottom: 1px solid @border-subtle;
+  gap: var(--space-3);
+  padding: 0 var(--space-4) var(--space-3);
+  border-bottom: 1px solid var(--color-gray-200);
 }
 
 .filter-item {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-2);
 }
 
 .filter-label {
-  font-size: 12px;
-  color: @text-tertiary;
+  font-size: var(--font-size-xs);
+  color: var(--color-gray-400);
 }
 
 :deep(.ant-select) {
   width: 88px;
 
   .ant-select-selector {
-    background: @bg-base !important;
-    border-color: @border-default !important;
-    border-radius: @radius-sm !important;
+    background: var(--color-gray-50) !important;
+    border-color: var(--color-gray-300) !important;
+    border-radius: var(--radius-base) !important;
     height: 26px !important;
 
     .ant-select-selection-item {
-      color: @text-primary !important;
-      font-size: 12px !important;
+      color: var(--color-gray-900) !important;
+      font-size: var(--font-size-xs) !important;
       line-height: 24px !important;
     }
   }
@@ -797,11 +784,11 @@ onMounted(() => {
 .results-area {
   flex: 1;
   overflow-y: auto;
-  padding: 12px;
+  padding: var(--space-3);
 
   &::-webkit-scrollbar { width: 4px; }
   &::-webkit-scrollbar-track { background: transparent; }
-  &::-webkit-scrollbar-thumb { background: @border-default; border-radius: 2px; }
+  &::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 2px; }
 }
 
 // 空状态
@@ -810,20 +797,20 @@ onMounted(() => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 48px 20px;
+  padding: 48px var(--space-5);
 }
 
 .empty-icon {
   width: 48px;
   height: 48px;
-  color: @text-tertiary;
-  margin-bottom: 12px;
+  color: var(--color-gray-400);
+  margin-bottom: var(--space-3);
   opacity: 0.6;
 }
 
 .empty-text {
-  font-size: 14px;
-  color: @text-secondary;
+  font-size: var(--font-size-base);
+  color: var(--color-gray-600);
   margin: 0;
 }
 
@@ -833,17 +820,17 @@ onMounted(() => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 48px 20px;
-  gap: 12px;
-  color: @text-secondary;
-  font-size: 13px;
+  padding: 48px var(--space-5);
+  gap: var(--space-3);
+  color: var(--color-gray-600);
+  font-size: var(--font-size-sm);
 }
 
 .loading-ring {
   width: 28px;
   height: 28px;
-  border: 2px solid @border-default;
-  border-top-color: @primary;
+  border: 2px solid var(--color-gray-300);
+  border-top-color: var(--color-primary-500);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
@@ -856,28 +843,28 @@ onMounted(() => {
 .topic-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-2);
 }
 
 .topic-card {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  padding: 12px;
-  background: @bg-card;
-  border: 1px solid @border-subtle;
-  border-radius: @radius-md;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--duration-fast);
 
   &:hover {
-    border-color: @border-default;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border-color: var(--color-gray-300);
+    box-shadow: var(--shadow-md);
   }
 
   &.selected {
-    border-color: @primary;
-    box-shadow: 0 0 0 3px @primary-glow;
+    border-color: var(--color-primary-500);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
   }
 }
 
@@ -886,8 +873,8 @@ onMounted(() => {
   flex-shrink: 0;
   width: 88px;
   height: 50px;
-  background: @bg-base;
-  border-radius: @radius-sm;
+  background: var(--color-gray-50);
+  border-radius: var(--radius-base);
   overflow: hidden;
 
   img {
@@ -902,7 +889,7 @@ onMounted(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: @text-tertiary;
+    color: var(--color-gray-400);
 
     svg { width: 20px; height: 20px; opacity: 0.4; }
   }
@@ -910,11 +897,11 @@ onMounted(() => {
 
 .topic-num {
   position: absolute;
-  top: 4px;
-  left: 4px;
+  top: var(--space-1);
+  left: var(--space-1);
   min-width: 16px;
   height: 16px;
-  padding: 0 4px;
+  padding: 0 var(--space-1);
   font-size: 10px;
   font-weight: 600;
   color: #fff;
@@ -930,13 +917,13 @@ onMounted(() => {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--space-1);
 }
 
 .topic-title {
-  font-size: 13px;
+  font-size: var(--font-size-sm);
   font-weight: 500;
-  color: @text-primary;
+  color: var(--color-gray-900);
   margin: 0;
   line-height: 1.4;
   display: -webkit-box;
@@ -945,15 +932,15 @@ onMounted(() => {
   -webkit-box-orient: vertical;
   overflow: hidden;
   cursor: pointer;
-  transition: color 0.15s;
+  transition: color var(--duration-fast);
 
-  &:hover { color: @primary; }
+  &:hover { color: var(--color-primary-500); }
 }
 
 .topic-meta {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-2);
 }
 
 .author-avatar {
@@ -965,7 +952,7 @@ onMounted(() => {
 
 .author-name {
   font-size: 11px;
-  color: @text-secondary;
+  color: var(--color-gray-600);
 }
 
 .topic-stats {
@@ -978,7 +965,7 @@ onMounted(() => {
   align-items: center;
   gap: 3px;
   font-size: 11px;
-  color: @text-tertiary;
+  color: var(--color-gray-500);
 
   svg { width: 11px; height: 11px; }
 }
@@ -990,17 +977,17 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: @primary;
-  background: @primary-glow;
+  color: var(--color-primary-500);
+  background: rgba(59, 130, 246, 0.1);
   border: none;
-  border-radius: @radius-sm;
+  border-radius: var(--radius-base);
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all var(--duration-fast);
 
   svg { width: 16px; height: 16px; }
 
   &:hover {
-    background: @primary;
+    background: var(--color-primary-500);
     color: #fff;
   }
 }
@@ -1008,28 +995,28 @@ onMounted(() => {
 // ========== 创作面板 ==========
 .create-form {
   flex: 1;
-  padding: 16px;
+  padding: var(--space-4);
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--space-4);
   overflow-y: auto;
 
   &::-webkit-scrollbar { width: 4px; }
   &::-webkit-scrollbar-track { background: transparent; }
-  &::-webkit-scrollbar-thumb { background: @border-default; border-radius: 2px; }
+  &::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 2px; }
 }
 
 .form-block {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--space-2);
 
   &.half { flex: 1; }
 
   label {
-    font-size: 12px;
+    font-size: var(--font-size-xs);
     font-weight: 500;
-    color: @text-secondary;
+    color: var(--color-gray-600);
   }
 }
 
@@ -1044,12 +1031,12 @@ onMounted(() => {
   align-items: center;
   gap: 5px;
   font-size: 11px;
-  color: @primary;
+  color: var(--color-primary-500);
 
   &.analyzing .tag-dot {
     width: 5px;
     height: 5px;
-    background: @primary;
+    background: var(--color-primary-500);
     border-radius: 50%;
     animation: pulse 1s ease-in-out infinite;
   }
@@ -1062,17 +1049,17 @@ onMounted(() => {
 
 .content-input {
   :deep(.ant-input) {
-    background: @bg-base !important;
-    border-color: @border-default !important;
-    color: @text-primary !important;
-    border-radius: @radius-sm !important;
-    font-size: 13px !important;
+    background: var(--color-gray-50) !important;
+    border-color: var(--color-gray-300) !important;
+    color: var(--color-gray-900) !important;
+    border-radius: var(--radius-base) !important;
+    font-size: var(--font-size-sm) !important;
     line-height: 1.6 !important;
 
-    &::placeholder { color: @text-tertiary !important; }
+    &::placeholder { color: var(--color-gray-400) !important; }
     &:focus {
-      border-color: @primary !important;
-      box-shadow: 0 0 0 2px @primary-glow !important;
+      border-color: var(--color-primary-500) !important;
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
     }
   }
 }
@@ -1080,68 +1067,68 @@ onMounted(() => {
 // 下拉选择器
 :deep(.ant-select) {
   .ant-select-selector {
-    background: @bg-base !important;
-    border-color: @border-default !important;
-    border-radius: @radius-sm !important;
+    background: var(--color-gray-50) !important;
+    border-color: var(--color-gray-300) !important;
+    border-radius: var(--radius-base) !important;
     height: 36px !important;
 
     .ant-select-selection-item,
     .ant-select-selection-placeholder {
-      color: @text-primary !important;
-      font-size: 13px !important;
+      color: var(--color-gray-900) !important;
+      font-size: var(--font-size-sm) !important;
       line-height: 34px !important;
     }
   }
 
   &.ant-select-focused .ant-select-selector {
-    border-color: @primary !important;
-    box-shadow: 0 0 0 2px @primary-glow !important;
+    border-color: var(--color-primary-500) !important;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
   }
 }
 
 .agent-category {
-  margin-left: 8px;
+  margin-left: var(--space-2);
   font-size: 11px;
-  color: @text-tertiary;
+  color: var(--color-gray-500);
 }
 
 // 表单行
 .form-row {
   display: flex;
-  gap: 12px;
+  gap: var(--space-3);
 }
 
 // 模式切换
 .mode-switch {
   display: flex;
-  gap: 6px;
+  gap: var(--space-2);
 }
 
 .mode-btn {
   flex: 1;
   height: 36px;
-  font-size: 13px;
+  font-size: var(--font-size-sm);
   font-weight: 500;
-  color: @text-secondary;
-  background: @bg-base;
-  border: 1px solid @border-default;
-  border-radius: @radius-sm;
+  color: var(--color-gray-600);
+  background: var(--color-gray-50);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-base);
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all var(--duration-fast);
 
-  &:hover { border-color: @border-subtle; color: @text-primary; }
+  &:hover { border-color: var(--color-gray-200); color: var(--color-gray-900); }
   &.active {
     color: #fff;
-    background: @primary;
-    border-color: @primary;
+    background: var(--color-primary-500);
+    border-color: var(--color-primary-500);
   }
 }
 
 // 幅度滑块
 .level-num {
-  font-size: 12px;
+  font-size: var(--font-size-xs);
   font-weight: 600;
-  color: @primary;
+  color: var(--color-primary-500);
 }
 
 .level-slider {
@@ -1149,7 +1136,7 @@ onMounted(() => {
   height: 4px;
   -webkit-appearance: none;
   appearance: none;
-  background: @bg-base;
+  background: var(--color-gray-50);
   border-radius: 2px;
   outline: none;
 
@@ -1157,14 +1144,14 @@ onMounted(() => {
     -webkit-appearance: none;
     width: 14px;
     height: 14px;
-    background: @primary;
+    background: var(--color-primary-500);
     border-radius: 50%;
     cursor: pointer;
-    transition: transform 0.15s, box-shadow 0.15s;
+    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
 
     &:hover {
       transform: scale(1.15);
-      box-shadow: 0 0 0 4px @primary-glow;
+      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
     }
   }
 }
@@ -1173,26 +1160,26 @@ onMounted(() => {
 .generate-btn {
   width: 100%;
   height: 44px;
-  font-size: 14px;
+  font-size: var(--font-size-base);
   font-weight: 600;
   color: #fff;
-  background: @primary;
+  background: var(--color-primary-500);
   border: none;
-  border-radius: @radius-md;
+  border-radius: var(--radius-md);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  transition: all 0.2s;
+  gap: var(--space-2);
+  transition: all var(--duration-fast);
   margin-top: auto;
 
   svg { width: 16px; height: 16px; }
 
   &:hover:not(:disabled) {
-    background: @primary-light;
+    background: var(--color-primary-400);
     transform: translateY(-1px);
-    box-shadow: 0 6px 20px @primary-glow;
+    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15);
   }
 
   &:disabled {
@@ -1201,21 +1188,21 @@ onMounted(() => {
   }
 
   &.loading {
-    background: @primary;
+    background: var(--color-primary-500);
   }
 }
 
 .points-hint {
   text-align: center;
-  font-size: 12px;
-  color: #94a3b8;
-  margin: 8px 0 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-gray-500);
+  margin: var(--space-2) 0 0;
 }
 
 // 结果区域
 .result-block {
-  padding-top: 16px;
-  border-top: 1px solid @border-subtle;
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--color-gray-200);
 }
 
 .result-header {
@@ -1226,39 +1213,39 @@ onMounted(() => {
 }
 
 .result-title {
-  font-size: 12px;
+  font-size: var(--font-size-xs);
   font-weight: 500;
-  color: @text-secondary;
+  color: var(--color-gray-600);
 }
 
 .copy-btn {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  font-size: 12px;
-  color: @text-secondary;
-  background: @bg-base;
-  border: 1px solid @border-default;
-  border-radius: @radius-sm;
+  gap: var(--space-1);
+  padding: var(--space-1) 10px;
+  font-size: var(--font-size-xs);
+  color: var(--color-gray-600);
+  background: var(--color-gray-50);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--radius-base);
   cursor: pointer;
-  transition: all 0.15s;
+  transition: all var(--duration-fast);
 
   svg { width: 12px; height: 12px; }
 
   &:hover {
-    color: @text-primary;
-    border-color: @text-tertiary;
+    color: var(--color-gray-900);
+    border-color: var(--color-gray-500);
   }
 }
 
 .result-content {
   padding: 14px;
-  font-size: 13px;
+  font-size: var(--font-size-sm);
   line-height: 1.7;
-  color: @text-primary;
-  background: @bg-base;
-  border-radius: @radius-sm;
+  color: var(--color-gray-900);
+  background: var(--color-gray-50);
+  border-radius: var(--radius-base);
   white-space: pre-wrap;
   word-wrap: break-word;
   max-height: 240px;
@@ -1266,7 +1253,7 @@ onMounted(() => {
 
   &::-webkit-scrollbar { width: 4px; }
   &::-webkit-scrollbar-track { background: transparent; }
-  &::-webkit-scrollbar-thumb { background: @border-default; border-radius: 2px; }
+  &::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 2px; }
 }
 
 // 过渡动画