feat(competition): 新增比赛活动管理功能模块
实现比赛活动的创建、编辑、详情查看功能,包括基础信息配置、分组管理、题库配置和硬件绑定 添加比赛列表页面的路由跳转逻辑,优化卡片点击交互 完善比赛详情页的编辑状态管理,支持基础信息和题包配置的修改 新增本地SVG图标资源,更新系统Logo组件样式
This commit is contained in:
@ -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>
|
||||
Reference in New Issue
Block a user