前言¶
在 dsh Web 界面的使用中，展开“Think”组件或长文本折叠项后，阅读体验常受干扰：滚动视口下移导致折叠按钮移出屏幕，用户再次折叠时必须先手动回滚滚动条，打断阅读位置。dsh-ui-easyfold 针对这一交互痛点提供浏览器端解决方案。
这是什么¶
这是一个运行在客户端的 DSH 插件，由 MrTrujay 维护，采用 MIT 许可证。它通过两个浏览器行为，优化长展开内容的阅读与折叠体验。
核心功能¶
插件主要包含以下两项能力：
-
Sticky fold row（固定折叠行）
当折叠内容展开时，折叠行会固定在对话滚动视口的顶部。阅读过程中该行始终可见且可点击。当整个内容滚动出视口后，固定行为自动解除，不改变布局。 -
Collapse scroll compensation（折叠滚动补偿）
折叠一个已固定的组件（通过点击、回车或空格触发），会将滚动视口拉回折叠行原先占据的位置。如果折叠行已在视口内，位置保持不变。
安装与启用¶
该插件需要部署了 Web 界面的 dsh 环境。安装命令如下：
pnpm dsh plugin --profile web add @trujaycc/dsh-ui-easyfold
安装后，重启 pnpm dsh web 以加载新的组件行。
开发与构建¶
插件依赖 React 18.2.0+。本地开发与构建步骤如下：
pnpm install
pnpm run build
构建产物包含 lib/index.js 和 lib/client.js，由 ModuleLoader 处理。该包声明了 React 作为平台依赖，无其他运行时依赖。
适用场景与注意¶
- 当前支持范围：目前仅针对“Think”折叠行实现；其他长内容折叠组件为计划状态。
- DOM 合约耦合：插件通过稳定的 DOM 属性（
data-conversation-scroll,data-variant="think",data-open,data-disclosure-row）进行挂载。如果产品 DOM 结构变更，插件行为可能静默失效。 - 滚动视口限制：滚动补偿仅作用于文档中的第一个
data-conversation-scroll。分屏会话窗口（subagent views）共享同一行为所有者。 - React 提交耐心：插件等待 React 提交最多 8 个动画帧。超出该窗口的延迟提交将跳过修正，不会造成滚动错位，仅无反馈。
结语¶
该插件通过客户端脚本解决了长内容展开后的交互断层问题，适合需要在 Web 界面优化阅读体验的开发者。更多细节请参考 GitHub 或 DSH 插件目录。
