foucui 1.0.1

package/components/QiuBadge/views/BadgeTemplateEditorView.vue

@@ -0,0 +1,10 @@
+<script lang="ts">
+/**
+ * 兼容旧入口：证件模板编辑器 = QiuCanvasEditor
+ * @author qiuye
+ * @email yjk150@qq.com
+ * @date 2026-08-17
+ */
+import QiuCanvasEditor from '../../QiuCanvasKit/QiuCanvasEditor.vue'
+export default QiuCanvasEditor
+</script>

package/components/QiuBadge/views/BadgeTemplateListView.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="page-container badge-tpl-list">
+    <div class="badge-tpl-header page-header">
+      <qiu-button link @click="$router.back()">
+        <qiu-icon icon="arrow-left-line" />
+        证件模板
+      </qiu-button>
+    </div>
+
+    <qiu-card v-qiu-loading="loading" class="main-card table-card table-fill-card" shadow="never">
+      <template #header>
+        <div class="card-hdr">
+          <div>
+            <div class="card-title">模板列表</div>
+            <div v-if="competitionTitle" class="card-sub">{{ competitionTitle }}</div>
+          </div>
+          <qiu-button type="primary" @click="openCreate">新建模板</qiu-button>
+        </div>
+      </template>
+
+      <div ref="hostRef" class="table-host">
+        <qiu-table :data="list" border stripe :height="tableHeight">
+          <qiu-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip />
+          <qiu-table-column label="默认套打" width="100" align="center">
+            <template #default="{ row }">
+              <qiu-tag v-if="row.is_default" type="success" size="small">默认</qiu-tag>
+              <span v-else class="muted">—</span>
+            </template>
+          </qiu-table-column>
+          <qiu-table-column prop="width_mm" label="宽 mm" width="90" />
+          <qiu-table-column prop="height_mm" label="高 mm" width="90" />
+          <qiu-table-column prop="update_time" label="更新时间" width="180" />
+          <qiu-table-column label="操作" width="280" fixed="right">
+            <template #default="{ row }">
+              <qiu-button link type="primary" @click="goEdit(row.id)">编辑</qiu-button>
+              <qiu-button v-if="!row.is_default" link type="primary" @click="setDefault(row.id)">设为默认</qiu-button>
+              <qiu-button link type="danger" @click="confirmRemove(row)">删除</qiu-button>
+            </template>
+          </qiu-table-column>
+        </qiu-table>
+      </div>
+    </qiu-card>
+
+    <qiu-dialog v-model="createVisible" title="新建证件模板" width="440px" destroy-on-close @closed="createName = ''">
+      <qiu-form label-width="88px">
+        <qiu-form-item label="模板名称" required>
+          <qiu-input
+            v-model="createName"
+            placeholder="保存后将进入空白画布开始编排"
+            maxlength="120"
+            show-word-limit
+            @keyup.enter="submitCreate"
+          />
+        </qiu-form-item>
+      </qiu-form>
+      <template #footer>
+        <qiu-button @click="createVisible = false">取消</qiu-button>
+        <qiu-button type="primary" :loading="creating" @click="submitCreate">保存并制作</qiu-button>
+      </template>
+    </qiu-dialog>
+
+    <qiu-dialog v-model="deleteConfirmVisible" title="删除确认" width="400px">
+      <p>确定删除模板「{{ deleteTarget?.name || '未命名' }}」吗？</p>
+      <template #footer>
+        <qiu-button @click="deleteConfirmVisible = false">取消</qiu-button>
+        <qiu-button type="danger" @click="doRemove">删除</qiu-button>
+      </template>
+    </qiu-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onActivated, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { qiuMsg } from '../../QiuMsg'
+import {
+  getCompetition,
+  listBadgeTemplates,
+  createBadgeTemplate,
+  deleteBadgeTemplate,
+  setDefaultBadgeTemplate,
+} from '../api/index'
+import { useTableHostHeight } from '../composables/useTableHostHeight'
+
+const { hostRef, tableHeight, recalcTableHeight } = useTableHostHeight(200)
+
+const route = useRoute()
+const router = useRouter()
+const competitionId = Number(route.params.id)
+
+const loading = ref(false)
+const creating = ref(false)
+const list = ref<any[]>([])
+const competitionTitle = ref('')
+const createVisible = ref(false)
+const createName = ref('')
+const deleteConfirmVisible = ref(false)
+const deleteTarget = ref<{ id: number; name: string } | null>(null)
+
+async function loadCompetition() {
+  try {
+    const res: any = await getCompetition(competitionId)
+    competitionTitle.value = res.data?.name || res.data?.title || ''
+  } catch {
+    competitionTitle.value = ''
+  }
+}
+
+async function loadList() {
+  loading.value = true
+  try {
+    const res: any = await listBadgeTemplates(competitionId)
+    list.value = res.data?.list || []
+  } catch {
+    list.value = []
+    qiuMsg.error('加载模板列表失败')
+  } finally {
+    loading.value = false
+    nextTick(() => recalcTableHeight())
+  }
+}
+
+function openCreate() {
+  createName.value = ''
+  createVisible.value = true
+}
+
+async function submitCreate() {
+  const name = createName.value.trim()
+  if (!name) {
+    qiuMsg.warning('请填写模板名称')
+    return
+  }
+  creating.value = true
+  try {
+    const res: any = await createBadgeTemplate(competitionId, { name })
+    const id = res.data?.id
+    createVisible.value = false
+    qiuMsg.success('已创建')
+    if (id) {
+      router.push(`/qiuui/badge/competition/${competitionId}/badge-template/${id}`)
+    } else {
+      await loadList()
+    }
+  } catch (e: any) {
+    qiuMsg.error(e?.response?.data?.message || '创建失败')
+  } finally {
+    creating.value = false
+  }
+}
+
+function goEdit(templateId: number) {
+  router.push(`/qiuui/badge/competition/${competitionId}/badge-template/${templateId}`)
+}
+
+async function setDefault(templateId: number) {
+  try {
+    await setDefaultBadgeTemplate(competitionId, templateId)
+    qiuMsg.success('已设为默认套打模板')
+    await loadList()
+  } catch (e: any) {
+    qiuMsg.error(e?.response?.data?.message || '操作失败')
+  }
+}
+
+function confirmRemove(row: { id: number; name: string }) {
+  deleteTarget.value = row
+  deleteConfirmVisible.value = true
+}
+
+async function doRemove() {
+  const row = deleteTarget.value
+  if (!row) return
+  deleteConfirmVisible.value = false
+  try {
+    await deleteBadgeTemplate(competitionId, row.id)
+    qiuMsg.success('已删除')
+    await loadList()
+  } catch (e: any) {
+    qiuMsg.error(e?.response?.data?.message || '删除失败')
+  }
+}
+
+onMounted(async () => {
+  if (!Number.isFinite(competitionId) || competitionId <= 0) {
+    qiuMsg.error('无效的比赛 ID')
+    return
+  }
+  await loadCompetition()
+  await loadList()
+  nextTick(() => recalcTableHeight())
+})
+onActivated(() => nextTick(() => recalcTableHeight()))
+</script>
+
+<style scoped>
+.badge-tpl-header {
+  flex-shrink: 0;
+}
+.badge-tpl-list .main-card {
+  margin-top: 16px;
+  flex: 1;
+  min-height: 0;
+}
+.card-hdr {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+.card-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: #303133;
+}
+.card-sub {
+  font-size: 13px;
+  color: #909399;
+  margin-top: 4px;
+}
+.muted {
+  color: #c0c4cc;
+  font-size: 13px;
+}
+.page-header {
+  display: flex;
+  align-items: center;
+}
+</style>

package/components/QiuBadge/views/DeskLabelTemplateListView.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="page-container desk-tpl-list">
+    <div class="desk-tpl-header page-header">
+      <qiu-button link @click="$router.back()">
+        <qiu-icon icon="arrow-left-line" />
+        桌面贴模板
+      </qiu-button>
+    </div>
+
+    <qiu-card v-qiu-loading="loading" class="main-card table-card table-fill-card" shadow="never">
+      <template #header>
+        <div class="card-hdr">
+          <div>
+            <div class="card-title">模板列表</div>
+            <div v-if="competitionTitle" class="card-sub">{{ competitionTitle }}</div>
+          </div>
+          <qiu-button type="primary" @click="openCreate">新建模板</qiu-button>
+        </div>
+      </template>
+
+      <div ref="hostRef" class="table-host">
+        <qiu-table :data="list" border stripe :height="tableHeight">
+          <qiu-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip />
+          <qiu-table-column label="默认" width="100" align="center">
+            <template #default="{ row }">
+              <qiu-tag v-if="row.is_default" type="success" size="small">默认</qiu-tag>
+              <span v-else class="muted">—</span>
+            </template>
+          </qiu-table-column>
+          <qiu-table-column prop="width_mm" label="宽 mm" width="90" />
+          <qiu-table-column prop="height_mm" label="高 mm" width="90" />
+          <qiu-table-column prop="update_time" label="更新时间" width="180" />
+          <qiu-table-column label="操作" width="280" fixed="right">
+            <template #default="{ row }">
+              <qiu-button link type="primary" @click="goEdit(row.id)">编辑</qiu-button>
+              <qiu-button v-if="!row.is_default" link type="primary" @click="setDefault(row.id)">设为默认</qiu-button>
+              <qiu-button link type="danger" @click="confirmRemove(row)">删除</qiu-button>
+            </template>
+          </qiu-table-column>
+        </qiu-table>
+      </div>
+    </qiu-card>
+
+    <qiu-dialog v-model="createVisible" title="新建桌面贴模板" width="440px" destroy-on-close @closed="createName = ''">
+      <qiu-form label-width="88px">
+        <qiu-form-item label="模板名称" required>
+          <qiu-input
+            v-model="createName"
+            placeholder="保存后将进入空白画布开始编排"
+            maxlength="120"
+            show-word-limit
+            @keyup.enter="submitCreate"
+          />
+        </qiu-form-item>
+      </qiu-form>
+      <template #footer>
+        <qiu-button @click="createVisible = false">取消</qiu-button>
+        <qiu-button type="primary" :loading="creating" @click="submitCreate">保存并制作</qiu-button>
+      </template>
+    </qiu-dialog>
+
+    <qiu-dialog v-model="deleteConfirmVisible" title="删除确认" width="400px">
+      <p>确定删除模板「{{ deleteTarget?.name || '未命名' }}」吗？</p>
+      <template #footer>
+        <qiu-button @click="deleteConfirmVisible = false">取消</qiu-button>
+        <qiu-button type="danger" @click="doRemove">删除</qiu-button>
+      </template>
+    </qiu-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onActivated, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { qiuMsg } from '../../QiuMsg'
+import {
+  getCompetition,
+  listDeskLabelTemplates,
+  createDeskLabelTemplate,
+  deleteDeskLabelTemplate,
+  setDefaultDeskLabelTemplate,
+} from '../api/index'
+import { useTableHostHeight } from '../composables/useTableHostHeight'
+
+const { hostRef, tableHeight, recalcTableHeight } = useTableHostHeight(200)
+
+const route = useRoute()
+const router = useRouter()
+const competitionId = Number(route.params.id)
+
+const loading = ref(false)
+const creating = ref(false)
+const list = ref<any[]>([])
+const competitionTitle = ref('')
+const createVisible = ref(false)
+const createName = ref('')
+const deleteConfirmVisible = ref(false)
+const deleteTarget = ref<{ id: number; name: string } | null>(null)
+
+async function loadCompetition() {
+  try {
+    const res: any = await getCompetition(competitionId)
+    competitionTitle.value = res.data?.name || res.data?.title || ''
+  } catch {
+    competitionTitle.value = ''
+  }
+}
+
+async function loadList() {
+  loading.value = true
+  try {
+    const res: any = await listDeskLabelTemplates(competitionId)
+    list.value = res.data?.list || []
+  } catch {
+    list.value = []
+    qiuMsg.error('加载模板列表失败')
+  } finally {
+    loading.value = false
+    nextTick(() => recalcTableHeight())
+  }
+}
+
+function openCreate() {
+  createName.value = ''
+  createVisible.value = true
+}
+
+async function submitCreate() {
+  const name = createName.value.trim()
+  if (!name) {
+    qiuMsg.warning('请填写模板名称')
+    return
+  }
+  creating.value = true
+  try {
+    const res: any = await createDeskLabelTemplate(competitionId, { name })
+    const id = res.data?.id
+    createVisible.value = false
+    qiuMsg.success('已创建')
+    if (id) {
+      router.push(`/qiuui/badge/competition/${competitionId}/desk-label-template/${id}`)
+    } else {
+      await loadList()
+    }
+  } catch (e: any) {
+    qiuMsg.error(e?.response?.data?.msg || e?.response?.data?.message || '创建失败')
+  } finally {
+    creating.value = false
+  }
+}
+
+function goEdit(templateId: number) {
+  router.push(`/qiuui/badge/competition/${competitionId}/desk-label-template/${templateId}`)
+}
+
+async function setDefault(templateId: number) {
+  try {
+    await setDefaultDeskLabelTemplate(competitionId, templateId)
+    qiuMsg.success('已设为默认模板')
+    await loadList()
+  } catch (e: any) {
+    qiuMsg.error(e?.response?.data?.msg || e?.response?.data?.message || '操作失败')
+  }
+}
+
+function confirmRemove(row: { id: number; name: string }) {
+  deleteTarget.value = row
+  deleteConfirmVisible.value = true
+}
+
+async function doRemove() {
+  const row = deleteTarget.value
+  if (!row) return
+  deleteConfirmVisible.value = false
+  try {
+    await deleteDeskLabelTemplate(competitionId, row.id)
+    qiuMsg.success('已删除')
+    await loadList()
+  } catch (e: any) {
+    qiuMsg.error(e?.response?.data?.msg || e?.response?.data?.message || '删除失败')
+  }
+}
+
+onMounted(async () => {
+  if (!Number.isFinite(competitionId) || competitionId <= 0) {
+    qiuMsg.error('无效的比赛 ID')
+    return
+  }
+  await loadCompetition()
+  await loadList()
+  nextTick(() => recalcTableHeight())
+})
+onActivated(() => nextTick(() => recalcTableHeight()))
+</script>
+
+<style scoped>
+.desk-tpl-header {
+  flex-shrink: 0;
+}
+.desk-tpl-list .main-card {
+  margin-top: 16px;
+  flex: 1;
+  min-height: 0;
+}
+.card-hdr {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+.card-sub {
+  margin-top: 4px;
+  font-size: 13px;
+  color: #909399;
+}
+.muted {
+  color: #c0c4cc;
+}
+.page-header {
+  display: flex;
+  align-items: center;
+}
+</style>