From 633310305075a9f17c30be8810bfbe383f69a495 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 28 Feb 2025 22:05:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E5=A4=96=E5=B1=82=20div=20?=
 =?UTF-8?q?=E5=8C=85=E8=A3=B9=EF=BC=8C=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dialog/WorkflowActionsDialog.vue          | 70 ++++++++++++++
 src/components/workflow/AddDownloadAction.vue | 56 +++++------
 .../workflow/AddSubscribeAction.vue           | 28 +++---
 .../workflow/FetchDownloadsAction.vue         | 66 ++++++-------
 src/components/workflow/FetchMediasAction.vue | 53 ++++++----
 src/components/workflow/FetchRssAction.vue    | 62 ++++++------
 .../workflow/FetchTorrentsAction.vue          | 82 ++++++++--------
 .../workflow/FilterMediasAction.vue           | 62 ++++++------
 .../workflow/FilterTorrentsAction.vue         | 96 ++++++++++---------
 src/components/workflow/ScanFileAction.vue    | 50 +++++-----
 src/components/workflow/ScrapeFileAction.vue  | 28 +++---
 src/components/workflow/SendEventAction.vue   | 28 +++---
 src/components/workflow/SendMessageAction.vue | 68 ++++++-------
 .../workflow/TransferFileAction.vue           | 44 +++++----
 14 files changed, 449 insertions(+), 344 deletions(-)

diff --git a/src/components/dialog/WorkflowActionsDialog.vue b/src/components/dialog/WorkflowActionsDialog.vue
index 38a6e09e..f2bdcb48 100644
--- a/src/components/dialog/WorkflowActionsDialog.vue
+++ b/src/components/dialog/WorkflowActionsDialog.vue
@@ -8,6 +8,7 @@ import { useToast } from 'vue-toast-notification'
 import api from '@/api'
 import WorkflowSidebar from '@/layouts/components/WorkflowSidebar.vue'
 import DropzoneBackground from '@/layouts/components/DropzoneBackground.vue'
+import ImportCodeDialog from '@/components/dialog/ImportCodeDialog.vue'
 
 const { onConnect, addEdges, nodes, edges } = useVueFlow()
 
@@ -55,6 +56,9 @@ const workflowForm = ref<any>(props.workflow || {})
 // 提示框
 const $toast = useToast()
 
+// 导入代码对话框
+const importCodeDialog = ref(false)
+
 // 调用API 编辑任务
 async function updateWorkflow() {
   // 更新节点和流程
@@ -74,6 +78,57 @@ async function updateWorkflow() {
   }
 }
 
+// 保存导入的代码，直接覆盖原有值
+function saveCodeString(type: string, code: any) {
+  try {
+    if (code) {
+      if (type === 'workflow') {
+        nodes.value = code.actions
+        edges.value = code.flows
+      }
+      importCodeDialog.value = false
+      $toast.success('导入成功！')
+    }
+  } catch (error) {
+    $toast.error('导入失败！')
+    console.error(error)
+  }
+}
+
+// 分享工作流程
+function shareWorkflow() {
+  const codeString = JSON.stringify({ actions: nodes.value, flows: edges.value })
+  navigator.clipboard.writeText(codeString)
+  $toast.success('任务流程代码已复制到剪贴板！')
+}
+
+// 删除选中节点或连接线
+const deleteSelectedNodeOrEdge = () => {
+  // 删除选中的节点
+  const selectedNode = nodes.value.find((node: { selected: any }) => node.selected)
+  if (selectedNode) {
+    // 删除节点
+    nodes.value = nodes.value.filter((node: { id: any }) => node.id !== selectedNode.id)
+    // 删除与该节点相关的 edges
+    edges.value = edges.value.filter(
+      (edge: { source: any; target: any }) => edge.source !== selectedNode.id && edge.target !== selectedNode.id,
+    )
+  }
+  // 删除选中的连接线
+  const selectedEdge = edges.value.find((edge: { selected: any }) => edge.selected)
+  if (selectedEdge) {
+    // 删除连接线
+    edges.value = edges.value.filter((edge: { id: any }) => edge.id !== selectedEdge.id)
+  }
+}
+
+// 键盘按键事件处理
+const handleKeyDown = (event: { key: string }) => {
+  if (event.key === 'Delete' || event.key === 'Backspace') {
+    deleteSelectedNodeOrEdge()
+  }
+}
+
 onMounted(() => {
   if (props.workflow) {
     nodes.value = props.workflow.actions ?? []
@@ -95,6 +150,12 @@ onMounted(() => {
           </VToolbarItems>
           <VToolbarTitle> 编辑流程 - {{ workflow?.name }} </VToolbarTitle>
           <VToolbarItems>
+            <VBtn icon @click="importCodeDialog = true">
+              <VIcon size="large" color="white" icon="mdi-import" />
+            </VBtn>
+            <VBtn icon @click="shareWorkflow">
+              <VIcon size="large" color="white" icon="mdi-share" />
+            </VBtn>
             <VBtn icon @click="updateWorkflow" class="me-5">
               <VIcon size="large" color="white" icon="mdi-content-save" />
             </VBtn>
@@ -111,6 +172,7 @@ onMounted(() => {
             :default-edge-options="{ type: 'animation', animated: true }"
             @dragover="onDragOver"
             @dragleave="onDragLeave"
+            @keydown="handleKeyDown"
           >
             <MiniMap />
             <DropzoneBackground
@@ -125,6 +187,14 @@ onMounted(() => {
         </div>
       </VCardText>
     </VCard>
+    <ImportCodeDialog
+      v-if="importCodeDialog"
+      v-model="importCodeDialog"
+      title="导入任务流程"
+      dataType="workflow"
+      @close="importCodeDialog = false"
+      @save="saveCodeString"
+    />
   </VDialog>
 </template>
 <style>
diff --git a/src/components/workflow/AddDownloadAction.vue b/src/components/workflow/AddDownloadAction.vue
index 9e8cc3cf..3ec6d5be 100644
--- a/src/components/workflow/AddDownloadAction.vue
+++ b/src/components/workflow/AddDownloadAction.vue
@@ -38,31 +38,33 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-download-box-outline" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>添加下载</VCardTitle>
-      <VCardSubtitle>根据资源列表添加下载任务</VCardSubtitle>
-    </VCardItem>
-    <VDivider />
-    <VCardText>
-      <VRow>
-        <VCol cols="12">
-          <VSelect v-model="data.downloader" :items="downloaderOptions" label="下载器" outlined dense />
-        </VCol>
-        <VCol cols="12">
-          <VPathField v-model="data.save_path" storage="local" label="保存路径" clearable placeholder="留空自动" />
-        </VCol>
-        <VCol cols="12">
-          <VSwitch v-model="data.only_lack" label="仅下载缺失的资源" />
-        </VCol>
-      </VRow>
-    </VCardText>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-download-box-outline" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>添加下载</VCardTitle>
+        <VCardSubtitle>根据资源列表添加下载任务</VCardSubtitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VSelect v-model="data.downloader" :items="downloaderOptions" label="下载器" outlined dense />
+          </VCol>
+          <VCol cols="12">
+            <VPathField v-model="data.save_path" storage="local" label="保存路径" clearable placeholder="留空自动" />
+          </VCol>
+          <VCol cols="12">
+            <VSwitch v-model="data.only_lack" label="仅下载缺失的资源" />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/AddSubscribeAction.vue b/src/components/workflow/AddSubscribeAction.vue
index 56a62aeb..6a9e328c 100644
--- a/src/components/workflow/AddSubscribeAction.vue
+++ b/src/components/workflow/AddSubscribeAction.vue
@@ -13,17 +13,19 @@ defineProps({
 })
 </script>
 <template>
-  <VCard>
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-star-check" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>添加订阅</VCardTitle>
-      <VCardSubtitle>根据媒体列表添加订阅</VCardSubtitle>
-    </VCardItem>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard>
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-star-check" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>添加订阅</VCardTitle>
+        <VCardSubtitle>根据媒体列表添加订阅</VCardSubtitle>
+      </VCardItem>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/FetchDownloadsAction.vue b/src/components/workflow/FetchDownloadsAction.vue
index 860abd6f..02dcf9fb 100644
--- a/src/components/workflow/FetchDownloadsAction.vue
+++ b/src/components/workflow/FetchDownloadsAction.vue
@@ -13,36 +13,38 @@ defineProps({
 })
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-progress-download" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>获取下载任务</VCardTitle>
-      <VCardSubtitle>获取下载队列中的任务状态</VCardSubtitle>
-    </VCardItem>
-    <VDivider />
-    <VCardText>
-      <VRow>
-        <VCol cols="12">
-          <VSwitch v-model="data.loop" label="循环执行" />
-        </VCol>
-        <VCol cols="12">
-          <VTextField
-            v-model="data.loop_interval"
-            :disabled="!data.loop"
-            type="number"
-            label="循环间隔 (秒)"
-            outlined
-            dense
-            clearable
-          />
-        </VCol>
-      </VRow>
-    </VCardText>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-progress-download" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>获取下载任务</VCardTitle>
+        <VCardSubtitle>获取下载队列中的任务状态</VCardSubtitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VSwitch v-model="data.loop" label="循环执行" />
+          </VCol>
+          <VCol cols="12">
+            <VTextField
+              v-model="data.loop_interval"
+              :disabled="!data.loop"
+              type="number"
+              label="循环间隔 (秒)"
+              outlined
+              dense
+              clearable
+            />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/FetchMediasAction.vue b/src/components/workflow/FetchMediasAction.vue
index 87ccd607..df674522 100644
--- a/src/components/workflow/FetchMediasAction.vue
+++ b/src/components/workflow/FetchMediasAction.vue
@@ -98,25 +98,36 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-multimedia" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>获取媒体数据</VCardTitle>
-      <VCardSubtitle>获取榜单等媒体数据列表</VCardSubtitle>
-    </VCardItem>
-    <VDivider />
-    <VCardText>
-      <VRow>
-        <VCol cols="12">
-          <VSelect v-model="data.sources" :items="sourceOptions" label="榜单" chips multiple outlined dense clearable />
-        </VCol>
-      </VRow>
-    </VCardText>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-multimedia" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>获取媒体数据</VCardTitle>
+        <VCardSubtitle>获取榜单等媒体数据列表</VCardSubtitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VSelect
+              v-model="data.sources"
+              :items="sourceOptions"
+              label="榜单"
+              chips
+              multiple
+              outlined
+              dense
+              clearable
+            />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/FetchRssAction.vue b/src/components/workflow/FetchRssAction.vue
index b0283c5f..b803f24f 100644
--- a/src/components/workflow/FetchRssAction.vue
+++ b/src/components/workflow/FetchRssAction.vue
@@ -13,34 +13,36 @@ defineProps({
 })
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-rss" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>获取RSS资源</VCardTitle>
-      <VCardSubtitle>订阅RSS地址获取资源</VCardSubtitle>
-    </VCardItem>
-    <VDivider />
-    <VCardText>
-      <VRow>
-        <VCol cols="12">
-          <VTextField v-model="data.url" label="RSS地址" outlined dense clearable />
-        </VCol>
-        <VCol cols="12">
-          <VTextField v-model="data.ua" label="User-Agent" outlined dense clearable />
-        </VCol>
-        <VCol cols="12">
-          <VTextField v-model="data.timeout" type="number" label="超时时间" outlined dense clearable />
-        </VCol>
-        <VCol cols="12">
-          <VSwitch v-model="data.proxy" label="使用代理" />
-        </VCol>
-      </VRow>
-    </VCardText>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-rss" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>获取RSS资源</VCardTitle>
+        <VCardSubtitle>订阅RSS地址获取资源</VCardSubtitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VTextField v-model="data.url" label="RSS地址" outlined dense clearable />
+          </VCol>
+          <VCol cols="12">
+            <VTextField v-model="data.ua" label="User-Agent" outlined dense clearable />
+          </VCol>
+          <VCol cols="12">
+            <VTextField v-model="data.timeout" type="number" label="超时时间" outlined dense clearable />
+          </VCol>
+          <VCol cols="12">
+            <VSwitch v-model="data.proxy" label="使用代理" />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/FetchTorrentsAction.vue b/src/components/workflow/FetchTorrentsAction.vue
index 9ced3502..3ace4132 100644
--- a/src/components/workflow/FetchTorrentsAction.vue
+++ b/src/components/workflow/FetchTorrentsAction.vue
@@ -68,44 +68,46 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-search-web" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>搜索站点资源</VCardTitle>
-      <VCardSubtitle>搜索站点种子资源列表</VCardSubtitle>
-    </VCardItem>
-    <VDivider />
-    <VCardText>
-      <VRow>
-        <VCol cols="12">
-          <VSelect v-model="data.search_type" label="搜索方式" :items="searchOptions" outlined dense />
-        </VCol>
-      </VRow>
-      <VRow v-if="data.search_type === 'keyword'">
-        <VCol cols="6">
-          <VTextField v-model="data.name" label="名称" outlined dense />
-        </VCol>
-        <VCol cols="6">
-          <VTextField v-model="data.year" label="年份" outlined dense />
-        </VCol>
-        <VCol cols="6">
-          <VSelect v-model="data.type" label="类型" :items="typeOptions" outlined dense />
-        </VCol>
-        <VCol cols="6">
-          <VTextField v-model="data.season" type="number" label="季" outlined dense />
-        </VCol>
-      </VRow>
-      <VRow>
-        <VCol cols="12">
-          <VSelect v-model="data.sites" label="站点" :items="siteOptions" chips multiple outlined dense />
-        </VCol>
-      </VRow>
-    </VCardText>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-search-web" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>搜索站点资源</VCardTitle>
+        <VCardSubtitle>搜索站点种子资源列表</VCardSubtitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VSelect v-model="data.search_type" label="搜索方式" :items="searchOptions" outlined dense />
+          </VCol>
+        </VRow>
+        <VRow v-if="data.search_type === 'keyword'">
+          <VCol cols="6">
+            <VTextField v-model="data.name" label="名称" outlined dense />
+          </VCol>
+          <VCol cols="6">
+            <VTextField v-model="data.year" label="年份" outlined dense />
+          </VCol>
+          <VCol cols="6">
+            <VSelect v-model="data.type" label="类型" :items="typeOptions" outlined dense />
+          </VCol>
+          <VCol cols="6">
+            <VTextField v-model="data.season" type="number" label="季" outlined dense />
+          </VCol>
+        </VRow>
+        <VRow>
+          <VCol cols="12">
+            <VSelect v-model="data.sites" label="站点" :items="siteOptions" chips multiple outlined dense />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/FilterMediasAction.vue b/src/components/workflow/FilterMediasAction.vue
index 7f3f6f11..aa6727c5 100644
--- a/src/components/workflow/FilterMediasAction.vue
+++ b/src/components/workflow/FilterMediasAction.vue
@@ -49,34 +49,36 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-filter-check" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>过滤媒体数据</VCardTitle>
-      <VCardSubtitle>对媒体数据列表进行过滤</VCardSubtitle>
-    </VCardItem>
-    <VDivider />
-    <VCardText>
-      <VRow>
-        <VCol cols="12">
-          <VSelect v-model="data.type" label="类型" :items="typeOptions" outlined dense />
-        </VCol>
-        <VCol cols="12">
-          <VSelect v-model="data.category" label="类别" :items="getCategories" outlined dense />
-        </VCol>
-        <VCol cols="6">
-          <VTextField v-model="data.year" label="年份" outlined dense />
-        </VCol>
-        <VCol cols="6">
-          <VTextField v-model="data.vote" type="number" label="评分" outlined dense />
-        </VCol>
-      </VRow>
-    </VCardText>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-filter-check" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>过滤媒体数据</VCardTitle>
+        <VCardSubtitle>对媒体数据列表进行过滤</VCardSubtitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VSelect v-model="data.type" label="类型" :items="typeOptions" outlined dense />
+          </VCol>
+          <VCol cols="12">
+            <VSelect v-model="data.category" label="类别" :items="getCategories" outlined dense />
+          </VCol>
+          <VCol cols="6">
+            <VTextField v-model="data.year" label="年份" outlined dense />
+          </VCol>
+          <VCol cols="6">
+            <VTextField v-model="data.vote" type="number" label="评分" outlined dense />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/FilterTorrentsAction.vue b/src/components/workflow/FilterTorrentsAction.vue
index b50e8882..1d8ba81f 100644
--- a/src/components/workflow/FilterTorrentsAction.vue
+++ b/src/components/workflow/FilterTorrentsAction.vue
@@ -124,51 +124,53 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-filter-multiple" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>过滤资源</VCardTitle>
-      <VCardSubtitle>对资源列表数据进行过滤</VCardSubtitle>
-    </VCardItem>
-    <VDivider />
-    <VCardText>
-      <VRow>
-        <VCol cols="6">
-          <VSelect v-model="data.quality" label="质量" :items="qualityOptions" outlined dense />
-        </VCol>
-        <VCol cols="6">
-          <VSelect v-model="data.resolution" label="分辨率" :items="resolutionOptions" outlined dense />
-        </VCol>
-        <VCol cols="6">
-          <VSelect v-model="data.effect" label="特效" :items="effectOptions" outlined dense />
-        </VCol>
-        <VCol cols="6">
-          <VTextField v-model="data.size" label="大小范围" placeholder="MB" outlined dense />
-        </VCol>
-        <VCol cols="12">
-          <VTextField v-model="data.include" label="包含（关键字、正则式）" outlined dense />
-        </VCol>
-        <VCol cols="12">
-          <VTextField v-model="data.exclude" label="排除（关键字、正则式）" outlined dense />
-        </VCol>
-        <VCol cols="12">
-          <VSelect
-            v-model="data.rule_groups"
-            chips
-            multiple
-            label="过滤规则组"
-            :items="ruleGroupsOptions"
-            outlined
-            dense
-          />
-        </VCol>
-      </VRow>
-    </VCardText>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-filter-multiple" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>过滤资源</VCardTitle>
+        <VCardSubtitle>对资源列表数据进行过滤</VCardSubtitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="6">
+            <VSelect v-model="data.quality" label="质量" :items="qualityOptions" outlined dense />
+          </VCol>
+          <VCol cols="6">
+            <VSelect v-model="data.resolution" label="分辨率" :items="resolutionOptions" outlined dense />
+          </VCol>
+          <VCol cols="6">
+            <VSelect v-model="data.effect" label="特效" :items="effectOptions" outlined dense />
+          </VCol>
+          <VCol cols="6">
+            <VTextField v-model="data.size" label="大小范围" placeholder="MB" outlined dense />
+          </VCol>
+          <VCol cols="12">
+            <VTextField v-model="data.include" label="包含（关键字、正则式）" outlined dense />
+          </VCol>
+          <VCol cols="12">
+            <VTextField v-model="data.exclude" label="排除（关键字、正则式）" outlined dense />
+          </VCol>
+          <VCol cols="12">
+            <VSelect
+              v-model="data.rule_groups"
+              chips
+              multiple
+              label="过滤规则组"
+              :items="ruleGroupsOptions"
+              outlined
+              dense
+            />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/ScanFileAction.vue b/src/components/workflow/ScanFileAction.vue
index db07b42a..b75f8a0d 100644
--- a/src/components/workflow/ScanFileAction.vue
+++ b/src/components/workflow/ScanFileAction.vue
@@ -14,28 +14,30 @@ defineProps({
 })
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-file-move" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>扫描目录</VCardTitle>
-      <VCardSubtitle>扫描目录文件到队列</VCardSubtitle>
-    </VCardItem>
-    <VDivider />
-    <VCardText>
-      <VRow>
-        <VCol cols="12">
-          <VSelect v-model="data.storage" label="存储" :items="storageOptions" outlined dense />
-        </VCol>
-        <VCol cols="12">
-          <VPathField v-model="data.directory" :storage="data.storage" label="目录" clearable />
-        </VCol>
-      </VRow>
-    </VCardText>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-file-move" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>扫描目录</VCardTitle>
+        <VCardSubtitle>扫描目录文件到队列</VCardSubtitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VSelect v-model="data.storage" label="存储" :items="storageOptions" outlined dense />
+          </VCol>
+          <VCol cols="12">
+            <VPathField v-model="data.directory" :storage="data.storage" label="目录" clearable />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/ScrapeFileAction.vue b/src/components/workflow/ScrapeFileAction.vue
index 4b864405..bfc4d2b3 100644
--- a/src/components/workflow/ScrapeFileAction.vue
+++ b/src/components/workflow/ScrapeFileAction.vue
@@ -13,17 +13,19 @@ defineProps({
 })
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-file-find" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>刮削文件</VCardTitle>
-      <VCardSubtitle>刮削媒体信息和图片</VCardSubtitle>
-    </VCardItem>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-file-find" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>刮削文件</VCardTitle>
+        <VCardSubtitle>刮削媒体信息和图片</VCardSubtitle>
+      </VCardItem>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/SendEventAction.vue b/src/components/workflow/SendEventAction.vue
index 1cf1b64b..518346b7 100644
--- a/src/components/workflow/SendEventAction.vue
+++ b/src/components/workflow/SendEventAction.vue
@@ -13,17 +13,19 @@ defineProps({
 })
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-send-check" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>发送事件</VCardTitle>
-      <VCardSubtitle>发送队列中的所有事件</VCardSubtitle>
-    </VCardItem>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-send-check" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>发送事件</VCardTitle>
+        <VCardSubtitle>发送队列中的所有事件</VCardSubtitle>
+      </VCardItem>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/SendMessageAction.vue b/src/components/workflow/SendMessageAction.vue
index fbae4805..b5df2d22 100644
--- a/src/components/workflow/SendMessageAction.vue
+++ b/src/components/workflow/SendMessageAction.vue
@@ -42,37 +42,39 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-message-arrow-right" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>发送消息</VCardTitle>
-      <VCardSubtitle>发送队列中的所有消息</VCardSubtitle>
-    </VCardItem>
-    <VDivider />
-    <VCardText>
-      <VRow>
-        <VCol cols="12">
-          <VSelect
-            v-model="data.client"
-            :items="sourceOptions"
-            label="消息渠道"
-            chips
-            multiple
-            outlined
-            dense
-            clearable
-          />
-        </VCol>
-        <VCol cols="12">
-          <VTextField v-model="data.userid" label="用户ID" chips multiple outlined dense clearable />
-        </VCol>
-      </VRow>
-    </VCardText>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-message-arrow-right" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>发送消息</VCardTitle>
+        <VCardSubtitle>发送队列中的所有消息</VCardSubtitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VSelect
+              v-model="data.client"
+              :items="sourceOptions"
+              label="消息渠道"
+              chips
+              multiple
+              outlined
+              dense
+              clearable
+            />
+          </VCol>
+          <VCol cols="12">
+            <VTextField v-model="data.userid" label="用户ID" chips multiple outlined dense clearable />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>
diff --git a/src/components/workflow/TransferFileAction.vue b/src/components/workflow/TransferFileAction.vue
index 7141f4b7..f5b1cc6c 100644
--- a/src/components/workflow/TransferFileAction.vue
+++ b/src/components/workflow/TransferFileAction.vue
@@ -25,25 +25,27 @@ const sourceOptions = ref([
 ])
 </script>
 <template>
-  <VCard max-width="20rem">
-    <Handle id="edge_in" type="target" :position="Position.Left" />
-    <VCardItem>
-      <template v-slot:prepend>
-        <VAvatar>
-          <VIcon icon="mdi-file-move" size="x-large"></VIcon>
-        </VAvatar>
-      </template>
-      <VCardTitle>整理文件</VCardTitle>
-      <VCardSubtitle>整理重命名队列中的文件</VCardSubtitle>
-    </VCardItem>
-    <VDivider />
-    <VCardText>
-      <VRow>
-        <VCol cols="12">
-          <VSelect v-model="data.source" label="来源" :items="sourceOptions" outlined dense />
-        </VCol>
-      </VRow>
-    </VCardText>
-    <Handle id="edge_out" type="source" :position="Position.Right" />
-  </VCard>
+  <div>
+    <VCard max-width="20rem">
+      <Handle id="edge_in" type="target" :position="Position.Left" />
+      <VCardItem>
+        <template v-slot:prepend>
+          <VAvatar>
+            <VIcon icon="mdi-file-move" size="x-large"></VIcon>
+          </VAvatar>
+        </template>
+        <VCardTitle>整理文件</VCardTitle>
+        <VCardSubtitle>整理重命名队列中的文件</VCardSubtitle>
+      </VCardItem>
+      <VDivider />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VSelect v-model="data.source" label="来源" :items="sourceOptions" outlined dense />
+          </VCol>
+        </VRow>
+      </VCardText>
+      <Handle id="edge_out" type="source" :position="Position.Right" />
+    </VCard>
+  </div>
 </template>