feat: 分类页骨架屏优化

miniprogram/pages/category/category.less

@@ -70,9 +70,10 @@
 
 .cat-sidebar__item {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
-    gap: 6rpx;
+    justify-content: center;
+    gap: 8rpx;
     padding: 24rpx 12rpx;
     margin: 4rpx 12rpx;
     border-radius: 999rpx;
@@ -86,7 +87,7 @@
 }
 
 .cat-sidebar__icon {
-    font-size: 36rpx;
+    font-size: 32rpx;
     line-height: 1;
 }
 
@@ -263,35 +264,47 @@
     color: @text-gray;
 }
 
-// ── Skeleton ──
-@keyframes skeleton-pulse {
-    0% {
-        opacity: 0.6;
-    }
+// ── Skeleton shimmer ──
+@skeleton-base: #e8e2d5;
 
-    50% {
-        opacity: 0.3;
+@keyframes skeleton-shimmer {
+    0% {
+        transform: translateX(-100%);
     }
 
     100% {
-        opacity: 0.6;
+        transform: translateX(100%);
     }
 }
 
 .cat-card--skeleton {
     pointer-events: none;
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg,
+                transparent 25%,
+                rgba(255, 255, 255, 0.7) 50%,
+                transparent 75%);
+        animation: skeleton-shimmer 1.2s linear infinite;
+        z-index: 1;
+    }
 
     .cat-card__thumb {
-        background: #e8e2d5;
-        animation: skeleton-pulse 1.5s ease-in-out infinite;
+        background: @skeleton-base;
     }
 
     .cat-card__title,
     .cat-card__subtitle {
-        background: #e8e2d5;
+        background: @skeleton-base;
         border-radius: 8rpx;
         color: transparent;
-        animation: skeleton-pulse 1.5s ease-in-out infinite;
     }
 
     .cat-card__title {

miniprogram/pages/category/category.ts

@@ -24,13 +24,18 @@ const DIFFICULTY_LABELS: Record<number, string> = {
     4: '挑战',
 };
 
-const SIDEBAR_TABS: CategoryTab[] = CATEGORY_LIST_WITH_ALL.map(
-    ({ id, name, icon }) => ({
-        id,
-        name,
-        icon,
-    }),
-);
+const DYNAMIC_TABS: CategoryTab[] = [
+    { id: 'hot', name: '热门推荐', icon: '🔥' },
+    { id: 'top-downloads', name: '下载最多', icon: '📥' },
+];
+
+const SIDEBAR_TABS: CategoryTab[] = [
+    { id: 'all', name: '全部', icon: '📋' },
+    ...DYNAMIC_TABS,
+    ...CATEGORY_LIST_WITH_ALL.filter((c) => c.id !== 'all').map(
+        ({ id, name, icon }) => ({ id, name, icon }),
+    ),
+];
 
 const TAB_BAR_PATHS = new Set([
     '/pages/home/home',
@@ -119,9 +124,23 @@ function buildAllItems(): CategoryItem[] {
     return sortWorksheets(items);
 }
 
+const DYNAMIC_LIMIT = 12;
+
+function buildHotItems(): CategoryItem[] {
+    const all = buildAllItems();
+    return [...all].sort((a, b) => (b.likes || 0) - (a.likes || 0)).slice(0, DYNAMIC_LIMIT);
+}
+
+function buildTopDownloadsItems(): CategoryItem[] {
+    const all = buildAllItems();
+    return [...all].sort((a, b) => (b.downloads || 0) - (a.downloads || 0)).slice(0, DYNAMIC_LIMIT);
+}
+
 function getItemsByCategory(categoryId: string): CategoryItem[] {
     if (!_categoryData) return [];
     if (categoryId === 'all') return buildAllItems();
+    if (categoryId === 'hot') return buildHotItems();
+    if (categoryId === 'top-downloads') return buildTopDownloadsItems();
     const group = _categoryData.categories.find((c) => c.id === categoryId);
     if (!group) return [];
     return group.items.map((item) => ({ ...item }));

miniprogram/pages/category/category.wxml

@@ -37,7 +37,9 @@
                     class="cat-sidebar__item {{activeCategoryId === item.id ? 'cat-sidebar__item--active' : ''}}"
                     data-id="{{item.id}}"
                     bindtap="onTapCategory">
-                    <!-- <text class="cat-sidebar__icon">{{item.icon}}</text> -->
+                    <text wx:if="{{item.icon}}" class="cat-sidebar__icon"
+                        >{{item.icon}}</text
+                    >
                     <text class="cat-sidebar__name">{{item.name}}</text>
                 </view>
             </scroll-view>