完成演示demo

.kiro/specs/workflow-drag-drop-fix/design.md

@@ -32,11 +32,11 @@ The fix involves correcting the vuedraggable configuration to properly support:
 
 ```typescript
 const cloneNode = (original: FlowNode): FlowNode => {
-  return {
-    ...original,
-    id: `${original.id}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-    config: original.config ? { ...original.config } : undefined
-  };
+	return {
+		...original,
+		id: `${original.id}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+		config: original.config ? { ...original.config } : undefined
+	};
 };
 ```
 
@@ -53,16 +53,16 @@ const cloneNode = (original: FlowNode): FlowNode => {
 ### FlowNode Interface (Existing)
 ```typescript
 interface FlowNode {
-  id: string;           // Unique identifier
-  name: string;         // Display name
-  type: string;         // Node type category
-  taskId: string;       // Task execution identifier
-  icon: string;         // Icon name
-  backgroundColor: string;
-  shape: "square" | "circle" | "rounded";
-  textColor: string;
-  category: "控制类" | "设备类" | "媒体类" | "灯光类" | "延时类";
-  config?: Record<string, any>;
+	id: string // Unique identifier
+	name: string // Display name
+	type: string // Node type category
+	taskId: string // Task execution identifier
+	icon: string // Icon name
+	backgroundColor: string
+	shape: "square" | "circle" | "rounded"
+	textColor: string
+	category: "控制类" | "设备类" | "媒体类" | "灯光类" | "延时类"
+	config?: Record<string, any>
 }
 ```
 
@@ -152,4 +152,4 @@ const workflowNodes = ref<FlowNode[]>([]);
 - Use efficient ID generation to avoid blocking
 - Minimize re-renders during drag operations
 - Optimize large workflow handling
-- Cache node definitions for better performance
+- Cache node definitions for better performance