reader-star/apps/admin/src/views/competition/competition-detail/modules/QuestionConfigCard.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-blue-50/50 border-blue-100'
            : 'bg-orange-50/50 border-orange-100'"
        >
          <div class="flex items-center gap-2 font-bold" :class="type === 'regular' ? 'text-gray-800' : 'text-[#5E3218]'">
            <div :class="type === 'regular' ? 'i-carbon-document-tasks text-blue-500' : 'i-carbon-timer text-[#D96B23]'" />
            {{ type === 'regular' ? '常规赛题包' : '加时赛题包' }}
          </div>
          <div class="text-xs font-medium" :class="type === 'regular' ? 'text-[#8DA5C3]' : 'text-[#D96B23]/60'">
            共 {{ type === 'regular' ? 10 : 5 }} 题 / 总计 {{ type === 'regular' ? 10 : 7 }} 分
          </div>
        </div>

        <!-- 列表区域 -->
        <div
          class="flex flex-col gap-3 border border-t-0 rounded-b-lg p-4"
          :class="type === 'regular' ? 'border-blue-100 bg-[#F5F9FF]' : 'border-orange-100 bg-[#FFF9F5]'"
        >
          <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-[#8DA5C3]' : 'text-[#FF8C38]'">
              {{ 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>