byteplan-cli 1.0.2 → 1.2.0

package/skills/byteplan-video/remotion-project/src/scenes/ChartSlide.tsx

@@ -0,0 +1,201 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  interpolate,
+} from "remotion";
+
+interface ChartSlideProps {
+  title: string;
+  chartType: string;
+  data: Array<{ name: string; value: number }>;
+}
+
+const COLORS = ["#667eea", "#4ade80", "#f472b6", "#fbbf24", "#06B6D4"];
+
+export const ChartSlide: React.FC<ChartSlideProps> = ({
+  title,
+  chartType,
+  data,
+}) => {
+  const frame = useCurrentFrame();
+
+  const titleOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: "clamp" });
+
+  if (chartType === "pie") {
+    // 饼图
+    const total = data.reduce((sum, d) => sum + d.value, 0);
+    const radius = 180;
+    const svgSize = 400;
+    const cx = svgSize / 2;
+    const cy = svgSize / 2;
+
+    let cumulativeAngle = 0;
+    const slices = data.map((d, i) => {
+      const angle = (d.value / total) * 360;
+      const startAngle = cumulativeAngle;
+      cumulativeAngle += angle;
+      return { ...d, startAngle, angle, color: COLORS[i % COLORS.length] };
+    });
+
+    const pieOpacity = interpolate(frame, [20, 50], [0, 1], { extrapolateRight: "clamp" });
+
+    return (
+      <AbsoluteFill
+        style={{
+          background: "linear-gradient(135deg, #16213e 0%, #1a1a2e 100%)",
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "column",
+        }}
+      >
+        <div
+          style={{
+            fontSize: 44,
+            fontWeight: "bold",
+            color: "#fff",
+            marginBottom: 50,
+            opacity: titleOpacity,
+          }}
+        >
+          📦 {title}
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "row", gap: 80, alignItems: "center", opacity: pieOpacity }}>
+          {/* 饼图 SVG */}
+          <svg width={svgSize} height={svgSize}>
+            {slices.map((slice, i) => {
+              const startRad = (slice.startAngle - 90) * (Math.PI / 180);
+              const endRad = (slice.startAngle + slice.angle - 90) * (Math.PI / 180);
+              const x1 = cx + radius * Math.cos(startRad);
+              const y1 = cy + radius * Math.sin(startRad);
+              const x2 = cx + radius * Math.cos(endRad);
+              const y2 = cy + radius * Math.sin(endRad);
+              const largeArc = slice.angle > 180 ? 1 : 0;
+
+              return (
+                <path
+                  key={i}
+                  d={`M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`}
+                  fill={slice.color}
+                  stroke="#fff"
+                  strokeWidth={2}
+                />
+              );
+            })}
+          </svg>
+
+          {/* 图例 */}
+          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+            {data.map((d, i) => (
+              <div key={i} style={{ display: "flex", alignItems: "center", gap: 16 }}>
+                <div
+                  style={{
+                    width: 24,
+                    height: 24,
+                    borderRadius: 4,
+                    background: COLORS[i % COLORS.length],
+                  }}
+                />
+                <div style={{ fontSize: 20, color: "#fff", width: 100 }}>{d.name}</div>
+                <div style={{ fontSize: 18, color: "#4ade80" }}>
+                  ¥{d.value.toLocaleString()}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </AbsoluteFill>
+    );
+  }
+
+  // 柱状图
+  const maxValue = Math.max(...data.map((d) => d.value));
+  const barWidth = 140;
+  const barGap = 40;
+  const chartHeight = 400;
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 44,
+          fontWeight: "bold",
+          color: "#fff",
+          marginBottom: 60,
+          opacity: titleOpacity,
+        }}
+      >
+        {title.includes("渠道") ? "🛒" : "🗺️"} {title}
+      </div>
+
+      {/* 图表容器 - 居中 */}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "flex-end",
+          gap: barGap,
+          justifyContent: "center",
+        }}
+      >
+        {data.map((d, i) => {
+          const barHeight = (d.value / maxValue) * chartHeight;
+          const delay = 20 + i * 10;
+          const animatedHeight = interpolate(
+            frame,
+            [delay, delay + 30],
+            [0, barHeight],
+            { extrapolateRight: "clamp" }
+          );
+          const opacity = interpolate(frame, [delay, delay + 20], [0, 1], { extrapolateRight: "clamp" });
+
+          return (
+            <div
+              key={i}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                opacity,
+                width: barWidth,
+              }}
+            >
+              {/* 数值 */}
+              <div
+                style={{
+                  fontSize: 24,
+                  fontWeight: "bold",
+                  color: "#4ade80",
+                  marginBottom: 10,
+                }}
+              >
+                {maxValue <= 100 ? `${d.value}%` : `¥${(d.value / 1000).toFixed(0)}k`}
+              </div>
+              {/* 柱状条 */}
+              <div
+                style={{
+                  width: barWidth,
+                  height: animatedHeight,
+                  background: `linear-gradient(180deg, ${COLORS[i]} 0%, ${COLORS[i]}80 100%)`,
+                  borderRadius: 8,
+                  boxShadow: `0 4px 20px ${COLORS[i]}40`,
+                }}
+              />
+              {/* 标签 */}
+              <div style={{ fontSize: 22, color: "#fff", marginTop: 16 }}>
+                {d.name}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/remotion-project/src/scenes/CoverSlide.tsx

@@ -0,0 +1,61 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  interpolate,
+} from "remotion";
+
+interface CoverSlideProps {
+  title: string;
+  subtitle: string;
+}
+
+export const CoverSlide: React.FC<CoverSlideProps> = ({ title, subtitle }) => {
+  const frame = useCurrentFrame();
+
+  const titleOpacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
+  const subtitleOpacity = interpolate(frame, [30, 60], [0, 1], { extrapolateRight: "clamp" });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 64,
+          fontWeight: "bold",
+          color: "#fff",
+          textAlign: "center",
+          opacity: titleOpacity,
+          marginBottom: 40,
+        }}
+      >
+        📊 {title}
+      </div>
+      <div
+        style={{
+          fontSize: 32,
+          color: "rgba(255,255,255,0.9)",
+          textAlign: "center",
+          opacity: subtitleOpacity,
+        }}
+      >
+        {subtitle}
+      </div>
+      <div
+        style={{
+          fontSize: 18,
+          color: "rgba(255,255,255,0.6)",
+          marginTop: 60,
+          opacity: subtitleOpacity,
+        }}
+      >
+        2026年4月1日 · 跨境电商租户
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/remotion-project/src/scenes/EndSlide.tsx

@@ -0,0 +1,60 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  interpolate,
+} from "remotion";
+
+interface EndSlideProps {
+  title: string;
+  subtitle: string;
+}
+
+export const EndSlide: React.FC<EndSlideProps> = ({ title, subtitle }) => {
+  const frame = useCurrentFrame();
+
+  const titleOpacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
+  const subtitleOpacity = interpolate(frame, [30, 60], [0, 1], { extrapolateRight: "clamp" });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 52,
+          fontWeight: "bold",
+          color: "#fff",
+          textAlign: "center",
+          opacity: titleOpacity,
+        }}
+      >
+        📊 {title}
+      </div>
+      <div
+        style={{
+          fontSize: 28,
+          color: "rgba(255,255,255,0.8)",
+          marginTop: 30,
+          opacity: subtitleOpacity,
+        }}
+      >
+        {subtitle}
+      </div>
+      <div
+        style={{
+          fontSize: 18,
+          color: "rgba(255,255,255,0.6)",
+          marginTop: 50,
+          opacity: subtitleOpacity,
+        }}
+      >
+        BytePlan 数据平台
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/remotion-project/src/scenes/InsightSlide.tsx

@@ -0,0 +1,101 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  interpolate,
+  spring,
+} from "remotion";
+
+interface InsightSlideProps {
+  title: string;
+  insights: Array<{ title: string; content: string; warning?: boolean }>;
+}
+
+export const InsightSlide: React.FC<InsightSlideProps> = ({ title, insights }) => {
+  const frame = useCurrentFrame();
+
+  const titleOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: "clamp" });
+
+  // 根据 insights 数量决定布局
+  const gridCols = insights.length <= 3 ? 1 : 2;
+  const gridRows = Math.ceil(insights.length / gridCols);
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+        padding: 60,
+      }}
+    >
+      <div
+        style={{
+          fontSize: 48,
+          fontWeight: "bold",
+          color: "#fff",
+          marginBottom: 50,
+          opacity: titleOpacity,
+        }}
+      >
+        💡 {title}
+      </div>
+
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: gridCols === 1 ? "1fr" : "1fr 1fr",
+          gap: 25,
+          width: gridCols === 1 ? 800 : 1200,
+        }}
+      >
+        {insights.map((insight, index) => {
+          const delay = 20 + index * 12;
+          const scale = spring({
+            frame: frame - delay,
+            fps: 30,
+            config: { damping: 100, stiffness: 200 },
+          });
+          const opacity = interpolate(frame, [delay, delay + 20], [0, 1], { extrapolateRight: "clamp" });
+
+          return (
+            <div
+              key={index}
+              style={{
+                background: insight.warning
+                  ? "rgba(251,191,36,0.15)"
+                  : "rgba(255,255,255,0.1)",
+                borderRadius: 18,
+                padding: 30,
+                borderLeft: `5px solid ${insight.warning ? "#fbbf24" : "#667eea"}`,
+                opacity,
+                transform: `scale(${scale})`,
+              }}
+            >
+              {insight.title && (
+                <div
+                  style={{
+                    fontSize: 26,
+                    fontWeight: "bold",
+                    color: insight.warning ? "#fbbf24" : "#fff",
+                    marginBottom: 12,
+                  }}
+                >
+                  {insight.title}
+                </div>
+              )}
+              <div style={{ 
+                fontSize: 20, 
+                color: "#CBD5E1", 
+                lineHeight: 1.6,
+                fontWeight: insight.title ? "normal" : "bold"
+              }}>
+                {insight.content}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/remotion-project/src/scenes/KpiSlide.tsx

@@ -0,0 +1,84 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  interpolate,
+  spring,
+} from "remotion";
+
+interface KpiSlideProps {
+  title: string;
+  kpis: Array<{ icon: string; label: string; value: string }>;
+}
+
+export const KpiSlide: React.FC<KpiSlideProps> = ({ title, kpis }) => {
+  const frame = useCurrentFrame();
+
+  const titleOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: "clamp" });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: "linear-gradient(135deg, #0f3460 0%, #16213e 100%)",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+        padding: 60,
+      }}
+    >
+      <div
+        style={{
+          fontSize: 44,
+          fontWeight: "bold",
+          color: "#fff",
+          marginBottom: 60,
+          opacity: titleOpacity,
+        }}
+      >
+        📈 {title}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          gap: 40,
+          justifyContent: "center",
+        }}
+      >
+        {kpis.map((kpi, index) => {
+          const delay = 20 + index * 15;
+          const scale = spring({
+            frame: frame - delay,
+            fps: 30,
+            config: { damping: 100, stiffness: 200 },
+          });
+          const opacity = interpolate(frame, [delay, delay + 20], [0, 1], { extrapolateRight: "clamp" });
+
+          return (
+            <div
+              key={index}
+              style={{
+                background: "rgba(255,255,255,0.1)",
+                borderRadius: 20,
+                padding: 40,
+                textAlign: "center",
+                border: "2px solid rgba(255,255,255,0.2)",
+                width: 280,
+                opacity,
+                transform: `scale(${scale})`,
+              }}
+            >
+              <div style={{ fontSize: 48, marginBottom: 20 }}>{kpi.icon}</div>
+              <div style={{ fontSize: 18, color: "#94A3B8", marginBottom: 12 }}>
+                {kpi.label}
+              </div>
+              <div style={{ fontSize: 36, fontWeight: "bold", color: "#4ade80" }}>
+                {kpi.value}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/remotion-project/src/scenes/RecommendationSlide.tsx

@@ -0,0 +1,100 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  interpolate,
+  spring,
+} from "remotion";
+
+interface RecommendationSlideProps {
+  title: string;
+  recommendations: string[];
+  source?: string;
+}
+
+export const RecommendationSlide: React.FC<RecommendationSlideProps> = ({
+  title,
+  recommendations,
+  source,
+}) => {
+  const frame = useCurrentFrame();
+
+  const titleOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: "clamp" });
+
+  // 根据建议数量决定布局
+  const gridCols = recommendations.length <= 2 ? 1 : Math.min(recommendations.length, 2);
+  const gridRows = Math.ceil(recommendations.length / gridCols);
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: "linear-gradient(135deg, #0f3460 0%, #16213e 100%)",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+        padding: 60,
+      }}
+    >
+      <div
+        style={{
+          fontSize: 48,
+          fontWeight: "bold",
+          color: "#fff",
+          marginBottom: 50,
+          opacity: titleOpacity,
+        }}
+      >
+        🎯 {title}
+      </div>
+
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: gridCols === 1 ? "1fr" : "1fr 1fr",
+          gap: 25,
+          width: gridCols === 1 ? 800 : 1200,
+        }}
+      >
+        {recommendations.map((rec, index) => {
+          const delay = 20 + index * 12;
+          const scale = spring({
+            frame: frame - delay,
+            fps: 30,
+            config: { damping: 100, stiffness: 200 },
+          });
+          const opacity = interpolate(frame, [delay, delay + 20], [0, 1], { extrapolateRight: "clamp" });
+
+          return (
+            <div
+              key={index}
+              style={{
+                background: "rgba(74,222,128,0.15)",
+                borderRadius: 18,
+                padding: 30,
+                borderLeft: "5px solid #4ade80",
+                opacity,
+                transform: `scale(${scale})`,
+              }}
+            >
+              <div style={{ fontSize: 22, color: "#fff", lineHeight: 1.6 }}>
+                {rec}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {source && (
+        <div
+          style={{
+            fontSize: 16,
+            color: "#94A3B8",
+            marginTop: 40,
+            opacity: interpolate(frame, [60, 80], [0, 1], { extrapolateRight: "clamp" }),
+          }}
+        >
+          数据来源：{source}
+        </div>
+      )}
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/remotion-project/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"]
+}

package/skills/byteplan-video/remotion-project/video_data.json

@@ -0,0 +1,76 @@
+{
+  "title": "边际贡献分析报告",
+  "subtitle": "找出贡献最大的三个要素",
+  "period": "2026年4月2日",
+  "scenes": [
+    {
+      "id": "scene_1",
+      "type": "title",
+      "title": "边际贡献分析报告",
+      "subtitle": "找出贡献最大的三个要素",
+      "narration": "本视频将为您分析边际贡献情况，找出贡献最大的三个要素。",
+      "duration": 5
+    },
+    {
+      "id": "scene_2",
+      "type": "insight",
+      "title": "核心发现",
+      "narration": "经过分析，天猫渠道以1627万元边际贡献位居第一，CD120P产品贡献560万元排名第二，美国市场贡献498万元排名第三。",
+      "highlights": [
+        "🥇 天猫渠道：边际贡献 1,627万元，贡献率 68%",
+        "🥈 CD120P产品：边际贡献 563万元，贡献率 74%",
+        "🥉 美国市场：边际贡献 498万元，贡献率 65%"
+      ],
+      "duration": 10
+    },
+    {
+      "id": "scene_3",
+      "type": "bar_chart",
+      "title": "边际贡献对比（TOP5）",
+      "narration": "从边际贡献对比图可以看出，天猫渠道遥遥领先，是公司最核心的销售渠道。",
+      "duration": 10
+    },
+    {
+      "id": "scene_4",
+      "type": "insight",
+      "title": "关键洞察",
+      "narration": "天猫渠道贡献占比68%，是最大收入来源。CD120P产品贡献率高达74%，盈利能力最强。美国市场收入规模最大，但贡献率65%，仍有优化空间。天猫渠道变动成本偏高，需排查运营成本构成。",
+      "highlights": [
+        "天猫渠道：贡献占比68%，是最大收入来源",
+        "CD120P产品：贡献率74%，盈利效率最高",
+        "美国市场：收入最大，贡献率65%仍有优化空间",
+        "⚠️ 天猫变动成本偏高：需排查运营成本构成"
+      ],
+      "duration": 10
+    },
+    {
+      "id": "scene_5",
+      "type": "summary",
+      "title": "行动建议",
+      "narration": "建议加大CD120P产品产能，优化天猫运营成本，并建立月度边际贡献监控机制。",
+      "points": [
+        "加大CD120P产能，贡献率74%的产品应获得更多资源",
+        "优化天猫运营成本，降低变动成本提升贡献率",
+        "建立月度边际贡献监控机制，及时发现问题"
+      ],
+      "source": "BytePlan 数据平台 · 跨境电商租户",
+      "duration": 8
+    },
+    {
+      "id": "scene_6",
+      "type": "end",
+      "title": "边际贡献分析报告",
+      "narration": "谢谢观看。",
+      "duration": 3
+    }
+  ],
+  "chartData": {
+    "channelContribution": [
+      { "name": "天猫", "value": 1627 },
+      { "name": "CD120P", "value": 563 },
+      { "name": "美国", "value": 498 },
+      { "name": "Amazon", "value": 279 },
+      { "name": "京东", "value": 156 }
+    ]
+  }
+}