DWARFLAB 涓€閿垚鐗囦氦浜掑師鍨?/title> <style> :root { --surface: #111111; --surface-container: #1b1b1c; --surface-high: #252526; --border: #303031; --text: #efeff4; --muted: #909093; --primary: #05a479; --on-primary: #f4fff7; --warning: #f29d29; --error: #f65d59; --screen-w: 402px; --screen-h: 874px; font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: #f4f4f4; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: #eeeeee; display: grid; place-items: center; } .board { width: var(--screen-w); height: var(--screen-h); position: relative; padding: 0; background: var(--surface); box-shadow: 0 18px 60px rgba(0,0,0,.28), 0 0 0 1px #d8d8d8; } .screen { width: var(--screen-w); height: var(--screen-h); position: absolute; inset: 0; overflow: hidden; background: var(--surface); display: none; opacity: 0; transform: translateX(16px); transition: opacity .18s ease, transform .18s ease; } .screen.active { display: block; opacity: 1; transform: translateX(0); z-index: 2; } .screen.leaving { display: block; opacity: 0; transform: translateX(-10px); z-index: 1; } .status { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 21px 16px 0; font-size: 17px; font-weight: 650; line-height: 22px; } .levels { display: flex; gap: 6px; align-items: center; font-size: 12px; } .nav { height: 52px; display: flex; align-items: center; padding: 0 16px; position: relative; } .nav-title { font-size: 20px; font-weight: 650; line-height: 28px; } .nav.center .nav-title { position: absolute; left: 80px; right: 80px; text-align: center; font-size: 17px; line-height: 24px; } .nav-action { margin-left: auto; border: 0; background: transparent; color: var(--primary); font-size: 14px; font-weight: 510; padding: 10px 0; cursor: pointer; } .back { width: 48px; height: 48px; margin-left: -10px; border: 0; background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; } .body { height: calc(100% - 114px); overflow: auto; padding: 16px; scrollbar-width: none; } .body::-webkit-scrollbar { display: none; } .bottom-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; border-top: 0.5px solid var(--border); background: var(--surface); display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: 30px; } .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; line-height: 20px; color: var(--muted); font-weight: 510; } .tab-item.active { color: var(--primary); } .icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .icon.fill { fill: currentColor; stroke: none; } .task-entry, .function-card, .panel, .template-card, .slot-card, .dialog, .meta-card { background: var(--surface-container); border-radius: 16px; } .task-entry { height: 56px; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--text); border: 0; width: 100%; cursor: pointer; font-size: 12px; font-weight: 650; } .function-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; } .function-card { height: 64px; border: 0; background: var(--primary); color: var(--on-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; line-height: 20px; font-weight: 650; cursor: pointer; position: relative; padding-top: 2px; } .function-card.secondary { background: var(--surface-container); color: var(--text); } .badge { position: absolute; right: 6px; top: 5px; min-width: 28px; height: 16px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 60%, var(--primary)); color: var(--primary); font-size: 9px; line-height: 16px; text-align: center; font-weight: 650; } .filter-row { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 14px; } .pill { height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--surface-high); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; line-height: 20px; font-weight: 510; white-space: nowrap; } .pill.active { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 75%, transparent); } .date-title { font-size: 14px; line-height: 22px; font-weight: 510; margin: 0 0 6px 4px; } .media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 16px; } .media { height: 88.6px; min-width: 80px; background: var(--surface-high); position: relative; overflow: hidden; } .media > img, .media > video, .preview-media > video, .result-player > video { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; } .media.has-asset::before, .preview-media.has-asset::before, .result-player.has-asset::before { display: none; } .media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 46% 44%, #d9e0e4 0 8%, #56606a 18%, #111 58%); } .media.deep::before { background: radial-gradient(circle at 56% 46%, rgba(255,255,255,.7), transparent 5%), radial-gradient(circle at 40% 62%, rgba(135,88,255,.6), transparent 20%), linear-gradient(135deg, #151318, #29144a 52%, #111); } .media.mw::before { background: linear-gradient(100deg, #151318, #5b1234 54%, #161014), radial-gradient(circle at 20% 40%, rgba(255,255,255,.4), transparent 10%); } .media.gear::before { background: linear-gradient(135deg, #222527, #111); } .media-label { position: absolute; right: 4px; bottom: 4px; font-size: 10px; line-height: 18px; color: rgba(255,255,255,.8); text-shadow: 0 0 1px rgba(0,0,0,.95); font-weight: 510; } .template-tabs { display: flex; gap: 8px; margin-bottom: 12px; } .template-list { display: flex; flex-direction: column; gap: 8px; } .template-card { height: 112px; border: 0; width: 100%; color: inherit; display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px; text-align: left; cursor: pointer; } .template-card.selected { box-shadow: inset 0 0 0 1px var(--primary); } .template-cover { width: 84px; height: 84px; border-radius: 8px; } .template-title { display: flex; justify-content: space-between; align-items: center; font-size: 14px; line-height: 22px; font-weight: 650; margin-bottom: 4px; } .duration { color: var(--primary); font-size: 10px; font-weight: 650; } .template-desc, .subcopy { color: var(--muted); font-size: 12px; line-height: 20px; } .tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .tag { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-high); color: var(--muted); display: inline-flex; align-items: center; font-size: 10px; line-height: 18px; font-weight: 510; } .tag.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, transparent); } .preview-media { height: 224px; border-radius: 8px; background: radial-gradient(circle at center, #56606a, #111 58%); position: relative; overflow: hidden; margin-bottom: 20px; } .segment-rail { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 2px 16px 12px; margin: 0 -16px 82px; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; } .segment-rail::-webkit-scrollbar { display: none; } .segment-rail.dragging { cursor: grabbing; scroll-snap-type: none; } .segment-card { min-width: 128px; width: 128px; min-height: 154px; border: 0; border-radius: 16px; background: var(--surface-container); color: inherit; display: block; padding: 10px; text-align: left; cursor: pointer; scroll-snap-align: start; } .segment-thumb { width: 108px; height: 82px; border-radius: 8px; overflow: hidden; position: relative; margin-bottom: 8px; } .segment-title { font-size: 12px; line-height: 20px; font-weight: 650; margin-bottom: 2px; } .segment-meta { font-size: 11px; line-height: 18px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .segment-status { position: absolute; right: 6px; bottom: 6px; height: 24px; padding: 0 8px; border-radius: 999px; background: rgba(17,17,17,.76); color: var(--text); font-size: 10px; line-height: 24px; font-weight: 650; white-space: nowrap; backdrop-filter: blur(6px); } .play-button { width: 48px; height: 48px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--primary) 88%, transparent); color: var(--on-primary); position: absolute; left: calc(50% - 24px); top: calc(50% - 24px); display: grid; place-items: center; } .section-title { font-size: 14px; line-height: 22px; font-weight: 650; margin: 0 0 8px; } .panel { padding: 16px; margin-bottom: 20px; } .fixed-action { position: absolute; left: 16px; right: 16px; bottom: 24px; height: 48px; border-radius: 999px; border: 0; background: var(--primary); color: var(--on-primary); font-size: 14px; line-height: 20px; font-weight: 650; cursor: pointer; } .ghost-button { height: 32px; border-radius: 999px; border: 0; background: var(--surface-high); color: var(--text); font-size: 12px; line-height: 20px; font-weight: 510; cursor: pointer; padding: 0 12px; } .progress { height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 8px 0 18px; } .progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); } .slot-card { padding: 10px; margin-bottom: 10px; } .slot-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .slot-title { font-size: 14px; line-height: 22px; font-weight: 650; } .slot-meta { font-size: 11px; color: var(--muted); } .slot-main { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } .slot-media-row { display: flex; gap: 4px; overflow: hidden; } .slot-media-row .media { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 8px; } .slot-actions { display: flex; flex-direction: column; gap: 6px; } .hint { color: var(--warning); font-size: 11px; line-height: 18px; margin-top: 6px; } .choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .modal-screen { display: none; align-items: center; justify-content: center; padding: 0 36px; transform: none; } .modal-screen.active { display: flex; } .modal-screen::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); } .dialog { width: 330px; min-height: 272px; padding: 24px; position: relative; z-index: 1; box-shadow: inset 0 0 0 .5px var(--border); } .dialog-title { font-size: 17px; line-height: 24px; font-weight: 650; margin-bottom: 14px; } .dialog-copy { font-size: 12px; line-height: 20px; color: var(--muted); margin-bottom: 16px; } .warning-box { min-height: 52px; border-radius: 12px; background: rgba(242,157,41,.12); color: var(--warning); padding: 10px 12px; font-size: 12px; line-height: 20px; margin-bottom: 16px; box-shadow: inset 0 0 0 1px rgba(242,157,41,.5); } .dialog-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; } .dialog-actions button { height: 40px; border-radius: 999px; border: 0; font-size: 12px; font-weight: 650; cursor: pointer; } .dialog-actions .cancel { background: var(--surface-high); color: var(--text); } .dialog-actions .confirm { background: var(--primary); color: var(--on-primary); } .underline-tabs { height: 58px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; border-bottom: .5px solid var(--border); margin: -16px -16px 8px; } .underline-tabs span { height: 48px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; font-weight: 510; position: relative; } .underline-tabs .active { color: var(--text); } .underline-tabs .active::after { content: ""; position: absolute; bottom: 0; width: 50px; height: 2px; border-radius: 999px; background: var(--primary); } .task-row { height: 69px; display: grid; grid-template-columns: 54px 1fr 90px; gap: 12px; align-items: center; border-bottom: .5px solid var(--border); cursor: pointer; } .task-thumb { width: 52px; height: 52px; overflow: hidden; background: var(--surface-high); position: relative; } .task-main { min-width: 0; } .task-type { display: flex; align-items: center; gap: 4px; color: var(--primary); font-size: 10px; line-height: 18px; font-weight: 510; margin-bottom: 1px; } .task-name { font-size: 12px; line-height: 20px; font-weight: 510; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .task-status { text-align: right; font-size: 10px; line-height: 18px; color: var(--primary); font-weight: 510; } .task-status.warn { color: var(--warning); } .task-progress { height: 3px; background: var(--border); border-radius: 999px; overflow: hidden; margin-top: 6px; } .task-progress span { height: 100%; display: block; background: var(--primary); } .result-player { height: 420px; border-radius: 8px; background: linear-gradient(100deg, #151318, #5b1234 54%, #161014); position: relative; overflow: hidden; margin-bottom: 16px; } .meta-card { padding: 16px; margin-bottom: 54px; } .result-actions { position: absolute; left: 16px; right: 16px; bottom: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .result-actions .save { grid-column: 1 / -1; height: 48px; border-radius: 999px; border: 0; background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 650; } .result-actions .ghost-button { height: 40px; } .asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 92px; } .asset-tile { height: 112px; border: 0; padding: 0; background: transparent; position: relative; cursor: pointer; overflow: hidden; } .asset-tile .media { width: 100%; height: 100%; } .asset-tile.selected::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--primary); pointer-events: none; } .check-dot { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border-radius: 999px; background: rgba(17,17,17,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); } .asset-tile.selected .check-dot { background: var(--primary); box-shadow: none; } .asset-tile.selected .check-dot::before { content: ""; position: absolute; left: 6px; top: 4px; width: 6px; height: 10px; border-right: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(40deg); } .asset-count { height: 34px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; line-height: 20px; margin: -4px 0 10px; } .fixed-action:disabled { opacity: .44; cursor: not-allowed; } .hidden { display: none !important; } .toast { position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%) translateY(12px); min-width: 132px; height: 40px; border-radius: 999px; background: rgba(37,37,38,.96); color: var(--text); display: flex; align-items: center; justify-content: center; padding: 0 16px; font-size: 12px; z-index: 20; pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } </style> </head> <body> <main class="board"> <section class="screen active" data-screen="album"> <div class="status"><span>9:41</span><span class="levels">100%</span></div> <div class="nav"> <div class="nav-title">鍒涗綔</div> </div> <div class="body" style="padding-bottom: 118px;"> <button class="task-entry" data-go="tasks"> <svg class="icon"><use href="#i-task"></use></svg> <span>浠诲姟</span> </button> <div class="function-grid"> <button class="function-card"> <svg class="icon"><use href="#i-stack"></use></svg> <span>澶氬鍙犲浘</span> </button> <button class="function-card"> <svg class="icon"><use href="#i-post"></use></svg> <span>澶╂枃鍚庢湡</span> </button> <button class="function-card"> <svg class="icon"><use href="#i-pano"></use></svg> <span>鍏ㄦ櫙鎷煎浘</span> </button> <button class="function-card" data-go="templates"> <span class="badge">NEW</span> <svg class="icon"><use href="#i-video"></use></svg> <span>涓€閿垚鐗?/span> </button> </div> <div class="filter-row"> <span class="pill">鎵€鏈?30) <svg class="icon" style="width:16px;height:16px"><use href="#i-down"></use></svg></span> <span class="pill">閫夋嫨</span> </div> <p class="date-title">2026骞?鏈?鏃?鍛ㄥ洓</p> <div class="media-grid"> <div class="media"><span class="media-label">MOON</span></div> <div class="media deep"><span class="media-label">M42</span></div> <div class="media mw"><span class="media-label">閾舵渤</span></div> <div class="media gear"><span class="media-label">D3</span></div> <div class="media"><span class="media-label">鏈堥潰</span></div> <div class="media deep"><span class="media-label">M31</span></div> <div class="media"><span class="media-label">瑙嗛</span></div> <div class="media mw"><span class="media-label">鏄熼噹</span></div> <div class="media gear"><span class="media-label">璁惧</span></div> <div class="media deep"><span class="media-label">M8</span></div> <div class="media"><span class="media-label">鏈堜寒</span></div> <div class="media mw"><span class="media-label">閾舵渤</span></div> </div> <p class="date-title">2026骞?鏈?鏃?鍛ㄤ笁</p> <div class="media-grid"> <div class="media deep"><span class="media-label">M16</span></div> <div class="media"><span class="media-label">鏈堥潰</span></div> <div class="media gear"><span class="media-label">鐜板満</span></div> <div class="media mw"><span class="media-label">閾舵渤</span></div> </div> </div> <div class="bottom-tabs"> <div class="tab-item"><svg class="icon"><use href="#i-home"></use></svg>棣栭〉</div> <div class="tab-item"><svg class="icon"><use href="#i-pano"></use></svg>鏄熷浘</div> <div class="tab-item"><svg class="icon"><use href="#i-stack"></use></svg>绀惧尯</div> <div class="tab-item active"><svg class="icon"><use href="#i-album"></use></svg>鐩稿唽</div> <div class="tab-item"><svg class="icon"><use href="#i-me"></use></svg>鎴戠殑</div> </div> </section> <section class="screen" data-screen="templates"> <div class="status"><span>9:41</span><span class="levels">100%</span></div> <div class="nav center"> <button class="back" data-go="album"><svg class="icon"><use href="#i-back"></use></svg></button> <div class="nav-title">涓€閿垚鐗?/div> </div> <div class="body"> <div class="template-tabs"> <button class="pill active" data-action="filter-template" data-filter="鍏ㄩ儴">鍏ㄩ儴</button> <button class="pill" data-action="filter-template" data-filter="鏈堜寒">鏈堜寒</button> <button class="pill" data-action="filter-template" data-filter="娣辩┖">娣辩┖</button> <button class="pill" data-action="filter-template" data-filter="閾舵渤">閾舵渤</button> <button class="pill" data-action="filter-template" data-filter="璁惧">璁惧</button> </div> <div class="template-list"> <button class="template-card selected" data-template="鏈堜寒澶х墖" data-kind="鏈堜寒" data-go="preview"> <div class="template-cover media"><span class="media-label">MOON</span></div> <div> <div class="template-title"><span>鏈堜寒澶х墖</span><span class="duration">24s</span></div> <div class="template-desc">闇€瑕?1 娈佃棰?+ 6 寮犳湀浜浘</div> <div class="tags"><span class="tag active">鏈堜寒</span><span class="tag">闇€瑙嗛</span><span class="tag">6 鍥?/span></div> </div> </button> <button class="template-card" data-template="娣辩┖鍚堥泦" data-kind="娣辩┖" data-go="preview"> <div class="template-cover media deep"><span class="media-label">DEEP SKY</span></div> <div> <div class="template-title"><span>娣辩┖鍚堥泦</span><span class="duration">18s</span></div> <div class="template-desc">閫傚悎 3-8 寮犳繁绌虹収鐗?/div> <div class="tags"><span class="tag active">娣辩┖</span><span class="tag">3-8 鍥?/span><span class="tag">鏃犺棰?/span></div> </div> </button> <button class="template-card" data-template="瑙傛祴鏃ヨ" data-kind="璁惧" data-go="preview"> <div class="template-cover media gear"><span class="media-label">DWARF</span></div> <div> <div class="template-title"><span>瑙傛祴鏃ヨ</span><span class="duration">32s</span></div> <div class="template-desc">璁惧/鐜板満绱犳潗 + 瑙傛祴鎴愭灉</div> <div class="tags"><span class="tag active">璁惧</span><span class="tag">鐜板満</span><span class="tag">鎴愭灉</span></div> </div> </button> <button class="template-card" data-template="閾舵渤宸＄ぜ" data-kind="閾舵渤" data-go="preview"> <div class="template-cover media mw"><span class="media-label">MILKY WAY</span></div> <div> <div class="template-title"><span>閾舵渤宸＄ぜ</span><span class="duration">20s</span></div> <div class="template-desc">閫傚悎 4-10 寮犻摱娌?鏄熼噹鐓х墖</div> <div class="tags"><span class="tag active">閾舵渤</span><span class="tag">4-10 鍥?/span><span class="tag">鍙€夎棰?/span></div> </div> </button> </div> </div> </section> <section class="screen" data-screen="preview"> <div class="status"><span>9:41</span><span class="levels">100%</span></div> <div class="nav center"> <button class="back" data-go="templates"><svg class="icon"><use href="#i-back"></use></svg></button> <div class="nav-title" data-bind="templateName">鏈堜寒澶х墖</div> </div> <div class="body"> <div class="preview-media" data-bind="previewPlayer"> <button class="play-button" data-action="play-preview"><svg class="icon fill"><use href="#i-play"></use></svg></button> <span class="media-label">MOON</span> </div> <p class="section-title">鏈堜寒澶х墖路 24s</p> <div class="subcopy" style="margin-bottom: 12px;">閫夋嫨鎴栨浛鎹㈡瘡涓墖娈电礌鏉愶紝绯荤粺浼氭寜妯℃澘鑺傚鑷姩瑁佸垏銆佽浆鍦哄拰鍔犲瓧骞曘€?/div> <div class="segment-rail" data-rail> <button class="segment-card" data-action="replace-segment" data-segment="寮€鍦鸿棰?> <div class="segment-thumb media"><span class="segment-status" data-segment-status="寮€鍦鸿棰?>鏇挎崲</span></div> <div class="segment-title">寮€鍦鸿棰?/div> <div class="segment-meta">闇€瑕?1 娈垫湀浜棰?路宸茶嚜鍔ㄥ尮閰?/div> </button> <button class="segment-card" data-action="replace-segment" data-segment="鏈堜寒鐓х墖"> <div class="segment-thumb media"><span class="segment-status" data-segment-status="鏈堜寒鐓х墖">琛ラ綈</span></div> <div class="segment-title">鏈堜寒鐓х墖缁?/div> <div class="segment-meta">闇€瑕?6 寮犳湀浜浘路宸插～鍏?5/6</div> </button> <button class="segment-card" data-action="replace-segment" data-segment="杞満鐗囨"> <div class="segment-thumb media deep"><span class="segment-status" data-segment-status="杞満鐗囨">鏇挎崲</span></div> <div class="segment-title">鑺傚杞満</div> <div class="segment-meta">妯℃澘鍐呯疆鐗规晥路鍙浛鎹㈤鏍?/div> </button> <button class="segment-card" data-action="replace-segment" data-segment="璁惧鐜"> <div class="segment-thumb media gear"><span class="segment-status" data-segment-status="璁惧鐜">娣诲姞</span></div> <div class="segment-title">璁惧/鐜绱犳潗</div> <div class="segment-meta">鍙€?1-2 寮?路澧炲己鏁呬簨鎰?/div> </button> <button class="segment-card" data-action="replace-segment" data-segment="鐗囧熬鎴愭灉"> <div class="segment-thumb media mw"><span class="segment-status" data-segment-status="鐗囧熬鎴愭灉">鏇挎崲</span></div> <div class="segment-title">鐗囧熬鎴愭灉灞曠ず</div> <div class="segment-meta">鑷姩浣跨敤鏈€浣虫垚鐗?路鍙墜鍔ㄦ寚瀹?/div> </button> </div> </div> <button class="fixed-action" data-action="start-render-from-preview">寮€濮嬫覆鏌撹棰?/button> </section> <section class="screen" data-screen="assetPicker"> <div class="status"><span>9:41</span><span class="levels">100%</span></div> <div class="nav center"> <button class="back" data-go="preview"><svg class="icon"><use href="#i-back"></use></svg></button> <div class="nav-title" data-bind="assetPickerTitle">閫夋嫨绱犳潗</div> <button class="nav-action" data-action="select-all-assets">閫夋弧</button> </div> <div class="body"> <div class="template-tabs"> <button class="pill active" data-action="filter-assets" data-asset-filter="all">鎺ㄨ崘</button> <button class="pill" data-action="filter-assets" data-asset-filter="2">杞満</button> <button class="pill" data-action="filter-assets" data-asset-filter="3">闈炲ぉ鏂囨牱寮?/button> </div> <div class="asset-count"><span data-bind="assetCount">宸查€?0/30</span><span>浠呮樉绀?2/3 绫荤湡瀹炵礌鏉?/span></div> <div class="asset-grid" data-bind="assetGrid"></div> </div> <button class="fixed-action" data-action="confirm-assets" data-bind="assetConfirm">浣跨敤閫変腑绱犳潗</button> </section> <section class="screen" data-screen="fill"> <div class="status"><span>9:41</span><span class="levels">100%</span></div> <div class="nav center"> <button class="back" data-go="preview"><svg class="icon"><use href="#i-back"></use></svg></button> <div class="nav-title" data-bind="templateName">鏈堜寒澶х墖</div> </div> <div class="body" style="padding-bottom: 104px;"> <div class="subcopy" data-bind="fillCount">宸插～鍏?4/7</div> <div class="progress"><span data-bind-style="fillProgress" style="width: 58%"></span></div> <div class="subcopy" style="margin-bottom: 14px;">绯荤粺宸茶嚜鍔ㄦ帹鑽愯繎鏈熼€傚悎璇ユā鏉跨殑鐓х墖鍜岃棰?/div> <div class="slot-card"> <div class="slot-head"><span class="slot-title">寮€鍦虹礌鏉?/span><span class="slot-meta">1 娈佃棰?/span></div> <div class="slot-main"> <div class="slot-media-row"><div class="media"></div><div class="media"></div></div> <div class="slot-actions"><button class="ghost-button" data-action="replace">鏇挎崲</button><button class="ghost-button" data-action="delete-material">鍒犻櫎</button></div> </div> </div> <div class="slot-card"> <div class="slot-head"><span class="slot-title">瑙傛祴鐓х墖</span><span class="slot-meta">6 寮犳湀浜浘</span></div> <div class="slot-main"> <div class="slot-media-row"><div class="media"></div><div class="media"></div><div class="media"></div></div> <div class="slot-actions"><button class="ghost-button" data-action="replace">鏇挎崲</button><button class="ghost-button" data-action="add-moon">娣诲姞</button></div> </div> <div class="hint" data-bind="moonHint">杩樺樊 1 寮犳湀浜収鐗?/div> </div> <div class="slot-card"> <div class="slot-head"><span class="slot-title">瑙嗛鐗囨</span><span class="slot-meta">鍙浛鎹㈠紑鍦鸿棰?/span></div> <div class="slot-main"> <div class="slot-media-row"><div class="media deep"></div><div class="media deep"></div></div> <div class="slot-actions"><button class="ghost-button" data-action="replace">鏇挎崲</button><button class="ghost-button" data-action="delete-material">鍒犻櫎</button></div> </div> </div> <div class="slot-card"> <div class="slot-head"><span class="slot-title">璁惧/鐜绱犳潗</span><span class="slot-meta">鍙€?1-2 寮?/span></div> <div class="slot-main"> <div class="slot-media-row"><div class="media gear"></div><div class="media gear"></div></div> <div class="slot-actions"><button class="ghost-button" data-action="replace">鏇挎崲</button><button class="ghost-button" data-action="add-scene">娣诲姞</button></div> </div> <div class="hint" data-bind="sceneHint">鍙坊鍔犳媿鎽勭幇鍦虹礌鏉愶紝璁╄棰戞洿鏈夋晠浜嬫劅</div> </div> <div class="choice-row"> <button class="ghost-button" data-action="choose-album">浠庣浉鍐岄€夋嫨</button> <button class="ghost-button" data-action="choose-device">杩炴帴璁惧閫夋嫨</button> </div> </div> <button class="fixed-action" data-action="start-generate">寮€濮嬬敓鎴?/button> </section> <section class="screen modal-screen" data-screen="confirm"> <div class="dialog"> <div class="dialog-title">浜戠澶勭悊纭</div> <div class="dialog-copy">绱犳潗灏嗕笂浼犺嚦浜戠澶勭悊銆備竴閿垚鐗囬渶瑕佸皢浣犻€夋嫨鐨勭収鐗囧拰瑙嗛涓婁紶鑷充簯绔紝鐢ㄤ簬鐢熸垚瑙嗛浣滃搧銆傚紑濮嬪悗鍙湪浠诲姟鍒楄〃鏌ョ湅杩涘害鍜岀粨鏋溿€?/div> <div class="warning-box">绉诲姩缃戠粶涓嬪彲鑳芥秷鑰楄緝澶氭祦閲?/div> <div class="dialog-actions"> <button class="cancel" data-go="preview">鍙栨秷</button> <button class="confirm" data-go="cellular">寮€濮嬩笂浼犲苟鐢熸垚</button> </div> </div> </section> <section class="screen modal-screen" data-screen="cellular"> <div class="dialog"> <div class="dialog-title">缁х画浣跨敤绉诲姩缃戠粶锛?/div> <div class="dialog-copy">褰撳墠澶勪簬绉诲姩缃戠粶锛屼笂浼犵収鐗囧拰瑙嗛鍙兘娑堣€楄緝澶氭祦閲忋€備綘涔熷彲浠ョ◢鍚庤繛鎺?Wi-Fi 鍚庡啀鐢熸垚銆?/div> <div class="dialog-actions"> <button class="cancel" data-go="confirm">杩斿洖</button> <button class="confirm" data-action="confirm-cellular">缁х画鐢熸垚</button> </div> </div> </section> <section class="screen" data-screen="tasks"> <div class="status"><span>9:41</span><span class="levels">100%</span></div> <div class="nav center"> <button class="back" data-go="album"><svg class="icon"><use href="#i-back"></use></svg></button> <div class="nav-title">浠诲姟鍒楄〃</div> <button class="nav-action">閫夋嫨</button> </div> <div class="body" style="padding-bottom: 108px;"> <div class="underline-tabs"><span class="active">鍏ㄩ儴</span><span>杩涜涓?/span><span>宸插畬鎴?/span></div> <div class="task-row" data-go="result"> <div class="task-thumb"><div class="media" style="width:100%;height:100%"></div></div> <div class="task-main"> <div class="task-type"><svg class="icon" style="width:16px;height:16px"><use href="#i-video"></use></svg>涓€閿垚鐗?/div> <div class="task-name">鏈堜寒澶х墖</div> </div> <div><div class="task-status" data-bind="taskStatus">鐢熸垚涓?68%</div><div class="task-progress"><span data-bind-style="taskProgress" style="width:68%"></span></div></div> </div> <div class="task-row"> <div class="task-thumb"><div class="media deep" style="width:100%;height:100%"></div></div> <div class="task-main"> <div class="task-type"><svg class="icon" style="width:16px;height:16px"><use href="#i-post"></use></svg>澶╂枃鍚庢湡</div> <div class="task-name">M42 璋冭壊澧炲己</div> </div> <div><div class="task-status warn">鎺掗槦涓?/div><div class="task-progress"><span style="width:12%;background:var(--warning)"></span></div></div> </div> <div class="task-row"> <div class="task-thumb"><div class="media mw" style="width:100%;height:100%"></div></div> <div class="task-main"> <div class="task-type"><svg class="icon" style="width:16px;height:16px"><use href="#i-pano"></use></svg>鍏ㄦ櫙鎷煎浘</div> <div class="task-name">閾舵渤鎷辨ˉ</div> </div> <div><div class="task-status">涓婁紶 42%</div><div class="task-progress"><span style="width:42%"></span></div></div> </div> <div class="task-row"> <div class="task-thumb"><div class="media gear" style="width:100%;height:100%"></div></div> <div class="task-main"> <div class="task-type"><svg class="icon" style="width:16px;height:16px"><use href="#i-stack"></use></svg>澶氬鍙犲浘</div> <div class="task-name">M31 涓夊鍚堟垚</div> </div> <div><div class="task-status">澶勭悊涓?/div><div class="task-progress"><span style="width:58%"></span></div></div> </div> <div style="height:8px;background:var(--surface-container);margin:8px -16px 18px"></div> <p class="section-title" style="color:var(--muted);font-size:12px">宸插畬鎴?/p> <div class="task-row" data-go="result"> <div class="task-thumb"><div class="media" style="width:100%;height:100%"></div></div> <div class="task-main"> <div class="task-type"><svg class="icon" style="width:16px;height:16px"><use href="#i-video"></use></svg>涓€閿垚鐗?/div> <div class="task-name" data-bind="completedTaskName">瑙傛祴鏃ヨ</div> </div> <div><div class="task-status">澶勭悊瀹屾垚</div><div class="task-progress"><span style="width:100%"></span></div></div> </div> </div> <div class="bottom-tabs"> <div class="tab-item"><svg class="icon"><use href="#i-home"></use></svg>棣栭〉</div> <div class="tab-item"><svg class="icon"><use href="#i-pano"></use></svg>鏄熷浘</div> <div class="tab-item"><svg class="icon"><use href="#i-stack"></use></svg>绀惧尯</div> <div class="tab-item active"><svg class="icon"><use href="#i-album"></use></svg>鐩稿唽</div> <div class="tab-item"><svg class="icon"><use href="#i-me"></use></svg>鎴戠殑</div> </div> </section> <section class="screen" data-screen="result"> <div class="status"><span>9:41</span><span class="levels">100%</span></div> <div class="nav center"> <button class="back" data-go="tasks"><svg class="icon"><use href="#i-back"></use></svg></button> <div class="nav-title">鐢熸垚缁撴灉</div> </div> <div class="body"> <div class="result-player has-asset"> <video data-bind="resultVideo" playsinline muted></video> <audio data-bind="resultMusic"></audio> <button class="play-button" data-action="play-result"><svg class="icon fill"><use href="#i-play"></use></svg></button> <span class="media-label" data-bind="resultBeatLabel">READY</span> </div> <div class="meta-card"> <p class="section-title" data-bind="templateName">鏈堜寒澶х墖</p> <div class="subcopy" data-bind="resultMeta">鐢熸垚鏃堕棿 2026-07-09 21:36<br>绱犳潗锛氱瓑寰呴€夋嫨</div> </div> </div> <div class="result-actions"> <button class="save" data-action="save-result">淇濆瓨鍒扮浉鍐?/button> <button class="ghost-button" data-action="share-result">鍒嗕韩</button> <button class="ghost-button" data-go="preview">閲嶆柊鐢熸垚</button> </div> </section> </main> <div class="toast" id="toast">宸叉洿鏂?/div> <svg width="0" height="0" style="position:absolute"> <symbol id="i-task" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="3"/><path d="M8 8h8M8 12h6M8 16h7"/><path d="M7 8l1 1 2-2"/></symbol> <symbol id="i-stack" viewBox="0 0 24 24"><rect x="5" y="8" width="12" height="12" rx="2"/><rect x="8" y="4" width="11" height="11" rx="2"/></symbol> <symbol id="i-post" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="3"/><path d="M7 15l3-3 2 2 3-4 3 5"/><circle cx="8" cy="9" r="1.4" fill="currentColor" stroke="none"/></symbol> <symbol id="i-pano" viewBox="0 0 24 24"><path d="M4 8c4-2.2 12-2.2 16 0v8c-4 2.2-12 2.2-16 0V8Z"/><path d="M7 14l3-3 3 3 2-2 2 2"/></symbol> <symbol id="i-video" viewBox="0 0 24 24"><rect x="4" y="6" width="12" height="12" rx="2.5"/><path d="M16 10l4-2.5v9L16 14"/></symbol> <symbol id="i-down" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5"/></symbol> <symbol id="i-back" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></symbol> <symbol id="i-home" viewBox="0 0 24 24"><path d="M4 11.5L12 5l8 6.5V20H6v-7"/></symbol> <symbol id="i-album" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M7 15l3-3 2 2 2-3 3 4"/></symbol> <symbol id="i-me" viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.5"/><path d="M5 20c1.2-4 12.8-4 14 0"/></symbol> <symbol id="i-play" viewBox="0 0 24 24"><path d="M9 7.5v9l7-4.5-7-4.5Z"/></symbol> </svg> <script> const screens = [...document.querySelectorAll(".screen")]; const screenByName = new Map(screens.map((screen) => [screen.dataset.screen, screen])); const toast = document.getElementById("toast"); const state = { current: "album", template: "鏈堜寒澶х墖", filled: 4, total: 7, taskProgress: 68, taskTimer: null, generated: false, templateFilter: "鍏ㄩ儴", replacedSegments: new Set(), activeSegment: "", assetFilter: "all", selectedAssetIds: new Set(), renderQueue: [], resultIndex: 0, resultTimer: null, }; const templates = { "鏈堜寒澶х墖": { structure: "寮€鍦猴細1 娈垫湀浜棰?br>瑙傛祴鐓х墖锛? 寮犳湀浜浘锛屽彲鑷姩瑁佸垏<br>璁惧/鐜锛氬彲閫?1-2 寮狅紝鐢ㄤ簬鐗囧熬鏁呬簨鎰?br>杈撳嚭锛?4 绉掔珫鐗堣棰戯紝鍚爣棰樸€佹按鍗般€侀煶涔愯妭濂?, tags: ["鏈堜寒", "瑙嗛蹇呴渶", "6 寮犲浘鐗?, "璁惧鍙€?], total: 7, filled: 4, min: 5, }, "娣辩┖鍚堥泦": { structure: "寮€鍦猴細鑷姩鐢熸垚鏍囬<br>瑙傛祴鐓х墖锛?-8 寮犳繁绌虹収鐗?br>璁惧/鐜锛氬彲閫夛紝鐢ㄤ簬鐗囧熬淇℃伅<br>杈撳嚭锛?8 绉掔珫鐗堣棰戯紝閫傚悎鏄熶簯/鏄熺郴鍚堥泦", tags: ["娣辩┖", "3-8 寮犲浘鐗?, "鏃犺棰?, "鑷姩杞満"], total: 5, filled: 3, min: 3, }, "瑙傛祴鏃ヨ": { structure: "寮€鍦猴細璁惧鎴栨媿鎽勭幇鍦虹礌鏉?br>杩囩▼锛?-3 寮犵幆澧冪収鐗?br>鎴愭灉锛?-6 寮犺娴嬫垚鐗?br>杈撳嚭锛?2 绉掓晠浜嬪寲瑙嗛锛岄€傚悎璁板綍涓€娆¤娴?, tags: ["璁惧", "鐜板満", "鎴愭灉", "鍙€夎棰?], total: 8, filled: 5, min: 5, }, "閾舵渤宸＄ぜ": { structure: "寮€鍦猴細閾舵渤鎴栨槦閲庣収鐗?br>涓讳綋锛?-10 寮犻摱娌?鏄熼噹绱犳潗<br>璁惧/鐜锛氬彲閫?1 寮?br>杈撳嚭锛?0 绉掕妭濂忓瀷宸＄ぜ瑙嗛", tags: ["閾舵渤", "4-10 寮犲浘鐗?, "鍙€夎棰?, "鏄熼噹"], total: 6, filled: 4, min: 4, }, }; function showToast(message) { toast.textContent = message; toast.classList.add("show"); window.clearTimeout(showToast.timer); showToast.timer = window.setTimeout(() => toast.classList.remove("show"), 1400); } function render() { const data = templates[state.template]; document.querySelectorAll('[data-bind="templateName"]').forEach((node) => node.textContent = state.template); document.querySelector('[data-bind="templateStructure"]').innerHTML = data.structure; document.querySelector('[data-bind="templateTags"]').innerHTML = data.tags .map((tag, index) => `<span class="tag ${index === 0 ? "active" : ""}">${tag}</span>`) .join(""); document.querySelectorAll(".template-card").forEach((card) => { const visible = state.templateFilter === "鍏ㄩ儴" || card.dataset.kind === state.templateFilter; card.classList.toggle("hidden", !visible); card.classList.toggle("selected", card.dataset.template === state.template); }); document.querySelectorAll('[data-action="filter-template"]').forEach((pill) => { pill.classList.toggle("active", pill.dataset.filter === state.templateFilter); }); state.total = data.total; state.filled = Math.min(state.filled, state.total); document.querySelector('[data-bind="fillCount"]').textContent = `宸插～鍏?${state.filled}/${state.total}`; document.querySelector('[data-bind-style="fillProgress"]').style.width = `${Math.round(state.filled / state.total * 100)}%`; document.querySelector('[data-bind="moonHint"]').textContent = state.filled >= data.min ? "绱犳潗宸叉弧瓒虫渶浣庤姹? : "杩樺樊 1 寮犳湀浜収鐗?; document.querySelector('[data-bind="moonHint"]').style.color = state.filled >= data.min ? "var(--primary)" : "var(--warning)"; document.querySelector('[data-bind="sceneHint"]').textContent = state.filled >= state.total ? "宸叉坊鍔犵幇鍦虹礌鏉愶紝瑙嗛鏁呬簨鎰熸洿瀹屾暣" : "鍙坊鍔犳媿鎽勭幇鍦虹礌鏉愶紝璁╄棰戞洿鏈夋晠浜嬫劅"; document.querySelectorAll("[data-segment-status]").forEach((node) => { const name = node.dataset.segmentStatus; if (state.replacedSegments.has(name)) { node.textContent = "宸叉浛鎹?; node.style.color = "var(--primary)"; } else { node.style.color = ""; } }); document.querySelector('[data-bind="assetPickerTitle"]').textContent = state.activeSegment ? `閫夋嫨${state.activeSegment}` : "閫夋嫨绱犳潗"; const taskStatus = state.generated ? (state.taskProgress >= 100 ? "澶勭悊瀹屾垚" : `鐢熸垚涓?${state.taskProgress}%`) : "鐢熸垚涓?68%"; document.querySelector('[data-bind="taskStatus"]').textContent = taskStatus; document.querySelector('[data-bind-style="taskProgress"]').style.width = `${state.generated ? state.taskProgress : 68}%`; document.querySelector('[data-bind="completedTaskName"]').textContent = state.template; } function showScreen(name) { const next = screenByName.get(name); const current = screenByName.get(state.current); if (!next || next === current) return; current?.classList.add("leaving"); current?.classList.remove("active"); next.classList.add("active"); next.scrollTop = 0; window.setTimeout(() => current?.classList.remove("leaving"), 200); state.current = name; render(); } function beginTaskProgress() { state.generated = true; state.taskProgress = 8; window.clearInterval(state.taskTimer); state.taskTimer = window.setInterval(() => { if (state.current !== "tasks") return; state.taskProgress = Math.min(100, state.taskProgress + Math.ceil(Math.random() * 9)); render(); if (state.taskProgress >= 100) { window.clearInterval(state.taskTimer); showToast("瑙嗛宸茬敓鎴?); } }, 900); } document.addEventListener("click", (event) => { if (event.target.closest("[data-rail]")?.dataset.dragged === "true") { event.preventDefault(); return; } const templateTrigger = event.target.closest("[data-template]"); if (templateTrigger) { state.template = templateTrigger.dataset.template; const data = templates[state.template]; state.filled = data.filled; state.total = data.total; state.replacedSegments.clear(); } const action = event.target.closest("[data-action]")?.dataset.action; if (action === "add-moon") { state.filled = Math.min(state.total, state.filled + 1); showToast("宸叉坊鍔?1 寮犳湀浜収鐗?); render(); return; } if (action === "delete-material") { state.filled = Math.max(0, state.filled - 1); showToast("宸插垹闄?1 涓礌鏉?); render(); return; } if (action === "add-scene") { state.filled = Math.min(state.total, state.filled + 1); showToast("宸叉坊鍔犳媿鎽勭幇鍦虹礌鏉?); render(); return; } if (action === "replace") { showToast("宸叉浛鎹㈡帹鑽愮礌鏉?); return; } if (action === "replace-segment") { const segment = event.target.closest("[data-segment]").dataset.segment; state.activeSegment = segment; showScreen("assetPicker"); render(); return; } if (action === "toggle-asset") { event.target.closest(".asset-tile").classList.toggle("selected"); return; } if (action === "select-all-assets") { document.querySelectorAll(".asset-tile").forEach((tile) => tile.classList.add("selected")); showToast("宸插叏閫夊綋鍓嶆帹鑽愮礌鏉?); return; } if (action === "confirm-assets") { if (!document.querySelector(".asset-tile.selected")) { showToast("璇疯嚦灏戦€夋嫨 1 涓礌鏉?); return; } if (state.activeSegment) { state.replacedSegments.add(state.activeSegment); if (state.activeSegment === "鏈堜寒鐓х墖" || state.activeSegment === "璁惧鐜") { state.filled = Math.min(state.total, state.filled + 1); } showToast(`宸叉浛鎹?{state.activeSegment}`); } showScreen("preview"); render(); return; } if (action === "start-render-from-preview") { const data = templates[state.template]; if (state.filled < data.min) { showToast("绱犳潗鏈弧瓒虫渶浣庤姹?); return; } showScreen("confirm"); return; } if (action === "choose-album") { state.filled = Math.min(state.total, state.filled + 2); showToast("宸蹭粠鐩稿唽閫夋嫨绱犳潗"); render(); return; } if (action === "choose-device") { state.filled = Math.min(state.total, state.filled + 1); showToast("宸茶繛鎺ヨ澶囧苟閫夋嫨绱犳潗"); render(); return; } if (action === "filter-template") { state.templateFilter = event.target.closest("[data-filter]").dataset.filter; showToast(`宸茬瓫閫夛細${state.templateFilter}`); render(); return; } if (action === "play-preview") { showToast("姝ｅ湪棰勮妯℃澘鏁堟灉"); return; } if (action === "play-result") { showToast("姝ｅ湪鎾斁鐢熸垚瑙嗛"); return; } if (action === "save-result") { showToast("宸蹭繚瀛樺埌鐩稿唽"); return; } if (action === "share-result") { showToast("宸叉墦寮€鍒嗕韩闈㈡澘"); return; } if (action === "start-generate") { const data = templates[state.template]; if (state.filled < data.min) { showToast("绱犳潗鏈弧瓒虫渶浣庤姹?); return; } showScreen("confirm"); return; } if (action === "confirm-cellular") { beginTaskProgress(); showScreen("tasks"); return; } const trigger = event.target.closest("[data-go]"); if (trigger) showScreen(trigger.dataset.go); }); render(); document.querySelectorAll("[data-rail]").forEach((rail) => { let isDown = false; let startX = 0; let scrollLeft = 0; let moved = false; rail.addEventListener("pointerdown", (event) => { isDown = true; moved = false; rail.dataset.dragged = "false"; rail.classList.add("dragging"); rail.setPointerCapture(event.pointerId); startX = event.clientX; scrollLeft = rail.scrollLeft; }); rail.addEventListener("pointermove", (event) => { if (!isDown) return; const delta = event.clientX - startX; if (Math.abs(delta) > 5) moved = true; rail.scrollLeft = scrollLeft - delta; }); function endDrag() { if (!isDown) return; isDown = false; rail.classList.remove("dragging"); rail.dataset.dragged = moved ? "true" : "false"; window.setTimeout(() => { rail.dataset.dragged = "false"; }, 0); } rail.addEventListener("pointerup", endDrag); rail.addEventListener("pointercancel", endDrag); rail.addEventListener("mouseleave", endDrag); }); </script> <script> const REAL_ASSETS = [ { id: "demo10_3_2", demo: "demo10", segment: 3, category: 2, image: "one_click_video/image_assets/demo10_3_2.jpg", video: "one_click_video/videoclips/demo10/demo10_3_2.mp4" }, { id: "demo10_4_2", demo: "demo10", segment: 4, category: 2, image: "one_click_video/image_assets/demo10_4_2.jpg", video: "one_click_video/videoclips/demo10/demo10_4_2.mp4" }, { id: "demo12_11_3", demo: "demo12", segment: 11, category: 3, image: "one_click_video/image_assets/demo12_11_3.jpg", video: "one_click_video/videoclips/demo12/demo12_11_3.mp4" }, { id: "demo12_12_3", demo: "demo12", segment: 12, category: 3, image: "one_click_video/image_assets/demo12_12_3.jpg", video: "one_click_video/videoclips/demo12/demo12_12_3.mp4" }, { id: "demo12_13_3", demo: "demo12", segment: 13, category: 3, image: "one_click_video/image_assets/demo12_13_3.jpg", video: "one_click_video/videoclips/demo12/demo12_13_3.mp4" }, { id: "demo14_3_3", demo: "demo14", segment: 3, category: 3, image: "one_click_video/image_assets/demo14_3_3.jpg", video: "one_click_video/videoclips/demo14/demo14_3_3.mp4" }, { id: "demo14_4_3", demo: "demo14", segment: 4, category: 3, image: "one_click_video/image_assets/demo14_4_3.jpg", video: "one_click_video/videoclips/demo14/demo14_4_3.mp4" }, { id: "demo14_5_3", demo: "demo14", segment: 5, category: 3, image: "one_click_video/image_assets/demo14_5_3.jpg", video: "one_click_video/videoclips/demo14/demo14_5_3.mp4" }, { id: "demo18_10_2", demo: "demo18", segment: 10, category: 2, image: "one_click_video/image_assets/demo18_10_2.jpg", video: "one_click_video/videoclips/demo18/demo18_10_2.mp4" }, { id: "demo18_12_2", demo: "demo18", segment: 12, category: 2, image: "one_click_video/image_assets/demo18_12_2.jpg", video: "one_click_video/videoclips/demo18/demo18_12_2.mp4" }, { id: "demo18_14_2", demo: "demo18", segment: 14, category: 2, image: "one_click_video/image_assets/demo18_14_2.jpg", video: "one_click_video/videoclips/demo18/demo18_14_2.mp4" }, { id: "demo18_16_2", demo: "demo18", segment: 16, category: 2, image: "one_click_video/image_assets/demo18_16_2.jpg", video: "one_click_video/videoclips/demo18/demo18_16_2.mp4" }, { id: "demo18_18_2", demo: "demo18", segment: 18, category: 2, image: "one_click_video/image_assets/demo18_18_2.jpg", video: "one_click_video/videoclips/demo18/demo18_18_2.mp4" }, { id: "demo18_4_2", demo: "demo18", segment: 4, category: 2, image: "one_click_video/image_assets/demo18_4_2.jpg", video: "one_click_video/videoclips/demo18/demo18_4_2.mp4" }, { id: "demo18_5_2", demo: "demo18", segment: 5, category: 2, image: "one_click_video/image_assets/demo18_5_2.jpg", video: "one_click_video/videoclips/demo18/demo18_5_2.mp4" }, { id: "demo18_6_2", demo: "demo18", segment: 6, category: 2, image: "one_click_video/image_assets/demo18_6_2.jpg", video: "one_click_video/videoclips/demo18/demo18_6_2.mp4" }, { id: "demo18_7_2", demo: "demo18", segment: 7, category: 2, image: "one_click_video/image_assets/demo18_7_2.jpg", video: "one_click_video/videoclips/demo18/demo18_7_2.mp4" }, { id: "demo6_2_3", demo: "demo6", segment: 2, category: 3, image: "one_click_video/image_assets/demo6_2_3.jpg", video: "one_click_video/videoclips/demo6/demo6_2_3.mp4" }, { id: "demo6_4_3", demo: "demo6", segment: 4, category: 3, image: "one_click_video/image_assets/demo6_4_3.jpg", video: "one_click_video/videoclips/demo6/demo6_4_3.mp4" }, { id: "demo7_10_2", demo: "demo7", segment: 10, category: 2, image: "one_click_video/image_assets/demo7_10_2.jpg", video: "one_click_video/videoclips/demo7/demo7_10_2.mp4" }, { id: "demo7_15_2", demo: "demo7", segment: 15, category: 2, image: "one_click_video/image_assets/demo7_15_2.jpg", video: "one_click_video/videoclips/demo7/demo7_15_2.mp4" }, { id: "demo8_10_2", demo: "demo8", segment: 10, category: 2, image: "one_click_video/image_assets/demo8_10_2.jpg", video: "one_click_video/videoclips/demo8/demo8_10_2.mp4" }, { id: "demo8_11_2", demo: "demo8", segment: 11, category: 2, image: "one_click_video/image_assets/demo8_11_2.jpg", video: "one_click_video/videoclips/demo8/demo8_11_2.mp4" }, { id: "demo8_13_2", demo: "demo8", segment: 13, category: 2, image: "one_click_video/image_assets/demo8_13_2.jpg", video: "one_click_video/videoclips/demo8/demo8_13_2.mp4" }, { id: "demo8_15_2", demo: "demo8", segment: 15, category: 2, image: "one_click_video/image_assets/demo8_15_2.jpg", video: "one_click_video/videoclips/demo8/demo8_15_2.mp4" }, { id: "demo8_17_2", demo: "demo8", segment: 17, category: 2, image: "one_click_video/image_assets/demo8_17_2.jpg", video: "one_click_video/videoclips/demo8/demo8_17_2.mp4" }, { id: "demo8_19_2", demo: "demo8", segment: 19, category: 2, image: "one_click_video/image_assets/demo8_19_2.jpg", video: "one_click_video/videoclips/demo8/demo8_19_2.mp4" }, { id: "demo8_21_2", demo: "demo8", segment: 21, category: 2, image: "one_click_video/image_assets/demo8_21_2.jpg", video: "one_click_video/videoclips/demo8/demo8_21_2.mp4" }, { id: "demo8_23_2", demo: "demo8", segment: 23, category: 2, image: "one_click_video/image_assets/demo8_23_2.jpg", video: "one_click_video/videoclips/demo8/demo8_23_2.mp4" }, { id: "demo8_3_2", demo: "demo8", segment: 3, category: 2, image: "one_click_video/image_assets/demo8_3_2.jpg", video: "one_click_video/videoclips/demo8/demo8_3_2.mp4" }, { id: "demo8_5_2", demo: "demo8", segment: 5, category: 2, image: "one_click_video/image_assets/demo8_5_2.jpg", video: "one_click_video/videoclips/demo8/demo8_5_2.mp4" }, { id: "demo8_7_2", demo: "demo8", segment: 7, category: 2, image: "one_click_video/image_assets/demo8_7_2.jpg", video: "one_click_video/videoclips/demo8/demo8_7_2.mp4" }, { id: "demo8_9_2", demo: "demo8", segment: 9, category: 2, image: "one_click_video/image_assets/demo8_9_2.jpg", video: "one_click_video/videoclips/demo8/demo8_9_2.mp4" } ]; const MUSIC_ANALYSIS = { demo6: { music: "one_click_video/music/demo6.mp3", bpm: 99.38, shot: 1.207, segments: [{ shot: 1.347 }, { shot: 1.207 }] }, demo7: { music: "one_click_video/music/demo7.mp3", bpm: 95.7, shot: 1.254, segments: [{ shot: 1.254 }, { shot: 1.254 }, { shot: 1.3 }] }, demo8: { music: "one_click_video/music/demo8.mp3", bpm: 117.45, shot: 1.022, segments: [{ shot: 1.022 }, { shot: 1.022 }] }, demo10: { music: "one_click_video/music/demo10.mp3", bpm: 117.45, shot: 1.022, segments: [{ shot: 0.975 }, { shot: 0.929 }, { shot: 1.022 }] }, demo12: { music: "one_click_video/music/demo12.mp3", bpm: 117.45, shot: 1.022, segments: [{ shot: 1.022 }, { shot: 0.975 }, { shot: 1.022 }] }, demo14: { music: "one_click_video/music/demo14.mp3", bpm: 89.1, shot: 1.347, segments: [{ shot: 0.975 }, { shot: 1.347 }] }, demo18: { music: "one_click_video/music/demo18.mp3", bpm: 123.05, shot: 0.975, segments: [{ shot: 0.975 }, { shot: 0.975 }] } }; const TEMPLATE_DEMO = { "鏈堜寒澶х墖": "demo8", "娣辩┖鍚堥泦": "demo18", "瑙傛祴鏃ヨ": "demo12", "閾舵渤宸＄ぜ": "demo10" }; const assetById = new Map(REAL_ASSETS.map((asset) => [asset.id, asset])); const MAX_SELECTION = 30; const baseRender = render; const baseShowScreen = showScreen; function selectedAssets() { return [...state.selectedAssetIds].map((id) => assetById.get(id)).filter(Boolean); } function currentMusic() { return MUSIC_ANALYSIS[TEMPLATE_DEMO[state.template]] || MUSIC_ANALYSIS.demo8; } function ensureRecommendedAssets() { if (state.recommendationsLoaded || state.selectedAssetIds.size) return; state.recommendationsLoaded = true; REAL_ASSETS.slice(0, 7).forEach((asset) => state.selectedAssetIds.add(asset.id)); state.filled = Math.max(state.filled, Math.min(state.total, 7)); state.replacedSegments.add("鏈堜寒鐓х墖"); } function renderAssetGrid() { const grid = document.querySelector('[data-bind="assetGrid"]'); if (!grid) return; const assets = REAL_ASSETS.filter((asset) => state.assetFilter === "all" || String(asset.category) === state.assetFilter); grid.innerHTML = assets.map((asset) => { const selected = state.selectedAssetIds.has(asset.id) ? " selected" : ""; const label = asset.category === 2 ? "杞満" : "鏍峰紶"; return `<button class="asset-tile${selected}" data-action="toggle-asset" data-asset-id="${asset.id}"> <div class="media has-asset"><img src="${asset.image}" alt="${label} ${asset.id}" loading="lazy"></div> <span class="check-dot"></span><span class="media-label">${label}</span> </button>`; }).join(""); } function renderRealAssets() { ensureRecommendedAssets(); renderAssetGrid(); document.querySelectorAll('[data-action="filter-assets"]').forEach((pill) => { pill.classList.toggle("active", pill.dataset.assetFilter === state.assetFilter); }); const count = state.selectedAssetIds.size; const countNode = document.querySelector('[data-bind="assetCount"]'); if (countNode) countNode.textContent = `宸查€?${count}/${MAX_SELECTION}`; const confirmButton = document.querySelector('[data-bind="assetConfirm"]'); if (confirmButton) confirmButton.disabled = count === 0; const picks = selectedAssets(); const first = picks[0] || REAL_ASSETS[0]; document.querySelectorAll(".segment-thumb").forEach((thumb, index) => { const asset = picks[index % Math.max(1, picks.length)] || first; if (!asset) return; thumb.classList.add("has-asset"); if (!thumb.querySelector("img")) thumb.insertAdjacentHTML("afterbegin", `<img alt="" loading="lazy">`); thumb.querySelector("img").src = asset.image; }); const preview = document.querySelector('[data-bind="previewPlayer"]'); if (preview && first) { preview.classList.add("has-asset"); if (!preview.querySelector("video")) preview.insertAdjacentHTML("afterbegin", `<video muted playsinline loop></video>`); const video = preview.querySelector("video"); if (!video.src.endsWith(first.video.replace("../", ""))) video.src = first.video; } const taskThumb = document.querySelector('.task-row[data-go="result"] .task-thumb .media'); if (taskThumb && first) { taskThumb.classList.add("has-asset"); if (!taskThumb.querySelector("img")) taskThumb.insertAdjacentHTML("afterbegin", `<img alt="">`); taskThumb.querySelector("img").src = first.image; } const music = currentMusic(); const meta = document.querySelector('[data-bind="resultMeta"]'); if (meta) { meta.innerHTML = `鐢熸垚鏃堕棿 2026-07-10 21:36<br>绱犳潗锛?{count} 寮犲浘鐗?/ ${count} 娈靛悓鍚嶈棰戝垏鐗?br>闊充箰锛?{TEMPLATE_DEMO[state.template]} 路 ${music.bpm} BPM 路鎺ㄨ崘鍒嗛暅 ${music.shot}s`; } const label = document.querySelector('[data-bind="resultBeatLabel"]'); if (label) label.textContent = `${Math.round(music.bpm)} BPM`; } function buildRenderQueue() { const music = currentMusic(); const segments = music.segments.length ? music.segments : [{ shot: music.shot }]; state.renderQueue = selectedAssets().map((asset, index) => ({ ...asset, targetDuration: segments[index % segments.length].shot || music.shot })); } function playSequence() { buildRenderQueue(); if (!state.renderQueue.length) { showToast("璇峰厛閫夋嫨绱犳潗"); return; } const video = document.querySelector('[data-bind="resultVideo"]'); const audio = document.querySelector('[data-bind="resultMusic"]'); if (!video || !audio) return; const music = currentMusic(); audio.src = music.music; audio.currentTime = 0; audio.volume = 0.45; audio.play().catch(() => {}); window.clearTimeout(state.resultTimer); state.resultIndex = 0; const playClip = () => { const clip = state.renderQueue[state.resultIndex % state.renderQueue.length]; video.src = clip.video; video.currentTime = 0; video.onloadedmetadata = () => { const duration = Number.isFinite(video.duration) && video.duration > 0 ? video.duration : clip.targetDuration; video.playbackRate = Math.min(2, Math.max(0.5, duration / clip.targetDuration)); video.play().catch(() => {}); const label = document.querySelector('[data-bind="resultBeatLabel"]'); if (label) label.textContent = `${clip.id} 路 ${clip.targetDuration.toFixed(2)}s`; state.resultTimer = window.setTimeout(() => { state.resultIndex += 1; playClip(); }, clip.targetDuration * 1000); }; }; playClip(); } render = function enhancedRender() { baseRender(); renderRealAssets(); }; showScreen = function enhancedShowScreen(name) { baseShowScreen(name); if (name === "result") window.setTimeout(playSequence, 120); }; document.addEventListener("click", (event) => { const actionNode = event.target.closest("[data-action]"); const action = actionNode?.dataset.action; if (!action) return; if (action === "filter-assets") { event.stopImmediatePropagation(); state.assetFilter = actionNode.dataset.assetFilter; render(); return; } if (action === "toggle-asset") { event.stopImmediatePropagation(); const id = event.target.closest("[data-asset-id]")?.dataset.assetId; if (!id) return; if (state.selectedAssetIds.has(id)) { state.selectedAssetIds.delete(id); } else if (state.selectedAssetIds.size >= MAX_SELECTION) { showToast(`鏈€澶氶€夋嫨 ${MAX_SELECTION} 寮燻); return; } else { state.selectedAssetIds.add(id); } state.filled = Math.min(state.total, Math.max(state.filled, state.selectedAssetIds.size)); render(); return; } if (action === "select-all-assets") { event.stopImmediatePropagation(); const visibleAssets = REAL_ASSETS.filter((asset) => state.assetFilter === "all" || String(asset.category) === state.assetFilter); for (const asset of visibleAssets) { if (state.selectedAssetIds.size >= MAX_SELECTION) break; state.selectedAssetIds.add(asset.id); } state.filled = Math.min(state.total, MAX_SELECTION); showToast(`宸查€夋嫨 ${state.selectedAssetIds.size}/${MAX_SELECTION}`); render(); return; } if (action === "confirm-assets") { event.stopImmediatePropagation(); if (!state.selectedAssetIds.size) { showToast("璇疯嚦灏戦€夋嫨 1 寮犵礌鏉?); return; } if (state.activeSegment) state.replacedSegments.add(state.activeSegment); state.filled = Math.min(state.total, Math.max(state.filled, state.selectedAssetIds.size)); showToast("宸叉浛鎹㈢礌鏉愬苟鍚屾瑙嗛鍒囩墖"); showScreen("preview"); return; } if (action === "start-render-from-preview") { event.stopImmediatePropagation(); if (!state.selectedAssetIds.size) { showToast("璇峰厛鏇挎崲鎴栭€夋嫨绱犳潗"); return; } buildRenderQueue(); showScreen("confirm"); return; } if (action === "confirm-cellular") { buildRenderQueue(); } if (action === "play-preview") { event.stopImmediatePropagation(); const video = document.querySelector('[data-bind="previewPlayer"] video'); if (video) video.paused ? video.play().catch(() => {}) : video.pause(); showToast("姝ｅ湪棰勮妯℃澘鐗囨"); return; } if (action === "play-result") { event.stopImmediatePropagation(); playSequence(); } }, true); render(); </script> </body> </html>