refactor: simplify dark mode with VueUse + Element Plus

Remove custom CSS variable overrides, use Element Plus built-in dark mode with VueUse useDark

app/app.vue

@@ -4,114 +4,3 @@
     <NuxtPage />
   </NuxtLayout>
 </template>
-
-<style>
-/* Page Transitions - Enhanced with multiple effects */
-.page-enter-active,
-.page-leave-active {
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  position: absolute;
-  width: 100%;
-}
-
-.page-enter-from {
-  opacity: 0;
-  transform: translateY(20px) scale(0.98);
-  filter: blur(2px);
-}
-
-.page-leave-to {
-  opacity: 0;
-  transform: translateY(-20px) scale(1.02);
-  filter: blur(2px);
-}
-
-/* Slide transitions for dynamic direction */
-.page-slide-left-enter-from {
-  opacity: 0;
-  transform: translateX(50px);
-}
-
-.page-slide-left-leave-to {
-  opacity: 0;
-  transform: translateX(-50px);
-}
-
-.page-slide-right-enter-from {
-  opacity: 0;
-  transform: translateX(-50px);
-}
-
-.page-slide-right-leave-to {
-  opacity: 0;
-  transform: translateX(50px);
-}
-
-/* Zoom transitions */
-.page-zoom-enter-from {
-  opacity: 0;
-  transform: scale(0.9);
-}
-
-.page-zoom-leave-to {
-  opacity: 0;
-  transform: scale(1.1);
-}
-
-/* Layout Transitions - Enhanced */
-.layout-enter-active,
-.layout-leave-active {
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  position: absolute;
-  width: 100%;
-}
-
-.layout-enter-from {
-  opacity: 0;
-  filter: grayscale(100%) brightness(0.8);
-  transform: scale(0.95);
-}
-
-.layout-leave-to {
-  opacity: 0;
-  filter: grayscale(100%) brightness(1.2);
-  transform: scale(1.05);
-}
-
-  /* Collapse transition for sidebar */
-  .sidebar-collapse-enter-active,
-  .sidebar-collapse-leave-active {
-    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  /* Custom dialog/drawer transitions */
-  .dialog-zoom :deep(.el-dialog) {
-    animation: custom-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  .drawer-transition :deep(.el-drawer) {
-    animation: custom-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  @keyframes custom-zoom {
-    0% {
-      opacity: 0;
-      transform: scale(0.8) translateY(-20px);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
-  }
-
-  @keyframes custom-slide-in {
-    0% {
-      opacity: 0;
-      transform: translateX(-100%);
-    }
-    100% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-  </style>

app/assets/css/dark-mode.css

@@ -0,0 +1,42 @@
+/* 自定义 CSS 变量（Element Plus 组件由其内置暗色模式处理） */
+:root {
+  /* 侧边栏变量 */
+  --sidebar-bg: #1e293b;
+  --sidebar-header-bg: #0f172a;
+  --sidebar-hover-bg: #334155;
+  --sidebar-text: #94a3b8;
+  --sidebar-active-text: #ffffff;
+  --sidebar-active-bg: #3b82f6;
+  
+  /* 通用文本变量（用于非 Element Plus 元素） */
+  --el-text-color-primary: #303133;
+  --el-text-color-regular: #606266;
+  --el-text-color-secondary: #909399;
+  --el-border-color: #dcdfe6;
+  --el-bg-color: #ffffff;
+  --el-bg-color-page: #f2f3f5;
+}
+
+html.dark {
+  /* 侧边栏暗色变量 */
+  --sidebar-bg: #0f172a;
+  --sidebar-header-bg: #020617;
+  --sidebar-hover-bg: #1e293b;
+  --sidebar-text: #cbd5e1;
+  --sidebar-active-text: #ffffff;
+  --sidebar-active-bg: #3b82f6;
+  
+  /* 通用文本暗色变量 */
+  --el-text-color-primary: #e5eaf3;
+  --el-text-color-regular: #cfd3dc;
+  --el-text-color-secondary: #a3a6ad;
+  --el-border-color: #4c4d4f;
+  --el-bg-color: #141414;
+  --el-bg-color-page: #0a0a0a;
+}
+
+/* 全局基础样式 */
+body {
+  color: var(--el-text-color-primary);
+  background-color: var(--el-bg-color-page);
+}

app/pages/admin/oauth.vue

@@ -304,9 +304,15 @@ onMounted(() => {
   align-items: center;
 }
 
+.card-header span {
+  color: var(--el-text-color-primary);
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .client-id {
   font-size: 12px;
-  color: #409eff;
+  color: var(--sidebar-active-bg);
   cursor: pointer;
 }
 
@@ -317,7 +323,7 @@ onMounted(() => {
 
 .form-tip {
   font-size: 12px;
-  color: #909399;
+  color: var(--el-text-color-secondary);
   margin-top: 4px;
 }
 
@@ -328,15 +334,18 @@ onMounted(() => {
 .secret-display p {
   margin: 16px 0 8px;
   font-size: 14px;
+  color: var(--el-text-color-primary);
 }
 
 .secret-value {
   display: block;
   padding: 12px;
-  background-color: #f5f7fa;
+  background-color: var(--header-bg);
+  border: 1px solid var(--el-border-color);
   border-radius: 4px;
   word-break: break-all;
   font-size: 13px;
+  color: var(--el-text-color-primary);
 }
 
 .copy-btn {
@@ -344,6 +353,37 @@ onMounted(() => {
   width: 100%;
 }
 
+/* 确保表格在暗色模式下文字清晰 */
+:deep(.el-card) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-card .el-card__header) {
+  border-bottom-color: var(--el-border-color);
+}
+
+:deep(.el-form-item__label) {
+  color: var(--el-text-color-primary) !important;
+}
+
+:deep(.el-table) {
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table th) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table tr) {
+  background-color: var(--header-bg);
+}
+
+:deep(.el-table td) {
+  color: var(--el-text-color-primary);
+}
+
 @media (max-width: 900px) {
   .card-header {
     flex-direction: column;

app/pages/admin/users.vue

@@ -286,16 +286,53 @@ onMounted(() => {
   align-items: center;
 }
 
+.card-header span {
+  color: var(--el-text-color-primary);
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .filter-form {
   margin-bottom: 20px;
 }
 
 .form-tip {
   font-size: 12px;
-  color: #909399;
+  color: var(--el-text-color-secondary);
   margin-top: 4px;
 }
 
+/* 确保表格和表单在暗色模式下文字清晰 */
+:deep(.el-card) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-card .el-card__header) {
+  border-bottom-color: var(--el-border-color);
+}
+
+:deep(.el-form-item__label) {
+  color: var(--el-text-color-primary) !important;
+}
+
+:deep(.el-table) {
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table th) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table tr) {
+  background-color: var(--header-bg);
+}
+
+:deep(.el-table td) {
+  color: var(--el-text-color-primary);
+}
+
 @media (max-width: 900px) {
   .card-header {
     flex-direction: column;

app/pages/checkins.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="checkins-container">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>机位到位打卡</span>
+          <el-button type="primary" @click="showAddDialog = true">添加打卡</el-button>
+        </div>
+      </template>
+
+      <el-form :inline="true" class="filter-form">
+        <!-- 机位号筛选 -->
+        <el-form-item label="机位号">
+          <el-select v-model="filters.position_number" placeholder="全部" clearable @change="loadCheckins">
+            <el-option v-for="p in positionOptions" :key="p.value" :label="p.label" :value="p.value"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <!-- 状态筛选 -->
+        <el-form-item label="状态">
+          <el-select v-model="filters.status" placeholder="全部" clearable @change="loadCheckins">
+            <el-option v-for="s in statusOptions" :key="s.value" :label="s.label" :value="s.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <el-table :data="checkins" border stripe class="checkins-table">
+        <el-table-column prop="id" label="ID" width="80"></el-table-column>
+        <el-table-column prop="position_number" label="机位号" width="100"></el-table-column>
+        <el-table-column prop="status" label="状态" width="120">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" label="打卡时间">
+          <template #default="{ row }">
+            {{ formatDate(row.created_at) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="notes" label="备注"></el-table-column>
+      </el-table>
+    </el-card>
+
+     <el-dialog v-model="showAddDialog" title="添加打卡" width="500px">
+       <el-form :model="form" label-width="100px">
+         <el-form-item label="机位号">
+           <el-select v-model="form.position_number" placeholder="请选择机位号">
+             <el-option v-for="p in positionOptions" :key="p.value" :label="p.label" :value="p.value"></el-option>
+           </el-select>
+         </el-form-item>
+         <el-form-item label="状态">
+           <el-select v-model="form.status" placeholder="请选择状态">
+             <el-option v-for="s in statusOptions" :key="s.value" :label="s.label" :value="s.value"></el-option>
+           </el-select>
+         </el-form-item>
+         <el-form-item label="备注">
+           <el-input v-model="form.notes" type="textarea" placeholder="请输入备注（可选）"></el-input>
+         </el-form-item>
+       </el-form>
+      <template #footer>
+        <el-button @click="showAddDialog = false">取消</el-button>
+        <el-button type="primary" @click="addCheckin">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { ref, onMounted } from 'vue'
+
+const checkins = ref([])
+const showAddDialog = ref(false)
+
+// 机位选项：1-6号
+const positionOptions = [
+  { value: 1, label: '1号心晴空间固定机位' },
+  { value: 2, label: '2号AB栋固定机位' },
+  { value: 3, label: '3号游走机位' },
+  { value: 4, label: '4号游走机位' },
+  { value: 5, label: '5号游走机位' },
+  { value: 6, label: '6号游走机位' }
+]
+
+// 状态选项
+const statusOptions = [
+  { value: '到位', label: '到位' },
+  { value: '离开', label: '离开' },
+  { value: '休息/轮换', label: '休息/轮换' },
+  { value: '异常', label: '异常' }
+]
+
+const filters = ref({
+  position_number: null as number | null,
+  status: '' as string
+})
+
+const form = ref({
+  position_number: null as number | null,
+  status: '',
+  notes: ''
+})
+
+const loadCheckins = async () => {
+  try {
+    const params = new URLSearchParams()
+    if (filters.value.position_number !== null && filters.value.position_number !== undefined) {
+      params.append('position_number', filters.value.position_number.toString())
+    }
+    if (filters.value.status) {
+      params.append('status', filters.value.status)
+    }
+
+    const res = await $fetch(`/api/checkins?${params}`)
+    checkins.value = res.data
+  } catch (error) {
+    ElMessage.error('加载数据失败')
+  }
+}
+
+const addCheckin = async () => {
+  if (!form.value.position_number || !form.value.status) {
+    ElMessage.error('请填写完整信息')
+    return
+  }
+
+  try {
+    await $fetch('/api/checkins', {
+      method: 'POST',
+      body: {
+        position_number: form.value.position_number,
+        status: form.value.status,
+        notes: form.value.notes || ''
+      }
+    })
+
+    ElMessage.success('添加成功')
+    showAddDialog.value = false
+    form.value = { position_number: null, status: '', notes: '' }
+    loadCheckins()
+  } catch (error) {
+    ElMessage.error('添加失败')
+  }
+}
+
+const formatDate = (dateStr: string) => {
+  return new Date(dateStr).toLocaleString('zh-CN')
+}
+
+const getStatusType = (status: string) => {
+  const types: Record<string, string> = {
+    '到位': 'success',
+    '离开': 'info',
+    '休息/轮换': 'warning',
+    '异常': 'danger'
+  }
+  return types[status] || 'info'
+}
+
+onMounted(() => {
+  loadCheckins()
+})
+</script>
+
+<style scoped>
+.checkins-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-header span {
+  color: var(--el-text-color-primary);
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.filter-form {
+  margin-bottom: 20px;
+}
+
+/* 确保表格和表单在暗色模式下文字清晰 */
+:deep(.el-card) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-card .el-card__header) {
+  border-bottom-color: var(--el-border-color);
+}
+
+:deep(.el-form-item__label) {
+  color: var(--el-text-color-primary) !important;
+}
+
+:deep(.el-table) {
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table th) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table tr) {
+  background-color: var(--header-bg);
+}
+
+:deep(.el-table td) {
+  color: var(--el-text-color-primary);
+}
+
+@media (max-width: 900px) {
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .filter-form :deep(.el-form-item) {
+    margin-right: 0;
+    width: 100%;
+  }
+
+  .filter-form :deep(.el-select) {
+    width: 100%;
+  }
+
+  .checkins-table :deep(.col-notes) {
+    display: none;
+  }
+}
+</style>

app/pages/events.vue

@@ -210,10 +210,47 @@ onMounted(() => {
   align-items: center;
 }
 
+.card-header span {
+  color: var(--el-text-color-primary);
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .filter-form {
   margin-bottom: 20px;
 }
 
+/* 确保表格和表单在暗色模式下文字清晰 */
+:deep(.el-card) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-card .el-card__header) {
+  border-bottom-color: var(--el-border-color);
+}
+
+:deep(.el-form-item__label) {
+  color: var(--el-text-color-primary) !important;
+}
+
+:deep(.el-table) {
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table th) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table tr) {
+  background-color: var(--header-bg);
+}
+
+:deep(.el-table td) {
+  color: var(--el-text-color-primary);
+}
+
 /* Table row staggered animations */
 .events-table :deep(.el-table__body tr) {
   animation: slide-in-up 0.3s ease-out;

app/pages/index.vue

@@ -153,12 +153,12 @@ onMounted(async () => {
 }
 
 .welcome-card h1 {
-  color: #303133;
+  color: var(--el-text-color-primary);
   margin-bottom: 10px;
 }
 
 .welcome-card p {
-  color: #909399;
+  color: var(--el-text-color-secondary);
   font-size: 16px;
 }
 
@@ -184,12 +184,12 @@ onMounted(async () => {
 .stat-value {
   font-size: 32px;
   font-weight: bold;
-  color: #303133;
+  color: var(--el-text-color-primary);
 }
 
 .stat-label {
   font-size: 14px;
-  color: #909399;
+  color: var(--el-text-color-secondary);
   margin-top: 5px;
 }
 
@@ -210,8 +210,8 @@ onMounted(async () => {
 
 .system-info li {
   padding: 8px 0;
-  border-bottom: 1px solid #ebeef5;
+  border-bottom: 1px solid var(--el-border-color);
-  color: #606266;
+  color: var(--el-text-color-primary);
 }
 
 .system-info li:last-child {

app/pages/results.vue

@@ -184,10 +184,47 @@ onMounted(() => {
   align-items: center;
 }
 
+.card-header span {
+  color: var(--el-text-color-primary);
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .filter-form {
   margin-bottom: 20px;
 }
 
+/* 确保表格和表单在暗色模式下文字清晰 */
+:deep(.el-card) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-card .el-card__header) {
+  border-bottom-color: var(--el-border-color);
+}
+
+:deep(.el-form-item__label) {
+  color: var(--el-text-color-primary) !important;
+}
+
+:deep(.el-table) {
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table th) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table tr) {
+  background-color: var(--header-bg);
+}
+
+:deep(.el-table td) {
+  color: var(--el-text-color-primary);
+}
+
 /* Table row staggered animations */
 .results-table :deep(.el-table__body tr) {
   animation: slide-in-up 0.3s ease-out;

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-form-item label="年级">
-            <el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
+          <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 config = ref({
-const filters = ref({ group: '' })
+  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(--el-text-color-primary);
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .filter-form {
   margin-bottom: 20px;
 }
 
+/* 确保表格和表单在暗色模式下文字清晰 */
+:deep(.el-card) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-card .el-card__header) {
+  border-bottom-color: var(--el-border-color);
+}
+
+:deep(.el-form-item__label) {
+  color: var(--el-text-color-primary) !important;
+}
+
+:deep(.el-table) {
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table th) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table tr) {
+  background-color: var(--header-bg);
+}
+
+:deep(.el-table td) {
+  color: var(--el-text-color-primary);
+}
+
 .rank-cell {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 18px;
   font-weight: bold;
+  color: var(--el-text-color-primary);
 }
 
 .medals {
@@ -173,8 +240,8 @@ onMounted(() => {
 
 .rules-list li {
   padding: 8px 0;
-  border-bottom: 1px solid #ebeef5;
+  border-bottom: 1px solid var(--el-border-color);
-  color: #606266;
+  color: var(--el-text-color-primary);
 }
 
 .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(--el-border-color);
+  color: var(--el-text-color-primary);
 }
 
 .top-item:last-child {

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-form-item label="年级">
-            <el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
+          <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="id" label="ID" width="80"></el-table-column>
-        <el-table-column prop="name" label="队伍名称" />
+        <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 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 config = ref({
-const groups = 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
+    config.value = res.data.groups
-  } catch (error) {
+   } catch (error) {
-    ElMessage.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(--el-text-color-primary);
+  font-size: 18px;
+  font-weight: 600;
+}
+
 .filter-form {
   margin-bottom: 20px;
 }
 
+/* 确保表格和表单在暗色模式下文字清晰 */
+:deep(.el-card) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-card .el-card__header) {
+  border-bottom-color: var(--el-border-color);
+}
+
+:deep(.el-form-item__label) {
+  color: var(--el-text-color-primary) !important;
+}
+
+:deep(.el-table) {
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table th) {
+  background-color: var(--header-bg);
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-table tr) {
+  background-color: var(--header-bg);
+}
+
+:deep(.el-table td) {
+  color: var(--el-text-color-primary);
+}
+
 @media (max-width: 900px) {
   .card-header {
     flex-direction: column;

nuxt.config.ts

@@ -1,31 +1,7 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2025-07-15',
+  ssr: false,
-  devtools: { enabled: true },
+  modules: ['@element-plus/nuxt'],
-
+  elementPlus: {
-  modules: [
+    themes: ['dark'],
-    '@nuxt/eslint',
+  },
-    '@pinia/nuxt',
-    '@unocss/nuxt',
-    '@element-plus/nuxt'
-  ],
-
-  unocss: {},
-
-  css: [
-    'unocss',
-    'element-plus/dist/index.css',
-    'element-plus/theme-chalk/dark/css-vars.css'
-  ],
-
-  app: {
-    pageTransition: {
-      name: 'page',
-      mode: 'out-in'
-    },
-    layoutTransition: {
-      name: 'layout',
-      mode: 'out-in'
-    }
-  }
 })

package.json

@@ -9,18 +9,25 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "user:cli": "node scripts/user-cli.js",
-    "user:init": "node scripts/user-cli.js init"
+    "user:init": "node scripts/user-cli.js init",
+    "user:admin": "node scripts/user-manager.js"
   },
   "dependencies": {
     "@element-plus/nuxt": "1.0.10",
     "@pinia/nuxt": "0.11.3",
+    "@unocss/nuxt": "^66.6.7",
     "bcryptjs": "^3.0.3",
-    "better-sqlite3": "^12.8.0",
+    "chalk": "^5.6.2",
     "element-plus": "2.9.2",
+    "inquirer": "^9.3.8",
     "jsonwebtoken": "^9.0.3",
     "nuxt": "^4.3.1",
     "opencode-ai": "^1.2.27",
     "pinia": "2.3.1",
+    "puppeteer": "^24.40.0",
+    "sql.js": "^1.14.1",
+    "sqlite3": "^6.0.1",
+    "unocss": "^66.6.7",
     "uuid": "^13.0.0",
     "vue": "^3.5.29",
     "vue-router": "^4.6.4",
@@ -31,7 +38,33 @@
     "@nuxt/icon": "2.2.1",
     "@types/bcryptjs": "^3.0.0",
     "@types/jsonwebtoken": "^9.0.10",
-    "@types/uuid": "^11.0.0"
+    "@types/uuid": "^11.0.0",
+    "better-sqlite3": "^12.8.0"
   },
-  "packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"
+  "packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac",
+  "pnpm": {
+    "overrides": {
+      "pkg-types": "^2.3.0"
+    },
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "opencode-ai",
+      "puppeteer",
+      "sqlite3",
+      "vue-demi"
+    ]
+  },
+  "version": "1.0.0",
+  "description": "基于 Nuxt 3 + Element Plus + SQLite 的运动会管理系统",
+  "main": "test-db-connection.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.mzmc.top/laobinghu/SportMeetingAdminSys.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
 }

tsconfig.json

@@ -1,5 +1,4 @@
 {
-  // https://nuxt.com/docs/guide/concepts/typescript
   "files": [],
   "references": [
     {

uno.config.ts

@@ -1,200 +0,0 @@
-import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
-
-export default defineConfig({
-  presets: [
-    presetUno(),
-    presetAttributify(),
-    presetIcons({
-      scale: 1.2,
-      warn: true,
-    }),
-  ],
-  // Include Element Plus compatibility by safelisting common component classes
-  safelist: [
-    // Layout components
-    'el-main',
-    'el-header',
-    'el-footer',
-    'el-aside',
-    'el-container',
-    // Card
-    'el-card',
-    'el-card__header',
-    // Buttons
-    'el-button',
-    'el-button--primary',
-    'el-button--success',
-    'el-button--warning',
-    'el-button--info',
-    'el-button--text',
-    // Forms
-    'el-form',
-    'el-form-item',
-    'el-form-item__label',
-    'el-input',
-    'el-select',
-    'el-select__input',
-    // Tables
-    'el-table',
-    'el-table__header',
-    'el-table__body',
-    'el-table-column',
-    // Dialogs
-    'el-dialog',
-    'el-dialog__header',
-    'el-dialog__body',
-    'el-dialog__footer',
-    // Drawer
-    'el-drawer',
-    // Menu
-    'el-menu',
-    'el-menu-item',
-    'el-sub-menu',
-    'el-sub-menu__title',
-    // Dropdown
-    'el-dropdown',
-    'el-dropdown-menu',
-    'el-dropdown-item',
-    // Avatar
-    'el-avatar',
-    // Tags
-    'el-tag',
-    // Icons
-    'el-icon',
-    // Grid
-    'el-row',
-    'el-col',
-    // Input number
-    'el-input-number',
-    // Message
-    'el-message',
-    // Notification
-    'el-notification',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        // Preserve Element Plus color compatibility
-        primary: '#409eff',
-        success: '#67c23a',
-        warning: '#e6a23c',
-        danger: '#f56c6c',
-        info: '#909399',
-      },
-      spacing: {
-        // Custom spacing scale based on existing CSS usage
-        1: '0.25rem',
-        2: '0.5rem',
-        3: '0.75rem',
-        4: '1rem',
-        5: '1.25rem',
-        6: '1.5rem',
-        8: '2rem',
-        10: '2.5rem',
-        12: '3rem',
-        16: '4rem',
-        20: '5rem',
-        24: '6rem',
-      },
-      transitionDuration: {
-        '0': '0ms',
-        '75': '75ms',
-        '100': '100ms',
-        '150': '150ms',
-        '200': '200ms',
-        '300': '300ms',
-        '400': '400ms',
-        '500': '500ms',
-        '600': '600ms',
-        '700': '700ms',
-        '800': '800ms',
-        '900': '900ms',
-        '1000': '1000ms',
-      },
-      transitionTimingFunction: {
-        'ease-linear': 'linear',
-        'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
-        'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
-        'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-      },
-      keyframes: {
-        'fade-in': {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        'fade-out': {
-          '0%': { opacity: '1' },
-          '100%': { opacity: '0' },
-        },
-        'slide-up': {
-          '0%': { transform: 'translateY(20px)', opacity: '0' },
-          '100%': { transform: 'translateY(0)', opacity: '1' },
-        },
-        'slide-down': {
-          '0%': { transform: 'translateY(-20px)', opacity: '0' },
-          '100%': { transform: 'translateY(0)', opacity: '1' },
-        },
-        'slide-left': {
-          '0%': { transform: 'translateX(20px)', opacity: '0' },
-          '100%': { transform: 'translateX(0)', opacity: '1' },
-        },
-        'slide-right': {
-          '0%': { transform: 'translateX(-20px)', opacity: '0' },
-          '100%': { transform: 'translateX(0)', opacity: '1' },
-        },
-        'zoom-in': {
-          '0%': { transform: 'scale(0.9)', opacity: '0' },
-          '100%': { transform: 'scale(1)', opacity: '1' },
-        },
-        'zoom-out': {
-          '0%': { transform: 'scale(1.1)', opacity: '0' },
-          '100%': { transform: 'scale(1)', opacity: '1' },
-        },
-        'bounce-in': {
-          '0%': { transform: 'scale(0.3)', opacity: '0' },
-          '50%': { transform: 'scale(1.05)' },
-          '70%': { transform: 'scale(0.9)' },
-          '100%': { transform: 'scale(1)', opacity: '1' },
-        },
-      },
-    },
-  },
-  shortcuts: {
-    // Transition utilities
-    'transition-base': 'transition-all duration-300 ease-in-out',
-    'transition-fast': 'transition-all duration-150 ease-in-out',
-    'transition-slow': 'transition-all duration-500 ease-in-out',
-    'transition-none': 'transition-none',
-    
-    // Fade utilities
-    'fade-enter': 'animate-fade-in',
-    'fade-exit': 'animate-fade-out',
-    
-    // Slide utilities
-    'slide-up-enter': 'animate-slide-up',
-    'slide-down-enter': 'animate-slide-down',
-    'slide-left-enter': 'animate-slide-left',
-    'slide-right-enter': 'animate-slide-right',
-    
-    // Zoom utilities
-    'zoom-enter': 'animate-zoom-in',
-    'zoom-exit': 'animate-zoom-out',
-    
-    // Bounce
-    'bounce-enter': 'animate-bounce-in',
-    
-    // Staggered animations for lists
-    'stagger-1': 'transition-all duration-300 delay-100',
-    'stagger-2': 'transition-all duration-300 delay-200',
-    'stagger-3': 'transition-all duration-300 delay-300',
-    'stagger-4': 'transition-all duration-300 delay-400',
-    'stagger-5': 'transition-all duration-300 delay-500',
-  },
-  rules: [
-    // Custom transition classes that can be applied conditionally
-    ['enter-active', { transition: 'all 0.3s ease-out' }],
-    ['leave-active', { transition: 'all 0.3s ease-in' }],
-    ['enter-from', { opacity: '0', transform: 'translateY(10px)' }],
-    ['leave-to', { opacity: '0', transform: 'translateY(-10px)' }],
-  ],
-})