ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Voyager 时间轴(Timeline)使用指南:把长对话变成一条可导航的线

2026/9/21 15:30:53 拓冰建站 浏览量
Voyager 时间轴(Timeline)使用指南:把长对话变成一条可导航的线 Voyager 时间轴Timeline使用指南把长对话变成一条可导航的线【免费下载链接】voyagerEnhancement suite for Gemini, AI Studio, Claude ChatGPT — plus a prompt manager for any websites, DeepSeek Harness included. / 面向 Gemini、AI Studio、Claude 与 ChatGPT 的增强套件其中的提示词管理器可用于任意网站如 DeepSeek Harness。项目地址: https://gitcode.com/gh_mirrors/ge/voyager本指南讲解 Voyager 扩展核心功能「时间轴」它在 Gemini、Claude 等 AI 对话页右侧渲染一条纵向时间轴每个节点代表一轮对话并提供点击跳转、悬停预览、长按加星、层级折叠、宽度调节与 Vim 风格键盘导航。读完本文你将掌握时间轴的完整交互方式、星标插眼的用法与跨设备同步原理、快捷键的自定义规则以及背后的源码级实现机制。为什么需要时间轴长对话是灾难Gemini、AI Studio、Claude 等平台上的长对话往往长达几十上百轮。想要翻看几天前的那条回答、找回灵光一现的那条消息只能上下滚动、凭感觉定位非常低效。Voyager 的解决方案是把对话变成一条线页面右侧渲染一条时间轴每个点就是一句话。整段对话的节奏、长短、密度一眼可见这就是 时间轴 文档所描述的看见节奏。上图即时间轴的典型形态对话被压缩为一条纵向节点序列视觉上呈现整段对话的脉搏。时间轴六种导航能力一览时间轴围绕导航设计核心交互如下瞬移点击任意节点直接跳到对应消息绝不拖泥带水。偷看鼠标悬停在节点上不用跳转就能看到该条消息的内容摘要。插眼长按节点加星相当于给大脑打个书签标记重要时刻。层级实验性右键点击节点可设置 1–3 级层级或折叠子节点让深度分支对话一目了然。调宽窄拖动时间轴内侧边缘自由调整宽度。快捷键用键盘飞速穿梭。默认j/k上下跳转gg/GG直达首尾且任意键都可自定义。下面逐项深入。瞬移与偷看点击跳转 悬停预览点击跳转由导航核心TimelineNavigation负责。它维护当前活跃节点将目标消息元素平滑滚动到视口约 45% 高度处ACTIVE_ANCHOR 0.45见 TimelineNavigation.ts并把时间轴上的高亮同步到该节点。滚动目标有flow流动与jump跳跃两种模式下文会细说。悬停预览由TimelineTooltip实现鼠标悬停约 150msTOOLTIP_DELAY_MS后在节点旁弹出悬浮卡片显示该轮消息摘要如果该节点已加星摘要前会带★前缀。对于超长对话更高效的方式是预览面板TimelinePreviewPanel提供带搜索框的消息列表支持固定pin悬停时列出所有轮次。插眼给灵感钉个钉长对话里藏着金子用星标把重要时刻钉住。怎么用长按约 0.5 秒时间轴上任意节点看到它亮起来——这条消息就被加星了。再次长按可取消星标。加星的节点会保持高亮一眼就能找到。点击时间轴顶部的星标图标打开星标历史面板集中查看所有标记过的消息。把它想象成在对话中插旗——灵感迸发的瞬间、完美的回答、或者下次要从这里继续的位置。源码里的约 0.5 秒长按判定在源码中有精确实现Gemini 时间轴的节点交互点击、长按、层级菜单由 TimelineMarkerInteractions.ts 负责Claude 时间轴的TurnNavigator中定义了LONG_PRESS_MS 550毫秒并在长按触发后通过suppressClickUntil350ms抑制随后的误点击防止加星后又立刻跳转见 TurnNavigator.ts。星标数据与跨设备同步星标状态由TimelineState统一管理每个会话一份本地记录存于localStorage的geminiTimelineStars:conversationId键见 TimelineState.ts同时通过StarredMessagesService写入扩展全局存储并监听chrome.storage.onChanged其他标签页/其他设备开启云同步后的星标变化会实时反映到当前时间轴加星时还会记录消息摘要、会话标题、会话 URL 与时间戳供星标历史面板使用。::: tip 小贴士 开启云同步后星标会跨设备同步。 :::星标历史面板点击时间轴顶部的星标图标即可打开星标历史实现见 StarredHistory.tsx搜索按关键词过滤所有已保存项分类筛选全部 / 星标消息 / 高亮highlight三类带数量角标导出与导入支持将星标高亮导出为 JSON 或 Markdown 文件也可从 JSON 文件导入跳转点击条目直接打开对应会话并定位到该消息通过#gv-turn-id深链导航侧由TimelineNavigation.handleStarredMessageNavigation处理若当前标签页与目标同属 Gemini / AI Studio / Claude会在当前标签页内跳转否则新开标签页删除悬浮在条目上可移除星标。键盘更快Vim 风格穿梭不想用鼠标用键盘。就像在 Gemini 里开了 Vim Mode。默认快捷键按键动作k跳到上一个节点j跳到下一个节点gg跳到第一轮GG跳到最后一轮以上默认值定义在 KeyboardShortcutService.ts 中采用 Vim 风格的无修饰键设计previous绑k、next绑j、first绑g序列长度 2、last绑ShiftG序列长度 2。两个值得注意的细节连击序列检测gg/GG属于两次按键的序列两次按键间隔必须小于 500msSEQUENCE_TIMEOUT_MS否则不触发长按不重复触发序列。自动规避输入场景当焦点在输入框、文本域、contenteditable或roletextbox中以及中文等 IME 输入法组合isComposing期间快捷键会被忽略绝不会干扰打字。自定义快捷键打开扩展设置点击快捷键框按下你想用的键。任意键、任意组合都可以n/p,/.随你。配置支持Alt、Ctrl、Shift、Meta四种修饰键通过chrome.storage.sync持久化并跨标签页同步设置界面会按平台显示符号macOS 显示⌘、⌥、⌃、⇧。流动模式 vs 跳跃模式流动模式flow跳转带滚动动画连按快捷键会排队播放动画TimelineNavigation内部导航队列上限为 3逐个执行动画时长默认 650ms并随跳转跨度在 300–1800ms 间自适应还提供ios/snappy/gentle三种缓动曲线。跳跃模式jump立即响应、速度拉满——smoothScrollTo直接设置scrollTop完成瞬时定位。模式在弹窗设置的「滚动模式」中切换见 TimelineSettingsCard.tsx。层级与折叠让深度分支一目了然长对话常出现A 问完又问 B再回到 A的分支结构。右键点击节点会弹出上下文菜单由TimelineMarkerInteractions渲染可设置 1–3 级层级或折叠/展开子节点层级把节点标记为 1/2/3 级视觉上用不同缩进与指示点区分主线和分支折叠折叠某节点后其所有更低层级数字更大的子节点会被隐藏时间轴按有效位置重新排布TimelineState.calculateCollapsedPositions会基于baseN与层级差重新计算各可见节点的位置被折叠部分的长度按0.5^层级差衰减计入持久化层级与折叠状态按会话存储并通过chrome.storage.local的TIMELINE_HIERARCHY键持久化且按账号隔离多账号 / 多路由/u/n/app各自独立同时保留向 legacy localStorage 的镜像写入以兼容旧版本数据。由于该能力仍在验证交互设计设置面板中将其标为实验性enableMarkerLevel默认关闭。调宽窄拖动时间轴内侧边缘时间轴宽度可自由调整拖动轨道内侧边缘宽度在4px–24px之间变化默认 4px见 TimelineView.ts 中的barWidth/barWidthMin/barWidthMax。轨道位置与尺寸变化由ResizeObserver监听并重绘窗口 resize 事件经 140ms 防抖合并避免频繁重排。除宽度外设置面板还提供完整的时间轴选项时间轴样式dots圆点/ruler标尺/compact紧凑刻度隐藏外层容器、可拖拽时间轴、固定预览面板、防止自动滚动显示消息时间戳实验性需开启历史时间戳重置时间轴位置、查看星标历史入口。源码级原理时间轴是如何工作的责任划分一份清晰的模块地图时间轴功能遵循单一负责人设计timeline/README.md 记录了完整职责表摘录如下职责负责人查找轮次、稳定 ID、消息摘要TimelineTurns星标、层级、折叠、持久化TimelineState点击/预览/快捷键导航、活跃节点、滚动与导航取消TimelineNavigation轨道几何、虚拟圆点、滑块、拖拽、流动动画TimelineView预览列表、搜索、固定、紧凑模式悬停桥TimelinePreviewPanel悬停延时、tooltip 内容与位置TimelineTooltip节点点击、长按、层级菜单TimelineMarkerInteractions时间戳开关、草稿采纳、历史匹配TimelineTimestamps数据流是单向的渲染读状态用户操作与存储事件更新状态并通知 manager。对话切换SPA 导航时各 owner 会取消监听器、观察器、定时器与动画帧避免内存泄漏。入口与生命周期入口 index.ts 只在 Gemini 会话路由/app、/gem/以及带账号前缀的/u/数字/app、/u/数字/gem/上初始化时间轴监听 SPA 路由变化仅在 pathname 或 search 变化时重建纯 hash 变化保留现状路由切换为会话页后延迟 500ms 初始化等待 DOM 稳定离开会话页或页面卸载时销毁 manager、断开 MutationObserver、清理历史时间戳 store防止泄漏。Gemini 与 Claude/DeepSeek 共用同一套引擎Claude 的时间轴是内置插件voyager.claude-timeline它是对turnNavigator原语TurnNavigator.ts的一层薄壳配置轮次选择器[data-testiduser-message]会话 ID从/chat/id路由提取格式为claude:conv:id不同站点通过siteId前缀隔离星标存储互不串数据轨道位置right智能让位当 Claude 的 artifact 沙箱 iframeclaudeusercontent.com打开时不弹出引导层避免遮挡内容。TurnNavigator处理了一个硬核问题——Claude 等站点对超长对话做了虚拟化DOM 中只挂载滑动窗口内的轮次。因此它按内容 hash 累积节点c-hash形式跨刷新缝合窗口已知节点永不丢弃从而在虚拟化滚动中保持完整时间轴。仓库的插件目录中同样提供面向 DeepSeek 的时间轴插件plugin.json说明该引擎是可参数化复用的。无障碍与可访问性每个时间轴节点都是语义化按钮带aria-label消息摘要、aria-pressed星标状态、aria-current当前节点紧凑样式下轨道会aria-hidden以避免重复朗读。加星、跳转均可用键盘完成。适用前提时间轴针对Geminigemini.google.com/ AI Studio 的/app、/gem路由与Claude/chat/id等受支持站点生效层级、时间戳等属于实验性能力需在扩展设置中手动开启星标跨设备同步依赖云同步处于开启状态详细安装与启用方式见安装指南完整设置项说明见设置文档。把长对话变成一条线剩下的交给时间轴点击即达、悬停即览、长按即标、按键即飞。【免费下载链接】voyagerEnhancement suite for Gemini, AI Studio, Claude ChatGPT — plus a prompt manager for any websites, DeepSeek Harness included. / 面向 Gemini、AI Studio、Claude 与 ChatGPT 的增强套件其中的提示词管理器可用于任意网站如 DeepSeek Harness。项目地址: https://gitcode.com/gh_mirrors/ge/voyager创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考