@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/UIFilePreview/WordEditor/word-editor.css

@@ -0,0 +1,999 @@
+/* Word Editor 样式下拉框字体预览修复
+ * 通过 CSS 属性选择器为不同 styleId 设置正确的字体
+ * 因为 @eigenpal/docx-editor-core 的 stylePreview 模块
+ * 在生成预览样式时不包含 fontFamily
+ * 
+ * 字体优先级：优先使用 macOS 系统字体，其次使用 Windows 字体作为回退
+ */
+
+/* 正文 - 仿宋 */
+[role="option"][data-value="Normal"] span {
+  font-family: "STFangsong", "STSong", "FangSong", serif !important;
+}
+
+/* 标题 1-6, 标题 - 黑体 */
+[role="option"][data-value="Heading1"] span,
+[role="option"][data-value="Heading2"] span,
+[role="option"][data-value="Heading3"] span,
+[role="option"][data-value="Heading4"] span,
+[role="option"][data-value="Heading5"] span,
+[role="option"][data-value="Heading6"] span,
+[role="option"][data-value="Title"] span {
+  font-family: "STHeiti", "STSong", "SimHei", "Microsoft YaHei", sans-serif !important;
+}
+
+/* 副标题 - 楷体 */
+[role="option"][data-value="Subtitle"] span {
+  font-family: "STKaiti", "STSong", "KaiTi", serif !important;
+}
+
+/* 引用, 强调引用 - 楷体 */
+[role="option"][data-value="Quote"] span,
+[role="option"][data-value="IntenseQuote"] span {
+  font-family: "STKaiti", "STSong", "KaiTi", serif !important;
+}
+
+/* ============================================================================
+   Word 分页编辑器页脚/页眉布局修复（三层前缀兜底 + JS 强制双保险）
+
+   问题根因（结合截图对比）：
+   1) 图一（应用中，有 bug）：页脚"第 3 页"出现在正文"3.2.2 乙方责任与义务"
+      标题的右边、同一水平线，没有在页面底部。说明 .layout-page-footer
+      作为普通流元素时宽度被压缩到仅包裹文字，导致它无法独占一行，
+      "漂"到了前一段正文的右侧。
+   2) 全局 CSS 重置 * { box-sizing: border-box; margin: 0; padding: 0 } 以及
+      Tailwind base preflight 会干扰 layout-painter 通过 inline style
+      写入的 position / width / top / left 盒模型与定位计算：
+      - .layout-page 如果没有明确的 position: relative，页脚 absolute
+        定位的锚点会"逃"到外层容器，top/bottom 值完全错位
+      - box-sizing: border-box 把内边距算入宽度，使得按 content-box
+        计算的页眉/页脚宽度"缩水"，内容撑不开，横向宽度不够占满一行
+
+   修复策略（三层兜底）：
+   第 1 层（CSS 层 - 三重前缀）：
+     - 前缀 A: `.ep-root`  —— 来自 @eigenpal/docx-editor-react/styles.css 的根类
+     - 前缀 B: `#vendorsys-word-editor-root` / `.vendorsys-word-editor-root`
+       —— 我们在 WordEditor 外层容器上写入的本地唯一 ID/Class（新增，100% 命中）
+     - 无前缀兜底：仅对布局关键类（.layout-page/footer/header）生效，作为最后保险
+   第 2 层（JS 层 - 强制写 DOM style）：
+     - 在 WordEditor/index.tsx 的 useEffect 中，通过 querySelectorAll
+       直接把 page.style.position / footer.style.position 写入节点的 style 属性，
+       优先级高于任何 CSS 规则（等同内联 style）
+     - 配合 MutationObserver + setTimeout 多时间点重试，覆盖异步增量渲染场景
+
+   无论哪一层命中，都只兜底关键字段（position / display / box-sizing），
+   绝不覆盖 top / left / width 的精确像素值（由 layout-painter 内联写入）。
+   ============================================================================ */
+
+/* ————————————————————————————————————————————————————————————————————————————
+   前缀 A：.ep-root （@eigenpal/docx-editor-react 默认根类）
+   ———————————————————————————————————————————————————————————————————————————— */
+
+.ep-root .paged-editor,
+.ep-root .paged-editor__pages-container {
+  display: block !important;
+}
+
+/* —— 修复 dropdown 闪现/被裁掉：把 antd Select 的 popup 从 body 改挂到 .ep-root
+      内部之后，必须保证 .ep-root 与外层容器的 overflow 不会裁剪掉 popup。
+      popup 的 top 可能超过 .ep-root 的高度，这里显式写 overflow: visible。
+      这个选择器前缀（.ep-root / #vendorsys-word-editor-root）和正文 layout 规则
+      属于同一层，不会产生任何副作用（只影响溢出裁剪）。
+*/
+.ep-root,
+#vendorsys-word-editor-root,
+.vendorsys-word-editor-root {
+  overflow: visible !important;
+}
+
+.ep-root .layout-page {
+  position: relative !important;
+  box-sizing: content-box !important;
+  display: block !important;
+}
+
+.ep-root .layout-page-header {
+  position: absolute !important;
+  box-sizing: content-box !important;
+  display: block !important;
+  clear: both !important;
+  float: none !important;
+}
+
+/* ============== 关键新增：清除"页眉内部包装层"的负 top/left 偏移 ==============
+   layout-painter 有时会在页眉/页脚内容外包一层裸 div，并写入
+   style="position: relative; top: -XXXpx; left: -YYYpx" 作为相对定位容器。
+   正常 Word/WPS 渲染里，页眉/页脚的内容本身就在页眉/页脚的矩形内，
+   不应该有任何往外的负偏移。下面几条规则强制把它清零，让孙节点
+   （如 .layout-textbox）的 absolute 定位锚点直接落到 header/footer 上。
+   ============================================================================ */
+.ep-root .layout-page-header > * {
+  position: static !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: auto !important;
+  bottom: auto !important;
+  transform: none !important;
+  margin: 0 !important;
+}
+
+.ep-root .layout-page-footer {
+  position: absolute !important;
+  box-sizing: content-box !important;
+  display: block !important;
+  clear: both !important;
+  float: none !important;
+}
+
+/* ============== 关键新增：清除"页脚内部包装层"的负 top/left 偏移 ==============
+   这正是用户截图里"第 4 页"漂到正文右边的根因：
+   页脚 footer 的 top=1033（底部）是对的，但它的直接子 div 写了
+   style="position: relative; top: -168px"，把整个 layout-textbox 向上拉了
+   168px，导致 Y 坐标变成 1033 - 168 = 865（正好与"乙方责任与义务"同一水平线）。
+   这里强制把包装层打回 position:static / top:0，孙节点的 absolute 锚点就会
+   直接落到 footer 自身的左上角，textbox 的 top/left 就是相对 footer 的偏移，
+   与 WPS 渲染一致，内容正确地待在页脚矩形内。
+   ============================================================================ */
+.ep-root .layout-page-footer > * {
+  position: static !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: auto !important;
+  bottom: auto !important;
+  transform: none !important;
+  margin: 0 !important;
+}
+
+.ep-root .layout-page-content {
+  box-sizing: content-box !important;
+  display: block !important;
+  clear: both !important;
+  float: none !important;
+}
+
+.ep-root .layout-page-header > *,
+.ep-root .layout-page-footer > *,
+.ep-root .layout-page-header p,
+.ep-root .layout-page-footer p {
+  text-align: inherit;
+  float: none !important;
+  clear: both;
+  box-sizing: content-box !important;
+}
+
+.ep-root .layout-page-header *,
+.ep-root .layout-page-footer * {
+  box-sizing: content-box !important;
+}
+
+.ep-root .docx-editor__pages-container,
+.ep-root .docx-editor-vue__pages-container,
+.ep-root .prosemirror-zoom-container,
+.ep-root .prosemirror-editor-wrapper {
+  box-sizing: content-box !important;
+  display: block !important;
+}
+
+.ep-root .layout-paragraph,
+.ep-root .layout-line,
+.ep-root .layout-fragment {
+  box-sizing: content-box !important;
+  display: block !important;
+  float: none !important;
+}
+
+.ep-root .docx-editor__scroll-container,
+.ep-root .docx-editor-vue__pages-viewport {
+  display: block !important;
+}
+
+/* ============== 关键新增：页眉/页脚内的 .layout-textbox 收缩 + 居中 ==============
+   问题场景（用户对比 WPS）：
+   .layout-page-footer 宽 554px，内部 .layout-textbox 被 layout-painter 写死为
+   width: 192px，left: 181px → 外层盒子在页脚里是居中的，但 textbox 内部段落
+   是 text-align: left → "第 4 页"（约 40px 宽）在 192px 大盒里靠左，文字实际
+   中心点比页脚中心偏左 ~76px，和 WPS 的"页码正好居中"观感不一致。
+
+   解决思路（不猜测 docx 原文段落想左/中/右对齐，通用更稳）：
+   1) 把 textbox 本身从"固定 192x192 大框"收缩成"刚好包裹内容的小盒"
+      → width:auto; height:auto（内容只有 ~40x14.6，不再是 192 大框）
+   2) 把收缩后的小盒用 left:50% + translateX(-50%) 水平居中
+      → 小盒中心正好落在页脚中心
+   3) 因为小盒宽度 = 内容宽度，所以无论段落内部是 left/center/right 对齐，
+      视觉效果都等于"文字整体正好在页脚正中心"，与 WPS 完全一致。
+
+   仅在 .layout-page-header / .layout-page-footer 内生效，绝不碰正文里的
+   layout-textbox（正文 textbox 需要精确坐标承载浮动图片/文本框）。
+   ============================================================================ */
+.ep-root .layout-page-header .layout-textbox,
+.ep-root .layout-page-footer .layout-textbox {
+  width: auto !important;
+  height: auto !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  top: 0 !important;
+  bottom: auto !important;
+  right: auto !important;
+  position: absolute !important;
+  box-sizing: content-box !important;
+  padding: 0 !important;
+}
+
+/* 页眉/页脚 textbox 内部的段落/行/片段：收缩后取消 block 默认 100% 宽，
+   避免内部又撑开到原来的 192px */
+.ep-root .layout-page-header .layout-textbox .layout-paragraph,
+.ep-root .layout-page-footer .layout-textbox .layout-paragraph,
+.ep-root .layout-page-header .layout-textbox .layout-line,
+.ep-root .layout-page-footer .layout-textbox .layout-line {
+  display: inline-block !important;
+  width: auto !important;
+  box-sizing: content-box !important;
+}
+
+/* ————————————————————————————————————————————————————————————————————————————
+   前缀 B：#vendorsys-word-editor-root（本地唯一容器）
+   ———————————————————————————————————————————————————————————————————————————— */
+
+#vendorsys-word-editor-root .paged-editor,
+#vendorsys-word-editor-root .paged-editor__pages-container,
+.vendorsys-word-editor-root .paged-editor,
+.vendorsys-word-editor-root .paged-editor__pages-container {
+  display: block !important;
+}
+
+/* 页面容器：作为页眉/页脚 absolute 定位的锚点（最关键） */
+#vendorsys-word-editor-root .layout-page,
+.vendorsys-word-editor-root .layout-page {
+  position: relative !important;
+  box-sizing: content-box !important;
+  display: block !important;
+}
+
+/* 页眉：position / display / box-sizing 兜底，精确坐标仍由内联 style 决定 */
+#vendorsys-word-editor-root .layout-page-header,
+.vendorsys-word-editor-root .layout-page-header {
+  position: absolute !important;
+  box-sizing: content-box !important;
+  display: block !important;
+  clear: both !important;
+  float: none !important;
+}
+
+/* 页眉内部包装层清零：同步前缀 A 的修复 */
+#vendorsys-word-editor-root .layout-page-header > *,
+.vendorsys-word-editor-root .layout-page-header > * {
+  position: static !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: auto !important;
+  bottom: auto !important;
+  transform: none !important;
+  margin: 0 !important;
+}
+
+/* 页脚：核心修复 —— 强制 absolute + block，防止漂到正文右侧同一行 */
+#vendorsys-word-editor-root .layout-page-footer,
+.vendorsys-word-editor-root .layout-page-footer {
+  position: absolute !important;
+  box-sizing: content-box !important;
+  display: block !important;
+  clear: both !important;
+  float: none !important;
+}
+
+/* 页脚内部包装层清零：修复 top:-168px 把内容拉到正文右侧同一水平线的问题 */
+#vendorsys-word-editor-root .layout-page-footer > *,
+.vendorsys-word-editor-root .layout-page-footer > * {
+  position: static !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: auto !important;
+  bottom: auto !important;
+  transform: none !important;
+  margin: 0 !important;
+}
+
+#vendorsys-word-editor-root .layout-page-content,
+.vendorsys-word-editor-root .layout-page-content {
+  box-sizing: content-box !important;
+  display: block !important;
+  clear: both !important;
+  float: none !important;
+}
+
+#vendorsys-word-editor-root .layout-page-header > *,
+.vendorsys-word-editor-root .layout-page-header > *,
+#vendorsys-word-editor-root .layout-page-footer > *,
+.vendorsys-word-editor-root .layout-page-footer > *,
+#vendorsys-word-editor-root .layout-page-header p,
+.vendorsys-word-editor-root .layout-page-header p,
+#vendorsys-word-editor-root .layout-page-footer p,
+.vendorsys-word-editor-root .layout-page-footer p {
+  text-align: inherit;
+  float: none !important;
+  clear: both;
+  box-sizing: content-box !important;
+}
+
+#vendorsys-word-editor-root .layout-page-header *,
+.vendorsys-word-editor-root .layout-page-header *,
+#vendorsys-word-editor-root .layout-page-footer *,
+.vendorsys-word-editor-root .layout-page-footer * {
+  box-sizing: content-box !important;
+}
+
+#vendorsys-word-editor-root .docx-editor__pages-container,
+.vendorsys-word-editor-root .docx-editor__pages-container,
+#vendorsys-word-editor-root .docx-editor-vue__pages-container,
+.vendorsys-word-editor-root .docx-editor-vue__pages-container,
+#vendorsys-word-editor-root .prosemirror-zoom-container,
+.vendorsys-word-editor-root .prosemirror-zoom-container,
+#vendorsys-word-editor-root .prosemirror-editor-wrapper,
+.vendorsys-word-editor-root .prosemirror-editor-wrapper {
+  box-sizing: content-box !important;
+  display: block !important;
+}
+
+#vendorsys-word-editor-root .layout-paragraph,
+.vendorsys-word-editor-root .layout-paragraph,
+#vendorsys-word-editor-root .layout-line,
+.vendorsys-word-editor-root .layout-line,
+#vendorsys-word-editor-root .layout-fragment,
+.vendorsys-word-editor-root .layout-fragment {
+  box-sizing: content-box !important;
+  display: block !important;
+  float: none !important;
+}
+
+#vendorsys-word-editor-root .docx-editor__scroll-container,
+.vendorsys-word-editor-root .docx-editor__scroll-container,
+#vendorsys-word-editor-root .docx-editor-vue__pages-viewport,
+.vendorsys-word-editor-root .docx-editor-vue__pages-viewport {
+  display: block !important;
+}
+
+/* 前缀 B 同步：页眉/页脚内的 layout-textbox 收缩 + 居中（规则与前缀 A 等价） */
+#vendorsys-word-editor-root .layout-page-header .layout-textbox,
+.vendorsys-word-editor-root .layout-page-header .layout-textbox,
+#vendorsys-word-editor-root .layout-page-footer .layout-textbox,
+.vendorsys-word-editor-root .layout-page-footer .layout-textbox {
+  width: auto !important;
+  height: auto !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  top: 0 !important;
+  bottom: auto !important;
+  right: auto !important;
+  position: absolute !important;
+  box-sizing: content-box !important;
+  padding: 0 !important;
+}
+#vendorsys-word-editor-root .layout-page-header .layout-textbox .layout-paragraph,
+.vendorsys-word-editor-root .layout-page-header .layout-textbox .layout-paragraph,
+#vendorsys-word-editor-root .layout-page-footer .layout-textbox .layout-paragraph,
+.vendorsys-word-editor-root .layout-page-footer .layout-textbox .layout-paragraph,
+#vendorsys-word-editor-root .layout-page-header .layout-textbox .layout-line,
+.vendorsys-word-editor-root .layout-page-header .layout-textbox .layout-line,
+#vendorsys-word-editor-root .layout-page-footer .layout-textbox .layout-line,
+.vendorsys-word-editor-root .layout-page-footer .layout-textbox .layout-line {
+  display: inline-block !important;
+  width: auto !important;
+  box-sizing: content-box !important;
+}
+
+/* ————————————————————————————————————————————————————————————————————————————
+   无前缀兜底：对 layout-* 核心类生效（最后一层保险）
+   仅对最关键的定位/盒模型字段加 !important，其它不碰
+   ———————————————————————————————————————————————————————————————————————————— */
+
+.layout-page {
+  position: relative;
+  box-sizing: content-box;
+}
+
+.layout-page-header,
+.layout-page-footer {
+  position: absolute;
+  box-sizing: content-box;
+  display: block;
+  clear: both;
+  float: none;
+}
+
+/* 无前缀兜底：页眉/页脚内部包装层同样清零负偏移 */
+.layout-page-header > *,
+.layout-page-footer > * {
+  position: static !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: auto !important;
+  bottom: auto !important;
+  transform: none !important;
+  margin: 0 !important;
+}
+
+/* 无前缀兜底：页眉/页脚内的 layout-textbox 收缩 + 居中（最后一层保险） */
+.layout-page-header .layout-textbox,
+.layout-page-footer .layout-textbox {
+  width: auto !important;
+  height: auto !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  top: 0 !important;
+  position: absolute !important;
+  box-sizing: content-box !important;
+  padding: 0 !important;
+}
+.layout-page-header .layout-textbox .layout-paragraph,
+.layout-page-footer .layout-textbox .layout-paragraph,
+.layout-page-header .layout-textbox .layout-line,
+.layout-page-footer .layout-textbox .layout-line {
+  display: inline-block !important;
+  width: auto !important;
+}
+
+.layout-page-content {
+  box-sizing: content-box;
+  display: block;
+  float: none;
+}
+
+/* ============================================================================
+   自定义段落样式选择器（WordEditor toolbarExtra 里新增的 antd Select）
+   下拉选项预览样式：为不同 styleId 设置正确的字体/字号/加粗等视觉特征，
+   让用户在下拉框里一眼就能看到样式长什么样（和 Word/WPS 一致）。
+   对应 JSX 里给每个 option 加的 className: `style-preview-${styleId}`。
+   ============================================================================ */
+
+/* 通用：所有 style-preview 选项让字体渲染更清晰、不要让 antd 截断高度 */
+.ep-root .style-preview-Normal,
+#vendorsys-word-editor-root .style-preview-Normal,
+.style-preview-Normal,
+.ep-root .style-preview-Heading1,
+#vendorsys-word-editor-root .style-preview-Heading1,
+.style-preview-Heading1,
+.ep-root .style-preview-Heading2,
+#vendorsys-word-editor-root .style-preview-Heading2,
+.style-preview-Heading2,
+.ep-root .style-preview-Heading3,
+#vendorsys-word-editor-root .style-preview-Heading3,
+.style-preview-Heading3,
+.ep-root .style-preview-Title,
+#vendorsys-word-editor-root .style-preview-Title,
+.style-preview-Title,
+.ep-root .style-preview-Subtitle,
+#vendorsys-word-editor-root .style-preview-Subtitle,
+.style-preview-Subtitle,
+.ep-root .style-preview-Quote,
+#vendorsys-word-editor-root .style-preview-Quote,
+.style-preview-Quote,
+.ep-root .style-preview-IntenseQuote,
+#vendorsys-word-editor-root .style-preview-IntenseQuote,
+.style-preview-IntenseQuote,
+.ep-root .style-preview-NoSpacing,
+#vendorsys-word-editor-root .style-preview-NoSpacing,
+.style-preview-NoSpacing,
+.ep-root .style-preview-PlainText,
+#vendorsys-word-editor-root .style-preview-PlainText,
+.style-preview-PlainText {
+  line-height: 1.8 !important;
+  padding: 2px 6px !important;
+}
+
+/* 正文 Normal —— 仿宋 三号 */
+.ep-root .style-preview-Normal,
+#vendorsys-word-editor-root .style-preview-Normal,
+.style-preview-Normal {
+  font-family: "STFangsong", "STSong", "FangSong", serif !important;
+  font-size: 16px !important;
+  font-weight: normal !important;
+}
+
+/* 标题 1 —— 黑体 小二号 加粗 */
+.ep-root .style-preview-Heading1,
+#vendorsys-word-editor-root .style-preview-Heading1,
+.style-preview-Heading1,
+/* 标题 Title 同样用黑体（我们 preset 里 Title 的字体属性是黑体+大字号） */
+.ep-root .style-preview-Title,
+#vendorsys-word-editor-root .style-preview-Title,
+.style-preview-Title {
+  font-family: "STHeiti", "STSong", "SimHei", "Microsoft YaHei", sans-serif !important;
+  font-size: 18px !important;
+  font-weight: 700 !important;
+}
+
+/* 标题 2 —— 黑体 三号 加粗 */
+.ep-root .style-preview-Heading2,
+#vendorsys-word-editor-root .style-preview-Heading2,
+.style-preview-Heading2 {
+  font-family: "STHeiti", "STSong", "SimHei", "Microsoft YaHei", sans-serif !important;
+  font-size: 16px !important;
+  font-weight: 700 !important;
+}
+
+/* 标题 3+4+5+6 —— 黑体 小三号 加粗 */
+.ep-root .style-preview-Heading3,
+#vendorsys-word-editor-root .style-preview-Heading3,
+.style-preview-Heading3,
+.ep-root .style-preview-Heading4,
+#vendorsys-word-editor-root .style-preview-Heading4,
+.style-preview-Heading4,
+.ep-root .style-preview-Heading5,
+#vendorsys-word-editor-root .style-preview-Heading5,
+.style-preview-Heading5,
+.ep-root .style-preview-Heading6,
+#vendorsys-word-editor-root .style-preview-Heading6,
+.style-preview-Heading6 {
+  font-family: "STHeiti", "STSong", "SimHei", "Microsoft YaHei", sans-serif !important;
+  font-size: 15px !important;
+  font-weight: 700 !important;
+}
+
+/* 副标题 Subtitle —— 楷体 三号 */
+.ep-root .style-preview-Subtitle,
+#vendorsys-word-editor-root .style-preview-Subtitle,
+.style-preview-Subtitle {
+  font-family: "STKaiti", "STSong", "KaiTi", serif !important;
+  font-size: 16px !important;
+  font-weight: normal !important;
+}
+
+/* 引用 Quote / 强调引用 IntenseQuote —— 楷体 三号 倾斜 */
+.ep-root .style-preview-Quote,
+#vendorsys-word-editor-root .style-preview-Quote,
+.style-preview-Quote,
+.ep-root .style-preview-IntenseQuote,
+#vendorsys-word-editor-root .style-preview-IntenseQuote,
+.style-preview-IntenseQuote {
+  font-family: "STKaiti", "STSong", "KaiTi", serif !important;
+  font-size: 16px !important;
+  font-style: italic !important;
+  font-weight: normal !important;
+}
+
+/* 紧凑 No Spacing / 纯文本 Plain Text —— 仿宋 小四 */
+.ep-root .style-preview-NoSpacing,
+#vendorsys-word-editor-root .style-preview-NoSpacing,
+.style-preview-NoSpacing,
+.ep-root .style-preview-PlainText,
+#vendorsys-word-editor-root .style-preview-PlainText,
+.style-preview-PlainText {
+  font-family: "STFangsong", "STSong", "FangSong", serif !important;
+  font-size: 14px !important;
+  font-weight: normal !important;
+}
+
+/* ============================================================================
+   隐藏工具栏里 DocxEditor 自带的"段落样式选择器"（避免与自定义 antd Select
+   并存导致用户困惑，并且自带的那个 value 同步有 bug）。
+   
+   只保留一层命中手段（配合 JS 脚本加的 data 属性，高优先级 !important 加固）：
+   1) JS 脚本识别 trigger 文本命中 PRESET_STYLES 的 Radix Select → 隐藏，并加
+      data-vendorsys-hidden-style-picker="true"（会排除我们自定义的 Select）
+   2) 下面这条 CSS 配合 JS 的 data 属性，再加固一次（防止 React re-render 清掉）
+   
+   —— 为什么不再写更泛的兜底 CSS（如 [class*="toolbar"][data-value=Normal]）？
+      因为它**无法区分**"DocxEditor 自带的样式选择器"和"我们自定义的 antd Select"，
+      两个选择器都在 toolbar 区域内、也都可能写 data-value="Normal"，泛化规则会
+      把我们自定义的样式选择器也隐藏 → 用户看到工具栏样式工具消失（同时字号选择器
+      顶到前面的空位置，被误以为"多了一个奇怪的工具"）。
+   ============================================================================ */
+
+/* 唯一一层隐藏规则：命中 JS 脚本加的 data 属性（自带样式选择器独有） */
+.ep-root [data-vendorsys-hidden-style-picker="true"],
+#vendorsys-word-editor-root [data-vendorsys-hidden-style-picker="true"],
+[data-vendorsys-hidden-style-picker="true"] {
+  display: none !important;
+  visibility: hidden !important;
+  width: 0 !important;
+  height: 0 !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* ============================================================================
+   自定义受控样式选择器 vendorsys-custom-style-picker：极轻量 CSS
+   —— 修复上一轮"画蛇添足的通用 position/static 通配符把 antd Select 内部布局彻底搞坏"
+      的问题（导致 Select 变成空白白框，点不开也看不到文字）
+
+   重要结论（从历史踩坑总结）：
+   之前为页眉/页脚写的全局 !important 规则都带了 .layout-textbox / .layout-paragraph
+   这类 layout 专属类名作为前缀，**根本不可能命中 toolbarExtra 里的 antd Select**
+   （antd Select 的 DOM 里完全不会出现 .layout-textbox 这种类）。
+   所以完全不需要给 antd Select 写任何"通用重置"！
+   只需要：
+   1) Label "样式：" 的简单样式
+   2) dropdown 里的 option 字体预览样式（style-preview-*）
+   3) 极少量的 box-sizing / overflow 修正（如果被全局 * { box-sizing: border-box } 影响）
+   ============================================================================ */
+
+/* 1. 最外层容器：在工具栏里看起来是一个独立的、带 Label 的小区域 */
+.ep-root .vendorsys-custom-style-picker,
+#vendorsys-word-editor-root .vendorsys-custom-style-picker,
+.vendorsys-custom-style-picker {
+  display: inline-flex !important;
+  align-items: center !important;
+  height: 28px !important;
+  padding: 0 6px !important;
+  box-sizing: border-box !important;
+  background: transparent !important;
+}
+
+/* Label "样式：" 的文本样式 */
+.ep-root .vendorsys-custom-style-picker__label,
+#vendorsys-word-editor-root .vendorsys-custom-style-picker__label,
+.vendorsys-custom-style-picker__label {
+  font-size: 12px !important;
+  line-height: 28px !important;
+  color: #8c8c8c !important;
+  margin-right: 4px !important;
+  white-space: nowrap !important;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+}
+
+/* 2. antd Select 只需要修正最基础的 box-sizing 和宽度，
+      其余完全交给 antd 默认样式（不要再写 position: static 这种通配符！） */
+.ep-root .vendorsys-custom-style-picker > .ant-select,
+#vendorsys-word-editor-root .vendorsys-custom-style-picker > .ant-select,
+.vendorsys-custom-style-picker > .ant-select {
+  width: 150px !important;
+  box-sizing: border-box !important;
+}
+
+/* 3. 挂在 body 下的 antd Select dropdown + 里面每个 option 的字体预览样式
+      （这部分之前的逻辑是对的，保留即可）
+
+   新增：专属 .vendorsys-word-style-dropdown 类的 z-index 强制提升。
+   antd 默认 dropdown 的 z-index 只有 150，会被 DocxEditor 的深色主题工具栏
+   （z-index 通常在 100~1000 范围）和页面顶部导航（1000+）盖住，用户看到
+   "点了 Select 但 popup 完全没出现"的假象。这里提到 10000 保证绝对可见。
+*/
+.ant-select-dropdown.vendorsys-word-style-dropdown,
+body > .ant-select-dropdown.vendorsys-word-style-dropdown {
+  z-index: 10000 !important;
+}
+
+/* —— 2026/08/14 新增：自定义 dropdown option 的样式预览"不会被 antd 默认字体覆盖"保护
+ *
+ * 根因：antd Select 默认给 `.ant-select-item-option` 写了一个 `font: 12px/22px ...`
+ * 简写属性（font-size / line-height / font-family / font-weight 写在同一个属性里），
+ * 这个简写的优先级比分开立的 font-size/font-weight 等高，所以即便我们给 option 容器
+ * 挂了 `style={{ fontSize: '21px', fontWeight: 700 }}`，antd 的默认 font 简写依然
+ * 会把这些值全部重置回 12px/normal，导致用户看到"所有 option 都是 12px 小字体"
+ * （就是用户截图 1 的现象）。
+ *
+ * 修复：用 `font: inherit !important` + `line-height: inherit !important`，
+ * 强制 antd 的默认 font 简写失效，让 option 内部元素的字体/字号/加粗/斜体/行高
+ * 100% 继承自外层 .ant-select-item-option（我们在上面挂了精确的 inline style）。
+ * 再配合 padding 变大，避免大号字体被上下 padding 裁剪。
+ */
+:where(.ant-select-dropdown.vendorsys-word-style-dropdown) .ant-select-item,
+:where(.ant-select-dropdown.vendorsys-word-style-dropdown) .ant-select-item-option,
+:where(.ant-select-dropdown.vendorsys-word-style-dropdown) .ant-select-item-option-content,
+:where(.ant-select-dropdown.vendorsys-word-style-dropdown) .ant-select-item-option-content > * {
+  font: inherit !important;
+  line-height: inherit !important;
+}
+:where(.ant-select-dropdown.vendorsys-word-style-dropdown) .ant-select-item,
+:where(.ant-select-dropdown.vendorsys-word-style-dropdown) .ant-select-item-option {
+  padding-top: 7px !important;
+  padding-bottom: 7px !important;
+  /* 颜色/下划线/删除线等 inline style 写在容器上时会自动继承到子元素文字，
+     此处无需额外声明 */
+}
+
+/* 下面 .style-preview-XXX 的规则全部用 :where() 包一层 → 选择器优先级变成 0。
+ * 这样做的原因：这些规则是我们之前的"静态手写字体兜底"，优先级必须低于
+ * 现在每个 option 动态计算的 inline style（inline style 本来就更高，但加上
+ * :where() 是为了防止这里之前的 !important 盖掉 inline 计算值）。
+ * 只有当某个 Style 缺少 fontFamily 时（inline style 里没设置），这些 CSS
+ * 才会作为系统字体兜底生效（不会冲突）。
+ */
+:where(.ant-select-dropdown) .style-preview-Normal {
+  font-family: "STFangsong", "STSong", "FangSong", serif !important;
+}
+:where(.ant-select-dropdown) .style-preview-Heading1,
+:where(.ant-select-dropdown) .style-preview-Title {
+  font-family: "STHeiti", "STSong", "SimHei", "Microsoft YaHei", sans-serif !important;
+  font-weight: 700 !important;
+}
+:where(.ant-select-dropdown) .style-preview-Heading2 {
+  font-family: "STHeiti", "STSong", "SimHei", "Microsoft YaHei", sans-serif !important;
+  font-weight: 700 !important;
+}
+:where(.ant-select-dropdown) .style-preview-Heading3,
+:where(.ant-select-dropdown) .style-preview-Heading4,
+:where(.ant-select-dropdown) .style-preview-Heading5,
+:where(.ant-select-dropdown) .style-preview-Heading6 {
+  font-family: "STHeiti", "STSong", "SimHei", "Microsoft YaHei", sans-serif !important;
+  font-weight: 700 !important;
+}
+:where(.ant-select-dropdown) .style-preview-Subtitle {
+  font-family: "STKaiti", "STSong", "KaiTi", serif !important;
+}
+:where(.ant-select-dropdown) .style-preview-Quote,
+:where(.ant-select-dropdown) .style-preview-IntenseQuote {
+  font-family: "STKaiti", "STSong", "KaiTi", serif !important;
+  font-style: italic !important;
+}
+:where(.ant-select-dropdown) .style-preview-NoSpacing,
+:where(.ant-select-dropdown) .style-preview-PlainText {
+  font-family: "STFangsong", "STSong", "FangSong", serif !important;
+}
+:where(.ant-select-dropdown) .style-preview-fallback {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+  color: #bfbfbf !important;
+  font-style: italic !important;
+}
+
+/* ============================================================================
+   深色模式下：样式下拉框（popup）强制按浅色模式配色显示
+
+   现象：应用切到深色模式后，popup 挂在 .ep-root 内部，被 DocxEditor 的深色主题
+   染成深底浅字，和浅色模式差异很大。
+   需求：深色模式下这个下拉框仍按浅色模式显示。
+
+   注意：每个 option 的字体/颜色是 JS 按样式预览计算后写在 inline style 上的，
+   所以这里只覆盖「容器」配色，绝不给 .ant-select-item-option 本身加
+   color !important —— 否则会把「引用」的灰色斜体、「强调引用」的蓝色等
+   样式预览颜色一起压掉。
+   ============================================================================ */
+[data-theme="dark"] .ant-select-dropdown.vendorsys-word-style-dropdown {
+  background-color: #ffffff !important;
+  /* 只作为未设置颜色 option 的继承基色，不直接影响带 inline 预览色的 option */
+  color: rgba(0, 0, 0, 0.88) !important;
+  /* 根节点有 color-scheme: dark，会让原生滚动条/控件跟着变深，这里单独拉回浅色 */
+  color-scheme: light !important;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 3px 6px -4px rgba(0, 0, 0, 0.16) !important;
+}
+
+[data-theme="dark"] .ant-select-dropdown.vendorsys-word-style-dropdown .rc-virtual-list-holder,
+[data-theme="dark"] .ant-select-dropdown.vendorsys-word-style-dropdown .rc-virtual-list-holder-inner {
+  background-color: #ffffff !important;
+}
+
+/* 选项文字：这里刻意「不加 !important」。
+   antd 深色算法给 .ant-select-item-option 写了一条 color（浅色字），
+   优先级低于本规则（多了 .vendorsys-word-style-dropdown 一级类名）会被覆盖；
+   而每个 option 自带的 inline 预览色（引用=灰、强调引用=蓝等）优先级高于
+   任何非 !important 的样式表规则，所以仍然正常生效。 */
+[data-theme="dark"] .ant-select-dropdown.vendorsys-word-style-dropdown .ant-select-item,
+[data-theme="dark"] .ant-select-dropdown.vendorsys-word-style-dropdown .ant-select-item-option,
+[data-theme="dark"] .ant-select-dropdown.vendorsys-word-style-dropdown .ant-select-item-option-content {
+  color: rgba(0, 0, 0, 0.88);
+}
+
+[data-theme="dark"] .ant-select-dropdown.vendorsys-word-style-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background-color: #f5f5f5 !important;
+}
+
+[data-theme="dark"] .ant-select-dropdown.vendorsys-word-style-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+  background-color: #e6f4ff !important;
+}
+
+[data-theme="dark"] .ant-select-dropdown.vendorsys-word-style-dropdown .ant-select-item-option-disabled {
+  color: #bfbfbf !important;
+}
+
+[data-theme="dark"] .ant-select-dropdown.vendorsys-word-style-dropdown ::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+/* 工具栏上的触发框（「样式：正文」那个 Select 本体）也按浅色模式渲染 */
+[data-theme="dark"] .vendorsys-custom-style-picker {
+  /* 外层容器背景是 JS inline 的 rgba(255,255,255,0.04)，深色下几乎看不见 */
+  background: rgba(0, 0, 0, 0.04) !important;
+}
+
+[data-theme="dark"] .vendorsys-custom-style-picker .ant-select-selector {
+  background-color: #ffffff !important;
+  border-color: #d9d9d9 !important;
+}
+
+[data-theme="dark"] .vendorsys-custom-style-picker .ant-select-selection-item,
+[data-theme="dark"] .vendorsys-custom-style-picker .ant-select-selection-placeholder {
+  color: rgba(0, 0, 0, 0.88) !important;
+}
+
+[data-theme="dark"] .vendorsys-custom-style-picker .ant-select-arrow {
+  color: rgba(0, 0, 0, 0.45) !important;
+}
+
+[data-theme="dark"] .vendorsys-custom-style-picker:hover .ant-select-selector,
+[data-theme="dark"] .vendorsys-custom-style-picker .ant-select-focused .ant-select-selector {
+  border-color: #4096ff !important;
+}
+
+/* ============================================================================
+   红头分隔线：修正 paragraph.attrs.borders.bottom 渲染异常的三层 CSS 兜底
+
+   问题（对应 JS 里 markHongTouSeparatorParagraphs 的说明）：
+   1) lib 把其他 undefined 边 fallback 成 bottom 的样式 → 画出四边框（用户截图反馈）
+   2) lib 把 border 画在 line-box 上而非 paragraph 容器上 → 短文字时红线只紧贴文字宽度
+
+   修复策略（不影响保存，只改浏览器视觉）：
+   A. 先清掉 lib 在目标 paragraph 上写的任何 border（四边全部 none）
+   B. paragraph 容器加 position: relative + padding-bottom（模拟 Word w:space=1pt）
+   C. 用 ::after 伪元素绝对定位，画一条横贯整段宽的红色 1.5pt ≈ 2px 实线
+      - 位置：paragraph 容器最下方 (bottom:0)，占满整段宽 (left/right:0)
+      - 效果与 Word 的 pBdr.bottom 完全一致（整段横红线 + 1pt 间距）
+   D. 三层前缀兜底 (.ep-root / #vendorsys-word-editor-root / .vendorsys-word-editor-root)
+      保证无论在哪种布局环境下都能命中，且使用 !important 压盖 lib 内联样式。
+   ============================================================================ */
+
+/* —— 前缀 A：.ep-root（@eigenpal/docx-editor-react 自带） —— */
+.ep-root [data-vendorsys-style-id="HongTouSeparator"],
+.ep-root .vendorsys-pstyle-hongtouseparator {
+  position: relative !important;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-bottom: none !important;
+  padding-bottom: 2px !important; /* 模拟 Word pBdr.space=1 (≈ 1.33px) 下的视觉间距 */
+  box-sizing: content-box !important; /* 防止 padding-bottom 被 box-sizing 吞掉导致横线错位 */
+}
+.ep-root [data-vendorsys-style-id="HongTouSeparator"]::after,
+.ep-root .vendorsys-pstyle-hongtouseparator::after {
+  content: '' !important;
+  display: block !important;
+  position: absolute !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: auto !important; /* 让 left/right 共同决定占满整段容器宽 */
+  height: 2px !important; /* 1.5pt = size=12 (12/8=1.5pt)，浏览器视觉用 2px 最接近国标红头线粗 */
+  background-color: #FF0000 !important; /* 与红头文字同色 */
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: none !important; /* 不挡选区点击、光标定位 */
+  z-index: 1 !important;
+  border: none !important; /* 防止伪元素自身被父级 border 继承污染 */
+}
+
+/* —— 前缀 B：我们自己加的唯一 ID / Class 容器（最强兜底） —— */
+#vendorsys-word-editor-root [data-vendorsys-style-id="HongTouSeparator"],
+#vendorsys-word-editor-root .vendorsys-pstyle-hongtouseparator,
+.vendorsys-word-editor-root [data-vendorsys-style-id="HongTouSeparator"],
+.vendorsys-word-editor-root .vendorsys-pstyle-hongtouseparator {
+  position: relative !important;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-bottom: none !important;
+  padding-bottom: 2px !important;
+  box-sizing: content-box !important;
+}
+#vendorsys-word-editor-root [data-vendorsys-style-id="HongTouSeparator"]::after,
+#vendorsys-word-editor-root .vendorsys-pstyle-hongtouseparator::after,
+.vendorsys-word-editor-root [data-vendorsys-style-id="HongTouSeparator"]::after,
+.vendorsys-word-editor-root .vendorsys-pstyle-hongtouseparator::after {
+  content: '' !important;
+  display: block !important;
+  position: absolute !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: auto !important;
+  height: 2px !important;
+  background-color: #FF0000 !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: none !important;
+  z-index: 1 !important;
+  border: none !important;
+}
+
+/* —— 前缀 C：无前缀兜底（在 iframe / 脱离容器的场景也能命中） —— */
+[data-vendorsys-style-id="HongTouSeparator"],
+.vendorsys-pstyle-hongtouseparator {
+  position: relative !important;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-bottom: none !important;
+  padding-bottom: 2px !important;
+  box-sizing: content-box !important;
+}
+[data-vendorsys-style-id="HongTouSeparator"]::after,
+.vendorsys-pstyle-hongtouseparator::after {
+  content: '' !important;
+  display: block !important;
+  position: absolute !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: auto !important;
+  height: 2px !important;
+  background-color: #FF0000 !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: none !important;
+  z-index: 1 !important;
+  border: none !important;
+}
+
+/* ===== 粘贴选项浮动按钮（WPS 风格） ===== */
+.vendorsys-paste-smart-tag {
+  position: fixed;
+  z-index: 11000;
+}
+.vendorsys-paste-smart-tag-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 6px;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  font-size: 13px;
+  color: #444;
+}
+.vendorsys-paste-smart-tag-trigger:hover {
+  color: #1677ff;
+  border-color: #1677ff;
+}
+.vendorsys-paste-smart-tag-trigger .arrow {
+  font-size: 9px;
+}
+.vendorsys-paste-smart-tag-menu {
+  min-width: 176px;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
+  padding: 4px 0;
+}
+.vendorsys-paste-smart-tag-menu button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 6px 14px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  color: #333;
+  text-align: left;
+}
+.vendorsys-paste-smart-tag-menu button:hover {
+  background: #f0f5ff;
+  color: #1677ff;
+}
+.vendorsys-paste-smart-tag-menu button .key {
+  margin-left: 20px;
+  font-size: 12px;
+  color: #999;
+}
+.vendorsys-paste-smart-tag-menu button:hover .key {
+  color: #1677ff;
+}
+[data-theme="dark"] .vendorsys-paste-smart-tag-trigger {
+  background: #2b2b2b;
+  border-color: #4a4a4a;
+  color: #ddd;
+}
+[data-theme="dark"] .vendorsys-paste-smart-tag-menu {
+  background: #2b2b2b;
+  border-color: #4a4a4a;
+}
+[data-theme="dark"] .vendorsys-paste-smart-tag-menu button {
+  color: #ddd;
+}
+[data-theme="dark"] .vendorsys-paste-smart-tag-menu button:hover {
+  background: rgba(22, 119, 255, 0.18);
+  color: #69a9ff;
+}
+[data-theme="dark"] .vendorsys-paste-smart-tag-menu button:hover .key {
+  color: #69a9ff;
+}
+