feat(app): 客户端展示多语言并支持筛选分页

2026-10-24 17:20:24 +08:00
1 parent 8481611372
commit 8b50b5bd06
@@ -6,8 +6,11 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';

 import '../../core/data/models/drama.dart';
+import '../../core/data/remote/catalog_api.dart';
+import '../../core/data/models/playlist_detail.dart';
 import '../../core/data/services/category_controller.dart';
 import '../../core/data/services/home_feed_controller.dart';
+import '../../core/data/services/playlist_controller.dart';
 import '../../core/theme/app_colors.dart';
 import '../../core/widgets/empty_state.dart';
 import '../../l10n/app_localizations.dart';
@@ -23,6 +26,7 @@ class RecommendPage extends StatefulWidget {
  const RecommendPage({
    super.key,
    required this.feedController,
+    this.catalogApi,
    required this.active,
    required this.onSearch,
    this.videoOnly = false,
@@ -30,6 +34,7 @@ class RecommendPage extends StatefulWidget {
  });

  final HomeFeedController feedController;
+  final CatalogApi? catalogApi;
  final bool active;
  final VoidCallback onSearch;

@@ -46,6 +51,32 @@ class _RecommendPageState extends State<RecommendPage> {
  final PageController _pageController = PageController();
  int _scrubCancelRequest = 0;

+  @override
+  void initState() {
+    super.initState();
+    if (widget.active) _scheduleRecommendData();
+  }
+
+  @override
+  void didUpdateWidget(RecommendPage oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.active && !oldWidget.active) _scheduleRecommendData();
+  }
+
+  void _scheduleRecommendData() {
+    final feed = widget.feedController;
+    if (!feed.loaded && !feed.loadingFirstPage) {
+      unawaited(feed.refreshCurrent());
+    }
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted || !widget.active) return;
+      final playlists = _readPlaylists();
+      if (playlists != null && !playlists.loaded && !playlists.loading) {
+        unawaited(playlists.load());
+      }
+    });
+  }
+
  @override
  void dispose() {
    _pageController.dispose();
@@ -82,6 +113,7 @@ class _RecommendPageState extends State<RecommendPage> {
                    child: _withTopNavSpace(
                      AllDramasFilterGrid(
                        feedController: widget.feedController,
+                        catalogApi: widget.catalogApi,
                        onOpenDrama: _openDrama,
                      ),
                    ),
@@ -168,6 +200,22 @@ class _RecommendPageState extends State<RecommendPage> {
    );
  }

+  PlaylistController? _watchPlaylists(BuildContext context) {
+    try {
+      return context.watch<PlaylistController>();
+    } on ProviderNotFoundException {
+      return null;
+    }
+  }
+
+  PlaylistController? _readPlaylists() {
+    try {
+      return context.read<PlaylistController>();
+    } on ProviderNotFoundException {
+      return null;
+    }
+  }
+
  Widget _recommendPlaylists(CategoryController categories) {
    return DecoratedBox(
      key: const Key('recommend-playlist-surface'),
@@ -205,6 +253,8 @@ class _RecommendPageState extends State<RecommendPage> {
              categories: categories,
              onOpenDrama: _openDrama,
              onMore: _handleMore,
+              playlists: _watchPlaylists(context),
+              onOpenPlaylist: _openPlaylist,
            ),
          ),
        ],
@@ -252,6 +302,36 @@ class _RecommendPageState extends State<RecommendPage> {
    );
  }

+  Future<void> _openPlaylist(PlaylistDetail playlist) async {
+    final controller = _readPlaylists();
+    const pageSize = CatalogApi.playlistDramaPageSize;
+    final fresh = controller == null
+        ? playlist
+        : await controller.detail(playlist.id, pageSize: pageSize);
+    if (!mounted) return;
+    final shown = fresh.dramas.isEmpty && playlist.dramas.isNotEmpty
+        ? playlist
+        : fresh;
+    await Navigator.of(context).push<void>(
+      MaterialPageRoute<void>(
+        builder: (_) => PlaylistDetailPage(
+          title: shown.name,
+          subtitle: shown.description,
+          source: shown,
+          dramas: shown.dramas,
+          dramaCount: shown.dramaCount,
+          loadPage: controller == null
+              ? null
+              : (pageIndex) => controller.detail(
+                  playlist.id,
+                  pageIndex: pageIndex,
+                  pageSize: pageSize,
+                ),
+        ),
+      ),
+    );
+  }
+
  void _handleMore(RecommendSectionKind section) {
    final l10n = AppLocalizations.of(context)!;
    final copy = _sectionCopy(l10n, section);
@@ -1,10 +1,14 @@
 // Author: fruit.com.cn
+// 全部短剧：分类、类型、标签多选，列表下拉刷新、上拉加载。

 import 'dart:async';

 import 'package:flutter/material.dart';

+import '../../../core/data/models/content_category.dart';
 import '../../../core/data/models/drama.dart';
+import '../../../core/data/remote/catalog_api.dart';
+import '../../../core/data/services/all_dramas_controller.dart';
 import '../../../core/data/services/home_feed_controller.dart';
 import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_dimens.dart';
@@ -12,21 +16,24 @@ 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'];
+const int _gridColumns = 3;

+/// 推荐页「全部短剧」筛选和三列列表。
 class AllDramasFilterGrid extends StatefulWidget {
  const AllDramasFilterGrid({
    super.key,
-    required this.feedController,
    required this.onOpenDrama,
+    this.feedController,
+    this.catalogApi,
+    this.controller,
  });

-  final HomeFeedController feedController;
+  final HomeFeedController? feedController;
+  final CatalogApi? catalogApi;
+  final AllDramasController? controller;
  final ValueChanged<Drama> onOpenDrama;

  @override
@@ -34,102 +41,143 @@ class AllDramasFilterGrid extends StatefulWidget {
 }

 class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
-  String _region = 'all';
-  String _audio = 'all';
-  String? _genre;
-  bool _newest = false;
+  late final AllDramasController _library;
+
+  @override
+  void initState() {
+    super.initState();
+    _library = widget.controller ??
+        AllDramasController(
+          api: widget.catalogApi == null
+              ? null
+              : CatalogAllDramasRemote(widget.catalogApi!),
+        );
+    if (_library.usesRemote) {
+      unawaited(_reload());
+    }
+  }
+
+  Future<void> _reload() async {
+    await _library.refresh();
+    if (mounted) setState(() {});
+  }
+
+  Future<void> _loadMore() async {
+    if (_library.usesRemote) {
+      await _library.loadMore();
+      if (mounted) setState(() {});
+      return;
+    }
+    await widget.feedController?.loadMore();
+  }
+
+  List<Drama> get _dramas =>
+      _library.usesRemote ? _library.dramas : widget.feedController?.dramas ?? _library.dramas;

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
-    final dramas = _filtered();
    return LayoutBuilder(
      builder: (context, constraints) {
-        final itemWidth =
-            (constraints.maxWidth -
-                AppDimens.allDramasHorizontal * 2 -
-                AppDimens.allDramasGridGap * 2) /
-            3;
-        final itemExtent =
-            itemWidth / AppDimens.cardCoverAspectRatio +
-            AppDimens.homeCardBodyExtent;
        return Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            _filters(l10n),
-            Expanded(
-              child: 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: [
-                      if (dramas.isEmpty)
-                        SliverFillRemaining(
-                          hasScrollBody: false,
-                          child: EmptyState(
-                            key: const Key('all-dramas-empty'),
-                            icon: Icons.movie_filter_outlined,
-                            title: l10n.emptyContent,
-                          ),
-                        )
-                      else
-                        SliverPadding(
-                          padding: const EdgeInsets.symmetric(
-                            horizontal: AppDimens.allDramasHorizontal,
-                          ),
-                          sliver: SliverGrid(
-                            key: const Key('all-dramas-grid'),
-                            gridDelegate:
-                                SliverGridDelegateWithFixedCrossAxisCount(
-                                  crossAxisCount: 3,
-                                  crossAxisSpacing: AppDimens.allDramasGridGap,
-                                  mainAxisSpacing:
-                                      AppDimens.allDramasGridRowGap,
-                                  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,
-                            errorMessage:
-                                widget.feedController.lastError == null
-                                ? null
-                                : l10n.catalogError,
-                            onRetry: widget.feedController.loadMore,
-                          ),
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-              ),
-            ),
+            Expanded(child: _dramaList(l10n, _itemExtent(constraints.maxWidth))),
          ],
        );
      },
    );
  }

+  double _itemExtent(double width) {
+    final itemWidth =
+        (width - AppDimens.allDramasHorizontal * 2 - AppDimens.allDramasGridGap * 2) /
+        _gridColumns;
+    return itemWidth / AppDimens.cardCoverAspectRatio + AppDimens.homeCardBodyExtent;
+  }
+
+  Widget _dramaList(AppLocalizations l10n, double itemExtent) {
+    final dramas = _dramas;
+    return NotificationListener<ScrollNotification>(
+      onNotification: _onScroll,
+      child: AppPullToRefresh(
+        key: const Key('all-dramas-refresh'),
+        onRefresh: _refresh,
+        child: CustomScrollView(
+          key: const Key('all-dramas-scroll'),
+          physics: AppPullToRefresh.physics,
+          slivers: [
+            if (dramas.isEmpty) _empty(l10n) else _grid(dramas, itemExtent),
+            _footer(l10n, dramas.isNotEmpty),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Future<void> _refresh() async {
+    if (_library.usesRemote) {
+      await _reload();
+      return;
+    }
+    await widget.feedController?.refreshCurrent();
+  }
+
+  Widget _empty(AppLocalizations l10n) {
+    return SliverFillRemaining(
+      hasScrollBody: false,
+      child: EmptyState(
+        key: const Key('all-dramas-empty'),
+        icon: Icons.movie_filter_outlined,
+        title: l10n.emptyContent,
+      ),
+    );
+  }
+
+  Widget _grid(List<Drama> dramas, double itemExtent) {
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: AppDimens.allDramasHorizontal),
+      sliver: SliverGrid(
+        key: const Key('all-dramas-grid'),
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: _gridColumns,
+          crossAxisSpacing: AppDimens.allDramasGridGap,
+          mainAxisSpacing: AppDimens.allDramasGridRowGap,
+          mainAxisExtent: itemExtent,
+        ),
+        delegate: SliverChildBuilderDelegate(
+          (context, index) => HomeFeedCard(
+            drama: dramas[index],
+            onTap: () => widget.onOpenDrama(dramas[index]),
+          ),
+          childCount: dramas.length,
+        ),
+      ),
+    );
+  }
+
+  Widget _footer(AppLocalizations l10n, bool hasItems) {
+    return SliverToBoxAdapter(
+      child: Padding(
+        padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
+        child: PagedListFooter(
+          loading: _library.usesRemote
+              ? _library.loadingMore
+              : widget.feedController?.loadingMore ?? false,
+          hasMore: _library.usesRemote
+              ? _library.hasMore
+              : widget.feedController?.hasMore ?? false,
+          hasItems: hasItems,
+          errorMessage: _library.error == null ? null : l10n.catalogError,
+          onRetry: _loadMore,
+        ),
+      ),
+    );
+  }
+
  Widget _filters(AppLocalizations l10n) {
-    final genres = _availableGenres(l10n);
+    final languageCode = Localizations.localeOf(context).languageCode;
    return Padding(
      padding: const EdgeInsets.fromLTRB(
        AppDimens.allDramasHorizontal,
@@ -140,60 +188,75 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
      child: Column(
        key: const Key('all-dramas-filters'),
        children: [
-          _selectableRow(
-            0,
-            [
-              (id: 'all', label: l10n.all),
-              (id: 'local', label: l10n.localFilter),
-              (id: 'asia', label: l10n.asiaFilter),
-              (id: 'western', label: l10n.westernFilter),
-            ],
-            selected: _region,
-            onSelected: (value) => setState(() => _region = value),
+          _optionRow(
+            _FilterRow(
+              row: 0,
+              group: 'classification',
+              options: _library.classifications,
+              selected: _library.selectedClassifications,
+              onToggle: _library.toggleClassification,
+            ),
+            languageCode,
+            l10n,
          ),
-          _selectableRow(
-            1,
-            [
-              (id: 'all', label: l10n.all),
-              (id: 'subtitles', label: l10n.subtitlesOnlyFilter),
-              (id: 'dubbed', label: l10n.dubbedFilter),
-            ],
-            selected: _audio,
-            onSelected: (value) => setState(() => _audio = value),
+          _optionRow(
+            _FilterRow(
+              row: 1,
+              group: 'category',
+              options: _library.categories,
+              selected: _library.selectedCategories,
+              onToggle: _library.toggleCategory,
+            ),
+            languageCode,
+            l10n,
+          ),
+          _optionRow(
+            _FilterRow(
+              row: 2,
+              group: 'tag',
+              options: _library.tags,
+              selected: _library.selectedTags,
+              onToggle: _library.toggleTag,
+            ),
+            languageCode,
+            l10n,
          ),
-          _genreRow(2, genres, l10n),
-          _sortRow(l10n),
        ],
      ),
    );
  }

-  Widget _selectableRow(
-    int row,
-    List<({String id, String label})> options, {
-    required String selected,
-    required ValueChanged<String> onSelected,
-  }) {
+  Widget _optionRow(_FilterRow spec, String languageCode, AppLocalizations l10n) {
    return _filterRow(
-      row: row,
+      row: spec.row,
      child: _horizontalChipScroll(
-        scrollKey: Key('all-filter-scroll-$row'),
+        scrollKey: Key('all-filter-scroll-${spec.row}'),
        chips: [
-          for (var index = 0; index < options.length; index++) ...[
+          _chip(
+            key: Key('all-filter-${spec.group}-all'),
+            label: l10n.all,
+            selected: spec.selected.isEmpty,
+            onTap: () => _select(spec.onToggle, ''),
+          ),
+          for (final option in spec.options) ...[
+            const SizedBox(width: AppDimens.filterItemGap),
            _chip(
-              key: Key('all-filter-${options[index].id}'),
-              label: options[index].label,
-              selected: selected == options[index].id,
-              onTap: () => onSelected(options[index].id),
+              key: Key('all-filter-${spec.group}-${option.id}'),
+              label: option.localizedName(languageCode),
+              selected: spec.selected.contains(option.id),
+              onTap: () => _select(spec.onToggle, option.id),
            ),
-            if (index < options.length - 1)
-              const SizedBox(width: AppDimens.filterItemGap),
          ],
        ],
      ),
    );
  }

+  void _select(void Function(String id) onToggle, String id) {
+    setState(() => onToggle(id));
+    if (_library.usesRemote) unawaited(_reload());
+  }
+
  Widget _horizontalChipScroll({
    required Key scrollKey,
    required List<Widget> chips,
@@ -205,43 +268,17 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
        physics: const BouncingScrollPhysics(),
        child: ConstrainedBox(
          constraints: BoxConstraints(minWidth: constraints.maxWidth),
-          child: Row(
-            mainAxisSize: MainAxisSize.min,
-            mainAxisAlignment: MainAxisAlignment.start,
-            crossAxisAlignment: CrossAxisAlignment.center,
-            children: chips,
-          ),
+          child: Row(children: chips),
        ),
      ),
    );
  }

-  Widget _filterRow({
-    required int row,
-    required Widget child,
-    double height = AppDimens.filterChipHeight,
-  }) {
+  Widget _filterRow({required int row, required Widget child}) {
    return Padding(
      key: Key('all-filter-row-$row'),
-      padding: EdgeInsets.only(bottom: row < 3 ? AppDimens.filterRowGap : 0),
-      child: SizedBox(height: height, child: child),
-    );
-  }
-
-  Widget _genreRow(
-    int row,
-    List<({String id, String label})> options,
-    AppLocalizations l10n,
-  ) {
-    return _selectableRow(
-      row,
-      [
-        (id: 'all', label: l10n.all),
-        for (final genre in options) (id: genre.id, label: genre.label),
-      ],
-      selected: _genre ?? 'all',
-      onSelected: (value) =>
-          setState(() => _genre = value == 'all' ? null : value),
+      padding: EdgeInsets.only(bottom: row < 2 ? AppDimens.filterRowGap : 0),
+      child: SizedBox(height: AppDimens.filterChipHeight, child: child),
    );
  }

@@ -262,9 +299,7 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
        ),
        alignment: Alignment.center,
        decoration: BoxDecoration(
-          color: selected
-              ? AppColors.filterChipSelected
-              : AppColors.transparent,
+          color: selected ? AppColors.filterChipSelected : AppColors.transparent,
          borderRadius: BorderRadius.circular(AppDimens.filterChipRadius),
        ),
        child: Text(
@@ -282,84 +317,32 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
    );
  }

-  Widget _sortRow(AppLocalizations l10n) {
-    return _filterRow(
-      row: 3,
-      child: _horizontalChipScroll(
-        scrollKey: const Key('all-filter-scroll-3'),
-        chips: [
-          _chip(
-            key: const Key('all-sort-hot'),
-            label: l10n.hot,
-            selected: !_newest,
-            onTap: () => setState(() => _newest = false),
-          ),
-          const SizedBox(width: AppDimens.filterItemGap),
-          _chip(
-            key: const Key('all-sort-new'),
-            label: l10n.newest,
-            selected: _newest,
-            onTap: () => setState(() => _newest = true),
-          ),
-        ],
-      ),
-    );
-  }
-
-  List<({String id, String label})> _availableGenres(AppLocalizations l10n) {
-    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
-        .map((definition) => (id: definition.id, label: definition.label))
-        .toList(growable: false);
-  }
-
-  List<Drama> _filtered() {
-    if (_region != 'all' || _audio != 'all') return const [];
-    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 (notification.metrics.pixels <= 0) return false;
+    final reachedBottom = notification.metrics.extentAfter <= _loadMoreThreshold;
    if (reachedBottom &&
        (notification is ScrollUpdateNotification ||
            notification is ScrollEndNotification ||
            notification is OverscrollNotification)) {
-      unawaited(widget.feedController.loadMore());
+      unawaited(_loadMore());
    }
    return false;
  }
 }
+
+class _FilterRow {
+  const _FilterRow({
+    required this.row,
+    required this.group,
+    required this.options,
+    required this.selected,
+    required this.onToggle,
+  });
+
+  final int row;
+  final String group;
+  final List<ContentCategory> options;
+  final Set<String> selected;
+  final void Function(String id) onToggle;
+}
@@ -3,15 +3,20 @@
 import 'package:flutter/material.dart';

 import '../../../core/data/models/drama.dart';
+import '../../../core/data/models/playlist_detail.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/paged_list_footer.dart';
 import '../../../core/widgets/remote_image.dart';
+import '../../../l10n/app_localizations.dart';
 import '../../home/widgets/home_feed_card.dart';
 import '../../player/open_player.dart';

 const double _collageHeight = 188;
 const int _collageCoverCount = 5;
+const double _loadMoreThreshold = 200;
 const double _pageHorizontal = 14;
 const double _gridGap = 10;
 const double _sprocketBand = 22;
@@ -19,17 +24,88 @@ const Color _filmBody = Color(0xFF161311);
 const Color _filmHole = Color(0xFFE6D3BE);

 /// 剧单「更多」：顶部拼图、与剧单一致的标题描述，以及两列卡片。
-class PlaylistDetailPage extends StatelessWidget {
+class PlaylistDetailPage extends StatefulWidget {
  const PlaylistDetailPage({
    super.key,
    required this.title,
    required this.subtitle,
    required this.dramas,
+    this.dramaCount = 0,
+    this.source,
+    this.loadPage,
  });

  final String title;
  final String subtitle;
  final List<Drama> dramas;
+  final PlaylistDetail? source;
+  final int dramaCount;
+  final Future<PlaylistDetail> Function(int pageIndex)? loadPage;
+
+  @override
+  State<PlaylistDetailPage> createState() => _PlaylistDetailPageState();
+}
+
+class _PlaylistDetailPageState extends State<PlaylistDetailPage> {
+  late List<Drama> _dramas = widget.dramas;
+  late int _dramaCount = widget.dramaCount;
+  int _pageIndex = 1;
+  bool _loadingMore = false;
+  bool _failed = false;
+
+  bool get _hasMore =>
+      widget.loadPage != null && _dramas.length < _dramaCount;
+
+  Future<void> _refresh() async {
+    final loadPage = widget.loadPage;
+    if (loadPage == null) return;
+    try {
+      final page = await loadPage(1);
+      if (!mounted) return;
+      setState(() {
+        _dramas = page.dramas;
+        _dramaCount = page.dramaCount;
+        _pageIndex = page.pageIndex == 0 ? 1 : page.pageIndex;
+        _failed = false;
+      });
+    } catch (_) {
+      if (!mounted) return;
+      setState(() => _failed = true);
+    }
+  }
+
+  Future<void> _loadMore() async {
+    final loadPage = widget.loadPage;
+    if (loadPage == null || _loadingMore || !_hasMore) return;
+    setState(() => _loadingMore = true);
+    final next = _pageIndex + 1;
+    try {
+      final page = await loadPage(next);
+      if (!mounted) return;
+      setState(() {
+        _dramas = [..._dramas, ...page.dramas];
+        _dramaCount = page.dramaCount;
+        _pageIndex = page.pageIndex == 0 ? next : page.pageIndex;
+        _failed = false;
+      });
+    } catch (_) {
+      if (!mounted) return;
+      setState(() => _failed = true);
+    } finally {
+      if (mounted) setState(() => _loadingMore = false);
+    }
+  }
+
+  bool _onScroll(ScrollNotification notification) {
+    if (!_hasMore || notification.depth != 0) return false;
+    if (notification.metrics.extentAfter > _loadMoreThreshold) return false;
+    if (notification is! ScrollUpdateNotification &&
+        notification is! ScrollEndNotification) {
+      return false;
+    }
+    _loadMore();
+    return false;
+  }

  @override
  Widget build(BuildContext context) {
@@ -52,7 +128,16 @@ class PlaylistDetailPage extends StatelessWidget {
                icon: const Icon(Icons.chevron_left_rounded),
                color: AppColors.textPrimary,
              ),
-              Expanded(child: _body(itemExtent)),
+              Expanded(
+                child: NotificationListener<ScrollNotification>(
+                  onNotification: _onScroll,
+                  child: AppPullToRefresh(
+                    key: const Key('playlist-detail-refresh'),
+                    onRefresh: _refresh,
+                    child: _body(itemExtent),
+                  ),
+                ),
+              ),
            ],
          ),
        ),
@@ -63,6 +148,7 @@ class PlaylistDetailPage extends StatelessWidget {
  Widget _body(double itemExtent) {
    return CustomScrollView(
      key: const Key('playlist-detail-scroll'),
+      physics: AppPullToRefresh.physics,
      slivers: [
        SliverPadding(
          padding: const EdgeInsets.fromLTRB(
@@ -71,7 +157,7 @@ class PlaylistDetailPage extends StatelessWidget {
            _pageHorizontal,
            12,
          ),
-          sliver: SliverToBoxAdapter(child: _PlaylistCollage(dramas: dramas)),
+          sliver: SliverToBoxAdapter(child: _PlaylistCollage(dramas: _dramas)),
        ),
        SliverPadding(
          padding: const EdgeInsets.symmetric(horizontal: _pageHorizontal),
@@ -95,10 +181,22 @@ class PlaylistDetailPage extends StatelessWidget {
            ),
            delegate: SliverChildBuilderDelegate(
              (context, index) => HomeFeedCard(
-                drama: dramas[index],
-                onTap: () => playDramaFromCatalog(context, dramas[index]),
+                drama: _dramas[index],
+                onTap: () => playDramaFromCatalog(context, _dramas[index]),
              ),
-              childCount: dramas.length,
+              childCount: _dramas.length,
+            ),
+          ),
+        ),
+        SliverToBoxAdapter(
+          child: Padding(
+            padding: const EdgeInsets.only(bottom: 24),
+            child: PagedListFooter(
+              loading: _loadingMore,
+              hasMore: _hasMore,
+              hasItems: _dramas.isNotEmpty,
+              errorMessage: _failed ? AppLocalizations.of(context)!.catalogError : null,
+              onRetry: _loadingMore ? _loadMore : (_hasMore ? _loadMore : _refresh),
            ),
          ),
        ),
@@ -106,12 +204,26 @@ class PlaylistDetailPage extends StatelessWidget {
    );
  }

+  String _title(BuildContext context) {
+    final item = widget.source;
+    if (item == null) return widget.title;
+    return item.localizedName(Localizations.localeOf(context).languageCode);
+  }
+
+  String _subtitle(BuildContext context) {
+    final item = widget.source;
+    if (item == null) return widget.subtitle;
+    return item.localizedDescription(
+      Localizations.localeOf(context).languageCode,
+    );
+  }
+
  Widget _heading() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
-          title,
+          _title(context),
          key: const Key('playlist-detail-title'),
          style: const TextStyle(
            color: AppColors.textPrimary,
@@ -121,7 +233,7 @@ class PlaylistDetailPage extends StatelessWidget {
        ),
        const SizedBox(height: 2),
        Text(
-          subtitle,
+          _subtitle(context),
          key: const Key('playlist-detail-subtitle'),
          style: const TextStyle(
            color: AppColors.textSecondary,
@@ -8,8 +8,6 @@ import '../../../core/theme/app_dimens.dart';
 import '../../../core/widgets/cover_play_count.dart';
 import '../../../core/widgets/drama_cover_badge_ribbon.dart';
 import '../../../core/widgets/remote_image.dart';
-import '../../../l10n/app_localizations.dart';
-import '../../home/widgets/home_drama_classification.dart';

 final RegExp _tagSplitter = RegExp(r'[,/、·]');

@@ -27,7 +25,7 @@ class RecommendSectionCard extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
+    final tagLabel = drama.localizedTag(Localizations.localeOf(context).languageCode);
    return SizedBox(
      width: AppDimens.recommendCardWidth,
      child: InkWell(
@@ -52,14 +50,14 @@ class RecommendSectionCard extends StatelessWidget {
                      showFallbackIcon: true,
                      fallbackColor: AppColors.contentSurface,
                    ),
-                    if (isHotDrama(drama))
+                    if (tagLabel.isNotEmpty)
                      Positioned(
                        top: 0,
                        right: 0,
                        child: DramaCoverBadgeRibbon(
-                          label: l10n.homeBadgeHot,
-                          color: AppColors.badgeHot,
-                          keyPrefix: '$sectionKey-${drama.id}-hot',
+                          label: tagLabel,
+                          color: drama.tagRibbonColor(AppColors.badgeHot),
+                          keyPrefix: '$sectionKey-${drama.id}-tag',
                        ),
                      ),
                    const Positioned(
@@ -82,7 +80,7 @@ class RecommendSectionCard extends StatelessWidget {
            ),
            const SizedBox(height: AppDimens.cardCoverTitleGap),
            Text(
-              drama.title,
+              drama.localizedTitle(Localizations.localeOf(context).languageCode),
              key: Key('recommend-title-$sectionKey-${drama.id}'),
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
@@ -94,25 +92,15 @@ class RecommendSectionCard extends StatelessWidget {
              ),
            ),
            const SizedBox(height: AppDimens.cardTitleTagGap),
-            _tags(),
+            _tags(context),
          ],
        ),
      ),
    );
  }

-  List<String> _cardTags() {
-    final seen = <String>{};
-    return [drama.genre, drama.category]
-        .expand((value) => value.split(_tagSplitter))
-        .map((value) => value.trim())
-        .where((value) => value.isNotEmpty && seen.add(value))
-        .take(3)
-        .toList(growable: false);
-  }
-
-  Widget _tags() {
-    final tags = _cardTags();
+  Widget _tags(BuildContext context) {
+    final tags = _cardTags(context);
    if (tags.isEmpty) return const SizedBox.shrink();
    return Text(
      tags.join(' | '),
@@ -126,4 +114,16 @@ class RecommendSectionCard extends StatelessWidget {
      ),
    );
  }
+
+  List<String> _cardTags(BuildContext context) {
+    final localized = drama.localizedTypeLabels(Localizations.localeOf(context).languageCode);
+    if (localized.isNotEmpty) return localized.take(3).toList(growable: false);
+    final seen = <String>{};
+    return [drama.genre, drama.category]
+        .expand((value) => value.split(_tagSplitter))
+        .map((value) => value.trim())
+        .where((value) => value.isNotEmpty && seen.add(value))
+        .take(3)
+        .toList(growable: false);
+  }
 }
@@ -4,17 +4,21 @@ import 'package:flutter/material.dart';

 import '../../../core/data/models/content_category.dart';
 import '../../../core/data/models/drama.dart';
+import '../../../core/data/models/playlist_detail.dart';
 import '../../../core/data/services/category_controller.dart';
 import '../../../core/data/services/home_feed_controller.dart';
+import '../../../core/data/services/playlist_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 '../../../l10n/app_localizations.dart';
 import '../../home/widgets/home_drama_classification.dart';
 import 'recommend_section_card.dart';

 const List<String> _costumeNames = ['古装', 'costume', 'kostum'];
 const int _sectionPreviewCount = 10;
+const double _loadMoreThreshold = 200;

 enum RecommendSectionKind { hits, newReleases, costume }

@@ -25,17 +29,51 @@ class RecommendSectionsView extends StatelessWidget {
    required this.categories,
    required this.onOpenDrama,
    required this.onMore,
+    this.playlists,
+    this.onOpenPlaylist,
  });

  final HomeFeedController feedController;
  final CategoryController categories;
  final ValueChanged<Drama> onOpenDrama;
  final ValueChanged<RecommendSectionKind> onMore;
+  final PlaylistController? playlists;
+  final ValueChanged<PlaylistDetail>? onOpenPlaylist;

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    final source = feedController.dramas;
+    final remote = playlists;
+    return AppPullToRefresh(
+      key: const Key('recommend-sections-refresh'),
+      onRefresh: () async {
+        await Future.wait([
+          feedController.refreshCurrent(),
+          categories.load(),
+          if (remote != null) remote.load(),
+        ]);
+      },
+      child: NotificationListener<ScrollNotification>(
+        onNotification: (notification) =>
+            remote == null ? false : _onPlaylistScroll(notification, remote),
+        child: ListView(
+          key: const Key('recommend-sections-scroll'),
+          physics: AppPullToRefresh.physics,
+          padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
+          children: remote == null
+              ? _localSections(context, l10n, source)
+              : _remoteSections(context, l10n, remote),
+        ),
+      ),
+    );
+  }
+
+  List<Widget> _localSections(
+    BuildContext context,
+    AppLocalizations l10n,
+    List<Drama> source,
+  ) {
    final hits = recommendSectionDramas(
      kind: RecommendSectionKind.hits,
      source: source,
@@ -44,16 +82,7 @@ class RecommendSectionsView extends StatelessWidget {
      kind: RecommendSectionKind.newReleases,
      source: source,
    );
-    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: [
+    return [
          _section(
            context,
            l10n,
@@ -87,9 +116,97 @@ class RecommendSectionsView extends StatelessWidget {
            ).take(_sectionPreviewCount).toList(),
            onMore: () => onMore(RecommendSectionKind.costume),
          ),
-        ],
-      ),
-    );
+    ];
+  }
+
+  List<Widget> _remoteSections(
+    BuildContext context,
+    AppLocalizations l10n,
+    PlaylistController remote,
+  ) {
+    if (!remote.loaded && remote.loading) {
+      return const [
+        SizedBox(
+          height: 240,
+          child: Center(
+            child: CircularProgressIndicator(
+              key: Key('recommend-playlists-loading'),
+            ),
+          ),
+        ),
+      ];
+    }
+    if (remote.items.isEmpty) {
+      return [
+        EmptyState(
+          key: const Key('recommend-playlists-empty'),
+          icon: Icons.video_library_outlined,
+          title: remote.error == null ? l10n.emptyContent : l10n.networkError,
+          actionLabel: l10n.retry,
+          onAction: remote.load,
+        ),
+      ];
+    }
+    final sections = <Widget>[];
+    for (final playlist in remote.items) {
+      if (sections.isNotEmpty) {
+        sections.add(const SizedBox(height: AppDimens.spaceXl));
+      }
+      sections.add(
+        _section(
+          context,
+          l10n,
+          key: playlist.id,
+          title: playlist.localizedName(
+            Localizations.localeOf(context).languageCode,
+          ),
+          subtitle: playlist.localizedDescription(
+            Localizations.localeOf(context).languageCode,
+          ),
+          dramas: playlist.dramas.take(_sectionPreviewCount).toList(),
+          onMore: () => onOpenPlaylist?.call(playlist),
+        ),
+      );
+    }
+    if (remote.loadingMore) {
+      sections.add(
+        const Padding(
+          padding: EdgeInsets.symmetric(vertical: AppDimens.spaceMd),
+          child: Center(
+            child: CircularProgressIndicator(
+              key: Key('recommend-playlists-more'),
+            ),
+          ),
+        ),
+      );
+    } else if (!remote.hasMore) {
+      sections.add(
+        Padding(
+          key: const Key('paged-list-no-more'),
+          padding: const EdgeInsets.symmetric(vertical: 16),
+          child: Text(
+            l10n.noMoreItems,
+            textAlign: TextAlign.center,
+            style: const TextStyle(color: AppColors.textHint, fontSize: 12),
+          ),
+        ),
+      );
+    }
+    return sections;
+  }
+
+  bool _onPlaylistScroll(
+    ScrollNotification notification,
+    PlaylistController remote,
+  ) {
+    if (notification.depth != 0) return false;
+    if (notification.metrics.extentAfter > _loadMoreThreshold) return false;
+    if (notification is! ScrollUpdateNotification &&
+        notification is! ScrollEndNotification) {
+      return false;
+    }
+    remote.loadMore();
+    return false;
  }

  Widget _section(