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';

const { Option = Select.Option } = Select;

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%)',
    },
    warning: {
      main: '#f59e0b',
      gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
    },
    error: {
      main: '#ef4444',
      gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
    },
    text: {
      primary: '#1e293b',
      secondary: '#64748b',
      tertiary: '#94a3b8',
      inverse: '#ffffff',
    },
    background: {
      primary: '#ffffff',
      secondary: '#f8fafc',
      tertiary: '#f1f5f9',
    },
    border: {
      light: '#e2e8f0',
      medium: '#cbd5e1',
      dark: '#94a3b8',
    },
    fieldType: {
      string: '#3b82f6',
      number: '#10b981',
      boolean: '#f59e0b',
      select: '#8b5cf6',
      date: '#06b6d4',
      textarea: '#64748b',
    },
  },
  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)',
    glow: '0 0 20px rgba(102, 126, 234, 0.15)',
  },
  borderRadius: {
    small: '6px',
    medium: '10px',
    large: '16px',
  },
  transitions: {
    fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
    normal: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
};

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)}
              style={editButtonStyle}
            >
              编辑
            </Button>
            {record.isSystem ? (
              <Tooltip title="系统字段不可删除">
                <Button
                  type="text"
                  danger
                  icon={<DeleteOutlined />}
                  disabled
                  style={{ ...deleteButtonStyle, opacity: 0.3, cursor: 'not-allowed' }}
                >
                  删除
                </Button>
              </Tooltip>
            ) : (
              <Button
                type="text"
                danger
                icon={<DeleteOutlined />}
                onClick={() => handleDelete(record.fieldId)}
                style={deleteButtonStyle}
              >
                删除
              </Button>
            )}
          </Space>
        ),
      },
    ],
    []
  );

  return (
    <div style={pageContainerStyle}>
      <div style={titleRowStyle}>
        <div style={titleStyle}>
          <AppstoreOutlined style={titleIconStyle} />
          设备字段管理
        </div>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => showModal()}
          style={primaryActionStyle}
        >
          添加字段
        </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;