vue实现支持文本声音视频图片文档等多节点拖拽新增ai智能画布笔记代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vue实现支持文本声音视频图片文档等多节点拖拽新增ai智能画布笔记代码，支持多节点，支持缩放，支持画布拖拽、支持节点的多选ai处理生成新的结果节点，支持节点上下文参考，支持文生图、文生视频、视频编辑、图片编辑、文本总结、文本润色、声音转文字、文字转声音等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 智能画布 - v8 (企业级 UI & 交互增强)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leader-line-new@1.1.9/leader-line.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #0d6efd; --primary-color-light: #e7f1ff; --background-color: #f8f9fa;
            --node-background-color: #FFFFFF; --text-color: #212529; --text-color-light: #6c757d;
            --border-color: #dee2e6; --border-color-soft: #e9ecef; --shadow-color: rgba(0, 0, 0, 0.05);
            --shadow-color-strong: rgba(0, 0, 0, 0.1); --connector-color: #adb5bd;
        }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

        body, html { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); overflow: hidden; height: 100vh; width: 100vw; }
        #app { display: flex; flex-direction: column; height: 100%; animation: fadeIn 0.5s ease-in-out; }
        .header { display: flex; align-items: center; padding: 10px 20px; background-color: var(--node-background-color); border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 4px var(--shadow-color); z-index: 100; flex-shrink: 0; }
        .header h1 { font-size: 1.4em; margin: 0; color: var(--text-color); font-weight: 600; }
        .header h1 .fa-brain { margin-right: 12px; color: var(--primary-color); }
        .canvas-tabs { margin-left: 30px; display: flex; align-items: center; }
        .canvas-tabs button { padding: 8px 16px; margin-right: 5px; border-radius: 6px; border: 1px solid transparent; background-color: transparent; cursor: pointer; transition: all 0.2s ease-in-out; color: var(--text-color-light); font-weight: 500; }
        .canvas-tabs button.active { color: var(--primary-color); background-color: var(--primary-color-light); }
        .canvas-tabs button:hover:not(.active) { color: var(--text-color); background-color: var(--background-color); }
        .toolbar { position: absolute; top: 75px; left: 15px; display: flex; flex-direction: column; background-color: var(--node-background-color); padding: 8px; border-radius: 8px; box-shadow: 0 4px 12px var(--shadow-color-strong); z-index: 50; border: 1px solid var(--border-color-soft); }
        .toolbar button { background: none; border: none; font-size: 1.4em; padding: 10px; width: 44px; height: 44px; margin: 4px 0; cursor: pointer; border-radius: 6px; color: var(--text-color-light); transition: all 0.2s ease-in-out; }
        .toolbar button:hover { background-color: var(--primary-color-light); color: var(--primary-color); }
        .canvas-container { flex-grow: 1; position: relative; overflow: hidden; background-image: radial-gradient(var(--border-color) 1px, transparent 1px); background-size: 20px 20px; cursor: default; transition: box-shadow 0.3s; }
        .canvas-container.is-pannable { box-shadow: 0 0 0 3px var(--primary-color) inset; cursor: grab; }
        .canvas-container.panning { cursor: grabbing; }
        #canvas { position: absolute; width: 1px; height: 1px; transform-origin: 0 0; }
        .node { position: absolute; background-color: var(--node-background-color); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 2px 5px var(--shadow-color), 0 5px 15px var(--shadow-color); min-width: 230px; display: flex; flex-direction: column; z-index: 10; transition: all 0.2s ease-out; }
        .node:hover { box-shadow: 0 4px 8px var(--shadow-color-strong), 0 10px 25px var(--shadow-color); transform: translateY(-2px); }
        .node.selected { border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-color), 0 10px 25px var(--shadow-color-strong); }
        .node-header { padding: 8px 12px; font-weight: 600; border-bottom: 1px solid var(--border-color-soft); cursor: move; display: flex; justify-content: space-between; align-items: center; background-color: #fafbfd; border-top-left-radius: 10px; border-top-right-radius: 10px; color: var(--text-color); font-size: 0.9em; }
        .node-header .fa { margin-right: 8px; color: var(--text-color-light); }
        .node-header .delete-btn { cursor: pointer; color: #aaa; transition: color 0.2s; }
        .node-header .delete-btn:hover { color: #d9534f; }
        .node-content { padding: 15px; flex-grow: 1; transition: border 0.2s ease; }
        .node.drag-over .node-content { border: 2px dashed var(--primary-color); }
        .node-content textarea { width: 100%; border: none; outline: none; resize: vertical; min-height: 60px; background: transparent; font-size: 1em; }
        .node-content img, .node-content video, .node-content audio { max-width: 100%; border-radius: 6px; }
        .node-content audio { width: 100%; }
        .node-content a { color: var(--primary-color); text-decoration: none; word-break: break-all; font-weight: 500; }
        .node-content a:hover { text-decoration: underline; }
        .empty-placeholder { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 10px; cursor: pointer; border-radius: 6px; transition: background-color 0.2s; }
        .empty-placeholder:hover { background-color: var(--primary-color-light); }
        .empty-placeholder .placeholder-icon { font-size: 2.5em; color: var(--text-color-light); margin-bottom: 15px; }
        .empty-placeholder span { font-weight: 500; color: var(--text-color-light); }
        .ai-handle { width: 22px; height: 22px; background-color: var(--node-background-color); border: 1px solid #ccc; color: #888; border-radius: 50%; position: absolute; cursor: pointer; z-index: 15; transition: all 0.2s ease-out; display: flex; justify-content: center; align-items: center; font-size: 12px; opacity: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .node:hover .ai-handle, .node.selected .ai-handle { opacity: 1; }
        .ai-handle:hover { transform: scale(1.2) !important; background-colo.........完整代码请登录后点击上方下载按钮下载查看