chore: update style

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

@@ -1,6 +1,6 @@
 .dashboard-container {
     padding: 20px;
-    background-color: #f7f9fc;
+    background-color: #ffffff;
 }
 
 .stat-card {
@@ -31,29 +31,36 @@
 .chart-card {
     margin: 0 !important;
     height: 100%;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
+    border: none !important;
+    border-radius: 16px !important;
 }
 
 .chart-container {
     margin-top: 20px;
-    padding: 10px;
+    padding: 16px;
     background-color: white;
-    border-radius: 4px;
+    border-radius: 12px;
 }
 
 .ui.card > .content > .header {
-    color: #1a1a1a;
+    color: #2B3674;
     font-size: 1.2em;
     margin-bottom: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    font-weight: 600;
+    padding: 0 8px;
 }
 
 .stat-value {
-    color: #2185d0;
+    color: #4318FF;
     font-weight: bold;
     font-size: 1.1em;
+    background: rgba(67, 24, 255, 0.1);
+    padding: 4px 12px;
+    border-radius: 8px;
 }
 
 /* 优化图表响应式布局 */
@@ -63,7 +70,7 @@
     }
     
     .chart-container {
-        padding: 5px;
+        padding: 12px;
     }
     
     .charts-grid .column {

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

@@ -15,6 +15,31 @@ import {
 import axios from 'axios';
 import './Dashboard.css';
 
+// 在 Dashboard 组件内添加自定义配置
+const chartConfig = {
+  lineChart: {
+    style: {
+      background: '#fff',
+      borderRadius: '8px',
+    },
+    line: {
+      strokeWidth: 2,
+      dot: false,
+      activeDot: { r: 4 },
+    },
+    grid: {
+      vertical: false,
+      horizontal: true,
+      opacity: 0.1,
+    },
+  },
+  colors: {
+    requests: '#4318FF',
+    quota: '#00B5D8',
+    tokens: '#6C63FF',
+  },
+};
+
 const Dashboard = () => {
   const [data, setData] = useState([]);
   const [summaryData, setSummaryData] = useState({
@@ -164,15 +189,34 @@ const Dashboard = () => {
               <div className='chart-container'>
                 <ResponsiveContainer width='100%' height={120}>
                   <LineChart data={timeSeriesData}>
-                    <CartesianGrid strokeDasharray='3 3' />
+                    <CartesianGrid
-                    <XAxis dataKey='date' />
+                      strokeDasharray='3 3'
-                    <YAxis />
+                      vertical={chartConfig.lineChart.grid.vertical}
-                    <Tooltip />
+                      horizontal={chartConfig.lineChart.grid.horizontal}
+                      opacity={chartConfig.lineChart.grid.opacity}
+                    />
+                    <XAxis
+                      dataKey='date'
+                      axisLine={false}
+                      tickLine={false}
+                      tick={{ fontSize: 12, fill: '#A3AED0' }}
+                    />
+                    <YAxis hide={true} />
+                    <Tooltip
+                      contentStyle={{
+                        background: '#fff',
+                        border: 'none',
+                        borderRadius: '4px',
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                      }}
+                    />
                     <Line
                       type='monotone'
                       dataKey='requests'
-                      stroke='#2185d0'
+                      stroke={chartConfig.colors.requests}
-                      dot={false}
+                      strokeWidth={chartConfig.lineChart.line.strokeWidth}
+                      dot={chartConfig.lineChart.line.dot}
+                      activeDot={chartConfig.lineChart.line.activeDot}
                     />
                   </LineChart>
                 </ResponsiveContainer>
@@ -193,15 +237,34 @@ const Dashboard = () => {
               <div className='chart-container'>
                 <ResponsiveContainer width='100%' height={120}>
                   <LineChart data={timeSeriesData}>
-                    <CartesianGrid strokeDasharray='3 3' />
+                    <CartesianGrid
-                    <XAxis dataKey='date' />
+                      strokeDasharray='3 3'
-                    <YAxis />
+                      vertical={chartConfig.lineChart.grid.vertical}
-                    <Tooltip />
+                      horizontal={chartConfig.lineChart.grid.horizontal}
+                      opacity={chartConfig.lineChart.grid.opacity}
+                    />
+                    <XAxis
+                      dataKey='date'
+                      axisLine={false}
+                      tickLine={false}
+                      tick={{ fontSize: 12, fill: '#A3AED0' }}
+                    />
+                    <YAxis hide={true} />
+                    <Tooltip
+                      contentStyle={{
+                        background: '#fff',
+                        border: 'none',
+                        borderRadius: '4px',
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                      }}
+                    />
                     <Line
                       type='monotone'
                       dataKey='quota'
-                      stroke='#21ba45'
+                      stroke={chartConfig.colors.quota}
-                      dot={false}
+                      strokeWidth={chartConfig.lineChart.line.strokeWidth}
+                      dot={chartConfig.lineChart.line.dot}
+                      activeDot={chartConfig.lineChart.line.activeDot}
                     />
                   </LineChart>
                 </ResponsiveContainer>
@@ -220,15 +283,34 @@ const Dashboard = () => {
               <div className='chart-container'>
                 <ResponsiveContainer width='100%' height={120}>
                   <LineChart data={timeSeriesData}>
-                    <CartesianGrid strokeDasharray='3 3' />
+                    <CartesianGrid
-                    <XAxis dataKey='date' />
+                      strokeDasharray='3 3'
-                    <YAxis />
+                      vertical={chartConfig.lineChart.grid.vertical}
-                    <Tooltip />
+                      horizontal={chartConfig.lineChart.grid.horizontal}
+                      opacity={chartConfig.lineChart.grid.opacity}
+                    />
+                    <XAxis
+                      dataKey='date'
+                      axisLine={false}
+                      tickLine={false}
+                      tick={{ fontSize: 12, fill: '#A3AED0' }}
+                    />
+                    <YAxis hide={true} />
+                    <Tooltip
+                      contentStyle={{
+                        background: '#fff',
+                        border: 'none',
+                        borderRadius: '4px',
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                      }}
+                    />
                     <Line
                       type='monotone'
                       dataKey='tokens'
-                      stroke='#f2711c'
+                      stroke={chartConfig.colors.tokens}
-                      dot={false}
+                      strokeWidth={chartConfig.lineChart.line.strokeWidth}
+                      dot={chartConfig.lineChart.line.dot}
+                      activeDot={chartConfig.lineChart.line.activeDot}
                     />
                   </LineChart>
                 </ResponsiveContainer>
@@ -245,11 +327,35 @@ const Dashboard = () => {
           <div className='chart-container'>
             <ResponsiveContainer width='100%' height={300}>
               <BarChart data={modelData}>
-                <CartesianGrid strokeDasharray='3 3' />
+                <CartesianGrid
-                <XAxis dataKey='date' />
+                  strokeDasharray='3 3'
-                <YAxis />
+                  vertical={false}
-                <Tooltip />
+                  opacity={0.1}
-                <Legend />
+                />
+                <XAxis
+                  dataKey='date'
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 12, fill: '#A3AED0' }}
+                />
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 12, fill: '#A3AED0' }}
+                />
+                <Tooltip
+                  contentStyle={{
+                    background: '#fff',
+                    border: 'none',
+                    borderRadius: '4px',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                  }}
+                />
+                <Legend
+                  wrapperStyle={{
+                    paddingTop: '20px',
+                  }}
+                />
                 {models.map((model, index) => (
                   <Bar
                     key={model}
@@ -257,6 +363,7 @@ const Dashboard = () => {
                     stackId='a'
                     fill={getRandomColor(index)}
                     name={model}
+                    radius={[4, 4, 0, 0]}
                   />
                 ))}
               </BarChart>