feat: 更新版本升级模态框和状态徽章组件，支持通道切换和点击事件

2026-10-06 15:46:37 +08:00 · 2026-03-12 12:51:32 +08:00
parent 6b607be6ae
commit 5a73a13028
3 changed files with 164 additions and 135 deletions
@@ -1,36 +1,51 @@
-import { cn } from '@/lib/utils/cn';
-
-const variantClasses = {
-  success:
-    'border-[var(--status-success-border)] bg-[var(--status-success-soft)] text-[var(--status-success-foreground)]',
-  warning:
-    'border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] text-[var(--status-warning-foreground)]',
-  danger:
-    'border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]',
-  info:
-    'border-[var(--status-info-border)] bg-[var(--status-info-soft)] text-[var(--status-info-foreground)]',
-} as const;
-
-interface StatusBadgeProps {
-  label: string;
-  variant?: keyof typeof variantClasses;
-  className?: string;
-}
-
-export function StatusBadge({
-  label,
-  variant = 'info',
-  className,
-}: StatusBadgeProps) {
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium tracking-wide',
-        variantClasses[variant],
-        className,
-      )}
-    >
-      {label}
-    </span>
-  );
-}
+import { cn } from '@/lib/utils/cn';
+
+const variantClasses = {
+  success:
+    'border-[var(--status-success-border)] bg-[var(--status-success-soft)] text-[var(--status-success-foreground)]',
+  warning:
+    'border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] text-[var(--status-warning-foreground)]',
+  danger:
+    'border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]',
+  info: 'border-[var(--status-info-border)] bg-[var(--status-info-soft)] text-[var(--status-info-foreground)]',
+} as const;
+
+interface StatusBadgeProps {
+  label: string;
+  variant?: keyof typeof variantClasses;
+  className?: string;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+export function StatusBadge({
+  label,
+  variant = 'info',
+  className,
+  onClick,
+  disabled = false,
+}: StatusBadgeProps) {
+  const badgeClassName = cn(
+    'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium tracking-wide',
+    variantClasses[variant],
+    onClick
+      ? 'cursor-pointer transition hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-60'
+      : undefined,
+    className,
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={badgeClassName}
+      >
+        {label}
+      </button>
+    );
+  }
+
+  return <span className={badgeClassName}>{label}</span>;
+}