DeepSHPlugins
dsh-web-preview-float 專案預覽
GITHUB / COMMUNITY PROJECT

dsh-web-preview-float

UI 增強TypeScriptMIT

Web UI 懸浮預覽與程式碼視窗:Google AI Studio 風格的 iframe 預覽(寬幅比/解析度預設、一鍵放大),VS Code 風格程式碼窗支援直接編輯,儲存需確認並寫入會話日誌。

2 StarsWJNCT55555 更新時間 2026-08-15
訪問 GitHub 倉庫
dsh-web-preview-float 專案預覽

專案介紹

中文

Web UI 懸浮預覽與程式碼視窗:Google AI Studio 風格的 iframe 預覽(寬幅比/解析度預設、一鍵放大),VS Code 風格程式碼窗支援直接編輯,儲存需確認並寫入會話日誌。

English

Google AI Studio-style floating preview for the Web UI: a draggable/resizable iframe preview with aspect-ratio and resolution presets, plus a VS Code-style code window with direct editing, confirmed writes, and session-log recording.

專案資訊與收錄訊號

快照 2026-09-11
作者 / 組織
WJNCT55555
倉庫
WJNCT55555/dsh-web-preview-float
GitHub Stars
2
Forks
0
開發語言
TypeScript
許可證
MIT
最近推送
2026-08-15
Manifest
資料中檢測到宣告

公開倉庫不自動等於可商用;許可證與當前相容性以原專案文件為準。Manifest 和資料評分不構成安裝安全認證。

資料評分

55/ 100
維護活躍
81
文件與實用資訊
78
生態關注度
14
安裝便捷訊號
100
專案宣告訊號
100

關注度尚低(2);標準命令一鍵安裝。

評分來自已有資料快照的五維模型,僅作瀏覽參考,不是實際使用評測或安全檢測結論。

安裝與使用

所有專案資料與許可均以對應 GitHub 倉庫為準。

dsh plugin --profile web add github:WJNCT55555/dsh-web-preview-float

複製命令不會自動執行。請先閱讀倉庫文件,確認環境要求與許可證。

專案截圖

倉庫 README

GitHub 原文

已儲存的倉庫文件快照;文件抓取時間未記錄,可能與上方目錄介紹處於不同版本。安裝前請核對當前倉庫說明。

儲存庫檔案保留原文,指令與授權文字不作自動改寫。

dsh-web-preview-float

DeepSeek Harness(DSH)Web UI 的悬浮预览插件:两个独立、可拖拽、可拉伸、可缩小的悬浮窗,让你在等待模型回复或改代码时实时预览项目,类似 Google AI Studio。

  • 预览窗:<iframe> 直连项目 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_float_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 层

说明

  • 预览窗支持常用宽幅比预设(16:9 / 4:3 / 3:2 / 21:9 与手机竖屏 9:16 / 9:18 / 9:19.5),可选「锁定比例」让手动拉伸保持比例,也可直接输入宽×高自定义;另有常用分辨率预设(1920×1080 / 1366×768 / 390×844 等),一键把窗口放大到指定分辨率(超出屏幕时自动缩放适配)。
  • 代码窗采用接近 VS Code 的布局:编辑器标签页、活动栏(可开关资源管理器)、文件树侧栏、带行号的可编辑编辑器 + 状态栏(Ln/Col、语言、UTF-8)。
  • 代码窗可直接编辑:点「编辑」进入编辑态,改完后点「保存」(或 Ctrl+S)弹出确认框;确认后写入文件,并作为 web-preview/code-edit 会话事件记录到 DSH 日志;「取消」保留草稿,「还原」丢弃修改。
  • 两个悬浮窗标题栏都有放大/还原按钮(⛶ 一键放大到贴合屏幕);最小化成胶囊后也可直接拖动。
  • 二进制/超大文件(>256KB)会提示「文件过大」;写操作限制在 1MB 内。
  • 语法高亮未做(纯文本显示),后续可加 shiki。
  • 悬浮窗位置/大小状态在内存中,刷新后回到默认位置。

License

MIT

使用前核對

安裝步驟、相容版本與授權範圍以原專案當前文件為準。Stars 和評分是快照中的導航訊號。

安裝與排錯 · 專案問題反饋

同類專案