画板

下载 .tgz

版本v0.1.0

大小14.2 MB

分类文档

平台全平台

运行方式纯前端（无独立进程）

下载量2

标签whiteboard · excalidraw · 画板

SHA-256f34232ede2fc03939b2aaf71aa3e5aee86e9585fa7469551052e445cff9e9d04

画板插件（Excalidraw，非内置，市场化按需安装）。本插件 UI 是 React （Excalidraw 官方组件）——插件 iframe 自带依赖，与 Vue 宿主完全隔离， 这正是插件机制的框架自由。

提供什么

• 文件类型 xinghan.whiteboard::board（.board，storage:‘text’）： Excalidraw 手绘白板整块渲染。存储是官方场景 JSON（serializeAsJSON 产物）——图形/文本与 .excalidraw 互认；图片走宿主资产库瘦引用 （files 段存 xhRef 而非 base64 内联，10s 自动保存不再全量推几 MB； 官方内联格式导入照常读、保存自愈；拷去 excalidraw.com 时图片缺失）。
• 字段类型「画板」（typeKey board，基础类型 text，「插件字段」组）： 单元格里放一份画板 —— 双击 cell 弹 1120×680 模态框（与 Excel 字段同款）， 显式「保存」才回写（不保存不落库），⌘S 也走保存。cell 值是内联 JSON {"summary":"…","doc":{场景}}，summary 首键（baseType=text 按字符串排序靠它）， 宿主 summaryPath 投影 —— 网格里显示「登录流程 · 12 个图形」这种摘要； 图片同样走资产库瘦引用，所以带图的 cell 也就几十 KB（maxBytes 护栏 1MB）。
• 官网样例对齐：主菜单（存图/搜索/清空/换底色/帮助 + 自建「首选项」组： 网格/吸附/禅/查看/属性；「打开/保存到」与宿主存储语义冲突不放）、欢迎屏、 网页嵌入（validateEmbeddable）。zh-CN 缺失词条经 vite zhLocalePatch 全量 补齐。素材库入口与 Generate 组（文本转图/mermaid/线框转代码,AI 相关） 按用户要求整组关闭（aiEnabled=false + mermaid 整包 rollup external 出产物）。
• 保存语义同智能文档：10s 防抖自动保存、⌘S/页面隐藏立即 flush。
• 手绘字体（Virgil/Excalifont 等）自托管进 dist/fonts （EXCALIDRAW_ASSET_PATH），桌面离线不走 CDN。
• 未装插件兜底：宿主默认文本编辑器打开原始 JSON，数据不锁死。

结构

plugin.json          # fieldTypes: board / fileTypes: xinghan.whiteboard::board
ui/src/
  board/codec.ts     # 场景 JSON 容错解析(collaborators 剥除坑,单测覆盖)
  board/saveSig.ts   # 内容签名(onChange 极密集,标脏只看落库字段)
  board/cellValue.ts # 字段 cell 值编解码 + 摘要文本
  board/assetPack.ts # 图片瘦引用(资产库 uploadAsset/readAsset)
  BoardCanvas.tsx    # 共用画布外壳(菜单裁剪/首选项/暗色跟宿主)
  BoardApp.tsx       # 文件视图:加载 + 10s 防抖自动保存 + 状态条
  BoardFieldApp.tsx  # 字段编辑器:模态框内,显式保存 resolveModal
  main.tsx           # hash 路由:#/field=字段编辑器,其余=文件视图
  lib/host.ts        # 宿主桥(与其它插件同模式)

协同 v1 单机（最后保存者赢）；升级位：PluginRoom 中继广播场景增量。

开发

pnpm --filter @xinghan/plugin-whiteboard typecheck
pnpm --filter @xinghan/plugin-whiteboard test
pnpm --filter @xinghan/plugin-whiteboard ui:build   # dist + 拷字体

怎么安装

1. 下载安装包 —— 点上面的按钮拿到 xinghan.whiteboard.tgz。要在内网用，就把这个文件拷进去。
2. 打开客户端 —— 右上角 插件市场 → 右上角 「从本地安装」。
3. 选中文件 —— 解包到 ~/xinghan/plugins/ 后热加载，不用重启应用。

完整的内网 / 离线说明见 离线与内网安装。