Alfred/src/web/pages/models/components/ModelTable.tsx

import type { ColumnsType } from "antd/es/table";

import { CheckCircleOutlined, DeleteOutlined, EditOutlined, StopOutlined } from "@ant-design/icons";
import { App as AntApp, Button, Popconfirm, Space, Table, Tag } from "antd";

import type { Model, ModelListResponse, Provider } from "../../../../shared/api";

interface ModelTableProps {
  data: ModelListResponse | undefined;
  loading: boolean;
  onDelete: (id: string) => Promise<unknown>;
  onDisable: (id: string) => Promise<unknown>;
  onEdit: (model: Model) => void;
  onEnable: (id: string) => Promise<unknown>;
  onPageChange: (page: number, pageSize: number) => void;
  page: number;
  pageSize: number;
  providers: Provider[];
}

const CAPABILITY_LABELS: Record<string, string> = {
  "audio-generation": "音频生成",
  "audio-recognition": "音频识别",
  "image-generation": "图片生成",
  "image-recognition": "图片识别",
  reasoning: "推理",
  text: "文本",
  "video-generation": "视频生成",
  "video-recognition": "视频识别",
};

function getProviderName(providerId: string, providers: Provider[]): string {
  return providers.find((p) => p.id === providerId)?.name ?? providerId;
}

const COLUMNS: ColumnsType<Model> = [
  { dataIndex: "name", ellipsis: true, title: "模型名称", width: 160 },
  { dataIndex: "modelId", ellipsis: true, title: "模型 ID", width: 180 },
  {
    dataIndex: "providerId",
    ellipsis: true,
    title: "供应商",
    width: 120,
  },
  {
    dataIndex: "capabilities",
    render: (value: string[]) =>
      value.length > 0 ? (
        <Space size={[0, 4]} wrap>
          {value.map((c) => (
            <Tag key={c}>{CAPABILITY_LABELS[c] ?? c}</Tag>
          ))}
        </Space>
      ) : null,
    title: "能力",
    width: 200,
  },
  {
    align: "center",
    dataIndex: "enabled",
    render: (value: boolean) => (value ? <Tag color="blue">已启用</Tag> : <Tag>已禁用</Tag>),
    title: "状态",
    width: 100,
  },
  {
    align: "center",
    dataIndex: "createdAt",
    render: (_value: unknown, record: Model) => formatDatetime(record.createdAt),
    title: "创建时间",
    width: 185,
  },
];

export function ModelTable({
  data,
  loading,
  onDelete,
  onDisable,
  onEdit,
  onEnable,
  onPageChange,
  page,
  pageSize,
  providers,
}: ModelTableProps) {
  const { message } = AntApp.useApp();

  const handleEnable = async (id: string) => {
    try {
      await onEnable(id);
      message.success("模型已启用");
    } catch (err) {
      message.error((err as Error).message);
    }
  };

  const handleDisable = async (id: string) => {
    try {
      await onDisable(id);
      message.success("模型已禁用");
    } catch (err) {
      message.error((err as Error).message);
    }
  };

  const handleDelete = async (id: string) => {
    try {
      await onDelete(id);
      message.success("模型已删除");
    } catch (err) {
      message.error((err as Error).message);
    }
  };

  const columnsWithProvider: ColumnsType<Model> = COLUMNS.map((col) =>
    "dataIndex" in col && col.dataIndex === "providerId"
      ? {
          ...col,
          render: (_value: unknown, record: Model) => getProviderName(record.providerId, providers),
        }
      : col,
  );

  const operationColumn: ColumnsType<Model>[number] = {
    dataIndex: "op",
    fixed: "right",
    render: (_value: unknown, record: Model) => (
      <Space size="small">
        <Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
          编辑
        </Button>
        {record.enabled ? (
          <Popconfirm onConfirm={() => void handleDisable(record.id)} title="确认禁用此模型？">
            <Button color="orange" icon={<StopOutlined />} size="small" variant="link">
              禁用
            </Button>
          </Popconfirm>
        ) : (
          <Button icon={<CheckCircleOutlined />} onClick={() => void handleEnable(record.id)} size="small" type="link">
            启用
          </Button>
        )}
        <Popconfirm
          description="此操作不可恢复。"
          onConfirm={() => void handleDelete(record.id)}
          title="确认删除此模型？"
        >
          <Button danger icon={<DeleteOutlined />} size="small" type="link">
            删除
          </Button>
        </Popconfirm>
      </Space>
    ),
    title: "操作",
    width: 220,
  };

  return (
    <Table
      columns={[...columnsWithProvider, operationColumn]}
      dataSource={data?.items ?? []}
      loading={loading}
      pagination={{
        current: page,
        hideOnSinglePage: false,
        onChange: onPageChange,
        pageSize,
        showSizeChanger: true,
        total: data?.total ?? 0,
      }}
      rowKey="id"
      scroll={{ x: 1100 }}
    />
  );
}

function formatDatetime(dateStr: string): string {
  const d = new Date(dateStr);
  const pad = (n: number) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
}