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

lib/pages/discover/discover_view.dart

@@ -23,30 +23,18 @@ import '../../core/widgets/catalog_debug_info.dart';
 import '../../core/widgets/catalog_endpoint_editor.dart';
 import '../../core/widgets/empty_state.dart';
 import '../../l10n/app_localizations.dart';
-import '../filter/filter_page.dart';
-import '../new_releases/new_releases_page.dart';
 import '../player/open_player.dart';
-import '../ranking/ranking_page.dart';
-import '../reserve/reserve_page.dart';
 import 'discover_binding.dart';
 import 'discover_logic.dart';
 import 'discover_types.dart';
+import 'widgets/discover_category_tab.dart';
 import 'widgets/discover_header.dart';
 import 'widgets/discover_search_results.dart';
+import 'widgets/discover_toolbar.dart';
 import 'widgets/drama_grid.dart';
 
-const Color _filterIconColor = AppColors.blueSoft;
-const Color _newIconColor = AppColors.blueSoft;
-const double _toolbarHeight = 36;
-const double _toolbarGap = 10;
-const double _toolbarRadius = 10;
 const double _categoryTabHeight = 44;
 const double _categoryTabGap = 20;
-const double _categorySelectedFontSize = 16;
-const double _categoryFontSize = 15;
-const double _categoryUnderlineWidth = 20;
-const double _categoryUnderlineHeight = 3;
-const double _categoryUnderlineStrokeWidth = 2;
 const double _stickyHeaderHeight = 44;
 const Duration _stickyHeaderTransition = Duration(milliseconds: 160);
 const Duration _categoryScrollDuration = Duration(milliseconds: 200);
@@ -295,7 +283,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
   List<Widget> _theaterBlocks(AppLocalizations l10n) {
     final dramas = theater.dramas;
     return [
-      _toolbar(l10n),
+      _toolbar(),
       if (dramas.isEmpty)
         Padding(
           padding: const EdgeInsets.symmetric(vertical: 40),
@@ -318,6 +306,16 @@ class _DiscoverPageState extends State<DiscoverPage> {
               child: CircularProgressIndicator(strokeWidth: 2),
             ),
           ),
+        )
+      else if (dramas.isNotEmpty && !theater.hasMore)
+        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),
+          ),
         ),
     ];
   }
@@ -335,8 +333,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
         child: Row(
           mainAxisSize: MainAxisSize.min,
           children: [
-            _categoryTab(
-              key: const Key('theater-category-all'),
+            DiscoverCategoryTab(
               anchorKey: _anchorFor('all'),
               id: 'all',
               label: l10n.all,
@@ -345,8 +342,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
             ),
             for (final category in categories.categories) ...[
               const SizedBox(width: _categoryTabGap),
-              _categoryTab(
-                key: Key('theater-category-${category.id}'),
+              DiscoverCategoryTab(
                 anchorKey: _anchorFor(category.id),
                 id: category.id,
                 label: category.name,
@@ -360,52 +356,6 @@ class _DiscoverPageState extends State<DiscoverPage> {
     );
   }
 
-  Widget _categoryTab({
-    required Key key,
-    required GlobalKey anchorKey,
-    required String id,
-    required String label,
-    required bool selected,
-    required VoidCallback onTap,
-  }) {
-    return KeyedSubtree(
-      key: anchorKey,
-      child: GestureDetector(
-        key: key,
-        behavior: HitTestBehavior.opaque,
-        onTap: onTap,
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Text(
-              label,
-              maxLines: 1,
-              style: TextStyle(
-                color: selected ? AppColors.onSurface : AppColors.muted,
-                fontSize: selected
-                    ? _categorySelectedFontSize
-                    : _categoryFontSize,
-                fontWeight: selected ? FontWeight.w800 : FontWeight.w500,
-              ),
-            ),
-            const SizedBox(height: 4),
-            CustomPaint(
-              key: Key('theater-category-underline-$id'),
-              size: const Size(
-                _categoryUnderlineWidth,
-                _categoryUnderlineHeight,
-              ),
-              painter: CategoryUnderlinePainter(
-                color: selected ? AppColors.blue : AppColors.transparent,
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-
   GlobalKey _anchorFor(String id) {
     return _categoryAnchors.putIfAbsent(id, GlobalKey.new);
   }
@@ -444,97 +394,8 @@ class _DiscoverPageState extends State<DiscoverPage> {
     return true;
   }
 
-  Widget _toolbar(AppLocalizations l10n) {
-    return Padding(
-      padding: const EdgeInsets.fromLTRB(14, 2, 14, 12),
-      child: Row(
-        children: [
-          Expanded(
-            child: _toolButton(
-              key: const Key('theater-toolbar-filter'),
-              icon: Icons.tune_rounded,
-              color: _filterIconColor,
-              label: l10n.filter,
-              onTap: () => _openPage(context, const FilterPage()),
-            ),
-          ),
-          const SizedBox(width: _toolbarGap),
-          Expanded(
-            child: _toolButton(
-              key: const Key('theater-toolbar-ranking'),
-              icon: Icons.local_fire_department_rounded,
-              color: AppColors.blue,
-              label: l10n.rankingTab,
-              onTap: () => _openPage(context, const RankingPage()),
-            ),
-          ),
-          const SizedBox(width: _toolbarGap),
-          Expanded(
-            child: _toolButton(
-              key: const Key('theater-toolbar-new'),
-              icon: Icons.play_circle_fill_rounded,
-              color: _newIconColor,
-              label: l10n.newDramas,
-              onTap: () => _openPage(context, const NewReleasesPage()),
-            ),
-          ),
-          const SizedBox(width: _toolbarGap),
-          Expanded(
-            child: _toolButton(
-              key: const Key('theater-toolbar-reserve'),
-              icon: Icons.calendar_month_rounded,
-              color: AppColors.blue,
-              label: l10n.reserve,
-              onTap: () => _openPage(context, const ReservePage()),
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-
-  Widget _toolButton({
-    required Key key,
-    required IconData icon,
-    required Color color,
-    required String label,
-    required VoidCallback onTap,
-  }) {
-    return Material(
-      color: AppColors.card,
-      borderRadius: BorderRadius.circular(_toolbarRadius),
-      child: InkWell(
-        key: key,
-        onTap: onTap,
-        borderRadius: BorderRadius.circular(_toolbarRadius),
-        child: Container(
-          height: _toolbarHeight,
-          decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(_toolbarRadius),
-            border: Border.all(color: AppColors.border),
-          ),
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Icon(icon, size: 16, color: color),
-              const SizedBox(width: 4),
-              Flexible(
-                child: Text(
-                  label,
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  style: const TextStyle(
-                    color: AppColors.onSurface,
-                    fontSize: 13,
-                    fontWeight: FontWeight.w600,
-                  ),
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
+  Widget _toolbar() {
+    return DiscoverToolbar(onOpen: (page) => _openPage(context, page));
   }
 
   void _openPage(BuildContext context, Widget page) {
@@ -601,27 +462,3 @@ class _DiscoverPageState extends State<DiscoverPage> {
     AppRootTab.mine => DiscoverPageAction.mine,
   };
 }
-
-/// 分类 tab 的弧形选中线。
-class CategoryUnderlinePainter extends CustomPainter {
-  const CategoryUnderlinePainter({required this.color});
-
-  final Color color;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint = Paint()
-      ..color = color
-      ..style = PaintingStyle.stroke
-      ..strokeWidth = _categoryUnderlineStrokeWidth
-      ..strokeCap = StrokeCap.round;
-    final path = Path()
-      ..moveTo(1, 1)
-      ..quadraticBezierTo(size.width / 2, size.height + 1, size.width - 1, 1);
-    canvas.drawPath(path, paint);
-  }
-
-  @override
-  bool shouldRepaint(covariant CategoryUnderlinePainter oldDelegate) =>
-      color != oldDelegate.color;
-}

lib/pages/discover/widgets/discover_category_tab.dart

@@ -0,0 +1,89 @@
+// Author: fruit.com.cn
+// 剧场顶部分类标签和选中下划线。
+
+import 'package:flutter/material.dart';
+
+import '../../../core/theme/app_colors.dart';
+
+const double _selectedFontSize = 16;
+const double _fontSize = 15;
+const double _underlineWidth = 20;
+const double _underlineHeight = 3;
+const double _underlineStrokeWidth = 2;
+
+/// 一个可横向滚动的分类标签。
+class DiscoverCategoryTab extends StatelessWidget {
+  const DiscoverCategoryTab({
+    super.key,
+    required this.id,
+    required this.anchorKey,
+    required this.label,
+    required this.selected,
+    required this.onTap,
+  });
+
+  final String id;
+  final GlobalKey anchorKey;
+  final String label;
+  final bool selected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return KeyedSubtree(
+      key: anchorKey,
+      child: GestureDetector(
+        key: Key('theater-category-$id'),
+        behavior: HitTestBehavior.opaque,
+        onTap: onTap,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              label,
+              maxLines: 1,
+              style: TextStyle(
+                color: selected ? AppColors.onSurface : AppColors.muted,
+                fontSize: selected ? _selectedFontSize : _fontSize,
+                fontWeight: selected ? FontWeight.w800 : FontWeight.w500,
+              ),
+            ),
+            const SizedBox(height: 4),
+            CustomPaint(
+              key: Key('theater-category-underline-$id'),
+              size: const Size(_underlineWidth, _underlineHeight),
+              painter: CategoryUnderlinePainter(
+                color: selected ? AppColors.blue : AppColors.transparent,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// 分类 tab 的弧形选中线。
+class CategoryUnderlinePainter extends CustomPainter {
+  const CategoryUnderlinePainter({required this.color});
+
+  final Color color;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = color
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = _underlineStrokeWidth
+      ..strokeCap = StrokeCap.round;
+    final path = Path()
+      ..moveTo(1, 1)
+      ..quadraticBezierTo(size.width / 2, size.height + 1, size.width - 1, 1);
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(covariant CategoryUnderlinePainter oldDelegate) =>
+      color != oldDelegate.color;
+}

lib/pages/discover/widgets/discover_toolbar.dart

@@ -0,0 +1,119 @@
+// Author: fruit.com.cn
+// 剧场页筛选、排行、新剧、预约四个入口。
+
+import 'package:flutter/material.dart';
+
+import '../../../core/theme/app_colors.dart';
+import '../../../l10n/app_localizations.dart';
+import '../../filter/filter_page.dart';
+import '../../new_releases/new_releases_page.dart';
+import '../../ranking/ranking_page.dart';
+import '../../reserve/reserve_page.dart';
+
+const double _toolbarHeight = 36;
+const double _toolbarGap = 10;
+const double _toolbarRadius = 10;
+const Color _filterIconColor = AppColors.blueSoft;
+const Color _newIconColor = AppColors.blueSoft;
+
+/// 剧场工具条。点按后由调用方打开对应页面。
+class DiscoverToolbar extends StatelessWidget {
+  const DiscoverToolbar({super.key, required this.onOpen});
+
+  final void Function(Widget page) onOpen;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(14, 2, 14, 12),
+      child: Row(
+        children: [
+          Expanded(
+            child: _button(
+              key: const Key('theater-toolbar-filter'),
+              icon: Icons.tune_rounded,
+              color: _filterIconColor,
+              label: l10n.filter,
+              onTap: () => onOpen(const FilterPage()),
+            ),
+          ),
+          const SizedBox(width: _toolbarGap),
+          Expanded(
+            child: _button(
+              key: const Key('theater-toolbar-ranking'),
+              icon: Icons.local_fire_department_rounded,
+              color: AppColors.blue,
+              label: l10n.rankingTab,
+              onTap: () => onOpen(const RankingPage()),
+            ),
+          ),
+          const SizedBox(width: _toolbarGap),
+          Expanded(
+            child: _button(
+              key: const Key('theater-toolbar-new'),
+              icon: Icons.play_circle_fill_rounded,
+              color: _newIconColor,
+              label: l10n.newDramas,
+              onTap: () => onOpen(const NewReleasesPage()),
+            ),
+          ),
+          const SizedBox(width: _toolbarGap),
+          Expanded(
+            child: _button(
+              key: const Key('theater-toolbar-reserve'),
+              icon: Icons.calendar_month_rounded,
+              color: AppColors.blue,
+              label: l10n.reserve,
+              onTap: () => onOpen(const ReservePage()),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _button({
+    required Key key,
+    required IconData icon,
+    required Color color,
+    required String label,
+    required VoidCallback onTap,
+  }) {
+    return Material(
+      color: AppColors.card,
+      borderRadius: BorderRadius.circular(_toolbarRadius),
+      child: InkWell(
+        key: key,
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(_toolbarRadius),
+        child: Container(
+          height: _toolbarHeight,
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(_toolbarRadius),
+            border: Border.all(color: AppColors.border),
+          ),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(icon, size: 16, color: color),
+              const SizedBox(width: 4),
+              Flexible(
+                child: Text(
+                  label,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                    color: AppColors.onSurface,
+                    fontSize: 13,
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/discover/widgets/drama_grid.dart

@@ -96,9 +96,9 @@ class DramaGridCard extends StatelessWidget {
         children: [
           _cover(),
           const SizedBox(height: _titleGap),
-          _title(),
+          _title(context),
           const SizedBox(height: _tagsGap),
-          _tags(),
+          _tags(context),
         ],
       ),
     );
@@ -151,9 +151,9 @@ class DramaGridCard extends StatelessWidget {
     );
   }
 
-  Widget _title() {
+  Widget _title(BuildContext context) {
     return Text(
-      drama.title,
+      drama.localizedTitle(Localizations.localeOf(context).languageCode),
       key: Key('home-drama-title-${drama.id}'),
       maxLines: 2,
       overflow: TextOverflow.ellipsis,
@@ -166,8 +166,8 @@ class DramaGridCard extends StatelessWidget {
     );
   }
 
-  Widget _tags() {
-    final tags = _tagValues();
+  Widget _tags(BuildContext context) {
+    final tags = _tagValues(context);
     if (tags.isEmpty) return const SizedBox.shrink();
     return Wrap(
       spacing: 6,
@@ -193,7 +193,9 @@ class DramaGridCard extends StatelessWidget {
     );
   }
 
-  List<String> _tagValues() {
+  List<String> _tagValues(BuildContext context) {
+    final localized = drama.localizedTypeLabels(Localizations.localeOf(context).languageCode);
+    if (localized.isNotEmpty) return localized.take(3).toList(growable: false);
     final result = <String>[];
     for (final value in [drama.genre, drama.category]) {
       for (final part in value.split(_tagSplitter)) {

lib/pages/discover/widgets/search_result_card.dart

@@ -16,7 +16,7 @@ class SearchResultCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final tags = _tags();
+    final tags = _tags(context);
     return Material(
       key: Key('search-result-card-${drama.id}'),
       color: AppColors.transparent,
@@ -60,7 +60,7 @@ class SearchResultCard extends StatelessWidget {
             ),
             const SizedBox(height: AppDimens.searchResultTitleGap),
             Text(
-              drama.title,
+              drama.localizedTitle(Localizations.localeOf(context).languageCode),
               key: Key('search-result-title-${drama.id}'),
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
@@ -92,7 +92,9 @@ class SearchResultCard extends StatelessWidget {
     );
   }
 
-  List<String> _tags() {
+  List<String> _tags(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(RegExp(r'[,/、·]')))