joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs:完成新版本产品和技术架构设计

Browse Source
This commit is contained in:
R524809
2026-03-25 08:50:45 +08:00
parent a34311d35e
commit 3aaf340781
4 changed files with 1772 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/PC-Web端技术预案.md
+147
View File
@@ -0,0 +1,147 @@
# Doodle / 涂鸦丫 - PC Web 端技术预案
> 状态：**远期规划**（当前聚焦小程序，暂不启动 Web 开发）
> 最后更新：2026-03-24
> 配套文档：[技术架构设计文档](./技术架构设计文档.md) | [产品设计文档](./产品设计文档.md)
---
## 一、启动时机判断
### 1.1 当前不急于开发 PC Web 的原因
- 小程序用户群与目标用户（家长）高度重合，微信即触达
- PC Web 需要额外解决支付、登录、SEO 等问题
- 先把小程序做好，积累内容和用户
### 1.2 何时启动 PC Web
满足以下条件中的 **2 项以上** 时考虑启动：
- 小程序 DAU 稳定 > 1000
- 用户反馈中"想在电脑上用"的需求频繁出现
- 内容积累到 100+ 种题型
- 模板引擎已稳定运行，core/ 层与 wx.* 完全解耦
---
## 二、技术选型
```
PC Web 技术栈：
┌────────────────────────────────────┐
│ 框架：Next.js (App Router) │
│ UI：Tailwind CSS + Radix UI │
│ Canvas：HTML5 Canvas 2D │
│ PDF：jsPDF + html2canvas │
│ 状态：Zustand │
│ 部署：Vercel │
│ │
│ 核心复用： │
│ @doodle/core (共享核心层) │
│ └── 模板引擎、生成器、数据模型 │
│ → 直接 import 使用 │
│ │
│ 需新建： │
│ • Web UI 组件 │
│ • 平台适配层 (Web 实现) │
│ • 用户登录（微信扫码/手机号） │
│ • SEO 优化（SSR/SSG 题型页） │
└────────────────────────────────────┘
```
---
## 三、后端 API 层方案
PC Web 需要一个 API 层来访问小程序云开发的数据。三种方案对比：
| 方案 | 说明 | 成本 | 推荐度 |
|------|------|------|--------|
| **A: 云开发 HTTP API** | 微信云开发提供的 HTTP 触发器，Web 直接调用 | 零额外成本 | ⭐⭐⭐⭐⭐ |
| **B: Cloudflare Workers** | 轻量 Serverless 代理层，转发请求到云开发 | 极低（免费额度充裕） | ⭐⭐⭐⭐ |
| **C: Vercel Serverless** | Next.js API Routes 做代理 | 低（Vercel 免费额度） | ⭐⭐⭐ |
| **D: 独立 Node.js 服务** | 自建 Express/Fastify 服务，独立数据库 | 较高（¥50-100/月+） | ⭐⭐ |
**推荐路径**：先用方案 A（零成本），若遇到限制再升级到方案 B。
---
## 四、代码共享策略
### 4.1 Monorepo 结构（未来演进）
```
doodle/
├── packages/
│ └── core/ ← 共享核心（npm 包）
│ ├── src/
│ │ ├── draw/ ← 模板引擎 + 渲染器
│ │ ├── generators/ ← 题目生成器
│ │ ├── models/ ← 数据模型
│ │ └── utils/ ← 工具函数
│ ├── package.json
│ └── tsconfig.json
├── apps/
│ ├── mini/ ← 微信小程序
│ │ ├── miniprogram/
│ │ ├── cloudfunctions/
│ │ └── project.config.json
│ └── web/ ← PC Web
│ ├── src/
│ │ ├── app/ ← Next.js App Router
│ │ ├── components/ ← Web UI 组件
│ │ ├── platform/ ← Web 平台适配层
│ │ └── services/ ← Web 业务服务
│ ├── package.json
│ └── next.config.js
├── pnpm-workspace.yaml
└── package.json
```
### 4.2 当前阶段的准备
当前不需要搭建 Monorepo，只需在小程序项目中做好分层即可：
1. 将 `core/` 作为独立目录组织代码
2. 确保 `core/` 内**不 import 任何 wx.* API**
3. 模板引擎、生成器、数据模型全部放在 `core/` 中
4. 未来迁移时，将 `core/` 提取为独立 npm 包即可
### 4.3 平台适配层映射
| 适配器 | 小程序实现 | Web 实现 |
|--------|-----------|---------|
| CanvasAdapter | `wx.createSelectorQuery` + Canvas 2D | `document.getElementById` + Canvas 2D |
| ImageAdapter | `canvas.createImage()` | `new Image()` |
| StorageAdapter | `wx.setStorageSync` / `wx.getStorageSync` | `localStorage` |
| CloudAdapter | `wx.cloud.callFunction` | HTTP fetch 到云开发 API |
| ShareAdapter | `onShareAppMessage` / `onShareTimeline` | Web Share API / 复制链接 |
| ExportAdapter | `canvasToTempFilePath` → `saveImageToPhotosAlbum` | `canvas.toBlob()` → 下载 / jsPDF |
---
## 五、Web 端特有功能
| 功能 | 说明 |
|------|------|
| **直接下载 PDF** | jsPDF 前端生成，无需保存到相册 |
| **批量下载** | 一次生成多张 → 打包 ZIP 下载 |
| **打印预览** | 浏览器原生 `window.print()` + CSS @media print |
| **SEO** | SSR/SSG 生成题型介绍页，搜索引擎可抓取 |
| **用户登录** | 微信扫码登录 / 手机号 + 验证码 |
| **分享** | 生成题型页面 URL，可直接分享链接 |
---
## 六、开发估算
| 阶段 | 内容 | 预估人时 |
|------|------|---------|
| 环境搭建 | Monorepo + Next.js 项目 + core 包提取 | ~16h |
| 平台适配层 | 5 个适配器的 Web 实现 | ~16h |
| UI 开发 | 首页 + 分类页 + 生成页 + 我的 | ~40h |
| 用户登录 | 微信扫码 + 手机号登录 | ~16h |
| SEO 优化 | SSG 题型页 + sitemap + meta | ~8h |
| 测试与上线 | 联调 + 部署 Vercel | ~8h |
| **总计** | | **~104h（约 3-4 周全职）** |
docs/产品设计文档.md
+197 -77
View File
@@ -1,7 +1,11 @@
# Doodle Mini 小程序 - 产品设计文档 v2.0
# 涂鸦丫 小程序 - 产品设计文档 v3.0
> 定位：3-8 岁早教 A4 纸打印资料小程序
> 版本：v2.0 产品重设计方案
> 品牌名称：**涂鸦丫**（谐音双关：涂鸦 = doodle + 丫 ≈ 鸭，呼应小鸭子 IP 形象）
> 品牌 Slogan：**"涂鸦丫，跟小鸭丫一起画！"**
> 品牌 IP：小鸭丫（一只爱涂鸦的小黄鸭）
> 主题色：**#f7ee47**（明黄色，呼应小鸭子形象）
> 版本：v3.0 产品重设计方案
> 最后更新：2026-03-24
---
@@ -11,17 +15,17 @@
### 1.1 内容层面
| 问题 | 现状 | 影响 |
|------|------|------|
| -------- | ---------------------------------------------- | -------------------------------------------------------- |
| 品类单一 | 仅有数学计算、专注力训练、识字、练字四类 | 缺少英语启蒙、科学认知、艺术创造、生活常识等早教核心板块 |
| 题型趋同 | 数学 26 种题型多为数字计算变体，缺少生活化数学 | 用户容易审美疲劳，低龄段（3-5岁）可用内容少 |
| 缺乏体系 | 题型平铺排列，无年龄分级/难度递进 | 家长无法按孩子年龄/水平选择合适内容 |
| 无趣味化 | 缺少迷宫、涂色卡、手工折纸等高趣味性内容 | 与竞品（kiddoworksheets）差距大 |
| 内容静态 | 所有内容均为代码写死，无法动态扩展 | 新增题型需要发版，运营效率低 |
| 内容静态 | 所有内容均为代码写死，每种题型需独立编写绘制代码 | 新增题型需要发版（1-2 周），无法快速响应热点/节日内容 |
### 1.2 用户体验层面
| 问题 | 现状 | 影响 |
|------|------|------|
| ------------ | -------------------------------- | -------------------------------------- |
| 首页缺吸引力 | 入口卡片列表式排布，无分类筛选 | 题型多时找不到内容，新用户不知从何开始 |
| 无用户体系 | 无登录/收藏/历史记录 | 用户无法追踪使用情况，留存差 |
| 缺少预览图 | 进入题型前看不到最终效果 | 试错成本高 |
@@ -31,11 +35,11 @@
### 1.3 技术层面
| 问题 | 现状 | 影响 |
|------|------|------|
| -------------- | --------------------------------------------- | ---------------------------------------------------------------------- |
| 云函数名不一致 | 代码调用 `robotaxi`，目录名 `doodle` | 可能存在线上风险 |
| 无效代码引用 | `index.js` 引用不存在的 `station/area` 等模块 | 部署可能失败 |
| debug 页有死链 | 指向不存在的 `demoPages/shapePrint` | 功能残缺 |
| 无 PDF 导出 | `createPDF` 云函数仅实验性代码 | 缺少直接生成 PDF 的能力 |
| 无 PDF 导出 | `createPDF` 云函数仅实验性代码 | 非核心问题，PNG 保存到相册更符合手机端用户习惯，PDF 可作为远期增值功能 |
| 渲染方案限制 | 全部 Canvas 渲染，交互受限 | 难以实现复杂交互（如拖拽、填写） |
---
@@ -44,12 +48,12 @@
参考 [kiddoworksheets.com](https://www.kiddoworksheets.com/)，对比如下：
| 维度 | kiddoworksheets | Doodle Mini 现状 | 差距 |
|------|----------------|------------------|------|
| 维度 | kiddoworksheets | 涂鸦丫 现状 | 差距 |
| -------- | --------------------------------------------------------- | ---------------------------------- | -------------------------------------------------------- |
| 内容品类 | 30+ 大类（字母、拼写、涂色、迷宫、折纸、找不同、时钟...） | 4 大类 | 严重不足 |
| 年龄覆盖 | 学前 - 5 年级 | 3-8 岁（但内容未分级） | 缺少分级体系 |
| 题目数量 | 每个品类数十到数百张 | 每种题型动态生成（无限但变化有限） | 模板多样性不够 |
| 下载方式 | 直接 PDF 下载 | 保存 PNG 到相册 | 体验略差 |
| 下载方式 | 直接 PDF 下载 | 保存 PNG 到相册 | PNG 更适合手机端用户（相册易找、可直接分享打印），非劣势 |
| 视觉风格 | 彩色卡通插画 | 简约线条风格 | 视觉吸引力弱 |
| 内容更新 | 持续更新 | 代码写死 | 运营效率差距大 |
| SEO/分享 | 独立网页，搜索引擎友好 | 小程序，依赖微信生态 | 获客渠道不同 |
@@ -81,7 +85,7 @@
### 3.2 新 TabBar 设计
| Tab | 名称 | 说明 |
|-----|------|------|
| --- | ---- | ---------------------------------------------- |
| 1 | 发现 | 首页，分类浏览所有可打印资料，含推荐/热门/最新 |
| 2 | 分龄 | 按年龄（3-4/4-5/5-6/6-7/7-8）筛选适合的内容 |
| 3 | 收藏 | 收藏的题型、已下载的历史记录 |
@@ -96,7 +100,7 @@
> 低开发成本、高用户价值，优先推进
| # | 功能 | 描述 | 开发难度 | 用户价值 |
|---|------|------|---------|---------|
| --- | ---------------- | ----------------------------------------------------------------- | -------- | ---------- |
| 1 | **年龄分级体系** | 为所有题型标注适合年龄段（3-4/4-5/5-6/6-7/7-8），首页增加年龄筛选 | ⭐⭐ | ⭐⭐⭐⭐⭐ |
| 2 | **难度标签** | 每个题型标注难度（入门/基础/进阶/挑战），方便家长选择 | ⭐ | ⭐⭐⭐⭐ |
| 3 | **效果预览图** | 入口卡片展示真实的打印效果缩略图，非 icon 风格 | ⭐⭐ | ⭐⭐⭐⭐ |
@@ -111,7 +115,7 @@
#### 4.1 数学新增题型
| # | 功能 | 描述 | 开发难度 |
|---|------|------|---------|
| --- | ------------ | -------------------------------- | -------- |
| 7 | **时钟练习** | 认识钟表、读时间、画时针分针 | ⭐⭐⭐ |
| 8 | **形状分类** | 按形状/大小/颜色分类，圈出不同类 | ⭐⭐ |
| 9 | **规律填空** | 数字/图形规律，找出下一个 | ⭐⭐ |
@@ -121,7 +125,7 @@
#### 4.2 语文新增题型
| # | 功能 | 描述 | 开发难度 |
|---|------|------|---------|
| --- | ----------------- | ------------------------------------ | -------- |
| 12 | **拼音练习** | 声母/韵母/整体认读音节描红、拼音组合 | ⭐⭐⭐ |
| 13 | **笔画练习** | 基本笔画（横竖撇捺等）描红练习 | ⭐⭐ |
| 14 | **偏旁部首** | 偏旁部首认知、组字练习 | ⭐⭐ |
@@ -131,7 +135,7 @@
#### 4.3 英语启蒙（全新模块）
| # | 功能 | 描述 | 开发难度 |
|---|------|------|---------|
| --- | ------------------ | --------------------------------------- | --------------------- |
| 17 | **字母描红** | A-Z 大小写字母描红练习 | ⭐⭐ |
| 18 | **字母闪卡** | 字母+对应单词+插图的闪卡 | ⭐⭐ |
| 19 | **字母找一找** | 在字母方阵中找出目标字母 | ⭐（复用 numberFind） |
@@ -143,7 +147,7 @@
> 高趣味性内容，显著提升差异化
| # | 功能 | 描述 | 开发难度 |
|---|------|------|---------|
| --- | ---------------- | ------------------------------------------ | -------- |
| 22 | **走迷宫** | 不同难度的迷宫（简单路径/多分支/主题迷宫） | ⭐⭐⭐⭐ |
| 23 | **找不同** | 两张相似图片找出差异点 | ⭐⭐⭐⭐ |
| 24 | **数独入门** | 4×4 / 6×6 简易数独 | ⭐⭐⭐ |
@@ -157,7 +161,7 @@
> 拓展品类边界，吸引更多用户群
| # | 功能 | 描述 | 开发难度 |
|---|------|------|---------|
| --- | ----------------- | ----------------------------------------- | ---------------------- |
| 29 | **涂色卡** | 卡通主题线稿涂色（动物/交通/节日/恐龙等） | ⭐⭐⭐ |
| 30 | **折纸模板** | 可打印的折纸展开图+步骤说明 | ⭐⭐（主要是素材制作） |
| 31 | **字母/数字手工** | 打印→剪切→粘贴的立体字母/数字 | ⭐⭐ |
@@ -170,12 +174,12 @@
> 提升产品专业度和用户粘性
| # | 功能 | 描述 | 开发难度 |
|---|------|------|---------|
| --- | ------------------------ | ----------------------------------------------------------- | -------- |
| 35 | **用户体系** | 微信授权登录 + 用户信息 | ⭐⭐ |
| 36 | **收藏功能** | 收藏喜欢的题型，快速访问 | ⭐⭐ |
| 37 | **下载历史** | 记录每次下载的内容和时间 | ⭐⭐ |
| 38 | **批量生成** | 一次生成多张不同题目的练习纸 | ⭐⭐⭐ |
| 39 | **PDF 导出** | 支持直接生成多页 PDF（需云函数） | ⭐⭐⭐⭐ |
| 39 | **PDF 导出（增值服务）** | 会员专属功能，支持多页 PDF 合并导出（需云函数），非核心路径 | ⭐⭐⭐⭐ |
| 40 | **自定义纸张** | 支持 A4/B5/Letter 等纸张尺寸切换 | ⭐⭐ |
| 41 | **打印套餐** | 按周/月推荐「每日一练」打印计划 | ⭐⭐⭐ |
| 42 | **社区分享** | 用户分享打印效果、使用心得 | ⭐⭐⭐⭐ |
@@ -287,11 +291,11 @@
│ └────────────────────────────┘ │
│ │
│ ┌──────────┐ ┌──────────────┐ │
│ │ 🔄 换一批 │ │ 📥 保存并打印 │ │
│ │ 🔄 换一批 │ │ 📥 保存到相册 │ │
│ └──────────┘ └──────────────┘ │
│ │
│ ┌──────────┐ ┌──────────────┐ │
│ │ 📄 存PDF │ │ 📤 分享好友 │ │
│ │ 📤 分享 │ │ 📄 存PDF(会员)│ │
│ └──────────┘ └──────────────┘ │
│ │
└─────────────────────────────────────┘
@@ -331,27 +335,59 @@
- 入口卡片仅为简单的文字+icon，缺少视觉吸引力
- 配色单一，整体观感不够「儿童友好」
- 缺少品牌感（Logo、IP形象等）
- 小鸭子 IP 形象已有但未贯穿全应用，品牌感不够强
### 6.2 改进方向
### 6.2 品牌体系
#### 品牌命名释义
「**涂鸦丫**」是一个谐音双关的品牌名：
- **涂鸦** = doodle，精准描述产品核心功能（儿童涂鸦 / 练习纸打印）
- **丫** = 可爱语气词，暗示小朋友 / 小丫头；同时谐音「**鸭**」，呼应 IP 形象
- 品牌故事：_涂鸦丫是一只最爱涂鸦的小鸭丫，它相信每个孩子都是天生的小画家。_
#### 品牌色彩
| 色彩 | 色值 | 用途 |
| ------------------ | ------- | -------------------------- |
| 品牌主色（鸭丫黄） | #f7ee47 | 主按钮、品牌标识、强调元素 |
| 主色加深（暖金） | #e6d520 | 按钮按压态、边框强调 |
| 辅助色（暖白） | #fffef0 | 页面背景、卡片底色 |
| 辅助色（浅灰） | #f5f5f5 | 次级背景 |
| 文字主色 | #333333 | 标题、正文 |
| 文字次色 | #999999 | 辅助说明文字 |
#### IP 形象规范
现有 IP「**小鸭丫**」已用于小程序图标，需进一步延伸：
| 场景 | IP 应用 |
| ----------- | ------------------------------------------------------------------------------ |
| 小程序图标 | 小鸭丫正面头像（已有） |
| 启动页/闪屏 | 小鸭丫拿着画笔，配 Slogan |
| 空状态 | 小鸭丫的不同姿态 + 趣味文案（如「鸭丫还没找到收藏呢，去发现好玩的练习纸吧~」） |
| 加载动画 | 小鸭丫走路 / 画画的微动效 |
| 打印页装饰 | 页眉角落小鸭丫 logo，页脚鸭丫鼓励语 |
| 错误页面 | 小鸭丫摊手/挠头，配友好提示文案 |
### 6.3 视觉改进方向
| 维度 | 建议 |
|------|------|
| 主色调 | 采用温暖明亮的渐变色系（橙黄 → 粉紫），传达活力与童趣 |
| 品牌 IP | 设计一个可爱的 IP 形象（如小恐龙/小兔子），贯穿全应用 |
| -------- | ---------------------------------------------------------------------- |
| 主色调 | 以品牌黄 #f7ee47 为核心，搭配暖白 #fffef0 背景，营造温暖明快的儿童氛围 |
| 卡片风格 | 入口卡片使用真实打印效果预览图 + 圆角卡片 + 柔和阴影 |
| 字体 | 标题使用圆体/手写风格字体，正文保持清晰易读 |
| 图标 | 使用统一的手绘风格图标替代 emoji |
| 动效 | 适度加入微动效（卡片进场、按钮反馈、生成加载） |
| 空状态 | IP 形象配合趣味文案（如「还没有收藏哦，去发现好玩的练习纸吧~」） |
| 图标 | 使用统一的手绘风格图标替代 emoji，风格与小鸭丫 IP 一致 |
| 动效 | 适度加入微动效（卡片进场、按钮反馈、小鸭丫加载动画） |
### 6.3 打印页面风格
### 6.4 打印页面风格
| 维度 | 建议 |
|------|------|
| 页眉 | 统一品牌 Logo + 小程序码 + 日期 + 孩子姓名（可选） |
| 页脚 | 鼓励语/小贴士（如「做得真棒！」「今天又进步了！」） |
| 装饰 | 页面边角增加可爱装饰元素（星星、花朵、小动物） |
| ---- | ------------------------------------------------------------------- |
| 页眉 | 小鸭丫 Logo + 「涂鸦丫」品牌字 + 小程序码 + 日期 + 孩子姓名（可选） |
| 页脚 | 小鸭丫鼓励语（如「鸭丫说：做得真棒！」「小鸭丫为你点赞！」） |
| 装饰 | 页面边角增加小鸭丫元素（小脚印、鸭丫剪影、星星等） |
| 排版 | 优化题目间距，确保打印后字体大小适合儿童辨认（≥14pt） |
---
@@ -361,14 +397,79 @@
### 7.1 架构优化
| 改造项 | 现状 | 目标 | 优先级 |
|--------|------|------|--------|
| ---------------- | ----------------------- | ---------------------------------------------- | ------ |
| 内容配置化 | 题型硬编码 | JSON 配置 + 云端下发，新增题型无需发版 | P0 |
| 模板引擎 | 各题型独立 Draw Service | 抽象通用模板引擎，减少重复代码 | P1 |
| 云端渲染 | 本地 Canvas 导出 PNG | 云函数生成 PDF，支持多页/高清 | P2 |
| **模板引擎** | 各题型独立 Draw Service | **抽象通用模板引擎，80% 新内容通过配置上线** | **P0** |
| 客户端渲染优化 | 本地 Canvas 导出 PNG | 优化渲染性能，支持批量生成多张图片保存到相册 | P1 |
| 素材管理 | 素材随代码打包 | CDN + 按需下载，减少包体积 | P1 |
| 数据埋点 | 基础 tracker | 完善用户行为分析（使用频率、下载量、题型偏好） | P1 |
| PDF 导出（增值） | createPDF 实验性代码 | 会员增值功能，云函数合并多页 PNG 为 PDF | P4 |
### 7.2 分包优化
### 7.2 模板引擎（产品视角）
> 详细技术设计见 [技术架构设计文档](./技术架构设计文档.md) 第五章
#### 为什么需要模板引擎？
**现状痛点**：目前每新增一种可打印资料（如一种新题型、一张涂色卡），都需要开发者编写新的前端页面和绘制代码，然后提交微信审核发版。这意味着：
- 新增一种题型需要 1-3 天开发 + 1-3 天审核 = 最快一周上线
- 要达到 150+ 种内容的产品目标，需要写 150+ 套绘制代码，**不可持续**
- 无法快速响应节日/热点内容（如六一儿童节涂色卡、春节手工等）
#### 模板引擎解决什么？
核心思路：**所有可打印资料的排版模式是有限的**，虽然题型有上百种，但归纳后只有 6-8 种排版模式。
```
排版模式 覆盖的题型（举例）
──────────────── ──────────────────────────────────
网格计算型 加减法、乘法、凑十/破十、比大小、填空...
配对连线型 数物连线、连连看、译码连线、点连线...
网格涂色型 找数字涂色、方位涂色、格子仿画...
卡片排列型 涂色卡、闪卡、识字卡、字母卡、贴纸...
描红书写型 练字、拼音描红、字母描红、数字描红...
全幅素材型 整页涂色卡、折纸模板、手工模板...
序列排序型 数字排序、缺失数字、颜色规律...
特殊图形型 时钟练习、形状分类、货币认知...
```
**有了模板引擎后：**
| 场景 | 之前 | 之后 |
|------|------|------|
| 新增「50以内减法」 | 写代码 → 发版 | JSON 配置一条记录 → **即时上线** |
| 新增「恐龙涂色卡」 | 写绘制代码 → 发版 | 上传 SVG 素材 + JSON 配置 → **即时上线** |
| 新增「字母描红」 | 写代码 → 发版 | JSON 配置 + 字母数据 → **即时上线** |
| 新增「迷宫」 | 写迷宫算法 → 发版 | 需写新生成器 → **仍需发版** |
| 六一主题涂色卡 | 来不及开发 | 上传素材 + 配置 → **当天上线** |
#### 对产品运营的影响
模板引擎上线后，产品运营模式从「开发驱动」转变为「运营驱动」：
```
之前：产品经理提需求 → 开发排期 → 编码 → 测试 → 审核 → 上线（1-2周）
之后：
场景 A（已有模板覆盖的新题型/素材）：
运营/产品 → 编写 JSON 配置 + 上传素材 → 云端生效 → 即时上线（<1小时）
场景 B（需要新排版模式的题型）：
产品提需求 → 开发新 TemplateRenderer → 发版（1-2周）
之后该模式下的新题型走场景 A
```
#### 内容运营节奏建议
| 运营方式 | 频率 | 说明 |
|---------|------|------|
| 常规上新 | 每周 2-3 种 | 通过 JSON 配置新增题型变体或素材型内容 |
| 主题上新 | 每月 1 次 | 节日/季节主题内容包（涂色卡、手工模板等） |
| 热点响应 | 随时 | 追节日/热点快速上线应景内容 |
| 版本迭代 | 每 2-4 周 | 新排版模板、新生成算法、UI 改进等需发版内容 |
### 7.3 分包优化
```
当前分包结构： 建议优化后：
@@ -384,28 +485,40 @@
└── craftPages (创意手工)
```
### 7.3 数据模型扩展
### 7.4 数据模型扩展
```typescript
interface WorksheetType {
interface WorksheetConfig {
id: string;
page: string;
title: string;
desc: string;
// 新增字段
// ─── 分类与筛选 ───
category: 'math' | 'chinese' | 'english' | 'puzzle' | 'craft';
subcategory: string;
ageRange: [number, number]; // [minAge, maxAge]
difficulty: 1 | 2 | 3 | 4; // 入门/基础/进阶/挑战
previewImage: string; // 真实效果预览图
downloadCount: number; // 下载次数（可云端维护）
tags: string[]; // 搜索标签
isNew: boolean; // 新上线标记
sortOrder: number; // 排序权重
ageRange: [number, number];
difficulty: 1 | 2 | 3 | 4;
previewImage: string;
tags: string[];
isNew: boolean;
sortOrder: number;
downloadCount: number;
status: 'active' | 'draft' | 'hidden';
// ─── 模板引擎配置（核心新增）───
template: TemplateType; // 使用哪个排版模板
generator: GeneratorType; // 使用哪个数据生成器
generatorConfig: Record<string, any>;// 生成器参数
layoutConfig: LayoutConfig; // 排版参数
userConfigurable?: UserConfigField[];// 用户可调整的参数（渲染到设置面板）
// ─── 兼容旧架构 ───
legacyPage?: string; // 旧页面路径（迁移过渡期使用）
}
```
> 完整的类型定义和 JSON 配置示例见 [技术架构设计文档](./技术架构设计文档.md) 第五章
---
## 八、实施路线图
@@ -414,39 +527,46 @@ interface WorksheetType {
Phase 1（第 1-2 周） ← 夯实基础
├── 修复技术问题（云函数/死链）
├── 增加年龄分级和难度标签
├── 首页重设计（分类导航 + 搜索）
├── 效果预览图优化
├── 新增打印指南页
└── 效果预览图优化
└── 代码分层重构（建立 core/ 和 platform/ 目录）
Phase 2（第 3-4 周） ← 内容扩充
├── 新增：控笔练习
├── 新增：时钟练习
├── 新增：拼音练习
├── 新增：字母描红
├── 新增：字母闪卡
└── 新增：笔画练习
Phase 2（第 3-5 周） ← 🔑 模板引擎 + 首页重构
├── 【核心】开发模板引擎
│ ├── 实现 3 种高优先级模板渲染器
│ │ ├── grid-exercise（网格计算型）
│ │ ├── full-page-asset（全幅素材型）
│ │ └── tracing-writing（描红书写型）
│ ├── 实现通用 worksheet 页面
│ └── 试点迁移 2-3 种现有题型验证
├── 首页重设计（分类导航 + 搜索）
├── 内容配置化（JSON + 云端下发）
└── 云数据库建表（含模板引擎字段）
Phase 3（第 5-6 周） ← 趣味内容
├── 新增：走迷宫
├── 新增：涂色卡（引入线稿素材）
├── 新增：折纸模板
├── 新增：找不同
├── 新增：控笔练习升级版
└── 新增：记忆力翻翻卡
Phase 3（第 6-8 周） ← 内容爆发（模板引擎红利期）
├── 补全剩余 5 种模板渲染器
├── 存量 40+ 题型批量迁移到模板引擎
├── 通过 JSON 配置快速上线新题型：
│ ├── 数学：时钟练习、形状分类
│ ├── 语文：拼音练习、笔画练习
│ ├── 英语：字母描红、字母闪卡（JSON 配置即可）
│ ├── 益智：控笔练习
│ └── 创意：涂色卡、折纸（上传素材即可）
└── 需新生成器的题型：走迷宫、找不同
Phase 4（第 7-8 周） ← 体验升级
Phase 4（第 9-10 周） ← 体验升级
├── 用户体系（登录/收藏/历史）
├── PDF 导出功能
├── 批量生成
├── 批量生成图片（多张保存到相册）
├── 每日打印计划
└── 数据统计与学习报告
Phase 5（持续迭代） ← 生态建设
├── 更多主题手工内容
├── 节日/季节限定内容
Phase 5（持续运营迭代） ← 运营驱动增长
├── 每周通过 JSON 配置上新 2-3 种内容（无需发版）
├── 节日/季节主题内容包（涂色卡、手工模板等）
├── PDF 导出（会员增值功能）
├── 社区分享
├── 内容创作者入驻
└── 会员体系（免费内容 + 高级内容）
└── 会员体系（免费 + 高级内容）
```
---
@@ -454,9 +574,9 @@ Phase 5（持续迭代） ← 生态建设
## 九、商业化思路
| 模式 | 说明 |
|------|------|
| --------------- | ------------------------------------------------------- |
| **免费 + 广告** | 基础内容免费，展示原生广告（现有模式） |
| **会员订阅** | 月/年会员，解锁高级内容、去广告、批量导出 PDF |
| **会员订阅** | 月/年会员，解锁高级内容、去广告、PDF 多页导出、批量生成 |
| **内容付费** | 特定高级内容包（如「幼升小全套」「暑假特训」）单独购买 |
| **打印服务** | 接入云打印平台，用户一键下单，直接邮寄打印成品 |
@@ -465,7 +585,7 @@ Phase 5（持续迭代） ← 生态建设
## 十、关键指标（KPI）
| 指标 | 当前预估 | Phase 2 目标 | 长期目标 |
|------|---------|-------------|---------|
| ------------ | -------- | ------------ | --------- |
| 内容品类 | 4 类 | 8 类 | 15+ 类 |
| 可打印题型 | 41 种 | 60+ 种 | 150+ 种 |
| 日均使用 UV | - | 500 | 5,000 |
@@ -478,8 +598,8 @@ Phase 5（持续迭代） ← 生态建设
## 附录 A：竞品功能对照表
| 功能 | kiddoworksheets | Doodle Mini 现有 | Doodle Mini v2.0 规划 |
|------|----------------|-----------------|---------------------|
| 功能 | kiddoworksheets | 涂鸦丫 现有 | 涂鸦丫 v3.0 规划 |
| -------- | --------------- | ----------------- | -------------------- |
| 字母描红 | ✅ | ❌ | ✅ P1 |
| 草书练习 | ✅ | ❌ | ❌（非目标用户需求） |
| 缺失字母 | ✅ | ❌ | ✅ P1（字母找一找） |
docs/技术架构设计文档.md
+768 -238
View File
File diff suppressed because it is too large Load Diff
docs/素材资源获取方案.md
+449
View File
@@ -0,0 +1,449 @@
# 涂鸦丫 - 素材资源获取方案
> 解决涂色卡、手工模板等非程序化内容的素材生产问题
> 最后更新：2026-03-24
---
## 一、问题背景
涂鸦丫的内容分为两大类：
| 类型 | 示例 | 生产方式 | 现状 |
| -------------- | ---------------------------- | ---------------------- | --------- |
| **算法生成型** | 数学题、专注力训练、字母练习 | 代码随机生成，无限变化 | ✅ 已具备 |
| **素材模板型** | 涂色卡、折纸、手工、贴纸 | 需要人工绘制或外部素材 | ❌ 缺失 |
素材模板型内容（如圣诞主题涂色卡、动物线稿等）不能用代码程序化生成，传统方式依赖设计师手工绘制，产出效率低、成本高。本文档梳理可行的替代方案，实现素材的低成本批量生产。
---
## 二、方案总览
```
┌──────────────────────────────────────────────────────────────────┐
│ 素材获取策略 │
│ │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌──────────────┐ │
│ │ 方案 1 │ │ 方案 2 │ │ 方案 3 │ │ 方案 4 │ │
│ │ AI 生成线稿 │ │ 开源素材 │ │ 图片转线稿 │ │ 半程序化生成 │ │
│ │ ⭐⭐⭐⭐⭐ │ │ ⭐⭐⭐⭐ │ │ ⭐⭐⭐ │ │ ⭐⭐⭐⭐ │ │
│ │ 性价比最高 │ │ 零成本起步 │ │ 批量转化 │ │ 代码+素材混合 │ │
│ └────────────┘ └────────────┘ └────────────┘ └──────────────┘ │
│ │
│ ┌────────────┐ │
│ │ 方案 5 │ │
│ │ 社区共创 │ │
│ │ ⭐⭐ │ │
│ │ 远期生态 │ │
│ └────────────┘ │
└──────────────────────────────────────────────────────────────────┘
```
---
## 三、方案详解
### 3.1 AI 生成线稿（推荐，性价比最高）
AI 图像生成工具已经能高质量地生成涂色卡线稿，是目前最推荐的方案。
#### 可用工具
| 工具 | 特点 | 成本 | 推荐度 |
| ------------------------------- | --------------------------------- | ------------ | ---------- |
| Midjourney | 线稿质量最好，风格一致性强 | ~$10/月 | ⭐⭐⭐⭐⭐ |
| Stable Diffusion (本地/ComfyUI) | 免费，可批量，可训练专属风格 LoRA | 需要 GPU | ⭐⭐⭐⭐⭐ |
| DALL-E 3 (ChatGPT/API) | 使用方便，质量不错 | API 按量计费 | ⭐⭐⭐⭐ |
| 可灵 / 通义万相 | 国内工具，中文 prompt 友好 | 有免费额度 | ⭐⭐⭐ |
#### Prompt 模板
**通用涂色卡：**
```
coloring page for kids, cute [主题词], simple black outline,
no shading, no color, white background, clean lines,
thick outlines suitable for children, cartoon style,
A4 print ready --v 6 --style raw
```
**主题示例：**
```
# 动物系列
coloring page for kids, cute baby elephant playing with water,
simple black outline, no shading, no color, white background,
clean lines, thick outlines, cartoon style --v 6 --style raw
# 节日系列
coloring page for kids, Christmas tree with presents and star,
simple black outline, no shading, no color, white background,
clean lines, thick outlines, cartoon style --v 6 --style raw
# 交通工具系列
coloring page for kids, friendly cartoon fire truck,
simple black outline, no shading, no color, white background,
clean lines, thick outlines, cartoon style --v 6 --style raw
```
#### 批量生产流程
```
┌──────────────────────────────────────────────────────────────┐
│ AI 线稿生产流水线 │
│ │
│ ① 规划主题清单 │
│ 动物(20张) / 恐龙(15张) / 交通(15张) / 节日(20张) / │
│ 食物(10张) / 海洋(15张) / 太空(10张) / ... │
│ │
│ ② 编写批量 Prompt │
│ 为每个主题生成 3-5 个 prompt 变体 │
│ 每个 prompt 生成 4 张 → 筛选最佳 1-2 张 │
│ │
│ ③ AI 生成 │
│ 使用 Midjourney 或 ComfyUI 批量生成 │
│ 预期淘汰率：30-50% │
│ │
│ ④ 人工筛选 │
│ 标准：线条清晰 / 无断线 / 适合儿童 / 区域封闭可涂色 │
│ │
│ ⑤ 自动后处理（脚本） │
│ → 二值化（去灰色调，纯黑白） │
│ → 去背景噪点 │
│ → 统一尺寸（A4 比例 595×842） │
│ → 调整线条粗细（适合打印） │
│ → 可选：PNG → SVG 矢量化（Potrace） │
│ │
│ ⑥ 质量检查 + 入库 │
│ 标注元数据（主题/标签/适合年龄/难度） │
│ 上传云存储 │
│ │
│ 产能预估：1 人 1 天 → 30-50 张成品线稿 │
└──────────────────────────────────────────────────────────────┘
```
#### 后处理脚本参考
```python
# tools/process_coloring_page.py
from PIL import Image, ImageFilter
import cv2
import numpy as np
def process_coloring_page(input_path, output_path):
"""将 AI 生成的线稿处理为适合打印的涂色卡"""
img = cv2.imread(input_path, cv2.IMREAD_GRAYSCALE)
# 二值化：去除灰色调，保留纯黑线条
_, binary = cv2.threshold(img, 200, 255, cv2.THRESH_BINARY)
# 去噪：移除小噪点
kernel = np.ones((2, 2), np.uint8)
cleaned = cv2.morphologyEx(binary, cv2.MORPH_CLOSE, kernel)
# 统一尺寸（A4 at 150 DPI = 1240×1754）
resized = cv2.resize(cleaned, (1240, 1754), interpolation=cv2.INTER_AREA)
cv2.imwrite(output_path, resized)
def batch_process(input_dir, output_dir):
"""批量处理目录下所有线稿"""
import os
os.makedirs(output_dir, exist_ok=True)
for filename in os.listdir(input_dir):
if filename.lower().endswith(('.png', '.jpg', '.jpeg')):
process_coloring_page(
os.path.join(input_dir, filename),
os.path.join(output_dir, filename.rsplit('.', 1)[0] + '.png')
)
```
#### Stable Diffusion 专属风格训练（进阶）
如果需要统一的品牌风格，可以训练 LoRA 模型：
```
1. 收集 20-30 张「涂鸦丫」风格的线稿样本
2. 使用 kohya_ss 训练 LoRA（约 1-2 小时 / 单 GPU）
3. 生成时加载 LoRA → 所有输出风格统一
4. 好处：所有涂色卡风格一致，强化品牌辨识度
```
---
### 3.2 开源 / 免费商用素材
大量免费可商用的线稿资源已经存在，可直接筛选使用。
#### 推荐素材来源
| 来源 | 数量 | 授权协议 | 适合度 | 备注 |
| -------------------------------------- | --------- | --------------------------- | -------- | ------------------------ |
| [OpenClipart](https://openclipart.org) | 10万+ SVG | CC0（完全免费商用） | ⭐⭐⭐⭐ | 质量参差，需仔细筛选 |
| [SVG Repo](https://www.svgrepo.com) | 50万+ SVG | 多为 CC0/MIT | ⭐⭐⭐ | 以图标为主，部分可做涂色 |
| [Pixabay](https://pixabay.com) 矢量类 | 大量 | Pixabay License（免费商用） | ⭐⭐⭐ | 搜索 "coloring page" |
| [Freepik](https://www.freepik.com) | 大量 | 免费需署名 / 付费不需要 | ⭐⭐⭐⭐ | 质量较高 |
| [Vecteezy](https://www.vecteezy.com) | 大量 | 免费需署名 | ⭐⭐⭐ | 有专门的涂色页分类 |
| [unDraw](https://undraw.co) | 500+ SVG | MIT | ⭐⭐ | 扁平风格插画，需转线稿 |
#### 使用注意事项
```
⚠️ 授权合规清单：
├── CC0 → 完全免费，可商用，无需署名 ✅ 最安全
├── CC BY → 可商用，需要署名（在"关于我们"页注明）
├── CC BY-SA → 可商用，需署名 + 衍生作品同协议
├── CC BY-NC → 不可商用 ❌ 不能用
├── Pixabay License → 可商用，无需署名 ✅
└── 其他 → 需逐一确认，记录授权来源
建议：
1. 优先使用 CC0 素材，避免法律风险
2. 建立素材来源登记表，记录每个素材的出处和授权
3. 使用付费素材时保留购买凭证
```
---
### 3.3 图片 → 线稿转换
将现有的彩色图片自动转换为涂色卡线稿。
#### 工具方案对比
| 方式 | 工具 | 效果 | 适合场景 |
| ----------- | ----------------------------- | --------------- | ---------------------- |
| AI 风格转换 | SD ControlNet (Canny/Lineart) | ⭐⭐⭐⭐⭐ 最好 | 把卡通插画转为干净线稿 |
| 传统算法 | OpenCV Canny 边缘检测 | ⭐⭐⭐ 一般 | 快速批量处理，需调参 |
| 在线工具 | remove.bg + 线稿转换 | ⭐⭐ 有限 | 零代码快速尝试 |
#### ControlNet 线稿提取流程（推荐）
```
输入：彩色卡通图片
↓
Stable Diffusion + ControlNet
├── 预处理器：lineart_anime 或 canny
├── Prompt：clean line art, black outline, white background,
│ no shading, coloring page style
└── 输出：干净的黑白线稿
↓
后处理：二值化 → 去噪 → 输出
```
#### OpenCV 批量转换脚本
```python
# tools/photo_to_lineart.py
import cv2
import numpy as np
def photo_to_lineart(input_path, output_path, low=50, high=150, line_width=2):
"""将彩色图片转换为线稿风格"""
img = cv2.imread(input_path)
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
blurred = cv2.GaussianBlur(gray, (5, 5), 0)
# Canny 边缘检测
edges = cv2.Canny(blurred, low, high)
# 反转颜色（黑线白底）
inverted = cv2.bitwise_not(edges)
# 加粗线条
kernel = np.ones((line_width, line_width), np.uint8)
thick_lines = cv2.erode(inverted, kernel, iterations=1)
cv2.imwrite(output_path, thick_lines)
```
**适合场景：** 已购买或已有大量卡通插画素材，需要批量转为涂色卡。
---
### 3.4 半程序化生成（代码 + 素材混合）
部分涂色卡可以用代码生成结构框架，再填充少量素材元素。
#### 可程序化的涂色内容
| 类型 | 程序化程度 | 实现方式 | 需要素材 |
| ---------------------- | ---------- | -------------------------------- | -------------- |
| **曼陀罗涂色** | 100% | 对称几何图案，数学公式生成 | 无 |
| **几何花纹涂色** | 100% | 重复的几何形状拼接 | 无 |
| **字母/数字涂色** | 90% | 大号字体轮廓 + 装饰纹理 | 少量纹理 |
| **方格涂色（像素画）** | 100% | 按编号涂色的方格网，数字标注颜色 | 无 |
| **对称涂色** | 80% | 生成半边图案，另一半留空让孩子画 | 半边素材 |
| **场景涂色** | 50% | 代码生成天空/地面/分区框架 | 场景元素素材 |
| **节日边框涂色** | 60% | 代码生成装饰边框 | 中心主题图素材 |
#### 曼陀罗涂色卡（100% 代码生成示例）
```
特点：
├── 纯数学生成，零素材成本
├── 无限变化（随机种子）
├── 大人小孩都喜欢
├── 可设置复杂度（简单→复杂）
└── 打印效果非常好
实现思路：
├── 圆形对称：围绕圆心旋转重复图案
├── 基本元素：圆弧、花瓣、水滴形、菱形、锯齿
├── 层级嵌套：内圈简单 → 外圈复杂
└── Canvas 绘制，与现有渲染架构完全兼容
```
#### 按编号涂色（Color by Number，100% 代码生成）
```
特点：
├── 在方格中标注数字，每个数字对应一种颜色
├── 涂完后呈现一幅像素画
├── 纯代码生成（方格 + 数字标注）
├── 可从任意简单图案生成（如爱心、星星、动物剪影）
└── 兼具涂色乐趣和数字认知训练
```
---
### 3.5 社区共创 / UGC（远期）
当用户量达到一定规模后，开放用户投稿。
#### 运作模式
```
┌──────────────────────────────────────────────────────────┐
│ 社区共创流程 │
│ │
│ 投稿者（家长/老师/绘画爱好者） │
│ ↓ │
│ 上传线稿（照片/扫描件/数字画） │
│ ↓ │
│ 平台审核（线条清晰度/内容适宜性/版权确认） │
│ ↓ │
│ 自动后处理（二值化/统一尺寸/质量增强） │
│ ↓ │
│ 入库上线 → 标注作者署名 │
│ ↓ │
│ 激励机制： │
│ ├── 展示署名（「由 XX 妈妈投稿」） │
│ ├── 积分奖励（可兑换会员时长） │
│ └── 热门投稿者榜单 │
└──────────────────────────────────────────────────────────┘
```
**启动条件：** DAU > 2000，有稳定的用户社区基础。
---
## 四、推荐执行策略
### 第一阶段：立即可做（0 成本起步）
```
1. 曼陀罗涂色卡 → 纯代码生成，与现有架构兼容
开发成本：⭐⭐ | 内容产出：无限
2. 按编号涂色 → 纯代码生成
开发成本：⭐⭐ | 内容产出：无限
3. 开源 CC0 素材 → 从 OpenClipart 筛选 + 后处理
人力成本：1-2 天筛选出 50 张 | 费用：¥0
```
### 第二阶段：批量生产（小额投入）
```
4. AI 生成线稿 → Midjourney 或 SD 批量生成
费用：~$10/月 | 产出：每天 30-50 张
5. 建立后处理脚本 → 自动化流水线
开发成本：1-2 天 | 长期复用
6. 按主题系列化：
├── 动物系列（20 张）
├── 恐龙系列（15 张）
├── 交通工具系列（15 张）
├── 海洋生物系列（15 张）
├── 春节系列（10 张）
├── 圣诞系列（10 张）
└── ...
```
### 第三阶段：品质升级
```
7. SD LoRA 训练 → 统一「涂鸦丫」品牌风格
8. ControlNet 图转线稿 → 拓展素材来源
9. 半程序化模板 → 代码框架 + AI 素材填充
```
### 第四阶段：生态建设
```
10. 社区投稿机制
11. 素材内容管理后台
12. 节日/季节限定内容运营
```
---
## 五、素材管理规范
### 5.1 文件命名
```
{类别}_{主题}_{编号}.{格式}
示例：
coloring_animal_elephant_001.png
coloring_dinosaur_trex_003.svg
coloring_holiday_christmas_tree_002.png
mandala_geometric_flower_012.png
```
### 5.2 元数据标注
每个素材入库时需标注：
```typescript
interface AssetMeta {
id: string;
filename: string;
category: 'coloring' | 'origami' | 'craft' | 'sticker';
theme: string; // 主题（animal/dinosaur/holiday/...）
tags: string[]; // 搜索标签
ageRange: [number, number];
difficulty: 1 | 2 | 3; // 线条密度/复杂度
source: 'ai_generated' | 'open_source' | 'purchased' | 'ugc';
license: 'CC0' | 'CC-BY' | 'purchased' | 'original';
author?: string; // 素材作者/来源
createdAt: string;
}
```
### 5.3 云存储目录
```
cloud://doodle-xxx/assets/
├── coloring/ ← 涂色卡线稿
│ ├── animals/
│ ├── dinosaurs/
│ ├── vehicles/
│ ├── holidays/
│ │ ├── christmas/
│ │ ├── chinese_new_year/
│ │ └── mid_autumn/
│ ├── ocean/
│ ├── space/
│ ├── food/
│ └── mandala/ ← 曼陀罗（代码生成的也可存缓存）
├── origami/ ← 折纸展开图
├── craft/ ← 手工模板
├── stickers/ ← 贴纸素材
└── meta/
└── assets.json ← 素材元数据索引
```