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

<script setup lang="ts">
import { NButton, NForm, NFormItem, NInput, NInputNumber, NModal, NSelect, type SelectOption } from 'naive-ui'
import { ref, watch } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import { roundTypeOptions, scoreTypeOptions, timeOptions, uiTypeOptions } from '@/constants/business'
import { useQuestionConfig } from './useQuestionConfig'

const props = defineProps<{
  modelValue: {
    rounds: Array<{
      id: string
      name: string
      roundType: string
      questions: Array<{
        id: string
        value: string | null
        time: number
        title: string
        scoreType: Api.Competition.QuestionScoreType
        score: number
        uiType?: string
        templateId?: string
      }>
    }>
  }
}>()
const {
  // getRoundScore,
  getRoundTime,
  totalStats,
  questionOptions,
  addRound,
  removeRound,
  addQuestion,
  removeQuestion,
  validate,
  reset,
} = useQuestionConfig(props)

const templateIdOptions: SelectOption[] = [
  {
    label: '模板1',
    value: 't1',
  },
  {
    label: '模版2',
    value: 't2',
  },
  {
    label: '模版3',
    value: 't3',
  },
  {
    label: '模版4',
    value: 't4',
  },
]

// 模态框控制
const showAddModal = ref(false)
const newRoundForm = ref({
  name: '',
  count: 10,
  roundType: roundTypeOptions[0].value,
})

function handleOpenAddModal() {
  newRoundForm.value = {
    name: `第${(props.modelValue?.rounds?.length || 0) + 1}轮 星·诗词大会`,
    count: 10,
    roundType: roundTypeOptions[0].value,
  }
  showAddModal.value = true
}

function handleConfirmAdd() {
  if (!newRoundForm.value.name) {
    window.$message?.warning('请输入环节名称')
    return
  }
  addRound(newRoundForm.value.name, newRoundForm.value.count, newRoundForm.value.roundType as Api.Competition.CompetitionRoundType)
  showAddModal.value = false
}

// 初始化默认数据
watch(() => props.modelValue, (val) => {
  // 确保所有题目都有ID，用于拖拽排序
  if (val?.rounds) {
    val.rounds.forEach((round) => {
      if (!round.questions) {
        return
      }
      round.questions.forEach((q: any) => {
        if (!q.id) {
          q.id = `q_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`
        }
      })
    })
  }
  // eslint-disable-next-line no-console
  console.log(val, '拖动后的重新顺序')
}, { immediate: true, deep: true })

defineExpose({ validate, reset })
</script>

<template>
  <div class="h-full flex flex-col">
    <!-- 顶部标题栏 -->
    <div class="mb-8 flex items-center justify-between">
      <div>
        <div class="text-2xl text-gray-800 font-bold tracking-tight">
          赛程题包配置
        </div>
        <div class="mt-2 flex items-center gap-4 text-sm text-gray-500">
          <span>您可以为比赛添加多个阶段的题包，并自定义题目、分值与限时。</span>
          <div
            v-if="totalStats.count > 0"
            class="flex items-center gap-3 border border-gray-100 rounded-lg bg-gray-50 px-3 py-1 text-xs font-bold"
          >
            <div class="flex items-center gap-1">
              <span class="text-gray-400">总题数</span>
              <span class="text-sm text-gray-700">{{ totalStats.count }}</span>
            </div>
            <div class="h-3 w-[1px] bg-gray-200" />
            <div class="h-3 w-[1px] bg-gray-200" />
            <div class="flex items-center gap-1">
              <span class="text-gray-400">总时长</span>
              <span class="text-sm text-blue-500">{{ totalStats.time }}s</span>
            </div>
          </div>
        </div>
      </div>
      <NButton
        type="primary" class="shadow-blue-500/20 shadow-lg !h-10 !rounded-lg !px-6 !font-bold"
        @click="handleOpenAddModal"
      >
        <template #icon>
          <icon-ic-round-plus />
        </template>
        新增赛程题包
      </NButton>
    </div>

    <!-- 空状态 -->
    <div
      v-if="!props.modelValue?.rounds?.length"
      class="flex flex-col flex-1 items-center justify-center border-2 border-gray-100 rounded-2xl border-dashed bg-gray-50/30"
    >
      <div class="h-34 w-34 flex items-center justify-center rounded-3xl bg-gray-100 text-gray-300">
        <icon-ic-outline-folder-off class="text-5xl" />
      </div>
      <div class="mt-6 text-lg text-gray-400 font-bold">
        暂无配置题包
      </div>
      <div class="mt-2 text-sm text-gray-500">
        请点击右上角按钮开始添加比赛环节
      </div>
    </div>

    <!-- 列表内容 -->
    <div v-else class="flex flex-col gap-6 pb-10">
      <div
        v-for="(round, roundIndex) in props.modelValue?.rounds" :key="round.id"
        class="group relative overflow-hidden border border-gray-100 rounded-2xl bg-white p-1 shadow-sm transition-all hover:shadow-md"
      >
        <!-- 侧边装饰条 -->
        <div class="absolute bottom-0 left-0 top-0 w-1.5 bg-blue-500" />

        <div class="p-6 pl-8">
          <!-- 头部信息 -->
          <div class="mb-4 flex items-center justify-between">
            <div class="flex items-center gap-4">
              <div class="h-8 w-1.5 rounded-full bg-blue-500" />
              <NTag type="primary" class="!text-blue-500">
                {{ roundTypeOptions.find((item) => item.value === round.roundType)?.label || '未知类型' }}
              </NTag>
              <div class="flex items-center gap-3">
                <NInput
                  v-model:value="round.name" placeholder="请输入环节名称" :bordered="false"
                  class="border transition-all !w-80 !border-transparent !rounded-lg !bg-transparent !text-xl !font-bold focus-within:shadow-sm focus-within:!border-blue-500 hover:!border-gray-200 focus-within:!bg-white"
                />
                <div class="flex items-center gap-2">
                  <div
                    class="flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-500 font-bold"
                  >
                    <icon-ic-outline-format-list-numbered class="text-sm" />
                    {{ round.questions.length }} 题
                  </div>
                  <!-- <div class="flex items-center gap-1 border border-orange-100 rounded-full bg-orange-50 px-3 py-1 text-xs text-orange-500 font-bold">
                    <icon-ic-round-star-border class="text-sm" />
                    {{ getRoundScore(roundIndex) }} 分
                  </div> -->
                  <div
                    class="flex items-center gap-1 border border-blue-100 rounded-full bg-blue-50 px-3 py-1 text-xs text-blue-500 font-bold"
                  >
                    <icon-ic-outline-access-time class="text-sm" />
                    {{ getRoundTime(roundIndex) }} 秒
                  </div>
                </div>
              </div>
            </div>

            <div class="flex items-center gap-3">
              <NButton
                secondary circle class="!text-gray-400 hover:!bg-blue-50 hover:!text-blue-500"
                @click="addQuestion(roundIndex)"
              >
                <template #icon>
                  <icon-ic-round-plus class="!text-xl" />
                </template>
              </NButton>
              <NButton
                secondary circle class="!text-gray-400 hover:!bg-red-50 hover:!text-red-500"
                @click="removeRound(roundIndex)"
              >
                <template #icon>
                  <icon-ic-outline-delete class="!text-xl" />
                </template>
              </NButton>
            </div>
          </div>

          <!-- 题目列表 -->
          <VueDraggable
            v-model="round.questions" :animation="300" handle=".drag-handle" class="flex flex-col gap-3"
            ghost-class="ghost"
          >
            <div
              v-for="(item, qIdx) in round.questions" :key="item.id"
              class="group/item flex flex-col gap-3 border border-gray-100 rounded-xl bg-white p-3 transition-all hover:border-blue-200 hover:shadow-sm"
            >
              <!-- 第一行：序号、标题、删除按钮 -->
              <div class="flex items-center justify-between gap-3">
                <div class="flex flex-1 items-center gap-3">
                  <div class="flex items-center gap-2">
                    <div
                      class="drag-handle flex cursor-grab items-center justify-center rounded p-1 text-gray-400 transition-colors active:cursor-grabbing hover:bg-gray-100 hover:text-blue-500"
                    >
                      <icon-mdi-drag class="text-xl" />
                    </div>
                    <span
                      class="w-6 flex-shrink-0 text-center text-sm text-gray-300 font-bold transition-colors group-hover/item:text-blue-500"
                    >
                      {{ String(qIdx + 1).padStart(2, '0') }}
                    </span>
                  </div>

                  <!-- 标题 -->
                  <div class="flex flex-1 items-center gap-2 rounded-lg bg-gray-50 px-3 py-1.5">
                    <icon-ic-outline-title class="text-gray-400" />
                    <span class="whitespace-nowrap text-sm text-gray-400 font-bold">标题：</span>
                    <NInput
                      v-model:value="item.title" class="flex-1 !bg-transparent" size="small" :bordered="false"
                      placeholder="请输入题目标题"
                    />
                  </div>
                </div>

                <!-- 删除按钮 -->
                <NButton
                  text class="transition-opacity !text-gray-300 hover:!text-red-500"
                  @click="removeQuestion(roundIndex, qIdx)"
                >
                  <icon-ic-outline-delete class="!text-xl" />
                </NButton>
              </div>

              <!-- 第二行：配置项 -->
              <div class="grid grid-cols-12 gap-3">
                <!-- 题型 -->
                <div class="col-span-4">
                  <NSelect
                    v-model:value="item.value" :options="questionOptions" placeholder="请选择题目类型" size="small"
                    class="font-medium"
                  />
                </div>

                <!-- UItype -->
                <div class="col-span-4">
                  <NSelect
                    v-model:value="item.uiType" :options="uiTypeOptions" placeholder="请选择UI类型"
                    size="small" class="font-medium"
                  />
                </div>

                <!-- templateId -->
                <div class="col-span-4">
                  <NSelect
                    v-model:value="item.templateId" :options="templateIdOptions" placeholder="请选择模板"
                    size="small" class="font-medium"
                  />
                </div>

                <!-- 时间 -->
                <div class="col-span-4 flex items-center gap-2 rounded-lg bg-gray-50 px-3 py-1.5">
                  <icon-ic-outline-timer class="text-gray-400" />
                  <span class="whitespace-nowrap text-sm text-gray-400 font-bold">答题时间：</span>
                  <NSelect
                    v-model:value="item.time" :options="timeOptions" class="flex-1 !bg-transparent" size="small"
                    :bordered="false"
                  />
                  <span class="text-xs text-gray-400 font-bold">S</span>
                </div>

                <!-- 分数规则 -->
                <div class="col-span-4 flex items-center gap-2 rounded-lg bg-gray-50 px-3 py-1.5">
                  <icon-streamline-sharp:type-area-remix class="text-gray-400" />
                  <span class="whitespace-nowrap text-sm text-gray-400 font-bold">分数规则：</span>
                  <NSelect
                    v-model:value="item.scoreType" :options="scoreTypeOptions as unknown as SelectOption[]"
                    class="flex-1 !bg-transparent" size="small" :bordered="false"
                  />
                </div>

                <!-- 分数 -->
                <div class="col-span-4 flex items-center gap-2 rounded-lg bg-gray-50 px-3 py-1.5">
                  <icon-ic-round-star-border class="text-gray-400" />
                  <span class="whitespace-nowrap text-sm text-gray-400 font-bold">分数：</span>
                  <NInputNumber
                    v-model:value="item.score" :min="0" :show-button="false" class="flex-1 !bg-transparent"
                    size="small" :bordered="false" placeholder="0"
                  />
                  <span class="text-xs text-gray-400 font-bold">分</span>
                </div>
              </div>
            </div>
          </VueDraggable>
        </div>
      </div>
    </div>

    <!-- 新增题包弹窗 -->
    <NModal v-model:show="showAddModal" transform-origin="center">
      <div class="w-[480px] rounded-2xl bg-white p-8 shadow-2xl">
        <div class="mb-8 flex flex-col items-center gap-4 text-center">
          <div class="h-14 w-14 flex items-center justify-center rounded-2xl bg-blue-50 text-blue-500">
            <icon-ic-round-library-add class="text-3xl" />
          </div>
          <div>
            <div class="text-xl text-gray-800 font-bold">
              新建环节题包
            </div>
            <div class="mt-1 text-sm text-gray-500">
              请输入环节名称与题目预设数量
            </div>
          </div>
        </div>

        <NForm size="large">
          <NFormItem label="环节/题包名称">
            <NInput v-model:value="newRoundForm.name" placeholder="例如：第一轮 星·诗词大会" />
          </NFormItem>
          <NFormItem label="环节/题包类型">
            <NSelect
              v-model:value="newRoundForm.roundType" :options="roundTypeOptions as unknown as SelectOption[]"
              placeholder="请选择环节类型..." :bordered="true" class="font-medium"
            />
          </NFormItem>
          <NFormItem label="初始化题目数量">
            <NInputNumber v-model:value="newRoundForm.count" :min="1" :max="50" class="w-full" />
          </NFormItem>
        </NForm>

        <NButton
          type="primary" block size="large" class="mt-4 !h-12 !rounded-xl !text-lg !font-bold"
          @click="handleConfirmAdd"
        >
          生成题包卡片
        </NButton>
      </div>
    </NModal>
  </div>
</template>

<style scoped>
.ghost {
  @apply opacity-50 bg-blue-50 border-2 border-dashed border-blue-300;
}
</style>