可以正常添加工作流节点，但无法拖拽
This commit is contained in:
466
app/components/flow-nodes/WorkflowEditor.vue
Normal file
466
app/components/flow-nodes/WorkflowEditor.vue
Normal file
@@ -0,0 +1,466 @@
|
||||
<template>
|
||||
<div class="h-screen flex flex-col bg-gray-50">
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="bg-white border-b border-gray-200 px-4 py-3">
|
||||
<div class="flex items-center space-x-4">
|
||||
<button
|
||||
class="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
|
||||
@click="goBack"
|
||||
>
|
||||
<ArrowLeft class="w-4 h-4" />
|
||||
<span>返回</span>
|
||||
</button>
|
||||
|
||||
<div class="flex-1" />
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<button
|
||||
class="flex items-center space-x-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700"
|
||||
@click="startTask"
|
||||
>
|
||||
<Play class="w-4 h-4" />
|
||||
<span>开始任务</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex items-center space-x-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700"
|
||||
@click="saveTask"
|
||||
>
|
||||
<Save class="w-4 h-4" />
|
||||
<span>保存任务</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex items-center space-x-2 px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700"
|
||||
@click="exportTask"
|
||||
>
|
||||
<Download class="w-4 h-4" />
|
||||
<span>导出任务</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex items-center space-x-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700"
|
||||
@click="importTask"
|
||||
>
|
||||
<Upload class="w-4 h-4" />
|
||||
<span>导入任务</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<div class="flex-1 flex">
|
||||
<!-- 左侧工作流面板 -->
|
||||
<div
|
||||
class="bg-white shadow-lg transition-all duration-300 overflow-hidden"
|
||||
:class="{ 'w-0': !showLeftPanel, 'w-280px': showLeftPanel }"
|
||||
>
|
||||
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
|
||||
<h2 class="text-lg font-semibold text-gray-800">
|
||||
任务流
|
||||
</h2>
|
||||
<button
|
||||
v-if="workflowNodes.length > 0"
|
||||
class="text-xs text-red-600 hover:text-red-800"
|
||||
@click="clearWorkflow"
|
||||
>
|
||||
清空
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-4 h-[calc(100vh-120px)] overflow-y-auto">
|
||||
<draggable
|
||||
v-model="workflowNodes"
|
||||
:animation="200"
|
||||
class="space-y-2 min-h-full"
|
||||
@change="onWorkflowChange"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<div
|
||||
class="p-3 border rounded-lg cursor-move hover:shadow-md transition-shadow"
|
||||
:style="{ backgroundColor: element.backgroundColor, color: element.textColor }"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<component
|
||||
:is="getIconComponent(element.icon)"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
<span class="text-sm font-medium">{{ element.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-1">
|
||||
<button
|
||||
v-if="element.config?.editable"
|
||||
class="p-1 rounded hover:bg-white/20"
|
||||
@click.stop="editNodeConfig(element)"
|
||||
>
|
||||
<Settings class="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
class="p-1 rounded hover:bg-white/20"
|
||||
@click.stop="removeNode(index)"
|
||||
>
|
||||
<X class="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="element.config?.duration" class="mt-2 text-xs opacity-80">
|
||||
延时: {{ element.config.duration }}ms
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<div
|
||||
v-if="workflowNodes.length === 0" class="text-center py-8 transition-colors"
|
||||
:class="dragOverWorkflow ? 'text-blue-600' : 'text-gray-400'"
|
||||
>
|
||||
<Move class="w-8 h-8 mx-auto mb-2" />
|
||||
<p class="text-sm">
|
||||
{{ dragOverWorkflow ? '松开鼠标添加节点' : '从右侧拖拽节点到此处' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 左侧面板折叠按钮 -->
|
||||
<button
|
||||
class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-white border border-gray-200 rounded-r-md px-1 py-4 shadow-lg hover:bg-gray-50"
|
||||
@click="showLeftPanel = !showLeftPanel"
|
||||
>
|
||||
<ChevronLeft v-if="showLeftPanel" class="w-4 h-4" />
|
||||
<ChevronRight v-else class="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<!-- 右侧节点库 -->
|
||||
<div class="flex-1 p-6 bg-gray-50">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">
|
||||
节点库
|
||||
</h1>
|
||||
<p class="text-gray-600 mt-1">
|
||||
拖拽节点到左侧创建任务流
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 节点库 - 改为点击按钮 -->
|
||||
<div class="space-y-6">
|
||||
<div v-for="(nodes, category) in categorizedNodes" :key="category">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-3">
|
||||
{{ category }}
|
||||
</h3>
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<button
|
||||
v-for="element in nodes"
|
||||
:key="element.id"
|
||||
class="p-4 border rounded-lg cursor-pointer hover:shadow-lg transition-all hover:scale-105 text-center"
|
||||
:style="{ backgroundColor: element.backgroundColor, color: element.textColor }"
|
||||
@click="addNodeToWorkflow(element)"
|
||||
>
|
||||
<component
|
||||
:is="getIconComponent(element.icon)"
|
||||
class="w-8 h-8 mx-auto mb-2"
|
||||
/>
|
||||
<p class="text-sm font-medium">
|
||||
{{ element.name }}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配置编辑对话框 -->
|
||||
<div
|
||||
v-if="editingNode"
|
||||
class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
||||
@click="cancelEdit"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-lg p-6 w-80 max-w-sm"
|
||||
@click.stop
|
||||
>
|
||||
<h3 class="text-lg font-semibold mb-4">
|
||||
编辑配置
|
||||
</h3>
|
||||
|
||||
<div v-if="editingNode.config?.editable" class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
延时时间 (毫秒)
|
||||
</label>
|
||||
<input
|
||||
v-model.number="editingNode.config.duration"
|
||||
type="number"
|
||||
min="100"
|
||||
max="60000"
|
||||
step="100"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-2">
|
||||
<button
|
||||
class="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
|
||||
@click="cancelEdit"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700"
|
||||
@click="saveEdit"
|
||||
>
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { FlowNode } from "~/components/flow-nodes";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Clock,
|
||||
Computer,
|
||||
Download,
|
||||
Monitor,
|
||||
Move,
|
||||
Pause,
|
||||
Play,
|
||||
Play as PlayIcon,
|
||||
PlaySquare,
|
||||
Power,
|
||||
Save,
|
||||
Settings,
|
||||
SkipBack,
|
||||
SkipForward,
|
||||
Square,
|
||||
Upload,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
X
|
||||
} from "lucide-vue-next";
|
||||
import { computed, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import draggable from "vuedraggable";
|
||||
import { getNodesByCategory, nodeDefinitions } from "~/components/flow-nodes";
|
||||
|
||||
const router = useRouter();
|
||||
const workflowNodes = ref<FlowNode[]>([]);
|
||||
const showLeftPanel = ref(true);
|
||||
const editingNode = ref<FlowNode | null>(null);
|
||||
const isDragging = ref(false);
|
||||
const dragOverWorkflow = ref(false);
|
||||
|
||||
const categorizedNodes = computed(() => getNodesByCategory());
|
||||
|
||||
const getIconComponent = (iconName: string) => {
|
||||
const iconMap: Record<string, any> = {
|
||||
power: Power,
|
||||
computer: Computer,
|
||||
monitor: Monitor,
|
||||
play: PlayIcon,
|
||||
pause: Pause,
|
||||
square: Square,
|
||||
"skip-back": SkipBack,
|
||||
"skip-forward": SkipForward,
|
||||
"volume-2": Volume2,
|
||||
"volume-x": VolumeX,
|
||||
"play-square": PlaySquare,
|
||||
clock: Clock
|
||||
};
|
||||
return iconMap[iconName] || Square;
|
||||
};
|
||||
|
||||
const cloneNode = (original: FlowNode): FlowNode => {
|
||||
// 生成更健壮的唯一ID
|
||||
const timestamp = Date.now();
|
||||
const randomString = Math.random().toString(36).substr(2, 9);
|
||||
const uniqueId = `${original.id}-${timestamp}-${randomString}`;
|
||||
|
||||
return {
|
||||
...original,
|
||||
id: uniqueId,
|
||||
config: original.config ? { ...original.config } : undefined
|
||||
};
|
||||
};
|
||||
|
||||
// 点击添加节点到工作流
|
||||
const addNodeToWorkflow = (node: FlowNode) => {
|
||||
const clonedNode = cloneNode(node);
|
||||
workflowNodes.value.push(clonedNode);
|
||||
console.log("节点已添加到工作流:", clonedNode.name);
|
||||
};
|
||||
|
||||
const removeNode = (index: number) => {
|
||||
workflowNodes.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const clearWorkflow = () => {
|
||||
workflowNodes.value = [];
|
||||
};
|
||||
|
||||
const onWorkflowChange = (event: any) => {
|
||||
console.log("工作流变化事件:", event);
|
||||
|
||||
// 验证工作流完整性
|
||||
if (event.added) {
|
||||
const addedNode = event.added.element;
|
||||
console.log("添加的节点数据:", addedNode);
|
||||
|
||||
// 验证添加的节点具有所有必需属性
|
||||
if (!addedNode.id || !addedNode.name || !addedNode.type) {
|
||||
console.error("无效节点添加到工作流:", addedNode);
|
||||
return;
|
||||
}
|
||||
console.log("节点已成功添加到工作流:", addedNode.name);
|
||||
}
|
||||
|
||||
if (event.moved) {
|
||||
console.log("工作流节点已重新排序");
|
||||
}
|
||||
|
||||
if (event.removed) {
|
||||
console.log("节点已从工作流中移除");
|
||||
}
|
||||
|
||||
console.log("工作流已更新，当前节点数量:", workflowNodes.value.length);
|
||||
console.log("当前工作流节点:", workflowNodes.value);
|
||||
};
|
||||
|
||||
// 拖拽事件处理器用于视觉反馈
|
||||
const onDragStart = (event: any) => {
|
||||
isDragging.value = true;
|
||||
console.log("开始拖拽", event);
|
||||
};
|
||||
|
||||
const onDragEnd = (event: any) => {
|
||||
isDragging.value = false;
|
||||
dragOverWorkflow.value = false;
|
||||
console.log("拖拽结束", event);
|
||||
};
|
||||
|
||||
const onDragEnter = (event: any) => {
|
||||
if (isDragging.value) {
|
||||
dragOverWorkflow.value = true;
|
||||
console.log("进入工作流区域", event);
|
||||
}
|
||||
};
|
||||
|
||||
const onDragLeave = (event: any) => {
|
||||
dragOverWorkflow.value = false;
|
||||
console.log("离开工作流区域", event);
|
||||
};
|
||||
|
||||
const editNodeConfig = (node: FlowNode) => {
|
||||
editingNode.value = { ...node };
|
||||
};
|
||||
|
||||
const cancelEdit = () => {
|
||||
editingNode.value = null;
|
||||
};
|
||||
|
||||
const saveEdit = () => {
|
||||
if (editingNode.value) {
|
||||
const index = workflowNodes.value.findIndex((n) => n.id === editingNode.value!.id);
|
||||
if (index !== -1) {
|
||||
workflowNodes.value[index] = { ...editingNode.value };
|
||||
}
|
||||
cancelEdit();
|
||||
}
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
const startTask = () => {
|
||||
if (workflowNodes.value.length === 0) {
|
||||
console.log("请先添加任务节点");
|
||||
return;
|
||||
}
|
||||
|
||||
const taskData = {
|
||||
name: `任务_${new Date().toLocaleTimeString()}`,
|
||||
nodes: workflowNodes.value.map((node) => ({
|
||||
id: node.id,
|
||||
name: node.name,
|
||||
type: node.type,
|
||||
taskId: node.taskId,
|
||||
config: node.config || {}
|
||||
}))
|
||||
};
|
||||
|
||||
console.log("执行", taskData);
|
||||
console.log("任务已开始，请查看控制台");
|
||||
};
|
||||
|
||||
const saveTask = () => {
|
||||
const taskData = {
|
||||
name: `任务_${new Date().toLocaleTimeString()}`,
|
||||
nodes: workflowNodes.value.map((node) => ({
|
||||
id: node.id,
|
||||
name: node.name,
|
||||
type: node.type,
|
||||
taskId: node.taskId,
|
||||
config: node.config || {}
|
||||
}))
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(taskData, null, 2)], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `任务_${Date.now()}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const exportTask = () => {
|
||||
saveTask();
|
||||
};
|
||||
|
||||
const importTask = () => {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.accept = "application/json";
|
||||
input.onchange = (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.target?.result as string);
|
||||
if (data.nodes && Array.isArray(data.nodes)) {
|
||||
workflowNodes.value = data.nodes.map((node: any) => {
|
||||
const definition = nodeDefinitions[node.id.replace(/-\d+$/, "")];
|
||||
return {
|
||||
...definition,
|
||||
id: node.id,
|
||||
config: node.config || {}
|
||||
};
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("文件格式错误", error);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.w-280px {
|
||||
width: 280px;
|
||||
}
|
||||
</style>
|
||||
351
app/components/flow-nodes/index.ts
Normal file
351
app/components/flow-nodes/index.ts
Normal file
@@ -0,0 +1,351 @@
|
||||
export interface FlowNode {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
taskId: string
|
||||
icon: string
|
||||
backgroundColor: string
|
||||
shape: "square" | "circle" | "rounded"
|
||||
textColor: string
|
||||
category: "控制类" | "设备类" | "媒体类" | "灯光类" | "延时类"
|
||||
config?: Record<string, any>
|
||||
}
|
||||
|
||||
export const nodeDefinitions: Record<string, FlowNode> = {
|
||||
// 控制类
|
||||
"control-poweroff": {
|
||||
id: "control-poweroff",
|
||||
name: "一键关机",
|
||||
type: "control",
|
||||
taskId: "power_off_all",
|
||||
icon: "power",
|
||||
backgroundColor: "#ef4444",
|
||||
shape: "rounded",
|
||||
textColor: "#ffffff",
|
||||
category: "控制类"
|
||||
},
|
||||
"control-poweron": {
|
||||
id: "control-poweron",
|
||||
name: "一键开机",
|
||||
type: "control",
|
||||
taskId: "power_on_all",
|
||||
icon: "power",
|
||||
backgroundColor: "#22c55e",
|
||||
shape: "rounded",
|
||||
textColor: "#ffffff",
|
||||
category: "控制类"
|
||||
},
|
||||
|
||||
// 设备类
|
||||
"device-poweroff-host1": {
|
||||
id: "device-poweroff-host1",
|
||||
name: "关 [!] 主机1",
|
||||
type: "device",
|
||||
taskId: "power_off_host1",
|
||||
icon: "computer",
|
||||
backgroundColor: "#ef4444",
|
||||
shape: "square",
|
||||
textColor: "#ffffff",
|
||||
category: "设备类"
|
||||
},
|
||||
"device-poweron-host1": {
|
||||
id: "device-poweron-host1",
|
||||
name: "开 [!] 主机1",
|
||||
type: "device",
|
||||
taskId: "power_on_host1",
|
||||
icon: "computer",
|
||||
backgroundColor: "#22c55e",
|
||||
shape: "square",
|
||||
textColor: "#ffffff",
|
||||
category: "设备类"
|
||||
},
|
||||
"device-poweroff-host2": {
|
||||
id: "device-poweroff-host2",
|
||||
name: "关 [!] 主机2",
|
||||
type: "device",
|
||||
taskId: "power_off_host2",
|
||||
icon: "computer",
|
||||
backgroundColor: "#ef4444",
|
||||
shape: "square",
|
||||
textColor: "#ffffff",
|
||||
category: "设备类"
|
||||
},
|
||||
"device-poweron-host2": {
|
||||
id: "device-poweron-host2",
|
||||
name: "开 [!] 主机2",
|
||||
type: "device",
|
||||
taskId: "power_on_host2",
|
||||
icon: "computer",
|
||||
backgroundColor: "#22c55e",
|
||||
shape: "square",
|
||||
textColor: "#ffffff",
|
||||
category: "设备类"
|
||||
},
|
||||
"device-poweron-projector1": {
|
||||
id: "device-poweron-projector1",
|
||||
name: "开 [!] 投影1",
|
||||
type: "device",
|
||||
taskId: "power_on_projector1",
|
||||
icon: "monitor",
|
||||
backgroundColor: "#22c55e",
|
||||
shape: "square",
|
||||
textColor: "#ffffff",
|
||||
category: "设备类"
|
||||
},
|
||||
"device-poweroff-projector1": {
|
||||
id: "device-poweroff-projector1",
|
||||
name: "关 [!] 投影1",
|
||||
type: "device",
|
||||
taskId: "power_off_projector1",
|
||||
icon: "monitor",
|
||||
backgroundColor: "#ef4444",
|
||||
shape: "square",
|
||||
textColor: "#ffffff",
|
||||
category: "设备类"
|
||||
},
|
||||
"device-poweron-projector2": {
|
||||
id: "device-poweron-projector2",
|
||||
name: "开 [!] 投影2",
|
||||
type: "device",
|
||||
taskId: "power_on_projector2",
|
||||
icon: "monitor",
|
||||
backgroundColor: "#22c55e",
|
||||
shape: "square",
|
||||
textColor: "#ffffff",
|
||||
category: "设备类"
|
||||
},
|
||||
"device-poweroff-projector2": {
|
||||
id: "device-poweroff-projector2",
|
||||
name: "关 [!] 投影2",
|
||||
type: "device",
|
||||
taskId: "power_off_projector2",
|
||||
icon: "monitor",
|
||||
backgroundColor: "#ef4444",
|
||||
shape: "square",
|
||||
textColor: "#ffffff",
|
||||
category: "设备类"
|
||||
},
|
||||
"device-poweron-projector3": {
|
||||
id: "device-poweron-projector3",
|
||||
name: "开 [!] 投影3",
|
||||
type: "device",
|
||||
taskId: "power_on_projector3",
|
||||
icon: "monitor",
|
||||
backgroundColor: "#22c55e",
|
||||
shape: "square",
|
||||
textColor: "#ffffff",
|
||||
category: "设备类"
|
||||
},
|
||||
"device-poweroff-projector3": {
|
||||
id: "device-poweroff-projector3",
|
||||
name: "关 [!] 投影3",
|
||||
type: "device",
|
||||
taskId: "power_off_projector3",
|
||||
icon: "monitor",
|
||||
backgroundColor: "#ef4444",
|
||||
shape: "square",
|
||||
textColor: "#ffffff",
|
||||
category: "设备类"
|
||||
},
|
||||
|
||||
// 媒体类
|
||||
"media-button3": {
|
||||
id: "media-button3",
|
||||
name: "BUTTON3",
|
||||
type: "media",
|
||||
taskId: "media_button3",
|
||||
icon: "square",
|
||||
backgroundColor: "#3b82f6",
|
||||
shape: "rounded",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-play": {
|
||||
id: "media-play",
|
||||
name: "播放",
|
||||
type: "media",
|
||||
taskId: "media_play",
|
||||
icon: "play",
|
||||
backgroundColor: "#22c55e",
|
||||
shape: "circle",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-pause": {
|
||||
id: "media-pause",
|
||||
name: "暂停",
|
||||
type: "media",
|
||||
taskId: "media_pause",
|
||||
icon: "pause",
|
||||
backgroundColor: "#f97316",
|
||||
shape: "circle",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-stop": {
|
||||
id: "media-stop",
|
||||
name: "停止",
|
||||
type: "media",
|
||||
taskId: "media_stop",
|
||||
icon: "square",
|
||||
backgroundColor: "#ef4444",
|
||||
shape: "circle",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-prev": {
|
||||
id: "media-prev",
|
||||
name: "上一曲",
|
||||
type: "media",
|
||||
taskId: "media_prev",
|
||||
icon: "skip-back",
|
||||
backgroundColor: "#8b5cf6",
|
||||
shape: "circle",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-next": {
|
||||
id: "media-next",
|
||||
name: "下一曲",
|
||||
type: "media",
|
||||
taskId: "media_next",
|
||||
icon: "skip-forward",
|
||||
backgroundColor: "#8b5cf6",
|
||||
shape: "circle",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-volume-down": {
|
||||
id: "media-volume-down",
|
||||
name: "音量减",
|
||||
type: "media",
|
||||
taskId: "media_volume_down",
|
||||
icon: "volume-2",
|
||||
backgroundColor: "#06b6d4",
|
||||
shape: "circle",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-volume-up": {
|
||||
id: "media-volume-up",
|
||||
name: "音量加",
|
||||
type: "media",
|
||||
taskId: "media_volume_up",
|
||||
icon: "volume-2",
|
||||
backgroundColor: "#06b6d4",
|
||||
shape: "circle",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-mute": {
|
||||
id: "media-mute",
|
||||
name: "静音",
|
||||
type: "media",
|
||||
taskId: "media_mute",
|
||||
icon: "volume-x",
|
||||
backgroundColor: "#f97316",
|
||||
shape: "circle",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-video1": {
|
||||
id: "media-video1",
|
||||
name: "视频一",
|
||||
type: "media",
|
||||
taskId: "media_video1",
|
||||
icon: "play-square",
|
||||
backgroundColor: "#6366f1",
|
||||
shape: "rounded",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-video2": {
|
||||
id: "media-video2",
|
||||
name: "视频二",
|
||||
type: "media",
|
||||
taskId: "media_video2",
|
||||
icon: "play-square",
|
||||
backgroundColor: "#6366f1",
|
||||
shape: "rounded",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-video3": {
|
||||
id: "media-video3",
|
||||
name: "视频三",
|
||||
type: "media",
|
||||
taskId: "media_video3",
|
||||
icon: "play-square",
|
||||
backgroundColor: "#6366f1",
|
||||
shape: "rounded",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
"media-button1": {
|
||||
id: "media-button1",
|
||||
name: "BUTTON1",
|
||||
type: "media",
|
||||
taskId: "media_button1",
|
||||
icon: "square",
|
||||
backgroundColor: "#3b82f6",
|
||||
shape: "rounded",
|
||||
textColor: "#ffffff",
|
||||
category: "媒体类"
|
||||
},
|
||||
|
||||
// 延时类
|
||||
"delay-2s": {
|
||||
id: "delay-2s",
|
||||
name: "延时2秒",
|
||||
type: "delay",
|
||||
taskId: "delay_2s",
|
||||
icon: "clock",
|
||||
backgroundColor: "#f59e0b",
|
||||
shape: "rounded",
|
||||
textColor: "#ffffff",
|
||||
category: "延时类",
|
||||
config: { duration: 2000 }
|
||||
},
|
||||
"delay-5s": {
|
||||
id: "delay-5s",
|
||||
name: "延时5秒",
|
||||
type: "delay",
|
||||
taskId: "delay_5s",
|
||||
icon: "clock",
|
||||
backgroundColor: "#f59e0b",
|
||||
shape: "rounded",
|
||||
textColor: "#ffffff",
|
||||
category: "延时类",
|
||||
config: { duration: 5000 }
|
||||
},
|
||||
"delay-custom": {
|
||||
id: "delay-custom",
|
||||
name: "自定义延时时间",
|
||||
type: "delay",
|
||||
taskId: "delay_custom",
|
||||
icon: "clock",
|
||||
backgroundColor: "#f59e0b",
|
||||
shape: "rounded",
|
||||
textColor: "#ffffff",
|
||||
category: "延时类",
|
||||
config: { duration: 1000, editable: true }
|
||||
}
|
||||
};
|
||||
|
||||
export const getNodesByCategory = () => {
|
||||
const categories = {
|
||||
控制类: [] as FlowNode[],
|
||||
设备类: [] as FlowNode[],
|
||||
媒体类: [] as FlowNode[],
|
||||
灯光类: [] as FlowNode[],
|
||||
延时类: [] as FlowNode[]
|
||||
};
|
||||
|
||||
Object.values(nodeDefinitions).forEach((node) => {
|
||||
if (categories[node.category]) {
|
||||
categories[node.category].push(node);
|
||||
}
|
||||
});
|
||||
|
||||
return categories;
|
||||
};
|
||||
@@ -44,7 +44,7 @@
|
||||
|
||||
<div class="flex justify-center">
|
||||
<UButton
|
||||
:to="app.repo"
|
||||
to="/workflows"
|
||||
>
|
||||
Star on GitHub
|
||||
</UButton>
|
||||
|
||||
7
app/pages/workflows/index.vue
Normal file
7
app/pages/workflows/index.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<WorkflowEditor />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 简单的页面包装器，使用WorkflowEditor组件
|
||||
</script>
|
||||
Reference in New Issue
Block a user