前言¶
DSH 的插件生態允許在瀏覽器端擴展 Harness 的界面行爲。菜單、列表框、對話框、標籤面板和狀態切換已經可用,但過渡動畫如果由每個主題或應用各自實現,容易和宿主動畫、主題變量、無障礙設置發生衝突。
dsh-motion 面向這個問題:它爲具有穩定語義標記的組件增加短促、剋制的進入、退場與狀態切換動效,同時優先保留 Harness 或主題自帶行爲。
這是什麼¶
@dsh-external/dsh-motion 由 bilbillm 維護,採用 MIT 許可證。它是面向 DeepSeek Harness 的輕量、零配置瀏覽器插件,覆蓋菜單、列表框、對話框、標籤面板、對話頁面內容層、Tab、Switch 和工作區分組展開狀態等界面。
核心能力¶
插件行爲以保守爲原則,下面列出已覈實的邊界:
- 優先保留 Harness 或主題自帶動畫;無法可靠判斷的界面會被跳過。
- 瞬態界面只動畫
opacity、獨立的translate/scale和顏色屬性。 - 菜單、列表框、對話框和遮罩使用成對退場效果。
- 退場副本會被設置爲
aria-hidden、inert、不可點擊,並在動畫結束後移除。 - 模型和推理等級卡片換頁採用帶方向提示的 through-fade。
- 命令列表篩選不會因選項更新反覆觸發動效。
- 對話框掛載時由外層面板統一負責入場,內部 slot 不重複動畫。
- 帶
backdrop-filter的玻璃面板只在短動畫期間暫停背景採樣,結束後恢復主題原聲明。 - 即時監聽
prefers-reduced-motion;啓用減少動態效果後,關閉位移和淡入。 - 不增加設置頁面、強度滑桿、輪詢或常駐動畫幀循環。
安裝與啓用¶
package.json 聲明 node >=20 和 packageManager pnpm@11.7.0。構建源碼後,通過 Harness 的標準插件流程安裝到隔離 profile:
pnpm install
pnpm run build
dsh plugin --profile web add C:\path\to\dsh-motion
安裝後重啓或重新加載對應 profile。
典型用法¶
應用或主題可以顯式關閉某個子樹的動效:
<section data-dsh-motion="off">...</section>
構建與檢查:
pnpm install
pnpm run check
pnpm run pack:check
pnpm run check 會執行類型檢查、構建 Node/Browser 兩個 half,並運行單元測試、JSDOM 測試和 bundle 冒煙測試。
可選瀏覽器 E2E 矩陣需要一個正在運行的隔離 Web profile:
$env:DSH_MOTION_E2E_URL = 'http://127.0.0.1:3080/'
pnpm run test:e2e
適用場景與注意¶
適合在 Harness web profile 中爲已有語義界面補充動效,尤其是希望同時滿足以下條件時使用:
- 使用默認
light/dark或angelina-light/angelina-dark主題語義標記。 - 不依賴 CSS Module 哈希類名。
- 保留宿主對佈局和系統級動畫的管理。
- 遵循
prefers-reduced-motion的減少動態效果設置。
當前版本針對本地 Harness 0.1.0-rc.5 源碼和已發佈的 0.1.0-rc.6 客戶端運行時依賴進行測試。
以下區域不屬於插件控制範圍:AppFrame 與側欄幾何、Trajectory 交互、Tooltip、Toast、Composer 排版、流式對話行、大型頁面退場副本以及 Angelina 視差圖層。Composer 內的語義菜單/列表框和工作區樹分組展開是明確例外。
安全上,dsh-motion 會作爲 Harness 插件加載,並繼承當前 dsh 進程權限運行。安裝前應檢查源碼、依賴與 MIT 許可證範圍,再決定是否啓用。
鏈接¶
目錄頁:已覈實資料中未提供 URL。
GitHub:https://github.com/bilbillm/dsh-motion