Back to home

xiyue718

dsh-ui-message-nav

No description

Stars
0
Language
TypeScript
Created
Aug 17, 2026
Updated
Aug 17, 2026

Introduction

@dsh-external/ui-message-nav

独立的“会话消息导航”插件,从文件浏览插件中提取并重新设计,专注提供会话对话视图的用户消息导航能力。

功能

  • 在会话对话视图右侧(或左侧)显示垂直消息导航栏。
  • 导航项数量等于当前会话中用户(user)消息数量。
  • 导航项按消息发送顺序从上到下排列。
  • 使用长条形图标,不显示数字。
  • 当前正在查看的消息对应图标高亮为蓝色;非高亮图标更短。
  • 鼠标悬停时使用项目内置 Tooltip 样式显示消息内容预览。
  • 点击图标自动滚动定位到对应的用户消息。
  • 滚动到对话顶部时自动触发“加载更早消息”。

独立架构

  • 本插件不依赖文件浏览插件的任何功能模块。
  • 只负责:
    • 识别对话中的用户消息 DOM;
    • 渲染导航栏;
    • 高亮当前消息;
    • 点击定位;
    • 自动加载更早消息。
  • 文件浏览、用量统计、归档管理、插件管理等功能均不在本插件内。

配置项

插件支持通过 profile bundle 装配时的 config 传入配置。

配置示例(cordis.yml / bundle entry)

- id: ui-message-nav
  name: '@dsh-external/ui-message-nav'
  config:
    position: right
    previewMaxLength: 60
    autoLoadOlder: true
    autoLoadThreshold: 40
    showPreview: true
    activeColor: 'var(--dsw-alias-state-info-primary, #4a90d9)'
    idleColor: 'var(--dsw-alias-label-tertiary, #999)'
    barWidthActive: 6
    barWidthIdle: 4
    barHeightActive: 20
    barHeightIdle: 12

配置项说明

配置项类型默认值说明
position'left' | 'right'right导航栏显示在对话视图左侧或右侧
previewMaxLengthnumber60悬停预览最大字符数
autoLoadOlderbooleantrue是否在滚动到顶部时自动加载更早消息
autoLoadThresholdnumber40触发自动加载的顶部距离阈值(px)
showPreviewbooleantrue是否显示悬停消息预览
activeColorstring蓝色 token当前消息高亮颜色
idleColorstring灰色 token非高亮图标颜色
barWidthActivenumber6高亮图标宽度(px)
barWidthIdlenumber4非高亮图标宽度(px)
barHeightActivenumber20高亮图标高度(px)
barHeightIdlenumber12非高亮图标高度(px)

未配置时自动使用默认值。

API

获取当前配置

GET /@dsh-external/ui-message-nav/api/config

响应:

{
  "config": {
    "position": "right",
    "previewMaxLength": 60,
    "autoLoadOlder": true,
    "autoLoadThreshold": 40,
    "showPreview": true,
    "activeColor": "var(--dsw-alias-state-info-primary, #4a90d9)",
    "idleColor": "var(--dsw-alias-label-tertiary, #999)",
    "barWidthActive": 6,
    "barWidthIdle": 4,
    "barHeightActive": 20,
    "barHeightIdle": 12
  }
}

健康检查

GET /@dsh-external/ui-message-nav/api/status

响应:

{
  "ok": true,
  "name": "@dsh-external/ui-message-nav"
}

安装

方式一:超级模组注入器

dev_build_plugin  {"dir": "C:/Users/<user>/.dsh/plugins/ui-message-nav"}
dev_inject_plugin {"dir": "C:/Users/<user>/.dsh/plugins/ui-message-nav"}

方式二:项目自带 bundle 装配

在 profile 的 package.json 中添加:

{
  "dependencies": {
    "@dsh-external/ui-message-nav": "link:C:/Users/<user>/.dsh/plugins/ui-message-nav"
  },
  "dsh": {
    "profile": {
      "bundles": [
        "@dsh-external/ui-message-nav"
      ]
    }
  }
}

然后:

cd C:\Users\<user>\.dsh\profiles\web
pnpm install

重启 DSH Web。

使用示例

  1. 打开任意会话。
  2. 对话视图右侧会出现垂直导航栏。
  3. 每个长条对应一条用户消息。
  4. 当前正在查看的消息对应长条为蓝色且较长。
  5. 鼠标悬停任意长条,左侧显示该消息内容预览。
  6. 点击长条,对话自动滚动到对应消息。
  7. 滚动到对话顶部,自动加载更早消息。

迁移说明

  • 如果之前使用的是文件浏览插件中的旧版消息导航,请卸载或更新文件浏览插件。
  • 新版消息导航已从文件浏览插件中移除,由本插件独立提供。
  • 安装本插件后,旧版导航不会重复出现。

构建产物

  • host:lib/index.js
  • client:lib/client.js
  • 打包文件:dsh-external-ui-message-nav-0.0.1.tgz