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

miniprogram/components3.0/category-tabs/category-tabs.less

@@ -13,7 +13,7 @@
     flex-direction: row;
     align-items: center;
     gap: 16rpx;
-    padding: 30rpx 24rpx;
+    padding: 0 24rpx;
     box-sizing: border-box;
 }
 

miniprogram/pages/category/category.json

@@ -4,7 +4,7 @@
     "navigationBarBackgroundColor": "#ffffff",
     "backgroundColor": "#F6F6F6",
     "usingComponents": {
-        "worksheet-card": "../../components/shared/worksheet-card/worksheet-card",
+        "worksheet-card": "../../components3.0/worksheet-card/worksheet-card",
-        "detail-card": "../../components/shared/detail-card/detail-card"
+        "detail-card": "../../components3.0/detail-card/detail-card"
     }
 }

miniprogram/pages/home/home.json

@@ -6,7 +6,7 @@
     "backgroundColor": "#FEF6E7",
     "enablePullDownRefresh": false,
     "usingComponents": {
-        "category-tabs": "/components/shared/category-tabs/category-tabs",
+        "category-tabs": "/components3.0/category-tabs/category-tabs",
         "van-icon": "@vant/weapp/icon/index"
     }
 }

miniprogram/pages/home/home.less

@@ -1,6 +1,8 @@
 @import '../../style/theme3.less';
 
 @home-padding: 28rpx;
+@home-section-mt: 48rpx;
+@home-track-gap: 16rpx;
 
 .home-page {
     min-height: 100vh;
@@ -68,12 +70,12 @@
 }
 
 .home-tabs-wrap {
-    // margin-top: 28rpx;
+    margin-top: 48rpx;
 }
 
 .home-hero-placeholder {
     // margin: 8rpx auto 0;
-    margin: 0 24rpx;
+    margin: 48rpx 24rpx 0;
     // width: 684rpx;
     height: 480rpx;
     border-radius: 40rpx;
@@ -81,13 +83,13 @@
 }
 
 .home-section-panel {
-    margin-top: 48rpx;
+    margin-top: @home-section-mt;
     padding: 0 @home-padding;
     box-sizing: border-box;
 }
 
 .home-section-panel--hot {
-    margin-top: 32rpx;
+    margin-top: @home-section-mt;
 }
 
 .home-section-head {
@@ -107,6 +109,73 @@
     color: @text-selected-btn;
 }
 
+.home-section-head__title--module {
+    font-size: 28rpx;
+    font-weight: 700;
+}
+
+.home-track-scroll {
+    margin-top: 24rpx;
+    width: 100%;
+    white-space: nowrap;
+}
+
+.home-track-row {
+    display: inline-flex;
+    flex-direction: row;
+    gap: @home-track-gap;
+    padding-right: @home-padding;
+}
+
+/* 可视约 2.2 张：2*w + 2*gap + 0.2*w ≈ 屏宽减左右 padding */
+.home-track-card {
+    width: calc((750rpx - 2 * @home-padding - 2 * @home-track-gap) / 2.2);
+    flex-shrink: 0;
+    border-radius: 24rpx;
+    overflow: hidden;
+    background: #ffffff;
+    box-shadow: 0 6rpx 20rpx rgba(50, 46, 37, 0.06);
+}
+
+.home-track-card__top {
+    height: 200rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.home-track-card__icon {
+    font-size: 72rpx;
+    line-height: 1;
+}
+
+.home-track-card__body {
+    padding: 20rpx 18rpx 22rpx;
+    background: #ffffff;
+}
+
+.home-track-card__title {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: @text-title;
+    line-height: 1.35;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+
+.home-track-card__sub {
+    margin-top: 8rpx;
+    font-size: 22rpx;
+    color: @text-gray;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .home-age-scroll {
     margin-top: 32rpx;
     width: 100%;
@@ -116,12 +185,13 @@
 .home-age-row {
     display: inline-flex;
     flex-direction: row;
-    gap: 20rpx;
+    gap: 12rpx;
     padding-right: @home-padding;
 }
 
 .home-age-item {
-    width: calc((750rpx - 48rpx - 40rpx) / 3.2);
+    /* 目标：首屏露出 3.5 个（第 4 个露出约 50%） */
+    width: calc((750rpx - 48rpx - 36rpx) / 3.5);
     display: flex;
     flex-direction: column;
     align-items: center;

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: '涂鸦丫 - 快来生成宝宝的专属学习卡',

miniprogram/pages/home/home.wxml

@@ -90,4 +90,82 @@
             </view>
         </view>
     </view>
+
+    <view class="home-section-panel">
+        <view class="home-section-head">
+            <text
+                class="home-section-head__title home-section-head__title--module"
+                >数感启蒙</text
+            >
+            <text
+                class="home-section-head__more"
+                data-category="math"
+                bindtap="onTapTrackMore"
+                >更多</text
+            >
+        </view>
+        <scroll-view class="home-track-scroll" scroll-x enable-flex>
+            <view class="home-track-row">
+                <view
+                    wx:for="{{mathTrackCards}}"
+                    wx:key="id"
+                    class="home-track-card"
+                    data-title="{{item.title}}"
+                    bindtap="onTapTrackCard">
+                    <view
+                        class="home-track-card__top"
+                        style="background-color: {{item.topBg}}">
+                        <text class="home-track-card__icon">{{item.icon}}</text>
+                    </view>
+                    <view class="home-track-card__body">
+                        <text class="home-track-card__title"
+                            >{{item.title}}</text
+                        >
+                        <text class="home-track-card__sub"
+                            >{{item.subtitle}}</text
+                        >
+                    </view>
+                </view>
+            </view>
+        </scroll-view>
+    </view>
+
+    <view class="home-section-panel">
+        <view class="home-section-head">
+            <text
+                class="home-section-head__title home-section-head__title--module"
+                >趣味中文</text
+            >
+            <text
+                class="home-section-head__more"
+                data-category="chinese"
+                bindtap="onTapTrackMore"
+                >更多</text
+            >
+        </view>
+        <scroll-view class="home-track-scroll" scroll-x enable-flex>
+            <view class="home-track-row">
+                <view
+                    wx:for="{{chineseTrackCards}}"
+                    wx:key="id"
+                    class="home-track-card"
+                    data-title="{{item.title}}"
+                    bindtap="onTapTrackCard">
+                    <view
+                        class="home-track-card__top"
+                        style="background-color: {{item.topBg}}">
+                        <text class="home-track-card__icon">{{item.icon}}</text>
+                    </view>
+                    <view class="home-track-card__body">
+                        <text class="home-track-card__title"
+                            >{{item.title}}</text
+                        >
+                        <text class="home-track-card__sub"
+                            >{{item.subtitle}}</text
+                        >
+                    </view>
+                </view>
+            </view>
+        </scroll-view>
+    </view>
 </view>