@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/UIFilePreview/WordEditor/index.tsx

@@ -0,0 +1,3933 @@
+import { useCallback, useRef, useEffect, useState, useMemo, forwardRef, useImperativeHandle } from 'react';
+import { createPortal } from 'react-dom';
+import { Modal, Button, Space, message, Popconfirm, Tag, Select, InputNumber } from 'antd';
+import { SaveOutlined, FileWordFilled, UploadOutlined, CloseOutlined, CloudServerOutlined, CloudOutlined, FormatPainterOutlined, FileMarkdownOutlined, AlignLeftOutlined, SnippetsOutlined, DownOutlined } from '@ant-design/icons';
+import { DocxEditor, type DocxEditorRef } from '@eigenpal/docx-editor-react';
+import { PluginHost, type PluginHostRef, type ReactEditorPlugin } from '@eigenpal/docx-editor-react/plugin-api';
+import type { Document as DocxDocument, Style } from '@eigenpal/docx-editor-core';
+import { setGoogleFontsEnabled } from '@eigenpal/docx-editor-core';
+import {
+  applyStyle,
+  getStyleId,
+  getDocumentStyleResolver,
+  extractSelectionState,
+  setAlignment,
+  setIndentLeft,
+  setIndentRight,
+  setIndentFirstLine,
+  setLineSpacing,
+  getParagraphAlignment,
+} from '@eigenpal/docx-editor-core/prosemirror';
+import { setSpaceBefore, setSpaceAfter } from '@eigenpal/docx-editor-core/prosemirror/commands/paragraph';
+import { insertPageBreak } from '@eigenpal/docx-editor-core/prosemirror/commands/pageBreak';
+import { parseDocx } from '@eigenpal/docx-editor-core/docx';
+import JSZip from 'jszip';
+import { zhCN } from '@eigenpal/docx-editor-i18n/zh-CN';
+import '@eigenpal/docx-editor-react/styles.css';
+import './word-editor.css';
+import { saveFile, loadFile, deleteFile } from '../IndexedDBUtils';
+import { exportWordPdf } from '../filetypes/wordExportPdf';
+import { exportWordMarkdown } from '../filetypes/wordExportMarkdown';
+import { ExportDropdown } from '../ExportDropdown';
+import { CacheUserInfo } from '../../../utils/CacheUserInfo';
+import {
+  createDocumentWithStyles,
+  applyPresetStylesToDocument,
+  applyDocGridLineSpacing,
+  applyCjkFontFallbackToDocument,
+  CUSTOM_FONT_FAMILIES,
+  mergePresetStylesIntoStylesXml,
+  ensureInlineSpacingInDocumentXml,
+  ensureHongTouSeparatorBorderInDocumentXml,
+  PRESET_STYLES, // ← 新增：导出预设样式集合，用于自定义样式选择器下拉 options
+  normalizeStyleName, // ← 新增：样式名强归一化，用于下拉框按 name 去重（标题1/Heading1/标题１都算同一个）
+} from './style';
+import uiConfirm from '../../UIConfirm';
+import { useEffectResize } from '../../../utils/htmlUtils';
+import type { Mark, Node } from 'prosemirror-model';
+import type { EditorView } from 'prosemirror-view';
+import { TextSelection, type EditorState } from 'prosemirror-state';
+import { keymap } from 'prosemirror-keymap';
+import { splitBlockAs } from 'prosemirror-commands';
+import { isSuggestionModeActive } from '@eigenpal/docx-editor-core/prosemirror/plugins';
+
+const DOCX_MIME_TYPE = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+const REVISION_CONTENT_XML_PATTERN = /^word\/(?:document|header\d+|footer\d+|footnotes|endnotes)\.xml$/;
+
+/**
+ * 从已解析的文档模型里直接提取可见段落样式（文件自带的 + 预设的）。
+ *
+ * 为什么不只依赖 DocxEditor 内部的 StyleResolver：
+ * StyleResolver 存在 ProseMirror 插件里，只能在编辑器就绪后通过 state 读取，
+ * 且依赖 onSelectionChange 触发同步。若插件未挂载 / 选区事件未触发，
+ * 下拉框就只剩 PRESET_STYLES，用户会觉得"docx 自带的样式不见了"。
+ * 这里在打开文件时直接从 parseDocx 的结果里取，保证一定有值。
+ */
+function extractParagraphStyles(doc: DocxDocument | null | undefined): Style[] {
+  const all = doc?.package?.styles?.styles ?? [];
+  return all.filter(s => s.type === 'paragraph' && !s.hidden && !s.semiHidden);
+}
+
+// 保存时「不可变 part 白名单」：正文编辑永远不会改动这些 part。
+// 与 DRAWING GUARD 配合使用：打开文件时将这些 part 做字节级快照，保存时把 lib serializer
+// 输出的对应 part 用快照覆盖回去，100% 保证页脚签章/水印 drawing 字节与原始文件一致，
+// 彻底绕开 lib serializer 把 footer drawing 序列化错误的 bug（导致保存重进出现
+// <img src="" width=192 height=192 style=position:absolute> 空占位图）。
+const IMMUTABLE_PART_REGEXES = [
+  // 页眉/页脚主 XML：word/header1.xml / word/footer2.xml
+  /^word\/header\d*\.xml$/i,
+  /^word\/footer\d*\.xml$/i,
+  // 页眉/页脚对应的 rels：word/_rels/header1.xml.rels / word/_rels/footer2.xml.rels
+  // （rels 里存了 drawing 的 r:embed → Target 映射，必须和主 XML 一起镜像，否则 rId 错配）
+  /^word\/_rels\/header\d*\.xml\.rels$/i,
+  /^word\/_rels\/footer\d*\.xml\.rels$/i,
+  // 媒体/嵌入物/图表/SmartArt
+  /^word\/media\//i,
+  /^word\/embeddings\//i,
+  /^word\/charts\//i,
+  /^word\/diagrams\//i,
+  // 主题色/字体主题（编辑器不提供主题设置功能，主题通常不变）
+  /^word\/theme\/theme\d+\.xml$/i,
+];
+function isImmutablePart(path: string): boolean {
+  return IMMUTABLE_PART_REGEXES.some((re) => re.test(path));
+}
+
+// 快捷键映射：Ctrl/Cmd + Alt + key → styleId
+const STYLE_SHORTCUT_MAP: Record<string, string> = {
+  '1': 'Heading1',
+  '2': 'Heading2',
+  '3': 'Heading3',
+  '4': 'Heading4',
+  '9': 'Title',
+  '0': 'Normal',
+};
+
+// 格式刷不应复制/清除的语义 marks：批注(comment) 与修订增删(insertion/deletion)
+const SEMANTIC_MARK_DENYLIST = new Set(['comment', 'insertion', 'deletion']);
+
+// 格式刷图标：使用 antd 内置的 FormatPainterOutlined，风格与工具栏其他按钮一致
+const FormatPainterIcon = FormatPainterOutlined;
+
+/**
+ * 将源格式 marks 以"替换式"应用到范围 [from,to]：
+ * schema 中每个格式 mark 按"源有则添加、源无且目标有则移除"的规则处理；
+ * 语义 marks(comment/insertion/deletion) 始终保留不动。
+ * 最后同步 storedMarks，让应用后继续输入也会继承这些 marks。
+ */
+const applySourceMarks = (view: EditorView, from: number, to: number, sourceMarks: Mark[]) => {
+  const schema = view.state.schema;
+  const sourceMap = new Map(sourceMarks.map((m) => [m.type.name, m]));
+  let tr = view.state.tr;
+  let changed = false;
+  for (const name of Object.keys(schema.marks)) {
+    if (SEMANTIC_MARK_DENYLIST.has(name)) continue;
+    const markType = schema.marks[name];
+    const src = sourceMap.get(name);
+    if (src) {
+      tr = tr.addMark(from, to, src);
+      changed = true;
+    } else if (view.state.doc.rangeHasMark(from, to, markType)) {
+      tr = tr.removeMark(from, to, markType);
+      changed = true;
+    }
+  }
+  if (!changed) return;
+  const keepSemantic = (view.state.storedMarks ?? []).filter((m) => SEMANTIC_MARK_DENYLIST.has(m.type.name));
+  tr = tr.setStoredMarks([...sourceMarks, ...keepSemantic]);
+  view.dispatch(tr.setMeta('addToHistory', true));
+  view.focus();
+};
+
+interface FormatPainterApi {
+  active: boolean;
+  toggle: () => void;
+}
+
+/**
+ * 格式刷：
+ * 1) 用户先在文档中选中带格式的文本，点击按钮 → 复制选区字符格式并进入待命态；
+ * 2) 待命态下选中文本，松手（pointerup）后才应用一次并退出（避免拖选过程中连续触发）；
+ * 3) 再次点击按钮或 Esc 取消待命。
+ *
+ * 关键：用 window 的 pointerup 而非 onSelectionChange 触发应用——
+ * onSelectionChange 在拖选过程中会随选区变化连续触发，导致只有前几个字符被刷上格式。
+ */
+const useFormatPainter = (getView: () => EditorView | null): FormatPainterApi => {
+  const [active, setActive] = useState(false);
+  const sourceMarksRef = useRef<Mark[]>([]);
+  const sourceRangeRef = useRef<{ from: number; to: number } | null>(null);
+  const getViewRef = useRef(getView);
+  getViewRef.current = getView;
+
+  const collectFormatMarks = (view: EditorView): Mark[] => {
+    const { selection, storedMarks } = view.state;
+    const baseMarks = selection.empty
+      ? (storedMarks ?? selection.$from.marks())
+      : unionMarksAcrossRange(view, selection.from, selection.to);
+    return baseMarks.filter((m) => !SEMANTIC_MARK_DENYLIST.has(m.type.name));
+  };
+
+  const arm = useCallback(() => {
+    const view = getViewRef.current();
+    if (!view) {
+      message.warning('编辑器尚未就绪，请稍后再试');
+      return;
+    }
+    view.focus();
+    const marks = collectFormatMarks(view);
+    if (marks.length === 0) {
+      message.warning('当前选区没有可复制的字符格式，请选中带格式的文本后再试');
+      return;
+    }
+    const { selection } = view.state;
+    sourceMarksRef.current = marks;
+    sourceRangeRef.current = { from: selection.from, to: selection.to };
+    setActive(true);
+    message.success(`已复制 ${marks.length} 项字符格式，请选中文本应用`);
+  }, []);
+
+  const toggle = useCallback(() => {
+    if (active) {
+      setActive(false);
+      sourceMarksRef.current = [];
+      sourceRangeRef.current = null;
+      return;
+    }
+    arm();
+  }, [active, arm]);
+
+  // 待命态：监听 window pointerup，松手后等 ProseMirror 处理完选区再读取最终选区并应用
+  useEffect(() => {
+    if (!active) return;
+    const onPointerUp = () => {
+      requestAnimationFrame(() => {
+        const view = getViewRef.current();
+        if (!view) return;
+        const { selection } = view.state;
+        if (selection.empty) return; // 仅点击未形成选区，继续待命
+        const src = sourceRangeRef.current;
+        if (src && selection.from === src.from && selection.to === src.to) return; // 仍是源选区
+        applySourceMarks(view, selection.from, selection.to, sourceMarksRef.current);
+        setActive(false);
+        sourceMarksRef.current = [];
+        sourceRangeRef.current = null;
+      });
+    };
+    window.addEventListener('pointerup', onPointerUp);
+    return () => window.removeEventListener('pointerup', onPointerUp);
+  }, [active]);
+
+  // Esc 取消待命态
+  useEffect(() => {
+    if (!active) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setActive(false);
+        sourceMarksRef.current = [];
+        sourceRangeRef.current = null;
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [active]);
+
+  return { active, toggle };
+};
+
+/** 扫描 [from,to] 范围内所有节点携带的 marks，做并集返回（保留每项首次出现的实例） */
+const unionMarksAcrossRange = (view: EditorView, from: number, to: number): Mark[] => {
+  const seen = new Set<string>();
+  const out: Mark[] = [];
+  view.state.doc.nodesBetween(from, to, (_node, _pos, parent, index) => {
+    if (parent == null || index == null) return true;
+    const node = parent.child(index);
+    if (!node || !node.isText) return true;
+    for (const m of node.marks) {
+      const key = `${m.type.name}:${JSON.stringify(m.attrs)}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      out.push(m);
+    }
+    return true;
+  });
+  // 空选区或无 marks 时，回退到 $from.marks()
+  if (out.length === 0) return [...view.state.selection.$from.marks()];
+  return out;
+};
+
+const decodeXmlAttribute = (value: string) =>
+  value
+    .replace(/&amp;/g, '&')
+    .replace(/&quot;/g, '"')
+    .replace(/&apos;/g, "'")
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>');
+
+const getXmlAttribute = (xmlTag: string, attributeName: string) => {
+  const match = xmlTag.match(new RegExp(`\\b${attributeName}="([^"]*)"`));
+  return match ? decodeXmlAttribute(match[1]) : '';
+};
+
+const normalizeZipPath = (path: string) => {
+  const parts: string[] = [];
+  path.replace(/\\/g, '/').split('/').forEach((part) => {
+    if (!part || part === '.') return;
+    if (part === '..') {
+      parts.pop();
+      return;
+    }
+    parts.push(part);
+  });
+  return parts.join('/');
+};
+
+const getRelationshipOwnerDir = (relsPath: string) => {
+  const normalizedPath = normalizeZipPath(relsPath);
+  const match = normalizedPath.match(/^(.*)\/_rels\/([^/]+)\.rels$/);
+  if (!match) return '';
+
+  const ownerPath = normalizeZipPath(`${match[1]}/${match[2]}`);
+  const lastSlashIndex = ownerPath.lastIndexOf('/');
+  return lastSlashIndex >= 0 ? ownerPath.slice(0, lastSlashIndex) : '';
+};
+
+const resolveRelationshipTarget = (relsPath: string, target: string) => {
+  const decodedTarget = decodeXmlAttribute(target).split('#')[0].split('?')[0];
+  if (!decodedTarget || /^[a-z][a-z\d+\-.]*:/i.test(decodedTarget)) {
+    return '';
+  }
+
+  if (decodedTarget.startsWith('/')) {
+    return normalizeZipPath(decodedTarget.slice(1));
+  }
+
+  const ownerDir = getRelationshipOwnerDir(relsPath);
+  return normalizeZipPath(ownerDir ? `${ownerDir}/${decodedTarget}` : decodedTarget);
+};
+
+const getZipEntrySize = (file: JSZip.JSZipObject) => {
+  const internalData = (file as { _data?: { uncompressedSize?: number } })._data;
+  return internalData?.uncompressedSize ?? 0;
+};
+
+const getRelationshipOwnerPath = (relsPath: string) => {
+  const normalizedPath = normalizeZipPath(relsPath);
+  const match = normalizedPath.match(/^(.*)\/_rels\/([^/]+)\.rels$/);
+  if (!match) return '';
+
+  return normalizeZipPath(`${match[1]}/${match[2]}`);
+};
+
+const collectUsedRelationshipIds = (xml: string) => {
+  const usedIds = new Set<string>();
+  const relationshipIdRegExp = /(?:\b\w+:)?(?:embed|link|id)="([^"]+)"/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = relationshipIdRegExp.exec(xml))) {
+    usedIds.add(match[1]);
+  }
+
+  return usedIds;
+};
+
+const collectUsedMediaTargets = async (zip: JSZip) => {
+  const usedMediaTargets = new Set<string>();
+  const relationshipEntries = Object.values(zip.files).filter((file) => !file.dir && file.name.endsWith('.rels'));
+
+  await Promise.all(relationshipEntries.map(async (file) => {
+    const ownerPath = getRelationshipOwnerPath(file.name);
+    const ownerFile = ownerPath ? zip.file(ownerPath) : null;
+    if (!ownerFile) return;
+
+    const ownerXml = await ownerFile.async('text');
+    const usedRelationshipIds = collectUsedRelationshipIds(ownerXml);
+    if (usedRelationshipIds.size === 0) return;
+
+    const relsXml = await file.async('text');
+    const relationshipRegExp = /<Relationship\b[^>]*\/>/g;
+    let match: RegExpExecArray | null;
+
+    while ((match = relationshipRegExp.exec(relsXml))) {
+      const relationshipId = getXmlAttribute(match[0], 'Id');
+      const target = getXmlAttribute(match[0], 'Target');
+      const targetPath = resolveRelationshipTarget(file.name, target);
+      if (usedRelationshipIds.has(relationshipId) && targetPath.startsWith('word/media/')) {
+        usedMediaTargets.add(targetPath);
+      }
+    }
+  }));
+
+  return usedMediaTargets;
+};
+
+const pruneUnusedMediaRelationships = async (zip: JSZip, usedMediaTargets: Set<string>) => {
+  const relationshipEntries = Object.values(zip.files).filter((file) => !file.dir && file.name.endsWith('.rels'));
+  let removedCount = 0;
+
+  await Promise.all(relationshipEntries.map(async (file) => {
+    const relsXml = await file.async('text');
+    const nextXml = relsXml.replace(/<Relationship\b[^>]*\bTarget="([^"]+)"[^>]*\/>/g, (relationship, target) => {
+      const targetPath = resolveRelationshipTarget(file.name, target);
+      if (!targetPath.startsWith('word/media/') || usedMediaTargets.has(targetPath)) {
+        return relationship;
+      }
+
+      removedCount += 1;
+      return '';
+    });
+
+    if (removedCount > 0 && nextXml !== relsXml) {
+      zip.file(file.name, nextXml);
+    }
+  }));
+
+  return removedCount;
+};
+
+const removeRelationshipByTargetPrefix = async (zip: JSZip, relsPath: string, targetPrefix: string) => {
+  const relsFile = zip.file(relsPath);
+  if (!relsFile) return 0;
+
+  const relsXml = await relsFile.async('text');
+  let removedCount = 0;
+  const nextXml = relsXml.replace(/<Relationship\b[^>]*\bTarget="([^"]+)"[^>]*\/>/g, (relationship, target) => {
+    const targetPath = resolveRelationshipTarget(relsPath, target);
+    if (!targetPath.startsWith(targetPrefix)) return relationship;
+
+    removedCount += 1;
+    return '';
+  });
+
+  if (removedCount > 0) {
+    zip.file(relsPath, nextXml);
+  }
+
+  return removedCount;
+};
+
+const removeContentTypeOverridesByPrefix = async (zip: JSZip, partPrefix: string) => {
+  const contentTypesFile = zip.file('[Content_Types].xml');
+  if (!contentTypesFile) return 0;
+
+  const contentTypesXml = await contentTypesFile.async('text');
+  let removedCount = 0;
+  const nextXml = contentTypesXml.replace(/<Override\b[^>]*\bPartName="([^"]+)"[^>]*\/>/g, (override, partName) => {
+    const normalizedPartName = normalizeZipPath(decodeXmlAttribute(partName).replace(/^\//, ''));
+    if (!normalizedPartName.startsWith(partPrefix)) return override;
+
+    removedCount += 1;
+    return '';
+  });
+
+  if (removedCount > 0) {
+    zip.file('[Content_Types].xml', nextXml);
+  }
+
+  return removedCount;
+};
+
+const stripEmbeddedFonts = async (zip: JSZip) => {
+  const fontEntries = Object.values(zip.files).filter((file) => !file.dir && file.name.startsWith('word/fonts/'));
+  if (fontEntries.length === 0) {
+    return { removedCount: 0, removedSize: 0 };
+  }
+
+  let removedSize = 0;
+  fontEntries.forEach((file) => {
+    removedSize += getZipEntrySize(file);
+    zip.remove(file.name);
+  });
+
+  await removeRelationshipByTargetPrefix(zip, 'word/_rels/fontTable.xml.rels', 'word/fonts/');
+  await removeContentTypeOverridesByPrefix(zip, 'word/fonts/');
+
+  const fontTableFile = zip.file('word/fontTable.xml');
+  if (fontTableFile) {
+    const fontTableXml = await fontTableFile.async('text');
+    zip.file(
+      'word/fontTable.xml',
+      fontTableXml.replace(/<w:embed(?:Regular|Bold|Italic|BoldItalic)\b[^>]*\/>/g, '')
+    );
+  }
+
+  return { removedCount: fontEntries.length, removedSize };
+};
+
+const optimizeDocxBlob = async (blob: Blob): Promise<Blob> => {
+  try {
+    const zip = await JSZip.loadAsync(await blob.arrayBuffer());
+    const usedMediaTargets = await collectUsedMediaTargets(zip);
+    const mediaEntries = Object.values(zip.files).filter((file) => !file.dir && file.name.startsWith('word/media/'));
+    let removedCount = 0;
+    let removedSize = 0;
+
+    mediaEntries.forEach((file) => {
+      if (usedMediaTargets.has(file.name)) return;
+
+      removedCount += 1;
+      removedSize += getZipEntrySize(file);
+      zip.remove(file.name);
+    });
+
+    const removedMediaRelationships = await pruneUnusedMediaRelationships(zip, usedMediaTargets);
+    const strippedFonts = await stripEmbeddedFonts(zip);
+    removedCount += strippedFonts.removedCount;
+    removedSize += strippedFonts.removedSize;
+
+    if (removedCount === 0) {
+      console.log(`[Word优化] 未发现可清理资源，文件大小 ${(blob.size / 1024 / 1024).toFixed(2)}MB`);
+      return blob;
+    }
+
+    const optimizedBuffer = await zip.generateAsync({
+      type: 'arraybuffer',
+      compression: 'DEFLATE',
+      compressionOptions: { level: 9 },
+    });
+    const optimizedBlob = new Blob([optimizedBuffer], { type: DOCX_MIME_TYPE });
+
+    console.log(
+      `[Word优化] 清理未使用媒体 ${removedCount - strippedFonts.removedCount} 个、媒体关系 ${removedMediaRelationships} 个、` +
+      `嵌入字体 ${strippedFonts.removedCount} 个，约 ${(removedSize / 1024 / 1024).toFixed(2)}MB，` +
+      `文件大小 ${(blob.size / 1024 / 1024).toFixed(2)}MB -> ${(optimizedBlob.size / 1024 / 1024).toFixed(2)}MB`
+    );
+
+    return optimizedBlob;
+  } catch (error) {
+    console.warn('[Word优化] 清理未引用媒体失败，将使用原始导出文件', error);
+    return blob;
+  }
+};
+
+const downloadBlob = (blob: Blob, name: string) => {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = name;
+  link.dataset.optimizedDocxDownload = 'true';
+  link.style.display = 'none';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+};
+
+const parseXmlDocument = (xml: string) => {
+  const document = new DOMParser().parseFromString(xml, 'application/xml');
+  const parseError = document.getElementsByTagName('parsererror')[0];
+
+  if (parseError) {
+    throw new Error(parseError.textContent || 'XML 解析失败');
+  }
+
+  return document;
+};
+
+const getXmlElementsByLocalName = (document: globalThis.Document, tagNames: string[]) => {
+  const tagNameSet = new Set(tagNames);
+  return Array.from(document.getElementsByTagName('*')).filter((element) => tagNameSet.has(element.localName));
+};
+
+const removeXmlElementsByLocalName = (document: globalThis.Document, tagNames: string[]) => {
+  getXmlElementsByLocalName(document, tagNames).forEach((element) => {
+    element.parentNode?.removeChild(element);
+  });
+};
+
+const unwrapXmlElementsByLocalName = (document: globalThis.Document, tagNames: string[]) => {
+  getXmlElementsByLocalName(document, tagNames).forEach((element) => {
+    const parent = element.parentNode;
+    if (!parent) return;
+
+    while (element.firstChild) {
+      parent.insertBefore(element.firstChild, element);
+    }
+    parent.removeChild(element);
+  });
+};
+
+const serializeXmlDocument = (document: globalThis.Document) => new XMLSerializer().serializeToString(document);
+
+const stripRevisionMarkupFromXml = (xml: string) => {
+  const document = parseXmlDocument(xml);
+
+  // Accept inserted/moved-to content and reject deleted/moved-from content for a temporary final-view preview.
+  removeXmlElementsByLocalName(document, ['del', 'moveFrom']);
+  unwrapXmlElementsByLocalName(document, ['ins', 'moveTo']);
+  removeXmlElementsByLocalName(document, [
+    'pPrChange',
+    'rPrChange',
+    'tblPrChange',
+    'trPrChange',
+    'tcPrChange',
+    'sectPrChange',
+    'tblGridChange',
+    'cellIns',
+    'cellDel',
+    'cellMerge',
+  ]);
+
+  return serializeXmlDocument(document);
+};
+
+const stripRevisionSettingsFromXml = (xml: string) => {
+  const document = parseXmlDocument(xml);
+  removeXmlElementsByLocalName(document, ['trackRevisions', 'revisionView']);
+
+  return serializeXmlDocument(document);
+};
+
+const createFinalRevisionPreviewBlob = async (blob: Blob): Promise<Blob> => {
+  const zip = await JSZip.loadAsync(await blob.arrayBuffer());
+  const xmlEntries = Object.values(zip.files).filter((file) => !file.dir && REVISION_CONTENT_XML_PATTERN.test(file.name));
+
+  await Promise.all(xmlEntries.map(async (file) => {
+    const xml = await file.async('text');
+    zip.file(file.name, stripRevisionMarkupFromXml(xml));
+  }));
+
+  const settingsFile = zip.file('word/settings.xml');
+  if (settingsFile) {
+    const settingsXml = await settingsFile.async('text');
+    zip.file(
+      'word/settings.xml',
+      stripRevisionSettingsFromXml(settingsXml)
+    );
+  }
+
+  const buffer = await zip.generateAsync({
+    type: 'arraybuffer',
+    compression: 'DEFLATE',
+    compressionOptions: { level: 9 },
+  });
+
+  return new Blob([buffer], { type: DOCX_MIME_TYPE });
+};
+
+/**
+ * 修复 docx 中 TOC（目录）字段的显示问题。
+ *
+ * 问题根因：docx-editor-core 库的段落解析函数（U）不支持嵌套复杂字段。当遇到嵌套
+ * 字段的 begin 时，会重置外层字段的状态（指令、fieldCode、fieldResult 全部清空），
+ * 导致外层 TOC 字段和中间 HYPERLINK 字段的 fieldResult 丢失，只有最内层的 PAGEREF
+ * 字段（页码）被正确解析。最终 TOC 条目只显示页码，标题文本丢失。
+ *
+ * TOC 的典型嵌套结构：
+ *   TOC begin → TOC instrText → TOC separate
+ *     → HYPERLINK begin → HYPERLINK instrText → HYPERLINK separate
+ *       → "标题文本" → tab
+ *       → PAGEREF begin → PAGEREF instrText → PAGEREF separate → "页码" → PAGEREF end
+ *     → HYPERLINK end
+ *   → TOC end
+ *
+ * 修复方案：在加载 docx 前，预处理 XML，移除 TOC 字段范围（begin 到 end）内的所有
+ * fldChar 和 instrText 元素（包括 TOC 本身的和嵌套的 HYPERLINK、PAGEREF 等），只保留
+ * 内容元素（w:t、w:tab 等）。这样 TOC 条目的标题文本和页码就能作为普通文本正确显示。
+ * 同时处理 fldSimple 形式的 TOC，将其内部的 w:hyperlink 标签 unwrap。
+ */
+const fixTocFieldsInXml = (xml: string): string => {
+  const doc = parseXmlDocument(xml);
+
+  // 1. 处理 fldSimple 形式的 TOC：将内部的 w:hyperlink 标签 unwrap（替换为其内容）
+  const fldSimples = Array.from(doc.getElementsByTagName('*')).filter(
+    (el) => el.localName === 'fldSimple'
+  );
+  for (const fldSimple of fldSimples) {
+    const instr = fldSimple.getAttribute('w:instr') || fldSimple.getAttribute('instr') || '';
+    if (!instr.includes('TOC')) continue;
+
+    const hyperlinks = Array.from(fldSimple.getElementsByTagName('*')).filter(
+      (el) => el.localName === 'hyperlink'
+    );
+    for (const hyperlink of hyperlinks) {
+      const parent = hyperlink.parentNode;
+      if (!parent) continue;
+      while (hyperlink.firstChild) {
+        parent.insertBefore(hyperlink.firstChild, hyperlink);
+      }
+      parent.removeChild(hyperlink);
+    }
+  }
+
+  // 2. 处理 fldChar 形式的 TOC：移除 TOC 字段范围内的所有 fldChar 和 instrText
+  // 收集所有元素（getElementsByTagName 按文档顺序返回，Array.from 创建静态快照）
+  const allElements = Array.from(doc.getElementsByTagName('*'));
+
+  // 2a. 第一遍：用栈跟踪字段嵌套，找到所有 TOC 字段的 begin 和 end 元素
+  const fieldStack: Array<{ type: string; beginEl: Element }> = [];
+  const tocRanges: Array<{ beginIdx: number; endIdx: number }> = [];
+
+  for (let i = 0; i < allElements.length; i++) {
+    const el = allElements[i];
+    if (el.localName === 'fldChar') {
+      const charType = el.getAttribute('w:fldCharType') || el.getAttribute('fldCharType') || '';
+      if (charType === 'begin') {
+        fieldStack.push({ type: '', beginEl: el });
+      } else if (charType === 'end' && fieldStack.length > 0) {
+        const field = fieldStack.pop()!;
+        if (field.type === 'TOC') {
+          const beginIdx = allElements.indexOf(field.beginEl);
+          const endIdx = i;
+          if (beginIdx >= 0) {
+            tocRanges.push({ beginIdx, endIdx });
+          }
+        }
+      }
+    } else if (el.localName === 'instrText') {
+      const text = el.textContent || '';
+      if (fieldStack.length > 0 && !fieldStack[fieldStack.length - 1].type) {
+        const match = text.trim().match(/^\\?([A-Z][A-Z0-9]*)/i);
+        if (match) {
+          fieldStack[fieldStack.length - 1].type = match[1].toUpperCase();
+        }
+      }
+    }
+  }
+
+  // 2b. 第二遍：在每个 TOC 范围内，移除所有 fldChar 和 instrText 元素
+  const elementsToRemove: Element[] = [];
+  for (const range of tocRanges) {
+    for (let i = range.beginIdx; i <= range.endIdx; i++) {
+      const el = allElements[i];
+      if (el.localName === 'fldChar' || el.localName === 'instrText') {
+        elementsToRemove.push(el);
+      }
+    }
+  }
+  for (const el of elementsToRemove) {
+    const parent = el.parentNode;
+    if (parent) {
+      parent.removeChild(el);
+    }
+  }
+
+  // 3. 移除空的 run 元素（移除 fldChar/instrText 后只剩余 rPr 的 run）
+  const allRuns = Array.from(doc.getElementsByTagName('*')).filter((el) => el.localName === 'r');
+  for (const run of allRuns) {
+    const hasContent = Array.from(run.children).some((child) => child.localName !== 'rPr');
+    if (!hasContent) {
+      const parent = run.parentNode;
+      if (parent) {
+        parent.removeChild(run);
+      }
+    }
+  }
+
+  return serializeXmlDocument(doc);
+};
+
+const fixTocFieldsInDocx = async (blob: Blob): Promise<Blob> => {
+  const zip = await JSZip.loadAsync(await blob.arrayBuffer());
+  const xmlEntries = Object.values(zip.files).filter((file) => !file.dir && REVISION_CONTENT_XML_PATTERN.test(file.name));
+
+  await Promise.all(xmlEntries.map(async (file) => {
+    const xml = await file.async('text');
+    zip.file(file.name, fixTocFieldsInXml(xml));
+  }));
+
+  const buffer = await zip.generateAsync({
+    type: 'arraybuffer',
+    compression: 'DEFLATE',
+    compressionOptions: { level: 9 },
+  });
+
+  return new Blob([buffer], { type: DOCX_MIME_TYPE });
+};
+
+/**
+ * 将预设样式（含 spaceBefore/spaceAfter 等段间距）合并进 docx 的 styles.xml。
+ *
+ * 必须在 parseDocx 之前调用：解析器在解析阶段就会根据 styles.xml 解析样式继承，
+ * 把段间距等属性固化到段落模型中。repack / selective save 都不会改写 styles.xml，
+ * 因此这里修正后的 styles.xml 会被原样保留，保存后再次打开依然生效。
+ */
+const mergePresetStylesIntoDocx = async (blob: Blob): Promise<Blob> => {
+  const zip = await JSZip.loadAsync(await blob.arrayBuffer());
+
+  let modified = false;
+
+  // 1. 合并预设样式到 styles.xml（替换同 styleId 的样式定义）
+  const stylesFile = zip.file('word/styles.xml');
+  if (stylesFile) {
+    const stylesXml = await stylesFile.async('text');
+    const mergedXml = mergePresetStylesIntoStylesXml(stylesXml);
+    if (mergedXml !== stylesXml) {
+      zip.file('word/styles.xml', mergedXml);
+      modified = true;
+    }
+  }
+
+  // 2. 为 document.xml 中引用带间距样式的段落添加内联 <w:spacing> 标签。
+  //    styles.xml 中样式定义的间距是"继承"属性，布局引擎的 spacingExplicit 机制
+  //    会折叠未标记为显式的继承间距。内联 <w:spacing> 会被解析器标记为显式设置，
+  //    确保重载后 spaceBefore/spaceAfter 生效。
+  const docFile = zip.file('word/document.xml');
+  if (docFile) {
+    let docXml = await docFile.async('text');
+    let mergedDocXml = ensureInlineSpacingInDocumentXml(docXml);
+
+    // —— 3. WPS 兼容：为 styleId=HongTouSeparator 的段落强制内联 4 边 <w:pBdr>
+    //    WPS 2019/2021 部分版本不稳定读取 styles.xml 中 style 级继承的 pBdr，
+    //    只有直接写在 <w:p>/<w:pPr> 内联标签上的 <w:pBdr> 才显示红线。
+    //    因此这里做"解继承"，给每个红头分隔线段落都补一段标准 4 边 pBdr 标签。
+    mergedDocXml = ensureHongTouSeparatorBorderInDocumentXml(mergedDocXml);
+
+    if (mergedDocXml !== docXml) {
+      zip.file('word/document.xml', mergedDocXml);
+      modified = true;
+    }
+  }
+
+  if (modified) {
+    const buffer = await zip.generateAsync({
+      type: 'arraybuffer',
+      compression: 'DEFLATE',
+      compressionOptions: { level: 9 },
+    });
+    return new Blob([buffer], { type: DOCX_MIME_TYPE });
+  }
+
+  return blob;
+};
+
+
+interface WordEditorProps {
+  visible: boolean;
+  hiddenClose?: boolean; // 是否隐藏关闭按钮
+  isCreate?: boolean; // 是否为新建模式 
+  onClose: () => void;
+  fileName: string;
+  onUpload?: (initialBlob: Blob | undefined, blob: Blob, fileName: string) => Promise<void>;
+  initialBlob?: Blob;
+  readOnly?: boolean;
+  uploadPercent?: number;
+  // ---- 新增：本地文件 / 离线模式支持 ----
+  isOffline?: boolean;
+  isLocalOnly?: boolean;
+  hasUnsyncedChanges?: boolean;
+  onSaveLocalBlob?: (blob: Blob, fileName: string, markUnsynced?: boolean) => Promise<void>;
+}
+
+// docx 内部单位换算：1 厘米 = 567 twips，1 磅 = 20 twips（1 inch = 1440 twips）
+const TWIPS_PER_CM = 567;
+const TWIPS_PER_PT = 20;
+
+type ParagraphAlignmentValue = 'left' | 'center' | 'right' | 'both';
+type LineSpacingRuleValue = 'auto' | 'exact' | 'atLeast';
+
+/** 段落设置对话框的表单值（对外用厘米/磅/倍数，应用时再换算成 twips） */
+interface ParagraphDialogValues {
+  alignment: ParagraphAlignmentValue;
+  indentLeftCm: number;
+  indentRightCm: number;
+  indentSpecial: 'none' | 'firstLine' | 'hanging';
+  indentSpecialCm: number;
+  spaceBeforePt: number;
+  spaceAfterPt: number;
+  lineRule: LineSpacingRuleValue;
+  /** lineRule 为 auto 时是倍数（1 = 单倍行距），否则是磅值 */
+  lineValue: number;
+}
+
+const DEFAULT_PARAGRAPH_DIALOG_VALUES: ParagraphDialogValues = {
+  alignment: 'left',
+  indentLeftCm: 0,
+  indentRightCm: 0,
+  indentSpecial: 'none',
+  indentSpecialCm: 0,
+  spaceBeforePt: 0,
+  spaceAfterPt: 0,
+  lineRule: 'auto',
+  lineValue: 1,
+};
+
+// 回车换段时应沿用当前段落的格式（缩进、段前段后、行距、样式、编号）。
+// prosemirror 的 baseKeymap 用 splitBlock 新建段落时使用默认属性，段落的
+// 首行缩进因此会丢失；这里通过外部插件覆盖 Enter。
+// 不复制段落标识/修订/书签等「每个段落唯一」的属性，避免出现重复 id。
+const ENTER_IGNORED_ATTRS = new Set([
+  'paraId',
+  'textId',
+  'bookmarks',
+  'sectionBreakType',
+  'pPrIns',
+  'pPrDel',
+  'pPrChange',
+  'renderedPageBreakBefore',
+  '_originalFormatting',
+  '_originalRunBoundaries',
+  '_sectionProperties',
+]);
+
+const splitBlockKeepingParagraphFormatting = splitBlockAs((node) => ({
+  type: node.type,
+  attrs: Object.fromEntries(
+    Object.entries(node.attrs ?? {}).filter(([key]) => !ENTER_IGNORED_ATTRS.has(key)),
+  ),
+}));
+
+const paragraphFormattingEnterPlugin: ReactEditorPlugin = {
+  id: 'paragraph-formatting-enter',
+  name: '回车保留段落格式 / Ctrl+Enter 分页',
+  proseMirrorPlugins: [
+    keymap({
+      Enter: (state, dispatch) => {
+        // 修订模式下交给编辑器自身的 Enter 处理，保证段落拆分被记录为修订
+        if (isSuggestionModeActive(state)) return false;
+        return splitBlockKeepingParagraphFormatting(state, dispatch);
+      },
+      // Ctrl/Cmd + Enter 插入分页符（与 Word 一致）
+      'Mod-Enter': (state, dispatch) => insertPageBreak(state, dispatch),
+    }),
+  ],
+};
+
+/** 需要注册到编辑器的插件（PluginHost 会把 proseMirrorPlugins 合并进编辑器） */
+const wordEditorPlugins: ReactEditorPlugin[] = [paragraphFormattingEnterPlugin];
+
+export const WordEditor = forwardRef<DocxEditorRef | null, WordEditorProps>(({
+  visible,
+  hiddenClose = false,
+  isCreate = false,
+  onClose,
+  fileName,
+  onUpload,
+  initialBlob,
+  readOnly,
+  uploadPercent,
+  isOffline,
+  isLocalOnly,
+  hasUnsyncedChanges,
+  onSaveLocalBlob,
+}, ref) => {
+  const [isMobile, setIsMobile] = useState(false);
+  
+  const editorRef = useRef<DocxEditorRef | null>(null);
+  const pluginHostRef = useRef<PluginHostRef | null>(null);
+  const saveTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const suppressEditorSaveRef = useRef(false);
+  // 在 exportToBlob()（调用 editorRef.current.save()）期间抑制 onChange，
+  // 防止 save() 内部触发的 transaction 导致不必要的状态更新和重新渲染（移动端闪烁）。
+  const suppressChangeRef = useRef(false);
+  const pendingEditorDownloadRef = useRef<Promise<Blob> | null>(null);
+  const revisionPreviewSourceBufferRef = useRef<ArrayBuffer | null>(null);
+  // 跟踪编辑器是否已完成初始加载。编辑器初始化时会触发 onChange，需抑制以免误标"有修改未同步"。
+  const isEditorReadyRef = useRef(false);
+  // 跟踪当前差分上传的基准 blob（即服务器上最新的文件内容）。
+  // 上传成功后会更新为本次上传的 blob，确保下次差分基准与服务器一致。
+  const baseBlobRef = useRef<Blob | undefined>(initialBlob);
+  // 跟踪"标记为未同步"的调用是否已在本次编辑会话中执行过，避免每次 onChange 都写 IndexedDB
+  const markUnsyncedTriggeredRef = useRef(false);
+  // —— 新增：把 useEffect 内部的 applyAllFixes 函数引用暴露到组件级闭包，
+  //    供 onChange/onSelect/setInterval 等外部逻辑调用（因为 markHongTouSeparatorParagraphs
+  //    定义在 useEffect 内部，外部拿不到它的闭包作用域）。
+  //    applyAllFixes 内部所有函数都是幂等的，多次调用无副作用。
+  const applyAllFixesRef = useRef<() => void>(() => {});
+  // —— 新增：打开文件时的「原始 docx 所有 part 字节快照」，用于保存时镜像回写
+  //    绝不可能通过正文编辑改动的 part（header/footer/media/embeddings 及对应 rels）。
+  //    背景：@eigenpal/docx-editor-core 的 save() serializer 在处理这些 part 时
+  //    会丢失 r:embed / 破坏 drawing 命名空间，导致保存后重新打开页脚的签章/水印
+  //    图 fallback 成 <img src=""> 空占位图。通过在 save 输出的 docx 里把这些 part
+  //    直接覆盖成打开时的原始字节，彻底绕开 lib serializer 对这些 part 的损坏。
+  //    Map key: docx 内部 part 路径（如 "word/footer1.xml"、"word/media/image1.png"）
+  //    Map value: 原始 part 的 Uint8Array（字节级完全一致）
+  const rawDocxPartsRef = useRef<Map<string, Uint8Array>>(new Map());
+  // 空白新建文档（无 initialBlob / 点击"新建"）时 snapshot 为空，镜像回写自动跳过，
+  // 不会影响空白文档正常保存。
+
+  // 用 ref 跟踪这些"状态标记"属性，避免它们的变化（如保存/上传后更新标记）
+  // 触发编辑器相关 useEffect 重新执行，导致画面闪动。
+  const hasUnsyncedChangesRef = useRef(hasUnsyncedChanges);
+  const onSaveLocalBlobRef = useRef(onSaveLocalBlob);
+  hasUnsyncedChangesRef.current = hasUnsyncedChanges;
+  onSaveLocalBlobRef.current = onSaveLocalBlob;
+  const [initialBuffer, setInitialBuffer] = useState<ArrayBuffer | null>(null);
+  const [initialDocument, setInitialDocument] = useState<DocxDocument | null>(null);
+  const [editorKey, setEditorKey] = useState(0);
+  const [userId, setUserId] = useState<string | null>(null);
+  const [hasLocalCache, setHasLocalCache] = useState(false);
+  const [hasUploaded, setHasUploaded] = useState(!isCreate);
+  const [loadingInitialBlob, setLoadingInitialBlob] = useState(false);
+  const [showFinalRevisionPreview, setShowFinalRevisionPreview] = useState(false);
+
+  // ============================================================================
+  // 自定义段落样式选择器（受控）
+  //
+  // 为什么不用 DocxEditor 自带的工具栏样式选择器：
+  //   用户反馈其存在双向同步 Bug：
+  //   Bug 1) 全选一段"标题 1"时，选择框显示为"正文"，与实际样式不符，
+  //          导致用户点击"正文"想应用样式也无效（因为 UI 以为已经是正文）。
+  //   Bug 2) 选择了其他样式后，文档视觉确实变化了，但选择框仍然显示"正文"。
+  //   说明 DocxEditor 自带样式选择器的 value 受控同步逻辑缺失 / 有 bug，
+  //   我们改用自己的 antd Select 严格受控，彻底修复这两个问题。
+  //
+  // currentStyleId 来源优先级：
+  //   1) 选区变化时 → 从 ProseMirror state 用官方 extractSelectionState/getStyleId 读取（最可靠）
+  //   2) 应用样式成功时 → 直接 setCurrentStyleId(新 styleId)
+  //   3) 快捷键应用成功时 → 同样 setCurrentStyleId(styleId)
+  // ============================================================================
+  const [currentStyleId, setCurrentStyleId] = useState<string>('Normal');
+
+  // —— 新增：从文件 styles.xml 里动态获取到的所有段落样式列表
+  //    解决用户反馈"样式框里缺少了文件本身的样式（如 footer/header/Normal(Web)）"：
+  //    PRESET_STYLES 里只有我们写死的几个预设，但 docx 文件里自带的自定义样式
+  //    （页脚/页眉/模板标题等）我们也必须显示在下拉框里，让用户能选到。
+  //    每次 onSelectionChange / onChange 时我们从 StyleResolver 里 getParagraphStyles()
+  //    拿一次，存在这里。
+  const [documentStylesFromFile, setDocumentStylesFromFile] = useState<Style[]>([]);
+  // 同步到 ref，避免 useCallback 的依赖数组抖个不停
+  const documentStylesFromFileRef = useRef<Style[]>([]);
+  documentStylesFromFileRef.current = documentStylesFromFile;
+
+  /**
+   * 从 ProseMirror EditorState 里拿当前文档的 StyleResolver，拿到所有段落样式
+   * （文件自带的 + DocxEditor 内部注册的都在这里）。拿到后存入 state，
+   * 供 getStyleSelectOptions 用在下拉 options 里。
+   */
+  const syncDocumentStylesFromFile = useCallback((state: EditorState) => {
+    try {
+      const resolver = getDocumentStyleResolver(state);
+      if (!resolver) return;
+      const paraStyles = resolver.getParagraphStyles() ?? [];
+      // 过滤掉 hidden 的样式（避免下拉框里塞一大堆 Word 内部隐藏样式），
+      // 但保留 semiHidden/unhideWhenUsed（因为 Word 实际上会把这些样式展示出来）
+      const visibleStyles = paraStyles.filter(s => !s.hidden);
+      // 拿到空列表时不要覆盖已有的文件样式：
+      // 打开文件时已用 extractParagraphStyles 灌过一遍，这里回填空值会把下拉框
+      // 打回"只剩预设样式"的状态。
+      if (visibleStyles.length === 0) return;
+      setDocumentStylesFromFile(prev => {
+        // 简单同值比较，避免无限重渲染
+        if (prev.length === visibleStyles.length
+          && prev.every((p, i) => p.styleId === visibleStyles[i].styleId && p.name === visibleStyles[i].name)) {
+          return prev;
+        }
+        return visibleStyles;
+      });
+    } catch {
+      /* 忽略异常（StyleResolver 插件没挂时返回空就好了） */
+    }
+  }, []);
+
+  // ============================================================================
+  // —— 修复"点击一次样式下拉框立马消失，按住拖动才不消失"的终极方案：
+  //    把 antd Select 的 open/close 完全由我们自己控制（受控 open 模式），
+  //    不再信任 antd 默认的"blur / 点击外部自动关闭"逻辑。
+  //
+  // 为什么需要这么做：
+  //   DocxEditor/ProseMirror 在 document 上挂了 mousedown 全局监听 + 编辑器 blur 检测，
+  //   用户在我们自定义 Select 上点击一下 → mousedown → selector 内部的 input 抢 focus →
+  //   DocxEditor 判定为"editor 失去焦点" → onSelectionChange 触发 → 重渲染 → antd Select
+  //   默认的 blur 关闭逻辑同时命中 → popup 刚打开立马被关（闪现）。
+  //   但用户"按住鼠标不放在 popup 上拖动"时，因为 mousedown → mouseup 中间跨了两个元素，
+  //   DocxEditor 的 blur 检测被绕过，所以 popup 不消失。
+  //
+  // 修复思路（完全夺回开闭控制权）：
+  //   1) 新增 styleDropdownOpen state：唯一真源，控制 Select 的 open 属性
+  //   2) onDropdownVisibleChange：只接受 open=true 请求（anrdo 想打开就允许）
+  //      open=false 请求一律忽略！（因为那是 antd 的默认 blur/外点检测，会被 editor 干扰）
+  //   3) 自己在 document 上挂 mouseup 监听：只有当点击位置
+  //      a) 不在 .vendorsys-custom-style-picker （trigger 本身）
+  //      b) 不在 .vendorsys-word-style-dropdown （popup 面板）
+  //      内时，才视为真的想关闭，调用 setStyleDropdownOpen(false)
+  //   4) 用户选完样式（handleStyleSelectChange 结束）后，主动 setStyleDropdownOpen(false)
+  //   5) 加 onMouseDown={e => e.preventDefault()} 在 Select 外层，进一步阻止默认 focus 行为，
+  //      从根上避免 editor blur 检测误触发。
+  // ============================================================================
+  const [styleDropdownOpen, setStyleDropdownOpen] = useState(false);
+
+  // 在 editor 打开时挂 document mouseup 监听（受控关闭），editor 关闭时清理
+  useEffect(() => {
+    if (!visible) return;
+
+    const handleDocMouseUp = (e: MouseEvent) => {
+      // 只有 popup 是打开状态才需要判断是否要关
+      setStyleDropdownOpen((prevOpen) => {
+        if (!prevOpen) return prevOpen; // 本来就关了，不动
+
+        const target = e.target as HTMLElement | null;
+        if (!target) return prevOpen;
+
+        // 判断 target 是否在 trigger（自定义 Select 容器）里
+        const inTrigger = target.closest(
+          '.vendorsys-custom-style-picker, [data-vendorsys-custom="true"]'
+        );
+        // 判断 target 是否在 popup（下拉面板）里 —— 注意 popup 是挂到 .ep-root 下的
+        const inDropdown = target.closest('.ant-select-dropdown.vendorsys-word-style-dropdown');
+
+        // 只有当两者都不在时 → 真的想关闭
+        if (!inTrigger && !inDropdown) {
+          return false;
+        }
+        return prevOpen;
+      });
+    };
+
+    // 用 capture:true + passive 保证第一时间响应，不被 editor 自己的监听吞掉
+    document.addEventListener('mouseup', handleDocMouseUp, { capture: true, passive: true });
+    return () => {
+      document.removeEventListener('mouseup', handleDocMouseUp, { capture: true } as unknown as EventListenerOptions);
+    };
+  }, [visible]);
+
+  /**
+   * —— 新增：样式预览 inline style 换算工具
+   * 把 DocxEditor Style 里的 rPr (TextFormatting) + pPr (ParagraphFormatting)
+   * 从 DocxEditor 内部单位换算成 React 的 CSSProperties，用于自定义下拉框
+   * 里每一个 option 的行内样式 —— 让 option 里的「标题 1」等文字，
+   * 真的用"标题 1"的字号/加粗/字体/颜色/行高显示，不再用 antd 默认小字体，
+   * 对齐 DocxEditor 自带样式选择器（图二）的视觉效果。
+   *
+   * 只处理 option 预览最需要的 6-7 项常用 CSS 属性，段前段后/缩进等在单行
+   * option 里意义不大的属性直接跳过。
+   */
+  const styleToPreviewCSSProperties = useCallback((style?: Style | null): React.CSSProperties => {
+    const empty: React.CSSProperties = {};
+    if (!style) return empty;
+    const rPr = style.rPr;
+    const pPr = style.pPr;
+
+    const out: React.CSSProperties = {};
+
+    // —— 1. 字号：half-point → px
+    //    DocxEditor fontSize 单位是 half-point：例如 30 = 15pt。
+    //    1 pt = 96 / 72 px ≈ 1.3333 px，所以 half-point → px：
+    //    px = halfPoint / 2 * (96 / 72) = halfPoint * (2 / 3)。
+    //    例如：30 half-points → 20px；32 → ~21.33px
+    const fontSizeHalfPt = rPr?.fontSize ?? rPr?.fontSizeCs;
+    if (typeof fontSizeHalfPt === 'number' && fontSizeHalfPt > 0) {
+      const px = (fontSizeHalfPt * 2) / 3;
+      // 最小字号 11px（避免某些隐藏样式字号极小，用户看不清），最大不限制
+      out.fontSize = `${Math.max(11, px)}px`;
+    }
+
+    // —— 2. 加粗 / 复杂脚本加粗
+    if (rPr?.bold === true || rPr?.boldCs === true) {
+      out.fontWeight = 700;
+    }
+
+    // —— 3. 斜体
+    if (rPr?.italic === true || rPr?.italicCs === true) {
+      out.fontStyle = 'italic';
+    }
+
+    // —— 4. 字体族：优先东亚字体（eastAsia 更贴合中文文档实际）
+    //    其次 ascii / hAnsi，最后回退系统默认字体栈
+    const ff = rPr?.fontFamily;
+    if (ff) {
+      const familyNames: string[] = [];
+      if (ff.eastAsia) familyNames.push(`"${ff.eastAsia}"`);
+      if (ff.ascii && ff.ascii !== ff.eastAsia) familyNames.push(`"${ff.ascii}"`);
+      if (ff.hAnsi && ff.hAnsi !== ff.ascii && ff.hAnsi !== ff.eastAsia) familyNames.push(`"${ff.hAnsi}"`);
+      // 加回退字体栈，避免用户系统缺字体时变成默认宋体还没抗锯齿
+      familyNames.push(
+        'system-ui',
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        'sans-serif'
+      );
+      out.fontFamily = familyNames.join(', ');
+    }
+
+    // —— 5. 行高：pPr.lineSpacing / 240（240 = 单倍行距）
+    //    240 → 1.0；360 → 1.5；480 → 2.0
+    //    如果没有 lineSpacing，但我们设置了字号，给个 1.4 的 minimum 行高，避免
+    //    antd Select 默认 22px 行高跟大字字号打架（文字被裁剪）
+    if (typeof pPr?.lineSpacing === 'number' && pPr.lineSpacing > 0) {
+      out.lineHeight = pPr.lineSpacing / 240;
+    } else if (out.fontSize) {
+      out.lineHeight = 1.4;
+    }
+
+    // —— 6. 文字颜色：rPr.color 可能是 string（纯 hex "FF0000"），
+    //    也可能是 { rgb: "FF0000" } / { color: "FF0000", theme?: ... } 等对象。
+    //    这里把所有常见形态都命中，防止「副标题/强调引用」这类预设样式用 {rgb: '...'}
+    //    结果颜色在下拉框预览里出不来的 bug。
+    const colorVal = rPr?.color as unknown;
+    let hexColor: string | null = null;
+    if (typeof colorVal === 'string' && colorVal) {
+      hexColor = colorVal.trim();
+    } else if (colorVal && typeof colorVal === 'object') {
+      const colorObj = colorVal as Record<string, unknown>;
+      // .rgb 是 docx-editor / 预设样式里最常见的字段命名（比如 Subtitle 的 {rgb:'666666'}）
+      if (typeof colorObj.rgb === 'string') hexColor = colorObj.rgb.trim();
+      // .color 是另一种常见形态（某些 ColorValue 的 TS 定义）
+      else if (typeof colorObj.color === 'string') hexColor = colorObj.color.trim();
+    }
+    if (hexColor) {
+      if (/^[0-9a-fA-F]{6}$/.test(hexColor)) {
+        out.color = `#${hexColor}`;
+      } else if (/^[0-9a-fA-F]{3,8}$/.test(hexColor)) {
+        out.color = `#${hexColor}`;
+      } else if (hexColor.startsWith('#')) {
+        out.color = hexColor;
+      }
+    }
+
+    // —— 7. 下划线：rPr.underline.style != 'none' 时加 text-decoration: underline
+    if (rPr?.underline && rPr.underline.style && rPr.underline.style !== 'none') {
+      out.textDecoration = 'underline';
+      if (rPr.underline.color) {
+        // 如果下划线有单独颜色，也加上（浏览器对 text-decoration-color 支持很好）
+        const uColor = rPr.underline.color as unknown;
+        if (typeof uColor === 'string' && /^[0-9a-fA-F]{6}$/.test(uColor)) {
+          (out as React.CSSProperties & { textDecorationColor?: string }).textDecorationColor = `#${uColor}`;
+        }
+      }
+    }
+
+    // —— 8. 删除线
+    if (rPr?.strike === true || rPr?.doubleStrike === true) {
+      out.textDecoration = out.textDecoration
+        ? `${out.textDecoration} line-through`
+        : 'line-through';
+    }
+
+    // —— 9. 段落边框：把 pPr.borders 映射成 CSS 的 border-*，专门为「红头分隔线」
+    //    这种用段落底边框画横线的样式服务。否则下拉框里预览只会显示"黑色仿宋居中文字"，
+    //    和正文看起来差不多，用户根本找不到「红头分隔线」是哪一个。
+    //    支持四个方向（top/bottom/left/right），最常用的就是 bottom。
+    if (pPr?.borders && typeof pPr.borders === 'object') {
+      const borders = pPr.borders as Record<string, unknown>;
+      const mapBorderSide = (side: 'top' | 'right' | 'bottom' | 'left', cssKey: 'borderTop' | 'borderRight' | 'borderBottom' | 'borderLeft') => {
+        const b = borders[side];
+        if (!b || typeof b !== 'object') return;
+        const spec = b as Record<string, unknown>;
+        // a) style：Word BorderSpec.style → CSS border-style
+        const rawStyle = spec.style as string | undefined;
+        if (!rawStyle || rawStyle === 'none' || rawStyle === 'nil') return;
+        let cssStyle: string = 'solid';
+        switch (rawStyle) {
+          case 'single': case 'thick': case 'triple': case 'outset': case 'inset':
+            cssStyle = 'solid'; break;
+          case 'double': case 'doubleWave':
+            cssStyle = 'double'; break;
+          case 'dotted':
+            cssStyle = 'dotted'; break;
+          case 'dashed': case 'dashSmallGap': case 'dashDotStroked':
+            cssStyle = 'dashed'; break;
+          case 'wave':
+            cssStyle = 'solid'; break; // 浏览器没有标准 wave border，预览用实线兜底
+          default:
+            cssStyle = 'solid';
+        }
+
+        // b) width：size 单位 1/8 pt → px。size=12（1.5pt）≈ 2px；size=8（1pt）≈ 1.33px
+        let widthPx = 1;
+        const rawSize = spec.size;
+        if (typeof rawSize === 'number' && rawSize > 0) {
+          widthPx = Math.max(1, Math.round(rawSize * 0.1667)); // * (2/12)  = * 1/6 ≈ 0.1667
+        }
+
+        // c) color：BorderSpec.color = ColorValue，支持 rgb/themeColor
+        let cssColor = 'currentColor';
+        const colorVal = spec.color;
+        if (colorVal && typeof colorVal === 'object') {
+          const cv = colorVal as Record<string, unknown>;
+          if (typeof cv.rgb === 'string' && /^[0-9a-fA-F]{6}$/.test(cv.rgb)) {
+            cssColor = `#${cv.rgb}`;
+          } else if (typeof cv.themeColor === 'string') {
+            // theme color 没有 theme1.xml 的上下文，预览里用合理的 fallback：
+            // hlink → 蓝色，accent1..6 → 常见配色，其他 → 黑
+            switch (cv.themeColor) {
+              case 'hlink': cssColor = '#2F5496'; break;
+              case 'accent1': cssColor = '#4472C4'; break;
+              case 'accent2': cssColor = '#ED7D31'; break;
+              case 'accent3': cssColor = '#A5A5A5'; break;
+              case 'accent4': cssColor = '#FFC000'; break;
+              case 'accent5': cssColor = '#5B9BD5'; break;
+              case 'accent6': cssColor = '#70AD47'; break;
+              case 'lt1': case 'background1': cssColor = '#FFFFFF'; break;
+              case 'dk1': case 'text1': case 'background2': case 'text2': default: cssColor = '#000000'; break;
+            }
+          }
+        } else if (typeof colorVal === 'string' && /^[0-9a-fA-F]{6}$/.test(colorVal)) {
+          cssColor = `#${colorVal}`;
+        }
+
+        (out as React.CSSProperties & Record<string, string>)[cssKey] = `${widthPx}px ${cssStyle} ${cssColor}`;
+      };
+
+      mapBorderSide('top', 'borderTop');
+      mapBorderSide('right', 'borderRight');
+      mapBorderSide('bottom', 'borderBottom');
+      mapBorderSide('left', 'borderLeft');
+    }
+
+    return out;
+  }, []);
+
+  /**
+   * 辅助函数：给定 ProseMirror 文档节点 + 范围 [from, to]，
+   * 遍历范围内所有 paragraph 节点，返回它们的 { paraId, pos } 数组。
+   * 用于"全选多段落时要对选中范围内的每一段都应用样式"（不能只应用$from那一段）。
+   */
+  const collectParaIdsInRange = useCallback((
+    doc: Node,
+    from: number,
+    to: number
+  ): Array<{ paraId: string; node: Node }> => {
+    const result: Array<{ paraId: string; node: Node }> = [];
+    doc.nodesBetween(from, to, (node) => {
+      if (!node || node.type.name !== 'paragraph') return true;
+      const paraId = node.attrs?.paraId as string | undefined;
+      if (paraId) {
+        result.push({ paraId, node });
+      }
+      return true; // 继续往下钻（paragraph 内部是 runs，不影响外层收集）
+    });
+    return result;
+  }, []);
+
+  /**
+   * 从 ProseMirror EditorState（或 DocxEditorRef）中读取当前选区所在段落的 styleId。
+   * 找不到段落或段落没有 styleId 时，返回默认的 'Normal'（正文）作为兜底。
+   *
+   * —— 2026/08/14 重写：改用 DocxEditor 官方 API
+   *    1) 优先 extractSelectionState(state).styleId（官方专门给 toolbar 同步用的）
+   *    2) 其次用 getStyleId(state)（官方 paragraph commands 里的 API）
+   *    3) 最后自己遍历 $from/$anchor/$head 找 paragraph 的 attrs.styleId
+   *    解决用户反馈的"全选文本显示正文，但实际不是正文"的问题：
+   *    之前我们只看了 $from.parent，如果用户 Ctrl+A 全选时 selection 锚点不在
+   *    paragraph 节点上（比如在 section 边界/表格里），我们就兜底成了 Normal，
+   *    现在用官方 API 能正确识别。
+   */
+  const readCurrentParagraphStyleId = useCallback((): string => {
+    const state = editorRef.current?.getEditorRef()?.getState();
+    if (!state) return 'Normal';
+
+    // 1) 官方 extractSelectionState：这是专门给 toolbar 取当前样式的 API
+    try {
+      const selState = extractSelectionState(state);
+      if (selState && selState.styleId) return selState.styleId;
+    } catch { /* ignore */ }
+
+    // 2) 官方 getStyleId：paragraph 命令模块提供的直接 getter
+    try {
+      const sId = getStyleId(state);
+      if (sId) return sId;
+    } catch { /* ignore */ }
+
+    // 3) 手动兜底：遍历 $from / $anchor / $head 三个位置，找最近的 paragraph
+    const { selection } = state;
+    const candidates = [selection.$from, selection.$anchor, selection.$head];
+    for (const $pos of candidates) {
+      if (!$pos) continue;
+      for (let d = $pos.depth; d >= 0; d--) {
+        const ancestor = $pos.node(d);
+        if (!ancestor) continue;
+        if (ancestor.type.name === 'paragraph') {
+          const styleId = (ancestor.attrs?.styleId as string | undefined);
+          if (styleId) return styleId;
+        }
+      }
+      const p = $pos.parent;
+      if (p && p.type && p.type.name === 'paragraph') {
+        const styleId = (p.attrs?.styleId as string | undefined);
+        if (styleId) return styleId;
+      }
+    }
+
+    return 'Normal';
+  }, []);
+
+  // 格式刷
+  const formatPainter = useFormatPainter(() => editorRef.current?.getEditorRef()?.getView() ?? null);
+
+  // ===== 粘贴选项（WPS 风格：带格式粘贴 / 匹配当前格式 / 只粘贴文本）=====
+  // 捕获阶段先记录剪贴板内容与插入起点，等编辑器完成默认（带格式）粘贴后，
+  // 在插入位置下方弹出一个浮动按钮，展开后可切换粘贴方式重新粘贴。
+  const [pasteSmartTag, setPasteSmartTag] = useState<{
+    x: number; y: number; from: number; to: number; text: string; expanded: boolean;
+  } | null>(null);
+  const pasteSmartTagRef = useRef<HTMLDivElement | null>(null);
+  // 记录最新鼠标位置（粘贴时鼠标通常在光标附近，用鼠标位置定位按钮最可靠）
+  const lastMousePos = useRef({ x: 0, y: 0 });
+  // 标记正在应用粘贴模式（重贴），期间的 input 事件不关闭菜单
+  const applyingPasteModeRef = useRef(false);
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => { lastMousePos.current = { x: e.clientX, y: e.clientY }; };
+    window.addEventListener('mousemove', onMove, true);
+    return () => window.removeEventListener('mousemove', onMove, true);
+  }, []);
+
+  // 给 window 挂原生 paste 捕获监听（capture 阶段最外层，最不容易被 stopPropagation 拦截）。
+  // 之前挂在 view.dom 上不生效，说明 DocxEditor 在祖先元素 capture 阶段就 stop 了事件。
+  useEffect(() => {
+    if (!visible || loadingInitialBlob || readOnly || showFinalRevisionPreview) return;
+
+    const onPaste = (e: ClipboardEvent) => {
+      const view = editorRef.current?.getEditorRef()?.getView();
+      // 只处理发生在编辑器内的粘贴
+      if (!view?.dom || !view.dom.contains(e.target as HTMLElement)) return;
+      if (isSuggestionModeActive(view.state)) return;
+      const html = e.clipboardData?.getData('text/html') ?? '';
+      const text = e.clipboardData?.getData('text/plain') ?? '';
+      if (!html && !text) return;
+      const insertFrom = view.state.selection.from;
+      setTimeout(() => {
+        const currentView = editorRef.current?.getEditorRef()?.getView();
+        if (!currentView) return;
+        const to = currentView.state.selection.head;
+        if (to <= insertFrom) return;
+        // 移除粘贴内容自带的文字高亮（背景色），让粘贴文字默认无背景色
+        try {
+          const marks = currentView.state.schema.marks;
+          const highlightMark = marks['highlight'] ?? marks['backgroundColor'] ?? marks['background'];
+          if (highlightMark && currentView.state.doc.rangeHasMark(insertFrom, to, highlightMark)) {
+            currentView.dispatch(currentView.state.tr.removeMark(insertFrom, to, highlightMark));
+          }
+        } catch (e) { /* ignore */ }
+        try {
+          // 用鼠标位置定位按钮（粘贴时鼠标在光标附近，比编辑层坐标可靠）
+          let { x, y } = lastMousePos.current;
+          const container = document.getElementById('vendorsys-word-editor-root');
+          const cRect = container?.getBoundingClientRect();
+          // 钳制到容器可视区域
+          if (cRect) {
+            const minX = cRect.left + 8;
+            const maxX = cRect.right - 130;
+            const minY = cRect.top + 8;
+            const maxY = cRect.bottom - 40;
+            x = Math.min(Math.max(x, minX), maxX);
+            y = Math.min(Math.max(y, minY), maxY);
+          }
+          setPasteSmartTag({
+            x,
+            y: y + 6,
+            from: insertFrom,
+            to,
+            text,
+            expanded: false,
+          });
+        } catch (err) { /* ignore */ }
+      }, 50);
+    };
+
+    window.addEventListener('paste', onPaste, true);
+    return () => window.removeEventListener('paste', onPaste, true);
+  }, [visible, loadingInitialBlob, readOnly, showFinalRevisionPreview]);
+
+  const applyPasteMode = useCallback((mode: 'formatted' | 'match' | 'text') => {
+    const tag = pasteSmartTag;
+    if (!tag) return;
+    // 「带格式」即编辑器默认粘贴结果，无需重贴；但菜单保持展开，方便用户切换
+    if (mode === 'formatted') {
+      setPasteSmartTag({ ...tag, expanded: true });
+      return;
+    }
+    const view = editorRef.current?.getEditorRef()?.getView();
+    if (!view) return;
+    view.focus();
+    const { doc } = view.state;
+    const from = Math.min(tag.from, doc.content.size);
+    const to = Math.min(tag.to, doc.content.size);
+    if (to <= from) return;
+    // 选中刚粘贴的内容后用纯文本重贴：插入的文本继承插入点前的格式（即目标处格式）
+    applyingPasteModeRef.current = true;
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(doc, from, to)));
+    const insertAt = view.state.selection.from;
+    view.pasteText(tag.text);
+    if (mode === 'text') {
+      const end = view.state.selection.head;
+      if (end > insertAt) {
+        view.dispatch(view.state.tr.removeMark(insertAt, end));
+      }
+    }
+    // 重贴后更新区间（位置沿用当前鼠标位置），菜单保持展开
+    const newHead = view.state.selection.head;
+    const { x, y } = lastMousePos.current;
+    applyingPasteModeRef.current = false;
+    setPasteSmartTag({ ...tag, from: insertAt, to: newHead, x, y: y + 6, expanded: true });
+  }, [pasteSmartTag]);
+
+  // 关闭条件：点击弹层外 / Esc / 滚动 / 用户输入新文字；展开时支持 W/M/T 快捷键
+  useEffect(() => {
+    if (!pasteSmartTag) return;
+    const expanded = pasteSmartTag.expanded;
+    const onDocMouseDown = (e: MouseEvent) => {
+      if (pasteSmartTagRef.current?.contains(e.target as HTMLElement)) return;
+      setPasteSmartTag(null);
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setPasteSmartTag(null);
+        return;
+      }
+      if (!expanded) return;
+      const key = e.key.toLowerCase();
+      const mode = key === 'w' ? 'formatted' : key === 'm' ? 'match' : key === 't' ? 'text' : null;
+      if (mode) {
+        e.preventDefault();
+        e.stopPropagation();
+        applyPasteMode(mode);
+      }
+    };
+    const onScroll = () => setPasteSmartTag(null);
+    // 用户在编辑器内输入新文字时关闭（applyPasteMode 重贴期间的 input 不算）
+    const onEditorInput = () => {
+      if (!applyingPasteModeRef.current) setPasteSmartTag(null);
+    };
+    const viewDom = editorRef.current?.getEditorRef()?.getView()?.dom as HTMLElement | null;
+    viewDom?.addEventListener('input', onEditorInput);
+
+    document.addEventListener('mousedown', onDocMouseDown, true);
+    document.addEventListener('keydown', onKeyDown, true);
+    window.addEventListener('scroll', onScroll, true);
+    return () => {
+      viewDom?.removeEventListener('input', onEditorInput);
+      document.removeEventListener('mousedown', onDocMouseDown, true);
+      document.removeEventListener('keydown', onKeyDown, true);
+      window.removeEventListener('scroll', onScroll, true);
+    };
+  }, [pasteSmartTag, applyPasteMode]);
+
+  // ===== 段落设置（对齐 / 缩进 / 段前段后 / 行距）=====
+  // DocxEditor 自带工具栏只暴露了段落样式与对齐按钮，没有「段落信息」入口；
+  // 这里用编辑器提供的 prosemirror 命令补一个 Word 风格的「段落」对话框。
+  const [paragraphDialogOpen, setParagraphDialogOpen] = useState(false);
+  const [paragraphForm, setParagraphForm] = useState<ParagraphDialogValues>(DEFAULT_PARAGRAPH_DIALOG_VALUES);
+
+  /** 打开对话框前，从当前选区所在段落读出已有的直接格式，回填到表单 */
+  const openParagraphDialog = useCallback(() => {
+    // 先打开对话框，保证点击一定可见；读取当前格式失败时退回默认值
+    setParagraphDialogOpen(true);
+
+    try {
+      const view = editorRef.current?.getEditorRef()?.getView();
+      const state = view?.state;
+      const attrs = (() => {
+        const parent = state?.selection.$from.parent;
+        return parent && parent.type.name === 'paragraph' ? parent.attrs : null;
+      })();
+
+      const toCm = (twips?: number | null) =>
+        twips && twips > 0 ? Number((twips / TWIPS_PER_CM).toFixed(2)) : 0;
+      const toPt = (twips?: number | null) =>
+        twips && twips > 0 ? Number((twips / TWIPS_PER_PT).toFixed(2)) : 0;
+
+      const alignment = ((state ? getParagraphAlignment(state) : null) ??
+        (attrs?.alignment as ParagraphAlignmentValue | undefined) ??
+        'left') as ParagraphAlignmentValue;
+      const lineRule = (attrs?.lineSpacingRule ?? 'auto') as LineSpacingRuleValue;
+      const lineSpacing = attrs?.lineSpacing as number | undefined;
+      const lineValue =
+        lineSpacing && lineSpacing > 0
+          ? lineRule === 'auto'
+            ? Number((lineSpacing / 240).toFixed(2))
+            : Number((lineSpacing / TWIPS_PER_PT).toFixed(2))
+          : 1;
+
+      const indentFirstLine = (attrs?.indentFirstLine as number | undefined) ?? 0;
+      const hanging = Boolean(attrs?.hangingIndent);
+
+      setParagraphForm({
+        alignment,
+        indentLeftCm: toCm(attrs?.indentLeft as number | undefined),
+        indentRightCm: toCm(attrs?.indentRight as number | undefined),
+        indentSpecial: indentFirstLine > 0 ? (hanging ? 'hanging' : 'firstLine') : 'none',
+        indentSpecialCm: toCm(indentFirstLine),
+        spaceBeforePt: toPt(attrs?.spaceBefore as number | undefined),
+        spaceAfterPt: toPt(attrs?.spaceAfter as number | undefined),
+        lineRule,
+        lineValue,
+      });
+    } catch (error) {
+      console.warn('[WordEditor] 读取段落格式失败，使用默认值', error);
+      setParagraphForm(DEFAULT_PARAGRAPH_DIALOG_VALUES);
+    }
+  }, []);
+
+  /** 把表单值换算成 twips，依次派发到当前选区覆盖的所有段落 */
+  const applyParagraphSettings = useCallback(() => {
+    const view = editorRef.current?.getEditorRef()?.getView();
+    if (!view) {
+      message.warning('编辑器尚未就绪，请稍候再试');
+      return;
+    }
+
+    const specialTwips =
+      paragraphForm.indentSpecial === 'none'
+        ? 0
+        : Math.round(paragraphForm.indentSpecialCm * TWIPS_PER_CM);
+    const lineTwips =
+      paragraphForm.lineRule === 'auto'
+        ? Math.round(paragraphForm.lineValue * 240)
+        : Math.round(paragraphForm.lineValue * TWIPS_PER_PT);
+
+    const commands = [
+      setAlignment(paragraphForm.alignment),
+      setIndentLeft(Math.round(paragraphForm.indentLeftCm * TWIPS_PER_CM)),
+      setIndentRight(Math.round(paragraphForm.indentRightCm * TWIPS_PER_CM)),
+      setIndentFirstLine(specialTwips, paragraphForm.indentSpecial === 'hanging'),
+      setSpaceBefore(Math.round(paragraphForm.spaceBeforePt * TWIPS_PER_PT)),
+      setSpaceAfter(Math.round(paragraphForm.spaceAfterPt * TWIPS_PER_PT)),
+      setLineSpacing(lineTwips, paragraphForm.lineRule),
+    ];
+
+    // 每条命令都基于「上一次 dispatch 之后的最新 state」，保证多项设置叠加生效
+    let applied = false;
+    for (const command of commands) {
+      if (command(view.state, view.dispatch, view)) applied = true;
+    }
+
+    if (!applied) {
+      message.warning('当前选区无法设置段落格式，请把光标放在正文段落中再试');
+      return;
+    }
+
+    setParagraphDialogOpen(false);
+    view.focus();
+  }, [paragraphForm]);
+
+  useEffectResize(() => {
+    setIsMobile(true);
+  }, () => {
+    setIsMobile(false);
+  });
+
+  // 注册全局键盘快捷键（Ctrl/Cmd + Alt + 数字/反引号 → 设置段落样式）
+  useEffect(() => {
+    if (!visible || readOnly || showFinalRevisionPreview) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ctrl 键（Windows/Linux）或 Cmd 键（macOS）
+      const ctrlOrCmd = e.ctrlKey || e.metaKey;
+      if (!ctrlOrCmd || !e.altKey) return;
+
+      const styleId = STYLE_SHORTCUT_MAP[e.key];
+      if (!styleId) return;
+
+      // 避免在输入框中误触发
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+
+      e.preventDefault();
+
+      const editorApi = editorRef.current;
+      const view = editorApi?.getEditorRef()?.getView();
+      if (!editorApi || !view) return;
+
+      const { doc, selection } = view.state;
+      const selFrom = selection.from;
+      const selTo = selection.to;
+      // 无论用户选中的是一段还是多段（含 Ctrl+A 全选），
+      // 都把 selFrom→selTo 范围内的所有 paragraph 都找出来，逐个应用样式。
+      // 这样解决了"全选多段落后点样式只有第一段生效，其他段没变化"的 bug。
+      const selectedParas = collectParaIdsInRange(doc, selFrom, selTo);
+      if (selectedParas.length === 0) return;
+
+      // 1) 优先 DocxEditor setParagraphStyle API：会解析样式的格式属性（字体、字号、加粗、间距）
+      //    完整应用，视觉变化同步正确
+      let appliedCount = 0;
+      for (const { paraId } of selectedParas) {
+        try {
+          if (editorApi.setParagraphStyle({ paraId, styleId })) {
+            appliedCount++;
+          }
+        } catch { /* 单个段落失败不影响其他段落，继续 */ }
+      }
+
+      // 2) 如果一个都没应用成功（极端情况下 paraId 失效等），回退到 applyStyle 命令
+      if (appliedCount === 0) {
+        try {
+          applyStyle(styleId)(view.state, view.dispatch, view);
+          appliedCount = selectedParas.length;
+        } catch { /* 兜底失败也无所谓 */ }
+      }
+
+      // —— 关键新增：快捷键应用样式成功后，立即回填自定义 Select 的 value ——
+      // 确保 Ctrl+Alt+1 设为标题 1 后，样式选择框立刻显示"标题 1"，
+      // 而不是等到下一次选区变化时才更新（否则用户看到"标题 1 生效但选择框仍正文"）。
+      if (appliedCount > 0) {
+        setCurrentStyleId(styleId);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [visible, readOnly, showFinalRevisionPreview, collectParaIdsInRange]);
+
+  // ============================================================================
+  // 自定义样式选择器 onChange：用户从下拉框里选了一个新样式
+  // 行为尽量对齐快捷键 + DocxEditor 原工具栏选择器，优先 setParagraphStyle
+  //
+  // —— 2026/08/14 重要修改点（对应用户三大反馈）：
+  //   1) 不再只应用 $from 那一段 → 改为应用选中范围内的 ALL paragraphs
+  //      （解决"全选文本时点击其他样式无效"的 bug）
+  //   2) 不再有 "newStyleId===currentStyleId 就跳过" 的逻辑
+  //      （解决"当前为样式A，点击样式A无效，我需要每次点击都重新应用"的需求）
+  //   3) 如果 DocxEditor.setParagraphStyle 对"样式没变"的段落做了 no-op 短路，
+  //      就用 applyStyle 兜底再强制 dispatch 一次 transaction
+  //
+  // —— 2026/08/14 再次修复：新增 50ms 内相同 styleId 连续调用去重（lastApplyStyleCallRef）。
+  //    因为我们同时用了 onSelect + onChange 双通道（onSelect 保证同值点击也触发，
+  //    onChange 兼容键盘/程序化改值），antd 内部某些情况下可能先 onSelect 再 onChange，
+  //    导致 handleStyleSelectChange 在 10ms 内被连续调用两次，造成重复 transaction。
+  //    加一层时间窗去重，保证用户一次点击最多只执行一次应用流程。
+  // ============================================================================
+  const lastApplyStyleCallRef = useRef<{ styleId: string; ts: number } | null>(null);
+  const handleStyleSelectChange = useCallback(async (newStyleId: string) => {
+    if (!newStyleId) return;
+
+    // —— 50ms 去重：同一 newStyleId 在 50ms 内只跑一次
+    //    避免 antd Select onSelect + onChange 同时触发时的重复调用
+    const now = Date.now();
+    const last = lastApplyStyleCallRef.current;
+    if (last && last.styleId === newStyleId && (now - last.ts) < 50) {
+      // 即便不重复应用，也仍然要关 dropdown（因为用户确实点了 option 完成了选择）
+      setStyleDropdownOpen(false);
+      return;
+    }
+    lastApplyStyleCallRef.current = { styleId: newStyleId, ts: now };
+
+    const editorApi = editorRef.current;
+    const view = editorApi?.getEditorRef()?.getView();
+    if (!editorApi || !view) {
+      message.warning('编辑器尚未就绪，请稍后再试');
+      // 即便编辑器未就绪，也先回填 value（避免卡在旧值上，下次操作会再刷）
+      setCurrentStyleId(newStyleId);
+      setStyleDropdownOpen(false);
+      return;
+    }
+
+    const { doc, selection } = view.state;
+    const selFrom = selection.from;
+    const selTo = selection.to;
+    // 1) 收集选中范围内的所有 paragraph（含全选多段落的情况）
+    const selectedParas = collectParaIdsInRange(doc, selFrom, selTo);
+    // 如果真的一个 paragraph 都找不到（极端情况：光标在 section 边界空白处），
+    // 我们就用 $from/$anchor/$head 兜底，至少尝试应用一次。
+    let fallbackSingleParaId: string | null = null;
+    if (selectedParas.length === 0) {
+      const candidates = [selection.$from, selection.$anchor, selection.$head];
+      for (const $pos of candidates) {
+        if (!$pos) continue;
+        for (let d = $pos.depth; d >= 0; d--) {
+          const anc = $pos.node(d);
+          if (anc && anc.type && anc.type.name === 'paragraph' && anc.attrs?.paraId) {
+            fallbackSingleParaId = anc.attrs.paraId as string;
+            break;
+          }
+        }
+        if (fallbackSingleParaId) break;
+        const p = $pos.parent;
+        if (p && p.type && p.type.name === 'paragraph' && p.attrs?.paraId) {
+          fallbackSingleParaId = p.attrs.paraId as string;
+          break;
+        }
+      }
+    }
+
+    let appliedAny = false;
+    // 2) 优先 DocxEditor API：会把样式的格式属性（字体/字号/加粗/间距）完整应用
+    //    —— 关键：对选中范围内的 EVERY paragraph 都调用 setParagraphStyle，
+    //    而不是只对 $from 那一段。这样全选文本时的样式应用才真正生效。
+    if (selectedParas.length > 0) {
+      for (const { paraId } of selectedParas) {
+        try {
+          const ok = editorApi.setParagraphStyle({ paraId, styleId: newStyleId });
+          if (ok) appliedAny = true;
+        } catch {
+          // 单个失败不影响其他段落
+        }
+      }
+    } else if (fallbackSingleParaId) {
+      try {
+        appliedAny = editorApi.setParagraphStyle({ paraId: fallbackSingleParaId, styleId: newStyleId });
+      } catch { /* ignore */ }
+    }
+
+    // 3) 兜底：一个都没成功应用时，回退到 applyStyle 命令
+    //    （比如样式 ID 是文件自带的自定义样式，DocxEditor 的 setParagraphStyle
+    //    可能内部映射失败，但 applyStyle 命令直接写 PM attrs.styleId 也能用）
+    if (!appliedAny) {
+      try {
+        applyStyle(newStyleId)(view.state, view.dispatch, view);
+        appliedAny = true;
+      } catch (err) {
+        console.warn('applyStyle 也失败了:', err);
+        appliedAny = false;
+      }
+    }
+
+    // 4) 用户需求："当前样式A再点样式A也要生效（再应用一遍）"
+    //    如果因为"样式本身没变化"导致上面的 setParagraphStyle 全部
+    //    短路 no-op，我们这里再强制 dispatch 一次 applyStyle，保证
+    //    用户每次点击都一定有一次 transaction 触发，格式属性会被重新应用。
+    if (appliedAny && currentStyleId === newStyleId) {
+      try {
+        // 再次触发一次 applyStyle，强制写一次 styleId 属性
+        applyStyle(newStyleId)(view.state, view.dispatch, view);
+      } catch { /* ignore */ }
+    }
+
+    if (appliedAny) {
+      // —— 关键：应用后立刻"重新读真实的 styleId"再回填（解决显示"2"的bug） ——
+      // DocxEditor 内部会把 "Normal"/"Heading1" 这种预设 styleId 转成数字索引
+      // （如 1、2、3、5...） 存在 attrs.styleId 里，所以如果我们 setCurrentStyleId(newStyleId)
+      // 那下一次渲染时 value="Normal" 与真实 styleId="2" 不一致，
+      // 1) options 里找不到 value 对应的 option → antd Select 会显示裸 value "2"
+      // 2) 并且双向同步逻辑以为值变了又触发 onChange，造成死循环。
+      // 所以应用成功后必须重新读 ProseMirror 里的真实 styleId（数字或字符串）作为回填值。
+      setTimeout(() => {
+        try {
+          const realStyleId = readCurrentParagraphStyleId();
+          setCurrentStyleId(realStyleId);
+        } catch {
+          setCurrentStyleId(newStyleId);
+        }
+      }, 0);
+      view.focus();
+
+      // —— 关键新增：用户应用样式后，立即（三枪 0/80/250ms）重跑 applyAllFixes
+      //
+      // 背景（用户反馈 bug：编辑时选红头分隔线看不到红线，保存重进后才有）：
+      //   应用样式 → PM transaction 把 paragraph.attrs.styleId 改成 HongTouSeparator
+      //   → lib 异步更新 paragraph DOM 的 inline style（字体/颜色/border-bottom）
+      //   → 此时 childList 不变，旧的 MutationObserver 不会触发
+      //   → 如果操作发生在编辑器打开 2s 之后，setTimeout 多点也已过期
+      //   → markHongTouSeparatorParagraphs 没跑 → 没打 data-attr → CSS ::after 不画红线。
+      //
+      // 修复：在这里主动"戳"三枪 applyAllFixes（覆盖 PM state update → DOM update 的
+      // 三个常见时间点），确保用户点完样式选择下拉框之后 <250ms 内红线就出来，
+      // 不用等 attributes MutationObserver（有 ~1 frame 延迟）也不用等 500ms 轮询。
+      [0, 80, 250].forEach((delay) => {
+        setTimeout(() => {
+          try {
+            applyAllFixesRef.current?.();
+          } catch {
+            /* 忽略偶发异常，attributes 监听 + 轮询已兜底 */
+          }
+        }, delay);
+      });
+    }
+
+    // —— 终极方案受控 open：用户选完样式后，主动关闭下拉框（符合用户预期：选完就关）
+    setStyleDropdownOpen(false);
+  }, [readCurrentParagraphStyleId, collectParaIdsInRange, currentStyleId]);
+
+  // ============================================================================
+  // 构造自定义样式选择器的 options
+  //
+  // —— 2026/08/14 重要优化 1：显示文件本身自带的所有段落样式（而不仅是预设）
+  //    来源优先级：
+  //      1) documentStylesFromFile（从 StyleResolver 拿到的文件 styles.xml 里的全部段落样式，
+  //         包括用户 docx 自带的 footer / header / Normal (Web) / 标题 1 / 自定义模板样式等）
+  //      2) PRESET_STYLES（我们自己注入的几个预设，如果不在上面的列表里就补上，保证永远可选）
+  //    最后再做 fallback：如果 currentStyleId 还是匹配不到任何 option（比如 DocxEditor
+  //    内部存了一个"3"但我们没找到对应 name 的 style），就加一个 disabled 的 fallback
+  //    option，保证 Select 显示时不会出现裸数字 value。
+  //
+  // —— 2026/08/14 重要优化 2：每个 option 加 style 属性（inline 样式预览）
+  //    用 styleToPreviewCSSProperties(style) 把每个样式的字号/加粗/斜体/字体/颜色/行高
+  //    换算成 inline style，直接挂到 option 上。antd Select 会把这个 style 应用到
+  //    .ant-select-item-option 容器上，文字会继承这些属性 → "标题 1" 这行字就真的
+  //    用"标题 1"的大字号+加粗显示，与 DocxEditor 自带样式选择器（用户图二）的视觉
+  //    效果完全一致。
+  // ============================================================================
+  const getStyleSelectOptions = useCallback(() => {
+    // 建立 styleId → Style 对象的查找表，用于给每个 option 找"对应的完整 Style"
+    // 来计算预览 inline style（不管是来自文件的还是预设的）
+    const styleMapById = new Map<string, Style>();
+    (documentStylesFromFileRef.current ?? []).forEach(s => {
+      if (!styleMapById.has(s.styleId)) styleMapById.set(s.styleId, s);
+    });
+    PRESET_STYLES.forEach(s => {
+      if (!styleMapById.has(s.styleId)) styleMapById.set(s.styleId, s);
+    });
+
+    // 1) 从文件 styles.xml 动态取到的段落样式（最先放，最优先，最贴合用户实际文件情况）
+    const fileStyleOptions = (documentStylesFromFileRef.current ?? []).map((s) => {
+      // 用户能看懂的显示名称：优先 name（比如 "footer"、"标题 1"），
+      // 没 name 时兜底为 styleId（或 "样式 styleId"）。
+      const displayName = s.name ? s.name.trim() : '';
+      const label = displayName || `样式 ${s.styleId}`;
+      return {
+        value: s.styleId,
+        label,
+        isFromFile: true,
+        className: `style-preview-file-${s.styleId}`,
+        // —— 新增：每个 option 直接带预览 inline style
+        style: styleToPreviewCSSProperties(s),
+      };
+    });
+
+    // 用 Map 去重：按 styleId 合并，后面的预设 style 不会覆盖前面的文件 style
+    const mergedMap = new Map<string, {
+      value: string;
+      label: string;
+      className?: string;
+      style?: React.CSSProperties;
+      isFromFile?: boolean;
+      isPreset?: boolean;
+      disabled?: boolean;
+    }>();
+    fileStyleOptions.forEach(opt => mergedMap.set(opt.value, opt));
+
+    // 2) 补上我们的 PRESET_STYLES（如果文件里还没有这个 styleId 的话）
+    //    这样即便文件是空的，用户也至少能选 "正文/标题 1/标题 2" 等基础样式。
+    for (const s of PRESET_STYLES) {
+      if (mergedMap.has(s.styleId)) continue; // 文件里已有同名 styleId，用文件的（name 更准）
+      const displayName = s.name ? String(s.name).trim() : '';
+      mergedMap.set(s.styleId, {
+        value: s.styleId,
+        label: displayName || s.styleId,
+        isPreset: true,
+        className: `style-preview-${s.styleId}`,
+        // —— 新增：预设样式也挂预览 inline style
+        style: styleToPreviewCSSProperties(s),
+      });
+    }
+
+    const mergedOptions = Array.from(mergedMap.values());
+
+    // —— 关键新增：按「规范化 name」做二级去重（解决用户截图里"标题1/标题11/
+    //    标题2/标题21 成对重复"的 bug）。
+    //
+    // 背景：用户打开的 docx 里往往同时存在两套"语义等价"的 style：
+    //   A) 文件自带的 builtin 兼容样式：styleId 是数字字符串 "1"/"2"/"11"/"21"，
+    //      name 可能是中文"标题 1"或英文"Heading 1"或全角"标题１"。
+    //   B) 我们预设 PRESET_STYLES 注入的样式：styleId 是字符串 "Heading1"/"Heading2"，
+    //      name 是中文"标题 1"/"标题 2"。
+    // 因为 styleId 不同（A 是数字，B 是 HeadingN），上面按 styleId 去重的 mergedMap
+    // 会把 A 和 B 都放进去 → 下拉框里同一个"标题 1"语义出现 2~3 次，用户看得懵。
+    //
+    // 修复：用 normalizeStyleName（强归一化函数：全角→半角 + 去空格 + 标题↔heading +
+    // 正文↔normal 同义统一）把所有 option 的 label 归一化，相同 normalized name
+    // 只保留一项（合并时保留「更适合中文用户读」的那一个，优先级：isPreset >
+    // isFromFile（name 含中文） > isFromFile（name 纯英文） > 其他）。
+    //
+    // 同时建立 styleIdAliases Map：所有"被合并掉"的 styleId 都映射到「保留项」的
+    // value，这样 syncStyleSelectValue 或 antd Select value 校验时，就算 paragraph
+    // 存的是数字 styleId="1"也能找到对应的保留项 value="Heading1"，不会显示裸数字。
+    type OptionItem = (typeof mergedOptions)[number];
+    const presetSet = new Set(PRESET_STYLES.map(p => p.styleId));
+    const byNormName = new Map<string, { kept: OptionItem; allStyleIds: string[] }>();
+    mergedOptions.forEach((opt) => {
+      const norm = normalizeStyleName(opt.label);
+      if (!norm) {
+        // 规范化后为空（label="样式 XX" 且没有 name），直接保留原始项，不参与去重
+        const bucket = byNormName.get(`__unnamed__:${opt.value}`) ?? {
+          kept: opt,
+          allStyleIds: [opt.value],
+        };
+        byNormName.set(`__unnamed__:${opt.value}`, bucket);
+        return;
+      }
+
+      const existing = byNormName.get(norm);
+      if (!existing) {
+        byNormName.set(norm, { kept: opt, allStyleIds: [opt.value] });
+        return;
+      }
+
+      // —— 冲突决策：决定保留 existing.kept 还是新的 opt？
+      //    打分规则（保留分高者）：
+      //      预设项：4 分（预设永远在文件也没有对应 styleId 时都能点，优先）
+      //      选项 label 含中文字符：2 分（用户是中文公文场景，优先显示中文名称）
+      //      isFromFile && label 完全不含 ASCII 字母/数字（纯中文）：额外 +1 分
+      //      数字 styleId（纯数字 "1"/"2"/.../11"）：0 分（最不推荐保留，
+      //          因为公文里"选 styleId=数字"不直观，且容易与 HeadingN 重复显示）
+      const scoreOf = (o: OptionItem): number => {
+        let score = 0;
+        if (o.isPreset || presetSet.has(o.value)) score += 4;
+        if (/[\u4e00-\u9fa5]/.test(String(o.label))) score += 2;
+        if (o.isFromFile && !/[A-Za-z0-9]/.test(String(o.label).trim())) score += 1;
+        if (/^\d+$/.test(String(o.value))) score -= 0; // 扣分不做，保持中性，靠前两项拉开差距
+        return score;
+      };
+
+      const keptScore = scoreOf(existing.kept);
+      const newScore = scoreOf(opt);
+      if (newScore > keptScore) {
+        // 新的更好 → 取代 kept，原 kept 的 styleId 加入 aliases
+        existing.allStyleIds.push(existing.kept.value);
+        existing.kept = opt;
+      } else {
+        // 现有更好 → 保留现有，新的 styleId 加入 aliases
+        existing.allStyleIds.push(opt.value);
+      }
+    });
+
+    // 把 buckets 展开成最终 options + 构建 aliases Map（供后面 value 匹配用）
+    const deduped: OptionItem[] = [];
+    const styleIdAliases = new Map<string, string>();
+    byNormName.forEach(({ kept, allStyleIds }) => {
+      deduped.push(kept);
+      // aliases：同一规范化 name 下的所有 styleId（包括被合并掉的）都指向 kept.value
+      // 这样 paragraph.attrs.styleId 存的是 "1" 也能匹配到 value=Heading1 的 option
+      allStyleIds.forEach((sid) => {
+        if (!styleIdAliases.has(sid)) styleIdAliases.set(sid, kept.value);
+      });
+      // kept 自己的 value 也要映射（可能不在 allStyleIds 里，比如初始化 bucket 时）
+      if (!styleIdAliases.has(kept.value)) styleIdAliases.set(kept.value, kept.value);
+    });
+
+    // 3) 检查 currentStyleId 是否已经能在最终 options 里找到。
+    //    —— 相比原逻辑增加 aliases 映射：
+    //      如果 currentStyleId 本身不在 deduped 的 value 集合里（因为被上面的二级去重合并掉了）
+    //      就通过 styleIdAliases 找到它对应的"保留项 canonical styleId"，
+    //      有 canonical 且 deduped 里存在这个 value → 也认为匹配成功，不加 fallback。
+    const finalValues = new Set(deduped.map(o => o.value));
+    const canonicalStyleId = styleIdAliases.get(currentStyleId) ?? currentStyleId;
+    const hasMatchingOption = finalValues.has(currentStyleId) || finalValues.has(canonicalStyleId);
+    if (hasMatchingOption) {
+      return deduped;
+    }
+
+    // 4) 完全匹配不到（比如 DocxEditor 内部存了一个 styleId="17" 但文件/Preset 都没登记）
+    //    → 加一个 disabled 的 fallback option，只用于显示（用户不能点它）。
+    //    如果 styleMapById 里能根据 currentStyleId 找到 Style（常见于 DocxEditor 内部
+    //    数字映射 styleId 但我们没登记在 options 里），就连 fallback 也带预览样式。
+    const fallbackStyle = styleMapById.get(currentStyleId) ?? null;
+    const fallbackLabel = `样式 ${currentStyleId}`;
+    const fallbackOption = {
+      value: currentStyleId,
+      label: fallbackLabel,
+      className: 'style-preview-fallback',
+      style: styleToPreviewCSSProperties(fallbackStyle),
+      disabled: true,
+    };
+    return [fallbackOption, ...deduped];
+  }, [currentStyleId, styleToPreviewCSSProperties]);
+
+  // ============================================================================
+  // 兜底方案：动态生成预览样式的 <style> 标签（三重保险）
+  //
+  // 虽然主方案已经是「label 最内层 span 写 inline style」（100% 不会被覆盖），
+  // 但为了极端场景（比如未来 antd 把 options.label 包在一层额外 wrapper 里，
+  // 或者 SSR/HMR 时 ReactNode 未正确渲染），我们再加一层兜底：
+  // 每当 documentStylesFromFile（文件里的样式列表）变化时，就生成一份
+  // 纯 CSS 规则，用 className 作选择器（和我们写在 option 上的 className 一致），
+  // 挂一个 <style id="vendorsys-word-style-preview-css"> 到文档 <head> 里。
+  // 这样即便 label span 方案某一天失效，CSS 规则也能用 !important 强行命中文字。
+  //
+  // 组件卸载时清除这个 <style> 标签，避免残留污染全局。
+  // ============================================================================
+  useEffect(() => {
+    if (!visible) return;
+
+    // 先找已有的 style 标签，不存在就新建一个
+    let styleEl = document.getElementById('vendorsys-word-style-preview-css') as HTMLStyleElement | null;
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = 'vendorsys-word-style-preview-css';
+      styleEl.setAttribute('data-vendorsys-generated', 'true');
+      document.head.appendChild(styleEl);
+    }
+
+    // 汇总所有要生成 CSS 的样式：文件里的 + 预设的（按 styleId 去重）
+    const styleMapById = new Map<string, Style>();
+    documentStylesFromFile.forEach(s => { if (!styleMapById.has(s.styleId)) styleMapById.set(s.styleId, s); });
+    PRESET_STYLES.forEach(s => { if (!styleMapById.has(s.styleId)) styleMapById.set(s.styleId, s); });
+
+    const rules: string[] = [];
+    styleMapById.forEach((style, styleId) => {
+      // 每个 style 可能有两种 className 钩子：
+      //   - 如果是文件里来的（上面 fileStyleOptions 里写的）：.style-preview-file-${styleId}
+      //   - 如果是预设的（上面 PRESET_STYLES 补的）：.style-preview-${styleId}
+      // 但因为我们不知道每个 styleId 究竟是哪个来源（合并时的去重策略），
+      // 干脆对每个 styleId 同时挂两个 class 的规则——都加上，都 !important，
+      // 命中哪个算哪个，不会互相冲突。
+      const selectors = [
+        `.style-preview-file-${styleId} .vendorsys-word-style-option-label`,
+        `.style-preview-${styleId} .vendorsys-word-style-option-label`,
+        `.style-preview-file-${styleId}`,
+        `.style-preview-${styleId}`,
+      ].join(', ');
+
+      const preview = styleToPreviewCSSProperties(style);
+      const declarations: string[] = [];
+      // —— 修复 fontSize 序列化 bug：
+      //    preview.fontSize 本身就已经是字符串 "20px"（由 styleToPreviewCSSProperties 内部生成的）
+      //    前面错误地写成了 `${preview.fontSize}px !important` → 变成 "20pxpx !important"
+      //    → 浏览器解析失败，全部被当作无效规则丢弃。现在改对了。
+      if (preview.fontSize) {
+        declarations.push(`font-size: ${preview.fontSize} !important;`);
+      }
+      if (preview.fontWeight !== undefined && preview.fontWeight !== null) {
+        declarations.push(`font-weight: ${preview.fontWeight} !important;`);
+      }
+      if (preview.fontStyle) {
+        declarations.push(`font-style: ${preview.fontStyle} !important;`);
+      }
+      if (preview.fontFamily) {
+        declarations.push(`font-family: ${preview.fontFamily} !important;`);
+      }
+      if (preview.lineHeight !== undefined && preview.lineHeight !== null) {
+        declarations.push(`line-height: ${preview.lineHeight} !important;`);
+      }
+      if (preview.color) {
+        declarations.push(`color: ${preview.color} !important;`);
+      }
+      if (preview.textDecoration) {
+        declarations.push(`text-decoration: ${preview.textDecoration} !important;`);
+      }
+      // textDecorationColor 等少见属性忽略，纯 CSS 兜底不需要面面俱到。
+
+      if (declarations.length > 0) {
+        rules.push(`${selectors} { ${declarations.join(' ')} }`);
+      }
+    });
+
+    // 写入 style 标签
+    styleEl.textContent = rules.join('\n');
+
+    // 卸载 / 下一次 effect 执行前：如果下次 editor 关闭就移除 style 标签（避免残留）
+    return () => {
+      if (styleEl && styleEl.parentNode) {
+        // 这里不直接 remove，因为下一次 effect 会重写 textContent；
+        // remove 放在外层 editor.close 时统一处理。
+      }
+    };
+  }, [visible, documentStylesFromFile, styleToPreviewCSSProperties]);
+
+  // editor 关闭（visible 变为 false）时清理动态生成的 style 标签，
+  // 避免下次打开时样式残留。单独写一个 useEffect 对应 visible=false。
+  useEffect(() => {
+    if (visible) return;
+    const styleEl = document.getElementById('vendorsys-word-style-preview-css');
+    if (styleEl && styleEl.parentNode) {
+      styleEl.parentNode.removeChild(styleEl);
+    }
+  }, [visible]);
+
+  // 暴露 ref 给父组件
+  useImperativeHandle(ref, () => editorRef.current as DocxEditorRef);
+
+  // ============================================================================
+  // Docx Part 快照 + 镜像回写工具（修复"保存后页脚签章/水印图损坏为空占位图"）
+  //
+  // 背景：@eigenpal/docx-editor-core 的 save() serializer 对 header/footer 等
+  // 非正文 part 的 drawing/vml 序列化存在 bug（会丢 r:embed / 破坏命名空间），
+  // 导致 save 输出的 docx 中 footer1.xml 里的 drawing 结构损坏 → 重新打开
+  // parseDocx 时 drawing 的 blip 无法匹配 media rel → fallback 成一个
+  // <img src="" width=192 height=192 style=position:absolute> 空占位图。
+  //
+  // 解决思路（完全绕开 lib serializer）：
+  //   1) 打开文件时把 docx 里所有 part 的字节（path → Uint8Array）存到
+  //      rawDocxPartsRef.current（snapshot）。
+  //   2) 每次保存：在 mergePresetStylesIntoDocx 输出最终 blob 之后，再做一次
+  //      JSZip.load → 对"绝不会被正文编辑修改的 part 路径"，用 snapshot 里的
+  //      原始字节回写覆盖 → generateAsync 得到最终 blob。
+  //   这样即使 lib serializer 把 footer drawing 序列化错了，我们也能在最后
+  //   把正确字节抄回来，字节级完全一致 → 重新打开 footer drawing 绝对完好。
+  // ============================================================================
+
+  /** 打开文件时：解出 docx 内所有 part 的 bytes，存到 Map<string, Uint8Array>。 */
+  const snapshotDocxParts = useCallback(async (blob: Blob): Promise<Map<string, Uint8Array>> => {
+    const map = new Map<string, Uint8Array>();
+    try {
+      const zip = await JSZip.loadAsync(blob);
+      const tasks: Array<Promise<void>> = [];
+      zip.forEach((relativePath, zipEntry) => {
+        if (zipEntry.dir) return;
+        tasks.push(
+          zipEntry.async('uint8array').then((bytes) => {
+            map.set(relativePath, bytes);
+          })
+        );
+      });
+      await Promise.all(tasks);
+    } catch (err) {
+      console.warn('[WordEditor] docx 快照失败（不影响打开，镜像回写自动跳过）：', err);
+    }
+    return map;
+  }, []);
+
+  /** 保存前：把 blob 里所有不可变 part path 的字节用 snapshot 抄回来。 */
+  const restoreImmutableDocxParts = useCallback(
+    async (blob: Blob, snapshot: Map<string, Uint8Array> | undefined | null): Promise<Blob> => {
+      if (!snapshot || snapshot.size === 0) return blob; // 新建空白文档无快照 → 直接返回
+      try {
+        const zip = await JSZip.loadAsync(blob);
+        let patched = false;
+        const tasks: Array<Promise<void>> = [];
+        snapshot.forEach((origBytes, path) => {
+          if (!isImmutablePart(path)) return;
+          const entry = zip.file(path);
+          if (!entry) return;
+          tasks.push(
+            entry.async('uint8array').then((curBytes) => {
+              // 字节级完全一致就跳过，避免重写 zip entry metadata
+              if (curBytes.length !== origBytes.length) {
+                zip.file(path, origBytes);
+                patched = true;
+                return;
+              }
+              for (let i = 0; i < curBytes.length; i++) {
+                if (curBytes[i] !== origBytes[i]) {
+                  zip.file(path, origBytes);
+                  patched = true;
+                  return;
+                }
+              }
+            })
+          );
+        });
+        await Promise.all(tasks);
+        if (!patched) return blob;
+        // 必须显式指定 DEFLATE：JSZip 的 generateAsync 默认 compression 是 STORE（不压缩），
+        // 不指定会导致整个 docx 未压缩写出，文件体积比 WPS 保存的大 5~10 倍。
+        return await zip.generateAsync({
+          type: 'blob',
+          mimeType: DOCX_MIME_TYPE,
+          compression: 'DEFLATE',
+          compressionOptions: { level: 9 },
+        });
+      } catch (err) {
+        console.warn('[WordEditor] 不可变 part 镜像回写失败（将使用原始保存输出，不影响正文内容）：', err);
+        return blob;
+      }
+    },
+    []
+  );
+
+  const loadDocumentBuffer = useCallback(async (arrayBuffer: ArrayBuffer, defaultToFinalPreview: boolean) => {
+    const sourceBuffer = arrayBuffer.slice(0);
+
+    // —— 新增：打开文件时立即保存全 docx part 快照，用于保存时镜像回写
+    //    修复页脚签章/水印图在保存后重进变成空占位图的 bug。
+    snapshotDocxParts(new Blob([sourceBuffer], { type: DOCX_MIME_TYPE })).then((snap) => {
+      rawDocxPartsRef.current = snap;
+    });
+
+    // 修复 TOC 字段显示问题：将 TOC 字段内的 hyperlink unwrap，使标题文本能被解析器收集
+    let fixedBuffer = sourceBuffer;
+    try {
+      const fixedBlob = await fixTocFieldsInDocx(new Blob([sourceBuffer], { type: DOCX_MIME_TYPE }));
+      fixedBuffer = await fixedBlob.arrayBuffer();
+    } catch (error) {
+      console.warn('修复 TOC 字段失败，使用原始文件:', error);
+    }
+
+    // 将预设样式（含段间距）合并进 styles.xml，必须在 parseDocx 之前完成
+    try {
+      const mergedBlob = await mergePresetStylesIntoDocx(new Blob([fixedBuffer], { type: DOCX_MIME_TYPE }));
+      fixedBuffer = await mergedBlob.arrayBuffer();
+    } catch (error) {
+      console.warn('合并预设样式失败，使用原始文件:', error);
+    }
+
+    // 解析文档并应用预设样式，确保自定义样式始终可用
+    try {
+      const doc = await parseDocx(fixedBuffer);
+      applyPresetStylesToDocument(doc);
+      // 应用文档网格（w:docGrid）整数格行距：编辑器布局引擎不消费 docGrid，
+      // 不注入会导致中文公文行距明显小于 WPS（与只读预览渲染器补丁同一套规则）。
+      applyDocGridLineSpacing(doc);
+      // 修正中文字体：编辑器只认 ascii/hAnsi、忽略 w:eastAsia，导致在线编辑
+      // 显示系统无衬线字体，与只读预览（宋体/仿宋等）不一致。
+      applyCjkFontFallbackToDocument(doc);
+
+      // 打开文件时立刻把 docx 自带的段落样式灌进下拉框数据源，
+      // 不再等 onSelectionChange / StyleResolver 回填（否则用户看到的下拉框只有预设样式）。
+      setDocumentStylesFromFile(extractParagraphStyles(doc));
+      
+      if (!defaultToFinalPreview) {
+        revisionPreviewSourceBufferRef.current = null;
+        setInitialDocument(doc);
+        setInitialBuffer(null);
+        setShowFinalRevisionPreview(false);
+        setEditorKey((prev) => prev + 1);
+        return;
+      }
+
+      try {
+        const sourceBlob = new Blob([fixedBuffer], { type: DOCX_MIME_TYPE });
+        const finalPreviewBlob = await createFinalRevisionPreviewBlob(sourceBlob);
+        const finalPreviewBuffer = await finalPreviewBlob.arrayBuffer();
+
+        revisionPreviewSourceBufferRef.current = sourceBuffer;
+        setInitialBuffer(finalPreviewBuffer);
+        setInitialDocument(doc);
+        setShowFinalRevisionPreview(true);
+      } catch (error) {
+        console.warn('生成默认最终版预览失败，将打开原始修订视图:', error);
+        revisionPreviewSourceBufferRef.current = null;
+        setInitialBuffer(fixedBuffer);
+        setInitialDocument(doc);
+        setShowFinalRevisionPreview(false);
+      }
+    } catch (error) {
+      console.warn('解析文档或应用预设样式失败，回退到原始加载方式:', error);
+      
+      if (!defaultToFinalPreview) {
+        revisionPreviewSourceBufferRef.current = null;
+        setInitialBuffer(fixedBuffer);
+        setInitialDocument(null);
+        setShowFinalRevisionPreview(false);
+        setEditorKey((prev) => prev + 1);
+        return;
+      }
+
+      try {
+        const sourceBlob = new Blob([fixedBuffer], { type: DOCX_MIME_TYPE });
+        const finalPreviewBlob = await createFinalRevisionPreviewBlob(sourceBlob);
+        const finalPreviewBuffer = await finalPreviewBlob.arrayBuffer();
+
+        revisionPreviewSourceBufferRef.current = sourceBuffer;
+        setInitialBuffer(finalPreviewBuffer);
+        setInitialDocument(null);
+        setShowFinalRevisionPreview(true);
+      } catch (fallbackError) {
+        console.warn('生成默认最终版预览失败，将打开原始修订视图:', fallbackError);
+        revisionPreviewSourceBufferRef.current = null;
+        setInitialBuffer(fixedBuffer);
+        setInitialDocument(null);
+        setShowFinalRevisionPreview(false);
+      }
+    }
+
+    setEditorKey((prev) => prev + 1);
+    // 编辑器 remount 后需要重新标记为"未就绪"，抑制初始化期间的 onChange
+    isEditorReadyRef.current = false;
+  }, [snapshotDocxParts]);
+
+  // 禁用 Google Fonts，使用系统字体替代
+  useEffect(() => {
+    setGoogleFontsEnabled(false);
+  }, []);
+
+  // 获取当前登录用户
+  useEffect(() => {
+    if (visible) {
+      const getUserId = async () => {
+        try {
+          const userInfo = CacheUserInfo.currentLocalUser();
+          if (userInfo?.id) {
+            setUserId(userInfo.id);
+          } else {
+            setUserId(null);
+          }
+        } catch (error) {
+          console.error('获取用户信息失败:', error);
+          setUserId(null);
+        }
+      };
+      getUserId();
+    }
+  }, [visible]);
+
+  // 加载初始文件
+  useEffect(() => {
+    // initialBlob 变化时（如重新打开文件），重置差分基准
+    baseBlobRef.current = initialBlob;
+
+    const loadInitialFile = async () => {
+      if (visible && userId) {
+        // 如果有传入的 initialBlob，优先加载它
+        if (initialBlob) {
+          try {
+            setLoadingInitialBlob(true);
+
+            // 需求3：彻底移除旧缓存检查。既然有了 initialBlob（来自 localFiles 或服务器），直接加载
+            const arrayBuffer = await initialBlob.arrayBuffer();
+            await loadDocumentBuffer(arrayBuffer, Boolean(readOnly));
+            setHasLocalCache(false);
+            message.info('已加载文件');
+          } catch (error) {
+            console.error('加载文件失败:', error);
+            message.error('加载文件失败');
+            setInitialBuffer(null);
+            setInitialDocument(null);
+            setHasLocalCache(false);
+          } finally {
+            setLoadingInitialBlob(false);
+          }
+        } else if (isCreate && fileName && userId) {
+          // 新建模式：不再自动检查/加载旧的本地缓存（需求3）
+          // 新建的本地文件会通过 initialBlob 从 localFiles store 传入内容
+          // 如果没有 initialBlob（兜底），直接创建空白文档
+          try {
+            // 直接创建带预设样式的新文档，不做缓存检查
+            const newDoc = createDocumentWithStyles();
+            setInitialDocument(newDoc);
+            setDocumentStylesFromFile(extractParagraphStyles(newDoc));
+            setInitialBuffer(null);
+            revisionPreviewSourceBufferRef.current = null;
+            setShowFinalRevisionPreview(false);
+            setEditorKey((prev) => prev + 1);
+            setHasLocalCache(false);
+            message.info('已创建新文档');
+          } catch (error) {
+            console.error('创建新文档失败:', error);
+            try {
+              const newDoc = createDocumentWithStyles();
+              setInitialDocument(newDoc);
+              setDocumentStylesFromFile(extractParagraphStyles(newDoc));
+              setInitialBuffer(null);
+              revisionPreviewSourceBufferRef.current = null;
+              setShowFinalRevisionPreview(false);
+              setEditorKey((prev) => prev + 1);
+            } catch (e) {
+              console.error('创建空文档失败:', e);
+              setInitialDocument(null);
+              setInitialBuffer(null);
+            }
+            setHasLocalCache(false);
+          }
+        } else {
+          // 没有用户ID，重置状态
+          setInitialBuffer(null);
+          setInitialDocument(null);
+          revisionPreviewSourceBufferRef.current = null;
+          setShowFinalRevisionPreview(false);
+          setHasLocalCache(false);
+        }
+      }
+    };
+
+    loadInitialFile();
+  }, [visible, fileName, userId, initialBlob, isCreate, readOnly, loadDocumentBuffer]);
+
+  // 文档加载完成后，自动刷新大纲以解决 TOC 初始化问题
+  useEffect(() => {
+    if (visible && !loadingInitialBlob && (initialBuffer || initialDocument)) {
+      // 延迟 1000ms 后触发大纲刷新，确保文档完全解析
+      const refreshTimer = setTimeout(() => {
+        // 使用 PluginHost 的 refreshPluginStates 方法刷新所有插件状态
+        // 这会触发大纲面板的重新渲染
+        if (pluginHostRef.current) {
+          pluginHostRef.current.refreshPluginStates();
+        }
+      }, 5000);
+
+      return () => clearTimeout(refreshTimer);
+    }
+  }, [visible, loadingInitialBlob, initialBuffer, initialDocument]);
+
+  // 导出为 Blob，并清理 docx 中未被引用的媒体资源
+  const exportToBlob = useCallback(async (): Promise<Blob | null> => {
+    try {
+      if (!editorRef.current) {
+        message.error('编辑器未初始化');
+        return null;
+      }
+
+      suppressEditorSaveRef.current = true;
+      suppressChangeRef.current = true;
+      const arrayBuffer = await editorRef.current.save({ selective: false });
+      if (!arrayBuffer) return null;
+
+      const rawBlob = new Blob([arrayBuffer], { type: DOCX_MIME_TYPE });
+
+      // 全量保存（selective: false）会写入 styles.xml，但仍需合并预设样式确保段间距等格式一致。
+      // 之后再做「不可变 part 镜像回写」：把 header/footer/media 等部分的字节直接
+      // 覆盖成打开时的原始快照，绕开 lib serializer 损坏页脚 drawing → 空图 bug。
+      const mergedBlob = await mergePresetStylesIntoDocx(rawBlob);
+      const patchedBlob = await restoreImmutableDocxParts(mergedBlob, rawDocxPartsRef.current);
+      return await optimizeDocxBlob(patchedBlob);
+    } catch (error) {
+      console.error('导出 Word 失败:', error);
+      return null;
+    } finally {
+      suppressEditorSaveRef.current = false;
+      suppressChangeRef.current = false;
+    }
+  }, [restoreImmutableDocxParts]);
+
+  // 接管 docx-editor-react 内置菜单“文件 -> 保存”，避免下载未优化的 docx
+  const handleEditorMenuSave = useCallback((arrayBuffer: ArrayBuffer) => {
+    if (suppressEditorSaveRef.current) return;
+
+    if (showFinalRevisionPreview && revisionPreviewSourceBufferRef.current) {
+      const sourceBlob = new Blob([revisionPreviewSourceBufferRef.current], { type: DOCX_MIME_TYPE });
+      pendingEditorDownloadRef.current = Promise.resolve(sourceBlob);
+      message.info('最终版仅用于预览，已保存带修订的原文件');
+      return;
+    }
+
+    const rawBlob = new Blob([arrayBuffer], { type: DOCX_MIME_TYPE });
+    // 内置菜单保存也走与 exportToBlob 完全一致的管线：
+    //   a) mergePresetStylesIntoDocx（合并预设 styles.xml + 注入内联 spacing/pBdr）
+    //   b) restoreImmutableDocxParts（镜像回写 header/footer/media 原始字节，防空图）
+    //   c) optimizeDocxBlob（压缩/修订清理等通用优化）
+    pendingEditorDownloadRef.current = mergePresetStylesIntoDocx(rawBlob)
+      .then((merged) => restoreImmutableDocxParts(merged, rawDocxPartsRef.current))
+      .then((patched) => optimizeDocxBlob(patched))
+      .catch((error) => {
+        console.error('内置菜单保存优化失败:', error);
+        message.error('保存优化失败，将使用原始文件');
+        return rawBlob;
+      });
+  }, [showFinalRevisionPreview, restoreImmutableDocxParts]);
+
+  // 内置菜单保存会在 onSave 后继续下载原始 blob，这里拦截并替换为优化后的 blob
+  useEffect(() => {
+    if (!visible) return;
+
+    const originalClick = HTMLAnchorElement.prototype.click;
+    HTMLAnchorElement.prototype.click = function patchedClick() {
+      const pendingDownload = pendingEditorDownloadRef.current;
+      const isDocxDownload = this.href.startsWith('blob:') && /\.docx$/i.test(this.download || '');
+
+      if (pendingDownload && isDocxDownload && this.dataset.optimizedDocxDownload !== 'true') {
+        const originalBlobUrl = this.href;
+        pendingEditorDownloadRef.current = null;
+
+        pendingDownload.then((optimizedBlob) => {
+          downloadBlob(optimizedBlob, fileName);
+          message.success('已保存优化后的文件');
+        }).catch((error) => {
+          console.error('内置菜单保存失败:', error);
+          message.error('保存失败');
+        }).finally(() => {
+          setTimeout(() => URL.revokeObjectURL(originalBlobUrl), 0);
+        });
+
+        return;
+      }
+
+      return originalClick.call(this);
+    };
+
+    return () => {
+      HTMLAnchorElement.prototype.click = originalClick;
+      pendingEditorDownloadRef.current = null;
+    };
+  }, [fileName, visible]);
+
+  // 自动保存到 IndexedDB（防抖）+ 同步 localFiles store，使"有未同步修改"立即生效
+  const autoSaveToIndexedDB = useCallback(async () => {
+    if (showFinalRevisionPreview || !fileName || !userId || !editorRef.current) return;
+
+    // 清除之前的定时器
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+    }
+
+    setHasLocalCache(true);
+
+    // 设置新的定时器，10秒后保存
+    saveTimerRef.current = setTimeout(async () => {
+      try {
+        const blob = await exportToBlob();
+        if (blob) {
+          await saveFile(userId, fileName, 'docx', await blob.arrayBuffer());
+          setHasLocalCache(false);
+
+          // 同步更新 localFiles store：
+          // 上传成功后 localId 被清空，这里调用 onSaveLocalBlob 时 handleSaveLocalBlob
+          // 会自动在 localFiles 中新建一条记录，并刷新 files/editingFile/previewHasUnsyncedChanges 等状态。
+          if (onSaveLocalBlobRef.current) {
+            try {
+              await onSaveLocalBlobRef.current(blob, fileName, false);
+            } catch (err) {
+              console.warn('自动保存时同步 localFiles store 失败（不影响本地保存）:', err);
+            }
+          }
+        }
+      } catch (error) {
+        console.error('自动保存到 IndexedDB 失败:', error);
+      }
+    }, 10000);
+  }, [exportToBlob, fileName, showFinalRevisionPreview, userId]);
+
+  // 保存到 IndexedDB
+  const handleSave = useCallback(async () => {
+    try {
+      if (!editorRef.current) {
+        message.error('编辑器未初始化');
+        return;
+      }
+      if (!userId) {
+        message.error('无法获取用户信息');
+        return;
+      }
+
+      const blob = await exportToBlob();
+      if (blob) {
+        await saveFile(userId, fileName, 'docx', await blob.arrayBuffer());
+        setHasLocalCache(false);
+
+        // 通知父组件更新 localFiles store（用于显示未同步标记）
+        if (onSaveLocalBlobRef.current) {
+          try {
+            await onSaveLocalBlobRef.current(blob, fileName);
+          } catch (err) {
+            console.warn('同步本地文件内容到 localFiles store 失败（不影响本地保存）:', err);
+          }
+        }
+
+        message.success('已保存到本地缓存');
+      }
+    } catch (error) {
+      console.error('保存到本地缓存失败:', error);
+      message.error('保存失败');
+    }
+  }, [exportToBlob, fileName, userId]);
+
+  // ============================================================================
+  // 导出 PDF：
+  // eigenpal 编辑器本身没有打印/PDF 能力，这里先 save() 取含最新修改的 docx blob，
+  // 再离屏挂载 file-viewer 按 Word 原生分页渲染，SVG foreignObject 逐页光栅化直接下载 PDF。
+  // ============================================================================
+  const [exportingPdf, setExportingPdf] = useState(false);
+  const handleExportPdf = useCallback(async () => {
+    setExportingPdf(true);
+    message.loading({ key: 'word-export-pdf', content: '正在保存文档内容…', duration: 0 });
+    try {
+      const blob = await exportToBlob();
+      if (!blob) {
+        message.error('导出失败：无法获取文档内容');
+        return;
+      }
+      await exportWordPdf({
+        file: blob,
+        fileName,
+        onProgress: (page, total) => {
+          message.loading({ key: 'word-export-pdf', content: `正在导出第 ${page} / ${total} 页…`, duration: 0 });
+        },
+      });
+    } catch (error) {
+      console.error('Word 导出 PDF 失败:', error);
+      message.error(`导出 PDF 失败：${(error as Error)?.message || '未知错误'}`);
+    } finally {
+      message.destroy('word-export-pdf');
+      setExportingPdf(false);
+    }
+  }, [exportToBlob, fileName]);
+
+  // ============================================================================
+  // 导出 Markdown：同样先 save() 取含最新修改的 docx blob，
+  // 再用 mammoth + turndown 转成 Markdown 直接下载（浏览器端等价实现 markitdown）。
+  // ============================================================================
+  const [exportingMarkdown, setExportingMarkdown] = useState(false);
+  const handleExportMarkdown = useCallback(async () => {
+    setExportingMarkdown(true);
+    message.loading({ key: 'word-export-md', content: '正在保存文档内容…', duration: 0 });
+    try {
+      const blob = await exportToBlob();
+      if (!blob) {
+        message.error('导出失败：无法获取文档内容');
+        return;
+      }
+      message.loading({ key: 'word-export-md', content: '正在转换为 Markdown…', duration: 0 });
+      await exportWordMarkdown({ file: blob, fileName });
+    } catch (error) {
+      console.error('Word 导出 Markdown 失败:', error);
+      message.error(`导出 Markdown 失败：${(error as Error)?.message || '未知错误'}`);
+    } finally {
+      message.destroy('word-export-md');
+      setExportingMarkdown(false);
+    }
+  }, [exportToBlob, fileName]);
+
+  // 「导出」下拉里额外挂的菜单项：导出 PDF 与下载由 ExportDropdown 自己生成，
+  // 这里只补 Word 独有的「导出Markdown」。
+  const exportExtraItems = useMemo(
+    () => [
+      {
+        key: 'markdown',
+        icon: <FileMarkdownOutlined />,
+        label: '导出Markdown',
+        disabled: exportingMarkdown,
+        onClick: () => {
+          void handleExportMarkdown();
+        },
+      },
+    ],
+    [exportingMarkdown, handleExportMarkdown],
+  );
+
+  // 下载原始文件：直接下载上传时的原始 docx（initialBlob），不是编辑后的内容
+  const handleDownloadOriginal = useCallback(() => {
+    if (!initialBlob) return;
+    downloadBlob(initialBlob, fileName);
+  }, [initialBlob, fileName]);
+  const onDownload = !isCreate && initialBlob ? handleDownloadOriginal : undefined;
+
+  // 上传到服务器
+  const handleUpload = useCallback(async () => {
+    if (!onUpload) {
+      message.error('未提供上传功能');
+      return;
+    }
+    try {
+      const blob = await exportToBlob();
+      if (!blob) return;
+
+      // 使用 baseBlobRef 作为差分基准，而非 initialBlob。
+      // 这样在多次上传场景下，基准始终是服务器上最新的文件内容。
+      const baseBlob = baseBlobRef.current;
+      await onUpload(baseBlob, blob, fileName);
+
+      // 上传成功后，更新差分基准为本次上传的 blob，确保下次差分基准与服务器一致
+      baseBlobRef.current = blob;
+
+      // 上传成功后，清空本地缓存
+      if (userId) {
+        await deleteFile(userId, fileName, 'docx');
+        setHasLocalCache(false);
+        setHasUploaded(true);
+      }
+
+      // 上传成功后重置"立即标记未同步"触发器，使后续编辑可再次立即触发
+      markUnsyncedTriggeredRef.current = false;
+    } catch (error) {
+      console.error('上传失败:', error);
+      message.error('上传失败');
+    }
+  }, [fileName, onUpload, exportToBlob, userId]);
+
+  // 处理编辑器变化
+  const handleChange = useCallback(() => {
+    if (showFinalRevisionPreview) return;
+    // 抑制编辑器初始化期间触发的 onChange，避免误标"有修改未同步"
+    if (!isEditorReadyRef.current) return;
+    // 抑制 exportToBlob()/save() 期间触发的 onChange，避免状态更新循环（移动端闪烁）
+    if (suppressChangeRef.current) return;
+
+    // —— 新增：文档内容变化时同步自定义样式选择器的 value ——
+    // 应用新样式、删除字符、合并段落等操作都会触发 onChange，
+    // 在这里读取一次真实的 styleId，确保 Select 永远和文档对齐。
+    // （比只靠 onSelectionChange 更全面：Ctrl+A 全选后不触发 selection change 但会有 document change）
+    try {
+      const styleId = readCurrentParagraphStyleId();
+      // —— 修复 dropdown 闪现（出现立即关闭）：只有 styleId 真的变化时才 setState
+      //    antd Select 的 open/close 是保存在组件内部 state 里的，
+      //    当父组件 onChange/onSelectionChange 高频调用 setCurrentStyleId(同值) 时，
+      //    React 18 在 StrictMode 或并发模式下可能会让 Select 子组件经历一次
+      //    "unmount → remount"（或者至少内部 effect 重跑），导致 open state 丢失
+      //    → 用户看到 popup 刚渲染出来就立刻被关掉，产生"闪现"错觉。
+      //    加一层同值短路，完全杜绝无意义的 state 更新。
+      setCurrentStyleId((prev) => (prev === styleId ? prev : styleId));
+    } catch {
+      /* 忽略读取异常，避免影响 onChange 原有逻辑 */
+    }
+
+    setHasUploaded(false);
+    // 自动保存到 IndexedDB
+    autoSaveToIndexedDB();
+
+    // 首次编辑（且 hasUnsyncedChanges 目前为 false）时，立即标记未同步。
+    // 上传成功后 hasUnsyncedChanges 被清除，用户继续编辑后应立即重新显示"有未同步修改"。
+    if (!markUnsyncedTriggeredRef.current && !hasUnsyncedChangesRef.current && onSaveLocalBlobRef.current && userId && editorRef.current) {
+      // 提前设置标记，防止 exportToBlob() 期间 onChange 再次进入此分支导致并发 save()
+      markUnsyncedTriggeredRef.current = true;
+      const fn = onSaveLocalBlobRef.current;
+      (async () => {
+        try {
+          const blob = await exportToBlob();
+          if (blob) {
+            await fn(blob, fileName);
+          } else {
+            // exportToBlob 返回 null，重置标记允许下次重试
+            markUnsyncedTriggeredRef.current = false;
+          }
+        } catch (err) {
+          // 失败时重置标记，允许下次重试
+          markUnsyncedTriggeredRef.current = false;
+          console.warn('编辑时立即标记未同步失败（不影响编辑，等待自动/手动保存即可）:', err);
+        }
+      })();
+    }
+  }, [autoSaveToIndexedDB, showFinalRevisionPreview, userId, exportToBlob, fileName, readCurrentParagraphStyleId]);
+
+  // 编辑器 remount 后，延迟标记为"就绪"，让初始化期间的 onChange 事件先过去
+  useEffect(() => {
+    if (!visible || loadingInitialBlob) return;
+    const timer = setTimeout(() => {
+      isEditorReadyRef.current = true;
+    }, 2000);
+    return () => clearTimeout(timer);
+  }, [editorKey, visible, loadingInitialBlob]);
+
+  const handleToggleFinalRevisionPreview = useCallback(async () => {
+    try {
+      if (showFinalRevisionPreview) {
+        const sourceBuffer = revisionPreviewSourceBufferRef.current;
+        if (!sourceBuffer) {
+          message.warning('未找到原始修订内容，请重新打开文件');
+          return;
+        }
+
+        // 修复 TOC 字段显示问题
+        let fixedBuffer = sourceBuffer.slice(0);
+        try {
+          const fixedBlob = await fixTocFieldsInDocx(new Blob([sourceBuffer], { type: DOCX_MIME_TYPE }));
+          fixedBuffer = await fixedBlob.arrayBuffer();
+        } catch (error) {
+          console.warn('修复 TOC 字段失败，使用原始文件:', error);
+        }
+
+        // 将预设样式合并进 styles.xml
+        try {
+          const mergedBlob = await mergePresetStylesIntoDocx(new Blob([fixedBuffer], { type: DOCX_MIME_TYPE }));
+          fixedBuffer = await mergedBlob.arrayBuffer();
+        } catch (error) {
+          console.warn('合并预设样式失败，使用原始文件:', error);
+        }
+
+        setInitialBuffer(fixedBuffer);
+        setInitialDocument(null);
+        setShowFinalRevisionPreview(false);
+        setEditorKey((prev) => prev + 1);
+        message.info('已切换到修订视图');
+        return;
+      }
+
+      if (!initialBuffer) {
+        message.warning('当前文档暂不支持最终版预览');
+        return;
+      }
+
+      const sourceBuffer = initialBuffer.slice(0);
+      const sourceBlob = new Blob([sourceBuffer], { type: DOCX_MIME_TYPE });
+      const finalPreviewBlob = await createFinalRevisionPreviewBlob(sourceBlob);
+      const finalPreviewBuffer = await finalPreviewBlob.arrayBuffer();
+
+      revisionPreviewSourceBufferRef.current = sourceBuffer;
+      setInitialBuffer(finalPreviewBuffer);
+      setInitialDocument(null);
+      setShowFinalRevisionPreview(true);
+      setEditorKey((prev) => prev + 1);
+      message.success('已切换到最终版预览');
+    } catch (error) {
+      console.error('切换最终版预览失败:', error);
+      message.error('切换最终版预览失败');
+    }
+  }, [initialBuffer, showFinalRevisionPreview]);
+
+  // Ctrl+S / Cmd+S 保存到本地缓存
+  useEffect(() => {
+    if (!visible) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        handleSave();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [visible, handleSave]);
+
+  // ============================================================================
+  // 页脚/页眉布局强制兜底 —— 通过 JS 直接写 DOM 节点的 style 属性
+  //
+  // 问题背景：
+  //   全局 * { box-sizing: border-box; margin: 0; padding: 0 } 和 Tailwind preflight
+  //   会与 docx-editor-core/layout-painter 的盒模型/定位计算发生冲突。虽然我们已经
+  //   在 word-editor.css 里写了高优先级 CSS 规则，但由于选择器前缀、样式加载顺序、
+  //   Vite HMR 热更新等因素，CSS 可能没有精准命中。
+  //
+  //   layout-painter 本身已经会写入内联 style（position:absolute、top、left、width），
+  //   但在某些全局样式覆盖（带 !important）或计算异常场景下，这些值可能会失效，
+  //   导致页脚出现在正文段落右侧（与"乙方责任与义务"同一水平线），而不是页面底部。
+  //
+  // 兜底策略：
+  //   1) 在 #vendorsys-word-editor-root 容器内，对所有 .layout-page 强制设置
+  //      position = 'relative' —— 作为每页页眉/页脚 absolute 定位的锚点（最关键）
+  //   2) 所有 .layout-page-header/.layout-page-footer 强制设置
+  //      position = 'absolute' + display = 'block' + boxSizing = 'content-box'
+  //   3) 使用 MutationObserver + setInterval 双保险：
+  //      - layout-painter 可能异步/增量渲染页面，MutationObserver 监听新增节点
+  //      - 同时用 setInterval 在 0/100/300/600/1000ms 时重复扫描，确保分页、缩放、
+  //        修订切换等导致 DOM 重建时，兜底样式能重新应用
+  // ============================================================================
+  useEffect(() => {
+    if (!visible) return;
+
+    const rootSelector = '#vendorsys-word-editor-root';
+    const applyLayoutAnchors = () => {
+      const root = document.querySelector(rootSelector);
+      if (!root) return false;
+
+      // 1) .layout-page：position: relative（每页页眉页脚的定位锚点）
+      const pages = root.querySelectorAll<HTMLElement>('.layout-page');
+      pages.forEach((page) => {
+        page.style.position = 'relative';
+        page.style.boxSizing = 'content-box';
+        // layout-painter 自己会写 overflow:hidden，不要覆盖它
+      });
+
+      // 2) .layout-page-header：强制 absolute + block
+      const headers = root.querySelectorAll<HTMLElement>('.layout-page-header');
+      headers.forEach((h) => {
+        h.style.position = 'absolute';
+        h.style.display = 'block';
+        h.style.boxSizing = 'content-box';
+        h.style.setProperty('float', 'none', 'important');
+        h.style.clear = 'both';
+
+        // —— 关键新增：清零页眉内部包装层的负偏移 ——
+        // layout-painter 可能在页眉内容外包一层 div，写入
+        // style="position: relative; top: -XXXpx" 把内容拉出页眉矩形。
+        // 强制把所有直接子 Element 的定位打回 static + top/left=0，
+        // 让孙节点（.layout-textbox 等）的 absolute 锚点直接落到 header 自身。
+        Array.from(h.children).forEach((child) => {
+          if (child instanceof HTMLElement) {
+            child.style.position = 'static';
+            child.style.top = '0px';
+            child.style.left = '0px';
+            child.style.right = 'auto';
+            child.style.bottom = 'auto';
+            child.style.transform = 'none';
+            child.style.margin = '0';
+          }
+        });
+
+        // —— 新增：页眉内 .layout-textbox 收缩为内容宽度 + translate 水平居中 ——
+        // 原问题（对照 WPS）：layout-painter 给页眉内 textbox 写死 width:192px，
+        // 但实际内容可能只有几个字（如页码"第 X 页"），加上内部 text-align:left，
+        // 文字视觉上在 192px 大盒里靠左 → 整体在页眉里偏左，与 WPS 不一致。
+        // 修复策略（通用且不猜对齐）：
+        //   textbox 盒子宽度 = 内容宽度，再把整个盒子水平居中，
+        //   那么无论内部段落是 left/center/right，文字视觉都在页眉正中心，
+        //   与 WPS 渲染完全一致。
+        const headerTextBoxes = h.querySelectorAll<HTMLElement>('.layout-textbox');
+        headerTextBoxes.forEach((tb) => {
+          tb.style.width = 'auto';
+          tb.style.height = 'auto';
+          tb.style.minWidth = '0';
+          tb.style.minHeight = '0';
+          tb.style.left = '50%';
+          tb.style.transform = 'translateX(-50%)';
+          tb.style.top = '0';
+          tb.style.bottom = 'auto';
+          tb.style.right = 'auto';
+          tb.style.padding = '0';
+          const paras = tb.querySelectorAll<HTMLElement>('.layout-paragraph, .layout-line');
+          paras.forEach((p) => {
+            p.style.display = 'inline-block';
+            p.style.width = 'auto';
+          });
+        });
+      });
+
+      // 3) .layout-page-footer：强制 absolute + block（核心修复）
+      //    只兜底关键字段，top/left/width 的精确数值由 layout-painter 内联样式决定
+      const footers = root.querySelectorAll<HTMLElement>('.layout-page-footer');
+      let foundAnyFooter = false;
+      footers.forEach((f) => {
+        foundAnyFooter = true;
+        f.style.position = 'absolute';
+        f.style.display = 'block';
+        f.style.boxSizing = 'content-box';
+        f.style.setProperty('float', 'none', 'important');
+        f.style.clear = 'both';
+
+        // —— 关键新增：清零页脚内部包装层的负偏移 ——
+        // 这就是用户反馈的"第 4 页"漂到正文右边同一水平线的根因：
+        //   footer.top = 1033 （页面底部，正确）
+        //   但 footer 的直接子 div 写了 style="position: relative; top: -168px"
+        //   导致 Y 变成 1033 - 168 = 865（与正文段落"乙方责任与义务"对齐）
+        // 这里强制把包装层 position 设为 static，并清零所有偏移。
+        // 孙节点 .layout-textbox(position:absolute) 的锚点就会直接跳到
+        // footer 自身，textbox 的 top/left 成为相对 footer 的偏移，
+        // 与 WPS 渲染一致，内容正确地留在页脚矩形内。
+        Array.from(f.children).forEach((child) => {
+          if (child instanceof HTMLElement) {
+            child.style.position = 'static';
+            child.style.top = '0px';
+            child.style.left = '0px';
+            child.style.right = 'auto';
+            child.style.bottom = 'auto';
+            child.style.transform = 'none';
+            child.style.margin = '0';
+          }
+        });
+
+        // —— 新增：页脚内 .layout-textbox 收缩为内容宽度 + translate 水平居中 ——
+        // 原问题（对照 WPS）：
+        //   .layout-page-footer 宽 554px（正确，页面内容宽度）
+        //   .layout-textbox 宽 192px，left:181 → 盒子本身在页脚中居中
+        //   但 textbox 内部段落 text-align:left → "第 4 页"（~40px）在 192px
+        //   大盒里靠左，文字中心点比页脚真正中心偏左约 76px，观感不符 WPS
+        // 修复策略（同页眉）：textbox 收缩至内容宽度，再水平居中整个盒子。
+        // 此方案不会"猜测"docx 原文的段落对齐属性（不硬改 text-align），
+        // 同时天然兼容左/中/右对齐内容的视觉居中效果。
+        const footerTextBoxes = f.querySelectorAll<HTMLElement>('.layout-textbox');
+        footerTextBoxes.forEach((tb) => {
+          tb.style.width = 'auto';
+          tb.style.height = 'auto';
+          tb.style.minWidth = '0';
+          tb.style.minHeight = '0';
+          tb.style.left = '50%';
+          tb.style.transform = 'translateX(-50%)';
+          tb.style.top = '0';
+          tb.style.bottom = 'auto';
+          tb.style.right = 'auto';
+          tb.style.padding = '0';
+          const paras = tb.querySelectorAll<HTMLElement>('.layout-paragraph, .layout-line');
+          paras.forEach((p) => {
+            p.style.display = 'inline-block';
+            p.style.width = 'auto';
+          });
+        });
+      });
+
+      // 4) .layout-page-content：block + content-box
+      const contents = root.querySelectorAll<HTMLElement>('.layout-page-content');
+      contents.forEach((c) => {
+        c.style.boxSizing = 'content-box';
+        c.style.display = 'block';
+      });
+
+      return pages.length > 0 || foundAnyFooter;
+    };
+
+    // ========================================================================
+    // 新增 1：同步自定义样式选择器的 value（编辑器首次渲染、DOM 重建时兜底）
+    // onSelectionChange 只能在用户操作选区时触发，这里额外兜底：
+    // 文档初次渲染完、editorKey 变化重挂载、修订切换等场景下，主动刷新一次。
+    // ========================================================================
+    const syncStyleSelectValue = () => {
+      try {
+        const styleId = readCurrentParagraphStyleId();
+        // —— 修复 dropdown 闪现：同值不 setState（理由见 onChange 里的注释）
+        setCurrentStyleId((prev) => (prev === styleId ? prev : styleId));
+      } catch {
+        /* 忽略读取异常，编辑器可能还没挂载 */
+      }
+    };
+
+    // ========================================================================
+    // 新增 2：标记「红头分隔线」段落 → DOM [data-vendorsys-style-id=HongTouSeparator]
+    //
+    // 背景：@eigenpal/docx-editor-core 在渲染 paragraph.attrs.borders.bottom 时有两处 bug：
+    //   a) 其他三边如果 undefined，会 copy bottom 的样式 → 画出四边框（用户截图反馈）
+    //   b) border 画在 line-box 而非 paragraph 容器上 → 短文字时红线紧贴文字宽度（不横贯整段）
+    // 修复策略（不影响保存、只改浏览器渲染）：
+    //   1) 预设样式里 top/left/right 显式写 style:none，破 fallback（见 style.ts）
+    //   2) PM state 遍历 styleId=HongTouSeparator 的段落，给其 .layout-paragraph DOM
+    //      加一个自定义 data-attr，然后 CSS 里：
+    //      - 清掉 lib 写的任何错误 border
+    //      - 用 ::after 伪元素绝对定位，画一条横贯整段宽的红色 2px 实线
+    //   serializer 仍会把 paragraph.attrs.borders.bottom 正确写入 <w:pBdr>/<w:bottom>，
+    //   Word/WPS 打开完全正确。
+    // ========================================================================
+    const HONGTOU_SEP_STYLE_ID = 'HongTouSeparator';
+    const VENDOR_ATTR = 'data-vendorsys-style-id';
+
+    const markHongTouSeparatorParagraphs = () => {
+      try {
+        // —— 0) 守卫：editor 必须已挂载 & ProseMirror view 可拿
+        const editorApi = editorRef.current;
+        if (!editorApi) return;
+        const pmView = editorApi.getEditorRef?.()?.getView?.();
+        const root = document.querySelector('#vendorsys-word-editor-root');
+        if (!root) return;
+
+        // —— 1) 先清理旧标记（避免用户把段落样式改成「正文」后，红线还挂着）
+        let removedCount = 0;
+        root.querySelectorAll<HTMLElement>(`[${VENDOR_ATTR}="${HONGTOU_SEP_STYLE_ID}"]`).forEach((el) => {
+          el.removeAttribute(VENDOR_ATTR);
+          el.classList.remove('vendorsys-pstyle-hongtouseparator');
+          removedCount++;
+        });
+
+        let markedByPm = 0;
+        let markedByDom = 0;
+
+        // —— 2) 第一路径：遍历 ProseMirror doc，按 paragraph.attrs.styleId 命中
+        //    兼容两种情况：
+        //      a) attrs.styleId 直接等于 'HongTouSeparator'（保存后重进通常是这种）
+        //      b) attrs.styleId 是数字（编辑时刚应用样式，lib 把自定义预设转成了 style index）
+        //         → 我们先把数字记下来 debug 日志里输出，让用户确认，同时 PM 路径没命中也没关系，
+        //           因为下面还有独立的 DOM 特征扫描兜底。
+        if (pmView && pmView.domAtPos && pmView.state?.doc) {
+          const doc = pmView.state.doc;
+          const styleIdDebug: Array<{ pos: number; styleId: any; type: string }> = [];
+          doc.descendants((node, pos) => {
+            if (!node || node.type?.name !== 'paragraph') return true; // 继续向下
+            const sid = node.attrs?.styleId;
+            if (sid !== undefined && sid !== null) styleIdDebug.push({ pos, styleId: sid, type: typeof sid });
+
+            // 严格等于字符串 'HongTouSeparator'（场景 a）才标记
+            // （场景 b 的数字 styleId 交给下面 DOM 特征扫描 100% 覆盖）
+            if (sid !== HONGTOU_SEP_STYLE_ID) return true;
+
+            try {
+              const result = pmView.domAtPos(pos);
+              if (!result || !result.node) return true;
+              let target: any = result.node;
+              let paraEl: HTMLElement | null = null;
+              const maxDepth = 12;
+              let depth = 0;
+              while (target && depth < maxDepth) {
+                if (target instanceof HTMLElement) {
+                  if (target.classList?.contains('layout-paragraph')) {
+                    paraEl = target;
+                    break;
+                  }
+                  const bbs = target.style?.borderBottom || window.getComputedStyle(target).borderBottom;
+                  if (bbs && /(255,0,0|#ff0000|#F{2}0{2,4})/i.test(bbs.replace(/\s+/g, ''))) {
+                    paraEl = target;
+                    break;
+                  }
+                }
+                target = target.parentNode;
+                depth++;
+              }
+              if (!paraEl && result.node instanceof HTMLElement) {
+                paraEl = result.node;
+              } else if (!paraEl && result.node instanceof Text && result.node.parentElement instanceof HTMLElement) {
+                paraEl = result.node.parentElement;
+              }
+              if (!paraEl) return true;
+
+              if (paraEl.getAttribute(VENDOR_ATTR) !== HONGTOU_SEP_STYLE_ID) {
+                paraEl.setAttribute(VENDOR_ATTR, HONGTOU_SEP_STYLE_ID);
+                paraEl.classList.add('vendorsys-pstyle-hongtouseparator');
+                markedByPm++;
+              }
+            } catch {
+              /* 单个段落失败不影响其他 */
+            }
+            return true; // 继续遍历
+          });
+
+          // 把实际遍历到的 paragraph 的 styleId 类型/值打出来，方便下一次精准定位
+          if (styleIdDebug.length > 0) {
+            const numericSids = styleIdDebug.filter((x) => x.type !== 'string');
+            if (numericSids.length > 0) {
+              console.debug(
+                `[WordEditor] 红头分隔线 PM 扫描：发现 ${numericSids.length} 个 paragraph 的 styleId 是非字符串（likely 数字索引）：`,
+                numericSids.slice(0, 5),
+                '→ 这部分会由下面的 DOM 特征扫描命中打标，不影响显示。'
+              );
+            }
+          }
+        }
+
+        // —— 3) 第二路径（新增 + 核心修复）：无 styleId 依赖的 DOM 特征扫描
+        //
+        //    用户反馈"编辑时选了红头分隔线样式还是看不到红线，保存重进后才有"，根因就是：
+        //    - 编辑时刚应用样式，lib 把 paragraph.attrs.styleId 存成数字 index（不是字符串
+        //      "HongTouSeparator"），导致上面路径 2 全部跳过。
+        //    - 但是！lib 已经正确把 paragraph.attrs.borders.bottom { style:single, color:FF0000, size:12 }
+        //      渲染到了 DOM 上（通过 computedStyle 能看到 border-bottom: 1.5px solid #ff0000 或
+        //      rgb(255,0,0) 之类），而且其他三边 border（top/left/right）为了规避 lib bug，
+        //      我们在预设样式里已经显式写了 style:none → 它们不会是 solid/colored。
+        //
+        //    所以：不管 paragraph.styleId 是什么数字/字符串，**只要 DOM 上 computedStyle
+        //    显示它"只有红色底边框、其他三边无边框/红色"**，就 100% 是红头分隔线，
+        //    直接打标 → CSS ::after 就能正确匹配。
+        //    这条路径独立于 ProseMirror，100% 可靠，能彻底消灭"保存重进才看得见"问题。
+        const RED_REGEX = /(255,\s*0,\s*0|#ff0000|#F{2}0{2,4}|rgb\(255,\s*0,\s*0\))/i;
+        const SOLID_REGEX = /solid/i;
+        const NO_BORDER_REGEX = /^(none|0px|initial|inherit|transparent|unset|)\s*$/i;
+
+        const isRedBorder = (borderStr: string): boolean => {
+          if (!borderStr) return false;
+          const s = borderStr.replace(/\s+/g, '');
+          return RED_REGEX.test(s) && SOLID_REGEX.test(s);
+        };
+        const isNoBorderOrNonRed = (borderStr: string): boolean => {
+          if (!borderStr) return true;
+          const s = borderStr.replace(/\s+/g, '');
+          if (NO_BORDER_REGEX.test(s)) return true;
+          // 如果是 solid 但颜色不是红色（比如用户自己通过边框按钮加的黑色底边框）→ 不要标成红头分隔线
+          if (SOLID_REGEX.test(s) && RED_REGEX.test(s)) return false;
+          // dashed/dotted/outset 等不是"红头分隔线"的形态 → 也不算红头分隔线
+          return true;
+        };
+
+        // 收集候选节点：所有带 layout-paragraph / layout-line 类名的元素，
+        // 以及 editor root 下所有 div/p/section 这类块级元素（避免 lib 改类名漏掉）
+        const candidates = new Set<HTMLElement>();
+        root.querySelectorAll<HTMLElement>(
+          '.layout-paragraph, .layout-line, div, p, section, article'
+        ).forEach((el) => {
+          if (!el || !el.isConnected) return;
+          // 只纳入"明显属于内容区域"的节点（排除 toolbar / scrollbar wrapper 等）
+          if (
+            el.closest('[role="toolbar"]') ||
+            el.closest('[data-vendorsys-hidden-style-picker]') ||
+            el.classList?.contains('ant-select-dropdown')
+          ) return;
+          candidates.add(el);
+        });
+
+        candidates.forEach((el) => {
+          if (!el) return;
+          // 如果已经被路径 2 标记过（[data-vendorsys-style-id=HongTouSeparator]），跳过
+          if (el.getAttribute(VENDOR_ATTR) === HONGTOU_SEP_STYLE_ID) return;
+
+          try {
+            const cs = window.getComputedStyle(el);
+            const bb = cs.borderBottom || '';
+            const bt = cs.borderTop || '';
+            const bl = cs.borderLeft || '';
+            const br = cs.borderRight || '';
+
+            // 红头分隔线判定：底边框是【红色单实线】 + 上/左/右边框【不是红色单实线】
+            // （lib 以前的 bug 是把其他三边也画成红色，但我们预设样式已经写
+            //   pPr.borders.top/left/right.style=none 破了 fallback，所以这三边应为 none/0px，
+            //   万一 lib 哪天又抽风把其他三边也画出红色，这里仍然允许"全四边红"通过，
+            //   因为"有一整条红色底边框"的段在公文里也只有红头分隔线这一种）
+            const hasRedBottom = isRedBorder(bb);
+            const topOk = isNoBorderOrNonRed(bt);
+            const leftOk = isNoBorderOrNonRed(bl);
+            const rightOk = isNoBorderOrNonRed(br);
+
+            if (hasRedBottom && topOk && leftOk && rightOk) {
+              el.setAttribute(VENDOR_ATTR, HONGTOU_SEP_STYLE_ID);
+              el.classList.add('vendorsys-pstyle-hongtouseparator');
+              markedByDom++;
+            }
+          } catch {
+            /* getComputedStyle 偶发异常，跳过 */
+          }
+        });
+
+        if (removedCount > 0 || markedByPm > 0 || markedByDom > 0) {
+          console.debug(
+            `[WordEditor] 红头分隔线打标：清旧 ${removedCount} 条 + PM 命中 ${markedByPm} 条 + DOM 特征命中 ${markedByDom} 条`
+          );
+        }
+      } catch (e) {
+        console.debug('[WordEditor] 标记红头分隔线段落失败（不影响使用）:', e);
+      }
+    };
+
+    // ========================================================================
+    // 新增 3：隐藏 DocxEditor 自带的段落样式选择器（最精准版本，aria-label 直接命中）
+    //
+    // 根据浏览器实际 DOM 取证结果（2026-08-14）：
+    //   DocxEditor 工具栏里的段落样式选择器有一个独一无二的属性：
+    //     aria-label="选择段落样式"
+    //   （字体选择器是 aria-label="选择字体"，缩放选择器是 aria-label="缩放: 75%"）
+    //
+    // 所以我们完全不需要猜顺序/猜文本内容，直接用这个 aria-label 属性精准锁定！
+    // 这是绝对不会误伤缩放/字体/字号选择器的终极方案。
+    // ========================================================================
+    const hideBuiltinStylePicker = () => {
+      try {
+        // 直接用 aria-label 精准命中：段落样式选择器（其他任何 combobox 都不会有这个 label）
+        const targetTrigger = document.querySelector(
+          '[role="combobox"][aria-label="选择段落样式"]'
+        );
+        if (!targetTrigger) return;
+
+        // 找 toolbar item 容器（往上 1~5 层），找到第一个"像 toolbar item"的父元素就隐藏
+        let target: HTMLElement | null = targetTrigger as HTMLElement;
+        let depth = 0;
+        while (target && depth < 6) {
+          target = target.parentElement;
+          if (!target) break;
+          depth++;
+          const cls = (target.className as string | undefined) ?? '';
+          if (typeof cls === 'string' && /toolbar|item|group|segment|wrapper|cell|flex items-center/i.test(cls)) break;
+        }
+        const toHide = target ?? (targetTrigger as HTMLElement);
+        toHide.style.setProperty('display', 'none', 'important');
+        // 加 data 属性，配合 word-editor.css 里的 rule 再加固一次，防止 React re-render 清掉
+        toHide.setAttribute('data-vendorsys-hidden-style-picker', 'true');
+      } catch (err) {
+        console.debug('[WordEditor] 隐藏自带段落样式选择器失败（不影响使用）:', err);
+      }
+    };
+
+    // 把四个操作打包，便于在多个触发点复用
+    const applyAllFixes = () => {
+      const applied = applyLayoutAnchors();
+      syncStyleSelectValue();
+      markHongTouSeparatorParagraphs();
+      hideBuiltinStylePicker();
+      return applied;
+    };
+
+    // —— 关键：把 applyAllFixes 函数引用暴露给组件级 ref
+    // 这样外部 handleStyleSelectChange （样式选择器 onChange）、快捷键应用样式后、
+    // 以及 setInterval 轮询都能调用同一套函数，不用把 markHongTouSeparatorParagraphs
+    // 搬离 useEffect 内部的闭包作用域。
+    applyAllFixesRef.current = applyAllFixes;
+
+    // 立即执行一次（如果 DOM 已经就绪）
+    applyAllFixes();
+
+    // 定时重试：layout-painter 是异步的，可能需要几轮才把分页渲染完
+    const timers: number[] = [];
+    [100, 300, 600, 1000, 2000].forEach((delay) => {
+      timers.push(window.setTimeout(applyAllFixes, delay));
+    });
+
+    // —— 新增：500ms 轮询兜底
+    // 背景：用户在编辑器打开 2s 之后才应用样式（比如 5 分钟后选红头分隔线），
+    // 此时上面的 setTimeout 多点（最大 2s）已过期；而且应用 paragraph.styleId
+    // 只是 PM state 变化，paragraph DOM 不会 childList 增删（只是 style/class
+    // 属性变化），导致 MutationObserver 原始配置（仅 childList）也不会触发，
+    // 于是 markHongTouSeparatorParagraphs 不会跑，用户看不到红线（保存重进才出现）。
+    // 用 500ms 轻量轮询 100% 覆盖这种"过期 + 无 childList 变化"的场景。
+    // applyAllFixes 内的四个函数都是严格幂等的（查 DOM/写 data-attr/读 styleId/隐藏 toolbar），
+    // 500ms 一次对性能影响可以忽略，不会造成任何视觉抖动或 React 重渲染。
+    const intervalId = window.setInterval(() => {
+      try {
+        applyAllFixesRef.current?.();
+      } catch {
+        /* 忽略偶发异常，下一轮继续 */
+      }
+    }, 500);
+
+    // MutationObserver：监听 #vendorsys-word-editor-root 及其子树
+    // —— 关键扩展：从 { childList, subtree } → { childList, subtree, attributes, attributeFilter }
+    //   attributes 监听 style/class 变化，使得应用 paragraph 样式（lib 更新 DOM 的
+    //   font-size/color/border-bottom 等 inline style）时也能触发 applyAllFixes，
+    //   大部分场景 0~50ms 内就能把红头分隔线打上标记，不用等 500ms 轮询兜底。
+    //   attributeFilter 只监听 style 和 class，避免监听 data-* / id 等无关属性造成过多触发。
+    //   但 attributes 变化仍要排除 antd-select-dropdown 相关节点（防止下拉框闪现问题）。
+    let observer: MutationObserver | null = null;
+    try {
+      const root = document.querySelector(rootSelector);
+      if (root) {
+        observer = new MutationObserver((mutations) => {
+          let needsApply = false;
+          mutations.forEach((m) => {
+            // —— 修复 dropdown 闪现：先判断本次 mutation 相关节点是否属于
+            //    antd-select-dropdown。如果是，则完全忽略本次 mutation（无论
+            //    childList 还是 attributes 变化都不触发 applyAllFixes）。
+            // 注：用 any[] 不用 Node[]，避免 TS 把 Node 解析成 ProseMirror.Node
+            // （当前文件同时 import 了 prosemirror-model 的 Node，同名冲突）。
+            const anyRelatedNode: any[] = [];
+            if (m.target instanceof HTMLElement) anyRelatedNode.push(m.target);
+            if (m.addedNodes) m.addedNodes.forEach((n) => anyRelatedNode.push(n));
+            if (m.removedNodes) m.removedNodes.forEach((n) => anyRelatedNode.push(n));
+            let anyInDropdown = false;
+            for (const n of anyRelatedNode) {
+              if (!(n instanceof HTMLElement)) continue;
+              if (
+                n.classList?.contains('ant-select-dropdown') ||
+                n.querySelector?.('.ant-select-dropdown') ||
+                n.closest?.('.ant-select-dropdown')
+              ) {
+                anyInDropdown = true;
+                break;
+              }
+            }
+            if (anyInDropdown) return; // 下拉框相关的 DOM/属性变化，一律忽略
+
+            // —— 分支 A：childList 新增/删除节点
+            if (m.type === 'childList' && m.addedNodes && m.addedNodes.length > 0) {
+              // (childList 的 antd-dropdown 过滤逻辑在上面已经 return 掉了，
+              //  到这里说明 addedNodes 确实不是 dropdown)
+              needsApply = true;
+              return;
+            }
+
+            // —— 分支 B：attributes（style/class）变化
+            //    应用 paragraph 样式时，lib 会更新 .layout-paragraph 的 inline style
+            //    （font-size、border-bottom 等），此时 m.target 就是 paragraph DOM。
+            //    attributes 变化不需要再检查 addedNodes（因为没有），直接判定需要 apply。
+            if (m.type === 'attributes') {
+              const tgt = m.target;
+              // 额外过滤：只对"页面内容区域内"的元素 attributes 变化触发，
+              // 防止 toolbar 按钮 hover 等高频 style 变化导致无谓重跑。
+              // （其实 applyAllFixes 极轻，就算不筛也没影响，但保险起见）
+              if (
+                tgt instanceof HTMLElement &&
+                (tgt.classList?.contains('layout-paragraph') ||
+                  tgt.classList?.contains('layout-line') ||
+                  tgt.closest?.('.layout-page-content, .layout-paragraph, .layout-line'))
+              ) {
+                needsApply = true;
+                return;
+              }
+            }
+          });
+
+          if (needsApply) {
+            // 用 rAF 把多次改动合并成一次扫描，避免抖动
+            requestAnimationFrame(applyAllFixes);
+          }
+        });
+        observer.observe(root, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ['style', 'class'],
+        });
+      }
+    } catch (e) {
+      // MutationObserver 在某些场景可能不可用，忽略即可，定时器 + 轮询已覆盖兜底
+    }
+
+    return () => {
+      timers.forEach((t) => window.clearTimeout(t));
+      window.clearInterval(intervalId);
+      if (observer) observer.disconnect();
+      // 清理函数引用：编辑器不可见后 ref 不应再指向已失效的闭包
+      applyAllFixesRef.current = () => {};
+    };
+  }, [visible, editorKey, loadingInitialBlob, showFinalRevisionPreview, readCurrentParagraphStyleId]);
+
+  // 重置状态和清理定时器（当编辑器打开/关闭时）
+  useEffect(() => {
+    if (visible) {
+      setHasUploaded(!isCreate);
+      // 重置"立即标记未同步"触发器
+      markUnsyncedTriggeredRef.current = false;
+      revisionPreviewSourceBufferRef.current = null;
+      setShowFinalRevisionPreview(false);
+      // 清理之前的定时器
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+    }
+
+    // 组件卸载时清理定时器
+    return () => {
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+    };
+  }, [visible, isCreate]);
+
+  return (
+    <Modal
+      open={visible}
+      onCancel={onClose}
+      keyboard={false}
+      closeIcon={null}
+      footer={null}
+      width="100%"
+      zIndex={100}
+      style={{ top: 0, maxWidth: '100vw' }}
+      styles={{
+        body: {
+          height: '100dvh',
+          padding: 0,
+          // overflow: 'visible',
+        },
+        wrapper: {
+          // overflow: 'visible',
+        },
+      }}
+      className="ant-modal-nopadding ant-modal-fullscreen"
+      getContainer={false}
+      transitionName='none'
+    >
+      <style>
+        {`
+        .bg-doc-surface[data-testid=title-bar] { 
+          padding-top: 0px !important;
+          padding-bottom: 0px !important;
+        }
+        .bg-doc-surface[data-testid=title-bar] > div { 
+          padding-top: 0px !important;
+          padding-bottom: 0px !important;
+        }
+        .bg-doc-surface[data-testid=title-bar] > div:first-of-type svg {
+          display: none;
+        }
+        `}
+      </style>
+      <div className="h-full flex flex-col bg-white p-0 m-0">
+        {/* 工具栏 */}
+        <div className={`flex items-center justify-between px-4 py-2 pr-0 border-b flex-shrink-0 ${isOffline ? 'bg-orange-50 border-orange-200' : 'bg-gray-50 border-gray-200'}`}>
+          {/* 只读模式下直接关闭，不需要提示保存 */}
+          <span>&nbsp;</span>
+          {!readOnly && <span>&nbsp;</span>}
+          <div className="flex items-center gap-2 flex-wrap min-w-[40%]">
+            {!isOffline && isLocalOnly && (
+              <Tag icon={<CloudOutlined />} color="orange" style={{ margin: 0 }}>
+                本地文件
+              </Tag>
+            )}
+            {!isOffline && !isLocalOnly && hasUnsyncedChanges && (
+              <Tag icon={<CloudOutlined />} color="warning" style={{ margin: 0 }}>
+                有未同步修改
+              </Tag>
+            )}
+            {!isOffline && !isLocalOnly && !hasUnsyncedChanges && !onUpload ? (
+              <Tag icon={<CloudServerOutlined />} color="default" style={{ margin: 0 }}>
+                同步完成
+              </Tag>
+            ) : null}
+            <FileWordFilled className="text-blue-600" />
+            <span className="text-sm font-medium">{hasLocalCache ? '*' : ''}{fileName}</span>
+          </div>
+          {!readOnly && !hiddenClose && (
+            <Space wrap={true} align="center" direction="horizontal">
+              <ExportDropdown
+                onExportPdf={handleExportPdf}
+                onDownload={onDownload}
+                exportingPdf={exportingPdf}
+                extraItems={exportExtraItems}
+                buttonProps={{ style: { paddingLeft: 4, paddingRight: 4 } }}
+              />
+              {!showFinalRevisionPreview && onUpload && (
+                <Button
+                  type="text" style={{ paddingLeft: 4, paddingRight: 4 }}
+                  title="每次上传将保留一个历史版本，最多保留10个版本"
+                  icon={<UploadOutlined />}
+                  onClick={handleUpload}
+                  disabled={uploadPercent !== undefined && uploadPercent < 1}
+                >
+                  {uploadPercent !== undefined && uploadPercent < 1 ? `上传中 ${Math.round(uploadPercent * 100)}%` : '上传'}
+                </Button>
+              )}
+              {!showFinalRevisionPreview && (
+                <Button
+                  type="primary"
+                  icon={<SaveOutlined />}
+                  onClick={handleSave}
+                >
+                  保存
+                </Button>
+              )}
+              {(!readOnly && (hasLocalCache || !hasUploaded)) ?
+                (<Popconfirm
+                  title="确定要退出吗？"
+                  description={hasLocalCache?"修改未保存，确定要退出吗？": "修改未上传，确定要退出吗？"}
+                  onConfirm={onClose}
+                  okText="确定"
+                  cancelText="取消"
+                >
+                  <Button type="text" className="ml-3 mr-2" icon={<CloseOutlined className="w-6 h-6" />} />
+                </Popconfirm>) : (<CloseOutlined onClick={onClose} className='ml-3 mr-2 w-6 h-6'/>)}
+            </Space>
+          )}
+          {readOnly && !hiddenClose && (
+            <Space>
+              <ExportDropdown
+                onExportPdf={handleExportPdf}
+                onDownload={onDownload}
+                exportingPdf={exportingPdf}
+                extraItems={exportExtraItems}
+                buttonProps={{ style: { paddingLeft: 4, paddingRight: 4 } }}
+              />
+              <CloseOutlined onClick={onClose} className='ml-3 mr-2 w-6 h-6' />
+            </Space>)
+          }
+          {hiddenClose && (
+            <ExportDropdown
+              onExportPdf={handleExportPdf}
+              onDownload={onDownload}
+              exportingPdf={exportingPdf}
+              extraItems={exportExtraItems}
+              buttonProps={{ style: { paddingLeft: 4, paddingRight: 4 } }}
+            />
+          )}
+        </div>
+
+        {/* Word 编辑器容器 */}
+        <div
+          key={editorKey}
+          id="vendorsys-word-editor-root"
+          className="vendorsys-word-editor-root flex-1 overflow-auto"
+          style={{ height: 'calc(100% - 50px)', position: 'relative' }}
+        >
+          {visible && !loadingInitialBlob && (
+            <PluginHost ref={pluginHostRef} plugins={wordEditorPlugins}>
+              <DocxEditor
+                ref={editorRef}
+                initialZoom={isMobile ?0.75 :1}
+                // documentName={fileName}
+                author={userId||'tj'}
+                document={initialDocument ?? undefined}
+                documentBuffer={initialDocument ? undefined : (initialBuffer ?? undefined)}
+                onSave={handleEditorMenuSave}
+                onChange={handleChange}
+                // =====================================================================
+                // onSelectionChange：ProseMirror 选区变化时，
+                //   1) 同步当前段落的真实 styleId（解决"全选文本显示正文但实际不是"的 bug）
+                //   2) 顺便从 StyleResolver 里拉取文件内的全部段落样式，填充到
+                //      documentStylesFromFile state，让下拉 options 包含文件本身自带的
+                //      footer/header/Normal(Web)/自定义模板样式等（不仅是我们的预设）。
+                // =====================================================================
+                onSelectionChange={() => {
+                  try {
+                    // 先拿 state（拿不到就不处理，等下一次）
+                    const state = editorRef.current?.getEditorRef()?.getState();
+                    if (state) {
+                      // 2) 先同步文件里的全部段落样式（避免下拉框缺文件自带样式）
+                      syncDocumentStylesFromFile(state);
+                    }
+
+                    const styleId = readCurrentParagraphStyleId();
+                    // —— 修复 dropdown 闪现：同值不 setState（理由见 onChange 里的注释）
+                    //    点击 Select trigger 打开 dropdown 时，editor 会短暂失去选区焦点，
+                    //    onSelectionChange 会被立即触发一次（但 styleId 值其实没变）。
+                    //    如果此时无脑 setState → 父组件重渲染 → antd Select 子组件内部
+                    //    effect 重跑 → open state 被重置为 false → 闪现。
+                    setCurrentStyleId((prev) => (prev === styleId ? prev : styleId));
+                  } catch {
+                    /* 忽略异常，避免打断编辑器内部的 selection 处理 */
+                  }
+                }}
+                // readOnly={readOnly}
+                mode={showFinalRevisionPreview || readOnly ? 'viewing' : 'editing'}
+                showToolbar={true}
+                showFileOpen={true}
+                showHelpMenu={false}
+                showMarginGuides={false}
+                toolbarExtra={
+                  <Space size={4}>
+                    {/* ================================================================= */}
+                    {/* 自定义受控段落样式选择器（用 PRESET_STYLES 做 options）             */}
+                    {/*                                                                  */}
+                    {/* 策略调整：不再尝试用复杂 JS 语义识别去隐藏 DocxEditor 自带的      */}
+                    {/* 样式选择器（之前反复误伤字号/字体选择器，导致工具消失或显示错值）*/}
+                    {/* 改为：在我们的选择器前加明确的"样式：" Label，并给外层加独立的   */}
+                    {/* CSS 重置层，让用户一眼就能区分"哪个是我们修复过的（双向同步正确）*/}
+                    {/* 的样式框，哪个是 DocxEditor 自带的（仍有同步 bug，不建议用）。*/}
+                    {/* ================================================================= */}
+                    {!showFinalRevisionPreview && !readOnly && (
+                      <div
+                        className="vendorsys-custom-style-picker"
+                        data-vendorsys-custom="true"
+                        style={{
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                          gap: 4,
+                          marginRight: 4,
+                          padding: '0 6px',
+                          background: 'rgba(255,255,255,0.04)',
+                          borderRadius: 4,
+                          height: 28,
+                          boxSizing: 'border-box',
+                        }}
+                        // —— 终极方案双保险：在 Select 外层容器的 mousedown 就阻止默认行为 + 冒泡
+                        //    这样 DocxEditor 的 document 级 mousedown 监听不会抢在我们前面执行，
+                        //    也不会让内部 input 的默认 focus 行为把编辑器的 focus 抢走。
+                        //    （为什么选 mouseDown 而不是 click：mousedown 是整个交互链的起点，
+                        //     绝大部分"focus/blur 抢夺"都发生在 mousedown 阶段）
+                        onMouseDown={(e) => {
+                          // 阻止默认 focus 行为（不让 Select 里的 input 自动抢 focus，避免 editor blur）
+                          e.preventDefault();
+                          // 不再需要 stopPropagation（我们的 document mouseup 监听用 capture 模式了）
+                        }}
+                      >
+                        <span
+                          className="vendorsys-custom-style-picker__label"
+                          style={{
+                            fontSize: 12,
+                            color: '#8c8c8c',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          样式：
+                        </span>
+                        <Select
+                          size="small"
+                          style={{ width: 150 }}
+                          // —— 二级去重后的 displayValue：
+                          //    currentStyleId 可能是 DocxEditor 内部存的数字字符串（如 "1"/"11" 等），
+                          //    它在上面「规范化 name 去重」里被合并成了预设 styleId（如 "Heading1"）。
+                          //    所以先把 getStyleSelectOptions() 跑一遍，再在 options 里查找：
+                          //      A) value 精确等于 currentStyleId → 直接用 currentStyleId（最常见）
+                          //      B) 找不到时 → 按规范化 name 等价找匹配项：
+                          //         对每个 option 做 normalizeStyleName(option.label) 与
+                          //         normalizeStyleName(找到 style 对应 name 或 "样式 currentStyleId") 相等
+                          //         → 用该 option.value 作为展示 value 传给 Select。
+                          //    这样 Select 的 value 永远在 options.value 集合里，antd 一定
+                          //    能找到正确的 label（中文）显示，不会出现裸数字/空白。
+                          value={(() => {
+                            const allOpts = getStyleSelectOptions();
+                            if (allOpts.some(o => !o.disabled && o.value === currentStyleId)) {
+                              return currentStyleId;
+                            }
+                            // 找 currentStyleId 对应的「显示 name」：
+                            //   优先在 styleMap 里找到 Style 拿 name；否则 fallback 到 "样式 X"
+                            const currentNorm = (() => {
+                              // 先尝试在当前文件 style 集合里找对应 Style
+                              const fromFile = documentStylesFromFileRef.current?.find(s => s.styleId === currentStyleId);
+                              const fromPreset = PRESET_STYLES.find(s => s.styleId === currentStyleId);
+                              const name = fromFile?.name || fromPreset?.name || `样式 ${currentStyleId}`;
+                              return normalizeStyleName(name);
+                            })();
+                            if (!currentNorm) return currentStyleId;
+                            const matchedByNorm = allOpts.find(o => !o.disabled && normalizeStyleName(o.label) === currentNorm);
+                            if (matchedByNorm) return matchedByNorm.value;
+                            return currentStyleId;
+                          })()}
+                          placeholder="请选择样式"
+                          // —— 2026/08/14 关键修复：onSelect + onChange 双通道
+                          // 为什么必须双挂：
+                          //   antd Select 受控模式下，onChange 只有在"新 value !== 旧 value"
+                          //   时才触发。这就造成了用户反馈的精准现象：
+                          //   "Ctrl+A 全选后点击『正文』无效，但其他样式有效"。
+                          //   因为 Ctrl+A 全选多段混合样式时，我们的 readCurrentParagraphStyleId
+                          //   官方 API 返回 null → 兜底 'Normal' → currentStyleId='正文'。
+                          //   此时用户在下拉框里再点一遍 value=Normal 的『正文』，因为 value
+                          //   没变，onChange 完全不触发，用户以为"点击没反应"。
+                          //   但其他样式（标题1/标题2等）因为 currentStyleId !== 新 value，
+                          //   onChange 正常触发，所以看起来只有『正文』没生效。
+                          //
+                          //   挂 onSelect 后，用户每次点击 option（无论新旧值是否相同）都会
+                          //   强制走 handleStyleSelectChange，完美符合用户"每次点击都重新应用
+                          //   样式一遍"的需求；onChange 保留用于键盘选择、程序化改值、
+                          //   非点击触发的 value 变更等场景。
+                          //
+                          //   两者同时触发的风险（连续调用两次应用）已在 handleStyleSelectChange
+                          //   内用 50ms 时间窗 + styleId 精确去重处理，最多执行一次。
+                          onSelect={handleStyleSelectChange}
+                          onChange={handleStyleSelectChange}
+                          popupMatchSelectWidth={false}
+                          showSearch={false}
+                          allowClear={false}
+                          // —— 终极方案受控 open：完全由我们自己控制 Select 的打开/关闭
+                          //    完全不信任 antd 默认的 blur / 点击外部关闭逻辑（会被 DocxEditor
+                          //    的全局 blur/mousedown 检测误触发）
+                          open={styleDropdownOpen}
+                          // 只允许"打开请求"通过；antd 自己想关（因为 blur/外点检测）一律忽略
+                          onOpenChange={(open) => {
+                            if (open) setStyleDropdownOpen(true);
+                            // open=false 时什么都不做！由我们自己的 document mouseup 监听决定何时关
+                          }}
+                          // —— 修复 dropdown 出现立即消失（闪现）：不再挂到 body
+                          //    之前挂到 body 下，会被 DocxEditor 挂在 document 上的全局点击/外部检测
+                          //    监听器判定为"editor 外部元素" → 触发 blur / 重渲染循环
+                          //    → antd Select 内部 open state 在重渲染中丢失 → popup 刚渲染完立马 close
+                          //    解决方案：挂到 DocxEditor 自己的 DOM 根节点 .ep-root 下，让 DocxEditor
+                          //    把 popup 当作"editor 内部元素"，不再触发外部点击检测。
+                          getPopupContainer={(triggerNode) => {
+                            const ownerDoc = triggerNode?.ownerDocument ?? document;
+                            // 优先级 1：DocxEditor 自己的 DOM 根节点（最稳妥，一定是 editor 内部）
+                            const epRoot = ownerDoc.querySelector('.ep-root');
+                            if (epRoot) return epRoot as HTMLElement;
+                            // 优先级 2：我们自定义的外层容器
+                            const customRoot = ownerDoc.querySelector('#vendorsys-word-editor-root');
+                            if (customRoot) return customRoot as HTMLElement;
+                            // 兜底：body
+                            return ownerDoc.body;
+                          }}
+                          // —— 修复 popup 被工具栏/页眉盖住：给专属 class，在 CSS 里把 z-index 提到 10000
+                          //    （antd 默认 z-index 只有 150，会被 DocxEditor 的深色主题工具栏盖住）
+                          classNames={{ popup: { root: 'vendorsys-word-style-dropdown' } }}
+                          // 因为 fallback option disabled 为 true，用户不能点它，
+                          // 所以 dropdown 打开后用户只能选下面的预设样式（正文 / 标题 1 / ...）
+                          options={getStyleSelectOptions()}
+                        />
+                      </div>
+                    )}
+                    {!showFinalRevisionPreview && !readOnly && (
+                      <Button
+                        size="small"
+                        type={formatPainter.active ? 'primary' : 'default'}
+                        title={formatPainter.active ? '格式刷已开启：选中文本即可应用，再次点击或按 Esc 取消' : '格式刷：复制当前选区格式并应用到其他文本'}
+                        icon={<FormatPainterIcon />}
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={() => formatPainter.toggle()}
+                      />
+                    )}
+                    {!showFinalRevisionPreview && !readOnly && (
+                      <Button
+                        size="small"
+                        icon={<AlignLeftOutlined />}
+                        title="段落设置：缩进、段前段后、行距、对齐方式"
+                        onClick={openParagraphDialog}
+                      >
+                        段落
+                      </Button>
+                    )}
+                    <Button size="small" type={showFinalRevisionPreview ? 'primary' : 'default'} onClick={handleToggleFinalRevisionPreview}>
+                      {showFinalRevisionPreview ? '查看修订' : '最终状态'}
+                    </Button>
+                  </Space>
+                }
+                // showOutline={true}
+                i18n={zhCN}
+                fontFamilies={CUSTOM_FONT_FAMILIES}
+                // 标尺：与 Word 一样显示横向标尺，便于直接看出页边距与段落缩进
+                showRuler={!readOnly && !showFinalRevisionPreview}
+                rulerUnit="cm"
+                style={{ height: '100%', width: '100%' }}
+              />
+            </PluginHost>
+          )}
+
+          {/* 粘贴选项：粘贴完成后在插入位置下方出现的浮动按钮（WPS 风格）。
+              通过 Portal 渲染到 body，用 fixed 定位，避免被编辑器内部层叠上下文盖住。 */}
+          {pasteSmartTag && !readOnly && createPortal(
+            <div
+              ref={pasteSmartTagRef}
+              className="vendorsys-paste-smart-tag"
+              style={{ left: pasteSmartTag.x, top: pasteSmartTag.y }}
+              onMouseDown={(e) => e.preventDefault()}
+            >
+              {pasteSmartTag.expanded ? (
+                <div className="vendorsys-paste-smart-tag-menu">
+                  <button type="button" onClick={() => applyPasteMode('formatted')}>
+                    <span className="label">带格式粘贴</span>
+                    <span className="key">(W)</span>
+                  </button>
+                  <button type="button" onClick={() => applyPasteMode('match')}>
+                    <span className="label">匹配当前格式</span>
+                    <span className="key">(M)</span>
+                  </button>
+                  <button type="button" onClick={() => applyPasteMode('text')}>
+                    <span className="label">只粘贴文本</span>
+                    <span className="key">(T)</span>
+                  </button>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  className="vendorsys-paste-smart-tag-trigger"
+                  title="粘贴选项"
+                  onClick={() => setPasteSmartTag({ ...pasteSmartTag, expanded: true })}
+                >
+                  <SnippetsOutlined />
+                  <DownOutlined className="arrow" />
+                </button>
+              )}
+            </div>,
+            document.body
+          )}
+          {loadingInitialBlob && (
+            <div className="flex items-center justify-center h-full">
+              <span>加载中...</span>
+            </div>
+          )}
+
+          {/* 段落设置：DocxEditor 自带工具栏没有段落信息修改入口，这里补上 */}
+          <Modal
+            open={paragraphDialogOpen}
+            title="段落设置"
+            okText="应用"
+            cancelText="取消"
+            width={460}
+            maskClosable={false}
+            // 外层 Word 弹窗 zIndex=100、编辑器内部下拉的 z-index 到 10000，
+            // 这里必须高于它们，否则对话框会被文档层挡住、表现为「点了没反应」
+            zIndex={11000}
+            getContainer={() => document.body}
+            onOk={applyParagraphSettings}
+            onCancel={() => setParagraphDialogOpen(false)}
+          >
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 8 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ width: 76, color: '#8c8c8c', fontSize: 13 }}>对齐方式</span>
+                <Select<ParagraphAlignmentValue>
+                  style={{ width: 160 }}
+                  value={paragraphForm.alignment}
+                  onChange={(value) => setParagraphForm((prev) => ({ ...prev, alignment: value }))}
+                  options={[
+                    { label: '左对齐', value: 'left' },
+                    { label: '居中', value: 'center' },
+                    { label: '右对齐', value: 'right' },
+                    { label: '两端对齐', value: 'both' },
+                  ]}
+                />
+              </div>
+
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ width: 76, color: '#8c8c8c', fontSize: 13 }}>左缩进</span>
+                <InputNumber
+                  min={0}
+                  max={20}
+                  step={0.1}
+                  precision={2}
+                  style={{ width: 120 }}
+                  value={paragraphForm.indentLeftCm}
+                  onChange={(value) => setParagraphForm((prev) => ({ ...prev, indentLeftCm: Number(value) || 0 }))}
+                  addonAfter="厘米"
+                />
+                <span style={{ color: '#8c8c8c', fontSize: 13 }}>右缩进</span>
+                <InputNumber
+                  min={0}
+                  max={20}
+                  step={0.1}
+                  precision={2}
+                  style={{ width: 120 }}
+                  value={paragraphForm.indentRightCm}
+                  onChange={(value) => setParagraphForm((prev) => ({ ...prev, indentRightCm: Number(value) || 0 }))}
+                  addonAfter="厘米"
+                />
+              </div>
+
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ width: 76, color: '#8c8c8c', fontSize: 13 }}>特殊格式</span>
+                <Select<'none' | 'firstLine' | 'hanging'>
+                  style={{ width: 160 }}
+                  value={paragraphForm.indentSpecial}
+                  onChange={(value) =>
+                    setParagraphForm((prev) => ({
+                      ...prev,
+                      indentSpecial: value,
+                      indentSpecialCm: value === 'none' ? 0 : prev.indentSpecialCm || 0.74,
+                    }))
+                  }
+                  options={[
+                    { label: '无', value: 'none' },
+                    { label: '首行缩进', value: 'firstLine' },
+                    { label: '悬挂缩进', value: 'hanging' },
+                  ]}
+                />
+                <InputNumber
+                  min={0}
+                  max={20}
+                  step={0.1}
+                  precision={2}
+                  style={{ width: 120 }}
+                  disabled={paragraphForm.indentSpecial === 'none'}
+                  value={paragraphForm.indentSpecialCm}
+                  onChange={(value) => setParagraphForm((prev) => ({ ...prev, indentSpecialCm: Number(value) || 0 }))}
+                  addonAfter="厘米"
+                />
+              </div>
+
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ width: 76, color: '#8c8c8c', fontSize: 13 }}>段前</span>
+                <InputNumber
+                  min={0}
+                  max={200}
+                  step={1}
+                  style={{ width: 120 }}
+                  value={paragraphForm.spaceBeforePt}
+                  onChange={(value) => setParagraphForm((prev) => ({ ...prev, spaceBeforePt: Number(value) || 0 }))}
+                  addonAfter="磅"
+                />
+                <span style={{ color: '#8c8c8c', fontSize: 13 }}>段后</span>
+                <InputNumber
+                  min={0}
+                  max={200}
+                  step={1}
+                  style={{ width: 120 }}
+                  value={paragraphForm.spaceAfterPt}
+                  onChange={(value) => setParagraphForm((prev) => ({ ...prev, spaceAfterPt: Number(value) || 0 }))}
+                  addonAfter="磅"
+                />
+              </div>
+
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ width: 76, color: '#8c8c8c', fontSize: 13 }}>行距</span>
+                <Select<LineSpacingRuleValue>
+                  style={{ width: 160 }}
+                  value={paragraphForm.lineRule}
+                  onChange={(value) =>
+                    setParagraphForm((prev) => ({
+                      ...prev,
+                      lineRule: value,
+                      // 倍数与磅值量纲不同，切换时给一个有意义的默认值
+                      lineValue: value === 'auto' ? (prev.lineRule === 'auto' ? prev.lineValue : 1) : (prev.lineRule === 'auto' ? 18 : prev.lineValue),
+                    }))
+                  }
+                  options={[
+                    { label: '倍数', value: 'auto' },
+                    { label: '固定值', value: 'exact' },
+                    { label: '最小值', value: 'atLeast' },
+                  ]}
+                />
+                <InputNumber
+                  min={0.5}
+                  max={200}
+                  step={paragraphForm.lineRule === 'auto' ? 0.05 : 1}
+                  precision={2}
+                  style={{ width: 120 }}
+                  value={paragraphForm.lineValue}
+                  onChange={(value) => setParagraphForm((prev) => ({ ...prev, lineValue: Number(value) || 1 }))}
+                  addonAfter={paragraphForm.lineRule === 'auto' ? '倍' : '磅'}
+                />
+              </div>
+            </div>
+          </Modal>
+        </div>
+      </div>
+    </Modal>
+  );
+});
+
+export default WordEditor;