aegon-lv82 1.0.0

package/src/views/gen-ai/components/Preview/FilePreviewPage.vue

@@ -0,0 +1,947 @@
+<template>
+  <div class="file-preview-page" :class="{ 'is-sidebar-collapsed': !sidebarOpen }">
+    <header class="file-preview-page__header">
+      <div class="file-preview-page__header-left">
+        <button
+          type="button"
+          class="file-preview-page__icon-btn"
+          aria-label="切換大綱"
+          @click="toggleSidebar"
+        >
+          <el-icon :size="20"><Operation /></el-icon>
+        </button>
+        <h1 class="file-preview-page__title" :title="fileName">{{ fileName }}</h1>
+      </div>
+
+      <div class="file-preview-page__header-center">
+        <button
+          type="button"
+          class="file-preview-page__icon-btn"
+          aria-label="縮小"
+          :disabled="zoomPercent <= 50"
+          @click="zoomBy(-10)"
+        >
+          <el-icon :size="18"><Minus /></el-icon>
+        </button>
+        <span class="file-preview-page__zoom">{{ zoomPercent }}%</span>
+        <button
+          type="button"
+          class="file-preview-page__icon-btn"
+          aria-label="放大"
+          :disabled="zoomPercent >= 200"
+          @click="zoomBy(10)"
+        >
+          <el-icon :size="18"><Plus /></el-icon>
+        </button>
+        <span class="file-preview-page__chars">{{ charCount }} 字元</span>
+      </div>
+
+      <div class="file-preview-page__header-right">
+        <button type="button" class="file-preview-page__text-btn" @click="handlePrint">
+          <el-icon :size="16"><Printer /></el-icon>
+          列印
+        </button>
+        <button type="button" class="file-preview-page__text-btn" @click="handleDownload">
+          <el-icon :size="16"><Download /></el-icon>
+          下載
+        </button>
+        <button
+          type="button"
+          class="file-preview-page__icon-btn"
+          aria-label="關閉"
+          @click="handleClose"
+        >
+          <el-icon :size="18"><Close /></el-icon>
+        </button>
+      </div>
+    </header>
+
+    <div class="file-preview-page__body">
+      <!-- 目錄：與正文同一 PreviewCapsuleScroll，高度=視口-頂欄 -->
+      <aside v-show="sidebarOpen" class="file-preview-page__sidebar">
+        <PreviewCapsuleScroll ref="sidebarScrollRef" class="file-preview-page__panel-scroll">
+          <div v-if="!outline.length" class="file-preview-page__outline-empty">暫無大綱</div>
+          <div v-else class="file-preview-page__outline-pad">
+            <PreviewOutlineTree
+              :items="outline"
+              :expanded-ids="expandedIds"
+              :active-id="activeOutlineId"
+              @toggle="toggleOutline"
+              @select="scrollToOutline"
+            />
+          </div>
+        </PreviewCapsuleScroll>
+      </aside>
+
+      <!-- 正文 -->
+      <main class="file-preview-page__stage" v-loading="loading">
+        <PreviewCapsuleScroll ref="stageScrollRef" class="file-preview-page__panel-scroll">
+          <div ref="stageRef" class="file-preview-page__stage-inner">
+            <div class="file-preview-page__scale" :style="{ zoom: zoomPercent / 100 }">
+              <div v-if="errorMessage" class="file-preview-page__error">{{ errorMessage }}</div>
+
+              <template v-else>
+                <!-- PDF → @vue-office/pdf -->
+                <div
+                  v-if="kind === 'pdf' && officeSrc"
+                  class="file-preview-page__paper file-preview-page__paper--office file-preview-page__paper--pdf"
+                >
+                  <VueOfficePdf
+                    :src="officeSrc"
+                    class="file-preview-page__office-viewer"
+                    @rendered="onOfficeRendered"
+                    @error="onOfficeError"
+                  />
+                </div>
+
+                <!-- DOCX → docx-preview；失敗再 mammoth -->
+                <div
+                  v-else-if="kind === 'docx' && !mammothHtml"
+                  class="file-preview-page__paper file-preview-page__paper--office"
+                >
+                  <div
+                    ref="docxPreviewHostRef"
+                    class="file-preview-page__office-viewer file-preview-page__docx-native"
+                  />
+                </div>
+
+                <!-- DOC / DOCX fallback → mammoth -->
+                <article
+                  v-else-if="mammothHtml"
+                  ref="printRef"
+                  class="file-preview-page__paper file-preview-page__paper--html"
+                  v-html="mammothHtml"
+                />
+
+                <!-- 圖片 -->
+                <div
+                  v-else-if="kind === 'image' && imageUrl"
+                  class="file-preview-page__paper file-preview-page__paper--image"
+                >
+                  <img :src="imageUrl" :alt="fileName" class="file-preview-page__image" />
+                </div>
+
+                <div v-else-if="!loading" class="file-preview-page__error">暫無可預覽內容</div>
+              </template>
+            </div>
+          </div>
+        </PreviewCapsuleScroll>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Close, Download, Minus, Operation, Plus, Printer } from '@element-plus/icons-vue'
+import { ElIcon, ElMessage } from 'element-plus'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+/** postinstall 後可用包入口；類型見 shims / 包內 d.ts */
+import VueOfficePdf from '@vue-office/pdf'
+import '../../common/assets/fonts.css'
+import {
+  blobToArrayBuffer, 
+  buildOutlineFromOrderedLists,
+  clampZoomPercent,
+  clearDocxPreviewContainer,
+  clearFilePreviewPayload,
+  convertOfficeBlobToHtml,
+  countPlainTextChars,
+  decorateHtmlWithOutline,
+  downloadBlobAsFile,
+  fetchPreviewFileBlob,
+  getPreviewFileKind,
+  invalidateDocxPreviewRender,
+  printPreviewElement,
+  readFilePreviewPayload,
+  renderDocxWithDocxPreview,
+  stripHtmlToText,
+  type PreviewFileKind,
+  type PreviewOutlineItem,
+} from './preview'
+import PreviewCapsuleScroll from './PreviewCapsuleScroll.vue'
+import PreviewOutlineTree from './PreviewOutlineTree.vue'
+
+const route = useRoute()
+const token = computed(() => String(route.query.token || '').trim())
+
+const loading = ref(true)
+const errorMessage = ref('')
+const fileName = ref('檔案預覽')
+const kind = ref<PreviewFileKind>('unknown')
+const zoomPercent = ref(100)
+const charCount = ref(0)
+/** 無大綱時默認收起；有大綱時自動展開（用戶手動收起後不再強行打開） */
+const sidebarOpen = ref(false)
+const sidebarManualCollapsed = ref(false)
+const outline = ref<PreviewOutlineItem[]>([])
+const expandedIds = ref<Set<string>>(new Set())
+const activeOutlineId = ref('')
+const officeSrc = ref<string | ArrayBuffer | Blob | undefined>()
+const mammothHtml = ref('')
+const imageUrl = ref('')
+const fileBlob = ref<Blob | null>(null)
+const printRef = ref<HTMLElement | null>(null)
+const docxPreviewHostRef = ref<HTMLElement | null>(null)
+const stageRef = ref<HTMLElement | null>(null)
+const sidebarScrollRef = ref<InstanceType<typeof PreviewCapsuleScroll> | null>(null)
+const stageScrollRef = ref<InstanceType<typeof PreviewCapsuleScroll> | null>(null)
+
+let abort: AbortController | null = null
+let imageObjectUrl = ''
+
+function refreshSidebarScroll() {
+  sidebarScrollRef.value?.refresh()
+}
+
+function refreshStageScroll() {
+  stageScrollRef.value?.refresh()
+}
+
+function getStageScrollWrap() {
+  return stageScrollRef.value?.getWrap() ?? null
+}
+
+const hasOutline = computed(() => outline.value.length > 0)
+
+function toggleSidebar() {
+  const next = !sidebarOpen.value
+  sidebarOpen.value = next
+  // 有大綱時手動收起：記住，避免 outline 重建後又被自動打開
+  sidebarManualCollapsed.value = hasOutline.value ? !next : false
+}
+
+watch(hasOutline, (has) => {
+  if (!has) {
+    sidebarOpen.value = false
+    sidebarManualCollapsed.value = false
+    return
+  }
+  if (!sidebarManualCollapsed.value) sidebarOpen.value = true
+  void nextTick(() => refreshSidebarScroll())
+})
+
+watch(sidebarOpen, (open) => {
+  if (!open) return
+  void nextTick(() => {
+    refreshSidebarScroll()
+    window.requestAnimationFrame(() => refreshSidebarScroll())
+  })
+})
+
+watch(
+  [outline, expandedIds, sidebarOpen],
+  () => {
+    if (!sidebarOpen.value) return
+    void nextTick(() => refreshSidebarScroll())
+  },
+  { deep: true }
+)
+
+watch([zoomPercent, loading, mammothHtml, officeSrc], () => {
+  void nextTick(() => refreshStageScroll())
+})
+
+function revokeImageUrl() {
+  if (imageObjectUrl) {
+    URL.revokeObjectURL(imageObjectUrl)
+    imageObjectUrl = ''
+  }
+  imageUrl.value = ''
+}
+
+async function applyMammothHtml(blob: Blob) {
+  const converted = await convertOfficeBlobToHtml(blob)
+  const decorated = decorateHtmlWithOutline(converted.html)
+  if (!decorated.html.trim()) throw new Error('empty')
+  invalidateDocxPreviewRender()
+  clearDocxPreviewContainer(docxPreviewHostRef.value)
+  mammothHtml.value = decorated.html
+  outline.value = decorated.outline
+  const ids = new Set<string>()
+  collectOutlineIds(decorated.outline, ids)
+  expandedIds.value = ids
+  charCount.value = countPlainTextChars(stripHtmlToText(decorated.html))
+  loading.value = false
+  officeSrc.value = undefined
+  await nextTick()
+  if (stageRef.value) buildOutlineFromDom(stageRef.value)
+}
+
+function zoomBy(delta: number) {
+  zoomPercent.value = clampZoomPercent(zoomPercent.value + delta)
+}
+
+function collectOutlineIds(items: PreviewOutlineItem[], into: Set<string>) {
+  for (const item of items) {
+    into.add(item.id)
+    if (item.children?.length) collectOutlineIds(item.children, into)
+  }
+}
+
+function toggleOutline(id: string) {
+  const next = new Set(expandedIds.value)
+  if (next.has(id)) next.delete(id)
+  else next.add(id)
+  expandedIds.value = next
+}
+
+function findOutlineTitle(items: PreviewOutlineItem[], id: string): string {
+  for (const item of items) {
+    if (item.id === id) return item.title
+    if (item.children?.length) {
+      const found = findOutlineTitle(item.children, id)
+      if (found) return found
+    }
+  }
+  return ''
+}
+
+function normalizeOutlineText(text: string) {
+  return (text || '').replace(/\s+/g, ' ').trim()
+}
+
+function scrollElementIntoStage(el: HTMLElement) {
+  const stage = getStageScrollWrap()
+  if (!stage) {
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    return
+  }
+  // 在可滾動 stage 內定位（兼容 zoom）
+  const stageRect = stage.getBoundingClientRect()
+  const elRect = el.getBoundingClientRect()
+  const nextTop = stage.scrollTop + (elRect.top - stageRect.top) - 12
+  stage.scrollTo({ top: Math.max(0, nextTop), behavior: 'smooth' })
+}
+
+function scrollToOutline(id: string) {
+  activeOutlineId.value = id
+
+  const byId =
+    (document.getElementById(id) as HTMLElement | null) ||
+    (stageRef.value?.querySelector(`[data-outline-id="${CSS.escape(id)}"]`) as HTMLElement | null)
+  if (byId) {
+    scrollElementIntoStage(byId)
+    return
+  }
+
+  const title = normalizeOutlineText(findOutlineTitle(outline.value, id))
+  if (!title || !stageRef.value) return
+
+  // 僅在正文標題 / 有序列表錨點中匹配
+  const candidates = Array.from(
+    stageRef.value.querySelectorAll(
+      'h1, h2, h3, h4, h5, h6, ol > li, [data-outline-id], .docx-wrapper [class*="Heading"], .docx-wrapper [class*="heading"]'
+    )
+  ) as HTMLElement[]
+  const matched =
+    candidates.find((node) => normalizeOutlineText(node.textContent || '') === title) ||
+    candidates.find((node) => normalizeOutlineText(node.textContent || '').includes(title))
+
+  if (matched) {
+    const target = matched as HTMLElement
+    if (!target.id) target.id = id
+    target.setAttribute('data-outline-id', id)
+    scrollElementIntoStage(target)
+  }
+}
+
+/** 左側大綱：僅以正文標題 / 有序列表為準 */
+function buildOutlineFromDom(root: HTMLElement) {
+  // 清掉舊錨點，避免切檔 / 重渲後殘留非有序項
+  root.querySelectorAll('[data-outline-id]').forEach((el) => {
+    if (el instanceof HTMLElement) {
+      el.removeAttribute('data-outline-id')
+      if (el.id?.startsWith('outline-')) el.removeAttribute('id')
+    }
+  })
+
+  const roots = buildOutlineFromOrderedLists(root, { stamp: true })
+  outline.value = roots
+  const ids = new Set<string>()
+  collectOutlineIds(roots, ids)
+  expandedIds.value = ids
+  void nextTick(() => {
+    refreshSidebarScroll()
+    refreshStageScroll()
+  })
+}
+
+async function nextTickCountFromDom() {
+  await Promise.resolve()
+  // 等 vue-office 佈局穩定後再抽大綱並打錨點
+  await new Promise<void>((resolve) => {
+    window.requestAnimationFrame(() => resolve())
+  })
+  const root = stageRef.value
+  if (!root) return
+  charCount.value = countPlainTextChars(root.innerText || '')
+  buildOutlineFromDom(root)
+  void nextTick(() => refreshStageScroll())
+}
+
+function onOfficeRendered() {
+  loading.value = false
+  void nextTickCountFromDom()
+}
+
+function onOfficeError() {
+  loading.value = false
+  errorMessage.value = '檔案預覽失敗'
+}
+
+function handlePrint() {
+  if (mammothHtml.value && printRef.value) {
+    printPreviewElement(printRef.value)
+    return
+  }
+  window.print()
+}
+
+function handleDownload() {
+  if (!fileBlob.value) {
+    ElMessage.warning('檔案尚未載入完成')
+    return
+  }
+  downloadBlobAsFile(fileBlob.value, fileName.value)
+}
+
+function handleClose() {
+  window.close()
+  window.setTimeout(() => {
+    if (!window.closed) ElMessage.info('請手動關閉此分頁')
+  }, 200)
+}
+
+async function tryRenderDocxNative(blob: Blob) {
+  invalidateDocxPreviewRender()
+  clearDocxPreviewContainer(docxPreviewHostRef.value)
+
+  await nextTick()
+  const host = docxPreviewHostRef.value
+  if (!host) return false
+
+  try {
+    const buffer = await blobToArrayBuffer(blob)
+    await renderDocxWithDocxPreview(host, buffer)
+    onOfficeRendered()
+    return true
+  } catch (err) {
+    console.warn('[file-preview] docx-preview failed, fallback mammoth', err)
+    clearDocxPreviewContainer(host)
+    return false
+  }
+}
+
+async function loadPreview() {
+  loading.value = true
+  errorMessage.value = ''
+  mammothHtml.value = ''
+  officeSrc.value = undefined
+  invalidateDocxPreviewRender()
+  clearDocxPreviewContainer(docxPreviewHostRef.value)
+  outline.value = []
+  fileBlob.value = null
+  revokeImageUrl()
+
+  const t = token.value
+  if (!t) {
+    loading.value = false
+    errorMessage.value = '缺少預覽參數'
+    return
+  }
+  const payload = readFilePreviewPayload(t)
+  if (!payload) {
+    loading.value = false
+    errorMessage.value = '預覽會話已失效，請返回重新點擊預覽'
+    return
+  }
+
+  fileName.value = payload.name
+  document.title = payload.name
+  kind.value = getPreviewFileKind(payload.name)
+
+  abort?.abort()
+  abort = new AbortController()
+
+  try {
+    const remoteUrl = String(payload.url || '').trim()
+    const useRemoteUrl = /^https?:\/\//i.test(remoteUrl)
+
+    // tip / REF：token 裡已有下載地址，PDF/圖片直接用該 URL 渲染，不走本系統 download 接口
+    if (useRemoteUrl && kind.value === 'pdf') {
+      officeSrc.value = remoteUrl
+      return
+    }
+    if (useRemoteUrl && kind.value === 'image') {
+      imageUrl.value = remoteUrl
+      loading.value = false
+      return
+    }
+
+    const blob = await fetchPreviewFileBlob(payload, abort.signal)
+    fileBlob.value = blob
+
+    if (kind.value === 'pdf') {
+      officeSrc.value = await blobToArrayBuffer(blob)
+      return
+    }
+
+    if (kind.value === 'docx') {
+      const nativeOk = await tryRenderDocxNative(blob)
+      if (nativeOk) {
+        // 並行 mammoth 僅預填大綱 / 字數（不替換正文）
+        void convertOfficeBlobToHtml(blob)
+          .then((converted) => {
+            if (!outline.value.length) {
+              const decorated = decorateHtmlWithOutline(converted.html)
+              outline.value = decorated.outline
+              const ids = new Set<string>()
+              collectOutlineIds(decorated.outline, ids)
+              expandedIds.value = ids
+            }
+            if (!charCount.value) {
+              charCount.value = countPlainTextChars(stripHtmlToText(converted.html))
+            }
+          })
+          .catch(() => undefined)
+        return
+      }
+      try {
+        await applyMammothHtml(blob)
+      } catch {
+        errorMessage.value = 'DOCX 預覽失敗'
+        loading.value = false
+      }
+      return
+    }
+
+    if (kind.value === 'doc') {
+      try {
+        await applyMammothHtml(blob)
+      } catch (err) {
+        console.error(err)
+        errorMessage.value = '舊版 DOC 預覽失敗，請轉為 DOCX 後再試'
+        loading.value = false
+      }
+      return
+    }
+
+    if (kind.value === 'image') {
+      revokeImageUrl()
+      imageObjectUrl = URL.createObjectURL(blob)
+      imageUrl.value = imageObjectUrl
+      charCount.value = 0
+      loading.value = false
+      return
+    }
+
+    errorMessage.value = '暫僅支持預覽 PDF / DOCX / DOC / 圖片'
+    loading.value = false
+  } catch (err) {
+    console.error(err)
+    errorMessage.value = err instanceof Error && err.message.trim() ? err.message : '檔案載入失敗'
+    loading.value = false
+  }
+}
+
+function onWindowResize() {
+  refreshSidebarScroll()
+  refreshStageScroll()
+}
+
+onMounted(() => {
+  void loadPreview()
+  window.addEventListener('resize', onWindowResize, { passive: true })
+  void nextTick(() => {
+    refreshSidebarScroll()
+    refreshStageScroll()
+  })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onWindowResize)
+  abort?.abort()
+  invalidateDocxPreviewRender()
+  clearDocxPreviewContainer(docxPreviewHostRef.value)
+  revokeImageUrl()
+  if (token.value) clearFilePreviewPayload(token.value)
+})
+</script>
+
+<style scoped>
+.file-preview-page {
+  --fp-header-h: 72px;
+  --fp-font: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  max-height: 100vh;
+  min-height: 100vh;
+  overflow: hidden;
+  background: #e8e8e8;
+  color: #303133;
+  font-family: var(--fp-font);
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.file-preview-page__header {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  height: var(--fp-header-h);
+  padding: 0 12px;
+  background: #fff;
+  border-bottom: 1px solid #e5e7eb;
+  z-index: 10;
+  font-family: var(--fp-font);
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.file-preview-page__header-left,
+.file-preview-page__header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.file-preview-page__header-right {
+  justify-content: flex-end;
+}
+
+.file-preview-page__header-center {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.file-preview-page__title {
+  margin: 0;
+  font-family: var(--fp-font);
+  font-size: 18px;
+  font-weight: 500;
+  color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-preview-page__zoom {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 64px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  font-family: var(--fp-font);
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+  line-height: 1;
+  text-align: center;
+}
+
+.file-preview-page__chars {
+  margin-left: 8px;
+  font-family: var(--fp-font);
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+  text-align: center;
+}
+
+.file-preview-page__icon-btn,
+.file-preview-page__text-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 32px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #303133;
+  cursor: pointer;
+  font-family: var(--fp-font);
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.file-preview-page__icon-btn {
+  width: 32px;
+  padding: 0;
+}
+
+.file-preview-page__icon-btn:hover,
+.file-preview-page__text-btn:hover {
+  background: #f5f5f5;
+}
+
+.file-preview-page__icon-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.file-preview-page__body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  /* 正文 / 目錄共用視口高度 = 整頁 - 頂欄 */
+  height: calc(100vh - var(--fp-header-h));
+  max-height: calc(100vh - var(--fp-header-h));
+  overflow: hidden;
+}
+
+.file-preview-page__sidebar {
+  flex-shrink: 0;
+  width: 385px;
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+  border-right: 1px solid #e5e7eb;
+  box-sizing: border-box;
+  font-family: var(--fp-font);
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+}
+
+/* 目錄 / 正文滾動宿主：同一 class，同一高度鏈 */
+.file-preview-page__panel-scroll {
+  flex: 1 1 auto;
+  min-height: 0 !important;
+  height: 100% !important;
+  max-height: 100% !important;
+  width: 100%;
+}
+
+.file-preview-page__outline-pad {
+  box-sizing: border-box;
+  padding: 12px 16px 12px 12px;
+  font-family: var(--fp-font);
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.file-preview-page__outline-empty {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  padding: 16px 12px;
+  font-family: var(--fp-font);
+  font-size: 16px;
+  font-weight: 500;
+  color: #606266;
+  text-align: center;
+}
+
+.file-preview-page__stage {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.file-preview-page__stage-inner {
+  box-sizing: border-box;
+  padding: 24px 16px 48px;
+}
+
+.file-preview-page__scale {
+  width: 210mm;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.file-preview-page__paper {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 297mm;
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+}
+
+.file-preview-page__paper--html {
+  padding: 48px 56px;
+  font-family: var(--fp-font);
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.7;
+  color: #303133;
+}
+
+.file-preview-page__paper--html :deep(h1),
+.file-preview-page__paper--html :deep(h2),
+.file-preview-page__paper--html :deep(h3),
+.file-preview-page__paper--html :deep(h4) {
+  margin: 1.2em 0 0.6em;
+  font-weight: 700;
+  color: #303133;
+  scroll-margin-top: 12px;
+}
+
+.file-preview-page__paper--html :deep(h1) {
+  font-size: 22px;
+}
+
+.file-preview-page__paper--html :deep(h2) {
+  font-size: 18px;
+}
+
+.file-preview-page__paper--html :deep(p) {
+  margin: 0.6em 0;
+}
+
+.file-preview-page__paper--office {
+  overflow: visible;
+  padding: 0;
+}
+
+/* PDF：去掉 A4 紙內 vue-office 默認灰底 / 內邊距造成的左右暗色帶 */
+.file-preview-page__paper--pdf {
+  box-shadow: none;
+}
+
+.file-preview-page__paper--pdf :deep(.vue-office-pdf) {
+  overflow: visible !important;
+  text-align: left !important;
+}
+
+.file-preview-page__paper--pdf :deep(.vue-office-pdf-wrapper) {
+  background: #fff !important;
+  padding: 0 !important;
+}
+
+.file-preview-page__paper--pdf :deep(canvas) {
+  display: block;
+  width: 100% !important;
+  box-shadow: none !important;
+}
+
+/* vue-office 默認 height:100% 在僅有 min-height 的父級會塌成頂部窄條 */
+.file-preview-page__office-viewer {
+  display: block;
+  width: 100%;
+  min-height: 297mm;
+  height: auto !important;
+}
+
+.file-preview-page__paper--office :deep(.vue-office-pdf) {
+  background: #fff !important;
+  width: 100% !important;
+  height: auto !important;
+  min-height: 297mm !important;
+  overflow: visible !important;
+}
+
+.file-preview-page__paper--office :deep(.docx-wrapper) {
+  background: #fff !important;
+  padding: 24px 32px !important;
+  width: 100% !important;
+  box-sizing: border-box;
+}
+
+.file-preview-page__paper--office :deep(.docx-wrapper > section.docx) {
+  box-shadow: none !important;
+  margin: 0 auto 16px !important;
+  /* 保留 docx-preview 计算的页宽，避免 width:100% 导致分页失效 */
+  width: auto !important;
+  max-width: 100%;
+  box-sizing: border-box;
+  /* 禁止页盒裁切正文：滚到底仍缺内容多半是 overflow:hidden + 固定页高 */
+  overflow: visible !important;
+  height: auto !important;
+  max-height: none !important;
+}
+
+.file-preview-page__docx-native :deep(.docx-wrapper) {
+  background: #fff !important;
+  padding: 24px 32px !important;
+  width: 100% !important;
+  box-sizing: border-box;
+  overflow: visible !important;
+}
+
+.file-preview-page__docx-native :deep(section.docx) {
+  overflow: visible !important;
+  height: auto !important;
+  max-height: none !important;
+}
+
+.file-preview-page__paper--image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.file-preview-page__image {
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+.file-preview-page__error {
+  box-sizing: border-box;
+  width: 210mm;
+  max-width: 100%;
+  min-height: 297mm;
+  margin: 0 auto;
+  padding: 48px 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+  text-align: center;
+  color: #c53355;
+  font-family: var(--fp-font);
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.6;
+}
+
+@media print {
+  .file-preview-page__header,
+  .file-preview-page__sidebar {
+    display: none !important;
+  }
+
+  .file-preview-page__stage {
+    padding: 0;
+    background: #fff;
+    overflow: visible;
+  }
+
+  .file-preview-page__scale {
+    zoom: 1 !important;
+    width: 100%;
+  }
+
+  .file-preview-page__paper {
+    box-shadow: none;
+  }
+}
+</style>