7f238a3168
- Add Workspace domain (entity, repository, service, handler, DTO) - Add multi-tenant K8s client with tenant binding and quota management - Add K8s diagnostics client (instance diagnostics) - Add authorization middleware (authz package) - Restructure frontend to feature-based architecture (features/) - Add User Management page in configuration - Add AccessDenied page and route guards - Refactor shared components (form inputs, layout, UI) - Update Tailwind config for new design system - Add comprehensive documentation (docs/, tasks/, plans) - Improve cluster service with better kubeconfig handling - Add tests for crypto, config, helm client, tenant binding
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
/**
|
|
* 统一的 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-slate-100 text-slate-700 border-slate-200",
|
|
success: "bg-emerald-50 text-emerald-700 border-emerald-200",
|
|
warning: "bg-amber-50 text-amber-700 border-amber-200",
|
|
danger: "bg-red-50 text-red-700 border-red-200",
|
|
info: "bg-blue-50 text-blue-700 border-blue-200",
|
|
purple: "bg-violet-50 text-violet-700 border-violet-200",
|
|
gray: "bg-slate-100 text-slate-600 border-slate-200",
|
|
blue: "bg-blue-50 text-blue-700 border-blue-200",
|
|
secondary: "bg-slate-100 text-slate-700 border-slate-200",
|
|
};
|
|
|
|
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>
|
|
);
|
|
};
|