前言¶
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。