前言¶

DeepSeek Harness（DSH）的 Web 客戶端側欄沿用官方鯨魚標識與 deepseek / HARNESS 字標。長時間等待模型生成時，界面往往保持靜態，側欄與標題區缺少與 useSessionStatus 中 running 狀態對應的視覺反饋。社區插件 youyou-sidebar-logo-animation（倉庫內 README 標題爲 Harness Brand Motion）在空閒時複用與官方一致的幾何與配色，在生成、加載與輸入聚焦時疊加鯨魚形變、字標掃光、標題前潛泳標記，以及輸入框外的淺色旋轉彩虹描邊，屬於目錄分類「趣味換裝」，由維護者 mryouyouHK 發佈；GitHub 星標爲 0。下文按實現行爲、擴展點、安裝與注意事項說明，事實以倉庫 README 與 package.json 爲準。

這是什麼¶

youyou-sidebar-logo-animation 是面向 DSH Web 客戶端的 bundle 插件（version 1.0.0，許可證 MIT）。它通過 Cordis 插槽注入客戶端模塊 client.js，監聽會話與對話加載狀態，在不改寫官方品牌幾何的前提下爲側欄與對話 UI 增加動畫；並在各 Session 的 composer 卡片內放置隱藏標記，供聚焦時用 CSS 繪製 2 px 彩虹描邊。Host 側 index.js 無額外 host 行爲。

核心功能¶

空閒（Idle）¶

側欄兩個佔位（鯨魚標記與字標）繪製與官方品牌相同的 SVG 路徑與字樣，使用相同的 currentColor 與反轉標籤色，無會話運行時不改變側欄觀感。

生成中（Generating）¶

當任意 Harness 會話在 useSessionStatus 快照中報告 running: true 時：

1. 側欄鯨魚：在兩個變形姿態之間 morph（非均勻擠壓加身體彎曲，經 SVG d 屬性動畫），帶柔和白色光暈；不旋轉、不公轉。標記視口含透明內邊距，形變錨定在標記左緣，保證 24 px 徽標框內不被裁切。
2. DEEPSEEK HARNESS 字標：一道 marquee 光帶掃過字母，裁剪在字形輪廓內。
3. 無障礙：系統 prefers-reduced-motion: reduce 時凍結 morph 與掃光，僅保留慢速光暈。

對話標題前鯨魚¶

對話頭欄 leading 位在會話忙碌時繪製小型鯨魚：

Composer 彩虹環¶

每個 Session composer 卡片（新會話與已有對話）內渲染隱藏標記 composer-rainbow-mark。該卡片內編輯器獲得焦點時，CSS 在圓角邊框外側繪製淺色旋轉 conic-gradient 彩虹環，遮罩爲 2 px 描邊。prefers-reduced-motion: reduce 時凍結旋轉。

容錯與樣式範圍¶

各佔位由 error boundary 包裹；渲染失敗時回退靜態稿，避免品牌行空白。除插件自身 effect 安裝/卸載的 <style> 外，不向 DOM 額外寫入節點。

擴展點（Extension points）¶

後臺掃描調度（與動效同包）¶

插件將週期性 DOM 刷新（滾動 affordance、賬號頭像鏡像、等待倒計時卡片、錯誤 chip、composer 工具欄兜底、連接 pill 位置、bot 名冊拉取等）註冊到單一調度器，而非各自 setInterval：

• 窗口隱藏時不執行，避免無效喚醒；
• 空掃採用幾何退避（×1.6，帶上限），DOM 變化後恢復標稱週期；
• 每次喚醒最多跑兩個任務，減輕長任務對輸入與滾動的影響；
• 共享一個 MutationObserver，無變更時僅 dirty 任務可跳過掃描。

在插件齒輪面板 性能 → 後臺掃描頻率 可選：省電（2.5× 慢）、平衡（默認）、靈敏（2× 快），存入 localStorage。倒計時 tick（1 s）與會話切換 overlay 的 measure/state 循環（1 s / 400 ms，最長約 4 s）仍爲本地點定時器。

安裝與啓用¶

官方 README 未提供 dsh plugin add github:... 一類命令。安裝方式爲：在 Plugin Manager 中使用 install_bundle，指定插件包目錄路徑，再在 Settings → Plugins 中啓用。

README 中的示例路徑爲作者本機目錄，僅作動作說明，你的環境應替換爲實際解壓或 clone 後的包目錄（勿將示例路徑當作通用命令）：

# Plugin Manager → install_bundle → 指向包含 index.js、client.js、cordis.patch.yml 的目錄
# 示例（來自 README，需按本機修改）：
/Users/aoao/Documents/deepseek-harness/default-workspace/sidebar-logo-animation

package.json 中 dsh.client 聲明 platform: web、immediately: true，並注入 @deepseek-ai/dsh-client-ui-sidebar 與 @deepseek-ai/dsh-client-ui-session，需與當前 Harness 客戶端版本兼容。

典型用法¶

本插件無獨立 CLI 或配置 JSON；啓用後行爲由會話狀態與系統動效偏好自動驅動。

1. 在插件管理器中 install_bundle 並打開插件開關。
2. 發起或續寫會話，待 running: true：觀察側欄鯨魚形變與字標掃光。
3. 打開或切換對話：加載階段見標題前潛泳；生成階段見遊動；完成後標記消失。
4. 聚焦任意 Session 輸入框：卡片外緣出現淺色旋轉彩虹環（未開啓減弱動效時）。
5. 若機器較省電或頁面卡頓，可在齒輪 性能 → 後臺掃描頻率 選 省電 或 平衡。

適用場景與注意¶

適合誰：長期在 DSH Web 端跑智能體會話、希望側欄與標題區狀態與生成/加載同步的開發者；接受「趣味換裝」類視覺增強、且不需要改動官方品牌幾何的用戶。

權限與安全：插件以當前 DSH 進程及瀏覽器上下文運行，可讀寫的範圍與客戶端腳本一致。安裝前應在 GitHub 倉庫 查閱 client.js 與 LICENSE（MIT），自行評估是否納入工作環境。社區目錄 SkillHub 插件頁 爲獨立生態站點，與 DeepSeek / 幻方無官方從屬關係。

依賴與文件：交付物含 index.js、client.js、cordis.patch.yml、locale/*.json、icon.svg；bundle 經 cordis.patch.yml 插入客戶端行。

結尾¶

youyou-sidebar-logo-animation 在 idle 時保持官方側欄品牌，在生成、對話加載與 composer 聚焦時分別提供鯨魚 morph、字標 marquee、標題前潛泳/遊動與彩虹描邊，並附帶統一後臺掃描調度與可調的掃描頻率。需要覈對行爲或提交 issue 時，可訪問目錄頁與源碼倉庫：

• 目錄：https://www.skillhub.cn/plugins/mryouyouHK/youyou-sidebar-logo-animation
• GitHub：https://github.com/mryouyouHK/youyou-sidebar-logo-animation