83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import statusBadgeStyles from '~/styles/components/status-badge.css?url';
|
|
|
|
export type StatusType = 'pending' | 'processing' | 'pass' | 'warning' | 'fail' | string;
|
|
|
|
interface StatusBadgeProps {
|
|
status: StatusType;
|
|
text?: string;
|
|
className?: string;
|
|
showIcon?: boolean;
|
|
customIcon?: string;
|
|
}
|
|
|
|
export function links() {
|
|
return [{ rel: "stylesheet", href: statusBadgeStyles }];
|
|
}
|
|
|
|
/**
|
|
* 状态徽章组件
|
|
* 用于显示文档的处理状态，如待审核、审核中、通过等
|
|
*/
|
|
export function StatusBadge({
|
|
status,
|
|
text,
|
|
className = '',
|
|
showIcon = true,
|
|
customIcon
|
|
}: StatusBadgeProps) {
|
|
// 状态对应的图标
|
|
const getStatusIcon = () => {
|
|
// 如果提供了自定义图标，优先使用
|
|
if (customIcon) return customIcon;
|
|
|
|
const statusIconMap: Record<string, string> = {
|
|
pending: 'ri-time-line',
|
|
processing: 'ri-loader-4-line',
|
|
pass: 'ri-checkbox-circle-line',
|
|
warning: 'ri-alert-line',
|
|
fail: 'ri-error-warning-line',
|
|
};
|
|
return statusIconMap[status] || '';
|
|
};
|
|
|
|
// 状态对应的文本
|
|
const getStatusText = () => {
|
|
if (text) return text;
|
|
|
|
const statusTextMap: Record<string, string> = {
|
|
pending: '待审核',
|
|
processing: '审核中',
|
|
pass: '通过',
|
|
warning: '警告',
|
|
fail: '不通过',
|
|
};
|
|
|
|
// 中英文映射，方便国际化
|
|
const statusEnglishTextMap: Record<string, string> = {
|
|
pending: 'Pending',
|
|
processing: 'Processing',
|
|
pass: 'Pass',
|
|
warning: 'Warning',
|
|
fail: 'Failed',
|
|
};
|
|
|
|
// 获取当前语言环境，这里默认使用中文
|
|
const lang: string = 'zh';
|
|
|
|
return lang === 'en'
|
|
? (statusEnglishTextMap[status] || status)
|
|
: (statusTextMap[status] || status);
|
|
};
|
|
|
|
// 获取状态对应的类名
|
|
const getStatusClass = () => {
|
|
return `status-badge status-${status}`;
|
|
};
|
|
|
|
return (
|
|
<span className={`${getStatusClass()} ${className}`}>
|
|
{showIcon && getStatusIcon() && <i className={`${getStatusIcon()} mr-1`}></i>}
|
|
{getStatusText()}
|
|
</span>
|
|
);
|
|
}
|