@akairos/pipeline 0.18.1 → 0.18.5

package/src/wechat-preview/server/http.ts

@@ -26,7 +26,7 @@ import {
   rewriteHtmlLocalAssets,
 } from "./local-file";
 import { renderDashboardHtml, renderFailedEntryHtml } from "./ui";
-import { buildWechatPreviewShell, resolveWechatArticleTheme } from "../index";
+import { buildWechatPreviewShell, resolveWechatArticleTheme, rewriteRelativeImagePaths } from "../index";
 import { getPluginDocs } from "@akairos/milkdown-article-plugins";
 import { readArticleTheme } from "../../article-theme";
 import { PipelineConfigSchema, WechatExportThemeOverridesSchema, WechatStructureOverridesSchema } from "../../schema/config";
@@ -210,8 +210,10 @@ export async function startPreviewServer(
         const accountsData: Record<string, unknown> = {};
 
         for (const [key, account] of Object.entries(config.wx.accounts)) {
+          const articleThemePath = resolveConfigRelativePath(account.articleTheme, configPath);
+          const articleTheme = articleThemePath ? await readArticleTheme(articleThemePath) : null;
           let customCssContent = "";
-          if (account.customCss) {
+          if (account.customCss && articleTheme?.manifest.css === undefined) {
             const resolved = resolveConfigRelativePath(account.customCss, configPath);
             if (resolved) {
               try {
@@ -222,9 +224,7 @@ export async function startPreviewServer(
             }
           }
 
-          const articleThemePath = resolveConfigRelativePath(account.articleTheme, configPath);
-          const articleTheme = articleThemePath ? await readArticleTheme(articleThemePath) : null;
-          const { theme, structure } = resolveWechatArticleTheme(key, account.theme, articleTheme);
+          const { theme, structure, syntaxPresets } = resolveWechatArticleTheme(key, account.theme, articleTheme);
 
           accountsData[key] = {
             name: account.name || key,
@@ -233,11 +233,12 @@ export async function startPreviewServer(
             theme: {
               editorVars: theme.editorVars,
               exportTheme: theme.exportTheme,
-              syntaxPresets: account.theme?.syntaxPresets || {},
+              syntaxPresets: syntaxPresets || {},
               structure: structure || {},
             },
             articleThemeCss: articleTheme?.css || "",
             articleTheme: account.articleTheme ?? null,
+            articleThemeStandalone: articleTheme?.manifest.css !== undefined,
           };
         }
 
@@ -245,7 +246,7 @@ export async function startPreviewServer(
         const fixturePath = join(WECHAT_PREVIEW_DIR, "fixtures/all-nodes.md");
         if (existsSync(fixturePath)) {
           try {
-            sampleMarkdown = readFileSync(fixturePath, "utf-8");
+            sampleMarkdown = rewriteRelativeImagePaths(readFileSync(fixturePath, "utf-8"), dirname(fixturePath));
           } catch {
             // ignore
           }

package/src/wechat-preview/server/studio.test.ts

@@ -160,11 +160,36 @@ describe("wechat-preview studio server APIs", () => {
     }
   });
 
+  test("loads standalone defaults without depending on account CSS or styles", async () => {
+    const path = join(testDir, "config", "studio-style.json");
+    writeFileSync(path, JSON.stringify({ schemaVersion: 1, engineVersion: 1, id: "style", name: "Style", version: "1.0.0",
+      css: "p { color: #123456; }", exportTheme: { bodyFontSize: "18px" }, syntaxPresets: { h2: "contrast-green" } }));
+    const config = loadConfig();
+    const original = { ...config.wx.accounts.default };
+    config.wx.accounts.default.articleTheme = "studio-style.json";
+    config.wx.accounts.default.customCss = "missing.css";
+    saveConfig(config);
+    try {
+      const response = await fetch(`${server.url}/api/studio/config`);
+      expect(response.status).toBe(200);
+      const data = await response.json() as any;
+      expect(data.accounts.default.theme.exportTheme.bodyFontSize).toBe("18px");
+      expect(data.accounts.default.theme.syntaxPresets.h2).toBe("contrast-green");
+      expect(data.accounts.default.articleThemeCss).toContain("#123456");
+      expect(data.accounts.default.customCssContent).toBe("");
+      expect(data.accounts.default.articleThemeStandalone).toBe(true);
+    } finally {
+      config.wx.accounts.default = original;
+      saveConfig(config);
+    }
+  });
+
   test("GET /studio serves the Studio HTML dashboard", async () => {
     const res = await fetch(`${server.url}/studio`);
     expect(res.status).toBe(200);
     const html = await res.text();
     expect(html).toContain("WeChat Visual Studio");
     expect(html).toContain("studio.js");
+    expect(html).toContain('id="btn-export-config"');
   });
 });

package/src/wechat-preview/wechat-export.integration.test.ts

@@ -44,10 +44,27 @@ describe("semantic WeChat HTML export", () => {
     expect(html).toContain("Chapter</span>");
     expect(html).toContain("01</span>");
     expect(html).toContain("Citation</p>");
+    // 公众号编辑器解析不了 currentcolor/多值 border 简写，导出必须展开为可见边单值属性
+    expect(html).not.toContain("currentcolor");
+    // 引用导出为 section（规避微信编辑器对原生 blockquote 的强制灰色左边框），样式全靠内联
+    expect(html).not.toContain("<blockquote");
+    expect(html).toContain("border-left: 3px solid");
     expect(html).toContain("Advice</strong>");
     expect(html).toMatch(/background-color: (?:#1f7a4d|rgb\(31, 122, 77\))/);
   }, 30_000);
 
+  test("h2 pillar preset exports border-left on the heading section", async () => {
+    tempDir = await mkdtemp(join(tmpdir(), "zzhub-wechat-pillar-"));
+    const markdownPath = join(tempDir, "post.md");
+    await writeFile(markdownPath, "## 竖条标题\n\nBody.");
+    const { html } = await exportMarkdownToWechatHtml({
+      markdownPath, outPath: join(tempDir, "post.html"), account: "default",
+      themeOverrides: { syntaxPresets: { h2: "pillar" } },
+    });
+    const h2Tag = html.match(/<section[^>]*>(?:<span[^>]*>[^<]*<\/span>)*竖条标题/)?.[0] ?? "";
+    expect(h2Tag).toContain("border-left: 4px solid");
+  }, 30_000);
+
   test.skipIf(findChrome() === null)("Studio saves and resets the same style and ignores stale renders", async () => {
     const studio = await readFile(join(DIST_DIR, "src/wechat-preview/browser/studio/studio.html"), "utf8");
     const theme = getWechatPreviewTheme("default");
@@ -60,14 +77,20 @@ window.fetch = async (url, options) => {
   }
   return new Response(JSON.stringify(${JSON.stringify({ defaultAccount: "default", accounts: { default: { name: "default", theme, customCssContent: "" } }, plugins: [], sampleMarkdown: "# Title\n\nInitial body." })}));
 };
+const originalCreateObjectURL = URL.createObjectURL;
+URL.createObjectURL = blob => { window.exportedBlob = blob; return originalCreateObjectURL.call(URL, blob); };
+HTMLAnchorElement.prototype.click = function() { window.downloadName = this.download; };
 window.__zzhubRenderReady = (async () => {
   const waitFor = async predicate => { while (!predicate()) await new Promise(resolve => setTimeout(resolve, 20)); };
   const edit = (id, value) => { const input = document.getElementById(id); input.value = value; input.dispatchEvent(new Event('input')); };
   const source = () => document.getElementById('html-source-code')?.value || '';
   await waitFor(() => source().includes('Initial body.'));
   edit('input-font-size', '18'); edit('input-para-spacing', '1.44');
-  edit('input-heading-label', 'Chapter'); edit('input-custom-css', 'p { color: #123456; }');
+  edit('input-heading-label', 'Chapter'); edit('input-custom-css', '.milkdown .editor p { color: #123456; }');
   await waitFor(() => source().includes('font-size: 18px') && source().includes('margin-bottom: 1.44em'));
+  document.getElementById('btn-export-config').click();
+  const exported = JSON.parse(await window.exportedBlob.text());
+  const exportDidNotSave = !window.saved;
   document.getElementById('btn-save').click();
   await waitFor(() => window.saved);
   await new Promise(resolve => setTimeout(resolve, 20));
@@ -79,10 +102,10 @@ window.__zzhubRenderReady = (async () => {
   Image.prototype.decode = async function() { await new Promise(resolve => setTimeout(resolve, 250)); return originalDecode.call(this); };
   edit('editor-markdown', '![0.50](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)');
   await new Promise(resolve => setTimeout(resolve, 100));
-  edit('editor-markdown', 'Latest body.');
-  await waitFor(() => source().includes('Latest body.'));
+  edit('editor-markdown', 'Latest body.\\n\\n![1.00](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 "Crepe 图注")');
+  await waitFor(() => source().includes('Latest body.') && source().includes('Crepe 图注</p>'));
   const result = document.createElement('script'); result.id = 'zzhub-wechat-export-result'; result.type = 'application/json';
-  result.textContent = JSON.stringify({status:'success',html:JSON.stringify({saved:window.saved,resetOk,html:source()})});
+  result.textContent = JSON.stringify({status:'success',html:JSON.stringify({saved:window.saved,exported,exportDidNotSave,downloadName:window.downloadName,resetOk,html:source()})});
   document.body.appendChild(result);
 })();
 </script>`);
@@ -90,12 +113,30 @@ window.__zzhubRenderReady = (async () => {
     expect(result.status).toBe("success");
     if (!("html" in result)) throw new Error("Studio did not produce HTML");
     const checked = JSON.parse(result.html);
+    expect(checked.exported.account).toBeUndefined();
+    expect(checked.exported.exportTheme.bodyFontSize).toBe("18px");
+    expect(checked.exported.structure.headingLabel).toBe("Chapter");
+    expect(checked.exported.css).toContain("#123456");
+    expect(checked.exportDidNotSave).toBe(true);
+    expect(checked.downloadName).toBe("wechat-style.json");
+    tempDir = await mkdtemp(join(tmpdir(), "zzhub-standalone-export-"));
+    const profilePath = join(tempDir, "wechat-style.json");
+    const markdownPath = join(tempDir, "post.md");
+    await writeFile(profilePath, JSON.stringify(checked.exported));
+    await writeFile(markdownPath, "## Section\n\nPortable body.");
+    const portable = await exportMarkdownToWechatHtml({
+      markdownPath, outPath: join(tempDir, "post.html"), account: "ancientone", articleThemePath: profilePath,
+      themeOverrides: { exportTheme: { bodyFontSize: "14px" } },
+    });
+    expect(portable.html).toMatch(/<p[^>]+font-size: 18px[^>]*>Portable body\.<\/p>/);
+    expect(portable.html).toContain("Chapter</span>");
+    expect(portable.html).toMatch(/color: (?:#123456|rgb\(18, 52, 86\))/);
     expect(checked.saved.exportTheme.bodyFontSize).toBe("18px");
     expect(checked.saved.exportTheme.bodyParagraphSpacing).toBe("1.44em");
     expect(checked.saved.structure.headingLabel).toBe("Chapter");
     expect(checked.resetOk).toBe(true);
     expect(checked.html).toContain("Latest body.");
-    expect(checked.html).not.toContain("<img");
+    expect(checked.html).toContain("Crepe 图注</p>");
   }, 20_000);
 
   test.skipIf(findChrome() === null)("renders all nodes, cascades CSS, and emits a safe exact preview", async () => {
@@ -123,8 +164,8 @@ window.__zzhubRenderReady = (async () => {
 
     expect(result.html).toBe(html);
     expect(html.length).toBeLessThan(65_400);
-    expect(html).toContain("一级标题：克制的中文编辑部");
-    expect(html).toContain("<blockquote");
+    expect(html).toContain("二级标题：清晰但不过度装饰");
+    expect(html).not.toContain("<blockquote");
     expect(html).toContain("重点结论</span>");
     expect(html).not.toContain("==重点结论==");
     expect(html).toContain("==不高亮==");
@@ -170,7 +211,7 @@ window.__zzhubRenderReady = (async () => {
 
     const tagNames = Array.from(html.matchAll(/<\/?([a-z][a-z0-9-]*)\b/gi), (match) => match[1]?.toLowerCase());
     const allowedTags = new Set([
-      "section", "p", "blockquote", "ul", "ol", "li", "pre", "code",
+      "section", "p", "ul", "ol", "li", "pre", "code",
       "span", "strong", "em", "b", "i", "u", "s", "del", "a", "img",
       "br", "hr", "table", "thead", "tbody", "tr", "th", "td",
     ]);

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}