feat(flutter): 榜单前三铺满与剧场分类吸顶下划线

lib/pages/discover/discover_view.dart

@@ -34,7 +34,7 @@ const double _categoryTabHeight = 44;
 const double _categoryTabGap = 20;
 const double _categorySelectedFontSize = 16;
 const double _categoryFontSize = 15;
-const double _stickyHeaderHeight = 102;
+const double _stickyHeaderHeight = 44;
 const Duration _stickyHeaderTransition = Duration(milliseconds: 200);
 
 /// K28-A2 剧场页：搜索、分类/语言 chips 与双列剧库。
@@ -203,10 +203,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
               ]
             : const [],
       ),
-      child: Column(
+      child: _categoryTabs(l10n, categories),
-        mainAxisSize: MainAxisSize.min,
-        children: [_categoryTabs(l10n, categories), _toolbar(l10n, categories)],
-      ),
     );
   }
 
@@ -251,6 +248,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
         ? categories.feed.dramas
         : categories.dramasOf(logic.selectedCategoryId!);
     return [
+      _toolbar(l10n, categories),
       if (dramas.isEmpty)
         Padding(
           padding: const EdgeInsets.symmetric(vertical: 40),
@@ -279,6 +277,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
           if (index == 0) {
             return _categoryTab(
               key: const Key('theater-category-all'),
+              id: 'all',
               label: l10n.all,
               selected: logic.selectedCategoryId == null,
               onTap: () => logic.selectCategory(null),
@@ -287,6 +286,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
           final category = categories.categories[index - 1];
           return _categoryTab(
             key: Key('theater-category-${category.id}'),
+            id: category.id,
             label: category.name,
             selected: logic.selectedCategoryId == category.id,
             onTap: () => logic.selectCategory(category.id),
@@ -298,6 +298,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
 
   Widget _categoryTab({
     required Key key,
+    required String id,
     required String label,
     required bool selected,
     required VoidCallback onTap,
@@ -306,16 +307,32 @@ class _DiscoverPageState extends State<DiscoverPage> {
       key: key,
       behavior: HitTestBehavior.opaque,
       onTap: onTap,
-      child: Center(
+      child: Column(
-        child: Text(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Text(
             label,
             maxLines: 1,
             style: TextStyle(
               color: selected ? AppColors.onSurface : AppColors.muted,
-            fontSize: selected ? _categorySelectedFontSize : _categoryFontSize,
+              fontSize: selected
+                  ? _categorySelectedFontSize
+                  : _categoryFontSize,
               fontWeight: selected ? FontWeight.w800 : FontWeight.w500,
             ),
           ),
+          const SizedBox(height: 4),
+          Container(
+            key: Key('theater-category-underline-$id'),
+            width: 18,
+            height: 2,
+            decoration: BoxDecoration(
+              color: selected ? AppColors.blue : Colors.transparent,
+              borderRadius: BorderRadius.circular(1),
+            ),
+          ),
+        ],
       ),
     );
   }

lib/pages/ranking/ranking_page.dart

@@ -16,10 +16,6 @@ import '../drama_detail/drama_detail_view.dart';
 
 const int _topCount = 50;
 const double _podiumGap = 8;
-const double _centerCoverWidth = 120;
-const double _centerCoverHeight = 160;
-const double _sideCoverWidth = 92;
-const double _sideCoverHeight = 124;
 const double _coverRadius = 12;
 const double _titleSlotHeight = 24;
 const double _rowGap = 12;
@@ -87,14 +83,13 @@ class _Podium extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Row(
-      mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.end,
       children: [
-        SizedBox(width: _sideCoverWidth, child: _slot(2)),
+        Expanded(flex: 100, child: _slot(2)),
         const SizedBox(width: _podiumGap),
-        SizedBox(width: _centerCoverWidth, child: _slot(1)),
+        Expanded(flex: 115, child: _slot(1)),
         const SizedBox(width: _podiumGap),
-        SizedBox(width: _sideCoverWidth, child: _slot(3)),
+        Expanded(flex: 100, child: _slot(3)),
       ],
     );
   }
@@ -118,9 +113,6 @@ class _PodiumCard extends StatelessWidget {
 
   bool get _center => rank == 1;
 
-  double get _width => _center ? _centerCoverWidth : _sideCoverWidth;
-  double get _height => _center ? _centerCoverHeight : _sideCoverHeight;
-
   LinearGradient get _badgeGradient => switch (rank) {
     1 => const LinearGradient(
       begin: Alignment.topLeft,
@@ -150,10 +142,9 @@ class _PodiumCard extends StatelessWidget {
         children: [
           ClipRRect(
             borderRadius: BorderRadius.circular(_coverRadius),
-            child: SizedBox(
+            child: AspectRatio(
               key: Key('ranking-cover-$rank'),
-              width: _width,
+              aspectRatio: 3 / 4,
-              height: _height,
               child: Stack(
                 fit: StackFit.expand,
                 children: [
@@ -228,9 +219,21 @@ class _RankingRow extends StatelessWidget {
 
   int get _rank => index + 1;
 
+  List<String> _tagValues() {
+    final result = <String>[];
+    for (final value in [drama.genre, drama.category]) {
+      for (final part in value.split(RegExp(r'[,/、·]'))) {
+        final tag = part.trim();
+        if (tag.isEmpty || result.contains(tag)) continue;
+        result.add(tag);
+        if (result.length == 3) return result;
+      }
+    }
+    return result;
+  }
+
   @override
   Widget build(BuildContext context) {
-    final genre = drama.genre.isEmpty ? drama.category : drama.genre;
     return Container(
       decoration: BoxDecoration(
         color: AppColors.card,
@@ -293,8 +296,26 @@ class _RankingRow extends StatelessWidget {
                           fontWeight: FontWeight.w700,
                         ),
                       ),
-                      if (genre.isNotEmpty) ...[
+                      if (drama.synopsis.trim().isNotEmpty) ...[
+                        const SizedBox(height: 4),
+                        Text(
+                          drama.synopsis,
+                          maxLines: 2,
+                          overflow: TextOverflow.ellipsis,
+                          style: const TextStyle(
+                            color: AppColors.muted,
+                            fontSize: 12,
+                            height: 1.3,
+                          ),
+                        ),
+                      ],
+                      if (_tagValues().isNotEmpty) ...[
                         const SizedBox(height: 6),
+                        Wrap(
+                          spacing: 6,
+                          runSpacing: 4,
+                          children: [
+                            for (final tag in _tagValues())
                               Container(
                                 padding: const EdgeInsets.symmetric(
                                   horizontal: 6,
@@ -305,7 +326,7 @@ class _RankingRow extends StatelessWidget {
                                   borderRadius: BorderRadius.circular(6),
                                 ),
                                 child: Text(
-                            genre,
+                                  tag,
                                   maxLines: 1,
                                   overflow: TextOverflow.ellipsis,
                                   style: const TextStyle(
@@ -315,6 +336,8 @@ class _RankingRow extends StatelessWidget {
                                 ),
                               ),
                           ],
+                        ),
+                      ],
                       const SizedBox(height: 8),
                       Row(
                         children: [
@@ -337,6 +360,15 @@ class _RankingRow extends StatelessWidget {
                               ),
                             ),
                           ),
+                          const SizedBox(width: 8),
+                          Text(
+                            l10n.episodeCount(drama.episodeCount),
+                            maxLines: 1,
+                            style: const TextStyle(
+                              color: AppColors.muted,
+                              fontSize: 11,
+                            ),
+                          ),
                         ],
                       ),
                     ],

test/discover/home_all_dramas_grid_test.dart

@@ -226,6 +226,27 @@ void main() {
     expect(header().color, AppColors.ink);
   });
 
+  testWidgets('should_show_category_underline_for_selection', (tester) async {
+    await _pumpTheater(tester, categoryRepository: _GridCategoryRepository());
+    Color underline(String id) =>
+        (tester
+                    .widget<Container>(
+                      find.byKey(Key('theater-category-underline-$id')),
+                    )
+                    .decoration!
+                as BoxDecoration)
+            .color!;
+
+    expect(underline('all'), AppColors.blue);
+    expect(underline('7'), Colors.transparent);
+
+    await tester.tap(find.byKey(const Key('theater-category-7')));
+    await tester.pumpAndSettle();
+
+    expect(underline('all'), Colors.transparent);
+    expect(underline('7'), AppColors.blue);
+  });
+
   testWidgets('should_use_compact_refresh_indicator', (tester) async {
     await _pumpTheater(tester, categoryRepository: _GridCategoryRepository());
     final indicator = tester.widget<RefreshIndicator>(
@@ -234,7 +255,7 @@ void main() {
 
     expect(indicator.color, AppColors.blue);
     expect(indicator.strokeWidth, 2);
-    expect(indicator.edgeOffset, 110);
+    expect(indicator.edgeOffset, 52);
   });
 }
 

test/discover/theater_pages_test.dart

@@ -77,9 +77,10 @@ void main() {
     final top1 = tester.getRect(find.byKey(const Key('ranking-cover-1')));
     final top2 = tester.getRect(find.byKey(const Key('ranking-cover-2')));
     final top3 = tester.getRect(find.byKey(const Key('ranking-cover-3')));
-    expect(top1.size, const Size(120, 160));
+    expect(top1.width, greaterThan(top2.width));
-    expect(top2.size, const Size(92, 124));
+    expect(top3.width, closeTo(top2.width, 0.5));
-    expect(top3.size, const Size(92, 124));
+    expect(top2.left, closeTo(14, 0.5));
+    expect(top3.right, closeTo(376, 0.5));
     expect(top2.left, lessThan(top1.left));
     expect(top3.left, greaterThan(top1.right));
     expect(top1.bottom, closeTo(top2.bottom, 0.5));
@@ -95,6 +96,13 @@ void main() {
     expect(find.byKey(const Key('ranking-row-3')), findsOneWidget);
     expect(find.byKey(const Key('ranking-row-2')), findsNothing);
     expect(find.byKey(const Key('ranking-top-4')), findsOneWidget);
+    expect(
+      find.descendant(
+        of: find.byKey(const Key('ranking-row-3')),
+        matching: find.text('synopsis'),
+      ),
+      findsOneWidget,
+    );
   });
 
   testWidgets('should_truncate_podium_when_less_than_three', (tester) async {