From 61bbfac3cd817d444683989e30764bafa249ca2b Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Mon, 23 Oct 2023 15:23:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=A1=E5=88=92=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E6=8A=A5=E5=91=8A=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=20(#2640?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/cronjob/record/index.vue | 58 ++++++++++++---------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/frontend/src/views/cronjob/record/index.vue b/frontend/src/views/cronjob/record/index.vue
index 1d40204d8..01fea06bb 100644
--- a/frontend/src/views/cronjob/record/index.vue
+++ b/frontend/src/views/cronjob/record/index.vue
@@ -125,23 +125,29 @@
             <template #main>
                 <div class="mainClass">
                     <el-row :gutter="20" v-show="hasRecords" class="mainRowClass">
-                        <el-col :span="8">
+                        <el-col :span="6">
                             <div>
                                 <ul class="infinite-list" style="overflow: auto">
-                                    <li
+                                    <el-card
                                         v-for="(item, index) in records"
                                         :key="index"
                                         @click="forDetail(item)"
                                         class="infinite-list-item"
                                     >
-                                        <el-icon v-if="item.status === 'Success'"><Select /></el-icon>
-                                        <el-icon v-if="item.status === 'Waiting'"><Loading /></el-icon>
-                                        <el-icon v-if="item.status === 'Failed'"><CloseBold /></el-icon>
-                                        <span v-if="item.id === currentRecord.id" style="color: red">
+                                        <el-tag v-if="item.status === 'Success'" type="success">
+                                            {{ $t('commons.status.success') }}
+                                        </el-tag>
+                                        <el-tag v-if="item.status === 'Waiting'" type="info">
+                                            {{ $t('commons.status.waiting') }}
+                                        </el-tag>
+                                        <el-tag v-if="item.status === 'Failed'" type="danger">
+                                            {{ $t('commons.status.failed') }}
+                                        </el-tag>
+                                        <span v-if="item.id === currentRecord.id" class="select-card">
                                             {{ dateFormat(0, 0, item.startTime) }}
                                         </span>
                                         <span v-else>{{ dateFormat(0, 0, item.startTime) }}</span>
-                                    </li>
+                                    </el-card>
                                 </ul>
                                 <div style="margin-top: 10px; font-size: 12px; float: right">
                                     <el-pagination
@@ -158,7 +164,7 @@
                                 </div>
                             </div>
                         </el-col>
-                        <el-col :span="16">
+                        <el-col :span="18">
                             <el-form label-position="top" :v-key="refresh">
                                 <el-row type="flex" justify="center">
                                     <el-form-item class="descriptionWide" v-if="isBackup()">
@@ -714,30 +720,32 @@ defineExpose({
 
 <style lang="scss" scoped>
 .infinite-list {
-    height: calc(100vh - 435px);
+    height: calc(100vh - 416px);
     padding: 0;
     margin: 0;
-}
-.infinite-list .infinite-list-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 30px;
-    background: var(--el-color-primary-light-9);
-    margin: 10px;
-    color: var(--el-color-primary);
-    cursor: pointer;
-    &:hover {
+
+    .el-card {
+        border: var(--panel-border) !important;
+        &:hover {
+            border: 1px solid var(--el-color-primary) !important;
+            box-shadow: 2px 2px 2px #888888;
+        }
         display: flex;
         align-items: center;
         justify-content: center;
-        height: 30px;
-        background: var(--el-color-primary-light-9);
-        margin: 10px;
-        font-weight: 500;
-        color: red;
+        height: 40px;
+        font-size: 14px;
+        margin: 5px;
+        cursor: pointer;
+    }
+    .el-tag {
+        margin-right: 15px;
     }
 }
+.select-card {
+    color: var(--el-color-primary);
+}
+
 .descriptionWide {
     width: 40%;
 }