前言¶

在 DSH 裏和 AI 一起改代碼時，常見流程是：Agent 跑完命令、你切到瀏覽器或模擬器看效果，再截圖或口述問題回到對話。窗口來回切，dev server 端口和日誌也要自己盯。DeepSeek Harness 支持用插件擴展左側欄和 Agent 能力；dsh-live-preview 由社區維護者 llr-sketch 發佈，分類爲客戶端插件，目標是把「啓動 → 看畫面 → 看日誌 → 改代碼」收進同一個 DSH 窗口。

這是什麼¶

dsh-live-preview 是 DSH 左側欄插件：在 DSH 窗口內實時運行並查看正在開發的應用，邊寫邊看、邊給建議。插件包約 0.7MB（README 亦提到約 0.2MB 量級），MIT 許可證，當前 npm 包版本爲 0.2.4。它不捆綁 adb、ffmpeg、JRE、Android SDK；這些在使用者首次通過面板按鈕安裝時下載到 %LOCALAPPDATA%\dsh-live-preview。

核心功能¶

下面介紹三類預覽目標及配套能力，均來自倉庫 README。

網頁¶

面板裏用 iframe 加載本地 dev server URL；日誌裏可自動探測地址。適用於 Vite、Next、純 HTML、PWA 等，桌面與移動 H5 共用。

Windows 桌面窗口¶

選擇任意可見窗口，通過 PrintWindow/BitBlt 實時捕獲爲 JPEG 幀串流。適用於 Electron、WinUI、WPF、Qt、遊戲等；x64 與 arm64 程序均可捕獲（捕獲與架構無關）。

安卓（真機或模擬器）¶

H.264 高清鏡像，約 30–60fps，支持點擊、滑動、按鍵與文字輸入。適用於 Capacitor、Cordova、RN、Flutter、原生安卓應用。

一鍵安裝安卓模擬器：面板按鈕自動完成 Java 運行時、Android SDK、emulator、系統鏡像、AVD 創建與硬件加速檢測；國內網絡可走鏡像（華爲 OpenJDK、npmmirror ffmpeg、Google SDK CDN）。

面板同時顯示命令進程的實時日誌與錯誤。有畫面在跑時，插件會在右側邊欄自動打開「實時預覽」，左側繼續對話、右邊看應用。插件還會給會話注入指令：做、改、交付應用時 Agent 應主動調用 live_preview，無需用戶每次提醒。

導入應用文件：主面板與右側預覽均提供入口，自動識別 .apk、.exe、.html/.zip 等並選擇對應運行方式；同一應用多版本可保留、歷史應用按對話分組管理。

窗口不擋 DSH：通過 DSH 啓動的安卓模擬器窗口會最小化；導入的 Windows 應用窗口會移到屏幕外（避免 PrintWindow 最小化黑屏），需要時在「桌面窗口」頁點「取回窗口」。

安裝與啓用¶

要求：DSH（桌面版或 Web 均可）；完整能力以 Windows 10/11 x64 爲主（安卓模擬器還需 CPU 虛擬化 AEHD/WHPX）。安裝前請自行查看倉庫源碼與 MIT 許可證；插件以當前 DSH 進程權限運行，涉及 plugin_manager install_bundle 時需 danger-full-access 或人工批准。

方式 A：本地目錄或壓縮包（README 推薦私下分享）¶

1. 將含 package.json、index.js、client.js、host/、cordis.patch.yml 等的插件目錄解壓到任意位置，例如 D:\dsh-live-preview。
2. 在 DSH 中讓 Agent 執行：

plugin_manager install_bundle target = "D:\\dsh-live-preview"

3. 刷新 DSH 頁面，左側欄出現「實時預覽」。

方式 B：npm 包¶

發佈方自行 npm publish --access public 後，對方可安裝：

plugin_manager install_bundle target = "dsh-live-preview@0.2.4"

scoped 包則使用 @yourname/dsh-live-preview@0.2.4 等形式。

方式 C：GitHub Releases（README 稱普通用戶最推薦）¶

在倉庫 Releases 下載 dsh-live-preview-<版本>.zip，解壓後按方式 A 執行 plugin_manager install_bundle。

方式 D：Git 倉庫或 tarball¶

plugin_manager install_bundle target = "<git 地址或 tarball 的絕對路徑>"

僅預覽網頁或 Windows 程序時，不必安裝安卓相關組件；安卓模擬器首次安裝約 2GB 下載，磁盤總計約 5–6GB。

典型用法¶

新手面板流程¶

1. 安裝 DSH 並能正常與 AI 對話。
2. 按上一節安裝本插件並刷新頁面。
3. 左側欄點「實時預覽」→「導入應用文件」或「啓動模擬器」。
4. 在對話中對 AI 說明需求，例如：

幫我做一個 20 秒倒計時網頁，做好後用 live_preview 跑起來給我看。

AI 會啓動開發服務器或導入程序，右側「實時預覽」打開，畫面與日誌在對話旁顯示。需要改 UI 時，可直接指着畫面描述修改，改完刷新即可看到。

面板 Tab 概要¶

• 網頁：填 URL 或依賴首次 run 從日誌探測，點「載入」；下方可填啓動命令。
• 桌面窗口：「刷新窗口」→ 選中目標 → 開始串流。
• 安卓：首次點「安裝安卓模擬器（約 2GB）」；裝好後「啓動模擬器」，可「專注預覽」、拖動分隔條調高度；真機則 USB 調試後「刷新設備」。

Agent 工具示例¶

寫應用時模型可調用 live_preview，例如：

{ "action": "run", "command": "npm run dev", "cwd": "<你的項目目錄>", "kind": "web" }
{ "action": "run", "command": "myapp.exe", "cwd": "<你的項目目錄>\\build", "kind": "app" }
{ "action": "android_emulator_install" }
{ "action": "android_emulator_start", "avd": "dsh_live_preview" }
{ "action": "import_app", "path": "C:\\path\\to\\app.apk" }

動作全集見倉庫 README（含 status、stop、android_tap、android_swipe 等）。

適用場景與注意¶

README 歸納的適用對象包括：零基礎學 AI 編程、前端/桌面/安卓初學者、教學演示、希望 Agent 自行運行並驗證結果的用戶。

需注意：

• Node 僅在你自己的網頁項目需要時才必要；Java、Android SDK、模擬器、ffmpeg 由面板按鈕按需下載。
• 模擬器每次冷啓動後會卸載上次安裝的第三方應用，回到乾淨應用列表；系統設置保留。要保留應用可設環境變量 DSH_LIVE_PREVIEW_KEEP_APPS=1 再啓動 DSH。
• 無硬件加速時可安裝 AEHD；無 ffmpeg 時安卓預覽降級爲截圖輪詢（約 2–5fps）。
• 社區插件目錄 SkillHub 與 DeepSeek、幻方無官方從屬關係；星標與版本以倉庫爲準。

結尾¶

dsh-live-preview 把網頁 iframe、Windows 窗口捕獲和安卓高清鏡像放進 DSH，並用日誌、版本管理與 live_preview 工具串起「寫—跑—看—改」閉環。安裝與細節以 GitHub README 爲準。

• 目錄頁：https://www.skillhub.cn/plugins/llr-sketch/dsh-live-preview
• 倉庫：https://github.com/llr-sketch/dsh-live-preview