dsh-tryboard-plugin:在 DSH Web GUI 裏內置一塊 Trello 風格看板

前言

用 DSH 做日常開發時,經常需要一個地方記錄「今天要做什麼、做到哪了」。常見的做法是切到獨立的看板工具或者開個文本文件,上下文就斷了。

dsh-tryboard-plugin 的思路是把這塊看板直接放進 DSH 的 Web GUI:側邊欄「設置」上方多一個「看板」入口,點開後看板頁鋪在當前會話的主內容區,側邊欄保持可見可用。數據持久化在 DSH 設置中,重啓不丟。

這是什麼

dsh-tryboard-plugin 是一個標準的 DSH Cordis 插件,由 nexsjournal 維護,許可證爲 MIT。它在 DSH Web GUI 裏提供一個 Trello 風格的工作看板,支持多看板、拖拽和自定義列,全部數據存在 DSH 設置的 tryboard 命名空間裏。

核心功能

多看板與默認四列

  • 可創建任意多個看板,點擊標題即可重命名;頭部切換器支持切換、新建、刪除看板。
  • 每個看板自帶四個默認列:待辦 / 進行中 / 完成 / 待確認(英文環境爲 To Do / In Progress / Done / Pending),列頭帶狀態色點。

拖拽與狀態

  • 卡片支持 Trello 式拖拽:跨列移動、同列內排序,拖拽時顯示插入指示線。
  • 卡片拖到哪一列,狀態就是哪一列,卡片上的小色點即時反映狀態。
  • 快捷操作:Esc 關閉看板頁或取消編輯;側邊欄收起時入口變爲純圖標。

自定義列與卡片管理

  • 最後一列後面有「添加列」,可自由增刪自定義列(狀態爲自定義/灰色)。
  • 點擊卡片或列標題即可重命名;列菜單支持重命名和刪除(刪除帶確認);列尾有「添加卡片」快速建卡。

原生風格與側邊欄整合

  • 界面全部使用 DSH 設計令牌(--dsw-* / --ds-*)繪製,自動跟隨淺色/深色主題,不引入任何外部樣式。
  • 側邊欄入口按鈕與「設置」逐像素對齊(42px 行高 / 16-18px 圖標)。在殼 v2.0.1+ 下,插件會把 footer 插槽容器改回垂直堆疊,並把「設置」的齒輪換成品牌圖標——僅作用於側邊欄,用 CSS mask 實現,不改應用本體。

安裝與啓用

三種安裝方式,任選其一。

方式一,一鍵腳本(本地目錄,軟鏈安裝,改動即時生效):

./scripts/install.sh                # 安裝到 web profile
./scripts/install.sh --profile xxx  # 指定 profile

方式二,dsh CLI 本地安裝:

dsh plugin --profile web add -w /path/to/dsh-tryboard-plugin

方式三,從 GitHub 安裝:

dsh plugin --profile web add git+https://github.com/<你的用戶名>/dsh-tryboard-plugin.git

其中 <你的用戶名> 是 README 中的佔位符,替換爲實際倉庫地址即可。

安裝後需要重啓 DSH 一次(服務端半與 api-proxy 白名單補丁在下次啓動生效),然後點側邊欄「看板」即可使用。

補充一點開發時的行爲差異:客戶端代碼(看板頁)支持熱更新,宿主運行期間修改 lib/client.js 會自動生效;lib/index.js(服務端半)的改動需要重啓 DSH。

數據存儲與遷移

全部看板數據是一份 JSON 文檔,存放在 ~/.dsh/settings.yamltryboard.data 字段(JSON 字符串),隨 DSH profile 存儲,重啓不丟。

數據結構如下:

{
  "v": 1,
  "activeBoardId": "…",
  "boards": [
    {
      "id": "…",
      "name": "每日工作",
      "createdAt": 1712345678901,
      "columns": [
        {
          "id": "…",
          "title": "待辦",
          "status": "todo",
          "builtin": true,
          "cards": [{ "id": "…", "title": "寫週報", "createdAt": 1712345678901 }]
        }
      ]
    }
  ]
}

status 取值爲 todo doing done review(四個默認狀態列)或 custom(自定義列)。

遷移和備份很簡單:直接備份 ~/.dsh/settings.yaml 即可。

卸載命令:

dsh plugin --profile web remove dsh-tryboard-plugin

卸載後再重啓 DSH。注意看板數據仍會留在 settings.yamltryboard 字段中,不需要的話可以手動刪除。

工作原理(給開發者)

插件分爲宿主半和瀏覽器半兩部分:

文件 角色
lib/index.js 宿主半:註冊 tryboard 設置命名空間(schemastery schema),並冪等地把 tryboard 加入宿主 api-proxy 的 Web 設置白名單(下次啓動生效)
lib/client.js 瀏覽器半:注入側邊欄入口與看板頁,持有全部交互邏輯與狀態
cordis.patch.yml 把插件 id 插入宿主的 Cordis bundle 層
package.json dsh.bundle.patch 指向補丁文件;dsh.client 聲明 Web 客戶端 bundle 及其依賴模塊

瀏覽器半用到的宿主插槽(slots):

  • sidebar.footer.action(list,root 作用域):設置行上方的側邊欄腳部動作位,用於看板入口;
  • shell.overlay(list,root 作用域):應用框架級浮層位,看板頁渲染於此,但通過測量側邊欄列寬([data-shell-overlay] 的父級首個子元素 + ResizeObserver)讓頁面只鋪在主內容區(left: 側邊欄寬),側邊欄保持可見可用。

狀態與持久化方面,客戶端用一個模塊級 store(useSyncExternalStore)持有 { open, persistence, data };所有變更即時更新 store,並防抖 400ms 通過 ctx.settingsScope.bind({ namespace: "tryboard" }).set("data", JSON) 寫回宿主設置。宿主文檔變更(其他客戶端寫入、外部修改)通過設置失效訂閱自動回讀合併。

適用場景與注意

適合的人羣:主要在 DSH Web GUI 裏工作、希望任務規劃不離開當前環境的人。如果你已經在用獨立的看板工具並需要多人協作,這個插件不解決那類需求,它定位是單機的個人工作看板。

運行要求與兼容性:

  • Node ≥ 20(宿主側);
  • DSH Desktop / dsh web(Cordis 插槽系統版本,rc.6 系);
  • 安裝後務必重啓 DSH 一次,服務端半與 api-proxy 白名單補丁纔會生效。

安全提醒:插件以當前 dsh 進程的權限運行,安裝前建議檢查源碼與許可證。本項目許可證爲 MIT。

小結

dsh-tryboard-plugin 把一塊 Trello 風格的看板塞進了 DSH Web GUI:多看板、默認四列、拖拽換狀態、自定義列,數據落在 ~/.dsh/settings.yaml,界面完全跟隨 DSH 原生主題。安裝一條命令,重啓一次即可使用。

  • 插件目錄頁:https://www.skillhub.cn/plugins/nexsjournal/dsh-tryboard-plugin
  • GitHub 倉庫:https://github.com/nexsjournal/dsh-tryboard-plugin
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜