feat: 完成 4 个TabBar 页面初版样式修改

miniprogram/pages/favorites/favorites.ts

@@ -1,10 +1,136 @@
+import { NAV_INNER_PX } from '../../utils/navMetrics';
+
 type FavoritesTab = 'favorites' | 'downloads';
 
+type FavoriteItem =
+    | {
+          id: string;
+          variant: 'standard';
+          title: string;
+          metaLine: string;
+          stars: number;
+          timeBadge: string;
+          thumb: string;
+      }
+    | {
+          id: string;
+          variant: 'featured';
+          title: string;
+          metaLine: string;
+          tags: string[];
+      };
+
+type DownloadRow = {
+    id: string;
+    title: string;
+    time: string;
+    status: string;
+    statusHighlight: boolean;
+    thumb?: string;
+    placeholder?: 'draw';
+};
+
+type DownloadSection = {
+    key: string;
+    label: string;
+    items: DownloadRow[];
+};
+
+const MOCK_FAVORITES: FavoriteItem[] = [
+    {
+        id: '1',
+        variant: 'standard',
+        title: '10以内加法',
+        metaLine: '数学启蒙 · 4-6岁 · ',
+        stars: 2,
+        timeBadge: '收藏于 3 天前',
+        thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD7khp0rJABfa9yFrMt9ZgIhAPyN44XmJ2pXNBgCzbgBvwA5ptFZVty013JedVzbE9_VvCQnToN7QETLDKjtiX22igzK-a5h4E8wjKrembFW4eVuk1RsJIbHjx3_cCz0hJ7_t76hF8t-Qdod_5R9sNMor1ZEjf6dGNp6UI_eIBjsN9b22iCTJ2VB-IEh0Rmil6_iC4Og-4I03IcQDV2rTHYIXcZxjiay1IiYGXw3wJ3bfo2SF2N7ZFT00akTgYU-9JyF7xJ6n15Yzc',
+    },
+    {
+        id: '2',
+        variant: 'standard',
+        title: '图形连连看',
+        metaLine: '逻辑思维 · 3-5岁 · ',
+        stars: 1,
+        timeBadge: '收藏于 5 天前',
+        thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBY_0Rr153ZBT4IHcMyFtrcgl-y2ZRyVnOuGecnn7f4PZKoAx2lOuCorsMmfRa72s0JmbXrt4XT3QU1x7cIbZUyhv_EXwCfMaNxtkHc-ymIBIQ5jqm5oiQebrEWH4kjv14JdkCiziT4xzac4TdVN5yqpk7Wlg80QBl_ldDmAQqIgcUeN2PvlVvhmpOYmFeWE2HS3I_e4vV1J8s_cfV9_4g7y8SbxlSfnTmgQNeXrVbcdwaNEAGQWp92Iif0d2pVIqdfuUHO1pTw8oQ',
+    },
+    {
+        id: '3',
+        variant: 'standard',
+        title: '拼音字母认读',
+        metaLine: '语文基础 · 5-7岁 · ',
+        stars: 3,
+        timeBadge: '收藏于 1 周前',
+        thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuC54mXQ8620XwIsWmUHBHJGdmpF8uE4cSYxwR2NLJTsa6gYdTCHz2tqrKbGOye-y0CGgCPPWwJXzEuB2ZYrQ3CWWPlamvbjhTUDYf8yoA9Lyapll1t2w17AqzSHrbBPNFrq931IUCis64b51kslQZoq3c0KslZsBQiky-YSnuE7xUuNsgiF4hOak_ReFFufWE53h1sPkjHFeRM-H34b-e1MCNxGObGPhI0mNlJ_qz0c8aCuS-jdnDocSvIYda-iVcJLWcIT-mO6klw',
+    },
+    {
+        id: '4',
+        variant: 'featured',
+        title: '趣味英语单词卡',
+        metaLine: '语言学习 · 4-8岁 · ⭐⭐⭐',
+        tags: ['畅销经典', '全彩打印'],
+    },
+];
+
+const MOCK_DOWNLOADS: DownloadSection[] = [
+    {
+        key: 'today',
+        label: '今天',
+        items: [
+            {
+                id: 'd1',
+                title: '拼音描红 · 声母表',
+                time: '14:32',
+                status: '已保存相册',
+                statusHighlight: true,
+                thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBCm6X4rhibw2_WxP-U0dDyOsiYol3y12OnEXHRkPONZYMQBUcr3Grqo1IbwH3sdWPg5jIUeIbr_AEwv_hFwUOMMz9jTIIMc6Pke1bzSvlQcgdDq-zMEIU4A--IQFX59ac-8BscCajXZcd4v8rE6JEZFf1-aztKclPTkE_Rrgj-nbVCy5V6bOE6yDOB67VdTbcqiOdaFN18ju_MgWVo3FQZLwIUZOBahkPl0vDIKA0mkiaGK9eiFpfnERYxkYG3eWJZ40umTYp46Jo',
+            },
+            {
+                id: 'd2',
+                title: '趣味口算题卡',
+                time: '09:15',
+                status: '已下载 PDF',
+                statusHighlight: false,
+                thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBxNORxN_vftYMLaMjZVscL-o9bZnBrfUi7IAqOrFATIztGV12_0ggwgae-fmk0cORWtysZWJJDcAzj0NEyniFxbREoGDuq9U4kytprJkA70_k0MCzPgStmq0bRwu1Gx1j4peglFam8PH6IlPvOMbiHQ7-fMFfYTSBtA1p7Dp06NDOzS2VrMlF8VxjEgihVmhHUrHePVvXlktUkXBKNzrXEXrogO3iOyouTUKyvJh0TeChKUv3KohMoD5ol7C3fjBhdHf7QD4StOQ4',
+            },
+        ],
+    },
+    {
+        key: 'yesterday',
+        label: '昨天',
+        items: [
+            {
+                id: 'd3',
+                title: '汉字笔画基础训练',
+                time: '16:40',
+                status: '已发送邮件',
+                statusHighlight: false,
+                placeholder: 'draw',
+            },
+        ],
+    },
+];
+
 Page({
     data: {
+        statusBarHeight: 0,
+        navBlockHeight: 0,
+        /** 纵向 scroll-view 可视高度（窗口高 − 顶栏占位，避免内容滚入导航下） */
+        favScrollHeight: 0,
         activeTab: 'favorites' as FavoritesTab,
-        favoriteList: [] as unknown[],
-        downloadList: [] as unknown[],
+        favoriteList: MOCK_FAVORITES as FavoriteItem[],
+        downloadSections: MOCK_DOWNLOADS as DownloadSection[],
+    },
+
+    onLoad() {
+        const win = wx.getWindowInfo();
+        const navBlockHeight = win.statusBarHeight + NAV_INNER_PX;
+        this.setData({
+            statusBarHeight: win.statusBarHeight,
+            navBlockHeight,
+            favScrollHeight: win.windowHeight - navBlockHeight,
+        });
     },
 
     onShow() {
@@ -24,4 +150,33 @@ Page({
     onDiscoverTap() {
         wx.switchTab({ url: '/pages/home/home' });
     },
+
+    onSearchTap() {
+        wx.showToast({ title: '搜索功能开发中', icon: 'none' });
+    },
+
+    onRemoveFavorite(e: WechatMiniprogram.TouchEvent) {
+        const id = e.currentTarget.dataset.id as string | undefined;
+        if (!id) return;
+        const list = (this.data.favoriteList as FavoriteItem[]).filter((item) => item.id !== id);
+        this.setData({ favoriteList: list });
+        wx.showToast({ title: '已取消收藏', icon: 'none' });
+    },
+
+    onClearHistory() {
+        wx.showModal({
+            title: '清空下载历史',
+            content: '确定清空本地展示的历史记录吗？',
+            success: (res) => {
+                if (!res.confirm) return;
+                this.setData({ downloadSections: [] });
+                wx.showToast({ title: '已清空', icon: 'none' });
+            },
+        });
+    },
+
+    onDownloadMore(e: WechatMiniprogram.TouchEvent) {
+        const id = e.currentTarget.dataset.id as string | undefined;
+        wx.showToast({ title: id ? `更多操作：${id}` : '更多', icon: 'none' });
+    },
 });