feat(ui): 添加自定义关闭按钮组件并应用到所有模态框

frontend/src/pages/CableManagement.jsx

@@ -53,6 +53,7 @@ import Papa from 'papaparse';
 import { motion, AnimatePresence } from 'framer-motion';
 import { designTokens } from '../config/theme';
 import { debounce } from '../utils/common';
+import CloseButton from '../components/CloseButton';
 
 const { Option } = Select;
 const { Panel } = Collapse;
@@ -1235,6 +1236,11 @@ function CableManagement() {
         width={700}
         okText="确定"
         cancelText="取消"
+        closeIcon={<CloseButton />}
+        styles={{
+          content: { padding: '24px' },
+          header: { marginBottom: 16 },
+        }}
         okButtonProps={{
           style: {
             background: designTokens.colors.primary.gradient,
@@ -1446,6 +1452,7 @@ function CableManagement() {
           </div>
         }
         open={importModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => {
           setImportModalVisible(false);
           setImportPreview([]);
@@ -1595,6 +1602,7 @@ function CableManagement() {
           </div>
         }
         open={conflictModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => {
           setConflictModalVisible(false);
           setConflictInfo(null);

frontend/src/pages/CategoryManagement.jsx

@@ -16,6 +16,7 @@ import {
 } from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
 import axios from 'axios';
+import CloseButton from '../components/CloseButton';
 import {
   inputStyles,
   selectStyles,
@@ -222,6 +223,7 @@ function CategoryManagement() {
       <Modal
         title={editingCategory ? '编辑分类' : '添加分类'}
         open={modalVisible}
+        closeIcon={<CloseButton />}
         onCancel={handleCancel}
         footer={null}
         width={500}

frontend/src/pages/ConsumableLogs.jsx

@@ -36,6 +36,7 @@ import {
   EyeOutlined,
 } from '@ant-design/icons';
 import axios from 'axios';
+import CloseButton from '../components/CloseButton';
 import dayjs from 'dayjs';
 import * as XLSX from 'xlsx';
 import {
@@ -671,6 +672,7 @@ function ConsumableLogs() {
       <Modal
         title="导入操作日志"
         open={importModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => {
           setImportModalVisible(false);
           setImportType('excel');
@@ -721,6 +723,7 @@ function ConsumableLogs() {
       <Modal
         title="编辑日志记录"
         open={editModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => {
           setEditModalVisible(false);
           form.resetFields();
@@ -753,6 +756,7 @@ function ConsumableLogs() {
       <Modal
         title="日志修改历史"
         open={historyModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => {
           setHistoryModalVisible(false);
           setLogHistory([]);
@@ -832,6 +836,7 @@ function ConsumableLogs() {
       <Modal
         title="归档记录详情"
         open={archiveModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => {
           setArchiveModalVisible(false);
           setCurrentArchive(null);

frontend/src/pages/ConsumableManagement.jsx

@@ -49,6 +49,7 @@ import {
 import axios from 'axios';
 import { motion, AnimatePresence } from 'framer-motion';
 import { designTokens } from '../config/theme';
+import CloseButton from '../components/CloseButton';
 import {
   inputStyles,
   selectStyles,
@@ -1191,6 +1192,7 @@ function ConsumableManagement() {
           </div>
         }
         open={modalVisible}
+        closeIcon={<CloseButton />}
         onCancel={handleCancel}
         footer={null}
         width={900}
@@ -1750,6 +1752,7 @@ function ConsumableManagement() {
           </div>
         }
         open={importModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={handleImportCancel}
         footer={null}
         width={700}
@@ -1885,6 +1888,7 @@ function ConsumableManagement() {
           </div>
         }
         open={stockModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={handleStockCancel}
         footer={null}
         width={500}
@@ -2040,6 +2044,7 @@ function ConsumableManagement() {
       <Modal
         title={scanMode === 'add' ? '扫码添加SN' : scanMode === 'in' ? '扫码入库' : '扫码出库'}
         open={scanModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={handleScanCancel}
         footer={null}
         width={500}

frontend/src/pages/DeviceFieldManagement.jsx

@@ -29,6 +29,7 @@ import {
 } from '@ant-design/icons';
 import axios from 'axios';
 import { designTokens } from '../config/theme';
+import CloseButton from '../components/CloseButton';
 
 const { Option = Select.Option } = Select;
 
@@ -444,6 +445,7 @@ function DeviceFieldManagement() {
       <Modal
         title={<span style={modalTitleStyle}>{editingField ? '编辑字段' : '添加字段'}</span>}
         open={modalVisible}
+        closeIcon={<CloseButton />}
         onCancel={handleCancel}
         footer={null}
         width={600}

frontend/src/pages/InventoryManagement.jsx

@@ -39,6 +39,7 @@ import axios from 'axios';
 import dayjs from 'dayjs';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { designTokens } from '../config/theme';
+import CloseButton from '../components/CloseButton';
 
 const { RangePicker } = DatePicker;
 const { TabPane } = Tabs;
@@ -600,6 +601,7 @@ const InventoryManagement = () => {
           </div>
         }
         open={modalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => setModalVisible(false)}
         footer={null}
         width={640}

frontend/src/pages/InventoryTaskExecution.jsx

@@ -38,6 +38,7 @@ import axios from 'axios';
 import dayjs from 'dayjs';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { designTokens } from '../config/theme';
+import CloseButton from '../components/CloseButton';
 
 const api = axios.create({
   baseURL: '/api',
@@ -1501,6 +1502,7 @@ const InventoryTaskExecution = () => {
       <Modal
         title="设备盘点"
         open={checkModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => setCheckModalVisible(false)}
         footer={null}
         width={600}
@@ -1572,6 +1574,7 @@ const InventoryTaskExecution = () => {
       <Modal
         title={null}
         open={quickAddModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => {
           setQuickAddModalVisible(false);
           setSelectedRoomId(null);

frontend/src/pages/PendingDeviceManagement.jsx

@@ -36,6 +36,7 @@ import axios from 'axios';
 import dayjs from 'dayjs';
 import { useNavigate } from 'react-router-dom';
 import { designTokens } from '../config/theme';
+import CloseButton from '../components/CloseButton';
 
 const api = axios.create({
   baseURL: '/api',
@@ -779,6 +780,7 @@ const PendingDeviceManagement = () => {
       <Modal
         title="编辑暂存设备"
         open={editModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => {
           setEditModalVisible(false);
           setSelectedRoomId(null);

frontend/src/pages/PortManagement.jsx

@@ -54,6 +54,7 @@ import VirtualDeviceList from '../components/VirtualDeviceList';
 import NetworkCardPanel from '../components/NetworkCardPanel';
 import NetworkCardCreateModal from '../components/NetworkCardCreateModal';
 import { designTokens } from '../config/theme';
+import CloseButton from '../components/CloseButton';
 import { debounce } from '../utils/common';
 
 const { Option } = Select;
@@ -1155,6 +1156,7 @@ function PortManagement() {
           </div>
         }
         open={modalVisible}
+        closeIcon={<CloseButton />}
         onOk={handleSubmit}
         onCancel={() => {
           setModalVisible(false);
@@ -1293,6 +1295,7 @@ function PortManagement() {
           </div>
         }
         open={importModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => {
           setImportModalVisible(false);
           setImportPreview([]);
@@ -1457,6 +1460,7 @@ function PortManagement() {
           </div>
         }
         open={networkCardModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => {
           setNetworkCardModalVisible(false);
           setSelectedDeviceForNic(null);

frontend/src/pages/Rack3DVisualization.jsx

@@ -39,6 +39,7 @@ import NetworkCardCreateModal from '../components/NetworkCardCreateModal';
 import PortCreateModal from '../components/PortCreateModal';
 import CableCreateModal from '../components/CableCreateModal';
 import DeviceDetailDrawer from '../components/DeviceDetailDrawer';
+import CloseButton from '../components/CloseButton';
 import { useScene3D } from '../context/Scene3DContext';
 
 const { Header, Content, Sider } = Layout;
@@ -914,6 +915,7 @@ const Rack3DVisualization = () => {
             }
             open={modalVisible}
             onCancel={handleModalCancel}
+            closeIcon={<CloseButton />}
             footer={null}
             width={700}
           >
@@ -990,8 +992,13 @@ const Rack3DVisualization = () => {
             }
             open={showTooltipConfig}
             onCancel={() => setShowTooltipConfig(false)}
+            closeIcon={<CloseButton />}
             footer={null}
             width={520}
+            styles={{
+              content: { padding: '24px' },
+              header: { marginBottom: 16 },
+            }}
           >
             {loadingTooltipFields ? (
               <div style={{ textAlign: 'center', padding: '20px' }}>

frontend/src/pages/RackManagement.jsx

@@ -51,6 +51,7 @@ import {
 } from '@ant-design/icons';
 import axios from 'axios';
 import { designTokens } from '../config/theme';
+import CloseButton from '../components/CloseButton';
 
 const { Option } = Select;
 const { Title, Text } = Typography;
@@ -956,6 +957,7 @@ function RackManagement() {
           </div>
         }
         open={modalVisible}
+        closeIcon={<CloseButton />}
         onCancel={handleCancel}
         footer={null}
         width={600}
@@ -1225,6 +1227,7 @@ function RackManagement() {
           </div>
         }
         open={importModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => {
           setImportModalVisible(false);
           setImportProgress(0);

frontend/src/pages/RoomManagement.jsx

@@ -46,6 +46,7 @@ import {
 } from '@ant-design/icons';
 import axios from 'axios';
 import { designTokens } from '../config/theme';
+import CloseButton from '../components/CloseButton';
 
 const { Option } = Select;
 const { Title, Text } = Typography;
@@ -756,6 +757,7 @@ function RoomManagement() {
           </div>
         }
         open={modalVisible}
+        closeIcon={<CloseButton />}
         onCancel={handleCancel}
         footer={null}
         width={600}

frontend/src/pages/TicketCategoryManagement.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Table, Button, Modal, Form, Input, Select, message, Card, Space, Popconfirm } from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons';
 import axios from 'axios';
+import CloseButton from '../components/CloseButton';
 
 const { Option } = Select;
 
@@ -191,6 +192,7 @@ function TicketCategoryManagement() {
       <Modal
         title={editingCategory ? '编辑分类' : '添加分类'}
         open={modalVisible}
+        closeIcon={<CloseButton />}
         onCancel={handleCancel}
         footer={null}
         width={600}

frontend/src/pages/TicketFieldManagement.jsx

@@ -14,6 +14,7 @@ import {
 } from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import axios from 'axios';
+import CloseButton from '../components/CloseButton';
 
 const { Option } = Select;
 
@@ -198,6 +199,7 @@ function TicketFieldManagement() {
       <Modal
         title={editingField ? '编辑字段' : '添加字段'}
         open={modalVisible}
+        closeIcon={<CloseButton />}
         onCancel={handleCancel}
         footer={null}
         width={600}

frontend/src/pages/TicketManagement.jsx

@@ -43,6 +43,7 @@ import {
   TagOutlined,
 } from '@ant-design/icons';
 import axios from 'axios';
+import CloseButton from '../components/CloseButton';
 import dayjs from 'dayjs';
 import { useSearchParams } from 'react-router-dom';
 import { debounce, getUserFromStorage } from '../utils/common';
@@ -1047,6 +1048,7 @@ function TicketManagement() {
       <Modal
         title={editingTicket ? '编辑工单' : '创建工单'}
         open={modalVisible}
+        closeIcon={<CloseButton />}
         onCancel={handleCancel}
         footer={null}
         width={700}
@@ -1067,6 +1069,7 @@ function TicketManagement() {
       <Modal
         title="处理工单"
         open={processingModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => setProcessingModalVisible(false)}
         footer={null}
         width={600}
@@ -1114,6 +1117,7 @@ function TicketManagement() {
       <Modal
         title={`工单详情 - ${selectedTicket?.ticketId}`}
         open={detailModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => setDetailModalVisible(false)}
         footer={[
           <Button key="close" onClick={() => setDetailModalVisible(false)}>

frontend/src/pages/UserManagement.jsx

@@ -27,6 +27,7 @@ import {
   CloseOutlined,
 } from '@ant-design/icons';
 import { userAPI, roleAPI } from '../api';
+import CloseButton from '../components/CloseButton';
 
 const { Option } = Select;
 
@@ -610,6 +611,7 @@ const UserManagement = () => {
           </div>
         }
         open={modalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => setModalVisible(false)}
         footer={null}
         width={500}
@@ -734,6 +736,7 @@ const UserManagement = () => {
           </div>
         }
         open={passwordModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => setPasswordModalVisible(false)}
         footer={null}
         width={400}
@@ -795,6 +798,7 @@ const UserManagement = () => {
           </div>
         }
         open={avatarModalVisible}
+        closeIcon={<CloseButton />}
         onCancel={() => setAvatarModalVisible(false)}
         footer={null}
         width={400}