前言¶
用 DSH（DeepSeek Harness）写前端页面时，验证效果通常要走一套固定流程：让模型输出 HTML，复制到本地文件，再切到浏览器打开。页面每改一轮，就要重复一次复制和切换。dsh-page-preview 把这一步收进了 DSH 的 web 界面：模型输出的 HTML 代码块可以就地渲染成可交互预览，本地工程或在线网址也能放进一个浮动小窗实时查看。下面介绍它的定位、功能、安装步骤与典型用法。
这是什么¶
dsh-page-preview 是一个 DSH web 插件，当前版本 1.0.0，由 watericetangcw 维护，采用 MIT 许可证。它解决的问题是：让 DSH 直接在网页里把页面「显示」给你看，而不是只给你一段代码。能力分为两块：
1、把 DSH 输出的 html page-preview 代码块行内渲染成预览面板；
2、提供一组工具，在界面上打开一个可拖动的浮动预览小窗，查看本地页面或网址。
插件依赖 @deepseek-ai/dsh-tools ^0.1.0-rc.6，要求 Node 版本 ^22.19.0 || >=24.0.0。
核心功能¶
行内预览¶
让 DSH 输出一个 html page-preview 代码块。答案发送后，它会在消息下方渲染为一个可交互预览面板，支持全屏、收起、在新窗口打开，而代码块本身仍然是普通代码块，可以照常查看和复制。注意，行内预览要求页面里的 CSS 与 JS 全部内联。
浮动小窗¶
插件提供四个工具，覆盖预览的完整生命周期：
| 工具 | 作用 |
|---|---|
preview_register |
注册并打开预览，支持本地 HTML 文件、含 index.html 的目录，或 http(s) 网址 |
preview_replace |
更换一个页面继续预览 |
preview_refresh |
改完文件后一键刷新 |
preview_unregister |
解除注册并关闭 |
小窗可拖动、可缩放、可全屏，内容按虚拟桌面宽度等比缩放。关闭小窗时，它会收缩为右上角一枚带绿色呼吸灯的胶囊，点击即恢复。预览按会话隔离，切换会话互不打扰。
安装与启用¶
DSH 的理念是「一切皆插件」，这个插件同样是一条命令即可安装：
dsh plugin --profile web add github:watericetangcw/dsh-page-preview
安装完成后，先重启 dsh web，再刷新一次浏览器页面，插件即可使用。
典型用法¶
下面三个示例来自项目 README，安装后可直接复制提示词发给 DSH。
① 行内预览——生成并展示一个页面：
请编写一个完整的静态 HTML 页面（CSS 与 JS 全部内联），用 `html page-preview` 代码块展示出来，内容是一个实时时钟卡片。
② 浮动小窗——预览在线页面：
请用 preview_register 预览这个网页：https://watericetangcw.github.io/dsh-page-preview/hello-world
③ 浮动小窗——预览本地工程并刷新：
请用 preview_register 预览 docs/demo-site 目录，然后把页面标题改成「dsh-page-preview 演示」，再调用 preview_refresh 让我看到更新。
总结一下浮动小窗的工作流：先用 preview_register 注册页面，改动文件后调用 preview_refresh 查看更新，需要换页面用 preview_replace，结束时 preview_unregister 关闭。
项目还提供了两个在线演示页面，安装后可以用示例 ② 的方式直接预览：
- https://watericetangcw.github.io/dsh-page-preview/hello-world
- https://watericetangcw.github.io/dsh-page-preview/demo-site/
适用场景与注意¶
适合在浏览器里使用 DSH web、经常让模型生成或修改静态页面的开发者；也适合边改本地 HTML 工程边看效果的场景。
使用时注意两点：
1、行内预览要求 CSS 与 JS 全部内联；
2、预览按会话隔离，切换会话互不打扰。
安全方面需要说明：与所有 DSH 插件一样，插件以当前 dsh 进程的权限运行。安装前建议先阅读项目源码并确认许可证（本项目为 MIT），再决定是否启用。
小结¶
dsh-page-preview 把「生成页面 → 复制 → 打开浏览器」压缩成了 DSH 界面内的行内预览与浮动小窗，改完即刷，会话之间互不影响。如果你常在 DSH 里写页面，可以装上试试。
- 仓库：https://github.com/watericetangcw/dsh-page-preview
- 社区目录页：https://www.skillhub.cn/plugins/watericetangcw/dsh-page-preview
其中目录为社区维护的独立站点，与 DeepSeek / 幻方没有官方从属关系。
