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

代码语言：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>短剧工坊 - AI短剧制作无限画布</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<style>
:root{--bg:#0d0d1a;--bg2:#151528;--bg3:#1c1c35;--border:rgba(255,255,255,.08);--t1:#e8e8e8;--t2:#999;--accent:#4f8cff;--accent2:#7c5cfc;--pink:#e91e8b;--green:#4caf50;--orange:#ff9800;--red:#f44336;--cyan:#00bcd4;--gold:#ffd700}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--t1);overflow:hidden;user-select:none}

.toolbar{position:fixed;top:0;left:0;right:0;height:50px;z-index:1000;background:rgba(13,13,26,.96);backdrop-filter:blur(16px);display:flex;align-items:center;padding:0 14px;gap:6px;border-bottom:1px solid var(--border)}
.brand{font-size:17px;font-weight:700;margin-right:12px;background:linear-gradient(135deg,var(--accent),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tbtn{padding:6px 13px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.04);color:#bbb;cursor:pointer;font-size:12px;transition:all .2s;display:flex;align-items:center;gap:5px;white-space:nowrap}
.tbtn:hover{background:rgba(255,255,255,.1);color:#fff}
.tbtn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none}
.tbtn.danger{border-color:rgba(244,67,54,.3);color:#f66}
.tsep{width:1px;height:22px;background:var(--border);margin:0 4px}
.tinfo{color:var(--t2);font-size:11px;margin-left:auto}

.canvas-wrap{position:fixed;top:50px;left:0;right:0;bottom:0;overflow:hidden;cursor:grab;background:var(--bg);background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:24px 24px}
.canvas-wrap.grabbing{cursor:grabbing}
.world{position:absolute;transform-origin:0 0}

.conns{position:absolute;top:0;left:0;width:1px;height:1px;overflow:visible;pointer-events:none}

/* 节点 */
.nd{position:absolute;border-radius:12px;min-width:200px;max-width:320px;border:2px solid var(--border);transition:box-shadow .2s,border-color .2s;backdrop-filter:blur(6px)}
.nd:hover{border-color:rgba(79,140,255,.25)}
.nd.sel{border-color:var(--accent);box-shadow:0 0 24px rgba(79,140,255,.2)}
.nd.msel{border-color:var(--accent2);box-shadow:0 0 24px rgba(124,92,252,.25)}

.nd-theme{background:linear-gradient(135deg,rgba(79,140,255,.12),var(--bg3))}
.nd-script{background:linear-gradient(135deg,rgba(124,92,252,.12),var(--bg3));min-width:260px}
.nd-storyboard{background:linear-gradient(135deg,rgba(233,30,139,.1),var(--bg3));min-width:230px}
.nd-grid{background:linear-gradient(135deg,rgba(255,152,0,.1),var(--bg3));min-width:250px}
.nd-cropped{background:linear-gradient(135deg,rgba(76,175,80,.1),var(--bg3));min-width:180px}
.nd-hd{background:linear-gradient(135deg,rgba(0,188,212,.1),var(--bg3));min-width:220px}
.nd-video{background:linear-gradient(135deg,rgba(244,67,54,.1),var(--bg3));min-width:220px}
.nd-final{background:linear-gradient(135deg,rgba(255,215,0,.12),var(--bg3));min-width:250px}

.nd-hdr{padding:9px 12px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--border);cursor:move}
.badge{padding:2px 7px;border-radius:8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.b-theme{background:rgba(79,140,255,.18);color:var(--accent)}
.b-script{background:rgba(124,92,252,.18);color:var(--accent2)}
.b-storyboard{background:rgba(233,30,139,.18);color:var(--pink)}
.b-grid{background:rgba(255,152,0,.18);color:var(--orange)}
.b-cropped{background:rgba(76,175,80,.18);color:var(--green)}
.b-hd{background:rgba(0,188,212,.18);color:var(--cyan)}
.b-video{background:rgba(244,67,54,.18);color:var(--red)}
.b-final{background:rgba(255,215,0,.18);color:var(--gold)}

.nd-title{font-size:12px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nd-close{cursor:pointer;font-size:15px;color:#555;transition:color .2s;width:20px;text-align:center}
.nd-close:hover{color:#f66}
.nd-body{padding:10px 12px}

.nd-ta{width:100%;min-height:55px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:7px;color:var(--t1);padding:7px 9px;font-size:12px;resize:vertical;outline:none;font-family:inherit;line-height:1.5}
.nd-ta:focus{border-color:var(--accent)}

.nd-content{font-size:11px;color:var(--t2);line-height:1.6;max-height:180px;overflow-y:auto}
.nd-content::-webkit-scrollbar{width:3px}
.nd-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

.nd-acts{padding:7px 12px;border-top:1px solid var(--border);display:flex;gap:5px;flex-wrap:wrap}
.nbtn{padding:5px 10px;border:1px solid var(--border);border-radius:6px;backgro.........完整代码请登录后点击上方下载按钮下载查看