{% extends "base.html" %}

{% block title %}JJYB_AI智剪 - 视频编辑{% endblock %}

{% block content %}
<!-- 页面加载动画 -->
<div id="page-loader" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #1a1d2e; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column;">
    <style>
        .loader-spinner {
            width: 60px;
            height: 60px;
            border: 4px solid rgba(102, 126, 234, 0.2);
            border-top-color: #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .loader-text {
            color: #667eea;
            font-size: 16px;
            margin-top: 20px;
            animation: pulse 1.5s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
        @keyframes subtitleFadeIn {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }
    </style>
    <div class="loader-spinner"></div>
    <div class="loader-text">正在加载编辑器...</div>
    <div style="color: #888; font-size: 12px; margin-top: 10px;">首次加载可能需要几秒钟</div>
</div>

<script>
// 页面加载完成后移除加载动画
window.addEventListener('load', function() {
    setTimeout(function() {
        const loader = document.getElementById('page-loader');
        if (loader) {
            loader.style.opacity = '0';
            loader.style.transition = 'opacity 0.5s ease';
            setTimeout(() => loader.remove(), 500);
        }
    }, 300);
});

// 3秒后强制移除（防止卡住）
setTimeout(function() {
    const loader = document.getElementById('page-loader');
    if (loader) loader.remove();
}, 3000);

</script>

<!-- 所有核心函数将在页面底部的extra_js块中定义，避免语法错误影响 -->
<script>
console.log('✅ 页面基础脚本加载完成');
</script>
<!-- 先加载修复脚本：提供兜底函数，后续内联脚本会覆盖为更完整实现 -->
<script src="{{ url_for('static', filename='js/editor-fixes.js') }}"></script>

<script>
// 编辑器右侧栏默认折叠由设置项控制：
// - 当偏好为“自动折叠”时：进入编辑器即折叠
// - 当偏好为“记住上次状态”时：遵循 localStorage 中的 rightPanelCollapsed 值
(function(){
  const LS_KEY_STATE = 'rightPanelCollapsed';
  const LS_KEY_PREF = 'editorAutoCollapsePreference'; // '1' 自动折叠；'0' 记住上次
  try {
    const pref = localStorage.getItem(LS_KEY_PREF);
    if (pref === null) {
      // 首次默认开启自动折叠，兼容之前的行为
      localStorage.setItem(LS_KEY_PREF, '1');
      localStorage.setItem(LS_KEY_STATE, '1');
    } else if (pref === '1') {
      localStorage.setItem(LS_KEY_STATE, '1');
    }
  } catch(_) {}
  // 与后端同步最新设置（若用户在设置页修改过）
  try {
    fetch('/api/settings/editor_auto_collapse_right_panel')
      .then(r => r.json())
      .then(res => {
        if (!res || res.code !== 0) return;
        const val = res.data && res.data.value;
        const auto = (val === true || val === '1' || val === 1 || (typeof val === 'string' && val.toLowerCase() === 'true'));
        try { localStorage.setItem(LS_KEY_PREF, auto ? '1' : '0'); } catch(_) {}
        if (auto) {
          try { localStorage.setItem(LS_KEY_STATE, '1'); } catch(_) {}
          if (document.body && !document.body.classList.contains('right-panel-collapsed')) {
            document.body.classList.add('right-panel-collapsed');
          }
        }
      })
      .catch(()=>{});
  } catch(_) {}
})();
</script>


<div class="layui-row layui-col-space6" style="min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 72px;">

    <!-- 现代化顶部工具栏 -->
    <div class="layui-col-md12">
        <style>
            .modern-toolbar {
                background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
                backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
            .project-info-card {
                background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
                border: 1px solid rgba(102, 126, 234, 0.3);
                border-radius: 12px;
                padding: 16px 20px;
                transition: all 0.3s ease;
            }
            .project-info-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
            }
            .stats-badge {
                display: inline-flex;
                align-items: center;
                padding: 6px 12px;
                border-radius: 20px;
                font-size: 12px;
                font-weight: 500;
                transition: all 0.3s ease;
                backdrop-filter: blur(10px);
            }
            .stats-badge:hover {
                transform: scale(1.05);
            }
            .btn-group {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 6px;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 12px;
                flex-wrap: wrap;
                min-width: 0;
                overflow: hidden;
            }
            .toolbar-btn {
                padding: 10px 16px;
                border-radius: 10px;
                font-size: 14px;
                font-weight: 500;
                transition: all 0.3s ease;
                border: 1px solid rgba(255, 255, 255, 0.1);
                background: rgba(255, 255, 255, 0.05);
            }
            .toolbar-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
                border-color: rgba(102, 126, 234, 0.5);
            }
            .toolbar-btn-primary {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                border: none;
                color: white;
            }
            .toolbar-btn-export {
                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                border: none;
                color: white;
            }
            .divider {
                width: 1px;
                height: 32px;
                background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2), transparent);
                margin: 0 4px;
            }
            .timecode-display {
                background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
                padding: 8px 16px;
                border-radius: 10px;
                border: 1px solid rgba(102, 126, 234, 0.3);
                white-space: nowrap;
            }
        </style>

        <div class="modern-toolbar rounded-2xl p-5 mb-3 animate-fade-in">
            <div class="toolbar-grid" style="display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center;">
                <!-- 左：项目信息卡片 -->
                <div class="project-info-card flex flex-col gap-4" style="min-width:0;">
                    <div>
                        <div class="flex items-center gap-3">
                            <i class="fa fa-folder-open text-primary text-xl"></i>
                            <h2 class="text-lg font-bold text-text-primary cursor-pointer hover:text-primary transition-colors" style="max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                ondblclick="editProjectName()"
                                title="双击编辑项目名"
                                id="project-name-display">当前项目</h2>
                        </div>
                        <p class="text-xs text-text-secondary mt-2 flex items-center gap-2">
                            <i class="fa fa-clock-o"></i>
                            <span id="project-last-edit">最后编辑: 2024-01-15 14:30</span>
                        </p>
                    </div>

                    <div style="height:1px; width:100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent); margin: 4px 0;"></div>

                    <!-- 素材统计 -->
                    <div class="flex items-center gap-3">
                        <div class="stats-badge" style="background: rgba(102, 126, 234, 0.2); color: #667eea;">
                            <i class="fa fa-film mr-2"></i>
                            <span id="video-count">0</span> 视频
                        </div>
                        <div class="stats-badge" style="background: rgba(245, 87, 108, 0.2); color: #f5576c;">
                            <i class="fa fa-music mr-2"></i>
                            <span id="audio-count">0</span> 音频
                        </div>
                        <div class="stats-badge" style="background: rgba(52, 211, 153, 0.2); color: #34d399;">
                            <i class="fa fa-image mr-2"></i>
                            <span id="image-count">0</span> 图片
                        </div>
                    </div>
                    <!-- 操作排版：统一三列布局，防溢出/不重叠/对齐 -->
                    <div style="display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px 16px; align-items: center; width: 100%; min-width: 0;">
                        <!-- 左：快捷导航 -->
                        <div class="btn-group" style="min-width:0;">
                            <button class="toolbar-btn" onclick="window.location.href='/'" title="返回首页">
                                <i class="fa fa-home mr-2"></i>首页
                            </button>
                            <button class="toolbar-btn" onclick="window.location.href='/commentary'" title="原创解说">
                                <i class="fa fa-microphone mr-2"></i>解说
                            </button>
                            <button class="toolbar-btn" onclick="window.location.href='/remix'" title="混剪模式">
                                <i class="fa fa-scissors mr-2"></i>混剪
                            </button>
                            <button class="toolbar-btn" onclick="window.location.href='/voiceover'" title="AI配音">
                                <i class="fa fa-volume-up mr-2"></i>配音
                            </button>
                        </div>

                        <!-- 中：播放控制/时间码（居中对齐） -->
                        <div class="btn-group" style="min-width:0; justify-content: center;">
                            <button id="loop-btn" class="toolbar-btn" aria-pressed="false" onclick="console.log('🔘 点击循环按钮'); if(typeof toggleLoop === 'function') toggleLoop(); else alert('功能加载中，请稍候...');" title="循环播放">
                                <i class="fa fa-repeat"></i>
                            </button>
                            <button class="toolbar-btn" onclick="console.log('🔘 点击刷新按钮'); if(typeof refreshPreview === 'function') refreshPreview(); else alert('功能加载中，请稍候...');" title="刷新预览">
                                <i class="fa fa-refresh"></i>
                            </button>
                            <div class="divider"></div>
                            <div class="timecode-display">
                                <span class="text-xs text-text-secondary mr-2">时间码</span>
                                <span class="text-sm text-primary font-mono font-bold" id="timecode-display">00:00:00:00</span>
                            </div>
                        </div>

                        <!-- 右：编辑操作（右对齐） -->
                        <div class="btn-group" style="min-width:0; justify-content: flex-end;">
                            <button class="toolbar-btn" onclick="console.log('🔘 点击新建按钮'); if(typeof newProject === 'function') newProject(); else alert('功能加载中，请稍候...');" title="新建项目 (Ctrl+N)">
                                <i class="fa fa-plus mr-2"></i>新建
                            </button>
                            <div class="divider"></div>
                            <button id="undo-btn" class="toolbar-btn opacity-50 cursor-not-allowed" disabled aria-disabled="true" onclick="console.log('🔘 点击撤销按钮'); if(typeof undoEdit === 'function') undoEdit(); else alert('功能加载中，请稍候...');" title="撤销 (Ctrl+Z)">
                                <i class="fa fa-undo mr-2"></i>撤销
                            </button>
                            <button id="redo-btn" class="toolbar-btn opacity-50 cursor-not-allowed" disabled aria-disabled="true" onclick="console.log('🔘 点击重做按钮'); if(typeof redoEdit === 'function') redoEdit(); else alert('功能加载中，请稍候...');" title="重做 (Ctrl+Y)">
                                <i class="fa fa-repeat mr-2"></i>重做
                            </button>
                            <div class="divider"></div>
                            <button class="toolbar-btn toolbar-btn-primary" onclick="console.log('🔘 点击保存按钮'); if(typeof saveProject === 'function') saveProject(); else alert('功能加载中，请稍候...');" title="保存项目 (Ctrl+S)">
                                <i class="fa fa-save mr-2"></i>保存
                            </button>
                            <button class="toolbar-btn toolbar-btn-export" onclick="console.log('🔘 点击导出按钮'); if(typeof exportVideo === 'function') exportVideo(); else alert('功能加载中，请稍候...');" title="导出视频">
                                <i class="fa fa-download mr-2"></i>导出
                            </button>
                        </div>
                    </div>

                </div>

                <!-- 右：将两个方框横向并列到这里，并去掉下方空白 -->
                <div class="flex items-center justify-end flex-wrap gap-2" style="min-width:0; display:none;" aria-hidden="true" tabindex="-1">
                    <!-- 快捷导航 -->
                    <div class="btn-group" style="min-width:0;">
                        <button class="toolbar-btn" onclick="window.location.href='/'" title="返回首页">
                            <i class="fa fa-home mr-2"></i>首页
                        </button>
                        <button class="toolbar-btn" onclick="window.location.href='/commentary'" title="原创解说">
                            <i class="fa fa-microphone mr-2"></i>解说
                        </button>
                        <button class="toolbar-btn" onclick="window.location.href='/remix'" title="混剪模式">
                            <i class="fa fa-scissors mr-2"></i>混剪
                        </button>
                        <button class="toolbar-btn" onclick="window.location.href='/voiceover'" title="AI配音">
                            <i class="fa fa-volume-up mr-2"></i>配音
                        </button>
                    </div>

                    <div class="divider"></div>

                    <!-- 播放控制/时间码（原左下方框） -->
                    <div class="btn-group" style="min-width:0;">
                        <button id="loop-btn-legacy" class="toolbar-btn" aria-pressed="false" onclick="console.log('🔘 点击循环按钮'); if(typeof toggleLoop === 'function') toggleLoop(); else alert('功能加载中，请稍候...');" title="循环播放">
                            <i class="fa fa-repeat"></i>
                        </button>
                        <button class="toolbar-btn" onclick="console.log('🔘 点击刷新按钮'); if(typeof refreshPreview === 'function') refreshPreview(); else alert('功能加载中，请稍候...');" title="刷新预览">
                            <i class="fa fa-refresh"></i>
                        </button>
                        <div class="divider"></div>
                        <div class="timecode-display">
                            <span class="text-xs text-text-secondary mr-2">时间码</span>
                            <span class="text-sm text-primary font-mono font-bold" id="timecode-display-legacy">00:00:00:00</span>
                        </div>
                    </div>

                    <div class="divider"></div>

                    <!-- 编辑操作（原右下方框） -->
                    <div class="btn-group" style="min-width:0;">
                        <button class="toolbar-btn" onclick="console.log('🔘 点击新建按钮'); if(typeof newProject === 'function') newProject(); else alert('功能加载中，请稍候...');" title="新建项目 (Ctrl+N)">
                            <i class="fa fa-plus mr-2"></i>新建
                        </button>
                        <div class="divider"></div>
                        <button id="undo-btn-legacy" class="toolbar-btn opacity-50 cursor-not-allowed" disabled aria-disabled="true" onclick="console.log('🔘 点击撤销按钮'); if(typeof undoEdit === 'function') undoEdit(); else alert('功能加载中，请稍候...');" title="撤销 (Ctrl+Z)">
                            <i class="fa fa-undo mr-2"></i>撤销
                        </button>
                        <button id="redo-btn-legacy" class="toolbar-btn opacity-50 cursor-not-allowed" disabled aria-disabled="true" onclick="console.log('🔘 点击重做按钮'); if(typeof redoEdit === 'function') redoEdit(); else alert('功能加载中，请稍候...');" title="重做 (Ctrl+Y)">
                            <i class="fa fa-repeat mr-2"></i>重做
                        </button>
                        <div class="divider"></div>
                        <button class="toolbar-btn toolbar-btn-primary" onclick="console.log('🔘 点击保存按钮'); if(typeof saveProject === 'function') saveProject(); else alert('功能加载中，请稍候...');" title="保存项目 (Ctrl+S)">
                            <i class="fa fa-save mr-2"></i>保存
                        </button>
                        <button class="toolbar-btn toolbar-btn-export" onclick="console.log('🔘 点击导出按钮'); if(typeof exportVideo === 'function') exportVideo(); else alert('功能加载中，请稍候...');" title="导出视频">
                            <i class="fa fa-download mr-2"></i>导出
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主编辑区域 -->
    <div class="layui-col-md12">
        <div class="layui-row layui-col-space6" style="position: relative; overflow: visible;">

            <!-- 左侧：素材库 -->
            <div id="index-left-column" class="layui-col-md2" style="position: relative; z-index: 2; max-width: 100%; min-width: 260px; overflow: visible;">
                <div class="glass-card rounded-xl h-[calc(100vh-240px)] flex flex-col animate-slide-in-left" style="position: relative; max-width: 100%; box-sizing: border-box; padding-bottom: 32px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;">

                    <!-- 素材库标题 -->
                    <div class="p-4 border-b border-border-color">
                        <div class="flex items-center justify-between flex-wrap gap-2">
                            <h3 class="text-sm font-medium text-text-primary">素材库</h3>
                            <div class="flex items-center space-x-2">
                                <button class="operation-btn w-8 h-8 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="importMedia()">
                                    <i class="fa fa-plus text-sm"></i>
                                    <span class="tooltip-text">导入素材</span>
                                </button>
                                <button class="operation-btn w-8 h-8 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="refreshMaterials()">
                                    <i class="fa fa-refresh text-sm"></i>
                                    <span class="tooltip-text">刷新素材库</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 素材分类 -->
                    <div class="p-3 border-b border-border-color">
                        <div class="flex items-center space-x-2">
                            <button class="material-filter-btn operation-btn flex-1 py-2 bg-gradient-to-r from-primary/20 to-secondary/20 text-primary border border-primary/30 rounded-lg text-xs hover:bg-gradient-to-r from-primary/30 to-secondary/30 active" data-type="all" onclick="filterMaterials('all')">
                                全部
                            </button>
                            <button class="material-filter-btn operation-btn w-8 h-8 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" data-type="video" onclick="filterMaterials('video')">
                                <i class="fa fa-film"></i>
                                <span class="tooltip-text">视频</span>
                            </button>
                            <button class="material-filter-btn operation-btn w-8 h-8 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" data-type="audio" onclick="filterMaterials('audio')">
                                <i class="fa fa-music"></i>
                                <span class="tooltip-text">音频</span>
                            </button>
                            <button class="material-filter-btn operation-btn w-8 h-8 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" data-type="image" onclick="filterMaterials('image')">
                                <i class="fa fa-image"></i>
                                <span class="tooltip-text">图片</span>
                            </button>
                        </div>
                    </div>

                    <!-- 素材搜索 -->
                    <div class="p-3 border-b border-border-color">
                        <div class="relative">
                            <input type="text" id="material-search-input" placeholder="搜索素材..." class="w-full px-3 py-2 pl-8 glass-input rounded-lg text-sm text-text-primary focus:border-primary focus:outline-none" oninput="searchMaterials(this.value)">
                            <i class="fa fa-search absolute left-3 top-3 text-text-secondary"></i>
                        </div>
                    </div>

                    <!-- 素材列表 -->
                    <div class="flex-1 p-3">
                        <div id="materials-list" class="grid grid-cols-2 gap-3">
                            <!-- 添加素材按钮 -->
                            <div class="material-item glass-card rounded-lg p-3 text-center cursor-pointer hover-scale" onclick="importMedia()">
                                <div class="w-full h-20 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-lg mb-2 flex items-center justify-center">
                                    <i class="fa fa-plus text-primary text-xl"></i>
                                </div>
                                <p class="text-xs text-text-secondary truncate">添加素材</p>
                            </div>

                        </div>
                    </div>

                    <!-- AI功能快捷按钮 - 折叠属性时自动隐藏，避免与底部面板重叠 -->
                    <div id="index-left-ai-tools" class="p-2 border-t border-border-color" style="margin-bottom: 12px;">
                        <h4 class="text-xs font-medium text-text-secondary mb-2 uppercase tracking-wider">AI工具</h4>
                        <div class="space-y-2" style="max-width: 100%; box-sizing: border-box;">
                            <button class="operation-btn w-full flex items-center justify-between px-3 py-2 glass-card rounded-lg text-sm hover:border-primary/30" onclick="openAIVoice()" style="white-space: nowrap; overflow: hidden; box-sizing: border-box;">
                                <span class="flex items-center" style="overflow: hidden; text-overflow: ellipsis;">
                                    <i class="fa fa-microphone mr-2 text-primary"></i>
                                    AI配音
                                </span>
                                <i class="fa fa-chevron-right text-text-secondary" style="flex-shrink: 0;"></i>
                            </button>
                            <button class="operation-btn w-full flex items-center justify-between px-3 py-2 glass-card rounded-lg text-sm hover:border-primary/30" onclick="openAISubtitle()" style="white-space: nowrap; overflow: hidden; box-sizing: border-box;">
                                <span class="flex items-center" style="overflow: hidden; text-overflow: ellipsis;">
                                    <i class="fa fa-font mr-2 text-secondary"></i>
                                    自动字幕
                                </span>
                                <i class="fa fa-chevron-right text-text-secondary" style="flex-shrink: 0;"></i>
                            </button>
                            <button class="operation-btn w-full flex items-center justify-between px-3 py-2 glass-card rounded-lg text-sm hover:border-primary/30" onclick="openAIClip()" style="white-space: nowrap; overflow: hidden; box-sizing: border-box;">
                                <span class="flex items-center" style="overflow: hidden; text-overflow: ellipsis;">
                                    <i class="fa fa-magic mr-2 text-accent"></i>
                                    智能剪辑
                                </span>
                                <i class="fa fa-chevron-right text-text-secondary" style="flex-shrink: 0;"></i>
                            </button>
                            <button class="operation-btn w-full flex items-center justify-between px-3 py-2 glass-card rounded-lg text-sm hover:border-primary/30" onclick="openAIEnhance()" style="white-space: nowrap; overflow: hidden; box-sizing: border-box;">
                                <span class="flex items-center" style="overflow: hidden; text-overflow: ellipsis;">
                                    <i class="fa fa-bolt mr-2 text-yellow-400"></i>
                                    画质增强
                                </span>
                                <i class="fa fa-chevron-right text-text-secondary" style="flex-shrink: 0;"></i>
                            </button>
                            <button class="operation-btn w-full flex items-center justify-between px-3 py-2 glass-card rounded-lg text-sm hover:border-primary/30" onclick="openAIVision()" style="white-space: nowrap; overflow: hidden; box-sizing: border-box;">
                                <span class="flex items-center" style="overflow: hidden; text-overflow: ellipsis;">
                                    <i class="fa fa-eye mr-2 text-green-400"></i>
                                    画面分析（Qwen-VL）
                                </span>
                                <i class="fa fa-chevron-right text-text-secondary" style="flex-shrink: 0;"></i>
                            </button>

                        </div>
                    </div>

                </div>
            </div>

            <!-- 中间：视频预览和时间轴 -->
            <div class="layui-col-md7" style="position: relative; z-index: 0; min-width: 0;">
                <div class="flex flex-col h-[calc(100vh-240px)]">

                    <!-- 视频预览区域 -->
                    <div class="glass-card rounded-xl mb-6 flex-1 animate-scale-in">
                        <div class="p-4 border-b border-border-color">
                            <div class="flex items-center justify-between flex-wrap gap-2">
                                <h3 class="text-sm font-medium text-text-primary">视频预览</h3>
                                <div class="flex items-center flex-wrap gap-2">
                                    <div class="flex items-center space-x-2">
                                        <span class="text-xs text-text-secondary">画质:</span>
                                        <select id="quality-select" class="operation-btn px-2 py-1 bg-dark-lighter text-text-secondary rounded-lg text-xs hover:bg-dark-lighter/80" onchange="changeQuality(this.value)">
                                            <option value="1080">1080p</option>
                                            <option value="720" selected>720p</option>
                                            <option value="480">480p</option>
                                        </select>
                                    </div>
                                    <button class="operation-btn w-8 h-8 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleFullscreen()">
                                        <i class="fa fa-expand"></i>
                                        <span class="tooltip-text">全屏预览</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 预览窗口 -->
                        <div class="relative p-4 flex items-center justify-center bg-black rounded-b-xl">
                            <div id="video-preview-container" class="relative w-full aspect-video bg-dark rounded-xl flex items-center justify-center overflow-hidden">
                                <!-- 视频播放器 -->
                                <video id="preview-video" class="w-full h-full object-contain rounded-xl" controls>
                                    <source src="" type="video/mp4">
                                </video>

                                <!-- 空状态提示 -->
                                <div id="empty-state-overlay" class="absolute inset-0 bg-gradient-to-br from-dark/95 to-dark-lighter/95 rounded-xl flex items-center justify-center">
                                    <div class="text-center p-8">
                                        <div class="w-24 h-24 mx-auto mb-6 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl flex items-center justify-center">
                                            <i class="fa fa-film text-primary text-5xl"></i>
                                        </div>
                                        <h3 class="text-xl font-bold text-text-primary mb-3">📹 开始创作您的视频</h3>
                                        <p class="text-text-secondary mb-6 text-sm">
                                            从左侧素材库拖拽素材到时间轴<br>
                                            或点击下方按钮导入媒体文件
                                        </p>
                                        <button onclick="importMedia()" class="px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-xl font-medium hover:shadow-lg hover:scale-105 transition-all">
                                            <i class="fa fa-plus mr-2"></i>导入媒体文件
                                        </button>
                                        <p class="text-text-secondary/70 text-xs mt-4">
                                            支持 MP4、MOV、AVI、MKV 等常见视频格式
                                        </p>
                                    </div>
                                </div>

                                <!-- 播放按钮覆盖层 -->
                                <div id="play-overlay" class="absolute inset-0 bg-black/30 rounded-xl flex items-center justify-center cursor-pointer hover:bg-black/20 transition-colors hidden" onclick="togglePlay()">
                                    <div class="w-20 h-20 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center hover:scale-105 transition-transform shadow-button">
                                        <i class="fa fa-play text-white text-2xl ml-1"></i>
                                    </div>
                                </div>

                                <!-- 加载中状态 -->
                                <div id="loading-overlay" class="absolute inset-0 bg-black/50 rounded-xl flex items-center justify-center hidden">
                                    <div class="text-center">
                                        <div class="loading-spinner mx-auto mb-3"></div>
                                        <p class="text-text-primary text-sm">加载中...</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 播放控制 -->
                        <div class="p-4 border-t border-border-color">
                            <div class="flex items-center justify-between flex-wrap gap-2">
                                <div class="flex items-center space-x-4">
                                    <button id="play-btn" aria-pressed="false" class="operation-btn w-10 h-10 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="togglePlay()">
                                        <i class="fa fa-play text-sm ml-0.5"></i>
                                        <span class="tooltip-text">播放/暂停</span>
                                    </button>
                                    <button class="operation-btn w-10 h-10 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="stopPlay()">
                                        <i class="fa fa-stop text-sm"></i>
                                        <span class="tooltip-text">停止</span>
                                    </button>
                                    <span class="text-xs text-text-secondary">
                                        <span id="current-time">00:00</span> / <span id="total-time">00:00</span>
                                    </span>
                                </div>

                                <div class="flex items-center space-x-4">
                                    <div class="flex items-center space-x-2">
                                        <span class="text-xs text-text-secondary">速度:</span>
                                        <select class="operation-btn px-2 py-1 bg-dark-lighter text-text-secondary rounded-lg text-xs hover:bg-dark-lighter/80" onchange="changePlaybackRate(this.value)">
                                            <option value="0.5">0.5x</option>
                                            <option value="0.75">0.75x</option>
                                            <option value="1" selected>1x</option>
                                            <option value="1.25">1.25x</option>
                                            <option value="1.5">1.5x</option>
                                            <option value="2">2x</option>
                                        </select>
                                    </div>

                                    <div class="flex items-center space-x-2">
                                        <button class="operation-btn w-8 h-8 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleMute()">
                                            <i class="fa fa-volume-up text-sm"></i>
                                            <span class="tooltip-text">静音</span>
                                        </button>
                                        <input type="range" class="w-20 accent-primary" min="0" max="100" value="100" onchange="changeVolume(this.value)">
                                    </div>
                                </div>
                            </div>

                            <!-- 进度条 -->
                            <div class="mt-3 relative">
                                <div class="w-full h-2 bg-dark-lighter rounded-full cursor-pointer" onclick="seekVideo(event)">
                                    <div id="progress-bar" class="h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-300" style="width: 0%"></div>
                                    <div id="progress-handle" class="absolute top-1/2 transform -translate-y-1/2 w-4 h-4 bg-white rounded-full shadow-lg cursor-pointer hover:scale-110 transition-transform" style="left: 0%" onclick="seekVideo(event)"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 时间轴区域 -->
                    <div class="glass-card rounded-xl flex-1 animate-slide-in-right">
                        <div class="p-4 border-b border-border-color">
                            <div class="flex items-center justify-between flex-wrap gap-2">
                                <h3 class="text-sm font-medium text-text-primary">时间轴</h3>
                                <div class="flex items-center flex-wrap gap-2">
                                    <div class="flex items-center space-x-2">
                                        <button class="operation-btn w-8 h-8 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="zoomInTimeline()">
                                            <i class="fa fa-search-plus text-sm"></i>
                                            <span class="tooltip-text">放大</span>
                                        </button>
                                        <button class="operation-btn w-8 h-8 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="zoomOutTimeline()">
                                            <i class="fa fa-search-minus text-sm"></i>
                                            <span class="tooltip-text">缩小</span>
                                        </button>
                                        <span class="text-xs text-text-secondary" id="timeline-zoom">100%</span>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <button class="operation-btn w-8 h-8 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" aria-pressed="false" onclick="toggleRuler()">
                                            <i class="fa fa-bullseye text-sm"></i>
                                            <span class="tooltip-text">标尺</span>
                                        </button>
                                        <button class="operation-btn w-8 h-8 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" aria-pressed="false" onclick="toggleGrid()">
                                            <i class="fa fa-th text-sm"></i>
                                            <span class="tooltip-text">网格</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 时间轴时间标记 -->
                        <div class="px-4 py-2 bg-dark-lighter border-b border-border-color">
                            <div class="flex items-center space-x-0" id="timeline-time-markers">
                                <!-- 时间标记将通过JavaScript生成 -->
                            </div>
                        </div>

                        <!-- 时间轴轨道 -->
                        <div class="relative overflow-auto p-4 h-[calc(100%-200px)]">
                            <!-- 播放头 -->
                            <div id="timeline-playhead" class="timeline-playhead absolute top-0 bottom-0 left-0 z-20"></div>

                            <!-- 视频轨道 -->
                            <div class="timeline-track mb-4 p-3 rounded-xl">
                                <div class="flex items-center justify-between mb-3">
                                    <div class="flex items-center space-x-3">
                                        <span class="text-xs font-medium text-text-primary flex items-center">
                                            <i class="fa fa-film mr-2 text-primary"></i>
                                            视频轨道 1
                                        </span>
                                        <div class="flex items-center space-x-1">
                                            <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackMute('video1')">
                                                <i class="fa fa-volume-up text-xs"></i>
                                                <span class="tooltip-text">静音</span>
                                            </button>
                                            <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackLock('video1')">
                                                <i class="fa fa-lock text-xs"></i>
                                                <span class="tooltip-text">锁定</span>
                                            </button>
                                        </div>
                                    </div>
                                    <button class="operation-btn px-3 py-1 bg-primary/20 text-primary border border-primary/30 rounded-lg text-xs hover:bg-primary/30 tooltip" onclick="addVideoTrack()">
                                        <i class="fa fa-plus mr-1"></i>添加轨道
                                        <span class="tooltip-text">添加视频轨道</span>
                                    </button>
                                </div>
                                <div id="video-track-1" class="relative h-20 timeline-track rounded-lg border border-border-color flex items-center px-3 min-w-[2500px]">
                                    <div class="text-xs text-text-secondary absolute left-3">拖放视频到此处</div>
                                </div>
                            </div>

                            <!-- 音频轨道 -->
                            <div class="timeline-track mb-4 p-3 rounded-xl">
                                <div class="flex items-center justify-between mb-3">
                                    <div class="flex items-center space-x-3">
                                        <span class="text-xs font-medium text-text-primary flex items-center">
                                            <i class="fa fa-music mr-2 text-secondary"></i>
                                            音频轨道 1
                                        </span>
                                        <div class="flex items-center space-x-1">
                                            <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackMute('audio1')">
                                                <i class="fa fa-volume-up text-xs"></i>
                                                <span class="tooltip-text">静音</span>
                                            </button>
                                            <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackLock('audio1')">
                                                <i class="fa fa-lock text-xs"></i>
                                                <span class="tooltip-text">锁定</span>
                                            </button>
                                        </div>
                                    </div>
                                    <button class="operation-btn px-3 py-1 bg-secondary/20 text-secondary border border-secondary/30 rounded-lg text-xs hover:bg-secondary/30 tooltip" onclick="addAudioTrack()">
                                        <i class="fa fa-plus mr-1"></i>添加轨道
                                        <span class="tooltip-text">添加音频轨道</span>
                                    </button>
                                </div>
                                <div id="audio-track-1" class="relative h-20 timeline-track rounded-lg border border-border-color flex items-center px-3 min-w-[2500px]">
                                    <div class="text-xs text-text-secondary absolute left-3">拖放音频到此处</div>
                                </div>
                            </div>

                            <!-- 文字轨道 -->
                            <div class="timeline-track p-3 rounded-xl">
                                <div class="flex items-center justify-between mb-3">
                                    <div class="flex items-center space-x-3">
                                        <span class="text-xs font-medium text-text-primary flex items-center">
                                            <i class="fa fa-font mr-2 text-accent"></i>
                                            文字轨道 1
                                        </span>
                                        <div class="flex items-center space-x-1">
                                            <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackMute('text1')">
                                                <i class="fa fa-eye text-xs"></i>
                                                <span class="tooltip-text">隐藏</span>
                                            </button>
                                            <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackLock('text1')">
                                                <i class="fa fa-lock text-xs"></i>
                                                <span class="tooltip-text">锁定</span>
                                            </button>
                                        </div>
                                    </div>
                                    <button class="operation-btn px-3 py-1 bg-accent/20 text-accent border border-accent/30 rounded-lg text-xs hover:bg-accent/30 tooltip" onclick="addTextTrack()">
                                        <i class="fa fa-plus mr-1"></i>添加轨道
                                        <span class="tooltip-text">添加文字轨道</span>
                                    </button>
                                </div>
                                <div id="text-track-1" class="relative h-20 timeline-track rounded-lg border border-border-color flex items-center px-3 min-w-[2500px]">
                                    <div class="text-xs text-text-secondary absolute left-3">点击添加文字</div>
                                </div>
                            </div>

                        </div>

                        <!-- 编辑器功能按钮条（与底部衔接，不相交不覆盖） -->
                        <div id="editor-inspector-actions" class="px-4 py-2 bg-dark-lighter border-t border-border-color" style="position: relative; z-index: 6;">
                            <div class="flex items-center justify-center flex-wrap gap-4">
                                <button id="toggle-sidepanel-btn" class="operation-btn px-4 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="openToolsPanel()" title="统计与快捷">
                                    <i class="fa fa-th-large mr-2"></i>统计与快捷
                                </button>

                                <button class="operation-btn px-4 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="openEditorPanel('clip')">
                                    <i class="fa fa-sliders mr-2"></i>剪辑属性
                                </button>
                                <button class="operation-btn px-4 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="openEditorPanel('color')">
                                    <i class="fa fa-adjust mr-2"></i>色彩校正
                                </button>
                                <button class="operation-btn px-4 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="openEditorPanel('export')">
                                    <i class="fa fa-download mr-2"></i>导出设置
                                </button>
                                <button class="operation-btn px-4 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="openEditorPanel('history')">
                                    <i class="fa fa-history mr-2"></i>历史操作
                                </button>
                            </div>
                        </div>

                        <!-- 时间轴工具栏（上移避免与底部框相交） -->
                        <div class="p-4 border-t border-border-color" style="margin-bottom: 14px;">
                            <div class="flex items-center justify-between flex-wrap gap-2">
                                <div class="flex items-center flex-wrap gap-2">
                                    <button class="operation-btn px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30 tooltip" onclick="cutClip()">
                                        <i class="fa fa-cut mr-1"></i>剪切
                                        <span class="tooltip-text">剪切 (Ctrl+X)</span>
                                    </button>
                                    <button class="operation-btn px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30 tooltip" onclick="copyClip()">
                                        <i class="fa fa-copy mr-1"></i>复制
                                        <span class="tooltip-text">复制 (Ctrl+C)</span>
                                    </button>
                                    <button class="operation-btn px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30 tooltip" onclick="pasteClip()">
                                        <i class="fa fa-paste mr-1"></i>粘贴
                                        <span class="tooltip-text">粘贴 (Ctrl+V)</span>
                                    </button>
                                    <button class="operation-btn px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30 tooltip" onclick="deleteClip()">
                                        <i class="fa fa-trash mr-1"></i>删除
                                        <span class="tooltip-text">删除 (Del)</span>
                                    </button>
                                    <button class="operation-btn px-3 py-2 bg-warning/20 text-warning border border-warning/30 rounded-lg text-xs hover:bg-warning/30 tooltip" onclick="splitClip()">
                                        <i class="fa fa-scissors mr-1"></i>分割
                                        <span class="tooltip-text">分割素材 (S)</span>
                                    </button>
                                    <button class="operation-btn px-3 py-2 bg-success/20 text-success border border-success/30 rounded-lg text-xs hover:bg-success/30 tooltip" onclick="mergeClips()">
                                        <i class="fa fa-link mr-1"></i>合并
                                        <span class="tooltip-text">合并素材</span>
                                    </button>
                                    <button id="snap-btn" aria-pressed="false" class="operation-btn px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30 tooltip" onclick="toggleSnap()">
                                        <i class="fa fa-magnet mr-1"></i>吸附
                                        <span class="tooltip-text">开启/关闭吸附</span>
                                    </button>
                                </div>

                                <div class="flex items-center flex-wrap gap-2">
                                    <button class="operation-btn px-3 py-2 bg-primary/20 text-primary border border-primary/30 rounded-lg text-xs hover:bg-primary/30 tooltip" onclick="addTransition()">
                                        <i class="fa fa-exchange mr-1"></i>转场
                                        <span class="tooltip-text">添加转场效果</span>
                                    </button>
                                    <button class="operation-btn px-3 py-2 bg-secondary/20 text-secondary border border-secondary/30 rounded-lg text-xs hover:bg-secondary/30 tooltip" onclick="addEffect()">
                                        <i class="fa fa-magic mr-1"></i>特效
                                        <span class="tooltip-text">添加视频特效</span>
                                    </button>
                                    <button class="operation-btn px-3 py-2 bg-accent/20 text-accent border border-accent/30 rounded-lg text-xs hover:bg-accent/30 tooltip" onclick="addText()">
                                        <i class="fa fa-font mr-1"></i>文字
                                        <span class="tooltip-text">添加文字</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- 右侧：属性面板 -->
            <div id="index-right-panel-col" class="layui-col-md3" style="position: relative; z-index: 5; min-width: 320px; max-width: 400px; padding-right: 20px;">
                <div class="glass-card rounded-xl overflow-y-auto overflow-x-hidden animate-slide-in-right" style="max-height: calc(100dvh - 140px); width: 100%; box-sizing: border-box; padding: 0 0 24px 0; min-width: 320px; scrollbar-gutter: stable; background: transparent;">

                    <!-- 属性面板标题 -->
                    <div class="p-4 border-b border-border-color">
                        <div class="flex items-center justify-between">
                            <h3 class="text-sm font-medium text-text-primary">属性面板</h3>
                            <button class="operation-btn px-3 py-1 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="openPropertiesOverlay()" title="以浮层方式打开">
                                <i class="fa fa-external-link mr-1"></i>弹出浮层
                            </button>
                        </div>
                        <p class="text-xs text-text-secondary mt-1" id="selected-clip-name">未选中素材</p>
                    </div>



                    <!-- 位置和变换 -->
                    <div class="border-b border-border-color">
                        <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('transform')">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-text-primary flex items-center">
                                    <i class="fa fa-arrows mr-2 text-secondary"></i>
                                    位置和变换
                                </span>
                                <i class="fa fa-chevron-down text-text-secondary" id="transform-icon"></i>
                            </div>
                        </div>
                        <div id="transform-panel" class="p-4" style="display: none;">
                            <!-- 双列网格布局 -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; padding: 0; box-sizing: border-box; margin-bottom: 15px;">
                                <!-- 缩放 -->
                                <div style="padding: 10px; background: rgba(255,255,255,0.02); border-radius: 8px;">
                                    <div class="flex items-center justify-between mb-3">
                                        <label class="text-xs text-text-secondary font-medium">缩放</label>
                                        <span class="text-xs text-primary font-semibold" id="scale-value">100%</span>
                                    </div>
                                    <input type="range" class="w-full accent-primary" min="10" max="200" value="100"
                                           oninput="adjustScale(this.value)" id="scale-slider" style="height: 6px;">
                                </div>

                                <!-- 旋转 -->
                                <div style="padding: 10px; background: rgba(255,255,255,0.02); border-radius: 8px;">
                                    <div class="flex items-center justify-between mb-3">
                                        <label class="text-xs text-text-secondary font-medium">旋转</label>
                                        <span class="text-xs text-primary font-semibold" id="rotation-value">0°</span>
                                    </div>
                                    <input type="range" class="w-full accent-primary" min="0" max="360" value="0"
                                           oninput="adjustRotation(this.value)" id="rotation-slider" style="height: 6px;">
                                </div>

                                <!-- X位置 -->
                                <div style="padding: 10px; background: rgba(255,255,255,0.02); border-radius: 8px;">
                                    <div class="flex items-center justify-between mb-3">
                                        <label class="text-xs text-text-secondary font-medium">X位置</label>
                                        <span class="text-xs text-primary font-semibold" id="position-x-value">0</span>
                                    </div>
                                    <input type="range" class="w-full accent-primary" min="-500" max="500" value="0"
                                           oninput="adjustPositionX(this.value)" id="position-x-slider" style="height: 6px;">
                                </div>

                                <!-- Y位置 -->
                                <div style="padding: 10px; background: rgba(255,255,255,0.02); border-radius: 8px;">
                                    <div class="flex items-center justify-between mb-3">
                                        <label class="text-xs text-text-secondary font-medium">Y位置</label>
                                        <span class="text-xs text-primary font-semibold" id="position-y-value">0</span>
                                    </div>
                                    <input type="range" class="w-full accent-primary" min="-500" max="500" value="0"
                                           oninput="adjustPositionY(this.value)" id="position-y-slider" style="height: 6px;">
                                </div>
                            </div>

                            <!-- 重置按钮 -->
                            <button class="w-full px-3 py-2 bg-dark-lighter text-text-primary rounded-lg text-xs hover:bg-dark-lighter/80 mt-4"
                                    onclick="resetTransform()">
                                <i class="fa fa-refresh mr-1"></i>重置
                            </button>
                        </div>
                    </div>

                    <!-- 滤镜效果 -->
                    <div class="border-b border-border-color">
                        <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('filters')">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-text-primary flex items-center">
                                    <i class="fa fa-magic mr-2 text-accent"></i>
                                    滤镜效果
                                </span>
                                <i class="fa fa-chevron-down text-text-secondary" id="filters-icon"></i>
                            </div>
                        </div>
                        <div id="filters-panel" class="p-4" style="display: none;">
                            <!-- 三列网格布局 -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; width: 100%; padding: 0; box-sizing: border-box;">
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="applyFilter('none')">
                                    <i class="fa fa-ban mr-1"></i>无滤镜
                                </button>
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="applyFilter('grayscale')">
                                    <i class="fa fa-circle mr-1 text-gray-500"></i>黑白
                                </button>
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="applyFilter('sepia')">
                                    <i class="fa fa-circle mr-1 text-yellow-600"></i>怀旧
                                </button>
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="applyFilter('blur')">
                                    <i class="fa fa-circle mr-1 text-blue-400"></i>模糊
                                </button>
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="applyFilter('invert')">
                                    <i class="fa fa-circle mr-1 text-purple-500"></i>反色
                                </button>
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="applyFilter('vintage')">
                                    <i class="fa fa-circle mr-1 text-orange-500"></i>复古
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 音频控制 -->
                    <div class="border-b border-border-color">
                        <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('audio')">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-text-primary flex items-center">
                                    <i class="fa fa-volume-up mr-2 text-success"></i>
                                    音频控制
                                </span>
                                <i class="fa fa-chevron-down text-text-secondary" id="audio-icon"></i>
                            </div>
                        </div>
                        <div id="audio-panel" class="p-4" style="display: none;">
                            <!-- 双列网格布局（音量+淡入淡出） -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; width: 100%; padding: 0; box-sizing: border-box;">
                                <!-- 音量 -->
                                <div style="padding: 10px; background: rgba(255,255,255,0.02); border-radius: 8px;">
                                    <div class="flex items-center justify-between mb-3">
                                        <label class="text-xs text-text-secondary font-medium">音量</label>
                                        <span class="text-xs text-primary font-semibold" id="audio-volume-value">100%</span>
                                    </div>
                                    <input type="range" class="w-full accent-primary" min="0" max="200" value="100"
                                           oninput="adjustAudioVolume(this.value)" id="audio-volume-slider" style="height: 6px;">
                                </div>

                                <!-- 淡入 -->
                                <div style="padding: 10px; background: rgba(255,255,255,0.02); border-radius: 8px;">
                                    <div class="flex items-center justify-between mb-3">
                                        <label class="text-xs text-text-secondary font-medium">淡入时间</label>
                                        <span class="text-xs text-primary font-semibold" id="fade-in-value">0s</span>
                                    </div>
                                    <input type="range" class="w-full accent-primary" min="0" max="5" step="0.1" value="0"
                                           oninput="adjustFadeIn(this.value)" id="fade-in-slider" style="height: 6px;">
                                </div>

                                <!-- 淡出（占满一列） -->
                                <div style="grid-column: span 2; padding: 10px; background: rgba(255,255,255,0.02); border-radius: 8px;">
                                    <div class="flex items-center justify-between mb-3">
                                        <label class="text-xs text-text-secondary font-medium">淡出时间</label>
                                        <span class="text-xs text-primary font-semibold" id="fade-out-value">0s</span>
                                    </div>
                                    <input type="range" class="w-full accent-primary" min="0" max="5" step="0.1" value="0"
                                           oninput="adjustFadeOut(this.value)" id="fade-out-slider" style="height: 6px;">
                                </div>
                            </div>

                            <!-- 音频效果按钮 - 三列网格 -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; width: 100%; padding: 0; box-sizing: border-box;">
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="toggleAudioEffect('echo')">
                                    <i class="fa fa-repeat mr-1"></i>回声
                                </button>
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="toggleAudioEffect('bass')">
                                    <i class="fa fa-music mr-1"></i>低音
                                </button>
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="removeAudio()">
                                    <i class="fa fa-volume-off mr-1 text-warning"></i>移除
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 速度控制 -->
                    <div class="border-b border-border-color">
                        <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('speed')">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-text-primary flex items-center">
                                    <i class="fa fa-tachometer mr-2 text-warning"></i>
                                    速度控制
                                </span>
                                <i class="fa fa-chevron-down text-text-secondary" id="speed-icon"></i>
                            </div>
                        </div>
                        <div id="speed-panel" class="p-4 space-y-4" style="display: none;">
                            <!-- 播放速度 -->
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <label class="text-xs text-text-secondary">播放速度</label>
                                    <span class="text-xs text-primary" id="speed-value">1.0x</span>
                                </div>
                                <input type="range" class="w-full accent-primary" min="0.25" max="4" step="0.25" value="1"
                                       oninput="adjustPlaySpeed(this.value)" id="speed-slider">
                            </div>

                            <!-- 快速预设 -->
                            <div class="grid grid-cols-3 gap-2">
                                <button class="px-2 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="setSpeed(0.5)">0.5x</button>
                                <button class="px-2 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="setSpeed(1)">1.0x</button>
                                <button class="px-2 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="setSpeed(1.5)">1.5x</button>
                                <button class="px-2 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="setSpeed(2)">2.0x</button>
                                <button class="px-2 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="setSpeed(3)">3.0x</button>
                                <button class="px-2 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="setSpeed(4)">4.0x</button>
                            </div>

                            <!-- 倒放 -->
                            <button class="w-full px-3 py-2 bg-warning/20 text-warning border border-warning/30 rounded-lg text-xs hover:bg-warning/30"
                                    onclick="toggleReverse()">
                                <i class="fa fa-backward mr-2"></i>倒放视频
                            </button>
                        </div>
                    </div>

                    <!-- 裁剪和遮罩 -->
                    <div class="border-b border-border-color">
                        <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('crop')">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-text-primary flex items-center">
                                    <i class="fa fa-crop mr-2 text-danger"></i>
                                    裁剪和遮罩
                                </span>
                                <i class="fa fa-chevron-down text-text-secondary" id="crop-icon"></i>
                            </div>
                        </div>
                        <div id="crop-panel" class="p-4 space-y-3" style="display: none;">
                            <!-- 裁剪预设 -->
                            <div class="grid grid-cols-2 gap-2">
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="cropToRatio('16:9')">
                                    <i class="fa fa-tv mr-1"></i>16:9
                                </button>
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="cropToRatio('4:3')">
                                    <i class="fa fa-desktop mr-1"></i>4:3
                                </button>
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="cropToRatio('1:1')">
                                    <i class="fa fa-square mr-1"></i>1:1
                                </button>
                                <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                        onclick="cropToRatio('9:16')">
                                    <i class="fa fa-mobile mr-1"></i>9:16
                                </button>
                            </div>

                            <!-- 遮罩选项 -->
                            <div class="mt-4">
                                <label class="text-xs text-text-secondary mb-2 block">遮罩形状</label>
                                <div class="grid grid-cols-2 gap-2">
                                    <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                            onclick="applyMask('circle')">
                                        <i class="fa fa-circle-o mr-1"></i>圆形
                                    </button>
                                    <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                            onclick="applyMask('heart')">
                                        <i class="fa fa-heart-o mr-1"></i>心形
                                    </button>
                                    <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                            onclick="applyMask('star')">
                                        <i class="fa fa-star-o mr-1"></i>星形
                                    </button>
                                    <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30"
                                            onclick="removeMask()">
                                        <i class="fa fa-ban mr-1"></i>移除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 关键帧动画 -->
                    <div class="border-b border-border-color">
                        <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('keyframe')">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-text-primary flex items-center">
                                    <i class="fa fa-video-camera mr-2 text-info"></i>
                                    关键帧动画
                                </span>
                                <i class="fa fa-chevron-down text-text-secondary" id="keyframe-icon"></i>
                            </div>
                        </div>
                        <div id="keyframe-panel" class="p-4 space-y-3" style="display: none;">
                            <!-- 添加关键帧按钮 -->
                            <div class="grid grid-cols-2 gap-2">
                                <button class="px-3 py-2 bg-primary/20 text-primary border border-primary/30 rounded-lg text-xs hover:bg-primary/30"
                                        onclick="addKeyframe('position')">
                                    <i class="fa fa-plus-circle mr-1"></i>位置
                                </button>
                                <button class="px-3 py-2 bg-secondary/20 text-secondary border border-secondary/30 rounded-lg text-xs hover:bg-secondary/30"
                                        onclick="addKeyframe('scale')">
                                    <i class="fa fa-plus-circle mr-1"></i>缩放
                                </button>
                                <button class="px-3 py-2 bg-accent/20 text-accent border border-accent/30 rounded-lg text-xs hover:bg-accent/30"
                                        onclick="addKeyframe('rotation')">
                                    <i class="fa fa-plus-circle mr-1"></i>旋转
                                </button>
                                <button class="px-3 py-2 bg-warning/20 text-warning border border-warning/30 rounded-lg text-xs hover:bg-warning/30"
                                        onclick="addKeyframe('opacity')">
                                    <i class="fa fa-plus-circle mr-1"></i>透明度
                                </button>
                            </div>

                            <!-- 缓动函数 -->
                            <div>
                                <label class="text-xs text-text-secondary mb-2 block">缓动类型</label>
                                <select class="w-full px-3 py-2 bg-dark-lighter text-text-primary rounded-lg text-xs"
                                        onchange="setEasing(this.value)">
                                    <option value="linear">线性</option>
                                    <option value="ease-in">缓入</option>
                                    <option value="ease-out">缓出</option>
                                    <option value="ease-in-out" selected>缓入缓出</option>
                                    <option value="bounce">弹跳</option>
                                </select>
                            </div>
                        </div>
                    </div>



                    <!-- 项目统计信息 -->
                    <div class="border-b border-border-color">
                        <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('stats')">
                            <div class="flex items-center justify-between" style="gap: 10px;">
                                <span class="text-sm font-medium text-text-primary flex items-center" style="white-space: nowrap; flex-shrink: 0;">
                                    <i class="fa fa-bar-chart mr-2 text-info"></i>
                                    项目统计
                                </span>
                                <i class="fa fa-chevron-up text-text-secondary" id="stats-icon" style="flex-shrink: 0;"></i>
                            </div>
                        </div>
                        <div id="stats-panel" class="p-4" style="display: block;">
                            <!-- 三列网格布局 -->
                            <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; width: 100%; padding: 0; box-sizing: border-box;">
                                <div class="text-center p-3 bg-primary/10 rounded-lg">
                                    <div class="text-2xl font-bold text-primary" id="total-clips">0</div>
                                    <div class="text-xs text-text-secondary mt-1">总素材</div>
                                </div>
                                <div class="text-center p-3 bg-secondary/10 rounded-lg">
                                    <div class="text-2xl font-bold text-secondary" id="total-duration">0:00</div>
                                    <div class="text-xs text-text-secondary mt-1">总时长</div>
                                </div>
                                <div class="text-center p-3 bg-accent/10 rounded-lg">
                                    <div class="text-2xl font-bold text-accent" id="total-size">0MB</div>
                                    <div class="text-xs text-text-secondary mt-1">文件大小</div>
                                </div>
                            </div>
                        </div>
                    </div>

                        <!-- 编辑历史 -->
                        <div id="shortcuts-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start;">

                            <!-- 历史记录（列表） -->
                            <div class="border-b border-border-color">
                                <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('history-list')">
                                    <div class="flex items-center justify-between" style="gap: 10px;">
                                        <span class="text-sm font-medium text-text-primary flex items-center" style="white-space: nowrap; flex-shrink: 0;">
                                            <i class="fa fa-history mr-2 text-warning"></i>
                                            编辑历史
                                        </span>
                                        <i class="fa fa-chevron-up text-text-secondary" id="history-list-icon" style="flex-shrink: 0;"></i>
                                    </div>
                                </div>
                                <div id="history-list-panel" class="p-4" style="display: block;">
                                    <div class="space-y-2 max-h-48 overflow-y-auto" id="history-list">
                                        <div class="text-xs text-text-secondary text-center py-4">
                                            <i class="fa fa-clock-o"></i> 暂无编辑历史
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 快捷操作 · 剪辑工具 -->
                            <div class="border-b border-border-color">
                                <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('shortcuts-edit')">
                                    <div class="flex items-center justify-between" style="gap: 10px;">
                                        <span class="text-sm font-medium text-text-primary flex items-center" style="white-space: nowrap; flex-shrink: 0;">
                                            <i class="fa fa-wrench mr-2 text-danger"></i>
                                            快捷操作 · 剪辑
                                        </span>
                                        <i class="fa fa-chevron-up text-text-secondary" id="shortcuts-edit-icon" style="flex-shrink: 0;"></i>
                                    </div>
                                </div>
                                <div id="shortcuts-edit-panel" class="p-4" style="display: block;">
                                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                                        <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-success/30" onclick="autoAlign()">
                                            <i class="fa fa-align-justify mr-1"></i>自动对齐
                                        </button>
                                        <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="smartCut()">
                                            <i class="fa fa-scissors mr-1"></i>智能剪切
                                        </button>
                                        <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-secondary/30" onclick="batchResize()">
                                            <i class="fa fa-expand mr-1"></i>批量缩放
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- 快捷操作 · 增强工具 -->
                            <div class="border-b border-border-color">
                                <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('shortcuts-enhance')">
                                    <div class="flex items-center justify-between" style="gap: 10px;">
                                        <span class="text-sm font-medium text-text-primary flex items-center" style="white-space: nowrap; flex-shrink: 0;">
                                            <i class="fa fa-magic mr-2 text-accent"></i>
                                            快捷操作 · 增强
                                        </span>
                                        <i class="fa fa-chevron-up text-text-secondary" id="shortcuts-enhance-icon" style="flex-shrink: 0;"></i>
                                    </div>
                                </div>
                                <div id="shortcuts-enhance-panel" class="p-4" style="display: block;">
                                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                                        <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-accent/30" onclick="syncAudio()">
                                            <i class="fa fa-music mr-1"></i>音频同步
                                        </button>
                                        <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-warning/30" onclick="colorMatch()">
                                            <i class="fa fa-eyedropper mr-1"></i>色彩匹配
                                        </button>
                                        <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-info/30" onclick="stabilize()">
                                            <i class="fa fa-compass mr-1"></i>视频防抖
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>

                </div>
            </div>


        </div>
    </div>

</div>

<!-- ===== 编辑器：功能按钮条 + 内嵌面板（替代原四面板） ===== -->
<!-- 顶部旧按钮条已弃用，改为底部按钮条；保留占位避免布局抖动（隐藏） -->
<div class="layui-row" id="editor-inspector-actions-top" style="display:none"></div>

<!-- 内嵌功能面板容器（打开时覆盖中部编辑区，不影响左侧素材与顶部导航） -->
<div id="editor-embedded-panel" class="hidden" style="position: fixed; left: 20px; right: 20px; top: calc(var(--nav-height,64px) + 84px); bottom: 24px; z-index: 1200; display: none;">
  <div class="glass-card rounded-xl h-full flex flex-col border border-border-color" style="background: rgba(15,23,42,0.92);">
    <div class="p-3 border-b border-border-color flex items-center justify-between">
      <div class="text-sm font-medium text-text-primary" id="embedded-title">功能面板</div>
      <div class="flex items-center gap-2">
        <button class="operation-btn px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="closeEditorPanel()">
          <i class="fa fa-arrow-left mr-1"></i>返回编辑
        </button>
      </div>
    </div>
    <div id="embedded-content" class="flex-1 overflow-auto p-4"></div>
  </div>
</div>

<!-- 四个功能模板：在打开时动态克隆进内嵌容器 -->
<template id="tpl-panel-clip">
  <div class="space-y-3">
    <div class="text-sm font-medium text-text-primary mb-3">剪辑属性</div>
    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
      <div>
        <label class="text-xs text-text-secondary">位置 X</label>
        <input id="grid-position-x-slider" type="range" class="w-full accent-primary" min="-500" max="500" value="0" style="height:6px;" oninput="adjustPositionX(this.value)">
      </div>
      <div>
        <label class="text-xs text-text-secondary">位置 Y</label>
        <input id="grid-position-y-slider" type="range" class="w-full accent-primary" min="-500" max="500" value="0" style="height:6px;" oninput="adjustPositionY(this.value)">
      </div>
      <div style="grid-column: span 2;">
        <div class="flex items-center justify-between mb-1">
          <label class="text-xs text-text-secondary">缩放</label>
          <span class="text-xs text-primary" id="grid-scale-value">100%</span>
        </div>
        <input id="grid-scale-slider" type="range" class="w-full accent-primary" min="0" max="200" value="100" style="height:6px;" oninput="adjustScale(this.value)">
      </div>
      <div style="grid-column: span 2;">
        <div class="flex items-center justify-between mb-1">
          <label class="text-xs text-text-secondary">旋转</label>
          <span class="text-xs text-primary" id="grid-rotation-value">0°</span>
        </div>
        <input id="grid-rotation-slider" type="range" class="w-full accent-primary" min="0" max="360" value="0" style="height:6px;" oninput="adjustRotation(this.value)">
      </div>
    </div>
  </div>
</template>

<template id="tpl-panel-color">
  <div class="space-y-3">
    <div class="text-sm font-medium text-text-primary mb-3">色彩校正</div>
    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
      <div>
        <div class="flex items-center justify-between mb-1">
          <label class="text-xs text-text-secondary">亮度</label>
          <span class="text-xs text-primary" id="grid-brightness-value">0%</span>
        </div>
        <input id="grid-brightness-slider" type="range" class="w-full accent-primary" min="-100" max="100" value="0" style="height:6px;" oninput="adjustBrightness(this.value)">
      </div>
      <div>
        <div class="flex items-center justify-between mb-1">
          <label class="text-xs text-text-secondary">对比度</label>
          <span class="text-xs text-primary" id="grid-contrast-value">0%</span>
        </div>
        <input id="grid-contrast-slider" type="range" class="w-full accent-primary" min="-100" max="100" value="0" style="height:6px;" oninput="adjustContrast(this.value)">
      </div>
      <div>
        <div class="flex items-center justify-between mb-1">
          <label class="text-xs text-text-secondary">饱和度</label>
          <span class="text-xs text-primary" id="grid-saturation-value">0%</span>
        </div>
        <input id="grid-saturation-slider" type="range" class="w-full accent-primary" min="-100" max="100" value="0" style="height:6px;" oninput="adjustSaturation(this.value)">
      </div>
      <div>
        <div class="flex items-center justify-between mb-1">
          <label class="text-xs text-text-secondary">色调</label>
          <span class="text-xs text-primary" id="grid-hue-value">0°</span>
        </div>
        <input id="grid-hue-slider" type="range" class="w-full accent-primary" min="0" max="360" value="0" style="height:6px;" oninput="adjustHue(this.value)">
      </div>
    </div>
  </div>
</template>

<template id="tpl-panel-export">
  <div class="space-y-3">
    <div class="text-sm font-medium text-text-primary mb-3">导出设置</div>
    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
      <div>
        <label class="text-xs text-text-secondary mb-1 block">输出格式</label>
        <select id="export-format-select" class="w-full px-3 py-2 bg-dark-lighter text-text-primary rounded-lg text-xs">
          <option value="mp4">MP4 (推荐)</option>
          <option value="mov">MOV</option>
          <option value="avi">AVI</option>
          <option value="webm">WebM</option>
          <option value="gif">GIF</option>
        </select>
      </div>
      <div>
        <label class="text-xs text-text-secondary mb-1 block">分辨率</label>
        <select id="export-resolution-select" class="w-full px-3 py-2 bg-dark-lighter text-text-primary rounded-lg text-xs">
          <option value="3840x2160">4K (3840×2160)</option>
          <option value="1920x1080" selected>1080p (1920×1080)</option>
          <option value="1280x720">720p (1280×720)</option>
          <option value="854x480">480p (854×480)</option>
          <option value="custom">自定义</option>
        </select>
      </div>
      <div>
        <label class="text-xs text-text-secondary mb-1 block">帧率</label>
        <select id="export-fps-select" class="w-full px-3 py-2 bg-dark-lighter text-text-primary rounded-lg text-xs">
          <option value="24">24 fps</option>
          <option value="30" selected>30 fps</option>
          <option value="60">60 fps</option>
          <option value="120">120 fps</option>
        </select>
      </div>
      <div>
        <label class="text-xs text-text-secondary mb-1 block">画质</label>
        <select id="export-quality-select" class="w-full px-3 py-2 bg-dark-lighter text-text-primary rounded-lg text-xs">
          <option value="high">高质量</option>
          <option value="medium" selected>中等质量</option>
          <option value="low">低质量</option>
        </select>
      </div>
      <div style="grid-column: span 2;">
        <button class="w-full px-3 py-3 bg-gradient-to-r from-success to-success/80 text-white rounded-lg text-sm font-medium hover:shadow-lg transition-all" onclick="if(typeof quickExport==='function'){quickExport()}else if(typeof exportVideo==='function'){exportVideo()}">
          <i class="fa fa-rocket mr-2"></i>快速导出
        </button>
      </div>
    </div>
  </div>
</template>

<template id="tpl-panel-audio-grid">
  <div class="space-y-3">
    <div class="text-sm font-medium text-text-primary mb-3">音频控制</div>
    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
      <div style="grid-column: span 2;">
        <div class="flex items-center justify-between mb-1">
          <label class="text-xs text-text-secondary">音量</label>
          <span class="text-xs text-primary" id="grid-audio-volume-value">100%</span>
        </div>
        <input id="grid-audio-volume-slider" type="range" class="w-full accent-primary" min="0" max="200" value="100" style="height:6px;" oninput="adjustAudioVolume(this.value)">
      </div>
      <div>
        <div class="flex items-center justify-between mb-1">
          <label class="text-xs text-text-secondary">淡入</label>
          <span class="text-xs text-primary" id="grid-fade-in-value">0s</span>
        </div>
        <input id="grid-fade-in-slider" type="range" class="w-full accent-primary" min="0" max="5" step="0.1" value="0" style="height:6px;" oninput="adjustFadeIn(this.value)">
      </div>
      <div>
        <div class="flex items-center justify-between mb-1">
          <label class="text-xs text-text-secondary">淡出</label>
          <span class="text-xs text-primary" id="grid-fade-out-value">0s</span>
        </div>
        <input id="grid-fade-out-slider" type="range" class="w-full accent-primary" min="0" max="5" step="0.1" value="0" style="height:6px;" oninput="adjustFadeOut(this.value)">
      </div>
    </div>
  </div>
</template>

<template id="tpl-panel-filters-grid">
  <div class="space-y-3">
    <div class="text-sm font-medium text-text-primary mb-3">滤镜效果</div>
    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; width: 100%; padding: 0; box-sizing: border-box;">
      <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="applyFilter('none')">
        <i class="fa fa-ban mr-1"></i>无滤镜
      </button>
      <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="applyFilter('grayscale')">
        <i class="fa fa-circle mr-1 text-gray-500"></i>黑白
      </button>
      <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="applyFilter('sepia')">
        <i class="fa fa-circle mr-1 text-yellow-600"></i>怀旧
      </button>
      <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="applyFilter('blur')">
        <i class="fa fa-circle mr-1 text-blue-400"></i>模糊
      </button>
      <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="applyFilter('invert')">
        <i class="fa fa-circle mr-1 text-purple-500"></i>反色
      </button>
      <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="applyFilter('vintage')">
        <i class="fa fa-circle mr-1 text-orange-500"></i>复古
      </button>
    </div>
  </div>
</template>


<template id="tpl-panel-history">
  <div class="space-y-3">
    <div class="text-sm font-medium text-text-primary mb-3">历史操作</div>
    <div id="history-list-inline" class="space-y-2 max-h-[50vh] overflow-y-auto">
      <div class="text-xs text-text-secondary text-center py-4">
        <i class="fa fa-clock-o"></i> 暂无编辑历史
      </div>
    </div>
    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top: 12px;">

      <button class="px-3 py-2 bg-dark-lighter text-text-primary rounded-lg text-xs hover:bg-dark-lighter/80" onclick="if(window.clearHistory){clearHistory()}">清空历史</button>
      <button class="px-3 py-2 bg-primary/20 text-primary border border-primary/30 rounded-lg text-xs hover:bg-primary/30" onclick="if(window.exportHistory){exportHistory()}">导出日志</button>
    </div>
  </div>
</template>

<template id="tpl-panel-tools">
  <div class="space-y-4">

    <!-- 项目统计 -->
    <div class="border-b border-border-color">
      <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('tools-stats')">
        <div class="flex items-center justify-between" style="gap:10px;">
          <span class="text-sm font-medium text-text-primary flex items-center" style="white-space:nowrap; flex-shrink:0;">
            <i class="fa fa-bar-chart mr-2 text-info"></i>项目统计
          </span>
          <i class="fa fa-chevron-up text-text-secondary" id="tools-stats-icon" style="flex-shrink:0;"></i>
        </div>
      </div>
      <div id="tools-stats-panel" class="p-4" style="display:block;">
        <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap:15px; width:100%; padding:0; box-sizing:border-box;">
          <div class="text-center p-3 bg-primary/10 rounded-lg">
            <div class="text-2xl font-bold text-primary" id="tools-total-clips">0</div>
            <div class="text-xs text-text-secondary mt-1">总素材</div>
          </div>
          <div class="text-center p-3 bg-secondary/10 rounded-lg">
            <div class="text-2xl font-bold text-secondary" id="tools-total-duration">0:00</div>
            <div class="text-xs text-text-secondary mt-1">总时长</div>
          </div>
          <div class="text-center p-3 bg-accent/10 rounded-lg">
            <div class="text-2xl font-bold text-accent" id="tools-total-size">0MB</div>
            <div class="text-xs text-text-secondary mt-1">文件大小</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑历史（列表） -->
    <div class="border-b border-border-color">
      <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('tools-history-list')">
        <div class="flex items-center justify-between" style="gap:10px;">
          <span class="text-sm font-medium text-text-primary flex items-center" style="white-space:nowrap; flex-shrink:0;">
            <i class="fa fa-history mr-2 text-warning"></i>编辑历史
          </span>
          <i class="fa fa-chevron-up text-text-secondary" id="tools-history-list-icon" style="flex-shrink:0;"></i>
        </div>
      </div>
      <div id="tools-history-list-panel" class="p-4" style="display:block;">
        <div id="history-list-inline" class="space-y-2 max-h-48 overflow-y-auto">
          <div class="text-xs text-text-secondary text-center py-4"><i class="fa fa-clock-o"></i> 暂无编辑历史</div>
        </div>
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top: 12px;">
          <button class="px-3 py-2 bg-dark-lighter text-text-primary rounded-lg text-xs hover:bg-dark-lighter/80" onclick="if(window.clearHistory){clearHistory()}">清空历史</button>
          <button class="px-3 py-2 bg-primary/20 text-primary border border-primary/30 rounded-lg text-xs hover:bg-primary/30" onclick="if(window.exportHistory){exportHistory()}">导出日志</button>
        </div>
      </div>
    </div>

    <!-- 快捷操作 · 剪辑 -->
    <div class="border-b border-border-color">
      <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('tools-shortcuts-edit')">
        <div class="flex items-center justify-between" style="gap:10px;">
          <span class="text-sm font-medium text-text-primary flex items-center" style="white-space:nowrap; flex-shrink:0;">
            <i class="fa fa-wrench mr-2 text-danger"></i>快捷操作 · 剪辑
          </span>
          <i class="fa fa-chevron-up text-text-secondary" id="tools-shortcuts-edit-icon" style="flex-shrink:0;"></i>
        </div>
      </div>
      <div id="tools-shortcuts-edit-panel" class="p-4" style="display:block;">
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 12px;">
          <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-success/30" onclick="autoAlign()"><i class="fa fa-align-justify mr-1"></i>自动对齐</button>
          <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-primary/30" onclick="smartCut()"><i class="fa fa-scissors mr-1"></i>智能剪切</button>
          <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-info/30" onclick="fitToCanvas()"><i class="fa fa-compress mr-1"></i>适配画布</button>
          <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-accent/30" onclick="batchScale()"><i class="fa fa-expand mr-1"></i>批量缩放</button>
        </div>
      </div>
    </div>

    <!-- 快捷操作 · 增强 -->
    <div class="border-b border-border-color">
      <div class="p-4 cursor-pointer hover:bg-dark-lighter/30" onclick="togglePanel('tools-shortcuts-enhance')">
        <div class="flex items-center justify-between" style="gap:10px;">
          <span class="text-sm font-medium text-text-primary flex items-center" style="white-space:nowrap; flex-shrink:0;">
            <i class="fa fa-magic mr-2 text-accent"></i>快捷操作 · 增强
          </span>
          <i class="fa fa-chevron-up text-text-secondary" id="tools-shortcuts-enhance-icon" style="flex-shrink:0;"></i>
        </div>
      </div>
      <div id="tools-shortcuts-enhance-panel" class="p-4" style="display:block;">
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 12px;">
          <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-accent/30" onclick="syncAudio()"><i class="fa fa-music mr-1"></i>音频同步</button>
          <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-warning/30" onclick="colorMatch()"><i class="fa fa-eyedropper mr-1"></i>色彩匹配</button>
          <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-secondary/30" onclick="reduceNoise()"><i class="fa fa-volume-down mr-1"></i>降噪</button>
          <button class="px-3 py-2 glass-card text-text-primary rounded-lg text-xs hover:border-info/30" onclick="stabilize()"><i class="fa fa-arrows mr-1"></i>视频防抖</button>
        </div>
      </div>
    </div>

  </div>
</template>


<script>
  // 内嵌功能面板：自适应定位 + ESC 关闭
  (function(){
    function positionEmbeddedPanel(){
      var panel = document.getElementById('editor-embedded-panel');
      if(!panel) return;
      var gap = 20;
      var preview = document.getElementById('video-preview-container');
      var rightCol = document.getElementById('index-right-panel-col');
      var actions = document.getElementById('editor-inspector-actions') || document.getElementById('editor-inspector-actions-bottom') || document.getElementById('editor-inspector-actions-top');
      var left = gap, right = gap, top = (64 + 84); // 初始兜底
      try{
        if (preview){
          var pr = preview.getBoundingClientRect();
          left = Math.max(gap, Math.floor(pr.left));
        }
        if (rightCol){
          var rr = rightCol.getBoundingClientRect();
          var centerRight = Math.max(gap, Math.floor(rr.left - gap));
          right = Math.max(gap, Math.floor(window.innerWidth - centerRight));
        } else if (preview){
          var pr2 = preview.getBoundingClientRect();
          right = Math.max(gap, Math.floor(window.innerWidth - pr2.right + gap));
        }
        if (actions){
          var ar = actions.getBoundingClientRect();
          var isTopBar = (ar.bottom < (window.innerHeight * 0.5));
          if (isTopBar) {
            top = Math.max(64, Math.floor(ar.bottom + 8));
          }
        }
      }catch(_){ }
      panel.style.left = left + 'px';
      panel.style.right = right + 'px';
      panel.style.top = top + 'px';
      // 根据按钮条位置自适应 bottom：若按钮在底部，则在其上方留出空隙
      var bottomGap = 24;
      try {
        if (actions){
          var ar = actions.getBoundingClientRect();
          var isBottom = (ar.top > (window.innerHeight * 0.5));
          if (isBottom) {
            bottomGap = Math.max(24, Math.floor(window.innerHeight - ar.top) + 12);
          }
        }
      } catch(_){ }
      panel.style.bottom = bottomGap + 'px';
    }
    window.positionEmbeddedPanel = positionEmbeddedPanel;

    // ESC 关闭
    document.addEventListener('keydown', function(e){
      if (e.key === 'Escape'){
        var panel = document.getElementById('editor-embedded-panel');


        if (panel && panel.style.display !== 'none'){
          closeEditorPanel();
        }
      }
    });

    // 监听尺寸变化
    function ensureObserver(){
      if (!window.__embeddedPanelRO && 'ResizeObserver' in window){
        var ro = new ResizeObserver(function(){ positionEmbeddedPanel(); });
        window.__embeddedPanelRO = ro;
        ['index-left-column','index-right-panel-col','video-preview-container','editor-inspector-actions','editor-inspector-actions-bottom']
          .forEach(function(id){ var el = document.getElementById(id); if(el){ try{ ro.observe(el); }catch(_){} } });
      }
    }
    window.__initEmbeddedPanelObserver = ensureObserver;
    window.addEventListener('load', function(){ ensureObserver(); positionEmbeddedPanel(); setTimeout(positionEmbeddedPanel, 200); });
    window.addEventListener('resize', positionEmbeddedPanel);
  })();
</script>

<script>
// 精确修复：仅根据底部状态栏高度，给左侧卡片增加恰当的底部内边距，使“快速工具/画质增强”与底部边框衔接而不重叠
(function(){
  function adjustLeftPanelFooterGap(){
    var col = document.getElementById('index-left-column');
    if(!col) return;
    var card = col.querySelector('.glass-card');
    if(!card) return;
    var footer = document.querySelector('footer');
    var footerH = 40; // 默认高度
    try{
      if(footer){
        var fr = footer.getBoundingClientRect();
        footerH = Math.max(36, Math.ceil(fr.height||40));
      }
    }catch(_){ }
    // 仅调节 padding-bottom，保证最后一个按钮恰好在底部边框之上，不改整体高度，不制造大空白
    var gap = 4; // 轻微缓冲，避免视觉相交
    card.style.paddingBottom = (footerH + gap) + 'px';
  }
  window.addEventListener('load', adjustLeftPanelFooterGap);
  window.addEventListener('resize', adjustLeftPanelFooterGap);
  document.addEventListener('DOMContentLoaded', function(){ setTimeout(adjustLeftPanelFooterGap, 200); });
})();
</script>
<script>
// 右侧属性面板：根据底部 footer 高度自适应底部内边距，避免被遮挡
(function(){
  function adjustRightPanelFooterGap(){
    var col = document.getElementById('index-right-panel-col');
    if(!col) return;
    var card = col.querySelector('.glass-card');
    if(!card) return;
    var footer = document.querySelector('footer');
    var fh = 40;
    try{
      if(footer && footer.getBoundingClientRect){
        var fr = footer.getBoundingClientRect();
        fh = Math.max(36, Math.ceil(fr.height||40));
      }
    }catch(_){ }
    // 与底部衔接：适度缓冲，不留大空白
    var gap = 8;
    card.style.paddingBottom = (fh + gap) + 'px';
  }
  window.addEventListener('load', adjustRightPanelFooterGap);
  window.addEventListener('resize', adjustRightPanelFooterGap);
  document.addEventListener('DOMContentLoaded', function(){ setTimeout(adjustRightPanelFooterGap, 200); });
})();
</script>


<script>

  function openEditorPanel(type){
    var panel=document.getElementById('editor-embedded-panel');
    var content=document.getElementById('embedded-content');
    var title=document.getElementById('embedded-title');
    if(!panel||!content){return}
    var map={clip:['tpl-panel-clip','剪辑属性'],color:['tpl-panel-color','色彩校正'],export:['tpl-panel-export','导出设置'],history:['tpl-panel-history','历史操作']};
    var conf=map[type]; if(!conf){return}
    var tpl=document.getElementById(conf[0]);
    if(tpl){
      if (typeof window.positionEmbeddedPanel === 'function') window.positionEmbeddedPanel();
      if (typeof window.__initEmbeddedPanelObserver === 'function') window.__initEmbeddedPanelObserver();
      content.innerHTML='';
      content.appendChild(tpl.content.cloneNode(true));
      title.textContent=conf[1];
      panel.style.display='block';
      panel.classList.remove('hidden');
    }
  }
  function closeEditorPanel(){
    var panel=document.getElementById('editor-embedded-panel');
    var content=document.getElementById('embedded-content');
    if(panel){ panel.style.display='none'; }
    if(content){ content.innerHTML=''; }
  }

  // 将右侧“项目统计/编辑历史/快捷操作”封装为浮层打开的面板，并默认从右栏隐藏
  if (typeof window.openToolsPanel !== 'function') window.openToolsPanel = function(){
    var panel = document.getElementById('editor-embedded-panel');
    var content = document.getElementById('embedded-content');
    var title = document.getElementById('embedded-title');
    if(!panel || !content) return;

    var wrap = document.createElement('div');
    wrap.className = 'space-y-6';
    ['stats-panel','history-list-panel','shortcuts-edit-panel','shortcuts-enhance-panel'].forEach(function(id){
      var inner = document.getElementById(id);
      if (inner && inner.parentElement){
        var copy = inner.parentElement.cloneNode(true);
        try {
          copy.querySelectorAll('[onclick]').forEach(function(el){
            if ((el.getAttribute('onclick')||'').indexOf('togglePanel(') >= 0) el.removeAttribute('onclick');
          });
          copy.querySelectorAll('[id]').forEach(function(el){ el.removeAttribute('id'); });
        } catch(_){ }
        wrap.appendChild(copy);
      }
    });

    if (typeof window.positionEmbeddedPanel === 'function') window.positionEmbeddedPanel();
    if (typeof window.__initEmbeddedPanelObserver === 'function') window.__initEmbeddedPanelObserver();

    content.innerHTML = '';
    content.appendChild(wrap);
    if (title) title.textContent = '统计与快捷';
    panel.style.display='block';
    panel.classList.remove('hidden');
  };

  (function(){
    function hideRightSideBlocks(){
      var ids=['stats-panel','history-list-panel','shortcuts-edit-panel','shortcuts-enhance-panel'];
      ids.forEach(function(id){
        var el=document.getElementById(id);
        if(el && el.parentElement){ el.parentElement.style.display='none'; }
      });
    }
    window.addEventListener('DOMContentLoaded', hideRightSideBlocks);
    window.addEventListener('load', hideRightSideBlocks);
  })();

  // 以浮层方式打开“属性面板”，复用已有网格模板，避免与底部遮挡
  if (typeof window.openPropertiesOverlay !== 'function') window.openPropertiesOverlay = function(){
    var panel = document.getElementById('editor-embedded-panel');
    var content = document.getElementById('embedded-content');
    var title = document.getElementById('embedded-title');
    if(!panel || !content) return;

    var wrap = document.createElement('div');
    wrap.className = 'space-y-6';
    var sections = ['tpl-panel-clip','tpl-panel-color','tpl-panel-audio-grid','tpl-panel-filters-grid'];
    sections.forEach(function(id){
      var tpl = document.getElementById(id);
      if(tpl && tpl.content) wrap.appendChild(tpl.content.cloneNode(true));
    });

    if (typeof window.positionEmbeddedPanel === 'function') window.positionEmbeddedPanel();
    if (typeof window.__initEmbeddedPanelObserver === 'function') window.__initEmbeddedPanelObserver();

    content.innerHTML = '';
    content.appendChild(wrap);
    if (title) title.textContent = '属性面板';

    panel.style.display = 'block';
    panel.classList.remove('hidden');
  };

</script>



{% endblock %}

{% block extra_js %}
<script type="text/javascript">
    layui.use(['element', 'layer', 'form', 'slider'], function() {
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var slider = layui.slider;

        // 全局变量
        let isPlaying = false;
        let isMuted = false;
        let isLooping = false;
        let snapEnabled = true;
        let currentTime = 0;
        let totalTime = 0;
        let timelineZoom = 100;
        let video = null;
        let isDragging = false;
        let framerate = 30; // 默认帧率


            // 统一获取 LLM 授权头（从 sessionStorage 读取/提示输入）
            function getLLMHeaders() {
                try {
                    let apiKey = sessionStorage.getItem('llm_api_key');
                    if (!apiKey) {
                        apiKey = prompt('请输入大模型 API Key（例如 DeepSeek）');
                        if (apiKey) sessionStorage.setItem('llm_api_key', apiKey);
                    }
                    const headers = { 'Content-Type': 'application/json' };
                    if (apiKey) headers['Authorization'] = 'Bearer ' + apiKey;
                    return headers;
                } catch (e) {
                    return { 'Content-Type': 'application/json' };
                }
            }

            // 通义千问（DashScope）专用授权头
            function getQwenHeaders() {
                try {
                    let apiKey = sessionStorage.getItem('qwen_api_key');
                    if (!apiKey) {
                        apiKey = prompt('请输入通义千问 DashScope API Key（格式：sk-***）');


                        if (apiKey) sessionStorage.setItem('qwen_api_key', apiKey);
                    }
                    const headers = { 'Content-Type': 'application/json' };
                    if (apiKey) headers['Authorization'] = 'Bearer ' + apiKey;
                    return headers;
                } catch (e) {
                    return { 'Content-Type': 'application/json' };
                }


            }


        // 页面加载完成后初始化
        $(function() {
            initializeVideoPlayer();
            initializeTimeline();
            initializeDragAndDrop();
            initializeSliders();
            updateTimelineMarkers();
            initializeTracks();
            if (typeof updateUndoRedoButtons === 'function') { updateUndoRedoButtons(); }
        });


        // 初始化视频播放器
        function initializeVideoPlayer() {
            video = document.getElementById('preview-video');
            const playOverlay = document.getElementById('play-overlay');
            const progressBar = document.getElementById('progress-bar');
            const progressHandle = document.getElementById('progress-handle');
            const currentTimeDisplay = document.getElementById('current-time');
            const totalTimeDisplay = document.getElementById('total-time');

            if (video) {
                // 视频加载完成
                video.addEventListener('loadedmetadata', function() {
                    totalTime = video.duration;
                    totalTimeDisplay.textContent = formatTime(totalTime);
                    hideLoadingOverlay();
                });

                // 视频开始加载
                video.addEventListener('loadstart', function() {
                    showLoadingOverlay();
                });

                // 视频加载错误
                video.addEventListener('error', function() {
                    hideLoadingOverlay();
                    showNotification('错误', '视频加载失败', 'error');
                });

                // 播放状态改变
                video.addEventListener('play', function() {
                    isPlaying = true;
                    playOverlay.style.display = 'none';
                    updatePlayButton();
                });

                video.addEventListener('pause', function() {
                    isPlaying = false;
                    playOverlay.style.display = 'flex';
                    updatePlayButton();
                });

                // 播放进度更新 - 核心同步功能
                video.addEventListener('timeupdate', function() {
                    if (!isDragging) {
                        currentTime = video.currentTime;
                        updateProgress();
                        updateTimelinePlayhead();
                        updateTimecode();

                        // ⭐ 音画同步 - 同步播放所有音频轨道
                        syncAudioTracks(currentTime);

                        // ⭐ 字画同步 - 同步显示字幕
                        syncSubtitleTracks(currentTime);

                        // ⭐ 字音同步 - 确保字幕与音频对齐
                        syncSubtitleWithAudio(currentTime);

	                        // 音频淡入/淡出包络
	                        if (typeof currentEffects !== 'undefined') {
	                            const fadeInSec = parseFloat(currentEffects.fadeIn || 0);
	                            const fadeOutSec = parseFloat(currentEffects.fadeOut || 0);
	                            const dur = video.duration || 0;
	                            let base = ((currentEffects.volume != null ? currentEffects.volume : 100)) / 100;
	                            let vol = base;
	                            if (fadeInSec > 0 && currentTime < fadeInSec) {
	                                vol = base * (currentTime / fadeInSec);
	                            }
	                            if (fadeOutSec > 0 && dur > 0 && currentTime > dur - fadeOutSec) {
	                                const remaining = dur - currentTime;
	                                vol = Math.min(vol, base * (remaining / fadeOutSec));
	                            }
	                            if (!video.muted) {
	                                video.volume = Math.max(0, Math.min(1, vol));
	                            }
	                        }

                    }
                });

                // 视频播放结束
                video.addEventListener('ended', function() {
                    if (isLooping) {
                        // 循环播放
                        video.currentTime = 0;
                        video.play();
                    } else {
                        isPlaying = false;
                        playOverlay.style.display = 'flex';
                        updatePlayButton();
                        resetPlayhead();
                    }
                });

                // 音量改变
                video.addEventListener('volumechange', function() {
                    updateVolumeButton();
                });
            }
        }

        // 初始化时间轴
        function initializeTimeline() {
            // 创建时间标记
            updateTimelineMarkers();

            // 时间轴缩放
            document.getElementById('timeline-zoom').textContent = timelineZoom + '%';

            // 初始化进度条拖拽
            initializeProgressDrag();
        }

        // 初始化轨道
        function initializeTracks() {
            const tracks = ['video-track-1', 'audio-track-1', 'text-track-1'];
            tracks.forEach(trackId => {
                const track = document.getElementById(trackId);
                if (track) {
                    // 初始化轨道拖拽
                    track.addEventListener('dragover', function(e) {
                        e.preventDefault();
                        track.classList.add('border-primary');
                    });

                    track.addEventListener('dragleave', function(e) {
                        e.preventDefault();
                        track.classList.remove('border-primary');
                    });

                    track.addEventListener('drop', function(e) {
                        e.preventDefault();
                        track.classList.remove('border-primary');
                        handleTrackDrop(e.dataTransfer.files, trackId);
                    });
                }
            });
        }

        // 初始化拖拽功能
        function initializeDragAndDrop() {
            const videoContainer = document.getElementById('video-preview-container');

            // 视频预览区域拖拽
            videoContainer.addEventListener('dragover', function(e) {
                e.preventDefault();
                videoContainer.classList.add('border-primary');
            });

            videoContainer.addEventListener('dragleave', function(e) {
                e.preventDefault();
                videoContainer.classList.remove('border-primary');
            });

            videoContainer.addEventListener('drop', function(e) {
                e.preventDefault();
                videoContainer.classList.remove('border-primary');
                handleFileDrop(e.dataTransfer.files);
            });
        }

        // 初始化滑块
        function initializeSliders() {

	            // 通用：将属性变化写入历史（节流）
	            const _throttledHistory = (window.Utils && Utils.throttle) ? Utils.throttle(recordHistory, 600) : recordHistory;
	            const _throttledSave = (window.Utils && Utils.throttle) ? Utils.throttle(saveToHistory, 600) : saveToHistory;
	            const _sliderMap = [
	                ['brightness-slider', '调整亮度', v => v + '%'],
	                ['contrast-slider', '调整对比度', v => v + '%'],
	                ['saturation-slider', '调整饱和度', v => v + '%'],
	                ['hue-slider', '调整色调', v => v + '°'],
	                ['scale-slider', '调整缩放', v => v + '%'],
	                ['rotation-slider', '调整旋转', v => v + '°'],
	                ['position-x-slider', '调整位置X', v => v + 'px'],
	                ['position-y-slider', '调整位置Y', v => v + 'px'],
	                ['fade-in-slider', '设置淡入', v => v + 's'],
	                ['fade-out-slider', '设置淡出', v => v + 's'],
	                ['audio-volume-slider', '调整音量', v => v + '%'],
	                ['speed-slider', '调整播放速度', v => (parseFloat(v).toFixed(2)) + 'x']
	            ];
	            _sliderMap.forEach(([id, action, fmt]) => {
	                const el = document.getElementById(id);
	                if (el) {
	                    el.addEventListener('input', function() {
	                        if (id === 'audio-volume-slider') currentEffects.volume = parseInt(this.value, 10);
	                        if (id === 'fade-in-slider') currentEffects.fadeIn = parseFloat(this.value);
	                        if (id === 'fade-out-slider') currentEffects.fadeOut = parseFloat(this.value);
	                        _throttledHistory(action, fmt(this.value));
	                        if (typeof _throttledSave === 'function') { _throttledSave(); }
	                    });
	                }
	            });

            // 缩放滑块
            const scaleSlider = document.querySelector('input[type="range"][min="0"][max="200"]');
            if (scaleSlider) {
                scaleSlider.addEventListener('input', function() {
                    document.getElementById('scale-value').textContent = this.value + '%';
                });
            }

            // 旋转滑块
            const rotationSlider = document.querySelector('input[type="range"][min="0"][max="360"]');
            if (rotationSlider) {
                rotationSlider.addEventListener('input', function() {
                    document.getElementById('rotation-value').textContent = this.value + '°';
                });
            }

            // 音量滑块
            const volumeSlider = document.querySelector('input[type="range"][min="0"][max="100"]');
            if (volumeSlider) {
                volumeSlider.addEventListener('input', function() {
                    changeVolume(this.value);
                });
            }
        }

        // 初始化进度条拖拽
        function initializeProgressDrag() {
            const progressHandle = document.getElementById('progress-handle');
            const progressContainer = document.querySelector('.w-full.h-2.bg-dark-lighter');

            if (progressHandle && progressContainer) {
                // 鼠标按下开始拖拽
                progressHandle.addEventListener('mousedown', function(e) {
                    isDragging = true;
                    document.addEventListener('mousemove', onDragMove);
                    document.addEventListener('mouseup', onDragEnd);
                    e.preventDefault();
                });

                // 进度条点击跳转
                progressContainer.addEventListener('click', function(e) {
                    if (!isDragging) {
                        seekVideo(e);
                    }
                });
            }
        }

        // 拖拽移动
        function onDragMove(e) {
            if (!isDragging || !video) return;

            const progressContainer = document.querySelector('.w-full.h-2.bg-dark-lighter');
            const rect = progressContainer.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const progress = Math.max(0, Math.min(1, x / rect.width));

            // 更新进度条
            const progressBar = document.getElementById('progress-bar');
            const progressHandle = document.getElementById('progress-handle');

            progressBar.style.width = (progress * 100) + '%';
            progressHandle.style.left = (progress * 100) + '%';

            // 更新时间显示
            const seekTime = progress * totalTime;
            document.getElementById('current-time').textContent = formatTime(seekTime);
        }

        // 拖拽结束
        function onDragEnd() {
            if (isDragging && video && totalTime > 0) {
                const progressHandle = document.getElementById('progress-handle');
                const progress = parseFloat(progressHandle.style.left) / 100;
                const seekTime = progress * totalTime;

                video.currentTime = seekTime;
                currentTime = seekTime;

                if (isPlaying) {
                    video.play();
                }
            }

            isDragging = false;
            document.removeEventListener('mousemove', onDragMove);
            document.removeEventListener('mouseup', onDragEnd);
        }

        // 处理文件拖拽
        function handleFileDrop(files) {
            if (files.length === 0) return;

            const file = files[0];
            if (file.type.startsWith('video/')) {
                const videoURL = URL.createObjectURL(file);
                video.src = videoURL;
                video.load();
                showNotification('成功', '视频已加载', 'success');
            } else if (file.type.startsWith('audio/')) {
                showNotification('提示', '音频文件请拖放到音频轨道', 'info');
            } else if (file.type.startsWith('image/')) {
                showNotification('提示', '图片文件请拖放到视频轨道', 'info');
            }
        }

        // 处理轨道文件拖拽
        function handleTrackDrop(files, trackId) {
            if (files.length === 0) return;

            const file = files[0];
            const track = document.getElementById(trackId);

            if (trackId.startsWith('video') && (file.type.startsWith('video/') || file.type.startsWith('image/'))) {
                addMediaToTrack(file, track, trackId);
            } else if (trackId.startsWith('audio') && file.type.startsWith('audio/')) {
                addMediaToTrack(file, track, trackId);
            } else if (trackId.startsWith('text')) {
                showNotification('提示', '文字轨道请使用文字工具添加', 'info');
            }
        }

        // 添加媒体到轨道
        function addMediaToTrack(file, track, trackId) {
            const mediaId = 'media-' + Date.now();
            const mediaType = file.type.startsWith('video/') ? 'video' :
                            file.type.startsWith('audio/') ? 'audio' : 'image';

            // 隐藏提示文字
            const placeholder = track.querySelector('.text-xs.text-text-secondary');
            if (placeholder) {
                placeholder.style.display = 'none';
            }

            // 创建媒体元素
            const mediaElement = document.createElement('div');
            mediaElement.className = 'absolute top-1 left-0 h-16 bg-gradient-to-r from-primary/30 to-secondary/30 border border-primary/50 rounded-lg cursor-pointer hover:bg-gradient-to-r from-primary/40 to-secondary/40 transition-all duration-200';
            mediaElement.style.width = '250px';
            mediaElement.style.left = '100px';
            mediaElement.setAttribute('data-type', mediaType);
            mediaElement.setAttribute('data-id', mediaId);

            // 设置图标和时长
            let icon = 'fa-file';
            let duration = '00:00';

            if (mediaType === 'video') {
                icon = 'fa-film';
                duration = '00:15';
            } else if (mediaType === 'audio') {
                icon = 'fa-music';
                duration = '01:30';
            } else if (mediaType === 'image') {
                icon = 'fa-image';
                duration = '00:05';
            }

            mediaElement.innerHTML = `
                <div class="flex items-center justify-between h-full px-2">
                    <div class="flex items-center space-x-2">
                        <i class="fa ${icon} text-white text-sm"></i>
                        <span class="text-xs text-white font-medium truncate max-w-[150px]">${file.name}</span>
                    </div>
                    <span class="text-xs text-white bg-black/30 px-1 rounded">${duration}</span>
                </div>
            `;

            // 双击编辑
            mediaElement.addEventListener('dblclick', function() {
                editMediaProperties(mediaId, trackId);
            });

            // 拖拽调整位置
            makeDraggable(mediaElement, track);

            // 选中效果
            mediaElement.addEventListener('click', function(e) {
                e.stopPropagation();
                selectMediaElement(mediaElement, e);
            });

            track.appendChild(mediaElement);

            // 自动选中
            selectMediaElement(mediaElement);

            // 更新素材统计
            updateMaterialStats();

            showNotification('成功', '媒体已添加到轨道', 'success');
        }

        // 使元素可拖拽和裁剪（支持多选成组拖动、裁剪吸附、历史记录）
        function makeDraggable(element, track) {
            let isDragging = false;
            let isResizing = false;
            let resizeType = null; // 'left' or 'right'
            let offsetX = 0;
            let startX = 0;
            let startWidth = 0;
            let startLeft = 0;
            const trackRect = track.getBoundingClientRect();

            // 组拖动相关
            let movingSet = null; // 本次拖动实际参与的元素集合（同轨）
            let startLeftMap = null; // 元素=>起始left
            let anchorStartLeft = 0; // 触发拖拽元素的起始left

            // 简易吸附参考线
            function showGuide(px) {
                let guide = track.querySelector('.snap-guide');
                if (!guide) {
                    guide = document.createElement('div');
                    guide.className = 'snap-guide';
                    guide.style.position = 'absolute';
                    guide.style.top = '0';
                    guide.style.width = '2px';
                    guide.style.height = '100%';
                    guide.style.background = 'rgba(59,130,246,0.9)';
                    guide.style.zIndex = '50';
                    guide.style.pointerEvents = 'none';
                    track.appendChild(guide);
                }
                guide.style.left = Math.max(0, px) + 'px';
                guide.style.display = 'block';
            }
            function hideGuide() {
                const guide = track.querySelector('.snap-guide');
                if (guide) guide.style.display = 'none';
            }

            // 添加裁剪手柄
            addResizeHandles(element);

            element.addEventListener('mousedown', function(e) {
                // 轨道锁定则不允许交互
                if (window.trackStates && trackStates[track.id] && trackStates[track.id].locked) {
                    return;
                }

                if (e.target.classList.contains('resize-handle-left')) {
                    // 左边缘裁剪
                    isResizing = true;
                    resizeType = 'left';
                    startX = e.clientX;
                    startWidth = parseFloat(element.style.width) || 250;
                    startLeft = parseFloat(element.style.left) || 0;
                    e.stopPropagation();
                    document.addEventListener('mousemove', onResize);
                    document.addEventListener('mouseup', onResizeEnd);
                    return;
                } else if (e.target.classList.contains('resize-handle-right')) {
                    // 右边缘裁剪
                    isResizing = true;
                    resizeType = 'right';
                    startX = e.clientX;
                    startWidth = parseFloat(element.style.width) || 250;
                    startLeft = parseFloat(element.style.left) || 0;
                    e.stopPropagation();
                    document.addEventListener('mousemove', onResize);
                    document.addEventListener('mouseup', onResizeEnd);
                    return;
                }

                // 正常拖拽（支持多选成组）
                isDragging = true;
                const rect = element.getBoundingClientRect();
                offsetX = e.clientX - rect.left + trackRect.left;
                element.style.cursor = 'grabbing';
                element.style.zIndex = '10';

                // 组装 movingSet：若存在多选，取同一轨道的被选元素，否则仅自己
                const inSameTrack = (el) => el && el.parentElement === track;
                if (window.selectedClips && selectedClips.size > 1 && selectedClips.has(element)) {
                    movingSet = Array.from(selectedClips).filter(inSameTrack);
                } else {
                    movingSet = [element];
                }
                startLeftMap = new Map();
                movingSet.forEach(el => startLeftMap.set(el, parseFloat(el.style.left) || 0));
                anchorStartLeft = startLeftMap.get(element) || 0;

                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
                e.stopPropagation();
            });

            function onMouseMove(e) {
                if (!isDragging) return;
                let rawX = e.clientX - trackRect.left - offsetX;
                let snappedX = applySnap(rawX, trackRect.width);

                // 计算 delta（以触发元素为锚点）
                let delta = (snappedX >= 0 ? snappedX : Math.max(0, snappedX)) - anchorStartLeft;

                // 不允许任一元素越过左边界
                let minStartLeft = 0;
                startLeftMap.forEach((l) => { if (l < minStartLeft) minStartLeft = l; });
                const minAllowedDelta = -Math.min(...Array.from(startLeftMap.values()));
                if (delta < minAllowedDelta) delta = minAllowedDelta;

                // 应用移动
                movingSet.forEach(el => {
                    const base = startLeftMap.get(el) || 0;
                    const nx = Math.max(0, base + delta);
                    el.style.left = nx + 'px';
                });

                // 吸附参考线
                if (Math.abs(snappedX - rawX) <= 10) {
                    showGuide(snappedX);
                } else {
                    hideGuide();
                }
            }

            function onMouseUp() {
                if (!isDragging) return;
                isDragging = false;
                hideGuide();
                element.style.cursor = 'pointer';
                element.style.zIndex = '1';
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
                if (typeof saveToHistory === 'function') saveToHistory();
            }

            function onResize(e) {
                if (!isResizing) return;
                const deltaX = e.clientX - startX;

                if (resizeType === 'left') {
                    let newLeft = startLeft + deltaX;
                    let newWidth = startWidth - deltaX;
                    if (newWidth >= 50 && newLeft >= 0) {
                        // 吸附左边缘
                        const snappedLeft = applySnap(newLeft, trackRect.width);
                        if (Math.abs(snappedLeft - newLeft) <= 10) {
                            newLeft = snappedLeft;
                            newWidth = startWidth - (newLeft - startLeft);
                            showGuide(snappedLeft);
                        } else {
                            hideGuide();
                        }
                        if (newWidth >= 50 && newLeft >= 0) {
                            element.style.left = newLeft + 'px';
                            element.style.width = newWidth + 'px';
                            updateClipDuration(element);
                        }
                    }
                } else if (resizeType === 'right') {
                    let newWidth = startWidth + deltaX;
                    if (newWidth >= 50) {
                        // 吸附右边缘（以右侧为基准）
                        const rightEdge = startLeft + newWidth;
                        const snappedRight = applySnap(rightEdge, trackRect.width);
                        if (Math.abs(snappedRight - rightEdge) <= 10) {
                            newWidth = snappedRight - startLeft;
                            showGuide(snappedRight);
                        } else {
                            hideGuide();
                        }
                        if (newWidth >= 50) {
                            element.style.width = newWidth + 'px';
                            updateClipDuration(element);
                        }
                    }
                }
            }

            function onResizeEnd() {
                if (!isResizing) return;
                isResizing = false;
                resizeType = null;
                hideGuide();
                document.removeEventListener('mousemove', onResize);
                document.removeEventListener('mouseup', onResizeEnd);
                showNotification('成功', '素材已裁剪', 'success');
                if (typeof saveToHistory === 'function') saveToHistory();
            }
        }

        // 添加裁剪手柄
        function addResizeHandles(element) {
            // 检查是否已经添加
            if (element.querySelector('.resize-handle-left')) return;

            // 左边缘手柄
            const leftHandle = document.createElement('div');
            leftHandle.className = 'resize-handle-left absolute left-0 top-0 w-2 h-full cursor-ew-resize bg-primary/50 hover:bg-primary opacity-0 hover:opacity-100 transition-opacity';
            leftHandle.style.zIndex = '20';

            // 右边缘手柄
            const rightHandle = document.createElement('div');
            rightHandle.className = 'resize-handle-right absolute right-0 top-0 w-2 h-full cursor-ew-resize bg-primary/50 hover:bg-primary opacity-0 hover:opacity-100 transition-opacity';
            rightHandle.style.zIndex = '20';

            element.appendChild(leftHandle);
            element.appendChild(rightHandle);
        }

        // 更新素材时长显示
        function updateClipDuration(element) {
            const width = parseFloat(element.style.width) || 250;
            const duration = Math.floor(width / 10); // 简化计算：10px = 1秒

            const durationSpan = element.querySelector('.text-xs.text-white.bg-black\\/30');
            if (durationSpan) {
                const minutes = Math.floor(duration / 60);
                const seconds = duration % 60;
                durationSpan.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }
        }

        // 多选状态与工具
        let selectedClips = new Set();
        let lastSelectedClip = null;

        function clearSelection() {
            selectedClips.forEach(el => {
                el.classList.remove('border-primary', 'shadow-lg');
                el.classList.add('border-primary/50');
            });
            selectedClips.clear();
            selectedClip = null;
        }

        function updateSelectionVisuals() {
            const all = document.querySelectorAll('.timeline-track [data-type]');
            all.forEach(el => {
                if (selectedClips.has(el)) {
                    el.classList.remove('border-primary/50');
                    el.classList.add('border-primary', 'shadow-lg');
                } else {
                    el.classList.remove('border-primary', 'shadow-lg');
                    el.classList.add('border-primary/50');
                }
            });
        }

        function getTrackClips(trackEl) {
            return Array.from(trackEl.querySelectorAll('[data-type]')).sort((a,b)=>(parseFloat(a.style.left)||0)-(parseFloat(b.style.left)||0));
        }

        function showMultiSelectionSummary() {
            const nameTarget = document.getElementById('selected-clip-name');
            if (nameTarget) nameTarget.textContent = `已选择 ${selectedClips.size} 个片段`;
        }

        // 选中媒体元素（支持 Ctrl/Shift 多选）
        function selectMediaElement(element, evt) {
            const track = element && element.parentElement;
            // 轨道锁定时忽略
            if (track && window.trackStates && trackStates[track.id] && trackStates[track.id].locked) {
                return;
            }

            const ctrl = evt && (evt.ctrlKey || evt.metaKey);
            const shift = evt && evt.shiftKey;

            if (ctrl) {
                // 切换该元素选中态
                if (selectedClips.has(element)) {
                    selectedClips.delete(element);
                    if (selectedClip === element) selectedClip = null;
                } else {
                    selectedClips.add(element);
                    selectedClip = element;
                    lastSelectedClip = element;
                }
                if (selectedClips.size === 1) {
                    updatePropertiesPanel(element);
                } else {
                    showMultiSelectionSummary();
                }
                updateSelectionVisuals();
                return;
            }

            if (shift && lastSelectedClip && lastSelectedClip.parentElement === track) {
                // 同轨道范围多选
                const clips = getTrackClips(track);
                const a = clips.indexOf(lastSelectedClip);
                const b = clips.indexOf(element);
                if (a !== -1 && b !== -1) {
                    const [start, end] = a <= b ? [a, b] : [b, a];
                    selectedClips.clear();
                    for (let i = start; i <= end; i++) selectedClips.add(clips[i]);
                    selectedClip = element;
                    updateSelectionVisuals();
                    showMultiSelectionSummary();
                    return;
                }
            }

            // 单选
            selectedClips.clear();
            selectedClips.add(element);
            selectedClip = element;
            lastSelectedClip = element;
            updateSelectionVisuals();
            updatePropertiesPanel(element);
            console.log('选中素材:', element.getAttribute('data-id'));
        }

        // 更新属性面板
        function updatePropertiesPanel(element) {
            const mediaType = element.getAttribute('data-type');
            const mediaId = element.getAttribute('data-id');

            // 这里可以添加更新属性面板的逻辑
            console.log('选中媒体:', mediaType, mediaId);
        }

        // 更新时间轴标记
        function updateTimelineMarkers() {
            const container = document.getElementById('timeline-time-markers');
            container.innerHTML = '';

            // 创建时间标记（每5秒一个）
            for (let i = 0; i <= 120; i += 5) {
                const marker = document.createElement('div');
                marker.className = 'flex-1 text-xs text-text-secondary text-center relative';
                marker.textContent = formatTime(i);

                // 添加垂直线
                const line = document.createElement('div');
                line.className = 'absolute top-4 left-1/2 transform -translate-x-1/2 w-px h-3 bg-border-color';
                marker.appendChild(line);

                container.appendChild(marker);
            }
        }

        // 更新时间轴播放头
        function updateTimelinePlayhead() {
            const playhead = document.getElementById('timeline-playhead');
            const timeline = document.querySelector('.timeline-track');

            if (playhead && timeline && totalTime > 0) {
                const progress = (currentTime / totalTime) * 100;
                playhead.style.left = progress + '%';
            }
        }

        // 重置播放头
        function resetPlayhead() {
            const playhead = document.getElementById('timeline-playhead');
            if (playhead) {
                playhead.style.left = '0%';
            }

            if (video) {
                video.currentTime = 0;
                updateProgress();
            }
        }

        // 更新播放按钮
        function updatePlayButton() {
            const btn = document.getElementById('play-btn');
            if (!btn) return;
            btn.innerHTML = isPlaying ? '<i class="fa fa-pause text-sm"></i>' : '<i class="fa fa-play text-sm ml-0.5"></i>';
            btn.setAttribute('aria-pressed', isPlaying ? 'true' : 'false');
        }

        // 更新音量按钮
        function updateVolumeButton() {
            const volumeButton = document.querySelector('.fa-volume-up').parentElement;
            if (volumeButton && video) {
                if (isMuted || video.volume === 0) {
                    volumeButton.innerHTML = '<i class="fa fa-volume-off text-sm"></i>';
                } else if (video.volume < 0.5) {
                    volumeButton.innerHTML = '<i class="fa fa-volume-down text-sm"></i>';
                } else {
                    volumeButton.innerHTML = '<i class="fa fa-volume-up text-sm"></i>';
                }
            }
        }

        // 更新进度条
        function updateProgress() {
            if (totalTime === 0) return;

            const progress = (currentTime / totalTime) * 100;
            const progressBar = document.getElementById('progress-bar');
            const progressHandle = document.getElementById('progress-handle');
            const currentTimeDisplay = document.getElementById('current-time');

            if (!isDragging) {
                progressBar.style.width = progress + '%';
                progressHandle.style.left = progress + '%';
            }

            currentTimeDisplay.textContent = formatTime(currentTime);
        }

        // 格式化时间
        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }

        // ==================== 核心同步功能 ====================

        // ⭐ 音画同步 - 同步播放所有音频轨道
        function syncAudioTracks(currentTime) {
            // 获取所有音频轨道的音频元素
            const audioTracks = document.querySelectorAll('[id^="audio-track-"]');

            audioTracks.forEach(track => {
                const audioElements = track.querySelectorAll('audio');

                audioElements.forEach(audio => {
                    const startTime = parseFloat(audio.getAttribute('data-start-time')) || 0;
                    const duration = parseFloat(audio.getAttribute('data-duration')) || 0;
                    const endTime = startTime + duration;

                    // 判断音频是否应该在当前时间播放
                    if (currentTime >= startTime && currentTime < endTime) {
                        const audioTime = currentTime - startTime;

                        // 音画同步：确保音频时间与视频时间一致
                        if (Math.abs(audio.currentTime - audioTime) > 0.1) {
                            audio.currentTime = audioTime;
                        }

                        // 如果视频在播放，音频也应该播放
                        if (isPlaying && audio.paused) {
                            audio.play().catch(e => console.log('音频播放失败:', e));
                        }
                    } else {
                        // 不在播放时间范围内，暂停音频
                        if (!audio.paused) {
                            audio.pause();
                        }
                    }
                });
            });
        }

        // ⭐ 字画同步 - 同步显示字幕（修复重叠问题）
        function syncSubtitleTracks(currentTime) {
            // 获取所有字幕轨道的字幕元素
            const textTracks = document.querySelectorAll('[id^="text-track-"]');
            const activeSubtitles = [];

            textTracks.forEach((track, trackIndex) => {
                // 检查轨道是否被隐藏
                const trackId = track.id.replace('text-track-', 'text');
                const isMuted = trackStates[trackId] && trackStates[trackId].muted;

                const subtitleElements = track.querySelectorAll('[data-subtitle="true"]');

                subtitleElements.forEach(subtitle => {
                    const startTime = parseFloat(subtitle.getAttribute('data-start-time')) || 0;
                    const duration = parseFloat(subtitle.getAttribute('data-duration')) || 0;
                    const endTime = startTime + duration;
                    const text = subtitle.getAttribute('data-text') || '';

                    // 判断字幕是否应该在当前时间显示
                    if (currentTime >= startTime && currentTime < endTime && !isMuted) {
                        // 字画同步：显示字幕
                        subtitle.style.opacity = '1';
                        subtitle.classList.add('active-subtitle');

                        // 收集激活的字幕，用于分层显示
                        activeSubtitles.push({
                            text: text,
                            element: subtitle,
                            trackIndex: trackIndex,
                            startTime: startTime
                        });
                    } else {
                        // 不在显示时间范围内，隐藏字幕
                        subtitle.style.opacity = '0.5';
                        subtitle.classList.remove('active-subtitle');
                    }
                });
            });

            // 更新字幕叠加层（支持多层字幕不重叠）
            updateSubtitleOverlays(activeSubtitles);
        }

        // 更新字幕叠加层（支持多个字幕分层显示，避免重叠）
        function updateSubtitleOverlays(activeSubtitles) {
            const videoContainer = document.getElementById('video-preview-container');
            if (!videoContainer) return;

            // 清除所有现有的字幕叠加层
            const existingOverlays = videoContainer.querySelectorAll('.subtitle-overlay');
            existingOverlays.forEach(overlay => overlay.remove());

            // 如果没有激活的字幕，直接返回
            if (activeSubtitles.length === 0) return;

            // 按轨道索引排序，确保上层轨道的字幕显示在上方
            activeSubtitles.sort((a, b) => a.trackIndex - b.trackIndex);

            // 为每个激活的字幕创建叠加层
            activeSubtitles.forEach((subtitle, index) => {
                const overlay = document.createElement('div');
                overlay.className = 'subtitle-overlay';

                // 计算垂直位置，避免重叠（从下往上堆叠）
                const bottomOffset = 40 + (index * 60); // 每个字幕间隔60px

                overlay.style.cssText = `
                    position: absolute;
                    bottom: ${bottomOffset}px;
                    left: 50%;
                    transform: translateX(-50%);
                    background: rgba(0, 0, 0, 0.85);
                    color: white;
                    padding: 10px 20px;
                    border-radius: 8px;
                    font-size: 18px;
                    font-weight: 500;
                    max-width: 80%;
                    text-align: center;
                    z-index: ${10 + index};
                    pointer-events: none;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
                    animation: subtitleFadeIn 0.2s ease-out;
                `;

                // 应用自定义样式（如果有）
                const fontSize = subtitle.element.getAttribute('data-fontsize');
                const fontColor = subtitle.element.getAttribute('data-color');
                const bgColor = subtitle.element.getAttribute('data-bgcolor');

                if (fontSize) overlay.style.fontSize = fontSize + 'px';
                if (fontColor) overlay.style.color = fontColor;
                if (bgColor) overlay.style.background = bgColor;

                overlay.textContent = subtitle.text;
                videoContainer.appendChild(overlay);
            });
        }

        // ⭐ 字音同步 - 确保字幕与音频对齐
        function syncSubtitleWithAudio(currentTime) {
            // 获取所有字幕和音频的时间点
            const textTracks = document.querySelectorAll('[id^="text-track-"]');
            const audioTracks = document.querySelectorAll('[id^="audio-track-"]');

            // 检查是否有活跃的音频
            let activeAudio = null;
            audioTracks.forEach(track => {
                const audioElements = track.querySelectorAll('audio');
                audioElements.forEach(audio => {
                    if (!audio.paused) {
                        activeAudio = audio;
                    }
                });
            });

            // 字音同步：如果有音频播放，字幕应该与音频时间对齐
            if (activeAudio) {
                textTracks.forEach(track => {
                    const subtitles = track.querySelectorAll('[data-subtitle="true"]');
                    subtitles.forEach(subtitle => {
                        const startTime = parseFloat(subtitle.getAttribute('data-start-time')) || 0;
                        const audioStartTime = parseFloat(activeAudio.getAttribute('data-start-time')) || 0;

                        // 计算字幕相对于音频的时间偏移
                        const offset = startTime - audioStartTime;
                        const audioTime = activeAudio.currentTime;
                        const syncTime = audioTime + audioStartTime;

                        // 确保字幕与音频精确同步（误差在50ms内）
                        if (Math.abs(syncTime - currentTime) > 0.05) {
                            console.log(`字音同步调整: ${syncTime.toFixed(2)}s`);
                        }
                    });
                });
            }
        }

        // 清除字幕叠加层
        function clearSubtitleOverlay() {
            const overlay = document.getElementById('subtitle-overlay');
            if (overlay) {
                overlay.style.display = 'none';
            }
        }

        // 显示加载遮罩
        function showLoadingOverlay() {
            const overlay = document.getElementById('loading-overlay');
            if (overlay) {
                overlay.classList.remove('hidden');
            }
        }

        // 隐藏加载遮罩
        function hideLoadingOverlay() {
            const overlay = document.getElementById('loading-overlay');
            if (overlay) {
                overlay.classList.add('hidden');
            }
        }

        // 隐藏空状态提示
        function hideEmptyState() {
            const emptyState = document.getElementById('empty-state-overlay');
            if (emptyState) {
                emptyState.classList.add('hidden');
            }
        }

        // 显示空状态提示
        function showEmptyState() {
            const emptyState = document.getElementById('empty-state-overlay');
            if (emptyState) {
                emptyState.classList.remove('hidden');
            }
        }

        // 播放控制函数
        function togglePlay() {
            if (video && video.src) {
                hideEmptyState();
                if (isPlaying) {
                    video.pause();
                } else {
                    video.play();
                }
            } else {
                showNotification('提示', '请先添加视频素材到时间轴', 'info');
            }
        }

        function stopPlay() {
            if (video) {
                video.pause();
                video.currentTime = 0;
                resetPlayhead();

                // 停止时清除字幕叠加层
                clearSubtitleOverlay();

                // 停止所有音频轨道
                const audioTracks = document.querySelectorAll('[id^="audio-track-"] audio');
                audioTracks.forEach(audio => {
                    audio.pause();
                    audio.currentTime = 0;
                });
            }
        }

        function toggleMute() {
            if (video) {
                isMuted = !isMuted;
                video.muted = isMuted;
                updateVolumeButton();
            }
        }

        function changePlaybackRate(rate) {
            if (video) {
                video.playbackRate = rate;
            }
        }

        function changeVolume(volume) {
            if (video) {
                video.volume = volume / 100;
                isMuted = volume == 0;
                updateVolumeButton();


	                // 记录基础音量，供淡入/淡出计算
	                if (typeof currentEffects !== 'undefined') currentEffects.volume = volume;

                // 更新音量显示
                const volumeValue = document.getElementById('volume-value');
                if (volumeValue) {
                    volumeValue.textContent = volume + '%';
                }
            }
        }

        // 进度控制
        function seekVideo(event) {
            if (!video || totalTime === 0) return;

            const progressContainer = document.querySelector('.w-full.h-2.bg-dark-lighter');
            const rect = progressContainer.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const progress = Math.max(0, Math.min(1, x / rect.width));

            video.currentTime = progress * totalTime;
            currentTime = video.currentTime;
            updateProgress();
            updateTimelinePlayhead();
        }

        // 时间轴控制函数
        function zoomInTimeline() {
            timelineZoom = Math.min(timelineZoom + 25, 400);
            document.getElementById('timeline-zoom').textContent = timelineZoom + '%';
            // 这里可以添加实际的缩放逻辑
            updateTimelineMarkers();
        }

        function zoomOutTimeline() {
            timelineZoom = Math.max(timelineZoom - 25, 25);
            document.getElementById('timeline-zoom').textContent = timelineZoom + '%';
            // 这里可以添加实际的缩放逻辑
            updateTimelineMarkers();
        }

        // ==================== 显示优化功能 ====================

        let rulerEnabled = false;
        let gridEnabled = false;
        let currentQuality = '720';

        // 切换画质
        window.changeQuality = function(quality) {
            currentQuality = quality;

            if (video && video.src) {
                // 保存当前播放位置
                const currentTime = video.currentTime;
                const wasPlaying = !video.paused;

                // 这里可以实际切换视频源的分辨率
                // 简化处理：只更新显示
                video.style.maxHeight = quality === '1080' ? '600px' :
                                       quality === '720' ? '450px' : '350px';

                // 恢复播放位置
                video.currentTime = currentTime;
                if (wasPlaying) {
                    video.play();
                }

                showNotification('成功', `已切换到${quality}p画质`, 'success');
                console.log('切换画质:', quality);
            } else {
                showNotification('提示', '请先加载视频', 'info');
            }
        };

        // 切换标尺
        function toggleRuler() {
            rulerEnabled = !rulerEnabled;
            const rulerBtn = document.querySelector('button[onclick="toggleRuler()"]');
            if (rulerBtn) rulerBtn.setAttribute('aria-pressed', rulerEnabled ? 'true' : 'false');

            if (rulerEnabled) {
                rulerBtn.classList.add('bg-primary/20', 'text-primary');
                showRuler();
                showNotification('成功', '已显示标尺', 'success');
            } else {
                rulerBtn.classList.remove('bg-primary/20', 'text-primary');
                hideRuler();
                showNotification('成功', '已隐藏标尺', 'success');
            }

            console.log('标尺显示:', rulerEnabled);
        }

        // 显示标尺
        function showRuler() {
            const timeline = document.querySelector('.relative.overflow-auto.p-4');
            if (!timeline) return;

            // 检查是否已存在标尺
            if (document.getElementById('timeline-ruler')) return;

            const ruler = document.createElement('div');
            ruler.id = 'timeline-ruler';
            ruler.className = 'absolute top-0 left-0 right-0 h-8 bg-dark-lighter/50 border-b border-primary/30 flex items-end px-4';
            ruler.style.zIndex = '5';

            // 添加刻度
            for (let i = 0; i <= 100; i += 5) {
                const mark = document.createElement('div');
                mark.className = 'absolute flex flex-col items-center';
                mark.style.left = (i * 25) + 'px';

                const line = document.createElement('div');
                line.className = 'w-px bg-text-secondary';
                line.style.height = i % 10 === 0 ? '12px' : '6px';

                if (i % 10 === 0) {
                    const label = document.createElement('span');
                    label.className = 'text-xs text-text-secondary';
                    label.textContent = `${i}s`;
                    label.style.marginBottom = '2px';
                    mark.appendChild(label);
                }

                mark.appendChild(line);
                ruler.appendChild(mark);
            }

            timeline.insertBefore(ruler, timeline.firstChild);
        }

        // 隐藏标尺
        function hideRuler() {
            const ruler = document.getElementById('timeline-ruler');
            if (ruler) {
                ruler.remove();
            }
        }

        // 切换网格
        function toggleGrid() {
            gridEnabled = !gridEnabled;
            const gridBtn = document.querySelector('button[onclick="toggleGrid()"]');
            if (gridBtn) gridBtn.setAttribute('aria-pressed', gridEnabled ? 'true' : 'false');

            if (gridEnabled) {
                gridBtn.classList.add('bg-primary/20', 'text-primary');
                showGrid();
                showNotification('成功', '已显示网格', 'success');
            } else {
                gridBtn.classList.remove('bg-primary/20', 'text-primary');
                hideGrid();
                showNotification('成功', '已隐藏网格', 'success');
            }

            console.log('网格显示:', gridEnabled);
        }

        // 显示网格
        function showGrid() {
            const tracks = document.querySelectorAll('.timeline-track');

            tracks.forEach(track => {
                if (track.querySelector('.timeline-grid')) return;

                const grid = document.createElement('div');
                grid.className = 'timeline-grid absolute inset-0 pointer-events-none';
                grid.style.backgroundImage = 'repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(102, 126, 234, 0.1) 19px, rgba(102, 126, 234, 0.1) 20px), repeating-linear-gradient(90deg, transparent, transparent 24px, rgba(102, 126, 234, 0.1) 24px, rgba(102, 126, 234, 0.1) 25px)';
                grid.style.zIndex = '1';

                track.appendChild(grid);
            });
        }

        // 隐藏网格
        function hideGrid() {
            const grids = document.querySelectorAll('.timeline-grid');
            grids.forEach(grid => grid.remove());
        }

        // ==================== 轨道管理功能 ====================

        // 轨道状态管理
        let trackStates = {
            'video-track-1': { muted: false, locked: false },
            'audio-track-1': { muted: false, locked: false },
            'text-track-1': { muted: false, locked: false }
        };

        let trackCounters = {
            video: 1,
            audio: 1,
            text: 1
        };

        // 切换轨道静音
        function toggleTrackMute(trackId) {
            // 兼容旧ID到新ID（如 video1 -> video-track-1）
            const mapId = (id) => {
                if (document.getElementById(id)) return id;
                const m = id.match(/^(video|audio|text)(\d+)$/);
                if (m) {
                    const candidate = `${m[1]}-track-${m[2]}`;
                    if (document.getElementById(candidate)) return candidate;
                }
                return id;
            };
            const resolvedId = mapId(trackId);

            if (!trackStates[resolvedId]) {
                trackStates[resolvedId] = { muted: false, locked: false };
            }

            trackStates[resolvedId].muted = !trackStates[resolvedId].muted;

            // 更新按钮图标（同时尝试旧按钮选择器）
            const muteBtn = document.querySelector(`button[onclick="toggleTrackMute('${trackId}')"] i`) || document.querySelector(`button[onclick="toggleTrackMute('${resolvedId}')"] i`);
            if (muteBtn) {
                if (trackStates[resolvedId].muted) {
                    muteBtn.classList.remove('fa-volume-up', 'fa-eye');
                    muteBtn.classList.add('fa-volume-off', 'fa-eye-slash');
                } else {
                    muteBtn.classList.remove('fa-volume-off', 'fa-eye-slash');
                    muteBtn.classList.add('fa-volume-up', 'fa-eye');
                }
            }

            const status = trackStates[resolvedId].muted ? '已静音' : '已取消静音';
            showNotification('成功', `轨道${status}`, 'success');
            console.log(`轨道${resolvedId}${status}`);
            if (typeof saveHistory === 'function') saveHistory();
        }

        // 切换轨道锁定
        function toggleTrackLock(trackId) {
            // 兼容旧ID到新ID（如 video1 -> video-track-1）
            const mapId = (id) => {
                if (document.getElementById(id)) return id;
                const m = id.match(/^(video|audio|text)(\d+)$/);
                if (m) {
                    const candidate = `${m[1]}-track-${m[2]}`;
                    if (document.getElementById(candidate)) return candidate;
                }
                return id;
            };
            const resolvedId = mapId(trackId);

            if (!trackStates[resolvedId]) {
                trackStates[resolvedId] = { muted: false, locked: false };
            }

            trackStates[resolvedId].locked = !trackStates[resolvedId].locked;

            // 更新按钮图标（同时尝试旧按钮选择器）
            const lockBtn = document.querySelector(`button[onclick="toggleTrackLock('${trackId}')"] i`) || document.querySelector(`button[onclick="toggleTrackLock('${resolvedId}')"] i`);
            if (lockBtn) {
                if (trackStates[resolvedId].locked) {
                    lockBtn.classList.remove('fa-lock');
                    lockBtn.classList.add('fa-unlock');
                } else {
                    lockBtn.classList.remove('fa-unlock');
                    lockBtn.classList.add('fa-lock');
                }
            }

            // 禁用/启用轨道交互
            const track = document.getElementById(resolvedId);
            if (track) {
                if (trackStates[resolvedId].locked) {
                    track.style.pointerEvents = 'none';
                    track.style.opacity = '0.6';
                } else {
                    track.style.pointerEvents = 'auto';
                    track.style.opacity = '1';
                }
            }

            const status = trackStates[resolvedId].locked ? '已锁定' : '已解锁';
            showNotification('成功', `轨道${status}`, 'success');
            console.log(`轨道${resolvedId}${status}`);
            if (typeof saveHistory === 'function') saveHistory();
        }

        // 添加视频轨道
        function addVideoTrack() {
            trackCounters.video++;
            const trackId = `video-track-${trackCounters.video}`;

            const trackHTML = `
                <div class="timeline-track mb-4 p-3 rounded-xl">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center space-x-3">
                            <span class="text-xs font-medium text-text-primary flex items-center">
                                <i class="fa fa-film mr-2 text-primary"></i>
                                视频轨道 ${trackCounters.video}
                            </span>
                            <div class="flex items-center space-x-1">
                                <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackMute('${trackId}')">
                                    <i class="fa fa-volume-up text-xs"></i>
                                    <span class="tooltip-text">静音</span>
                                </button>
                                <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackLock('${trackId}')">
                                    <i class="fa fa-lock text-xs"></i>
                                    <span class="tooltip-text">锁定</span>
                                </button>
                                <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="deleteTrack('${trackId}')">
                                    <i class="fa fa-trash text-xs"></i>
                                    <span class="tooltip-text">删除轨道</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="${trackId}" class="relative h-20 timeline-track rounded-lg border border-border-color flex items-center px-3 min-w-[2500px]">
                        <div class="text-xs text-text-secondary absolute left-3">拖放视频到此处</div>
                    </div>
                </div>
            `;

            // 插入到第一个视频轨道后面
            const firstVideoTrack = document.querySelector('.timeline-track');
            if (firstVideoTrack && firstVideoTrack.parentElement) {
                firstVideoTrack.insertAdjacentHTML('afterend', trackHTML);

                // 初始化新轨道
                const newTrack = document.getElementById(trackId);
                initializeTracks();

                trackStates[trackId] = { muted: false, locked: false };

                showNotification('成功', `已添加视频轨道 ${trackCounters.video}`, 'success');
                console.log('添加视频轨道:', trackId);
                if (typeof saveHistory === 'function') saveHistory();
            }
        }

        // 添加音频轨道
        function addAudioTrack() {
            trackCounters.audio++;
            const trackId = `audio-track-${trackCounters.audio}`;

            const trackHTML = `
                <div class="timeline-track mb-4 p-3 rounded-xl">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center space-x-3">
                            <span class="text-xs font-medium text-text-primary flex items-center">
                                <i class="fa fa-music mr-2 text-secondary"></i>
                                音频轨道 ${trackCounters.audio}
                            </span>
                            <div class="flex items-center space-x-1">
                                <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackMute('${trackId}')">
                                    <i class="fa fa-volume-up text-xs"></i>
                                    <span class="tooltip-text">静音</span>
                                </button>
                                <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackLock('${trackId}')">
                                    <i class="fa fa-lock text-xs"></i>
                                    <span class="tooltip-text">锁定</span>
                                </button>
                                <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="deleteTrack('${trackId}')">
                                    <i class="fa fa-trash text-xs"></i>
                                    <span class="tooltip-text">删除轨道</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="${trackId}" class="relative h-20 timeline-track rounded-lg border border-border-color flex items-center px-3 min-w-[2500px]">
                        <div class="text-xs text-text-secondary absolute left-3">拖放音频到此处</div>
                    </div>
                </div>
            `;

            // 找到音频轨道区域
            const audioTracks = document.querySelectorAll('.timeline-track');
            if (audioTracks.length >= 2 && audioTracks[1].parentElement) {
                audioTracks[1].insertAdjacentHTML('afterend', trackHTML);

                const newTrack = document.getElementById(trackId);
                initializeTracks();

                trackStates[trackId] = { muted: false, locked: false };

                showNotification('成功', `已添加音频轨道 ${trackCounters.audio}`, 'success');
                console.log('添加音频轨道:', trackId);
                if (typeof saveHistory === 'function') saveHistory();
            }
        }

        // 添加文字轨道
        function addTextTrack() {
            trackCounters.text++;
            const trackId = `text-track-${trackCounters.text}`;

            const trackHTML = `
                <div class="timeline-track p-3 rounded-xl">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center space-x-3">
                            <span class="text-xs font-medium text-text-primary flex items-center">
                                <i class="fa fa-font mr-2 text-accent"></i>
                                文字轨道 ${trackCounters.text}
                            </span>
                            <div class="flex items-center space-x-1">
                                <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackMute('${trackId}')">
                                    <i class="fa fa-eye text-xs"></i>
                                    <span class="tooltip-text">隐藏</span>
                                </button>
                                <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackLock('${trackId}')">
                                    <i class="fa fa-lock text-xs"></i>
                                    <span class="tooltip-text">锁定</span>
                                </button>
                                <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="deleteTrack('${trackId}')">
                                    <i class="fa fa-trash text-xs"></i>
                                    <span class="tooltip-text">删除轨道</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="${trackId}" class="relative h-20 timeline-track rounded-lg border border-border-color flex items-center px-3 min-w-[2500px]">
                        <div class="text-xs text-text-secondary absolute left-3">点击添加文字</div>
                    </div>
                </div>
            `;

            // 添加到时间轴末尾
            const timelineContainer = document.querySelector('.relative.overflow-auto.p-4');
            if (timelineContainer) {
                timelineContainer.insertAdjacentHTML('beforeend', trackHTML);

                const newTrack = document.getElementById(trackId);
                initializeTracks();

                trackStates[trackId] = { muted: false, locked: false };

                showNotification('成功', `已添加文字轨道 ${trackCounters.text}`, 'success');
                console.log('添加文字轨道:', trackId);
                if (typeof saveHistory === 'function') saveHistory();
            }
        }

        // 删除轨道
        window.deleteTrack = function(trackId) {
            layer.confirm('确定要删除这个轨道吗？这只会从当前项目时间线中移除该轨道及其素材，不会删除磁盘上的原始文件。', {
                btn: ['确定', '取消'],
                icon: 3,
                title: '确认删除'
            }, function(index) {
                const track = document.getElementById(trackId);
                if (track && track.parentElement && track.parentElement.parentElement) {
                    track.parentElement.parentElement.remove();
                    delete trackStates[trackId];

                    layer.close(index);
                    showNotification('成功', '轨道已删除', 'success');
                    console.log('删除轨道:', trackId);
                    if (typeof saveHistory === 'function') saveHistory();
                }
            });
        };

        // 编辑控制函数

        // 全局变量：存储编辑历史和剪贴板
        let clipboard = null;
        let selectedClip = null;

        // 剪切功能
        function cutClip() {
            if (!selectedClip) {
                showNotification('提示', '请先选择要剪切的素材', 'info');
                return;
            }

            // 保存到剪贴板
            clipboard = {
                element: selectedClip.cloneNode(true),
                type: selectedClip.getAttribute('data-type'),
                id: selectedClip.getAttribute('data-id'),
                position: selectedClip.style.left,
                width: selectedClip.style.width
            };

            // 从轨道移除
            const parent = selectedClip.parentElement;
            selectedClip.remove();
            selectedClip = null;

            // 保存历史
            saveHistory();

            showNotification('成功', '已剪切到剪贴板', 'success');
            console.log('剪切素材:', clipboard);
        }

        // 复制功能
        function copyClip() {
            if (!selectedClip) {
                showNotification('提示', '请先选择要复制的素材', 'info');
                return;
            }

            // 保存到剪贴板
            clipboard = {
                element: selectedClip.cloneNode(true),
                type: selectedClip.getAttribute('data-type'),
                id: selectedClip.getAttribute('data-id'),
                position: selectedClip.style.left,
                width: selectedClip.style.width
            };

            showNotification('成功', '已复制到剪贴板', 'success');
            console.log('复制素材:', clipboard);
        }

        // 粘贴功能
        function pasteClip() {
            if (!clipboard) {
                showNotification('提示', '剪贴板为空', 'info');
                return;
            }

            // 确定粘贴到哪个轨道
            let targetTrack;
            if (clipboard.type === 'video' || clipboard.type === 'image') {
                targetTrack = document.getElementById('video-track-1');
            } else if (clipboard.type === 'audio') {
                targetTrack = document.getElementById('audio-track-1');
            } else {
                targetTrack = document.getElementById('text-track-1');
            }

            if (!targetTrack) {
                showNotification('错误', '找不到目标轨道', 'error');
                return;
            }

            // 创建新元素
            const newElement = clipboard.element.cloneNode(true);
            const newId = 'media-' + Date.now();
            newElement.setAttribute('data-id', newId);

            // 调整位置（偏移一点避免重叠）
            const currentLeft = parseFloat(clipboard.position) || 0;
            newElement.style.left = (currentLeft + 50) + 'px';

            // 添加事件
            newElement.addEventListener('dblclick', function() {
                editMediaProperties(newId, targetTrack.id);
            });

            newElement.addEventListener('click', function(e) {
                e.stopPropagation();
                selectMediaElement(newElement, e);
            });

            makeDraggable(newElement, targetTrack);

            // 添加到轨道
            targetTrack.appendChild(newElement);

            // 隐藏提示文字
            const placeholder = targetTrack.querySelector('.text-xs.text-text-secondary');
            if (placeholder) {
                placeholder.style.display = 'none';
            }

            // 自动选中
            selectMediaElement(newElement);

            // 保存历史
            saveHistory();

            showNotification('成功', '已粘贴素材', 'success');
            console.log('粘贴素材:', newId);
        }

        // 删除功能（支持多选 + 涟漪删除；按住Shift或Alt则不涟漪）
        function deleteClip(e) {
            const hasMulti = window.selectedClips && selectedClips.size > 0;
            const targetExists = hasMulti ? selectedClips.size > 0 : !!selectedClip;
            if (!targetExists) {
                showNotification('提示', '请先选择要删除的素材', 'info');
                return;
            }
            const clipsToDelete = hasMulti ? Array.from(selectedClips) : [selectedClip];
            layer.confirm('确定要删除选中的素材吗？这只会从当前项目时间线中移除这些素材，不会删除磁盘上的原始文件。', {
                btn: ['确定', '取消'],
                icon: 3,
                title: '确认删除'
            }, function(index) {
                const ripple = !(e && (e.shiftKey || e.altKey));
                // 按轨道分组
                const groups = {};
                clipsToDelete.forEach(el => {
                    const track = el.parentElement;
                    if (!track) return;
                    const id = track.id || (Math.random()+'');
                    if (!groups[id]) groups[id] = { track, selected: [] };
                    groups[id].selected.push(el);
                });

                if (ripple) {
                    Object.keys(groups).forEach(id => {
                        const { track, selected } = groups[id];
                        // 以左边缘从小到大处理
                        selected.sort((a,b)=>(parseFloat(a.style.left)||0)-(parseFloat(b.style.left)||0));
                        const selSet = new Set(selected);
                        selected.forEach(sel => {
                            const left = parseFloat(sel.style.left) || 0;
                            const width = parseFloat(sel.style.width) || 250;
                            const right = left + width;
                            const siblings = Array.from(track.querySelectorAll('[data-type]')).filter(c => !selSet.has(c));
                            siblings.forEach(c => {
                                const cLeft = parseFloat(c.style.left) || 0;
                                if (cLeft >= right) {
                                    c.style.left = Math.max(0, cLeft - width) + 'px';
                                }
                            });
                        });
                    });
                }

                // 真正移除
                clipsToDelete.forEach(el => el.remove());

                // 清空选择
                if (window.selectedClips) selectedClips.clear();
                selectedClip = null;

                // 空轨道占位
                Object.keys(groups).forEach(id => {
                    const track = groups[id].track;
                    const remain = track.querySelectorAll('[data-type]');
                    if (remain.length === 0) {
                        const placeholder = track.querySelector('.text-xs.text-text-secondary');
                        if (placeholder) placeholder.style.display = 'block';
                    }
                });

                if (typeof saveToHistory === 'function') saveToHistory(); else if (typeof saveHistory === 'function') saveHistory();
                updateMaterialStats();

                layer.close(index);
                const count = clipsToDelete.length;
                const tip = ripple ? `已删除素材${count}个（已涟漪收缩）` : `已删除素材${count}个`;
                showNotification('成功', tip, 'success');
            });
        }

        // 保存编辑历史
        function saveHistory() {
            // 兼容旧调用：委托到统一的历史记录实现
            if (typeof saveToHistory === 'function') {
                saveToHistory();
            }
        }


        // ==================== 转场和特效功能 ====================

        // 添加转场效果
        function addTransition() {
            if (!selectedClip) {
                showNotification('提示', '请先选中一个素材', 'info');
                return;
            }

            layer.open({
                type: 1,
                title: '选择转场效果',
                area: ['400px', '500px'],
                content: `
                    <div class="p-6">
                        <div class="space-y-3">
                            <button class="w-full px-4 py-3 glass-card text-text-primary rounded-lg text-sm hover:border-primary/30 text-left transition-all" onclick="applyTransition('fade')">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <i class="fa fa-circle-o mr-2 text-primary"></i>
                                        <span class="font-medium">淡入淡出</span>
                                    </div>
                                    <i class="fa fa-chevron-right text-text-secondary"></i>
                                </div>
                                <p class="text-xs text-text-secondary mt-1 ml-6">平滑的淡入淡出效果</p>
                            </button>

                            <button class="w-full px-4 py-3 glass-card text-text-primary rounded-lg text-sm hover:border-primary/30 text-left transition-all" onclick="applyTransition('slide')">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <i class="fa fa-arrow-right mr-2 text-secondary"></i>
                                        <span class="font-medium">滑动</span>
                                    </div>
                                    <i class="fa fa-chevron-right text-text-secondary"></i>
                                </div>
                                <p class="text-xs text-text-secondary mt-1 ml-6">从一侧滑入的效果</p>
                            </button>

                            <button class="w-full px-4 py-3 glass-card text-text-primary rounded-lg text-sm hover:border-primary/30 text-left transition-all" onclick="applyTransition('zoom')">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <i class="fa fa-search-plus mr-2 text-accent"></i>
                                        <span class="font-medium">缩放</span>
                                    </div>
                                    <i class="fa fa-chevron-right text-text-secondary"></i>
                                </div>
                                <p class="text-xs text-text-secondary mt-1 ml-6">放大或缩小的效果</p>
                            </button>

                            <button class="w-full px-4 py-3 glass-card text-text-primary rounded-lg text-sm hover:border-primary/30 text-left transition-all" onclick="applyTransition('wipe')">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <i class="fa fa-exchange mr-2 text-warning"></i>
                                        <span class="font-medium">擦除</span>
                                    </div>
                                    <i class="fa fa-chevron-right text-text-secondary"></i>
                                </div>
                                <p class="text-xs text-text-secondary mt-1 ml-6">像擦除一样的过渡</p>
                            </button>

                            <button class="w-full px-4 py-3 glass-card text-text-primary rounded-lg text-sm hover:border-primary/30 text-left transition-all" onclick="applyTransition('dissolve')">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <i class="fa fa-star mr-2 text-success"></i>
                                        <span class="font-medium">溶解</span>
                                    </div>
                                    <i class="fa fa-chevron-right text-text-secondary"></i>
                                </div>
                                <p class="text-xs text-text-secondary mt-1 ml-6">像素溶解的效果</p>
                            </button>
                        </div>
                    </div>
                `,
                success: function(layero, index) {
                    // 添加样式
                    layero.find('.glass-card').hover(
                        function() { $(this).css('transform', 'translateX(5px)'); },
                        function() { $(this).css('transform', 'translateX(0)'); }
                    );
                }
            });
        }

        // 应用转场效果
        window.applyTransition = function(transitionType) {
            if (!selectedClip) return;

            // 在素材上添加转场标记
            const transitionMarker = document.createElement('div');
            transitionMarker.className = 'absolute top-0 right-0 bg-primary text-white text-xs px-2 py-1 rounded-bl';
            transitionMarker.innerHTML = '<i class="fa fa-exchange"></i>';
            transitionMarker.title = '转场: ' + transitionType;

            // 移除旧的转场标记
            const oldMarker = selectedClip.querySelector('.absolute.top-0.right-0');
            if (oldMarker) oldMarker.remove();

            selectedClip.appendChild(transitionMarker);
            selectedClip.setAttribute('data-transition', transitionType);

            const transitionNames = {
                'fade': '淡入淡出',
                'slide': '滑动',
                'zoom': '缩放',
                'wipe': '擦除',
                'dissolve': '溶解'
            };

            layer.closeAll();
            showNotification('成功', `已添加${transitionNames[transitionType]}转场`, 'success');
            console.log('添加转场:', transitionType);
        };

        // 添加视频特效
        function addEffect() {
            if (!selectedClip) {
                showNotification('提示', '请先选中一个素材', 'info');
                return;
            }

            layer.open({
                type: 1,
                title: '选择视频特效',
                area: ['400px', '500px'],
                content: `
                    <div class="p-6">
                        <div class="space-y-3">
                            <button class="w-full px-4 py-3 glass-card text-text-primary rounded-lg text-sm hover:border-primary/30 text-left transition-all" onclick="applyEffect('speed-up')">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <i class="fa fa-forward mr-2 text-primary"></i>
                                        <span class="font-medium">快进</span>
                                    </div>
                                    <i class="fa fa-chevron-right text-text-secondary"></i>
                                </div>
                                <p class="text-xs text-text-secondary mt-1 ml-6">2倍速播放</p>
                            </button>

                            <button class="w-full px-4 py-3 glass-card text-text-primary rounded-lg text-sm hover:border-primary/30 text-left transition-all" onclick="applyEffect('slow-motion')">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <i class="fa fa-backward mr-2 text-secondary"></i>
                                        <span class="font-medium">慢动作</span>
                                    </div>
                                    <i class="fa fa-chevron-right text-text-secondary"></i>
                                </div>
                                <p class="text-xs text-text-secondary mt-1 ml-6">0.5倍速播放</p>
                            </button>

                            <button class="w-full px-4 py-3 glass-card text-text-primary rounded-lg text-sm hover:border-primary/30 text-left transition-all" onclick="applyEffect('reverse')">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <i class="fa fa-undo mr-2 text-accent"></i>
                                        <span class="font-medium">倒放</span>
                                    </div>
                                    <i class="fa fa-chevron-right text-text-secondary"></i>
                                </div>
                                <p class="text-xs text-text-secondary mt-1 ml-6">反向播放视频</p>
                            </button>

                            <button class="w-full px-4 py-3 glass-card text-text-primary rounded-lg text-sm hover:border-primary/30 text-left transition-all" onclick="applyEffect('freeze')">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <i class="fa fa-pause mr-2 text-warning"></i>
                                        <span class="font-medium">定格</span>
                                    </div>
                                    <i class="fa fa-chevron-right text-text-secondary"></i>
                                </div>
                                <p class="text-xs text-text-secondary mt-1 ml-6">冻结画面</p>
                            </button>
                        </div>
                    </div>
                `,
                success: function(layero, index) {
                    layero.find('.glass-card').hover(
                        function() { $(this).css('transform', 'translateX(5px)'); },
                        function() { $(this).css('transform', 'translateX(0)'); }
                    );
                }
            });
        }

        // 应用视频特效 - 调用后端API记录配置，并在时间线中做标记
        window.applyEffect = async function(effectType) {
            if (!selectedClip) {
                layer.msg('请先选择一个素材', {icon: 0});
                return;
            }

            console.log(`🎨 应用特效: ${effectType}`);

            const effectNames = {
                'speed-up': '快进',
                'slow-motion': '慢动作',
                'reverse': '倒放',
                'freeze': '定格',
                'blur': '模糊',
                'sharpen': '锐化',
                'grayscale': '黑白',
                'sepia': '怀旧'
            };

            const clipId = selectedClip.getAttribute('data-id');

            layer.closeAll();
            const loadingIndex = layer.load(1, {
                shade: [0.3, '#000'],
                content: `正在应用${effectNames[effectType]}特效...`
            });

            try {
                // 调用后端特效API（当前仅记录配置，不直接修改视频文件）
                const response = await fetch('/api/effects/apply', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        clip_id: clipId,
                        effect_type: effectType,
                        params: {
                            speed: effectType === 'speed-up' ? 2.0 : effectType === 'slow-motion' ? 0.5 : 1.0,
                            reverse: effectType === 'reverse',
                            freeze_duration: effectType === 'freeze' ? 3.0 : 0
                        }
                    })
                }).then(res => res.json());

                layer.close(loadingIndex);

                if (response.code === 0) {
                    console.log('✅ 特效配置已记录:', response.data);

                    // 更新UI
                    selectedClip.setAttribute('data-effect', effectType);

                    // 添加特效标记
                    const effectBadge = document.createElement('div');
                    effectBadge.className = 'effect-badge';
                    effectBadge.style = 'position: absolute; top: 2px; right: 2px; background: rgba(102,126,234,0.9); color: white; padding: 2px 6px; border-radius: 4px; font-size: 10px;';
                    effectBadge.textContent = effectNames[effectType];
                    selectedClip.appendChild(effectBadge);

                    const status = response.data && response.data.status;
                    const msgSuffix = status === 'metadata_only'
                        ? '（已记录为时间线配置，当前不会立即修改原视频文件）'
                        : '';
                    layer.msg(`✅ ${effectNames[effectType]}特效已添加到时间线${msgSuffix}`, {icon: 1, time: 2000});

                } else {
                    console.error('❌ 特效配置失败:', response.msg);
                    layer.msg('❌ 特效配置失败: ' + (response.msg || '未知错误'), {icon: 2, time: 2000});
                }
            } catch (error) {
                layer.close(loadingIndex);
                console.error('❌ 特效请求失败:', error);
                layer.msg('❌ 特效服务调用失败，请稍后重试', {icon: 2, time: 2000});
            }
        };

        // 应用滤镜特效 - 调用后端API记录配置，并在时间线中做标记
        window.applyFilter = async function(filterName) {
            console.log(`🎨 应用滤镜: ${filterName}`);

            if (!selectedClip) {
                layer.msg('请先选择一个素材', {icon: 0});
                return;
            }

            const filterNames = {
                'grayscale': '黑白',
                'sepia': '怀旧',
                'blur': '模糊',
                'sharpen': '锐化',
                'brightness': '亮度',
                'contrast': '对比度',
                'saturate': '饱和度',
                'vintage': '复古',
                'warm': '暖色调',
                'cool': '冷色调'
            };

            const loadingIndex = layer.load(1, {
                shade: [0.3, '#000'],
                content: `正在应用${filterNames[filterName]}滤镜...`
            });

            try {
                const clipId = selectedClip.getAttribute('data-id');

                const response = await fetch('/api/effects/apply', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        clip_id: clipId,
                        effect_type: 'filter',
                        params: {
                            filter_name: filterName,
                            intensity: 0.8
                        }
                    })
                }).then(res => res.json());

                layer.close(loadingIndex);

                if (response.code === 0) {
                    console.log('✅ 滤镜配置已记录:', response.data);
                    selectedClip.setAttribute('data-filter', filterName);
                    const status = response.data && response.data.status;
                    const msgSuffix = status === 'metadata_only'
                        ? '（已记录为时间线配置，当前不会立即修改原视频文件）'
                        : '';
                    layer.msg(`✅ ${filterNames[filterName]}滤镜已添加到时间线${msgSuffix}`, {icon: 1, time: 2000});
                } else {
                    layer.msg('❌ 滤镜配置失败: ' + (response.msg || '未知错误'), {icon: 2, time: 2000});
                }
            } catch (error) {
                layer.close(loadingIndex);
                console.error('❌ 滤镜请求失败:', error);
                layer.msg('❌ 滤镜服务调用失败，请稍后重试', {icon: 2, time: 2000});
            }
        };

        // 应用转场效果 - 调用后端API记录配置，并在时间线中做标记
        window.applyTransition = async function(transitionType) {
            console.log(`🎬 应用转场: ${transitionType}`);

            if (!selectedClip) {
                layer.msg('请先选择一个素材', {icon: 0});
                return;
            }

            const transitionNames = {
                'fade': '淡入淡出',
                'dissolve': '溶解',
                'wipe': '擦除',
                'slide': '滑动',
                'zoom': '缩放',
                'rotate': '旋转'
            };

            try {
                const clipId = selectedClip.getAttribute('data-id');

                const response = await fetch('/api/effects/apply', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        clip_id: clipId,
                        effect_type: 'transition',
                        params: {
                            transition_type: transitionType,
                            duration: 1.0
                        }
                    })
                }).then(res => res.json());

                if (response.code === 0) {
                    console.log('✅ 转场配置已记录:', response.data);
                    selectedClip.setAttribute('data-transition', transitionType);
                    const status = response.data && response.data.status;
                    const msgSuffix = status === 'metadata_only'
                        ? '（已记录为时间线配置，当前不会立即修改原视频文件）'
                        : '';
                    layer.msg(`✅ ${transitionNames[transitionType]}转场已添加到时间线${msgSuffix}`, {icon: 1, time: 2000});
                } else {
                    layer.msg('❌ 转场配置失败: ' + (response.msg || '未知错误'), {icon: 2, time: 2000});
                }
            } catch (error) {
                console.error('❌ 转场请求失败:', error);
                layer.msg('❌ 转场服务调用失败，请稍后重试', {icon: 2, time: 2000});
            }
        };

        // 添加文字
        function addText() {
            layer.prompt({
                title: '添加文字',
                formType: 2,
                value: '在此输入文字内容',
                area: ['400px', '200px'],
                btn: ['确定', '取消']
            }, function(value, index, elem) {
                if (value.trim() === '') {
                    showNotification('提示', '文字内容不能为空', 'info');
                    return;
                }

                // 创建文字元素
                const textId = 'text-' + Date.now();
                const textElement = document.createElement('div');
                textElement.className = 'absolute top-1 left-0 h-16 bg-gradient-to-r from-accent/30 to-primary/30 border border-accent/50 rounded-lg cursor-pointer hover:bg-gradient-to-r from-accent/40 to-primary/40 transition-all duration-200';
                textElement.style.width = '200px';
                textElement.style.left = '100px';
                textElement.setAttribute('data-type', 'text');
                textElement.setAttribute('data-id', textId);
                textElement.setAttribute('data-text', value);

                textElement.innerHTML = `
                    <div class="flex items-center justify-between h-full px-2">
                        <div class="flex items-center space-x-2">
                            <i class="fa fa-font text-white text-sm"></i>
                            <span class="text-xs text-white font-medium truncate max-w-[120px]">${value}</span>
                        </div>
                        <span class="text-xs text-white bg-black/30 px-1 rounded">文字</span>
                    </div>
                `;

                // 添加事件
                textElement.addEventListener('dblclick', function() {
                    editText(textId);
                });

                textElement.addEventListener('click', function(e) {
                    e.stopPropagation();
                    selectMediaElement(textElement);
                });

                // 添加到文字轨道
                const textTrack = document.getElementById('text-track-1');
                if (textTrack) {
                    // 隐藏提示文字
                    const placeholder = textTrack.querySelector('.text-xs.text-text-secondary');
                    if (placeholder) placeholder.style.display = 'none';

                    makeDraggable(textElement, textTrack);
                    textTrack.appendChild(textElement);
                    selectMediaElement(textElement);

                    // 更新素材统计
                    updateMaterialStats();

                    layer.close(index);
                    showNotification('成功', '文字已添加', 'success');
                    console.log('添加文字:', value);
                } else {
                    showNotification('错误', '找不到文字轨道', 'error');
                }
            });
        }

        // 编辑文字
        // 编辑字幕/文字 - 完整实现版本，可视化编辑器
        function editText(textId) {
            const textElement = document.querySelector(`[data-id="${textId}"]`);
            if (!textElement) return;

            console.log('📝 编辑字幕:', textId);

            const currentText = textElement.getAttribute('data-text') || '';
            const currentFontSize = textElement.getAttribute('data-fontsize') || '24';
            const currentColor = textElement.getAttribute('data-color') || '#FFFFFF';
            const currentBgColor = textElement.getAttribute('data-bgcolor') || 'rgba(0,0,0,0.5)';

            layer.open({
                type: 1,
                title: '✨ 字幕编辑器',
                area: ['650px', '550px'],
                content: `
                    <div class="p-6" style="background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);">
                        <form class="layui-form" lay-filter="subtitle-form">
                            <!-- 字幕文本 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="color: #333;">📝 字幕文本</label>
                                <div class="layui-input-block">
                                    <textarea id="subtitle-text" class="layui-textarea" placeholder="输入字幕内容" style="min-height: 80px;">${currentText}</textarea>
                                </div>
                            </div>

                            <!-- 字体大小 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="color: #333;">📏 字体大小</label>
                                <div class="layui-input-block">
                                    <input type="range" id="font-size-slider" min="12" max="72" value="${currentFontSize}"
                                           class="w-full" oninput="updateFontSizePreview(this.value)">
                                    <span id="font-size-value" style="color: #667eea; font-weight: bold;">${currentFontSize}px</span>
                                </div>
                            </div>

                            <!-- 字体颜色 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="color: #333;">🎨 字体颜色</label>
                                <div class="layui-input-block">
                                    <input type="color" id="font-color" value="${currentColor}" class="h-10 w-20 cursor-pointer">
                                </div>
                            </div>

                            <!-- 背景颜色 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="color: #333;">🖼️ 背景颜色</label>
                                <div class="layui-input-block">
                                    <input type="color" id="bg-color" value="${currentBgColor.replace('rgba(0,0,0,0.5)', '#000000')}" class="h-10 w-20 cursor-pointer">
                                    <input type="range" id="bg-opacity" min="0" max="100" value="50" class="w-32 ml-4">
                                    <span class="ml-2" style="color: #999;">透明度</span>
                                </div>
                            </div>

                            <!-- 字体样式 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="color: #333;">💎 字体样式</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" id="font-bold" title="粗体" lay-skin="switch">
                                    <input type="checkbox" id="font-italic" title="斜体" lay-skin="switch" class="ml-4">
                                    <input type="checkbox" id="font-underline" title="下划线" lay-skin="switch" class="ml-4">
                                </div>
                            </div>

                            <!-- 预览 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="color: #333;">👁️ 实时预览</label>
                                <div class="layui-input-block">
                                    <div id="subtitle-preview" style="padding: 20px; background: #f0f2f5; border-radius: 8px; min-height: 60px; display: flex; align-items: center; justify-center;">
                                        <span id="preview-text" style="color: ${currentColor}; font-size: ${currentFontSize}px; background: ${currentBgColor}; padding: 8px 16px; border-radius: 4px;">
                                            ${currentText || '预览文字'}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- 按钮 -->
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-normal" onclick="saveSubtitle('${textId}')">
                                        <i class="fa fa-save"></i> 保存字幕
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                                </div>
                            </div>
                        </form>
                    </div>
                `,
                success: function(layero, index) {
                    form.render();

                    // 实时预览更新
                    $('#subtitle-text').on('input', function() {
                        const text = $(this).val() || '预览文字';
                        $('#preview-text').text(text);
                    });

                    $('#font-color').on('change', function() {
                        $('#preview-text').css('color', $(this).val());
                    });

                    $('#bg-color, #bg-opacity').on('change input', function() {
                        const color = $('#bg-color').val();
                        const opacity = $('#bg-opacity').val() / 100;
                        const rgb = color.match(/\w\w/g).map(x => parseInt(x, 16));
                        $('#preview-text').css('background', `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`);
                    });
                }
            });
        }

        // 更新字体大小预览
        window.updateFontSizePreview = function(size) {
            $('#font-size-value').text(size + 'px');
            $('#preview-text').css('font-size', size + 'px');
        };

        // 保存字幕 - 完整实现版本，调用后端API
        window.saveSubtitle = async function(textId) {
            console.log('💾 保存字幕:', textId);

            const text = $('#subtitle-text').val();
            const fontSize = $('#font-size-slider').val();
            const fontColor = $('#font-color').val();
            const bgColor = $('#bg-color').val();
            const bgOpacity = $('#bg-opacity').val() / 100;
            const fontBold = $('#font-bold').is(':checked');
            const fontItalic = $('#font-italic').is(':checked');
            const fontUnderline = $('#font-underline').is(':checked');

            if (!text || !text.trim()) {
                layer.msg('字幕内容不能为空', {icon: 0});
                return;
            }

            const rgb = bgColor.match(/\w\w/g).map(x => parseInt(x, 16));
            const bgColorRgba = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${bgOpacity})`;

            try {
                // 调用真实后端API保存字幕
                const response = await fetch(`/api/subtitle/${textId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        text: text,
                        font_size: parseInt(fontSize),
                        font_color: fontColor,
                        bg_color: bgColorRgba,
                        font_bold: fontBold,
                        font_italic: fontItalic,
                        font_underline: fontUnderline
                    })
                }).then(res => res.json());

                if (response.code === 0) {
                    console.log('✅ 字幕保存成功');

                    // 更新UI
                    const textElement = document.querySelector(`[data-id="${textId}"]`);
                    if (textElement) {
                        textElement.setAttribute('data-text', text);
                        textElement.setAttribute('data-fontsize', fontSize);
                        textElement.setAttribute('data-color', fontColor);
                        textElement.setAttribute('data-bgcolor', bgColorRgba);

                        const textSpan = textElement.querySelector('.text-xs.text-white.font-medium');
                        if (textSpan) {
                            textSpan.textContent = text;
                        }
                    }

                    layer.closeAll();
                    layer.msg('✅ 字幕保存成功！', {icon: 1, time: 2000});
                } else {
                    layer.msg('❌ 保存失败: ' + response.msg, {icon: 2, time: 2000});
                }
            } catch (error) {
                console.error('❌ 保存字幕失败:', error);
                layer.closeAll();
                layer.msg('❌ 保存字幕失败，请稍后重试', {icon: 2, time: 2000});
            }
        };

        // ==================== 第5轮新增功能 ====================

        // 循环播放
        window.toggleLoop = function() {
            isLooping = !isLooping;
            const loopBtn = document.getElementById('loop-btn');
            if (video) { video.loop = isLooping; }

            if (isLooping) {
                loopBtn.classList.add('bg-primary/20', 'text-primary', 'border-primary/30');
                showNotification('成功', '已开启循环播放', 'success');
            } else {
                loopBtn.classList.remove('bg-primary/20', 'text-primary', 'border-primary/30');
                showNotification('成功', '已关闭循环播放', 'success');
            }
            if (loopBtn) loopBtn.setAttribute('aria-pressed', isLooping ? 'true' : 'false');

            console.log('循环播放:', isLooping);
        };

        // 刷新预览
        window.refreshPreview = function() {
            if (video && video.src) {
                const currentSrc = video.src;
                video.src = '';
                setTimeout(() => {
                    video.src = currentSrc;
                    video.load();
                    showNotification('成功', '预览已刷新', 'success');
                }, 100);
            } else {
                showNotification('提示', '没有可刷新的视频', 'info');
            }
        };

        // 更新时间码显示
        function updateTimecode() {
            const hours = Math.floor(currentTime / 3600);
            const minutes = Math.floor((currentTime % 3600) / 60);
            const seconds = Math.floor(currentTime % 60);
            const frames = Math.floor((currentTime % 1) * framerate);

            const timecode = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}:${frames.toString().padStart(2, '0')}`;

            const timecodeDisplay = document.getElementById('timecode-display');
            if (timecodeDisplay) {
                timecodeDisplay.textContent = timecode;
            }
        }

        // 分割素材（改进：在播放头位置分割）
        window.splitClip = function() {
            if (!selectedClip) {
                showNotification('提示', '请先选中要分割的素材', 'info');
                return;
            }

            const track = selectedClip.parentElement;
            const clipLeft = parseFloat(selectedClip.style.left) || 0;
            const clipWidth = parseFloat(selectedClip.style.width) || 250;
            const clipRight = clipLeft + clipWidth;

            // 获取播放头位置（像素）
            const playhead = document.getElementById('timeline-playhead');
            let splitPoint;

            if (playhead) {
                const playheadLeft = parseFloat(playhead.style.left) || 0;

                // 检查播放头是否在素材范围内
                if (playheadLeft >= clipLeft && playheadLeft <= clipRight) {
                    splitPoint = playheadLeft;
                } else {
                    // 如果播放头不在素材内，使用中点
                    splitPoint = clipLeft + clipWidth / 2;
                    showNotification('提示', '播放头不在素材范围内，使用中点分割', 'info');
                }
            } else {
                // 没有播放头，使用中点
                splitPoint = clipLeft + clipWidth / 2;
            }

            // 检查分割点是否有效（至少保留10px）
            if (splitPoint - clipLeft < 10 || clipRight - splitPoint < 10) {
                showNotification('提示', '分割点太靠近边缘，无法分割', 'info');
                return;
            }

            // 创建第二部分
            const secondPart = selectedClip.cloneNode(true);
            const newId = 'media-' + Date.now();
            secondPart.setAttribute('data-id', newId);
            secondPart.style.left = splitPoint + 'px';
            secondPart.style.width = (clipRight - splitPoint) + 'px';

            // 调整第一部分
            selectedClip.style.width = (splitPoint - clipLeft) + 'px';

            // 添加事件
            secondPart.addEventListener('dblclick', function() {
                editMediaProperties(newId, track.id);
            });

            secondPart.addEventListener('click', function(e) {
                e.stopPropagation();
                selectMediaElement(secondPart, e);
            });

            makeDraggable(secondPart, track);

            // 添加到轨道
            track.appendChild(secondPart);

            // 保存历史
            saveHistory();

            showNotification('成功', '素材已在播放头位置分割', 'success');
            console.log('分割素材:', selectedClip.getAttribute('data-id'), '→', newId, '位置:', splitPoint);
        };

        // 合并素材（完善实现）
        window.mergeClips = function() {
            if (!selectedClip) {
                showNotification('提示', '请先选中一个素材作为合并起点', 'info');
                return;
            }

            const track = selectedClip.parentElement;
            const allClips = Array.from(track.querySelectorAll('[data-type]'));

            if (allClips.length < 2) {
                showNotification('提示', '轨道上至少需要两个素材才能合并', 'info');
                return;
            }

            // 按位置排序
            allClips.sort((a, b) => {
                const leftA = parseFloat(a.style.left) || 0;
                const leftB = parseFloat(b.style.left) || 0;
                return leftA - leftB;
            });

            // 找到选中素材的索引
            const selectedIndex = allClips.indexOf(selectedClip);

            // 检查是否有相邻素材
            if (selectedIndex < allClips.length - 1) {
                const nextClip = allClips[selectedIndex + 1];
                const selectedRight = (parseFloat(selectedClip.style.left) || 0) + (parseFloat(selectedClip.style.width) || 250);
                const nextLeft = parseFloat(nextClip.style.left) || 0;

                // 检查是否相邻（允许10px误差）
                if (Math.abs(nextLeft - selectedRight) < 10) {
                    // 合并：扩展第一个素材的宽度
                    const nextWidth = parseFloat(nextClip.style.width) || 250;
                    const newWidth = (parseFloat(selectedClip.style.width) || 250) + nextWidth;
                    selectedClip.style.width = newWidth + 'px';

                    // 删除第二个素材
                    nextClip.remove();

                    // 保存历史
                    saveHistory();

                    showNotification('成功', '已合并相邻素材', 'success');
                    console.log('合并素材:', selectedClip.getAttribute('data-id'), '+', nextClip.getAttribute('data-id'));
                } else {
                    showNotification('提示', '只能合并相邻的素材', 'info');
                }
            } else {
                showNotification('提示', '选中的素材后面没有可合并的素材', 'info');
            }
        };

        // 切换吸附
        window.toggleSnap = function() {
            snapEnabled = !snapEnabled;
            const snapBtn = document.getElementById('snap-btn');

            if (snapEnabled) {
                snapBtn.classList.add('bg-primary/20', 'text-primary', 'border-primary/30');
                showNotification('成功', '已开启吸附', 'success');
            } else {
                snapBtn.classList.remove('bg-primary/20', 'text-primary', 'border-primary/30');
                showNotification('成功', '已关闭吸附', 'success');
            }
            if (snapBtn) snapBtn.setAttribute('aria-pressed', snapEnabled ? 'true' : 'false');

            console.log('吸附功能:', snapEnabled);
        };

        // 应用吸附（在拖拽时调用）
        function applySnap(position, trackWidth) {
            if (!snapEnabled) return position;

            const snapThreshold = 10; // 吸附阈值（像素）
            const timeMarkers = [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]; // 时间标记位置

            // 1) 时间标记吸附
            for (let marker of timeMarkers) {
                if (Math.abs(position - marker) < snapThreshold) {
                    return marker;
                }
            }

            // 2) 播放头吸附
            const container = document.querySelector('.timeline-track');
            const playhead = document.getElementById('timeline-playhead');
            if (container && playhead) {
                const ph = playhead.getBoundingClientRect().left - container.getBoundingClientRect().left;
                if (Math.abs(position - ph) < snapThreshold) {
                    return ph;
                }
            }

            // 3) 其他素材边缘吸附
            const allClips = document.querySelectorAll('.timeline-track [data-type]');
            for (let clip of allClips) {
                if (clip === selectedClip) continue;

                const clipLeft = parseFloat(clip.style.left) || 0;
                const clipWidth = parseFloat(clip.style.width) || 250;
                const clipRight = clipLeft + clipWidth;

                if (Math.abs(position - clipLeft) < snapThreshold) return clipLeft;
                if (Math.abs(position - clipRight) < snapThreshold) return clipRight;
            }

            return position;
        }

        // 素材控制函数已移至全局定义（第59行）
        // function importMedia() - 已在全局定义

        // function refreshMaterials() - 已在全局定义（第281行）

        // 素材过滤功能 - 已在全局定义（第301行），此处注释避免重复
        /*
        window.filterMaterials = function(type) {
            // 更新按钮状态
            const filterButtons = document.querySelectorAll('.material-filter-btn');
            filterButtons.forEach(btn => {
                btn.classList.remove('active', 'bg-gradient-to-r', 'from-primary/20', 'to-secondary/20', 'text-primary', 'border-primary/30');
                btn.classList.add('bg-dark-lighter', 'text-text-secondary');
            });

            const activeBtn = document.querySelector(`.material-filter-btn[data-type="${type}"]`);
            if (activeBtn) {
                activeBtn.classList.remove('bg-dark-lighter', 'text-text-secondary');
                activeBtn.classList.add('active', 'bg-gradient-to-r', 'from-primary/20', 'to-secondary/20', 'text-primary', 'border-primary/30');
            }

            // 过滤素材
            const materials = document.querySelectorAll('.material-item');
            let visibleCount = 0;

            materials.forEach(material => {
                const materialType = material.getAttribute('data-material-type');

                if (type === 'all' || materialType === type || !materialType) {
                    material.style.display = 'block';
                    visibleCount++;
                } else {
                    material.style.display = 'none';
                }
            });

            // 更新素材计数
            updateMaterialCount(type, visibleCount);

            console.log(`过滤类型: ${type}, 显示数量: ${visibleCount}`);
        };
        */

        // 更新素材计数显示
        function updateMaterialCount(type, count) {
            const typeNames = {
                'all': '全部',
                'video': '视频',
                'audio': '音频',
                'image': '图片'
            };

            showNotification('提示', `显示${typeNames[type]}素材: ${count}个`, 'info');
        }

        // 素材搜索功能
        window.searchMaterials = function(keyword) {
            keyword = keyword.toLowerCase().trim();
            const materials = document.querySelectorAll('.material-item');
            let visibleCount = 0;

            materials.forEach(material => {
                // 跳过"添加素材"按钮
                if (!material.hasAttribute('data-material-type')) {
                    return;
                }

                // 获取素材名称
                const nameElement = material.querySelector('.text-xs.text-text-primary');
                const materialName = nameElement ? nameElement.textContent.toLowerCase() : '';

                // 检查是否匹配搜索关键词
                if (keyword === '' || materialName.includes(keyword)) {
                    material.style.display = 'block';
                    visibleCount++;

                    // 高亮匹配的文字
                    if (keyword !== '' && nameElement) {
                        const originalText = nameElement.textContent;
                        const highlightedText = originalText.replace(
                            new RegExp(keyword, 'gi'),
                            match => `<span style="background-color: #667eea; color: white; padding: 0 2px; border-radius: 2px;">${match}</span>`
                        );
                        nameElement.innerHTML = highlightedText;
                    } else if (nameElement) {
                        // 清除高亮
                        nameElement.textContent = nameElement.textContent;
                    }
                } else {
                    material.style.display = 'none';
                }
            });

            // 显示搜索结果提示
            if (keyword !== '') {
                console.log(`搜索"${keyword}": 找到${visibleCount}个结果`);
                if (visibleCount === 0) {
                    showNotification('提示', `未找到包含"${keyword}"的素材`, 'info');
                }
            }
        };

        // 素材筛选功能（全部/视频/音频/图片）
        window.filterMaterials = function(type) {
            // 更新按钮激活态
            const filterButtons = document.querySelectorAll('.material-filter-btn');
            filterButtons.forEach(btn => {
                btn.classList.remove('active', 'bg-gradient-to-r', 'from-primary/20', 'to-secondary/20', 'text-primary', 'border-primary/30');
                btn.classList.add('bg-dark-lighter', 'text-text-secondary');
            });
            const activeBtn = document.querySelector(`.material-filter-btn[data-type="${type}"]`);
            if (activeBtn) {
                activeBtn.classList.add('active', 'bg-gradient-to-r', 'from-primary/20', 'to-secondary/20', 'text-primary', 'border-primary/30');
                activeBtn.classList.remove('bg-dark-lighter', 'text-text-secondary');
            }

            // 过滤素材卡片
            const materials = document.querySelectorAll('.material-item');
            let visibleCount = 0;
            materials.forEach(material => {
                // 跳过“添加素材”入口（无 data-material-type）
                const mtype = material.getAttribute('data-material-type');
                if (!mtype) return;

                if (type === 'all' || mtype === type) {
                    material.style.display = 'block';
                    visibleCount++;
                } else {
                    material.style.display = 'none';
                }
            });

            if (typeof updateMaterialCount === 'function') {
                updateMaterialCount(type, visibleCount);
            }
        };

        // 刷新素材库：从后端拉取并重绘卡片，清空搜索、重置筛选
        window.refreshMaterials = async function() {
            const list = document.getElementById('materials-list');
            const searchInput = document.getElementById('material-search-input');

            // 清空搜索与筛选
            if (searchInput) searchInput.value = '';

            let materials = null;
            try {
                const projectId = sessionStorage.getItem('current_project_id');
                const url = projectId ? `/api/materials?project_id=${encodeURIComponent(projectId)}` : '/api/materials';
                const res = await fetch(url, { method: 'GET' });
                const data = await res.json().catch(() => null);

                // 兼容多种返回格式
                if (Array.isArray(data)) {
                    materials = data;
                } else if (data && Array.isArray(data.materials)) {
                    materials = data.materials;
                } else if (data && data.data && Array.isArray(data.data.materials)) {
                    materials = data.data.materials;
                }
            } catch (err) {
                console.warn('刷新素材库请求失败，将进行本地刷新:', err);
            }

            // 如果拿到 materials，重绘卡片；否则仅做筛选重置
            if (Array.isArray(materials) && list) {
                // 重绘：先恢复“添加素材”入口
                list.innerHTML = '';
                const addTile = document.createElement('div');
                addTile.className = 'material-item glass-card rounded-lg p-3 text-center cursor-pointer hover-scale';
                addTile.onclick = importMedia;
                addTile.innerHTML = `
            <div class="w-full h-20 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-lg mb-2 flex items-center justify-center">
                <i class="fa fa-plus text-primary text-xl"></i>
            </div>
            <p class="text-xs text-text-secondary truncate">添加素材</p>
        `;
                list.appendChild(addTile);

                const formatDuration = (d) => {
                    if (d == null) return '';
                    let sec = 0;
                    if (typeof d === 'number') sec = Math.max(0, Math.round(d));
                    else if (typeof d === 'string') {
                        const num = parseFloat(d); sec = isNaN(num) ? 0 : Math.round(num);
                    }
                    const m = Math.floor(sec / 60).toString().padStart(2, '0');
                    const s = (sec % 60).toString().padStart(2, '0');
                    return `${m}:${s}`;
                };

                const normalizeType = (m) => {
                    const t = (m.type || m.category || m.kind || '').toString().toLowerCase();
                    if (t.includes('video')) return 'video';
                    if (t.includes('audio') || t.includes('music')) return 'audio';
                    if (t.includes('image') || t.includes('img') || t.includes('picture')) return 'image';
                    const name = (m.name || m.filename || '').toLowerCase();
                    if (/\.(mp4|mov|mkv|webm)$/.test(name)) return 'video';
                    if (/\.(mp3|wav|aac|flac|ogg)$/.test(name)) return 'audio';
                    if (/\.(png|jpg|jpeg|gif|webp)$/.test(name)) return 'image';
                    return 'video';
                };

                materials.forEach(m => {
                    const type = normalizeType(m);
                    const card = document.createElement('div');
                    card.className = 'material-item glass-card rounded-lg p-3 text-center cursor-pointer hover-scale';
                    card.setAttribute('data-material-type', type);

                    const cover = document.createElement('div');
                    const gradientMap = {
                        video: 'from-primary/30 to-secondary/30',
                        audio: 'from-accent/30 to-primary/30',
                        image: 'from-yellow-500/30 to-orange-500/30'
                    };
                    cover.className = `w-full h-20 bg-gradient-to-br ${gradientMap[type]} rounded-lg mb-2 flex items-center justify-center relative`;

                    const icon = document.createElement('i');
                    icon.className = type === 'audio' ? 'fa fa-music text-white' : (type === 'image' ? 'fa fa-image text-white' : 'fa fa-film text-white');
                    cover.appendChild(icon);

                    const dur = formatDuration(m.duration);
                    if (dur) {
                        const badge = document.createElement('span');
                        badge.className = 'absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 rounded';
                        badge.textContent = dur;
                        cover.appendChild(badge);
                    }

                    const nameP = document.createElement('p');
                    nameP.className = 'text-xs text-text-primary truncate';
                    nameP.textContent = m.name || m.filename || m.id || '未命名素材';

                    card.appendChild(cover);
                    card.appendChild(nameP);

                    card.addEventListener('click', () => {
                        addMaterialToTimeline({ id: m.id || m.uuid || m.name || 'unknown', type, name: nameP.textContent, duration: m.duration });
                    });

                    list.appendChild(card);
                });

                if (typeof window.filterMaterials === 'function') filterMaterials('all');
                showNotification('成功', `素材库已刷新（${materials.length} 项）`, 'success');
            } else {
                if (typeof window.filterMaterials === 'function') filterMaterials('all');
                showNotification('成功', '素材库已刷新', 'success');
            }
        };


        function addMaterialToTimeline(material) {
            const track = document.getElementById('video-track-1');
            if (!track) return;

            let mType = 'video';
            let displayName = '新素材';

            if (typeof material === 'object' && material) {
                mType = (material.type || 'video').toLowerCase();
                displayName = material.name || material.filename || (material.id ? '素材' + material.id : '新素材');
            }

            if (typeof material === 'string') {
                const materialId = material;
                mType = materialId.startsWith('audio') ? 'audio' : materialId.startsWith('image') ? 'image' : 'video';
                displayName = '素材' + materialId;
            }

            const mockFile = {
                name: displayName,
                type: mType === 'audio' ? 'audio/mp3' : (mType === 'image' ? 'image/png' : 'video/mp4')
            };

            addMediaToTrack(mockFile, track, 'video-track-1');

            // 隐藏空状态提示
            hideEmptyState();

            // 如果是视频素材，设置预览
            if (mType === 'video' && video) {
                video.poster = '';
                const overlay = document.getElementById('play-overlay');
                if (overlay) overlay.classList.remove('hidden');
            }

            // 更新素材统计
            if (typeof updateMaterialStats === 'function') updateMaterialStats();
        }

        // ==================== AI功能完整实现 ====================

        // AI配音
        function openAIVoice() {
            layer.open({
                type: 1,
                title: 'AI配音',
                area: ['700px', '600px'],
                content: `
                    <div class="p-6">
                        <form class="layui-form" lay-filter="ai-voice-form">
                            <!-- 文字输入 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">配音文字</label>
                                <div class="layui-input-block">
                                    <textarea name="text" placeholder="请输入要转换为语音的文字..." class="layui-textarea" rows="6" lay-verify="required"></textarea>
                                    <div class="layui-form-mid layui-word-aux">支持中文、英文，最多500字</div>
                                </div>
                            </div>

                            <!-- 双列网格布局 -->
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">生成引擎</label>
                                        <div class="layui-input-block">
                                            <select name="engine" lay-filter="engine-select">
                                                <option value="edge-tts" selected>Edge TTS（默认）</option>
                                                <option value="voice_clone">声音克隆（本地）</option>
                                                <option value="gtts">gTTS（备用）</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">连接测试</label>
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="openVoiceCloneTest2()">
                                                <i class="fa fa-plug mr-1"></i>测试克隆引擎
                                            </button>
                                            <div class="layui-form-mid layui-word-aux">可留空：读取环境变量 VOICE_CLONE_EXE / VOICE_CLONE_MODEL_DIR 或 config/ai_config.json</div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">音色</label>
                                        <div class="layui-input-block">
                                            <select name="voice" lay-verify="required">
                                                <option value="">请选择音色</option>
                                                <option value="female-1">女声-温柔</option>
                                                <option value="female-2">女声-活泼</option>
                                                <option value="female-3">女声-知性</option>
                                                <option value="male-1">男声-浑厚</option>
                                                <option value="male-2">男声-年轻</option>
                                                <option value="male-3">男声-磁性</option>
                                                <option value="child">童声</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">语速</label>
                                        <div class="layui-input-block">
                                            <div class="flex items-center space-x-3">
                                                <input type="range" name="speed" min="0.5" max="2" step="0.1" value="1" class="flex-1" oninput="updateSpeedValue(this.value)">
                                                <span id="speed-value" class="text-primary font-medium">1.0x</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 音量 -->

                            <!-- 克隆音色（仅在选择“声音克隆”时使用，可不选） -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">克隆音色</label>
                                <div class="layui-input-block">
                                    <select name="vc_voice_id" id="vc-voice-id">
                                        <option value="zh">中文（默认）</option>
                                    </select>
                                    <div class="layui-form-mid layui-word-aux">来源：/api/voice-clone/builtin-voices 动态加载；不选择则用默认 zh</div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">音量</label>
                                <div class="layui-input-block">
                                    <div class="flex items-center space-x-3">
                                        <input type="range" name="volume" min="0" max="100" value="80" class="flex-1" oninput="updateVolumeValueAI(this.value)">
                                        <span id="volume-value-ai" class="text-primary font-medium">80%</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 操作按钮 -->
                            <div class="layui-form-item" style="margin-top: 30px;">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="previewVoice()">
                                        <i class="fa fa-play mr-1"></i>试听
                                    </button>
                                    <button type="button" class="layui-btn" lay-submit lay-filter="generate-voice">
                                        <i class="fa fa-magic mr-1"></i>生成配音
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                                </div>
                            </div>
                        </form>
                    </div>
                `,
                success: function(layero, index) {
                    form.render();

                    // 动态加载克隆音色列表
                    // 初始隐藏/显示克隆音色行
                    const vcSelect = layero[0].querySelector('#vc-voice-id');
                    const vcItem = vcSelect ? vcSelect.closest('.layui-form-item') : null;
                    const engineSel = layero[0].querySelector("select[name='engine']");
                    function updateVCVisibility(val){ if (!vcItem) return; vcItem.style.display = (val === 'voice_clone') ? '' : 'none'; }
                    updateVCVisibility(engineSel ? engineSel.value : 'edge-tts');
                    form.on('select(engine-select)', function(obj){ updateVCVisibility(obj.value); });

                    // 动态加载克隆音色列表
                    (async () => {
                        try {
                            if (typeof fetchVoiceCloneVoices === 'function') {
                                const voices = await fetchVoiceCloneVoices();
                                const sel = layero[0].querySelector('#vc-voice-id');
                                if (sel && Array.isArray(voices) && voices.length) {
                                    sel.innerHTML = '<option value="zh">中文（默认）</option>' + voices.map(v => {
                                        const id = (v.id || v.value || v).toString();
                                        const name = (v.name || v.label || v).toString();
                                        return `<option value="${id}">${name}</option>`;
                                    }).join('');
                                    form.render('select');
                                }
                            }
                        } catch (e) { console.warn('加载克隆音色列表失败', e); }
                    })();

                    // 监听生成配音
                    form.on('submit(generate-voice)', function(data) {
                        generateVoice(data.field, index);
                        return false;
                    });
                }
            });
        }

        // 更新语速显示
        window.updateSpeedValue = function(value) {
            document.getElementById('speed-value').textContent = parseFloat(value).toFixed(1) + 'x';
        };

        // 更新音量显示
        window.updateVolumeValueAI = function(value) {
            document.getElementById('volume-value-ai').textContent = value + '%';
        };

        // 试听配音（调用后端预览接口）
        window.previewVoice = async function() {
            try {
                const textEl = document.querySelector("textarea[name='text']");
                const voiceSel = document.querySelector("select[name='voice']");
                const text = textEl ? textEl.value.trim() : '';
                const voice = voiceSel ? (voiceSel.value || 'female-1') : 'female-1';

                if (!text) {
                    showNotification('提示', '请输入要试听的配音文字', 'warning');
                    return;
                }

                showNotification('提示', '正在生成试听音频...', 'info');

                const res = await fetch('/api/voiceover/preview', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        voice_id: voice,
                        sample_text: text.slice(0, 100)
                    })
                }).then(r => r.json());

                if (res.code === 0 && res.data && (res.data.audio_url || res.data.audio_path)) {
                    const audioUrl = res.data.audio_url || res.data.audio_path;
                    const audio = new Audio(audioUrl);
                    try {
                        await audio.play();
                        showNotification('成功', '试听音频已生成并开始播放', 'success');
                    } catch (e) {
                        console.warn('自动播放被阻止:', e);
                        showNotification('成功', '试听音频已生成，请在配音页面或本地播放器中手动播放', 'success');
                    }
                } else {
                    showNotification('错误', '试听失败：' + (res.msg || '未知错误'), 'error');
                }
            } catch (e) {
                console.error('试听失败:', e);
                showNotification('错误', '试听失败：' + (e.message || '网络错误'), 'error');
            }
        };

        // 生成配音
        async function generateVoice(data, layerIndex) {
            const loadingIndex = layer.load(1, {shade: [0.3, '#000']});
            try {
                const engine = (data.engine || 'edge-tts');
                const basePayload = {
                    text: (data.text || '').trim(),
                    voice_config: {
                        voice: data.voice || 'female-1',
                        speed: parseFloat(data.speed || 1),
                        volume: parseInt(data.volume || 80)
                    }
                };
                if (!basePayload.text) { layer.close(loadingIndex); layer.msg('请输入配音文字', {icon: 2}); return; }
                let res;
                if (engine === 'voice_clone') {
                    const body = { text: basePayload.text, voice_id: (data.vc_voice_id || 'zh'), tts_voice: 'zh', tts_engine: 'pyttsx3' };
                    res = await fetch('/api/voice-clone/tts-generate', {
                        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
                    }).then(r => r.json());
                } else {
                    res = await fetch('/api/voiceover/generate', {
                        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(basePayload)
                    }).then(r => r.json());
                }
                layer.close(loadingIndex);
                if (res.code !== 0) { layer.msg('生成失败：' + (res.msg || '未知错误'), {icon: 2}); return; }
                // Voice Clone TTS 接口返回在 data 下，其余引擎兼容旧结构
                if (!res.result && res.data && (res.data.audio_url || res.data.audio_path)) {
                    res.result = { audio_url: res.data.audio_url || res.data.audio_path };
                }
                if (!res.result || !res.result.audio_url) { layer.msg('生成失败：缺少音频地址', {icon: 2}); return; }
                layer.close(layerIndex);

                // 将音频片段添加到音频轨道（10px = 1s），并挂载真实 <audio> 以便播放同步
                const audioTrack = document.getElementById('audio-track-1');
                if (!audioTrack) return;
                const audioUrl = res.result.audio_url;
                if (!audioUrl) { layer.msg('生成失败：缺少音频地址', {icon: 2}); return; }

                const leftPx = 100 + (audioTrack.querySelectorAll('[data-type="audio"]').length * 20);
                const audioId = 'audio-' + Date.now();

                // 时间块元素
                const el = document.createElement('div');
                el.className = 'absolute top-1 h-16 bg-gradient-to-r from-secondary/30 to-accent/30 border border-secondary/50 rounded-lg cursor-pointer hover:bg-gradient-to-r from-secondary/40 to-accent/40 transition-all duration-200';
                el.style.left = leftPx + 'px';
                el.style.width = '120px'; // 初始宽度，加载后根据真实时长调整
                el.setAttribute('data-type', 'audio');
                el.setAttribute('data-id', audioId);
                el.innerHTML = `
                    <div class="flex items-center justify-between h-full px-2">
                        <div class="flex items-center space-x-2">
                            <i class="fa fa-microphone text-white text-sm"></i>
                            <span class="text-xs text-white font-medium truncate max-w-[200px]">AI配音</span>
                        </div>
                        <span id="time-${audioId}" class="text-xs text-white bg-black/30 px-1 rounded">00:00</span>
                    </div>`;

                // 真实音频元素（用于播放/同步），隐藏显示
                const audio = document.createElement('audio');
                audio.src = audioUrl;
                audio.preload = 'metadata';
                audio.setAttribute('data-start-time', (leftPx / 10).toFixed(2));
                audio.style.display = 'none';
                audio.addEventListener('loadedmetadata', function() {
                    const durationSec = Math.max(1, Math.ceil(audio.duration || 3));
                    audio.setAttribute('data-duration', durationSec);
                    el.style.width = (durationSec * 10) + 'px';
                    const mm = String(Math.floor(durationSec / 60)).padStart(2, '0');
                    const ss = String(Math.floor(durationSec % 60)).padStart(2, '0');
                    const badge = document.getElementById('time-' + audioId);
                    if (badge) badge.textContent = `${mm}:${ss}`;
                });

                // 事件与挂载
                el.addEventListener('click', function(e){ e.stopPropagation(); selectMediaElement(el, e); });
                const placeholder = audioTrack.querySelector('.text-xs.text-text-secondary'); if (placeholder) placeholder.style.display = 'none';
                audioTrack.appendChild(audio);
                makeDraggable(el, audioTrack);
                audioTrack.appendChild(el);
                selectMediaElement(el);

                if (typeof updateMaterialStats === 'function') updateMaterialStats();
                showNotification('成功', 'AI配音已生成并添加到音频轨道', 'success');
            } catch (e) {
                layer.close(loadingIndex);
                layer.msg('生成失败：' + (e.message || '网络错误'), {icon: 2});
            }
        }

        // 自动字幕
        function openAISubtitle() {
            layer.open({
                type: 1,
                title: '自动字幕',
                area: ['700px', '550px'],
                content: `
                    <div class="p-6">
                        <form class="layui-form" lay-filter="ai-subtitle-form">
                            <!-- 视频选择 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">视频源</label>
                                <div class="layui-input-block">
                                    <select name="video" lay-verify="required">
                                        <option value="">请选择视频</option>
                                        <option value="current">当前预览视频</option>
                                        <option value="track">时间轴视频</option>
                                    </select>
                                    <div class="layui-form-mid layui-word-aux">选择要识别字幕的视频</div>
                                </div>
                            </div>

                            <!-- 双列网格布局 -->
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">识别语言</label>
                                        <div class="layui-input-block">
                                            <select name="language" lay-verify="required">
                                                <option value="zh">中文</option>
                                                <option value="en">英文</option>
                                                <option value="auto">自动识别</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">字幕样式</label>
                                        <div class="layui-input-block">
                                            <select name="style">
                                                <option value="default">默认样式</option>
                                                <option value="modern">现代简约</option>
                                                <option value="classic">经典风格</option>
                                                <option value="colorful">多彩风格</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 字幕位置 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">字幕位置</label>
                                <div class="layui-input-block">
                                    <select name="position">
                                        <option value="bottom">底部</option>
                                        <option value="top">顶部</option>
                                        <option value="middle">中间</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 识别设备/计算类型（CPU 优先，可选 GPU） -->
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">识别设备</label>
                                        <div class="layui-input-block">
                                            <select name="asr_device">
                                                <option value="auto" selected>自动</option>
                                                <option value="cpu">CPU</option>
                                                <option value="cuda">GPU (CUDA)</option>
                                            </select>
                                            <div class="layui-form-mid layui-word-aux">无GPU时自动回落CPU</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">计算类型</label>
                                        <div class="layui-input-block">
                                            <select name="asr_compute_type">
                                                <option value="">自动</option>
                                                <option value="int8">int8（CPU推荐）</option>
                                                <option value="float16">float16（GPU推荐）</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 操作按钮 -->
                            <div class="layui-form-item" style="margin-top: 30px;">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" lay-submit lay-filter="generate-subtitle">
                                        <i class="fa fa-magic mr-1"></i>开始识别
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                                </div>
                            </div>
                        </form>
                    </div>
                `,
                success: function(layero, index) {
                    form.render();

                    form.on('submit(generate-subtitle)', function(data) {
                        generateSubtitle(data.field, index);
                        return false;
                    });
                }
            });
        }

        // 生成字幕 - 完整实现版本，调用真实语音识别API
        async function generateSubtitle(data, layerIndex) {
            console.log('🎬 开始生成自动字幕...');
            console.log('📝 字幕参数:', data);

            // 验证是否有视频素材
            const videoTrack = document.getElementById('video-track-1');
            if (!videoTrack || videoTrack.children.length === 0) {
                layer.msg('❌ 请先添加视频素材', {icon: 2, time: 2000});
                return;
            }

            const loadingIndex = layer.load(1, {
                shade: [0.3, '#000'],
                content: '正在识别语音并生成字幕...<br><small>这可能需要几分钟</small>'
            });

            try {
                // 获取当前项目ID或视频文件
                const projectId = sessionStorage.getItem('current_project_id');

                // 调用真实后端API生成字幕
                const response = await fetch('/api/subtitle/generate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        project_id: projectId,
                        language: data.language || 'zh-CN',
                        engine: data.engine || 'whisper',
                        style: data.style || 'default',
                        position: data.position || 'bottom',
                        device: (data.asr_device || 'auto'),
                        compute_type: (data.asr_compute_type || '')
                    })
                }).then(res => res.json());

                layer.close(loadingIndex);

                if (response.code === 0 && response.data) {
                    const subtitles = response.data.subtitles || [];
                    console.log(`✅ 字幕生成成功：${subtitles.length}条`);

                    layer.close(layerIndex);

                    // 添加字幕到文字轨道
                    const textTrack = document.getElementById('text-track-1');
                    if (textTrack) {
                        let leftPos = 100;

                        subtitles.forEach((text, index) => {
                            const textId = 'subtitle-' + Date.now() + '-' + index;
                            const textElement = document.createElement('div');
                            textElement.className = 'absolute top-1 h-16 bg-gradient-to-r from-accent/30 to-primary/30 border border-accent/50 rounded-lg cursor-pointer hover:bg-gradient-to-r from-accent/40 to-primary/40 transition-all duration-200';
                            textElement.style.width = '200px';
                            textElement.style.left = leftPos + 'px';
                            textElement.setAttribute('data-type', 'text');
                            textElement.setAttribute('data-id', textId);
                            textElement.setAttribute('data-text', text);

                            textElement.innerHTML = `
                                <div class="flex items-center justify-between h-full px-2">
                                    <div class="flex items-center space-x-2">
                                        <i class="fa fa-font text-white text-sm"></i>
                                        <span class="text-xs text-white font-medium truncate max-w-[120px]">${text}</span>
                                    </div>
                                    <span class="text-xs text-white bg-black/30 px-1 rounded">字幕</span>
                                </div>
                            `;

                            textElement.addEventListener('dblclick', function() { editText(textId); });
                            textElement.addEventListener('click', function(e) { e.stopPropagation(); selectMediaElement(textElement, e); });

                            makeDraggable(textElement, textTrack);
                            textTrack.appendChild(textElement);
                            leftPos += 250;
                        });

                        const placeholder = textTrack.querySelector('.text-xs.text-text-secondary');
                        if (placeholder) placeholder.style.display = 'none';

                        updateMaterialStats();
                        showNotification('成功', '字幕识别完成，已添加到文字轨道', 'success');
                        console.log('生成字幕:', data);
                    }
                } else {
                    // 未配置/识别失败：使用大模型对用户提供的转写文本进行润色/标点
                    layer.close(layerIndex);
                    const transcript = prompt('未配置实时ASR。请输入/粘贴已有转写文本，系统将用大模型进行标点与润色：');
                    if (!transcript || !transcript.trim()) { layer.msg('已取消', {icon: 0}); return; }

                    const headers = getLLMHeaders();
                    const enhanceRes = await fetch('/api/subtitle/enhance', {
                        method: 'POST',
                        headers,
                        body: JSON.stringify({ provider: 'deepseek', transcript: transcript.trim(), target_lang: 'zh' })
                    }).then(r => r.json());

                    if (enhanceRes.code !== 0 || !enhanceRes.data || !enhanceRes.data.text) {
                        layer.msg('字幕润色失败：' + (enhanceRes.msg || '未知错误'), {icon: 2});
                        return;
                    }

                    const refined = enhanceRes.data.text;
                    const segments = refined.match(/[^。！？!?.]+[。！？!?.]?/g) || [refined];

                    const textTrack = document.getElementById('text-track-1');
                    if (textTrack) {
                        let leftPos = 100;
                        segments.forEach((text, index) => {
                            const textId = 'subtitle-' + Date.now() + '-' + index;
                            const textElement = document.createElement('div');
                            textElement.className = 'absolute top-1 h-16 bg-gradient-to-r from-accent/30 to-primary/30 border border-accent/50 rounded-lg cursor-pointer hover:bg-gradient-to-r from-accent/40 to-primary/40 transition-all duration-200';
                            textElement.style.width = '200px';
                            textElement.style.left = leftPos + 'px';
                            textElement.setAttribute('data-type', 'text');
                            textElement.setAttribute('data-id', textId);
                            textElement.setAttribute('data-text', text);
                            textElement.innerHTML = `
                                <div class="flex items-center justify-between h-full px-2">
                                    <div class="flex items-center space-x-2">
                                        <i class="fa fa-font text-white text-sm"></i>
                                        <span class="text-xs text-white font-medium truncate max-w-[120px]">${text}</span>
                                    </div>
                                    <span class="text-xs text-white bg-black/30 px-1 rounded">字幕</span>
                                </div>`;
                            textElement.addEventListener('dblclick', function() { editText(textId); });
                            textElement.addEventListener('click', function(e) { e.stopPropagation(); selectMediaElement(textElement, e); });
                            makeDraggable(textElement, textTrack);
                            textTrack.appendChild(textElement);
                            leftPos += 250;
                        });
                        const placeholder = textTrack.querySelector('.text-xs.text-text-secondary');
                        if (placeholder) placeholder.style.display = 'none';
                        updateMaterialStats();
                        showNotification('成功', '已基于大模型润色结果添加字幕到时间轴', 'success');
                    }
                }
            }, 3000);
        }

        // 智能剪辑
        function openAIClip() {
            layer.open({
                type: 1,
                title: '智能剪辑',
                area: ['600px', '450px'],
                content: `
                    <div class="p-6">
                        <form class="layui-form">
                            <!-- 双列网格布局 -->
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">剪辑模式</label>
                                        <div class="layui-input-block">
                                            <select name="mode">
                                                <option value="highlight">精彩片段</option>
                                                <option value="scene">场景检测</option>
                                                <option value="rhythm">节奏剪辑</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">剪辑风格</label>
                                        <div class="layui-input-block">
                                            <select name="style">
                                                <option value="fast">快节奏</option>
                                                <option value="normal">正常节奏</option>
                                                <option value="slow">慢节奏</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">目标时长</label>
                                <div class="layui-input-block">
                                    <input type="number" name="duration" value="60" class="layui-input" placeholder="秒">
                                    <div class="layui-form-mid layui-word-aux">智能剪辑到指定时长</div>
                                </div>
                            </div>

                            <div class="layui-form-item" style="margin-top: 30px;">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" onclick="startSmartClip()"><i class="fa fa-magic mr-1"></i>AI方案</button>
                                    <button type="button" class="layui-btn layui-btn-normal" onclick="runSceneDetect()"><i class="fa fa-film mr-1"></i>场景检测（CPU）</button>
                                    <button type="button" class="layui-btn layui-btn-warm" onclick="openAIVision()"><i class="fa fa-eye mr-1"></i>画面分析（Qwen-VL）</button>
                                    <button type="button" class="layui-btn layui-btn-danger" onclick="runSceneVisionFusion()"><i class="fa fa-layer-group mr-1"></i>场景+画面（融合）</button>
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                                </div>
                            </div>
                        </form>
                    </div>
                `,
                success: function() {
                    form.render();
                }
            });
        }

        // 开始智能剪辑 - 使用 LLM 生成剪辑方案（CPU可用）
        window.startSmartClip = async function() {
            console.log('🪄 开始智能剪辑(LLM方案)...');

            const videoTrack = document.getElementById('video-track-1');
            if (!videoTrack || videoTrack.children.length === 0) {
                layer.msg('❌ 请先添加视频素材', {icon: 2, time: 2000});
                return;
            }

            // 读取目标时长
            let targetSeconds = 60;
            try { targetSeconds = parseInt(document.querySelector("input[name='duration']").value) || 60; } catch (_) {}

            const loadingIndex = layer.load(1, {
                shade: [0.3, '#000'],
                content: '正在生成剪辑方案...<br><small>由大模型提供建议</small>'
            });

            try {
                const headers = getLLMHeaders();
                const resp = await fetch('/api/ai/smart-clip/plan', {
                    method: 'POST',
                    headers,
                    body: JSON.stringify({
                        provider: 'deepseek',
                        brief: '根据时间线现有素材生成精彩片段方案',
                        target_seconds: targetSeconds,
                        content_type: '讲解类'
                    })
                }).then(r => r.json());

                layer.close(loadingIndex);

                if (!resp || resp.code !== 0 || !resp.data) {
                    console.warn('智能剪辑后端不可用，使用本地方案:', resp && resp.msg);
                    layer.msg('⚠️ 智能剪辑服务不可用，已使用本地快速方案', {icon: 0, time: 2500});
                    applyLocalSmartClipPlan(targetSeconds);
                    return;
                }

                const plan = (resp.data.plan) || [];
                let clips = [];
                if (Array.isArray(plan) && plan.length) {
                    clips = plan.map((p, i) => {
                        const s = Number(p.start) || i * 5;
                        const d = p.end ? Math.max(1, Number(p.end) - Number(p.start)) : Math.max(1, Number(p.duration) || 3);
                        return { start: s, duration: d };
                    });
                } else if (resp.data.plan_text) {
                    const parts = resp.data.plan_text.match(/[^。！？!?.]+/g) || [];
                    clips = parts.slice(0, 6).map((_, i) => ({ start: i * 5, duration: 3 }));
                }

                const pxPerSec = 10;
                const trackEl = document.getElementById('video-track-1');
                if (trackEl && clips.length) {
                    const baseLeft = 50 + trackEl.querySelectorAll('[data-type="video"]').length * 10;
                    clips.forEach((c, i) => {
                        const id = 'smart-clip-' + Date.now() + '-' + i;
                        const el = document.createElement('div');
                        el.className = 'absolute top-1 h-16 bg-gradient-to-r from-primary/30 to-secondary/30 border border-primary/40 rounded-lg cursor-pointer hover:from-primary/40 hover:to-secondary/40 transition-all duration-200';
                        el.style.left = Math.round((c.start || (i*5)) * pxPerSec + baseLeft) + 'px';
                        el.style.width = Math.max(60, Math.round((c.duration || 3) * pxPerSec)) + 'px';
                        el.setAttribute('data-type','video');
                        el.setAttribute('data-id', id);
                        el.innerHTML = `
                            <div class="flex items-center justify-between h-full px-2">
                                <div class="flex items-center space-x-2">
                                    <i class="fa fa-scissors text-white text-xs"></i>
                                    <span class="text-xs text-white truncate max-w-[140px]">AI片段 #${i+1}</span>
                                </div>
                                <span class="text-xs text-white bg-black/30 px-1 rounded">${Math.round(c.duration||3)}s</span>
                            </div>`;
                        el.addEventListener('click', function(e){ e.stopPropagation(); selectMediaElement(el, e); });
                        makeDraggable(el, trackEl);
                        trackEl.appendChild(el);
                    });
                    const ph = trackEl.querySelector('.text-xs.text-text-secondary'); if (ph) ph.style.display = 'none';
                    if (typeof updateMaterialStats === 'function') updateMaterialStats();
                    showNotification('成功', '已根据方案添加AI剪辑片段', 'success');
                    if (typeof saveHistory === 'function') saveHistory();
                } else {
                    layer.msg('方案生成成功，但未解析到可落地片段', {icon: 0});
                }
            } catch (error) {
                layer.close(loadingIndex);
                console.error('❌ 智能剪辑请求失败:', error);
                layer.msg('⚠️ 智能剪辑服务不可用，已使用本地快速方案', {icon: 0, time: 2500});
                applyLocalSmartClipPlan(targetSeconds);
            }
        };

        // 本地fallback：在无后端智能剪辑服务时，根据目标时长快速生成均匀分布的AI片段
        function applyLocalSmartClipPlan(targetSeconds) {
            const trackEl = document.getElementById('video-track-1');
            if (!trackEl) {
                layer.msg('❌ 找不到视频轨道，无法生成剪辑片段', {icon: 2, time: 2000});
                return;
            }
            const pxPerSec = 10;
            const maxSegments = 6;
            const seconds = Number(targetSeconds) || 60;
            const count = Math.max(1, Math.min(maxSegments, Math.round(seconds / 5) || 1));
            const clips = [];
            for (let i = 0; i < count; i++) {
                clips.push({ start: i * 5, duration: 3 });
            }
            const existing = trackEl.querySelectorAll('[data-type="video"]').length;
            const baseLeft = 50 + existing * 10;
            clips.forEach((c, i) => {
                const id = 'smart-clip-local-' + Date.now() + '-' + i;
                const el = document.createElement('div');
                el.className = 'absolute top-1 h-16 bg-gradient-to-r from-primary/30 to-secondary/30 border border-primary/40 rounded-lg cursor-pointer hover:from-primary/40 hover:to-secondary/40 transition-all duration-200';
                el.style.left = Math.round((c.start || (i * 5)) * pxPerSec + baseLeft) + 'px';
                el.style.width = Math.max(60, Math.round((c.duration || 3) * pxPerSec)) + 'px';
                el.setAttribute('data-type', 'video');
                el.setAttribute('data-id', id);
                el.innerHTML = `
                            <div class="flex items-center justify-between h-full px-2">
                                <div class="flex items-center space-x-2">
                                    <i class="fa fa-scissors text-white text-xs"></i>
                                    <span class="text-xs text-white truncate max-w-[140px]">本地片段 #${i+1}</span>
                                </div>
                                <span class="text-xs text-white bg-black/30 px-1 rounded">${Math.round(c.duration||3)}s</span>
                            </div>`;
                el.addEventListener('click', function(e){ e.stopPropagation(); selectMediaElement(el, e); });
                makeDraggable(el, trackEl);
                trackEl.appendChild(el);
            });
            const ph = trackEl.querySelector('.text-xs.text-text-secondary');
            if (ph) ph.style.display = 'none';
            if (typeof updateMaterialStats === 'function') updateMaterialStats();
            if (typeof saveHistory === 'function') saveHistory();
            showNotification('成功', '已使用本地方案生成 AI 剪辑片段', 'success');
        }

        // ==================== 项目管理功能 ====================

        let currentProjectName = '当前项目';
        let projectList = [];

        // 编辑项目名称
        window.editProjectName = function() {
            layer.prompt({
                title: '编辑项目名称',
                formType: 0,
                value: currentProjectName,
                btn: ['确定', '取消']
            }, function(value, index) {
                if (value.trim() === '') {
                    showNotification('提示', '项目名称不能为空', 'info');
                    return;
                }

                currentProjectName = value.trim();
                document.getElementById('project-name-display').textContent = currentProjectName;

                // 更新最后编辑时间
                updateLastEditTime();

                layer.close(index);
                showNotification('成功', '项目名称已更新', 'success');
            });
        };

        // 更新最后编辑时间
        function updateLastEditTime() {
            const now = new Date();
            const timeStr = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2,'0')}-${now.getDate().toString().padStart(2,'0')} ${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}`;
            document.getElementById('project-last-edit').textContent = '最后编辑: ' + timeStr;
        }

        // 显示项目管理器
        window.showProjectManager = function() {
            layer.open({
                type: 1,
                title: '项目管理',
                area: ['600px', '360px'],
                content: `
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-text-primary mb-3">项目管理已统一到“项目中心”</h3>
                        <p class="text-sm text-text-secondary leading-relaxed">
                            当前编辑器内不再维护单独的示例项目列表。\n\n
                            所有项目（包括混剪、配音等）现已统一在“项目中心”中管理，
                            请前往“项目中心 - 项目列表 / 混剪模式”等板块打开、重命名或删除项目。
                        </p>
                        <div class="mt-6 flex justify-end space-x-2">
                            <button class="layui-btn layui-btn-primary" onclick="window.location.href='/projects'">
                                <i class="fa fa-folder-open mr-1"></i> 打开项目中心
                            </button>
                            <button class="layui-btn layui-btn-primary layui-btn-outline" onclick="layer.closeAll()">
                                稍后再说
                            </button>
                        </div>
                    </div>
                `
            });
        };

        // 新建项目
        window.createNewProject = function() {
            layer.prompt({
                title: '新建项目',
                formType: 0,
                value: '新项目',
                btn: ['创建', '取消']
            }, function(value, index) {
                if (value.trim() === '') {
                    showNotification('提示', '项目名称不能为空', 'info');
                    return;
                }

                layer.close(index);
                layer.closeAll();

                currentProjectName = value.trim();
                document.getElementById('project-name-display').textContent = currentProjectName;
                updateLastEditTime();

                showNotification('成功', '项目已创建: ' + value, 'success');


            });
        };

        // 打开项目
        window.openProject = function(projectName) {
            layer.confirm(`确定要打开项目"${projectName}"吗？当前项目未保存的更改将丢失。`, {
                btn: ['确定', '取消'],
                icon: 3,
                title: '打开项目'
            }, function(index) {
                layer.close(index);
                layer.closeAll();

                currentProjectName = projectName;
                document.getElementById('project-name-display').textContent = projectName;
                updateLastEditTime();

                showNotification('成功', '已打开项目: ' + projectName, 'success');
            });
        };

        // 重命名项目
        window.renameProject = function(oldName) {
            layer.prompt({
                title: '重命名项目',
                formType: 0,
                value: oldName,
                btn: ['确定', '取消']
            }, function(value, index) {
                if (value.trim() === '') {
                    showNotification('提示', '项目名称不能为空', 'info');
                    return;
                }

                layer.close(index);
                showNotification('成功', `项目已重命名: ${oldName} → ${value}`, 'success');
            });
        };

        // 删除项目
        window.deleteProject = function(projectName) {
            layer.confirm(`确定要删除项目"${projectName}"吗？此操作不可恢复！`, {
                btn: ['确定', '取消'],
                icon: 0,
                title: '删除项目'
            }, function(index) {
                layer.close(index);
                showNotification('成功', '项目已删除: ' + projectName, 'success');

                // 刷新项目列表
                setTimeout(() => {
                    showProjectManager();
                }, 500);
            });
        };

        // ==================== 属性面板功能 ====================

        // 当前应用效果的对象
        let currentEffects = {
            brightness: 0,
            contrast: 0,
            saturation: 0,
            hue: 0,
            scale: 100,
            rotation: 0,
            positionX: 0,
            positionY: 0,
            filter: 'none'
        };

        // 扩展效果状态：基础音量与淡入淡出（缺失则初始化）
        currentEffects.volume = (typeof currentEffects.volume === 'number') ? currentEffects.volume : 100;
        currentEffects.fadeIn = (typeof currentEffects.fadeIn === 'number') ? currentEffects.fadeIn : 0;
        currentEffects.fadeOut = (typeof currentEffects.fadeOut === 'number') ? currentEffects.fadeOut : 0;

        // 记录编辑历史（简单版）
        function recordHistory(action, details) {
            try {
                const time = new Date().toLocaleTimeString('zh-CN', {hour12: false});
                const html = '<div class="text-xs p-2 bg-dark-lighter/30 rounded border border-white/5">' +
                             '<div class="text-text-primary font-medium">' + action + '</div>' +
                             '<div class="text-text-secondary">' + details + ' · ' + time + '</div>' +
                             '</div>';
                // 右侧历史列表
                const sideList = document.getElementById('history-list');
                if (sideList) {
                    const empty = sideList.querySelector('.text-center');
                    if (empty) empty.remove();
                    const wrap = document.createElement('div');
                    wrap.innerHTML = html;
                    sideList.prepend(wrap.firstChild);
                }
                // 底部历史列表
                const bottomList = document.getElementById('history-list-inline');
                if (bottomList) {
                    const empty2 = bottomList.querySelector('.text-center');
                    if (empty2) empty2.remove();
                    const wrap2 = document.createElement('div');
                    wrap2.innerHTML = html;
                    bottomList.prepend(wrap2.firstChild);
                }
            } catch (e) { console.warn('recordHistory error', e); }
        }

        // 带节流的历史记录
        const recordHistoryThrottled = (window.Utils && Utils.throttle) ? Utils.throttle(recordHistory, 600) : recordHistory;

        // 预览区临时覆盖提示
        function showTempOverlayMessage(text, duration) {
            const container = document.getElementById('video-preview-container');
            if (!container) return;
            const overlay = document.createElement('div');
            overlay.style.cssText = 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.25);color:#fff;font-weight:600;z-index:40;pointer-events:none;border-radius:12px;';
            overlay.textContent = text;
            container.appendChild(overlay);
            setTimeout(() => overlay.remove(), duration || 1200);
        }

        function showAlignmentGuides(duration) {
            const container = document.getElementById('video-preview-container');
            if (!container) return;
            const wrap = document.createElement('div');
            wrap.style.cssText = 'position:absolute;inset:0;z-index:45;pointer-events:none;';
            const v = document.createElement('div');
            v.style.cssText = 'position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(59,130,246,0.9);transform:translateX(-1px);';
            const h = document.createElement('div');
            h.style.cssText = 'position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(59,130,246,0.9);transform:translateY(-1px);';
            wrap.appendChild(v); wrap.appendChild(h);
            container.appendChild(wrap);
            setTimeout(() => wrap.remove(), duration || 1200);
        }

        function simulateProgressOverlay(title, ms) {
            const container = document.getElementById('video-preview-container');
            if (!container) return;
            const overlay = document.createElement('div');
            overlay.style.cssText = 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.25);color:#fff;font-weight:600;z-index:40;pointer-events:none;border-radius:12px;';
            const label = document.createElement('div');
            label.textContent = title + ' 0%';
            overlay.appendChild(label);
            container.appendChild(overlay);
            let p = 0;
            const interval = setInterval(() => {
                p = Math.min(100, p + 5);
                label.textContent = title + ' ' + p + '%';
                if (p >= 100) {
                    clearInterval(interval);
                    setTimeout(() => overlay.remove(), 200);
                }
            }, Math.max(20, (ms || 1000) / 20));
        }


        // 切换面板展开/收起
        window.togglePanel = function(panelName) {
            const panel = document.getElementById(panelName + '-panel');
            const icon = document.getElementById(panelName + '-icon');

            if (panel.style.display === 'none') {
                panel.style.display = 'block';
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
            } else {
                panel.style.display = 'none';
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
            }
        };

        // 色彩校正函数
        // 统一：属性调整的历史记录（节流）保存函数
        window._throttledSaveEffects = window._throttledSaveEffects || (function(){
            if (typeof saveToHistory === 'function') {
                return (window.Utils && Utils.throttle) ? Utils.throttle(saveToHistory, 600) : saveToHistory;
            }
            return function(){};
        })();

        window.adjustBrightness = function(value) {
            currentEffects.brightness = parseFloat(value);
            const v = String(value);
            const el = document.getElementById('brightness-value'); if (el) el.textContent = v + '%';
            const gel = document.getElementById('grid-brightness-value'); if (gel) gel.textContent = v + '%';
            const gslider = document.getElementById('grid-brightness-slider'); if (gslider && gslider.value !== v) gslider.value = v;
            if (window.selectedClip) { selectedClip.dataset.brightness = v; }
            applyVideoEffects();
            if (window._throttledSaveEffects) window._throttledSaveEffects();
        };

        window.adjustContrast = function(value) {
            currentEffects.contrast = parseFloat(value);
            const v = String(value);
            const el = document.getElementById('contrast-value'); if (el) el.textContent = v + '%';
            const gel = document.getElementById('grid-contrast-value'); if (gel) gel.textContent = v + '%';
            const gslider = document.getElementById('grid-contrast-slider'); if (gslider && gslider.value !== v) gslider.value = v;
            if (window.selectedClip) { selectedClip.dataset.contrast = v; }
            applyVideoEffects();
            if (window._throttledSaveEffects) window._throttledSaveEffects();
        };

        window.adjustSaturation = function(value) {
            currentEffects.saturation = parseFloat(value);
            const v = String(value);
            const el = document.getElementById('saturation-value'); if (el) el.textContent = v + '%';
            const gel = document.getElementById('grid-saturation-value'); if (gel) gel.textContent = v + '%';
            const gslider = document.getElementById('grid-saturation-slider'); if (gslider && gslider.value !== v) gslider.value = v;
            if (window.selectedClip) { selectedClip.dataset.saturation = v; }
            applyVideoEffects();
            if (window._throttledSaveEffects) window._throttledSaveEffects();
        };

        window.adjustHue = function(value) {
            currentEffects.hue = parseFloat(value);
            const v = String(value);
            const el = document.getElementById('hue-value'); if (el) el.textContent = v + '°';
            const gel = document.getElementById('grid-hue-value'); if (gel) gel.textContent = v + '°';
            const gslider = document.getElementById('grid-hue-slider'); if (gslider && gslider.value !== v) gslider.value = v;
            if (window.selectedClip) { selectedClip.dataset.hue = v; }
            applyVideoEffects();
            if (window._throttledSaveEffects) window._throttledSaveEffects();
        };

        window.resetColorCorrection = function() {
            currentEffects.brightness = 0;
            currentEffects.contrast = 0;
            currentEffects.saturation = 0;
            currentEffects.hue = 0;

            // 右栏
            const bs = document.getElementById('brightness-slider'); if (bs) bs.value = 0;
            const cs = document.getElementById('contrast-slider'); if (cs) cs.value = 0;
            const ss = document.getElementById('saturation-slider'); if (ss) ss.value = 0;
            const hs = document.getElementById('hue-slider'); if (hs) hs.value = 0;
            const bv = document.getElementById('brightness-value'); if (bv) bv.textContent = '0%';
            const cv = document.getElementById('contrast-value'); if (cv) cv.textContent = '0%';
            const sv = document.getElementById('saturation-value'); if (sv) sv.textContent = '0%';
            const hv = document.getElementById('hue-value'); if (hv) hv.textContent = '0°';

            // 下方两列网格
            const gbs = document.getElementById('grid-brightness-slider'); if (gbs) gbs.value = 0;
            const gcs = document.getElementById('grid-contrast-slider'); if (gcs) gcs.value = 0;
            const gss = document.getElementById('grid-saturation-slider'); if (gss) gss.value = 0;
            const ghs = document.getElementById('grid-hue-slider'); if (ghs) ghs.value = 0;
            const gbv = document.getElementById('grid-brightness-value'); if (gbv) gbv.textContent = '0%';
            const gcv = document.getElementById('grid-contrast-value'); if (gcv) gcv.textContent = '0%';
            const gsv = document.getElementById('grid-saturation-value'); if (gsv) gsv.textContent = '0%';
            const ghv = document.getElementById('grid-hue-value'); if (ghv) ghv.textContent = '0°';

            if (window.selectedClip) {
                selectedClip.dataset.brightness = '0';
                selectedClip.dataset.contrast = '0';
                selectedClip.dataset.saturation = '0';
                selectedClip.dataset.hue = '0';
            }

            applyVideoEffects();
            if (window._throttledSaveEffects) window._throttledSaveEffects();
            showNotification('成功', '色彩校正已重置', 'success');
        };

        // 位置和变换函数
        window.adjustScale = function(value) {
            currentEffects.scale = parseFloat(value);
            const v = String(value);
            const el = document.getElementById('scale-value'); if (el) el.textContent = v + '%';
            const gel = document.getElementById('grid-scale-value'); if (gel) gel.textContent = v + '%';
            const gslider = document.getElementById('grid-scale-slider'); if (gslider && gslider.value !== v) gslider.value = v;
            if (window.selectedClip) { selectedClip.dataset.scale = v; }
            applyTransform();
            if (window._throttledSaveEffects) window._throttledSaveEffects();
        };

        window.adjustRotation = function(value) {
            currentEffects.rotation = parseFloat(value);
            const v = String(value);
            const el = document.getElementById('rotation-value'); if (el) el.textContent = v + '°';
            const gel = document.getElementById('grid-rotation-value'); if (gel) gel.textContent = v + '°';
            const gslider = document.getElementById('grid-rotation-slider'); if (gslider && gslider.value !== v) gslider.value = v;
            if (window.selectedClip) { selectedClip.dataset.rotation = v; }
            applyTransform();
            if (window._throttledSaveEffects) window._throttledSaveEffects();
        };

        window.adjustPositionX = function(value) {
            currentEffects.positionX = parseFloat(value);
            const v = String(value);
            const el = document.getElementById('position-x-value'); if (el) el.textContent = v;
            const gslider = document.getElementById('grid-position-x-slider'); if (gslider && gslider.value !== v) gslider.value = v;
            if (window.selectedClip) { selectedClip.dataset.posx = v; }
            applyTransform();
            if (window._throttledSaveEffects) window._throttledSaveEffects();
        };

        window.adjustPositionY = function(value) {
            currentEffects.positionY = parseFloat(value);
            const v = String(value);
            const el = document.getElementById('position-y-value'); if (el) el.textContent = v;
            const gslider = document.getElementById('grid-position-y-slider'); if (gslider && gslider.value !== v) gslider.value = v;
            if (window.selectedClip) { selectedClip.dataset.posy = v; }
            applyTransform();
            if (window._throttledSaveEffects) window._throttledSaveEffects();
        };

        window.resetTransform = function() {
            currentEffects.scale = 100;
            currentEffects.rotation = 0;
            currentEffects.positionX = 0;
            currentEffects.positionY = 0;

            // 右栏控件
            const ss = document.getElementById('scale-slider'); if (ss) ss.value = 100;
            const rs = document.getElementById('rotation-slider'); if (rs) rs.value = 0;
            const pxs = document.getElementById('position-x-slider'); if (pxs) pxs.value = 0;
            const pys = document.getElementById('position-y-slider'); if (pys) pys.value = 0;
            const sv = document.getElementById('scale-value'); if (sv) sv.textContent = '100%';
            const rv = document.getElementById('rotation-value'); if (rv) rv.textContent = '0°';
            const pxv = document.getElementById('position-x-value'); if (pxv) pxv.textContent = '0';
            const pyv = document.getElementById('position-y-value'); if (pyv) pyv.textContent = '0';

            // 下方两列网格镜像控件
            const gss = document.getElementById('grid-scale-slider'); if (gss) gss.value = 100;
            const grs = document.getElementById('grid-rotation-slider'); if (grs) grs.value = 0;
            const gpxs = document.getElementById('grid-position-x-slider'); if (gpxs) gpxs.value = 0;
            const gpys = document.getElementById('grid-position-y-slider'); if (gpys) gpys.value = 0;
            const gsv = document.getElementById('grid-scale-value'); if (gsv) gsv.textContent = '100%';
            const grv = document.getElementById('grid-rotation-value'); if (grv) grv.textContent = '0°';

            if (window.selectedClip) {
                selectedClip.dataset.scale = '100';
                selectedClip.dataset.rotation = '0';
                selectedClip.dataset.posx = '0';
                selectedClip.dataset.posy = '0';
            }

            applyTransform();
            if (window._throttledSaveEffects) window._throttledSaveEffects();
            showNotification('成功', '变换已重置', 'success');
        };

        // 应用视频效果
        function applyVideoEffects() {
            if (!video) return;

            const brightness = 100 + parseInt(currentEffects.brightness);
            const contrast = 100 + parseInt(currentEffects.contrast);
            const saturation = 100 + parseInt(currentEffects.saturation);
            const hue = parseInt(currentEffects.hue);

            const filterString = `
                brightness(${brightness}%)
                contrast(${contrast}%)
                saturate(${saturation}%)
                hue-rotate(${hue}deg)
            `.trim();

            video.style.filter = filterString;

            console.log('应用视频效果:', filterString);
        }

        // 应用变换效果
        function applyTransform() {
            if (!video) return;

            const scale = currentEffects.scale / 100;
            const rotation = currentEffects.rotation;
            const x = currentEffects.positionX;
            const y = currentEffects.positionY;

            const transformString = `
                scale(${scale})
                rotate(${rotation}deg)
                translate(${x}px, ${y}px)
            `.trim();

            video.style.transform = transformString;

            console.log('应用变换效果:', transformString);
        }

        // 应用滤镜
        window.applyFilter = function(filterType) {
            currentEffects.filter = filterType;

            if (!video) {
                showNotification('提示', '请先加载视频', 'info');
                return;
            }

            let filterString = '';

            switch(filterType) {
                case 'none':
                    filterString = '';
                    break;
                case 'grayscale':
                    filterString = 'grayscale(100%)';
                    break;
                case 'sepia':
                    filterString = 'sepia(100%)';
                    break;
                case 'blur':
                    filterString = 'blur(5px)';
                    break;
            }

            // 保留色彩校正效果
            const brightness = 100 + parseInt(currentEffects.brightness);
            const contrast = 100 + parseInt(currentEffects.contrast);
            const saturation = 100 + parseInt(currentEffects.saturation);
            const hue = parseInt(currentEffects.hue);

            const combinedFilter = `
                ${filterString}
                brightness(${brightness}%)
                contrast(${contrast}%)
                saturate(${saturation}%)
                hue-rotate(${hue}deg)
            `.trim();

            video.style.filter = combinedFilter;

            const filterNames = {
                'none': '无滤镜',
                'grayscale': '黑白',
                'sepia': '怀旧',
                'blur': '模糊'
            };

            showNotification('成功', `已应用${filterNames[filterType]}滤镜`, 'success');
            console.log('应用滤镜:', filterType);
        };

        // 更新属性面板显示
        function updatePropertiesPanel(element) {
            const mediaType = element.getAttribute('data-type');
            const mediaId = element.getAttribute('data-id');

            // 更新选中素材名称
            const nameElement = element.querySelector('.text-xs.text-white.font-medium');
            const clipName = nameElement ? nameElement.textContent : '未命名素材';
            const nameTarget = document.getElementById('selected-clip-name');
            if (nameTarget) nameTarget.textContent = clipName;

            // 读取该素材的属性到面板与 currentEffects
            const toNum = (v, d) => { const n = parseFloat(v); return isNaN(n) ? d : n; };
            const fx = {
                brightness: toNum(element.dataset.brightness, 0),
                contrast: toNum(element.dataset.contrast, 0),
                saturation: toNum(element.dataset.saturation, 0),
                hue: toNum(element.dataset.hue, 0),
                scale: toNum(element.dataset.scale, 100),
                rotation: toNum(element.dataset.rotation, 0),
                positionX: toNum(element.dataset.posx, 0),
                positionY: toNum(element.dataset.posy, 0),
                volume: toNum(element.dataset.volume, 100),
                fadeIn: toNum(element.dataset.fadein, 0),
                fadeOut: toNum(element.dataset.fadeout, 0)
            };

            currentEffects.brightness = fx.brightness;
            currentEffects.contrast = fx.contrast;
            currentEffects.saturation = fx.saturation;
            currentEffects.hue = fx.hue;
            currentEffects.scale = fx.scale;
            currentEffects.rotation = fx.rotation;
            currentEffects.positionX = fx.positionX;
            currentEffects.positionY = fx.positionY;
            currentEffects.volume = fx.volume;
            currentEffects.fadeIn = fx.fadeIn;
            currentEffects.fadeOut = fx.fadeOut;

            const setVal = (id, val) => { const el = document.getElementById(id); if (el) el.value = val; };
            // 右栏
            setVal('brightness-slider', fx.brightness); const bv = document.getElementById('brightness-value'); if (bv) bv.textContent = fx.brightness + '%';
            setVal('contrast-slider', fx.contrast); const cv = document.getElementById('contrast-value'); if (cv) cv.textContent = fx.contrast + '%';
            setVal('saturation-slider', fx.saturation); const sv = document.getElementById('saturation-value'); if (sv) sv.textContent = fx.saturation + '%';
            setVal('hue-slider', fx.hue); const hv = document.getElementById('hue-value'); if (hv) hv.textContent = fx.hue + '°';
            setVal('scale-slider', fx.scale); const scv = document.getElementById('scale-value'); if (scv) scv.textContent = fx.scale + '%';
            setVal('rotation-slider', fx.rotation); const rv = document.getElementById('rotation-value'); if (rv) rv.textContent = fx.rotation + '°';
            setVal('position-x-slider', fx.positionX); const pxv = document.getElementById('position-x-value'); if (pxv) pxv.textContent = fx.positionX;
            setVal('position-y-slider', fx.positionY); const pyv = document.getElementById('position-y-value'); if (pyv) pyv.textContent = fx.positionY;
            // 下方两列网格镜像
            setVal('grid-brightness-slider', fx.brightness); const gbv = document.getElementById('grid-brightness-value'); if (gbv) gbv.textContent = fx.brightness + '%';
            setVal('grid-contrast-slider', fx.contrast); const gcv = document.getElementById('grid-contrast-value'); if (gcv) gcv.textContent = fx.contrast + '%';
            setVal('grid-saturation-slider', fx.saturation); const gsv = document.getElementById('grid-saturation-value'); if (gsv) gsv.textContent = fx.saturation + '%';
            setVal('grid-hue-slider', fx.hue); const ghv = document.getElementById('grid-hue-value'); if (ghv) ghv.textContent = fx.hue + '°';
            setVal('grid-scale-slider', fx.scale); const gscv = document.getElementById('grid-scale-value'); if (gscv) gscv.textContent = fx.scale + '%';
            setVal('grid-rotation-slider', fx.rotation); const grv = document.getElementById('grid-rotation-value'); if (grv) grv.textContent = fx.rotation + '°';
            setVal('grid-position-x-slider', fx.positionX);
            setVal('grid-position-y-slider', fx.positionY);

            setVal('audio-volume-slider', fx.volume); const av = document.getElementById('audio-volume-value'); if (av) av.textContent = fx.volume + '%';
            setVal('fade-in-slider', fx.fadeIn); const fiv = document.getElementById('fade-in-value'); if (fiv) fiv.textContent = fx.fadeIn + 's';
            setVal('fade-out-slider', fx.fadeOut); const fov = document.getElementById('fade-out-value'); if (fov) fov.textContent = fx.fadeOut + 's';
            // 网格/浮层镜像（避免与右栏 ID 冲突）
            setVal('grid-audio-volume-slider', fx.volume); const gav = document.getElementById('grid-audio-volume-value'); if (gav) gav.textContent = fx.volume + '%';
            setVal('grid-fade-in-slider', fx.fadeIn); const gfiv = document.getElementById('grid-fade-in-value'); if (gfiv) gfiv.textContent = fx.fadeIn + 's';
            setVal('grid-fade-out-slider', fx.fadeOut); const gfov = document.getElementById('grid-fade-out-value'); if (gfov) gfov.textContent = fx.fadeOut + 's';

            applyVideoEffects();
            applyTransform();

            console.log('更新属性面板:', mediaType, mediaId, clipName, fx);
        }

        // 全屏控制
        function toggleFullscreen() {
            const container = document.getElementById('video-preview-container');
            if (container.requestFullscreen) {
                container.requestFullscreen();
            } else if (container.mozRequestFullScreen) {
                container.mozRequestFullScreen();
            } else if (container.webkitRequestFullscreen) {
                container.webkitRequestFullscreen();
            } else if (container.msRequestFullscreen) {
                container.msRequestFullscreen();
            }
        }

        // 媒体编辑函数
        function editMediaProperties(mediaId, trackId) {
            let element = null;
            if (mediaId) element = document.querySelector(`[data-id="${mediaId}"]`);
            if (!element && typeof selectedClip !== 'undefined' && selectedClip) element = selectedClip;
            if (!element) { showNotification('提示', '请先选中一个素材', 'info'); return; }

            const nameEl = element.querySelector('.text-xs.text-white.font-medium');
            const currentName = nameEl ? nameEl.textContent : (element.getAttribute('data-id') || '未命名素材');
            const currentLeft = parseFloat(element.style.left) || 0;
            const currentWidth = parseFloat(element.style.width) || 250;
            const currentOpacity = parseFloat(element.style.opacity || '1');

            const html = `
                <div style="min-width:520px;">
                    <div class="mb-3">
                        <label class="text-sm text-text-secondary">名称</label>
                        <input id="prop-name" value="${currentName}" style="width:100%;padding:10px;border-radius:10px;background:rgba(30,41,59,0.8);border:1px solid rgba(102,126,234,0.3);color:#fff;" />
                    </div>
                    <div class="grid" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                        <div>
                            <label class="text-sm text-text-secondary">起始位置(px)</label>
                            <input id="prop-left" type="number" value="${currentLeft}" min="0" step="1" style="width:100%;padding:10px;border-radius:10px;background:rgba(30,41,59,0.8);border:1px solid rgba(102,126,234,0.3);color:#fff;" />
                        </div>
                        <div>
                            <label class="text-sm text-text-secondary">时长宽度(px)</label>
                            <input id="prop-width" type="number" value="${currentWidth}" min="10" step="1" style="width:100%;padding:10px;border-radius:10px;background:rgba(30,41,59,0.8);border:1px solid rgba(102,126,234,0.3);color:#fff;" />
                        </div>
                    </div>
                    <div class="mt-3">
                        <label class="text-sm text-text-secondary">不透明度 (${Math.round(currentOpacity*100)}%)</label>
                        <input id="prop-opacity" type="range" min="10" max="100" value="${Math.round(currentOpacity*100)}" style="width:100%" />
                    </div>
                </div>`;
            layer.open({
                type:1, title:'编辑素材属性', area:['560px','360px'], content: html,
                btn:['保存','取消'],
                yes: function(index){
                    const newName = (document.getElementById('prop-name')||{}).value || currentName;
                    const newLeft = parseFloat((document.getElementById('prop-left')||{}).value || currentLeft);
                    const newWidth = Math.max(10, parseFloat((document.getElementById('prop-width')||{}).value || currentWidth));
                    const newOpacity = (parseFloat((document.getElementById('prop-opacity')||{}).value || '100')/100);

                    element.style.left = Math.max(0, newLeft) + 'px';
                    element.style.width = newWidth + 'px';
                    element.style.opacity = Math.max(0.1, Math.min(1, newOpacity));
                    if (nameEl) nameEl.textContent = newName;

                    // 更新持续时间显示
                    if (typeof updateClipDuration === 'function') updateClipDuration(element);
                    // 保存历史
                    if (typeof saveHistory === 'function') saveHistory();

                    showNotification('成功', '素材属性已更新', 'success');
                    layer.close(index);
                }
            });
        }

        // 键盘快捷键
        document.addEventListener('keydown', function(e) {
            const tag = (e.target && e.target.tagName || '').toLowerCase();
            const isTypingTarget = tag === 'input' || tag === 'textarea' || (e.target && e.target.isContentEditable);
            // 输入框内的普通按键不拦截（但保留 Ctrl/Meta 快捷键）
            if (isTypingTarget && !(e.ctrlKey || e.metaKey)) {
                return;
            }

            // Ctrl+N 新建
            if (e.ctrlKey && e.key && e.key.toLowerCase() === 'n') {
                e.preventDefault();
                newProject();
                return;
            }

            // Ctrl+S 保存
            if (e.ctrlKey && e.key && e.key.toLowerCase() === 's') {
                e.preventDefault();
                saveProject();
                return;
            }

            // Ctrl+Z 撤销
            if (e.ctrlKey && e.key && e.key.toLowerCase() === 'z') {
                e.preventDefault();
                undoEdit();
                return;
            }

            // Ctrl+Y 重做
            if (e.ctrlKey && e.key && e.key.toLowerCase() === 'y') {
                e.preventDefault();
                redoEdit();
                return;
            }

            // Ctrl+E 导出
            if (e.ctrlKey && e.key && e.key.toLowerCase() === 'e') {
                e.preventDefault();
                exportVideo();
                return;
            }

            // Ctrl+X 剪切 / Ctrl+C 复制 / Ctrl+V 粘贴
            if (e.ctrlKey && e.key && e.key.toLowerCase() === 'x') {
                e.preventDefault();
                cutClip();
                return;
            }
            if (e.ctrlKey && e.key && e.key.toLowerCase() === 'c') {
                e.preventDefault();
                copyClip();
                return;
            }
            if (e.ctrlKey && e.key && e.key.toLowerCase() === 'v') {
                e.preventDefault();
                pasteClip();
                return;
            }

            // 空格 播放/暂停
            if (e.code === 'Space') {
                e.preventDefault();
                togglePlay();
                return;
            }

            // Delete 删除
            if (e.key === 'Delete') {
                e.preventDefault();
                deleteClip(e);
                return;
            }

            // 左右箭头键 前进/后退（Shift 提升步进）
            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
                e.preventDefault();
                if (!video) return;
                const step = e.shiftKey ? 10 : 1;
                const newTime = e.key === 'ArrowLeft' ? Math.max(0, currentTime - step) : Math.min(totalTime, currentTime + step);
                video.currentTime = newTime;
                currentTime = newTime;
                updateProgress();
                updateTimelinePlayhead();
                return;
            }

            // Ctrl++/Ctrl+= 放大时间轴
            if (e.ctrlKey && (e.key === '+' || e.key === '=')) {
                e.preventDefault();
                zoomInTimeline();
                return;
            }
            // Ctrl+- 缩小时间轴
            if (e.ctrlKey && e.key === '-') {
                e.preventDefault();
                zoomOutTimeline();
                return;
            }

            // S 键分割（避免与 Ctrl+S 冲突）
            if ((e.key === 's' || e.key === 'S') && !e.ctrlKey && !e.metaKey) {
                e.preventDefault();
                splitClip();
                return;
            }
        });

        // 窗口大小改变时更新
        window.addEventListener('resize', function() {
            updateTimelineMarkers();
        });

        // ========== 顶部工具栏按钮功能 ==========

        // 新建项目
        window.newProject = function() {
            layer.confirm('新建项目将清空当前项目时间线中的所有素材与编辑操作（不删除磁盘上的原始素材文件）。当前未保存的更改将丢失，是否继续？', {
                btn: ['确定', '取消'],
                icon: 3,
                title: '新建项目'
            }, function(index) {
                layer.close(index);

                // 询问项目名称
                layer.prompt({
                    title: '新建项目',
                    formType: 0,
                    value: '新项目_' + new Date().toLocaleDateString('zh-CN').replace(/\//g, ''),
                    btn: ['创建', '取消']
                }, function(value, index2, elem) {
                    if (value && value.trim()) {
                        // 清空所有轨道
                        clearAllTracks();

                        // 重置项目信息
                        const projectNameDisplay = document.getElementById('project-name-display');
                        if (projectNameDisplay) {
                            projectNameDisplay.textContent = value.trim();
                        }

                        // 更新时间
                        const lastEditDisplay = document.getElementById('project-last-edit');
                        if (lastEditDisplay) {
                            const now = new Date();
                            const dateStr = now.toLocaleString('zh-CN', {
                                year: 'numeric',
                                month: '2-digit',
                                day: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit'
                            });
                            lastEditDisplay.textContent = '最后编辑: ' + dateStr;
                        }

                        // 清空历史记录
                        editHistory = [];
                        historyIndex = -1;

                        // 重置素材统计
                        updateMaterialStats();

                        layer.close(index2);
                        showNotification('成功', '新项目已创建', 'success');
                    } else {
                        showNotification('错误', '项目名称不能为空', 'error');
                    }
                });
            });
        };

        // 清空所有轨道
        function clearAllTracks() {
            // 清空视频轨道
            const videoTracks = document.querySelectorAll('[id^="video-track-"]');
            videoTracks.forEach(track => {
                track.innerHTML = '';
            });

            // 清空音频轨道
            const audioTracks = document.querySelectorAll('[id^="audio-track-"]');
            audioTracks.forEach(track => {
                track.innerHTML = '';
            });

            // 清空文本轨道
            const textTracks = document.querySelectorAll('[id^="text-track-"]');
            textTracks.forEach(track => {
                track.innerHTML = '';
            });

            // 重置视频播放器
            const video = document.getElementById('preview-video');
            if (video) {
                video.src = '';
                video.load();
            }
        }

        // 编辑历史记录
        let editHistory = [];
        let historyIndex = -1;
        const MAX_HISTORY = 50;

        // 撤销编辑
        window.undoEdit = function() {
            if (historyIndex > 0) {
                historyIndex--;
                restoreFromHistory(historyIndex);
                showNotification('成功', '已撤销', 'success');
                updateUndoRedoButtons();
            } else {
                showNotification('提示', '没有可撤销的操作', 'info');
            }
        };

        // 重做编辑
        window.redoEdit = function() {
            if (historyIndex < editHistory.length - 1) {
                historyIndex++;
                restoreFromHistory(historyIndex);
                showNotification('成功', '已重做', 'success');
                updateUndoRedoButtons();
            } else {
                showNotification('提示', '没有可重做的操作', 'info');
            }
        };

        // 保存当前状态到历史记录
        function saveToHistory() {
            const snapshotTrackStates = (function() {
                try { return JSON.parse(JSON.stringify(trackStates || {})); } catch (e) { return (trackStates || {}); }
            })();
            const currentState = {
                tracks: collectTracksData(),
                trackStates: snapshotTrackStates,
                timestamp: new Date().getTime()
            };

            // 删除当前位置之后的历史
            editHistory = editHistory.slice(0, historyIndex + 1);

            // 添加新状态
            editHistory.push(currentState);

            // 限制历史记录数量
            if (editHistory.length > MAX_HISTORY) {
                editHistory.shift();
            } else {
                historyIndex++;
            }

            updateUndoRedoButtons();
        }

        // 从历史记录恢复状态（基于 collectTracksData 的增强还原：轨道增删 + 轨道状态）
        function restoreFromHistory(index) {
            if (!(index >= 0 && index < editHistory.length)) return;
            const state = editHistory[index];
            if (!state || !Array.isArray(state.tracks)) return;

            // 目标轨道集合
            const desiredIds = new Set(state.tracks.map(t => t.id));

            // 移除当前不存在于目标状态的轨道
            Array.from(document.querySelectorAll('[id^="video-track-"], [id^="audio-track-"], [id^="text-track-"]'))
                .forEach(el => {
                    if (!desiredIds.has(el.id)) {
                        if (el.parentElement && el.parentElement.parentElement) {
                            el.parentElement.parentElement.remove();
                        }
                    }
                });

            // 辅助：确保按ID存在某条轨道（按类型生成结构）
            function ensureTrackExists(trackId) {
                if (document.getElementById(trackId)) return;
                const isVideo = trackId.startsWith('video-track-');
                const isAudio = trackId.startsWith('audio-track-');
                const isText  = trackId.startsWith('text-track-');
                const labelNo = (trackId.match(/(\d+)$/) || [, ''])[1] || '';
                const icon = isVideo ? 'fa-film text-primary' : isAudio ? 'fa-music text-secondary' : 'fa-font text-accent';
                const title = isVideo ? `视频轨道 ${labelNo}` : isAudio ? `音频轨道 ${labelNo}` : `文字轨道 ${labelNo}`;
                const placeholder = isVideo ? '拖放视频到此处' : isAudio ? '拖放音频到此处' : '点击添加文字';
                const container = document.querySelector('.relative.overflow-auto.p-4');
                const html = `
                    <div class="timeline-track mb-4 p-3 rounded-xl">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center space-x-3">
                                <span class="text-xs font-medium text-text-primary flex items-center">
                                    <i class="fa ${icon} mr-2"></i>
                                    ${title}
                                </span>
                                <div class="flex items-center space-x-1">
                                    <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackMute('${trackId}')">
                                        <i class="fa ${isText ? 'fa-eye' : 'fa-volume-up'} text-xs"></i>
                                        <span class="tooltip-text">${isText ? '隐藏' : '静音'}</span>
                                    </button>
                                    <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="toggleTrackLock('${trackId}')">
                                        <i class="fa fa-lock text-xs"></i>
                                        <span class="tooltip-text">锁定</span>
                                    </button>
                                    <button class="operation-btn w-6 h-6 bg-dark-lighter rounded-full flex items-center justify-center text-text-secondary hover:bg-dark-lighter/80 tooltip" onclick="deleteTrack('${trackId}')">
                                        <i class="fa fa-trash text-xs"></i>
                                        <span class="tooltip-text">删除轨道</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div id="${trackId}" class="relative h-20 timeline-track rounded-lg border border-border-color flex items-center px-3 min-w-[2500px]">
                            <div class="text-xs text-text-secondary absolute left-3">${placeholder}</div>
                        </div>
                    </div>`;
                if (container) container.insertAdjacentHTML('beforeend', html);
                if (typeof initializeTracks === 'function') initializeTracks();
                if (!window.trackStates) window.trackStates = {};
                if (!trackStates[trackId]) trackStates[trackId] = { muted: false, locked: false };
            }

            // 创建缺失轨道
            state.tracks.forEach(t => ensureTrackExists(t.id));

            const typeClassMap = {
                video: 'absolute top-1 left-0 h-16 bg-gradient-to-r from-primary/30 to-secondary/30 border border-primary/50 rounded-lg cursor-pointer hover:bg-gradient-to-r from-primary/40 to-secondary/40 transition-all duration-200',
                audio: 'absolute top-1 left-0 h-16 bg-gradient-to-r from-secondary/30 to-accent/30 border border-secondary/50 rounded-lg cursor-pointer hover:bg-gradient-to-r from-secondary/40 to-accent/40 transition-all duration-200',
                image: 'absolute top-1 left-0 h-16 bg-gradient-to-r from-primary/30 to-secondary/30 border border-primary/50 rounded-lg cursor-pointer hover:bg-gradient-to-r from-primary/40 to-secondary/40 transition-all duration-200',
                text:  'absolute top-1 h-16 bg-gradient-to-r from-accent/30 to-primary/30 border border-accent/50 rounded-lg cursor-pointer hover:bg-gradient-to-r from-accent/40 to-primary/40 transition-all duration-200'
            };

            // 每条轨道按状态更新
            state.tracks.forEach(t => {
                const trackEl = document.getElementById(t.id);
                if (!trackEl) return;

                const existing = Array.from(trackEl.querySelectorAll('[data-type]'));
                const existingMap = new Map();
                existing.forEach(el => existingMap.set(el.getAttribute('data-id'), el));

                // 移除状态中不存在的元素
                existing.forEach(el => {
                    const id = el.getAttribute('data-id');
                    if (!t.clips.find(c => String(c.id) === String(id))) {
                        el.remove();
                    }
                });

                // 确保存在并更新每个 clip
                (t.clips || []).forEach(c => {
                    const id = String(c.id);
                    let el = existingMap.get(id);
                    if (!el) {
                        el = document.createElement('div');
                        el.className = typeClassMap[c.type] || typeClassMap.video;
                        el.setAttribute('data-type', c.type || 'video');
                        el.setAttribute('data-id', id);
                        el.style.position = 'absolute';
                        el.innerHTML = `<div class="w-full h-full"></div>`;
                        trackEl.appendChild(el);
                        if (typeof makeDraggable === 'function') makeDraggable(el, trackEl);
                        el.addEventListener('click', (e) => selectMediaElement(el, e));
                    }
                    el.style.left = (parseFloat(c.position) || 0) + 'px';
                    el.style.width = (parseFloat(c.duration) || 250) + 'px';

                    const fx = c.effects || {};
                    el.dataset.brightness = String(fx.brightness ?? 0);
                    el.dataset.contrast = String(fx.contrast ?? 0);
                    el.dataset.saturation = String(fx.saturation ?? 0);
                    el.dataset.hue = String(fx.hue ?? 0);
                    el.dataset.scale = String(fx.scale ?? 100);
                    el.dataset.rotation = String(fx.rotation ?? 0);
                    el.dataset.posx = String(fx.positionX ?? 0);
                    el.dataset.posy = String(fx.positionY ?? 0);
                    el.dataset.volume = String(fx.volume ?? 100);
                    el.dataset.fadein = String(fx.fadeIn ?? 0);
                    el.dataset.fadeout = String(fx.fadeOut ?? 0);

                    if (typeof updateClipDuration === 'function') updateClipDuration(el);
                });

                const placeholder = trackEl.querySelector('.text-xs.text-text-secondary');
                if (placeholder) placeholder.style.display = (t.clips && t.clips.length > 0) ? 'none' : 'block';
            });

            // 应用轨道状态（静音/锁定）
            if (state.trackStates) {
                try { trackStates = JSON.parse(JSON.stringify(state.trackStates)); } catch(e) { trackStates = state.trackStates; }
                Object.keys(trackStates).forEach(id => {
                    const s = trackStates[id] || {};
                    const muteIcon = document.querySelector(`button[onclick="toggleTrackMute('${id}')"] i`);
                    if (muteIcon) {
                        if (id.startsWith('text-track-')) {
                            muteIcon.classList.remove('fa-eye','fa-eye-slash');
                            muteIcon.classList.add(s.muted ? 'fa-eye-slash' : 'fa-eye');
                        } else {
                            muteIcon.classList.remove('fa-volume-up','fa-volume-mute');
                            muteIcon.classList.add(s.muted ? 'fa-volume-mute' : 'fa-volume-up');
                        }
                    }
                    const lockIcon = document.querySelector(`button[onclick="toggleTrackLock('${id}')"] i`);
                    if (lockIcon) {
                        lockIcon.classList.remove('fa-lock','fa-unlock');
                        lockIcon.classList.add(s.locked ? 'fa-unlock' : 'fa-lock');
                    }
                    const trackEl = document.getElementById(id);
                    if (trackEl) {
                        trackEl.style.pointerEvents = s.locked ? 'none' : 'auto';
                        trackEl.style.opacity = s.locked ? '0.6' : '1';
                    }
                });
            }

            // 清空当前选中，避免旧状态干扰
            if (window.selectedClips) selectedClips.clear();
            window.selectedClip = null;

            // 刷新统计与UI
            if (typeof updateMaterialStats === 'function') updateMaterialStats();
            if (typeof applyVideoEffects === 'function') applyVideoEffects();
            if (typeof applyTransform === 'function') applyTransform();
        }

        // 更新撤销/重做按钮状态
        function updateUndoRedoButtons() {
            const undoBtn = document.getElementById('undo-btn');
            const redoBtn = document.getElementById('redo-btn');
            const canUndo = historyIndex > 0;
            const canRedo = (editHistory.length > 0) && (historyIndex < editHistory.length - 1);

            if (undoBtn) {
                undoBtn.disabled = !canUndo;
                undoBtn.setAttribute('aria-disabled', canUndo ? 'false' : 'true');
                undoBtn.classList.toggle('opacity-50', !canUndo);
                undoBtn.classList.toggle('cursor-not-allowed', !canUndo);
            }
            if (redoBtn) {
                redoBtn.disabled = !canRedo;
                redoBtn.setAttribute('aria-disabled', canRedo ? 'false' : 'true');
                redoBtn.classList.toggle('opacity-50', !canRedo);
                redoBtn.classList.toggle('cursor-not-allowed', !canRedo);
            }
        }

        // 循环播放和刷新预览功能已在前面定义，此处删除重复定义

        // 编辑项目名
        window.editProjectName = function() {
            const projectNameDisplay = document.getElementById('project-name-display');
            const currentName = projectNameDisplay ? projectNameDisplay.textContent : '当前项目';

            layer.prompt({
                title: '编辑项目名称',
                formType: 0,
                value: currentName,
                btn: ['确定', '取消']
            }, function(value, index, elem) {
                if (value && value.trim()) {
                    if (projectNameDisplay) {
                        projectNameDisplay.textContent = value.trim();
                    }
                    layer.close(index);
                    showNotification('成功', '项目名称已更新', 'success');

                    // 更新最后编辑时间
                    const lastEditDisplay = document.getElementById('project-last-edit');
                    if (lastEditDisplay) {
                        const now = new Date();
                        const dateStr = now.toLocaleString('zh-CN', {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit'
                        });
                        lastEditDisplay.textContent = '最后编辑: ' + dateStr;
                    }
                } else {
                    showNotification('错误', '项目名称不能为空', 'error');
                }
            });
        };

        // 导入素材 - 已在全局定义（第59行），此处注释掉避免重复
        /*
        window.importMedia = function() {
            layer.open({
                type: 1,
                title: '导入素材',
                area: ['600px', '400px'],
                content: `
                    <div class="p-6">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">选择类型</label>
                                <div class="layui-input-block">
                                    <select id="import-type" class="layui-input">
                                        <option value="video">视频文件</option>
                                        <option value="audio">音频文件</option>
                                        <option value="image">图片文件</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="file" id="media-file-input" accept="video/*,audio/*,image/*" multiple style="display:none;">
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="document.getElementById('media-file-input').click()">
                                        <i class="fa fa-upload mr-2"></i>选择文件
                                    </button>
                                    <div id="file-list" class="mt-4 text-sm text-gray-600"></div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" onclick="startImport()">
                                        <i class="fa fa-check mr-2"></i>开始导入
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">
                                        取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `,
                success: function() {
                    const fileInput = document.getElementById('media-file-input');
                    const fileList = document.getElementById('file-list');

                    fileInput.addEventListener('change', function() {
                        const files = this.files;
                        let listHTML = '<ul class="list-disc pl-5">';
                        for (let i = 0; i < files.length; i++) {
                            listHTML += `<li>${files[i].name} (${(files[i].size / 1024 / 1024).toFixed(2)} MB)</li>`;
                        }
                        listHTML += '</ul>';
                        fileList.innerHTML = files.length > 0 ? listHTML : '';
                    });
                }
            });
        };
        */

        // 开始导入
        window.startImport = function() {
            const fileInput = document.getElementById('media-file-input');
            const files = fileInput.files;

            if (files.length === 0) {
                showNotification('提示', '请先选择文件', 'info');
                return;
            }

            const formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append('files', files[i]);
            }

            const loadingIndex = layer.load(1, {shade: [0.3, '#000']});

            $.ajax({
                url: '/api/materials/upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    layer.close(loadingIndex);
                    layer.closeAll();
                    if (res.code === 0) {
                        showNotification('成功', `已成功导入 ${files.length} 个文件`, 'success');
                        // 刷新素材库
                        updateMaterialStats();
                    } else {
                        showNotification('错误', res.msg || '导入失败', 'error');
                    }
                },
                error: function() {
                    layer.close(loadingIndex);
                    showNotification('错误', '上传失败，请检查网络连接', 'error');
                }
            });
        };



        // 项目保存和导出功能
        window.saveProject = function() {
            layer.prompt({
                title: '保存项目',
                formType: 0,
                value: '未命名项目',
                btn: ['保存', '取消']
            }, function(value, index, elem) {
                layer.close(index);

                // 收集项目数据
                const projectData = {
                    name: value,
                    type: 'video',
                    description: '视频编辑项目',
                    settings: {
                        resolution: '1080p',
                        framerate: 30,
                        duration: totalTime
                    },
                    tracks: collectTracksData()
                };

                // 发送保存请求
                $.ajax({
                    url: '/api/projects',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(projectData),
                    success: function(res) {
                        if (res.code === 0) {
                            showNotification('成功', '项目已保存', 'success');
                        } else {
                            showNotification('错误', res.msg, 'error');
                        }
                    },
                    error: function() {
                        showNotification('错误', '保存失败', 'error');
                    }
                });
            });
        };

        window.exportVideo = function() {
            layer.open({
                type: 1,
                title: '导出视频 - 高级设置',
                area: ['550px', '750px'],
                content: `
                    <div class="p-6">
                        <form class="layui-form" lay-filter="export-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">格式</label>
                                <div class="layui-input-block">
                                    <select name="format" lay-verify="required">
                                        <option value="mp4">MP4</option>
                                        <option value="mov">MOV</option>
                                        <option value="avi">AVI</option>
                                        <option value="webm">WebM</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">分辨率</label>
                                <div class="layui-input-block">
                                    <select name="resolution" lay-verify="required">
                                        <option value="1920x1080">1080p (1920x1080)</option>
                                        <option value="1280x720">720p (1280x720)</option>
                                        <option value="854x480">480p (854x480)</option>
                                        <option value="3840x2160">4K (3840x2160)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">帧率</label>
                                <div class="layui-input-block">
                                    <select name="framerate" lay-verify="required">
                                        <option value="24">24 fps</option>
                                        <option value="30" selected>30 fps</option>
                                        <option value="60">60 fps</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">质量</label>
                                <div class="layui-input-block">
                                    <select name="quality" lay-verify="required">
                                        <option value="high">高质量</option>
                                        <option value="medium" selected>中等质量</option>
                                        <option value="low">低质量</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 高级设置 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">编码器</label>
                                <div class="layui-input-block">
                                    <select name="encoder">
                                        <option value="h264" selected>H.264 (推荐)</option>
                                        <option value="h265">H.265 (HEVC)</option>
                                        <option value="vp9">VP9</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">视频码率</label>
                                <div class="layui-input-block">
                                    <select name="bitrate">
                                        <option value="auto" selected>自动</option>
                                        <option value="8000">8 Mbps</option>
                                        <option value="10000">10 Mbps</option>
                                        <option value="15000">15 Mbps</option>
                                        <option value="20000">20 Mbps</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">音频编码</label>
                                <div class="layui-input-block">
                                    <select name="audioCodec">
                                        <option value="aac" selected>AAC</option>
                                        <option value="mp3">MP3</option>
                                        <option value="opus">Opus</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">音频码率</label>
                                <div class="layui-input-block">
                                    <select name="audioBitrate">
                                        <option value="128" selected>128 kbps</option>
                                        <option value="192">192 kbps</option>
                                        <option value="256">256 kbps</option>
                                        <option value="320">320 kbps</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">导出范围</label>
                                <div class="layui-input-block">
                                    <select name="exportRange">
                                        <option value="all" selected>全部</option>
                                        <option value="selection">选定区域</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" lay-submit lay-filter="export-submit">开始导出</button>
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                                </div>
                            </div>
                        </form>
                    </div>
                `,
                success: function(layero, index) {
                    form.render();
                    form.on('submit(export-submit)', function(data) {
                        layer.close(index);
                        startExport(data.field);
                        return false;
                    });
                }
            });
        };

        // 收集时间轴上与导出相关的特效提示信息（倒放/色彩匹配/防抖等）
        function collectTimelineEffectHints(){
            try{
                const clipEls = document.querySelectorAll('#video-track-1 [data-type="video"], #audio-track-1 [data-type="audio"], #text-track-1 [data-type="text"]');
                const pxPerSec = 10; // 与时间轴缩放逻辑保持一致
                const clips = Array.from(clipEls).map(function(el){
                    const id = el.getAttribute('data-id')||'';
                    if(!id) return null;
                    const type = el.getAttribute('data-type')||'';
                    const left = parseFloat(el.style.left||'0')||0;
                    const width = parseFloat(el.style.width||'0')||0;
                    const startSec = left / pxPerSec;
                    const durationSec = width / pxPerSec;
                    return {
                        id: id,
                        type: type,
                        left: left,
                        width: width,
                        start_sec: startSec,
                        duration_sec: durationSec,
                        reverse: el.getAttribute('data-reverse')==='1',
                        color_match: el.getAttribute('data-color-match')==='1',
                        stabilize: el.getAttribute('data-stabilize')==='1'
                    };
                }).filter(Boolean);
                const filters = (window.currentFilters && typeof window.currentFilters==='object') ? window.currentFilters : null;
                return { clips, filters };
            }catch(e){
                console.warn('collectTimelineEffectHints 失败:', e);
                return null;
            }
        }

        // 开始导出 - 完整实现版本，调用真实后端API
        async function startExport(settings) {
            console.log('🎬 开始导出视频...');

                    // 显示成功提示
                    layer.alert(`
                        <div style="padding: 20px; text-align: center;">
                            <i class="fa fa-check-circle" style="font-size: 48px; color: #52c41a;"></i>
                            <h3 style="margin: 15px 0; color: #333;">✅ 视频导出成功！</h3>
                            <p style="margin: 10px 0; color: #666;">
                                文件名：${response.data.file_name}<br>
                                大小：${response.data.file_size_mb}MB<br>
                                格式：${response.data.format.toUpperCase()}<br>
                                分辨率：${response.data.resolution}
                            </p>
                            <button class="layui-btn" onclick="downloadExportedVideo('${response.data.download_url}', '${response.data.file_name}')">
                                <i class="fa fa-download"></i> 立即下载
                            </button>
                        </div>
                    `, {
                        title: '导出成功',
                        btn: []
                    });

                } else {
                    console.error('❌ 视频导出失败:', response.msg);
                    layer.msg('❌ 导出失败: ' + response.msg, {icon: 2, time: 3000});
                }
            } catch (error) {
                layer.close(loadingIndex);
                console.error('❌ 导出请求失败:', error);
                layer.msg('❌ 导出失败: ' + (error.message || '网络错误'), {icon: 2, time: 3000});
            }
        }

        // 下载导出的视频
        window.downloadExportedVideo = function(downloadUrl, filename) {
            console.log('💾 下载视频:', filename);

            const a = document.createElement('a');
            a.href = downloadUrl;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);

            layer.closeAll();
            layer.msg('✅ 开始下载...', {icon: 1, time: 2000});
        };



        function monitorExportProgress(taskId) {
            const progressLayer = layer.open({
                type: 1,
                title: '导出进度',
                closeBtn: 0,
                area: ['400px', '200px'],
                content: `
                    <div class="p-6 text-center">
                        <div class="layui-progress layui-progress-big" lay-filter="export-progress">
                            <div class="layui-progress-bar" lay-percent="0%"></div>
                        </div>
                        <p class="mt-4 text-gray-600" id="export-status">正在导出...</p>
                    </div>
                `
            });

            const checkProgress = setInterval(function() {
                $.get('/api/tasks/' + taskId, function(res) {
                    if (res.code === 0) {
                        const progress = res.data.progress || 0;
                        element.progress('export-progress', progress + '%');
                        $('#export-status').text(res.data.status || '正在导出...');

                        if (res.data.state === 'completed') {
                            clearInterval(checkProgress);
                            layer.close(progressLayer);
                            showNotification('成功', '视频导出完成！', 'success');
                        } else if (res.data.state === 'failed') {
                            clearInterval(checkProgress);
                            layer.close(progressLayer);
                            showNotification('错误', '导出失败：' + res.data.error, 'error');
                        }
                    }
                });
            }, 1000);
        }

        function collectTracksData() {
            const tracks = [];
            const collect = (nodes, type) => {
                nodes.forEach(track => {
                    const clips = track.querySelectorAll('[data-type]');
                    tracks.push({
                        type: type,
                        id: track.id,
                        clips: Array.from(clips).map(clip => ({
                            id: clip.getAttribute('data-id'),
                            type: clip.getAttribute('data-type'),
                            position: parseFloat(clip.style.left) || 0,
                            duration: parseFloat(clip.style.width) || 250,
                            effects: {
                                brightness: parseFloat(clip.dataset.brightness) || 0,
                                contrast: parseFloat(clip.dataset.contrast) || 0,
                                saturation: parseFloat(clip.dataset.saturation) || 0,
                                hue: parseFloat(clip.dataset.hue) || 0,
                                scale: parseFloat(clip.dataset.scale) || 100,
                                rotation: parseFloat(clip.dataset.rotation) || 0,
                                positionX: parseFloat(clip.dataset.posx) || 0,
                                positionY: parseFloat(clip.dataset.posy) || 0,
                                volume: parseFloat(clip.dataset.volume) || 100,
                                fadeIn: parseFloat(clip.dataset.fadein) || 0,
                                fadeOut: parseFloat(clip.dataset.fadeout) || 0
                            }
                        }))
                    });
                });
            };
            collect(document.querySelectorAll('[id^="video-track-"]'), 'video');
            collect(document.querySelectorAll('[id^="audio-track-"]'), 'audio');
            collect(document.querySelectorAll('[id^="text-track-"]'), 'text');
            return tracks;
        }

        // 更新素材统计
        function updateMaterialStats() {
            // 统计轨道上的素材
            const videoClips = document.querySelectorAll('[id^="video-track-"] [data-type="video"]').length;
            const audioClips = document.querySelectorAll('[id^="audio-track-"] [data-type="audio"]').length;
            const imageClips = document.querySelectorAll('[id^="video-track-"] [data-type="image"]').length;

            // 更新显示
            const videoCount = document.getElementById('video-count');
            const audioCount = document.getElementById('audio-count');
            const imageCount = document.getElementById('image-count');

            if (videoCount) videoCount.textContent = `视频: ${videoClips}`;
            if (audioCount) audioCount.textContent = `音频: ${audioClips}`;
            if (imageCount) imageCount.textContent = `图片: ${imageClips}`;
        }

        // ========== 属性面板功能函数 ==========

        // 折叠面板切换
        if (typeof window.togglePanel !== 'function') window.togglePanel = function(panelId) {
            const panel = document.getElementById(panelId + '-panel');
            const icon = document.getElementById(panelId + '-icon');

            if (panel && icon) {
                if (panel.style.display === 'none') {
                    panel.style.display = 'block';
                    icon.classList.remove('fa-chevron-down');
                    icon.classList.add('fa-chevron-up');
                } else {
                    panel.style.display = 'none';
                    icon.classList.remove('fa-chevron-up');
                    icon.classList.add('fa-chevron-down');
                }
            }
        };

        // 色彩校正
        if (typeof window.adjustBrightness !== 'function') window.adjustBrightness = function(value) {
            document.getElementById('brightness-value').textContent = value + '%';
            console.log('调整亮度:', value);
        };

        if (typeof window.adjustContrast !== 'function') window.adjustContrast = function(value) {
            document.getElementById('contrast-value').textContent = value + '%';
            console.log('调整对比度:', value);
        };

        if (typeof window.adjustSaturation !== 'function') window.adjustSaturation = function(value) {
            document.getElementById('saturation-value').textContent = value + '%';
            console.log('调整饱和度:', value);
        };

        if (typeof window.adjustHue !== 'function') window.adjustHue = function(value) {
            document.getElementById('hue-value').textContent = value + '°';
            console.log('调整色调:', value);
        };

        if (typeof window.resetColorCorrection !== 'function') window.resetColorCorrection = function() {
            document.getElementById('brightness-slider').value = 0;
            document.getElementById('contrast-slider').value = 0;
            document.getElementById('saturation-slider').value = 0;
            document.getElementById('hue-slider').value = 0;
            adjustBrightness(0);
            adjustContrast(0);
            adjustSaturation(0);
            adjustHue(0);
            showNotification('成功', '已重置色彩校正', 'success');
        };

        // 变换控制
        if (typeof window.adjustScale !== 'function') window.adjustScale = function(value) {
            document.getElementById('scale-value').textContent = value + '%';
            console.log('调整缩放:', value);
        };

        if (typeof window.adjustRotation !== 'function') window.adjustRotation = function(value) {
            document.getElementById('rotation-value').textContent = value + '°';
            console.log('调整旋转:', value);
        };

        if (typeof window.adjustPositionX !== 'function') window.adjustPositionX = function(value) {
            document.getElementById('position-x-value').textContent = value;
            console.log('调整X位置:', value);
        };

        if (typeof window.adjustPositionY !== 'function') window.adjustPositionY = function(value) {
            document.getElementById('position-y-value').textContent = value;
            console.log('调整Y位置:', value);
        };

        if (typeof window.resetTransform !== 'function') window.resetTransform = function() {
            document.getElementById('scale-slider').value = 100;
            document.getElementById('rotation-slider').value = 0;
            document.getElementById('position-x-slider').value = 0;
            document.getElementById('position-y-slider').value = 0;
            adjustScale(100);
            adjustRotation(0);
            adjustPositionX(0);
            adjustPositionY(0);
            showNotification('成功', '已重置变换', 'success');
        };

        // 滤镜效果
        if (typeof window.applyFilter !== 'function') window.applyFilter = function(filterType) {
            console.log('应用滤镜:', filterType);
            showNotification('成功', '已应用 ' + filterType + ' 滤镜', 'success');
        };

        // 音频控制
        window.adjustAudioVolume = function(value) {
            currentEffects.volume = parseInt(value, 10);
            const el = document.getElementById('audio-volume-value'); if (el) el.textContent = value + '%';
            const gel = document.getElementById('grid-audio-volume-value'); if (gel) gel.textContent = value + '%';
            const gsl = document.getElementById('grid-audio-volume-slider'); if (gsl) gsl.value = value;
            changeVolume(value);
            if (window.selectedClip) { selectedClip.dataset.volume = String(value); }
            if (window._throttledSaveEffects) window._throttledSaveEffects();
        };

        window.adjustFadeIn = function(value) {
            currentEffects.fadeIn = parseFloat(value);
            const el = document.getElementById('fade-in-value'); if (el) el.textContent = value + 's';
            const gel = document.getElementById('grid-fade-in-value'); if (gel) gel.textContent = value + 's';
            const gsl = document.getElementById('grid-fade-in-slider'); if (gsl) gsl.value = value;
            if (window.selectedClip) { selectedClip.dataset.fadein = String(value); }
            if (window._throttledSaveEffects) window._throttledSaveEffects();
        };

        window.adjustFadeOut = function(value) {
            currentEffects.fadeOut = parseFloat(value);
            const el = document.getElementById('fade-out-value'); if (el) el.textContent = value + 's';
            const gel = document.getElementById('grid-fade-out-value'); if (gel) gel.textContent = value + 's';
            const gsl = document.getElementById('grid-fade-out-slider'); if (gsl) gsl.value = value;
            if (window.selectedClip) { selectedClip.dataset.fadeout = String(value); }
            if (window._throttledSaveEffects) window._throttledSaveEffects();
        };

        if (typeof window.toggleAudioEffect !== 'function') window.toggleAudioEffect = function(effect) {
            console.log('切换音频效果:', effect);
            showNotification('成功', '已应用 ' + effect + ' 音频效果', 'success');
        };

        if (typeof window.removeAudio !== 'function') window.removeAudio = function() {
            layer.confirm('确定要移除当前项目时间线中的音轨吗？这不会删除磁盘上的原始音频文件。', {icon: 3}, function(index) {
                console.log('移除音轨');
                showNotification('成功', '已移除音轨', 'success');
                layer.close(index);
            });
        };

        // 快捷操作函数
        if (typeof window.autoAlign !== 'function') window.autoAlign = function() {
            console.log('自动对齐素材');
            const trackIds = ['video-track-1','audio-track-1','text-track-1'];
            let adjusted = 0;
            trackIds.forEach(function(tid){
                const track = document.getElementById(tid);
                if (!track) return;
                const clips = Array.from(track.querySelectorAll('[data-type]'));
                if (!clips.length) return;
                clips.sort(function(a,b){
                    const la = parseFloat(a.style.left||'0')||0;
                    const lb = parseFloat(b.style.left||'0')||0;
                    return la - lb;
                });
                let left = 50;
                const gap = 20;
                clips.forEach(function(el){
                    el.style.left = left + 'px';
                    const w = parseFloat(el.style.width||'200') || 200;
                    left += w + gap;
                    adjusted++;
                });
            });
            if (adjusted > 0) {
                if (typeof saveHistory === 'function') saveHistory();
                showNotification('成功', '已自动对齐 ' + adjusted + ' 个素材', 'success');
            } else {
                showNotification('提示', '暂无可对齐的素材', 'info');
            }
        };

        if (typeof window.smartCut !== 'function') window.smartCut = function() {
            console.log('智能剪切');
            if (typeof window.splitClip !== 'function') {
                showNotification('提示', '当前环境不支持智能剪切', 'info');
                return;
            }
            if (!selectedClip) {
                const vt = document.getElementById('video-track-1');
                const first = vt && vt.querySelector('[data-type="video"]');
                if (first) {
                    selectedClip = first;
                }
            }
            if (!selectedClip) {
                showNotification('提示', '请先在时间轴选中要剪切的素材', 'info');
                return;
            }
            splitClip();
            if (typeof saveHistory === 'function') saveHistory();
            showNotification('成功', '已在当前播放头位置执行智能剪切', 'success');
        };

        if (typeof window.batchResize !== 'function') window.batchResize = function() {
            console.log('批量缩放');
            layer.prompt({title: '缩放比例(%)', formType: 0, value: '100'}, function(val, index) {
                const pct = parseFloat(val);
                if (!isFinite(pct) || pct <= 0) {
                    layer.msg('请输入有效的百分比数值',{icon:2,time:2000});
                    return;
                }
                const scale = pct / 100;
                const tracks = document.querySelectorAll('#video-track-1, #audio-track-1, #text-track-1');
                let count = 0;
                tracks.forEach(function(track){
                    const clips = track.querySelectorAll('[data-type]');
                    clips.forEach(function(el){
                        const w = parseFloat(el.style.width||'0');
                        if (!w) return;
                        el.style.width = Math.max(20, w * scale) + 'px';
                        count++;
                    });
                });
                if (count > 0 && typeof saveHistory === 'function') saveHistory();
                showNotification('成功', '已批量缩放 ' + count + ' 个素材至 ' + pct + '%', 'success');
                layer.close(index);
            });
        };

        if (typeof window.syncAudio !== 'function') window.syncAudio = function() {
            console.log('音频同步');
            const vt = document.getElementById('video-track-1');
            const at = document.getElementById('audio-track-1');
            if (!vt || !at) {
                showNotification('提示', '需要同时存在视频轨道和音频轨道', 'info');
                return;
            }
            const vFirst = vt.querySelector('[data-type="video"]');
            const aClips = Array.from(at.querySelectorAll('[data-type="audio"]'));
            if (!vFirst || !aClips.length) {
                showNotification('提示', '暂无可同步的音频/视频素材', 'info');
                return;
            }
            const targetLeft = parseFloat(vFirst.style.left||'0')||0;
            const firstAudioLeft = parseFloat(aClips[0].style.left||'0')||0;
            const delta = targetLeft - firstAudioLeft;
            aClips.forEach(function(el){
                const cur = parseFloat(el.style.left||'0')||0;
                el.style.left = (cur + delta) + 'px';
            });
            if (typeof saveHistory === 'function') saveHistory();
            showNotification('成功', '音频已对齐到首个视频片段', 'success');
        };

        if (typeof window.colorMatch !== 'function') window.colorMatch = function() {
            console.log('色彩匹配');
            if (!selectedClip) {
                showNotification('提示', '请先选中要进行色彩匹配的素材', 'info');
                return;
            }
            const oldBadge = selectedClip.querySelector('.color-match-badge');
            if (oldBadge) oldBadge.remove();
            const badge = document.createElement('div');
            badge.className = 'color-match-badge absolute top-0 left-0 bg-secondary text-white text-xxs px-2 py-1 rounded-br';
            badge.innerHTML = '<i class="fa fa-tint mr-1"></i>色彩匹配';
            badge.title = '已应用色彩匹配';
            selectedClip.appendChild(badge);
            selectedClip.setAttribute('data-color-match','1');
            if (typeof saveHistory === 'function') saveHistory();
            showNotification('成功', '已为当前素材应用色彩匹配标记', 'success');
        };

        if (typeof window.stabilize !== 'function') window.stabilize = function() {
            console.log('视频防抖');
            if (!selectedClip) {
                showNotification('提示', '请先选中要防抖的素材', 'info');
                return;
            }
            const oldBadge = selectedClip.querySelector('.stabilize-badge');
            if (oldBadge) oldBadge.remove();
            const badge = document.createElement('div');
            badge.className = 'stabilize-badge absolute top-0 right-0 bg-success text-white text-xxs px-2 py-1 rounded-bl';
            badge.innerHTML = '<i class="fa fa-camera mr-1"></i>防抖';
            badge.title = '已应用视频防抖';
            selectedClip.appendChild(badge);
            selectedClip.setAttribute('data-stabilize','1');
            if (typeof saveHistory === 'function') saveHistory();
            showNotification('成功', '已为当前素材应用防抖标记', 'success');
        };

        // 编辑历史函数

	        // 快捷操作包装：添加可视反馈与历史记录
	        (function(){
	            function decorate(name, before){
	                var fn = window[name];
	                if (typeof fn === 'function') {
	                    window[name] = function(){ try { before && before.apply(this, arguments); } catch(e){} return fn.apply(this, arguments); };
	                }
	            }
	            decorate('autoAlign', function(){ /* no fake overlays */ });
	            decorate('smartCut', function(){ /* real service required */ });
	            decorate('batchResize', function(){ /* real service required */ });
	            decorate('syncAudio', function(){ /* real service required */ });
	            decorate('colorMatch', function(){ /* real service required */ });
	            decorate('stabilize', function(){ /* real service required */ });
	            decorate('setSpeed', function(speed){ /* no history side-effects */ });
	        })();

        if (typeof window.clearHistory !== 'function') window.clearHistory = function() {
            layer.confirm('确定清空所有编辑历史记录吗？此操作只会清空历史列表，不会影响当前时间线中的素材和项目内容，也不会删除任何文件。', {icon: 3}, function(index) {
                var side = document.getElementById('history-list');
                if (side) {
                    side.innerHTML = '<div class="text-xs text-text-secondary text-center py-4"><i class="fa fa-clock-o"></i> 暂无编辑历史</div>';
                }
                var bottom = document.getElementById('history-list-inline');
                if (bottom) {
                    bottom.innerHTML = '<div class="text-xs text-text-secondary text-center py-4"><i class="fa fa-clock-o"></i> 暂无编辑历史</div>';
                }
                showNotification('成功', '编辑历史已清空', 'success');
                layer.close(index);
            });
        };

        if (typeof window.exportHistory !== 'function') window.exportHistory = function() {
            console.log('导出编辑历史');
            showNotification('成功', '编辑历史已导出', 'success');
        };

        // 速度控制
        if (typeof window.adjustPlaySpeed !== 'function') window.adjustPlaySpeed = function(value) {
            changePlaybackRate(parseFloat(value));
            const el = document.getElementById('speed-value'); if (el) el.textContent = parseFloat(value).toFixed(2) + 'x';
            console.log('调整播放速度:', value);
        };

        if (typeof window.setSpeed !== 'function') window.setSpeed = function(speed) {
            document.getElementById('speed-slider').value = speed;
            adjustPlaySpeed(speed);
            showNotification('成功', '播放速度已设置为 ' + speed + 'x', 'success');
        };

        if (typeof window.toggleReverse !== 'function') window.toggleReverse = function() {
            console.log('切换倒放');
            if (!selectedClip) {
                showNotification('提示', '请先选中要倒放的素材', 'info');
                return;
            }

            const isReversed = selectedClip.getAttribute('data-reverse') === '1';

            // 先移除旧的倒放标记
            const oldBadge = selectedClip.querySelector('.reverse-badge');
            if (oldBadge) oldBadge.remove();

            if (!isReversed) {
                // 添加倒放标记徽章
                const badge = document.createElement('div');
                badge.className = 'reverse-badge absolute bottom-0 left-0 bg-warning text-white text-xxs px-2 py-1 rounded-tr';
                badge.innerHTML = '<i class="fa fa-backward mr-1"></i>倒放';
                badge.title = '已启用倒放效果';
                selectedClip.appendChild(badge);
                selectedClip.setAttribute('data-reverse', '1');
                showNotification('成功', '已启用倒放效果（导出时将按倒放处理）', 'success');
            } else {
                selectedClip.removeAttribute('data-reverse');
                showNotification('成功', '已取消倒放效果', 'success');
            }

            if (typeof saveHistory === 'function') saveHistory();
        };

        // 裁剪和遮罩
        if (typeof window.cropToRatio !== 'function') window.cropToRatio = function(ratio) {
            console.log('裁剪到比例:', ratio);
            showNotification('成功', '已裁剪到 ' + ratio + ' 比例', 'success');
        };

        if (typeof window.applyMask !== 'function') window.applyMask = function(shape) {
            console.log('应用遮罩:', shape);
            showNotification('成功', '已应用 ' + shape + ' 遮罩', 'success');
        };

        if (typeof window.removeMask !== 'function') window.removeMask = function() {
            console.log('移除遮罩');
            showNotification('成功', '已移除遮罩', 'success');
        };

        // 关键帧动画
        if (typeof window.addKeyframe !== 'function') window.addKeyframe = function(type) {
            console.log('添加关键帧:', type);
            showNotification('成功', '已添加 ' + type + ' 关键帧', 'success');
        };

        if (typeof window.setEasing !== 'function') window.setEasing = function(easing) {
            console.log('设置缓动:', easing);
            showNotification('成功', '缓动类型已设置为 ' + easing, 'success');
        };

        // 快速导出（在未打开“导出设置”面板时也能工作，使用安全默认值）
        if (typeof window.quickExport !== 'function') window.quickExport = function() {
            const getVal = (id, defVal) => {
                const el = document.getElementById(id);
                return (el && typeof el.value !== 'undefined' && String(el.value).trim() !== '') ? el.value : defVal;
            };
            const format = getVal('export-format-select', 'mp4');
            const resolution = getVal('export-resolution-select', '1920x1080');
            const fps = getVal('export-fps-select', '30');
            const quality = getVal('export-quality-select', 'medium');

            console.log('快速导出:', {format, resolution, fps, quality});

            layer.confirm(`确定要导出视频吗？该操作将在后台执行导出任务，过程可能需要一定时间，进度将根据真实后端任务状态更新。<br><br>格式: ${format}<br>分辨率: ${resolution}<br>帧率: ${fps}<br>质量: ${quality}`, {
                icon: 3,
                title: '确认导出'
            }, function(index) {
                layer.close(index);
                exportVideo(); // 调用完整的导出函数
            });
        };

        // 通知函数
        function showNotification(title, message, type) {
            const iconMap = {
                success: 1,
                error: 2,
                warning: 0,
                info: 6
            };
            layer.msg(message, {icon: iconMap[type] || 0, time: 2000});
        }

        // ========== 初始化完成标识 ==========
        window.editorReady = true;

        // 函数完整性检查
        const requiredFunctions = {
            '新建项目': 'newProject',
            '保存项目': 'saveProject',
            '导出视频': 'exportVideo',
            '撤销操作': 'undoEdit',
            '重做操作': 'redoEdit',
            '循环播放': 'toggleLoop',
            '刷新预览': 'refreshPreview'
        };

        let allFunctionsReady = true;
        const functionStatus = {};

        for (const [name, funcName] of Object.entries(requiredFunctions)) {
            const exists = typeof window[funcName] === 'function';
            functionStatus[name] = exists ? '✅' : '❌';
            if (!exists) {
                allFunctionsReady = false;
                console.error(`❌ 函数未定义: ${funcName}`);
            }
        }

        console.log('📋 编辑器功能状态:', functionStatus);

        if (allFunctionsReady) {
            console.log('✅ 所有功能加载完成');
            layer.msg('🎬 编辑器加载完成', {icon: 1, time: 1500});
        } else {
            console.warn('⚠️ 部分功能未加载');
            layer.msg('⚠️ 编辑器加载中...', {icon: 0, time: 2000});
        }

    });

    // ========== 核心功能修复（放在底部确保加载）==========
    console.log('🔧 开始加载核心修复功能...');

    // 导入素材
    window.importMedia = function() {
        console.log('🔘 importMedia 被调用');
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'video/*,audio/*,image/*';
        input.multiple = true;
        input.onchange = function(e) {
            const files = e.target.files;
            if (!files || files.length === 0) return;

            const formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append('files', files[i]);
            }

            const loadingIndex = layer.load(1, {shade: [0.3, '#000']});
            $.ajax({
                url: '/api/materials/upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    layer.close(loadingIndex);
                    if (res.code === 0) {
                        showNotification('成功', `已成功导入 ${files.length} 个文件`, 'success');
                        updateMaterialStats();
                        // 刷新素材过滤显示
                        if (typeof window.filterMaterials === 'function') filterMaterials('all');
                    } else {
                        showNotification('错误', res.msg || '导入失败', 'error');
                    }
                },
                error: function() {
                    layer.close(loadingIndex);
                    showNotification('错误', '上传失败，请检查网络连接', 'error');
                }
            });
        };
        input.click();
    };

    console.log('✅ 核心修复功能加载完成！importMedia:', typeof window.importMedia);

    // 场景检测（CPU，PySceneDetect 后端）
    async function runSceneDetect() {
        const videoTrack = document.getElementById('video-track-1');
        if (!videoTrack || videoTrack.children.length === 0) {
            layer.msg('❌ 请先添加视频素材', {icon: 2, time: 2000});
            return;
        }
        const loadingIndex = layer.load(1, { shade: [0.3, '#000'], content: '正在进行场景检测...' });
        try {
            const projectId = window.currentProjectId || sessionStorage.getItem('current_project_id');
            const res = await fetch('/api/ai/smart-clip', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ project_id: projectId, threshold: 27.0, min_scene_len: 15 })
            }).then(r => r.json());
            layer.close(loadingIndex);
            if (res.code !== 0 || !Array.isArray(res.clips)) {
                layer.msg('❌ 场景检测失败：' + (res.msg || '未知错误'), {icon: 2});
                return;
            }
            const clips = res.clips;
            const track = document.getElementById('video-track-1');
            let left = 20;
            clips.forEach((c, idx) => {
                const el = document.createElement('div');
                el.className = 'absolute top-1 h-20 bg-primary/20 border border-primary/50 rounded-lg cursor-pointer hover:bg-primary/30 transition-all duration-200';
                const w = Math.max(40, Math.round(((c[1]-c[0]) || 1) * 10));
                el.style.width = w + 'px';
                el.style.left = left + 'px';
                el.setAttribute('data-type', 'clip');
                el.innerHTML = '<div class="flex items-center justify-between h-full px-2"><span class="text-xs text-white">场景'+(idx+1)+'</span></div>';
                el.addEventListener('click', function(e){ e.stopPropagation(); selectMediaElement(el, e); });
                track.appendChild(el);
                makeDraggable(el, track);
                left += w + 8;
            });
            if (typeof updateMaterialStats === 'function') updateMaterialStats();
            showNotification('成功', '已添加场景检测片段到时间轴', 'success');
        } catch (e) {
            layer.close(loadingIndex);
            console.error(e);
            layer.msg('❌ 场景检测出错：' + (e.message || '网络错误'), {icon: 2});
        }
    }

    // 画面分析（Qwen-VL 视频抽帧+视觉模型）
    function openAIVision() {
        layer.open({
            type: 1,
            title: '画面分析（Qwen-VL）',
            area: ['640px', '460px'],
            content: `
                <div class="p-6">
                    <form class="layui-form" lay-filter="vision-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">视觉模型</label>
                            <div class="layui-input-block">
                                <select name="model">
                                    <option value="通义千问3-VL-Plus" selected>通义千问3-VL-Plus</option>
                                    <option value="通义千问3-VL-Flash">通义千问3-VL-Flash</option>
                                    <option value="通义千问VL-Max">通义千问VL-Max</option>
                                </select>
                                <div class="layui-form-mid layui-word-aux">注意：Plus/Flash 前带数字3，为最新款</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">抽帧间隔</label>
                            <div class="layui-input-block">
                                <input type="number" name="interval_sec" value="2" class="layui-input" placeholder="秒">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">最大帧数</label>
                            <div class="layui-input-block">
                                <input type="number" name="max_frames" value="8" class="layui-input" placeholder="最多抽取帧数">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">分析提示词</label>
                            <div class="layui-input-block">
                                <textarea name="prompt" class="layui-textarea" placeholder="例如：请用中文总结这些帧的关键信息（人物/物体/场景/动作/镜头变化）"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-top: 20px;">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" lay-submit lay-filter="do-vision">
                                    <i class="fa fa-eye mr-1"></i>开始分析
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            `,
            success: function(layero, index) {
                form.render();
                // 动态获取通义视觉模型列表，并刷新下拉
                (async () => {
                    try {
                        const models = await fetchQwenVisionModels();
                        const rootEl = (layero && layero[0]) ? layero[0] : document;
                        const sel = rootEl.querySelector("select[name='model']");
                        if (sel && Array.isArray(models) && models.length) {
                            sel.innerHTML = models.map(m => `<option value="${m}">${m}</option>`).join('');
                            const defaultIdx = models.indexOf('通义千问3-VL-Plus');
                            if (defaultIdx >= 0) sel.selectedIndex = defaultIdx;
                            form.render('select');


                        }
                    } catch (e) { console.warn('获取模型列表失败，使用内置默认', e); }
                })();
                form.on('submit(do-vision)', async function(obj){
                    const data = obj.field || {};
                    const videoTrack = document.getElementById('video-track-1');
                    if (!videoTrack || videoTrack.children.length === 0) {
                        layer.msg('❌ 请先添加视频素材', {icon: 2});
                        return false;
                    }

                    const headers = getQwenHeaders();
                    const loadingIndex = layer.load(1, { shade: [0.3, '#000'], content: 'Qwen-VL 正在分析画面...' });
                    try {
                        const projectId = window.currentProjectId || sessionStorage.getItem('current_project_id');
                        const resp = await fetch('/api/vision/qwen/analyze-video', {
                            method: 'POST',
                            headers,
                            body: JSON.stringify({
                                project_id: projectId,
                                model: data.model,
                                interval_sec: Number(data.interval_sec || 2),
                                max_frames: Number(data.max_frames || 8),
                                prompt: (data.prompt || '')
                            })
                        }).then(r => r.json());
                        layer.close(loadingIndex);
                        if (resp.code !== 0) {
                            layer.msg('❌ 画面分析失败：' + (resp.msg || '未知错误'), {icon: 2});
                            return false;
                        }
                        const content = (resp.data && resp.data.choices && resp.data.choices[0] && resp.data.choices[0].message && resp.data.choices[0].message.content) || '（无内容）';
                        layer.open({
                            type: 1,
                            title: '画面分析结果',
                            area: ['640px', '520px'],
                            content: `<div class="p-5"><pre class="whitespace-pre-wrap text-sm">${content.replace(/</g, '&lt;')}</pre><div class="text-xs text-text-secondary mt-3">模型：${data.model}，帧数：${resp.frames || '-'}。</div></div>`
                        });
                        return false;
                    } catch (e) {
                        layer.close(loadingIndex);
                        console.error(e);
                        layer.msg('❌ 调用出错：' + (e.message || '网络错误'), {icon: 2});
                        return false;
                    }
                });
            }
        });
    }


    // 动态获取通义视觉模型列表（后端 /api/llm/models）
    async function fetchQwenVisionModels() {
        try {
            const resp = await fetch('/api/llm/models').then(r => r.json());
            const arr = resp && resp.data && resp.data.qwen && resp.data.qwen.vision_models_display;
            if (Array.isArray(arr) && arr.length) return arr;
        } catch (e) { console.warn('获取模型列表失败', e); }
        return ['通义千问3-VL-Plus', '通义千问3-VL-Flash', '通义千问VL-Max'];
    }

    // 在指定时间从预览视频抓取一帧，返回 dataURL
    function captureFrameAt(videoEl, timeSec) {
        return new Promise((resolve, reject) => {
            if (!videoEl) return reject(new Error('未找到视频预览元素'));
            const onSeeked = () => {
                try {
                    const w = videoEl.videoWidth || 1280;
                    const h = videoEl.videoHeight || 720;
                    const canvas = document.createElement('canvas');
                    canvas.width = w; canvas.height = h;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(videoEl, 0, 0, w, h);
                    const dataURL = canvas.toDataURL('image/jpeg', 0.85);
                    videoEl.removeEventListener('seeked', onSeeked);
                    resolve(dataURL);
                } catch (e) {
                    videoEl.removeEventListener('seeked', onSeeked);
                    reject(e);
                }
            };
            videoEl.addEventListener('seeked', onSeeked);
            try {
                videoEl.currentTime = Math.max(0.01, Number(timeSec || 0));
            } catch (e) {
                videoEl.removeEventListener('seeked', onSeeked);
                reject(e);
            }
        });
    }

    // 调用后端图像分析（批量图片），返回文本内容
    async function analyzeImages(images, model, prompt) {
        const headers = getQwenHeaders();
        const payload = { images, model: model || '通义千问3-VL-Plus', prompt: prompt || '' };
        const resp = await fetch('/api/vision/qwen/analyze-image', {
            method: 'POST', headers, body: JSON.stringify(payload)
        }).then(r => r.json());
        if (resp.code !== 0) throw new Error(resp.msg || '视觉分析失败');
        const content = resp && resp.data && resp.data.choices && resp.data.choices[0] && resp.data.choices[0].message && resp.data.choices[0].message.content;
        return content || '';
    }

    // 场景检测 + 画面分析（融合流程）
    async function runSceneVisionFusion() {
        const videoTrack = document.getElementById('video-track-1');
        if (!videoTrack || videoTrack.children.length === 0) {
            layer.msg('❌ 请先添加视频素材', {icon: 2});
            return;
        }
        // 打开配置窗口
        const models = await fetchQwenVisionModels();
        const optionsHTML = models.map(m => `<option value="${m}">${m}</option>`).join('');
        layer.open({
            type: 1,
            title: '场景检测 + 画面分析（融合）',
            area: ['640px', '420px'],
            content: `
                <div class="p-6">
                    <form class="layui-form" lay-filter="fusion-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">视觉模型</label>
                            <div class="layui-input-block">
                                <select name="model">${optionsHTML}</select>
                                <div class="layui-form-mid layui-word-aux">默认选用“通义千问3-VL-Plus”</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">最大场景数</label>
                            <div class="layui-input-block">
                                <input type="number" name="max_scenes" value="8" class="layui-input" placeholder="分析前N个场景">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">提示词</label>
                            <div class="layui-input-block">
                                <textarea name="prompt" class="layui-textarea" placeholder="例如：请为每段场景生成简短中文标签（不超过8字）与一句描述"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-top: 20px;">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" lay-submit lay-filter="do-fusion"><i class="fa fa-layer-group mr-1"></i>开始融合分析</button>
                                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            `,
            success: function(layero, index) {
                // 默认选择Plus
                const sel = layero[0].querySelector("select[name='model']");
                const idx = models.indexOf('通义千问3-VL-Plus');
                if (sel && idx >= 0) sel.selectedIndex = idx;
                form.render('select');

                form.on('submit(do-fusion)', async function(obj){
                    const data = obj.field || {};
                    const model = data.model || '通义千问3-VL-Plus';
                    const maxScenes = Math.max(1, Number(data.max_scenes || 8));
                    const prompt = data.prompt || '';
                    const loading = layer.load(1, { shade: [0.3, '#000'], content: '正在进行融合分析...' });
                    try {
                        const projectId = window.currentProjectId || sessionStorage.getItem('current_project_id');
                        const headers = getQwenHeaders();
                        // 一次性后端完成：场景检测 + 逐场景视觉分析
                        const resp = await fetch('/api/ai/smart-clip/analyze-scenes', {
                            method: 'POST', headers, body: JSON.stringify({ project_id: projectId, model, max_scenes: maxScenes, prompt, threshold: 27.0, min_scene_len: 15 })
                        }).then(r => r.json());
                        if (resp.code !== 0 || !resp.data || !Array.isArray(resp.data.scenes)) {
                            layer.close(loading); layer.msg('❌ 融合分析失败：' + (resp.msg || '未知错误'), {icon: 2}); return false;
                        }
                        const scenes = resp.data.scenes;
                        const track = document.getElementById('video-track-1');
                        // 若时间轴无片段，则根据场景绘制
                        const existing = track.querySelectorAll("div[data-type='clip']");
                        if (existing.length === 0) {
                            let left = 20;
                            scenes.forEach((s, idx2) => {
                                const el = document.createElement('div');
                                el.className = 'absolute top-1 h-20 bg-primary/20 border border-primary/50 rounded-lg cursor-pointer hover:bg-primary/30 transition-all duration-200';
                                const w = Math.max(40, Math.round(((s.end - s.start) || 1) * 10));
                                el.style.width = w + 'px';
                                el.style.left = left + 'px';
                                el.setAttribute('data-type', 'clip');
                                el.innerHTML = '<div class="flex items-center justify-between h-full px-2"><span class="text-xs text-white">场景'+(idx2+1)+'</span></div>';
                                el.addEventListener('click', function(e){ e.stopPropagation(); selectMediaElement(el, e); });
                                track.appendChild(el);
                                makeDraggable(el, track);
                                left += w + 8;
                            });
                            if (typeof updateMaterialStats === 'function') updateMaterialStats();
                        }
                        // 给片段打标签/分数
                        const clipEls = track.querySelectorAll("div[data-type='clip']");
                        for (let i = 0; i < scenes.length && i < clipEls.length; i++) {
                            const s = scenes[i];
                            const el = clipEls[i];
                            // 清理旧徽标
                            Array.from(el.querySelectorAll('.scene-score-badge,.scene-tags-badge')).forEach(n => n.remove());
                            el.setAttribute('data-score', String(s.score || 0));
                            el.setAttribute('data-tags', JSON.stringify(s.tags || []));
                            el.setAttribute('data-highlights', JSON.stringify(s.highlights || []));
                            el.setAttribute('title', (s.title || '') + '\n' + (Array.isArray(s.highlights)? s.highlights.join('\n') : ''));
                            // 分数徽标（右上）
                            const score = Number(s.score || 0);
                            const scoreColor = score >= 80 ? 'bg-green-500' : (score >= 50 ? 'bg-yellow-500' : 'bg-red-500');
                            const scoreBadge = document.createElement('div');
                            scoreBadge.className = 'scene-score-badge absolute top-0 right-0 '+scoreColor+' text-white px-2 py-1 text-xs rounded-bl';
                            scoreBadge.innerText = isNaN(score) ? '?' : String(score);
                            el.appendChild(scoreBadge);
                            // 标签徽标（底部）
                            const tagBadge = document.createElement('div');
                            tagBadge.className = 'scene-tags-badge absolute bottom-0 left-0 right-0 bg-black/50 text-white px-1 text-xs';
                            tagBadge.style.whiteSpace = 'nowrap'; tagBadge.style.overflow='hidden'; tagBadge.style.textOverflow='ellipsis';
                            tagBadge.innerText = (s.tags || []).slice(0,3).join(' · ');
                            el.appendChild(tagBadge);
                        }
                        layer.close(loading);
                        showNotification('成功', `融合分析完成：共 ${scenes.length} 段`, 'success');
                        layer.close(index);
                        // 打开筛选面板
                        if (typeof openSceneFilterPanel === 'function') openSceneFilterPanel(scenes);
                        return false;
                    } catch (e) {
                        layer.close(loading);
                        console.error(e);
                        layer.msg('❌ 融合流程出错：' + (e.message || '网络错误'), {icon: 2});
                        return false;
                    }
                });
            }
        });
    }

    // 场景筛选面板
    function openSceneFilterPanel(scenes) {
        const allTags = Array.from(new Set((scenes || []).flatMap(s => s.tags || [])));
        const tagsHTML = allTags.map(t => `<input type="checkbox" name="tag" value="${t}" title="${t}" lay-skin="primary">`).join(' ');
        layer.open({
            type: 1,
            title: '场景筛选/排序',
            area: ['560px', '420px'],
            content: `
                <div class="p-5">
                    <form class="layui-form" lay-filter="scene-filter-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">评分阈值</label>
                            <div class="layui-input-block flex items-center space-x-3">
                                <input type="range" id="score-filter" min="0" max="100" value="0" class="flex-1" oninput="document.getElementById('score-filter-value').innerText=this.value">
                                <span id="score-filter-value">0</span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">标签筛选</label>
                            <div class="layui-input-block" id="tag-checkboxes">${tagsHTML || '<span class="text-gray-400">无标签</span>'}</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">排序方式</label>
                            <div class="layui-input-block">
                                <select id="sort-select">
                                    <option value="score-desc">评分（高到低）</option>
                                    <option value="score-asc">评分（低到高）</option>
                                    <option value="duration-desc">时长（长到短）</option>
                                    <option value="time-asc">时间（早到晚）</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" onclick="applySceneFilters()">应用筛选</button>
                                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">关闭</button>
                            </div>
                        </div>
                    </form>
                </div>
            `,
            success: function(layero, idx){ form.render(); }
        });
    }

    // 应用筛选/排序到时间轴
    function applySceneFilters() {
        const scoreThreshold = parseInt(document.getElementById('score-filter').value || '0');
        const selectedTags = Array.from(document.querySelectorAll('#tag-checkboxes input[name="tag"]:checked')).map(cb => cb.value);
        const sortBy = document.getElementById('sort-select').value;
        const track = document.getElementById('video-track-1');
        if (!track) return;
        const clips = Array.from(track.querySelectorAll("div[data-type='clip']"));

        // 过滤
        const visibleClips = [];
        clips.forEach(clip => {
            const score = parseInt(clip.getAttribute('data-score') || '0');
            const tags = JSON.parse(clip.getAttribute('data-tags') || '[]');
            let visible = true;
            if (score < scoreThreshold) visible = false;
            if (visible && selectedTags.length > 0 && !selectedTags.some(t => tags.includes(t))) visible = false;
            clip.style.display = visible ? '' : 'none';
            if (visible) visibleClips.push(clip);
        });

        // 排序（仅对可见片段重新排布）
        const scoreOf = el => parseInt(el.getAttribute('data-score') || '0');
        const durationOf = el => Math.max(1, parseInt(el.style.width || '40')) / 10.0; // 10px = 1s
        if (sortBy === 'score-desc') visibleClips.sort((a,b)=>scoreOf(b)-scoreOf(a));
        else if (sortBy === 'score-asc') visibleClips.sort((a,b)=>scoreOf(a)-scoreOf(b));
        else if (sortBy === 'duration-desc') visibleClips.sort((a,b)=>durationOf(b)-durationOf(a));
        // time-asc 保持原顺序

        // 重新布局left
        let left = 20;
        visibleClips.forEach(el => {
            el.style.left = left + 'px';
            left += Math.max(40, parseInt(el.style.width || '40')) + 8;
            track.appendChild(el);
        });
    }

    // 获取本地语音克隆音色列表（全局定义，供多处调用）
    async function fetchVoiceCloneVoices() {
        try {
            const resp = await fetch('/api/voice-clone/builtin-voices').then(r => r.json());
            if (resp && resp.code === 0 && Array.isArray(resp.data)) {
                return resp.data.map(v => {
                    if (typeof v === 'string') return { id: v, name: v };
                    return { id: v.id || v.value || v.name || 'zh', name: v.name || v.label || v.id || 'zh' };
                });
            }
        } catch (e) { console.warn('fetchVoiceCloneVoices failed', e); }
        return [];
    }

    //   
    //  
    //   

    //   
    /* DEPRECATED: legacy openVoiceCloneTest (kept for reference, not used)

    function openVoiceCloneTest() {
        const defaults = {
            path: '',
            model_path: ''
        };
        const html = `
        <div class="p-5">
          <form class="layui-form" lay-filter="vc-test-form">
            <div class="layui-form-item">
              <label class="layui-form-label">可执行路径</label>
              <div class="layui-input-block">
                <input type="text" id="vc_path" class="layui-input" value="${defaults.path}" placeholder="可留空：使用环境变量 VOICE_CLONE_EXE 或 ai_config.json" />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">模型目录</label>
              <div class="layui-input-block">
                <input type="text" id="vc_model_path" class="layui-input" value="${defaults.model_path}" placeholder="可留空：使用环境变量 VOICE_CLONE_MODEL_DIR 或 ai_config.json" />
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="button" class="layui-btn" id="btn-vc-test">测试</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">关闭</button>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <pre id="vc-test-log" class="bg-gray-900 text-green-300 p-3 rounded" style="max-height:120px;overflow:auto"></pre>
              </div>
            </div>
          </form>
        </div>`;
        const idx = layer.open({ type:1, title:'克隆引擎连接测试', area:['560px','380px'], content: html, success: (layero)=>{
            form.render();
            const log = (t)=>{ const el=layero[0].querySelector('#vc-test-log'); if(el){ el.textContent += (t+'\n'); el.scrollTop=el.scrollHeight; } };

            layero[0].querySelector('#btn-vc-test').onclick = async ()=>{
                const path = layero[0].querySelector('#vc_path').value.trim();
                const model_path = layero[0].querySelector('#vc_model_path').value.trim();
                log('> ...');
                try {
                    const resp = await fetch('/api/test/voice-clone-engine', {
                        method:'POST', headers:{'Content-Type':'application/json'},
                        body: JSON.stringify({ voice_clone_path: path, model_path })
                    }).then(r=>r.json());
                    if (resp.code === 0) {
                        log('OK: ' + (resp.msg || '可用'));
                        if (Array.isArray(resp.voices)) log('Voices: ' + resp.voices.join(', '));
                        layer.msg('', {icon:1});
                    } else {
                        log('ERR: ' + (resp.msg || '未知错误'));
                        layer.msg('', {icon:2});
                    }
                } catch(e){ log('ERR: ' + e); layer.msg('', {icon:2}); }
            };
        }});
    */




    // 修正版：克隆引擎连接测试（UI 文案正常）
    function openVoiceCloneTest2() {
        const defaults = {
            path: '',
            model_path: ''
        };
        const html = `
        <div class="p-5">
          <form class="layui-form" lay-filter="vc-test-form">
            <div class="layui-form-item">
              <label class="layui-form-label">可执行路径</label>
              <div class="layui-input-block">
                <input type="text" id="vc_path" class="layui-input" value="${defaults.path}" placeholder="可留空：使用环境变量 VOICE_CLONE_EXE 或 ai_config.json" />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">模型目录</label>
              <div class="layui-input-block">
                <input type="text" id="vc_model_path" class="layui-input" value="${defaults.model_path}" placeholder="可留空：使用环境变量 VOICE_CLONE_MODEL_DIR 或 ai_config.json" />
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="button" class="layui-btn" id="btn-vc-test">测试</button>

                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">关闭</button>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <pre id="vc-test-log" class="bg-gray-900 text-green-300 p-3 rounded" style="max-height:120px;overflow:auto"></pre>
              </div>
            </div>
          </form>
        </div>`;
        const idx = layer.open({ type:1, title:'克隆引擎连接测试', area:['560px','380px'], content: html, success: (layero)=>{
            form.render();
            const log = (t)=>{ const el=layero[0].querySelector('#vc-test-log'); if(el){ el.textContent += (t+'\n'); el.scrollTop=el.scrollHeight; } };

            layero[0].querySelector('#btn-vc-test').onclick = async ()=>{
                const path = layero[0].querySelector('#vc_path').value.trim();
                const model_path = layero[0].querySelector('#vc_model_path').value.trim();
                log('> 测试中...');
                try {
                    const resp = await fetch('/api/voice_clone/test', {
                        method:'POST', headers:{'Content-Type':'application/json'},
                        body: JSON.stringify({ voice_clone_path: path, model_path })
                    }).then(r=>r.json());
                    if (resp.code === 0) {
                        log('OK: ' + (resp.msg || '可用'));
                        if (Array.isArray(resp.voices)) log('Voices: ' + resp.voices.join(', '));
                        layer.msg('测试成功', {icon:1});
                    } else {
                        log('ERR: ' + (resp.msg || '未知错误'));
                        layer.msg('测试失败', {icon:2});
                    }
                } catch(e){ log('ERR: ' + e); layer.msg('测试失败', {icon:2}); }
            };
        }});
    }




</script>



{% endblock %}