chore: update style

web/default/src/pages/Dashboard/Dashboard.css

@@ -1,6 +1,7 @@
 .dashboard-container {
-    padding: 20px;
+    padding: 20px 20px 40px;
     background-color: #ffffff;
+    margin-top: -15px; /* 减小与导航栏的间距 */
 }
 
 .stat-card {
@@ -20,7 +21,6 @@
 }
 
 .charts-grid {
-    margin-top: 1rem !important;
     margin-bottom: 1rem !important;
 }
 
@@ -29,15 +29,15 @@
 }
 
 .chart-card {
-    margin: 0 !important;
     height: 100%;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
     border: none !important;
     border-radius: 16px !important;
+    padding-top: 8px!important;
 }
 
 .chart-container {
-    margin-top: 20px;
+    margin-top: 2px;
     padding: 16px;
     background-color: white;
     border-radius: 12px;
@@ -52,6 +52,7 @@
     align-items: center;
     font-weight: 600;
     padding: 0 8px;
+    gap: 12px; /* 增加标题和数值之间的间距 */
 }
 
 .stat-value {
@@ -61,6 +62,8 @@
     background: rgba(67, 24, 255, 0.1);
     padding: 4px 12px;
     border-radius: 8px;
+    white-space: nowrap; /* 防止数值换行 */
+    margin-left: 16px;
 }
 
 /* 优化图表响应式布局 */

web/default/src/pages/Dashboard/index.js

@@ -38,6 +38,18 @@ const chartConfig = {
     quota: '#00B5D8',
     tokens: '#6C63FF',
   },
+  barColors: [
+    '#4318FF', // 深紫色
+    '#00B5D8', // 青色
+    '#6C63FF', // 紫色
+    '#05CD99', // 绿色
+    '#FFB547', // 橙色
+    '#FF5E7D', // 粉色
+    '#41B883', // 翠绿
+    '#7983FF', // 淡紫
+    '#FF8F6B', // 珊瑚色
+    '#49BEFF', // 天蓝
+  ],
 };
 
 const Dashboard = () => {
@@ -160,19 +172,7 @@ const Dashboard = () => {
 
   // 生成随机颜色
   const getRandomColor = (index) => {
-    const colors = [
+    return chartConfig.barColors[index % chartConfig.barColors.length];
-      '#1f77b4',
-      '#ff7f0e',
-      '#2ca02c',
-      '#d62728',
-      '#9467bd',
-      '#8c564b',
-      '#e377c2',
-      '#7f7f7f',
-      '#bcbd22',
-      '#17becf',
-    ];
-    return colors[index % colors.length];
   };
 
   return (