feat(ranking): 榜单改为统一行布局

test/discover/theater_pages_test.dart

@@ -6,7 +6,9 @@ import 'package:fruitshorts/app.dart';
 import 'package:fruitshorts/core/data/models/drama.dart';
 import 'package:fruitshorts/core/data/models/home_feed.dart';
 import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/core/theme/app_dimens.dart';
 import 'package:fruitshorts/core/widgets/app_pull_to_refresh.dart';
+import 'package:fruitshorts/core/widgets/paged_local_list.dart';
 import 'package:fruitshorts/pages/discover/discover_view.dart';
 import 'package:fruitshorts/pages/discover/widgets/drama_grid.dart';
 import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
@@ -34,7 +36,17 @@ void main() {
 
     expect(find.byKey(const Key('ranking-page')), findsOneWidget);
     _expectUnifiedHeader(tester, const Key('ranking-back'));
-    expect(find.text('TOP 1'), findsOneWidget);
+    expect(
+      tester
+          .widget<Text>(
+            find.descendant(
+              of: find.byKey(const Key('ranking-top-1')),
+              matching: find.byType(Text),
+            ),
+          )
+          .data,
+      '1',
+    );
     expect(
       tester.widget<Text>(find.byKey(const Key('ranking-title-1'))).data,
       'The Signal',
@@ -105,51 +117,72 @@ void main() {
     expect(find.byKey(const Key('new-releases-page')), findsOneWidget);
   });
 
-  testWidgets('should_render_podium_with_center_on_top', (tester) async {
+  testWidgets('should_render_uniform_rows_with_cover_badges', (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.width, greaterThan(top2.width));
-    expect(top3.width, closeTo(top2.width, 0.5));
-    expect(top2.left, closeTo(8, 0.5));
-    expect(top3.right, closeTo(382, 0.5));
-    expect(top1.left - top2.right, lessThanOrEqualTo(10));
-    expect(top2.width, greaterThan(100));
-    expect(top2.left, lessThan(top1.left));
-    expect(top3.left, greaterThan(top1.right));
-    expect(top1.bottom, closeTo(top2.bottom - 30, 0.5));
-    expect(top2.bottom, closeTo(top3.bottom, 0.5));
-    expect(find.byKey(const Key('ranking-row-3')), findsNothing);
+    for (var rank = 1; rank <= 3; rank++) {
+      expect(find.byKey(Key('ranking-row-${rank - 1}')), findsOneWidget);
+      expect(
+        tester.getSize(find.byKey(Key('ranking-row-cover-$rank'))),
+        const Size(96, 128),
+      );
+      final badge = tester.widget<Container>(
+        find.byKey(Key('ranking-top-$rank')),
+      );
+      final decoration = badge.decoration! as BoxDecoration;
+      final expected = switch (rank) {
+        1 => AppColors.brandRed,
+        2 => AppColors.homeCrownGold,
+        _ => AppColors.bronze,
+      };
+      expect(decoration.color, expected);
+    }
   });
 
-  testWidgets('should_list_rank_four_and_below', (tester) async {
+  testWidgets('should_list_every_rank_as_row', (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);
+    for (var index = 0; index < 5; index++) {
+      expect(find.byKey(Key('ranking-row-$index')), findsOneWidget);
+    }
     final rankNumber = tester.widget<Text>(
-      find.byKey(const Key('ranking-top-4')),
+      find.descendant(
+        of: find.byKey(const Key('ranking-top-4')),
+        matching: find.byType(Text),
+      ),
     );
     expect(rankNumber.data, '4');
-    expect(rankNumber.style?.fontSize, 48);
-    expect(rankNumber.style?.fontWeight, FontWeight.w800);
+    expect(rankNumber.style?.fontSize, 14);
+    expect(rankNumber.style?.fontWeight, FontWeight.w700);
+    final badge = tester.widget<Container>(
+      find.byKey(const Key('ranking-top-4')),
+    );
+    expect(
+      tester.getSize(find.byKey(const Key('ranking-top-4'))),
+      const Size(24, 24),
+    );
+    expect(
+      (badge.decoration! as BoxDecoration).borderRadius,
+      const BorderRadius.only(
+        topLeft: Radius.circular(AppDimens.rankingCoverRadius),
+        bottomRight: Radius.circular(10),
+      ),
+    );
     expect(
       tester.getSize(find.byKey(const Key('ranking-row-3'))),
-      const Size(362, 96),
+      const Size(362, 128),
     );
     expect(
       tester.getSize(find.byKey(const Key('ranking-row-cover-4'))),
-      const Size(60, 80),
+      const Size(96, 128),
     );
   });
 
-  testWidgets('should_truncate_podium_when_less_than_three', (tester) async {
+  testWidgets('should_render_single_row_when_only_one_drama', (tester) async {
     await _pumpTheater(tester, dramas: _rankDramas(1));
     await tester.tap(find.byKey(const Key('theater-toolbar-ranking')));
     await tester.pumpAndSettle();
@@ -194,14 +227,18 @@ void main() {
     final list = find.byKey(const Key('ranking-list'));
     expect(tester.widget<ListView>(list).physics, AppPullToRefresh.physics);
     final position = _scrollPosition(tester, const Key('ranking-list'));
+    // jumpTo 不发滚动通知，滑到底后再拖一下才会触发加载。
     position.jumpTo(position.maxScrollExtent);
     await tester.pump();
+    await tester.drag(list, const Offset(0, -60));
+    await tester.pump();
 
     expect(find.byKey(const Key('ranking-row-19')), findsOneWidget);
     expect(find.byKey(const Key('ranking-row-20')), findsNothing);
-    expect(find.byKey(const Key('ranking-load-more')), findsOneWidget);
+    // 加载指示出现后会撑高列表，可视区外被 finder 视为 offstage，直接看状态。
+    expect(_loadFooter(tester).loading, isTrue);
     await tester.pump(const Duration(milliseconds: 299));
-    expect(find.byKey(const Key('ranking-load-more')), findsOneWidget);
+    expect(_loadFooter(tester).loading, isTrue);
     await tester.pump(const Duration(milliseconds: 1));
 
     position.jumpTo(position.maxScrollExtent);
@@ -219,11 +256,14 @@ void main() {
 
     expect(repository.fetchCalls, beforeRefresh + 1);
     expect(position.pixels, 0);
-    position.jumpTo(position.maxScrollExtent);
-    await tester.pump();
-    expect(find.byKey(const Key('ranking-load-more')), findsOneWidget);
-    expect(find.byKey(const Key('ranking-no-more')), findsNothing);
+    // 刷新重置回 20 项后，滑到底再触发一次加载，应恢复 40 项。
+    final refreshed = _scrollPosition(tester, const Key('ranking-list'));
+    refreshed.jumpTo(refreshed.maxScrollExtent);
     await tester.pumpAndSettle();
+    refreshed.jumpTo(refreshed.maxScrollExtent);
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('ranking-row-39')), findsOneWidget);
+    expect(find.byKey(const Key('ranking-no-more')), findsNothing);
   });
 
   testWidgets('should_page_new_releases_and_reset_after_refresh', (
@@ -311,10 +351,9 @@ Future<void> _pumpTheater(
     ),
   );
   await tester.pumpAndSettle();
-  Navigator.of(tester.element(find.byKey(const Key('home-tabs'))))
-      .push<void>(
-        MaterialPageRoute(builder: (_) => const DiscoverPage()),
-      );
+  Navigator.of(
+    tester.element(find.byKey(const Key('home-tabs'))),
+  ).push<void>(MaterialPageRoute(builder: (_) => const DiscoverPage()));
   await tester.pumpAndSettle();
 }
 
@@ -326,6 +365,15 @@ ScrollPosition _scrollPosition(WidgetTester tester, Key listKey) {
   return tester.state<ScrollableState>(scrollable.first).position;
 }
 
+PagedLoadFooter _loadFooter(WidgetTester tester) {
+  return tester.widget<PagedLoadFooter>(
+    find.descendant(
+      of: find.byKey(const Key('ranking-page'), skipOffstage: false),
+      matching: find.byType(PagedLoadFooter, skipOffstage: false),
+    ),
+  );
+}
+
 class _CountingCatalogRepository extends FakeCatalogRepository {
   _CountingCatalogRepository({super.dramas});
 

test/home/home_ranking_dramas_test.dart

@@ -0,0 +1,86 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/models/category_ranking.dart';
+import 'package:fruitshorts/core/data/models/content_category.dart';
+import 'package:fruitshorts/core/data/models/drama.dart';
+import 'package:fruitshorts/core/data/models/home_feed.dart';
+import 'package:fruitshorts/core/data/repositories/category_repository.dart';
+import 'package:fruitshorts/core/data/services/category_controller.dart';
+import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/core/theme/app_theme.dart';
+import 'package:fruitshorts/l10n/app_localizations.dart';
+import 'package:fruitshorts/pages/home/widgets/home_ranking_dramas.dart';
+import 'package:provider/provider.dart';
+
+void main() {
+  testWidgets('should_render_uniform_rows_in_server_rank_order', (
+    tester,
+  ) async {
+    final controller = CategoryController(_EmptyCategoryRepository());
+    controller.rankingSlotOf('ranking').ranking = CategoryRanking(
+      id: 'ranking',
+      code: 'RECOMMEND_RANKING',
+      revision: '4',
+      entries: [
+        for (var rank = 1; rank <= 4; rank++)
+          CategoryRankingEntry(rank: rank, drama: _drama('$rank')),
+      ],
+    );
+    Drama? opened;
+
+    await tester.pumpWidget(
+      ChangeNotifierProvider.value(
+        value: controller,
+        child: MaterialApp(
+          theme: AppTheme.dark(),
+          localizationsDelegates: AppLocalizations.localizationsDelegates,
+          supportedLocales: AppLocalizations.supportedLocales,
+          home: Scaffold(
+            body: HomeRankingDramas(
+              categoryId: 'ranking',
+              onOpenDrama: (drama) => opened = drama,
+            ),
+          ),
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    for (var rank = 1; rank <= 4; rank++) {
+      expect(find.byKey(Key('ranking-top-$rank')), findsOneWidget);
+      expect(find.byKey(Key('ranking-row-${rank - 1}')), findsOneWidget);
+    }
+    expect(find.byKey(const Key('home-ranking-top-1')), findsNothing);
+    final surface = tester.widget<DecoratedBox>(
+      find.byKey(const Key('home-ranking-surface')),
+    );
+    final gradient =
+        (surface.decoration as BoxDecoration).gradient! as LinearGradient;
+    expect(gradient.colors.first, AppColors.followingGlow);
+    expect(
+      tester.getSize(find.byKey(const Key('ranking-row-cover-1'))),
+      const Size(96, 128),
+    );
+
+    await tester.tap(find.byKey(const Key('ranking-top-2')));
+    expect(opened?.id, '2');
+  });
+}
+
+Drama _drama(String id) => Drama(
+  id: id,
+  title: 'Rank $id',
+  synopsis: '',
+  posterUrl: '',
+  viewCount: int.parse(id) * 10,
+);
+
+class _EmptyCategoryRepository implements CategoryRepository {
+  @override
+  Future<List<ContentCategory>> fetchCategories() async => const [];
+
+  @override
+  Future<HomeFeed> fetchDiscoverFeed() async => const HomeFeed();
+}

test/ranking/ranking_page_test.dart

@@ -0,0 +1,126 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/models/drama.dart';
+import 'package:fruitshorts/core/data/models/feed_page.dart';
+import 'package:fruitshorts/core/data/models/home_feed.dart';
+import 'package:fruitshorts/core/data/repositories/catalog_repository.dart';
+import 'package:fruitshorts/core/data/services/catalog_controller.dart';
+import 'package:fruitshorts/core/theme/app_theme.dart';
+import 'package:fruitshorts/l10n/app_localizations.dart';
+import 'package:fruitshorts/pages/ranking/ranking_page.dart';
+import 'package:provider/provider.dart';
+
+void main() {
+  testWidgets('should_render_rank_badges_on_covers_for_all_entries', (
+    tester,
+  ) async {
+    await _pumpPage(tester, [
+      _drama('a', viewCount: 400),
+      _drama('b', viewCount: 300),
+      _drama('c', viewCount: 200),
+      _drama('d', viewCount: 100),
+    ]);
+
+    expect(find.byKey(const Key('ranking-top-1')), findsOneWidget);
+    expect(find.byKey(const Key('ranking-top-2')), findsOneWidget);
+    expect(find.byKey(const Key('ranking-top-3')), findsOneWidget);
+    expect(find.byKey(const Key('ranking-top-4')), findsOneWidget);
+    expect(find.byKey(const Key('ranking-row-cover-1')), findsOneWidget);
+    expect(find.byKey(const Key('ranking-title-1')), findsOneWidget);
+  });
+
+  testWidgets('should_hide_optional_fields_when_drama_has_no_data', (
+    tester,
+  ) async {
+    await _pumpPage(tester, [_drama('solo')]);
+
+    expect(find.byKey(const Key('ranking-tag-1')), findsNothing);
+    expect(find.byIcon(Icons.local_fire_department_rounded), findsNothing);
+  });
+
+  testWidgets('should_show_optional_fields_when_present', (tester) async {
+    await _pumpPage(tester, [
+      _drama(
+        'rich',
+        viewCount: 15340000,
+        likeCount: 550,
+        tag: '新剧',
+        genre: '剧情',
+        synopsis: '以拟人化视角，重温长征岁月。',
+      ),
+    ]);
+
+    expect(find.byKey(const Key('ranking-tag-1')), findsOneWidget);
+    expect(find.text('新剧'), findsOneWidget);
+    expect(find.text('剧情'), findsOneWidget);
+    expect(find.text('以拟人化视角，重温长征岁月。'), findsOneWidget);
+    expect(find.text('1534w heat · 550 likes'), findsOneWidget);
+    final synopsis = tester.widget<Text>(find.text('以拟人化视角，重温长征岁月。'));
+    expect(synopsis.maxLines, 3);
+    expect(synopsis.overflow, TextOverflow.ellipsis);
+    final tag = tester.widget<Text>(find.byKey(const Key('ranking-tag-1')));
+    expect(tag.style?.color, isNotNull);
+    final synopsisRect = tester.getRect(find.text('以拟人化视角，重温长征岁月。'));
+    final tagRect = tester.getRect(find.byKey(const Key('ranking-tag-1')));
+    expect(tagRect.top - synopsisRect.bottom, lessThan(8));
+  });
+}
+
+Future<void> _pumpPage(WidgetTester tester, List<Drama> dramas) async {
+  final controller = CatalogController(_EmptyCatalogRepository());
+  controller.feed = HomeFeed(
+    sections: [FeedSection(code: 'hot', title: 'Hot', dramas: dramas)],
+  );
+  await tester.pumpWidget(
+    ChangeNotifierProvider.value(
+      value: controller,
+      child: MaterialApp(
+        theme: AppTheme.dark(),
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
+        supportedLocales: AppLocalizations.supportedLocales,
+        home: const RankingPage(),
+      ),
+    ),
+  );
+  await tester.pumpAndSettle();
+}
+
+Drama _drama(
+  String id, {
+  int viewCount = 0,
+  int? likeCount,
+  String tag = '',
+  String genre = '',
+  String synopsis = '',
+}) => Drama(
+  id: id,
+  title: 'Drama $id',
+  synopsis: synopsis,
+  posterUrl: '',
+  tag: tag,
+  genre: genre,
+  viewCount: viewCount,
+  likeCount: likeCount,
+);
+
+class _EmptyCatalogRepository implements CatalogRepository {
+  @override
+  Future<HomeFeed> fetchHomeFeed() async => const HomeFeed();
+
+  @override
+  Future<HomeFeed> fetchDiscoverFeed() async => const HomeFeed();
+
+  @override
+  Future<FeedPage> fetchFeed({
+    List<String> types = const [],
+    String? categoryId,
+    String? cursor,
+    int size = 10,
+  }) async => const FeedPage();
+
+  @override
+  Future<Drama> fetchDrama(String dramaId) async =>
+      Drama(id: dramaId, title: '', synopsis: '', posterUrl: '');
+}

test/recommend/recommend_discover_empty_state_test.dart

@@ -0,0 +1,138 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:fruitshorts/core/data/models/category_ranking.dart';
+import 'package:fruitshorts/core/data/models/content_category.dart';
+import 'package:fruitshorts/core/data/models/drama.dart';
+import 'package:fruitshorts/core/data/models/page_result.dart';
+import 'package:fruitshorts/core/data/services/category_controller.dart';
+import 'package:fruitshorts/l10n/app_localizations.dart';
+import 'package:fruitshorts/pages/recommend/recommend_discover_page.dart';
+import 'package:provider/provider.dart';
+
+import '../support/fake_catalog.dart';
+import '../support/fake_category.dart';
+
+void main() {
+  testWidgets('should_center_empty_state_when_category_has_no_dramas', (
+    tester,
+  ) async {
+    tester.view.physicalSize = const Size(390, 844);
+    tester.view.devicePixelRatio = 1;
+    addTearDown(tester.view.resetPhysicalSize);
+    addTearDown(tester.view.resetDevicePixelRatio);
+
+    final controller = CategoryController(
+      FakeCategoryRepository(catalog: FakeCatalogRepository()),
+    );
+    controller.categories = const [ContentCategory(id: '7', name: 'Romance')];
+    controller.dramaPageLoader =
+        (categoryId, {pageIndex = 1, pageSize = 20}) async =>
+            const PageResult<Drama>();
+    addTearDown(controller.dispose);
+
+    await tester.pumpWidget(
+      MaterialApp(
+        locale: const Locale('zh'),
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
+        supportedLocales: AppLocalizations.supportedLocales,
+        home: ChangeNotifierProvider<CategoryController>.value(
+          value: controller,
+          child: const RecommendDiscoverPage(active: true, onSearch: _noop),
+        ),
+      ),
+    );
+    await tester.pump();
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 1));
+
+    expect(find.text('暂无剧目'), findsOneWidget);
+    expect(find.text('暂无剧目。'), findsNothing);
+
+    final content = tester.getRect(
+      find.byKey(const Key('empty-state-content')),
+    );
+    final icon = tester.getRect(find.byKey(const Key('empty-state-icon')));
+    final title = tester.getRect(find.byKey(const Key('empty-state-title')));
+    final viewport = tester.view.physicalSize / tester.view.devicePixelRatio;
+    expect(content.center.dx, closeTo(viewport.width / 2, 1.0));
+    expect(content.center.dy, closeTo(viewport.height / 2, 1.0));
+    expect(icon.center.dx, closeTo(title.center.dx, 0.1));
+    expect(title.top - icon.bottom, closeTo(12, 0.1));
+  });
+
+  testWidgets('should_render_ranking_layout_when_category_is_ranking', (
+    tester,
+  ) async {
+    final controller = CategoryController(
+      FakeCategoryRepository(catalog: FakeCatalogRepository()),
+    );
+    controller.categories = const [
+      ContentCategory(
+        id: 'ranking',
+        name: '推荐榜',
+        layoutType: ContentCategory.rankingLayout,
+      ),
+    ];
+    var dramaLoads = 0;
+    var rankingLoads = 0;
+    controller.dramaPageLoader =
+        (categoryId, {pageIndex = 1, pageSize = 20}) async {
+          dramaLoads++;
+          return const PageResult<Drama>();
+        };
+    controller.rankingLoader = (categoryId) async {
+      rankingLoads++;
+      return CategoryRanking(
+        id: categoryId,
+        code: 'RECOMMEND_RANKING',
+        revision: '2',
+        entries: [
+          for (var rank = 1; rank <= 4; rank++)
+            CategoryRankingEntry(rank: rank, drama: _drama('$rank')),
+        ],
+      );
+    };
+    addTearDown(controller.dispose);
+
+    await tester.pumpWidget(
+      MaterialApp(
+        locale: const Locale('zh'),
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
+        supportedLocales: AppLocalizations.supportedLocales,
+        home: ChangeNotifierProvider<CategoryController>.value(
+          value: controller,
+          child: const RecommendDiscoverPage(active: true, onSearch: _noop),
+        ),
+      ),
+    );
+    await tester.pumpAndSettle();
+
+    expect(rankingLoads, 1);
+    expect(dramaLoads, 0);
+    expect(find.byKey(const Key('ranking-top-1')), findsOneWidget);
+    expect(find.byKey(const Key('ranking-row-3')), findsOneWidget);
+    final navUnderline = tester.getRect(
+      find.byKey(const Key('recommend-tab-ranking-underline')),
+    );
+    final firstRow = tester.getRect(find.byKey(const Key('ranking-row-0')));
+    final gap = firstRow.top - navUnderline.bottom;
+    expect(gap, greaterThan(10));
+    expect(gap, lessThan(26));
+    expect(
+      find.byKey(const Key('recommend-category-grid-ranking')),
+      findsNothing,
+    );
+  });
+}
+
+void _noop() {}
+
+Drama _drama(String id) => Drama(
+  id: id,
+  title: 'Rank $id',
+  synopsis: '',
+  posterUrl: '',
+  viewCount: int.parse(id) * 10,
+);