merge: 重做首页热播榜布局

docs/plans/PROGRESS.md

@@ -1288,3 +1288,9 @@ $ flutter test
 - 下拉刷新统一为 40×40、60% 黑底圆角指示器内嵌 20 白色加载圈，不再显示任何状态文字。
 - 网络分页与本地分页 footer 统一仅显示白色加载圈，无更多状态完全隐藏；通知页补触底自动加载。
 - 移除不再使用的刷新提示与无更多文案；`flutter analyze`：No issues found。
+
+## 2026-10-22 首页热播榜重做
+
+- 首页榜单 tab 改为独立领奖台 + 单列排行布局，不再复用三列网格。
+- 前三名按 2/1/3 排列，冠军放大并上移；第 4 名起使用大号描边名次与横向信息行。
+- 榜单沿用现有播放热度排序、分页和播放逻辑；`flutter analyze`：No issues found。

lib/core/theme/app_colors.dart

@@ -50,6 +50,7 @@ abstract final class AppColors {
   static const vipBadgeSurface = Color(0x1F3D2408);
   static const bronze = Color(0xFFCD7F32);
   static const bronzeDeep = Color(0xFFA9713A);
+  static const rankSilver = Color(0xFFC0C0C0);
 
   /// 成功状态。
   static const success = Color(0xFF2FA873);

lib/core/theme/app_dimens.dart

@@ -141,6 +141,21 @@ abstract final class AppDimens {
   static const double recommendRowHeight = 252;
   static const double recommendCardWidth = 122;
 
+  /// 首页热播榜。
+  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 filterChipFont = 16;
   static const double filterChipHeight = 32;

lib/l10n/app_en.arb

@@ -64,7 +64,7 @@
       "count": {"type": "String"}
     }
   },
-  "topCharts": "Top Charts",
+  "topCharts": "Hot Ranking",
   "newReleases": "New Releases",
   "newDramas": "New",
   "trendingMicroDramas": "Trending Micro-Dramas",
@@ -633,7 +633,7 @@
   "ledgerAdjustment": "Adjustment",
   "rankingTab": "Charts",
   "rankingTitle": "Top Charts",
-  "rankingSubtitle": "Ranked from today's live catalog feed.",
+  "rankingSubtitle": "Ranked live by play heat",
   "rankingHot": "Trending",
   "rankingNew": "New releases",
   "newReleasesAll": "All new releases",

lib/l10n/app_id.arb

@@ -48,7 +48,7 @@
   "authorNoteLabel": "Catatan penulis",
   "reserve": "Reservasi",
   "heatLabel": "{count} panas",
-  "topCharts": "Peringkat Teratas",
+  "topCharts": "Peringkat Populer",
   "newReleases": "Rilisan Baru",
   "newDramas": "Baru",
   "trendingMicroDramas": "Drama Mini Populer",
@@ -595,7 +595,7 @@
   "ledgerAdjustment": "Penyesuaian",
   "rankingTab": "Peringkat",
   "rankingTitle": "Peringkat Teratas",
-  "rankingSubtitle": "Diurutkan dari feed katalog terkini.",
+  "rankingSubtitle": "Diurutkan langsung berdasarkan jumlah tayangan",
   "rankingHot": "Populer",
   "rankingNew": "Rilis baru",
   "newReleasesAll": "Semua rilis baru",

lib/l10n/app_localizations.dart

@@ -391,7 +391,7 @@ abstract class AppLocalizations {
   /// No description provided for @topCharts.
   ///
   /// In en, this message translates to:
-  /// **'Top Charts'**
+  /// **'Hot Ranking'**
   String get topCharts;
 
   /// No description provided for @newReleases.
@@ -2677,7 +2677,7 @@ abstract class AppLocalizations {
   /// No description provided for @rankingSubtitle.
   ///
   /// In en, this message translates to:
-  /// **'Ranked from today\'s live catalog feed.'**
+  /// **'Ranked live by play heat'**
   String get rankingSubtitle;
 
   /// No description provided for @rankingHot.

lib/l10n/app_localizations_en.dart

@@ -162,7 +162,7 @@ class AppLocalizationsEn extends AppLocalizations {
   }
 
   @override
-  String get topCharts => 'Top Charts';
+  String get topCharts => 'Hot Ranking';
 
   @override
   String get newReleases => 'New Releases';
@@ -1389,7 +1389,7 @@ class AppLocalizationsEn extends AppLocalizations {
   String get rankingTitle => 'Top Charts';
 
   @override
-  String get rankingSubtitle => 'Ranked from today\'s live catalog feed.';
+  String get rankingSubtitle => 'Ranked live by play heat';
 
   @override
   String get rankingHot => 'Trending';

lib/l10n/app_localizations_id.dart

@@ -162,7 +162,7 @@ class AppLocalizationsId extends AppLocalizations {
   }
 
   @override
-  String get topCharts => 'Peringkat Teratas';
+  String get topCharts => 'Peringkat Populer';
 
   @override
   String get newReleases => 'Rilisan Baru';
@@ -1389,7 +1389,8 @@ class AppLocalizationsId extends AppLocalizations {
   String get rankingTitle => 'Peringkat Teratas';
 
   @override
-  String get rankingSubtitle => 'Diurutkan dari feed katalog terkini.';
+  String get rankingSubtitle =>
+      'Diurutkan langsung berdasarkan jumlah tayangan';
 
   @override
   String get rankingHot => 'Populer';

lib/l10n/app_localizations_zh.dart

@@ -159,7 +159,7 @@ class AppLocalizationsZh extends AppLocalizations {
   }
 
   @override
-  String get topCharts => '排行榜';
+  String get topCharts => '热播榜';
 
   @override
   String get newReleases => '新剧';
@@ -1367,7 +1367,7 @@ class AppLocalizationsZh extends AppLocalizations {
   String get rankingTitle => '热门榜单';
 
   @override
-  String get rankingSubtitle => '依据目录实时分区排序。';
+  String get rankingSubtitle => '按播放热度实时排序';
 
   @override
   String get rankingHot => '热播';

lib/l10n/app_zh.arb

@@ -48,7 +48,7 @@
   "authorNoteLabel": "作者声明",
   "reserve": "预约",
   "heatLabel": "{count}热度",
-  "topCharts": "排行榜",
+  "topCharts": "热播榜",
   "newReleases": "新剧",
   "newDramas": "新剧",
   "trendingMicroDramas": "热门短剧",
@@ -557,7 +557,7 @@
   "ledgerAdjustment": "余额调整",
   "rankingTab": "榜单",
   "rankingTitle": "热门榜单",
-  "rankingSubtitle": "依据目录实时分区排序。",
+  "rankingSubtitle": "按播放热度实时排序",
   "rankingHot": "热播",
   "rankingNew": "新剧",
   "newReleasesAll": "全部新剧",

lib/pages/home/widgets/home_feed_grid.dart

@@ -17,6 +17,7 @@ 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 '../../ranking/ranking_page.dart';
 import 'home_drama_classification.dart';
 import 'home_feed_card.dart';
 import 'home_grid_header.dart';
@@ -155,6 +156,9 @@ class _HomeFeedGridState extends State<HomeFeedGrid> {
     required HomePrimaryTab tab,
     required List<HomeGridCategoryShortcut> shortcuts,
   }) {
+    if (tab == HomePrimaryTab.ranking) {
+      return const RankingPage(embedded: true);
+    }
     if (widget.feedController.loadingFirstPage) {
       return const Center(
         child: SizedBox.square(

lib/pages/ranking/ranking_page.dart

@@ -10,6 +10,7 @@ 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/theme/app_theme.dart';
 import '../../core/widgets/app_pull_to_refresh.dart';
 import '../../core/widgets/empty_state.dart';
 import '../../core/widgets/paged_local_list.dart';
@@ -19,20 +20,9 @@ import '../../l10n/app_localizations.dart';
 import '../player/open_player.dart';
 
 const int _topCount = 50;
-const double _podiumGap = 8;
+const double _loadMoreThreshold = 200, _championLift = 12;
-const double _coverRadius = 12;
-const double _titleSlotHeight = 24;
-const double _rowGap = 12;
-const double _rankColumnWidth = 56;
-const double _listCoverWidth = 72;
-const double _listCoverHeight = 96;
-const double _loadMoreThreshold = 200;
-const Color _goldStart = AppColors.gold;
-const Color _goldEnd = AppColors.goldDeep;
-const Color _bronzeStart = AppColors.bronze;
-const Color _bronzeEnd = AppColors.bronzeDeep;
 
-/// 剧场榜单页：前三名横排领奖台，第 4 名起纵向列表。
+/// 剧场榜单页：前三名领奖台，第 4 名起为单列排行行。
 class RankingPage extends StatefulWidget {
   const RankingPage({super.key, this.embedded = false});
 
@@ -93,12 +83,10 @@ class _RankingPageState extends State<RankingPage> {
 
   bool _onScroll(ScrollNotification notification) {
     if (notification.depth != 0 || _refreshing) return false;
-    final reachedBottom =
+    if (notification.metrics.extentAfter > _loadMoreThreshold) return false;
-        notification.metrics.extentAfter <= _loadMoreThreshold;
+    if (notification is ScrollUpdateNotification ||
-    if (reachedBottom &&
+        notification is ScrollEndNotification ||
-        (notification is ScrollUpdateNotification ||
+        notification is OverscrollNotification) {
-            notification is ScrollEndNotification ||
-            notification is OverscrollNotification)) {
       unawaited(_pager!.loadMore());
     }
     return false;
@@ -107,10 +95,10 @@ class _RankingPageState extends State<RankingPage> {
   @override
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
-    final pager = _pager!;
+    final catalog = context.watch<CatalogController>();
-    final top = pager.visibleItems;
+    final top = _pager!.visibleItems;
-    final podium = top.take(3).toList();
+    final podium = top.take(3).toList(growable: false);
-    final rest = top.skip(3).toList();
+    final rest = top.skip(3).toList(growable: false);
     final content = NotificationListener<ScrollNotification>(
       onNotification: _onScroll,
       child: AppPullToRefresh(
@@ -120,39 +108,47 @@ class _RankingPageState extends State<RankingPage> {
           key: const Key('ranking-list'),
           controller: _scroll,
           physics: AppPullToRefresh.physics,
-          padding: const EdgeInsets.only(top: 4, bottom: 24),
+          padding: const EdgeInsets.only(top: 8, bottom: 24),
           children: top.isEmpty
-              ? [
+              ? [_emptyState(l10n, catalog)]
-                  SizedBox(
-                    height: 420,
-                    child: EmptyState(
-                      icon: Icons.leaderboard_outlined,
-                      title: l10n.noStories,
-                    ),
-                  ),
-                ]
               : [
+                  if (widget.embedded) _intro(l10n),
+                  const SizedBox(height: AppDimens.spaceMd),
                   if (podium.isNotEmpty)
                     Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 14),
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: AppDimens.feedPageHorizontal,
+                      ),
                       child: _Podium(podium: podium, l10n: l10n),
                     ),
                   if (rest.isNotEmpty) ...[
-                    const SizedBox(height: 16),
+                    const SizedBox(height: AppDimens.spaceXl),
                     for (var index = 0; index < rest.length; index++) ...[
-                      if (index > 0) const SizedBox(height: _rowGap),
                       Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 14),
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: AppDimens.feedPageHorizontal,
+                        ),
                         child: _RankingRow(
                           index: index + 3,
                           drama: rest[index],
                           l10n: l10n,
                         ),
                       ),
+                      if (index != rest.length - 1)
+                        const Padding(
+                          padding: EdgeInsets.symmetric(
+                            horizontal: AppDimens.feedPageHorizontal,
+                          ),
+                          child: Divider(
+                            height: AppDimens.mineGridDividerWidth,
+                            thickness: AppDimens.mineGridDividerWidth,
+                            color: AppColors.border,
+                          ),
+                        ),
                     ],
                   ],
                   PagedLoadFooter(
-                    loading: pager.loading,
+                    loading: _pager!.loading,
                     loadMoreKey: const Key('ranking-load-more'),
                   ),
                 ],
@@ -160,9 +156,9 @@ class _RankingPageState extends State<RankingPage> {
       ),
     );
     if (widget.embedded) {
-      return ColoredBox(
+      return DecoratedBox(
         key: const Key('ranking-page'),
-        color: AppColors.appBackground,
+        decoration: const BoxDecoration(gradient: AppTheme.pageGradient),
         child: SafeArea(bottom: false, child: content),
       );
     }
@@ -174,6 +170,59 @@ class _RankingPageState extends State<RankingPage> {
       child: content,
     );
   }
+
+  Widget _intro(AppLocalizations l10n) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: AppDimens.feedPageHorizontal,
+      ),
+      child: Column(
+        key: const Key('ranking-hero'),
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            l10n.topCharts,
+            style: const TextStyle(
+              color: AppColors.textPrimary,
+              fontSize: AppDimens.rankingHeroTitle,
+              fontWeight: FontWeight.w700,
+            ),
+          ),
+          const SizedBox(height: 2),
+          Text(
+            l10n.rankingSubtitle,
+            style: const TextStyle(
+              color: AppColors.textTertiary,
+              fontSize: AppDimens.rankingHeroSubtitle,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _emptyState(AppLocalizations l10n, CatalogController catalog) {
+    final theme = Theme.of(context);
+    return SizedBox(
+      height: 420,
+      child: Theme(
+        data: theme.copyWith(
+          colorScheme: theme.colorScheme.copyWith(
+            onSurface: AppColors.textTertiary,
+          ),
+        ),
+        child: EmptyState(
+          key: Key(catalog.error == null ? 'ranking-empty' : 'ranking-error'),
+          icon: catalog.error == null
+              ? Icons.leaderboard_outlined
+              : Icons.cloud_off_rounded,
+          title: catalog.error == null ? l10n.noStories : l10n.catalogError,
+          actionLabel: catalog.error == null ? null : l10n.retry,
+          onAction: catalog.error == null ? null : () => unawaited(_refresh()),
+        ),
+      ),
+    );
+  }
 }
 
 class _Podium extends StatelessWidget {
@@ -187,19 +236,32 @@ class _Podium extends StatelessWidget {
     return Row(
       crossAxisAlignment: CrossAxisAlignment.end,
       children: [
-        Expanded(flex: 100, child: _slot(2)),
+        SizedBox(
-        const SizedBox(width: _podiumGap),
+          width: AppDimens.rankingPodiumWidth,
-        Expanded(flex: 115, child: _slot(1)),
+          child: podium.length > 1
-        const SizedBox(width: _podiumGap),
+              ? _PodiumCard(rank: 2, drama: podium[1], l10n: l10n)
-        Expanded(flex: 100, child: _slot(3)),
+              : const SizedBox.shrink(),
+        ),
+        const Spacer(),
+        SizedBox(
+          width: AppDimens.rankingPodiumChampionWidth,
+          child: podium.isNotEmpty
+              ? Transform.translate(
+                  offset: const Offset(0, -_championLift),
+                  child: _PodiumCard(rank: 1, drama: podium.first, l10n: l10n),
+                )
+              : const SizedBox.shrink(),
+        ),
+        const Spacer(),
+        SizedBox(
+          width: AppDimens.rankingPodiumWidth,
+          child: podium.length > 2
+              ? _PodiumCard(rank: 3, drama: podium[2], l10n: l10n)
+              : const SizedBox.shrink(),
+        ),
       ],
     );
   }
-
-  Widget _slot(int rank) {
-    if (podium.length < rank) return const SizedBox.shrink();
-    return _PodiumCard(rank: rank, drama: podium[rank - 1], l10n: l10n);
-  }
 }
 
 class _PodiumCard extends StatelessWidget {
@@ -213,26 +275,23 @@ class _PodiumCard extends StatelessWidget {
   final Drama drama;
   final AppLocalizations l10n;
 
-  bool get _center => rank == 1;
+  double get _coverWidth => rank == 1
+      ? AppDimens.rankingPodiumChampionWidth
+      : AppDimens.rankingPodiumWidth;
 
-  LinearGradient get _badgeGradient => switch (rank) {
+  double get _coverHeight => rank == 1
-    1 => const LinearGradient(
+      ? AppDimens.rankingPodiumChampionHeight
-      begin: Alignment.topLeft,
+      : AppDimens.rankingPodiumHeight;
-      end: Alignment.bottomRight,
+
-      colors: [AppColors.blue, AppColors.bluePressed],
+  Color get _badgeColor => switch (rank) {
-    ),
+    1 => AppColors.homeCrownGold,
-    2 => const LinearGradient(
+    2 => AppColors.rankSilver,
-      begin: Alignment.topLeft,
+    _ => AppColors.bronze,
-      end: Alignment.bottomRight,
-      colors: [_goldStart, _goldEnd],
-    ),
-    _ => const LinearGradient(
-      begin: Alignment.topLeft,
-      end: Alignment.bottomRight,
-      colors: [_bronzeStart, _bronzeEnd],
-    ),
   };
 
+  Color get _badgeTextColor =>
+      rank == 3 ? AppColors.textPrimary : AppColors.onGold;
+
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
@@ -241,10 +300,11 @@ class _PodiumCard extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         children: [
           ClipRRect(
-            borderRadius: BorderRadius.circular(_coverRadius),
+            borderRadius: BorderRadius.circular(AppDimens.rankingPodiumRadius),
-            child: AspectRatio(
+            child: SizedBox(
               key: Key('ranking-cover-$rank'),
-              aspectRatio: 3 / 4,
+              width: _coverWidth,
+              height: _coverHeight,
               child: Stack(
                 fit: StackFit.expand,
                 children: [
@@ -255,23 +315,23 @@ class _PodiumCard extends StatelessWidget {
                     fallbackAspectRatio: 3 / 4,
                   ),
                   Positioned(
-                    top: 8,
+                    top: 4,
-                    left: 8,
+                    left: 4,
                     child: Container(
                       key: Key('ranking-top-$rank'),
                       padding: const EdgeInsets.symmetric(
-                        horizontal: 8,
+                        horizontal: 6,
-                        vertical: 3,
+                        vertical: 2,
                       ),
                       decoration: BoxDecoration(
-                        gradient: _badgeGradient,
+                        color: _badgeColor,
-                        borderRadius: BorderRadius.circular(999),
+                        borderRadius: BorderRadius.circular(6),
                       ),
                       child: Text(
                         l10n.topLabel(rank),
                         maxLines: 1,
-                        style: const TextStyle(
+                        style: TextStyle(
-                          color: AppColors.onPrimary,
+                          color: _badgeTextColor,
                           fontSize: 11,
                           fontWeight: FontWeight.w800,
                         ),
@@ -284,22 +344,25 @@ class _PodiumCard extends StatelessWidget {
           ),
           const SizedBox(height: 6),
           SizedBox(
-            height: _titleSlotHeight,
+            height: 34,
-            child: Center(
+            child: Text(
-              child: Text(
+              drama.title,
-                drama.title,
+              key: Key('ranking-title-$rank'),
-                key: Key('ranking-title-$rank'),
+              maxLines: 2,
-                maxLines: 1,
+              overflow: TextOverflow.ellipsis,
-                overflow: TextOverflow.ellipsis,
+              textAlign: TextAlign.center,
-                textAlign: TextAlign.center,
+              style: const TextStyle(
-                style: TextStyle(
+                color: AppColors.textPrimary,
-                  color: AppColors.onSurface,
+                fontSize: 13,
-                  fontSize: _center ? 15 : 13,
+                fontWeight: FontWeight.w600,
-                  fontWeight: _center ? FontWeight.w800 : FontWeight.w700,
+                height: 1.25,
-                ),
               ),
             ),
           ),
+          if (drama.viewCount > 0) ...[
+            const SizedBox(height: 2),
+            _heat(drama.viewCount, l10n),
+          ],
         ],
       ),
     );
@@ -319,164 +382,119 @@ class _RankingRow extends StatelessWidget {
 
   int get _rank => index + 1;
 
-  List<String> _tagValues() {
+  String get _category {
-    final result = <String>[];
+    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.isEmpty || result.contains(tag)) continue;
+        if (tag.isNotEmpty) values.add(tag);
-        result.add(tag);
-        if (result.length == 3) return result;
       }
     }
-    return result;
+    return values.join(' · ');
   }
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return SizedBox(
-      decoration: BoxDecoration(
+      height: AppDimens.rankingRowHeight,
-        color: AppColors.card,
-        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
-        border: Border.all(color: AppColors.border),
-      ),
       child: Material(
         color: AppColors.transparent,
-        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
-        clipBehavior: Clip.antiAlias,
         child: InkWell(
           key: Key('ranking-row-$index'),
           onTap: () => unawaited(playDramaFromCatalog(context, drama)),
-          child: Padding(
+          child: Row(
-            padding: const EdgeInsets.all(10),
+            children: [
-            child: Row(
+              SizedBox(
-              children: [
+                width: AppDimens.rankingNumberWidth,
-                SizedBox(
+                child: Text(
-                  width: _rankColumnWidth,
+                  '$_rank',
-                  child: Text(
+                  key: Key('ranking-top-$_rank'),
-                    l10n.topLabel(_rank),
+                  textAlign: TextAlign.center,
-                    key: Key('ranking-top-$_rank'),
+                  maxLines: 1,
-                    textAlign: TextAlign.center,
+                  style: TextStyle(
-                    maxLines: 1,
+                    color: AppColors.textPrimary.withValues(alpha: 0.12),
-                    style: const TextStyle(
+                    fontSize: AppDimens.rankingNumberFont,
-                      color: AppColors.subtle,
+                    fontWeight: FontWeight.w800,
-                      fontSize: 18,
+                    height: 1,
-                      fontWeight: FontWeight.w800,
-                    ),
                   ),
                 ),
-                ClipRRect(
+              ),
-                  borderRadius: BorderRadius.circular(10),
+              ClipRRect(
-                  child: SizedBox(
+                borderRadius: BorderRadius.circular(
-                    width: _listCoverWidth,
+                  AppDimens.rankingCoverRadius,
-                    height: _listCoverHeight,
+                ),
-                    child: RemoteImage(
+                child: SizedBox(
-                      drama.posterUrl,
+                  key: Key('ranking-row-cover-$_rank'),
-                      fit: BoxFit.cover,
+                  width: AppDimens.rankingCoverWidth,
-                      showFallbackIcon: true,
+                  height: AppDimens.rankingCoverHeight,
-                      fallbackAspectRatio: 3 / 4,
+                  child: RemoteImage(
-                    ),
+                    drama.posterUrl,
+                    fit: BoxFit.cover,
+                    showFallbackIcon: true,
+                    fallbackAspectRatio: 3 / 4,
                   ),
                 ),
-                const SizedBox(width: 12),
+              ),
-                Expanded(
+              const SizedBox(width: AppDimens.spaceMd),
+              Expanded(
+                child: SizedBox(
+                  height: AppDimens.rankingCoverHeight,
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
-                    mainAxisSize: MainAxisSize.min,
                     children: [
                       Text(
                         drama.title,
-                        maxLines: 2,
+                        maxLines: 1,
                         overflow: TextOverflow.ellipsis,
                         style: const TextStyle(
-                          color: AppColors.onSurface,
+                          color: AppColors.textPrimary,
                           fontSize: 15,
-                          fontWeight: FontWeight.w700,
+                          fontWeight: FontWeight.w500,
                         ),
                       ),
-                      if (drama.synopsis.trim().isNotEmpty) ...[
+                      if (_category.isNotEmpty) ...[
-                        const SizedBox(height: 4),
+                        const SizedBox(height: AppDimens.spaceXs),
                         Text(
-                          drama.synopsis,
+                          _category,
-                          maxLines: 2,
+                          maxLines: 1,
                           overflow: TextOverflow.ellipsis,
                           style: const TextStyle(
-                            color: AppColors.muted,
+                            color: AppColors.textTertiary,
-                            fontSize: 12,
+                            fontSize: 11,
-                            height: 1.3,
                           ),
                         ),
                       ],
-                      if (_tagValues().isNotEmpty) ...[
+                      const Spacer(),
-                        const SizedBox(height: 6),
+                      if (drama.viewCount > 0) _heat(drama.viewCount, l10n),
-                        Wrap(
-                          spacing: 6,
-                          runSpacing: 4,
-                          children: [
-                            for (final tag in _tagValues())
-                              Container(
-                                padding: const EdgeInsets.symmetric(
-                                  horizontal: 6,
-                                  vertical: 2,
-                                ),
-                                decoration: BoxDecoration(
-                                  color: AppColors.raised,
-                                  borderRadius: BorderRadius.circular(6),
-                                ),
-                                child: Text(
-                                  tag,
-                                  maxLines: 1,
-                                  overflow: TextOverflow.ellipsis,
-                                  style: const TextStyle(
-                                    color: AppColors.muted,
-                                    fontSize: 11,
-                                  ),
-                                ),
-                              ),
-                          ],
-                        ),
-                      ],
-                      const SizedBox(height: 8),
-                      Row(
-                        children: [
-                          const Icon(
-                            Icons.local_fire_department_rounded,
-                            color: AppColors.blue,
-                            size: 12,
-                          ),
-                          const SizedBox(width: 4),
-                          Flexible(
-                            child: Text(
-                              l10n.heatLabel(
-                                formatInteractionCount(drama.viewCount),
-                              ),
-                              maxLines: 1,
-                              overflow: TextOverflow.ellipsis,
-                              style: const TextStyle(
-                                color: AppColors.muted,
-                                fontSize: 11,
-                              ),
-                            ),
-                          ),
-                          const SizedBox(width: 8),
-                          Text(
-                            l10n.episodeCount(drama.episodeCount),
-                            maxLines: 1,
-                            style: const TextStyle(
-                              color: AppColors.muted,
-                              fontSize: 11,
-                            ),
-                          ),
-                        ],
-                      ),
                     ],
                   ),
                 ),
-              ],
+              ),
-            ),
+            ],
           ),
         ),
       ),
     );
   }
 }
+
+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),
+      Text(
+        l10n.heatLabel(formatPlayCount(count)),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+        style: const TextStyle(color: AppColors.textTertiary, fontSize: 11),
+      ),
+    ],
+  );
+}

test/discover/theater_pages_test.dart

@@ -117,8 +117,8 @@ void main() {
     expect(top3.right, closeTo(376, 0.5));
     expect(top2.left, lessThan(top1.left));
     expect(top3.left, greaterThan(top1.right));
-    expect(top1.bottom, closeTo(top2.bottom, 0.5));
+    expect(top1.bottom, closeTo(top2.bottom - 12, 0.5));
-    expect(top1.bottom, closeTo(top3.bottom, 0.5));
+    expect(top2.bottom, closeTo(top3.bottom, 0.5));
     expect(find.byKey(const Key('ranking-row-3')), findsNothing);
   });
 
@@ -129,13 +129,19 @@ void main() {
 
     expect(find.byKey(const Key('ranking-row-3')), findsOneWidget);
     expect(find.byKey(const Key('ranking-row-2')), findsNothing);
-    expect(find.byKey(const Key('ranking-top-4')), findsOneWidget);
+    final rankNumber = tester.widget<Text>(
+      find.byKey(const Key('ranking-top-4')),
+    );
+    expect(rankNumber.data, '4');
+    expect(rankNumber.style?.fontSize, 48);
+    expect(rankNumber.style?.fontWeight, FontWeight.w800);
     expect(
-      find.descendant(
+      tester.getSize(find.byKey(const Key('ranking-row-3'))),
-        of: find.byKey(const Key('ranking-row-3')),
+      const Size(362, 96),
-        matching: find.text('synopsis'),
+    );
-      ),
+    expect(
-      findsOneWidget,
+      tester.getSize(find.byKey(const Key('ranking-row-cover-4'))),
+      const Size(60, 80),
     );
   });
 

test/home/home_grid_layout_test.dart

@@ -114,8 +114,9 @@ void main() {
 
     await tester.tap(find.byKey(const Key('home-section-ranking')));
     await tester.pumpAndSettle();
-    expect(find.byKey(const Key('ranking-page')), findsNothing);
+    expect(find.byKey(const Key('ranking-page')), findsOneWidget);
-    expect(firstDramaId(), 'page1-0');
+    expect(find.byKey(const Key('ranking-hero')), findsOneWidget);
+    expect(find.byKey(const Key('home-grid-cards')), findsNothing);
 
     await tester.tap(find.byKey(const Key('home-section-categories')));
     await tester.pumpAndSettle();