adtec-core-package 3.1.6 → 3.1.7

package/src/components/upload/PdfJsViewer.vue

@@ -0,0 +1,920 @@
+<template>
+  <div ref="scrollRef" class="pdf-js-viewer" @scroll="handleScroll">
+    <div v-if="showPlaceholder" class="pdf-placeholder">
+      <div class="pdf-placeholder-card">
+        <span class="pdf-placeholder-spinner" />
+        <p class="pdf-placeholder-title">{{ placeholderText }}</p>
+        <p v-if="loadingPage > 0 && totalPages > 0" class="pdf-placeholder-sub">
+          正在渲染第 {{ loadingPage }} / {{ totalPages }} 页
+        </p>
+        <div class="pdf-placeholder-skeleton">
+          <span />
+          <span />
+          <span />
+        </div>
+      </div>
+    </div>
+    <div
+      v-show="totalPages > 0"
+      class="pdf-pages"
+      :style="{ gap: `${PAGE_GAP}px` }"
+    >
+      <div
+        v-for="n in totalPages"
+        :key="n"
+        :ref="(el) => setPageRef(n, el as HTMLElement | null)"
+        class="pdf-page-slot"
+        :data-page="n"
+        :style="{ minHeight: `${pageHeights[n - 1] || 0}px` }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue'
+import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.mjs'
+import pdfWorker from 'pdfjs-dist/legacy/build/pdf.worker.mjs?url'
+import { searchPdfDocument, type PdfSearchMatch } from '../../utils/pdfSearchUtil'
+import { computePdfDefaultFitScale } from '../../utils/officePreviewUtil.ts'
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker
+
+const PAGE_GAP = 12
+const VISIBLE_BUFFER = 2
+const HORIZONTAL_PADDING = 24
+const FIT_WIDTH_RETRY = 20
+const FIT_WIDTH_STABLE_FRAMES = 2
+const FIT_WIDTH_CHANGE_THRESHOLD = 0.06
+
+const props = defineProps<{
+  src?: Blob | ArrayBuffer
+  scale?: number
+}>()
+
+const emit = defineEmits<{
+  loaded: []
+  error: [err?: unknown]
+  'page-change': [page: number]
+}>()
+
+const scrollRef = ref<HTMLElement>()
+const loading = ref(false)
+const isPending = ref(false)
+const loadingPage = ref(0)
+const totalPages = ref(0)
+const currentPage = ref(1)
+const fitScale = ref(1)
+const pageHeights = ref<number[]>([])
+const pageElements = new Map<number, HTMLElement>()
+const renderedScales = new Map<number, number>()
+
+let pdfDoc: pdfjsLib.PDFDocumentProxy | null = null
+let loadToken = 0
+let activeTask: { destroy: () => Promise<void> } | null = null
+let observer: IntersectionObserver | null = null
+let visibilityObserver: IntersectionObserver | null = null
+let scaleRefreshTimer: ReturnType<typeof setTimeout> | null = null
+let pendingSrc: Blob | ArrayBuffer | undefined
+let fitInitialized = false
+let lastFitContainerWidth = 0
+let hasEmittedLoaded = false
+const renderingPages = new Set<number>()
+const searchMatches = ref<PdfSearchMatch[]>([])
+const activeMatchIndex = ref(-1)
+const highlightPage = ref(0)
+const lastSearchQuery = ref('')
+
+const userScale = computed(() => props.scale ?? 1)
+const renderScale = computed(() => fitScale.value * userScale.value)
+
+const showPlaceholder = computed(
+  () =>
+    !!props.src &&
+    (isPending.value || loading.value || totalPages.value === 0),
+)
+
+const placeholderText = computed(() => {
+  if (isPending.value) return '等待预览区域就绪…'
+  if (totalPages.value > 0) return '正在渲染页面…'
+  return '正在解析 PDF 文档…'
+})
+
+const setPageRef = (pageNum: number, el: HTMLElement | null) => {
+  const prev = pageElements.get(pageNum)
+  if (el) {
+    if (prev === el) return
+    pageElements.set(pageNum, el)
+  } else if (prev) {
+    pageElements.delete(pageNum)
+  }
+}
+
+const isIgnorablePdfError = (error: unknown) => {
+  const err = error as { name?: string; message?: string }
+  const name = err?.name || ''
+  const message = String(err?.message || '')
+  return (
+    name === 'RenderingCancelledException' ||
+    name === 'AbortException' ||
+    /abort|cancel|destroy/i.test(message)
+  )
+}
+
+const destroyActiveTask = async () => {
+  if (!activeTask) return
+  const task = activeTask
+  activeTask = null
+  try {
+    await task.destroy()
+  } catch {
+    // ignore cancellation errors
+  }
+}
+
+const resetViewer = () => {
+  totalPages.value = 0
+  currentPage.value = 1
+  pageHeights.value = []
+  fitScale.value = 1
+  fitInitialized = false
+  lastFitContainerWidth = 0
+  loadingPage.value = 0
+  hasEmittedLoaded = false
+  renderedScales.clear()
+  renderingPages.clear()
+  pageElements.clear()
+  searchMatches.value = []
+  activeMatchIndex.value = -1
+  highlightPage.value = 0
+  lastSearchQuery.value = ''
+  isPending.value = false
+  if (scrollRef.value) {
+    scrollRef.value.scrollTop = 0
+  }
+}
+
+const getPreviewRoot = () => {
+  const el = scrollRef.value
+  if (!el) return null
+  return (el.closest('.office-preview-root') as HTMLElement | null) ?? el
+}
+
+const isPreviewVisible = () => {
+  const target = getPreviewRoot()
+  if (!target) return false
+  const rect = target.getBoundingClientRect()
+  return rect.width > 100 && rect.height > 80
+}
+
+const getContainerWidth = () => {
+  if (!isPreviewVisible()) return 0
+
+  const stableParent = getPreviewRoot()
+  if (!stableParent) return 0
+
+  let width = stableParent.clientWidth
+  if (width <= 0) {
+    width = stableParent.getBoundingClientRect().width
+  }
+  return width > 100 ? width - HORIZONTAL_PADDING : 0
+}
+
+const waitForStableContainerWidth = async () => {
+  let lastWidth = 0
+  let stableCount = 0
+
+  for (let i = 0; i < FIT_WIDTH_RETRY; i++) {
+    await nextTick()
+    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+    if (!isPreviewVisible()) {
+      stableCount = 0
+      lastWidth = 0
+      await new Promise<void>((resolve) => setTimeout(resolve, 50))
+      continue
+    }
+    const width = getContainerWidth()
+    if (width > 100) {
+      if (Math.abs(width - lastWidth) <= 1) {
+        stableCount += 1
+        if (stableCount >= FIT_WIDTH_STABLE_FRAMES) {
+          return width
+        }
+      } else {
+        stableCount = 0
+      }
+      lastWidth = width
+    }
+    await new Promise<void>((resolve) => setTimeout(resolve, 50))
+  }
+
+  return getContainerWidth()
+}
+
+const shouldUpdateFitScale = (width: number, force = false) => {
+  if (force || !fitInitialized) return true
+  if (!lastFitContainerWidth) return true
+  const delta = Math.abs(width - lastFitContainerWidth) / lastFitContainerWidth
+  return delta >= FIT_WIDTH_CHANGE_THRESHOLD
+}
+
+const computeFitScale = async (doc: pdfjsLib.PDFDocumentProxy) => {
+  const page = await doc.getPage(1)
+  const viewport = page.getViewport({ scale: 1 })
+  const width = await waitForStableContainerWidth()
+  if (!width || !viewport.width) return 0
+  const nextFit = computePdfDefaultFitScale(viewport.width, width)
+  lastFitContainerWidth = width
+  fitInitialized = true
+  return nextFit
+}
+
+const refreshFitScale = async (force = false) => {
+  if (!pdfDoc) return false
+  if (!force && userScale.value !== 1) return false
+  if (!isPreviewVisible()) return false
+  const page = await pdfDoc.getPage(1)
+  const viewport = page.getViewport({ scale: 1 })
+  const width = getContainerWidth()
+  if (!width || !viewport.width) return false
+  if (!shouldUpdateFitScale(width, force)) return false
+  const nextFit = computePdfDefaultFitScale(viewport.width, width)
+  if (Math.abs(nextFit - fitScale.value) < 0.01) {
+    lastFitContainerWidth = width
+    fitInitialized = true
+    return false
+  }
+  fitScale.value = nextFit
+  lastFitContainerWidth = width
+  fitInitialized = true
+  return true
+}
+
+const refitLayout = async () => {
+  if (!pdfDoc) return
+  const changed = await refreshFitScale(true)
+  if (changed) {
+    scheduleScaleRefresh()
+  }
+}
+
+const updatePageHeights = async (doc: pdfjsLib.PDFDocumentProxy, scale: number) => {
+  const heights: number[] = []
+  for (let i = 1; i <= doc.numPages; i++) {
+    const page = await doc.getPage(i)
+    const viewport = page.getViewport({ scale })
+    heights.push(Math.ceil(viewport.height))
+  }
+  pageHeights.value = heights
+}
+
+const clearPageCanvas = (pageNum: number) => {
+  const slot = pageElements.get(pageNum)
+  if (!slot) return
+  slot.replaceChildren()
+  renderedScales.delete(pageNum)
+}
+
+const renderHighlights = (pageNum: number) => {
+  const slot = pageElements.get(pageNum)
+  if (!slot) return
+  const wrapper = slot.querySelector('.pdf-page-inner')
+  if (!wrapper) return
+
+  wrapper.querySelector('.pdf-highlight-layer')?.remove()
+  if (searchMatches.value.length === 0) return
+
+  const pageMatches = searchMatches.value.filter((item) => item.page === pageNum)
+  if (pageMatches.length === 0) return
+
+  const activeMatch =
+    activeMatchIndex.value >= 0 ? searchMatches.value[activeMatchIndex.value] : undefined
+  const layer = document.createElement('div')
+  layer.className = 'pdf-highlight-layer'
+
+  for (const match of pageMatches) {
+    const isActive = activeMatch?.globalIndex === match.globalIndex
+    for (const rect of match.rects) {
+      const mark = document.createElement('div')
+      mark.className = isActive
+        ? 'pdf-highlight-mark pdf-highlight-mark--active'
+        : 'pdf-highlight-mark'
+      mark.style.left = `${rect.left}px`
+      mark.style.top = `${rect.top}px`
+      mark.style.width = `${rect.width}px`
+      mark.style.height = `${rect.height}px`
+      layer.appendChild(mark)
+    }
+  }
+  wrapper.appendChild(layer)
+}
+
+const paintVisibleHighlights = () => {
+  const { start, end } = getVisiblePageRange()
+  for (let i = start; i <= end; i++) {
+    renderHighlights(i)
+  }
+}
+
+const clearAllCanvases = () => {
+  for (let i = 1; i <= totalPages.value; i++) {
+    clearPageCanvas(i)
+  }
+}
+
+const renderPage = async (pageNum: number, scale: number) => {
+  if (!pdfDoc || renderingPages.has(pageNum)) return
+  const slot = pageElements.get(pageNum)
+  if (!slot) return
+
+  const currentScale = renderedScales.get(pageNum)
+  if (currentScale === scale && slot.querySelector('canvas')) {
+    renderHighlights(pageNum)
+    return
+  }
+
+  renderingPages.add(pageNum)
+  try {
+    const page = await pdfDoc.getPage(pageNum)
+    const viewport = page.getViewport({ scale })
+    const canvas = document.createElement('canvas')
+    canvas.className = 'pdf-page-canvas'
+
+    const dpr = window.devicePixelRatio || 1
+    canvas.width = Math.floor(viewport.width * dpr)
+    canvas.height = Math.floor(viewport.height * dpr)
+    canvas.style.width = `${Math.floor(viewport.width)}px`
+    canvas.style.height = `${Math.floor(viewport.height)}px`
+
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    const wrapper = document.createElement('div')
+    wrapper.className = 'pdf-page-inner'
+    wrapper.style.width = `${Math.floor(viewport.width)}px`
+    wrapper.style.height = `${Math.floor(viewport.height)}px`
+
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+    wrapper.appendChild(canvas)
+    slot.replaceChildren(wrapper)
+
+    const renderTask = page.render({ canvasContext: ctx, viewport })
+    await renderTask.promise
+    renderHighlights(pageNum)
+    renderedScales.set(pageNum, scale)
+
+    if (!hasEmittedLoaded) {
+      hasEmittedLoaded = true
+      emit('loaded')
+    }
+  } catch (error) {
+    if (!isIgnorablePdfError(error)) {
+      emit('error', error)
+    }
+  } finally {
+    renderingPages.delete(pageNum)
+  }
+}
+
+const getVisiblePageRange = () => {
+  const container = scrollRef.value
+  if (!container || totalPages.value === 0) return { start: 1, end: 1 }
+
+  const scrollTop = container.scrollTop
+  const viewBottom = scrollTop + container.clientHeight
+  let offset = 0
+  let start = 1
+  let end = totalPages.value
+
+  for (let i = 0; i < pageHeights.value.length; i++) {
+    const height = pageHeights.value[i] + PAGE_GAP
+    const pageTop = offset
+    const pageBottom = offset + height
+    if (pageBottom >= scrollTop && start === 1) {
+      start = i + 1
+    }
+    if (pageTop > viewBottom) {
+      end = i
+      break
+    }
+    offset += height
+  }
+
+  return {
+    start: Math.max(1, start - VISIBLE_BUFFER),
+    end: Math.min(totalPages.value, end + VISIBLE_BUFFER),
+  }
+}
+
+const renderVisiblePages = async () => {
+  if (!pdfDoc || totalPages.value === 0) return
+  const { start, end } = getVisiblePageRange()
+  const scale = renderScale.value
+
+  for (let i = 1; i <= totalPages.value; i++) {
+    if (i < start || i > end) {
+      if (renderedScales.has(i)) {
+        clearPageCanvas(i)
+      }
+      continue
+    }
+    await renderPage(i, scale)
+  }
+}
+
+const setupObserver = () => {
+  observer?.disconnect()
+  const root = scrollRef.value
+  if (!root) return
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      const scale = renderScale.value
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue
+        const pageNum = Number((entry.target as HTMLElement).dataset.page)
+        if (!pageNum) continue
+        void renderPage(pageNum, scale)
+      }
+    },
+    { root, rootMargin: '240px 0px', threshold: 0.01 },
+  )
+
+  pageElements.forEach((el) => observer?.observe(el))
+}
+
+const getPageScrollTop = (pageNum: number) => {
+  let offset = 0
+  for (let i = 0; i < pageNum - 1; i++) {
+    offset += (pageHeights.value[i] || 0) + PAGE_GAP
+  }
+  return offset
+}
+
+const getMatchAnchorTop = (match: PdfSearchMatch) => {
+  if (!match.rects.length) return 0
+  const tops = match.rects.map((rect) => rect.top)
+  const bottoms = match.rects.map((rect) => rect.top + rect.height)
+  return (Math.min(...tops) + Math.max(...bottoms)) / 2
+}
+
+const getMatchScrollTop = (match: PdfSearchMatch) => {
+  const pageTop = getPageScrollTop(match.page)
+  const container = scrollRef.value
+  const viewHeight = container?.clientHeight ?? 0
+  const anchorTop = getMatchAnchorTop(match)
+  const centeredOffset = Math.max(0, anchorTop + PAGE_GAP / 2 - viewHeight * 0.35)
+  return pageTop + centeredOffset
+}
+
+const scrollToMatch = async (match: PdfSearchMatch) => {
+  const pageNum = match.page
+  highlightPage.value = pageNum
+
+  await renderPage(pageNum, renderScale.value)
+  await nextTick()
+
+  const container = scrollRef.value
+  if (!container) return
+
+  const top = getMatchScrollTop(match)
+  const maxScroll = Math.max(container.scrollHeight - container.clientHeight, 0)
+  container.scrollTop = Math.min(Math.max(0, top), maxScroll)
+
+  currentPage.value = pageNum
+  emit('page-change', pageNum)
+
+  await renderVisiblePages()
+  paintVisibleHighlights()
+}
+
+const updateCurrentPage = () => {
+  const container = scrollRef.value
+  if (!container || totalPages.value === 0) return
+
+  const anchor = container.scrollTop + container.clientHeight * 0.25
+  let offset = 0
+  for (let i = 0; i < pageHeights.value.length; i++) {
+    const height = (pageHeights.value[i] || 0) + PAGE_GAP
+    if (offset + height > anchor) {
+      if (currentPage.value !== i + 1) {
+        currentPage.value = i + 1
+        emit('page-change', currentPage.value)
+      }
+      return
+    }
+    offset += height
+  }
+  if (currentPage.value !== totalPages.value) {
+    currentPage.value = totalPages.value
+    emit('page-change', currentPage.value)
+  }
+}
+
+const scrollToPage = async (pageNum: number) => {
+  const target = Math.min(Math.max(1, pageNum), totalPages.value || 1)
+  await nextTick()
+  scrollRef.value?.scrollTo({ top: getPageScrollTop(target), behavior: 'smooth' })
+  currentPage.value = target
+  emit('page-change', target)
+  await renderVisiblePages()
+}
+
+const runSearch = async (query: string) => {
+  if (!pdfDoc) return { total: 0, index: -1 }
+  lastSearchQuery.value = query
+  const matches = await searchPdfDocument(pdfDoc, query, renderScale.value)
+  searchMatches.value = matches
+  if (matches.length === 0) {
+    activeMatchIndex.value = -1
+    highlightPage.value = 0
+    return { total: 0, index: -1 }
+  }
+  activeMatchIndex.value = 0
+  highlightPage.value = matches[0].page
+  await scrollToMatch(matches[0])
+  return { total: matches.length, index: 0 }
+}
+
+const clearSearch = () => {
+  searchMatches.value = []
+  activeMatchIndex.value = -1
+  highlightPage.value = 0
+  lastSearchQuery.value = ''
+  paintVisibleHighlights()
+}
+
+const gotoSearchMatch = async (direction: 1 | -1) => {
+  if (searchMatches.value.length === 0) return { total: 0, index: -1 }
+  const total = searchMatches.value.length
+  let next = activeMatchIndex.value + direction
+  if (next < 0) next = total - 1
+  if (next >= total) next = 0
+  activeMatchIndex.value = next
+  const match = searchMatches.value[next]
+  await scrollToMatch(match)
+  return { total, index: next }
+}
+
+let scrollRaf = 0
+
+const handleScroll = () => {
+  if (scrollRaf) return
+  scrollRaf = requestAnimationFrame(() => {
+    scrollRaf = 0
+    updateCurrentPage()
+    void renderVisiblePages().then(() => {
+      if (searchMatches.value.length > 0) {
+        paintVisibleHighlights()
+      }
+    })
+  })
+}
+
+const scheduleScaleRefresh = () => {
+  if (scaleRefreshTimer) {
+    clearTimeout(scaleRefreshTimer)
+  }
+  scaleRefreshTimer = setTimeout(async () => {
+    if (!pdfDoc) return
+    const container = scrollRef.value
+    const scrollTop = container?.scrollTop ?? 0
+    const scrollHeight = container?.scrollHeight ?? 0
+    const clientHeight = container?.clientHeight ?? 0
+    const scrollRatio =
+      scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0
+
+    try {
+      clearAllCanvases()
+      await updatePageHeights(pdfDoc, renderScale.value)
+      await nextTick()
+      setupObserver()
+      await renderVisiblePages()
+
+      if (container) {
+        const newScrollHeight = container.scrollHeight
+        const maxScroll = Math.max(newScrollHeight - clientHeight, 0)
+        container.scrollTop = scrollRatio * maxScroll
+      }
+
+      if (lastSearchQuery.value) {
+        const prevIndex = activeMatchIndex.value
+        const matches = await searchPdfDocument(pdfDoc, lastSearchQuery.value, renderScale.value)
+        searchMatches.value = matches
+        if (matches.length > 0) {
+          activeMatchIndex.value = Math.min(Math.max(prevIndex, 0), matches.length - 1)
+          highlightPage.value = matches[activeMatchIndex.value].page
+        }
+        paintVisibleHighlights()
+      }
+    } finally {
+      // 缩放重绘不再切换 loading，避免布局抖动引发二次放大
+    }
+  }, 120)
+}
+
+const ensureVisibilityObserver = () => {
+  const el = getPreviewRoot()
+  if (!el) return
+
+  visibilityObserver?.disconnect()
+  visibilityObserver = new IntersectionObserver(
+    (entries) => {
+      if (!entries[0]?.isIntersecting) return
+      if (pendingSrc) {
+        const src = pendingSrc
+        pendingSrc = undefined
+        void loadPdf(src)
+      }
+    },
+    { threshold: 0.01 },
+  )
+  visibilityObserver.observe(el)
+}
+
+const requestLoadPdf = (src: Blob | ArrayBuffer) => {
+  if (!isPreviewVisible()) {
+    pendingSrc = src
+    isPending.value = true
+    ensureVisibilityObserver()
+    return
+  }
+  pendingSrc = undefined
+  isPending.value = false
+  void loadPdf(src)
+}
+
+const toArrayBuffer = async (src: Blob | ArrayBuffer) => {
+  if (src instanceof ArrayBuffer) return src
+  return src.arrayBuffer()
+}
+
+const loadPdf = async (src: Blob | ArrayBuffer) => {
+  const token = ++loadToken
+  await destroyActiveTask()
+  resetViewer()
+  isPending.value = false
+  loading.value = true
+
+  try {
+    const data = await toArrayBuffer(src)
+    if (token !== loadToken) return
+
+    const loadingTask = pdfjsLib.getDocument({ data })
+    activeTask = loadingTask
+    const doc = await loadingTask.promise
+    if (token !== loadToken) return
+
+    pdfDoc = doc
+    totalPages.value = doc.numPages
+    await nextTick()
+    const nextFit = await computeFitScale(doc)
+    if (token !== loadToken) return
+    if (nextFit <= 0) {
+      pendingSrc = src
+      isPending.value = true
+      loading.value = false
+      ensureVisibilityObserver()
+      return
+    }
+    fitScale.value = nextFit
+
+    await updatePageHeights(doc, renderScale.value)
+    if (token !== loadToken) return
+
+    await nextTick()
+    setupObserver()
+    loadingPage.value = 1
+    await renderVisiblePages()
+  } catch (error) {
+    if (token !== loadToken) return
+    if (!isIgnorablePdfError(error)) {
+      emit('error', error)
+    }
+  } finally {
+    if (token === loadToken) {
+      loading.value = false
+      activeTask = null
+    }
+  }
+}
+
+watch(
+  () => props.src,
+  (src) => {
+    if (!src) {
+      loadToken += 1
+      pendingSrc = undefined
+      isPending.value = false
+      void destroyActiveTask()
+      pdfDoc = null
+      resetViewer()
+      return
+    }
+    requestLoadPdf(src)
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.scale,
+  (value, oldValue) => {
+    if (!pdfDoc || value === oldValue) return
+    scheduleScaleRefresh()
+  },
+)
+
+defineExpose({
+  currentPage,
+  totalPages,
+  scrollToPage,
+  runSearch,
+  clearSearch,
+  gotoSearchMatch,
+  searchMatches,
+  activeMatchIndex,
+  refitLayout,
+})
+
+onMounted(() => {
+  ensureVisibilityObserver()
+})
+
+onBeforeUnmount(() => {
+  loadToken += 1
+  if (scaleRefreshTimer) clearTimeout(scaleRefreshTimer)
+  observer?.disconnect()
+  observer = null
+  visibilityObserver?.disconnect()
+  visibilityObserver = null
+  pdfDoc = null
+  pendingSrc = undefined
+  void destroyActiveTask()
+})
+</script>
+
+<style scoped lang="scss">
+.pdf-js-viewer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  background: #f5f5f5;
+  -webkit-overflow-scrolling: touch;
+}
+
+.pdf-pages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 0 16px;
+}
+
+.pdf-page-slot {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+:deep(.pdf-page-inner) {
+  position: relative;
+}
+
+:deep(.pdf-highlight-layer) {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+:deep(.pdf-highlight-mark) {
+  position: absolute;
+  background: rgba(255, 214, 0, 0.42);
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.35);
+}
+
+:deep(.pdf-highlight-mark--active) {
+  background: rgba(255, 87, 34, 0.5);
+  box-shadow: 0 0 0 2px rgba(255, 87, 34, 0.75);
+  z-index: 1;
+}
+
+:deep(.pdf-page-canvas) {
+  display: block;
+  background: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+}
+
+.pdf-loading {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  width: fit-content;
+  padding: 8px 16px;
+  border-radius: 20px;
+  background: rgba(0, 0, 0, 0.65);
+  color: #fff;
+  font-size: 13px;
+  pointer-events: none;
+}
+
+.pdf-placeholder {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  pointer-events: none;
+}
+
+.pdf-placeholder-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: min(360px, 88%);
+  padding: 24px 28px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+.pdf-placeholder-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #e5e7eb;
+  border-top-color: #409eff;
+  border-radius: 50%;
+  animation: pdf-placeholder-spin 0.9s linear infinite;
+}
+
+.pdf-placeholder-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.pdf-placeholder-sub {
+  margin: 0;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.pdf-placeholder-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  margin-top: 8px;
+
+  span {
+    display: block;
+    height: 10px;
+    border-radius: 6px;
+    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
+    background-size: 200% 100%;
+    animation: pdf-skeleton-shimmer 1.4s ease-in-out infinite;
+
+    &:nth-child(1) {
+      width: 92%;
+    }
+
+    &:nth-child(2) {
+      width: 78%;
+    }
+
+    &:nth-child(3) {
+      width: 64%;
+    }
+  }
+}
+
+@keyframes pdf-placeholder-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pdf-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>