gcs-ui-lib 1.2.29 → 1.2.31

package/src/utils/exportPageSnapshot.js

@@ -1,137 +1,71 @@
-/** 页面内「导出/上传快照」按钮统一 class，克隆时自动排除 */
-export const PAGE_SNAPSHOT_BTN_CLASS = 'page-snapshot-btn'
+/**
+ * 高保真页面 HTML 快照导出（Vue2 页面适用）
+ *
+ * 相比 gcs-ui-lib/exportPageSnapshot：
+ * - 不做 CSS 裁剪，保留文档全部可访问样式
+ * - 克隆节点后内联关键 computed 布局样式，提升离线还原度
+ * - 内嵌图标字体（woff/woff2），跳过大体积宋体
+ * - 默认不注入 PDF 专用覆盖样式，避免表格/字号被压扁
+ */
 
-/** 后端填充区域占位符，Java 侧按此字符串替换为审批进度等 HTML */
 export const PAGE_SNAPSHOT_BACKEND_PLACEHOLDER = '<!-- PAGE_SNAPSHOT_BACKEND_PLACEHOLDER -->'
 
-/** 页面底部操作栏，快照时自动排除 */
-const PAGE_SNAPSHOT_SKIP_FOOTER_CLASS = 'page-button-shadow'
-
 const SNAPSHOT_FILENAME_PREFIX = 'page-snapshot'
-const SNAPSHOT_FILE_FIELD = 'file'
+const SKIP_TAGS = new Set(['script', 'style', 'link', 'noscript', 'svg'])
+const SKIP_CLASSES = [
+  'page-snapshot-btn',
+  'page-button-shadow',
+  'detpl-form-operate-box',
+  'self-footer'
+]
 
-const DEFAULT_SKIP_TAGS = new Set(['script', 'style', 'link', 'noscript', 'svg'])
-const DEFAULT_SKIP_CLASS_NAMES = [
-  PAGE_SNAPSHOT_BTN_CLASS,
-  PAGE_SNAPSHOT_SKIP_FOOTER_CLASS
+const SCROLL_UNWRAP_SELECTORS = [
+  '.el-table__body-wrapper',
+  '.el-table__fixed-body-wrapper',
+  '.el-scrollbar__wrap',
+  '.el-scrollbar__view',
+  '.vxe-table--body-wrapper',
+  '.vxe-table--body-inner-wrapper',
+  '.vxe-table--main-wrapper'
 ]
 
-/**
- * 供后端 Java（Flying Saucer / iText）转 PDF 时使用的内置样式。
- * 放在收集到的业务 CSS 之后，优先级更高。
- */
-const SNAPSHOT_PDF_CSS = `
-@page {
-  size: A4 landscape;
-  margin: 15mm;
-}
+/** 内联 computed 样式时关注的属性（布局 + 常见视觉） */
+const INLINE_STYLE_PROPS = [
+  'display', 'flex', 'flex-direction', 'flex-wrap', 'flex-grow', 'flex-shrink', 'flex-basis',
+  'align-items', 'align-self', 'align-content', 'justify-content', 'justify-self', 'gap', 'row-gap', 'column-gap',
+  'grid-template-columns', 'grid-template-rows', 'grid-column', 'grid-row',
+  'position', 'top', 'right', 'bottom', 'left', 'z-index', 'float', 'clear',
+  'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height',
+  'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
+  'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+  'box-sizing', 'overflow', 'overflow-x', 'overflow-y',
+  'border', 'border-top', 'border-right', 'border-bottom', 'border-left',
+  'border-radius', 'border-collapse', 'table-layout',
+  'background', 'background-color', 'background-image', 'background-size', 'background-position',
+  'color', 'font-size', 'font-weight', 'font-style', 'line-height', 'letter-spacing',
+  'text-align', 'text-decoration', 'vertical-align', 'white-space', 'word-break', 'word-wrap',
+  'opacity', 'visibility', 'box-shadow', 'transform'
+]
 
+const SNAPSHOT_BASE_CSS = `
 html, body {
   margin: 0;
-  padding: 0;
+  padding: 8px;
   background: #fff;
-  font-family: SimSun, "Songti SC", "Microsoft YaHei", serif;
-  font-size: 10px;
-  line-height: 1.4;
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
 }
 
-* { box-sizing: border-box; }
-
-/* 页面根容器：展开高度，避免只导出可视区域 */
 n20-page,
 [class$="-wrap"],
 .n20-page-content,
-.page-content {
+.page-content,
+.action-parse-form-container {
   height: auto !important;
   max-height: none !important;
   overflow: visible !important;
 }
 
-/* 解除表格/滚动区裁剪（长列表被截断的常见原因） */
-.el-table__body-wrapper,
-.el-table__fixed-body-wrapper,
-.el-scrollbar__wrap,
-.el-scrollbar__view,
-.vxe-table--body-wrapper,
-.vxe-table--body-inner-wrapper,
-.vxe-table--main-wrapper {
-  max-height: none !important;
-  height: auto !important;
-  overflow: visible !important;
-}
-
-.el-table,
-.vxe-table {
-  width: 100% !important;
-  page-break-inside: auto;
-}
-
-/* 原生 table：分页与表头重复 */
-table {
-  width: 100%;
-  border-collapse: collapse;
-  page-break-inside: auto;
-}
-
-thead {
-  display: table-header-group;
-}
-
-tfoot {
-  display: table-footer-group;
-}
-
-tbody {
-  display: table-row-group;
-}
-
-tr {
-  page-break-inside: avoid;
-  page-break-after: auto;
-}
-
-td, th {
-  max-width: none;
-  word-wrap: break-word;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  white-space: normal !important;
-  padding: 4px;
-  font-size: 10px;
-  vertical-align: top;
-}
-
-/* Element 表头/行 */
-.el-table__header-wrapper thead {
-  display: table-header-group;
-}
-
-.el-table__body tr {
-  page-break-inside: avoid;
-}
-
-/* vxe-table 行块级分页 */
-.vxe-body--row {
-  page-break-inside: avoid;
-}
-
-/* 表单分组：尽量避免拦腰切断 */
-.el-form-item,
-.el-row,
-.form-group {
-  page-break-inside: avoid;
-}
-
-/* 横向过长时略缩小（Flying Saucer 对 zoom 支持有限，以字号为主） */
-.el-table th,
-.el-table td,
-.vxe-cell {
-  font-size: 10px;
-}
-
-/* 快照不需要的 UI */
 .el-dialog__wrapper,
 .el-message,
 .el-message-box__wrapper,
@@ -143,62 +77,45 @@ td, th {
 }
 `
 
-function buildSnapshotFilename() {
-  try {
-    const ts = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)
-    return `${SNAPSHOT_FILENAME_PREFIX}-${ts}.html`
-  } catch (e) {
-    return `${SNAPSHOT_FILENAME_PREFIX}.html`
-  }
-}
+const SNAPSHOT_PDF_CSS = `
+@page { size: A4 landscape; margin: 15mm; }
+html, body { font-family: SimSun, "Songti SC", "Microsoft YaHei", serif; font-size: 10px; line-height: 1.4; }
+td, th { white-space: normal !important; padding: 4px; font-size: 10px; vertical-align: top; }
+`
 
-/** 安全执行，异常时返回 fallback，不中断主流程 */
 function safeRun(fn, fallback, label) {
   try {
     return fn()
   } catch (e) {
-    if (label) {
-      console.warn(`[exportPageSnapshot] ${label}`, e)
-    }
+    if (label) console.warn(`[exportPageHtml] ${label}`, e)
     return fallback
   }
 }
 
-function createEmptyHtmlUsage() {
-  return { classes: new Set(), ids: new Set(), tags: new Set(), attrs: new Set() }
-}
-
-function removeTempStyleNode(node) {
-  try {
-    if (node?.parentNode) node.parentNode.removeChild(node)
-  } catch (e) {
-    // ignore
-  }
+function buildSnapshotFilename() {
+  const ts = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)
+  return `${SNAPSHOT_FILENAME_PREFIX}-${ts}.html`
 }
 
-function shouldSkipElement(el, skipTags, skipClassNames) {
+function shouldSkipElement(el) {
   if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
-  const tag = el.tagName.toLowerCase()
-  if (skipTags.has(tag)) return true
-  return skipClassNames.some((cls) => el.classList?.contains(cls))
+  if (SKIP_TAGS.has(el.tagName.toLowerCase())) return true
+  return SKIP_CLASSES.some((cls) => el.classList?.contains(cls))
 }
 
-function clonePageNode(node, skipTags, skipClassNames) {
+function clonePageNode(node) {
   if (!node) return null
 
-  try {
+  return safeRun(() => {
     if (node.nodeType === Node.TEXT_NODE) return node.cloneNode(false)
     if (node.nodeType !== Node.ELEMENT_NODE) return null
-    if (shouldSkipElement(node, skipTags, skipClassNames)) return null
+    if (shouldSkipElement(node)) return null
 
     const tag = node.tagName.toLowerCase()
     const cloned = node.cloneNode(false)
+
     Array.from(node.attributes || []).forEach((attr) => {
-      try {
-        cloned.setAttribute(attr.name, attr.value)
-      } catch (e) {
-        // ignore single attr failure
-      }
+      safeRun(() => cloned.setAttribute(attr.name, attr.value), undefined)
     })
 
     if (tag === 'input') {
@@ -220,374 +137,461 @@ function clonePageNode(node, skipTags, skipClassNames) {
     }
 
     Array.from(node.childNodes).forEach((child) => {
-      const childClone = safeRun(
-        () => clonePageNode(child, skipTags, skipClassNames),
-        null,
-        '克隆子节点失败'
-      )
+      const childClone = clonePageNode(child)
       if (childClone) cloned.appendChild(childClone)
     })
     return cloned
-  } catch (e) {
-    console.warn('[exportPageSnapshot] 克隆节点失败', e)
-    return null
-  }
+  }, null, '克隆节点失败')
 }
 
-function normalizeCssChunk(text) {
-  return (text || '').replace(/\s+/g, ' ').trim()
+function unwrapScrollContainers(root) {
+  if (!root?.querySelectorAll) return
+  SCROLL_UNWRAP_SELECTORS.forEach((sel) => {
+    root.querySelectorAll(sel).forEach((el) => {
+      el.style.maxHeight = 'none'
+      el.style.height = 'auto'
+      el.style.overflow = 'visible'
+    })
+  })
 }
 
-const SKIP_SELECTOR_TAGS = new Set(['from', 'to'])
+/**
+ * 删除页面锚点导航 DOM（N20-anchor 右侧/左侧导航栏）
+ * @param {HTMLElement} root
+ */
+export function removeAnchorNav(root) {
+  if (!root?.querySelectorAll) return
+
+  root.querySelectorAll('.detpl-edit-form-container.flex-box').forEach((flexBox) => {
+    Array.from(flexBox.children).forEach((child) => {
+      if (child.classList.contains('flex-item')) return
+      if (child.querySelector('.n20-anchor2-nav')) {
+        child.remove()
+      }
+    })
+    flexBox.style?.removeProperty('padding-right')
+  })
+
+  root.querySelectorAll('.n20-anchor, .n20-anchor-left, .n20-anchor2-sidebar').forEach((el) => {
+    el.remove()
+  })
+
+  root.querySelectorAll('.n20-anchor2-nav').forEach((el) => {
+    if (!el.closest('.flex-item')) {
+      el.remove()
+    }
+  })
+}
 
-/** el-timeline 家族：el-timeline、el-timeline-item、el-timeline-item__tail 等所有 el-timeline 开头 class */
-const EL_TIMELINE_CLASS_PREFIX = 'el-timeline'
+/** 底部固定提交/操作按钮组选择器 */
+const BOTTOM_OPERATE_SELECTORS = [
+  '.page-button-shadow',
+  '.detpl-form-operate-box',
+  '.self-footer',
+  '.page-footer-shadow'
+]
 
 /**
- * 后端占位符替换后会注入审批进度等 HTML，裁剪时需强制保留相关 class 的 CSS。
- * 匹配规则：选择器中任一 class 命中即保留整条规则。
+ * 删除底部固定提交按钮组 DOM
+ * @param {HTMLElement} root
  */
-const BACKEND_PLACEHOLDER_PRESERVE_CLASS_PATTERNS = [
-  /^n20-form-expandable-pane$/,
-  /^n20-approve/,
-  /^n20-title/,
-  /^n20-tips$/,
-  /^n20-time$/,
-  /^n20-worker$/,
-  /^n20-description/,
-  /^n20-icon-/,
-  /^result-left-name$/,
-  /^worker-icon$/,
-  /^color-primary$/,
-  /^color-0$/,
-  /^expand$/,
-  /^is-reverse$/
-]
+export function removeBottomOperateButtons(root) {
+  if (!root?.querySelectorAll) return
 
-function isElTimelineFamilyClass(className) {
-  return typeof className === 'string' && className.startsWith(EL_TIMELINE_CLASS_PREFIX)
+  BOTTOM_OPERATE_SELECTORS.forEach((selector) => {
+    root.querySelectorAll(selector).forEach((el) => el.remove())
+  })
 }
 
-function isPreservedPlaceholderClass(className) {
-  if (!className || typeof className !== 'string') return false
-  if (isElTimelineFamilyClass(className)) return true
-  return BACKEND_PLACEHOLDER_PRESERVE_CLASS_PATTERNS.some((p) => {
-    try {
-      return p.test(className)
-    } catch (e) {
-      return false
-    }
-  })
+function mergeInlineStyle(el, extraCss) {
+  if (!extraCss) return
+  const prev = el.getAttribute('style') || ''
+  const merged = prev ? `${prev};${extraCss}` : extraCss
+  el.setAttribute('style', merged)
 }
 
-function selectorHasPreservedClass(selectorText) {
-  if (!selectorText || typeof selectorText !== 'string') return false
+function buildComputedStyleText(el) {
+  const computed = window.getComputedStyle(el)
+  const chunks = []
 
-  return safeRun(() => {
-    if (new RegExp(`\\.${EL_TIMELINE_CLASS_PREFIX}[\\w-]*`).test(selectorText)) return true
-
-    return selectorText.split(',').some((sel) => {
-      const noPseudo = sel
-        .replace(/:not\([^)]*\)/g, '')
-        .replace(/::?[\w-]+(\([^)]*\))?/g, '')
-      const { classes } = extractSimpleTokens(noPseudo)
-      return classes.some(isPreservedPlaceholderClass)
-    })
-  }, false, '保留 class 判断失败')
+  INLINE_STYLE_PROPS.forEach((prop) => {
+    const val = computed.getPropertyValue(prop)
+    if (!val || val === 'initial' || val === 'auto' && prop !== 'height' && prop !== 'width') return
+    if (prop === 'background-image' && val === 'none') return
+    chunks.push(`${prop}:${val}`)
+  })
+  return chunks.join(';')
 }
 
-/** 从快照 HTML 提取选择器可能引用到的标识 */
-function collectHtmlUsage(html) {
-  const usage = createEmptyHtmlUsage()
-  if (!html || typeof html !== 'string') return usage
+function inlineComputedStyles(sourceEl, cloneEl) {
+  if (!sourceEl || !cloneEl || sourceEl.nodeType !== Node.ELEMENT_NODE) return
 
-  return safeRun(() => {
-    for (const m of html.matchAll(/\bclass="([^"]*)"/g)) {
-      m[1].split(/\s+/).filter(Boolean).forEach((c) => usage.classes.add(c))
-    }
-    for (const m of html.matchAll(/\bid="([^"]+)"/g)) {
-      usage.ids.add(m[1])
-    }
-    for (const m of html.matchAll(/<([a-zA-Z][\w-]*)/g)) {
-      usage.tags.add(m[1].toLowerCase())
-    }
-    for (const m of html.matchAll(/\s(data-v-[a-f0-9]+)/g)) {
-      usage.attrs.add(m[1])
-    }
-    return usage
-  }, usage, '解析 HTML 使用信息失败')
+  mergeInlineStyle(cloneEl, buildComputedStyleText(sourceEl))
+
+  const srcChildren = sourceEl.children || []
+  const cloneChildren = cloneEl.children || []
+  const len = Math.min(srcChildren.length, cloneChildren.length)
+  for (let i = 0; i < len; i++) {
+    inlineComputedStyles(srcChildren[i], cloneChildren[i])
+  }
 }
 
-function extractSimpleTokens(selector) {
-  const empty = { classes: [], ids: [], tags: [] }
-  if (!selector || typeof selector !== 'string') return empty
+function normalizeCssChunk(text) {
+  return (text || '').replace(/\s+/g, ' ').trim()
+}
 
-  return safeRun(() => {
-    const classes = []
-    const ids = []
-    const tagList = []
-    const segments = selector.split(/[\s>+~]+/).filter(Boolean)
-
-    segments.forEach((seg) => {
-      let rest = seg
-      const tagMatch = rest.match(/^([a-zA-Z][\w-]*)/)
-      if (tagMatch && !/^[\.\#\[]/.test(rest)) {
-        const tag = tagMatch[1].toLowerCase()
-        if (!SKIP_SELECTOR_TAGS.has(tag)) tagList.push(tag)
-        rest = rest.slice(tagMatch[0].length)
-      }
-      for (const m of rest.matchAll(/\.([\w-]+)/g)) classes.push(m[1])
-      for (const m of rest.matchAll(/#([\w-]+)/g)) ids.push(m[1])
+function collectDocumentCss() {
+  const seen = new Set()
+  const rules = []
+  const processedStyleNodes = new Set()
+
+  const addRule = (cssText) => {
+    const chunk = normalizeCssChunk(cssText)
+    if (!chunk || seen.has(chunk)) return
+    seen.add(chunk)
+    rules.push(cssText.trim())
+  }
+
+  safeRun(() => {
+    Array.from(document.styleSheets || []).forEach((sheet) => {
+      safeRun(() => {
+        const sheetRules = sheet.cssRules || sheet.rules
+        if (sheet.ownerNode) processedStyleNodes.add(sheet.ownerNode)
+        if (!sheetRules) return
+        Array.from(sheetRules).forEach((rule) => {
+          safeRun(() => addRule(rule.cssText), undefined)
+        })
+      }, () => {
+        if (sheet.ownerNode?.tagName === 'STYLE') {
+          processedStyleNodes.add(sheet.ownerNode)
+          addRule(sheet.ownerNode.textContent || '')
+        }
+      })
     })
+  }, undefined, '遍历样式表失败')
 
-    return { classes, ids, tags: tagList }
-  }, empty, '解析选择器失败')
-}
+  safeRun(() => {
+    document.querySelectorAll('style').forEach((el) => {
+      if (!processedStyleNodes.has(el)) addRule(el.textContent || '')
+    })
+  }, undefined, '收集 style 标签失败')
 
-function matchAttributeSelectors(selector, usage) {
-  if (!selector || !usage) return true
+  return rules.join('\n')
+}
 
+function captureRootCssVariables() {
   return safeRun(() => {
-    const attrRe = /\[([^\]]+)\]/g
-    let m = attrRe.exec(selector)
-    while (m) {
-      const content = m[1].trim()
-      const fullMatch = content.match(/^([\w-]+)\s*([*^$]?=)\s*["']?([^"']+)["']?$/)
-      if (fullMatch) {
-        const [, attr, op, val] = fullMatch
-        if (attr === 'class') {
-          const matched = op === '$='
-            ? [...usage.classes].some((c) => c.endsWith(val))
-            : op === '^='
-              ? [...usage.classes].some((c) => c.startsWith(val))
-              : op === '*='
-                ? [...usage.classes].some((c) => c.includes(val))
-                : usage.classes.has(val)
-          if (!matched) return false
-        } else if (!usage.attrs.has(attr)) {
-          return false
-        }
-      } else if (usage.attrs.has(content)) {
-        // [data-v-xxx] 等精确属性
-      } else if (!/^class/.test(content)) {
-        return false
+    const styles = getComputedStyle(document.documentElement)
+    const vars = []
+    for (let i = 0; i < styles.length; i++) {
+      const prop = styles[i]
+      if (prop.startsWith('--')) {
+        vars.push(`${prop}:${styles.getPropertyValue(prop)}`)
       }
-      m = attrRe.exec(selector)
     }
-    return true
-  }, true, '属性选择器匹配失败')
+    return vars.length ? `:root { ${vars.join(';')} }` : ''
+  }, '', '收集 CSS 变量失败')
 }
 
-function selectorMatchesUsage(selector, usage) {
-  if (!selector || typeof selector !== 'string' || !usage) return false
+function stripHeavyFontFaces(css) {
+  return (css || '').replace(/@font-face\s*\{[^}]*font-family\s*:\s*SUN[^}]*\}/gi, '')
+}
 
-  return safeRun(() => {
-    const s = selector.trim()
-    if (!s) return false
-    if (/^(\*|html|body)(?![\w-])/.test(s)) return true
+function getAppStaticBase() {
+  const base = typeof process !== 'undefined' && process.env?.BASE_URL
+    ? process.env.BASE_URL
+    : '/gdebit/'
+  try {
+    return new URL(`static/`, new URL(base, window.location.origin)).href
+  } catch (e) {
+    return `${window.location.origin}/gdebit/static/`
+  }
+}
 
-    if (!matchAttributeSelectors(s, usage)) return false
+function getStylesheetBaseUrls() {
+  const bases = new Set([getAppStaticBase(), `${window.location.origin}/`])
 
-    const noPseudo = s
-      .replace(/:not\([^)]*\)/g, '')
-      .replace(/::?[\w-]+(\([^)]*\))?/g, '')
+  safeRun(() => {
+    document.querySelectorAll('link[rel="stylesheet"][href]').forEach((link) => {
+      bases.add(new URL('.', link.href).href)
+    })
+    Array.from(document.styleSheets || []).forEach((sheet) => {
+      if (!sheet.href) return
+      bases.add(new URL('.', sheet.href).href)
+    })
+  }, undefined)
 
-    const { classes, ids, tags } = extractSimpleTokens(noPseudo)
-    const hasAttrOnly = /\[[^\]]+\]/.test(s) && !classes.length && !ids.length && !tags.length
+  return [...bases]
+}
 
-    if (!classes.length && !ids.length && !tags.length) {
-      return hasAttrOnly
-    }
+function getLoadedFontResourceUrls() {
+  return safeRun(() => {
+    return performance
+      .getEntriesByType('resource')
+      .filter((entry) => /\.(woff2?|ttf|otf)(\?|$)/i.test(entry.name))
+      .map((entry) => entry.name)
+  }, [], '读取已加载字体资源失败')
+}
 
-    if (classes.some((c) => !usage.classes.has(c))) return false
-    if (ids.some((id) => !usage.ids.has(id))) return false
-    if (tags.length && !tags.every((t) => usage.tags.has(t))) return false
+function toAbsoluteFontAssetUrl(assetUrl) {
+  if (!assetUrl) return ''
+  if (/^https?:\/\//i.test(assetUrl) || assetUrl.startsWith('data:')) return assetUrl
+  try {
+    return new URL(assetUrl, window.location.origin).href
+  } catch (e) {
+    return assetUrl
+  }
+}
 
-    return true
-  }, false, '选择器匹配失败')
+function safeRequireFont(modulePath) {
+  try {
+    return toAbsoluteFontAssetUrl(require(modulePath))
+  } catch (e) {
+    return ''
+  }
 }
 
-function selectorListMatches(selectorText, usage) {
-  if (!selectorText || typeof selectorText !== 'string') return false
+/** webpack 解析的图标字体 URL（/gdebit/static/fonts/...） */
+function getWebpackIconFontUrls() {
+  const paths = [
+    'element-ui/lib/theme-chalk/fonts/element-icons.woff',
+    'element-ui/lib/theme-chalk/fonts/element-icons.ttf',
+    'n20-common-lib/src/assets/iconFont2/iconfont.woff2',
+    'n20-common-lib/src/assets/iconFont2/iconfont.woff',
+    'n20-common-lib/src/assets/iconFont2/iconfont.ttf'
+  ]
 
-  return safeRun(() => {
-    if (selectorHasPreservedClass(selectorText)) return true
-    return selectorText.split(',').some((sel) => selectorMatchesUsage(sel, usage))
-  }, false, '选择器列表匹配失败')
+  return [...new Set(paths.map(safeRequireFont).filter(Boolean))]
 }
 
-function collectAnimationNamesFromStyle(style) {
-  const names = new Set()
-  if (!style) return names
+const ICON_FONT_FAMILIES = [
+  'element-icons',
+  'core-lib-iconfont',
+  'iconfont',
+  'vxeiconfont'
+]
 
-  return safeRun(() => {
-    const animName = style.animationName
-    if (animName && animName !== 'none') {
-      animName.split(',').forEach((n) => names.add(n.trim()))
-    }
-    const anim = style.animation
-    if (anim && anim !== 'none') {
-      const first = anim.trim().split(/\s+/)[0]
-      if (first && !/^[\d.]/.test(first)) names.add(first)
-    }
-    return names
-  }, names, '解析动画名失败')
+function escapeRegExp(text) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
 
-function purgeCssRules(cssRules, usage, animationNames) {
-  const kept = []
-  const pendingKeyframes = []
+/** 导出前触发图标字体加载，便于 performance / document.fonts 拿到真实 URL */
+async function ensureIconFontsLoaded() {
+  const probe = document.createElement('div')
+  probe.style.cssText = 'position:absolute;left:-9999px;visibility:hidden;pointer-events:none'
+  probe.innerHTML = [
+    '<i class="el-icon-arrow-down"></i>',
+    '<i class="el-icon-date"></i>',
+    '<i class="n20-icon-yuefenqiehuan-zuoce"></i>',
+    '<i class="vxe-icon-caret-down"></i>'
+  ].join('')
 
-  Array.from(cssRules || []).forEach((rule) => {
-    try {
-      if (!rule) return
+  document.body.appendChild(probe)
 
-      if (rule.type === CSSRule.KEYFRAMES_RULE) {
-        pendingKeyframes.push(rule)
-        return
-      }
+  await safeRun(async () => {
+    if (!document.fonts?.load) return
+    const tasks = ICON_FONT_FAMILIES.map((family) => (
+      document.fonts.load(`16px ${family}`).catch(() => {})
+    ))
+    await Promise.all(tasks)
+    await document.fonts.ready
+  }, undefined)
 
-      if (rule.type === CSSRule.STYLE_RULE) {
-        if (!selectorListMatches(rule.selectorText, usage)) return
-        collectAnimationNamesFromStyle(rule.style).forEach((n) => animationNames.add(n))
-        if (rule.cssText) kept.push(rule.cssText)
-        return
-      }
+  await new Promise((resolve) => setTimeout(resolve, 120))
+  document.body.removeChild(probe)
+}
 
-      if (rule.type === CSSRule.MEDIA_RULE || rule.type === CSSRule.SUPPORTS_RULE) {
-        const inner = purgeCssRules(rule.cssRules, usage, animationNames)
-        if (!inner.length) return
-        const prefix = rule.type === CSSRule.MEDIA_RULE ? '@media' : '@supports'
-        kept.push(`${prefix} ${rule.conditionText} {\n${inner.join('\n')}\n}`)
-        return
-      }
+function collectFontUrlsFromStyleSheets() {
+  const urls = new Set()
 
-      if (rule.type === CSSRule.FONT_FACE_RULE && rule.cssText) {
-        kept.push(rule.cssText)
-      }
-    } catch (e) {
-      // 单条规则解析失败时尽量保留原文，避免样式缺失
+  safeRun(() => {
+    Array.from(document.styleSheets || []).forEach((sheet) => {
+      let rules
       try {
-        if (rule?.cssText) kept.push(rule.cssText)
-      } catch (e2) {
-        console.warn('[exportPageSnapshot] CSS 规则处理失败', e)
+        rules = sheet.cssRules
+      } catch (e) {
+        return
       }
-    }
-  })
+      if (!rules) return
+
+      const base = sheet.href || window.location.href
+      Array.from(rules).forEach((rule) => {
+        if (rule.type !== CSSRule.FONT_FACE_RULE) return
+        const cssText = rule.cssText || ''
+        if (!/iconfont|element-icons|vxeicon/i.test(cssText)) return
+        for (const match of cssText.matchAll(/url\(\s*["']?([^"')]+)["']?\s*\)/g)) {
+          const raw = match[1].trim()
+          if (raw.startsWith('data:')) {
+            urls.add(raw)
+            continue
+          }
+          safeRun(() => urls.add(new URL(raw, base).href))
+        }
+      })
+    })
+  }, undefined)
 
-  pendingKeyframes.forEach((rule) => {
-    try {
-      if (rule?.name && animationNames.has(rule.name) && rule.cssText) {
-        kept.push(rule.cssText)
-      }
-    } catch (e) {
-      console.warn('[exportPageSnapshot] keyframes 规则处理失败', e)
+  return [...urls]
+}
+
+function getAllIconFontFetchUrls() {
+  const urls = new Set()
+
+  getWebpackIconFontUrls().forEach((url) => urls.add(url))
+  getLoadedFontResourceUrls().forEach((url) => {
+    if (/iconfont|element-icons|vxeicon|\.woff2?|\.ttf|\.otf/i.test(url)) {
+      urls.add(url)
     }
   })
+  collectFontUrlsFromStyleSheets().forEach((url) => urls.add(url))
 
-  return kept
+  return [...urls]
 }
 
-/** 仅保留 HTML 中实际用到的 CSS 规则；失败时回退原始 CSS */
-function purgeUnusedCss(cssText, html) {
-  if (!cssText) return ''
-  if (!html) return cssText
-
-  const usage = collectHtmlUsage(html)
-  const animationNames = new Set()
-  const node = document.createElement('style')
-  node.textContent = cssText
+function getFilename(url) {
+  return (url || '').split('/').pop().split('?')[0]
+}
 
-  try {
-    document.head.appendChild(node)
-  } catch (e) {
-    console.warn('[exportPageSnapshot] 注入临时样式失败，跳过 CSS 裁剪', e)
-    return cssText
+function buildFontFetchCandidates(rawUrl) {
+  if (!rawUrl || rawUrl.startsWith('data:') || rawUrl.startsWith('blob:')) {
+    return rawUrl ? [rawUrl] : []
   }
 
-  try {
-    const sheet = node.sheet
-    if (!sheet?.cssRules) return cssText
-    const purged = purgeCssRules(sheet.cssRules, usage, animationNames).join('\n')
-    return purged || cssText
-  } catch (e) {
-    console.warn('[exportPageSnapshot] CSS 裁剪失败，使用原始样式', e)
-    return cssText
-  } finally {
-    removeTempStyleNode(node)
+  const candidates = new Set()
+  const filename = getFilename(rawUrl)
+
+  if (/^https?:\/\//i.test(rawUrl)) {
+    candidates.add(rawUrl)
   }
+
+  safeRun(() => candidates.add(new URL(rawUrl, window.location.href).href))
+  getStylesheetBaseUrls().forEach((base) => {
+    safeRun(() => candidates.add(new URL(rawUrl, base).href))
+  })
+
+  getAllIconFontFetchUrls().forEach((knownUrl) => {
+    if (knownUrl.includes(filename)) {
+      candidates.add(knownUrl)
+    }
+  })
+
+  return [...candidates]
 }
 
-/** 从可访问的 stylesheet 收集规则，按 cssText 去重 */
-function collectUniquePageCss() {
-  const seen = new Set()
-  const rules = []
-  const processedStyleNodes = new Set()
+function isFontBinary(buffer) {
+  if (!buffer || buffer.byteLength < 4) return false
+  const bytes = new Uint8Array(buffer.slice(0, 4))
+  const signature = String.fromCharCode(bytes[0], bytes[1], bytes[2], bytes[3])
+  return (
+    signature === 'wOFF'
+    || signature === 'wOF2'
+    || signature === 'OTTO'
+    || (bytes[0] === 0x00 && bytes[1] === 0x01 && bytes[2] === 0x00 && bytes[3] === 0x00)
+  )
+}
+
+function isFontDataUrl(dataUrl) {
+  if (!dataUrl || typeof dataUrl !== 'string') return false
+  if (!dataUrl.startsWith('data:')) return false
+  if (/^data:text\/html/i.test(dataUrl)) return false
+  if (/^data:application\/json/i.test(dataUrl)) return false
+  if (/^data:image\//i.test(dataUrl)) return false
+  return /^data:font\//i.test(dataUrl) || /^data:application\//i.test(dataUrl)
+}
+
+async function fetchFontAsDataUrl(rawUrl) {
+  const candidates = buildFontFetchCandidates(rawUrl)
+
+  for (const candidate of candidates) {
+    if (candidate.startsWith('data:')) {
+      if (isFontDataUrl(candidate)) return candidate
+      continue
+    }
 
-  const addRule = (cssText) => {
     try {
-      const chunk = normalizeCssChunk(cssText)
-      if (!chunk || seen.has(chunk)) return
-      seen.add(chunk)
-      rules.push(cssText.trim())
+      const resp = await fetch(candidate)
+      if (!resp.ok) continue
+
+      const contentType = resp.headers.get('content-type') || ''
+      if (/text\/html|application\/json/i.test(contentType)) continue
+
+      const buffer = await resp.arrayBuffer()
+      if (!isFontBinary(buffer)) continue
+
+      const blob = new Blob([buffer], {
+        type: contentType || 'application/octet-stream'
+      })
+      const dataUrl = await new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = () => resolve(reader.result)
+        reader.onerror = reject
+        reader.readAsDataURL(blob)
+      })
+
+      if (isFontDataUrl(dataUrl)) return dataUrl
     } catch (e) {
-      // ignore single rule
+      // try next candidate
     }
   }
 
-  safeRun(() => {
-    Array.from(document.styleSheets || []).forEach((sheet) => {
-      try {
-        const sheetRules = sheet.cssRules || sheet.rules
-        if (!sheetRules) return
-        if (sheet.ownerNode) processedStyleNodes.add(sheet.ownerNode)
-        Array.from(sheetRules).forEach((rule) => {
-          safeRun(() => addRule(rule.cssText), undefined, '收集 CSS 规则失败')
-        })
-      } catch (e) {
-        if (sheet.ownerNode && sheet.ownerNode.tagName === 'STYLE') {
-          processedStyleNodes.add(sheet.ownerNode)
-          addRule(sheet.ownerNode.textContent || '')
-        }
-      }
-    })
-  }, undefined, '遍历样式表失败')
-
-  safeRun(() => {
-    document.querySelectorAll('style').forEach((el) => {
-      if (!processedStyleNodes.has(el)) {
-        addRule(el.textContent || '')
-      }
-    })
-  }, undefined, '收集 style 标签失败')
+  throw new Error(`font fetch failed: ${rawUrl}`)
+}
 
-  return rules.join('\n')
+function shouldEmbedFontUrl(url) {
+  if (!url || url.startsWith('data:')) return false
+  if (/SIMSUN|simsun/i.test(url)) return false
+  return /iconfont|element-icons|vxeicon|\.woff2?|\.ttf|\.otf/i.test(url)
 }
 
-function unwrapScrollContainers(root) {
-  if (!root?.querySelectorAll) return
+async function embedIconFonts(css) {
+  await ensureIconFontsLoaded()
 
-  const selectors = [
-    '.el-table__body-wrapper',
-    '.el-scrollbar__wrap',
-    '.vxe-table--body-wrapper'
-  ]
-  selectors.forEach((sel) => {
-    safeRun(() => {
-      root.querySelectorAll(sel).forEach((el) => {
-        el.style.maxHeight = 'none'
-        el.style.height = 'auto'
-        el.style.overflow = 'visible'
-      })
-    }, undefined, `展开滚动容器失败: ${sel}`)
+  const filenameToData = new Map()
+
+  for (const knownUrl of getAllIconFontFetchUrls()) {
+    const filename = getFilename(knownUrl)
+    if (!filename || filenameToData.has(filename)) continue
+    if (knownUrl.startsWith('data:') && isFontDataUrl(knownUrl)) {
+      filenameToData.set(filename, knownUrl)
+      continue
+    }
+    try {
+      filenameToData.set(filename, await fetchFontAsDataUrl(knownUrl))
+    } catch (e) {
+      // try next source
+    }
+  }
+
+  const rawUrls = [...new Set(
+    [...(css || '').matchAll(/url\(\s*["']?([^"')]+)["']?\s*\)/g)].map((m) => m[1].trim())
+  )]
+
+  for (const rawUrl of rawUrls) {
+    if (!shouldEmbedFontUrl(rawUrl)) continue
+    const filename = getFilename(rawUrl)
+    if (filenameToData.has(filename)) continue
+    try {
+      filenameToData.set(filename, await fetchFontAsDataUrl(rawUrl))
+    } catch (e) {
+      console.warn('[exportPageHtml] 字体内嵌失败', rawUrl, e)
+    }
+  }
+
+  let result = css
+  filenameToData.forEach((dataUrl, filename) => {
+    const pattern = new RegExp(
+      `url\\(\\s*["']?[^"')]*${escapeRegExp(filename)}[^"')]*["']?\\s*\\)`,
+      'gi'
+    )
+    result = result.replace(pattern, `url("${dataUrl}")`)
   })
-}
 
-/** HTML 底部占位区块，供后端注入审批进度等内容 */
-function buildBackendPlaceholderSection() {
-  return `
-${PAGE_SNAPSHOT_BACKEND_PLACEHOLDER}
-`
+  result = result.replace(
+    /url\(\s*["']?data:text\/html[^"')]+["']?\s*\)/gi,
+    'url("")'
+  )
+
+  return result
 }
 
 function downloadBlob(blob, filename) {
@@ -600,66 +604,63 @@ function downloadBlob(blob, filename) {
     a.click()
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
-  }, undefined, '下载快照失败')
-}
-
-/**
- * @param {string} pageHtml
- * @param {{ fullCss?: boolean }} [options]
- * @param {boolean} [options.fullCss=false] - true 时导出全量 CSS，false 时按 HTML 裁剪未使用规则
- */
-function resolvePageCss(pageHtml, { fullCss = false } = {}) {
-  const rawCss = collectUniquePageCss()
-  if (!pageHtml || fullCss) return rawCss
-
-  return safeRun(
-    () => purgeUnusedCss(rawCss, pageHtml),
-    rawCss,
-    'CSS 裁剪失败，使用原始样式'
-  )
+  }, undefined, '下载失败')
 }
 
-function normalizeSnapshotOptions(options) {
+function normalizeOptions(options) {
   if (typeof options === 'boolean') {
-    return { autoDownload: options, fullCss: false }
+    return { autoDownload: options, inlineStyles: false, embedFonts: true, forPdf: false }
   }
   return {
     autoDownload: false,
-    fullCss: false,
+    inlineStyles: false,
+    embedFonts: true,
+    forPdf: false,
     ...(options || {})
   }
 }
 
 /**
- * 同步构建页面快照（HTML + Blob/File），供统一上传后端。
- * @param {HTMLElement} rootEl - 页面根节点（如 n20-page 的 $el）
- * @param {{ fullCss?: boolean }} [options]
- * @param {boolean} [options.fullCss=false] - true 时导出全量 CSS，false 时按 HTML 裁剪未使用规则
+ * 构建高保真页面 HTML 快照
+ * @param {HTMLElement} rootEl
+ * @param {{ autoDownload?: boolean, inlineStyles?: boolean, embedFonts?: boolean, forPdf?: boolean }} [options]
  */
-export function buildPageSnapshot(rootEl, options = {}) {
-  const { fullCss } = normalizeSnapshotOptions(options)
+export async function buildPageHtmlSnapshot(rootEl, options = {}) {
+  const { inlineStyles, embedFonts, forPdf } = normalizeOptions(options)
+
   if (!rootEl || rootEl.nodeType !== Node.ELEMENT_NODE) {
     return { ok: false, message: '未找到页面内容' }
   }
 
-  return safeRun(() => {
+  try {
+    if (embedFonts) {
+      await ensureIconFontsLoaded()
+    }
+
     const filename = buildSnapshotFilename()
     const pageTitle = document.title || SNAPSHOT_FILENAME_PREFIX
     const ts = filename.replace(`${SNAPSHOT_FILENAME_PREFIX}-`, '').replace('.html', '')
 
-    const pageClone = clonePageNode(rootEl, DEFAULT_SKIP_TAGS, DEFAULT_SKIP_CLASS_NAMES)
-    if (!pageClone) {
-      return { ok: false, message: '克隆页面失败' }
-    }
+    const pageClone = clonePageNode(rootEl)
+    if (!pageClone) return { ok: false, message: '克隆页面失败' }
 
     unwrapScrollContainers(pageClone)
+    removeAnchorNav(pageClone)
+    removeBottomOperateButtons(pageClone)
 
-    const pageHtml = safeRun(() => pageClone.outerHTML, '', '生成页面 HTML 失败')
-    if (!pageHtml) {
-      return { ok: false, message: '生成页面 HTML 失败' }
-    }
+    const pageHtml = pageClone.outerHTML
+    if (!pageHtml) return { ok: false, message: '生成页面 HTML 失败' }
 
-    const css = resolvePageCss(pageHtml, { fullCss })
+    let css = [
+      captureRootCssVariables(),
+      stripHeavyFontFaces(collectDocumentCss()),
+      SNAPSHOT_BASE_CSS,
+      forPdf ? SNAPSHOT_PDF_CSS : ''
+    ].filter(Boolean).join('\n')
+
+    if (embedFonts) {
+      css = await embedIconFonts(css)
+    }
 
     const html = `<!DOCTYPE html>
 <html lang="zh-CN">
@@ -669,12 +670,11 @@ export function buildPageSnapshot(rootEl, options = {}) {
 <title>${pageTitle} - ${ts}</title>
 <style>
 ${css}
-${SNAPSHOT_PDF_CSS}
 </style>
 </head>
 <body>
 ${pageHtml}
-${buildBackendPlaceholderSection()}
+${PAGE_SNAPSHOT_BACKEND_PLACEHOLDER}
 </body>
 </html>`
 
@@ -682,23 +682,40 @@ ${buildBackendPlaceholderSection()}
     const file = new File([blob], filename, { type: blob.type })
 
     return { ok: true, html, filename, blob, file, ts, pageTitle }
-  }, { ok: false, message: '构建页面快照失败' }, '构建页面快照失败')
+  } catch (e) {
+    console.warn('[exportPageHtml] 构建页面快照失败', e)
+    return { ok: false, message: '构建页面快照失败' }
+  }
 }
 
 /**
- * 构建上传用 FormData，字段名默认 file。
  * @param {HTMLElement} rootEl
- * @param {{ fullCss?: boolean }} [options]
- * @param {boolean} [options.fullCss=false] - true 时导出全量 CSS，false 时按 HTML 裁剪未使用规则
+ * @param {boolean|object} [options]
  */
-export function createPageSnapshotFormData(rootEl, options = {}) {
-  const built = buildPageSnapshot(rootEl, options)
+export async function exportPageHtml(rootEl, options = false) {
+  const { autoDownload, ...rest } = normalizeOptions(options)
+  const result = await buildPageHtmlSnapshot(rootEl, rest)
+
+  if (!result.ok) return result
+  if (autoDownload) downloadBlob(result.blob, result.filename)
+  return result
+}
+
+/** @deprecated 兼容旧名，与 exportPageHtml 相同 */
+export const exportPageSnapshot = exportPageHtml
+
+/**
+ * 上传用 FormData
+ * @param {HTMLElement} rootEl
+ * @param {object} [options]
+ */
+export async function createPageHtmlFormData(rootEl, options = {}) {
+  const built = await buildPageHtmlSnapshot(rootEl, options)
   if (!built.ok) return built
 
   return safeRun(() => {
     const formData = new FormData()
-    formData.append(SNAPSHOT_FILE_FIELD, built.file, built.filename)
-
+    formData.append('file', built.file, built.filename)
     return {
       ok: true,
       formData,
@@ -709,21 +726,3 @@ export function createPageSnapshotFormData(rootEl, options = {}) {
     }
   }, { ok: false, message: '构建上传数据失败' }, '构建 FormData 失败')
 }
-
-/**
- * @param {HTMLElement} rootEl
- * @param {boolean|{ autoDownload?: boolean, fullCss?: boolean }} [options=false]
- * @param {boolean} [options.autoDownload=false] - true 时额外触发浏览器下载（调试用）
- * @param {boolean} [options.fullCss=false] - true 时导出全量 CSS，false 时按 HTML 裁剪未使用规则
- */
-export function exportPageSnapshot(rootEl, options = false) {
-  const { autoDownload, fullCss } = normalizeSnapshotOptions(options)
-  const result = buildPageSnapshot(rootEl, { fullCss })
-  if (!result.ok) return result
-
-  if (autoDownload) {
-    downloadBlob(result.blob, result.filename)
-  }
-
-  return result
-}