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}