feat(P4b): 五视图前端重写——本地静态资源、零 CDN、模块下钻与调用树

[kooksee]

概要

按 spec §6 完成 P4b:五视图前端重写,落地"代码即文档/大图不可渲染只能分层聚焦"的设计决策。

两个 spike 决策(结论并入 #20):

1. 构建方式 → 无构建:原生 JS 多文件 + 手写 CSS + vendored vis-network(652KB 本地文件),零 Node 工具链、零 CDN、内网可用
2. 渲染引擎 → 保留 vis-network:分层+邻域设计下默认视图节点数 <100;go-echarts 需服务端生成图表配置并引入依赖,sigma.js 的 WebGL 规模优势在设计上不会触发

五视图(hash 路由,一视图一主任务):

• 概览:统计卡 + 解析热度 TopN + 慢/错误 provider + 最近注入错误(数据:/api/stats、/api/errors)
• 依赖图:模块列表(计数+跨模块依赖)→ 点击列类型 → 点击类型以它为中心绘制 N 跳邻域子图(数据:/api/modules、/api/search、/api/ego)
• 检索:服务端过滤(kind/state/module),结果一键跳依赖图
• 调用链:trace 列表(错误优先)→ /api/trace-tree 嵌套树渲染
• 诊断:最近注入错误(根因+提示)+ provider 启动耗时表

工程:3877 行单文件 template.html 删除;go:embed static/ 目录(index.html + css/app.css + js/* + vendor/);全局搜索框 + 视图 Tab 顶栏,basePath 兼容保留。

暂时移除(Go API 保留,后续按需回归):Mermaid 导出、SVG 下载、分组规则编辑 UI。

验证

• 浏览器实测(example/http,1440×900):概览/依赖图(ego 17 节点 35 边,标签可读)/调用链(列表+树渲染)截图确认;检索/诊断视图走同一 api.js 契约
• 既有 dixhttp 测试零改动通过(含 basePath 重定向与占位符替换契约)
• 全仓 task test(含 example)+ task lint 0 issues;gofmt/vet 干净

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 7676ce1e-7349-4489-98a5-b1fedec4de25

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}