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

lib/core/theme/app_dimens.dart

@@ -92,13 +92,8 @@ abstract final class AppDimens {
   static const double cardGenreRibbonLeftInset = 8;
   static const double cardGenreRibbonMaxWidth = 86;
   static const double cardTagFont = 11;
-  static const double cardTagHeight = 18;
-  static const double cardTagRadius = 9;
   static const double cardTagHorizontalPadding = 6;
   static const double cardBadgeFont = 10;
-  static const double cardBadgeRadius = 3;
-  static const double cardBadgeHorizontalPadding = 6;
-  static const double cardBadgeVerticalPadding = 2;
   static const double cardCoverTitleGap = 6;
   static const double cardTitleTagGap = 6;
   static const double cardCoverAspectRatio = 5 / 6;

lib/core/widgets/drama_cover_badge_ribbon.dart

@@ -0,0 +1,69 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../theme/app_colors.dart';
+import '../theme/app_dimens.dart';
+
+/// 封面右上角的斜边状态角标。
+class DramaCoverBadgeRibbon extends StatelessWidget {
+  const DramaCoverBadgeRibbon({
+    super.key,
+    required this.label,
+    required this.color,
+    required this.keyPrefix,
+  });
+
+  final String label;
+  final Color color;
+  final String keyPrefix;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipPath(
+      key: Key('drama-cover-badge-ribbon-$keyPrefix'),
+      clipper: const _SlantedRibbonClipper(),
+      child: Container(
+        constraints: const BoxConstraints(
+          maxWidth: AppDimens.cardGenreRibbonMaxWidth,
+        ),
+        height: AppDimens.cardGenreRibbonHeight,
+        padding: const EdgeInsets.only(
+          left:
+              AppDimens.cardTagHorizontalPadding +
+              AppDimens.cardGenreRibbonLeftInset,
+          right: AppDimens.cardTagHorizontalPadding,
+        ),
+        alignment: Alignment.center,
+        color: color,
+        child: Text(
+          label,
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: const TextStyle(
+            color: AppColors.textPrimary,
+            fontSize: AppDimens.cardBadgeFont,
+            fontWeight: FontWeight.w600,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _SlantedRibbonClipper extends CustomClipper<Path> {
+  const _SlantedRibbonClipper();
+
+  @override
+  Path getClip(Size size) {
+    return Path()
+      ..moveTo(AppDimens.cardGenreRibbonLeftInset, 0)
+      ..lineTo(size.width, 0)
+      ..lineTo(size.width, size.height)
+      ..lineTo(0, size.height)
+      ..close();
+  }
+
+  @override
+  bool shouldReclip(_SlantedRibbonClipper oldClipper) => false;
+}

lib/core/widgets/drama_genre_ribbon.dart

@@ -1,88 +0,0 @@
-// Author: fruit.com.cn
-
-import 'package:flutter/material.dart';
-
-import '../theme/app_colors.dart';
-import '../theme/app_dimens.dart';
-
-const List<Color> _ribbonColors = [
-  AppColors.badgeHot,
-  AppColors.badgeNew,
-  AppColors.badgeAnime,
-];
-
-/// 封面右上角的斜边题材丝带。
-class DramaGenreRibbon extends StatelessWidget {
-  const DramaGenreRibbon({
-    super.key,
-    required this.tags,
-    required this.keyPrefix,
-  });
-
-  final List<String> tags;
-  final String keyPrefix;
-
-  @override
-  Widget build(BuildContext context) {
-    final visible = tags
-        .map((tag) => tag.trim())
-        .where((tag) => tag.isNotEmpty)
-        .take(3)
-        .toList(growable: false);
-    if (visible.isEmpty) return const SizedBox.shrink();
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.end,
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        for (final (index, tag) in visible.indexed) ...[
-          if (index > 0) const SizedBox(height: 2),
-          ClipPath(
-            key: Key('drama-genre-ribbon-$keyPrefix-$index'),
-            clipper: const _SlantedRibbonClipper(),
-            child: Container(
-              constraints: const BoxConstraints(
-                maxWidth: AppDimens.cardGenreRibbonMaxWidth,
-              ),
-              height: AppDimens.cardGenreRibbonHeight,
-              padding: const EdgeInsets.only(
-                left:
-                    AppDimens.cardTagHorizontalPadding +
-                    AppDimens.cardGenreRibbonLeftInset,
-                right: AppDimens.cardTagHorizontalPadding,
-              ),
-              alignment: Alignment.center,
-              color: _ribbonColors[index % _ribbonColors.length],
-              child: Text(
-                tag,
-                maxLines: 1,
-                overflow: TextOverflow.ellipsis,
-                style: const TextStyle(
-                  color: AppColors.textPrimary,
-                  fontSize: AppDimens.cardBadgeFont,
-                  fontWeight: FontWeight.w600,
-                ),
-              ),
-            ),
-          ),
-        ],
-      ],
-    );
-  }
-}
-
-class _SlantedRibbonClipper extends CustomClipper<Path> {
-  const _SlantedRibbonClipper();
-
-  @override
-  Path getClip(Size size) {
-    return Path()
-      ..moveTo(AppDimens.cardGenreRibbonLeftInset, 0)
-      ..lineTo(size.width, 0)
-      ..lineTo(size.width, size.height)
-      ..lineTo(0, size.height)
-      ..close();
-  }
-
-  @override
-  bool shouldReclip(_SlantedRibbonClipper oldClipper) => false;
-}