60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
/**
|
|
* 问题数量差异显示组件
|
|
* 用于显示文档版本之间的问题数量对比
|
|
*/
|
|
|
|
interface IssuesDiffProps {
|
|
currentIssues: number | null;
|
|
previousIssues?: number | null;
|
|
issuesDiff?: number;
|
|
issuesDiffType?: 'increase' | 'decrease' | 'same';
|
|
className?: string;
|
|
}
|
|
|
|
export function IssuesDiff({
|
|
currentIssues,
|
|
previousIssues,
|
|
issuesDiff,
|
|
issuesDiffType,
|
|
className = ''
|
|
}: IssuesDiffProps) {
|
|
// 如果当前问题数量为 null，显示 "-"
|
|
if (currentIssues === null) {
|
|
return <span className={`issues-number ${className}`}>-</span>;
|
|
}
|
|
|
|
// 如果没有上一个版本或上一个版本问题数量为 null，只显示当前数量
|
|
if (previousIssues === null || previousIssues === undefined || issuesDiffType === undefined) {
|
|
return <span className={`issues-number ${className}`}>{currentIssues}</span>;
|
|
}
|
|
|
|
// 显示当前数量 + 差异
|
|
return (
|
|
<div className={`issues-count-wrapper ${className}`}>
|
|
<span className="issues-number">{currentIssues}</span>
|
|
{issuesDiff !== undefined && issuesDiffType && (
|
|
<span className={`issues-diff ${issuesDiffType}`}>
|
|
{issuesDiffType === 'increase' && (
|
|
<>
|
|
<i className="ri-arrow-up-line"></i>
|
|
<span>+{issuesDiff}</span>
|
|
</>
|
|
)}
|
|
{issuesDiffType === 'decrease' && (
|
|
<>
|
|
<i className="ri-arrow-down-line"></i>
|
|
<span>-{issuesDiff}</span>
|
|
</>
|
|
)}
|
|
{issuesDiffType === 'same' && (
|
|
<>
|
|
<i className="ri-subtract-line"></i>
|
|
<span>0</span>
|
|
</>
|
|
)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|