流式动画美化 kelemiao/dsh-animation-optimization

dsh 动画优化

给 DeepSeek Harness 用的客户端插件。它把 Claude Code 风格的外观带进网页界面，同时把思考块和工具输出的展示方式改造成更像实时流的样子。

DSH 后端把工具结果一次性送到页面，这个插件在显示层把它们分段播放出来。文字逐段出现，滚动跟着新内容走，块在开始运行时自动展开，在下一条内容真正出现时才收起。所有效果都在运行时注入，不会修改 DSH 本体。关掉插件，界面就回到 DSH 原来的样子。

v0.3.5（收起可靠性）

- 回合结束也能收：0.2.x 用一个既不是披露根、也不是 markdown 的「已完成，用时 …」摘要替换运行指示器，旧逻辑永远等不到「下一条内容」，于是每个回合的最后一个块会残留展开。现在记录运行指示器消失的瞬间，回合转入空闲时立即收起仍在等待的块。
- 关闭点击真实重试：宿主偶发吞掉合成点击（同行重渲染）。改为对稳定的 [data-disclosure-row] 锚点最多重试 3 次，每次重读实时 DOM；data-expanded 消失即视为收起成功。
- 兜底释放：任何残留 1.2s 以上的 data-dsh-collapsing 标记由 500ms 看门狗强制清除，避免「不可见但占满高度」的空白。

v0.3.3（DSH 0.2.1-rc.3 适配）

- 补齐第三套 CSS module 哈希：0.2.1-rc.3 把思考块换成 VJlF5q、命令卡换成 EqXNNG、工具行换成 hKdVjq、会话壳换成 an3WzG/V4vHZW；插件同时保留 0.1.0（QWLzlG/_Xvjua）、0.1.2（lcKema/_5OnbHa/EvIC1a）与 0.2.0（o3BgMG/wSkVaW）选择器，一套构建覆盖桌面版与网页版。
- 底部运行指示器改用无哈希锚点：0.2.x 删除了 turnStatus 类，运行状态改为 [data-chat-running]（鲸鱼图标 + 蓝色 shimmer）。插件用 [data-chat-running] + [class*='_runningIcon'] 语义后缀接管：鲸鱼换成官方动态 Logo、蓝字恢复中性色，Claude Logo 开关依然生效。
- 流式状态检测兼容两代：0.1.0 依赖 .Sxvs8a_root[data-streaming]，0.1.2+ 改为 AssistantMarkdown 根节点的 [data-streaming]；thinking / typing 动画按真实流式状态切换。
- emoji 过滤排除区补齐新哈希：an3WzG_scrollBody / V4vHZW_scroll 下的对话正文永不被清理；行首 emoji 被清除后残留的空格一并去掉。
- 工具行的流式播放判断从硬编码 o3BgMG 改为 spec.tool 标志，新旧工具行行为一致。

v0.3.1（Claude Desktop App 外观对齐）

- 单个动态 Logo：运行时只出现一个 Claude logo——在「正在运行」状态行（Deep diving…）上；助手消息和每个动作行不再挂 logo。
- 全套官方动画素材（以官方 dotLottie 为唯一正确来源，assets/claude-desktop/lottie/）：
- thinking.lottie → 8 帧 @ 7fps（循环 1.143s），推理/工具运行阶段播放；帧序、时长逐条取自 lottie JSON（播放序 2,1,4,3,5,6,8,7）；
- typing.lottie → 12 帧 @ 14fps（循环 0.857s），文本流式输出阶段自动切换；播放序 3,2,1,4,6,5,7,8,9,11,10,12；
- 帧位图从 lottie 包解出，与官方位图逐字节一致（thinking/、typing/ 目录）。
- 注意：claude-thinking-sprite.svg（15 步 SMIL 长条）与两个官方 lottie 均不匹配，不作为运行实现，仅存仓库作参考。
- 全局 UI emoji 过滤：自动清除整个界面（侧边栏、标签、菜单、设置、标题、placeholder/title 等全部 UI 层）的 emoji；输出显示区不受影响（对话滚动区、工具输出、思考块、代码块、用户输入控件一律不碰）。

截图

Claude 配色界面

Claude 配色界面

DSH 原版配色界面

DSH 原版配色界面

思考中的动画

思考中的动画

改了哪些动画

思考和 pwsh、edit、write 工具在运行时会保持四行高的视口。视口用缓动曲线跟随最新内容，底部有透明度渐隐。用户真正向上滚动时自动跟随会暂停，不会和阅读抢控制权。

工具输出的行按两行一段出现，段与段间隔 140 毫秒，每行用 0.5 秒的透明度和位移过渡进入。长终端输出会以每行 12 毫秒继续，整体封顶在 3.8 秒左右，这样下一块的收起不会被无限拖住。最快的 edit 和 write 调用往往在状态已经变成完成后才渲染出内容，这种情况同样会走分段播放。

思考块和工具块在进入运行状态时自动展开一次。结束后先保持展开，等文档流里的下一条内容真正挂载出来才播放关闭动画。没有超时兜底，不会在下一项还没出现时提前收起，也不会随便等一个固定秒数。运行时的 96px 视口钳制会保留到关闭动画结束，避免整段内容闪现一帧。

打开和关闭动画都只动 transform 和 opacity，一次播放，不循环。

外观

暖米色底、墨色文字和黏土色强调色来自颜色 token 层。标题、路径和引用使用衬线字体，来自字体层。单个动态 Claude logo（官方思考/打字动画）由 logo 层控制。三个层互相独立，可以只保留 Claude 字体而用 DSH 原版配色，反过来也可以。

插件默认开启完整 Claude 全套：配色、字体、logo 都是开着的。如果只想要动画优化、不想要外观改动，在设置里关闭 Claude 配色和 Claude 字体即可，展开收起、流式输出、自动跟随这些行为层动画不受影响，界面会回到 DSH 原版外观。

安装

dsh plugin --profile web add link:C:/IdeaProjects/dsh-animation-optimization
插件声明了 dsh.bundle.patch，dsh plugin 装好后会自动把它加入 dsh.profile.bundles，不需要手动改 cordis.patch.yml。

重启 dsh web，浏览器强制刷新一次。如果之前手动注册过 dsh-theme-photo-editorial 或 dsh-animation-optimization 的 insert 行，先把它从 ~/.dsh/profiles/web/cordis.patch.yml 里删掉，避免同一插件挂载两次。

设置

插件在 DSH 设置里注册了三个开关，通用设置里各有一条紧凑入口，Photo Editorial 主题分区页里有完整三行。

Claude Logo 控制运行状态行里的单个动态标志（思考动画/打字轨道动画）。Claude 配色在编辑风格配色和 DSH 原版 token 之间切换，暗色模式同样适用。Claude 字体在衬线字体和 DSH 默认字体栈之间切换。三个选择都存在浏览器 localStorage 里，点击后立即生效。

结构与测试

宿主侧 lib/index.js 是无逻辑的 cordis 入口。客户端 lib/client.js 是单个 bundle——由 src/client.template.js 经 scripts/build-client.mjs 注入官方动画素材后生成（改动模板后运行 npm run build 再部署）。运行时注入样式层（行为、颜色 token、字体）与 logo 动画，MutationObserver 驱动展开收起状态机，同一个观察器还维护全局 UI emoji 过滤与流式阶段标记。测试在 test/client.test.js，用 VM 假 DOM 运行，不需要浏览器。

npm run build
npm test

License

MIT

dsh animation optimization

一个 DeepSeek Harness 客户端插件，给 web UI 带来 Claude Code 风格的外观，并把思考块和工具输出呈现为实时流，而不是一次性完成的块。

DSH 会一次性交付工具结果。这个插件把它们在视觉上重放一遍：行以小段浮现，视口跟随最新内容，展开块在开始运行时打开，只有下一项确实存在时才关闭。所有内容都在运行时注入。移除插件后，DSH 恢复原本行为。

v0.3.1（对齐 Claude Desktop App）

- 单个动态 logo：一轮对话运行期间，只有一个 Claude logo，位于运行窗口状态行内（「Deep diving…」）。助手消息和逐操作行不再显示 logo。
- 完整官方动画集，严格取自 App 的 dotLottie 包（assets/claude-desktop/lottie/）：推理/工具运行期间用 thinking.lottie（8 帧 @ 7fps，1.143s 循环，播放顺序 2,1,4,3,5,6,8,7）；markdown 文本流式输出期间自动切换为 typing.lottie（12 帧 @ 14fps，0.857s 循环，播放顺序 3,2,1,4,6,5,7,8,9,11,10,12）。帧位图从 lottie 归档中逐字节提取（thinking/、typing/）。claude-thinking-sprite.svg（15 步 SMIL 条带）与两个官方 lottie 包都不匹配，仅作参考保留。
- 全局 UI emoji 过滤：从所有 UI 外壳界面（侧边栏、标签页、菜单、设置、标题、placeholder/title 属性……）中剥离 emoji，而输出显示区从不触碰——对话滚动区、工具正文、思考块、代码块和用户输入控件都排除在外。

截图

Claude UI

Claude UI

原版 DSH UI

Original DSH UI

思考动画

Thinking animation

动画改动

思考块以及 pwsh、edit、write 工具在运行期间保持四行视口。视口以 ease-out 滑动跟随新内容，并带底部边缘柔和淡出。真实用户向上滚动会暂停自动跟随。

工具行按两行一组出现，间隔 140ms，每行通过 0.5s 的 opacity 与 transform 过渡进入。长终端输出按每行 12ms 继续，上限约 3.8s，以免推迟下一次展开。最快的 edit 和 write 调用在状态已经翻到 done 之后才渲染它们的行；这些迟到的行也以同样方式流式呈现。

展开项在运行时自动打开一次。完成后它们保持打开，直到下一个条目真正挂载到文档流中，然后播放一次性关闭动画。没有超时兜底，所以在后继条目出现之前不会有任何东西关闭。运行时的视口钳制会一直保留到关闭动画结束，这能防止某一帧出现全高闪烁。

打开和关闭动画只对 transform 和 opacity 做动画，只播放一次，从不循环。

外观

暖象牙色调、墨色文字和陶土色强调色来自颜色 token 层。标题、路径和引用使用衬线字体层。Claude 星芒头像和流式指示器来自 logo 层。各层相互独立：Claude 字体可以和原始 DSH 调色板组合，反过来也一样。

完整 Claude 套装默认启用：颜色、字体和 logo 全部开启。如果只想保留动画优化、去掉重新配色，在设置里关掉 Claude Colors 和 Claude Font。行为层——展开时机、流式呈现和自动跟随——继续运行，UI 回到原始 DSH 外观。

安装

dsh plugin --profile web add link:C:/path/to/dsh-animation-optimization

包声明了 dsh.bundle.patch，所以 dsh plugin 会自动把它加到 dsh.profile.bundles。不需要手动编辑 cordis.patch.yml。

重启 dsh web 并硬刷新浏览器。如果你之前用 insert 行手动注册过 dsh-theme-photo-editorial 或 dsh-animation-optimization，先从 ~/.dsh/profiles/web/cordis.patch.yml 里删掉，免得插件挂载两次。

设置

DSH Settings 里注册了三个开关：General 下的紧凑行，以及一个完整的设置页。Claude Logo 控制星芒头像和流式指示器。Claude Colors 在编辑风调色板和原始 DSH token 之间切换，深色模式也包括在内。Claude Font 在衬线字体栈和默认 DSH 字体之间切换。所有选择都存在浏览器 localStorage 里，即时生效。

结构与测试

lib/index.js 是空的 cordis 宿主入口。lib/client.js 是单个免构建 bundle，注入三层样式表（行为、颜色 token、字体），并通过 MutationObserver 驱动展开状态机。test/client.test.js 里的测试跑在 VM 假 DOM 上。

npm test

许可证

MIT