deepseek-harness 侧栏收起动画修复：四个上方控件共用同一进入动画的实现解析-北京尧图网络

deepseek-harness 侧栏收起动画修复四个上方控件共用同一进入动画的实现解析【免费下载链接】deepseek-harnessDeepSeek Harness: Everything is a Plugin.项目地址: https://gitcode.com/gh_mirrors/de/deepseek-harness导读在 deepseek-harness 的客户端界面中侧栏Sidebar从展开态收起到 56px 窄轨道时需要播放一段「滑入淡入」的进入动画。本指南以仓库中已归档的 Agent Note收起侧栏的上方控件共用同一进入动画为线索结合dsh-client-ui-sidebar与dsh-client-ui-workspace两个包的源码与测试完整讲解这次修复的问题背景、150ms 共用动画的设计参数、跨包控件的动画归属划分、设置控件的例外处理以及样式测试如何锁定这套动画契约。读完本文你将掌握在「外壳持有动画、区域子控件继承同一路径」的架构约束下如何设计一套视觉一致且可测试的侧栏轨道进入动画。问题背景透明度一致几何却不一致在修复前收起侧栏轨道rail的上方四个控件由两个不同的包渲染控件归属包对齐方式侧栏切换Toggledsh-client-ui-sidebar外壳右对齐新建会话New Sessiondsh-client-ui-sidebar外壳左对齐添加工作区Adddsh-client-ui-workspaceWorkspace 区域右对齐搜索Searchdsh-client-ui-workspaceWorkspace 区域左对齐它们各自使用了相同的透明度淡入时序但几何行为并不一致右对齐的控件会随栏变窄而移动左对齐的控件则保持不动。结果就是——即使添加与搜索使用相同的淡入曲线添加在视觉上仍比搜索「慢半拍」因为它的起点在轨道之外更远的位置。四个控件的透明度时间线相同、位移路径却各自为政这种不一致正是本次修复要消除的对象。值得注意的是底部设置Settings控件的角色差异它固定在轨道页脚承担的是独立的「页脚操作」职责不属于上方控件序列因此不能参与上方控件的横向进入动画。决策一个左对齐起点一段共用动画修复的核心决策可以概括为三点统一的起点轨道落位时四个 36px 上方控件从同一个左对齐布局开始.collapsed .logoRow的justify-content: flex-start、.collapsed .newSession的align-self: flex-start提供了统一的基础锚点。一段共用动画四者共用一段150ms动画从translateX(49px)移动到最终的 10px 内边距透明度使用同一条动画时间线。动画归属只在外壳外壳shell把位移分别应用于自己的侧栏切换、新建会话并且只对 Workspace 区域应用一次translate整个regionArea因此添加与搜索会继承同一条位移路径不会产生嵌套变换nested transform。设计参数速查参数取值说明动画时长150ms与展开态内容 150ms 淡出COLLAPSE_SETTLE_MS衔接起始位移translateX(49px)从原轨道右边缘起滑结束位置10px 内边距.root.collapsed的padding: 18px 10px 6px控件尺寸36px × 36px居中于 56px 轨道缓动var(--ds-ease-in-out)与外壳其他动画共用同一缓动变量填充模式backwards动画开始前先应用from帧避免延迟闪烁源码实现剖析外壳只在「实时收起」时挂载动画类SidebarRoot.tsx中外壳通过三个状态变量协同控制收起流程SidebarRoot.tsxsettled展开态内容在 150ms 淡出结束后卸载COLLAPSE_SETTLE_MS 150与宽内容淡出时长严格匹配wide!collapsed || !settled即收起过程中宽内容仍保持挂载并原位淡出栏宽冻结为展开宽度由滑动中的轨道列裁剪它中途不触发任何回流everWide记录本次挂载是否经历过展开态。这是「冷启动不播放动画」的关键——!wide everWide.current css.railIn意味着只有从展开实时收起到轨道live collapse时才挂上railIn类页面初次加载即处于收起态时轨道直接以最终几何静态渲染没有延迟隐藏的图标。外层根节点还有fading收起第一阶段的整体淡出与quietBars指针不在列内时隐藏滚动条两个类分别对应文档描述的「收起滑入交叉淡入」模型与滚动条指针提示行为。样式一条 keyframe三个选择器一个例外动画契约全部收敛在 SidebarRoot.module.css.railIn .iconButton, .railIn .newSession, .railIn .regionArea { animation: rail-in 150ms var(--ds-ease-in-out) backwards; } .railIn .footArea { animation: rail-fade-in 150ms var(--ds-ease-in-out) backwards; } keyframes rail-in { from { opacity: 0; transform: translateX(49px); } } keyframes rail-fade-in { from { opacity: 0; } }这段代码精确落实了文档决策rail-in同时作用于三个选择器.iconButton侧栏切换、.newSession新建会话、.regionArea整个 Workspace 浏览区域内含添加与搜索两个 36px 控件。外壳只对regionArea应用一次变换子控件继承同一路径避免了「区域变换子控件变换」叠加成嵌套 transform 的隐患footArea单独使用rail-fade-in设置控件使用与上方控件完全相同的时长150ms与缓动--ds-ease-in-out但只改变透明度保持横向坐标固定——这正是「设置在最终横坐标上淡入」的实现上方控件还通过.collapsed .logoRow { justify-content: flex-start; }与.collapsed .newSession { align-self: flex-start; width: 36px; }SidebarRoot.module.css保证四个控件共享同一左对齐基础锚点使translateX(49px)对所有控件产生一致的视觉起点。动态效果偏好与冷启动CSS 文件末尾的media (prefers-reduced-motion: reduce)块SidebarRoot.module.css同时禁用了.wide、.fading *以及两段 rail 关键帧的动画与过渡完整覆盖「减少动态效果模式会禁用两段关键帧」的决策要求。而「静态收起渲染不播放启动动画」则由前文所述的everWide逻辑在 React 层兜底。跨包协作区域为何只移动一次Workspace 区域的渲染方是dsh-client-ui-workspace的WorkspaceBrowser它在 rail 态渲染搜索与添加工件图标IconSearchOutline16、IconProjectAddOutline16且明确注明这两个图标「作为 36px 控件走外壳的共用轨道进入路径各自通过 owner share 请求展开」WorkspaceBrowser.tsx。外壳与区域之间的边界由 slot 契约约束contract/slots.ts外壳声明sidebar.workspaces槽位并把wide布尔值是否渲染完整浏览器与expandSidebarrail 图标点击时请求展开通过SidebarSectionOwnerProps传给区域contract/slots.ts。这一设计使得动画的时序、位移、缓动完全由外壳单点持有区域只需提供自身内容不感知任何动画参数——这正是「把动画拥有权留在侧栏外壳」的架构意图。备选方案与取舍文档记录了三条被评估后否决的替代路径理解它们有助于把握最终方案的边界把每个轨道控件固定在最终内边距。方案最简单能彻底消除不一致但代价是移除四个上方控件本应具备的横向进入效果——属于「为了修复而砍掉体验」。分别为每个 Workspace 按钮添加、搜索添加动画。这会把外壳的时序复制进ui-workspace包造成时序散落两处、难以维护更危险的是可能同时应用区域变换与子控件变换产生嵌套 transform。对已注册的regionArea只移动一次则动画拥有权仍由外壳持有。让设置控件随上方控件一起移动。被否决的原因是设置属于「底部固定的页脚操作」语义上不属于上方控件序列强行纳入反而破坏其固定页脚的视觉定位。测试保障用样式测试锁死动画契约这套动画契约不是口头约定而是由 sidebar-styles.client.spec.ts 逐条锁定的。测试直接读取SidebarRoot.module.css源码文本解析出精确选择器的声明后进行断言重点包括共用动画分配.railIn .iconButton、.railIn .newSession、.railIn .regionArea三者的animation必须完全等于rail-in 150ms var(--ds-ease-in-out) backwardssidebar-styles.client.spec.ts位移距离keyframes rail-in的from帧必须包含opacity: 0; transform: translateX(49px)sidebar-styles.client.spec.ts设置例外.railIn .footArea的动画必须是独立的rail-fade-in 150ms var(--ds-ease-in-out) backwards且rail-fade-in的from帧只含opacity: 0sidebar-styles.client.spec.ts基础锚点.collapsed .logoRow的justify-content: flex-start、.collapsed .newSession的align-self: flex-start与width: 36pxsidebar-styles.client.spec.ts。只要有人修改 CSS 中的动画时长、位移距离或选择器归属这些断言就会立刻失败从机制上防止「透明度时序相同、几何行为不同」的问题再次回归。影响与总结本次修复的最终效果正如文档 Consequences 一节所述侧栏切换、新建会话、添加与搜索在整个收起过程中使用相同的横坐标视觉运动完全一致设置在最终横坐标上原地淡入保持页脚操作的固定语义静态收起渲染冷启动保持最终几何不播放启动动画样式测试固定了共用动画分配、位移距离、基础锚点与设置例外四项契约。从工程视角看这是一次典型的「跨包动画一致性」修复动画的时序参数集中在dsh-client-ui-sidebar外壳的 SidebarRoot.module.css 中单点持有Workspace 区域通过 slot 契约以整体regionArea身份继承同一位移路径设置控件以独立淡入关键帧保留例外语义冷启动与prefers-reduced-motion两条边界路径各有明确的处理机制最终由样式测试锁死全部关键参数。这一模式同样适用于其他需要「多个包渲染的控件共享同一进入动画」的 UI 场景。【免费下载链接】deepseek-harnessDeepSeek Harness: Everything is a Plugin.项目地址: https://gitcode.com/gh_mirrors/de/deepseek-harness创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

deepseek-harness 侧栏收起动画修复：四个上方控件共用同一进入动画的实现解析

相关推荐

深入解析 Zephyr 对 Intel Raptor Lake CRB（RPL-S / RPL-P）平台的支持：架构特性、板级配置与 UEFI 启动实战

Apache Doris 做底座，ChatBI 跑查询：Key 用 TaoToken

编译原理文法习题精讲：句型、二义性与Chomsky分类易错点解析

更多资讯

斐讯N1 Armbian 内核怎么选？写入速度翻20倍的性能优化完整指南

PyPTO 张量运算与转置实战指南：pypto.matmul 维度约束、广播、reshape 与 `.T` 陷阱全解析

Web Starter Kit 完全解析：Google 官方多端网站脚手架的 10 大核心功能

Excel函数公式大全实战：分类应用与常见坑

DeepSeek多层次注意力机制破解教学效果评估难题的完整技术方案

cwc-workshops harness目录深挖：probes、replay与verify.py的实现原理

今日更新

AReaL 调试指南：从 Agent Workflow 验证到分布式训练死锁诊断

MATLAB实现GPS L1 C/A信号仿真与二维捕获验证

彻底搞懂ASCII、Unicode与UTF-8：从乱码根源到编码实战

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？