foucui 1.0.1

package/components/QiuBadge/api/index.ts

@@ -0,0 +1,389 @@
+/**
+ * QiuBadge 本地演示 API（localStorage）
+ * 先保证编辑器可独立跑通；后续再对接真实后端。
+ */
+import type { BadgeTemplateDoc } from '../shared/badgeTemplate'
+
+const LS_TEMPLATES = 'qiu-badge-templates'
+const LS_DESK = 'qiu-badge-desk-templates'
+const LS_LIBRARY = 'qiu-badge-library'
+const LS_COMPETITIONS = 'qiu-badge-competitions'
+
+type ApiOk<T> = { code: number; data: T; msg?: string }
+
+const ok = <T>(data: T): ApiOk<T> => ({ code: 0, data })
+
+const readJson = <T>(key: string, fallback: T): T => {
+  try {
+    const raw = localStorage.getItem(key)
+    if (!raw) return fallback
+    return JSON.parse(raw) as T
+  } catch {
+    return fallback
+  }
+}
+
+const writeJson = (key: string, value: unknown) => {
+  localStorage.setItem(key, JSON.stringify(value))
+}
+
+export interface BadgeTemplateRow {
+  id: number
+  competition_id: number
+  name: string
+  width_mm: number
+  height_mm: number
+  is_default: boolean
+  update_time: string
+  doc?: BadgeTemplateDoc | null
+  default_test_json?: Record<string, unknown> | null
+  kind?: 'badge' | 'desk'
+}
+
+export interface BadgeLibraryImage {
+  id: number
+  url: string
+  name: string
+  create_time: string
+}
+
+const nowText = () => {
+  const d = new Date()
+  const p = (n: number) => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`
+}
+
+const ensureDemoCompetitions = () => {
+  let list = readJson<any[]>(LS_COMPETITIONS, [])
+  if (!list.length) {
+    list = [
+      {
+        id: 1,
+        name: '演示比赛 A',
+        area_code: 'A01',
+        host_region: '110000',
+        start_date: '2026-08-01',
+        status: 1,
+      },
+      {
+        id: 2,
+        name: '演示比赛 B',
+        area_code: 'B02',
+        host_region: '310000',
+        start_date: '2026-09-01',
+        status: 2,
+      },
+    ]
+    writeJson(LS_COMPETITIONS, list)
+  }
+  return list
+}
+
+const listStore = (kind: 'badge' | 'desk') =>
+  readJson<BadgeTemplateRow[]>(kind === 'badge' ? LS_TEMPLATES : LS_DESK, [])
+
+const saveStore = (kind: 'badge' | 'desk', rows: BadgeTemplateRow[]) =>
+  writeJson(kind === 'badge' ? LS_TEMPLATES : LS_DESK, rows)
+
+const nextId = (rows: BadgeTemplateRow[]) =>
+  rows.reduce((m, r) => Math.max(m, Number(r.id) || 0), 0) + 1
+
+const emptyDoc = (name: string, w = 90, h = 54): BadgeTemplateDoc =>
+  ({
+    version: 1,
+    canvas: {
+      widthMm: w,
+      heightMm: h,
+      background: '#ffffff',
+    },
+    elements: [],
+    guides: [],
+    regions: [],
+  }) as BadgeTemplateDoc
+
+/** —— competition / template —— */
+export const getCompetitions = async (params?: any) => {
+  const list = ensureDemoCompetitions()
+  const page = Number(params?.page || 1)
+  const pageSize = Number(params?.page_size || params?.pageSize || 20)
+  const kw = String(params?.keyword || params?.q || '').trim()
+  let rows = list
+  if (kw) rows = rows.filter((r) => `${r.name}${r.area_code}`.includes(kw))
+  const start = (page - 1) * pageSize
+  return ok({
+    list: rows.slice(start, start + pageSize),
+    total: rows.length,
+    page,
+    page_size: pageSize,
+  })
+}
+
+export const getCompetition = async (id: number) => {
+  const row = ensureDemoCompetitions().find((r) => r.id === Number(id))
+  return ok(row || { id, name: `比赛 ${id}`, status: 1 })
+}
+
+export const listBadgeTemplates = async (competitionId: number) => {
+  const rows = listStore('badge').filter((r) => r.competition_id === Number(competitionId))
+  return ok({ list: rows })
+}
+
+export const createBadgeTemplate = async (competitionId: number, data: { name: string }) => {
+  const rows = listStore('badge')
+  const id = nextId(rows)
+  const row: BadgeTemplateRow = {
+    id,
+    competition_id: Number(competitionId),
+    name: data.name || '未命名模板',
+    width_mm: 90,
+    height_mm: 54,
+    is_default: rows.filter((r) => r.competition_id === Number(competitionId)).length === 0,
+    update_time: nowText(),
+    doc: emptyDoc(data.name || '未命名模板'),
+    kind: 'badge',
+  }
+  rows.push(row)
+  saveStore('badge', rows)
+  return ok(row)
+}
+
+export const getBadgeTemplateOne = async (competitionId: number, templateId: number) => {
+  const row = listStore('badge').find(
+    (r) => r.id === Number(templateId) && r.competition_id === Number(competitionId)
+  )
+  if (!row) return ok(null)
+  return ok({
+    ...row,
+    template_json: row.doc || emptyDoc(row.name, row.width_mm, row.height_mm),
+    doc: row.doc || emptyDoc(row.name, row.width_mm, row.height_mm),
+    default_test_json: row.default_test_json || {},
+  })
+}
+
+export const getBadgeTemplate = async (competitionId: number) => {
+  const rows = listStore('badge').filter((r) => r.competition_id === Number(competitionId))
+  const row = rows.find((r) => r.is_default) || rows[0]
+  if (!row) return ok(null)
+  return getBadgeTemplateOne(competitionId, row.id)
+}
+
+export const putBadgeTemplateOne = async (
+  competitionId: number,
+  templateId: number,
+  data: Record<string, unknown>
+) => {
+  const rows = listStore('badge')
+  const idx = rows.findIndex(
+    (r) => r.id === Number(templateId) && r.competition_id === Number(competitionId)
+  )
+  if (idx < 0) return ok(null)
+  const doc = (data.doc || data.template_json || data.template || rows[idx].doc) as BadgeTemplateDoc
+  const name = String(data.name || rows[idx].name)
+  const width = Number((doc as any)?.canvas?.widthMm || data.width_mm || rows[idx].width_mm)
+  const height = Number((doc as any)?.canvas?.heightMm || data.height_mm || rows[idx].height_mm)
+  rows[idx] = {
+    ...rows[idx],
+    name,
+    width_mm: width,
+    height_mm: height,
+    doc,
+    default_test_json: (data.default_test_json as Record<string, unknown>) ?? rows[idx].default_test_json ?? {},
+    update_time: nowText(),
+  }
+  saveStore('badge', rows)
+  return ok(rows[idx])
+}
+
+export const deleteBadgeTemplate = async (competitionId: number, templateId: number) => {
+  const rows = listStore('badge').filter(
+    (r) => !(r.id === Number(templateId) && r.competition_id === Number(competitionId))
+  )
+  saveStore('badge', rows)
+  return ok(true)
+}
+
+export const setDefaultBadgeTemplate = async (competitionId: number, templateId: number) => {
+  const rows = listStore('badge').map((r) =>
+    r.competition_id === Number(competitionId)
+      ? { ...r, is_default: r.id === Number(templateId) }
+      : r
+  )
+  saveStore('badge', rows)
+  return ok(true)
+}
+
+/** desk label templates */
+export const listDeskLabelTemplates = async (competitionId: number) => {
+  const rows = listStore('desk').filter((r) => r.competition_id === Number(competitionId))
+  return ok({ list: rows })
+}
+
+export const createDeskLabelTemplate = async (competitionId: number, data: { name: string }) => {
+  const rows = listStore('desk')
+  const id = nextId(rows)
+  const row: BadgeTemplateRow = {
+    id,
+    competition_id: Number(competitionId),
+    name: data.name || '未命名桌签',
+    width_mm: 150,
+    height_mm: 50,
+    is_default: rows.filter((r) => r.competition_id === Number(competitionId)).length === 0,
+    update_time: nowText(),
+    doc: emptyDoc(data.name || '未命名桌签', 150, 50),
+    kind: 'desk',
+  }
+  rows.push(row)
+  saveStore('desk', rows)
+  return ok(row)
+}
+
+export const getDeskLabelTemplateOne = async (competitionId: number, templateId: number) => {
+  const row = listStore('desk').find(
+    (r) => r.id === Number(templateId) && r.competition_id === Number(competitionId)
+  )
+  if (!row) return ok(null)
+  return ok({
+    ...row,
+    template_json: row.doc || emptyDoc(row.name, row.width_mm, row.height_mm),
+    doc: row.doc || emptyDoc(row.name, row.width_mm, row.height_mm),
+    default_test_json: row.default_test_json || {},
+  })
+}
+
+export const getDeskLabelTemplate = async (competitionId: number) => {
+  const rows = listStore('desk').filter((r) => r.competition_id === Number(competitionId))
+  const row = rows.find((r) => r.is_default) || rows[0]
+  if (!row) return ok(null)
+  return getDeskLabelTemplateOne(competitionId, row.id)
+}
+
+export const putDeskLabelTemplateOne = async (
+  competitionId: number,
+  templateId: number,
+  data: Record<string, unknown>
+) => {
+  const rows = listStore('desk')
+  const idx = rows.findIndex(
+    (r) => r.id === Number(templateId) && r.competition_id === Number(competitionId)
+  )
+  if (idx < 0) return ok(null)
+  const doc = (data.doc || data.template_json || data.template || rows[idx].doc) as BadgeTemplateDoc
+  const name = String(data.name || rows[idx].name)
+  const width = Number((doc as any)?.canvas?.widthMm || data.width_mm || rows[idx].width_mm)
+  const height = Number((doc as any)?.canvas?.heightMm || data.height_mm || rows[idx].height_mm)
+  rows[idx] = {
+    ...rows[idx],
+    name,
+    width_mm: width,
+    height_mm: height,
+    doc,
+    default_test_json: (data.default_test_json as Record<string, unknown>) ?? rows[idx].default_test_json ?? {},
+    update_time: nowText(),
+  }
+  saveStore('desk', rows)
+  return ok(rows[idx])
+}
+
+export const deleteDeskLabelTemplate = async (competitionId: number, templateId: number) => {
+  const rows = listStore('desk').filter(
+    (r) => !(r.id === Number(templateId) && r.competition_id === Number(competitionId))
+  )
+  saveStore('desk', rows)
+  return ok(true)
+}
+
+export const setDefaultDeskLabelTemplate = async (competitionId: number, templateId: number) => {
+  const rows = listStore('desk').map((r) =>
+    r.competition_id === Number(competitionId)
+      ? { ...r, is_default: r.id === Number(templateId) }
+      : r
+  )
+  saveStore('desk', rows)
+  return ok(true)
+}
+
+/** —— upload / library —— */
+export const getBadgeLibraryImages = async (params?: { page?: number; page_size?: number }) => {
+  const list = readJson<BadgeLibraryImage[]>(LS_LIBRARY, [])
+  const page = Number(params?.page || 1)
+  const pageSize = Number(params?.page_size || 40)
+  const start = (page - 1) * pageSize
+  return ok({ list: list.slice(start, start + pageSize), total: list.length, page, page_size: pageSize })
+}
+
+export const uploadBadgeLibraryImage = async (file: File) => {
+  const url = await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result || ''))
+    reader.onerror = () => reject(new Error('read failed'))
+    reader.readAsDataURL(file)
+  })
+  const list = readJson<BadgeLibraryImage[]>(LS_LIBRARY, [])
+  const id = list.reduce((m, r) => Math.max(m, r.id), 0) + 1
+  const row: BadgeLibraryImage = {
+    id,
+    url,
+    name: file.name,
+    create_time: nowText(),
+  }
+  list.unshift(row)
+  writeJson(LS_LIBRARY, list)
+  return ok(row)
+}
+
+export const deleteBadgeLibraryImage = async (id: number) => {
+  const list = readJson<BadgeLibraryImage[]>(LS_LIBRARY, []).filter((r) => r.id !== Number(id))
+  writeJson(LS_LIBRARY, list)
+  return ok(true)
+}
+
+/** —— student / print data stubs —— */
+export const getBadgeSchools = async (_competitionId: number) =>
+  ok([
+    { id: 1, name: '演示学校一', short_name: '校一' },
+    { id: 2, name: '演示学校二', short_name: '校二' },
+  ])
+
+export const getBadges = async (_competitionId: number, _params?: any) =>
+  ok({
+    list: [
+      {
+        id: 1,
+        student_name: '张三',
+        competition_no: 'A001',
+        school_name: '演示学校一',
+        age_group: '小学组',
+        competition_room: '101',
+        seat_no: '01',
+      },
+      {
+        id: 2,
+        student_name: '李四',
+        competition_no: 'A002',
+        school_name: '演示学校一',
+        age_group: '小学组',
+        competition_room: '101',
+        seat_no: '02',
+      },
+    ],
+    total: 2,
+  })
+
+export const getBadgesExportData = async (competitionId: number, params?: any) =>
+  getBadges(competitionId, params)
+
+export const getStudents = async (_competitionId: number, _params?: any) =>
+  ok({ list: [], total: 0 })
+
+export const finalizeSeatAssignmentLock = async (_competitionId: number, _data?: any) => ok(true)
+
+export const getDeskLabels = async (_competitionId: number) =>
+  ok([
+    {
+      id: 1,
+      competition_room: '101',
+      seat_no: '01',
+      student_name: '张三',
+      school_name: '演示学校一',
+    },
+  ])

package/components/QiuBadge/components/BadgeImagePickerDialog.vue

@@ -0,0 +1,243 @@
+<template>
+  <qiu-dialog
+    v-model="visibleInner"
+    title="添加图片"
+    width="720px"
+    destroy-on-close
+    class="badge-img-picker-dlg"
+    @opened="load"
+  >
+    <qiu-tab-bar v-model="tab">
+      <qiu-tab-pane label="图片库" name="lib">
+        <p class="dlg-hint">双击缩略图插入到画布；删除后模板里若仍引用该地址将无法显示。</p>
+        <div v-qiu-loading="loading" class="lib-grid">
+          <div
+            v-for="it in list"
+            :key="it.id"
+            class="lib-cell"
+            @dblclick="pick(it)"
+          >
+            <img :src="fullUrl(it.url)" alt="" class="thumb" loading="lazy" />
+            <div class="meta" :title="it.orig_name">{{ it.orig_name || '未命名' }}</div>
+            <qiu-button type="danger" link size="small" class="del" @click.stop="remove(it)">删除</qiu-button>
+          </div>
+        </div>
+        <qiu-empty v-if="!loading && !list.length" description="暂无图片，可到「上传本地文件」添加" />
+      </qiu-tab-pane>
+      <qiu-tab-pane label="上传本地文件" name="up">
+        <p class="dlg-hint">上传后会写入图片库，并自动插入当前画布；可多选文件或一次拖拽多张。</p>
+        <div
+          class="upload-drop"
+          @dragover.prevent
+          @drop.prevent="onDrop"
+          @click="fileInputRef?.click()"
+        >
+          <qiu-icon icon="upload-cloud-2-line" class="upload-ico" />
+          <div class="upload-text">拖到此处，或 <em>点击选择多个文件</em></div>
+          <div class="upload-sub">支持 JPG / PNG / GIF / WebP / BMP，单文件不超过 8MB</div>
+          <input
+            ref="fileInputRef"
+            type="file"
+            multiple
+            accept="image/jpeg,image/png,image/gif,image/webp,image/bmp"
+            class="upload-input"
+            @change="onFileInput"
+          />
+        </div>
+      </qiu-tab-pane>
+    </qiu-tab-bar>
+
+    <qiu-dialog v-model="deleteConfirmVisible" title="删除确认" width="400px" append-to-body>
+      <p>确定删除「{{ deleteTarget?.orig_name || '该图片' }}」？</p>
+      <template #footer>
+        <qiu-button @click="deleteConfirmVisible = false">取消</qiu-button>
+        <qiu-button type="danger" @click="doRemove">删除</qiu-button>
+      </template>
+    </qiu-dialog>
+  </qiu-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { qiuMsg } from '../../QiuMsg'
+import { getBadgeLibraryImages, uploadBadgeLibraryImage, deleteBadgeLibraryImage } from '../api/index'
+import { resolveAssetUrl } from '../shared/assetUrl'
+
+const props = withDefaults(
+  defineProps<{ modelValue: boolean; defaultTab?: 'lib' | 'up' }>(),
+  { defaultTab: 'lib' }
+)
+const emit = defineEmits<{ 'update:modelValue': [boolean]; pick: [string] }>()
+
+const visibleInner = computed({
+  get: () => props.modelValue,
+  set: (v: boolean) => emit('update:modelValue', v),
+})
+
+const tab = ref('lib')
+const loading = ref(false)
+const list = ref<any[]>([])
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const deleteConfirmVisible = ref(false)
+const deleteTarget = ref<{ id: number; orig_name?: string } | null>(null)
+
+function fullUrl(path: string) {
+  return resolveAssetUrl(path)
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const res: any = await getBadgeLibraryImages({ page: 1, page_size: 120 })
+    list.value = res.data?.list ?? []
+  } catch {
+    list.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (v) tab.value = props.defaultTab
+  }
+)
+
+function pick(it: { url: string }) {
+  if (!it?.url) return
+  emit('pick', resolveAssetUrl(it.url))
+  visibleInner.value = false
+}
+
+function remove(it: { id: number; orig_name?: string }) {
+  deleteTarget.value = it
+  deleteConfirmVisible.value = true
+}
+
+async function doRemove() {
+  const it = deleteTarget.value
+  if (!it) return
+  deleteConfirmVisible.value = false
+  try {
+    await deleteBadgeLibraryImage(Number(it.id))
+    qiuMsg.success('已删除')
+    await load()
+  } catch {
+    /* 拦截器 */
+  }
+}
+
+const MAX_BADGE_UPLOAD_MB = 8
+
+async function uploadFiles(files: FileList | File[]) {
+  for (const file of Array.from(files)) {
+    const mb = file.size / (1024 * 1024)
+    if (mb > MAX_BADGE_UPLOAD_MB) {
+      qiuMsg.error(`「${file.name}」超过 ${MAX_BADGE_UPLOAD_MB}MB，已跳过`)
+      continue
+    }
+    try {
+      const res: any = await uploadBadgeLibraryImage(file)
+      const url = res?.data?.url
+      if (!url) {
+        qiuMsg.error(`「${file.name}」上传失败`)
+        continue
+      }
+      emit('pick', resolveAssetUrl(url))
+      await load()
+    } catch {
+      /* 拦截器已提示 */
+    }
+  }
+}
+
+function onFileInput(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (input.files?.length) uploadFiles(input.files)
+  input.value = ''
+}
+
+function onDrop(e: DragEvent) {
+  if (e.dataTransfer?.files?.length) uploadFiles(e.dataTransfer.files)
+}
+</script>
+
+<style scoped>
+.dlg-hint {
+  font-size: 13px;
+  color: #909399;
+  margin: 0 0 12px;
+  line-height: 1.5;
+}
+.lib-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 12px;
+  max-height: 420px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.lib-cell {
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  position: relative;
+}
+.lib-cell:hover {
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+}
+.thumb {
+  width: 100%;
+  height: 100px;
+  object-fit: contain;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+.meta {
+  font-size: 11px;
+  color: #606266;
+  margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.del {
+  margin-top: 4px;
+}
+.upload-drop {
+  padding: 40px 20px;
+  text-align: center;
+  cursor: pointer;
+  border: 1px dashed #dcdfe6;
+  border-radius: 8px;
+  background: #fafafa;
+}
+.upload-drop:hover {
+  border-color: #409eff;
+}
+.upload-input {
+  display: none;
+}
+.upload-ico {
+  font-size: 48px;
+  color: #c0c4cc;
+  margin-bottom: 8px;
+}
+.upload-text {
+  font-size: 14px;
+  color: #606266;
+}
+.upload-text em {
+  color: #409eff;
+  font-style: normal;
+}
+.upload-sub {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 8px;
+}
+</style>

package/components/QiuBadge/components/BadgeLibraryManagerDialog.vue

@@ -0,0 +1,30 @@
+<template>
+  <qiu-dialog
+    :model-value="modelValue"
+    title="证件图片库"
+    width="min(920px, 94vw)"
+    class="badge-library-manager-dialog"
+    append-to-body
+    destroy-on-close
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <p class="dlg-tip">管理模板编辑中上传的图片；删除后已保存模板里若仍引用该地址将无法显示。</p>
+    <BadgeLibraryPanel v-if="modelValue" />
+  </qiu-dialog>
+</template>
+
+<script setup lang="ts">
+import BadgeLibraryPanel from './BadgeLibraryPanel.vue'
+
+defineProps<{ modelValue: boolean }>()
+defineEmits<{ 'update:modelValue': [boolean] }>()
+</script>
+
+<style scoped>
+.dlg-tip {
+  margin: 0 0 14px;
+  font-size: 13px;
+  color: #909399;
+  line-height: 1.5;
+}
+</style>