@qcplay/cli 1.0.9 → 1.0.11

package/README.md

@@ -24,7 +24,7 @@
 qcplay-cli article import "https://mp.weixin.qq.com/s/..." article.md
 ```
 
-转换流程会读取微信文章标题、来源、发布日期和正文，将正文及封面图片逐张上传到官网图片服务，再生成带 Front Matter 的 Markdown 草稿。输出固定为 `status: "0"`，并保留空的 `cate_id` 供发布前确认；任何图片下载或上传失败都会终止转换且不生成文章文件。
+转换流程会读取微信文章标题、来源、发布日期和完整正文，经过安全清理后保留微信原文的 HTML 层级、内联样式、字号、颜色、对齐、间距、媒体链接和表格，并转存正文图片、CSS 背景图及封面图。背景图片仍保留在原容器中，不会额外生成一张普通图片。正文保持微信的 `677px` 阅读宽度并兼容窄屏；独占一行的图片会使用块级布局，纯图片标题容器会转换为普通区块，避免官网 PC 标题样式造成相邻图片重叠。任何正文节点遗漏或图片处理失败都会终止转换，不生成不完整草稿。输出固定为 `status: "0"`，并保留空的 `cate_id` 供发布前确认。
 
 确认草稿内容和业务字段后再发布：
 

package/bin/qcplay.js

@@ -9,7 +9,12 @@ import path from "path";
 import readline from "readline";
 import { fileURLToPath, pathToFileURL } from "url";
 
-import { buildOfficialArticleMarkdown, importWechatArticle } from "../lib/wechat-article.js";
+import {
+  buildOfficialArticleMarkdown,
+  importWechatArticle,
+  normalizeArticleColor,
+  sanitizeArticleRichHtml
+} from "../lib/wechat-article.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -1150,17 +1155,26 @@ function applyInlineMarkdown(text) {
     return storeToken(`<code>${escapeHtml(code)}</code>`);
   });
 
+  output = output.replace(/\{\{qc-color:([^}]+)\}\}([\s\S]*?)\{\{\/qc-color\}\}/g, (_, rawColor, content) => {
+    const color = normalizeArticleColor(rawColor);
+    if (!color) {
+      return content;
+    }
+    const plainText = content.replace(/\\([\\`*_\[\]])/g, "$1");
+    return storeToken(`<span style="color:${escapeHtml(color)};">${escapeHtml(plainText)}</span>`);
+  });
+
   output = output.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, url) => {
     return storeToken(
       `<img src="${escapeHtml(url.trim())}" alt="${escapeHtml(alt.trim())}" ` +
-        'style="display:block;width:auto;max-width:100%;height:auto;margin:24px auto;" />'
+        'style="display:block;box-sizing:border-box;width:auto;max-width:100%;height:auto;object-fit:contain;margin:24px auto;" />'
     );
   });
 
   output = output.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, url) => {
     return storeToken(
       `<a href="${escapeHtml(url.trim())}" target="_blank" rel="noreferrer" ` +
-        `style="color:#576b95;text-decoration:none;">${escapeHtml(label.trim())}</a>`
+        `style="color:#576b95;text-decoration:none;overflow-wrap:anywhere;word-break:break-all;">${escapeHtml(label.trim())}</a>`
     );
   });
 
@@ -1171,7 +1185,7 @@ function applyInlineMarkdown(text) {
   output = output.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>");
   output = output.replace(/(?<!_)_([^_]+)_(?!_)/g, "<em>$1</em>");
 
-  for (let index = 0; index < tokens.length; index += 1) {
+  for (let index = tokens.length - 1; index >= 0; index -= 1) {
     output = output.replace(`@@MDTOKEN${index}@@`, tokens[index]);
   }
 
@@ -1179,12 +1193,23 @@ function applyInlineMarkdown(text) {
 }
 
 function markdownToHtml(markdown) {
-  const lines = stripBom(markdown).replace(/\r\n/g, "\n").split("\n");
+  const richHtmlBlocks = [];
+  const normalizedMarkdown = stripBom(markdown)
+    .replace(/\r\n/g, "\n")
+    .replace(
+      /<!--\s*qcplay-rich-html:start\s*-->([\s\S]*?)<!--\s*qcplay-rich-html:end\s*-->/gi,
+      (_, richHtml) => {
+        const index = richHtmlBlocks.push(richHtml) - 1;
+        return `\n@@QCRICHHTML${index}@@\n`;
+      }
+    );
+  const lines = normalizedMarkdown.split("\n");
   const html = [];
   let paragraph = [];
   let quote = [];
   let listType = "";
   let listItems = [];
+  let tableLines = [];
   let inCodeBlock = false;
   let codeLines = [];
 
@@ -1194,7 +1219,7 @@ function markdownToHtml(markdown) {
     }
 
     html.push(
-      `<p style="margin:0 0 20px;font-size:16px;line-height:1.9;color:#3f3f3f;text-align:justify;">` +
+      `<p style="margin:0 0 20px;font-size:16px;line-height:1.9;color:#3f3f3f;text-align:justify;overflow-wrap:anywhere;word-break:break-word;">` +
         `${paragraph.map(line => applyInlineMarkdown(line)).join("<br />")}</p>`
     );
     paragraph = [];
@@ -1242,7 +1267,57 @@ function markdownToHtml(markdown) {
     codeLines = [];
   }
 
+  function parseTableLine(line) {
+    return line
+      .trim()
+      .replace(/^\|/, "")
+      .replace(/\|$/, "")
+      .split(/(?<!\\)\|/)
+      .map(cell => cell.trim().replace(/\\\|/g, "|"));
+  }
+
+  function flushTable() {
+    if (tableLines.length === 0) {
+      return;
+    }
+
+    const rows = tableLines.map(parseTableLine);
+    const separator = rows[1];
+    const isMarkdownTable =
+      rows.length >= 2 && separator.every(cell => /^:?-{3,}:?$/.test(cell.replace(/\s/g, "")));
+    if (!isMarkdownTable) {
+      paragraph.push(...tableLines);
+      tableLines = [];
+      return;
+    }
+
+    const columnCount = Math.max(...rows.map(row => row.length));
+    const normalizeRow = row => [...row, ...Array(columnCount - row.length).fill("")];
+    const header = normalizeRow(rows[0]);
+    const body = rows.slice(2).map(normalizeRow);
+    const cellStyle =
+      "padding:10px 12px;border:1px solid #dfe3e8;text-align:left;vertical-align:top;" +
+      "font-size:15px;line-height:1.7;overflow-wrap:anywhere;word-break:break-word;";
+    html.push(
+      '<div style="width:100%;margin:24px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;">' +
+        '<table style="width:100%;min-width:560px;border-collapse:collapse;table-layout:auto;color:#3f3f3f;">' +
+        `<thead><tr>${header
+          .map(cell => `<th style="${cellStyle}background:#f5f7f8;font-weight:600;">${applyInlineMarkdown(cell)}</th>`)
+          .join("")}</tr></thead>` +
+        `<tbody>${body
+          .map(
+            row =>
+              `<tr>${row
+                .map(cell => `<td style="${cellStyle}">${applyInlineMarkdown(cell)}</td>`)
+                .join("")}</tr>`
+          )
+          .join("")}</tbody></table></div>`
+    );
+    tableLines = [];
+  }
+
   function flushAll() {
+    flushTable();
     flushParagraph();
     flushQuote();
     flushList();
@@ -1272,13 +1347,33 @@ function markdownToHtml(markdown) {
       continue;
     }
 
+    const richHtmlMatch = trimmed.match(/^@@QCRICHHTML(\d+)@@$/);
+    if (richHtmlMatch) {
+      flushAll();
+      const sanitizedHtml = sanitizeArticleRichHtml(richHtmlBlocks[Number(richHtmlMatch[1])] || "");
+      if (sanitizedHtml) {
+        html.push(sanitizedHtml);
+      }
+      continue;
+    }
+
+    if (/^\|.*\|$/.test(trimmed)) {
+      flushParagraph();
+      flushQuote();
+      flushList();
+      tableLines.push(trimmed);
+      continue;
+    }
+
+    flushTable();
+
     const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
     if (headingMatch) {
       flushAll();
       const level = headingMatch[1].length;
       const headingSize = level === 1 ? 24 : level === 2 ? 20 : 18;
       html.push(
-        `<h${level} style="margin:32px 0 16px;font-size:${headingSize}px;line-height:1.5;font-weight:700;color:#24292f;">` +
+        `<h${level} style="margin:32px 0 16px;font-size:${headingSize}px;line-height:1.5;font-weight:700;color:#24292f;overflow-wrap:anywhere;word-break:break-word;">` +
           `${applyInlineMarkdown(headingMatch[2].trim())}</h${level}>`
       );
       continue;
@@ -1330,8 +1425,9 @@ function markdownToHtml(markdown) {
   flushCodeBlock();
   flushAll();
   return (
-    '<section style="max-width:677px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,' +
-    'PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;letter-spacing:0;overflow-wrap:anywhere;">\n' +
+    '<section style="box-sizing:border-box;width:100%;max-width:960px;min-width:0;margin:0 auto;padding:0 16px;' +
+    'font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,' +
+    'sans-serif;letter-spacing:0;overflow-wrap:anywhere;word-break:break-word;">\n' +
     `${html.join("\n")}\n</section>`
   );
 }
@@ -1478,6 +1574,13 @@ async function importWechatArticleCommand(sourceUrl, file = "article.md") {
   console.log(targetFile);
   console.log(chalk.gray(`标题: ${article.title}`));
   console.log(chalk.gray(`已转存图片: ${article.imageCount} 张`));
+  console.log(chalk.gray(`已提取正文: ${article.textSegmentCount} 段`));
+  console.log(chalk.gray(`已保留文字颜色: ${article.colorCount} 处`));
+  console.log(
+    chalk.gray(
+      `特殊内容: ${article.specialElementCount} 处，媒体: ${article.mediaCount} 处，表格: ${article.tableCount} 个`
+    )
+  );
   console.log("");
   console.log("请补充 cate_id 等业务字段，确认内容后执行:");
   console.log("");

package/lib/wechat-article.js

@@ -11,6 +11,8 @@ const IMAGE_UPLOAD_URL = "http://api.qingcigame.com/novel/time/literature/avatar
 const MAX_REDIRECTS = 5;
 const MAX_HTML_BYTES = 8 * 1024 * 1024;
 const MAX_IMAGE_BYTES = 25 * 1024 * 1024;
+const RICH_HTML_START = "<!-- qcplay-rich-html:start -->";
+const RICH_HTML_END = "<!-- qcplay-rich-html:end -->";
 
 const BLOCK_TAGS = new Set([
   "article",
@@ -25,6 +27,175 @@ const BLOCK_TAGS = new Set([
   "section"
 ]);
 
+const SAFE_RICH_TAGS = new Set([
+  "a",
+  "article",
+  "aside",
+  "b",
+  "blockquote",
+  "br",
+  "del",
+  "div",
+  "em",
+  "figcaption",
+  "figure",
+  "font",
+  "footer",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "header",
+  "hr",
+  "i",
+  "img",
+  "li",
+  "main",
+  "nav",
+  "ol",
+  "p",
+  "s",
+  "section",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "tfoot",
+  "th",
+  "thead",
+  "tr",
+  "u",
+  "ul"
+]);
+
+const SAFE_STYLE_PROPERTIES = new Set([
+  "align-content",
+  "align-items",
+  "align-self",
+  "background",
+  "background-color",
+  "background-position",
+  "background-repeat",
+  "background-size",
+  "border",
+  "border-bottom",
+  "border-bottom-color",
+  "border-bottom-left-radius",
+  "border-bottom-right-radius",
+  "border-bottom-style",
+  "border-bottom-width",
+  "border-color",
+  "border-left",
+  "border-left-color",
+  "border-left-style",
+  "border-left-width",
+  "border-radius",
+  "border-right",
+  "border-right-color",
+  "border-right-style",
+  "border-right-width",
+  "border-style",
+  "border-top",
+  "border-top-color",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-top-style",
+  "border-top-width",
+  "border-width",
+  "bottom",
+  "box-shadow",
+  "box-sizing",
+  "clear",
+  "color",
+  "column-gap",
+  "display",
+  "filter",
+  "flex",
+  "flex-basis",
+  "flex-direction",
+  "flex-grow",
+  "flex-shrink",
+  "flex-wrap",
+  "float",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-variant",
+  "font-weight",
+  "gap",
+  "grid-auto-columns",
+  "grid-auto-flow",
+  "grid-auto-rows",
+  "grid-column",
+  "grid-row",
+  "grid-template-columns",
+  "grid-template-rows",
+  "height",
+  "justify-content",
+  "justify-items",
+  "justify-self",
+  "left",
+  "letter-spacing",
+  "line-height",
+  "list-style",
+  "list-style-position",
+  "list-style-type",
+  "margin",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "max-height",
+  "max-width",
+  "min-height",
+  "min-width",
+  "object-fit",
+  "object-position",
+  "opacity",
+  "order",
+  "overflow",
+  "overflow-wrap",
+  "overflow-x",
+  "overflow-y",
+  "padding",
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "position",
+  "right",
+  "row-gap",
+  "table-layout",
+  "text-align",
+  "text-decoration",
+  "text-decoration-color",
+  "text-decoration-line",
+  "text-decoration-style",
+  "text-indent",
+  "text-overflow",
+  "text-transform",
+  "top",
+  "transform",
+  "transform-origin",
+  "vertical-align",
+  "visibility",
+  "white-space",
+  "width",
+  "word-break",
+  "word-spacing",
+  "z-index",
+  "-webkit-text-fill-color",
+  "-webkit-text-stroke",
+  "-webkit-text-stroke-color",
+  "-webkit-text-stroke-width"
+]);
+
 function requestBuffer(target, options = {}, redirectCount = 0) {
   const url = target instanceof URL ? target : new URL(target);
   const client = url.protocol === "https:" ? https : url.protocol === "http:" ? http : null;
@@ -234,19 +405,439 @@ function escapeMarkdownText(value) {
   return normalizeTextContent(value).replace(/([\\`*_\[\]])/g, "\\$1");
 }
 
-function markdownForNode($, node, listDepth = 0) {
+const NAMED_TEXT_COLORS = new Set([
+  "aqua",
+  "black",
+  "blue",
+  "cyan",
+  "fuchsia",
+  "gray",
+  "green",
+  "grey",
+  "lime",
+  "magenta",
+  "maroon",
+  "navy",
+  "olive",
+  "orange",
+  "pink",
+  "purple",
+  "red",
+  "silver",
+  "teal",
+  "transparent",
+  "white",
+  "yellow"
+]);
+
+export function normalizeArticleColor(value) {
+  const color = String(value || "")
+    .trim()
+    .replace(/\s*!important\s*$/i, "")
+    .trim()
+    .toLowerCase();
+  if (/^#[0-9a-f]{3,4}(?:[0-9a-f]{3,4})?$/.test(color)) {
+    return color;
+  }
+  if (/^rgba?\(\s*(?:\d{1,3}%?\s*,\s*){2}\d{1,3}%?(?:\s*,\s*(?:0|1|0?\.\d+|\d{1,3}%))?\s*\)$/.test(color)) {
+    return color.replace(/\s+/g, " ");
+  }
+  return NAMED_TEXT_COLORS.has(color) ? color : "";
+}
+
+function elementTextColor(element) {
+  const style = [element.attr("style"), element.attr("data-style")].filter(Boolean).join(";");
+  let color = "";
+  for (const match of style.matchAll(/(?:^|;)\s*(?:color|-webkit-text-fill-color)\s*:\s*([^;]+)/gi)) {
+    color = normalizeArticleColor(match[1]) || color;
+  }
+  return (
+    color ||
+    normalizeArticleColor(element.attr("color")) ||
+    normalizeArticleColor(element.attr("data-color"))
+  );
+}
+
+function safeContentUrl(element) {
+  const attributes = ["href", "src", "data-src", "data-url", "data-link", "data-video-url", "data-audio-url"];
+  const candidates = [];
+  for (const attribute of attributes) {
+    candidates.push(element.attr(attribute));
+  }
+  element.find("source").each((_, source) => {
+    candidates.push(source.attribs?.src, source.attribs?.["data-src"]);
+  });
+
+  for (const candidate of candidates.filter(Boolean)) {
+    try {
+      const url = new URL(candidate);
+      if (url.protocol === "http:" || url.protocol === "https:") {
+        return url.toString();
+      }
+    } catch {}
+  }
+  return "";
+}
+
+function elementDescription(element) {
+  const attributes = [
+    "title",
+    "aria-label",
+    "alt",
+    "value",
+    "placeholder",
+    "data-title",
+    "data-name",
+    "data-desc",
+    "data-description",
+    "data-content",
+    "data-text"
+  ];
+  for (const attribute of attributes) {
+    const value = normalizeTextContent(element.attr(attribute)).trim();
+    if (value) {
+      return value;
+    }
+  }
+  return "";
+}
+
+function backgroundImageSources(element) {
+  const sources = [
+    element.attr("data-background-src"),
+    element.attr("data-background"),
+    element.attr("data-bg")
+  ].filter(Boolean);
+  const style = [element.attr("style"), element.attr("data-style")].filter(Boolean).join(";");
+  if (/background/i.test(style)) {
+    for (const match of style.matchAll(/url\(\s*(['"]?)(https?:\/\/.*?)\1\s*\)/gi)) {
+      sources.push(match[2]);
+    }
+  }
+  return [...new Set(sources)];
+}
+
+function safeHttpUrl(value) {
+  try {
+    const url = new URL(String(value || ""));
+    return url.protocol === "http:" || url.protocol === "https:" ? url.toString() : "";
+  } catch {
+    return "";
+  }
+}
+
+function sanitizeInlineStyle(value, backgroundUrls = []) {
+  const declarations = [];
+  for (const declaration of String(value || "").split(";")) {
+    const divider = declaration.indexOf(":");
+    if (divider < 1) {
+      continue;
+    }
+    const property = declaration.slice(0, divider).trim().toLowerCase();
+    let propertyValue = declaration.slice(divider + 1).trim();
+    if (!SAFE_STYLE_PROPERTIES.has(property) || !propertyValue) {
+      continue;
+    }
+    if (/[<>{}]|(?:expression|javascript|vbscript|@import|behavior|-moz-binding)\s*[:(]?/i.test(propertyValue)) {
+      continue;
+    }
+    if (/url\s*\(/i.test(propertyValue)) {
+      continue;
+    }
+    if (property === "position" && /^(?:fixed|sticky)(?:\s*!important)?$/i.test(propertyValue)) {
+      propertyValue = "relative";
+    }
+    if (property === "z-index") {
+      const numericValue = Number.parseInt(propertyValue, 10);
+      if (!Number.isFinite(numericValue)) {
+        continue;
+      }
+      propertyValue = String(Math.max(-10, Math.min(100, numericValue)));
+    }
+    declarations.push(`${property}:${propertyValue}`);
+  }
+
+  const safeBackgrounds = backgroundUrls.map(safeHttpUrl).filter(Boolean);
+  if (safeBackgrounds.length > 0) {
+    const cssUrls = safeBackgrounds.map(url => `url("${url.replace(/["\\]/g, "\\$&")}")`).join(",");
+    declarations.push(`background-image:${cssUrls}`);
+  }
+  return declarations.join(";");
+}
+
+function mediaReplacementHtml(element) {
+  const link = safeContentUrl(element);
+  const tag = String(element.get(0)?.tagName || "").toLowerCase();
+  const fallback = tag.includes("audio") || tag === "mpvoice" ? "音频内容" : "视频内容";
+  const label = normalizeTextContent(element.text()).trim() || elementDescription(element) || fallback;
+  if (!link) {
+    return `<p>${cheerio.load("<span></span>", null, false)("span").text(label).toString()}</p>`;
+  }
+  const fragment = cheerio.load("<p><a></a></p>", null, false);
+  fragment("a").attr({ href: link, target: "_blank", rel: "noreferrer" }).text(label);
+  return fragment.root().html();
+}
+
+function isStandaloneImage(element) {
+  const node = element.get(0);
+  const parent = element.parent();
+  if (!node || !parent.length) {
+    return false;
+  }
+  return parent
+    .contents()
+    .toArray()
+    .filter(child => child !== node)
+    .every(child => {
+      if (child.type === "text") {
+        return !normalizeTextContent(child.data).trim();
+      }
+      const tag = String(child.tagName || child.name || "").toLowerCase();
+      return tag === "br";
+    });
+}
+
+export function sanitizeArticleRichHtml(value) {
+  const initial = cheerio.load(String(value || ""), null, false);
+  const existingRoot = initial('[data-qcplay-rich-root="1"]').first();
+  const source = existingRoot.length ? existingRoot.html() || "" : initial.root().html() || "";
+  const $ = cheerio.load(source, null, false);
+
+  $("script,style,object,embed,link,meta,base").remove();
+  $("audio,video,iframe,mp-common-videosnap,mpvoice,qqmusic").each((_, node) => {
+    $(node).replaceWith(mediaReplacementHtml($(node)));
+  });
+  $("*")
+    .contents()
+    .filter((_, node) => node.type === "comment")
+    .remove();
+
+  const elements = $("*").toArray().reverse();
+  for (const node of elements) {
+    const element = $(node);
+    const tag = String(node.tagName || node.name || "").toLowerCase();
+    if (!SAFE_RICH_TAGS.has(tag)) {
+      const contents = element.contents();
+      if (contents.length > 0) {
+        element.replaceWith(contents);
+      } else {
+        const description = elementDescription(element);
+        element.replaceWith(description ? $("<span></span>").text(description) : "");
+      }
+      continue;
+    }
+
+    const originalAttributes = { ...(node.attribs || {}) };
+    const transferredBackgrounds = String(originalAttributes["data-qcplay-background-srcs"] || "")
+      .split("|")
+      .filter(Boolean);
+    const backgroundUrls = transferredBackgrounds.length > 0 ? transferredBackgrounds : backgroundImageSources(element);
+    const sanitizedStyle = sanitizeInlineStyle(originalAttributes.style || originalAttributes["data-style"], backgroundUrls);
+    for (const attribute of Object.keys(originalAttributes)) {
+      element.removeAttr(attribute);
+    }
+    if (sanitizedStyle) {
+      element.attr("style", sanitizedStyle);
+    }
+    if (originalAttributes.title) {
+      element.attr("title", normalizeTextContent(originalAttributes.title).trim());
+    }
+
+    if (tag === "img") {
+      const standalone = isStandaloneImage(element);
+      const centeredParent = /(?:^|;)\s*text-align\s*:\s*center(?:\s*!important)?\s*(?:;|$)/i.test(
+        element.parent().attr("style") || ""
+      );
+      const src = safeHttpUrl(originalAttributes["data-qcplay-src"] || originalAttributes.src);
+      const alt = normalizeTextContent(originalAttributes.alt || "图片").trim();
+      if (!src) {
+        element.replaceWith(alt ? $("<span></span>").text(alt) : "");
+        continue;
+      }
+      element.attr("src", src).attr("alt", alt);
+      if (/^\d+(?:\.\d+)?$/.test(originalAttributes.width || "")) {
+        element.attr("width", originalAttributes.width);
+      }
+      if (/^\d+(?:\.\d+)?$/.test(originalAttributes.height || "")) {
+        element.attr("height", originalAttributes.height);
+      }
+      const responsiveStyle = sanitizedStyle
+        .split(";")
+        .filter(declaration => !/^(?:max-width|height|box-sizing|display):/i.test(declaration))
+        .join(";");
+      const imageStyle = [
+        responsiveStyle,
+        standalone ? "display:block!important" : "",
+        standalone && centeredParent ? "margin-left:auto!important" : "",
+        standalone && centeredParent ? "margin-right:auto!important" : "",
+        "max-width:100%!important",
+        "height:auto!important",
+        "box-sizing:border-box"
+      ]
+        .filter(Boolean)
+        .join(";");
+      element.attr("style", imageStyle);
+      continue;
+    }
+
+    if (tag === "a") {
+      const href = safeHttpUrl(originalAttributes.href || originalAttributes["data-link"] || originalAttributes["data-url"]);
+      if (href) {
+        element.attr({ href, target: "_blank", rel: "noreferrer" });
+      } else {
+        element.replaceWith(element.contents());
+      }
+      continue;
+    }
+
+    if (tag === "table") {
+      const tableStyle = sanitizedStyle
+        .split(";")
+        .filter(declaration => !/^(?:display|max-width|overflow-x):/i.test(declaration))
+        .concat(["display:block", "max-width:100%", "overflow-x:auto"])
+        .join(";");
+      element.attr("style", tableStyle);
+    }
+
+    if (/^h[1-6]$/.test(tag) && !normalizeTextContent(element.text()).trim() && element.find("img").length > 0) {
+      const replacement = $("<section></section>");
+      if (element.attr("style")) {
+        replacement.attr("style", element.attr("style"));
+      }
+      if (element.attr("title")) {
+        replacement.attr("title", element.attr("title"));
+      }
+      replacement.append(element.contents());
+      element.replaceWith(replacement);
+      continue;
+    }
+
+    if (tag === "font" && normalizeArticleColor(originalAttributes.color)) {
+      element.attr("color", normalizeArticleColor(originalAttributes.color));
+    }
+    if ((tag === "td" || tag === "th") && /^\d+$/.test(originalAttributes.colspan || "")) {
+      element.attr("colspan", originalAttributes.colspan);
+    }
+    if ((tag === "td" || tag === "th") && /^\d+$/.test(originalAttributes.rowspan || "")) {
+      element.attr("rowspan", originalAttributes.rowspan);
+    }
+    if (tag === "ol" && /^\d+$/.test(originalAttributes.start || "")) {
+      element.attr("start", originalAttributes.start);
+    }
+  }
+
+  const innerHtml = $.root().html().trim();
+  if (!innerHtml) {
+    return "";
+  }
+  return (
+    '<section data-qcplay-rich-root="1" style="box-sizing:border-box;width:100%;max-width:677px;min-width:0;' +
+    'margin:0 auto;overflow:hidden;isolation:isolate;overflow-wrap:anywhere;word-break:break-word;">' +
+    `${innerHtml}</section>`
+  );
+}
+
+function collectMeaningfulTextNodes(node, bucket = []) {
   if (node.type === "text") {
-    return escapeMarkdownText(node.data);
+    if (normalizeTextContent(node.data).trim()) {
+      bucket.push(node);
+    }
+    return bucket;
   }
-  if (node.type !== "tag") {
+  const tag = String(node.tagName || node.name || "").toLowerCase();
+  if (tag === "script" || tag === "style") {
+    return bucket;
+  }
+  for (const child of node.children || []) {
+    collectMeaningfulTextNodes(child, bucket);
+  }
+  return bucket;
+}
+
+function escapeTableCell(value) {
+  return String(value || "")
+    .replace(/\|/g, "\\|")
+    .replace(/\n+/g, " / ")
+    .trim();
+}
+
+function markdownForTable($, element, listDepth, textColor, context) {
+  const tableNode = element.get(0);
+  const rows = element
+    .find("tr")
+    .toArray()
+    .filter(row => $(row).closest("table").get(0) === tableNode)
+    .map(row =>
+      $(row)
+        .children("th,td")
+        .toArray()
+        .map(cell => escapeTableCell(markdownForNode($, cell, listDepth, textColor, context)))
+    )
+    .filter(row => row.length > 0);
+  if (rows.length === 0) {
     return "";
   }
 
+  const columnCount = Math.max(...rows.map(row => row.length));
+  const firstRowHasHeader = $(element.find("tr").get(0)).children("th").length > 0;
+  const normalizedRows = rows.map(row => [...row, ...Array(columnCount - row.length).fill("")]);
+  const header = firstRowHasHeader ? normalizedRows.shift() : Array(columnCount).fill("");
+  const lines = [
+    `| ${header.join(" | ")} |`,
+    `| ${Array(columnCount).fill("---").join(" | ")} |`,
+    ...normalizedRows.map(row => `| ${row.join(" | ")} |`)
+  ];
+  context.tableCount += 1;
+  return `\n\n${lines.join("\n")}\n\n`;
+}
+
+function markdownForNode($, node, listDepth = 0, inheritedColor = "", context) {
+  context ||= {
+    capturedTextNodes: new Set(),
+    colorCount: 0,
+    colors: new Set(),
+    mediaCount: 0,
+    specialElementCount: 0,
+    tableCount: 0
+  };
+  if (node.type === "text") {
+    const value = escapeMarkdownText(node.data);
+    if (value.trim()) {
+      context.capturedTextNodes.add(node);
+    }
+    if (!inheritedColor || !value.trim()) {
+      return value;
+    }
+    context.colorCount += 1;
+    context.colors.add(inheritedColor);
+    return `{{qc-color:${inheritedColor}}}${value}{{/qc-color}}`;
+  }
+  if (node.type === "script" || node.type === "style" || node.type === "comment") {
+    return "";
+  }
+  if (node.type !== "tag") {
+    return (node.children || [])
+      .map(child => markdownForNode($, child, listDepth, inheritedColor, context))
+      .join("");
+  }
+
   const element = $(node);
   const tag = String(node.tagName || node.name || "").toLowerCase();
-  const children = () => element.contents().toArray().map(child => markdownForNode($, child, listDepth)).join("");
+  const textColor = elementTextColor(element) || inheritedColor;
+  const backgroundMarkdown = String(element.attr("data-qcplay-background-srcs") || "")
+    .split("|")
+    .filter(Boolean)
+    .map(src => `\n\n![背景图片](${src})\n\n`)
+    .join("");
+  const children = () =>
+    backgroundMarkdown +
+    element
+      .contents()
+      .toArray()
+      .map(child => markdownForNode($, child, listDepth, textColor, context))
+      .join("");
 
-  if (["script", "style", "noscript", "iframe", "video", "audio", "canvas", "svg", "form", "button", "input"].includes(tag)) {
+  if (tag === "script" || tag === "style") {
     return "";
   }
   if (tag === "br") {
@@ -255,7 +846,8 @@ function markdownForNode($, node, listDepth = 0) {
   if (tag === "img") {
     const src = element.attr("data-qcplay-src");
     if (!src) {
-      return "";
+      const description = elementDescription(element);
+      return description ? `\n\n${escapeMarkdownText(description)}\n\n` : "";
     }
     const alt = escapeMarkdownText(element.attr("alt") || "图片");
     return `\n\n![${alt}](${src})\n\n`;
@@ -270,7 +862,7 @@ function markdownForNode($, node, listDepth = 0) {
   }
   if (tag === "a") {
     const value = children().trim();
-    const href = element.attr("href");
+    const href = safeContentUrl(element);
     if (!value || !href) {
       return value;
     }
@@ -282,6 +874,16 @@ function markdownForNode($, node, listDepth = 0) {
     } catch {}
     return value;
   }
+  if (["audio", "video", "iframe", "mp-common-videosnap", "mpvoice", "qqmusic"].includes(tag)) {
+    const value = children().trim();
+    const description = escapeMarkdownText(elementDescription(element) || (tag.includes("audio") || tag === "mpvoice" ? "音频内容" : "视频内容"));
+    const link = safeContentUrl(element);
+    context.mediaCount += 1;
+    if (link) {
+      return `\n\n[${value || description}](${link})\n\n`;
+    }
+    return value ? `\n\n${value}\n\n` : `\n\n${description}\n\n`;
+  }
   if (/^h[1-6]$/.test(tag)) {
     const value = children().trim();
     return value ? `\n\n${"#".repeat(Number(tag[1]))} ${value}\n\n` : "";
@@ -294,25 +896,40 @@ function markdownForNode($, node, listDepth = 0) {
     const value = children().trim();
     return value ? `\n\n${value.split("\n").map(line => `> ${line}`).join("\n")}\n\n` : "";
   }
+  if (tag === "table") {
+    return markdownForTable($, element, listDepth, textColor, context);
+  }
   if (tag === "ul" || tag === "ol") {
     const ordered = tag === "ol";
-    const items = element.children("li").toArray().map((item, index) => {
-      const value = $(item)
-        .contents()
-        .toArray()
-        .map(child => markdownForNode($, child, listDepth + 1))
-        .join("")
-        .trim();
-      const prefix = ordered ? `${index + 1}.` : "-";
-      return `${"  ".repeat(listDepth)}${prefix} ${value}`;
-    });
-    return items.length ? `\n\n${items.join("\n")}\n\n` : "";
+    let itemIndex = 0;
+    const values = element
+      .contents()
+      .toArray()
+      .map(child => {
+        const childTag = String(child.tagName || child.name || "").toLowerCase();
+        if (childTag !== "li") {
+          return markdownForNode($, child, listDepth + 1, textColor, context).trim();
+        }
+        itemIndex += 1;
+        const value = markdownForNode($, child, listDepth + 1, textColor, context).trim();
+        const prefix = ordered ? `${itemIndex}.` : "-";
+        return `${"  ".repeat(listDepth)}${prefix} ${value}`;
+      })
+      .filter(Boolean);
+    return values.length ? `\n\n${values.join("\n")}\n\n` : "";
   }
   if (tag === "li") {
     return children();
   }
 
+  if (tag.includes("-") || tag.startsWith("mp") || tag.startsWith("wx")) {
+    context.specialElementCount += 1;
+  }
   const value = children();
+  if (!value.trim()) {
+    const description = elementDescription(element);
+    return description ? `\n\n${escapeMarkdownText(description)}\n\n` : "";
+  }
   return BLOCK_TAGS.has(tag) && value.trim() ? `\n\n${value}\n\n` : value;
 }
 
@@ -372,15 +989,21 @@ export async function convertWechatHtml(html, pageUrl, options = {}) {
     throw new Error("微信页面中没有找到文章标题");
   }
 
-  content.find("script,style,noscript,iframe,video,audio,canvas,svg,form,button,input").remove();
-  content.find('[style*="display:none"],[style*="display: none"],[style*="visibility:hidden"],[style*="visibility: hidden"]').remove();
+  content.find("script,style").remove();
+  const sourceTextNodes = collectMeaningfulTextNodes(content.get(0));
   const imageElements = content.find("img").toArray();
   const sourceImages = imageElements.map(element => {
     const image = $(element);
     return image.attr("data-src") || image.attr("data-original") || image.attr("src") || "";
   });
+  const backgroundEntries = content
+    .find("*")
+    .toArray()
+    .map(element => ({ element, sources: backgroundImageSources($(element)) }))
+    .filter(entry => entry.sources.length > 0);
+  const backgroundSources = backgroundEntries.flatMap(entry => entry.sources);
   const coverSource = $('meta[property="og:image"]').attr("content") || "";
-  const allSources = [coverSource, ...sourceImages].filter(Boolean);
+  const allSources = [coverSource, ...sourceImages, ...backgroundSources].filter(Boolean);
   const uploaded = new Map();
   const downloadImage = options.downloadImage || downloadWechatImage;
   const uploadImage = options.uploadImage || uploadOfficialImage;
@@ -404,19 +1027,69 @@ export async function convertWechatHtml(html, pageUrl, options = {}) {
   imageElements.forEach((element, index) => {
     const rawSource = sourceImages[index];
     if (!rawSource) {
-      $(element).remove();
       return;
     }
     const key = assertWechatImageUrl(rawSource, sourceUrl).toString();
     $(element).attr("data-qcplay-src", uploaded.get(key));
   });
 
+  backgroundEntries.forEach(entry => {
+    const urls = entry.sources.map(rawSource => {
+      const key = assertWechatImageUrl(rawSource, sourceUrl).toString();
+      return uploaded.get(key);
+    });
+    $(entry.element).attr("data-qcplay-background-srcs", urls.filter(Boolean).join("|"));
+  });
+
+  const richHtml = sanitizeArticleRichHtml(content.html());
+  if (!richHtml) {
+    throw new Error("微信文章富文本转换后为空");
+  }
+  const richDocument = cheerio.load(richHtml, null, false);
+  const richText = normalizeTextContent(richDocument.root().text());
+  const missingRichTextNodes = sourceTextNodes.filter(node => {
+    const sourceText = normalizeTextContent(node.data).trim();
+    return sourceText && !richText.includes(sourceText);
+  });
+  if (missingRichTextNodes.length > 0) {
+    const preview = missingRichTextNodes
+      .slice(0, 3)
+      .map(node => normalizeTextContent(node.data).trim())
+      .join(" / ");
+    throw new Error(`微信文章有 ${missingRichTextNodes.length} 处正文未保留原始格式: ${preview}`);
+  }
+  const sourceImageCount = sourceImages.filter(Boolean).length;
+  const richImageCount = richDocument("img").length;
+  if (richImageCount !== sourceImageCount) {
+    throw new Error(`微信文章图片结构不完整: 原文 ${sourceImageCount} 张，转换后 ${richImageCount} 张`);
+  }
+
+  const markdownContext = {
+    capturedTextNodes: new Set(),
+    colorCount: 0,
+    colors: new Set(),
+    mediaCount: 0,
+    specialElementCount: 0,
+    tableCount: 0
+  };
   const markdown = normalizeMarkdown(
-    content.contents().toArray().map(node => markdownForNode($, node)).join("")
+    content
+      .contents()
+      .toArray()
+      .map(node => markdownForNode($, node, 0, "", markdownContext))
+      .join("")
   );
   if (!markdown) {
     throw new Error("微信文章正文转换后为空");
   }
+  const missingTextNodes = sourceTextNodes.filter(node => !markdownContext.capturedTextNodes.has(node));
+  if (missingTextNodes.length > 0) {
+    const preview = missingTextNodes
+      .slice(0, 3)
+      .map(node => normalizeTextContent(node.data).trim())
+      .join(" / ");
+    throw new Error(`微信文章有 ${missingTextNodes.length} 处正文未被完整转换: ${preview}`);
+  }
 
   return {
     title,
@@ -425,7 +1098,16 @@ export async function convertWechatHtml(html, pageUrl, options = {}) {
     excerpt: $('meta[property="og:description"]').attr("content")?.trim() || "",
     thumbnail: coverSource ? uploaded.get(assertWechatImageUrl(coverSource, sourceUrl).toString()) || "" : uploaded.values().next().value || "",
     markdown,
+    richHtml,
+    richImageCount,
     imageCount: uploaded.size,
+    backgroundImageCount: backgroundSources.length,
+    colorCount: markdownContext.colorCount,
+    colors: [...markdownContext.colors],
+    mediaCount: markdownContext.mediaCount,
+    specialElementCount: markdownContext.specialElementCount,
+    tableCount: markdownContext.tableCount,
+    textSegmentCount: sourceTextNodes.length,
     sourceUrl: sourceUrl.toString()
   };
 }
@@ -435,6 +1117,9 @@ function yamlString(value) {
 }
 
 export function buildOfficialArticleMarkdown(article) {
+  const articleBody = article.richHtml
+    ? `${RICH_HTML_START}\n${article.richHtml}\n${RICH_HTML_END}`
+    : article.markdown;
   return `---
 article_title: ${yamlString(article.title)}
 thumbnail: ${yamlString(article.thumbnail)}
@@ -456,7 +1141,7 @@ index_move_img: ""
 source_url: ${yamlString(article.sourceUrl)}
 ---
 
-${article.markdown}
+${articleBody}
 `;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qcplay/cli",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "QCPlay CLI",
   "type": "module",
   "bin": {

package/templates/skills/qcplay-publish-article/SKILL.md

@@ -302,10 +302,13 @@ qcplay article import "https://mp.weixin.qq.com/s/..." article.md
 该命令会：
 
 ```txt
-读取微信文章标题、作者、发布日期和正文
-逐张下载正文与封面图片
+读取微信文章标题、作者、发布日期和完整正文
+逐张下载正文图片、CSS 背景图与封面图片
 上传图片到官网图片服务并替换链接
-清理微信脚本、表单和交互节点
+清理脚本和危险属性，同时保留原文 HTML 层级、内联样式及特殊节点里的可读内容
+背景图片保留在原容器中，不得重复生成为普通图片
+生成保持微信 677px 阅读宽度并兼容窄屏的富 HTML 正文
+独占一行的图片使用块级布局，避免 PC 端标题行盒造成相邻图片重叠
 生成 status: "0" 的官网 Markdown 草稿
 ```