handleNavHover(e, true, `nav-${key}`)}
onMouseLeave={(e) => handleNavHover(e, false, `nav-${key}`)}
>
-
+
{text}
diff --git a/frontend/src/pages/DeviceFieldManagement.jsx b/frontend/src/pages/DeviceFieldManagement.jsx
index eae337c..d26f96c 100644
--- a/frontend/src/pages/DeviceFieldManagement.jsx
+++ b/frontend/src/pages/DeviceFieldManagement.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
import { Table, Button, Modal, Form, Input, Select, message, Card, Space, InputNumber, Switch, Tag, Statistic } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, AppstoreOutlined, FontSizeOutlined, NumberOutlined, CheckCircleOutlined, CalendarOutlined, FileTextOutlined } from '@ant-design/icons';
import axios from 'axios';
@@ -126,6 +126,92 @@ const tableStyle = {
background: designTokens.colors.background.primary
};
+const titleIconStyle = {
+ color: designTokens.colors.primary.main
+};
+
+const modalTitleStyle = {
+ fontWeight: '600'
+};
+
+const formLabelStyle = {
+ fontWeight: '500'
+};
+
+const tableCellStyle = {
+ fontWeight: '500',
+ color: designTokens.colors.text.primary
+};
+
+const typeTagStyle = {
+ border: 'none',
+ borderRadius: designTokens.borderRadius.small,
+ fontWeight: '500'
+};
+
+const orderBadgeStyle = {
+ background: designTokens.colors.background.tertiary,
+ padding: '2px 8px',
+ borderRadius: designTokens.borderRadius.small,
+ fontSize: '12px',
+ fontWeight: '500'
+};
+
+const editButtonStyle = {
+ color: designTokens.colors.primary.main,
+ height: '28px',
+ padding: '0 8px'
+};
+
+const deleteButtonStyle = {
+ height: '28px',
+ padding: '0 8px'
+};
+
+const formRowStyle = {
+ display: 'flex',
+ gap: designTokens.spacing.md
+};
+
+const formItemFlexStyle = {
+ flex: 1
+};
+
+const textAreaStyle = {
+ fontFamily: 'monospace'
+};
+
+const modalBodyStyle = {
+ padding: designTokens.spacing.lg
+};
+
+const formActionsStyle = {
+ marginBottom: 0,
+ textAlign: 'right'
+};
+
+const modalStyle = {
+ borderRadius: designTokens.borderRadius.large
+};
+
+const FIELD_TYPE_MAP = {
+ string: { text: '文本', color: designTokens.colors.fieldType.string },
+ number: { text: '数字', color: designTokens.colors.fieldType.number },
+ boolean: { text: '布尔值', color: designTokens.colors.fieldType.boolean },
+ select: { text: '下拉选择', color: designTokens.colors.fieldType.select },
+ date: { text: '日期', color: designTokens.colors.fieldType.date },
+ textarea: { text: '多行文本', color: designTokens.colors.fieldType.textarea }
+};
+
+const FIELD_TYPE_OPTIONS = [
+ { value: 'string', label: '文本' },
+ { value: 'number', label: '数字' },
+ { value: 'boolean', label: '布尔值' },
+ { value: 'select', label: '下拉选择' },
+ { value: 'date', label: '日期' },
+ { value: 'textarea', label: '多行文本' }
+];
+
function DeviceFieldManagement() {
const [fields, setFields] = useState([]);
const [loading, setLoading] = useState(true);
@@ -225,17 +311,13 @@ function DeviceFieldManagement() {
return iconMap[type] ||
;
};
- const columns = [
+ const columns = useMemo(() => [
{
title: '字段名称',
dataIndex: 'fieldName',
key: 'fieldName',
width: 150,
- render: (text) => (
-
- {text}
-
- )
+ render: (text) =>
{text}
},
{
title: '显示名称',
@@ -249,25 +331,9 @@ function DeviceFieldManagement() {
key: 'fieldType',
width: 110,
render: (type) => {
- const typeMap = {
- string: { text: '文本', color: designTokens.colors.fieldType.string },
- number: { text: '数字', color: designTokens.colors.fieldType.number },
- boolean: { text: '布尔值', color: designTokens.colors.fieldType.boolean },
- select: { text: '下拉选择', color: designTokens.colors.fieldType.select },
- date: { text: '日期', color: designTokens.colors.fieldType.date },
- textarea: { text: '多行文本', color: designTokens.colors.fieldType.textarea }
- };
- const config = typeMap[type] || { text: type, color: designTokens.colors.text.tertiary };
+ const config = FIELD_TYPE_MAP[type] || { text: type, color: designTokens.colors.text.tertiary };
return (
-
+
{getFieldTypeIcon(type)}
{config.text}
@@ -282,7 +348,7 @@ function DeviceFieldManagement() {
render: (required) => (
{required ? '是' : '否'}
@@ -296,7 +362,7 @@ function DeviceFieldManagement() {
render: (visible) => (
{visible ? '是' : '否'}
@@ -307,17 +373,7 @@ function DeviceFieldManagement() {
dataIndex: 'order',
key: 'order',
width: 80,
- render: (order) => (
-
- {order}
-
- )
+ render: (order) => {order}
},
{
title: '操作',
@@ -326,48 +382,25 @@ function DeviceFieldManagement() {
fixed: 'right',
render: (_, record) => (
- }
- onClick={() => showModal(record)}
- style={{
- color: designTokens.colors.primary.main,
- height: '28px',
- padding: '0 8px'
- }}
- >
+ } onClick={() => showModal(record)} style={editButtonStyle}>
编辑
- }
- onClick={() => handleDelete(record.fieldId)}
- style={{
- height: '28px',
- padding: '0 8px'
- }}
- >
+ } onClick={() => handleDelete(record.fieldId)} style={deleteButtonStyle}>
删除
),
},
- ];
+ ], []);
return (
-
}
- onClick={() => showModal()}
- style={primaryActionStyle}
- >
+
} onClick={() => showModal()} style={primaryActionStyle}>
添加字段
@@ -390,30 +423,18 @@ function DeviceFieldManagement() {
- {editingField ? '编辑字段' : '添加字段'}
-
- }
+ title={{editingField ? '编辑字段' : '添加字段'}}
open={modalVisible}
onCancel={handleCancel}
footer={null}
width={600}
- styles={{
- body: { padding: designTokens.spacing.lg }
- }}
- style={{
- borderRadius: designTokens.borderRadius.large
- }}
+ styles={{ body: modalBodyStyle }}
+ style={modalStyle}
>
-