refactor: 重构页面布局和组件使用，优化考试信息展示

src/renderer/src/components/ExamList.vue

@@ -11,7 +11,6 @@
             dense
             class="text-h5"
           >
-
             <template #header.name>
               <span class="text-h5">科目</span>
             </template>
@@ -44,7 +43,6 @@
       </v-row>
     </v-container>
   </v-card>
-
 </template>
 
 <script setup lang="ts">

src/renderer/src/pages/infoPage.vue

@@ -1,46 +1,41 @@
 <template>
-  <div class="main-area">
-    <h1>{{ globalStore.examName }}</h1>
+  <v-container class="main-area">
+    <v-row>
+      <v-col cols="12">
+        <h1>{{ globalStore.examName }}</h1>
+      </v-col>
+    </v-row>
 
-    <el-row>
-      <el-col :span="13">
-        <SubjectInfo
-          v-if="isExamRunning"
-          :exam="runningExam"
-        ></SubjectInfo>
-        <h2 v-else>
-          考试未开始
-        </h2>
-      </el-col>
-      <el-col :span="11">
-        <div v-for="exam in globalStore.examInfos">
-          <ExamStatus :exam="exam" />
-        </div>
-    </el-col>
-    </el-row>
-  </div>
+    <v-row>
+      <v-col cols="6">
+        <Clock></Clock>
+        <SubjectInfo :exam="currentExam" />
+      </v-col>
+
+      <v-col cols="6">
+        <ExamList :exam="globalStore.examInfos"></ExamList>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
 import { useAppStore } from '@renderer/stores/app';
-import { getCurrentTimeSlot } from '@renderer/utils/subjectUtils'
+import { getCurrentTimeSlot, getNextExamTimeSlot } from '@renderer/utils/subjectUtils';
 
 const globalStore = useAppStore();
 
-const router = useRouter();
-
 getCurrentTimeSlot(globalStore.examInfos);
 
-const runningExam = computed(() => {
-  return getCurrentTimeSlot(globalStore.examInfos);
+const currentExam = computed(() => {
+  const current = getCurrentTimeSlot(globalStore.examInfos);
+  if (current == null) {
+    return getNextExamTimeSlot(globalStore.examInfos);
+  } else {
+    return current;
+  }
 });
 
-const isExamRunning = computed(() =>{
-  return getCurrentTimeSlot(globalStore.examInfos) == null;
-});
-
-
 //
 </script>
 
@@ -49,4 +44,8 @@ const isExamRunning = computed(() =>{
   padding-left: 20px;
   padding-right: 20px;
 }
+
+.exam-list {
+  margin: 20px;
+}
 </style>

src/renderer/src/pages/mainWindow.vue

@@ -1,30 +1,38 @@
 <template>
-  <div>
-    <h1>电视猪考试看板</h1>
-
-    <el-button @click="OpenDialog">打开配置</el-button>
-
-  </div>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <h1>电视猪考试看板</h1>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <v-btn @click="openDialog" color="primary" dark> 打开配置 </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router';
 import { useAppStore } from '@renderer/stores/app';
 
-const globalStore = useAppStore()
+const globalStore = useAppStore();
 
-
-function OpenDialog() {
+function openDialog() {
   window.electron.ipcRenderer.send('prog:loadjson');
 }
 
 window.electron.ipcRenderer.on('common:openFile', (event, message) => {
   console.log(message.data);
-  let examdata = JSON.parse(message.data);
-  globalStore.$patch(examdata);
+  let examData = JSON.parse(message.data);
+  globalStore.$patch(examData);
   router.push('/infoPage');
 });
 
 const router = useRouter();
-//
 </script>
+
+<style scoped>
+/* 根据需要添加额外的样式 */
+</style>