From 7ad9c3c93f0cc103347ae2e2429e0122fb512e24 Mon Sep 17 00:00:00 2001
From: lrj <owen.stl@gmail.com>
Date: 星期三, 01 十月 2025 21:26:12 +0800
Subject: [PATCH] feat: 修复员工管理功能并优化UI
---
web/src/views/dashboard/index.vue | 441 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 286 insertions(+), 155 deletions(-)
diff --git a/web/src/views/dashboard/index.vue b/web/src/views/dashboard/index.vue
index 26e53e0..4865983 100644
--- a/web/src/views/dashboard/index.vue
+++ b/web/src/views/dashboard/index.vue
@@ -1,103 +1,63 @@
<template>
<div class="dashboard">
- <!-- 鏁版嵁缁熻鍗＄墖 -->
<el-row :gutter="20" class="stats-row">
<el-col :span="6">
<div class="stat-card">
- <div class="stat-icon">
- <el-icon color="#409eff"><Trophy /></el-icon>
+ <div class="icon-container blue">
+ <el-icon><Trophy /></el-icon>
</div>
- <div class="stat-content">
- <div class="stat-number">{{ stats.activeCompetitions }}</div>
- <div class="stat-label">褰撳墠杩涜姣旇禌</div>
- </div>
+ <div class="stat-number">{{ stats.activeActivities }}</div>
+ <div class="stat-title">褰撳墠姣旇禌</div>
</div>
</el-col>
-
<el-col :span="6">
<div class="stat-card">
- <div class="stat-icon">
- <el-icon color="#67c23a"><UserFilled /></el-icon>
+ <div class="icon-container green">
+ <el-icon><UserFilled /></el-icon>
</div>
- <div class="stat-content">
- <div class="stat-number">{{ stats.totalPlayers }}</div>
- <div class="stat-label">鍙傝禌鎬讳汉鏁�</div>
- </div>
+ <div class="stat-number">{{ stats.totalPlayers }}</div>
+ <div class="stat-title">鍙傝禌鎬讳汉鏁�</div>
</div>
</el-col>
-
<el-col :span="6">
<div class="stat-card">
- <div class="stat-icon">
- <el-icon color="#e6a23c"><Clock /></el-icon>
+ <div class="icon-container yellow">
+ <el-icon><Clock /></el-icon>
</div>
- <div class="stat-content">
- <div class="stat-number">{{ stats.pendingReviews }}</div>
- <div class="stat-label">鎶ュ悕寰呭鏍�</div>
- </div>
+ <div class="stat-number">{{ stats.pendingReviews }}</div>
+ <div class="stat-title">鎶ュ悕寰呭鏍�</div>
</div>
</el-col>
-
<el-col :span="6">
<div class="stat-card">
- <div class="stat-icon">
- <el-icon color="#f56c6c"><User /></el-icon>
+ <div class="icon-container red">
+ <el-icon><User /></el-icon>
</div>
- <div class="stat-content">
- <div class="stat-number">{{ stats.totalJudges }}</div>
- <div class="stat-label">璇勫鎬绘暟</div>
- </div>
+ <div class="stat-number">{{ stats.totalJudges }}</div>
+ <div class="stat-title">璇勫鎬绘暟</div>
</div>
</el-col>
</el-row>
- <!-- 蹇�熸搷浣� -->
- <div class="page-card">
- <h3 class="card-title">蹇�熸搷浣�</h3>
- <el-row :gutter="20">
- <el-col :span="6">
- <el-button type="primary" size="large" class="quick-btn" @click="$router.push('/activity')">
- <el-icon><Plus /></el-icon>
- 鏂板姣旇禌
- </el-button>
- </el-col>
- <el-col :span="6">
- <el-button type="success" size="large" class="quick-btn" @click="$router.push('/judge')">
- <el-icon><Plus /></el-icon>
- 鏂板璇勫
- </el-button>
- </el-col>
- <el-col :span="6">
- <el-button type="warning" size="large" class="quick-btn" @click="$router.push('/player')">
- <el-icon><View /></el-icon>
- 瀹℃牳鎶ュ悕
- </el-button>
- </el-col>
- <el-col :span="6">
- <el-button type="info" size="large" class="quick-btn" @click="$router.push('/carousel')">
- <el-icon><Plus /></el-icon>
- 鍙戝竷鏂伴椈
- </el-button>
- </el-col>
- </el-row>
- </div>
-
- <!-- 鏈�杩戞椿鍔� -->
- <div class="page-card">
- <h3 class="card-title">鏈�杩戞瘮璧�</h3>
- <el-table :data="recentActivities" style="width: 100%">
- <el-table-column prop="name" label="姣旇禌鍚嶇О" />
+ <div class="table-card">
+ <div class="table-header">
+ <h3 class="table-title">鏈�杩戞瘮璧�</h3>
+ <el-button type="primary" @click="$router.push('/activity')">鏌ョ湅鍏ㄩ儴</el-button>
+ </div>
+ <el-table :data="recentActivities" class="recent-table">
+ <el-table-column prop="name" label="姣旇禌鍚嶇О" width="180" />
<el-table-column prop="playerCount" label="鎶ュ悕浜烘暟" width="120" />
- <el-table-column prop="startTime" label="姣旇禌鏃堕棿" width="180" />
+ <el-table-column prop="startTime" label="寮�濮嬫椂闂�" width="180" />
+ <el-table-column prop="endTime" label="缁撴潫鏃堕棿" width="180" />
<el-table-column prop="status" label="鐘舵��" width="100">
<template #default="{ row }">
- <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
+ <span :class="getStatusClass(row.status)">{{ row.status }}</span>
</template>
</el-table-column>
- <el-table-column label="鎿嶄綔" width="150">
- <template #default="{ row }">
- <el-button type="primary" size="small" @click="viewActivity(row)">鏌ョ湅</el-button>
- <el-button type="success" size="small" @click="manageActivity(row)">绠＄悊</el-button>
+ <el-table-column label="鎿嶄綔">
+ <template #default="scope">
+ <a class="action-link" @click="viewActivity(scope.row)">鏌ョ湅</a>
+ <a class="action-link" @click="manageActivity(scope.row)">绠＄悊</a>
</template>
</el-table-column>
</el-table>
@@ -106,113 +66,284 @@
</template>
<script setup lang="ts">
-import { reactive } from 'vue'
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
+import { Trophy, UserFilled, Clock, User } from '@element-plus/icons-vue'
+import { getDashboardStats } from '@/api/dashboard'
+import { getActivities } from '@/api/activity'
+
+const router = useRouter()
// 缁熻鏁版嵁
-const stats = reactive({
- activeCompetitions: 5,
- totalPlayers: 128,
- pendingReviews: 23,
- totalJudges: 15
+const stats = ref({
+ activeActivities: 0,
+ totalPlayers: 0,
+ pendingReviews: 0,
+ totalJudges: 0
})
-// 鏈�杩戞瘮璧涙暟鎹�
-const recentActivities = reactive([
- {
- id: 1,
- name: '2024骞村垱鏂板垱涓氬ぇ璧�',
- playerCount: 45,
- startTime: '2024-01-15 09:00',
- status: '杩涜涓�'
- },
- {
- id: 2,
- name: '鎶�鑳界珵璧涘垵璧�',
- playerCount: 32,
- startTime: '2024-01-20 14:00',
- status: '鎶ュ悕涓�'
- },
- {
- id: 3,
- name: '璁捐澶ц禌鍐宠禌',
- playerCount: 18,
- startTime: '2024-01-25 10:00',
- status: '寰呭紑濮�'
- }
-])
+// 鏈�杩戞椿鍔ㄦ暟鎹�
+const recentActivities = ref([])
-// 鑾峰彇鐘舵�佹爣绛剧被鍨�
-const getStatusType = (status: string) => {
- const typeMap: Record<string, string> = {
- '杩涜涓�': 'success',
- '鎶ュ悕涓�': 'warning',
- '寰呭紑濮�': 'info',
- '宸茬粨鏉�': 'info'
+// 鍔犺浇缁熻鏁版嵁
+const loadStats = async () => {
+ try {
+ const data = await getDashboardStats()
+ stats.value = data
+ } catch (error) {
+ console.error('鍔犺浇缁熻鏁版嵁澶辫触:', error)
+ ElMessage.error('鍔犺浇缁熻鏁版嵁澶辫触')
}
- return typeMap[status] || 'info'
}
+
+// 鍔犺浇鏈�杩戞椿鍔�
+const loadRecentActivities = async () => {
+ try {
+ const data = await getActivities(0, 5) // 鑾峰彇鍓�5鏉℃椿鍔�
+ recentActivities.value = data.content.map(activity => ({
+ id: activity.id,
+ name: activity.name,
+ playerCount: activity.playerCount || 0,
+ startTime: activity.matchTime || activity.createTime,
+ endTime: activity.endTime || '寰呭畾',
+ status: activity.stateName || '鏈煡'
+ }))
+ } catch (error) {
+ console.error('鍔犺浇鏈�杩戞椿鍔ㄥけ璐�:', error)
+ ElMessage.error('鍔犺浇鏈�杩戞椿鍔ㄥけ璐�')
+ }
+}
+
+// 椤甸潰鍔犺浇鏃惰幏鍙栨暟鎹�
+onMounted(() => {
+ loadStats()
+ loadRecentActivities()
+})
// 鏌ョ湅姣旇禌
const viewActivity = (activity: any) => {
- ElMessage.info(`鏌ョ湅姣旇禌锛�${activity.name}`)
+ router.push(`/activity/${activity.id}`)
}
// 绠＄悊姣旇禌
const manageActivity = (activity: any) => {
- ElMessage.info(`绠＄悊姣旇禌锛�${activity.name}`)
+ router.push('/activity')
+}
+
+// 鑾峰彇鐘舵�佹牱寮忕被
+const getStatusClass = (status: string) => {
+ const statusMap: Record<string, string> = {
+ '宸插彂甯�': 'status-published',
+ '杩涜涓�': 'status-published',
+ '鏈彂甯�': 'status-unpublished',
+ '鎶ュ悕涓�': 'status-unpublished',
+ '鍏抽棴': 'status-closed',
+ '宸茬粨鏉�': 'status-closed',
+ '寰呭紑濮�': 'status-unpublished'
+ }
+ return statusMap[status] || 'status-unpublished'
}
</script>
-<style lang="scss" scoped>
+<style scoped>
+/* 椤甸潰鏁翠綋鏍峰紡 */
.dashboard {
- .stats-row {
- margin-bottom: 20px;
+ padding: 24px;
+ background-color: #FFFFFF;
+ min-height: 100vh;
+}
+
+/* 缁熻鍗＄墖琛� */
+.stats-row {
+ margin-bottom: 20px;
+}
+
+/* 缁熻鍗＄墖鏍峰紡 */
+.stat-card {
+ background: #FFFFFF;
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+ border: none;
+ padding: 24px;
+ height: 120px;
+ position: relative;
+ overflow: hidden;
+ transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+/* 鍥炬爣瀹瑰櫒 */
+.icon-container {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 24px;
+ left: 24px;
+}
+
+.icon-container.blue {
+ background-color: #E0E7FF;
+ color: #6366F1;
+}
+
+.icon-container.green {
+ background-color: #D1FAE5;
+ color: #10B981;
+}
+
+.icon-container.yellow {
+ background-color: #FEF3C7;
+ color: #F59E0B;
+}
+
+.icon-container.red {
+ background-color: #FECACA;
+ color: #EF4444;
+}
+
+/* 缁熻鏁板瓧 */
+.stat-number {
+ font-size: 32px;
+ font-weight: 700;
+ color: #1F2937;
+ position: absolute;
+ top: 24px;
+ right: 24px;
+ line-height: 1;
+}
+
+/* 缁熻鏍囬 */
+.stat-title {
+ font-size: 14px;
+ font-weight: 500;
+ color: #6B7280;
+ position: absolute;
+ bottom: 24px;
+ left: 24px;
+}
+
+/* 琛ㄦ牸鍗＄墖 */
+.table-card {
+ background: #FFFFFF;
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+ border: none;
+ padding: 24px;
+ margin-top: 20px;
+}
+
+/* 琛ㄦ牸澶撮儴 */
+.table-header {
+ margin-bottom: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.table-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #1F2937;
+ margin: 0;
+}
+
+/* 琛ㄦ牸鏍峰紡 */
+.recent-table {
+ width: 100%;
+}
+
+:deep(.el-table__header) {
+ background-color: #F9FAFB;
+}
+
+:deep(.el-table__header th) {
+ background-color: #F9FAFB !important;
+ color: #374151;
+ font-size: 14px;
+ font-weight: 500;
+ height: 48px;
+ border-bottom: 1px solid #E5E7EB;
+}
+
+:deep(.el-table__row) {
+ height: 56px;
+}
+
+:deep(.el-table__row:nth-child(even)) {
+ background-color: #F9FAFB;
+}
+
+:deep(.el-table__row:nth-child(odd)) {
+ background-color: #FFFFFF;
+}
+
+:deep(.el-table td) {
+ color: #1F2937;
+ font-size: 14px;
+ font-weight: 400;
+ border-bottom: 1px solid #F3F4F6;
+}
+
+/* 鐘舵�佹爣绛炬牱寮� */
+.status-published {
+ color: #67C23A;
+ background-color: #F0F9FF;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+}
+
+.status-unpublished {
+ color: #E6A23C;
+ background-color: #FDF6EC;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+}
+
+.status-closed {
+ color: #F56C6C;
+ background-color: #FEF0F0;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+}
+
+/* 鎿嶄綔閾炬帴鏍峰紡 */
+.action-link {
+ color: #409EFF;
+ cursor: pointer;
+ font-size: 14px;
+ margin: 0 8px;
+ text-decoration: none;
+}
+
+.action-link:hover {
+ color: #66B1FF;
+ text-decoration: underline;
+}
+
+.action-link:first-child {
+ margin-left: 0;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 768px) {
+ .dashboard {
+ padding: 16px;
}
.stat-card {
- background: white;
- border-radius: 8px;
- padding: 20px;
- display: flex;
- align-items: center;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
- .stat-icon {
- font-size: 40px;
- margin-right: 16px;
- }
-
- .stat-content {
- .stat-number {
- font-size: 24px;
- font-weight: bold;
- color: #303133;
- margin-bottom: 4px;
- }
-
- .stat-label {
- font-size: 14px;
- color: #909399;
- }
- }
- }
-
- .card-title {
- margin-bottom: 20px;
- color: #303133;
- font-size: 16px;
- font-weight: 500;
- }
-
- .quick-btn {
- width: 100%;
- height: 60px;
- font-size: 14px;
-
- .el-icon {
- margin-right: 8px;
- }
+ margin-bottom: 16px;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0