优化用户界面体验-首页重构

src/views/index.vue

@@ -65,18 +65,63 @@
         </el-card>
       </el-col>
 
-      <!-- 趋势图表 -->
+      <!-- 赛事状态监控 -->
       <el-col :xs="24" :sm="24" :md="12" :lg="8">
         <el-card class="chart-card">
           <template #header>
             <div class="card-header">
-              <span>数据趋势</span>
+              <span>赛事状态</span>
               <el-icon>
-                <TrendCharts />
+                <Trophy />
               </el-icon>
             </div>
           </template>
-          <div id="lineChart" class="chart-container"></div>
+          <div class="event-status">
+            <div class="status-item">
+              <div class="status-icon upcoming">
+                <el-icon :size="20">
+                  <Clock />
+                </el-icon>
+              </div>
+              <div class="status-content">
+                <div class="status-count">{{ eventStatus.upcoming }}</div>
+                <div class="status-label">未开始</div>
+              </div>
+            </div>
+            <div class="status-item">
+              <div class="status-icon ongoing">
+                <el-icon :size="20">
+                  <VideoPlay />
+                </el-icon>
+              </div>
+              <div class="status-content">
+                <div class="status-count">{{ eventStatus.ongoing }}</div>
+                <div class="status-label">进行中</div>
+              </div>
+            </div>
+            <div class="status-item">
+              <div class="status-icon completed">
+                <el-icon :size="20">
+                  <CircleCheck />
+                </el-icon>
+              </div>
+              <div class="status-content">
+                <div class="status-count">{{ eventStatus.completed }}</div>
+                <div class="status-label">已结束</div>
+              </div>
+            </div>
+            <div class="status-item">
+              <div class="status-icon total">
+                <el-icon :size="20">
+                  <DataBoard />
+                </el-icon>
+              </div>
+              <div class="status-content">
+                <div class="status-count">{{ eventStatus.total }}</div>
+                <div class="status-label">总计</div>
+              </div>
+            </div>
+          </div>
         </el-card>
       </el-col>
 
@@ -165,7 +210,7 @@
 <script setup name="Index" lang="ts">
 import { ref, nextTick, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
-import { TrendCharts, PieChart, Monitor, Operation, Calendar, Bell } from '@element-plus/icons-vue';
+import { TrendCharts, PieChart, Monitor, Operation, Calendar, Bell, Trophy, Clock, VideoPlay, CircleCheck, DataBoard } from '@element-plus/icons-vue';
 import * as echarts from 'echarts';
 import { getArticleCount } from '@/api/system/article';
 import { getEventCount, listGameEvent } from '@/api/system/gameEvent';
@@ -229,6 +274,13 @@ const recentEvents = ref([]);
 
 const systemNotices = ref([]);
 
+const eventStatus = ref({
+  upcoming: 0,
+  ongoing: 0,
+  completed: 0,
+  total: 0
+});
+
 /**
  * 获取最新赛事
  */
@@ -267,6 +319,45 @@ const loadNotice = async () => {
   }
 };
 
+/**
+ * 加载赛事状态统计
+ */
+const loadEventStatus = async () => {
+  try {
+    const res = await listGameEvent({
+      pageNum: 1,
+      pageSize: 1000 // 获取所有数据来统计
+    });
+    
+    if (res.code === 200 && res.rows) {
+      const now = new Date();
+      let upcoming = 0, ongoing = 0, completed = 0;
+      
+      res.rows.forEach(event => {
+        const startTime = new Date(event.startTime);
+        const endTime = new Date(event.endTime);
+        
+        if (now < startTime) {
+          upcoming++;
+        } else if (now >= startTime && now <= endTime) {
+          ongoing++;
+        } else {
+          completed++;
+        }
+      });
+      
+      eventStatus.value = {
+        upcoming,
+        ongoing,
+        completed,
+        total: res.total || res.rows.length
+      };
+    }
+  } catch (error) {
+    console.error('加载赛事状态失败:', error);
+  }
+};
+
 /**
  * 获取统计数量
  */
@@ -488,6 +579,7 @@ const getAllData = async () => {
   loadStatistics();
   loadRecentEvents();
   loadNotice();
+  loadEventStatus();
   getOnlineUser();
 };
 
@@ -724,4 +816,61 @@ onMounted(() => {
     }
   }
 }
+
+.event-status {
+  .status-item {
+    display: flex;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid #f0f0f0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .status-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+    color: white;
+
+    &.upcoming {
+      background: #e6a23c;
+    }
+
+    &.ongoing {
+      background: #67c23a;
+    }
+
+    &.completed {
+      background: #909399;
+    }
+
+    &.total {
+      background: #409eff;
+    }
+  }
+
+  .status-content {
+    flex: 1;
+  }
+
+  .status-count {
+    font-size: 20px;
+    font-weight: bold;
+    color: #303133;
+    line-height: 1;
+    margin-bottom: 4px;
+  }
+
+  .status-label {
+    font-size: 14px;
+    color: #909399;
+  }
+}
 </style>