feat(flutter): 重构四 Tab 与浏览页

lib/pages/discover/widgets/discover_header.dart

@@ -3,37 +3,48 @@
 import 'package:flutter/material.dart';
 
 import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
 import '../../../l10n/app_localizations.dart';
+import 'discover_search_field.dart';
 
-/// 剧场页页头：品牌、搜索与个人页入口。
+/// Theater header with a persistent search field and profile entry.
 class DiscoverHeader extends StatelessWidget {
   const DiscoverHeader({
     super.key,
-    required this.onSearch,
+    required this.controller,
+    required this.focusNode,
+    required this.onChanged,
+    required this.loading,
     required this.onProfile,
   });
 
-  final VoidCallback onSearch;
+  final TextEditingController controller;
+  final FocusNode focusNode;
+  final ValueChanged<String> onChanged;
+  final bool loading;
   final VoidCallback onProfile;
 
   @override
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     return SizedBox(
-      height: 46,
+      height: AppDimens.contentHeaderHeight,
       child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 14),
+        padding: const EdgeInsets.symmetric(
+          horizontal: AppDimens.pageHorizontal,
+        ),
         child: Row(
           children: [
-            _brand(l10n),
-            const Spacer(),
-            _HeaderIcon(
-              key: const Key('discover-search-button'),
-              icon: Icons.search_rounded,
-              tooltip: l10n.search,
-              onTap: onSearch,
+            Expanded(
+              child: DiscoverSearchField(
+                controller: controller,
+                focusNode: focusNode,
+                onChanged: onChanged,
+                loading: loading,
+                horizontalPadding: 0,
+              ),
             ),
-            const SizedBox(width: 8),
+            const SizedBox(width: AppDimens.spaceSm),
             _profile(l10n),
           ],
         ),
@@ -41,37 +52,6 @@ class DiscoverHeader extends StatelessWidget {
     );
   }
 
-  Widget _brand(AppLocalizations l10n) {
-    return Row(
-      children: [
-        Container(
-          width: 24,
-          height: 24,
-          alignment: Alignment.center,
-          decoration: BoxDecoration(
-            color: AppColors.blue,
-            borderRadius: BorderRadius.circular(7),
-          ),
-          child: const Icon(
-            Icons.play_arrow_rounded,
-            color: AppColors.onPrimary,
-            size: 16,
-          ),
-        ),
-        const SizedBox(width: 8),
-        Text(
-          l10n.discoverTab,
-          style: const TextStyle(
-            fontFamily: 'Outfit',
-            color: AppColors.onSurface,
-            fontSize: 15,
-            fontWeight: FontWeight.w800,
-          ),
-        ),
-      ],
-    );
-  }
-
   Widget _profile(AppLocalizations l10n) {
     return Semantics(
       button: true,
@@ -101,34 +81,3 @@ class DiscoverHeader extends StatelessWidget {
     );
   }
 }
-
-class _HeaderIcon extends StatelessWidget {
-  const _HeaderIcon({
-    super.key,
-    required this.icon,
-    required this.tooltip,
-    required this.onTap,
-  });
-
-  final IconData icon;
-  final String tooltip;
-  final VoidCallback onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    return SizedBox(
-      width: 36,
-      height: 36,
-      child: IconButton(
-        tooltip: tooltip,
-        onPressed: onTap,
-        padding: EdgeInsets.zero,
-        style: IconButton.styleFrom(
-          backgroundColor: const Color(0xFF2C2D33),
-          foregroundColor: AppColors.onSurface,
-        ),
-        icon: Icon(icon, size: 18),
-      ),
-    );
-  }
-}

lib/pages/discover/widgets/discover_search_field.dart

@@ -13,17 +13,19 @@ class DiscoverSearchField extends StatelessWidget {
     required this.focusNode,
     required this.onChanged,
     required this.loading,
+    this.horizontalPadding = 14,
   });
 
   final TextEditingController controller;
   final FocusNode focusNode;
   final ValueChanged<String> onChanged;
   final bool loading;
+  final double horizontalPadding;
 
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 14),
+      padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
       child: SizedBox(
         height: 36,
         child: TextField(

lib/pages/discover/widgets/drama_grid.dart

@@ -2,9 +2,10 @@
 
 import 'package:flutter/material.dart';
 
-import '../../../core/config/app_config.dart';
 import '../../../core/data/models/drama.dart';
 import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/remote_image.dart';
 import '../../../l10n/app_localizations.dart';
 
 const int _columns = 2;
@@ -83,6 +84,8 @@ class DramaGridCard extends StatelessWidget {
           _title(),
           const SizedBox(height: 2),
           _genre(),
+          const SizedBox(height: AppDimens.spaceXs),
+          _metadata(),
         ],
       ),
     );
@@ -115,7 +118,7 @@ class DramaGridCard extends StatelessWidget {
         l10n.free,
         style: const TextStyle(
           color: AppColors.onPrimary,
-          fontSize: 8,
+          fontSize: AppDimens.cardMeta,
           fontWeight: FontWeight.w800,
         ),
       ),
@@ -130,7 +133,7 @@ class DramaGridCard extends StatelessWidget {
       overflow: TextOverflow.ellipsis,
       style: const TextStyle(
         color: AppColors.onSurface,
-        fontSize: 11,
+        fontSize: AppDimens.previewSectionTitle,
         fontWeight: FontWeight.w800,
       ),
     );
@@ -143,7 +146,39 @@ class DramaGridCard extends StatelessWidget {
       key: Key('home-drama-genre-${drama.id}'),
       maxLines: 1,
       overflow: TextOverflow.ellipsis,
-      style: const TextStyle(color: Color(0xFFBBBBBB), fontSize: 9),
+      style: const TextStyle(
+        color: AppColors.muted,
+        fontSize: AppDimens.cardMeta,
+      ),
+    );
+  }
+
+  Widget _metadata() {
+    return Wrap(
+      spacing: AppDimens.spaceSm,
+      runSpacing: AppDimens.spaceXs,
+      children: [
+        Text(
+          l10n.episodeCount(drama.episodeCount),
+          key: Key('home-drama-episode-count-${drama.id}'),
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: const TextStyle(
+            color: AppColors.subtle,
+            fontSize: AppDimens.cardViews,
+          ),
+        ),
+        Text(
+          l10n.viewCountLabel(drama.viewCount),
+          key: Key('home-drama-views-${drama.id}'),
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: const TextStyle(
+            color: AppColors.subtle,
+            fontSize: AppDimens.cardViews,
+          ),
+        ),
+      ],
     );
   }
 }
@@ -155,33 +190,12 @@ class _DiscoverCoverImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final url = AppConfig.mediaUrl(path);
-    if (url.isEmpty) return _placeholder();
-    return Image.network(
-      url,
+    return RemoteImage(
+      path,
       width: double.infinity,
       fit: BoxFit.fitWidth,
-      loadingBuilder: (context, child, progress) {
-        if (progress == null) return child;
-        return _placeholder();
-      },
-      errorBuilder: (_, _, _) => _placeholder(),
-    );
-  }
-
-  Widget _placeholder() {
-    return AspectRatio(
-      aspectRatio: 3 / 4,
-      child: ColoredBox(
-        color: AppColors.card,
-        child: const Center(
-          child: Icon(
-            Icons.image_not_supported_outlined,
-            color: AppColors.muted,
-            size: 32,
-          ),
-        ),
-      ),
+      showFallbackIcon: true,
+      fallbackAspectRatio: 3 / 4,
     );
   }
 }

lib/pages/discover/widgets/feed_banner_carousel.dart

@@ -5,12 +5,12 @@ import 'dart:async';
 import 'package:flutter/material.dart';
 
 import '../../../core/data/models/home_feed.dart';
+import '../../../core/data/models/drama.dart';
 import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_dimens.dart';
 import '../../../core/widgets/remote_image.dart';
 import '../../../l10n/app_localizations.dart';
 
-const double _carouselHeight = 154;
 const double _indicatorHeight = 24;
 const double _dotSize = 6;
 const double _activeDotWidth = 18;
@@ -25,11 +25,13 @@ class FeedBannerCarousel extends StatefulWidget {
     required this.banners,
     required this.onOpen,
     this.active = true,
+    this.dramaFor,
   });
 
   final List<FeedBanner> banners;
   final ValueChanged<FeedBanner> onOpen;
   final bool active;
+  final Drama? Function(FeedBanner banner)? dramaFor;
 
   @override
   State<FeedBannerCarousel> createState() => _FeedBannerCarouselState();
@@ -121,7 +123,7 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
       child: Column(
         children: [
           SizedBox(
-            height: _carouselHeight,
+            height: AppDimens.heroBannerHeight,
             child: PageView.builder(
               controller: _controller,
               itemCount: widget.banners.length,
@@ -138,6 +140,7 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
   Widget _bannerCard(int index) {
     final banner = widget.banners[index];
     final dramaId = banner.dramaId;
+    final drama = widget.dramaFor?.call(banner);
     final card = ClipRRect(
       borderRadius: BorderRadius.circular(AppDimens.authCardRadius),
       child: Stack(
@@ -149,10 +152,44 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
               gradient: LinearGradient(
                 begin: Alignment.topCenter,
                 end: Alignment.bottomCenter,
-                colors: [Color(0x00000000), Color(0x8A0B0C10)],
+                colors: [Color(0x120B0C10), Color(0xE60B0C10)],
               ),
             ),
           ),
+          if (drama != null)
+            Positioned(
+              left: 16,
+              right: 64,
+              bottom: 14,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    drama.title,
+                    key: Key('home-hero-title-$index'),
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                    style: const TextStyle(
+                      fontFamily: 'Outfit',
+                      color: AppColors.onSurface,
+                      fontSize: AppDimens.pageTitle,
+                      fontWeight: FontWeight.w800,
+                    ),
+                  ),
+                  const SizedBox(height: AppDimens.spaceXs),
+                  Text(
+                    drama.synopsis,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: const TextStyle(
+                      color: AppColors.muted,
+                      fontSize: AppDimens.caption,
+                    ),
+                  ),
+                ],
+              ),
+            ),
           if (dramaId != null)
             const Positioned(right: 14, bottom: 14, child: _PlayMark()),
         ],