BytePlan 网页报告 Skill

概述

此 Skill 根据已有的分析数据生成网页报告，支持两种风格：

前置条件：必须先使用 byteplan-analysis skill 完成数据分析。

PPT风格设计规范

1. 页面结构（11页标准模板）

第1页  : 封面（紫色渐变背景）
第2页  : 目录（深色背景 + 双列卡片）
第3页  : 核心发现摘要（三卡片布局）
第4页  : 关键指标概览（四卡片KPI）
第5页  : 数据图表1（柱状图）
第6页  : 数据图表2（横向条形图/贡献率）
第7页  : 排行榜（TOP8横向条形图）
第8页  : 数据明细表
第9页  : 关键洞察（四卡片）
第10页 : 行动建议（四卡片）
第11页 : 结尾页（紫色渐变背景）

2. 颜色规范

/* 主题色 */
--purple: #667eea;        /* 主强调色 */
--dark-purple: #764ba2;   /* 渐变终点色 */

/* 背景色 */
--dark-bg: #1a1a2e;       /* 主背景 */
--dark-bg-2: #16213e;     /* 次背景 */
--dark-bg-3: #0f3460;     /* 强调背景 */
--card-bg: rgba(255,255,255,0.1);  /* 卡片背景 */

/* 文字色 */
--text-white: #FFFFFF;    /* 标题文字 */
--text-gray: #CBD5E1;     /* 正文文字 */
--text-muted: #94A3B8;    /* 辅助文字 */

/* 数据色 */
--green: #4ade80;         /* 正向数据/数值 */
--blue: #60a5fa;          /* 链接/贡献率 */
--pink: #f472b6;          /* 图表色 */
--orange: #fbbf24;        /* 警告/排名 */
--red: #f87171;           /* 负向数据 */
--cyan: #06B6D4;          /* 图表色 */

3. 字体规范

/* 主字体：微软雅黑 */
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;

/* 封面标题 */
font-size: 44px; font-weight: bold;

/* 页面标题 */
font-size: 28px; font-weight: bold;

/* 卡片标题 */
font-size: 16-26px; font-weight: bold;

/* 正文内容 */
font-size: 12-14px;

/* 数据数值 */
font-size: 22-24px; font-weight: bold; color: var(--green);

4. 布局规范

幻灯片容器

.slide {
  width: 100vw;
  height: 100vh;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 50px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.slide.active {
  opacity: 1;
  visibility: visible;
}

卡片设计

/* 基础卡片 */
.card {
  background: rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 25px;
  border: 2px solid rgba(255,255,255,0.2);
}

/* 带边框强调的卡片 */
.card-accent {
  border-left: 5px solid var(--purple);
  /* 或警告色 */
  border-left: 5px solid var(--orange);
}

/* 成功建议卡片 */
.card-success {
  background: rgba(74,222,128,0.2);
  border-left: 5px solid var(--green);
}

5. 导航规范

// 键盘导航
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();
});

6. 图表规范与智能选择

支持四种图表类型，可根据分析目标自动选择最合适的类型：

使用 Chart.js，配置如下：

// 柱状图配置
{
  type: 'bar',
  data: { /* ... */ },
  options: {
    responsive: true,
    maintainAspectRatio: true,
    plugins: {
      legend: { labels: { color: '#fff', font: { size: 14 } } }
    },
    scales: {
      y: { 
        ticks: { color: '#CBD5E1', font: { size: 12 } },
        grid: { color: 'rgba(255,255,255,0.1)' }
      },
      x: { 
        ticks: { color: '#fff', font: { size: 13 } },
        grid: { display: false }
      }
    }
  }
}

// 横向条形图配置
{
  type: 'bar',
  options: {
    indexAxis: 'y',
    // ...其他配置
  }
}

7. 渐变背景

/* 封面/结尾页 - 紫色渐变 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* 内容页 - 深色渐变 */
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);

8. 动画效果

/* 幻灯片切换 */
transition: opacity 0.5s ease, visibility 0.5s ease;

/* 进度条 */
transition: width 0.5s ease;

/* 卡片悬停 */
transition: transform 0.3s;
transform: scale(1.03); /* hover时 */

使用方法

方式一：命令行生成

# 传统网页风格
node scripts/generate_html.js -o report.html

# PPT风格
node scripts/generate_html.js -o report_ppt.html --style ppt

方式二：Node.js 调用

const { generateHTMLReport, generatePPTStyleHTML } = require('./scripts/generate_html.js');

// 传统风格
generateHTMLReport('report.html', 'analysis_results.json');

// PPT风格
generatePPTStyleHTML('report_ppt.html', 'analysis_results.json');

方式三：直接生成并打开

node scripts/generate_html.js -o report.html && open report.html

数据格式

新格式（推荐）：使用 charts 数组

{
  "title": "报告标题",
  "subtitle": "副标题",
  "period": "2026年3月",
  "analysisGoal": "营收趋势分析",
  "sections": ["章节1", "章节2"],
  "summary": [
    { "rank": "🥇 第一名", "name": "项目A", "type": "类型", "value": "¥1,000,000", "rate": "68%" }
  ],
  "kpis": [
    { "icon": "💰", "label": "指标名称", "value": "1,000", "unit": "单位" }
  ],
  "charts": [
    {
      "title": "营收趋势",
      "type": "line",
      "data": [
        { "name": "Q1", "value": 100 },
        { "name": "Q2", "value": 150 },
        { "name": "Q3", "value": 200 },
        { "name": "Q4", "value": 180 }
      ]
    },
    {
      "title": "市场份额分布",
      "type": "pie",
      "data": [
        { "name": "天猫", "value": 68 },
        { "name": "京东", "value": 20 },
        { "name": "其他", "value": 12 }
      ]
    },
    {
      "title": "渠道贡献对比",
      "data": [
        { "name": "天猫", "value": 16273934 },
        { "name": "Amazon", "value": 2785991 }
      ]
    }
  ],
  "tableData": {
    "title": "明细表",
    "columns": ["列1", "列2"],
    "rows": [["值1", "值2"]]
  },
  "insights": [
    { "title": "洞察标题", "content": "洞察内容", "warning": false }
  ],
  "recommendations": [
    { "title": "建议标题", "content": "建议内容" }
  ],
  "source": "BytePlan 数据平台"
}

图表类型说明

旧格式兼容

{
  "title": "报告标题",
  "subtitle": "副标题",
  "period": "2026年3月",
  "sections": ["章节1", "章节2"],
  "summary": [
    { "rank": "🥇 第一名", "name": "项目A", "type": "类型", "value": "¥1,000,000", "rate": "68%" }
  ],
  "kpis": [
    { "icon": "💰", "label": "指标名称", "value": "1,000", "unit": "单位" }
  ],
  "barChart": {
    "title": "图表标题",
    "data": [{ "name": "类别A", "value": 100 }]
  },
  "rankingData": {
    "title": "排行榜标题",
    "data": [{ "name": "项目A", "value": 100 }]
  },
  "tableData": {
    "title": "明细表",
    "columns": ["列1", "列2"],
    "rows": [["值1", "值2"]]
  },
  "insights": [
    { "title": "洞察标题", "content": "洞察内容", "warning": false }
  ],
  "recommendations": [
    { "title": "建议标题", "content": "建议内容" }
  ],
  "source": "BytePlan 数据平台"
}

技术特性

• Chart.js: 交互式图表，支持悬停提示
• 响应式布局: 自适应不同屏幕尺寸
• 键盘导航: ↑↓ ←→ 空格键切换幻灯片
• 触摸导航: 左右滑动切换
• 深色主题: 专业数据分析风格
• 渐变配色: 现代化视觉设计
• 单文件输出: 无需服务器，直接浏览器打开

完整示例

示例：跨境电商边际贡献分析

本案例展示如何使用 BytePlan 平台数据生成完整的网页报告。

1. 准备数据文件

参考示例数据文件：examples/margin-contribution-analysis.json

# 复制示例数据
cp examples/margin-contribution-analysis.json ppt_data.json

2. 生成网页报告（PPT风格）

cd skills/byteplan-html
node scripts/generate_html.js -o 边际贡献分析报告.html --style ppt

3. 打开查看

open 边际贡献分析报告.html

4. 预期输出

生成的网页报告包含以下功能：

幻灯片导航：

• 使用 ↑ ↓ 或 ← → 键切换幻灯片
• 支持触摸滑动切换（移动端）
• 右下角显示页码，顶部显示进度条

页面结构（11页）：

5. 示例数据结构

{
  "title": "跨境电商边际贡献分析报告",
  "subtitle": "找出贡献最大的要素",
  "period": "2026年3月31日",
  "sections": ["核心发现摘要", "关键指标概览", ...],
  "summary": [
    { "rank": "🥇 第一名", "name": "天猫", "type": "渠道", "value": "¥16,273,934", "rate": "贡献率 68%" }
  ],
  "kpis": [
    { "icon": "💰", "label": "最大边际贡献", "value": "16,273,934", "unit": "元（天猫）" }
  ],
  "barChart": {
    "title": "渠道边际贡献对比",
    "data": [{ "name": "天猫", "value": 16273934 }]
  },
  "ratioData": {
    "title": "渠道边际贡献率对比",
    "data": [{ "name": "天猫", "value": 68 }]
  },
  "rankingData": {
    "title": "边际贡献 TOP8 排行榜",
    "data": [{ "name": "天猫 (渠道)", "value": 16273934 }]
  },
  "tableData": {
    "title": "边际贡献明细表",
    "columns": ["要素名称", "类型", "收入(元)", "边际贡献(元)", "贡献率"],
    "rows": [["天猫", "渠道", "17,742,456", "16,273,934", "68%"]]
  },
  "insights": [
    { "title": "天猫渠道表现卓越", "content": "以68%贡献率成为最大贡献来源。", "warning": false },
    { "title": "⚠️ 存在亏损产品", "content": "CD130P-B和CD140P边际贡献为负。", "warning": true }
  ],
  "recommendations": [
    { "title": "加大天猫渠道投入", "content": "增加营销预算和运营资源。" }
  ],
  "source": "BytePlan 数据平台 · 跨境电商租户"
}

注意事项

• 前置条件：必须先完成数据分析
• 数据文件：确保 analysisPlan.json 存在
• 浏览器兼容：支持现代浏览器（Chrome、Firefox、Safari、Edge）
• 离线使用：Chart.js 通过 CDN 加载，首次需要联网
• 字体：推荐使用微软雅黑，确保中英文显示效果