侧边网页预览面板:本地静态托管、Markdown/代码/图片预览、非静态项目一键运行(Cargo/npm/Go/Python)实时日志、网页元素标记批注、链接点击接管到侧边预览。
安装
# GitHub 源码(首次需按提示配置 allowBuilds 构建授权后重试)
dsh plugin --profile web add github:zoumutou/dsh-web-preview
GitHub 来源的插件在安装时会在你的机器上执行构建脚本。请只安装可信来源,并尽量锁定 commit(github:owner/repo#sha)。
README
DeepSeek Harness(DSH)侧边网页预览面板 —— 一个标准 Cordis 插件包(Host + Client 双半), 把工作区目录托管成 iframe 预览,并支持项目运行、元素标记批注与链接点击接管。
功能
- 侧边预览:对话右上角 ▶ 按钮打开右侧玻璃卡片式预览面板(每个会话独立状态), 地址栏实时同步、可拖动调宽(挤压对话 → 400px 封顶 → 覆盖模式)
- 本地文件预览:工作区静态文件经 Harness 自身的 HTTP 服务托管
(
/__dsh-preview/<sessionId>/...)—— Markdown 渲染、代码带行号、图片直显、 HTML 原样 - 项目运行:自动检测项目类型(Cargo / package.json / go.mod / Python),
▶ 运行 / ⏹ 停止,日志实时滚动、自动识别
localhost:PORT并加载预览; 「日志→对话」一键把日志发给 AI 辅助诊断 - 元素标记:🖉 标记模式(悬停手型高亮、点击选取元素、批注气泡、一键发送到对话), 选择器/HTML 快照自动剥离内部标记类
- 链接点击接管:对话里点击 http(s) 链接、相对/绝对文件路径、纯文本路径 (自动转链接)→ 全部在侧边打开;Cmd/Ctrl+点击保留浏览器默认行为
- 会话隔离:每个会话独立的预览状态、根目录(默认当前会话所属工作区)、运行进程
安装
要求 DSH(DeepSeek Harness)Web 版。在 profile 目录(如 ~/.dsh/profiles/web):
npm install dsh-web-preview-panel
然后在 cordis.patch.yml 中挂载:
- insert:
- name: dsh-web-preview-panel
重启 dsh web 即生效。
开发
npm run build # 产出 lib/index.js(host)与 lib/client.js(ModuleLoader bundle)
src/host.js—— Host 半:webServer路由(静态托管 +POST /apiJSON RPC)、subprocess项目运行、fs文件访问src/client.js—— Client 半:React 面板 UI、标记/批注、点击接管、会话隔离; 通过fetch('/__dsh-preview/api')与 Host 通信
协议
GET/HEAD /__dsh-preview/<sessionId>/<path>—— 静态文件 / Markdown / 代码 / 图片POST /__dsh-preview/api——{ method, args }JSON RPC:set-rootpagesresolve-pathdetect-projectrun-projectproject-statusstop-projectstate
License
MIT
链接
同类插件
zhu1090093659/dsh-web-ui#packages/dsh-web-ui-all★ 1880
DSH Web UI 插件与皮肤合集:任务看板、git 图、右侧面板、远程移动端 UI、桌宠、实时 token 统计与皮肤中心。
ccch1mneyyy/dsh-TUI★ 876
Claude Code 风格全屏终端 UI:像素鲸鱼顶栏、实时工作状态行、思考流式展开。
omdsh-dev/DSH-better-sidebar★ 740
侧边栏完整工作台:内置文件渲染编辑、终端、Git 与子代理,支持三方插件注册新 Tab。
huiliyi37/dsh-tianshu-tui★ 132
DeepSeek Harness 的终端 UI(TUI)。
omdsh-dev/dsh-at-file★ 126
Codex 风格的 `@file` 文件引用,输入框里直接搜索并引用工作区文件。
Nagi-ovo/dsh-visualize★ 82
对话内生成式 UI:模型把交互式 HTML 卡片直接画进会话流,带流式预览与沙箱渲染。