feat: 完成 4 个TabBar 页面初版样式修改

miniprogram/pages/age/age.ts

@@ -1,44 +1,243 @@
-import { ALL_WORKSHEETS, getWorksheetsByAge } from '../../core/data/worksheets';
+import { AGE_BANDS, AgeBandKey } from '../../core/data/difficulty';
+import { NAV_INNER_PX } from '../../utils/navMetrics';
 
-interface AgeGroup {
-    label: string;
+type AbilityItem = {
+    icon: string;
+    title: string;
     desc: string;
-    emoji: string;
-    minAge: number;
-    maxAge: number;
-    count: number;
-    gradient: string;
-}
+};
+
+type WeekExercise = {
+    title: string;
+};
+
+type WeekPlan = {
+    week: number;
+    theme: string;
+    exercises: WeekExercise[];
+};
+
+const AGE_TAB_SUB: Record<AgeBandKey, string> = {
+    '3-4': '启蒙认知',
+    '4-5': '基础练习',
+    '5-6': '能力提升',
+    '6-7': '幼小衔接',
+    '7-8': '知识拓展',
+};
+
+/** Stitch「为你推荐」占位图（需在小程序后台配置 download 合法域名含 lh3.googleusercontent.com） */
+const RECOMMENDED_FROM_STITCH: { title: string; image: string }[] = [
+    {
+        title: '10以内加减法',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD-3lADhclTGODN9WtNh5v8bQPLysbllbKNkH40bAmVyE5d54PwfTBOiX9nER1hpE4rzHAfsmM_JhVnsE4EbdA914rYIb3S3e4r9QKFjUqYmj2XpE4MlYr_vLkG4oeMnvnHOqGC96nLGrPSOq-fpIddV7RSlYLDeNccBs0G2oUOy-6jIMujzTuEGk4nnxme5rpxs7rYjwcvVsqM5dlkpJthY42e4B3lSPH7ezx187WRSk--m4ZiWmAI52mMOiygzTSWoNormlvfvdM',
+    },
+    {
+        title: '拼音描红',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBYS4O7PyflR5q8M6oXKwj_8QHzex3OL3YvdHBncutm7a_bjlZj83-8UBpGUQvJO20V0BnAdU3iKEoLlUqwpS60CiPhVyxYaHEAqv52P5YUhJdjf0hpLir1Li4rdI_-eqGkPTasYl-5kD2r8-RjUokKg_HiW5_TF72UbxFXHQh4BefYJZfl0Oc9-aTQvkbFL0C3tagi9Qv1jRsgQldMFU4M7cHt8KkxhO1QDF7-R85ZFORJM0RiqV2l-jn0c-UscKtuWtroiX6UUKk',
+    },
+    {
+        title: '趣味找不同',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBSafbTyucs8JLpTgibRWwAJsHukrklTAuEnaAzax_Kr1RNCwHjqpQjta0Q-h47ClufzEmaHPgCIOlm_a2lL4gNlgBDyraCwzRU7aWCf_Fj_dM1cLGzROJmtqrdHKjQzTbCp0_Da8BvXi4a4H2X4RAYVPnLbZVmbgPXrTvpKgEI605kIMmr3n0--WojJQRsF4B_xCho80gABbIaMTHJHrs9xdEY6fZKg8ArQx7lRbJ6_EsLLB_C5a5crZ_begwruXKr3pmdU6KneC8',
+    },
+    {
+        title: '走迷宫大挑战',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAOZHI1Dz6ax4iFUb3QYL-EWp2euA_3kyUeCcu6V57BBCzarMwKnFzcpJxJn4X4woklWFB08Ii1w6zsk0H5eDaPdgUYmsvY0NFqvAhKN_IbZGZjZnclZlBHkLRcX64Nl767L2pg01FQu9Tp6nq2p3lAuYeEQ2fiIdXh4j-QHyikbmx4_aDlx5X5fC0fqMMxWykhwLNkDzl2Rs3ucXj7zYnUP-dNNY-aj_JvqkY4pqoXQDt9ZJcfSeL0dWes7nvD5U2C_JFhrk1bVkw',
+    },
+    {
+        title: '数字点连线',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD-3lADhclTGODN9WtNh5v8bQPLysbllbKNkH40bAmVyE5d54PwfTBOiX9nER1hpE4rzHAfsmM_JhVnsE4EbdA914rYIb3S3e4r9QKFjUqYmj2XpE4MlYr_vLkG4oeMnvnHOqGC96nLGrPSOq-fpIddV7RSlYLDeNccBs0G2oUOy-6jIMujzTuEGk4nnxme5rpxs7rYjwcvVsqM5dlkpJthY42e4B3lSPH7ezx187WRSk--m4ZiWmAI52mMOiygzTSWoNormlvfvdM',
+    },
+    {
+        title: '方格推理高手',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBYS4O7PyflR5q8M6oXKwj_8QHzex3OL3YvdHBncutm7a_bjlZj83-8UBpGUQvJO20V0BnAdU3iKEoLlUqwpS60CiPhVyxYaHEAqv52P5YUhJdjf0hpLir1Li4rdI_-eqGkPTasYl-5kD2r8-RjUokKg_HiW5_TF72UbxFXHQh4BefYJZfl0Oc9-aTQvkbFL0C3tagi9Qv1jRsgQldMFU4M7cHt8KkxhO1QDF7-R85ZFORJM0RiqV2l-jn0c-UscKtuWtroiX6UUKk',
+    },
+];
+
+/** 各年龄段能力目标（Mock） */
+const MOCK_ABILITY: Record<AgeBandKey, AbilityItem[]> = {
+    '3-4': [
+        {
+            icon: '🔢',
+            title: '数感',
+            desc: '认读 1-5、点数对应',
+        },
+        {
+            icon: '✏️',
+            title: '书写',
+            desc: '涂鸦线条、简单描红',
+        },
+        {
+            icon: '🧩',
+            title: '思维',
+            desc: '找相同、简单配对',
+        },
+    ],
+    '4-5': [
+        {
+            icon: '🔢',
+            title: '数感',
+            desc: '10 以内数数、比大小',
+        },
+        {
+            icon: '✏️',
+            title: '书写',
+            desc: '笔画模仿、图形描边',
+        },
+        {
+            icon: '🧩',
+            title: '思维',
+            desc: '规律排序、图形分类',
+        },
+    ],
+    '5-6': [
+        {
+            icon: '🔢',
+            title: '数感',
+            desc: '10以内加减法、凑十法',
+        },
+        {
+            icon: '✏️',
+            title: '书写',
+            desc: '练字帖、拼音入门',
+        },
+        {
+            icon: '🧩',
+            title: '思维',
+            desc: '方格推理、格子仿画 5×5',
+        },
+    ],
+    '6-7': [
+        {
+            icon: '🔢',
+            title: '数感',
+            desc: '20 以内运算、应用题启蒙',
+        },
+        {
+            icon: '✏️',
+            title: '书写',
+            desc: '常用字书写、词语积累',
+        },
+        {
+            icon: '🧩',
+            title: '思维',
+            desc: '逻辑填空、空间想象',
+        },
+    ],
+    '7-8': [
+        {
+            icon: '🔢',
+            title: '数感',
+            desc: '乘除启蒙、巧算练习',
+        },
+        {
+            icon: '✏️',
+            title: '书写',
+            desc: '段落抄写、古诗诵读',
+        },
+        {
+            icon: '🧩',
+            title: '思维',
+            desc: '数独入门、综合推理',
+        },
+    ],
+};
+
+/** 4 周路线（各年龄段共用结构，内容 Mock） */
+const MOCK_WEEKS: WeekPlan[] = [
+    {
+        week: 1,
+        theme: '数感启蒙',
+        exercises: [
+            { title: '找数字涂一涂' },
+            { title: '5 以内加法' },
+            { title: '数数连一连' },
+        ],
+    },
+    {
+        week: 2,
+        theme: '形状与连线',
+        exercises: [
+            { title: '识别形状' },
+            { title: '线条识别' },
+            { title: '数字点连线' },
+        ],
+    },
+    {
+        week: 3,
+        theme: '趣味专注',
+        exercises: [
+            { title: '颜色找规律' },
+            { title: '方格推理' },
+            { title: '格子仿画' },
+        ],
+    },
+    {
+        week: 4,
+        theme: '综合练习',
+        exercises: [
+            { title: '10以内加减法' },
+            { title: '识字卡' },
+            { title: '连连看' },
+        ],
+    },
+];
+
+const DEFAULT_AGE: AgeBandKey = '5-6';
 
 Page({
     data: {
-        ageGroups: [] as AgeGroup[],
+        statusBarHeight: 0,
+        navBlockHeight: 0,
+        ageTabs: AGE_BANDS.map((b) => ({
+            key: b.key,
+            rangeText: b.label.replace(/\s*岁\s*$/, ''),
+            subLabel: AGE_TAB_SUB[b.key],
+        })),
+        activeAgeKey: DEFAULT_AGE,
+        goalTitle: '',
+        abilityItems: [] as AbilityItem[],
+        weekPlans: MOCK_WEEKS,
+        recommendedItems: RECOMMENDED_FROM_STITCH,
     },
 
     onLoad() {
-        const groups = [
-            { label: '3-4 岁', desc: '启蒙认知', emoji: '👶', minAge: 3, maxAge: 4, gradient: 'linear-gradient(135deg, #fff9c4, #fff176)' },
-            { label: '4-5 岁', desc: '基础练习', emoji: '🧒', minAge: 4, maxAge: 5, gradient: 'linear-gradient(135deg, #c8e6c9, #81c784)' },
-            { label: '5-6 岁', desc: '能力提升', emoji: '👦', minAge: 5, maxAge: 6, gradient: 'linear-gradient(135deg, #bbdefb, #64b5f6)' },
-            { label: '6-7 岁', desc: '幼小衔接', emoji: '👧', minAge: 6, maxAge: 7, gradient: 'linear-gradient(135deg, #e1bee7, #ba68c8)' },
-            { label: '7-8 岁', desc: '巩固挑战', emoji: '🎒', minAge: 7, maxAge: 8, gradient: 'linear-gradient(135deg, #ffccbc, #ff8a65)' },
-        ];
-
-        const ageGroups = groups.map((g) => ({
-            ...g,
-            count: getWorksheetsByAge(ALL_WORKSHEETS, g.minAge).length,
-        }));
-
-        this.setData({ ageGroups });
+        const win = wx.getWindowInfo();
+        this.setData({
+            statusBarHeight: win.statusBarHeight,
+            navBlockHeight: win.statusBarHeight + NAV_INNER_PX,
+        });
+        this.applyAge(DEFAULT_AGE);
     },
 
-    onAgeCardTap(e: WechatMiniprogram.TouchEvent) {
-        const minAge = Number(e.currentTarget.dataset.minAge);
-        const maxAge = Number(e.currentTarget.dataset.maxAge);
-        if (Number.isNaN(minAge) || Number.isNaN(maxAge)) return;
-        const title = `${minAge}-${maxAge}岁推荐`;
-        wx.navigateTo({
-            url: `/pages/category/category?minAge=${minAge}&maxAge=${maxAge}&title=${encodeURIComponent(title)}`,
+    applyAge(key: AgeBandKey) {
+        const band = AGE_BANDS.find((b) => b.key === key);
+        const goalTitle = band ? `${band.label}能力目标` : '能力目标';
+        this.setData({
+            activeAgeKey: key,
+            goalTitle,
+            abilityItems: MOCK_ABILITY[key],
         });
     },
+
+    onAgeTabTap(e: WechatMiniprogram.TouchEvent) {
+        const key = e.currentTarget.dataset.key as AgeBandKey | undefined;
+        if (!key) return;
+        this.applyAge(key);
+    },
+
+    onPracticeTap(e: WechatMiniprogram.TouchEvent) {
+        const title = e.currentTarget.dataset.title as string | undefined;
+        if (!title) return;
+        wx.showToast({ title: `即将前往：${title}`, icon: 'none' });
+    },
+
+    onRecommendMore() {
+        wx.switchTab({ url: '/pages/home/home' });
+    },
+
+    onRecommendTap(e: WechatMiniprogram.TouchEvent) {
+        const title = e.currentTarget.dataset.title as string | undefined;
+        if (!title) return;
+        wx.showToast({ title: `去看看：${title}`, icon: 'none' });
+    },
 });