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

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');
       }
     }
   }

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
     }

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

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' }
     ])

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 : '-'
             }
           }),