You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/03/23 04:36:21 UTC

[dolphinscheduler] branch dev updated: [Fix][UI Next][V1.0.0-Alpha] Fix the task icons not shown in dag page (#9104)

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

songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git


The following commit(s) were added to refs/heads/dev by this push:
     new 8d1974b  [Fix][UI Next][V1.0.0-Alpha] Fix the task icons not shown in dag page (#9104)
8d1974b is described below

commit 8d1974b9bc2558714e6c8cb3e536e5d4baf90b5a
Author: wangyizhi <wa...@cmss.chinamobile.com>
AuthorDate: Wed Mar 23 12:36:15 2022 +0800

    [Fix][UI Next][V1.0.0-Alpha] Fix the task icons not shown in dag page (#9104)
---
 .../images/task-icons/conditions.png               | Bin
 .../images/task-icons/conditions_hover.png         | Bin
 .../images/task-icons/data_quality.png             | Bin
 .../images/task-icons/data_quality_hover.png       | Bin
 .../assets => public}/images/task-icons/datax.png  | Bin
 .../images/task-icons/datax_hover.png              | Bin
 .../images/task-icons/dependent.png                | Bin
 .../images/task-icons/dependent_hover.png          | Bin
 .../assets => public}/images/task-icons/emr.png    | Bin
 .../images/task-icons/emr_hover.png                | Bin
 .../assets => public}/images/task-icons/flink.png  | Bin
 .../images/task-icons/flink_hover.png              | Bin
 .../assets => public}/images/task-icons/http.png   | Bin
 .../images/task-icons/http_hover.png               | Bin
 .../assets => public}/images/task-icons/mr.png     | Bin
 .../images/task-icons/mr_hover.png                 | Bin
 .../assets => public}/images/task-icons/pigeon.png | Bin
 .../images/task-icons/pigeon_hover.png             | Bin
 .../images/task-icons/procedure.png                | Bin
 .../images/task-icons/procedure_hover.png          | Bin
 .../assets => public}/images/task-icons/python.png | Bin
 .../images/task-icons/python_hover.png             | Bin
 .../images/task-icons/seatunnel.png                | Bin
 .../images/task-icons/seatunnel_hover.png          | Bin
 .../assets => public}/images/task-icons/shell.png  | Bin
 .../images/task-icons/shell_hover.png              | Bin
 .../assets => public}/images/task-icons/spark.png  | Bin
 .../images/task-icons/spark_hover.png              | Bin
 .../assets => public}/images/task-icons/sql.png    | Bin
 .../images/task-icons/sql_hover.png                | Bin
 .../assets => public}/images/task-icons/sqoop.png  | Bin
 .../images/task-icons/sqoop_hover.png              | Bin
 .../images/task-icons/sub_process.png              | Bin
 .../images/task-icons/sub_process_hover.png        | Bin
 .../assets => public}/images/task-icons/switch.png | Bin
 .../images/task-icons/switch_hover.png             | Bin
 .../workflow/components/dag/dag.module.scss        |  72 ++++++++++-----------
 .../workflow/components/dag/use-cell-active.ts     |   8 ++-
 .../components/dag/use-custom-cell-builder.ts      |   4 +-
 .../projects/workflow/definition/tree/index.tsx    |  32 ++++-----
 .../workflow/relation/components/Graph.tsx         |  18 ++++--
 41 files changed, 72 insertions(+), 62 deletions(-)

diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/conditions.png b/dolphinscheduler-ui-next/public/images/task-icons/conditions.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/conditions.png
rename to dolphinscheduler-ui-next/public/images/task-icons/conditions.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/conditions_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/conditions_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/conditions_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/conditions_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/data_quality.png b/dolphinscheduler-ui-next/public/images/task-icons/data_quality.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/data_quality.png
rename to dolphinscheduler-ui-next/public/images/task-icons/data_quality.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/data_quality_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/data_quality_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/data_quality_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/data_quality_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/datax.png b/dolphinscheduler-ui-next/public/images/task-icons/datax.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/datax.png
rename to dolphinscheduler-ui-next/public/images/task-icons/datax.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/datax_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/datax_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/datax_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/datax_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/dependent.png b/dolphinscheduler-ui-next/public/images/task-icons/dependent.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/dependent.png
rename to dolphinscheduler-ui-next/public/images/task-icons/dependent.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/dependent_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/dependent_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/dependent_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/dependent_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/emr.png b/dolphinscheduler-ui-next/public/images/task-icons/emr.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/emr.png
rename to dolphinscheduler-ui-next/public/images/task-icons/emr.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/emr_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/emr_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/emr_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/emr_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/flink.png b/dolphinscheduler-ui-next/public/images/task-icons/flink.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/flink.png
rename to dolphinscheduler-ui-next/public/images/task-icons/flink.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/flink_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/flink_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/flink_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/flink_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/http.png b/dolphinscheduler-ui-next/public/images/task-icons/http.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/http.png
rename to dolphinscheduler-ui-next/public/images/task-icons/http.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/http_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/http_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/http_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/http_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/mr.png b/dolphinscheduler-ui-next/public/images/task-icons/mr.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/mr.png
rename to dolphinscheduler-ui-next/public/images/task-icons/mr.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/mr_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/mr_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/mr_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/mr_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/pigeon.png b/dolphinscheduler-ui-next/public/images/task-icons/pigeon.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/pigeon.png
rename to dolphinscheduler-ui-next/public/images/task-icons/pigeon.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/pigeon_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/pigeon_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/pigeon_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/pigeon_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/procedure.png b/dolphinscheduler-ui-next/public/images/task-icons/procedure.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/procedure.png
rename to dolphinscheduler-ui-next/public/images/task-icons/procedure.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/procedure_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/procedure_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/procedure_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/procedure_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/python.png b/dolphinscheduler-ui-next/public/images/task-icons/python.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/python.png
rename to dolphinscheduler-ui-next/public/images/task-icons/python.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/python_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/python_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/python_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/python_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/seatunnel.png b/dolphinscheduler-ui-next/public/images/task-icons/seatunnel.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/seatunnel.png
rename to dolphinscheduler-ui-next/public/images/task-icons/seatunnel.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/seatunnel_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/seatunnel_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/seatunnel_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/seatunnel_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/shell.png b/dolphinscheduler-ui-next/public/images/task-icons/shell.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/shell.png
rename to dolphinscheduler-ui-next/public/images/task-icons/shell.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/shell_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/shell_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/shell_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/shell_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/spark.png b/dolphinscheduler-ui-next/public/images/task-icons/spark.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/spark.png
rename to dolphinscheduler-ui-next/public/images/task-icons/spark.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/spark_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/spark_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/spark_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/spark_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/sql.png b/dolphinscheduler-ui-next/public/images/task-icons/sql.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/sql.png
rename to dolphinscheduler-ui-next/public/images/task-icons/sql.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/sql_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/sql_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/sql_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/sql_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/sqoop.png b/dolphinscheduler-ui-next/public/images/task-icons/sqoop.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/sqoop.png
rename to dolphinscheduler-ui-next/public/images/task-icons/sqoop.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/sqoop_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/sqoop_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/sqoop_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/sqoop_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/sub_process.png b/dolphinscheduler-ui-next/public/images/task-icons/sub_process.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/sub_process.png
rename to dolphinscheduler-ui-next/public/images/task-icons/sub_process.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/sub_process_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/sub_process_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/sub_process_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/sub_process_hover.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/switch.png b/dolphinscheduler-ui-next/public/images/task-icons/switch.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/switch.png
rename to dolphinscheduler-ui-next/public/images/task-icons/switch.png
diff --git a/dolphinscheduler-ui-next/src/assets/images/task-icons/switch_hover.png b/dolphinscheduler-ui-next/public/images/task-icons/switch_hover.png
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/task-icons/switch_hover.png
rename to dolphinscheduler-ui-next/public/images/task-icons/switch_hover.png
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
index c019be9..4d69d59 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
@@ -102,116 +102,116 @@ $bgLight: #ffffff;
     background-size: 100% 100%;
     margin-right: 10px;
     &.icon-shell {
-      background-image: url('@/assets/images/task-icons/shell.png');
+      background-image: url('/images/task-icons/shell.png');
     }
     &.icon-sub_process {
-      background-image: url('@/assets/images/task-icons/sub_process.png');
+      background-image: url('/images/task-icons/sub_process.png');
     }
     &.icon-data_quality {
-      background-image: url('@/assets/images/task-icons/data_quality.png');
+      background-image: url('/images/task-icons/data_quality.png');
     }
     &.icon-procedure {
-      background-image: url('@/assets/images/task-icons/procedure.png');
+      background-image: url('/images/task-icons/procedure.png');
     }
     &.icon-sql {
-      background-image: url('@/assets/images/task-icons/sql.png');
+      background-image: url('/images/task-icons/sql.png');
     }
     &.icon-flink {
-      background-image: url('@/assets/images/task-icons/flink.png');
+      background-image: url('/images/task-icons/flink.png');
     }
     &.icon-mr {
-      background-image: url('@/assets/images/task-icons/mr.png');
+      background-image: url('/images/task-icons/mr.png');
     }
     &.icon-python {
-      background-image: url('@/assets/images/task-icons/python.png');
+      background-image: url('/images/task-icons/python.png');
     }
     &.icon-dependent {
-      background-image: url('@/assets/images/task-icons/dependent.png');
+      background-image: url('/images/task-icons/dependent.png');
     }
     &.icon-http {
-      background-image: url('@/assets/images/task-icons/http.png');
+      background-image: url('/images/task-icons/http.png');
     }
     &.icon-datax {
-      background-image: url('@/assets/images/task-icons/datax.png');
+      background-image: url('/images/task-icons/datax.png');
     }
     &.icon-pigeon {
-      background-image: url('@/assets/images/task-icons/pigeon.png');
+      background-image: url('/images/task-icons/pigeon.png');
     }
     &.icon-sqoop {
-      background-image: url('@/assets/images/task-icons/sqoop.png');
+      background-image: url('/images/task-icons/sqoop.png');
     }
     &.icon-conditions {
-      background-image: url('@/assets/images/task-icons/conditions.png');
+      background-image: url('/images/task-icons/conditions.png');
     }
     &.icon-seatunnel {
-      background-image: url('@/assets/images/task-icons/seatunnel.png');
+      background-image: url('/images/task-icons/seatunnel.png');
     }
     &.icon-spark {
-      background-image: url('@/assets/images/task-icons/spark.png');
+      background-image: url('/images/task-icons/spark.png');
     }
     &.icon-switch {
-      background-image: url('@/assets/images/task-icons/switch.png');
+      background-image: url('/images/task-icons/switch.png');
     }
     &.icon-emr {
-      background-image: url('@/assets/images/task-icons/emr.png');
+      background-image: url('/images/task-icons/emr.png');
     }
   }
 
   &:hover {
     .sidebar-icon {
       &.icon-shell {
-        background-image: url('@/assets/images/task-icons/shell_hover.png');
+        background-image: url('/images/task-icons/shell_hover.png');
       }
       &.icon-sub_process {
-        background-image: url('@/assets/images/task-icons/sub_process_hover.png');
+        background-image: url('/images/task-icons/sub_process_hover.png');
       }
       &.icon-data_quality {
-        background-image: url('@/assets/images/task-icons/data_quality_hover.png');
+        background-image: url('/images/task-icons/data_quality_hover.png');
       }
       &.icon-procedure {
-        background-image: url('@/assets/images/task-icons/procedure_hover.png');
+        background-image: url('/images/task-icons/procedure_hover.png');
       }
       &.icon-sql {
-        background-image: url('@/assets/images/task-icons/sql_hover.png');
+        background-image: url('/images/task-icons/sql_hover.png');
       }
       &.icon-flink {
-        background-image: url('@/assets/images/task-icons/flink_hover.png');
+        background-image: url('/images/task-icons/flink_hover.png');
       }
       &.icon-mr {
-        background-image: url('@/assets/images/task-icons/mr_hover.png');
+        background-image: url('/images/task-icons/mr_hover.png');
       }
       &.icon-python {
-        background-image: url('@/assets/images/task-icons/python_hover.png');
+        background-image: url('/images/task-icons/python_hover.png');
       }
       &.icon-dependent {
-        background-image: url('@/assets/images/task-icons/dependent_hover.png');
+        background-image: url('/images/task-icons/dependent_hover.png');
       }
       &.icon-http {
-        background-image: url('@/assets/images/task-icons/http_hover.png');
+        background-image: url('/images/task-icons/http_hover.png');
       }
       &.icon-datax {
-        background-image: url('@/assets/images/task-icons/datax_hover.png');
+        background-image: url('/images/task-icons/datax_hover.png');
       }
       &.icon-pigeon {
-        background-image: url('@/assets/images/task-icons/pigeon_hover.png');
+        background-image: url('/images/task-icons/pigeon_hover.png');
       }
       &.icon-sqoop {
-        background-image: url('@/assets/images/task-icons/sqoop_hover.png');
+        background-image: url('/images/task-icons/sqoop_hover.png');
       }
       &.icon-conditions {
-        background-image: url('@/assets/images/task-icons/conditions_hover.png');
+        background-image: url('/images/task-icons/conditions_hover.png');
       }
       &.icon-seatunnel {
-        background-image: url('@/assets/images/task-icons/seatunnel_hover.png');
+        background-image: url('/images/task-icons/seatunnel_hover.png');
       }
       &.icon-spark {
-        background-image: url('@/assets/images/task-icons/spark_hover.png');
+        background-image: url('/images/task-icons/spark_hover.png');
       }
       &.icon-switch {
-        background-image: url('@/assets/images/task-icons/switch_hover.png');
+        background-image: url('/images/task-icons/switch_hover.png');
       }
       &.icon-emr {
-        background-image: url('@/assets/images/task-icons/emr_hover.png');
+        background-image: url('/images/task-icons/emr_hover.png');
       }
     }
   }
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-active.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-active.ts
index 4a58094..3a12831 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-active.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-cell-active.ts
@@ -97,7 +97,9 @@ export function useCellActive(options: Options) {
     let portAttrs = null
 
     if (isHover || isSelected) {
-      img = `/src/assets/images/task-icons/${node.data.taskType.toLocaleLowerCase()}_hover.png`
+      img = `${
+        import.meta.env.BASE_URL
+      }images/task-icons/${node.data.taskType.toLocaleLowerCase()}_hover.png`
       if (isHover) {
         nodeAttrs = nodeHover
         portAttrs = _.merge(portDefault, portHover)
@@ -106,7 +108,9 @@ export function useCellActive(options: Options) {
         portAttrs = _.merge(portDefault, portSelected)
       }
     } else {
-      img = `/src/assets/images/task-icons/${node.data.taskType.toLocaleLowerCase()}.png`
+      img = `${
+        import.meta.env.BASE_URL
+      }images/task-icons/${node.data.taskType.toLocaleLowerCase()}.png`
       nodeAttrs = NODE.attrs
       portAttrs = portDefault
     }
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-custom-cell-builder.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-custom-cell-builder.ts
index db5c1bc..0579ad6 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-custom-cell-builder.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-custom-cell-builder.ts
@@ -83,7 +83,9 @@ export function useCustomCellBuilder() {
       attrs: {
         image: {
           // Use href instead of xlink:href, you may lose the icon when downloadPNG
-          'xlink:href': `/src/assets/images/task-icons/${type.toLocaleLowerCase()}.png`
+          'xlink:href': `${
+            import.meta.env.BASE_URL
+          }images/task-icons/${type.toLocaleLowerCase()}.png`
         },
         title: {
           text: truncation
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/tree/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/tree/index.tsx
index 752824f..2bbc917 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/tree/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/tree/index.tsx
@@ -55,82 +55,82 @@ export default defineComponent({
       {
         taskType: 'SHELL',
         color: '#646464',
-        image: '/src/assets/images/task-icons/shell.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/shell.png`
       },
       {
         taskType: 'SUB_PROCESS',
         color: '#4295DA',
-        image: '/src/assets/images/task-icons/sub_process.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/sub_process.png`
       },
       {
         taskType: 'PROCEDURE',
         color: '#545CC6',
-        image: '/src/assets/images/task-icons/procedure.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/procedure.png`
       },
       {
         taskType: 'SQL',
         color: '#8097A0',
-        image: '/src/assets/images/task-icons/sql.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/sql.png`
       },
       {
         taskType: 'SPARK',
         color: '#a16435',
-        image: '/src/assets/images/task-icons/spark.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/spark.png`
       },
       {
         taskType: 'FLINK',
         color: '#d68f5b',
-        image: '/src/assets/images/task-icons/flink.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/flink.png`
       },
       {
         taskType: 'MR',
         color: '#A1A5C9',
-        image: '/src/assets/images/task-icons/mr.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/mr.png`
       },
       {
         taskType: 'PYTHON',
         color: '#60BCD5',
-        image: '/src/assets/images/task-icons/python.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/python.png`
       },
       {
         taskType: 'DEPENDENT',
         color: '#60BCD5',
-        image: '/src/assets/images/task-icons/dependent.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/dependent.png`
       },
       {
         taskType: 'HTTP',
         color: '#7f3903',
-        image: '/src/assets/images/task-icons/http.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/http.png`
       },
       {
         taskType: 'DATAX',
         color: '#75CC71',
-        image: '/src/assets/images/task-icons/datax.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/datax.png`
       },
       {
         taskType: 'PIGEON',
         color: '#5EC459',
-        image: '/src/assets/images/task-icons/pigeon.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/pigeon.png`
       },
       {
         taskType: 'SQOOP',
         color: '#f98b3d',
-        image: '/src/assets/images/task-icons/sqoop.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/sqoop.png`
       },
       {
         taskType: 'CONDITIONS',
         color: '#b99376',
-        image: '/src/assets/images/task-icons/conditions.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/conditions.png`
       },
       {
         taskType: 'SWITCH',
         color: '#ff6f00',
-        image: '/src/assets/images/task-icons/switch.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/switch.png`
       },
       {
         taskType: 'SEATUNNEL',
         color: '#8c8c8f',
-        image: '/src/assets/images/task-icons/seatunnel.png'
+        image: `${import.meta.env.BASE_URL}images/task-icons/seatunnel.png`
       },
       { taskType: 'DAG', color: '#bbdde9' }
     ])
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx
index e6b8497..40f1079 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx
@@ -139,14 +139,18 @@ const GraphChart = defineComponent({
                 Number(item.schedulePublishStatus),
                 Number(item.workFlowPublishStatus)
               ),
-              workFlowPublishStatus: Number(item.workFlowPublishStatus) === 0
-                ? t('project.workflow.offline')
-                : t('project.workflow.online'),
-              schedulePublishStatus: Number(item.schedulePublishStatus) === 0
-                ? t('project.workflow.offline')
-                : t('project.workflow.online'),
+              workFlowPublishStatus:
+                Number(item.workFlowPublishStatus) === 0
+                  ? t('project.workflow.offline')
+                  : t('project.workflow.online'),
+              schedulePublishStatus:
+                Number(item.schedulePublishStatus) === 0
+                  ? t('project.workflow.offline')
+                  : t('project.workflow.online'),
               crontab: item.crontab,
-              scheduleStartTime: item.scheduleStartTime ? item.scheduleStartTime : '-',
+              scheduleStartTime: item.scheduleStartTime
+                ? item.scheduleStartTime
+                : '-',
               scheduleEndTime: item.scheduleEndTime ? item.scheduleEndTime : '-'
             }
           }),