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

frontend/src/components/CableCreateModal.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { Modal, Form, Select, Input, Button, message, Space, Spin } from 'antd';
 import { SwapOutlined } from '@ant-design/icons';
 import axios from 'axios';
+import CloseButton from './CloseButton';
 import { debounce } from '../utils/common';
 
 const { Option } = Select;
@@ -148,6 +149,7 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
         </Space>
       }
       open={visible}
+      closeIcon={<CloseButton />}
       onCancel={onClose}
       onOk={handleSubmit}
       confirmLoading={loading}

frontend/src/components/CloseButton.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const CloseButton = ({ size = 32, iconSize = 16, className = 'modal-close-btn' }) => {
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '8px',
+        transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+        cursor: 'pointer',
+      }}
+      className={className}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width={iconSize}
+        height={iconSize}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{ transition: 'transform 0.25s ease' }}
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </div>
+  );
+};
+
+export default CloseButton;

frontend/src/components/NetworkCardCreateModal.jsx

@@ -3,6 +3,7 @@ import { Modal, Form, Input, InputNumber, Select, message, Space, Tooltip } from
 import { PlusOutlined, InfoCircleOutlined, CloudServerOutlined } from '@ant-design/icons';
 import axios from 'axios';
 import { designTokens } from '../config/theme';
+import CloseButton from './CloseButton';
 
 const { Option } = Select;
 const { TextArea } = Input;
@@ -55,6 +56,7 @@ function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
         </Space>
       }
       open={visible}
+      closeIcon={<CloseButton />}
       onOk={handleSubmit}
       onCancel={handleCancel}
       confirmLoading={loading}

frontend/src/components/PortCreateModal.jsx

@@ -15,6 +15,7 @@ import {
 import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import axios from 'axios';
 import { designTokens } from '../config/theme';
+import CloseButton from './CloseButton';
 
 const { Option } = Select;
 const { TextArea } = Input;
@@ -201,6 +202,7 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
         </Space>
       }
       open={visible}
+      closeIcon={<CloseButton />}
       onOk={handleSubmit}
       onCancel={handleCancel}
       confirmLoading={loading}

frontend/src/components/ServerBackplanePanel.jsx

@@ -14,6 +14,7 @@ import {
 import PortPanel from './PortPanel';
 import axios from 'axios';
 import { designTokens } from '../config/theme';
+import CloseButton from './CloseButton';
 
 const { Text } = Typography;
 
@@ -620,6 +621,7 @@ const ServerBackplanePanel = ({
           </div>
         }
         open={!!selectedSlot}
+        closeIcon={<CloseButton />}
         onCancel={() => setSelectedSlot(null)}
         footer={null}
         width={700}

frontend/src/index.css

@@ -630,9 +630,34 @@ body {
 }
 
 .ant-modal-close-x {
-  width: 56px !important;
+  width: 56px;
-  height: 56px !important;
+  height: 56px;
-  line-height: 56px !important;
+  line-height: 56px;
+}
+
+.ant-modal-close {
+  background: transparent !important;
+}
+
+.ant-modal-close:hover {
+  background: transparent !important;
+}
+
+.modal-close-btn {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.modal-close-btn:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.modal-close-btn:hover svg {
+  transform: rotate(90deg);
+}
+
+.modal-close-btn:active {
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .ant-message-notice-content {

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}