From 2c8d5c814c18bdc3a00b5fa5d12fb26c53a8fe87 Mon Sep 17 00:00:00 2001
From: zhang1106 <849185023@qq.com>
Date: Tue, 10 Feb 2026 14:48:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86):?=
 =?UTF-8?q?=20=E6=8F=90=E5=8F=96=E5=B8=B8=E9=87=8F=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=A0=B7=E5=BC=8F=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将状态标签和设备类型映射提取到常量文件
将表格组件样式和空状态样式提取到样式文件
移除组件内硬编码的映射和样式，使用导入的常量
---
 .../constants/deviceManagementConstants.js    | 17 +++++
 frontend/src/pages/DeviceManagement.jsx       | 70 +++++--------------
 frontend/src/styles/deviceManagementStyles.js | 44 ++++++++++++
 3 files changed, 79 insertions(+), 52 deletions(-)

diff --git a/frontend/src/constants/deviceManagementConstants.js b/frontend/src/constants/deviceManagementConstants.js
index 632a6c8..81b88c6 100644
--- a/frontend/src/constants/deviceManagementConstants.js
+++ b/frontend/src/constants/deviceManagementConstants.js
@@ -276,3 +276,20 @@ export const ACTION_BUTTON_CONFIG = {
   // 单个删除确认消息
   singleDeleteConfirmMessage: name => `确定要删除设备 "${name}" 吗？此操作不可恢复。`,
 };
+
+// 状态标签映射
+export const STATUS_MAP = {
+  running: { text: '运行中', color: 'green' },
+  maintenance: { text: '维护中', color: 'orange' },
+  offline: { text: '离线', color: 'gray' },
+  fault: { text: '故障', color: 'red' },
+};
+
+// 设备类型映射
+export const TYPE_MAP = {
+  server: '服务器',
+  switch: '交换机',
+  router: '路由器',
+  storage: '存储设备',
+  other: '其他设备',
+};
diff --git a/frontend/src/pages/DeviceManagement.jsx b/frontend/src/pages/DeviceManagement.jsx
index 2f7e778..18e11e6 100644
--- a/frontend/src/pages/DeviceManagement.jsx
+++ b/frontend/src/pages/DeviceManagement.jsx
@@ -56,6 +56,8 @@ import {
   DEVICE_STATUS_OPTIONS,
   COLUMN_WIDTH_CONFIG,
   EMPTY_STATE_CONFIG,
+  STATUS_MAP,
+  TYPE_MAP,
 } from '../constants/deviceManagementConstants';
 import {
   pageContainerStyle,
@@ -88,6 +90,10 @@ import {
   detailModalStyles,
   exportModalStyles,
   generateGlobalStyles,
+  emptyStateStyle,
+  emptyStateIconStyle,
+  tableContainerStyle,
+  resizableTitleStyles,
 } from '../styles/deviceManagementStyles';
 
 const { Option } = Select;
@@ -199,36 +205,14 @@ const ResizableTitle = props => {
 
   return (
     <th {...restProps} style={{ position: 'relative' }}>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          width: '100%',
-        }}
-      >
-        <span
-          style={{
-            flex: 1,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}
-        >
+      <div style={resizableTitleStyles.container}>
+        <span style={resizableTitleStyles.text}>
           {children}
         </span>
         {onResize && (
           <div
             onMouseDown={handleMouseDown}
-            style={{
-              width: '8px',
-              height: '20px',
-              backgroundColor: '#e0e0e0',
-              borderRadius: '4px',
-              cursor: 'col-resize',
-              marginLeft: '8px',
-              flexShrink: 0,
-            }}
+            style={resizableTitleStyles.resizeHandle}
           />
         )}
       </div>
@@ -1012,22 +996,7 @@ function DeviceManagement() {
     return false;
   };
 
-  // 状态标签映射
-  const statusMap = {
-    running: { text: '运行中', color: 'green' },
-    maintenance: { text: '维护中', color: 'orange' },
-    offline: { text: '离线', color: 'gray' },
-    fault: { text: '故障', color: 'red' },
-  };
-
-  // 设备类型映射
-  const typeMap = {
-    server: '服务器',
-    switch: '交换机',
-    router: '路由器',
-    storage: '存储设备',
-    other: '其他设备',
-  };
+  // 使用从常量导入的映射，避免每次渲染重新创建
 
   // 获取设备类型图标
   const getDeviceTypeIcon = type => {
@@ -1100,7 +1069,7 @@ function DeviceManagement() {
             return (
               <Space>
                 {getDeviceTypeIcon(type)}
-                <span>{typeMap[type]}</span>
+                <span>{TYPE_MAP[type]}</span>
               </Space>
             );
           },
@@ -1119,16 +1088,16 @@ function DeviceManagement() {
               return (
                 <Space>
                   {status.map(s => (
-                    <span key={s} style={{ color: statusMap[s]?.color || 'black' }}>
-                      {statusMap[s]?.text || s}
+                    <span key={s} style={{ color: STATUS_MAP[s]?.color || 'black' }}>
+                      {STATUS_MAP[s]?.text || s}
                     </span>
                   ))}
                 </Space>
               );
             }
             return (
-              <span style={{ color: statusMap[status]?.color || 'black' }}>
-                {statusMap[status]?.text || status}
+              <span style={{ color: STATUS_MAP[status]?.color || 'black' }}>
+                {STATUS_MAP[status]?.text || status}
               </span>
             );
           },
@@ -1509,16 +1478,13 @@ function DeviceManagement() {
         {!loading && filteredDevicesMemo.length === 0 && !searching && (
           <div
             style={{
-              textAlign: 'center',
-              padding: '60px 20px',
+              ...emptyStateStyle,
               color: designTokens.colors.text.secondary,
-              fontSize: '15px',
             }}
           >
             <SearchOutlined
               style={{
-                fontSize: '48px',
-                marginBottom: '16px',
+                ...emptyStateIconStyle,
                 color: designTokens.colors.border.light,
               }}
             />
@@ -1529,8 +1495,8 @@ function DeviceManagement() {
           <div
             className="device-table-wrapper"
             style={{
+              ...tableContainerStyle,
               borderRadius: designTokens.borderRadius.medium,
-              overflow: 'hidden',
             }}
           >
             <Table
diff --git a/frontend/src/styles/deviceManagementStyles.js b/frontend/src/styles/deviceManagementStyles.js
index 2da42d1..0e62642 100644
--- a/frontend/src/styles/deviceManagementStyles.js
+++ b/frontend/src/styles/deviceManagementStyles.js
@@ -406,6 +406,50 @@ export const exportModalStyles = {
   },
 };
 
+// 空状态样式
+export const emptyStateStyle = {
+  textAlign: 'center',
+  padding: '60px 20px',
+  fontSize: '15px',
+};
+
+// 空状态图标样式
+export const emptyStateIconStyle = {
+  fontSize: '48px',
+  marginBottom: '16px',
+};
+
+// 表格容器样式
+export const tableContainerStyle = {
+  borderRadius: borderRadius.medium,
+  overflow: 'hidden',
+};
+
+// ResizableTitle 组件样式
+export const resizableTitleStyles = {
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  text: {
+    flex: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  resizeHandle: {
+    width: '8px',
+    height: '20px',
+    backgroundColor: '#e0e0e0',
+    borderRadius: '4px',
+    cursor: 'col-resize',
+    marginLeft: '8px',
+    flexShrink: 0,
+  },
+};
+
 // CSS-in-JS 样式字符串生成函数
 export const generateGlobalStyles = tokens => `
   .device-modal .ant-modal-close {