feat:收藏下载页优化loading逻辑

miniprogram/pages/category/category.less

@@ -225,14 +225,14 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 16rpx;
+    gap: 18rpx;
 }
 
 .cat-card__stat {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 4rpx;
+    gap: 6rpx;
     font-size: 20rpx;
     color: #7c766a;
     line-height: 20rpx;

miniprogram/pages/category/category.wxml

@@ -95,14 +95,14 @@
                                     <view class="cat-card__stat">
                                         <toy-icon
                                             name="heart-o"
-                                            size="20rpx"
+                                            size="22rpx"
                                             color="#7c766a" />
                                         <text>{{item.likes}}</text>
                                     </view>
                                     <view class="cat-card__stat">
                                         <toy-icon
                                             name="download"
-                                            size="20rpx"
+                                            size="22rpx"
                                             color="#7c766a" />
                                         <text>{{item.downloads}}</text>
                                     </view>

miniprogram/pages/favorites/favorites.json

@@ -6,6 +6,7 @@
     "backgroundColor": "#FEF6E7",
     "usingComponents": {
         "van-icon": "@vant/weapp/icon/index",
+        "toy-icon": "../../toy/icon/icon",
         "nav-bar": "../../components3.0/nav-bar/nav-bar"
     }
 }

miniprogram/pages/favorites/favorites.less

@@ -87,17 +87,19 @@
     flex-direction: row;
     align-items: center;
     gap: 32rpx;
-    padding: 32rpx;
+    padding: 24rpx 26rpx;
     background: @bg-header;
     box-shadow: @shadow;
 }
 
 .fav-card__thumb {
-    width: 160rpx;
+    width: 144rpx;
-    height: 160rpx;
+    height: 180rpx;
     border-radius: @radius;
     flex-shrink: 0;
     background: @fav-thumb-placeholder;
+    border: 1rpx solid rgba(50, 46, 37, 0.08);
+    overflow: hidden;
 }
 
 .fav-card__main {
@@ -106,7 +108,9 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 8rpx;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 16rpx 0;
 }
 
 .fav-card__title {
@@ -137,6 +141,7 @@
 }
 
 .fav-card__badge {
+    display: inline-block;
     margin-top: 4rpx;
     font-size: 18rpx;
     font-weight: 600;
@@ -281,7 +286,7 @@
     flex-direction: row;
     align-items: center;
     gap: 32rpx;
-    padding: 32rpx;
+    padding: 24rpx 26rpx;
     background: @bg-header;
     border-radius: @radius-lg;
     box-shadow: @shadow;
@@ -293,11 +298,13 @@
 }
 
 .fav-dl-row__thumb {
-    width: 160rpx;
+    width: 144rpx;
-    height: 160rpx;
+    height: 180rpx;
     border-radius: @radius;
     flex-shrink: 0;
     background: @fav-thumb-placeholder;
+    border: 1rpx solid rgba(50, 46, 37, 0.08);
+    overflow: hidden;
 }
 
 .fav-dl-row__thumb--ph {
@@ -310,6 +317,12 @@
 .fav-dl-row__main {
     flex: 1;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 16rpx 0;
 }
 
 .fav-dl-row__title {
@@ -317,7 +330,6 @@
     font-weight: 700;
     color: @text-title;
     line-height: 1.25;
-    margin-bottom: 12rpx;
 }
 
 .fav-dl-row__meta {
@@ -328,6 +340,7 @@
     gap: 12rpx;
     font-size: 26rpx;
     color: fade(@text-secondary, 88%);
+    line-height: 26rpx;
 }
 
 .fav-dl-row__time {
@@ -361,6 +374,30 @@
     border-radius: 50%;
 }
 
+/* Loading */
+.fav-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 120rpx 0;
+}
+
+.fav-loading__icon {
+    font-size: 56rpx;
+    color: @text-secondary;
+    animation: fav-spin 0.8s linear infinite;
+}
+
+@keyframes fav-spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 /* 空状态 */
 .fav-empty {
     display: flex;

miniprogram/pages/favorites/favorites.ts

@@ -3,6 +3,7 @@ import { getFavoriteList, removeFavorite } from '../../utils/favorites';
 import { getDownloadLogs } from '../../utils/downloadLogs';
 import type { FavoriteRecord } from '../../utils/favorites';
 import type { DownloadLogRecord } from '../../utils/downloadLogs';
+import { getCategoryName } from '../../core/data/categories';
 
 const { statusBarHeight } = wx.getWindowInfo();
 const NAV_BLOCK_HEIGHT = statusBarHeight + NAV_INNER_PX;
@@ -12,7 +13,7 @@ type FavoritesTab = 'favorites' | 'downloads';
 type FavoriteItem = {
     id: string;
     worksheetId: string;
-    variant: 'standard';
+    path: string;
     title: string;
     metaLine: string;
     stars: number;
@@ -22,7 +23,11 @@ type FavoriteItem = {
 
 type DownloadRow = {
     id: string;
+    worksheetId: string;
+    path: string;
     title: string;
+    metaLine: string;
+    stars: number;
     time: string;
     status: string;
     statusHighlight: boolean;
@@ -36,19 +41,34 @@ type DownloadSection = {
     items: DownloadRow[];
 };
 
+function buildWorksheetPath(worksheetId: string, category: string): string {
+    if (category === 'math') {
+        return `/mathPages/mathDraw/mathDraw?id=${worksheetId}`;
+    }
+    if (category === 'puzzle') {
+        return `/focusPages/focusDraw/focusDraw?id=${worksheetId}`;
+    }
+    if (category === 'english') {
+        return `/englishPages/letterTracing/letterTracing?id=${worksheetId}`;
+    }
+    return `/mathPages/mathDraw/mathDraw?id=${worksheetId}`;
+}
+
 function mapFavoriteToItem(record: FavoriteRecord): FavoriteItem {
     const ws = record.worksheet;
     const title = ws?.title || '未知题型';
     const category = ws?.category || '';
+    const categoryName = getCategoryName(category);
     const ageRange = ws ? `${ws.ageMin}-${ws.ageMax}岁` : '';
-    const metaLine = [category, ageRange].filter(Boolean).join(' · ') + ' · ';
+    const metaLine =
+        [categoryName, ageRange].filter(Boolean).join(' · ') + ' · ';
     const difficulty = ws?.difficulty || 0;
     const timeBadge = formatTimeBadge(record.createdAt);
 
     return {
         id: record._id,
         worksheetId: record.worksheetId,
-        variant: 'standard',
+        path: buildWorksheetPath(record.worksheetId, category),
         title,
         metaLine,
         stars: Math.min(difficulty, 3),
@@ -60,8 +80,19 @@ function mapFavoriteToItem(record: FavoriteRecord): FavoriteItem {
 function formatTimeBadge(dateStr: string): string {
     const date = new Date(dateStr);
     const now = new Date();
-    const diff = now.getTime() - date.getTime();
+
-    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    // 按日历天数计算差值
+    const todayStart = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate(),
+    ).getTime();
+    const dateStart = new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+    ).getTime();
+    const days = Math.round((todayStart - dateStart) / (1000 * 60 * 60 * 24));
 
     if (days === 0) return '收藏于今天';
     if (days === 1) return '收藏于昨天';
@@ -96,11 +127,21 @@ function groupDownloadsByDate(records: DownloadLogRecord[]): DownloadSection[] {
         }
 
         const ws = record.worksheet;
+        const category = ws?.category || '';
+        const categoryName = getCategoryName(category);
+        const ageRange = ws ? `${ws.ageMin}-${ws.ageMax}岁` : '';
+        const metaLine =
+            [categoryName, ageRange].filter(Boolean).join(' · ') + ' · ';
+        const difficulty = ws?.difficulty || 0;
         groups[key].items.push({
             id: record._id,
+            worksheetId: record.worksheetId,
+            path: buildWorksheetPath(record.worksheetId, category),
             title: ws?.title || '未知题型',
+            metaLine,
+            stars: Math.min(difficulty, 3),
             time: `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`,
-            status: '已保存相册',
+            status: '已保存到相册',
             statusHighlight: true,
             thumb: ws?.previewImg,
         });
@@ -123,7 +164,8 @@ Page({
         activeTab: 'favorites' as FavoritesTab,
         favoriteList: [] as FavoriteItem[],
         downloadSections: [] as DownloadSection[],
-        loading: false,
+        favLoading: false,
+        dlLoading: false,
     },
 
     onLoad() {
@@ -139,37 +181,68 @@ Page({
             this.setData({ activeTab: tab });
             wx.removeStorageSync('favorites_active_tab');
         }
-        this.loadData();
+        this.setData({ favoriteList: [], downloadSections: [] });
+        this.loadActiveTab();
+    },
+
+    loadActiveTab() {
+        const tab = this.data.activeTab;
+        if (tab === 'favorites' && this.data.favoriteList.length === 0) {
+            this.loadFavorites();
+        } else if (tab === 'downloads' && this.data.downloadSections.length === 0) {
+            this.loadDownloads();
+        }
     },
 
     onTabSwitch(e: WechatMiniprogram.TouchEvent) {
         const tab = e.currentTarget.dataset.tab as FavoritesTab;
         if (tab !== 'favorites' && tab !== 'downloads') return;
+        if (tab === this.data.activeTab) return;
         this.setData({ activeTab: tab });
-    },
+        // 只在数据为空时才请求
-
+        if (tab === 'favorites' && this.data.favoriteList.length === 0) {
-    async loadData() {
+            this.loadFavorites();
-        this.setData({ loading: true });
+        } else if (
-        await Promise.all([this.loadFavorites(), this.loadDownloads()]);
+            tab === 'downloads' &&
-        this.setData({ loading: false });
+            this.data.downloadSections.length === 0
+        ) {
+            this.loadDownloads();
+        }
     },
 
     async loadFavorites() {
-        const records = await getFavoriteList();
+        this.setData({ favLoading: true });
-        const list = records.map((r) => mapFavoriteToItem(r));
+        try {
-        this.setData({ favoriteList: list });
+            const records = await getFavoriteList();
+            this.setData({
+                favoriteList: records.map((r) => mapFavoriteToItem(r)),
+            });
+        } finally {
+            this.setData({ favLoading: false });
+        }
     },
 
     async loadDownloads() {
-        const records = await getDownloadLogs();
+        this.setData({ dlLoading: true });
-        const sections = groupDownloadsByDate(records);
+        try {
-        this.setData({ downloadSections: sections });
+            const records = await getDownloadLogs();
+            this.setData({ downloadSections: groupDownloadsByDate(records) });
+        } finally {
+            this.setData({ dlLoading: false });
+        }
     },
 
     onDiscoverTap() {
         wx.switchTab({ url: '/pages/home/home' });
     },
 
+    onCardTap(e: WechatMiniprogram.TouchEvent) {
+        const path = e.currentTarget.dataset.path as string | undefined;
+        console.log('path:', path);
+        if (!path) return;
+        wx.navigateTo({ url: path });
+    },
+
     onSearchTap() {
         wx.showToast({ title: '搜索功能开发中', icon: 'none' });
     },
@@ -183,15 +256,16 @@ Page({
         );
         if (!item) return;
 
-        // 乐观更新 UI
+        try {
-        const list = (this.data.favoriteList as FavoriteItem[]).filter(
+            await removeFavorite(item.worksheetId);
-            (i) => i.id !== id,
+            const list = (this.data.favoriteList as FavoriteItem[]).filter(
-        );
+                (i) => i.id !== id,
-        this.setData({ favoriteList: list });
+            );
-        wx.showToast({ title: '已取消收藏', icon: 'none' });
+            this.setData({ favoriteList: list });
-
+            wx.showToast({ title: '已取消收藏', icon: 'success' });
-        // 调用云端
+        } catch {
-        await removeFavorite(item.worksheetId);
+            wx.showToast({ title: '操作失败，请重试', icon: 'none' });
+        }
     },
 
     onClearHistory() {

miniprogram/pages/favorites/favorites.wxml

@@ -25,7 +25,12 @@
 
             <!-- 收藏的题型 -->
             <block wx:if="{{activeTab === 'favorites'}}">
-                <view wx:if="{{favoriteList.length === 0}}" class="fav-empty">
+                <view wx:if="{{favLoading}}" class="fav-loading">
+                    <text
+                        class="toy-icon toy-icon-loading fav-loading__icon"
+                        aria-hidden="true"></text>
+                </view>
+                <view wx:elif="{{favoriteList.length === 0}}" class="fav-empty">
                     <text class="fav-empty__emoji">🦆</text>
                     <text class="fav-empty__msg">鸭丫还没找到收藏呢</text>
                     <text class="fav-empty__sub">去发现好玩的练习纸吧~</text>
@@ -33,11 +38,12 @@
                         去发现
                     </button>
                 </view>
-                <view wx:else class="fav-list">
+                <view wx:elif="{{favoriteList.length > 0}}" class="fav-list">
                     <block wx:for="{{favoriteList}}" wx:key="id">
                         <view
-                            wx:if="{{item.variant === 'standard'}}"
+                            class="fav-card fav-card--row"
-                            class="fav-card fav-card--row">
+                            data-path="{{item.path}}"
+                            bindtap="onCardTap">
                             <image
                                 class="fav-card__thumb"
                                 src="{{item.thumb}}"
@@ -86,42 +92,6 @@
                                     color="#b02500" />
                             </view>
                         </view>
-                        <view
-                            wx:elif="{{item.variant === 'featured'}}"
-                            class="fav-card fav-card--bento">
-                            <view class="fav-bento__content">
-                                <text class="fav-card__title fav-bento__title"
-                                    >{{item.title}}</text
-                                >
-                                <text class="fav-bento__meta"
-                                    >{{item.metaLine}}</text
-                                >
-                                <view class="fav-bento__tags">
-                                    <text
-                                        wx:for="{{item.tags}}"
-                                        wx:for-item="tag"
-                                        wx:key="*this"
-                                        class="fav-bento__tag"
-                                        ># {{tag}}</text
-                                    >
-                                </view>
-                            </view>
-                            <van-icon
-                                class="fav-bento__deco"
-                                name="font-o"
-                                size="200rpx"
-                                color="rgba(108, 90, 0, 0.12)" />
-                            <view
-                                class="fav-bento__heart"
-                                data-id="{{item.id}}"
-                                catchtap="onRemoveFavorite"
-                                aria-role="button">
-                                <van-icon
-                                    name="like"
-                                    size="40rpx"
-                                    color="#b02500" />
-                            </view>
-                        </view>
                     </block>
                 </view>
                 <view wx:if="{{favoriteList.length > 0}}" class="fav-cta">
@@ -134,8 +104,13 @@
 
             <!-- 下载历史 -->
             <block wx:if="{{activeTab === 'downloads'}}">
+                <view wx:if="{{dlLoading}}" class="fav-loading">
+                    <text
+                        class="toy-icon toy-icon-loading fav-loading__icon"
+                        aria-hidden="true"></text>
+                </view>
                 <view
-                    wx:if="{{downloadSections.length === 0}}"
+                    wx:elif="{{downloadSections.length === 0}}"
                     class="fav-empty">
                     <van-icon
                         name="clock"
@@ -147,7 +122,7 @@
                         去发现
                     </button>
                 </view>
-                <view wx:else class="fav-dl">
+                <view wx:elif="{{downloadSections.length > 0}}" class="fav-dl">
                     <block
                         wx:for="{{downloadSections}}"
                         wx:for-item="section"
@@ -160,7 +135,9 @@
                                 wx:for="{{section.items}}"
                                 wx:for-item="row"
                                 wx:key="id"
-                                class="fav-dl-row {{row.placeholder === 'draw' ? 'fav-dl-row--muted' : ''}}">
+                                class="fav-dl-row {{row.placeholder === 'draw' ? 'fav-dl-row--muted' : ''}}"
+                                data-path="{{row.path}}"
+                                bindtap="onCardTap">
                                 <view
                                     wx:if="{{row.placeholder === 'draw'}}"
                                     class="fav-dl-row__thumb fav-dl-row__thumb--ph">
@@ -178,6 +155,30 @@
                                     <text class="fav-dl-row__title"
                                         >{{row.title}}</text
                                     >
+                                    <view class="fav-card__meta">
+                                        <text class="fav-card__meta-text"
+                                            >{{row.metaLine}}</text
+                                        >
+                                        <view
+                                            class="fav-card__stars"
+                                            aria-label="{{row.stars}} 星">
+                                            <van-icon
+                                                wx:if="{{row.stars >= 1}}"
+                                                name="star"
+                                                size="22rpx"
+                                                color="#d4a900" />
+                                            <van-icon
+                                                wx:if="{{row.stars >= 2}}"
+                                                name="star"
+                                                size="22rpx"
+                                                color="#d4a900" />
+                                            <van-icon
+                                                wx:if="{{row.stars >= 3}}"
+                                                name="star"
+                                                size="22rpx"
+                                                color="#d4a900" />
+                                        </view>
+                                    </view>
                                     <view class="fav-dl-row__meta">
                                         <van-icon
                                             name="clock"
@@ -197,10 +198,10 @@
                                     class="fav-dl-row__more"
                                     data-id="{{row.id}}"
                                     catchtap="onDownloadMore">
-                                    <van-icon
+                                    <toy-icon
-                                        name="ellipsis"
+                                        name="arrow-right"
-                                        size="40rpx"
+                                        size="36rpx"
-                                        color="#7c766a" />
+                                        color="#2b2b2b" />
                                 </view>
                             </view>
                         </view>