collabdocchat 1.0.0

package/src/pages/user-dashboard.js

@@ -0,0 +1,906 @@
+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 renderUserDashboard(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-user">用户</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="allgroups">
+            <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>
+        </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 'allgroups':
+        await renderAllGroupsView(contentArea);
+        break;
+      case 'tasks':
+        await renderTasksView(contentArea);
+        break;
+      case 'documents':
+        await renderDocumentsView(contentArea);
+        break;
+      case 'files':
+        await renderFilesView(contentArea);
+        break;
+      case 'chat':
+        await renderChatView(contentArea);
+        break;
+      case 'search':
+        await renderSearchView(contentArea);
+        break;
+    }
+  }
+
+  async function renderGroupsView(container) {
+    const result = await apiService.getGroups();
+    groups = result.groups;
+
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>我的群组</h2>
+      </div>
+      <div class="groups-grid" id="groupsList"></div>
+    `;
+
+    const groupsList = document.getElementById('groupsList');
+    if (groups.length === 0) {
+      groupsList.innerHTML = '<div class="empty-state">您还没有加入任何群组<br>请前往"所有群组"查看并加入</div>';
+      return;
+    }
+
+    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>
+          <span>📋 ${group.tasks.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="leave">退出群组</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="leave"]').forEach(btn => {
+      btn.addEventListener('click', async () => {
+        if (confirm('确定要退出该群组吗？')) {
+          try {
+            await apiService.leaveGroup(btn.dataset.id);
+            alert('已退出群组');
+            await renderGroupsView(container);
+          } catch (error) {
+            alert('退出失败: ' + error.message);
+          }
+        }
+      });
+    });
+  }
+
+  async function renderAllGroupsView(container) {
+    const allGroupsResult = await apiService.getAllGroups();
+    const myGroupsResult = await apiService.getGroups();
+    const myGroupIds = myGroupsResult.groups.map(g => g._id);
+
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>所有群组</h2>
+      </div>
+      <div class="groups-grid" id="allGroupsList"></div>
+    `;
+
+    const allGroupsList = document.getElementById('allGroupsList');
+    allGroupsResult.groups.forEach(group => {
+      const isJoined = myGroupIds.includes(group._id);
+      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>
+        ${isJoined ? 
+          '<div style="color: var(--success); margin-top: 10px;">✓ 已加入</div>' :
+          `<button class="btn-primary" data-id="${group._id}" data-action="join">加入群组</button>`
+        }
+      `;
+      allGroupsList.appendChild(groupCard);
+    });
+
+    document.querySelectorAll('[data-action="join"]').forEach(btn => {
+      btn.addEventListener('click', async () => {
+        try {
+          await apiService.joinGroup(btn.dataset.id);
+          alert('加入成功！');
+          await renderAllGroupsView(container);
+        } catch (error) {
+          alert('加入失败: ' + error.message);
+        }
+      });
+    });
+  }
+
+  async function renderTasksView(container) {
+    try {
+      const result = await apiService.getMyTasks();
+      
+      container.innerHTML = `
+        <div class="view-header">
+          <h2>我的任务</h2>
+        </div>
+        <div class="tasks-list" id="tasksList"></div>
+      `;
+
+      const tasksList = document.getElementById('tasksList');
+      
+      if (result.tasks.length === 0) {
+        tasksList.innerHTML = '<div class="empty-state">暂无任务</div>';
+        return;
+      }
+
+      result.tasks.forEach(task => {
+        const taskCard = document.createElement('div');
+        taskCard.className = `task-card status-${task.status}`;
+        taskCard.innerHTML = `
+          <h3>${task.title}</h3>
+          <p>${task.description}</p>
+          <div class="task-meta">
+            <span class="status-badge">${getStatusText(task.status)}</span>
+            <span>群组: ${task.group.name}</span>
+            ${task.deadline ? `<span>截止: ${new Date(task.deadline).toLocaleDateString()}</span>` : ''}
+          </div>
+          ${task.relatedDocument ? `<a href="#" class="doc-link" data-id="${task.relatedDocument._id}">📄 查看相关文档</a>` : ''}
+          <div class="task-actions">
+            ${task.status === 'pending' ? `<button class="btn-primary btn-sm" data-id="${task._id}" data-action="start">开始任务</button>` : ''}
+            ${task.status === 'in_progress' ? `<button class="btn-success btn-sm" data-id="${task._id}" data-action="complete">完成任务</button>` : ''}
+          </div>
+        `;
+        tasksList.appendChild(taskCard);
+      });
+
+      // 任务操作
+      document.querySelectorAll('[data-action]').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          const taskId = btn.dataset.id;
+          const action = btn.dataset.action;
+          const status = action === 'start' ? 'in_progress' : 'completed';
+          
+          try {
+            await apiService.updateTaskStatus(taskId, status);
+            await renderTasksView(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>
+      `;
+    }
+  }
+
+  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>
+      </div>
+      <div class="documents-list" id="docsList"></div>
+    `;
+
+    const docsList = document.getElementById('docsList');
+    
+    if (result.documents.length === 0) {
+      docsList.innerHTML = '<div class="empty-state">暂无文档</div>';
+      return;
+    }
+
+    result.documents.forEach(doc => {
+      const docCard = document.createElement('div');
+      docCard.className = 'document-card';
+      docCard.innerHTML = `
+        <h3>📄 ${doc.title}</h3>
+        <div class="doc-meta">
+          <span>创建者: ${doc.creator.username}</span>
+          <span>${doc.permission === 'readonly' ? '🔒 只读' : '✏️ 可编辑'}</span>
+          <span>更新: ${new Date(doc.updatedAt).toLocaleString()}</span>
+        </div>
+        <button class="btn-edit" data-id="${doc._id}">
+          ${doc.permission === 'readonly' ? '查看' : '编辑'}
+        </button>
+      `;
+      docsList.appendChild(docCard);
+    });
+
+    document.querySelectorAll('.btn-edit').forEach(btn => {
+      btn.addEventListener('click', () => {
+        renderDocumentEditor(container, btn.dataset.id);
+      });
+    });
+  }
+
+  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>
+          ${doc.permission === 'editable' ? '<button class="btn-primary" id="saveBtn">保存</button>' : ''}
+        </div>
+        <div id="editor" ${doc.permission === 'readonly' ? 'class="readonly"' : ''}></div>
+        <div class="editor-footer">
+          <span>最后编辑: ${new Date(doc.updatedAt).toLocaleString()}</span>
+        </div>
+      </div>
+    `;
+
+    // 初始化 Quill 编辑器
+    const quill = new Quill('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: doc.permission === 'readonly' ? false : [
+          [{ 'header': [1, 2, 3, false] }],
+          ['bold', 'italic', 'underline', 'strike'],
+          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+          [{ 'color': [] }, { 'background': [] }],
+          ['link', 'image', 'code-block'],
+          ['clean']
+        ]
+      },
+      readOnly: doc.permission === 'readonly'
+    });
+
+    // 设置初始内容
+    quill.root.innerHTML = doc.content || '';
+    
+    // 实时同步
+    if (doc.permission === 'editable') {
+      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>
+              ${file.uploader._id === currentUserId ? `<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);
+    const group = groupResult.group;
+    const isMutedAll = Boolean(group.mutedAll);
+    const isMutedMe = (group.mutedUsers || []).map(String).includes(String(currentUserId));
+    const canSpeak = !isMutedAll && !isMutedMe;
+
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>群聊 - ${currentGroup.name}</h2>
+      </div>
+      <div class="chat-container">
+        <div class="messages" id="messages"></div>
+        <div class="chat-input">
+          <button class="btn-emoji" id="emojiBtn" ${canSpeak ? '' : 'disabled'}>😊</button>
+          <input type="text" id="messageInput" placeholder="${canSpeak ? '输入消息...' : (isMutedAll ? '全体禁言中，无法发言' : '你已被禁言')}" ${canSpeak ? '' : 'disabled'}>
+          <button class="btn-primary" id="sendBtn" ${canSpeak ? '' : 'disabled'}>发送</button>
+        </div>
+        <emoji-picker id="emojiPicker" class="hidden"></emoji-picker>
+      </div>
+    `;
+
+    const messagesDiv = document.getElementById('messages');
+    const messageInput = document.getElementById('messageInput');
+    const sendBtn = document.getElementById('sendBtn');
+
+    // 加载历史消息
+    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 emojiBtn = document.getElementById('emojiBtn');
+    const emojiPicker = document.getElementById('emojiPicker');
+    
+    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();
+    }
+
+    // 监听消息
+    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;
+
+        // 显示通知（如果不是自己发送的消息）
+        if (data.userId !== currentUserId) {
+          showNotification(`${data.username} 在 ${currentGroup.name}`, data.content);
+        }
+      }
+    });
+
+    // 服务端拦截提示（比如被禁言/未加入群组）
+    wsService.on('chat_blocked', (data) => {
+      if (data.groupId === currentGroup._id) {
+        const notificationEl = document.createElement('div');
+        notificationEl.className = 'notification';
+        notificationEl.textContent = data.message || '消息发送失败';
+        messagesDiv.appendChild(notificationEl);
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      }
+    });
+
+    // 监听点名通知
+    wsService.on('call_response', (data) => {
+      if (data.groupId === currentGroup._id) {
+        const notificationEl = document.createElement('div');
+        notificationEl.className = 'notification';
+        notificationEl.textContent = `${data.username} 已响应点名`;
+        messagesDiv.appendChild(notificationEl);
+      }
+    });
+
+    // 发送消息
+    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 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) {
+          try {
+            const tasksResult = await apiService.getMyTasks();
+            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
+                });
+              });
+            }
+          } 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;
+  }
+
+  renderView('groups');
+}
+