From 30f2115877b83cd921dd87170e5361502d3c0f45 Mon Sep 17 00:00:00 2001
From: laobinghu <liuzihu@126.com>
Date: Sun, 22 Mar 2026 16:03:39 +0800
Subject: [PATCH] feat: dark mode adaptation for main pages

Add dark mode CSS variable overrides to index, events, teams, results, and scoreboard pages for consistent theme switching
---
 app/pages/events.vue     | 135 +++++++++++++++++++++++++++++++++++----
 app/pages/index.vue      |  62 ++++++++++++------
 app/pages/results.vue    |  67 ++++++++++++++++++-
 app/pages/scoreboard.vue |  88 ++++++++++++++++++++++---
 app/pages/teams.vue      | 103 ++++++++++++++++++++++++-----
 5 files changed, 395 insertions(+), 60 deletions(-)

diff --git a/app/pages/events.vue b/app/pages/events.vue
index 412370e..0b90ba6 100644
--- a/app/pages/events.vue
+++ b/app/pages/events.vue
@@ -9,6 +9,7 @@
       </template>
 
       <el-form :inline="true" class="filter-form">
+        <!-- 类别筛选 -->
         <el-form-item label="类别">
           <el-select v-model="filters.category" placeholder="全部" clearable @change="loadEvents">
             <el-option label="田赛" value="田赛" />
@@ -16,14 +17,30 @@
             <el-option label="团体赛" value="团体赛" />
           </el-select>
         </el-form-item>
-        <el-form-item label="组别">
-          <el-select v-model="filters.group" placeholder="全部" clearable @change="loadEvents">
-            <el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
+
+        <!-- 年级筛选 -->
+        <el-form-item label="年级">
+          <el-select v-model="filters.grade" placeholder="全部" clearable @change="onFilterChange">
+            <el-option v-for="g in config.grades" :key="g" :label="g" :value="g" />
+          </el-select>
+        </el-form-item>
+
+        <!-- 班级类型筛选 -->
+        <el-form-item label="班级类型">
+          <el-select v-model="filters.classType" placeholder="全部" clearable :disabled="!filters.grade" @change="onFilterChange">
+            <el-option v-for="c in config.classTypes" :key="c" :label="c" :value="c" />
+          </el-select>
+        </el-form-item>
+
+        <!-- 性别筛选 -->
+        <el-form-item label="性别">
+          <el-select v-model="filters.gender" placeholder="全部" clearable :disabled="!filters.grade" @change="onFilterChange">
+            <el-option v-for="g in config.genders" :key="g" :label="g" :value="g" />
           </el-select>
         </el-form-item>
       </el-form>
 
-      <el-table :data="events" border stripe class="events-table">
+      <el-table :data="events" border stripe class="events-table transition-base">
         <el-table-column prop="id" label="ID" width="80" class-name="col-id" />
         <el-table-column prop="name" label="项目名称" />
         <el-table-column prop="category" label="类别" width="120" class-name="col-category" />
@@ -60,7 +77,12 @@
         </el-form-item>
         <el-form-item label="组别">
           <el-select v-model="form.event_group" placeholder="请选择">
-            <el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
+            <el-option 
+              v-for="g in allGroupOptions" 
+              :key="g.value" 
+              :label="g.label" 
+              :value="g.value" 
+            />
           </el-select>
         </el-form-item>
       </el-form>
@@ -74,11 +96,22 @@
 
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
+import { computed } from 'vue'
 
 const events = ref([])
 const showAddDialog = ref(false)
-const filters = ref({ category: '', group: '' })
-const groups = ref([])
+const config = ref({
+  grades: [] as string[],
+  classTypes: [] as string[],
+  genders: [] as string[],
+  all: [] as string[]
+})
+const filters = ref({
+  category: '',
+  grade: '',
+  classType: '',
+  gender: ''
+})
 const eventTypes = ref({})
 
 const form = ref({
@@ -93,15 +126,15 @@ const availableEvents = computed(() => {
   return eventTypes.value[form.value.category] || []
 })
 
-const onCategoryChange = () => {
-  form.value.name = ''
-  form.value.unit = ''
-}
+// 为添加项目对话框生成所有可用的组别选项（从config API获取）
+const allGroupOptions = computed(() => {
+  return (config.value.all || []).map(g => ({ value: g, label: g }))
+})
 
 const loadConfig = async () => {
   try {
     const res = await $fetch('/api/config')
-    groups.value = res.data.groups
+    config.value = res.data.groups
     eventTypes.value = res.data.eventTypes
   } catch (error) {
     ElMessage.error('加载配置失败')
@@ -112,7 +145,9 @@ const loadEvents = async () => {
   try {
     const params = new URLSearchParams()
     if (filters.value.category) params.append('category', filters.value.category)
-    if (filters.value.group) params.append('group', filters.value.group)
+    if (filters.value.grade) params.append('grade', filters.value.grade)
+    if (filters.value.classType) params.append('classType', filters.value.classType)
+    if (filters.value.gender) params.append('gender', filters.value.gender)
     
     const res = await $fetch(`/api/events?${params}`)
     events.value = res.data
@@ -121,6 +156,15 @@ const loadEvents = async () => {
   }
 }
 
+const onFilterChange = () => {
+  loadEvents()
+}
+
+const onCategoryChange = () => {
+  form.value.name = ''
+  form.value.unit = ''
+}
+
 const addEvent = async () => {
   try {
     const selectedEvent = availableEvents.value.find(e => e.name === form.value.name)
@@ -166,10 +210,75 @@ onMounted(() => {
   align-items: center;
 }
 
+.card-header span {
+  color: var(--header-text);
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .filter-form {
   margin-bottom: 20px;
 }
 
+/* 确保表格和表单在暗色模式下文字清晰 */
+:deep(.el-card) {
+  background-color: var(--header-bg);
+  color: var(--header-text);
+}
+
+:deep(.el-card .el-card__header) {
+  border-bottom-color: var(--header-border);
+}
+
+:deep(.el-form-item__label) {
+  color: var(--header-text) !important;
+}
+
+:deep(.el-table) {
+  color: var(--header-text);
+}
+
+:deep(.el-table th) {
+  background-color: var(--header-bg);
+  color: var(--header-text);
+}
+
+:deep(.el-table tr) {
+  background-color: var(--header-bg);
+}
+
+:deep(.el-table td) {
+  color: var(--header-text);
+}
+
+/* Table row staggered animations */
+.events-table :deep(.el-table__body tr) {
+  animation: slide-in-up 0.3s ease-out;
+  animation-fill-mode: both;
+}
+
+.events-table :deep(.el-table__body tr:nth-child(1)) { animation-delay: 0.05s; }
+.events-table :deep(.el-table__body tr:nth-child(2)) { animation-delay: 0.1s; }
+.events-table :deep(.el-table__body tr:nth-child(3)) { animation-delay: 0.15s; }
+.events-table :deep(.el-table__body tr:nth-child(4)) { animation-delay: 0.2s; }
+.events-table :deep(.el-table__body tr:nth-child(5)) { animation-delay: 0.25s; }
+.events-table :deep(.el-table__body tr:nth-child(6)) { animation-delay: 0.3s; }
+.events-table :deep(.el-table__body tr:nth-child(7)) { animation-delay: 0.35s; }
+.events-table :deep(.el-table__body tr:nth-child(8)) { animation-delay: 0.4s; }
+.events-table :deep(.el-table__body tr:nth-child(9)) { animation-delay: 0.45s; }
+.events-table :deep(.el-table__body tr:nth-child(10)) { animation-delay: 0.5s; }
+
+@keyframes slide-in-up {
+  0% {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @media (max-width: 900px) {
   .card-header {
     flex-direction: column;
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 89e58eb..827291a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="home-container">
-    <el-card class="welcome-card">
+    <el-card class="welcome-card slide-down-enter">
       <h1>欢迎使用运动会记分板系统</h1>
       <p>本系统用于管理运动会的比赛项目、队伍和成绩</p>
     </el-card>
 
     <el-row :gutter="20" class="stats-row">
       <el-col :xs="12" :sm="12" :md="6" :lg="6">
-        <el-card class="stat-card">
+        <el-card class="stat-card bounce-enter" :class="staggerClass(0)">
           <div class="stat-content">
             <el-icon class="stat-icon" color="#409eff"><Trophy /></el-icon>
             <div>
@@ -18,7 +18,7 @@
         </el-card>
       </el-col>
       <el-col :xs="12" :sm="12" :md="6" :lg="6">
-        <el-card class="stat-card">
+        <el-card class="stat-card bounce-enter" :class="staggerClass(1)">
           <div class="stat-content">
             <el-icon class="stat-icon" color="#67c23a"><UserFilled /></el-icon>
             <div>
@@ -29,7 +29,7 @@
         </el-card>
       </el-col>
       <el-col :xs="12" :sm="12" :md="6" :lg="6">
-        <el-card class="stat-card">
+        <el-card class="stat-card bounce-enter" :class="staggerClass(2)">
           <div class="stat-content">
             <el-icon class="stat-icon" color="#e6a23c"><Edit /></el-icon>
             <div>
@@ -40,7 +40,7 @@
         </el-card>
       </el-col>
       <el-col :xs="12" :sm="12" :md="6" :lg="6">
-        <el-card class="stat-card">
+        <el-card class="stat-card bounce-enter" :class="staggerClass(3)">
           <div class="stat-content">
             <el-icon class="stat-icon" color="#f56c6c"><DataLine /></el-icon>
             <div>
@@ -54,38 +54,37 @@
 
     <el-row :gutter="20">
       <el-col :xs="24" :sm="24" :md="12" :lg="12">
-        <el-card>
+        <el-card class="slide-left-enter">
           <template #header>
             <span>快速操作</span>
           </template>
           <div class="quick-actions">
             <el-row :gutter="10">
               <el-col :span="12">
-                <el-button type="primary" class="action-btn" @click="navigateTo('/events')">管理比赛项目</el-button>
+                <el-button type="primary" class="action-btn zoom-enter" @click="navigateTo('/events')">管理比赛项目</el-button>
               </el-col>
               <el-col :span="12">
-                <el-button type="success" class="action-btn" @click="navigateTo('/teams')">管理队伍</el-button>
+                <el-button type="success" class="action-btn zoom-enter" :class="staggerClass(1)" @click="navigateTo('/teams')">管理队伍</el-button>
               </el-col>
               <el-col :span="12">
-                <el-button type="warning" class="action-btn" @click="navigateTo('/results')">录入成绩</el-button>
+                <el-button type="warning" class="action-btn zoom-enter" :class="staggerClass(2)" @click="navigateTo('/results')">录入成绩</el-button>
               </el-col>
               <el-col :span="12">
-                <el-button type="info" class="action-btn" @click="navigateTo('/scoreboard')">查看记分板</el-button>
+                <el-button type="info" class="action-btn zoom-enter" :class="staggerClass(3)" @click="navigateTo('/scoreboard')">查看记分板</el-button>
               </el-col>
             </el-row>
           </div>
         </el-card>
       </el-col>
       <el-col :xs="24" :sm="24" :md="12" :lg="12">
-        <el-card>
+        <el-card class="slide-right-enter">
           <template #header>
             <span>系统说明</span>
           </template>
           <ul class="system-info">
-            <li>田赛：跳高、跳远、掷铅球</li>
-            <li>径赛：100m、200m、400m、4×100m、4×400m、20×50m</li>
-            <li>团体赛：旱地龙舟、跳长绳、折返跑</li>
-            <li>组别：教师组、航空班组、体育班组、文化班甲组、文化班乙组</li>
+            <li v-for="(item, index) in systemInfo" :key="index" class="fade-enter" :class="staggerClass(index)">
+              {{ item }}
+            </li>
           </ul>
         </el-card>
       </el-col>
@@ -96,6 +95,7 @@
 <script setup lang="ts">
 import { Trophy, UserFilled, Edit, DataLine } from '@element-plus/icons-vue'
 import { fetchEvents, fetchTeams, fetchResults } from '~/modules/scoreboard/api'
+import { computed } from 'vue'
 
 const stats = ref({
   events: 0,
@@ -104,6 +104,26 @@ const stats = ref({
   categories: 3
 })
 
+// System info list
+const systemInfo = computed(() => [
+  '田赛：跳高、跳远、掷铅球',
+  '径赛：100m、200m、400m、4×100m、4×400m、20×50m',
+  '团体赛：旱地龙舟、跳长绳、折返跑',
+  '组别：教师组、航空班组、体育班组、文化班甲组、文化班乙组'
+])
+
+// Staggered animation helper
+const staggerClass = (index: number) => {
+  const classes = [
+    'stagger-1',
+    'stagger-2', 
+    'stagger-3',
+    'stagger-4',
+    'stagger-5'
+  ]
+  return classes[index] || ''
+}
+
 onMounted(async () => {
   try {
     const [eventsRes, teamsRes, resultsRes] = await Promise.all([
@@ -133,12 +153,12 @@ onMounted(async () => {
 }
 
 .welcome-card h1 {
-  color: #303133;
+  color: var(--header-text);
   margin-bottom: 10px;
 }
 
 .welcome-card p {
-  color: #909399;
+  color: var(--footer-text);
   font-size: 16px;
 }
 
@@ -164,12 +184,12 @@ onMounted(async () => {
 .stat-value {
   font-size: 32px;
   font-weight: bold;
-  color: #303133;
+  color: var(--header-text);
 }
 
 .stat-label {
   font-size: 14px;
-  color: #909399;
+  color: var(--footer-text);
   margin-top: 5px;
 }
 
@@ -190,8 +210,8 @@ onMounted(async () => {
 
 .system-info li {
   padding: 8px 0;
-  border-bottom: 1px solid #ebeef5;
-  color: #606266;
+  border-bottom: 1px solid var(--header-border);
+  color: var(--header-text);
 }
 
 .system-info li:last-child {
diff --git a/app/pages/results.vue b/app/pages/results.vue
index 5646219..141a0c9 100644
--- a/app/pages/results.vue
+++ b/app/pages/results.vue
@@ -21,7 +21,7 @@
         </el-form-item>
       </el-form>
 
-      <el-table :data="results" border stripe class="results-table">
+      <el-table :data="results" border stripe class="results-table transition-base">
         <el-table-column prop="event_name" label="项目名称" />
         <el-table-column prop="team_name" label="队伍" />
         <el-table-column prop="team_group" label="组别" width="150" class-name="col-group" />
@@ -184,10 +184,75 @@ onMounted(() => {
   align-items: center;
 }
 
+.card-header span {
+  color: var(--header-text);
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .filter-form {
   margin-bottom: 20px;
 }
 
+/* 确保表格和表单在暗色模式下文字清晰 */
+:deep(.el-card) {
+  background-color: var(--header-bg);
+  color: var(--header-text);
+}
+
+:deep(.el-card .el-card__header) {
+  border-bottom-color: var(--header-border);
+}
+
+:deep(.el-form-item__label) {
+  color: var(--header-text) !important;
+}
+
+:deep(.el-table) {
+  color: var(--header-text);
+}
+
+:deep(.el-table th) {
+  background-color: var(--header-bg);
+  color: var(--header-text);
+}
+
+:deep(.el-table tr) {
+  background-color: var(--header-bg);
+}
+
+:deep(.el-table td) {
+  color: var(--header-text);
+}
+
+/* Table row staggered animations */
+.results-table :deep(.el-table__body tr) {
+  animation: slide-in-up 0.3s ease-out;
+  animation-fill-mode: both;
+}
+
+.results-table :deep(.el-table__body tr:nth-child(1)) { animation-delay: 0.05s; }
+.results-table :deep(.el-table__body tr:nth-child(2)) { animation-delay: 0.1s; }
+.results-table :deep(.el-table__body tr:nth-child(3)) { animation-delay: 0.15s; }
+.results-table :deep(.el-table__body tr:nth-child(4)) { animation-delay: 0.2s; }
+.results-table :deep(.el-table__body tr:nth-child(5)) { animation-delay: 0.25s; }
+.results-table :deep(.el-table__body tr:nth-child(6)) { animation-delay: 0.3s; }
+.results-table :deep(.el-table__body tr:nth-child(7)) { animation-delay: 0.35s; }
+.results-table :deep(.el-table__body tr:nth-child(8)) { animation-delay: 0.4s; }
+.results-table :deep(.el-table__body tr:nth-child(9)) { animation-delay: 0.45s; }
+.results-table :deep(.el-table__body tr:nth-child(10)) { animation-delay: 0.5s; }
+
+@keyframes slide-in-up {
+  0% {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @media (max-width: 900px) {
   .card-header {
     flex-direction: column;
diff --git a/app/pages/scoreboard.vue b/app/pages/scoreboard.vue
index e8b42e9..c30c413 100644
--- a/app/pages/scoreboard.vue
+++ b/app/pages/scoreboard.vue
@@ -9,9 +9,24 @@
       </template>
 
       <el-form :inline="true" class="filter-form">
-        <el-form-item label="组别">
-          <el-select v-model="filters.group" placeholder="全部" clearable @change="loadScoreboard">
-            <el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
+        <!-- 年级筛选 -->
+        <el-form-item label="年级">
+          <el-select v-model="filters.grade" placeholder="全部" clearable @change="onFilterChange">
+            <el-option v-for="g in config.grades" :key="g" :label="g" :value="g" />
+          </el-select>
+        </el-form-item>
+
+        <!-- 班级类型筛选 -->
+        <el-form-item label="班级类型">
+          <el-select v-model="filters.classType" placeholder="全部" clearable :disabled="!filters.grade" @change="onFilterChange">
+            <el-option v-for="c in config.classTypes" :key="c" :label="c" :value="c" />
+          </el-select>
+        </el-form-item>
+
+        <!-- 性别筛选 -->
+        <el-form-item label="性别">
+          <el-select v-model="filters.gender" placeholder="全部" clearable :disabled="!filters.grade" @change="onFilterChange">
+            <el-option v-for="g in config.genders" :key="g" :label="g" :value="g" />
           </el-select>
         </el-form-item>
       </el-form>
@@ -91,8 +106,16 @@ import { ElMessage } from 'element-plus'
 import { Trophy } from '@element-plus/icons-vue'
 
 const scoreboard = ref([])
-const groups = ref([])
-const filters = ref({ group: '' })
+const config = ref({
+  grades: [] as string[],
+  classTypes: [] as string[],
+  genders: [] as string[]
+})
+const filters = ref({
+  grade: '',
+  classType: '',
+  gender: ''
+})
 
 const topGold = computed(() => {
   return [...scoreboard.value]
@@ -107,7 +130,7 @@ const topScore = computed(() => {
 const loadConfig = async () => {
   try {
     const res = await $fetch('/api/config')
-    groups.value = res.data.groups
+    config.value = res.data.groups
   } catch (error) {
     ElMessage.error('加载配置失败')
   }
@@ -116,7 +139,9 @@ const loadConfig = async () => {
 const loadScoreboard = async () => {
   try {
     const params = new URLSearchParams()
-    if (filters.value.group) params.append('group', filters.value.group)
+    if (filters.value.grade) params.append('grade', filters.value.grade)
+    if (filters.value.classType) params.append('classType', filters.value.classType)
+    if (filters.value.gender) params.append('gender', filters.value.gender)
     
     const res = await $fetch(`/api/scoreboard?${params}`)
     scoreboard.value = res.data
@@ -125,6 +150,10 @@ const loadScoreboard = async () => {
   }
 }
 
+const onFilterChange = () => {
+  loadScoreboard()
+}
+
 onMounted(() => {
   loadConfig()
   loadScoreboard()
@@ -143,16 +172,54 @@ onMounted(() => {
   align-items: center;
 }
 
+.card-header span {
+  color: var(--header-text);
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .filter-form {
   margin-bottom: 20px;
 }
 
+/* 确保表格和表单在暗色模式下文字清晰 */
+:deep(.el-card) {
+  background-color: var(--header-bg);
+  color: var(--header-text);
+}
+
+:deep(.el-card .el-card__header) {
+  border-bottom-color: var(--header-border);
+}
+
+:deep(.el-form-item__label) {
+  color: var(--header-text) !important;
+}
+
+:deep(.el-table) {
+  color: var(--header-text);
+}
+
+:deep(.el-table th) {
+  background-color: var(--header-bg);
+  color: var(--header-text);
+}
+
+:deep(.el-table tr) {
+  background-color: var(--header-bg);
+}
+
+:deep(.el-table td) {
+  color: var(--header-text);
+}
+
 .rank-cell {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 18px;
   font-weight: bold;
+  color: var(--header-text);
 }
 
 .medals {
@@ -173,8 +240,8 @@ onMounted(() => {
 
 .rules-list li {
   padding: 8px 0;
-  border-bottom: 1px solid #ebeef5;
-  color: #606266;
+  border-bottom: 1px solid var(--header-border);
+  color: var(--header-text);
 }
 
 .rules-list li:last-child {
@@ -186,7 +253,8 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
-  border-bottom: 1px solid #ebeef5;
+  border-bottom: 1px solid var(--header-border);
+  color: var(--header-text);
 }
 
 .top-item:last-child {
diff --git a/app/pages/teams.vue b/app/pages/teams.vue
index 376835d..55897b8 100644
--- a/app/pages/teams.vue
+++ b/app/pages/teams.vue
@@ -9,17 +9,32 @@
       </template>
 
       <el-form :inline="true" class="filter-form">
-        <el-form-item label="组别">
-          <el-select v-model="filters.group" placeholder="全部" clearable @change="loadTeams">
-            <el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
+        <!-- 年级筛选 -->
+        <el-form-item label="年级">
+          <el-select v-model="filters.grade" placeholder="全部" clearable @change="onFilterChange">
+            <el-option v-for="g in config.grades" :key="g" :label="g" :value="g" />
+          </el-select>
+        </el-form-item>
+
+        <!-- 班级类型筛选 -->
+        <el-form-item label="班级类型">
+          <el-select v-model="filters.classType" placeholder="全部" clearable :disabled="!filters.grade" @change="onFilterChange">
+            <el-option v-for="c in config.classTypes" :key="c" :label="c" :value="c" />
+          </el-select>
+        </el-form-item>
+
+        <!-- 性别筛选 -->
+        <el-form-item label="性别">
+          <el-select v-model="filters.gender" placeholder="全部" clearable :disabled="!filters.grade" @change="onFilterChange">
+            <el-option v-for="g in config.genders" :key="g" :label="g" :value="g" />
           </el-select>
         </el-form-item>
       </el-form>
 
       <el-table :data="teams" border stripe class="teams-table">
-        <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column prop="name" label="队伍名称" />
-        <el-table-column prop="team_group" label="组别" width="200" class-name="col-group" />
+        <el-table-column prop="id" label="ID" width="80"></el-table-column>
+        <el-table-column prop="name" label="队伍名称"></el-table-column>
+        <el-table-column prop="team_group" label="组别" width="200" class-name="col-group"></el-table-column>
         <el-table-column prop="created_at" label="创建时间" width="200" class-name="col-time">
           <template #default="{ row }">
             {{ new Date(row.created_at).toLocaleString('zh-CN') }}
@@ -35,7 +50,7 @@
         </el-form-item>
         <el-form-item label="组别">
           <el-select v-model="form.team_group" placeholder="请选择组别">
-            <el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
+            <el-option v-for="g in allGroupOptions" :key="g.value" :label="g.label" :value="g.value" />
           </el-select>
         </el-form-item>
       </el-form>
@@ -49,30 +64,47 @@
 
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
+import { computed } from 'vue'
 
 const teams = ref([])
 const showAddDialog = ref(false)
-const filters = ref({ group: '' })
-const groups = ref([])
+const config = ref({
+  grades: [] as string[],
+  classTypes: [] as string[],
+  genders: [] as string[],
+  all: [] as string[]
+})
+const filters = ref({
+  grade: '',
+  classType: '',
+  gender: ''
+})
 
 const form = ref({
   name: '',
   team_group: ''
 })
 
+// 为添加队伍对话框生成所有可用的组别选项（从config API获取）
+const allGroupOptions = computed(() => {
+  return (config.value.all || []).map(g => ({ value: g, label: g }))
+})
+
 const loadConfig = async () => {
   try {
     const res = await $fetch('/api/config')
-    groups.value = res.data.groups
-  } catch (error) {
-    ElMessage.error('加载配置失败')
-  }
-}
+    config.value = res.data.groups
+   } catch (error) {
+     ElMessage.error('加载配置失败')
+   }
+ }
 
 const loadTeams = async () => {
   try {
     const params = new URLSearchParams()
-    if (filters.value.group) params.append('group', filters.value.group)
+    if (filters.value.grade) params.append('grade', filters.value.grade)
+    if (filters.value.classType) params.append('classType', filters.value.classType)
+    if (filters.value.gender) params.append('gender', filters.value.gender)
     
     const res = await $fetch(`/api/teams?${params}`)
     teams.value = res.data
@@ -81,6 +113,10 @@ const loadTeams = async () => {
   }
 }
 
+const onFilterChange = () => {
+  loadTeams()
+}
+
 const addTeam = async () => {
   if (!form.value.name || !form.value.team_group) {
     ElMessage.error('请填写完整信息')
@@ -120,10 +156,47 @@ onMounted(() => {
   align-items: center;
 }
 
+.card-header span {
+  color: var(--header-text);
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .filter-form {
   margin-bottom: 20px;
 }
 
+/* 确保表格和表单在暗色模式下文字清晰 */
+:deep(.el-card) {
+  background-color: var(--header-bg);
+  color: var(--header-text);
+}
+
+:deep(.el-card .el-card__header) {
+  border-bottom-color: var(--header-border);
+}
+
+:deep(.el-form-item__label) {
+  color: var(--header-text) !important;
+}
+
+:deep(.el-table) {
+  color: var(--header-text);
+}
+
+:deep(.el-table th) {
+  background-color: var(--header-bg);
+  color: var(--header-text);
+}
+
+:deep(.el-table tr) {
+  background-color: var(--header-bg);
+}
+
+:deep(.el-table td) {
+  color: var(--header-text);
+}
+
 @media (max-width: 900px) {
   .card-header {
     flex-direction: column;