vue实现短剧剧本分镜头视频生成无限画布前端代码-html代码-BFW代码库

vue实现短剧剧本分镜头视频生成无限画布前端代码

代码语言：html

所属分类：其他

代码描述：vue实现短剧剧本分镜头视频生成无限画布前端代码，通过主题生成剧本分镜头，在生成九宫格图片及每个分镜头的描述及高清图生成，最后生成视频合并成完整视频。

下面为部分代码预览，完整代码请点击下载或在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>短剧无限画布创作系统 - 自由节点版</title>
    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        /* 全局样式设定 */
        body, html { margin: 0; padding: 0; overflow: hidden; width: 100vw; height: 100vh; background-color: #1a1a1a; color: #e0e0e0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; user-select: none; }
        
        #app { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; }
        
        /* 顶部工具栏 */
        .toolbar { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); z-index: 100; background: rgba(30, 30, 30, 0.95); padding: 12px 25px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.6); display: flex; gap: 15px; border: 1px solid #444; backdrop-filter: blur(10px); align-items: center; }
        .toolbar button { background: #3b82f6; color: white; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.2s; display: flex; align-items: center; gap: 8px; font-size: 14px; }
        .toolbar button:hover:not(:disabled) { background: #2563eb; transform: translateY(-1px); }
        .toolbar button:disabled { background: #444; color: #777; cursor: not-allowed; }
        .toolbar button.highlight { background: #f59e0b; color: #fff; }
        .toolbar button.highlight:hover:not(:disabled) { background: #d97706; }
        .toolbar button.success { background: #10b981; }
        .toolbar button.success:hover:not(:disabled) { background: #059669; }

        .toolbar-divider { width: 1px; height: 24px; background: #555; margin: 0 5px; }

        /* 画布容器 */
        .canvas-container { flex: 1; position: relative; overflow: hidden; outline: none; cursor: grab; background-image: radial-gradient(#333 1px, transparent 0); background-size: 25px 25px; }
        .canvas-container:active { cursor: grabbing; }
        
        /* 变换层 */
        .canvas-transform { position: absolute; top: 0; left: 0; transform-origin: 0 0; width: 1px; height: 1px; }

        /* SVG 连线层 */
        .svg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
        .connection-line { fill: none; stroke: #666; stroke-width: 3px; stroke-linecap: round; transition: stroke 0.3s, stroke-width 0.3s; }
        .connection-line:hover { stroke: #3b82f6; stroke-width: 5px; }

        /* 节点通用样式 */
        .node { position: absolute; width: 280px; background: #252526; border: 2px solid #3e3e42; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: flex; flex-direction: column; z-index: 10; transition: box-shadow 0.2s, border-color 0.2s; cursor: default; }
        .node.selected { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.3), 0 8px 24px rgba(0,0,0,0.5); z-index: 11; }
        
        .node-header { padding: 12px 15px; background: #333337; border-top-left-radius: 10px; border-top-right-radius: 10px; font-weight: bold; font-size: 14px; display: flex; justify-content: space-between; align-items: center; cursor: move; border-bottom: 1px solid #1e1e1e; }
        .node-header-title { display: flex; align-items: center; gap: 8px; pointer-events: none; }
        
        .delete-btn { background: none.........完整代码请登录后点击上方下载按钮下载查看