erp/apps/web/src/pages/settings/SystemSettings.tsx

import { useState } from 'react';
import {
  Button,
  Form,
  Input,
  Space,
  Popconfirm,
  message,
  Table,
  Modal,
  Tag,
  theme,
} from 'antd';
import { PlusOutlined, SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import {
  getSetting,
  updateSetting,
  deleteSetting,
} from '../../api/settings';

interface SettingEntry {
  key: string;
  value: string;
}

export default function SystemSettings() {
  const [entries, setEntries] = useState<SettingEntry[]>([]);
  const [searchKey, setSearchKey] = useState('');
  const [modalOpen, setModalOpen] = useState(false);
  const [editEntry, setEditEntry] = useState<SettingEntry | null>(null);
  const [form] = Form.useForm();
  const { token } = theme.useToken();
  const isDark = token.colorBgContainer === '#111827' || token.colorBgContainer === 'rgb(17, 24, 39)';

  const handleSearch = async () => {
    if (!searchKey.trim()) {
      message.warning('请输入设置键名');
      return;
    }
    try {
      const result = await getSetting(searchKey.trim());
      const value = String(result.setting_value ?? '');

      setEntries((prev) => {
        const exists = prev.findIndex((e) => e.key === searchKey.trim());
        if (exists >= 0) {
          const updated = [...prev];
          updated[exists] = { ...updated[exists], value };
          return updated;
        }
        return [...prev, { key: searchKey.trim(), value }];
      });
      message.success('查询成功');
    } catch (err: unknown) {
      const status = (err as { response?: { status?: number } })?.response?.status;
      if (status === 404) {
        message.info('该设置键不存在，可点击"添加设置"创建');
      } else {
        message.error('查询失败');
      }
    }
  };

  const handleSave = async (values: { setting_key: string; setting_value: string }) => {
    const key = values.setting_key.trim();
    const value = values.setting_value;
    try {
      try {
        JSON.parse(value);
      } catch {
        message.error('设置值必须是有效的 JSON 格式');
        return;
      }

      await updateSetting(key, value);

      setEntries((prev) => {
        const exists = prev.findIndex((e) => e.key === key);
        if (exists >= 0) {
          const updated = [...prev];
          updated[exists] = { key, value };
          return updated;
        }
        return [...prev, { key, value }];
      });

      message.success('设置已保存');
      closeModal();
    } catch (err: unknown) {
      const errorMsg =
        (err as { response?: { data?: { message?: string } } })?.response?.data?.message || '保存失败';
      message.error(errorMsg);
    }
  };

  const handleDelete = async (key: string) => {
    try {
      await deleteSetting(key);
      setEntries((prev) => prev.filter((e) => e.key !== key));
      message.success('设置已删除');
    } catch {
      message.error('删除失败');
    }
  };

  const openCreate = () => {
    setEditEntry(null);
    form.resetFields();
    setModalOpen(true);
  };

  const openEdit = (entry: SettingEntry) => {
    setEditEntry(entry);
    form.setFieldsValue({
      setting_key: entry.key,
      setting_value: entry.value,
    });
    setModalOpen(true);
  };

  const closeModal = () => {
    setModalOpen(false);
    setEditEntry(null);
    form.resetFields();
  };

  const columns = [
    {
      title: '键',
      dataIndex: 'key',
      key: 'key',
      width: 250,
      render: (v: string) => (
        <Tag style={{
          background: isDark ? '#1E293B' : '#F1F5F9',
          border: 'none',
          color: isDark ? '#CBD5E1' : '#475569',
          fontFamily: 'monospace',
          fontSize: 12,
        }}>
          {v}
        </Tag>
      ),
    },
    {
      title: '值 (JSON)',
      dataIndex: 'value',
      key: 'value',
      ellipsis: true,
      render: (v: string) => (
        <span style={{ fontFamily: 'monospace', fontSize: 12 }}>{v}</span>
      ),
    },
    {
      title: '操作',
      key: 'actions',
      width: 120,
      render: (_: unknown, record: SettingEntry) => (
        <Space size={4}>
          <Button
            size="small"
            type="text"
            icon={<EditOutlined />}
            onClick={() => openEdit(record)}
            style={{ color: isDark ? '#94A3B8' : '#64748B' }}
          />
          <Popconfirm
            title="确定删除此设置？"
            onConfirm={() => handleDelete(record.key)}
          >
            <Button
              size="small"
              type="text"
              danger
              icon={<DeleteOutlined />}
            />
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 16,
      }}>
        <Space>
          <Input
            placeholder="输入设置键名查询"
            prefix={<SearchOutlined style={{ color: '#94A3B8' }} />}
            value={searchKey}
            onChange={(e) => setSearchKey(e.target.value)}
            onPressEnter={handleSearch}
            style={{ width: 300, borderRadius: 8 }}
          />
          <Button onClick={handleSearch}>查询</Button>
        </Space>
        <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
          添加设置
        </Button>
      </div>

      <div style={{
        background: isDark ? '#111827' : '#FFFFFF',
        borderRadius: 12,
        border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
        overflow: 'hidden',
      }}>
        <Table
          columns={columns}
          dataSource={entries}
          rowKey="key"
          size="small"
          pagination={false}
          locale={{ emptyText: '暂无设置项，请通过搜索查询或添加新设置' }}
        />
      </div>

      <Modal
        title={editEntry ? '编辑设置' : '添加设置'}
        open={modalOpen}
        onCancel={closeModal}
        onOk={() => form.submit()}
        width={560}
      >
        <Form form={form} onFinish={handleSave} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item
            name="setting_key"
            label="键名"
            rules={[{ required: true, message: '请输入设置键名' }]}
          >
            <Input disabled={!!editEntry} />
          </Form.Item>
          <Form.Item
            name="setting_value"
            label="值 (JSON)"
            rules={[{ required: true, message: '请输入设置值' }]}
          >
            <Input.TextArea rows={6} placeholder='{"key": "value"}' style={{ fontFamily: 'monospace' }} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}