wren
303 lines
10 KiB
TypeScript
303 lines
10 KiB
TypeScript
/**
|
|
* 左栏 · 规则目录
|
|
* 显示文件名、分数进度条、搜索、评查点分组列表
|
|
*/
|
|
import { useState, useMemo } from 'react';
|
|
import type { ReviewPoint } from '../ReviewPointsList';
|
|
|
|
interface Statistics {
|
|
total: number;
|
|
success: number;
|
|
warning: number;
|
|
error: number;
|
|
notApplicable: number;
|
|
score: number;
|
|
}
|
|
|
|
interface RulesDirectoryProps {
|
|
reviewPoints: ReviewPoint[];
|
|
statistics: Statistics;
|
|
activeReviewPointResultId: string | number | null;
|
|
fileName: string;
|
|
onRuleSelect: (id: string | number) => void;
|
|
onBack: () => void;
|
|
}
|
|
|
|
type PointStatus = 'pass' | 'warn' | 'fail' | 'skipped';
|
|
|
|
function classifyPoint(p: ReviewPoint): PointStatus {
|
|
if (p.status === 'notApplicable' || p.status === 'not_applicable') return 'skipped';
|
|
if (p.result === true || (p.result === undefined && p.status === 'success')) return 'pass';
|
|
if (p.result === false) {
|
|
if (p.status === 'error') return 'fail';
|
|
if (p.status === 'warning' || p.status === 'info') return 'warn';
|
|
}
|
|
return 'pass';
|
|
}
|
|
|
|
const STATUS_ICON: Record<PointStatus, { icon: string; color: string }> = {
|
|
pass: { icon: 'ri-checkbox-circle-fill', color: 'text-emerald-500' },
|
|
warn: { icon: 'ri-lightbulb-flash-fill', color: 'text-amber-500' },
|
|
fail: { icon: 'ri-close-circle-fill', color: 'text-red-500' },
|
|
skipped: { icon: 'ri-forbid-2-line', color: 'text-slate-400' },
|
|
};
|
|
|
|
function RuleListItem({
|
|
point,
|
|
isActive,
|
|
showCategory,
|
|
onClick,
|
|
}: {
|
|
point: ReviewPoint;
|
|
isActive: boolean;
|
|
showCategory?: boolean;
|
|
onClick: () => void;
|
|
}) {
|
|
const cls = classifyPoint(point);
|
|
const s = STATUS_ICON[cls];
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`rule-item relative w-full py-2 px-3 text-left transition ${
|
|
isActive ? 'bg-[rgba(0,104,74,0.08)]' : 'hover:bg-slate-50'
|
|
}`}
|
|
onClick={onClick}
|
|
>
|
|
{isActive && (
|
|
<span className="absolute left-0 top-2 bottom-2 w-0.5 bg-[#00684a] rounded-r" />
|
|
)}
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<i className={`${s.icon} ${s.color} shrink-0 text-[14px]`} />
|
|
<span
|
|
className={`text-[12.5px] text-slate-800 truncate flex-1 ${
|
|
isActive ? 'font-semibold' : ''
|
|
}`}
|
|
>
|
|
{point.pointName}
|
|
</span>
|
|
{showCategory && (
|
|
<span className="shrink-0 text-[10px] text-slate-400">
|
|
{point.groupName}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export function RulesDirectory({
|
|
reviewPoints,
|
|
statistics,
|
|
activeReviewPointResultId,
|
|
fileName,
|
|
onRuleSelect,
|
|
onBack,
|
|
}: RulesDirectoryProps) {
|
|
const [searchText, setSearchText] = useState('');
|
|
const [passOpen, setPassOpen] = useState(true);
|
|
const [openCategories, setOpenCategories] = useState<Set<string>>(new Set());
|
|
|
|
const q = searchText.toLowerCase();
|
|
|
|
const matchSearch = (p: ReviewPoint) =>
|
|
!q ||
|
|
(p.pointName?.toLowerCase().includes(q)) ||
|
|
(p.pointCode?.toLowerCase().includes(q)) ||
|
|
(p.groupName?.toLowerCase().includes(q));
|
|
|
|
const { needAttention, passed, passedByGroup } = useMemo(() => {
|
|
const filtered = reviewPoints.filter(matchSearch);
|
|
const needAttention = filtered.filter(
|
|
(p) => classifyPoint(p) !== 'pass' && classifyPoint(p) !== 'skipped'
|
|
);
|
|
const passed = filtered.filter((p) => classifyPoint(p) === 'pass');
|
|
|
|
const passedByGroup: Record<string, ReviewPoint[]> = {};
|
|
passed.forEach((p) => {
|
|
const key = p.groupName || '未分组';
|
|
(passedByGroup[key] = passedByGroup[key] || []).push(p);
|
|
});
|
|
|
|
return { needAttention, passed, passedByGroup };
|
|
}, [reviewPoints, searchText]);
|
|
|
|
// 计算进度条百分比
|
|
const total = statistics.total || reviewPoints.length;
|
|
const passPct = total > 0 ? (statistics.success / total) * 100 : 0;
|
|
const warnPct = total > 0 ? (statistics.warning / total) * 100 : 0;
|
|
const errPct = total > 0 ? (statistics.error / total) * 100 : 0;
|
|
const naPct =
|
|
total > 0
|
|
? ((statistics.notApplicable || 0) / total) * 100
|
|
: 0;
|
|
|
|
const attentionCount = needAttention.length;
|
|
const passedCount = passed.length;
|
|
|
|
const toggleCategory = (cat: string) => {
|
|
setOpenCategories((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(cat)) next.delete(cat);
|
|
else next.add(cat);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<aside className="border-r border-slate-200 bg-white flex flex-col min-h-0">
|
|
{/* 顶部区域: 文件名 + 分数 + 进度条 */}
|
|
<div className="shrink-0 px-3 py-3 border-b border-slate-100 space-y-2">
|
|
{/* 文件名 */}
|
|
<div className="flex items-center gap-1.5 text-[11px] text-slate-500">
|
|
<button
|
|
type="button"
|
|
className="w-5 h-5 grid place-items-center rounded hover:bg-slate-100 text-slate-400 shrink-0"
|
|
title="返回"
|
|
onClick={onBack}
|
|
>
|
|
<i className="ri-arrow-left-line" />
|
|
</button>
|
|
<i className="ri-file-text-line text-slate-400 shrink-0" />
|
|
<span className="flex-1 break-all">{fileName}</span>
|
|
</div>
|
|
|
|
{/* 分数 + 进度条 */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[22px] font-semibold text-slate-900 tabular-nums leading-none">
|
|
{Math.round(statistics.score)}
|
|
</span>
|
|
<span className="text-[10.5px] text-slate-400">/100</span>
|
|
<div className="flex-1 h-1.5 rounded-full overflow-hidden bg-slate-100 ml-1">
|
|
<div className="flex h-full">
|
|
<div
|
|
className="bg-emerald-500"
|
|
style={{ width: `${passPct}%` }}
|
|
/>
|
|
<div
|
|
className="bg-amber-400"
|
|
style={{ width: `${warnPct}%` }}
|
|
/>
|
|
<div
|
|
className="bg-red-500"
|
|
style={{ width: `${errPct}%` }}
|
|
/>
|
|
<div
|
|
className="bg-slate-300"
|
|
style={{ width: `${naPct}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 状态摘要 */}
|
|
<div className="flex items-center justify-between text-[11px]">
|
|
<span className="inline-flex items-center gap-1 text-orange-700 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5 font-medium">
|
|
<i className="ri-focus-3-line" />{' '}
|
|
<span className="font-mono">{attentionCount}</span> 项需关注
|
|
</span>
|
|
<span className="text-slate-400">
|
|
<span className="font-mono text-slate-500">{passedCount}</span> /{' '}
|
|
{total} 已通过
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 搜索框 */}
|
|
<div className="shrink-0 p-2.5 border-b border-slate-100">
|
|
<div className="relative">
|
|
<i className="ri-search-line absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-[14px]" />
|
|
<input
|
|
placeholder="搜索规则"
|
|
className="w-full h-8 pl-8 pr-2 bg-slate-50 border border-slate-200 rounded-md text-[12.5px] focus:outline-none focus:bg-white focus:border-[#00684a] focus:ring-2 focus:ring-[#00684a]/15"
|
|
value={searchText}
|
|
onChange={(e) => setSearchText(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 评查点列表 */}
|
|
<div className="flex-1 min-h-0 overflow-y-auto scroll-slim py-1">
|
|
{/* 需关注 */}
|
|
{needAttention.length > 0 ? (
|
|
<div>
|
|
{needAttention.map((p) => (
|
|
<RuleListItem
|
|
key={p.id}
|
|
point={p}
|
|
isActive={p.id === activeReviewPointResultId}
|
|
showCategory
|
|
onClick={() => onRuleSelect(p.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-6 text-[12px] text-slate-400">
|
|
<i className="ri-check-double-line text-2xl text-emerald-400" />
|
|
<div className="mt-1">
|
|
{q ? '没有匹配' : '已全部处理'}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 已通过 */}
|
|
{passed.length > 0 && (
|
|
<div className="border-t border-slate-200 mt-2">
|
|
<button
|
|
type="button"
|
|
className="w-full flex items-center gap-2 px-3 py-2 bg-slate-50/60 hover:bg-slate-100 text-left"
|
|
onClick={() => setPassOpen(!passOpen)}
|
|
>
|
|
<i
|
|
className={`ri-arrow-right-s-line text-slate-400 text-[12px] transition-transform ${
|
|
passOpen ? 'rotate-90' : ''
|
|
}`}
|
|
/>
|
|
<i className="ri-checkbox-circle-fill text-emerald-500 text-[14px]" />
|
|
<span className="text-[12px] text-slate-600">已通过</span>
|
|
<span className="ml-auto font-mono text-[11px] text-slate-400">
|
|
{passed.length}
|
|
</span>
|
|
</button>
|
|
|
|
{passOpen &&
|
|
Object.entries(passedByGroup).map(([cat, points]) => {
|
|
const catOpen = openCategories.has(cat);
|
|
return (
|
|
<div key={cat}>
|
|
<button
|
|
type="button"
|
|
className="w-full flex items-center gap-1.5 px-3 py-1.5 bg-slate-50/40 hover:bg-slate-100 text-left"
|
|
onClick={() => toggleCategory(cat)}
|
|
>
|
|
<i
|
|
className={`ri-arrow-right-s-line text-slate-400 text-[11px] transition-transform ${
|
|
catOpen ? 'rotate-90' : ''
|
|
}`}
|
|
/>
|
|
<span className="text-[10px] font-medium text-slate-500 uppercase tracking-wider">
|
|
{cat}
|
|
</span>
|
|
<span className="ml-auto font-mono text-[10px] text-slate-400">
|
|
{points.length}
|
|
</span>
|
|
</button>
|
|
{catOpen &&
|
|
points.map((p) => (
|
|
<RuleListItem
|
|
key={p.id}
|
|
point={p}
|
|
isActive={p.id === activeReviewPointResultId}
|
|
onClick={() => onRuleSelect(p.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|