绘画空间

为 Halo 2.27+ 提供在线画板、作品画廊和异步你画我猜。访客可以浏览作品，登录用户可以创作、保存草稿、发布作品和参与猜题；站长负责审核、举报处理及前台配色。

通过默认编辑器插入文章或自定义页面，展示地址由站长设置，跟随博客主题的浅色、深色模式。

当前版本：1.0.1，要求 Halo 2.27.0+。通过编辑器组件展示，页面地址由站长自行设置。

演示与交流

• 演示站：林间拾语
• QQ 交流群：Halo 插件主题交流群 · 766203360
• 下载插件：GitHub Releases
• 源码：acanyo/plugin-drawing-board
• 问题反馈：GitHub Issues

功能

• 画板：鼠标、触屏和笔输入；圆滑笔迹、橡皮擦、颜色/粗细、撤销/重做、尺寸/背景、缩放和 PNG 导出。
• 全屏：画板右上角可进入/退出全屏，保留笔迹；不支持原生全屏时使用展开模式，Esc 返回。
• 创作：浏览器自动草稿、账号草稿、继续编辑、发布审核和删除。
• 作品展示：画板下方展示最新公开作品，发布审核后自动进入画廊。账号草稿、待审作品与公开作品分别显示状态。
• 画廊：真实作品、最新/热门排序、作者筛选、分页、懒加载、点赞、分享、举报和 Halo 原生评论。
• 画谜：作者填写谜底和提示，服务端判题、尝试次数限制、一次性积分、积分榜、作者猜题统计和手动揭晓。关闭游客猜题时，未登录访客会显示登录入口。
• 作品详情：完整画作展示、作者与发布状态、独立猜题区域；猜题统计使用弹窗，揭晓和删除操作二次确认，提交期间防止重复操作。
• 后台：作品审核管理、举报处理、Halo 原生插件设置；浅色和深色可分别自定义 UI 配色。

画谜按作品异步进行，作者与猜题者无需同时在线。插件使用 Halo 现有账号、附件与数据存储，无需额外部署服务。

界面预览

截图来自本地 Halo 2.27.0 的实际页面，展示已有作品和默认配色；手机图为 390px 浏览器视口预览。

在线画板

画笔、橡皮擦、撤销重做、缩放和导出集中在工作区，右侧可切换绘画工具与发布设置。

作品画廊

按最新发布或最多喜欢浏览作品，支持查看作者画廊、打开详情和继续创作。

画谜详情

画作、提示、审核状态和作者操作分区展示。截图为作者查看待审核作品；作品公开后，其他用户可按站点权限参与猜题。

查看深色模式、手机布局和操作确认

组件跟随主题深色模式，画作本身的颜色保持原样。

窄屏下画作与信息上下排列，猜题和作者操作保持可用。

揭晓前说明操作结果，支持取消、Esc 和点击遮罩关闭；实际提交时锁定弹窗。

编辑器组件与创建指引

在后台点击「新建展示页面」，使用默认编辑器的「绘画空间」组件。可选择首次打开画廊、画谜或画板，发布后的地址由当前页面决定。

后台作品管理直接显示创建步骤，方便站长完成页面设置。

构建与安装

要求 Java 21、Node.js >= 22.12、pnpm 10.33，最低 Halo 2.27.0。

./gradlew build

也可从 Releases 下载 plugin-drawing-board-1.0.1.jar，在 Halo Console 的插件管理中安装并启用。

自行构建时生成 build/libs/plugin-drawing-board-1.0.1.jar，包含服务端、Vue Console 和 Svelte 嵌入组件。启用后，到「绘画空间 → 插件设置」选择附件存储策略、审核、发布和猜题权限。

管理员默认审核新作品及修改后的作品。普通账号只能编辑自己的作品；委派管理员可分配「管理绘画作品与举报」权限。谜底揭晓前不会进入公开作品响应。

图片使用 Halo 附件，私有绘画指令存放于 ${halo.work-dir}/drawing-board/documents。备份时同时备份 Halo 数据库、附件和该目录。不要将草稿 PNG 的附件链接视作私密文件存储。

使用流程

1. 配置插件：安装并启用后，进入「绘画空间 → 插件设置」，选择作品图片存储策略，确认发布权限、审核开关和猜题次数。
2. 创建展示页面：进入「页面 → 自定义页面」新建页面，自行设置标题和地址。使用默认编辑器，点击「插入内容 → 绘画空间」或输入 /绘画空间，选择首次打开的模块后发布，再把页面加入站点菜单。文章中也可插入组件。
3. 创作与发布：登录后开始绘画，可保存账号草稿，或点击「发布作品」填写描述并确认。开启审核时，作品先进入待审核状态，由管理员公开后展示。
4. 创建画谜：进入「你画我猜 → 发布画谜」，填写正确答案与可选提示。其他用户在详情页提交答案，作者通过「猜题情况」查看记录。
5. 管理谜底：画谜首次发布后不能再修改题面或谜底。作者可主动揭晓，揭晓后所有人可见答案，该作品停止接受猜题。

作品公开后可点赞、分享和评论；登录用户可举报他人作品。草稿、待审核与隐藏作品只向作者及有管理权限的账号展示。访客猜题默认关闭，站长可按需开启；访客不计排行榜积分。

嵌入 Halo 页面

先创建文章或自定义页面，再在 Halo 默认编辑器中点击「插入内容 → 绘画空间」，或输入 /绘画空间 插入组件。卡片内的「首次打开」决定访客初次进入时显示画廊、画谜或画板；已分享的内部链接保留当前位置。

也可在自定义页面的 HTML 内容中加入：

<drawing-space></drawing-space>

插件通过 Halo 的 TemplateHeadProcessor 自动注册组件。没有组件的页面只加载小型注册脚本；Svelte 和业务资源在组件出现时才加载。

也可以在主题模板中放置同一标签。无需 iframe、复制构建文件或导入全局 CSS。

<!-- 默认打开画谜；可选值为 gallery、play、create -->
<drawing-space page="play"></drawing-space>

• 使用 Shadow DOM 隔离样式，不改变主题的 html/body、页头、页脚、字体设置或配色开关。
• 默认跟随主题浅色/深色状态，也可设置 theme="light" 或 theme="dark"。
• 按父容器宽度自适应，支持带侧栏的主题内容区。
• 详情、创作、返回、分享和登录返回均保留当前页面路径，用组件自己的查询参数保存位置，刷新可恢复；不注册前台固定路径。
• 同一页面有多个组件时使用不同的 route-key，例如 <drawing-space route-key="gallery-a">。

站长自定义配色

站长可在「绘画空间 → 插件设置 → 前台外观」开启「自定义配色」，使用拾色器设置颜色，无需编写 CSS。

• 浅色与深色各自支持：强调色、主按钮背景、主按钮文字、页面背景、面板背景、正文颜色。
• 留空使用默认颜色；关闭「自定义配色」立即恢复默认方案，保留已填写颜色。
• 保存后刷新包含组件的页面即可生效。页面背景默认透明。
• 配色只影响绘画空间 UI，不修改主题页头/页脚，也不改变画布背景、画笔颜色和已发布作品。主按钮文字与背景颜色请搭配设置。

单个组件覆盖

单个组件仍可通过宿主 CSS 变量覆盖全站设置，优先级为「宿主变量 → 后台配色 → 默认颜色」：

drawing-space {
    --drawing-accent: #36796c;
    --drawing-button: #303638;
    --drawing-button-text: #ffffff;
    --drawing-font: inherit;
    /* 可选：--drawing-background、--drawing-surface、--drawing-color */
}

从默认入口迁移

当前源码不再注册 /drawing、/drawing/create、/drawing/play 或作品详情等前台路由，页面地址完全交给 Halo 的文章和自定义页面管理。自行创建 /drawing 页面也不会被插件覆盖。

之前使用插件默认入口的站点，升级后需先新建展示页面、插入组件并发布，再将站点菜单更新为该页面地址。已有作品、草稿、谜底及积分数据继续保留；旧的固定详情链接需要从新页面重新分享。

后台作品与举报通过弹窗预览。绘画作品的评论主体保留标题，不再生成指向默认前台路由的链接；读者可从组件内分享实际作品地址。

本地开发与验证

scripts/start-local-halo.sh
python3 scripts/prepare-local-acceptance.py
./gradlew build
python3 scripts/deploy-local.py
python3 scripts/acceptance-api.py

隔离服务为 http://localhost:8096，后台为 /console/drawing-board。准备脚本只初始化本机测试环境；本地测试凭据、数据库和验收证据位于被忽略的 build/，README 展示截图位于 docs/images/。执行 ./gradlew clean 会删除这份本地测试数据，需要时先备份 build/dev/halo。

pnpm -C ui dev:frontend        # Svelte 组件调试
pnpm -C ui dev                 # Vue Console 构建监听
./gradlew generateApiClient -x build  # 从实际本地 OpenAPI 重新生成客户端
pnpm -C ui exec eslint src
pnpm -C ui exec oxlint src --ignore-pattern src/api/generated

前台使用 Svelte 5 Web Component，后台使用 Halo 原生 Vue Console。两套 UI 均复用 Halo axiosInstance 和实际 OpenAPI 生成的客户端。不要编辑生成客户端或构建资源。

数据和接口见 架构说明。真实手机、压感笔、大规模并发和云存储供应商尚未验收；访客猜题默认关闭且不进入积分榜，不适用于有奖活动。前台评论提供顶级评论。

GPL-3.0 © Handsome