[Refactor] Use NodeSlot.hasErrors API (#3284)

Co-authored-by: github-actions <github-actions@github.com>

src/components/graph/GraphCanvas.vue

@@ -37,6 +37,7 @@
 </template>
 
 <script setup lang="ts">
+import type { LGraphNode } from '@comfyorg/litegraph'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
@@ -179,6 +180,37 @@ watch(
   }
 )
 
+// Update node slot errors
+watch(
+  () => executionStore.lastNodeErrors,
+  (lastNodeErrors) => {
+    const removeSlotError = (node: LGraphNode) => {
+      for (const slot of node.inputs) {
+        delete slot.hasErrors
+      }
+      for (const slot of node.outputs) {
+        delete slot.hasErrors
+      }
+    }
+
+    for (const node of comfyApp.graph.nodes) {
+      removeSlotError(node)
+      const nodeErrors = lastNodeErrors?.[node.id]
+      if (!nodeErrors) continue
+      for (const error of nodeErrors.errors) {
+        if (error.extra_info && error.extra_info.input_name) {
+          const inputIndex = node.findInputSlot(error.extra_info.input_name)
+          if (inputIndex !== -1) {
+            node.inputs[inputIndex].hasErrors = true
+          }
+        }
+      }
+    }
+
+    comfyApp.canvas.draw(true, true)
+  }
+)
+
 const loadCustomNodesI18n = async () => {
   try {
     const i18nData = await api.getCustomNodesI18n()