From aa685cb2b859b7cb8324060070e9ed4a5250e442 Mon Sep 17 00:00:00 2001
From: MKStoler <MKStoler1024@proton.me>
Date: Thu, 10 Oct 2024 13:48:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=80=92=E8=AE=A1=E6=97=B6=20chore:=20?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/components/ExamList.vue    | 69 +++++++++++++++------
 src/renderer/src/components/SubjectInfo.vue | 22 ++++++-
 src/renderer/src/layouts/default.vue        |  8 ++-
 src/renderer/src/pages/about.vue            |  2 +-
 4 files changed, 78 insertions(+), 23 deletions(-)

diff --git a/src/renderer/src/components/ExamList.vue b/src/renderer/src/components/ExamList.vue
index f9fafe3..0879dfd 100644
--- a/src/renderer/src/components/ExamList.vue
+++ b/src/renderer/src/components/ExamList.vue
@@ -4,39 +4,43 @@
       <v-row justify="center">
         <v-col cols="12">
           <v-data-table
-            :items="sortedExams"
+            :items="groupedExams"
             :headers="headers"
             item-key="name"
             hide-default-footer
             dense
             class="text-h5"
           >
+            <template #item="{ item }">
+              <template v-if="item.isDate">
+                <tr>
+                  <td colspan="4" class="text-h5">{{ item.date }}</td>
+                </tr>
+              </template>
+              <template v-else>
+                <tr>
+                  <td class="text-h5">{{ item.name }}</td>
+                  <td class="text-h5">{{ formatTime(item.start) }}</td>
+                  <td class="text-h5">{{ formatTime(item.end) }}</td>
+                  <td>
+                    <v-chip :color="getStatusColor(item)" dark class="exam-status-chip">
+                      {{ getStatusText(item) }}
+                    </v-chip>
+                  </td>
+                </tr>
+              </template>
+            </template>
             <template #header.name>
-              <span class="text-h5">科目</span>
+              <span class="text-h5 font-weight-bold">科目</span>
             </template>
             <template #header.start>
-              <span class="text-h5">开始</span>
+              <span class="text-h5 font-weight-bold">开始</span>
             </template>
             <template #header.end>
-              <span class="text-h5">结束</span>
+              <span class="text-h5 font-weight-bold">结束</span>
             </template>
             <template #header.status>
-              <span class="text-h5">状态</span>
-            </template>
-
-            <template #item.name="{ item }">
-              <div class="text-h5">{{ item.name }}</div>
-            </template>
-            <template #item.start="{ item }">
-              <div class="text-h5">{{ formatTime(item.start) }}</div>
-            </template>
-            <template #item.end="{ item }">
-              <div class="text-h5">{{ formatTime(item.end) }}</div>
-            </template>
-            <template #item.status="{ item }">
-              <v-chip :color="getStatusColor(item)" dark class="exam-status-chip">
-                {{ getStatusText(item) }}
-              </v-chip>
+              <span class="text-h5 font-weight-bold">状态</span>
             </template>
           </v-data-table>
         </v-col>
@@ -64,6 +68,27 @@ const sortedExams = computed(() => {
   return state.exams.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());
 });
 
+const groupedExams = computed(() => {
+  const grouped = [];
+  let currentDate = '';
+
+  sortedExams.value.forEach((exam) => {
+    const examDate = new Date(exam.start).toLocaleDateString('zh-CN', {
+      month: 'numeric',
+      day: 'numeric'
+    });
+
+    if (examDate !== currentDate) {
+      currentDate = examDate;
+      grouped.push({ isDate: true, date: `${currentDate}日` });
+    }
+
+    grouped.push({ ...exam, isDate: false });
+  });
+
+  return grouped;
+});
+
 const headers = [
   { text: '科目', value: 'name' },
   { text: '开始', value: 'start', sortable: false },
@@ -121,6 +146,10 @@ onMounted(() => {
   font-size: 1.8rem !important;
 }
 
+.font-weight-bold {
+  font-weight: bold;
+}
+
 .exam-status-chip {
   font-size: 1.5rem !important;
 }
diff --git a/src/renderer/src/components/SubjectInfo.vue b/src/renderer/src/components/SubjectInfo.vue
index c2c28bc..5710297 100644
--- a/src/renderer/src/components/SubjectInfo.vue
+++ b/src/renderer/src/components/SubjectInfo.vue
@@ -12,6 +12,7 @@
       </div>
       <div v-if="isWarning" class="text-h5 text--warning">考试即将结束</div>
       <div v-if="showRemainingTime" class="text-h5 text--info">剩余时间: {{ remainingTime }}</div>
+      <div v-if="showCountdown" class="text-h5 text--info">倒计时: {{ countdown }}</div>
     </v-card-text>
   </v-card>
 
@@ -75,9 +76,17 @@ const showRemainingTime = computed(() => {
 
   const start = new Date(props.exam.start);
   const end = new Date(props.exam.end);
+
+  return now.value >= start && now.value < end;
+});
+
+const showCountdown = computed(() => {
+  if (!props.exam) return false;
+
+  const start = new Date(props.exam.start);
   const fifteenMinutesBeforeStart = new Date(start.getTime() - 15 * 60 * 1000);
 
-  return now.value >= fifteenMinutesBeforeStart && now.value < end;
+  return now.value >= fifteenMinutesBeforeStart && now.value < start;
 });
 
 const remainingTime = computed(() => {
@@ -91,6 +100,17 @@ const remainingTime = computed(() => {
   return `${minutes}分${seconds}秒`;
 });
 
+const countdown = computed(() => {
+  if (!props.exam) return '';
+
+  const start = new Date(props.exam.start);
+  const timeDiff = start.getTime() - now.value.getTime();
+  const minutes = Math.floor(timeDiff / (1000 * 60));
+  const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
+
+  return `${minutes}分${seconds}秒`;
+});
+
 // Update the current time every second
 const updateNow = () => {
   now.value = new Date();
diff --git a/src/renderer/src/layouts/default.vue b/src/renderer/src/layouts/default.vue
index ef3063e..adc9a83 100644
--- a/src/renderer/src/layouts/default.vue
+++ b/src/renderer/src/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <AppTopBar />
-    <v-main>
+    <v-main class="no-scrollbar">
       <router-view />
     </v-main>
   </v-app>
@@ -10,3 +10,9 @@
 <script lang="ts" setup>
 //
 </script>
+
+<style scoped>
+.no-scrollbar {
+  overflow: hidden;
+}
+</style>
diff --git a/src/renderer/src/pages/about.vue b/src/renderer/src/pages/about.vue
index 985dfa0..eb75c65 100644
--- a/src/renderer/src/pages/about.vue
+++ b/src/renderer/src/pages/about.vue
@@ -9,7 +9,7 @@
               欢迎来到考试展板应用程序。这是一个用于展示考试信息的工具，帮助考生更好地了解考试安排和状态。
             </p>
             <p>本应用程序旨在为考生提供便捷的考试信息查看体验。</p>
-            <p>版本号： 1.1.0-Malkuth</p>
+            <p>版本号： 1.1.1-Malkuth</p>
             <p>开发者：Hello8963 & Mkstoler4096</p>
             <v-btn
               href="https://github.com/MKStoler4096/dsz-exam-showboard-next"