vue3-components-plus 3.0.30 → 3.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-components-plus",
-  "version": "3.0.30",
+  "version": "3.0.32",
   "private": false,
   "type": "module",
   "files": [

package/dist/ComponentDemo/PdfDemo copy.vue

@@ -1,234 +0,0 @@
-<template>
-  <div class="demo-container">
-    <div class="control-panel">
-      <h3>PDF 文档预览演示</h3>
-
-      <!-- 本地PDF文件 -->
-      <div class="local-section">
-        <h4>本地PDF文件</h4>
-        <span class="file-name">驿云通 (11).pdf</span>
-        <button @click="loadLocalPdf">加载本地文件</button>
-        <button @click="printPdf" :disabled="!currentUrl">打印</button>
-      </div>
-
-      <!-- 文件上传方式 -->
-      <div class="upload-section">
-        <h4>方式一：文件上传</h4>
-        <input
-          type="file"
-          @change="importPdf(($event.target as any)?.files?.[0])"
-          accept=".pdf"
-        />
-        <button @click="clearFile" :disabled="!file">清除文件</button>
-      </div>
-
-      <!-- URL方式 -->
-      <div class="url-section">
-        <h4>方式二：URL地址</h4>
-        <input
-          v-model="pdfUrl"
-          type="text"
-          placeholder="请输入PDF文档的URL地址"
-          class="url-input"
-        />
-        <button @click="loadFromUrl" :disabled="!pdfUrl.trim()">加载URL</button>
-        <button @click="clearUrl" :disabled="!pdfUrl">清除URL</button>
-      </div>
-
-      <!-- 搜索功能 -->
-      <div class="search-section">
-        <h4>文档搜索</h4>
-        <input
-          v-model="searchKeyword"
-          type="text"
-          placeholder="输入要搜索的关键字"
-          class="search-input"
-        />
-        <button @click="clickPdf" :disabled="!searchKeyword.trim()">搜索</button>
-      </div>
-    </div>
-
-    <!-- PDF组件 -->
-    <div class="pdf-container">
-      <NsPdf
-        v-if="counts"
-        ref="pdfRef"
-        :url="currentUrl"
-        :hasTool="true">
-      </NsPdf>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, nextTick } from 'vue'
-import localPdfUrl from '@/assets/驿云通 (11).pdf'
-
-const counts = ref(true)
-const file = ref()
-const pdfRef = ref()
-const pdfUrl = ref('')
-const currentUrl = ref('')
-const searchKeyword = ref('')
-
-function loadLocalPdf() {
-  pdfUrl.value = ''
-  file.value = null
-  currentUrl.value = localPdfUrl
-}
-
-function printPdf() {
-  if (!currentUrl.value) return
-  window.print()
-}
-
-function importPdf(f: any) {
-  pdfUrl.value = ''
-  file.value = f
-
-  if (f && f.name.endsWith('.pdf')) {
-    const fileUrl = URL.createObjectURL(f)
-    currentUrl.value = fileUrl
-  } else if (f) {
-    alert('请选择PDF文件')
-    clearFile()
-  }
-}
-
-function loadFromUrl() {
-  if (pdfUrl.value.trim()) {
-    clearFile()
-    currentUrl.value = pdfUrl.value.trim()
-  }
-}
-
-function clearFile() {
-  file.value = null
-  if (currentUrl.value.startsWith('blob:')) {
-    URL.revokeObjectURL(currentUrl.value)
-  }
-  currentUrl.value = ''
-}
-
-function clearUrl() {
-  pdfUrl.value = ''
-  currentUrl.value = ''
-}
-
-function clickPdf() {
-  if (searchKeyword.value.trim() && pdfRef.value) {
-    pdfRef.value.search(searchKeyword.value.trim())
-  }
-}
-
-function reloadComponent() {
-  counts.value = false
-  nextTick(() => {
-    counts.value = true
-  })
-}
-</script>
-
-<style scoped lang="scss">
-.demo-container {
-  padding: 20px;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.control-panel {
-  background: #f5f5f5;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 20px;
-
-  h3 {
-    margin: 0 0 20px 0;
-    color: #333;
-  }
-
-  h4 {
-    margin: 15px 0 10px 0;
-    color: #666;
-    font-size: 14px;
-  }
-}
-
-.local-section,
-.upload-section,
-.url-section,
-.search-section {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
-  border: 1px solid #e0e0e0;
-
-  input[type='file'] {
-    margin-right: 10px;
-  }
-
-  .url-input,
-  .search-input {
-    width: 300px;
-    padding: 8px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    margin-right: 10px;
-    font-size: 14px;
-
-    &:focus {
-      outline: none;
-      border-color: #409eff;
-    }
-  }
-
-  button {
-    padding: 8px 16px;
-    background: #409eff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-right: 10px;
-    font-size: 14px;
-
-    &:hover:not(:disabled) {
-      background: #337ecc;
-    }
-
-    &:disabled {
-      background: #c0c4cc;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.pdf-container {
-  height: 600px;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  overflow: hidden;
-  margin-bottom: 20px;
-}
-
-@media (max-width: 768px) {
-  .url-input,
-  .search-input {
-    width: 100% !important;
-    margin-bottom: 10px;
-  }
-}
-
-@media print {
-  .control-panel {
-    display: none !important;
-  }
-
-  .pdf-container {
-    height: auto !important;
-    border: none !important;
-    overflow: visible !important;
-  }
-}
-</style>

package/dist/ComponentDemo/pdfReade copy.vue

@@ -1,369 +0,0 @@
-<template>
-  <div class="pdf-reader-page">
-    <div class="toolbar">
-      <div class="file-info">
-        <strong>{{ fileName }}</strong>
-        <span>{{ statusText }}</span>
-      </div>
-      <button type="button" :disabled="isPrinting || !pdfData || !totalPages" @click="printPdf">
-        {{ isPrinting ? 'Loading...' : 'Print' }}
-      </button>
-    </div>
-
-    <div ref="pdfWrapperRef" class="pdf-wrapper">
-      <PDF
-        v-if="pdfData"
-        :key="viewerKey"
-        :src="pdfData"
-        pdf-width="100%"
-        :row-gap="12"
-        :show-progress="true"
-        :show-page-tooltip="true"
-        :show-back-to-top-btn="false"
-        @onPdfInit="handlePdfInit"
-        @onProgress="handleProgress"
-        @onComplete="handleDownloadComplete"
-      />
-      <div v-else class="loading-state">
-        {{ statusText }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, onBeforeMount, onMounted, ref } from 'vue'
-import PDF from 'pdf-vue3'
-
-const fileName = 'yiyuntong-11.pdf'
-const pdfWrapperRef = ref<HTMLElement | null>(null)
-const pdfData = ref<Uint8Array | null>(null)
-const totalPages = ref(0)
-const loadProgress = ref(0)
-const isDownloadComplete = ref(false)
-const isPrinting = ref(false)
-const loadError = ref('')
-const viewerKey = ref(0)
-const pdfAssetUrl = new URL('../assets/驿云通 (11).pdf', import.meta.url).href
-
-const statusText = computed(() => {
-  if (loadError.value) {
-    return loadError.value
-  }
-
-  if (!pdfData.value) {
-    return `Reading PDF ${Math.floor(loadProgress.value)}%`
-  }
-
-  if (!totalPages.value) {
-    return `Loading ${Math.floor(loadProgress.value)}%`
-  }
-
-  if (isPrinting.value) {
-    return 'Waiting for all pages to render'
-  }
-
-  return `${totalPages.value} pages`
-})
-
-onBeforeMount(() => {
-  resetLegacyPdfWorker()
-})
-
-onMounted(() => {
-  loadLocalPdf()
-})
-
-async function loadLocalPdf() {
-  loadError.value = ''
-  loadProgress.value = 10
-  totalPages.value = 0
-  isDownloadComplete.value = false
-  pdfData.value = null
-
-  try {
-    resetLegacyPdfWorker()
-
-    const response = await fetch(pdfAssetUrl)
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}`)
-    }
-
-    loadProgress.value = 60
-    const buffer = await response.arrayBuffer()
-
-    resetLegacyPdfWorker()
-    viewerKey.value += 1
-    pdfData.value = new Uint8Array(buffer)
-    loadProgress.value = 100
-  } catch (error) {
-    console.error(error)
-    loadError.value = 'PDF file read failed'
-  }
-}
-
-function resetLegacyPdfWorker() {
-  delete (window as Window & { pdfjsWorker?: unknown }).pdfjsWorker
-}
-
-function handlePdfInit(pdf: { numPages?: number }) {
-  totalPages.value = pdf.numPages ?? 0
-}
-
-function handleProgress(progress: number) {
-  loadProgress.value = progress
-}
-
-function handleDownloadComplete() {
-  isDownloadComplete.value = true
-  loadProgress.value = 100
-}
-
-async function printPdf() {
-  if (isPrinting.value) return
-
-  isPrinting.value = true
-
-  try {
-    await waitForAllPagesRendered()
-    window.print()
-  } catch (error) {
-    console.error(error)
-    window.alert('PDF page loading timed out, please try again later')
-  } finally {
-    isPrinting.value = false
-  }
-}
-
-async function waitForAllPagesRendered(timeout = 30000) {
-  const startTime = Date.now()
-
-  while (Date.now() - startTime < timeout) {
-    await nextTick()
-    await waitFrame()
-
-    if (isDownloadComplete.value && totalPages.value > 0 && areAllCanvasesPainted()) {
-      await waitForStableLayout()
-      return
-    }
-
-    await sleep(100)
-  }
-
-  throw new Error('PDF render timeout')
-}
-
-async function waitForStableLayout() {
-  let previousHeight = -1
-
-  for (let index = 0; index < 5; index += 1) {
-    await waitFrame()
-    await sleep(80)
-
-    const currentHeight = getCanvasContainerHeight()
-    if (currentHeight > 0 && currentHeight === previousHeight) {
-      await waitFrame()
-      await waitFrame()
-      return
-    }
-
-    previousHeight = currentHeight
-  }
-}
-
-function areAllCanvasesPainted() {
-  const canvases = getCanvases()
-
-  return (
-    canvases.length >= totalPages.value &&
-    canvases.every((canvas) => canvas.width > 0 && canvas.height > 0 && isCanvasPainted(canvas))
-  )
-}
-
-function getCanvases() {
-  return Array.from(
-    pdfWrapperRef.value?.querySelectorAll<HTMLCanvasElement>(
-      '.pdf-vue3-canvas-container canvas',
-    ) ?? [],
-  )
-}
-
-function getCanvasContainerHeight() {
-  return pdfWrapperRef.value?.querySelector('.pdf-vue3-canvas-container')?.scrollHeight ?? 0
-}
-
-function isCanvasPainted(canvas: HTMLCanvasElement) {
-  const context = canvas.getContext('2d')
-  if (!context) return false
-
-  const points = [
-    [0.5, 0.5],
-    [0.25, 0.25],
-    [0.75, 0.25],
-    [0.25, 0.75],
-    [0.75, 0.75],
-  ]
-
-  try {
-    return points.some(([xRatio, yRatio]) => {
-      const x = Math.max(0, Math.min(canvas.width - 1, Math.floor(canvas.width * xRatio)))
-      const y = Math.max(0, Math.min(canvas.height - 1, Math.floor(canvas.height * yRatio)))
-      return context.getImageData(x, y, 1, 1).data[3] > 0
-    })
-  } catch {
-    return canvas.width > 0 && canvas.height > 0
-  }
-}
-
-function waitFrame() {
-  return new Promise<void>((resolve) => {
-    requestAnimationFrame(() => resolve())
-  })
-}
-
-function sleep(duration: number) {
-  return new Promise<void>((resolve) => {
-    window.setTimeout(resolve, duration)
-  })
-}
-</script>
-
-<style scoped lang="scss">
-.pdf-reader-page {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 720px;
-  background: #f3f5f8;
-}
-
-.toolbar {
-  flex: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 14px 18px;
-  border-bottom: 1px solid #d8dee8;
-  background: #ffffff;
-
-  .file-info {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-width: 0;
-    color: #1f2937;
-
-    strong,
-    span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    span {
-      color: #64748b;
-      font-size: 13px;
-    }
-  }
-
-  button {
-    flex: none;
-    min-width: 88px;
-    height: 36px;
-    padding: 0 16px;
-    border: 1px solid #2563eb;
-    border-radius: 4px;
-    background: #2563eb;
-    color: #ffffff;
-    cursor: pointer;
-
-    &:disabled {
-      border-color: #b8c2d6;
-      background: #b8c2d6;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.pdf-wrapper {
-  flex: 1;
-  min-height: 0;
-}
-
-.loading-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 360px;
-  color: #475569;
-  font-size: 14px;
-}
-
-:deep(.pdf-vue3-scroller) {
-  background: #e9edf3;
-}
-
-:deep(.pdf-vue3-canvas-container) {
-  padding: 18px 0;
-}
-
-@media (max-width: 768px) {
-  .pdf-reader-page {
-    min-height: 100vh;
-  }
-
-  .toolbar {
-    align-items: stretch;
-    flex-direction: column;
-
-    button {
-      width: 100%;
-    }
-  }
-}
-
-@media print {
-  .pdf-reader-page {
-    display: block;
-    height: auto;
-    min-height: auto;
-    background: #ffffff;
-  }
-
-  .toolbar {
-    display: none !important;
-  }
-
-  .pdf-wrapper,
-  :deep(.pdf-vue3-main),
-  :deep(.pdf-vue3-container),
-  :deep(.pdf-vue3-scroller) {
-    height: auto !important;
-    max-height: none !important;
-    overflow: visible !important;
-    background: #ffffff !important;
-  }
-
-  :deep(.pdf-vue3-canvas-container) {
-    width: 100% !important;
-    padding: 0 !important;
-  }
-
-  :deep(.pdf-vue3-canvas-container canvas) {
-    width: 100% !important;
-    height: auto !important;
-    margin: 0 auto !important;
-    box-shadow: none !important;
-    break-after: page;
-    page-break-after: always;
-  }
-
-  :deep(.pdf-vue3-progress),
-  :deep(.pdf-vue3-pageTooltip),
-  :deep(.pdf-vue3-backToTopBtn) {
-    display: none !important;
-  }
-}
-</style>