@akairos/pipeline 0.18.1 → 0.19.0

package/src/wechat-preview/wechat-renderer.ts

@@ -29,6 +29,7 @@ export interface WechatRenderContext {
   theme: WechatExportTheme;
   references: WechatLinkReference[];
   structure?: ArticleStructure;
+  strictImageDecode?: boolean;
 }
 
 /** 模板仅声明有限的结构变化，不注入脚本或任意 HTML。 */
@@ -61,6 +62,7 @@ export interface RenderWechatHtmlInput {
   editorVars?: Record<string, string>;
   theme: WechatExportTheme;
   renderers?: WechatRendererOverrides;
+  strictImageDecode?: boolean;
 }
 
 const ALLOWED_TAGS = new Set([
@@ -131,6 +133,7 @@ const ALLOWED_STYLE_PROPERTIES = new Set([
   "text-decoration-style",
   "text-indent",
   "background",
+  "background-image",
   "background-color",
   "border",
   "border-top",
@@ -234,7 +237,8 @@ function imageIsOnlyContent(parent: HTMLElement, image: HTMLElement): boolean {
   });
 }
 
-// 图片缩放与图注共用导出流程，分别读取 alt 和 title。
+// 图片缩放与图注共用导出流程：Markdown 往返读两位小数 alt 与 title；
+// Crepe 块级图片 DOM 读 ratio 与 caption 属性。
 const imageRenderer: WechatElementRenderer = {
   kind: "image",
   selector: "img",
@@ -245,35 +249,66 @@ const imageRenderer: WechatElementRenderer = {
     if (src) element.setAttribute("data-src", src);
 
     const parent = element.parentElement;
-    if (!parent || parent.tagName.toLowerCase() !== "p" || !imageIsOnlyContent(parent, element)) {
+    const inOwnParagraph =
+      !!parent && parent.tagName.toLowerCase() === "p" && imageIsOnlyContent(parent, element);
+    // Crepe 块级图片是文章根的顶层裸 <img>，同样视为独立图片。
+    const topLevelBlock = parent === context.root;
+    if (!parent || (!inOwnParagraph && !topLevelBlock)) {
       return;
     }
 
-    // Crepe 仅将独立图片的缩放比例序列化为两位小数。
+    const ratioRaw = element.getAttribute("ratio");
+    const ratioFromAttr = ratioRaw ? Number(ratioRaw) : NaN;
     const alt = element.getAttribute("alt") ?? "";
-    const ratio = /^(?:0|[1-9]\d*)\.\d{2}$/.test(alt) ? Number(alt) : 0;
+    const ratio =
+      Number.isFinite(ratioFromAttr) && ratioFromAttr > 0
+        ? ratioFromAttr
+        : /^(?:0|[1-9]\d*)\.\d{2}$/.test(alt) ? Number(alt) : 0;
     if (ratio > 0 && Number.isFinite(ratio)) {
       // DOMParser 文档不加载图片，用浏览器图片对象读取原始尺寸。
       const sourceImage = new Image();
-      sourceImage.src = src ?? "";
+      let imageSrc = src ?? "";
+      if (
+        typeof window !== "undefined" &&
+        window.location &&
+        window.location.origin &&
+        window.location.origin.startsWith("http") &&
+        imageSrc &&
+        !/^(?:https?:|data:|blob:|\/\/)/i.test(imageSrc)
+      ) {
+        if (imageSrc.startsWith("/") && !imageSrc.startsWith("/local-file")) {
+          imageSrc = `/local-file?path=${encodeURIComponent(imageSrc)}`;
+        }
+      }
+      sourceImage.src = imageSrc;
       try {
         await sourceImage.decode();
         if (!sourceImage.naturalWidth) throw new Error("图片原始宽度为空");
+        element.style.width = `${Math.min(ratio, 1) * 100}%`;
+        element.style.maxWidth = `${sourceImage.naturalWidth * ratio}px`;
+        element.style.height = "auto";
       } catch (error) {
-        throw new Error(`无法读取缩放图片的原始尺寸：${element.getAttribute("title") || "无图注"}`, { cause: error });
+        if (context.strictImageDecode ?? true) {
+          throw new Error(`无法读取缩放图片的原始尺寸：${element.getAttribute("title") || "无图注"}`, { cause: error });
+        }
+        // 非严格模式（如 Studio 可视化编辑预览）降级处理，保证编辑器正常渲染
+        element.style.width = `${Math.min(ratio, 1) * 100}%`;
+        element.style.height = "auto";
       }
-      element.style.width = `${Math.min(ratio, 1) * 100}%`;
-      element.style.maxWidth = `${sourceImage.naturalWidth * ratio}px`;
-      element.style.height = "auto";
     }
 
     const figure = context.document.createElement("figure");
     setNodeKind(figure, "image-block");
-    parent.replaceWith(figure);
+    if (inOwnParagraph) {
+      parent.replaceWith(figure);
+    } else {
+      element.replaceWith(figure);
+    }
     figure.appendChild(element);
 
-    const caption = element.getAttribute("title")?.trim();
+    const caption = (element.getAttribute("caption") || element.getAttribute("title") || "").trim();
     element.removeAttribute("title");
+    element.removeAttribute("caption");
     if (caption) {
       const figcaption = context.document.createElement("figcaption");
       setNodeKind(figcaption, "image-caption");
@@ -382,6 +417,10 @@ const blockquoteRenderer: WechatElementRenderer = {
       element.prepend(label);
     }
   },
+  finalize(element) {
+    // 微信编辑器会给原生 blockquote 强制加灰色左边框，导出时降级为 section，外观全靠内联样式。
+    replaceTag(element, "section");
+  },
 };
 
 /** Normalize URL for reference dedupe (same target → one footnote entry). */
@@ -631,6 +670,33 @@ export function buildWechatThemeCss(
 .milkdown .editor p {
   ${theme.bodyFontSize ? `font-size: ${theme.bodyFontSize};` : ""}
   ${theme.bodyParagraphSpacing ? `margin-bottom: ${theme.bodyParagraphSpacing};` : ""}
+  ${theme.bodyLineHeight ? `line-height: ${theme.bodyLineHeight};` : ""}
+  ${theme.bodyLetterSpacing ? `letter-spacing: ${theme.bodyLetterSpacing};` : ""}
+  ${theme.bodyColor ? `color: ${theme.bodyColor};` : ""}
+}
+`;
+}
+
+/**
+ * 结构装饰（编号 / 章节标签 / 引用标签）在导出时是真实节点，编辑器里是 ::before。
+ * 此处样式与 studio 编辑器的 ::before 视觉对齐，否则预览中退化为普通正文。
+ */
+function buildStructureDecorationCss(structure?: ArticleStructure): string {
+  if (!structure?.numberedHeadings && !structure?.headingLabel && !structure?.quoteLabel) return "";
+  return `
+.milkdown .editor [data-wechat-node="heading-number"],
+.milkdown .editor [data-wechat-node="heading-label"] {
+  margin-right: 0.3em;
+  opacity: 0.7;
+  font-weight: 600;
+}
+.milkdown .editor [data-wechat-node="quote-label"] {
+  margin: 0 0 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  color: var(--wx-brand-ink, var(--wx-brand-accent, #ca6093));
+  text-transform: uppercase;
 }
 `;
 }
@@ -639,6 +705,59 @@ function parseHtml(html: string): Document {
   return new DOMParser().parseFromString(`<!doctype html><html><body>${html}</body></html>`, "text/html");
 }
 
+const BORDER_SIDES = ["top", "right", "bottom", "left"] as const;
+
+/**
+ * 浏览器把 `border: none; border-left: X` 或 `border-left: none` 序列化成多值简写或
+ * none 边的长属性，其中 border-color 是 currentcolor——公众号编辑器解析不了，整条
+ * 声明作废后边框退回正文灰色。展开为可见边的单值属性，丢弃 none/hidden 边。
+ */
+function normalizeBorderShorthands(element: HTMLElement): void {
+  const style = element.style;
+  const sides = BORDER_SIDES.map((side) => ({
+    side,
+    width: style.getPropertyValue(`border-${side}-width`),
+    style: style.getPropertyValue(`border-${side}-style`),
+    color: style.getPropertyValue(`border-${side}-color`),
+  }));
+
+  const invisible = (entry: (typeof sides)[number]) => entry.style === "none" || entry.style === "hidden";
+  const hasShorthand =
+    !!style.getPropertyValue("border-style") ||
+    !!style.getPropertyValue("border-width") ||
+    !!style.getPropertyValue("border-color");
+  if (!hasShorthand && !sides.some(invisible)) return;
+
+  if (!hasShorthand) {
+    // 单边 none/hidden 长属性：只删除，其余保持原样
+    for (const { side, style: borderStyle } of sides) {
+      if (borderStyle !== "none" && borderStyle !== "hidden") continue;
+      style.removeProperty(`border-${side}`);
+      style.removeProperty(`border-${side}-width`);
+      style.removeProperty(`border-${side}-style`);
+      style.removeProperty(`border-${side}-color`);
+    }
+    return;
+  }
+
+  const removable = ["border", "border-width", "border-style", "border-color"];
+  for (const { side } of sides) {
+    removable.push(`border-${side}`, `border-${side}-width`, `border-${side}-style`, `border-${side}-color`);
+  }
+  for (const property of removable) style.removeProperty(property);
+
+  for (const entry of sides) {
+    if (!entry.style || invisible(entry)) continue;
+    if (entry.width && entry.color) {
+      style.setProperty(`border-${entry.side}`, `${entry.width} ${entry.style} ${entry.color}`);
+    } else {
+      if (entry.width) style.setProperty(`border-${entry.side}-width`, entry.width);
+      style.setProperty(`border-${entry.side}-style`, entry.style);
+      if (entry.color) style.setProperty(`border-${entry.side}-color`, entry.color);
+    }
+  }
+}
+
 function sanitizeStyle(element: HTMLElement): void {
   const propertyNames: string[] = [];
   for (let index = 0; index < element.style.length; index += 1) {
@@ -711,6 +830,7 @@ function sanitizeTree(root: HTMLElement): void {
       sanitizeImageUrl(element, "data-src");
     }
     sanitizeStyle(element);
+    normalizeBorderShorthands(element);
   }
 }
 
@@ -753,11 +873,13 @@ export async function renderWechatHtml(input: RenderWechatHtmlInput): Promise<st
     theme: input.theme,
     references,
     structure: input.structure,
+    strictImageDecode: input.strictImageDecode ?? true,
   });
 
   const css = [
     input.baseCss,
     buildWechatThemeCss(input.editorVars ?? {}, input.theme),
+    buildStructureDecorationCss(input.structure),
     pluginCss,
     input.customCss ?? "",
   ].filter(Boolean).join("\n");
@@ -788,6 +910,7 @@ export async function renderWechatHtml(input: RenderWechatHtmlInput): Promise<st
     theme: input.theme,
     references,
     structure: input.structure,
+    strictImageDecode: input.strictImageDecode ?? true,
   });
   sanitizeTree(finalRoot);
   return finalRoot.outerHTML;

package/src/workflow.test.ts

@@ -150,12 +150,14 @@ describe("init", () => {
       "--content-form", "article",
       "--targets", "wechat@ancientone",
       "--content-origin", "user",
+      "--article-theme", "./styles/standalone.json",
     ]));
     const state = await readState(output.state_path);
     expect(state.publish_targets).toEqual([
       { route: "wechat-article", account: "ancientone" },
     ]);
     expect(state.route.primary).toBe("wechat-article");
+    expect(state.intent.article_theme).toBe(join(process.cwd(), "styles/standalone.json"));
   });
 
   test("normalizes underscore flags and resolves route/account from intent text", async () => {

package/src/wechat-preview/assets/browser-dist/assets/style-C9-YtTIm.css

@@ -1 +0,0 @@
-:root{--bg-main: #f8fafc;--bg-panel: #ffffff;--border: #e2e8f0;--border-focus: #ca6093;--text-main: #1e293b;--text-muted: #64748b;--brand: #ca6093;--brand-hover: #b35082;--brand-light: rgba(202, 96, 147, .08);--success: #10b981;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);color:var(--text-main);background:var(--bg-main);height:100vh;display:flex;flex-direction:column;overflow:hidden}.studio-header{height:52px;background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:10}.brand-section{display:flex;align-items:center;gap:10px}.brand-logo{font-size:18px}.brand-title{font-size:15px;font-weight:700;color:var(--text-main);letter-spacing:-.01em}.brand-badge{font-size:11px;font-weight:600;background:var(--brand-light);color:var(--brand);padding:2px 8px;border-radius:999px}.header-controls{display:flex;align-items:center;gap:12px}.account-select-wrap{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted)}.account-select{padding:5px 10px;font-size:13px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--text-main);outline:none;cursor:pointer}.account-select:focus{border-color:var(--border-focus)}.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--text-main);transition:all .15s ease;text-decoration:none}.btn:hover{background:#f1f5f9}.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}.btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}.btn-success{background:#059669;color:#fff;border-color:#059669}.btn-success:hover{background:#047857;border-color:#047857}.studio-body{flex:1;display:flex;min-height:0;overflow:hidden}.panel{display:flex;flex-direction:column;background:var(--bg-panel);min-height:0}.panel-header{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#fafbfc}.panel-title{font-size:13px;font-weight:650;color:var(--text-main);display:flex;align-items:center;gap:6px}.left-panel{width:360px;border-right:1px solid var(--border);flex-shrink:0}.tab-nav{display:flex;border-bottom:1px solid var(--border);background:#f8fafc}.tab-btn{flex:1;padding:10px 12px;font-size:13px;font-weight:600;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}.tab-btn:hover{color:var(--text-main)}.tab-btn.active{color:var(--brand);background:#fff;border-bottom-color:var(--brand)}.tab-content{flex:1;overflow-y:auto;padding:16px}.config-section{margin-bottom:22px}.section-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:12px;display:flex;align-items:center;gap:6px}.form-group{margin-bottom:14px}.form-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-main);margin-bottom:6px}.form-val{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.slider-input{width:100%;accent-color:var(--brand);cursor:pointer}.color-input-row{display:flex;align-items:center;gap:8px}.color-picker{-webkit-appearance:none;appearance:none;border:1px solid var(--border);border-radius:6px;width:32px;height:32px;cursor:pointer;padding:2px;background:#fff}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:4px}.color-hex{flex:1;padding:6px 10px;font-family:var(--font-mono);font-size:12px;border:1px solid var(--border);border-radius:6px;color:var(--text-main)}.switch-label{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px}.switch-toggle{position:relative;display:inline-block;width:38px;height:20px}.switch-toggle input{opacity:0;width:0;height:0}.slider-round{position:absolute;cursor:pointer;inset:0;background-color:#cbd5e1;transition:.2s;border-radius:20px}.slider-round:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff;transition:.2s;border-radius:50%}input:checked+.slider-round{background-color:var(--brand)}input:checked+.slider-round:before{transform:translate(18px)}.css-editor{width:100%;height:140px;font-family:var(--font-mono);font-size:12px;line-height:1.5;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:#fafbfc;color:#0f172a;resize:vertical;outline:none}.css-editor:focus{border-color:var(--border-focus);background:#fff}.syntax-card{border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:12px;background:#fff;transition:border-color .15s}.syntax-card:hover{border-color:#cbd5e1}.syntax-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.syntax-card-title{font-size:13px;font-weight:650;color:var(--text-main)}.syntax-card-badge{font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;background:#f1f5f9;color:var(--text-muted)}.syntax-card-desc{font-size:12px;color:var(--text-muted);margin-bottom:8px;line-height:1.4}.syntax-code-snippet{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:8px 10px;font-family:var(--font-mono);font-size:11px;color:#334155;white-space:pre-wrap;margin-bottom:8px}.syntax-btn-insert{width:100%;padding:4px 8px;font-size:11px;font-weight:600;border:1px dashed var(--border);border-radius:4px;background:#fafbfc;color:var(--brand);cursor:pointer}.syntax-btn-insert:hover{background:var(--brand-light);border-color:var(--brand)}.editor-panel{flex:1;border-right:1px solid var(--border);min-width:320px}.editor-toolbar{display:flex;gap:8px;align-items:center}.editor-textarea{flex:1;width:100%;border:none;outline:none;resize:none;padding:16px 20px;font-family:var(--font-mono);font-size:13px;line-height:1.7;color:#1e293b;background:#fff}.editor-footer{padding:6px 16px;border-top:1px solid var(--border);background:#fafbfc;font-size:11px;color:var(--text-muted);display:flex;justify-content:space-between}.preview-panel{width:480px;flex-shrink:0;background:#f1f5f9}.preview-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:24px 16px 48px}.device-frame{width:430px;min-height:680px;background:#fff;border-radius:18px;box-shadow:0 10px 30px #00000014,0 1px 3px #0000000d;overflow:hidden;display:flex;flex-direction:column;border:1px solid #e2e8f0}.device-notch-bar{height:28px;background:#fafbfc;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:11px;font-weight:600;color:#64748b}.device-screen{flex:1;padding:20px 16px 36px;box-sizing:border-box;overflow-y:auto}.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{background:#1e293b;color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:500;box-shadow:0 6px 18px #00000026;opacity:0;transform:translateY(10px);transition:all .25s ease;pointer-events:auto}.toast.show{opacity:1;transform:translateY(0)}.toast.toast-success{background:#065f46;border:1px solid #10b981}.preset-group{margin-bottom:10px;padding:10px 12px;background:#f8fafc;border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color .15s}.preset-group:hover{border-color:#cbd5e1}.preset-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.preset-title{font-size:12px;font-weight:650;color:var(--text-main);display:flex;align-items:center;gap:5px}.preset-select{width:100%;padding:5px 8px;font-size:12px;font-weight:500;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text-main);outline:none;cursor:pointer;transition:border-color .15s}.preset-select:focus{border-color:var(--brand)}.preset-desc{font-size:11px;color:var(--text-muted);margin-top:5px;line-height:1.4;padding-left:2px}.btn-extract-css{padding:2px 7px;font-size:11px;font-weight:550;color:var(--brand);background:#fff;border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all .15s ease;white-space:nowrap}.btn-extract-css:hover{background:#f1f5f9;border-color:var(--brand)}#studio-editor-host{display:none}