dsh-ui-polish:在 dsh 原生设计语言上做界面打磨

前言

DeepSeek Harness(dsh)的 Web 界面自带 --dsw-* / --ds-* 设计令牌与 Slot 插件体系。日常长时间对着会话流、设置页和第三方插件面板时,常见痛点是滚动到边缘时内容「硬切」、小按钮不好点、生成状态缺少层次反馈,以及动效时长与缓动和整体观感略不一致。换一套第三方客户端皮肤往往意味着改布局、引入外来品牌色,和 dsh 的信息架构也对不上。

下面介绍社区插件 dsh-ui-polish(维护者 deepseaandhighsky-arch)。它在 dsh 原生设计语言之上做视觉与交互优化,不改框架布局、不引入新品牌色、也不复刻其它客户端外观;偏好存在浏览器本地,分组可关。在 SkillHub 目录中归类为「趣味换装」,仓库地址:deepseaandhighsky-arch/dsh-ui-polish。

这是什么

dsh-ui-polish 是面向 dsh Web 客户端的 UI 打磨插件:动效、阴影层次、28px 七档滚动渐隐、会话状态光晕、排版光学、四档弹簧曲线,以及可选的合成音效和对第三方插件界面的过渡适配——上述能力均建立在官方令牌覆盖、Slot 与运行时引擎之上,不改变 UI 分布与导航结构。

插件以 MIT 许可证发布;package.json 中版本为 0.4.1,要求 dsh >=0.2.0 <0.3.0、Node >=20。README 注明在 dsh 0.2.1-rc.5 上与 dsh-context 0.78.0、dsh-better-sidebar 0.28.2 做过共存验证。dsh 处于 developer preview,大版本升级后需自行重新验证。

核心功能

设置入口在 设置 → 界面打磨:与「通用设置」并列的独立分区,由官方 settings.section 注册。分区内有 总开关 + 八组独立开关,底部另有 弹簧档位(与分组开关独立)。偏好写入 localStorage,键名为 dsh-ui-polish.v1,改完即时生效,无需刷新页面。

八组能力与实现通道如下(摘自仓库 README 功能表):

分组 优化内容 要点
更顺滑的过渡动效 基础过渡 0.12/0.24/0.36s,缓动为 CDS 式 easeSwift;新消息弹簧消融入场(仅最后 12 个流节点) ctx.theme.overrideTokens + 自有 CSS 关键帧
更柔和的阴影层次 近距遮蔽 + 远距扩散双层阴影;深色表面内侧顶光;发丝描边 令牌覆盖
滚动边缘渐隐 对话流边界 28px、7 档非线性羽化(15/30/45/60/75/87/100%) mask-image 贴 scrollport
会话状态光晕 生成中输入框下呼吸光晕与扫光;推理分隔点光环;出错为静态错误色 conversation.composer.dock Slot
插件界面适配 自动发现插件滚动面板;只读插件样式表生成 1.2× 时长的影子表 运行时引擎
排版光学微调 text-wrap: balance/pretty、tabular-nums、暗色字重补偿等 纯 CSS,作用 dsh 稳定 data-* 标记
输入区命中区 composer 小控件隐形扩大命中区,视觉尺寸不变 ::after 作用于 [data-composer-seat]
轻量交互音效 发送/完成/出错三声 Web Audio 合成音;默认关闭,首次手势解锁 AudioContext 无外部音频文件

弹簧档位(设置页底部):轻快 0.22s、从容 0.35s(默认)、弹性 0.58s、咬合 0.32s;作用于消息入场、设置开关与光晕入场,不覆盖宿主按钮过渡。

技术注入分三通道:令牌层(ctx.theme.overrideTokens)、Slot 层(composer dock 与设置分区)、运行时层(滚动渐隐与第三方过渡影子表)。插件遵守 prefers-reduced-motion;卸载或热重载时样式表、令牌、Slot 与监听随插件 fiber 回收。安全说明:无网络请求与遥测,不修改其它插件 CSSOM,总开关可逆地移除渐隐、影子表、令牌与音效。

安装与启用

安装前请确认 dsh 版本在 >=0.2.0 <0.3.0 范围内。插件在 dsh 进程内以当前用户权限运行,安装前应自行查看仓库源码与 MIT 许可证;社区目录 SkillHub 插件页 与 GitHub 无 DeepSeek / 幻方官方从属关系,属于社区生态。

从 GitHub 发布包安装(推荐)

在 插件 → 安装第三方插件 中输入发布 tag(约 33 KB 预构建包,无需 allowBuilds):

https://github.com/deepseaandhighsky-arch/dsh-ui-polish#v0.4.1-dist

或简写:

github:deepseaandhighsky-arch/dsh-ui-polish#v0.4.1-dist

CLI 等价命令:

dsh plugin --profile web add github:deepseaandhighsky-arch/dsh-ui-polish#v0.4.1-dist

安装后按提示重启 dsh web。README 提醒:若直接用 github:.../dsh-ui-polish 不带 #v0.4.1-dist,会拉取整仓 main 源码(体积更大),网络慢时容易卡住。

隔离试装(可选)

用 DSH_HOME 与生产环境隔离状态:

DSH_HOME=/tmp/dsh-test dsh web --port 3311 --no-open

典型用法

  1. 完成安装并重启 Web 后,打开 设置,进入与「通用设置」并列的 界面打磨 分区。
  2. 先用 总开关 打开插件,再按需要逐项开启八组能力;若不需要音效,保持「轻量交互音效」关闭即可(默认即为关闭)。
  3. 在分区底部选择 弹簧档位(默认「从容」),观察消息入场与光晕节奏是否符合习惯。
  4. 若同时使用 dsh-context 等带滚动面板的插件,可开启 插件界面适配,让渐隐与过渡节奏延伸到第三方面板;关闭该组会移除整表影子样式。
  5. 任意元素可用 data-polish-fade="off" 单点退出滚动渐隐;编辑器、终端等区域默认不参与渐隐。

经过上面的步骤,无需改 dsh 布局或换肤,即可在原生令牌体系内微调观感。若某组效果不符合预期,单独关闭该组或总开关即可恢复。

适用场景与注意

适合谁:长期在 dsh Web 上调试智能体、希望滚动边缘更柔和、composer 更好点、生成状态有轻量反馈,且愿意保留 dsh 原生布局与品牌视觉的开发者。

注意:

  • 只改视觉与交互细节,不改变面板位置、导航与信息架构;不是「换皮成别的客户端」。
  • 部分思路借鉴 open-claude-ui 的交互物理学与排版光学,实现已全部重写为 dsh 风格;对照矩阵见仓库 docs/research/CDS-ASSET-MAP.md。
  • dsh 预览版升级后需重新验证;与本插件声明兼容的 dsh 小版本以外环境,行为未在 README 中保证。
  • 从源码本地安装需自行 npm install 与 npm run build,再用 file: 或 link: 绝对路径安装;任务说明要求本文不展开 git clone 流程,完整步骤见 GitHub README。

结尾

dsh-ui-polish 把动效、阴影、滚动渐隐、状态光晕、排版与可选音效收拢到「界面打磨」一个设置分区,在 dsh 原生设计语言上叠一层可开关的抛光,而不动布局与品牌色。

  • 目录页:https://www.skillhub.cn/plugins/deepseaandhighsky-arch/dsh-ui-polish
  • GitHub:https://github.com/deepseaandhighsky-arch/dsh-ui-polish
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜