From 4d9bcffa8abb124f4bf9b60b0118dbd7ac2081aa Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Tue, 14 Oct 2025 11:01:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B1=A1=E6=9F=93=E6=BA=90=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PollutionSourceManagement.js   | 470 +++++++++++++++++-
 .../components/PollutionSourceManagement.less | 367 +++++++++++++-
 2 files changed, 807 insertions(+), 30 deletions(-)

diff --git a/src/pages/business_envInformation/components/PollutionSourceManagement.js b/src/pages/business_envInformation/components/PollutionSourceManagement.js
index f7fd339..715cd66 100644
--- a/src/pages/business_envInformation/components/PollutionSourceManagement.js
+++ b/src/pages/business_envInformation/components/PollutionSourceManagement.js
@@ -1,10 +1,474 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import { Select, Button, Table, Input, Space, Tooltip, message } from 'antd';
+import { SearchOutlined, PlusOutlined, FileTextOutlined, DeleteOutlined, EditOutlined, MoreOutlined, RobotOutlined } from '@ant-design/icons';
+import ReactECharts from 'echarts-for-react';
+import StandardTable from '@/components/StandardTable';
 import styles from './PollutionSourceManagement.less';
 
+const { Option } = Select;
+
 const PollutionSourceManagement = () => {
+    const [loading, setLoading] = useState(false);
+    const [tableData, setTableData] = useState({
+        list: [],
+        pagination: {
+            current: 1,
+            pageSize: 5,
+            total: 85
+        }
+    });
+
+    // 污染物排放统计图表配置
+    const pollutantEmissionOption = {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        series: [{
+            name: '污染物排放',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            center: ['50%', '50%'],
+            data: [
+                { value: 62, name: '超标污染物数量', itemStyle: { color: '#ff6b6b' } },
+                { value: 38, name: '正常污染物数量', itemStyle: { color: '#4ecdc4' } }
+            ],
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+        }]
+    };
+
+    const pollutantTypeOption = {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        series: [{
+            name: '污染物种类',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            center: ['50%', '50%'],
+            data: [
+                { value: 25, name: '超标污染物种类', itemStyle: { color: '#a8e6cf' } },
+                { value: 75, name: '正常污染物种类', itemStyle: { color: '#ffd3a5' } }
+            ],
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+        }]
+    };
+
+    // 超标排放统计图表配置
+    const exceedanceOption = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            },
+            formatter: function(params) {
+                const data = params[0];
+                const exceedanceData = [
+                    { name: '污染物1', status: '轻微超标', exceedance: '15%' },
+                    { name: '污染物2', status: '严重超标', exceedance: '66%' },
+                    { name: '污染物3', status: '轻微超标', exceedance: '8%' },
+                    { name: '污染物4', status: '正常', exceedance: '0%' },
+                    { name: '污染物5', status: '轻微超标', exceedance: '12%' }
+                ];
+                const item = exceedanceData[data.dataIndex];
+                return `
+                    <div style="padding: 10px; background: rgba(0,0,0,0.8); color: white; border-radius: 8px;">
+                        <div style="font-weight: 600; margin-bottom: 5px;">${data.name}</div>
+                        <div style="color: #ff6b6b; margin-bottom: 3px;">${item.status}</div>
+                        <div style="color: #ffd93d; margin-bottom: 3px;">超标 ${item.exceedance}</div>
+                        <div style="color: #a8e6cf; font-size: 11px;">大气环境特征污染物</div>
+                    </div>
+                `;
+            }
+        },
+        grid: {
+            left: '20%',
+            right: '10%',
+            top: '10%',
+            bottom: '10%'
+        },
+        xAxis: {
+            type: 'value',
+            max: 100,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#666'
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#f0f0f0',
+                    type: 'dashed'
+                }
+            }
+        },
+        yAxis: {
+            type: 'category',
+            data: ['污染物1', '污染物2', '污染物3', '污染物4', '污染物5'],
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#666',
+                fontSize: 12
+            }
+        },
+        series: [{
+            type: 'bar',
+            data: [45, 66, 32, 28, 38],
+            itemStyle: {
+                color: '#ff6b6b',
+                borderRadius: [0, 4, 4, 0]
+            },
+            barWidth: '60%'
+        }]
+    };
+
+    // 表格列定义
+    const columns = [
+        {
+            title: '生产工艺设备',
+            dataIndex: 'equipment',
+            key: 'equipment',
+            width: 120,
+        },
+        {
+            title: '原材料产品',
+            dataIndex: 'material',
+            key: 'material',
+            width: 150,
+        },
+        {
+            title: '污染物排放处理设施',
+            dataIndex: 'facility',
+            key: 'facility',
+            width: 180,
+        },
+        {
+            title: '污染物排放种类',
+            dataIndex: 'type',
+            key: 'type',
+            width: 150,
+            render: (text) => (
+                <Space>
+                    {text}
+                    <SearchOutlined style={{ color: '#1890ff', cursor: 'pointer' }} />
+                </Space>
+            ),
+        },
+        {
+            title: '排放数量',
+            dataIndex: 'quantity',
+            key: 'quantity',
+            width: 100,
+        },
+        {
+            title: '数量单位',
+            dataIndex: 'unit',
+            key: 'unit',
+            width: 100,
+        },
+        {
+            title: '排放方式',
+            dataIndex: 'method',
+            key: 'method',
+            width: 100,
+        },
+        {
+            title: '趋向',
+            dataIndex: 'trend',
+            key: 'trend',
+            width: 200,
+            ellipsis: true,
+        },
+        {
+            title: '操作',
+            key: 'action',
+            width: 80,
+            render: (_, record) => (
+                <Space size="middle">
+                    <Tooltip title="删除">
+                        <DeleteOutlined 
+                            style={{ color: '#ff4d4f', cursor: 'pointer' }} 
+                            onClick={() => handleDelete(record)}
+                        />
+                    </Tooltip>
+                </Space>
+            ),
+        },
+    ];
+
+    // 模拟表格数据
+    const mockTableData = [
+        {
+            key: '1',
+            equipment: '比亚迪',
+            material: '丁硼乳膏(雅皓)',
+            facility: '净水设备234',
+            type: '种类1',
+            quantity: 47,
+            unit: 'm³',
+            method: '方式1',
+            trend: '近3年下达中央预算内投'
+        },
+        {
+            key: '2',
+            equipment: '荣威',
+            material: '东方活血膏(明仁)',
+            facility: '净水设备234',
+            type: '种类1',
+            quantity: 34,
+            unit: 'm³',
+            method: '方式1',
+            trend: '近3年下达中央预算内投'
+        },
+        {
+            key: '3',
+            equipment: '现代',
+            material: '骨友灵搽剂(太极)',
+            facility: '净水设备234',
+            type: '种类1',
+            quantity: 45,
+            unit: 'm³',
+            method: '方式1',
+            trend: '刘某及同伴三人前往该射'
+        },
+        {
+            key: '4',
+            equipment: '日产',
+            material: '对乙酰氨基酚栓',
+            facility: '净水设备234',
+            type: '种类1',
+            quantity: 55,
+            unit: 'm³',
+            method: '方式1',
+            trend: '一到假期,大量"xx暑假'
+        },
+        {
+            key: '5',
+            equipment: '北汽',
+            material: '对乙酰氨基酚片(必理通)',
+            facility: '净水设备234',
+            type: '种类1',
+            quantity: 22,
+            unit: 'm³',
+            method: '方式1',
+            trend: '近日,陕西延安培文实验'
+        }
+    ];
+
+    useEffect(() => {
+        setTableData({
+            list: mockTableData,
+            pagination: {
+                current: 6,
+                pageSize: 5,
+                total: 85
+            }
+        });
+    }, []);
+
+    // 处理删除操作
+    const handleDelete = (record) => {
+        message.success(`删除 ${record.equipment} 成功`);
+    };
+
+    // 处理新增操作
+    const handleAdd = () => {
+        message.info('新增功能开发中');
+    };
+
+    // 处理生成报表操作
+    const handleGenerateReport = () => {
+        message.info('生成报表功能开发中');
+    };
+
+    // 处理表格变化
+    const handleTableChange = (pagination) => {
+        setTableData(prev => ({
+            ...prev,
+            pagination: {
+                ...prev.pagination,
+                current: pagination.current,
+                pageSize: pagination.pageSize
+            }
+        }));
+    };
+
+
     return (
-        <div className={styles.container}>
-          开发中
+        <div className={styles.pollutionDashboard}>
+            {/* 顶部统计区域 */}
+            <div className={styles.statsSection}>
+                {/* 污染物排放统计 */}
+                <div className={styles.statsCard}>
+                    <div className={styles.cardTitle}>
+                        <span>污染物排放统计</span>
+                        <div className={styles.cardHeader}>
+                            <Select defaultValue="今日" className={styles.timeFilter}>
+                                <Option value="今日">今日</Option>
+                                <Option value="本周">本周</Option>
+                                <Option value="本月">本月</Option>
+                            </Select>
+                            <Select defaultValue="所有名录" className={styles.categoryFilter}>
+                                <Option value="所有名录">所有名录</Option>
+                                <Option value="大气环境">大气环境</Option>
+                                <Option value="水环境">水环境</Option>
+                            </Select>
+                        </div>
+                    </div>
+                    <div className={styles.chartsContainer}>
+                        <div className={styles.pieChartContainer}>
+                            <div className={styles.chartTitle}>超标污染物数量</div>
+                            <ReactECharts 
+                                option={pollutantEmissionOption} 
+                                style={{ height: '120px', width: '100%' }}
+                                opts={{ renderer: 'canvas' }}
+                            />
+                            <div className={styles.chartValue}>62%</div>
+                        </div>
+                        <div className={styles.pieChartContainer}>
+                            <div className={styles.chartTitle}>超标污染物种类</div>
+                            <ReactECharts 
+                                option={pollutantTypeOption} 
+                                style={{ height: '120px', width: '100%' }}
+                                opts={{ renderer: 'canvas' }}
+                            />
+                            <div className={styles.chartValue}>25%</div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* 超标排放统计 */}
+                <div className={styles.statsCard}>
+                    <div className={styles.cardTitle}>超标排放统计</div>
+                    <div className={styles.cardHeader}>
+                        <Select defaultValue="今日" className={styles.timeFilter}>
+                            <Option value="今日">今日</Option>
+                            <Option value="本周">本周</Option>
+                            <Option value="本月">本月</Option>
+                        </Select>
+                        <Select defaultValue="所有名录" className={styles.categoryFilter}>
+                            <Option value="所有名录">所有名录</Option>
+                            <Option value="大气环境">大气环境</Option>
+                            <Option value="水环境">水环境</Option>
+                        </Select>
+                    </div>
+                    <div className={styles.barChartContainer}>
+                        <ReactECharts 
+                            option={exceedanceOption} 
+                            style={{ height: '100px', width: '100%' }}
+                            opts={{ renderer: 'canvas' }}
+                        />
+                    </div>
+                </div>
+
+                {/* 环境分类卡片 */}
+                <div className={styles.environmentalCategories}>
+                    <div className={styles.categoryCard}>
+                        <div className={styles.categoryContent}>
+                            <div className={styles.categoryInfo}>
+                                <div className={styles.categoryTitle}>大气环境</div>
+                                <div className={styles.categorySubtitle}>特征污染物名录库</div>
+                            </div>
+                            <div className={styles.categoryIcon}>
+                                <div className={styles.factoryIcon}>🏭</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={styles.categoryCard}>
+                        <div className={styles.categoryContent}>
+                            <div className={styles.categoryInfo}>
+                                <div className={styles.categoryTitle}>水环境</div>
+                                <div className={styles.categorySubtitle}>特征污染物名录库</div>
+                            </div>
+                            <div className={styles.categoryIcon}>
+                                <div className={styles.waterIcon}>💧</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={styles.categoryCard}>
+                        <div className={styles.categoryContent}>
+                            <div className={styles.categoryInfo}>
+                                <div className={styles.categoryTitle}>土壤及地下水</div>
+                                <div className={styles.categorySubtitle}>特征污染物名录库</div>
+                            </div>
+                            <div className={styles.categoryIcon}>
+                                <div className={styles.soilIcon}>🌱</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* 污染源管理表格区域 */}
+            <div className={styles.tableCard}>
+                <div className={styles.cardTitle}>污染源管理</div>
+                <div className={styles.tableHeader}>
+                    <div className={styles.searchSection}>
+                        <Input
+                            placeholder="搜索污染源..."
+                            prefix={<SearchOutlined />}
+                            className={styles.searchInput}
+                        />
+                        <Button icon={<RobotOutlined />} className={styles.aiButton}>
+                            AI
+                        </Button>
+                        <Button icon={<EditOutlined />} className={styles.editButton}>
+                            编辑
+                        </Button>
+                        <Button icon={<MoreOutlined />} className={styles.moreButton}>
+                            ...
+                        </Button>
+                    </div>
+                    <div className={styles.actionButtons}>
+                        <Button 
+                            type="primary" 
+                            icon={<PlusOutlined />} 
+                            onClick={handleAdd}
+                            className={styles.addButton}
+                        >
+                            新增
+                        </Button>
+                        <Button 
+                            icon={<FileTextOutlined />} 
+                            onClick={handleGenerateReport}
+                            className={styles.reportButton}
+                        >
+                            生成报表
+                        </Button>
+                    </div>
+                </div>
+                
+                <StandardTable
+                    columns={columns}
+                    data={tableData}
+                    onChange={handleTableChange}
+                    rowKey="key"
+                    size="small"
+                    scroll={{ x: 1200 }}
+                />
+            </div>
         </div>
     );
 };
diff --git a/src/pages/business_envInformation/components/PollutionSourceManagement.less b/src/pages/business_envInformation/components/PollutionSourceManagement.less
index 6d0fee9..20906d3 100644
--- a/src/pages/business_envInformation/components/PollutionSourceManagement.less
+++ b/src/pages/business_envInformation/components/PollutionSourceManagement.less
@@ -1,41 +1,354 @@
-.container {
+.pollutionDashboard {
     width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #fff;
-    border-radius: 4px;
-    padding: 20px;
-
-    .developingBox {
+    min-height: 75vh;
+    // background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    padding: 15px;
+    box-sizing: border-box;
+
+    // 顶部统计区域
+    .statsSection {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 15px;
+        margin-bottom: 15px;
+        height: 20%;
+
+        // 统计卡片通用样式
+        .statsCard {
+            background: linear-gradient(180deg, #E2FFF5 0%, rgba(255, 255, 255, 0.6) 51.44%),
+                        linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
+            border-radius: 2px;
+            padding: 10px 20px;
+
+            .cardTitle {
+                background: transparent;
+                color: #000000;
+                font-weight: 500;
+                font-size: 16px;
+                padding: 0;
+                margin: 0 0 15px  0;
+                border: none;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+        }
+
+        // 卡片头部筛选器
+        .cardHeader {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 0;
+
+            .timeFilter,
+            .categoryFilter {
+                flex: 1;
+                min-width: 80px;
+
+                :global(.ant-select-selector) {
+                    border-radius: 8px;
+                    border: 1px solid #d9d9d9;
+                    background: transparent;
+                    transition: all 0.3s ease;
+                }
+            }
+        }
+
+        // 图表容器
+        .chartsContainer {
+            display: flex;
+            gap: 20px;
+            justify-content: space-between;
+            background: transparent;
+
+            .pieChartContainer {
+                flex: 1;
+                text-align: center;
+                position: relative;
+                background: transparent;
+
+                .chartTitle {
+                    font-size: 14px;
+                    color: #666;
+                    margin-bottom: 10px;
+                    font-weight: 500;
+                    background: transparent;
+                }
+
+                .chartValue {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    font-size: 18px;
+                    font-weight: bold;
+                    color: #333;
+                    z-index: 10;
+                    background: transparent;
+                }
+            }
+        }
+
+        // 条形图容器
+        .barChartContainer {
+            // height: 200px;
+            margin-top: 10px;
+        }
+
+        // 环境分类卡片区域
+        .environmentalCategories {
         display: flex;
         flex-direction: column;
+            gap: 15px;
+
+            .categoryCard {
+                background: rgba(255, 255, 255, 0.95);
+                border-radius: 12px;
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                backdrop-filter: blur(10px);
+                transition: all 0.3s ease;
+                cursor: pointer;
+                padding: 15px;
+
+                .categoryContent {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .categoryInfo {
+                        flex: 1;
+
+                        .categoryTitle {
+                            font-size: 16px;
+                            font-weight: 600;
+                            color: #333;
+                            margin-bottom: 5px;
+                        }
+
+                        .categorySubtitle {
+                            font-size: 12px;
+                            color: #666;
+                        }
+                    }
+
+                    .categoryIcon {
+                        width: 40px;
+                        height: 40px;
+                        display: flex;
         align-items: center;
         justify-content: center;
-        padding: 60px 80px;
-        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+                        border-radius: 50%;
+                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+                        .factoryIcon,
+                        .waterIcon,
+                        .soilIcon {
+                            font-size: 20px;
+                            filter: grayscale(0);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // 表格卡片
+    .tableCard {
+        background: rgba(255, 255, 255, 0.95);
         border-radius: 12px;
-        box-shadow: 0 10px 30px rgba(240, 147, 251, 0.3);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        backdrop-filter: blur(10px);
+        padding: 20px;
 
-        .developingText {
-            font-size: 32px;
+        .cardTitle {
+            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+            color: white;
             font-weight: 600;
-            color: #ffffff;
-            letter-spacing: 4px;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-            animation: pulse 2s ease-in-out infinite;
+            font-size: 16px;
+            padding: 12px 16px;
+            margin: -20px -20px 20px -20px;
+            border-radius: 12px 12px 0 0;
+            border-bottom: 2px solid #e8f4fd;
         }
     }
-}
 
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
-        transform: scale(1);
+    // 表格头部
+    .tableHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+        flex-wrap: wrap;
+        gap: 15px;
+
+        .searchSection {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+
+            .searchInput {
+                width: 200px;
+                border-radius: 8px;
+                border: 1px solid #d9d9d9;
+                background: rgba(255, 255, 255, 0.9);
+                transition: all 0.3s ease;
+            }
+
+            .aiButton,
+            .editButton,
+            .moreButton {
+                border-radius: 8px;
+                border: 1px solid #d9d9d9;
+                background: rgba(255, 255, 255, 0.9);
+                transition: all 0.3s ease;
+            }
+        }
+
+        .actionButtons {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+
+            .addButton {
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                border: none;
+                border-radius: 8px;
+                color: white;
+                font-weight: 500;
+                transition: all 0.3s ease;
+            }
+
+            .reportButton {
+                border-radius: 8px;
+                border: 1px solid #d9d9d9;
+                background: rgba(255, 255, 255, 0.9);
+                transition: all 0.3s ease;
+            }
+        }
     }
-    50% {
-        opacity: 0.8;
-        transform: scale(1.05);
+
+    // 自定义Tooltip样式
+    .customTooltip {
+        background: rgba(0, 0, 0, 0.8);
+        border-radius: 8px;
+        padding: 10px;
+        color: white;
+        font-size: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+
+        .tooltipLabel {
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: #fff;
+        }
+
+        .tooltipStatus {
+            color: #ff6b6b;
+            margin-bottom: 3px;
+        }
+
+        .tooltipExceedance {
+            color: #ffd93d;
+            margin-bottom: 3px;
+        }
+
+        .tooltipType {
+            color: #a8e6cf;
+            font-size: 11px;
+        }
+    }
+
+    // 响应式设计
+    @media (max-width: 1200px) {
+        .statsSection {
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: auto auto;
+
+            .environmentalCategories {
+                grid-column: 1 / -1;
+                flex-direction: row;
+                gap: 15px;
+
+                .categoryCard {
+                    flex: 1;
+                }
+            }
+        }
+    }
+
+    @media (max-width: 768px) {
+        padding: 10px;
+
+        .statsSection {
+            grid-template-columns: 1fr;
+            gap: 15px;
+
+            .environmentalCategories {
+                flex-direction: column;
+            }
+        }
+
+        .tableHeader {
+            flex-direction: column;
+            align-items: stretch;
+
+            .searchSection {
+                justify-content: center;
+            }
+
+            .actionButtons {
+                justify-content: center;
+            }
+        }
+    }
+
+    // 表格样式优化
+    :global(.ant-table) {
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+        :global(.ant-table-thead > tr > th) {
+            background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
+            border-bottom: 2px solid #dee2e6;
+            font-weight: 600;
+            color: #495057;
+        }
+
+        :global(.ant-table-tbody > tr) {
+            transition: all 0.3s ease;
+        }
+
+        :global(.ant-table-tbody > tr > td) {
+            border-bottom: 1px solid #f0f0f0;
+        }
+    }
+
+    // 分页器样式
+    :global(.ant-pagination) {
+        margin-top: 20px;
+        text-align: center;
+
+        :global(.ant-pagination-item) {
+            border-radius: 6px;
+            border: 1px solid #d9d9d9;
+            transition: all 0.3s ease;
+
+            &.ant-pagination-item-active {
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                border-color: #667eea;
+                color: white;
+            }
+        }
+
+        :global(.ant-pagination-prev),
+        :global(.ant-pagination-next) {
+            border-radius: 6px;
+            border: 1px solid #d9d9d9;
+            transition: all 0.3s ease;
+        }
     }
 }