前言¶
DeepSeek Harness（dsh）的 web profile 通過瀏覽器訪問時，界面通常仍帶着瀏覽器或系統默認的標題欄區域：要麼多佔一條 chrome，要麼標題欄樣式與側邊欄、會話 header 脫節。若把 dsh web 安裝成 PWA，Window Controls Overlay（WCO）可以把系統窗口按鈕疊在網頁頂部，但還要改 manifest、預留控件條帶、指定哪些區域可拖動窗口——這些往往要動前端和路由。
下面介紹社區插件 dsh-pwa-ui（npm 包名 @liuzw/dsh-pwa-ui，維護者 liuzwZYW）：在 已安裝 的 Web 應用裏啓用 WCO，且不額外畫一條假標題欄，讓應用自身的 logo 行與會話 header 承擔窗口標題欄職責。
這是什麼¶
dsh-pwa-ui 是面向 DSH web profile 的插件，基於 Window Controls Overlay API。主機側接管 /manifest.webmanifest 並在返回的 manifest 中把 display_override: ["window-controls-overlay"] 放在首位；瀏覽器側在 overlay 可見時注入樣式與 DOM 標記，複用 shell 已有的 data-window-drag 等鉤子，使拖拽與讓位行爲與桌面版思路一致。
桌面/Electron 窗口自帶的 data-platform="darwin" / data-windows-titlebar chrome 不受此插件影響。
核心功能¶
清單與路由（主機：index.js）¶
插件接管精確路由 /manifest.webmanifest。在 @deepseek-ai/dsh-web-frontend/dist/manifest.webmanifest 可讀時，除在 display_override 中優先加入 window-controls-overlay 外，name、short_name、start_url、scope、display、icons 等字段原樣透傳；讀不到時才用內置副本兜底。display: "fullscreen" 仍作爲回退，不支持 overlay 的平臺行爲不變。
瀏覽器側樣式（客戶端：client.js）¶
當 WCO 可見時，在 <html> 上設置 data-dsh-wco 並注入樣式表；卸載時回收。普通瀏覽器標籤頁裏 navigator.windowControlsOverlay.visible 爲假且 env(titlebar-area-height) 爲 0px 時，不畫 overlay、不預留空間，佈局與未裝插件時相同。
標題欄即應用界面¶
插件不另造 chrome，而是：
- 將
html[data-dsh-wco] [data-window-drag]設爲app-region: drag，側邊欄品牌行與會話 header 可拖動窗口。 - 通過既有
no-drag名單（如button、a、[role=tab]）及data-window-drag-recall保持控件可點。 - 用 CSS 變量
--dsh-wco-controls-start/--dsh-wco-controls-end量測系統窗口按鈕佔用的條帶（Windows 在右、macOS 在左），讓應用控件讓開；併發布--dsh-frame-leading-clearance、--dsh-frame-overlay-top等，供 frame 標題行與浮層避讓。
包內爲零依賴原生 ES 模塊，無構建步驟；peerDependencies 要求 @deepseek-ai/dsh 版本 >=0.2.0-rc.2 <0.3.0-0，Node >=22。當前 npm 版本爲 1.0.2，許可證 MIT。
安裝與啓用¶
在已配置 DSH web profile 的環境中執行：
dsh plugin --profile web add @liuzw/dsh-pwa-ui
安裝後需重啓 dsh web（清單路由在啓動時接管）。在 Edge 或 Chrome 中打開界面，通過地址欄 安裝 將應用安裝到本地；從已安裝應用窗口打開後，logo 行與會話 header 即作爲標題欄區域。
插件以當前 dsh 進程權限運行，安裝前建議閱讀 GitHub 倉庫 源碼並確認 MIT 許可是否符合你的合規要求。
典型用法與預覽¶
正式效果：完成上述安裝與 PWA 安裝後，在 Windows/macOS 上支持 WCO 的 Edge 或 Chrome 中，從已安裝應用入口啓動即可。
不安裝 PWA 先看佈局：Microsoft Edge DevTools → 應用程序 → 窗口控件疊加（Window Controls Overlay）可模擬 overlay。即使頁面上仍看不到 navigator.windowControlsOverlay API，插件也會把 DevTools 模擬出的 env() 幾何當作已啓用 overlay 處理，便於調試樣式。
適用場景與注意¶
適合誰：長期在 web profile 下把 dsh web 當桌面應用用、且使用 Edge/Chrome 安裝 PWA 的開發者；希望在標題欄區域與 DSH 自身 UI（品牌行、會話 header）統一，而不是系統默認標題條。
環境要求：
- 僅 DSH web profile；非已安裝 PWA 的標籤頁不會啓用 overlay 相關佈局。
- 支持 Window Controls Overlay 的瀏覽器，且必須是安裝後的應用窗口。
已知耦合與限制（來自上游 README）：
- 標題欄 chrome 背景在刷新時可能短暫與頁面不一致；插件已寫入
::window-controls-overlay { background: transparent }規則，待提案在瀏覽器落地後生效；此前主要受 manifest 的theme_color影響。 - 實現依賴
@deepseek-ai/dsh-web-frontend的data-window-drag、右側欄屬性名及部分 CSS-module 尺寸；前端大改時插件可能需要同步更新。 - macOS 讓位邏輯已實現，維護者註明尚未在真實 macOS 窗口上驗證。
DeepSeek Harness 生態強調「一切皆插件」；SkillHub 目錄頁 爲社區收錄，與 DeepSeek / 幻方無官方從屬關係。
鏈接¶
- 目錄頁：https://www.skillhub.cn/plugins/liuzwZYW/dsh-pwa-ui
- 源碼與說明：https://github.com/liuzwZYW/dsh-pwa-ui
若你的日常入口是已安裝的 dsh web PWA，dsh-pwa-ui 用一條官方安裝命令加上 manifest 與客戶端補丁，把窗口標題欄收進應用自身界面，並複用 shell 已有拖拽標記，避免爲 WCO 單獨再造一層 chrome。
