chore(release): 合并 develop 到 main

android/app/src/main/res/drawable-night-v21/launch_background.xml

@@ -2,18 +2,6 @@
 <!-- Author: fruit.com.cn -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/splash_background" />
-    <item>
-        <shape android:shape="rectangle">
-            <gradient
-                android:type="radial"
-                android:centerX="0"
-                android:centerY="0"
-                android:gradientRadius="350dp"
-                android:startColor="#FF6B011A"
-                android:centerColor="#616B011A"
-                android:endColor="#006B011A" />
-        </shape>
-    </item>
     <item>
         <bitmap
             android:gravity="center"

android/app/src/main/res/drawable-night/launch_background.xml

@@ -2,18 +2,6 @@
 <!-- Author: fruit.com.cn -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/splash_background" />
-    <item>
-        <shape android:shape="rectangle">
-            <gradient
-                android:type="radial"
-                android:centerX="0"
-                android:centerY="0"
-                android:gradientRadius="350dp"
-                android:startColor="#FF6B011A"
-                android:centerColor="#616B011A"
-                android:endColor="#006B011A" />
-        </shape>
-    </item>
     <item>
         <bitmap
             android:gravity="center"

android/app/src/main/res/drawable-v21/launch_background.xml

@@ -2,18 +2,6 @@
 <!-- Author: fruit.com.cn -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/splash_background" />
-    <item>
-        <shape android:shape="rectangle">
-            <gradient
-                android:type="radial"
-                android:centerX="0"
-                android:centerY="0"
-                android:gradientRadius="350dp"
-                android:startColor="#FF6B011A"
-                android:centerColor="#616B011A"
-                android:endColor="#006B011A" />
-        </shape>
-    </item>
     <item>
         <bitmap
             android:gravity="center"

android/app/src/main/res/drawable-v31/launch_background.xml

@@ -2,18 +2,6 @@
 <!-- Author: fruit.com.cn -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/splash_background" />
-    <item>
-        <shape android:shape="rectangle">
-            <gradient
-                android:type="radial"
-                android:centerX="0"
-                android:centerY="0"
-                android:gradientRadius="350dp"
-                android:startColor="#FF6B011A"
-                android:centerColor="#616B011A"
-                android:endColor="#006B011A" />
-        </shape>
-    </item>
     <item>
         <bitmap
             android:gravity="center"

android/app/src/main/res/drawable/launch_background.xml

@@ -2,18 +2,6 @@
 <!-- Author: fruit.com.cn -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/splash_background" />
-    <item>
-        <shape android:shape="rectangle">
-            <gradient
-                android:type="radial"
-                android:centerX="0"
-                android:centerY="0"
-                android:gradientRadius="350dp"
-                android:startColor="#FF6B011A"
-                android:centerColor="#616B011A"
-                android:endColor="#006B011A" />
-        </shape>
-    </item>
     <item>
         <bitmap
             android:gravity="center"

android/app/src/main/res/values/colors.xml

@@ -3,5 +3,5 @@
 
 <resources>
 	<color name="splash_background">#000000</color>
-	<color name="ic_launcher_background">#E9142E</color>
+	<color name="ic_launcher_background">#000000</color>
 </resources>

lib/app.dart

@@ -268,7 +268,9 @@ class _LumaDramaAppState extends State<LumaDramaApp> {
   CategoryController _createCategories() {
     final controller = CategoryController(_categoryRepository);
     if (widget.catalogRepository == null) {
-      controller.dramaPageLoader = CategoryApi(_apiClient).dramas;
+      final api = CategoryApi(_apiClient);
+      controller.dramaPageLoader = api.dramas;
+      controller.rankingLoader = api.ranking;
     }
     controller.load();
     return controller;

lib/core/data/models/category_ranking.dart

@@ -0,0 +1,67 @@
+// Author: fruit.com.cn
+
+import 'drama.dart';
+import 'locale_text.dart';
+
+/// 服务端推荐榜快照；顺序和排名均不可在客户端重算。
+class CategoryRanking {
+  const CategoryRanking({
+    required this.id,
+    required this.code,
+    required this.revision,
+    required this.entries,
+    this.locales = const {},
+    this.generatedAt,
+  });
+
+  final String id;
+  final String code;
+  final String revision;
+  final Map<String, String> locales;
+  final DateTime? generatedAt;
+  final List<CategoryRankingEntry> entries;
+
+  /// 解析 `GET /app/categories/{id}/ranking`。
+  factory CategoryRanking.fromJson(Map<String, dynamic> json) {
+    final rawList = json['list'];
+    final entries = rawList is List
+        ? rawList
+              .whereType<Map>()
+              .map(
+                (item) =>
+                    CategoryRankingEntry.fromJson(item.cast<String, dynamic>()),
+              )
+              .toList(growable: false)
+        : const <CategoryRankingEntry>[];
+    return CategoryRanking(
+      id: (json['id'] ?? '').toString(),
+      code: json['code'] as String? ?? '',
+      revision: (json['revision'] ?? '1').toString(),
+      locales: localeMap(json['locales']),
+      generatedAt: DateTime.tryParse(json['generatedAt'] as String? ?? ''),
+      entries: entries,
+    );
+  }
+}
+
+/// 推荐榜中的一部短剧及其服务端排名。
+class CategoryRankingEntry {
+  const CategoryRankingEntry({required this.rank, required this.drama});
+
+  final int rank;
+  final Drama drama;
+
+  factory CategoryRankingEntry.fromJson(Map<String, dynamic> json) {
+    final rawDrama = json['drama'];
+    return CategoryRankingEntry(
+      rank: (json['rank'] as num?)?.toInt() ?? 0,
+      drama: Drama.fromCardJson(
+        rawDrama is Map<String, dynamic>
+            ? rawDrama
+            : rawDrama is Map
+            ? rawDrama.cast<String, dynamic>()
+            : const <String, dynamic>{},
+      ),
+    );
+  }
+}

lib/core/data/models/content_category.dart

@@ -7,10 +7,19 @@ class ContentCategory {
   const ContentCategory({
     required this.id,
     required this.name,
+    this.code = '',
+    this.layoutType = gridLayout,
+    this.revision = '1',
     this.locales = const {},
   });
 
+  static const String gridLayout = 'GRID';
+  static const String rankingLayout = 'RANKING';
+
   final String id;
+  final String code;
+  final String layoutType;
+  final String revision;
 
   /// 中文名称，与 locales 里的 zh 相同。
   final String name;
@@ -20,9 +29,18 @@ class ContentCategory {
   factory ContentCategory.fromJson(Map<String, dynamic> json) {
     final locales = localeMap(json['locales']);
     final name = json['name'] as String? ?? locales['zh'] ?? '';
-    return ContentCategory(id: (json['id'] ?? '').toString(), name: name, locales: locales);
+    return ContentCategory(
+      id: (json['id'] ?? '').toString(),
+      name: name,
+      code: json['code'] as String? ?? '',
+      layoutType: json['layoutType'] as String? ?? gridLayout,
+      revision: (json['revision'] ?? '1').toString(),
+      locales: locales,
+    );
   }
 
+  bool get isRanking => layoutType == rankingLayout;
+
   /// 按界面语言取名称。缺对应语言时回落到中文。
   String localizedName(String languageCode) {
     return localizedText(languageCode, name, locales);

lib/core/data/remote/category_api.dart

@@ -1,6 +1,7 @@
 // Author: fruit.com.cn
 
 import '../models/content_category.dart';
+import '../models/category_ranking.dart';
 import '../models/drama.dart';
 import '../models/page_result.dart';
 import 'api_client.dart';
@@ -30,11 +31,14 @@ class CategoryApi {
   }) async {
     final data = await _client.get(
       '/app/categories/$categoryId/dramas',
-      query: {
+      query: {'pageIndex': '$pageIndex', 'pageSize': '$pageSize'},
-        'pageIndex': '$pageIndex',
-        'pageSize': '$pageSize',
-      },
     );
     return PageResult.parse(data, Drama.fromCardJson);
   }
+
+  /// 推荐榜快照，服务端已确定内容顺序和连续排名。
+  Future<CategoryRanking> ranking(String categoryId) async {
+    final data = await _client.get('/app/categories/$categoryId/ranking');
+    return CategoryRanking.fromJson(ResponseDecoders.asMap(data));
+  }
 }

lib/core/data/services/category_controller.dart

@@ -4,6 +4,7 @@ import 'package:flutter/foundation.dart';
 
 import '../../config/app_config.dart';
 import '../models/content_category.dart';
+import '../models/category_ranking.dart';
 import '../models/drama.dart';
 import '../models/home_feed.dart';
 import '../models/page_result.dart';
@@ -21,10 +22,15 @@ class CategoryController extends ChangeNotifier {
     String categoryId, {
     int pageIndex,
     int pageSize,
-  })? dramaPageLoader;
+  })?
+  dramaPageLoader;
+
+  /// 生产环境推荐榜加载器，测试与本地数据模式可不注入。
+  Future<CategoryRanking> Function(String categoryId)? rankingLoader;
 
   List<ContentCategory> categories = const [];
   final Map<String, CategoryDramaSlot> _slots = {};
+  final Map<String, CategoryRankingSlot> _rankingSlots = {};
   HomeFeed feed = const HomeFeed();
   bool loading = false;
   String? error;
@@ -36,6 +42,29 @@ class CategoryController extends ChangeNotifier {
     return _slots.putIfAbsent(categoryId, CategoryDramaSlot.new);
   }
 
+  CategoryRankingSlot rankingSlotOf(String categoryId) {
+    return _rankingSlots.putIfAbsent(categoryId, CategoryRankingSlot.new);
+  }
+
+  /// 打开推荐榜并获取当前服务端快照。
+  Future<void> openRanking(String categoryId) async {
+    final loader = rankingLoader;
+    if (loader == null) return;
+    final slot = rankingSlotOf(categoryId);
+    slot.loading = true;
+    slot.error = null;
+    _notify();
+    try {
+      slot.ranking = await loader(categoryId);
+    } catch (exception) {
+      slot.error = exception;
+      if (kDebugMode) debugPrint('[category-ranking] $exception');
+    } finally {
+      slot.loading = false;
+      _notify();
+    }
+  }
+
   /// 打开分类并加载第一页短剧。
   Future<void> openCategory(String categoryId) async {
     final loader = dramaPageLoader;
@@ -126,8 +155,14 @@ class CategoryController extends ChangeNotifier {
       loading = false;
       _notify();
     }
-    if (error == null && dramaPageLoader != null && categories.isNotEmpty) {
+    final hasRemoteLoader = dramaPageLoader != null || rankingLoader != null;
-      await openCategory(categories.first.id);
+    if (error == null && hasRemoteLoader && categories.isNotEmpty) {
+      final first = categories.first;
+      if (first.isRanking) {
+        await openRanking(first.id);
+      } else {
+        await openCategory(first.id);
+      }
     }
   }
 
@@ -152,3 +187,10 @@ class CategoryDramaSlot {
 
   bool get hasMore => dramas.length < total;
 }
+
+/// 单个推荐榜的快照状态。
+class CategoryRankingSlot {
+  CategoryRanking? ranking;
+  Object? error;
+  bool loading = false;
+}

lib/core/data/services/download_controller.dart

@@ -120,7 +120,9 @@ class DownloadController extends ChangeNotifier {
     String episodeId, {
     DownloadLicense? license,
   }) async {
-    if (_downloading.contains(episodeId)) return const DownloadActionResult(ok: true);
+    if (_downloading.contains(episodeId)) {
+      return const DownloadActionResult(ok: true);
+    }
     final source = license ?? _licenseFor(episodeId);
     if (source == null) return const DownloadActionResult(ok: false);
     _beginDownload(episodeId);
@@ -129,7 +131,8 @@ class DownloadController extends ChangeNotifier {
       final media = await _storage.download(
         episodeId: episodeId,
         url: resolved,
-        onProgress: (received, total) => _onProgress(episodeId, received, total),
+        onProgress: (received, total) =>
+            _onProgress(episodeId, received, total),
       );
       _localPaths[episodeId] = media.filePath;
       _progress[episodeId] = 1;

lib/core/theme/app_dimens.dart

@@ -157,17 +157,9 @@ abstract final class AppDimens {
   /// 首页热播榜。
   static const double rankingHeroTitle = 22;
   static const double rankingHeroSubtitle = 11;
-  static const double rankingPodiumChampionWidth = 110;
-  static const double rankingPodiumChampionHeight = 146;
-  static const double rankingPodiumWidth = 92;
-  static const double rankingPodiumHeight = 122;
-  static const double rankingPodiumRadius = 10;
-  static const double rankingRowHeight = 96;
-  static const double rankingNumberWidth = 56;
-  static const double rankingNumberFont = 48;
-  static const double rankingCoverWidth = 60;
-  static const double rankingCoverHeight = 80;
   static const double rankingCoverRadius = 6;
+  static const double rankingCardCoverWidth = 96;
+  static const double rankingCardCoverHeight = 128;
 
   /// 全部短剧筛选与追剧双列。
   static const double filterChipFont = 16;

lib/core/widgets/app_bottom_nav.dart

@@ -18,6 +18,7 @@ class AppBottomNavItem {
     this.selected = false,
     this.assetPath,
     this.selectedAssetPath,
+    this.customIcon,
   });
 
   final Key tabKey;
@@ -25,6 +26,7 @@ class AppBottomNavItem {
   final IconData selectedIcon;
   final String? assetPath;
   final String? selectedAssetPath;
+  final Widget? customIcon;
   final String label;
   final VoidCallback onTap;
   final bool selected;
@@ -93,14 +95,19 @@ class _NavDestination extends StatelessWidget {
                   duration: const Duration(milliseconds: 160),
                   curve: Curves.easeOut,
                   scale: item.selected ? 1 : 0.96,
-                  child: assetPath == null
+                  child:
+                      item.customIcon ??
+                      (assetPath == null
                           ? Icon(
                               fallbackIcon,
                               size: AppDimens.navIcon,
                               color: color,
                             )
                           : ColorFiltered(
-                          colorFilter: ColorFilter.mode(color, BlendMode.srcIn),
+                              colorFilter: ColorFilter.mode(
+                                color,
+                                BlendMode.srcIn,
+                              ),
                               child: Image.asset(
                                 assetPath,
                                 width: AppDimens.navIcon,
@@ -112,7 +119,7 @@ class _NavDestination extends StatelessWidget {
                                   color: color,
                                 ),
                               ),
-                        ),
+                            )),
                 ),
                 const SizedBox(height: AppDimens.navLabelGap),
                 Text(

lib/core/widgets/app_root_tab.dart

@@ -2,8 +2,10 @@
 
 import 'package:flutter/material.dart';
 
+import '../theme/app_dimens.dart';
 import '../../l10n/app_localizations.dart';
 import 'app_bottom_nav.dart';
+import 'root_nav_glyph.dart';
 
 /// 客户端根导航的固定顺序。
 enum AppRootTab {
@@ -16,6 +18,13 @@ enum AppRootTab {
 }
 
 extension AppRootTabUi on AppRootTab {
+  RootNavGlyphKind get glyphKind => switch (this) {
+    AppRootTab.home => RootNavGlyphKind.home,
+    AppRootTab.recommend => RootNavGlyphKind.recommend,
+    AppRootTab.following => RootNavGlyphKind.following,
+    AppRootTab.mine => RootNavGlyphKind.mine,
+  };
+
   Key get tabKey => switch (this) {
     AppRootTab.home => const Key('tab-home'),
     AppRootTab.recommend => const Key('tab-recommend'),
@@ -71,6 +80,11 @@ class AppRootBottomNav extends StatelessWidget {
             selectedIcon: tab.selectedIcon,
             label: tab.label(l10n),
             selected: tab == selected,
+            customIcon: RootNavGlyph(
+              kind: tab.glyphKind,
+              selected: tab == selected,
+              size: AppDimens.navIcon,
+            ),
             onTap: () => onSelected(tab),
           ),
       ],

lib/core/widgets/empty_state.dart

@@ -5,12 +5,12 @@ import 'package:flutter/material.dart';
 import '../theme/app_colors.dart';
 import '../theme/app_dimens.dart';
 
-const double _regularIconSize = 72;
+const double _iconSize = 72;
-const double _compactIconSize = 44;
 const double _maxContentWidth = 260;
 const double _regularHorizontal = 24;
 const double _regularVertical = 28;
-const double _compactPad = 16;
+const double _compactHorizontal = 16;
+const double _compactVertical = 4;
 const double _regularGap = 20;
 const double _compactGap = 12;
 const double _actionMinHeight = 44;
@@ -27,6 +27,7 @@ class EmptyState extends StatelessWidget {
     this.onAction,
     this.footer,
     this.compact = false,
+    this.stretchContent = false,
   });
 
   final IconData icon;
@@ -38,6 +39,9 @@ class EmptyState extends StatelessWidget {
   final Widget? footer;
   final bool compact;
 
+  /// 让图标和文案占满内容宽度，适用于需要严格居中的宽版空状态。
+  final bool stretchContent;
+
   @override
   Widget build(BuildContext context) {
     final hasAction = actionLabel != null && onAction != null;
@@ -48,49 +52,53 @@ class EmptyState extends StatelessWidget {
         child: Padding(
           key: const Key('empty-state-padding'),
           padding: EdgeInsets.symmetric(
-            horizontal: compact ? _compactPad : _regularHorizontal,
+            horizontal: compact ? _compactHorizontal : _regularHorizontal,
-            vertical: compact ? _compactPad : _regularVertical,
+            vertical: compact ? _compactVertical : _regularVertical,
           ),
+          child: SizedBox(
+            width: stretchContent ? double.infinity : null,
             child: Semantics(
               container: true,
               label: title,
               child: Column(
                 mainAxisSize: MainAxisSize.min,
                 children: [
-                ExcludeSemantics(
+                  ExcludeSemantics(child: _EmptyMark(icon: icon)),
-                  child: _EmptyMark(icon: icon, compact: compact),
-                ),
                   SizedBox(height: compact ? _compactGap : _regularGap),
-                _EmptyCopy(
+                  SizedBox(
+                    width: stretchContent ? double.infinity : null,
+                    child: _EmptyCopy(
                       title: title,
                       subtitle: subtitle,
                       actionLabel: hasAction ? actionLabel : null,
                       actionKey: actionKey,
                       onAction: hasAction ? onAction : null,
                       footer: footer,
+                      stretchContent: stretchContent,
+                    ),
                   ),
                 ],
               ),
             ),
           ),
         ),
+      ),
     );
   }
 }
 
 /// 空列表只放一枚大图标，不画线框，也不铺底色。
 class _EmptyMark extends StatelessWidget {
-  const _EmptyMark({required this.icon, required this.compact});
+  const _EmptyMark({required this.icon});
 
   final IconData icon;
-  final bool compact;
 
   @override
   Widget build(BuildContext context) {
     return Icon(
       icon,
       key: const Key('empty-state-icon'),
-      size: compact ? _compactIconSize : _regularIconSize,
+      size: _iconSize,
       color: AppColors.subtle,
     );
   }
@@ -104,6 +112,7 @@ class _EmptyCopy extends StatelessWidget {
     required this.actionKey,
     required this.onAction,
     required this.footer,
+    required this.stretchContent,
   });
 
   final String title;
@@ -112,11 +121,15 @@ class _EmptyCopy extends StatelessWidget {
   final Key? actionKey;
   final VoidCallback? onAction;
   final Widget? footer;
+  final bool stretchContent;
 
   @override
   Widget build(BuildContext context) {
     return Column(
       mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: stretchContent
+          ? CrossAxisAlignment.stretch
+          : CrossAxisAlignment.center,
       children: [
         ExcludeSemantics(
           child: Text(

lib/core/widgets/image_placeholder_shimmer.dart

@@ -1,86 +0,0 @@
-// Author: fruit.com.cn
-// 职责：给默认图片加载占位叠加可暂停、局部重绘的轻量扫光。
-import 'package:flutter/material.dart';
-
-const _sweepDuration = Duration(milliseconds: 1400);
-const double _bandWidthRatio = 0.65;
-const _highlight = Color(0x12FFFFFF);
-const _clear = Color(0x00FFFFFF);
-
-/// 只用于等待真实图片的占位；减少动画或页面离屏时不运行扫光。
-class ImagePlaceholderShimmer extends StatefulWidget {
-  /// 在 [child] 上方绘制不影响布局与点击区域的扫光。
-  const ImagePlaceholderShimmer({super.key, required this.child});
-
-  final Widget child;
-
-  @override
-  State<ImagePlaceholderShimmer> createState() =>
-      _ImagePlaceholderShimmerState();
-}
-
-class _ImagePlaceholderShimmerState extends State<ImagePlaceholderShimmer>
-    with SingleTickerProviderStateMixin {
-  late final AnimationController _controller = AnimationController(
-    vsync: this,
-    duration: _sweepDuration,
-  );
-  bool _active = false;
-
-  @override
-  void didChangeDependencies() {
-    super.didChangeDependencies();
-    _active =
-        TickerMode.valuesOf(context).enabled &&
-        !MediaQuery.disableAnimationsOf(context);
-    if (_active) {
-      _controller.repeat();
-    } else {
-      _controller.stop();
-    }
-  }
-
-  @override
-  void dispose() {
-    _controller.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    if (!_active) return widget.child;
-    return RepaintBoundary(
-      child: ClipRect(
-        child: CustomPaint(
-          foregroundPainter: _SweepPainter(_controller),
-          child: widget.child,
-        ),
-      ),
-    );
-  }
-}
-
-class _SweepPainter extends CustomPainter {
-  _SweepPainter(this.progress) : super(repaint: progress);
-
-  final Animation<double> progress;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    if (size.isEmpty) return;
-    final bandWidth = size.width * _bandWidthRatio;
-    final left = -bandWidth + (size.width + bandWidth) * progress.value;
-    final rect = Rect.fromLTWH(left, 0, bandWidth, size.height);
-    final paint = Paint()
-      ..shader = const LinearGradient(
-        begin: Alignment.topLeft,
-        end: Alignment.bottomRight,
-        colors: [_clear, _highlight, _clear],
-      ).createShader(rect);
-    canvas.drawRect(rect, paint);
-  }
-
-  @override
-  bool shouldRepaint(covariant _SweepPainter oldDelegate) =>
-      oldDelegate.progress != progress;
-}

lib/core/widgets/remote_image.dart

@@ -1,10 +1,10 @@
 // Author: fruit.com.cn
+// 职责：统一网络图片入口，补服务地址，并在加载中/失败时显示纯色占位块。
 
 import 'package:flutter/material.dart';
 
 import '../config/app_config.dart';
 import '../theme/app_colors.dart';
-import 'image_placeholder_shimmer.dart';
 
 const int _minImageDecodePixels = 96;
 const int _maxImageDecodePixels = 2048;
@@ -32,8 +32,6 @@ class RemoteImage extends StatelessWidget {
     this.width,
     this.height,
     this.fit = BoxFit.cover,
-    this.showFallbackIcon = false,
-    this.fallbackIconKey,
     this.fallbackAspectRatio,
     this.fallbackColor = AppColors.raised,
     this.fallbackWidget,
@@ -45,12 +43,10 @@ class RemoteImage extends StatelessWidget {
   final double? width;
   final double? height;
   final BoxFit fit;
-  final bool showFallbackIcon;
-  final Key? fallbackIconKey;
   final double? fallbackAspectRatio;
   final Color fallbackColor;
 
-  /// 自定义兜底：地址为空、加载中、加载失败时都显示它（优先于 [fallbackColor]）。
+  /// 自定义占位：地址为空、加载中、加载失败时都显示它（优先于 [fallbackColor]）。
   final Widget? fallbackWidget;
   final int? decodeWidth;
   final int? decodeHeight;
@@ -58,7 +54,7 @@ class RemoteImage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final url = AppConfig.mediaUrl(path);
-    if (url.isEmpty) return _fallback(brand: showFallbackIcon);
+    if (url.isEmpty) return _fallback();
     return LayoutBuilder(
       builder: (context, constraints) {
         final pixelRatio = MediaQuery.devicePixelRatioOf(context);
@@ -100,51 +96,23 @@ class RemoteImage extends StatelessWidget {
               ?.clamp(_minImageDecodePixels, _maxImageDecodePixels)
               .toInt(),
           gaplessPlayback: true,
-          errorBuilder: (_, _, _) => _fallback(brand: showFallbackIcon),
+          errorBuilder: (_, _, _) => _fallback(),
           frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
             if (wasSynchronouslyLoaded || frame != null) return child;
-            return _loadingFallback();
+            return _fallback();
           },
         );
       },
     );
   }
 
-  Widget _loadingFallback() {
+  Widget _fallback() {
     final custom = fallbackWidget;
-    if (custom != null) return custom;
+    final content = custom != null
-    return ImagePlaceholderShimmer(child: _fallback(brand: showFallbackIcon));
+        ? SizedBox(width: width, height: height, child: custom)
-  }
+        : Container(width: width, height: height, color: fallbackColor);
-
-  Widget _fallback({required bool brand}) {
-    final custom = fallbackWidget;
-    if (custom != null) return custom;
-    final mark = brand
-        ? LayoutBuilder(
-            builder: (context, constraints) {
-              final width = constraints.maxWidth.isFinite
-                  ? constraints.maxWidth
-                  : 120.0;
-              return Center(
-                child: Image.asset(
-                  'assets/icon/splash_logo.png',
-                  key: fallbackIconKey,
-                  width: width * 0.72,
-                  fit: BoxFit.contain,
-                ),
-              );
-            },
-          )
-        : null;
-    final fallback = Container(
-      width: width,
-      height: height,
-      color: brand ? AppColors.mediaBlack : fallbackColor,
-      alignment: Alignment.center,
-      child: mark,
-    );
     final ratio = fallbackAspectRatio;
-    if (ratio == null) return fallback;
+    if (ratio == null) return content;
-    return AspectRatio(aspectRatio: ratio, child: fallback);
+    return AspectRatio(aspectRatio: ratio, child: content);
   }
 }

lib/core/widgets/root_nav_glyph.dart

@@ -0,0 +1,180 @@
+// Author: fruit.com.cn
+// 职责：绘制根导航使用的饱满品牌插画图标。
+
+import 'package:flutter/material.dart';
+
+import '../theme/app_colors.dart';
+
+const double _designSize = 30;
+
+/// 根导航四个入口对应的图标种类。
+enum RootNavGlyphKind { home, recommend, following, mine }
+
+/// 根导航插画图标，根据选中态使用品牌红和中性灰白配色。
+class RootNavGlyph extends StatelessWidget {
+  const RootNavGlyph({
+    super.key,
+    required this.kind,
+    required this.selected,
+    required this.size,
+  });
+
+  final RootNavGlyphKind kind;
+  final bool selected;
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size.square(size),
+      painter: _RootNavGlyphPainter(kind: kind, selected: selected),
+    );
+  }
+}
+
+class _RootNavGlyphPainter extends CustomPainter {
+  const _RootNavGlyphPainter({required this.kind, required this.selected});
+
+  final RootNavGlyphKind kind;
+  final bool selected;
+
+  Color get _main => selected ? AppColors.navSelected : const Color(0xFFD0D0D2);
+  Color get _light => selected ? AppColors.homeCrownGold : Colors.white;
+  Color get _shade =>
+      selected ? const Color(0xFF9F2935) : const Color(0xFF858589);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.scale(size.width / _designSize);
+    switch (kind) {
+      case RootNavGlyphKind.home:
+        _paintHome(canvas);
+      case RootNavGlyphKind.recommend:
+        _paintRecommend(canvas);
+      case RootNavGlyphKind.following:
+        _paintFollowing(canvas);
+      case RootNavGlyphKind.mine:
+        _paintMine(canvas);
+    }
+    canvas.restore();
+  }
+
+  void _paintHome(Canvas canvas) {
+    final roof = Path()
+      ..moveTo(3, 13)
+      ..lineTo(15, 3)
+      ..lineTo(27, 13)
+      ..lineTo(24, 16)
+      ..lineTo(15, 8.5)
+      ..lineTo(6, 16)
+      ..close();
+    canvas.drawShadow(roof, AppColors.shadow, 2, false);
+    canvas.drawPath(roof, _gradient(const Rect.fromLTWH(3, 3, 24, 13)));
+    final body = RRect.fromRectAndRadius(
+      const Rect.fromLTRB(6, 13, 24, 27),
+      const Radius.circular(3),
+    );
+    canvas.drawRRect(body, _gradient(const Rect.fromLTWH(6, 13, 18, 14)));
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        const Rect.fromLTRB(12, 18, 18, 27),
+        const Radius.circular(2),
+      ),
+      Paint()..color = _shade,
+    );
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        const Rect.fromLTRB(8, 16, 11, 19),
+        const Radius.circular(1),
+      ),
+      Paint()..color = _light,
+    );
+  }
+
+  void _paintRecommend(Canvas canvas) {
+    final body = RRect.fromRectAndRadius(
+      const Rect.fromLTRB(6, 4, 24, 27),
+      const Radius.circular(5),
+    );
+    canvas.drawShadow(Path()..addRRect(body), AppColors.shadow, 2, false);
+    canvas.drawRRect(body, _gradient(const Rect.fromLTWH(6, 4, 18, 23)));
+    for (var index = 0; index < 3; index++) {
+      final left = 9.0 + index * 5;
+      canvas.drawRRect(
+        RRect.fromRectAndRadius(
+          Rect.fromLTWH(left, 7, 3, 2.5),
+          const Radius.circular(1),
+        ),
+        Paint()..color = _light,
+      );
+    }
+    final play = Path()
+      ..moveTo(12, 13)
+      ..quadraticBezierTo(12, 11.5, 13.5, 12.3)
+      ..lineTo(19.5, 15.7)
+      ..quadraticBezierTo(21, 16.5, 19.5, 17.3)
+      ..lineTo(13.5, 20.7)
+      ..quadraticBezierTo(12, 21.5, 12, 20)
+      ..close();
+    canvas.drawPath(play, Paint()..color = _light);
+  }
+
+  void _paintFollowing(Canvas canvas) {
+    final page = RRect.fromRectAndRadius(
+      const Rect.fromLTRB(5, 4, 25, 27),
+      const Radius.circular(4),
+    );
+    canvas.drawShadow(Path()..addRRect(page), AppColors.shadow, 2, false);
+    canvas.drawRRect(page, _gradient(const Rect.fromLTWH(5, 4, 20, 23)));
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        const Rect.fromLTRB(8, 9, 17, 10.5),
+        const Radius.circular(0.7),
+      ),
+      Paint()..color = _light,
+    );
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        const Rect.fromLTRB(8, 13, 16, 14.5),
+        const Radius.circular(0.7),
+      ),
+      Paint()..color = _light,
+    );
+    final bookmark = Path()
+      ..moveTo(18, 7)
+      ..lineTo(22, 7)
+      ..lineTo(22, 20)
+      ..lineTo(20, 18)
+      ..lineTo(18, 20)
+      ..close();
+    canvas.drawPath(bookmark, Paint()..color = _light);
+  }
+
+  void _paintMine(Canvas canvas) {
+    final bounds = Rect.fromCircle(center: const Offset(15, 15), radius: 13);
+    canvas.drawShadow(Path()..addOval(bounds), AppColors.shadow, 2, false);
+    canvas.drawCircle(const Offset(15, 15), 13, _gradient(bounds));
+    canvas.drawCircle(const Offset(15, 11), 4, Paint()..color = _light);
+    final shoulders = Path()
+      ..moveTo(7, 24)
+      ..cubicTo(7.5, 19, 10.5, 17, 15, 17)
+      ..cubicTo(19.5, 17, 22.5, 19, 23, 24)
+      ..quadraticBezierTo(15, 29, 7, 24)
+      ..close();
+    canvas.drawPath(shoulders, Paint()..color = _light);
+    canvas.drawCircle(const Offset(13.5, 11), 0.55, Paint()..color = _shade);
+    canvas.drawCircle(const Offset(16.5, 11), 0.55, Paint()..color = _shade);
+  }
+
+  Paint _gradient(Rect bounds) => Paint()
+    ..shader = LinearGradient(
+      begin: Alignment.topLeft,
+      end: Alignment.bottomRight,
+      colors: [_light, _main, _shade],
+    ).createShader(bounds);
+
+  @override
+  bool shouldRepaint(covariant _RootNavGlyphPainter oldDelegate) =>
+      oldDelegate.kind != kind || oldDelegate.selected != selected;
+}

lib/l10n/app_en.arb

@@ -83,6 +83,12 @@
       "count": {"type": "String"}
     }
   },
+  "likesLabel": "{count} likes",
+  "@likesLabel": {
+    "placeholders": {
+      "count": {"type": "String"}
+    }
+  },
   "topCharts": "Hot Ranking",
   "newReleases": "New Releases",
   "newDramas": "New",
@@ -359,7 +365,7 @@
   "categoriesError": "Categories could not be loaded.",
   "detailError": "The episode list could not be loaded.",
   "noMediaNotice": "This episode has no playable media yet.",
-  "noStories": "No stories available yet.",
+  "noStories": "No stories available yet",
   "notices": "Notices",
   "noNotices": "No notices yet.",
   "noticesLoadFailed": "Notices could not be loaded.",

lib/l10n/app_id.arb

@@ -72,6 +72,7 @@
   "authorNoteLabel": "Catatan penulis",
   "reserve": "Reservasi",
   "heatLabel": "{count} panas",
+  "likesLabel": "{count} suka",
   "topCharts": "Peringkat Populer",
   "newReleases": "Rilisan Baru",
   "newDramas": "Baru",
@@ -338,7 +339,7 @@
   "categoriesError": "Kategori gagal dimuat.",
   "detailError": "Daftar episode gagal dimuat.",
   "noMediaNotice": "Episode ini belum punya media yang bisa diputar.",
-  "noStories": "Belum ada cerita.",
+  "noStories": "Belum ada cerita",
   "notices": "Notifikasi",
   "noNotices": "Belum ada notifikasi.",
   "noticesLoadFailed": "Notifikasi tidak dapat dimuat.",

lib/l10n/app_localizations.dart

@@ -442,6 +442,12 @@ abstract class AppLocalizations {
   /// **'{count} heat'**
   String heatLabel(String count);
 
+  /// No description provided for @likesLabel.
+  ///
+  /// In en, this message translates to:
+  /// **'{count} likes'**
+  String likesLabel(String count);
+
   /// No description provided for @topCharts.
   ///
   /// In en, this message translates to:
@@ -1393,7 +1399,7 @@ abstract class AppLocalizations {
   /// No description provided for @noStories.
   ///
   /// In en, this message translates to:
-  /// **'No stories available yet.'**
+  /// **'No stories available yet'**
   String get noStories;
 
   /// No description provided for @notices.

lib/l10n/app_localizations_en.dart

@@ -191,6 +191,11 @@ class AppLocalizationsEn extends AppLocalizations {
     return '$count heat';
   }
 
+  @override
+  String likesLabel(String count) {
+    return '$count likes';
+  }
+
   @override
   String get topCharts => 'Hot Ranking';
 
@@ -709,7 +714,7 @@ class AppLocalizationsEn extends AppLocalizations {
   String get noMediaNotice => 'This episode has no playable media yet.';
 
   @override
-  String get noStories => 'No stories available yet.';
+  String get noStories => 'No stories available yet';
 
   @override
   String get notices => 'Notices';

lib/l10n/app_localizations_id.dart

@@ -191,6 +191,11 @@ class AppLocalizationsId extends AppLocalizations {
     return '$count panas';
   }
 
+  @override
+  String likesLabel(String count) {
+    return '$count suka';
+  }
+
   @override
   String get topCharts => 'Peringkat Populer';
 
@@ -712,7 +717,7 @@ class AppLocalizationsId extends AppLocalizations {
       'Episode ini belum punya media yang bisa diputar.';
 
   @override
-  String get noStories => 'Belum ada cerita.';
+  String get noStories => 'Belum ada cerita';
 
   @override
   String get notices => 'Notifikasi';

lib/l10n/app_localizations_zh.dart

@@ -189,6 +189,11 @@ class AppLocalizationsZh extends AppLocalizations {
     return '$count热度';
   }
 
+  @override
+  String likesLabel(String count) {
+    return '$count次点赞';
+  }
+
   @override
   String get topCharts => '热播榜';
 
@@ -702,7 +707,7 @@ class AppLocalizationsZh extends AppLocalizations {
   String get noMediaNotice => '该剧集还没有可播放的片源。';
 
   @override
-  String get noStories => '暂无剧目。';
+  String get noStories => '暂无剧目';
 
   @override
   String get notices => '通知';

lib/l10n/app_zh.arb

@@ -72,6 +72,7 @@
   "authorNoteLabel": "作者声明",
   "reserve": "预约",
   "heatLabel": "{count}热度",
+  "likesLabel": "{count}次点赞",
   "topCharts": "热播榜",
   "newReleases": "新剧",
   "newDramas": "新剧",
@@ -300,7 +301,7 @@
   "categoriesError": "分类加载失败。",
   "detailError": "剧集信息加载失败。",
   "noMediaNotice": "该剧集还没有可播放的片源。",
-  "noStories": "暂无剧目。",
+  "noStories": "暂无剧目",
   "notices": "通知",
   "noNotices": "暂无通知。",
   "noticesLoadFailed": "通知加载失败，请重试。",

lib/pages/discover/discover_view.dart

@@ -297,6 +297,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
               icon: Icons.movie_filter_outlined,
               title: l10n.noStories,
               subtitle: l10n.emptyHint,
+              stretchContent: true,
             ),
           ),
         )

lib/pages/discover/widgets/feed_banner_carousel.dart

@@ -176,7 +176,7 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
       child: Stack(
         fit: StackFit.expand,
         children: [
-          RemoteImage(banner.imageUrl, showFallbackIcon: true),
+          RemoteImage(banner.imageUrl),
           DecoratedBox(
             decoration: BoxDecoration(
               gradient: LinearGradient(

lib/pages/discover/widgets/search_result_card.dart

@@ -37,7 +37,6 @@ class SearchResultCard extends StatelessWidget {
                     RemoteImage(
                       drama.posterUrl,
                       fit: BoxFit.cover,
-                      showFallbackIcon: true,
                       fallbackColor: AppColors.contentSurface,
                     ),
                     const Positioned(
@@ -60,7 +59,9 @@ class SearchResultCard extends StatelessWidget {
             ),
             const SizedBox(height: AppDimens.searchResultTitleGap),
             Text(
-              drama.localizedTitle(Localizations.localeOf(context).languageCode),
+              drama.localizedTitle(
+                Localizations.localeOf(context).languageCode,
+              ),
               key: Key('search-result-title-${drama.id}'),
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
@@ -93,7 +94,9 @@ class SearchResultCard extends StatelessWidget {
   }
 
   List<String> _tags(BuildContext context) {
-    final localized = drama.localizedTypeLabels(Localizations.localeOf(context).languageCode);
+    final localized = drama.localizedTypeLabels(
+      Localizations.localeOf(context).languageCode,
+    );
     if (localized.isNotEmpty) return localized.take(3).toList(growable: false);
     final seen = <String>{};
     return [drama.genre, drama.category]

lib/pages/drama_detail/widgets/drama_detail_header.dart

@@ -126,7 +126,6 @@ class DramaDetailHeader extends StatelessWidget {
             child: RemoteImage(
               drama.posterUrl,
               fit: BoxFit.cover,
-              showFallbackIcon: true,
               fallbackAspectRatio: 3 / 4,
             ),
           ),

lib/pages/favorites/favorites_page.dart

@@ -38,7 +38,6 @@ const double _synopsisFontSize = 12;
 const double _synopsisLineHeight = 1.15;
 const double _synopsisGap = 4;
 const int _maxTags = 2;
-const double _emptyListHeight = 360;
 const double _loadMoreThreshold = 240;
 
 final RegExp _tagSplitter = RegExp(r'[,/、·]');
@@ -124,11 +123,8 @@ class _FavoritesBody extends StatelessWidget {
       );
     }
     if (favorites.error != null && favorites.cards.isEmpty) {
-      return _refreshable(
+      return _refreshableState(
         favorites,
-        children: [
-          SizedBox(
-            height: _emptyListHeight,
         child: EmptyState(
           key: const Key('favorites-error'),
           icon: Icons.cloud_off_rounded,
@@ -136,25 +132,20 @@ class _FavoritesBody extends StatelessWidget {
           actionLabel: l10n.retry,
           actionKey: const Key('favorites-retry'),
           onAction: () => unawaited(favorites.load()),
+          stretchContent: true,
         ),
-          ),
-        ],
       );
     }
     if (favorites.cards.isEmpty) {
-      return _refreshable(
+      return _refreshableState(
         favorites,
-        children: [
-          SizedBox(
-            height: _emptyListHeight,
         child: EmptyState(
           key: const Key('favorites-empty'),
           icon: Icons.star_border_rounded,
           title: l10n.noFavorites,
           subtitle: l10n.emptyHint,
+          stretchContent: true,
         ),
-          ),
-        ],
       );
     }
     return _refreshable(
@@ -205,6 +196,20 @@ class _FavoritesBody extends StatelessWidget {
     );
   }
 
+  Widget _refreshableState(
+    FavoriteController favorites, {
+    required Widget child,
+  }) {
+    return AppPullToRefresh(
+      onRefresh: favorites.load,
+      child: CustomScrollView(
+        key: const Key('favorites-empty-scroll'),
+        physics: AppPullToRefresh.physics,
+        slivers: [SliverFillRemaining(hasScrollBody: false, child: child)],
+      ),
+    );
+  }
+
   bool _onScroll(ScrollNotification notification) {
     if (notification.depth != 0) return false;
     final reachedBottom =

lib/pages/filter/widgets/filter_result_card.dart

@@ -53,7 +53,6 @@ class FilterResultCard extends StatelessWidget {
                   RemoteImage(
                     drama.posterUrl,
                     fit: BoxFit.cover,
-                    showFallbackIcon: true,
                     fallbackAspectRatio: 3 / 4,
                   ),
                   if (drama.isHot)

lib/pages/following/following_grid_card.dart

@@ -64,7 +64,6 @@ class FollowingGridCard extends StatelessWidget {
                     child: RemoteImage(
                       posterUrl,
                       fit: BoxFit.cover,
-                      showFallbackIcon: true,
                       fallbackColor: AppColors.contentSurface,
                     ),
                   ),

lib/pages/following/following_history_card.dart

@@ -75,7 +75,6 @@ class FollowingHistoryCard extends StatelessWidget {
               child: RemoteImage(
                 posterUrl,
                 fit: BoxFit.cover,
-                showFallbackIcon: true,
                 fallbackColor: AppColors.contentSurface,
               ),
             ),

lib/pages/following/widgets/continue_watching_banner.dart

@@ -40,7 +40,6 @@ class ContinueWatchingBanner extends StatelessWidget {
             RemoteImage(
               record.displayLandscapeCover,
               fit: BoxFit.cover,
-              showFallbackIcon: true,
               fallbackColor: AppColors.contentSurface,
             ),
             const DecoratedBox(

lib/pages/home/widgets/home_drama_grid.dart

@@ -122,7 +122,6 @@ class HomeDramaCard extends StatelessWidget {
             drama.posterUrl,
             width: double.infinity,
             fit: BoxFit.fitWidth,
-            showFallbackIcon: true,
             fallbackAspectRatio: _coverAspectRatio,
           ),
           Positioned(top: 8, left: 8, child: _tagBadge()),
@@ -226,7 +225,9 @@ class HomeDramaCard extends StatelessWidget {
   }
 
   Widget _genre(BuildContext context) {
-    final labels = drama.localizedTypeLabels(Localizations.localeOf(context).languageCode);
+    final labels = drama.localizedTypeLabels(
+      Localizations.localeOf(context).languageCode,
+    );
     final genre = labels.isEmpty
         ? (drama.genre.isEmpty ? drama.category : drama.genre)
         : labels.join(' / ');

lib/pages/home/widgets/home_feed_card.dart

@@ -12,11 +12,7 @@ import '../../../core/widgets/remote_image.dart';
 final RegExp _tagSplitter = RegExp(r'[,/、·]');
 
 class HomeFeedCard extends StatelessWidget {
-  const HomeFeedCard({
+  const HomeFeedCard({super.key, required this.drama, required this.onTap});
-    super.key,
-    required this.drama,
-    required this.onTap,
-  });
 
   final Drama drama;
   final VoidCallback onTap;
@@ -44,7 +40,9 @@ class HomeFeedCard extends StatelessWidget {
                   mainAxisAlignment: MainAxisAlignment.start,
                   children: [
                     Text(
-                      drama.localizedTitle(Localizations.localeOf(context).languageCode),
+                      drama.localizedTitle(
+                        Localizations.localeOf(context).languageCode,
+                      ),
                       key: Key('home-feed-title-${drama.id}'),
                       maxLines: 2,
                       overflow: TextOverflow.ellipsis,
@@ -69,7 +67,9 @@ class HomeFeedCard extends StatelessWidget {
   }
 
   Widget _cover(BuildContext context) {
-    final label = drama.localizedTag(Localizations.localeOf(context).languageCode);
+    final label = drama.localizedTag(
+      Localizations.localeOf(context).languageCode,
+    );
     return ClipRRect(
       key: Key('home-feed-cover-clip-${drama.id}'),
       borderRadius: BorderRadius.circular(AppDimens.cardCoverRadius),
@@ -82,7 +82,6 @@ class HomeFeedCard extends StatelessWidget {
               drama.posterUrl,
               key: Key('home-feed-cover-${drama.id}'),
               fit: BoxFit.cover,
-              showFallbackIcon: true,
               fallbackColor: AppColors.contentSurface,
             ),
             if (label.isNotEmpty)
@@ -133,7 +132,9 @@ class HomeFeedCard extends StatelessWidget {
   }
 
   List<String> _cardTags(BuildContext context) {
-    final localized = drama.localizedTypeLabels(Localizations.localeOf(context).languageCode);
+    final localized = drama.localizedTypeLabels(
+      Localizations.localeOf(context).languageCode,
+    );
     if (localized.isNotEmpty) return localized.take(3).toList(growable: false);
     final seen = <String>{};
     return [drama.genre, drama.category]

lib/pages/home/widgets/home_feed_grid.dart

@@ -22,6 +22,7 @@ import '../../../l10n/app_localizations.dart';
 import 'home_category_dramas.dart';
 import 'home_feed_card.dart';
 import 'home_grid_header.dart';
+import 'home_ranking_dramas.dart';
 
 const double _loadMoreThreshold = 240;
 
@@ -175,6 +176,12 @@ class _HomeFeedGridState extends State<HomeFeedGrid> {
     required CatalogController catalog,
   }) {
     final controller = context.read<CategoryController>();
+    if (category.isRanking) {
+      return HomeRankingDramas(
+        categoryId: category.categoryId,
+        onOpenDrama: widget.onOpenDrama,
+      );
+    }
     if (controller.dramaPageLoader != null && category.categoryId.isNotEmpty) {
       return HomeCategoryDramas(
         lockedCategoryId: category.categoryId,
@@ -320,6 +327,7 @@ class _HomeFeedGridState extends State<HomeFeedGrid> {
           categoryName: category.name,
           categoryId: category.id,
           tab: HomePrimaryTab.categories,
+          layoutType: category.layoutType,
         ),
     ];
   }

lib/pages/home/widgets/home_grid_header.dart

@@ -23,12 +23,16 @@ class HomeGridCategoryShortcut {
     required this.categoryName,
     required this.categoryId,
     required this.tab,
+    this.layoutType = 'GRID',
   });
 
   final String label;
   final String categoryName;
   final String categoryId;
   final HomePrimaryTab tab;
+  final String layoutType;
+
+  bool get isRanking => layoutType == 'RANKING';
 }
 
 class HomeGridCallbacks {

lib/pages/home/widgets/home_ranking_dramas.dart

@@ -0,0 +1,173 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../../../core/data/models/category_ranking.dart';
+import '../../../core/data/models/drama.dart';
+import '../../../core/data/services/category_controller.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/app_pull_to_refresh.dart';
+import '../../../core/widgets/drama_grid_skeleton.dart';
+import '../../../core/widgets/empty_state.dart';
+import '../../../l10n/app_localizations.dart';
+import '../../ranking/widgets/ranking_drama_row.dart';
+
+/// 榜单页顶部暗红光晕，向下淡入纯黑（与剧场榜单页一致）。
+const BoxDecoration _rankingBackdrop = BoxDecoration(
+  gradient: LinearGradient(
+    begin: Alignment.topCenter,
+    end: Alignment.bottomCenter,
+    colors: [
+      AppColors.followingGlow,
+      AppColors.followingGlowMid,
+      AppColors.appBackground,
+    ],
+    stops: [0, 0.14, 0.3],
+  ),
+);
+
+/// 推荐榜频道：服务端排名快照，统一行布局，名次角标压在封面左上角。
+class HomeRankingDramas extends StatefulWidget {
+  const HomeRankingDramas({
+    super.key,
+    required this.categoryId,
+    required this.onOpenDrama,
+    this.topPadding = AppDimens.spaceLg,
+  });
+
+  final String categoryId;
+  final ValueChanged<Drama> onOpenDrama;
+  final double topPadding;
+
+  @override
+  State<HomeRankingDramas> createState() => _HomeRankingDramasState();
+}
+
+class _HomeRankingDramasState extends State<HomeRankingDramas> {
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) => _ensureLoaded());
+  }
+
+  @override
+  void didUpdateWidget(HomeRankingDramas oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.categoryId != widget.categoryId) _ensureLoaded();
+  }
+
+  void _ensureLoaded() {
+    if (!mounted) return;
+    final controller = context.read<CategoryController>();
+    final slot = controller.rankingSlotOf(widget.categoryId);
+    if (slot.loading || slot.ranking != null) return;
+    unawaited(controller.openRanking(widget.categoryId));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final controller = context.watch<CategoryController>();
+    final slot = controller.rankingSlotOf(widget.categoryId);
+    final entries = slot.ranking?.entries ?? const <CategoryRankingEntry>[];
+    if (slot.loading && entries.isEmpty) {
+      return const DecoratedBox(
+        key: Key('home-ranking-surface'),
+        decoration: _rankingBackdrop,
+        child: DramaGridSkeleton(
+          key: Key('home-ranking-skeleton'),
+          columns: 3,
+          horizontalPadding: AppDimens.feedPageHorizontal,
+          crossAxisSpacing: AppDimens.homeGridGap,
+          mainAxisSpacing: AppDimens.homeGridRowGap,
+        ),
+      );
+    }
+    return DecoratedBox(
+      key: const Key('home-ranking-surface'),
+      decoration: _rankingBackdrop,
+      child: Material(
+        type: MaterialType.transparency,
+        child: AppPullToRefresh(
+          key: const Key('home-ranking-refresh'),
+          onRefresh: () => controller.openRanking(widget.categoryId),
+          child: _content(context, entries, slot.error),
+        ),
+      ),
+    );
+  }
+
+  Widget _content(
+    BuildContext context,
+    List<CategoryRankingEntry> entries,
+    Object? error,
+  ) {
+    final l10n = AppLocalizations.of(context)!;
+    if (entries.isEmpty) {
+      return CustomScrollView(
+        key: PageStorageKey<String>('home-ranking-scroll-${widget.categoryId}'),
+        physics: AppPullToRefresh.physics,
+        slivers: [
+          SliverFillRemaining(
+            hasScrollBody: false,
+            child: EmptyState(
+              key: Key(
+                error == null ? 'home-ranking-empty' : 'home-ranking-error',
+              ),
+              icon: error == null
+                  ? Icons.leaderboard_outlined
+                  : Icons.cloud_off_rounded,
+              title: error == null ? l10n.emptyContent : l10n.catalogError,
+              actionLabel: error == null ? null : l10n.retry,
+              onAction: error == null
+                  ? null
+                  : () => unawaited(
+                      context.read<CategoryController>().openRanking(
+                        widget.categoryId,
+                      ),
+                    ),
+              stretchContent: true,
+            ),
+          ),
+        ],
+      );
+    }
+    return CustomScrollView(
+      key: PageStorageKey<String>('home-ranking-scroll-${widget.categoryId}'),
+      physics: AppPullToRefresh.physics,
+      slivers: [
+        SliverPadding(
+          padding: EdgeInsets.fromLTRB(
+            AppDimens.feedPageHorizontal,
+            widget.topPadding,
+            AppDimens.feedPageHorizontal,
+            AppDimens.spaceXl,
+          ),
+          sliver: SliverList.separated(
+            itemCount: entries.length,
+            itemBuilder: (context, index) => _row(entries[index]),
+            separatorBuilder: (_, _) => const Divider(
+              height: AppDimens.mineGridDividerWidth,
+              thickness: AppDimens.mineGridDividerWidth,
+              color: AppColors.border,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _row(CategoryRankingEntry entry) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: AppDimens.spaceSm),
+      child: RankingDramaRow(
+        rank: entry.rank,
+        drama: entry.drama,
+        onTap: () => widget.onOpenDrama(entry.drama),
+      ),
+    );
+  }
+}

lib/pages/mine/widgets/mine_continue_watching.dart

@@ -128,7 +128,6 @@ class MineContinueWatching extends StatelessWidget {
                       child: RemoteImage(
                         record.dramaCover ?? '',
                         fit: BoxFit.cover,
-                        showFallbackIcon: true,
                         fallbackColor: AppColors.contentSurface,
                       ),
                     ),

lib/pages/new_releases/new_releases_page.dart

@@ -276,7 +276,6 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
               RemoteImage(
                 drama.posterUrl,
                 fit: BoxFit.cover,
-                showFallbackIcon: true,
                 fallbackAspectRatio: 16 / 9,
               ),
               const DecoratedBox(
@@ -448,7 +447,6 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
                     RemoteImage(
                       drama.posterUrl,
                       fit: BoxFit.cover,
-                      showFallbackIcon: true,
                       fallbackAspectRatio: 3 / 4,
                     ),
                     Positioned(

lib/pages/player/widgets/drama_info_sheet.dart

@@ -255,11 +255,7 @@ class _DramaInfoSheetState extends State<DramaInfoSheet> {
             width: _posterWidth,
             child: AspectRatio(
               aspectRatio: 3 / 4,
-              child: RemoteImage(
+              child: RemoteImage(drama.posterUrl, fit: BoxFit.cover),
-                drama.posterUrl,
-                fit: BoxFit.cover,
-                showFallbackIcon: true,
-              ),
             ),
           ),
         ),
@@ -466,11 +462,7 @@ class _DramaInfoSheetState extends State<DramaInfoSheet> {
                     width: _relatedWidth,
                     child: AspectRatio(
                       aspectRatio: 3 / 4,
-                      child: RemoteImage(
+                      child: RemoteImage(drama.posterUrl, fit: BoxFit.cover),
-                        drama.posterUrl,
-                        fit: BoxFit.cover,
-                        showFallbackIcon: true,
-                      ),
                     ),
                   ),
                 ),

lib/pages/player/widgets/player_loading_overlay.dart

@@ -3,8 +3,19 @@
 import 'package:flutter/material.dart';
 
 import '../../../core/theme/app_colors.dart';
-import '../../../core/theme/app_dimens.dart';
 
+const _fadeDuration = Duration(milliseconds: 140);
+const _motionDuration = Duration(milliseconds: 1350);
+const _surfaceSize = Size(56, 36);
+const _logoSize = Size(48, 29);
+const _minimumScale = 0.98;
+const _staticProgress = 0.5;
+const _waveMultiplier = 2.0;
+const _sweepStart = -1.2;
+const _sweepTravel = 3.4;
+const _sweepFeather = 0.16;
+
+/// 剧集播放页首帧出现前的非阻塞 YMB 品牌加载层。
 class PlayerLoadingOverlay extends StatelessWidget {
   const PlayerLoadingOverlay({
     super.key,
@@ -19,27 +30,124 @@ class PlayerLoadingOverlay extends StatelessWidget {
   Widget build(BuildContext context) {
     return AnimatedOpacity(
       opacity: opacity,
-      duration: const Duration(milliseconds: 140),
+      duration: _fadeDuration,
       curve: Curves.easeOut,
       onEnd: onFadeEnd,
       child: Container(
         key: const Key('player-loading-surface'),
-        width: AppDimens.refreshIndicatorSize,
+        width: _surfaceSize.width,
-        height: AppDimens.refreshIndicatorSize,
+        height: _surfaceSize.height,
-        decoration: BoxDecoration(
-          color: AppColors.refreshIndicatorSurface,
-          borderRadius: BorderRadius.circular(AppDimens.refreshIndicatorRadius),
-        ),
         alignment: Alignment.center,
-        child: const SizedBox.square(
+        child: const _YmbLoadingMark(),
-          dimension: AppDimens.refreshSpinnerSize,
-          child: CircularProgressIndicator(
-            key: Key('player-entry-loading'),
-            color: Colors.white,
-            strokeWidth: AppDimens.refreshSpinnerStroke,
-          ),
-        ),
       ),
     );
   }
 }
+
+class _YmbLoadingMark extends StatefulWidget {
+  const _YmbLoadingMark();
+
+  @override
+  State<_YmbLoadingMark> createState() => _YmbLoadingMarkState();
+}
+
+class _YmbLoadingMarkState extends State<_YmbLoadingMark>
+    with SingleTickerProviderStateMixin, WidgetsBindingObserver {
+  late final AnimationController _controller;
+  bool _disableAnimations = false;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addObserver(this);
+    _controller = AnimationController(vsync: this, duration: _motionDuration);
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    final disableAnimations = MediaQuery.disableAnimationsOf(context);
+    if (_disableAnimations == disableAnimations && _controller.isAnimating) {
+      return;
+    }
+    _disableAnimations = disableAnimations;
+    _syncMotion(WidgetsBinding.instance.lifecycleState);
+  }
+
+  @override
+  void didChangeAppLifecycleState(AppLifecycleState state) {
+    _syncMotion(state);
+  }
+
+  void _syncMotion(AppLifecycleState? state) {
+    if (_disableAnimations) {
+      _controller
+        ..stop()
+        ..value = _staticProgress;
+      return;
+    }
+    if (state == null || state == AppLifecycleState.resumed) {
+      if (!_controller.isAnimating) {
+        _controller.repeat();
+      }
+      return;
+    }
+    _controller.stop();
+  }
+
+  @override
+  void dispose() {
+    WidgetsBinding.instance.removeObserver(this);
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, child) {
+        final progress = _controller.value;
+        return _buildLogo(progress);
+      },
+    );
+  }
+
+  Widget _buildLogo(double progress) {
+    final pulse = Curves.easeInOut.transform(_triangleWave(progress));
+    final scale = _minimumScale + (1 - _minimumScale) * pulse;
+    return Transform.scale(
+      key: const Key('player-entry-loading-motion'),
+      scale: scale,
+      child: ShaderMask(
+        blendMode: BlendMode.srcATop,
+        shaderCallback: (bounds) =>
+            _logoGradient(progress).createShader(bounds),
+        child: Image.asset(
+          'assets/icon/splash_logo.png',
+          key: const Key('player-entry-loading'),
+          width: _logoSize.width,
+          height: _logoSize.height,
+          fit: BoxFit.contain,
+        ),
+      ),
+    );
+  }
+
+  LinearGradient _logoGradient(double progress) {
+    final center = _sweepStart + progress * _sweepTravel;
+    return LinearGradient(
+      begin: Alignment.centerLeft,
+      end: Alignment.centerRight,
+      colors: const [
+        Colors.white,
+        Colors.white,
+        AppColors.brandRed,
+        Colors.white,
+      ],
+      stops: [0, (center - _sweepFeather).clamp(0, 1), center.clamp(0, 1), 1],
+    );
+  }
+
+  double _triangleWave(double value) => 1 - (value * _waveMultiplier - 1).abs();
+}

lib/pages/ranking/ranking_page.dart

@@ -7,26 +7,20 @@ import 'package:provider/provider.dart';
 
 import '../../core/data/models/drama.dart';
 import '../../core/data/services/catalog_controller.dart';
-import '../../core/formatting/count_format.dart';
 import '../../core/theme/app_colors.dart';
 import '../../core/theme/app_dimens.dart';
 import '../../core/widgets/app_pull_to_refresh.dart';
 import '../../core/widgets/empty_state.dart';
 import '../../core/widgets/paged_local_list.dart';
 import '../../core/widgets/plain_page_scaffold.dart';
-import '../../core/widgets/remote_image.dart';
 import '../../l10n/app_localizations.dart';
 import '../player/open_player.dart';
+import 'widgets/ranking_drama_row.dart';
 
 const int _topCount = 50;
 const double _loadMoreThreshold = 200;
-const double _championLift = 12;
-const double _podiumGap = 8;
-const double _podiumHorizontal = 8;
-const double _championScale = 1.18;
-const double _coverAspect = 146 / 110;
 
-/// 剧场榜单页：前三名领奖台，第 4 名起为单列排行行。
+/// 剧场榜单页：统一行布局，名次角标压在封面左上角，右侧字段无数据不展示。
 class RankingPage extends StatefulWidget {
   const RankingPage({super.key, this.embedded = false});
 
@@ -101,8 +95,6 @@ class _RankingPageState extends State<RankingPage> {
     final l10n = AppLocalizations.of(context)!;
     final catalog = context.watch<CatalogController>();
     final top = _pager!.visibleItems;
-    final podium = top.take(3).toList(growable: false);
-    final rest = top.skip(3).toList(growable: false);
     final content = NotificationListener<ScrollNotification>(
       onNotification: _onScroll,
       child: AppPullToRefresh(
@@ -118,27 +110,21 @@ class _RankingPageState extends State<RankingPage> {
               : [
                   if (widget.embedded) _intro(l10n),
                   const SizedBox(height: AppDimens.spaceMd),
-                  if (podium.isNotEmpty)
+                  for (var index = 0; index < top.length; index++) ...[
-                    Padding(
-                      padding: const EdgeInsets.symmetric(
-                        horizontal: _podiumHorizontal,
-                      ),
-                      child: _Podium(podium: podium, l10n: l10n),
-                    ),
-                  if (rest.isNotEmpty) ...[
-                    const SizedBox(height: AppDimens.spaceXl),
-                    for (var index = 0; index < rest.length; index++) ...[
                     Padding(
                       padding: const EdgeInsets.symmetric(
                         horizontal: AppDimens.feedPageHorizontal,
+                        vertical: AppDimens.spaceSm,
                       ),
-                        child: _RankingRow(
+                      child: RankingDramaRow(
-                          index: index + 3,
+                        rank: index + 1,
-                          drama: rest[index],
+                        drama: top[index],
-                          l10n: l10n,
+                        onTap: () => unawaited(
+                          playDramaFromCatalog(context, top[index]),
                         ),
                       ),
-                      if (index != rest.length - 1)
+                    ),
+                    if (index != top.length - 1)
                       const Padding(
                         padding: EdgeInsets.symmetric(
                           horizontal: AppDimens.feedPageHorizontal,
@@ -150,7 +136,6 @@ class _RankingPageState extends State<RankingPage> {
                         ),
                       ),
                   ],
-                  ],
                   PagedLoadFooter(
                     loading: _pager!.loading,
                     hasMore: _pager!.hasMore,
@@ -221,302 +206,9 @@ class _RankingPageState extends State<RankingPage> {
           title: catalog.error == null ? l10n.noStories : l10n.catalogError,
           actionLabel: catalog.error == null ? null : l10n.retry,
           onAction: catalog.error == null ? null : () => unawaited(_refresh()),
+          stretchContent: true,
         ),
       ),
     );
   }
 }
-
-class _Podium extends StatelessWidget {
-  const _Podium({required this.podium, required this.l10n});
-
-  final List<Drama> podium;
-  final AppLocalizations l10n;
-
-  @override
-  Widget build(BuildContext context) {
-    return LayoutBuilder(
-      builder: (context, constraints) {
-        final available = constraints.maxWidth - _podiumGap * 2;
-        final side = available / (2 + _championScale);
-        final champion = side * _championScale;
-        return Row(
-          crossAxisAlignment: CrossAxisAlignment.end,
-          children: [
-            SizedBox(
-              width: side,
-              child: podium.length > 1
-                  ? _PodiumCard(
-                      rank: 2,
-                      drama: podium[1],
-                      l10n: l10n,
-                      coverWidth: side,
-                    )
-                  : const SizedBox.shrink(),
-            ),
-            const SizedBox(width: _podiumGap),
-            SizedBox(
-              width: champion,
-              child: podium.isNotEmpty
-                  ? Transform.translate(
-                      offset: const Offset(0, -_championLift),
-                      child: _PodiumCard(
-                        rank: 1,
-                        drama: podium.first,
-                        l10n: l10n,
-                        coverWidth: champion,
-                      ),
-                    )
-                  : const SizedBox.shrink(),
-            ),
-            const SizedBox(width: _podiumGap),
-            SizedBox(
-              width: side,
-              child: podium.length > 2
-                  ? _PodiumCard(
-                      rank: 3,
-                      drama: podium[2],
-                      l10n: l10n,
-                      coverWidth: side,
-                    )
-                  : const SizedBox.shrink(),
-            ),
-          ],
-        );
-      },
-    );
-  }
-}
-
-class _PodiumCard extends StatelessWidget {
-  const _PodiumCard({
-    required this.rank,
-    required this.drama,
-    required this.l10n,
-    required this.coverWidth,
-  });
-
-  final int rank;
-  final Drama drama;
-  final AppLocalizations l10n;
-  final double coverWidth;
-
-  double get _coverHeight => coverWidth * _coverAspect;
-
-  Color get _badgeColor => switch (rank) {
-    1 => AppColors.homeCrownGold,
-    2 => AppColors.rankSilver,
-    _ => AppColors.bronze,
-  };
-
-  Color get _badgeTextColor =>
-      rank == 3 ? AppColors.textPrimary : AppColors.onGold;
-
-  @override
-  Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: () => unawaited(playDramaFromCatalog(context, drama)),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          ClipRRect(
-            borderRadius: BorderRadius.circular(AppDimens.rankingPodiumRadius),
-            child: SizedBox(
-              key: Key('ranking-cover-$rank'),
-              width: coverWidth,
-              height: _coverHeight,
-              child: Stack(
-                fit: StackFit.expand,
-                children: [
-                  RemoteImage(
-                    drama.posterUrl,
-                    fit: BoxFit.cover,
-                    showFallbackIcon: true,
-                    fallbackAspectRatio: 3 / 4,
-                  ),
-                  Positioned(
-                    top: 4,
-                    left: 4,
-                    child: Container(
-                      key: Key('ranking-top-$rank'),
-                      padding: const EdgeInsets.symmetric(
-                        horizontal: 6,
-                        vertical: 2,
-                      ),
-                      decoration: BoxDecoration(
-                        color: _badgeColor,
-                        borderRadius: BorderRadius.circular(6),
-                      ),
-                      child: Text(
-                        l10n.topLabel(rank),
-                        maxLines: 1,
-                        style: TextStyle(
-                          color: _badgeTextColor,
-                          fontSize: 11,
-                          fontWeight: FontWeight.w800,
-                        ),
-                      ),
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ),
-          const SizedBox(height: 6),
-          SizedBox(
-            height: 34,
-            child: Text(
-              drama.title,
-              key: Key('ranking-title-$rank'),
-              maxLines: 2,
-              overflow: TextOverflow.ellipsis,
-              textAlign: TextAlign.center,
-              style: const TextStyle(
-                color: AppColors.textPrimary,
-                fontSize: 13,
-                fontWeight: FontWeight.w600,
-                height: 1.25,
-              ),
-            ),
-          ),
-          if (drama.viewCount > 0) ...[
-            const SizedBox(height: 2),
-            _heat(drama.viewCount, l10n),
-          ],
-        ],
-      ),
-    );
-  }
-}
-
-class _RankingRow extends StatelessWidget {
-  const _RankingRow({
-    required this.index,
-    required this.drama,
-    required this.l10n,
-  });
-
-  final int index;
-  final Drama drama;
-  final AppLocalizations l10n;
-
-  int get _rank => index + 1;
-
-  String get _category {
-    final values = <String>{};
-    for (final value in [drama.genre, drama.category]) {
-      for (final part in value.split(RegExp(r'[,/、·]'))) {
-        final tag = part.trim();
-        if (tag.isNotEmpty) values.add(tag);
-      }
-    }
-    return values.join(' · ');
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return SizedBox(
-      height: AppDimens.rankingRowHeight,
-      child: Material(
-        color: AppColors.transparent,
-        child: InkWell(
-          key: Key('ranking-row-$index'),
-          onTap: () => unawaited(playDramaFromCatalog(context, drama)),
-          child: Row(
-            children: [
-              SizedBox(
-                width: AppDimens.rankingNumberWidth,
-                child: Text(
-                  '$_rank',
-                  key: Key('ranking-top-$_rank'),
-                  textAlign: TextAlign.center,
-                  maxLines: 1,
-                  style: TextStyle(
-                    color: AppColors.textPrimary.withValues(alpha: 0.12),
-                    fontSize: AppDimens.rankingNumberFont,
-                    fontWeight: FontWeight.w800,
-                    height: 1,
-                  ),
-                ),
-              ),
-              ClipRRect(
-                borderRadius: BorderRadius.circular(
-                  AppDimens.rankingCoverRadius,
-                ),
-                child: SizedBox(
-                  key: Key('ranking-row-cover-$_rank'),
-                  width: AppDimens.rankingCoverWidth,
-                  height: AppDimens.rankingCoverHeight,
-                  child: RemoteImage(
-                    drama.posterUrl,
-                    fit: BoxFit.cover,
-                    showFallbackIcon: true,
-                    fallbackAspectRatio: 3 / 4,
-                  ),
-                ),
-              ),
-              const SizedBox(width: AppDimens.spaceMd),
-              Expanded(
-                child: SizedBox(
-                  height: AppDimens.rankingCoverHeight,
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Text(
-                        drama.title,
-                        maxLines: 2,
-                        overflow: TextOverflow.ellipsis,
-                        style: const TextStyle(
-                          color: AppColors.textPrimary,
-                          fontSize: 15,
-                          fontWeight: FontWeight.w500,
-                        ),
-                      ),
-                      if (_category.isNotEmpty) ...[
-                        const SizedBox(height: AppDimens.spaceXs),
-                        Text(
-                          _category,
-                          maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
-                          style: const TextStyle(
-                            color: AppColors.textTertiary,
-                            fontSize: 11,
-                          ),
-                        ),
-                      ],
-                      const Spacer(),
-                      if (drama.viewCount > 0) _heat(drama.viewCount, l10n),
-                    ],
-                  ),
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-Widget _heat(int count, AppLocalizations l10n) {
-  return Row(
-    mainAxisSize: MainAxisSize.min,
-    mainAxisAlignment: MainAxisAlignment.center,
-    children: [
-      const Icon(
-        Icons.local_fire_department_rounded,
-        color: AppColors.textTertiary,
-        size: 11,
-      ),
-      const SizedBox(width: 4),
-      Flexible(
-        child: Text(
-          l10n.heatLabel(formatPlayCount(count)),
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
-          style: const TextStyle(color: AppColors.textTertiary, fontSize: 11),
-        ),
-      ),
-    ],
-  );
-}

lib/pages/ranking/widgets/ranking_drama_row.dart

@@ -0,0 +1,229 @@
+// Author: fruit.com.cn
+// 榜单统一行：名次角标压在封面左上角，右侧字段无数据不展示。
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/drama.dart';
+import '../../../core/formatting/count_format.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/remote_image.dart';
+import '../../../l10n/app_localizations.dart';
+
+const double _badgeSize = 24;
+const double _badgeCornerRadius = 10;
+const double _badgeFontSize = 14;
+const double _titleFontSize = 16;
+const double _metaLineGap = 2;
+const double _lineHeight = 1.25;
+const int _synopsisMaxLines = 3;
+const double _metaFontSize = 12;
+const double _tagFontSize = 10;
+const double _flameSize = 13;
+const double _flameGap = 2;
+const double _badgeMutedAlpha = 0.6;
+const double _badgeTextHeight = 1;
+
+/// 榜单行：左侧 3:4 封面带名次角标，右侧标题/分类/简介/底行元信息。
+class RankingDramaRow extends StatelessWidget {
+  const RankingDramaRow({
+    super.key,
+    required this.rank,
+    required this.drama,
+    required this.onTap,
+  });
+
+  final int rank;
+  final Drama drama;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return SizedBox(
+      height: AppDimens.rankingCardCoverHeight,
+      child: Material(
+        color: AppColors.transparent,
+        child: InkWell(
+          key: Key('ranking-row-${rank - 1}'),
+          onTap: onTap,
+          child: Row(
+            children: [
+              _cover(),
+              const SizedBox(width: AppDimens.spaceMd),
+              Expanded(child: _info(l10n)),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  String get _category {
+    final values = <String>{};
+    for (final value in [drama.genre, drama.category]) {
+      for (final part in value.split(RegExp(r'[,/、·]'))) {
+        final tag = part.trim();
+        if (tag.isNotEmpty) values.add(tag);
+      }
+    }
+    return values.join(' · ');
+  }
+
+  Color get _badgeColor => switch (rank) {
+    1 => AppColors.brandRed,
+    2 => AppColors.homeCrownGold,
+    3 => AppColors.bronze,
+    _ => AppColors.ink.withValues(alpha: _badgeMutedAlpha),
+  };
+
+  Widget _badge() {
+    return Container(
+      key: Key('ranking-top-$rank'),
+      width: _badgeSize,
+      height: _badgeSize,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        color: _badgeColor,
+        borderRadius: const BorderRadius.only(
+          topLeft: Radius.circular(AppDimens.rankingCoverRadius),
+          bottomRight: Radius.circular(_badgeCornerRadius),
+        ),
+      ),
+      child: Text(
+        '$rank',
+        maxLines: 1,
+        style: const TextStyle(
+          color: AppColors.textPrimary,
+          fontSize: _badgeFontSize,
+          fontWeight: FontWeight.w700,
+          height: _badgeTextHeight,
+        ),
+      ),
+    );
+  }
+
+  Widget _cover() {
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(AppDimens.rankingCoverRadius),
+      child: SizedBox(
+        key: Key('ranking-row-cover-$rank'),
+        width: AppDimens.rankingCardCoverWidth,
+        height: AppDimens.rankingCardCoverHeight,
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            RemoteImage(
+              drama.posterUrl,
+              fit: BoxFit.cover,
+              fallbackWidget: const ColoredBox(color: AppColors.raised),
+            ),
+            Positioned(top: 0, left: 0, child: _badge()),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _info(AppLocalizations l10n) {
+    final category = _category;
+    final synopsis = drama.synopsis.trim();
+    return SizedBox(
+      height: AppDimens.rankingCardCoverHeight,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            drama.title,
+            key: Key('ranking-title-$rank'),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: const TextStyle(
+              color: AppColors.textPrimary,
+              fontSize: _titleFontSize,
+              fontWeight: FontWeight.w600,
+              height: _lineHeight,
+            ),
+          ),
+          if (category.isNotEmpty) _metaText(category),
+          if (synopsis.isNotEmpty)
+            _metaText(synopsis, maxLines: _synopsisMaxLines),
+          const SizedBox(height: _metaLineGap),
+          _bottomMeta(l10n),
+        ],
+      ),
+    );
+  }
+
+  Widget _metaText(String text, {int maxLines = 1}) {
+    return Padding(
+      padding: const EdgeInsets.only(top: _metaLineGap),
+      child: Text(
+        text,
+        maxLines: maxLines,
+        overflow: TextOverflow.ellipsis,
+        style: const TextStyle(
+          color: AppColors.textTertiary,
+          fontSize: _metaFontSize,
+          height: _lineHeight,
+        ),
+      ),
+    );
+  }
+
+  Widget _bottomMeta(AppLocalizations l10n) {
+    final tag = drama.tag.trim();
+    final metas = <String>[
+      if (drama.viewCount > 0) l10n.heatLabel(formatPlayCount(drama.viewCount)),
+      if (drama.likeCount != null)
+        l10n.likesLabel(formatInteractionCount(drama.likeCount!)),
+    ];
+    if (tag.isEmpty && metas.isEmpty) return const SizedBox.shrink();
+    return Wrap(
+      crossAxisAlignment: WrapCrossAlignment.center,
+      spacing: AppDimens.spaceSm,
+      runSpacing: _metaLineGap,
+      children: [
+        if (tag.isNotEmpty) _tagText(tag),
+        if (metas.isNotEmpty)
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const Icon(
+                Icons.local_fire_department_rounded,
+                color: AppColors.actionRed,
+                size: _flameSize,
+              ),
+              const SizedBox(width: _flameGap),
+              Flexible(
+                child: Text(
+                  metas.join(' · '),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                    color: AppColors.textTertiary,
+                    fontSize: _metaFontSize,
+                    height: _lineHeight,
+                  ),
+                ),
+              ),
+            ],
+          ),
+      ],
+    );
+  }
+
+  Widget _tagText(String tag) {
+    return Text(
+      tag,
+      key: Key('ranking-tag-$rank'),
+      maxLines: 1,
+      style: TextStyle(
+        color: drama.tagRibbonColor(AppColors.brandRed),
+        fontSize: _tagFontSize,
+        fontWeight: FontWeight.w600,
+        height: _lineHeight,
+      ),
+    );
+  }
+}

lib/pages/recommend/recommend_discover_page.dart

@@ -10,11 +10,13 @@ import '../../core/data/models/home_feed.dart';
 import '../../core/data/remote/catalog_api.dart';
 import '../../core/data/services/category_controller.dart';
 import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
 import '../../core/widgets/app_pull_to_refresh.dart';
 import '../../core/widgets/empty_state.dart';
 import '../../core/widgets/paged_list_footer.dart';
 import '../../l10n/app_localizations.dart';
 import '../player/open_player.dart';
+import '../home/widgets/home_ranking_dramas.dart';
 import 'widgets/home_hero_carousel.dart';
 import 'widgets/home_recommend_content.dart';
 import 'widgets/recommend_channel_nav.dart';
@@ -100,6 +102,21 @@ class _RecommendDiscoverPageState extends State<RecommendDiscoverPage>
     if (_requestedCategories.contains(id)) return;
     _requestedCategories.add(id);
     final categories = context.read<CategoryController>();
+    final category = categories.categories
+        .where((item) => item.id == id)
+        .firstOrNull;
+    if (category?.isRanking ?? false) {
+      final slot = categories.rankingSlotOf(id);
+      if (categories.rankingLoader == null ||
+          slot.ranking != null ||
+          slot.loading) {
+        return;
+      }
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted) unawaited(categories.openRanking(id));
+      });
+      return;
+    }
     if (categories.dramaPageLoader == null) return;
     final slot = categories.slotOf(id);
     if (slot.dramas.isNotEmpty || slot.loading) return;
@@ -171,6 +188,16 @@ class _RecommendDiscoverPageState extends State<RecommendDiscoverPage>
                     onPageChanged: (i) => _onPageChanged(i, orderedIds),
                     itemBuilder: (context, index) {
                       final category = categoryList[index];
+                      if (category.isRanking) {
+                        return HomeRankingDramas(
+                          key: PageStorageKey<String>(
+                            'recommend-ranking-${category.id}',
+                          ),
+                          categoryId: category.id,
+                          topPadding: mediaTop + RecommendChannelNav.height,
+                          onOpenDrama: _openDrama,
+                        );
+                      }
                       return _ChannelFeed(
                         key: PageStorageKey<String>(
                           'recommend-channel-${category.id}',
@@ -318,21 +345,14 @@ class _ChannelFeedState extends State<_ChannelFeed>
       sliverList.add(
         SliverFillRemaining(
           hasScrollBody: false,
-          child: Padding(
-            padding: EdgeInsets.only(
-              top: showCarousel
-                  ? 0
-                  : widget.mediaTop + RecommendChannelNav.height,
-            ),
           child: Center(child: _placeholder(slot.loading)),
         ),
-        ),
       );
     } else if (widget.isFeatured) {
       // 无轮播图时内容需避开顶部悬浮导航。
       final contentTop = showCarousel
           ? 24.0
-          : widget.mediaTop + RecommendChannelNav.height + 16;
+          : widget.mediaTop + RecommendChannelNav.height + AppDimens.spaceSm;
       if (newArrivals.isNotEmpty) {
         sliverList.add(SliverToBoxAdapter(child: SizedBox(height: contentTop)));
         sliverList.add(
@@ -358,7 +378,9 @@ class _ChannelFeedState extends State<_ChannelFeed>
           dramas,
           topPadding: showCarousel
               ? 20
-              : widget.mediaTop + RecommendChannelNav.height + 16,
+              : widget.mediaTop +
+                    RecommendChannelNav.height +
+                    AppDimens.spaceSm,
           crossAxisCount: 3,
         ),
       );
@@ -411,6 +433,8 @@ class _ChannelFeedState extends State<_ChannelFeed>
       key: const Key('recommend-category-empty'),
       icon: Icons.movie_outlined,
       title: l10n.noStories,
+      compact: true,
+      stretchContent: true,
     );
   }