zclaw_openfang/admin-v2/src/pages/ModelServices.tsx

import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Button, message, Tag, Modal, Form, Input, InputNumber, Switch, Space, Popconfirm, Tabs, Table, Typography } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import type { ProColumns } from '@ant-design/pro-components'
import { ProTable } from '@ant-design/pro-components'
import { providerService } from '@/services/providers'
import { modelService } from '@/services/models'
import type { Provider, ProviderKey, Model } from '@/types'

const { Text } = Typography

// ============================================================
// 子组件: 模型表格
// ============================================================
function ProviderModelsTable({ providerId }: { providerId: string }) {
  const queryClient = useQueryClient()
  const [form] = Form.useForm()
  const [modalOpen, setModalOpen] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)

  const { data, isLoading } = useQuery({
    queryKey: ['provider-models', providerId],
    queryFn: ({ signal }) => modelService.list({ provider_id: providerId! }, signal),
  })

  const createMutation = useMutation({
    mutationFn: (data: Partial<Omit<Model, 'id'>>) => modelService.create(data),
    onSuccess: () => {
      message.success('模型已创建')
      queryClient.invalidateQueries({ queryKey: ['provider-models', providerId] })
      setModalOpen(false)
      form.resetFields()
    },
    onError: (err: Error) => message.error(err.message || '创建失败'),
  })

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Model, 'id'>> }) =>
      modelService.update(id, data),
    onSuccess: () => {
      message.success('模型已更新')
      queryClient.invalidateQueries({ queryKey: ['provider-models', providerId] })
      setModalOpen(false)
    },
    onError: (err: Error) => message.error(err.message || '更新失败'),
  })

  const deleteMutation = useMutation({
    mutationFn: (id: string) => modelService.delete(id),
    onSuccess: () => {
      message.success('模型已删除')
      queryClient.invalidateQueries({ queryKey: ['provider-models', providerId] })
    },
    onError: (err: Error) => message.error(err.message || '删除失败'),
  })

  const handleSave = async () => {
    const values = await form.validateFields()
    if (editingId) {
      updateMutation.mutate({ id: editingId, data: values })
    } else {
      createMutation.mutate({ ...values, provider_id: providerId })
    }
  }

  const columns: ProColumns<Model>[] = [
    { title: '模型 ID', dataIndex: 'model_id', width: 180, render: (_, r) => <Text code>{r.model_id}</Text> },
    { title: '别名', dataIndex: 'alias', width: 120 },
    { title: '类型', dataIndex: 'is_embedding', width: 80, render: (_, r) => r.is_embedding ? <Tag color="purple">Embedding</Tag> : <Tag>Chat</Tag> },
    { title: '上下文窗口', dataIndex: 'context_window', width: 100, render: (_, r) => r.context_window?.toLocaleString() },
    { title: '最大输出', dataIndex: 'max_output_tokens', width: 90, render: (_, r) => r.max_output_tokens?.toLocaleString() },
    { title: '流式', dataIndex: 'supports_streaming', width: 60, render: (_, r) => r.supports_streaming ? <Tag color="green">是</Tag> : <Tag>否</Tag> },
    { title: '视觉', dataIndex: 'supports_vision', width: 60, render: (_, r) => r.supports_vision ? <Tag color="blue">是</Tag> : <Tag>否</Tag> },
    { title: '状态', dataIndex: 'enabled', width: 60, render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag> },
    {
      title: '操作', width: 120, render: (_, record) => (
        <Space>
          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>编辑</Button>
          <Popconfirm title="确定删除此模型?" onConfirm={() => deleteMutation.mutate(record.id)}>
            <Button size="small" danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  const models = data?.items ?? []

  return (
    <div>
      <div style={{ marginBottom: 8 }}>
        <Button size="small" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
          添加模型
        </Button>
      </div>
      <Table<Model>
        columns={columns}
        dataSource={models}
        loading={isLoading}
        rowKey="id"
        size="small"
        pagination={false}
      />
      <Modal
        title={editingId ? '编辑模型' : '添加模型'}
        open={modalOpen}
        onOk={handleSave}
        onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
        confirmLoading={createMutation.isPending || updateMutation.isPending}
        width={560}
      >
        <Form form={form} layout="vertical">
          <Form.Item name="model_id" label="模型 ID" rules={[{ required: true }]}>
            <Input placeholder="如 gpt-4o" />
          </Form.Item>
          <Form.Item name="alias" label="别名">
            <Input placeholder="可选" />
          </Form.Item>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="context_window" label="上下文窗口" style={{ flex: 1 }}>
              <InputNumber min={0} placeholder="128000" style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item name="max_output_tokens" label="最大输出 Token" style={{ flex: 1 }}>
              <InputNumber min={0} placeholder="4096" style={{ width: '100%' }} />
            </Form.Item>
          </div>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="enabled" label="启用" valuePropName="checked" style={{ flex: 1 }}>
              <Switch />
            </Form.Item>
            <Form.Item name="is_embedding" label="Embedding 模型" valuePropName="checked" style={{ flex: 1 }}>
              <Switch />
            </Form.Item>
            <Form.Item name="supports_streaming" label="支持流式" valuePropName="checked" style={{ flex: 1 }}>
              <Switch defaultChecked />
            </Form.Item>
            <Form.Item name="supports_vision" label="支持视觉" valuePropName="checked" style={{ flex: 1 }}>
              <Switch />
            </Form.Item>
          </div>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="pricing_input" label="输入价格 (每百万Token)" style={{ flex: 1 }}>
              <InputNumber min={0} step={0.01} placeholder="0" style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item name="pricing_output" label="输出价格 (每百万Token)" style={{ flex: 1 }}>
              <InputNumber min={0} step={0.01} placeholder="0" style={{ width: '100%' }} />
            </Form.Item>
          </div>
        </Form>
      </Modal>
    </div>
  )
}

// ============================================================
// 子组件: Key Pool 表格
// ============================================================
function ProviderKeysTable({ providerId }: { providerId: string }) {
  const queryClient = useQueryClient()
  const [addKeyForm] = Form.useForm()
  const [addKeyOpen, setAddKeyOpen] = useState(false)

  const { data, isLoading } = useQuery({
    queryKey: ['provider-keys', providerId],
    queryFn: ({ signal }) => providerService.listKeys(providerId!, signal),
  })

  const addKeyMutation = useMutation({
    mutationFn: (data: { key_label: string; key_value: string; priority?: number; max_rpm?: number; max_tpm?: number }) =>
      providerService.addKey(providerId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['provider-keys', providerId] })
      message.success('密钥已添加')
      setAddKeyOpen(false)
      addKeyForm.resetFields()
    },
    onError: () => message.error('添加失败'),
  })

  const toggleKeyMutation = useMutation({
    mutationFn: ({ keyId, active }: { keyId: string; active: boolean }) =>
      providerService.toggleKey(providerId, keyId, active),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['provider-keys', providerId] })
      message.success('状态已切换')
    },
    onError: () => message.error('切换失败'),
  })

  const deleteKeyMutation = useMutation({
    mutationFn: (keyId: string) => providerService.deleteKey(providerId, keyId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['provider-keys', providerId] })
      message.success('密钥已删除')
    },
    onError: () => message.error('删除失败'),
  })

  const keyColumns: ProColumns<ProviderKey>[] = [
    { title: '标签', dataIndex: 'key_label', width: 120 },
    { title: '优先级', dataIndex: 'priority', width: 70 },
    { title: '请求数', dataIndex: 'total_requests', width: 80 },
    { title: 'Token 数', dataIndex: 'total_tokens', width: 90 },
    {
      title: '状态', dataIndex: 'is_active', width: 70,
      render: (_, r) => r.is_active ? <Tag color="green">活跃</Tag> : <Tag color="orange">冷却</Tag>,
    },
    {
      title: '操作', width: 120,
      render: (_, record) => (
        <Space>
          <Popconfirm
            title={record.is_active ? '确定禁用此密钥?' : '确定启用此密钥?'}
            onConfirm={() => toggleKeyMutation.mutate({ keyId: record.id, active: !record.is_active })}
          >
            <Button size="small" type={record.is_active ? 'default' : 'primary'}>
              {record.is_active ? '禁用' : '启用'}
            </Button>
          </Popconfirm>
          <Popconfirm title="确定删除此密钥?此操作不可恢复。" onConfirm={() => deleteKeyMutation.mutate(record.id)}>
            <Button size="small" danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  const keys = data ?? []

  return (
    <div>
      <div style={{ marginBottom: 8 }}>
        <Button size="small" type="primary" icon={<PlusOutlined />} onClick={() => { addKeyForm.resetFields(); setAddKeyOpen(true) }}>
          添加密钥
        </Button>
      </div>
      <Table<ProviderKey>
        columns={keyColumns}
        dataSource={keys}
        loading={isLoading}
        rowKey="id"
        size="small"
        pagination={false}
      />
      <Modal
        title="添加密钥"
        open={addKeyOpen}
        onOk={() => {
          addKeyForm.validateFields().then((v) => addKeyMutation.mutate(v))
        }}
        onCancel={() => setAddKeyOpen(false)}
        confirmLoading={addKeyMutation.isPending}
      >
        <Form form={addKeyForm} layout="vertical">
          <Form.Item name="key_label" label="标签" rules={[{ required: true }]}>
            <Input placeholder="如: my-openai-key" />
          </Form.Item>
          <Form.Item name="key_value" label="API Key" rules={[{ required: true }]}>
            <Input.Password placeholder="sk-..." />
          </Form.Item>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="priority" label="优先级" initialValue={0} style={{ flex: 1 }}>
              <InputNumber min={0} style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item name="max_rpm" label="最大 RPM" style={{ flex: 1 }}>
              <InputNumber min={0} style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item name="max_tpm" label="最大 TPM" style={{ flex: 1 }}>
              <InputNumber min={0} style={{ width: '100%' }} />
            </Form.Item>
          </div>
        </Form>
      </Modal>
    </div>
  )
}

// ============================================================
// 主页面: 模型服务
// ============================================================
export default function ModelServices() {
  const queryClient = useQueryClient()
  const [form] = Form.useForm()
  const [modalOpen, setModalOpen] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)

  const { data, isLoading } = useQuery({
    queryKey: ['providers'],
    queryFn: ({ signal }) => providerService.list(signal),
  })

  const createMutation = useMutation({
    mutationFn: (data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>>) =>
      providerService.create(data),
    onSuccess: () => {
      message.success('服务商已创建')
      queryClient.invalidateQueries({ queryKey: ['providers'] })
      setModalOpen(false)
      form.resetFields()
    },
    onError: (err: Error) => message.error(err.message || '创建失败'),
  })

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<Omit<Provider, 'id' | 'created_at' | 'updated_at'>> }) =>
      providerService.update(id, data),
    onSuccess: () => {
      message.success('服务商已更新')
      queryClient.invalidateQueries({ queryKey: ['providers'] })
      setModalOpen(false)
    },
    onError: (err: Error) => message.error(err.message || '更新失败'),
  })

  const deleteMutation = useMutation({
    mutationFn: (id: string) => providerService.delete(id),
    onSuccess: () => {
      message.success('服务商已删除')
      queryClient.invalidateQueries({ queryKey: ['providers'] })
    },
    onError: (err: Error) => message.error(err.message || '删除失败'),
  })

  const handleSave = async () => {
    const values = await form.validateFields()
    if (editingId) {
      updateMutation.mutate({ id: editingId, data: values })
    } else {
      createMutation.mutate(values)
    }
  }

  const columns: ProColumns<Provider>[] = [
    { title: '名称', dataIndex: 'display_name', width: 150 },
    { title: '标识', dataIndex: 'name', width: 120, render: (_, r) => <Text code>{r.name}</Text> },
    { title: 'Base URL', dataIndex: 'base_url', width: 260, ellipsis: true },
    { title: '协议', dataIndex: 'api_protocol', width: 90, hideInSearch: true },
    { title: 'RPM', dataIndex: 'rate_limit_rpm', width: 80, hideInSearch: true, render: (_, r) => r.rate_limit_rpm ?? '-' },
    {
      title: '状态', dataIndex: 'enabled', width: 70, hideInSearch: true,
      render: (_, r) => r.enabled ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
    },
    {
      title: '操作', width: 140, hideInSearch: true,
      render: (_, record) => (
        <Space>
          <Button size="small" onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalOpen(true) }}>编辑</Button>
          <Popconfirm title="确定删除此服务商?" onConfirm={() => deleteMutation.mutate(record.id)}>
            <Button size="small" danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <div>
      <ProTable<Provider>
        columns={columns}
        dataSource={data?.items ?? []}
        loading={isLoading}
        rowKey="id"
        search={{}}
        toolBarRender={() => [
          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { setEditingId(null); form.resetFields(); setModalOpen(true) }}>
            新建服务商
          </Button>,
        ]}
        pagination={{
          total: data?.total ?? 0,
          pageSize: data?.page_size ?? 20,
          current: data?.page ?? 1,
          showSizeChanger: false,
        }}
        expandable={{
          expandedRowRender: (record) => (
            <Tabs
              size="small"
              style={{ marginTop: 8 }}
              items={[
                {
                  key: 'models',
                  label: `模型`,
                  children: <ProviderModelsTable providerId={record.id} />,
                },
                {
                  key: 'keys',
                  label: 'Key Pool',
                  children: <ProviderKeysTable providerId={record.id} />,
                },
              ]}
            />
          ),
        }}
      />

      <Modal
        title={editingId? '编辑服务商' : '新建服务商'}
        open={modalOpen}
        onOk={handleSave}
        onCancel={() => { setModalOpen(false); setEditingId(null); form.resetFields() }}
        confirmLoading={createMutation.isPending || updateMutation.isPending}
        width={560}
      >
        <Form form={form} layout="vertical">
          <Form.Item name="name" label="标识" rules={[{ required: true }]}>
            <Input disabled={!!editingId} placeholder="如 openai, anthropic" />
          </Form.Item>
          <Form.Item name="display_name" label="显示名称" rules={[{ required: true }]}>
            <Input placeholder="如 OpenAI" />
          </Form.Item>
          <Form.Item name="base_url" label="Base URL" rules={[{ required: true }]}>
            <Input placeholder="https://api.openai.com/v1" />
          </Form.Item>
          <Form.Item name="api_protocol" label="API 协议">
            <Input placeholder="openai" />
          </Form.Item>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="enabled" label="启用" valuePropName="checked" style={{ flex: 1 }}>
              <Switch />
            </Form.Item>
            <Form.Item name="rate_limit_rpm" label="RPM 限制" style={{ flex: 1 }}>
              <InputNumber min={0} style={{ width: '100%' }} />
            </Form.Item>
          </div>
        </Form>
      </Modal>
    </div>
  )
}