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

miniprogram/pages/category/category.ts

@@ -7,6 +7,16 @@ type CategoryTab = {
     icon: string;
 };
 
+type CategoryDataset = {
+    searchPlaceholder: string;
+    categories: Array<{
+        id: string;
+        name: string;
+        icon: string;
+        items: CategoryItem[];
+    }>;
+};
+
 const SIDEBAR_TABS: CategoryTab[] = CATEGORY_LIST_WITH_ALL.map(
     ({ id, name, icon }) => ({
         id,
@@ -15,25 +25,34 @@ const SIDEBAR_TABS: CategoryTab[] = CATEGORY_LIST_WITH_ALL.map(
     }),
 );
 
+const TAB_BAR_PATHS = new Set([
+    '/pages/home/home',
+    '/pages/category/category',
+    '/pages/age/age',
+    '/pages/favorites/favorites',
+    '/pages/profile/profile',
+]);
+
+// Page-level mutable state (shared across methods, set once on load)
+let _categoryData: CategoryDataset | null = null;
+
 function buildAllItems(): CategoryItem[] {
+    if (!_categoryData) return [];
     const items: CategoryItem[] = [];
-    for (const group of CATEGORY_DATA.categories) {
+    for (const group of _categoryData.categories) {
         for (const item of group.items) {
-            items.push({
-                ...item,
-            });
+            items.push({ ...item });
         }
     }
     return items;
 }
 
 function getItemsByCategory(categoryId: string): CategoryItem[] {
+    if (!_categoryData) return [];
     if (categoryId === 'all') return buildAllItems();
-    const group = CATEGORY_DATA.categories.find((c) => c.id === categoryId);
+    const group = _categoryData.categories.find((c) => c.id === categoryId);
     if (!group) return [];
-    return group.items.map((item) => ({
-        ...item,
-    }));
+    return group.items.map((item) => ({ ...item }));
 }
 
 function filterByKeyword(
@@ -49,33 +68,64 @@ function filterByKeyword(
     );
 }
 
-const TAB_BAR_PATHS = new Set([
-    '/pages/home/home',
-    '/pages/category/category',
-    '/pages/age/age',
-    '/pages/favorites/favorites',
-    '/pages/profile/profile',
-]);
+// Skeleton placeholder items for loading state
+const SKELETON_ITEMS = Array.from({ length: 4 }, (_, i) => ({
+    id: `skeleton-${i}`,
+    title: '\u00A0',
+    subtitle: '\u00A0',
+    skeleton: true,
+}));
 
 Page({
     data: {
-        searchPlaceholder: CATEGORY_DATA.searchPlaceholder,
+        searchPlaceholder: '搜索练习纸...',
         searchKeyword: '',
         sidebarTabs: SIDEBAR_TABS,
         activeCategoryId: 'all',
-        displayItems: buildAllItems() as CategoryItem[],
+        displayItems: SKELETON_ITEMS as any[],
         scrollIntoViewId: '',
+        loading: true,
     },
 
     onLoad(options: Record<string, string>) {
-        const id = options.id;
-        if (id && id !== 'all') {
-            const items = getItemsByCategory(id);
-            this.setData({
-                activeCategoryId: id,
-                displayItems: items,
-            });
+        void this.initData(options);
+    },
+
+    async initData(options: Record<string, string>) {
+        wx.showLoading({ title: '加载中', mask: false });
+
+        const app = getApp<IAppOption>();
+        const config = await app.getPageConfig();
+
+        // Use cloud config if available, otherwise fallback to local static data
+        if (config?.category?.categories?.length) {
+            _categoryData = {
+                searchPlaceholder:
+                    config.category.searchPlaceholder || '搜索练习纸...',
+                categories: config.category.categories.map((cat) => ({
+                    id: cat.id,
+                    name: cat.name,
+                    icon: cat.icon,
+                    items: (cat.items || []).map(
+                        (raw) => raw as unknown as CategoryItem,
+                    ),
+                })),
+            };
+        } else {
+            _categoryData = CATEGORY_DATA;
         }
+
+        const activeId = options.id && options.id !== 'all' ? options.id : 'all';
+        const items = getItemsByCategory(activeId);
+
+        this.setData({
+            loading: false,
+            searchPlaceholder: _categoryData.searchPlaceholder,
+            activeCategoryId: activeId,
+            displayItems: items,
+        });
+
+        wx.hideLoading();
     },
 
     onTapCategory(e: WechatMiniprogram.TouchEvent) {