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

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

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(),
        llm_provider: data.llm_provider,
        custom_openai_base_url: data.base_urls?.custom_openai || "",
        custom_openai_model: data.models?.custom_openai || "gpt-4o-mini",
      });
    } catch {
      message.error("加载设置失败");
    } finally {
      setLoading(false);
    }
  };

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

  const onFinish = async (values: {
    system_api_base_url?: string;
    llm_provider: "openai" | "anthropic" | "deepseek" | "custom_openai";
    openai_api_key?: string;
    anthropic_api_key?: string;
    deepseek_api_key?: string;
    custom_openai_api_key?: string;
    custom_openai_base_url?: string;
    custom_openai_model?: string;
  }) => {
    setSaving(true);
    try {
      setApiBaseUrl(values.system_api_base_url || "");
      const payload = {
        llm_provider: values.llm_provider,
        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("设置已保存并生效（含系统 API BaseURL）");
    } catch {
      message.error("保存失败");
    } finally {
      setSaving(false);
    }
  };

  return (
    <Card title="LLM 设置" loading={loading}>
      <Alert
        type="info"
        showIcon
        style={{ marginBottom: 16 }}
        message="LLM API Key 仅在当前服务进程运行期内生效，不会自动写入磁盘。"
      />
      <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 或 http://127.0.0.1:8000/api" />
        </Form.Item>
        <Form.Item
          label="默认模型提供商"
          name="llm_provider"
          rules={[{ required: true, message: "请选择提供商" }]}
        >
          <Select
            options={[
              { label: "OpenAI", value: "openai" },
              { label: "Anthropic", value: "anthropic" },
              { label: "DeepSeek", value: "deepseek" },
              { label: "自定义(OpenAI兼容)", value: "custom_openai" },
            ]}
          />
        </Form.Item>
        <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="自定义厂商 Model" 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 }}>
          <div>系统 API BaseURL: {getApiBaseUrl()}</div>
          <div>当前提供商: {runtime.llm_provider}</div>
          <div>OpenAI Key: {runtime.has_keys.openai ? "已配置" : "未配置"}</div>
          <div>Anthropic Key: {runtime.has_keys.anthropic ? "已配置" : "未配置"}</div>
          <div>DeepSeek Key: {runtime.has_keys.deepseek ? "已配置" : "未配置"}</div>
          <div>自定义厂商 Key: {runtime.has_keys.custom_openai ? "已配置" : "未配置"}</div>
          <div>自定义厂商 BaseURL: {runtime.base_urls.custom_openai || "-"}</div>
        </Card>
      )}
    </Card>
  );
}