WuYongJie
af8189908d
生成记录改为数据库分页，每页 40 条，默认最近 7 天；可见预览限制为 4 路并发并使用 192px 缩略图，翻页取消旧请求，视频在详情中按需播放。保留精选、分类和原图操作，新增画布任务失败记录，统一时间显示。 模型管理拆分模型、上游和运行健康视图，提供搜索、筛选、分页和完整故障详情；列表使用摘要，编辑按需获取完整配置。后台按当前设置页加载，模型 GET 不再自动修改健康状态，98K 同步先显示变更预览。 验证：600 项现有辅助测试和 3 项新增回归测试通过，TypeScript 和本次 API/组件 lint 通过；浏览器验证请求峰值 4、翻页、搜索、失败重试、详情、模型筛选与 390px 窄屏。只读生产查询：当天页约 29ms，历史视频页 122ms，第 7800 页 739ms。两个并发索引已在生产建成，SQL 随代码保留。 已知检查状态：全仓 lint 存量 1004 项诊断使 check:quality 停在 lint 阶段；日志、品牌、CI、环境、凭据、元数据、测试与制品检查单独通过。
327 lines
13 KiB
TypeScript
327 lines
13 KiB
TypeScript
"use client";
|
|
import { useMemo, useState } from "react";
|
|
import { Search, RefreshCw, ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import type { AiModel } from "@/lib/db/schema";
|
|
import {
|
|
is3DModelDescriptor,
|
|
isVideoModelDescriptor,
|
|
isImageGenerationModelDescriptor,
|
|
} from "@/lib/ai/model-classification";
|
|
|
|
type Model = AiModel & { isAgentModel?: boolean; isMultimodal?: boolean };
|
|
type Provider = { id: string; name: string; type: string; isEnabled: boolean };
|
|
const selectClass = "h-10 rounded-md border bg-background px-3 text-sm";
|
|
export function ModelManagementList({
|
|
models,
|
|
providers,
|
|
error,
|
|
loading,
|
|
onEdit,
|
|
onDelete,
|
|
onRestore,
|
|
onRefresh,
|
|
onHealth,
|
|
}: {
|
|
models: Model[];
|
|
providers: Provider[];
|
|
error?: Error;
|
|
loading: boolean;
|
|
onEdit: (model: Model) => Promise<void>;
|
|
onDelete: (id: string) => void;
|
|
onRestore: (model: Model) => void;
|
|
onRefresh: () => void;
|
|
onHealth?: (id: string) => void;
|
|
}) {
|
|
const [search, setSearch] = useState("");
|
|
const [provider, setProvider] = useState("");
|
|
const [status, setStatus] = useState("enabled");
|
|
const [kind, setKind] = useState("");
|
|
const [page, setPage] = useState(1);
|
|
const [opening, setOpening] = useState<string | null>(null);
|
|
const rows = useMemo(
|
|
() =>
|
|
models
|
|
.map((model) => {
|
|
const upstream = providers.find((p) => p.id === model.providerId);
|
|
const descriptor = { ...model, providerType: upstream?.type };
|
|
const type = is3DModelDescriptor(descriptor)
|
|
? "3d"
|
|
: isVideoModelDescriptor(descriptor)
|
|
? "video"
|
|
: isImageGenerationModelDescriptor(descriptor)
|
|
? "image"
|
|
: "chat";
|
|
return { model, upstream, type };
|
|
})
|
|
.filter(({ model, upstream, type }) => {
|
|
const text =
|
|
`${model.displayName} ${model.modelId} ${upstream?.name || ""}`.toLowerCase();
|
|
return (
|
|
text.includes(search.trim().toLowerCase()) &&
|
|
(!provider || model.providerId === provider) &&
|
|
(!kind || kind === type) &&
|
|
(status === "all" ||
|
|
(status === "enabled" && model.isEnabled) ||
|
|
(status === "disabled" && !model.isEnabled) ||
|
|
(status === "unhealthy" && model.healthStatus !== "healthy") ||
|
|
(status === "visible" && !model.isHidden))
|
|
);
|
|
}),
|
|
[models, providers, search, provider, status, kind],
|
|
);
|
|
const pages = Math.max(1, Math.ceil(rows.length / 25));
|
|
const currentPage = Math.min(page, pages);
|
|
const change = (fn: () => void) => {
|
|
fn();
|
|
setPage(1);
|
|
};
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-wrap gap-3">
|
|
<div className="relative min-w-56 flex-1">
|
|
<Search className="absolute left-3 top-3 size-4 text-muted-foreground" />
|
|
<Input
|
|
className="h-10 pl-9"
|
|
aria-label="搜索模型"
|
|
placeholder="搜索模型名称、ID 或上游"
|
|
value={search}
|
|
onChange={(e) => change(() => setSearch(e.target.value))}
|
|
/>
|
|
</div>
|
|
<select
|
|
aria-label="模型上游"
|
|
className={selectClass}
|
|
value={provider}
|
|
onChange={(e) => change(() => setProvider(e.target.value))}
|
|
>
|
|
<option value="">全部上游</option>
|
|
{providers.map((p) => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
aria-label="模型类型"
|
|
className={selectClass}
|
|
value={kind}
|
|
onChange={(e) => change(() => setKind(e.target.value))}
|
|
>
|
|
<option value="">全部类型</option>
|
|
<option value="image">生图</option>
|
|
<option value="video">视频</option>
|
|
<option value="chat">对话</option>
|
|
<option value="3d">3D / CAD</option>
|
|
</select>
|
|
<select
|
|
aria-label="模型状态"
|
|
className={selectClass}
|
|
value={status}
|
|
onChange={(e) => change(() => setStatus(e.target.value))}
|
|
>
|
|
<option value="enabled">已启用</option>
|
|
<option value="all">全部模型</option>
|
|
<option value="disabled">已停用</option>
|
|
<option value="unhealthy">运行异常</option>
|
|
<option value="visible">前台可见</option>
|
|
</select>
|
|
<Button variant="outline" onClick={onRefresh} aria-label="刷新模型">
|
|
<RefreshCw className="size-4" />
|
|
</Button>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
{loading
|
|
? "正在加载模型…"
|
|
: `筛选结果 ${rows.length} 个 · 已启用 ${models.filter((m) => m.isEnabled).length} 个 · 全部 ${models.length} 个`}
|
|
</p>
|
|
<div className="flex items-center justify-end gap-2 text-sm text-muted-foreground">
|
|
<span>
|
|
第 {currentPage} / {pages} 页
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={currentPage === 1}
|
|
onClick={() => setPage(currentPage - 1)}
|
|
>
|
|
上一页
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={currentPage === pages}
|
|
onClick={() => setPage(currentPage + 1)}
|
|
>
|
|
下一页
|
|
</Button>
|
|
</div>
|
|
{error ? (
|
|
<div role="alert" className="rounded-xl border p-6 text-sm">
|
|
模型加载失败。
|
|
<Button variant="outline" onClick={onRefresh}>
|
|
重试
|
|
</Button>
|
|
</div>
|
|
) : loading ? (
|
|
<div role="status" className="h-48 rounded-xl bg-muted motion-safe:animate-pulse" />
|
|
) : (
|
|
<div className="overflow-x-auto rounded-xl border">
|
|
<table className="w-full min-w-[850px] text-left text-sm">
|
|
<thead className="bg-muted/50 text-xs text-muted-foreground">
|
|
<tr>
|
|
{["模型", "上游 / 类型", "启用", "前台展示", "运行健康", "操作"].map((x) => (
|
|
<th key={x} className="px-4 py-3 font-medium">
|
|
{x}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{rows
|
|
.slice((currentPage - 1) * 25, currentPage * 25)
|
|
.map(({ model, upstream, type }) => (
|
|
<tr key={model.id} className="hover:bg-muted/30">
|
|
<td className="max-w-64 px-4 py-4">
|
|
<div className="font-medium">{model.displayName}</div>
|
|
<div
|
|
className="mt-1 truncate text-xs text-muted-foreground"
|
|
title={model.modelId}
|
|
>
|
|
{model.modelId}
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap gap-2 text-xs text-muted-foreground">
|
|
{model.isDefault && <span>默认模型</span>}
|
|
{model.isDefaultTextEditModel && <span>文字编辑默认</span>}
|
|
{model.isAgentModel && <span>Agent</span>}
|
|
{model.isMultimodal && <span>多模态</span>}
|
|
{model.isSubModel && <span>子模型</span>}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-4">
|
|
{upstream?.name || "未知上游"}
|
|
<div className="mt-1 text-xs text-muted-foreground">
|
|
{{ image: "生图", video: "视频", chat: "对话", "3d": "3D / CAD" }[type]}
|
|
{upstream && !upstream.isEnabled ? " · 上游已停用" : ""}
|
|
</div>
|
|
</td>
|
|
<td className="whitespace-nowrap px-4 py-4">
|
|
<span
|
|
className={`rounded-md px-2 py-1 text-xs ${model.isEnabled ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200" : "bg-muted text-muted-foreground"}`}
|
|
>
|
|
{model.isEnabled ? "已启用" : "已停用"}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-4">
|
|
{model.isHidden || model.isSubModel ? "隐藏" : "可见"}
|
|
</td>
|
|
<td className="max-w-72 px-4 py-4">
|
|
<span
|
|
className={
|
|
model.healthStatus !== "healthy"
|
|
? "text-amber-700 dark:text-amber-300"
|
|
: "text-muted-foreground"
|
|
}
|
|
>
|
|
{model.healthStatus === "auto_disabled"
|
|
? "自动停用"
|
|
: model.healthStatus === "degraded"
|
|
? "观察中"
|
|
: "正常"}
|
|
</span>
|
|
{model.healthConsecutiveFailures > 0 && (
|
|
<span className="ml-2 text-xs text-muted-foreground">
|
|
连续失败 {model.healthConsecutiveFailures} 次
|
|
</span>
|
|
)}
|
|
{model.healthLastError && (
|
|
<details className="mt-2 text-xs">
|
|
<summary className="cursor-pointer text-muted-foreground">
|
|
查看最近原因
|
|
</summary>
|
|
<p className="mt-2 whitespace-pre-wrap break-words">
|
|
{model.healthLastError}
|
|
</p>
|
|
</details>
|
|
)}
|
|
<button
|
|
type="button"
|
|
className="mt-2 block text-xs underline underline-offset-4"
|
|
onClick={() => onHealth?.(model.id)}
|
|
>
|
|
故障记录
|
|
</button>
|
|
<div className="mt-2 text-xs text-muted-foreground">
|
|
{model.excludeFromHealthBan && "不自动封禁 "}
|
|
{model.excludeFromFailover && "不参与迁移"}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-4">
|
|
<div className="flex gap-1">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={opening !== null}
|
|
onClick={async () => {
|
|
setOpening(model.id);
|
|
try {
|
|
await onEdit(model);
|
|
} finally {
|
|
setOpening(null);
|
|
}
|
|
}}
|
|
>
|
|
{opening === model.id ? "加载中…" : "编辑"}
|
|
</Button>
|
|
{model.healthStatus === "auto_disabled" && (
|
|
<Button variant="outline" size="sm" onClick={() => onRestore(model)}>
|
|
恢复
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-destructive"
|
|
onClick={() => onDelete(model.id)}
|
|
>
|
|
删除
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{rows.length === 0 && (
|
|
<p className="p-12 text-center text-sm text-muted-foreground">没有符合条件的模型。</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
|
<span>
|
|
每页 25 个 · 第 {currentPage} / {pages} 页
|
|
</span>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
aria-label="上一页模型"
|
|
variant="outline"
|
|
disabled={currentPage === 1}
|
|
onClick={() => setPage(currentPage - 1)}
|
|
>
|
|
<ChevronLeft className="size-4" />
|
|
</Button>
|
|
<Button
|
|
aria-label="下一页模型"
|
|
variant="outline"
|
|
disabled={currentPage === pages}
|
|
onClick={() => setPage(currentPage + 1)}
|
|
>
|
|
<ChevronRight className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|