@akairos/pipeline 0.18.1 → 0.19.0

package/src/wechat-preview/browser/studio/studio.ts

@@ -1,16 +1,16 @@
+import articleCss from "@akairos/milkdown-article-style/article.css?raw";
 import { Editor, defaultValueCtx, rootCtx } from "@milkdown/kit/core";
 import { commonmark } from "@milkdown/kit/preset/commonmark";
 import { gfm } from "@milkdown/kit/preset/gfm";
 import { getHTML } from "@milkdown/kit/utils";
-import articleCss from "@akairos/milkdown-article-style/article.css?raw";
-import { getCombinedMilkdownPlugins, type WechatPluginDoc } from "@akairos/milkdown-article-plugins";
-import { renderWechatHtml } from "../../wechat-renderer";
-import type { ArticleStructure } from "../../wechat-renderer";
-import type { WechatExportTheme } from "../../themes";
+import { getCombinedMilkdownPlugins, getCombinedDefaultCss, type WechatPluginDoc } from "@akairos/milkdown-article-plugins";
+import { MynoEditor } from "./myno-editor";
+import { STYLE_PACKS, type StylePack } from "./style-packs";
 import { SYNTAX_CATEGORIES, buildCombinedPresetsCss } from "./syntax-presets";
 import { COLOR_PALETTES } from "./color-palettes";
-import { extractFrontmatter } from "../../frontmatter-handler";
-import { stripLeadingH1 } from "../../../text";
+import { parseStyleConfig, exportStyleConfigBlob, type StandaloneStyleConfig } from "./config-manager";
+import { renderWechatHtml, buildWechatThemeCss, type ArticleStructure } from "../../wechat-renderer";
+import type { WechatExportTheme } from "../../themes";
 
 interface AccountData {
   name: string;
@@ -24,6 +24,7 @@ interface AccountData {
   };
   articleThemeCss?: string;
   articleTheme?: string | null;
+  articleThemeStandalone?: boolean;
 }
 
 interface StudioConfigResponse {
@@ -40,21 +41,24 @@ let latestWechatHtml = "";
 let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 let showingHtmlSource = false;
 let currentSyntaxPresets: Record<string, string> = {};
-// 串行渲染，旧结果不能覆盖最新编辑或账号。
 let renderRevision = 0;
 let rendering = false;
+let mynoEditor: MynoEditor | null = null;
+let currentEditorMode: "visual" | "source" = "visual";
+let standaloneThemeName = "";
 
-// DOM Elements
+// ── DOM Elements ────────────────────────────────────────────────────────
 const accountSelect = document.getElementById("account-select") as HTMLSelectElement;
+const configModeBadge = document.getElementById("config-mode-badge") as HTMLElement;
 const editorMarkdown = document.getElementById("editor-markdown") as HTMLTextAreaElement;
+const milkdownEditorRoot = document.getElementById("milkdown-editor-root") as HTMLElement;
 const previewScreen = document.getElementById("preview-screen") as HTMLElement;
 const editorStats = document.getElementById("editor-stats") as HTMLElement;
 const htmlSourceContainer = document.getElementById("html-source-container") as HTMLElement;
 const htmlSourceCode = document.getElementById("html-source-code") as HTMLTextAreaElement;
 const toastContainer = document.getElementById("toast-container") as HTMLElement;
-const hiddenHost = document.getElementById("studio-editor-host") as HTMLElement;
 
-// Controls
+// Sliders & Text Inputs
 const inputFontSize = document.getElementById("input-font-size") as HTMLInputElement;
 const valFontSize = document.getElementById("val-font-size") as HTMLElement;
 const inputLineHeight = document.getElementById("input-line-height") as HTMLInputElement;
@@ -85,9 +89,24 @@ const inputHeadingLabel = document.getElementById("input-heading-label") as HTML
 const inputQuoteLabel = document.getElementById("input-quote-label") as HTMLInputElement;
 const inputCustomCss = document.getElementById("input-custom-css") as HTMLTextAreaElement;
 
+const btnModeVisual = document.getElementById("btn-mode-visual") as HTMLButtonElement;
+const btnModeSource = document.getElementById("btn-mode-source") as HTMLButtonElement;
+
+const fileImportConfig = document.getElementById("file-import-config") as HTMLInputElement;
+const btnImportConfig = document.getElementById("btn-import-config") as HTMLButtonElement;
+const btnExportConfig = document.getElementById("btn-export-config") as HTMLButtonElement;
+const btnSave = document.getElementById("btn-save") as HTMLButtonElement;
+const btnReset = document.getElementById("btn-reset") as HTMLButtonElement;
+const btnCopy = document.getElementById("btn-copy") as HTMLButtonElement;
+const btnToggleView = document.getElementById("btn-toggle-view") as HTMLButtonElement;
+const btnLoadSample = document.getElementById("btn-load-sample") as HTMLButtonElement;
+const btnClearMd = document.getElementById("btn-clear-md") as HTMLButtonElement;
+
+// ── Toast System ────────────────────────────────────────────────────────
 function showToast(message: string, type: "info" | "success" | "error" = "info") {
+  if (!toastContainer) return;
   const toast = document.createElement("div");
-  toast.className = `toast ${type === "success" ? "toast-success" : ""}`;
+  toast.className = `toast ${type === "success" ? "toast-success" : type === "error" ? "toast-error" : ""}`;
   toast.textContent = message;
   toastContainer.appendChild(toast);
   requestAnimationFrame(() => toast.classList.add("show"));
@@ -97,6 +116,7 @@ function showToast(message: string, type: "info" | "success" | "error" = "info")
   }, 3000);
 }
 
+// ── Color Picker Pairing ────────────────────────────────────────────────
 function bindColorPair(picker: HTMLInputElement, hex: HTMLInputElement, onChange: () => void) {
   picker.addEventListener("input", () => {
     hex.value = picker.value;
@@ -111,15 +131,45 @@ function bindColorPair(picker: HTMLInputElement, hex: HTMLInputElement, onChange
 }
 
 function updateStats() {
-  const text = editorMarkdown.value;
+  const text = getActiveMarkdown();
   const chars = text.replace(/\s+/g, "").length;
   const minutes = Math.max(1, Math.round(chars / 400));
-  editorStats.textContent = `字数: ${chars.toLocaleString()} 字 | 预计阅读: ${minutes} 分钟`;
+  if (editorStats) {
+    editorStats.textContent = `字数: ${chars.toLocaleString()} 字 | 预计阅读: ${minutes} 分钟`;
+  }
 }
 
-/** 预览与保存共用同一份样式参数。 */
+function getActiveMarkdown(): string {
+  if (currentEditorMode === "visual" && mynoEditor) {
+    return mynoEditor.getMarkdown();
+  }
+  return editorMarkdown.value;
+}
+
+function stripLeadingH1(markdown: string): string {
+  return markdown.replace(/^#\s+[^\r\n]*(?:\r?\n|$)/, "");
+}
+
+function extractFrontmatter(markdown: string): { frontmatter: Record<string, unknown> | null; content: string } {
+  const match = markdown.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n/);
+  if (!match) return { frontmatter: null, content: markdown };
+  return { frontmatter: {}, content: markdown.slice(match[0].length) };
+}
+
+/** 品牌色衍生的卡片底色（--brand-bg 系），非 6 位 hex 时返回 null 以保留账号默认值。 */
+function brandTint(hex: string, alpha: number): string | null {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
+}
+
+// ── Read Style Controls ─────────────────────────────────────────────────
 function readStyleControls() {
-  const account = accounts[currentAccount];
+  const account = accounts[currentAccount] || {
+    theme: { exportTheme: {}, editorVars: {}, structure: {} },
+  };
+
   const exportTheme: WechatExportTheme = {
     ...account.theme.exportTheme as WechatExportTheme,
     bodyFontSize: `${inputFontSize.value}px`,
@@ -133,52 +183,186 @@ function readStyleControls() {
     bodyLineHeight: inputLineHeight.value,
     bodyLetterSpacing: `${inputLetterSpacing.value}em`,
   };
+
+  const brandBg = brandTint(hexBrandColor.value, 0.08);
+  const brandBgDeep = brandBg && brandTint(hexBrandColor.value, 0.12);
   const editorVars = {
     ...account.theme.editorVars,
     "--brand": hexBrandColor.value,
+    ...(brandBg && brandBgDeep ? { "--brand-bg": brandBg, "--brand-bg-deep": brandBgDeep } : {}),
     "--text": hexTextColor.value,
     "--divider": hexDividerColor.value,
   };
+
   const structure: ArticleStructure = {
     ...account.theme.structure,
     numberedHeadings: switchNumberedHeadings.checked,
     headingLabel: inputHeadingLabel.value.trim(),
     quoteLabel: inputQuoteLabel.value.trim(),
   };
+
   return { editorVars, exportTheme, structure };
 }
 
+// ── Live Editor Style Synchronization ───────────────────────────────────
+function applyLiveEditorStyles(
+  style: ReturnType<typeof readStyleControls>,
+  customCss: string,
+) {
+  let styleTag = document.getElementById("studio-live-editor-css") as HTMLStyleElement | null;
+  if (!styleTag) {
+    styleTag = document.createElement("style");
+    styleTag.id = "studio-live-editor-css";
+    document.head.appendChild(styleTag);
+  }
+
+  const themeCss = buildWechatThemeCss(style.editorVars, style.exportTheme);
+  const pluginCss = getCombinedDefaultCss();
+
+  // Structure decorations for editor (simulating heading labels / counters)
+  let structureCss = "";
+  if (style.structure.numberedHeadings) {
+    const labelPrefix = style.structure.headingLabel ? `"${style.structure.headingLabel} " ` : "";
+    structureCss += `
+.milkdown .editor {
+  counter-reset: wx-heading-counter;
+}
+.milkdown .editor h2::before {
+  counter-increment: wx-heading-counter;
+  content: ${labelPrefix}counter(wx-heading-counter, decimal-leading-zero) " ";
+  margin-right: 0.3em;
+  opacity: 0.7;
+  font-weight: 600;
+}
+`;
+  } else if (style.structure.headingLabel) {
+    structureCss += `
+.milkdown .editor h2::before {
+  content: "${style.structure.headingLabel} ";
+  margin-right: 0.3em;
+  opacity: 0.7;
+  font-weight: 600;
+}
+`;
+  }
+
+  if (style.structure.quoteLabel) {
+    structureCss += `
+.milkdown .editor blockquote::before {
+  content: "${style.structure.quoteLabel}";
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  color: var(--wx-brand-ink, var(--wx-brand-accent, #ca6093));
+  margin-bottom: 6px;
+  text-transform: uppercase;
+}
+`;
+  }
+
+  styleTag.textContent = `
+/* ── Crepe resets: 后置于运行时，同特异性即可覆盖 Crepe 主题；不可用 !important，否则压过下方预设 ── */
+.milkdown .ProseMirror {
+  padding: 0;
+}
+.milkdown .ProseMirror h1,
+.milkdown .ProseMirror h2,
+.milkdown .ProseMirror h3,
+.milkdown .ProseMirror h4,
+.milkdown .ProseMirror h5,
+.milkdown .ProseMirror h6 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.milkdown .ProseMirror p {
+  padding: 0;
+}
+.milkdown .ProseMirror blockquote {
+  position: static;
+  box-sizing: border-box;
+}
+.milkdown .ProseMirror blockquote::before {
+  display: none;
+}
+
+/* ── Dynamic WeChat Theme Variables & Container Styling ── */
+${themeCss}
+
+/* ── Structure Enhancements (Numbered Headings, Chapter / Quote Labels) ── */
+${structureCss}
+
+/* ── Article Plugins Styling (Callouts, Badges, Kbd, Article Cards, etc.) ── */
+${pluginCss}
+
+/* ── Active Syntax Presets & Custom CSS Overrides ── */
+${customCss}
+`;
+}
+
+function refreshLiveEditorStyles() {
+  const style = readStyleControls();
+  const account = accounts[currentAccount];
+  const customCss = [
+    buildCombinedPresetsCss(currentSyntaxPresets),
+    account?.articleThemeCss,
+    inputCustomCss.value,
+  ].filter(Boolean).join("\n\n");
+  applyLiveEditorStyles(style, customCss);
+}
+
+// ── Inlined WeChat Render Pass ──────────────────────────────────────────
 async function doRender() {
-  if (rendering || !accounts[currentAccount]) return;
+  if (rendering) return;
   rendering = true;
   const revision = renderRevision;
-  const markdown = stripLeadingH1(extractFrontmatter(editorMarkdown.value).content).trimStart();
+  const rawMd = getActiveMarkdown();
+  const markdown = stripLeadingH1(extractFrontmatter(rawMd).content).trimStart();
   const style = readStyleControls();
+  const account = accounts[currentAccount];
+
   const customCss = [
     buildCombinedPresetsCss(currentSyntaxPresets),
-    accounts[currentAccount].articleThemeCss,
+    account?.articleThemeCss,
     inputCustomCss.value,
   ].filter(Boolean).join("\n\n");
+
+  applyLiveEditorStyles(style, customCss);
+
   updateStats();
 
   try {
-    hiddenHost.innerHTML = "";
-    const editor = Editor.make()
-      .config((ctx) => {
-        ctx.set(rootCtx, hiddenHost);
-        ctx.set(defaultValueCtx, markdown);
-      })
-      .use(commonmark)
-      .use(gfm)
-      .use(getCombinedMilkdownPlugins());
-
-    let semanticHtml: string;
-    try {
-      await editor.create();
-      semanticHtml = editor.action(getHTML());
-    } finally {
-      await editor.destroy();
+    let semanticHtml = "";
+    if (currentEditorMode === "visual" && mynoEditor) {
+      const crepe = mynoEditor.getCrepe();
+      if (crepe) {
+        try {
+          semanticHtml = crepe.editor.action(getHTML());
+        } catch {
+          // ignore and fallback
+        }
+      }
     }
+
+    if (!semanticHtml) {
+      const hiddenHost = document.getElementById("studio-editor-host") || document.createElement("div");
+      hiddenHost.innerHTML = "";
+      const editor = Editor.make()
+        .config((ctx) => {
+          ctx.set(rootCtx, hiddenHost);
+          ctx.set(defaultValueCtx, markdown);
+        })
+        .use(commonmark)
+        .use(gfm)
+        .use(getCombinedMilkdownPlugins());
+      try {
+        await editor.create();
+        semanticHtml = editor.action(getHTML());
+      } finally {
+        await editor.destroy();
+      }
+    }
+
     const inlinedHtml = await renderWechatHtml({
       semanticHtml,
       baseCss: articleCss,
@@ -186,17 +370,19 @@ async function doRender() {
       structure: style.structure,
       editorVars: style.editorVars,
       theme: style.exportTheme,
+      strictImageDecode: false,
     });
+
     if (revision !== renderRevision) return;
     latestWechatHtml = inlinedHtml;
-    previewScreen.innerHTML = inlinedHtml;
-    htmlSourceCode.value = inlinedHtml;
+    if (previewScreen) previewScreen.innerHTML = inlinedHtml;
+    if (htmlSourceCode) htmlSourceCode.value = inlinedHtml;
   } catch (error) {
     if (revision !== renderRevision) return;
-    console.error("Studio render error:", error);
+    console.error("myno render error:", error);
     const message = error instanceof Error ? error.message : String(error);
-    previewScreen.textContent = `渲染错误: ${message}`;
-    htmlSourceCode.value = "";
+    if (previewScreen) previewScreen.textContent = `渲染错误: ${message}`;
+    if (htmlSourceCode) htmlSourceCode.value = "";
   } finally {
     rendering = false;
     if (revision !== renderRevision) {
@@ -209,210 +395,351 @@ async function doRender() {
 function scheduleRender(delay = 60) {
   renderRevision += 1;
   latestWechatHtml = "";
+  refreshLiveEditorStyles();
   if (debounceTimer) clearTimeout(debounceTimer);
   debounceTimer = setTimeout(() => {
     void doRender();
   }, delay);
 }
 
-function renderSyntaxCards(plugins: WechatPluginDoc[]) {
-  const container = document.getElementById("syntax-card-list");
+// ── Style Packs (One-Click Application) ──────────────────────────────────
+function renderStylePacks() {
+  const container = document.getElementById("style-packs-grid");
   if (!container) return;
   container.innerHTML = "";
 
-  for (const doc of plugins) {
+  for (const pack of STYLE_PACKS) {
     const card = document.createElement("div");
-    card.className = "syntax-card";
-
-    const header = document.createElement("div");
-    header.className = "syntax-card-header";
-
-    const title = document.createElement("span");
-    title.className = "syntax-card-title";
-    title.textContent = doc.name;
-
-    const badge = document.createElement("span");
-    badge.className = "syntax-card-badge";
-    badge.textContent = doc.category === "inline" ? "行内扩展" : "块级组件";
+    card.className = "style-pack-card";
+    card.dataset.packId = pack.id;
+
+    const head = document.createElement("div");
+    head.className = "style-pack-head";
+
+    const titleWrap = document.createElement("div");
+    const name = document.createElement("span");
+    name.className = "style-pack-name";
+    name.textContent = pack.name;
+    const sub = document.createElement("span");
+    sub.className = "style-pack-subtitle";
+    sub.textContent = ` · ${pack.subtitle}`;
+    titleWrap.appendChild(name);
+    titleWrap.appendChild(sub);
+
+    const swatches = document.createElement("div");
+    swatches.className = "style-pack-swatches";
+    for (const color of pack.swatch) {
+      const dot = document.createElement("span");
+      dot.className = "swatch-dot";
+      dot.style.background = color;
+      swatches.appendChild(dot);
+    }
 
-    header.appendChild(title);
-    header.appendChild(badge);
-    card.appendChild(header);
+    head.appendChild(titleWrap);
+    head.appendChild(swatches);
+    card.appendChild(head);
 
-    const desc = document.createElement("p");
-    desc.className = "syntax-card-desc";
-    desc.textContent = doc.description;
+    const desc = document.createElement("div");
+    desc.className = "style-pack-desc";
+    desc.textContent = pack.description;
     card.appendChild(desc);
 
-    const code = document.createElement("pre");
-    code.className = "syntax-code-snippet";
-    code.textContent = doc.sampleMarkdown;
-    card.appendChild(code);
-
-    const insertBtn = document.createElement("button");
-    insertBtn.className = "syntax-btn-insert";
-    insertBtn.textContent = "+ 插入示例到文章中";
-    insertBtn.addEventListener("click", () => {
-      insertTextAtCursor(doc.sampleMarkdown);
-      showToast(`已插入「${doc.name}」示例`, "info");
+    card.addEventListener("click", () => {
+      applyStylePack(pack);
+      document.querySelectorAll(".style-pack-card").forEach((c) => c.classList.remove("active"));
+      card.classList.add("active");
+      showToast(`已套用「${pack.name}」风格套系`, "info");
     });
-    card.appendChild(insertBtn);
 
     container.appendChild(card);
   }
 }
 
-function insertTextAtCursor(text: string) {
-  const start = editorMarkdown.selectionStart;
-  const end = editorMarkdown.selectionEnd;
-  const original = editorMarkdown.value;
-  const insertText = `\n\n${text}\n\n`;
-  editorMarkdown.value = original.slice(0, start) + insertText + original.slice(end);
-  editorMarkdown.focus();
-  editorMarkdown.selectionStart = editorMarkdown.selectionEnd = start + insertText.length;
+function applyStylePack(pack: StylePack) {
+  const t = pack.theme;
+  // Font Size
+  inputFontSize.value = t.fontSize;
+  valFontSize.textContent = `${t.fontSize}px`;
+  syncSegmentedState("seg-font-size", t.fontSize);
+
+  // Line Height
+  inputLineHeight.value = t.lineHeight;
+  valLineHeight.textContent = t.lineHeight;
+  syncSegmentedState("seg-line-height", t.lineHeight);
+
+  // Colors
+  pickerBrandColor.value = hexBrandColor.value = t.brandColor;
+  pickerTextColor.value = hexTextColor.value = t.textColor;
+  pickerH2Color.value = hexH2Color.value = t.h2Color;
+  pickerH3Color.value = hexH3Color.value = t.h3Color;
+  pickerQuoteColor.value = hexQuoteColor.value = t.quoteColor;
+  pickerDividerColor.value = hexDividerColor.value = t.dividerColor;
+  syncSwatchActiveState(t.brandColor);
+
+  // H2 Preset
+  currentSyntaxPresets.h2 = t.h2Preset;
+  syncPillActiveState("seg-h2-preset", t.h2Preset);
+
+  // H3 Preset
+  if (t.h3Preset) currentSyntaxPresets.h3 = t.h3Preset;
+
+  // Numbered Headings
+  switchNumberedHeadings.checked = t.numberedHeadings;
+
   scheduleRender(20);
 }
 
+function syncSegmentedState(containerId: string, value: string) {
+  const container = document.getElementById(containerId);
+  if (!container) return;
+  container.querySelectorAll(".seg-btn").forEach((btn) => {
+    const el = btn as HTMLElement;
+    if (el.dataset.val === value) {
+      el.classList.add("active");
+    } else {
+      el.classList.remove("active");
+    }
+  });
+}
+
+function syncPillActiveState(containerId: string, presetId: string) {
+  const container = document.getElementById(containerId);
+  if (!container) return;
+  container.querySelectorAll(".pill-btn").forEach((btn) => {
+    const el = btn as HTMLElement;
+    if (el.dataset.preset === presetId) {
+      el.classList.add("active");
+    } else {
+      el.classList.remove("active");
+    }
+  });
+}
+
+function syncSwatchActiveState(hexColor: string) {
+  document.querySelectorAll(".swatch-btn").forEach((btn) => {
+    const el = btn as HTMLElement;
+    if (el.dataset.color?.toLowerCase() === hexColor.toLowerCase()) {
+      el.style.transform = "scale(1.2)";
+      el.style.boxShadow = "0 0 0 2px var(--brand)";
+    } else {
+      el.style.transform = "";
+      el.style.boxShadow = "0 0 0 1px var(--border)";
+    }
+  });
+}
+
+// ── Bind Segmented Controls ─────────────────────────────────────────────
+function initSegmentedControls() {
+  // Font Size
+  const segFontSize = document.getElementById("seg-font-size");
+  segFontSize?.querySelectorAll(".seg-btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const val = (btn as HTMLElement).dataset.val || "16";
+      inputFontSize.value = val;
+      valFontSize.textContent = `${val}px`;
+      syncSegmentedState("seg-font-size", val);
+      scheduleRender(20);
+    });
+  });
+
+  // Line Height
+  const segLineHeight = document.getElementById("seg-line-height");
+  segLineHeight?.querySelectorAll(".seg-btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const val = (btn as HTMLElement).dataset.val || "1.84";
+      inputLineHeight.value = val;
+      valLineHeight.textContent = val;
+      syncSegmentedState("seg-line-height", val);
+      scheduleRender(20);
+    });
+  });
+
+  // Quick Swatches
+  document.querySelectorAll(".swatch-btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const color = (btn as HTMLElement).dataset.color || "#ca6093";
+      pickerBrandColor.value = hexBrandColor.value = color;
+      syncSwatchActiveState(color);
+      scheduleRender(20);
+    });
+  });
+
+  // H2 Pills
+  const segH2 = document.getElementById("seg-h2-preset");
+  segH2?.querySelectorAll(".pill-btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const preset = (btn as HTMLElement).dataset.preset || "pillar";
+      currentSyntaxPresets.h2 = preset;
+      syncPillActiveState("seg-h2-preset", preset);
+      scheduleRender(20);
+    });
+  });
+}
+
+// ── Syntax Presets in Accordion ─────────────────────────────────────────
 function renderSyntaxPresetControls() {
   const container = document.getElementById("syntax-preset-container");
   if (!container) return;
   container.innerHTML = "";
 
   for (const cat of SYNTAX_CATEGORIES) {
+    if (cat.key === "h2") continue; // H2 has its own pills at top level
     const group = document.createElement("div");
-    group.className = "preset-group";
+    group.className = "control-group";
 
     const header = document.createElement("div");
-    header.className = "preset-header";
-
+    header.className = "control-label";
     const title = document.createElement("span");
-    title.className = "preset-title";
     title.textContent = `${cat.icon} ${cat.label}`;
     header.appendChild(title);
 
     const hasMultiplePresets = Boolean(cat.presets && cat.presets.length > 1);
-
-    const extractBtn = document.createElement("button");
-    extractBtn.type = "button";
-    extractBtn.className = "btn-extract-css";
-    extractBtn.textContent = "📋 提取 CSS";
-    extractBtn.title = "将此语法的 CSS 追加到底部自定义编辑器，方便微调覆盖";
-    extractBtn.addEventListener("click", () => {
-      let snippet = "";
-      if (hasMultiplePresets && cat.presets) {
-        const activeId = currentSyntaxPresets[cat.key] || cat.defaultPresetId || cat.presets[0].id;
-        const p = cat.presets.find((preset) => preset.id === activeId) || cat.presets[0];
-        snippet = `/* [${cat.label}] - ${p.name} */\n${p.css.trim()}\n`;
-      } else {
-        const cssContent = cat.css || (cat.presets && cat.presets[0]?.css) || "";
-        snippet = `/* [${cat.label}] 基础样式 */\n${cssContent.trim()}\n`;
-      }
-      if (!snippet) return;
-      inputCustomCss.value = inputCustomCss.value ? `${inputCustomCss.value.trim()}\n\n${snippet}` : snippet;
-      inputCustomCss.focus();
-      inputCustomCss.scrollTop = inputCustomCss.scrollHeight;
-      showToast(`已将「${cat.label}」CSS 追加到底部编辑框！`, "info");
-      scheduleRender(20);
-    });
-    header.appendChild(extractBtn);
-
-    group.appendChild(header);
-
     if (hasMultiplePresets && cat.presets) {
       const select = document.createElement("select");
-      select.className = "preset-select";
-      select.dataset.category = cat.key;
-
+      select.className = "select-control full-width";
       for (const preset of cat.presets) {
         const opt = document.createElement("option");
         opt.value = preset.id;
         opt.textContent = preset.name;
         select.appendChild(opt);
       }
-
       const activePresetId = currentSyntaxPresets[cat.key] || cat.defaultPresetId || cat.presets[0].id;
       select.value = activePresetId;
-      group.appendChild(select);
-
-      const desc = document.createElement("div");
-      desc.className = "preset-desc";
-      const activePreset = cat.presets.find((p) => p.id === activePresetId) || cat.presets[0];
-      desc.textContent = activePreset?.description || "";
-      group.appendChild(desc);
-
       select.addEventListener("change", () => {
         currentSyntaxPresets[cat.key] = select.value;
-        const p = cat.presets!.find((preset) => preset.id === select.value);
-        desc.textContent = p?.description || "";
         scheduleRender(20);
       });
-    } else if (cat.description) {
-      const desc = document.createElement("div");
-      desc.className = "preset-desc";
-      desc.textContent = cat.description;
-      group.appendChild(desc);
+      group.appendChild(header);
+      group.appendChild(select);
+    } else {
+      group.appendChild(header);
     }
 
     container.appendChild(group);
   }
 }
 
+// ── Tab 2: Syntax Cards ─────────────────────────────────────────────────
+function renderSyntaxCards(plugins: WechatPluginDoc[]) {
+  const container = document.getElementById("syntax-card-list");
+  if (!container) return;
+  container.innerHTML = "";
+
+  for (const doc of plugins) {
+    const card = document.createElement("div");
+    card.className = "syntax-card";
+
+    const header = document.createElement("div");
+    header.className = "syntax-card-header";
+
+    const title = document.createElement("span");
+    title.className = "syntax-card-title";
+    title.textContent = doc.name;
+
+    const badge = document.createElement("span");
+    badge.className = "syntax-card-badge";
+    badge.textContent = doc.category === "inline" ? "行内扩展" : "块级组件";
+
+    header.appendChild(title);
+    header.appendChild(badge);
+    card.appendChild(header);
+
+    const desc = document.createElement("p");
+    desc.className = "syntax-card-desc";
+    desc.textContent = doc.description;
+    card.appendChild(desc);
+
+    const code = document.createElement("pre");
+    code.className = "syntax-code-snippet";
+    code.textContent = doc.sampleMarkdown;
+    card.appendChild(code);
+
+    const insertBtn = document.createElement("button");
+    insertBtn.className = "syntax-btn-insert";
+    insertBtn.textContent = "+ 插入示例到当前文章";
+    insertBtn.addEventListener("click", () => {
+      insertTextAtCursor(doc.sampleMarkdown);
+      showToast(`已插入「${doc.name}」示例`, "info");
+    });
+    card.appendChild(insertBtn);
+
+    container.appendChild(card);
+  }
+}
+
+function insertTextAtCursor(text: string) {
+  if (currentEditorMode === "visual" && mynoEditor) {
+    const current = mynoEditor.getMarkdown();
+    const updated = `${current.trimEnd()}\n\n${text}\n\n`;
+    mynoEditor.setMarkdown(updated);
+    editorMarkdown.value = updated;
+  } else {
+    const start = editorMarkdown.selectionStart;
+    const end = editorMarkdown.selectionEnd;
+    const original = editorMarkdown.value;
+    const insertText = `\n\n${text}\n\n`;
+    editorMarkdown.value = original.slice(0, start) + insertText + original.slice(end);
+    editorMarkdown.focus();
+    editorMarkdown.selectionStart = editorMarkdown.selectionEnd = start + insertText.length;
+  }
+  scheduleRender(20);
+}
+
+// ── Account & Config Loading ────────────────────────────────────────────
 function applyAccountConfig(accountKey: string) {
   const account = accounts[accountKey];
   if (!account) return;
 
+  const standalone = Boolean(account.articleThemeStandalone);
+  configModeBadge.textContent = standalone ? "独立排版文件" : "账号默认配置";
+  configModeBadge.className = `badge ${standalone ? "badge-primary" : "badge-subtle"}`;
+
+  btnSave.disabled = Boolean(account.articleThemeStandalone);
+  btnSave.title = account.articleThemeStandalone
+    ? "当前账号引用独立配置，请通过「导出配置」保存调整后替换原文件"
+    : "保存当前调整至本地 config.json 的当前账号";
+
   const exportTheme = account.theme?.exportTheme || {};
   const editorVars = account.theme?.editorVars || {};
 
-  // 账号切换与重置必须恢复全部排版控件。
-  inputFontSize.value = exportTheme.bodyFontSize?.replace(/px$/, "")
-    || exportTheme.containerStyle?.match(/font-size:\s*(\d+(?:\.\d+)?)px/)?.[1] || "16";
-  valFontSize.textContent = `${inputFontSize.value}px`;
-  inputLineHeight.value = exportTheme.bodyLineHeight || "1.84";
-  valLineHeight.textContent = inputLineHeight.value;
+  // Font Size
+  const fontSize = exportTheme.bodyFontSize?.replace(/px$/, "") || "16";
+  inputFontSize.value = fontSize;
+  valFontSize.textContent = `${fontSize}px`;
+  syncSegmentedState("seg-font-size", fontSize);
+
+  // Line Height
+  const lineHeight = exportTheme.bodyLineHeight || "1.84";
+  inputLineHeight.value = lineHeight;
+  valLineHeight.textContent = lineHeight;
+  syncSegmentedState("seg-line-height", lineHeight);
+
+  // Letter & Paragraph Spacing
   inputLetterSpacing.value = String(parseFloat(exportTheme.bodyLetterSpacing || "0.012em"));
   valLetterSpacing.textContent = `${inputLetterSpacing.value}em`;
   inputParaSpacing.value = String(parseFloat(exportTheme.bodyParagraphSpacing || "1.18em"));
   valParaSpacing.textContent = `${inputParaSpacing.value}em`;
-  paletteSelect.value = "";
-  paletteDesc.textContent = "";
-
-  // 4. Colors
-  const brand = editorVars["--brand"] || exportTheme.primaryColor;
-  if (brand) {
-    pickerBrandColor.value = brand;
-    hexBrandColor.value = brand;
-  }
-  const textColor = exportTheme.bodyColor || editorVars["--text"];
-  if (textColor) {
-    pickerTextColor.value = textColor;
-    hexTextColor.value = textColor;
-  }
-  if (exportTheme.h2Color) {
-    pickerH2Color.value = exportTheme.h2Color;
-    hexH2Color.value = exportTheme.h2Color;
-  }
-  if (exportTheme.h3Color) {
-    pickerH3Color.value = exportTheme.h3Color;
-    hexH3Color.value = exportTheme.h3Color;
-  }
-  const quoteColor = exportTheme.blockquoteBorderColor || brand;
-  if (quoteColor) {
-    pickerQuoteColor.value = quoteColor;
-    hexQuoteColor.value = quoteColor;
-  }
-  const dividerColor = exportTheme.dividerColor || editorVars["--divider"];
-  if (dividerColor) {
-    pickerDividerColor.value = dividerColor;
-    hexDividerColor.value = dividerColor;
-  }
-  if (account.customCssContent) {
-    inputCustomCss.value = account.customCssContent;
-  } else {
-    inputCustomCss.value = "";
-  }
 
-  // 5. Syntax Presets
+  // Colors
+  const brand = editorVars["--brand"] || exportTheme.primaryColor || "#ca6093";
+  pickerBrandColor.value = hexBrandColor.value = brand;
+  syncSwatchActiveState(brand);
+
+  const text = exportTheme.bodyColor || editorVars["--text"] || "#292526";
+  pickerTextColor.value = hexTextColor.value = text;
+
+  if (exportTheme.h2Color) pickerH2Color.value = hexH2Color.value = exportTheme.h2Color;
+  if (exportTheme.h3Color) pickerH3Color.value = hexH3Color.value = exportTheme.h3Color;
+
+  const quote = exportTheme.blockquoteBorderColor || brand;
+  pickerQuoteColor.value = hexQuoteColor.value = quote;
+
+  const divider = exportTheme.dividerColor || editorVars["--divider"] || "#e2dcdf";
+  pickerDividerColor.value = hexDividerColor.value = divider;
+
+  inputCustomCss.value = account.customCssContent || "";
+
+  // Syntax Presets
   const savedPresets = account.theme?.syntaxPresets || {};
   currentSyntaxPresets = {};
   for (const cat of SYNTAX_CATEGORIES) {
@@ -420,9 +747,10 @@ function applyAccountConfig(accountKey: string) {
       currentSyntaxPresets[cat.key] = savedPresets[cat.key] || cat.defaultPresetId;
     }
   }
+  syncPillActiveState("seg-h2-preset", currentSyntaxPresets.h2 || "pillar");
   renderSyntaxPresetControls();
 
-  // 6. Structure
+  // Structure
   const structure = account.theme?.structure || {};
   switchNumberedHeadings.checked = Boolean(structure.numberedHeadings);
   inputHeadingLabel.value = structure.headingLabel || "";
@@ -431,6 +759,7 @@ function applyAccountConfig(accountKey: string) {
   scheduleRender(20);
 }
 
+// ── Initialize Color Palettes Dropdown ───────────────────────────────────
 function initColorPalettes() {
   if (!paletteSelect) return;
   paletteSelect.innerHTML = `<option value="">-- 选择推荐调色盘 (一键应用) --</option>`;
@@ -440,6 +769,7 @@ function initColorPalettes() {
     opt.textContent = `${p.name} · ${p.category}`;
     paletteSelect.appendChild(opt);
   }
+
   paletteSelect.addEventListener("change", () => {
     const pal = COLOR_PALETTES.find((p) => p.id === paletteSelect.value);
     if (!pal) return;
@@ -449,14 +779,30 @@ function initColorPalettes() {
     pickerH3Color.value = hexH3Color.value = pal.colors.h3;
     pickerQuoteColor.value = hexQuoteColor.value = pal.colors.quote;
     pickerDividerColor.value = hexDividerColor.value = pal.colors.divider;
+    syncSwatchActiveState(pal.colors.brand);
     if (paletteDesc) paletteDesc.textContent = pal.description;
-    showToast(`已应用「${pal.name}」高级配色方案！`, "info");
+    showToast(`已套用「${pal.name}」色盘`, "info");
     scheduleRender(20);
   });
 }
 
+// ── Studio Main Initialization ──────────────────────────────────────────
 async function initStudio() {
   initColorPalettes();
+  initSegmentedControls();
+  renderStylePacks();
+
+  // Bind Color Pairs
+  bindColorPair(pickerBrandColor, hexBrandColor, () => {
+    syncSwatchActiveState(pickerBrandColor.value);
+    scheduleRender(20);
+  });
+  bindColorPair(pickerTextColor, hexTextColor, () => scheduleRender(20));
+  bindColorPair(pickerH2Color, hexH2Color, () => scheduleRender(20));
+  bindColorPair(pickerH3Color, hexH3Color, () => scheduleRender(20));
+  bindColorPair(pickerQuoteColor, hexQuoteColor, () => scheduleRender(20));
+  bindColorPair(pickerDividerColor, hexDividerColor, () => scheduleRender(20));
+
   try {
     const res = await fetch("/api/studio/config");
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -466,7 +812,7 @@ async function initStudio() {
     currentAccount = data.defaultAccount || "default";
     pluginsList = data.plugins || [];
 
-    // Populate account selector
+    // Account selector
     accountSelect.innerHTML = "";
     for (const [key, acc] of Object.entries(accounts)) {
       const opt = document.createElement("option");
@@ -476,36 +822,83 @@ async function initStudio() {
       accountSelect.appendChild(opt);
     }
 
-    // Prefill Markdown
-    editorMarkdown.value = data.sampleMarkdown || "# 微信排版标题\n\n欢迎使用 WeChat Visual Studio！";
+    const initialMd = data.sampleMarkdown || "# 微信排版标题\n\n欢迎使用 myno 微信排版工作台！";
+    editorMarkdown.value = initialMd;
+
+    // Mount MynoEditor (Milkdown Crepe)
+    if (milkdownEditorRoot) {
+      mynoEditor = new MynoEditor({
+        root: milkdownEditorRoot,
+        defaultValue: initialMd,
+        onMarkdownChange: (md) => {
+          editorMarkdown.value = md;
+          scheduleRender(40);
+        },
+      });
+      await mynoEditor.create();
+    }
 
-    // Render plugins cheatsheet
     renderSyntaxCards(pluginsList);
-
-    // Apply active account config
     applyAccountConfig(currentAccount);
   } catch (err) {
     console.error("Failed to load studio config:", err);
-    showToast("无法加载配置，使用默认设置", "error");
+    showToast("无法加载服务器配置，使用本地默认设置", "error");
     scheduleRender(20);
   }
 }
 
-// Event Listeners
+// ── Event Handlers ──────────────────────────────────────────────────────
 accountSelect.addEventListener("change", () => {
   currentAccount = accountSelect.value;
   applyAccountConfig(currentAccount);
 });
 
-editorMarkdown.addEventListener("input", () => scheduleRender(40));
+editorMarkdown.addEventListener("input", () => {
+  // 源码模式下 textarea 是编辑面；视觉模式下它隐藏，但仍可能被脚本/按钮更新，需回同步给 Crepe
+  if (mynoEditor) {
+    mynoEditor.setMarkdown(editorMarkdown.value);
+  }
+  scheduleRender(40);
+});
+
+// Dual Mode Switcher
+btnModeVisual.addEventListener("click", () => {
+  if (currentEditorMode === "visual") return;
+  currentEditorMode = "visual";
+  btnModeVisual.classList.add("active");
+  btnModeSource.classList.remove("active");
+  milkdownEditorRoot.style.display = "block";
+  editorMarkdown.style.display = "none";
+  if (mynoEditor) {
+    mynoEditor.setMarkdown(editorMarkdown.value);
+  }
+  refreshLiveEditorStyles();
+  showToast("已切换至所见即所得编辑模式", "info");
+});
+
+btnModeSource.addEventListener("click", () => {
+  if (currentEditorMode === "source") return;
+  currentEditorMode = "source";
+  btnModeSource.classList.add("active");
+  btnModeVisual.classList.remove("active");
+  if (mynoEditor) {
+    editorMarkdown.value = mynoEditor.getMarkdown();
+  }
+  milkdownEditorRoot.style.display = "none";
+  editorMarkdown.style.display = "block";
+  editorMarkdown.focus();
+  showToast("已切换至 Markdown 源码模式", "info");
+});
 
-// Sliders
+// Sliders and Text Inputs
 inputFontSize.addEventListener("input", () => {
   valFontSize.textContent = `${inputFontSize.value}px`;
+  syncSegmentedState("seg-font-size", inputFontSize.value);
   scheduleRender(20);
 });
 inputLineHeight.addEventListener("input", () => {
   valLineHeight.textContent = inputLineHeight.value;
+  syncSegmentedState("seg-line-height", inputLineHeight.value);
   scheduleRender(20);
 });
 inputLetterSpacing.addEventListener("input", () => {
@@ -517,15 +910,6 @@ inputParaSpacing.addEventListener("input", () => {
   scheduleRender(20);
 });
 
-// Color Pickers
-bindColorPair(pickerBrandColor, hexBrandColor, () => scheduleRender(20));
-bindColorPair(pickerTextColor, hexTextColor, () => scheduleRender(20));
-bindColorPair(pickerH2Color, hexH2Color, () => scheduleRender(20));
-bindColorPair(pickerH3Color, hexH3Color, () => scheduleRender(20));
-bindColorPair(pickerQuoteColor, hexQuoteColor, () => scheduleRender(20));
-bindColorPair(pickerDividerColor, hexDividerColor, () => scheduleRender(20));
-
-// Switches & text inputs
 switchNumberedHeadings.addEventListener("change", () => scheduleRender(20));
 inputHeadingLabel.addEventListener("input", () => scheduleRender(40));
 inputQuoteLabel.addEventListener("input", () => scheduleRender(40));
@@ -537,14 +921,14 @@ const tabBtnSyntax = document.getElementById("tab-btn-syntax") as HTMLButtonElem
 const tabContentStyle = document.getElementById("tab-content-style") as HTMLElement;
 const tabContentSyntax = document.getElementById("tab-content-syntax") as HTMLElement;
 
-tabBtnStyle.addEventListener("click", () => {
+tabBtnStyle?.addEventListener("click", () => {
   tabBtnStyle.classList.add("active");
   tabBtnSyntax.classList.remove("active");
   tabContentStyle.style.display = "block";
   tabContentSyntax.style.display = "none";
 });
 
-tabBtnSyntax.addEventListener("click", () => {
+tabBtnSyntax?.addEventListener("click", () => {
   tabBtnSyntax.classList.add("active");
   tabBtnStyle.classList.remove("active");
   tabContentStyle.style.display = "none";
@@ -552,44 +936,45 @@ tabBtnSyntax.addEventListener("click", () => {
 });
 
 // Load sample / clear
-document.getElementById("btn-load-sample")?.addEventListener("click", async () => {
+btnLoadSample?.addEventListener("click", async () => {
   const res = await fetch("/api/studio/config");
   const data = (await res.json()) as StudioConfigResponse;
-  editorMarkdown.value = data.sampleMarkdown || "";
+  const sample = data.sampleMarkdown || "";
+  editorMarkdown.value = sample;
+  if (mynoEditor) mynoEditor.setMarkdown(sample);
   scheduleRender(20);
-  showToast("已加载官方全语法测试稿", "info");
+  showToast("已加载全语法官方测试稿", "info");
 });
 
-document.getElementById("btn-clear-md")?.addEventListener("click", () => {
+btnClearMd?.addEventListener("click", () => {
   editorMarkdown.value = "";
+  if (mynoEditor) mynoEditor.setMarkdown("");
   scheduleRender(20);
 });
 
 // Toggle HTML view
-document.getElementById("btn-toggle-view")?.addEventListener("click", (e) => {
-  const btn = e.currentTarget as HTMLButtonElement;
+btnToggleView?.addEventListener("click", () => {
   showingHtmlSource = !showingHtmlSource;
   if (showingHtmlSource) {
     htmlSourceContainer.style.display = "block";
-    btn.textContent = "📱 返回视图";
+    btnToggleView.textContent = "📱 返回视图";
   } else {
     htmlSourceContainer.style.display = "none";
-    btn.textContent = "🔍 查看 HTML 源码";
+    btnToggleView.textContent = "🔍 HTML 源码";
   }
 });
 
 // Reset
-document.getElementById("btn-reset")?.addEventListener("click", () => {
+btnReset?.addEventListener("click", () => {
   applyAccountConfig(currentAccount);
   showToast("已重置为当前账号默认样式", "info");
 });
 
 // Save to config.json
-document.getElementById("btn-save")?.addEventListener("click", async () => {
+btnSave?.addEventListener("click", async () => {
   const account = accounts[currentAccount];
   if (!account) return;
   const { structure, ...theme } = readStyleControls();
-  // 页首素材由正文模板提供，不写入账号结构配置。
   const { headerImageUrl: _headerImageUrl, ...savedStructure } = structure;
   const payload = {
     account: currentAccount,
@@ -618,8 +1003,97 @@ document.getElementById("btn-save")?.addEventListener("click", async () => {
   }
 });
 
+// Export Config (wechat-style.json)
+btnExportConfig?.addEventListener("click", () => {
+  const account = accounts[currentAccount];
+  if (!account) return;
+  const styleConfig: StandaloneStyleConfig = {
+    schemaVersion: 1,
+    engineVersion: 1,
+    id: standaloneThemeName || "wechat-style",
+    name: "myno WeChat 排版配置",
+    version: "1.0.0",
+    ...readStyleControls(),
+    syntaxPresets: { ...currentSyntaxPresets },
+    css: [account.articleThemeCss, inputCustomCss.value].filter(Boolean).join("\n\n"),
+  };
+
+  const { url, filename } = exportStyleConfigBlob(styleConfig);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+  showToast("已导出独立排版文件，CLI 使用 --article-theme 引用该文件", "success");
+});
+
+// Import Config (wechat-style.json)
+btnImportConfig?.addEventListener("click", () => {
+  fileImportConfig.click();
+});
+
+fileImportConfig?.addEventListener("change", () => {
+  const file = fileImportConfig.files?.[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = () => {
+    const content = reader.result as string;
+    const result = parseStyleConfig(content);
+    if (!result.ok) {
+      showToast(`导入失败: ${result.error}`, "error");
+      return;
+    }
+    const cfg = result.config;
+    standaloneThemeName = cfg.id || file.name.replace(/\.json$/i, "");
+
+    // Apply values to UI
+    if (cfg.exportTheme.bodyFontSize) {
+      const fs = cfg.exportTheme.bodyFontSize.replace(/px$/, "");
+      inputFontSize.value = fs;
+      valFontSize.textContent = `${fs}px`;
+      syncSegmentedState("seg-font-size", fs);
+    }
+    if (cfg.exportTheme.bodyLineHeight) {
+      inputLineHeight.value = cfg.exportTheme.bodyLineHeight;
+      valLineHeight.textContent = cfg.exportTheme.bodyLineHeight;
+      syncSegmentedState("seg-line-height", cfg.exportTheme.bodyLineHeight);
+    }
+    if (cfg.exportTheme.primaryColor || cfg.editorVars["--brand"]) {
+      const brand = cfg.exportTheme.primaryColor || cfg.editorVars["--brand"];
+      pickerBrandColor.value = hexBrandColor.value = brand;
+      syncSwatchActiveState(brand);
+    }
+    if (cfg.exportTheme.bodyColor || cfg.editorVars["--text"]) {
+      pickerTextColor.value = hexTextColor.value = cfg.exportTheme.bodyColor || cfg.editorVars["--text"];
+    }
+    if (cfg.exportTheme.h2Color) pickerH2Color.value = hexH2Color.value = cfg.exportTheme.h2Color;
+    if (cfg.exportTheme.h3Color) pickerH3Color.value = hexH3Color.value = cfg.exportTheme.h3Color;
+    if (cfg.exportTheme.blockquoteBorderColor) pickerQuoteColor.value = hexQuoteColor.value = cfg.exportTheme.blockquoteBorderColor;
+    if (cfg.exportTheme.dividerColor) pickerDividerColor.value = hexDividerColor.value = cfg.exportTheme.dividerColor;
+
+    if (cfg.syntaxPresets) {
+      currentSyntaxPresets = { ...cfg.syntaxPresets };
+      if (currentSyntaxPresets.h2) syncPillActiveState("seg-h2-preset", currentSyntaxPresets.h2);
+    }
+    if (cfg.structure) {
+      switchNumberedHeadings.checked = Boolean(cfg.structure.numberedHeadings);
+      inputHeadingLabel.value = cfg.structure.headingLabel || "";
+      inputQuoteLabel.value = cfg.structure.quoteLabel || "";
+    }
+    if (cfg.css) {
+      inputCustomCss.value = cfg.css;
+    }
+
+    configModeBadge.textContent = `独立配置: ${file.name}`;
+    configModeBadge.className = "badge badge-primary";
+    showToast(`✅ 成功导入独立配置: ${file.name}`, "success");
+    scheduleRender(20);
+  };
+  reader.readAsText(file);
+});
+
 // Copy to WeChat
-document.getElementById("btn-copy")?.addEventListener("click", async () => {
+btnCopy?.addEventListener("click", async () => {
   if (!latestWechatHtml) {
     showToast("文章内容为空", "error");
     return;
@@ -637,7 +1111,6 @@ document.getElementById("btn-copy")?.addEventListener("click", async () => {
     showToast("📋 已复制富文本！可在微信公众号后台直接粘贴 (Cmd+V)", "success");
   } catch (err) {
     console.error("Clipboard write error:", err);
-    // Fallback: execCommand copy
     const listener = (e: ClipboardEvent) => {
       e.clipboardData?.setData("text/html", latestWechatHtml);
       e.clipboardData?.setData("text/plain", latestWechatHtml);