kld-sdd 2.6.13 → 2.6.15

package/skywalk-sdd/reporting/change-report-renderer.cjs

@@ -0,0 +1,349 @@
+'use strict';
+
+const { buildChangeReportModel } = require('./change-report-model.cjs');
+const { buildChangeReportViewModel } = require('./change-report-view-model.cjs');
+
+function escapeHtml(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (char) => ({
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+  }[char]));
+}
+
+function statusTone(status) {
+  if (['trusted', 'complete', 'passed', 'verified', 'implemented'].includes(status)) return 'good';
+  if (['attention', 'incomplete', 'provisional', 'needs_input', 'open'].includes(status)) return 'warn';
+  if (['failed', 'blocked', 'error'].includes(status)) return 'bad';
+  return 'neutral';
+}
+
+function metricCard({ name, code, value, state, explanation, source }) {
+  return `<article class="metric-card">
+    <div class="metric-top"><span>${escapeHtml(name)}</span><span class="metric-code">${escapeHtml(code)}</span></div>
+    <strong>${escapeHtml(value)}</strong>
+    <div class="metric-state ${statusTone(state)}">${escapeHtml(state || '暂定')}</div>
+    <p>${escapeHtml(explanation)}</p>
+    <button class="info-btn" type="button" data-info="${escapeHtml(source || explanation)}" data-drawer-title="${escapeHtml(`${name} · ${code}`)}" data-drawer-body="${escapeHtml(source || explanation)}">查看计算口径与证据</button>
+  </article>`;
+}
+
+function renderChangeReportHtml(report) {
+  if (!report.change_summary || !report.artifacts?.files) {
+    report = buildChangeReportModel(report);
+  }
+  const view = buildChangeReportViewModel(report);
+  const overviewSection = view.sections.overview;
+  const metricsSection = view.sections['metrics-stages'];
+  const issueSection = view.sections['issues-evidence'];
+  const artifactSection = view.sections['artifacts-trace'];
+  const summary = report.change_summary || {};
+  const evidence = {
+    ...(summary.evidence || {}),
+    categories: issueSection.categories || [],
+    issues: issueSection.issues || [],
+  };
+  const changed = artifactSection.changed_files || {};
+  const artifacts = artifactSection.artifacts || [];
+  const conclusionTone = statusTone(view.conclusion?.status);
+  const evidenceCategories = evidence.categories;
+  const stageNodes = metricsSection.stages || [];
+  const activeLinks = artifactSection.attribution?.active_links || [];
+  const candidateIds = artifactSection.attribution?.unassigned_candidate_event_ids || [];
+  const knownWarnings = view.known_risks?.warnings || [];
+  const warningDetails = knownWarnings.flatMap((warning) => (
+    Array.isArray(warning.items) ? warning.items : []
+  ));
+  const telemetryWarnings = view.telemetry_warnings?.by_type || {};
+  const artifactRows = artifacts.map((item) => `
+    <tr>
+      <td>${escapeHtml({
+        markdown_report: 'Markdown 报告',
+        html_report: 'HTML 报告',
+        json_report: 'JSON 报告',
+        execution_log: '执行日志',
+        manifest: '归档清单',
+        archive_zip: '归档包',
+      }[item.name] || item.name)}</td>
+      <td><span class="state ${item?.exists ? 'good' : 'neutral'}">${item?.exists ? '已生成' : '未生成'}</span></td>
+      <td class="path">${escapeHtml(item?.path || '—')}</td>
+      <td>${item?.size_display
+        ? escapeHtml(item.size_display)
+        : (item?.size_bytes == null ? '—' : escapeHtml(item.size_bytes))}</td>
+    </tr>`).join('');
+  const evidenceRows = evidenceCategories.map((group) => {
+    const issueDetails = (group.issues || []).map((issue) => [
+      `问题：${issue.issue_id}`,
+      `对象：${issue.subject || '本次变更'}`,
+      `状态：${issue.status}`,
+      `判定：${issue.verdict}`,
+      `根因：${issue.root_cause}`,
+      `预期：${issue.expected}`,
+      `实际：${issue.actual}`,
+      `影响：${issue.impact}`,
+      `修复建议：${issue.remediation}`,
+      `证据事件：${(issue.evidence_event_ids || []).join('、') || '暂无可定位事件'}`,
+    ].join('\n')).join('\n\n');
+    return `
+    <article class="issue-row">
+      <div><span class="issue-count">${escapeHtml(group.occurrence_count)}</span></div>
+      <div>
+        <h3>${escapeHtml(group.label)}</h3>
+        <p>${escapeHtml(group.affected_tasks?.length || 0)} 个关联任务 · ${escapeHtml(group.event_ids?.length || 0)} 个可定位事件</p>
+      </div>
+      <button class="text-button drawer-trigger" type="button"
+        data-drawer-title="${escapeHtml(group.label)}"
+        data-drawer-body="${escapeHtml(`${issueDetails || `规则编码：${group.code}\n状态：open\n根因：当前证据未满足规则\n预期：规则证据完整\n实际：证据不足\n修复建议：补充真实证据`}\n\n规则编码：${group.code}\n关联任务：${(group.affected_tasks || []).join('、') || '无'}\n事件：${(group.event_ids || []).join('、') || '无'}\n处置：${JSON.stringify(group.dispositions || {})}`)}">查看详情</button>
+    </article>`;
+  }).join('');
+  const stageRows = stageNodes.map((node) => {
+    const stage = node.display_stage;
+    const round = node.display_round;
+    return `
+    <tr class="tl-node">
+      <td>${escapeHtml(stage)}${round > 1 ? '²' : ''}${round > 1 ? '<span class="tl-repeat">R</span>' : ''}</td>
+      <td>${escapeHtml(round)}</td>
+      <td><span class="tl-time">${escapeHtml(node.display_start)}→${escapeHtml(node.display_end)}</span><br>${escapeHtml(node.display_duration)}</td>
+      <td><span class="state ${statusTone(node.display_result === 'success' ? 'passed' : node.display_result)}">${escapeHtml(node.display_result)}</span></td>
+    </tr>`;
+  }).join('');
+
+  const metricCards = (metricsSection.metric_cards || []).map(metricCard).join('');
+  const summaryCards = (overviewSection.cards || []).map((card) => `
+      <article class="summary-card"><span>${escapeHtml(card.label)}</span><strong>${escapeHtml(card.value)}</strong></article>`).join('');
+  const metricRows = (metricsSection.metric_rows || []).map((row) => `
+          <tr><td>${escapeHtml(row.label)}${row.code ? ` <span class="metric-code">${escapeHtml(row.code)}</span>` : ''}</td><td>${escapeHtml(row.value)}</td></tr>`).join('');
+
+  return `<!doctype html>
+<html lang="zh-CN" data-theme="light">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="sdd-semantic-digest" content="${view.semantic_digest}">
+<title>SDD 效果度量报告 · ${escapeHtml(report.change)}</title>
+<style>
+:root{--ink:#16213a;--muted:#68758c;--line:#dfe5ef;--paper:#fff;--canvas:#eef2f7;--blue:#175cd3;--blue-soft:#edf4ff;--good:#067647;--good-soft:#ecfdf3;--warn:#b54708;--warn-soft:#fffaeb;--bad:#b42318;--bad-soft:#fef3f2;--shadow:0 18px 54px rgba(31,43,66,.1)}
+*{box-sizing:border-box}
+[hidden]{display:none!important}
+body{margin:0;min-width:1040px;background:var(--canvas);color:var(--ink);font:14px/1.55 "Segoe UI","Microsoft YaHei",sans-serif}
+button{font:inherit}
+.shell{width:min(1280px,calc(100% - 56px));margin:26px auto 46px}
+.report-head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:var(--shadow);backdrop-filter:blur(12px)}
+.identity{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 16px;gap:24px}
+.eyebrow{color:var(--blue);font-weight:750;font-size:12px;letter-spacing:.08em}
+h1{font-size:26px;line-height:1.2;margin:3px 0 7px;letter-spacing:-.025em}
+.meta,.micro{color:var(--muted);font-size:12px}.meta code{color:#35425a}
+.freshness{text-align:right}.freshness strong{display:block;color:var(--good);font-size:13px}
+.tabs{display:flex;padding:0 18px;border-top:1px solid #eef1f5}
+.tabs button{border:0;border-bottom:3px solid transparent;background:none;color:#56647b;padding:14px 18px 12px;cursor:pointer;font-weight:650}
+.tabs button:hover{color:var(--blue)}.tabs button:focus-visible{outline:3px solid #b2ccff;outline-offset:-3px}
+.tabs button[aria-selected="true"]{color:var(--blue);border-color:var(--blue)}
+.panel{background:#f8fafc;border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;padding:22px;min-height:560px}
+.hero{display:grid;grid-template-columns:1.55fr .45fr;gap:16px;margin-bottom:16px}
+.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}
+.conclusion{background:linear-gradient(135deg,#f7faff,#eef5ff);border-color:#c8d9f5}
+.conclusion h2,.section-head h2{margin:0}.conclusion p{font-size:18px;font-weight:680;color:#203e73;margin:10px 0 0}
+.scope{display:flex;flex-direction:column;justify-content:center}.scope strong{font-size:19px}.scope span{color:var(--muted);margin-top:4px}
+.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
+.summary-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;min-height:112px}
+.summary-card span{color:var(--muted);font-size:12px}.summary-card strong{display:block;font-size:24px;margin:7px 0 2px;font-variant-numeric:tabular-nums}.summary-card p{margin:0;color:var(--muted);font-size:11px}
+.section{margin-top:16px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:11px}.section-head p{margin:0;color:var(--muted);font-size:12px}
+.metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
+.metric-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;min-height:210px;display:flex;flex-direction:column}
+.metric-top{display:flex;justify-content:space-between;gap:8px;color:#344054;font-weight:700}.metric-code{color:var(--blue);background:var(--blue-soft);border-radius:999px;padding:1px 7px;font-size:11px;white-space:nowrap}
+.metric-card>strong{font-size:21px;margin:15px 0 5px}.metric-card p{color:var(--muted);font-size:12px;margin:10px 0;flex:1}
+.metric-state,.state{display:inline-flex;width:max-content;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;background:#f2f4f7;color:#475467}
+.good{background:var(--good-soft)!important;color:var(--good)!important}.warn{background:var(--warn-soft)!important;color:var(--warn)!important}.bad{background:var(--bad-soft)!important;color:var(--bad)!important}.neutral{background:#f2f4f7!important;color:#475467!important}
+.text-button{border:0;background:none;color:var(--blue);padding:0;cursor:pointer;text-align:left;font-weight:650;font-size:12px}.text-button:hover{text-decoration:underline}.text-button:focus-visible{outline:3px solid #b2ccff;outline-offset:3px}
+.info-btn{border:0;background:none;color:var(--blue);padding:0;cursor:pointer;text-align:left;font-weight:650;font-size:12px}.muted-null{color:var(--muted)}
+.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.wide-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
+table{width:100%;border-collapse:collapse}th,td{padding:11px 10px;border-bottom:1px solid #edf0f4;text-align:left;vertical-align:top}th{font-size:12px;color:var(--muted)}tr:last-child td{border-bottom:0}.path{max-width:420px;overflow-wrap:anywhere;color:#475467;font-family:Consolas,monospace;font-size:11px}
+.issue-summary{display:flex;align-items:center;gap:12px;background:var(--warn-soft);border:1px solid #fedf89;border-radius:14px;padding:15px 18px;margin-bottom:12px}.issue-summary strong{font-size:18px}.issue-summary p{margin:0;color:#7a2e0e}
+.issue-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid #edf0f4}.issue-row:last-child{border-bottom:0}.issue-count{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-weight:800}.issue-row h3{margin:0 0 2px}.issue-row p{margin:0;color:var(--muted);font-size:12px}
+.callout{border-left:4px solid var(--blue);background:var(--blue-soft);padding:12px 14px;border-radius:0 10px 10px 0;color:#344054}
+.drawer-backdrop{position:fixed;inset:0;z-index:40;background:rgba(15,23,42,.42);display:none}.drawer-backdrop.open{display:block}
+.drawer{position:absolute;right:0;top:0;height:100%;width:520px;background:#fff;padding:26px;box-shadow:-20px 0 70px rgba(15,23,42,.22);overflow:auto}
+.drawer-head{display:flex;justify-content:space-between;gap:16px;align-items:start}.drawer h2{margin:0}.drawer pre{white-space:pre-wrap;word-break:break-word;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:15px;color:#344054}
+.icon-button{border:1px solid var(--line);background:#fff;border-radius:9px;width:34px;height:34px;cursor:pointer}.icon-button:focus-visible{outline:3px solid #b2ccff}
+@media print{body{min-width:0;background:#fff}.shell{width:100%;margin:0}.report-head{position:static;box-shadow:none}.tabs{display:none}.panel{display:block!important;border:0;min-height:0;break-before:page}.drawer-backdrop{display:none!important}}
+</style>
+</head>
+<body>
+<main class="shell">
+  <header class="report-head">
+    <div class="identity">
+      <div>
+        <div class="eyebrow">SDD · 单次变更报告</div>
+        <h1>${escapeHtml(report.change)}</h1>
+        <div class="meta">仅展示本次变更 · Schema ${escapeHtml(report.schema_version)} · 指标契约 ${escapeHtml(report.metrics_contract)}</div>
+      </div>
+      <div class="freshness"><strong>数据范围已锁定</strong><span class="micro">生成于 ${escapeHtml(report.generated_at || '未知')}</span></div>
+    </div>
+    <nav class="tabs" role="tablist" aria-label="报告章节">
+      <button role="tab" id="tab-overview" aria-controls="panel-overview" aria-selected="true" tabindex="0">概览</button>
+      <button role="tab" id="tab-metrics" aria-controls="panel-metrics" aria-selected="false" tabindex="-1">指标与阶段</button>
+      <button role="tab" id="tab-evidence" aria-controls="panel-evidence" aria-selected="false" tabindex="-1">问题与证据</button>
+      <button role="tab" id="tab-artifacts" aria-controls="panel-artifacts" aria-selected="false" tabindex="-1">产物与追溯</button>
+    </nav>
+  </header>
+
+  <section class="panel" role="tabpanel" id="panel-overview" aria-labelledby="tab-overview">
+    <div class="hero">
+      <article class="card conclusion">
+        <span class="state ${conclusionTone}">${escapeHtml(view.conclusion?.status === 'trusted' ? '结论可信' : '需要关注')}</span>
+        <h2>一句话结论</h2>
+        <p>${escapeHtml(view.conclusion?.text || '当前证据不足，暂不能形成可信结论。')}</p>
+      </article>
+      <article class="card scope"><span>七个标准阶段总耗时</span><strong>${escapeHtml(overviewSection.scope_duration)}</strong><span>辅助阶段不进入效率分母</span></article>
+    </div>
+    <div class="summary-grid">${summaryCards}</div>
+    <div class="section">
+      <div class="section-head"><h2>核心指标</h2><p>中文业务名称为主，编码仅作定位标签</p></div>
+      <div class="metric-grid">${metricCards}</div>
+    </div>
+    <div class="section card">
+      <div class="section-head"><h2>需要处理</h2><p>证据问题已归并到“问题与证据”页签</p></div>
+      <p class="${evidence.category_count ? 'warn' : 'good'} state">${evidence.category_count ? `${escapeHtml(evidence.category_count)} 类问题待处置` : '当前无需处理'}</p>
+      ${telemetryWarnings.task_update_reuse > 0 ? '<div class="quality-alert">检测到 task_update 复用；相关可信度已降级。</div>' : ''}
+    </div>
+  </section>
+
+  <section class="panel" role="tabpanel" id="panel-metrics" aria-labelledby="tab-metrics" hidden>
+    <div class="section-head"><div><h2>指标与阶段</h2><p>本页只解释本次变更的计算口径和阶段执行。</p></div></div>
+    <div class="two-col">
+      <article class="wide-card">
+        <h3>效率拆分</h3>
+        <table><tbody>${metricRows}</tbody></table>
+      </article>
+      <article class="wide-card">
+        <h3>时间线与阶段执行明细</h3>
+        <table><thead><tr><th>阶段</th><th>轮次</th><th>耗时</th><th>结果</th></tr></thead><tbody>${stageRows || '<tr><td colspan="4">暂无阶段明细</td></tr>'}</tbody></table>
+      </article>
+    </div>
+    <p class="callout">标准阶段固定为：提案、规格、设计、任务拆解、检查、实现、归档。测试和探索属于辅助阶段，不计入效率分母。</p>
+  </section>
+
+  <section class="panel" role="tabpanel" id="panel-evidence" aria-labelledby="tab-evidence" hidden>
+    <div class="section-head"><div><h2>问题与证据</h2><p>按问题类别聚合；展开后再查看任务和事件，不把规则命中误称为独立缺陷。</p></div></div>
+    <div class="issue-summary"><strong>${escapeHtml(evidence.category_count ?? 0)} 类问题</strong><p>${escapeHtml(evidence.occurrence_count ?? 0)} 次规则命中</p></div>
+    <article class="wide-card">${evidenceRows || '<p class="micro">当前没有证据问题。</p>'}</article>
+    <article class="wide-card section">
+      <h3>已知风险</h3>
+      <p>严重问题：${escapeHtml(view.known_risks?._available ? (view.known_risks.severe_issues?.length ?? 0) : '无数据')}</p>
+      ${warningDetails.length > 0
+        ? warningDetails.map((item) => `<p>${escapeHtml(item.description || '待确认项')}${item.target ? `（${escapeHtml(item.target)}）` : ''}</p>`).join('')
+        : '<p class="micro">无需修复</p>'}
+    </article>
+    ${Array.isArray(view.process_notes?.notes) && view.process_notes.notes.length > 0 ? `
+    <article class="wide-card section">
+      <h3>过程记录事件</h3>
+      <p>过程事件总数：${escapeHtml(view.process_notes.total ?? 0)}</p>
+      ${view.process_notes.notes.slice(0, 40).map((note) => `<p>[${escapeHtml(note.stage || 'unknown')}] ${escapeHtml(note.kind || 'note')}${note.round ? ` R${escapeHtml(note.round)}` : ''}：${escapeHtml(note.summary || '')}</p>`).join('')}
+    </article>` : ''}
+    <p class="callout">${escapeHtml(evidence.note || '同一任务可能命中多条规则，命中次数不等于独立缺陷数。')}</p>
+  </section>
+
+  <section class="panel" role="tabpanel" id="panel-artifacts" aria-labelledby="tab-artifacts" hidden>
+    <div class="section-head"><div><h2>产物与追溯</h2><p>文件口径、变更归因和实际落盘产物均独立展示。</p></div></div>
+    <div class="two-col">
+      <article class="wide-card">
+        <h3>变更文件 · 双口径</h3>
+        <table><tbody>
+          <tr><td>任务事件累计文件</td><td><strong>${escapeHtml(changed.task_event_files_changed ?? '暂无数据')}</strong></td></tr>
+          <tr><td>最终输出快照文件</td><td><strong>${escapeHtml(changed.final_output_files_changed ?? '暂无数据')}</strong></td></tr>
+          <tr><td>新增 / 删除行</td><td>${escapeHtml(changed.added_lines ?? '暂无数据')} / ${escapeHtml(changed.deleted_lines ?? '暂无数据')}</td></tr>
+          <tr><td>数据来源</td><td>${escapeHtml(changed.diff_source || '未知')}</td></tr>
+        </tbody></table>
+        <p class="micro">${escapeHtml(changed.reconciliation_note || '暂无口径说明。')}</p>
+      </article>
+      <article class="wide-card">
+        <h3>归因审计</h3>
+        <table><tbody>
+          <tr><td>显式关联历史事件</td><td>${escapeHtml(artifactSection.attribution_summary.linked_source_event_count)}</td></tr>
+          <tr><td>有效关联</td><td>${escapeHtml(artifactSection.attribution_summary.active_link_count)}</td></tr>
+          <tr><td>未归属候选</td><td>${escapeHtml(artifactSection.attribution_summary.unassigned_candidate_count)}</td></tr>
+        </tbody></table>
+        <button class="text-button drawer-trigger" type="button" data-drawer-title="归因审计详情" data-drawer-body="${escapeHtml(`有效关联：${JSON.stringify(activeLinks)}\n未归属候选：${candidateIds.join('、') || '无'}`)}">查看归因事件</button>
+      </article>
+    </div>
+    <article class="wide-card section">
+      <h3>产物清单 · 实际产物 · 归档结果</h3>
+      <table><thead><tr><th>产物</th><th>状态</th><th>路径</th><th>大小</th></tr></thead><tbody>${artifactRows}</tbody></table>
+    </article>
+    <article class="wide-card section"><h3>产物备注</h3><p class="micro">归档目录：${escapeHtml(report.archive_result?.archive_path || report.artifacts?.archive_path || '暂不可用')}</p><p class="micro">已知风险明细仅在“问题与证据”页展示，本页不重复列表。</p></article>
+  </section>
+</main>
+
+<div class="drawer-backdrop" id="drawerBackdrop" aria-hidden="true">
+  <aside class="drawer" role="dialog" aria-modal="true" aria-labelledby="drawerTitle" aria-describedby="drawerBody" tabindex="-1">
+    <div class="drawer-head"><div><div class="eyebrow">报告详情</div><h2 id="drawerTitle">详情</h2></div><button class="icon-button" id="drawerClose" type="button" aria-label="关闭详情">×</button></div>
+    <pre id="drawerBody"></pre>
+  </aside>
+</div>
+<noscript><p class="callout">当前浏览器未启用脚本；请打印本报告或查看 Markdown / JSON 产物。查看证据时可使用“问题与证据”章节。</p></noscript>
+<script>
+(function(){
+  var tabs=Array.prototype.slice.call(document.querySelectorAll('[role="tab"]'));
+  var panels=Array.prototype.slice.call(document.querySelectorAll('[role="tabpanel"]'));
+  function activate(tab,focus){
+    tabs.forEach(function(item){
+      var selected=item===tab;
+      item.setAttribute('aria-selected',selected?'true':'false');
+      item.tabIndex=selected?0:-1;
+      document.getElementById(item.getAttribute('aria-controls')).hidden=!selected;
+    });
+    if(focus)tab.focus();
+  }
+  tabs.forEach(function(tab,index){
+    tab.addEventListener('click',function(){activate(tab,false);});
+    tab.addEventListener('keydown',function(event){
+      var next=index;
+      if(event.key === 'ArrowRight')next=(index+1)%tabs.length;
+      else if(event.key==='ArrowLeft')next=(index-1+tabs.length)%tabs.length;
+      else if(event.key==='Home')next=0;
+      else if(event.key==='End')next=tabs.length-1;
+      else return;
+      event.preventDefault();activate(tabs[next],true);
+    });
+  });
+  var backdrop=document.getElementById('drawerBackdrop');
+  var drawer=backdrop.querySelector('.drawer');
+  var drawerTitle=document.getElementById('drawerTitle');
+  var drawerBody=document.getElementById('drawerBody');
+  var lastTrigger=null;
+  function closeDrawer(){
+    if(!backdrop.classList.contains('open'))return;
+    backdrop.classList.remove('open');backdrop.setAttribute('aria-hidden','true');
+    if(lastTrigger)lastTrigger.focus();
+  }
+  document.querySelectorAll('.drawer-trigger,.info-btn').forEach(function(button){
+    button.addEventListener('click',function(){
+      lastTrigger=button;drawerTitle.textContent=button.dataset.drawerTitle||'详情';
+      drawerBody.textContent=button.dataset.drawerBody||'暂无详情';
+      backdrop.classList.add('open');backdrop.setAttribute('aria-hidden','false');drawer.focus();
+    });
+  });
+  document.getElementById('drawerClose').addEventListener('click',closeDrawer);
+  backdrop.addEventListener('click',function(event){if(event.target===backdrop)closeDrawer();});
+  document.addEventListener('keydown',function(event){
+    if(event.key === 'Escape')closeDrawer();
+    var e=event;
+    if(e.key==='Tab'&&backdrop.classList.contains('open')){
+      var items=drawer.querySelectorAll('button,[href],[tabindex]:not([tabindex="-1"])');
+      var first=items[0],last=items[items.length-1];
+      if(event.shiftKey&&document.activeElement===first){event.preventDefault();last.focus();}
+      else if(!event.shiftKey&&document.activeElement===last){event.preventDefault();first.focus();}
+    }
+  });
+})();
+</script>
+</body>
+</html>`;
+}
+
+module.exports = {
+  escapeHtml,
+  renderChangeReportHtml,
+};