c4d3433cc9
- Add UI components: confirm-delete-dialog, empty-table-row, list-pagination, pagination, status-badge - Add form-fields directory for reusable form field components - Add hooks: use-action-mutation, use-action-query for server action integration - Add action-utils lib for action state helpers - Update a11y components, charts, global-search, onboarding-gate, question components - Update UI components: chip-nav, filter-bar, page-header, stat-card, stat-item, switch, table - Update hooks: use-action-with-toast, use-aria-live, use-debounce, use-local-storage, use-media-query, use-permission - Update lib: a11y, ai, audit-logger, auth-guard, bcrypt-utils, change-logger, download, excel, file-storage, http-utils, login-logger, password-policy, password-security-service, permissions, rate-limit, role-utils, search-params, session, storage-provider - Update types: action-state, permissions - Update i18n messages (en, zh-CN) for dashboard, diagnostic, grades, lesson-preparation, settings
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
"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<T extends string> = Record<T, BadgeProps["variant"]>
|
||
|
||
/**
|
||
* 状态到展示文本的映射表类型（可选）。
|
||
* 未提供时，直接展示 status 原值。
|
||
*/
|
||
export type StatusLabelMap<T extends string> = Partial<Record<T, string>>
|
||
|
||
/**
|
||
* 状态到附加 className 的映射表类型（可选）。
|
||
* 用于在 variant 之外追加自定义颜色（如 `bg-green-600 hover:bg-green-700`）。
|
||
*/
|
||
export type StatusClassNameMap<T extends string> = Partial<Record<T, string>>
|
||
|
||
export interface StatusBadgeProps<T extends string> {
|
||
/** 当前状态值 */
|
||
status: T
|
||
/** 状态 → Badge variant 映射（必填） */
|
||
variantMap: StatusVariantMap<T>
|
||
/** 状态 → 展示文本映射（可选，缺省展示 status 原值） */
|
||
labelMap?: StatusLabelMap<T>
|
||
/** 状态 → 附加 className 映射（可选） */
|
||
classNameMap?: StatusClassNameMap<T>
|
||
/** 透传到 Badge 的根 className */
|
||
className?: string
|
||
/** 是否将展示文本首字母大写（默认 true） */
|
||
capitalize?: boolean
|
||
}
|
||
|
||
/**
|
||
* 通用状态徽章组件。
|
||
*
|
||
* 用于替代各模块中重复的 `switch (status) { case ...: return <Badge variant="..."> }` 模式。
|
||
* 业务模块只需在自身 types.ts 中维护 `STATUS_VARIANT` / `STATUS_LABEL` 常量，
|
||
* 传入本组件即可，避免颜色映射不一致与代码复制粘贴。
|
||
*
|
||
* @example
|
||
* const STATUS_VARIANT = { draft: "secondary", published: "default", archived: "outline" } as const
|
||
* <StatusBadge status="published" variantMap={STATUS_VARIANT} />
|
||
*/
|
||
export function StatusBadge<T extends string>({
|
||
status,
|
||
variantMap,
|
||
labelMap,
|
||
classNameMap,
|
||
className,
|
||
capitalize = true,
|
||
}: StatusBadgeProps<T>) {
|
||
const variant = variantMap[status] ?? "secondary"
|
||
const label = labelMap?.[status] ?? status
|
||
const statusClassName = classNameMap?.[status]
|
||
return (
|
||
<Badge
|
||
variant={variant}
|
||
className={cn(capitalize && "capitalize", className, statusClassName)}
|
||
>
|
||
{label}
|
||
</Badge>
|
||
)
|
||
}
|