14 KiB
分龄页内容管理方案
一、背景与目标
分龄页(pages/age/age)按年龄段展示学习内容,目前数据写死在 age.ts 内部 Mock。页面内容可拆分为四个部分,变更频率各不相同:
| 部分 | 名称 | 变更频率 | 数据来源 |
|---|---|---|---|
| 第一部分 | 年龄段设置 | 几乎不变 | 写死在 age.config.ts |
| 第二部分 | 能力目标 | 低频变更 | AI Skill 生成 → 写入 age.config.ts |
| 第三部分 | 4 周推荐学习路线 | 随 worksheet 增加而更新 | AI Skill 生成 → 写入 age.config.ts |
| 第四部分 | 为你推荐 | 动态 | 运行时调用云函数生成:同年龄段 downloads Top3 + likes Top3 |
目标:
- 将分龄页配置抽取到独立的
age.config.ts中,分离静态配置与动态数据 - 通过 AI Skill(Cursor 本地技能),结合最新 worksheet 数据,以早教专家视角自动生成第二部分(能力目标)和第三部分(学习路线)
- 第四部分「为你推荐」在运行时通过云函数生成:同年龄段 downloads Top3 + likes Top3
二、页面四部分详解
2.1 第一部分:年龄段设置(静态)
年龄段划分几乎不变,直接写死在配置中。
// miniprogram/pages/age/age.config.ts
export const AGE_TAB_SUB: Record<AgeBandKey, string> = {
'3-4': '启蒙认知',
'4-5': '基础练习',
'5-6': '能力提升',
'6-7': '幼小衔接',
'7-8': '知识拓展',
};
数据来源:core/data/difficulty.ts 中的 AGE_BANDS 定义了 5 个年龄段 3-4 | 4-5 | 5-6 | 6-7 | 7-8。
2.2 第二部分:能力目标(AI 生成,低频更新)
每个年龄段 3 个能力维度(数感、书写、思维),描述该年龄段应达到的核心能力。
type AbilityItem = {
icon: string; // emoji 图标
title: string; // 能力维度名称
desc: string; // 能力描述
};
// age.config.ts 中的结构
export const AGE_ABILITIES: Record<AgeBandKey, AbilityItem[]> = {
'3-4': [
{ icon: '🔢', title: '数感', desc: '认读 1-5、点数对应' },
{ icon: '✏️', title: '书写', desc: '涂鸦线条、简单描红' },
{ icon: '🧩', title: '思维', desc: '找相同、简单配对' },
],
// ... 其他年龄段
};
更新方式: 运行 AI Skill generate-age-abilities,基于当前所有 worksheet 内容,以早教专家视角重新生成各年龄段的能力目标,并更新 age.config.ts。
2.3 第三部分:4 周推荐学习路线(AI 生成,中频更新)
每个年龄段 4 周学习计划,每周一个主题,包含 3 个推荐练习。练习需关联到实际存在的 worksheet。
type WeekExercise = {
_id: string; // 云 worksheets._id,与 page-config category.items[].id 一致
title: string; // worksheet 标题
subtitle: string; // 副标题(列表展示)
path: string; // 小程序跳转路径,可含 query;点击后 navigateTo / switchTab
};
type WeekPlan = {
week: number; // 第几周 1-4
theme: string; // 周主题
exercises: WeekExercise[]; // 3 个练习
};
// age.config.ts 中的结构
export const AGE_WEEK_PLANS: Record<AgeBandKey, WeekPlan[]> = {
'3-4': [
{
week: 1,
theme: '数感启蒙',
exercises: [
{
_id: 'ws_001',
title: '找数字,涂一涂',
subtitle: '在数字方阵中找出目标数字并涂色',
path: '/mathPages/mathDraw/mathDraw?id=number-find',
},
// ...
],
},
// ... week 2-4
],
// ... 其他年龄段
};
更新方式: 运行 AI Skill generate-age-weekly-plans,基于当前所有 worksheet 内容,以早教专家视角为每个年龄段编排 4 周学习路线,并更新 age.config.ts。
交互: 列表展示 title + subtitle;用户点击「去练习」时,使用 path 调用 wx.navigateTo(TabBar 页面则 wx.switchTab 并不带 query)。
2.4 第四部分:为你推荐(动态,云函数)
展示当前年龄段的 6 个推荐 worksheet,规则固定为:
- 前 3 个:同年龄段
downloads最高的 3 个(downloads Top3) - 后 3 个:同年龄段
likes最高的 3 个(likes Top3)
若两者出现重复,likes Top3 会自动向后补齐,确保总数为 6(在 worksheet 数量充足的前提下)。
实现方式:
- 云函数:
cloudfunctions/ageRecommendedQuery,入参ageKey(如5-6),从worksheets集合查询status=active 且 ageMin/ageMax 匹配的数据并返回 6 条 - 分龄页运行时:在切换年龄段时调用该云函数,拿到
title + previewImg + worksheetId渲染 - 兜底:云函数失败或无数据时,前端使用本地占位推荐(后续可替换为固定兜底表)
三、age.config.ts 完整结构
// miniprogram/pages/age/age.config.ts
import { AgeBandKey } from '../../core/data/difficulty';
// ─── 类型定义 ─────────────────────────────────
export type AbilityItem = {
icon: string;
title: string;
desc: string;
};
export type WeekExercise = {
_id: string;
title: string;
subtitle: string;
path: string;
};
export type WeekPlan = {
week: number;
theme: string;
exercises: WeekExercise[];
};
export type AgeBandConfig = {
key: AgeBandKey;
label: string;
subLabel: string;
abilities: AbilityItem[];
weeks: WeekPlan[];
};
// ─── 第一部分:年龄段设置(手动维护,几乎不变)────────
export const AGE_TAB_SUB: Record<AgeBandKey, string> = {
'3-4': '启蒙认知',
'4-5': '基础练习',
'5-6': '能力提升',
'6-7': '幼小衔接',
'7-8': '知识拓展',
};
// ─── 第二部分:能力目标(由 AI Skill generate-age-abilities 生成)────────
export const AGE_ABILITIES: Record<AgeBandKey, AbilityItem[]> = {
'3-4': [
/* AI 生成内容 */
],
'4-5': [
/* AI 生成内容 */
],
'5-6': [
/* AI 生成内容 */
],
'6-7': [
/* AI 生成内容 */
],
'7-8': [
/* AI 生成内容 */
],
};
// ─── 第三部分:4 周学习路线(由 AI Skill generate-age-weekly-plans 生成)────────
export const AGE_WEEK_PLANS: Record<AgeBandKey, WeekPlan[]> = {
'3-4': [
/* AI 生成内容 */
],
'4-5': [
/* AI 生成内容 */
],
'5-6': [
/* AI 生成内容 */
],
'6-7': [
/* AI 生成内容 */
],
'7-8': [
/* AI 生成内容 */
],
};
四、AI Skill 方案
4.1 设计思路
通过两个 Cursor AI Skill 分别管理第二部分和第三部分的内容生成:
doodle-mini/skills/
├── generate-age-abilities/
│ └── SKILL.md # Skill 1:生成能力目标
└── generate-age-weekly-plans/
└── SKILL.md # Skill 2:生成 4 周学习路线
两个 Skill 的共同点:
- 数据输入:
page-config.json存储在微信云存储(路径:/content/page-config.json),本地不存在。运行 Skill 前需先将其下载到.cache/page-config.json(通过微信开发者工具或tcbCLI),Skill 从本地缓存读取category下所有 worksheet 的标题、描述和内容 - 专家视角:以儿童早教专家(3-8 岁)的专业视角进行内容编排
- 输出目标:生成符合
age.config.ts数据结构的 TypeScript 代码,直接更新配置文件
4.2 Skill 1:generate-age-abilities(生成能力目标)
触发场景: 当 worksheet 内容体系发生较大变化(如新增学科分类、调整难度体系)时运行
生成逻辑:
- 读取所有 active worksheet 的分类、年龄段、难度、标题和描述
- 按年龄段分组,分析该年龄段覆盖的知识领域和技能点
- 以早教专家视角,为每个年龄段总结 3 个核心能力维度(数感/书写/思维 或根据实际内容调整)
- 每个能力维度用一句话描述该年龄段应达到的水平
- 更新
age.config.ts中的AGE_ABILITIES
4.3 Skill 2:generate-age-weekly-plans(生成 4 周学习路线)
触发场景: 每次有新 worksheet 发布上线后运行,确保学习路线推荐最新内容
生成逻辑:
- 读取所有 active worksheet 的完整信息(标题、描述、分类、年龄段、难度)
- 按年龄段分组,筛选适合该年龄段的 worksheet
- 以早教专家视角,设计 4 周主题式学习路线:
- 遵循由易到难、由基础到综合的编排原则
- 每周一个主题,覆盖不同能力维度
- 每周 3 个练习,从实际存在的 worksheet 中选取
- 确保 4 周内容覆盖该年龄段的主要学科和技能
- 生成
WeekPlan[]数据,关联实际 worksheet ID - 更新
age.config.ts中的AGE_WEEK_PLANS
4.4 数据获取方式
page-config.json 存储在微信云存储中(路径:/content/page-config.json),Skill 运行在本地 Cursor 环境中,无法直接访问云存储。需先将文件下载到本地:
前置步骤:下载 page-config.json 到本地缓存
mkdir -p .cache
下载方式(任选其一):
- 微信开发者工具:云开发控制台 → 存储 → 找到
/content/page-config.json→ 下载 → 保存到.cache/page-config.json - tcb CLI:
tcb storage:download /content/page-config.json .cache/page-config.json
Skill 读取本地缓存
读取 .cache/page-config.json
→ 解析 category.categories[].items[]
→ 提取每个 worksheet 的 id、title、description、category、ageBand、difficulty
.cache/目录应加入.gitignore,仅作为 Skill 运行时的临时数据源。
五、分龄页管理(Debug 管理页)
5.1 管理页入口
supportPages/ageContentManage/ageContentManage(待开发)
5.2 管理 UI
分龄管理页按年龄段切换:3-4 岁 | 4-5 岁 | 5-6 岁 | 6-7 岁 | 7-8 岁
| 模块 | 操作 | 说明 |
|---|---|---|
| 能力目标 | 只读展示 | 来自 age.config.ts 的 AGE_ABILITIES,由 AI Skill 维护 |
| 四周路线 | 只读展示 | 来自 age.config.ts 的 AGE_WEEK_PLANS,由 AI Skill 维护 |
| 推荐内容 | 自动计算 | 运行时取收藏/下载最高的 6 个 worksheet |
注:第二、三部分改为由 AI Skill 在开发时生成并提交代码,管理页仅作预览展示,不再需要手动选择 worksheet。
5.3 更新流程
AI Skill 生成流程(开发时):
0. 从云存储下载 /content/page-config.json → 保存到 .cache/page-config.json
1. 开发者在 Cursor 中运行 AI Skill
2. Skill 读取 .cache/page-config.json 中的 worksheet 数据
3. 以早教专家视角生成能力目标 / 学习路线
4. 自动更新 age.config.ts
5. 开发者 review 后提交代码
运行时数据流:
分龄页 onLoad / 切换年龄段
→ 从 age.config.ts 读取能力目标 + 学习路线(静态)
→ 调用云函数 ageRecommendedQuery(ageKey) 获取推荐(动态)
→ 渲染页面
六、数据结构
6.1 分龄页完整数据结构
type AgePageData = {
ageTabs: Array<{
key: AgeBandKey;
rangeText: string; // '3-4'
subLabel: string; // '启蒙认知'
}>;
bands: Record<
AgeBandKey,
{
abilities: AbilityItem[];
weeks: WeekPlan[];
recommended: RecommendedItem[]; // 运行时动态计算
}
>;
};
type RecommendedItem = {
id: string;
title: string;
image: string;
worksheetId: string;
};
七、实施计划
Phase 1:配置文件重构
- 创建
miniprogram/pages/age/age.config.ts,从age.ts中抽取类型定义和静态数据 - 重构
age.ts,改为引用age.config.ts中的配置
Phase 2:AI Skill 开发
- 创建
skills/generate-age-abilities/SKILL.md - 创建
skills/generate-age-weekly-plans/SKILL.md - 运行 Skill 生成初始内容,验证数据结构正确性
Phase 3:动态推荐
- 新增云函数
ageRecommendedQuery(downloads Top3 + likes Top3) - 分龄页调用云函数并渲染「为你推荐」
八、关键文件索引
| 文件 / 模块 | 职责 |
|---|---|
pages/age/age.config.ts |
分龄页配置(类型定义 + 静态数据 + AI 生成数据) |
pages/age/age.ts |
分龄页逻辑,引用 age.config.ts |
skills/generate-age-abilities/SKILL.md |
AI Skill:生成各年龄段能力目标 |
skills/generate-age-weekly-plans/SKILL.md |
AI Skill:生成 4 周学习路线 |
core/data/difficulty.ts |
AGE_BANDS 年龄段定义 |
core/data/categories.ts |
CATEGORY_LIST 分类定义 |
.cache/page-config.json |
worksheet 数据本地缓存(运行 Skill 前从云存储下载) |
云存储 /content/page-config.json |
worksheet 数据源(Source of Truth) |
cloudfunctions/worksheetsQuery/ |
查询 worksheet 的云函数 |
cloudfunctions/ageRecommendedQuery/ |
分龄页推荐:同年龄段 downloads Top3 + likes Top3 |