foucui 1.0.1

package/components/QiuBadge/views/DeskLabelView.vue

@@ -0,0 +1,683 @@
+<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>