collabdocchat 1.0.0

package/src/pages/admin-dashboard.js

@@ -0,0 +1,1493 @@
+import { ApiService } from '../services/api.js';
+import { AuthService } from '../services/auth.js';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+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 = [];
+
+  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>
+        </nav>
+
+        <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();
+  });
+
+  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;
+    }
+  }
+
+  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>
+    `;
+
+    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>
+            <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.getElementById('createTaskBtn').addEventListener('click', () => {
+      document.getElementById('createTaskModal').classList.remove('hidden');
+    });
+
+    document.getElementById('closeTaskModal').addEventListener('click', () => {
+      document.getElementById('createTaskModal').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);
+    
+    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">
+          <h3>创建新文档</h3>
+          <form id="createDocForm">
+            <div class="form-group">
+              <label>文档标题</label>
+              <input type="text" name="title" placeholder="请输入文档标题" required>
+            </div>
+            <div class="form-group">
+              <label>文档内容</label>
+              <textarea name="content" placeholder="请输入文档内容" rows="6"></textarea>
+            </div>
+            <div class="form-group">
+              <label>权限设置</label>
+              <select name="permission">
+                <option value="editable">可编辑</option>
+                <option value="readonly">只读</option>
+              </select>
+            </div>
+            <div style="display: flex; gap: 10px;">
+              <button type="submit" class="btn-primary">创建</button>
+              <button type="button" class="btn-secondary" id="closeDocModal">取消</button>
+            </div>
+          </form>
+        </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';
+        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">
+                <span>创建者: ${doc.creator.username}</span>
+                <span>${doc.permission === 'readonly' ? '🔒 只读' : '✏️ 可编辑'}</span>
+              </div>
+            </div>
+            <div style="display: flex; gap: 10px; align-items: center;">
+              <button class="btn-edit" data-id="${doc._id}">编辑</button>
+              <button class="btn-danger btn-sm" data-id="${doc._id}" data-action="delete-doc" title="删除文档" style="min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">🗑️ 删除</button>
+            </div>
+          </div>
+        `;
+        docsList.appendChild(docCard);
+      });
+
+      // 添加编辑按钮事件
+      document.querySelectorAll('.btn-edit').forEach(btn => {
+        btn.addEventListener('click', () => {
+          renderDocumentEditor(container, btn.dataset.id);
+        });
+      });
+
+      // 添加删除文档事件
+      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('createDocForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      try {
+        await apiService.createDocument(
+          formData.get('title'),
+          formData.get('content'),
+          currentGroup._id,
+          formData.get('permission')
+        );
+        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>
+        <div id="editor"></div>
+        <div class="editor-footer">
+          <span>最后编辑: ${new Date(doc.updatedAt).toLocaleString()}</span>
+        </div>
+      </div>
+    `;
+
+    // 初始化 Quill 编辑器
+    const quill = new Quill('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: [
+          [{ 'header': [1, 2, 3, false] }],
+          ['bold', 'italic', 'underline', 'strike'],
+          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+          [{ 'color': [] }, { 'background': [] }],
+          ['link', 'image', 'code-block'],
+          ['clean']
+        ]
+      }
+    });
+
+    // 设置初始内容
+    quill.root.innerHTML = doc.content || '';
+    
+    // 实时同步
+    let typingTimeout;
+    let saveTimeout;
+    
+    quill.on('text-change', () => {
+      clearTimeout(typingTimeout);
+      clearTimeout(saveTimeout);
+      wsService.sendTyping(documentId, user.username, true);
+      
+      typingTimeout = setTimeout(() => {
+        wsService.sendTyping(documentId, user.username, false);
+      }, 1000);
+
+      // 自动保存
+      saveTimeout = setTimeout(async () => {
+        const content = quill.root.innerHTML;
+        try {
+          await apiService.updateDocument(documentId, content);
+        } catch (error) {
+          console.error('自动保存失败:', error);
+        }
+      }, 2000);
+    });
+
+    document.getElementById('saveBtn').addEventListener('click', async () => {
+      try {
+        const content = quill.root.innerHTML;
+        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 selection = quill.getSelection();
+        quill.root.innerHTML = data.content;
+        if (selection) {
+          quill.setSelection(selection);
+        }
+      }
+    });
+
+    // 监听打字状态
+    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>
+        </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>
+    `;
+
+    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' : ''}`;
+          messageEl.innerHTML = `
+            <div class="message-header">
+              <span class="message-user">${msg.username}</span>
+              <span class="message-time">${new Date(msg.timestamp).toLocaleTimeString()}</span>
+            </div>
+            <div class="message-content">${msg.content}</div>
+          `;
+          messagesDiv.appendChild(messageEl);
+        });
+        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('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' : ''}`;
+        messageEl.innerHTML = `
+          <div class="message-header">
+            <span class="message-user">${data.username}</span>
+            <span class="message-time">${new Date(data.timestamp).toLocaleTimeString()}</span>
+          </div>
+          <div class="message-content">${data.content}</div>
+        `;
+        messagesDiv.appendChild(messageEl);
+        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();
+    });
+  }
+
+  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: 800px;">
+          <div class="modal-header">
+            <h3>操作详情</h3>
+            <button class="close-btn" id="closeAuditDetail">&times;</button>
+          </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);
+      }
+    }
+
+    // 显示操作详情
+    window.showAuditDetail = async (logId) => {
+      try {
+        // 这里我们需要从已加载的日志中找到对应的记录
+        // 在实际应用中可能需要单独的API来获取详情
+        const modal = document.getElementById('auditDetailModal');
+        const content = document.getElementById('auditDetailContent');
+        
+        // 简单实现：显示基本信息
+        content.innerHTML = `
+          <div class="audit-detail">
+            <p>操作ID: ${logId}</p>
+            <p>详细信息加载中...</p>
+          </div>
+        `;
+        
+        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;
+  }
+
+  renderView('groups');
+}
+