style(client): 对齐短剧列表字号与间距

lib/pages/recommend/widgets/recommend_section_card.dart

@@ -10,6 +10,8 @@ import '../../../core/widgets/remote_image.dart';
 import '../../../l10n/app_localizations.dart';
 import '../../home/widgets/home_drama_classification.dart';
 
+final RegExp _tagSplitter = RegExp(r'[,/、·]');
+
 class RecommendSectionCard extends StatelessWidget {
   const RecommendSectionCard({
     super.key,
@@ -26,7 +28,7 @@ class RecommendSectionCard extends StatelessWidget {
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     return SizedBox(
-      width: 122,
+      width: AppDimens.recommendCardWidth,
       child: InkWell(
         key: Key('recommend-card-$sectionKey-${drama.id}'),
         borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
@@ -38,7 +40,7 @@ class RecommendSectionCard extends StatelessWidget {
             ClipRRect(
               borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
               child: AspectRatio(
-                aspectRatio: 3 / 4,
+                aspectRatio: AppDimens.cardCoverAspectRatio,
                 child: Stack(
                   fit: StackFit.expand,
                   children: [
@@ -55,20 +57,20 @@ class RecommendSectionCard extends StatelessWidget {
                         child: Container(
                           key: Key('recommend-hot-$sectionKey-${drama.id}'),
                           padding: const EdgeInsets.symmetric(
-                            horizontal: 6,
-                            vertical: 2,
+                            horizontal: AppDimens.cardBadgeHorizontalPadding,
+                            vertical: AppDimens.cardBadgeVerticalPadding,
                           ),
                           decoration: BoxDecoration(
                             color: AppColors.badgeHot,
                             borderRadius: BorderRadius.circular(
-                              AppDimens.chipRadius,
+                              AppDimens.cardBadgeRadius,
                             ),
                           ),
                           child: Text(
                             l10n.homeBadgeHot,
                             style: const TextStyle(
                               color: AppColors.textPrimary,
-                              fontSize: AppDimens.homeCardBadge,
+                              fontSize: AppDimens.cardBadgeFont,
                               fontWeight: FontWeight.w700,
                             ),
                           ),
@@ -78,19 +80,20 @@ class RecommendSectionCard extends StatelessWidget {
                 ),
               ),
             ),
-            const SizedBox(height: AppDimens.spaceXs),
+            const SizedBox(height: AppDimens.cardCoverTitleGap),
             Row(
+              key: Key('recommend-views-$sectionKey-${drama.id}'),
               children: [
                 const Icon(
                   Icons.play_arrow_rounded,
-                  color: AppColors.textSecondary,
-                  size: AppDimens.homeCardMeta,
+                  color: AppColors.textPrimary,
+                  size: AppDimens.cardViewsIcon,
                 ),
                 Text(
                   formatInteractionCount(drama.viewCount),
                   style: const TextStyle(
-                    color: AppColors.textSecondary,
-                    fontSize: AppDimens.homeCardMeta,
+                    color: AppColors.textPrimary,
+                    fontSize: AppDimens.cardViewsFont,
                   ),
                 ),
               ],
@@ -103,14 +106,65 @@ class RecommendSectionCard extends StatelessWidget {
               overflow: TextOverflow.ellipsis,
               style: const TextStyle(
                 color: AppColors.textPrimary,
-                fontSize: AppDimens.homeCardTitle,
-                fontWeight: FontWeight.w600,
-                height: 1.25,
+                fontSize: AppDimens.cardTitleFont,
+                fontWeight: FontWeight.w500,
+                height: AppDimens.cardTitleLineHeight,
               ),
             ),
+            if (_cardTags().isNotEmpty) ...[
+              const SizedBox(height: AppDimens.cardTitleTagGap),
+              _tags(),
+            ],
           ],
         ),
       ),
     );
   }
+
+  Widget _tags() {
+    final tags = _cardTags();
+    return Row(
+      children: [
+        for (final (index, tag) in tags.indexed)
+          Flexible(
+            child: Padding(
+              padding: EdgeInsets.only(
+                right: index == tags.length - 1 ? 0 : AppDimens.spaceXs,
+              ),
+              child: Container(
+                key: Key('recommend-tag-$sectionKey-${drama.id}-$index'),
+                height: AppDimens.cardTagHeight,
+                alignment: Alignment.center,
+                padding: const EdgeInsets.symmetric(
+                  horizontal: AppDimens.cardTagHorizontalPadding,
+                ),
+                decoration: BoxDecoration(
+                  color: AppColors.contentSurface,
+                  borderRadius: BorderRadius.circular(AppDimens.cardTagRadius),
+                ),
+                child: Text(
+                  tag,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                    color: AppColors.textTertiary,
+                    fontSize: AppDimens.cardTagFont,
+                  ),
+                ),
+              ),
+            ),
+          ),
+      ],
+    );
+  }
+
+  List<String> _cardTags() {
+    final seen = <String>{};
+    return [drama.genre, drama.category]
+        .expand((value) => value.split(_tagSplitter))
+        .map((value) => value.trim())
+        .where((value) => value.isNotEmpty && seen.add(value))
+        .take(2)
+        .toList(growable: false);
+  }
 }