collabdocchat 2.4.4 → 2.4.6

package/src/pages/admin-dashboard.js.final-fix.bak

@@ -0,0 +1,4099 @@
+import { ApiService } from '../services/api.js';
+import { AuthService } from '../services/auth.js';
+import 'emoji-picker-element';
+
+export function renderAdminDashboard(user, wsService) {
+  const app = document.getElementById('app');
+  const apiService = new ApiService();
+  const authService = new AuthService();
+  const currentUserId = user.id || user._id;
+
+  let currentGroup = null;
+  let groups = [];
+
+  // 初始化主题
+  const savedTheme = localStorage.getItem('currentTheme') || 'dark';
+  applyThemeOnLoad(savedTheme);
+
+  app.innerHTML = `
+    <div class="dashboard">
+      <aside class="sidebar">
+        <div class="sidebar-header">
+          <h2>CollabDocChat</h2>
+          <span class="badge-admin">管理员</span>
+        </div>
+        
+        <div class="user-info">
+          <div class="avatar">${user.username[0].toUpperCase()}</div>
+          <div>
+            <div class="username">${user.username}</div>
+            <div class="user-role">管理员</div>
+          </div>
+        </div>
+
+        <nav class="nav-menu">
+          <button class="nav-item active" data-view="groups">
+            <span class="icon">👥</span> 群组管理
+          </button>
+          <button class="nav-item" data-view="tasks">
+            <span class="icon">📋</span> 任务管理
+          </button>
+          <button class="nav-item" data-view="documents">
+            <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="search">
+            <span class="icon">🔍</span> 搜索
+          </button>
+          <button class="nav-item" data-view="call">
+            <span class="icon">🎲</span> 随机点名
+          </button>
+          <button class="nav-item" data-view="audit">
+            <span class="icon">📊</span> 操作记录
+          </button>
+          <button class="nav-item" data-view="knowledge">
+            <span class="icon">📚</span> 知识库
+          </button>
+          <button class="nav-item" data-view="workflow">
+            <span class="icon">⚙️</span> 工作流
+          </button>
+          <button class="nav-item" data-view="backup">
+            <span class="icon">💾</span> 备份管理
+          </button>
+          <button class="nav-item" data-view="export">
+            <span class="icon">📤</span> 数据导出
+          </button>
+          </nav>
+
+        <div class="sidebar-footer" style="display: flex; gap: 8px; padding: 12px 16px;">
+          <button class="sidebar-footer-btn" id="settingsBtn" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 10px; color: var(--text-primary); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s;" onmouseover="this.style.background='linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(99, 102, 241, 0.2)'" onmouseout="this.style.background='linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%)'; this.style.transform='translateY(0)'; this.style.boxShadow='none'">
+            <span style="font-size: 16px;">⚙️</span>
+            <span>设置</span>
+          </button>
+          <button class="sidebar-footer-btn" id="helpBtn" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 10px; color: var(--text-primary); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s;" onmouseover="this.style.background='linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%)'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(99, 102, 241, 0.2)'" onmouseout="this.style.background='linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%)'; this.style.transform='translateY(0)'; this.style.boxShadow='none'">
+            <span style="font-size: 16px;">❓</span>
+            <span>帮助</span>
+          </button>
+        </div>
+        <button class="btn-logout" id="logoutBtn">退出登录</button>
+      </aside>
+
+      <main class="main-content">
+        <div id="contentArea"></div>
+      </main>
+    </div>
+  `;
+
+  // 导航切换
+  document.querySelectorAll('.nav-item').forEach(item => {
+    item.addEventListener('click', () => {
+      document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
+      item.classList.add('active');
+      const view = item.dataset.view;
+      renderView(view);
+    });
+  });
+
+  // 退出登录
+  document.getElementById('logoutBtn').addEventListener('click', () => {
+    authService.logout();
+  });
+
+  // 设置按钮
+  document.getElementById('settingsBtn').addEventListener('click', () => {
+    renderView('settings');
+  });
+
+  // 帮助按钮
+  document.getElementById('helpBtn').addEventListener('click', () => {
+    renderView('help');
+  });
+
+  async function renderGroupsView(container) {
+    const result = await apiService.getGroups();
+    groups = result.groups;
+
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>群组管理</h2>
+        <button class="btn-primary" id="createGroupBtn">创建群组</button>
+      </div>
+      <div class="groups-grid" id="groupsList"></div>
+      <div id="createGroupModal" class="modal hidden">
+        <div class="modal-content">
+          <h3>创建新群组</h3>
+          <form id="createGroupForm">
+            <div class="form-group">
+              <label>群组名称</label>
+              <input type="text" name="name" placeholder="请输入群组名称" required>
+            </div>
+            <div class="form-group">
+              <label>群组描述</label>
+              <textarea name="description" placeholder="请输入群组描述（可选）"></textarea>
+            </div>
+            <div class="form-group">
+              <label>添加成员（可选）</label>
+              <div id="usersList" style="max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 10px;">
+                <p>加载中...</p>
+              </div>
+            </div>
+            <div style="display: flex; gap: 10px;">
+              <button type="submit" class="btn-primary">创建</button>
+              <button type="button" class="btn-secondary" id="closeModal">取消</button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div id="manageMembersModal" class="modal hidden">
+        <div class="modal-content">
+          <h3>管理成员</h3>
+          <div id="currentMembers"></div>
+          <div class="form-group">
+            <label>添加新成员</label>
+            <div id="availableUsers"></div>
+          </div>
+          <button type="button" class="btn-secondary" id="closeMembersModal">关闭</button>
+        </div>
+      </div>
+    `;
+
+    const groupsList = document.getElementById('groupsList');
+    groups.forEach(group => {
+      const groupCard = document.createElement('div');
+      groupCard.className = 'group-card';
+      groupCard.innerHTML = `
+        <h3>${group.name}</h3>
+        <p>${group.description || '暂无描述'}</p>
+        <div class="group-stats">
+          <span>👥 ${group.members.length} 成员</span>
+          <span>📄 ${group.documents.length} 文档</span>
+        </div>
+        <div style="display: flex; gap: 10px; margin-top: 10px;">
+          <button class="btn-select" data-id="${group._id}">选择</button>
+          <button class="btn-secondary" data-id="${group._id}" data-action="manage">管理成员</button>
+        </div>
+      `;
+      groupsList.appendChild(groupCard);
+    });
+
+    document.querySelectorAll('.btn-select').forEach(btn => {
+      btn.addEventListener('click', () => {
+        currentGroup = groups.find(g => g._id === btn.dataset.id);
+        wsService.joinGroup(currentGroup._id);
+        alert(`已加入群组: ${currentGroup.name}`);
+      });
+    });
+
+    document.querySelectorAll('[data-action="manage"]').forEach(btn => {
+      btn.addEventListener('click', async () => {
+        const groupId = btn.dataset.id;
+        await showManageMembersModal(groupId);
+      });
+    });
+
+    document.getElementById('createGroupBtn').addEventListener('click', async () => {
+      document.getElementById('createGroupModal').classList.remove('hidden');
+      await loadUsers();
+    });
+
+    document.getElementById('closeModal').addEventListener('click', () => {
+      document.getElementById('createGroupModal').classList.add('hidden');
+    });
+
+    document.getElementById('closeMembersModal').addEventListener('click', () => {
+      document.getElementById('manageMembersModal').classList.add('hidden');
+    });
+
+    document.getElementById('createGroupForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const selectedUsers = Array.from(document.querySelectorAll('#usersList input:checked')).map(cb => cb.value);
+      
+      try {
+        const result = await apiService.createGroup(
+          formData.get('name'),
+          formData.get('description'),
+          selectedUsers
+        );
+        alert('群组创建成功！');
+        await renderGroupsView(container);
+        document.getElementById('createGroupModal').classList.add('hidden');
+      } catch (error) {
+        console.error('创建群组错误:', error);
+        alert('创建失败: ' + error.message);
+      }
+    });
+  }
+
+  async function loadUsers() {
+    try {
+      const result = await apiService.getAllUsers();
+      const usersList = document.getElementById('usersList');
+      usersList.innerHTML = result.users.map(u => `
+        <label style="display: flex; align-items: center; gap: 10px; padding: 8px; cursor: pointer;">
+          <input type="checkbox" value="${u._id}">
+          <div class="avatar" style="width: 30px; height: 30px; font-size: 14px;">${u.username[0].toUpperCase()}</div>
+          <span>${u.username} (${u.role === 'admin' ? '管理员' : '用户'})</span>
+        </label>
+      `).join('');
+    } catch (error) {
+      console.error('加载用户失败:', error);
+      document.getElementById('usersList').innerHTML = '<p style="color: var(--danger);">加载失败</p>';
+    }
+  }
+
+  async function showManageMembersModal(groupId) {
+    try {
+      const groupResult = await apiService.getGroup(groupId);
+      const usersResult = await apiService.getAllUsers();
+      const group = groupResult.group;
+      
+      const currentMembers = document.getElementById('currentMembers');
+      currentMembers.innerHTML = `
+        <h4>当前成员 (${group.members.length})</h4>
+        <div style="max-height: 200px; overflow-y: auto;">
+          ${group.members.map(member => `
+            <div style="display: flex; align-items: center; justify-content: space-between; padding: 8px; border-bottom: 1px solid var(--border);">
+              <div style="display: flex; align-items: center; gap: 10px;">
+                <div class="avatar" style="width: 30px; height: 30px; font-size: 14px;">${member.username[0].toUpperCase()}</div>
+                <span>${member.username} ${member._id.toString() === group.admin._id.toString() ? '(管理员)' : ''}</span>
+              </div>
+              ${member._id.toString() !== group.admin._id.toString() ? 
+                `<button class="btn-secondary btn-sm" onclick="removeMember('${groupId}', '${member._id}')">移除</button>` : 
+                ''}
+            </div>
+          `).join('')}
+        </div>
+      `;
+
+      const memberIds = group.members.map(m => m._id.toString());
+      const availableUsers = usersResult.users.filter(u => !memberIds.includes(u._id));
+      
+      const availableUsersDiv = document.getElementById('availableUsers');
+      if (availableUsers.length === 0) {
+        availableUsersDiv.innerHTML = '<p>所有用户都已在群组中</p>';
+      } else {
+        availableUsersDiv.innerHTML = availableUsers.map(u => `
+          <div style="display: flex; align-items: center; justify-content: space-between; padding: 8px; border-bottom: 1px solid var(--border);">
+            <div style="display: flex; align-items: center; gap: 10px;">
+              <div class="avatar" style="width: 30px; height: 30px; font-size: 14px;">${u.username[0].toUpperCase()}</div>
+              <span>${u.username}</span>
+            </div>
+            <button class="btn-primary btn-sm" onclick="addMember('${groupId}', '${u._id}')">添加</button>
+          </div>
+        `).join('');
+      }
+
+      document.getElementById('manageMembersModal').classList.remove('hidden');
+    } catch (error) {
+      console.error('加载成员失败:', error);
+      alert('加载失败: ' + error.message);
+    }
+  }
+
+  // 全局函数供按钮调用
+  window.addMember = async (groupId, userId) => {
+    try {
+      await apiService.addMember(groupId, userId);
+      alert('成员添加成功！');
+      await showManageMembersModal(groupId);
+    } catch (error) {
+      alert('添加失败: ' + error.message);
+    }
+  };
+
+  window.removeMember = async (groupId, userId) => {
+    if (confirm('确定要移除该成员吗？')) {
+      try {
+        await apiService.removeMember(groupId, userId);
+        alert('成员移除成功！');
+        await showManageMembersModal(groupId);
+      } catch (error) {
+        alert('移除失败: ' + error.message);
+      }
+    }
+  };
+
+  async function renderTasksView(container) {
+    if (!currentGroup) {
+      container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
+      return;
+    }
+
+    const result = await apiService.getTasks(currentGroup._id);
+    
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>任务管理 - ${currentGroup.name}</h2>
+        <button class="btn-primary" id="createTaskBtn">创建任务</button>
+      </div>
+      <div class="tasks-list" id="tasksList"></div>
+      <div id="createTaskModal" class="modal hidden">
+        <div class="modal-content">
+          <h3>创建新任务</h3>
+          <form id="createTaskForm">
+            <div class="form-group">
+              <label>任务标题</label>
+              <input type="text" name="title" placeholder="请输入任务标题" required>
+            </div>
+            <div class="form-group">
+              <label>任务描述</label>
+              <textarea name="description" placeholder="请输入任务描述"></textarea>
+            </div>
+            <div class="form-group">
+              <label>截止日期</label>
+              <input type="date" name="deadline">
+            </div>
+            <div style="display: flex; gap: 10px;">
+              <button type="submit" class="btn-primary">创建</button>
+              <button type="button" class="btn-secondary" id="closeTaskModal">取消</button>
+            </div>
+          </form>
+        </div>
+      </div>
+      
+      <!-- 任务详情模态框 -->
+      <div id="taskDetailModal" class="modal hidden">
+        <div class="modal-content" style="max-width: 800px;">
+          <div class="modal-header">
+            <h3>📋 任务详情</h3>
+            <button class="modal-close" id="closeTaskDetailModal">&times;</button>
+          </div>
+          <div class="modal-body" id="taskDetailContent" style="padding: 20px;">
+            <!-- 任务详情内容 -->
+          </div>
+        </div>
+      </div>
+    `;
+
+    const tasksList = document.getElementById('tasksList');
+    if (result.tasks.length === 0) {
+      tasksList.innerHTML = '<div class="empty-state">暂无任务</div>';
+    } else {
+      result.tasks.forEach(task => {
+        const taskCard = document.createElement('div');
+        taskCard.className = `task-card status-${task.status}`;
+        taskCard.innerHTML = `
+          <div style="display: flex; justify-content: space-between; align-items: start;">
+            <div style="flex: 1;">
+              <h3>${task.title}</h3>
+              <p>${task.description || '无描述'}</p>
+              <div class="task-meta">
+                <span class="status-badge">${getStatusText(task.status)}</span>
+                <span>截止: ${task.deadline ? new Date(task.deadline).toLocaleDateString() : '无'}</span>
+              </div>
+            </div>
+            <div style="display: flex; gap: 10px;">
+              <button class="btn-primary btn-sm" data-id="${task._id}" data-action="view-task" 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>
+        `;
+        tasksList.appendChild(taskCard);
+      });
+
+      // 添加删除任务事件
+      document.querySelectorAll('[data-action="delete-task"]').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          const taskId = btn.dataset.id;
+          if (confirm('确定要删除这个任务吗？删除后无法恢复！')) {
+            try {
+              await apiService.deleteTask(taskId);
+              alert('任务删除成功！');
+              await renderTasksView(container);
+            } catch (error) {
+              console.error('删除任务错误:', error);
+              alert('删除失败: ' + (error.message || '未知错误'));
+            }
+          }
+        });
+      });
+
+      // 添加查看详细事件
+      document.querySelectorAll('[data-action="view-task"]').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          const taskId = btn.dataset.id;
+          const task = result.tasks.find(t => t._id === taskId);
+          
+          if (task) {
+            const detailContent = document.getElementById('taskDetailContent');
+            
+            // 获取状态颜色
+            const getStatusColor = (status) => {
+              const colors = {
+                'pending': '#6366f1',
+                'in-progress': '#f59e0b',
+                'completed': '#10b981',
+                'cancelled': '#ef4444'
+              };
+              return colors[status] || '#6366f1';
+            };
+            
+            detailContent.innerHTML = `
+              <div class="task-detail" style="background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%); border-radius: 16px; padding: 24px;">
+                
+                <!-- 任务标题 -->
+                <div class="detail-section" style="background: var(--bg-secondary); border-radius: 12px; padding: 20px; margin-bottom: 16px; border-left: 4px solid ${getStatusColor(task.status)};">
+                  <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
+                    <span style="font-size: 24px;">📌</span>
+                    <h4 style="margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">任务标题</h4>
+                  </div>
+                  <p style="font-size: 22px; font-weight: 700; margin: 0; color: var(--text-primary); line-height: 1.4;">${task.title}</p>
+                </div>
+                
+                <!-- 任务描述 -->
+                <div class="detail-section" style="background: var(--bg-secondary); border-radius: 12px; padding: 20px; margin-bottom: 16px;">
+                  <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
+                    <span style="font-size: 24px;">📝</span>
+                    <h4 style="margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">任务描述</h4>
+                  </div>
+                  <p style="margin: 0; line-height: 1.8; color: var(--text-primary); font-size: 15px; white-space: pre-wrap;">${task.description || '<span style="color: var(--text-secondary); font-style: italic;">暂无描述</span>'}</p>
+                </div>
+                
+                <!-- 状态和日期网格 -->
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px;">
+                  
+                  <!-- 任务状态 -->
+                  <div class="detail-section" style="background: var(--bg-secondary); border-radius: 12px; padding: 20px;">
+                    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
+                      <span style="font-size: 24px;">📊</span>
+                      <h4 style="margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">任务状态</h4>
+                    </div>
+                    <span style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; background: ${getStatusColor(task.status)}; color: white; font-weight: 600; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
+                      ${task.status === 'completed' ? '✓' : task.status === 'in-progress' ? '⟳' : task.status === 'cancelled' ? '✕' : '○'}
+                      ${getStatusText(task.status)}
+                    </span>
+                </div>
+                
+                  <!-- 截止日期 -->
+                  <div class="detail-section" style="background: var(--bg-secondary); border-radius: 12px; padding: 20px;">
+                    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
+                      <span style="font-size: 24px;">📅</span>
+                      <h4 style="margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">截止日期</h4>
+                    </div>
+                    <p style="margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary);">
+                      ${task.deadline ? new Date(task.deadline).toLocaleString('zh-CN', { 
+                        year: 'numeric', 
+                        month: 'long', 
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                      }) : '<span style="color: var(--text-secondary); font-style: italic;">无截止日期</span>'}
+                    </p>
+                </div>
+                
+                </div>
+                
+                <!-- 分配成员 -->
+                <div class="detail-section" style="background: var(--bg-secondary); border-radius: 12px; padding: 20px; margin-bottom: 16px;">
+                  <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
+                    <span style="font-size: 24px;">👥</span>
+                    <h4 style="margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">分配给</h4>
+                    ${task.assignedTo && task.assignedTo.length > 0 ? `<span style="background: var(--primary); color: white; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600;">${task.assignedTo.length} 人</span>` : ''}
+                  </div>
+                  <div style="display: flex; flex-wrap: wrap; gap: 12px;">
+                    ${task.assignedTo && task.assignedTo.length > 0 ? 
+                      task.assignedTo.map(user => `
+                        <div style="display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); border-radius: 10px; border: 1px solid rgba(99, 102, 241, 0.2); transition: all 0.3s ease;">
+                          <div class="avatar" style="width: 36px; height: 36px; font-size: 16px; background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);">${user.username?.[0]?.toUpperCase() || '?'}</div>
+                          <span style="font-weight: 600; color: var(--text-primary);">${user.username || '未知用户'}</span>
+                        </div>
+                      `).join('') : 
+                      '<p style="margin: 0; color: var(--text-secondary); font-style: italic;">未分配给任何人</p>'
+                    }
+                  </div>
+                </div>
+                
+                <!-- 时间信息 -->
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
+                  
+                  <!-- 创建时间 -->
+                  <div class="detail-section" style="background: var(--bg-secondary); border-radius: 12px; padding: 20px;">
+                    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
+                      <span style="font-size: 24px;">🕐</span>
+                      <h4 style="margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">创建时间</h4>
+                    </div>
+                    <p style="margin: 0; font-size: 14px; color: var(--text-primary);">
+                      ${new Date(task.createdAt).toLocaleString('zh-CN', { 
+                        year: 'numeric', 
+                        month: 'long', 
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                      })}
+                    </p>
+                </div>
+                
+                  <!-- 更新时间 -->
+                  <div class="detail-section" style="background: var(--bg-secondary); border-radius: 12px; padding: 20px;">
+                    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
+                      <span style="font-size: 24px;">🔄</span>
+                      <h4 style="margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">更新时间</h4>
+                </div>
+                    <p style="margin: 0; font-size: 14px; color: var(--text-primary);">
+                      ${new Date(task.updatedAt).toLocaleString('zh-CN', { 
+                        year: 'numeric', 
+                        month: 'long', 
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                      })}
+                    </p>
+                  </div>
+                  
+                </div>
+                
+                <!-- 投票信息 -->
+                ${task.poll ? `
+                  <div class="detail-section" style="background: var(--bg-secondary); border-radius: 12px; padding: 20px; margin-top: 16px;">
+                    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
+                      <span style="font-size: 24px;">📊</span>
+                      <h4 style="margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">投票信息</h4>
+                    </div>
+                    
+                    <div style="background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%); border-radius: 12px; padding: 20px; border: 1px solid rgba(99, 102, 241, 0.2);">
+                      <h5 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: var(--text-primary);">${task.poll.question || '投票'}</h5>
+                      
+                      <!-- 投票统计 -->
+                      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;">
+                        <div style="background: var(--bg-tertiary); padding: 12px; border-radius: 8px; text-align: center;">
+                          <div style="font-size: 24px; font-weight: 700; color: var(--primary);">${task.poll.votedCount || 0}</div>
+                          <div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">已投票</div>
+                        </div>
+                        <div style="background: var(--bg-tertiary); padding: 12px; border-radius: 8px; text-align: center;">
+                          <div style="font-size: 24px; font-weight: 700; color: var(--warning);">${(task.poll.totalMembers || 0) - (task.poll.votedCount || 0)}</div>
+                          <div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">未投票</div>
+                        </div>
+                        <div style="background: var(--bg-tertiary); padding: 12px; border-radius: 8px; text-align: center;">
+                          <div style="font-size: 24px; font-weight: 700; color: var(--success);">${task.poll.totalVotes || 0}</div>
+                          <div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">总票数</div>
+                        </div>
+                      </div>
+                      
+                      <!-- 投票选项 -->
+                      <div style="display: flex; flex-direction: column; gap: 12px;">
+                        ${task.poll.options?.map(option => {
+                          const percentage = task.poll.totalVotes > 0 ? Math.round((option.votes || 0) / task.poll.totalVotes * 100) : 0;
+                          const voters = option.voters || [];
+                          return \`
+                            <div style="background: var(--bg-tertiary); border-radius: 10px; padding: 16px; border: 1px solid var(--border);">
+                              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+                                <span style="font-weight: 600; color: var(--text-primary);">\${option.text}</span>
+                                <span style="font-weight: 700; color: var(--primary);">\${option.votes || 0} 票 (\${percentage}%)</span>
+                              </div>
+                              <div style="height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; margin-bottom: 12px;">
+                                <div style="height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%); width: \${percentage}%; transition: width 0.3s;"></div>
+                              </div>
+                              \${voters.length > 0 ? \`
+                                <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);">
+                                  <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">投票成员 (\${voters.length}人):</div>
+                                  <div style="display: flex; flex-wrap: wrap; gap: 6px;">
+                                    ${voters.map(voter => {
+                                      const voterName = typeof voter === 'string' ? voter : voter.username;
+                                      return `
+                                        <span style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 12px; font-size: 12px;">
+                                          <span style="width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: 700;">${voterName ? voterName[0].toUpperCase() : '?'}</span>
+                                          <span style="font-weight: 600; color: var(--text-primary);">${voterName || '未知用户'}</span>
+                                        </span>
+                                      `;
+                                    }).join('')}
+                                  </div>
+                                </div>
+                              \` : \`
+                                <div style="text-align: center; padding: 8px; color: var(--text-secondary); font-size: 12px; font-style: italic;">暂无人投票</div>
+                              \`}
+                            </div>
+                          \`;
+                        }).join('') || '<p style="color: var(--text-secondary); font-style: italic;">暂无投票选项</p>'}
+                      </div>
+                      
+                      <!-- 未投票成员 -->
+                      ${task.poll.unvotedMembers && task.poll.unvotedMembers.length > 0 ? \`
+                        <div style="margin-top: 16px; padding: 16px; background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(220, 38, 38, 0.05) 100%); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 10px;">
+                          <div style="font-size: 14px; font-weight: 600; color: var(--danger); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
+                            <span>⚠️</span>
+                            <span>未投票成员 (\${task.poll.unvotedMembers.length}人):</span>
+                          </div>
+                          <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+                            \${task.poll.unvotedMembers.map(member => {
+                              const memberName = typeof member === 'string' ? member : member.username;
+                              return \\`
+                                <span style="display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-tertiary); border: 2px solid rgba(239, 68, 68, 0.3); border-radius: 12px; font-size: 12px;">
+                                  <span style="width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 700;">\\${memberName ? memberName[0].toUpperCase() : '?'}</span>
+                                  <span style="font-weight: 600; color: var(--text-primary);">\\${memberName || '未知用户'}</span>
+                                  <span style="font-size: 10px; color: var(--danger); background: rgba(239, 68, 68, 0.1); padding: 2px 6px; border-radius: 8px;">未投票</span>
+                                </span>
+                              \\`;
+                            }).join('')}
+                          </div>
+                        </div>
+                      \` : task.poll.totalMembers > 0 ? \`
+                        <div style="margin-top: 16px; padding: 12px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 10px; text-align: center; color: var(--success); font-weight: 600;">
+                          ✅ 所有成员已完成投票
+                        </div>
+                      \` : ''}
+                    </div>
+                  </div>
+                ` : ''}
+                
+              </div>
+            `;
+            
+            document.getElementById('taskDetailModal').classList.remove('hidden');
+          }
+        });
+      });
+    }
+
+    document.getElementById('createTaskBtn').addEventListener('click', () => {
+      document.getElementById('createTaskModal').classList.remove('hidden');
+    });
+
+    document.getElementById('closeTaskModal').addEventListener('click', () => {
+      document.getElementById('createTaskModal').classList.add('hidden');
+    });
+
+    document.getElementById('closeTaskDetailModal').addEventListener('click', () => {
+      document.getElementById('taskDetailModal').classList.add('hidden');
+    });
+
+    document.getElementById('createTaskForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      try {
+        // 获取群组信息，自动分配给所有成员
+        const groupResult = await apiService.getGroup(currentGroup._id);
+        const memberIds = groupResult.group.members.map(m => m._id);
+        
+        await apiService.createTask({
+          title: formData.get('title'),
+          description: formData.get('description'),
+          groupId: currentGroup._id,
+          assignedTo: memberIds,  // 分配给所有成员
+          deadline: formData.get('deadline') || null
+        });
+        alert('任务创建成功！已分配给所有群组成员');
+        await renderTasksView(container);
+        document.getElementById('createTaskModal').classList.add('hidden');
+      } catch (error) {
+        console.error('创建任务错误:', error);
+        alert('创建失败: ' + error.message);
+      }
+    });
+  }
+
+  async function renderDocumentsView(container) {
+    if (!currentGroup) {
+      container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
+      return;
+    }
+
+    const result = await apiService.getDocuments(currentGroup._id);
+    const groupResult = await apiService.getGroup(currentGroup._id);
+    const group = groupResult.group;
+    
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>📄 共享文档 - ${currentGroup.name}</h2>
+        <button class="btn-primary" id="createDocBtn">➕ 创建文档</button>
+      </div>
+      <div class="documents-list" id="docsList"></div>
+      
+      <!-- 创建文档模态框 -->
+      <div id="createDocModal" class="modal hidden">
+        <div class="modal-content" style="max-width: 700px;">
+          <div class="modal-header">
+            <h3>创建共享文档</h3>
+            <button class="modal-close" id="closeDocModal">&times;</button>
+          </div>
+          <form id="createDocForm" style="padding: 20px;">
+            <div class="form-group">
+              <label>📌 文档标题</label>
+              <input type="text" name="title" placeholder="请输入文档标题" required style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px;">
+            </div>
+            <div class="form-group">
+              <label>📝 文档内容</label>
+              <textarea name="content" placeholder="请输入文档内容" rows="6" style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px;"></textarea>
+            </div>
+            <div class="form-group">
+              <label>👥 成员编辑权限</label>
+              <div style="max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 10px;">
+                ${group.members.map(member => `
+                  <div style="display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg-secondary); border-radius: 6px; margin-bottom: 8px;">
+                    <div class="avatar" style="width: 32px; height: 32px; font-size: 14px;">${member.username[0].toUpperCase()}</div>
+                    <span style="flex: 1;">${member.username}</span>
+                    <label style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
+                      <input type="checkbox" name="editableMembers" value="${member._id}" ${member._id === group.admin.toString() ? 'checked disabled' : 'checked'} style="width: 18px; height: 18px; cursor: pointer;">
+                      <span style="font-size: 13px;">${member._id === group.admin.toString() ? '管理员' : '可编辑'}</span>
+                    </label>
+            </div>
+                `).join('')}
+              </div>
+              <p style="font-size: 12px; color: var(--text-tertiary); margin-top: 8px;">💡 提示：所有成员都可以查看文档，勾选的成员可以编辑文档</p>
+            </div>
+            <div style="display: flex; gap: 10px; margin-top: 20px;">
+              <button type="submit" class="btn-primary" style="flex: 1;">创建</button>
+              <button type="button" class="btn-secondary" id="closeDocModalBtn" style="flex: 1;">取消</button>
+            </div>
+          </form>
+        </div>
+      </div>
+      
+      <!-- 编辑权限模态框 -->
+      <div id="editPermissionModal" class="modal hidden">
+        <div class="modal-content" style="max-width: 600px;">
+          <div class="modal-header">
+            <h3>管理编辑权限</h3>
+            <button class="modal-close" id="closePermissionModal">&times;</button>
+          </div>
+          <div id="permissionContent" style="padding: 20px;">
+          </div>
+        </div>
+      </div>
+    `;
+
+    const docsList = document.getElementById('docsList');
+    if (result.documents.length === 0) {
+      docsList.innerHTML = '<div class="empty-state">暂无共享文档</div>';
+    } else {
+      result.documents.forEach(doc => {
+        const docCard = document.createElement('div');
+        docCard.className = 'document-card';
+        const editableCount = doc.editableMembers?.length || 0;
+        docCard.innerHTML = `
+          <div style="display: flex; justify-content: space-between; align-items: start;">
+            <div style="flex: 1;">
+              <h3>📄 ${doc.title}</h3>
+              <div class="doc-meta" style="display: flex; gap: 15px; margin-top: 8px; font-size: 13px; color: var(--text-secondary);">
+                <span>👤 创建者: ${doc.creator.username}</span>
+                <span>✏️ ${editableCount} 人可编辑</span>
+                <span>📅 ${new Date(doc.createdAt).toLocaleDateString()}</span>
+              </div>
+            </div>
+            <div style="display: flex; gap: 10px; align-items: center;">
+              <button class="btn-secondary btn-sm" data-id="${doc._id}" data-action="manage-permission" title="管理权限" style="padding: 8px 16px;">⚙️ 权限</button>
+              <button class="btn-primary btn-sm" data-id="${doc._id}" data-action="edit-doc" title="编辑文档" style="padding: 8px 16px;">✏️ 编辑</button>
+              <button class="btn-danger btn-sm" data-id="${doc._id}" data-action="delete-doc" title="删除文档" style="padding: 8px 16px;">🗑️ 删除</button>
+            </div>
+          </div>
+        `;
+        docsList.appendChild(docCard);
+      });
+
+      // 编辑文档按钮
+      document.querySelectorAll('[data-action="edit-doc"]').forEach(btn => {
+        btn.addEventListener('click', () => {
+          renderDocumentEditor(container, btn.dataset.id);
+        });
+      });
+
+      // 管理权限按钮
+      document.querySelectorAll('[data-action="manage-permission"]').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          const docId = btn.dataset.id;
+          const doc = result.documents.find(d => d._id === docId);
+          showPermissionModal(doc, group);
+        });
+      });
+
+      // 删除文档按钮
+      document.querySelectorAll('[data-action="delete-doc"]').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+          e.stopPropagation();
+          const docId = btn.dataset.id;
+          if (confirm('确定要删除这个文档吗？删除后无法恢复！')) {
+            try {
+              await apiService.deleteDocument(docId);
+              alert('文档删除成功！');
+              await renderDocumentsView(container);
+            } catch (error) {
+              console.error('删除文档错误:', error);
+              alert('删除失败: ' + (error.message || '未知错误'));
+            }
+          }
+        });
+      });
+    }
+
+    document.getElementById('createDocBtn').addEventListener('click', () => {
+      document.getElementById('createDocModal').classList.remove('hidden');
+    });
+
+    document.getElementById('closeDocModal').addEventListener('click', () => {
+      document.getElementById('createDocModal').classList.add('hidden');
+    });
+
+    document.getElementById('closeDocModalBtn').addEventListener('click', () => {
+      document.getElementById('createDocModal').classList.add('hidden');
+    });
+
+    // 权限管理模态框函数
+    function showPermissionModal(doc, group) {
+      const modal = document.getElementById('editPermissionModal');
+      const content = document.getElementById('permissionContent');
+      
+      content.innerHTML = `
+        <div style="margin-bottom: 16px;">
+          <h4 style="margin: 0 0 8px 0;">📄 ${doc.title}</h4>
+          <p style="font-size: 13px; color: var(--text-secondary); margin: 0;">管理哪些成员可以编辑此文档</p>
+        </div>
+        <form id="updatePermissionForm">
+          <div style="max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 10px;">
+            ${group.members.map(member => {
+              const isEditable = doc.editableMembers?.includes(member._id) || member._id === group.admin.toString();
+              const isAdmin = member._id === group.admin.toString();
+              return `
+                <div style="display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg-secondary); border-radius: 6px; margin-bottom: 8px;">
+                  <div class="avatar" style="width: 32px; height: 32px; font-size: 14px;">${member.username[0].toUpperCase()}</div>
+                  <span style="flex: 1;">${member.username}</span>
+                  <label style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
+                    <input type="checkbox" name="editableMembers" value="${member._id}" ${isEditable ? 'checked' : ''} ${isAdmin ? 'disabled' : ''} style="width: 18px; height: 18px; cursor: pointer;">
+                    <span style="font-size: 13px;">${isAdmin ? '管理员' : '可编辑'}</span>
+                  </label>
+                </div>
+              `;
+            }).join('')}
+          </div>
+          <p style="font-size: 12px; color: var(--text-tertiary); margin-top: 12px;">💡 提示：所有成员都可以查看文档，只有勾选的成员可以编辑</p>
+          <div style="display: flex; gap: 10px; margin-top: 20px;">
+            <button type="submit" class="btn-primary" style="flex: 1;">保存</button>
+            <button type="button" class="btn-secondary" id="cancelPermissionBtn" style="flex: 1;">取消</button>
+          </div>
+        </form>
+      `;
+      
+      modal.classList.remove('hidden');
+      
+      document.getElementById('cancelPermissionBtn').addEventListener('click', () => {
+        modal.classList.add('hidden');
+      });
+      
+      document.getElementById('updatePermissionForm').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+        const editableMembers = formData.getAll('editableMembers');
+        
+        try {
+          await apiService.updateDocumentPermissions(doc._id, editableMembers);
+          alert('权限更新成功！');
+          modal.classList.add('hidden');
+          await renderDocumentsView(container);
+        } catch (error) {
+          console.error('更新权限错误:', error);
+          alert('更新失败: ' + error.message);
+        }
+      });
+    }
+
+    document.getElementById('closePermissionModal').addEventListener('click', () => {
+      document.getElementById('editPermissionModal').classList.add('hidden');
+    });
+
+    document.getElementById('createDocForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const editableMembers = formData.getAll('editableMembers');
+      
+      try {
+        await apiService.createDocument(
+          formData.get('title'),
+          formData.get('content'),
+          currentGroup._id,
+          editableMembers
+        );
+        alert('文档创建成功！');
+        await renderDocumentsView(container);
+        document.getElementById('createDocModal').classList.add('hidden');
+      } catch (error) {
+        console.error('创建文档错误:', error);
+        alert('创建失败: ' + error.message);
+      }
+    });
+  }
+
+  async function renderDocumentEditor(container, documentId) {
+    const result = await apiService.getDocument(documentId);
+    const doc = result.document;
+
+    container.innerHTML = `
+      <div class="view-header">
+        <button class="btn-back" id="backBtn">← 返回</button>
+        <h2>${doc.title}</h2>
+        <span class="doc-status">${doc.permission === 'readonly' ? '🔒 只读模式' : '✏️ 编辑模式'}</span>
+      </div>
+      <div class="editor-container">
+        <div class="editor-toolbar">
+          <div class="online-users" id="onlineUsers">
+            <span class="user-badge">👤 ${user.username}</span>
+          </div>
+          <button class="btn-primary" id="saveBtn">保存</button>
+        </div>
+        <textarea id="editor" style="width: 100%; min-height: 400px; padding: 10px; font-family: monospace;">${doc.content || ''}</textarea>
+        <div class="editor-footer">
+          <span>最后编辑: ${new Date(doc.updatedAt).toLocaleString()}</span>
+        </div>
+      </div>
+    `;
+
+    const editor = document.getElementById('editor');
+    
+    // 实时同步
+    let typingTimeout;
+    let saveTimeout;
+    
+    editor.addEventListener('input', () => {
+      clearTimeout(typingTimeout);
+      clearTimeout(saveTimeout);
+      wsService.sendTyping(documentId, user.username, true);
+      
+      typingTimeout = setTimeout(() => {
+        wsService.sendTyping(documentId, user.username, false);
+      }, 1000);
+
+      // 自动保存
+      saveTimeout = setTimeout(async () => {
+        const content = editor.value;
+        try {
+          await apiService.updateDocument(documentId, content);
+        } catch (error) {
+          console.error('自动保存失败:', error);
+        }
+      }, 2000);
+    });
+
+    document.getElementById('saveBtn').addEventListener('click', async () => {
+      try {
+        const content = editor.value;
+        await apiService.updateDocument(documentId, content);
+        alert('保存成功！');
+      } catch (error) {
+        alert('保存失败: ' + error.message);
+      }
+    });
+
+    // 监听文档更新
+    wsService.on('document_update', (data) => {
+      if (data.documentId === documentId && data.userId !== user.id) {
+        const cursorPos = editor.selectionStart;
+        editor.value = data.content;
+        editor.setSelectionRange(cursorPos, cursorPos);
+      }
+    });
+
+    // 监听打字状态
+    wsService.on('typing', (data) => {
+      if (data.documentId === documentId && data.userId !== user.id) {
+        const onlineUsers = document.getElementById('onlineUsers');
+        if (data.isTyping) {
+          onlineUsers.innerHTML += `<span class="user-badge typing" data-user="${data.userId}">✏️ ${data.username}</span>`;
+        } else {
+          const badge = onlineUsers.querySelector(`[data-user="${data.userId}"]`);
+          if (badge) badge.remove();
+        }
+      }
+    });
+
+    document.getElementById('backBtn').addEventListener('click', () => {
+      renderDocumentsView(container);
+    });
+  }
+
+  async function renderFilesView(container) {
+    if (!currentGroup) {
+      container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
+      return;
+    }
+
+    try {
+      const result = await apiService.getGroupFiles(currentGroup._id);
+      
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>文件管理 - ${currentGroup.name}</h2>
+          <button class="btn-primary" id="uploadFileBtn">📤 上传文件</button>
+        </div>
+        <div class="files-list" id="filesList"></div>
+        
+        <!-- 文件上传模态框 -->
+        <div class="modal hidden" id="uploadFileModal">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3>上传文件</h3>
+              <button class="modal-close" id="closeUploadModal">&times;</button>
+            </div>
+            <form id="uploadFileForm">
+              <div class="form-group">
+                <label>选择文件</label>
+                <input type="file" id="fileInput" required>
+                <small>支持图片、PDF、Word、Excel等，最大10MB</small>
+              </div>
+              <div class="form-group">
+                <label>描述（可选）</label>
+                <textarea id="fileDescription" rows="3" placeholder="文件描述..."></textarea>
+              </div>
+              <div class="form-actions">
+                <button type="button" class="btn-secondary" id="cancelUpload">取消</button>
+                <button type="submit" class="btn-primary">上传</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      `;
+
+      const filesList = document.getElementById('filesList');
+      
+      if (!result.files || result.files.length === 0) {
+        filesList.innerHTML = '<div class="empty-state">暂无文件</div>';
+      } else {
+        result.files.forEach(file => {
+          const fileCard = document.createElement('div');
+          fileCard.className = 'file-card';
+          
+          const fileIcon = getFileIcon(file.mimetype);
+          const fileSize = formatFileSize(file.size);
+          
+          fileCard.innerHTML = `
+            <div class="file-icon">${fileIcon}</div>
+            <div class="file-info">
+              <h4>${file.originalName}</h4>
+              <div class="file-meta">
+                <span>上传者: ${file.uploader.username}</span>
+                <span>大小: ${fileSize}</span>
+                <span>时间: ${new Date(file.createdAt).toLocaleString()}</span>
+              </div>
+              ${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-danger" data-id="${file._id}" data-action="delete-file">删除</button>
+            </div>
+          `;
+          filesList.appendChild(fileCard);
+        });
+
+        // 删除文件事件
+        document.querySelectorAll('[data-action="delete-file"]').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            if (confirm('确定要删除这个文件吗？')) {
+              try {
+                await apiService.deleteFile(btn.dataset.id);
+                alert('文件删除成功！');
+                await renderFilesView(container);
+              } catch (error) {
+                alert('删除失败: ' + error.message);
+              }
+            }
+          });
+        });
+      }
+
+      // 文件上传功能
+      document.getElementById('uploadFileBtn').addEventListener('click', () => {
+        document.getElementById('uploadFileModal').classList.remove('hidden');
+      });
+
+      document.getElementById('closeUploadModal').addEventListener('click', () => {
+        document.getElementById('uploadFileModal').classList.add('hidden');
+        document.getElementById('uploadFileForm').reset();
+      });
+
+      document.getElementById('cancelUpload').addEventListener('click', () => {
+        document.getElementById('uploadFileModal').classList.add('hidden');
+        document.getElementById('uploadFileForm').reset();
+      });
+
+      document.getElementById('uploadFileForm').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const fileInput = document.getElementById('fileInput');
+        const description = document.getElementById('fileDescription').value;
+
+        if (!fileInput.files[0]) {
+          alert('请选择文件');
+          return;
+        }
+
+        try {
+          await apiService.uploadFile(currentGroup._id, fileInput.files[0], description);
+          alert('文件上传成功！');
+          document.getElementById('uploadFileModal').classList.add('hidden');
+          document.getElementById('uploadFileForm').reset();
+          await renderFilesView(container);
+        } 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>
+      `;
+    }
+  }
+
+  function getFileIcon(mimetype) {
+    if (mimetype.startsWith('image/')) return '🖼️';
+    if (mimetype === 'application/pdf') return '📕';
+    if (mimetype.includes('word') || mimetype.includes('document')) return '📘';
+    if (mimetype.includes('excel') || mimetype.includes('spreadsheet')) return '📗';
+    if (mimetype.includes('zip') || mimetype.includes('compressed')) return '📦';
+    return '📄';
+  }
+
+  function formatFileSize(bytes) {
+    if (bytes === 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];
+  }
+
+  async function renderChatView(container) {
+    if (!currentGroup) {
+      container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
+      return;
+    }
+
+    const groupResult = await apiService.getGroup(currentGroup._id);
+    let group = groupResult.group;
+
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>群聊 - ${currentGroup.name}</h2>
+        <div style="display: flex; gap: 10px;">
+          <button class="btn-secondary" id="muteAllBtn">全体禁言</button>
+          <button class="btn-secondary" id="manageMuteBtn">个人禁言</button>
+          <button class="btn-danger" id="clearChatBtn" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; border: none;">🗑️ 清除记录</button>
+          <button class="btn-secondary" id="openAIBtn">🤖 AI助手</button>
+          <button class="btn-secondary" id="openWhiteboardBtn">🎨 协作白板</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="输入消息...">
+          <button class="btn-primary" id="sendBtn">发送</button>
+        </div>
+        <emoji-picker id="emojiPicker" class="hidden"></emoji-picker>
+      </div>
+      <div id="manageMuteModal" class="modal hidden">
+        <div class="modal-content">
+          <h3>个人禁言</h3>
+          <div id="membersList" style="max-height: 400px; overflow-y: auto;"></div>
+          <button type="button" class="btn-secondary" id="closeMuteModal">关闭</button>
+        </div>
+      </div>
+      
+      <!-- AI助手模态框 -->
+      <div id="aiModal" class="modal hidden">
+        <div class="modal-content" style="max-width: 950px; height: 88vh; display: flex; flex-direction: column; background: var(--bg-card); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3);">
+          
+          <!-- 头部 -->
+          <div class="modal-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 24px 28px; position: relative; overflow: hidden;">
+            <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.1; background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px);"></div>
+            <div style="display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1;">
+              <div style="display: flex; align-items: center; gap: 18px;">
+                <div style="width: 56px; height: 56px; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 32px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">🤖</div>
+                <div>
+                  <h3 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.5px;">AI 智能助手</h3>
+                  <p style="margin: 6px 0 0 0; font-size: 14px; opacity: 0.9; font-weight: 400;">为您提供智能问答和协助服务 ✨</p>
+                </div>
+              </div>
+              <button class="modal-close" id="closeAIModal" style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: none; color: white; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 22px; transition: all 0.3s; display: flex; align-items: center; justify-content: center;" onmouseover="this.style.background='rgba(255,255,255,0.25)'" onmouseout="this.style.background='rgba(255,255,255,0.15)'">&times;</button>
+            </div>
+          </div>
+          
+          <div style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
+            
+            <!-- 快捷问题 -->
+            <div style="padding: 18px 24px; background: linear-gradient(to bottom, var(--bg-secondary), var(--bg-card)); border-bottom: 1px solid var(--border);">
+              <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
+                <span style="font-size: 16px;">💡</span>
+                <span style="font-size: 13px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">快捷问题</span>
+              </div>
+              <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                <button class="quick-question-btn" data-question="如何创建一个新文档？" style="padding: 8px 16px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.3s; color: var(--text-primary); font-weight: 500;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(99, 102, 241, 0.2)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">📄 如何创建文档？</button>
+                <button class="quick-question-btn" data-question="如何邀请成员加入群组？" style="padding: 8px 16px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.3s; color: var(--text-primary); font-weight: 500;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(99, 102, 241, 0.2)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">👥 如何邀请成员？</button>
+                <button class="quick-question-btn" data-question="如何使用工作流功能？" style="padding: 8px 16px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.3s; color: var(--text-primary); font-weight: 500;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(99, 102, 241, 0.2)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">⚙️ 工作流使用？</button>
+                <button class="quick-question-btn" data-question="如何备份数据？" style="padding: 8px 16px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.3s; color: var(--text-primary); font-weight: 500;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(99, 102, 241, 0.2)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">💾 如何备份？</button>
+              </div>
+            </div>
+            
+            <!-- 聊天区域 -->
+            <div class="ai-chat" id="aiChatMessages" style="flex: 1; overflow-y: auto; padding: 24px; background: var(--bg-dark); background-image: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 50%);">
+              <div class="ai-message ai" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 18px 22px; border-radius: 20px 20px 20px 6px; margin: 12px 0; max-width: 85%; box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);">
+                <div style="display: flex; align-items: start; gap: 14px;">
+                  <div style="font-size: 28px; line-height: 1;">🤖</div>
+                  <div style="flex: 1;">
+                    <p style="margin: 0 0 10px 0; font-weight: 700; font-size: 16px;">你好！我是AI智能助手</p>
+                    <p style="margin: 0 0 12px 0; opacity: 0.95; line-height: 1.7; font-size: 14px;">我可以帮助你：</p>
+                    <ul style="margin: 0; padding-left: 22px; opacity: 0.95; line-height: 2; font-size: 14px;">
+                      <li style="margin-bottom: 4px;">解答关于平台功能的问题</li>
+                      <li style="margin-bottom: 4px;">提供操作指导和建议</li>
+                      <li>帮助你更好地使用各项功能</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 输入区域 -->
+            <div class="ai-input-container" style="padding: 20px 24px 24px; border-top: 1px solid var(--border); background: linear-gradient(to top, var(--bg-secondary), var(--bg));">
+              <div style="display: flex; gap: 14px; align-items: end;">
+                <div style="flex: 1; position: relative;">
+                  <textarea id="aiInputText" placeholder="输入你的问题..." rows="1" style="width: 100%; padding: 14px 18px; border: 2px solid var(--border); border-radius: 14px; resize: none; font-size: 15px; transition: all 0.3s; max-height: 140px; background: var(--bg); box-shadow: 0 2px 8px rgba(0,0,0,0.05);" onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 4px 16px rgba(102, 126, 234, 0.15)'" onblur="this.style.borderColor='var(--border)'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.05)'"></textarea>
+          </div>
+                <button class="btn-primary" id="aiSendBtnModal" style="padding: 14px 28px; border-radius: 14px; font-size: 15px; font-weight: 600; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); min-width: 100px;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(102, 126, 234, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(102, 126, 234, 0.3)'">
+                  <span style="display: flex; align-items: center; gap: 8px; justify-content: center;">
+                    <span>发送</span>
+                    <span style="font-size: 16px;">🚀</span>
+                  </span>
+                </button>
+        </div>
+              <div style="margin-top: 12px; font-size: 12px; color: var(--text-tertiary); text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px;">
+                <span style="opacity: 0.8;">💡</span>
+                <span>提示：按 <kbd style="padding: 2px 6px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 4px; font-size: 11px;">Enter</kbd> 发送，<kbd style="padding: 2px 6px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 4px; font-size: 11px;">Shift + Enter</kbd> 换行</span>
+      </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 协作白板模态框 -->
+      <div id="whiteboardModal" class="modal hidden">
+        <div class="modal-content" style="max-width: 95vw; max-height: 90vh; width: 1400px;">
+          <div class="modal-header">
+            <h3>🎨 协作白板</h3>
+            <div style="display: flex; gap: 10px;">
+              <button class="btn-secondary" id="clearCanvasBtn">清空画布</button>
+              <button class="btn-primary" id="saveCanvasBtn">保存白板</button>
+              <button class="btn-success" id="sendToGroupBtn" style="background: var(--success); color: white;">📤 发送到群聊</button>
+              <button class="modal-close" id="closeWhiteboardModal">&times;</button>
+            </div>
+          </div>
+          <div class="whiteboard-container" style="padding: 15px;">
+            <div class="whiteboard-toolbar" style="display: flex; gap: 10px; margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 8px;">
+              <button class="tool-btn active" data-tool="pen" style="padding: 8px 15px; border: 2px solid var(--primary); border-radius: 6px; background: var(--primary); color: white;">✏️ 画笔</button>
+              <button class="tool-btn" data-tool="eraser" style="padding: 8px 15px; border: 2px solid var(--border); border-radius: 6px; background: transparent;">🧹 橡皮擦</button>
+              <input type="color" id="colorPickerCanvas" value="#000000" title="颜色" style="width: 50px; height: 40px; border: none; border-radius: 6px; cursor: pointer;">
+              <input type="range" id="brushSizeCanvas" min="1" max="20" value="3" title="画笔大小" style="width: 150px;">
+              <span id="brushSizeLabel" style="padding: 8px 15px;">大小: 3</span>
+            </div>
+            <canvas id="whiteboardCanvas" width="1300" height="600" style="border: 2px solid var(--border); background: white; cursor: crosshair; border-radius: 8px; display: block;"></canvas>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const messagesDiv = document.getElementById('messages');
+    const messageInput = document.getElementById('messageInput');
+    const sendBtn = document.getElementById('sendBtn');
+    const emojiBtn = document.getElementById('emojiBtn');
+    const emojiPicker = document.getElementById('emojiPicker');
+    let mutedUsers = new Set((group.mutedUsers || []).map(String));
+    let isMutedAll = Boolean(group.mutedAll);
+
+    // 表情包功能
+    emojiBtn.addEventListener('click', () => {
+      emojiPicker.classList.toggle('hidden');
+    });
+
+    emojiPicker.addEventListener('emoji-click', (event) => {
+      messageInput.value += event.detail.unicode;
+      messageInput.focus();
+      emojiPicker.classList.add('hidden');
+    });
+
+    // 点击外部关闭表情选择器
+    document.addEventListener('click', (e) => {
+      if (!emojiBtn.contains(e.target) && !emojiPicker.contains(e.target)) {
+        emojiPicker.classList.add('hidden');
+      }
+    });
+
+    // 消息通知系统
+    function showNotification(title, body, icon = '💬') {
+      if ('Notification' in window && Notification.permission === 'granted') {
+        new Notification(title, {
+          body: body,
+          icon: '/icon.png',
+          badge: '/icon.png',
+          tag: 'chat-message'
+        });
+      }
+    }
+
+    // 请求通知权限
+    if ('Notification' in window && Notification.permission === 'default') {
+      Notification.requestPermission();
+    }
+
+    // 加载历史消息
+    try {
+      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' : ''}`;
+          
+          // 检查是否是白板作品消息
+          let messageContent = msg.content;
+          if (msg.content.startsWith('[白板作品]')) {
+            const imageUrl = msg.content.replace('[白板作品]', '').trim();
+            console.log('白板作品URL:', imageUrl.substring(0, 100)); // 调试：打印URL前100个字符
+            messageContent = `
+              <div style="margin-bottom: 8px; font-weight: 600; color: var(--primary);">🎨 白板作品</div>
+              <img src="${imageUrl}" alt="白板作品" style="max-width: 400px; max-height: 300px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; transition: transform 0.2s;" onclick="window.open('${imageUrl}', '_blank')" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
+              <div style="margin-top: 8px; font-size: 12px; color: var(--text-tertiary);">点击查看大图</div>
+            `;
+          }
+          
+          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">${messageContent}</div>
+          `;
+          messagesDiv.appendChild(messageEl);
+        });
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      }
+    } catch (err) {
+      console.error('加载历史消息失败:', err);
+    }
+
+    const refreshMuteButtons = () => {
+      const btn = document.getElementById('muteAllBtn');
+      btn.textContent = isMutedAll ? '取消全体禁言' : '全体禁言';
+      btn.style.background = isMutedAll ? 'var(--danger)' : '';
+    };
+    refreshMuteButtons();
+
+    // 全体禁言（服务端生效）
+
+    // 清除聊天记录
+    document.getElementById('clearChatBtn').addEventListener('click', async () => {
+      const confirmText = '⚠️ 警告：此操作将永久删除该群组的所有聊天记录！\n\n确定要清除吗？';
+      
+      if (!confirm(confirmText)) {
+        return;
+      }
+      
+      // 二次确认
+      const doubleConfirm = prompt('请输入群组名称以确认删除：\n\n群组名称：' + currentGroup.name);
+      
+      if (doubleConfirm !== currentGroup.name) {
+        alert('❌ 群组名称不匹配，操作已取消');
+        return;
+      }
+      
+      try {
+        const btn = document.getElementById('clearChatBtn');
+        const originalText = btn.innerHTML;
+        btn.innerHTML = '⏳ 清除中...';
+        btn.disabled = true;
+        
+        const token = localStorage.getItem('token');
+        const response = await fetch(`http://localhost:8765/api/messages/group/${currentGroup._id}/clear`, {
+          method: 'DELETE',
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json'
+          }
+        });
+        
+        if (!response.ok) {
+          const error = await response.json();
+          throw new Error(error.message || '清除失败');
+        }
+        
+        const result = await response.json();
+        
+        // 清空消息显示
+        messagesDiv.innerHTML = '<div class="empty-state" style="padding: 40px; text-align: center; color: var(--text-secondary);">✨ 聊天记录已清空</div>';
+        
+        alert(`✅ 成功清除 ${result.deletedCount || 0} 条聊天记录！`);
+        
+        btn.innerHTML = originalText;
+        btn.disabled = false;
+        
+      } catch (error) {
+        console.error('清除聊天记录失败:', error);
+        alert('❌ 清除失败: ' + error.message);
+        
+        const btn = document.getElementById('clearChatBtn');
+        btn.innerHTML = '🗑️ 清除记录';
+        btn.disabled = false;
+      }
+    });
+
+    document.getElementById('muteAllBtn').addEventListener('click', async () => {
+      try {
+        const next = !isMutedAll;
+        const res = await apiService.setMuteAll(currentGroup._id, next);
+        isMutedAll = Boolean(res.mutedAll);
+        refreshMuteButtons();
+
+        const notification = document.createElement('div');
+        notification.className = 'notification';
+        notification.textContent = isMutedAll ? '已开启全体禁言（成员无法发言）' : '已取消全体禁言';
+        messagesDiv.appendChild(notification);
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      } catch (e) {
+        alert('设置失败: ' + e.message);
+      }
+    });
+
+    // 个人禁言（服务端生效）
+    document.getElementById('manageMuteBtn').addEventListener('click', async () => {
+      // 重新拉取最新 group（避免成员变动不同步）
+      const latest = await apiService.getGroup(currentGroup._id);
+      group = latest.group;
+      mutedUsers = new Set((group.mutedUsers || []).map(String));
+
+      const membersList = document.getElementById('membersList');
+      membersList.innerHTML = group.members
+        .filter(m => m._id.toString() !== currentUserId)
+        .map(member => {
+          const isMuted = mutedUsers.has(member._id.toString());
+          return `
+            <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid var(--border);">
+              <div style="display: flex; align-items: center; gap: 10px;">
+                <div class="avatar" style="width: 35px; height: 35px;">${member.username[0].toUpperCase()}</div>
+                <span>${member.username}</span>
+              </div>
+              <button class="btn-secondary btn-sm" onclick="toggleMute('${member._id}')" id="mute-${member._id}">
+                ${isMuted ? '取消禁言' : '禁言'}
+              </button>
+            </div>
+          `;
+        }).join('');
+      document.getElementById('manageMuteModal').classList.remove('hidden');
+    });
+
+    document.getElementById('closeMuteModal').addEventListener('click', () => {
+      document.getElementById('manageMuteModal').classList.add('hidden');
+    });
+
+    // 切换个人禁言状态（服务端生效）
+    window.toggleMute = async (userId) => {
+      try {
+        const nextMuted = !mutedUsers.has(userId);
+        const res = await apiService.setUserMute(currentGroup._id, userId, nextMuted);
+        mutedUsers = new Set((res.mutedUsers || []).map(String));
+
+        const btn = document.getElementById(`mute-${userId}`);
+        btn.textContent = mutedUsers.has(userId) ? '取消禁言' : '禁言';
+        btn.style.background = mutedUsers.has(userId) ? 'var(--danger)' : '';
+      } catch (e) {
+        alert('操作失败: ' + e.message);
+      }
+    };
+
+    // 监听消息
+    wsService.on('chat_message', (data) => {
+      if (data.groupId === currentGroup._id) {
+        const messageEl = document.createElement('div');
+        messageEl.className = `message ${data.userId === currentUserId ? 'own' : ''}`;
+        
+        // 检查是否是白板作品消息
+        let messageContent = data.content;
+        if (data.content.startsWith('[白板作品]')) {
+          const imageUrl = data.content.replace('[白板作品]', '').trim();
+          console.log('实时白板作品URL:', imageUrl.substring(0, 100)); // 调试：打印URL前100个字符
+          messageContent = `
+            <div style="margin-bottom: 8px; font-weight: 600; color: var(--primary);">🎨 白板作品</div>
+            <img src="${imageUrl}" alt="白板作品" style="max-width: 400px; max-height: 300px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; transition: transform 0.2s;" onclick="window.open('${imageUrl}', '_blank')" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
+            <div style="margin-top: 8px; font-size: 12px; color: var(--text-tertiary);">点击查看大图</div>
+          `;
+        }
+        
+        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">${messageContent}</div>
+        `;
+        messagesDiv.appendChild(messageEl);
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      }
+    });
+
+    // 发送被拦截提示（来自服务端）
+    wsService.on('chat_blocked', (data) => {
+      if (data.groupId === currentGroup._id) {
+        const notification = document.createElement('div');
+        notification.className = 'notification';
+        notification.textContent = data.message || '消息发送失败';
+        messagesDiv.appendChild(notification);
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      }
+    });
+
+    // 发送消息
+    const sendMessage = () => {
+      const content = messageInput.value.trim();
+      if (content) {
+        wsService.sendChatMessage(currentGroup._id, user.username, content);
+        messageInput.value = '';
+      }
+    };
+
+    sendBtn.addEventListener('click', sendMessage);
+    messageInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') sendMessage();
+    });
+
+    // AI助手按钮
+    document.getElementById('openAIBtn').addEventListener('click', () => {
+      document.getElementById('aiModal').classList.remove('hidden');
+    });
+
+    document.getElementById('closeAIModal').addEventListener('click', () => {
+      document.getElementById('aiModal').classList.add('hidden');
+    });
+
+    // 快捷问题按钮
+    document.querySelectorAll('.quick-question-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.getElementById('aiInputText').value = btn.dataset.question;
+        document.getElementById('aiSendBtnModal').click();
+      });
+      btn.addEventListener('mouseenter', (e) => {
+        e.target.style.background = 'var(--primary)';
+        e.target.style.color = 'white';
+        e.target.style.transform = 'translateY(-2px)';
+      });
+      btn.addEventListener('mouseleave', (e) => {
+        e.target.style.background = 'var(--bg)';
+        e.target.style.color = 'inherit';
+        e.target.style.transform = 'translateY(0)';
+      });
+    });
+
+    // AI输入框自动调整高度
+    const aiInput = document.getElementById('aiInputText');
+    aiInput.addEventListener('input', () => {
+      aiInput.style.height = 'auto';
+      aiInput.style.height = aiInput.scrollHeight + 'px';
+    });
+
+    // 支持 Enter 发送，Shift+Enter 换行
+    aiInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        document.getElementById('aiSendBtnModal').click();
+      }
+    });
+
+    // 输入框聚焦效果
+    aiInput.addEventListener('focus', () => {
+      aiInput.style.borderColor = 'var(--primary)';
+    });
+    aiInput.addEventListener('blur', () => {
+      aiInput.style.borderColor = 'var(--border)';
+    });
+
+    // 发送按钮悬停效果
+    const aiSendBtn = document.getElementById('aiSendBtnModal');
+    aiSendBtn.addEventListener('mouseenter', () => {
+      aiSendBtn.style.transform = 'scale(1.05)';
+    });
+    aiSendBtn.addEventListener('mouseleave', () => {
+      aiSendBtn.style.transform = 'scale(1)';
+    });
+
+    document.getElementById('aiSendBtnModal').addEventListener('click', async () => {
+      const input = document.getElementById('aiInputText');
+      const question = input.value.trim();
+      if (!question) return;
+
+        const chatMessages = document.getElementById('aiChatMessages');
+        
+      // 显示用户消息
+        const userMsg = document.createElement('div');
+        userMsg.className = 'ai-message user';
+        userMsg.style.cssText = 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 18px; border-radius: 18px 18px 4px 18px; margin: 10px 0; max-width: 75%; margin-left: auto; text-align: right; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); animation: slideInRight 0.3s ease;';
+      userMsg.textContent = question;
+        chatMessages.appendChild(userMsg);
+      input.value = '';
+
+      // 显示加载中
+      const loadingMsg = document.createElement('div');
+      loadingMsg.className = 'ai-message ai loading';
+      loadingMsg.style.cssText = 'background: var(--bg-tertiary); padding: 12px 16px; border-radius: 12px; margin: 10px 0; max-width: 70%;';
+      loadingMsg.textContent = '思考中...';
+      chatMessages.appendChild(loadingMsg);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        
+        try {
+          const token = localStorage.getItem('token');
+          const response = await fetch('http://localhost:8765/api/ai/ask', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${token}`
+            },
+          body: JSON.stringify({ question, groupId: currentGroup?._id })
+          });
+        const result = await response.json();
+          
+        loadingMsg.remove();
+          const aiMsg = document.createElement('div');
+          aiMsg.className = 'ai-message ai';
+          aiMsg.style.cssText = 'background: var(--bg-secondary); padding: 15px 18px; border-radius: 18px 18px 18px 4px; margin: 10px 0; max-width: 75%; border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,0.05); animation: slideInLeft 0.3s ease; line-height: 1.6;';
+        aiMsg.textContent = result.answer || '抱歉，我无法回答这个问题。';
+          chatMessages.appendChild(aiMsg);
+          chatMessages.scrollTop = chatMessages.scrollHeight;
+        } catch (error) {
+          loadingMsg.remove();
+          const errorMsg = document.createElement('div');
+          errorMsg.className = 'ai-message ai error';
+          errorMsg.style.cssText = 'background: var(--danger); color: white; padding: 12px 16px; border-radius: 12px; margin: 10px 0; max-width: 70%;';
+          errorMsg.textContent = '抱歉，发生了错误: ' + error.message;
+          chatMessages.appendChild(errorMsg);
+          chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+    });
+
+    // 协作白板按钮
+    document.getElementById('openWhiteboardBtn').addEventListener('click', () => {
+      document.getElementById('whiteboardModal').classList.remove('hidden');
+      initWhiteboard();
+    });
+
+    document.getElementById('closeWhiteboardModal').addEventListener('click', () => {
+      document.getElementById('whiteboardModal').classList.add('hidden');
+    });
+
+    function initWhiteboard() {
+      const canvas = document.getElementById('whiteboardCanvas');
+      if (!canvas) return;
+      
+      const ctx = canvas.getContext('2d');
+      let isDrawing = false;
+      let currentTool = 'pen';
+      let currentColor = '#000000';
+      let brushSize = 3;
+      let lastX = 0;
+      let lastY = 0;
+
+      // 工具切换
+      document.querySelectorAll('.tool-btn').forEach(btn => {
+        btn.onclick = () => {
+          document.querySelectorAll('.tool-btn').forEach(b => {
+            b.style.background = 'transparent';
+            b.style.borderColor = 'var(--border)';
+            b.style.color = 'inherit';
+            b.classList.remove('active');
+          });
+          btn.style.background = 'var(--primary)';
+          btn.style.borderColor = 'var(--primary)';
+          btn.style.color = 'white';
+          btn.classList.add('active');
+          currentTool = btn.dataset.tool;
+        };
+      });
+
+      const colorPicker = document.getElementById('colorPickerCanvas');
+      if (colorPicker) {
+        colorPicker.onchange = (e) => {
+          currentColor = e.target.value;
+        };
+      }
+
+      const brushSizeInput = document.getElementById('brushSizeCanvas');
+      const brushSizeLabel = document.getElementById('brushSizeLabel');
+      if (brushSizeInput && brushSizeLabel) {
+        brushSizeInput.oninput = (e) => {
+          brushSize = e.target.value;
+          brushSizeLabel.textContent = `大小: ${brushSize}`;
+        };
+      }
+
+      // 绘画功能
+      canvas.onmousedown = (e) => {
+        isDrawing = true;
+        const rect = canvas.getBoundingClientRect();
+        lastX = e.clientX - rect.left;
+        lastY = e.clientY - rect.top;
+      };
+
+      canvas.onmousemove = (e) => {
+        if (!isDrawing) return;
+        
+        const rect = canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        ctx.beginPath();
+        ctx.moveTo(lastX, lastY);
+        ctx.lineTo(x, y);
+        ctx.strokeStyle = currentTool === 'eraser' ? '#ffffff' : currentColor;
+        ctx.lineWidth = brushSize;
+        ctx.lineCap = 'round';
+        ctx.stroke();
+
+        lastX = x;
+        lastY = y;
+      };
+
+      canvas.onmouseup = () => {
+        isDrawing = false;
+      };
+
+      canvas.onmouseleave = () => {
+        isDrawing = false;
+      };
+
+      // 清空画布
+      document.getElementById('clearCanvasBtn').onclick = () => {
+        if (confirm('确定要清空画布吗？')) {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+      };
+
+      // 保存白板
+      document.getElementById('saveCanvasBtn').onclick = () => {
+        const dataURL = canvas.toDataURL('image/png');
+        const link = document.createElement('a');
+        link.download = `whiteboard-${Date.now()}.png`;
+        link.href = dataURL;
+        link.click();
+        alert('白板已保存！');
+      };
+
+      // 发送到群聊
+      document.getElementById('sendToGroupBtn').onclick = async () => {
+        try {
+          const dataURL = canvas.toDataURL('image/png');
+          const blob = await fetch(dataURL).then(r => r.blob());
+          
+          // 创建 FormData 上传图片
+          const formData = new FormData();
+          formData.append('file', blob, `whiteboard-${Date.now()}.png`);
+          formData.append('groupId', currentGroup._id);
+          formData.append('description', '协作白板作品');
+          
+          const token = localStorage.getItem('token');
+          const response = await fetch('http://localhost:8765/api/files/upload', {
+            method: 'POST',
+            headers: {
+              'Authorization': `Bearer ${token}`
+            },
+            body: formData
+          });
+          
+          if (response.ok) {
+            const result = await response.json();
+            const fileId = result.file._id;
+            const fileUrl = `http://localhost:8765/api/files/${fileId}/download?token=${token}`;
+            
+            // 发送包含图片的消息到群聊
+            wsService.sendChatMessage(currentGroup._id, user.username, `[白板作品]${fileUrl}`);
+            alert('白板作品已发送到群聊！');
+            document.getElementById('whiteboardModal').classList.add('hidden');
+          } else {
+            throw new Error('上传失败');
+          }
+        } catch (error) {
+          console.error('发送白板作品错误:', error);
+          alert('发送失败: ' + error.message);
+        }
+      };
+    }
+  }
+
+  async function renderCallView(container) {
+    if (!currentGroup) {
+      container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
+      return;
+    }
+
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>随机点名 - ${currentGroup.name}</h2>
+      </div>
+      <div class="call-panel">
+        <div class="call-controls">
+          <label>点名人数:</label>
+          <input type="number" id="callCount" value="1" min="1" max="10">
+          <button class="btn-primary btn-large" id="randomCallBtn">🎲 开始点名</button>
+        </div>
+        <div id="callResult" class="call-result"></div>
+      </div>
+    `;
+
+    document.getElementById('randomCallBtn').addEventListener('click', async () => {
+      const count = parseInt(document.getElementById('callCount').value);
+      try {
+        const result = await apiService.randomCall(currentGroup._id, count);
+        const callResult = document.getElementById('callResult');
+        callResult.innerHTML = `
+          <h3>点名结果:</h3>
+          <div class="called-members">
+            ${result.calledMembers.map(member => `
+              <div class="member-card">
+                <div class="avatar">${member.username[0].toUpperCase()}</div>
+                <div class="member-name">${member.username}</div>
+              </div>
+            `).join('')}
+          </div>
+        `;
+      } catch (error) {
+        alert('点名失败: ' + error.message);
+      }
+    });
+  }
+
+  async function renderAuditView(container) {
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>操作记录</h2>
+        <div style="display: flex; gap: 10px;">
+          <select id="auditGroupFilter" class="form-select">
+            <option value="">全部群组</option>
+          </select>
+          <select id="auditActionFilter" class="form-select">
+            <option value="">全部操作</option>
+            <option value="document_create">文档创建</option>
+            <option value="document_update">文档更新</option>
+            <option value="document_delete">文档删除</option>
+            <option value="content_edit">内容编辑</option>
+            <option value="title_edit">标题编辑</option>
+            <option value="document_permission_change">权限修改</option>
+          </select>
+          <input type="date" id="startDate" class="form-input" title="开始日期">
+          <input type="date" id="endDate" class="form-input" title="结束日期">
+          <button class="btn-primary" id="applyFilters">筛选</button>
+          <button class="btn-secondary" id="exportLogs">导出</button>
+        </div>
+      </div>
+      
+      <div class="audit-stats" id="auditStats">
+        <div class="stat-card">
+          <h3>今日操作</h3>
+          <div class="stat-number" id="todayCount">-</div>
+        </div>
+        <div class="stat-card">
+          <h3>本周操作</h3>
+          <div class="stat-number" id="weekCount">-</div>
+        </div>
+        <div class="stat-card">
+          <h3>活跃用户</h3>
+          <div class="stat-number" id="activeUsers">-</div>
+        </div>
+      </div>
+
+      <div class="audit-logs" id="auditLogs">
+        <div class="loading">加载中...</div>
+      </div>
+
+      <div class="pagination" id="auditPagination" style="display: none;">
+        <button class="btn-secondary" id="prevPage">上一页</button>
+        <span id="pageInfo">第 1 页，共 1 页</span>
+        <button class="btn-secondary" id="nextPage">下一页</button>
+      </div>
+
+      <div id="auditDetailModal" class="modal hidden">
+        <div class="modal-content" style="max-width: 850px; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3);">
+          <div class="modal-header" style="background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); color: white; padding: 24px 28px; position: relative; overflow: hidden;">
+            <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\"><defs><pattern id=\"grid\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\"><path d=\"M 20 0 L 0 0 0 20\" fill=\"none\" stroke=\"rgba(255,255,255,0.05)\" stroke-width=\"1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grid)\" /></svg>'); opacity: 0.3;"></div>
+            <div style="display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1;">
+              <div style="display: flex; align-items: center; gap: 16px;">
+                <div style="width: 48px; height: 48px; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">📋</div>
+                <h3 style="margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.5px;">操作详情</h3>
+              </div>
+              <button class="close-btn" id="closeAuditDetail" style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: none; color: white; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 24px; transition: all 0.3s; display: flex; align-items: center; justify-content: center;" onmouseover="this.style.background='rgba(255,255,255,0.25)'" onmouseout="this.style.background='rgba(255,255,255,0.15)'">&times;</button>
+            </div>
+          </div>
+          <div class="modal-body" id="auditDetailContent">
+          </div>
+        </div>
+      </div>
+    `;
+
+    let currentPage = 1;
+    let currentFilters = {};
+    
+    // 加载群组列表到筛选器
+    try {
+      const groupsResult = await apiService.getGroups();
+      const groupFilter = document.getElementById('auditGroupFilter');
+      groupsResult.groups.forEach(group => {
+        const option = document.createElement('option');
+        option.value = group._id;
+        option.textContent = group.name;
+        groupFilter.appendChild(option);
+      });
+    } catch (error) {
+      console.error('加载群组列表失败:', error);
+    }
+
+    async function loadAuditLogs(page = 1, filters = {}) {
+      try {
+        const auditLogsDiv = document.getElementById('auditLogs');
+        auditLogsDiv.innerHTML = '<div class="loading">加载中...</div>';
+
+        const options = { page, limit: 20 };
+        const result = await apiService.getAuditLogs(filters, options);
+        
+        if (result.logs.length === 0) {
+          auditLogsDiv.innerHTML = '<div class="empty-state">暂无操作记录</div>';
+          document.getElementById('auditPagination').style.display = 'none';
+          return;
+        }
+
+        auditLogsDiv.innerHTML = `
+          <div class="audit-table">
+            <div class="audit-header">
+              <div>时间</div>
+              <div>用户</div>
+              <div>操作</div>
+              <div>资源</div>
+              <div>详情</div>
+            </div>
+            ${result.logs.map(log => `
+              <div class="audit-row" onclick="showAuditDetail('${log._id}')">
+                <div class="audit-time">${new Date(log.createdAt).toLocaleString()}</div>
+                <div class="audit-user">
+                  <div class="avatar">${log.user?.username?.[0]?.toUpperCase() || '?'}</div>
+                  <span>${log.user?.username || '未知用户'}</span>
+                </div>
+                <div class="audit-action">
+                  <span class="action-badge action-${log.action}">${getActionText(log.action)}</span>
+                </div>
+                <div class="audit-resource">${log.resourceTitle || log.resourceId}</div>
+                <div class="audit-description">${log.details?.description || '-'}</div>
+              </div>
+            `).join('')}
+          </div>
+        `;
+
+        // 更新分页
+        const pagination = document.getElementById('auditPagination');
+        const pageInfo = document.getElementById('pageInfo');
+        pageInfo.textContent = `第 ${result.pagination.page} 页，共 ${result.pagination.pages} 页`;
+        
+        document.getElementById('prevPage').disabled = result.pagination.page <= 1;
+        document.getElementById('nextPage').disabled = result.pagination.page >= result.pagination.pages;
+        
+        pagination.style.display = result.pagination.pages > 1 ? 'flex' : 'none';
+
+      } catch (error) {
+        console.error('加载审计日志失败:', error);
+        document.getElementById('auditLogs').innerHTML = 
+          '<div class="error-state">加载失败: ' + error.message + '</div>';
+      }
+    }
+
+    async function loadStats() {
+      try {
+        const today = new Date();
+        const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+        
+        // 获取今日统计
+        const todayStats = await apiService.getAuditSummary({
+          startDate: today.toISOString().split('T')[0],
+          endDate: today.toISOString().split('T')[0]
+        });
+        
+        // 获取本周统计
+        const weekStats = await apiService.getAuditSummary({
+          startDate: weekAgo.toISOString().split('T')[0],
+          endDate: today.toISOString().split('T')[0]
+        });
+
+        document.getElementById('todayCount').textContent = todayStats.summary.totalLogs;
+        document.getElementById('weekCount').textContent = weekStats.summary.totalLogs;
+        document.getElementById('activeUsers').textContent = weekStats.summary.topUsers.length;
+
+      } catch (error) {
+        console.error('加载统计信息失败:', error);
+      }
+    }
+
+
+    // 格式化审计描述
+    function formatAuditDescription(log) {
+      const username = log.user?.username || '未知用户';
+      const action = getActionText(log.action);
+      const resourceTitle = log.resourceTitle || log.resourceId;
+      
+      let description = '<strong style="color: #6366f1;">' + username + '</strong> ';
+      
+      switch(log.action) {
+        case 'document_create':
+          description += '创建了文档 <strong>"' + resourceTitle + '"</strong>';
+          break;
+        case 'document_update':
+          description += '更新了文档 <strong>"' + resourceTitle + '"</strong>';
+          if (log.details?.field) {
+            description += ' 的 <strong>' + getFieldName(log.details.field) + '</strong>';
+          }
+          break;
+        case 'document_delete':
+          description += '删除了文档 <strong>"' + resourceTitle + '"</strong>';
+          break;
+        case 'content_edit':
+          description += '编辑了文档 <strong>"' + resourceTitle + '"</strong> 的内容';
+          if (log.changes) {
+            const insertions = log.changes.insertions?.reduce((sum, ins) => sum + ins.length, 0) || 0;
+            const deletions = log.changes.deletions?.reduce((sum, del) => sum + del.length, 0) || 0;
+            if (insertions > 0 || deletions > 0) {
+              description += ' (<span style="color: #10b981;">+' + insertions + '</span> / <span style="color: #ef4444;">-' + deletions + '</span> 字符)';
+            }
+          }
+          break;
+        case 'title_edit':
+          description += '修改了文档 <strong>"' + resourceTitle + '"</strong> 的标题';
+          if (log.details?.oldValue && log.details?.newValue) {
+            description += ' 从 <strong>"' + log.details.oldValue + '"</strong> 改为 <strong>"' + log.details.newValue + '"</strong>';
+          }
+          break;
+        case 'document_permission_change':
+          description += '修改了文档 <strong>"' + resourceTitle + '"</strong> 的权限设置';
+          break;
+        default:
+          description += '执行了 <strong>' + action + '</strong> 操作';
+      }
+      
+      return description;
+    }
+    
+    // 获取字段中文名称
+    function getFieldName(field) {
+      const fieldMap = {
+        'title': '标题',
+        'content': '内容',
+        'permissions': '权限',
+        'status': '状态',
+        'tags': '标签',
+        'category': '分类',
+        'description': '描述'
+      };
+      return fieldMap[field] || field;
+    }
+    
+    // 格式化值显示
+    function formatValue(value) {
+      if (value === null || value === undefined) {
+        return '<span style="color: var(--text-tertiary); font-style: italic;">空</span>';
+      }
+      
+      if (typeof value === 'object') {
+        return JSON.stringify(value, null, 2);
+      }
+      
+      const strValue = String(value);
+      
+      // 如果内容太长，截断显示
+      if (strValue.length > 500) {
+        return strValue.substring(0, 500) + '... <span style="color: var(--text-tertiary); font-style: italic;">(内容过长，已截断)</span>';
+      }
+      
+      // HTML转义
+      return strValue.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    // 显示操作详情
+    window.showAuditDetail = async (logId) => {
+      try {
+        const token = localStorage.getItem('token');
+        const response = await fetch(`http://localhost:8765/api/audit/${logId}`, {
+          headers: { 'Authorization': `Bearer ${token}` }
+        });
+        const result = await response.json();
+        const log = result.log;
+        
+        const modal = document.getElementById('auditDetailModal');
+        const content = document.getElementById('auditDetailContent');
+        
+        // 获取操作类型颜色
+        const getActionColor = (action) => {
+          const colors = {
+            'create': '#10b981',
+            'update': '#f59e0b',
+            'delete': '#ef4444',
+            'login': '#6366f1',
+            'logout': '#8b5cf6'
+          };
+          return colors[action] || '#6366f1';
+        };
+        
+        content.innerHTML = `
+          <div class="audit-detail" style="padding: 24px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(168, 85, 247, 0.03) 100%);">
+            
+            <!-- 操作信息 -->
+            <div class="detail-section" style="margin-bottom: 18px; padding: 20px; background: var(--bg-secondary); border-radius: 12px; border-left: 4px solid ${getActionColor(log.action)}; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+              <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
+                <span style="font-size: 24px;">📋</span>
+                <h4 style="margin: 0; color: var(--text-primary); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">操作信息</h4>
+              </div>
+              <div style="display: grid; grid-template-columns: 140px 1fr; gap: 14px; font-size: 15px;">
+                <span style="color: var(--text-tertiary); font-weight: 500;">操作类型:</span>
+                <span style="display: inline-flex; align-items: center; gap: 8px;">
+                  <span style="display: inline-block; padding: 6px 14px; background: ${getActionColor(log.action)}; color: white; border-radius: 8px; font-weight: 600; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);">${getActionText(log.action)}</span>
+                </span>
+                <span style="color: var(--text-tertiary); font-weight: 500;">操作时间:</span>
+                <span style="font-weight: 600; color: var(--text-primary);">${new Date(log.createdAt).toLocaleString('zh-CN', { 
+                  year: 'numeric', 
+                  month: 'long', 
+                  day: 'numeric',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit'
+                })}</span>
+                <span style="color: var(--text-tertiary); font-weight: 500;">操作用户:</span>
+                <span style="display: flex; align-items: center; gap: 10px;">
+                  <div class="avatar" style="width: 32px; height: 32px; font-size: 14px; background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);">${log.user?.username?.[0]?.toUpperCase() || '?'}</div>
+                  <span style="font-weight: 600; color: var(--text-primary);">${log.user?.username || '未知用户'}</span>
+                </span>
+              </div>
+            </div>
+            
+            <!-- 资源信息 -->
+            <div class="detail-section" style="margin-bottom: 18px; padding: 20px; background: var(--bg-secondary); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+              <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
+                <span style="font-size: 24px;">📄</span>
+                <h4 style="margin: 0; color: var(--text-primary); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">资源信息</h4>
+              </div>
+              <div style="display: grid; grid-template-columns: 140px 1fr; gap: 14px; font-size: 15px;">
+                <span style="color: var(--text-tertiary); font-weight: 500;">资源类型:</span>
+                <span style="font-weight: 600; color: var(--text-primary);">${log.resourceType || '未知'}</span>
+                <span style="color: var(--text-tertiary); font-weight: 500;">资源ID:</span>
+                <span style="font-family: 'Courier New', monospace; font-size: 13px; padding: 6px 12px; background: var(--bg); border-radius: 6px; color: var(--text-primary); border: 1px solid var(--border);">${log.resourceId}</span>
+                <span style="color: var(--text-tertiary); font-weight: 500;">资源标题:</span>
+                <span style="font-weight: 600; color: var(--text-primary);">${log.resourceTitle || '<span style="color: var(--text-tertiary); font-style: italic;">无</span>'}</span>
+              </div>
+            </div>
+            
+            ${log.details ? `
+            <!-- 详细信息 -->
+            <div class="detail-section" style="margin-bottom: 18px; padding: 20px; background: var(--bg-secondary); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+              <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
+                <span style="font-size: 24px;">📝</span>
+                <h4 style="margin: 0; color: var(--text-primary); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">详细总结</h4>
+              </div>
+              <div style="font-size: 15px; line-height: 1.8; color: var(--text-primary); padding: 16px 20px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%); border-radius: 8px; border-left: 4px solid #6366f1;">
+                <div style="font-weight: 600; margin-bottom: 8px; font-size: 16px;" id="auditDescriptionText">
+                </div>
+              </div>
+              
+              <div id="auditDetailsSection" style="margin-top: 16px; padding: 16px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border);">
+                <h5 style="margin: 0 0 12px 0; font-size: 14px; color: var(--text-secondary); font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                  <span>ℹ️</span>
+                  <span>操作详情</span>
+                </h5>
+                <div id="auditDetailsContent" style="display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 14px;">
+                </div>
+              </div>
+              
+              <div id="auditChangesSection" style="margin-top: 16px; padding: 16px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); display: none;">
+                <h5 style="margin: 0 0 12px 0; font-size: 14px; color: var(--text-secondary); font-weight: 600; display: flex; align-items: center; gap: 8px;">
+                  <span>🔄</span>
+                  <span>文本变更统计</span>
+                </h5>
+                <div id="auditChangesContent" style="display: flex; gap: 20px; font-size: 14px;">
+                </div>
+              </div>
+            </div>
+
+            <!-- 请求信息 -->
+            <div class="detail-section" style="padding: 20px; background: var(--bg-secondary); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
+              <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
+                <span style="font-size: 24px;">🌐</span>
+                <h4 style="margin: 0; color: var(--text-primary); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">请求信息</h4>
+              </div>
+              <div style="display: grid; grid-template-columns: 140px 1fr; gap: 14px; font-size: 15px;">
+                <span style="color: var(--text-tertiary); font-weight: 500;">IP地址:</span>
+                <span style="font-family: 'Courier New', monospace; font-weight: 600; color: var(--text-primary);">${log.ipAddress || '<span style="color: var(--text-tertiary); font-style: italic;">未记录</span>'}</span>
+                <span style="color: var(--text-tertiary); font-weight: 500;">用户代理:</span>
+                <span style="font-size: 13px; word-break: break-all; color: var(--text-secondary); line-height: 1.6;">${log.userAgent || '<span style="color: var(--text-tertiary); font-style: italic;">未记录</span>'}</span>
+              </div>
+            </div>
+          </div>
+        `;
+        
+
+        // 填充详细描述
+        document.getElementById('auditDescriptionText').innerHTML = formatAuditDescription(log);
+        
+        // 填充操作详情
+        const detailsContent = document.getElementById('auditDetailsContent');
+        let detailsHTML = '';
+        
+        if (log.details) {
+          if (log.details.field) {
+            detailsHTML += '<span style="color: var(--text-tertiary); font-weight: 500;">修改字段:</span>';
+            detailsHTML += '<span style="font-weight: 600; color: var(--text-primary);">' + getFieldName(log.details.field) + '</span>';
+          }
+          
+          if (log.details.oldValue !== undefined && log.details.oldValue !== null) {
+            detailsHTML += '<span style="color: var(--text-tertiary); font-weight: 500;">原始值:</span>';
+            detailsHTML += '<div style="padding: 8px 12px; background: rgba(239, 68, 68, 0.1); border-radius: 6px; border-left: 3px solid #ef4444; font-family: \'Courier New\', monospace; font-size: 13px; word-break: break-all; max-height: 200px; overflow-y: auto;">' + formatValue(log.details.oldValue) + '</div>';
+          }
+          
+          if (log.details.newValue !== undefined && log.details.newValue !== null) {
+            detailsHTML += '<span style="color: var(--text-tertiary); font-weight: 500;">新值:</span>';
+            detailsHTML += '<div style="padding: 8px 12px; background: rgba(16, 185, 129, 0.1); border-radius: 6px; border-left: 3px solid #10b981; font-family: \'Courier New\', monospace; font-size: 13px; word-break: break-all; max-height: 200px; overflow-y: auto;">' + formatValue(log.details.newValue) + '</div>';
+          }
+        }
+        
+        if (detailsHTML) {
+          detailsContent.innerHTML = detailsHTML;
+          document.getElementById('auditDetailsSection').style.display = 'block';
+        } else {
+          document.getElementById('auditDetailsSection').style.display = 'none';
+        }
+        
+        // 填充变更统计
+        if (log.changes && (log.changes.insertions?.length > 0 || log.changes.deletions?.length > 0)) {
+          const changesContent = document.getElementById('auditChangesContent');
+          let changesHTML = '';
+          
+          if (log.changes.insertions && log.changes.insertions.length > 0) {
+            const insertCount = log.changes.insertions.reduce((sum, ins) => sum + ins.length, 0);
+            changesHTML += '<div style="flex: 1; padding: 12px; background: rgba(16, 185, 129, 0.1); border-radius: 8px; border-left: 3px solid #10b981;">';
+            changesHTML += '<div style="font-weight: 600; color: #10b981; margin-bottom: 4px;">✅ 新增内容</div>';
+            changesHTML += '<div style="color: var(--text-secondary);">共 ' + insertCount + ' 个字符</div>';
+            changesHTML += '</div>';
+          }
+          
+          if (log.changes.deletions && log.changes.deletions.length > 0) {
+            const deleteCount = log.changes.deletions.reduce((sum, del) => sum + del.length, 0);
+            changesHTML += '<div style="flex: 1; padding: 12px; background: rgba(239, 68, 68, 0.1); border-radius: 8px; border-left: 3px solid #ef4444;">';
+            changesHTML += '<div style="font-weight: 600; color: #ef4444; margin-bottom: 4px;">❌ 删除内容</div>';
+            changesHTML += '<div style="color: var(--text-secondary);">共 ' + deleteCount + ' 个字符</div>';
+            changesHTML += '</div>';
+          }
+          
+          changesContent.innerHTML = changesHTML;
+          document.getElementById('auditChangesSection').style.display = 'block';
+        } else {
+          document.getElementById('auditChangesSection').style.display = 'none';
+        }
+        
+        modal.classList.remove('hidden');
+      } catch (error) {
+        alert('加载详情失败: ' + error.message);
+      }
+    };
+
+    // 事件监听
+    document.getElementById('applyFilters').addEventListener('click', () => {
+      currentFilters = {
+        groupId: document.getElementById('auditGroupFilter').value,
+        action: document.getElementById('auditActionFilter').value,
+        startDate: document.getElementById('startDate').value,
+        endDate: document.getElementById('endDate').value
+      };
+      
+      // 移除空值
+      Object.keys(currentFilters).forEach(key => {
+        if (!currentFilters[key]) {
+          delete currentFilters[key];
+        }
+      });
+      
+      currentPage = 1;
+      loadAuditLogs(currentPage, currentFilters);
+    });
+
+    document.getElementById('prevPage').addEventListener('click', () => {
+      if (currentPage > 1) {
+        currentPage--;
+        loadAuditLogs(currentPage, currentFilters);
+      }
+    });
+
+    document.getElementById('nextPage').addEventListener('click', () => {
+      currentPage++;
+      loadAuditLogs(currentPage, currentFilters);
+    });
+
+    document.getElementById('exportLogs').addEventListener('click', () => {
+      alert('导出功能开发中...');
+    });
+
+    document.getElementById('closeAuditDetail').addEventListener('click', () => {
+      document.getElementById('auditDetailModal').classList.add('hidden');
+    });
+
+    // 初始加载
+    loadStats();
+    loadAuditLogs();
+  }
+
+  async function renderSearchView(container) {
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>🔍 搜索</h2>
+      </div>
+      <div class="search-container">
+        <div class="search-box">
+          <input type="text" id="searchInput" placeholder="搜索消息、文档、任务...">
+          <button class="btn-primary" id="searchBtn">搜索</button>
+        </div>
+        <div class="search-filters">
+          <label>
+            <input type="checkbox" id="filterMessages" checked> 消息
+          </label>
+          <label>
+            <input type="checkbox" id="filterDocuments" checked> 文档
+          </label>
+          <label>
+            <input type="checkbox" id="filterTasks" checked> 任务
+          </label>
+        </div>
+        <div class="search-results" id="searchResults"></div>
+      </div>
+    `;
+
+    const searchInput = document.getElementById('searchInput');
+    const searchBtn = document.getElementById('searchBtn');
+    const searchResults = document.getElementById('searchResults');
+
+    const performSearch = async () => {
+      const query = searchInput.value.trim();
+      if (!query) {
+        searchResults.innerHTML = '<div class="empty-state">请输入搜索关键词</div>';
+        return;
+      }
+
+      const filters = {
+        messages: document.getElementById('filterMessages').checked,
+        documents: document.getElementById('filterDocuments').checked,
+        tasks: document.getElementById('filterTasks').checked
+      };
+
+      searchResults.innerHTML = '<div class="loading">搜索中...</div>';
+
+      try {
+        const results = [];
+        
+        // 搜索消息
+        if (filters.messages && currentGroup) {
+          try {
+            const messagesResult = await apiService.getGroupMessages(currentGroup._id);
+            if (messagesResult.messages) {
+              const matchedMessages = messagesResult.messages.filter(msg => 
+                msg.content.toLowerCase().includes(query.toLowerCase())
+              );
+              matchedMessages.forEach(msg => {
+                results.push({
+                  type: 'message',
+                  title: `消息 - ${msg.username}`,
+                  content: msg.content,
+                  time: msg.timestamp,
+                  group: currentGroup.name
+                });
+              });
+            }
+          } catch (err) {
+            console.error('搜索消息失败:', err);
+          }
+        }
+
+        // 搜索文档
+        if (filters.documents) {
+          try {
+            if (currentGroup) {
+              const docsResult = await apiService.getDocuments(currentGroup._id);
+              if (docsResult.documents) {
+                const matchedDocs = docsResult.documents.filter(doc => 
+                  doc.title.toLowerCase().includes(query.toLowerCase()) ||
+                  doc.content.toLowerCase().includes(query.toLowerCase())
+                );
+                matchedDocs.forEach(doc => {
+                  results.push({
+                    type: 'document',
+                    title: doc.title,
+                    content: doc.content.substring(0, 200),
+                    time: doc.updatedAt,
+                    id: doc._id,
+                    group: currentGroup.name
+                  });
+                });
+              }
+            }
+          } catch (err) {
+            console.error('搜索文档失败:', err);
+          }
+        }
+
+        // 搜索任务
+        if (filters.tasks && currentGroup) {
+          try {
+            const tasksResult = await apiService.getTasks(currentGroup._id);
+            if (tasksResult.tasks) {
+              const matchedTasks = tasksResult.tasks.filter(task => 
+                task.title.toLowerCase().includes(query.toLowerCase()) ||
+                (task.description && task.description.toLowerCase().includes(query.toLowerCase()))
+              );
+              matchedTasks.forEach(task => {
+                results.push({
+                  type: 'task',
+                  title: task.title,
+                  content: task.description || '',
+                  time: task.updatedAt,
+                  id: task._id,
+                  status: task.status,
+                  group: currentGroup.name
+                });
+              });
+            }
+          } catch (err) {
+            console.error('搜索任务失败:', err);
+          }
+        }
+
+        // 显示结果
+        if (results.length === 0) {
+          searchResults.innerHTML = '<div class="empty-state">未找到相关结果</div>';
+        } else {
+          searchResults.innerHTML = results.map(result => {
+            const typeIcon = {
+              message: '💬',
+              document: '📄',
+              task: '📋'
+            };
+            return `
+              <div class="search-result-item">
+                <div class="result-header">
+                  <span class="result-type">${typeIcon[result.type]} ${result.type === 'message' ? '消息' : result.type === 'document' ? '文档' : '任务'}</span>
+                  <span class="result-time">${new Date(result.time).toLocaleString()}</span>
+                </div>
+                <h4>${highlightText(result.title, query)}</h4>
+                <p>${highlightText(result.content, query)}</p>
+                ${result.group ? `<span class="result-group">群组: ${result.group}</span>` : ''}
+                ${result.status ? `<span class="result-status">状态: ${getStatusText(result.status)}</span>` : ''}
+              </div>
+            `;
+          }).join('');
+        }
+      } catch (error) {
+        searchResults.innerHTML = `<div class="empty-state">搜索失败: ${error.message}</div>`;
+      }
+    };
+
+    searchBtn.addEventListener('click', performSearch);
+    searchInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') performSearch();
+    });
+  }
+
+  function highlightText(text, query) {
+    if (!query) return text;
+    const regex = new RegExp(`(${query})`, 'gi');
+    return text.replace(regex, '<mark>$1</mark>');
+  }
+
+  function getStatusText(status) {
+    const statusMap = {
+      'pending': '待处理',
+      'in_progress': '进行中',
+      'completed': '已完成',
+      'terminated': '已终止'
+    };
+    return statusMap[status] || status;
+  }
+
+  function getActionText(action) {
+    const actionMap = {
+      'document_create': '创建文档',
+      'document_update': '更新文档',
+      'document_delete': '删除文档',
+      'content_edit': '编辑内容',
+      'title_edit': '修改标题',
+      'document_permission_change': '权限修改'
+    };
+    return actionMap[action] || action;
+  }
+
+  function getStatusText(status) {
+    const statusMap = {
+      'pending': '待处理',
+      'in_progress': '进行中',
+      'completed': '已完成',
+      'terminated': '已终止'
+    };
+    return statusMap[status] || status;
+  }
+
+
+  // 知识库管理
+  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}` }
+      });
+      
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      
+      const result = await response.json();
+      console.log('知识库数据:', result);
+      
+      // 后端返回的是 { success: true, data: { knowledgeList: [...], pagination: {...} } }
+      const knowledgeItems = result.data?.knowledgeList || [];
+      console.log('知识库条目数量:', knowledgeItems.length);
+
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>📚 知识库管理 - ${currentGroup.name}</h2>
+          <button class="btn-primary" id="createKnowledgeBtn">➕ 创建知识条目</button>
+        </div>
+        <div class="knowledge-grid" id="knowledgeList" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; padding: 20px;"></div>
+        <div id="knowledgeModal" class="modal hidden">
+          <div class="modal-content">
+            <h3 id="modalTitle">创建知识条目</h3>
+            <form id="knowledgeForm">
+              <div class="form-group">
+                <label>📌 标题</label>
+                <input type="text" name="title" required style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px;">
+              </div>
+              <div class="form-group">
+                <label>📝 内容</label>
+                <textarea name="content" rows="6" required style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px;"></textarea>
+              </div>
+              <div class="form-group">
+                <label>🏷️ 标签（用逗号分隔）</label>
+                <input type="text" name="tags" placeholder="例如: 技术,文档,教程" style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px;">
+              </div>
+              <div class="form-group" style="display: flex; align-items: center; gap: 10px; padding: 15px; background: var(--bg-tertiary); border-radius: 8px; margin-top: 15px;">
+                <input type="checkbox" name="isShared" id="isSharedCheckbox" style="width: 20px; height: 20px; cursor: pointer;">
+                <label for="isSharedCheckbox" style="margin: 0; cursor: pointer; display: flex; align-items: center; gap: 8px;">
+                  <span style="font-size: 18px;">🌐</span>
+                  <div>
+                    <div style="font-weight: 600; color: var(--text-primary);">共享到所有群组</div>
+                    <div style="font-size: 12px; color: var(--text-secondary); margin-top: 2px;">开启后，此知识条目将对所有群组可见</div>
+                  </div>
+                </label>
+              </div>
+              <div style="display: flex; gap: 10px; margin-top: 20px;">
+                <button type="submit" class="btn-primary" style="flex: 1;">保存</button>
+                <button type="button" class="btn-secondary" id="closeKnowledgeModal" style="flex: 1;">取消</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      `;
+
+      const knowledgeList = document.getElementById('knowledgeList');
+      if (knowledgeItems.length === 0) {
+        knowledgeList.innerHTML = '<div class="empty-state" style="grid-column: 1/-1;">暂无知识条目</div>';
+      } else {
+        knowledgeItems.forEach(item => {
+          const card = document.createElement('div');
+          card.className = 'knowledge-card';
+          card.style.cssText = 'background: var(--bg-secondary); padding: 20px; border-radius: 12px; border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s; position: relative;';
+          card.innerHTML = `
+            ${item.isShared ? '<div style="position: absolute; top: 15px; right: 15px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px;"><span>🌐</span><span>已共享</span></div>' : ''}
+            <h3 style="margin: 0 0 10px 0; font-size: 18px; ${item.isShared ? 'padding-right: 80px;' : ''}">${item.title}</h3>
+            <p style="color: var(--text-secondary); margin: 0 0 15px 0; line-height: 1.6;">${item.content.substring(0, 150)}${item.content.length > 150 ? '...' : ''}</p>
+            <div class="knowledge-meta" style="font-size: 12px; color: var(--text-tertiary); margin-bottom: 10px;">
+              <span>👤 ${item.author?.username || '未知'}</span>
+              <span style="margin-left: 15px;">📅 ${new Date(item.createdAt).toLocaleDateString()}</span>
+            </div>
+            ${item.tags && item.tags.length > 0 ? `
+              <div class="tags" style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px;">
+                ${item.tags.map(tag => `<span class="tag" style="background: var(--primary); color: white; padding: 4px 10px; border-radius: 12px; font-size: 12px;">${tag}</span>`).join('')}
+              </div>
+            ` : ''}
+            <div style="display: flex; gap: 10px;">
+              <button class="btn-secondary btn-sm" data-id="${item._id}" data-action="edit" style="flex: 1;">✏️ 编辑</button>
+              <button class="btn-danger btn-sm" data-id="${item._id}" data-action="delete" style="flex: 1;">🗑️ 删除</button>
+            </div>
+          `;
+          card.onmouseenter = () => {
+            card.style.transform = 'translateY(-4px)';
+            card.style.boxShadow = '0 8px 16px rgba(0,0,0,0.1)';
+          };
+          card.onmouseleave = () => {
+            card.style.transform = 'translateY(0)';
+            card.style.boxShadow = 'none';
+          };
+          knowledgeList.appendChild(card);
+        });
+
+        document.querySelectorAll('[data-action="edit"]').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            const item = knowledgeItems.find(k => k._id === btn.dataset.id);
+            document.getElementById('modalTitle').textContent = '编辑知识条目';
+            document.querySelector('[name="title"]').value = item.title;
+            document.querySelector('[name="content"]').value = item.content;
+            document.querySelector('[name="tags"]').value = item.tags?.join(', ') || '';
+            document.getElementById('isSharedCheckbox').checked = item.isShared || false;
+            document.getElementById('knowledgeForm').dataset.editId = item._id;
+            document.getElementById('knowledgeModal').classList.remove('hidden');
+          });
+        });
+
+        document.querySelectorAll('[data-action="download"]').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            try {
+              const response = await fetch(`http://localhost:8765/api/backup/download/${btn.dataset.filename}`, {
+                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 = btn.dataset.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"]').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('删除成功！');
+                await renderKnowledgeView(container);
+              } catch (error) {
+                alert('删除失败: ' + error.message);
+              }
+            }
+          });
+        });
+      }
+
+      document.getElementById('createKnowledgeBtn').addEventListener('click', () => {
+        document.getElementById('modalTitle').textContent = '创建知识条目';
+        document.getElementById('knowledgeForm').reset();
+        delete document.getElementById('knowledgeForm').dataset.editId;
+        document.getElementById('knowledgeModal').classList.remove('hidden');
+      });
+
+      document.getElementById('closeKnowledgeModal').addEventListener('click', () => {
+        document.getElementById('knowledgeModal').classList.add('hidden');
+      });
+
+      document.getElementById('knowledgeForm').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+        const data = {
+          title: formData.get('title'),
+          content: formData.get('content'),
+          tags: formData.get('tags').split(',').map(t => t.trim()).filter(t => t),
+          groupId: currentGroup._id,
+          isShared: document.getElementById('isSharedCheckbox').checked
+        };
+
+        try {
+          const editId = e.target.dataset.editId;
+          const url = editId 
+            ? `http://localhost:8765/api/knowledge/${editId}`
+            : 'http://localhost:8765/api/knowledge';
+          const method = editId ? 'PUT' : 'POST';
+
+          const response = await fetch(url, {
+            method,
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${token}`
+            },
+            body: JSON.stringify(data)
+          });
+
+          if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.message || '操作失败');
+          }
+
+          const result = await response.json();
+          console.log('知识库操作结果:', result);
+
+          alert(editId ? '更新成功！' : '创建成功！');
+          document.getElementById('knowledgeModal').classList.add('hidden');
+          
+          // 刷新知识库列表
+          await renderKnowledgeView(container);
+        } catch (error) {
+          console.error('知识库操作错误:', error);
+          alert('操作失败: ' + error.message);
+        }
+      });
+    } catch (error) {
+      container.innerHTML = `<div class="empty-state">加载失败: ${error.message}</div>`;
+    }
+  }
+
+  // 工作流管理
+  
+  // 格式化工作流触发条件
+  function formatWorkflowTrigger(trigger) {
+    if (!trigger) return '未设置';
+    
+    // 如果是字符串，直接转换
+    if (typeof trigger === 'string') {
+      const triggerNames = {
+        'document_create': '📄 文档创建时',
+        'document_update': '✏️ 文档更新时',
+        'document_delete': '🗑️ 文档删除时',
+        'task_create': '📋 任务创建时',
+        'task_complete': '✅ 任务完成时',
+        'task_overdue': '⏰ 任务逾期时',
+        'member_join': '👥 成员加入时',
+        'group_create': '🏢 群组创建时',
+        'scheduled': '⏱️ 定时触发',
+        'manual': '🖱️ 手动触发'
+      };
+      return triggerNames[trigger] || trigger;
+    }
+    
+    // 如果是对象，解析详细信息
+    const parts = [];
+    
+    if (trigger.event) {
+      const eventNames = {
+        'document_created': '📄 文档创建',
+        'document_updated': '✏️ 文档更新',
+        'document_deleted': '🗑️ 文档删除',
+        'task_created': '📋 任务创建',
+        'task_completed': '✅ 任务完成',
+        'task_overdue': '⏰ 任务逾期',
+        'member_joined': '👥 成员加入',
+        'group_created': '🏢 群组创建',
+        'message_sent': '💬 消息发送',
+        'file_uploaded': '📎 文件上传'
+      };
+      parts.push(eventNames[trigger.event] || trigger.event);
+    }
+    
+    if (trigger.conditions && Object.keys(trigger.conditions).length > 0) {
+      const conditions = [];
+      for (const [key, value] of Object.entries(trigger.conditions)) {
+        const conditionNames = {
+          'group': '群组',
+          'user': '用户',
+          'keyword': '关键词',
+          'status': '状态',
+          'priority': '优先级'
+        };
+        const conditionName = conditionNames[key] || key;
+        conditions.push(`${conditionName}=${value}`);
+      }
+      if (conditions.length > 0) {
+        parts.push(`(条件: ${conditions.join(', ')})`);
+      }
+    }
+    
+    if (trigger.schedule) {
+      parts.push(`⏱️ 定时: ${trigger.schedule}`);
+    }
+    
+    return parts.length > 0 ? parts.join(' ') : '自定义触发条件';
+  }
+
+async function renderWorkflowView(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?.workflows || [];
+
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>⚙️ 工作流管理 - ${currentGroup.name}</h2>
+          <button class="btn-primary" id="createWorkflowBtn">➕ 创建工作流</button>
+        </div>
+        <div class="workflow-grid" id="workflowList" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; padding: 20px;"></div>
+        <div id="workflowModal" class="modal hidden">
+          <div class="modal-content" style="max-width: 700px;">
+            <div class="modal-header" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; margin: -20px -20px 20px -20px;">
+              <h3 style="margin: 0; display: flex; align-items: center; gap: 10px;">
+                <span style="font-size: 24px;">⚙️</span>
+                <span>创建工作流</span>
+              </h3>
+            </div>
+            <form id="workflowForm">
+              <div class="form-group" style="margin-bottom: 20px;">
+                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary);">⚙️ 工作流名称</label>
+                <input type="text" name="name" required placeholder="例如：文档审批流程" style="width: 100%; padding: 12px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; transition: border-color 0.2s;">
+              </div>
+              <div class="form-group" style="margin-bottom: 20px;">
+                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary);">📝 描述</label>
+                <textarea name="description" rows="3" placeholder="描述这个工作流的用途..." style="width: 100%; padding: 12px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; resize: vertical; transition: border-color 0.2s;"></textarea>
+              </div>
+              <div class="form-group" style="margin-bottom: 20px;">
+                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary);">⚡ 触发条件</label>
+                <select name="trigger" style="width: 100%; padding: 12px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; cursor: pointer; transition: border-color 0.2s;">
+                  <option value="document_create">📄 文档创建时</option>
+                  <option value="document_update">✏️ 文档更新时</option>
+                  <option value="document_delete">🗑️ 文档删除时</option>
+                  <option value="task_create">📋 任务创建时</option>
+                  <option value="task_complete">✅ 任务完成时</option>
+                  <option value="task_overdue">⏰ 任务逾期时</option>
+                  <option value="member_join">👥 成员加入时</option>
+                  <option value="group_create">🏢 群组创建时</option>
+                  <option value="scheduled">⏱️ 定时触发</option>
+                  <option value="manual">🖱️ 手动触发</option>
+                </select>
+              </div>
+              <div class="form-group" style="margin-bottom: 20px;">
+                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary);">🎯 执行操作</label>
+                <select name="action" style="width: 100%; padding: 12px; border: 2px solid var(--border); border-radius: 8px; font-size: 14px; cursor: pointer; transition: border-color 0.2s;">
+                  <option value="send_notification">📧 发送通知</option>
+                  <option value="send_email">✉️ 发送邮件</option>
+                  <option value="create_task">📋 创建任务</option>
+                  <option value="update_status">🔄 更新状态</option>
+                  <option value="assign_permission">🔐 分配权限</option>
+                  <option value="backup_data">💾 备份数据</option>
+                  <option value="generate_report">📊 生成报告</option>
+                  <option value="call_api">🔗 调用外部API</option>
+                </select>
+              </div>
+              <div class="form-group" style="margin-bottom: 20px;">
+                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary);">⚙️ 操作参数 (JSON格式)</label>
+                <textarea name="actionParams" rows="4" placeholder='{"message": "任务已完成", "recipients": ["user1"]}' style="width: 100%; padding: 12px; border: 2px solid var(--border); border-radius: 8px; font-size: 13px; font-family: monospace; resize: vertical; transition: border-color 0.2s;"></textarea>
+                <div style="margin-top: 8px; font-size: 12px; color: var(--text-tertiary);">
+                  💡 提示：使用 JSON 格式配置操作参数
+                </div>
+              </div>
+              <div style="display: flex; gap: 12px; margin-top: 25px;">
+                <button type="submit" class="btn-primary" style="flex: 1; padding: 12px; border-radius: 8px; font-weight: 600; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border: none; cursor: pointer; transition: transform 0.2s;">创建</button>
+                <button type="button" class="btn-secondary" id="closeWorkflowModal" style="flex: 1; padding: 12px; border-radius: 8px; font-weight: 600;">取消</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      `;
+
+      const workflowList = document.getElementById('workflowList');
+      if (workflows.length === 0) {
+        workflowList.innerHTML = '<div class="empty-state" style="grid-column: 1/-1;">暂无工作流</div>';
+      } else {
+        workflows.forEach(workflow => {
+          const card = document.createElement('div');
+          card.className = 'workflow-card';
+          card.style.cssText = 'background: var(--bg-secondary); padding: 20px; border-radius: 12px; border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s;';
+          const isActive = workflow.status === 'active';
+          card.innerHTML = `
+            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px;">
+              <h3 style="margin: 0; font-size: 18px;">${workflow.name}</h3>
+              <span style="padding: 4px 10px; border-radius: 12px; font-size: 12px; background: ${isActive ? 'var(--success)' : 'var(--warning)'}; color: white;">${isActive ? '✅ 活跃' : '⏸️ 暂停'}</span>
+            </div>
+            <p style="color: var(--text-secondary); margin: 10px 0; line-height: 1.6;">${workflow.description || '无描述'}</p>
+            <div class="workflow-meta" style="font-size: 12px; color: var(--text-tertiary); margin: 10px 0;">
+              <span>🔔 触发条件: ${formatWorkflowTrigger(workflow.trigger)}</span>
+            </div>
+            <div style="display: flex; gap: 10px; margin-top: 15px;">
+              <button class="btn-secondary btn-sm" data-id="${workflow._id}" data-action="toggle" style="flex: 1;">
+                ${isActive ? '⏸️ 暂停' : '▶️ 启用'}
+              </button>
+              <button class="btn-danger btn-sm" data-id="${workflow._id}" data-action="delete" style="flex: 1;">🗑️ 删除</button>
+            </div>
+          `;
+          card.onmouseenter = () => {
+            card.style.transform = 'translateY(-4px)';
+            card.style.boxShadow = '0 8px 16px rgba(0,0,0,0.1)';
+          };
+          card.onmouseleave = () => {
+            card.style.transform = 'translateY(0)';
+            card.style.boxShadow = 'none';
+          };
+          workflowList.appendChild(card);
+        });
+
+        document.querySelectorAll('[data-action="toggle"]').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            try {
+              await fetch(`http://localhost:8765/api/workflows/${btn.dataset.id}/toggle`, {
+                method: 'POST',
+                headers: { 'Authorization': `Bearer ${token}` }
+              });
+              await renderWorkflowView(container);
+            } catch (error) {
+              alert('操作失败: ' + error.message);
+            }
+          });
+        });
+
+        document.querySelectorAll('[data-action="delete"]').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('删除成功！');
+                await renderWorkflowView(container);
+              } catch (error) {
+                alert('删除失败: ' + error.message);
+              }
+            }
+          });
+        });
+      }
+
+      document.getElementById('createWorkflowBtn').addEventListener('click', () => {
+        document.getElementById('workflowModal').classList.remove('hidden');
+      });
+
+      document.getElementById('closeWorkflowModal').addEventListener('click', () => {
+        document.getElementById('workflowModal').classList.add('hidden');
+      });
+
+      document.getElementById('workflowForm').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.target);
+        const data = {
+          name: formData.get('name'),
+          description: formData.get('description'),
+          trigger: formData.get('trigger'),
+          groupId: currentGroup._id,
+          actions: []
+        };
+
+        try {
+          await fetch('http://localhost:8765/api/workflows', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${token}`
+            },
+            body: JSON.stringify(data)
+          });
+          alert('创建成功！');
+          document.getElementById('workflowModal').classList.add('hidden');
+          await renderWorkflowView(container);
+        } catch (error) {
+          alert('创建失败: ' + error.message);
+        }
+      });
+    } catch (error) {
+      container.innerHTML = `<div class="empty-state">加载失败: ${error.message}</div>`;
+    }
+  }
+
+  // 备份管理
+  async function renderBackupView(container) {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch('http://localhost:8765/api/backup/list', {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      const result = await response.json();
+      const backups = result.data?.backups || [];
+
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>💾 备份管理</h2>
+          <button class="btn-primary" id="createBackupBtn">➕ 创建备份</button>
+        </div>
+        <div class="backup-grid" id="backupList" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; padding: 20px;"></div>
+      `;
+
+      const backupList = document.getElementById('backupList');
+      if (backups.length === 0) {
+        backupList.innerHTML = '<div class="empty-state" style="grid-column: 1/-1;">暂无备份</div>';
+      } else {
+        backups.forEach(backup => {
+          const card = document.createElement('div');
+          card.className = 'backup-card';
+          card.style.cssText = 'background: var(--bg-secondary); padding: 20px; border-radius: 12px; border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s;';
+          const size = (backup.size / 1024 / 1024).toFixed(2);
+          card.innerHTML = `
+            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
+              <div style="font-size: 48px;">📦</div>
+              <div style="flex: 1;">
+                <h3 style="margin: 0 0 5px 0; font-size: 16px;">${backup.filename}</h3>
+                <p style="margin: 0; font-size: 14px; color: var(--text-secondary);">${size} MB</p>
+              </div>
+            </div>
+            <div class="backup-meta" style="font-size: 12px; color: var(--text-tertiary); margin-bottom: 15px;">
+              <span>📅 ${new Date(backup.createdAt).toLocaleString()}</span>
+            </div>
+            <div style="display: flex; gap: 10px;">
+              <button class="btn-primary btn-sm" data-backup-name="${backup.name}" data-filename="${backup.filename}" data-action="download" style="flex: 1;">⬇️ 下载</button>
+              <button class="btn-danger btn-sm" data-backup-name="${backup.name}" data-action="delete" style="flex: 1;">🗑️ 删除</button>
+            </div>
+          `;
+          card.onmouseenter = () => {
+            card.style.transform = 'translateY(-4px)';
+            card.style.boxShadow = '0 8px 16px rgba(0,0,0,0.1)';
+          };
+          card.onmouseleave = () => {
+            card.style.transform = 'translateY(0)';
+            card.style.boxShadow = 'none';
+          };
+          backupList.appendChild(card);
+        });
+
+        
+        // 下载按钮事件
+        document.querySelectorAll('[data-action="download"]').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            try {
+              const backupName = btn.dataset.backupName; // 使用 name 而不是 filename
+              const filename = btn.dataset.filename;
+              const token = localStorage.getItem('token');
+              
+              console.log('开始下载备份:', { backupName, filename });
+              
+              // 使用 fetch 下载，带 Authorization header
+              const response = await fetch(`http://localhost:8765/api/backup/download/${backupName}`, {
+                method: 'GET',
+                headers: {
+                  'Authorization': `Bearer ${token}`
+                }
+              });
+              
+              if (!response.ok) {
+                throw new Error(`下载失败: ${response.status} ${response.statusText}`);
+              }
+              
+              // 获取文件内容
+              const blob = await response.blob();
+              console.log('文件下载成功，大小:', blob.size, 'bytes');
+              
+              // 创建下载链接
+              const url = window.URL.createObjectURL(blob);
+              const link = document.createElement('a');
+              link.href = url;
+              link.download = filename;
+              link.style.display = 'none';
+              document.body.appendChild(link);
+              link.click();
+              
+              // 清理
+              setTimeout(() => {
+                document.body.removeChild(link);
+                window.URL.revokeObjectURL(url);
+              }, 100);
+              
+              // 显示提示
+              const originalText = btn.textContent;
+              btn.textContent = '✅ 下载成功';
+              btn.disabled = true;
+              
+              setTimeout(() => {
+                btn.textContent = originalText;
+                btn.disabled = false;
+              }, 2000);
+              
+            } catch (error) {
+              console.error('下载失败:', error);
+              alert('下载失败: ' + error.message);
+              btn.textContent = '⬇️ 下载';
+              btn.disabled = false;
+            }
+          });
+        });
+
+        // 删除按钮事件
+        document.querySelectorAll('[data-action="delete"]').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            if (confirm('确定要删除这个备份吗？')) {
+              try {
+                const backupName = btn.dataset.backupName; // 使用 name 而不是 filename
+                console.log('删除备份:', backupName);
+                
+                const response = await fetch(`http://localhost:8765/api/backup/${backupName}`, {
+                  method: 'DELETE',
+                  headers: { 'Authorization': `Bearer ${token}` }
+                });
+                
+                if (!response.ok) {
+                  throw new Error(`删除失败: ${response.status}`);
+                }
+                
+                alert('删除成功！');
+                await renderBackupView(container);
+              } catch (error) {
+                console.error('删除失败:', error);
+                alert('删除失败: ' + error.message);
+              }
+            }
+          });
+        });
+      }
+
+      document.getElementById('createBackupBtn').addEventListener('click', async () => {
+        if (confirm('确定要创建新备份吗？这可能需要一些时间。')) {
+          const btn = document.getElementById('createBackupBtn');
+          btn.disabled = true;
+          btn.textContent = '⏳ 创建中...';
+          try {
+            await fetch('http://localhost:8765/api/backup/create', {
+              method: 'POST',
+              headers: { 'Authorization': `Bearer ${token}` }
+            });
+            alert('备份创建成功！');
+            await renderBackupView(container);
+          } catch (error) {
+            alert('创建失败: ' + error.message);
+          } finally {
+            btn.disabled = false;
+            btn.textContent = '➕ 创建备份';
+          }
+        }
+      });
+    } catch (error) {
+      container.innerHTML = `<div class="empty-state">加载失败: ${error.message}</div>`;
+    }
+  }
+
+  // AI助手
+  async function renderAIView(container) {
+    container.innerHTML = '<div class="empty-state">AI助手功能开发中...</div>';
+  }
+
+  // 数据导出
+  async function renderExportView(container) {
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>📤 数据导出</h2>
+      </div>
+      <div class="export-container" style="padding: 20px;">
+        <div class="export-options" style="background: var(--bg-secondary); padding: 30px; border-radius: 12px; margin-bottom: 20px;">
+          <h3 style="margin: 0 0 20px 0;">选择导出内容</h3>
+          <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px;">
+            <label style="display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg); border-radius: 8px; cursor: pointer;">
+              <input type="checkbox" id="exportGroups" checked style="width: 18px; height: 18px;">
+              <span>👥 群组信息</span>
+            </label>
+            <label style="display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg); border-radius: 8px; cursor: pointer;">
+              <input type="checkbox" id="exportDocuments" checked style="width: 18px; height: 18px;">
+              <span>📄 文档</span>
+            </label>
+            <label style="display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg); border-radius: 8px; cursor: pointer;">
+              <input type="checkbox" id="exportTasks" checked style="width: 18px; height: 18px;">
+              <span>📋 任务</span>
+            </label>
+            <label style="display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg); border-radius: 8px; cursor: pointer;">
+              <input type="checkbox" id="exportMessages" checked style="width: 18px; height: 18px;">
+              <span>💬 消息</span>
+            </label>
+            <label style="display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg); border-radius: 8px; cursor: pointer;">
+              <input type="checkbox" id="exportFiles" style="width: 18px; height: 18px;">
+              <span>📎 文件</span>
+            </label>
+          </div>
+          
+          <h3 style="margin: 25px 0 15px 0;">导出格式</h3>
+          <select id="exportFormat" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 25px;">
+            <option value="json">JSON</option>
+            <option value="csv">CSV</option>
+            <option value="excel">Excel</option>
+          </select>
+
+          <button class="btn-primary" id="exportBtn" style="width: 100%; padding: 15px; font-size: 16px;">🚀 开始导出</button>
+        </div>
+        
+        <div class="export-history" style="background: var(--bg-secondary); padding: 30px; border-radius: 12px;">
+          <h3 style="margin: 0 0 20px 0;">📜 导出历史</h3>
+          <div id="historyList">加载中...</div>
+        </div>
+      </div>
+    `;
+
+    // 加载导出历史
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch('http://localhost:8765/api/export/history', {
+        headers: { 'Authorization': `Bearer ${token}` }
+      });
+      const result = await response.json();
+      const historyList = document.getElementById('historyList');
+      
+      if (result.exports && result.exports.length > 0) {
+        historyList.innerHTML = result.exports.map(exp => `
+          <div class="export-item" style="display: flex; justify-content: space-between; align-items: center; padding: 15px; background: var(--bg); border-radius: 8px; margin-bottom: 10px;">
+            <div>
+              <div style="font-weight: 600; margin-bottom: 5px;">📦 ${exp.format.toUpperCase()} 导出</div>
+              <div style="font-size: 12px; color: var(--text-secondary);">📅 ${new Date(exp.createdAt).toLocaleString()}</div>
+            </div>
+            <a href="http://localhost:8765/api/export/download/${exp.filename}" class="btn-sm btn-primary" download style="text-decoration: none;">⬇️ 下载</a>
+          </div>
+        `).join('');
+      } else {
+        historyList.innerHTML = '<div class="empty-state">暂无导出记录</div>';
+      }
+    } catch (error) {
+      document.getElementById('historyList').innerHTML = '<div class="empty-state">加载失败</div>';
+    }
+
+    document.getElementById('exportBtn').addEventListener('click', async () => {
+      const options = {
+        groups: document.getElementById('exportGroups').checked,
+        documents: document.getElementById('exportDocuments').checked,
+        tasks: document.getElementById('exportTasks').checked,
+        messages: document.getElementById('exportMessages').checked,
+        files: document.getElementById('exportFiles').checked,
+        format: document.getElementById('exportFormat').value
+      };
+
+      const btn = document.getElementById('exportBtn');
+      btn.disabled = true;
+      btn.textContent = '⏳ 导出中...';
+
+      try {
+        const token = localStorage.getItem('token');
+        const response = await fetch('http://localhost:8765/api/export', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${token}`
+          },
+          body: JSON.stringify(options)
+        });
+        
+        if (response.ok) {
+          const blob = await response.blob();
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = `export-${Date.now()}.${options.format}`;
+          a.click();
+          alert('导出成功！');
+          await renderExportView(container);
+        } else {
+          throw new Error('导出失败');
+        }
+      } catch (error) {
+        alert('导出失败: ' + error.message);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = '🚀 开始导出';
+      }
+    });
+  }
+
+
+  // 协作白板
+  async function renderWhiteboardView(container) {
+    if (!currentGroup) {
+      container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
+      return;
+    }
+
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>🎨 协作白板 - ${currentGroup.name}</h2>
+        <div style="display: flex; gap: 10px;">
+          <button class="btn-secondary" id="clearCanvas">清空画布</button>
+          <button class="btn-primary" id="saveCanvas">保存白板</button>
+        </div>
+      </div>
+      <div class="whiteboard-container">
+        <div class="whiteboard-toolbar">
+          <button class="tool-btn active" data-tool="pen">✏️ 画笔</button>
+          <button class="tool-btn" data-tool="eraser">🧹 橡皮擦</button>
+          <button class="tool-btn" data-tool="text">📝 文字</button>
+          <button class="tool-btn" data-tool="shape">⬜ 形状</button>
+          <input type="color" id="colorPicker" value="#000000" title="颜色">
+          <input type="range" id="brushSize" min="1" max="20" value="3" title="画笔大小">
+        </div>
+        <canvas id="whiteboard" width="1200" height="600" style="border: 1px solid var(--border); background: white; cursor: crosshair;"></canvas>
+        <div class="whiteboard-users" id="whiteboardUsers">
+          <span class="user-badge">👤 ${user.username}</span>
+        </div>
+      </div>
+    `;
+
+    const canvas = document.getElementById('whiteboard');
+    const ctx = canvas.getContext('2d');
+    let isDrawing = false;
+    let currentTool = 'pen';
+    let currentColor = '#000000';
+    let brushSize = 3;
+
+    // 工具切换
+    document.querySelectorAll('.tool-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.tool-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentTool = btn.dataset.tool;
+      });
+    });
+
+    document.getElementById('colorPicker').addEventListener('change', (e) => {
+      currentColor = e.target.value;
+    });
+
+    document.getElementById('brushSize').addEventListener('input', (e) => {
+      brushSize = e.target.value;
+    });
+
+    // 绘画功能
+    let lastX = 0;
+    let lastY = 0;
+
+    canvas.addEventListener('mousedown', (e) => {
+      isDrawing = true;
+      const rect = canvas.getBoundingClientRect();
+      lastX = e.clientX - rect.left;
+      lastY = e.clientY - rect.top;
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+      if (!isDrawing) return;
+      
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      ctx.beginPath();
+      ctx.moveTo(lastX, lastY);
+      ctx.lineTo(x, y);
+      ctx.strokeStyle = currentTool === 'eraser' ? '#ffffff' : currentColor;
+      ctx.lineWidth = brushSize;
+      ctx.lineCap = 'round';
+      ctx.stroke();
+
+      lastX = x;
+      lastY = y;
+
+      // 发送绘画数据到其他用户
+      wsService.sendWhiteboardData(currentGroup._id, {
+        tool: currentTool,
+        color: currentColor,
+        size: brushSize,
+        from: { x: lastX, y: lastY },
+        to: { x, y }
+      });
+    });
+
+    canvas.addEventListener('mouseup', () => {
+      isDrawing = false;
+    });
+
+    canvas.addEventListener('mouseleave', () => {
+      isDrawing = false;
+    });
+
+    // 清空画布
+    document.getElementById('clearCanvas').addEventListener('click', () => {
+      if (confirm('确定要清空画布吗？')) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      }
+    });
+
+    // 保存白板
+    document.getElementById('saveCanvas').addEventListener('click', () => {
+      const dataURL = canvas.toDataURL('image/png');
+      const link = document.createElement('a');
+      link.download = `whiteboard-${Date.now()}.png`;
+      link.href = dataURL;
+      link.click();
+      alert('白板已保存！');
+    });
+
+    // 监听其他用户的绘画
+    wsService.on('whiteboard_draw', (data) => {
+      if (data.groupId === currentGroup._id && data.userId !== currentUserId) {
+        ctx.beginPath();
+        ctx.moveTo(data.from.x, data.from.y);
+        ctx.lineTo(data.to.x, data.to.y);
+        ctx.strokeStyle = data.tool === 'eraser' ? '#ffffff' : data.color;
+        ctx.lineWidth = data.size;
+        ctx.lineCap = 'round';
+        ctx.stroke();
+      }
+    });
+  }
+
+  // 集成管理
+  async function renderIntegrationsView(container) {
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>🔌 集成管理</h2>
+        <button class="btn-primary" id="addIntegrationBtn">添加集成</button>
+      </div>
+      <div class="integrations-grid">
+        <div class="integration-card">
+          <div class="integration-icon">📧</div>
+          <h3>邮件通知</h3>
+          <p>接收重要事件的邮件通知</p>
+          <button class="btn-secondary">配置</button>
+        </div>
+        <div class="integration-card">
+          <div class="integration-icon">🔔</div>
+          <h3>Webhook</h3>
+          <p>自定义 Webhook 集成</p>
+          <button class="btn-secondary">配置</button>
+        </div>
+        <div class="integration-card">
+          <div class="integration-icon">📱</div>
+          <h3>钉钉机器人</h3>
+          <p>发送消息到钉钉群</p>
+          <button class="btn-secondary">配置</button>
+        </div>
+        <div class="integration-card">
+          <div class="integration-icon">💬</div>
+          <h3>企业微信</h3>
+          <p>发送消息到企业微信</p>
+          <button class="btn-secondary">配置</button>
+        </div>
+        <div class="integration-card">
+          <div class="integration-icon">🤖</div>
+          <h3>Slack</h3>
+          <p>连接到 Slack 工作区</p>
+          <button class="btn-secondary">配置</button>
+        </div>
+        <div class="integration-card">
+          <div class="integration-icon">📊</div>
+          <h3>数据分析</h3>
+          <p>导出数据到分析平台</p>
+          <button class="btn-secondary">配置</button>
+        </div>
+      </div>
+    `;
+
+    document.getElementById('addIntegrationBtn').addEventListener('click', () => {
+      alert('添加自定义集成功能开发中...');
+    });
+  }
+
+  // 设置
+  async function renderSettingsView(container) {
+    container.innerHTML = `
+      <div class="view-header" style="margin-bottom: 30px;">
+        <h2 style="display: flex; align-items: center; gap: 12px; font-size: 28px;">
+          <span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">⚙️ 设置中心</span>
+        </h2>
+        <p style="color: var(--text-tertiary); margin-top: 8px;">管理您的个人偏好和系统配置</p>
+      </div>
+      <div class="settings-container" style="display: grid; gap: 24px; max-width: 900px;">
+        <!-- 个人设置卡片 -->
+        <div class="settings-card" style="background: var(--bg-secondary); padding: 28px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 24px;">
+            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px;">👤</div>
+            <h3 style="margin: 0; font-size: 20px; font-weight: 600;">个人设置</h3>
+          </div>
+          <div class="setting-item" style="margin-bottom: 20px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary); font-size: 14px;">👤 用户名</label>
+            <input type="text" value="${user.username}" disabled style="width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: 10px; font-size: 14px; background: var(--bg-tertiary); cursor: not-allowed;">
+          </div>
+          <div class="setting-item" style="margin-bottom: 20px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary); font-size: 14px;">📧 邮箱</label>
+            <input type="email" id="userEmail" value="${user.email || ''}" placeholder="请输入邮箱地址" style="width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: 10px; font-size: 14px; transition: border-color 0.2s;">
+          </div>
+          <div class="setting-item">
+            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary); font-size: 14px;">🔐 密码</label>
+            <button class="btn-secondary" id="changePasswordBtn" style="padding: 10px 20px; border-radius: 8px; font-weight: 600; transition: all 0.2s;">修改密码</button>
+          </div>
+        </div>
+
+        <!-- 通知设置卡片 -->
+        <div class="settings-card" style="background: var(--bg-secondary); padding: 28px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 24px;">
+            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px;">🔔</div>
+            <h3 style="margin: 0; font-size: 20px; font-weight: 600;">通知设置</h3>
+          </div>
+          <div class="setting-item" style="margin-bottom: 16px;">
+            <label style="display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px; border-radius: 8px; transition: background 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'" onmouseleave="this.style.background='transparent'">
+              <input type="checkbox" id="emailNotifications" checked style="width: 20px; height: 20px; cursor: pointer;">
+              <div>
+                <div style="font-weight: 600; color: var(--text-primary);">📧 邮件通知</div>
+                <div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;">接收重要事件的邮件提醒</div>
+              </div>
+            </label>
+          </div>
+          <div class="setting-item" style="margin-bottom: 16px;">
+            <label style="display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px; border-radius: 8px; transition: background 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'" onmouseleave="this.style.background='transparent'">
+              <input type="checkbox" id="desktopNotifications" checked style="width: 20px; height: 20px; cursor: pointer;">
+              <div>
+                <div style="font-weight: 600; color: var(--text-primary);">🖥️ 桌面通知</div>
+                <div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;">在桌面显示通知消息</div>
+              </div>
+            </label>
+          </div>
+          <div class="setting-item">
+            <label style="display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px; border-radius: 8px; transition: background 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'" onmouseleave="this.style.background='transparent'">
+              <input type="checkbox" id="soundNotifications" checked style="width: 20px; height: 20px; cursor: pointer;">
+              <div>
+                <div style="font-weight: 600; color: var(--text-primary);">🔊 声音提示</div>
+                <div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;">播放通知提示音</div>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <!-- 系统设置卡片 -->
+        <div class="settings-card" style="background: var(--bg-secondary); padding: 28px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 24px;">
+            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px;">🎨</div>
+            <h3 style="margin: 0; font-size: 20px; font-weight: 600;">系统设置</h3>
+          </div>
+          <div class="setting-item" style="margin-bottom: 20px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary); font-size: 14px;">🎨 主题</label>
+            <select id="themeSelect" style="width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: 10px; font-size: 14px; cursor: pointer; transition: border-color 0.2s;">
+              <option value="dark">🌙 深色模式（默认紫色）</option>
+              <option value="blue">💙 深色蓝色</option>
+              <option value="green">💚 深色绿色</option>
+              <option value="orange">🧡 深色橙色</option>
+              <option value="pink">💗 深色粉色</option>
+              <option value="light">☀️ 浅色模式</option>
+            </select>
+          </div>
+          <div class="setting-item">
+            <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary); font-size: 14px;">🌐 语言</label>
+            <select id="languageSelect" style="width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: 10px; font-size: 14px; cursor: pointer; transition: border-color 0.2s;">
+              <option value="zh-CN" selected>🇨🇳 简体中文</option>
+              <option value="en-US">🇺🇸 English</option>
+              <option value="ja-JP">🇯🇵 日本語</option>
+            </select>
+          </div>
+        </div>
+
+        <!-- 保存按钮 -->
+        <div class="settings-actions" style="display: flex; gap: 12px; justify-content: flex-end;">
+          <button class="btn-secondary" id="resetSettingsBtn" style="padding: 12px 24px; border-radius: 10px; font-weight: 600; transition: all 0.2s;">重置</button>
+          <button class="btn-primary" id="saveSettingsBtn" style="padding: 12px 32px; border-radius: 10px; font-weight: 600; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; cursor: pointer; transition: transform 0.2s;">💾 保存设置</button>
+        </div>
+      </div>
+    `;
+
+    // 添加卡片悬停效果
+    document.querySelectorAll('.settings-card').forEach(card => {
+      card.addEventListener('mouseenter', () => {
+        card.style.transform = 'translateY(-4px)';
+        card.style.boxShadow = '0 8px 24px rgba(0,0,0,0.12)';
+      });
+      card.addEventListener('mouseleave', () => {
+        card.style.transform = 'translateY(0)';
+        card.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';
+      });
+    });
+
+    // 输入框聚焦效果
+    document.querySelectorAll('input[type="email"], select').forEach(input => {
+      input.addEventListener('focus', () => {
+        input.style.borderColor = 'var(--primary)';
+      });
+      input.addEventListener('blur', () => {
+        input.style.borderColor = 'var(--border)';
+      });
+    });
+
+    document.getElementById('changePasswordBtn').addEventListener('click', () => {
+      const newPassword = prompt('请输入新密码:');
+      if (newPassword) {
+        alert('密码修改功能开发中...');
+      }
+    });
+
+    document.getElementById('resetSettingsBtn').addEventListener('click', () => {
+      if (confirm('确定要重置所有设置吗？')) {
+        location.reload();
+      }
+    });
+
+    document.getElementById('saveSettingsBtn').addEventListener('click', () => {
+      const settings = {
+        email: document.getElementById('userEmail').value,
+        emailNotifications: document.getElementById('emailNotifications').checked,
+        desktopNotifications: document.getElementById('desktopNotifications').checked,
+        soundNotifications: document.getElementById('soundNotifications').checked,
+        theme: document.getElementById('themeSelect').value,
+        language: document.getElementById('languageSelect').value
+      };
+      localStorage.setItem('userSettings', JSON.stringify(settings));
+      
+      // 应用主题
+      applyTheme(settings.theme);
+      
+      alert('✅ 设置已保存！');
+    });
+
+    // 主题切换监听
+    document.getElementById('themeSelect').addEventListener('change', (e) => {
+      applyTheme(e.target.value);
+    });
+
+    // 加载保存的设置
+    const savedSettings = localStorage.getItem('userSettings');
+    if (savedSettings) {
+      const settings = JSON.parse(savedSettings);
+      if (settings.email) document.getElementById('userEmail').value = settings.email;
+      document.getElementById('emailNotifications').checked = settings.emailNotifications !== false;
+      document.getElementById('desktopNotifications').checked = settings.desktopNotifications !== false;
+      document.getElementById('soundNotifications').checked = settings.soundNotifications !== false;
+      if (settings.theme) {
+        document.getElementById('themeSelect').value = settings.theme;
+        applyTheme(settings.theme);
+      }
+      if (settings.language) document.getElementById('languageSelect').value = settings.language;
+    }
+  }
+
+  // 主题应用函数
+  function applyTheme(theme) {
+    const root = document.documentElement;
+    
+    // 主题配置
+    const themes = {
+      dark: {
+        primary: '#6366f1',
+        primaryDark: '#4f46e5',
+        secondary: '#8b5cf6',
+        bgDark: '#0f172a',
+        bgCard: '#1e293b',
+        bgHover: '#334155',
+        textPrimary: '#f1f5f9',
+        textSecondary: '#94a3b8',
+        border: '#334155'
+      },
+      blue: {
+        primary: '#3b82f6',
+        primaryDark: '#2563eb',
+        secondary: '#06b6d4',
+        bgDark: '#0c1222',
+        bgCard: '#1a2332',
+        bgHover: '#2a3442',
+        textPrimary: '#e0f2fe',
+        textSecondary: '#7dd3fc',
+        border: '#2a3442'
+      },
+      green: {
+        primary: '#10b981',
+        primaryDark: '#059669',
+        secondary: '#34d399',
+        bgDark: '#0a1f1a',
+        bgCard: '#1a2f2a',
+        bgHover: '#2a3f3a',
+        textPrimary: '#d1fae5',
+        textSecondary: '#6ee7b7',
+        border: '#2a3f3a'
+      },
+      orange: {
+        primary: '#f59e0b',
+        primaryDark: '#d97706',
+        secondary: '#fb923c',
+        bgDark: '#1f1a0a',
+        bgCard: '#2f2a1a',
+        bgHover: '#3f3a2a',
+        textPrimary: '#fef3c7',
+        textSecondary: '#fcd34d',
+        border: '#3f3a2a'
+      },
+      pink: {
+        primary: '#ec4899',
+        primaryDark: '#db2777',
+        secondary: '#f472b6',
+        bgDark: '#1f0a1a',
+        bgCard: '#2f1a2a',
+        bgHover: '#3f2a3a',
+        textPrimary: '#fce7f3',
+        textSecondary: '#f9a8d4',
+        border: '#3f2a3a'
+      },
+      light: {
+        primary: '#6366f1',
+        primaryDark: '#4f46e5',
+        secondary: '#8b5cf6',
+        bgDark: '#ffffff',
+        bgCard: '#f8fafc',
+        bgHover: '#e2e8f0',
+        textPrimary: '#0f172a',
+        textSecondary: '#475569',
+        border: '#cbd5e1'
+      }
+    };
+    
+    const selectedTheme = themes[theme] || themes.dark;
+    
+    // 应用CSS变量
+    root.style.setProperty('--primary', selectedTheme.primary);
+    root.style.setProperty('--primary-dark', selectedTheme.primaryDark);
+    root.style.setProperty('--secondary', selectedTheme.secondary);
+    root.style.setProperty('--bg-dark', selectedTheme.bgDark);
+    root.style.setProperty('--bg-card', selectedTheme.bgCard);
+    root.style.setProperty('--bg-hover', selectedTheme.bgHover);
+    root.style.setProperty('--text-primary', selectedTheme.textPrimary);
+    root.style.setProperty('--text-secondary', selectedTheme.textSecondary);
+    root.style.setProperty('--border', selectedTheme.border);
+    
+    // 保存到localStorage
+    localStorage.setItem('currentTheme', theme);
+  }
+
+  // 帮助
+  async function renderHelpView(container) {
+    container.innerHTML = `
+      <div class="view-header" style="margin-bottom: 30px;">
+        <h2 style="display: flex; align-items: center; gap: 12px; font-size: 28px;">
+          <span style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">❓ 帮助中心</span>
+        </h2>
+        <p style="color: var(--text-tertiary); margin-top: 8px;">快速找到您需要的帮助和支持</p>
+      </div>
+      
+      <div class="help-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 24px; max-width: 1200px;">
+        <!-- 快速开始卡片 -->
+        <div class="help-card" style="background: var(--bg-secondary); padding: 28px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
+            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px;">📖</div>
+            <h3 style="margin: 0; font-size: 20px; font-weight: 600;">快速开始</h3>
+          </div>
+          <ul style="list-style: none; padding: 0; margin: 0;">
+            <li style="margin-bottom: 12px;">
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>如何创建群组？</span>
+              </a>
+            </li>
+            <li style="margin-bottom: 12px;">
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>如何邀请成员？</span>
+              </a>
+            </li>
+            <li style="margin-bottom: 12px;">
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>如何创建文档？</span>
+              </a>
+            </li>
+            <li>
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>如何使用协作白板？</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <!-- 功能说明卡片 -->
+        <div class="help-card" style="background: var(--bg-secondary); padding: 28px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
+            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px;">🔧</div>
+            <h3 style="margin: 0; font-size: 20px; font-weight: 600;">功能说明</h3>
+          </div>
+          <ul style="list-style: none; padding: 0; margin: 0;">
+            <li style="margin-bottom: 12px;">
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>群组管理</span>
+              </a>
+            </li>
+            <li style="margin-bottom: 12px;">
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>任务管理</span>
+              </a>
+            </li>
+            <li style="margin-bottom: 12px;">
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>文档协作</span>
+              </a>
+            </li>
+            <li style="margin-bottom: 12px;">
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>知识库</span>
+              </a>
+            </li>
+            <li style="margin-bottom: 12px;">
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>工作流引擎</span>
+              </a>
+            </li>
+            <li>
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>AI 智能助手</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <!-- 常见问题卡片 -->
+        <div class="help-card" style="background: var(--bg-secondary); padding: 28px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
+            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px;">❓</div>
+            <h3 style="margin: 0; font-size: 20px; font-weight: 600;">常见问题</h3>
+          </div>
+          <ul style="list-style: none; padding: 0; margin: 0;">
+            <li style="margin-bottom: 12px;">
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>如何重置密码？</span>
+              </a>
+            </li>
+            <li style="margin-bottom: 12px;">
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>如何导出数据？</span>
+              </a>
+            </li>
+            <li style="margin-bottom: 12px;">
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>如何备份数据？</span>
+              </a>
+            </li>
+            <li>
+              <a href="#" class="help-link" style="display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: all 0.2s;" onmouseenter="this.style.background='var(--bg-tertiary)'; this.style.paddingLeft='16px';" onmouseleave="this.style.background='transparent'; this.style.paddingLeft='10px';">
+                <span style="color: var(--primary);">▶</span>
+                <span>如何联系技术支持？</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <!-- 联系我们卡片 -->
+        <div class="help-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 28px; border-radius: 16px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); transition: transform 0.2s, box-shadow 0.2s; color: white;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
+            <div style="width: 48px; height: 48px; background: rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px;">📞</div>
+            <h3 style="margin: 0; font-size: 20px; font-weight: 600;">联系我们</h3>
+          </div>
+          <p style="margin: 0 0 16px 0; opacity: 0.95; line-height: 1.6;">如果您有任何问题或建议，请通过以下方式联系我们：</p>
+          <ul style="list-style: none; padding: 0; margin: 0;">
+            <li style="margin-bottom: 12px; display: flex; align-items: center; gap: 10px; opacity: 0.95;">
+              <span>📧</span>
+              <span>support@collabdocchat.com</span>
+            </li>
+            <li style="margin-bottom: 12px;">
+              <a href="https://github.com/shijinghao/collabdocchat" target="_blank" style="display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; opacity: 0.95; transition: opacity 0.2s;" onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.95'">
+                <span>🌐</span>
+                <span>GitHub</span>
+              </a>
+            </li>
+            <li>
+              <a href="https://www.npmjs.com/package/collabdocchat" target="_blank" style="display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; opacity: 0.95; transition: opacity 0.2s;" onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.95'">
+                <span>📦</span>
+                <span>npm Package</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <!-- 关于卡片 -->
+        <div class="help-card" style="background: var(--bg-secondary); padding: 28px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; grid-column: span 2;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
+            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px;">ℹ️</div>
+            <h3 style="margin: 0; font-size: 20px; font-weight: 600;">关于 CollabDocChat</h3>
+          </div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+            <div>
+              <p style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: var(--primary);">CollabDocChat v2.3.0</p>
+              <p style="margin: 0 0 12px 0; color: var(--text-secondary); line-height: 1.6;">开源的实时协作文档聊天平台，提供强大的团队协作功能。</p>
+              <p style="margin: 0; color: var(--text-tertiary); font-size: 14px;">© 2026 CollabDocChat. All rights reserved.</p>
+            </div>
+            <div style="background: var(--bg-tertiary); padding: 20px; border-radius: 12px;">
+              <h4 style="margin: 0 0 12px 0; font-size: 16px;">核心特性</h4>
+              <ul style="margin: 0; padding-left: 20px; color: var(--text-secondary); line-height: 1.8; font-size: 14px;">
+                <li>实时协作编辑</li>
+                <li>智能 AI 助手</li>
+                <li>工作流自动化</li>
+                <li>知识库管理</li>
+                <li>协作白板</li>
+                <li>数据备份导出</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    // 添加卡片悬停效果
+    document.querySelectorAll('.help-card').forEach(card => {
+      card.addEventListener('mouseenter', () => {
+        card.style.transform = 'translateY(-4px)';
+        card.style.boxShadow = '0 8px 24px rgba(0,0,0,0.12)';
+      });
+      card.addEventListener('mouseleave', () => {
+        card.style.transform = 'translateY(0)';
+        const isGradient = card.style.background.includes('gradient');
+        card.style.boxShadow = isGradient ? '0 4px 12px rgba(102, 126, 234, 0.3)' : '0 2px 8px rgba(0,0,0,0.05)';
+      });
+    });
+  }
+
+  async function renderView(view) {
+    const contentArea = document.getElementById('contentArea');
+    
+    switch(view) {
+      case 'groups':
+        await renderGroupsView(contentArea);
+        break;
+      case 'tasks':
+        await renderTasksView(contentArea);
+        break;
+      case 'documents':
+        await renderDocumentsView(contentArea);
+        break;
+      case 'chat':
+        await renderChatView(contentArea);
+        break;
+      case 'files':
+        await renderFilesView(contentArea);
+        break;
+      case 'search':
+        await renderSearchView(contentArea);
+        break;
+      case 'call':
+        await renderCallView(contentArea);
+        break;
+      case 'audit':
+        await renderAuditView(contentArea);
+        break;
+      case 'knowledge':
+        await renderKnowledgeView(contentArea);
+        break;
+      case 'workflow':
+        await renderWorkflowView(contentArea);
+        break;
+      case 'backup':
+        await renderBackupView(contentArea);
+        break;
+      case 'export':
+        await renderExportView(contentArea);
+        break;
+      case 'ai':
+        await renderAIView(contentArea);
+        break;
+      case 'export':
+        await renderExportView(contentArea);
+        break;
+      case 'whiteboard':
+        await renderWhiteboardView(contentArea);
+        break;
+      case 'settings':
+        await renderSettingsView(contentArea);
+        break;
+      case 'help':
+        await renderHelpView(contentArea);
+        break;
+    }
+  }
+
+  renderView('groups');
+}
+
+// 主题初始化函数（在页面加载时调用）
+function applyThemeOnLoad(theme) {
+  const root = document.documentElement;
+  
+  const themes = {
+    dark: {
+      primary: '#6366f1',
+      primaryDark: '#4f46e5',
+      secondary: '#8b5cf6',
+      bgDark: '#0f172a',
+      bgCard: '#1e293b',
+      bgHover: '#334155',
+      textPrimary: '#f1f5f9',
+      textSecondary: '#94a3b8',
+      border: '#334155'
+    },
+    blue: {
+      primary: '#3b82f6',
+      primaryDark: '#2563eb',
+      secondary: '#06b6d4',
+      bgDark: '#0c1222',
+      bgCard: '#1a2332',
+      bgHover: '#2a3442',
+      textPrimary: '#e0f2fe',
+      textSecondary: '#7dd3fc',
+      border: '#2a3442'
+    },
+    green: {
+      primary: '#10b981',
+      primaryDark: '#059669',
+      secondary: '#34d399',
+      bgDark: '#0a1f1a',
+      bgCard: '#1a2f2a',
+      bgHover: '#2a3f3a',
+      textPrimary: '#d1fae5',
+      textSecondary: '#6ee7b7',
+      border: '#2a3f3a'
+    },
+    orange: {
+      primary: '#f59e0b',
+      primaryDark: '#d97706',
+      secondary: '#fb923c',
+      bgDark: '#1f1a0a',
+      bgCard: '#2f2a1a',
+      bgHover: '#3f3a2a',
+      textPrimary: '#fef3c7',
+      textSecondary: '#fcd34d',
+      border: '#3f3a2a'
+    },
+    pink: {
+      primary: '#ec4899',
+      primaryDark: '#db2777',
+      secondary: '#f472b6',
+      bgDark: '#1f0a1a',
+      bgCard: '#2f1a2a',
+      bgHover: '#3f2a3a',
+      textPrimary: '#fce7f3',
+      textSecondary: '#f9a8d4',
+      border: '#3f2a3a'
+    },
+    light: {
+      primary: '#6366f1',
+      primaryDark: '#4f46e5',
+      secondary: '#8b5cf6',
+      bgDark: '#ffffff',
+      bgCard: '#f8fafc',
+      bgHover: '#e2e8f0',
+      textPrimary: '#0f172a',
+      textSecondary: '#475569',
+      border: '#cbd5e1'
+    }
+  };
+  
+  const selectedTheme = themes[theme] || themes.dark;
+  
+  root.style.setProperty('--primary', selectedTheme.primary);
+  root.style.setProperty('--primary-dark', selectedTheme.primaryDark);
+  root.style.setProperty('--secondary', selectedTheme.secondary);
+  root.style.setProperty('--bg-dark', selectedTheme.bgDark);
+  root.style.setProperty('--bg-card', selectedTheme.bgCard);
+  root.style.setProperty('--bg-hover', selectedTheme.bgHover);
+  root.style.setProperty('--text-primary', selectedTheme.textPrimary);
+  root.style.setProperty('--text-secondary', selectedTheme.textSecondary);
+  root.style.setProperty('--border', selectedTheme.border);
+}
+