@koi-br/ocr-web-sdk 1.0.23 → 1.0.26

package/preview/PdfPreview.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="preview-container">
     <!-- 工具栏 -->
-    <div class="preview-toolbar preview-toolbar-between">
+    <div 
+      class="preview-toolbar preview-toolbar-between" 
+      :class="props.toolbarClass"
+    >
       <!-- 左侧: 翻页控制 -->
       <div class="toolbar-group">
         <!-- 左上角自定义按钮插槽 -->
@@ -362,6 +365,7 @@ interface Props {
   showTocSidebar?: boolean; // 是否显示目录侧边栏（包括工具栏中的切换按钮），默认为 true
   isDownload?: boolean; // 是否显示下载按钮，默认为 false
   enableMargin?: boolean; // 是否启用留白（自动缩放和适合页宽模式下），true=留白（左右各20px，共40px），false=不留白（只有左右5px padding），默认为 true
+  toolbarClass?: string; // 工具栏的自定义类名，用于自定义样式（包括深度选择器样式）
 }
 
 // 使用 withDefaults 显式设置默认值，确保未传递 prop 时使用默认值
@@ -2193,6 +2197,7 @@ onBeforeUnmount(() => {
 
 // 工具栏样式已统一到公共样式文件，使用 .preview-toolbar .preview-toolbar-between
 // PDF 特有的页码信息样式（在工具栏内）
+
 .preview-toolbar {
   .page-info {
     display: flex;
@@ -2223,6 +2228,16 @@ onBeforeUnmount(() => {
   }
 }
 
+.custom-toolbar {
+  :deep(.arco-btn-outline) {
+    background: transparent !important;
+  }
+  padding: 1px 5px;
+  background: #f7f7f7;
+  border-color:#cbcbcb;
+}
+
+
 // PDF 内容区域
 .pdf-content {
   position: relative;

package/preview/index.vue

@@ -42,13 +42,17 @@
     <ImagePreview
       v-else-if="fileType === 'image'"
       ref="imagePreviewRef"
-      :url="fileUrl"
+      :url="imagePreviewUrl"
       :original-id="originalId"
       :is-download="props.isDownload"
       v-bind="props.imageProps || {}"
       @original="handleOriginal"
       @download="handleDownload"
       @load="handleFileLoaded"
+      @page-change="handleImagePageChange"
+      @annotation-add="handleAnnotationAdd"
+      @annotation-update="handleAnnotationUpdate"
+      @annotation-delete="handleAnnotationDelete"
     >
       <template #left-top>
         <slot name="left-top"></slot>
@@ -127,7 +131,7 @@
 </template>
 
 <script setup>
-import { ref, onBeforeUnmount } from 'vue';
+import { ref, onBeforeUnmount, computed } from 'vue';
 import { Message, Button as AButton } from '@arco-design/web-vue';
 import ImagePreview from './ImagePreview.vue';
 import PdfPreview from './PdfPreview.vue';
@@ -137,7 +141,7 @@ import DocxPreview from './docxPreview.vue';
 import XLSXPreview from './xlsxPreview.vue';
 
 // 定义 emits
-const emit = defineEmits(['load']);
+const emit = defineEmits(['load', 'annotation-add', 'annotation-update', 'annotation-delete']);
 
 // 定义 props
 const props = defineProps({
@@ -193,6 +197,21 @@ const xlsxPreviewRef = ref(null);
 
 const originalId = ref('');
 
+// 计算图片预览的URL（支持单个URL或URL数组）
+const imagePreviewUrl = computed(() => {
+  // 如果imageProps中指定了url或urls，优先使用
+  if (props.imageProps) {
+    if (Array.isArray(props.imageProps.urls)) {
+      return props.imageProps.urls;
+    }
+    if (typeof props.imageProps.url === 'string' || Array.isArray(props.imageProps.url)) {
+      return props.imageProps.url;
+    }
+  }
+  // 否则使用fileUrl（向后兼容）
+  return fileUrl.value;
+});
+
 // 添加 AbortController 的引用
 const abortController = ref(null);
 
@@ -394,6 +413,27 @@ const handleFileLoaded = (data) => {
   emit('load', fileInfo);
 };
 
+// 处理图片页码变化事件
+const handleImagePageChange = (page, totalPages) => {
+  // 可以在这里处理页码变化，例如更新文件名显示等
+  console.log(`图片页码变化: ${page}/${totalPages}`);
+};
+
+// 处理批注添加事件
+const handleAnnotationAdd = (annotation) => {
+  emit('annotation-add', annotation);
+};
+
+// 处理批注更新事件
+const handleAnnotationUpdate = (annotation) => {
+  emit('annotation-update', annotation);
+};
+
+// 处理批注删除事件
+const handleAnnotationDelete = (annotationId) => {
+  emit('annotation-delete', annotationId);
+};
+
 // 获取当前活动的预览组件引用
 const getCurrentPreviewRef = () => {
   switch (fileType.value) {