Merge pull request #11 from MKStoler4096/master

修复#6：实时刷新考试状态和顶部状态栏
不知道能不能用，先合并再说（）

.github/workflows/build.yaml

@@ -11,8 +11,8 @@ jobs:
 
     strategy:
       matrix:
-        os: [ windows-latest ]
-        node-version: [ 20.x ]
+        os: [windows-latest]
+        node-version: [20.x]
 
     steps:
       - name: Checkout

.github/workflows/publish.yaml

@@ -18,7 +18,6 @@ jobs:
         uses: actions/[email protected]
         if: github.event.release.prerelease == false || matrix.os == 'windows-latest'
 
-
       - name: Set up Node.js
         uses: actions/setup-node@v4
         if: github.event.release.prerelease == false || matrix.os == 'windows-latest'
@@ -29,7 +28,6 @@ jobs:
         run: yarn install
         if: github.event.release.prerelease == false || matrix.os == 'windows-latest'
 
-
       - name: Build and package for Windows
         if: github.event.release.prerelease == false && matrix.os == 'windows-latest'
         run: yarn build:win

README.md

@@ -7,6 +7,7 @@
 [![Beta](https://img.shields.io/github/v/release/hello8693DSZ/dsz-exam-showboard?include_prereleases&style=social-square&label=测试版)](https://github.com/hello8693DSZ/dsz-exam-showboard/releases/)
 
 ## 软件介绍
+
 - 您可以查看下方的详细介绍
 - 使用Vue + TypeScript + JavaScript制作，使用Node.js+Electron完善系统级功能并打包。
 - 欢迎给作者点个右上角的Star或者给作者宣传一波
@@ -15,53 +16,64 @@
 ## 功能
 
 ### 展示考试信息
-- [X] 展示考试名称
-- [X] 展示当前时间
-- [X] 展示当前考试科目名称
-- [X] 展示考试开始，结束时间
-- [X] 展示考试状态
-
+
+- [x] 展示考试名称
+- [x] 展示当前时间
+- [x] 展示当前考试科目名称
+- [x] 展示考试开始，结束时间
+- [x] 展示考试状态
+
 ### 其他功能
-- [X] 考试结束十五分钟前预警
+
+- [x] 考试结束十五分钟前预警
 - [ ] 集控管理（正在开发中）
 
 ## 软件截图
 
 ### 主界面截图
+
 ![main](image/README/main.png)
 
 ### 考试界面截图
+
 ![view](image/README/view.png)
 
 ## 开始使用
+
 ### 下载
+
 对于普通用户，可以在以下渠道下载到本软件
 
 下载 [Realeases](https://github.com/hello8693DSZ/dsz-exam-showboard/releases) | [Actions](https://github.com/hello8693DSZ/dsz-exam-showboard/actions)
 
 ### 准备配置文件
+
 #### 新建格式为`json`的配置文件，模板如下
+
 ```json
 {
-    "examName": "",
-    "message": "",
-    "examInfos": [
-        {
-            "name": "",
-            "start": "XXXX-XX-XXTXX:XX:XX",
-            "end": "XXXX-XX-XXTXX:XX:XX"
-        }
-    ]
+  "examName": "",
+  "message": "",
+  "examInfos": [
+    {
+      "name": "",
+      "start": "XXXX-XX-XXTXX:XX:XX",
+      "end": "XXXX-XX-XXTXX:XX:XX"
+    }
+  ]
 }
 ```
 
 ### 运行
+
 下载完成后，将软件双击运行，等待进度条走完，双击运行桌面上的名为ExamShowboard的快捷方式
 
 ### 导入配置
-进入主界面后，点击打开配置按钮，选择您已配置好的配置文件，下次进入时可点击直接进入看板按钮进入考试看板，继续使用上次加载的配置文件。 
+
+进入主界面后，点击打开配置按钮，选择您已配置好的配置文件，下次进入时可点击直接进入看板按钮进入考试看板，继续使用上次加载的配置文件。
 
 ## 开发
+
 要在本地编译应用您需要安装以下负载和工具
 
 - [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
@@ -108,4 +120,3 @@ $ yarn build:linux
 [![Star 历史](https://starchart.cc/hello8693DSZ/dsz-exam-showboard.svg?variant=adaptive)](https://starchart.cc/hello8693DSZ/dsz-exam-showboard)
 
 <div align="center">
-

src/renderer/src/components/AppTopBar.vue

@@ -1,13 +1,7 @@
 <template>
   <v-system-bar class="position-fixed">
     <v-icon icon="mdi-window-close" @click="ipcHandleExit"></v-icon>
-    <span class="ms-2">{{
-      new Date().toLocaleTimeString('en-US', {
-        hour: 'numeric',
-        minute: 'numeric',
-        hour12: false
-      })
-    }}</span>
+    <span class="ms-2">{{ currentTime }}</span>
   </v-system-bar>
   <v-app-bar :elevation="2" class="position-fixed">
     <v-app-bar-title>{{ profileStore.appHeader }}</v-app-bar-title>
@@ -21,12 +15,32 @@
 </template>
 
 <script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useProfileStore } from '../stores/app';
 
 const profileStore = useProfileStore();
+const router = useRouter();
+const currentTime = ref(
+  new Date().toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: false
+  })
+);
 
-const ipcHandleExit = () => window.electron.ipcRenderer.send('prog:exit');
+const updateTime = () => {
+  currentTime.value = new Date().toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: false
+  });
+};
 
-const router = useRouter();
+onMounted(() => {
+  const interval = setInterval(updateTime, 1000);
+  onUnmounted(() => clearInterval(interval));
+});
+
+const ipcHandleExit = () => window.electron.ipcRenderer.send('prog:exit');
 </script>

src/renderer/src/components/ExamList.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { reacive, computed } from 'vue';
+import { reactive, computed, onMounted, onUnmounted } from 'vue';
 
 const props = defineProps({
   exam: {
@@ -55,9 +55,13 @@ const props = defineProps({
   }
 });
 
+const state = reactive({
+  exams: props.exam
+});
+
 // Computed properties and methods
 const sortedExams = computed(() => {
-  return props.exam.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());
+  return state.exams.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());
 });
 
 const headers = [
@@ -87,10 +91,28 @@ function getStatusText(item: any): string {
   const startTime = new Date(item.start);
   const endTime = new Date(item.end);
 
-  if (now < startTime) return '未开始';
-  else if (now >= startTime && now <= endTime) return '进行中';
-  else return '已结束';
+  if (now < startTime) {
+    return '未开始';
+  } else if (now >= startTime && now <= endTime) {
+    return '进行中';
+  } else {
+    return '已结束';
+  }
 }
+
+// Update exams every minute
+onMounted(() => {
+  const interval = setInterval(() => {
+    state.exams = state.exams.map((exam) => ({
+      ...exam,
+      status: getStatusText(exam)
+    }));
+  }, 1000); // 1000 ms = 1 second
+
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
+});
 </script>
 
 <style scoped>

src/renderer/src/pages/infoPage.vue

@@ -2,7 +2,8 @@
   <v-container class="main-area">
     <v-row>
       <v-col cols="12">
-        <h1>{{ globalStore.examName }}</h1>
+        <h1 class="large-title">{{ globalStore.examName }}</h1>
+        <h2 class="medium-title">{{ globalStore.message }}</h2>
       </v-col>
     </v-row>
 
@@ -35,13 +36,19 @@ const currentExam = computed(() => {
     return current;
   }
 });
-
-//
 </script>
 
 <style scoped>
 .main-area {
   padding-left: 20px;
   padding-right: 20px;
 }
+
+.large-title {
+  font-size: 3em; /* 放大h1文字 */
+}
+
+.medium-title {
+  font-size: 1em; /* 略小一点的h2文字 */
+}
 </style>