adtec-core-package 3.2.1 → 3.2.3

package/package.json

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

package/src/components/RichTextEditor/RichTextEditor.vue

@@ -644,10 +644,41 @@ onUnmounted(() => {
   min-width: 0;
 }
 
+/* classic 模式：切换工具栏固定右上角（与 ribbon 图二一致） */
+:deep(.umo-toolbar-actions-classic) {
+  position: absolute;
+  right: 5px;
+  top: 6px;
+  z-index: 10;
+  border-radius: 6px;
+  background-color: var(--umo-color-white, #fff);
+  box-shadow:
+    0 0 0 1px hsla(0, 0%, 5%, 0.04),
+    0 2px 5px hsla(0, 0%, 5%, 0.06);
+}
+
+:deep(.toolbar-classic .umo-scrollable-container) {
+  padding-right: 108px;
+}
+
+:deep(.umo-scrollable-content) {
+  overflow-x: hidden;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+
 :deep(.umo-classic-menu),
 :deep(.umo-virtual-group) {
-  flex-wrap: nowrap;
-  white-space: nowrap;
+  flex-wrap: wrap;
+  row-gap: 4px;
+  white-space: normal;
 }
 
 :deep(.umo-button__text),

package/src/components/editor-main/src/components/toolbar/index.vue

@@ -250,10 +250,12 @@ const setContentFromCache = () => {
   padding: 6px 10px;
   display: flex;
   align-items: center;
-  &-ribbon {
+  &-ribbon,
+  &-classic {
     position: absolute;
     right: 0;
     top: 1px;
+    z-index: 10;
   }
   &-button {
     &.active {
@@ -337,9 +339,18 @@ const setContentFromCache = () => {
 
 <style lang="less">
 .umo-skin-modern {
+  &.toolbar-classic,
+  &.toolbar-ribbon {
+    .umo-toolbar-actions {
+      right: 5px !important;
+      top: 6px !important;
+    }
+  }
   &.toolbar-classic {
+    .umo-scrollable-container {
+      padding-right: 108px;
+    }
     .umo-toolbar-actions {
-      margin: 15px 15px 2px 0;
       border-radius: 6px;
       background-color: var(--umo-color-white);
       box-shadow:
@@ -352,12 +363,6 @@ const setContentFromCache = () => {
       }
     }
   }
-  &.toolbar-ribbon {
-    .umo-toolbar-actions {
-      right: 5px !important;
-      top: 6px !important;
-    }
-  }
 }
 [theme-mode='dark'] .umo-skin-modern {
   &.toolbar-classic {

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"
@@ -19,6 +19,7 @@
         :show-close="showClose"
         :fullscreen="fullscreen"
         :download-loading="downloadLoading"
+        :refresh-loading="refreshLoading"
         :min-zoom="MIN_OFFICE_ZOOM"
         :max-zoom="MAX_RICH_PREVIEW_ZOOM"
         @zoom-in="zoomIn"
@@ -71,7 +72,14 @@
           @error="handleError"
           @page-change="previewCurrentPage = $event"
         />
-        <div v-if="isPreviewLoading && !fileSrc" class="office-rich-loading">
+        <div v-if="refreshLoading" class="office-rich-loading">
+          <div class="loading-card">
+            <span class="loading-spinner" />
+            <p class="loading-title">正在重新生成附件，请稍候…</p>
+            <p v-if="headerTitle" class="loading-sub">{{ headerTitle }}</p>
+          </div>
+        </div>
+        <div v-else-if="isPreviewLoading && !fileSrc" class="office-rich-loading">
           <div class="loading-card">
             <span class="loading-spinner" />
             <p class="loading-title">{{ loadingMessage }}</p>
@@ -128,6 +136,7 @@ const props = withDefaults(
     showClose?: boolean
     fullscreen?: boolean
     downloadLoading?: boolean
+    refreshLoading?: boolean
   }>(),
   {
     showHeader: true,
@@ -140,6 +149,7 @@ const props = withDefaults(
     showClose: false,
     fullscreen: false,
     downloadLoading: false,
+    refreshLoading: false,
   },
 )
 
@@ -386,6 +396,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/OfficePreviewHeaderBar.vue

@@ -80,8 +80,16 @@
         <el-icon v-else><Download /></el-icon>
       </button>
 
-      <button v-if="showRefresh" class="toolbar-btn" type="button" title="刷新附件" @click="emit('refresh')">
-        <el-icon><Refresh /></el-icon>
+      <button
+        v-if="showRefresh"
+        class="toolbar-btn"
+        type="button"
+        title="刷新附件"
+        :disabled="refreshLoading"
+        @click="emit('refresh')"
+      >
+        <el-icon v-if="refreshLoading" class="is-loading"><Loading /></el-icon>
+        <el-icon v-else><Refresh /></el-icon>
       </button>
 
       <button
@@ -145,6 +153,7 @@ const props = withDefaults(
     showClose?: boolean
     fullscreen?: boolean
     downloadLoading?: boolean
+    refreshLoading?: boolean
     minZoom?: number
     maxZoom?: number
   }>(),
@@ -165,6 +174,7 @@ const props = withDefaults(
     showClose: false,
     fullscreen: false,
     downloadLoading: false,
+    refreshLoading: false,
     minZoom: MIN_OFFICE_ZOOM,
     maxZoom: MAX_PDF_ZOOM,
   },

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) => {