前言¶
DeepSeek Harness (DSH) Web Client 采用了插件化架构,扩展了系统的能力边界。在进行本地代码开发或文件浏览时,原生的 Web 界面往往缺乏对文件系统的深度集成能力。dsh-sidebar 插件通过注入一个独立的侧栏组件,将本地文件管理、Git 追踪与网页预览整合到了 DSH 的界面中,填补了原生 Web 界面在本地文件操作体验上的空白。
是什么¶
dsh-sidebar 是一个由用户 kaijia323 维护的 DSH Web Client 插件,采用 MIT 许可证。它不依赖 DSH 原生的 details slot,而是作为 #root 的兄弟节点挂载在 document.body 上,通过 CSS 布局将原生界面向右挤压,从而实现“真占位”的侧栏效果。
核心功能¶
该插件主要提供以下能力:
- 虚拟化文件树:支持对当前会话工作区目录进行懒加载展示,使用虚拟滚动技术处理大目录,避免渲染性能问题。
- 多格式预览:支持文本/代码(带行号与基础语法高亮)、Markdown 渲染/源码切换、常见图片(png/jpg/jpeg/gif/webp/bmp/ico/avif)预览。
- VSCode 风格 Activity Bar:侧栏最右侧提供常驻的 Activity Bar,包含“文件资源管理器”、“Git 追踪”和“浏览器”三个视图切换入口。
- 多文件 Tabs:支持在预览区打开多个文件,具备横向滚动和关闭功能。
- Git 追踪视图:提供分支、改动、历史记录等 Git 功能,支持 Pull/Push 操作及状态自动刷新。
- 浏览器视图:集成 iframe 浏览器,支持地址栏导航、搜索、Edge 风格标签页管理,并可直接打开本地 HTML 文件。
- 文件监听:使用
chokidar监听文件变化,实现文件树与预览内容的自动刷新。
安装与启用¶
安装前请确保 DSH 版本为 0.1.2-alpha.2 或更新版本。
安装命令:
dsh plugin --profile web add @kaijia/dsh-sidebar
安装完成后,重启 dsh web 即可启用插件。侧栏默认会根据当前会话的工作区(cwd)生成文件树。
典型用法¶
- 预览文件:点击文件树中的文件,内容会在侧栏下方显示预览区。
- 切换视图:点击侧栏右侧的 Activity Bar 图标(文件、Git、浏览器),切换不同的功能视图。
- 调整侧栏:拖拽侧栏的左侧边缘可以调整宽度(最小 280px)。
- 收起/展开:点击当前视图的图标可以收起侧栏,再次点击或切换视图可展开。
- 打开本地 HTML:在文件树中选择
.html文件,会自动跳转到浏览器视图并在新标签页中打开。
注意事项¶
- 工作区要求:当前会话必须带有工作区目录(cwd),否则侧栏内容无法正常显示。
- 编码与格式:非 UTF-8 文本内容会回退为二进制提示;图片预览有格式和大小限制。
- Git 依赖:Git 追踪视图需要本机安装 Git 命令,且当前工作目录必须在 Git 仓库内。
- 兼容性:插件依赖 DSH 0.1.2-alpha.2 或更新版本,升级 DSH 后需注意布局兼容性。