neo-cmp-cli 1.1.8 → 1.1.9

package/src/template/antd-custom-cmp-template/src/components/data-dashboard/style.scss

@@ -4,7 +4,7 @@
   --primary-color: #6366f1;
   --primary-light: #8b5cf6;
   --primary-dark: #4f46e5;
-  
+
   // 功能色
   --success-color: #10b981;
   --success-light: #34d399;
@@ -14,34 +14,37 @@
   --error-light: #f87171;
   --info-color: #06b6d4;
   --info-light: #22d3ee;
-  
+
   // 中性色
   --text-primary: #111827;
   --text-secondary: #6b7280;
   --text-tertiary: #9ca3af;
   --text-inverse: #ffffff;
-  
+
   // 背景色
   --bg-primary: #ffffff;
   --bg-secondary: #f9fafb;
   --bg-tertiary: #f3f4f6;
   --bg-dark: #1f2937;
   --bg-dark-secondary: #374151;
-  
+
   // 边框和分割线
   --border-light: #e5e7eb;
   --border-medium: #d1d5db;
   --border-dark: #9ca3af;
-  
+
   // 阴影系统
   --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
-  
+
   // 圆角系统
   --radius-sm: 6px;
   --radius-md: 12px;
@@ -49,18 +52,18 @@
   --radius-xl: 20px;
   --radius-2xl: 24px;
   --radius-full: 9999px;
-  
+
   // 动画缓动
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  
+
   // 过渡时间
   --duration-fast: 150ms;
   --duration-normal: 300ms;
   --duration-slow: 500ms;
-  
+
   // 间距系统
   --space-xs: 4px;
   --space-sm: 8px;
@@ -117,7 +120,8 @@
 }
 
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(1);
   }
   50% {
@@ -126,7 +130,8 @@
 }
 
 @keyframes glow {
-  0%, 100% {
+  0%,
+  100% {
     box-shadow: var(--shadow-lg), var(--shadow-glow);
   }
   50% {
@@ -135,7 +140,8 @@
 }
 
 @keyframes float {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateY(0px) rotate(0deg);
   }
   33% {
@@ -176,10 +182,15 @@
 }
 
 @keyframes bounce {
-  0%, 20%, 53%, 80%, 100% {
+  0%,
+  20%,
+  53%,
+  80%,
+  100% {
     transform: translate3d(0, 0, 0);
   }
-  40%, 43% {
+  40%,
+  43% {
     transform: translate3d(0, -8px, 0);
   }
   70% {
@@ -208,20 +219,21 @@
   min-height: 100vh;
   padding: var(--space-lg);
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
   overflow-x: hidden;
   line-height: 1.6;
 
   // 主题变体
   &.light {
     background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-    
+
     .dashboard-header {
       background: var(--bg-primary);
       border: 1px solid var(--border-light);
       backdrop-filter: blur(20px);
     }
-    
+
     .metric-card,
     .products-card,
     .activities-card,
@@ -235,14 +247,25 @@
 
   &.dark {
     background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-    color: var(--text-inverse);
-    
+    color: var(--text-inverse) !important;
+
     .dashboard-header {
       background: rgba(30, 41, 59, 0.8);
       border: 1px solid rgba(51, 65, 85, 0.5);
       backdrop-filter: blur(20px);
+      color: var(--text-inverse);
+      
+      .dashboard-title {
+        color: var(--text-inverse);
+      }
+      
+      .user-info {
+        .user-name {
+          color: var(--text-inverse);
+        }
+      }
     }
-    
+
     .metric-card,
     .products-card,
     .activities-card,
@@ -252,6 +275,89 @@
       border: 1px solid rgba(51, 65, 85, 0.5);
       color: var(--text-inverse);
       backdrop-filter: blur(20px);
+      
+      .ant-card-head-title {
+        color: var(--text-inverse);
+      }
+      
+      .ant-statistic-title {
+        color: var(--text-inverse);
+      }
+      
+      .ant-statistic-content-value {
+        color: var(--text-inverse);
+      }
+      
+      .metric-trend {
+        .trend-text {
+          color: var(--text-inverse);
+        }
+      }
+      
+      .product-name {
+        color: var(--text-inverse);
+      }
+      
+      .product-sales {
+        color: rgba(255, 255, 255, 0.7);
+      }
+      
+      .activity-text {
+        .user-name {
+          color: var(--primary-light);
+        }
+        
+        .action {
+          color: var(--text-inverse);
+        }
+      }
+      
+      .activity-time {
+        color: rgba(255, 255, 255, 0.7);
+      }
+      
+      .performance-header {
+        .metric-name {
+          color: var(--text-inverse);
+        }
+        
+        .metric-value {
+          color: var(--primary-light);
+        }
+      }
+      
+      .performance-target {
+        color: rgba(255, 255, 255, 0.7);
+      }
+      
+      .active-users-description {
+        color: rgba(255, 255, 255, 0.7);
+      }
+      
+      .active-users-number {
+        .unit {
+          color: rgba(255, 255, 255, 0.7);
+        }
+      }
+      
+      .ant-btn {
+        color: var(--text-inverse);
+        border-color: rgba(255, 255, 255, 0.3);
+        
+        &:hover {
+          color: var(--text-inverse);
+          border-color: var(--primary-light);
+        }
+      }
+      
+      .ant-tag {
+        color: var(--text-inverse);
+        border-color: rgba(255, 255, 255, 0.3);
+      }
+      
+      .ant-progress-text {
+        color: var(--text-inverse);
+      }
     }
   }
 
@@ -259,7 +365,7 @@
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     background-size: 400% 400%;
     animation: gradientShift 15s ease infinite;
-    
+
     &::before {
       content: '';
       position: absolute;
@@ -267,14 +373,25 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: 
-        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
-        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
-        radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.2) 0%, transparent 50%);
+      background: radial-gradient(
+          circle at 20% 50%,
+          rgba(99, 102, 241, 0.2) 0%,
+          transparent 50%
+        ),
+        radial-gradient(
+          circle at 80% 20%,
+          rgba(139, 92, 246, 0.2) 0%,
+          transparent 50%
+        ),
+        radial-gradient(
+          circle at 40% 80%,
+          rgba(6, 182, 212, 0.2) 0%,
+          transparent 50%
+        );
       pointer-events: none;
       animation: gradientShift 20s ease infinite reverse;
     }
-    
+
     &::after {
       content: '';
       position: absolute;
@@ -282,8 +399,12 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: 
-        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
+      background: linear-gradient(
+        45deg,
+        transparent 30%,
+        rgba(255, 255, 255, 0.05) 50%,
+        transparent 70%
+      );
       pointer-events: none;
       animation: shimmer 3s ease-in-out infinite;
     }
@@ -294,7 +415,7 @@
     .metric-card {
       animation: pulse var(--duration-normal) var(--ease-bounce);
     }
-    
+
     .product-item,
     .activity-item {
       animation: slideIn var(--duration-normal) var(--ease-out);
@@ -325,7 +446,12 @@
     left: 0;
     right: 0;
     height: 3px;
-    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--info-color));
+    background: linear-gradient(
+      90deg,
+      var(--primary-color),
+      var(--primary-light),
+      var(--info-color)
+    );
     border-radius: var(--radius-xl) var(--radius-xl) 0 0;
   }
 
@@ -333,7 +459,12 @@
     margin: 0;
     font-size: 32px;
     font-weight: 800;
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--info-color) 100%);
+    background: linear-gradient(
+      135deg,
+      var(--primary-color) 0%,
+      var(--primary-light) 50%,
+      var(--info-color) 100%
+    );
     background-size: 200% 200%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -343,14 +474,18 @@
     gap: var(--space-md);
     animation: gradientShift 3s ease infinite;
     letter-spacing: -0.02em;
-    
+
     .ant-tag {
       font-size: 14px;
       font-weight: 600;
       padding: 4px 12px;
       border-radius: var(--radius-full);
       border: none;
-      background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+      background: linear-gradient(
+        135deg,
+        var(--primary-color),
+        var(--primary-light)
+      );
       color: white;
       box-shadow: var(--shadow-sm);
     }
@@ -361,7 +496,11 @@
     align-items: center;
     gap: var(--space-md);
     padding: var(--space-sm) var(--space-lg);
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
+    background: linear-gradient(
+      135deg,
+      rgba(99, 102, 241, 0.1),
+      rgba(139, 92, 246, 0.1)
+    );
     border-radius: var(--radius-full);
     border: 1px solid rgba(99, 102, 241, 0.2);
     backdrop-filter: blur(10px);
@@ -376,7 +515,12 @@
       left: -100%;
       width: 100%;
       height: 100%;
-      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.2),
+        transparent
+      );
       transition: left 0.5s;
     }
 
@@ -384,7 +528,7 @@
       transform: translateY(-2px);
       box-shadow: var(--shadow-lg);
       border-color: rgba(99, 102, 241, 0.3);
-      
+
       &::before {
         left: 100%;
       }
@@ -433,7 +577,11 @@
       left: 0;
       right: 0;
       height: 4px;
-      background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+      background: linear-gradient(
+        90deg,
+        var(--primary-color),
+        var(--primary-light)
+      );
       border-radius: var(--radius-xl) var(--radius-xl) 0 0;
     }
 
@@ -444,7 +592,11 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: linear-gradient(135deg, rgba(99, 102, 241, 0.02), rgba(139, 92, 246, 0.02));
+      background: linear-gradient(
+        135deg,
+        rgba(99, 102, 241, 0.02),
+        rgba(139, 92, 246, 0.02)
+      );
       opacity: 0;
       transition: opacity var(--duration-normal) var(--ease-in-out);
     }
@@ -453,16 +605,16 @@
       transform: translateY(-8px) scale(1.02);
       box-shadow: var(--shadow-2xl);
       border-color: rgba(99, 102, 241, 0.3);
-      
+
       &::after {
         opacity: 1;
       }
-      
+
       .metric-icon {
         transform: scale(1.1) rotate(5deg);
         color: var(--primary-color);
       }
-      
+
       .ant-statistic-content-value {
         transform: scale(1.05);
       }
@@ -488,7 +640,11 @@
         font-size: 36px;
         font-weight: 800;
         line-height: 1.1;
-        background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
+        background: linear-gradient(
+          135deg,
+          var(--text-primary),
+          var(--text-secondary)
+        );
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
@@ -516,7 +672,11 @@
 
       .ant-badge {
         .ant-badge-count {
-          background: linear-gradient(135deg, var(--success-color), var(--success-light));
+          background: linear-gradient(
+            135deg,
+            var(--success-color),
+            var(--success-light)
+          );
           border: none;
           font-weight: 600;
           font-size: 12px;
@@ -534,9 +694,13 @@
   // 特定卡片样式
   .users-card {
     &::before {
-      background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+      background: linear-gradient(
+        90deg,
+        var(--primary-color),
+        var(--primary-light)
+      );
     }
-    
+
     .metric-icon {
       color: var(--primary-color);
     }
@@ -544,13 +708,17 @@
 
   .orders-card {
     &::before {
-      background: linear-gradient(90deg, var(--success-color), var(--success-light));
+      background: linear-gradient(
+        90deg,
+        var(--success-color),
+        var(--success-light)
+      );
     }
-    
+
     .metric-icon {
       color: var(--success-color);
     }
-    
+
     .metric-trend {
       background: rgba(16, 185, 129, 0.1);
       border-color: rgba(16, 185, 129, 0.2);
@@ -559,13 +727,17 @@
 
   .revenue-card {
     &::before {
-      background: linear-gradient(90deg, var(--warning-color), var(--warning-light));
+      background: linear-gradient(
+        90deg,
+        var(--warning-color),
+        var(--warning-light)
+      );
     }
-    
+
     .metric-icon {
       color: var(--warning-color);
     }
-    
+
     .metric-trend {
       background: rgba(245, 158, 11, 0.1);
       border-color: rgba(245, 158, 11, 0.2);
@@ -574,13 +746,17 @@
 
   .conversion-card {
     &::before {
-      background: linear-gradient(90deg, var(--error-color), var(--error-light));
+      background: linear-gradient(
+        90deg,
+        var(--error-color),
+        var(--error-light)
+      );
     }
-    
+
     .metric-icon {
       color: var(--error-color);
     }
-    
+
     .metric-trend {
       background: rgba(239, 68, 68, 0.1);
       border-color: rgba(239, 68, 68, 0.2);
@@ -611,7 +787,11 @@
       left: 0;
       right: 0;
       height: 3px;
-      background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+      background: linear-gradient(
+        90deg,
+        var(--primary-color),
+        var(--primary-light)
+      );
       border-radius: var(--radius-xl) var(--radius-xl) 0 0;
     }
 
@@ -624,8 +804,12 @@
     .ant-card-head {
       border-bottom: 1px solid rgba(0, 0, 0, 0.06);
       padding: var(--space-lg) var(--space-xl);
-      background: linear-gradient(135deg, rgba(99, 102, 241, 0.02), rgba(139, 92, 246, 0.02));
-      
+      background: linear-gradient(
+        135deg,
+        rgba(99, 102, 241, 0.02),
+        rgba(139, 92, 246, 0.02)
+      );
+
       .ant-card-head-title {
         font-size: 20px;
         font-weight: 700;
@@ -649,13 +833,17 @@
     .ant-card-extra {
       .ant-btn {
         border: none;
-        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+        background: linear-gradient(
+          135deg,
+          var(--primary-color),
+          var(--primary-light)
+        );
         color: white;
         border-radius: var(--radius-md);
         font-weight: 600;
         padding: var(--space-sm) var(--space-lg);
         transition: all var(--duration-normal) var(--ease-in-out);
-        
+
         &:hover {
           transform: translateY(-2px);
           box-shadow: var(--shadow-md);
@@ -683,7 +871,11 @@
     }
 
     &:hover {
-      background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
+      background: linear-gradient(
+        135deg,
+        rgba(99, 102, 241, 0.05),
+        rgba(139, 92, 246, 0.05)
+      );
       border-radius: var(--radius-md);
       padding-left: var(--space-md);
       padding-right: var(--space-md);
@@ -712,21 +904,29 @@
 
     .product-growth {
       margin: 0 var(--space-lg);
-      
+
       .ant-tag {
         border: none;
         border-radius: var(--radius-md);
         font-weight: 600;
         font-size: 12px;
         padding: var(--space-xs) var(--space-sm);
-        
+
         &.ant-tag-green {
-          background: linear-gradient(135deg, var(--success-color), var(--success-light));
+          background: linear-gradient(
+            135deg,
+            var(--success-color),
+            var(--success-light)
+          );
           color: white;
         }
-        
+
         &.ant-tag-red {
-          background: linear-gradient(135deg, var(--error-color), var(--error-light));
+          background: linear-gradient(
+            135deg,
+            var(--error-color),
+            var(--error-light)
+          );
           color: white;
         }
       }
@@ -734,12 +934,12 @@
 
     .product-progress {
       width: 120px;
-      
+
       .ant-progress {
         .ant-progress-bg {
           border-radius: var(--radius-sm);
         }
-        
+
         .ant-progress-outer {
           .ant-progress-inner {
             background-color: var(--bg-tertiary);
@@ -769,7 +969,11 @@
     }
 
     &:hover {
-      background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
+      background: linear-gradient(
+        135deg,
+        rgba(99, 102, 241, 0.05),
+        rgba(139, 92, 246, 0.05)
+      );
       border-radius: var(--radius-md);
       padding-left: var(--space-md);
       padding-right: var(--space-md);
@@ -821,7 +1025,7 @@
       gap: var(--space-xs);
       opacity: 0;
       transition: all var(--duration-normal) var(--ease-in-out);
-      
+
       .ant-btn {
         border: none;
         background: transparent;
@@ -829,7 +1033,7 @@
         padding: var(--space-xs);
         border-radius: var(--radius-sm);
         transition: all var(--duration-fast) var(--ease-in-out);
-        
+
         &:hover {
           background: rgba(99, 102, 241, 0.1);
           color: var(--primary-color);
@@ -866,7 +1070,11 @@
       left: 0;
       right: 0;
       height: 3px;
-      background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+      background: linear-gradient(
+        90deg,
+        var(--primary-color),
+        var(--primary-light)
+      );
       border-radius: var(--radius-xl) var(--radius-xl) 0 0;
     }
 
@@ -878,8 +1086,12 @@
 
     .ant-card-head {
       padding: var(--space-lg) var(--space-xl);
-      background: linear-gradient(135deg, rgba(99, 102, 241, 0.02), rgba(139, 92, 246, 0.02));
-      
+      background: linear-gradient(
+        135deg,
+        rgba(99, 102, 241, 0.02),
+        rgba(139, 92, 246, 0.02)
+      );
+
       .ant-card-head-title {
         font-size: 20px;
         font-weight: 700;
@@ -913,7 +1125,11 @@
           font-size: 20px;
           font-weight: 800;
           color: var(--primary-color);
-          background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+          background: linear-gradient(
+            135deg,
+            var(--primary-color),
+            var(--primary-light)
+          );
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
@@ -924,7 +1140,7 @@
         .ant-progress-bg {
           border-radius: var(--radius-sm);
         }
-        
+
         .ant-progress-outer {
           .ant-progress-inner {
             background-color: var(--bg-tertiary);
@@ -965,7 +1181,11 @@
       left: 0;
       right: 0;
       height: 3px;
-      background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+      background: linear-gradient(
+        90deg,
+        var(--primary-color),
+        var(--primary-light)
+      );
       border-radius: var(--radius-xl) var(--radius-xl) 0 0;
     }
 
@@ -977,8 +1197,12 @@
 
     .ant-card-head {
       padding: var(--space-lg) var(--space-xl);
-      background: linear-gradient(135deg, rgba(99, 102, 241, 0.02), rgba(139, 92, 246, 0.02));
-      
+      background: linear-gradient(
+        135deg,
+        rgba(99, 102, 241, 0.02),
+        rgba(139, 92, 246, 0.02)
+      );
+
       .ant-card-head-title {
         font-size: 20px;
         font-weight: 700;
@@ -1013,7 +1237,12 @@
           .number {
             font-size: 56px;
             font-weight: 900;
-            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--info-color) 100%);
+            background: linear-gradient(
+              135deg,
+              var(--primary-color) 0%,
+              var(--primary-light) 50%,
+              var(--info-color) 100%
+            );
             background-size: 200% 200%;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
@@ -1081,18 +1310,18 @@
   .data-dashboard-container {
     padding: var(--space-md);
   }
-  
+
   .dashboard-header {
     padding: var(--space-lg) var(--space-xl);
-    
+
     .dashboard-title {
       font-size: 28px;
     }
   }
-  
+
   .active-users-content {
     gap: var(--space-lg);
-    
+
     .active-users-visual {
       width: 200px;
       height: 200px;
@@ -1117,7 +1346,7 @@
       flex-direction: column;
       gap: var(--space-sm);
     }
-    
+
     .user-info {
       align-self: center;
     }
@@ -1128,13 +1357,13 @@
       .ant-card-body {
         padding: var(--space-lg);
       }
-      
+
       .ant-statistic-content {
         .ant-statistic-content-value {
           font-size: 28px;
         }
       }
-      
+
       .metric-icon {
         font-size: 24px;
       }
@@ -1160,16 +1389,16 @@
       height: 180px;
       align-self: center;
     }
-    
+
     .active-users-number {
       justify-content: center;
-      
+
       .number {
         font-size: 48px;
       }
     }
   }
-  
+
   .performance-row {
     .performance-card {
       .ant-card-body {
@@ -1183,21 +1412,21 @@
   .data-dashboard-container {
     padding: var(--space-xs);
   }
-  
+
   .dashboard-header {
     padding: var(--space-md);
-    
+
     .dashboard-title {
       font-size: 20px;
     }
   }
-  
+
   .metrics-row {
     .metric-card {
       .ant-card-body {
         padding: var(--space-md);
       }
-      
+
       .ant-statistic-content {
         .ant-statistic-content-value {
           font-size: 24px;
@@ -1205,18 +1434,18 @@
       }
     }
   }
-  
+
   .active-users-content {
     .active-users-visual {
       width: 150px;
       height: 150px;
     }
-    
+
     .active-users-number {
       .number {
         font-size: 40px;
       }
-      
+
       .unit {
         font-size: 16px;
       }
@@ -1229,11 +1458,15 @@
   .ant-spin {
     .ant-spin-dot {
       .ant-spin-dot-item {
-        background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+        background: linear-gradient(
+          135deg,
+          var(--primary-color),
+          var(--primary-light)
+        );
         border-radius: var(--radius-sm);
       }
     }
-    
+
     .ant-spin-text {
       color: var(--text-primary);
       font-weight: 600;
@@ -1253,7 +1486,11 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
+  background: linear-gradient(
+    135deg,
+    var(--primary-color),
+    var(--primary-light)
+  );
   border-radius: var(--radius-sm);
   transition: all var(--duration-normal) var(--ease-in-out);
 }
@@ -1277,7 +1514,7 @@
       }
     }
   }
-  
+
   // 添加数据更新时的闪烁效果
   &.animating {
     .metric-card {
@@ -1286,16 +1523,24 @@
       }
     }
   }
-  
+
   // 添加页面加载时的入场动画
   .dashboard-content {
     > * {
       animation: fadeInUp 0.8s var(--ease-out) both;
-      
-      &:nth-child(1) { animation-delay: 0.1s; }
-      &:nth-child(2) { animation-delay: 0.2s; }
-      &:nth-child(3) { animation-delay: 0.3s; }
-      &:nth-child(4) { animation-delay: 0.4s; }
+
+      &:nth-child(1) {
+        animation-delay: 0.1s;
+      }
+      &:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+      &:nth-child(3) {
+        animation-delay: 0.3s;
+      }
+      &:nth-child(4) {
+        animation-delay: 0.4s;
+      }
     }
   }
 }
@@ -1304,7 +1549,7 @@
 .ant-btn {
   position: relative;
   overflow: hidden;
-  
+
   &::before {
     content: '';
     position: absolute;
@@ -1312,10 +1557,15 @@
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.2),
+      transparent
+    );
     transition: left 0.5s;
   }
-  
+
   &:hover::before {
     left: 100%;
   }
@@ -1324,7 +1574,7 @@
 // 添加标签悬停效果
 .ant-tag {
   transition: all var(--duration-normal) var(--ease-in-out);
-  
+
   &:hover {
     transform: translateY(-2px) scale(1.05);
     box-shadow: var(--shadow-md);
@@ -1341,7 +1591,7 @@
 // 添加头像悬停效果
 .ant-avatar {
   transition: all var(--duration-normal) var(--ease-bounce);
-  
+
   &:hover {
     transform: scale(1.1) rotate(5deg);
     box-shadow: var(--shadow-lg);
@@ -1352,7 +1602,7 @@
 .ant-card {
   .ant-card-body {
     position: relative;
-    
+
     &::before {
       content: '';
       position: absolute;
@@ -1360,13 +1610,17 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: linear-gradient(135deg, rgba(99, 102, 241, 0.02), rgba(139, 92, 246, 0.02));
+      background: linear-gradient(
+        135deg,
+        rgba(99, 102, 241, 0.02),
+        rgba(139, 92, 246, 0.02)
+      );
       opacity: 0;
       transition: opacity var(--duration-normal) var(--ease-in-out);
       pointer-events: none;
     }
   }
-  
+
   &:hover .ant-card-body::before {
     opacity: 1;
   }
@@ -1399,11 +1653,15 @@
 }
 
 .gradient-text {
-  background: linear-gradient(135deg, var(--primary-color), var(--primary-light), var(--info-color));
+  background: linear-gradient(
+    135deg,
+    var(--primary-color),
+    var(--primary-light),
+    var(--info-color)
+  );
   background-size: 200% 200%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: textShine 3s ease infinite;
 }
-