foucui 1.0.1 → 2.0.0

package/components/QiuBadge/utils/pdfFromElement.ts

@@ -1,348 +0,0 @@
-import html2canvas from 'html2canvas'
-import { jsPDF } from 'jspdf'
-import { qiuLoading } from '../../QiuLoading'
-
-type LoadingInstance = ReturnType<typeof qiuLoading.service>
-
-export type PaperKind = 'a4' | 'a3' | 'custom'
-export type PaperOrientation = 'portrait' | 'landscape'
-export interface PaperSpec {
-  size: PaperKind
-  orientation?: PaperOrientation
-  widthMm?: number
-  heightMm?: number
-}
-
-interface PdfProgressState {
-  phase: 'render' | 'compose' | 'save'
-  current: number
-  total: number
-  percent: number
-  text: string
-}
-
-interface PdfBuildOptions {
-  onProgress?: (state: PdfProgressState) => void
-}
-
-function normalizePaperSpec(paper: PaperKind | PaperSpec): PaperSpec {
-  if (typeof paper === 'string') {
-    return { size: paper, orientation: 'portrait' }
-  }
-  return {
-    size: paper.size,
-    orientation: paper.orientation ?? 'portrait',
-    widthMm: Number(paper.widthMm || 0) || undefined,
-    heightMm: Number(paper.heightMm || 0) || undefined,
-  }
-}
-
-function createJsPdfDocument(spec: PaperSpec): jsPDF {
-  const isCustom = spec.size === 'custom'
-  return new jsPDF({
-    unit: 'mm',
-    format: isCustom ? [Math.max(1, Number(spec.widthMm || 0)), Math.max(1, Number(spec.heightMm || 0))] : spec.size === 'a4' ? 'a4' : 'a3',
-    orientation: isCustom ? 'p' : spec.orientation === 'landscape' ? 'l' : 'p',
-    compress: true,
-  })
-}
-
-function cssPageSize(spec: PaperSpec): string {
-  if (spec.size === 'custom') {
-    return `${Math.max(1, Number(spec.widthMm || 0))}mm ${Math.max(1, Number(spec.heightMm || 0))}mm`
-  }
-  return `${spec.size.toUpperCase()} ${spec.orientation}`
-}
-
-/**
- * 将 DOM 区域导出为多页 PDF（按纸张高度纵向切片），供证件/桌面贴整版预览下载。
- */
-export async function downloadPdfFromHtmlElement(
-  element: HTMLElement,
-  filename: string,
-  paper: PaperKind | PaperSpec
-): Promise<void> {
-  const loading = createPdfLoading()
-  const spec = normalizePaperSpec(paper)
-  try {
-    updatePdfLoading(loading, {
-      phase: 'render',
-      current: 0,
-      total: 1,
-      percent: 5,
-      text: '正在渲染第 1 / 1 页 5%',
-    })
-    const pdf = createJsPdfDocument(spec)
-    const pageW = pdf.internal.pageSize.getWidth()
-    const pageH = pdf.internal.pageSize.getHeight()
-    const margin = 8
-    const usableW = pageW - 2 * margin
-    const usableH = pageH - 2 * margin
-
-    const canvas = await html2canvas(element, {
-      scale: 2,
-      useCORS: true,
-      logging: false,
-      backgroundColor: '#ffffff',
-      scrollX: 0,
-      scrollY: -window.scrollY,
-      windowWidth: element.scrollWidth,
-      windowHeight: element.scrollHeight,
-    })
-
-    updatePdfLoading(loading, {
-      phase: 'compose',
-      current: 1,
-      total: 1,
-      percent: 75,
-      text: '正在写入 PDF 75%',
-    })
-
-    const imgW = canvas.width
-    const imgH = canvas.height
-    const ratio = usableW / imgW
-    const sliceSourceH = usableH / ratio
-
-    let srcY = 0
-    let first = true
-    while (srcY < imgH - 0.5) {
-      if (!first) pdf.addPage()
-      first = false
-      const sliceH = Math.min(sliceSourceH, imgH - srcY)
-      const sliceCanvas = document.createElement('canvas')
-      sliceCanvas.width = imgW
-      sliceCanvas.height = Math.ceil(sliceH)
-      const ctx = sliceCanvas.getContext('2d')
-      if (!ctx) break
-      ctx.drawImage(canvas, 0, srcY, imgW, sliceH, 0, 0, imgW, sliceH)
-      const data = sliceCanvas.toDataURL('image/png', 0.92)
-      const displayH = sliceH * ratio
-      pdf.addImage(data, 'PNG', margin, margin, usableW, displayH)
-      srcY += sliceH
-    }
-
-    updatePdfLoading(loading, {
-      phase: 'save',
-      current: 1,
-      total: 1,
-      percent: 100,
-      text: '正在下载 PDF 100%',
-    })
-    pdf.save(filename)
-  } finally {
-    closePdfLoading(loading)
-  }
-}
-
-export async function downloadPdfPagesFromElements(
-  pages: HTMLElement[],
-  filename: string,
-  paper: PaperKind | PaperSpec
-): Promise<void> {
-  if (!pages.length) return
-  const loading = createPdfLoading()
-  try {
-    const pdf = await buildPdfFromElements(pages, paper, {
-      onProgress: (state) => updatePdfLoading(loading, state),
-    })
-    updatePdfLoading(loading, {
-      phase: 'save',
-      current: pages.length,
-      total: pages.length,
-      percent: 100,
-      text: '正在下载 PDF 100%',
-    })
-    pdf.save(filename)
-  } finally {
-    closePdfLoading(loading)
-  }
-}
-
-export async function printPdfPagesFromElements(
-  pages: HTMLElement[],
-  title: string,
-  paper: PaperKind | PaperSpec
-): Promise<void> {
-  if (!pages.length) return
-  const loading = qiuLoading.service({
-    fullscreen: true,
-    text: '正在准备打印预览',
-  })
-  const spec = normalizePaperSpec(paper)
-  const styleHtml = Array.from(document.querySelectorAll('style'))
-    .map((node) => node.outerHTML)
-    .join('\n')
-  const linkHtml = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
-    .map((node) => node.outerHTML)
-    .join('\n')
-  const pageSize = cssPageSize(spec)
-  const bodyHtml = pages
-    .map((page) => `<section class="print-page">${page.outerHTML}</section>`)
-    .join('\n')
-  const iframe = document.createElement('iframe')
-  iframe.setAttribute('aria-hidden', 'true')
-  iframe.style.position = 'fixed'
-  iframe.style.left = '-10000px'
-  iframe.style.top = '0'
-  iframe.style.width = '1px'
-  iframe.style.height = '1px'
-  iframe.style.border = '0'
-  iframe.style.opacity = '0'
-  iframe.style.pointerEvents = 'none'
-  document.body.appendChild(iframe)
-
-  const doc = iframe.contentDocument
-  const win = iframe.contentWindow
-  if (!doc || !win) {
-    iframe.remove()
-    loading.close()
-    throw new Error('打印环境初始化失败')
-  }
-  iframe.title = title
-  iframe.srcdoc = `<!doctype html>
-<html lang="zh-CN">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>${escapeHtml(title)}</title>
-  ${linkHtml}
-  ${styleHtml}
-  <style>
-    @page { size: ${pageSize}; margin: 0; }
-    html, body {
-      margin: 0;
-      padding: 0;
-      background: #fff;
-    }
-    body {
-      -webkit-print-color-adjust: exact;
-      print-color-adjust: exact;
-    }
-    .print-page {
-      break-after: page;
-      page-break-after: always;
-    }
-    .print-page:last-child {
-      break-after: auto;
-      page-break-after: auto;
-    }
-    .pdf-page {
-      margin: 0 !important;
-      box-shadow: none !important;
-    }
-  </style>
-</head>
-<body>
-${bodyHtml}
-</body>
-</html>`
-  try {
-    await waitForPrintWindow(win)
-    loading.close()
-    win.focus()
-    await new Promise((resolve) => window.setTimeout(resolve, 180))
-    win.print()
-  } finally {
-    window.setTimeout(() => loading.close(), 120)
-  }
-
-  win.addEventListener(
-    'afterprint',
-    () => {
-      window.setTimeout(() => {
-        iframe.remove()
-      }, 300)
-    },
-    { once: true }
-  )
-  window.setTimeout(() => {
-    iframe.remove()
-  }, 4000)
-}
-
-async function buildPdfFromElements(
-  pages: HTMLElement[],
-  paper: PaperKind | PaperSpec,
-  options: PdfBuildOptions = {}
-): Promise<jsPDF> {
-  const spec = normalizePaperSpec(paper)
-  const pdf = createJsPdfDocument(spec)
-  const pageW = pdf.internal.pageSize.getWidth()
-  const pageH = pdf.internal.pageSize.getHeight()
-
-  for (let i = 0; i < pages.length; i++) {
-    if (i > 0) pdf.addPage()
-    options.onProgress?.({
-      phase: 'render',
-      current: i + 1,
-      total: pages.length,
-      percent: Math.min(95, Math.round(((i + 1) / pages.length) * 90)),
-      text: `正在渲染第 ${i + 1} / ${pages.length} 页`,
-    })
-    const canvas = await html2canvas(pages[i], {
-      scale: 2,
-      useCORS: true,
-      logging: false,
-      backgroundColor: '#ffffff',
-      scrollX: 0,
-      scrollY: -window.scrollY,
-      windowWidth: pages[i].scrollWidth,
-      windowHeight: pages[i].scrollHeight,
-    })
-    const data = canvas.toDataURL('image/png', 0.92)
-    pdf.addImage(data, 'PNG', 0, 0, pageW, pageH)
-  }
-
-  return pdf
-}
-
-function createPdfLoading(): LoadingInstance {
-  return qiuLoading.service({
-    fullscreen: true,
-    text: '正在生成 PDF 0%',
-  })
-}
-
-function updatePdfLoading(loading: LoadingInstance, state: PdfProgressState): void {
-  void state
-  /* QiuLoading has no setText API; close and reopen with updated text would flicker — keep initial text */
-}
-
-function closePdfLoading(loading: LoadingInstance): void {
-  window.setTimeout(() => loading.close(), 120)
-}
-
-function escapeHtml(value: string): string {
-  return value
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;')
-}
-
-async function waitForPrintWindow(win: Window): Promise<void> {
-  await new Promise<void>((resolve) => {
-    if (win.document.readyState === 'complete') {
-      resolve()
-      return
-    }
-    win.addEventListener('load', () => resolve(), { once: true })
-    setTimeout(() => resolve(), 1200)
-  })
-  const images = Array.from(win.document.images)
-  await Promise.all(
-    images.map(
-      (img) =>
-        new Promise<void>((resolve) => {
-          if (img.complete) {
-            resolve()
-            return
-          }
-          img.addEventListener('load', () => resolve(), { once: true })
-          img.addEventListener('error', () => resolve(), { once: true })
-          setTimeout(() => resolve(), 1200)
-        })
-    )
-  )
-}

package/components/QiuBadge/views/BadgeLibraryView.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="page-container badge-library-page">
-    <div class="page-head">
-      <h2 class="page-h2">证件图片库</h2>
-      <p class="page-desc">管理模板编辑中上传的图片，可删除不再使用的文件；删除后已保存模板里若仍引用该地址将无法显示。</p>
-    </div>
-
-    <BadgeLibraryPanel />
-  </div>
-</template>
-
-<script setup lang="ts">
-import BadgeLibraryPanel from '../components/BadgeLibraryPanel.vue'
-</script>
-
-<style scoped>
-.page-head {
-  margin-bottom: 16px;
-}
-.page-h2 {
-  margin: 0 0 8px;
-  font-size: 20px;
-  font-weight: 600;
-  color: #303133;
-}
-.page-desc {
-  margin: 0;
-  font-size: 14px;
-  color: #909399;
-  line-height: 1.5;
-}
-</style>