Ver Fonte

github-trending视频模板:优化首屏样式

lkatzey há 1 mês atrás
pai
commit
f90a581dcc
2 ficheiros alterados com 52 adições e 1 exclusões
  1. 8 1
      packages/core/src/stages/parse.ts
  2. 44 0
      packages/templates/src/Root.tsx

+ 8 - 1
packages/core/src/stages/parse.ts

@@ -186,11 +186,18 @@ export async function parseText(
         ...(coverInput.imageQuery ? [{ query: coverInput.imageQuery }] : []),
       ]
     : (firstSceneCoverImage ? [firstSceneCoverImage] : []);
+  // For github-trending the cover doubles as the opening narration screen —
+  // give it a fixed opening line (with today's date) so the TTS stage produces
+  // audio and the compose stage sets the cover duration to match. Other
+  // templates keep the original behaviour (1s silent cover).
+  const coverNarration = template === "github-trending"
+    ? `大家好,今天是${formatTodayChineseDate()},欢迎收看 GitHub 每日热榜。今天为大家精选了几个值得关注的优质开源项目,让我们一探究竟。`
+    : "";
   scenes.push({
     id: "cover",
     index: sceneIndex++,
     sceneType: "cover",
-    narration: "",
+    narration: coverNarration,
     title: videoInput.title,
     keyframes: coverKeyframes,
     images: coverImages,

+ 44 - 0
packages/templates/src/Root.tsx

@@ -151,6 +151,50 @@ const CoverScene: React.FC<{
   totalFrames: number;
 }> = ({ template, title, subtitle, keyframes, backgroundAsset }) => {
   const accent = THEMES[template].primaryLight;
+  const isGithubTrending = template === "github-trending";
+
+  // github-trending cover doubles as the opening narration screen — light
+  // background, much larger masthead typography, no dark image overlay.
+  if (isGithubTrending) {
+    return (
+      <AbsoluteFill style={{
+        background: "linear-gradient(135deg, #f8fafc 0%, #e2e8f0 60%, #cbd5e1 100%)",
+      }}>
+        {/* Top accent bar in template primary */}
+        <div style={{
+          position: "absolute", top: 0, left: 0, width: "100%", height: 8,
+          background: `linear-gradient(90deg, ${THEMES[template].primary}, ${accent})`,
+        }} />
+        <div style={{
+          position: "absolute", inset: 0, display: "flex",
+          flexDirection: "column", justifyContent: "center", alignItems: "center",
+          padding: 80, textAlign: "center",
+        }}>
+          <div style={{
+            fontSize: 132, fontWeight: 800, color: "#0f172a",
+            fontFamily: "Noto Sans SC", lineHeight: 1.15,
+            marginBottom: 32, letterSpacing: "-0.02em",
+          }}>
+            {title}
+          </div>
+          {subtitle && (
+            <div style={{
+              fontSize: 56, fontWeight: 600, color: "#475569",
+              fontFamily: "Noto Sans SC",
+              padding: "12px 36px",
+              borderRadius: 16,
+              background: "rgba(255,255,255,0.7)",
+              border: `2px solid ${accent}`,
+              boxShadow: "0 8px 24px rgba(15,23,42,0.08)",
+            }}>
+              {subtitle}
+            </div>
+          )}
+        </div>
+      </AbsoluteFill>
+    );
+  }
+
   return (
     <AbsoluteFill style={{ backgroundColor: "#0f172a" }}>
       {backgroundAsset && (