前言¶
在 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 插件目錄。
