byteplan-cli 1.0.2 → 1.2.0

package/skills/byteplan-html/scripts/generate_html.js

@@ -0,0 +1,517 @@
+#!/usr/bin/env node
+/**
+ * BytePlan 网页报告生成脚本
+ * 支持两种风格：传统网页（滚动式）和 PPT风格（幻灯片切换）
+ *
+ * 图表类型智能选择：
+ * - line_chart: 适合趋势数据（时间序列、季度变化、增长趋势）
+ * - pie_chart: 适合占比数据（市场份额、贡献比例、构成分析）
+ * - bar_chart: 适合对比数据（不同类别数值对比）
+ * - horizontal_bar: 适合排行榜或比例数据
+ *
+ * 设计原则：
+ * - 单文件输出，无需服务器
+ * - 响应式布局，适配各种屏幕
+ * - 深色主题，专业数据分析风格
+ * - PPT风格支持键盘/触摸导航
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// ============ 图表类型智能选择 ============
+
+/**
+ * 根据数据特征自动选择最合适的图表类型
+ * @param {Object} chartData - 图表数据
+ * @param {string} analysisGoal - 分析目标关键词
+ * @returns {string} - 图表类型: 'line' | 'pie' | 'bar' | 'horizontalBar'
+ */
+function selectChartType(chartData, analysisGoal = '') {
+  const data = chartData?.data || [];
+  const title = (chartData?.title || '').toLowerCase();
+  const goal = (analysisGoal || '').toLowerCase();
+
+  // 1. 趋势关键词 -> 折线图（必须是时间序列数据）
+  const trendKeywords = ['趋势', '增长', '变化', '走势', 'timeline', 'trend', 'growth', 'change'];
+  const hasTrendKeyword = trendKeywords.some(kw => title.includes(kw));
+  if (hasTrendKeyword) {
+    const labels = data.map(d => d.name || d.label || '');
+    const hasTimeLabels = labels.some(l =>
+      /^Q[1-4]/.test(l) || /^\d{4}年/.test(l) || /^\d{1,2}月/.test(l) || /^[上下]半年/.test(l) || /^FY\d{2}/.test(l)
+    );
+    if (hasTimeLabels) {
+      return 'line';
+    }
+  }
+
+  // 2. 对比关键词 -> 柱状图
+  const compareKeywords = ['对比', '比较', 'vs', 'versus', 'compare', 'comparison'];
+  if (compareKeywords.some(kw => title.includes(kw))) {
+    return 'bar';
+  }
+
+  // 3. 排行榜关键词 -> 横向条形图
+  const rankingKeywords = ['排行', '排名', 'top', '榜单', 'ranking', 'leaderboard'];
+  if (rankingKeywords.some(kw => title.includes(kw))) {
+    return 'horizontalBar';
+  }
+
+  // 4. 贡献率关键词 -> 横向条形图（百分比展示）
+  const rateKeywords = ['贡献率', '比率', '百分比', 'rate', 'percentage', 'ratio'];
+  if (rateKeywords.some(kw => title.includes(kw))) {
+    return 'horizontalBar';
+  }
+
+  // 5. 占比/构成关键词 -> 饼图
+  const pieKeywords = ['占比', '构成', '比例', '份额', '分布', 'composition', 'proportion', 'share', 'distribution', '饼图'];
+  if (pieKeywords.some(kw => title.includes(kw))) {
+    if (data.length <= 8 && data.every(d => (d.value || 0) >= 0)) {
+      return 'pie';
+    }
+  }
+
+  // 默认：柱状图
+  return 'bar';
+}
+
+/**
+ * 生成 Chart.js 配置
+ * @param {string} type - 图表类型
+ * @param {Object} chartData - 图表数据
+ * @param {string} canvasId - Canvas ID
+ * @returns {string} - Chart.js 初始化代码
+ */
+function generateChartConfig(type, chartData, canvasId) {
+  const data = chartData?.data || [];
+  const labels = JSON.stringify(data.map(d => d.name || d.label || ''));
+  const valuesArray = data.map(d => d.value || 0);
+  const values = JSON.stringify(valuesArray);
+
+  const colors = ['#4ade80', '#60a5fa', '#f472b6', '#667eea', '#fbbf24', '#06B6D4', '#f87171', '#a78bfa'];
+
+  switch (type) {
+    case 'line':
+      return `new Chart(document.getElementById('${canvasId}'), {
+        type: 'line',
+        data: {
+          labels: ${labels},
+          datasets: [{
+            label: '${chartData?.title || '数值'}',
+            data: ${values},
+            borderColor: '#4ade80',
+            backgroundColor: 'rgba(74, 222, 128, 0.1)',
+            borderWidth: 3,
+            fill: true,
+            tension: 0.4,
+            pointBackgroundColor: '#4ade80',
+            pointBorderColor: '#fff',
+            pointRadius: 6,
+            pointHoverRadius: 8
+          }]
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: { labels: { color: '#fff', font: { size: 14 } } },
+            tooltip: { backgroundColor: 'rgba(0,0,0,0.8)', titleColor: '#fff', bodyColor: '#fff' }
+          },
+          scales: {
+            y: {
+              ticks: { color: '#CBD5E1', font: { size: 12 } },
+              grid: { color: 'rgba(255,255,255,0.1)' },
+              beginAtZero: true
+            },
+            x: {
+              ticks: { color: '#fff', font: { size: 13 } },
+              grid: { display: false }
+            }
+          }
+        }
+      })`;
+
+    case 'pie':
+      return `new Chart(document.getElementById('${canvasId}'), {
+        type: 'pie',
+        data: {
+          labels: ${labels},
+          datasets: [{
+            data: ${values},
+            backgroundColor: ${JSON.stringify(colors.slice(0, data.length))},
+            borderColor: 'rgba(255,255,255,0.2)',
+            borderWidth: 2
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          plugins: {
+            legend: {
+              position: 'right',
+              labels: { color: '#fff', font: { size: 14 }, padding: 15 }
+            },
+            tooltip: {
+              backgroundColor: 'rgba(0,0,0,0.8)',
+              callbacks: {
+                label: function(context) {
+                  const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                  const percentage = ((context.raw / total) * 100).toFixed(1);
+                  return context.label + ': ' + context.raw + ' (' + percentage + '%)';
+                }
+              }
+            }
+          }
+        }
+      })`;
+
+    case 'horizontalBar':
+      return `new Chart(document.getElementById('${canvasId}'), {
+        type: 'bar',
+        data: {
+          labels: ${labels},
+          datasets: [{
+            label: '${chartData?.title || '数值'}',
+            data: ${values},
+            backgroundColor: ${valuesArray.some(v => v < 0) ? JSON.stringify(valuesArray.map(v => v < 0 ? '#f87171' : '#4ade80')) : "'#667eea'"},
+            borderRadius: 6
+          }]
+        },
+        options: {
+          indexAxis: 'y',
+          responsive: true,
+          plugins: {
+            legend: { labels: { color: '#fff' } }
+          },
+          scales: {
+            y: { ticks: { color: '#fff', font: { size: 13 } }, grid: { display: false } },
+            x: { ticks: { color: '#CBD5E1' }, grid: { color: 'rgba(255,255,255,0.1)' }, ${valuesArray.every(v => v >= 0 && v <= 100) ? 'max: 100,' : ''} beginAtZero: true }
+          }
+        }
+      })`;
+
+    case 'bar':
+    default:
+      return `new Chart(document.getElementById('${canvasId}'), {
+        type: 'bar',
+        data: {
+          labels: ${labels},
+          datasets: [{
+            label: '${chartData?.title || '数值'}',
+            data: ${values},
+            backgroundColor: ${JSON.stringify(colors.slice(0, data.length))},
+            borderRadius: 8
+          }]
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: { labels: { color: '#fff' } }
+          },
+          scales: {
+            y: { ticks: { color: '#CBD5E1' }, grid: { color: 'rgba(255,255,255,0.1)' }, beginAtZero: true },
+            x: { ticks: { color: '#fff' }, grid: { display: false } }
+          }
+        }
+      })`;
+  }
+}
+
+// ============ PPT风格 HTML 生成 ============
+
+/**
+ * 获取图表图标（根据类型）
+ */
+function getChartIcon(type) {
+  switch (type) {
+    case 'line': return '📈';
+    case 'pie': return '🥧';
+    case 'horizontalBar': return '📊';
+    default: return '📊';
+  }
+}
+
+function generatePPTStyleHTML(data) {
+  const { title, subtitle, period, sections, summary, kpis, charts, tableData, insights, recommendations, source, analysisGoal } = data;
+
+  // 处理图表数据
+  // 支持两种格式：新的 charts 数组 或 旧的 barChart/ratioData/rankingData
+  let processedCharts = [];
+
+  if (charts && Array.isArray(charts)) {
+    // 新格式：charts 数组
+    processedCharts = charts.map((chart, index) => {
+      const chartType = chart.type || selectChartType(chart, analysisGoal || title);
+      return {
+        ...chart,
+        type: chartType,
+        canvasId: `chart_${index}`,
+        icon: getChartIcon(chartType)
+      };
+    });
+  } else {
+    // 旧格式兼容：barChart, ratioData, rankingData
+    const legacyCharts = [
+      { data: data.barChart, defaultType: 'bar', defaultTitle: '数据对比分析', canvasId: 'barChart' },
+      { data: data.ratioData, defaultType: 'horizontalBar', defaultTitle: '贡献率对比', canvasId: 'ratioChart' },
+      { data: data.rankingData, defaultType: 'horizontalBar', defaultTitle: '贡献排行榜', canvasId: 'rankingChart' }
+    ];
+
+    processedCharts = legacyCharts
+      .filter(c => c.data && c.data.data && c.data.data.length > 0)
+      .map(c => {
+        const chartType = c.data.type || selectChartType(c.data, analysisGoal || title);
+        return {
+          ...c.data,
+          type: chartType,
+          canvasId: c.canvasId,
+          title: c.data.title || c.defaultTitle,
+          icon: getChartIcon(chartType)
+        };
+      });
+  }
+
+  // 计算总幻灯片数
+  const baseSlides = 4; // 封面、目录、摘要、KPI
+  const chartSlides = processedCharts.length;
+  const endingSlides = 4; // 表格、洞察、建议、结尾
+  const totalSlides = baseSlides + chartSlides + endingSlides;
+
+  // 生成图表幻灯片 HTML
+  const chartSlidesHTML = processedCharts.map((chart, index) => {
+    const slideNum = baseSlides + index + 1;
+    const bgClass = ['bg-dark-reverse', 'bg-dark-alt', 'bg-dark'][index % 3];
+    return `
+    <div class="slide ${bgClass}" data-slide="${slideNum}">
+      <div class="chart-content">
+        <h2>${chart.icon} ${chart.title}</h2>
+        <div class="chart-box"><canvas id="${chart.canvasId}"></div>
+      </div>
+    </div>`;
+  }).join('');
+
+  // 生成图表初始化脚本
+  const chartInitScript = processedCharts.map(chart =>
+    generateChartConfig(chart.type, chart, chart.canvasId)
+  ).join('\n      ');
+
+  // 动态计算幻灯片编号
+  const tableSlideNum = baseSlides + chartSlides + 1;
+  const insightSlideNum = tableSlideNum + 1;
+  const recSlideNum = insightSlideNum + 1;
+  const endSlideNum = recSlideNum + 1;
+
+  return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+  <script src="https://cdn.staticfile.org/Chart.js/4.4.1/chart.umd.min.js"></script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: 'Microsoft YaHei', Arial, sans-serif; background: #1a1a2e; color: #fff; overflow: hidden; }
+    .slides-container { width: 100vw; height: 100vh; position: relative; }
+    .slide { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px 50px; overflow: hidden; }
+    .slide.active { opacity: 1; visibility: visible; }
+    .bg-purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+    .bg-dark { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
+    .bg-dark-alt { background: linear-gradient(135deg, #0f3460 0%, #16213e 100%); }
+    .bg-dark-reverse { background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%); }
+    .cover-content { text-align: center; max-width: 90%; }
+    .cover-content h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 3px; }
+    .cover-content .subtitle { font-size: 1.5rem; opacity: 0.9; margin-bottom: 25px; }
+    .cover-content .meta { font-size: 1.1rem; opacity: 0.7; }
+    .cover-content .tenant { margin-top: 40px; padding: 15px 35px; background: rgba(255,255,255,0.15); border-radius: 10px; font-size: 1.2rem; }
+    .toc-content { width: 90%; max-width: 800px; }
+    .toc-content h2 { font-size: 2.5rem; margin-bottom: 35px; text-align: center; }
+    .toc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+    .toc-item { display: flex; align-items: center; padding: 18px 20px; background: rgba(255,255,255,0.1); border-radius: 12px; }
+    .toc-item .num { font-size: 1.8rem; font-weight: bold; color: #667eea; margin-right: 15px; }
+    .toc-item .text { font-size: 1.2rem; }
+    .summary-content { width: 90%; max-width: 900px; }
+    .summary-content h2 { font-size: 2.5rem; margin-bottom: 30px; text-align: center; }
+    .summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
+    .summary-card { background: rgba(255,255,255,0.1); border-radius: 18px; padding: 25px; text-align: center; border: 2px solid rgba(255,255,255,0.2); }
+    .summary-card .rank { font-size: 1.5rem; color: #fbbf24; margin-bottom: 12px; }
+    .summary-card .name { font-size: 1.8rem; font-weight: bold; margin-bottom: 10px; }
+    .summary-card .type { font-size: 1rem; opacity: 0.7; margin-bottom: 15px; }
+    .summary-card .value { font-size: 2rem; color: #4ade80; font-weight: bold; }
+    .summary-card .rate { font-size: 1.2rem; color: #60a5fa; margin-top: 10px; }
+    .kpi-content { width: 90%; max-width: 900px; }
+    .kpi-content h2 { font-size: 2.5rem; margin-bottom: 30px; text-align: center; }
+    .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
+    .kpi-card { background: rgba(255,255,255,0.1); border-radius: 15px; padding: 22px; text-align: center; }
+    .kpi-card .icon { font-size: 2.2rem; margin-bottom: 12px; }
+    .kpi-card .label { font-size: 0.95rem; opacity: 0.7; margin-bottom: 8px; }
+    .kpi-card .value { font-size: 1.8rem; font-weight: bold; color: #4ade80; }
+    .kpi-card .unit { font-size: 0.85rem; opacity: 0.6; }
+    .chart-content { width: 90%; max-width: 850px; }
+    .chart-content h2 { font-size: 2.2rem; margin-bottom: 25px; text-align: center; }
+    .chart-box { background: rgba(0,0,0,0.3); border-radius: 18px; padding: 25px; }
+    .table-content { width: 90%; max-width: 900px; }
+    .table-content h2 { font-size: 2rem; margin-bottom: 20px; text-align: center; }
+    .table-wrapper { background: rgba(0,0,0,0.3); border-radius: 15px; padding: 15px 20px; overflow: hidden; }
+    table { width: 100%; border-collapse: collapse; font-size: 1rem; }
+    th, td { padding: 10px 12px; text-align: center; }
+    th { background: rgba(102, 126, 234, 0.4); font-weight: 600; }
+    tr:nth-child(even) { background: rgba(255,255,255,0.05); }
+    .positive { color: #4ade80; font-weight: bold; }
+    .negative { color: #f87171; font-weight: bold; }
+    .insight-content, .rec-content { width: 90%; max-width: 850px; }
+    .insight-content h2, .rec-content h2 { font-size: 2.5rem; margin-bottom: 30px; text-align: center; }
+    .insight-grid, .rec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
+    .insight-card, .rec-card { border-radius: 18px; padding: 25px; }
+    .insight-card { background: rgba(255,255,255,0.1); border-left: 5px solid #667eea; }
+    .insight-card.warning { border-left-color: #fbbf24; }
+    .insight-card h3 { font-size: 1.4rem; color: #667eea; margin-bottom: 12px; }
+    .insight-card.warning h3 { color: #fbbf24; }
+    .insight-card p { font-size: 1.1rem; line-height: 1.6; opacity: 0.9; }
+    .rec-card { background: rgba(74,222,128,0.2); border-left: 5px solid #4ade80; }
+    .rec-card h3 { font-size: 1.4rem; color: #4ade80; margin-bottom: 12px; }
+    .rec-card p { font-size: 1.1rem; line-height: 1.6; opacity: 0.9; }
+    .end-content { text-align: center; max-width: 90%; }
+    .end-content h1 { font-size: 4rem; font-weight: 700; margin-bottom: 25px; }
+    .end-content p { font-size: 1.4rem; opacity: 0.8; margin-bottom: 12px; }
+    .end-content .source { margin-top: 40px; padding: 20px 40px; background: rgba(255,255,255,0.15); border-radius: 10px; font-size: 1.1rem; }
+    .slide-counter { position: fixed; bottom: 25px; right: 25px; background: rgba(255,255,255,0.15); padding: 10px 18px; border-radius: 10px; font-size: 1rem; opacity: 0.7; }
+    .progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: #667eea; transition: width 0.5s ease; z-index: 100; }
+    .nav-hint { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); padding: 12px 24px; border-radius: 12px; font-size: 0.95rem; color: #fff; opacity: 1; transition: opacity 0.5s ease; z-index: 99; display: flex; align-items: center; gap: 12px; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); }
+    .nav-hint.hidden { opacity: 0; pointer-events: none; }
+    .nav-hint kbd { background: rgba(255,255,255,0.15); padding: 4px 8px; border-radius: 4px; font-family: inherit; margin: 0 2px; }
+  </style>
+</head>
+<body>
+  <div class="progress-bar" id="progressBar"></div>
+  <div class="nav-hint" id="navHint">⌨️ 使用 <kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd> 或滚轮切换幻灯片</div>
+  <div class="slides-container">
+    <div class="slide bg-purple active" data-slide="1">
+      <div class="cover-content">
+        <h1>${title}</h1>
+        <p class="subtitle">${subtitle || ''}</p>
+        <p class="meta">${period}</p>
+        <div class="tenant">${source || 'BytePlan 数据平台'}</div>
+      </div>
+    </div>
+    <div class="slide bg-dark" data-slide="2">
+      <div class="toc-content">
+        <h2>目录</h2>
+        <div class="toc-list">
+          ${(sections || ['核心发现摘要', '关键指标概览', '数据分析', '洞察建议']).map((item, i) => `<div class="toc-item"><span class="num">${(i+1).toString().padStart(2,'0')}</span><span class="text">${item}</span></div>`).join('')}
+        </div>
+      </div>
+    </div>
+    <div class="slide bg-dark-alt" data-slide="3">
+      <div class="summary-content">
+        <h2>🏆 贡献最大的三个要素</h2>
+        <div class="summary-grid">
+          ${(summary || []).map(item => `<div class="summary-card"><div class="rank">${item.rank}</div><div class="name">${item.name}</div><div class="type">${item.type}</div><div class="value">${item.value}</div><div class="rate">${item.rate}</div></div>`).join('')}
+        </div>
+      </div>
+    </div>
+    <div class="slide bg-dark" data-slide="4">
+      <div class="kpi-content">
+        <h2>📊 关键指标概览</h2>
+        <div class="kpi-grid">
+          ${(kpis || []).map(kpi => `<div class="kpi-card"><div class="icon">${kpi.icon}</div><div class="label">${kpi.label}</div><div class="value">${kpi.value}</div><div class="unit">${kpi.unit}</div></div>`).join('')}
+        </div>
+      </div>
+    </div>
+    ${chartSlidesHTML}
+    <div class="slide bg-dark-reverse" data-slide="${tableSlideNum}">
+      <div class="table-content">
+        <h2>📋 ${tableData?.title || '数据明细表'}</h2>
+        <div class="table-wrapper">
+          <table>
+            <thead><tr>${(tableData?.columns || ['要素名称', '类型', '数值', '贡献', '贡献率']).map(col => `<th>${col}</th>`).join('')}</tr></thead>
+            <tbody>
+              ${(tableData?.rows || []).map(row => `<tr>${row.map((cell, i) => `<td class="${cell.toString().startsWith('-') ? 'negative' : 'positive'}">${cell}</td>`).join('')}</tr>`).join('')}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div class="slide bg-dark-alt" data-slide="${insightSlideNum}">
+      <div class="insight-content">
+        <h2>💡 关键洞察</h2>
+        <div class="insight-grid">
+          ${(insights || []).map(item => `<div class="insight-card ${item.warning ? 'warning' : ''}"><h3>${item.title}</h3><p>${item.content}</p></div>`).join('')}
+        </div>
+      </div>
+    </div>
+    <div class="slide bg-dark" data-slide="${recSlideNum}">
+      <div class="rec-content">
+        <h2>📝 行动建议</h2>
+        <div class="rec-grid">
+          ${(recommendations || []).map(item => `<div class="rec-card"><h3>${item.title}</h3><p>${item.content}</p></div>`).join('')}
+        </div>
+      </div>
+    </div>
+    <div class="slide bg-purple" data-slide="${endSlideNum}">
+      <div class="end-content">
+        <h1>谢谢观看</h1>
+        <p>${title}</p>
+        <p>${source || 'BytePlan 数据平台'}</p>
+        <div class="source">数据来源：${source || 'BytePlan 数据平台'}<br>分析时间：${period}</div>
+      </div>
+    </div>
+  </div>
+  <div class="slide-counter" id="slideCounter">1 / ${totalSlides}</div>
+  <script>
+    let currentSlide = 1, totalSlides = ${totalSlides};
+    function showSlide(n) { const slides = document.querySelectorAll('.slide'); slides.forEach(s => s.classList.remove('active')); slides[n - 1].classList.add('active'); document.getElementById('slideCounter').textContent = n + ' / ' + totalSlides; document.getElementById('progressBar').style.width = (n / totalSlides * 100) + '%'; currentSlide = n; }
+    function nextSlide() { if (currentSlide < totalSlides) showSlide(currentSlide + 1); }
+    function prevSlide() { if (currentSlide > 1) showSlide(currentSlide - 1); }
+    function hideNavHint() { document.getElementById('navHint').classList.add('hidden'); }
+    document.addEventListener('keydown', e => { hideNavHint(); if (e.key === 'ArrowDown' || e.key === 'ArrowRight' || e.key === ' ') nextSlide(); if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') prevSlide(); });
+    let touchX = 0; document.addEventListener('touchstart', e => touchX = e.touches[0].clientX); document.addEventListener('touchend', e => { const diff = e.changedTouches[0].clientX - touchX; if (diff > 50) prevSlide(); if (diff < -50) nextSlide(); });
+    let wheelTimeout; document.addEventListener('wheel', e => { hideNavHint(); if (wheelTimeout) return; wheelTimeout = setTimeout(() => wheelTimeout = null, 500); if (e.deltaY > 0) nextSlide(); else if (e.deltaY < 0) prevSlide(); }, { passive: true });
+    setTimeout(() => hideNavHint(), 6000);
+    setTimeout(() => {
+      ${chartInitScript}
+    }, 100);
+  </script>
+</body>
+</html>`;
+}
+
+// ============ 主函数 ============
+
+function generateHTMLReport(outputFile, dataFile, style = 'ppt') {
+  let data = {};
+  
+  if (fs.existsSync(dataFile || 'ppt_data.json')) {
+    data = JSON.parse(fs.readFileSync(dataFile || 'ppt_data.json', 'utf-8'));
+  } else if (fs.existsSync('analysisPlan.json')) {
+    const plan = JSON.parse(fs.readFileSync('analysisPlan.json', 'utf-8'));
+    data = { title: plan.planName, subtitle: plan.planDescription, period: new Date().toLocaleDateString('zh-CN'), source: 'BytePlan 数据平台' };
+  } else {
+    console.error('❌ 缺少数据文件');
+    process.exit(1);
+  }
+
+  const html = generatePPTStyleHTML(data);
+  fs.writeFileSync(outputFile, html, 'utf-8');
+
+  console.log(`✅ 网页报告已生成: ${outputFile}`);
+}
+
+// 命令行入口
+const args = process.argv.slice(2);
+let outputFile = 'analysis_report.html';
+let dataFile = null;
+
+for (let i = 0; i < args.length; i++) {
+  if (args[i] === '-o' || args[i] === '--output-file') outputFile = args[++i];
+  else if (args[i] === '-d' || args[i] === '--data-file') dataFile = args[++i];
+}
+
+// 自动发现数据文件：未指定 -d 时按优先级查找
+if (!dataFile) {
+  const candidates = ['report_data.json', 'ppt_data.json', 'analysis_results.json'];
+  for (const f of candidates) {
+    if (fs.existsSync(f)) { dataFile = f; break; }
+  }
+  if (!dataFile) dataFile = 'ppt_data.json'; // 兜底，让后续逻辑报错
+}
+
+generateHTMLReport(outputFile, dataFile);