vue实现支持文本视频声音图片链接等节点拖拽连线生成修改的ai智能画布代码-html代码-BFW代码库

代码语言：html

代码描述：vue实现支持文本视频声音图片链接等节点拖拽连线生成修改的ai智能画布代码，可配置多个节点下一步操作的按钮列表及apiurl，形成一个强大的多节点ai生成与编辑智能智慧画布代码，支持拖拽选择文件，支持缩放，非常强大。

代码标签： vue 支持文本视频声音图片链接节点拖拽连线生成修改 ai 智能画布代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 工作流画布 - WorkFlow Studio Pro</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.5.18.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #6366f1;
            --primary-hover: #4f46e5;
            --secondary: #8b5cf6;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --dark: #1e1e2e;
            --darker: #181825;
            --card: #2a2a3e;
            --border: #3a3a4e;
            --text: #e4e4e7;
            --text-muted: #a1a1aa;
            --radius: 12px;
            --shadow: 0 4px 20px rgba(0,0,0,0.3);
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Inter', -apple-system, sans-serif;
            background: var(--darker);
            color: var(--text);
            overflow: hidden;
            height: 100vh;
        }

        .navbar {
            height: 56px;
            background: var(--dark);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 18px;
        }

        .logo-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-center {
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
        }

        .project-selector {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--card);
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            border: 1px solid var(--border);
            transition: all 0.2s;
        }

        .project-selector:hover { border-color: var(--primary); }

        .project-name {
            font-weight: 500;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .nav-actions { display: flex; gap: 8px; }

        .btn {
            padding: 8px 16px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
            font-family: inherit;
        }

        .btn-primary { background: var(--primary); color: white; }
        .btn-primary:hover { background: var(--primary-hover); }
        .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
        .btn-ghost:hover { background: var(--card); border-color: var(--text-muted); }
        .btn-sm { padding: 6px 12px; font-size: 12px; }
        .btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }

        .sidebar {
            position: fixed;
            left: 0;
            top: 56px;
            bottom: 0;
            width: 260px;
            background: var(--dark);
            border-right: 1px solid var(--border);
            padding: 16px;
            z-index: 100;
            overflow-y: auto;
        }

        .sidebar-section { margin-bottom: 24px; }

        .sidebar-title {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        .file-drop-zone {
            border: 2px dashed var(--border);
            border-radius: var(--radius);
            padding: 24px 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .file-drop-zone:hover,
        .file-drop-zone.dragover {
            border-color: var(--primary);
            background: rgba(99, 102, 241, 0.1);
        }

        .file-drop-zone .icon { font-size: 32px; margin-bottom: 8px; }
        .file-drop-zone p { font-size: 13px; color: var(--text-muted); }
        .file-drop-zone .hint { font-size: 11px; margin-top: 4px; }

        .node-templates {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .node-template {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px;
            cursor: grab;
            transition: all 0.2s;
            text-align: center;
        }

        .node-template:hover {
            border-color: var(--primary);
            transform: translateY(-2px);
        }

        .node-template .icon { font-size: 24px; margin-bottom: 4px; }
        .node-template .label { font-size: 12px; color: var(--text-muted); }

        .canvas-container {
            position: fixed;
            left: 260px;
            top: 56px;
            right: 0;
            bottom: 0;
            overflow: hidden;
            background: 
                radial-gradient(circle at center, rgba(99, 102, 241, 0.03) 0%, transparent 70%),
                linear-gradient(var(--darker) 1px, transparent 1px),
                linear-gradient(90deg, var(--darker) 1px, transparent 1px),
                linear-gradient(rgba(58, 58, 78, 0.3) 1px, transparent 1px),
                linear-gradient(90deg, rgba(58, 58, 78, 0.3) 1px, transparent 1px);
            background-size: 100% 100%, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
            background-position: center, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
            background-color: #12121a;
        }

        .canvas {
            position: absolute;
            transform-origin: 0 0;
        }

        .connections-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: visible;
        }

        .connection-path {
            fill: none;
            stroke: var(--primary);
            stroke-width: 2;
            stroke-linecap: round;
        }

        .connection-path.processing {
            stroke: var(--warning);
            stroke-dasharray: 8, 4;
            animation: flowDash 1s linear infinite;
        }

        @keyframes flowDash { to { stroke-dashoffset: -12; } }

        .node {
            position: absolute;
            min-width: 240px;
            max-width: 280px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            cursor: move;
            user-select: none;
        }

        .node.selected {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3), var(--shadow);
        }

        .node.processing { border-color: var(--warning); }

        .node.processing::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: var(--radius);
            border: 2px solid var(--warning);
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        .node-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            border-bottom: 1px solid var(--border);
            background: rgba(0,0,0,0.2);
            border-radius: var(--radius) var(--radius) 0 0;
        }

        .node-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }

        .node-icon.text { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
        .node-icon.image { background: linear-gradient(135deg, #ec4899, #be185d); }
        .node-icon.audio { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
        .node-icon.video { background: linear-gradient(135deg, #ef4444, #b91c1c); }
        .node-icon.link { background: linear-gradient(135deg, #06b6d4, #0891b2); }
        .node-icon.webpage { background: linear-gradient(135deg, #10b981, #047857); }

        .node-info { flex: 1; min-width: 0; }

        .node-title {
            font-weight: 500;
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .node-type {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .node-delete {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .node:hover .node-delete { opacity: 1; }
        .node-delete:hover { background: var(--danger); color: white; }

        .node-content {
            padding: 12px;
            max-height: 180px;
            overflow: hidden;
        }

        .node-text {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all;
        }

        .node-preview {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            background: var(--darker);
        }

        .node-preview img,
        .node-preview video {
            width: 100%;
            max-height: 120px;
            object-fit: cover;
            display: block;
        }

        .node-preview audio {
            width: 100%;
            height: 40px;
        }

        .node-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px;
            background: var(--darker);
            border-radius: 8px;
            font-size: 12px;
            color: var(--primary);
            word-break: break-all;
        }

        .node-webpage {
            padding: 12px;
        .........完整代码请登录后点击上方下载按钮下载查看