feat(flutter): 榜单页三强横排与第四名起列表

lib/pages/ranking/ranking_page.dart

@@ -15,14 +15,23 @@ import '../../l10n/app_localizations.dart';
 import '../drama_detail/drama_detail_view.dart';
 
 const int _topCount = 50;
-const double _rankColumnWidth = 56;
-const double _coverWidth = 72;
-const double _coverHeight = 96;
+const double _podiumGap = 8;
+const double _centerCoverWidth = 120;
+const double _centerCoverHeight = 160;
+const double _sideCoverWidth = 92;
+const double _sideCoverHeight = 124;
+const double _coverRadius = 12;
+const double _titleSlotHeight = 24;
 const double _rowGap = 12;
-const Color _rankSilver = Color(0xFFB8860B);
-const Color _rankBronze = Color(0xFF8C837B);
+const double _rankColumnWidth = 56;
+const double _listCoverWidth = 72;
+const double _listCoverHeight = 96;
+const Color _goldStart = Color(0xFFF3B34C);
+const Color _goldEnd = Color(0xFFD9A23A);
+const Color _bronzeStart = Color(0xFFCD7F32);
+const Color _bronzeEnd = Color(0xFFA9713A);
 
-/// 剧场榜单页：按播放量降序展示 TOP 榜单。
+/// 剧场榜单页：前三名横排领奖台，第 4 名起纵向列表。
 class RankingPage extends StatelessWidget {
   const RankingPage({super.key});
 
@@ -32,6 +41,8 @@ class RankingPage extends StatelessWidget {
     final dramas = [...context.read<CatalogController>().dramas]
       ..sort((a, b) => b.viewCount.compareTo(a.viewCount));
     final top = dramas.take(_topCount).toList();
+    final podium = top.take(3).toList();
+    final rest = top.skip(3).toList();
     return PlainPageScaffold(
       pageKey: const Key('ranking-page'),
       backKey: const Key('ranking-back'),
@@ -39,17 +50,171 @@ class RankingPage extends StatelessWidget {
       subtitle: l10n.rankingSubtitle,
       child: top.isEmpty
           ? EmptyState(icon: Icons.leaderboard_outlined, title: l10n.noStories)
-          : ListView.separated(
-              padding: const EdgeInsets.fromLTRB(14, 4, 14, 24),
-              itemCount: top.length,
-              separatorBuilder: (_, _) => const SizedBox(height: _rowGap),
-              itemBuilder: (context, index) =>
-                  _RankingRow(index: index, drama: top[index], l10n: l10n),
+          : ListView(
+              padding: const EdgeInsets.only(top: 4, bottom: 24),
+              children: [
+                if (podium.isNotEmpty)
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 14),
+                    child: _Podium(podium: podium, l10n: l10n),
+                  ),
+                if (rest.isNotEmpty) ...[
+                  const SizedBox(height: 16),
+                  for (var index = 0; index < rest.length; index++) ...[
+                    if (index > 0) const SizedBox(height: _rowGap),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 14),
+                      child: _RankingRow(
+                        index: index + 3,
+                        drama: rest[index],
+                        l10n: l10n,
+                      ),
+                    ),
+                  ],
+                ],
+              ],
             ),
     );
   }
 }
 
+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 Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.end,
+      children: [
+        SizedBox(width: _sideCoverWidth, child: _slot(2)),
+        const SizedBox(width: _podiumGap),
+        SizedBox(width: _centerCoverWidth, child: _slot(1)),
+        const SizedBox(width: _podiumGap),
+        SizedBox(width: _sideCoverWidth, child: _slot(3)),
+      ],
+    );
+  }
+
+  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 {
+  const _PodiumCard({
+    required this.rank,
+    required this.drama,
+    required this.l10n,
+  });
+
+  final int rank;
+  final Drama drama;
+  final AppLocalizations l10n;
+
+  bool get _center => rank == 1;
+
+  double get _width => _center ? _centerCoverWidth : _sideCoverWidth;
+  double get _height => _center ? _centerCoverHeight : _sideCoverHeight;
+
+  LinearGradient get _badgeGradient => switch (rank) {
+    1 => const LinearGradient(
+      begin: Alignment.topLeft,
+      end: Alignment.bottomRight,
+      colors: [AppColors.blue, AppColors.bluePressed],
+    ),
+    2 => const LinearGradient(
+      begin: Alignment.topLeft,
+      end: Alignment.bottomRight,
+      colors: [_goldStart, _goldEnd],
+    ),
+    _ => const LinearGradient(
+      begin: Alignment.topLeft,
+      end: Alignment.bottomRight,
+      colors: [_bronzeStart, _bronzeEnd],
+    ),
+  };
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () => Navigator.of(context).push<void>(
+        MaterialPageRoute(builder: (_) => DramaDetailPage(drama: drama)),
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          ClipRRect(
+            borderRadius: BorderRadius.circular(_coverRadius),
+            child: SizedBox(
+              key: Key('ranking-cover-$rank'),
+              width: _width,
+              height: _height,
+              child: Stack(
+                fit: StackFit.expand,
+                children: [
+                  RemoteImage(
+                    drama.posterUrl,
+                    fit: BoxFit.cover,
+                    showFallbackIcon: true,
+                    fallbackAspectRatio: 3 / 4,
+                  ),
+                  Positioned(
+                    top: 8,
+                    left: 8,
+                    child: Container(
+                      key: Key('ranking-top-$rank'),
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 8,
+                        vertical: 3,
+                      ),
+                      decoration: BoxDecoration(
+                        gradient: _badgeGradient,
+                        borderRadius: BorderRadius.circular(999),
+                      ),
+                      child: Text(
+                        l10n.topLabel(rank),
+                        maxLines: 1,
+                        style: const TextStyle(
+                          color: Colors.white,
+                          fontSize: 11,
+                          fontWeight: FontWeight.w800,
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          const SizedBox(height: 6),
+          SizedBox(
+            height: _titleSlotHeight,
+            child: Center(
+              child: Text(
+                drama.title,
+                key: Key('ranking-title-$rank'),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                  color: AppColors.onSurface,
+                  fontSize: _center ? 15 : 13,
+                  fontWeight: _center ? FontWeight.w800 : FontWeight.w700,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
 class _RankingRow extends StatelessWidget {
   const _RankingRow({
     required this.index,
@@ -63,15 +228,6 @@ class _RankingRow extends StatelessWidget {
 
   int get _rank => index + 1;
 
-  Color get _rankColor => switch (_rank) {
-    1 => AppColors.blue,
-    2 => _rankSilver,
-    3 => _rankBronze,
-    _ => AppColors.subtle,
-  };
-
-  double get _rankSize => _rank == 1 ? 22 : (_rank <= 3 ? 20 : 18);
-
   @override
   Widget build(BuildContext context) {
     final genre = drama.genre.isEmpty ? drama.category : drama.genre;
@@ -101,18 +257,18 @@ class _RankingRow extends StatelessWidget {
                     key: Key('ranking-top-$_rank'),
                     textAlign: TextAlign.center,
                     maxLines: 1,
-                    style: TextStyle(
-                      color: _rankColor,
-                      fontSize: _rankSize,
-                      fontWeight: FontWeight.w900,
+                    style: const TextStyle(
+                      color: AppColors.subtle,
+                      fontSize: 18,
+                      fontWeight: FontWeight.w800,
                     ),
                   ),
                 ),
                 ClipRRect(
                   borderRadius: BorderRadius.circular(10),
                   child: SizedBox(
-                    width: _coverWidth,
-                    height: _coverHeight,
+                    width: _listCoverWidth,
+                    height: _listCoverHeight,
                     child: RemoteImage(
                       drama.posterUrl,
                       fit: BoxFit.cover,

test/discover/theater_pages_test.dart

@@ -3,6 +3,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:fruitshorts/app.dart';
+import 'package:fruitshorts/core/data/models/drama.dart';
 import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
 import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
 import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
@@ -31,14 +32,11 @@ void main() {
     expect(find.byKey(const Key('ranking-page')), findsOneWidget);
     expect(find.text('TOP 1'), findsOneWidget);
     expect(
-      find.descendant(
-        of: find.byKey(const Key('ranking-row-0')),
-        matching: find.text('The Signal'),
-      ),
-      findsOneWidget,
+      tester.widget<Text>(find.byKey(const Key('ranking-title-1'))).data,
+      'The Signal',
     );
 
-    await tester.tap(find.byKey(const Key('ranking-row-0')));
+    await tester.tap(find.byKey(const Key('ranking-top-1')));
     await tester.pumpAndSettle();
     expect(find.byType(DramaDetailPage), findsOneWidget);
   });
@@ -71,6 +69,44 @@ void main() {
     );
   });
 
+  testWidgets('should_render_podium_with_center_on_top', (tester) async {
+    await _pumpTheater(tester);
+    await tester.tap(find.byKey(const Key('theater-toolbar-ranking')));
+    await tester.pumpAndSettle();
+
+    final top1 = tester.getRect(find.byKey(const Key('ranking-cover-1')));
+    final top2 = tester.getRect(find.byKey(const Key('ranking-cover-2')));
+    final top3 = tester.getRect(find.byKey(const Key('ranking-cover-3')));
+    expect(top1.size, const Size(120, 160));
+    expect(top2.size, const Size(92, 124));
+    expect(top3.size, const Size(92, 124));
+    expect(top2.left, lessThan(top1.left));
+    expect(top3.left, greaterThan(top1.right));
+    expect(top1.bottom, closeTo(top2.bottom, 0.5));
+    expect(top1.bottom, closeTo(top3.bottom, 0.5));
+    expect(find.byKey(const Key('ranking-row-3')), findsNothing);
+  });
+
+  testWidgets('should_list_rank_four_and_below', (tester) async {
+    await _pumpTheater(tester, dramas: _rankDramas(5));
+    await tester.tap(find.byKey(const Key('theater-toolbar-ranking')));
+    await tester.pumpAndSettle();
+
+    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);
+  });
+
+  testWidgets('should_truncate_podium_when_less_than_three', (tester) async {
+    await _pumpTheater(tester, dramas: _rankDramas(1));
+    await tester.tap(find.byKey(const Key('theater-toolbar-ranking')));
+    await tester.pumpAndSettle();
+
+    expect(find.byKey(const Key('ranking-top-1')), findsOneWidget);
+    expect(find.byKey(const Key('ranking-top-2')), findsNothing);
+    expect(find.byKey(const Key('ranking-top-3')), findsNothing);
+  });
+
   testWidgets('should_go_back_to_theater_from_ranking_page', (tester) async {
     await _pumpTheater(tester);
     await tester.tap(find.byKey(const Key('theater-toolbar-ranking')));
@@ -84,12 +120,12 @@ void main() {
   });
 }
 
-Future<void> _pumpTheater(WidgetTester tester) async {
+Future<void> _pumpTheater(WidgetTester tester, {List<Drama>? dramas}) async {
   tester.view.physicalSize = const Size(390, 844);
   tester.view.devicePixelRatio = 1;
   addTearDown(tester.view.resetPhysicalSize);
   addTearDown(tester.view.resetDevicePixelRatio);
-  final catalog = FakeCatalogRepository();
+  final catalog = FakeCatalogRepository(dramas: dramas);
   await tester.pumpWidget(
     LumaDramaApp(
       playerFactory: createWidgetPlayer,
@@ -108,3 +144,23 @@ Future<void> _pumpTheater(WidgetTester tester) async {
   await tester.tap(find.byKey(const Key('tab-theater')));
   await tester.pumpAndSettle();
 }
+
+List<Drama> _rankDramas(int count) => [
+  for (var index = 0; index < count; index++)
+    Drama(
+      id: 'rank-$index',
+      title: 'Rank $index',
+      synopsis: 'synopsis',
+      posterUrl: '',
+      totalEpisodes: 10,
+      viewCount: (count - index) * 100,
+      episodes: [
+        Episode(
+          id: 'rank-$index-1',
+          number: 1,
+          title: 'Episode 1',
+          isFree: true,
+        ),
+      ],
+    ),
+];