feat(model-catalog): 模型选择器 - 支持展示往前推最近10次调用红绿状态指示条 (#768)

* feat(catalog): 模型可用性 - 模型窗口支持展示往前推最近10次调用的红绿状态条

在模型选择弹窗中,单纯展示 24h 成功率难以反映模型短期的真实状态。
现支持往前推取最近最多 10 次实际调用(create 请求)的执行结果:
- 成功一次展示绿色小点,失败一次展示红色小点,一共固定显示 10 个槽位点
- 槽位未发生调用时展示半透明灰色点;鼠标悬浮显示成功与失败次数的详细统计
- 后端从当前时刻往前推查询最近的 create 日志,按时间演进正序(最右侧为最新)输出 recentResults 切片

验证:
- 后端:`go test -v ./internal/app -run TestPublicModelAvailability` 通过
- 前端:`tsc --noEmit`、`bun run build` 通过;`bun test` 2210 项通过
- 新增 `web/test/model-picker-availability-runs.test.ts` 单测并完成反向验证(改坏时测试变红)
- 后端已无损平滑重启并监听 8080 端口

* feat(create): 模型选择器 - 左侧列表模型项直接展示10点可用性状态条

用户在模型选择弹窗中,希望无需点进二级卡片就能直接感知模型的可用率。
现将 10 点状态指示条挂载到左侧模型目录列表的每一项中:
- 在每一个模型的子描述栏右侧常驻展示 10 个圆点的状态条
- 成功=绿点、失败=红点、未调用=灰点;鼠标悬浮显示最近成功与失败统计
- 保持列表项排版整齐,小点与渠道描述自适应两端对齐

验证:
- `tsc --noEmit`、`bun run build` 通过
- `bun test` 2211 项测试通过(唯一失败为上游基线问题)
- `test/model-picker-availability-runs.test.ts` 补充左侧列表挂载断言并通过
This commit is contained in:
xupengchong-del
2026-10-14 09:37:30 +08:00
committed by GitHub
parent 054dab28cc
commit 8ec7e5a9a7
8 changed files with 239 additions and 24 deletions

View File

@@ -0,0 +1,32 @@
import { expect, test } from "bun:test";
async function pickerSources() {
const [component, styles] = await Promise.all([
Bun.file(new URL("../src/components/model-picker.tsx", import.meta.url)).text(),
Bun.file(new URL("../src/styles/shared/model-picker.css", import.meta.url)).text(),
]);
return { component, styles };
}
test("模型窗口渲染10个状态点的可用性指示条,区分成功、失败与未调用槽位", async () => {
const { component, styles } = await pickerSources();
// 状态条固定渲染 10 个点
expect(component).toContain("model-picker-availability-track");
expect(component).toContain("Array.from({ length: 10 })");
expect(component).toContain("model-picker-availability-pill");
expect(component).toContain("is-success");
expect(component).toContain("is-failed");
expect(component).toContain("is-empty");
// CSS 样式定义了成功绿点、失败红点、未调用灰点
expect(styles).toContain(".model-picker-availability-track");
expect(styles).toContain(".model-picker-availability-pill.is-success");
expect(styles).toContain(".model-picker-availability-pill.is-failed");
expect(styles).toContain(".model-picker-availability-pill.is-empty");
// 左侧目录/品牌栏中直接常驻挂载状态条,无需点进二级卡片即可直观感知模型可用性
expect(component).toContain("<ModelRecentHealthTrack availability={groupAvailability(config, group)} />");
expect(styles).toContain(".canvas-model-picker-brand-meta");
expect(styles).toContain(".canvas-model-picker-brand-copy .model-picker-availability-track");
});