npm - byteplan-cli - Versions diffs - 1.0.2 → 1.2.0 - Mend

byteplan-cli 1.0.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/skills/byteplan-html/examples/generate-ppt-style-html.js ADDED Viewed

@@ -0,0 +1,611 @@
+#!/usr/bin/env node
+/**
+ * BytePlan PPT风格 网页报告生成脚本 - 参考案例
+ *
+ * 本案例展示如何从 BytePlan 分析数据生成 PPT 风格的 网页报告
+ *
+ * 使用方法：
+ * node generate-ppt-style-html.js -o report.html -d data.json
+ *
+ * 特点：
+ * - 11页幻灯片结构
+ * - 紫色渐变封面和结尾页
+ * - 深色渐变内容页
+ * - 卡片式设计
+ * - 键盘/触摸导航
+ * - Chart.js 交互式图表
+ */
+const fs = require('fs');
+const path = require('path');
+// ============ 颜色配置（与 PPT 一致）============
+const COLORS = {
+  purple: '#667eea',
+  darkPurple: '#764ba2',
+  darkBg: '#1a1a2e',
+  darkBg2: '#16213e',
+  darkBg3: '#0f3460',
+  textWhite: '#FFFFFF',
+  textGray: '#CBD5E1',
+  textMuted: '#94A3B8',
+  green: '#4ade80',
+  blue: '#60a5fa',
+  pink: '#f472b6',
+  orange: '#fbbf24',
+  red: '#f87171',
+  cyan: '#06B6D4',
+};
+// ============ PPT风格 HTML 生成函数 ============
+function generatePPTStyleHTML(data) {
+  const {
+    title,
+    subtitle,
+    period,
+    sections,
+    summary,
+    kpis,
+    barChart,
+    ratioData,
+    rankingData,
+    tableData,
+    insights,
+    recommendations,
+    source
+  } = data;
+  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: ${COLORS.darkBg};
+      color: ${COLORS.textWhite};
+      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, ${COLORS.purple} 0%, ${COLORS.darkPurple} 100%);
+    }
+    .bg-dark {
+      background: linear-gradient(135deg, ${COLORS.darkBg} 0%, ${COLORS.darkBg2} 100%);
+    }
+    .bg-dark-alt {
+      background: linear-gradient(135deg, ${COLORS.darkBg3} 0%, ${COLORS.darkBg2} 100%);
+    }
+    .bg-dark-reverse {
+      background: linear-gradient(135deg, ${COLORS.darkBg2} 0%, ${COLORS.darkBg} 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;
+      transition: transform 0.3s;
+    }
+    .toc-item:hover { transform: scale(1.03); }
+    .toc-item .num {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: ${COLORS.purple};
+      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: ${COLORS.orange}; 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: ${COLORS.green}; font-weight: bold; }
+    .summary-card .rate { font-size: 1.2rem; color: ${COLORS.blue}; margin-top: 10px; }
+    /* ========== KPI卡片样式 ========== */
+    .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: ${COLORS.green}; }
+    .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: ${COLORS.green}; font-weight: bold; }
+    .negative { color: ${COLORS.red}; 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 ${COLORS.purple};
+    }
+    .insight-card.warning { border-left-color: ${COLORS.orange}; }
+    .insight-card h3 { font-size: 1.4rem; color: ${COLORS.purple}; margin-bottom: 12px; }
+    .insight-card.warning h3 { color: ${COLORS.orange}; }
+    .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 ${COLORS.green};
+    }
+    .rec-card h3 { font-size: 1.4rem; color: ${COLORS.green}; 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: ${COLORS.purple};
+      transition: width 0.5s ease;
+      z-index: 100;
+    }
+  </style>
+</head>
+<body>
+  <div class="progress-bar" id="progressBar"></div>
+  <div class="slides-container">
+    <!-- ==================== 第1页：封面 ==================== -->
+    <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>
+    <!-- ==================== 第2页：目录 ==================== -->
+    <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>
+    <!-- ==================== 第3页：核心发现摘要 ==================== -->
+    <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>
+    <!-- ==================== 第4页：关键指标概览 ==================== -->
+    <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>
+    <!-- ==================== 第5页：柱状图 ==================== -->
+    <div class="slide bg-dark-reverse" data-slide="5">
+      <div class="chart-content">
+        <h2>📊 ${barChart?.title || '数据对比分析'}</h2>
+        <div class="chart-box">
+          <canvas id="barChart"></canvas>
+        </div>
+      </div>
+    </div>
+    <!-- ==================== 第6页：贡献率对比 ==================== -->
+    <div class="slide bg-dark-alt" data-slide="6">
+      <div class="chart-content">
+        <h2>📈 ${ratioData?.title || '贡献率对比'}</h2>
+        <div class="chart-box">
+          <canvas id="ratioChart"></canvas>
+        </div>
+      </div>
+    </div>
+    <!-- ==================== 第7页：排行榜 ==================== -->
+    <div class="slide bg-dark" data-slide="7">
+      <div class="chart-content">
+        <h2>🏆 ${rankingData?.title || '贡献排行榜'}</h2>
+        <div class="chart-box">
+          <canvas id="rankingChart"></canvas>
+        </div>
+      </div>
+    </div>
+    <!-- ==================== 第8页：数据明细表 ==================== -->
+    <div class="slide bg-dark-reverse" data-slide="8">
+      <div class="table-content">
+        <h2>📋 ${tableData?.title || '数据明细表'}</h2>
+        <div class="table-wrapper">
+          <table>
+            <thead>
+              <tr>
+                <th>要素名称</th>
+                <th>类型</th>
+                <th>数值</th>
+                <th>贡献</th>
+                <th>贡献率</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${(tableData?.rows || []).map(row => `
+                <tr>
+                  <td>${row[0]}</td>
+                  <td>${row[1]}</td>
+                  <td class="positive">${row[2]}</td>
+                  <td class="${row[3].startsWith('-') ? 'negative' : 'positive'}">${row[3]}</td>
+                  <td class="${row[4].startsWith('-') ? 'negative' : 'positive'}">${row[4]}</td>
+                </tr>
+              `).join('')}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <!-- ==================== 第9页：关键洞察 ==================== -->
+    <div class="slide bg-dark-alt" data-slide="9">
+      <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>
+    <!-- ==================== 第10页：行动建议 ==================== -->
+    <div class="slide bg-dark" data-slide="10">
+      <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>
+    <!-- ==================== 第11页：结尾页 ==================== -->
+    <div class="slide bg-purple" data-slide="11">
+      <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 / 11</div>
+  <script>
+    // ==================== 幻灯片导航逻辑 ====================
+    let currentSlide = 1;
+    const totalSlides = 11;
+    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);
+    }
+    // 键盘导航
+    document.addEventListener('keydown', e => {
+      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();
+    });
+    // ==================== Chart.js 图表初始化 ====================
+    setTimeout(() => {
+      // 图表通用配置
+      Chart.defaults.color = '${COLORS.textGray}';
+      Chart.defaults.borderColor = 'rgba(255,255,255,0.1)';
+      // 柱状图
+      new Chart(document.getElementById('barChart'), {
+        type: 'bar',
+        data: {
+          labels: ${JSON.stringify((barChart?.data || []).map(d => d.name))},
+          datasets: [{
+            label: '数值',
+            data: ${JSON.stringify((barChart?.data || []).map(d => d.value))},
+            backgroundColor: ['${COLORS.green}', '${COLORS.blue}', '${COLORS.pink}', '${COLORS.purple}', '${COLORS.orange}'],
+            borderRadius: 8
+          }]
+        },
+        options: {
+          responsive: true,
+          plugins: { legend: { labels: { color: '#fff', font: { size: 14 } } } },
+          scales: {
+            y: { ticks: { color: '${COLORS.textGray}' }, grid: { color: 'rgba(255,255,255,0.1)' } },
+            x: { ticks: { color: '#fff' }, grid: { display: false } }
+          }
+        }
+      });
+      // 贡献率图
+      new Chart(document.getElementById('ratioChart'), {
+        type: 'bar',
+        data: {
+          labels: ${JSON.stringify((ratioData?.data || []).map(d => d.name))},
+          datasets: [{
+            label: '贡献率 (%)',
+            data: ${JSON.stringify((ratioData?.data || []).map(d => d.value))},
+            backgroundColor: '${COLORS.purple}',
+            borderRadius: 8
+          }]
+        },
+        options: {
+          indexAxis: 'y',
+          responsive: true,
+          plugins: { legend: { labels: { color: '#fff' } } },
+          scales: {
+            y: { ticks: { color: '#fff' }, grid: { display: false } },
+            x: { ticks: { color: '${COLORS.textGray}' }, grid: { color: 'rgba(255,255,255,0.1)' }, max: 100 }
+          }
+        }
+      });
+      // 排行榜
+      new Chart(document.getElementById('rankingChart'), {
+        type: 'bar',
+        data: {
+          labels: ${JSON.stringify((rankingData?.data || []).map(d => d.name))},
+          datasets: [{
+            label: '数值',
+            data: ${JSON.stringify((rankingData?.data || []).map(d => d.value))},
+            backgroundColor: '${COLORS.green}',
+            borderRadius: 6
+          }]
+        },
+        options: {
+          indexAxis: 'y',
+          responsive: true,
+          plugins: { legend: { display: false } },
+          scales: {
+            y: { ticks: { color: '#fff' }, grid: { display: false } },
+            x: { ticks: { color: '${COLORS.textGray}' }, grid: { color: 'rgba(255,255,255,0.1)' } }
+          }
+        }
+      });
+    }, 100);
+  </script>
+</body>
+</html>`;
+}
+// ==================== 主函数 ====================
+function generateHTMLReport(outputFile, dataFile) {
+  // 读取数据文件
+  let data = {};
+  if (fs.existsSync(dataFile)) {
+    data = JSON.parse(fs.readFileSync(dataFile, 'utf-8'));
+  } else {
+    console.error('❌ 缺少数据文件:', dataFile);
+    process.exit(1);
+  }
+  // 生成 HTML
+  const html = generatePPTStyleHTML(data);
+  fs.writeFileSync(outputFile, html, 'utf-8');
+  console.log(`✅ 网页报告已生成: ${outputFile}`);
+}
+// ==================== 命令行入口 ====================
+const args = process.argv.slice(2);
+let outputFile = 'report.html';
+let dataFile = 'data.json';
+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];
+  }
+}
+generateHTMLReport(outputFile, dataFile);