前言¶
在 DeepSeek Harness（DSH）里长时间做智能体或对话开发时，Web 界面的信息密度、配色和布局会直接影响日常操作节奏。DSH 支持通过插件扩展客户端行为；若你偏好 opencode console 那套偏克制的中性灰界面，又不想换工具链，就需要一套只改「皮囊」、尽量少碰业务逻辑的做法。下面介绍社区插件 dsh-opencode-ui（npm 包名 @local/opencode-ui），由维护者 Cenuon 发布，归类为「趣味换装」，目标是把 DSH 设置页与主界面的视觉对齐到 opencode console，并在输入框下方状态区延续 @local/git-branch 的 git 分支显示。
这是什么¶
dsh-opencode-ui 是一类面向 DSH Web 客户端的主题与结构覆盖插件，简介表述为「opencode console visual language for the DSH Web UI」。它不替换 DSH 的功能模块，而是通过官方主题 API、注入样式和 composer 插槽，在亮/暗两套主题下重写颜色、圆角、布局与部分控件外观。仓库地址：https://github.com/Cenuon/dsh-opencode-ui；社区目录页：https://www.skillhub.cn/plugins/Cenuon/dsh-opencode-ui。许可证为 MIT（见仓库 package.json）。插件在 DSH 进程权限下运行，安装或启用前建议自行阅读源码与许可证。
核心能力：三层改造¶
改造按「从最稳到最细」分三层，卸载或停用时各层有对应的还原路径。
1. 主题 token 层¶
使用 DSH 官方的 ctx.theme.overrideTokens()，以插件 id @local/opencode-ui 注册一组 CSS 变量（如背景、主文字色等），同时提供 light 与 dark 字符串。ThemePresenter 将 token 写到 body 的内联样式，优先级高于普通样式表，无需 !important。返回的 disposer 在插件卸载时会还原基础主题。映射源文件为 src/tokens.json；运行时若某项缺少 light 或 dark，validateOverrides() 会抛 TypeError 导致激活失败。
2. 结构层¶
通过单个 <style> 标签覆盖布局、间距、发丝边框、字重与字距，并去掉部分阴影。选择器使用稳定的 data-*、ARIA 或类名后缀，并加祖先限定，以降低 DSH 升级后选择器漂移的风险。样式拆在 src/settings.css（设置页）与 src/app.css（主界面侧栏、顶栏、消息区、composer、右栏等）。
3. git 分支状态项¶
在 conversation.composer.dock 插槽注册状态项，读取工作区 .git/HEAD，每 3 秒轮询；切换分支无需刷新页面。非 git 工作区时该项自动隐藏。行为继承自前身 @local/git-branch。
设计与已知差距¶
完整设计说明见仓库内 docs/superpowers/specs/2026-11-04-opencode-ui-design.md。README 中列出的要点包括：设置页通过 CSS 铺满屏幕，而不是 DSH 默认的 800×800 模态框，且不伪造 opencode 顶层标签条；不覆盖用户在 DSH 设置里配置的正文字号（opencode 约 13px，DSH 默认 14px 的差值保留）；字体栈优先 Inter，未安装则回落系统栈；顺带修复若干被引用但未定义的悬空 token，并设置 --dsw-corner-shape: round 以抵消 DSH 默认超椭圆圆角。前身插件曾隐藏侧栏品牌行与新会话按钮的两条规则仍保留在 src/module.js 的 OWN_CSS 中，不需要时可删掉对应两行。
安装与启用¶
按仓库 README，安装方式为 DSH 的 bundle 安装命令（勿与 dsh plugin add github:... 类命令混用）：
plugin_manager action=install_bundle target=~/dsh-opencode-ui
安装完成后刷新页面生效。在 Plugins 页停用或移除 opencode-ui 后，token disposer 与样式标签会随 effect 移除，界面应恢复为未装插件前的样子。
典型用法与微调¶
日常使用时无需额外配置：启用插件后自动应用主题与样式，并在 composer 下方看到当前 git 分支（若为 git 仓库）。
若要改配色或圆角，应编辑 src/ 下文件后执行构建，再刷新页面；不要直接改构建产物 client.js。
node build.mjs
常用对照（摘自 README 微调表）：
| 想改什么 | 改哪里 |
|---|---|
| 深色模式次要文字偏暗 | src/tokens.json 的 --dsw-alias-label-tertiary |
| 小圆角过圆 | --dsw-radius-xs（如从 6px 改为 4px） |
| 卡片边框更明显 | --dsw-alias-border-l4 |
| 恢复侧栏品牌行 | 删除 src/module.js 里 OWN_CSS 的最后两行 |
开发校验还可使用：
node build.mjs --check
node tools/widen-class-selectors.mjs
修改涉及类名后缀的 CSS 时，须避免裸写 [class$="_x"]：DSH 用 clsx 将状态类与基础类拼在同一属性上，README 要求使用 :is([class$="_navCell"], [class*="_navCell "]) 等形式；构建脚本对裸后缀选择器有守卫，出现即构建失败。
适用场景与注意¶
适合希望在 DSH Web UI 上获得与 opencode console 接近的视觉体验、又需要保留 DSH 能力与设置的开发者。属于「趣味换装」类插件，不改变模型或工具调用逻辑。
注意事项：
- 插件依赖 DSH 当前 DOM 结构与
data-*/ 类名后缀约定；DSH 大版本升级后若界面错位，可查阅仓库docs/surface-app.md、docs/surface-settings.md等维护资料。 package.json标明 client 注入@deepseek-ai/dsh-client-ui-conversation，immediately: true，启用后即在 Web 端加载。- 社区目录（SkillHub）为独立生态站点，与 DeepSeek / 幻方无官方从属关系；星标与版本以你本地安装的 bundle 与仓库为准（当前公开 README 配套版本在
package.json中为 1.0.0）。
结尾¶
dsh-opencode-ui 用官方 token 覆盖、定向 CSS 与 composer 插槽，把 DSH 设置页和主界面收成 opencode console 的视觉语言，并保留 git 分支状态显示。需要安装说明与源码时，见 SkillHub 目录页 与 GitHub 仓库。
