feat: #33实现

src/renderer/src/components/ExamList.vue

@@ -16,7 +16,9 @@
                 <td v-if="item.showDate" class="text-h5 date-column" :rowspan="item.rowspan">
                   {{ item.date }}<br />{{ item.period }}
                 </td>
-                <td :class="['text-h5', 'subject-column', getStatusClass(item)]">{{ item.name }}</td>
+                <td :class="['text-h5', 'subject-column', getStatusClass(item)]">
+                  {{ item.name }}
+                </td>
                 <td class="text-h5 time-column">{{ formatTime(item.start) }}</td>
                 <td class="text-h5 time-column">{{ formatTime(item.end) }}</td>
               </tr>

src/renderer/src/components/SubjectInfo.vue

@@ -45,8 +45,10 @@ const statusColor = computed(() => {
 
   const start = new Date(props.exam.start);
   const end = new Date(props.exam.end);
+  const fifteenMinutesBeforeStart = new Date(start.getTime() - 15 * 60 * 1000);
 
-  if (now.value < start) return 'status-before';
+  if (now.value < fifteenMinutesBeforeStart) return 'status-before';
+  if (now.value >= fifteenMinutesBeforeStart && now.value < start) return 'status-soon';
   if (now.value >= start && now.value < end) return 'status-middle';
   if (now.value >= end) return 'status-after';
 });
@@ -56,8 +58,10 @@ const statusText = computed(() => {
 
   const start = new Date(props.exam.start);
   const end = new Date(props.exam.end);
+  const fifteenMinutesBeforeStart = new Date(start.getTime() - 15 * 60 * 1000);
 
-  if (now.value < start) return '未开始';
+  if (now.value < fifteenMinutesBeforeStart) return '未开始';
+  if (now.value >= fifteenMinutesBeforeStart && now.value < start) return '即将开始';
   if (now.value >= start && now.value < end) return '进行中';
   if (now.value >= end) return '已结束';
 });
@@ -136,6 +140,10 @@ updateNow();
   color: orange;
 }
 
+.status-soon {
+  color: #ff9800; /* 即将开始的颜色 */
+}
+
 .status-middle {
   color: #00ff00;
 }

src/renderer/src/layouts/default.vue

@@ -4,15 +4,51 @@
     <v-main class="no-scrollbar">
       <router-view />
     </v-main>
+    <div class="scale-control">
+      <v-select
+        v-model="fontSize"
+        :items="fontSizeOptions"
+        label="选择字体大小"
+        class="scale-select"
+      ></v-select>
+      <div class="scale-label">调整字体大小</div>
+    </div>
   </v-app>
 </template>
 
 <script lang="ts" setup>
-//
+import { ref, watch } from 'vue';
+
+const fontSizeOptions = ['75%', '100%', '125%', '150%', '175%', '200%']; // 字体大小选项
+
+const fontSize = ref('100%'); // 默认值为100%
+
+watch(fontSize, (newFontSize) => {
+  document.documentElement.style.fontSize = newFontSize; // 动态调整根元素的字体大小
+});
 </script>
 
 <style scoped>
 .no-scrollbar {
   overflow: hidden;
 }
+
+.scale-control {
+  position: fixed;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scale-select {
+  margin-right: 10px;
+}
+
+.scale-label {
+  margin-left: 10px;
+}
 </style>