feat: 优化考试信息展示，增加状态标签和日期分组

exam/Scripts/examInfo.js

@@ -124,27 +124,70 @@ document.addEventListener("DOMContentLoaded", () => {
             }
 
             examTableBodyElem.innerHTML = "";
+            
+            // 预处理日期和时间段
+            const dateGroups = {};
             data.examInfos.forEach(exam => {
+                const start = new Date(exam.start);
+                const hour = start.getHours();
+                const dateStr = `${start.getMonth() + 1}月${start.getDate()}日<br>${hour < 12 ? '上午' : (hour < 18 ? '下午' : '晚上')}`;
+                
+                if (!dateGroups[dateStr]) {
+                    dateGroups[dateStr] = [];
+                }
+                dateGroups[dateStr].push(exam);
+            });
+
+            // 生成表格
+            Object.entries(dateGroups).forEach(([dateStr, exams]) => {
+                let isFirstRow = true;
+                // 计算实际需要的行数（考虑科目名称中的斜杠）
+                const totalRows = exams.reduce((acc, exam) => {
+                    return acc + (exam.name.includes('/') ? exam.name.split('/').length : 1);
+                }, 0);
+
+                exams.forEach(exam => {
                     const start = new Date(exam.start);
                     const end = new Date(exam.end);
-                let status = "";
+                    const now = new Date(new Date().getTime() + offsetTime * 1000);
+
+                    let status = "未开始";
                     if (now < start) {
-                    status = "即将开始";
+                        status = now > new Date(start.getTime() - 15 * 60 * 1000) ? "即将开始" : "未开始";
                     } else if (now > end) {
                         status = "已结束";
                     } else {
                         status = "进行中";
                     }
 
+                    // 处理包含斜杠的科目名称
+                    const subjects = exam.name.split('/');
+                    subjects.forEach((subject, index) => {
                         const row = document.createElement("tr");
-                row.className = `exam-status-${status}`;
+                        let cells = '';
-                row.innerHTML = `
+
-                    <td>${exam.name}</td>
+                        if (isFirstRow) {
-                    <td>${formatTimeWithoutSeconds(new Date(exam.start).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
+                            cells = `<td rowspan="${totalRows}">${dateStr}</td>`;
-                    <td>${formatTimeWithoutSeconds(new Date(exam.end).toLocaleTimeString('zh-CN', { hour12: false }))}</td>
+                            isFirstRow = false;
+                        }
+
+                        // 仅在第一个科目行添加时间和状态
+                        if (index === 0) {
+                            cells += `
+                                <td>${subject.trim()}</td>
+                                <td rowspan="${subjects.length}">${formatTimeWithoutSeconds(start.toLocaleTimeString('zh-CN', { hour12: false }))}</td>
+                                <td rowspan="${subjects.length}">${formatTimeWithoutSeconds(end.toLocaleTimeString('zh-CN', { hour12: false }))}</td>
+                                <td rowspan="${subjects.length}"><span class="exam-status-tag exam-status-${status}">${status}</span></td>
                             `;
+                        } else {
+                            cells += `<td>${subject.trim()}</td>`;
+                        }
+
+                        row.innerHTML = cells;
                         examTableBodyElem.appendChild(row);
                     });
+                });
+            });
         } catch (e) {
             errorSystem.show('更新考试信息失败: ' + e.message);
         }

exam/Styles/dark.css

@@ -51,7 +51,7 @@ body::-webkit-scrollbar {
     padding: 20px;
     max-width: 1400px; /* 增加主体部分宽度 */
     margin: auto;
-    background-color: rgba(255, 255, 255, 0); /* 使用rgba设置背景透明度为80% */
+    background-color: rgba(0, 0, 0, 0.4); /* 使用rgba设置背景透明度为80% */
 }
 
 h1 {
@@ -87,10 +87,17 @@ h1 {
 }
 
 .left-column, .right-column {
-    width: 48%;
     display: flex;
     flex-direction: column;
-    gap: 3px; /* 板块间隔3px */
+    gap: 3px;
+}
+
+.left-column {
+    width: 45%;
+}
+
+.right-column {
+    width: 50%;
 }
 
 .clock-section, .info-section, .right-column {
@@ -121,14 +128,14 @@ table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;
-    border: 1px solid #333;
+    border: 1px solid rgba(255, 255, 255, 0.75);
     background-color: rgba(31, 31, 31, 0.5);
 }
 
 th, td {
-    border: 1px solid #333;
+    border: 1px solid #fff;
-    padding: 2px; /* 缩短行高 */
+    padding: 0px; /* 缩短行高 */
-    font-size: 2rem;
+    font-size: 1.8rem;
     text-align: center;
 }
 
@@ -136,23 +143,7 @@ th {
     background-color: #333;
     color: #7cc3fb;
     font-weight: bold;
-    border-bottom: 2px solid #2b71ad;
+    border-bottom: 2px solid #fff;
-}
-
-.exam-status-进行中 td {
-    color: #5ba838 !important; /* 绿色字体 */
-}
-
-.exam-status-即将开始 td {
-    color: #fe9901 !important; /* 橙色字体 */
-}
-
-.exam-status-已结束 td {
-    color: #ec0434 !important; /* 红色字体 */
-}
-
-.exam-status-空闲 td {
-    color: blue !important; /* 蓝色字体 */
 }
 
 tr:hover {
@@ -165,7 +156,7 @@ table {
 }
 
 td {
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid #fff;
 }
 
 td:first-child {
@@ -178,6 +169,34 @@ td:last-child {
     border-bottom-right-radius: 8px;
 }
 
+.exam-status-tag {
+    padding: 3px 6px;
+    border-radius: 4px;
+    font-size: 1.2rem;
+    display: inline-block;
+    min-width: 60px;
+}
+
+.exam-status-进行中 {
+    background-color: rgba(91, 168, 56, 0.2);
+    color: #5ba838;
+}
+
+.exam-status-即将开始 {
+    background-color: rgba(254, 153, 1, 0.2);
+    color: #fe9901;
+}
+
+.exam-status-已结束 {
+    background-color: rgba(236, 4, 52, 0.2);
+    color: #ec0434;
+}
+
+.exam-status-未开始 {
+    background-color: rgba(238, 238, 91, 0.2);
+    color: #eeee5b;
+}
+
 #settings-modal {
     display: none;
     position: fixed;

exam/Styles/light.css

@@ -50,7 +50,7 @@ body::-webkit-scrollbar {
     padding: 20px;
     max-width: 1400px;
     margin: auto;
-    background-color: rgba(255, 255, 255, 0);
+    background-color: rgba(255, 255, 255, 0.4);
 }
 
 h1 {
@@ -86,12 +86,19 @@ h1 {
 }
 
 .left-column, .right-column {
-    width: 48%;
     display: flex;
     flex-direction: column;
     gap: 3px;
 }
 
+.left-column {
+    width: 45%;
+}
+
+.right-column {
+    width: 50%;
+}
+
 .clock-section, .info-section, .right-column {
     background-color: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
@@ -123,14 +130,14 @@ table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;
-    border: 1px solid #ccc;
+    border: 1px solid #000;
     background-color: rgba(255, 255, 255, 0.5);
 }
 
 th, td {
-    border: 1px solid #ccc;
+    border: 1px solid #000;
-    padding: 2px;
+    padding: 0px;
-    font-size: 2rem;
+    font-size: 1.8rem;
     text-align: center;
 }
 
@@ -138,23 +145,7 @@ th {
     background-color: #f0f0f0;
     color: #333;
     font-weight: bold;
-    border-bottom: 2px solid #ccc;
+    border-bottom: 2px solid #000;
-}
-
-.exam-status-进行中 td {
-    color: #5ba838 !important;
-}
-
-.exam-status-即将开始 td {
-    color: #fe9901 !important;
-}
-
-.exam-status-已结束 td {
-    color: #ec0434 !important;
-}
-
-.exam-status-空闲 td {
-    color: blue !important;
 }
 
 tr:hover {
@@ -167,7 +158,7 @@ table {
 }
 
 td {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #000;
 }
 
 td:first-child {
@@ -180,6 +171,34 @@ td:last-child {
     border-bottom-right-radius: 8px;
 }
 
+.exam-status-tag {
+    padding: 3px 6px;
+    border-radius: 4px;
+    font-size: 1.2rem;
+    display: inline-block;
+    min-width: 60px;
+}
+
+.exam-status-进行中 {
+    background-color: rgba(91, 168, 56, 0.1);
+    color: #5ba838;
+}
+
+.exam-status-即将开始 {
+    background-color: rgba(254, 153, 1, 0.1);
+    color: #fe9901;
+}
+
+.exam-status-已结束 {
+    background-color: rgba(236, 4, 52, 0.1);
+    color: #ec0434;
+}
+
+.exam-status-未开始 {
+    background-color: rgba(238, 238, 91, 0.1);
+    color: #d4b106;
+}
+
 #settings-modal {
     display: none;
     position: fixed;

exam/index.html

@@ -35,9 +35,11 @@
                 <table>
                     <thead>
                         <tr>
+                            <th>时间</th>
                             <th>科目</th>
-                            <th>开始时间</th>
+                            <th>开始</th>
-                            <th>结束时间</th>
+                            <th>结束</th>
+                            <th>状态</th>
                         </tr>
                     </thead>
                     <tbody id="exam-table-body">