feat: enhance transitions and animations with UnoCSS

- Add advanced page/layout transitions (slide, zoom, fade with blur)
- Enhance UnoCSS config with keyframes, transitions, and shortcuts
- Add staggered animations for stat cards and table rows
- Improve sidebar menu animations with slide-in effects
- Add custom dialog/drawer transitions with bounce effects
- Optimize transition timing with cubic-bezier easing

Based on Element Plus transitions guide and Nuxt 4 transitions docs

app/app.vue

@@ -4,3 +4,114 @@
     <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

@@ -1,42 +0,0 @@
-/* 自定义 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/layouts/default.vue

@@ -199,25 +199,30 @@
   </el-dialog>
 </template>
 
-<script setup lang="ts">
+ <script setup lang="ts">
-import { HomeFilled, Trophy, UserFilled, Edit, DataLine, Menu, Setting, Key, ArrowLeft, ArrowRight, ArrowDown, LocationFilled, Sunny, Moon } from '@element-plus/icons-vue'
+ import { HomeFilled, Trophy, UserFilled, Edit, DataLine, Menu, Setting, Key, ArrowLeft, ArrowRight, ArrowDown, LocationFilled, Sunny, Moon } from '@element-plus/icons-vue'
-import { useDark, useToggle } from '@vueuse/core'
+ import { useDark, useToggle } from '@vueuse/core'
-import { ref, onMounted, computed } from 'vue'
 
-const route = useRoute()
+ const route = useRoute()
-const activeMenu = computed(() => route.path)
+ const activeMenu = computed(() => route.path)
-const drawerOpen = ref(false)
+ const drawerOpen = ref(false)
-const showLoginDialog = ref(false)
+ const showLoginDialog = ref(false)
-const logging = ref(false)
+ const logging = ref(false)
-const loginFormRef = ref()
+ const loginFormRef = ref()
 
-// VueUse useDark - 自动添加/移除 html.dark 类，Element Plus 自动响应
+ // 使用 VueUse 的 useDark 管理暗色模式
-const isDark = useDark()
+ const isDark = useDark({
-const toggleDark = useToggle(isDark)
+   selector: 'html',
+   attribute: 'class',
+   valueDark: 'dark',
+   valueLight: '',
+   storageKey: 'theme',
+ })
+ const toggleDark = useToggle(isDark)
 
-const collapsed = ref(false)
+ const collapsed = ref(false)
-const currentUser = ref<any>(null)
+ const currentUser = ref<any>(null)
-const hasAdminMenu = computed(() => currentUser.value?.role === 'admin')
+ const hasAdminMenu = computed(() => currentUser.value?.role === 'admin')
 
 const loginForm = ref({
   username: '',
@@ -229,7 +234,7 @@ const loginRules = {
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
 }
 
-const menuItems = [
+ const menuItems = [
    { path: '/', label: '首页', icon: HomeFilled },
    {
      label: '比赛管理',
@@ -242,7 +247,7 @@ const menuItems = [
      ]
    },
    { path: '/checkins', label: '机位打卡', icon: LocationFilled }
-]
+ ]
 
 const toggleCollapse = () => {
   collapsed.value = !collapsed.value
@@ -296,7 +301,7 @@ const handleLogin = async () => {
   })
 }
 
-onMounted(() => {
+ onMounted(() => {
    const savedCollapsed = localStorage.getItem('sidebar-collapsed')
    if (savedCollapsed !== null) {
      collapsed.value = savedCollapsed === 'true'
@@ -306,101 +311,175 @@ onMounted(() => {
    if (savedUser) {
      currentUser.value = JSON.parse(savedUser)
    }
-})
+   // 主题切换由 VueUse useDark 自动处理
-</script>
+ })
+ </script>
 
+ <!-- 全局主题变量 -->
+ <style global>
+ :root {
+   --sidebar-bg: #1e293b;
+   --sidebar-header-bg: #0f172a;
+   --sidebar-hover-bg: #334155;
+   --sidebar-text: #94a3b8;
+   --sidebar-active-text: #fff;
+   --sidebar-active-bg: #3b82f6;
+   --header-bg: #ffffff;
+   --header-border: #e2e8f0;
+   --header-text: #1e293b;
+   --main-bg: #f8fafc;
+   --footer-bg: #ffffff;
+   --footer-border: #e2e8f0;
+   --footer-text: #64748b;
+ }
  
+ html.dark {
+   --sidebar-bg: #0f172a;
+   --sidebar-header-bg: #020617;
+   --sidebar-hover-bg: #1e293b;
+   --sidebar-text: #94a3b8;
+   --sidebar-active-text: #fff;
+   --sidebar-active-bg: #3b82f6;
+   --header-bg: #1e293b;
+   --header-border: #334155;
+   --header-text: #f1f5f9;
+   --main-bg: #0f172a;
+   --footer-bg: #1e293b;
+   --footer-border: #334155;
+   --footer-text: #94a3b8;
+ }
+ </style>
 
-<style scoped>
+  <style scoped>
-/* ========== 布局容器 ========== */
+  .layout-container {
-.layout-container {
     height: 100vh;
     overflow: hidden;
-}
+  }
 
-.el-main {
+  .el-main {
     overflow-y: auto;
-}
+  }
 
-/* ========== 侧边栏 ========== */
+  /* 侧边栏 - 始终使用深色背景 */
-.sidebar {
+  .sidebar {
-  background: var(--sidebar-bg);
+    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-header-bg) 100%);
     color: var(--sidebar-text);
-  transition: width 0.3s ease;
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden;
     height: 100%;
     box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-}
+  }
 
-.logo {
+  .logo {
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: var(--sidebar-header-bg);
-  border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     overflow: hidden;
-}
+  }
 
-.logo h2 {
+  .logo h2 {
-  color: var(--sidebar-active-text);
+    color: #fff;
     font-size: 18px;
     font-weight: 600;
     margin: 0;
     white-space: nowrap;
     letter-spacing: 0.5px;
     transition: opacity 0.2s ease;
-}
+  }
 
-/* ========== 侧边栏控制按钮 ========== */
+  .sidebar-toggle {
-.sidebar-toggle {
     display: flex;
     justify-content: flex-end;
     padding: 8px 12px;
-  border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
+  }
 
-.rotate-icon {
+  .rotate-icon {
     transition: transform 0.3s ease;
-}
+  }
 
-.rotate-icon:hover {
+  .rotate-icon:hover {
     transform: rotate(180deg);
-}
+  }
 
-/* ========== 菜单基础样式 ========== */
+  /* 菜单样式 */
-.sidebar-menu {
+  .sidebar-menu {
     border-right: none;
     background-color: transparent;
-  width: 100%;
+  }
-}
 
-.sidebar-menu .el-menu-item,
+  .sidebar-menu:not(.el-menu--collapse) {
-.sidebar-menu .el-sub-menu__title {
+    width: 100%;
+  }
+
+  .sidebar-menu .el-menu-item,
+  .sidebar-menu .el-sub-menu__title {
     color: var(--sidebar-text);
     height: 48px;
     line-height: 48px;
     margin: 4px 8px;
     border-radius: 8px;
-  transition: all 0.2s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
+    animation: slide-in-left 0.3s ease-out;
+    animation-fill-mode: both;
+  }
 
-/* ========== 菜单悬停状态 ========== */
+  /* Staggered animation for menu items */
-.sidebar-menu .el-menu-item:hover,
+  .sidebar-menu .el-menu-item:nth-child(1),
-.sidebar-menu .el-sub-menu__title:hover {
+  .sidebar-menu .el-sub-menu:nth-child(1) {
+    animation-delay: 0.05s;
+  }
+
+  .sidebar-menu .el-menu-item:nth-child(2),
+  .sidebar-menu .el-sub-menu:nth-child(2) {
+    animation-delay: 0.1s;
+  }
+
+  .sidebar-menu .el-menu-item:nth-child(3),
+  .sidebar-menu .el-sub-menu:nth-child(3) {
+    animation-delay: 0.15s;
+  }
+
+  .sidebar-menu .el-menu-item:nth-child(4),
+  .sidebar-menu .el-sub-menu:nth-child(4) {
+    animation-delay: 0.2s;
+  }
+
+  .sidebar-menu .el-menu-item:nth-child(5),
+  .sidebar-menu .el-sub-menu:nth-child(5) {
+    animation-delay: 0.25s;
+  }
+
+  @keyframes slide-in-left {
+    0% {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .sidebar-menu .el-menu-item:hover,
+  .sidebar-menu .el-sub-menu__title:hover {
     background-color: var(--sidebar-hover-bg);
-  color: var(--sidebar-active-text);
+    color: #fff;
-}
+    transform: translateX(5px);
+  }
 
-/* ========== 菜单激活状态 ========== */
+  .sidebar-menu .el-menu-item.is-active,
-.sidebar-menu .el-menu-item.is-active,
+  .sidebar-menu .el-sub-menu .el-menu-item.is-active {
-.sidebar-menu .el-sub-menu .el-menu-item.is-active {
     background-color: var(--sidebar-active-bg);
     color: var(--sidebar-active-text);
     font-weight: 500;
-}
+    transform: translateX(5px);
+  }
 
-.sidebar-menu .el-menu-item.is-active::before {
+  .sidebar-menu .el-menu-item.is-active::before {
     content: '';
     position: absolute;
     left: 0;
@@ -408,158 +487,25 @@ onMounted(() => {
     transform: translateY(-50%);
     width: 3px;
     height: 24px;
-  background-color: var(--sidebar-active-text);
+    background-color: #fff;
     border-radius: 0 3px 3px 0;
-}
+  }
 
-/* ========== 子菜单样式 ========== */
+  /* 子菜单样式 */
-.sidebar-menu .el-sub-menu .el-menu-item {
+  .sidebar-menu .el-sub-menu .el-menu-item {
     padding-left: 20px !important;
     margin: 2px 8px;
-  display: flex;
+  }
-  align-items: center;
-}
 
-/* ========== 菜单图标 ========== */
+  /* 菜单图标 */
-.sidebar-menu .el-icon {
+  .sidebar-menu .el-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
     margin-right: 8px;
     font-size: 18px;
-  flex-shrink: 0;
+  }
-}
 
-/* ========== 子菜单箭头 ========== */
+  .header {
-.sidebar-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
+    background-color: var(--header-bg);
-  margin-left: auto;
+    border-bottom: 1px solid var(--header-border);
-  display: flex;
-  align-items: center;
-}
-
-.el-main {
-  overflow-y: auto;
-}
-
-/* ========== 侧边栏 ========== */
-.sidebar {
-  background: var(--sidebar-bg);
-  color: var(--sidebar-text);
-  transition: width 0.3s ease;
-  overflow: hidden;
-  height: 100%;
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-}
-
-.logo {
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--sidebar-header-bg);
-  border-bottom: 1px solid var(--sidebar-text);
-  border-color: color-mix(in srgb, var(--sidebar-text) 10%, transparent);
-  overflow: hidden;
-}
-
-.logo h2 {
-  color: var(--sidebar-active-text);
-  font-size: 18px;
-  font-weight: 600;
-  margin: 0;
-  white-space: nowrap;
-  letter-spacing: 0.5px;
-  transition: opacity 0.2s ease;
-}
-
-/* ========== 侧边栏控制按钮 ========== */
-.sidebar-toggle {
-  display: flex;
-  justify-content: flex-end;
-  padding: 8px 12px;
-  border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
-}
-
-.rotate-icon {
-  transition: transform 0.3s ease;
-}
-
-.rotate-icon:hover {
-  transform: rotate(180deg);
-}
-
-/* ========== 菜单基础样式 ========== */
-.sidebar-menu {
-  border-right: none;
-  background-color: transparent;
-  width: 100%;
-}
-
-.sidebar-menu .el-menu-item,
-.sidebar-menu .el-sub-menu__title {
-  color: var(--sidebar-text);
-  height: 48px;
-  line-height: 48px;
-  margin: 4px 8px;
-  border-radius: 8px;
-  transition: all 0.2s ease;
-}
-
-/* ========== 菜单悬停状态 ========== */
-.sidebar-menu .el-menu-item:hover,
-.sidebar-menu .el-sub-menu__title:hover {
-  background-color: var(--sidebar-hover-bg);
-  color: var(--sidebar-active-text);
-}
-
-/* ========== 菜单激活状态 ========== */
-.sidebar-menu .el-menu-item.is-active,
-.sidebar-menu .el-sub-menu .el-menu-item.is-active {
-  background-color: var(--sidebar-active-bg);
-  color: var(--sidebar-active-text);
-  font-weight: 500;
-}
-
-.sidebar-menu .el-menu-item.is-active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 24px;
-  background-color: var(--sidebar-active-text);
-  border-radius: 0 3px 3px 0;
-}
-
-/* ========== 子菜单样式 ========== */
-.sidebar-menu .el-sub-menu .el-menu-item {
-  padding-left: 20px !important;
-  margin: 2px 8px;
-  display: flex;
-  align-items: center;
-}
-
-/* ========== 菜单图标 ========== */
-.sidebar-menu .el-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 8px;
-  font-size: 18px;
-  flex-shrink: 0;
-}
-
-/* ========== 子菜单箭头 ========== */
-.sidebar-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-}
-
-.header {
-  background-color: var(--el-bg-color);
-  border-bottom: 1px solid var(--el-border-color);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -567,27 +513,27 @@ onMounted(() => {
     height: 60px;
     flex-shrink: 0;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
+  }
 
-.header-left {
+  .header-left {
     display: flex;
     align-items: center;
     gap: 12px;
-}
+  }
 
-.header-right {
+  .header-right {
     display: flex;
     align-items: center;
-}
+  }
 
-.header h3 {
+  .header h3 {
     margin: 0;
-  color: var(--el-text-color-primary);
+    color: var(--header-text);
     font-size: 18px;
     font-weight: 600;
-}
+  }
 
-.user-info {
+  .user-info {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -595,90 +541,90 @@ onMounted(() => {
     padding: 6px 12px;
     border-radius: 8px;
     transition: all 0.3s ease;
-}
+  }
 
-.user-info:hover {
+  .user-info:hover {
     background-color: var(--sidebar-hover-bg);
     transform: translateY(-2px);
-}
+  }
 
-.username {
+  .username {
-  color: var(--el-text-color-primary);
+    color: var(--header-text);
     font-weight: 500;
-}
+  }
 
-.theme-toggle-btn {
+  .theme-toggle-btn {
     margin-right: 12px;
-  color: var(--el-text-color-primary);
+    color: var(--header-text);
     border-radius: 8px;
     padding: 8px;
     transition: all 0.3s ease;
-}
+  }
 
-.theme-toggle-btn:hover {
+  .theme-toggle-btn:hover {
     background-color: var(--sidebar-hover-bg) !important;
-  color: var(--sidebar-active-text);
+    color: #fff;
     transform: rotate(30deg);
-}
+  }
 
-.main-content {
+  .main-content {
-  background-color: var(--el-bg-color-page);
+    background-color: var(--main-bg);
     padding: 24px;
     height: 100%;
     box-sizing: border-box;
     overflow-y: auto;
     animation: fade-in 0.4s ease-out;
-}
+  }
 
-/* 移动端抽屉 */
+  /* 移动端抽屉 */
-.drawer-logo {
+  .drawer-logo {
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
-  background: var(--sidebar-bg);
+    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-header-bg) 100%);
-  border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
+  }
 
-.drawer-logo h2 {
+  .drawer-logo h2 {
     margin: 0;
     font-size: 18px;
     font-weight: 600;
-  color: var(--sidebar-active-text);
+    color: #fff;
-}
+  }
 
-.drawer-menu {
+  .drawer-menu {
     border-right: none;
     background-color: var(--sidebar-bg);
-}
+  }
 
-.drawer-menu .el-menu-item,
+  .drawer-menu .el-menu-item,
-.drawer-menu .el-sub-menu__title,
+  .drawer-menu .el-sub-menu__title,
-.drawer-menu .el-sub-menu .el-menu-item {
+  .drawer-menu .el-sub-menu .el-menu-item {
     color: var(--sidebar-text);
-}
+  }
 
-.drawer-menu .el-menu-item:hover,
+  .drawer-menu .el-menu-item:hover,
-.drawer-menu .el-sub-menu__title:hover,
+  .drawer-menu .el-sub-menu__title:hover,
-.drawer-menu .el-menu-item.is-active,
+  .drawer-menu .el-menu-item.is-active,
-.drawer-menu .el-sub-menu .el-menu-item.is-active {
+  .drawer-menu .el-sub-menu .el-menu-item.is-active {
     background-color: var(--sidebar-hover-bg);
-  color: var(--sidebar-active-text);
+    color: #fff;
-}
+  }
 
-.desktop-only {
+  .desktop-only {
     display: block;
-}
+  }
 
-.mobile-only {
+  .mobile-only {
     display: none;
-}
+  }
 
-.mobile-only-btn {
+  .mobile-only-btn {
     display: none;
-}
+  }
 
-@media (max-width: 768px) {
+  @media (max-width: 768px) {
     .desktop-only {
       display: none;
     }
@@ -698,22 +644,22 @@ onMounted(() => {
     .main-content {
       padding: 16px;
     }
-}
+  }
 
-.footer {
+  .footer {
-  background-color: var(--el-bg-color);
+    background-color: var(--footer-bg);
-  border-top: 1px solid var(--el-border-color);
+    border-top: 1px solid var(--footer-border);
     display: flex;
     align-items: center;
     justify-content: center;
     height: 40px;
     padding: 0;
     flex-shrink: 0;
-}
+  }
 
-.footer p {
+  .footer p {
     margin: 0;
-  color: var(--el-text-color-secondary);
+    color: var(--footer-text);
     font-size: 13px;
-}
+  }
-</style>
+  </style>

app/pages/admin/oauth.vue

@@ -304,15 +304,9 @@ 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: var(--sidebar-active-bg);
+  color: #409eff;
   cursor: pointer;
 }
 
@@ -323,7 +317,7 @@ onMounted(() => {
 
 .form-tip {
   font-size: 12px;
-  color: var(--el-text-color-secondary);
+  color: #909399;
   margin-top: 4px;
 }
 
@@ -334,18 +328,15 @@ 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: var(--header-bg);
+  background-color: #f5f7fa;
-  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 {
@@ -353,37 +344,6 @@ 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,53 +286,16 @@ 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: var(--el-text-color-secondary);
+  color: #909399;
   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

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

app/pages/results.vue

@@ -184,47 +184,10 @@ 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,24 +9,9 @@
       </template>
 
       <el-form :inline="true" class="filter-form">
-        <!-- 年级筛选 -->
+        <el-form-item label="组别">
-        <el-form-item label="年级">
+          <el-select v-model="filters.group" placeholder="全部" clearable @change="loadScoreboard">
-          <el-select v-model="filters.grade" placeholder="全部" clearable @change="onFilterChange">
+            <el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
-            <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>
@@ -106,16 +91,8 @@ import { ElMessage } from 'element-plus'
 import { Trophy } from '@element-plus/icons-vue'
 
 const scoreboard = ref([])
-const config = ref({
+const groups = ref([])
-  grades: [] as string[],
+const filters = ref({ group: '' })
-  classTypes: [] as string[],
-  genders: [] as string[]
-})
-const filters = ref({
-  grade: '',
-  classType: '',
-  gender: ''
-})
 
 const topGold = computed(() => {
   return [...scoreboard.value]
@@ -130,7 +107,7 @@ const topScore = computed(() => {
 const loadConfig = async () => {
   try {
     const res = await $fetch('/api/config')
-    config.value = res.data.groups
+    groups.value = res.data.groups
   } catch (error) {
     ElMessage.error('加载配置失败')
   }
@@ -139,9 +116,7 @@ const loadConfig = async () => {
 const loadScoreboard = async () => {
   try {
     const params = new URLSearchParams()
-    if (filters.value.grade) params.append('grade', filters.value.grade)
+    if (filters.value.group) params.append('group', filters.value.group)
-    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
@@ -150,10 +125,6 @@ const loadScoreboard = async () => {
   }
 }
 
-const onFilterChange = () => {
-  loadScoreboard()
-}
-
 onMounted(() => {
   loadConfig()
   loadScoreboard()
@@ -172,54 +143,16 @@ 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 {
@@ -240,8 +173,8 @@ onMounted(() => {
 
 .rules-list li {
   padding: 8px 0;
-  border-bottom: 1px solid var(--el-border-color);
+  border-bottom: 1px solid #ebeef5;
-  color: var(--el-text-color-primary);
+  color: #606266;
 }
 
 .rules-list li:last-child {
@@ -253,8 +186,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
-  border-bottom: 1px solid var(--el-border-color);
+  border-bottom: 1px solid #ebeef5;
-  color: var(--el-text-color-primary);
 }
 
 .top-item:last-child {

app/pages/teams.vue

@@ -9,32 +9,17 @@
       </template>
 
       <el-form :inline="true" class="filter-form">
-        <!-- 年级筛选 -->
+        <el-form-item label="组别">
-        <el-form-item label="年级">
+          <el-select v-model="filters.group" placeholder="全部" clearable @change="loadTeams">
-          <el-select v-model="filters.grade" placeholder="全部" clearable @change="onFilterChange">
+            <el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
-            <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>
+        <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column prop="name" label="队伍名称"></el-table-column>
+        <el-table-column prop="name" label="队伍名称" />
-        <el-table-column prop="team_group" label="组别" width="200" class-name="col-group"></el-table-column>
+        <el-table-column prop="team_group" label="组别" width="200" class-name="col-group" />
         <el-table-column prop="created_at" label="创建时间" width="200" class-name="col-time">
           <template #default="{ row }">
             {{ new Date(row.created_at).toLocaleString('zh-CN') }}
@@ -50,7 +35,7 @@
         </el-form-item>
         <el-form-item label="组别">
           <el-select v-model="form.team_group" placeholder="请选择组别">
-            <el-option v-for="g in allGroupOptions" :key="g.value" :label="g.label" :value="g.value" />
+            <el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
           </el-select>
         </el-form-item>
       </el-form>
@@ -64,47 +49,30 @@
 
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
-import { computed } from 'vue'
 
 const teams = ref([])
 const showAddDialog = ref(false)
-const config = ref({
+const filters = ref({ group: '' })
-  grades: [] as string[],
+const groups = ref([])
-  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')
-    config.value = res.data.groups
+    groups.value = res.data.groups
   } catch (error) {
     ElMessage.error('加载配置失败')
   }
- }
+}
 
 const loadTeams = async () => {
   try {
     const params = new URLSearchParams()
-    if (filters.value.grade) params.append('grade', filters.value.grade)
+    if (filters.value.group) params.append('group', filters.value.group)
-    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
@@ -113,10 +81,6 @@ const loadTeams = async () => {
   }
 }
 
-const onFilterChange = () => {
-  loadTeams()
-}
-
 const addTeam = async () => {
   if (!form.value.name || !form.value.team_group) {
     ElMessage.error('请填写完整信息')
@@ -156,47 +120,10 @@ 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,7 +1,31 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  ssr: false,
+  compatibilityDate: '2025-07-15',
-  modules: ['@element-plus/nuxt'],
+  devtools: { enabled: true },
-  elementPlus: {
+
-    themes: ['dark'],
+  modules: [
+    '@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,25 +9,18 @@
     "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",
-    "chalk": "^5.6.2",
+    "better-sqlite3": "^12.8.0",
     "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",
@@ -38,33 +31,7 @@
     "@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,4 +1,5 @@
 {
+  // https://nuxt.com/docs/guide/concepts/typescript
   "files": [],
   "references": [
     {

uno.config.ts

@@ -0,0 +1,200 @@
+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)' }],
+  ],
+})