feat(competition): 新增比赛管理功能并优化UI交互

- 添加比赛创建向导，支持分步配置基础信息、分组管理、硬件绑定和题目配置
- 实现比赛卡片组件，支持复制和删除操作
- 优化比赛详情页的表单交互和样式
- 新增全局组件类型定义和图标
- 添加比赛海报上传功能
- 完善比赛状态管理，新增"已结束"状态

apps/admin/src/components/common/app-provider.vue

@@ -10,10 +10,10 @@ const ContextHolder = defineComponent({
   name: 'ContextHolder',
   setup() {
     function register() {
-      window.$loadingBar = useLoadingBar()
-      window.$dialog = useDialog()
-      window.$message = useMessage()
-      window.$notification = useNotification()
+      window.$loadingBar = useLoadingBar() // 注册全局 loading bar
+      window.$dialog = useDialog()// 注册全局 dialog
+      window.$message = useMessage()// 注册全局 message
+      window.$notification = useNotification() // 注册全局 notification
     }
 
     register()

apps/admin/src/views/competition/competition-add/index.vue

@@ -1,64 +1,182 @@
 <script setup lang="ts">
-import { NTabPane, NTabs } from 'naive-ui'
-import { ref } from 'vue'
+import { NButton, NModal, NStep, NSteps } from 'naive-ui'
+import { computed, ref, useTemplateRef, watch } from 'vue'
 import BasicInfo from './modules/BasicInfo.vue'
 import GroupManagement from './modules/GroupManagement.vue'
 import HardwareBinding from './modules/HardwareBinding.vue'
 import QuestionConfig from './modules/QuestionConfig.vue'
 
-const activeTab = ref('group')
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:show', visible: boolean): void
+  (e: 'success'): void
+}>()
+
+const currentStep = ref<number>(1)
+
+// Reset step when modal opens
+watch(() => props.show, (val) => {
+  if (val) {
+    currentStep.value = 1
+  }
+})
 
 const competitionData = ref({
-  name: '阅读之星年度总决赛',
-  startTime: null,
-  endTime: null,
-  groupCount: 40,
-  teamCount: 4,
+  name: '阅读之星年度总决赛', // 竞赛名称
+  startTime: null, // 竞赛开始时间
+  endTime: null, // 竞赛结束时间
+  groupCount: 10, // 组别数量
+  teamCount: 4, // 每组队伍数量
+  poster: '', // 竞赛海报
+  questions: { // 赛题包配置
+    regular: [// 主赛环节
+      { 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 },
+    ],
+    pk: [ // 加时赛环节
+      { 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 },
+    ],
+  },
+  // 名单录入
+  groupManagement: [], // 组别管理
+  // 绑定硬件
+  hardware: [], // 绑定的硬件设备
+  // 其他配置项...
+  isPublic: true, // 是否公开
+  // 是否主动流程（主持人主动流程：需要选择大题）
 })
+
+const steps = [
+  { title: '基础设置', component: BasicInfo },
+  { title: '名单录入', component: GroupManagement },
+  { title: '硬件绑定', component: HardwareBinding },
+  { title: '题目配置', component: QuestionConfig },
+]
+
+const currentComponent = computed(() => steps[currentStep.value - 1]?.component)
+const stepComponentRef = useTemplateRef('stepComponentRef')
+
+function handleClose() {
+  emit('update:show', false)
+}
+
+function nextStep() {
+  // 校验当前步骤
+  const componentInstance = stepComponentRef.value
+  if (componentInstance && typeof componentInstance.validate === 'function') {
+    const isValid = componentInstance.validate()
+    if (!isValid)
+      return
+  }
+
+  if (currentStep.value < 4) {
+    currentStep.value++
+  }
+  else {
+    // 提交逻辑
+    window.$message?.success('比赛发布成功')
+    emit('success')
+    emit('update:show', false)
+  }
+}
+
+function prevStep() {
+  if (currentStep.value > 1) {
+    currentStep.value -= 1
+  }
+}
 </script>
 
 <template>
-  <div class="margin-[10px auto] h-full w-100% flex flex-col gap-4 overflow-y-auto p-4">
-    <!-- 顶部 Header区域 -->
-    <PageHeader>
-      <div>
-        <h2 class="m-0 text-xl font-bold">
-          比赛配置编辑
+  <NModal :show="show" :mask-closable="false" @update:show="emit('update:show', $event)">
+    <div
+      class="relative h-[85vh] max-h-[900px] max-w-[95vw] w-[1280px] flex flex-col overflow-hidden rounded-[2rem] bg-white shadow-2xl transition-all"
+    >
+      <!-- Header -->
+      <div class="flex items-center justify-between px-10 py-8">
+        <!-- Logo & Title -->
+        <div class="flex items-center gap-4">
+          <div class="h-12 w-12 flex items-center justify-center rounded-xl bg-[#3B82F6] shadow-blue-500/30 shadow-lg">
+            <div class="i-carbon-circle-dash text-2xl text-white" />
+          </div>
+          <div class="flex flex-col">
+            <h2 class="m-0 text-xl text-gray-800 font-bold leading-none">
+              比赛创建向导
             </h2>
-        <p class="m-0 text-xs text-gray-400">
-          正在编辑：阅读之星年度总决赛
-        </p>
+            <span class="mt-1 text-xs text-gray-400 font-bold tracking-widest uppercase">
+              Setup Configuration Wizard
+            </span>
           </div>
-      <template #action>
-        <NButton>存为草稿</NButton>
-        <NButton type="primary">
-          发布比赛
+        </div>
+
+        <!-- Steps -->
+        <div class="flex-1 px-20">
+          <NSteps :current="currentStep" class="custom-steps" size="medium">
+            <NStep v-for="(step, index) in steps" :key="index" :title="step.title" />
+          </NSteps>
+        </div>
+
+        <!-- Close Button -->
+        <button
+          class="h-10 w-10 flex items-center justify-center rounded-full text-gray-300 transition-colors hover:scale-110 hover:bg-gray-100 hover:text-gray-500"
+          @click="handleClose"
+        >
+          <NButton
+            type="primary" size="small"
+            class="h-8 w-8 rounded-full text-gray-300 transition-colors hover:bg-gray-100 hover:text-gray-500"
+          >
+            <icon-ic-baseline-close class="text-icon" />
           </NButton>
-      </template>
-    </PageHeader>
-
-    <!-- 基础信息组件 -->
-    <BasicInfo v-model:model-value="competitionData" />
-
-    <!-- Tab 切换区域 -->
-    <NCard :bordered="false" class="flex-1 rounded-xl shadow-sm">
-      <NTabs v-model:value="activeTab" type="line" animated>
-        <NTabPane name="group" tab="分组信息管理">
-          <GroupManagement :config="competitionData" />
-        </NTabPane>
-        <NTabPane name="hardware" tab="智能笔硬件绑定">
-          <HardwareBinding />
-        </NTabPane>
-        <NTabPane name="question" tab="题库与分值配置">
-          <QuestionConfig />
-        </NTabPane>
-      </NTabs>
-    </NCard>
+        </button>
       </div>
-</template>
 
-<style scoped>
-:deep(.n-tabs-nav) {
-  padding-bottom: 12px;
-}
-</style>
+      <!-- Content -->
+      <div class="flex-1 overflow-y-auto px-10">
+        <div class="h-full">
+          <component
+            :is="currentComponent" ref="stepComponentRef" v-model:model-value="competitionData"
+            :config="competitionData" @update:config="(val: typeof competitionData) => competitionData = val"
+          />
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="flex items-center justify-end gap-4 px-10 py-8">
+        <div class="mr-auto flex flex-col">
+          <span class="text-xs text-gray-300 font-bold tracking-widest uppercase">
+            Configuration Progress
+          </span>
+          <span class="text-sm text-gray-800 font-bold">
+            Step {{ currentStep }} of 4
+          </span>
+        </div>
+
+        <NButton v-if="currentStep > 1" quaternary size="large" class="px-8 text-gray-500 font-bold" @click="prevStep">
+          上一步
+        </NButton>
+
+        <NButton
+          type="primary" size="large"
+          class="h-12 rounded-xl bg-[#2563EB] px-10 text-base font-bold shadow-blue-500/30 shadow-lg" @click="nextStep"
+        >
+          {{ currentStep === 4 ? '完成并发布' : '下一步' }}
+        </NButton>
+      </div>
+    </div>
+  </NModal>
+</template>

apps/admin/src/views/competition/competition-add/modules/BasicInfo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { debounce } from '@sa/utils'
-import { NCard, NDatePicker, NForm, NFormItemGi, NGrid, NInput, NInputNumber } from 'naive-ui'
+import { NButton, NDatePicker, NForm, NInput, NInputNumber, NUpload, type UploadCustomRequestOptions } from 'naive-ui'
 import { ref, useTemplateRef, watch } from 'vue'
 
 const props = defineProps<{
@@ -10,6 +10,7 @@ const props = defineProps<{
     endTime: number | null
     groupCount: number
     teamCount: number
+    poster: string
   }
 }>()
 
@@ -35,60 +36,274 @@ watch(formData, (val) => {
   handleUpdate(val)
 }, { deep: true })
 
-defineExpose({
-  formRef,
-  formData,
-})
+function updateCount(type: 'group' | 'team', delta: number) {
+  if (type === 'group') {
+    const newVal = (formData.value.groupCount || 0) + delta
+    if (newVal >= 1 && newVal <= 999) {
+      formData.value.groupCount = newVal
+    }
+  }
+  else {
+    const newVal = (formData.value.teamCount || 0) + delta
+    if (newVal >= 1 && newVal <= 999) {
+      formData.value.teamCount = newVal
+    }
+  }
+}
+
+// 模拟上传处理
+function handleUpload({ file, onFinish }: UploadCustomRequestOptions) {
+  const reader = new FileReader()
+  reader.readAsDataURL(file.file as File)
+  reader.onload = () => {
+    // 模拟上传成功，直接使用 base64 作为图片地址
+    formData.value.poster = reader.result as string
+    onFinish()
+  }
+}
+
+// 校验方法
+function validate() {
+  if (!formData.value.name) {
+    window.$message?.error('请输入比赛项目名称')
+    return false
+  }
+  if (!formData.value.startTime) {
+    window.$message?.error('请选择开始时间')
+    return false
+  }
+  if (!formData.value.endTime) {
+    window.$message?.error('请选择结束时间')
+    return false
+  }
+  if (formData.value.startTime >= formData.value.endTime) {
+    window.$message?.error('结束时间必须晚于开始时间')
+    return false
+  }
+  if (!formData.value.groupCount || formData.value.groupCount < 1) {
+    window.$message?.error('参赛小组数量必须为正整数')
+    return false
+  }
+  if (!formData.value.teamCount || formData.value.teamCount < 1) {
+    window.$message?.error('每组队伍数量必须为正整数')
+    return false
+  }
+  return true
+}
+
+defineExpose({ validate })
 </script>
 
 <template>
-  <NCard :bordered="false" class="rounded-xl shadow-sm">
-    <div class="mb-4 flex items-center gap-2 border-l-4 border-blue-600 pl-3">
-      <span class="text-base font-bold">基础活动信息</span>
+  <div class="h-full flex gap-12">
+    <!-- 左侧表单区域 -->
+    <div class="flex-1">
+      <div class="mb-12">
+        <h2 class="mb-4 text-4xl text-gray-800 font-bold">
+          第一步： 基础定义
+        </h2>
+        <p class="text-lg text-gray-400 font-bold">
+          请确认比赛名称与参与规模。这将作为系统自动生成分组与终端连接数的依据。
+        </p>
       </div>
 
       <NForm ref="formRef" label-placement="top" :show-feedback="false">
-      <NGrid :x-gap="24" :y-gap="24" cols="1 s:2 m:4 l:5" responsive="screen">
-        <NFormItemGi span="1" label="比赛名称">
-          <NInput v-model:value="formData.name" placeholder="请输入比赛名称" />
-        </NFormItemGi>
+        <div class="mb-10">
+          <div class="mb-3 text-sm text-[#8DA5C3] font-bold">
+            比赛项目名称
+          </div>
+          <NInput
+            v-model:value="formData.name" placeholder="例如：2026年度阅读之星-辞海遨游总决赛"
+            class="h-16 rounded-2xl border-none text-xl line-height-16 shadow-[0_2px_10px_rgba(0,0,0,0.02)] !bg-[#FCFCFC]"
+          />
+        </div>
 
-        <NFormItemGi label="开始时间">
+        <div class="grid grid-cols-2 mb-10 gap-8">
+          <div>
+            <div class="mb-3 text-sm text-[#8DA5C3] font-bold">
+              开始时间
+            </div>
             <NDatePicker
               v-model:value="formData.startTime" type="datetime" clearable class="w-full"
-            placeholder="年 / 月 / 日 --:--"
+              placeholder="选择开始时间" :theme-overrides="{
+                peers: {
+                  Input: {
+                    borderRadius: '1rem',
+                    color: '#FCFCFC',
+                    heightLarge: '4rem',
+                    fontSizeLarge: '1.25rem',
+                    textColor: '#1f2937',
+                    borderHover: 'none',
+                    borderFocus: 'none',
+                  },
+                },
+              }" size="large"
             />
-        </NFormItemGi>
-
-        <NFormItemGi label="结束时间">
+          </div>
+          <div>
+            <div class="mb-3 text-sm text-[#8DA5C3] font-bold">
+              结束时间
+            </div>
             <NDatePicker
-            v-model:value="formData.endTime" type="datetime" clearable class="w-full"
-            placeholder="年 / 月 / 日 --:--"
+              v-model:value="formData.endTime" type="datetime" clearable class="w-full" placeholder="选择结束时间"
+              :theme-overrides="{
+                peers: {
+                  Input: {
+                    borderRadius: '1rem',
+                    color: '#FCFCFC',
+                    heightLarge: '4rem',
+                    fontSizeLarge: '1.25rem',
+                    textColor: '#1f2937',
+                    borderHover: 'none',
+                    borderFocus: 'none',
+                  },
+                },
+              }" size="large"
             />
-        </NFormItemGi>
+          </div>
+        </div>
 
-        <NFormItemGi label="参赛队伍总数">
+        <div class="grid grid-cols-2 gap-8">
+          <!-- 参赛小组数量卡片 -->
+          <div class="rounded-3xl bg-[#F5F8FF] p-8">
+            <div class="mb-6 text-sm text-[#3B82F6] font-bold tracking-wide uppercase">
+              参赛小组总数 (GROUPS)
+            </div>
+            <div class="mb-6 flex items-center justify-between">
+              <button
+                class="h-14 w-14 flex items-center justify-center rounded-full bg-white text-3xl text-[#3B82F6] shadow-md transition-transform active:scale-95 hover:bg-gray-50"
+                @click="updateCount('group', -1)"
+              >
+                <div class="mb-1 font-bold">
+                  -
+                </div>
+              </button>
+              <div class="w-32">
                 <NInputNumber
-            v-model:value="formData.groupCount"
-            class="w-full"
-            :min="1"
-            :max="999"
-            :precision="0"
+                  v-model:value="formData.groupCount" :min="1" :max="999" :show-button="false"
+                  class="text-center" :theme-overrides="{
+                    peers: {
+                      Input: {
+                        textColor: '#1f2937',
+                        fontSizeMedium: '3rem',
+                        heightMedium: '4rem',
+                        color: 'transparent',
+                        caretColor: '#3B82F6',
+                      },
+                    },
+                  }"
                 />
-          <span class="text-xs text-gray-400">（对）</span>
-        </NFormItemGi>
+              </div>
+              <button
+                class="h-14 w-14 flex items-center justify-center rounded-full bg-white text-3xl text-[#3B82F6] shadow-md transition-transform active:scale-95 hover:bg-gray-50"
+                @click="updateCount('group', 1)"
+              >
+                <div class="mb-1 font-bold">
+                  +
+                </div>
+              </button>
+            </div>
+            <div class="text-center text-sm text-[#3B82F6]/60 font-medium italic">
+              系统将预设 {{ formData.groupCount }} 个队伍
+            </div>
+          </div>
 
-        <NFormItemGi label="单组队伍">
+          <!-- 每组队伍数量卡片 -->
+          <div class="rounded-3xl bg-[#F5F8FF] p-8">
+            <div class="mb-6 text-sm text-[#3B82F6] font-bold tracking-wide uppercase">
+              单组包含队伍 (TEAMS)
+            </div>
+            <div class="mb-6 flex items-center justify-between">
+              <button
+                class="h-14 w-14 flex items-center justify-center rounded-full bg-white text-3xl text-[#3B82F6] shadow-md transition-transform active:scale-95 hover:bg-gray-50"
+                @click="updateCount('team', -1)"
+              >
+                <div class="mb-1 font-bold">
+                  -
+                </div>
+              </button>
+              <div class="w-32">
                 <NInputNumber
-            v-model:value="formData.teamCount"
-            class="w-full"
-            :min="1"
-            :max="formData.groupCount"
-            :precision="0"
+                  v-model:value="formData.teamCount" :min="1" :max="999" :show-button="false"
+                  class="text-center" :theme-overrides="{
+                    peers: {
+                      Input: {
+                        textColor: '#1f2937',
+                        fontSizeMedium: '3rem',
+                        heightMedium: '4rem',
+                        color: 'transparent',
+                        caretColor: '#3B82F6',
+                      },
+                    },
+                  }"
                 />
-          <span class="text-xs text-gray-400">（对）</span>
-        </NFormItemGi>
-      </NGrid>
+              </div>
+              <button
+                class="h-14 w-14 flex items-center justify-center rounded-full bg-white text-3xl text-[#3B82F6] shadow-md transition-transform active:scale-95 hover:bg-gray-50"
+                @click="updateCount('team', 1)"
+              >
+                <div class="mb-1 font-bold">
+                  +
+                </div>
+              </button>
+            </div>
+            <div class="text-center text-sm text-[#3B82F6]/60 font-medium italic">
+              每组将有 {{ formData.teamCount }} 支队伍同时进行比赛
+            </div>
+          </div>
+        </div>
       </NForm>
-  </NCard>
+    </div>
+
+    <!-- 右侧海报上传区域 -->
+    <div class="w-99 flex flex-col pt-32">
+      <div class="mb-3 w-full text-sm text-[#8DA5C3] font-bold">
+        活动海报
+        <NAlert type="info" class="mt-2 text-xs text-[#616263] font-normal">
+          <span class="text-xs font-normal">
+            建议上传 16:9 或 4:3 比例的图片，以获得最佳的全屏显示效果。
+          </span>
+        </NAlert>
+      </div>
+      <NUpload accept="image/*" :show-file-list="false" :custom-request="handleUpload" class="block w-full">
+        <div
+          class="relative h-[400px] w-full flex flex-col cursor-pointer items-center justify-center overflow-hidden rounded-3xl bg-[#F5F8FF] transition-all hover:bg-gray-100"
+          :class="{ 'border-2 border-dashed border-gray-300': !formData.poster }"
+        >
+          <div
+            v-if="formData.poster"
+            class="group absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity hover:opacity-100"
+          >
+            <div class="flex gap-4">
+              <!-- NUpload 的 trigger 会自动处理点击事件，这里不需要额外的上传逻辑，只需要一个按钮作为视觉触发 -->
+              <NButton ghost color="#fff" size="small">
+                更换
+              </NButton>
+              <NButton ghost color="#ff4d4f" size="small" @click.stop="formData.poster = ''">
+                删除
+              </NButton>
+            </div>
+          </div>
+          <img v-if="formData.poster" :src="formData.poster" class="h-full w-full object-cover" alt="Poster">
+          <div v-else class="flex flex-col items-center text-gray-400">
+            <div class="i-carbon-add-filled mb-4 text-4xl text-[#3B82F6]" />
+            <span class="text-sm font-bold">点击上传海报</span>
+            <span class="mt-2 text-xs opacity-60">支持 JPG/PNG 格式</span>
+          </div>
+        </div>
+      </NUpload>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+:deep(.n-input-number .n-input__input-el) {
+  text-align: center;
+  font-family: inherit;
+  font-weight: 700;
+}
+
+:deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

apps/admin/src/views/competition/competition-add/modules/GroupManagement.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NButton, NGrid, NGridItem, NInput, NTag } from 'naive-ui'
+import { NButton, NGrid, NGridItem, NInput } from 'naive-ui'
 import { ref, watch } from 'vue'
 
 const props = defineProps<{
@@ -9,87 +9,114 @@ const props = defineProps<{
   }
 }>()
 
-const groups = ref<Array<{ name: string, id: string, teamCount: number }>>([])
+const groups = ref<Array<{ name: string, id: string, teams: Array<{ name: string }> }>>([])
 
 function generateGroups() {
   if (!props.config)
     return
 
   const { groupCount, teamCount } = props.config
-  if (!teamCount || teamCount <= 0)
+  if (!groupCount || groupCount <= 0)
     return
 
-  const totalGroups = Math.ceil(groupCount / teamCount)
-  const newGroups = []
+  const oldGroups = groups.value
 
-  for (let i = 1; i <= totalGroups; i++) {
+  groups.value = Array.from({ length: groupCount }).map((_, index) => {
+    const i = index + 1
     const idStr = String(i).padStart(2, '0')
-    // 计算当前组的队伍数量
-    let currentTeamCount = teamCount
-    // 如果是最后一组，且有余数，则使用余数
-    if (i === totalGroups) {
-      const remainder = groupCount % teamCount
-      if (remainder > 0) {
-        currentTeamCount = remainder
-      }
-    }
+    const existingGroup = oldGroups[index]
 
-    newGroups.push({
-      name: `第${i}组`,
-      id: `G${idStr}`,
-      teamCount: currentTeamCount,
-    })
+    // 复用现有名称或生成默认名称
+    const groupName = existingGroup ? existingGroup.name : `第${i}组`
+
+    // 生成或复用队伍数据
+    const teams = Array.from({ length: teamCount }).map((__, tIndex) => {
+      const existingTeam = existingGroup?.teams?.[tIndex]
+      return {
+        name: existingTeam ? existingTeam.name : '',
       }
-  groups.value = newGroups
+    })
+
+    return {
+      name: groupName,
+      id: `G${idStr}`,
+      teams,
+    }
+  })
 }
 
 watch(() => props.config, generateGroups, { deep: true, immediate: true })
+
+function validate() {
+  // 简单校验：是否有分组
+  if (groups.value.length === 0) {
+    window.$message?.error('暂无参赛分组，请检查基础设置')
+    return false
+  }
+
+  // 校验分组和队伍
+  // const isAllValid = groups.value.every((group) => {
+  //   if (!group.name?.trim()) {
+  //     window.$message?.error(`分组 ${group.id.replace('G', '')} 名称不能为空`)
+  //     return false
+  //   }
+
+  //   const isGroupTeamsValid = group.teams.every((team, i) => {
+  //     if (!team.name?.trim()) {
+  //       window.$message?.error(`分组 ${group.name} 的 TEAM ${i + 1} 名称不能为空`)
+  //       return false
+  //     }
+  //     return true
+  //   })
+
+  //   return isGroupTeamsValid
+  // })
+
+  // return isAllValid
+  return true
+}
+
+defineExpose({ validate })
 </script>
 
 <template>
-  <div class="py-4">
-    <!-- 操作栏 -->
-    <div class="mb-2 w-full flex items-center justify-between">
-      <div class="w-full flex items-start gap-3 border border-indigo-100 rounded-lg bg-indigo-50 p-4">
-        <div class="w-full">
-          <div class="mt-1 text-sm text-indigo-400">
-            您可以通过Excel模版批量导入队伍名称
+  <div class="h-full">
+    <!-- 头部区域 -->
+    <div class="mb-8 flex items-end justify-between">
+      <div>
+        <h2 class="mb-2 text-3xl text-gray-800 font-bold">
+          参赛名单录入
+        </h2>
+        <p class="text-gray-400">
+          系统已根据您的设置生成了 {{ groups.length }} 个分组。您可以手动填写或批量导入。
+        </p>
       </div>
-        </div>
-        <div class="flex gap-3">
-          <NButton secondary>
+      <NButton type="primary" color="#1a202c" size="large">
         <template #icon>
           <icon-ic-baseline-upload-file class="text-icon" />
         </template>
-            Excel批量导入
+        Excel 导入名单
       </NButton>
-          <NButton type="primary" color="#1a202c">
-            <template #icon>
-              <icon-ic-baseline-add class="text-icon" />
-            </template>
-            添加分组
-          </NButton>
-        </div>
-      </div>
     </div>
 
     <!-- 分组卡片列表 -->
-    <NGrid :x-gap="24" :y-gap="24" cols="1 m:2" responsive="screen">
+    <NGrid :x-gap="24" :y-gap="24" cols="1 m:2 l:3" responsive="screen">
       <NGridItem v-for="(group, index) in groups" :key="index">
-        <div class="border border-gray-100 rounded-xl bg-gray-50/50 p-5 transition-shadow hover:shadow-md">
-          <div class="mb-4 flex items-center justify-between">
-            <span class="text-blue-600 font-bold">{{ group.name }}</span>
-            <NTag size="small" :bordered="false" class="bg-white text-gray-500">
-              ID: {{ group.id }}
-            </NTag>
+        <div class="h-full border border-gray-100 rounded-2xl bg-[#F8FAFC] p-6 transition-all hover:bg-white hover:shadow-lg">
+          <div class="mb-6 flex items-center justify-between gap-4">
+            <span class="shrink-0 text-lg text-gray-800 font-bold">{{ group.name }}</span>
           </div>
 
           <NGrid :x-gap="16" :y-gap="16" :cols="2">
-            <NGridItem v-for="i in group.teamCount" :key="i">
-              <div class="mb-1 text-xs text-gray-400">
-                NO.{{ String(i).padStart(2, '0') }} 队名
+            <NGridItem v-for="(team, tIndex) in group.teams" :key="tIndex">
+              <div class="mb-1 text-xs text-gray-400 font-bold">
+                TEAM {{ tIndex + 1 }}
               </div>
-              <NInput placeholder="输入队伍名称" />
+              <NInput
+                v-model:value="team.name"
+                placeholder="输入队伍名称"
+                class="rounded-lg !bg-white"
+              />
             </NGridItem>
           </NGrid>
         </div>

apps/admin/src/views/competition/competition-add/modules/HardwareBinding.vue

@@ -1,44 +1,77 @@
 <script setup lang="ts">
 import { NGrid, NGridItem, NInput } from 'naive-ui'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
-// 模拟数据结构
-const hardwareGroups = ref([
-  {
-    groupId: '01',
-    pens: [
-      { label: 'T1', sn: '', online: false },
-      { label: 'T2', sn: '', online: true },
-      { label: 'T3', sn: '', online: true },
-      { label: 'T4', sn: '', online: false },
-    ],
-  },
-  {
-    groupId: '02',
-    pens: [
-      { label: 'T1', sn: '', online: true },
-      { label: 'T2', sn: '', online: false },
-      { label: 'T3', sn: '', online: false },
-      { label: 'T4', sn: '', online: true },
-    ],
-  },
-  {
-    groupId: '03',
-    pens: [
-      { label: 'T1', sn: '', online: false },
-      { label: 'T2', sn: '', online: false },
-      { label: 'T3', sn: '', online: true },
-      { label: 'T4', sn: '', online: true },
-    ],
-  },
-])
+const props = defineProps<{
+  config?: {
+    groupCount: number
+    teamCount: number
+  }
+}>()
+
+interface HardwareGroup {
+  groupId: string
+  pens: Array<{ label: string, sn: string, online: boolean }>
+}
+
+const hardwareGroups = ref<HardwareGroup[]>([])
+
+function generateHardwareGroups() {
+  if (!props.config)
+    return
+
+  const { groupCount, teamCount } = props.config
+  if (!groupCount || groupCount <= 0)
+    return
+
+  const totalGroups = groupCount
+  const newGroups: HardwareGroup[] = []
+
+  for (let i = 1; i <= totalGroups; i++) {
+    const idStr = String(i).padStart(2, '0')
+    const currentTeamCount = teamCount
+
+    const pens = []
+    for (let j = 1; j <= currentTeamCount; j++) {
+      pens.push({
+        label: `T${j}`,
+        sn: '',
+        online: false, // 模拟初始状态
+      })
+    }
+
+    newGroups.push({
+      groupId: idStr,
+      pens,
+    })
+  }
+  hardwareGroups.value = newGroups
+}
+
+watch(() => props.config, generateHardwareGroups, { deep: true, immediate: true })
+
+function validate() {
+  // 暂时不需要强制校验硬件绑定，允许跳过
+  return true
+}
+
+defineExpose({ validate })
 </script>
 
 <template>
-  <div class="py-4">
+  <div class="h-full">
+    <div class="mb-8">
+      <h2 class="mb-2 text-3xl text-gray-800 font-bold">
+        点阵笔硬件绑定
+      </h2>
+      <p class="text-gray-400">
+        请将点阵笔序列号 (SN) 绑定至对应队伍。建议使用扫码枪快速录入。
+      </p>
+    </div>
+
     <!-- 状态提示栏 -->
-    <div class="mb-6 flex items-start gap-3 border border-indigo-100 rounded-lg bg-indigo-50 p-4">
-      <div class="i-carbon-radar mt-0.5 text-xl text-indigo-500" /> <!-- 图标占位 -->
+    <div class="mb-8 flex items-start gap-3 border border-indigo-100 rounded-lg bg-indigo-50 p-4">
+      <div class="i-carbon-radar mt-0.5 text-xl text-indigo-500" />
       <div>
         <div class="text-sm text-indigo-900 font-bold">
           自动发现模式已开启
@@ -52,39 +85,25 @@ const hardwareGroups = ref([
     <!-- 硬件状态卡片 -->
     <NGrid :x-gap="24" :y-gap="24" cols="1 m:2 l:3" responsive="screen">
       <NGridItem v-for="(group, idx) in hardwareGroups" :key="idx">
-        <div class="border border-gray-200 rounded-xl p-5">
-          <div class="mb-4 text-gray-700 font-bold">
-            分组 {{ group.groupId }} 硬件状态
+        <div class="border border-gray-100 rounded-2xl bg-[#F8FAFC] p-6">
+          <div class="mb-4 text-gray-800 font-bold">
+            硬件绑定: 第 {{ idx + 1 }} 分组
           </div>
 
           <div class="flex flex-col gap-3">
-            <div
-              v-for="pen in group.pens"
-              :key="pen.label"
-              class="flex items-center gap-3 rounded bg-gray-50 p-2"
-            >
-              <div class="w-6 text-center text-gray-700 font-bold">
+            <div v-for="pen in group.pens" :key="pen.label" class="flex items-center gap-3 rounded-lg bg-white p-2">
+              <div class="w-8 text-center text-gray-400 font-bold">
                 {{ pen.label }}
               </div>
               <div class="flex-1">
                 <NInput
-                  size="small"
-                  placeholder="笔SN编号"
-                  :value="pen.sn"
-                  readonly
-                  class="bg-transparent"
-                >
-                  <template #prefix>
-                    <span class="mr-2 text-xs text-gray-400">笔SN编号 (如: SN88219)</span>
-                  </template>
-                </NInput>
-              </div>
-              <!-- 状态点: 绿色在线，灰色离线 -->
-              <div
-                class="h-2.5 w-2.5 rounded-full"
-                :class="pen.online ? 'bg-green-500' : 'bg-gray-300'"
+                  v-model:value="pen.sn" size="small" placeholder="点阵笔 SN" class="bg-transparent"
+                  :bordered="false"
                 />
               </div>
+              <!-- 扫描图标 -->
+              <div class="i-carbon-qr-code text-gray-300" />
+            </div>
           </div>
         </div>
       </NGridItem>
@@ -93,11 +112,12 @@ const hardwareGroups = ref([
 </template>
 
 <style scoped>
-/* 针对 Input 进行样式微调以匹配设计稿 */
 :deep(.n-input) {
   background-color: transparent;
 }
-:deep(.n-input .n-input__input-el) {
-  text-align: right;
+
+:deep(.n-input__input-el) {
+  font-weight: bold;
+  color: #4b5563;
 }
 </style>

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

@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { NGrid, NGridItem, NSelect } from 'naive-ui'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: {
+    questions: {
+      regular: Array<{ value: string, score: number, time: number }>
+      pk: Array<{ value: string, score: number, time: number }>
+    }
+  }
+}>()
 
 const questionOptions = [
   { label: '汉字听写 - 根据提示书写汉字', value: 'hanzi' },
@@ -36,50 +45,54 @@ const timeOptions = [
   { 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 regularTotalScore = computed(() => {
+  return props.modelValue?.questions?.regular?.reduce((acc, cur) => acc + cur.score, 0) || 0
+})
 
-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 pkTotalScore = computed(() => {
+  return props.modelValue?.questions?.pk?.reduce((acc, cur) => acc + cur.score, 0) || 0
+})
 
-const regularTotalScore = computed(() => regularQuestions.value.reduce((acc, cur) => acc + cur.score, 0))
-const pkTotalScore = computed(() => pkQuestions.value.reduce((acc, cur) => acc + cur.score, 0))
+function validate() {
+  // 简单校验：主赛环节是否有题目
+  if (!props.modelValue?.questions?.regular?.length) {
+    window.$message?.error('请至少配置一道主赛题目')
+    return false
+  }
+  // 检查是否所有题目都选了题型
+  const invalidRegular = props.modelValue.questions.regular.some(q => !q.value)
+  if (invalidRegular) {
+    window.$message?.error('请完善主赛环节的题型配置')
+    return false
+  }
+  return true
+}
+
+defineExpose({ validate })
 </script>
 
 <template>
   <div class="py-4">
+    <div class="mb-8 text-xl text-gray-800 font-bold">
+      比赛赛题包配置
+    </div>
     <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>
+              <span class="text-lg">主赛环节</span>
             </div>
             <div class="text-sm text-[#8DA5C3] font-medium">
-              共 {{ regularQuestions.length }} 题 / 总计 {{ regularTotalScore }} 分
+              共 {{ props.modelValue?.questions?.regular?.length || 0 }} 题 / 总计 {{ regularTotalScore }} 分
             </div>
           </div>
 
           <div class="flex flex-col gap-5">
             <div
-              v-for="(item, idx) in regularQuestions"
+              v-for="(item, idx) in props.modelValue?.questions?.regular"
               :key="idx"
               class="flex items-center gap-3"
             >
@@ -141,22 +154,22 @@ const pkTotalScore = computed(() => pkQuestions.value.reduce((acc, cur) => acc +
         </div>
       </NGridItem>
 
-      <!-- 右侧：加时赛 (PK环节) -->
+      <!-- 右侧：加时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>
+              <span class="text-lg">加时PK环节</span>
             </div>
             <div class="text-sm text-[#D96B23]/60 font-medium">
-              共 {{ pkQuestions.length }} 题 / 总计 {{ pkTotalScore }} 分
+              共 {{ props.modelValue?.questions?.pk?.length || 0 }} 题 / 总计 {{ pkTotalScore }} 分
             </div>
           </div>
 
           <div class="flex flex-col gap-5">
             <div
-              v-for="(item, idx) in pkQuestions"
+              v-for="(item, idx) in props.modelValue?.questions?.pk"
               :key="idx"
               class="flex items-center gap-3"
             >

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { NCard, NDatePicker, NGrid, NGridItem, NInput, NInputNumber } from 'naive-ui'
-import { reactive } from 'vue'
+import { ref } from 'vue'
 
 defineProps<{ isEdit: boolean }>()
 
-const form = reactive({
+const form = ref({
   name: '第九届阅读之星大赛',
   dateRange: null,
-  total: 40,
-  teamPerGroup: 4,
-  promoteCount: 4,
+  total: 40, // 参赛队伍总数
+  teamPerGroup: 4, // 单组队伍数量
+  promoteCount: 10, // 队伍数量
 })
 </script>
 
@@ -48,15 +48,15 @@ const form = reactive({
       <!-- 参赛总人数 -->
       <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 }}人
+          {{ form.total }}对
         </div>
       </NGridItem>
 
@@ -70,9 +70,9 @@ const form = reactive({
           <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>单组队伍: <strong>{{ form.teamPerGroup }}队</strong></span>
           <span class="h-3 w-[1px] bg-gray-300" />
-          <span>晋级: <strong>{{ form.promoteCount }}队</strong></span>
+          <span>队伍数量: <strong>{{ form.promoteCount }}队</strong></span>
         </div>
       </NGridItem>
     </NGrid>

apps/admin/src/views/competition/competition-detail/modules/QuestionConfigCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { NButton, NCard, NGrid, NGridItem, NInputNumber, NSelect } from 'naive-ui'
+import { NButton, NCard, NForm, NFormItem, NGrid, NGridItem, NInputNumber, NModal, NSelect } from 'naive-ui'
+import { computed, ref } from 'vue'
 
 defineProps<{ isEdit: boolean }>()
 
@@ -10,6 +11,70 @@ const scoreOptions = [
   { label: '5分', value: '5' },
   { label: '10分', value: '10' },
 ]
+
+interface Question {
+  id: string
+  label: string
+  type: string
+  score: string
+  time: number | null
+}
+
+// 初始化常规赛题目数据
+const regularQuestions = ref<Question[]>(Array.from({ length: 10 }, (_, i) => ({
+  id: `reg-${i}`,
+  label: `第${i + 1}题`,
+  type: 'hanzi',
+  score: '1',
+  time: 30,
+})))
+
+// 初始化PK赛题目数据
+const pkQuestions = ref<Question[]>(Array.from({ length: 5 }, (_, i) => ({
+  id: `pk-${i}`,
+  label: `PK${i + 1}`,
+  type: 'hanzi',
+  score: '1',
+  time: 30,
+})))
+
+const regularTotalScore = computed(() => regularQuestions.value.reduce((acc, cur) => acc + Number(cur.score || 0), 0))
+const pkTotalScore = computed(() => pkQuestions.value.reduce((acc, cur) => acc + Number(cur.score || 0), 0))
+
+// 快速配置相关逻辑
+const showQuickConfigModal = ref(false)
+const quickConfigForm = ref({
+  score: '1',
+  time: 30,
+})
+
+function handleBatchReset() {
+  regularQuestions.value.forEach((q) => {
+    q.score = '1'
+    q.time = 30
+  })
+  pkQuestions.value.forEach((q) => {
+    q.score = '1'
+    q.time = 30
+  })
+}
+
+function handleQuickConfig() {
+  showQuickConfigModal.value = true
+}
+
+function applyQuickConfig() {
+  const { score, time } = quickConfigForm.value
+  regularQuestions.value.forEach((q) => {
+    q.score = score
+    q.time = time
+  })
+  pkQuestions.value.forEach((q) => {
+    q.score = score
+    q.time = time
+  })
+  showQuickConfigModal.value = false
+}
 </script>
 
 <template>
@@ -20,69 +85,102 @@ const scoreOptions = [
       </div>
       <!-- 编辑模式下显示批量操作按钮 -->
       <div v-if="isEdit" class="flex gap-3">
-        <NButton size="small" secondary>
+        <NButton size="small" secondary @click="handleBatchReset">
           批量重置
         </NButton>
-        <NButton size="small" type="primary" secondary>
+        <NButton size="small" type="primary" secondary @click="handleQuickConfig">
           快速配置
         </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' ? '常规赛题包' : '加时赛题包' }}
+      <!-- 常规赛 -->
+      <NGridItem>
+        <div class="flex items-center justify-between border-b border-blue-100 rounded-t-lg bg-blue-50/50 px-4 py-3">
+          <div class="flex items-center gap-2 text-gray-800 font-bold">
+            <div class="i-carbon-document-tasks text-blue-500" />
+            常规赛题包
           </div>
-          <div class="text-xs font-medium" :class="type === 'regular' ? 'text-[#8DA5C3]' : 'text-[#D96B23]/60'">
-            共 {{ type === 'regular' ? 10 : 5 }} 题 / 总计 {{ type === 'regular' ? 10 : 7 }} 分
+          <div class="text-xs text-[#8DA5C3] font-medium">
+            共 {{ regularQuestions.length }} 题 / 总计 {{ regularTotalScore }} 分
           </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 class="flex flex-col gap-3 border border-t-0 border-blue-100 rounded-b-lg bg-[#F5F9FF] p-4">
+          <div v-for="item in regularQuestions" :key="item.id" class="flex items-center gap-2">
+            <div class="w-16 flex-shrink-0 text-xs text-[#8DA5C3] font-bold">
+              {{ item.label }}:
             </div>
-
-            <!-- 题型选择 -->
             <NSelect
+              v-model:value="item.type"
               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
+                v-model:value="item.score"
                 size="small"
-                default-value="1"
                 :options="scoreOptions"
                 :disabled="!isEdit"
                 placeholder="分值"
               />
             </div>
-
-            <!-- 需求4：倒计时输入 -->
             <div class="w-20 flex-shrink-0">
               <NInputNumber
+                v-model:value="item.time"
+                size="small"
+                placeholder="秒"
+                :show-button="false"
+                :disabled="!isEdit"
+              >
+                <template #suffix>
+                  s
+                </template>
+              </NInputNumber>
+            </div>
+          </div>
+        </div>
+      </NGridItem>
+
+      <!-- PK赛 -->
+      <NGridItem>
+        <div class="flex items-center justify-between border-b border-orange-100 rounded-t-lg bg-orange-50/50 px-4 py-3">
+          <div class="flex items-center gap-2 text-[#5E3218] font-bold">
+            <div class="i-carbon-timer text-[#D96B23]" />
+            加时赛题包
+          </div>
+          <div class="text-xs text-[#D96B23]/60 font-medium">
+            共 {{ pkQuestions.length }} 题 / 总计 {{ pkTotalScore }} 分
+          </div>
+        </div>
+        <div class="flex flex-col gap-3 border border-t-0 border-orange-100 rounded-b-lg bg-[#FFF9F5] p-4">
+          <div v-for="item in pkQuestions" :key="item.id" class="flex items-center gap-2">
+            <div class="w-16 flex-shrink-0 text-xs text-[#FF8C38] font-bold">
+              {{ item.label }}:
+            </div>
+            <NSelect
+              v-model:value="item.type"
+              size="small"
+              placeholder="题型"
+              :options="[{ label: '汉字书写', value: 'hanzi' }]"
+              :disabled="!isEdit"
+              class="min-w-[120px] flex-1"
+            />
+            <div class="w-20 flex-shrink-0">
+              <NSelect
+                v-model:value="item.score"
+                size="small"
+                :options="scoreOptions"
+                :disabled="!isEdit"
+                placeholder="分值"
+              />
+            </div>
+            <div class="w-20 flex-shrink-0">
+              <NInputNumber
+                v-model:value="item.time"
                 size="small"
                 placeholder="秒"
                 :show-button="false"
@@ -97,5 +195,36 @@ const scoreOptions = [
         </div>
       </NGridItem>
     </NGrid>
+
+    <!-- 快速配置弹窗 -->
+    <NModal
+      v-model:show="showQuickConfigModal"
+      preset="card"
+      title="快速配置"
+      class="w-[400px]"
+    >
+      <NForm :model="quickConfigForm" label-placement="left" label-width="80">
+        <NFormItem label="统一分值">
+          <NSelect v-model:value="quickConfigForm.score" :options="scoreOptions" />
+        </NFormItem>
+        <NFormItem label="统一时间">
+          <NInputNumber v-model:value="quickConfigForm.time" :show-button="false">
+            <template #suffix>
+              秒
+            </template>
+          </NInputNumber>
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <NButton @click="showQuickConfigModal = false">
+            取消
+          </NButton>
+          <NButton type="primary" @click="applyQuickConfig">
+            应用
+          </NButton>
+        </div>
+      </template>
+    </NModal>
   </NCard>
 </template>

apps/admin/src/views/competition/competition-list/index.vue

@@ -1,19 +1,29 @@
 <script setup lang="ts">
 import { NButton, NGi, NGrid, NSpace } from 'naive-ui'
-import { computed } from 'vue'
-import { useRouterPush } from '@/hooks/common/router'
+import { computed, ref } from 'vue'
 import { useAppStore } from '@/store/modules/app'
+import CompetitionAddModal from '../competition-add/index.vue'
 import CompetitionCard from './modules/competition-card.vue'
-import { competitionList } from './modules/data'
-
-const { routerPushByKey } = useRouterPush()
+import { type CompetitionItem, competitionList } from './modules/data'
 
 // 引入 store 用于判断移动端布局 (与你提供的风格保持一致)
 const appStore = useAppStore()
-const gap = computed(() => (appStore.isMobile ? 12 : 16))
+const gap = computed(() => (appStore.isMobile ? 12 : 26))
+
+const showAddModal = ref(false)
 
 function handleAdd() {
-  routerPushByKey('competition_competition-add')
+  showAddModal.value = true
+}
+
+function handleCopy(item: CompetitionItem) {
+  // TODO: 实现复制逻辑
+  window.$message?.success(`已复制活动：${item.title}`)
+}
+
+function handleDelete(item: CompetitionItem) {
+  // TODO: 实现删除逻辑
+  window.$message?.success(`已删除活动：${item.title}`)
 }
 </script>
 
@@ -42,9 +52,11 @@ function handleAdd() {
     <!-- 响应式布局：手机1列，平板2列，中屏3列，大屏4列 -->
     <NGrid :x-gap="gap" :y-gap="gap" responsive="screen" item-responsive>
       <NGi v-for="item in competitionList" :key="item.id" span="24 s:12 m:8 l:6">
-        <CompetitionCard :item="item" />
+        <CompetitionCard :item="item" @copy="handleCopy" @delete="handleDelete" />
       </NGi>
     </NGrid>
+
+    <CompetitionAddModal v-model:show="showAddModal" />
   </NSpace>
 </template>
 

apps/admin/src/views/competition/competition-list/modules/competition-card.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import type { CompetitionItem } from './data'
-import { NButton, NCard, NTag } from 'naive-ui'
+import { NButton, NCard, NTag, NTooltip } from 'naive-ui'
 import { computed } from 'vue'
 import { useRouterPush } from '@/hooks/common/router'
 
 const props = defineProps<Props>()
 
+const emit = defineEmits<{
+  (e: 'copy', item: CompetitionItem): void
+  (e: 'delete', item: CompetitionItem): void
+}>()
+
 const { routerPushByKey } = useRouterPush()
 
 interface Props {
@@ -17,6 +22,9 @@ const statusConfig = computed(() => {
   if (props.item.status === 'ongoing') {
     return { type: 'success', text: '进行中', bgClass: 'bg-green-100 text-green-600' }
   }
+  if (props.item.status === 'ended') {
+    return { type: 'danger', text: '已结束', bgClass: 'bg-red-100 text-red-600' }
+  }
   return { type: 'default', text: '未开始', bgClass: 'bg-gray-100 text-gray-500' }
 })
 
@@ -26,20 +34,85 @@ const formattedTitle = computed(() => props.item.title.replace(/\n/g, '<br/>'))
 function toDetail(item: CompetitionItem) {
   routerPushByKey('competition_competition-detail', { query: { id: item.id } })
 }
+
+// 随机背景色池
+const bgColors = [
+  'bg-blue-50/80',
+  'bg-green-50/80',
+  'bg-purple-50/80',
+  'bg-orange-50/80',
+  'bg-red-50/80',
+  'bg-teal-50/80',
+  'bg-indigo-50/80',
+  'bg-pink-50/80',
+  'bg-yellow-50/80',
+  'bg-cyan-50/80',
+]
+
+// 基于 ID 生成确定性的随机颜色
+const decorationBgClass = computed(() => {
+  const idStr = String(props.item.id || '')
+  let hash = 0
+  for (let i = 0; i < idStr.length; i++) {
+    hash = idStr.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  const index = Math.abs(hash) % bgColors.length
+  return bgColors[index]
+})
 </script>
 
 <template>
   <NCard
     :bordered="false"
-    class="group relative h-full overflow-hidden rounded-2xl transition-all duration-300 hover:shadow-lg"
-    content-style="padding: 24px; display: flex; flex-direction: column; height: 100%;" @click="toDetail(item)"
+    class="group relative h-full overflow-hidden border border-transparent rounded-2xl transition-all duration-300 hover:scale-[1.02] hover:border-blue-500 hover:shadow-xl hover:-translate-y-2"
+    content-style="padding: 34px; display: flex; flex-direction: column; height: 100%;" @click="toDetail(item)"
   >
-    <!-- 特殊背景装饰 (仅高亮卡片显示) -->
+    <!-- 特殊背景装饰 (所有卡片显示，随机颜色) -->
     <div
-      v-if="item.isHighlight"
-      class="pointer-events-none absolute right-0 top-0 z-0 h-32 w-32 rounded-bl-full bg-blue-50/80 -mr-8 -mt-8"
+      class="pointer-events-none absolute right-0 top-0 z-0 h-32 w-32 rounded-bl-full transition-transform duration-800 ease-out -mr-6 -mt-8 group-hover:scale-150"
+      :class="decorationBgClass"
     />
 
+    <!-- 操作按钮 (Hover 显示) -->
+    <div
+      class="absolute right-4 top-4 z-20 flex gap-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+    >
+      <NTooltip>
+        <template #trigger>
+          <NButton
+            circle
+            secondary
+            size="small"
+            class="shadow-sm backdrop-blur-sm !bg-white/80 hover:!bg-white"
+            @click.stop="emit('copy', item)"
+          >
+            <template #icon>
+              <icon-ic-baseline-content-copy class="text-icon" />
+            </template>
+          </NButton>
+        </template>
+        复制活动
+      </NTooltip>
+
+      <NTooltip>
+        <template #trigger>
+          <NButton
+            circle
+            secondary
+            size="small"
+            type="error"
+            class="shadow-sm backdrop-blur-sm !bg-white/80 hover:!bg-red-50"
+            @click.stop="emit('delete', item)"
+          >
+            <template #icon>
+              <icon-ic-baseline-delete class="text-icon" />
+            </template>
+          </NButton>
+        </template>
+        删除活动
+      </NTooltip>
+    </div>
+
     <div class="relative z-10 h-full flex flex-col justify-between">
       <!-- 顶部内容 -->
       <div>
@@ -57,15 +130,16 @@ function toDetail(item: CompetitionItem) {
         />
 
         <!-- 日期 -->
-        <div class="mb-6 flex items-center text-sm text-gray-400">
-          <div class="i-carbon-calendar mr-2 text-base" />
-          <span>{{ item.date }}</span>
+        <div class="mb-6 flex items-center text-gray-400">
+          <icon-ic-baseline-calendar-month class="mr-2 text-xl" />
+          <span class="text-base font-bold">{{ item.date }}</span>
         </div>
       </div>
 
       <!-- 底部内容 -->
       <div class="flex items-center justify-between border-t border-gray-50 pt-4 dark:border-gray-800">
-        <span class="text-xs text-gray-500 font-medium">
+        <span class="flex items-center text-xs text-gray-500 font-medium">
+          <icon-ic-baseline-group class="mr-2 text-xl" />
           {{ item.teamCount }} 支参赛队伍
         </span>
         <NButton text type="primary" size="small" class="font-bold hover:underline">

apps/admin/src/views/competition/competition-list/modules/data.ts

@@ -5,7 +5,7 @@ export interface CompetitionItem {
   title: string
   date: string
   teamCount: number
-  status: 'ongoing' | 'pending' // ongoing: 进行中, pending: 未开始
+  status: 'ongoing' | 'pending' | 'ended' // ongoing: 进行中, pending: 未开始, ended: 已结束
   isHighlight?: boolean // 用于标记第一个卡片的特殊背景
 }
 
@@ -30,7 +30,7 @@ export const competitionList: CompetitionItem[] = [
     title: '趣味百科大作战',
     date: '2026.01.12',
     teamCount: 32,
-    status: 'pending',
+    status: 'ended',
   },
   {
     id: '4',