fix: 优化homepage

src/pages/HomePage/index.tsx

@@ -1,22 +1,42 @@
 import { PageContainer, ProCard } from '@ant-design/pro-components';
-import { Card, Col, Row, Statistic } from 'antd';
+import { Card, Col, Row, Statistic, Space, Tag, Progress } from 'antd';
 import React, { useEffect, useState } from 'react';
 import ReactECharts from 'echarts-for-react';
-import { useModel } from '@@/exports';
+import {
+  LineChartOutlined,
+  BarChartOutlined,
+  PieChartOutlined,
+  DotChartOutlined,
+  UserOutlined,
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  TeamOutlined,
+} from '@ant-design/icons';
 
 const HomePage: React.FC = () => {
-  const { initialState } = useModel('@@initialState');
-  const { currentUser } = initialState ?? {};
   const [loading, setLoading] = useState<boolean>(true);
 
-  // TODO : 获取统计数据
+  // 统计数据
   const [statisticsData] = useState({
     totalCharts: 126,
     successRate: 95,
     todayGenerated: 28,
     totalUsers: 1580,
+    activeUsers: 320,
+    avgGenerationTime: 2.5,
   });
 
+  // 图表类型分布 - 用于显示图标的数据
+  const chartTypes = [
+    { value: 35, name: '折线图', icon: <LineChartOutlined /> },
+    { value: 30, name: '柱状图', icon: <BarChartOutlined /> },
+    { value: 20, name: '饼图', icon: <PieChartOutlined /> },
+    { value: 15, name: '散点图', icon: <DotChartOutlined /> },
+  ];
+  
+  // 为ECharts准备的数据，不包含React组件
+  const chartTypesForEcharts = chartTypes.map(({ value, name }) => ({ value, name }));
+
   const chartOptions = {
     title: {
       text: '近期图表生成趋势',
@@ -24,13 +44,35 @@ const HomePage: React.FC = () => {
     },
     tooltip: {
       trigger: 'axis',
+      formatter: '{b}: {c} 个图表',
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
     },
     xAxis: {
       type: 'category',
       data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+      axisLine: {
+        lineStyle: {
+          color: '#d9d9d9',
+        },
+      },
     },
     yAxis: {
       type: 'value',
+      axisLine: {
+        lineStyle: {
+          color: '#d9d9d9',
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f0f0f0',
+        },
+      },
     },
     series: [
       {
@@ -41,6 +83,12 @@ const HomePage: React.FC = () => {
         areaStyle: {
           opacity: 0.1,
         },
+        itemStyle: {
+          color: '#1890ff',
+        },
+        lineStyle: {
+          width: 3,
+        },
       },
     ],
   };
@@ -48,29 +96,42 @@ const HomePage: React.FC = () => {
   const pieOptions = {
     tooltip: {
       trigger: 'item',
+      formatter: '{b}: {c} ({d}%)',
     },
     legend: {
       orient: 'vertical',
       left: 'left',
+      textStyle: {
+        color: '#666',
+      },
     },
     series: [
       {
         name: '图表类型分布',
         type: 'pie',
-        radius: '50%',
+        radius: ['40%', '70%'],
-        data: [
+        avoidLabelOverlap: false,
-          { value: 35, name: '折线图' },
+        itemStyle: {
-          { value: 30, name: '柱状图' },
+          borderRadius: 10,
-          { value: 20, name: '饼图' },
+          borderColor: '#fff',
-          { value: 15, name: '散点图' },
+          borderWidth: 2,
-        ],
+        },
+        label: {
+          show: false,
+          position: 'center',
+        },
         emphasis: {
-          itemStyle: {
+          label: {
-            shadowBlur: 10,
+            show: true,
-            shadowOffsetX: 0,
+            fontSize: '18',
-            shadowColor: 'rgba(0, 0, 0, 0.5)',
+            fontWeight: 'bold',
           },
         },
+        labelLine: {
+          show: false,
+        },
+        // 这里使用过滤后的数据，不包含React组件
+        data: chartTypesForEcharts,
       },
     ],
   };
@@ -84,46 +145,162 @@ const HomePage: React.FC = () => {
 
   return (
     <PageContainer>
-      <Row gutter={16}>
+      <Row gutter={[16, 16]}>
         <Col span={6}>
-          <ProCard loading={loading}>
+          <ProCard loading={loading} bordered>
-            <Statistic title="总图表数" value={statisticsData.totalCharts} />
-          </ProCard>
-        </Col>
-        <Col span={6}>
-          <ProCard loading={loading}>
             <Statistic
-              title="生成成功率"
+              title={
-              value={statisticsData.successRate}
+                <Space>
-              suffix="%"
+                  <LineChartOutlined />
-              precision={2}
+                  <span>总图表数</span>
+                </Space>
+              }
+              value={statisticsData.totalCharts}
+              valueStyle={{ color: '#1890ff' }}
+            />
+            <Progress
+              percent={75}
+              size="small"
+              status="active"
+              showInfo={false}
+              style={{ marginTop: 8 }}
             />
           </ProCard>
         </Col>
         <Col span={6}>
-          <ProCard loading={loading}>
+          <ProCard loading={loading} bordered>
-            <Statistic title="今日生成" value={statisticsData.todayGenerated} />
+            <Statistic
+              title={
+                <Space>
+                  <CheckCircleOutlined />
+                  <span>生成成功率</span>
+                </Space>
+              }
+              value={statisticsData.successRate}
+              suffix="%"
+              precision={2}
+              valueStyle={{ color: '#52c41a' }}
+            />
+            <Progress
+              percent={statisticsData.successRate}
+              size="small"
+              status="active"
+              showInfo={false}
+              style={{ marginTop: 8 }}
+            />
           </ProCard>
         </Col>
         <Col span={6}>
-          <ProCard loading={loading}>
+          <ProCard loading={loading} bordered>
-            <Statistic title="总用户数" value={statisticsData.totalUsers} />
+            <Statistic
+              title={
+                <Space>
+                  <ClockCircleOutlined />
+                  <span>今日生成</span>
+                </Space>
+              }
+              value={statisticsData.todayGenerated}
+              valueStyle={{ color: '#faad14' }}
+            />
+            <Progress
+              percent={60}
+              size="small"
+              status="active"
+              showInfo={false}
+              style={{ marginTop: 8 }}
+            />
+          </ProCard>
+        </Col>
+        <Col span={6}>
+          <ProCard loading={loading} bordered>
+            <Statistic
+              title={
+                <Space>
+                  <TeamOutlined />
+                  <span>总用户数</span>
+                </Space>
+              }
+              value={statisticsData.totalUsers}
+              valueStyle={{ color: '#722ed1' }}
+            />
+            <Progress
+              percent={80}
+              size="small"
+              status="active"
+              showInfo={false}
+              style={{ marginTop: 8 }}
+            />
           </ProCard>
         </Col>
       </Row>
 
-      <Row gutter={16} style={{ marginTop: '16px' }}>
+      <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
         <Col span={16}>
-          <Card loading={loading} title="图表生成趋势">
+          <Card
+            loading={loading}
+            title="图表生成趋势"
+            extra={
+              <Space>
+                <Tag color="blue">周环比 +12%</Tag>
+                <Tag color="green">日环比 +5%</Tag>
+              </Space>
+            }
+          >
             <ReactECharts option={chartOptions} style={{ height: '350px' }} />
           </Card>
         </Col>
         <Col span={8}>
-          <Card loading={loading} title="图表类型分布">
+          <Card
+            loading={loading}
+            title="图表类型分布"
+            extra={
+              <Space>
+                <Tag color="blue">折线图</Tag>
+                <Tag color="green">柱状图</Tag>
+                <Tag color="orange">饼图</Tag>
+                <Tag color="purple">散点图</Tag>
+              </Space>
+            }
+          >
             <ReactECharts option={pieOptions} style={{ height: '350px' }} />
           </Card>
         </Col>
       </Row>
+
+      <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
+        <Col span={12}>
+          <Card loading={loading} title="活跃用户">
+            <Space direction="vertical" style={{ width: '100%' }}>
+              <Statistic
+                title="当前活跃用户"
+                value={statisticsData.activeUsers}
+                prefix={<UserOutlined />}
+              />
+              <Progress
+                percent={Math.round((statisticsData.activeUsers / statisticsData.totalUsers) * 100)}
+                status="active"
+              />
+            </Space>
+          </Card>
+        </Col>
+        <Col span={12}>
+          <Card loading={loading} title="性能指标">
+            <Space direction="vertical" style={{ width: '100%' }}>
+              <Statistic
+                title="平均生成时间"
+                value={statisticsData.avgGenerationTime}
+                suffix="秒"
+                precision={1}
+              />
+              <Progress
+                percent={Math.round((2.5 / 5) * 100)}
+                status="active"
+                format={(percent) => `${percent}% 优化空间`}
+              />
+            </Space>
+          </Card>
+        </Col>
+      </Row>
     </PageContainer>
   );
 };