foucui 1.0.1 → 2.0.0

package/components/QiuBadge/views/DeskLabelView.vue

@@ -1,683 +0,0 @@
-<template>
-  <div class="page-container desk-label-page">
-    <qiu-card class="filter-card" shadow="never">
-      <qiu-form :inline="true">
-        <qiu-form-item label="选择比赛">
-          <qiu-select
-            v-model="competitionId"
-            placeholder="选择比赛"
-            style="width: 320px"
-            :options="competitionSelectOptions"
-            @change="onCompetitionChange"
-          />
-        </qiu-form-item>
-        <qiu-form-item label="桌面贴模板">
-          <qiu-select
-            v-model="selectedTemplateId"
-            clearable
-            placeholder="默认模板"
-            style="width: 260px"
-            :disabled="!competitionId || templateLoading"
-            :options="templateSelectOptions"
-            @change="onTemplateChange"
-          />
-        </qiu-form-item>
-        <qiu-form-item>
-          <qiu-button type="primary" :disabled="!competitionId" @click="loadLabels">加载桌面贴数据</qiu-button>
-        </qiu-form-item>
-        <qiu-form-item v-if="competitionId">
-          <qiu-button @click="goDeskTemplates">桌面贴模板</qiu-button>
-        </qiu-form-item>
-      </qiu-form>
-    </qiu-card>
-
-    <template v-if="Object.keys(labels).length">
-      <qiu-card v-for="(students, room) in labels" :key="String(room)" style="margin-bottom: 16px">
-        <template #header>{{ room }}</template>
-        <div class="label-grid">
-          <div class="label-card" v-for="s in students" :key="`${room}-${s.seat_no}`">
-            <BadgeTemplateRenderer
-              v-if="selectedTemplateDoc?.elements?.length"
-              :doc="selectedTemplateDoc"
-              :merge-data="flattenDeskLabelForMerge(s, competitionTitle)"
-              :screen-scale="deskLabelPreviewScale"
-            />
-            <template v-else>
-              <div class="label-seat">{{ s.seat_no }}号</div>
-              <div class="label-name">{{ s.student_name }}</div>
-              <div class="label-school">{{ s.school_name }}</div>
-            </template>
-          </div>
-        </div>
-      </qiu-card>
-      <div class="toolbar-pdf">
-        <qiu-button type="primary" :disabled="!competitionId" @click="openPaperDialog">生成预览与 PDF</qiu-button>
-      </div>
-    </template>
-    <qiu-empty v-else description="请选择比赛并加载桌面贴" />
-
-    <qiu-dialog v-model="paperPickVisible" title="预览排版设置" width="520px" destroy-on-close align-center>
-      <p class="paper-tip">导出整版 PDF 前请选择纸张模式。可按 A4/A3 排版，也可直接按模板实际尺寸生成。预览、下载 PDF、打印都会使用这套排版设置。</p>
-      <div class="paper-config">
-        <div class="paper-config-block">
-          <div class="paper-config-title">纸张尺寸</div>
-          <qiu-radio-group v-model="paperSize">
-            <qiu-radio label="a4">A4</qiu-radio>
-            <qiu-radio label="a3">A3</qiu-radio>
-            <qiu-radio label="custom">按模板尺寸</qiu-radio>
-          </qiu-radio-group>
-        </div>
-        <div class="paper-config-block">
-          <div class="paper-config-title">打印方向</div>
-          <qiu-radio-group v-model="paperOrientation" :disabled="isDirectSizeMode">
-            <qiu-radio label="portrait">纵向</qiu-radio>
-            <qiu-radio label="landscape">横向</qiu-radio>
-          </qiu-radio-group>
-          <div v-if="isDirectSizeMode" class="paper-config-desc">按模板尺寸生成时，页面宽高直接取模板设置，方向无需单独选择。</div>
-        </div>
-        <div class="paper-config-block">
-          <div class="paper-config-title">每行显示</div>
-          <div class="paper-inline-row">
-            <qiu-radio-group v-model="paperColumnsPreset" :disabled="isDirectSizeMode">
-              <qiu-radio :label="1">1个</qiu-radio>
-              <qiu-radio :label="2">2个</qiu-radio>
-              <qiu-radio :label="3">3个</qiu-radio>
-              <qiu-radio :label="0">自定义</qiu-radio>
-            </qiu-radio-group>
-            <qiu-input-number
-              v-model="paperColumns"
-              :min="1"
-              :max="12"
-              controls-position="right"
-              style="width: 120px"
-              :disabled="isDirectSizeMode"
-            />
-          </div>
-          <div class="paper-config-desc">
-            {{ isDirectSizeMode ? '按模板尺寸生成时固定为每页 1 个桌面贴。' : '只控制每行显示几个桌面贴；每页行数会按纸张高度自动计算。' }}
-          </div>
-        </div>
-      </div>
-      <template #footer>
-        <qiu-button @click="paperPickVisible = false">取消</qiu-button>
-        <qiu-button type="primary" @click="confirmPaperAndOpenPdf">下一步：整版预览</qiu-button>
-      </template>
-    </qiu-dialog>
-
-    <qiu-dialog
-      v-model="pdfDialogVisible"
-      :title="`桌面贴整版预览 — ${competitionTitle || ''}`"
-      width="96%"
-      top="2vh"
-      destroy-on-close
-      class="pdf-preview-dialog"
-      @opened="onPdfDialogOpened"
-    >
-      <div v-qiu-loading="pdfLoading" class="pdf-dialog-body">
-        <div ref="pdfExportRoot" class="pdf-export-root" :style="deskPdfExportRootStyle">
-          <template v-if="pdfTemplateDoc?.elements?.length && pdfMergeList.length">
-            <div v-for="(page, pageIndex) in deskPdfPages" :key="pageIndex" class="pdf-page" :style="deskPdfPageStyle">
-              <div class="pdf-page-grid" :style="deskPdfPageGridStyle(page.length)">
-                <div v-for="(m, i) in page" :key="`${pageIndex}-${i}`" class="pdf-cell" :style="deskPdfCellStyle">
-                  <BadgeTemplateRenderer :doc="pdfTemplateDoc" :merge-data="m" :screen-scale="deskPdfTemplateScale" />
-                </div>
-              </div>
-            </div>
-          </template>
-          <template v-else-if="pdfMergeList.length">
-            <div v-for="(page, pageIndex) in deskPdfPages" :key="pageIndex" class="pdf-page" :style="deskPdfPageStyle">
-              <div class="pdf-page-grid" :style="deskPdfPageGridStyle(page.length)">
-                <div v-for="(m, i) in page" :key="`${pageIndex}-${i}`" class="pdf-cell simple" :style="deskPdfCellStyle">
-                  <div class="simple-seat">{{ m.seat_no }}号</div>
-                  <div class="simple-name">{{ m.student_name }}</div>
-                  <div class="simple-school">{{ m.school_name }}</div>
-                  <div class="simple-no">{{ m.competition_no }}</div>
-                </div>
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-      <template #footer>
-        <qiu-button :disabled="!pdfMergeList.length" @click="onPrintPdf">打印整版</qiu-button>
-        <qiu-button @click="pdfDialogVisible = false">关闭</qiu-button>
-        <qiu-button type="primary" :loading="pdfDownloading" :disabled="!pdfMergeList.length" @click="onDownloadPdf">
-          下载 PDF
-        </qiu-button>
-      </template>
-    </qiu-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, nextTick, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { qiuMsg } from '../../QiuMsg'
-import {
-  getCompetitions,
-  getDeskLabelTemplate,
-  getDeskLabelTemplateOne,
-  listDeskLabelTemplates,
-} from '../api/index'
-import { getDeskLabels } from '../api/index'
-import BadgeTemplateRenderer from '../shared/BadgeTemplateRenderer.vue'
-import type { BadgeTemplateDoc } from '../shared/badgeTemplate'
-import { flattenDeskLabelForMerge } from '../shared/badgeTemplate'
-import {
-  downloadPdfPagesFromElements,
-  printPdfPagesFromElements,
-  type PaperKind,
-  type PaperOrientation,
-} from '../utils/pdfFromElement'
-
-const router = useRouter()
-const competitionId = ref(0)
-const competitions = ref<any[]>([])
-const labels = ref<Record<string, any[]>>({})
-const competitionTitle = ref('')
-const templateLoading = ref(false)
-const templateOptions = ref<any[]>([])
-const competitionSelectOptions = computed(() =>
-  competitions.value.map((c) => ({ label: c.name, value: c.id }))
-)
-const templateSelectOptions = computed(() =>
-  templateOptions.value.map((tpl) => ({
-    label: tpl.is_default ? `${tpl.name}（默认）` : tpl.name,
-    value: tpl.id,
-  }))
-)
-const selectedTemplateId = ref<number | undefined>()
-const selectedTemplateDoc = ref<BadgeTemplateDoc | null>(null)
-
-const paperPickVisible = ref(false)
-const paperSize = ref<PaperKind>('a4')
-const paperOrientation = ref<PaperOrientation>('portrait')
-const paperColumnsPreset = ref<number>(2)
-const paperColumns = ref<number>(2)
-const pdfDialogVisible = ref(false)
-const pdfLoading = ref(false)
-const pdfDownloading = ref(false)
-const pdfExportRoot = ref<HTMLElement | null>(null)
-const pdfTemplateDoc = ref<BadgeTemplateDoc | null>(null)
-const pdfMergeList = ref<Record<string, string>[]>([])
-
-const deskLabelPreviewScale = computed(() => {
-  const doc = selectedTemplateDoc.value
-  const widthMm = Number(doc?.canvas?.widthMm || 90)
-  const heightMm = Number(doc?.canvas?.heightMm || 50)
-  const widthPx = (widthMm * 96) / 25.4
-  const heightPx = (heightMm * 96) / 25.4
-  const maxWidth = 180
-  const maxHeight = 120
-  return Math.min(1, maxWidth / widthPx, maxHeight / heightPx)
-})
-
-async function loadTemplateOptions() {
-  if (!competitionId.value) {
-    templateOptions.value = []
-    selectedTemplateId.value = undefined
-    selectedTemplateDoc.value = null
-    return
-  }
-  templateLoading.value = true
-  try {
-    const res: any = await listDeskLabelTemplates(competitionId.value)
-    const list = res.data?.list || []
-    templateOptions.value = list
-    const currentId = Number(selectedTemplateId.value || 0)
-    const matched = currentId > 0 ? list.find((item: any) => Number(item.id) === currentId) : null
-    const defaultTpl = list.find((item: any) => Boolean(item.is_default))
-    selectedTemplateId.value = matched ? currentId : defaultTpl?.id ? Number(defaultTpl.id) : list[0]?.id ? Number(list[0].id) : undefined
-    await loadSelectedTemplate()
-  } catch {
-    templateOptions.value = []
-    selectedTemplateId.value = undefined
-    selectedTemplateDoc.value = null
-    qiuMsg.error('加载桌面贴模板失败')
-  } finally {
-    templateLoading.value = false
-  }
-}
-
-async function loadSelectedTemplate() {
-  if (!competitionId.value) {
-    selectedTemplateDoc.value = null
-    return
-  }
-  try {
-    const res: any = selectedTemplateId.value
-      ? await getDeskLabelTemplateOne(competitionId.value, Number(selectedTemplateId.value))
-      : await getDeskLabelTemplate(competitionId.value)
-    const tpl = res.data?.template_json
-    if (tpl && typeof tpl === 'object' && Array.isArray((tpl as BadgeTemplateDoc).elements)) {
-      selectedTemplateDoc.value = tpl as BadgeTemplateDoc
-      return
-    }
-  } catch {
-    // ignore and fallback below
-  }
-  selectedTemplateDoc.value = null
-}
-
-const loadLabels = async () => {
-  if (!competitionId.value) return
-  try {
-    await loadSelectedTemplate()
-    const res: any = await getDeskLabels(competitionId.value)
-    labels.value = res.data || {}
-  } catch {
-    labels.value = {}
-  }
-}
-
-const onCompetitionChange = async () => {
-  labels.value = {}
-  pdfTemplateDoc.value = null
-  pdfMergeList.value = []
-  const c = competitions.value.find((x) => x.id === competitionId.value)
-  competitionTitle.value = c?.name || ''
-  await loadTemplateOptions()
-}
-
-const onTemplateChange = async () => {
-  await loadSelectedTemplate()
-}
-
-const goDeskTemplates = () => {
-  if (!competitionId.value) return
-  router.push(`/qiuui/badge/competition/${competitionId.value}/desk-label-templates`)
-}
-
-/** 按教室名、座位号排序，保证 PDF 顺序稳定 */
-function collectLabelRows(): Record<string, unknown>[] {
-  const rows: Record<string, unknown>[] = []
-  const rooms = Object.keys(labels.value).sort((a, b) => String(a).localeCompare(String(b), 'zh-CN'))
-  for (const room of rooms) {
-    const list = labels.value[room] || []
-    const sorted = [...list].sort((a, b) => {
-      const sa = Number(String(a?.seat_no ?? '').replace(/\D/g, '')) || 0
-      const sb = Number(String(b?.seat_no ?? '').replace(/\D/g, '')) || 0
-      if (sa !== sb) return sa - sb
-      return String(a?.student_name ?? '').localeCompare(String(b?.student_name ?? ''), 'zh-CN')
-    })
-    for (const s of sorted) {
-      rows.push({ ...s })
-    }
-  }
-  return rows
-}
-
-const PAPER_SIZE_MM: Record<'a4' | 'a3', { w: number; h: number }> = {
-  a4: { w: 210, h: 297 },
-  a3: { w: 297, h: 420 },
-}
-const DESK_PDF_MARGIN_MM = 0
-const DESK_PDF_GAP_MM = 2
-const isDirectSizeMode = computed(() => paperSize.value === 'custom')
-
-const deskPdfPaperSize = computed(() => {
-  if (isDirectSizeMode.value) {
-    return {
-      w: Number(pdfTemplateDoc.value?.canvas?.widthMm ?? selectedTemplateDoc.value?.canvas?.widthMm ?? 90),
-      h: Number(pdfTemplateDoc.value?.canvas?.heightMm ?? selectedTemplateDoc.value?.canvas?.heightMm ?? 50),
-    }
-  }
-  const base = PAPER_SIZE_MM[paperSize.value === 'a3' ? 'a3' : 'a4']
-  return paperOrientation.value === 'landscape'
-    ? { w: base.h, h: base.w }
-    : base
-})
-
-const deskPdfLabelSize = computed(() => ({
-  w: Number(pdfTemplateDoc.value?.canvas?.widthMm ?? selectedTemplateDoc.value?.canvas?.widthMm ?? 90),
-  h: Number(pdfTemplateDoc.value?.canvas?.heightMm ?? selectedTemplateDoc.value?.canvas?.heightMm ?? 50),
-}))
-
-const deskPdfLayout = computed(() => {
-  const page = deskPdfPaperSize.value
-  const label = deskPdfLabelSize.value
-  if (isDirectSizeMode.value) {
-    return {
-      page,
-      requestedCols: 1,
-      maxCols: 1,
-      cols: 1,
-      rowsPerPage: 1,
-      perPage: 1,
-      usableW: page.w,
-      usableH: page.h,
-      fitsWidth: true,
-      fitsHeight: true,
-      labelW: label.w,
-      labelH: label.h,
-      blockW: label.w,
-    }
-  }
-  const requestedCols = Math.max(1, Number(paperColumns.value || 1))
-  const usableW = Math.max(1, page.w - DESK_PDF_MARGIN_MM * 2)
-  const usableH = Math.max(1, page.h - DESK_PDF_MARGIN_MM * 2)
-  const fitsWidth = label.w <= usableW
-  const fitsHeight = label.h <= usableH
-  const maxCols = Math.max(1, Math.floor((usableW + DESK_PDF_GAP_MM) / (label.w + DESK_PDF_GAP_MM)))
-  const cols = Math.min(requestedCols, maxCols)
-  const rowsPerPage = Math.max(1, Math.floor((usableH + DESK_PDF_GAP_MM) / (label.h + DESK_PDF_GAP_MM)))
-  const perPage = cols * rowsPerPage
-  return {
-    page,
-    requestedCols,
-    maxCols,
-    cols,
-    rowsPerPage,
-    perPage,
-    usableW,
-    usableH,
-    fitsWidth,
-    fitsHeight,
-    labelW: label.w,
-    labelH: label.h,
-    blockW: cols * label.w + Math.max(0, cols - 1) * DESK_PDF_GAP_MM,
-  }
-})
-
-const deskPdfTemplateScale = computed(() => 1)
-
-const deskPdfPages = computed(() => {
-  const perPage = deskPdfLayout.value.perPage
-  const list = pdfMergeList.value
-  const out: Record<string, string>[][] = []
-  for (let i = 0; i < list.length; i += perPage) {
-    out.push(list.slice(i, i + perPage))
-  }
-  return out
-})
-
-const deskPdfExportRootStyle = computed(() => ({
-  width: `${deskPdfLayout.value.page.w}mm`,
-}))
-
-const deskPdfPageStyle = computed(() => ({
-  width: `${deskPdfLayout.value.page.w}mm`,
-  height: `${deskPdfLayout.value.page.h}mm`,
-  padding: `${DESK_PDF_MARGIN_MM}mm`,
-  boxSizing: 'border-box' as const,
-}))
-
-function deskPdfPageGridStyle(itemCount: number) {
-  const { cols, labelW, labelH } = deskPdfLayout.value
-  const n = Math.max(1, itemCount || 1)
-  const rows = Math.max(1, Math.ceil(n / cols))
-  const gridW = cols * labelW + (cols - 1) * DESK_PDF_GAP_MM
-  const gridH = rows * labelH + (rows - 1) * DESK_PDF_GAP_MM
-  return {
-    display: 'grid',
-    gridTemplateColumns: `repeat(${cols}, ${labelW}mm)`,
-    gridAutoRows: `${labelH}mm`,
-    gap: `${DESK_PDF_GAP_MM}mm`,
-    width: `${gridW}mm`,
-    height: `${gridH}mm`,
-    boxSizing: 'border-box' as const,
-  }
-}
-
-const deskPdfCellStyle = computed(() => {
-  const { labelW, labelH } = deskPdfLayout.value
-  return {
-    width: `${labelW}mm`,
-    height: `${labelH}mm`,
-    boxSizing: 'border-box' as const,
-    overflow: 'hidden',
-  }
-})
-
-const openPaperDialog = () => {
-  if (!competitionId.value || !Object.keys(labels.value).length) {
-    qiuMsg.warning('请先加载桌面贴数据')
-    return
-  }
-  paperSize.value = 'a4'
-  paperOrientation.value = 'portrait'
-  paperColumnsPreset.value = 2
-  paperColumns.value = 2
-  paperPickVisible.value = true
-}
-
-const confirmPaperAndOpenPdf = async () => {
-  if (!competitionId.value) return
-  paperPickVisible.value = false
-  pdfLoading.value = true
-  pdfDialogVisible.value = true
-  pdfTemplateDoc.value = null
-  pdfMergeList.value = []
-  try {
-    const rawRows = collectLabelRows()
-    const tplRes: any = selectedTemplateId.value
-      ? await getDeskLabelTemplateOne(competitionId.value, Number(selectedTemplateId.value))
-      : await getDeskLabelTemplate(competitionId.value)
-    const body = tplRes.data
-    const tpl = body?.template_json
-    if (tpl && typeof tpl === 'object' && Array.isArray((tpl as BadgeTemplateDoc).elements) && (tpl as BadgeTemplateDoc).elements!.length) {
-      pdfTemplateDoc.value = tpl as BadgeTemplateDoc
-    }
-    pdfMergeList.value = rawRows.map((r) => flattenDeskLabelForMerge(r, competitionTitle.value))
-    await nextTick()
-    if (!deskPdfLayout.value.fitsWidth || !deskPdfLayout.value.fitsHeight) {
-      pdfDialogVisible.value = false
-      qiuMsg.warning(
-        `当前桌面贴尺寸 ${deskPdfLabelSize.value.w} x ${deskPdfLabelSize.value.h} mm 已超出 ${paperSize.value.toUpperCase()}${paperOrientation.value === 'landscape' ? '横向' : '纵向'} 纸张尺寸，请调整模板尺寸或改用更大纸张`
-      )
-      return
-    }
-    if (deskPdfLayout.value.requestedCols > deskPdfLayout.value.maxCols) {
-      pdfDialogVisible.value = false
-      qiuMsg.warning(
-        `${paperSize.value.toUpperCase()}${paperOrientation.value === 'landscape' ? '横向' : '纵向'} 最多每行显示 ${deskPdfLayout.value.maxCols} 个桌面贴，请调整后重试`
-      )
-      return
-    }
-  } catch {
-    pdfMergeList.value = collectLabelRows().map((r) => flattenDeskLabelForMerge(r, competitionTitle.value))
-  } finally {
-    pdfLoading.value = false
-  }
-}
-
-const onPdfDialogOpened = async () => {
-  await nextTick()
-}
-
-const onDownloadPdf = async () => {
-  const el = pdfExportRoot.value
-  if (!el || !pdfMergeList.value.length) return
-  pdfDownloading.value = true
-  try {
-    await nextTick()
-    await new Promise((r) => setTimeout(r, 200))
-    const name = `桌面贴_${competitionTitle.value || competitionId.value}.pdf`
-    const pages = Array.from(el.querySelectorAll<HTMLElement>('.pdf-page'))
-    await downloadPdfPagesFromElements(pages, name, {
-      size: paperSize.value,
-      orientation: paperOrientation.value,
-      widthMm: deskPdfPaperSize.value.w,
-      heightMm: deskPdfPaperSize.value.h,
-    })
-  } finally {
-    pdfDownloading.value = false
-  }
-}
-
-const onPrintPdf = async () => {
-  const el = pdfExportRoot.value
-  if (!el || !pdfMergeList.value.length) return
-  try {
-    await nextTick()
-    await new Promise((r) => setTimeout(r, 200))
-    const pages = Array.from(el.querySelectorAll<HTMLElement>('.pdf-page'))
-    await printPdfPagesFromElements(pages, `桌面贴_${competitionTitle.value || competitionId.value}`, {
-      size: paperSize.value,
-      orientation: paperOrientation.value,
-      widthMm: deskPdfPaperSize.value.w,
-      heightMm: deskPdfPaperSize.value.h,
-    })
-  } catch (error) {
-    qiuMsg.error(error instanceof Error ? error.message : '打印失败')
-  }
-}
-
-onMounted(async () => {
-  try {
-    const res: any = await getCompetitions({ page_size: 200 })
-    competitions.value = res.data?.data || []
-  } catch {
-    competitions.value = []
-  }
-})
-watch(paperColumnsPreset, (value) => {
-  if (isDirectSizeMode.value) return
-  if (value > 0) {
-    paperColumns.value = value
-  }
-})
-watch(paperColumns, (value) => {
-  if (isDirectSizeMode.value) {
-    if (paperColumns.value !== 1) paperColumns.value = 1
-    if (paperColumnsPreset.value !== 1) paperColumnsPreset.value = 1
-    return
-  }
-  const normalized = Math.max(1, Number(value || 1))
-  if (normalized !== value) {
-    paperColumns.value = normalized
-    return
-  }
-  paperColumnsPreset.value = [1, 2, 3].includes(normalized) ? normalized : 0
-})
-watch(paperSize, (value) => {
-  if (value === 'custom') {
-    paperOrientation.value = 'portrait'
-    paperColumnsPreset.value = 1
-    paperColumns.value = 1
-  }
-})
-</script>
-
-<style scoped>
-.filter-card {
-  margin-bottom: 16px;
-}
-.label-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 12px;
-}
-.label-card {
-  border: 1px solid #dcdfe6;
-  border-radius: 6px;
-  padding: 12px;
-  text-align: center;
-  min-height: 132px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-.label-seat {
-  font-size: 24px;
-  font-weight: bold;
-  color: #409eff;
-}
-.label-name {
-  font-size: 14px;
-  margin: 4px 0;
-}
-.label-school {
-  font-size: 12px;
-  color: #909399;
-}
-.toolbar-pdf {
-  margin-top: 16px;
-}
-.paper-tip {
-  margin: 0 0 12px;
-  color: #606266;
-  font-size: 14px;
-}
-.paper-config {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-.paper-config-block {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.paper-inline-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-.paper-config-title {
-  font-size: 13px;
-  color: #606266;
-  font-weight: 600;
-}
-.paper-config-desc {
-  font-size: 12px;
-  color: #909399;
-}
-.pdf-dialog-body {
-  max-height: 78vh;
-  overflow: auto;
-  background: #f5f7fa;
-  padding: 12px;
-  border-radius: 8px;
-}
-.pdf-export-root {
-  margin: 0 auto;
-}
-.pdf-page {
-  margin: 0 auto 12px;
-  background: #fff;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  break-after: page;
-}
-.pdf-page-grid {
-  display: grid;
-  align-content: center;
-  justify-content: center;
-}
-.pdf-cell {
-  background: #fff;
-  border-radius: 4px;
-  padding: 2px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-}
-.pdf-cell.simple {
-  text-align: center;
-  padding: 6px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.simple-seat {
-  font-size: 20px;
-  font-weight: 700;
-  color: #409eff;
-}
-.simple-name {
-  font-size: 14px;
-  margin: 4px 0;
-}
-.simple-school {
-  font-size: 12px;
-  color: #909399;
-}
-.simple-no {
-  font-size: 11px;
-  color: #606266;
-}
-</style>