reader-star/apps/admin/src/views/competition/competition-detail/modules/BasicInfoCard.vue

<script setup lang="ts">
import { NCard, NDatePicker, NGrid, NGridItem, NInput, NInputNumber } from 'naive-ui'
import { ref } from 'vue'

defineProps<{ isEdit: boolean }>()

const form = ref({
  name: '第九届阅读之星大赛',
  dateRange: null,
  total: 40, // 参赛队伍总数
  teamPerGroup: 4, // 单组队伍数量
  promoteCount: 10, // 队伍数量
})
</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" :disabled="true" :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" :disabled="true" size="small" placeholder="单组" :show-button="false" />
          <NInputNumber v-model:value="form.promoteCount" :disabled="true" 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>