style(recommend): 重排全部短剧筛选与网格

lib/pages/recommend/widgets/all_dramas_filter_grid.dart

@@ -49,8 +49,8 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
       builder: (context, constraints) {
         final itemWidth =
             (constraints.maxWidth -
-                AppDimens.feedPageHorizontal * 2 -
-                AppDimens.homeGridGap * 2) /
+                AppDimens.allDramasHorizontal * 2 -
+                AppDimens.allDramasGridGap * 2) /
             3;
         final itemExtent =
             itemWidth / AppDimens.cardCoverAspectRatio +
@@ -85,14 +85,14 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
                 else
                   SliverPadding(
                     padding: const EdgeInsets.symmetric(
-                      horizontal: AppDimens.feedPageHorizontal,
+                      horizontal: AppDimens.allDramasHorizontal,
                     ),
                     sliver: SliverGrid(
                       key: const Key('all-dramas-grid'),
                       gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                         crossAxisCount: 3,
-                        crossAxisSpacing: AppDimens.homeGridGap,
-                        mainAxisSpacing: AppDimens.homeGridRowGap,
+                        crossAxisSpacing: AppDimens.allDramasGridGap,
+                        mainAxisSpacing: AppDimens.allDramasGridRowGap,
                         mainAxisExtent: itemExtent,
                       ),
                       delegate: SliverChildBuilderDelegate(
@@ -131,9 +131,9 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
     return Padding(
       padding: const EdgeInsets.fromLTRB(
         AppDimens.feedPageHorizontal,
-        AppDimens.spaceSm,
+        0,
         AppDimens.feedPageHorizontal,
-        AppDimens.spaceMd,
+        AppDimens.allDramasFilterToGridGap,
       ),
       child: Column(
         key: const Key('all-dramas-filters'),
@@ -160,38 +160,7 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
             onSelected: (value) => setState(() => _audio = value),
           ),
           _genreRow(2, genres, l10n),
-          Row(
-            key: const Key('all-filter-row-3'),
-            children: [
-              Expanded(
-                child: Row(
-                  children: [
-                    _chip(
-                      key: const Key('all-sort-hot'),
-                      label: l10n.hot,
-                      selected: !_newest,
-                      onTap: () => setState(() => _newest = false),
-                    ),
-                    const SizedBox(width: AppDimens.spaceSm),
-                    _chip(
-                      key: const Key('all-sort-new'),
-                      label: l10n.newest,
-                      selected: _newest,
-                      onTap: () => setState(() => _newest = true),
-                    ),
-                  ],
-                ),
-              ),
-              IconButton(
-                key: const Key('all-dramas-filter-page'),
-                tooltip: l10n.filter,
-                onPressed: widget.onOpenFilter,
-                color: AppColors.textPrimary,
-                iconSize: AppDimens.tapTarget / 2,
-                icon: const Icon(Icons.filter_list_rounded),
-              ),
-            ],
-          ),
+          _sortRow(l10n),
         ],
       ),
     );
@@ -205,21 +174,26 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
   }) {
     return Padding(
       key: Key('all-filter-row-$row'),
-      padding: const EdgeInsets.only(bottom: AppDimens.spaceSm),
-      child: SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        child: Row(
-          children: [
-            for (final option in options) ...[
-              _chip(
-                key: Key('all-filter-${option.id}'),
-                label: option.label,
-                selected: selected == option.id,
-                onTap: () => onSelected(option.id),
-              ),
-              const SizedBox(width: AppDimens.spaceSm),
+      padding: const EdgeInsets.only(bottom: AppDimens.filterRowGap),
+      child: SizedBox(
+        height: AppDimens.filterChipHeight,
+        child: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              for (var index = 0; index < options.length; index++) ...[
+                _chip(
+                  key: Key('all-filter-${options[index].id}'),
+                  label: options[index].label,
+                  selected: selected == options[index].id,
+                  onTap: () => onSelected(options[index].id),
+                ),
+                if (index < options.length - 1)
+                  const SizedBox(width: AppDimens.filterItemGap),
+              ],
             ],
-          ],
+          ),
         ),
       ),
     );
@@ -254,18 +228,93 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
       borderRadius: BorderRadius.circular(AppDimens.filterChipRadius),
       child: Container(
         height: AppDimens.filterChipHeight,
-        padding: const EdgeInsets.symmetric(horizontal: AppDimens.spaceMd),
+        padding: const EdgeInsets.symmetric(
+          horizontal: AppDimens.filterChipHorizontalPadding,
+        ),
         alignment: Alignment.center,
         decoration: BoxDecoration(
-          color: selected ? AppColors.contentSurface : AppColors.transparent,
+          color: selected
+              ? AppColors.filterChipSelected
+              : AppColors.transparent,
           borderRadius: BorderRadius.circular(AppDimens.filterChipRadius),
         ),
         child: Text(
           label,
           style: TextStyle(
-            color: selected ? AppColors.textPrimary : AppColors.textTertiary,
+            color: selected ? AppColors.textPrimary : AppColors.textTabInactive,
             fontSize: AppDimens.filterChipFont,
-            fontWeight: selected ? FontWeight.w700 : FontWeight.w400,
+            fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
+            height: 1,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _sortRow(AppLocalizations l10n) {
+    return SizedBox(
+      key: const Key('all-filter-row-3'),
+      height: AppDimens.filterChipHeight,
+      child: Row(
+        children: [
+          _sortOption(
+            key: const Key('all-sort-hot'),
+            label: l10n.hot,
+            selected: !_newest,
+            onTap: () => setState(() => _newest = false),
+          ),
+          const SizedBox(width: AppDimens.filterItemGap),
+          _sortOption(
+            key: const Key('all-sort-new'),
+            label: l10n.newest,
+            selected: _newest,
+            onTap: () => setState(() => _newest = true),
+          ),
+          const Spacer(),
+          SizedBox.square(
+            dimension: AppDimens.allDramasFilterIcon,
+            child: IconButton(
+              key: const Key('all-dramas-filter-page'),
+              tooltip: l10n.filter,
+              padding: EdgeInsets.zero,
+              constraints: const BoxConstraints.tightFor(
+                width: AppDimens.allDramasFilterIcon,
+                height: AppDimens.allDramasFilterIcon,
+              ),
+              onPressed: widget.onOpenFilter,
+              color: AppColors.textPrimary,
+              iconSize: AppDimens.allDramasFilterIcon,
+              icon: const Icon(Icons.filter_list_rounded),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  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: Center(
+          child: Text(
+            label,
+            style: TextStyle(
+              color: selected
+                  ? AppColors.textPrimary
+                  : AppColors.textTabInactive,
+              fontSize: AppDimens.filterChipFont,
+              fontWeight: selected ? FontWeight.w700 : FontWeight.w400,
+              height: 1,
+            ),
           ),
         ),
       ),
@@ -273,7 +322,6 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
   }
 
   List<({String id, String label})> _availableGenres(AppLocalizations l10n) {
-    final source = widget.feedController.dramas;
     final definitions = [
       (id: 'reversal', label: l10n.reversalFilter, terms: _reversalTerms),
       (id: 'uplifting', label: l10n.homeTagUplifting, terms: <String>[]),
@@ -282,11 +330,6 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
       (id: 'angst', label: l10n.homeTagAngst, terms: <String>[]),
     ];
     return definitions
-        .where(
-          (definition) => source.any(
-            (drama) => _matchesGenre(drama, definition.id, definition.terms),
-          ),
-        )
         .map((definition) => (id: definition.id, label: definition.label))
         .toList(growable: false);
   }