fund-tracer/frontend/src/pages/Settings.tsx

import { useEffect, useState } from "react";
import { Card, Form, Input, Select, Button, Alert, Space, Divider, Descriptions, message } from "antd";
import {
  api,
  type RuntimeSettings,
  type ProviderKey,
  getApiBaseUrl,
  setApiBaseUrl,
} from "../services/api";

const PROVIDER_OPTIONS = [
  { label: "OpenAI", value: "openai" as ProviderKey },
  { label: "Anthropic", value: "anthropic" as ProviderKey },
  { label: "DeepSeek", value: "deepseek" as ProviderKey },
  { label: "自定义(OpenAI兼容)", value: "custom_openai" as ProviderKey },
];

export default function Settings() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [runtime, setRuntime] = useState<RuntimeSettings | null>(null);

  const loadSettings = async () => {
    setLoading(true);
    try {
      const data = await api.settings.get();
      setRuntime(data);
      form.setFieldsValue({
        system_api_base_url: getApiBaseUrl(),
        ocr_provider: data.ocr_provider,
        ocr_model: data.ocr_model,
        inference_provider: data.inference_provider,
        inference_model: data.inference_model,
        custom_openai_base_url: data.base_urls?.custom_openai || "",
      });
    } catch {
      message.error("加载设置失败");
    } finally {
      setLoading(false);
    }
  };

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

  const onFinish = async (values: Record<string, string | undefined>) => {
    setSaving(true);
    try {
      setApiBaseUrl(values.system_api_base_url || "");
      const payload: Record<string, string | undefined> = {
        ocr_provider: values.ocr_provider,
        ocr_model: values.ocr_model?.trim() || undefined,
        inference_provider: values.inference_provider,
        inference_model: values.inference_model?.trim() || undefined,
        openai_api_key: values.openai_api_key?.trim() || undefined,
        anthropic_api_key: values.anthropic_api_key?.trim() || undefined,
        deepseek_api_key: values.deepseek_api_key?.trim() || undefined,
        custom_openai_api_key: values.custom_openai_api_key?.trim() || undefined,
        custom_openai_base_url: values.custom_openai_base_url?.trim() || undefined,
        custom_openai_model: values.custom_openai_model?.trim() || undefined,
      };
      const data = await api.settings.update(payload);
      setRuntime(data);
      message.success("设置已保存");
    } catch {
      message.error("保存失败");
    } finally {
      setSaving(false);
    }
  };

  return (
    <Card title="模型与接口设置" loading={loading}>
      <Alert
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
        message="API Key 仅在当前服务进程运行期内生效，不写入磁盘。OCR 模型用于从截图中提取交易，推理模型用于生成报告等文本推理任务。"
      />
      <Form form={form} layout="vertical" onFinish={onFinish}>
        <Form.Item
          label="系统 API BaseURL（前端请求后端）"
          name="system_api_base_url"
          extra="默认 /api；前后端分离时填 http://127.0.0.1:8000/api"
        >
          <Input placeholder="/api" />
        </Form.Item>

        <Divider orientation="left">OCR 视觉模型（截图识别交易）</Divider>

        <Form.Item label="OCR 提供商" name="ocr_provider" rules={[{ required: true }]}>
          <Select options={PROVIDER_OPTIONS} />
        </Form.Item>
        <Form.Item label="OCR 模型名" name="ocr_model" extra="留空则使用该提供商的默认模型">
          <Input placeholder="如 gpt-4o / qwen-vl-max / ..." />
        </Form.Item>

        <Divider orientation="left">推理模型（报告生成等文本推理）</Divider>

        <Form.Item label="推理提供商" name="inference_provider" rules={[{ required: true }]}>
          <Select options={PROVIDER_OPTIONS} />
        </Form.Item>
        <Form.Item label="推理模型名" name="inference_model" extra="留空则使用该提供商的默认模型">
          <Input placeholder="如 gpt-4o-mini / deepseek-chat / ..." />
        </Form.Item>

        <Divider orientation="left">API Key 与厂商配置</Divider>

        <Form.Item label="OpenAI API Key" name="openai_api_key">
          <Input.Password placeholder="sk-..." />
        </Form.Item>
        <Form.Item label="Anthropic API Key" name="anthropic_api_key">
          <Input.Password placeholder="sk-ant-..." />
        </Form.Item>
        <Form.Item label="DeepSeek API Key" name="deepseek_api_key">
          <Input.Password placeholder="sk-..." />
        </Form.Item>
        <Form.Item
          label="自定义厂商 BaseURL（OpenAI兼容）"
          name="custom_openai_base_url"
          extra="例如 https://api.xxx.com/v1"
        >
          <Input placeholder="https://api.xxx.com/v1" />
        </Form.Item>
        <Form.Item label="自定义厂商默认模型" name="custom_openai_model">
          <Input placeholder="gpt-4o-mini / qwen-vl-plus / ..." />
        </Form.Item>
        <Form.Item label="自定义厂商 API Key" name="custom_openai_api_key">
          <Input.Password placeholder="sk-..." />
        </Form.Item>

        <Space>
          <Button type="primary" htmlType="submit" loading={saving}>保存设置</Button>
          <Button onClick={loadSettings}>刷新</Button>
        </Space>
      </Form>

      {runtime && (
        <Card title="当前生效配置" size="small" style={{ marginTop: 16 }}>
          <Descriptions column={2} size="small" bordered>
            <Descriptions.Item label="系统 API BaseURL">{getApiBaseUrl()}</Descriptions.Item>
            <Descriptions.Item label="自定义厂商 BaseURL">{runtime.base_urls.custom_openai || "-"}</Descriptions.Item>
            <Descriptions.Item label="OCR 提供商">{runtime.ocr_provider}</Descriptions.Item>
            <Descriptions.Item label="OCR 模型">{runtime.ocr_model}</Descriptions.Item>
            <Descriptions.Item label="推理提供商">{runtime.inference_provider}</Descriptions.Item>
            <Descriptions.Item label="推理模型">{runtime.inference_model}</Descriptions.Item>
            <Descriptions.Item label="OpenAI Key">{runtime.has_keys.openai ? "已配置" : "未配置"}</Descriptions.Item>
            <Descriptions.Item label="Anthropic Key">{runtime.has_keys.anthropic ? "已配置" : "未配置"}</Descriptions.Item>
            <Descriptions.Item label="DeepSeek Key">{runtime.has_keys.deepseek ? "已配置" : "未配置"}</Descriptions.Item>
            <Descriptions.Item label="自定义厂商 Key">{runtime.has_keys.custom_openai ? "已配置" : "未配置"}</Descriptions.Item>
          </Descriptions>
        </Card>
      )}
    </Card>
  );
}