yichael
/
AnimationManager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>素材管理</title>
    <link rel="stylesheet" href="../../css/resource-manager/tool-bar.css">
    <link rel="stylesheet" href="../../css/resource-manager/disk.css">
    <link rel="stylesheet" href="../../css/resource-manager/right-click-menu.css">
    <link rel="stylesheet" href="../../css/resource-manager/hint-view.css">
    <link rel="stylesheet" href="../../css/resource-manager/confirm-view.css">
</head>
<body>
    <div class="disk-container" id="diskContainer">
        <!-- 头部区域 -->
        <div class="header">
            <div class="breadcrumb" id="breadcrumb">
                <span class="breadcrumb-item active" data-path="">全部文件</span>
            </div>
            <div class="header-right">
                <div class="search-box">
                    <svg class="search-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                    </svg>
                    <input type="text" id="searchInput" placeholder="搜索文件或文件夹...">
                    <button class="search-clear" id="searchClear" style="display: none;" title="清空搜索">
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
                            <path d="M7 0C3.13 0 0 3.13 0 7s3.13 7 7 7 7-3.13 7-7S10.87 0 7 0zm3.5 9.21L9.21 10.5 7 8.29 4.79 10.5 3.5 9.21 5.71 7 3.5 4.79 4.79 3.5 7 5.71 9.21 3.5 10.5 4.79 8.29 7 10.5 9.21z"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- 选中操作栏 -->
        <div class="selection-bar" id="selectionBar">
            <div class="selection-actions">
                <button class="btn-action btn-danger" id="btnDelete">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M5 2V1h6v1h4v2H1V2h4zm1 3h4v9H6V5zm-3 0h2v9H3V5zm8 0h2v9h-2V5z"/>
                    </svg>
                    删除
                </button>
            </div>
            <span class="selection-count" id="selectionCount">已选中 0 项</span>
        </div>

        <!-- 文件列表区域 -->
        <div class="file-list-container" id="dropZone">
            <div class="drop-hint" id="dropHint">
                <svg width="64" height="64" viewBox="0 0 64 64" fill="currentColor">
                    <path d="M32 8L16 24h10v16h12V24h10L32 8z"/>
                    <path d="M8 48h48v8H8z"/>
                </svg>
                <p>拖拽文件或文件夹到此处上传</p>
            </div>
            
            <div class="file-list" id="fileList">
                <!-- 文件项将动态生成 -->
            </div>

            <div class="empty-state" id="emptyState">
                <svg width="120" height="120" viewBox="0 0 120 120" fill="#ddd">
                    <path d="M30 20h40l20 20v60H30V20z"/>
                    <path d="M70 20v20h20"/>
                </svg>
                <p>此文件夹为空</p>
                <p class="hint">拖拽文件或文件夹到此处上传</p>
            </div>

            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p>加载中...</p>
            </div>
        </div>

        <!-- 上传进度 -->
        <div class="upload-progress" id="uploadProgress">
            <div class="upload-progress-header">
                <span class="upload-progress-title">上传文件</span>
                <button class="upload-progress-close" id="uploadProgressClose">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
            </div>
            <div class="upload-progress-list" id="uploadProgressList"></div>
        </div>

        <template id="uploadProgressTemplate">
            <div class="upload-progress-item">
                <div class="upload-progress-icon">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M10 2L5 7h3v6h4V7h3L10 2z"/>
                        <path d="M3 16h14v2H3z"/>
                    </svg>
                </div>
                <div class="upload-progress-info">
                    <div class="upload-progress-name"></div>
                    <div class="upload-progress-status">上传中...</div>
                    <div class="upload-progress-bar">
                        <div class="upload-progress-bar-fill" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </template>

    </div>

    <!-- 右键菜单（放在 body 直接下面） -->
    <div class="context-menu" id="contextMenu">
        <button class="context-menu-item" data-action="new">
            <span>新建分类</span>
        </button>
        <button class="context-menu-item" data-action="upload">
            <span>上传素材</span>
        </button>
        <button class="context-menu-item" data-action="back">
            <span>返回上级</span>
        </button>
        <div class="context-menu-divider"></div>
        <button class="context-menu-item" data-action="rename">
            <span>重命名</span>
        </button>
        <button class="context-menu-item danger" data-action="delete">
            <span>删除</span>
        </button>
        <div class="context-menu-divider"></div>
        <button class="context-menu-item" data-action="refresh">
            <span>刷新</span>
        </button>
    </div>

    <!-- 文件输入通过 JS 动态创建 -->

    <!-- 框选区域 -->
    <div class="selection-box" id="selectionBox"></div>

    <!-- 提示消息组件 -->
    <div class="hint-view" id="hintView">
        <div class="hint-content">
            <svg class="hint-icon" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                <path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm-1 15l-5-5 1.41-1.41L9 12.17l7.59-7.59L18 6l-9 9z"/>
            </svg>
            <span class="hint-message" id="hintMessage"></span>
        </div>
    </div>

    <!-- 全局确认对话框 -->
    <div class="global-confirm-overlay" id="globalConfirmOverlay">
        <div class="global-confirm-dialog">
            <div class="confirm-content">
                <div class="confirm-message" id="confirmMessage"></div>
            </div>
            <div class="confirm-actions">
                <button class="confirm-btn confirm-cancel" id="confirmCancelBtn">取消</button>
                <button class="confirm-btn confirm-ok" id="confirmOkBtn">确认</button>
            </div>
        </div>
    </div>

    <!-- 全局输入对话框 -->
    <div class="global-confirm-overlay" id="globalPromptOverlay">
        <div class="global-confirm-dialog">
            <div class="confirm-content">
                <div class="confirm-message" id="promptMessage"></div>
                <input type="text" class="prompt-input" id="promptInput" placeholder="">
            </div>
            <div class="confirm-actions">
                <button class="confirm-btn confirm-cancel" id="promptCancelBtn">取消</button>
                <button class="confirm-btn confirm-ok" id="promptOkBtn">确认</button>
            </div>
        </div>
    </div>

    <script src="../../js/resource-manager/path.js"></script>
    <script src="../../js/resource-manager/multiple-selection.js"></script>
    <script src="../../js/resource-manager/shortcut-keys.js"></script>
    <script src="../../js/resource-manager/search-bar.js"></script>
    <script src="../../js/resource-manager/right-click-menu.js"></script>
    <script src="../../js/resource-manager/resource-manager.js"></script>
    <script>
        // 初始化素材管理器
        (function() {
            let apiBaseUrl = 'http://localhost:3000';
            
            // 尝试从父窗口获取 API 地址（file:// 协议下会失败，使用默认值）
            try {
                if (window.parent && window.parent.getApiBaseUrl) {
                    apiBaseUrl = window.parent.getApiBaseUrl();
                }
            } catch (e) {
                console.log('[ResourceManager] 使用默认 API 地址:', apiBaseUrl);
            }
            
            if (!window.resourceManager) {
                window.resourceManager = new ResourceManager({
                    apiBaseUrl: apiBaseUrl
                });
            }
        })();
    </script>
</body>
</html>