byteplan-cli 1.0.2 → 1.2.0

package/skills/byteplan-video/templates/src/components/SummaryScene.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring } from "remotion";
+import { VisualConfig } from "../storyboard/types";
+
+interface SummarySceneProps {
+  config: VisualConfig;
+  narration: string;
+}
+
+const COLORS = {
+  primary: "#667eea",
+  secondary: "#1E293B",
+  accent: "#764ba2",
+  background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
+  text: "#FFFFFF",
+  lightText: "#94A3B8",
+};
+
+export const SummaryScene: React.FC<SummarySceneProps> = ({ config }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 必须提供 points 数据
+  const points = config.points;
+
+  if (!points || points.length === 0) {
+    throw new Error("SummaryScene requires 'points' array in config");
+  }
+
+  // 动画
+  const titleOpacity = spring({ frame, fps, config: { damping: 100 } });
+  const contentOpacity = spring({ frame: frame - 15, fps, config: { damping: 100 } });
+
+  return (
+    <AbsoluteFill style={{ background: COLORS.background }}>
+      {/* 装饰背景 */}
+      <div style={{
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: 600,
+        height: 600,
+        borderRadius: "50%",
+        background: "radial-gradient(circle, rgba(255,106,0,0.1) 0%, transparent 60%)",
+        filter: "blur(80px)",
+      }} />
+
+      {/* 标题 */}
+      <div style={{
+        position: "absolute",
+        top: 100,
+        left: 0,
+        right: 0,
+        textAlign: "center",
+        opacity: titleOpacity,
+      }}>
+        <h2 style={{
+          fontSize: 56,
+          fontWeight: 700,
+          color: COLORS.text,
+          margin: 0,
+        }}>
+          {config.title}
+        </h2>
+        <div style={{
+          width: 100,
+          height: 4,
+          background: COLORS.primary,
+          margin: "20px auto",
+        }} />
+      </div>
+
+      {/* 总结要点 */}
+      <div style={{
+        position: "absolute",
+        top: 220,
+        left: 200,
+        right: 200,
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: 30,
+        opacity: contentOpacity,
+      }}>
+        {points.map((point, index) => {
+          const delay = index * 6;
+          const itemOpacity = spring({ frame: frame - 25 - delay, fps, config: { damping: 100 } });
+          const itemScale = spring({ frame: frame - 25 - delay, fps, config: { damping: 100, stiffness: 80 } });
+
+          return (
+            <div
+              key={index}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 20,
+                padding: "24px 32px",
+                background: "rgba(255,255,255,0.05)",
+                borderRadius: 16,
+                border: "1px solid rgba(255,255,255,0.1)",
+                opacity: itemOpacity,
+                transform: `scale(${itemScale})`,
+              }}
+            >
+              {/* 序号 */}
+              <div style={{
+                width: 50,
+                height: 50,
+                borderRadius: "50%",
+                background: `linear-gradient(135deg, ${COLORS.primary}, ${COLORS.accent})`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 24,
+                fontWeight: 700,
+                flexShrink: 0,
+              }}>
+                {index + 1}
+              </div>
+
+              {/* 文本 */}
+              <div style={{
+                fontSize: 26,
+                fontWeight: 500,
+                color: COLORS.text,
+              }}>
+                {point}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 感谢文字 */}
+      {config.source && (
+        <div style={{
+          position: "absolute",
+          bottom: 80,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: spring({ frame: frame - 50, fps, config: { damping: 100 } }),
+        }}>
+          <p style={{
+            fontSize: 24,
+            color: COLORS.lightText,
+            margin: 0,
+          }}>
+            感谢观看 · 数据来源：{config.source}
+          </p>
+        </div>
+      )}
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/templates/src/components/TitleScene.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring } from "remotion";
+import { VisualConfig } from "../storyboard/types";
+
+interface TitleSceneProps {
+  config: VisualConfig;
+  narration: string;
+}
+
+const COLORS = {
+  primary: "#667eea",    // BytePlan 紫
+  secondary: "#1E293B",
+  accent: "#764ba2",
+  background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
+  text: "#FFFFFF",
+  lightText: "#94A3B8",
+};
+
+export const TitleScene: React.FC<TitleSceneProps> = ({ config }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 动画效果
+  const titleOpacity = spring({ frame, fps, config: { damping: 100 } });
+  const titleScale = spring({ frame, fps, config: { damping: 100, stiffness: 50 } });
+  const subtitleOpacity = spring({ frame: frame - 15, fps, config: { damping: 100 } });
+  const logoOpacity = spring({ frame: frame - 30, fps, config: { damping: 100 } });
+
+  return (
+    <AbsoluteFill style={{ background: COLORS.background }}>
+      {/* 装饰元素 */}
+      <div style={{
+        position: "absolute",
+        top: "10%",
+        left: "5%",
+        width: 200,
+        height: 200,
+        borderRadius: "50%",
+        background: "radial-gradient(circle, rgba(102,126,234,0.2) 0%, transparent 70%)",
+        filter: "blur(40px)",
+      }} />
+
+      <div style={{
+        position: "absolute",
+        bottom: "10%",
+        right: "5%",
+        width: 300,
+        height: 300,
+        borderRadius: "50%",
+        background: "radial-gradient(circle, rgba(118,75,162,0.15) 0%, transparent 70%)",
+        filter: "blur(60px)",
+      }} />
+
+      {/* Logo 装饰 */}
+      <div style={{
+        position: "absolute",
+        top: 80,
+        left: 80,
+        opacity: logoOpacity,
+        display: "flex",
+        alignItems: "center",
+        gap: 16,
+      }}>
+        <div style={{
+          width: 60,
+          height: 60,
+          borderRadius: 12,
+          background: COLORS.primary,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 32,
+          fontWeight: "bold",
+          color: "white",
+        }}>
+          B
+        </div>
+        <span style={{
+          color: COLORS.text,
+          fontSize: 24,
+          fontWeight: 500,
+        }}>
+          BytePlan
+        </span>
+      </div>
+
+      {/* 主标题 */}
+      <div style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        gap: 24,
+      }}>
+        <h1 style={{
+          fontSize: 72,
+          fontWeight: 700,
+          color: COLORS.text,
+          margin: 0,
+          opacity: titleOpacity,
+          transform: `scale(${titleScale})`,
+          textShadow: "0 4px 30px rgba(102,126,234,0.3)",
+        }}>
+          {config.title}
+        </h1>
+
+        <div style={{
+          width: 200,
+          height: 4,
+          background: `linear-gradient(90deg, transparent, ${COLORS.primary}, transparent)`,
+          opacity: subtitleOpacity,
+        }} />
+
+        {config.subtitle && (
+          <h2 style={{
+            fontSize: 32,
+            fontWeight: 400,
+            color: COLORS.lightText,
+            margin: 0,
+            opacity: subtitleOpacity,
+            letterSpacing: 2,
+          }}>
+            {config.subtitle}
+          </h2>
+        )}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/templates/src/compositions/AnalysisVideo.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { AbsoluteFill, Sequence, Audio, staticFile, useVideoConfig } from "remotion";
+import { SceneFactory } from "../components/SceneFactory";
+import storyboardData from "../storyboard/scenes.json";
+
+export const AnalysisVideo: React.FC = () => {
+  const { fps } = useVideoConfig();
+  const scenes = Array.isArray(storyboardData) ? storyboardData : storyboardData.scenes;
+
+  let currentFrame = 0;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "#1a1a2e" }}>
+      {scenes.map((scene, index) => {
+        // 默认每个场景 5 秒，如果已有音频时长则使用
+        const durationSeconds = scene.audioDuration || 5;
+        const durationInFrames = Math.round(durationSeconds * fps);
+
+        const startFrame = currentFrame;
+        currentFrame += durationInFrames;
+
+        return (
+          <Sequence
+            key={scene.id}
+            from={startFrame}
+            durationInFrames={durationInFrames}
+          >
+            <AbsoluteFill>
+              <SceneFactory scene={scene} />
+              {scene.audioPath && (
+                <Audio src={staticFile(scene.audioPath.replace('/audio/', 'audio/'))} />
+              )}
+            </AbsoluteFill>
+          </Sequence>
+        );
+      })}
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/templates/src/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Composition } from "remotion";
+import { AnalysisVideo } from "./compositions/AnalysisVideo";
+import storyboardData from "./storyboard/scenes.json";
+
+// 支持直接的数组或 { scenes: [] } 格式
+const scenes = Array.isArray(storyboardData) ? storyboardData : storyboardData.scenes;
+
+// 计算总时长
+const totalDuration = scenes.reduce(
+  (sum, scene) => sum + (scene.audioDuration || 5),
+  0
+);
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition
+        id="AnalysisVideo"
+        component={AnalysisVideo}
+        durationInFrames={totalDuration * 30}
+        fps={30}
+        width={1920}
+        height={1080}
+      />
+    </>
+  );
+};

package/skills/byteplan-video/templates/src/register-root.tsx

@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./index";
+
+registerRoot(RemotionRoot);

package/skills/byteplan-video/templates/src/storyboard/types.ts

@@ -0,0 +1,46 @@
+// 场景类型
+export type SceneType = 'title' | 'bar_chart' | 'line_chart' | 'insight' | 'summary';
+
+// 视觉配置
+export interface VisualConfig {
+  title: string;           // 必须提供标题
+  subtitle?: string;
+  chartType?: string;
+  highlights?: string[];   // InsightScene 必需
+  points?: string[];       // SummaryScene 必需
+  dataKey?: string;        // 图表场景必需
+  source?: string;         // 数据来源（可选）
+  [key: string]: unknown;
+}
+
+// 分镜场景
+export interface StoryboardScene {
+  id: string;
+  type: SceneType;
+  description: string;
+  narration: string;
+  visualConfig: VisualConfig;
+  audioPath?: string;
+  audioDuration?: number;
+}
+
+// 分镜配置
+export interface Storyboard {
+  scenes: StoryboardScene[];
+}
+
+// 营收数据
+export interface RevenueData {
+  fiscal_year: string;
+  total_revenue: number;
+  year_over_year_growth?: number;
+  net_income?: number;
+}
+
+// 业务板块数据
+export interface BusinessSegmentData {
+  segment: string;
+  revenue: number;
+  percentage: number;
+  year?: string;
+}

package/skills/byteplan-video/templates/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*", "remotion.config.ts"]
+}

package/skills/byteplan-video/templates/tsconfig.scripts.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "outDir": "./dist",
+    "types": ["node"]
+  },
+  "include": ["scripts/**/*"]
+}

package/skills/byteplan-word/SKILL.md

@@ -0,0 +1,233 @@
+---
+name: byteplan-word
+description: 根据已有的分析数据（analysisPlan.json + analysis_report.md）生成 Word 报告。需要先使用 byteplan-analysis skill 完成数据分析。
+---
+
+# BytePlan Word 报告 Skill
+
+## 概述
+
+此 Skill 根据已有的分析数据生成 Word 报告：
+
+1. **检查数据** - 确认 analysisPlan.json 和 analysis_report.md 存在
+2. **组装数据** - 将分析数据转换为 Word 格式
+3. **生成 Word** - 使用 docx 库创建 Word 文档
+
+**前置条件**：必须先使用 [byteplan-analysis](../byteplan-analysis/SKILL.md) skill 完成数据分析。
+
+## 技术栈
+
+使用 Node.js + docx 库，与项目其他 skill 保持一致：
+- `docx` - Word 文档生成库
+
+## 核心流程
+
+```
+用户输入"生成 Word"
+       ↓
+   检查分析数据是否存在
+       ↓
+   读取 analysisPlan.json
+       ↓
+   读取 analysis_report.md
+       ↓
+   组装报告数据
+       ↓
+   pnpm run generate
+       ↓
+   完成
+```
+
+## 前置条件
+
+### 安装依赖
+
+```bash
+cd skills/byteplan-word
+pnpm install
+```
+
+### 检查分析数据
+
+```javascript
+import { existsSync, readFileSync } from 'fs';
+
+// 检查必要文件
+if (!existsSync('analysisPlan.json')) {
+  throw new Error('缺少分析计划文件 analysisPlan.json，请先使用 /byteplan-analysis');
+}
+
+if (!existsSync('analysis_report.md')) {
+  throw new Error('缺少分析报告文件 analysis_report.md，请先使用 /byteplan-analysis');
+}
+
+console.log('✅ 分析数据检查通过');
+```
+
+## 工作流程
+
+### 步骤 1：读取分析计划
+
+```javascript
+const plan = JSON.parse(readFileSync('analysisPlan.json', 'utf-8'));
+
+console.log(`计划名称: ${plan.planName}`);
+console.log(`任务数量: ${plan.tasks.length}`);
+```
+
+### 步骤 2：读取分析报告
+
+```javascript
+const reportMd = readFileSync('analysis_report.md', 'utf-8');
+
+// 解析 Markdown 中的表格数据
+const parsedData = parseMarkdownReport(reportMd);
+```
+
+### 步骤 3：组装 Word 数据
+
+根据分析计划中的任务，组装 Word 支持的数据格式：
+
+```javascript
+const wordData = {
+  title: plan.planName,
+  subtitle: plan.planDescription,
+  period: new Date().toLocaleDateString('zh-CN'),
+  sections: plan.tasks.map(t => t.taskName),
+  summary: extractSummary(parsedData),
+  kpis: extractKPIs(parsedData),
+  tables: extractTables(parsedData),
+  insights: extractInsights(parsedData),
+  recommendations: extractRecommendations(parsedData),
+  source: 'BytePlan 数据平台'
+};
+```
+
+### 步骤 4：生成 Word
+
+```bash
+cd skills/byteplan-word
+pnpm run generate -- -o analysis_report.docx -d word_data.json
+```
+
+## Word 数据格式
+
+```json
+{
+  "title": "报告标题",
+  "subtitle": "副标题",
+  "period": "2026年3月",
+  "sections": ["一、核心指标概览", "二、数据分布分析"],
+  "summary": ["摘要1", "摘要2"],
+  "kpis": [
+    { "label": "指标名称", "value": "数值", "unit": "单位" }
+  ],
+  "barChart": {
+    "title": "图表标题",
+    "data": [
+      { "name": "类别A", "value": 100 },
+      { "name": "类别B", "value": 80 }
+    ]
+  },
+  "ratioData": {
+    "title": "占比标题",
+    "data": [
+      { "name": "类别A", "value": 35 },
+      { "name": "类别B", "value": 28 }
+    ]
+  },
+  "rankingData": {
+    "title": "排行标题",
+    "data": [
+      { "name": "项目A", "value": 100 },
+      { "name": "项目B", "value": 85 }
+    ],
+    "maxItems": 10
+  },
+  "tableData": {
+    "title": "明细表",
+    "columns": [
+      { "key": "字段1", "label": "显示名" }
+    ],
+    "rows": [
+      { "字段1": "值1", "字段2": "值2" }
+    ],
+    "maxRows": 20
+  },
+  "insights": [
+    { "title": "关键发现", "content": "内容" }
+  ],
+  "recommendations": [
+    { "title": "建议", "content": "内容" }
+  ],
+  "appendix": {
+    "说明": "补充内容"
+  },
+  "source": "BytePlan 数据平台"
+}
+```
+
+## Word 文档结构
+
+| 章节 | 内容 | 说明 |
+|-----|------|------|
+| 1 | 封面 | 报告标题、副标题、数据周期 |
+| 2 | 目录 | 报告结构概览 |
+| 3 | 执行摘要 | 核心发现汇总 |
+| 4 | 核心指标 | 关键数据表格 |
+| 5 | 数据分布 | 柱状图数据 |
+| 6 | 占比分析 | 进度条形式 |
+| 7 | 排行分析 | 排名列表 |
+| 8 | 数据明细 | 数据表格 |
+| 9 | 洞察发现 | 关键洞察 |
+| 10 | 总结建议 | 结论和建议 |
+| 11 | 附录 | 补充数据（可选） |
+| 12 | 结尾页 | 报告结束 |
+
+## 完整示例
+
+### 1. 检查数据文件
+
+```javascript
+if (!existsSync('analysisPlan.json') || !existsSync('analysis_report.md')) {
+  console.log('请先使用 /byteplan-analysis 完成数据分析');
+  return;
+}
+```
+
+### 2. 读取并组装数据
+
+```javascript
+const plan = JSON.parse(readFileSync('analysisPlan.json', 'utf-8'));
+const report = readFileSync('analysis_report.md', 'utf-8');
+
+// 从 Markdown 中提取数据
+const data = extractDataFromMarkdown(report);
+
+// 组装 Word 数据
+const wordData = {
+  title: plan.planName,
+  subtitle: `分析主题: ${plan.planDescription}`,
+  period: new Date().toLocaleDateString('zh-CN'),
+  kpis: extractKPIs(data),
+  tables: extractTables(data),
+  insights: extractInsights(data),
+  // ...
+};
+
+writeFileSync('word_data.json', JSON.stringify(wordData, null, 2));
+```
+
+### 3. 生成 Word
+
+```bash
+cd skills/byteplan-word
+pnpm run generate -- -o analysis_report.docx -d ../word_data.json
+```
+
+## 注意事项
+
+- **前置条件**：必须先使用 `/byteplan-analysis` 完成数据分析
+- **数据文件**：确保 `analysisPlan.json` 和 `analysis_report.md` 存在
+- **数据转换**：自动从 Markdown 中提取表格和关键数据
+- **包管理器**：使用 pnpm 安装依赖

package/skills/byteplan-word/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "byteplan-word",
+  "version": "1.0.0",
+  "description": "BytePlan Word 报告生成",
+  "type": "module",
+  "scripts": {
+    "generate": "node scripts/generate_word.js"
+  },
+  "dependencies": {
+    "docx": "^8.5.0"
+  }
+}