智能跳转

AI-SideChat 的智能跳转功能可以让你从收藏列表快速定位回原始对话上下文。本文档详细介绍跳转功能的原理和使用方法。

功能概述

点击悬浮坞中的任意收藏条目，系统会自动：

1. 打开对应的对话页面
2. 精准定位到收藏的问题位置
3. 高亮显示目标问题
4. 滚动到可视区域

跳转模式

软导航 (Soft Navigation)

当你已经在对话页面时，系统会尝试软导航：

• 优点：速度快，不刷新页面
• 适用：SPA 应用内部路由切换
• 实现：通过修改 URL 和触发页面内部导航

硬跳转 (Hard Jump)

当软导航失败或不在对话页面时：

• 方式：强制跳转到目标 URL
• 效果：页面会刷新
• 保证：100% 能打开目标页面

三层定位策略

策略 A：索引精准命中 + Hash 校验

最优策略，速度最快：

1. 根据 bubbleIndex 直接定位到目标索引
2. 验证该位置问题的哈希值
3. 如果匹配，定位成功 ✅

const targetBubble = userBubbles[bubbleIndex]
if (simpleHash(targetBubble.innerText) === questionHash) {
  // 定位成功
  scrollToElement(targetBubble)
}

策略 B：Hash 全局搜索

容错策略，当索引不匹配时：

1. 遍历所有用户提问气泡
2. 计算每个问题的哈希值
3. 找到匹配的问题

for (let i = 0; i < userBubbles.length; i++) {
  if (simpleHash(userBubbles[i].innerText) === questionHash) {
    // 找到匹配的问题
    scrollToElement(userBubbles[i])
    return
  }
}

适用场景：

• 对话中插入了新问题
• 对话中删除了部分问题
• 索引位置发生偏移

策略 C：索引强制兜底 (Fuzzy Fallback)

最后兜底，确保总能定位：

1. 直接跳转到索引位置
2. 不验证内容是否匹配
3. 至少能定位到附近

const targetBubble = userBubbles[bubbleIndex] || userBubbles[userBubbles.length - 1]
scrollToElement(targetBubble)

跳转流程

完整流程图

点击收藏条目
    ↓
检查当前页面
    ↓
是否在目标对话？
    ├─ 是 → 软导航
    │        ↓
    │    等待页面更新
    │        ↓
    └─ 否 → 硬跳转
             ↓
         等待页面加载
             ↓
        执行定位策略
             ↓
    策略 A：索引+Hash
        ↓ 失败
    策略 B：Hash 搜索
        ↓ 失败
    策略 C：索引兜底
             ↓
         高亮显示
             ↓
          完成 ✅

高亮效果

视觉反馈

定位成功后，目标问题会：

1. 背景高亮：紫色背景 (#8850e5)
2. 持续时间：2 秒
3. 动画效果：淡入淡出

.ai-clip-highlight {
  background-color: rgba(136, 80, 229, 0.2) !important;
  transition: background-color 0.3s ease;
}

滚动行为

element.scrollIntoView({
  behavior: 'smooth',
  block: 'center'
})

• 平滑滚动：视觉体验更好
• 居中显示：目标始终在屏幕中央

跨页状态保持

sessionStorage 机制

系统使用 sessionStorage 保存跳转信息：

sessionStorage.setItem('aiClip_pendingJump', JSON.stringify({
  questionHash: '123456',
  bubbleIndex: 2,
  timestamp: Date.now()
}))

页面加载后恢复

window.addEventListener('load', () => {
  const pendingJump = sessionStorage.getItem('aiClip_pendingJump')
  if (pendingJump) {
    const { questionHash, bubbleIndex } = JSON.parse(pendingJump)
    performJump(questionHash, bubbleIndex)
    sessionStorage.removeItem('aiClip_pendingJump')
  }
})

平台适配

Gemini

选择器：

const userBubbles = document.querySelectorAll('user-query')

特点：

• 使用自定义元素
• 动态渲染内容

ChatGPT

选择器：

const userBubbles = document.querySelectorAll('[data-message-author-role="user"]')

特点：

• 使用 data 属性
• 虚拟滚动优化

故障排除

定位不准确

问题：跳转后位置不对

原因：

• 对话内容已变化
• 索引位置偏移

解决：系统会自动尝试 Hash 搜索

无法跳转

问题：点击后无反应

原因：

• URL 无效
• 权限问题

解决：

• 检查收藏的 URL
• 确保已登录 AI 平台

页面刷新后定位失败

问题：硬跳转后没有自动定位

原因：

• sessionStorage 未保存
• 页面加载监听器失败

解决：

• 刷新页面重试
• 检查浏览器控制台

下一步

• 预览系统 - 了解预览功能
• 搜索过滤 - 学习搜索和筛选