dsh-excalidraw-board

让 DSH 拥有一个全功能的白板
右上角一键打开，直接嵌入官方 Excalidraw 原站
绘图 · 协作 · 素材库 · 导出 · 快捷键 —— 与独立浏览器访问完全一致

新用户？ 从 安装 开始——两步注册，右上角立刻出现铅笔图标。

核心承诺：原站即功能。 不转码、不自托管、不加沙箱限制，iframe 里跑的就是 excalidraw.com 本体，官方怎么用，这里就怎么用。

运行效果

① 右上角入口 —— 会话窗口右上角（工具区最右）的铅笔图标，点击打开、再点关闭（浮层右上角的圆形 X 也可关闭）：

② Excalidraw 编辑器（浅色主题） —— 打开后即官方编辑器全貌：

③ Excalidraw 编辑器（深色主题） —— 与官方站点一致支持暗色模式：

④ 实际绘图效果 —— 手绘风格图形、箭头、文字标签、自由绘制，全部可用：

为什么直接嵌入原站

特性

来自 Excalidraw（官方原站能力，引用自 Excalidraw 官方 README）

本插件的 DSH 集成能力

安装

本插件是 DSH 动态 Cordis 插件（Client 半）。源码见 lib/plugin.client.js，两种安装方式：

方式 A：动态插件（推荐，无需重启）

1. 复制 lib/plugin.client.js 中 return { ... } 的函数体；
2. 在 DSH 会话中调用 cordis_define（Client 代码粘贴到 code.client），再 cordis_run 激活；
3. 批准运行后，右上角即出现铅笔图标。

方式 B：程序化安装

npm install dsh-excalidraw-board

const board = require('dsh-excalidraw-board')
// board.clientCode → 传给 cordis_define 的 code.client

说明：DSH 静态 client 模块体系需要随 bundle 构建，动态插件方式不依赖构建、即装即用，是本插件的主推路径。

使用

1. 点击会话右上角铅笔图标 → 画板打开（侧边栏展开时从侧边栏右侧开始铺开）；
2. 绘图、插入素材、协作、导出……与独立访问 excalidraw.com 完全一致；
3. 再点右上角 X 图标（或浮层右上角圆形 X）→ 关闭画板。

实现方法

架构总览

DSH Web GUI（浏览器端）
        │
        ├─ conversation.session.header.utilities  右上角开关按钮（铅笔 ⇄ X）
        │        └─ 共享 store（open / sidebarLeft + 订阅）
        ├─ conversation.input.dock                0 尺寸测量元素（每 250ms 读 rect.left）
        │        └─ 侧边栏右边缘 = 对话列左边缘
        └─ shell.overlay                          全屏浮层
                 ├─ iframe → https://excalidraw.com/（权限全开，无 sandbox）
                 └─ 圆形 X 关闭按钮

核心机制

目录结构

dsh-excalidraw-board/
├── lib/
│   ├── index.js            # 包入口：导出 name/version/clientCode
│   └── plugin.client.js    # Client 半源码（可喂给 cordis_define）
├── docs/
│   ├── scene-demo.json     # 效果图所用示例场景
│   ├── shot-excalidraw.js  # 效果图生成脚本（headless Chrome + CDP）
│   └── screenshots/        # 运行效果插图
├── package.json
└── README.md

设计原则

1. 原站即功能——不转码、不自托管、不加沙箱。官方站点允许嵌入（无 frame 拦截头），就用最忠实的方式嵌入。
2. 零侵入——只注册 replaceRisk: none 的增量槽位，不替换、不遮挡任何原生 UI。
3. 感知优先——浮层位置由实时测量驱动，拖拽侧边栏、切换折叠均即时跟随，不依赖任何内部状态 API。
4. 可逆——所有副作用（样式、定时器、订阅、注册）挂在插件生命周期上，卸载即完全清理。
5. 内联优先——渲染在插件作用域之外的 UI 一律用内联样式，免疫作用域隔离。

迭代日志

许可证

MIT。Excalidraw 本体为 MIT 协议的开源项目（github.com/excalidraw/excalidraw），本站点为官方托管版本。