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" />
  <title>Flow Canvas · Vue CDN 节点画布（多类型节点可继续流水线）</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.prod.3.5.21.js"></script>
  <style>
    :root{
      --bg0:#0b1020;
      --panel: rgba(255,255,255,.06);
      --stroke: rgba(255,255,255,.12);
      --stroke2: rgba(255,255,255,.16);
      --text: #eaf0ff;
      --muted: rgba(234,240,255,.72);
      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --shadow2: 0 10px 30px rgba(0,0,0,.35);
      --radius: 14px;

      --blue:#4aa3ff;
      --pink:#ff6fae;
      --purple:#b983ff;
      --green:#58d68d;
      --amber:#f5c542;
      --cyan:#48c9b0;
      --red:#ff5a66;
    }

    *{ box-sizing:border-box; }
    html,body{
      height:100%; margin:0; overflow:hidden;
      background: radial-gradient(1200px 900px at 10% 10%, #17215a 0%, var(--bg0) 55%) fixed;
      color:var(--text);
    }
    body{ font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Microsoft YaHei", Segoe UI, Roboto, Arial; }

    .topbar{
      position:fixed; left:0; top:0; right:0; height:58px; z-index:50;
      display:flex; align-items:center; justify-content:space-between;
      padding: 0 14px;
      background: linear-gradient(180deg, rgba(10,14,30,.78) 0%, rgba(10,14,30,.55) 100%);
      border-bottom: 1px solid var(--stroke);
      backdrop-filter: blur(10px);
    }
    .brand{ display:flex; align-items:center; gap:10px; min-width: 260px; }
    .logo{
      width:34px; height:34px; border-radius: 11px;
      background: linear-gradient(135deg, rgba(74,163,255,.95), rgba(185,131,255,.9));
      box-shadow: 0 10px 30px rgba(74,163,255,.18);
      position:relative;
    }
    .logo:before{
      content:"";
      position:absolute; inset:9px;
      border-radius: 8px;
      border: 2px solid rgba(255,255,255,.75);
      transform: rotate(12deg);
      opacity:.9;
    }
    .brand .title{ font-weight:800; letter-spacing:.2px; font-size:14px; }
    .brand .sub{ font-size:12px; color:var(--muted); margin-top:2px; }

    .bar-group{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
    .pill{
      display:flex; align-items:center; gap:10px;
      padding: 8px 10px;
      border-radius: 999px;
      background: var(--panel);
      border: 1px solid var(--stroke);
      box-shadow: 0 10px 30px rgba(0,0,0,.18);
    }
    select, button, input[type="text"]{
      color: var(--text);
      background: rgba(255,255,255,.06);
      border: 1px solid var(--stroke2);
      border-radius: 10px;
      padding: 8px 10px;
      outline: none;
      font-size: 13px;
    }
    select{ padding-right: 32px; }
    button{
      cursor:pointer;
      font-weight:650;
      transition: transform .06s ease, background .2s ease, border-color .2s ease;
    }
    button:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20); }
    button:active{ transform: translateY(1px); }
    button.primary{
      background: linear-gradient(135deg, rgba(74,163,255,.28), rgba(185,131,255,.22));
      border-color: rgba(74,163,255,.35);
    }
    button.danger{
      background: rgba(255,90,102,.12);
      border-color: rgba(255,90,102,.35);
    }
    button.ghost{
      background: transparent;
      border-color: var(--stroke);
    }

    .layout{
      position:fixed; left:0; top:58px; right:0; bottom:0;
      display:grid;
      grid-template-columns: 1fr 360px;
      gap: 12px;
      padding: 12px;
    }

    .stage{
      position:relative;
      border-radius: var(--radius);
      border: 1px solid var(--stroke);
      background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.02) 100%);
      box-shadow: var(--shadow);
      overflow:hidden;
      user-select:none;
      touch-action:none;
    }
    .stage:after{
      content:"";
      position:absolute; inset:0;
      pointer-events:none;
      background: radial-gradient(900px 700px at 65% 40%, rgba(72,201,176,.10) 0%, transparent 55%),
                  radial-gradient(900px 700px at 25% 70%, rgba(245,197,66,.10) 0%, transparent 55%);
      opacity:.9;
    }

    .edges{ position:absolute; inset:0; z-index: 2; pointer-events:none; }
    .viewport{ position:absolute; left:0; top:0; transform-origin: 0 0; z-index: 3; }

    .drop-hint{
      position:absolute; inset:16px;
      border-radius: 16px;
      border: 1px dashed rgba(255,255,255,.24);
      background: rgba(10,14,30,.35);
      display:flex; align-items:center; justify-content:center;
      color: rgba(234,240,255,.82);
      font-weight:650;
      letter-spacing:.2px;
      z-index: 20;
      pointer-events:none;
      backdrop-filter: blur(6px);
    }

    aside{
      border-radius: var(--radius);
      border: 1px solid var(--stroke);
      background: rgba(10,14,30,.55);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-width: 320px;
    }
    .panel-header{
      padding: 12px 12px 10px 12px;
      border-bottom: 1px solid var(--stroke);
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    }
    .panel-header .h{ font-weight:800; font-size:14px; }
    .panel-header .d{
      margin-top:4px;
      font-size:12px; color:var(--muted);
      line-height:1.35;
    }
    .panel-body{ padding: 12px; overflow:auto; }
    .section{
      background: rgba(255,255,255,.05);
      border: 1px solid var(--stroke);
      border-radius: 14px;
      padding: 12px;
      margin-bottom: 12px;
    }
    .section .stitle{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      font-weight:800; font-size:13px;
      margin-bottom: 10px;
    }
    .meta{
      font-size:12px; color:var(--muted);
      line-height:1.5;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .form-row{ margin: 10px 0; }
    .form-row label{
      display:block; font-size:12px; color: rgba(234,240,255,.78);
      margin-bottom: 6px;
    }
    .form-row input[type="text"], .form-row input[type="number"], .form-row textarea, .form-row select{
      width:100%;
      border-radius: 12px;
      padding: 10px 10px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      color: var(--text);
      font-size: 13px;
    }
    .form-row textarea{ min-height: 88px; resize: vertical; }
    .radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
    .radio{
      display:flex; align-items:center; gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      cursor:pointer;
      font-size: 13px;
    }
    .radio input{ accent-color: #7fb7ff; }
    .divider{ height:1px; background: var(--stroke); margin: 12px 0; }

    .node{
      position:absolute;
      width: 280px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.05) 100%);
      box-shadow: var(--shadow2);
      backdrop-filter: blur(8px);
      overflow:hidden;
      color: var(--text);
    }
    .node.selected{
      border-color: rgba(74,163,255,.55);
      box-shadow: 0 18px 60px rgba(74,163,255,.20);
    }
    .node-header{
      padding: 10px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      cursor: grab;
    }
    .node-header:active{ cursor: grabbing; }
.........完整代码请登录后点击上方下载按钮下载查看