@cicctencent/agent-server 0.2.41 → 0.2.43

package/dist/esm/doc-generator/report-renderer.js

@@ -0,0 +1,663 @@
+/**
+ * @file report-renderer.ts — HTML 报告模板渲染器
+ * @description 将结构化 ReportData 渲染为完整 HTML 报表（ECharts + 指标卡 + 表格 + 标签）
+ * 移植自 html-renderer.cjs，新增 radar / gauge 图表类型和 kv-list block 类型
+ */
+import * as path from 'path';
+import * as fs from 'fs';
+import { marked } from 'marked';
+const DARK_THEME = {
+    css: {
+        bgPage: '#0a0e17', bgCard: '#111827', bgSubtle: '#1a2235', bgHover: '#1f2a3f',
+        textPrimary: '#e2e8f0', textSecondary: '#94a3b8', textTertiary: '#64748b',
+        accent: '#f0c040', accent2: '#38bdf8', purple: '#a78bfa',
+        profit: '#34d399', loss: '#f87171', warn: '#fbbf24', border: '#1e293b',
+    },
+    chartColors: ['#00e5ff', '#ffc107', '#00ff88', '#a882ff', '#ff6b9d', '#ff9100', '#448aff', '#64ffda', '#ffd740', '#40c4ff'],
+    chart: {
+        textColor: '#8892b0', labelColor: '#ccd6f6', borderColor: 'rgba(255,255,255,0.06)',
+        bgDark: '#0a1628', tooltipBg: 'rgba(10,22,40,0.95)', tooltipBorder: 'rgba(255,255,255,0.1)',
+        tooltipText: '#ccd6f6', labelLine: 'rgba(255,255,255,0.15)',
+    },
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif",
+};
+const LIGHT_THEME = {
+    css: {
+        bgPage: '#f8fafc', bgCard: '#ffffff', bgSubtle: '#f1f5f9', bgHover: '#e2e8f0',
+        textPrimary: '#1e293b', textSecondary: '#475569', textTertiary: '#94a3b8',
+        accent: '#2563eb', accent2: '#0891b2', purple: '#7c3aed',
+        profit: '#059669', loss: '#dc2626', warn: '#d97706', border: '#e2e8f0',
+    },
+    chartColors: ['#2563eb', '#0891b2', '#059669', '#7c3aed', '#dc2626', '#d97706', '#0d9488', '#4f46e5', '#ea580c', '#16a34a'],
+    chart: {
+        textColor: '#64748b', labelColor: '#334155', borderColor: 'rgba(0,0,0,0.08)',
+        bgDark: '#f8fafc', tooltipBg: 'rgba(255,255,255,0.98)', tooltipBorder: 'rgba(0,0,0,0.08)',
+        tooltipText: '#1e293b', labelLine: 'rgba(0,0,0,0.15)',
+    },
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif",
+};
+function loadTheme(themeName) {
+    // 优先从项目 themes 目录加载
+    const candidates = [
+        path.join(__dirname, '..', '..', '..', '..', 'data', 'doc-templates', 'html', 'themes'),
+        path.join(process.cwd(), 'data', 'doc-templates', 'html', 'themes'),
+    ];
+    const name = themeName || 'dark';
+    for (const dir of candidates) {
+        const p = path.join(dir, name + '.json');
+        if (fs.existsSync(p)) {
+            try {
+                return JSON.parse(fs.readFileSync(p, 'utf8'));
+            }
+            catch { /* fallback */ }
+        }
+    }
+    return name === 'light' ? LIGHT_THEME : DARK_THEME;
+}
+// ============================================================
+// HTML 转义
+// ============================================================
+function escHtml(s) {
+    if (s == null)
+        return '';
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+function escJs(s) {
+    if (!s)
+        return '';
+    return String(s).replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+}
+// ============================================================
+// Markdown → HTML 转换（用于 text-block 内容渲染）
+// ============================================================
+let _markedConfigured = false;
+function markdownToHtml(md) {
+    if (!md)
+        return '';
+    if (!_markedConfigured) {
+        marked.setOptions({ breaks: true, gfm: true });
+        _markedConfigured = true;
+    }
+    try {
+        return marked.parse(md);
+    }
+    catch {
+        return escHtml(md).replace(/\n/g, '<br>');
+    }
+}
+// ============================================================
+// CSS 生成
+// ============================================================
+function generateCSS(theme) {
+    const c = theme.css;
+    return `:root {
+  --color-bg-page: ${c.bgPage};
+  --color-bg-card: ${c.bgCard};
+  --color-bg-subtle: ${c.bgSubtle};
+  --color-bg-hover: ${c.bgHover};
+  --color-text-primary: ${c.textPrimary};
+  --color-text-secondary: ${c.textSecondary};
+  --color-text-tertiary: ${c.textTertiary};
+  --color-border-muted: ${c.border};
+  --color-accent-primary: ${c.accent};
+  --color-accent-soft: ${c.accent2};
+  --color-profit: ${c.profit};
+  --color-loss: ${c.loss};
+  --color-warning: ${c.warn};
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  font-family: ${theme.fontFamily};
+  background: var(--color-bg-page);
+  color: var(--color-text-primary);
+  min-height: 100vh;
+  line-height: 1.5;
+}
+.container { max-width: 1280px; margin: 0 auto; padding: 32px 24px; }
+.header {
+  text-align: center; padding: 40px 24px 32px;
+  position: relative; overflow: hidden;
+}
+.header::before {
+  content: ''; position: absolute;
+  top: -60px; left: 50%; transform: translateX(-50%);
+  width: 400px; height: 200px;
+  background: radial-gradient(ellipse, ${c.accent}20 0%, transparent 70%);
+  pointer-events: none;
+}
+.header h1 {
+  font-size: 28px; font-weight: 600;
+  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-soft));
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  background-clip: text; margin-bottom: 8px; letter-spacing: 0.02em;
+}
+.header .subtitle {
+  font-size: 14px; color: var(--color-text-secondary);
+  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
+}
+.header .subtitle span { display: inline-flex; align-items: center; gap: 4px; }
+.header .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-primary); }
+.metrics {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 14px; margin-bottom: 24px;
+}
+.metric-card {
+  background: var(--color-bg-card); border: 1px solid var(--color-border-muted);
+  border-radius: 12px; padding: 20px 18px; position: relative; overflow: hidden;
+  transition: all 0.3s ease;
+}
+.metric-card:hover {
+  border-color: var(--color-accent-primary); transform: translateY(-2px);
+  box-shadow: 0 8px 25px ${c.accent}14;
+}
+.metric-card::after {
+  content: ''; position: absolute; top: 0; right: 0;
+  width: 60px; height: 60px;
+  background: radial-gradient(circle at top right, ${c.accent}10, transparent 70%);
+  pointer-events: none;
+}
+.metric-card .icon { font-size: 22px; margin-bottom: 8px; }
+.metric-card .label {
+  font-size: 11px; color: var(--color-text-tertiary);
+  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
+}
+.metric-card .value {
+  font-size: 28px; font-weight: 600;
+  background: linear-gradient(135deg, var(--color-text-primary), var(--color-accent-primary));
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+.metric-card .sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }
+.section {
+  background: var(--color-bg-card); border: 1px solid var(--color-border-muted);
+  border-radius: 14px; padding: 22px 20px; margin-bottom: 18px;
+}
+.section-title {
+  font-size: 16px; font-weight: 600; margin-bottom: 16px;
+  display: flex; align-items: center; gap: 10px;
+}
+.section-title::before {
+  content: ''; width: 4px; height: 18px;
+  background: linear-gradient(180deg, var(--color-accent-primary), var(--color-accent-soft));
+  border-radius: 2px;
+}
+.grid-2 {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  gap: 18px; margin-bottom: 18px;
+}
+.chart-box { width: 100%; height: 320px; }
+.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.data-table thead th {
+  text-align: left; padding: 10px 12px;
+  color: var(--color-text-tertiary); font-weight: 500; font-size: 11px;
+  text-transform: uppercase; letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--color-border-muted);
+}
+.data-table tbody td {
+  padding: 10px 12px; border-bottom: 1px solid ${c.border}99;
+  color: var(--color-text-secondary);
+}
+.data-table tbody tr:hover td { background: var(--color-bg-hover); color: var(--color-text-primary); }
+.rank {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px; border-radius: 6px; font-size: 12px; font-weight: 600;
+}
+.rank-1 { background: ${c.accent}33; color: var(--color-accent-primary); }
+.rank-2 { background: #c0c0c026; color: #c0c0c0; }
+.rank-3 { background: #cd7f3226; color: #cd7f32; }
+.rank-n { color: var(--color-text-tertiary); }
+.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
+.tag {
+  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
+  border: 1px solid var(--color-border-muted); background: var(--color-bg-subtle);
+  color: var(--color-text-secondary); transition: all 0.2s;
+}
+.tag:hover { border-color: var(--color-accent-primary); color: var(--color-accent-primary); }
+.tag.accent { border-color: ${c.accent}4d; color: var(--color-accent-primary); }
+.tag.accent2 { border-color: ${c.accent2}4d; color: var(--color-accent-soft); }
+.tag.purple { border-color: ${c.purple}4d; color: var(--color-accent-soft); }
+.tag.warning { border-color: ${c.warn}4d; color: var(--color-warning); }
+.tag.success { border-color: ${c.profit}4d; color: var(--color-profit); }
+.tag.info { border-color: ${c.accent2}4d; color: var(--color-accent-soft); }
+.quality-grid {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
+}
+.quality-item {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 12px 14px; background: var(--color-bg-subtle); border-radius: 8px;
+  border: 1px solid ${c.warn}26; font-size: 13px; color: var(--color-text-secondary);
+}
+.quality-item .warn-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
+.text-block { font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; }
+.text-block > *:first-child { margin-top: 0; }
+.text-block > *:last-child { margin-bottom: 0; }
+.text-block h1, .text-block h2, .text-block h3, .text-block h4, .text-block h5, .text-block h6 {
+  color: var(--color-text-primary); font-weight: 600; margin: 20px 0 10px; line-height: 1.3;
+}
+.text-block h1 { font-size: 22px; }
+.text-block h2 { font-size: 18px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-muted); }
+.text-block h3 { font-size: 16px; }
+.text-block h4 { font-size: 14px; }
+.text-block p { margin: 8px 0; }
+.text-block ul, .text-block ol { margin: 8px 0; padding-left: 22px; }
+.text-block li { margin: 4px 0; }
+.text-block ul li::marker { color: var(--color-accent-primary); }
+.text-block ol li::marker { color: var(--color-accent-soft); }
+.text-block strong { color: var(--color-text-primary); font-weight: 600; }
+.text-block em { color: var(--color-accent-soft); font-style: italic; }
+.text-block code {
+  background: var(--color-bg-subtle); padding: 2px 6px; border-radius: 4px;
+  font-size: 13px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  color: var(--color-accent-primary);
+}
+.text-block pre {
+  background: var(--color-bg-subtle); border: 1px solid var(--color-border-muted);
+  border-radius: 8px; padding: 12px 14px; margin: 10px 0; overflow-x: auto;
+}
+.text-block pre code { background: none; padding: 0; color: var(--color-text-secondary); }
+.text-block blockquote {
+  border-left: 3px solid var(--color-accent-soft); padding: 4px 14px;
+  margin: 10px 0; color: var(--color-text-tertiary); background: var(--color-bg-subtle);
+  border-radius: 0 6px 6px 0;
+}
+.text-block a { color: var(--color-accent-soft); text-decoration: none; }
+.text-block a:hover { text-decoration: underline; }
+.text-block hr { border: none; border-top: 1px solid var(--color-border-muted); margin: 16px 0; }
+.text-block table {
+  width: 100%; border-collapse: collapse; margin: 12px 0;
+  font-size: 13px; border: 1px solid var(--color-border-muted); border-radius: 8px; overflow: hidden;
+}
+.text-block table thead th {
+  text-align: left; padding: 10px 12px;
+  color: var(--color-text-tertiary); font-weight: 500; font-size: 11px;
+  text-transform: uppercase; letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--color-border-muted); background: var(--color-bg-subtle);
+}
+.text-block table tbody td {
+  padding: 10px 12px; border-bottom: 1px solid ${c.border}55;
+  color: var(--color-text-secondary);
+}
+.text-block table tbody tr:last-child td { border-bottom: none; }
+.text-block table tbody tr:hover td { background: var(--color-bg-hover); color: var(--color-text-primary); }
+.kv-list { display: flex; flex-direction: column; gap: 8px; }
+.kv-item {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 10px 14px; background: var(--color-bg-subtle); border-radius: 8px;
+  border: 1px solid ${c.border}66;
+}
+.kv-item .kv-label { font-size: 13px; color: var(--color-text-secondary); }
+.kv-item .kv-value { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
+.kv-item.highlight { border-color: ${c.accent}4d; }
+.kv-item.highlight .kv-value { color: var(--color-accent-primary); }
+.actions {
+  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; justify-content: center;
+}
+.btn {
+  padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 500;
+  cursor: pointer; border: none; transition: all 0.2s; font-family: inherit;
+}
+.btn-primary {
+  background: linear-gradient(135deg, ${c.accent}, ${c.accent}cc); color: ${c.bgPage};
+}
+.btn-primary:hover { box-shadow: 0 4px 16px ${c.accent}4d; transform: translateY(-1px); }
+.btn-outline {
+  background: transparent; color: var(--color-text-secondary);
+  border: 1px solid var(--color-border-muted);
+}
+.btn-outline:hover { border-color: var(--color-accent-soft); color: var(--color-accent-soft); }
+.footer {
+  text-align: center; padding: 24px;
+  color: var(--color-text-tertiary); font-size: 12px;
+  border-top: 1px solid var(--color-border-muted); margin-top: 8px;
+}
+@media (max-width: 768px) {
+  .container { padding: 16px 12px; }
+  .header h1 { font-size: 22px; }
+  .metrics { grid-template-columns: repeat(2, 1fr); }
+  .grid-2 { grid-template-columns: 1fr; }
+  .chart-box { height: 260px; }
+}`;
+}
+// ============================================================
+// HTML 块渲染器
+// ============================================================
+function renderHeader(data) {
+    const parts = [];
+    if (data.date)
+        parts.push(`<span><span class="dot"></span> ${escHtml(data.date)}</span>`);
+    if (data.subtitle)
+        parts.push(`<span>${escHtml(data.subtitle)}</span>`);
+    return `<div class="header">
+  <h1>${escHtml(data.title || 'Report')}</h1>
+  <div class="subtitle">${parts.join('\n    ')}</div>
+</div>`;
+}
+function renderMetrics(data) {
+    if (!data.metrics?.length)
+        return '';
+    const cards = data.metrics.map(m => `  <div class="metric-card">
+    <div class="icon">${escHtml(m.icon || '📊')}</div>
+    <div class="label">${escHtml(m.label)}</div>
+    <div class="value">${escHtml(String(m.value))}</div>
+    ${m.sub ? '<div class="sub">' + escHtml(m.sub) + '</div>' : ''}
+  </div>`).join('\n');
+    return `<div class="metrics">\n${cards}\n</div>`;
+}
+function renderChartBlock(block) {
+    const id = block.id || ('chart-' + Math.random().toString(36).slice(2, 8));
+    const height = block.chart?.height || 320;
+    const title = block.title ? `<div class="section-title">${escHtml(block.title)}</div>` : '';
+    return `<div class="section">
+  ${title}
+  <div id="${id}" class="chart-box" style="height:${height}px;"></div>
+</div>`;
+}
+function renderTableBlock(block) {
+    const t = block.table;
+    if (!t)
+        return '';
+    const title = block.title ? `<div class="section-title">${escHtml(block.title)}</div>` : '';
+    const headerRow = '<tr>' + t.headers.map(h => `<th>${escHtml(h)}</th>`).join('') + '</tr>';
+    const bodyRows = t.rows.map((row, ri) => {
+        const cells = row.map((cell, ci) => {
+            if (ci === 0 && t.ranked) {
+                const rc = ri === 0 ? 'rank-1' : ri === 1 ? 'rank-2' : ri === 2 ? 'rank-3' : 'rank-n';
+                return `<td><span class="rank ${rc}">${ri + 1}</span> ${escHtml(cell)}</td>`;
+            }
+            return `<td>${escHtml(cell)}</td>`;
+        });
+        return '<tr>' + cells.join('') + '</tr>';
+    }).join('\n');
+    return `<div class="section">
+  ${title}
+  <table class="data-table">
+    <thead>${headerRow}</thead>
+    <tbody>${bodyRows}</tbody>
+  </table>
+</div>`;
+}
+function renderTagsBlock(block) {
+    const title = block.title ? `<div class="section-title">${escHtml(block.title)}</div>` : '';
+    const groups = (block.groups || []).map(g => {
+        const styleClass = g.style || '';
+        const label = g.label ? `<div style="font-size:12px;color:var(--color-text-tertiary);margin-bottom:8px;">${escHtml(g.label)}</div>` : '';
+        const tags = g.items.map(item => `<span class="tag ${styleClass}">${escHtml(item)}</span>`).join('');
+        return `${label}\n    <div class="tag-cloud">${tags}</div>`;
+    }).join('\n  <div style="margin-top:14px;">\n    ');
+    return `<div class="section">\n  ${title}\n  ${groups}\n</div>`;
+}
+function renderTextBlock(block) {
+    const title = block.title ? `<div class="section-title">${escHtml(block.title)}</div>` : '';
+    return `<div class="section">\n  ${title}\n  <div class="text-block">${markdownToHtml(block.content || '')}</div>\n</div>`;
+}
+function renderAlertsBlock(block, theme) {
+    const title = block.title || '⚠️ 注意事项';
+    const items = (block.items || []).map(item => `<div class="quality-item">
+      <span class="warn-icon">⚠️</span>
+      <span>${escHtml(item)}</span>
+    </div>`).join('\n    ');
+    return `<div class="section" style="border-color:${theme.css.warn}33;">
+  <div class="section-title" style="color:var(--color-warning);">${escHtml(title)}</div>
+  <div class="quality-grid">\n    ${items}\n  </div>
+</div>`;
+}
+function renderKvListBlock(block) {
+    const title = block.title ? `<div class="section-title">${escHtml(block.title)}</div>` : '';
+    const items = (block.kvItems || []).map(kv => {
+        const cls = kv.highlight ? 'kv-item highlight' : 'kv-item';
+        return `<div class="${cls}">
+      <span class="kv-label">${escHtml(kv.label)}</span>
+      <span class="kv-value">${escHtml(kv.value)}</span>
+    </div>`;
+    }).join('\n    ');
+    return `<div class="section">\n  ${title}\n  <div class="kv-list">\n    ${items}\n  </div>\n</div>`;
+}
+function renderBlock(block, theme) {
+    switch (block.type) {
+        case 'chart': return renderChartBlock(block);
+        case 'table': return renderTableBlock(block);
+        case 'tags': return renderTagsBlock(block);
+        case 'text': return renderTextBlock(block);
+        case 'alerts': return renderAlertsBlock(block, theme);
+        case 'kv-list': return renderKvListBlock(block);
+        default: return '';
+    }
+}
+function renderSections(data, theme) {
+    if (!data.sections?.length)
+        return '';
+    return data.sections.map(section => {
+        const layout = section.layout || 'full';
+        const blocks = section.blocks.map(b => renderBlock(b, theme)).join('\n');
+        if (layout === 'grid-2')
+            return `<div class="grid-2">\n${blocks}\n</div>`;
+        return blocks;
+    }).join('\n\n');
+}
+function renderActions(data) {
+    if (!data.actions?.length)
+        return '';
+    const buttons = data.actions.map(a => {
+        const cls = a.primary ? 'btn btn-primary' : 'btn btn-outline';
+        return `  <button class="${cls}" onclick="sendPrompt('${escJs(a.prompt || a.label)}')">${escHtml(a.label)}</button>`;
+    }).join('\n');
+    return `<div class="actions">\n${buttons}\n</div>`;
+}
+function renderFooter(data) {
+    if (!data.footer)
+        return '';
+    return `<div class="footer">${escHtml(data.footer)}</div>`;
+}
+function collectCharts(data) {
+    const charts = [];
+    if (!data.sections)
+        return charts;
+    for (const section of data.sections) {
+        for (const block of section.blocks || []) {
+            if (block.type === 'chart' && block.chart) {
+                charts.push({ id: block.id || ('chart-' + Math.random().toString(36).slice(2, 8)), chart: block.chart });
+            }
+        }
+    }
+    return charts;
+}
+function generateChartJS(item, theme) {
+    const { id, chart } = item;
+    const ct = theme.chart;
+    const tooltipBase = `tooltip: { backgroundColor: cv('--color-bg-card','${ct.tooltipBg}'), borderColor: cv('--color-border-muted','${ct.tooltipBorder}'), textStyle: { color: cv('--color-text-primary','${ct.tooltipText}') }`;
+    const type = chart.type || 'bar';
+    const chartData = chart.data || [];
+    if (type === 'pie' || type === 'doughnut') {
+        const radius = type === 'doughnut' ? "['45%','72%']" : "['0%','72%']";
+        const pieData = chartData.map((d, i) => `{ value: ${d.value}, name: '${escJs(d.name)}', itemStyle: { color: COLORS[${i % theme.chartColors.length}] } }`).join(',\n          ');
+        return `  (function() {
+    var c = echarts.init(document.getElementById('${id}'));
+    c.setOption({
+      ${tooltipBase}, trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+      series: [{
+        type: 'pie', radius: ${radius}, center: ['50%','52%'],
+        emphasis: { label: { fontSize: 16, fontWeight: 'bold' } },
+        label: { color: cv('--color-text-secondary','${ct.textColor}'), fontSize: 11 },
+        labelLine: { lineStyle: { color: cv('--color-border-muted','${ct.labelLine}') } },
+        data: [${pieData}]
+      }]
+    });
+  })();`;
+    }
+    if (type === 'radar') {
+        const indicators = chart.indicators || chartData.map(d => ({ name: d.name, max: Math.ceil(d.value * 1.2) }));
+        const indStr = indicators.map(ind => {
+            const maxVal = (ind.max != null && !Number.isNaN(ind.max) && ind.max > 0) ? ind.max : 100;
+            return `{ name: '${escJs(ind.name)}', max: ${maxVal} }`;
+        }).join(', ');
+        const values = chartData.length > 0
+            ? chartData.map(d => d.value).join(', ')
+            : indicators.map(() => 0).join(', ');
+        return `  (function() {
+    var c = echarts.init(document.getElementById('${id}'));
+    c.setOption({
+      ${tooltipBase},
+      radar: {
+        indicator: [${indStr}],
+        axisName: { color: cv('--color-text-secondary','${ct.textColor}'), fontSize: 11 },
+        splitArea: { areaStyle: { color: ['transparent'] } },
+        splitLine: { lineStyle: { color: cv('--color-border-muted','${ct.borderColor}') } },
+        axisLine: { lineStyle: { color: cv('--color-border-muted','${ct.borderColor}') } }
+      },
+      series: [{
+        type: 'radar',
+        data: [{ value: [${values}], areaStyle: { color: COLORS[0] + '30' }, lineStyle: { color: COLORS[0], width: 2 }, itemStyle: { color: COLORS[0] } }]
+      }]
+    });
+  })();`;
+    }
+    if (type === 'gauge') {
+        const val = chartData[0]?.value || 0;
+        const maxVal = chart.max || 100;
+        return `  (function() {
+    var c = echarts.init(document.getElementById('${id}'));
+    c.setOption({
+      ${tooltipBase},
+      series: [{
+        type: 'gauge',
+        max: ${maxVal},
+        progress: { show: true, width: 14, itemStyle: { color: COLORS[0] } },
+        axisLine: { lineStyle: { width: 14, color: [[1, cv('--color-border-muted','${ct.borderColor}')]] } },
+        axisTick: { show: false },
+        splitLine: { length: 8, lineStyle: { width: 2, color: cv('--color-text-tertiary','${ct.textColor}') } },
+        axisLabel: { distance: 20, color: cv('--color-text-secondary','${ct.textColor}'), fontSize: 11 },
+        detail: { valueAnimation: true, fontSize: 28, fontWeight: 600, color: cv('--color-text-primary','${ct.labelColor}'), offsetCenter: [0, '60%'] },
+        data: [{ value: ${val}, name: '${escJs(chartData[0]?.name || '')}' }],
+        title: { offsetCenter: [0, '80%'], fontSize: 13, color: cv('--color-text-secondary','${ct.textColor}') }
+      }]
+    });
+  })();`;
+    }
+    if (type === 'bar' || type === 'bar-horizontal') {
+        const labels = chartData.map(d => `'${escJs(d.name || '')}'`).join(',');
+        const values = chartData.map(d => d.value);
+        const isH = type === 'bar-horizontal';
+        if (isH) {
+            return `  (function() {
+    var c = echarts.init(document.getElementById('${id}'));
+    var names = [${labels}];
+    var vals = [${values.join(',')}];
+    c.setOption({
+      ${tooltipBase}, trigger: 'axis', axisPointer: { type: 'shadow' } },
+      grid: { left: 140, right: 60, top: 10, bottom: 20 },
+      xAxis: { type: 'value', axisLine: { show: false }, axisTick: { show: false }, splitLine: { lineStyle: { color: cv('--color-border-muted','${ct.borderColor}') } }, axisLabel: { color: cv('--color-text-secondary','${ct.textColor}'), fontSize: 11 } },
+      yAxis: { type: 'category', data: names, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: cv('--color-text-primary','${ct.labelColor}'), fontSize: 12 }, inverse: true },
+      series: [{
+        type: 'bar', data: vals.map(function(v, i) { return { value: v, itemStyle: { color: COLORS[i % COLORS.length], borderRadius: [0, 4, 4, 0] } }; }),
+        barWidth: 18,
+        label: { show: true, position: 'right', color: cv('--color-text-secondary','${ct.textColor}'), fontSize: 11 }
+      }]
+    });
+  })();`;
+        }
+        return `  (function() {
+    var c = echarts.init(document.getElementById('${id}'));
+    var names = [${labels}];
+    var vals = [${values.join(',')}];
+    c.setOption({
+      ${tooltipBase}, trigger: 'axis', axisPointer: { type: 'shadow' } },
+      grid: { left: 50, right: 20, top: 20, bottom: 80 },
+      xAxis: { type: 'category', data: names, axisLabel: { color: cv('--color-text-secondary','${ct.textColor}'), fontSize: 10, rotate: ${chart.rotate || 30} }, axisLine: { lineStyle: { color: cv('--color-border-muted','${ct.borderColor}') } }, axisTick: { show: false } },
+      yAxis: { type: 'value', ${chart.yName ? "name: '" + escJs(chart.yName) + "', nameTextStyle: { color: cv('--color-text-secondary','" + ct.textColor + "') }, " : ''}axisLabel: { color: cv('--color-text-secondary','${ct.textColor}') }, splitLine: { lineStyle: { color: cv('--color-border-muted','${ct.borderColor}') } } },
+      series: [{
+        type: 'bar', data: vals.map(function(v, i) { return { value: v, itemStyle: { color: COLORS[i % COLORS.length], borderRadius: [6, 6, 0, 0] } }; }),
+        barWidth: 22,
+        label: { show: true, position: 'top', color: cv('--color-text-secondary','${ct.textColor}'), fontSize: 10 }
+      }]
+    });
+  })();`;
+    }
+    if (type === 'line') {
+        const labels = chartData.map(d => `'${escJs(d.name || '')}'`).join(',');
+        const datasets = chart.datasets || [{ name: '', data: chartData.map(d => d.value) }];
+        const seriesCode = datasets.map((ds, di) => `{ name: '${escJs(ds.name)}', type: 'line', data: [${ds.data.join(',')}], smooth: true, lineStyle: { width: 2, color: COLORS[${di}] }, itemStyle: { color: COLORS[${di}] }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: COLORS[${di}] + '40' }, { offset: 1, color: 'transparent' }] } } }`).join(',\n        ');
+        return `  (function() {
+    var c = echarts.init(document.getElementById('${id}'));
+    c.setOption({
+      ${tooltipBase}, trigger: 'axis' },
+      legend: { data: [${datasets.map(d => "'" + escJs(d.name) + "'").join(',')}], textStyle: { color: cv('--color-text-secondary','${ct.textColor}') } },
+      grid: { left: 50, right: 20, top: 40, bottom: 30 },
+      xAxis: { type: 'category', data: [${labels}], axisLabel: { color: cv('--color-text-secondary','${ct.textColor}') }, axisLine: { lineStyle: { color: cv('--color-border-muted','${ct.borderColor}') } } },
+      yAxis: { type: 'value', axisLabel: { color: cv('--color-text-secondary','${ct.textColor}') }, splitLine: { lineStyle: { color: cv('--color-border-muted','${ct.borderColor}') } } },
+      series: [\n        ${seriesCode}\n      ]
+    });
+  })();`;
+    }
+    return '';
+}
+function generateScript(data, theme) {
+    const charts = collectCharts(data);
+    if (!charts.length)
+        return '';
+    const chartIds = charts.map(c => `'${c.id}'`).join(',');
+    const chartInits = charts.map(c => generateChartJS(c, theme)).join('\n\n');
+    return `<script>
+(function() {
+  var cs = getComputedStyle(document.documentElement);
+  var cv = function(n, fb) { return cs.getPropertyValue(n).trim() || fb; };
+  var COLORS = window.__THEME_COLORS__ || [
+    cv('--color-accent-primary','#6B5CE7'), cv('--color-accent-soft','#38bdf8'),
+    cv('--color-profit','#22c55e'), cv('--color-loss','#ef4444'),
+    cv('--color-warning','#f59e0b'), cv('--color-info','#3b82f6'),
+    '#a78bfa','#ec4899','#14b8a6','#f97316','#8b5cf6'
+  ];
+
+${chartInits}
+
+  // Responsive resize
+  window.addEventListener('resize', function() {
+    [${chartIds}].forEach(function(id) {
+      var dom = document.getElementById(id);
+      if (dom) { var inst = echarts.getInstanceByDom(dom); if (inst) inst.resize(); }
+    });
+  });
+})();
+</script>`;
+}
+// ============================================================
+// 主渲染函数
+// ============================================================
+/**
+ * 将 ReportData 渲染为完整 HTML 字符串
+ */
+export function renderReport(data) {
+    const theme = loadTheme(data.theme);
+    const lang = data.lang || 'zh-CN';
+    const title = data.title || 'Report';
+    return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${escHtml(title)}</title>
+<script src="https://jtcospublic.ciccten.com/public/lib/echarts/6.1.0/dist/echarts.min.js"><\/script>
+<style>
+${generateCSS(theme)}
+</style>
+</head>
+<body>
+<div class="container">
+
+${renderHeader(data)}
+
+${renderMetrics(data)}
+
+${renderSections(data, theme)}
+
+${renderActions(data)}
+
+${renderFooter(data)}
+
+</div>
+
+${generateScript(data, theme)}
+
+</body>
+</html>
+`;
+}
+//# sourceMappingURL=report-renderer.js.map