Neo-ZQYY/apps/admin-web/src/pages/EnvConfig.tsx

/**
 * 环境配置页面。
 *
 * - Ant Design Table 展示键值对，支持 inline 编辑
 * - 敏感值显示为 ****，编辑时可输入新值
 * - 顶部按钮栏：刷新、保存、导出
 */

import React, { useEffect, useState, useCallback, useRef } from 'react';
import { Table, Button, Input, Tag, Space, message, Card, Typography, Badge } from 'antd';
import type { InputRef } from 'antd';
import {
  ReloadOutlined, SaveOutlined, DownloadOutlined, ToolOutlined,
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { EnvConfigItem } from '../types';
import { fetchEnvConfig, updateEnvConfig, exportEnvConfig } from '../api/envConfig';

const { Title, Text } = Typography;

const MASK = '****';

const EnvConfig: React.FC = () => {
  const [items, setItems] = useState<EnvConfigItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [editingKey, setEditingKey] = useState<string | null>(null);
  const [editValue, setEditValue] = useState('');
  const [dirtyMap, setDirtyMap] = useState<Record<string, string>>({});
  const inputRef = useRef<InputRef>(null);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const data = await fetchEnvConfig();
      setItems(data);
      setDirtyMap({});
      setEditingKey(null);
    } catch { message.error('加载环境配置失败'); }
    finally { setLoading(false); }
  }, []);

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

  const startEdit = (key: string, currentValue: string, isSensitive: boolean) => {
    setEditingKey(key);
    setEditValue(isSensitive ? '' : (dirtyMap[key] ?? currentValue));
    setTimeout(() => { inputRef.current?.focus(); }, 0);
  };

  const confirmEdit = (key: string, originalValue: string, isSensitive: boolean) => {
    const trimmed = editValue.trim();
    if (isSensitive && trimmed === '') {
      setDirtyMap((prev) => { const next = { ...prev }; delete next[key]; return next; });
    } else if (!isSensitive && trimmed === originalValue) {
      setDirtyMap((prev) => { const next = { ...prev }; delete next[key]; return next; });
    } else {
      setDirtyMap((prev) => ({ ...prev, [key]: trimmed }));
    }
    setEditingKey(null);
  };

  const cancelEdit = () => { setEditingKey(null); };

  const handleSave = async () => {
    if (Object.keys(dirtyMap).length === 0) { message.info('没有需要保存的修改'); return; }
    setSaving(true);
    try {
      const payload = items.map((item) => ({
        key: item.key,
        value: dirtyMap[item.key] ?? item.value,
        is_sensitive: item.is_sensitive,
      }));
      await updateEnvConfig(payload);
      message.success('保存成功');
      await load();
    } catch { message.error('保存失败'); }
    finally { setSaving(false); }
  };

  const handleExport = async () => {
    setExporting(true);
    try { await exportEnvConfig(); message.success('导出成功'); }
    catch { message.error('导出失败'); }
    finally { setExporting(false); }
  };

  const columns: ColumnsType<EnvConfigItem> = [
    {
      title: '键名', dataIndex: 'key', key: 'key', width: '35%',
      render: (text: string) => <code style={{ fontSize: 12 }}>{text}</code>,
    },
    {
      title: '值', dataIndex: 'value', key: 'value', width: '50%',
      render: (_: string, record: EnvConfigItem) => {
        if (editingKey === record.key) {
          return (
            <Input
              ref={inputRef} value={editValue} size="small"
              placeholder={record.is_sensitive ? '输入新值（留空则不修改）' : undefined}
              onChange={(e) => setEditValue(e.target.value)}
              onPressEnter={() => confirmEdit(record.key, record.value, record.is_sensitive)}
              onBlur={() => confirmEdit(record.key, record.value, record.is_sensitive)}
              onKeyDown={(e) => { if (e.key === 'Escape') cancelEdit(); }}
              style={{ fontFamily: 'monospace' }}
            />
          );
        }
        const isDirty = record.key in dirtyMap;
        const displayValue = record.is_sensitive
          ? (isDirty ? MASK + ' (已修改)' : MASK)
          : (isDirty ? dirtyMap[record.key] : record.value);
        return (
          <span
            style={{ cursor: 'pointer', color: isDirty ? '#1677ff' : undefined, fontFamily: 'monospace', fontSize: 12 }}
            onClick={() => startEdit(record.key, record.value, record.is_sensitive)}
            title="点击编辑"
          >
            {displayValue || <Text type="secondary">（空）</Text>}
          </span>
        );
      },
    },
    {
      title: '类型', dataIndex: 'is_sensitive', key: 'is_sensitive', width: '15%', align: 'center',
      render: (v: boolean) => v ? <Tag color="red">敏感</Tag> : <Tag color="green">普通</Tag>,
    },
  ];

  const hasDirty = Object.keys(dirtyMap).length > 0;

  return (
    <div>
      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Title level={4} style={{ margin: 0 }}>
          <ToolOutlined style={{ marginRight: 8 }} />
          环境配置
        </Title>
        <Space>
          <Button icon={<ReloadOutlined />} onClick={load} loading={loading}>刷新</Button>
          <Badge count={hasDirty ? Object.keys(dirtyMap).length : 0} size="small">
            <Button
              type="primary" icon={<SaveOutlined />}
              onClick={handleSave} loading={saving} disabled={!hasDirty}
            >
              保存
            </Button>
          </Badge>
          <Button icon={<DownloadOutlined />} onClick={handleExport} loading={exporting}>导出</Button>
        </Space>
      </div>

      <Card size="small">
        <Table<EnvConfigItem>
          rowKey="key" columns={columns} dataSource={items}
          loading={loading} pagination={false} size="small"
        />
      </Card>
    </div>
  );
};

export default EnvConfig;