全球7000种语言,AI能翻译的不到200种——而大多数白板应用,连"打开即用"都做不到。注册、云同步、加载2MB JavaScript,这些成了行业标准动作。一位开发者受够了,决定自己动手。
他的答案叫MindNotes Pro。核心依赖只有三个:react、react-dom、zustand。没有Redux,没有styled-components,没有axios,没有lodash。在这个依赖膨胀的时代,这种克制近乎挑衅。
![]()
技术架构藏在单个文件里。Canvas.tsx约600行代码,直接调用Canvas API,不借助任何绘图库。状态管理交给三个Zustand存储:useDrawingStore管笔画、形状、工具、撤销重做和本地存储持久化;useViewStore负责缩放与平移;useThemeStore处理深色/浅色模式,带系统检测。Zustand体积不到1KB,无需样板代码,订阅直接触发画布重绘。
四个关键决策塑造了这款产品。第一,Canvas API而非SVG。SVG hit testing更简单,但Canvas提供硬件加速的2D绘制和像素级控制,能承载数千笔画而无DOM开销。第二,Zustand取代Redux,单useDrawingStore统管所有绘图状态。第三,零外部CDN——字体、图标、甚至纸张背景的SVG噪点纹理全部打包。这让应用在中国无需VPN即可访问。第四,暖色调羊皮纸设计:#f5f0e8背景配#c47a5a强调色,SVG分形噪点模拟纸张质感,对抗主流的冷蓝灰界面。
功能清单意外完整。6种笔刷:钢笔、荧光笔、铅笔、书法笔、虚线、发光。9个绘图工具:选择、钢笔、橡皮、平移、矩形、圆形、文本、直线、箭头。6种导出格式:PNG、JPG、PDF、SVG、Word、JSON。自动保存到localStorage,50步撤销重做,缩放与小地图导航,深色模式带系统检测,平板和手机触控支持。
技术栈最终定格在React 18、TypeScript 5、Vite 5、Zustand、Canvas API和Tailwind CSS。没有云,没有账号,没有等待。一个空白画布,点击即得。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.