fix(home): 修正封面角标与题材标签

lib/pages/following/following_grid_card.dart

@@ -5,7 +5,6 @@ import 'package:flutter/material.dart';
 import '../../core/formatting/count_format.dart';
 import '../../core/theme/app_colors.dart';
 import '../../core/theme/app_dimens.dart';
-import '../../core/widgets/drama_genre_ribbon.dart';
 import '../../core/widgets/remote_image.dart';
 
 class FollowingGridCard extends StatelessWidget {
@@ -95,12 +94,6 @@ class FollowingGridCard extends StatelessWidget {
                     ),
                   ),
                 ),
-                if (!editing)
-                  Positioned(
-                    top: 0,
-                    right: 0,
-                    child: DramaGenreRibbon(tags: tags, keyPrefix: dramaId),
-                  ),
                 if (editing)
                   Positioned(
                     top: -6,
@@ -135,6 +128,10 @@ class FollowingGridCard extends StatelessWidget {
               height: AppDimens.cardTitleLineHeight,
             ),
           ),
+          if (tags.isNotEmpty) ...[
+            const SizedBox(height: AppDimens.cardTitleTagGap),
+            _tags(),
+          ],
           const SizedBox(height: AppDimens.spaceXs),
           Text(
             subtitle,
@@ -164,4 +161,19 @@ class FollowingGridCard extends StatelessWidget {
       ),
     );
   }
+
+  Widget _tags() {
+    final visible = tags.take(3).toList(growable: false);
+    return Text(
+      visible.join(' | '),
+      key: Key('following-tags-$dramaId'),
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+      textAlign: TextAlign.left,
+      style: const TextStyle(
+        color: AppColors.textTertiary,
+        fontSize: AppDimens.cardTagFont,
+      ),
+    );
+  }
 }

lib/pages/home/widgets/home_feed_card.dart

@@ -6,7 +6,7 @@ import '../../../core/data/models/drama.dart';
 import '../../../core/formatting/count_format.dart';
 import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_dimens.dart';
-import '../../../core/widgets/drama_genre_ribbon.dart';
+import '../../../core/widgets/drama_cover_badge_ribbon.dart';
 import '../../../core/widgets/remote_image.dart';
 import '../../../l10n/app_localizations.dart';
 import 'home_drama_classification.dart';
@@ -63,6 +63,8 @@ class HomeFeedCard extends StatelessWidget {
                         height: AppDimens.cardTitleLineHeight,
                       ),
                     ),
+                    const SizedBox(height: AppDimens.cardTitleTagGap),
+                    _tags(),
                   ],
                 ),
               ),
@@ -92,15 +94,14 @@ class HomeFeedCard extends StatelessWidget {
             ),
             if (badge != null)
               Positioned(
-                top: AppDimens.spaceXs,
-                left: AppDimens.spaceXs,
-                child: _badgeChip(l10n, badge),
+                top: 0,
+                right: 0,
+                child: DramaCoverBadgeRibbon(
+                  label: _badgeLabel(l10n, badge),
+                  color: _badgeColor(badge),
+                  keyPrefix: '${drama.id}-${badge.name}',
+                ),
               ),
-            Positioned(
-              top: 0,
-              right: 0,
-              child: DramaGenreRibbon(tags: _cardTags(), keyPrefix: drama.id),
-            ),
             Positioned(
               left: AppDimens.spaceXs,
               bottom: AppDimens.spaceXs,
@@ -123,32 +124,20 @@ class HomeFeedCard extends StatelessWidget {
     return null;
   }
 
-  Widget _badgeChip(AppLocalizations l10n, HomeDramaBadge badge) {
-    final (label, color) = switch (badge) {
-      HomeDramaBadge.hot => (l10n.homeBadgeHot, AppColors.badgeHot),
-      HomeDramaBadge.newRelease => (l10n.homeBadgeNew, AppColors.badgeNew),
-      HomeDramaBadge.anime => (l10n.homeBadgeAnime, AppColors.badgeAnime),
+  String _badgeLabel(AppLocalizations l10n, HomeDramaBadge badge) {
+    return switch (badge) {
+      HomeDramaBadge.hot => l10n.homeBadgeHot,
+      HomeDramaBadge.newRelease => l10n.homeBadgeNew,
+      HomeDramaBadge.anime => l10n.homeBadgeAnime,
+    };
+  }
+
+  Color _badgeColor(HomeDramaBadge badge) {
+    return switch (badge) {
+      HomeDramaBadge.hot => AppColors.badgeHot,
+      HomeDramaBadge.newRelease => AppColors.badgeNew,
+      HomeDramaBadge.anime => AppColors.badgeAnime,
     };
-    return Container(
-      key: Key('home-feed-badge-${badge.name}-${drama.id}'),
-      padding: const EdgeInsets.symmetric(
-        horizontal: AppDimens.cardBadgeHorizontalPadding,
-        vertical: AppDimens.cardBadgeVerticalPadding,
-      ),
-      decoration: BoxDecoration(
-        color: color,
-        borderRadius: BorderRadius.circular(AppDimens.cardBadgeRadius),
-      ),
-      child: Text(
-        label,
-        style: const TextStyle(
-          color: AppColors.navSelected,
-          fontSize: AppDimens.cardBadgeFont,
-          fontWeight: FontWeight.w700,
-          letterSpacing: 0,
-        ),
-      ),
-    );
   }
 
   Widget _views() {
@@ -182,6 +171,23 @@ class HomeFeedCard extends StatelessWidget {
     );
   }
 
+  Widget _tags() {
+    final tags = _cardTags();
+    if (tags.isEmpty) return const SizedBox.shrink();
+    return Text(
+      tags.join(' | '),
+      key: Key('home-feed-tags-${drama.id}'),
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+      textAlign: TextAlign.left,
+      style: const TextStyle(
+        color: AppColors.textTertiary,
+        fontSize: AppDimens.cardTagFont,
+        letterSpacing: 0,
+      ),
+    );
+  }
+
   List<String> _cardTags() {
     final seen = <String>{};
     return [drama.genre, drama.category]

lib/pages/recommend/widgets/recommend_section_card.dart

@@ -6,7 +6,7 @@ import '../../../core/data/models/drama.dart';
 import '../../../core/formatting/count_format.dart';
 import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_dimens.dart';
-import '../../../core/widgets/drama_genre_ribbon.dart';
+import '../../../core/widgets/drama_cover_badge_ribbon.dart';
 import '../../../core/widgets/remote_image.dart';
 import '../../../l10n/app_localizations.dart';
 import '../../home/widgets/home_drama_classification.dart';
@@ -54,38 +54,14 @@ class RecommendSectionCard extends StatelessWidget {
                     ),
                     if (isHotDrama(drama))
                       Positioned(
-                        top: AppDimens.spaceXs,
-                        left: AppDimens.spaceXs,
-                        child: Container(
-                          key: Key('recommend-hot-$sectionKey-${drama.id}'),
-                          padding: const EdgeInsets.symmetric(
-                            horizontal: AppDimens.cardBadgeHorizontalPadding,
-                            vertical: AppDimens.cardBadgeVerticalPadding,
-                          ),
-                          decoration: BoxDecoration(
-                            color: AppColors.badgeHot,
-                            borderRadius: BorderRadius.circular(
-                              AppDimens.cardBadgeRadius,
-                            ),
-                          ),
-                          child: Text(
-                            l10n.homeBadgeHot,
-                            style: const TextStyle(
-                              color: AppColors.textPrimary,
-                              fontSize: AppDimens.cardBadgeFont,
-                              fontWeight: FontWeight.w700,
-                            ),
-                          ),
+                        top: 0,
+                        right: 0,
+                        child: DramaCoverBadgeRibbon(
+                          label: l10n.homeBadgeHot,
+                          color: AppColors.badgeHot,
+                          keyPrefix: '$sectionKey-${drama.id}-hot',
                         ),
                       ),
-                    Positioned(
-                      top: 0,
-                      right: 0,
-                      child: DramaGenreRibbon(
-                        tags: _cardTags(),
-                        keyPrefix: '$sectionKey-${drama.id}',
-                      ),
-                    ),
                   ],
                 ),
               ),
@@ -123,6 +99,8 @@ class RecommendSectionCard extends StatelessWidget {
                 height: AppDimens.cardTitleLineHeight,
               ),
             ),
+            const SizedBox(height: AppDimens.cardTitleTagGap),
+            _tags(),
           ],
         ),
       ),
@@ -138,4 +116,20 @@ class RecommendSectionCard extends StatelessWidget {
         .take(3)
         .toList(growable: false);
   }
+
+  Widget _tags() {
+    final tags = _cardTags();
+    if (tags.isEmpty) return const SizedBox.shrink();
+    return Text(
+      tags.join(' | '),
+      key: Key('recommend-tags-$sectionKey-${drama.id}'),
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+      textAlign: TextAlign.left,
+      style: const TextStyle(
+        color: AppColors.textTertiary,
+        fontSize: AppDimens.cardTagFont,
+      ),
+    );
+  }
 }