hao/websafe-kb
1
0
派生 0
代码 工单 合并请求 1 工作流 软件包 项目 发布 百科 活动

更新: 89 个文件 - 2026-03-17 02:00:01

浏览代码
这个提交包含在：
hao
2026-03-17 02:00:01 -07:00
父节点 300c840509
当前提交 72c6782c45
共修改 89 个文件，包含 16931 行新增和 373 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

376
scripts/lab/dashboard_templates/lovart/assets/app.js
查看文件

@@ -4,6 +4,7 @@ const state = {
systems: [],
advisories: {},
profiles: {},
architecture: null,
selectedRunId: null,
selectedArtifact: null,
refreshHandle: null,
@@ -21,12 +22,33 @@ const state = {
evidence: true,
logs: true,
sources: true,
architecture: true,
run_json: false,
advisory_json: false,
profile_json: false
}
};
const STATUS_LABELS = {
"verified-real": "真实版本已实证",
"verified-synthetic": "合成靶场已实证",
"blocked-artifact": "制品阻塞",
"blocked-destructive": "破坏性风险阻塞",
"triage-manual": "人工分诊",
suspected: "仅疑似命中",
completed: "已完成",
failed: "失败",
skipped: "已跳过",
planned: "已规划",
unknown: "未知"
};
const ARTIFACT_KIND_LABELS = {
image: "图片",
text: "文本",
link: "链接"
};
const $ = (id) => document.getElementById(id);
const icon = (name, className = "icon") =>
`<svg class="${className}" aria-hidden="true"><use href="./assets/icons.svg#${name}"></use></svg>`;
@@ -37,7 +59,7 @@ const statusClass = (status) => ({
"blocked-artifact": "status-pill status-blocked-artifact",
"blocked-destructive": "status-pill status-blocked-destructive",
"triage-manual": "status-pill status-triage-manual",
"suspected": "status-pill status-suspected",
suspected: "status-pill status-suspected",
completed: "status-pill status-verified-real",
failed: "status-pill status-blocked-artifact",
skipped: "status-pill status-triage-manual"
@@ -52,21 +74,37 @@ function escapeHtml(value) {
}
function formatStatus(value) {
return String(value || "unknown").replaceAll("-", " ");
return STATUS_LABELS[value] || String(value || "unknown").replaceAll("-", " ");
}
function formatDateTime(value) {
if (!value) return "-";
const date = new Date(value);
if (Number.isNaN(date.getTime())) return String(value);
return date.toLocaleString("zh-CN", {
hour12: false,
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
});
}
function timeAgo(value) {
if (!value) return "-";
const diff = Date.now() - new Date(value).getTime();
if (Number.isNaN(diff)) return value;
if (Number.isNaN(diff)) return String(value);
const seconds = Math.floor(diff / 1000);
if (seconds < 60) return `${seconds}s ago`;
if (seconds <= 5) return "刚刚";
if (seconds < 60) return `${seconds} 秒前`;
const minutes = Math.floor(seconds / 60);
if (minutes < 60) return `${minutes}m ago`;
if (minutes < 60) return `${minutes} 分钟前`;
const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours}h ago`;
if (hours < 24) return `${hours} 小时前`;
const days = Math.floor(hours / 24);
return `${days}d ago`;
return `${days} 天前`;
}
async function fetchJson(url) {
@@ -94,30 +132,30 @@ function metricCards() {
return [
{
label: "Total Runs",
label: "运行总数",
value: state.summary?.run_count || 0,
note: `${state.summary?.advisory_count || 0} advisories indexed`,
note: `已索引漏洞条目 ${state.summary?.advisory_count || 0} 条`,
color: "var(--accent-purple)",
iconName: "report"
},
{
label: "Success",
label: "实证成功",
value: successCount,
note: "verified-real + verified-synthetic",
note: "真实版本 + 合成靶场",
color: "var(--accent-green)",
iconName: "shield"
},
{
label: "Blocked",
label: "当前阻塞",
value: blockedCount,
note: "artifact or destructive blockers",
note: "制品阻塞或破坏性风险阻塞",
color: "var(--accent-red)",
iconName: "failure"
},
{
label: "In Progress",
label: "待处理 / 进行中",
value: inProgressCount,
note: "manual review or incomplete verification",
note: "人工分诊、待补证据或未完成实证",
color: "var(--accent-blue)",
iconName: "timeline"
}
@@ -149,11 +187,16 @@ function renderSyncState(kind, title, detail) {
$("syncState").dataset.kind = kind;
}
function optionLabel(kind, value) {
if (kind === "status") return formatStatus(value);
return value;
}
function hydrateFilters() {
const controls = [
["systemFilter", "system", state.runs.map((item) => item.system_id), "All systems"],
["statusFilter", "status", state.runs.map((item) => item.verification_status), "All statuses"],
["profileFilter", "profile", state.runs.map((item) => item.repro_profile_id), "All profiles"]
["systemFilter", "system", state.runs.map((item) => item.system_id), "全部系统"],
["statusFilter", "status", state.runs.map((item) => item.verification_status), "全部状态"],
["profileFilter", "profile", state.runs.map((item) => item.repro_profile_id), "全部复现档案"]
];
for (const [id, key, values, label] of controls) {
@@ -161,7 +204,7 @@ function hydrateFilters() {
const current = state.filters[key];
control.innerHTML = `<option value="">${label}</option>`;
control.innerHTML += distinct(values)
.map((value) => `<option value="${escapeHtml(value)}">${escapeHtml(value)}</option>`)
.map((value) => `<option value="${escapeHtml(value)}">${escapeHtml(optionLabel(key, value))}</option>`)
.join("");
control.value = current;
}
@@ -198,20 +241,20 @@ function renderSystems() {
<article class="system-card">
<div class="timeline-head">
<strong class="system-title">${escapeHtml(system.display_name || system.system_id)}</strong>
<span class="section-chip">${escapeHtml(system.browser_present || 0)}/${escapeHtml(system.browser_required || 0)} browser</span>
<span class="section-chip">${escapeHtml(system.browser_present || 0)}/${escapeHtml(system.browser_required || 0)} 浏览器证据</span>
</div>
<div class="muted">${escapeHtml(system.system_id)} · latest ${escapeHtml(system.latest_update || "-")}</div>
<div class="muted">${escapeHtml(system.system_id)} · 最近更新 ${escapeHtml(formatDateTime(system.latest_update || "-"))}</div>
<div class="tag-row" style="margin-top:10px;">
<span class="tag">real ${escapeHtml(system.verified_real || 0)}</span>
<span class="tag">synthetic ${escapeHtml(system.verified_synthetic || 0)}</span>
<span class="tag">blocked ${escapeHtml(system.blocked || 0)}</span>
<span class="tag">真实 ${escapeHtml(system.verified_real || 0)}</span>
<span class="tag">合成 ${escapeHtml(system.verified_synthetic || 0)}</span>
<span class="tag">阻塞 ${escapeHtml(system.blocked || 0)}</span>
</div>
<div class="meter"><span style="--fill:${coverage}%"></span></div>
</article>
`;
})
.join("")
: `<div class="empty-state">No system coverage data.</div>`;
: `<div class="empty-state">暂无系统覆盖数据。</div>`;
}
function renderRecentFailures() {
@@ -226,23 +269,24 @@ function renderRecentFailures() {
<span class="${statusClass(item.status)}">${escapeHtml(formatStatus(item.status))}</span>
</div>
<div class="muted" style="margin-top:8px;">${escapeHtml(item.title || item.advisory_id)}</div>
<div class="failure-reason" style="margin-top:8px;">${escapeHtml(item.blocked_reason || "-")}</div>
<div class="failure-reason" style="margin-top:8px;">${escapeHtml(item.blocked_reason || "未提供失败原因。")}</div>
</article>
`
)
.join("")
: `<div class="empty-state">No recent blockers.</div>`;
: `<div class="empty-state">当前没有最近失败记录。</div>`;
}
function renderRunQueue() {
const runs = filteredRuns();
$("runCount").textContent = `${runs.length} shown`;
$("runCount").textContent = `${runs.length} 条`;
$("runQueue").innerHTML = runs.length
? runs
.map((item) => {
const active = item.run_id === state.selectedRunId ? "is-active" : "";
const browserState = item.browser_evidence?.present ? "ready" : (item.browser_evidence?.required ? "required" : "optional");
const browserState = item.browser_evidence?.present ? "已采集" : (item.browser_evidence?.required ? "必需待补" : "可选");
const lead = item.reasoning_lines?.[0] || item.blocked_reason || item.advisory_meta?.summary || "";
const artifactCount = (item.artifact_groups || []).reduce((sum, group) => sum + Number(group.count || 0), 0);
return `
<button class="run-card ${active}" type="button" data-run-id="${escapeHtml(item.run_id)}">
<div class="run-topline">
@@ -256,15 +300,15 @@ function renderRunQueue() {
<span>${escapeHtml(timeAgo(item.finished_at))}</span>
</div>
<div class="tag-row" style="margin-top:10px;">
<span class="tag">artifacts ${escapeHtml((item.artifact_groups || []).reduce((sum, group) => sum + group.count, 0))}</span>
<span class="tag">browser ${escapeHtml(browserState)}</span>
<span class="tag">证据 ${escapeHtml(artifactCount)}</span>
<span class="tag">浏览器 ${escapeHtml(browserState)}</span>
</div>
<div class="muted" style="margin-top:10px;">${escapeHtml(lead)}</div>
</button>
`;
})
.join("")
: `<div class="empty-state">No runs match the current filters.</div>`;
: `<div class="empty-state">当前筛选条件下没有匹配的运行。</div>`;
document.querySelectorAll("[data-run-id]").forEach((button) => {
button.addEventListener("click", () => {
@@ -278,18 +322,18 @@ function renderRunQueue() {
function progressSegments(progress) {
const order = [
["completed", "Completed", "progress-completed"],
["blocked", "Blocked", "progress-blocked"],
["failed", "Failed", "progress-failed"],
["skipped", "Skipped", "progress-skipped"],
["planned", "Planned", "progress-planned"],
["other", "Other", "progress-other"]
["completed", "已完成", "progress-completed"],
["blocked", "已阻塞", "progress-blocked"],
["failed", "失败", "progress-failed"],
["skipped", "已跳过", "progress-skipped"],
["planned", "已规划", "progress-planned"],
["other", "其他", "progress-other"]
];
const total = order.reduce((sum, [key]) => sum + Number(progress?.[key] || 0), 0);
if (!total) {
return {
bar: `<div class="progress-segment progress-other" style="width:100%"></div>`,
legend: `<span class="tag"><span class="swatch progress-other"></span>no progress</span>`
legend: `<span class="tag"><span class="swatch progress-other"></span>暂无进度</span>`
};
}
const bar = order
@@ -379,7 +423,7 @@ async function openArtifact(href, label, kind) {
}
viewer.innerHTML = `<pre>${escapeHtml(formatted)}</pre>`;
} catch (error) {
viewer.innerHTML = `<pre>Artifact load failed: ${escapeHtml(error.message)}</pre>`;
viewer.innerHTML = `<pre>加载 artifact 失败：${escapeHtml(error.message)}</pre>`;
}
}
@@ -396,16 +440,147 @@ function bindPanelToggles() {
});
}
function renderArchitectureFields(fields = []) {
if (!fields.length) return "";
return `
<div class="arch-field-grid">
${fields
.map(
(field) => `
<article class="arch-field">
<span class="arch-field-label">${escapeHtml(field.label || "-")}</span>
<div class="arch-field-value">${escapeHtml(field.value || "-")}</div>
</article>
`
)
.join("")}
</div>
`;
}
function renderArchitectureStats(stats = []) {
if (!stats.length) return "";
return `
<div class="arch-stat-grid">
${stats
.map(
(item) => `
<article class="arch-stat">
<span class="arch-stat-label">${escapeHtml(item.label || "-")}</span>
<strong class="arch-stat-value">${escapeHtml(item.value || "-")}</strong>
</article>
`
)
.join("")}
</div>
`;
}
function renderArchitectureLinks(links = []) {
if (!links.length) return "";
return `
<div class="arch-link-grid">
${links
.map(
(linkItem) => `
<a class="arch-link-card" href="${escapeHtml(linkItem.href || "#")}" target="_blank" rel="noreferrer">
<span class="arch-link-label">${escapeHtml(linkItem.label || "打开链接")}</span>
<span class="arch-link-copy">${escapeHtml(linkItem.description || linkItem.href || "")}</span>
</a>
`
)
.join("")}
</div>
`;
}
function renderArchitectureNode(node, depth = 0) {
if (!node) return "";
const children = (node.items || []).map((item) => renderArchitectureNode(item, depth + 1)).join("");
const fields = renderArchitectureFields(node.fields || []);
const stats = renderArchitectureStats(node.stats || []);
const links = renderArchitectureLinks(node.links || []);
const badges = (node.badges || [])
.map((badge) => `<span class="tag">${escapeHtml(badge)}</span>`)
.join("");
const hasBody = Boolean(children || fields || stats || links || node.summary || badges);
const summaryBlock = `
<div class="arch-summary-main">
<strong class="arch-title">${escapeHtml(node.title || "未命名节点")}</strong>
${node.summary ? `<span class="arch-summary-copy">${escapeHtml(node.summary)}</span>` : ""}
</div>
<div class="arch-summary-meta">
${node.items?.length ? `<span class="section-chip">${escapeHtml(node.items.length)} 个子项</span>` : ""}
${node.fields?.length ? `<span class="section-chip">${escapeHtml(node.fields.length)} 个字段</span>` : ""}
${node.links?.length ? `<span class="section-chip">${escapeHtml(node.links.length)} 个链接</span>` : ""}
</div>
`;
if (!hasBody) {
return `
<article class="arch-leaf" data-depth="${escapeHtml(depth)}">
${summaryBlock}
</article>
`;
}
const openAttr = node.open === false ? "" : "open";
return `
<details class="arch-node" data-depth="${escapeHtml(depth)}" ${openAttr}>
<summary class="arch-summary">
${summaryBlock}
</summary>
<div class="arch-body">
${badges ? `<div class="tag-row arch-badges">${badges}</div>` : ""}
${stats}
${fields}
${links}
${children ? `<div class="arch-children">${children}</div>` : ""}
</div>
</details>
`;
}
function renderArchitecturePanel() {
const architecture = state.architecture;
if (!architecture) {
return renderPanel("architecture", "当前架构库", "未生成", "systems", `<div class="empty-state">尚未找到架构 JSON，请先执行渲染命令。</div>`);
}
const sections = architecture.sections || [];
const content = `
<div class="callout architecture-callout">
<strong>${escapeHtml(architecture.title || "当前架构库")}</strong>
<div class="plan-copy">${escapeHtml(architecture.summary || "当前工作台的结构化真值视图。")}</div>
<div class="tag-row" style="margin-top:10px;">
<span class="tag">生成时间 ${escapeHtml(formatDateTime(architecture.generated_at))}</span>
<a class="tag" href="./architecture.json" target="_blank" rel="noreferrer">架构 JSON</a>
<a class="tag" href="./docs/architecture-library.html" target="_blank" rel="noreferrer">镜像页</a>
<a class="tag" href="./docs/root-readme.html" target="_blank" rel="noreferrer">仓库入口镜像</a>
</div>
</div>
<div class="architecture-tree">
${sections.length ? sections.map((section) => renderArchitectureNode(section, 0)).join("") : `<div class="empty-state">架构库目前没有可展示的分区。</div>`}
</div>
`;
return renderPanel("architecture", "当前架构库", `${sections.length} 个分区`, "systems", content);
}
function renderEmptyWorkspace() {
$("detailWorkspace").innerHTML = `
<div class="workspace-empty">
${icon("shield", "icon icon-xl")}
<h2>选择一个运行</h2>
<p class="empty-copy">左侧队列用于切换 run。即使当前没有选中运行，你也可以直接展开下方“当前架构库”查看仓库控制面、数据层、系统分组、授权边界与本地入口。</p>
</div>
${renderArchitecturePanel()}
`;
bindPanelToggles();
}
function renderDetail() {
const run = state.runs.find((item) => item.run_id === state.selectedRunId);
if (!run) {
$("detailWorkspace").innerHTML = `
<div class="workspace-empty">
${icon("shield", "icon icon-xl")}
<h2>Select a run</h2>
<p class="empty-copy">Pick a run from the left queue to inspect timeline, evidence, logs and raw JSON.</p>
</div>
`;
renderEmptyWorkspace();
return;
}
@@ -413,7 +588,7 @@ function renderDetail() {
const profile = run.profile_meta || {};
const screenshotItems = ((run.artifact_groups || []).find((group) => group.key === "browser")?.items || []).filter((item) => item.kind === "image");
const segments = progressSegments(run.progress || {});
const browserStatus = run.browser_evidence?.present ? "Ready" : (run.browser_evidence?.required ? "Required" : "Optional");
const browserStatus = run.browser_evidence?.present ? "已采集" : (run.browser_evidence?.required ? "必需待补" : "可选");
const artifactCount = (run.artifact_groups || []).reduce((sum, group) => sum + Number(group.count || 0), 0);
const timelineContent = `
@@ -426,42 +601,42 @@ function renderDetail() {
<span class="timeline-dot"></span>
<div class="timeline-head">
<strong>${escapeHtml(item.step || "-")}</strong>
<span class="timeline-time">${escapeHtml(item.at || "-")}</span>
<span class="timeline-time">${escapeHtml(formatDateTime(item.at || "-"))}</span>
</div>
<div class="${statusClass(item.status || "default")}" style="margin-top:8px;">${escapeHtml(formatStatus(item.status || "unknown"))}</div>
<div class="timeline-detail">${escapeHtml(item.detail || "-")}</div>
</article>
`)
.join("") || `<div class="empty-state">No timeline items recorded.</div>`}
.join("") || `<div class="empty-state">当前运行没有记录时间线。</div>`}
</div>
`;
const reasoningCards = [
{
label: "Summary",
copy: advisory.summary || "No advisory summary available."
label: "概要",
copy: advisory.summary || "当前漏洞条目没有摘要。"
},
{
label: "Success Criteria",
copy: (profile.success_criteria || []).join(" | ") || "No success criteria defined."
label: "成功判据",
copy: (profile.success_criteria || []).join(" | ") || "当前 profile 没有定义成功判据。"
},
{
label: "Seed / Attack Notes",
copy: (run.reasoning_lines || []).join("\n\n") || "No reasoning lines recorded."
label: "Seed / 攻击思路",
copy: (run.reasoning_lines || []).join("\n\n") || "当前运行没有记录思路说明。"
},
{
label: "Allowed Targets",
copy: (profile.allowed_target_types || []).join(", ") || "No target scope declared."
label: "允许目标",
copy: (profile.allowed_target_types || []).join(", ") || "当前 profile 没有声明允许目标类型。"
}
];
const reasoningContent = `
${run.blocked_reason ? `<div class="callout"><strong>Failure reason</strong><div class="plan-copy">${escapeHtml(run.blocked_reason)}</div></div>` : ""}
${run.blocked_reason ? `<div class="callout"><strong>失败原因</strong><div class="plan-copy">${escapeHtml(run.blocked_reason)}</div></div>` : ""}
<div class="tag-row" style="margin-bottom:14px;">
<span class="tag">vuln family ${escapeHtml(profile.vuln_family || "unknown")}</span>
<span class="tag">cleanup ${escapeHtml(profile.cleanup_policy || "-")}</span>
<span class="tag">destructive risk ${escapeHtml(profile.destructive_risk || "-")}</span>
<span class="tag">artifact ${escapeHtml(run.artifact_mode || "-")}</span>
<span class="tag">漏洞家族 ${escapeHtml(profile.vuln_family || "未定义")}</span>
<span class="tag">清理策略 ${escapeHtml(profile.cleanup_policy || "-")}</span>
<span class="tag">破坏性风险 ${escapeHtml(profile.destructive_risk || "-")}</span>
<span class="tag">制品模式 ${escapeHtml(run.artifact_mode || "-")}</span>
</div>
<div class="plan-grid">
${reasoningCards
@@ -490,7 +665,7 @@ function renderDetail() {
(item) => `
<button class="artifact-button" type="button" data-artifact data-href="${escapeHtml(item.href)}" data-kind="${escapeHtml(item.kind)}" data-label="${escapeHtml(item.label)}">
<span>${escapeHtml(item.label)}</span>
<span class="artifact-kind">${escapeHtml(item.kind)}</span>
<span class="artifact-kind">${escapeHtml(ARTIFACT_KIND_LABELS[item.kind] || item.kind)}</span>
</button>
`
)
@@ -499,7 +674,7 @@ function renderDetail() {
</section>
`
)
.join("") || `<div class="empty-state">No artifact groups for this run.</div>`}
.join("") || `<div class="empty-state">当前运行没有可浏览的产物分组。</div>`}
${
screenshotItems.length
@@ -524,27 +699,31 @@ function renderDetail() {
<div class="viewer-card">
<div class="viewer-toolbar">
<div>
<div id="viewerLabel" class="viewer-label">${escapeHtml(state.selectedArtifact?.label || "Select an artifact")}</div>
<div id="viewerMeta" class="viewer-meta">${escapeHtml(state.selectedArtifact?.href || "Artifact preview will appear here.")}</div>
<div id="viewerLabel" class="viewer-label">${escapeHtml(state.selectedArtifact?.label || "选择一个产物")}</div>
<div id="viewerMeta" class="viewer-meta">${escapeHtml(state.selectedArtifact?.href || "这里会显示 JSON、文本、HTML 报告、截图和其他日志的预览。")}</div>
</div>
<div class="detail-actions">
<a id="viewerOpen" class="button button-secondary" href="${escapeHtml(state.selectedArtifact?.href || run.dashboard_refs.report_html)}" target="_blank" rel="noreferrer">${icon("link")}<span>Open artifact</span></a>
<button id="viewerRefresh" class="button button-secondary" type="button">${icon("refresh")}<span>Refresh preview</span></button>
<a id="viewerOpen" class="button button-secondary" href="${escapeHtml(state.selectedArtifact?.href || run.dashboard_refs.report_html)}" target="_blank" rel="noreferrer">${icon("link")}<span>打开产物</span></a>
<button id="viewerRefresh" class="button button-secondary" type="button">${icon("refresh")}<span>刷新预览</span></button>
</div>
</div>
<div id="viewerFrame" class="viewer-frame"><pre>Select a report, log, screenshot, JSON or HTML artifact to preview it here.</pre></div>
<div id="viewerFrame" class="viewer-frame"><pre>选择报告、日志、截图、JSON 或 HTML 产物后，会在这里直接预览。</pre></div>
</div>
`;
const sourceLinks = [
advisory.official_source_url
? `<a href="${escapeHtml(advisory.official_source_url)}" target="_blank" rel="noreferrer">${escapeHtml(advisory.official_source_url)}</a>`
: `<span class="muted">当前漏洞条目没有关联官方来源。</span>`,
...(advisory.secondary_source_urls || []).map((url) => `<a href="${escapeHtml(url)}" target="_blank" rel="noreferrer">${escapeHtml(url)}</a>`)
].join("");
const sourcesContent = `
<div class="tag-row">
${(advisory.aliases || []).map((alias) => `<span class="tag">${escapeHtml(alias)}</span>`).join("")}
${(advisory.secure_code_topics || []).map((topic) => `<a class="tag" href="./docs/secure-code-index.html" target="_blank" rel="noreferrer">${escapeHtml(topic)}</a>`).join("")}
</div>
<div class="source-links">
${advisory.official_source_url ? `<a href="${escapeHtml(advisory.official_source_url)}" target="_blank" rel="noreferrer">${escapeHtml(advisory.official_source_url)}</a>` : `<span class="muted">No official source linked.</span>`}
${(advisory.secondary_source_urls || []).map((url) => `<a href="${escapeHtml(url)}" target="_blank" rel="noreferrer">${escapeHtml(url)}</a>`).join("")}
</div>
<div class="source-links">${sourceLinks}</div>
`;
const rawRunContent = `<article class="json-card"><pre>${escapeHtml(JSON.stringify(run, null, 2))}</pre></article>`;
@@ -563,42 +742,43 @@ function renderDetail() {
</div>
</div>
<h2 class="detail-title">${escapeHtml(advisory.title || run.advisory_id)}</h2>
<div class="detail-subtitle">${escapeHtml(advisory.summary || "No advisory summary available.")}</div>
<div class="detail-subtitle">${escapeHtml(advisory.summary || "当前漏洞条目没有摘要。")}</div>
<div class="detail-actions">
<a class="button button-primary" href="${escapeHtml(run.dashboard_refs.report_html)}" target="_blank" rel="noreferrer">${icon("report")}<span>HTML report</span></a>
<a class="button button-secondary" href="${escapeHtml(run.dashboard_refs.report_md)}" target="_blank" rel="noreferrer">${icon("markdown")}<span>Markdown</span></a>
<a class="button button-secondary" href="${escapeHtml(run.dashboard_refs.bundle)}" target="_blank" rel="noreferrer">${icon("json")}<span>Run JSON</span></a>
<a class="button button-primary" href="${escapeHtml(run.dashboard_refs.report_html)}" target="_blank" rel="noreferrer">${icon("report")}<span>HTML 报告</span></a>
<a class="button button-secondary" href="${escapeHtml(run.dashboard_refs.report_md)}" target="_blank" rel="noreferrer">${icon("markdown")}<span>Markdown 报告</span></a>
<a class="button button-secondary" href="${escapeHtml(run.dashboard_refs.bundle)}" target="_blank" rel="noreferrer">${icon("json")}<span>运行 JSON</span></a>
</div>
<div class="detail-stat-grid">
<article class="detail-stat">
<strong>Timeline Steps</strong>
<strong>时间线步骤</strong>
<span>${escapeHtml(run.timeline?.length || 0)}</span>
</article>
<article class="detail-stat">
<strong>Artifacts</strong>
<strong>Artifact 数</strong>
<span>${escapeHtml(artifactCount)}</span>
</article>
<article class="detail-stat">
<strong>Browser Evidence</strong>
<strong>浏览器证据</strong>
<span>${escapeHtml(browserStatus)}</span>
</article>
<article class="detail-stat">
<strong>Finished</strong>
<strong>完成时间</strong>
<span>${escapeHtml(timeAgo(run.finished_at))}</span>
</article>
</div>
</section>
${renderPanel("timeline", "Progress Timeline", `${escapeHtml(run.timeline?.length || 0)} steps`, "timeline", timelineContent)}
${renderPanel("reasoning", "Attack Plan & Reasoning", escapeHtml(profile.vuln_family || "unknown"), "reasoning", reasoningContent)}
${renderPanel("evidence", "Evidence Explorer", `${escapeHtml(run.artifact_groups?.length || 0)} groups`, "evidence", evidenceContent)}
${renderPanel("logs", "Live Log Viewer", state.selectedArtifact ? "active" : "idle", "logs", logContent)}
${renderPanel("sources", "Sources & Fix Topics", `${escapeHtml((advisory.secondary_source_urls || []).length + (advisory.official_source_url ? 1 : 0))} links`, "sources", sourcesContent)}
${renderPanel("run_json", "Run JSON", "raw", "json", rawRunContent)}
${renderPanel("advisory_json", "Advisory JSON", "raw", "json", rawAdvisoryContent)}
${renderPanel("profile_json", "Profile JSON", "raw", "json", rawProfileContent)}
${renderPanel("timeline", "进度时间线", `${escapeHtml(run.timeline?.length || 0)} 步`, "timeline", timelineContent)}
${renderPanel("reasoning", "攻击方案与推理", escapeHtml(profile.vuln_family || "未定义"), "reasoning", reasoningContent)}
${renderPanel("evidence", "证据浏览器", `${escapeHtml(run.artifact_groups?.length || 0)} 组`, "evidence", evidenceContent)}
${renderPanel("logs", "实时日志查看器", state.selectedArtifact ? "已选产物" : "等待选择", "logs", logContent)}
${renderPanel("sources", "来源与修复主题", `${escapeHtml((advisory.secondary_source_urls || []).length + (advisory.official_source_url ? 1 : 0))} 条链接`, "sources", sourcesContent)}
${renderArchitecturePanel()}
${renderPanel("run_json", "运行 JSON", "原始数据", "json", rawRunContent)}
${renderPanel("advisory_json", "漏洞条目 JSON", "原始数据", "json", rawAdvisoryContent)}
${renderPanel("profile_json", "复现档案 JSON", "原始数据", "json", rawProfileContent)}
`;
bindPanelToggles();
@@ -663,15 +843,16 @@ function startRefreshLoop() {
async function loadData(preserveSelection = true) {
const previous = state.selectedRunId;
renderSyncState("loading", "Refreshing", new Date().toLocaleTimeString());
renderSyncState("loading", "刷新中", `本地时间 ${new Date().toLocaleTimeString("zh-CN", { hour12: false })}`);
try {
const [summary, runs, systems, advisories, profiles] = await Promise.all([
const [summary, runs, systems, advisories, profiles, architecture] = await Promise.all([
fetchJson("./summary.json"),
fetchJson("./runs.json"),
fetchJson("./systems.json"),
fetchJson("./advisories.json"),
fetchJson("./profiles.json")
fetchJson("./profiles.json"),
fetchJson("./architecture.json")
]);
state.summary = summary;
@@ -679,6 +860,7 @@ async function loadData(preserveSelection = true) {
state.systems = systems;
state.advisories = advisories;
state.profiles = profiles;
state.architecture = architecture;
hydrateFilters();
const hashRun = location.hash.startsWith("#run=") ? location.hash.replace("#run=", "") : null;
@@ -690,11 +872,11 @@ async function loadData(preserveSelection = true) {
}
renderAll();
renderSyncState("live", "Live", summary.generated_at || new Date().toISOString());
renderSyncState("live", "实时同步", `最近生成 ${formatDateTime(summary.generated_at || new Date().toISOString())}`);
} catch (error) {
$("runQueue").innerHTML = `<div class="empty-state">Dashboard load failed: ${escapeHtml(error.message)}</div>`;
$("detailWorkspace").innerHTML = `<div class="workspace-empty"><h2>Load failed</h2><p class="empty-copy">${escapeHtml(error.message)}</p></div>`;
renderSyncState("error", "Load Failed", error.message);
$("runQueue").innerHTML = `<div class="empty-state">工作台加载失败：${escapeHtml(error.message)}</div>`;
$("detailWorkspace").innerHTML = `<div class="workspace-empty"><h2>加载失败</h2><p class="empty-copy">${escapeHtml(error.message)}</p></div>`;
renderSyncState("error", "加载失败", error.message);
}
}

168
scripts/lab/dashboard_templates/lovart/assets/styles.css
查看文件

@@ -963,6 +963,171 @@ select {
text-underline-offset: 3px;
}
.architecture-tree {
display: grid;
gap: 14px;
}
.architecture-callout {
border-color: rgba(77, 141, 255, 0.28);
background: rgba(77, 141, 255, 0.08);
}
.arch-node,
.arch-leaf {
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 16px;
background: rgba(255, 255, 255, 0.025);
}
.arch-node + .arch-node,
.arch-leaf + .arch-node,
.arch-node + .arch-leaf,
.arch-leaf + .arch-leaf {
margin-top: 12px;
}
.arch-node summary {
list-style: none;
}
.arch-node summary::-webkit-details-marker {
display: none;
}
.arch-summary {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 15px 16px;
cursor: pointer;
}
.arch-summary::after {
content: "";
width: 9px;
height: 9px;
margin-top: 6px;
border-right: 2px solid rgba(255, 255, 255, 0.72);
border-bottom: 2px solid rgba(255, 255, 255, 0.72);
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.arch-node[open] > .arch-summary::after {
transform: rotate(225deg);
}
.arch-summary-main {
display: grid;
gap: 6px;
min-width: 0;
}
.arch-title {
font-size: 0.98rem;
}
.arch-summary-copy {
color: var(--text-secondary);
line-height: 1.5;
font-size: 0.88rem;
}
.arch-summary-meta {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.arch-body {
display: grid;
gap: 14px;
padding: 0 16px 16px;
}
.arch-badges {
margin-top: -2px;
}
.arch-stat-grid,
.arch-field-grid,
.arch-link-grid {
display: grid;
gap: 12px;
}
.arch-stat-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.arch-stat,
.arch-field,
.arch-link-card {
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 14px;
background: rgba(255, 255, 255, 0.03);
}
.arch-stat,
.arch-field {
padding: 12px 14px;
}
.arch-stat-label,
.arch-field-label,
.arch-link-label {
display: block;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.72rem;
}
.arch-stat-value {
display: block;
margin-top: 8px;
font-size: 1.1rem;
}
.arch-field-value,
.arch-link-copy {
margin-top: 8px;
color: var(--text-primary);
line-height: 1.58;
white-space: pre-wrap;
word-break: break-word;
font-size: 0.9rem;
}
.arch-link-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.arch-link-card {
display: block;
padding: 12px 14px;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.arch-link-card:hover {
transform: translateY(-1px);
border-color: rgba(77, 141, 255, 0.42);
background: rgba(77, 141, 255, 0.08);
}
.arch-children {
display: grid;
gap: 12px;
padding-left: 14px;
border-left: 1px solid rgba(148, 163, 184, 0.12);
}
.arch-leaf {
padding: 14px 16px;
}
.json-card pre {
margin: 0;
max-height: 420px;
@@ -1050,7 +1215,8 @@ select {
.tag-row,
.panel-meta,
.viewer-toolbar,
.dashboard-footer {
.dashboard-footer,
.arch-summary {
flex-direction: column;
align-items: stretch;
}