@koi-br/ocr-web-sdk 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koi-br/ocr-web-sdk",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "一个支持多种Office文件格式预览的Vue3组件SDK，包括PDF、Word、Excel、图片、OFD、TIF等格式",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

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,6 +1,5 @@
 <template>
   <div class="preview-container">
-    <!-- 工具栏 -->
     <OfdView
       :show-open-file-button="false"
       :ofd-link="props.url"
@@ -14,12 +13,17 @@
 import { ref, watch, onMounted } from 'vue';
 import { OfdView } from 'bestofdview';
 import 'bestofdview/dist/style.css';
-import { Message } from '@arco-design/web-vue';
+import { Message, Button as AButton, Tooltip as ATooltip } from '@arco-design/web-vue';
+import { Download } from 'lucide-vue-next';
 
 const props = defineProps({
   url: {
     type: String,
     required: true
+  },
+  isDownload: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -80,3 +84,6 @@ defineExpose({
 });
 </script>
 
+<style lang="less" scoped>
+// 样式已统一到公共样式文件，这里只保留组件特定样式
+</style>

package/preview/tifPreview.vue

@@ -8,7 +8,12 @@
     </div>
     <div v-else class="img-container">
       <!-- 工具栏 -->
-      <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/xlsxPreview.vue

@@ -1,168 +1,171 @@
-<template>
-  <div class="preview-container">
-    <!-- 工具栏 -->
-    <div class="preview-toolbar preview-toolbar-right">
-      <div class="toolbar-group">
-        <span class="scale-text">
-          {{ Math.round(scale * 100) }}%
-        </span>
-        <div class="toolbar-divider"></div>
-        <ATooltip mini position="bottom" content="重置">
-          <AButton
-            size="small"
-            type="outline"
-            @click="reset"
-          >
-            <RefreshCcw :size="16" />
-          </AButton>
-        </ATooltip>
-        <ATooltip mini position="bottom" content="缩小">
-          <AButton
-            size="small"
-            type="outline"
-            :disabled="scale <= 0.5"
-            @click="zoom(-0.1)"
-          >
-            <ZoomOut :size="16" />
-          </AButton>
-        </ATooltip>
-        <ATooltip mini position="bottom" content="放大">
-          <AButton
-            size="small"
-            type="outline"
-            :disabled="scale >= 2"
-            @click="zoom(0.1)"
-          >
-            <ZoomIn :size="16" />
-          </AButton>
-        </ATooltip>
-        <ATooltip
-          v-if="isDownload"
-          mini
-          position="bottom"
-          content="下载"
-        >
-          <AButton
-            size="small"
-            type="outline"
-            @click="emit('download')"
-          >
-            <Download :size="16" />
-          </AButton>
-        </ATooltip>
-      </div>
-    </div>
-    <div
-      class="excel-wrapper"
-      :style="{ transform: `scale(${scale})`, transformOrigin: 'top left' }"
-    >
-      <VueOfficeExcel
-        v-if="excel"
-        :src="excel"
-        style="width: 100%; height: 75vh"
-        @rendered="onRendered"
-        @error="onError"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-import { Message, Button as AButton, Tooltip as ATooltip } from '@arco-design/web-vue';
-import { ZoomIn, ZoomOut, RefreshCcw, Download } from 'lucide-vue-next';
-import VueOfficeExcel from '@vue-office/excel/lib/v3/index';
-import '@vue-office/excel/lib/v3/index.css';
-
-const props = defineProps({
-  url: {
-    type: String,
-    required: true
-  },
-  isDownload: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const emit = defineEmits(['download']);
-
-const excel = ref('');
-const loading = ref(false);
-const scale = ref(1);
-
-// 缩放方法
-const zoom = delta => {
-  const newScale = scale.value + delta;
-  if (newScale >= 0.5 && newScale <= 2) {
-    scale.value = newScale;
-  }
-};
-
-// 重置方法
-const reset = () => {
-  scale.value = 1;
-};
-
-// 放大
-const zoomIn = () => {
-  zoom(0.1);
-};
-
-// 缩小
-const zoomOut = () => {
-  zoom(-0.1);
-};
-
-// 重置缩放
-const resetZoom = () => {
-  reset();
-};
-
-// 文件加载成功
-const onRendered = () => {
-  loading.value = false;
-};
-
-// 文件加载失败
-const onError = error => {
-  loading.value = false;
-  Message.error('Excel文件加载失败');
-  console.error('Excel文件加载失败:', error);
-};
-
-// 监听URL变化
-watch(
-  () => props.url,
-  newUrl => {
-    if (newUrl) {
-      loading.value = true;
-      excel.value = newUrl;
-    }
-  },
-  { immediate: true }
-);
-
-// 清理函数
-const cleanup = () => {
-  loading.value = false;
-  excel.value = '';
-  scale.value = 1;
-};
-
-// 暴露清理方法给父组件
-defineExpose({
-  cleanup
-});
-</script>
-
-<style lang="less" scoped>
-// 样式已统一到公共样式文件，这里只保留组件特定样式
-.excel-wrapper {
-  flex: 1;
-  display: inline-block;
-  min-width: 100%;
-  overflow: auto;
-  transition: transform 0.2s ease;
-}
-</style>
+<template>
+  <div class="preview-container">
+    <!-- 工具栏 -->
+    <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) }}%
+        </span>
+        <div class="toolbar-divider"></div>
+        <ATooltip mini position="bottom" content="重置">
+          <AButton
+            size="small"
+            type="outline"
+            @click="reset"
+          >
+            <RefreshCcw :size="16" />
+          </AButton>
+        </ATooltip>
+        <ATooltip mini position="bottom" content="缩小">
+          <AButton
+            size="small"
+            type="outline"
+            :disabled="scale <= 0.5"
+            @click="zoom(-0.1)"
+          >
+            <ZoomOut :size="16" />
+          </AButton>
+        </ATooltip>
+        <ATooltip mini position="bottom" content="放大">
+          <AButton
+            size="small"
+            type="outline"
+            :disabled="scale >= 2"
+            @click="zoom(0.1)"
+          >
+            <ZoomIn :size="16" />
+          </AButton>
+        </ATooltip>
+        <ATooltip
+          v-if="isDownload"
+          mini
+          position="bottom"
+          content="下载"
+        >
+          <AButton
+            size="small"
+            type="outline"
+            @click="emit('download')"
+          >
+            <Download :size="16" />
+          </AButton>
+        </ATooltip>
+      </div>
+    </div>
+    <div
+      class="excel-wrapper"
+      :style="{ transform: `scale(${scale})`, transformOrigin: 'top left' }"
+    >
+      <VueOfficeExcel
+        v-if="excel"
+        :src="excel"
+        style="width: 100%; height: 75vh"
+        @rendered="onRendered"
+        @error="onError"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { Message, Button as AButton, Tooltip as ATooltip } from '@arco-design/web-vue';
+import { ZoomIn, ZoomOut, RefreshCcw, Download } from 'lucide-vue-next';
+import VueOfficeExcel from '@vue-office/excel/lib/v3/index';
+import '@vue-office/excel/lib/v3/index.css';
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  },
+  isDownload: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['download']);
+
+const excel = ref('');
+const loading = ref(false);
+const scale = ref(1);
+
+// 缩放方法
+const zoom = delta => {
+  const newScale = scale.value + delta;
+  if (newScale >= 0.5 && newScale <= 2) {
+    scale.value = newScale;
+  }
+};
+
+// 重置方法
+const reset = () => {
+  scale.value = 1;
+};
+
+// 放大
+const zoomIn = () => {
+  zoom(0.1);
+};
+
+// 缩小
+const zoomOut = () => {
+  zoom(-0.1);
+};
+
+// 重置缩放
+const resetZoom = () => {
+  reset();
+};
+
+// 文件加载成功
+const onRendered = () => {
+  loading.value = false;
+};
+
+// 文件加载失败
+const onError = error => {
+  loading.value = false;
+  Message.error('Excel文件加载失败');
+  console.error('Excel文件加载失败:', error);
+};
+
+// 监听URL变化
+watch(
+  () => props.url,
+  newUrl => {
+    if (newUrl) {
+      loading.value = true;
+      excel.value = newUrl;
+    }
+  },
+  { immediate: true }
+);
+
+// 清理函数
+const cleanup = () => {
+  loading.value = false;
+  excel.value = '';
+  scale.value = 1;
+};
+
+// 暴露清理方法给父组件
+defineExpose({
+  cleanup
+});
+</script>
+
+<style lang="less" scoped>
+// 样式已统一到公共样式文件，这里只保留组件特定样式
+.excel-wrapper {
+  flex: 1;
+  display: inline-block;
+  min-width: 100%;
+  overflow: auto;
+  transition: transform 0.2s ease;
+}
+</style>