导航图谱(Navigraph)：可视化浏览历史

> 直观地可视化您的浏览路径和网页导航历史，帮助您理解信息流动和记忆浏览轨迹。

## 主要功能

- 📊 **可视化浏览历史** - 以树形图和瀑布图展示您的网页浏览轨迹
- 🗂️ **会话管理** - 自动将浏览活动组织为有意义的会话
- 🔄 **实时更新** - 浏览时动态更新导航图
- 🛡️ **隐私保护** - 所有数据本地存储，不会上传到云端
- 🌙 **深色模式** - 支持深色主题，保护您的眼睛

### 快速开始

1. 打开扩展页面（点击工具栏中的 Navigraph 图标）。
2. 将鼠标移动到页面右侧的控制面板抓手，悬停（短延迟）或点击以打开侧边栏；在侧边栏可以选择会话日期、切换视图并进行节点筛选。
3. 也可以在状态栏切换视图或切换已隐藏/已关闭节点的显示状态。
4. 节点可以点击查看详情。

## 使用指南（概览）

### 安装

#### 从 Edge 网上应用店

1. 访问 [Edge 网上应用商店 Navigraph 页面](https://microsoftedge.microsoft.com/addons/detail/ibcpeknflplfaljendadfkhmflhfnhdh)
2. 点击“获取”以安装扩展。

### 侧边栏

侧边栏主要用于会话选择与节点筛选：

- 视图切换：在侧边栏顶部切换当前视图（树形图 / 瀑布图）。
- 会话日历：按日期查看会话、选择并加载会话历史；支持按天切换和查看当日的多个会话。
- 筛选控件：按导航类型或行为进行过滤（例如仅显示链接跳转、仅显示表单提交等）。

提示：侧边栏是切换数据范围与快速定位的主要入口，建议先选择会话再切换视图进行分析。

### 状态栏

状态栏在界面中提供简明的上下文与交互：

- 显示并可切换当前视图（树形图 / 瀑布图）。
- 显示会话统计（如节点数、会话时长）并提供与视图相关的快捷操作，例如切换节点的隐藏/显示状态。
- 点击日期可快速切回当天会话。

说明：状态栏上的控件为与当前视图直接相关的交互入口；更复杂的筛选仍通过侧边栏完成。

### 视图交互

概述：Navigraph 提供两种互补视图：树形图和瀑布图。

#### 树形图

目的：以层级关系展示页面导航路径，方便分析入口与分支。

- 节点交互：悬停显示简要信息；点击打开详情面板（包含标题、URL、访问时间、及 SPA 请求数等）。
- 缩放/拖拽：在树视图中，鼠标拖拽用于平移画布，鼠标滚轮通常用于按比例缩放视图（具体行为受浏览器和设置影响）。
- SPA 徽章：树节点上会显示一个不显眼的环形徽章与数字（若有 SPA 请求），用于提示该节点合并了多少 SPA 请求。

#### 瀑布图

目的：沿时间轴展示事件/请求，便于查看重叠与持续时长。

- 节点交互：瀑布图支持将同一标签页在同一时间段内的多个节点进行折叠显示（折叠组），用户可以展开折叠组以查看组内项，折叠组内通常使用抽屉样式展示并支持内部滚动。
- 折叠组按标签页分组（同一时段内，同一标签页的节点会在同一组内合并），展开后可以在抽屉内部滚动查看更多条目。
- 滚轮与拖拽：鼠标滚轮在当前实现中主要用于垂直方向滚动泳道，便于在多泳道间浏览；拖拽用于平移时间窗口或调整观察窗口位置。
- SPA 徽章：节点右上角的标记代表该节点合并的 SPA 请求数。

### 选项页（设置）

选项页包含用于调整扩展行为的一些首选项：

- 会话分割的空闲时间阈值（用于自动划分会话）。
- 会话模式选择（例如：按日 / 手动 / 基于活动）。
- 语言选择（用于强制指定界面的本地化语言）。

说明：节点筛选、显示/隐藏类控制与更多细粒度的过滤操作由侧栏的筛选控件或视图内控件提供；选项页侧重于全局行为和本地化设置。

### 故障排除（常见问题）

- 视图未更新：尝试刷新扩展页面或重新加载会话。
- 会话划分异常：调整选项页中的空闲时间阈值以获得更符合预期的分割。

## 数据管理与隐私

- 本地存储：所有浏览历史数据仅保存在本机（IndexedDB / LocalStorage），不会上传到云端。

## 最近更新

自 v1.1.0 以来的主要变更：

- 将“时间线”视图移除，并新增“瀑布图”视图，用于按时间轴查看事件与泳道分配。
- 在树形图中新增对 SPA 页面请求的处理：在节点详情中显示 SPA 请求计数，并在节点上显示小型环形徽章以提示存在的 SPA 请求。

## 开发者与技术信息

### 本地开发与构建

1. 克隆仓库：`git clone https://github.com/wxy/Navigraph.git`
2. 安装依赖：`npm install`
3. 构建：`npm run build`
4. 在 Chrome (`chrome://extensions/`) 中加载未打包扩展，选择 `dist` 目录。

### 议题与联系

在 GitHub Issues 提交 Bug 或功能请求： https://github.com/wxy/Navigraph/issues

### 贡献指南

如果您想贡献：

1. Fork 仓库并创建功能分支（`git checkout -b feature/your-feature`）。
2. 提交清晰的变更并打开拉取请求（PR）。

如果你发现这个扩展在你使用的语言中有错误或不准确的地方，欢迎提交翻译改进的拉取请求！

### 许可证

本项目采用 MIT 许可证 — 见 [LICENSE](LICENSE)。

### 技术架构

- 前端：TypeScript、D3.js、CSS3
- 存储：IndexedDB、LocalStorage
- 浏览器 API：Chrome Extensions API
- 构建工具：Webpack