feat: 首页、分类页加载数据逻辑重构

miniprogram/pages/home/home.ts

@@ -3,6 +3,7 @@ import {
     HOME_CURRENT_CAPABILITY_DATA,
     type HomeDisplayItem,
     type HomeDisplaySection,
+    type HomeDisplayDataset,
 } from './home.data';
 
 type AgeBandKey = string;
@@ -21,7 +22,7 @@ type HomeAgeBandView = {
 };
 
 type HomeDisplayItemView = HomeDisplayItem & {
-    topBg: string;
+    skeleton?: boolean;
 };
 
 type HomeDisplaySectionView = HomeDisplaySection & {
@@ -31,14 +32,6 @@ type HomeDisplaySectionView = HomeDisplaySection & {
 
 const AGE_BAND_ICONS = ['🌱', '🚀', '🎓', '🧠', '🏆'] as const;
 
-const CATEGORY_TOP_BG: Record<HomeDisplayItem['category'], string> = {
-    math: '#fff3c4',
-    chinese: '#d8f0d0',
-    english: '#e8f4ff',
-    puzzle: '#f5e6dc',
-    craft: '#fce4ec',
-};
-
 const SECTION_ANCHOR_PREFIX = 'section-';
 const TAB_BAR_PATHS = new Set([
     '/pages/home/home',
@@ -50,7 +43,6 @@ const TAB_BAR_PATHS = new Set([
 function toItemView(item: HomeDisplayItem): HomeDisplayItemView {
     return {
         ...item,
-        topBg: CATEGORY_TOP_BG[item.category],
     };
 }
 
@@ -64,12 +56,7 @@ function sortSectionsByTabs(
     }, {});
 
     return [...sections]
-        .sort((a, b) => {
-            const aOrder = orderMap[a.id];
-            const bOrder = orderMap[b.id];
-            // 注意：0 需要保留（不能用 || 进行兜底）
-            return (aOrder ?? 999) - (bOrder ?? 999);
-        })
+        .sort((a, b) => (orderMap[a.id] ?? 999) - (orderMap[b.id] ?? 999))
         .map((section) => ({
             ...section,
             anchorId: `${SECTION_ANCHOR_PREFIX}${section.id}`,
@@ -78,6 +65,7 @@ function sortSectionsByTabs(
 }
 
 function navigateByPath(path?: string, fallbackTitle?: string) {
+    console.log('path-----:', path);
     if (!path) {
         wx.showToast({
             title: fallbackTitle ? `${fallbackTitle} 即将上线` : '即将上线',
@@ -94,31 +82,109 @@ function navigateByPath(path?: string, fallbackTitle?: string) {
     wx.navigateTo({ url: path });
 }
 
+// ── Skeleton data ──
+
+function skeletonItem(id: string): HomeDisplayItemView {
+    return {
+        id,
+        title: '\u00A0',
+        subtitle: '\u00A0',
+        category: 'math' as any,
+        ageBand: '',
+        difficulty: '基础',
+        icon: '',
+        path: '',
+        available: false,
+        skeleton: true,
+    };
+}
+
+const SKELETON_FEATURED = Array.from({ length: 3 }, (_, i) =>
+    skeletonItem(`skeleton-featured-${i}`),
+);
+const SKELETON_HOT = Array.from({ length: 3 }, (_, i) =>
+    skeletonItem(`skeleton-hot-${i}`),
+);
+
 const win = wx.getWindowInfo();
-const HOME_DATA = HOME_CURRENT_CAPABILITY_DATA;
-const HOME_TABS: HomeTab[] = HOME_DATA.categoryTabs.map((item) => ({
-    id: item.id,
-    name: item.name,
-}));
-const HOME_SECTIONS = sortSectionsByTabs(HOME_TABS, HOME_DATA.sections);
-console.log('HOME_DATA', HOME_DATA);
-console.log('HOME_SECTIONS', HOME_SECTIONS);
+
+// Page-level mutable state
+let _homeData: HomeDisplayDataset | null = null;
+
+function applyHomeData(data: HomeDisplayDataset) {
+    _homeData = data;
+    const tabs: HomeTab[] = data.categoryTabs.map((item) => ({
+        id: item.id,
+        name: item.name,
+    }));
+    const sections = sortSectionsByTabs(tabs, data.sections);
+    const ageBands: HomeAgeBandView[] = data.ageBands.map((item, idx) => ({
+        ...item,
+        icon: AGE_BAND_ICONS[idx] || '🌟',
+    }));
+
+    return { tabs, sections, ageBands };
+}
 
 Page({
     data: {
-        searchPlaceholder: HOME_DATA.searchPlaceholder,
-        tabs: HOME_TABS,
+        searchPlaceholder: '搜索你喜欢的练习册...',
+        tabs: [] as HomeTab[],
         activeTab: 'all',
-        ageBands: HOME_DATA.ageBands.map((item, idx) => ({
-            ...item,
-            icon: AGE_BAND_ICONS[idx] || '🌟',
-        })) as HomeAgeBandView[],
-        activeAgeBand: HOME_DATA.ageBands[0]?.key || ('3-4' as AgeBandKey),
-        featuredItems: HOME_DATA.featured.map(toItemView),
-        hotRecommends: HOME_DATA.hot.map(toItemView),
-        sections: HOME_SECTIONS,
+        ageBands: [] as HomeAgeBandView[],
+        activeAgeBand: '3-4' as AgeBandKey,
+        featuredItems: SKELETON_FEATURED,
+        hotRecommends: SKELETON_HOT,
+        sections: [] as HomeDisplaySectionView[],
+        loading: true,
     },
 
+    onLoad() {
+        void this.initData();
+    },
+
+    async initData() {
+        wx.showLoading({ title: '加载中', mask: false });
+
+        const app = getApp<IAppOption>();
+        const config = await app.getPageConfig();
+
+        let homeData: HomeDisplayDataset;
+
+        if (config?.home) {
+            // Cloud config available — map to HomeDisplayDataset
+            const raw = config.home as Record<string, any>;
+            homeData = {
+                searchPlaceholder:
+                    raw.searchPlaceholder || '搜索你喜欢的练习册...',
+                categoryTabs: raw.categoryTabs || [],
+                ageBands: raw.ageBands || [],
+                featured: (raw.featured || []) as HomeDisplayItem[],
+                hot: (raw.hot || []) as HomeDisplayItem[],
+                sections: (raw.sections || []) as HomeDisplaySection[],
+            };
+        } else {
+            homeData = HOME_CURRENT_CAPABILITY_DATA;
+        }
+
+        const { tabs, sections, ageBands } = applyHomeData(homeData);
+
+        this.setData({
+            loading: false,
+            searchPlaceholder: homeData.searchPlaceholder,
+            tabs,
+            ageBands,
+            activeAgeBand: homeData.ageBands[0]?.key || '3-4',
+            featuredItems: homeData.featured.map(toItemView),
+            hotRecommends: homeData.hot.slice(0, 3).map(toItemView),
+            sections,
+        });
+
+        wx.hideLoading();
+    },
+
+    // ── Tab & Navigation ──
+
     onTabChange(e: WechatMiniprogram.CustomEvent) {
         const id = e.detail.id as string | undefined;
         if (!id) return;
@@ -126,10 +192,7 @@ Page({
         this.setData({ activeTab: id });
 
         if (id === 'all') {
-            wx.pageScrollTo({
-                scrollTop: 0,
-                duration: 400,
-            });
+            wx.pageScrollTo({ scrollTop: 0, duration: 400 });
             return;
         }