@v1hz/md2docx 1.5.0 → 1.6.0

package/src/web/app.js

@@ -1,178 +1,877 @@
-const form = document.querySelector("#config-form");
-const index = document.querySelector("#config-index");
+const configForm = document.querySelector("#config-form");
+const configIndex = document.querySelector("#config-index");
+const styleIndex = document.querySelector("#style-index");
+const styleEditor = document.querySelector("#style-editor");
+const styleSearch = document.querySelector("#style-search");
 const status = document.querySelector("#status");
+const statusIndicator = document.querySelector("#status-indicator");
 const saveButton = document.querySelector("#save-button");
 const resetButton = document.querySelector("#reset-button");
+const previewButton = document.querySelector("#preview-button");
 
+let activeView = "config";
 let schema;
 let originalConfig;
 let currentConfig;
+let originalStyles;
+let currentStyles;
+let styleCatalog;
+let styleRevision;
+let selectedStyle = { kind: "default" };
+
+const styleFields = [
+  { section: "文字", label: "中文字体", path: ["run", "font", "eastAsia"], type: "text" },
+  {
+    section: "文字",
+    label: "西文字体",
+    path: ["run", "font", "ascii"],
+    type: "text",
+    mirror: ["run", "font", "hAnsi"],
+  },
+  {
+    section: "文字",
+    label: "字号",
+    path: ["run", "size"],
+    type: "number",
+    unit: "pt",
+    scale: 2,
+    min: 1,
+    step: 0.5,
+    mirror: ["run", "sizeComplexScript"],
+  },
+  { section: "文字", label: "文字颜色", path: ["run", "color"], type: "color" },
+  { section: "文字", label: "加粗", path: ["run", "bold"], type: "boolean" },
+  { section: "文字", label: "斜体", path: ["run", "italics"], type: "boolean" },
+  {
+    section: "段落",
+    label: "对齐方式",
+    path: ["paragraph", "alignment"],
+    type: "select",
+    options: [
+      ["left", "左对齐"],
+      ["center", "居中"],
+      ["right", "右对齐"],
+      ["both", "两端对齐"],
+    ],
+  },
+  {
+    section: "段落",
+    label: "段前间距",
+    path: ["paragraph", "spacing", "before"],
+    type: "number",
+    unit: "pt",
+    scale: 20,
+    min: 0,
+    step: 1,
+  },
+  {
+    section: "段落",
+    label: "段后间距",
+    path: ["paragraph", "spacing", "after"],
+    type: "number",
+    unit: "pt",
+    scale: 20,
+    min: 0,
+    step: 1,
+  },
+  {
+    section: "段落",
+    label: "行距",
+    path: ["paragraph", "spacing", "line"],
+    type: "select-number",
+    options: [
+      [240, "单倍"],
+      [300, "1.25 倍"],
+      [360, "1.5 倍"],
+      [480, "2 倍"],
+    ],
+  },
+  {
+    section: "段落",
+    label: "首行缩进",
+    path: ["paragraph", "indent", "firstLineChars"],
+    type: "number",
+    unit: "字符",
+    scale: 100,
+    min: 0,
+    step: 0.5,
+  },
+  { section: "分页", label: "与下段同页", path: ["paragraph", "keepNext"], type: "boolean" },
+  { section: "分页", label: "段中不分页", path: ["paragraph", "keepLines"], type: "boolean" },
+  { section: "分页", label: "段前分页", path: ["paragraph", "pageBreakBefore"], type: "boolean" },
+];
+
+const propertySectionDescriptions = {
+  文字: "字体、字号与字形",
+  段落: "对齐、间距与缩进",
+  分页: "段落分页行为",
+  表格: "字体、对齐与单元格留白",
+};
 
 initialize();
+document.body.dataset.view = activeView;
+
+styleSearch.addEventListener("input", filterStyleIndex);
+
+async function apiFetch(url, body) {
+  const response = await fetch(
+    url,
+    body
+      ? {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body),
+        }
+      : void 0,
+  );
+  const result = body ? await response.json().catch(() => ({})) : void 0;
+  if (!response.ok) throw new Error(result?.error ?? `${response.status} ${response.statusText}`);
+  return result;
+}
 
 async function initialize() {
   try {
-    const response = await fetch("/api/config");
-    if (!response.ok) throw new Error("无法读取配置");
-    ({ schema, config: originalConfig } = await response.json());
+    const [configResponse, stylesResponse] = await Promise.all([
+      fetch("/api/config"),
+      fetch("/api/styles"),
+    ]);
+    if (!configResponse.ok) throw new Error("无法读取转换配置");
+    if (!stylesResponse.ok) throw new Error("无法读取文档样式");
+    ({ schema, config: originalConfig } = await configResponse.json());
+    const styleData = await stylesResponse.json();
     delete originalConfig.$schema;
     currentConfig = structuredClone(originalConfig);
+    originalStyles = styleData.styles;
+    currentStyles = structuredClone(originalStyles);
+    styleCatalog = styleData.catalog;
+    styleRevision = styleData.revision;
     enforceHeadingDependency(originalConfig);
     enforceHeadingDependency(currentConfig);
-    renderForm();
+    renderConfigForm();
+    renderStyleIndex();
+    selectFirstStyle();
+    updateProof();
     updateView();
   } catch (error) {
-    form.innerHTML = `<div class="loading">${escapeHtml(error.message)}</div>`;
+    configForm.innerHTML = `<div class="loading error-copy">${escapeHtml(error.message)}</div>`;
+    styleEditor.innerHTML = `<div class="loading error-copy">${escapeHtml(error.message)}</div>`;
     setStatus(error.message, true);
   }
 }
 
-function renderForm() {
-  form.innerHTML = "";
-  index.innerHTML = "";
+document.querySelectorAll(".mode-tab").forEach((tab) => {
+  tab.addEventListener("click", () => switchView(tab.dataset.view));
+});
+
+function switchView(view) {
+  activeView = view;
+  document.body.dataset.view = view;
+  document
+    .querySelectorAll(".mode-tab")
+    .forEach((tab) => tab.classList.toggle("active", tab.dataset.view === view));
+  document.querySelectorAll(".view").forEach((panel) => {
+    const active = panel.id === `${view}-view`;
+    panel.classList.toggle("active", active);
+    panel.hidden = !active;
+  });
+  previewButton.hidden = view !== "styles";
+  saveButton.textContent = view === "styles" ? "保存文档样式" : "保存转换配置";
+  saveButton.removeAttribute("form");
+  if (view === "config") saveButton.setAttribute("form", "config-form");
+  updateView();
+}
+
+function renderConfigForm() {
+  configForm.innerHTML = "";
+  configIndex.innerHTML = "";
   for (const [groupName, groupSchema] of Object.entries(schema.properties)) {
     const title = groupSchema.description ?? groupName;
     const sectionId = `section-${groupName}`;
     const link = document.createElement("a");
     link.href = `#${sectionId}`;
     link.textContent = title;
-    index.append(link);
+    configIndex.append(link);
 
     const group = document.createElement("section");
-    group.className = "group";
+    group.className = "config-group";
     group.id = sectionId;
-    group.innerHTML = `<header class="group-title"><h2>${escapeHtml(title)}</h2></header><div class="fields"></div>`;
-    const fields = group.querySelector(".fields");
+    group.innerHTML = `<header><p>转换规则</p><h2>${escapeHtml(title)}</h2></header><div class="config-fields"></div>`;
+    const fields = group.querySelector(".config-fields");
     for (const [name, fieldSchema] of Object.entries(groupSchema.properties)) {
-      fields.append(createField(groupName, name, fieldSchema));
+      fields.append(createConfigField(groupName, name, fieldSchema));
+    }
+    configForm.append(group);
+  }
+}
+
+function createConfigField(group, name, field) {
+  const path = `${group}.${name}`;
+  const div = document.createElement("div");
+  div.className = "config-field";
+  const description = field.description ?? name;
+  div.innerHTML = `<label for="${path}">${escapeHtml(description)}</label>`;
+  let input;
+  if (field.type === "boolean") {
+    const checked = currentConfig[group][name];
+    div.innerHTML += `<label class="switch"><input type="checkbox" id="${path}" ${checked ? "checked" : ""}><span class="switch-track"></span></label>`;
+    input = div.querySelector("input");
+    input.addEventListener("change", () => {
+      currentConfig[group][name] = input.checked;
+      enforceHeadingDependency(currentConfig);
+      syncHeadingDependencyControls();
+      updateView();
+    });
+  } else {
+    const wrapper = document.createElement("div");
+    wrapper.className = "property-control";
+    if (field.type === "string" || field.type === "text") {
+      input = document.createElement("input");
+      input.type = "text";
+      input.id = path;
+      input.value = currentConfig[group][name] ?? "";
+      input.addEventListener("input", () => {
+        currentConfig[group][name] = input.value;
+        updateView();
+      });
+    } else {
+      input = document.createElement("select");
+      input.id = path;
+      if (field.enum) {
+        for (const option of field.enum) {
+          const opt = document.createElement("option");
+          opt.value = option;
+          opt.textContent = option;
+          if (currentConfig[group][name] === option) opt.selected = true;
+          input.append(opt);
+        }
+        input.addEventListener("change", () => {
+          currentConfig[group][name] = input.value;
+          updateView();
+        });
+      } else if (field.type === "integer") {
+        input = document.createElement("input");
+        input.type = "number";
+        input.id = path;
+        input.min = field.minimum ?? 0;
+        input.value = currentConfig[group][name] ?? "";
+        input.addEventListener("input", () => {
+          currentConfig[group][name] = input.value === "" ? "" : Number(input.value);
+          updateView();
+        });
+      }
+    }
+    wrapper.append(input);
+    div.append(wrapper);
+  }
+  return div;
+}
+
+function renderStyleIndex() {
+  styleIndex.innerHTML = "";
+  const bySection = {};
+  for (const entry of styleCatalog ?? []) {
+    const section = entry.section ?? "其他";
+    if (!bySection[section]) bySection[section] = [];
+    bySection[section].push(entry);
+  }
+  for (const [section, entries] of Object.entries(bySection)) {
+    const group = document.createElement("div");
+    group.className = section === "其他" ? "style-nav-group advanced-nav" : "style-nav-group";
+    group.innerHTML = `<h2>${escapeHtml(section)}</h2><div></div>`;
+    const list = group.querySelector("div");
+    for (const entry of entries) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.dataset.kind = entry.kind;
+      button.dataset.key = entry.key;
+      button.dataset.collection = entry.collection ?? "";
+      button.dataset.id = entry.id ?? "";
+      button.textContent = entry.label;
+      button.addEventListener("click", () => selectStyle(button));
+      list.append(button);
+    }
+    styleIndex.append(group);
+  }
+  document.querySelectorAll(`.style-nav-group button`).forEach((b) => b.classList.remove("active"));
+}
+
+function filterStyleIndex() {
+  const query = styleSearch.value.toLowerCase();
+  document.querySelectorAll(".style-nav-group").forEach((group) => {
+    const match =
+      query === "" ||
+      Array.from(group.querySelectorAll("button")).some((btn) =>
+        btn.textContent.toLowerCase().includes(query),
+      );
+    group.hidden = !match;
+  });
+}
+
+function selectFirstStyle() {
+  const first = styleIndex.querySelector("button");
+  if (first) selectStyle(first);
+}
+
+function selectStyle(button) {
+  selectedStyle = {
+    kind: button.dataset.kind,
+    collection: button.dataset.collection,
+    id: button.dataset.id,
+    key: button.dataset.key,
+  };
+  document.querySelectorAll(".style-nav-group button").forEach((b) => b.classList.remove("active"));
+  button.classList.add("active");
+  renderStyleEditor();
+  updateProof();
+}
+
+function renderStyleEditor() {
+  styleEditor.innerHTML = "";
+  if (!selectedStyle) return;
+  const entry = selectedEntry();
+  const name = selectedStyle.key ?? "";
+  const label = styleCatalog?.find((c) => c.key === name)?.label ?? name;
+  const inheritedFrom = entry?.basedOn ? styleNameById(entry.basedOn) : null;
+
+  const container = document.createElement("div");
+  container.innerHTML = `<div class="editor-heading"><div><p class="eyebrow">正在编辑</p><h1>${escapeHtml(label)}</h1>${inheritedFrom ? `<p>基于 <strong>${escapeHtml(displayStyleName(inheritedFrom))}</strong></p>` : `<p>文档默认样式</p>`}</div>${inheritedFrom ? '<span class="inherit-chip">继承样式</span>' : ""}</div>`;
+
+  if (selectedStyle.collection === "tableStyles") {
+    container.append(createTableFields());
+  } else {
+    const groups = {};
+    for (const field of styleFields) {
+      if (!groups[field.section]) groups[field.section] = [];
+      groups[field.section].push(field);
+    }
+    for (const [section, fields] of Object.entries(groups)) {
+      const fieldset = createPropertyGroup(section, fields, entry);
+      if (fieldset) container.append(fieldset);
     }
-    form.append(group);
   }
+  styleEditor.append(container);
 }
 
-function createField(groupName, name, fieldSchema) {
-  const path = `${groupName}.${name}`;
-  const field = document.createElement("div");
-  field.className = "field";
-  field.innerHTML = `<label for="${path}">${escapeHtml(fieldSchema.description ?? name)}</label>`;
+function createStyleField(field, entry) {
+  const explicit = deepGet(entry, field.path);
+  const effective = effectiveValue(entry, field.path);
+  const row = document.createElement("div");
+  row.className = "property-row";
+  const inherited = effective.source !== (entry.name ? displayStyleName(entry.name) : "文档默认");
 
+  row.innerHTML = `<div class="property-label"><label for="${field.path.join(".")}">${escapeHtml(field.label)}</label><small>${inherited ? `继承自 ${escapeHtml(effective.source)}` : " "}</small></div>`;
+  const control = document.createElement("div");
+  control.className = "property-control";
+  const input = makeStyleInput(field, entry);
+  control.append(input);
+  row.append(control);
+  const reset = document.createElement("button");
+  reset.className = "reset-property";
+  reset.type = "button";
+  reset.disabled = explicit === undefined;
+  reset.textContent = "↺";
+  reset.title = "恢复继承值";
+  reset.addEventListener("click", () => {
+    deepDelete(entry, field.path);
+    renderStyleEditor();
+    updateProof();
+    updateView();
+  });
+  row.append(reset);
+  return row;
+}
+
+function makeStyleInput(field, entry) {
   let input;
-  if (fieldSchema.type === "boolean") {
+  const value = deepGet(entry, field.path);
+  if (field.type === "boolean") {
     const wrapper = document.createElement("label");
-    wrapper.className = "switch";
-    wrapper.innerHTML = `<input id="${path}" type="checkbox" ${getPath(currentConfig, path) ? "checked" : ""}><span class="switch-track"></span>`;
-    input = wrapper.querySelector("input");
-    if (path === "normalizeHeadings.enabled" && currentConfig.numberHeadings.enabled) {
-      input.disabled = true;
-      input.title = "标题编号开启时无法关闭";
+    wrapper.className = "check-control";
+    input = document.createElement("input");
+    input.type = "checkbox";
+    input.checked = value ?? false;
+    input.addEventListener("change", () => {
+      deepSet(entry, field.path, input.checked);
+      renderStyleEditor();
+      updateProof();
+      updateView();
+    });
+    wrapper.append(
+      input,
+      field.mirror
+        ? document.createTextNode("同步到等宽字号")
+        : document.createTextNode(field.label),
+    );
+    return wrapper;
+  }
+  if (field.type === "color") {
+    const wrapper = document.createElement("div");
+    wrapper.className = "color-control";
+    input = document.createElement("input");
+    input.type = "color";
+    input.value = normalizeColor(value);
+    const text = document.createElement("input");
+    text.type = "text";
+    text.value = value ?? "";
+    text.placeholder = "无";
+    const apply = () => {
+      deepSet(entry, field.path, text.value.toUpperCase());
+      renderStyleEditor();
+      updateProof();
+      updateView();
+    };
+    input.addEventListener("input", () => {
+      text.value = input.value.slice(1);
+      apply();
+    });
+    text.addEventListener("change", apply);
+    wrapper.append(input, text);
+    return wrapper;
+  }
+  if (field.type === "select") {
+    input = document.createElement("select");
+    for (const [val, label] of field.options) {
+      const opt = document.createElement("option");
+      opt.value = val;
+      opt.textContent = label;
+      if (value === val || (!value && val === field.default)) opt.selected = true;
+      input.append(opt);
     }
-    field.append(wrapper);
-  } else if (fieldSchema.enum) {
+    input.addEventListener("change", () => {
+      deepSet(entry, field.path, input.value || undefined);
+      renderStyleEditor();
+      updateProof();
+      updateView();
+    });
+    return input;
+  }
+  if (field.type === "select-number") {
     input = document.createElement("select");
-    input.id = path;
-    for (const value of fieldSchema.enum) {
-      const option = document.createElement("option");
-      option.value = value;
-      option.textContent = fieldSchema.enumDescriptions?.[value] ?? value;
-      option.selected = value === getPath(currentConfig, path);
-      input.append(option);
+    for (const [val, label] of field.options) {
+      const opt = document.createElement("option");
+      opt.value = val;
+      opt.textContent = label;
+      if (value == val) opt.selected = true;
+      input.append(opt);
     }
-    field.append(input);
-  } else {
+    const customOpt = document.createElement("option");
+    customOpt.value = "custom";
+    customOpt.textContent = "自定义";
+    input.append(customOpt);
+    input.addEventListener("change", () => {
+      if (input.value !== "custom") deepSet(entry, field.path, Number(input.value));
+      renderStyleEditor();
+      updateProof();
+      updateView();
+    });
+    // Show custom input if current value not in options
+    const inOptions = field.options.some(([v]) => v == value);
+    if (value !== undefined && !inOptions) {
+      const wrapper = document.createElement("div");
+      wrapper.className = "unit-control";
+      wrapper.append(input);
+      const customInput = document.createElement("input");
+      customInput.type = "number";
+      customInput.value = value;
+      customInput.step = field.step ?? 1;
+      customInput.addEventListener("change", () => {
+        deepSet(entry, field.path, Number(customInput.value));
+        renderStyleEditor();
+        updateProof();
+        updateView();
+      });
+      wrapper.append(customInput);
+      if (field.unit) {
+        const unit = document.createElement("span");
+        unit.textContent = field.unit;
+        wrapper.append(unit);
+      }
+      return wrapper;
+    }
+    return input;
+  }
+  if (field.unit) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "unit-control";
     input = document.createElement("input");
-    input.id = path;
-    input.type =
-      fieldSchema.type === "integer" || fieldSchema.type === "number" ? "number" : "text";
-    input.value = getPath(currentConfig, path) ?? "";
-    if (fieldSchema.minimum !== undefined) input.min = fieldSchema.minimum;
-    if (fieldSchema.type === "integer") input.step = "1";
-    field.append(input);
-  }
-
-  input.addEventListener("input", () => {
-    const value =
-      fieldSchema.type === "boolean"
-        ? input.checked
-        : fieldSchema.type === "integer"
-          ? Number.parseInt(input.value, 10)
-          : fieldSchema.type === "number"
-            ? Number(input.value)
-            : input.value;
-    setPath(currentConfig, path, value);
-    if (path === "numberHeadings.enabled") {
-      enforceHeadingDependency(currentConfig);
-      syncHeadingDependencyControls();
+    input.type = "number";
+    input.min = field.min;
+    input.step = field.step ?? 1;
+    input.placeholder = "无";
+    const raw = value !== undefined ? value / field.scale : "";
+    // Preserve decimals for small values
+    input.value = field.scale === 100 && raw === 0 ? "0" : raw === "" ? "" : String(raw);
+    const apply = () => {
+      const v = input.value === "" ? undefined : Math.round(Number(input.value) * field.scale);
+      deepSet(entry, field.path, v);
+      updateProof();
+      updateView();
+    };
+    input.addEventListener("change", apply);
+    wrapper.append(input);
+    if (field.unit) {
+      const unit = document.createElement("span");
+      unit.textContent = field.unit;
+      wrapper.append(unit);
     }
+    return wrapper;
+  }
+  input = document.createElement("input");
+  input.type = "text";
+  input.value = value ?? "";
+  input.placeholder = "继承";
+  input.addEventListener("change", () => {
+    deepSet(entry, field.path, input.value || undefined);
+    renderStyleEditor();
+    updateProof();
     updateView();
   });
-  return field;
+  return input;
+}
+
+function createTableFields() {
+  const fieldset = document.createElement("div");
+  const entry = selectedEntry();
+  if (!entry) return fieldset;
+
+  const definitions = [
+    { label: "中文字体", path: ["run", "font", "eastAsia"], type: "text" },
+    {
+      label: "西文字体",
+      path: ["run", "font", "ascii"],
+      type: "text",
+      mirror: ["run", "font", "hAnsi"],
+    },
+    {
+      label: "字号",
+      path: ["run", "size"],
+      type: "number",
+      unit: "pt",
+      scale: 2,
+      min: 1,
+      step: 0.5,
+      mirror: ["run", "sizeComplexScript"],
+    },
+    {
+      label: "表格对齐",
+      path: ["table", "alignment"],
+      type: "select",
+      options: [
+        ["left", "左对齐"],
+        ["center", "居中"],
+        ["right", "右对齐"],
+      ],
+    },
+    {
+      label: "表格字号",
+      path: ["run", "size"],
+      type: "number",
+      unit: "pt",
+      scale: 2,
+      min: 1,
+      step: 0.5,
+      mirror: ["run", "sizeComplexScript"],
+    },
+    {
+      label: "上边距",
+      path: ["table", "cellMargin", "top"],
+      type: "number",
+      unit: "pt",
+      scale: 20,
+      min: 0,
+      step: 1,
+      default: 0,
+    },
+    {
+      label: "下边距",
+      path: ["table", "cellMargin", "bottom"],
+      type: "number",
+      unit: "pt",
+      scale: 20,
+      min: 0,
+      step: 1,
+      default: 0,
+    },
+    {
+      label: "左边距",
+      path: ["table", "cellMargin", "left"],
+      type: "number",
+      unit: "pt",
+      scale: 20,
+      min: 0,
+      step: 1,
+      default: 0,
+    },
+    {
+      label: "右边距",
+      path: ["table", "cellMargin", "right"],
+      type: "number",
+      unit: "pt",
+      scale: 20,
+      min: 0,
+      step: 1,
+      default: 0,
+    },
+  ];
+  for (const def of definitions) {
+    const field = createStyleField(def, entry);
+    if (field) fieldset.append(field);
+  }
+  return fieldset;
 }
 
-form.addEventListener("submit", async (event) => {
+function createPropertyGroup(section, fields, entry) {
+  if (!fields.length) return null;
+  const fieldset = document.createElement("fieldset");
+  fieldset.className = "property-group";
+  fieldset.innerHTML = `<legend>${escapeHtml(section)}</legend><p class="group-note">${escapeHtml(propertySectionDescriptions[section] ?? "")}</p>`;
+  for (const field of fields) fieldset.append(createStyleField(field, entry));
+  return fieldset;
+}
+
+// Event listeners
+resetButton.addEventListener("click", () => {
+  if (activeView === "config") {
+    currentConfig = structuredClone(originalConfig);
+    renderConfigForm();
+  } else {
+    currentStyles = structuredClone(originalStyles);
+    renderStyleIndex();
+    selectFirstStyle();
+    updateProof();
+  }
+  updateView();
+});
+
+saveButton.addEventListener("click", async (event) => {
+  if (activeView === "styles") {
+    event.preventDefault();
+    setBusy(true, "正在验证样式并重建 Word 模板…");
+    try {
+      const result = await apiFetch("/api/styles", {
+        styles: currentStyles,
+        revision: styleRevision,
+      });
+      originalStyles = structuredClone(currentStyles);
+      styleRevision = result.revision;
+      setStatus("文档样式已保存，Word 模板已重建");
+    } catch (error) {
+      setStatus(error.message, true);
+    } finally {
+      setBusy(false);
+      updateView();
+    }
+  }
+});
+
+document.querySelector("#config-form")?.addEventListener("submit", async (event) => {
   event.preventDefault();
-  saveButton.disabled = true;
-  setStatus("正在保存配置…");
+  setBusy(true, "正在保存转换配置…");
   try {
-    const response = await fetch("/api/config", {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(currentConfig),
-    });
-    const result = await response.json();
-    if (!response.ok) throw new Error(result.error ?? "保存失败");
+    await apiFetch("/api/config", currentConfig);
     originalConfig = structuredClone(currentConfig);
-    updateView();
-    setStatus("默认配置已保存");
+    setStatus("转换配置已保存");
   } catch (error) {
     setStatus(error.message, true);
-    saveButton.disabled = false;
+  } finally {
+    setBusy(false);
+    updateView();
   }
 });
 
-resetButton.addEventListener("click", () => {
-  currentConfig = structuredClone(originalConfig);
-  renderForm();
-  updateView();
+previewButton.addEventListener("click", async () => {
+  setBusy(true, "正在生成真实 DOCX 校样…");
+  try {
+    const response = await fetch("/api/styles/preview", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ styles: currentStyles }),
+    });
+    if (!response.ok) {
+      const result = await response.json().catch(() => ({}));
+      throw new Error(result.error ?? "预览生成失败");
+    }
+    const url = URL.createObjectURL(await response.blob());
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "md2docx-style-preview.docx";
+    link.click();
+    URL.revokeObjectURL(url);
+    setStatus("真实 DOCX 校样已生成");
+  } catch (error) {
+    setStatus(error.message, true);
+  } finally {
+    setBusy(false);
+    updateView();
+  }
 });
 
 function updateView() {
-  const changes = countChanges(originalConfig, currentConfig);
-  saveButton.disabled = changes === 0;
-  resetButton.disabled = changes === 0;
-  if (changes) setStatus("有尚未保存的修改");
-  else if (status.textContent !== "默认配置已保存") setStatus("配置尚未修改");
-}
-
-function countChanges(before, after) {
-  return Object.keys(schema.properties).reduce(
-    (total, group) =>
-      total +
-      Object.keys(schema.properties[group].properties).filter(
-        (name) => before[group][name] !== after[group][name],
-      ).length,
-    0,
+  if (!originalConfig || !originalStyles) return;
+  const changed =
+    activeView === "config"
+      ? JSON.stringify(originalConfig) !== JSON.stringify(currentConfig)
+      : JSON.stringify(originalStyles) !== JSON.stringify(currentStyles);
+  saveButton.disabled = !changed;
+  resetButton.disabled = !changed;
+  if (changed)
+    setStatus(activeView === "config" ? "转换配置有尚未保存的修改" : "文档样式有尚未保存的修改");
+  else if (!status.textContent.includes("已保存") && !status.textContent.includes("已生成"))
+    setStatus(activeView === "config" ? "转换配置尚未修改" : "文档样式尚未修改");
+}
+
+function updateProof() {
+  if (!currentStyles) return;
+  document
+    .querySelectorAll("[data-proof]")
+    .forEach((node) => applyProofStyle(node, node.dataset.proof));
+}
+
+function applyProofStyle(node, name) {
+  const style = findStyleAny(name);
+  if (!style) return;
+  const font =
+    effectiveValue(style, ["run", "font", "eastAsia"]).value ??
+    effectiveValue(style, ["run", "font", "ascii"]).value;
+  const size = effectiveValue(style, ["run", "size"]).value;
+  const color = effectiveValue(style, ["run", "color"]).value;
+  const bold = effectiveValue(style, ["run", "bold"]).value;
+  const italics = effectiveValue(style, ["run", "italics"]).value;
+  const align = effectiveValue(style, ["paragraph", "alignment"]).value;
+  const line = effectiveValue(style, ["paragraph", "spacing", "line"]).value;
+  const before = effectiveValue(style, ["paragraph", "spacing", "before"]).value;
+  const after = effectiveValue(style, ["paragraph", "spacing", "after"]).value;
+  const indent = effectiveValue(style, ["paragraph", "indent", "firstLineChars"]).value;
+  node.style.fontFamily = font ? `"${font}", serif` : "";
+  node.style.fontSize = size ? `${size / 2}pt` : "";
+  node.style.color = color && color !== "auto" ? `#${color}` : "";
+  node.style.fontWeight = bold ? "700" : "400";
+  node.style.fontStyle = italics ? "italic" : "normal";
+  node.style.textAlign = align === "both" ? "justify" : (align ?? "");
+  node.style.lineHeight = line ? String(line / 240) : "";
+  node.style.marginTop = before !== undefined ? `${before / 20}pt` : "";
+  node.style.marginBottom = after !== undefined ? `${after / 20}pt` : "";
+  node.style.textIndent = indent ? `${indent / 100}em` : "";
+}
+
+function selectedEntry() {
+  if (selectedStyle.kind === "default") return currentStyles.default?.document;
+  if (selectedStyle.kind === "style")
+    return collectionEntries(selectedStyle.collection).find(
+      (entry) => entry.id === selectedStyle.id,
+    );
+  return null;
+}
+
+function findStyleAny(name) {
+  return ["paragraphStyles", "characterStyles", "tableStyles"]
+    .flatMap(collectionEntries)
+    .find((entry) => entry.name === name);
+}
+function collectionEntries(collection) {
+  return Array.isArray(currentStyles?.[collection]) ? currentStyles[collection] : [];
+}
+function styleNameById(id) {
+  return (
+    ["paragraphStyles", "characterStyles", "tableStyles"]
+      .flatMap(collectionEntries)
+      .find((entry) => entry.id === id)?.name ?? id
   );
 }
 
-function getPath(source, path) {
-  return path.split(".").reduce((value, key) => value?.[key], source);
+function effectiveValue(entry, path, visited = new Set()) {
+  const explicit = deepGet(entry, path);
+  if (explicit !== undefined)
+    return { value: explicit, source: displayStyleName(entry.name ?? "文档默认") };
+  if (entry.basedOn && !visited.has(entry.basedOn)) {
+    visited.add(entry.basedOn);
+    const parent = ["paragraphStyles", "characterStyles", "tableStyles"]
+      .flatMap(collectionEntries)
+      .find((candidate) => candidate.id === entry.basedOn);
+    if (parent) {
+      const inherited = effectiveValue(parent, path, visited);
+      if (inherited.value !== undefined) return inherited;
+    }
+  }
+  const fallback = deepGet(currentStyles.default?.document, path);
+  return { value: fallback, source: "文档默认" };
+}
+
+function displayStyleName(name) {
+  const labels = {
+    "heading 1": "一级标题",
+    "heading 2": "二级标题",
+    "heading 3": "三级标题",
+    "heading 4": "四级标题",
+    "heading 5": "五级标题",
+    "heading 6": "六级标题",
+    "TOC Heading": "目录标题",
+    "Body Text": "正文",
+    "First Paragraph": "首段正文",
+    "Block Text": "块引用",
+    "Source Code": "代码块",
+    "Inline Code": "行内代码",
+    "Table Caption": "表格题注",
+    "Image Caption": "图片题注",
+    "Captioned Figure": "带题注图片",
+    "footnote text": "脚注正文",
+    "footnote reference": "脚注引用",
+    header: "页眉",
+    footer: "页脚",
+    caption: "通用题注",
+  };
+  return labels[name] ?? name;
+}
+
+function deepGet(source, path) {
+  return path.reduce((value, key) => value?.[key], source);
 }
-function setPath(source, path, value) {
-  const [group, name] = path.split(".");
-  source[group][name] = value;
+function deepSet(source, path, value) {
+  let current = source;
+  for (const key of path.slice(0, -1)) {
+    if (!current[key] || typeof current[key] !== "object") current[key] = {};
+    current = current[key];
+  }
+  current[path.at(-1)] = value;
+}
+function deepDelete(source, path) {
+  const parents = [source];
+  let current = source;
+  for (const key of path.slice(0, -1)) {
+    current = current?.[key];
+    if (!current) return;
+    parents.push(current);
+  }
+  delete current[path.at(-1)];
+  for (let index = path.length - 2; index >= 0; index--) {
+    const parent = parents[index];
+    const key = path[index];
+    if (parent[key] && Object.keys(parent[key]).length === 0) delete parent[key];
+    else break;
+  }
+}
+function normalizeColor(value) {
+  return typeof value === "string" && /^[0-9a-f]{6}$/i.test(value) ? `#${value}` : "#202B3C";
 }
 function enforceHeadingDependency(config) {
   if (config.numberHeadings.enabled) config.normalizeHeadings.enabled = true;
 }
 function syncHeadingDependencyControls() {
-  const normalizeInput = document.getElementById("normalizeHeadings.enabled");
-  normalizeInput.checked = currentConfig.normalizeHeadings.enabled;
-  normalizeInput.disabled = currentConfig.numberHeadings.enabled;
-  normalizeInput.title = currentConfig.numberHeadings.enabled ? "标题编号开启时无法关闭" : "";
+  const input = document.getElementById("normalizeHeadings.enabled");
+  input.checked = currentConfig.normalizeHeadings.enabled;
+  input.disabled = currentConfig.numberHeadings.enabled;
+  input.title = currentConfig.numberHeadings.enabled ? "标题编号开启时无法关闭" : "";
+}
+function setBusy(busy, message) {
+  saveButton.disabled = busy;
+  resetButton.disabled = busy;
+  previewButton.disabled = busy;
+  if (message) setStatus(message);
 }
 function setStatus(message, error = false) {
   status.textContent = message;
-  status.classList.toggle("error", error);
+  status.classList.toggle("error-copy", error);
+  statusIndicator.classList.toggle("error", error);
 }
 function escapeHtml(value) {
   const node = document.createElement("span");