项目概览面板
项目概览是 wescode 独有的全景视图，帮助你快速了解项目结构、代码健康度和函数调用关系。它将 CKG 代码知识图谱的分析结果可视化呈现。
打开项目概览
| 方式 | 操作 |
|---|---|
| 活动栏 | 点击左侧活动栏的「项目概览」图标（Graph 图标） |
| 命令面板 | Ctrl+Shift+P → 输入「Project Overview」 |
三区域布局
项目概览面板由三个主要区域组成：
┌──────────────────────────────────────────────┐
│ 项目概览面板 │
├──────────────────┬───────────────────────────┤
│ │ │
│ 代码健康度 │ 调用图（D3 交互式） │
│ 统计信息 │ │
│ │ ○──→○──→○ │
│ 📊 函数总数 │ ↑ ↓ │
│ 🔴 孤儿函数 │ ○←──○←──○ │
│ 📈 调用深度 │ │
│ ⚠️ 复杂度 │ │
│ │ │
├──────────────────┴───────────────────────────┤
│ │
│ 快速导航 / 符号列表 │
│ │
└──────────────────────────────────────────────┘
区域一：代码健康度统计
左侧面板展示项目的整体健康指标：
| 指标 | 说明 |
|---|---|
| 函数总数 | 项目中所有函数/方法的数量 |
| 孤儿函数 | 没有任何调用者的函数数量 |
| 最大调用深度 | 最长调用链的层级数 |
| 平均复杂度 | 函数的平均圈复杂度 |
| 文件数量 | 源代码文件总数 |
| 语言分布 | 各编程语言的文件数和行数占比 |
这些数据在 CKG 索引完成后自动计算，并随代码变更实时更新。
区域二：调用图（D3 交互式）
中央区域是调用图的交互式可视化，使用 D3.js 渲染：
交互操作：
| 操作 | 效果 |
|---|---|
| 鼠标悬停节点 | 高亮直接关联的调用/被调用函数 |
| 单击节点 | 选中函数，显示详细信息 |
| 双击节点 | 在编辑器中跳转到该函数定义 |
| 滚轮 | 缩放调用图 |
| 拖拽空白区域 | 平移视图 |
| 拖拽节点 | 移动节点位置（力导向布局会重新平衡） |
| 右键节点 | 上下文菜单（影响分析、查找调用者等） |
节点大小：反映该函数的调用次数（被调用越多，节点越大）
边的样式：
- 实线箭头：直接调用
- 虚线箭头：接口调用（通过接口方法分派）
区域三：快速导航
底部面板提供快速导航能力：
- 符号搜索：输入函数名快速定位到调用图中的节点
- 文件列表：按文件浏览函数列表
- 包/模块树：按包结构浏览代码组织
- 最近访问：显示你最近查看过的函数
索引进度
状态栏指示
当 CKG 正在索引时，状态栏会显示索引进度：
📊 索引中... 45% | 已处理 234/520 文件
索引完成后变为：
✅ AI 就绪 | wescode-project
索引阶段
索引过程分为多个阶段，你可以在项目概览面板的索引状态区域看到当前阶段：
- 扫描 — 发现项目文件
- 解析 — tree-sitter 语法分析
- 提取 — 符号和调用关系提取
- 链接 — 跨文件边解析
- 构建 — 全文索引和统计
索引期间所有其他功能正常可用，只是 CKG 相关功能（调用图、影响分析等）的结果可能不完整。
调用图交互
过滤与搜索
调用图支持多种过滤方式，帮助你聚焦关注的代码区域：
按包过滤：
只显示 internal/auth 和 internal/handler 包的函数
按调用深度过滤：
只显示调用深度 ≥ 3 的函数
按文件过滤：
只显示当前打开文件中的函数
布局模式
调用图支持多种布局模式：
| 布局 | 适用场景 |
|---|---|
| 力导向 | 默认，适合探索性浏览 |
| 层次布局 | 适合查看调用层级关系 |
| 径向布局 | 适合以某个核心函数为中心查看 |
| 树状布局 | 适合查看单向调用链 |
导出
你可以将调用图导出为：
- SVG：矢量图，适合文档和演示
- PNG：位图，适合快速分享
- JSON：结构化数据，适合进一步分析
代码健康度指标
孤儿函数分析
点击「孤儿函数」数字可以展开详细列表：
🔴 孤儿函数 (12)
├── internal/legacy/utils.go
│ ├── formatLegacyDate() 最后修改: 6 个月前
│ └── parseLegacyConfig() 最后修改: 1 年前
├── internal/cache/evict.go
│ └── evictByTimestamp() 最后修改: 3 个月前
└── ...
每个孤儿函数会标注最后修改时间，帮助你判断是否可以安全删除。
复杂度热力图
项目概览可以生成函数复杂度热力图：
- 🟢 低复杂度（1-5）：简单函数
- 🟡 中复杂度（6-10）：正常范围
- 🟠 较高复杂度（11-20）：建议重构
- 🔴 高复杂度（>20）：强烈建议拆分
包依赖分析
项目概览还展示包级别的依赖关系图：
- 正常的单向依赖
- ⚠️ 循环依赖（会标记警告）
- 包的扇入/扇出度
快速导航
从调用图到代码
在调用图中双击任意函数节点，编辑器会自动：
- 打开该函数所在的文件
- 滚动到函数定义处
- 高亮函数签名
从代码到调用图
在编辑器中右键点击函数名：
- 选择「在调用图中显示」
- 项目概览面板会自动打开
- 调用图会定位到该函数并高亮其关联关系
键盘导航
| 快捷键 | 效果 |
|---|---|
Ctrl+G → Ctrl+G | 跳转到指定函数 |
Alt+Left | 调用图中后退 |
Alt+Right | 调用图中前进 |
Home | 回到调用图中心 |
+ / - | 缩放调用图 |
注意事项
- 大型项目：超过 10 万行代码的项目，调用图建议使用过滤功能聚焦特定模块
- 索引数据：调用图数据基于 CKG 索引，确保索引已完成后再使用
- 增量更新：代码修改后调用图会自动更新，但复杂的重构可能需要几秒钟
- 多语言项目：CKG 支持在同一调用图中展示跨语言的调用关系