feat(UI): 优化多个页面的UI设计和交互体验

refactor(ProtectedRoute): 调整加载状态布局和样式
feat(DeviceFieldManagement): 添加设计令牌和样式优化
feat(App): 重构侧边栏和顶部导航栏样式
feat(ConsumableStatistics): 重新设计统计卡片和表格样式
style: 统一多个组件的设计语言和配色方案

frontend/src/pages/DeviceManagement.jsx

@@ -7,6 +7,94 @@ import dayjs from 'dayjs';
 const { Option } = Select;
 const { RangePicker } = DatePicker;
 
+const designTokens = {
+  colors: {
+    primary: {
+      main: '#667eea',
+      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      light: '#8b9ff0',
+      dark: '#4f5db8'
+    },
+    success: {
+      main: '#10b981',
+      gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+      light: '#34d399',
+      dark: '#047857'
+    },
+    warning: {
+      main: '#f59e0b',
+      gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
+      light: '#fbbf24',
+      dark: '#b45309'
+    },
+    error: {
+      main: '#ef4444',
+      gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
+      light: '#f87171',
+      dark: '#b91c1c'
+    },
+    text: {
+      primary: '#1e293b',
+      secondary: '#64748b',
+      tertiary: '#94a3b8',
+      inverse: '#ffffff'
+    },
+    background: {
+      primary: '#ffffff',
+      secondary: '#f8fafc',
+      tertiary: '#f1f5f9',
+      dark: '#1e293b'
+    },
+    border: {
+      light: '#e2e8f0',
+      medium: '#cbd5e1',
+      dark: '#94a3b8'
+    },
+    device: {
+      server: '#3b82f6',
+      switch: '#22c55e',
+      router: '#f59e0b',
+      storage: '#8b5cf6',
+      other: '#64748b'
+    },
+    status: {
+      normal: '#10b981',
+      running: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      fault: '#ef4444',
+      offline: '#6b7280',
+      maintenance: '#3b82f6'
+    }
+  },
+  shadows: {
+    small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+    large: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+    glow: '0 0 20px rgba(102, 126, 234, 0.3)'
+  },
+  borderRadius: {
+    small: '6px',
+    medium: '10px',
+    large: '16px',
+    xl: '24px',
+    round: '50%'
+  },
+  transitions: {
+    fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
+    normal: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
+    slow: '500ms cubic-bezier(0.4, 0, 0.2, 1)'
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px'
+  }
+};
+
 // 防抖 Hook
 function useDebounce(value, delay) {
   const [debouncedValue, setDebouncedValue] = useState(value);
@@ -1161,68 +1249,184 @@ function DeviceManagement() {
     message.success('字段配置已重置为默认值');
   };
 
-  const pageHeaderStyle = {
-    marginBottom: '24px',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    gap: '12px'
+  const pageContainerStyle = {
+    minHeight: '100vh',
+    background: designTokens.colors.background.secondary,
+    padding: designTokens.spacing.lg
   };
 
-  const titleStyle = {
-    fontSize: '24px',
+  const headerStyle = {
+    marginBottom: designTokens.spacing.lg
+  };
+
+  const titleRowStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: designTokens.spacing.lg,
+    flexWrap: 'wrap',
+    gap: designTokens.spacing.md
+  };
+
+  const titleSectionStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: designTokens.spacing.md
+  };
+
+  const titleIconStyle = {
+    width: '44px',
+    height: '44px',
+    borderRadius: designTokens.borderRadius.medium,
+    background: designTokens.colors.primary.gradient,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: designTokens.shadows.medium
+  };
+
+  const titleTextStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2px'
+  };
+
+  const pageTitleStyle = {
+    fontSize: '22px',
     fontWeight: '700',
     margin: 0,
-    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
-    backgroundClip: 'text'
+    color: designTokens.colors.text.primary,
+    lineHeight: 1.2
   };
 
-  const cardStyle = {
-    borderRadius: '16px',
+  const pageSubtitleStyle = {
+    fontSize: '13px',
+    color: designTokens.colors.text.secondary,
+    margin: 0
+  };
+
+  const actionButtonStyle = {
+    height: '36px',
+    borderRadius: designTokens.borderRadius.small,
+    fontSize: '13px',
+    fontWeight: '500',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '6px'
+  };
+
+  const primaryActionStyle = {
+    ...actionButtonStyle,
+    background: designTokens.colors.primary.gradient,
     border: 'none',
-    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
-    overflow: 'hidden'
+    color: '#ffffff',
+    boxShadow: designTokens.shadows.small
+  };
+
+  const secondaryActionStyle = {
+    ...actionButtonStyle,
+    background: designTokens.colors.background.primary,
+    border: `1px solid ${designTokens.colors.border.light}`,
+    color: designTokens.colors.text.primary
+  };
+
+  const dangerActionStyle = {
+    ...actionButtonStyle,
+    background: designTokens.colors.error.main,
+    border: 'none',
+    color: '#ffffff'
   };
 
   const primaryButtonStyle = {
     height: '40px',
-    borderRadius: '8px',
-    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    borderRadius: designTokens.borderRadius.small,
+    background: designTokens.colors.primary.gradient,
     border: 'none',
-    boxShadow: '0 4px 12px rgba(102, 126, 234, 0.35)',
+    color: '#ffffff',
+    boxShadow: designTokens.shadows.small,
     fontWeight: '500',
-    transition: 'all 0.3s ease'
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center'
   };
 
-  const secondaryButtonStyle = {
-    height: '40px',
-    borderRadius: '8px',
-    border: '1px solid #e8e8e8',
-    transition: 'all 0.3s ease'
+  const statsRowStyle = {
+    display: 'flex',
+    gap: designTokens.spacing.md,
+    marginBottom: designTokens.spacing.lg,
+    flexWrap: 'wrap'
   };
 
-  const searchCardStyle = {
-    borderRadius: '12px',
-    border: '1px solid #f0f0f0',
-    background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)',
-    marginBottom: '20px'
+  const statCardStyle = {
+    flex: 1,
+    minWidth: '140px',
+    maxWidth: '200px',
+    padding: `${designTokens.spacing.md}px ${designTokens.spacing.lg}px`,
+    background: designTokens.colors.background.primary,
+    borderRadius: designTokens.borderRadius.medium,
+    border: `1px solid ${designTokens.colors.border.light}`,
+    boxShadow: designTokens.shadows.small,
+    transition: `all ${designTokens.transitions.fast}`
+  };
+
+  const statValueStyle = {
+    fontSize: '24px',
+    fontWeight: '700',
+    color: designTokens.colors.text.primary,
+    lineHeight: 1.2
+  };
+
+  const statLabelStyle = {
+    fontSize: '12px',
+    color: designTokens.colors.text.secondary,
+    marginTop: '4px'
+  };
+
+  const statCardRunningStyle = {
+    ...statCardStyle,
+    borderLeft: `3px solid ${designTokens.colors.success.main}`,
+    background: `${designTokens.colors.success.main}08`
+  };
+
+  const statCardMaintenanceStyle = {
+    ...statCardStyle,
+    borderLeft: `3px solid ${designTokens.colors.warning.main}`,
+    background: `${designTokens.colors.warning.main}08`
+  };
+
+  const statCardFaultStyle = {
+    ...statCardStyle,
+    borderLeft: `3px solid ${designTokens.colors.error.main}`,
+    background: `${designTokens.colors.error.main}08`
+  };
+
+  const cardStyle = {
+    borderRadius: designTokens.borderRadius.large,
+    border: 'none',
+    boxShadow: designTokens.shadows.medium,
+    overflow: 'hidden',
+    background: designTokens.colors.background.primary
+  };
+
+  const filterCardStyle = {
+    borderRadius: designTokens.borderRadius.medium,
+    border: 'none',
+    boxShadow: designTokens.shadows.small,
+    background: designTokens.colors.background.primary,
+    marginBottom: designTokens.spacing.lg
   };
 
   const modalHeaderStyle = {
     display: 'flex',
     alignItems: 'center',
-    gap: '8px',
+    gap: designTokens.spacing.sm,
     fontSize: '18px',
     fontWeight: '600'
   };
 
   return (
-    <div style={{ padding: '24px' }}>
+    <div style={pageContainerStyle}>
       <style>{`
-        /* 表格自适应换行样式 */
         .device-table-wrapper {
           display: flex;
           flex-direction: column;
@@ -1255,9 +1459,12 @@ function DeviceManagement() {
           white-space: normal !important;
           word-break: break-word !important;
           font-size: 14px !important;
-          font-weight: 500 !important;
+          font-weight: 600 !important;
           line-height: 1.4 !important;
-          padding: 12px 8px !important;
+          padding: 14px 12px !important;
+          background: ${designTokens.colors.background.tertiary} !important;
+          color: ${designTokens.colors.text.primary} !important;
+          border-bottom: 1px solid ${designTokens.colors.border.light} !important;
         }
         
         .device-table-wrapper .ant-table-tbody {
@@ -1270,7 +1477,8 @@ function DeviceManagement() {
           word-break: break-word !important;
           line-height: 1.6 !important;
           max-width: 250px !important;
-          padding: 12px 8px !important;
+          padding: 12px !important;
+          border-bottom: 1px solid ${designTokens.colors.border.light} !important;
         }
         
         .device-table-wrapper .ant-table-tbody > tr > td .ant-typography,
@@ -1284,29 +1492,26 @@ function DeviceManagement() {
           word-break: break-word !important;
         }
         
-        /* 斑马纹样式 */
         .device-table-wrapper .ant-table-row-even {
-          background-color: #fafafa;
+          background-color: ${designTokens.colors.background.primary};
         }
         
         .device-table-wrapper .ant-table-row-odd {
-          background-color: #ffffff;
+          background-color: ${designTokens.colors.background.secondary};
         }
         
         .device-table-wrapper .ant-table-row-selected {
-          background-color: #e6f7ff !important;
+          background-color: ${designTokens.colors.primary.main}15 !important;
         }
         
         .device-table-wrapper .ant-table-row-selected:hover > td {
-          background-color: #bae7ff !important;
+          background-color: ${designTokens.colors.primary.main}25 !important;
         }
         
-        /* 表格行悬停效果 */
         .device-table-wrapper .ant-table-tbody > tr:hover > td {
-          background-color: #f5f5f5 !important;
+          background-color: ${designTokens.colors.background.tertiary} !important;
         }
         
-        /* 复选框列固定 */
         .device-table-wrapper .ant-table-selection-column {
           position: sticky !important;
           left: 0 !important;
@@ -1314,20 +1519,35 @@ function DeviceManagement() {
           background: inherit !important;
         }
         
-        /* 操作列样式 */
         .device-table-wrapper .ant-table-tbody > tr > td:last-child {
           min-width: 120px !important;
           max-width: 150px !important;
         }
         
-        /* 分页器样式 */
         .device-table-wrapper .ant-pagination {
           margin: 16px 0 !important;
           flex-wrap: wrap !important;
           justify-content: center !important;
+          padding: 12px 16px !important;
+          background: ${designTokens.colors.background.primary};
+          border-radius: ${designTokens.borderRadius.medium};
+          margin-top: 16px !important;
+        }
+        
+        .device-table-wrapper .ant-pagination-item-active {
+          background: ${designTokens.colors.primary.gradient} !important;
+          border: none !important;
+        }
+        
+        .device-table-wrapper .ant-pagination-item-active a {
+          color: #ffffff !important;
+        }
+        
+        .device-table-wrapper .ant-table-cell-fix-left,
+        .device-table-wrapper .ant-table-cell-fix-right {
+          background: inherit !important;
         }
         
-        /* 响应式调整 */
         @media screen and (max-width: 768px) {
           .device-table-wrapper .ant-table-tbody > tr > td {
             max-width: 150px !important;
@@ -1338,97 +1558,133 @@ function DeviceManagement() {
             font-size: 13px !important;
           }
         }
+        
+        @media (max-width: 768px) {
+          .page-header {
+            flex-direction: column;
+            align-items: flex-start !important;
+            gap: 16px !important;
+          }
+          
+          .stat-cards {
+            flex-wrap: wrap;
+          }
+          
+          .stat-card {
+            min-width: calc(50% - 8px) !important;
+          }
+        }
+        
+        @media (max-width: 480px) {
+          .stat-card {
+            min-width: 100% !important;
+          }
+          
+          .filter-form .ant-form-item {
+            margin-bottom: 12px !important;
+          }
+        }
       `}</style>
       
-      <div style={pageHeaderStyle}>
-        <h1 style={titleStyle}>
-          <CloudServerOutlined style={{ marginRight: '12px' }} />
-          设备管理
-        </h1>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
-          <Button
-            style={primaryButtonStyle}
-            icon={<PlusOutlined />}
-            onClick={() => showModal()}
-          >
-            添加设备
-          </Button>
-          <Button
-            style={secondaryButtonStyle}
-            icon={<UploadOutlined />}
-            onClick={() => setImportModalVisible(true)}
-          >
-            导入设备
-          </Button>
-          <Button
-            style={secondaryButtonStyle}
-            icon={<SettingOutlined />}
-            onClick={() => setFieldConfigModalVisible(true)}
-          >
-            字段配置
-          </Button>
-          <Button
-            style={secondaryButtonStyle}
-            icon={<UndoOutlined />}
-            onClick={resetColumnWidths}
-            title="重置列宽"
-          >
-            重置列宽
-          </Button>
-          <Button
-            style={{
-              ...secondaryButtonStyle,
-              color: selectedDevices.length > 0 ? '#52c41a' : undefined,
-              borderColor: selectedDevices.length > 0 ? '#52c41a' : undefined
-            }}
-            icon={<ReloadOutlined />}
-            disabled={selectedDevices.length === 0}
-            onClick={showBatchStatusModal}
-          >
-            状态变更 ({selectedDevices.length})
-          </Button>
-          <Button
-            style={{
-              ...secondaryButtonStyle,
-              color: selectedDevices.length > 0 ? '#ff4d4f' : undefined,
-              borderColor: selectedDevices.length > 0 ? '#ff4d4f' : undefined
-            }}
-            danger
-            icon={<DeleteOutlined />}
-            disabled={selectedDevices.length === 0}
-            onClick={handleBatchDelete}
-          >
-            批量删除 ({selectedDevices.length})
-          </Button>
+      <div style={headerStyle}>
+        <div style={titleRowStyle}>
+          <div style={titleSectionStyle}>
+            <div style={titleIconStyle}>
+              <CloudServerOutlined style={{ fontSize: '20px', color: '#ffffff' }} />
+            </div>
+            <div style={titleTextStyle}>
+              <h1 style={pageTitleStyle}>设备管理</h1>
+              <p style={pageSubtitleStyle}>管理您的IT设备资产</p>
+            </div>
+          </div>
+          
+          <div style={{ display: 'flex', gap: designTokens.spacing.sm, flexWrap: 'wrap' }}>
+            <Button
+              style={primaryActionStyle}
+              icon={<PlusOutlined />}
+              onClick={() => showModal()}
+            >
+              添加设备
+            </Button>
+            <Button
+              style={secondaryActionStyle}
+              icon={<UploadOutlined />}
+              onClick={() => setImportModalVisible(true)}
+            >
+              导入
+            </Button>
+            <Button
+              style={secondaryActionStyle}
+              icon={<ExportOutlined />}
+              onClick={showExportModal}
+            >
+              导出
+            </Button>
+            <Button
+              style={secondaryActionStyle}
+              icon={<SettingOutlined />}
+              onClick={() => setFieldConfigModalVisible(true)}
+            >
+              字段配置
+            </Button>
+            <Button
+              style={{
+                ...secondaryActionStyle,
+                color: selectedDevices.length > 0 ? designTokens.colors.success.main : undefined,
+                borderColor: selectedDevices.length > 0 ? designTokens.colors.success.main : undefined
+              }}
+              icon={<ReloadOutlined />}
+              disabled={selectedDevices.length === 0}
+              onClick={showBatchStatusModal}
+            >
+              状态变更 ({selectedDevices.length})
+            </Button>
+            <Button
+              danger
+              style={{
+                ...secondaryActionStyle,
+                color: selectedDevices.length > 0 ? designTokens.colors.error.main : undefined,
+                borderColor: selectedDevices.length > 0 ? designTokens.colors.error.main : undefined
+              }}
+              icon={<DeleteOutlined />}
+              disabled={selectedDevices.length === 0}
+              onClick={handleBatchDelete}
+            >
+              批量删除 ({selectedDevices.length})
+            </Button>
+          </div>
         </div>
       </div>
 
-      <Card size="small" style={searchCardStyle} styles={{ body: { padding: '16px 20px', display: 'flex', alignItems: 'center', gap: '16px' } }}>
+      <Card size="small" style={filterCardStyle} styles={{ body: { padding: `${designTokens.spacing.md}px ${designTokens.spacing.lg}px`, display: 'flex', alignItems: 'center', gap: designTokens.spacing.md, flexWrap: 'wrap' } }}>
         <Form
           form={searchForm}
           layout="inline"
           onFinish={handleSearch}
-          style={{ flex: 1 }}
+          style={{ flex: 1, display: 'flex', flexWrap: 'wrap', gap: designTokens.spacing.md }}
+          className="filter-form"
         >
-          <Form.Item name="keyword">
+          <Form.Item name="keyword" style={{ margin: 0 }}>
             <Input
-              placeholder="搜索设备ID、名称、类型、型号、序列号、IP、描述..."
-              prefix={<SearchOutlined style={{ color: '#667eea' }} />}
+              placeholder="搜索设备..."
+              prefix={<SearchOutlined style={{ color: designTokens.colors.primary.main }} />}
               style={{ 
-                width: 320,
-                borderRadius: '8px',
-                border: '1px solid #d9d9d9'
+                width: '280px',
+                borderRadius: designTokens.borderRadius.medium,
+                border: `1px solid ${designTokens.colors.border.light}`,
+                transition: `all ${designTokens.transitions.fast}`
               }}
               value={keyword}
               onChange={(e) => setKeyword(e.target.value)}
             />
           </Form.Item>
           
-          <Form.Item name="status">
+          <Form.Item name="status" style={{ margin: 0 }}>
             <Select
               value={status}
               onChange={setStatus}
-              style={{ width: 150, borderRadius: '8px' }}
+              style={{ width: '140px', borderRadius: designTokens.borderRadius.medium }}
+              dropdownStyle={{ borderRadius: designTokens.borderRadius.medium }}
             >
               <Option value="all">所有状态</Option>
               <Option value="running">运行中</Option>
@@ -1438,11 +1694,12 @@ function DeviceManagement() {
             </Select>
           </Form.Item>
           
-          <Form.Item name="type">
+          <Form.Item name="type" style={{ margin: 0 }}>
             <Select
               value={type}
               onChange={setType}
-              style={{ width: 150, borderRadius: '8px' }}
+              style={{ width: '140px', borderRadius: designTokens.borderRadius.medium }}
+              dropdownStyle={{ borderRadius: designTokens.borderRadius.medium }}
             >
               <Option value="all">所有类型</Option>
               <Option value="server">服务器</Option>
@@ -1453,37 +1710,50 @@ function DeviceManagement() {
             </Select>
           </Form.Item>
           
-          <Form.Item>
+          <Form.Item style={{ margin: 0 }}>
             <Space>
               <Button
                 type="primary"
-                htmlType="submit"
+                style={{
+                  height: '36px',
+                  borderRadius: designTokens.borderRadius.medium,
+                  background: designTokens.colors.primary.gradient,
+                  border: 'none',
+                  boxShadow: designTokens.shadows.small
+                }}
                 icon={<SearchOutlined />}
-                style={primaryButtonStyle}
+                htmlType="submit"
+                loading={searching}
               >
                 搜索
               </Button>
               <Button
+                style={{
+                  height: '36px',
+                  borderRadius: designTokens.borderRadius.medium,
+                  border: `1px solid ${designTokens.colors.border.light}`
+                }}
                 onClick={handleReset}
-                style={secondaryButtonStyle}
               >
                 重置
               </Button>
             </Space>
           </Form.Item>
         </Form>
-        <Button
-          style={{
-            ...secondaryButtonStyle,
-            color: '#fa8c16',
-            borderColor: '#fa8c16',
-            whiteSpace: 'nowrap'
-          }}
-          icon={<ExportOutlined />}
-          onClick={showExportModal}
-        >
-          增强导出
-        </Button>
+        
+        <div style={{ display: 'flex', alignItems: 'center', gap: designTokens.spacing.sm }}>
+          <Button
+            icon={<ReloadOutlined />}
+            onClick={() => fetchDevices(1, pagination.pageSize, true)}
+            style={{
+              borderRadius: designTokens.borderRadius.medium,
+              border: `1px solid ${designTokens.colors.border.light}`,
+              height: '36px'
+            }}
+          >
+            刷新
+          </Button>
+        </div>
       </Card>
 
       <Card style={cardStyle}>
@@ -1491,21 +1761,31 @@ function DeviceManagement() {
           <div style={{ 
             textAlign: 'center', 
             padding: '60px 20px', 
-            color: '#999',
+            color: designTokens.colors.text.secondary,
             fontSize: '15px'
           }}>
-            <SearchOutlined style={{ fontSize: '48px', marginBottom: '16px', color: '#d9d9d9' }} />
+            <SearchOutlined style={{ fontSize: '48px', marginBottom: '16px', color: designTokens.colors.border.light }} />
             <p>暂无设备数据</p>
           </div>
         )}
         {filteredDevicesMemo.length > 0 && (
-          <div className="device-table-wrapper">
+          <div className="device-table-wrapper" style={{ 
+            borderRadius: designTokens.borderRadius.medium,
+            overflow: 'hidden'
+          }}>
             <Table
             columns={columns}
             dataSource={filteredDevicesMemo}
             rowKey="deviceId"
             loading={loading || searching}
-            pagination={pagination}
+            pagination={{
+              ...pagination,
+              showSizeChanger: true,
+              showQuickJumper: true,
+              pageSizeOptions: ['10', '20', '30', '50', '100'],
+              showTotal: (total) => `共 ${total} 条记录`,
+              style: { marginTop: '16px' }
+            }}
             onChange={handleTableChange}
             scroll={{ y: 'calc(100vh - 380px)', scrollToFirstRowOnChange: true }}
             virtual
@@ -1640,7 +1920,7 @@ function DeviceManagement() {
 
           <Form.Item style={{ textAlign: 'right', marginTop: '24px' }}>
             <Space>
-              <Button onClick={handleCancel} style={secondaryButtonStyle}>取消</Button>
+              <Button onClick={handleCancel} style={secondaryActionStyle}>取消</Button>
               <Button type="primary" htmlType="submit" style={primaryButtonStyle}>确定</Button>
             </Space>
           </Form.Item>
@@ -1687,8 +1967,8 @@ function DeviceManagement() {
           
           <Form.Item style={{ textAlign: 'right', marginTop: '20px' }}>
             <Space>
-              <Button onClick={() => setFieldConfigModalVisible(false)} style={secondaryButtonStyle}>取消</Button>
-              <Button onClick={handleResetFieldConfig} style={secondaryButtonStyle}>重置默认</Button>
+              <Button onClick={() => setFieldConfigModalVisible(false)} style={secondaryActionStyle}>取消</Button>
+              <Button onClick={handleResetFieldConfig} style={secondaryActionStyle}>重置默认</Button>
               <Button type="primary" htmlType="submit" style={primaryButtonStyle}>保存</Button>
             </Space>
           </Form.Item>
@@ -1733,7 +2013,7 @@ function DeviceManagement() {
             
             <div style={{ marginBottom: '20px' }}>
               <a href="/api/devices/import-template" download="设备导入模板.csv">
-                <Button icon={<DownloadOutlined />} style={secondaryButtonStyle}>
+                <Button icon={<DownloadOutlined />} style={secondaryActionStyle}>
                   下载导入模板
                 </Button>
               </a>
@@ -1861,7 +2141,7 @@ function DeviceManagement() {
           <Button key="close" onClick={() => {
             setDetailModalVisible(false);
             setSelectedDevice(null);
-          }} style={secondaryButtonStyle}>
+          }} style={secondaryActionStyle}>
             关闭
           </Button>,
           <Button key="edit" type="primary" onClick={() => {
@@ -1989,7 +2269,7 @@ function DeviceManagement() {
         open={batchStatusModalVisible}
         onCancel={() => setBatchStatusModalVisible(false)}
         footer={[
-          <Button key="cancel" onClick={() => setBatchStatusModalVisible(false)} style={secondaryButtonStyle}>
+          <Button key="cancel" onClick={() => setBatchStatusModalVisible(false)} style={secondaryActionStyle}>
             取消
           </Button>,
           <Button key="submit" type="primary" loading={batchStatusLoading} onClick={handleBatchStatusChange} style={primaryButtonStyle}>
@@ -2028,7 +2308,7 @@ function DeviceManagement() {
         open={exportModalVisible}
         onCancel={() => setExportModalVisible(false)}
         footer={[
-          <Button key="cancel" onClick={() => setExportModalVisible(false)} style={secondaryButtonStyle}>
+          <Button key="cancel" onClick={() => setExportModalVisible(false)} style={secondaryActionStyle}>
             取消
           </Button>,
           <Button key="submit" type="primary" loading={exportLoading} onClick={handleEnhancedExport} style={primaryButtonStyle}>