reader-star/apps/admin/src/views/competition/competition-add/modules/QuestionConfig.vue

<script setup lang="ts">
import { NGrid, NGridItem, NSelect } from 'naive-ui'
import { computed, 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' },
  { label: '看图猜字', value: 'kantu' },
  { label: '古诗词接龙', value: 'gushi' },
  { label: '名句听写', value: 'mingju' },
]

const pkOptions = [
  { label: '极速成语接龙 - 每题10秒', value: 'speed10' },
  { label: '极速成语接龙 - 每题20秒', value: 'speed20' },
]

const scoreOptions = [
  { label: '1分', value: 1 },
  { label: '2分', value: 2 },
  { label: '3分', value: 3 },
  { label: '5分', value: 5 },
  { label: '10分', value: 10 },
]

const timeOptions = [
  { label: '15s', value: 15 },
  { label: '30s', value: 30 },
  { label: '45s', value: 45 },
  { label: '60s', value: 60 },
  { label: '90s', value: 90 },
]

const regularQuestions = ref([
  { value: 'hanzi', score: 1, time: 15 },
  { value: 'tongyin', score: 1, time: 15 },
  { value: 'pianpang', score: 1, time: 30 },
  { value: 'ciyu', score: 1, time: 30 },
  { value: 'chengyu', score: 1, time: 30 },
  { value: 'fanyi', score: 1, time: 60 },
  { value: 'jinyi', score: 1, time: 30 },
  { value: 'kantu', score: 1, time: 30 },
  { value: 'gushi', score: 1, time: 60 },
  { value: 'mingju', score: 1, time: 60 },
])

const pkQuestions = ref([
  { value: 'speed10', score: 1, time: 60 },
  { value: 'speed10', score: 1, time: 60 },
  { value: 'speed10', score: 1, time: 60 },
  { value: 'speed10', score: 1, time: 60 },
  { value: 'speed10', score: 3, time: 60 },
])

const regularTotalScore = computed(() => regularQuestions.value.reduce((acc, cur) => acc + cur.score, 0))
const pkTotalScore = computed(() => pkQuestions.value.reduce((acc, cur) => acc + cur.score, 0))
</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-2xl bg-[#F5F9FF] p-6">
          <div class="mb-6 flex items-center justify-between border-b border-blue-100 pb-4">
            <div class="flex items-center gap-2 text-gray-800 font-bold">
              <icon-ic-outline-archive class="text-xl text-blue-500" />
              <span class="text-lg">常规赛题包</span>
            </div>
            <div class="text-sm text-[#8DA5C3] font-medium">
              共 {{ regularQuestions.length }} 题 / 总计 {{ regularTotalScore }} 分
            </div>
          </div>

          <div class="flex flex-col gap-5">
            <div
              v-for="(item, idx) in regularQuestions"
              :key="idx"
              class="flex items-center gap-3"
            >
              <span class="w-12 flex-shrink-0 text-sm text-[#8DA5C3] font-bold">第{{ idx + 1 }}题</span>

              <!-- 题型选择 -->
              <NSelect
                v-model:value="item.value"
                :options="questionOptions"
                placeholder="请选择题型"
                class="min-w-0 flex-[2]"
                :theme-overrides="{
                  peers: {
                    InternalSelection: {
                      borderRadius: '8px',
                      color: '#FFFFFF',
                      border: '1px solid #EBF1F9',
                    },
                  },
                }"
              />

              <!-- 分数 -->
              <NSelect
                v-model:value="item.score"
                :options="scoreOptions"
                class="w-20 flex-shrink-0"
                :theme-overrides="{
                  peers: {
                    InternalSelection: {
                      borderRadius: '8px',
                      color: '#FFFFFF',
                      border: '1px solid #EBF1F9',
                    },
                  },
                }"
              />

              <!-- 答题时间 -->
              <div class="flex flex-shrink-0 items-center gap-2">
                <span class="text-xs text-gray-400">答题时间:</span>
                <NSelect
                  v-model:value="item.time"
                  :options="timeOptions"
                  class="w-22"
                  :theme-overrides="{
                    peers: {
                      InternalSelection: {
                        borderRadius: '8px',
                        color: '#FFFFFF',
                        border: '1px solid #EBF1F9',
                      },
                    },
                  }"
                />
              </div>
            </div>
          </div>
        </div>
      </NGridItem>

      <!-- 右侧：加时赛 (PK环节) -->
      <NGridItem>
        <div class="h-full border border-[#FFF0E0] rounded-2xl bg-[#FFF9F5] p-6">
          <div class="mb-6 flex items-center justify-between border-b border-orange-100 pb-4">
            <div class="flex items-center gap-2 text-[#5E3218] font-bold">
              <icon-ic-outline-timer class="text-xl text-[#D96B23]" />
              <span class="text-lg">加时赛题包</span>
            </div>
            <div class="text-sm text-[#D96B23]/60 font-medium">
              共 {{ pkQuestions.length }} 题 / 总计 {{ pkTotalScore }} 分
            </div>
          </div>

          <div class="flex flex-col gap-5">
            <div
              v-for="(item, idx) in pkQuestions"
              :key="idx"
              class="flex items-center gap-3"
            >
              <span class="w-12 flex-shrink-0 text-sm text-[#FF8C38] font-bold">PK{{ idx + 1 }}</span>

              <!-- PK规则 -->
              <NSelect
                v-model:value="item.value"
                :options="pkOptions"
                placeholder="请选择PK规则"
                class="min-w-0 flex-[2]"
                :theme-overrides="{
                  peers: {
                    InternalSelection: {
                      borderRadius: '8px',
                      color: '#FFFFFF',
                      border: '1px solid #FFEDD5',
                    },
                  },
                }"
              />

              <!-- 分数 -->
              <NSelect
                v-model:value="item.score"
                :options="scoreOptions"
                class="w-20 flex-shrink-0"
                :theme-overrides="{
                  peers: {
                    InternalSelection: {
                      borderRadius: '8px',
                      color: '#FFFFFF',
                      border: '1px solid #FFEDD5',
                    },
                  },
                }"
              />

              <!-- 答题时间 -->
              <div class="flex flex-shrink-0 items-center gap-2">
                <span class="text-xs text-[#D96B23]/60">答题时间:</span>
                <NSelect
                  v-model:value="item.time"
                  :options="timeOptions"
                  class="w-22"
                  :theme-overrides="{
                    peers: {
                      InternalSelection: {
                        borderRadius: '8px',
                        color: '#FFFFFF',
                        border: '1px solid #FFEDD5',
                      },
                    },
                  }"
                />
              </div>
            </div>
          </div>
        </div>
      </NGridItem>
    </NGrid>
  </div>
</template>