# dsh-official-port-nav

[![English](https://img.shields.io/badge/English-blue)](README.md)
[![中文](https://img.shields.io/badge/中文-blue)](README.zh.md)

DeepSeek 网页端「对话快速定位导航」的 **DSH 动态 Cordis 插件** 复刻版。

聊天区最右侧一条极简 minimap：收起时是一条竖排横杠，悬停原地淡出展开消息索引面板，点击任意一条瞬间跳转到对应消息并闪亮提示，滚动聊天时**映射与蓝色定位实时跟随**，和 DeepSeek 官方效果一比一。

## 效果对照

### 展开前（1）

<table>
  <tr>
    <th align="center">Official（DeepSeek）</th>
    <th align="center">Plugin（本插件）</th>
  </tr>
  <tr>
    <td align="center"><img src="docs/official1.png" alt="official 展开前"></td>
    <td align="center"><img src="docs/plugin1.png" alt="plugin 展开前"></td>
  </tr>
</table>

### 展开后（2）

<table>
  <tr>
    <th align="center">Official（DeepSeek）</th>
    <th align="center">Plugin（本插件）</th>
  </tr>
  <tr>
    <td align="center"><img src="docs/official2.png" alt="official 展开后"></td>
    <td align="center"><img src="docs/plugin2.png" alt="plugin 展开后"></td>
  </tr>
</table>

> 文件名末尾数字相同的为一组对照：`1` = 展开前，`2` = 展开后。

## 功能特性

- **原地长出**：悬停右侧竖条，面板纯渐变淡入（先边框后文字），横杠位置纹丝不动，框围着横杠展开；移开立即渐隐
- **映射反转**：收起状态是展开面板视口的映射——面板滚轮滚动时，横杠随每一行实时移动
- **自动定位**：滚动聊天区时，蓝色当前标记自动跟随，无需点击；面板视口自动把当前消息居中
- **点击瞬移**：点击横杠/行 → 聊天区瞬间跳转，目标消息移到顶部并闪亮 1.8s
- **详情预览**：悬停某行 400ms 后弹出紧凑详情框（最多 5 行，超出省略号）
- **滚轮**：自制 6px 细滚动条，无三角按钮，可滑到最底，点轨道跳转、按住拖动
- **细节**：只索引用户消息（最多 10 条）；普通灰 / 悬停微亮 / 当前蓝三态；上下边缘 12px 留白 + 30px 渐隐；收起保留滚动位置

## 使用方式（DSH 动态插件）

1. 打开 DSH 的 Cordis 动态插件面板
2. 新建插件：`idPrefix` 建议填 `cnav`
3. 把 `dsh-client.js` 的**全部内容**填入 client 代码框（无需 Host 代码）
4. 运行即可；停止/回滚可在同一面板操作

> 代码是纯 JavaScript 函数体（无 JSX/TS/import），直接兼容 DSH 的 client half 沙箱。

## 文件结构

```
dsh-official-port-nav/
├── dsh-client.js               # 插件完整源码（client half，当前运行版本）
├── docs/
│   ├── official1.png           # 对照图：展开前 Official
│   ├── official2.png           # 对照图：展开后 Official
│   ├── plugin1.png             # 对照图：展开前 Plugin
│   └── plugin2.png             # 对照图：展开后 Plugin
├── ConversationNavigator.tsx   # v1 的 ChatGPT UI 原件（存档，不再使用）
├── ConversationNavigator.css   # v1 的 ChatGPT UI 样式（存档，不再使用）
├── package.json
└── README.md
```

## 技术要点

- 挂载点：`shell.overlay`（框架浮动层，additive，不影响聊天布局）
- 数据桥接：只读聊天 DOM 的 `data-chat-flow-kind` / `data-chat-flow-key`，零侵入
- 定时器：全部走 `ctx.timer`（client half 沙箱不提供原生定时器）
- 当前消息检测：scroll 事件（120ms 节流）+ IntersectionObserver + MutationObserver + 兜底轮询
- 清理：所有样式、监听器、定时器随插件 fiber 一并回收