Skip to content

拼豆图纸 (beads-weapp) — 微信小程序

像素画（拼豆）图纸编辑器。在手机上自由创作像素画，导出带有色号标注的拼豆图纸。

概述

微信小程序，核心功能是一个移动端画布编辑器，用户用手指在网格画布上画画，完成后生成带色号标注的拼豆图纸。

技术栈

  • 框架： Taro 4 + React 18
  • 语言： TypeScript
  • 平台： 微信小程序
  • 构建命令： taro build --type weapp
  • CI/CD： GitHub Actions → miniprogram-ci 自动上传

架构决策

决策 方案 理由
跨端框架 Taro 4 保留未来扩展多端可能性
状态管理 React Context + useReducer 小程序场景够用，不引入外部库
画布渲染 微信 Canvas 2D API 原生 canvas 性能好
数据持久化 wx.setStorage 小程序本地存储，无服务器依赖
CI 上微信 miniprogram-ci GitHub Actions 自动编译上传

页面结构

首页（成品列表/图纸库）
  └── 画布编辑器（核心页面）
       └── 图纸详情页

画布编辑器功能

  • 网格画布（30×30 到 104×104）
  • 手势缩放/拖拽
  • 画笔、橡皮、填充、取色、直线、形状、框选
  • 对称模式（左右/上下/四象限/万花筒）
  • 多级撤销/恢复
  • 图纸模式（显示色号 + 定位坐标 + 用量统计）
  • 色板管理（常用色 + 全部色板）
  • 草稿保存/加载
  • 白天/黑夜模式

当前状态

  • ✅ GitHub 仓库已创建：github.com/tuxknight/beads-weapp
  • ✅ Taro + React + TS 项目骨架搭建完成
  • ✅ CI 编译 + 微信自动上传跑通
  • ✅ CLAUDE.md + TASKS.md 文档已编写（画布编辑器 9 阶段开发计划）
  • ⏳ 等待 Fuyuan 提供参考截图后开工实现编辑器

相关链接

  • 仓库：https://github.com/tuxknight/beads-weapp
  • CI：https://github.com/tuxknight/beads-weapp/actions