byteplan-cli 1.0.2 → 1.2.0

package/skills/byteplan-html/SKILL.md

@@ -0,0 +1,490 @@
+---
+name: byteplan-html
+description: 根据已有的分析数据生成网页报告。支持两种模式：1) 传统网页报告（滚动式）；2) PPT风格演示报告（幻灯片切换）。支持交互式图表、响应式布局、键盘导航。需要先使用 byteplan-analysis skill 完成数据分析。
+---
+
+# BytePlan 网页报告 Skill
+
+## 概述
+
+此 Skill 根据已有的分析数据生成网页报告，支持两种风格：
+
+| 风格 | 说明 | 适用场景 |
+|------|------|----------|
+| **传统网页** | 滚动式布局，所有内容一页展示 | 详细数据分析报告 |
+| **PPT风格** | 幻灯片切换，键盘/触摸导航 | 演示汇报、会议展示 |
+
+**前置条件**：必须先使用 [byteplan-analysis](../byteplan-analysis/SKILL.md) skill 完成数据分析。
+
+---
+
+## PPT风格设计规范
+
+### 1. 页面结构（11页标准模板）
+
+```
+第1页  : 封面（紫色渐变背景）
+第2页  : 目录（深色背景 + 双列卡片）
+第3页  : 核心发现摘要（三卡片布局）
+第4页  : 关键指标概览（四卡片KPI）
+第5页  : 数据图表1（柱状图）
+第6页  : 数据图表2（横向条形图/贡献率）
+第7页  : 排行榜（TOP8横向条形图）
+第8页  : 数据明细表
+第9页  : 关键洞察（四卡片）
+第10页 : 行动建议（四卡片）
+第11页 : 结尾页（紫色渐变背景）
+```
+
+### 2. 颜色规范
+
+```css
+/* 主题色 */
+--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. 字体规范
+
+```css
+/* 主字体：微软雅黑 */
+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. 布局规范
+
+#### 幻灯片容器
+```css
+.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;
+}
+```
+
+#### 卡片设计
+```css
+/* 基础卡片 */
+.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. 导航规范
+
+```javascript
+// 键盘导航
+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，配置如下：
+
+```javascript
+// 柱状图配置
+{
+  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. 渐变背景
+
+```css
+/* 封面/结尾页 - 紫色渐变 */
+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. 动画效果
+
+```css
+/* 幻灯片切换 */
+transition: opacity 0.5s ease, visibility 0.5s ease;
+
+/* 进度条 */
+transition: width 0.5s ease;
+
+/* 卡片悬停 */
+transition: transform 0.3s;
+transform: scale(1.03); /* hover时 */
+```
+
+---
+
+## 使用方法
+
+### 方式一：命令行生成
+
+```bash
+# 传统网页风格
+node scripts/generate_html.js -o report.html
+
+# PPT风格
+node scripts/generate_html.js -o report_ppt.html --style ppt
+```
+
+### 方式二：Node.js 调用
+
+```javascript
+const { generateHTMLReport, generatePPTStyleHTML } = require('./scripts/generate_html.js');
+
+// 传统风格
+generateHTMLReport('report.html', 'analysis_results.json');
+
+// PPT风格
+generatePPTStyleHTML('report_ppt.html', 'analysis_results.json');
+```
+
+### 方式三：直接生成并打开
+
+```bash
+node scripts/generate_html.js -o report.html && open report.html
+```
+
+---
+
+## 数据格式
+
+### 新格式（推荐）：使用 charts 数组
+
+```json
+{
+  "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 数据平台"
+}
+```
+
+### 图表类型说明
+
+| type 值 | 图表类型 | 自动选择条件 |
+|---------|----------|--------------|
+| `"line"` | 折线图 | 标题含"趋势/增长/变化"，或数据有时间标签(Q1/Q2/月度/年度) |
+| `"pie"` | 饼图 | 标题含"占比/构成/比例/份额"，且数据项 ≤ 8 |
+| `"horizontalBar"` | 横向条形图 | 标题含"排行/排名/贡献率" |
+| `"bar"` | 柱状图 | 默认类型 |
+| 不指定 | 自动选择 | 根据 `analysisGoal` 和图表标题智能判断 |
+
+### 旧格式兼容
+
+```json
+{
+  "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`
+
+```bash
+# 复制示例数据
+cp examples/margin-contribution-analysis.json ppt_data.json
+```
+
+#### 2. 生成网页报告（PPT风格）
+
+```bash
+cd skills/byteplan-html
+node scripts/generate_html.js -o 边际贡献分析报告.html --style ppt
+```
+
+#### 3. 打开查看
+
+```bash
+open 边际贡献分析报告.html
+```
+
+#### 4. 预期输出
+
+生成的网页报告包含以下功能：
+
+**幻灯片导航**：
+- 使用 `↑` `↓` 或 `←` `→` 键切换幻灯片
+- 支持触摸滑动切换（移动端）
+- 右下角显示页码，顶部显示进度条
+
+**页面结构**（11页）：
+
+| 页码 | 内容 | 交互特性 |
+|------|------|----------|
+| 1 | 封面 | 紫色渐变背景 |
+| 2 | 目录 | 卡片悬停缩放效果 |
+| 3 | 核心发现摘要 | 三卡片展示 |
+| 4 | 关键指标概览 | 四卡片KPI |
+| 5 | 渠道边际贡献对比 | Chart.js 交互式柱状图 |
+| 6 | 渠道贡献率对比 | Chart.js 交互式条形图 |
+| 7 | TOP8排行榜 | Chart.js 交互式排行榜 |
+| 8 | 数据明细表 | 表格，负值红色显示 |
+| 9 | 关键洞察 | 四卡片，风险提示橙色边框 |
+| 10 | 行动建议 | 四卡片，绿色边框 |
+| 11 | 结尾页 | 紫色渐变背景 |
+
+#### 5. 示例数据结构
+
+```json
+{
+  "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 加载，首次需要联网
+- **字体**：推荐使用微软雅黑，确保中英文显示效果

package/skills/byteplan-html/examples/example-output.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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; }
+  </style>
+</head>
+<body>
+  <div class="progress-bar" id="progressBar"></div>
+  <div class="slides-container">
+    <div class="slide bg-purple active" data-slide="1">
+      <div class="cover-content">
+        <h1>跨境电商边际贡献分析报告</h1>
+        <p class="subtitle">找出贡献最大的要素</p>
+        <p class="meta">2026年3月31日</p>
+        <div class="tenant">BytePlan 数据平台 · 跨境电商租户</div>
+      </div>
+    </div>
+    <div class="slide bg-dark" data-slide="2">
+      <div class="toc-content">
+        <h2>目录</h2>
+        <div class="toc-list">
+          <div class="toc-item"><span class="num">01</span><span class="text">核心发现摘要</span></div><div class="toc-item"><span class="num">02</span><span class="text">关键指标概览</span></div><div class="toc-item"><span class="num">03</span><span class="text">渠道贡献分析</span></div><div class="toc-item"><span class="num">04</span><span class="text">贡献率对比</span></div><div class="toc-item"><span class="num">05</span><span class="text">贡献排行榜</span></div><div class="toc-item"><span class="num">06</span><span class="text">数据明细表</span></div><div class="toc-item"><span class="num">07</span><span class="text">关键洞察</span></div><div class="toc-item"><span class="num">08</span><span class="text">行动建议</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="slide bg-dark-alt" data-slide="3">
+      <div class="summary-content">
+        <h2>🏆 贡献最大的三个要素</h2>
+        <div class="summary-grid">
+          <div class="summary-card"><div class="rank">🥇 第一名</div><div class="name">天猫</div><div class="type">渠道</div><div class="value">¥16,273,934</div><div class="rate">贡献率 68%</div></div><div class="summary-card"><div class="rank">🥈 第二名</div><div class="name">CD120P</div><div class="type">产品</div><div class="value">¥5,635,209</div><div class="rate">贡献率 74%</div></div><div class="summary-card"><div class="rank">🥉 第三名</div><div class="name">美国</div><div class="type">国家</div><div class="value">¥4,983,568</div><div class="rate">贡献率 65%</div></div>
+        </div>
+      </div>
+    </div>
+    <div class="slide bg-dark" data-slide="4">
+      <div class="kpi-content">
+        <h2>📊 关键指标概览</h2>
+        <div class="kpi-grid">
+          <div class="kpi-card"><div class="icon">💰</div><div class="label">最大边际贡献</div><div class="value">16,273,934</div><div class="unit">元（天猫）</div></div><div class="kpi-card"><div class="icon">📈</div><div class="label">最高贡献率</div><div class="value">74%</div><div class="unit">（CD120P）</div></div><div class="kpi-card"><div class="icon">🌍</div><div class="label">核心市场贡献</div><div class="value">4,983,568</div><div class="unit">元（美国）</div></div><div class="kpi-card"><div class="icon">⚠️</div><div class="label">负贡献要素</div><div class="value">2</div><div class="unit">个（需关注）</div></div>
+        </div>
+      </div>
+    </div>
+    <div class="slide bg-dark-reverse" data-slide="5">
+      <div class="chart-content">
+        <h2>📊 渠道边际贡献对比</h2>
+        <div class="chart-box"><canvas id="barChart"></canvas></div>
+      </div>
+    </div>
+    <div class="slide bg-dark-alt" data-slide="6">
+      <div class="chart-content">
+        <h2>📈 渠道边际贡献率对比</h2>
+        <div class="chart-box"><canvas id="ratioChart"></canvas></div>
+      </div>
+    </div>
+    <div class="slide bg-dark" data-slide="7">
+      <div class="chart-content">
+        <h2>🏆 边际贡献 TOP8 排行榜</h2>
+        <div class="chart-box"><canvas id="rankingChart"></canvas></div>
+      </div>
+    </div>
+    <div class="slide bg-dark-reverse" data-slide="8">
+      <div class="table-content">
+        <h2>📋 边际贡献明细表</h2>
+        <div class="table-wrapper">
+          <table>
+            <thead><tr><th>要素名称</th><th>类型</th><th>数值</th><th>贡献</th><th>贡献率</th></tr></thead>
+            <tbody>
+              <tr><td>天猫</td><td>渠道</td><td class="positive">17,742,456</td><td class="positive">16,273,934</td><td class="positive">68%</td></tr><tr><td>CD120P</td><td>产品</td><td class="positive">27,538,152</td><td class="positive">5,635,209</td><td class="positive">74%</td></tr><tr><td>美国</td><td>国家</td><td class="positive">35,434,599</td><td class="positive">4,983,568</td><td class="positive">65%</td></tr><tr><td>Amazon</td><td>渠道</td><td class="positive">29,469,759</td><td class="positive">2,785,991</td><td class="positive">12%</td></tr><tr><td>品牌01</td><td>品牌</td><td class="positive">10,447,912</td><td class="positive">3,059,742</td><td class="positive">40%</td></tr><tr><td>Walmart</td><td>渠道</td><td class="positive">6,583,724</td><td class="positive">2,528,805</td><td class="positive">11%</td></tr><tr><td>CD130P-B</td><td>产品</td><td class="positive">3,134,013</td><td class="negative">-654,608</td><td class="negative">-9%</td></tr><tr><td>CD140P</td><td>产品</td><td class="positive">3,638,106</td><td class="negative">-388,318</td><td class="negative">-5%</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div class="slide bg-dark-alt" data-slide="9">
+      <div class="insight-content">
+        <h2>💡 关键洞察</h2>
+        <div class="insight-grid">
+          <div class="insight-card "><h3>天猫渠道表现卓越</h3><p>以68%贡献率和16,273,934元贡献额，成为最大贡献来源，运营效率高。</p></div><div class="insight-card "><h3>CD120P效率最高</h3><p>贡献率达74%，每单位收入创造边际贡献最大，是明星产品。</p></div><div class="insight-card "><h3>美国市场是核心</h3><p>贡献4,983,568元，贡献率65%，覆盖面广、效益稳定。</p></div><div class="insight-card warning"><h3>⚠️ 存在亏损产品</h3><p>CD130P-B和CD140P边际贡献为负，需评估定价策略。</p></div>
+        </div>
+      </div>
+    </div>
+    <div class="slide bg-dark" data-slide="10">
+      <div class="rec-content">
+        <h2>📝 行动建议</h2>
+        <div class="rec-grid">
+          <div class="rec-card"><h3>加大天猫渠道投入</h3><p>增加营销预算和运营资源，强化最大贡献渠道。</p></div><div class="rec-card"><h3>推广CD120P产品</h3><p>扩大生产规模并加强推广力度，打造明星产品。</p></div><div class="rec-card"><h3>深耕美国市场</h3><p>优化物流、客服和本地化服务，巩固核心市场。</p></div><div class="rec-card"><h3>调整亏损产品</h3><p>对CD130P-B和CD140P进行成本分析和定价评估。</p></div>
+        </div>
+      </div>
+    </div>
+    <div class="slide bg-purple" data-slide="11">
+      <div class="end-content">
+        <h1>谢谢观看</h1>
+        <p>跨境电商边际贡献分析报告</p>
+        <p>BytePlan 数据平台 · 跨境电商租户</p>
+        <div class="source">数据来源：BytePlan 数据平台 · 跨境电商租户<br>分析时间：2026年3月31日</div>
+      </div>
+    </div>
+  </div>
+  <div class="slide-counter" id="slideCounter">1 / 11</div>
+  <script>
+    let currentSlide = 1, 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(); });
+    setTimeout(() => {
+      new Chart(document.getElementById('barChart'), { type: 'bar', data: { labels: ["天猫","Amazon","Walmart","Amazon_VC","Shopify"], datasets: [{ label: '数值', data: [16273934,2785991,2528805,1712695,624534], backgroundColor: ['#4ade80', '#60a5fa', '#f472b6', '#667eea', '#fbbf24'], borderRadius: 8 }] }, options: { responsive: true, plugins: { legend: { labels: { color: '#fff' } } }, scales: { y: { ticks: { color: '#CBD5E1' }, grid: { color: 'rgba(255,255,255,0.1)' } }, x: { ticks: { color: '#fff' }, grid: { display: false } } } } });
+      new Chart(document.getElementById('ratioChart'), { type: 'bar', data: { labels: ["天猫","Amazon","Walmart","Amazon_VC","Shopify"], datasets: [{ label: '贡献率 (%)', data: [68,12,11,7,3], backgroundColor: '#667eea', borderRadius: 8 }] }, options: { indexAxis: 'y', responsive: true, plugins: { legend: { labels: { color: '#fff' } } }, scales: { y: { ticks: { color: '#fff' }, grid: { display: false } }, x: { ticks: { color: '#CBD5E1' }, grid: { color: 'rgba(255,255,255,0.1)' }, max: 100 } } } });
+      new Chart(document.getElementById('rankingChart'), { type: 'bar', data: { labels: ["天猫 (渠道)","CD120P (产品)","美国 (国家)","Amazon (渠道)","品牌01","Walmart (渠道)","英国 (国家)","品牌03"], datasets: [{ label: '数值', data: [16273934,5635209,4983568,2785991,3059742,2528805,1712695,2445409], backgroundColor: '#4ade80', borderRadius: 6 }] }, options: { indexAxis: 'y', responsive: true, plugins: { legend: { display: false } }, scales: { y: { ticks: { color: '#fff' }, grid: { display: false } }, x: { ticks: { color: '#CBD5E1' }, grid: { color: 'rgba(255,255,255,0.1)' } } } } });
+    }, 100);
+  </script>
+</body>
+</html>