“Abord”的开发碎碎念 | 𝟞𝟙𝟡'𝕤 𝔹𝕃𝕆𝔾

slug

type

status

date

summary

初衷

我在初高中一直是管电脑的“网管”，一直需要帮老师解决电子白板的使用问题，在这几年的经验中，我觉得现有的电子白板应用存在一些限制：

⚠️

最最讨厌的广告和收费问题：

现在的部分白板软件功能完善，但使用免费版就会在使用时弹出广告

做这些软件的入，我可以理解你们收费和弹广告，但对于初高中这种高频使用的，不能

出一个一次性的授权吗？？？你忍心让老师写两个字就弹出广告吗？？？

想去除广告或使用高级功能就需要按月订阅收费。这对于国内初高中这样不需要过多的高级功能和高强度使用的实际需求下，付费显得不明智（没人交这个钱），有广告也实实在在影响上课时的高效性

软件与硬件深度绑定，难以移植和切换：

部分软件与学校所购买的硬件绑定，无法在其他设备中安装使用，且这类软件往往是一次性授权，无售后和更新，软件在出现异常时无法及时获得修复

软件本体较大，占用存储空间：

学校的一体机存储空间有限，安装软件、存储教学相关的文件已经让存储空间捉襟见肘，难以腾出空间安装额外软件；当然内存也是不足的，部分软件压根带不动

软件设计不符合直觉，教师难以适应：

软件本身设计较为复杂，让年纪大的老师难以接受，在部分操作上不符合直觉，没有“所见即所得”，令人望而生畏。

功能富余带来的复杂性：

我尝试过考虑诸如Excalidraw，figma等出名的白板软件，但其功能复杂，和很多当代白板软件一样，集成了协作、账户等等在中国课堂上想都不用想的功能，让其变得复杂，老师们的接受度下降

双系统误触切换后，难以有统一的体验：

几年的观察让我发现，现在很多一体机都配备了双系统，在开机时使用套壳Android，然后以类似“虚拟机”的形式带起Windows，老师容易因为误触屏幕边缘而导致切换回Android，此时无法使用Windows下的白板软件

被这些问题困扰多年，尝试了四五个常见的白板软件和平台，都不尽人意。

我认为我可以尝试创建一套白板系统来解决这些问题，还给老师们一个简单易用的电子白板，且完全开源，用无广告，永不付费

我希望我创造的白板能解决一些核心痛点，将我见到的有创意且很实用的功能整合到一起，紧贴中国国内初高中课堂的实际需求，来让老师们减负，也是为未来的负责电脑的“网管”朋友们减负

所以基于这些，我想做的白板——”Aboard”，正如这个名字“A+board”，只想做一个纯白板，不希望加入破坏这一简洁性的功能

预期

我希望Aboard应该有以下特点

🔥

功能简明

只做有用的，就是那些能在国内课堂上发挥功能的核心功能

对于“账号”“协作”等复杂的课堂上用不到的功能则不做，尽可能简单，贴近课堂

使用稳定

核心功能应该保持稳定不崩溃，理论上不应出现卡死、闪退，丢失内容等意外情况，出现这种问题时对老师的教学节奏存在影响

从开发的角度而言，这是应该极力避免的问题

部署简单

项目应该易于部署使用，且在各种设备类型、浏览器中体验统一、良好

基于此需求，我考虑制作一个web网页类的项目，这样在任何系统中的操作逻辑较为统一，且无需占用本地空间，随开随用

于负责的同学/老师而言，可以轻松将本项目部署到内网服务器 / GitHub Pages / Vercel / Cloudflare Pages……任何一个平台都支持，具体的部署方式参见Readme文档

附加功能

我希望在项目中加入一些我使用过的小功能，比如计时器、倒计时、赛博教具等等小功能，老师可以按需选择使用

我希望这一切都保持简单易用，所以…….欢迎向我分享更多的创意，只要适合应用在国内课堂中，我都会尝试去实现

更新及时

我自己就是个大一小登，平时有较多的时间来维护和更新本项目，所以在出现问题时，您可以方便地向我进行反馈

您可以前往GitHub中的Issue区/discussion区中提出，也可以在本站的评论区，或直接向我的邮箱mail@66619.eu.org进行反馈，感谢您的反馈与支持

开发

进行了基本文件的创建和brainstorm以后，开发工程70%由GitHub Agent功能来完成

但你以为让AI开发就万事大吉了？错误的，那怕是使用最新的模型的GitHub Agent请求，都还不能真正做到“理解人类需要什么”。这一点在我这种非常看重细节和使用逻辑的项目中显现的极其明显，往往需要多次提交自己的需求，反复向AI解释自己需要怎样的功能，它才能在反复中慢慢打磨出你想要的样子。所以，无论B站将AI-Agent开发吹到有多天花乱坠，你实际的体验还是会被狠狠地浇一盆冷水

你不仅需要向AI平台交钱（我自己教育版Copilot，一个月有300次高级请求，用不完），而且这种请求往往挺烧钱，还要忍受你寄予厚望的AI给你猛烈一击，想想都觉得恼火。明显能感觉到每次Agent请求所使用的AI模型应该不相同，有的AI善于“偷懒”，只给你实现思路和一部分实现，然后就美其名曰告诉你有风险接下来自己写…..具体是哪家国内的AI就不提了，“聪明”并不是AI让人满意的点（本项目vue3重构的分支就是该AI写的，完全是shit，以后再重构吧）

这里附一个我写的部分提示词，由于我不懂得如何优雅的写提示词，所以只能用我的日常表达方式来向AI解释，有时也难免情绪化，望您轻喷

如果您有兴趣，也可以在PR中查看内容，其中copilot发送的内容中都包含我的初始提示词内容

目前本项目请求了大概100次Agent开发，做到了目前这个样子，我觉得还是挺欣慰和满意的

AI写的特色功能

✨ 特色功能

🎨 多样化绘图工具

多种笔触类型：普通笔、铅笔、圆珠笔、钢笔、毛笔，满足不同书写需求

智能橡皮擦：支持圆形和方形，大小可调（10-50px）

丰富颜色选择：预设8种常用颜色 + 自定义取色器

灵活粗细调节：笔触粗细1-50px可调

📐 专业背景图案

多种教学背景：空白、点阵、方格、田字格、英语四线格、五线谱、坐标系

自定义背景：支持上传图片作为背景，可调节大小和位置

背景样式：8种预设背景颜色 + 自定义颜色，可调节透明度和图案深浅

📄 分页画布模式

分页模式：支持多页管理，适合课堂演示和教学

预设尺寸：A4、A3、B5（横向/竖向），16:9、4:3宽屏
自定义尺寸：可自由设定画布宽高和比例
画布自动居中：确保画布在浏览器窗口正中心，上下左右边距相等

🎯 智能交互体验

选择工具：可选择和操作画布上的笔迹和图片，支持复制和删除

移动画布：拖动工具或按住Shift键拖动画布

智能缩放：Ctrl+滚轮缩放画布，缩放中心跟随鼠标位置

撤销/重做：支持最多50步历史记录（Ctrl+Z / Ctrl+Y）

全屏模式：专注创作，沉浸体验（F11）

⏱️ 计时器功能

正计时模式：支持设置起始时间，从指定时间开始计时

倒计时模式：精确倒计时，适合考试、演讲等场景

颜色自定义：

字体颜色选择：8种预设颜色 + 自定义颜色选择器
背景颜色选择：8种预设颜色 + 自定义颜色选择器
颜色设置应用于计时器显示和全屏模式

提示音系统：

页面加载时预加载4种内置提示音，确保即时播放
4种默认提示音排列成2行2列，选择更直观
支持上传多个自定义音频文件
自定义音频自动保存到本地，刷新后仍可使用
自定义音频支持试听功能

循环播放：支持设置循环播放次数（1-100次）

拖动与全屏：

支持鼠标和触摸拖动定位，移动更流畅不卡顿
网页内全屏显示，字体大小可调（10%-85%屏幕比例）
标题字体大小固定，不受时间字体滑块影响

最简显示模式：

点击"最简"按钮切换到仅显示时间的极简模式
双击时间数字即可恢复完整控制面板，恢复后可正常拖动

多实例支持：可同时创建多个独立计时器

🕐 时间显示功能

时区支持：自动检测并显示用户当前时区的时间和日期

灵活显示：可选择显示日期、时间或两者

多种格式：

时间格式：12小时制/24小时制
日期格式：年-月-日、月-日-年、日-月-年、中文格式

全屏模式：支持单击或双击进入全屏时间显示

自定义样式：字体颜色、背景颜色、透明度可调

⚙️ 个性化设置

界面定制：工具栏大小、属性栏缩放、主题色可调

控制布局：控制按钮位置可选（四个角落），工具栏自动保持在窗口范围内

边缘吸附：拖动面板自动吸附到屏幕边缘，避免画布留痕

背景偏好：自定义属性栏中显示的背景图案

设置分组：可折叠的设置组，默认展开状态，点击即可查看详细选项

多语言支持：

支持中文简体、中文繁体、English、日本語、한국어、Français、Deutsch、Español
自动检测浏览器语言
在设置-通用中可随时切换语言
切换语言后立即生效

💾 数据管理

导出功能：支持导出为PNG/JPEG图片

导出当前页、全部页面或指定页面
文件名自动包含用户当前时区的时间戳
多页导出时自动添加页码后缀（例如：文件名-1, 文件名-2）

自动保存：绘图内容和设置自动保存到本地

多页管理：分页模式下支持多页切换和管理

智能分页按钮：仅1页时显示"+"图标添加页面，多页时显示翻页箭头
指定页面导出支持选择单页或多页

这里面的内容是AI写的功能描述，仅供参考

成果

目前Aboard已经能满足基本的批注和使用需求，我将分部分来介绍本项目实现的功能：

1.工具栏

这里是本项目的核心功能聚集地，和大部分软件一样，其默认出现在底部，但可以被自由拖动，靠边框能实现吸附，能随浏览器窗口底部自己移动（事实上，本项目的框体均具有以上属性，我认为还是很友好的）

工具栏中有最常见的功能：撤销重做、笔、移动画布、橡皮、清空、背景、更多功能和设置

撤销重做~~~~所见即所得，最多支持50步

笔~~~~支持随意画，可选择“笔触类型”（可能在大屏上有区别，我用笔记本写写画画感觉没啥区别qwq），笔的颜色、粗细，也支持了取色器取色

移动~~~~变成小手来移动画布

橡皮~~~~能擦除笔迹，可选择形状和大小

清空~~~~所见即所得，会清空画布的所有笔迹（目前看可以通过撤销来还原，但我仍然不建议尝试…..）

背景~~~~可选择背景颜色，支持取色器取色（可在设置~~背景中调整背景的透明度啥的），支持设置背景图案，我设置了贴合中国课堂的常见背景需求，且背景是支持分页独立配置的！！！选择后可调整密度，便于调整点/线间宽度，也可以自己上传图片作为背景，~~可拖动调节大小~~（该功能有bug，未来会移除，请点击右边的铅笔图标，拖动蓝色框和相关控件来更改位置、大小、方向）

更多~~~~我打算做小功能，目前放了“时间”和“计时”两个小功能，都能独立设置调整，您可以自己探索：）

小功能这块，我觉得我做的挺好的🤣，也花费了很多时间来调试和补充设置相关功能，力求满足所有需求

设置~~~~一些更高级的选项就在设置中啦，您可以根据需求自行调节，让Aboard更高地为您服务