前言¶
在 DSH Web 插件生態中，基於 dsh-better-sidebar 擴展側邊欄是常見做法。dsh-canvas-tsx-sidebar 是一個消費插件，它將 Qoder Canvas 的 *.canvas.tsx 文件靜態解析爲結構化頁面，並直接在 DSH 右側欄渲染。與需要編譯或沙箱的方案不同，本插件通過自研的輕量遞歸下降解析器完成解析，且完全不執行源碼。
核心功能¶
- 靜態解析與渲染：把工作區內的
*.canvas.tsx解析爲結構化頁面並在右側欄渲染。 - 零解析器依賴：使用自研的輕量遞歸下降解析器，不依賴外部解析器庫。
- 安全性：不執行源碼，不使用
eval、new Function、bundler 或沙箱 iframe，僅做只讀渲染。 - Skill 集成：包含
writing-qoder-canvasSkill，輔助 LLM 生成符合格式的 Canvas 文件。 - 入口接管：接管文件查看器和頁簽入口，提供統一的查看方式。
安裝與前置¶
安裝前請確保滿足以下依賴：
* DSH 版本：0.2.0 線（或特定舊線版本）。
* 依賴插件：dsh-better-sidebar (>= 0.19.1)。
使用官方 CLI 安裝：
dsh plugin --profile <profile> add dsh-canvas-tsx-sidebar@dsh-0.2.0
安裝後需重啓 dsh web 使插件生效。
使用方法¶
本插件提供了兩種打開 Canvas 報告的方式：
-
文件查看器（接管模式）
在 DSH 的文件樹中直接打開任意.tsx文件。插件會接管該文件，如果是*.canvas.tsx則渲染爲結構化頁面，其他.tsx則顯示源碼。注意：文件查看器會認領所有.tsx擴展名。 -
頁簽入口（手動模式）
在 DSH 右側欄的+菜單中選擇 “Canvas 報告”，然後手動輸入文件路徑。這種方式不依賴文件查看器，可以查看任意位置的 Canvas 文件。
Skill 集成¶
倉庫中包含 writing-qoder-canvas Skill，用於指導 LLM 編寫符合本插件解析規範的 .canvas.tsx 文件。
安裝 Skill：
pwsh -NoProfile -File ./scripts/install-skill.ps1
注意事項與限制¶
- 解析精度：解析器爲輕量級實現，不支持泛型、裝飾器等複雜 TS 特性，遇到不支持的內容會降級顯示。
- 文件認領：爲了覆蓋
.canvas.tsx，文件查看器會認領所有.tsx擴展名，導致非 Canvas 的.tsx也走此插件渲染。 - JSX 語義：文本子節點的空白處理嚴格遵循 React 規範（例如保留末行尾隨空格）。
更多信息¶
- GitHub 倉庫：https://github.com/drscrewdriver/dsh-canvas-tsx-sidebar
- 技能目錄：https://www.skillhub.cn/plugins/drscrewdriver/dsh-canvas-tsx-sidebar
