From ae5b84bc7c164460047566b0dd8864d135200ac2 Mon Sep 17 00:00:00 2001
From: benjobs <benjobs@apache.org>
Date: Wed, 9 Oct 2024 23:01:04 +0800
Subject: [PATCH] [Improve] project state style improvements

---
 .../src/views/flink/project/View.vue          | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/streampark-console/streampark-console-webapp/src/views/flink/project/View.vue b/streampark-console/streampark-console-webapp/src/views/flink/project/View.vue
index b9c1b024e6..3b80b84f2c 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/project/View.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/project/View.vue
@@ -54,6 +54,18 @@
     </a-card>
     <BasicTable @register="registerTable">
       <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'name'">
+          {{ record.name }}
+          <a-badge
+            class="build-badge"
+            v-if="
+              record.buildState == BuildStateEnum.NEED_REBUILD ||
+              record.buildState == BuildStateEnum.BUILDING
+            "
+            count="NEW"
+            title="this project has changed, need rebuild"
+          />
+        </template>
         <template v-if="column.dataIndex === 'branches'">
           <a-tag
             v-if="record.refs.startsWith('refs/tags/')"
@@ -67,15 +79,7 @@
           </a-tag>
         </template>
         <template v-if="column.dataIndex === 'type'">
-          <a-badge
-            class="build-badge"
-            v-if="record.buildState == BuildStateEnum.NEED_REBUILD"
-            count="NEW"
-            title="this project has changed, need rebuild"
-          >
-            <svg-icon class="avatar" :name="projectMap[record.type]" :size="20" />
-          </a-badge>
-          <svg-icon v-else class="avatar" :name="projectMap[record.type]" :size="20" />
+          <svg-icon class="avatar" :name="projectMap[record.type]" :size="20" />
           {{ projectMap[record.type].toUpperCase() }}
         </template>
         <template v-if="column.dataIndex === 'buildState'">
@@ -360,4 +364,15 @@
   .status-processing-running {
     animation: running-color 800ms ease-out infinite alternate;
   }
+
+  .build-badge {
+    float: right;
+    margin-right: 5px;
+    font-size: 12px;
+    transform: scale(0.7, 0.7);
+
+    .ant-badge-count {
+      padding: 0 5px 1px;
+    }
+  }
 </style>