imeeting/frontend/src/pages/business/AiModels.tsx

import React, { useEffect, useMemo, useRef, useState } from "react";
import {
  AutoComplete,
  Button,
  Card,
  Col,
  Divider,
  Drawer,
  Form,
  Input,
  InputNumber,
  Popconfirm,
  Row,
  Select,
  Space,
  Switch,
  Table,
  Tabs,
  Tag,
  Tooltip,
  Typography,
  message,
} from "antd";
import {
  DeleteOutlined,
  EditOutlined,
  PlusOutlined,
  SafetyCertificateOutlined,
  SaveOutlined,
  SearchOutlined,
  SyncOutlined,
} from "@ant-design/icons";
import { useDict } from "../../hooks/useDict";
import {
  AiModelDTO,
  AiModelVO,
  deleteAiModelByType,
  getAiModelPage,
  getRemoteModelList,
  saveAiModel,
  updateAiModel,
} from "../../api/business/aimodel";

const { Option } = Select;
const { Title } = Typography;

type ModelType = "ASR" | "LLM";

const PROVIDER_BASE_URL_MAP: Record<string, string> = {
  openai: "https://api.openai.com/v1",
  deepseek: "https://api.deepseek.com",
  aliyun: "https://dashscope.aliyuncs.com/compatible-mode/v1",
  qwen: "https://dashscope.aliyuncs.com/compatible-mode/v1",
  dashscope: "https://dashscope.aliyuncs.com/compatible-mode/v1",
  moonshot: "https://api.moonshot.cn/v1",
  kimi: "https://api.moonshot.cn/v1",
  groq: "https://api.groq.com/openai/v1",
};

const AiModels: React.FC = () => {
  const [form] = Form.useForm();
  const { items: providers } = useDict("biz_ai_provider");

  const [activeType, setActiveType] = useState<ModelType>("ASR");
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<AiModelVO[]>([]);
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);
  const [size, setSize] = useState(10);
  const [searchName, setSearchName] = useState("");

  const [drawerVisible, setDrawerVisible] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [submitLoading, setSubmitLoading] = useState(false);
  const [fetchLoading, setFetchLoading] = useState(false);
  const [remoteModels, setRemoteModels] = useState<string[]>([]);
  const modelNameAutoFilledRef = useRef(false);

  const provider = Form.useWatch("provider", form);

  const isPlatformAdmin = useMemo(() => {
    const profileStr = sessionStorage.getItem("userProfile");
    if (!profileStr) {
      return false;
    }

    const profile = JSON.parse(profileStr);
    return profile.isPlatformAdmin === true;
  }, []);

  useEffect(() => {
    void fetchData();
  }, [current, size, searchName, activeType]);

  useEffect(() => {
    if (!drawerVisible || !provider) {
      return;
    }

    const providerItem = providers.find((item) => item.itemValue === provider);
    const providerLabel = providerItem?.itemLabel || provider;
    const currentDisplayName = form.getFieldValue("modelName");
    if (!editingId && (!currentDisplayName || modelNameAutoFilledRef.current)) {
      form.setFieldValue("modelName", providerLabel);
      modelNameAutoFilledRef.current = true;
    }

    const baseUrl = form.getFieldValue("baseUrl");
    const providerKey = String(provider).toLowerCase();
    const defaultBaseUrl = PROVIDER_BASE_URL_MAP[providerKey];
    if (!baseUrl && defaultBaseUrl) {
      form.setFieldValue("baseUrl", defaultBaseUrl);
    }
  }, [provider, drawerVisible, editingId, providers, form]);

  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await getAiModelPage({
        current,
        size,
        name: searchName || undefined,
        type: activeType,
      });
      const pageData = (res as any)?.data?.data ?? (res as any);
      setData(pageData?.records || []);
      setTotal(pageData?.total || 0);
    } finally {
      setLoading(false);
    }
  };

  const openDrawer = (record?: AiModelVO) => {
    setRemoteModels([]);
    modelNameAutoFilledRef.current = false;

    if (record) {
      setEditingId(record.id);
      form.setFieldsValue({
        ...record,
        modelType: record.modelType,
        isDefaultChecked: record.isDefault === 1,
        statusChecked: record.status === 1,
      });
      if (record.modelCode) {
        setRemoteModels([record.modelCode]);
      }
    } else {
      setEditingId(null);
      form.resetFields();
      form.setFieldsValue({
        modelType: activeType,
        isDefaultChecked: false,
        statusChecked: true,
        temperature: 0.7,
        topP: 0.9,
        apiPath: "/v1/chat/completions",
      });
    }

    setDrawerVisible(true);
  };

  const handleFetchRemote = async () => {
    const values = form.getFieldsValue(["provider", "baseUrl", "apiKey"]);
    if (!values.provider || !values.baseUrl) {
      message.warning("请先填写提供商和 Base URL");
      return;
    }

    setFetchLoading(true);
    try {
      const res = await getRemoteModelList(values);
      const rawModels = (res as any)?.data?.data ?? (Array.isArray(res) ? res : []);
      const models = Array.isArray(rawModels) ? rawModels : [];
      setRemoteModels(models);
      message.success(`获取到 ${models.length} 个模型`);
    } finally {
      setFetchLoading(false);
    }
  };

  const handleSubmit = async () => {
    const values = await form.validateFields();
    const payload: AiModelDTO = {
      id: editingId ?? undefined,
      modelType: values.modelType,
      modelName: values.modelName,
      provider: values.provider,
      baseUrl: values.baseUrl,
      apiPath: values.apiPath,
      apiKey: values.apiKey,
      modelCode: values.modelCode,
      wsUrl: values.wsUrl,
      temperature: values.temperature,
      topP: values.topP,
      isDefault: values.isDefaultChecked ? 1 : 0,
      status: values.statusChecked ? 1 : 0,
      remark: values.remark,
    };

    setSubmitLoading(true);
    try {
      if (editingId) {
        await updateAiModel(payload);
        message.success("更新成功");
      } else {
        await saveAiModel(payload);
        message.success("新增成功");
      }
      setDrawerVisible(false);
      void fetchData();
    } finally {
      setSubmitLoading(false);
    }
  };

  const handleDelete = async (record: AiModelVO) => {
    await deleteAiModelByType(record.id, record.modelType);
    message.success("删除成功");
    void fetchData();
  };

  const columns = [
    {
      title: "模型名称",
      dataIndex: "modelName",
      key: "modelName",
      render: (text: string, record: AiModelVO) => (
        <Space>
          {text}
          {record.isDefault === 1 && <Tag color="gold">默认</Tag>}
          {record.tenantId === 0 && (
            <Tooltip title="系统预置">
              <SafetyCertificateOutlined style={{ color: "#52c41a" }} />
            </Tooltip>
          )}
        </Space>
      ),
    },
    {
      title: "提供商",
      dataIndex: "provider",
      key: "provider",
      render: (value: string) => {
        const item = providers.find((providerItem) => providerItem.itemValue === value);
        return item ? <Tag>{item.itemLabel}</Tag> : value;
      },
    },
    { title: "模型名称(code)", dataIndex: "modelCode", key: "modelCode" },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (status: number) =>
        status === 1 ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
    },
    {
      title: "操作",
      key: "action",
      render: (_: unknown, record: AiModelVO) => {
        const canEdit = record.tenantId !== 0 || isPlatformAdmin;
        return (
          <Space>
            {canEdit && (
              <Button type="link" icon={<EditOutlined />} onClick={() => openDrawer(record)}>
                编辑
              </Button>
            )}
            {canEdit && (
              <Popconfirm title="确定删除吗？" onConfirm={() => handleDelete(record)}>
                <Button type="link" danger icon={<DeleteOutlined />}>
                  删除
                </Button>
              </Popconfirm>
            )}
          </Space>
        );
      },
    },
  ];

  return (
    <div style={{ padding: 24 }}>
      <Card
        title="AI 模型配置"
        extra={
          <Space>
            <Input
              placeholder="搜索模型名称"
              prefix={<SearchOutlined />}
              allowClear
              onPressEnter={(event) => setSearchName((event.target as HTMLInputElement).value)}
              style={{ width: 220 }}
            />
            <Button type="primary" icon={<PlusOutlined />} onClick={() => openDrawer()}>
              新增模型
            </Button>
          </Space>
        }
      >
        <Tabs
          activeKey={activeType}
          onChange={(key) => {
            setActiveType(key as ModelType);
            setCurrent(1);
          }}
          items={[
            { key: "ASR", label: "ASR 模型" },
            { key: "LLM", label: "LLM 模型" },
          ]}
        />

        <Table
          rowKey="id"
          columns={columns}
          dataSource={data}
          loading={loading}
          pagination={{
            current,
            pageSize: size,
            total,
            onChange: (page, pageSize) => {
              setCurrent(page);
              setSize(pageSize);
            },
          }}
        />
      </Card>

      <Drawer
        width={600}
        open={drawerVisible}
        onClose={() => setDrawerVisible(false)}
        title={<Title level={4} style={{ margin: 0 }}>{editingId ? "编辑模型" : "新增模型"}</Title>}
        extra={
          <Space>
            <Button onClick={() => setDrawerVisible(false)}>取消</Button>
            <Button type="primary" icon={<SaveOutlined />} loading={submitLoading} onClick={handleSubmit}>
              保存
            </Button>
          </Space>
        }
      >
        <Form form={form} layout="vertical">
          <Form.Item name="modelType" hidden>
            <Input />
          </Form.Item>

          <Form.Item label="模型类型">
            <Tag color={activeType === "ASR" ? "blue" : "purple"}>
              {activeType === "ASR" ? "语音识别 (ASR)" : "总结模型 (LLM)"}
            </Tag>
          </Form.Item>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="modelName"
                label="显示名称"
                rules={[{ required: true, message: "请输入显示名称" }]}
              >
                <Input
                  onChange={() => {
                    modelNameAutoFilledRef.current = false;
                  }}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="provider"
                label="提供商"
                rules={[{ required: true, message: "请选择提供商" }]}
              >
                <Select allowClear placeholder="请选择">
                  {providers.map((item) => (
                    <Option key={item.itemValue} value={item.itemValue}>
                      {item.itemLabel}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Form.Item name="baseUrl" label="Base URL" rules={[{ required: true, message: "请输入 Base URL" }]}>
            <Input placeholder="https://api.example.com/v1" />
          </Form.Item>

          {!(activeType === "ASR" && provider === "Custom") && (
            <Form.Item name="apiKey" label="API Key">
              <Input.Password />
            </Form.Item>
          )}

          <Divider orientation="left" style={{ fontSize: 14, color: "#999" }}>
            模型参数
          </Divider>

          <Form.Item
            label="模型名称"
            required
            tooltip="可从远程列表选择，也可手动输入；值将作为模型 code 传给后端"
          >
            <Space.Compact style={{ width: "100%" }}>
              <Form.Item
                name="modelCode"
                noStyle
                rules={[{ required: true, message: "请输入或选择模型名称" }]}
              >
                <AutoComplete
                  allowClear
                  style={{ width: "calc(100% - 100px)" }}
                  placeholder="可选择或自定义输入模型名称"
                  options={remoteModels.map((model) => ({ value: model }))}
                  filterOption={(inputValue, option) =>
                    String(option?.value || "").toLowerCase().includes(inputValue.toLowerCase())
                  }
                >
                  <Input />
                </AutoComplete>
              </Form.Item>
              <Button icon={<SyncOutlined spin={fetchLoading} />} onClick={handleFetchRemote} style={{ width: 100 }}>
                刷新
              </Button>
            </Space.Compact>
          </Form.Item>

          {activeType === "ASR" && (
            <Form.Item name="wsUrl" label="WebSocket 地址">
              <Input placeholder="wss://api.example.com/v1/ws" />
            </Form.Item>
          )}

          {activeType === "LLM" && (
            <>
              <Form.Item name="apiPath" label="API 路径" initialValue="/v1/chat/completions">
                <Input />
              </Form.Item>
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item name="temperature" label="Temperature">
                    <InputNumber min={0} max={2} step={0.1} style={{ width: "100%" }} />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="topP" label="Top P">
                    <InputNumber min={0} max={1} step={0.1} style={{ width: "100%" }} />
                  </Form.Item>
                </Col>
              </Row>
            </>
          )}

          <Row gutter={16}>
            <Col span={8}>
              <Form.Item name="isDefaultChecked" label="设为默认" valuePropName="checked">
                <Switch checkedChildren="是" unCheckedChildren="否" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="statusChecked" label="状态" valuePropName="checked">
                <Switch checkedChildren="启用" unCheckedChildren="禁用" />
              </Form.Item>
            </Col>
          </Row>

          <Form.Item name="remark" label="备注">
            <Input.TextArea rows={2} />
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
};

export default AiModels;