new-api-key-bench/README.md

new-api-key-bench

NewAPI sk-key 接口的「文档 + 调试」二合一前端工具（bench），替代 Postman 的专用调试台，服务 karpool 拼车项目的接口调试与换算验证。

技术栈

Vite + Vue 3 + TypeScript + TDesign + TanStack Query（vue-query）+ Pinia + VueUse + Vitest。运行时与包管理器为 Bun。

运行

网关地址只从环境变量 GATEWAY 读取（代码不写死默认值）。两种配置方式任选其一：

# 方式一：复制示例文件后填入真实地址（.env.local 已被 gitignore，不会提交）
cp new-api-key-bench/.env.example new-api-key-bench/.env.local
# 然后编辑 .env.local，把 GATEWAY 改成你的网关地址

# 方式二：shell 环境变量（PowerShell：$env:GATEWAY="https://…"）
export GATEWAY=https://your-gateway.example.com

未配置时 bun run dev 会直接报错提示；build 无代理不受影响。

cd new-api-key-bench
bun install
bun run dev        # 默认 http://localhost:5173，接口经 dev server 代理转发到 GATEWAY

bun run test       # vitest（单元 + 组件 + 集成冒烟全量）
bun run lint       # oxlint + eslint
bun run build      # type-check + vite build（dist/）

使用

1. 左侧选择接口（5 个，平铺不分组）→ 右侧开 tab
2. tab 内展开「注意事项」看该接口的实证调研坑文档
3. 填 sk-key（每 tab 独立、仅存内存、刷新即重置，不落盘；切换 tab 输入保留）
4. 点「发送请求」→ 响应区显示元信息（状态/耗时/字符数）+ 虚拟滚动高亮 JSON
5. 复制 / 下载 .json；非 2xx 响应体照常展示（调试 401/403 是刚需）

架构说明

• CORS：页面请求打相对路径（/api、/v1），由 Vite dev server 代理转发到网关（vite.config.ts，网关地址从环境变量 GATEWAY 读取），网关未配跨域头也不受影响
• 大响应性能：/api/log/token 1000 条日志（pretty-print 2~4MB、约两万行）由 json-text-view.vue 虚拟滚动渲染——DOM 恒定 ~40 行，语法高亮仅对可视区行执行
• 请求语义：纯手动触发（TanStack Query enabled 门控 + refetch），staleTime: Infinity，切 tab 不自动重发；queryKey 为 ['endpoint', path, skKey]，换 key 即新查询
• tab 状态：Pinia（开/关/激活/拖拽重排 + 每 tab sk-key，Postman 语义）；面板随 tab 切换卸载重建，sk-key 由 store 持有所以输入保留，响应数据由 Query 缓存兜底恢复；t-tabs 用官方 list prop 数据驱动（插槽 panel 在动态增删下与数据脱钩，是已踩过的坑）

已知边界

• 生产部署（bun run build）无 Vite 代理，需为网关路径配置反向代理
• useClipboard 在非 https 环境（如 http://localhost）自动降级 execCommand
• /v1/models/:model 单模型详情接口未纳入（数据源是硬编码静态表，与 /v1/models 不一致，无调试价值）

文档

• 交互与技术决策：docs/bench交互设计文档.md
• 施工计划与验收记录：docs/bench实施计划.md
• 接口数据源：docs/NewAPI-sk-key接口文档.md