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

style(ui): 更新暗色模式下的颜色方案以增强可读性

This commit is contained in:
lintsinghua 2025-12-18 23:00:13 +08:00
parent cb1cdb77b8
commit 0bfed4d7d4
2 changed files with 40 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/agent/AgentModeSelector.tsx
View File

@ -22,7 +22,7 @@ export default function AgentModeSelector({
return ( return (
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<Shield className="w-4 h-4 text-violet-400" /> <Shield className="w-4 h-4 text-violet-600 dark:text-violet-400" />
<span className="font-mono text-xs font-bold text-muted-foreground uppercase tracking-wider"> <span className="font-mono text-xs font-bold text-muted-foreground uppercase tracking-wider">
审计模式 审计模式
</span> </span>
@ -34,7 +34,7 @@ export default function AgentModeSelector({
className={cn( className={cn(
"relative flex flex-col p-4 border cursor-pointer transition-all rounded", "relative flex flex-col p-4 border cursor-pointer transition-all rounded",
value === "fast" value === "fast"
? "border-amber-500/50 bg-amber-950/30" ? "border-amber-500/50 bg-amber-50 dark:bg-amber-950/30"
: "border-border hover:border-border bg-muted/50", : "border-border hover:border-border bg-muted/50",
disabled && "opacity-50 cursor-not-allowed" disabled && "opacity-50 cursor-not-allowed"
)} )}
@ -58,17 +58,17 @@ export default function AgentModeSelector({
)}> )}>
<Zap className={cn( <Zap className={cn(
"w-4 h-4", "w-4 h-4",
value === "fast" ? "text-amber-400" : "text-muted-foreground" value === "fast" ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground"
)} /> )} />
</div> </div>
<span className={cn( <span className={cn(
"font-bold text-sm font-mono uppercase", "font-bold text-sm font-mono uppercase",
value === "fast" ? "text-amber-300" : "text-muted-foreground" value === "fast" ? "text-amber-700 dark:text-amber-300" : "text-muted-foreground"
)}> )}>
快速审计 快速审计
</span> </span>
{value === "fast" && ( {value === "fast" && (
<CheckCircle2 className="w-4 h-4 text-amber-400 ml-auto" /> <CheckCircle2 className="w-4 h-4 text-amber-600 dark:text-amber-400 ml-auto" />
)} )}
</div> </div>
@ -99,7 +99,7 @@ export default function AgentModeSelector({
className={cn( className={cn(
"relative flex flex-col p-4 border cursor-pointer transition-all rounded", "relative flex flex-col p-4 border cursor-pointer transition-all rounded",
value === "agent" value === "agent"
? "border-violet-500/50 bg-violet-950/30" ? "border-violet-500/50 bg-violet-50 dark:bg-violet-950/30"
: "border-border hover:border-border bg-muted/50", : "border-border hover:border-border bg-muted/50",
disabled && "opacity-50 cursor-not-allowed" disabled && "opacity-50 cursor-not-allowed"
)} )}
@ -115,7 +115,7 @@ export default function AgentModeSelector({
/> />
{/* 推荐标签 */} {/* 推荐标签 */}
<div className="absolute -top-2 -right-2 px-2 py-0.5 bg-violet-600 text-foreground text-xs font-bold uppercase font-mono rounded shadow-[0_0_10px_rgba(139,92,246,0.5)]"> <div className="absolute -top-2 -right-2 px-2 py-0.5 bg-violet-600 text-white text-xs font-bold uppercase font-mono rounded shadow-[0_0_10px_rgba(139,92,246,0.5)]">
推荐 推荐
</div> </div>
@ -128,17 +128,17 @@ export default function AgentModeSelector({
)}> )}>
<Bot className={cn( <Bot className={cn(
"w-4 h-4", "w-4 h-4",
value === "agent" ? "text-violet-400" : "text-muted-foreground" value === "agent" ? "text-violet-600 dark:text-violet-400" : "text-muted-foreground"
)} /> )} />
</div> </div>
<span className={cn( <span className={cn(
"font-bold text-sm font-mono uppercase", "font-bold text-sm font-mono uppercase",
value === "agent" ? "text-violet-300" : "text-muted-foreground" value === "agent" ? "text-violet-700 dark:text-violet-300" : "text-muted-foreground"
)}> )}>
Agent 审计 Agent 审计
</span> </span>
{value === "agent" && ( {value === "agent" && (
<CheckCircle2 className="w-4 h-4 text-violet-400 ml-auto" /> <CheckCircle2 className="w-4 h-4 text-violet-600 dark:text-violet-400 ml-auto" />
)} )}
</div> </div>
@ -153,7 +153,7 @@ export default function AgentModeSelector({
</li> </li>
<li className={cn( <li className={cn(
"flex items-center gap-1", "flex items-center gap-1",
value === "agent" ? "text-violet-400 font-medium" : "text-muted-foreground" value === "agent" ? "text-violet-600 dark:text-violet-400 font-medium" : "text-muted-foreground"
)}> )}>
<Shield className="w-3 h-3" /> <Shield className="w-3 h-3" />
沙箱漏洞验证 沙箱漏洞验证
@ -170,9 +170,9 @@ export default function AgentModeSelector({
{/* 模式说明 */} {/* 模式说明 */}
{value === "agent" && ( {value === "agent" && (
<div className="p-3 bg-violet-950/30 border border-violet-500/30 text-xs text-violet-300 rounded font-mono"> <div className="p-3 bg-violet-50 dark:bg-violet-950/30 border border-violet-500/30 text-xs text-violet-700 dark:text-violet-300 rounded font-mono">
<p className="font-bold mb-1 uppercase text-violet-400">Agent 审计模式说明：</p> <p className="font-bold mb-1 uppercase text-violet-700 dark:text-violet-400">Agent 审计模式说明：</p>
<ul className="list-disc list-inside space-y-0.5 text-violet-300/80"> <ul className="list-disc list-inside space-y-0.5 text-violet-600 dark:text-violet-300/80">
<li>AI Agent 会自主规划审计策略</li> <li>AI Agent 会自主规划审计策略</li>
<li>使用 RAG 技术进行代码语义检索</li> <li>使用 RAG 技术进行代码语义检索</li>
<li>在 Docker 沙箱中验证发现的漏洞</li> <li>在 Docker 沙箱中验证发现的漏洞</li>

52
frontend/src/components/audit/CreateTaskDialog.tsx
View File

@ -389,15 +389,15 @@ export default function CreateTaskDialog({
</span> </span>
{isRepositoryProject(selectedProject) ? ( {isRepositoryProject(selectedProject) ? (
<div className="flex items-center gap-3 p-3 border border-border rounded bg-blue-950/20"> <div className="flex items-center gap-3 p-3 border border-border rounded bg-blue-50 dark:bg-blue-950/20">
<GitBranch className="w-5 h-5 text-blue-400" /> <GitBranch className="w-5 h-5 text-blue-600 dark:text-blue-400" />
<span className="font-mono text-base text-muted-foreground w-12"> <span className="font-mono text-base text-muted-foreground w-12">
分支 分支
</span> </span>
{loadingBranches ? ( {loadingBranches ? (
<div className="flex items-center gap-2 flex-1"> <div className="flex items-center gap-2 flex-1">
<Loader2 className="w-4 h-4 animate-spin text-blue-400" /> <Loader2 className="w-4 h-4 animate-spin text-blue-600 dark:text-blue-400" />
<span className="text-sm text-blue-400 font-mono">加载中...</span> <span className="text-sm text-blue-600 dark:text-blue-400 font-mono">加载中...</span>
</div> </div>
) : ( ) : (
<Select value={branch} onValueChange={setBranch}> <Select value={branch} onValueChange={setBranch}>
@ -438,10 +438,10 @@ export default function CreateTaskDialog({
{/* 规则集和提示词选择 - 仅快速扫描模式显示 */} {/* 规则集和提示词选择 - 仅快速扫描模式显示 */}
{auditMode !== "agent" && ( {auditMode !== "agent" && (
<div className="p-3 border border-border rounded bg-violet-950/20 space-y-3"> <div className="p-3 border border-border rounded bg-violet-50 dark:bg-violet-950/20 space-y-3">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<Zap className="w-4 h-4 text-violet-400" /> <Zap className="w-4 h-4 text-violet-600 dark:text-violet-400" />
<span className="font-mono text-sm font-bold text-violet-300 uppercase">审计配置</span> <span className="font-mono text-sm font-bold text-violet-700 dark:text-violet-300 uppercase">审计配置</span>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div> <div>
@ -507,7 +507,7 @@ export default function CreateTaskDialog({
{excludePatterns.map((p) => ( {excludePatterns.map((p) => (
<Badge <Badge
key={p} key={p}
className="bg-muted text-foreground border-0 font-mono text-xs cursor-pointer hover:bg-rose-900/50 hover:text-rose-400" className="bg-muted text-foreground border-0 font-mono text-xs cursor-pointer hover:bg-rose-100 dark:hover:bg-rose-900/50 hover:text-rose-600 dark:hover:text-rose-400"
onClick={() => onClick={() =>
setExcludePatterns((prev) => setExcludePatterns((prev) =>
prev.filter((x) => x !== p) prev.filter((x) => x !== p)
@ -582,7 +582,7 @@ export default function CreateTaskDialog({
size="sm" size="sm"
variant="ghost" variant="ghost"
onClick={() => setSelectedFiles(undefined)} onClick={() => setSelectedFiles(undefined)}
className="h-8 text-xs text-rose-400 hover:bg-rose-900/30 hover:text-rose-300" className="h-8 text-xs text-rose-600 dark:text-rose-400 hover:bg-rose-100 dark:hover:bg-rose-900/30 hover:text-rose-700 dark:hover:text-rose-300"
> >
重置 重置
</Button> </Button>
@ -681,9 +681,9 @@ function ProjectCard({
<div className={`p-1.5 rounded ${isRepo ? "bg-blue-500/20" : "bg-amber-500/20"}`}> <div className={`p-1.5 rounded ${isRepo ? "bg-blue-500/20" : "bg-amber-500/20"}`}>
{isRepo ? ( {isRepo ? (
<Globe className="w-4 h-4 text-blue-400" /> <Globe className="w-4 h-4 text-blue-600 dark:text-blue-400" />
) : ( ) : (
<Package className="w-4 h-4 text-amber-400" /> <Package className="w-4 h-4 text-amber-600 dark:text-amber-400" />
)} )}
</div> </div>
@ -694,8 +694,8 @@ function ProjectCard({
</span> </span>
<Badge <Badge
className={`text-xs px-1 py-0 font-mono ${isRepo className={`text-xs px-1 py-0 font-mono ${isRepo
? "bg-blue-500/20 text-blue-400 border-blue-500/30" ? "bg-blue-500/20 text-blue-600 dark:text-blue-400 border-blue-500/30"
: "bg-amber-500/20 text-amber-400 border-amber-500/30" : "bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30"
}`} }`}
> >
{isRepo ? "REPO" : "ZIP"} {isRepo ? "REPO" : "ZIP"}
@ -722,9 +722,9 @@ function ZipUploadCard({
}) { }) {
if (zipState.loading) { if (zipState.loading) {
return ( return (
<div className="flex items-center gap-3 p-3 border border-border rounded bg-blue-950/20"> <div className="flex items-center gap-3 p-3 border border-border rounded bg-blue-50 dark:bg-blue-950/20">
<Loader2 className="w-5 h-5 animate-spin text-blue-400" /> <Loader2 className="w-5 h-5 animate-spin text-blue-600 dark:text-blue-400" />
<span className="text-sm font-mono text-blue-400"> <span className="text-sm font-mono text-blue-600 dark:text-blue-400">
检查文件中... 检查文件中...
</span> </span>
</div> </div>
@ -733,16 +733,16 @@ function ZipUploadCard({
if (zipState.storedZipInfo?.has_file) { if (zipState.storedZipInfo?.has_file) {
return ( return (
<div className="p-3 border border-border rounded bg-emerald-950/20 space-y-3"> <div className="p-3 border border-border rounded bg-emerald-50 dark:bg-emerald-950/20 space-y-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-1.5 bg-emerald-500/20 rounded"> <div className="p-1.5 bg-emerald-500/20 rounded">
<Package className="w-4 h-4 text-emerald-400" /> <Package className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-bold text-emerald-300 font-mono"> <p className="text-sm font-bold text-emerald-700 dark:text-emerald-300 font-mono">
{zipState.storedZipInfo.original_filename} {zipState.storedZipInfo.original_filename}
</p> </p>
<p className="text-xs text-emerald-500 font-mono"> <p className="text-xs text-emerald-600 dark:text-emerald-500 font-mono">
{zipState.storedZipInfo.file_size && {zipState.storedZipInfo.file_size &&
formatFileSize(zipState.storedZipInfo.file_size)} formatFileSize(zipState.storedZipInfo.file_size)}
{zipState.storedZipInfo.uploaded_at && {zipState.storedZipInfo.uploaded_at &&
@ -759,7 +759,7 @@ function ZipUploadCard({
onChange={() => zipState.switchToStored()} onChange={() => zipState.switchToStored()}
className="w-4 h-4 accent-emerald-500" className="w-4 h-4 accent-emerald-500"
/> />
<span className="text-emerald-300">使用此文件</span> <span className="text-emerald-700 dark:text-emerald-300">使用此文件</span>
</label> </label>
<label className="flex items-center gap-2 cursor-pointer font-mono text-sm"> <label className="flex items-center gap-2 cursor-pointer font-mono text-sm">
<input <input
@ -768,7 +768,7 @@ function ZipUploadCard({
onChange={() => zipState.switchToUpload()} onChange={() => zipState.switchToUpload()}
className="w-4 h-4 accent-emerald-500" className="w-4 h-4 accent-emerald-500"
/> />
<span className="text-emerald-300">上传新文件</span> <span className="text-emerald-700 dark:text-emerald-300">上传新文件</span>
</label> </label>
</div> </div>
@ -812,13 +812,13 @@ function ZipUploadCard({
} }
return ( return (
<div className="p-3 border border-dashed border-amber-500/50 rounded bg-amber-950/20"> <div className="p-3 border border-dashed border-amber-500/50 rounded bg-amber-50 dark:bg-amber-950/20">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="p-1.5 bg-amber-500/20 rounded"> <div className="p-1.5 bg-amber-500/20 rounded">
<Upload className="w-4 h-4 text-amber-400" /> <Upload className="w-4 h-4 text-amber-600 dark:text-amber-400" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-bold text-amber-300 font-mono uppercase"> <p className="text-sm font-bold text-amber-700 dark:text-amber-300 font-mono uppercase">
上传 ZIP 文件 上传 ZIP 文件
</p> </p>
<div className="flex gap-2 items-center mt-2"> <div className="flex gap-2 items-center mt-2">
@ -855,7 +855,7 @@ function ZipUploadCard({
)} )}
</div> </div>
{zipState.zipFile && ( {zipState.zipFile && (
<p className="text-xs text-amber-400 mt-2 font-mono"> <p className="text-xs text-amber-600 dark:text-amber-400 mt-2 font-mono">
已选: {zipState.zipFile.name} ( 已选: {zipState.zipFile.name} (
{formatFileSize(zipState.zipFile.size)}) {formatFileSize(zipState.zipFile.size)})
</p> </p>