拼豆制图小程序

拼豆制图君 – Bead Pattern Creator

基于 Taro + React 的微信小程序，用于创建和管理拼豆（Perler Beads / Fuse Beads）图案。

技术栈

前端: Taro 3.x + React 18 + TypeScript + SCSS

后端: 微信云开发 (WeChat Cloud Base)

设计: 750px 设计稿，暖色调配色

项目结构

bead-artist/

├── src/

│ ├── pages/ # 21 个页面（主包 + 分包）

│ ├── components/ # 核心组件（BeadGrid、CustomTabBar等）

│ ├── utils/ # 工具函数（调色板、棋盘、图案计算）

│ ├── services/ # API 服务层（云函数调用）

│ ├── types/ # TypeScript 类型定义

│ ├── data/ # 内置模板和合集数据

│ ├── app.config.ts # 小程序配置

│ ├── app.tsx # 应用入口

│ └── app.scss # 全局样式

├── cloud/

│ ├── functions/ # 29 个云函数

│ └── database/ # 数据库初始化脚本

├── config/ # Taro 编译配置

└── assets/ # 图标、缩略图等静态资源

核心功能

拼豆网格编辑器：7 种工具、对称绘制、撤销/重做

模板广场：29 个内置模板 + 云端模板

作品管理：保存、编辑、分享作品

颜色库存：管理拼豆材料库存

引导模式：逐步完成图案

3D 预览：3D 效果预览

导出：图片导出、色号清单、材料清单

开始开发

npm install -g @tarojs/cli

npm install

npm run dev:weapp

云函数部署

右键 cloud/functions 目录 -> 上传并部署所有云函数

数据库

在云开发控制台创建集合后，运行 cloud/database/init/init.js 初始化数据。当前初始化脚本会创建 templates、works、users、collections、work_collections、inventory、production_runs、submissions、favorites、config、analytics、admin_config、refine_stats 等集合

开源地址：https://gitee.com/j326598/bead-artist