WuYanBo
/
CodeReview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update SVG circle radius and improve code readability in ReportExportDialog
Build and Push CodeReview / build (push) Waiting to run Details

This commit is contained in:
vinland100 2026-01-12 15:08:33 +08:00
parent 7f951d5451
commit 7c0d95385f
2 changed files with 537 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

782
docs/audit_report_智能漏洞挖掘审计 - 完整示例_2025-12-15.html
View File

File diff suppressed because it is too large Load Diff

88
frontend/src/pages/AgentAudit/components/ReportExportDialog.tsx
View File

@ -866,8 +866,8 @@ export const ReportExportDialog = memo(function ReportExportDialog({
}; };
const scoreInfo = getScoreGrade(score); const scoreInfo = getScoreGrade(score);
// SVG 圆环进度条 // SVG 圆环进度条 (逆时针方向)
const circumference = 2 * Math.PI * 40; // r=40 (smaller) const circumference = 2 * Math.PI * 23; // r=23 matches SVG circle radius
const strokeDashoffset = circumference - (score / 100) * circumference; const strokeDashoffset = circumference - (score / 100) * circumference;
return `<!DOCTYPE html> return `<!DOCTYPE html>
@ -1009,11 +1009,11 @@ export const ReportExportDialog = memo(function ReportExportDialog({
} }
.score-ring svg { .score-ring svg {
transform: rotate(-90deg); transform: rotate(-90deg);
width: 56px; width: 56px;
height: 56px; height: 56px;
display: block;
} }
.score-ring-bg { fill: none; stroke: var(--border); stroke-width: 5; } .score-ring-bg { fill: none; stroke: var(--border); stroke-width: 5; }
.score-ring-progress { .score-ring-progress {
fill: none; fill: none;
@ -1457,10 +1457,10 @@ export const ReportExportDialog = memo(function ReportExportDialog({
<span class="severity-bar-title">分布</span> <span class="severity-bar-title">分布</span>
<div class="severity-bar"> <div class="severity-bar">
${totalFindings > 0 ? ` ${totalFindings > 0 ? `
<div class="severity-segment critical" style="width:${(criticalCount/totalFindings)*100}%"></div> <div class="severity-segment critical" style="width:${(criticalCount / totalFindings) * 100}%"></div>
<div class="severity-segment high" style="width:${(highCount/totalFindings)*100}%"></div> <div class="severity-segment high" style="width:${(highCount / totalFindings) * 100}%"></div>
<div class="severity-segment medium" style="width:${(mediumCount/totalFindings)*100}%"></div> <div class="severity-segment medium" style="width:${(mediumCount / totalFindings) * 100}%"></div>
<div class="severity-segment low" style="width:${(lowCount/totalFindings)*100}%"></div> <div class="severity-segment low" style="width:${(lowCount / totalFindings) * 100}%"></div>
` : ''} ` : ''}
</div> </div>
<div class="severity-legend"> <div class="severity-legend">
@ -1771,45 +1771,45 @@ export const ReportExportDialog = memo(function ReportExportDialog({
<div className="flex-1 min-h-0 overflow-hidden"> <div className="flex-1 min-h-0 overflow-hidden">
<ScrollArea className="h-full"> <ScrollArea className="h-full">
<div className="p-5"> <div className="p-5">
{preview.loading ? ( {preview.loading ? (
<PreviewSkeleton /> <PreviewSkeleton />
) : preview.error ? ( ) : preview.error ? (
<div className="flex items-center justify-center py-16"> <div className="flex items-center justify-center py-16">
<div className="flex flex-col items-center gap-4 text-center"> <div className="flex flex-col items-center gap-4 text-center">
<div className="p-4 rounded-full bg-amber-500/10 border border-amber-500/30"> <div className="p-4 rounded-full bg-amber-500/10 border border-amber-500/30">
<AlertTriangle className="w-8 h-8 text-amber-400" /> <AlertTriangle className="w-8 h-8 text-amber-400" />
</div>
<div>
<p className="text-sm text-foreground font-medium mb-1">加载失败</p>
<p className="text-xs text-muted-foreground">{preview.error}</p>
</div>
<Button
variant="outline"
size="sm"
onClick={() => fetchPreview(activeFormat, true)}
className="mt-2"
>
<RefreshCw className="w-3.5 h-3.5 mr-1.5" />
重试
</Button>
</div> </div>
<div> </div>
<p className="text-sm text-foreground font-medium mb-1">加载失败</p> ) : (
<p className="text-xs text-muted-foreground">{preview.error}</p> <div className="rounded-xl border border-border overflow-hidden bg-card">
<div className="p-5 min-h-[300px]">
{activeFormat === "markdown" && (
<MarkdownPreview content={preview.content} searchQuery={searchQuery} />
)}
{activeFormat === "json" && (
<JsonPreview content={preview.content} searchQuery={searchQuery} />
)}
{activeFormat === "html" && (
<HtmlPreview content={preview.content} searchQuery={searchQuery} />
)}
</div> </div>
<Button
variant="outline"
size="sm"
onClick={() => fetchPreview(activeFormat, true)}
className="mt-2"
>
<RefreshCw className="w-3.5 h-3.5 mr-1.5" />
重试
</Button>
</div> </div>
</div> )}
) : ( </div>
<div className="rounded-xl border border-border overflow-hidden bg-card">
<div className="p-5 min-h-[300px]">
{activeFormat === "markdown" && (
<MarkdownPreview content={preview.content} searchQuery={searchQuery} />
)}
{activeFormat === "json" && (
<JsonPreview content={preview.content} searchQuery={searchQuery} />
)}
{activeFormat === "html" && (
<HtmlPreview content={preview.content} searchQuery={searchQuery} />
)}
</div>
</div>
)}
</div>
</ScrollArea> </ScrollArea>
</div> </div>
</div> </div>