From 19e2f8876741207d83c9abcd7dc18768dda2f0ea Mon Sep 17 00:00:00 2001
From: hello8693 <1320998105@qq.com>
Date: Mon, 5 Aug 2024 16:56:26 +0800
Subject: [PATCH] =?UTF-8?q?refactor=EF=BC=9A=E5=B0=86ExamStatus=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=BF=81=E7=A7=BB=E5=88=B0Vuetify=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将ExamStatus组件从使用Element UI迁移到Vuetify框架，以提升用户体验。此次迁移包括对组件模板的调整和对样式的一系列修改。

BREAKING CHANGE: 由于依赖从Element UI切换到Vuetify，基于Element UI的自定义样式和组件将不再可用。需要确保所有依赖Element UI的特性已完成迁移或已更新为使用Vuetify。
---
 src/renderer/src/components/ExamStatus.vue | 61 ++++++++++++++--------
 1 file changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/renderer/src/components/ExamStatus.vue b/src/renderer/src/components/ExamStatus.vue
index add1115..cd4d22c 100644
--- a/src/renderer/src/components/ExamStatus.vue
+++ b/src/renderer/src/components/ExamStatus.vue
@@ -1,28 +1,27 @@
 <template>
-  <div class="exam-status">
-    <el-row class="exam-info-bar">
-      <el-col :span="3">
-        <strong>{{ exam.name }}</strong>
-      </el-col>
+  <v-card class="exam-status">
+    <v-card-text class="exam-info-bar">
+      <div class="d-flex flex-row">
+        <div class="flex-grow-1">
+          <strong>{{ exam?.name || '未知名称' }}</strong>
+        </div>
+        &nbsp;
+        <div>{{ formatDateTime(exam?.start) }} ~ {{ formatDateTime(exam?.end) }}</div>
+      </div>
 
-      <el-col :span="8">
-        {{ formatDateTime(exam.start) }} ~ {{ formatDateTime(exam.end) }}
-      </el-col>
-      <el-col :span="3">
-        <el-text class="mx-1" size="large" :type="statusColor">{{ statusText }}</el-text>
-
-      </el-col>
-    </el-row>
-  </div>
+      <div class="status-text-large" :class="statusColor">{{ statusText }}</div>
+    </v-card-text>
+  </v-card>
 </template>
 
 <script setup>
+import { ref, onMounted, computed } from 'vue';
 import moment from 'moment';
 
 const props = defineProps({
   exam: {
     type: Object,
-    required: true
+    default: () => null
   }
 });
 
@@ -33,9 +32,9 @@ const statusColor = computed(() => {
   const start = moment(props.exam.start);
   const end = moment(props.exam.end);
 
-  if (now.isBefore(start)) return 'running';
-  if (now.isBetween(start, end)) return 'success';
-  if (now.isAfter(end)) return 'error';
+  if (now.isBefore(start)) return 'warning--text';
+  if (now.isBetween(start, end)) return 'success--text';
+  if (now.isAfter(end)) return 'error--text';
 });
 
 const statusText = computed(() => {
@@ -51,16 +50,34 @@ const statusText = computed(() => {
 
 <style scoped>
 .exam-status {
-
-  padding: 10px;
-  border: 1px solid #e9e9e9;
   margin-bottom: 10px;
 }
 
 .exam-info-bar {
+  font-size: 1.5em;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 1.4em;
+}
+
+.small-screen .exam-info-bar {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.status-text-large {
+  font-size: 1.05em;
+}
+
+.warning--text {
+  color: orange;
+}
+
+.success--text {
+  color: green;
+}
+
+.error--text {
+  color: red;
 }
 </style>