adtec-core-package 3.1.6 → 3.1.7

package/src/components/upload/OfficePreviewHeaderBar.vue

@@ -0,0 +1,315 @@
+<template>
+  <div class="office-preview-header">
+    <div v-if="title" class="header-title" :title="title">{{ title }}</div>
+
+    <div v-if="showSearch" class="header-search">
+      <el-input
+        v-model="searchText"
+        class="search-input"
+        clearable
+        placeholder="搜索文档内容"
+        @keyup.enter="emitSearch"
+        @clear="emit('search-clear')"
+      >
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+      <span v-if="searchTotal > 0" class="search-count">{{ searchIndex + 1 }}/{{ searchTotal }}</span>
+      <button
+        v-if="searchTotal > 0"
+        class="toolbar-btn"
+        type="button"
+        title="上一处"
+        @click="emit('search-prev')"
+      >
+        <el-icon><ArrowUp /></el-icon>
+      </button>
+      <button
+        v-if="searchTotal > 0"
+        class="toolbar-btn"
+        type="button"
+        title="下一处"
+        @click="emit('search-next')"
+      >
+        <el-icon><ArrowDown /></el-icon>
+      </button>
+    </div>
+
+    <div class="header-actions">
+      <template v-if="showPageNav && totalPages > 0">
+        <button class="toolbar-btn" type="button" title="上一页" :disabled="currentPage <= 1" @click="emit('page-prev')">
+          <el-icon><ArrowLeft /></el-icon>
+        </button>
+        <span class="page-label">{{ currentPage }} / {{ totalPages }}</span>
+        <button
+          class="toolbar-btn"
+          type="button"
+          title="下一页"
+          :disabled="currentPage >= totalPages"
+          @click="emit('page-next')"
+        >
+          <el-icon><ArrowRight /></el-icon>
+        </button>
+        <span class="toolbar-divider" />
+      </template>
+
+      <template v-if="showZoom">
+        <button class="toolbar-btn" type="button" title="缩小" :disabled="zoom <= minZoom" @click="emit('zoom-out')">
+          <el-icon><ZoomOut /></el-icon>
+        </button>
+        <span class="zoom-label">{{ zoomPercent }}%</span>
+        <button class="toolbar-btn" type="button" title="放大" :disabled="zoom >= maxZoom" @click="emit('zoom-in')">
+          <el-icon><ZoomIn /></el-icon>
+        </button>
+        <button class="toolbar-btn" type="button" title="重置缩放" @click="emit('zoom-reset')">
+          <el-icon><RefreshRight /></el-icon>
+        </button>
+        <span class="toolbar-divider" />
+      </template>
+
+      <button
+        v-if="showDownload"
+        class="toolbar-btn"
+        type="button"
+        title="下载"
+        :disabled="downloadLoading"
+        @click="emit('download')"
+      >
+        <el-icon v-if="downloadLoading" class="is-loading"><Loading /></el-icon>
+        <el-icon v-else><Download /></el-icon>
+      </button>
+
+      <button v-if="showRefresh" class="toolbar-btn" type="button" title="刷新附件" @click="emit('refresh')">
+        <el-icon><Refresh /></el-icon>
+      </button>
+
+      <button
+        v-if="showFullscreen"
+        class="toolbar-btn"
+        type="button"
+        :title="fullscreen ? '退出全屏' : '全屏'"
+        @click="emit('toggle-fullscreen')"
+      >
+        <el-icon><Close v-if="fullscreen" /><FullScreen v-else /></el-icon>
+      </button>
+
+      <button
+        v-if="showClose"
+        class="toolbar-btn toolbar-btn--close"
+        type="button"
+        title="关闭"
+        @click="emit('close')"
+      >
+        <el-icon><Close /></el-icon>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  Close,
+  Download,
+  FullScreen,
+  Loading,
+  Refresh,
+  RefreshRight,
+  Search,
+  ZoomIn,
+  ZoomOut,
+} from '@element-plus/icons-vue'
+import { ElIcon, ElInput } from 'element-plus'
+import { computed, ref, watch } from 'vue'
+import { MAX_PDF_ZOOM, MIN_OFFICE_ZOOM } from '../../utils/officePreviewUtil.ts'
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    zoom?: number
+    currentPage?: number
+    totalPages?: number
+    searchQuery?: string
+    searchIndex?: number
+    searchTotal?: number
+    showSearch?: boolean
+    showPageNav?: boolean
+    showZoom?: boolean
+    showDownload?: boolean
+    showRefresh?: boolean
+    showFullscreen?: boolean
+    showClose?: boolean
+    fullscreen?: boolean
+    downloadLoading?: boolean
+    minZoom?: number
+    maxZoom?: number
+  }>(),
+  {
+    title: '',
+    zoom: 1,
+    currentPage: 1,
+    totalPages: 0,
+    searchQuery: '',
+    searchIndex: -1,
+    searchTotal: 0,
+    showSearch: true,
+    showPageNav: true,
+    showZoom: true,
+    showDownload: false,
+    showRefresh: false,
+    showFullscreen: false,
+    showClose: false,
+    fullscreen: false,
+    downloadLoading: false,
+    minZoom: MIN_OFFICE_ZOOM,
+    maxZoom: MAX_PDF_ZOOM,
+  },
+)
+
+const emit = defineEmits<{
+  'zoom-in': []
+  'zoom-out': []
+  'zoom-reset': []
+  download: []
+  refresh: []
+  'toggle-fullscreen': []
+  close: []
+  'page-prev': []
+  'page-next': []
+  search: [query: string]
+  'search-clear': []
+  'search-prev': []
+  'search-next': []
+}>()
+
+const searchText = ref(props.searchQuery)
+const zoomPercent = computed(() => Math.round(props.zoom * 100))
+
+watch(
+  () => props.searchQuery,
+  (value) => {
+    searchText.value = value
+  },
+)
+
+const emitSearch = () => {
+  emit('search', searchText.value.trim())
+}
+</script>
+
+<style scoped lang="scss">
+.office-preview-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 44px;
+  padding: 6px 12px;
+  background: #fff;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.header-title {
+  max-width: 180px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+.header-search {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.search-input {
+  flex: 1;
+  min-width: 120px;
+  max-width: 360px;
+}
+
+.search-count {
+  min-width: 48px;
+  font-size: 12px;
+  color: #6b7280;
+  text-align: center;
+}
+
+.header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #4b5563;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background: #f3f4f6;
+    color: #111827;
+  }
+
+  &:disabled {
+    color: #d1d5db;
+    cursor: not-allowed;
+  }
+
+  &--close:hover:not(:disabled) {
+    background: #fee2e2;
+    color: #dc2626;
+  }
+}
+
+.zoom-label,
+.page-label {
+  min-width: 52px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+  user-select: none;
+}
+
+.toolbar-divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: #e5e7eb;
+}
+
+.is-loading {
+  animation: rotating 1.2s linear infinite;
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/upload/OfficePreviewToolbar.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="office-preview-toolbar">
+    <template v-if="showZoom">
+      <button
+        class="toolbar-btn"
+        type="button"
+        title="缩小"
+        :disabled="zoom <= minZoom"
+        @click="$emit('zoom-out')"
+      >
+        <el-icon><ZoomOut /></el-icon>
+      </button>
+      <span class="zoom-label">{{ zoomPercent }}%</span>
+      <button
+        class="toolbar-btn"
+        type="button"
+        title="放大"
+        :disabled="zoom >= maxZoom"
+        @click="$emit('zoom-in')"
+      >
+        <el-icon><ZoomIn /></el-icon>
+      </button>
+      <button class="toolbar-btn" type="button" title="重置缩放" @click="$emit('zoom-reset')">
+        <el-icon><RefreshRight /></el-icon>
+      </button>
+      <span class="toolbar-divider" />
+    </template>
+
+    <button
+      v-if="showDownload"
+      class="toolbar-btn"
+      type="button"
+      title="下载"
+      :disabled="downloadLoading"
+      @click="$emit('download')"
+    >
+      <el-icon v-if="downloadLoading" class="is-loading"><Loading /></el-icon>
+      <el-icon v-else><Download /></el-icon>
+    </button>
+
+    <button
+      v-if="showRefresh"
+      class="toolbar-btn"
+      type="button"
+      title="刷新附件"
+      @click="$emit('refresh')"
+    >
+      <el-icon><Refresh /></el-icon>
+    </button>
+
+    <button
+      v-if="showFullscreen"
+      class="toolbar-btn"
+      type="button"
+      :title="fullscreen ? '退出全屏' : '全屏'"
+      @click="$emit('toggle-fullscreen')"
+    >
+      <el-icon><Close v-if="fullscreen" /><FullScreen v-else /></el-icon>
+    </button>
+
+    <button
+      v-if="showClose"
+      class="toolbar-btn toolbar-btn--close"
+      type="button"
+      title="关闭"
+      @click="$emit('close')"
+    >
+      <el-icon><Close /></el-icon>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Close,
+  Download,
+  FullScreen,
+  Loading,
+  Refresh,
+  RefreshRight,
+  ZoomIn,
+  ZoomOut,
+} from '@element-plus/icons-vue'
+import { ElIcon } from 'element-plus'
+import { computed } from 'vue'
+import { MAX_OFFICE_ZOOM, MIN_OFFICE_ZOOM } from '../../utils/officePreviewUtil.ts'
+
+const props = withDefaults(
+  defineProps<{
+    zoom?: number
+    showZoom?: boolean
+    showDownload?: boolean
+    showRefresh?: boolean
+    showFullscreen?: boolean
+    showClose?: boolean
+    fullscreen?: boolean
+    downloadLoading?: boolean
+    minZoom?: number
+    maxZoom?: number
+  }>(),
+  {
+    zoom: 1,
+    showZoom: false,
+    showDownload: false,
+    showRefresh: false,
+    showFullscreen: false,
+    showClose: false,
+    fullscreen: false,
+    downloadLoading: false,
+    minZoom: MIN_OFFICE_ZOOM,
+    maxZoom: MAX_OFFICE_ZOOM,
+  },
+)
+
+defineEmits<{
+  'zoom-in': []
+  'zoom-out': []
+  'zoom-reset': []
+  download: []
+  refresh: []
+  'toggle-fullscreen': []
+  close: []
+}>()
+
+const zoomPercent = computed(() => Math.round(props.zoom * 100))
+</script>
+
+<style scoped lang="scss">
+.office-preview-toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(8px);
+}
+
+.toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #4b5563;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background: #f3f4f6;
+    color: #111827;
+  }
+
+  &:disabled {
+    color: #d1d5db;
+    cursor: not-allowed;
+  }
+
+  &--close {
+    color: #6b7280;
+
+    &:hover:not(:disabled) {
+      background: #fee2e2;
+      color: #dc2626;
+    }
+  }
+}
+
+.zoom-label {
+  min-width: 44px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+  user-select: none;
+}
+
+.toolbar-divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: #e5e7eb;
+}
+
+.is-loading {
+  animation: rotating 1.2s linear infinite;
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>