69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import { ReviewStatus, REVIEW_STATUS_LABELS } from '~/routes/rules-files';
|
|
|
|
interface StatusBadgeProps {
|
|
status: ReviewStatus;
|
|
issueCount?: number;
|
|
className?: string;
|
|
size?: 'default' | 'sm' | 'lg';
|
|
clickable?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
/**
|
|
* 文件评查状态标签组件
|
|
* 根据评查状态显示不同样式的标签
|
|
*/
|
|
export function StatusBadge({
|
|
status,
|
|
issueCount = 0,
|
|
className = '',
|
|
size,
|
|
clickable = false,
|
|
onClick
|
|
}: StatusBadgeProps) {
|
|
const statusMap: Record<ReviewStatus, string> = {
|
|
[ReviewStatus.PASS]: 'success',
|
|
[ReviewStatus.WARNING]: 'warning',
|
|
[ReviewStatus.FAIL]: 'error',
|
|
[ReviewStatus.PENDING]: 'processing'
|
|
};
|
|
|
|
const badgeType = statusMap[status] || 'default';
|
|
const sizeClass = size ? `status-badge-${size}` : '';
|
|
const clickableClass = clickable ? 'status-badge-clickable' : '';
|
|
|
|
// 根据状态选择图标
|
|
const getStatusIcon = () => {
|
|
switch (status) {
|
|
case ReviewStatus.PASS:
|
|
return <i className="ri-checkbox-circle-line"></i>;
|
|
case ReviewStatus.WARNING:
|
|
return <i className="ri-alert-line"></i>;
|
|
case ReviewStatus.FAIL:
|
|
return <i className="ri-close-circle-line"></i>;
|
|
case ReviewStatus.PENDING:
|
|
return <i className="ri-time-line"></i>;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const handleClick = () => {
|
|
if (clickable && onClick) {
|
|
onClick();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<span
|
|
className={`status-badge status-badge-${badgeType} status-badge-with-icon ${sizeClass} ${clickableClass} ${className}`}
|
|
onClick={handleClick}
|
|
role={clickable ? "button" : undefined}
|
|
tabIndex={clickable ? 0 : undefined}
|
|
>
|
|
{getStatusIcon()}
|
|
{REVIEW_STATUS_LABELS[status]}
|
|
{issueCount > 0 && ` (${issueCount})`}
|
|
</span>
|
|
);
|
|
}
|