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

dsh动画优化

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

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

截图

Claude 配色界面

Claude 配色界面

DSH 原版配色界面

DSH 原版配色界面

思考中的动画

思考中的动画

改了哪些动画

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

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

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

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

外观

暖米色底、墨色文字和黏土色强调色来自颜色 token 层。标题、路径和引用使用衬线字体，来自字体层。Claude 星爆头像和思考指示器由 logo 层控制。三个层互相独立，可以只保留 Claude 字体而用 DSH 原版配色，反过来也可以。

插件默认开启完整 Claude 全套：配色、字体、logo 都是开着的。如果只想要动画优化、不想要外观改动，在设置里关闭 Claude 配色和 Claude 字体即可，展开收起、流式输出、自动跟随这些行为层动画不受影响，界面会回到 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，浏览器强制刷新一次。如果之前手动注册过 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，运行时注入三层样式（行为、颜色 token、字体），并通过 MutationObserver 驱动展开收起状态机。v31 起同时兼容 DSH 0.1.0（QWLzlG/_Xvjua）与 0.1.2（lcKema/_5OnbHa/EvIC1a）两套选择器；v32 起 settings store 改用容错 require（新版 @deepseek-ai/dsh-client-store 优先，老版 dsh-client-runtime/client 兜底）。测试在 test/client.test.js，用 VM 假 DOM 运行，不需要浏览器。

npm test

License

MIT

dsh animation optimization

A client-side plugin for DeepSeek Harness that brings a Claude Code-inspired
look to the web UI and presents thinking blocks and tool output as a live
stream instead of finished blocks.

DSH delivers tool results all at once. This plugin replays them visually:
lines surface in small chunks, the viewport follows the newest content, and
disclosure blocks open when they start running and close only when the next
item actually exists. Everything is injected at runtime. Removing the plugin
returns DSH to its original behavior.

Screenshots

Claude UI

Claude UI

Original DSH UI

Original DSH UI

Thinking animation

Thinking animation

Animation changes

Thinking blocks and pwsh, edit, and write tools keep a four-line viewport
while running. The viewport follows new content with an ease-out glide and a
底部边缘的柔和不透明度渐隐。真实用户向上滚动会暂停
自动跟随。

工具行以两行为一组出现，间隔 140ms，每行通过
0.5s 的不透明度和变换过渡进入。长终端输出以
每行 12ms 的速度继续，上限约为 3.8s，以免延迟下一次披露。最快的
编辑和写入调用在状态已经翻转为完成后才渲染其行；那些迟到的行以相同方式流式输出。

披露在运行时自动打开一次。完成后它们保持打开，直到下一个项目真正挂载到文档流中，然后播放一次性
关闭动画。没有超时回退，因此在其后继存在之前不会有任何东西关闭。运行时的视口钳制会一直保留到关闭
动画结束，这防止了一帧的全高闪烁。

打开和关闭动画只对变换和不透明度进行动画，一次，绝不
循环。

外观

温暖的象牙色调色板、墨色文本和陶土色强调色来自颜色令牌
层。标题、路径和引用使用衬线字体层。Claude
星芒头像和流式指示器来自标志层。这些层
相互独立：Claude 字体可以与原始 DSH 调色板
组合，反之亦然。

完整的 Claude 套装默认启用：颜色、字体和标志全部初始
开启。若只想保留动画优化而舍弃其余样式，请在设置中关闭
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 并强制刷新浏览器。如果你之前通过插入行手动注册了
dsh-theme-photo-editorial 或 dsh-animation-optimization，请先从 ~/.dsh/profiles/web/cordis.patch.yml 中移除它，以免
该插件被挂载两次。

设置

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

结构与测试

lib/index.js 是空操作的 cordis 宿主入口。lib/client.js 是一个单一的
免构建包，它注入三个样式表层（行为、颜色
令牌、字体），并通过
MutationObserver 驱动披露状态机。自 v31 起，它同时支持 DSH 0.1.0（QWLzlG/_Xvjua）
和 0.1.2（lcKema/_5OnbHa/EvIC1a）选择器集；自 v32 起，设置
存储 require 兼容两种运行时（新的 @deepseek-ai/dsh-client-store
首先，旧的 dsh-client-runtime/client 作为回退）。test/client.test.js 中的测试针对 VM 假 DOM 运行。

npm test

许可证

MIT