45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
/* 封装了状态的点，用于显示状态*/
|
|
// 状态类型
|
|
type StatusType = 'success' | 'error' | 'warning' | 'default' | 'processing';
|
|
|
|
interface StatusDotProps {
|
|
status: StatusType | boolean;
|
|
text?: string;
|
|
className?: string;
|
|
size?: 'default' | 'sm' | 'lg';
|
|
pulse?: boolean;
|
|
align?: 'left' | 'center' | 'right';
|
|
}
|
|
|
|
export function StatusDot({
|
|
status,
|
|
text,
|
|
className = '',
|
|
size = 'default',
|
|
pulse = false,
|
|
align = 'left'
|
|
}: StatusDotProps) {
|
|
// 如果status是布尔值，则转换为对应的状态类型
|
|
const statusType = typeof status === 'boolean'
|
|
? (status ? 'success' : 'default')
|
|
: status;
|
|
|
|
// 如果没有提供文本，则根据状态类型提供默认文本
|
|
const statusText = text ?? (
|
|
statusType === 'success' ? '启用' :
|
|
statusType === 'error' ? '禁用' :
|
|
statusType === 'warning' ? '警告' :
|
|
statusType === 'processing' ? '处理中' : '未知'
|
|
);
|
|
|
|
const sizeClass = size !== 'default' ? `status-dot-${size}` : '';
|
|
const pulseClass = pulse ? 'status-dot-pulse' : '';
|
|
const alignClass = align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : 'justify-start';
|
|
|
|
return (
|
|
<span className={`status-dot-with-text ${alignClass} ${className}`}>
|
|
<span className={`status-dot status-dot-${statusType} ${sizeClass} ${pulseClass}`}></span>
|
|
<span className="status-dot-text">{statusText}</span>
|
|
</span>
|
|
);
|
|
}
|