shellward 0.6.8 → 0.7.0

package/src/compliance/html-report.ts

@@ -1,7 +1,10 @@
-// src/compliance/html-report.ts — HTML 合规报告（合规包雏形）
+// src/compliance/html-report.ts — HTML 合规报告（合规包）
 //
 // 终端输出给开发者看；这份 HTML 给法务/合规/测评机构看 —— 可在浏览器打开、
 // 打印成 PDF、用于等保/PIPL 备案存档。自包含（内联 CSS、零外部依赖、无需联网）。
+//
+// 设计目标：专业、可信、克制——环形评分仪表、语义化状态药丸、severity 彩色标签、
+// 卡片化分组、品牌色克制使用、清晰层级。
 
 import { REGULATION_NAMES } from './regulations.js'
 import type { Regulation } from './regulations.js'
@@ -13,19 +16,29 @@ const STATUS: Record<ControlStatus, { zh: string; en: string; cls: string }> = {
   pass: { zh: '合规', en: 'Pass', cls: 'pass' },
   warn: { zh: '部分', en: 'Partial', cls: 'warn' },
   fail: { zh: '不合规', en: 'Fail', cls: 'fail' },
-  manual: { zh: '待确认', en: 'Manual', cls: 'manual' },
+  manual: { zh: '待确认', en: 'Review', cls: 'manual' },
 }
 
-const KIND: Record<FindingKind, { zh: string; en: string }> = {
-  overseas: { zh: '数据出境风险', en: 'Data export risk' },
-  secret: { zh: '硬编码密钥', en: 'Hardcoded secret' },
-  pii: { zh: '个人信息暴露', en: 'PII exposure' },
-  'env-perm': { zh: '.env 权限', en: '.env permission' },
+const KIND: Record<FindingKind, { zh: string; en: string; icon: string }> = {
+  overseas: { zh: '数据出境风险', en: 'Data export risk', icon: '🌐' },
+  secret: { zh: '硬编码密钥', en: 'Hardcoded secret', icon: '🔑' },
+  pii: { zh: '个人信息暴露', en: 'PII exposure', icon: '🪪' },
+  'env-perm': { zh: '.env 权限', en: '.env permission', icon: '📂' },
 }
 const KIND_ORDER: FindingKind[] = ['overseas', 'secret', 'pii', 'env-perm']
 const REG_ORDER: Regulation[] = ['CSL', 'PIPL', 'MLPS', 'CBDT', 'GENAI']
 
-const GRADE_COLOR: Record<string, string> = { A: '#15803d', B: '#65a30d', C: '#d97706', D: '#dc2626' }
+const GRADE: Record<string, { color: string; zh: string; en: string }> = {
+  A: { color: '#16a34a', zh: '优秀', en: 'Excellent' },
+  B: { color: '#65a30d', zh: '良好', en: 'Good' },
+  C: { color: '#d97706', zh: '及格', en: 'Fair' },
+  D: { color: '#dc2626', zh: '不及格', en: 'Poor' },
+}
+const SEV: Record<string, { zh: string; en: string }> = {
+  critical: { zh: '严重', en: 'Critical' },
+  high: { zh: '高', en: 'High' },
+  medium: { zh: '中', en: 'Medium' },
+}
 
 export interface HtmlReportMeta {
   /** 扫描的项目根 */
@@ -41,53 +54,69 @@ export function renderHtmlReport(
 ): string {
   const zh = locale === 'zh'
   const t = (z: string, e: string) => (zh ? z : e)
-  const gradeColor = GRADE_COLOR[report.grade] || '#475569'
+  const g = GRADE[report.grade] || { color: '#475569', zh: report.grade, en: report.grade }
   const when = report.generatedAt.slice(0, 19).replace('T', ' ')
 
-  const sections: string[] = []
+  const S: string[] = []
 
-  // ===== 评分卡 =====
-  sections.push(`
-  <section class="score-card">
-    <div class="gauge" style="--c:${gradeColor}">
-      <div class="score">${report.score}<span>/100</span></div>
-      <div class="grade" style="color:${gradeColor}">${esc(report.grade)}</div>
+  // ===== 评分 Hero =====
+  S.push(`
+  <section class="hero">
+    <div class="gauge" style="--p:${report.score};--c:${g.color}">
+      <div class="gauge-in">
+        <div class="gscore">${report.score}<small>/100</small></div>
+        <div class="ggrade" style="color:${g.color}">${esc(report.grade)} · ${t(g.zh, g.en)}</div>
+      </div>
     </div>
-    <div class="summary">
-      <div class="bar"><div class="fill" style="width:${report.score}%;background:${gradeColor}"></div></div>
-      <ul class="counts">
-        <li class="pass">🟢 ${t('合规', 'Pass')} ${report.passed}</li>
-        <li class="warn">🟡 ${t('部分', 'Partial')} ${report.warned}</li>
-        <li class="fail">🔴 ${t('不合规', 'Fail')} ${report.failed}</li>
-        <li class="manual">⚪ ${t('待确认', 'Manual')} ${report.manual}</li>
-      </ul>
-      ${report.projectPenalty ? `<p class="penalty">${t('含项目实测风险扣分', 'Includes project-scan penalty')} −${report.projectPenalty}</p>` : ''}
+    <div class="hero-side">
+      <div class="stat-row">
+        ${stat('pass', '🟢', t('合规', 'Pass'), report.passed)}
+        ${stat('warn', '🟡', t('部分', 'Partial'), report.warned)}
+        ${stat('fail', '🔴', t('不合规', 'Fail'), report.failed)}
+        ${stat('manual', '⚪', t('待确认', 'Review'), report.manual)}
+      </div>
+      ${report.projectPenalty ? `<div class="penalty">⚠ ${t('含项目实测风险扣分', 'Includes project-scan penalty')} <b>−${report.projectPenalty}</b></div>` : ''}
+      <p class="hero-note">${t(
+        '得分基于本次可静态观测的项目风险。⚪ 待确认项需把 ShellWard 部署为运行时防护或人工核验。',
+        'Score reflects statically-observable project risk. ⚪ items need runtime deployment or manual review.')}</p>
     </div>
   </section>`)
 
   // ===== 项目实测风险 =====
-  sections.push(`<h2>🔍 ${t('项目实测风险', 'Project Scan Findings')}</h2>`)
-  sections.push(`<p class="muted">${t('已扫描', 'Scanned')} ${scan.filesScanned} ${t('个文件', 'files')}${scan.truncated ? t('（已达上限）', ' (limit reached)') : ''}</p>`)
+  S.push(sectionHead('🔍', t('项目实测风险', 'Project Scan Findings'),
+    t(`已扫描 ${scan.filesScanned} 个文件${scan.truncated ? '（已达上限）' : ''}`,
+      `Scanned ${scan.filesScanned} files${scan.truncated ? ' (limit reached)' : ''}`)))
+
   if (scan.findings.length === 0) {
-    sections.push(`<p class="ok">🟢 ${t('未在项目文件中发现硬编码密钥、个人信息暴露或境外端点。', 'No hardcoded secrets, PII, or overseas endpoints found.')}</p>`)
+    S.push(`<div class="empty">🟢 ${t('未在项目文件中发现硬编码密钥、个人信息暴露或境外端点。',
+      'No hardcoded secrets, PII, or overseas endpoints found in project files.')}</div>`)
   } else {
+    S.push('<div class="chips">')
+    for (const k of KIND_ORDER) if (scan.counts[k] > 0) {
+      S.push(`<span class="chip"><b>${scan.counts[k]}</b> ${KIND[k].icon} ${t(KIND[k].zh, KIND[k].en)}</span>`)
+    }
+    S.push('</div>')
     for (const kind of KIND_ORDER) {
       const items = scan.findings.filter(f => f.kind === kind)
       if (items.length === 0) continue
-      sections.push(`<h3>${t(KIND[kind].zh, KIND[kind].en)} (${items.length})</h3>`)
-      sections.push('<table class="findings"><thead><tr>'
-        + `<th>${t('位置', 'Location')}</th><th>${t('说明', 'Detail')}</th><th>${t('严重度', 'Severity')}</th></tr></thead><tbody>`)
+      S.push(`<h3 class="sub">${KIND[kind].icon} ${t(KIND[kind].zh, KIND[kind].en)} <span class="n">${items.length}</span></h3>`)
+      S.push('<table class="tbl"><tbody>')
       for (const f of items) {
         const loc = f.line ? `${f.file}:${f.line}` : f.file
-        sections.push(`<tr><td class="loc">${esc(loc)}</td><td>${esc(f.detail)}</td><td class="sev-${f.severity}">${f.severity}</td></tr>`)
+        S.push(`<tr>
+          <td class="loc"><code>${esc(loc)}</code></td>
+          <td>${esc(f.detail)}</td>
+          <td class="right">${sevPill(f.severity, zh)}</td></tr>`)
       }
-      sections.push('</tbody></table>')
+      S.push('</tbody></table>')
     }
   }
 
   // ===== 境内合规替代建议 =====
   const overseas = scan.findings.filter(f => f.kind === 'overseas')
   if (overseas.length > 0) {
+    S.push(sectionHead('✅', t('境内合规替代建议', 'Domestic Compliance Alternatives'),
+      t('把数据出境风险变成可执行的迁移路径', 'Turn data-export risk into a migration path')))
     const seen = new Set<string>()
     const providers: { key: string; zh?: string; en?: string }[] = []
     for (const f of overseas) {
@@ -96,45 +125,51 @@ export function renderHtmlReport(
       seen.add(k)
       providers.push({ key: f.endpointId || f.provider_en || '', zh: f.provider_zh, en: f.provider_en })
     }
-    sections.push(`<h2>✅ ${t('境内合规替代建议', 'Domestic Compliance Alternatives')}</h2>`)
-    sections.push('<ul class="migrate">')
+    S.push('<div class="migrate">')
     for (const p of providers) {
       const s = suggestDomestic(p.key, p.zh, p.en)
-      sections.push(`<li><b>${esc(zh ? s.overseas_zh : s.overseas_en)}</b> → ${esc(zh ? s.difficulty_zh : s.difficulty_en)}</li>`)
+      const low = (zh ? s.difficulty_zh : s.difficulty_en).startsWith(zh ? '低' : 'Low')
+      S.push(`<div class="mrow"><b>${esc(zh ? s.overseas_zh : s.overseas_en)}</b>
+        <span class="mtag ${low ? 'low' : 'mid'}">${t('迁移', 'Migrate')}: ${esc(zh ? s.difficulty_zh : s.difficulty_en)}</span></div>`)
     }
-    sections.push('</ul>')
+    S.push('</div>')
     const alts = suggestDomestic(providers[0].key, providers[0].zh, providers[0].en).alternatives
-    sections.push('<table class="findings"><thead><tr>'
+    S.push('<table class="tbl alts"><thead><tr>'
       + `<th>${t('境内模型', 'Domestic model')}</th><th>${t('厂商', 'Vendor')}</th><th>${t('OpenAI 兼容 base_url', 'OpenAI-compatible base_url')}</th></tr></thead><tbody>`)
     for (const m of alts) {
-      sections.push(`<tr><td>${esc(zh ? m.name_zh : m.name_en)}</td><td>${esc(m.vendor_zh)}</td><td class="loc">${esc(m.baseUrl)}</td></tr>`)
+      S.push(`<tr><td><b>${esc(zh ? m.name_zh : m.name_en)}</b></td><td class="muted">${esc(m.vendor_zh)}</td><td class="loc"><code>${esc(m.baseUrl)}</code></td></tr>`)
     }
-    sections.push('</tbody></table>')
-    sections.push(`<p class="muted">${t('对使用 openai SDK 的项目：通常仅需把 base_url 与 api_key 换成上表任一境内模型即可，业务代码无需改动。', 'For openai-SDK projects: usually just swap base_url + api_key — no code change.')}</p>`)
+    S.push('</tbody></table>')
+    S.push(`<p class="note">💡 ${t('对使用 openai SDK 的项目：通常仅需把 base_url 与 api_key 换成上表任一境内模型即可，业务代码无需改动。',
+      'For openai-SDK projects: usually just swap base_url + api_key — no code change.')}</p>`)
   }
 
   // ===== 控制项明细 =====
-  sections.push(`<h2>📋 ${t('合规控制项明细', 'Compliance Controls')}</h2>`)
+  S.push(sectionHead('📋', t('合规控制项明细', 'Compliance Controls'),
+    t('按法规分组；⚪ 项为运行时/人工核验', 'By regulation; ⚪ = runtime / manual review')))
   const grouped = groupBy(report.results)
   for (const reg of REG_ORDER) {
     const items = grouped[reg]
     if (!items || items.length === 0) continue
-    sections.push(`<h3>${esc(zh ? REGULATION_NAMES[reg].zh : REGULATION_NAMES[reg].en)}</h3>`)
-    sections.push('<table class="controls"><thead><tr>'
-      + `<th>${t('状态', 'Status')}</th><th>${t('控制项', 'Control')}</th><th>${t('条款', 'Article')}</th><th>${t('结论', 'Result')}</th></tr></thead><tbody>`)
+    const p = items.filter(r => r.status === 'pass').length
+    const f = items.filter(r => r.status === 'fail').length
+    S.push(`<div class="reg">
+      <div class="reg-head"><span>${esc(zh ? REGULATION_NAMES[reg].zh : REGULATION_NAMES[reg].en)}</span>
+        <span class="reg-mini">${p ? `<i class="d pass"></i>${p}` : ''}${f ? `<i class="d fail"></i>${f}` : ''}</span></div>
+      <table class="tbl ctrl"><tbody>`)
     for (const r of items) {
       const st = STATUS[r.status]
-      sections.push(`<tr><td><span class="badge ${st.cls}">${zh ? st.zh : st.en}</span></td>`
-        + `<td>${esc(zh ? r.control.title_zh : r.control.title_en)}</td>`
-        + `<td class="loc">${esc(r.control.article)}</td>`
-        + `<td>${esc(zh ? r.detail_zh : r.detail_en)}</td></tr>`)
+      S.push(`<tr class="${st.cls}">
+        <td class="st">${statusPill(r.status, zh)}</td>
+        <td class="ttl"><b>${esc(zh ? r.control.title_zh : r.control.title_en)}</b><span class="art">${esc(r.control.article)}</span></td>
+        <td class="${r.status === 'manual' ? 'faint' : ''}">${esc(zh ? r.detail_zh : r.detail_en)}</td></tr>`)
     }
-    sections.push('</tbody></table>')
+    S.push('</tbody></table></div>')
   }
 
   const disclaimer = t(
     '本报告由 ShellWard 合规网关自动生成，帮助评估并满足合规技术要求，不构成法律意见，亦不替代算法备案/定级备案/PIA 等主体责任。⚪ 待确认项需结合业务人工判定。',
-    'Generated by ShellWard Compliance Gateway. Assists with technical compliance; not legal advice.')
+    'Generated by ShellWard Compliance Gateway. Assists with technical compliance; not legal advice. ⚪ items require manual review.')
 
   return `<!DOCTYPE html>
 <html lang="${zh ? 'zh-CN' : 'en'}">
@@ -147,16 +182,37 @@ export function renderHtmlReport(
 <body>
 <main>
   <header>
-    <h1>🛡️ ${t('AI 应用合规体检报告', 'AI Application Compliance Report')}</h1>
-    <p class="meta">${t('生成时间', 'Generated')}: ${esc(when)} UTC ｜ ${t('扫描目录', 'Scanned')}: <code>${esc(meta.root)}</code></p>
+    <div class="brand">🛡️ Shell<span>Ward</span> <em>${t('合规网关', 'Compliance Gateway')}</em></div>
+    <h1>${t('AI 应用合规体检报告', 'AI Application Compliance Report')}</h1>
+    <p class="meta">${t('生成', 'Generated')}: ${esc(when)} UTC&nbsp;&nbsp;·&nbsp;&nbsp;${t('扫描目录', 'Path')}: <code>${esc(meta.root)}</code></p>
   </header>
-  ${sections.join('\n')}
+  ${S.join('\n')}
   <footer>${esc(disclaimer)}</footer>
 </main>
 </body>
 </html>`
 }
 
+// ===== 小组件 =====
+
+function stat(cls: string, icon: string, label: string, n: number): string {
+  return `<div class="stat ${cls}"><div class="sn">${n}</div><div class="sl">${icon} ${label}</div></div>`
+}
+
+function sectionHead(icon: string, title: string, sub: string): string {
+  return `<div class="shead"><h2>${icon} ${esc(title)}</h2><span>${esc(sub)}</span></div>`
+}
+
+function statusPill(s: ControlStatus, zh: boolean): string {
+  const st = STATUS[s]
+  return `<span class="pill ${st.cls}">${zh ? st.zh : st.en}</span>`
+}
+
+function sevPill(sev: string, zh: boolean): string {
+  const s = SEV[sev] || { zh: sev, en: sev }
+  return `<span class="sev ${sev}">${zh ? s.zh : s.en}</span>`
+}
+
 function groupBy(results: ControlResult[]): Record<Regulation, ControlResult[]> {
   const out = {} as Record<Regulation, ControlResult[]>
   for (const r of results) (out[r.control.regulation] ||= []).push(r)
@@ -174,37 +230,132 @@ function esc(s: string): string {
 }
 
 const CSS = `
-:root{--ink:#1e293b;--muted:#64748b;--line:#e2e8f0;--bg:#f8fafc}
+:root{
+  --ink:#0f172a;--muted:#64748b;--faint:#94a3b8;--line:#eaeef4;--bg:#eef1f6;--card:#fff;
+  --brand:#cb0000;
+  --pass:#16a34a;--pass-bg:#dcfce7;--warn:#b45309;--warn-bg:#fef3c7;
+  --fail:#dc2626;--fail-bg:#fee2e2;--manual:#64748b;--manual-bg:#eef2f7;
+}
 *{box-sizing:border-box}
-body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
-main{max-width:920px;margin:0 auto;padding:32px 24px;background:#fff}
-header{border-bottom:2px solid var(--line);padding-bottom:16px;margin-bottom:24px}
-h1{font-size:24px;margin:0 0 6px}
-h2{font-size:19px;margin:32px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
-h3{font-size:15px;margin:20px 0 8px;color:var(--muted)}
+body{margin:0;background:var(--bg);color:var(--ink);
+  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
+  -webkit-font-smoothing:antialiased}
+main{max-width:880px;margin:28px auto;background:var(--card);border-radius:16px;
+  box-shadow:0 1px 3px rgba(15,23,42,.06),0 12px 32px rgba(15,23,42,.07);overflow:hidden}
+header{padding:30px 36px 22px;background:linear-gradient(180deg,#fafbfd,#fff);border-bottom:1px solid var(--line)}
+.brand{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.2px}
+.brand span{color:var(--brand)}
+.brand em{font-style:normal;color:var(--faint);font-weight:500;margin-left:4px}
+h1{font-size:25px;margin:10px 0 6px;letter-spacing:-.3px}
 .meta{color:var(--muted);font-size:13px;margin:0}
-code{background:#f1f5f9;padding:1px 5px;border-radius:4px;font-size:13px}
-.score-card{display:flex;gap:28px;align-items:center;background:#f1f5f9;border-radius:12px;padding:24px}
-.gauge{text-align:center;min-width:120px}
-.gauge .score{font-size:44px;font-weight:700;color:var(--c)}
-.gauge .score span{font-size:18px;color:var(--muted);font-weight:400}
-.gauge .grade{font-size:28px;font-weight:700}
-.summary{flex:1}
-.bar{height:14px;background:#e2e8f0;border-radius:7px;overflow:hidden;margin-bottom:12px}
-.bar .fill{height:100%}
-.counts{list-style:none;display:flex;gap:18px;flex-wrap:wrap;padding:0;margin:0;font-size:14px}
-.penalty{color:#dc2626;font-size:13px;margin:8px 0 0}
-table{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:13.5px}
-th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
-th{background:#f8fafc;font-weight:600;color:var(--muted)}
-.loc{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:#0f172a;white-space:nowrap}
-.sev-critical{color:#dc2626;font-weight:600}.sev-high{color:#ea580c}.sev-medium{color:#d97706}
-.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600}
-.badge.pass{background:#dcfce7;color:#15803d}.badge.warn{background:#fef9c3;color:#a16207}
-.badge.fail{background:#fee2e2;color:#b91c1c}.badge.manual{background:#e2e8f0;color:#475569}
-.muted{color:var(--muted);font-size:13px}
-.ok{color:#15803d;font-weight:600}
-.migrate{margin:8px 0}
-footer{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
-@media print{body{background:#fff}main{max-width:none;padding:0}h2{break-after:avoid}table{break-inside:auto}tr{break-inside:avoid}}
+.meta code{background:#f1f5f9;padding:1px 6px;border-radius:5px;font-size:12px}
+section,.reg{padding:0 36px}
+
+/* Hero 评分 */
+.hero{display:flex;gap:32px;align-items:center;margin:26px 36px;padding:26px 28px;
+  background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid var(--line);border-radius:14px}
+.gauge{--p:0;--c:#475569;flex:none;width:148px;height:148px;border-radius:50%;
+  background:conic-gradient(var(--c) calc(var(--p)*1%),#e4e9f1 0);
+  display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(15,23,42,.04)}
+.gauge-in{width:116px;height:116px;border-radius:50%;background:#fff;display:flex;flex-direction:column;
+  align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(15,23,42,.08)}
+.gscore{font-size:42px;font-weight:800;line-height:1;letter-spacing:-1px}
+.gscore small{font-size:15px;font-weight:500;color:var(--faint)}
+.ggrade{font-size:14px;font-weight:700;margin-top:6px}
+.hero-side{flex:1;min-width:0}
+.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
+.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:center}
+.stat .sn{font-size:22px;font-weight:800;line-height:1}
+.stat .sl{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap}
+.stat.pass .sn{color:var(--pass)}.stat.warn .sn{color:var(--warn)}
+.stat.fail .sn{color:var(--fail)}.stat.manual .sn{color:var(--manual)}
+.penalty{margin-top:12px;display:inline-block;background:var(--fail-bg);color:var(--fail);
+  font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:8px}
+.hero-note{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}
+
+/* 段标题 */
+.shead{display:flex;align-items:baseline;gap:12px;margin:34px 36px 14px;
+  padding-bottom:10px;border-bottom:2px solid var(--line)}
+.shead h2{font-size:18px;margin:0;font-weight:700}
+.shead span{font-size:12.5px;color:var(--faint)}
+.sub{font-size:14px;font-weight:700;color:var(--ink);margin:18px 36px 8px}
+.sub .n{display:inline-block;background:#eef2f7;color:var(--muted);font-size:12px;
+  padding:0 8px;border-radius:999px;margin-left:4px;font-weight:600}
+.empty{margin:8px 36px;padding:16px 18px;background:var(--pass-bg);color:var(--pass);
+  border-radius:10px;font-weight:600;font-size:14px}
+
+/* chips 概览 */
+.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 36px 4px}
+.chip{background:#f1f5f9;border:1px solid var(--line);border-radius:999px;
+  padding:5px 13px;font-size:13px;color:var(--muted)}
+.chip b{color:var(--ink);font-size:14px;margin-right:2px}
+
+/* 表格 */
+.tbl{width:calc(100% - 72px);margin:4px 36px 6px;border-collapse:separate;border-spacing:0;font-size:13.5px}
+.tbl td,.tbl th{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
+.tbl th{background:#f8fafc;color:var(--muted);font-weight:600;font-size:12.5px;
+  border-bottom:1px solid #e2e8f0}
+.tbl tbody tr:hover{background:#fafbfd}
+.tbl .right{text-align:right;white-space:nowrap}
+.tbl .muted{color:var(--muted)}
+.tbl .faint{color:var(--faint);font-size:13px}
+.loc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
+  background:#f1f5f9;color:#0f172a;padding:2px 7px;border-radius:5px;white-space:nowrap}
+.alts th:first-child,.alts td:first-child{width:120px}
+
+/* severity 标签 */
+.sev{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px}
+.sev.critical{background:#fee2e2;color:#b91c1c}
+.sev.high{background:#ffedd5;color:#c2410c}
+.sev.medium{background:#fef3c7;color:#b45309}
+
+/* 状态药丸 */
+.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px;white-space:nowrap}
+.pill.pass{background:var(--pass-bg);color:var(--pass)}
+.pill.warn{background:var(--warn-bg);color:var(--warn)}
+.pill.fail{background:var(--fail-bg);color:var(--fail)}
+.pill.manual{background:var(--manual-bg);color:var(--manual)}
+
+/* 境内替代 */
+.migrate{margin:6px 36px 10px;display:flex;flex-direction:column;gap:8px}
+.mrow{display:flex;align-items:center;gap:12px;font-size:14px}
+.mtag{font-size:12px;font-weight:600;padding:3px 10px;border-radius:8px}
+.mtag.low{background:var(--pass-bg);color:var(--pass)}
+.mtag.mid{background:var(--warn-bg);color:var(--warn)}
+.note{margin:8px 36px 4px;font-size:12.5px;color:var(--muted);background:#f8fafc;
+  border-left:3px solid var(--brand);padding:10px 14px;border-radius:0 8px 8px 0}
+
+/* 法规分组 */
+.reg{margin:14px 36px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
+.reg-head{display:flex;justify-content:space-between;align-items:center;
+  padding:11px 16px;background:#f8fafc;font-weight:700;font-size:14px;border-bottom:1px solid var(--line)}
+.reg-mini{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);font-weight:600}
+.reg-mini .d{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
+.reg-mini .d.pass{background:var(--pass)}.reg-mini .d.fail{background:var(--fail)}
+.reg .tbl{width:100%;margin:0}
+.reg .tbl td{padding:10px 16px}
+.reg .tbl tr:last-child td{border-bottom:0}
+.ctrl .st{width:78px}
+.ctrl .ttl{width:210px}
+.ctrl .ttl b{display:block;font-weight:600;font-size:13.5px}
+.ctrl .art{display:block;color:var(--faint);font-size:11.5px;margin-top:2px}
+.ctrl tr.fail{background:#fef6f6}
+
+footer{margin-top:30px;padding:20px 36px 30px;border-top:1px solid var(--line);
+  color:var(--faint);font-size:11.5px;line-height:1.6;background:#fafbfd}
+
+@media(max-width:640px){
+  main{margin:0;border-radius:0}
+  .hero{flex-direction:column;text-align:center;margin:18px}
+  .stat-row{grid-template-columns:repeat(2,1fr)}
+  section,.shead,.sub,.chips,.tbl,.migrate,.note,.reg{margin-left:16px;margin-right:16px}
+  .tbl{width:calc(100% - 32px)}
+}
+@media print{
+  body{background:#fff}
+  main{box-shadow:none;margin:0;max-width:none;border-radius:0}
+  .hero{background:#f8fafc}
+  .reg,.tbl tbody tr{break-inside:avoid}
+  h2,.shead{break-after:avoid}
+}
 `

package/src/web/scan-server.ts

@@ -0,0 +1,201 @@
+// src/web/scan-server.ts — ShellWard 合规扫描 web 服务（零依赖）
+//
+// 双模式，一份代码两用：
+//   1) 公网模式（部署）：贴「公开仓库 URL」或访问 /scan?repo=URL → 浅克隆 + 扫描 + 出报告
+//      公开仓库的代码本就公开，服务端扫描不涉及数据出境；私有代码引导用本地 CLI。
+//   2) 本地模式（shellward web --local，仅 127.0.0.1）：填「本地路径」扫描，私有代码不上传
+//      —— 这就是「客户端」体验（浏览器 GUI、不用命令行），但零 Electron 包袱。
+//
+// 安全加固：
+//   - 仓库 URL 域名白名单（github/gitlab/gitee...），严格正则，拒带凭据的 URL
+//   - 浅克隆 --depth 1 --single-branch，GIT_TERMINAL_PROMPT=0（不卡在私有库鉴权），30s 超时
+//   - 临时目录隔离，用完即删；扫描器只读文件、绝不执行仓库代码
+//   - 本地路径扫描仅在 --local 模式开放（公网模式拒绝 path 参数，防止扫服务器硬盘）
+//   - 并发上限，防滥用
+
+import { createServer } from 'http'
+import { spawn } from 'child_process'
+import { mkdtempSync, rmSync, existsSync, statSync } from 'fs'
+import { tmpdir } from 'os'
+import { join, resolve } from 'path'
+import { runProjectComplianceAudit } from '../compliance/audit.js'
+import { renderHtmlReport } from '../compliance/html-report.js'
+import { DEFAULT_CONFIG, resolveLocale } from '../types.js'
+
+const REPO_RE = /^https:\/\/(github\.com|gitlab\.com|gitee\.com|bitbucket\.org)\/[A-Za-z0-9_.-]+\/[A-Za-z0-9_.-]+?(?:\.git)?\/?$/
+const CLONE_TIMEOUT_MS = 30_000
+const MAX_CONCURRENT = 2
+
+export interface WebServerOptions {
+  port: number
+  /** 本地模式：开放本地路径扫描、仅监听 127.0.0.1 */
+  local?: boolean
+}
+
+/** 校验仓库 URL：仅允许白名单代码托管域名，拒绝带凭据/异常字符 */
+export function validateRepoUrl(input: string): { ok: true; url: string } | { ok: false; reason: string } {
+  const url = (input || '').trim()
+  if (!url) return { ok: false, reason: '请输入仓库地址' }
+  if (url.includes('@') || /\s/.test(url)) return { ok: false, reason: '地址含非法字符' }
+  if (!REPO_RE.test(url)) return { ok: false, reason: '仅支持 github.com / gitlab.com / gitee.com / bitbucket.org 的公开仓库 URL' }
+  return { ok: true, url }
+}
+
+export function startWebServer(opts: WebServerOptions): void {
+  const locale = resolveLocale(DEFAULT_CONFIG)
+  const host = opts.local ? '127.0.0.1' : '0.0.0.0'
+  let active = 0
+
+  const server = createServer(async (req, res) => {
+    try {
+      const u = new URL(req.url || '/', `http://localhost:${opts.port}`)
+      if (u.pathname === '/' || u.pathname === '') {
+        return send(res, 200, 'text/html', formPage(!!opts.local))
+      }
+      if (u.pathname === '/scan') {
+        if (active >= MAX_CONCURRENT) {
+          return send(res, 503, 'text/html', errorPage('服务繁忙，请稍后再试（并发上限）'))
+        }
+        const repo = u.searchParams.get('repo')
+        const path = u.searchParams.get('path')
+
+        // 本地路径扫描：仅本地模式开放
+        if (path) {
+          if (!opts.local) return send(res, 403, 'text/html', errorPage('公网模式不支持本地路径扫描；请用「公开仓库 URL」，私有代码请用本地 CLI：npx shellward scan'))
+          return await handleLocal(res, path, locale, () => { active++ }, () => { active-- })
+        }
+        if (repo) {
+          return await handleRepo(res, repo, locale, () => { active++ }, () => { active-- })
+        }
+        return send(res, 400, 'text/html', errorPage('缺少参数：repo（仓库 URL）' + (opts.local ? ' 或 path（本地路径）' : '')))
+      }
+      send(res, 404, 'text/html', errorPage('页面不存在'))
+    } catch (e: any) {
+      send(res, 500, 'text/html', errorPage('内部错误：' + esc(e?.message || String(e))))
+    }
+  })
+
+  server.on('error', (e: any) => {
+    console.error(`[ShellWard web] 启动失败: ${e?.message}`)
+    process.exit(1)
+  })
+  server.listen(opts.port, host, () => {
+    const url = `http://localhost:${opts.port}`
+    if (opts.local) {
+      console.log(`🌐 ShellWard 本地合规扫描（客户端模式）: ${url}\n   填本地路径即可扫描，私有代码不上传、不出本机。Ctrl+C 退出。`)
+    } else {
+      console.log(`🌐 ShellWard 公开仓库合规扫描: ${url} (监听 ${host}:${opts.port})\n   贴公开仓库 URL 即可体检。私有代码请用本地 CLI: npx shellward scan`)
+    }
+  })
+}
+
+async function handleRepo(res: any, repo: string, locale: 'zh' | 'en', inc: () => void, dec: () => void) {
+  const v = validateRepoUrl(repo)
+  if (!v.ok) return send(res, 400, 'text/html', errorPage(v.reason))
+  const dir = mkdtempSync(join(tmpdir(), 'sw-web-'))
+  inc()
+  try {
+    await cloneRepo(v.url, dir)
+    const { report, scan } = runProjectComplianceAudit(DEFAULT_CONFIG, dir)
+    send(res, 200, 'text/html', renderHtmlReport(report, scan, locale, { root: v.url }))
+  } catch (e: any) {
+    send(res, 502, 'text/html', errorPage('克隆/扫描失败：' + esc(e?.message || String(e)) + '。请确认是可公开访问的仓库。'))
+  } finally {
+    dec()
+    try { rmSync(dir, { recursive: true, force: true }) } catch { /* ignore */ }
+  }
+}
+
+async function handleLocal(res: any, path: string, locale: 'zh' | 'en', inc: () => void, dec: () => void) {
+  const root = resolve(path)
+  if (!existsSync(root) || !statSync(root).isDirectory()) {
+    return send(res, 400, 'text/html', errorPage('路径不存在或不是目录：' + esc(root)))
+  }
+  inc()
+  try {
+    const { report, scan } = runProjectComplianceAudit(DEFAULT_CONFIG, root)
+    send(res, 200, 'text/html', renderHtmlReport(report, scan, locale, { root }))
+  } finally {
+    dec()
+  }
+}
+
+/** 浅克隆公开仓库到临时目录（不鉴权、超时、不执行任何仓库代码） */
+function cloneRepo(url: string, dir: string): Promise<void> {
+  return new Promise((res, rej) => {
+    const p = spawn('git', ['clone', '--depth', '1', '--single-branch', '--no-tags', url, dir], {
+      env: { ...process.env, GIT_TERMINAL_PROMPT: '0', GIT_ASKPASS: 'true' },
+      timeout: CLONE_TIMEOUT_MS,
+      stdio: 'ignore',
+    })
+    p.on('error', rej)
+    p.on('close', (code, signal) => {
+      if (signal) return rej(new Error('克隆超时'))
+      code === 0 ? res() : rej(new Error('克隆失败 (git exit ' + code + ')'))
+    })
+  })
+}
+
+// ===== 页面 =====
+
+function send(res: any, code: number, type: string, body: string) {
+  res.writeHead(code, { 'Content-Type': type + '; charset=utf-8', 'X-Content-Type-Options': 'nosniff' })
+  res.end(body)
+}
+
+function formPage(local: boolean): string {
+  const field = local
+    ? `<label>本地项目路径</label>
+       <input name="path" placeholder="/Users/you/your-ai-project" autofocus>
+       <p class="hint">本地模式：代码不上传、不出本机（客户端体验）。</p>`
+    : `<label>公开仓库地址</label>
+       <input name="repo" placeholder="https://github.com/owner/repo" autofocus>
+       <p class="hint">仅支持公开仓库（GitHub / GitLab / Gitee / Bitbucket）。<b>私有/敏感代码请用本地 CLI</b>：<code>npx shellward scan</code>（不上传）。</p>`
+  return page('ShellWard 合规体检', `
+    <div class="hero">
+      <div class="logo">🛡️ Shell<span>Ward</span> 合规网关</div>
+      <h1>AI 应用合规体检</h1>
+      <p class="sub">${local ? '填本地路径' : '贴公开仓库链接'}，30 秒查出数据出境 / 硬编码密钥 / 个人信息暴露等中国合规红线。</p>
+      <form action="/scan" method="get">
+        ${field}
+        <button type="submit">开始体检 →</button>
+      </form>
+      <p class="foot">网安法 2026 · PIPL · 等保2.0 · 数据出境 · AI标识 ｜ 零依赖 · 开源 ·
+        <a href="https://github.com/jnMetaCode/shellward">GitHub ⭐</a></p>
+    </div>`)
+}
+
+function errorPage(msg: string): string {
+  return page('出错了', `<div class="hero"><div class="logo">🛡️ Shell<span>Ward</span></div>
+    <h1>⚠️ 无法完成</h1><p class="sub">${esc(msg)}</p>
+    <p><a class="back" href="/">← 返回重试</a></p></div>`)
+}
+
+function page(title: string, body: string): string {
+  return `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1"><title>${esc(title)}</title>
+<style>
+*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;
+background:linear-gradient(135deg,#eef1f6,#e2e8f0);color:#0f172a;
+font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
+.hero{background:#fff;max-width:560px;width:92%;margin:40px;padding:40px;border-radius:18px;
+box-shadow:0 12px 40px rgba(15,23,42,.12);text-align:center}
+.logo{font-weight:800;font-size:15px}.logo span{color:#cb0000}
+h1{font-size:30px;margin:14px 0 8px;letter-spacing:-.5px}
+.sub{color:#64748b;margin:0 0 26px}
+form{display:flex;flex-direction:column;gap:10px;text-align:left}
+label{font-size:13px;font-weight:600;color:#475569}
+input{padding:14px 16px;border:1px solid #cbd5e1;border-radius:10px;font-size:16px;width:100%}
+input:focus{outline:none;border-color:#cb0000;box-shadow:0 0 0 3px rgba(203,0,0,.12)}
+.hint{font-size:12.5px;color:#64748b;margin:2px 0 6px}
+.hint code{background:#f1f5f9;padding:1px 6px;border-radius:5px}
+button{background:#cb0000;color:#fff;border:0;border-radius:10px;padding:14px;font-size:16px;
+font-weight:700;cursor:pointer;margin-top:4px}button:hover{background:#a80000}
+.foot{margin:24px 0 0;font-size:12.5px;color:#94a3b8}.foot a,.back{color:#cb0000;text-decoration:none}
+.back{font-weight:600}
+</style></head><body>${body}</body></html>`
+}
+
+function esc(s: string): string {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+}