Compare commits
6 Commits
e73f62133b
...
4df5c13976
| Author | SHA1 | Date | |
|---|---|---|---|
| 4df5c13976 | |||
| 85a20baf5a | |||
| 286862d1a0 | |||
| 30f2115877 | |||
| 9a76c657af | |||
| f5c6a6991b |
111
app/app.vue
111
app/app.vue
@ -4,114 +4,3 @@
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Page Transitions - Enhanced with multiple effects */
|
||||
.page-enter-active,
|
||||
.page-leave-active {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.98);
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.page-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(1.02);
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
/* Slide transitions for dynamic direction */
|
||||
.page-slide-left-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
|
||||
.page-slide-left-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
.page-slide-right-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
.page-slide-right-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
|
||||
/* Zoom transitions */
|
||||
.page-zoom-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.page-zoom-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Layout Transitions - Enhanced */
|
||||
.layout-enter-active,
|
||||
.layout-leave-active {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-enter-from {
|
||||
opacity: 0;
|
||||
filter: grayscale(100%) brightness(0.8);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.layout-leave-to {
|
||||
opacity: 0;
|
||||
filter: grayscale(100%) brightness(1.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Collapse transition for sidebar */
|
||||
.sidebar-collapse-enter-active,
|
||||
.sidebar-collapse-leave-active {
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Custom dialog/drawer transitions */
|
||||
.dialog-zoom :deep(.el-dialog) {
|
||||
animation: custom-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.drawer-transition :deep(.el-drawer) {
|
||||
animation: custom-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
@keyframes custom-zoom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes custom-slide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
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);
|
||||
}
|
||||
@ -199,30 +199,25 @@
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<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 { useDark, useToggle } from '@vueuse/core'
|
||||
<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 { useDark, useToggle } from '@vueuse/core'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
|
||||
const route = useRoute()
|
||||
const activeMenu = computed(() => route.path)
|
||||
const drawerOpen = ref(false)
|
||||
const showLoginDialog = ref(false)
|
||||
const logging = ref(false)
|
||||
const loginFormRef = ref()
|
||||
const route = useRoute()
|
||||
const activeMenu = computed(() => route.path)
|
||||
const drawerOpen = ref(false)
|
||||
const showLoginDialog = ref(false)
|
||||
const logging = ref(false)
|
||||
const loginFormRef = ref()
|
||||
|
||||
// 使用 VueUse 的 useDark 管理暗色模式
|
||||
const isDark = useDark({
|
||||
selector: 'html',
|
||||
attribute: 'class',
|
||||
valueDark: 'dark',
|
||||
valueLight: '',
|
||||
storageKey: 'theme',
|
||||
})
|
||||
const toggleDark = useToggle(isDark)
|
||||
// VueUse useDark - 自动添加/移除 html.dark 类，Element Plus 自动响应
|
||||
const isDark = useDark()
|
||||
const toggleDark = useToggle(isDark)
|
||||
|
||||
const collapsed = ref(false)
|
||||
const currentUser = ref<any>(null)
|
||||
const hasAdminMenu = computed(() => currentUser.value?.role === 'admin')
|
||||
const collapsed = ref(false)
|
||||
const currentUser = ref<any>(null)
|
||||
const hasAdminMenu = computed(() => currentUser.value?.role === 'admin')
|
||||
|
||||
const loginForm = ref({
|
||||
username: '',
|
||||
@ -234,7 +229,7 @@ const loginRules = {
|
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const menuItems = [
|
||||
const menuItems = [
|
||||
{ path: '/', label: '首页', icon: HomeFilled },
|
||||
{
|
||||
label: '比赛管理',
|
||||
@ -247,7 +242,7 @@ const loginRules = {
|
||||
]
|
||||
},
|
||||
{ path: '/checkins', label: '机位打卡', icon: LocationFilled }
|
||||
]
|
||||
]
|
||||
|
||||
const toggleCollapse = () => {
|
||||
collapsed.value = !collapsed.value
|
||||
@ -301,7 +296,7 @@ const handleLogin = async () => {
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
const savedCollapsed = localStorage.getItem('sidebar-collapsed')
|
||||
if (savedCollapsed !== null) {
|
||||
collapsed.value = savedCollapsed === 'true'
|
||||
@ -311,175 +306,101 @@ const handleLogin = async () => {
|
||||
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>
|
||||
.layout-container {
|
||||
<style scoped>
|
||||
/* ========== 布局容器 ========== */
|
||||
.layout-container {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.el-main {
|
||||
.el-main {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 侧边栏 - 始终使用深色背景 */
|
||||
.sidebar {
|
||||
background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-header-bg) 100%);
|
||||
/* ========== 侧边栏 ========== */
|
||||
.sidebar {
|
||||
background: var(--sidebar-bg);
|
||||
color: var(--sidebar-text);
|
||||
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: width 0.3s ease;
|
||||
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 rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.logo h2 {
|
||||
color: #fff;
|
||||
.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 {
|
||||
/* ========== 侧边栏控制按钮 ========== */
|
||||
.sidebar-toggle {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.sidebar-menu:not(.el-menu--collapse) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item,
|
||||
.sidebar-menu .el-sub-menu__title {
|
||||
.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.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation: slide-in-left 0.3s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Staggered animation for menu items */
|
||||
.sidebar-menu .el-menu-item:nth-child(1),
|
||||
.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 {
|
||||
/* ========== 菜单悬停状态 ========== */
|
||||
.sidebar-menu .el-menu-item:hover,
|
||||
.sidebar-menu .el-sub-menu__title:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
color: #fff;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
color: var(--sidebar-active-text);
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item.is-active,
|
||||
.sidebar-menu .el-sub-menu .el-menu-item.is-active {
|
||||
/* ========== 菜单激活状态 ========== */
|
||||
.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;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu .el-menu-item.is-active::before {
|
||||
.sidebar-menu .el-menu-item.is-active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -487,25 +408,158 @@ const handleLogin = async () => {
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 24px;
|
||||
background-color: #fff;
|
||||
background-color: var(--sidebar-active-text);
|
||||
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 {
|
||||
background-color: var(--header-bg);
|
||||
border-bottom: 1px solid var(--header-border);
|
||||
/* ========== 子菜单箭头 ========== */
|
||||
.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 {
|
||||
background-color: var(--el-bg-color);
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -513,27 +567,27 @@ const handleLogin = async () => {
|
||||
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(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@ -541,90 +595,90 @@ const handleLogin = async () => {
|
||||
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 {
|
||||
color: var(--header-text);
|
||||
.username {
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
.theme-toggle-btn {
|
||||
margin-right: 12px;
|
||||
color: var(--header-text);
|
||||
color: var(--el-text-color-primary);
|
||||
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: #fff;
|
||||
color: var(--sidebar-active-text);
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background-color: var(--main-bg);
|
||||
.main-content {
|
||||
background-color: var(--el-bg-color-page);
|
||||
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: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-header-bg) 100%);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
background: var(--sidebar-bg);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent);
|
||||
}
|
||||
|
||||
.drawer-logo h2 {
|
||||
.drawer-logo h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
color: var(--sidebar-active-text);
|
||||
}
|
||||
|
||||
.drawer-menu {
|
||||
.drawer-menu {
|
||||
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 {
|
||||
.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 {
|
||||
.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: #fff;
|
||||
}
|
||||
color: var(--sidebar-active-text);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -644,22 +698,22 @@ const handleLogin = async () => {
|
||||
.main-content {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--footer-bg);
|
||||
border-top: 1px solid var(--footer-border);
|
||||
.footer {
|
||||
background-color: var(--el-bg-color);
|
||||
border-top: 1px solid var(--el-border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer p {
|
||||
.footer p {
|
||||
margin: 0;
|
||||
color: var(--footer-text);
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -304,9 +304,15 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.client-id {
|
||||
font-size: 12px;
|
||||
color: #409eff;
|
||||
color: var(--sidebar-active-bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -317,7 +323,7 @@ onMounted(() => {
|
||||
|
||||
.form-tip {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@ -328,15 +334,18 @@ onMounted(() => {
|
||||
.secret-display p {
|
||||
margin: 16px 0 8px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.secret-value {
|
||||
display: block;
|
||||
padding: 12px;
|
||||
background-color: #f5f7fa;
|
||||
background-color: var(--header-bg);
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 4px;
|
||||
word-break: break-all;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
@ -344,6 +353,37 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 确保表格在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
background-color: var(--header-bg);
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
|
||||
@ -286,16 +286,53 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 确保表格和表单在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
background-color: var(--header-bg);
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
|
||||
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>
|
||||
@ -210,10 +210,47 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 确保表格和表单在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
background-color: var(--header-bg);
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
/* Table row staggered animations */
|
||||
.events-table :deep(.el-table__body tr) {
|
||||
animation: slide-in-up 0.3s ease-out;
|
||||
|
||||
@ -153,12 +153,12 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.welcome-card h1 {
|
||||
color: #303133;
|
||||
color: var(--el-text-color-primary);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.welcome-card p {
|
||||
color: #909399;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@ -184,12 +184,12 @@ onMounted(async () => {
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
@ -210,8 +210,8 @@ onMounted(async () => {
|
||||
|
||||
.system-info li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
color: #606266;
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.system-info li:last-child {
|
||||
|
||||
@ -184,10 +184,47 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 确保表格和表单在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
background-color: var(--header-bg);
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
/* Table row staggered animations */
|
||||
.results-table :deep(.el-table__body tr) {
|
||||
animation: slide-in-up 0.3s ease-out;
|
||||
|
||||
@ -9,9 +9,24 @@
|
||||
</template>
|
||||
|
||||
<el-form :inline="true" class="filter-form">
|
||||
<el-form-item label="组别">
|
||||
<el-select v-model="filters.group" placeholder="全部" clearable @change="loadScoreboard">
|
||||
<el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
|
||||
<!-- 年级筛选 -->
|
||||
<el-form-item label="年级">
|
||||
<el-select v-model="filters.grade" placeholder="全部" clearable @change="onFilterChange">
|
||||
<el-option v-for="g in config.grades" :key="g" :label="g" :value="g" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 班级类型筛选 -->
|
||||
<el-form-item label="班级类型">
|
||||
<el-select v-model="filters.classType" placeholder="全部" clearable :disabled="!filters.grade" @change="onFilterChange">
|
||||
<el-option v-for="c in config.classTypes" :key="c" :label="c" :value="c" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 性别筛选 -->
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="filters.gender" placeholder="全部" clearable :disabled="!filters.grade" @change="onFilterChange">
|
||||
<el-option v-for="g in config.genders" :key="g" :label="g" :value="g" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -91,8 +106,16 @@ import { ElMessage } from 'element-plus'
|
||||
import { Trophy } from '@element-plus/icons-vue'
|
||||
|
||||
const scoreboard = ref([])
|
||||
const groups = ref([])
|
||||
const filters = ref({ group: '' })
|
||||
const config = ref({
|
||||
grades: [] as string[],
|
||||
classTypes: [] as string[],
|
||||
genders: [] as string[]
|
||||
})
|
||||
const filters = ref({
|
||||
grade: '',
|
||||
classType: '',
|
||||
gender: ''
|
||||
})
|
||||
|
||||
const topGold = computed(() => {
|
||||
return [...scoreboard.value]
|
||||
@ -107,7 +130,7 @@ const topScore = computed(() => {
|
||||
const loadConfig = async () => {
|
||||
try {
|
||||
const res = await $fetch('/api/config')
|
||||
groups.value = res.data.groups
|
||||
config.value = res.data.groups
|
||||
} catch (error) {
|
||||
ElMessage.error('加载配置失败')
|
||||
}
|
||||
@ -116,7 +139,9 @@ const loadConfig = async () => {
|
||||
const loadScoreboard = async () => {
|
||||
try {
|
||||
const params = new URLSearchParams()
|
||||
if (filters.value.group) params.append('group', filters.value.group)
|
||||
if (filters.value.grade) params.append('grade', filters.value.grade)
|
||||
if (filters.value.classType) params.append('classType', filters.value.classType)
|
||||
if (filters.value.gender) params.append('gender', filters.value.gender)
|
||||
|
||||
const res = await $fetch(`/api/scoreboard?${params}`)
|
||||
scoreboard.value = res.data
|
||||
@ -125,6 +150,10 @@ const loadScoreboard = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const onFilterChange = () => {
|
||||
loadScoreboard()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadConfig()
|
||||
loadScoreboard()
|
||||
@ -143,16 +172,54 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 确保表格和表单在暗色模式下文字清晰 */
|
||||
:deep(.el-card) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-card .el-card__header) {
|
||||
border-bottom-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-table tr) {
|
||||
background-color: var(--header-bg);
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.rank-cell {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.medals {
|
||||
@ -173,8 +240,8 @@ onMounted(() => {
|
||||
|
||||
.rules-list li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
color: #606266;
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.rules-list li:last-child {
|
||||
@ -186,7 +253,8 @@ onMounted(() => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.top-item:last-child {
|
||||
|
||||
@ -9,17 +9,32 @@
|
||||
</template>
|
||||
|
||||
<el-form :inline="true" class="filter-form">
|
||||
<el-form-item label="组别">
|
||||
<el-select v-model="filters.group" placeholder="全部" clearable @change="loadTeams">
|
||||
<el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
|
||||
<!-- 年级筛选 -->
|
||||
<el-form-item label="年级">
|
||||
<el-select v-model="filters.grade" placeholder="全部" clearable @change="onFilterChange">
|
||||
<el-option v-for="g in config.grades" :key="g" :label="g" :value="g" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 班级类型筛选 -->
|
||||
<el-form-item label="班级类型">
|
||||
<el-select v-model="filters.classType" placeholder="全部" clearable :disabled="!filters.grade" @change="onFilterChange">
|
||||
<el-option v-for="c in config.classTypes" :key="c" :label="c" :value="c" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 性别筛选 -->
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="filters.gender" placeholder="全部" clearable :disabled="!filters.grade" @change="onFilterChange">
|
||||
<el-option v-for="g in config.genders" :key="g" :label="g" :value="g" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table :data="teams" border stripe class="teams-table">
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="name" label="队伍名称" />
|
||||
<el-table-column prop="team_group" label="组别" width="200" class-name="col-group" />
|
||||
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||||
<el-table-column prop="name" label="队伍名称"></el-table-column>
|
||||
<el-table-column prop="team_group" label="组别" width="200" class-name="col-group"></el-table-column>
|
||||
<el-table-column prop="created_at" label="创建时间" width="200" class-name="col-time">
|
||||
<template #default="{ row }">
|
||||
{{ new Date(row.created_at).toLocaleString('zh-CN') }}
|
||||
@ -35,7 +50,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="组别">
|
||||
<el-select v-model="form.team_group" placeholder="请选择组别">
|
||||
<el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
|
||||
<el-option v-for="g in allGroupOptions" :key="g.value" :label="g.label" :value="g.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@ -49,30 +64,47 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const teams = ref([])
|
||||
const showAddDialog = ref(false)
|
||||
const filters = ref({ group: '' })
|
||||
const groups = ref([])
|
||||
const config = ref({
|
||||
grades: [] as string[],
|
||||
classTypes: [] as string[],
|
||||
genders: [] as string[],
|
||||
all: [] as string[]
|
||||
})
|
||||
const filters = ref({
|
||||
grade: '',
|
||||
classType: '',
|
||||
gender: ''
|
||||
})
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
team_group: ''
|
||||
})
|
||||
|
||||
// 为添加队伍对话框生成所有可用的组别选项（从config API获取）
|
||||
const allGroupOptions = computed(() => {
|
||||
return (config.value.all || []).map(g => ({ value: g, label: g }))
|
||||
})
|
||||
|
||||
const loadConfig = async () => {
|
||||
try {
|
||||
const res = await $fetch('/api/config')
|
||||
groups.value = res.data.groups
|
||||
config.value = res.data.groups
|
||||
} catch (error) {
|
||||
ElMessage.error('加载配置失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const loadTeams = async () => {
|
||||
try {
|
||||
const params = new URLSearchParams()
|
||||
if (filters.value.group) params.append('group', filters.value.group)
|
||||
if (filters.value.grade) params.append('grade', filters.value.grade)
|
||||
if (filters.value.classType) params.append('classType', filters.value.classType)
|
||||
if (filters.value.gender) params.append('gender', filters.value.gender)
|
||||
|
||||
const res = await $fetch(`/api/teams?${params}`)
|
||||
teams.value = res.data
|
||||
@ -81,6 +113,10 @@ const loadTeams = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const onFilterChange = () => {
|
||||
loadTeams()
|
||||
}
|
||||
|
||||
const addTeam = async () => {
|
||||
if (!form.value.name || !form.value.team_group) {
|
||||
ElMessage.error('请填写完整信息')
|
||||
@ -120,10 +156,47 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header span {
|
||||
color: var(--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;
|
||||
|
||||
@ -1,31 +1,7 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-07-15',
|
||||
devtools: { enabled: true },
|
||||
|
||||
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'
|
||||
ssr: false,
|
||||
modules: ['@element-plus/nuxt'],
|
||||
elementPlus: {
|
||||
themes: ['dark'],
|
||||
},
|
||||
layoutTransition: {
|
||||
name: 'layout',
|
||||
mode: 'out-in'
|
||||
}
|
||||
}
|
||||
})
|
||||
41
package.json
41
package.json
@ -9,18 +9,25 @@
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"user:cli": "node scripts/user-cli.js",
|
||||
"user:init": "node scripts/user-cli.js init"
|
||||
"user:init": "node scripts/user-cli.js init",
|
||||
"user:admin": "node scripts/user-manager.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/nuxt": "1.0.10",
|
||||
"@pinia/nuxt": "0.11.3",
|
||||
"@unocss/nuxt": "^66.6.7",
|
||||
"bcryptjs": "^3.0.3",
|
||||
"better-sqlite3": "^12.8.0",
|
||||
"chalk": "^5.6.2",
|
||||
"element-plus": "2.9.2",
|
||||
"inquirer": "^9.3.8",
|
||||
"jsonwebtoken": "^9.0.3",
|
||||
"nuxt": "^4.3.1",
|
||||
"opencode-ai": "^1.2.27",
|
||||
"pinia": "2.3.1",
|
||||
"puppeteer": "^24.40.0",
|
||||
"sql.js": "^1.14.1",
|
||||
"sqlite3": "^6.0.1",
|
||||
"unocss": "^66.6.7",
|
||||
"uuid": "^13.0.0",
|
||||
"vue": "^3.5.29",
|
||||
"vue-router": "^4.6.4",
|
||||
@ -31,7 +38,33 @@
|
||||
"@nuxt/icon": "2.2.1",
|
||||
"@types/bcryptjs": "^3.0.0",
|
||||
"@types/jsonwebtoken": "^9.0.10",
|
||||
"@types/uuid": "^11.0.0"
|
||||
"@types/uuid": "^11.0.0",
|
||||
"better-sqlite3": "^12.8.0"
|
||||
},
|
||||
"packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"
|
||||
"packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac",
|
||||
"pnpm": {
|
||||
"overrides": {
|
||||
"pkg-types": "^2.3.0"
|
||||
},
|
||||
"onlyBuiltDependencies": [
|
||||
"esbuild",
|
||||
"opencode-ai",
|
||||
"puppeteer",
|
||||
"sqlite3",
|
||||
"vue-demi"
|
||||
]
|
||||
},
|
||||
"version": "1.0.0",
|
||||
"description": "基于 Nuxt 3 + Element Plus + SQLite 的运动会管理系统",
|
||||
"main": "test-db-connection.js",
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.mzmc.top/laobinghu/SportMeetingAdminSys.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
||||
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": [],
|
||||
"references": [
|
||||
{
|
||||
|
||||
200
uno.config.ts
200
uno.config.ts
@ -1,200 +0,0 @@
|
||||
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
|
||||
|
||||
export default defineConfig({
|
||||
presets: [
|
||||
presetUno(),
|
||||
presetAttributify(),
|
||||
presetIcons({
|
||||
scale: 1.2,
|
||||
warn: true,
|
||||
}),
|
||||
],
|
||||
// Include Element Plus compatibility by safelisting common component classes
|
||||
safelist: [
|
||||
// Layout components
|
||||
'el-main',
|
||||
'el-header',
|
||||
'el-footer',
|
||||
'el-aside',
|
||||
'el-container',
|
||||
// Card
|
||||
'el-card',
|
||||
'el-card__header',
|
||||
// Buttons
|
||||
'el-button',
|
||||
'el-button--primary',
|
||||
'el-button--success',
|
||||
'el-button--warning',
|
||||
'el-button--info',
|
||||
'el-button--text',
|
||||
// Forms
|
||||
'el-form',
|
||||
'el-form-item',
|
||||
'el-form-item__label',
|
||||
'el-input',
|
||||
'el-select',
|
||||
'el-select__input',
|
||||
// Tables
|
||||
'el-table',
|
||||
'el-table__header',
|
||||
'el-table__body',
|
||||
'el-table-column',
|
||||
// Dialogs
|
||||
'el-dialog',
|
||||
'el-dialog__header',
|
||||
'el-dialog__body',
|
||||
'el-dialog__footer',
|
||||
// Drawer
|
||||
'el-drawer',
|
||||
// Menu
|
||||
'el-menu',
|
||||
'el-menu-item',
|
||||
'el-sub-menu',
|
||||
'el-sub-menu__title',
|
||||
// Dropdown
|
||||
'el-dropdown',
|
||||
'el-dropdown-menu',
|
||||
'el-dropdown-item',
|
||||
// Avatar
|
||||
'el-avatar',
|
||||
// Tags
|
||||
'el-tag',
|
||||
// Icons
|
||||
'el-icon',
|
||||
// Grid
|
||||
'el-row',
|
||||
'el-col',
|
||||
// Input number
|
||||
'el-input-number',
|
||||
// Message
|
||||
'el-message',
|
||||
// Notification
|
||||
'el-notification',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// Preserve Element Plus color compatibility
|
||||
primary: '#409eff',
|
||||
success: '#67c23a',
|
||||
warning: '#e6a23c',
|
||||
danger: '#f56c6c',
|
||||
info: '#909399',
|
||||
},
|
||||
spacing: {
|
||||
// Custom spacing scale based on existing CSS usage
|
||||
1: '0.25rem',
|
||||
2: '0.5rem',
|
||||
3: '0.75rem',
|
||||
4: '1rem',
|
||||
5: '1.25rem',
|
||||
6: '1.5rem',
|
||||
8: '2rem',
|
||||
10: '2.5rem',
|
||||
12: '3rem',
|
||||
16: '4rem',
|
||||
20: '5rem',
|
||||
24: '6rem',
|
||||
},
|
||||
transitionDuration: {
|
||||
'0': '0ms',
|
||||
'75': '75ms',
|
||||
'100': '100ms',
|
||||
'150': '150ms',
|
||||
'200': '200ms',
|
||||
'300': '300ms',
|
||||
'400': '400ms',
|
||||
'500': '500ms',
|
||||
'600': '600ms',
|
||||
'700': '700ms',
|
||||
'800': '800ms',
|
||||
'900': '900ms',
|
||||
'1000': '1000ms',
|
||||
},
|
||||
transitionTimingFunction: {
|
||||
'ease-linear': 'linear',
|
||||
'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
|
||||
'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
|
||||
'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
},
|
||||
keyframes: {
|
||||
'fade-in': {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
'fade-out': {
|
||||
'0%': { opacity: '1' },
|
||||
'100%': { opacity: '0' },
|
||||
},
|
||||
'slide-up': {
|
||||
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
'slide-down': {
|
||||
'0%': { transform: 'translateY(-20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
'slide-left': {
|
||||
'0%': { transform: 'translateX(20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateX(0)', opacity: '1' },
|
||||
},
|
||||
'slide-right': {
|
||||
'0%': { transform: 'translateX(-20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateX(0)', opacity: '1' },
|
||||
},
|
||||
'zoom-in': {
|
||||
'0%': { transform: 'scale(0.9)', opacity: '0' },
|
||||
'100%': { transform: 'scale(1)', opacity: '1' },
|
||||
},
|
||||
'zoom-out': {
|
||||
'0%': { transform: 'scale(1.1)', opacity: '0' },
|
||||
'100%': { transform: 'scale(1)', opacity: '1' },
|
||||
},
|
||||
'bounce-in': {
|
||||
'0%': { transform: 'scale(0.3)', opacity: '0' },
|
||||
'50%': { transform: 'scale(1.05)' },
|
||||
'70%': { transform: 'scale(0.9)' },
|
||||
'100%': { transform: 'scale(1)', opacity: '1' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
shortcuts: {
|
||||
// Transition utilities
|
||||
'transition-base': 'transition-all duration-300 ease-in-out',
|
||||
'transition-fast': 'transition-all duration-150 ease-in-out',
|
||||
'transition-slow': 'transition-all duration-500 ease-in-out',
|
||||
'transition-none': 'transition-none',
|
||||
|
||||
// Fade utilities
|
||||
'fade-enter': 'animate-fade-in',
|
||||
'fade-exit': 'animate-fade-out',
|
||||
|
||||
// Slide utilities
|
||||
'slide-up-enter': 'animate-slide-up',
|
||||
'slide-down-enter': 'animate-slide-down',
|
||||
'slide-left-enter': 'animate-slide-left',
|
||||
'slide-right-enter': 'animate-slide-right',
|
||||
|
||||
// Zoom utilities
|
||||
'zoom-enter': 'animate-zoom-in',
|
||||
'zoom-exit': 'animate-zoom-out',
|
||||
|
||||
// Bounce
|
||||
'bounce-enter': 'animate-bounce-in',
|
||||
|
||||
// Staggered animations for lists
|
||||
'stagger-1': 'transition-all duration-300 delay-100',
|
||||
'stagger-2': 'transition-all duration-300 delay-200',
|
||||
'stagger-3': 'transition-all duration-300 delay-300',
|
||||
'stagger-4': 'transition-all duration-300 delay-400',
|
||||
'stagger-5': 'transition-all duration-300 delay-500',
|
||||
},
|
||||
rules: [
|
||||
// Custom transition classes that can be applied conditionally
|
||||
['enter-active', { transition: 'all 0.3s ease-out' }],
|
||||
['leave-active', { transition: 'all 0.3s ease-in' }],
|
||||
['enter-from', { opacity: '0', transform: 'translateY(10px)' }],
|
||||
['leave-to', { opacity: '0', transform: 'translateY(-10px)' }],
|
||||
],
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user