[Improve] Optimize task description display (#261)

apache · Jan 9, 2025 · fcd2353 · fcd2353
1 parent e33dda6
commit fcd2353
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 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
@@ -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
@@ -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>
     )