@koi-br/ocr-web-sdk 1.0.25 → 1.0.27

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, watch } 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,35 @@ 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;
+});
+
+// 监听 imageProps 的变化，自动设置 fileType
+watch(
+  () => props.imageProps?.url || props.imageProps?.urls,
+  (newUrl) => {
+    if (newUrl) {
+      // 如果传入了图片URL，自动设置fileType为image
+      if (fileType.value !== 'image') {
+        fileType.value = 'image';
+      }
+    }
+  },
+  { immediate: true }
+);
+
 // 添加 AbortController 的引用
 const abortController = ref(null);
 
@@ -394,6 +427,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) {