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

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>