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>

src/components/workflow/DropzoneBackground.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { Background } from '@vue-flow/background'
+</script>
+
+<template>
+  <div class="dropzone-background">
+    <Background :size="2" :gap="20" pattern-color="#BDBDBD" />
+
+    <div class="overlay">
+      <slot />
+    </div>
+  </div>
+</template>

src/components/workflow/Sidebar.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import useDragAndDrop from '@core/utils/workflow'
+
+const { onDragStart } = useDragAndDrop()
+</script>
+
+<template>
+  <aside>
+    <div class="description">You can drag these nodes to the pane.</div>
+
+    <div class="nodes">
+      <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, 'input')">Input Node</div>
+
+      <div class="vue-flow__node-default" :draggable="true" @dragstart="onDragStart($event, 'default')">
+        Default Node
+      </div>
+
+      <div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'output')">Output Node</div>
+    </div>
+  </aside>
+</template>