102 lines
3.5 KiB
Vue
102 lines
3.5 KiB
Vue
|
<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>
|