yunrui_asset/frontend/src/pages/DeviceFieldManagement.jsx

import React, { useState, useEffect, useMemo } from 'react';
import {
  Table,
  Button,
  Modal,
  Form,
  Input,
  Select,
  message,
  Card,
  Space,
  InputNumber,
  Switch,
  Tag,
  Statistic,
  Tooltip,
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  AppstoreOutlined,
  FontSizeOutlined,
  NumberOutlined,
  CheckCircleOutlined,
  CalendarOutlined,
  FileTextOutlined,
  LockOutlined,
} from '@ant-design/icons';
import axios from 'axios';
import { designTokens } from '../config/theme';

const { Option = Select.Option } = Select;

const pageContainerStyle = {
  minHeight: '100vh',
  background: designTokens.colors.background.secondary,
  padding: designTokens.spacing.lg,
};

const titleRowStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  marginBottom: designTokens.spacing.lg,
};

const titleStyle = {
  display: 'flex',
  alignItems: 'center',
  gap: designTokens.spacing.sm,
  fontSize: '20px',
  fontWeight: '600',
  color: designTokens.colors.text.primary,
};

const actionButtonStyle = {
  height: '36px',
  padding: `0 ${designTokens.spacing.md}px`,
  borderRadius: designTokens.borderRadius.small,
  fontSize: '13px',
  display: 'flex',
  alignItems: 'center',
  gap: designTokens.spacing.xs,
};

const primaryActionStyle = {
  ...actionButtonStyle,
  background: designTokens.colors.primary.gradient,
  border: 'none',
  color: '#ffffff',
  boxShadow: designTokens.shadows.small,
};

const tableCardStyle = {
  background: designTokens.colors.background.primary,
  borderRadius: designTokens.borderRadius.large,
  boxShadow: designTokens.shadows.small,
  border: `1px solid ${designTokens.colors.border.light}`,
  overflow: 'hidden',
};

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);
  const [modalVisible, setModalVisible] = useState(false);
  const [editingField, setEditingField] = useState(null);
  const [form] = Form.useForm();
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    pageSizeOptions: ['10', '20', '50', '100'],
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条 / 共 ${total} 条`,
  });

  const fetchFields = async () => {
    try {
      setLoading(true);
      const response = await axios.get('/api/deviceFields');
      setFields(response.data.sort((a, b) => a.order - b.order));
    } catch (error) {
      message.error('获取字段列表失败');
      console.error('获取字段列表失败:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchFields();
  }, []);

  const showModal = (field = null) => {
    setEditingField(field);
    if (field) {
      const fieldData = {
        ...field,
        options: field.options ? JSON.stringify(field.options, null, 2) : '',
      };
      form.setFieldsValue(fieldData);
    } else {
      form.resetFields();
    }
    setModalVisible(true);
  };

  const handleCancel = () => {
    setModalVisible(false);
    setEditingField(null);
  };

  const handleSubmit = async values => {
    try {
      const fieldData = {
        ...values,
        options: values.options ? JSON.parse(values.options) : null,
      };

      if (editingField) {
        await axios.put(`/api/deviceFields/${editingField.fieldId}`, fieldData);
        message.success('字段更新成功');
      } else {
        await axios.post('/api/deviceFields', fieldData);
        message.success('字段创建成功');
      }

      setModalVisible(false);
      fetchFields();
      setEditingField(null);
    } catch (error) {
      message.error(editingField ? '字段更新失败' : '字段创建失败');
      console.error(editingField ? '字段更新失败:' : '字段创建失败:', error);
    }
  };

  const handleDelete = async fieldId => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个字段吗？',
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          await axios.delete(`/api/deviceFields/${fieldId}`);
          message.success('字段删除成功');
          fetchFields();
        } catch (error) {
          message.error('字段删除失败');
          console.error('字段删除失败:', error);
        }
      },
    });
  };

  const getFieldTypeIcon = type => {
    const iconMap = {
      string: <FontSizeOutlined />,
      number: <NumberOutlined />,
      boolean: <CheckCircleOutlined />,
      select: <AppstoreOutlined />,
      date: <CalendarOutlined />,
      textarea: <FileTextOutlined />,
    };
    return iconMap[type] || <FontSizeOutlined />;
  };

  const columns = useMemo(
    () => [
      {
        title: '字段名称',
        dataIndex: 'fieldName',
        key: 'fieldName',
        width: 150,
        render: (text, record) => (
          <Space>
            <span style={tableCellStyle}>{text}</span>
            {record.isSystem && (
              <Tooltip title="系统字段，不可删除">
                <LockOutlined style={{ color: '#f59e0b', fontSize: '14px' }} />
              </Tooltip>
            )}
          </Space>
        ),
      },
      {
        title: '显示名称',
        dataIndex: 'displayName',
        key: 'displayName',
        width: 120,
      },
      {
        title: '字段类型',
        dataIndex: 'fieldType',
        key: 'fieldType',
        width: 110,
        render: type => {
          const config = FIELD_TYPE_MAP[type] || {
            text: type,
            color: designTokens.colors.text.tertiary,
          };
          return (
            <Tag style={{ ...typeTagStyle, background: `${config.color}15`, color: config.color }}>
              {getFieldTypeIcon(type)}
              <span style={{ marginLeft: '4px' }}>{config.text}</span>
            </Tag>
          );
        },
      },
      {
        title: '必填',
        dataIndex: 'required',
        key: 'required',
        width: 80,
        render: required => (
          <span
            style={{
              color: required
                ? designTokens.colors.success.main
                : designTokens.colors.text.tertiary,
              ...tableCellStyle,
            }}
          >
            {required ? '是' : '否'}
          </span>
        ),
      },
      {
        title: '可见',
        dataIndex: 'visible',
        key: 'visible',
        width: 80,
        render: visible => (
          <span
            style={{
              color: visible ? designTokens.colors.primary.main : designTokens.colors.text.tertiary,
              ...tableCellStyle,
            }}
          >
            {visible ? '是' : '否'}
          </span>
        ),
      },
      {
        title: '顺序',
        dataIndex: 'order',
        key: 'order',
        width: 80,
        render: order => <span style={orderBadgeStyle}>{order}</span>,
      },
      {
        title: '操作',
        key: 'action',
        width: 160,
        fixed: 'right',
        render: (_, record) => (
          <Space size="small">
            <Button
              type="text"
              icon={<EditOutlined />}
              onClick={() => showModal(record)}
              className="table-action-btn"
            >
              编辑
            </Button>
            {record.isSystem ? (
              <Tooltip title="系统字段不可删除">
                <Button
                  type="text"
                  danger
                  icon={<DeleteOutlined />}
                  disabled
                  className="table-action-btn-disabled"
                >
                  删除
                </Button>
              </Tooltip>
            ) : (
              <Button
                type="text"
                danger
                icon={<DeleteOutlined />}
                onClick={() => handleDelete(record.fieldId)}
                className="table-action-btn"
              >
                删除
              </Button>
            )}
          </Space>
        ),
      },
    ],
    []
  );

  return (
    <div style={pageContainerStyle}>
      <div style={titleRowStyle}>
        <div style={titleStyle}>
          <AppstoreOutlined style={titleIconStyle} />
          设备字段管理
        </div>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => showModal()}
          className="page-primary-btn"
        >
          添加字段
        </Button>
      </div>

      <div style={tableCardStyle}>
        <Table
          columns={columns}
          dataSource={fields}
          rowKey="fieldId"
          loading={loading}
          pagination={pagination}
          onChange={newPagination => {
            setPagination({
              ...pagination,
              current: newPagination.current,
              pageSize: newPagination.pageSize,
            });
          }}
          scroll={{ x: 900 }}
          style={tableStyle}
        />
      </div>

      <Modal
        title={<span style={modalTitleStyle}>{editingField ? '编辑字段' : '添加字段'}</span>}
        open={modalVisible}
        onCancel={handleCancel}
        footer={null}
        width={600}
        styles={{ body: modalBodyStyle }}
        style={modalStyle}
      >
        <Form form={form} layout="vertical" onFinish={handleSubmit}>
          <Form.Item
            name="fieldName"
            label={<span style={formLabelStyle}>字段名称</span>}
            rules={[{ required: true, message: '请输入字段名称' }]}
          >
            <Input placeholder="请输入字段名称（英文，如：deviceId）" />
          </Form.Item>

          <Form.Item
            name="displayName"
            label={<span style={formLabelStyle}>显示名称</span>}
            rules={[{ required: true, message: '请输入显示名称' }]}
          >
            <Input placeholder="请输入显示名称（中文，如：设备ID）" />
          </Form.Item>

          <Form.Item
            name="fieldType"
            label={<span style={formLabelStyle}>字段类型</span>}
            rules={[{ required: true, message: '请选择字段类型' }]}
          >
            <Select placeholder="请选择字段类型">
              {FIELD_TYPE_OPTIONS.map(opt => (
                <Option key={opt.value} value={opt.value}>
                  {opt.label}
                </Option>
              ))}
            </Select>
          </Form.Item>

          <div style={formRowStyle}>
            <Form.Item
              name="required"
              label={<span style={formLabelStyle}>必填</span>}
              valuePropName="checked"
              style={formItemFlexStyle}
            >
              <Switch />
            </Form.Item>

            <Form.Item
              name="visible"
              label={<span style={formLabelStyle}>可见</span>}
              valuePropName="checked"
              style={formItemFlexStyle}
            >
              <Switch defaultChecked />
            </Form.Item>
          </div>

          <Form.Item
            name="order"
            label={<span style={formLabelStyle}>显示顺序</span>}
            rules={[{ required: true, message: '请输入显示顺序' }]}
          >
            <InputNumber placeholder="请输入显示顺序" min={0} style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
            name="options"
            label={<span style={formLabelStyle}>选项配置（JSON格式）</span>}
            tooltip="格式示例：[{value: 'option1', label: '选项1'}]，仅下拉选择类型需要配置"
          >
            <Input.TextArea
              rows={3}
              placeholder="请输入JSON格式的选项配置，使用单引号"
              style={textAreaStyle}
            />
          </Form.Item>

          <Form.Item style={formActionsStyle}>
            <Space>
              <Button onClick={handleCancel}>取消</Button>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default DeviceFieldManagement;