wren
370 lines
13 KiB
TypeScript
370 lines
13 KiB
TypeScript
/**
|
|
* 左栏 / 规则目录
|
|
* 展示文件信息、分数进度、搜索与评查点列表。
|
|
*/
|
|
import { useMemo, useState } 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';
|
|
type StatusFilter = 'all' | PointStatus;
|
|
|
|
function classifyPoint(point: ReviewPoint): PointStatus {
|
|
if (point.status === 'notApplicable' || point.status === 'not_applicable') return 'skipped';
|
|
if (point.result === true || (point.result === undefined && point.status === 'success')) return 'pass';
|
|
if (point.result === false) {
|
|
if (point.status === 'error') return 'fail';
|
|
if (point.status === 'warning' || point.status === 'info') return 'warn';
|
|
}
|
|
if (point.status === 'error') return 'fail';
|
|
if (point.status === 'warning' || point.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' },
|
|
};
|
|
|
|
const FILTER_CHIPS: Array<{
|
|
key: StatusFilter;
|
|
label: string;
|
|
getClassName: (active: boolean) => string;
|
|
}> = [
|
|
{
|
|
key: 'all',
|
|
label: '全部',
|
|
getClassName: (active) =>
|
|
active
|
|
? 'bg-slate-700 text-white border-slate-700'
|
|
: 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50',
|
|
},
|
|
{
|
|
key: 'warn',
|
|
label: '提醒',
|
|
getClassName: (active) =>
|
|
active
|
|
? 'bg-amber-500 text-white border-amber-500'
|
|
: 'bg-white text-amber-700 border-amber-200 hover:bg-amber-50',
|
|
},
|
|
{
|
|
key: 'fail',
|
|
label: '问题',
|
|
getClassName: (active) =>
|
|
active
|
|
? 'bg-red-500 text-white border-red-500'
|
|
: 'bg-white text-red-700 border-red-200 hover:bg-red-50',
|
|
},
|
|
{
|
|
key: 'pass',
|
|
label: '通过',
|
|
getClassName: (active) =>
|
|
active
|
|
? 'bg-emerald-500 text-white border-emerald-500'
|
|
: 'bg-white text-emerald-700 border-emerald-200 hover:bg-emerald-50',
|
|
},
|
|
{
|
|
key: 'skipped',
|
|
label: '跳过',
|
|
getClassName: (active) =>
|
|
active
|
|
? 'bg-slate-500 text-white border-slate-500'
|
|
: 'bg-white text-slate-600 border-slate-200 hover:bg-slate-100',
|
|
},
|
|
];
|
|
|
|
function RuleListItem({
|
|
point,
|
|
isActive,
|
|
showCategory,
|
|
onClick,
|
|
}: {
|
|
point: ReviewPoint;
|
|
isActive: boolean;
|
|
showCategory?: boolean;
|
|
onClick: () => void;
|
|
}) {
|
|
const status = classifyPoint(point);
|
|
const statusMeta = STATUS_ICON[status];
|
|
const trailingLabel = showCategory ? point.groupName : point.pointCode || point.pointId || '';
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`rule-item relative w-full py-2 px-3 text-left transition ${
|
|
isActive ? 'bg-[#e8f3ef]' : '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={`${statusMeta.icon} ${statusMeta.color} shrink-0 text-[14px]`} />
|
|
<span
|
|
className={`text-[12.5px] text-slate-800 truncate flex-1 ${isActive ? 'font-semibold' : ''}`}
|
|
>
|
|
{point.pointName}
|
|
</span>
|
|
{trailingLabel && (
|
|
<span className="shrink-0 text-[10px] text-slate-400 font-mono">{trailingLabel}</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export function RulesDirectory({
|
|
reviewPoints,
|
|
statistics,
|
|
activeReviewPointResultId,
|
|
fileName,
|
|
onRuleSelect,
|
|
onBack,
|
|
}: RulesDirectoryProps) {
|
|
const [searchText, setSearchText] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
|
|
const [passOpen, setPassOpen] = useState(true);
|
|
const [openCategories, setOpenCategories] = useState<Set<string>>(
|
|
() => new Set(reviewPoints.map((point) => point.groupName).filter(Boolean))
|
|
);
|
|
|
|
const q = searchText.toLowerCase();
|
|
|
|
const matchSearch = (point: ReviewPoint) =>
|
|
!q ||
|
|
point.pointName?.toLowerCase().includes(q) ||
|
|
String(point.pointId ?? '').toLowerCase().includes(q) ||
|
|
String(point.pointCode ?? '').toLowerCase().includes(q) ||
|
|
point.groupName?.toLowerCase().includes(q);
|
|
|
|
const matchStatus = (point: ReviewPoint) =>
|
|
statusFilter === 'all' || classifyPoint(point) === statusFilter;
|
|
|
|
const statusCounts = useMemo(() => {
|
|
return reviewPoints.reduce<Record<StatusFilter, number>>(
|
|
(acc, point) => {
|
|
const status = classifyPoint(point);
|
|
acc.all += 1;
|
|
acc[status] += 1;
|
|
return acc;
|
|
},
|
|
{ all: 0, pass: 0, warn: 0, fail: 0, skipped: 0 }
|
|
);
|
|
}, [reviewPoints]);
|
|
|
|
const { needAttention, passed, passedByGroup, hasSearchResult } = useMemo(() => {
|
|
const filtered = reviewPoints.filter((point) => matchSearch(point) && matchStatus(point));
|
|
const needAttention = filtered.filter((point) => classifyPoint(point) !== 'pass');
|
|
const passed = filtered.filter((point) => classifyPoint(point) === 'pass');
|
|
|
|
const passedByGroup: Record<string, ReviewPoint[]> = {};
|
|
passed.forEach((point) => {
|
|
const key = point.groupName || '未分组';
|
|
(passedByGroup[key] = passedByGroup[key] || []).push(point);
|
|
});
|
|
|
|
return {
|
|
needAttention,
|
|
passed,
|
|
passedByGroup,
|
|
hasSearchResult: filtered.length > 0,
|
|
};
|
|
}, [reviewPoints, q, statusFilter]);
|
|
|
|
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 = reviewPoints.filter((point) => classifyPoint(point) !== 'pass').length;
|
|
const passedCount = reviewPoints.filter((point) => classifyPoint(point) === 'pass').length;
|
|
|
|
const toggleCategory = (category: string) => {
|
|
setOpenCategories((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(category)) next.delete(category);
|
|
else next.add(category);
|
|
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 space-y-2">
|
|
<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 className="flex flex-wrap gap-1">
|
|
{FILTER_CHIPS.map((filter) => {
|
|
const isActive = statusFilter === filter.key;
|
|
const count = statusCounts[filter.key];
|
|
|
|
return (
|
|
<button
|
|
key={filter.key}
|
|
type="button"
|
|
className={`inline-flex items-center gap-1 px-2 h-6 rounded border text-[11px] font-medium transition ${filter.getClassName(
|
|
isActive
|
|
)}`}
|
|
onClick={() => setStatusFilter(filter.key)}
|
|
>
|
|
<span>{filter.label}</span>
|
|
<span className="font-mono text-[10px] opacity-80">{count}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 min-h-0 overflow-y-auto scroll-slim py-1">
|
|
{needAttention.length > 0 && (
|
|
<div>
|
|
<div className="px-3 pt-1 pb-1 text-[10px] font-medium uppercase tracking-[0.18em] text-slate-400">
|
|
需关注
|
|
</div>
|
|
{needAttention.map((point) => (
|
|
<RuleListItem
|
|
key={point.id}
|
|
point={point}
|
|
isActive={point.id === activeReviewPointResultId}
|
|
showCategory
|
|
onClick={() => onRuleSelect(point.id)}
|
|
/>
|
|
))}
|
|
</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(([category, points]) => {
|
|
const isOpen = openCategories.has(category);
|
|
return (
|
|
<div key={category}>
|
|
<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(category)}
|
|
>
|
|
<i
|
|
className={`ri-arrow-right-s-line text-slate-400 text-[11px] transition-transform ${
|
|
isOpen ? 'rotate-90' : ''
|
|
}`}
|
|
/>
|
|
<span className="text-[10px] font-medium text-slate-500 uppercase tracking-wider">
|
|
{category}
|
|
</span>
|
|
<span className="ml-auto font-mono text-[10px] text-slate-400">
|
|
{points.length}
|
|
</span>
|
|
</button>
|
|
{isOpen &&
|
|
points.map((point) => (
|
|
<RuleListItem
|
|
key={point.id}
|
|
point={point}
|
|
isActive={point.id === activeReviewPointResultId}
|
|
onClick={() => onRuleSelect(point.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{!hasSearchResult && (
|
|
<div className="text-center py-8 text-[12px] text-slate-400">
|
|
<i
|
|
className={`text-2xl ${
|
|
q ? 'ri-search-eye-line text-slate-300' : 'ri-check-double-line text-emerald-400'
|
|
}`}
|
|
/>
|
|
<div className="mt-1">{q ? '没有匹配结果' : '当前筛选下暂无规则'}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|