foucui 1.0.1

package/components/QiuBadge/views/BadgeManageView.vue

@@ -0,0 +1,1364 @@
+<template>
+  <div class="page-container badge-manage">
+    <qiu-card shadow="never" class="tpl-entry-card tpl-fill-card">
+      <template #header>
+        <div class="card-head">
+          <span class="toolbar-title">证件模板</span>
+          <span class="card-head-desc">按比赛设计版面；保存后学校端按模板套打。</span>
+        </div>
+      </template>
+      <div class="tpl-list-layout">
+        <aside class="tpl-region-aside">
+          <div class="tree-title">赛区分类</div>
+          <qiu-input v-model="treeFilterText" class="tree-filter" clearable size="small" placeholder="筛选赛区" />
+          <qiu-scrollbar class="tpl-region-scroll">
+            <qiu-tree
+              ref="treeRef"
+              :data="treeData"
+              highlight-current
+              :default-expanded-keys="['all']"
+              :props="{ label: 'label', children: 'children', value: 'id' }"
+              :filter-node-method="filterTreeNode"
+              @node-click="onRegionNodeClick"
+            />
+          </qiu-scrollbar>
+        </aside>
+        <section class="tpl-list-main">
+          <p class="hint tpl-hint tpl-hint-shrink">
+            在列表中选择比赛进入<strong>管理模板</strong>，或与下方「证件生成任务」配合：先选比赛制作模板，再用任务生成预览。
+            <qiu-button link type="primary" @click="goBadgeLibrary">证件图片库</qiu-button>
+          </p>
+          <div class="tpl-filter-bar">
+            <qiu-input v-model="tplKeyword" clearable placeholder="关键字：比赛名称/赛区码/场地" style="width: 240px" @keyup.enter="searchTemplates" />
+            <qiu-date
+              v-model="tplDateRange"
+              type="daterange"
+              value-format="YYYY-MM-DD"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              range-separator="至"
+              style="width: 260px"
+            />
+            <qiu-button type="primary" @click="searchTemplates">查询</qiu-button>
+            <qiu-button @click="resetTemplateFilters">重置</qiu-button>
+            <qiu-tag v-if="regionTagText" type="info" closable @close="clearRegionFilter">{{ regionTagText }}</qiu-tag>
+          </div>
+          <div ref="tplHostRef" class="table-host">
+          <qiu-table
+            v-qiu-loading="tplTableLoading"
+            :data="competitions"
+            stripe
+            :height="tplTableHeight"
+            empty-text="暂无比赛数据"
+            size="small"
+            class="tpl-table"
+          >
+            <qiu-table-column type="index" label="#" width="52" align="center" :index="templateRowIndex" />
+            <qiu-table-column prop="name" label="比赛名称" min-width="200" show-overflow-tooltip />
+            <qiu-table-column prop="area_code" label="赛区码" width="82" />
+            <qiu-table-column label="举办地" min-width="150" show-overflow-tooltip>
+              <template #default="{ row }">{{ formatHostRegionLabel(row.host_region, codeToText as Record<string, string>) || '—' }}</template>
+            </qiu-table-column>
+            <qiu-table-column prop="start_date" label="开始日期" width="118" />
+            <qiu-table-column label="状态" width="96">
+              <template #default="{ row }">
+                <qiu-tag size="small" :type="(['info', 'success', 'primary', 'danger'] as const)[Number(row.status)] ?? 'info'">
+                  {{ ['草稿', '报名中', '进行中', '已结束'][Number(row.status)] ?? '—' }}
+                </qiu-tag>
+              </template>
+            </qiu-table-column>
+            <qiu-table-column label="模板" width="220" fixed="right">
+              <template #default="{ row }">
+                <qiu-button link type="primary" @click="goEditBadgeTemplate(row.id)">管理模板</qiu-button>
+                <qiu-button link type="primary" @click="goCompetitionDetail(row.id)">比赛详情</qiu-button>
+              </template>
+            </qiu-table-column>
+          </qiu-table>
+          </div>
+          <div class="pagination-wrapper tpl-pagination">
+            <qiu-pagination
+              v-model:current-page="tplPagination.page"
+              v-model:page-size="tplPagination.pageSize"
+              :total="tplPagination.total"
+              :page-sizes="[10, 20, 50]"
+              layout="total, sizes, prev, pager, next"
+              @change="loadCompetitions"
+            />
+          </div>
+        </section>
+      </div>
+    </qiu-card>
+
+    <qiu-card shadow="never" class="task-fill-card">
+      <div class="toolbar">
+        <span class="toolbar-title">证件生成任务</span>
+        <qiu-button type="primary" @click="openDialog">添加任务</qiu-button>
+      </div>
+      <p class="hint task-hint-shrink">任务保存在本浏览器；点击「生成预览」将先选择 A4/A3 纸张，再打开整版预览并可下载 PDF（无座位号的学生会被跳过或禁止）。</p>
+      <div ref="taskHostRef" class="table-host">
+      <qiu-table :data="tasks" stripe empty-text="暂无任务，请点击添加" :height="taskTableHeight">
+        <qiu-table-column prop="title" label="任务名称" min-width="140" />
+        <qiu-table-column prop="competitionName" label="比赛" min-width="160" show-overflow-tooltip />
+        <qiu-table-column label="模板" min-width="140" show-overflow-tooltip>
+          <template #default="{ row }">{{ row.templateName || '默认模板' }}</template>
+        </qiu-table-column>
+        <qiu-table-column label="学校范围" width="140">
+          <template #default="{ row }">
+            <span v-if="row.scopeAllSchools">全部学校</span>
+            <span v-else>{{ row.schoolIds.length }} 所学校</span>
+          </template>
+        </qiu-table-column>
+        <qiu-table-column label="学生范围" width="120">
+          <template #default="{ row }">
+            <span v-if="!row.studentIds?.length">范围内全部（无座位号跳过）</span>
+            <span v-else>指定 {{ row.studentIds.length }} 人</span>
+          </template>
+        </qiu-table-column>
+        <qiu-table-column label="生成方式" width="120" align="center">
+          <template #default="{ row }">
+            <span>{{ row.generateMode === 'school' ? '按学校' : '按顺序' }}</span>
+          </template>
+        </qiu-table-column>
+        <qiu-table-column label="创建时间" width="175">
+          <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
+        </qiu-table-column>
+        <qiu-table-column label="操作" width="360" fixed="right">
+          <template #default="{ row }">
+            <qiu-button link type="primary" @click="goEditBadgeTemplate(row.competitionId)">编辑模板</qiu-button>
+            <qiu-button link type="success" @click="generateTaskNow(row)">立即生成证件</qiu-button>
+            <qiu-button link type="primary" @click="openPaperForPreview(row)">生成预览</qiu-button>
+            <qiu-button link type="danger" @click="removeTask(row.id)">删除</qiu-button>
+          </template>
+        </qiu-table-column>
+      </qiu-table>
+      </div>
+    </qiu-card>
+
+    <qiu-card v-if="previewBadges.length || previewSkipped.length" class="preview-card" shadow="never">
+      <template #header>
+        <div class="preview-head">
+          <span>预览{{ previewTaskTitle ? ` — ${previewTaskTitle}` : '' }}</span>
+          <div class="preview-head-actions">
+            <qiu-button
+              v-if="pendingPreviewTask && (previewBadges.length || previewSkipped.length)"
+              link
+              type="primary"
+              @click="reopenPdfPreview"
+            >
+              返回整版预览
+            </qiu-button>
+            <qiu-button link type="danger" @click="clearInlinePreview">关闭预览</qiu-button>
+          </div>
+        </div>
+      </template>
+      <qiu-alert
+        v-if="previewSkipped.length"
+        type="warning"
+        show-icon
+        :closable="false"
+        :title="`已跳过 ${previewSkipped.length} 名学生（未编排座位号，无法制作证件）`"
+        style="margin-bottom: 12px"
+      />
+      <div v-if="previewBadges.length" class="badge-grid">
+        <div class="badge-card" v-for="b in previewBadges" :key="`${b.competition_no}-${b.seat_no}`">
+          <div class="badge-header">智慧奇乐</div>
+          <div class="badge-name">{{ b.student_name }}</div>
+          <div class="badge-school">{{ b.school_name }}</div>
+          <div class="badge-no">参赛编号：{{ b.competition_no }}</div>
+          <div class="badge-room">{{ b.competition_room }} {{ b.seat_no }}号</div>
+        </div>
+      </div>
+      <qiu-empty v-else-if="!previewSkipped.length" description="无符合条件的证件数据" />
+    </qiu-card>
+
+    <qiu-dialog
+      v-model="dialogVisible"
+      title="添加证件任务"
+      width="580px"
+      align-center
+      draggable
+      destroy-on-close
+      @closed="resetDialogForm"
+    >
+      <qiu-form label-width="108px">
+        <qiu-form-item label="任务名称">
+          <qiu-input v-model="dialogTitle" placeholder="可选，便于区分" clearable />
+        </qiu-form-item>
+        <qiu-form-item label="比赛" required>
+          <qiu-select
+            v-model="dialogCompetitionId"
+            placeholder="选择比赛"
+            style="width: 100%"
+            :options="taskCompetitionSelectOptions"
+            @change="onDialogCompetitionChange"
+          />
+        </qiu-form-item>
+        <qiu-form-item label="学校范围">
+          <qiu-radio-group v-model="dialogScopeAll">
+            <qiu-radio :label="true">全部学校</qiu-radio>
+            <qiu-radio :label="false">指定学校</qiu-radio>
+          </qiu-radio-group>
+        </qiu-form-item>
+        <qiu-form-item v-if="!dialogScopeAll" label="选择学校">
+          <qiu-input
+            v-model="schoolFilterText"
+            clearable
+            size="small"
+            placeholder="筛选学校"
+            :disabled="!dialogCompetitionId"
+            style="width: 100%; margin-bottom: 8px"
+          />
+          <div class="checkbox-scroll" :class="{ 'is-disabled': !dialogCompetitionId }">
+            <qiu-checkbox-group v-model="dialogSchoolIds" :disabled="!dialogCompetitionId">
+              <qiu-checkbox
+                v-for="s in filteredBadgeSchoolOptions"
+                :key="s.id"
+                :label="s.id"
+              >
+                {{ s.school_name }}（{{ s.student_count }}人）
+              </qiu-checkbox>
+            </qiu-checkbox-group>
+            <div v-if="!filteredBadgeSchoolOptions.length" class="checkbox-empty">请先选择比赛</div>
+          </div>
+        </qiu-form-item>
+        <qiu-form-item v-if="dialogCompetitionId" label="模板">
+          <qiu-select
+            v-model="dialogTemplateId"
+            placeholder="请选择证件模板"
+            style="width: 100%"
+            :options="badgeTemplateSelectOptions"
+          />
+          <qiu-button link type="primary" @click="goEditBadgeTemplate(dialogCompetitionId)">编辑该比赛的证件模板</qiu-button>
+        </qiu-form-item>
+        <qiu-form-item label="指定学生">
+          <div class="inline-stack">
+            <qiu-switch v-model="dialogPickStudents" active-text="仅所选学生" inactive-text="范围内全部" />
+          </div>
+          <template v-if="dialogPickStudents">
+            <qiu-input
+              v-model="studentFilterText"
+              clearable
+              size="small"
+              placeholder="筛选学生"
+              :disabled="!dialogCompetitionId"
+              style="width: 100%; margin-top: 8px"
+            />
+            <div class="checkbox-scroll" :class="{ 'is-disabled': !dialogCompetitionId }" style="margin-top: 8px">
+              <qiu-checkbox-group v-model="dialogStudentIds" :disabled="!dialogCompetitionId">
+                <qiu-checkbox
+                  v-for="opt in filteredStudentSelectOptions"
+                  :key="opt.value"
+                  :label="opt.value"
+                  :disabled="opt.disabled"
+                >
+                  {{ opt.label }}
+                </qiu-checkbox>
+              </qiu-checkbox-group>
+            </div>
+          </template>
+        </qiu-form-item>
+        <qiu-form-item label="生成方式">
+          <qiu-radio-group v-model="dialogGenerateMode">
+            <qiu-radio label="sequence">按顺序生成</qiu-radio>
+            <qiu-radio label="school">按学校生成</qiu-radio>
+          </qiu-radio-group>
+          <div class="dialog-tip">预览、打印和下载 PDF 都会按这个顺序输出。</div>
+        </qiu-form-item>
+      </qiu-form>
+      <template #footer>
+        <qiu-button @click="dialogVisible = false">取消</qiu-button>
+        <qiu-button type="primary" @click="saveTask">保存任务</qiu-button>
+      </template>
+    </qiu-dialog>
+
+    <BadgeLibraryManagerDialog v-model="badgeLibraryDialogOpen" />
+
+    <qiu-dialog v-model="paperPickVisible" title="预览排版设置" width="520px" destroy-on-close align-center>
+      <p class="paper-tip">生成整版证件预览前，请选择纸张模式。可按 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="confirmPaperAndPreview">下一步：整版预览</qiu-button>
+      </template>
+    </qiu-dialog>
+
+    <qiu-dialog
+      v-model="pdfDialogVisible"
+      :title="`证件整版预览 — ${pdfPreviewTaskTitle}`"
+      width="96%"
+      top="2vh"
+      destroy-on-close
+      class="pdf-preview-dialog"
+    >
+      <qiu-alert
+        v-if="pdfSkipped.length"
+        type="warning"
+        show-icon
+        :closable="false"
+        :title="`已跳过 ${pdfSkipped.length} 名学生（未编排座位号）`"
+        style="margin-bottom: 12px"
+      />
+      <div v-qiu-loading="pdfLoading" class="pdf-dialog-body">
+        <div ref="pdfExportRoot" class="pdf-export-root" :style="pdfExportRootStyle">
+          <template v-if="pdfTemplateDoc?.canvas && pdfMergeList.length">
+            <div v-for="(page, pageIndex) in pdfPages" :key="pageIndex" class="pdf-page" :style="pdfPageStyle">
+              <div class="pdf-page-grid" :style="pdfPageGridStyleFor(page.length)">
+                <div v-for="(m, i) in page" :key="`${pageIndex}-${i}`" class="pdf-cell" :style="pdfCellStyle">
+                  <BadgeTemplateRenderer :doc="pdfTemplateDoc" :merge-data="m" :screen-scale="1" />
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-else-if="pdfMergeList.length">
+            <div v-for="(b, i) in previewBadges" :key="i" class="pdf-cell simple-badge">
+              <div class="sb-h">智慧奇乐</div>
+              <div class="sb-name">{{ b.student_name }}</div>
+              <div class="sb-school">{{ b.school_name }}</div>
+              <div class="sb-no">参赛编号：{{ b.competition_no }}</div>
+              <div class="sb-room">{{ b.competition_room }} {{ b.seat_no }}号</div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <template #footer>
+        <qiu-button :disabled="!pdfMergeList.length" @click="onPrintBadgePdf">打印整版</qiu-button>
+        <qiu-button @click="pdfDialogVisible = false">关闭</qiu-button>
+        <qiu-button type="primary" :loading="pdfDownloading" :disabled="!pdfMergeList.length" @click="onDownloadBadgePdf">
+          下载 PDF
+        </qiu-button>
+      </template>
+    </qiu-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick, watch, onActivated } from 'vue'
+import { useRouter } from 'vue-router'
+import { qiuMsg } from '../../QiuMsg'
+import { qiuAlert } from '../../QiuMsgBox'
+import { regionData, codeToText } from '../utils/chinaAreaData'
+import BadgeLibraryManagerDialog from '../components/BadgeLibraryManagerDialog.vue'
+import BadgeTemplateRenderer from '../shared/BadgeTemplateRenderer.vue'
+import { getCompetitions, getBadgeTemplate, getBadgeTemplateOne, listBadgeTemplates } from '../api/index'
+import { getBadgeSchools, getBadges, getStudents, finalizeSeatAssignmentLock } from '../api/index'
+import type { BadgeTemplateDoc } from '../shared/badgeTemplate'
+import { flattenBadgeForMerge } from '../shared/badgeTemplate'
+import {
+  downloadPdfPagesFromElements,
+  printPdfPagesFromElements,
+  type PaperKind,
+  type PaperOrientation,
+} from '../utils/pdfFromElement'
+import { useTableHostHeight } from '../composables/useTableHostHeight'
+import { formatHostRegionLabel } from '../utils/hostRegion'
+
+const { hostRef: tplHostRef, tableHeight: tplTableHeight, recalcTableHeight: recalcTplTable } = useTableHostHeight(140)
+const { hostRef: taskHostRef, tableHeight: taskTableHeight, recalcTableHeight: recalcTaskTable } = useTableHostHeight(160)
+
+const router = useRouter()
+const badgeLibraryDialogOpen = ref(false)
+const STORAGE_KEY = 'zhihui_admin_badge_tasks'
+const tplTableLoading = ref(false)
+
+interface RegionTreeNode {
+  id: string
+  label: string
+  code: string
+  children?: RegionTreeNode[]
+}
+
+interface BadgeTask {
+  id: string
+  title: string
+  competitionId: number
+  competitionName: string
+  templateId?: number
+  templateName?: string
+  scopeAllSchools: boolean
+  schoolIds: number[]
+  studentIds: number[] | null
+  generateMode: 'sequence' | 'school'
+  createdAt: string
+}
+
+function newId(): string {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) return crypto.randomUUID()
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
+}
+
+const competitions = ref<any[]>([])
+const taskCompetitionOptions = ref<any[]>([])
+const tasks = ref<BadgeTask[]>([])
+const tplKeyword = ref('')
+const tplDateRange = ref<[string, string] | []>([])
+const tplPagination = ref({ page: 1, pageSize: 10, total: 0 })
+const treeRef = ref<{ filter: (v: string) => void; setCurrentKey: (k: string) => void } | null>(null)
+const treeFilterText = ref('')
+const selectedRegionCode = ref('')
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const dialogCompetitionId = ref<number | undefined>(undefined)
+const dialogTemplateId = ref<number | undefined>(undefined)
+const dialogScopeAll = ref(true)
+const dialogSchoolIds = ref<number[]>([])
+const dialogPickStudents = ref(false)
+const dialogStudentIds = ref<number[]>([])
+const dialogGenerateMode = ref<'sequence' | 'school'>('sequence')
+const badgeSchoolOptions = ref<{ id: number; school_name: string; student_count: number }[]>([])
+const badgeTemplateOptions = ref<{ id: number; name: string; is_default?: boolean }[]>([])
+const dialogStudentsRaw = ref<any[]>([])
+const schoolFilterText = ref('')
+const studentFilterText = ref('')
+
+const previewBadges = ref<any[]>([])
+const previewSkipped = ref<any[]>([])
+const previewTaskTitle = ref('')
+
+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 pendingPreviewTask = ref<BadgeTask | null>(null)
+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 pdfSkipped = ref<any[]>([])
+const pdfPreviewTaskTitle = ref('')
+
+const PAPER_SIZE_MM: Record<'a4' | 'a3', { w: number; h: number }> = {
+  a4: { w: 210, h: 297 },
+  a3: { w: 297, h: 420 },
+}
+const PDF_PAGE_MARGIN_MM = 8
+const isDirectSizeMode = computed(() => paperSize.value === 'custom')
+
+const pdfPaperSize = computed(() => {
+  if (isDirectSizeMode.value) {
+    return {
+      w: Number(pdfTemplateDoc.value?.canvas?.widthMm ?? 90),
+      h: Number(pdfTemplateDoc.value?.canvas?.heightMm ?? 130),
+    }
+  }
+  const base = PAPER_SIZE_MM[paperSize.value === 'a3' ? 'a3' : 'a4']
+  return paperOrientation.value === 'landscape'
+    ? { w: base.h, h: base.w }
+    : base
+})
+const pdfBadgeSize = computed(() => ({
+  w: Number(pdfTemplateDoc.value?.canvas?.widthMm ?? 90),
+  h: Number(pdfTemplateDoc.value?.canvas?.heightMm ?? 130),
+}))
+const pdfGridMetrics = computed(() => {
+  const page = pdfPaperSize.value
+  const badge = pdfBadgeSize.value
+  if (isDirectSizeMode.value) {
+    return {
+      requestedCols: 1,
+      maxCols: 1,
+      cols: 1,
+      rows: 1,
+      perPage: 1,
+      blockW: badge.w,
+      blockH: badge.h,
+    }
+  }
+  const usableW = Math.max(1, page.w - PDF_PAGE_MARGIN_MM * 2)
+  const usableH = Math.max(1, page.h - PDF_PAGE_MARGIN_MM * 2)
+  const maxCols = Math.max(1, Math.floor(usableW / badge.w))
+  const requestedCols = Math.max(1, Number(paperColumns.value || 1))
+  const cols = Math.min(requestedCols, maxCols)
+  const rows = Math.max(1, Math.floor(usableH / badge.h))
+  const perPage = Math.max(1, cols * rows)
+  return {
+    requestedCols,
+    maxCols,
+    cols,
+    rows,
+    perPage,
+    blockW: cols * badge.w,
+    blockH: rows * badge.h,
+  }
+})
+const pdfPages = computed(() => {
+  const perPage = pdfGridMetrics.value.perPage
+  const out: Record<string, string>[][] = []
+  for (let i = 0; i < pdfMergeList.value.length; i += perPage) {
+    out.push(pdfMergeList.value.slice(i, i + perPage))
+  }
+  return out
+})
+const pdfExportRootStyle = computed(() => ({
+  width: `${pdfPaperSize.value.w}mm`,
+}))
+const pdfPageStyle = computed(() => ({
+  width: `${pdfPaperSize.value.w}mm`,
+  height: `${pdfPaperSize.value.h}mm`,
+  padding: `${isDirectSizeMode.value ? 0 : PDF_PAGE_MARGIN_MM}mm`,
+}))
+function pdfPageGridStyleFor(itemCount: number) {
+  const cols = Math.max(1, Math.min(pdfGridMetrics.value.cols, itemCount || 1))
+  const rows = Math.max(1, Math.ceil((itemCount || 1) / Math.max(1, pdfGridMetrics.value.cols)))
+  return {
+    width: `${cols * pdfBadgeSize.value.w}mm`,
+    minHeight: `${rows * pdfBadgeSize.value.h}mm`,
+    gridTemplateColumns: `repeat(${cols}, ${pdfBadgeSize.value.w}mm)`,
+    gridAutoRows: `${pdfBadgeSize.value.h}mm`,
+  }
+}
+const pdfCellStyle = computed(() => ({
+  width: `${pdfBadgeSize.value.w}mm`,
+  height: `${pdfBadgeSize.value.h}mm`,
+}))
+
+const studentSelectOptions = computed(() => {
+  return dialogStudentsRaw.value.map((s) => {
+    const seat = String(s.seat_no ?? '').trim()
+    const disabled = !seat
+    return {
+      value: s.id as number,
+      label: `${s.student_name}（座位:${seat || '无'}）`,
+      disabled,
+    }
+  })
+})
+
+const taskCompetitionSelectOptions = computed(() =>
+  taskCompetitionOptions.value.map((c) => ({ label: c.name, value: c.id }))
+)
+
+const badgeTemplateSelectOptions = computed(() =>
+  badgeTemplateOptions.value.map((tpl) => ({
+    label: `${tpl.name || '未命名模板'}${tpl.is_default ? '（默认）' : ''}`,
+    value: tpl.id,
+  }))
+)
+
+const filteredBadgeSchoolOptions = computed(() => {
+  const kw = schoolFilterText.value.trim().toLowerCase()
+  if (!kw) return badgeSchoolOptions.value
+  return badgeSchoolOptions.value.filter((s) =>
+    `${s.school_name}`.toLowerCase().includes(kw)
+  )
+})
+
+const filteredStudentSelectOptions = computed(() => {
+  const kw = studentFilterText.value.trim().toLowerCase()
+  if (!kw) return studentSelectOptions.value
+  return studentSelectOptions.value.filter((opt) => opt.label.toLowerCase().includes(kw))
+})
+
+const formatTime = (iso: string) => {
+  if (!iso) return ''
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return iso
+  return d.toLocaleString()
+}
+
+const mapRegionToTreeNodes = (nodes: any[]): RegionTreeNode[] => {
+  if (!Array.isArray(nodes)) return []
+  return nodes.map((node: any) => ({
+    id: `r-${node.value}`,
+    label: node.label,
+    code: String(node.value || ''),
+    children: mapRegionToTreeNodes(node.children || []),
+  }))
+}
+
+const treeData = computed<RegionTreeNode[]>(() => [
+  {
+    id: 'all',
+    label: '全国',
+    code: '',
+    children: mapRegionToTreeNodes(regionData),
+  },
+])
+
+const regionTagText = computed(() => {
+  if (!selectedRegionCode.value) return ''
+  return codeToText[selectedRegionCode.value] || selectedRegionCode.value
+})
+
+const filterTreeNode = (value: string, data: RegionTreeNode) => {
+  const text = value.trim()
+  if (!text) return true
+  return data.label.includes(text)
+}
+
+const onRegionNodeClick = (node: RegionTreeNode) => {
+  selectedRegionCode.value = node.code || ''
+  tplPagination.value.page = 1
+  loadCompetitions()
+}
+
+const clearRegionFilter = () => {
+  selectedRegionCode.value = ''
+  treeRef.value?.setCurrentKey('all')
+  tplPagination.value.page = 1
+  loadCompetitions()
+}
+
+const searchTemplates = () => {
+  tplPagination.value.page = 1
+  loadCompetitions()
+}
+
+const resetTemplateFilters = () => {
+  tplKeyword.value = ''
+  tplDateRange.value = []
+  selectedRegionCode.value = ''
+  treeFilterText.value = ''
+  treeRef.value?.setCurrentKey('all')
+  tplPagination.value.page = 1
+  loadCompetitions()
+}
+
+const templateRowIndex = (index: number) => {
+  return (tplPagination.value.page - 1) * tplPagination.value.pageSize + index + 1
+}
+
+const persistTasks = () => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks.value))
+  } catch {}
+}
+
+const loadTasksFromStorage = () => {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return
+    const parsed = JSON.parse(raw) as Partial<BadgeTask>[]
+    if (Array.isArray(parsed)) {
+      tasks.value = parsed.map((item) => ({
+        id: String(item.id || newId()),
+        title: String(item.title || '证件任务'),
+        competitionId: Number(item.competitionId || 0),
+        competitionName: String(item.competitionName || ''),
+        templateId: item.templateId ? Number(item.templateId) : undefined,
+        templateName: item.templateName ? String(item.templateName) : undefined,
+        scopeAllSchools: Boolean(item.scopeAllSchools ?? true),
+        schoolIds: Array.isArray(item.schoolIds) ? item.schoolIds.map((id) => Number(id)) : [],
+        studentIds: Array.isArray(item.studentIds) ? item.studentIds.map((id) => Number(id)) : null,
+        generateMode: item.generateMode === 'school' ? 'school' : 'sequence',
+        createdAt: String(item.createdAt || new Date().toISOString()),
+      }))
+    }
+  } catch {}
+}
+
+const loadCompetitions = async () => {
+  tplTableLoading.value = true
+  try {
+    const params: Record<string, unknown> = {
+      page: tplPagination.value.page,
+      page_size: tplPagination.value.pageSize,
+    }
+    const keyword = tplKeyword.value.trim()
+    if (keyword) params.keyword = keyword
+    if (tplDateRange.value.length === 2) {
+      params.start_date = tplDateRange.value[0]
+      params.end_date = tplDateRange.value[1]
+    }
+    if (selectedRegionCode.value) params.host_region_code = selectedRegionCode.value
+    const res: any = await getCompetitions(params)
+    competitions.value = res.data?.data || []
+    tplPagination.value.total = res.data?.total || 0
+  } catch {
+    competitions.value = []
+    tplPagination.value.total = 0
+  } finally {
+    tplTableLoading.value = false
+    nextTick(() => recalcTplTable())
+  }
+}
+
+const loadTaskCompetitionOptions = async () => {
+  try {
+    const res: any = await getCompetitions({ page: 1, page_size: 500 })
+    taskCompetitionOptions.value = res.data?.data || []
+  } catch {
+    taskCompetitionOptions.value = []
+  }
+}
+
+const goEditBadgeTemplate = (competitionId: number) => {
+  router.push(`/qiuui/badge/competition/${competitionId}/badge-templates`)
+}
+
+const goCompetitionDetail = (competitionId: number) => {
+  router.push(`/qiuui/badge/competition/${competitionId}`)
+}
+
+const goBadgeLibrary = () => {
+  badgeLibraryDialogOpen.value = true
+}
+
+const openDialog = () => {
+  resetDialogForm()
+  dialogVisible.value = true
+}
+
+const resetDialogForm = () => {
+  dialogTitle.value = ''
+  dialogCompetitionId.value = undefined
+  dialogTemplateId.value = undefined
+  dialogScopeAll.value = true
+  dialogSchoolIds.value = []
+  dialogPickStudents.value = false
+  dialogStudentIds.value = []
+  dialogGenerateMode.value = 'sequence'
+  badgeSchoolOptions.value = []
+  badgeTemplateOptions.value = []
+  dialogStudentsRaw.value = []
+  schoolFilterText.value = ''
+  studentFilterText.value = ''
+}
+
+const onDialogCompetitionChange = async (cid: number) => {
+  dialogSchoolIds.value = []
+  dialogTemplateId.value = undefined
+  dialogStudentIds.value = []
+  badgeSchoolOptions.value = []
+  badgeTemplateOptions.value = []
+  dialogStudentsRaw.value = []
+  if (!cid) return
+  try {
+    const tplRes: any = await listBadgeTemplates(cid)
+    badgeTemplateOptions.value = tplRes.data?.list ?? []
+    const first = badgeTemplateOptions.value[0]
+    if (first?.id) dialogTemplateId.value = Number(first.id)
+  } catch {
+    badgeTemplateOptions.value = []
+  }
+  try {
+    const rs: any = await getBadgeSchools(cid)
+    badgeSchoolOptions.value = rs.data?.schools ?? []
+  } catch {
+    badgeSchoolOptions.value = []
+  }
+  try {
+    const st: any = await getStudents(cid, { page: 1, page_size: 5000 })
+    dialogStudentsRaw.value = st.data?.data ?? st.data ?? []
+  } catch {
+    dialogStudentsRaw.value = []
+  }
+}
+
+const saveTask = () => {
+  const cid = dialogCompetitionId.value
+  if (!cid) {
+    qiuMsg.warning('请选择比赛')
+    return
+  }
+  if (!dialogTemplateId.value) {
+    qiuMsg.warning('请选择证件模板')
+    return
+  }
+  if (!dialogScopeAll.value && !dialogSchoolIds.value.length) {
+    qiuMsg.warning('请选择至少一所学校，或改为「全部学校」')
+    return
+  }
+  if (dialogPickStudents.value) {
+    if (!dialogStudentIds.value.length) {
+      qiuMsg.warning('请勾选指定学生，或关闭「指定学生」')
+      return
+    }
+  }
+  const comp = taskCompetitionOptions.value.find((c) => c.id === cid) || competitions.value.find((c) => c.id === cid)
+  const tpl = badgeTemplateOptions.value.find((t) => Number(t.id) === Number(dialogTemplateId.value))
+  const task: BadgeTask = {
+    id: newId(),
+    title: dialogTitle.value.trim() || `证件任务 ${tasks.value.length + 1}`,
+    competitionId: cid,
+    competitionName: comp?.name ?? `#${cid}`,
+    templateId: Number(dialogTemplateId.value),
+    templateName: tpl?.name || '未命名模板',
+    scopeAllSchools: dialogScopeAll.value,
+    schoolIds: dialogScopeAll.value ? [] : [...dialogSchoolIds.value],
+    studentIds: dialogPickStudents.value && dialogStudentIds.value.length ? [...dialogStudentIds.value] : null,
+    generateMode: dialogGenerateMode.value,
+    createdAt: new Date().toISOString(),
+  }
+  tasks.value = [task, ...tasks.value]
+  persistTasks()
+  dialogVisible.value = false
+  qiuMsg.success('任务已保存')
+}
+
+const openPaperForPreview = (row: BadgeTask) => {
+  pendingPreviewTask.value = row
+  paperSize.value = 'a4'
+  paperOrientation.value = 'portrait'
+  paperColumnsPreset.value = 2
+  paperColumns.value = 2
+  paperPickVisible.value = true
+}
+
+const generateTaskNow = async (row: BadgeTask) => {
+  pendingPreviewTask.value = row
+  paperSize.value = 'a4'
+  paperOrientation.value = 'portrait'
+  paperColumnsPreset.value = 2
+  paperColumns.value = 2
+  await confirmPaperAndPreview()
+}
+
+const confirmPaperAndPreview = async () => {
+  const row = pendingPreviewTask.value
+  if (!row) {
+    paperPickVisible.value = false
+    return
+  }
+  paperPickVisible.value = false
+  previewTaskTitle.value = row.title
+  pdfPreviewTaskTitle.value = row.title
+  previewBadges.value = []
+  previewSkipped.value = []
+  pdfTemplateDoc.value = null
+  pdfMergeList.value = []
+  pdfSkipped.value = []
+  const params: Record<string, string> = {}
+  if (!row.scopeAllSchools && row.schoolIds.length) params.school_ids = row.schoolIds.join(',')
+  if (row.studentIds?.length) params.student_ids = row.studentIds.join(',')
+  pdfLoading.value = true
+  pdfDialogVisible.value = true
+  try {
+    const res: any = await getBadges(row.competitionId, params)
+    previewBadges.value = sortBadgesForTask(res.data?.badges ?? [], row.generateMode)
+    previewSkipped.value = sortSkippedForTask(res.data?.skipped_no_seat ?? [], row.generateMode)
+    pdfSkipped.value = previewSkipped.value
+    if (!previewBadges.value.length && !previewSkipped.value.length) {
+      pdfDialogVisible.value = false
+      void qiuAlert(
+        '没有可生成的证件（请检查是否已按赛事场次上传学生、已添加教室并自动编排座位号）',
+        '提示'
+      )
+      return
+    }
+    pdfMergeList.value = previewBadges.value.map((b) => flattenBadgeForMerge(b as Record<string, unknown>))
+    try {
+      const tplRes: any = row.templateId
+        ? await getBadgeTemplateOne(row.competitionId, row.templateId)
+        : await getBadgeTemplate(row.competitionId)
+      const tpl = tplRes.data?.template_json
+      if (tpl && typeof tpl === 'object' && Array.isArray((tpl as BadgeTemplateDoc).elements) && (tpl as BadgeTemplateDoc).elements!.length) {
+        pdfTemplateDoc.value = tpl as BadgeTemplateDoc
+        await nextTick()
+        if (pdfGridMetrics.value.requestedCols > pdfGridMetrics.value.maxCols) {
+          pdfDialogVisible.value = false
+          qiuMsg.warning(
+            `${paperSize.value.toUpperCase()}${paperOrientation.value === 'landscape' ? '横向' : '纵向'} 最多每行显示 ${pdfGridMetrics.value.maxCols} 个证件，请调整后重试`
+          )
+          return
+        }
+      }
+    } catch {
+      pdfTemplateDoc.value = null
+    }
+  } catch {
+    pdfDialogVisible.value = false
+  } finally {
+    pdfLoading.value = false
+  }
+}
+
+const clearInlinePreview = () => {
+  previewBadges.value = []
+  previewSkipped.value = []
+  previewTaskTitle.value = ''
+}
+
+const reopenPdfPreview = () => {
+  if (!pendingPreviewTask.value) return
+  pdfDialogVisible.value = true
+}
+
+const markSeatAssignmentLocked = async (source: 'badge_print' | 'badge_pdf') => {
+  const row = pendingPreviewTask.value
+  if (!row?.competitionId) return
+  try {
+    await finalizeSeatAssignmentLock(row.competitionId, { source })
+  } catch {
+    qiuMsg.warning('参赛证已输出，但定档状态写入失败，请刷新后重试')
+  }
+}
+
+const onDownloadBadgePdf = 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 safe = (pdfPreviewTaskTitle.value || 'export').replace(/[/\\?%*:|"<>]/g, '_')
+    const pages = Array.from(el.querySelectorAll<HTMLElement>('.pdf-page'))
+    await downloadPdfPagesFromElements(pages, `证件_${safe}.pdf`, {
+      size: paperSize.value,
+      orientation: paperOrientation.value,
+      widthMm: pdfPaperSize.value.w,
+      heightMm: pdfPaperSize.value.h,
+    })
+    await markSeatAssignmentLocked('badge_pdf')
+  } finally {
+    pdfDownloading.value = false
+  }
+}
+
+const onPrintBadgePdf = 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'))
+    const safe = (pdfPreviewTaskTitle.value || '证件预览').replace(/[/\\?%*:|"<>]/g, '_')
+    await printPdfPagesFromElements(pages, `证件_${safe}`, {
+      size: paperSize.value,
+      orientation: paperOrientation.value,
+      widthMm: pdfPaperSize.value.w,
+      heightMm: pdfPaperSize.value.h,
+    })
+    await markSeatAssignmentLocked('badge_print')
+  } catch (error) {
+    qiuMsg.error(error instanceof Error ? error.message : '打印失败')
+  }
+}
+
+const removeTask = (id: string) => {
+  tasks.value = tasks.value.filter((t) => t.id !== id)
+  persistTasks()
+}
+
+onMounted(async () => {
+  loadTasksFromStorage()
+  await Promise.all([loadCompetitions(), loadTaskCompetitionOptions()])
+  nextTick(() => {
+    recalcTplTable()
+    recalcTaskTable()
+  })
+})
+watch(treeFilterText, (value) => {
+  treeRef.value?.filter(value)
+})
+watch(
+  () => tasks.value.length,
+  () => nextTick(() => recalcTaskTable())
+)
+onActivated(() =>
+  nextTick(() => {
+    recalcTplTable()
+    recalcTaskTable()
+  })
+)
+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
+  }
+})
+
+function sortBadgesForTask(list: any[], mode: 'sequence' | 'school'): any[] {
+  const rows = Array.isArray(list) ? [...list] : []
+  if (mode === 'school') {
+    rows.sort((a, b) => {
+      const schoolCompare = compareText(a?.school_name, b?.school_name)
+      if (schoolCompare !== 0) return schoolCompare
+      const roomCompare = compareText(a?.competition_room, b?.competition_room)
+      if (roomCompare !== 0) return roomCompare
+      const seatCompare = compareSeat(a?.seat_no, b?.seat_no)
+      if (seatCompare !== 0) return seatCompare
+      return compareText(a?.student_name, b?.student_name)
+    })
+    return rows
+  }
+  rows.sort((a, b) => {
+    const roomCompare = compareText(a?.competition_room, b?.competition_room)
+    if (roomCompare !== 0) return roomCompare
+    const seatCompare = compareSeat(a?.seat_no, b?.seat_no)
+    if (seatCompare !== 0) return seatCompare
+    const noCompare = compareText(a?.competition_no, b?.competition_no)
+    if (noCompare !== 0) return noCompare
+    return compareText(a?.student_name, b?.student_name)
+  })
+  return rows
+}
+
+function sortSkippedForTask(list: any[], mode: 'sequence' | 'school'): any[] {
+  const rows = Array.isArray(list) ? [...list] : []
+  rows.sort((a, b) => {
+    if (mode === 'school') {
+      const schoolCompare = compareText(a?.school_name, b?.school_name)
+      if (schoolCompare !== 0) return schoolCompare
+    }
+    return compareText(a?.student_name, b?.student_name)
+  })
+  return rows
+}
+
+function compareText(a: unknown, b: unknown): number {
+  return String(a || '').localeCompare(String(b || ''), 'zh-CN')
+}
+
+function compareSeat(a: unknown, b: unknown): number {
+  const sa = String(a || '').trim()
+  const sb = String(b || '').trim()
+  const na = Number(sa)
+  const nb = Number(sb)
+  const aValid = sa !== '' && !Number.isNaN(na)
+  const bValid = sb !== '' && !Number.isNaN(nb)
+  if (aValid && bValid && na !== nb) return na - nb
+  return sa.localeCompare(sb, 'zh-CN', { numeric: true })
+}
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.toolbar-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+.hint {
+  font-size: 13px;
+  color: #909399;
+  margin: 0 0 12px;
+}
+.preview-card {
+  margin-top: 16px;
+}
+.preview-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.preview-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.badge-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 16px;
+}
+.badge-card {
+  border: 2px solid #409eff;
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+}
+.badge-header {
+  font-size: 12px;
+  color: #909399;
+}
+.badge-name {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 8px 0;
+}
+.badge-school {
+  color: #606266;
+}
+.badge-no {
+  color: #409eff;
+  font-weight: bold;
+  margin-top: 8px;
+}
+.badge-room {
+  color: #909399;
+  font-size: 13px;
+  margin-top: 4px;
+}
+.inline-stack {
+  width: 100%;
+}
+.dialog-tip {
+  width: 100%;
+  margin-top: 6px;
+  color: #909399;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.badge-manage {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  gap: 0;
+}
+.tpl-fill-card,
+.task-fill-card {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+.tpl-fill-card :deep(.qiu-card__body),
+.task-fill-card :deep(.qiu-card__body) {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.tpl-hint-shrink,
+.task-hint-shrink {
+  flex-shrink: 0;
+}
+.card-head {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.card-head-desc {
+  font-size: 13px;
+  font-weight: normal;
+  color: #909399;
+}
+.tpl-hint strong {
+  color: #409eff;
+  font-weight: 600;
+}
+.tpl-list-layout {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  gap: 14px;
+  overflow: hidden;
+}
+.tpl-region-aside {
+  width: 240px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 12px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background: #fafafa;
+  box-sizing: border-box;
+}
+.tree-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #303133;
+  margin-bottom: 10px;
+}
+.tree-filter {
+  margin-bottom: 10px;
+}
+.tpl-region-scroll {
+  flex: 1;
+  min-height: 0;
+}
+.tpl-list-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.tpl-filter-bar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.tpl-table {
+  width: 100%;
+}
+.tpl-pagination {
+  flex-shrink: 0;
+}
+.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;
+  gap: 0;
+  align-content: start;
+  justify-content: start;
+}
+.pdf-cell {
+  background: #fff;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.simple-badge {
+  min-width: 200px;
+  border: 2px solid #409eff;
+  border-radius: 8px;
+  padding: 12px;
+  text-align: center;
+}
+.sb-h {
+  font-size: 12px;
+  color: #909399;
+}
+.sb-name {
+  font-size: 18px;
+  font-weight: 700;
+  margin: 6px 0;
+}
+.sb-school {
+  font-size: 13px;
+  color: #606266;
+}
+.sb-no {
+  color: #409eff;
+  font-weight: 600;
+  margin-top: 8px;
+  font-size: 13px;
+}
+.sb-room {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+.checkbox-scroll {
+  max-height: 220px;
+  overflow-y: auto;
+  padding: 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 6px;
+  background: #fafafa;
+}
+.checkbox-scroll.is-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.checkbox-scroll :deep(.qiu-checkbox-group) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+.checkbox-empty {
+  font-size: 13px;
+  color: #909399;
+  text-align: center;
+  padding: 8px 0;
+}
+</style>