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

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

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,38 +85,24 @@ 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>
+                  v-model:value="pen.sn" size="small" placeholder="点阵笔 SN" class="bg-transparent"
+                  :bordered="false"
+                />
               </div>
-              <!-- 状态点: 绿色在线，灰色离线 -->
-              <div
-                class="h-2.5 w-2.5 rounded-full"
-                :class="pen.online ? 'bg-green-500' : 'bg-gray-300'"
-              />
+              <!-- 扫描图标 -->
+              <div class="i-carbon-qr-code text-gray-300" />
             </div>
           </div>
         </div>
@@ -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>