Compare commits
6 Commits
e73f62133b
...
4df5c13976
| Author | SHA1 | Date | |
|---|---|---|---|
| 4df5c13976 | |||
| 85a20baf5a | |||
| 286862d1a0 | |||
| 30f2115877 | |||
| 9a76c657af | |||
| f5c6a6991b |
42
app/assets/css/dark-mode.css
Normal file
42
app/assets/css/dark-mode.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-container class="layout-container">
|
<el-container class="layout-container">
|
||||||
<el-aside :width="collapsed ? '64px' : '200px'" class="sidebar desktop-only">
|
<el-aside :width="collapsed ? '64px' : '200px'" class="sidebar desktop-only transition-base">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<h2 v-if="!collapsed">运动会记分板</h2>
|
<h2 v-if="!collapsed" class="slide-down-enter">运动会记分板</h2>
|
||||||
<el-icon v-else :size="24"><Trophy /></el-icon>
|
<el-icon v-else :size="24" class="slide-down-enter"><Trophy /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-toggle">
|
<div class="sidebar-toggle">
|
||||||
<el-button text @click="toggleCollapse" size="small">
|
<el-button text @click="toggleCollapse" size="small" class="rotate-icon">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
<ArrowLeft v-if="!collapsed" />
|
<ArrowLeft v-if="!collapsed" />
|
||||||
<ArrowRight v-else />
|
<ArrowRight v-else />
|
||||||
@ -19,15 +19,37 @@
|
|||||||
:collapse="collapsed"
|
:collapse="collapsed"
|
||||||
:collapse-transition="false"
|
:collapse-transition="false"
|
||||||
>
|
>
|
||||||
<el-menu-item
|
<template v-for="item in menuItems" :key="item.path || item.label">
|
||||||
v-for="item in menuItems"
|
<!-- Regular menu item -->
|
||||||
:key="item.path"
|
<el-menu-item
|
||||||
:index="item.path"
|
v-if="!item.children"
|
||||||
@click="onMenuClick(item.path)"
|
:index="item.path"
|
||||||
>
|
@click="onMenuClick(item.path)"
|
||||||
<el-icon><component :is="item.icon" /></el-icon>
|
>
|
||||||
<span>{{ item.label }}</span>
|
<el-icon><component :is="item.icon" /></el-icon>
|
||||||
</el-menu-item>
|
<span>{{ item.label }}</span>
|
||||||
|
</el-menu-item>
|
||||||
|
|
||||||
|
<!-- Submenu with children -->
|
||||||
|
<el-sub-menu
|
||||||
|
v-else
|
||||||
|
:index="item.label"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<el-icon><component :is="item.icon" /></el-icon>
|
||||||
|
<span>{{ item.label }}</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item
|
||||||
|
v-for="child in item.children"
|
||||||
|
:key="child.path"
|
||||||
|
:index="child.path"
|
||||||
|
@click="onMenuClick(child.path)"
|
||||||
|
>
|
||||||
|
<el-icon><component :is="child.icon" /></el-icon>
|
||||||
|
<span>{{ child.label }}</span>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-sub-menu>
|
||||||
|
</template>
|
||||||
|
|
||||||
<el-sub-menu v-if="hasAdminMenu" index="admin">
|
<el-sub-menu v-if="hasAdminMenu" index="admin">
|
||||||
<template #title>
|
<template #title>
|
||||||
@ -54,6 +76,12 @@
|
|||||||
<h3>运动会管理系统</h3>
|
<h3>运动会管理系统</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
|
<el-button text @click="toggleDark()" class="theme-toggle-btn">
|
||||||
|
<el-icon>
|
||||||
|
<Sunny v-if="isDark" />
|
||||||
|
<Moon v-else />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
<el-dropdown v-if="currentUser" @command="handleUserCommand">
|
<el-dropdown v-if="currentUser" @command="handleUserCommand">
|
||||||
<span class="user-info">
|
<span class="user-info">
|
||||||
<el-avatar :size="32">
|
<el-avatar :size="32">
|
||||||
@ -86,7 +114,7 @@
|
|||||||
direction="ltr"
|
direction="ltr"
|
||||||
size="70%"
|
size="70%"
|
||||||
:with-header="false"
|
:with-header="false"
|
||||||
class="mobile-only"
|
class="mobile-only drawer-transition"
|
||||||
>
|
>
|
||||||
<div class="drawer-logo">
|
<div class="drawer-logo">
|
||||||
<h2>运动会记分板</h2>
|
<h2>运动会记分板</h2>
|
||||||
@ -95,15 +123,37 @@
|
|||||||
:default-active="activeMenu"
|
:default-active="activeMenu"
|
||||||
class="drawer-menu"
|
class="drawer-menu"
|
||||||
>
|
>
|
||||||
<el-menu-item
|
<template v-for="item in menuItems" :key="item.path || item.label">
|
||||||
v-for="item in menuItems"
|
<!-- Regular menu item -->
|
||||||
:key="item.path"
|
<el-menu-item
|
||||||
:index="item.path"
|
v-if="!item.children"
|
||||||
@click="onMenuClick(item.path, true)"
|
:index="item.path"
|
||||||
>
|
@click="onMenuClick(item.path, true)"
|
||||||
<el-icon><component :is="item.icon" /></el-icon>
|
>
|
||||||
<span>{{ item.label }}</span>
|
<el-icon><component :is="item.icon" /></el-icon>
|
||||||
</el-menu-item>
|
<span>{{ item.label }}</span>
|
||||||
|
</el-menu-item>
|
||||||
|
|
||||||
|
<!-- Submenu with children -->
|
||||||
|
<el-sub-menu
|
||||||
|
v-else
|
||||||
|
:index="item.label"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<el-icon><component :is="item.icon" /></el-icon>
|
||||||
|
<span>{{ item.label }}</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item
|
||||||
|
v-for="child in item.children"
|
||||||
|
:key="child.path"
|
||||||
|
:index="child.path"
|
||||||
|
@click="onMenuClick(child.path, true)"
|
||||||
|
>
|
||||||
|
<el-icon><component :is="child.icon" /></el-icon>
|
||||||
|
<span>{{ child.label }}</span>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-sub-menu>
|
||||||
|
</template>
|
||||||
|
|
||||||
<el-sub-menu v-if="hasAdminMenu" index="admin">
|
<el-sub-menu v-if="hasAdminMenu" index="admin">
|
||||||
<template #title>
|
<template #title>
|
||||||
@ -122,7 +172,7 @@
|
|||||||
</el-menu>
|
</el-menu>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
|
|
||||||
<el-dialog v-model="showLoginDialog" title="登录" width="400px">
|
<el-dialog v-model="showLoginDialog" title="登录" width="400px" class="dialog-zoom">
|
||||||
<el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
|
<el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input
|
<el-input
|
||||||
@ -150,7 +200,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { HomeFilled, Trophy, UserFilled, Edit, DataLine, Menu, Setting, Key, ArrowLeft, ArrowRight, ArrowDown } 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 { ref, onMounted, computed } from 'vue'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const activeMenu = computed(() => route.path)
|
const activeMenu = computed(() => route.path)
|
||||||
@ -159,6 +211,10 @@ const showLoginDialog = ref(false)
|
|||||||
const logging = ref(false)
|
const logging = ref(false)
|
||||||
const loginFormRef = ref()
|
const loginFormRef = ref()
|
||||||
|
|
||||||
|
// VueUse useDark - 自动添加/移除 html.dark 类，Element Plus 自动响应
|
||||||
|
const isDark = useDark()
|
||||||
|
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')
|
||||||
@ -175,10 +231,17 @@ const loginRules = {
|
|||||||
|
|
||||||
const menuItems = [
|
const menuItems = [
|
||||||
{ path: '/', label: '首页', icon: HomeFilled },
|
{ path: '/', label: '首页', icon: HomeFilled },
|
||||||
{ path: '/events', label: '比赛项目', icon: Trophy },
|
{
|
||||||
{ path: '/teams', label: '队伍管理', icon: UserFilled },
|
label: '比赛管理',
|
||||||
{ path: '/results', label: '成绩录入', icon: Edit },
|
icon: Trophy,
|
||||||
{ path: '/scoreboard', label: '记分板', icon: DataLine }
|
children: [
|
||||||
|
{ path: '/events', label: '比赛项目', icon: Trophy },
|
||||||
|
{ path: '/teams', label: '队伍管理', icon: UserFilled },
|
||||||
|
{ path: '/results', label: '成绩录入', icon: Edit },
|
||||||
|
{ path: '/scoreboard', label: '记分板', icon: DataLine }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ path: '/checkins', label: '机位打卡', icon: LocationFilled }
|
||||||
]
|
]
|
||||||
|
|
||||||
const toggleCollapse = () => {
|
const toggleCollapse = () => {
|
||||||
@ -246,7 +309,10 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
/* ========== 布局容器 ========== */
|
||||||
.layout-container {
|
.layout-container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -256,73 +322,257 @@ onMounted(() => {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 侧边栏 ========== */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
background-color: #304156;
|
background: var(--sidebar-bg);
|
||||||
color: #fff;
|
color: var(--sidebar-text);
|
||||||
transition: width 0.3s;
|
transition: width 0.3s ease;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
height: 56px;
|
height: 60px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: #2b3a4a;
|
background-color: var(--sidebar-header-bg);
|
||||||
|
border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo h2 {
|
.logo h2 {
|
||||||
color: #fff;
|
color: var(--sidebar-active-text);
|
||||||
font-size: 16px;
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========== 侧边栏控制按钮 ========== */
|
||||||
.sidebar-toggle {
|
.sidebar-toggle {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding: 4px 8px;
|
padding: 8px 12px;
|
||||||
border-bottom: 1px solid #263445;
|
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 {
|
.sidebar-menu {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
background-color: #304156;
|
background-color: transparent;
|
||||||
}
|
width: 100%;
|
||||||
|
|
||||||
.sidebar-menu:not(.el-menu--collapse) {
|
|
||||||
width: 200px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-menu .el-menu-item,
|
.sidebar-menu .el-menu-item,
|
||||||
.sidebar-menu .el-sub-menu__title {
|
.sidebar-menu .el-sub-menu__title {
|
||||||
color: #bfcbd9;
|
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-menu-item:hover,
|
||||||
.sidebar-menu .el-sub-menu__title: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-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: #263445;
|
background-color: var(--sidebar-active-bg);
|
||||||
color: #409eff;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
.header {
|
||||||
background-color: #fff;
|
background-color: var(--el-bg-color);
|
||||||
border-bottom: 1px solid #e6e6e6;
|
border-bottom: 1px solid var(--el-border-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 20px;
|
padding: 0 24px;
|
||||||
height: 56px;
|
height: 60px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-left {
|
.header-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-right {
|
.header-right {
|
||||||
@ -332,7 +582,9 @@ onMounted(() => {
|
|||||||
|
|
||||||
.header h3 {
|
.header h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #303133;
|
color: var(--el-text-color-primary);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info {
|
.user-info {
|
||||||
@ -340,37 +592,78 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info:hover {
|
||||||
|
background-color: var(--sidebar-hover-bg);
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
color: #303133;
|
color: var(--el-text-color-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn {
|
||||||
|
margin-right: 12px;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn:hover {
|
||||||
|
background-color: var(--sidebar-hover-bg) !important;
|
||||||
|
color: var(--sidebar-active-text);
|
||||||
|
transform: rotate(30deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
background-color: #f0f2f5;
|
background-color: var(--el-bg-color-page);
|
||||||
padding: 20px;
|
padding: 24px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
animation: fade-in 0.4s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 移动端抽屉 */
|
||||||
.drawer-logo {
|
.drawer-logo {
|
||||||
height: 56px;
|
height: 60px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: #2b3a4a;
|
background: var(--sidebar-bg);
|
||||||
color: #fff;
|
border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-logo h2 {
|
.drawer-logo h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #fff;
|
font-weight: 600;
|
||||||
|
color: var(--sidebar-active-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-menu {
|
.drawer-menu {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
|
background-color: var(--sidebar-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-menu .el-menu-item,
|
||||||
|
.drawer-menu .el-sub-menu__title,
|
||||||
|
.drawer-menu .el-sub-menu .el-menu-item {
|
||||||
|
color: var(--sidebar-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-menu .el-menu-item:hover,
|
||||||
|
.drawer-menu .el-sub-menu__title:hover,
|
||||||
|
.drawer-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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.desktop-only {
|
.desktop-only {
|
||||||
@ -385,7 +678,7 @@ onMounted(() => {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 768px) {
|
||||||
.desktop-only {
|
.desktop-only {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -399,17 +692,17 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
padding: 0 12px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
padding: 12px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
background-color: #fff;
|
background-color: var(--el-bg-color);
|
||||||
border-top: 1px solid #e6e6e6;
|
border-top: 1px solid var(--el-border-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -420,7 +713,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
.footer p {
|
.footer p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #909399;
|
color: var(--el-text-color-secondary);
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -304,9 +304,15 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-header span {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.client-id {
|
.client-id {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #409eff;
|
color: var(--sidebar-active-bg);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -317,7 +323,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
.form-tip {
|
.form-tip {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #909399;
|
color: var(--el-text-color-secondary);
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -328,15 +334,18 @@ onMounted(() => {
|
|||||||
.secret-display p {
|
.secret-display p {
|
||||||
margin: 16px 0 8px;
|
margin: 16px 0 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.secret-value {
|
.secret-value {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background-color: #f5f7fa;
|
background-color: var(--header-bg);
|
||||||
|
border: 1px solid var(--el-border-color);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-btn {
|
.copy-btn {
|
||||||
@ -344,6 +353,37 @@ onMounted(() => {
|
|||||||
width: 100%;
|
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) {
|
@media (max-width: 900px) {
|
||||||
.card-header {
|
.card-header {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@ -286,16 +286,53 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-header span {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-form {
|
.filter-form {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-tip {
|
.form-tip {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #909399;
|
color: var(--el-text-color-secondary);
|
||||||
margin-top: 4px;
|
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) {
|
@media (max-width: 900px) {
|
||||||
.card-header {
|
.card-header {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
238
app/pages/checkins.vue
Normal file
238
app/pages/checkins.vue
Normal file
@ -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>
|
||||||
@ -9,6 +9,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<el-form :inline="true" class="filter-form">
|
<el-form :inline="true" class="filter-form">
|
||||||
|
<!-- 类别筛选 -->
|
||||||
<el-form-item label="类别">
|
<el-form-item label="类别">
|
||||||
<el-select v-model="filters.category" placeholder="全部" clearable @change="loadEvents">
|
<el-select v-model="filters.category" placeholder="全部" clearable @change="loadEvents">
|
||||||
<el-option label="田赛" value="田赛" />
|
<el-option label="田赛" value="田赛" />
|
||||||
@ -16,14 +17,30 @@
|
|||||||
<el-option label="团体赛" value="团体赛" />
|
<el-option label="团体赛" value="团体赛" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</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-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</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="id" label="ID" width="80" class-name="col-id" />
|
||||||
<el-table-column prop="name" label="项目名称" />
|
<el-table-column prop="name" label="项目名称" />
|
||||||
<el-table-column prop="category" label="类别" width="120" class-name="col-category" />
|
<el-table-column prop="category" label="类别" width="120" class-name="col-category" />
|
||||||
@ -60,7 +77,12 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="组别">
|
<el-form-item label="组别">
|
||||||
<el-select v-model="form.event_group" placeholder="请选择">
|
<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-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
@ -74,11 +96,22 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
const events = ref([])
|
const events = ref([])
|
||||||
const showAddDialog = ref(false)
|
const showAddDialog = ref(false)
|
||||||
const filters = ref({ category: '', group: '' })
|
const config = ref({
|
||||||
const groups = ref([])
|
grades: [] as string[],
|
||||||
|
classTypes: [] as string[],
|
||||||
|
genders: [] as string[],
|
||||||
|
all: [] as string[]
|
||||||
|
})
|
||||||
|
const filters = ref({
|
||||||
|
category: '',
|
||||||
|
grade: '',
|
||||||
|
classType: '',
|
||||||
|
gender: ''
|
||||||
|
})
|
||||||
const eventTypes = ref({})
|
const eventTypes = ref({})
|
||||||
|
|
||||||
const form = ref({
|
const form = ref({
|
||||||
@ -93,15 +126,15 @@ const availableEvents = computed(() => {
|
|||||||
return eventTypes.value[form.value.category] || []
|
return eventTypes.value[form.value.category] || []
|
||||||
})
|
})
|
||||||
|
|
||||||
const onCategoryChange = () => {
|
// 为添加项目对话框生成所有可用的组别选项（从config API获取）
|
||||||
form.value.name = ''
|
const allGroupOptions = computed(() => {
|
||||||
form.value.unit = ''
|
return (config.value.all || []).map(g => ({ value: g, label: g }))
|
||||||
}
|
})
|
||||||
|
|
||||||
const loadConfig = async () => {
|
const loadConfig = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await $fetch('/api/config')
|
const res = await $fetch('/api/config')
|
||||||
groups.value = res.data.groups
|
config.value = res.data.groups
|
||||||
eventTypes.value = res.data.eventTypes
|
eventTypes.value = res.data.eventTypes
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ElMessage.error('加载配置失败')
|
ElMessage.error('加载配置失败')
|
||||||
@ -112,7 +145,9 @@ const loadEvents = async () => {
|
|||||||
try {
|
try {
|
||||||
const params = new URLSearchParams()
|
const params = new URLSearchParams()
|
||||||
if (filters.value.category) params.append('category', filters.value.category)
|
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}`)
|
const res = await $fetch(`/api/events?${params}`)
|
||||||
events.value = res.data
|
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 () => {
|
const addEvent = async () => {
|
||||||
try {
|
try {
|
||||||
const selectedEvent = availableEvents.value.find(e => e.name === form.value.name)
|
const selectedEvent = availableEvents.value.find(e => e.name === form.value.name)
|
||||||
@ -166,10 +210,75 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-header span {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-form {
|
.filter-form {
|
||||||
margin-bottom: 20px;
|
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;
|
||||||
|
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) {
|
@media (max-width: 900px) {
|
||||||
.card-header {
|
.card-header {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-container">
|
<div class="home-container">
|
||||||
<el-card class="welcome-card">
|
<el-card class="welcome-card slide-down-enter">
|
||||||
<h1>欢迎使用运动会记分板系统</h1>
|
<h1>欢迎使用运动会记分板系统</h1>
|
||||||
<p>本系统用于管理运动会的比赛项目、队伍和成绩</p>
|
<p>本系统用于管理运动会的比赛项目、队伍和成绩</p>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<el-row :gutter="20" class="stats-row">
|
<el-row :gutter="20" class="stats-row">
|
||||||
<el-col :xs="12" :sm="12" :md="6" :lg="6">
|
<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">
|
<div class="stat-content">
|
||||||
<el-icon class="stat-icon" color="#409eff"><Trophy /></el-icon>
|
<el-icon class="stat-icon" color="#409eff"><Trophy /></el-icon>
|
||||||
<div>
|
<div>
|
||||||
@ -18,7 +18,7 @@
|
|||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="12" :sm="12" :md="6" :lg="6">
|
<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">
|
<div class="stat-content">
|
||||||
<el-icon class="stat-icon" color="#67c23a"><UserFilled /></el-icon>
|
<el-icon class="stat-icon" color="#67c23a"><UserFilled /></el-icon>
|
||||||
<div>
|
<div>
|
||||||
@ -29,7 +29,7 @@
|
|||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="12" :sm="12" :md="6" :lg="6">
|
<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">
|
<div class="stat-content">
|
||||||
<el-icon class="stat-icon" color="#e6a23c"><Edit /></el-icon>
|
<el-icon class="stat-icon" color="#e6a23c"><Edit /></el-icon>
|
||||||
<div>
|
<div>
|
||||||
@ -40,7 +40,7 @@
|
|||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="12" :sm="12" :md="6" :lg="6">
|
<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">
|
<div class="stat-content">
|
||||||
<el-icon class="stat-icon" color="#f56c6c"><DataLine /></el-icon>
|
<el-icon class="stat-icon" color="#f56c6c"><DataLine /></el-icon>
|
||||||
<div>
|
<div>
|
||||||
@ -54,38 +54,37 @@
|
|||||||
|
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :xs="24" :sm="24" :md="12" :lg="12">
|
<el-col :xs="24" :sm="24" :md="12" :lg="12">
|
||||||
<el-card>
|
<el-card class="slide-left-enter">
|
||||||
<template #header>
|
<template #header>
|
||||||
<span>快速操作</span>
|
<span>快速操作</span>
|
||||||
</template>
|
</template>
|
||||||
<div class="quick-actions">
|
<div class="quick-actions">
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-col :span="12">
|
<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>
|
||||||
<el-col :span="12">
|
<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>
|
||||||
<el-col :span="12">
|
<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>
|
||||||
<el-col :span="12">
|
<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-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="24" :md="12" :lg="12">
|
<el-col :xs="24" :sm="24" :md="12" :lg="12">
|
||||||
<el-card>
|
<el-card class="slide-right-enter">
|
||||||
<template #header>
|
<template #header>
|
||||||
<span>系统说明</span>
|
<span>系统说明</span>
|
||||||
</template>
|
</template>
|
||||||
<ul class="system-info">
|
<ul class="system-info">
|
||||||
<li>田赛：跳高、跳远、掷铅球</li>
|
<li v-for="(item, index) in systemInfo" :key="index" class="fade-enter" :class="staggerClass(index)">
|
||||||
<li>径赛：100m、200m、400m、4×100m、4×400m、20×50m</li>
|
{{ item }}
|
||||||
<li>团体赛：旱地龙舟、跳长绳、折返跑</li>
|
</li>
|
||||||
<li>组别：教师组、航空班组、体育班组、文化班甲组、文化班乙组</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -96,6 +95,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Trophy, UserFilled, Edit, DataLine } from '@element-plus/icons-vue'
|
import { Trophy, UserFilled, Edit, DataLine } from '@element-plus/icons-vue'
|
||||||
import { fetchEvents, fetchTeams, fetchResults } from '~/modules/scoreboard/api'
|
import { fetchEvents, fetchTeams, fetchResults } from '~/modules/scoreboard/api'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
const stats = ref({
|
const stats = ref({
|
||||||
events: 0,
|
events: 0,
|
||||||
@ -104,6 +104,26 @@ const stats = ref({
|
|||||||
categories: 3
|
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 () => {
|
onMounted(async () => {
|
||||||
try {
|
try {
|
||||||
const [eventsRes, teamsRes, resultsRes] = await Promise.all([
|
const [eventsRes, teamsRes, resultsRes] = await Promise.all([
|
||||||
@ -133,12 +153,12 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.welcome-card h1 {
|
.welcome-card h1 {
|
||||||
color: #303133;
|
color: var(--el-text-color-primary);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome-card p {
|
.welcome-card p {
|
||||||
color: #909399;
|
color: var(--el-text-color-secondary);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -164,12 +184,12 @@ onMounted(async () => {
|
|||||||
.stat-value {
|
.stat-value {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #303133;
|
color: var(--el-text-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #909399;
|
color: var(--el-text-color-secondary);
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -190,8 +210,8 @@ onMounted(async () => {
|
|||||||
|
|
||||||
.system-info li {
|
.system-info li {
|
||||||
padding: 8px 0;
|
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 {
|
.system-info li:last-child {
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</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="event_name" label="项目名称" />
|
||||||
<el-table-column prop="team_name" label="队伍" />
|
<el-table-column prop="team_name" label="队伍" />
|
||||||
<el-table-column prop="team_group" label="组别" width="150" class-name="col-group" />
|
<el-table-column prop="team_group" label="组别" width="150" class-name="col-group" />
|
||||||
@ -184,10 +184,75 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-header span {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-form {
|
.filter-form {
|
||||||
margin-bottom: 20px;
|
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;
|
||||||
|
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) {
|
@media (max-width: 900px) {
|
||||||
.card-header {
|
.card-header {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@ -9,9 +9,24 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<el-form :inline="true" class="filter-form">
|
<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-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
@ -91,8 +106,16 @@ import { ElMessage } from 'element-plus'
|
|||||||
import { Trophy } from '@element-plus/icons-vue'
|
import { Trophy } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
const scoreboard = ref([])
|
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(() => {
|
const topGold = computed(() => {
|
||||||
return [...scoreboard.value]
|
return [...scoreboard.value]
|
||||||
@ -107,7 +130,7 @@ const topScore = computed(() => {
|
|||||||
const loadConfig = async () => {
|
const loadConfig = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await $fetch('/api/config')
|
const res = await $fetch('/api/config')
|
||||||
groups.value = res.data.groups
|
config.value = res.data.groups
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ElMessage.error('加载配置失败')
|
ElMessage.error('加载配置失败')
|
||||||
}
|
}
|
||||||
@ -116,7 +139,9 @@ const loadConfig = async () => {
|
|||||||
const loadScoreboard = async () => {
|
const loadScoreboard = async () => {
|
||||||
try {
|
try {
|
||||||
const params = new URLSearchParams()
|
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}`)
|
const res = await $fetch(`/api/scoreboard?${params}`)
|
||||||
scoreboard.value = res.data
|
scoreboard.value = res.data
|
||||||
@ -125,6 +150,10 @@ const loadScoreboard = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onFilterChange = () => {
|
||||||
|
loadScoreboard()
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadConfig()
|
loadConfig()
|
||||||
loadScoreboard()
|
loadScoreboard()
|
||||||
@ -143,16 +172,54 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-header span {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-form {
|
.filter-form {
|
||||||
margin-bottom: 20px;
|
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 {
|
.rank-cell {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.medals {
|
.medals {
|
||||||
@ -173,8 +240,8 @@ onMounted(() => {
|
|||||||
|
|
||||||
.rules-list li {
|
.rules-list li {
|
||||||
padding: 8px 0;
|
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 {
|
.rules-list li:last-child {
|
||||||
@ -186,7 +253,8 @@ onMounted(() => {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 8px 0;
|
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 {
|
.top-item:last-child {
|
||||||
|
|||||||
@ -9,17 +9,32 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<el-form :inline="true" class="filter-form">
|
<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-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<el-table :data="teams" border stripe class="teams-table">
|
<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">
|
<el-table-column prop="created_at" label="创建时间" width="200" class-name="col-time">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
{{ new Date(row.created_at).toLocaleString('zh-CN') }}
|
{{ new Date(row.created_at).toLocaleString('zh-CN') }}
|
||||||
@ -35,7 +50,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="组别">
|
<el-form-item label="组别">
|
||||||
<el-select v-model="form.team_group" placeholder="请选择组别">
|
<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-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
@ -49,30 +64,47 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
const teams = ref([])
|
const teams = ref([])
|
||||||
const showAddDialog = ref(false)
|
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({
|
const form = ref({
|
||||||
name: '',
|
name: '',
|
||||||
team_group: ''
|
team_group: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 为添加队伍对话框生成所有可用的组别选项（从config API获取）
|
||||||
|
const allGroupOptions = computed(() => {
|
||||||
|
return (config.value.all || []).map(g => ({ value: g, label: g }))
|
||||||
|
})
|
||||||
|
|
||||||
const loadConfig = async () => {
|
const loadConfig = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await $fetch('/api/config')
|
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 () => {
|
const loadTeams = async () => {
|
||||||
try {
|
try {
|
||||||
const params = new URLSearchParams()
|
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}`)
|
const res = await $fetch(`/api/teams?${params}`)
|
||||||
teams.value = res.data
|
teams.value = res.data
|
||||||
@ -81,6 +113,10 @@ const loadTeams = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onFilterChange = () => {
|
||||||
|
loadTeams()
|
||||||
|
}
|
||||||
|
|
||||||
const addTeam = async () => {
|
const addTeam = async () => {
|
||||||
if (!form.value.name || !form.value.team_group) {
|
if (!form.value.name || !form.value.team_group) {
|
||||||
ElMessage.error('请填写完整信息')
|
ElMessage.error('请填写完整信息')
|
||||||
@ -120,10 +156,47 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-header span {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-form {
|
.filter-form {
|
||||||
margin-bottom: 20px;
|
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) {
|
@media (max-width: 900px) {
|
||||||
.card-header {
|
.card-header {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@ -1,13 +1,7 @@
|
|||||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
compatibilityDate: '2025-07-15',
|
ssr: false,
|
||||||
devtools: { enabled: true },
|
modules: ['@element-plus/nuxt'],
|
||||||
|
elementPlus: {
|
||||||
modules: [
|
themes: ['dark'],
|
||||||
'@nuxt/eslint',
|
},
|
||||||
'@pinia/nuxt',
|
|
||||||
'@element-plus/nuxt'
|
|
||||||
],
|
|
||||||
|
|
||||||
css: ['element-plus/dist/index.css']
|
|
||||||
})
|
})
|
||||||
|
|||||||
41
package.json
41
package.json
@ -9,18 +9,25 @@
|
|||||||
"preview": "nuxt preview",
|
"preview": "nuxt preview",
|
||||||
"postinstall": "nuxt prepare",
|
"postinstall": "nuxt prepare",
|
||||||
"user:cli": "node scripts/user-cli.js",
|
"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": {
|
"dependencies": {
|
||||||
"@element-plus/nuxt": "1.0.10",
|
"@element-plus/nuxt": "1.0.10",
|
||||||
"@pinia/nuxt": "0.11.3",
|
"@pinia/nuxt": "0.11.3",
|
||||||
|
"@unocss/nuxt": "^66.6.7",
|
||||||
"bcryptjs": "^3.0.3",
|
"bcryptjs": "^3.0.3",
|
||||||
"better-sqlite3": "^12.8.0",
|
"chalk": "^5.6.2",
|
||||||
"element-plus": "2.9.2",
|
"element-plus": "2.9.2",
|
||||||
|
"inquirer": "^9.3.8",
|
||||||
"jsonwebtoken": "^9.0.3",
|
"jsonwebtoken": "^9.0.3",
|
||||||
"nuxt": "^4.3.1",
|
"nuxt": "^4.3.1",
|
||||||
"opencode-ai": "^1.2.27",
|
"opencode-ai": "^1.2.27",
|
||||||
"pinia": "2.3.1",
|
"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",
|
"uuid": "^13.0.0",
|
||||||
"vue": "^3.5.29",
|
"vue": "^3.5.29",
|
||||||
"vue-router": "^4.6.4",
|
"vue-router": "^4.6.4",
|
||||||
@ -31,7 +38,33 @@
|
|||||||
"@nuxt/icon": "2.2.1",
|
"@nuxt/icon": "2.2.1",
|
||||||
"@types/bcryptjs": "^3.0.0",
|
"@types/bcryptjs": "^3.0.0",
|
||||||
"@types/jsonwebtoken": "^9.0.10",
|
"@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"
|
||||||
}
|
}
|
||||||
|
|||||||
2006
pnpm-lock.yaml
generated
2006
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,4 @@
|
|||||||
{
|
{
|
||||||
// https://nuxt.com/docs/guide/concepts/typescript
|
|
||||||
"files": [],
|
"files": [],
|
||||||
"references": [
|
"references": [
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user