(seatunnel-web) branch main updated: [Improve] Optimize task description display (#261)

[arshad]

This is an automated email from the ASF dual-hosted git repository.

arshad pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/seatunnel-web.git


The following commit(s) were added to refs/heads/main by this push:
     new fcd23532 [Improve] Optimize task description display (#261)
fcd23532 is described below

commit fcd23532ad4d9eaf22f43b9f0c6ba1f45ba13bfd
Author: Jast <shengh...@apache.org>
AuthorDate: Fri Jan 10 00:57:05 2025 +0800

    [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 48de97d9..6c3e591b 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 7a344174..c4376bba 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>
     )