WJNCT55555/dsh-web-preview-float ↗★ 0
@dsh-external/dsh-web-preview-float
DSH Web UI 悬浮预览插件:两个可拖拽/拉伸/缩小的独立悬浮窗(预览 iframe + 代码文件树),只依赖官方扩展点,不改 DSH 核心。
安装
$
npx -p @deepseek-ai/dsh dsh plugin --profile web add github:WJNCT55555/dsh-web-preview-float说明文档
阅读完整 README ↗dsh-web-preview-float
DeepSeek Harness(DSH)Web UI 的悬浮预览插件:两个独立、可拖拽、可拉伸、可缩小的悬浮窗,让你在等待模型回复或改代码时实时预览项目,类似 Google AI Studio。
- 预览窗:`` 直连项目 dev server,URL 自动从项目
package.json脚本探测(Vite→5173、Next/CRA→3000、Astro→4321,可手改)。 - 代码窗:工作区文件树 + 只读代码预览(懒加载目录,点文件看内容)。
只依赖官方扩展点(ctx.webServer / ctx.fs / ctx.sandboxPolicy + 自包含 DOM portal),不改 DSH 核心,因此可作为独立插件发布、被 dsh-plugin 生态收录。
安装
作为 profile 的 patch 层安装(DSH 官方插件市场 / bundle 机制):
# 该插件自带的 cordis.patch.yml 会插入这一行
- id: dsh-web-preview-float
name: '@dsh-external/dsh-web-preview-float'
安装后重启 dsh web,浏览器里会出现两个悬浮窗。
开发
pnpm install
pnpm run typecheck
pnpm run test
pnpm run build # 产出 lib/index.js(node 半)+ lib/client.js(浏览器半)
@deepseek-ai/cordis是 vendored 包、不在 npm 上,本地开发请把package.json里devDependencies的link:指向你的 harness checkout 的vendor/cordis。
结构
src/index.ts # node 半:/__web_preview_fs 路由(list/read/dev)
src/invariant.ts # invariant companion
src/client/index.tsx # 浏览器半:挂载两个悬浮窗到 document.body
src/client/FloatingWindow.tsx # 拖拽/拉伸/缩小
src/client/PreviewWindow.tsx # 预览窗(iframe)
src/client/CodeWindow.tsx # 代码窗(文件树 + 代码)
src/client/CodeView.tsx # 文件树 + 代码阅读器
dsh.plugin.json # 插件清单
cordis.patch.yml # profile patch 层
说明
- 代码窗为只读(不提供编辑);二进制/超大文件(>256KB)会提示「文件过大」。
- 语法高亮未做(纯文本
显示),后续可加 shiki。 - 悬浮窗位置/大小状态在内存中,刷新后回到默认位置。