wuzehao888/dsh-plugin-message-nav
wuzehao888★ 0JavaScriptLast synced: 2026-08-16
DSH web plugin: left-side message navigation rail — one numbered tick per user message, click to jump, hover preview, scroll-follow highlight, auto-loads full history
README excerpt
dsh-plugin-message-nav 左侧消息导航轨道插件(DSH Web 客户端插件)。 功能 - 在会话消息区 左侧 渲染一条垂直导航轨道,高度按刻度内容 动态自适应 (最高为消息区高度的 1/3 )且 垂直居中 ,上下带 4px padding、 圆角浅灰背景;刻度较多放不下时轨道 内部可滚动 (隐藏滚动条)浏览全部刻度; - 每条用户消息一个刻度 ,刻度上显示消息序号(数字); - 打开会话即自动加载全部历史 :会话窗口默认只拉取尾部一页(50 条), 插件会循环调用 session.loadOlder() (每页 50 条)直到 hasMore === false , 让轨道一次性列出会话中的 所有 用户消息,无需手动点击"加载更早"; - 点击刻度 :平滑滚动消息区,跳转到该条用户消息; - 悬停刻度 :浮层预览该条消息的文本内容; - 跟随滚动高亮 :当前视口内最近的用户消息刻度高亮(主题色)。 结构 浏览器 bundle 是手写的 window. ModuleLoader .load({ id, factory }) CJS 工厂,无需构建步骤;依赖只取平台 seed 词( react )。 实现要点 - 挂载点: shell.overlay (frame 级悬浮层,root 作用域,list 槽,点击 穿透默认关闭,条目 opt-in 指针事件); - 数据源: ctx.sessions.binding(current)?.session ( SessionFace = ObservableSnapshot ),用 useSyncExternalStore 订阅;用户消息按 chat.order 中 kind === 'user' 'steering' 过滤; - 刻度定位:轨道高度动态 = 刻度数 × 间距( TICK SPACING = 26px )+ 上下 padding( RAIL PADDING = 4px ),封顶为滚动容器高度 × 1/3 ( RAIL HEIGHT RATIO ),垂直居中,左缘留 RAIL LEFT INSET = 4px ; 刻度按固定间距等距排列在轨道内容里,内容超出轨道可视高度时轨道内部滚动 ( overflow-y: auto ,隐藏滚动条),当前高亮刻度自动保持可见( scrollTo 跟随); - 跳转:对滚动容器 scrollTo({ top, behavior: 'smooth' }) ; - 高亮:滚动监听 + 顺序查找视口顶部最近的用户消息; - 自动加载:effect 观察 snapshot.hasMore / loadingOlder / openState ,在会话 打开且仍有更早历史时调用 session.loadOlder() ;以窗口首个锚点 seq 是否 前进来判断…
View full README on GitHub →Category
A public gallery of animated pets for Codex, Claude Code, DeepSeek Harness, Hermes, OpenCode, Gemini CLI, and more.
★ 3,846
edison7009/EchoBirdOne-click install + model switch:Claude Code,Codex CLI (OpenAI), Grok Build (xAI), DeepSeek Harness, Kimi Code (Moonshot) ,Qwen Code,Aider,OpenCode,MiMo Code (Xiaomi),ZCode (Z.AI),OpenClaw,Pi,OpenScience,Vibe-Trading,Claude Desktop (3P profile),ChatGPT desktop,OpenCode Desktop,
★ 3,038
ccch1mneyyy/dsh-TUIDSH 官方公众号收录的 TUI 补位插件:Claude Code 风,鲸鱼顶栏/实时状态/流式思考/双击 Esc 回滚/上下文进度+TPS。npm 一键装。 DSH official WeChat featured TUI plugin — Claude Code style: whale bar, live status, streaming thoughts, double-Esc rollback, context bar + TPS. npm one-click.
★ 1,442