feat(flutter): 重设计剧场与首页 Hero

lib/pages/discover/discover_view.dart

@@ -4,12 +4,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 
-import '../../core/data/models/content_category.dart';
 import '../../core/data/models/drama.dart';
-import '../../core/data/models/home_feed.dart';
-import '../../core/data/repositories/catalog_repository.dart';
 import '../../core/data/repositories/search_repository.dart';
-import '../../core/data/services/catalog_controller.dart';
 import '../../core/data/services/category_controller.dart';
 import '../../core/formatting/error_text.dart';
 import '../../core/theme/app_colors.dart';
@@ -19,19 +15,14 @@ import '../../core/widgets/app_bottom_nav.dart';
 import '../../core/widgets/empty_state.dart';
 import '../../l10n/app_localizations.dart';
 import '../drama_detail/drama_detail_view.dart';
-import 'category_dramas_page.dart';
 import 'discover_binding.dart';
 import 'discover_logic.dart';
 import 'discover_types.dart';
-import 'widgets/category_grid.dart';
 import 'widgets/discover_header.dart';
-import 'widgets/discover_search_field.dart';
 import 'widgets/discover_search_results.dart';
 import 'widgets/drama_grid.dart';
-import 'widgets/feed_banner_carousel.dart';
-import 'widgets/ranking_section.dart';
 
-/// 剧场页：搜索 + 分类九宫格 + 榜单 + 全部剧目。
+/// K28-A2 剧场页：搜索、分类/语言 chips 与双列剧库。
 class DiscoverPage extends StatefulWidget {
   const DiscoverPage({
     super.key,
@@ -96,13 +87,18 @@ class _DiscoverPageState extends State<DiscoverPage> {
   Widget _page(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     final categories = context.watch<CategoryController>();
-    final banners = context.watch<CatalogController>().banners;
     final content = SafeArea(
       bottom: !embedded,
       child: Column(
         children: [
-          DiscoverHeader(onSearch: logic.openSearch, onProfile: _openProfile),
-          Expanded(child: _feed(l10n, categories, banners)),
+          DiscoverHeader(
+            controller: logic.search,
+            focusNode: logic.searchFocus,
+            onChanged: (_) => logic.onSearchChanged(),
+            loading: logic.searchLoading,
+            onProfile: _openProfile,
+          ),
+          Expanded(child: _feed(l10n, categories)),
           if (!embedded) _bottomNav(l10n),
         ],
       ),
@@ -118,58 +114,37 @@ class _DiscoverPageState extends State<DiscoverPage> {
     );
   }
 
-  Widget _feed(
-    AppLocalizations l10n,
-    CategoryController categories,
-    List<FeedBanner> banners,
-  ) {
-    return RefreshIndicator(
-      key: const Key('discover-refresh'),
-      color: AppColors.blue,
-      backgroundColor: AppColors.card,
-      onRefresh: categories.load,
-      child: ListView(
-        controller: logic.scroll,
-        physics: const AlwaysScrollableScrollPhysics(),
-        padding: const EdgeInsets.only(bottom: 24),
-        children: [
-          Padding(
-            padding: const EdgeInsets.only(top: 8),
-            child: DiscoverSearchField(
-              controller: logic.search,
-              focusNode: logic.searchFocus,
-              onChanged: (_) => logic.onSearchChanged(),
-              loading: logic.searchLoading,
-            ),
-          ),
-          ..._content(l10n, categories, banners),
-        ],
+  Widget _feed(AppLocalizations l10n, CategoryController categories) {
+    return GestureDetector(
+      behavior: HitTestBehavior.translucent,
+      onTap: logic.searchFocus.unfocus,
+      child: RefreshIndicator(
+        key: const Key('discover-refresh'),
+        color: AppColors.blue,
+        backgroundColor: AppColors.card,
+        onRefresh: categories.load,
+        child: ListView(
+          controller: logic.scroll,
+          physics: const AlwaysScrollableScrollPhysics(),
+          padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
+          children: _content(l10n, categories),
+        ),
       ),
     );
   }
 
-  List<Widget> _content(
-    AppLocalizations l10n,
-    CategoryController categories,
-    List<FeedBanner> banners,
-  ) {
-    if (logic.hasSearchQuery) return [_searchContent(l10n)];
-    return _theaterContent(l10n, categories, banners);
-  }
-
-  Widget _searchContent(AppLocalizations l10n) => DiscoverSearchResults(
-    loading: logic.searchLoading,
-    error: logic.searchError,
-    results: logic.searchResults,
-    onRetry: logic.retrySearch,
-    onOpen: _openDrama,
-  );
-
-  List<Widget> _theaterContent(
-    AppLocalizations l10n,
-    CategoryController categories,
-    List<FeedBanner> banners,
-  ) {
+  List<Widget> _content(AppLocalizations l10n, CategoryController categories) {
+    if (logic.hasSearchQuery) {
+      return [
+        DiscoverSearchResults(
+          loading: logic.searchLoading,
+          error: logic.searchError,
+          results: logic.searchResults,
+          onRetry: logic.retrySearch,
+          onOpen: _openDrama,
+        ),
+      ];
+    }
     if (categories.loading && categories.feed.sections.isEmpty) {
       return [_block(const CircularProgressIndicator(strokeWidth: 2))];
     }
@@ -188,91 +163,124 @@ class _DiscoverPageState extends State<DiscoverPage> {
         ),
       ];
     }
-    return _theaterBlocks(l10n, categories, banners);
+    return _theaterBlocks(l10n, categories);
   }
 
   List<Widget> _theaterBlocks(
     AppLocalizations l10n,
     CategoryController categories,
-    List<FeedBanner> banners,
   ) {
-    final dramas = categories.feed.dramas;
+    final dramas = logic.selectedCategoryId == null
+        ? categories.feed.dramas
+        : categories.dramasOf(logic.selectedCategoryId!);
     return [
-      Padding(
-        padding: const EdgeInsets.only(top: 12),
-        child: CategoryGrid(
-          categories: categories.categories,
-          onTap: (category) => _openCategory(category, categories),
-        ),
-      ),
-      if (banners.isNotEmpty)
+      _categoryChips(l10n, categories),
+      _languageChips(l10n),
+      if (dramas.isEmpty)
         Padding(
-          padding: const EdgeInsets.only(top: 12),
-          child: FeedBannerCarousel(
-            banners: banners,
-            active: widget.active,
-            onOpen: _openBanner,
+          padding: const EdgeInsets.symmetric(vertical: 40),
+          child: EmptyState(
+            key: const Key('discover-empty'),
+            icon: Icons.movie_filter_outlined,
+            title: l10n.noStories,
+            subtitle: l10n.emptyHint,
           ),
-        ),
-      if (categories.feed.sections.isNotEmpty || dramas.isNotEmpty)
-        RankingSection(
-          sections: categories.feed.sections,
-          fallback: dramas,
-          onOpen: _openDrama,
-        ),
-      _sectionTitle(l10n.allDramas),
-      if (dramas.isEmpty) _emptyCatalog(l10n) else _dramaGrid(l10n, dramas),
+        )
+      else
+        DramaGrid(l10n: l10n, dramas: dramas, onOpen: _openDrama),
     ];
   }
 
-  Widget _block(Widget child) =>
-      SizedBox(height: 280, child: Center(child: child));
-
-  Widget _emptyCatalog(AppLocalizations l10n) => Padding(
-    padding: const EdgeInsets.symmetric(vertical: 40),
-    child: EmptyState(
-      key: const Key('discover-empty'),
-      icon: Icons.movie_filter_outlined,
-      title: l10n.noStories,
-      subtitle: l10n.emptyHint,
-    ),
-  );
-
-  Widget _dramaGrid(AppLocalizations l10n, List<Drama> dramas) {
-    return DramaGrid(l10n: l10n, dramas: dramas, onOpen: _openDrama);
-  }
-
-  Widget _sectionTitle(String title) {
+  Widget _categoryChips(AppLocalizations l10n, CategoryController categories) {
     return Padding(
-      padding: const EdgeInsets.fromLTRB(14, 18, 14, 10),
-      child: Row(
+      padding: const EdgeInsets.fromLTRB(
+        AppDimens.pageHorizontal,
+        AppDimens.spaceMd,
+        AppDimens.pageHorizontal,
+        0,
+      ),
+      child: Wrap(
+        key: const Key('theater-category-chips'),
+        spacing: 10,
+        runSpacing: 10,
         children: [
-          Container(
-            width: 3,
-            height: 18,
-            decoration: BoxDecoration(
-              color: AppColors.blue,
-              borderRadius: BorderRadius.circular(2),
-            ),
+          _filterChip(
+            key: const Key('theater-category-all'),
+            label: l10n.all,
+            selected: logic.selectedCategoryId == null,
+            onSelected: () => logic.selectCategory(null),
           ),
-          const SizedBox(width: 6),
-          Expanded(
-            child: Text(
-              title,
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-              style: const TextStyle(
-                color: AppColors.onSurface,
-                fontSize: AppDimens.previewSectionTitle,
-                fontWeight: FontWeight.w800,
-              ),
+          for (final category in categories.categories)
+            _filterChip(
+              key: Key('theater-category-${category.id}'),
+              label: category.name,
+              selected: logic.selectedCategoryId == category.id,
+              onSelected: () => logic.selectCategory(category.id),
             ),
-          ),
         ],
       ),
     );
   }
 
+  Widget _languageChips(AppLocalizations l10n) {
+    final entries = [
+      (TheaterLanguage.all, l10n.allLanguages),
+      (TheaterLanguage.zh, l10n.simplifiedChinese),
+      (TheaterLanguage.id, l10n.bahasaIndonesia),
+      (TheaterLanguage.ms, l10n.bahasaMelayu),
+      (TheaterLanguage.en, l10n.english),
+    ];
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(
+        AppDimens.pageHorizontal,
+        AppDimens.spaceSm,
+        AppDimens.pageHorizontal,
+        0,
+      ),
+      child: Wrap(
+        key: const Key('theater-language-chips'),
+        spacing: 10,
+        runSpacing: 10,
+        children: [
+          for (final entry in entries)
+            _filterChip(
+              key: Key('theater-language-${entry.$1.name}'),
+              label: entry.$2,
+              selected: logic.language == entry.$1,
+              onSelected: () => logic.selectLanguage(entry.$1),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _filterChip({
+    required Key key,
+    required String label,
+    required bool selected,
+    required VoidCallback onSelected,
+  }) {
+    return ChoiceChip(
+      key: key,
+      label: Text(label),
+      selected: selected,
+      showCheckmark: false,
+      onSelected: (_) => onSelected(),
+      backgroundColor: AppColors.card,
+      selectedColor: AppColors.blue,
+      side: BorderSide(color: selected ? AppColors.blue : AppColors.border),
+      labelStyle: TextStyle(
+        color: selected ? AppColors.onPrimary : AppColors.onSurface,
+        fontSize: AppDimens.caption,
+        fontWeight: FontWeight.w700,
+      ),
+      shape: const StadiumBorder(),
+    );
+  }
+
+  Widget _block(Widget child) =>
+      SizedBox(height: 280, child: Center(child: child));
+
   void _openProfile() {
     final callback = widget.callbacks.onProfile;
     if (callback != null) {
@@ -291,54 +299,17 @@ class _DiscoverPageState extends State<DiscoverPage> {
     );
   }
 
-  void _openCategory(ContentCategory category, CategoryController categories) {
-    Navigator.of(context).push<void>(
-      MaterialPageRoute(
-        builder: (_) => CategoryDramasPage(
-          title: category.name,
-          dramas: categories.dramasOf(category.id),
-          onOpen: widget.callbacks.onDramaSelected == null ? null : _openDrama,
-        ),
-      ),
-    );
-  }
-
   void _openDrama(Drama drama) {
     final callback = widget.callbacks.onDramaSelected;
     if (callback != null) {
       callback(drama);
       return;
     }
-    _pushDetail(drama);
-  }
-
-  void _pushDetail(Drama drama) {
     Navigator.of(context).push<void>(
       MaterialPageRoute(builder: (_) => DramaDetailPage(drama: drama)),
     );
   }
 
-  Future<void> _openBanner(FeedBanner banner) async {
-    final dramaId = banner.dramaId;
-    if (dramaId == null) return;
-    for (final drama in context.read<CatalogController>().dramas) {
-      if (drama.id == dramaId) {
-        _pushDetail(drama);
-        return;
-      }
-    }
-    try {
-      final drama = await context.read<CatalogRepository>().fetchDrama(dramaId);
-      if (mounted) _pushDetail(drama);
-    } catch (_) {
-      if (!mounted) return;
-      final message = AppLocalizations.of(context)!.detailLoadFailed;
-      ScaffoldMessenger.of(
-        context,
-      ).showSnackBar(SnackBar(content: Text(message)));
-    }
-  }
-
   Widget _bottomNav(AppLocalizations l10n) => AppBottomNav(
     items: [
       AppBottomNavItem(
@@ -352,7 +323,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
         tabKey: const Key('discover-nav-current'),
         icon: Icons.explore_outlined,
         selectedIcon: Icons.explore_rounded,
-        label: l10n.discoverTab,
+        label: l10n.theaterTab,
         selected: true,
         onTap: () {},
       ),
@@ -365,8 +336,8 @@ class _DiscoverPageState extends State<DiscoverPage> {
       ),
       AppBottomNavItem(
         tabKey: const Key('discover-nav-my'),
-        icon: Icons.video_library_outlined,
-        selectedIcon: Icons.video_library_rounded,
+        icon: Icons.person_outline_rounded,
+        selectedIcon: Icons.person_rounded,
         label: l10n.myTab,
         onTap: () => _act(DiscoverPageAction.my),
       ),