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

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

apps/admin/src/views/_builtin/login/index.vue

@@ -56,6 +56,7 @@ const bgColor = computed(() => {
       <div class="w-400px lt-sm:w-300px">
         <header class="flex-y-center justify-between">
           <SystemLogo class="size-64px lt-sm:size-48px" />
+          <!-- <icon-local-read-logo class="text-64px text-success" /> -->
           <h3 class="text-28px text-primary font-500 lt-sm:text-22px">
             {{ $t('system.title') }}
           </h3>

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',
+  },
+]

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',
+  },
+]

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

@@ -1,17 +1,19 @@
 <script setup lang="ts">
 import { NButton, NGi, NGrid, NSpace } from 'naive-ui'
 import { computed } from 'vue'
+import { useRouterPush } from '@/hooks/common/router'
 import { useAppStore } from '@/store/modules/app'
 import CompetitionCard from './modules/competition-card.vue'
 import { competitionList } from './modules/data'
 
+const { routerPushByKey } = useRouterPush()
+
 // 引入 store 用于判断移动端布局 (与你提供的风格保持一致)
 const appStore = useAppStore()
 const gap = computed(() => (appStore.isMobile ? 12 : 16))
 
-// 模拟新增操作
 function handleAdd() {
-  window.$message?.success('点击了新增比赛活动')
+  routerPushByKey('competition_competition-add')
 }
 </script>
 
@@ -39,11 +41,7 @@ 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"
-      >
+      <NGi v-for="item in competitionList" :key="item.id" span="24 s:12 m:8 l:6">
         <CompetitionCard :item="item" />
       </NGi>
     </NGrid>

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

@@ -2,13 +2,16 @@
 import type { CompetitionItem } from './data'
 import { NButton, NCard, NTag } from 'naive-ui'
 import { computed } from 'vue'
+import { useRouterPush } from '@/hooks/common/router'
+
+const props = defineProps<Props>()
+
+const { routerPushByKey } = useRouterPush()
 
 interface Props {
   item: CompetitionItem
 }
 
-const props = defineProps<Props>()
-
 // 状态配置：颜色和文本
 const statusConfig = computed(() => {
   if (props.item.status === 'ongoing') {
@@ -19,13 +22,17 @@ const statusConfig = computed(() => {
 
 // 处理标题换行
 const formattedTitle = computed(() => props.item.title.replace(/\n/g, '<br/>'))
+
+function toDetail(item: CompetitionItem) {
+  routerPushByKey('competition_competition-detail', { query: { id: item.id } })
+}
 </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%;"
+    content-style="padding: 24px; display: flex; flex-direction: column; height: 100%;" @click="toDetail(item)"
   >
     <!-- 特殊背景装饰 (仅高亮卡片显示) -->
     <div
@@ -38,12 +45,7 @@ const formattedTitle = computed(() => props.item.title.replace(/\n/g, '<br/>'))
       <div>
         <!-- 状态标签 -->
         <div class="mb-4">
-          <NTag
-            :bordered="false"
-            size="small"
-            round
-            class="px-3 font-medium" :class="[statusConfig.bgClass]"
-          >
+          <NTag :bordered="false" size="small" round class="px-3 font-medium" :class="[statusConfig.bgClass]">
             {{ statusConfig.text }}
           </NTag>
         </div>
@@ -66,12 +68,7 @@ const formattedTitle = computed(() => props.item.title.replace(/\n/g, '<br/>'))
         <span class="text-xs text-gray-500 font-medium">
           {{ item.teamCount }} 支参赛队伍
         </span>
-        <NButton
-          text
-          type="primary"
-          size="small"
-          class="font-bold hover:underline"
-        >
+        <NButton text type="primary" size="small" class="font-bold hover:underline">
           查看配置详情
         </NButton>
       </div>