components/ui/badge.tsx

@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+/**
+ * 徽章变体，对应 DESIGN.md 的 badge-* 组件：
+ * - tag      → badge-tag（文章标签，蓝色 + 半透明底）
+ * - type     → badge-type（代码风格的类型标记）
+ * - discount → badge-discount（品牌绿强调）
+ * - required → badge-required（错误红，大写微标签）
+ * - neutral  → 中性灰，用于日期 / 阅读时长等元信息
+ */
+export const badgeVariants = cva(
+	"inline-flex items-center gap-[4px] whitespace-nowrap rounded-sm leading-none",
+	{
+		variants: {
+			variant: {
+				tag: "bg-brand-tag/15 text-brand-tag text-caption font-semibold px-xs py-[3px]",
+				type: "bg-surface text-steel font-mono text-code-sm px-xs py-[3px]",
+				discount: "bg-brand-green text-primary text-caption font-semibold rounded-full px-xs py-[3px]",
+				required:
+					"bg-brand-error text-on-dark text-micro-uppercase font-semibold px-[6px] py-[3px]",
+				neutral: "bg-surface text-steel text-caption px-xs py-[3px]",
+			},
+		},
+		defaultVariants: {
+			variant: "neutral",
+		},
+	},
+);
+
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
+	VariantProps<typeof badgeVariants>;
+
+/** 徽章 / 标签 */
+export function Badge({ className, variant, ...props }: BadgeProps) {
+	return (
+		<span className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
+}