From 6ec2a0aa6c5aac6ad70cf6a30413bd1e5543ab93 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Thu, 26 Feb 2026 21:04:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/material/MaterialListNew.vue    |  50 +++---
 .../app/web-gold/src/views/material/Mix.vue   | 146 +++++++++---------
 2 files changed, 98 insertions(+), 98 deletions(-)

diff --git a/frontend/app/web-gold/src/views/material/MaterialListNew.vue b/frontend/app/web-gold/src/views/material/MaterialListNew.vue
index 4e6a67104f..da399c7c49 100644
--- a/frontend/app/web-gold/src/views/material/MaterialListNew.vue
+++ b/frontend/app/web-gold/src/views/material/MaterialListNew.vue
@@ -770,7 +770,7 @@ onMounted(async () => {
 
 .sidebar-slide-enter-active,
 .sidebar-slide-leave-active {
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .sidebar-slide-enter-from,
@@ -790,7 +790,7 @@ onMounted(async () => {
     margin-bottom: var(--space-3);
 
     span {
-      font-size: 11px;
+      font-size: var(--font-size-xs);
       font-weight: 600;
       color: var(--color-gray-500);
       text-transform: uppercase;
@@ -829,7 +829,7 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px var(--space-3);
+  padding: var(--space-2) var(--space-3);
   cursor: pointer;
   border-radius: var(--radius-md);
   margin-bottom: 2px;
@@ -860,8 +860,8 @@ onMounted(async () => {
   }
 
   &__icon {
-    margin-right: 10px;
-    font-size: 14px;
+    margin-right: var(--space-2);
+    font-size: var(--font-size-base);
     color: var(--color-gray-500);
     flex-shrink: 0;
   }
@@ -881,7 +881,7 @@ onMounted(async () => {
   }
 
   &__count {
-    font-size: 11px;
+    font-size: var(--font-size-xs);
     color: var(--color-gray-500);
     margin-right: var(--space-2);
   }
@@ -922,7 +922,7 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 // ========================================
@@ -942,7 +942,7 @@ onMounted(async () => {
 .category-switcher {
   display: flex;
   background: var(--color-gray-50);
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   padding: var(--space-1);
   gap: var(--space-1);
 
@@ -950,13 +950,13 @@ onMounted(async () => {
     display: flex;
     align-items: center;
     gap: var(--space-2);
-    padding: 10px var(--space-5);
+    padding: var(--space-2) var(--space-5);
     border-radius: var(--radius-md);
     cursor: pointer;
     font-size: var(--font-size-base);
     font-weight: 500;
     color: var(--color-gray-600);
-    transition: all 0.25s ease;
+    transition: all var(--duration-base) ease;
 
     &:hover {
       color: var(--color-gray-900);
@@ -974,9 +974,9 @@ onMounted(async () => {
   }
 
   &__icon {
-    font-size: 16px;
+    font-size: var(--font-size-md);
     color: var(--color-gray-500);
-    transition: color 0.25s ease;
+    transition: color var(--duration-base) ease;
   }
 }
 
@@ -1013,7 +1013,7 @@ onMounted(async () => {
     height: 100%;
     background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));
     border-radius: 2px;
-    transition: width 0.3s ease;
+    transition: width var(--duration-slow) ease;
   }
 }
 
@@ -1066,13 +1066,13 @@ onMounted(async () => {
   &__info {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: var(--space-2);
     font-size: var(--font-size-base);
     color: var(--color-gray-900);
 
     .anticon {
       color: var(--color-primary-500);
-      font-size: 16px;
+      font-size: var(--font-size-md);
     }
 
     strong {
@@ -1089,7 +1089,7 @@ onMounted(async () => {
 
 .fade-slide-enter-active,
 .fade-slide-leave-active {
-  transition: all 0.3s ease;
+  transition: all var(--duration-slow) ease;
 }
 
 .fade-slide-enter-from,
@@ -1159,7 +1159,7 @@ onMounted(async () => {
   border-radius: var(--radius-lg);
   overflow: hidden;
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
 
   &:hover {
     border-color: var(--color-primary-500);
@@ -1193,8 +1193,8 @@ onMounted(async () => {
   // 选择指示器
   &__check {
     position: absolute;
-    top: 10px;
-    left: 10px;
+    top: var(--space-2);
+    left: var(--space-2);
     z-index: 10;
     opacity: 0;
     transition: opacity var(--duration-fast);
@@ -1234,14 +1234,14 @@ onMounted(async () => {
     position: relative;
     width: 100%;
     aspect-ratio: 16 / 10;
-    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
     overflow: hidden;
 
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
-      transition: transform 0.4s ease;
+      transition: transform var(--duration-slower) ease;
     }
 
     &:hover img {
@@ -1270,11 +1270,11 @@ onMounted(async () => {
     padding: var(--space-2) var(--space-3);
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
     opacity: 0;
-    transition: opacity 0.3s ease;
+    transition: opacity var(--duration-slow) ease;
   }
 
   &__type-tag {
-    font-size: 11px;
+    font-size: var(--font-size-xs);
     font-weight: 600;
     color: white;
     text-transform: uppercase;
@@ -1283,7 +1283,7 @@ onMounted(async () => {
 
   // 信息区
   &__info {
-    padding: 14px;
+    padding: var(--space-3) var(--space-4);
   }
 
   &__name {
@@ -1330,7 +1330,7 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px var(--space-6);
+  padding: var(--space-3) var(--space-6);
   background: var(--color-bg-card);
   border-top: 1px solid var(--color-gray-200);
 
diff --git a/frontend/app/web-gold/src/views/material/Mix.vue b/frontend/app/web-gold/src/views/material/Mix.vue
index 8b7fd3bf2d..f9093f063f 100644
--- a/frontend/app/web-gold/src/views/material/Mix.vue
+++ b/frontend/app/web-gold/src/views/material/Mix.vue
@@ -772,18 +772,18 @@ onMounted(() => {
 .page-header {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: var(--space-4);
 
   &__icon {
     width: 48px;
     height: 48px;
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     background: var(--color-primary);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
-    font-size: 24px;
+    font-size: var(--font-size-2xl);
     box-shadow: var(--shadow-inset-card);
   }
 
@@ -792,7 +792,7 @@ onMounted(() => {
   }
 
   &__title {
-    font-size: 24px;
+    font-size: var(--font-size-2xl);
     font-weight: 600;
     color: var(--color-text);
     margin: 0;
@@ -800,9 +800,9 @@ onMounted(() => {
   }
 
   &__subtitle {
-    font-size: 14px;
+    font-size: var(--font-size-base);
     color: var(--color-text-secondary);
-    margin: 4px 0 0;
+    margin: var(--space-1) 0 0;
   }
 }
 
@@ -830,34 +830,34 @@ onMounted(() => {
 .card {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   overflow: hidden;
   height: fit-content;
 
   &__header {
     display: flex;
-    padding: 12px 16px;
+    padding: var(--space-3) var(--space-4);
     justify-content: space-between;
     border-bottom: 1px solid var(--color-border);
   }
 
   &__title {
-    font-size: 16px;
+    font-size: var(--font-size-md);
     font-weight: 600;
     color: var(--color-text);
     margin: 0;
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
 
     .anticon {
       color: var(--color-primary);
-      font-size: 18px;
+      font-size: var(--font-size-lg);
     }
   }
 
   &__body {
-    padding: 16px;
+    padding: var(--space-4);
   }
 }
 
@@ -876,14 +876,14 @@ onMounted(() => {
 .slider-box {
   .slider-value {
     text-align: center;
-    margin-top: 12px;
-    font-size: 18px;
+    margin-top: var(--space-3);
+    font-size: var(--font-size-lg);
     font-weight: 700;
     color: var(--color-primary);
-    padding: 8px 16px;
+    padding: var(--space-2) var(--space-4);
     background: var(--color-bg);
     border: 1px solid var(--color-border);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
   }
 }
 
@@ -892,9 +892,9 @@ onMounted(() => {
   flex-direction: column;
   gap: var(--space-2);
   margin: var(--space-3) 0;
-  padding: 20px;
+  padding: var(--space-5);
   background: var(--color-surface);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
 
   .scene-row {
@@ -904,13 +904,13 @@ onMounted(() => {
 
     span {
       color: var(--color-text-secondary);
-      font-size: 14px;
+      font-size: var(--font-size-base);
       font-weight: 500;
     }
 
     strong {
       color: var(--color-text);
-      font-size: 18px;
+      font-size: var(--font-size-lg);
       font-weight: 700;
 
       &.text-green {
@@ -922,13 +922,13 @@ onMounted(() => {
 
 .btn-secondary {
   height: 48px;
-  font-size: 16px;
+  font-size: var(--font-size-md);
   font-weight: 600;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   color: var(--color-text);
-  transition: all 0.2s ease;
+  transition: all var(--duration-base) ease;
 
   &:hover:not(:disabled) {
     background: var(--color-bg);
@@ -952,16 +952,16 @@ onMounted(() => {
 }
 
 .scene-header {
-  margin-bottom: 12px;
+  margin-bottom: var(--space-3);
 }
 
 .scene-title {
-  font-size: 16px;
+  font-size: var(--font-size-md);
   font-weight: 600;
   margin: 0;
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: var(--space-3);
 
   .scene-index {
     color: var(--color-primary);
@@ -969,23 +969,23 @@ onMounted(() => {
   }
 
   .scene-duration {
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-weight: 500;
-    padding: 4px 12px;
+    padding: var(--space-1) var(--space-3);
     background: var(--color-bg);
     border: 1px solid var(--color-border);
     color: var(--color-text);
-    border-radius: 6px;
+    border-radius: var(--radius-base);
   }
 
   .scene-count {
-    font-size: 13px;
+    font-size: var(--font-size-sm);
     color: var(--color-success);
     margin-left: auto;
-    padding: 4px 12px;
+    padding: var(--space-1) var(--space-3);
     background: var(--color-bg);
     border: 1px solid var(--color-border);
-    border-radius: 6px;
+    border-radius: var(--radius-base);
     font-weight: 600;
   }
 }
@@ -1001,14 +1001,14 @@ onMounted(() => {
   width: 140px;
   height: 140px;
   border: 2px dashed var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--duration-base) ease;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: var(--space-2);
   background: var(--color-surface);
   position: relative;
 
@@ -1024,7 +1024,7 @@ onMounted(() => {
   }
 
   span {
-    font-size: 13px;
+    font-size: var(--font-size-sm);
     color: var(--color-text-secondary);
     font-weight: 500;
   }
@@ -1033,11 +1033,11 @@ onMounted(() => {
 .candidate-item {
   width: 140px;
   height: 130px;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
-  transition: all 0.2s ease;
+  transition: all var(--duration-base) ease;
   cursor: pointer;
   position: relative;
 
@@ -1060,13 +1060,13 @@ onMounted(() => {
     justify-content: center;
     background: var(--color-bg);
     color: var(--color-text-secondary);
-    font-size: 24px;
+    font-size: var(--font-size-2xl);
   }
 
   .candidate-name {
-    font-size: 12px;
+    font-size: var(--font-size-xs);
     color: var(--color-text);
-    padding: 8px 10px;
+    padding: var(--space-2) var(--space-2);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1090,8 +1090,8 @@ onMounted(() => {
     line-height: 1;
     min-width: auto;
     opacity: 0;
-    transition: all 0.2s ease;
-    border-radius: 6px;
+    transition: all var(--duration-base) ease;
+    border-radius: var(--radius-base);
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     color: var(--color-text-secondary);
@@ -1108,7 +1108,7 @@ onMounted(() => {
       top: 50% ;
       left: 50% ;
       transform: translate(-50%, -50%);
-      font-size: 12px;
+      font-size: var(--font-size-xs);
     }
   }
 
@@ -1125,11 +1125,11 @@ onMounted(() => {
 
 .material-item {
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
-  transition: all 0.2s ease;
+  transition: all var(--duration-base) ease;
   position: relative;
 
   &:hover {
@@ -1174,21 +1174,21 @@ onMounted(() => {
 
 .material-badge {
   position: absolute;
-  top: 8px;
-  right: 8px;
+  top: var(--space-2);
+  right: var(--space-2);
   background: var(--color-error);
   color: #fff;
-  padding: 4px 8px;
-  border-radius: 6px;
-  font-size: 11px;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-xs);
   z-index: 2;
   font-weight: 600;
   box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
 }
 
 .material-name {
-  padding: 10px;
-  font-size: 13px;
+  padding: var(--space-2);
+  font-size: var(--font-size-sm);
   color: var(--color-text);
   white-space: nowrap;
   overflow: hidden;
@@ -1200,9 +1200,9 @@ onMounted(() => {
 .selector-container {
   .selector-actions {
     margin-bottom: var(--space-2);
-    padding: 16px;
+    padding: var(--space-4);
     background: var(--color-surface);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     border: 1px solid var(--color-border);
   }
 }
@@ -1213,18 +1213,18 @@ onMounted(() => {
   gap: var(--space-2);
   max-height: 480px;
   overflow-y: auto;
-  padding: 8px;
+  padding: var(--space-2);
   background: var(--color-surface);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
 }
 
 .selector-item {
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   overflow: hidden;
   border: 2px solid transparent;
-  transition: all 0.2s ease;
+  transition: all var(--duration-base) ease;
   position: relative;
   background: var(--color-surface);
   box-shadow: var(--shadow-inset-card);
@@ -1246,7 +1246,7 @@ onMounted(() => {
     align-items: center;
     justify-content: center;
     color: var(--color-text-secondary);
-    font-size: 24px;
+    font-size: var(--font-size-2xl);
 
     img {
       width: 100%;
@@ -1256,8 +1256,8 @@ onMounted(() => {
   }
 
   .selector-name {
-    padding: 8px 12px;
-    font-size: 12px;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-size-xs);
     text-align: center;
     white-space: nowrap;
     overflow: hidden;
@@ -1269,8 +1269,8 @@ onMounted(() => {
 
   .selector-checkmark {
     position: absolute;
-    top: 8px;
-    right: 8px;
+    top: var(--space-2);
+    right: var(--space-2);
     background: var(--color-success);
     color: #fff;
     border-radius: 50%;
@@ -1279,7 +1279,7 @@ onMounted(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 14px;
+    font-size: var(--font-size-base);
     z-index: 2;
     box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
   }
@@ -1287,21 +1287,21 @@ onMounted(() => {
 
 .selector-actions-footer {
   margin-top: var(--space-2);
-  padding: 16px;
+  padding: var(--space-4);
   background: var(--color-surface);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   text-align: right;
   border: 1px solid var(--color-border);
 }
 
 :deep(.selector-modal) {
   .ant-modal-content {
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     overflow: hidden;
   }
 
   .ant-modal-header {
-    padding: 20px;
+    padding: var(--space-5);
     border-bottom: 1px solid var(--color-border);
     background: var(--color-surface);
   }
@@ -1312,7 +1312,7 @@ onMounted(() => {
   }
 
   .ant-modal-body {
-    padding: 20px;
+    padding: var(--space-5);
   }
 }
 
@@ -1356,14 +1356,14 @@ onMounted(() => {
   .page-header {
     flex-direction: column;
     align-items: flex-start;
-    gap: 12px;
+    gap: var(--space-3);
 
     &__title {
-      font-size: 20px;
+      font-size: var(--font-size-xl);
     }
 
     &__subtitle {
-      font-size: 13px;
+      font-size: var(--font-size-sm);
     }
   }