ocdp v1

frontend/src/shared/components/ui/Badge.tsx

@@ -0,0 +1,59 @@
+/**
+ * 统一的 Badge 组件
+ * 用于状态标签、标记等
+ */
+import React from "react";
+import type { LucideIcon } from "lucide-react";
+
+export type BadgeVariant = "default" | "success" | "warning" | "danger" | "info" | "purple" | "gray" | "blue" | "secondary";
+export type BadgeSize = "sm" | "md" | "lg";
+
+export interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  icon?: LucideIcon;
+  className?: string;
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  default: "bg-blue-600/20 text-blue-300 border-blue-500/30",
+  success: "bg-green-600/20 text-green-300 border-green-500/30",
+  warning: "bg-yellow-600/20 text-yellow-300 border-yellow-500/30",
+  danger: "bg-red-600/20 text-red-300 border-red-500/30",
+  info: "bg-blue-600/20 text-blue-300 border-blue-500/30",
+  purple: "bg-purple-600/20 text-purple-300 border-purple-500/30",
+  gray: "bg-gray-600/20 text-gray-300 border-gray-500/30",
+  blue: "bg-blue-600/20 text-blue-300 border-blue-500/30",
+  secondary: "bg-gray-700/30 text-gray-200 border-gray-500/40",
+};
+
+const sizeStyles: Record<BadgeSize, { badge: string; icon: string }> = {
+  sm: { badge: "px-2 py-0.5 text-xs", icon: "w-3 h-3" },
+  md: { badge: "px-3 py-1 text-sm", icon: "w-4 h-4" },
+  lg: { badge: "px-4 py-1.5 text-base", icon: "w-5 h-5" },
+};
+
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  variant = "default",
+  size = "md",
+  icon: Icon,
+  className = "",
+}) => {
+  const baseStyles = "inline-flex items-center gap-1.5 font-medium rounded-full border";
+
+  const combinedClassName = `
+    ${baseStyles}
+    ${variantStyles[variant]}
+    ${sizeStyles[size].badge}
+    ${className}
+  `.trim();
+
+  return (
+    <span className={combinedClassName}>
+      {Icon && <Icon className={sizeStyles[size].icon} />}
+      {children}
+    </span>
+  );
+};