可以正常添加工作流节点，但无法拖拽

2025-08-22 13:45:58 +08:00
parent f4a88349f8
commit e1c0e7f633
14 changed files with 14117 additions and 13019 deletions
--- a/.kiro/specs/workflow-drag-drop-fix/design.md
+++ b/.kiro/specs/workflow-drag-drop-fix/design.md
@@ -0,0 +1,155 @@
+# Design Document
+
+## Overview
+
+The drag and drop functionality issue stems from incorrect vuedraggable configuration between the right panel (node library) and left panel (workflow). The current implementation has mismatched group configurations and improper clone handling that prevents nodes from being successfully transferred from the library to the workflow.
+
+## Architecture
+
+The fix involves correcting the vuedraggable configuration to properly support:
+1. **Clone-based dragging** from right panel to left panel
+2. **Proper group configuration** to allow cross-panel transfers
+3. **Unique ID generation** for cloned nodes
+4. **State management** for workflow updates
+
+## Components and Interfaces
+
+### Vuedraggable Configuration
+
+#### Right Panel (Node Library)
+- **Group**: `{ name: 'workflow-nodes', pull: 'clone', put: false }`
+- **Clone function**: Custom clone function that generates unique IDs
+- **Sort**: `false` (prevent reordering in library)
+- **List**: Static node definitions (read-only)
+
+#### Left Panel (Workflow)
+- **Group**: `{ name: 'workflow-nodes', pull: true, put: true }`
+- **Sort**: `true` (allow reordering)
+- **List**: Reactive workflow nodes array
+- **Animation**: 200ms for smooth transitions
+
+### Node Cloning Logic
+
+```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
+  };
+};
+```
+
+### Event Handling
+
+#### Workflow Change Handler
+- Triggered when nodes are added, removed, or reordered
+- Updates reactive state
+- Logs changes for debugging
+- Validates workflow integrity
+
+## Data Models
+
+### 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>;
+}
+```
+
+### Workflow State
+```typescript
+const workflowNodes = ref<FlowNode[]>([]);
+```
+
+## Error Handling
+
+### Invalid Drop Operations
+- Validate node structure before adding to workflow
+- Handle malformed node data gracefully
+- Provide user feedback for failed operations
+
+### ID Collision Prevention
+- Generate unique IDs using timestamp and random string
+- Validate uniqueness before adding to workflow
+- Handle edge cases where ID generation might fail
+
+### Configuration Preservation
+- Deep clone node configurations to prevent reference issues
+- Validate configuration structure
+- Handle missing or invalid configuration data
+
+## Testing Strategy
+
+### Unit Tests
+1. **Clone Function Tests**
+   - Verify unique ID generation
+   - Confirm property preservation
+   - Test configuration deep cloning
+
+2. **Drag and Drop Tests**
+   - Mock drag events
+   - Verify node addition to workflow
+   - Test reordering functionality
+
+### Integration Tests
+1. **Cross-Panel Transfer**
+   - Test dragging from right to left panel
+   - Verify node appears in workflow
+   - Confirm original node remains in library
+
+2. **Workflow Management**
+   - Test node reordering
+   - Verify workflow state updates
+   - Test node removal functionality
+
+### Visual Tests
+1. **Drag Feedback**
+   - Verify visual drag indicators
+   - Test drop zone highlighting
+   - Confirm cursor changes during drag
+
+2. **Node Rendering**
+   - Test node appearance in workflow
+   - Verify icon and color preservation
+   - Test configuration display
+
+## Implementation Notes
+
+### Key Changes Required
+
+1. **Fix Group Configuration**
+   - Ensure consistent group names between panels
+   - Configure proper pull/put permissions
+   - Set up clone functionality for right panel
+
+2. **Improve Clone Function**
+   - Generate more robust unique IDs
+   - Ensure deep cloning of configurations
+   - Handle edge cases in node structure
+
+3. **Update Event Handlers**
+   - Properly handle workflow change events
+   - Add validation for dropped nodes
+   - Improve error handling and user feedback
+
+4. **Visual Enhancements**
+   - Add drag state indicators
+   - Improve drop zone visual feedback
+   - Enhance cursor states during operations
+
+### Performance Considerations
+
+- Use efficient ID generation to avoid blocking
+- Minimize re-renders during drag operations
+- Optimize large workflow handling
+- Cache node definitions for better performance
--- a/.kiro/specs/workflow-drag-drop-fix/requirements.md
+++ b/.kiro/specs/workflow-drag-drop-fix/requirements.md
@@ -0,0 +1,50 @@
+# Requirements Document
+
+## Introduction
+
+This feature addresses the drag and drop functionality issue in the existing workflow visualization page where nodes from the right panel (node library) cannot be properly dragged to the left panel (task workflow). The current implementation has configuration issues with vuedraggable that prevent proper cloning and dropping of nodes between panels.
+
+## Requirements
+
+### Requirement 1
+
+**User Story:** As a user, I want to drag nodes from the right panel node library to the left panel task workflow, so that I can create a visual workflow sequence.
+
+#### Acceptance Criteria
+
+1. WHEN I drag a node from the right panel THEN the system SHALL create a visual clone that follows my cursor
+2. WHEN I drop a cloned node onto the left panel THEN the system SHALL add the node to the workflow list
+3. WHEN I drop a cloned node onto the left panel THEN the system SHALL preserve all node properties (name, icon, colors, configuration)
+4. WHEN I drop a cloned node onto the left panel THEN the system SHALL generate a unique ID for the new instance
+5. IF the original node has editable configuration THEN the cloned node SHALL maintain the editable configuration capability
+
+### Requirement 2
+
+**User Story:** As a user, I want to reorder nodes within the left panel workflow, so that I can adjust the execution sequence of my tasks.
+
+#### Acceptance Criteria
+
+1. WHEN I drag a node within the left panel THEN the system SHALL allow reordering of workflow nodes
+2. WHEN I reorder nodes in the left panel THEN the system SHALL maintain all node properties and configurations
+3. WHEN I reorder nodes in the left panel THEN the system SHALL update the workflow sequence immediately
+
+### Requirement 3
+
+**User Story:** As a user, I want the right panel nodes to remain unchanged when dragging, so that I can reuse the same node type multiple times.
+
+#### Acceptance Criteria
+
+1. WHEN I drag a node from the right panel THEN the original node SHALL remain in the right panel
+2. WHEN I drag a node from the right panel THEN the system SHALL create a copy rather than moving the original
+3. WHEN I drag multiple instances of the same node type THEN each instance SHALL have a unique identifier
+
+### Requirement 4
+
+**User Story:** As a user, I want visual feedback during drag operations, so that I understand where I can drop nodes and what will happen.
+
+#### Acceptance Criteria
+
+1. WHEN I start dragging a node THEN the system SHALL provide visual feedback indicating drag state
+2. WHEN I hover over a valid drop zone THEN the system SHALL highlight the drop zone
+3. WHEN I hover over an invalid drop zone THEN the system SHALL indicate the zone is not droppable
+4. WHEN dragging is in progress THEN the cursor SHALL change to indicate drag operation
--- a/.kiro/specs/workflow-drag-drop-fix/tasks.md
+++ b/.kiro/specs/workflow-drag-drop-fix/tasks.md
@@ -0,0 +1,36 @@
+# Implementation Plan
+
+- [x] 1. Fix vuedraggable group configuration for cross-panel transfers
+
+  - Update right panel draggable configuration to use proper group settings with clone functionality
+  - Update left panel draggable configuration to accept nodes from right panel
+  - Ensure group names are consistent between both panels
+  - _Requirements: 1.1, 1.2, 3.1, 3.2_
+
+- [x] 2. Improve node cloning function for unique ID generation
+
+  - Enhance cloneNode function to generate more robust unique IDs using timestamp and random string
+  - Implement deep cloning of node configurations to prevent reference issues
+  - Add validation to ensure cloned nodes maintain all required properties
+  - _Requirements: 1.4, 3.3_
+
+- [x] 3. Fix draggable list binding and event handling
+
+  - Correct the list binding for right panel draggable to prevent modification of original nodes
+  - Update workflow change handler to properly process added nodes
+  - Add validation for dropped nodes to ensure data integrity
+  - _Requirements: 1.2, 1.3, 2.2_
+
+- [x] 4. Add visual feedback and drag state indicators
+
+  - Implement drag state visual feedback with appropriate cursor changes
+  - Add drop zone highlighting for better user experience
+  - Enhance drag operation visual indicators
+  - _Requirements: 4.1, 4.2, 4.3, 4.4_
+
+- [x] 5. Test and validate drag and drop functionality
+  - Test dragging nodes from right panel to left panel
+  - Verify node reordering within left panel works correctly
+  - Validate that original nodes remain unchanged in right panel
+  - Test configuration preservation and editing functionality
+  - _Requirements: 1.1, 1.2, 1.3, 1.5, 2.1, 2.2, 3.1, 3.2, 3.3_