From fcd23532ad4d9eaf22f43b9f0c6ba1f45ba13bfd Mon Sep 17 00:00:00 2001
From: Jast <shenghang@apache.org>
Date: Fri, 10 Jan 2025 00:57:05 +0800
Subject: [PATCH] [Improve] Optimize task description display (#261)

---
 .../detail/task-definition.module.scss        | 26 ++++++++++++
 .../detail/task-definition.tsx                | 42 +++++++++----------
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/seatunnel-ui/src/views/task/synchronization-instance/detail/task-definition.module.scss b/seatunnel-ui/src/views/task/synchronization-instance/detail/task-definition.module.scss
index 48de97d96..6c3e591b7 100644
--- a/seatunnel-ui/src/views/task/synchronization-instance/detail/task-definition.module.scss
+++ b/seatunnel-ui/src/views/task/synchronization-instance/detail/task-definition.module.scss
@@ -22,6 +22,10 @@
   h4 {
     margin: 0;
   }
+
+  .n-space {
+    padding: 14px 16px;
+  }
 }
 
 .left-panel {
@@ -50,3 +54,25 @@
     }
   }
 }
+
+.info-item {
+  margin-bottom: 16px;
+  
+  h4 {
+    font-size: 13px;
+    color: #8c8c8c;
+    margin: 0 0 6px 0;
+    font-weight: 500;
+    
+    strong {
+      color: #262626;
+    }
+  }
+  
+  p {
+    font-size: 14px;
+    color: #595959;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
diff --git a/seatunnel-ui/src/views/task/synchronization-instance/detail/task-definition.tsx b/seatunnel-ui/src/views/task/synchronization-instance/detail/task-definition.tsx
index 7a344174a..c4376bbaf 100644
--- a/seatunnel-ui/src/views/task/synchronization-instance/detail/task-definition.tsx
+++ b/seatunnel-ui/src/views/task/synchronization-instance/detail/task-definition.tsx
@@ -109,29 +109,27 @@ const TaskDefinition = defineComponent({
         </NGi>
         <NGi span='4'>
           <NCard class={styles['right-panel']}>
-            <NSpace vertical>
-              <div>
-                <h4>{this.t('project.synchronization_instance.task_name')}</h4>
-                <p>{this.jobConfig.name}</p>
-              </div>
-              <div>
-                <h4>
-                  {this.t('project.synchronization_instance.description')}
-                </h4>
-                <p>{this.jobConfig.description}</p>
-              </div>
-              <div>
-                <h4>{this.t('project.synchronization_instance.engine')}</h4>
-                <p>{this.jobConfig.engine}</p>
-              </div>
-              {this.formatData().map((i: any) => (
-                <div>
-                  <h4>{i.label}</h4>
-                  <p>{i.value}</p>
+              <NSpace vertical>
+                <div class={styles['info-item']}>
+                  <h4><strong>{this.t('project.synchronization_instance.task_name')}</strong></h4>
+                  <p>{this.jobConfig.name}</p>
                 </div>
-              ))}
-            </NSpace>
-          </NCard>
+                <div class={styles['info-item']}>
+                  <h4><strong>{this.t('project.synchronization_instance.description')}</strong></h4>
+                  <p>{this.jobConfig.description || '-'}</p>
+                </div>
+                <div class={styles['info-item']}>
+                  <h4><strong>{this.t('project.synchronization_instance.engine')}</strong></h4>
+                  <p>{this.jobConfig.engine}</p>
+                </div>
+                {this.formatData().map((i: any) => (
+                  <div class={styles['info-item']}>
+                    <h4><strong>{i.label}</strong></h4>
+                    <p>{i.value || '-'}</p>
+                  </div>
+                ))}
+              </NSpace>
+            </NCard>
         </NGi>
       </NGrid>
     )