feat: 完成首页UI展示初版开发

miniprogram/pages/home/home.ts

@@ -8,6 +8,90 @@ const CATEGORY_TABS = [
 
 const AGE_BAND_ICONS = ['🌱', '🚀', '🎓', '🧠', '🏆'] as const;
 
+type HomeTrackCard = {
+    id: string;
+    title: string;
+    subtitle: string;
+    icon: string;
+    topBg: string;
+};
+
+const MOCK_MATH_TRACK: HomeTrackCard[] = [
+    {
+        id: 'm1',
+        title: '认识数字1-10',
+        subtitle: '启蒙第一课',
+        icon: '🔢',
+        topBg: '#fff3c4',
+    },
+    {
+        id: 'm2',
+        title: '形状对对碰',
+        subtitle: '空间感训练',
+        icon: '📐',
+        topBg: '#f5e6dc',
+    },
+    {
+        id: 'm3',
+        title: '数量比一比',
+        subtitle: '数感小游戏',
+        icon: '⚖️',
+        topBg: '#d8f0d0',
+    },
+    {
+        id: 'm4',
+        title: '规律找一找',
+        subtitle: '逻辑思维',
+        icon: '🔍',
+        topBg: '#e8f4ff',
+    },
+    {
+        id: 'm5',
+        title: '简单加减',
+        subtitle: '动手练一练',
+        icon: '➕',
+        topBg: '#fce4ec',
+    },
+];
+
+const MOCK_CHINESE_TRACK: HomeTrackCard[] = [
+    {
+        id: 'c1',
+        title: '基础笔画连连看',
+        subtitle: '书法初体验',
+        icon: '🖌',
+        topBg: '#f5e6dc',
+    },
+    {
+        id: 'c2',
+        title: '看图识汉字',
+        subtitle: '字形联想',
+        icon: '📖',
+        topBg: '#d8f0d0',
+    },
+    {
+        id: 'c3',
+        title: '拼音小闯关',
+        subtitle: '声母韵母',
+        icon: '🔤',
+        topBg: '#fff3c4',
+    },
+    {
+        id: 'c4',
+        title: '词语搭配',
+        subtitle: '词汇积累',
+        icon: '✏️',
+        topBg: '#e8f4ff',
+    },
+    {
+        id: 'c5',
+        title: '古诗诵读',
+        subtitle: '语感培养',
+        icon: '🎵',
+        topBg: '#fce4ec',
+    },
+];
+
 const MOCK_HOT_RECOMMENDS = [
     {
         id: 'hot-1',
@@ -40,6 +124,8 @@ Page({
         })),
         activeAgeBand: AGE_BANDS[0].key as AgeBandKey,
         hotRecommends: [...MOCK_HOT_RECOMMENDS],
+        mathTrackCards: MOCK_MATH_TRACK,
+        chineseTrackCards: MOCK_CHINESE_TRACK,
     },
 
     onTabChange(e: WechatMiniprogram.CustomEvent) {
@@ -66,6 +152,20 @@ Page({
         wx.showToast({ title: '热门推荐 即将上线', icon: 'none' });
     },
 
+    onTapTrackMore(e: WechatMiniprogram.TouchEvent) {
+        const category = e.currentTarget.dataset.category as string | undefined;
+        if (!category) return;
+        wx.navigateTo({
+            url: `/pages/category/category?category=${category}`,
+        });
+    },
+
+    onTapTrackCard(e: WechatMiniprogram.TouchEvent) {
+        const title = e.currentTarget.dataset.title as string | undefined;
+        if (!title) return;
+        wx.showToast({ title, icon: 'none' });
+    },
+
     onShareAppMessage() {
         return {
             title: '涂鸦丫 - 快来生成宝宝的专属学习卡',