"use client" import * as React from "react" import { cn } from "@/shared/lib/utils" import { Badge, type BadgeProps } from "@/shared/components/ui/badge" /** * 状态到 Badge variant 的映射表类型。 * 业务模块可在自身 types.ts 中定义具体映射,并传入本组件。 */ export type StatusVariantMap = Record /** * 状态到展示文本的映射表类型(可选)。 * 未提供时,直接展示 status 原值。 */ export type StatusLabelMap = Partial> /** * 状态到附加 className 的映射表类型(可选)。 * 用于在 variant 之外追加自定义颜色(如 `bg-green-600 hover:bg-green-700`)。 */ export type StatusClassNameMap = Partial> export interface StatusBadgeProps { /** 当前状态值 */ status: T /** 状态 → Badge variant 映射(必填) */ variantMap: StatusVariantMap /** 状态 → 展示文本映射(可选,缺省展示 status 原值) */ labelMap?: StatusLabelMap /** 状态 → 附加 className 映射(可选) */ classNameMap?: StatusClassNameMap /** 透传到 Badge 的根 className */ className?: string /** 是否将展示文本首字母大写(默认 true) */ capitalize?: boolean } /** * 通用状态徽章组件。 * * 用于替代各模块中重复的 `switch (status) { case ...: return }` 模式。 * 业务模块只需在自身 types.ts 中维护 `STATUS_VARIANT` / `STATUS_LABEL` 常量, * 传入本组件即可,避免颜色映射不一致与代码复制粘贴。 * * @example * const STATUS_VARIANT = { draft: "secondary", published: "default", archived: "outline" } as const * */ export function StatusBadge({ status, variantMap, labelMap, classNameMap, className, capitalize = true, }: StatusBadgeProps) { const variant = variantMap[status] ?? "secondary" const label = labelMap?.[status] ?? status const statusClassName = classNameMap?.[status] return ( {label} ) }