feat: 为工作流组件添加外层 div 包裹,优化布局结构

This commit is contained in:
jxxghp
2025-02-28 22:05:48 +08:00
parent cb6be91538
commit 6333103050
14 changed files with 449 additions and 344 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>