dsh-web-ui/packages/dsh-aionui-panel

4.1kStar248Fork46Issue4Watching

为 DSH 网页版聊天界面右侧加上文件树、Git 变更和多标签文件预览三块面板，读写当前项目真实文件与仓库，不用切到编辑器。

zhu1090093659zhu1090093659
·zhu1090093659/dsh-web-ui.git·gallery.dsh-market.com
语言
TypeScript
License
Apache-2.0
分支
main
deepseek-harnessdshdsh-pluginweb-ui

安装

$ dsh plugin --profile web add github:zhu1090093659/dsh-web-ui/packages/dsh-aionui-panel

在终端中运行以上命令，通过 dsh CLI 安装此插件。可在右上角切换 Profile。 第一次用 dsh？看这篇新手教程

一句话定位

给 DSH 网页版界面的聊天区右侧补上"文件树 + Git 变更 + 文件预览"三块面板，读写的是当前项目里真实的文件和真实的 Git 仓库。它让你在跟 AI 对话的同一个窗口里翻代码、看改动、改文件，不必来回切换编辑器。

核心能力

  • 浏览项目文件树：整行点击展开目录，点文件在右侧打开预览，顶部搜索框按文件名定位（约 150 毫秒防抖），右键菜单支持复制路径、重命名、新建、删除、在系统文件管理器中定位。
  • 查看并操作 Git 变更：读取真实的仓库状态，按已暂存/变更/未跟踪/冲突分组，支持暂存、取消暂存、放弃更改，批量放弃前会二次确认。
  • 多标签预览十余种格式：markdown、HTML、代码（带语法高亮）、diff、CSV、PDF、图片、纯文本可直接阅读，支持源码/预览切换、分屏编辑、保存（保存前检查文件是否被别人改过）、下载与刷新。
  • 把文件拖进输入框：从文件树拖一行到聊天输入区，会在光标处插入相对路径，消息发出后由 AI 自行读取该文件，省去手打路径。
  • 渲染 mermaid 图表：markdown 预览和聊天消息里的 mermaid 代码块会画成图，图表运行时打包在插件内、由本机同源地址提供，不依赖外部 CDN；语法出错时退回显示原始代码块。
  • 调整与记忆布局：拖动分隔条改宽度（文件树 220500px、预览 3401200px），双击复位，折叠后右上角出现浮动展开按钮；宽度、折叠状态、分屏比例按项目分别记住。

技术实现

  • 语言: TypeScript（React 组件 + Node 宿主服务）
  • 关键依赖: @deepseek-ai/cordis（插件框架）、@deepseek-ai/dsh-host-webserver（注册 HTTP 路由）、@deepseek-ai/dsh-client-runtime（浏览器端运行时与会话信息）、mermaid（随包分发的图表运行时）
  • 架构模式: 宿主端与浏览器端双半结构。宿主半边通过 cordis.patch.yml 以 profile bundle 层插入 web profile，注册 /aionui-panel/* 系列接口（目录列举、文件读写、文件名搜索、Git 状态与操作、SSE 变更推送）并向 AI 注入一段能力说明；浏览器半边由 package.json 的 dsh.client 声明加载，把两列面板追加到界面的栅格布局中。所有文件操作先过工作区校验（真实路径归一化 + 前缀比对，拒绝越界与 .git），接口默认只接受本机回环请求。多个标签页打开同一项目时，变更推送流由跨标签"主标签"中继共享，避免占满同源连接。
  • 入口文件: src/index.ts（宿主半边）、src/client/index.ts（浏览器半边）

适用场景

适合把 DSH 网页界面当作主要工作台的用户：一边让 AI 改代码，一边在同一屏里核对文件内容和 Git 变更，不用另开编辑器确认 AI 到底动了哪些行。也适合需要频繁把某个文件交给 AI 的场景——直接把文件从树里拖进输入框比手写路径更省事。写文档的人可以用它预览 markdown 与 mermaid 图表的渲染效果。

前置依赖与兼容性

依赖最低版本说明
DSH0.1.0-rc.6未在 package.json 声明 engines，按插件所依赖的官方 SDK 版本范围推断
Node.js未声明包内无 engines 字段；若从仓库源码构建安装，开发文档要求 Node >= 22 与 pnpm
React18.2 及以上作为对等依赖由宿主界面提供，通常无需自行安装
操作系统跨平台macOS / Windows / Linux 均可；"在文件管理器中显示"在 Windows 与 macOS 为精确定位，Linux 桌面退化为打开所在目录
Git 命令行可选只有变更面板需要；未安装时该页给出提示，其他功能照常
原生模块无只用 Node 内置能力与外部 git 命令，无需编译原生扩展

安装方式

dsh plugin --profile web add github:zhu1090093659/dsh-web-ui/packages/dsh-aionui-panel

配置项

配置类型说明默认值
启用右侧面板开关关闭后卸下文件树与预览两列、隐藏浮动展开按钮，并停止后台的文件监视与 Git 轮询；同一插件家族的其他插件不受影响开

面板宽度、折叠状态、分屏比例等界面偏好不在设置页里配置，而是随操作自动记在浏览器本地存储中，按项目区分。

常见问题

Q: 安装完为什么右侧没有出现面板？

A: 需要先重启 dsh web，然后打开一个带工作目录的项目会话。插件把当前会话的工作目录当作项目根目录，会话没有工作目录时不显示面板。

Q: 当前目录不是 Git 仓库，或机器上没装 Git，会怎样？

A: 变更页会提示"当前目录不是 git 仓库"或"未检测到 git，请先安装 git 后重试"，文件树与预览不受影响。检测到没有 Git 后会停止轮询，不会反复报错刷屏。

Q: Word、Excel、PPT 文件能在面板里看到内容吗？

A: 不能，这三类文件只提供下载入口。可以直接在面板里阅读的是 markdown、HTML、代码、diff、CSV、PDF、图片和纯文本。

Q: 很大的文件能完整预览吗？

A: 文本超过 8 万字符会截断显示，图片超过 8MB 会被拒绝预览。文件名搜索最多返回 200 条结果、扫描 2 万个条目后停止。

Q: 面板宽度和折叠状态保存在哪里？

A: 保存在浏览器本地存储中，按项目路径分别记录，最多保留 12 个项目的预览状态，超出后最旧的会被清理。换浏览器或清空站点数据会回到默认宽度。

Q: 从局域网或远程访问网页界面时面板能用吗？

A: 默认只允许本机访问，其他来源的请求在触碰文件之前就会被拒绝（403）。若同时安装了 dsh-remote-web-ui 并完成设备配对，携带有效配对凭据的请求也会放行；未配对或已吊销的设备仍被拒绝。

Q: 怎么临时关掉这些面板？

A: 在设置页的 Web UI 插件分组里找到"右侧面板"关掉开关即可，面板会卸下、后台监视也一并停止。想彻底移除则用 dsh plugin --profile web remove 卸载对应包并重启 dsh web。

Q: 设置页里找不到这个开关怎么办？

A: 部分 DSH 版本没有把该插件的配置命名空间暴露给网页设置页，此时表单不可用并会给出提示。可以直接编辑 ~/.dsh/settings.yaml，或把该命名空间加入服务端设置白名单后重启。

上手难度

入门 — 安装后重启网页界面、打开项目会话即可使用，唯一配置项是一个总开关；只有需要远程访问或手改配置文件时才会涉及进阶操作。

已知问题与限制

  • Word / Excel / PPT 与未识别格式无法在面板内渲染，只能下载后用本地软件打开。
  • 文本预览上限 8 万字符，超出部分被截断；图片超过 8MB 直接拒绝预览。
  • 文件名搜索有上限（200 条结果 / 扫描 2 万个条目），超大仓库可能搜不全；文件树与搜索会跳过 .git，搜索还会跳过 node_modules。
  • HTML 预览运行在禁用脚本的沙箱框架内，依赖 JavaScript 的页面看不到交互效果。
  • 由其他工具在 DSH 之外产生的提交、切分支等仅改动 .git 的变化，需要等一次轮询（约 30 秒）或窗口重新获得焦点后才会刷新；文件内容改动则由文件监视即时反映。
  • 所有 .git 目录内的读写都被拒绝，重命名或删除项目根目录同样被拒绝。
  • 面板接口默认只接受本机回环请求，纯远程访问场景需要配合设备配对插件。
  • 界面偏好存在浏览器本地存储，最多保留 12 个项目的预览状态，且不会跨浏览器同步。
  • 部分 DSH 版本不向网页设置页暴露该插件的配置命名空间，此时只能改配置文件或调整服务端白名单。
返回插件目录