From bec58fa7fe4fae2deac88200d8d939e12ec8a08f Mon Sep 17 00:00:00 2001
From: lrj <owen.stl@gmail.com>
Date: 星期五, 03 十月 2025 22:26:39 +0800
Subject: [PATCH] 修复小程序WXS日期显示问题并重新设计【我的】页面
---
web/src/views/dashboard/index.vue | 320 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 251 insertions(+), 69 deletions(-)
diff --git a/web/src/views/dashboard/index.vue b/web/src/views/dashboard/index.vue
index 77196f9..05691f8 100644
--- a/web/src/views/dashboard/index.vue
+++ b/web/src/views/dashboard/index.vue
@@ -1,77 +1,67 @@
<template>
- <div>
- <el-row :gutter="20">
+ <div class="dashboard">
+ <el-row :gutter="20" class="stats-row">
<el-col :span="6">
- <el-card class="box-card">
- <template #header>
- <div class="card-header">
- <span>褰撳墠杩涜姣旇禌</span>
- </div>
- </template>
- <div class="text item">
- {{ stats.activeActivities }}
+ <div class="stat-card">
+ <div class="icon-container blue">
+ <el-icon><Trophy /></el-icon>
</div>
- </el-card>
+ <div class="stat-number">{{ stats.activeActivities }}</div>
+ <div class="stat-title">褰撳墠姣旇禌</div>
+ </div>
</el-col>
<el-col :span="6">
- <el-card class="box-card">
- <template #header>
- <div class="card-header">
- <span>鍙傝禌鎬讳汉鏁�</span>
- </div>
- </template>
- <div class="text item">
- {{ stats.totalPlayers }}
+ <div class="stat-card">
+ <div class="icon-container green">
+ <el-icon><UserFilled /></el-icon>
</div>
- </el-card>
+ <div class="stat-number">{{ stats.totalPlayers }}</div>
+ <div class="stat-title">鍙傝禌鎬讳汉鏁�</div>
+ </div>
</el-col>
<el-col :span="6">
- <el-card class="box-card">
- <template #header>
- <div class="card-header">
- <span>鎶ュ悕寰呭鏍�</span>
- </div>
- </template>
- <div class="text item">
- {{ stats.pendingReviews }}
+ <div class="stat-card">
+ <div class="icon-container yellow">
+ <el-icon><Clock /></el-icon>
</div>
- </el-card>
+ <div class="stat-number">{{ stats.pendingReviews }}</div>
+ <div class="stat-title">鎶ュ悕寰呭鏍�</div>
+ </div>
</el-col>
<el-col :span="6">
- <el-card class="box-card">
- <template #header>
- <div class="card-header">
- <span>璇勫鎬绘暟</span>
- </div>
- </template>
- <div class="text item">
- {{ stats.totalJudges }}
+ <div class="stat-card">
+ <div class="icon-container red">
+ <el-icon><User /></el-icon>
</div>
- </el-card>
+ <div class="stat-number">{{ stats.totalJudges }}</div>
+ <div class="stat-title">璇勫鎬绘暟</div>
+ </div>
</el-col>
</el-row>
- <el-card class="box-card" style="margin-top: 20px;">
- <template #header>
- <div class="card-header">
- <span>鏈�杩戞瘮璧�</span>
- <el-button type="primary" @click="$router.push('/activity')">鏌ョ湅鍏ㄩ儴</el-button>
- </div>
- </template>
- <el-table :data="recentActivities" style="width: 100%">
+ <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="endTime" label="缁撴潫鏃堕棿" width="180" />
- <el-table-column prop="status" label="鐘舵��" width="100" />
+ <el-table-column prop="status" label="鐘舵��" width="100">
+ <template #default="{ row }">
+ <span :class="getStatusClass(row.status)">{{ row.status }}</span>
+ </template>
+ </el-table-column>
<el-table-column label="鎿嶄綔">
<template #default="scope">
- <el-button size="small" @click="viewActivity(scope.row)">鏌ョ湅</el-button>
- <el-button size="small" type="primary" @click="manageActivity(scope.row)">绠＄悊</el-button>
+ <a class="action-link" @click="viewActivity(scope.row)">鏌ョ湅</a>
</template>
</el-table-column>
</el-table>
- </el-card>
+ </div>
</div>
</template>
@@ -79,6 +69,7 @@
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'
@@ -110,13 +101,14 @@
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 || '鏈煡'
+ const { content } = data || {};
+ recentActivities.value = (content || []).map(item => ({
+ id: item.id,
+ name: item.name,
+ playerCount: item.playerCount || 0,
+ startTime: item.matchTime,
+ endTime: item.matchTime,
+ status: item.stateName
}))
} catch (error) {
console.error('鍔犺浇鏈�杩戞椿鍔ㄥけ璐�:', error)
@@ -135,29 +127,219 @@
router.push(`/activity/${activity.id}`)
}
-// 绠＄悊姣旇禌
-const manageActivity = (activity: any) => {
- 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 scoped>
-.card-header {
+/* 椤甸潰鏁翠綋鏍峰紡 */
+.dashboard {
+ 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;
}
-.text {
- font-size: 24px;
- font-weight: bold;
+.table-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #1F2937;
+ margin: 0;
}
-.item {
- margin-bottom: 18px;
-}
-
-.box-card {
+/* 琛ㄦ牸鏍峰紡 */
+.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 {
+ margin-bottom: 16px;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0