Upload 3 files

public/cloud.html

@@ -0,0 +1,152 @@
+<!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/cloud.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <header class="header">
+        <div class="header-left">
+            <a href="index.html" class="back-btn">
+                <i class="fas fa-arrow-left"></i>
+                <span>返回首页</span>
+            </a>
+            <h1 class="logo">☁️ 我的云盘</h1>
+        </div>
+        <div class="header-right">
+            <div class="storage-info">
+                <div class="storage-text">
+                    <span id="usedStorage">0 B</span> / <span id="maxStorage">1 GB</span>
+                </div>
+                <div class="storage-bar">
+                    <div class="storage-fill" id="storageFill"></div>
+                </div>
+            </div>
+            <div class="user-info">
+                <span class="username" id="username">加载中...</span>
+                <a href="index.html" class="logout-btn" onclick="logout()">
+                    <i class="fas fa-sign-out-alt"></i>
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <!-- 主内容区 -->
+    <main class="main-content">
+        <!-- 操作栏 -->
+        <div class="toolbar">
+            <div class="toolbar-left">
+                <button class="btn btn-primary" id="uploadBtn">
+                    <i class="fas fa-upload"></i>
+                    <span>上传文件</span>
+                </button>
+                <input type="file" id="fileInput" multiple style="display: none;">
+                
+                <button class="btn btn-secondary" id="mkdirBtn">
+                    <i class="fas fa-folder-plus"></i>
+                    <span>新建文件夹</span>
+                </button>
+                
+                <button class="btn btn-secondary" id="refreshBtn">
+                    <i class="fas fa-sync-alt"></i>
+                    <span>刷新</span>
+                </button>
+            </div>
+            
+            <!-- 面包屑导航 -->
+            <div class="breadcrumb" id="breadcrumb">
+                <a href="#" data-path="">
+                    <i class="fas fa-home"></i> 根目录
+                </a>
+            </div>
+        </div>
+
+        <!-- 上传区域 -->
+        <div class="upload-zone" id="uploadZone">
+            <div class="upload-icon">
+                <i class="fas fa-cloud-upload-alt"></i>
+            </div>
+            <div class="upload-text">
+                <p>拖拽文件到这里上传</p>
+                <p class="upload-hint">或者点击上方"上传文件"按钮</p>
+            </div>
+        </div>
+
+        <!-- 文件列表 -->
+        <div class="file-list" id="fileList">
+            <div class="loading">
+                <i class="fas fa-spinner fa-spin"></i>
+                <span>加载中...</span>
+            </div>
+        </div>
+
+        <!-- 空状态 -->
+        <div class="empty-state" id="emptyState" style="display: none;">
+            <div class="empty-icon">
+                <i class="fas fa-folder-open"></i>
+            </div>
+            <p>这里还没有文件</p>
+            <p class="empty-hint">上传文件或新建文件夹开始使用吧</p>
+        </div>
+    </main>
+
+    <!-- 新建文件夹模态框 -->
+    <div class="modal" id="mkdirModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>新建文件夹</h3>
+                <button class="modal-close" id="closeMkdirModal">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <input type="text" id="folderNameInput" placeholder="请输入文件夹名称" class="modal-input">
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" id="cancelMkdir">取消</button>
+                <button class="btn btn-primary" id="confirmMkdir">创建</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 删除确认模态框 -->
+    <div class="modal" id="deleteModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>确认删除</h3>
+                <button class="modal-close" id="closeDeleteModal">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>确定要删除 <strong id="deleteFileName"></strong> 吗？</p>
+                <p class="delete-warning">此操作不可恢复！</p>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" id="cancelDelete">取消</button>
+                <button class="btn btn-danger" id="confirmDelete">删除</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 上传进度条 -->
+    <div class="upload-progress" id="uploadProgress">
+        <div class="progress-bar">
+            <div class="progress-fill" id="progressFill"></div>
+        </div>
+        <div class="progress-text" id="progressText">正在上传...</div>
+    </div>
+
+    <!-- Toast 提示 -->
+    <div class="toast" id="toast">
+        <i class="toast-icon fas fa-info-circle" id="toastIcon"></i>
+        <span class="toast-message" id="toastMessage"></span>
+    </div>
+
+    <script src="js/cloud.js"></script>
+</body>
+</html>

public/css/cloud.css

@@ -0,0 +1,647 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    color: #333;
+}
+
+/* 顶部导航 */
+.header {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    padding: 15px 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.back-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #667eea;
+    text-decoration: none;
+    font-size: 14px;
+    padding: 8px 16px;
+    border-radius: 20px;
+    background: rgba(102, 126, 234, 0.1);
+    transition: all 0.3s;
+}
+
+.back-btn:hover {
+    background: rgba(102, 126, 234, 0.2);
+}
+
+.logo {
+    font-size: 20px;
+    font-weight: 600;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 25px;
+}
+
+.storage-info {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    min-width: 180px;
+}
+
+.storage-text {
+    font-size: 12px;
+    color: #666;
+    text-align: right;
+}
+
+.storage-bar {
+    width: 180px;
+    height: 6px;
+    background: #e0e0e0;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.storage-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    border-radius: 3px;
+    transition: width 0.3s;
+    width: 0%;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.username {
+    font-size: 14px;
+    color: #333;
+    font-weight: 500;
+}
+
+.logout-btn {
+    color: #999;
+    text-decoration: none;
+    font-size: 16px;
+    padding: 8px;
+    border-radius: 50%;
+    transition: all 0.3s;
+}
+
+.logout-btn:hover {
+    color: #f5576c;
+    background: rgba(245, 87, 108, 0.1);
+}
+
+/* 主内容区 */
+.main-content {
+    max-width: 1200px;
+    margin: 30px auto;
+    padding: 0 20px;
+}
+
+/* 工具栏 */
+.toolbar {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.toolbar-left {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 15px;
+    flex-wrap: wrap;
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 10px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s;
+    text-decoration: none;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
+}
+
+.btn-secondary {
+    background: #f5f5f5;
+    color: #333;
+}
+
+.btn-secondary:hover {
+    background: #e8e8e8;
+}
+
+.btn-danger {
+    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
+    color: white;
+}
+
+.btn-danger:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
+}
+
+/* 面包屑 */
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    padding-top: 15px;
+    border-top: 1px solid #eee;
+}
+
+.breadcrumb a {
+    color: #667eea;
+    text-decoration: none;
+    font-size: 14px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    transition: all 0.3s;
+}
+
+.breadcrumb a:hover {
+    background: rgba(102, 126, 234, 0.1);
+}
+
+.breadcrumb .separator {
+    color: #ccc;
+    font-size: 12px;
+}
+
+/* 上传区域 */
+.upload-zone {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border: 2px dashed #667eea;
+    border-radius: 15px;
+    padding: 40px;
+    text-align: center;
+    margin-bottom: 20px;
+    transition: all 0.3s;
+}
+
+.upload-zone.dragover {
+    background: rgba(102, 126, 234, 0.1);
+    border-color: #764ba2;
+    transform: scale(1.01);
+}
+
+.upload-icon {
+    font-size: 48px;
+    color: #667eea;
+    margin-bottom: 15px;
+}
+
+.upload-text p {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 5px;
+}
+
+.upload-hint {
+    font-size: 13px;
+    color: #999;
+}
+
+/* 文件列表 */
+.file-list {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.file-item {
+    display: flex;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #f0f0f0;
+    transition: all 0.3s;
+    cursor: pointer;
+}
+
+.file-item:last-child {
+    border-bottom: none;
+}
+
+.file-item:hover {
+    background: rgba(102, 126, 234, 0.05);
+}
+
+.file-icon {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    margin-right: 15px;
+    font-size: 20px;
+}
+
+.file-icon.folder {
+    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+    color: #ff9a56;
+}
+
+.file-icon.file {
+    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+    color: #667eea;
+}
+
+.file-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.file-name {
+    font-size: 14px;
+    color: #333;
+    font-weight: 500;
+    margin-bottom: 3px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.file-meta {
+    font-size: 12px;
+    color: #999;
+    display: flex;
+    gap: 15px;
+}
+
+.file-actions {
+    display: flex;
+    gap: 8px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.file-item:hover .file-actions {
+    opacity: 1;
+}
+
+.action-btn {
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 8px;
+    background: #f5f5f5;
+    color: #666;
+    cursor: pointer;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+}
+
+.action-btn:hover {
+    background: #e8e8e8;
+}
+
+.action-btn.download-btn:hover {
+    background: rgba(102, 126, 234, 0.1);
+    color: #667eea;
+}
+
+.action-btn.delete-btn:hover {
+    background: rgba(245, 87, 108, 0.1);
+    color: #f5576c;
+}
+
+/* 加载状态 */
+.loading {
+    padding: 60px;
+    text-align: center;
+    color: #999;
+}
+
+.loading i {
+    font-size: 32px;
+    margin-bottom: 15px;
+    color: #667eea;
+}
+
+.loading span {
+    display: block;
+    font-size: 14px;
+}
+
+/* 空状态 */
+.empty-state {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    padding: 60px;
+    text-align: center;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.empty-icon {
+    font-size: 64px;
+    color: #ddd;
+    margin-bottom: 20px;
+}
+
+.empty-state p {
+    font-size: 16px;
+    color: #666;
+    margin-bottom: 5px;
+}
+
+.empty-hint {
+    font-size: 13px;
+    color: #999;
+}
+
+/* 模态框 */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal.show {
+    display: flex;
+}
+
+.modal-content {
+    background: white;
+    border-radius: 15px;
+    width: 90%;
+    max-width: 400px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    animation: modalIn 0.3s ease;
+}
+
+@keyframes modalIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.modal-header h3 {
+    font-size: 16px;
+    color: #333;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 18px;
+    color: #999;
+    cursor: pointer;
+    transition: color 0.3s;
+}
+
+.modal-close:hover {
+    color: #666;
+}
+
+.modal-body {
+    padding: 20px;
+}
+
+.modal-input {
+    width: 100%;
+    padding: 12px 15px;
+    border: 2px solid #e0e0e0;
+    border-radius: 10px;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.3s;
+}
+
+.modal-input:focus {
+    border-color: #667eea;
+}
+
+.modal-body p {
+    font-size: 14px;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.delete-warning {
+    color: #f5576c;
+    font-size: 13px;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 15px 20px;
+    border-top: 1px solid #f0f0f0;
+}
+
+/* 上传进度条 */
+.upload-progress {
+    display: none;
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: white;
+    padding: 15px 25px;
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    z-index: 999;
+    min-width: 300px;
+}
+
+.upload-progress.show {
+    display: block;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background: #e0e0e0;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 8px;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    border-radius: 4px;
+    transition: width 0.3s;
+    width: 0%;
+}
+
+.progress-text {
+    font-size: 13px;
+    color: #666;
+    text-align: center;
+}
+
+/* Toast 提示 */
+.toast {
+    position: fixed;
+    top: 80px;
+    left: 50%;
+    transform: translateX(-50%) translateY(-20px);
+    background: white;
+    padding: 12px 24px;
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    z-index: 1001;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    opacity: 0;
+    transition: all 0.3s;
+    pointer-events: none;
+}
+
+.toast.show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
+.toast-icon {
+    font-size: 18px;
+}
+
+.toast-success .toast-icon {
+    color: #4caf50;
+}
+
+.toast-error .toast-icon {
+    color: #f5576c;
+}
+
+.toast-info .toast-icon {
+    color: #667eea;
+}
+
+.toast-message {
+    font-size: 14px;
+    color: #333;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+    .header {
+        padding: 12px 15px;
+        flex-direction: column;
+        gap: 15px;
+    }
+    
+    .header-left {
+        width: 100%;
+        justify-content: space-between;
+    }
+    
+    .header-right {
+        width: 100%;
+        justify-content: space-between;
+    }
+    
+    .storage-bar {
+        width: 120px;
+    }
+    
+    .main-content {
+        margin: 15px auto;
+        padding: 0 10px;
+    }
+    
+    .toolbar {
+        padding: 15px;
+    }
+    
+    .btn {
+        padding: 8px 15px;
+        font-size: 13px;
+    }
+    
+    .btn span {
+        display: none;
+    }
+    
+    .upload-zone {
+        padding: 30px 20px;
+    }
+    
+    .file-actions {
+        opacity: 1;
+    }
+    
+    .file-meta {
+        flex-direction: column;
+        gap: 2px;
+    }
+}

public/js/cloud.js

@@ -0,0 +1,483 @@
+// 全局变量
+let currentPath = '';
+let token = localStorage.getItem('token') || '';
+
+// DOM 元素
+const uploadBtn = document.getElementById('uploadBtn');
+const fileInput = document.getElementById('fileInput');
+const mkdirBtn = document.getElementById('mkdirBtn');
+const refreshBtn = document.getElementById('refreshBtn');
+const uploadZone = document.getElementById('uploadZone');
+const fileList = document.getElementById('fileList');
+const emptyState = document.getElementById('emptyState');
+const breadcrumb = document.getElementById('breadcrumb');
+const mkdirModal = document.getElementById('mkdirModal');
+const deleteModal = document.getElementById('deleteModal');
+const uploadProgress = document.getElementById('uploadProgress');
+const progressFill = document.getElementById('progressFill');
+const progressText = document.getElementById('progressText');
+const toast = document.getElementById('toast');
+const toastIcon = document.getElementById('toastIcon');
+const toastMessage = document.getElementById('toastMessage');
+
+// 初始化
+document.addEventListener('DOMContentLoaded', () => {
+    checkLogin();
+    loadUserInfo();
+    loadFileList();
+    initEventListeners();
+});
+
+// 检查登录状态
+function checkLogin() {
+    if (!token) {
+        showToast('请先登录', 'error');
+        setTimeout(() => {
+            window.location.href = 'login.html';
+        }, 1500);
+        return false;
+    }
+    return true;
+}
+
+// 加载用户信息
+function loadUserInfo() {
+    fetch('/api/cloud/user-info', {
+        headers: {
+            'Authorization': 'Bearer ' + token
+        }
+    })
+    .then(res => res.json())
+    .then(data => {
+        if (data.code === 200) {
+            document.getElementById('username').textContent = data.data.username;
+            document.getElementById('usedStorage').textContent = data.data.usedStorageFormatted;
+            document.getElementById('maxStorage').textContent = data.data.maxStorageFormatted;
+            document.getElementById('storageFill').style.width = data.data.storagePercent + '%';
+        } else if (data.code === 401) {
+            localStorage.removeItem('token');
+            showToast('登录已过期，请重新登录', 'error');
+            setTimeout(() => {
+                window.location.href = 'login.html';
+            }, 1500);
+        }
+    })
+    .catch(() => {
+        showToast('加载用户信息失败', 'error');
+    });
+}
+
+// 加载文件列表
+function loadFileList() {
+    fileList.style.display = 'block';
+    emptyState.style.display = 'none';
+    fileList.innerHTML = '<div class="loading"><i class="fas fa-spinner fa-spin"></i><span>加载中...</span></div>';
+    
+    fetch('/api/cloud/list?path=' + encodeURIComponent(currentPath), {
+        headers: {
+            'Authorization': 'Bearer ' + token
+        }
+    })
+    .then(res => res.json())
+    .then(data => {
+        if (data.code === 200) {
+            renderFileList(data.data.files);
+            renderBreadcrumb(data.data.breadcrumb);
+            // 更新存储信息
+            loadUserInfo();
+        } else {
+            fileList.innerHTML = '<div class="loading"><span>加载失败</span></div>';
+            showToast(data.msg || '加载失败', 'error');
+        }
+    })
+    .catch(() => {
+        fileList.innerHTML = '<div class="loading"><span>加载失败</span></div>';
+        showToast('网络错误', 'error');
+    });
+}
+
+// 渲染文件列表
+function renderFileList(files) {
+    if (files.length === 0) {
+        fileList.style.display = 'none';
+        emptyState.style.display = 'block';
+        return;
+    }
+    
+    let html = '';
+    files.forEach(file => {
+        const iconClass = file.type === 'directory' ? 'folder' : 'file';
+        const icon = file.type === 'directory' ? 'fa-folder' : 'fa-file';
+        
+        html += `
+            <div class="file-item" data-name="${file.name}" data-type="${file.type}">
+                <div class="file-icon ${iconClass}">
+                    <i class="fas ${icon}"></i>
+                </div>
+                <div class="file-info">
+                    <div class="file-name">${file.name}</div>
+                    <div class="file-meta">
+                        <span>${file.sizeFormatted}</span>
+                        <span>${file.modified}</span>
+                    </div>
+                </div>
+                <div class="file-actions">
+                    ${file.type === 'file' ? `
+                        <button class="action-btn download-btn" data-filename="${file.name}" title="下载">
+                            <i class="fas fa-download"></i>
+                        </button>
+                    ` : ''}
+                    <button class="action-btn delete-btn" data-filename="${file.name}" data-type="${file.type}" title="删除">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            </div>
+        `;
+    });
+    
+    fileList.innerHTML = html;
+}
+
+// 渲染面包屑
+function renderBreadcrumb(items) {
+    let html = '<a href="#" data-path=""><i class="fas fa-home"></i> 根目录</a>';
+    
+    if (items && items.length > 0) {
+        items.forEach((item, index) => {
+            html += '<span class="separator"><i class="fas fa-chevron-right"></i></span>';
+            if (index === items.length - 1) {
+                html += `<span class="current">${item.name}</span>`;
+            } else {
+                html += `<a href="#" data-path="${item.path}">${item.name}</a>`;
+            }
+        });
+    }
+    
+    breadcrumb.innerHTML = html;
+    
+    // 绑定点击事件
+    breadcrumb.querySelectorAll('a').forEach(a => {
+        a.addEventListener('click', (e) => {
+            e.preventDefault();
+            const path = a.dataset.path;
+            currentPath = path;
+            loadFileList();
+        });
+    });
+}
+
+// 初始化事件监听
+function initEventListeners() {
+    // 上传按钮
+    uploadBtn.addEventListener('click', () => {
+        fileInput.click();
+    });
+    
+    // 文件选择
+    fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) {
+            uploadFiles(e.target.files);
+        }
+    });
+    
+    // 拖拽上传
+    uploadZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadZone.classList.add('dragover');
+    });
+    
+    uploadZone.addEventListener('dragleave', () => {
+        uploadZone.classList.remove('dragover');
+    });
+    
+    uploadZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadZone.classList.remove('dragover');
+        if (e.dataTransfer.files.length > 0) {
+            uploadFiles(e.dataTransfer.files);
+        }
+    });
+    
+    // 新建文件夹
+    mkdirBtn.addEventListener('click', () => {
+        mkdirModal.classList.add('show');
+        document.getElementById('folderNameInput').value = '';
+        document.getElementById('folderNameInput').focus();
+    });
+    
+    document.getElementById('closeMkdirModal').addEventListener('click', () => {
+        mkdirModal.classList.remove('show');
+    });
+    
+    document.getElementById('cancelMkdir').addEventListener('click', () => {
+        mkdirModal.classList.remove('show');
+    });
+    
+    document.getElementById('confirmMkdir').addEventListener('click', createFolder);
+    
+    document.getElementById('folderNameInput').addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            createFolder();
+        }
+    });
+    
+    // 刷新
+    refreshBtn.addEventListener('click', () => {
+        loadFileList();
+        showToast('已刷新', 'info');
+    });
+    
+    // 删除确认
+    document.getElementById('closeDeleteModal').addEventListener('click', () => {
+        deleteModal.classList.remove('show');
+    });
+    
+    document.getElementById('cancelDelete').addEventListener('click', () => {
+        deleteModal.classList.remove('show');
+    });
+    
+    document.getElementById('confirmDelete').addEventListener('click', confirmDelete);
+    
+    // 点击文件/文件夹
+    fileList.addEventListener('click', (e) => {
+        const fileItem = e.target.closest('.file-item');
+        if (!fileItem) return;
+        
+        // 如果点击的是操作按钮，不处理
+        if (e.target.closest('.action-btn')) return;
+        
+        const name = fileItem.dataset.name;
+        const type = fileItem.dataset.type;
+        
+        if (type === 'directory') {
+            // 进入文件夹
+            currentPath = currentPath ? currentPath + '/' + name : name;
+            loadFileList();
+        }
+    });
+    
+    // 下载按钮
+    fileList.addEventListener('click', (e) => {
+        const downloadBtn = e.target.closest('.download-btn');
+        if (downloadBtn) {
+            const filename = downloadBtn.dataset.filename;
+            downloadFile(filename);
+        }
+    });
+    
+    // 删除按钮
+    fileList.addEventListener('click', (e) => {
+        const deleteBtn = e.target.closest('.delete-btn');
+        if (deleteBtn) {
+            const filename = deleteBtn.dataset.filename;
+            const type = deleteBtn.dataset.type;
+            showDeleteModal(filename, type);
+        }
+    });
+    
+    // 点击模态框背景关闭
+    mkdirModal.addEventListener('click', (e) => {
+        if (e.target === mkdirModal) {
+            mkdirModal.classList.remove('show');
+        }
+    });
+    
+    deleteModal.addEventListener('click', (e) => {
+        if (e.target === deleteModal) {
+            deleteModal.classList.remove('show');
+        }
+    });
+    
+    // ESC 关闭模态框
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            mkdirModal.classList.remove('show');
+            deleteModal.classList.remove('show');
+        }
+    });
+}
+
+// 上传文件
+function uploadFiles(files) {
+    if (files.length === 0) return;
+    
+    showProgress();
+    let uploaded = 0;
+    let total = files.length;
+    let hasError = false;
+    
+    Array.from(files).forEach((file) => {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('path', currentPath);
+        formData.append('token', token);
+        
+        const xhr = new XMLHttpRequest();
+        
+        xhr.upload.addEventListener('progress', (e) => {
+            if (e.lengthComputable) {
+                const percent = (e.loaded / e.total) * 100;
+                const overallPercent = ((uploaded + percent / 100) / total) * 100;
+                progressFill.style.width = overallPercent + '%';
+                progressText.textContent = '正在上传... (' + (uploaded + 1) + '/' + total + ')';
+            }
+        });
+        
+        xhr.addEventListener('load', () => {
+            try {
+                const result = JSON.parse(xhr.responseText);
+                if (result.code !== 200) {
+                    hasError = true;
+                    showToast(result.msg || '上传失败', 'error');
+                }
+            } catch (e) {
+                hasError = true;
+                showToast('上传失败', 'error');
+            }
+            
+            uploaded++;
+            if (uploaded >= total) {
+                setTimeout(() => {
+                    hideProgress();
+                    if (!hasError) {
+                        showToast('上传成功', 'success');
+                    }
+                    loadFileList();
+                }, 300);
+            }
+        });
+        
+        xhr.addEventListener('error', () => {
+            hasError = true;
+            uploaded++;
+            if (uploaded >= total) {
+                hideProgress();
+                showToast('上传失败', 'error');
+            }
+        });
+        
+        xhr.open('POST', '/api/cloud/upload');
+        xhr.setRequestHeader('Authorization', 'Bearer ' + token);
+        xhr.send(formData);
+    });
+    
+    fileInput.value = '';
+}
+
+// 新建文件夹
+function createFolder() {
+    const folderName = document.getElementById('folderNameInput').value.trim();
+    if (!folderName) {
+        showToast('请输入文件夹名称', 'error');
+        return;
+    }
+    
+    fetch('/api/cloud/mkdir', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + token
+        },
+        body: JSON.stringify({ dirname: folderName, path: currentPath })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if (data.code === 200) {
+            showToast('文件夹创建成功', 'success');
+            mkdirModal.classList.remove('show');
+            loadFileList();
+        } else {
+            showToast(data.msg || '创建失败', 'error');
+        }
+    })
+    .catch(() => {
+        showToast('创建失败', 'error');
+    });
+}
+
+// 显示删除确认框
+function showDeleteModal(filename, type) {
+    document.getElementById('deleteFileName').textContent = filename;
+    deleteModal.dataset.filename = filename;
+    deleteModal.dataset.type = type;
+    deleteModal.classList.add('show');
+}
+
+// 确认删除
+function confirmDelete() {
+    const filename = deleteModal.dataset.filename;
+    if (!filename) return;
+    
+    fetch('/api/cloud/delete', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + token
+        },
+        body: JSON.stringify({ filename: filename, path: currentPath })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if (data.code === 200) {
+            showToast('删除成功', 'success');
+            deleteModal.classList.remove('show');
+            loadFileList();
+        } else {
+            showToast(data.msg || '删除失败', 'error');
+        }
+    })
+    .catch(() => {
+        showToast('删除失败', 'error');
+    });
+}
+
+// 下载文件
+function downloadFile(filename) {
+    const url = '/api/cloud/download?filename=' + encodeURIComponent(filename) + '&path=' + encodeURIComponent(currentPath) + '&token=' + encodeURIComponent(token);
+    window.location.href = url;
+}
+
+// 退出登录
+function logout() {
+    localStorage.removeItem('token');
+    showToast('已退出登录', 'info');
+}
+
+// 显示进度条
+function showProgress() {
+    uploadProgress.classList.add('show');
+    progressFill.style.width = '0%';
+}
+
+// 隐藏进度条
+function hideProgress() {
+    uploadProgress.classList.remove('show');
+}
+
+// Toast 提示
+let toastTimer = null;
+
+function showToast(message, type) {
+    if (!type) type = 'info';
+    
+    toastMessage.textContent = message;
+    toast.className = 'toast toast-' + type;
+    
+    if (type === 'success') {
+        toastIcon.className = 'toast-icon fas fa-check-circle';
+    } else if (type === 'error') {
+        toastIcon.className = 'toast-icon fas fa-exclamation-circle';
+    } else {
+        toastIcon.className = 'toast-icon fas fa-info-circle';
+    }
+    
+    toast.classList.add('show');
+    
+    if (toastTimer) {
+        clearTimeout(toastTimer);
+    }
+    
+    toastTimer = setTimeout(() => {
+        toast.classList.remove('show');
+    }, 3000);
+}