🎨 你画我猜 · Draw & Guess

零工具调用的聊天内嵌 SVG 画布（Operit ToolPkg 插件）。

当你想让 AI 画点什么——你画我猜的谜面、解释问题的示意图、或只是随手涂鸦，让 AI 在回复里输出 <draw>code</draw> 的 XML 标签，插件会将这段标签在气泡中流式渲染成一张可视化画布。

✨ 特性

• 零工具调用：AI 直接在回复正文写标签即可，不占用任何工具调用次数
• 流式绘制：AI 输出 SVG 代码过程中，画布会随着代码一笔一笔生成画面，不用干等转圈
• 两种模式：
  • 带 answer 属性 = 猜谜模式：谜底藏在卡片里，点「查看答案」才揭晓
  • 不带 answer = 普通插图
• 安全过滤：SVG 白名单清洗，拦截 script、事件属性、外链资源，全程本地渲染
• 隐私友好：不联网、不生成文件、不读聊天内容、无需任何系统权限（包括 Shizuku）

📦 安装

方式一：导入成品包

1. 下载本仓库中的 com.operit.willayue_drawguess.toolpkg
2. 在 Operit 中导入（放入外部 packages 目录或直接导入）
3. 启用插件，建议同时启用 drawguess 子包（内含 AI 绘图教学文案）

方式二：从源码构建

cd source
npx --yes tsc -p tsconfig.json
node tests/test.js

然后在 Operit 中调试安装 source/ 目录即可。

🖌 使用

启用插件后，在聊天中对 AI 说「画个××」即可。AI 会输出类似标签：

<draw title="打一成语（四个字哦）" answer="对牛弹琴">
<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
...SVG 内容...
</svg>
</draw>

• 标签必须独占一段，外面不要套 Markdown 代码块
• SVG 推荐使用 viewBox="0 0 400 300"（4:3 画布）
• 支持 svg/g/path/circle/ellipse/rect/line/polyline/polygon/text/tspan/defs/渐变/stop/clipPath/mask
• 禁止 script、foreignObject、事件属性、CSS style、外链图片、动画

📁 目录结构

├── com.operit.willayue_drawguess.toolpkg   # 成品包（直接导入 Operit）
├── source/                                  # 完整 TypeScript 源码
│   ├── manifest.json                        # 包清单（v1.0.0）
│   ├── src/
│   │   ├── main.ts                          # 渲染插件注册入口
│   ├── parse.ts                             # 标签解析 + SVG 白名单清洗 + 流式容错
│   │   ├── svg_html.ts                      # WebView HTML 包装
│   │   ├── constants.ts                     # 常量与数据结构
│   │   ├── packages/drawguess.ts            # drawguess 子包（AI 教学文案，零工具）
│   │   └── ui/draw_card.ui.ts               # 画布卡片 Compose DSL
│   └── tests/test.js                        # 单元测试
└── README.md

🔧 技术说明

• 基于 Operit ToolPkg.registerXmlRenderPlugin 注册 <draw> 标签渲染器
• 画布使用 Compose DSL aspectRatio(4/3) 自适应 + WebView 本地渲染 SVG
• 流式渲染：标签未闭合时，提取已完整到达的 SVG 节点临时闭合预览；不足以成画时显示「🎨 绘制中…」占位，不报错
• 猜谜答案仅存于本地卡片状态，点击切换显示/隐藏

📄 许可与声明

可以二改自用，请勿私自分享二传！请勿倒卖盈利！

作者：willayue 【如有 bug 请联系：小红书 @LumiNaRyA.】