@zzclub/pipeline 0.12.0 → 0.13.0

package/src/commands/render.ts

@@ -20,12 +20,15 @@ import { join } from "path";
 import { parseArgs, requireArg, flagArg } from "../args";
 import { printResult, renderRender } from "../output";
 import { loadConfig } from "../config";
+import { resolveRenderBranding } from "../render-branding";
+import { resolveCoverTheme } from "../schema/cover-theme";
 import { resolveImageRenderer } from "../adapter-loader";
 import {
   acquireStateOperationLock,
   defaultBodyInputs,
   normalizeNewspicRenderSpec,
   readResolvedState,
+  reenterRender,
   validateForPhase,
   writeState,
   type NewspicRenderSpec,
@@ -59,6 +62,7 @@ Usage: zzhub-pipeline render [options]
 Options:
   --state        Path to state JSON (required)
   --skip-render  Plan only, don't invoke renderer (optional)
+  --cover-theme  Cover theme ID; saves the task choice (optional)
 `.trim());
     return;
   }
@@ -88,6 +92,20 @@ Options:
   // ── Image Plan ──────────────────────────────────────────────────
 
   const routePrimary = state.route.primary;
+  const config = loadConfig();
+  const requestedTheme = parsed["cover-theme"] === undefined ? undefined : requireArg(parsed, "cover-theme", "cover theme ID").trim();
+  const coverTheme = routePrimary === "blog" ? undefined : resolveCoverTheme(
+    config.render.cover,
+    routePrimary === "wechat-article" ? "wechat-cover-split" : "poster-3-4",
+    state.route.account,
+    requestedTheme ?? state.intent.cover_theme,
+  );
+  if (requestedTheme !== undefined && requestedTheme !== state.intent.cover_theme) {
+    if (!coverTheme) throw new Error("blog 路由不需要封面主题");
+    state.intent.cover_theme = requestedTheme;
+    reenterRender(state);
+    await writeState(statePath, state);
+  }
 
   if (routePrimary === "blog") {
     // Blog doesn't need images by default
@@ -143,6 +161,7 @@ Options:
     template,
     cover_template: coverTemplate,
     cover_title: coverTitle,
+    cover_theme: coverTheme?.id ?? null,
     output_dir: outputDir,
     preview_required: false,
     status: "planned",
@@ -203,7 +222,6 @@ Options:
 
   // ── Invoke image renderer adapter ───────────────────────────────
 
-  const config = loadConfig();
   const imageRenderer = await resolveImageRenderer(config);
   reportProgress({ stage: "render.adapter", message: "开始生成图片" });
 
@@ -214,7 +232,9 @@ Options:
     ? state.images.body_inputs.received
     : [];
 
+  const branding = resolveRenderBranding(config, state.route.account);
   const renderResult = await imageRenderer.render({
+    coverTheme,
     onProgress: reportProgress,
     state,
     bodyText: cleanBody,
@@ -231,14 +251,12 @@ Options:
     bodyImages,
     minPages: newspicRenderSpec.min_pages,
     maxPages: newspicRenderSpec.max_pages,
-    accountVisualParams: state.route.account_visual_params
-      ? {
-          footer: state.route.account_visual_params.footer,
-          bg: state.route.account_visual_params.bg,
-          highlight: state.route.account_visual_params.highlight,
-          fallbackIcon: state.route.account_visual_params.fallback_icon,
-        }
-      : undefined,
+    accountVisualParams: {
+      footer: branding.footerText,
+      bg: state.route.account_visual_params?.bg,
+      highlight: state.route.account_visual_params?.highlight,
+      fallbackIcon: branding.logo,
+    },
     theme: routePrimary === "wechat-newspic" ? getLongformTheme(state.route.account) : undefined,
     template,
   });

package/src/config.ts

@@ -10,6 +10,7 @@ import {
 import { homedir, platform } from "os";
 import { dirname, isAbsolute, join, resolve } from "path";
 import { PipelineConfigSchema } from "./schema/config";
+import { mergeCoverSettings } from "./schema/cover-theme";
 
 import type {
   PipelineConfig,
@@ -196,6 +197,7 @@ export function normalizeConfig(value: unknown, legacyValue?: unknown): Pipeline
     cos: mergedCos,
     plugins: mergedPlugins,
     imgx: mergedImgx,
+    render: mergeCoverSettings(legacy.render ?? {}, source.render ?? {}),
   });
 }
 
@@ -403,6 +405,9 @@ export function setConfigValue(
 ): PipelineConfig {
   const next = JSON.parse(JSON.stringify(config)) as PipelineConfig;
   const segments = key.split(".").filter(Boolean);
+  if (segments.some((segment) => ["__proto__", "constructor", "prototype"].includes(segment))) {
+    throw new Error("invalid config key");
+  }
   if (segments.length === 0) {
     throw new Error("config key cannot be empty");
   }

package/src/cover-theme-presets.json

@@ -0,0 +1,59 @@
+{
+  "business": {
+    "name": "商务", "description": "浅灰与深蓝，左对齐标题与细线",
+    "colors": { "text": "#13243A", "accent": "#2457A7", "muted": "#586A80" },
+    "background": { "fill": { "type": "solid", "color": "#F1F5F9" } },
+    "decoration": { "pattern": "lines", "color": "#2457A7", "opacity": 0.18 }
+  },
+  "technology": {
+    "name": "科技", "description": "深蓝渐变与青色网格",
+    "colors": { "text": "#EAF4FF", "accent": "#67E8F9", "muted": "#A6BDD8" },
+    "background": { "fill": { "type": "linear", "angle": 135, "stops": [{ "color": "#0B1027", "offset": 0 }, { "color": "#182B5B", "offset": 100 }] } },
+    "decoration": { "pattern": "grid", "color": "#67E8F9", "opacity": 0.1, "size": 48 }
+  },
+  "minimal": {
+    "name": "简约", "description": "白底黑字，宽留白",
+    "colors": { "text": "#18181B", "accent": "#52525B", "muted": "#71717A" },
+    "background": { "fill": { "type": "solid", "color": "#FFFFFF" } },
+    "layout": { "safeArea": { "left": 108, "right": 108, "top": 108, "bottom": 72 } }
+  },
+  "solid": {
+    "name": "纯色", "description": "钴蓝与白色大字，黄色强调",
+    "colors": { "text": "#FFFFFF", "accent": "#FFE08A", "muted": "#D9E1FF" },
+    "background": { "fill": { "type": "solid", "color": "#3155D9" } },
+    "layout": { "textAlign": "center" }
+  },
+  "cute": {
+    "name": "可爱", "description": "粉黄渐变、手写字与轻盈圆点",
+    "typography": { "title": { "fontFamily": "LXGWWenKai", "fontWeight": 700 }, "subtitle": { "fontFamily": "LXGWWenKai", "fontSize": 56, "minFontSize": 40, "fontWeight": 400, "lineHeight": 1.4 } },
+    "colors": { "text": "#623C47", "accent": "#D64B78", "muted": "#856675" },
+    "background": { "fill": { "type": "linear", "angle": 150, "stops": [{ "color": "#FFF1F4", "offset": 0 }, { "color": "#FFF6DF", "offset": 100 }] } },
+    "decoration": { "pattern": "dots", "color": "#E4658C", "opacity": 0.12, "size": 58 },
+    "layout": { "textAlign": "center" }
+  },
+  "serious": {
+    "name": "严肃", "description": "米白纸面、墨色宋体与暗红强调",
+    "typography": { "title": { "fontFamily": "LXGWNeoZhiSongPlus", "fontWeight": 700 } },
+    "colors": { "text": "#202020", "accent": "#8A302B", "muted": "#655E54" },
+    "background": { "fill": { "type": "solid", "color": "#F3F0E8" } },
+    "decoration": { "pattern": "lines", "color": "#8A302B", "opacity": 0.18 }
+  },
+  "abstract": {
+    "name": "抽象", "description": "淡紫与冰蓝，边缘错位圆环",
+    "colors": { "text": "#302456", "accent": "#7653D5", "muted": "#695A87" },
+    "background": { "fill": { "type": "radial", "position": { "x": 20, "y": 10 }, "stops": [{ "color": "#EEE6FF", "offset": 0 }, { "color": "#E1F2FF", "offset": 100 }] } },
+    "decoration": { "pattern": "rings", "color": "#7653D5", "opacity": 0.16, "size": 180 }
+  },
+  "entertainment": {
+    "name": "娱乐", "description": "明黄底色、深紫大字与粉色几何装饰",
+    "colors": { "text": "#241341", "accent": "#B52D74", "muted": "#62532B" },
+    "background": { "fill": { "type": "solid", "color": "#FFF06A" } },
+    "decoration": { "pattern": "burst", "color": "#ED4F9A", "opacity": 0.32, "size": 144 }
+  },
+  "fresh-sage": { "name": "清新绿", "description": "早早集市原有绿色配色" },
+  "soft-rose": {
+    "name": "柔和粉", "description": "古一账号原有粉色配色",
+    "colors": { "text": "#1A1A1A", "accent": "#CA6093", "muted": "#795C6D" },
+    "background": { "fill": { "type": "solid", "color": "#FAF5F8" } }
+  }
+}

package/src/imgx/assets/browser/cover.css

@@ -0,0 +1,25 @@
+* { box-sizing: border-box; }
+html, body { margin: 0; }
+.cover { width: var(--width); height: var(--height); position: relative; overflow: hidden; background: var(--background); color: var(--text); }
+.layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+.pattern { opacity: var(--decoration-opacity); }
+.pattern-lines { border-top: 2px solid var(--decoration); border-bottom: 2px solid var(--decoration); inset: 24px; width: auto; height: auto; }
+.pattern-grid { background-image: linear-gradient(var(--decoration) 1px, transparent 1px), linear-gradient(90deg, var(--decoration) 1px, transparent 1px); background-size: var(--decoration-size) var(--decoration-size); }
+.pattern-dots { background-image: radial-gradient(circle, var(--decoration) 2px, transparent 3px); background-size: var(--decoration-size) var(--decoration-size); }
+.pattern-rings { background: repeating-radial-gradient(circle at 105% 8%, transparent 0, transparent calc(var(--decoration-size) - 3px), var(--decoration) calc(var(--decoration-size) - 2px), var(--decoration) var(--decoration-size)); }
+.pattern-burst { background: repeating-conic-gradient(from 15deg at 105% -5%, var(--decoration) 0deg 8deg, transparent 8deg 28deg); mask-image: radial-gradient(circle at 100% 0, black 0, transparent 65%); }
+.copy { position: absolute; inset: 0 auto 0 0; width: var(--copy-width); }
+.text-area { position: absolute; top: var(--top); right: var(--right); bottom: calc(var(--bottom) + 80px); left: var(--left); display: flex; flex-direction: column; justify-content: var(--vertical); text-align: var(--align); }
+.text-stack { flex: 0 0 auto; width: 100%; }
+.title, .subtitle { margin: 0; white-space: pre-wrap; text-wrap: balance; overflow-wrap: anywhere; }
+.title { font-family: var(--title-font), sans-serif; font-size: var(--title-size); font-weight: var(--title-weight); line-height: var(--title-leading); letter-spacing: var(--title-tracking); }
+.subtitle { margin-top: var(--block-gap); font-family: var(--subtitle-font), serif; font-size: var(--subtitle-size); font-weight: var(--subtitle-weight); line-height: var(--subtitle-leading); letter-spacing: var(--subtitle-tracking); }
+.subtitle:empty { display: none; }
+.highlight { color: var(--accent); }
+.signature { position: absolute; left: var(--left); right: var(--right); bottom: var(--bottom); display: flex; align-items: center; gap: 12px; color: var(--muted); }
+.signature span { min-width: 0; overflow-wrap: anywhere; font-family: var(--footer-font), sans-serif; font-size: var(--footer-size); font-weight: var(--footer-weight); line-height: var(--footer-leading); letter-spacing: var(--footer-tracking); }
+.signature img { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: contain; }
+.logo-panel { display: none; }
+.cover-banner .signature img { display: none; }
+.cover-banner .logo-panel { display: flex; position: absolute; right: 0; top: 0; width: 400px; height: 400px; align-items: center; justify-content: center; }
+.logo-panel img { width: 216px; height: 216px; border-radius: 40px; object-fit: contain; }

package/src/imgx/assets/browser/cover.js

@@ -0,0 +1,40 @@
+// 字号测量和最终成图都使用同一个 DOM，避免二次换行偏差。
+window.__zzhubRenderReady = (async function fitCover() {
+  try {
+    const config = JSON.parse(document.getElementById("cover-config").textContent);
+    const cover = document.querySelector(".cover");
+    const area = document.querySelector(".text-area");
+    const stack = document.querySelector(".text-stack");
+    const signature = document.querySelector(".signature");
+    const title = document.querySelector(".title");
+    const subtitle = document.querySelector(".subtitle");
+    // 大型 CJK 字体必须加载完成，不能用回退字体计算字号。
+    await Promise.all(Object.values(config.typography).map(font => document.fonts.load(`${font.fontWeight} ${font.fontSize}px "${font.fontFamily}"`)));
+    await document.fonts.ready;
+    await Promise.all([...document.images].map(image => image.decode()));
+    area.style.bottom = `${config.layout.safeArea.bottom + signature.getBoundingClientRect().height + 32}px`;
+    if (area.clientWidth <= 0 || area.clientHeight <= 0) throw new Error("封面安全区无法容纳文字和署名");
+    function fit(ratio) {
+      for (const role of ["title", "subtitle"]) {
+        const font = config.typography[role];
+        cover.style.setProperty(`--${role}-size`, `${font.minFontSize + (font.fontSize - font.minFontSize) * ratio}px`);
+      }
+      return stack.getBoundingClientRect().height <= area.clientHeight + 0.5
+        && title.scrollWidth <= title.clientWidth + 1
+        && subtitle.scrollWidth <= subtitle.clientWidth + 1;
+    }
+    if (!fit(0)) throw new Error("完整标题在最小字号下仍超出安全区，请缩短标题或调整主题字号、安全区");
+    let low = 0;
+    let high = 1;
+    for (let iteration = 0; iteration < 12; iteration++) {
+      const middle = (low + high) / 2;
+      if (fit(middle)) low = middle;
+      else high = middle;
+    }
+    fit(low);
+    document.documentElement.dataset.coverStatus = "ready";
+  } catch (error) {
+    document.documentElement.dataset.coverStatus = "error";
+    document.documentElement.dataset.coverError = encodeURIComponent(error instanceof Error ? error.message : String(error));
+  }
+})();

package/src/imgx/assets/templates/longform-3-4.html

@@ -9,8 +9,7 @@
   Parameters:
     {{THEME_CSS_VARS}}       — 主题变量
     {{FOOTER_TEXT}}          — 底部文字
-    {{ICON_PATH}}            — 顶部 logo
-    {{AVATAR_PATH}}          — 底部头像
+    {{ICON_PATH}}            — 署名图标
     {{FONT_PATH}}            — 顶部/底部字体
     {{BODY_FONT_PATH}}       — 正文字体
     {{LONGFORM_STAGE_HTML}}  — 已排版页 HTML
@@ -46,18 +45,6 @@
     padding: var(--body-padding-y) var(--body-padding-x) 0;
     flex-shrink: 0;
   }
-  .deco-top {
-    width: 100%;
-    height: var(--logo-size);
-    display: flex;
-    align-items: flex-start;
-  }
-  .deco-top img {
-    width: var(--logo-size);
-    height: var(--logo-size);
-    border-radius: 50%;
-    object-fit: cover;
-  }
   .content {
     min-height: 0;
     width: 100%;
@@ -78,31 +65,23 @@
     position: absolute;
     left: 0;
     font-family: "LXGWNeoZhiSongPlus", "PingFang SC", "Noto Serif SC", serif;
-    font-size: 32px;
-    line-height: 1.75;
+
     color: var(--body-color);
     white-space: pre;
   }
-  .body-heading {
+  .body-heading, .body-subheading, .body-minor-heading {
     position: absolute;
-    left: 0;
-    font-family: "AlimamaShuHeiTi", "PingFang SC", sans-serif;
-    font-size: 38px;
-    line-height: 1.47;
     color: var(--accent-color);
     white-space: pre;
   }
   .body-quote {
     position: absolute;
     left: 0;
-    padding-left: 20px;
-    border-left: 4px solid color-mix(in srgb, var(--accent-color) 38%, white);
     font-family: "LXGWNeoZhiSongPlus", "PingFang SC", "Noto Serif SC", serif;
-    font-size: 30px;
-    line-height: 1.73;
     color: var(--quote-color);
     white-space: pre;
   }
+  .body-quote::before { content: ""; position: absolute; left: -24px; top: 8px; bottom: 8px; border-left: 3px solid var(--accent-color); }
   .body-list-bullet {
     position: absolute;
     min-width: 24px;
@@ -118,9 +97,9 @@
   .body-caption {
     position: absolute;
     left: 0;
-    font-family: "AlimamaShuHeiTi", "PingFang SC", sans-serif;
-    font-size: 20px;
-    line-height: 1.35;
+    font-family: "LXGWNeoZhiSongPlus", "PingFang SC", serif;
+    font-size: 28px;
+    line-height: 40px;
     color: var(--caption-color);
     white-space: normal;
     text-align: center;
@@ -150,20 +129,18 @@
     border-radius: 50%;
     object-fit: cover;
   }
+  .watermark .page-number { margin-left: auto; font-variant-numeric: tabular-nums; }
   .watermark span {
-    font-size: 24px;
+    font-size: 26px;
+    line-height: 36px;
     color: var(--watermark-color);
     font-family: "AlimamaShuHeiTi", "PingFang SC", sans-serif;
-    letter-spacing: 1px;
+    letter-spacing: 0;
   }
 </style>
 </head>
 <body>
-  <div class="header-shell">
-    <div class="deco-top">
-      <img src="{{ICON_PATH}}" alt="icon">
-    </div>
-  </div>
+  <div class="header-shell"></div>
 
   <main class="content">
     <div class="content-stage" id="content-stage">{{LONGFORM_STAGE_HTML}}</div>
@@ -171,8 +148,9 @@
 
   <div class="footer-shell">
     <div class="watermark">
-      <img src="{{AVATAR_PATH}}" alt="Jinx">
+      {{BRAND_IMAGE}}
       <span>{{FOOTER_TEXT}}</span>
+      <span class="page-number">{{PAGE_LABEL}}</span>
     </div>
   </div>
 </body>