feat(competition): 新增比赛活动管理功能模块
实现比赛活动的创建、编辑、详情查看功能，包括基础信息配置、分组管理、题库配置和硬件绑定 添加比赛列表页面的路由跳转逻辑，优化卡片点击交互 完善比赛详情页的编辑状态管理，支持基础信息和题包配置的修改 新增本地SVG图标资源，更新系统Logo组件样式
This commit is contained in:
@ -1,19 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NSpace } from 'naive-ui'
|
||||
import { NButton, NCard, NTabPane, NTabs } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import BasicInfo from './modules/BasicInfo.vue'
|
||||
import GroupManagement from './modules/GroupManagement.vue'
|
||||
import HardwareBinding from './modules/HardwareBinding.vue'
|
||||
import QuestionConfig from './modules/QuestionConfig.vue'
|
||||
|
||||
const activeTab = ref('group')
|
||||
const { routerBack } = useRouterPush()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="competition-add">
|
||||
<NSpace vertical>
|
||||
<NButton type="primary">
|
||||
Add Competition
|
||||
</NButton>
|
||||
</NSpace>
|
||||
<div class="margin-[10px auto] h-full w-100% flex flex-col gap-4 overflow-y-auto p-4">
|
||||
<!-- 顶部 Header区域 -->
|
||||
<NCard :bordered="false" class="rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- 返回比赛列表 -->
|
||||
|
||||
<NButton circle secondary @click="routerBack">
|
||||
<template #icon>
|
||||
<icon-ic-baseline-arrow-back class="text-icon" />
|
||||
</template>
|
||||
</NButton>
|
||||
<div>
|
||||
<h2 class="m-0 text-xl font-bold">
|
||||
比赛配置编辑
|
||||
</h2>
|
||||
<p class="m-0 text-xs text-gray-400">
|
||||
正在编辑：阅读之星年度总决赛
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<NButton>存为草稿</NButton>
|
||||
<NButton type="primary">
|
||||
发布比赛
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<!-- 基础信息组件 -->
|
||||
<BasicInfo />
|
||||
|
||||
<!-- Tab 切换区域 -->
|
||||
<NCard :bordered="false" class="flex-1 rounded-xl shadow-sm">
|
||||
<NTabs v-model:value="activeTab" type="line" animated>
|
||||
<NTabPane name="group" tab="分组信息管理">
|
||||
<GroupManagement />
|
||||
</NTabPane>
|
||||
<NTabPane name="hardware" tab="智能笔硬件绑定">
|
||||
<HardwareBinding />
|
||||
</NTabPane>
|
||||
<NTabPane name="question" tab="题库与分值配置">
|
||||
<QuestionConfig />
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
</NCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.competition-add {
|
||||
padding: 20px;
|
||||
<style scoped>
|
||||
:deep(.n-tabs-nav) {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { NCard, NDatePicker, NForm, NFormItemGi, NGrid, NInput, NInputNumber } from 'naive-ui'
|
||||
import { reactive, useTemplateRef } from 'vue'
|
||||
|
||||
const formRef = useTemplateRef('formRef')
|
||||
|
||||
const formData = reactive({
|
||||
name: '阅读之星年度总决赛',
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
groupCount: 40,
|
||||
teamCount: 4,
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
formRef,
|
||||
formData,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" class="rounded-xl shadow-sm">
|
||||
<div class="mb-4 flex items-center gap-2 border-l-4 border-blue-600 pl-3">
|
||||
<span class="text-base font-bold">基础活动信息</span>
|
||||
</div>
|
||||
|
||||
<NForm ref="formRef" label-placement="top" :show-feedback="false">
|
||||
<NGrid :x-gap="24" :y-gap="24" cols="1 s:2 m:4 l:5" responsive="screen">
|
||||
<NFormItemGi span="1" label="比赛名称">
|
||||
<NInput v-model:value="formData.name" placeholder="请输入比赛名称" />
|
||||
</NFormItemGi>
|
||||
|
||||
<NFormItemGi label="开始时间">
|
||||
<NDatePicker
|
||||
v-model:value="formData.startTime" type="datetime" clearable class="w-full"
|
||||
placeholder="年 / 月 / 日 --:--"
|
||||
/>
|
||||
</NFormItemGi>
|
||||
|
||||
<NFormItemGi label="结束时间">
|
||||
<NDatePicker
|
||||
v-model:value="formData.endTime" type="datetime" clearable class="w-full"
|
||||
placeholder="年 / 月 / 日 --:--"
|
||||
/>
|
||||
</NFormItemGi>
|
||||
|
||||
<NFormItemGi label="小组总数">
|
||||
<NInputNumber v-model:value="formData.groupCount" class="w-full" />
|
||||
</NFormItemGi>
|
||||
|
||||
<NFormItemGi label="单组队伍">
|
||||
<NInputNumber v-model:value="formData.teamCount" class="w-full" />
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
</NForm>
|
||||
</NCard>
|
||||
</template>
|
||||
@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NGrid, NGridItem, NInput, NTag } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 模拟数据
|
||||
const groups = ref([
|
||||
{ name: '第一组 (精英赛区)', id: 'G01' },
|
||||
{ name: '第二组 (新锐赛区)', id: 'G02' },
|
||||
{ name: '第三组', id: 'G03' },
|
||||
{ name: '第四组', id: 'G04' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="py-4">
|
||||
<!-- 操作栏 -->
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div class="text-sm text-gray-400">
|
||||
提示：您可以通过Excel模版批量导入队伍名称
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<NButton secondary>
|
||||
<template #icon>
|
||||
<div class="i-carbon-document-import" />
|
||||
</template>
|
||||
Excel批量导入
|
||||
</NButton>
|
||||
<NButton type="primary" color="#1a202c">
|
||||
<template #icon>
|
||||
<div class="i-carbon-add" />
|
||||
</template>
|
||||
添加分组
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分组卡片列表 -->
|
||||
<NGrid :x-gap="24" :y-gap="24" cols="1 m:2" responsive="screen">
|
||||
<NGridItem v-for="(group, index) in groups" :key="index">
|
||||
<div class="border border-gray-100 rounded-xl bg-gray-50/50 p-5 transition-shadow hover:shadow-md">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<span class="text-blue-600 font-bold">{{ group.name }}</span>
|
||||
<NTag size="small" :bordered="false" class="bg-white text-gray-500">
|
||||
ID: {{ group.id }}
|
||||
</NTag>
|
||||
</div>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" :cols="2">
|
||||
<NGridItem v-for="i in 4" :key="i">
|
||||
<div class="mb-1 text-xs text-gray-400">
|
||||
NO.0{{ i }} 队名
|
||||
</div>
|
||||
<NInput placeholder="输入队伍名称" />
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
import { NGrid, NGridItem, NInput } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 模拟数据结构
|
||||
const hardwareGroups = ref([
|
||||
{
|
||||
groupId: '01',
|
||||
pens: [
|
||||
{ label: 'T1', sn: '', online: false },
|
||||
{ label: 'T2', sn: '', online: true },
|
||||
{ label: 'T3', sn: '', online: true },
|
||||
{ label: 'T4', sn: '', online: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
groupId: '02',
|
||||
pens: [
|
||||
{ label: 'T1', sn: '', online: true },
|
||||
{ label: 'T2', sn: '', online: false },
|
||||
{ label: 'T3', sn: '', online: false },
|
||||
{ label: 'T4', sn: '', online: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
groupId: '03',
|
||||
pens: [
|
||||
{ label: 'T1', sn: '', online: false },
|
||||
{ label: 'T2', sn: '', online: false },
|
||||
{ label: 'T3', sn: '', online: true },
|
||||
{ label: 'T4', sn: '', online: true },
|
||||
],
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="py-4">
|
||||
<!-- 状态提示栏 -->
|
||||
<div class="mb-6 flex items-start gap-3 border border-indigo-100 rounded-lg bg-indigo-50 p-4">
|
||||
<div class="i-carbon-radar mt-0.5 text-xl text-indigo-500" /> <!-- 图标占位 -->
|
||||
<div>
|
||||
<div class="text-sm text-indigo-900 font-bold">
|
||||
自动发现模式已开启
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-indigo-400">
|
||||
系统将自动扫描正在书写的点阵笔并提示绑定。请确保基站已通电。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 硬件状态卡片 -->
|
||||
<NGrid :x-gap="24" :y-gap="24" cols="1 m:2 l:3" responsive="screen">
|
||||
<NGridItem v-for="(group, idx) in hardwareGroups" :key="idx">
|
||||
<div class="border border-gray-200 rounded-xl p-5">
|
||||
<div class="mb-4 text-gray-700 font-bold">
|
||||
分组 {{ group.groupId }} 硬件状态
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<div
|
||||
v-for="pen in group.pens"
|
||||
:key="pen.label"
|
||||
class="flex items-center gap-3 rounded bg-gray-50 p-2"
|
||||
>
|
||||
<div class="w-6 text-center text-gray-700 font-bold">
|
||||
{{ pen.label }}
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<NInput
|
||||
size="small"
|
||||
placeholder="笔SN编号"
|
||||
:value="pen.sn"
|
||||
readonly
|
||||
class="bg-transparent"
|
||||
>
|
||||
<template #prefix>
|
||||
<span class="mr-2 text-xs text-gray-400">笔SN编号 (如: SN88219)</span>
|
||||
</template>
|
||||
</NInput>
|
||||
</div>
|
||||
<!-- 状态点: 绿色在线，灰色离线 -->
|
||||
<div
|
||||
class="h-2.5 w-2.5 rounded-full"
|
||||
:class="pen.online ? 'bg-green-500' : 'bg-gray-300'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 针对 Input 进行样式微调以匹配设计稿 */
|
||||
:deep(.n-input) {
|
||||
background-color: transparent;
|
||||
}
|
||||
:deep(.n-input .n-input__input-el) {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import { NGrid, NGridItem, NSelect } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const questionOptions = [
|
||||
{ label: '汉字听写 - 根据提示书写汉字', value: 'hanzi' },
|
||||
{ label: '同音字辨析 - 根据拼音书写', value: 'tongyin' },
|
||||
{ label: '偏旁部首 - 按要求写字', value: 'pianpang' },
|
||||
{ label: '词语听写 - 综合练习', value: 'ciyu' },
|
||||
{ label: '成语填空 - 四字成语', value: 'chengyu' },
|
||||
{ label: '反义词挑战', value: 'fanyi' },
|
||||
{ label: '近义词挑战', value: 'jinyi' },
|
||||
]
|
||||
|
||||
const pkOptions = [
|
||||
{ label: '极速成语接龙 - 每题10秒', value: 'speed10' },
|
||||
{ label: '极速成语接龙 - 每题20秒', value: 'speed20' },
|
||||
]
|
||||
|
||||
const regularQuestions = ref([
|
||||
{ value: 'hanzi' },
|
||||
{ value: 'tongyin' },
|
||||
{ value: 'pianpang' },
|
||||
{ value: 'ciyu' },
|
||||
{ value: 'chengyu' },
|
||||
{ value: 'fanyi' },
|
||||
{ value: 'jinyi' },
|
||||
])
|
||||
|
||||
const pkQuestions = ref([
|
||||
{ value: 'speed10' },
|
||||
{ value: 'speed10' },
|
||||
{ value: 'speed10' },
|
||||
{ value: 'speed10' },
|
||||
{ value: 'speed10' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="py-4">
|
||||
<NGrid :x-gap="48" :y-gap="24" cols="1 l:2" responsive="screen">
|
||||
<!-- 左侧：常规赛题包 -->
|
||||
<NGridItem>
|
||||
<div class="h-full rounded-xl bg-gray-50/50 p-6">
|
||||
<div class="mb-6 flex items-center gap-2 text-gray-800 font-bold">
|
||||
<div class="i-carbon-notebook text-lg text-blue-500" />
|
||||
<span>常规赛题包</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
v-for="(item, idx) in regularQuestions"
|
||||
:key="idx"
|
||||
class="flex items-center gap-4"
|
||||
>
|
||||
<span class="w-12 text-xs text-gray-400 font-medium">第{{ idx + 1 }}题</span>
|
||||
<NSelect
|
||||
v-model:value="item.value"
|
||||
:options="questionOptions"
|
||||
placeholder="请选择题型"
|
||||
class="flex-1 bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGridItem>
|
||||
|
||||
<!-- 右侧：加时赛 (PK环节) -->
|
||||
<NGridItem>
|
||||
<div class="h-full border border-orange-100/50 rounded-xl bg-orange-50/30 p-6">
|
||||
<div class="mb-6 flex items-center gap-2 text-gray-800 font-bold">
|
||||
<div class="i-carbon-timer text-lg text-orange-500" />
|
||||
<span>加时赛 (PK环节)</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
v-for="(item, idx) in pkQuestions"
|
||||
:key="idx"
|
||||
class="flex items-center gap-4"
|
||||
>
|
||||
<span class="w-8 text-xs text-orange-400 font-medium">PK{{ idx + 1 }}</span>
|
||||
<NSelect
|
||||
v-model:value="item.value"
|
||||
:options="pkOptions"
|
||||
placeholder="请选择PK规则"
|
||||
class="flex-1 bg-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,70 @@
|
||||
// src/views/competition/modules/data.ts
|
||||
|
||||
export interface CompetitionItem {
|
||||
id: string
|
||||
title: string
|
||||
date: string
|
||||
teamCount: number
|
||||
status: 'ongoing' | 'pending' // ongoing: 进行中, pending: 未开始
|
||||
isHighlight?: boolean // 用于标记第一个卡片的特殊背景
|
||||
}
|
||||
|
||||
export const competitionList: CompetitionItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
title: '阅读之星大赛\n辞海遨游环节', // 使用换行符或在组件中处理换行
|
||||
date: '2026.01.12',
|
||||
teamCount: 40,
|
||||
status: 'ongoing',
|
||||
isHighlight: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '诗词大会总决赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '趣味百科大作战',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: '经典文学研读周',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: '未来科学家阅读赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: '历史人文知识赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
title: '少儿绘本创意营',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
title: '唐诗三百首挑战',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
]
|
||||
@ -1,5 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NCard, NTag, useMessage } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import BasicInfoCard from './modules/BasicInfoCard.vue'
|
||||
import QuestionConfigCard from './modules/QuestionConfigCard.vue'
|
||||
import SideMenu from './modules/SideMenu.vue'
|
||||
|
||||
import TeamListCard from './modules/TeamListCard.vue'
|
||||
|
||||
const message = useMessage()
|
||||
const isEdit = ref(false)
|
||||
const route = useRoute()
|
||||
// eslint-disable-next-line unused-imports/no-unused-vars
|
||||
const competitionId = route.query.id
|
||||
|
||||
function handleSave() {
|
||||
// 模拟保存逻辑
|
||||
isEdit.value = false
|
||||
message.success('保存成功')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>dashboard_detail</h1>
|
||||
<div class="h-full flex gap-4 overflow-hidden bg-gray-50/50 p-4">
|
||||
<!-- 左侧分组导航 -->
|
||||
<div class="h-full w-64 flex flex-col flex-shrink-0 overflow-hidden rounded-xl bg-white shadow-sm">
|
||||
<SideMenu />
|
||||
</div>
|
||||
|
||||
<!-- 右侧主要内容区 -->
|
||||
<div class="h-full flex flex-col flex-1 overflow-hidden">
|
||||
<!-- 新增：顶部全局操作栏 -->
|
||||
<NCard :bordered="false" class="mb-4 flex-shrink-0 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm text-gray-500">
|
||||
当前状态：
|
||||
<NTag :type="isEdit ? 'warning' : 'success'" size="small" :bordered="false">
|
||||
{{ isEdit ? '编辑中' : '预览中' }}
|
||||
</NTag>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<NButton type="error" secondary>
|
||||
<template #icon>
|
||||
<div class="i-carbon-trash-can" />
|
||||
</template>
|
||||
删除
|
||||
</NButton>
|
||||
|
||||
<NButton v-if="!isEdit" type="primary" secondary @click="isEdit = true">
|
||||
<template #icon>
|
||||
<div class="i-carbon-edit" />
|
||||
</template>
|
||||
编辑
|
||||
</NButton>
|
||||
|
||||
<template v-else>
|
||||
<NButton secondary @click="isEdit = false">
|
||||
取消
|
||||
</NButton>
|
||||
<NButton type="primary" @click="handleSave">
|
||||
<template #icon>
|
||||
<div class="i-carbon-save" />
|
||||
</template>
|
||||
保存提交
|
||||
</NButton>
|
||||
</template>
|
||||
|
||||
<NButton v-if="!isEdit" type="primary" color="#1a202c">
|
||||
<template #icon>
|
||||
<div class="i-carbon-rocket" />
|
||||
</template>
|
||||
发布
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<!-- 滚动内容区 -->
|
||||
<div class="no-scrollbar flex flex-col flex-1 gap-4 overflow-y-auto">
|
||||
<!-- 将 isEdit 状态传递给子组件 -->
|
||||
<BasicInfoCard :is-edit="isEdit" />
|
||||
<TeamListCard :is-edit="isEdit" />
|
||||
<QuestionConfigCard :is-edit="isEdit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NCard, NGrid, NGridItem, NInputNumber, NSelect } from 'naive-ui'
|
||||
|
||||
defineProps<{ isEdit: boolean }>()
|
||||
|
||||
const scoreOptions = [
|
||||
{ label: '1分', value: '1' },
|
||||
{ label: '2分', value: '2' },
|
||||
{ label: '3分', value: '3' },
|
||||
{ label: '5分', value: '5' },
|
||||
{ label: '10分', value: '10' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" class="rounded-xl shadow-sm">
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 border-l-4 border-purple-500 pl-3">
|
||||
<span class="text-lg text-gray-800 font-bold">题包配置</span>
|
||||
</div>
|
||||
<!-- 编辑模式下显示批量操作按钮 -->
|
||||
<div v-if="isEdit" class="flex gap-3">
|
||||
<NButton size="small" secondary>
|
||||
批量重置
|
||||
</NButton>
|
||||
<NButton size="small" type="primary" secondary>
|
||||
快速配置
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NGrid :x-gap="24" :cols="2">
|
||||
<!-- 循环渲染两列：常规赛和加时赛 -->
|
||||
<NGridItem v-for="type in ['regular', 'pk']" :key="type">
|
||||
<!-- 头部样式处理 -->
|
||||
<div
|
||||
class="flex items-center justify-between border-b rounded-t-lg px-4 py-3"
|
||||
:class="type === 'regular'
|
||||
? 'bg-gray-50 border-gray-100'
|
||||
: 'bg-orange-50/50 border-orange-100'"
|
||||
>
|
||||
<div class="flex items-center gap-2 text-gray-700 font-bold">
|
||||
<div :class="type === 'regular' ? 'i-carbon-document-tasks text-blue-500' : 'i-carbon-timer text-orange-500'" />
|
||||
{{ type === 'regular' ? '常规赛题包' : '加时赛题包' }}
|
||||
</div>
|
||||
<div class="text-xs" :class="type === 'regular' ? 'text-gray-400' : 'text-orange-400'">
|
||||
配置详情
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表区域 -->
|
||||
<div
|
||||
class="flex flex-col gap-3 border border-t-0 rounded-b-lg p-4"
|
||||
:class="type === 'regular' ? 'border-gray-100' : 'border-orange-100 bg-orange-50/10'"
|
||||
>
|
||||
<div v-for="i in (type === 'regular' ? 10 : 5)" :key="`${type}-${i}`" class="flex items-center gap-2">
|
||||
<!-- 题号 -->
|
||||
<div class="w-16 flex-shrink-0 text-xs font-bold" :class="type === 'regular' ? 'text-gray-400' : 'text-orange-400'">
|
||||
{{ type === 'regular' ? `第${i}题` : `PK${i}` }}:
|
||||
</div>
|
||||
|
||||
<!-- 题型选择 -->
|
||||
<NSelect
|
||||
size="small"
|
||||
placeholder="题型"
|
||||
default-value="hanzi"
|
||||
:options="[{ label: '汉字书写', value: 'hanzi' }]"
|
||||
:disabled="!isEdit"
|
||||
class="min-w-[120px] flex-1"
|
||||
/>
|
||||
|
||||
<!-- 需求4：分数下拉选择 -->
|
||||
<div class="w-20 flex-shrink-0">
|
||||
<NSelect
|
||||
size="small"
|
||||
default-value="1"
|
||||
:options="scoreOptions"
|
||||
:disabled="!isEdit"
|
||||
placeholder="分值"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 需求4：倒计时输入 -->
|
||||
<div class="w-20 flex-shrink-0">
|
||||
<NInputNumber
|
||||
size="small"
|
||||
placeholder="秒"
|
||||
:show-button="false"
|
||||
:disabled="!isEdit"
|
||||
>
|
||||
<template #suffix>
|
||||
s
|
||||
</template>
|
||||
</NInputNumber>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</NCard>
|
||||
</template>
|
||||
@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeId = ref(1)
|
||||
const groups = ref(Array.from({ length: 10 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
code: String(i + 1).padStart(2, '0'),
|
||||
name: `第${['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][i]}组`,
|
||||
})))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 标题头 -->
|
||||
<div class="flex items-center justify-between border-b border-gray-100 p-4">
|
||||
<div class="flex items-center gap-2 text-gray-800 font-bold">
|
||||
<div class="i-carbon-tree-view-alt text-blue-600" />
|
||||
<span>分组情况</span>
|
||||
</div>
|
||||
<!-- 需求1：右侧改为添加按钮 -->
|
||||
<NButton text class="text-blue-600 hover:text-blue-700">
|
||||
<template #icon>
|
||||
<div class="i-carbon-add-filled text-lg" />
|
||||
</template>
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
<!-- 列表区域 -->
|
||||
<div class="max-h-[calc(100vh-120px)] overflow-y-auto p-2">
|
||||
<div
|
||||
v-for="item in groups"
|
||||
:key="item.id"
|
||||
class="group mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-4 py-3 transition-colors"
|
||||
:class="activeId === item.id ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50 text-gray-600'"
|
||||
@click="activeId = item.id"
|
||||
>
|
||||
<span
|
||||
class="text-xs font-mono"
|
||||
:class="activeId === item.id ? 'text-blue-400' : 'text-gray-300'"
|
||||
>
|
||||
#{{ item.code }}
|
||||
</span>
|
||||
<span class="font-medium">{{ item.name }}</span>
|
||||
|
||||
<div
|
||||
v-if="activeId === item.id"
|
||||
class="ml-auto h-4 w-1 rounded-full bg-blue-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { NCard, NGrid, NGridItem, NInput } from 'naive-ui'
|
||||
|
||||
defineProps<{ isEdit: boolean }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" class="rounded-xl shadow-sm">
|
||||
<div class="mb-5 flex items-center gap-3 border-l-4 border-green-500 pl-3">
|
||||
<span class="text-lg text-gray-800 font-bold">参与队伍</span>
|
||||
</div>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" cols="1 m:2 l:4" responsive="screen">
|
||||
<NGridItem v-for="i in 4" :key="i">
|
||||
<div
|
||||
class="relative border rounded-lg bg-gray-50 p-4 transition-all"
|
||||
:class="isEdit ? 'border-blue-200 bg-white' : 'border-transparent hover:shadow-md'"
|
||||
>
|
||||
<div class="mb-3 inline-block rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-600 font-bold">
|
||||
TEAM 0{{ i }}
|
||||
</div>
|
||||
|
||||
<template v-if="isEdit">
|
||||
<NInput size="small" placeholder="输入队伍名称" class="mb-2 font-bold" default-value="重庆树人小学队伍" />
|
||||
<NInput size="tiny" placeholder="输入编号" class="font-mono" default-value="BPB-53H-1EN-RL" />
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<h4 class="m-0 mb-1 text-base text-gray-800 font-bold">
|
||||
重庆树人小学队伍
|
||||
</h4>
|
||||
<p class="m-0 text-xs text-gray-400 font-mono">
|
||||
BPB-53H-1EN-RL
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</NGridItem>
|
||||
</NGrid>
|
||||
</NCard>
|
||||
</template>
|
||||
@ -0,0 +1,70 @@
|
||||
// src/views/competition/modules/data.ts
|
||||
|
||||
export interface CompetitionItem {
|
||||
id: string
|
||||
title: string
|
||||
date: string
|
||||
teamCount: number
|
||||
status: 'ongoing' | 'pending' // ongoing: 进行中, pending: 未开始
|
||||
isHighlight?: boolean // 用于标记第一个卡片的特殊背景
|
||||
}
|
||||
|
||||
export const competitionList: CompetitionItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
title: '阅读之星大赛\n辞海遨游环节', // 使用换行符或在组件中处理换行
|
||||
date: '2026.01.12',
|
||||
teamCount: 40,
|
||||
status: 'ongoing',
|
||||
isHighlight: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '诗词大会总决赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '趣味百科大作战',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: '经典文学研读周',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: '未来科学家阅读赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: '历史人文知识赛',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
title: '少儿绘本创意营',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
title: '唐诗三百首挑战',
|
||||
date: '2026.01.12',
|
||||
teamCount: 32,
|
||||
status: 'pending',
|
||||
},
|
||||
]
|
||||
@ -1,17 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NGi, NGrid, NSpace } from 'naive-ui'
|
||||
import { computed } from 'vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import CompetitionCard from './modules/competition-card.vue'
|
||||
import { competitionList } from './modules/data'
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
|
||||
// 引入 store 用于判断移动端布局 (与你提供的风格保持一致)
|
||||
const appStore = useAppStore()
|
||||
const gap = computed(() => (appStore.isMobile ? 12 : 16))
|
||||
|
||||
// 模拟新增操作
|
||||
function handleAdd() {
|
||||
window.$message?.success('点击了新增比赛活动')
|
||||
routerPushByKey('competition_competition-add')
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -39,11 +41,7 @@ function handleAdd() {
|
||||
<!-- 卡片列表区域 -->
|
||||
<!-- 响应式布局：手机1列，平板2列，中屏3列，大屏4列 -->
|
||||
<NGrid :x-gap="gap" :y-gap="gap" responsive="screen" item-responsive>
|
||||
<NGi
|
||||
v-for="item in competitionList"
|
||||
:key="item.id"
|
||||
span="24 s:12 m:8 l:6"
|
||||
>
|
||||
<NGi v-for="item in competitionList" :key="item.id" span="24 s:12 m:8 l:6">
|
||||
<CompetitionCard :item="item" />
|
||||
</NGi>
|
||||
</NGrid>
|
||||
|
||||
@ -2,13 +2,16 @@
|
||||
import type { CompetitionItem } from './data'
|
||||
import { NButton, NCard, NTag } from 'naive-ui'
|
||||
import { computed } from 'vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
|
||||
interface Props {
|
||||
item: CompetitionItem
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// 状态配置：颜色和文本
|
||||
const statusConfig = computed(() => {
|
||||
if (props.item.status === 'ongoing') {
|
||||
@ -19,13 +22,17 @@ const statusConfig = computed(() => {
|
||||
|
||||
// 处理标题换行
|
||||
const formattedTitle = computed(() => props.item.title.replace(/\n/g, '<br/>'))
|
||||
|
||||
function toDetail(item: CompetitionItem) {
|
||||
routerPushByKey('competition_competition-detail', { query: { id: item.id } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard
|
||||
:bordered="false"
|
||||
class="group relative h-full overflow-hidden rounded-2xl transition-all duration-300 hover:shadow-lg"
|
||||
content-style="padding: 24px; display: flex; flex-direction: column; height: 100%;"
|
||||
content-style="padding: 24px; display: flex; flex-direction: column; height: 100%;" @click="toDetail(item)"
|
||||
>
|
||||
<!-- 特殊背景装饰 (仅高亮卡片显示) -->
|
||||
<div
|
||||
@ -38,12 +45,7 @@ const formattedTitle = computed(() => props.item.title.replace(/\n/g, '<br/>'))
|
||||
<div>
|
||||
<!-- 状态标签 -->
|
||||
<div class="mb-4">
|
||||
<NTag
|
||||
:bordered="false"
|
||||
size="small"
|
||||
round
|
||||
class="px-3 font-medium" :class="[statusConfig.bgClass]"
|
||||
>
|
||||
<NTag :bordered="false" size="small" round class="px-3 font-medium" :class="[statusConfig.bgClass]">
|
||||
{{ statusConfig.text }}
|
||||
</NTag>
|
||||
</div>
|
||||
@ -66,12 +68,7 @@ const formattedTitle = computed(() => props.item.title.replace(/\n/g, '<br/>'))
|
||||
<span class="text-xs text-gray-500 font-medium">
|
||||
{{ item.teamCount }} 支参赛队伍
|
||||
</span>
|
||||
<NButton
|
||||
text
|
||||
type="primary"
|
||||
size="small"
|
||||
class="font-bold hover:underline"
|
||||
>
|
||||
<NButton text type="primary" size="small" class="font-bold hover:underline">
|
||||
查看配置详情
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user