前言¶

长时间用 DSH Web GUI 做对话和调试时，默认配色偏冷蓝灰，输入栏工具行里若还叠了 prompt-optimizer 一类第三方控件，滑杆、胶囊和帮助按钮往往带发光、高度不一，和 DSH 原生「访问模式」并排时视觉很吵。社区插件 dsh-warm-ui（维护者 yunliya-cuter）针对 Web 客户端做三件事：叠一层暖色 theme token、给输入卡片等加液态玻璃材质（Chromium 系浏览器）、把输入栏里那簇控件压到 24px 高并对齐。下面介绍它是什么、怎么装、装完怎么确认和微调。

这是什么¶

dsh-warm-ui 是一个 DSH（DeepSeek Harness） 客户端插件包，分类上属于社区目录里的「趣味换装」。它不替 DSH 改业务逻辑，只在浏览器侧通过官方扩展点改外观，并附带对 prompt-optimizer 工具行的样式与窄屏交互整形。

DSH 生态理念是「一切皆插件」；SkillHub 等社区目录是独立站点，与 DeepSeek / 幻方无官方从属关系。插件以当前 DSH 进程权限加载，安装前建议自行浏览源码与许可证。

环境要求¶

主包通过 peerDependencies 声明 @deepseek-ai/dsh-client-ui-theme、@deepseek-ai/dsh-client-ui-slots 作为能力来源（暖色 token 写入、侧栏底部插槽），由 DSH 自带，不必单独再装。

核心功能¶

暖色主题¶

DSH 配色有两级变量：--dsw-static-*（色阶）→ --dsw-alias-*（语义别名）。插件用 ctx.theme.overrideTokens 覆盖关键色阶：冷蓝灰中性色改为暖褐灰，品牌蓝强调色改为暖琥珀/赤陶，并调整 Shiki 语法高亮为 Gruvbox 取向的暖色。明暗两套主题同时生效。

液态玻璃¶

输入卡片、菜单等使用玻璃材质（折射、边缘光、表面反射）。实现细节与 Firefox 限制见仓库内 contract/ui-contract.md 第 6 节。Chromium 下控制台可检查：

window.__dshWarmExtra.glass   // => { alive: true, generation: 1 }

输入栏工具行整形¶

样式表只作用于输入栏内的 .dpo-controls（prompt-optimizer 在工具行渲染的那簇控件）：高度 24px、无发光、无胶囊底色；与左侧 DSH 原生「访问模式」之间增加发丝分隔线。

宽屏（≥1241px）时，「档位 / 权限」等收进一颗 24px 的「优化」胶囊，点开向上展开小弹层，内部点击仍转发给插件原刻度按钮；≤1240px 时让位给插件自带窄屏形态。若探测不到刻度按钮，会自动退回原样，避免空壳按钮。

侧栏「外观」换档¶

插件在官方插槽 sidebar.footer.action 注册 「外观 · 当前档」 按钮。面板内六个维度（面亮、暖度、字亮、字色、加粗、标题）各一行小圆钮，点选立即生效并写入 localStorage，刷新与重启仍保留。选择仅存在当前浏览器；拿不到插槽或 React 时面板不挂载，主题本身仍可用。

默认定档（2025-09-13 评审）摘要：

临时试档可在控制台设置键值后刷新，例如 localStorage['dsh-warm-surface']='2'；删掉对应键即回到代码内烧死的默认值。

安装与启用¶

两个包都必须装：主包 require("dsh-warm-shared")，缺共享包会导致 Web 侧模块无法激活，页面可能出现「Failed to load plugins」。

在 web profile 下执行（命令来自仓库 README）：

dsh plugin add --profile web \
  'git+https://github.com/yunliya-cuter/dsh-warm-ui.git' \
  'git+https://github.com/yunliya-cuter/dsh-warm-ui.git#path:preview/shared'

第二条 #path:preview/shared 是 pnpm 子目录语法，指向同仓库内的 dsh-warm-shared。fork 安装时将 yunliya-cuter 换成你的 GitHub 账号即可。

装完后 DSH 会根据各包的 dsh.bundle.patch 自动把 bundle 写进 profile，无需手改配置。浏览器 F5 刷新一次。

验证¶

• 左下角出现 「外观 · 当前档」 一行。
• 整站强调色偏暖琥珀，输入卡片有玻璃质感。
• 可选：控制台执行上文 window.__dshWarmExtra.glass 检查玻璃层是否存活。

卸载¶

dsh plugin remove --profile web dsh-warm-ui dsh-warm-shared

刷新页面即恢复出厂配色。

典型用法与本地开发¶

日常换肤¶

安装并刷新后，用侧栏底部「外观」面板点选各维度即可，无需改代码或重装。

从本地路径开发¶

在本仓库改 lib/client.js 时，可用本地绝对路径安装（README 说明：源码即产物，无构建步骤；改客户端 JS 后刷新浏览器即生效）：

dsh plugin add --profile web \
  "$(pwd)" \
  "$(pwd)/preview/shared"

若修改了包的 dsh.client 清单（例如 external），需重启 DSH 才会重读 package.json 元数据。

自行改默认值或材质¶

编辑 lib/client.js 文件开头的表（带中文注释），例如 WARM_NEUTRAL、WARM_ACCENT、WARMTH_LEVELS、GLASS_MATERIAL、GLASS_WARP，以及 STYLESHEET 里 .dpo-controls 段落。玻璃流动参数 GLASS_WARP 在 Firefox 上不生效。改完刷新页面即可，不必重装插件。

要让所有设备开箱即某档，需改源码里各 *_LEVELS 表对应 currentXxx() 的第二个默认参数，而不是只改本机 localStorage。

适用场景与注意¶

适合谁

• 主要在 Web GUI（web profile）里长时间使用 DSH，希望界面偏暖、输入区更整齐的用户。
• 已安装或计划安装 prompt-optimizer，且希望其工具行与 DSH 原生控件视觉统一的用户。
• 使用 Chromium 系浏览器、希望看到完整液态玻璃效果的用户。

注意事项

1. 仅 web profile 有意义；CLI 或其它 profile 不是目标场景。
2. dsh-warm-shared 不是可选装饰，安装命令必须两条 spec 同时指定。
3. Firefox 无完整玻璃折射层，暖色与整形仍可用。
4. 插件依赖 DSH 0.1.7-rc.2 一带的 client UI 扩展点；大版本升级后需对照 README 中的版本区间。
5. 仓库提供 node tools/check.mjs 等自检脚本，改包结构时可自行运行（见 README）。

结尾¶

dsh-warm-ui 把 DSH Web GUI 的冷色阶换成暖褐灰与暖琥珀强调色，并在 Chromium 上为卡片菜单加上液态玻璃；同时把输入栏里 prompt-optimizer 控件压扁对齐，并提供侧栏「外观」六维换档。安装时记得主包与 preview/shared 下的共享包一并加入 web profile，刷新即可使用。

• 社区目录：https://www.skillhub.cn/plugins/yunliya-cuter/dsh-warm-ui
• GitHub：https://github.com/yunliya-cuter/dsh-warm-ui