collabdocchat 1.2.12 → 2.0.0

package/src/pages/admin-dashboard.js

@@ -1,14 +1,24 @@
 import { ApiService } from '../services/api.js';
 import { AuthService } from '../services/auth.js';
+import { FeatureIntegrator } from '../utils/feature-integrator.js';
+import { uiEnhancementsLoader } from '../utils/ui-enhancements-loader.js';
+import { renderOptimizedTaskDetail } from './optimized-task-detail.js';
+import { renderOptimizedKnowledgeView } from './optimized-knowledge-view.js';
 // import Quill from 'quill/dist/quill.js';
 // import 'quill/dist/quill.snow.css';
 import 'emoji-picker-element';
 
+// 自动加载所有UI美化增强
+uiEnhancementsLoader.init();
+
 export function renderAdminDashboard(user, wsService) {
   const app = document.getElementById('app');
   const apiService = new ApiService();
   const authService = new AuthService();
   const currentUserId = user.id || user._id;
+  
+  // 初始化功能集成器
+  const features = new FeatureIntegrator(apiService, wsService, user);
 
   let currentGroup = null;
   let groups = [];
@@ -39,12 +49,21 @@ export function renderAdminDashboard(user, wsService) {
           <button class="nav-item" data-view="documents">
             <span class="icon">📄</span> 文档管理
           </button>
+          <button class="nav-item" data-view="knowledge">
+            <span class="icon">📚</span> 知识库
+          </button>
+          <button class="nav-item" data-view="workflows">
+            <span class="icon">🔄</span> 工作流
+          </button>
           <button class="nav-item" data-view="files">
             <span class="icon">📎</span> 文件管理
           </button>
           <button class="nav-item" data-view="chat">
             <span class="icon">💬</span> 群聊
           </button>
+          <button class="nav-item" data-view="backup">
+            <span class="icon">💾</span> 备份管理
+          </button>
           <button class="nav-item" data-view="search">
             <span class="icon">🔍</span> 搜索
           </button>
@@ -56,6 +75,15 @@ export function renderAdminDashboard(user, wsService) {
           </button>
         </nav>
 
+        <div class="sidebar-footer">
+          <button class="nav-item" data-view="settings">
+            <span class="icon">⚙️</span> 设置
+          </button>
+          <button class="nav-item" data-view="help">
+            <span class="icon">❓</span> 帮助
+          </button>
+        </div>
+
         <button class="btn-logout" id="logoutBtn">退出登录</button>
       </aside>
 
@@ -93,12 +121,26 @@ export function renderAdminDashboard(user, wsService) {
       case 'documents':
         await renderDocumentsView(contentArea);
         break;
+      case 'knowledge':
+        await renderOptimizedKnowledgeView(contentArea, currentGroup, apiService);
+        break;
+      case 'workflows':
+        // 使用优化后的工作流视图（可视化创建，无需JSON代码）
+        if (typeof window.renderOptimizedWorkflowView === 'function') {
+          await window.renderOptimizedWorkflowView(contentArea, currentGroup, apiService);
+        } else {
+          await renderWorkflowsView(contentArea);
+        }
+        break;
       case 'chat':
         await renderChatView(contentArea);
         break;
       case 'files':
         await renderFilesView(contentArea);
         break;
+      case 'backup':
+        await renderOptimizedBackupView(contentArea);
+        break;
       case 'search':
         await renderSearchView(contentArea);
         break;
@@ -108,6 +150,12 @@ export function renderAdminDashboard(user, wsService) {
       case 'audit':
         await renderAuditView(contentArea);
         break;
+      case 'settings':
+        features.renderSettingsView(contentArea);
+        break;
+      case 'help':
+        features.renderHelpView(contentArea);
+        break;
     }
   }
 
@@ -353,6 +401,17 @@ export function renderAdminDashboard(user, wsService) {
           </form>
         </div>
       </div>
+      <div id="taskDetailModal" class="modal hidden">
+        <div class="modal-content" style="max-width: 900px;">
+          <div class="modal-header">
+            <h3>任务完成情况</h3>
+            <button class="modal-close" id="closeTaskDetailModal">&times;</button>
+          </div>
+          <div class="modal-body" id="taskDetailContent">
+            <div class="loading">加载中...</div>
+          </div>
+        </div>
+      </div>
     `;
 
     const tasksList = document.getElementById('tasksList');
@@ -362,6 +421,12 @@ export function renderAdminDashboard(user, wsService) {
       result.tasks.forEach(task => {
         const taskCard = document.createElement('div');
         taskCard.className = `task-card status-${task.status}`;
+        
+        // 计算完成情况
+        const totalMembers = task.assignedTo ? task.assignedTo.length : 0;
+        const completedMembers = task.completedBy ? task.completedBy.length : 0;
+        const completionRate = totalMembers > 0 ? Math.round((completedMembers / totalMembers) * 100) : 0;
+        
         taskCard.innerHTML = `
           <div style="display: flex; justify-content: space-between; align-items: start;">
             <div style="flex: 1;">
@@ -370,14 +435,27 @@ export function renderAdminDashboard(user, wsService) {
               <div class="task-meta">
                 <span class="status-badge">${getStatusText(task.status)}</span>
                 <span>截止: ${task.deadline ? new Date(task.deadline).toLocaleDateString() : '无'}</span>
+                <span>完成率: ${completionRate}% (${completedMembers}/${totalMembers})</span>
               </div>
             </div>
-            <button class="btn-danger btn-sm" data-id="${task._id}" data-action="delete-task" title="删除任务" style="min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">🗑️ 删除</button>
+            <div style="display: flex; gap: 10px;">
+              <button class="btn-primary btn-sm" data-id="${task._id}" data-action="view-detail" title="查看详细">📊 详情</button>
+              <button class="btn-danger btn-sm" data-id="${task._id}" data-action="delete-task" title="删除任务" style="min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">🗑️ 删除</button>
+            </div>
           </div>
         `;
         tasksList.appendChild(taskCard);
       });
 
+      // 添加查看详情事件
+      document.querySelectorAll('[data-action="view-detail"]').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          const taskId = btn.dataset.id;
+          await showTaskDetail(taskId);
+        });
+      });
+
       // 添加删除任务事件
       document.querySelectorAll('[data-action="delete-task"]').forEach(btn => {
         btn.addEventListener('click', async (e) => {
@@ -430,6 +508,105 @@ export function renderAdminDashboard(user, wsService) {
     });
   }
 
+  // 显示任务详情（使用美化后的组件）
+  async function showTaskDetail(taskId) {
+    const modal = document.getElementById('taskDetailModal');
+    const content = document.getElementById('taskDetailContent');
+    
+    // 先设置关闭事件（只设置一次，避免重复）
+    const closeBtn = document.getElementById('closeTaskDetailModal');
+    if (closeBtn && !closeBtn.dataset.listenerSet) {
+      closeBtn.addEventListener('click', () => {
+        modal.classList.add('hidden');
+      });
+      closeBtn.dataset.listenerSet = 'true';
+    }
+    
+    // 点击模态框外部关闭（只设置一次）
+    if (!modal.dataset.listenerSet) {
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+          modal.classList.add('hidden');
+        }
+      });
+      modal.dataset.listenerSet = 'true';
+    }
+    
+    try {
+      modal.classList.remove('hidden');
+      content.innerHTML = '<div class="loading">加载中...</div>';
+      
+      // 获取任务详情
+      const taskResult = await apiService.getTask(taskId);
+      const task = taskResult.task;
+      
+      // 验证必要数据
+      if (!task) {
+        throw new Error('任务数据不存在');
+      }
+      
+      // 群组信息已经在task.group中（后端已populate）
+      const group = task.group;
+      if (!group || !group.members) {
+        throw new Error('群组数据不完整');
+      }
+      
+      // 计算完成情况
+      const totalMembers = task.assignedTo ? task.assignedTo.length : 0;
+      const completedMembers = task.completedBy ? task.completedBy.length : 0;
+      
+      // 创建成员完成情况列表 - 安全处理所有可能的undefined
+      const completedIds = new Set((task.completedBy || []).map(m => {
+        if (!m || !m.user) return null;
+        const userId = m.user._id ? String(m.user._id) : String(m.user);
+        return userId;
+      }).filter(id => id !== null));
+      
+      const assignedMembers = (task.assignedTo || []).map(assignedId => {
+        if (!assignedId) return null;
+        const memberId = assignedId._id ? String(assignedId._id) : String(assignedId);
+        const member = group.members.find(m => m && m._id && String(m._id) === memberId);
+        
+        // 查找完成时间
+        const completedInfo = task.completedBy ? task.completedBy.find(c => {
+          if (!c || !c.user) return false;
+          const userId = c.user._id ? String(c.user._id) : String(c.user);
+          return userId === memberId;
+        }) : null;
+        
+        return {
+          id: memberId,
+          username: member ? member.username : '未知用户',
+          completed: completedIds.has(memberId),
+          completedAt: completedInfo && completedInfo.completedAt ? completedInfo.completedAt : null,
+          status: completedIds.has(memberId) ? 'completed' : 'pending'
+        };
+      }).filter(m => m !== null);
+      
+      // 准备任务数据给美化组件
+      const taskData = {
+        ...task,
+        group: group.name,
+        assignedTo: task.assignedTo && task.assignedTo.length > 0 && task.assignedTo[0].username ? 
+          task.assignedTo[0].username : '未分配',
+        members: assignedMembers,
+        completedCount: completedMembers
+      };
+      
+      // 使用美化后的任务详情组件
+      renderOptimizedTaskDetail(taskData, content);
+      
+    } catch (error) {
+      console.error('加载任务详情失败:', error);
+      content.innerHTML = `
+        <div class="error-state">
+          <h3>❌ 加载失败</h3>
+          <p>${error.message || '未知错误'}</p>
+          <button class="btn-primary" onclick="document.getElementById('taskDetailModal').classList.add('hidden')">关闭</button>
+        </div>
+      `;
+    }
+  }
   async function renderDocumentsView(container) {
     if (!currentGroup) {
       container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
@@ -722,13 +899,53 @@ export function renderAdminDashboard(user, wsService) {
               ${file.description ? `<p class="file-description">${file.description}</p>` : ''}
             </div>
             <div class="file-actions">
-              <a href="${apiService.getFileDownloadUrl(file._id)}" class="btn-primary" download>下载</a>
+              <button class="btn-primary" data-id="${file._id}" data-name="${file.originalName}" data-action="download-file">下载</button>
               <button class="btn-danger" data-id="${file._id}" data-action="delete-file">删除</button>
             </div>
           `;
           filesList.appendChild(fileCard);
         });
 
+        // 下载文件事件
+        document.querySelectorAll('[data-action="download-file"]').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            try {
+              const fileId = btn.dataset.id;
+              const fileName = btn.dataset.name;
+              const token = localStorage.getItem('token');
+              
+              // 使用 fetch 下载文件
+              const response = await fetch(`http://localhost:8765/api/files/${fileId}/download`, {
+                method: 'GET',
+                headers: {
+                  'Authorization': `Bearer ${token}`
+                }
+              });
+              
+              if (!response.ok) {
+                throw new Error('下载失败');
+              }
+              
+              // 获取文件内容
+              const blob = await response.blob();
+              
+              // 创建下载链接
+              const url = window.URL.createObjectURL(blob);
+              const a = document.createElement('a');
+              a.href = url;
+              a.download = fileName;
+              document.body.appendChild(a);
+              a.click();
+              
+              // 清理
+              window.URL.revokeObjectURL(url);
+              document.body.removeChild(a);
+            } catch (error) {
+              alert('下载失败: ' + error.message);
+            }
+          });
+        });
+
         // 删除文件事件
         document.querySelectorAll('[data-action="delete-file"]').forEach(btn => {
           btn.addEventListener('click', async () => {
@@ -801,11 +1018,13 @@ export function renderAdminDashboard(user, wsService) {
   }
 
   function formatFileSize(bytes) {
-    if (bytes === 0) return '0 Bytes';
+    const n = Number(bytes);
+    if (!Number.isFinite(n) || n < 0) return '-';
+    if (n === 0) return '0 Bytes';
     const k = 1024;
     const sizes = ['Bytes', '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];
+    const i = Math.floor(Math.log(n) / Math.log(k));
+    return Math.round(n / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
   }
 
   async function renderChatView(container) {
@@ -820,16 +1039,26 @@ export function renderAdminDashboard(user, wsService) {
     container.innerHTML = `
       <div class="view-header">
         <h2>群聊 - ${currentGroup.name}</h2>
-        <div style="display: flex; gap: 10px;">
+        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+          <button class="btn-secondary" id="showAIAssistant" title="AI 助手">
+            🤖 AI
+          </button>
+          <button class="btn-secondary" id="showCollabTools" title="协作工具">
+            🛠️ 工具
+          </button>
+          <button class="btn-secondary" id="markAllRead" title="全部标记为已读">
+            ✓ 已读
+          </button>
           <button class="btn-secondary" id="muteAllBtn">全体禁言</button>
           <button class="btn-secondary" id="manageMuteBtn">个人禁言</button>
+          <button class="btn-danger" id="clearChatBtn">清除聊天记录</button>
         </div>
       </div>
       <div class="chat-container">
         <div class="messages" id="messages"></div>
         <div class="chat-input">
           <button class="btn-emoji" id="emojiBtn">😊</button>
-          <input type="text" id="messageInput" placeholder="输入消息...">
+          <input type="text" id="messageInput" placeholder="输入消息... (使用 @ 提及用户)">
           <button class="btn-primary" id="sendBtn">发送</button>
         </div>
         <emoji-picker id="emojiPicker" class="hidden"></emoji-picker>
@@ -841,6 +1070,40 @@ export function renderAdminDashboard(user, wsService) {
           <button type="button" class="btn-secondary" id="closeMuteModal">关闭</button>
         </div>
       </div>
+      <div id="clearChatModal" class="modal hidden">
+        <div class="modal-content">
+          <h3>清除聊天记录</h3>
+          <div style="padding: 20px;">
+            <p style="margin-bottom: 20px; color: var(--danger);">⚠️ 警告：此操作不可恢复！</p>
+            <div class="form-group">
+              <label>
+                <input type="radio" name="clearType" value="all" checked>
+                清除所有聊天记录
+              </label>
+            </div>
+            <div class="form-group">
+              <label>
+                <input type="radio" name="clearType" value="before">
+                清除指定日期之前的记录
+              </label>
+              <input type="date" id="clearBeforeDate" style="margin-left: 10px; margin-top: 10px;" disabled>
+            </div>
+            <div class="form-group">
+              <label>
+                <input type="radio" name="clearType" value="user">
+                清除指定用户的消息
+              </label>
+              <select id="clearUserId" style="margin-left: 10px; margin-top: 10px;" disabled>
+                <option value="">选择用户</option>
+              </select>
+            </div>
+          </div>
+          <div style="display: flex; gap: 10px; justify-content: flex-end; padding: 0 20px 20px;">
+            <button type="button" class="btn-secondary" id="closeClearModal">取消</button>
+            <button type="button" class="btn-danger" id="confirmClearBtn">确认清除</button>
+          </div>
+        </div>
+      </div>
     `;
 
     const messagesDiv = document.getElementById('messages');
@@ -851,6 +1114,44 @@ export function renderAdminDashboard(user, wsService) {
     let mutedUsers = new Set((group.mutedUsers || []).map(String));
     let isMutedAll = Boolean(group.mutedAll);
 
+    // 设置聊天增强功能
+    features.chatEnhancements.setCurrentGroup(currentGroup._id);
+    
+    // 设置@提及功能
+    if (group.members) {
+      features.chatEnhancements.setupMentionInput(messageInput, group.members);
+    }
+
+    // AI 助手按钮
+    document.getElementById('showAIAssistant').addEventListener('click', () => {
+      const panel = document.createElement('div');
+      panel.className = 'modal';
+      panel.innerHTML = '<div class="modal-content" style="max-width: 800px;"></div>';
+      document.body.appendChild(panel);
+      
+      features.aiAssistant.renderAssistantPanel(panel.querySelector('.modal-content'));
+      
+      panel.addEventListener('click', (e) => {
+        if (e.target === panel) panel.remove();
+      });
+    });
+
+    // 协作工具按钮
+    document.getElementById('showCollabTools').addEventListener('click', () => {
+      features.showCollaborationTools(currentGroup._id);
+    });
+
+    // 标记全部已读
+    document.getElementById('markAllRead').addEventListener('click', async () => {
+      const messages = Array.from(messagesDiv.querySelectorAll('.message[data-message-id]'))
+        .map(el => el.dataset.messageId);
+      
+      if (messages.length > 0) {
+        await features.chatEnhancements.markAllAsRead(messages);
+        alert('已标记所有消息为已读');
+      }
+    });
+
     // 表情包功能
     emojiBtn.addEventListener('click', () => {
       emojiPicker.classList.toggle('hidden');
@@ -891,16 +1192,8 @@ export function renderAdminDashboard(user, wsService) {
       const messagesResult = await apiService.getGroupMessages(currentGroup._id);
       if (messagesResult.messages) {
         messagesResult.messages.forEach(msg => {
-          const messageEl = document.createElement('div');
-          messageEl.className = `message ${msg.sender === currentUserId ? 'own' : ''}`;
-          messageEl.innerHTML = `
-            <div class="message-header">
-              <span class="message-user">${msg.username}</span>
-              <span class="message-time">${new Date(msg.timestamp).toLocaleTimeString()}</span>
-            </div>
-            <div class="message-content">${msg.content}</div>
-          `;
-          messagesDiv.appendChild(messageEl);
+          // 使用增强的消息渲染
+          features.chatEnhancements.renderMessage(msg, messagesDiv, group.members);
         });
         messagesDiv.scrollTop = messagesDiv.scrollHeight;
       }
@@ -979,20 +1272,131 @@ export function renderAdminDashboard(user, wsService) {
       }
     };
 
+    // 清除聊天记录功能
+    document.getElementById('clearChatBtn').addEventListener('click', async () => {
+      // 加载群组成员到下拉列表
+      const clearUserId = document.getElementById('clearUserId');
+      clearUserId.innerHTML = '<option value="">选择用户</option>';
+      group.members.forEach(member => {
+        clearUserId.innerHTML += `<option value="${member._id}">${member.username}</option>`;
+      });
+      
+      document.getElementById('clearChatModal').classList.remove('hidden');
+    });
+
+    document.getElementById('closeClearModal').addEventListener('click', () => {
+      document.getElementById('clearChatModal').classList.add('hidden');
+    });
+
+    // 清除类型切换
+    document.querySelectorAll('input[name="clearType"]').forEach(radio => {
+      radio.addEventListener('change', (e) => {
+        document.getElementById('clearBeforeDate').disabled = e.target.value !== 'before';
+        document.getElementById('clearUserId').disabled = e.target.value !== 'user';
+      });
+    });
+
+    // 确认清除
+    document.getElementById('confirmClearBtn').addEventListener('click', async () => {
+      const clearType = document.querySelector('input[name="clearType"]:checked').value;
+      
+      let confirmMsg = '';
+      if (clearType === 'all') {
+        confirmMsg = '确定要清除所有聊天记录吗？此操作不可恢复！';
+      } else if (clearType === 'before') {
+        const date = document.getElementById('clearBeforeDate').value;
+        if (!date) {
+          alert('请选择日期');
+          return;
+        }
+        confirmMsg = `确定要清除 ${date} 之前的所有聊天记录吗？此操作不可恢复！`;
+      } else if (clearType === 'user') {
+        const userId = document.getElementById('clearUserId').value;
+        if (!userId) {
+          alert('请选择用户');
+          return;
+        }
+        const username = group.members.find(m => m._id === userId)?.username;
+        confirmMsg = `确定要清除用户 ${username} 的所有消息吗？此操作不可恢复！`;
+      }
+
+      if (!confirm(confirmMsg)) {
+        return;
+      }
+
+      try {
+        let result;
+        if (clearType === 'all') {
+          result = await apiService.clearChatMessages(currentGroup._id, { deleteAll: true });
+        } else if (clearType === 'before') {
+          const beforeDate = document.getElementById('clearBeforeDate').value;
+          result = await apiService.clearChatMessages(currentGroup._id, { beforeDate });
+        } else if (clearType === 'user') {
+          const userId = document.getElementById('clearUserId').value;
+          result = await apiService.clearUserMessages(currentGroup._id, userId);
+        }
+
+        alert(`清除成功！共删除 ${result.deletedCount} 条消息`);
+        document.getElementById('clearChatModal').classList.add('hidden');
+        
+        // 刷新消息列表
+        messagesDiv.innerHTML = '';
+        const messagesResult = await apiService.getGroupMessages(currentGroup._id);
+        if (messagesResult.messages) {
+          messagesResult.messages.forEach(msg => {
+            // 使用增强的消息渲染
+            features.chatEnhancements.renderMessage(msg, messagesDiv, group.members);
+          });
+        }
+      } catch (error) {
+        alert('清除失败: ' + error.message);
+      }
+    });
+
     // 监听消息
     wsService.on('chat_message', (data) => {
       if (data.groupId === currentGroup._id) {
-        const messageEl = document.createElement('div');
-        messageEl.className = `message ${data.userId === currentUserId ? 'own' : ''}`;
-        messageEl.innerHTML = `
-          <div class="message-header">
-            <span class="message-user">${data.username}</span>
-            <span class="message-time">${new Date(data.timestamp).toLocaleTimeString()}</span>
-          </div>
-          <div class="message-content">${data.content}</div>
-        `;
-        messagesDiv.appendChild(messageEl);
+        // 使用增强的消息渲染
+        features.chatEnhancements.renderMessage(data, messagesDiv, group.members);
         messagesDiv.scrollTop = messagesDiv.scrollHeight;
+
+        // 显示通知（如果不是自己发送的消息）
+        if (data.userId !== currentUserId) {
+          features.notifications.showNewMessageNotification(data.username, data.content);
+          
+          // 检查是否@了当前用户
+          if (features.chatEnhancements.checkMentionsMe(data.content, group.members)) {
+            features.notifications.showMentionNotification(data.username, data.content);
+          }
+        }
+      }
+    });
+
+    // 监听消息撤回
+    features.chatEnhancements.onMessageRecalled((data) => {
+      if (data.groupId === currentGroup._id) {
+        const messageEl = messagesDiv.querySelector(`[data-message-id="${data.messageId}"]`);
+        if (messageEl) {
+          const contentEl = messageEl.querySelector('.message-content');
+          contentEl.textContent = '[消息已撤回]';
+          contentEl.classList.add('recalled');
+          
+          const recallBtn = messageEl.querySelector('.btn-recall');
+          if (recallBtn) recallBtn.remove();
+        }
+      }
+    });
+
+    // 监听已读回执
+    features.chatEnhancements.onMessageRead((data) => {
+      if (data.groupId === currentGroup._id) {
+        const messageEl = messagesDiv.querySelector(`[data-message-id="${data.messageId}"]`);
+        if (messageEl) {
+          const statusEl = messageEl.querySelector('.message-status');
+          if (statusEl) {
+            statusEl.innerHTML = `<span class="read-status read">已读 ${data.readCount}</span>`;
+          }
+        }
       }
     });
 
@@ -1011,8 +1415,19 @@ export function renderAdminDashboard(user, wsService) {
     const sendMessage = () => {
       const content = messageInput.value.trim();
       if (content) {
-        wsService.sendChatMessage(currentGroup._id, user.username, content);
+        // 解析@提及
+        const mentions = features.chatEnhancements.parseMentions(content, group.members);
+        
+        wsService.sendChatMessage(currentGroup._id, user.username, content, mentions);
         messageInput.value = '';
+        
+        // 显示AI智能回复建议（如果启用）
+        if (localStorage.getItem('ai_smartReplies') !== 'false') {
+          features.aiAssistant.getSmartReplies(content).then(replies => {
+            // 可以在这里显示智能回复建议
+            console.log('智能回复建议:', replies);
+          });
+        }
       }
     };
 
@@ -1228,24 +1643,119 @@ export function renderAdminDashboard(user, wsService) {
     // 显示操作详情
     window.showAuditDetail = async (logId) => {
       try {
-        // 这里我们需要从已加载的日志中找到对应的记录
-        // 在实际应用中可能需要单独的API来获取详情
         const modal = document.getElementById('auditDetailModal');
         const content = document.getElementById('auditDetailContent');
         
-        // 简单实现：显示基本信息
+        modal.classList.remove('hidden');
+        content.innerHTML = '<div class="loading">加载中...</div>';
+        
+        // 获取审计日志详情
+        const result = await apiService.getAuditLogDetail(logId);
+        const log = result.log;
+        
+        // 格式化详细信息
+        let detailsHtml = '';
+        if (log.details) {
+          detailsHtml = Object.entries(log.details).map(([key, value]) => {
+            let displayValue = value;
+            
+            // 特殊处理某些字段
+            if (key === 'oldContent' || key === 'newContent') {
+              // 截断过长的内容
+              if (typeof value === 'string' && value.length > 200) {
+                displayValue = value.substring(0, 200) + '...';
+              }
+            } else if (typeof value === 'object') {
+              displayValue = JSON.stringify(value, null, 2);
+            }
+            
+            return `
+              <div class="info-row">
+                <span class="info-label">${formatFieldName(key)}：</span>
+                <span class="info-value">${displayValue || '-'}</span>
+              </div>
+            `;
+          }).join('');
+        }
+        
         content.innerHTML = `
           <div class="audit-detail">
-            <p>操作ID: ${logId}</p>
-            <p>详细信息加载中...</p>
+            <div class="task-detail-info">
+              <div class="info-row">
+                <span class="info-label">操作时间：</span>
+                <span class="info-value">${new Date(log.createdAt).toLocaleString()}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">操作用户：</span>
+                <span class="info-value">${log.user?.username || '未知用户'}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">用户角色：</span>
+                <span class="info-value">${log.user?.role === 'admin' ? '管理员' : '普通用户'}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">操作类型：</span>
+                <span class="info-value">
+                  <span class="action-badge action-${log.action}">${getActionText(log.action)}</span>
+                </span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">所属群组：</span>
+                <span class="info-value">${log.metadata?.groupId?.name || '-'}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">资源类型：</span>
+                <span class="info-value">${log.resourceType || '-'}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">资源标题：</span>
+                <span class="info-value">${log.resourceTitle || log.resourceId || '-'}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">IP地址：</span>
+                <span class="info-value">${log.metadata?.ipAddress || '-'}</span>
+              </div>
+            </div>
+            
+            ${detailsHtml ? `
+              <div class="task-detail-info" style="margin-top: 20px;">
+                <h4 style="margin-bottom: 15px; color: var(--primary);">详细信息</h4>
+                ${detailsHtml}
+              </div>
+            ` : ''}
+            
+            ${log.details?.description ? `
+              <div class="task-detail-info" style="margin-top: 20px;">
+                <h4 style="margin-bottom: 15px; color: var(--primary);">操作描述</h4>
+                <p style="color: var(--text-primary); line-height: 1.6;">${log.details.description}</p>
+              </div>
+            ` : ''}
           </div>
         `;
         
-        modal.classList.remove('hidden');
       } catch (error) {
-        alert('加载详情失败: ' + error.message);
+        console.error('加载审计详情失败:', error);
+        const content = document.getElementById('auditDetailContent');
+        content.innerHTML = `<div class="error-state">加载失败: ${error.message}</div>`;
       }
     };
+    
+    // 格式化字段名
+    function formatFieldName(key) {
+      const fieldNames = {
+        'description': '描述',
+        'oldTitle': '原标题',
+        'newTitle': '新标题',
+        'oldContent': '原内容',
+        'newContent': '新内容',
+        'oldPermission': '原权限',
+        'newPermission': '新权限',
+        'contentLength': '内容长度',
+        'changes': '变更内容',
+        'reason': '原因'
+      };
+      return fieldNames[key] || key;
+    }
 
     // 事件监听
     document.getElementById('applyFilters').addEventListener('click', () => {
@@ -1478,16 +1988,1710 @@ export function renderAdminDashboard(user, wsService) {
     return actionMap[action] || action;
   }
 
-  function getStatusText(status) {
-    const statusMap = {
-      'pending': '待处理',
-      'in_progress': '进行中',
-      'completed': '已完成',
-      'terminated': '已终止'
-    };
-    return statusMap[status] || status;
-  }
+  // 备份管理视图
+  async function renderBackupView(container) {
+    try {
+      const token = localStorage.getItem('token');
+      
+      // 获取备份列表
+      const backupsResponse = await fetch('http://localhost:8765/api/backup/list', {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      const backupsResult = await backupsResponse.json();
+      
+      // 获取备份配置
+      const configResponse = await fetch('http://localhost:8765/api/backup/config', {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      const configResult = await configResponse.json();
+
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>💾 备份管理</h2>
+          <div style="display: flex; gap: 10px;">
+            <button class="btn-primary" id="createBackupBtn">立即备份</button>
+            <button class="btn-secondary" id="configBackupBtn">备份设置</button>
+          </div>
+        </div>
+
+        <div class="backup-stats">
+          <div class="stat-card">
+            <h3>备份总数</h3>
+            <div class="stat-number">${backupsResult.data?.backups?.length || 0}</div>
+          </div>
+          <div class="stat-card">
+            <h3>自动备份</h3>
+            <div class="stat-number">${configResult.data?.config?.autoBackup ? '✅ 已启用' : '❌ 已禁用'}</div>
+          </div>
+          <div class="stat-card">
+            <h3>备份频率</h3>
+            <div class="stat-number">${configResult.data?.config?.schedule || '未设置'}</div>
+          </div>
+          <div class="stat-card">
+            <h3>保留天数</h3>
+            <div class="stat-number">${configResult.data?.config?.retention || 30} 天</div>
+          </div>
+        </div>
+
+        <div class="backup-list" id="backupList">
+          ${backupsResult.data?.backups?.length > 0 ? `
+            <div class="backups-table">
+              <div class="backup-header">
+                <div>备份时间</div>
+                <div>类型</div>
+                <div>大小</div>
+                <div>状态</div>
+                <div>操作</div>
+              </div>
+              ${backupsResult.data.backups.map(backup => `
+                <div class="backup-row">
+                  <div>${backup.createdAt ? new Date(backup.createdAt).toLocaleString() : '-'}</div>
+                  <div>
+                    <span class="backup-type-badge ${backup.type}">
+                      ${backup.type === 'manual' ? '手动' : backup.type === 'scheduled' ? '定时' : '自动'}
+                    </span>
+                  </div>
+                  <div>${formatFileSize(backup.size)}</div>
+                  <div>
+                    <span class="status-badge status-${backup.status}">
+                      ${backup.status === 'completed' ? '✅ 完成' : backup.status === 'failed' ? '❌ 失败' : '⏳ 进行中'}
+                    </span>
+                  </div>
+                  <div class="backup-actions">
+                    ${backup.status === 'completed' ? `
+                      <button class="btn-primary btn-sm" data-id="${backup._id}" data-action="download-backup">下载</button>
+                      <button class="btn-secondary btn-sm" data-id="${backup._id}" data-action="restore-backup">恢复</button>
+                    ` : ''}
+                    <button class="btn-danger btn-sm" data-id="${backup._id}" data-action="delete-backup">删除</button>
+                  </div>
+                </div>
+              `).join('')}
+            </div>
+          ` : '<div class="empty-state">暂无备份记录<br>点击"立即备份"创建第一个备份</div>'}
+        </div>
+
+        <!-- 创建备份模态框 -->
+        <div class="modal hidden" id="createBackupModal">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3>创建备份</h3>
+              <button class="modal-close" 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 class="form-actions">
+                <button type="button" class="btn-secondary" id="cancelCreateBackup">取消</button>
+                <button type="submit" class="btn-primary">开始备份</button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <!-- 备份配置模态框 -->
+        <div class="modal hidden" id="configBackupModal">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3>备份设置</h3>
+              <button class="modal-close" id="closeConfigBackup">&times;</button>
+            </div>
+            <form id="configBackupForm">
+              <div class="form-group">
+                <label>
+                  <input type="checkbox" id="autoBackup" ${configResult.data?.config?.autoBackup ? 'checked' : ''}>
+                  启用自动备份
+                </label>
+              </div>
+              <div class="form-group">
+                <label>备份频率（Cron表达式）</label>
+                <input type="text" id="backupSchedule" value="${configResult.data?.config?.schedule || '0 2 * * *'}" placeholder="0 2 * * * (每天凌晨2点)">
+                <small>示例：0 2 * * * (每天凌晨2点)，0 */6 * * * (每6小时)</small>
+              </div>
+              <div class="form-group">
+                <label>保留天数</label>
+                <input type="number" id="backupRetention" value="${configResult.data?.config?.retention || 30}" min="1" max="365">
+                <small>超过此天数的备份将自动删除</small>
+              </div>
+              <div class="form-group">
+                <label>最大备份数量</label>
+                <input type="number" id="maxBackups" value="${configResult.data?.config?.maxBackups || 10}" min="1" max="100">
+              </div>
+              <div class="form-actions">
+                <button type="button" class="btn-secondary" id="cancelConfigBackup">取消</button>
+                <button type="submit" class="btn-primary">保存设置</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      `;
+
+      // 立即备份
+      document.getElementById('createBackupBtn').addEventListener('click', () => {
+        document.getElementById('createBackupModal').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('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:8765/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');
+            renderBackupView(container);
+          } else {
+            alert('备份失败: ' + result.error.message);
+          }
+        } catch (error) {
+          alert('备份失败: ' + error.message);
+        }
+      });
+
+      // 备份设置
+      document.getElementById('configBackupBtn').addEventListener('click', () => {
+        document.getElementById('configBackupModal').classList.remove('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('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:8765/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');
+            renderBackupView(container);
+          } else {
+            alert('保存失败: ' + result.error.message);
+          }
+        } catch (error) {
+          alert('保存失败: ' + error.message);
+        }
+      });
+
+      // 下载备份
+      document.querySelectorAll('[data-action="download-backup"]').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          const backupId = btn.dataset.id;
+          window.location.href = `http://localhost:8765/api/backup/${backupId}/download?token=${token}`;
+        });
+      });
+
+      // 恢复备份
+      document.querySelectorAll('[data-action="restore-backup"]').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          if (!confirm('确定要恢复此备份吗？这将覆盖当前数据！')) {
+            return;
+          }
+
+          const backupId = btn.dataset.id;
+          try {
+            const response = await fetch(`http://localhost:8765/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-backup"]').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          if (!confirm('确定要删除此备份吗？')) {
+            return;
+          }
+
+          const backupId = btn.dataset.id;
+          try {
+            const response = await fetch(`http://localhost:8765/api/backup/${backupId}`, {
+              method: 'DELETE',
+              headers: { 'Authorization': `Bearer ${token}` }
+            });
+
+            const result = await response.json();
+            if (result.success) {
+              alert('备份删除成功！');
+              renderBackupView(container);
+            } else {
+              alert('删除失败: ' + result.error.message);
+            }
+          } catch (error) {
+            alert('删除失败: ' + error.message);
+          }
+        });
+      });
+
+    } catch (error) {
+      console.error('加载备份管理失败:', error);
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>💾 备份管理</h2>
+        </div>
+        <div class="empty-state">加载失败: ${error.message}</div>
+      `;
+    }
+  }
+
+  // 知识库视图（管理员）
+  async function renderKnowledgeView(container) {
+    if (!currentGroup) {
+      container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
+      return;
+    }
+
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`http://localhost:8765/api/knowledge/group/${currentGroup._id}`, {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      const result = await response.json();
+
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>📚 知识库管理 - ${currentGroup.name}</h2>
+          <button class="btn-primary" id="createKnowledgeBtn">+ 新建文档</button>
+        </div>
+        <div class="knowledge-list" id="knowledgeList"></div>
+      `;
+
+      const knowledgeList = document.getElementById('knowledgeList');
+      
+      if (!result.data || !result.data.knowledgeList || result.data.knowledgeList.length === 0) {
+        knowledgeList.innerHTML = '<div class="empty-state">暂无知识库文档</div>';
+      } else {
+        result.data.knowledgeList.forEach(kb => {
+          const kbCard = document.createElement('div');
+          kbCard.className = 'knowledge-card';
+          kbCard.innerHTML = `
+            <div class="kb-header">
+              <h3>${kb.title}</h3>
+              <span class="kb-status ${kb.status}">${kb.status === 'published' ? '已发布' : kb.status === 'draft' ? '草稿' : '已归档'}</span>
+            </div>
+            <div class="kb-meta">
+              <span>📁 ${kb.category || '未分类'}</span>
+              <span>👁️ ${kb.views || 0} 浏览</span>
+              <span>👍 ${kb.likes ? kb.likes.length : 0} 点赞</span>
+            </div>
+            <div class="kb-actions">
+              <button class="btn-primary btn-sm" data-id="${kb._id}" data-action="view-kb">查看</button>
+              <button class="btn-secondary btn-sm" data-id="${kb._id}" data-action="edit-kb">编辑</button>
+              <button class="btn-danger btn-sm" data-id="${kb._id}" data-action="delete-kb">删除</button>
+            </div>
+          `;
+          knowledgeList.appendChild(kbCard);
+        });
+
+        // 查看、编辑、删除事件
+        document.querySelectorAll('[data-action="view-kb"]').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            await showKnowledgeDetail(btn.dataset.id);
+          });
+        });
+
+        document.querySelectorAll('[data-action="edit-kb"]').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            await showEditKnowledgeModal(btn.dataset.id);
+          });
+        });
+
+        document.querySelectorAll('[data-action="delete-kb"]').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            if (confirm('确定要删除这个知识库文档吗？')) {
+              try {
+                await fetch(`http://localhost:8765/api/knowledge/${btn.dataset.id}`, {
+                  method: 'DELETE',
+                  headers: { 'Authorization': `Bearer ${token}` }
+                });
+                alert('删除成功！');
+                renderKnowledgeView(container);
+              } catch (error) {
+                alert('删除失败: ' + error.message);
+              }
+            }
+          });
+        });
+      }
+
+      document.getElementById('createKnowledgeBtn').addEventListener('click', () => {
+        showCreateKnowledgeModal();
+      });
+
+    } catch (error) {
+      console.error('加载知识库失败:', error);
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>📚 知识库管理</h2>
+        </div>
+        <div class="empty-state">加载失败: ${error.message}</div>
+      `;
+    }
+  }
+
+  // 显示创建知识库文档模态框
+  function showCreateKnowledgeModal() {
+    const modal = document.createElement('div');
+    modal.className = 'modal';
+    modal.id = 'createKnowledgeModal';
+    modal.innerHTML = `
+      <div class="modal-content" style="max-width: 800px;">
+        <div class="modal-header">
+          <h3>📚 创建知识库文档</h3>
+          <button class="close-btn" id="closeCreateKnowledge">&times;</button>
+        </div>
+        <form id="createKnowledgeForm">
+          <div class="form-group">
+            <label>标题 *</label>
+            <input type="text" id="kbTitle" required placeholder="请输入文档标题">
+          </div>
+          <div class="form-group">
+            <label>分类</label>
+            <input type="text" id="kbCategory" placeholder="例如：技术文档、产品说明等">
+          </div>
+          <div class="form-group">
+            <label>标签（用逗号分隔）</label>
+            <input type="text" id="kbTags" placeholder="例如：前端,React,教程">
+          </div>
+          <div class="form-group">
+            <label>内容 *</label>
+            <textarea id="kbContent" rows="10" required placeholder="请输入文档内容"></textarea>
+          </div>
+          <div class="form-group">
+            <label>状态</label>
+            <select id="kbStatus">
+              <option value="draft">草稿</option>
+              <option value="published">发布</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label>阅读权限</label>
+            <select id="kbReadPermission">
+              <option value="group">群组成员可见</option>
+              <option value="public">公开</option>
+              <option value="private">仅自己可见</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label>编辑权限</label>
+            <select id="kbWritePermission">
+              <option value="author">仅作者</option>
+              <option value="admin">管理员</option>
+              <option value="all">所有成员</option>
+            </select>
+          </div>
+          <div style="display: flex; gap: 10px; margin-top: 20px;">
+            <button type="submit" class="btn-primary">创建文档</button>
+            <button type="button" class="btn-secondary" id="cancelCreateKnowledge">取消</button>
+          </div>
+        </form>
+      </div>
+    `;
+
+    document.body.appendChild(modal);
+
+    // 关闭按钮
+    document.getElementById('closeCreateKnowledge').addEventListener('click', () => {
+      modal.remove();
+    });
+
+    document.getElementById('cancelCreateKnowledge').addEventListener('click', () => {
+      modal.remove();
+    });
+
+    // 点击背景关闭
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) {
+        modal.remove();
+      }
+    });
+
+    // 提交表单
+    document.getElementById('createKnowledgeForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      const title = document.getElementById('kbTitle').value.trim();
+      const category = document.getElementById('kbCategory').value.trim();
+      const tagsInput = document.getElementById('kbTags').value.trim();
+      const content = document.getElementById('kbContent').value.trim();
+      const status = document.getElementById('kbStatus').value;
+      const readPermission = document.getElementById('kbReadPermission').value;
+      const writePermission = document.getElementById('kbWritePermission').value;
+
+      if (!title || !content) {
+        alert('标题和内容不能为空！');
+        return;
+      }
+
+      const tags = tagsInput ? tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag) : [];
+
+      try {
+        const token = localStorage.getItem('token');
+        const response = await fetch('http://localhost:8765/api/knowledge', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${token}`
+          },
+          body: JSON.stringify({
+            title,
+            content,
+            category: category || '未分类',
+            tags,
+            groupId: currentGroup._id,
+            status,
+            permissions: {
+              read: readPermission,
+              write: writePermission
+            }
+          })
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+          alert('知识库文档创建成功！');
+          modal.remove();
+          // 重新加载知识库列表
+          const contentArea = document.getElementById('contentArea');
+          renderKnowledgeView(contentArea);
+        } else {
+          alert('创建失败: ' + (result.error?.message || result.message || '未知错误'));
+        }
+      } catch (error) {
+        console.error('创建知识库文档失败:', error);
+        alert('创建失败: ' + error.message);
+      }
+    });
+  }
+
+  // 显示知识库文档详情
+  async function showKnowledgeDetail(knowledgeId) {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`http://localhost:8765/api/knowledge/${knowledgeId}`, {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      const result = await response.json();
+
+      if (!result.success) {
+        alert('加载失败: ' + (result.error?.message || result.message));
+        return;
+      }
+
+      const kb = result.data.knowledge;
+      const modal = document.createElement('div');
+      modal.className = 'modal';
+      modal.innerHTML = `
+        <div class="modal-content" style="max-width: 900px;">
+          <div class="modal-header">
+            <h3>📚 ${kb.title}</h3>
+            <button class="close-btn" id="closeKnowledgeDetail">&times;</button>
+          </div>
+          <div style="padding: 20px;">
+            <div style="display: flex; gap: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border);">
+              <div><strong>分类：</strong>${kb.category}</div>
+              <div><strong>状态：</strong><span class="status-badge status-${kb.status}">${kb.status === 'published' ? '已发布' : kb.status === 'draft' ? '草稿' : '已归档'}</span></div>
+              <div><strong>浏览：</strong>${kb.views || 0}</div>
+              <div><strong>点赞：</strong>${kb.likes?.length || 0}</div>
+            </div>
+            ${kb.tags && kb.tags.length > 0 ? `
+              <div style="margin-bottom: 20px;">
+                <strong>标签：</strong>
+                ${kb.tags.map(tag => `<span class="kb-tag" style="background: var(--bg-hover); padding: 4px 12px; border-radius: 12px; margin-right: 8px; font-size: 12px;">${tag}</span>`).join('')}
+              </div>
+            ` : ''}
+            <div style="background: var(--bg-dark); padding: 20px; border-radius: 12px; line-height: 1.8; white-space: pre-wrap;">
+              ${kb.content}
+            </div>
+            <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 13px;">
+              <div>作者：${kb.author?.username || '未知'}</div>
+              <div>创建时间：${new Date(kb.createdAt).toLocaleString()}</div>
+              <div>更新时间：${new Date(kb.updatedAt).toLocaleString()}</div>
+            </div>
+          </div>
+        </div>
+      `;
+
+      document.body.appendChild(modal);
+
+      document.getElementById('closeKnowledgeDetail').addEventListener('click', () => {
+        modal.remove();
+      });
+
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+          modal.remove();
+        }
+      });
+    } catch (error) {
+      console.error('加载知识库详情失败:', error);
+      alert('加载失败: ' + error.message);
+    }
+  }
+
+  // 显示编辑知识库文档模态框
+  async function showEditKnowledgeModal(knowledgeId) {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`http://localhost:8765/api/knowledge/${knowledgeId}`, {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      const result = await response.json();
+
+      if (!result.success) {
+        alert('加载失败: ' + (result.error?.message || result.message));
+        return;
+      }
+
+      const kb = result.data.knowledge;
+      const modal = document.createElement('div');
+      modal.className = 'modal';
+      modal.innerHTML = `
+        <div class="modal-content" style="max-width: 800px;">
+          <div class="modal-header">
+            <h3>✏️ 编辑知识库文档</h3>
+            <button class="close-btn" id="closeEditKnowledge">&times;</button>
+          </div>
+          <form id="editKnowledgeForm">
+            <div class="form-group">
+              <label>标题 *</label>
+              <input type="text" id="editKbTitle" required value="${kb.title}">
+            </div>
+            <div class="form-group">
+              <label>分类</label>
+              <input type="text" id="editKbCategory" value="${kb.category || ''}">
+            </div>
+            <div class="form-group">
+              <label>标签（用逗号分隔）</label>
+              <input type="text" id="editKbTags" value="${kb.tags ? kb.tags.join(', ') : ''}">
+            </div>
+            <div class="form-group">
+              <label>内容 *</label>
+              <textarea id="editKbContent" rows="10" required>${kb.content}</textarea>
+            </div>
+            <div class="form-group">
+              <label>状态</label>
+              <select id="editKbStatus">
+                <option value="draft" ${kb.status === 'draft' ? 'selected' : ''}>草稿</option>
+                <option value="published" ${kb.status === 'published' ? 'selected' : ''}>发布</option>
+                <option value="archived" ${kb.status === 'archived' ? 'selected' : ''}>归档</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>阅读权限</label>
+              <select id="editKbReadPermission">
+                <option value="group" ${kb.permissions?.read === 'group' ? 'selected' : ''}>群组成员可见</option>
+                <option value="public" ${kb.permissions?.read === 'public' ? 'selected' : ''}>公开</option>
+                <option value="private" ${kb.permissions?.read === 'private' ? 'selected' : ''}>仅自己可见</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>编辑权限</label>
+              <select id="editKbWritePermission">
+                <option value="author" ${kb.permissions?.write === 'author' ? 'selected' : ''}>仅作者</option>
+                <option value="admin" ${kb.permissions?.write === 'admin' ? 'selected' : ''}>管理员</option>
+                <option value="all" ${kb.permissions?.write === 'all' ? 'selected' : ''}>所有成员</option>
+              </select>
+            </div>
+            <div style="display: flex; gap: 10px; margin-top: 20px;">
+              <button type="submit" class="btn-primary">保存修改</button>
+              <button type="button" class="btn-secondary" id="cancelEditKnowledge">取消</button>
+            </div>
+          </form>
+        </div>
+      `;
+
+      document.body.appendChild(modal);
+
+      document.getElementById('closeEditKnowledge').addEventListener('click', () => {
+        modal.remove();
+      });
+
+      document.getElementById('cancelEditKnowledge').addEventListener('click', () => {
+        modal.remove();
+      });
+
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+          modal.remove();
+        }
+      });
+
+      // 提交表单
+      document.getElementById('editKnowledgeForm').addEventListener('submit', async (e) => {
+        e.preventDefault();
+
+        const title = document.getElementById('editKbTitle').value.trim();
+        const category = document.getElementById('editKbCategory').value.trim();
+        const tagsInput = document.getElementById('editKbTags').value.trim();
+        const content = document.getElementById('editKbContent').value.trim();
+        const status = document.getElementById('editKbStatus').value;
+        const readPermission = document.getElementById('editKbReadPermission').value;
+        const writePermission = document.getElementById('editKbWritePermission').value;
+
+        if (!title || !content) {
+          alert('标题和内容不能为空！');
+          return;
+        }
+
+        const tags = tagsInput ? tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag) : [];
+
+        try {
+          const updateResponse = await fetch(`http://localhost:8765/api/knowledge/${knowledgeId}`, {
+            method: 'PUT',
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${token}`
+            },
+            body: JSON.stringify({
+              title,
+              content,
+              category: category || '未分类',
+              tags,
+              status,
+              permissions: {
+                read: readPermission,
+                write: writePermission
+              },
+              changeLog: '文档更新'
+            })
+          });
+
+          const updateResult = await updateResponse.json();
+
+          if (updateResult.success) {
+            alert('知识库文档更新成功！');
+            modal.remove();
+            // 重新加载知识库列表
+            const contentArea = document.getElementById('contentArea');
+            renderKnowledgeView(contentArea);
+          } else {
+            alert('更新失败: ' + (updateResult.error?.message || updateResult.message || '未知错误'));
+          }
+        } catch (error) {
+          console.error('更新知识库文档失败:', error);
+          alert('更新失败: ' + error.message);
+        }
+      });
+    } catch (error) {
+      console.error('加载知识库文档失败:', error);
+      alert('加载失败: ' + error.message);
+    }
+  }
+
+  // 工作流视图（管理员）
+  async function renderWorkflowsView(container) {
+    if (!currentGroup) {
+      container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
+      return;
+    }
+
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`http://localhost:8765/api/workflows/group/${currentGroup._id}`, {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      const result = await response.json();
+      const workflows = (result.data && result.data.workflows) || [];
+
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>🔄 工作流管理 - ${currentGroup.name}</h2>
+          <button class="btn-primary" id="createWorkflowBtn">+ 创建工作流</button>
+        </div>
+        
+        <div class="info-box" style="background: var(--bg-card); padding: 20px; border-radius: 12px; margin-bottom: 20px; border-left: 4px solid var(--primary);">
+          <h3 style="margin-bottom: 10px;">💡 什么是工作流？</h3>
+          <p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: 15px;">
+            工作流是一个<strong>自动化流程引擎</strong>，可以自动执行一系列预定义的操作，提高团队协作效率。
+          </p>
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 15px;">
+            <div style="background: var(--bg-dark); padding: 15px; border-radius: 8px;">
+              <div style="font-size: 24px; margin-bottom: 8px;">📋</div>
+              <strong>文档审批流程</strong>
+              <p style="font-size: 13px; color: var(--text-secondary); margin-top: 5px;">
+                自动通知审批人 → 等待审批 → 审批通过后发布
+              </p>
+            </div>
+            <div style="background: var(--bg-dark); padding: 15px; border-radius: 8px;">
+              <div style="font-size: 24px; margin-bottom: 8px;">✅</div>
+              <strong>任务自动分配</strong>
+              <p style="font-size: 13px; color: var(--text-secondary); margin-top: 5px;">
+                新任务创建 → 自动分配成员 → 发送通知
+              </p>
+            </div>
+            <div style="background: var(--bg-dark); padding: 15px; border-radius: 8px;">
+              <div style="font-size: 24px; margin-bottom: 8px;">⏰</div>
+              <strong>定时报告生成</strong>
+              <p style="font-size: 13px; color: var(--text-secondary); margin-top: 5px;">
+                每天凌晨2点 → 收集数据 → 生成报告 → 发送邮件
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="workflows-list" id="workflowsList"></div>
+
+        <!-- 工作流配置模态框 -->
+        <div class="modal hidden" id="workflowModal">
+          <div class="modal-content" style="max-width: 720px;">
+            <div class="modal-header">
+              <h3 id="workflowModalTitle">创建工作流</h3>
+              <button class="modal-close" id="closeWorkflowModal">&times;</button>
+            </div>
+            <form id="workflowForm">
+              <div class="form-group">
+                <label>名称 *</label>
+                <input type="text" id="wfName" required placeholder="例如：文档审批流程">
+              </div>
+              <div class="form-group">
+                <label>描述</label>
+                <textarea id="wfDescription" rows="2" placeholder="说明此工作流的用途"></textarea>
+              </div>
+              <div class="form-group">
+                <label>触发方式</label>
+                <select id="wfTriggerType">
+                  <option value="manual">手动触发</option>
+                  <option value="scheduled">定时触发</option>
+                </select>
+              </div>
+              <div class="form-group" id="wfScheduleGroup">
+                <label>定时表达式（可选）</label>
+                <input type="text" id="wfSchedule" placeholder="例如：0 2 * * * 表示每天凌晨2点">
+                <small>使用 Cron 表达式配置定时触发时间</small>
+              </div>
+              <div class="form-group">
+                <label>步骤配置（JSON 数组）</label>
+                <textarea id="wfSteps" rows="6" placeholder='例如：[{"name":"通知审批人","type":"notification","config":{"message":"有新文档需要审批"}}]'></textarea>
+                <small>高级用法：直接编辑 JSON，字段与后端 Workflow.steps 一致</small>
+              </div>
+              <div class="form-actions">
+                <button type="button" class="btn-secondary" id="cancelWorkflow">取消</button>
+                <button type="submit" class="btn-primary">保存工作流</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      `;
+
+      const workflowsList = document.getElementById('workflowsList');
+
+      if (workflows.length === 0) {
+        workflowsList.innerHTML = '<div class="empty-state">暂无工作流<br><small style="color: var(--text-secondary);">点击"创建工作流"开始自动化您的工作流程</small></div>';
+      } else {
+        workflows.forEach(wf => {
+          const wfCard = document.createElement('div');
+          wfCard.className = 'workflow-card';
+          const triggerType = wf.trigger && wf.trigger.type ? wf.trigger.type : 'manual';
+          const triggerLabel = triggerType === 'manual'
+            ? '🖱️ 手动'
+            : triggerType === 'scheduled'
+              ? '⏰ 定时'
+              : '⚡ 事件';
+          const stepsCount = Array.isArray(wf.steps) ? wf.steps.length : 0;
+          const totalExec = wf.stats && typeof wf.stats.totalExecutions === 'number'
+            ? wf.stats.totalExecutions
+            : 0;
+
+          wfCard.innerHTML = `
+            <div class="wf-header">
+              <h3>${wf.name}</h3>
+              <span class="wf-status ${wf.status}">${wf.status === 'active' ? '✅ 已激活' : wf.status === 'inactive' ? '⏸️ 已停用' : '📝 草稿'}</span>
+            </div>
+            <p>${wf.description || '暂无描述'}</p>
+            <div class="wf-meta">
+              <span>触发器: ${triggerLabel}</span>
+              <span>步骤: ${stepsCount}</span>
+              <span>执行: ${totalExec} 次</span>
+            </div>
+            <div class="wf-actions">
+              <button class="btn-primary btn-sm" data-id="${wf._id}" data-action="view-wf">查看详情</button>
+              <button class="btn-secondary btn-sm" data-id="${wf._id}" data-action="edit-wf">配置</button>
+              ${wf.status === 'active' ? `
+                <button class="btn-secondary btn-sm" data-id="${wf._id}" data-action="trigger-wf">手动触发</button>
+                <button class="btn-warning btn-sm" data-id="${wf._id}" data-action="deactivate-wf">停用</button>
+              ` : `
+                <button class="btn-success btn-sm" data-id="${wf._id}" data-action="activate-wf">激活</button>
+              `}
+              <button class="btn-danger btn-sm" data-id="${wf._id}" data-action="delete-wf">删除</button>
+            </div>
+          `;
+          workflowsList.appendChild(wfCard);
+        });
+      }
+
+      // 详情查看（暂时简单提示，可后续扩展为真正详情面板）
+      document.querySelectorAll('[data-action="view-wf"]').forEach(btn => {
+        const wf = workflows.find(w => w._id === btn.dataset.id);
+        btn.addEventListener('click', () => {
+          alert(`工作流详情：\n\n名称：${wf.name}\n状态：${wf.status}\n触发方式：${wf.trigger?.type || 'manual'}\n步骤数：${(wf.steps || []).length}`);
+        });
+      });
+
+      // 手动触发
+      document.querySelectorAll('[data-action="trigger-wf"]').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          if (confirm('确定要手动触发此工作流吗？')) {
+            try {
+              await fetch(`http://localhost:8765/api/workflows/${btn.dataset.id}/trigger`, {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                  'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({ triggerData: {} })
+              });
+              alert('工作流已触发！');
+            } catch (error) {
+              alert('触发失败: ' + error.message);
+            }
+          }
+        });
+      });
+
+      // 激活/停用
+      document.querySelectorAll('[data-action="activate-wf"], [data-action="deactivate-wf"]').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          const action = btn.dataset.action === 'activate-wf' ? 'activate' : 'deactivate';
+          try {
+            await fetch(`http://localhost:8765/api/workflows/${btn.dataset.id}/${action}`, {
+              method: 'POST',
+              headers: { 'Authorization': `Bearer ${token}` }
+            });
+            alert(action === 'activate' ? '已激活工作流' : '已停用工作流');
+            renderWorkflowsView(container);
+          } catch (error) {
+            alert('操作失败: ' + error.message);
+          }
+        });
+      });
+
+      // 删除工作流
+      document.querySelectorAll('[data-action="delete-wf"]').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          if (confirm('确定要删除这个工作流吗？删除后无法恢复！')) {
+            try {
+              await fetch(`http://localhost:8765/api/workflows/${btn.dataset.id}`, {
+                method: 'DELETE',
+                headers: { 'Authorization': `Bearer ${token}` }
+              });
+              alert('工作流删除成功！');
+              renderWorkflowsView(container);
+            } catch (error) {
+              alert('删除失败: ' + error.message);
+            }
+          }
+        });
+      });
+
+      // --- 工作流配置模态框逻辑 ---
+      const workflowModal = document.getElementById('workflowModal');
+      const workflowModalTitle = document.getElementById('workflowModalTitle');
+      const workflowForm = document.getElementById('workflowForm');
+      const nameInput = document.getElementById('wfName');
+      const descInput = document.getElementById('wfDescription');
+      const triggerSelect = document.getElementById('wfTriggerType');
+      const scheduleGroup = document.getElementById('wfScheduleGroup');
+      const scheduleInput = document.getElementById('wfSchedule');
+      const stepsTextarea = document.getElementById('wfSteps');
+
+      let editingWorkflow = null;
+
+      function updateScheduleVisibility() {
+        const type = triggerSelect.value;
+        scheduleGroup.style.display = type === 'scheduled' ? 'block' : 'none';
+      }
+
+      function openWorkflowModal(workflow) {
+        editingWorkflow = workflow || null;
+        workflowModalTitle.textContent = workflow ? '编辑工作流' : '创建工作流';
+        nameInput.value = workflow?.name || '';
+        descInput.value = workflow?.description || '';
+        const type = workflow?.trigger?.type || 'manual';
+        triggerSelect.value = type;
+        scheduleInput.value = workflow?.trigger?.schedule || '';
+        stepsTextarea.value = workflow ? JSON.stringify(workflow.steps || [], null, 2) : '';
+        updateScheduleVisibility();
+        workflowModal.classList.remove('hidden');
+      }
+
+      function closeWorkflowModal() {
+        workflowModal.classList.add('hidden');
+      }
+
+      triggerSelect.addEventListener('change', updateScheduleVisibility);
+
+      document.getElementById('createWorkflowBtn').addEventListener('click', () => openWorkflowModal(null));
+      document.getElementById('closeWorkflowModal').addEventListener('click', closeWorkflowModal);
+      document.getElementById('cancelWorkflow').addEventListener('click', closeWorkflowModal);
+      workflowModal.addEventListener('click', (e) => {
+        if (e.target === workflowModal) {
+          closeWorkflowModal();
+        }
+      });
+
+      // 编辑按钮
+      document.querySelectorAll('[data-action="edit-wf"]').forEach(btn => {
+        const wf = workflows.find(w => w._id === btn.dataset.id);
+        btn.addEventListener('click', () => openWorkflowModal(wf));
+      });
+
+      // 保存工作流
+      workflowForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const name = nameInput.value.trim();
+        if (!name) {
+          alert('请填写工作流名称');
+          return;
+        }
+        const description = descInput.value.trim();
+        const triggerType = triggerSelect.value;
+        const schedule = scheduleInput.value.trim();
+        const stepsText = stepsTextarea.value.trim();
+
+        let steps = [];
+        if (stepsText) {
+          try {
+            const parsed = JSON.parse(stepsText);
+            if (!Array.isArray(parsed)) {
+              throw new Error('步骤配置必须是 JSON 数组');
+            }
+            steps = parsed;
+          } catch (err) {
+            alert('步骤配置必须是合法的 JSON 数组：' + err.message);
+            return;
+          }
+        }
+
+        const body = {
+          name,
+          description,
+          groupId: currentGroup._id,
+          trigger: { type: triggerType },
+          steps
+        };
+        if (triggerType === 'scheduled' && schedule) {
+          body.trigger.schedule = schedule;
+        }
+
+        const url = editingWorkflow
+          ? `http://localhost:8765/api/workflows/${editingWorkflow._id}`
+          : 'http://localhost:8765/api/workflows';
+        const method = editingWorkflow ? 'PUT' : 'POST';
+
+        try {
+          const resp = await fetch(url, {
+            method,
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${token}`
+            },
+            body: JSON.stringify(body)
+          });
+          const data = await resp.json().catch(() => ({}));
+          if (!resp.ok || data.success === false) {
+            throw new Error(data.error?.message || data.message || `HTTP ${resp.status}`);
+          }
+          alert('工作流已保存');
+          closeWorkflowModal();
+          renderWorkflowsView(container);
+        } catch (err) {
+          alert('保存失败: ' + err.message);
+        }
+      });
+
+    } catch (error) {
+      console.error('加载工作流失败:', error);
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>🔄 工作流管理</h2>
+        </div>
+        <div class="empty-state">加载失败: ${error.message}</div>
+      `;
+    }
+  }
+
+  function getStatusText(status) {
+    const statusMap = {
+      'pending': '待处理',
+      'in_progress': '进行中',
+      'completed': '已完成',
+      'terminated': '已终止'
+    };
+    return statusMap[status] || status;
+  }
+
+  // ==================== 优化后的备份管理界面 ====================
+  
+  async function renderOptimizedBackupView(container) {
+    try {
+      const token = localStorage.getItem('token');
+      
+      // 获取备份列表
+      const backupsResponse = await fetch('http://localhost:8765/api/backup/list', {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      const backupsResult = await backupsResponse.json();
+      
+      // 获取备份配置
+      const configResponse = await fetch('http://localhost:8765/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>
+    `;
+  }
+
+  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>示例：0 2 * * * (每天凌晨2点)，0 */6 * * * (每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:8765/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:8765/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:8765/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:8765/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:8765/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];
+  }
+
+  // ==================== 备份管理界面优化完成 ====================
 
   renderView('groups');
+  
+  // 显示新手引导
+  features.showOnboarding();
 }