mirror of
https://github.com/infiniflow/ragflow.git
synced 2026-02-04 09:35:06 +08:00
b79fef1ca8
### What problem does this PR solve? fix: Modify icon file, knowledge base display style #9869 ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
// src/pages/dataset/file-logs/file-status-badge.tsx
|
|
import { FC } from 'react';
|
|
/**
|
|
* params: status: 0 not run yet 1 running, 2 cancel, 3 success, 4 fail
|
|
*/
|
|
interface StatusBadgeProps {
|
|
// status: 'Success' | 'Failed' | 'Running' | 'Pending';
|
|
status: 0 | 1 | 2 | 3 | 4;
|
|
name?: string;
|
|
}
|
|
|
|
const FileStatusBadge: FC<StatusBadgeProps> = ({ status, name }) => {
|
|
const getStatusColor = () => {
|
|
// #3ba05c → rgb(59, 160, 92) // state-success
|
|
// #d8494b → rgb(216, 73, 75) // state-error
|
|
// #00beb4 → rgb(0, 190, 180) // accent-primary
|
|
// #faad14 → rgb(250, 173, 20) // state-warning
|
|
switch (status) {
|
|
case 3:
|
|
return `bg-[rgba(59,160,92,0.1)] text-state-success`;
|
|
case 4:
|
|
return `bg-[rgba(216,73,75,0.1)] text-state-error`;
|
|
case 1:
|
|
return `bg-[rgba(0,190,180,0.1)] text-accent-primary`;
|
|
case 0:
|
|
return `bg-[rgba(250,173,20,0.1)] text-state-warning`;
|
|
default:
|
|
return 'bg-gray-500/10 text-white';
|
|
}
|
|
};
|
|
|
|
const getBgStatusColor = () => {
|
|
// #3ba05c → rgb(59, 160, 92) // state-success
|
|
// #d8494b → rgb(216, 73, 75) // state-error
|
|
// #00beb4 → rgb(0, 190, 180) // accent-primary
|
|
// #faad14 → rgb(250, 173, 20) // state-warning
|
|
switch (status) {
|
|
case 3:
|
|
return `bg-[rgba(59,160,92,1)] text-state-success`;
|
|
case 4:
|
|
return `bg-[rgba(216,73,75,1)] text-state-error`;
|
|
case 1:
|
|
return `bg-[rgba(0,190,180,1)] text-accent-primary`;
|
|
case 0:
|
|
return `bg-[rgba(250,173,20,1)] text-state-warning`;
|
|
default:
|
|
return 'bg-gray-500/10 text-white';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center w-[75px] px-2 py-1 rounded-full text-xs font-medium ${getStatusColor()}`}
|
|
>
|
|
<div className={`w-1 h-1 mr-1 rounded-full ${getBgStatusColor()}`}></div>
|
|
{name || ''}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export default FileStatusBadge;
|