merge: 按截图重做全部短剧筛选区

docs/plans/PROGRESS.md

@@ -1214,3 +1214,5 @@ $ flutter test
 - 第三行筛选完整展示，卡片继续复用首页组件；`flutter analyze`：No issues found。
 - 筛选项字号提升到 15、圆角 15；筛选区移出滚动容器并固定吸顶，下拉刷新仅作用于网格。
 - 四行首项文字统一到同一 x；行高 30、行距 6、项目距 12，第 4 行保持弹性空白后固定筛选图标。
+- 按最新截图改为 16sp、32 高、10 行距、16 项距；选中态为 `#21090E` 底配 `#FF4D6A` 粉字。
+- 第 4 行复用选中胶囊样式，右侧改为 44×44 圆形深灰按钮和 22 三横线图标；`flutter analyze` 无问题。

lib/core/theme/app_colors.dart

@@ -77,7 +77,11 @@ abstract final class AppColors {
   static const contentSurface = Color(0xFF1C1C1E);
   static const contentChip = Color(0xFF2C2C2E);
   static const contentBorder = Color(0x1AFFFFFF);
-  static const filterChipSelected = Color(0xFF4A1E1E);
+  static const filterChipSelected = Color(0xFF21090E);
+  static const filterChipTextSelected = Color(0xFFFF4D6A);
+  static const filterChipTextInactive = Color(0xFF8A8A8A);
+  static const filterMenuButton = Color(0xFF2A2A2A);
+  static const filterMenuIcon = Color(0xFFBDBDBD);
 
   /// 「我的」页卡片与描边。
   static const mineCard = Color(0xFF16161A);

lib/core/theme/app_dimens.dart

@@ -137,17 +137,19 @@ abstract final class AppDimens {
   static const double recommendCardWidth = 122;
 
   /// 全部短剧筛选与追剧双列。
-  static const double filterChipFont = 15;
+  static const double filterChipFont = 16;
-  static const double filterChipHeight = 30;
+  static const double filterChipHeight = 32;
-  static const double filterChipRadius = 15;
+  static const double filterChipRadius = 16;
-  static const double filterChipHorizontalPadding = 12;
+  static const double filterChipHorizontalPadding = 14;
-  static const double filterRowGap = 6;
+  static const double filterRowGap = 10;
-  static const double filterItemGap = 12;
+  static const double filterItemGap = 16;
   static const double allDramasHorizontal = 12;
   static const double allDramasGridGap = 6;
   static const double allDramasGridRowGap = 12;
   static const double allDramasFilterToGridGap = 12;
-  static const double allDramasFilterIcon = 26;
+  static const double allDramasFilterIcon = 22;
+  static const double allDramasFilterButton = 44;
+  static const double allDramasFilterRight = 12;
   static const double followingTabFont = 16;
   static const double followingGridAspectRatio = 0.5;
 

lib/pages/recommend/widgets/all_dramas_filter_grid.dart

@@ -144,7 +144,7 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
       padding: const EdgeInsets.fromLTRB(
         AppDimens.feedPageHorizontal,
         0,
-        AppDimens.feedPageHorizontal,
+        AppDimens.allDramasFilterRight,
         AppDimens.allDramasFilterToGridGap,
       ),
       child: Column(
@@ -254,7 +254,9 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
         child: Text(
           label,
           style: TextStyle(
-            color: selected ? AppColors.textPrimary : AppColors.textTabInactive,
+            color: selected
+                ? AppColors.filterChipTextSelected
+                : AppColors.filterChipTextInactive,
             fontSize: AppDimens.filterChipFont,
             fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
             height: 1,
@@ -267,39 +269,41 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
   Widget _sortRow(AppLocalizations l10n) {
     return SizedBox(
       key: const Key('all-filter-row-3'),
-      height: AppDimens.filterChipHeight,
+      height: AppDimens.allDramasFilterButton,
       child: Row(
         mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
-          _sortOption(
+          _chip(
             key: const Key('all-sort-hot'),
             label: l10n.hot,
             selected: !_newest,
             onTap: () => setState(() => _newest = false),
           ),
           const SizedBox(width: AppDimens.filterItemGap),
-          _sortOption(
+          _chip(
             key: const Key('all-sort-new'),
             label: l10n.newest,
             selected: _newest,
             onTap: () => setState(() => _newest = true),
           ),
           const Spacer(),
-          SizedBox.square(
+          Material(
-            dimension: AppDimens.allDramasFilterIcon,
+            key: const Key('all-dramas-filter-page-button'),
-            child: IconButton(
+            color: AppColors.filterMenuButton,
+            shape: const CircleBorder(),
+            child: InkWell(
               key: const Key('all-dramas-filter-page'),
-              tooltip: l10n.filter,
+              customBorder: const CircleBorder(),
-              padding: EdgeInsets.zero,
+              onTap: widget.onOpenFilter,
-              constraints: const BoxConstraints.tightFor(
+              child: const SizedBox.square(
-                width: AppDimens.allDramasFilterIcon,
+                dimension: AppDimens.allDramasFilterButton,
-                height: AppDimens.allDramasFilterIcon,
+                child: Icon(
+                  Icons.filter_list_rounded,
+                  size: AppDimens.allDramasFilterIcon,
+                  color: AppColors.filterMenuIcon,
+                ),
               ),
-              onPressed: widget.onOpenFilter,
-              color: AppColors.textPrimary,
-              iconSize: AppDimens.allDramasFilterIcon,
-              icon: const Icon(Icons.filter_list_rounded),
             ),
           ),
         ],
@@ -307,39 +311,6 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
     );
   }
 
-  Widget _sortOption({
-    required Key key,
-    required String label,
-    required bool selected,
-    required VoidCallback onTap,
-  }) {
-    return GestureDetector(
-      key: key,
-      behavior: HitTestBehavior.opaque,
-      onTap: onTap,
-      child: SizedBox(
-        height: AppDimens.filterChipHeight,
-        child: Container(
-          padding: const EdgeInsets.symmetric(
-            horizontal: AppDimens.filterChipHorizontalPadding,
-          ),
-          alignment: Alignment.center,
-          child: Text(
-            label,
-            style: TextStyle(
-              color: selected
-                  ? AppColors.textPrimary
-                  : AppColors.textTabInactive,
-              fontSize: AppDimens.filterChipFont,
-              fontWeight: selected ? FontWeight.w700 : FontWeight.w400,
-              height: 1,
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-
   List<({String id, String label})> _availableGenres(AppLocalizations l10n) {
     final definitions = [
       (id: 'reversal', label: l10n.reversalFilter, terms: _reversalTerms),

test/recommend/recommend_sections_test.dart

@@ -260,7 +260,7 @@ void main() {
     for (var row = 0; row < 4; row++) {
       final rowRect = tester.getRect(find.byKey(Key('all-filter-row-$row')));
       expect(rowRect.left, closeTo(pageRect.left + 14, 0.1));
-      expect(rowRect.right, closeTo(pageRect.right - 14, 0.1));
+      expect(rowRect.right, closeTo(pageRect.right - 12, 0.1));
     }
     final firstTexts = [
       find.descendant(
@@ -301,7 +301,7 @@ void main() {
     }
     expect(
       tester.getSize(find.byKey(const Key('all-filter-row-3'))).height,
-      AppDimens.filterChipHeight,
+      AppDimens.allDramasFilterButton,
     );
     expect(
       tester.getRect(find.byKey(const Key('all-dramas-scroll'))).top -
@@ -335,6 +335,7 @@ void main() {
       closeTo(fixedFilterTop, 0.1),
     );
     expect(find.byKey(const Key('all-filter-local')), findsOneWidget);
+    expect(_textStyle(tester, 'Local').color, AppColors.filterChipTextInactive);
     expect(find.byKey(const Key('all-filter-subtitles')), findsOneWidget);
     for (final key in [
       'all-filter-reversal',
@@ -376,12 +377,17 @@ void main() {
         AppDimens.filterItemGap,
       );
     }
+    expect(
+      tester.getTopLeft(find.byKey(const Key('all-sort-new'))).dx -
+          tester.getTopRight(find.byKey(const Key('all-sort-hot'))).dx,
+      AppDimens.filterItemGap,
+    );
     await tester.tap(find.byKey(const Key('all-filter-local')));
     await tester.pumpAndSettle();
     expect(find.byKey(const Key('all-dramas-empty')), findsOneWidget);
     expect(_textStyle(tester, 'Local').fontWeight, FontWeight.w600);
     expect(_textStyle(tester, 'Local').fontSize, AppDimens.filterChipFont);
-    expect(_textStyle(tester, 'Local').color, AppColors.textPrimary);
+    expect(_textStyle(tester, 'Local').color, AppColors.filterChipTextSelected);
     final selectedChip = tester.widget<Container>(
       find
           .descendant(
@@ -402,8 +408,9 @@ void main() {
     await tester.pumpAndSettle();
     await tester.tap(find.byKey(const Key('all-sort-new')));
     await tester.pump();
-    expect(_textStyle(tester, 'New').fontWeight, FontWeight.w700);
+    expect(_textStyle(tester, 'New').fontWeight, FontWeight.w600);
     expect(_textStyle(tester, 'New').fontSize, AppDimens.filterChipFont);
+    expect(_textStyle(tester, 'New').color, AppColors.filterChipTextSelected);
     expect(
       tester.getSize(find.byKey(const Key('all-sort-new'))).height,
       AppDimens.filterChipHeight,
@@ -421,7 +428,7 @@ void main() {
     final filterButton = find.byKey(const Key('all-dramas-filter-page'));
     expect(
       tester.getSize(filterButton),
-      const Size.square(AppDimens.allDramasFilterIcon),
+      const Size.square(AppDimens.allDramasFilterButton),
     );
     expect(
       tester.getRect(filterButton).right,
@@ -430,6 +437,19 @@ void main() {
         0.1,
       ),
     );
+    final filterMaterial = tester.widget<Material>(
+      find.byKey(const Key('all-dramas-filter-page-button')),
+    );
+    expect(filterMaterial.color, AppColors.filterMenuButton);
+    expect(filterMaterial.shape, const CircleBorder());
+    final filterIcon = tester.widget<Icon>(
+      find.descendant(
+        of: filterButton,
+        matching: find.byIcon(Icons.filter_list_rounded),
+      ),
+    );
+    expect(filterIcon.size, AppDimens.allDramasFilterIcon);
+    expect(filterIcon.color, AppColors.filterMenuIcon);
 
     await tester.tap(find.byKey(const Key('recommend-tab-playlist')));
     await tester.pumpAndSettle();