feat(Workflow): add modules

src/components/dialog/WorkflowEditDialog.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import Sidebar from '../workflow/Sidebar.vue'
+import DropzoneBackground from '../workflow/DropzoneBackground.vue'
+import useDragAndDrop from '@core/utils/workflow'
+
+const { onConnect, addEdges } = useVueFlow()
+
+const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()
+
+const nodes = ref([])
+
+onConnect(addEdges)
+</script>
+
+<template>
+  <div class="dnd-flow" @drop="onDrop">
+    <VueFlow :nodes="nodes" @dragover="onDragOver" @dragleave="onDragLeave">
+      <DropzoneBackground
+        :style="{
+          backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
+          transition: 'background-color 0.2s ease',
+        }"
+      >
+        <p v-if="isDragOver">Drop here</p>
+      </DropzoneBackground>
+    </VueFlow>
+
+    <Sidebar />
+  </div>
+</template>
+<style>
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
+@import '@vue-flow/controls/dist/style.css';
+@import '@vue-flow/minimap/dist/style.css';
+@import '@vue-flow/node-resizer/dist/style.css';
+</style>