feat(competition): 新增比赛活动管理功能模块

实现比赛活动的创建、编辑、详情查看功能，包括基础信息配置、分组管理、题库配置和硬件绑定
添加比赛列表页面的路由跳转逻辑，优化卡片点击交互
完善比赛详情页的编辑状态管理，支持基础信息和题包配置的修改
新增本地SVG图标资源，更新系统Logo组件样式

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

@@ -1,5 +1,98 @@
+<script setup lang="ts">
+import { NButton, NCard, NTag, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import BasicInfoCard from './modules/BasicInfoCard.vue'
+import QuestionConfigCard from './modules/QuestionConfigCard.vue'
+import SideMenu from './modules/SideMenu.vue'
+
+import TeamListCard from './modules/TeamListCard.vue'
+
+const message = useMessage()
+const isEdit = ref(false)
+const route = useRoute()
+// eslint-disable-next-line unused-imports/no-unused-vars
+const competitionId = route.query.id
+
+function handleSave() {
+  // 模拟保存逻辑
+  isEdit.value = false
+  message.success('保存成功')
+}
+</script>
+
 <template>
-  <div>
-    <h1>dashboard_detail</h1>
+  <div class="h-full flex gap-4 overflow-hidden bg-gray-50/50 p-4">
+    <!-- 左侧分组导航 -->
+    <div class="h-full w-64 flex flex-col flex-shrink-0 overflow-hidden rounded-xl bg-white shadow-sm">
+      <SideMenu />
+    </div>
+
+    <!-- 右侧主要内容区 -->
+    <div class="h-full flex flex-col flex-1 overflow-hidden">
+      <!-- 新增：顶部全局操作栏 -->
+      <NCard :bordered="false" class="mb-4 flex-shrink-0 rounded-xl shadow-sm">
+        <div class="flex items-center justify-between">
+          <div class="text-sm text-gray-500">
+            当前状态：
+            <NTag :type="isEdit ? 'warning' : 'success'" size="small" :bordered="false">
+              {{ isEdit ? '编辑中' : '预览中' }}
+            </NTag>
+          </div>
+          <div class="flex gap-3">
+            <NButton type="error" secondary>
+              <template #icon>
+                <div class="i-carbon-trash-can" />
+              </template>
+              删除
+            </NButton>
+
+            <NButton v-if="!isEdit" type="primary" secondary @click="isEdit = true">
+              <template #icon>
+                <div class="i-carbon-edit" />
+              </template>
+              编辑
+            </NButton>
+
+            <template v-else>
+              <NButton secondary @click="isEdit = false">
+                取消
+              </NButton>
+              <NButton type="primary" @click="handleSave">
+                <template #icon>
+                  <div class="i-carbon-save" />
+                </template>
+                保存提交
+              </NButton>
+            </template>
+
+            <NButton v-if="!isEdit" type="primary" color="#1a202c">
+              <template #icon>
+                <div class="i-carbon-rocket" />
+              </template>
+              发布
+            </NButton>
+          </div>
+        </div>
+      </NCard>
+
+      <!-- 滚动内容区 -->
+      <div class="no-scrollbar flex flex-col flex-1 gap-4 overflow-y-auto">
+        <!-- 将 isEdit 状态传递给子组件 -->
+        <BasicInfoCard :is-edit="isEdit" />
+        <TeamListCard :is-edit="isEdit" />
+        <QuestionConfigCard :is-edit="isEdit" />
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { NCard, NDatePicker, NGrid, NGridItem, NInput, NInputNumber } from 'naive-ui'
+import { reactive } from 'vue'
+
+defineProps<{ isEdit: boolean }>()
+
+const form = reactive({
+  name: '第九届阅读之星大赛',
+  dateRange: null,
+  total: 40,
+  teamPerGroup: 4,
+  promoteCount: 4,
+})
+</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" :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" size="small" placeholder="单组" :show-button="false" />
+          <NInputNumber v-model:value="form.promoteCount" 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>

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

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { NButton, NCard, NGrid, NGridItem, NInputNumber, NSelect } from 'naive-ui'
+
+defineProps<{ isEdit: boolean }>()
+
+const scoreOptions = [
+  { label: '1分', value: '1' },
+  { label: '2分', value: '2' },
+  { label: '3分', value: '3' },
+  { label: '5分', value: '5' },
+  { label: '10分', value: '10' },
+]
+</script>
+
+<template>
+  <NCard :bordered="false" class="rounded-xl shadow-sm">
+    <div class="mb-6 flex items-center justify-between">
+      <div class="flex items-center gap-3 border-l-4 border-purple-500 pl-3">
+        <span class="text-lg text-gray-800 font-bold">题包配置</span>
+      </div>
+      <!-- 编辑模式下显示批量操作按钮 -->
+      <div v-if="isEdit" class="flex gap-3">
+        <NButton size="small" secondary>
+          批量重置
+        </NButton>
+        <NButton size="small" type="primary" secondary>
+          快速配置
+        </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-gray-50 border-gray-100'
+            : 'bg-orange-50/50 border-orange-100'"
+        >
+          <div class="flex items-center gap-2 text-gray-700 font-bold">
+            <div :class="type === 'regular' ? 'i-carbon-document-tasks text-blue-500' : 'i-carbon-timer text-orange-500'" />
+            {{ type === 'regular' ? '常规赛题包' : '加时赛题包' }}
+          </div>
+          <div class="text-xs" :class="type === 'regular' ? 'text-gray-400' : 'text-orange-400'">
+            配置详情
+          </div>
+        </div>
+
+        <!-- 列表区域 -->
+        <div
+          class="flex flex-col gap-3 border border-t-0 rounded-b-lg p-4"
+          :class="type === 'regular' ? 'border-gray-100' : 'border-orange-100 bg-orange-50/10'"
+        >
+          <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-gray-400' : 'text-orange-400'">
+              {{ type === 'regular' ? `第${i}题` : `PK${i}` }}:
+            </div>
+
+            <!-- 题型选择 -->
+            <NSelect
+              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
+                size="small"
+                default-value="1"
+                :options="scoreOptions"
+                :disabled="!isEdit"
+                placeholder="分值"
+              />
+            </div>
+
+            <!-- 需求4：倒计时输入 -->
+            <div class="w-20 flex-shrink-0">
+              <NInputNumber
+                size="small"
+                placeholder="秒"
+                :show-button="false"
+                :disabled="!isEdit"
+              >
+                <template #suffix>
+                  s
+                </template>
+              </NInputNumber>
+            </div>
+          </div>
+        </div>
+      </NGridItem>
+    </NGrid>
+  </NCard>
+</template>

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { NButton } from 'naive-ui'
+import { ref } from 'vue'
+
+const activeId = ref(1)
+const groups = ref(Array.from({ length: 10 }, (_, i) => ({
+  id: i + 1,
+  code: String(i + 1).padStart(2, '0'),
+  name: `第${['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][i]}组`,
+})))
+</script>
+
+<template>
+  <div>
+    <!-- 标题头 -->
+    <div class="flex items-center justify-between border-b border-gray-100 p-4">
+      <div class="flex items-center gap-2 text-gray-800 font-bold">
+        <div class="i-carbon-tree-view-alt text-blue-600" />
+        <span>分组情况</span>
+      </div>
+      <!-- 需求1：右侧改为添加按钮 -->
+      <NButton text class="text-blue-600 hover:text-blue-700">
+        <template #icon>
+          <div class="i-carbon-add-filled text-lg" />
+        </template>
+      </NButton>
+    </div>
+
+    <!-- 列表区域 -->
+    <div class="max-h-[calc(100vh-120px)] overflow-y-auto p-2">
+      <div
+        v-for="item in groups"
+        :key="item.id"
+        class="group mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-4 py-3 transition-colors"
+        :class="activeId === item.id ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50 text-gray-600'"
+        @click="activeId = item.id"
+      >
+        <span
+          class="text-xs font-mono"
+          :class="activeId === item.id ? 'text-blue-400' : 'text-gray-300'"
+        >
+          #{{ item.code }}
+        </span>
+        <span class="font-medium">{{ item.name }}</span>
+
+        <div
+          v-if="activeId === item.id"
+          class="ml-auto h-4 w-1 rounded-full bg-blue-600"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { NCard, NGrid, NGridItem, NInput } from 'naive-ui'
+
+defineProps<{ isEdit: boolean }>()
+</script>
+
+<template>
+  <NCard :bordered="false" class="rounded-xl shadow-sm">
+    <div class="mb-5 flex items-center gap-3 border-l-4 border-green-500 pl-3">
+      <span class="text-lg text-gray-800 font-bold">参与队伍</span>
+    </div>
+
+    <NGrid :x-gap="16" :y-gap="16" cols="1 m:2 l:4" responsive="screen">
+      <NGridItem v-for="i in 4" :key="i">
+        <div
+          class="relative border rounded-lg bg-gray-50 p-4 transition-all"
+          :class="isEdit ? 'border-blue-200 bg-white' : 'border-transparent hover:shadow-md'"
+        >
+          <div class="mb-3 inline-block rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-600 font-bold">
+            TEAM 0{{ i }}
+          </div>
+
+          <template v-if="isEdit">
+            <NInput size="small" placeholder="输入队伍名称" class="mb-2 font-bold" default-value="重庆树人小学队伍" />
+            <NInput size="tiny" placeholder="输入编号" class="font-mono" default-value="BPB-53H-1EN-RL" />
+          </template>
+
+          <template v-else>
+            <h4 class="m-0 mb-1 text-base text-gray-800 font-bold">
+              重庆树人小学队伍
+            </h4>
+            <p class="m-0 text-xs text-gray-400 font-mono">
+              BPB-53H-1EN-RL
+            </p>
+          </template>
+        </div>
+      </NGridItem>
+    </NGrid>
+  </NCard>
+</template>

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

@@ -0,0 +1,70 @@
+// src/views/competition/modules/data.ts
+
+export interface CompetitionItem {
+  id: string
+  title: string
+  date: string
+  teamCount: number
+  status: 'ongoing' | 'pending' // ongoing: 进行中, pending: 未开始
+  isHighlight?: boolean // 用于标记第一个卡片的特殊背景
+}
+
+export const competitionList: CompetitionItem[] = [
+  {
+    id: '1',
+    title: '阅读之星大赛\n辞海遨游环节', // 使用换行符或在组件中处理换行
+    date: '2026.01.12',
+    teamCount: 40,
+    status: 'ongoing',
+    isHighlight: true,
+  },
+  {
+    id: '2',
+    title: '诗词大会总决赛',
+    date: '2026.01.12',
+    teamCount: 32,
+    status: 'pending',
+  },
+  {
+    id: '3',
+    title: '趣味百科大作战',
+    date: '2026.01.12',
+    teamCount: 32,
+    status: 'pending',
+  },
+  {
+    id: '4',
+    title: '经典文学研读周',
+    date: '2026.01.12',
+    teamCount: 32,
+    status: 'pending',
+  },
+  {
+    id: '5',
+    title: '未来科学家阅读赛',
+    date: '2026.01.12',
+    teamCount: 32,
+    status: 'pending',
+  },
+  {
+    id: '6',
+    title: '历史人文知识赛',
+    date: '2026.01.12',
+    teamCount: 32,
+    status: 'pending',
+  },
+  {
+    id: '7',
+    title: '少儿绘本创意营',
+    date: '2026.01.12',
+    teamCount: 32,
+    status: 'pending',
+  },
+  {
+    id: '8',
+    title: '唐诗三百首挑战',
+    date: '2026.01.12',
+    teamCount: 32,
+    status: 'pending',
+  },
+]