vite-plugin-monkey@7.x + Vue 3,用于给 mitmweb(React SPA)注入外挂式 LLM 请求/响应可视化页面。
当前支持与规划中的标准:
- OpenAI Chat Completions
- OpenAI Responses API
- Gemini
- Claude
- 普通 JSON 响应与 SSE 响应
- 必须尽量满足单一职责原则
- edit 和新增代码时,必须带有简短且合理的注释
- 优先做“类型专用组件”,不要为了兼容所有厂商而把组件抽象得过度复杂
- 不允许字段丢失、胡乱映射、或者为了展示方便篡改语义
- 整体结构必须清晰,方便未来频繁调整
- 严格遵循用户指令的任务要求
./src/old/下的文件仅供参考,不要再进行更新- 不要运行
npm run dev,那样会卡住 reasoning = thinking,是在不同 standard 中对同一概念的不同命名- 如果做的是现有代码库内任务,应优先做“外科手术式修改”,不要顺手重构无关部分
通过 prop 传入“已确定类型”的对象,不走模糊的 any 通用适配。
- 展示 model、temperature、top_p、id 等基础信息
- 其它非重要单项信息,使用可折叠 table(原生
table)列举 input/messages不同类型要分别清晰展示tools不同类型要分别清晰展示- 如果存在独立系统提示词(例如
instructions),要单独展示
- 要求与 request 同等完整
- 不丢字段
- 重点展示 output item、tool call、usage、status、error 等信息
- 先转换为 response
- 再与 response 使用同样的展示方式
- 额外展示 SSE event 数量,以及必要的 SSE meta 信息
- 尽量组件化
- 尤其是
messages/input items、tools的 Item,必须拆成独立组件 - 可折叠能力也要组件化,不要每个页面自己重复拼装
- 未来一定会继续修改,所以结构必须清晰、低耦合、可替换
- message / tool item 组件必须有
idprop - 优先使用原始数据中的
id - 若没有,则使用稳定 hash id
tool-messages需要支持根据 tool id 做跳转- 折叠 / 展开要能记忆状态
- 通用折叠状态优先
localStorage - 详情级折叠状态优先
sessionStorage
ViewDashboardProxy.vue- 已能根据 standard + dataType 分发到不同 LLM 视图
openai-response已有独立 request / response 视图入口
unified.ts- 普通 request / response 直接 JSON.parse
- SSE 通过各自 transfer service 转换
openai-response已使用专用 SSE 聚合服务
openai-responses-transfer-service.ts- 已能把 Responses API SSE 聚合成 response wrapper
src/components/llm/openai-response/- 已存在 request / response 页面
- 已存在 input item / tool item 子组件
后续工作应以“补齐细节、修正展示、完善结构”为主,而不是重复造轮子。
监听 route 变动 -> 打开 <uuid>/request 或 <uuid>/response -> GET flow api 获取完整数据 -> 渲染数据可视化 -> 插入页面
监听 route 变动 -> 打开 <uuid>/request 或 <uuid>/response -> GET flow api 获取完整数据 -> hook 函数执行,接收 type 和 data,返回 document node -> 插入页面
目的:程序无法识别所有情况,因此允许用户手动切换不同 LLM 格式的预览。
./samples/ 下存放各种请求 / 响应实例,用于开发调试与回归检查。
.
├── AGENTS.md
├── README.md
├── docs/
├── samples/
│ ├── openai/
│ ├── openai-response/
│ ├── gemini/
│ ├── gemini-internal/
│ └── claude/
├── src/
│ ├── main.ts
│ ├── entry.ts
│ ├── App.vue
│ ├── style.css
│ ├── old/ (历史实现,仅参考,禁止修改)
│ ├── lib/
│ │ ├── pipeline.ts
│ │ ├── page-injector.ts
│ │ ├── constant.ts
│ │ ├── logtape.ts
│ │ └── transfer/
│ │ ├── types.ts
│ │ ├── unified.ts
│ │ ├── openai-transfer-service.ts
│ │ ├── openai-responses-transfer-service.ts
│ │ ├── gemini-transfer-service.ts
│ │ ├── claude-transfer-service.ts
│ │ └── gemini-request-adapter.ts
│ ├── llm/
│ │ └── judge.ts
│ ├── types/
│ │ ├── flow.ts
│ │ ├── openai/
│ │ ├── openai-response/
│ │ ├── gemini/
│ │ └── claude/
│ ├── components/
│ │ ├── llm/
│ │ │ ├── ViewDashboardProxy.vue
│ │ │ ├── openai/
│ │ │ ├── openai-response/
│ │ │ ├── gemini/
│ │ │ ├── claude/
│ │ │ └── 通用消息 / 工具子组件
│ │ ├── container/
│ │ ├── content/
│ │ ├── common/
│ │ └── debug/
│ ├── pages/
│ ├── store/
│ ├── utils/
│ ├── styles/
│ └── assets/
└── sample-vue-init-repo/
- 修改前先判断是否已有专用组件或现成结构可复用
- 优先延续现有成熟页面风格(尤其 OpenAI / Claude)
- 不要把厂商专用页面硬抽象成一个超级通用组件
- 如果只是新增某一标准的支持,应尽量只改该标准相关文件与接入层
- 非必要不要扩大修改范围
如果在“更通用”和“更符合当前标准、字段完整、后续好改”之间冲突,优先后者。