feat(competition): 新增比赛活动管理功能模块

实现比赛活动的创建、编辑、详情查看功能,包括基础信息配置、分组管理、题库配置和硬件绑定
添加比赛列表页面的路由跳转逻辑,优化卡片点击交互
完善比赛详情页的编辑状态管理,支持基础信息和题包配置的修改
新增本地SVG图标资源,更新系统Logo组件样式
This commit is contained in:
2026-01-19 18:03:45 +08:00
parent 77315b36ed
commit d13077a3f1
24 changed files with 971 additions and 200 deletions

View File

@ -0,0 +1,80 @@
<script setup lang="ts">
import { NCard, NDatePicker, NGrid, NGridItem, NInput, NInputNumber } from 'naive-ui'
import { reactive } from 'vue'
defineProps<{ isEdit: boolean }>()
const form = reactive({
name: '第九届阅读之星大赛',
dateRange: null,
total: 40,
teamPerGroup: 4,
promoteCount: 4,
})
</script>
<template>
<NCard :bordered="false" class="rounded-xl shadow-sm">
<div class="mb-6 flex items-center gap-3 border-l-4 border-blue-600 pl-3">
<span class="text-lg text-gray-800 font-bold">基础信息</span>
</div>
<NGrid :x-gap="24" :cols="4" class="py-2">
<!-- 赛事名称 -->
<NGridItem>
<div class="mb-2 text-xs text-gray-400 font-medium">
赛事名称
</div>
<NInput v-if="isEdit" v-model:value="form.name" placeholder="输入名称" />
<div v-else class="text-base text-gray-800 font-bold">
{{ form.name }}
</div>
</NGridItem>
<!-- 起止时间 -->
<NGridItem>
<div class="mb-2 text-xs text-gray-400 font-medium">
起止时间
</div>
<NDatePicker v-if="isEdit" v-model:value="form.dateRange" type="daterange" clearable />
<div v-else class="flex items-center gap-2 text-sm text-gray-700 font-medium">
<div class="i-carbon-calendar text-gray-400" />
<span>2026-06-01</span>
<span class="text-gray-300">/</span>
<span>2026-06-05</span>
</div>
</NGridItem>
<!-- 参赛总人数 -->
<NGridItem>
<div class="mb-2 text-xs text-gray-400 font-medium">
参赛总人数
</div>
<NInputNumber v-if="isEdit" v-model:value="form.total" :show-button="false">
<template #suffix>
</template>
</NInputNumber>
<div v-else class="inline-flex items-center rounded bg-blue-100 px-2.5 py-0.5 text-sm text-blue-700 font-bold">
{{ form.total }}
</div>
</NGridItem>
<!-- 分组配额 -->
<NGridItem>
<div class="mb-2 text-xs text-gray-400 font-medium">
分组配额
</div>
<div v-if="isEdit" class="flex gap-2">
<NInputNumber v-model:value="form.teamPerGroup" size="small" placeholder="单组" :show-button="false" />
<NInputNumber v-model:value="form.promoteCount" size="small" placeholder="晋级" :show-button="false" />
</div>
<div v-else class="flex items-center gap-3 text-sm text-gray-700">
<span>单组: <strong>{{ form.teamPerGroup }}</strong></span>
<span class="h-3 w-[1px] bg-gray-300" />
<span>晋级: <strong>{{ form.promoteCount }}</strong></span>
</div>
</NGridItem>
</NGrid>
</NCard>
</template>