doodle-mini/docs/生成方案/认识钟表设计方案.md

认识钟表 — 预览、出题与绘制设计

配套文档：产品设计文档 | 技术架构设计文档
版本：v1.0
最后更新：2026-06-25

---

一、目标与范围

为幼儿园中班至小学一年级（约 4–7 岁）提供 「看模拟钟表，填写数字时间」 的可打印练习纸。

• 每页 4 行 × 3 列，共 12 题
• 每组：上方模拟钟表 + 下方带冒号的数字填写框
• 小程序内预览、换题、下载打印
• 排版归类为技术架构文档 模式 H：时钟/特殊图形型

实现路径：独立绘制页 mathPages/clockReading/，不并入 mathDraw 聚合页（时钟绘制逻辑特殊，独立维护更清晰）。

---

二、页面结构

mathPages/clockReading/
├── clockReading.ts
├── clockReading.wxml
├── clockReading.less
├── clockReading.json
├── clockReading.config.ts
├── generators/
│   └── clock-generator.ts      # 纯数据出题
└── draw/
    ├── clockReadingDraw.ts     # 整页编排
    └── drawAnalogClock.ts      # 模拟钟表（可复用）

交互区（预览卡片下方）

区域	说明
预览卡片	Canvas 实时预览 A4 效果，支持换一换
时刻类型 chips	随机（默认）/ 整点 / 半点 / 刻钟
底部操作	分享、下载打印（复用 pageMixin）

---

三、练习纸版面

3.1 网格布局

┌──────────────────────────────────────────┐
│  [统一页眉] 认识钟表                      │
│  姓名:___  日期:___  得分:___             │
├──────────────────────────────────────────┤
│   [钟1]      [钟2]      [钟3]            │
│   [__:__]    [__:__]    [__:__]          │
│   [钟4]      [钟5]      [钟6]            │
│   ...                                    │
│              （4 行 × 3 列 = 12 题）      │
└──────────────────────────────────────────┘

3.2 单题单元

1. 模拟钟表：绿色外圈、1–12 数字、红色时针、黑色分针
2. 填写框：绿色圆角描边，中间固定冒号 :，左右留白供手写

3.3 A4 尺寸参数（逻辑像素 595×842）

参数	值
内容区起始 Y	页眉后 ~110px
左右边距	28px
行数 / 列数	4 / 3
钟表半径	~58px
钟表与填写框间距	10px
填写框	宽 88px，高 30px，圆角 6px
行高	~168px

---

四、钟表视觉规范

元素	颜色	色值
外圈	绿色	#3D9E47
刻度 / 数字	黑色	#333333
时针	红色	#E53935
分针 / 中心点	黑色	#333333
填写框描边	绿色	#3D9E47
冒号	黑色	#333333

指针角度（12 点方向为 0°，顺时针）：

const minuteAngle = minute * 6;
const hourAngle = (hour % 12) * 30 + minute * 0.5;
// Canvas 绘制时减去 90° 偏移（0° 在 3 点方向）

---

五、时刻类型

模式 ID	显示名称	分针位置	示例	难度
random	随机	0–59 分均可	如 4:07、11:23	★★
whole-hour	整点	12 点（0 分）	3:00, 9:00	★
half-hour	半点	6 点（30 分）	6:30, 10:30	★★
quarter-hour	刻钟	3 或 9 点（15/45 分）	2:15, 7:45	★★★

命名说明：「刻钟」对应传统「一刻」「三刻」，比「一刻时」更符合小学钟表教学用语，且与「整点」「半点」形成清晰三元组。

随机模式：分钟在 0–59 之间均匀随机，不限制为整点/半点/刻钟。

---

六、出题规则（clock-generator.ts）

interface ClockProblem {
  hour: number;    // 1–12
  minute: number;  // 随机模式 0–59；其他模式见时刻类型表
}

interface ClockReadingData {
  problems: ClockProblem[];  // 固定 12 个
  timeMode: ClockReadingTimeMode;
}

1. 每页固定 12 题
2. 同一页内 (hour, minute) 不重复
3. 小时 1–12 均匀随机
4. 按所选时刻类型约束 minute
5. 纯函数输出 JSON，不依赖 Canvas

---

七、绘制服务拆分

clockReadingDraw.draw(data)
  ├── prepareDraw() / drawHeaderAndDivider({ title: '认识钟表' })
  └── drawGrid(problems)
        └── for each:
              ├── drawAnalogClock(cx, cy, radius, hour, minute)
              └── drawTimeInputBox(x, y, w, h)

drawAnalogClock.ts 独立封装，便于后续「画指针」题型复用。

---

八、配置与注册

• Worksheet ID：clock-reading
• 分类：math / clock-reading
• 路径：/mathPages/clockReading/clockReading?id=clock-reading
• 注册：app.json 分包、config/worksheets/clockReading.ts、category.data.ts

---

九、验收标准

• 预览区 4×3 共 12 组「钟表 + 填写框」
• 绿圈、红时针、黑分针、1–12 数字
• 填写框中间有冒号
• 默认随机；切换整点/半点/刻钟后分针位置正确
• 换一换生成新题且不重复
• A4 下载打印清晰
• 分享、收藏、打印解锁链路正常

---

十、后续演进（非 MVP）

1. 定制页眉（日期/姓名/用时 + 装饰边框，更贴近教辅纸）
2. 对答案页 / 画指针题型
3. 5 分钟间隔、逐分钟进阶模式
4. AI 出题 tool：generate_clock_reading({ timeMode, count: 12 })