collabdocchat 2.1.4 → 2.2.0

package/src/pages/optimized-backup-view.js

@@ -1,614 +0,0 @@
-// 优化后的备份管理界面
-// 使用卡片式布局，提升视觉效果和用户体验
-
-export async function renderOptimizedBackupView(container) {
-  try {
-    const token = localStorage.getItem('token');
-    
-    // 获取备份列表
-    const backupsResponse = await fetch('http://localhost:3000/api/backup/list', {
-      headers: { 'Authorization': `Bearer ${token}` }
-    });
-    const backupsResult = await backupsResponse.json();
-    
-    // 获取备份配置
-    const configResponse = await fetch('http://localhost:3000/api/backup/config', {
-      headers: { 'Authorization': `Bearer ${token}` }
-    });
-    const configResult = await configResponse.json();
-
-    const backups = backupsResult.data?.backups || [];
-    const config = configResult.data?.config || {};
-
-    container.innerHTML = `
-      <div class="view-header">
-        <h2>💾 备份管理</h2>
-        <div style="display: flex; gap: 10px;">
-          <button class="btn-primary" id="createBackupBtn">
-            <span style="font-size: 18px;">�?/span> 立即备份
-          </button>
-          <button class="btn-secondary" id="configBackupBtn">
-            <span style="font-size: 18px;">⚙️</span> 备份设置
-          </button>
-        </div>
-      </div>
-
-      <!-- 统计卡片区域 -->
-      <div class="backup-stats-grid">
-        <div class="stat-card-modern">
-          <div class="stat-icon" style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);">
-            📊
-          </div>
-          <div class="stat-content">
-            <div class="stat-label">备份总数</div>
-            <div class="stat-value">${backups.length}</div>
-          </div>
-        </div>
-
-        <div class="stat-card-modern">
-          <div class="stat-icon" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
-            ${config.autoBackup ? '�? : '�?}
-          </div>
-          <div class="stat-content">
-            <div class="stat-label">自动备份</div>
-            <div class="stat-value">${config.autoBackup ? '已启�? : '已禁�?}</div>
-          </div>
-        </div>
-
-        <div class="stat-card-modern">
-          <div class="stat-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
-            🕐
-          </div>
-          <div class="stat-content">
-            <div class="stat-label">备份频率</div>
-            <div class="stat-value">${config.schedule || '未设�?}</div>
-          </div>
-        </div>
-
-        <div class="stat-card-modern">
-          <div class="stat-icon" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);">
-            📅
-          </div>
-          <div class="stat-content">
-            <div class="stat-label">保留天数</div>
-            <div class="stat-value">${config.retention || 30} �?/div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 备份列表 -->
-      <div class="backup-list-section">
-        <h3 style="margin: 30px 0 20px; color: var(--text-primary); font-size: 20px;">
-          📦 最近备�?        </h3>
-        <div class="backup-cards-grid" id="backupCards">
-          ${backups.length === 0 ? `
-            <div class="empty-state-modern">
-              <div class="empty-icon">📭</div>
-              <h3>暂无备份记录</h3>
-              <p>点击"立即备份"创建第一个备�?/p>
-              <button class="btn-primary" onclick="document.getElementById('createBackupBtn').click()">
-                立即备份
-              </button>
-            </div>
-          ` : backups.map(backup => createBackupCard(backup)).join('')}
-        </div>
-      </div>
-
-      <!-- 模态框保持不变 -->
-      ${createBackupModals(config)}
-    `;
-
-    // 添加样式
-    addBackupStyles();
-
-    // 绑定事件
-    setupBackupEvents(token, container);
-
-  } catch (error) {
-    console.error('加载备份管理失败:', error);
-    container.innerHTML = `
-      <div class="view-header">
-        <h2>💾 备份管理</h2>
-      </div>
-      <div class="empty-state">加载失败: ${error.message}</div>
-    `;
-  }
-}
-
-// 创建备份卡片
-function createBackupCard(backup) {
-  const typeConfig = {
-    manual: { icon: '📦', label: '手动备份', color: '#6366f1' },
-    scheduled: { icon: '🔄', label: '定时备份', color: '#10b981' },
-    auto: { icon: '�?, label: '自动备份', color: '#f59e0b' }
-  };
-
-  const config = typeConfig[backup.type] || typeConfig.manual;
-  const statusIcon = backup.status === 'completed' ? '�? : backup.status === 'failed' ? '�? : '�?;
-
-  return `
-    <div class="backup-card-modern">
-      <div class="backup-card-header">
-        <div class="backup-type-icon" style="background: ${config.color}20; color: ${config.color};">
-          ${config.icon}
-        </div>
-        <div class="backup-card-title">
-          <h4>${config.label}</h4>
-          <span class="backup-time">${new Date(backup.createdAt).toLocaleString()}</span>
-        </div>
-        <div class="backup-status-icon">${statusIcon}</div>
-      </div>
-
-      <div class="backup-card-body">
-        <div class="backup-info-row">
-          <span class="info-label">大小</span>
-          <span class="info-value">${formatFileSize(backup.size)}</span>
-        </div>
-        <div class="backup-info-row">
-          <span class="info-label">状�?/span>
-          <span class="info-value">${backup.status === 'completed' ? '完成' : backup.status === 'failed' ? '失败' : '进行�?}</span>
-        </div>
-      </div>
-
-      ${backup.status === 'completed' ? `
-        <div class="backup-card-actions">
-          <button class="btn-action btn-download" data-id="${backup._id}" data-action="download">
-            <span>⬇️</span> 下载
-          </button>
-          <button class="btn-action btn-restore" data-id="${backup._id}" data-action="restore">
-            <span>🔄</span> 恢复
-          </button>
-          <button class="btn-action btn-delete" data-id="${backup._id}" data-action="delete">
-            <span>🗑�?/span> 删除
-          </button>
-        </div>
-      ` : `
-        <div class="backup-card-actions">
-          <button class="btn-action btn-delete" data-id="${backup._id}" data-action="delete">
-            <span>🗑�?/span> 删除
-          </button>
-        </div>
-      `}
-    </div>
-  `;
-}
-
-// 创建模态框HTML
-function createBackupModals(config) {
-  return `
-    <!-- 创建备份模态框 -->
-    <div class="modal hidden" id="createBackupModal">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h3>创建备份</h3>
-          <button class="close-btn" id="closeCreateBackup">&times;</button>
-        </div>
-        <form id="createBackupForm">
-          <div class="form-group">
-            <label>备份类型</label>
-            <select id="backupType" required>
-              <option value="full">完整备份（所有数据）</option>
-              <option value="incremental">增量备份（仅变更�?/option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label>备份说明（可选）</label>
-            <textarea id="backupDescription" rows="3" placeholder="备份说明..."></textarea>
-          </div>
-          <div style="display: flex; gap: 10px; margin-top: 20px;">
-            <button type="submit" class="btn-primary">开始备�?/button>
-            <button type="button" class="btn-secondary" id="cancelCreateBackup">取消</button>
-          </div>
-        </form>
-      </div>
-    </div>
-
-    <!-- 备份配置模态框 -->
-    <div class="modal hidden" id="configBackupModal">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h3>备份设置</h3>
-          <button class="close-btn" id="closeConfigBackup">&times;</button>
-        </div>
-        <form id="configBackupForm">
-          <div class="form-group">
-            <label>
-              <input type="checkbox" id="autoBackup" ${config.autoBackup ? 'checked' : ''}>
-              启用自动备份
-            </label>
-          </div>
-          <div class="form-group">
-            <label>备份频率（Cron表达式）</label>
-            <input type="text" id="backupSchedule" value="${config.schedule || '0 2 * * *'}" placeholder="0 2 * * * (每天凌晨2�?">
-            <small>示例�? 2 * * * (每天凌晨2�?�? */6 * * * (�?小时)</small>
-          </div>
-          <div class="form-group">
-            <label>保留天数</label>
-            <input type="number" id="backupRetention" value="${config.retention || 30}" min="1" max="365">
-            <small>超过此天数的备份将自动删�?/small>
-          </div>
-          <div class="form-group">
-            <label>最大备份数�?/label>
-            <input type="number" id="maxBackups" value="${config.maxBackups || 10}" min="1" max="100">
-          </div>
-          <div style="display: flex; gap: 10px; margin-top: 20px;">
-            <button type="submit" class="btn-primary">保存设置</button>
-            <button type="button" class="btn-secondary" id="cancelConfigBackup">取消</button>
-          </div>
-        </form>
-      </div>
-    </div>
-  `;
-}
-
-// 添加样式
-function addBackupStyles() {
-  if (document.getElementById('backup-modern-styles')) return;
-
-  const style = document.createElement('style');
-  style.id = 'backup-modern-styles';
-  style.textContent = `
-    .backup-stats-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-      gap: 20px;
-      margin: 20px 0 30px;
-    }
-
-    .stat-card-modern {
-      background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99,102,241,0.05) 100%);
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      padding: 20px;
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      transition: all 0.3s ease;
-      animation: fadeInUp 0.5s ease;
-    }
-
-    .stat-card-modern:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 12px 32px rgba(99,102,241,0.2);
-      border-color: var(--primary);
-    }
-
-    .stat-icon {
-      width: 60px;
-      height: 60px;
-      border-radius: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 28px;
-      flex-shrink: 0;
-    }
-
-    .stat-content {
-      flex: 1;
-    }
-
-    .stat-label {
-      font-size: 13px;
-      color: var(--text-secondary);
-      margin-bottom: 6px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .stat-value {
-      font-size: 24px;
-      font-weight: 800;
-      color: var(--text-primary);
-    }
-
-    .backup-cards-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-      gap: 20px;
-    }
-
-    .backup-card-modern {
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      padding: 20px;
-      transition: all 0.3s ease;
-      animation: fadeInUp 0.5s ease;
-    }
-
-    .backup-card-modern:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 8px 24px rgba(99,102,241,0.15);
-      border-color: var(--primary);
-    }
-
-    .backup-card-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 16px;
-      padding-bottom: 16px;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .backup-type-icon {
-      width: 48px;
-      height: 48px;
-      border-radius: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 24px;
-      flex-shrink: 0;
-    }
-
-    .backup-card-title {
-      flex: 1;
-    }
-
-    .backup-card-title h4 {
-      margin: 0 0 4px;
-      font-size: 16px;
-      color: var(--text-primary);
-    }
-
-    .backup-time {
-      font-size: 12px;
-      color: var(--text-secondary);
-    }
-
-    .backup-status-icon {
-      font-size: 24px;
-    }
-
-    .backup-card-body {
-      margin-bottom: 16px;
-    }
-
-    .backup-info-row {
-      display: flex;
-      justify-content: space-between;
-      padding: 8px 0;
-      font-size: 14px;
-    }
-
-    .info-label {
-      color: var(--text-secondary);
-    }
-
-    .info-value {
-      color: var(--text-primary);
-      font-weight: 600;
-    }
-
-    .backup-card-actions {
-      display: flex;
-      gap: 8px;
-    }
-
-    .btn-action {
-      flex: 1;
-      padding: 10px;
-      border: none;
-      border-radius: 8px;
-      font-size: 13px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-    }
-
-    .btn-download {
-      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-      color: white;
-    }
-
-    .btn-restore {
-      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-      color: white;
-    }
-
-    .btn-delete {
-      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-      color: white;
-    }
-
-    .btn-action:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-    }
-
-    .empty-state-modern {
-      grid-column: 1 / -1;
-      text-align: center;
-      padding: 60px 20px;
-      background: linear-gradient(135deg, var(--bg-dark) 0%, rgba(99,102,241,0.03) 100%);
-      border-radius: 16px;
-      border: 2px dashed var(--border);
-    }
-
-    .empty-icon {
-      font-size: 64px;
-      margin-bottom: 20px;
-      animation: bounce 2s infinite;
-    }
-
-    .empty-state-modern h3 {
-      margin: 0 0 10px;
-      color: var(--text-primary);
-      font-size: 20px;
-    }
-
-    .empty-state-modern p {
-      margin: 0 0 20px;
-      color: var(--text-secondary);
-      font-size: 14px;
-    }
-  `;
-  document.head.appendChild(style);
-}
-
-// 设置事件监听
-function setupBackupEvents(token, container) {
-  // 创建备份按钮
-  document.getElementById('createBackupBtn')?.addEventListener('click', () => {
-    document.getElementById('createBackupModal').classList.remove('hidden');
-  });
-
-  // 配置备份按钮
-  document.getElementById('configBackupBtn')?.addEventListener('click', () => {
-    document.getElementById('configBackupModal').classList.remove('hidden');
-  });
-
-  // 关闭按钮
-  document.getElementById('closeCreateBackup')?.addEventListener('click', () => {
-    document.getElementById('createBackupModal').classList.add('hidden');
-  });
-
-  document.getElementById('cancelCreateBackup')?.addEventListener('click', () => {
-    document.getElementById('createBackupModal').classList.add('hidden');
-  });
-
-  document.getElementById('closeConfigBackup')?.addEventListener('click', () => {
-    document.getElementById('configBackupModal').classList.add('hidden');
-  });
-
-  document.getElementById('cancelConfigBackup')?.addEventListener('click', () => {
-    document.getElementById('configBackupModal').classList.add('hidden');
-  });
-
-  // 创建备份表单提交
-  document.getElementById('createBackupForm')?.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    const type = document.getElementById('backupType').value;
-    const description = document.getElementById('backupDescription').value;
-
-    try {
-      const response = await fetch('http://localhost:3000/api/backup/create', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`
-        },
-        body: JSON.stringify({ type, description })
-      });
-
-      const result = await response.json();
-      if (result.success) {
-        alert('备份创建成功�?);
-        document.getElementById('createBackupModal').classList.add('hidden');
-        renderOptimizedBackupView(container);
-      } else {
-        alert('备份失败: ' + (result.error?.message || '未知错误'));
-      }
-    } catch (error) {
-      alert('备份失败: ' + error.message);
-    }
-  });
-
-  // 配置备份表单提交
-  document.getElementById('configBackupForm')?.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    const config = {
-      autoBackup: document.getElementById('autoBackup').checked,
-      schedule: document.getElementById('backupSchedule').value,
-      retention: parseInt(document.getElementById('backupRetention').value),
-      maxBackups: parseInt(document.getElementById('maxBackups').value)
-    };
-
-    try {
-      const response = await fetch('http://localhost:3000/api/backup/config', {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${token}`
-        },
-        body: JSON.stringify(config)
-      });
-
-      const result = await response.json();
-      if (result.success) {
-        alert('设置保存成功�?);
-        document.getElementById('configBackupModal').classList.add('hidden');
-        renderOptimizedBackupView(container);
-      } else {
-        alert('保存失败: ' + (result.error?.message || '未知错误'));
-      }
-    } catch (error) {
-      alert('保存失败: ' + error.message);
-    }
-  });
-
-  // 备份操作按钮
-  document.querySelectorAll('[data-action="download"]').forEach(btn => {
-    btn.addEventListener('click', () => {
-      const backupId = btn.dataset.id;
-      window.location.href = `http://localhost:3000/api/backup/${backupId}/download?token=${token}`;
-    });
-  });
-
-  document.querySelectorAll('[data-action="restore"]').forEach(btn => {
-    btn.addEventListener('click', async () => {
-      if (!confirm('确定要恢复此备份吗？这将覆盖当前数据�?)) return;
-
-      const backupId = btn.dataset.id;
-      try {
-        const response = await fetch(`http://localhost:3000/api/backup/${backupId}/restore`, {
-          method: 'POST',
-          headers: { 'Authorization': `Bearer ${token}` }
-        });
-
-        const result = await response.json();
-        if (result.success) {
-          alert('备份恢复成功！页面将刷新...');
-          setTimeout(() => window.location.reload(), 2000);
-        } else {
-          alert('恢复失败: ' + (result.error?.message || '未知错误'));
-        }
-      } catch (error) {
-        alert('恢复失败: ' + error.message);
-      }
-    });
-  });
-
-  document.querySelectorAll('[data-action="delete"]').forEach(btn => {
-    btn.addEventListener('click', async () => {
-      if (!confirm('确定要删除此备份吗？')) return;
-
-      const backupId = btn.dataset.id;
-      try {
-        const response = await fetch(`http://localhost:3000/api/backup/${backupId}`, {
-          method: 'DELETE',
-          headers: { 'Authorization': `Bearer ${token}` }
-        });
-
-        const result = await response.json();
-        if (result.success) {
-          alert('备份删除成功�?);
-          renderOptimizedBackupView(container);
-        } else {
-          alert('删除失败: ' + (result.error?.message || '未知错误'));
-        }
-      } catch (error) {
-        alert('删除失败: ' + error.message);
-      }
-    });
-  });
-}
-
-// 格式化文件大�?function formatFileSize(bytes) {
-  if (!bytes) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
-}
-
-// 导出函数供其他模块使�?export { renderOptimizedBackupView };
-
-