@koi-br/ocr-web-sdk 1.0.14 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koi-br/ocr-web-sdk",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "一个支持多种Office文件格式预览的Vue3组件SDK，包括PDF、Word、Excel、图片、OFD、TIF等格式",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -46,6 +46,7 @@
     "docx-preview": "^0.1.12",
     "lucide-vue-next": "^0.344.0",
     "pdfjs-dist": "^3.11.174",
+    "tiff.js": "^1.0.0",
     "vue": "^3.0.0"
   },
   "devDependencies": {

package/preview/ImagePreview.vue

@@ -4,7 +4,10 @@
     @wheel.prevent="handleWheel"
   >
     <!-- 工具栏 -->
-    <div class="preview-toolbar preview-toolbar-right">
+    <div class="preview-toolbar preview-toolbar-between">
+      <div class="toolbar-group">
+        <slot name="left-top"></slot>
+      </div>
       <div class="toolbar-group">
         <span class="scale-text">
           {{ Math.round(scale * 100) }}%

package/preview/PdfPreview.vue

@@ -4,6 +4,9 @@
     <div class="preview-toolbar preview-toolbar-between">
       <!-- 左侧: 翻页控制 -->
       <div class="toolbar-group">
+        <!-- 左上角自定义按钮插槽 -->
+        <slot name="left-top"></slot>
+
         <!-- 目录和印章列表切换按钮 -->
         <ATooltip
           v-if="props.showTocSidebar !== false"
@@ -2420,6 +2423,20 @@ onBeforeUnmount(() => {
 
   &.toc-sidebar-show {
     width: 180px;
+
+    .toc-tab-switcher {
+      opacity: 1; // 展开时显示Tab切换器
+      visibility: visible; // 展开时可见
+      pointer-events: auto; // 展开时允许交互
+      transition: opacity 0.2s ease 0.4s, visibility 0s linear 0.4s; // 延迟显示，确保宽度变化完成后再显示（0.3s宽度 + 0.1s缓冲）
+    }
+
+    .toc-sidebar-content {
+      opacity: 1; // 展开时显示内容区域
+      visibility: visible; // 展开时可见
+      pointer-events: auto; // 展开时允许交互
+      transition: opacity 0.2s ease 0.4s, visibility 0s linear 0.4s; // 延迟显示，确保宽度变化完成后再显示（0.3s宽度 + 0.1s缓冲）
+    }
   }
 
   .toc-tab-switcher {
@@ -2434,6 +2451,10 @@ onBeforeUnmount(() => {
     border: 0.5px solid rgb(0 0 0 / 8%);
     border: 0.5px solid var(--s-color-border-tertiary, rgb(0 0 0 / 8%));
     border-radius: 10px;
+    opacity: 0; // 默认隐藏
+    visibility: hidden; // 完全隐藏，防止在宽度变化时可见
+    pointer-events: none; // 收起时禁止交互，防止内容可见
+    transition: opacity 0.15s ease 0s, visibility 0s linear 0s; // 收起时立即隐藏
 
     .toc-tab-item {
       display: flex;
@@ -2463,6 +2484,10 @@ onBeforeUnmount(() => {
     flex: 1;
     padding: 8px 0;
     overflow: hidden auto;
+    opacity: 0; // 默认隐藏
+    visibility: hidden; // 完全隐藏，防止在宽度变化时可见
+    pointer-events: none; // 收起时禁止交互，防止内容可见
+    transition: opacity 0.15s ease 0s, visibility 0s linear 0s; // 收起时立即隐藏
 
     // 自定义滚动条样式
     &::-webkit-scrollbar {

package/preview/docxPreview.vue

@@ -8,7 +8,10 @@
       <p class="preview-loading-title">正在加载文档...</p>
     </div>
     <!-- 工具栏 -->
-    <div class="preview-toolbar preview-toolbar-right" v-if="isDownload">
+    <div class="preview-toolbar preview-toolbar-between" v-if="isDownload || slots['left-top']"> 
+      <div class="toolbar-group">
+        <slot name="left-top"></slot>
+      </div>
       <div class="toolbar-group">
         <ATooltip
           mini
@@ -33,10 +36,12 @@
 
 <script setup>
 import { renderAsync } from 'docx-preview';
-import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { ref, watch, onMounted, nextTick, useSlots } from 'vue';
 import { Download } from 'lucide-vue-next';
 import { Button as AButton, Tooltip as ATooltip, Spin as ASpin } from '@arco-design/web-vue';
 
+const slots = useSlots();
+
 // 定义 props
 const props = defineProps({
   // 文档 URL 地址

package/preview/index.vue

@@ -30,7 +30,12 @@
       :is-download="props.isDownload"
       v-bind="props.pdfProps || {}"
       @download="handleDownload"
-    />
+    >
+      <!-- 透传 left-top 插槽给 PdfPreview -->
+      <template #left-top>
+        <slot name="left-top"></slot>
+      </template>
+    </PdfPreview>
 
     <!-- 图片预览 -->
     <ImagePreview
@@ -42,7 +47,11 @@
       v-bind="props.imageProps || {}"
       @original="handleOriginal"
       @download="handleDownload"
-    />
+    >
+      <template #left-top>
+        <slot name="left-top"></slot>
+      </template>
+    </ImagePreview>
 
     <!-- ttf预览 -->
     <TifPreview
@@ -52,7 +61,11 @@
       :is-download="props.isDownload"
       v-bind="props.tifProps || {}"
       @download="handleDownload"
-    />
+    >
+      <template #left-top>
+        <slot name="left-top"></slot>
+      </template>
+    </TifPreview>
 
     <!-- docx预览 -->
     <DocxPreview
@@ -62,7 +75,11 @@
       :is-download="props.isDownload"
       v-bind="props.docxProps || {}"
       @download="handleDownload"
-    />
+    >
+      <template #left-top>
+        <slot name="left-top"></slot>
+      </template>
+    </DocxPreview>
 
     <!-- OFD预览 -->
     <OfdPreview
@@ -72,7 +89,8 @@
       :is-download="props.isDownload"
       v-bind="props.ofdProps || {}"
       @download="handleDownload"
-    />
+    >
+    </OfdPreview>
 
     <!-- xlsx预览 -->
     <XLSXPreview
@@ -82,7 +100,11 @@
       :is-download="props.isDownload"
       v-bind="props.xlsxProps || {}"
       @download="handleDownload"
-    />
+    >
+      <template #left-top>
+        <slot name="left-top"></slot>
+      </template>
+    </XLSXPreview>
 
     <!-- 不支持的文件类型 -->
     <div v-else class="preview-empty-container">

package/preview/ofdPreview.vue

@@ -1,23 +1,5 @@
 <template>
   <div class="preview-container">
-    <!-- 工具栏 -->
-    <div class="preview-toolbar preview-toolbar-right" v-if="isDownload">
-      <div class="toolbar-group">
-        <ATooltip
-          mini
-          position="bottom"
-          content="下载"
-        >
-          <AButton
-            size="small"
-            type="outline"
-            @click="emit('download')"
-          >
-            <Download :size="16" />
-          </AButton>
-        </ATooltip>
-      </div>
-    </div>
     <OfdView
       :show-open-file-button="false"
       :ofd-link="props.url"