adtec-core-package 3.2.1 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adtec-core-package",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "private": false,
   "type": "module",
   "exports": {

package/src/components/upload/DocxJsViewer.vue

@@ -1,15 +1,15 @@
 <template>
   <div ref="scrollRef" class="docx-js-viewer">
-    <div v-if="loading" class="docx-loading">正在解析 Word 文档…</div>
-    <div v-else-if="loadError" class="docx-error-tip">
-      <el-empty :description="loadError" />
-    </div>
-    <div v-else class="docx-body">
+    <div class="docx-body">
       <div ref="styleHostRef" class="docx-style-host" />
       <div class="docx-scale-host" :style="scaleHostStyle">
         <div ref="bodyHostRef" class="docx-render-host" :style="renderStyle" />
       </div>
     </div>
+    <div v-if="loading" class="docx-overlay docx-loading">正在解析 Word 文档…</div>
+    <div v-else-if="loadError" class="docx-overlay docx-error-tip">
+      <el-empty :description="loadError" />
+    </div>
   </div>
 </template>
 
@@ -98,16 +98,23 @@ const collectPageSections = () => {
   emit('page-change', 1)
 }
 
+let loadToken = 0
+
 const loadDocument = async (src: Blob | ArrayBuffer) => {
+  const token = ++loadToken
   loading.value = true
-  resetViewer()
+  loadError.value = ''
   try {
     const buffer = src instanceof Blob ? await src.arrayBuffer() : src
+    if (token !== loadToken) return
+
+    await nextTick()
     const bodyHost = bodyHostRef.value
     const styleHost = styleHostRef.value
     if (!bodyHost || !styleHost) {
       throw new Error('预览容器未就绪')
     }
+    resetViewer()
     await renderAsync(buffer, bodyHost, styleHost, {
       className: 'docx',
       inWrapper: true,
@@ -119,14 +126,18 @@ const loadDocument = async (src: Blob | ArrayBuffer) => {
       renderFootnotes: true,
       renderEndnotes: true,
     })
+    if (token !== loadToken) return
     await nextTick()
     collectPageSections()
     emit('loaded')
   } catch (err) {
+    if (token !== loadToken) return
     loadError.value = 'Word 文档解析失败，请下载后查看'
     emit('error', err)
   } finally {
-    loading.value = false
+    if (token === loadToken) {
+      loading.value = false
+    }
   }
 }
 
@@ -196,7 +207,11 @@ watch(
   () => props.src,
   (src) => {
     if (src) void loadDocument(src)
-    else resetViewer()
+    else {
+      ++loadToken
+      loading.value = false
+      resetViewer()
+    }
   },
   { immediate: true },
 )
@@ -213,6 +228,7 @@ defineExpose({
 
 <style scoped lang="scss">
 .docx-js-viewer {
+  position: relative;
   flex: 1;
   width: 100%;
   min-height: 0;
@@ -220,6 +236,16 @@ defineExpose({
   background: #e5e7eb;
 }
 
+.docx-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #e5e7eb;
+}
+
 .docx-body {
   min-height: 100%;
   padding: 12px;
@@ -238,12 +264,7 @@ defineExpose({
   background: transparent;
 }
 
-.docx-loading,
-.docx-error-tip {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 240px;
+.docx-loading {
   color: #6b7280;
   font-size: 14px;
 }

package/src/components/upload/FileView.vue

@@ -8,6 +8,7 @@
       v-loading="showOverlayLoading"
       element-loading-text="加载中，请稍后。。。"
       class="file-view-overlay"
+      :class="{ 'is-preview-fullscreen': isFullscreen }"
     >
       <office-preview-toolbar
         v-if="!isHeaderPreview"
@@ -15,13 +16,23 @@
         :zoom="previewScale"
         :show-zoom="false"
         :show-download="!!url"
+        :show-fullscreen="true"
         :show-close="true"
+        :fullscreen="isFullscreen"
         :download-loading="loading"
         @download="download"
-        @close="model = false"
+        @toggle-fullscreen="toggleFullscreen"
+        @close="closePreview"
       />
 
-      <div class="office-preview" :class="{ 'has-rich-header': isHeaderPreview }">
+      <div
+        ref="previewContainerRef"
+        class="office-preview"
+        :class="{
+          'has-rich-header': isHeaderPreview,
+          'fullscreen-mode': isFullscreen,
+        }"
+      >
         <office-preview
           v-if="url"
           v-model:scale="previewScale"
@@ -30,19 +41,22 @@
           :file-name="title"
           :show-header="isHeaderPreview"
           :show-download="!!url"
+          :show-fullscreen="isHeaderPreview"
           :show-close="isHeaderPreview"
+          :fullscreen="isFullscreen"
           :download-loading="loading"
           @loaded="loading = false"
           @error="loading = false"
           @download="download"
-          @close="model = false"
+          @toggle-fullscreen="toggleFullscreen"
+          @close="closePreview"
         />
       </div>
     </div>
   </Teleport>
 </template>
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useVModel } from '@vueuse/core'
 import framework from '../../api/framework'
 import frameworkUtils from '../../utils/FrameworkUtils'
@@ -58,6 +72,8 @@ import {
 const model = defineModel()
 const loading = ref(false)
 const previewScale = ref(1)
+const previewContainerRef = ref<HTMLElement | null>(null)
+const isFullscreen = ref(false)
 
 const props = defineProps({
   title: {
@@ -89,6 +105,46 @@ const isHeaderPreview = computed(() =>
 /** 富文本预览由 OfficePreview 自带 loading，避免与 v-loading 双层转圈 */
 const showOverlayLoading = computed(() => loading.value && !isHeaderPreview.value)
 
+const getContainerEl = () => previewContainerRef.value
+
+const syncFullscreenState = () => {
+  const el = getContainerEl()
+  isFullscreen.value = !!el && document.fullscreenElement === el
+  document.body.style.overflow = isFullscreen.value ? 'hidden' : ''
+}
+
+const exitFullscreen = async () => {
+  try {
+    if (document.fullscreenElement === getContainerEl()) {
+      await document.exitFullscreen()
+    }
+  } catch {
+    // ignore
+  }
+  isFullscreen.value = false
+  document.body.style.overflow = ''
+}
+
+const toggleFullscreen = async () => {
+  const el = getContainerEl()
+  if (!el) return
+  try {
+    if (document.fullscreenElement === el) {
+      await document.exitFullscreen()
+    } else {
+      await el.requestFullscreen()
+    }
+  } catch {
+    isFullscreen.value = !isFullscreen.value
+    document.body.style.overflow = isFullscreen.value ? 'hidden' : ''
+  }
+}
+
+const closePreview = async () => {
+  await exitFullscreen()
+  model.value = false
+}
+
 watch(
   [model, url],
   ([visible, fileUrl]) => {
@@ -100,11 +156,21 @@ watch(
     } else if (!visible) {
       loading.value = false
       previewScale.value = 1
+      void exitFullscreen()
     }
   },
   { immediate: true },
 )
 
+onMounted(() => {
+  document.addEventListener('fullscreenchange', syncFullscreenState)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('fullscreenchange', syncFullscreenState)
+  void exitFullscreen()
+})
+
 const getFileType = () => resolveOfficeFileExt(undefined, title.value, url.value)
 
 const download = async () => {
@@ -143,6 +209,10 @@ const download = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &.is-preview-fullscreen {
+    background: transparent;
+  }
 }
 
 .file-view-toolbar {
@@ -163,5 +233,41 @@ const download = async () => {
     display: flex;
     flex-direction: column;
   }
+
+  &:fullscreen {
+    display: flex;
+    flex-direction: column;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 0;
+    background: #f5f5f5 !important;
+  }
+
+  &.fullscreen-mode {
+    position: fixed !important;
+    inset: 0 !important;
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    width: 100vw !important;
+    height: 100vh !important;
+    border-radius: 0;
+    background: #f5f5f5 !important;
+  }
+
+  &:fullscreen,
+  &.fullscreen-mode {
+    :deep(.office-preview-root) {
+      flex: 1;
+      min-height: 0;
+      height: 100%;
+      background: #f5f5f5 !important;
+    }
+
+    :deep(.office-rich-wrap),
+    :deep(.pdf-js-viewer) {
+      background: #f5f5f5;
+    }
+  }
 }
 </style>

package/src/components/upload/OfficePreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="office-preview-root" :class="{ 'is-rich-preview': isRichPreview }">
+  <div class="office-preview-root" :class="{ 'is-rich-preview': isRichPreview, 'is-fullscreen': fullscreen }">
     <template v-if="isRichPreview">
       <office-preview-header-bar
         v-if="showHeader"
@@ -386,6 +386,19 @@ defineExpose({
     flex-direction: column;
     overflow: hidden;
   }
+
+  &.is-fullscreen {
+    height: 100%;
+    background: #f5f5f5 !important;
+
+    &.is-rich-preview {
+      .office-rich-wrap {
+        flex: 1;
+        min-height: 0;
+        background: #f5f5f5;
+      }
+    }
+  }
 }
 
 .office-rich-viewer {

package/src/components/upload/PdfJsViewer.vue

@@ -104,7 +104,7 @@ const showPlaceholder = computed(
 const placeholderText = computed(() => {
   if (isPending.value) return '等待预览区域就绪…'
   if (totalPages.value > 0) return '正在渲染页面…'
-  return '正在解析 PDF 文档…'
+  return '正在解析文档…'
 })
 
 const setPageRef = (pageNum: number, el: HTMLElement | null) => {