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:
32
web/test/model-picker-availability-runs.test.ts
Normal file
32
web/test/model-picker-availability-runs.test.ts
Normal 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");
|
||||
});
|
||||
Reference in New Issue
Block a user