feat: 更新拖放功能,重构状态管理,优化工作流组件,添加节点和边的确认删除功能

This commit is contained in:
jxxghp
2025-02-26 21:11:24 +08:00
parent 6d5d4354d9
commit 3d64382c9b
6 changed files with 234 additions and 70 deletions

View File

@@ -5,7 +5,6 @@ import { Background } from '@vue-flow/background'
<template>
<div class="dropzone-background">
<Background :size="2" :gap="20" pattern-color="#BDBDBD" />
<div class="overlay">
<slot />
</div>

View File

@@ -2,20 +2,73 @@
import useDragAndDrop from '@core/utils/workflow'
const { onDragStart } = useDragAndDrop()
// 组件列表
const actions = [
{
type: 'AddDownloadAction',
label: '添加下载资源',
},
{
type: 'AddSubscribeAction',
label: '添加订阅',
},
{
type: 'FetchDownloadsAction',
label: '获取下载任务',
},
{
type: 'FetchMediasAction',
label: '获取媒体数据',
},
{
type: 'FetchRssAction',
label: '获取RSS数据',
},
{
type: 'FetchTorrentsAction',
label: '搜索站点资源',
},
{
type: 'FilterMediasAction',
label: '过滤媒体数据',
},
{
type: 'FilterTorrentsAction',
label: '过滤资源数据',
},
{
type: 'ScrapeFileAction',
label: '刮削文件',
},
{
type: 'SendEventAction',
label: '发送事件',
},
{
type: 'SendMessageAction',
label: '发送消息',
},
{
type: 'TransferFileAction',
label: '整理文件',
},
]
</script>
<template>
<aside>
<div class="description">You can drag these nodes to the pane.</div>
<div class="mb-3"><VLabel>可选动作组件</VLabel></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
class="vue-flow__node-default"
v-for="action in actions"
:draggable="true"
@dragstart="onDragStart($event, action)"
>
{{ action['label'] }}
</div>
<div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'output')">Output Node</div>
</div>
</aside>
</template>