前言¶
在移動端或窄屏視口下，DSH 的默認佈局會自動摺疊側邊欄，但留下的 56px 圖標欄依然佔用大量空間。在 390px 寬度的屏幕上，這 56px 佔據了約 14% 的寬度，卻沒有任何可讀內容。dsh-mobile-sidebar 插件的目標是在 1024px 以下的斷點，完全移除這個不可用的圖標欄，並將側邊欄以抽屜形式打開。
插件定位¶
這是一個 DSH 客戶端插件，由 wilsonchengassistant 維護。它修改了 @deepseek-ai/dsh-client-ui-layout 在窄屏下的行爲，將左側欄軌道寬度置爲 0，讓對話佔據整個可用寬度。側邊欄以覆蓋層抽屜的形式打開，點擊遮罩可關閉。
核心功能¶
窄屏下移除圖標欄¶
在 1024px 以下的斷點，插件將左側軌道寬度設爲 0px，同時隱藏 56px 的圖標欄。對比變化如下：
| 默認行爲 | 插件行爲 | |
|---|---|---|
| 390px 視口軌道 | 56px 334px 0px | 0px 390px 0px |
| 側邊欄摺疊 | 56px 圖標欄 | 無軌道，無繪製 |
| 打開側邊欄 | 壓縮中間列至 110px | 300px 抽屜覆蓋 390px 中間列，點擊外部關閉 |
| 頭部 | 無切換按鈕 | 左側面板按鈕 |
側邊欄作爲抽屜打開¶
側邊欄列保持在 0px 軌道中，通過 position: relative + 顯式寬度實現溢出顯示，中間列寬度不變。抽屜打開時，遮罩層覆蓋整個區域，點擊遮罩即可關閉。
切換按鈕¶
在對話面板頭部，插件在 conversation.header.leading 槽中插入一個 Button 組件，使用 IconPanelLeftOutlineRegular 圖標，調用 ctx.layout.toggleSidebar() 切換側邊欄。
全局面板的切換控制¶
其他全局面板（Plugins、Automation tasks 等）沒有頭部插槽，無法直接注入切換按鈕。插件在 shell.overlay 中放置一個固定控制，通過 [frame]:not(:has([data-dsh-mobile-sidebar-button])) 選擇器隱藏對話頁面的控制，避免重複顯示。同時爲這些面板的標題添加 40px 的 padding-inline-start，確保控制不與標題重疊。
大屏保持不變¶
在 1024px 以上的斷點，插件不會修改佈局，按鈕也會隱藏，保持默認行爲。
安裝與啓用¶
安裝命令如下：
dsh plugin --profile web add file:/path/to/dsh-mobile-sidebar
dsh plugin add 會將包追加到 dsh.profile.bundles 並熱掛載，瀏覽器刷新即可加載新的客戶端組合。無需重啓 dsh web。
卸載時，從 ~/.dsh/profiles/<profile>/package.json 的 bundles 中刪除 "dsh-mobile-sidebar" 條目，或在插件頁面禁用該 bundle。
典型用法¶
安裝後，在 1024px 以下的視口下，左側欄圖標 rail 會消失，對話佔據全屏寬度。點擊對話頭部的左側面板按鈕，側邊欄以抽屜形式展開，點擊遮罩或再次點擊按鈕即可關閉。
在 Plugins、Schedules 等全局面板中，切換按鈕會以固定控制的形式出現在 shell.overlay 中，點擊可打開側邊欄。
適用場景與注意¶
該插件適用於需要在移動端或窄屏設備上使用 DSH 的開發者。它通過瀏覽器端修改實現，不涉及 Host 端邏輯。
安裝前應檢查插件源碼與許可證。插件使用 MIT 許可證，依賴 @deepseek-ai/cordis ~4.0.4，需要 Node.js >= 22。
結語¶
dsh-mobile-sidebar 解決了 DSH 在窄屏下的佈局問題，將左側欄完全交還給對話，讓移動端體驗更接近原生應用。通過瀏覽器端零化軌道、隱藏圖標欄、抽屜式打開等手段，在不修改 DSH 核心代碼的前提下實現了這一效果。
插件目錄：https://www.skillhub.cn/plugins/wilsonchengassistant/dsh-mobile-sidebar
GitHub：https://github.com/wilsonchengassistant/dsh-mobile-sidebar
