dsh-canvas-tsx-sidebar：DSH 侧边栏的 Qoder Canvas 渲染器

前言¶

在 DSH Web 插件生态中，基于 dsh-better-sidebar 扩展侧边栏是常见做法。dsh-canvas-tsx-sidebar 是一个消费插件，它将 Qoder Canvas 的 *.canvas.tsx 文件静态解析为结构化页面，并直接在 DSH 右侧栏渲染。与需要编译或沙箱的方案不同，本插件通过自研的轻量递归下降解析器完成解析，且完全不执行源码。

核心功能¶

• 静态解析与渲染：把工作区内的 *.canvas.tsx 解析为结构化页面并在右侧栏渲染。
• 零解析器依赖：使用自研的轻量递归下降解析器，不依赖外部解析器库。
• 安全性：不执行源码，不使用 eval、new Function、bundler 或沙箱 iframe，仅做只读渲染。
• Skill 集成：包含 writing-qoder-canvas Skill，辅助 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 报告的方式：

1. 文件查看器（接管模式）
   在 DSH 的文件树中直接打开任意 .tsx 文件。插件会接管该文件，如果是 *.canvas.tsx 则渲染为结构化页面，其他 .tsx 则显示源码。注意：文件查看器会认领所有 .tsx 扩展名。

2. 页签入口（手动模式）
   在 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