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

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

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

@@ -1,19 +1,69 @@
 <script setup lang="ts">
-import { NButton, NSpace } from 'naive-ui'
+import { NButton, NCard, NTabPane, NTabs } from 'naive-ui'
+import { ref } from 'vue'
+import { useRouterPush } from '@/hooks/common/router'
+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 { routerBack } = useRouterPush()
 </script>
 
 <template>
-  <div class="competition-add">
-    <NSpace vertical>
-      <NButton type="primary">
-        Add Competition
-      </NButton>
-    </NSpace>
+  <div class="margin-[10px auto] h-full w-100% flex flex-col gap-4 overflow-y-auto p-4">
+    <!-- 顶部 Header区域 -->
+    <NCard :bordered="false" class="rounded-xl shadow-sm">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-4">
+          <!-- 返回比赛列表 -->
+
+          <NButton circle secondary @click="routerBack">
+            <template #icon>
+              <icon-ic-baseline-arrow-back class="text-icon" />
+            </template>
+          </NButton>
+          <div>
+            <h2 class="m-0 text-xl font-bold">
+              比赛配置编辑
+            </h2>
+            <p class="m-0 text-xs text-gray-400">
+              正在编辑：阅读之星年度总决赛
+            </p>
+          </div>
+        </div>
+        <div class="flex gap-3">
+          <NButton>存为草稿</NButton>
+          <NButton type="primary">
+            发布比赛
+          </NButton>
+        </div>
+      </div>
+    </NCard>
+
+    <!-- 基础信息组件 -->
+    <BasicInfo />
+
+    <!-- Tab 切换区域 -->
+    <NCard :bordered="false" class="flex-1 rounded-xl shadow-sm">
+      <NTabs v-model:value="activeTab" type="line" animated>
+        <NTabPane name="group" tab="分组信息管理">
+          <GroupManagement />
+        </NTabPane>
+        <NTabPane name="hardware" tab="智能笔硬件绑定">
+          <HardwareBinding />
+        </NTabPane>
+        <NTabPane name="question" tab="题库与分值配置">
+          <QuestionConfig />
+        </NTabPane>
+      </NTabs>
+    </NCard>
   </div>
 </template>
 
-<style scoped lang="scss">
-.competition-add {
-  padding: 20px;
+<style scoped>
+:deep(.n-tabs-nav) {
+  padding-bottom: 12px;
 }
 </style>

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { NCard, NDatePicker, NForm, NFormItemGi, NGrid, NInput, NInputNumber } from 'naive-ui'
+import { reactive, useTemplateRef } from 'vue'
+
+const formRef = useTemplateRef('formRef')
+
+const formData = reactive({
+  name: '阅读之星年度总决赛',
+  startTime: null,
+  endTime: null,
+  groupCount: 40,
+  teamCount: 4,
+})
+
+defineExpose({
+  formRef,
+  formData,
+})
+</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>
+
+    <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>
+
+        <NFormItemGi label="开始时间">
+          <NDatePicker
+            v-model:value="formData.startTime" type="datetime" clearable class="w-full"
+            placeholder="年 / 月 / 日 --:--"
+          />
+        </NFormItemGi>
+
+        <NFormItemGi label="结束时间">
+          <NDatePicker
+            v-model:value="formData.endTime" type="datetime" clearable class="w-full"
+            placeholder="年 / 月 / 日 --:--"
+          />
+        </NFormItemGi>
+
+        <NFormItemGi label="小组总数">
+          <NInputNumber v-model:value="formData.groupCount" class="w-full" />
+        </NFormItemGi>
+
+        <NFormItemGi label="单组队伍">
+          <NInputNumber v-model:value="formData.teamCount" class="w-full" />
+        </NFormItemGi>
+      </NGrid>
+    </NForm>
+  </NCard>
+</template>

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { NButton, NGrid, NGridItem, NInput, NTag } from 'naive-ui'
+import { ref } from 'vue'
+
+// 模拟数据
+const groups = ref([
+  { name: '第一组 (精英赛区)', id: 'G01' },
+  { name: '第二组 (新锐赛区)', id: 'G02' },
+  { name: '第三组', id: 'G03' },
+  { name: '第四组', id: 'G04' },
+])
+</script>
+
+<template>
+  <div class="py-4">
+    <!-- 操作栏 -->
+    <div class="mb-6 flex items-center justify-between">
+      <div class="text-sm text-gray-400">
+        提示：您可以通过Excel模版批量导入队伍名称
+      </div>
+      <div class="flex gap-3">
+        <NButton secondary>
+          <template #icon>
+            <div class="i-carbon-document-import" />
+          </template>
+          Excel批量导入
+        </NButton>
+        <NButton type="primary" color="#1a202c">
+          <template #icon>
+            <div class="i-carbon-add" />
+          </template>
+          添加分组
+        </NButton>
+      </div>
+    </div>
+
+    <!-- 分组卡片列表 -->
+    <NGrid :x-gap="24" :y-gap="24" cols="1 m:2" 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>
+
+          <NGrid :x-gap="16" :y-gap="16" :cols="2">
+            <NGridItem v-for="i in 4" :key="i">
+              <div class="mb-1 text-xs text-gray-400">
+                NO.0{{ i }} 队名
+              </div>
+              <NInput placeholder="输入队伍名称" />
+            </NGridItem>
+          </NGrid>
+        </div>
+      </NGridItem>
+    </NGrid>
+  </div>
+</template>

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

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { NGrid, NGridItem, NInput } from 'naive-ui'
+import { ref } 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 },
+    ],
+  },
+])
+</script>
+
+<template>
+  <div class="py-4">
+    <!-- 状态提示栏 -->
+    <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>
+        <div class="text-sm text-indigo-900 font-bold">
+          自动发现模式已开启
+        </div>
+        <div class="mt-1 text-xs text-indigo-400">
+          系统将自动扫描正在书写的点阵笔并提示绑定。请确保基站已通电。
+        </div>
+      </div>
+    </div>
+
+    <!-- 硬件状态卡片 -->
+    <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>
+
+          <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">
+                {{ 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'"
+              />
+            </div>
+          </div>
+        </div>
+      </NGridItem>
+    </NGrid>
+  </div>
+</template>
+
+<style scoped>
+/* 针对 Input 进行样式微调以匹配设计稿 */
+:deep(.n-input) {
+  background-color: transparent;
+}
+:deep(.n-input .n-input__input-el) {
+  text-align: right;
+}
+</style>

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

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { NGrid, NGridItem, NSelect } from 'naive-ui'
+import { ref } from 'vue'
+
+const questionOptions = [
+  { label: '汉字听写 - 根据提示书写汉字', value: 'hanzi' },
+  { label: '同音字辨析 - 根据拼音书写', value: 'tongyin' },
+  { label: '偏旁部首 - 按要求写字', value: 'pianpang' },
+  { label: '词语听写 - 综合练习', value: 'ciyu' },
+  { label: '成语填空 - 四字成语', value: 'chengyu' },
+  { label: '反义词挑战', value: 'fanyi' },
+  { label: '近义词挑战', value: 'jinyi' },
+]
+
+const pkOptions = [
+  { label: '极速成语接龙 - 每题10秒', value: 'speed10' },
+  { label: '极速成语接龙 - 每题20秒', value: 'speed20' },
+]
+
+const regularQuestions = ref([
+  { value: 'hanzi' },
+  { value: 'tongyin' },
+  { value: 'pianpang' },
+  { value: 'ciyu' },
+  { value: 'chengyu' },
+  { value: 'fanyi' },
+  { value: 'jinyi' },
+])
+
+const pkQuestions = ref([
+  { value: 'speed10' },
+  { value: 'speed10' },
+  { value: 'speed10' },
+  { value: 'speed10' },
+  { value: 'speed10' },
+])
+</script>
+
+<template>
+  <div class="py-4">
+    <NGrid :x-gap="48" :y-gap="24" cols="1 l:2" responsive="screen">
+      <!-- 左侧：常规赛题包 -->
+      <NGridItem>
+        <div class="h-full rounded-xl bg-gray-50/50 p-6">
+          <div class="mb-6 flex items-center gap-2 text-gray-800 font-bold">
+            <div class="i-carbon-notebook text-lg text-blue-500" />
+            <span>常规赛题包</span>
+          </div>
+
+          <div class="flex flex-col gap-4">
+            <div
+              v-for="(item, idx) in regularQuestions"
+              :key="idx"
+              class="flex items-center gap-4"
+            >
+              <span class="w-12 text-xs text-gray-400 font-medium">第{{ idx + 1 }}题</span>
+              <NSelect
+                v-model:value="item.value"
+                :options="questionOptions"
+                placeholder="请选择题型"
+                class="flex-1 bg-white"
+              />
+            </div>
+          </div>
+        </div>
+      </NGridItem>
+
+      <!-- 右侧：加时赛 (PK环节) -->
+      <NGridItem>
+        <div class="h-full border border-orange-100/50 rounded-xl bg-orange-50/30 p-6">
+          <div class="mb-6 flex items-center gap-2 text-gray-800 font-bold">
+            <div class="i-carbon-timer text-lg text-orange-500" />
+            <span>加时赛 (PK环节)</span>
+          </div>
+
+          <div class="flex flex-col gap-4">
+            <div
+              v-for="(item, idx) in pkQuestions"
+              :key="idx"
+              class="flex items-center gap-4"
+            >
+              <span class="w-8 text-xs text-orange-400 font-medium">PK{{ idx + 1 }}</span>
+              <NSelect
+                v-model:value="item.value"
+                :options="pkOptions"
+                placeholder="请选择PK规则"
+                class="flex-1 bg-white"
+              />
+            </div>
+          </div>
+        </div>
+      </NGridItem>
+    </NGrid>
+  </div>
+</template>

apps/admin/src/views/competition/competition-add/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',
+  },
+]