dsh-minimap:为 DSH Web GUI 侧边栏添加 VS Code 风格的缩略图

在 DSH 生态中,利用 dsh-better-sidebar 可以在 Web 界面查看文件。当处理长文本时,在编辑器内部滚动定位效率较低。dsh-minimap 通过在侧边栏文本编辑器边缘叠加整篇文档的微型文字缩略图来解决这一问题。

插件定位

这是一个由 ping1999 维护的插件,旨在为 DSH Web GUI 的侧边文件查看器提供类似 VS Code 的缩略图导航。它通过文本缩略图和可拖动的视口框,帮助开发者在长文件中快速定位。

核心功能

  1. 缩略图显示:叠加整篇文档的微型文字缩略图。
  2. 视口跟随:半透明视口框实时跟随滚动。
  3. 交互操作:
    * 点击跳转:点击缩略图任意位置,编辑器跳转到对应位置。
    * 拖动定位:按住视口框拖动,编辑器跟随滚动。
    * 悬停滚动:悬停缩略图滚轮,等效于滚动编辑器。
  4. 视觉适配:语法着色,适配明暗主题;宽度自适应侧栏(约编辑器宽度的 22%,钳制在 56–110px),编辑器内容区自动预留间隙,长行文字不会被遮挡。
  5. 滚动映射:拖动到底即真正到底,比例映射以编辑器的真实滚动范围为基准。
  6. 架构设计:纯叠加层,不改动侧栏组件;多标签页各自独立,关闭标签页或卸载插件后完全清理。

安装与启用

使用以下命令安装插件:

dsh plugin --profile web add dsh-minimap

或从 GitHub 源码安装:

dsh plugin --profile web add github:ping1999/dsh-minimap

安装后需重启 web 服务才能生效:

pnpm dsh web

兼容性说明:已验证与 dsh 0.1.5-rc.2 + dsh-better-sidebar 0.19.1 兼容,向下兼容 dsh 0.1.5-rc.1 / dsh-better-sidebar 0.19.0。

典型用法

  1. 打开任意会话,在右侧 Files 侧栏打开一个文本文件。
  2. 编辑器右缘即出现缩略图。
  3. 操作方式:
    * 滚动编辑器 → 缩略图视口框同步移动。
    * 点击缩略图任意位置 → 编辑器跳转(视口居中)。
    * 按住视口框拖动 → 编辑器跟随滚动(支持鼠标与触屏)。
    * 悬停缩略图滚轮 → 等效于滚动编辑器(含触控板横向滚动)。

适用场景与注意

  • 生效范围:仅对 CodeMirror 6 文本查看器生效(即 dsh-better-sidebar 的文件查看器)。图片 / PDF / Markdown 预览不会出现缩略图。
  • 语法着色:是渐进式的,CM6 只渲染可视行,行滚入视野至少一次后才有颜色。
  • 服务重启:安装/升级后必须重启 web 服务。
  • 配置项:暂无设置项。

总结

dsh-minimap 为 DSH 的 Web 文件查看提供了全局概览能力。通过简单的叠加层实现,它在不改动侧栏组件的前提下,显著提升了长文本文件的浏览效率。

插件目录 | GitHub 仓库

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜