feat(recommend): 新增分区流全部短剧与剧单

2026-10-22 17:23:22 +08:00
1 parent 0ef2438100
commit f1b5418954
@@ -18,7 +18,7 @@ class HomeFeedController extends ChangeNotifier {
           channel: _ChannelFeedState(),
       };

-  static const int pageSize = 10;
+  static const int pageSize = 20;
  static const Duration defaultRequestTimeout = Duration(seconds: 10);

  final CatalogRepository _repository;
@@ -714,5 +714,21 @@
  "homeBadgeNew": "New",
  "homeBadgeAnime": "Anime",
  "homeGridFilterEmpty": "No dramas match these filters",
-  "homeGridClearFilter": "Clear filters"
+  "homeGridClearFilter": "Clear filters",
+  "recommendTopTab": "Recommend",
+  "playlistTopTab": "Playlists",
+  "allDramasTopTab": "All Dramas",
+  "weeklyHitsTitle": "This Week's Hits",
+  "weeklyHitsSubtitle": "Binge the hottest stories of the week!",
+  "weeklyNewTitle": "New This Week",
+  "weeklyNewSubtitle": "Fresh releases to start your next binge",
+  "costumeAwardsTitle": "Costume Drama Awards",
+  "costumeAwardsSubtitle": "Top-rated picks every costume fan needs",
+  "localFilter": "Local",
+  "asiaFilter": "Asia",
+  "westernFilter": "Western",
+  "subtitlesOnlyFilter": "Subtitles",
+  "dubbedFilter": "Dubbed",
+  "reversalFilter": "Comeback",
+  "modernFilter": "Modern"
 }
@@ -671,5 +671,21 @@
  "homeBadgeNew": "Baru",
  "homeBadgeAnime": "Anime",
  "homeGridFilterEmpty": "Tidak ada drama yang cocok dengan filter",
-  "homeGridClearFilter": "Hapus filter"
+  "homeGridClearFilter": "Hapus filter",
+  "recommendTopTab": "Rekomendasi",
+  "playlistTopTab": "Daftar Putar",
+  "allDramasTopTab": "Semua Drama",
+  "weeklyHitsTitle": "Hits Minggu Ini",
+  "weeklyHitsSubtitle": "Drama terpopuler minggu ini, tonton sekaligus!",
+  "weeklyNewTitle": "Drama Baru Minggu Ini",
+  "weeklyNewSubtitle": "Rilisan baru untuk memulai maraton berikutnya",
+  "costumeAwardsTitle": "Drama Kostum Terbaik",
+  "costumeAwardsSubtitle": "Pilihan terbaik yang wajib ditonton",
+  "localFilter": "Lokal",
+  "asiaFilter": "Asia",
+  "westernFilter": "Barat",
+  "subtitlesOnlyFilter": "Subtitle",
+  "dubbedFilter": "Dubbing",
+  "reversalFilter": "Balas Dendam",
+  "modernFilter": "Modern"
 }
@@ -3099,6 +3099,102 @@ abstract class AppLocalizations {
  /// In en, this message translates to:
  /// **'Clear filters'**
  String get homeGridClearFilter;
+
+  /// No description provided for @recommendTopTab.
+  ///
+  /// In en, this message translates to:
+  /// **'Recommend'**
+  String get recommendTopTab;
+
+  /// No description provided for @playlistTopTab.
+  ///
+  /// In en, this message translates to:
+  /// **'Playlists'**
+  String get playlistTopTab;
+
+  /// No description provided for @allDramasTopTab.
+  ///
+  /// In en, this message translates to:
+  /// **'All Dramas'**
+  String get allDramasTopTab;
+
+  /// No description provided for @weeklyHitsTitle.
+  ///
+  /// In en, this message translates to:
+  /// **'This Week\'s Hits'**
+  String get weeklyHitsTitle;
+
+  /// No description provided for @weeklyHitsSubtitle.
+  ///
+  /// In en, this message translates to:
+  /// **'Binge the hottest stories of the week!'**
+  String get weeklyHitsSubtitle;
+
+  /// No description provided for @weeklyNewTitle.
+  ///
+  /// In en, this message translates to:
+  /// **'New This Week'**
+  String get weeklyNewTitle;
+
+  /// No description provided for @weeklyNewSubtitle.
+  ///
+  /// In en, this message translates to:
+  /// **'Fresh releases to start your next binge'**
+  String get weeklyNewSubtitle;
+
+  /// No description provided for @costumeAwardsTitle.
+  ///
+  /// In en, this message translates to:
+  /// **'Costume Drama Awards'**
+  String get costumeAwardsTitle;
+
+  /// No description provided for @costumeAwardsSubtitle.
+  ///
+  /// In en, this message translates to:
+  /// **'Top-rated picks every costume fan needs'**
+  String get costumeAwardsSubtitle;
+
+  /// No description provided for @localFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Local'**
+  String get localFilter;
+
+  /// No description provided for @asiaFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Asia'**
+  String get asiaFilter;
+
+  /// No description provided for @westernFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Western'**
+  String get westernFilter;
+
+  /// No description provided for @subtitlesOnlyFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Subtitles'**
+  String get subtitlesOnlyFilter;
+
+  /// No description provided for @dubbedFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Dubbed'**
+  String get dubbedFilter;
+
+  /// No description provided for @reversalFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Comeback'**
+  String get reversalFilter;
+
+  /// No description provided for @modernFilter.
+  ///
+  /// In en, this message translates to:
+  /// **'Modern'**
+  String get modernFilter;
 }

 class _AppLocalizationsDelegate
@@ -1616,4 +1616,52 @@ class AppLocalizationsEn extends AppLocalizations {

  @override
  String get homeGridClearFilter => 'Clear filters';
+
+  @override
+  String get recommendTopTab => 'Recommend';
+
+  @override
+  String get playlistTopTab => 'Playlists';
+
+  @override
+  String get allDramasTopTab => 'All Dramas';
+
+  @override
+  String get weeklyHitsTitle => 'This Week\'s Hits';
+
+  @override
+  String get weeklyHitsSubtitle => 'Binge the hottest stories of the week!';
+
+  @override
+  String get weeklyNewTitle => 'New This Week';
+
+  @override
+  String get weeklyNewSubtitle => 'Fresh releases to start your next binge';
+
+  @override
+  String get costumeAwardsTitle => 'Costume Drama Awards';
+
+  @override
+  String get costumeAwardsSubtitle => 'Top-rated picks every costume fan needs';
+
+  @override
+  String get localFilter => 'Local';
+
+  @override
+  String get asiaFilter => 'Asia';
+
+  @override
+  String get westernFilter => 'Western';
+
+  @override
+  String get subtitlesOnlyFilter => 'Subtitles';
+
+  @override
+  String get dubbedFilter => 'Dubbed';
+
+  @override
+  String get reversalFilter => 'Comeback';
+
+  @override
+  String get modernFilter => 'Modern';
 }
@@ -1616,4 +1616,54 @@ class AppLocalizationsId extends AppLocalizations {

  @override
  String get homeGridClearFilter => 'Hapus filter';
+
+  @override
+  String get recommendTopTab => 'Rekomendasi';
+
+  @override
+  String get playlistTopTab => 'Daftar Putar';
+
+  @override
+  String get allDramasTopTab => 'Semua Drama';
+
+  @override
+  String get weeklyHitsTitle => 'Hits Minggu Ini';
+
+  @override
+  String get weeklyHitsSubtitle =>
+      'Drama terpopuler minggu ini, tonton sekaligus!';
+
+  @override
+  String get weeklyNewTitle => 'Drama Baru Minggu Ini';
+
+  @override
+  String get weeklyNewSubtitle =>
+      'Rilisan baru untuk memulai maraton berikutnya';
+
+  @override
+  String get costumeAwardsTitle => 'Drama Kostum Terbaik';
+
+  @override
+  String get costumeAwardsSubtitle => 'Pilihan terbaik yang wajib ditonton';
+
+  @override
+  String get localFilter => 'Lokal';
+
+  @override
+  String get asiaFilter => 'Asia';
+
+  @override
+  String get westernFilter => 'Barat';
+
+  @override
+  String get subtitlesOnlyFilter => 'Subtitle';
+
+  @override
+  String get dubbedFilter => 'Dubbing';
+
+  @override
+  String get reversalFilter => 'Balas Dendam';
+
+  @override
+  String get modernFilter => 'Modern';
 }
@@ -1592,4 +1592,52 @@ class AppLocalizationsZh extends AppLocalizations {

  @override
  String get homeGridClearFilter => '清除筛选';
+
+  @override
+  String get recommendTopTab => '推荐';
+
+  @override
+  String get playlistTopTab => '剧单';
+
+  @override
+  String get allDramasTopTab => '全部短剧';
+
+  @override
+  String get weeklyHitsTitle => '本週爆款推薦';
+
+  @override
+  String get weeklyHitsSubtitle => '本週話題熱劇，一次追完!';
+
+  @override
+  String get weeklyNewTitle => '本週精選新劇';
+
+  @override
+  String get weeklyNewSubtitle => '新劇來襲！追劇節奏啟動';
+
+  @override
+  String get costumeAwardsTitle => '古裝神劇大賞';
+
+  @override
+  String get costumeAwardsSubtitle => '口碑爆棚！古裝控必收片單';
+
+  @override
+  String get localFilter => '本地';
+
+  @override
+  String get asiaFilter => '亚洲';
+
+  @override
+  String get westernFilter => '欧美';
+
+  @override
+  String get subtitlesOnlyFilter => '仅字幕';
+
+  @override
+  String get dubbedFilter => '配音';
+
+  @override
+  String get reversalFilter => '逆袭';
+
+  @override
+  String get modernFilter => '现代';
 }
@@ -633,5 +633,21 @@
  "homeBadgeNew": "新剧",
  "homeBadgeAnime": "漫剧",
  "homeGridFilterEmpty": "没有符合筛选条件的短剧",
-  "homeGridClearFilter": "清除筛选"
+  "homeGridClearFilter": "清除筛选",
+  "recommendTopTab": "推荐",
+  "playlistTopTab": "剧单",
+  "allDramasTopTab": "全部短剧",
+  "weeklyHitsTitle": "本週爆款推薦",
+  "weeklyHitsSubtitle": "本週話題熱劇，一次追完!",
+  "weeklyNewTitle": "本週精選新劇",
+  "weeklyNewSubtitle": "新劇來襲！追劇節奏啟動",
+  "costumeAwardsTitle": "古裝神劇大賞",
+  "costumeAwardsSubtitle": "口碑爆棚！古裝控必收片單",
+  "localFilter": "本地",
+  "asiaFilter": "亚洲",
+  "westernFilter": "欧美",
+  "subtitlesOnlyFilter": "仅字幕",
+  "dubbedFilter": "配音",
+  "reversalFilter": "逆袭",
+  "modernFilter": "现代"
 }
@@ -8,7 +8,6 @@ import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';

 import '../../core/config/app_config.dart';
-import '../../core/data/models/drama.dart';
 import '../../core/data/services/home_feed_controller.dart';
 import '../../core/data/services/catalog_controller.dart';
 import '../../core/data/services/catalog_retry.dart';
@@ -27,13 +26,11 @@ import '../favorites/favorites_page.dart';
 import '../filter/filter_page.dart';
 import '../mine/mine_types.dart';
 import '../new_releases/new_releases_page.dart';
-import '../player/widgets/home_feed_header.dart';
-import '../player/player_view.dart';
 import '../ranking/ranking_page.dart';
+import '../recommend/recommend_page.dart';
 import '../mine/mine_view.dart';
 import '../store/vip_page.dart';
 import '../wallet/wallet_page.dart';
-import 'home_feed_channel.dart';
 import 'home_binding.dart';
 import 'home_logic.dart';
 import 'widgets/home_feed_grid.dart';
@@ -209,15 +206,11 @@ class _HomeTabs extends StatefulWidget {

 class _HomeTabsState extends State<_HomeTabs> {
  late final HomeLogic logic;
-  List<Drama>? _visibleDramas;
-  HomeFeedChannel? _visibleChannel;

  @override
  void initState() {
    super.initState();
    logic = HomeBinding().create(widget.feedController.dramas);
-    _visibleDramas = widget.feedController.dramas;
-    _visibleChannel = widget.feedController.channel;
    widget.feedController.addListener(_onFeedChanged);
  }

@@ -297,132 +290,13 @@ class _HomeTabsState extends State<_HomeTabs> {
  }

  Widget _recommend(BuildContext context) {
-    final currentDramas = widget.feedController.dramas;
-    final currentChannel = widget.feedController.channel;
-    if (currentDramas.isNotEmpty) {
-      _visibleDramas = currentDramas;
-      _visibleChannel = currentChannel;
-    }
-    if (currentDramas.isEmpty && !widget.feedController.loadingFirstPage) {
-      return _feedChannelPlaceholder(context);
-    }
-    final visibleDramas = _visibleDramas;
-    final visibleChannel = _visibleChannel;
-    final switching =
-        currentDramas.isEmpty && widget.feedController.loadingFirstPage;
-    if (visibleDramas == null ||
-        visibleDramas.isEmpty ||
-        visibleChannel == null) {
-      return _feedChannelPlaceholder(context);
-    }
-    final playerDramas = currentDramas.isEmpty ? visibleDramas : currentDramas;
-    final playerChannel = currentDramas.isEmpty
-        ? visibleChannel
-        : currentChannel;
-    return Stack(
-      fit: StackFit.expand,
-      children: [
-        PlayerPage(
-          homeMode: true,
-          embedded: true,
-          active: logic.tab == 1,
-          drama: playerDramas.first,
-          initialIndex: 0,
-          feedDramas: playerDramas,
-          feedChannel: playerChannel,
-          headerChannel: currentChannel,
-          onOpenFullPlayer: (drama, episode) =>
-              logic.playDrama(context, drama, episodeId: episode.id),
-          onRefreshFeed: widget.feedController.refreshCurrent,
-          onLoadMore: widget.feedController.loadMore,
-          onChannelSelected: _selectFeedChannel,
-          onDramaChanged: logic.onDramaChanged,
-          onImmersiveChanged: logic.onImmersiveChanged,
-          onSearch: () => _openSearch(context),
-          onDiscover: () => logic.select(1),
-          onMy: () => logic.select(3),
-        ),
-        if (switching)
-          Positioned.fill(
-            child: IgnorePointer(
-              key: const Key('home-feed-channel-loading'),
-              child: ColoredBox(
-                color: AppColors.controlSoftScrim,
-                child: Center(
-                  child: SizedBox.square(
-                    dimension: 24,
-                    child: CircularProgressIndicator(
-                      strokeWidth: 2.4,
-                      color: AppColors.muted,
-                    ),
-                  ),
-                ),
-              ),
-            ),
-          ),
-      ],
+    return RecommendPage(
+      feedController: widget.feedController,
+      onSearch: () => _openSearch(context),
+      onOpenFilter: () => _pushPage(context, const FilterPage()),
    );
  }

-  Widget _feedChannelPlaceholder(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    return Stack(
-      fit: StackFit.expand,
-      children: [
-        const ColoredBox(color: AppColors.mediaBlack),
-        SafeArea(
-          bottom: false,
-          child: Column(
-            children: [
-              HomeFeedHeader(
-                l10n: l10n,
-                channel: widget.feedController.channel,
-                onChannelSelected: _selectFeedChannel,
-                onRefresh: () => _refreshPlaceholder(context),
-                onSearch: () => _openSearch(context),
-                onMore: () {},
-              ),
-              Expanded(
-                child: widget.feedController.loadingFirstPage
-                    ? const Center(
-                        child: SizedBox.square(
-                          dimension: 24,
-                          child: CircularProgressIndicator(
-                            key: Key('home-feed-channel-loading'),
-                            strokeWidth: 2.4,
-                            color: AppColors.muted,
-                          ),
-                        ),
-                      )
-                    : EmptyState(
-                        icon: Icons.movie_outlined,
-                        title: l10n.noStories,
-                        actionLabel: l10n.retry,
-                        onAction: () =>
-                            unawaited(widget.feedController.refreshCurrent()),
-                      ),
-              ),
-            ],
-          ),
-        ),
-      ],
-    );
-  }
-
-  Future<bool> _refreshPlaceholder(BuildContext context) async {
-    final ok = await widget.feedController.refreshCurrent();
-    if (!ok && context.mounted) {
-      ScaffoldMessenger.of(context).showSnackBar(
-        SnackBar(content: Text(AppLocalizations.of(context)!.catalogError)),
-      );
-    }
-    return ok;
-  }
-
-  void _selectFeedChannel(HomeFeedChannel channel) {
-    unawaited(widget.feedController.selectChannel(channel));
-  }
-
  void _openSearch(BuildContext context) {
    Navigator.of(context).push<void>(
      MaterialPageRoute(builder: (_) => const DiscoverPage(focusSearch: true)),
@@ -34,7 +34,9 @@ const Color _bronzeEnd = AppColors.bronzeDeep;

 /// 剧场榜单页：前三名横排领奖台，第 4 名起纵向列表。
 class RankingPage extends StatefulWidget {
-  const RankingPage({super.key});
+  const RankingPage({super.key, this.embedded = false});
+
+  final bool embedded;

  @override
  State<RankingPage> createState() => _RankingPageState();
@@ -109,63 +111,71 @@ class _RankingPageState extends State<RankingPage> {
    final top = pager.visibleItems;
    final podium = top.take(3).toList();
    final rest = top.skip(3).toList();
+    final content = NotificationListener<ScrollNotification>(
+      onNotification: _onScroll,
+      child: AppPullToRefresh(
+        key: const Key('ranking-refresh'),
+        onRefresh: _refresh,
+        child: ListView(
+          key: const Key('ranking-list'),
+          controller: _scroll,
+          physics: AppPullToRefresh.physics,
+          padding: const EdgeInsets.only(top: 4, bottom: 24),
+          children: top.isEmpty
+              ? [
+                  SizedBox(
+                    height: 420,
+                    child: EmptyState(
+                      icon: Icons.leaderboard_outlined,
+                      title: l10n.noStories,
+                    ),
+                  ),
+                ]
+              : [
+                  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,
+                        ),
+                      ),
+                    ],
+                  ],
+                  PagedLoadFooter(
+                    loading: pager.loading,
+                    hasMore: pager.hasMore,
+                    hasItems: pager.items.isNotEmpty,
+                    loadMoreKey: const Key('ranking-load-more'),
+                    noMoreKey: const Key('ranking-no-more'),
+                    noMoreLabel: l10n.noMore,
+                  ),
+                ],
+        ),
+      ),
+    );
+    if (widget.embedded) {
+      return ColoredBox(
+        key: const Key('ranking-page'),
+        color: AppColors.appBackground,
+        child: SafeArea(bottom: false, child: content),
+      );
+    }
    return PlainPageScaffold(
      pageKey: const Key('ranking-page'),
      backKey: const Key('ranking-back'),
      title: l10n.topCharts,
      subtitle: l10n.rankingSubtitle,
-      child: NotificationListener<ScrollNotification>(
-        onNotification: _onScroll,
-        child: AppPullToRefresh(
-          key: const Key('ranking-refresh'),
-          onRefresh: _refresh,
-          child: ListView(
-            key: const Key('ranking-list'),
-            controller: _scroll,
-            physics: AppPullToRefresh.physics,
-            padding: const EdgeInsets.only(top: 4, bottom: 24),
-            children: top.isEmpty
-                ? [
-                    SizedBox(
-                      height: 420,
-                      child: EmptyState(
-                        icon: Icons.leaderboard_outlined,
-                        title: l10n.noStories,
-                      ),
-                    ),
-                  ]
-                : [
-                    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,
-                          ),
-                        ),
-                      ],
-                    ],
-                    PagedLoadFooter(
-                      loading: pager.loading,
-                      hasMore: pager.hasMore,
-                      hasItems: pager.items.isNotEmpty,
-                      loadMoreKey: const Key('ranking-load-more'),
-                      noMoreKey: const Key('ranking-no-more'),
-                      noMoreLabel: l10n.noMore,
-                    ),
-                  ],
-          ),
-        ),
-      ),
+      child: content,
    );
  }
 }
@@ -0,0 +1,199 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../../core/data/models/drama.dart';
+import '../../core/data/services/catalog_controller.dart';
+import '../../core/data/services/category_controller.dart';
+import '../../core/data/services/download_controller.dart';
+import '../../core/data/services/home_feed_controller.dart';
+import '../../core/data/services/wallet_controller.dart';
+import '../../core/navigation/fade_page_route.dart';
+import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
+import '../../l10n/app_localizations.dart';
+import '../player/player_view.dart';
+import '../ranking/ranking_page.dart';
+import 'widgets/all_dramas_filter_grid.dart';
+import 'widgets/recommend_sections_view.dart';
+
+enum RecommendInnerTab { feed, playlists, allDramas }
+
+class RecommendPage extends StatefulWidget {
+  const RecommendPage({
+    super.key,
+    required this.feedController,
+    required this.onSearch,
+    required this.onOpenFilter,
+  });
+
+  final HomeFeedController feedController;
+  final VoidCallback onSearch;
+  final VoidCallback onOpenFilter;
+
+  @override
+  State<RecommendPage> createState() => _RecommendPageState();
+}
+
+class _RecommendPageState extends State<RecommendPage> {
+  RecommendInnerTab _tab = RecommendInnerTab.feed;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final categories = context.watch<CategoryController>();
+    return ColoredBox(
+      key: const Key('recommend-page'),
+      color: AppColors.appBackground,
+      child: SafeArea(
+        bottom: false,
+        child: Column(
+          children: [
+            _header(l10n),
+            Expanded(
+              child: IndexedStack(
+                index: _tab.index,
+                children: [
+                  RecommendSectionsView(
+                    feedController: widget.feedController,
+                    categories: categories,
+                    onOpenDrama: _openDrama,
+                    onMore: _handleMore,
+                  ),
+                  const RankingPage(embedded: true),
+                  AllDramasFilterGrid(
+                    feedController: widget.feedController,
+                    onOpenDrama: _openDrama,
+                    onOpenFilter: widget.onOpenFilter,
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _header(AppLocalizations l10n) {
+    final items = [
+      (RecommendInnerTab.feed, l10n.recommendTopTab, 'recommend'),
+      (RecommendInnerTab.playlists, l10n.playlistTopTab, 'playlist'),
+      (RecommendInnerTab.allDramas, l10n.allDramasTopTab, 'all'),
+    ];
+    return SizedBox(
+      key: const Key('recommend-top-nav'),
+      height: 56,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: AppDimens.pageHorizontal,
+        ),
+        child: Row(
+          children: [
+            Expanded(
+              child: Row(
+                children: [
+                  for (final item in items)
+                    Expanded(
+                      child: _tabButton(
+                        key: Key('recommend-tab-${item.$3}'),
+                        label: item.$2,
+                        selected: _tab == item.$1,
+                        onTap: () => setState(() => _tab = item.$1),
+                      ),
+                    ),
+                ],
+              ),
+            ),
+            const SizedBox(width: AppDimens.spaceSm),
+            IconButton(
+              key: const Key('recommend-search'),
+              tooltip: l10n.search,
+              onPressed: widget.onSearch,
+              iconSize: 24,
+              color: AppColors.textPrimary,
+              icon: const Icon(Icons.search_rounded),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _tabButton({
+    required Key key,
+    required String label,
+    required bool selected,
+    required VoidCallback onTap,
+  }) {
+    return InkWell(
+      key: key,
+      onTap: onTap,
+      child: Padding(
+        padding: const EdgeInsets.only(right: AppDimens.spaceSm),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              label,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: TextStyle(
+                color: selected
+                    ? AppColors.textPrimary
+                    : AppColors.textSecondary,
+                fontSize: AppDimens.listTitle,
+                fontWeight: selected ? FontWeight.w700 : FontWeight.w500,
+              ),
+            ),
+            const SizedBox(height: 3),
+            Container(
+              width: selected ? 20 : 0,
+              height: 2,
+              decoration: BoxDecoration(
+                color: AppColors.textPrimary,
+                borderRadius: BorderRadius.circular(AppDimens.pillRadius),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  void _handleMore(RecommendSectionKind section) {
+    setState(() {
+      _tab = section == RecommendSectionKind.hits
+          ? RecommendInnerTab.playlists
+          : RecommendInnerTab.allDramas;
+    });
+  }
+
+  Future<void> _openDrama(Drama drama) async {
+    final catalog = context.read<CatalogController>();
+    final wallet = context.read<WalletController>();
+    final downloads = context.read<DownloadController>();
+    var playable = drama;
+    try {
+      playable = await catalog.requireDetail(drama);
+    } catch (_) {
+      // 卡片预览仍可直接进入播放器。
+    }
+    if (!mounted) return;
+    await Navigator.of(context).push<void>(
+      FadePageRoute(
+        builder: (_) => PlayerPage(
+          drama: playable,
+          initialIndex: 0,
+          homeMode: true,
+          feedDramas: [playable],
+          wallet: wallet,
+          downloads: downloads,
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,292 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/drama.dart';
+import '../../../core/data/services/home_feed_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 '../../home/widgets/home_drama_classification.dart';
+import '../../home/widgets/home_feed_card.dart';
+
+const double _loadMoreThreshold = 240;
+const List<String> _modernTerms = ['现代', 'modern', 'moderno'];
+const List<String> _reversalTerms = ['逆袭', 'comeback', 'balas'];
+
+class AllDramasFilterGrid extends StatefulWidget {
+  const AllDramasFilterGrid({
+    super.key,
+    required this.feedController,
+    required this.onOpenDrama,
+    required this.onOpenFilter,
+  });
+
+  final HomeFeedController feedController;
+  final ValueChanged<Drama> onOpenDrama;
+  final VoidCallback onOpenFilter;
+
+  @override
+  State<AllDramasFilterGrid> createState() => _AllDramasFilterGridState();
+}
+
+class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
+  String? _genre;
+  bool _newest = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final dramas = _filtered();
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final itemWidth =
+            (constraints.maxWidth -
+                AppDimens.pageHorizontal * 2 -
+                AppDimens.homeGridGap * 2) /
+            3;
+        final itemExtent = itemWidth * 6 / 5 + AppDimens.homeCardBodyExtent;
+        return NotificationListener<ScrollNotification>(
+          onNotification: _onScroll,
+          child: AppPullToRefresh(
+            key: const Key('all-dramas-refresh'),
+            onRefresh: () async {
+              await widget.feedController.refreshCurrent();
+            },
+            child: CustomScrollView(
+              key: const Key('all-dramas-scroll'),
+              physics: AppPullToRefresh.physics,
+              slivers: [
+                SliverToBoxAdapter(child: _filters(l10n)),
+                if (dramas.isEmpty)
+                  SliverFillRemaining(
+                    hasScrollBody: false,
+                    child: EmptyState(
+                      key: const Key('all-dramas-empty'),
+                      icon: Icons.movie_filter_outlined,
+                      title: l10n.homeGridFilterEmpty,
+                      actionLabel: l10n.homeGridClearFilter,
+                      onAction: () => setState(() => _genre = null),
+                    ),
+                  )
+                else
+                  SliverPadding(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: AppDimens.pageHorizontal,
+                    ),
+                    sliver: SliverGrid(
+                      key: const Key('all-dramas-grid'),
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                        crossAxisCount: 3,
+                        crossAxisSpacing: AppDimens.homeGridGap,
+                        mainAxisSpacing: AppDimens.homeGridGap,
+                        mainAxisExtent: itemExtent,
+                      ),
+                      delegate: SliverChildBuilderDelegate(
+                        (context, index) => HomeFeedCard(
+                          drama: dramas[index],
+                          onTap: () => widget.onOpenDrama(dramas[index]),
+                        ),
+                        childCount: dramas.length,
+                      ),
+                    ),
+                  ),
+                SliverToBoxAdapter(
+                  child: Padding(
+                    padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
+                    child: PagedListFooter(
+                      loading: widget.feedController.loadingMore,
+                      hasMore: widget.feedController.hasMore,
+                      hasItems: dramas.isNotEmpty,
+                      errorMessage: widget.feedController.lastError == null
+                          ? null
+                          : l10n.catalogError,
+                      onRetry: widget.feedController.loadMore,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _filters(AppLocalizations l10n) {
+    final genres = _availableGenres(l10n);
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(
+        AppDimens.pageHorizontal,
+        AppDimens.spaceSm,
+        AppDimens.pageHorizontal,
+        AppDimens.spaceMd,
+      ),
+      child: Column(
+        key: const Key('all-dramas-filters'),
+        children: [
+          _chipRow(0, [l10n.all]),
+          _chipRow(1, [l10n.all]),
+          _chipRow(2, [
+            (id: null, label: l10n.all),
+            for (final genre in genres) (id: genre.id, label: genre.label),
+          ]),
+          Row(
+            key: const Key('all-filter-row-3'),
+            children: [
+              Expanded(
+                child: Row(
+                  children: [
+                    _chip(
+                      key: const Key('all-sort-hot'),
+                      label: l10n.hot,
+                      selected: !_newest,
+                      onTap: () => setState(() => _newest = false),
+                    ),
+                    const SizedBox(width: AppDimens.spaceSm),
+                    _chip(
+                      key: const Key('all-sort-new'),
+                      label: l10n.newest,
+                      selected: _newest,
+                      onTap: () => setState(() => _newest = true),
+                    ),
+                  ],
+                ),
+              ),
+              IconButton(
+                key: const Key('all-dramas-filter-page'),
+                tooltip: l10n.filter,
+                onPressed: widget.onOpenFilter,
+                color: AppColors.textPrimary,
+                iconSize: AppDimens.tapTarget / 2,
+                icon: const Icon(Icons.filter_list_rounded),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _chipRow(int row, List<Object> options) {
+    return Padding(
+      key: Key('all-filter-row-$row'),
+      padding: const EdgeInsets.only(bottom: AppDimens.spaceSm),
+      child: SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        child: Row(
+          children: [
+            for (final option in options) ...[
+              if (option is String)
+                _chip(label: option, selected: true, onTap: () {}),
+              if (option is ({String? id, String label}))
+                _chip(
+                  label: option.label,
+                  selected: _genre == option.id,
+                  onTap: () => setState(() => _genre = option.id),
+                ),
+              const SizedBox(width: AppDimens.spaceSm),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _chip({
+    Key? key,
+    required String label,
+    required bool selected,
+    required VoidCallback onTap,
+  }) {
+    return InkWell(
+      key: key,
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(AppDimens.pillRadius),
+      child: Container(
+        height: 32,
+        padding: const EdgeInsets.symmetric(horizontal: AppDimens.spaceMd),
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+          color: selected ? AppColors.contentChip : AppColors.contentSurface,
+          borderRadius: BorderRadius.circular(AppDimens.pillRadius),
+        ),
+        child: Text(
+          label,
+          style: TextStyle(
+            color: selected ? AppColors.textPrimary : AppColors.textSecondary,
+            fontSize: AppDimens.caption,
+            fontWeight: selected ? FontWeight.w700 : FontWeight.w500,
+          ),
+        ),
+      ),
+    );
+  }
+
+  List<({String id, String label})> _availableGenres(AppLocalizations l10n) {
+    final source = widget.feedController.dramas;
+    final definitions = [
+      (id: 'reversal', label: l10n.reversalFilter, terms: _reversalTerms),
+      (id: 'uplifting', label: l10n.homeTagUplifting, terms: <String>[]),
+      (id: 'modern', label: l10n.modernFilter, terms: _modernTerms),
+      (id: 'sweet', label: l10n.homeTagSweet, terms: <String>[]),
+      (id: 'angst', label: l10n.homeTagAngst, terms: <String>[]),
+    ];
+    return definitions
+        .where(
+          (definition) => source.any(
+            (drama) => _matchesGenre(drama, definition.id, definition.terms),
+          ),
+        )
+        .map((definition) => (id: definition.id, label: definition.label))
+        .toList(growable: false);
+  }
+
+  List<Drama> _filtered() {
+    final dramas = widget.feedController.dramas
+        .where((drama) {
+          return _genre == null || _matchesGenre(drama, _genre!, const []);
+        })
+        .toList(growable: false);
+    if (_newest) {
+      return [...dramas]..sort((a, b) {
+        final left = publishedAtForDrama(a);
+        final right = publishedAtForDrama(b);
+        if (left == null && right == null) return b.id.compareTo(a.id);
+        if (left == null) return 1;
+        if (right == null) return -1;
+        return right.compareTo(left);
+      });
+    }
+    return [...dramas]..sort((a, b) => b.viewCount.compareTo(a.viewCount));
+  }
+
+  bool _matchesGenre(Drama drama, String id, List<String> terms) {
+    if (id == 'reversal' ||
+        id == 'uplifting' ||
+        id == 'sweet' ||
+        id == 'angst') {
+      return matchesHomeTag(drama, id == 'reversal' ? 'uplifting' : id);
+    }
+    final text = '${drama.genre} ${drama.category}'.toLowerCase();
+    return terms.any(text.contains);
+  }
+
+  bool _onScroll(ScrollNotification notification) {
+    if (notification.depth != 0) return false;
+    final reachedBottom =
+        notification.metrics.extentAfter <= _loadMoreThreshold;
+    if (reachedBottom &&
+        (notification is ScrollUpdateNotification ||
+            notification is ScrollEndNotification ||
+            notification is OverscrollNotification)) {
+      unawaited(widget.feedController.loadMore());
+    }
+    return false;
+  }
+}
@@ -0,0 +1,116 @@
+// 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';
+import '../../home/widgets/home_drama_classification.dart';
+
+class RecommendSectionCard extends StatelessWidget {
+  const RecommendSectionCard({
+    super.key,
+    required this.sectionKey,
+    required this.drama,
+    required this.onTap,
+  });
+
+  final String sectionKey;
+  final Drama drama;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return SizedBox(
+      width: 122,
+      child: InkWell(
+        key: Key('recommend-card-$sectionKey-${drama.id}'),
+        borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
+        onTap: onTap,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            ClipRRect(
+              borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
+              child: AspectRatio(
+                aspectRatio: 3 / 4,
+                child: Stack(
+                  fit: StackFit.expand,
+                  children: [
+                    RemoteImage(
+                      drama.posterUrl,
+                      fit: BoxFit.cover,
+                      showFallbackIcon: true,
+                      fallbackColor: AppColors.contentSurface,
+                    ),
+                    if (isHotDrama(drama))
+                      Positioned(
+                        top: AppDimens.spaceXs,
+                        left: AppDimens.spaceXs,
+                        child: Container(
+                          key: Key('recommend-hot-$sectionKey-${drama.id}'),
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 6,
+                            vertical: 2,
+                          ),
+                          decoration: BoxDecoration(
+                            color: AppColors.badgeHot,
+                            borderRadius: BorderRadius.circular(
+                              AppDimens.chipRadius,
+                            ),
+                          ),
+                          child: Text(
+                            l10n.homeBadgeHot,
+                            style: const TextStyle(
+                              color: AppColors.textPrimary,
+                              fontSize: AppDimens.homeCardBadge,
+                              fontWeight: FontWeight.w700,
+                            ),
+                          ),
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+            ),
+            const SizedBox(height: AppDimens.spaceXs),
+            Row(
+              children: [
+                const Icon(
+                  Icons.play_arrow_rounded,
+                  color: AppColors.textSecondary,
+                  size: AppDimens.homeCardMeta,
+                ),
+                Text(
+                  formatInteractionCount(drama.viewCount),
+                  style: const TextStyle(
+                    color: AppColors.textSecondary,
+                    fontSize: AppDimens.homeCardMeta,
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 2),
+            Text(
+              drama.title,
+              key: Key('recommend-title-$sectionKey-${drama.id}'),
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(
+                color: AppColors.textPrimary,
+                fontSize: AppDimens.homeCardTitle,
+                fontWeight: FontWeight.w600,
+                height: 1.25,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,209 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/data/models/content_category.dart';
+import '../../../core/data/models/drama.dart';
+import '../../../core/data/services/category_controller.dart';
+import '../../../core/data/services/home_feed_controller.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/app_pull_to_refresh.dart';
+import '../../../l10n/app_localizations.dart';
+import '../../home/widgets/home_drama_classification.dart';
+import 'recommend_section_card.dart';
+
+const List<String> _costumeNames = ['古装', 'costume', 'kostum'];
+
+enum RecommendSectionKind { hits, newReleases, costume }
+
+class RecommendSectionsView extends StatelessWidget {
+  const RecommendSectionsView({
+    super.key,
+    required this.feedController,
+    required this.categories,
+    required this.onOpenDrama,
+    required this.onMore,
+  });
+
+  final HomeFeedController feedController;
+  final CategoryController categories;
+  final ValueChanged<Drama> onOpenDrama;
+  final ValueChanged<RecommendSectionKind> onMore;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final source = feedController.dramas;
+    final hits = [...source]
+      ..sort((a, b) => b.viewCount.compareTo(a.viewCount));
+    final newest = [...source]
+      ..sort((a, b) {
+        final left = publishedAtForDrama(a);
+        final right = publishedAtForDrama(b);
+        if (left == null && right == null) return b.id.compareTo(a.id);
+        if (left == null) return 1;
+        if (right == null) return -1;
+        return right.compareTo(left);
+      });
+    return AppPullToRefresh(
+      key: const Key('recommend-sections-refresh'),
+      onRefresh: () async {
+        await Future.wait([feedController.refreshCurrent(), categories.load()]);
+      },
+      child: ListView(
+        key: const Key('recommend-sections-scroll'),
+        physics: AppPullToRefresh.physics,
+        padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
+        children: [
+          _section(
+            context,
+            l10n,
+            key: 'hits',
+            title: l10n.weeklyHitsTitle,
+            subtitle: l10n.weeklyHitsSubtitle,
+            dramas: hits.take(10).toList(),
+            onMore: () => onMore(RecommendSectionKind.hits),
+          ),
+          const SizedBox(height: AppDimens.spaceXl),
+          _section(
+            context,
+            l10n,
+            key: 'new',
+            title: l10n.weeklyNewTitle,
+            subtitle: l10n.weeklyNewSubtitle,
+            dramas: newest.take(10).toList(),
+            onMore: () => onMore(RecommendSectionKind.newReleases),
+          ),
+          const SizedBox(height: AppDimens.spaceXl),
+          _section(
+            context,
+            l10n,
+            key: 'costume',
+            title: l10n.costumeAwardsTitle,
+            subtitle: l10n.costumeAwardsSubtitle,
+            dramas: _costumeDramas(source),
+            onMore: () => onMore(RecommendSectionKind.costume),
+          ),
+        ],
+      ),
+    );
+  }
+
+  List<Drama> _costumeDramas(List<Drama> source) {
+    final category = _costumeCategory();
+    if (category != null) {
+      final fromCategory = categories.dramasOf(category.id);
+      if (fromCategory.isNotEmpty) return fromCategory.take(10).toList();
+    }
+    return source
+        .where(
+          (drama) =>
+              _containsCostume(drama.category) || _containsCostume(drama.genre),
+        )
+        .take(10)
+        .toList();
+  }
+
+  ContentCategory? _costumeCategory() {
+    for (final category in categories.categories) {
+      if (_containsCostume(category.name)) return category;
+    }
+    return null;
+  }
+
+  bool _containsCostume(String value) {
+    final normalized = value.toLowerCase();
+    return _costumeNames.any(normalized.contains);
+  }
+
+  Widget _section(
+    BuildContext context,
+    AppLocalizations l10n, {
+    required String key,
+    required String title,
+    required String subtitle,
+    required List<Drama> dramas,
+    required VoidCallback onMore,
+  }) {
+    return Column(
+      key: Key('recommend-section-$key'),
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: AppDimens.pageHorizontal,
+          ),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      title,
+                      style: const TextStyle(
+                        color: AppColors.textPrimary,
+                        fontSize: AppDimens.sectionTitle,
+                        fontWeight: FontWeight.w700,
+                      ),
+                    ),
+                    const SizedBox(height: 2),
+                    Text(
+                      subtitle,
+                      style: const TextStyle(
+                        color: AppColors.textSecondary,
+                        fontSize: AppDimens.cardViews,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              TextButton(
+                key: Key('recommend-more-$key'),
+                onPressed: onMore,
+                style: TextButton.styleFrom(
+                  foregroundColor: AppColors.textSecondary,
+                  padding: const EdgeInsets.symmetric(horizontal: 4),
+                  minimumSize: const Size(0, 30),
+                ),
+                child: Row(
+                  children: [
+                    Text(
+                      l10n.more,
+                      style: const TextStyle(
+                        fontSize: AppDimens.caption,
+                        fontWeight: FontWeight.w500,
+                      ),
+                    ),
+                    const Icon(Icons.chevron_right_rounded, size: 16),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(height: AppDimens.spaceMd),
+        SizedBox(
+          height: 218,
+          child: ListView.separated(
+            key: Key('recommend-row-$key'),
+            scrollDirection: Axis.horizontal,
+            padding: const EdgeInsets.symmetric(
+              horizontal: AppDimens.pageHorizontal,
+            ),
+            itemCount: dramas.length,
+            separatorBuilder: (_, _) =>
+                const SizedBox(width: AppDimens.spaceMd),
+            itemBuilder: (context, index) => RecommendSectionCard(
+              sectionKey: key,
+              drama: dramas[index],
+              onTap: () => onOpenDrama(dramas[index]),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}